9e147c6335
* Add text tool to IO * Remove unnecessary parentheses * Fix text objects always grouped * Remove log * Fix text objects hidden on back side * Implement text scaling * Add inverse text outline * Warn about IO notes with only text objects This will result in a different error message than the case where no objects are added at all though, and the user can bypass the warning. Maybe this is better to avoid discarding the user's work if they have spent some time adding text. * Add isValidType * Use matches! * Lock aspect ratio of text objects * Reword misleading comment The confusion probably comes from the Fabric docs, which apparently need updating: http://fabricjs.com/docs/fabric.Canvas.html#uniformScaling * Do not count text objects when calculating current index * Make text objects respond to size changes * Fix uniform scaling not working when editing * Use Arial font * Escape colons and unify parsing * Handle scale factor when restricting shape to view * Use 'cloned' * Add text background * Tweak drawShape's params
115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
// Copyright: Ankitects Pty Ltd and contributors
|
|
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
|
|
/* eslint
|
|
@typescript-eslint/no-explicit-any: "off",
|
|
*/
|
|
|
|
import type { GetImageOcclusionNoteResponse_ImageOcclusion } from "@tslib/anki/image_occlusion_pb";
|
|
|
|
import type { Shape, ShapeOrShapes } from "./base";
|
|
import { Ellipse } from "./ellipse";
|
|
import { Point, Polygon } from "./polygon";
|
|
import { Rectangle } from "./rectangle";
|
|
import { Text } from "./text";
|
|
|
|
export function extractShapesFromClozedField(
|
|
occlusions: GetImageOcclusionNoteResponse_ImageOcclusion[],
|
|
): ShapeOrShapes[] {
|
|
const output: ShapeOrShapes[] = [];
|
|
for (const occlusion of occlusions) {
|
|
if (isValidType(occlusion.shape)) {
|
|
const props = Object.fromEntries(occlusion.properties.map(prop => [prop.name, prop.value]));
|
|
output.push(buildShape(occlusion.shape, props));
|
|
}
|
|
}
|
|
|
|
return output;
|
|
}
|
|
|
|
/** Locate all cloze divs in the review screen for the given selector, and convert them into BaseShapes.
|
|
*/
|
|
export function extractShapesFromRenderedClozes(selector: string): Shape[] {
|
|
return Array.from(document.querySelectorAll(selector)).flatMap((cloze) => {
|
|
if (cloze instanceof HTMLDivElement) {
|
|
return extractShapeFromRenderedCloze(cloze) ?? [];
|
|
} else {
|
|
return [];
|
|
}
|
|
});
|
|
}
|
|
|
|
function extractShapeFromRenderedCloze(cloze: HTMLDivElement): Shape | null {
|
|
const type = cloze.dataset.shape!;
|
|
if (
|
|
type !== "rect"
|
|
&& type !== "ellipse"
|
|
&& type !== "polygon"
|
|
&& type !== "text"
|
|
) {
|
|
return null;
|
|
}
|
|
const props = {
|
|
occludeInactive: cloze.dataset.occludeinactive === "1",
|
|
left: cloze.dataset.left,
|
|
top: cloze.dataset.top,
|
|
width: cloze.dataset.width,
|
|
height: cloze.dataset.height,
|
|
rx: cloze.dataset.rx,
|
|
ry: cloze.dataset.ry,
|
|
points: cloze.dataset.points,
|
|
text: cloze.dataset.text,
|
|
scale: cloze.dataset.scale,
|
|
};
|
|
return buildShape(type, props);
|
|
}
|
|
|
|
type ShapeType = "rect" | "ellipse" | "polygon" | "text";
|
|
|
|
function isValidType(type: string): type is ShapeType {
|
|
return ["rect", "ellipse", "polygon", "text"].includes(type);
|
|
}
|
|
|
|
function buildShape(type: ShapeType, props: Record<string, any>): Shape {
|
|
props.left = parseFloat(
|
|
Number.isNaN(Number(props.left)) ? ".0000" : props.left,
|
|
);
|
|
props.top = parseFloat(
|
|
Number.isNaN(Number(props.top)) ? ".0000" : props.top,
|
|
);
|
|
switch (type) {
|
|
case "rect": {
|
|
return new Rectangle({
|
|
...props,
|
|
width: parseFloat(props.width),
|
|
height: parseFloat(props.height),
|
|
});
|
|
}
|
|
case "ellipse": {
|
|
return new Ellipse({
|
|
...props,
|
|
rx: parseFloat(props.rx),
|
|
ry: parseFloat(props.ry),
|
|
});
|
|
}
|
|
case "polygon": {
|
|
if (props.points !== "") {
|
|
props.points = props.points.split(" ").map((point) => {
|
|
const [x, y] = point.split(",");
|
|
return new Point({ x, y });
|
|
});
|
|
} else {
|
|
props.points = [new Point({ x: 0, y: 0 })];
|
|
}
|
|
return new Polygon(props);
|
|
}
|
|
case "text": {
|
|
return new Text({
|
|
...props,
|
|
scaleX: parseFloat(props.scale),
|
|
scaleY: parseFloat(props.scale),
|
|
});
|
|
}
|
|
}
|
|
}
|