diff --git a/ts/image-occlusion/mask-editor.ts b/ts/image-occlusion/mask-editor.ts index 1ecc3a2fa..85c12b705 100644 --- a/ts/image-occlusion/mask-editor.ts +++ b/ts/image-occlusion/mask-editor.ts @@ -13,6 +13,7 @@ import { notesDataStore, tagsWritable, zoomResetValue } from "./store"; import Toast from "./Toast.svelte"; import { addShapesToCanvasFromCloze } from "./tools/add-from-cloze"; import { enableSelectable, moveShapeToCanvasBoundaries } from "./tools/lib"; +import { modifiedPolygon } from "./tools/tool-polygon"; import { undoStack } from "./tools/tool-undo-redo"; import type { Size } from "./types"; @@ -103,7 +104,13 @@ function initCanvas(onChange: () => void): fabric.Canvas { canvas.uniformScaling = false; canvas.uniScaleKey = "none"; moveShapeToCanvasBoundaries(canvas); - canvas.on("object:modified", onChange); + canvas.on("object:modified", (evt) => { + if (evt.target instanceof fabric.Polygon) { + modifiedPolygon(canvas, evt.target); + undoStack.onObjectModified(); + } + onChange(); + }); canvas.on("object:removed", onChange); return canvas; } diff --git a/ts/image-occlusion/tools/tool-polygon.ts b/ts/image-occlusion/tools/tool-polygon.ts index 73be9b279..f2dbef51a 100644 --- a/ts/image-occlusion/tools/tool-polygon.ts +++ b/ts/image-occlusion/tools/tool-polygon.ts @@ -193,15 +193,11 @@ const generatePolygon = (canvas: fabric.Canvas, pointsList): void => { undoStack.onObjectAdded(polygon.id); } - polygon.on("modified", () => { - modifiedPolygon(canvas, polygon); - undoStack.onObjectModified(); - }); - toggleDrawPolygon(canvas); }; -const modifiedPolygon = (canvas: fabric.Canvas, polygon: fabric.Polygon): void => { +// https://github.com/fabricjs/fabric.js/issues/6522 +export const modifiedPolygon = (canvas: fabric.Canvas, polygon: fabric.Polygon): void => { const matrix = polygon.calcTransformMatrix(); const transformedPoints = polygon.get("points") .map(function(p) { @@ -221,11 +217,6 @@ const modifiedPolygon = (canvas: fabric.Canvas, polygon: fabric.Polygon): void = noScaleCache: false, }); - polygon1.on("modified", () => { - modifiedPolygon(canvas, polygon1); - undoStack.onObjectModified(); - }); - canvas.remove(polygon); canvas.add(polygon1); };