From e486d6b5131067cd5297cd05c67eca42482f9e1e Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Sat, 13 Apr 2024 10:36:08 +0300
Subject: [PATCH] Improve typing of custom fabric.Object properties (#3134)

* Ensure increasing ordinals of new masks

* Add fabric.d.ts

* Revert "Ensure increasing ordinals of new masks"

This reverts commit dedfeec9adabe4867d54a68e99b270bb93337334.
---
 ts/routes/image-occlusion/fabric.d.ts             | 12 ++++++++++++
 ts/routes/image-occlusion/tools/lib.ts            |  4 ----
 ts/routes/image-occlusion/tools/tool-undo-redo.ts |  1 -
 3 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 ts/routes/image-occlusion/fabric.d.ts

diff --git a/ts/routes/image-occlusion/fabric.d.ts b/ts/routes/image-occlusion/fabric.d.ts
new file mode 100644
index 000000000..49fcb78ff
--- /dev/null
+++ b/ts/routes/image-occlusion/fabric.d.ts
@@ -0,0 +1,12 @@
+export {};
+
+declare global {
+    namespace fabric {
+        interface Object {
+            id: string;
+            ordinal: number;
+            /** a custom property set on groups in the ungrouping routine to avoid adding a spurious undo entry */
+            destroyed: boolean;
+        }
+    }
+}
diff --git a/ts/routes/image-occlusion/tools/lib.ts b/ts/routes/image-occlusion/tools/lib.ts
index 953ac290e..541c9bb69 100644
--- a/ts/routes/image-occlusion/tools/lib.ts
+++ b/ts/routes/image-occlusion/tools/lib.ts
@@ -64,12 +64,10 @@ export const groupShapes = (canvas: fabric.Canvas): void => {
     const activeObject = canvas.getActiveObject() as fabric.ActiveSelection;
     const items = activeObject.getObjects();
 
-    // @ts-expect-error not defined
     let minOrdinal: number | undefined = Math.min(...items.map((item) => item.ordinal));
     minOrdinal = Number.isNaN(minOrdinal) ? undefined : minOrdinal;
 
     items.forEach((item) => {
-        // @ts-expect-error not defined
         item.set({ opacity: 1, ordinal: minOrdinal });
     });
 
@@ -90,13 +88,11 @@ export const unGroupShapes = (canvas: fabric.Canvas): void => {
     const group = canvas.getActiveObject() as fabric.Group;
     const items = group.getObjects();
     group._restoreObjectsState();
-    // @ts-expect-error not defined
     group.destroyed = true;
 
     items.forEach((item) => {
         item.set({
             opacity: get(opacityStateStore) ? 0.4 : 1,
-            // @ts-expect-error not defined
             ordinal: undefined,
         });
         canvas.add(item);
diff --git a/ts/routes/image-occlusion/tools/tool-undo-redo.ts b/ts/routes/image-occlusion/tools/tool-undo-redo.ts
index aa073dfe4..96c545d64 100644
--- a/ts/routes/image-occlusion/tools/tool-undo-redo.ts
+++ b/ts/routes/image-occlusion/tools/tool-undo-redo.ts
@@ -50,7 +50,6 @@ class UndoStack {
         this.canvas = canvas;
         this.canvas.on("object:modified", (opts) => this.maybePush(opts));
         this.canvas.on("object:removed", (opts) => {
-            // @ts-expect-error `destroyed` is a custom property set on groups in the ungrouping routine to avoid adding a spurious undo entry
             if (!opts.target!.group && !opts.target!.destroyed) {
                 this.maybePush(opts);
             }