fix undo after undo happen, use transparent color in draw mode

Author: krmanik

ts/image-occlusion/SideToolbar.svelte

@@ -43,6 +43,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const disableFunctions = () => {
         instance.pause();
         stopDraw(canvas);
+        canvas.selectionColor = "rgba(100, 100, 255, 0.3)";
     };
 </script>
 

ts/image-occlusion/mask-editor.ts

@@ -70,10 +70,7 @@ export const setupMaskEditorForEdit = async (noteId: number, instance: PanZoom):
 };
 
 const initCanvas = (): fabric.Canvas => {
-    const canvas = new fabric.Canvas("canvas", {
-        hoverCursor: "pointer",
-        selectionBorderColor: "green",
-    });
+    const canvas = new fabric.Canvas("canvas");
     tagsWritable.set([]);
     globalThis.canvas = canvas;
     // enables uniform scaling by default without the need for the Shift key

ts/image-occlusion/tools/tool-ellipse.ts

@@ -9,6 +9,7 @@ import { objectAdded } from "./tool-undo-redo";
 const addedEllipseIds: string[] = [];
 
 export const drawEllipse = (canvas: fabric.Canvas): void => {
+    canvas.selectionColor = "rgba(0, 0, 0, 0)";
     let ellipse, isDown, origX, origY;
 
     stopDraw(canvas);

ts/image-occlusion/tools/tool-polygon.ts

@@ -17,6 +17,7 @@ let panzoomX = 1, panzoomY = 1;
 const addedPolygonIds: string[] = [];
 
 export const drawPolygon = (canvas: fabric.Canvas, panzoom: PanZoom): void => {
+    canvas.selectionColor = "rgba(0, 0, 0, 0)";
     canvas.on("mouse:down", function(options) {
         try {
             if (options.target && options.target.id === pointsList[0].id) {

ts/image-occlusion/tools/tool-rect.ts

@@ -9,6 +9,7 @@ import { objectAdded } from "./tool-undo-redo";
 const addedRectangleIds: string[] = [];
 
 export const drawRectangle = (canvas: fabric.Canvas): void => {
+    canvas.selectionColor = "rgba(0, 0, 0, 0)";
     let rect, isDown, origX, origY;
 
     stopDraw(canvas);

ts/image-occlusion/tools/tool-undo-redo.ts

@@ -33,7 +33,7 @@ export const undoRedoInit = (canvas: fabric.Canvas): void => {
 };
 
 const validShape = (shape: fabric.Object): boolean => {
-    if (shape.width <= 5 || shape.height <= 5 || !shape.id) return false;
+    if (shape.width <= 5 || shape.height <= 5) return false;
     if (shapeType.indexOf(shape.type) === -1) return false;
     return true;
 };