dnrops
/
anki
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

keep-text-in-occlusion (#3277)

This commit is contained in:
Pedro Schreiber 2024-07-20 07:48:37 -03:00 committed by GitHub
parent 0b38ecdbc7
commit 799912cfe3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
ts/routes/image-occlusion/review.ts
View File

@ -159,7 +159,7 @@ async function setupImageOcclusionInner(setupOptions?: SetupImageOcclusionOption
window.addEventListener("keydown", (event) => {
const button = document.getElementById("toggle");
if (button && button.style.display !== "none" && event.key === "M") {
toggleMasks();
toggleMasks(setupOptions);
}
});
oneTimeSetupDone = true;
@ -169,7 +169,7 @@ async function setupImageOcclusionInner(setupOptions?: SetupImageOcclusionOption
const button = document.getElementById("toggle");
if (button) {
if (document.querySelector("[data-occludeinactive=\"1\"]")) {
button.addEventListener("click", toggleMasks);
button.addEventListener("click", () => toggleMasks(setupOptions));
} else {
button.style.display = "none";
}
@ -182,13 +182,16 @@ function drawShapes(
canvas: HTMLCanvasElement,
onWillDrawShapes?: DrawShapesFilter,
onDidDrawShapes?: DrawShapesCallback,
allowedShapes?: Array<typeof Shape>,
): void {
const context: CanvasRenderingContext2D = canvas.getContext("2d")!;
const size = canvas;
const filterByAllowedShapes = (el: Shape) =>
(allowedShapes && allowedShapes.length > 0) ? allowedShapes.some(s => el instanceof s) : true;
let activeShapes = extractShapesFromRenderedClozes(".cloze");
let inactiveShapes = extractShapesFromRenderedClozes(".cloze-inactive");
let highlightShapes = extractShapesFromRenderedClozes(".cloze-highlight");
let activeShapes = extractShapesFromRenderedClozes(".cloze").filter(filterByAllowedShapes);
let inactiveShapes = extractShapesFromRenderedClozes(".cloze-inactive").filter(filterByAllowedShapes);
let highlightShapes = extractShapesFromRenderedClozes(".cloze-highlight").filter(filterByAllowedShapes);
let properties = getShapeProperties();
const processed = onWillDrawShapes?.({ activeShapes, inactiveShapes, highlightShapes, properties }, context);
@ -230,7 +233,12 @@ function drawShapes(
});
}
onDidDrawShapes?.({ activeShapes, inactiveShapes, highlightShapes, properties }, context);
onDidDrawShapes?.({
activeShapes,
inactiveShapes,
highlightShapes,
properties,
}, context);
}
interface DrawShapeParameters {
@ -452,14 +460,16 @@ function getShapeProperties(): ShapeProperties {
}
}
const toggleMasks = (): void => {
const canvas = document.getElementById(
"image-occlusion-canvas",
) as HTMLCanvasElement;
const display = canvas.style.display;
if (display === "none") {
canvas.style.display = "unset";
} else {
canvas.style.display = "none";
let hide = false;
const toggleMasks = (setupOptions?: SetupImageOcclusionOptions): void => {
const canvas = document.getElementById("image-occlusion-canvas") as HTMLCanvasElement;
const context = canvas.getContext("2d")!;
hide = !hide;
context.clearRect(0, 0, canvas.width, canvas.height);
if (hide) {
drawShapes(canvas, setupOptions?.onWillDrawShapes, setupOptions?.onDidDrawShapes, [Text]);
return;
}
drawShapes(canvas, setupOptions?.onWillDrawShapes, setupOptions?.onDidDrawShapes);
};