a53806e24a
* Simplify handling of occlusion types in editor code - Unify updateIONoteInEditMode(), setOcclusionFieldInner() and setOcclusionField() into updateOcclusionsField() - Don't use `includeInactive` property of Shape class in editor code - Drop `isEditMode` + Update the occlusions field every time a mask or text is updated, not only in editing mode but also in adding mode, so that IO cards can be previewed correctly in the card layout screen * Indicate current occlusion type in pop-up menu https://forums.ankiweb.net/t/anki-23-10-beta-5-6/35677/46 * Fix a11y warnings in Toolbar.svelte * Drop `occludeInactive` parameter from `MaskEditorAPI.getShapes()`
90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
// Copyright: Ankitects Pty Ltd and contributors
|
|
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
|
|
import { fabric } from "fabric";
|
|
|
|
import { SHAPE_MASK_COLOR } from "../tools/lib";
|
|
import type { ConstructorParams, Size } from "../types";
|
|
import { floatToDisplay } from "./floats";
|
|
import { xFromNormalized, xToNormalized, yFromNormalized, yToNormalized } from "./position";
|
|
|
|
export type ShapeOrShapes = Shape | Shape[];
|
|
|
|
/** Defines a basic shape that can have its coordinates stored in either
|
|
absolute pixels (relative to a containing canvas), or in normalized 0-1
|
|
form. Can be converted to a fabric object, or to a format suitable for
|
|
storage in a cloze note.
|
|
*/
|
|
export class Shape {
|
|
left: number;
|
|
top: number;
|
|
fill: string = SHAPE_MASK_COLOR;
|
|
/** Whether occlusions from other cloze numbers should be shown on the
|
|
* question side. Used only in reviewer code.
|
|
*/
|
|
occludeInactive?: boolean;
|
|
/* Cloze ordinal */
|
|
ordinal = 0;
|
|
|
|
constructor(
|
|
{ left = 0, top = 0, fill = SHAPE_MASK_COLOR, occludeInactive, ordinal = 0 }: ConstructorParams<Shape> = {},
|
|
) {
|
|
this.left = left;
|
|
this.top = top;
|
|
this.fill = fill;
|
|
this.occludeInactive = occludeInactive;
|
|
this.ordinal = ordinal;
|
|
}
|
|
|
|
/** Format numbers and remove default values, for easier serialization to
|
|
* text.
|
|
*/
|
|
toDataForCloze(): ShapeDataForCloze {
|
|
return {
|
|
left: floatToDisplay(this.left),
|
|
top: floatToDisplay(this.top),
|
|
...(this.fill === SHAPE_MASK_COLOR ? {} : { fill: this.fill }),
|
|
};
|
|
}
|
|
|
|
toFabric(size: Size): fabric.ForCloze {
|
|
const absolute = this.toAbsolute(size);
|
|
return new fabric.Object(absolute);
|
|
}
|
|
|
|
normalPosition(size: Size) {
|
|
return {
|
|
left: xToNormalized(size, this.left),
|
|
top: yToNormalized(size, this.top),
|
|
};
|
|
}
|
|
|
|
toNormal(size: Size): Shape {
|
|
return new Shape({
|
|
...this,
|
|
...this.normalPosition(size),
|
|
});
|
|
}
|
|
|
|
absolutePosition(size: Size) {
|
|
return {
|
|
left: xFromNormalized(size, this.left),
|
|
top: yFromNormalized(size, this.top),
|
|
};
|
|
}
|
|
|
|
toAbsolute(size: Size): Shape {
|
|
return new Shape({
|
|
...this,
|
|
...this.absolutePosition(size),
|
|
});
|
|
}
|
|
}
|
|
|
|
export interface ShapeDataForCloze {
|
|
left: string;
|
|
top: string;
|
|
fill?: string;
|
|
oi?: string;
|
|
}
|