GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 14:02:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

highlight io shapes in answer side (#3098)

Browse source
This commit is contained in:
Mani 2024-03-31 17:14:11 +08:00 committed by GitHub
parent 31e2dc1409
commit 038a0189d0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 49 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
rslib/src/cloze.rs
View file

@ -313,6 +313,12 @@ fn render_image_occlusion(text: &str, question_side: bool, active: bool, ordinal
ordinal,
&get_image_cloze_data(text)
)
} else if !question_side && active {
format!(
r#"<div class="cloze-highlight" data-ordinal="{}" {}></div>"#,
ordinal,
&get_image_cloze_data(text)
)
} else {
"".into()
}

2
rslib/src/image_occlusion/notetype.css
View file

@ -3,6 +3,8 @@
--active-shape-color: #ff8e8e;
--inactive-shape-border: 1px #212121;
--active-shape-border: 1px #212121;
--highlight-shape-color: #ff8e8e00;
--highlight-shape-border: 1px #ff8e8e;
}
.card {

43
ts/routes/image-occlusion/review.ts
View file

@ -12,6 +12,7 @@ import type { Size } from "./types";
export type DrawShapesData = {
activeShapes: Shape[];
inactiveShapes: Shape[];
highlightShapes: Shape[];
properties: ShapeProperties;
};
@ -181,12 +182,14 @@ function drawShapes(
let activeShapes = extractShapesFromRenderedClozes(".cloze");
let inactiveShapes = extractShapesFromRenderedClozes(".cloze-inactive");
let highlightShapes = extractShapesFromRenderedClozes(".cloze-highlight");
let properties = getShapeProperties();
const processed = onWillDrawShapes?.({ activeShapes, inactiveShapes, properties }, context);
const processed = onWillDrawShapes?.({ activeShapes, inactiveShapes, highlightShapes, properties }, context);
if (processed) {
activeShapes = processed.activeShapes;
inactiveShapes = processed.inactiveShapes;
highlightShapes = processed.highlightShapes;
properties = processed.properties;
}
@ -210,8 +213,18 @@ function drawShapes(
strokeWidth: properties.inActiveBorder.width,
});
}
for (const shape of highlightShapes) {
drawShape({
context,
size,
shape,
fill: properties.highlightShapeColor,
stroke: properties.highlightShapeBorder.color,
strokeWidth: properties.highlightShapeBorder.width,
});
}
onDidDrawShapes?.({ activeShapes, inactiveShapes, properties }, context);
onDidDrawShapes?.({ activeShapes, inactiveShapes, highlightShapes, properties }, context);
}
interface DrawShapeParameters {
@ -324,8 +337,10 @@ function topLeftOfPoints(points: { x: number; y: number }[]): {
export type ShapeProperties = {
activeShapeColor: string;
inActiveShapeColor: string;
highlightShapeColor: string;
activeBorder: { width: number; color: string };
inActiveBorder: { width: number; color: string };
highlightShapeBorder: { width: number; color: string };
};
function getShapeProperties(): ShapeProperties {
const canvas = document.getElementById("image-occlusion-canvas");
@ -339,6 +354,9 @@ function getShapeProperties(): ShapeProperties {
const inActiveShapeColor = computedStyle.getPropertyValue(
"--inactive-shape-color",
);
const highlightShapeColor = computedStyle.getPropertyValue(
"--highlight-shape-color",
);
// inactive shape border
const inActiveShapeBorder = computedStyle.getPropertyValue(
"--inactive-shape-border",
@ -353,12 +371,22 @@ function getShapeProperties(): ShapeProperties {
const activeBorder = activeShapeBorder.split(" ").filter((x) => x);
const activeShapeBorderWidth = parseFloat(activeBorder[0]);
const activeShapeBorderColor = activeBorder[1];
// highlight shape border
const highlightShapeBorder = computedStyle.getPropertyValue(
"--highlight-shape-border",
);
const highlightBorder = highlightShapeBorder.split(" ").filter((x) => x);
const highlightShapeBorderWidth = parseFloat(highlightBorder[0]);
const highlightShapeBorderColor = highlightBorder[1];
return {
activeShapeColor: activeShapeColor ? activeShapeColor : "#ff8e8e",
inActiveShapeColor: inActiveShapeColor
? inActiveShapeColor
: "#ffeba2",
highlightShapeColor: highlightShapeColor
? highlightShapeColor
: "#ff8e8e00",
activeBorder: {
width: !isNaN(activeShapeBorderWidth) ? activeShapeBorderWidth : 1,
color: activeShapeBorderColor
@ -371,12 +399,19 @@ function getShapeProperties(): ShapeProperties {
? inActiveShapeBorderColor
: "#212121",
},
highlightShapeBorder: {
width: !isNaN(highlightShapeBorderWidth) ? highlightShapeBorderWidth : 1,
color: highlightShapeBorderColor
? highlightShapeBorderColor
: "#ff8e8e",
},
};
} catch {
// return default values
return {
activeShapeColor: "#ff8e8e",
inActiveShapeColor: "#ffeba2",
highlightShapeColor: "#ff8e8e00",
activeBorder: {
width: 1,
color: "#212121",
@ -385,6 +420,10 @@ function getShapeProperties(): ShapeProperties {
width: 1,
color: "#212121",
},
highlightShapeBorder: {
width: 1,
color: "#ff8e8e",
},
};
}
}