Fix polygons closing when clicking existing masks while editing IO (#3990)

* fix polygons closing when clicking existing masks while editing io

* disallow selecting new polygons

* update CONTRIBUTORS

* preserve ids when pushing canvas state to undo stack

* rehandle tool changes after undoing/redoing

the polygon tool makes all objects unselectable, which isn't
preserved when restoring the canvas state after an undo/redo

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

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 }:

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 {

ts/routes/image-occlusion/shapes/polygon.ts

@@ -15,6 +15,7 @@ export class Polygon extends Shape {
     constructor({ points = [], ...rest }: ConstructorParams<Polygon> = {}) {
         super(rest);
         this.points = points;
+        this.id = "polygon-" + new Date().getTime();
     }
 
     toDataForCloze(): PolygonDataForCloze {

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 {

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 {

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();

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;
         }