GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

keep-text-in-occlusion (#3277)

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