diff --git a/ts/routes/image-occlusion/Toolbar.svelte b/ts/routes/image-occlusion/Toolbar.svelte index d9d854820..4ff9b5295 100644 --- a/ts/routes/image-occlusion/Toolbar.svelte +++ b/ts/routes/image-occlusion/Toolbar.svelte @@ -299,7 +299,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html ? 'left-border-radius' : 'right-border-radius'}" {iconSize} - on:click={tool.action} + on:click={() => { + tool.action(); + handleToolChanges(activeTool); + }} tooltip="{tool.tooltip()} ({getPlatformString(tool.shortcut)})" disabled={tool.name === "undo" ? !$undoStack.undoable diff --git a/ts/routes/image-occlusion/shapes/base.ts b/ts/routes/image-occlusion/shapes/base.ts index c0db48730..02a7cb4ec 100644 --- a/ts/routes/image-occlusion/shapes/base.ts +++ b/ts/routes/image-occlusion/shapes/base.ts @@ -26,6 +26,7 @@ export class Shape { occludeInactive?: boolean; /* Cloze ordinal */ ordinal: number | undefined; + id: string | undefined; constructor( { left = 0, top = 0, angle = 0, fill = SHAPE_MASK_COLOR, occludeInactive, ordinal = undefined }: diff --git a/ts/routes/image-occlusion/shapes/ellipse.ts b/ts/routes/image-occlusion/shapes/ellipse.ts index 1bbeac9c8..05d319be4 100644 --- a/ts/routes/image-occlusion/shapes/ellipse.ts +++ b/ts/routes/image-occlusion/shapes/ellipse.ts @@ -17,6 +17,7 @@ export class Ellipse extends Shape { super(rest); this.rx = rx; this.ry = ry; + this.id = "ellipse-" + new Date().getTime(); } toDataForCloze(): EllipseDataForCloze { diff --git a/ts/routes/image-occlusion/shapes/polygon.ts b/ts/routes/image-occlusion/shapes/polygon.ts index 9e967d0a6..c4f8b99b9 100644 --- a/ts/routes/image-occlusion/shapes/polygon.ts +++ b/ts/routes/image-occlusion/shapes/polygon.ts @@ -15,6 +15,7 @@ export class Polygon extends Shape { constructor({ points = [], ...rest }: ConstructorParams = {}) { super(rest); this.points = points; + this.id = "polygon-" + new Date().getTime(); } toDataForCloze(): PolygonDataForCloze { diff --git a/ts/routes/image-occlusion/shapes/rectangle.ts b/ts/routes/image-occlusion/shapes/rectangle.ts index 2e0b72f54..6b01d3bcc 100644 --- a/ts/routes/image-occlusion/shapes/rectangle.ts +++ b/ts/routes/image-occlusion/shapes/rectangle.ts @@ -17,6 +17,7 @@ export class Rectangle extends Shape { super(rest); this.width = width; this.height = height; + this.id = "rect-" + new Date().getTime(); } toDataForCloze(): RectangleDataForCloze { diff --git a/ts/routes/image-occlusion/shapes/text.ts b/ts/routes/image-occlusion/shapes/text.ts index 604edf3e3..53ef9e18b 100644 --- a/ts/routes/image-occlusion/shapes/text.ts +++ b/ts/routes/image-occlusion/shapes/text.ts @@ -28,6 +28,7 @@ export class Text extends Shape { this.scaleX = scaleX; this.scaleY = scaleY; this.fontSize = fontSize; + this.id = "text-" + new Date().getTime(); } toDataForCloze(): TextDataForCloze { diff --git a/ts/routes/image-occlusion/tools/tool-polygon.ts b/ts/routes/image-occlusion/tools/tool-polygon.ts index ca3556375..bf6a11896 100644 --- a/ts/routes/image-occlusion/tools/tool-polygon.ts +++ b/ts/routes/image-occlusion/tools/tool-polygon.ts @@ -197,6 +197,7 @@ const generatePolygon = (canvas: fabric.Canvas, pointsList): void => { strokeWidth: 1, strokeUniform: true, noScaleCache: false, + selectable: false, opacity: get(opacityStateStore) ? 0.4 : 1, }); polygon["id"] = "polygon-" + new Date().getTime(); diff --git a/ts/routes/image-occlusion/tools/tool-undo-redo.ts b/ts/routes/image-occlusion/tools/tool-undo-redo.ts index 7fdffba32..187a8b33d 100644 --- a/ts/routes/image-occlusion/tools/tool-undo-redo.ts +++ b/ts/routes/image-occlusion/tools/tool-undo-redo.ts @@ -116,7 +116,7 @@ class UndoStack { } private push(): void { - const entry = JSON.stringify(this.canvas); + const entry = JSON.stringify(this.canvas?.toJSON(["id"])); if (entry === this.stack[this.stack.length - 1]) { return; }