@mhamz.01/easyflow-whiteboard 2.37.0 → 2.39.0

package/dist/components/node/custom-node-overlay-layer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAS9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;AAaD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CA0hBzB"}
+{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAS9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;AAaD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CA6hBzB"}

package/dist/components/node/custom-node-overlay-layer.js

@@ -116,8 +116,10 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 return;
             }
             // ── Read from ref — not stale closure ──
-            const activeObjects = canvas.getActiveObjects();
-            const isTargetAlreadySelected = activeObjects.includes(target);
+            const activeObject = canvas.getActiveObject(); // the group/selection box
+            const activeObjects = canvas.getActiveObjects(); // individual objects inside it
+            const isTargetAlreadySelected = activeObjects.includes(target) || // clicked an individual selected object
+                activeObject === target; // clicked the selection box itself
             if (!isTargetAlreadySelected) {
                 setSelectedIds(new Set());
             }

package/dist/store/whiteboard-store.d.ts

@@ -62,38 +62,22 @@ interface WhiteboardState {
     addCanvasObject: (obj: FabricObject) => void;
     removeCanvasObject: (obj: FabricObject) => void;
     clearCanvasObjects: () => void;
+    selectedObjects: FabricObject[];
+    setSelectedObjects: (objects: FabricObject[]) => void;
     toolOptions: ToolOptions;
     setToolOption: <T extends keyof ToolOptions>(tool: T, option: keyof ToolOptions[T], value: any) => void;
     history: string[];
     historyIndex: number;
     canUndo: boolean;
     canRedo: boolean;
-    pushHistory: (state: string) => void;
+    pushHistory: (snapshot: string) => void;
     undo: () => string | null;
     redo: () => string | null;
-    setCanUndo: (canUndo: boolean) => void;
-    setCanRedo: (canRedo: boolean) => void;
+    setCanUndo: (v: boolean) => void;
+    setCanRedo: (v: boolean) => void;
     zoom: number;
     setZoom: (zoom: number) => void;
-    selectedObjects: FabricObject[];
-    setSelectedObjects: (objects: FabricObject[]) => void;
 }
-export declare const useWhiteboardStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<WhiteboardState>, "setState" | "devtools"> & {
-    setState(partial: WhiteboardState | Partial<WhiteboardState> | ((state: WhiteboardState) => WhiteboardState | Partial<WhiteboardState>), replace?: false | undefined, action?: (string | {
-        [x: string]: unknown;
-        [x: number]: unknown;
-        [x: symbol]: unknown;
-        type: string;
-    }) | undefined): void;
-    setState(state: WhiteboardState | ((state: WhiteboardState) => WhiteboardState), replace: true, action?: (string | {
-        [x: string]: unknown;
-        [x: number]: unknown;
-        [x: symbol]: unknown;
-        type: string;
-    }) | undefined): void;
-    devtools: {
-        cleanup: () => void;
-    };
-}>;
+export declare const useWhiteboardStore: import("zustand").UseBoundStore<import("zustand").StoreApi<WhiteboardState>>;
 export {};
 //# sourceMappingURL=whiteboard-store.d.ts.map

package/dist/store/whiteboard-store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-store.d.ts","sourceRoot":"","sources":["../../src/store/whiteboard-store.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"whiteboard-store.d.ts","sourceRoot":"","sources":["../../src/store/whiteboard-store.ts"],"names":[],"mappings":"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"}

package/dist/store/whiteboard-store.js

@@ -1,137 +1,84 @@
 import { create } from "zustand";
-import { devtools } from "zustand/middleware";
+// ─── Constants ────────────────────────────────────────────────────────────────
+// Each history entry is a full JSON canvas snapshot (can be 100KB+).
+// Without a cap: 200 actions × 100KB = 20MB of undo history in memory.
+const MAX_HISTORY = 50;
 const defaultToolOptions = {
-    pen: {
-        color: "#ffffff",
-        strokeWidth: 2,
-        opacity: 1,
-        strokeDashArray: null,
-    },
-    rectangle: {
-        fillColor: "transparent",
-        strokeColor: "#ffffff",
-        strokeWidth: 2,
-        strokeDashArray: null,
-    },
-    circle: {
-        fillColor: "transparent",
-        strokeColor: "#ffffff",
-        strokeWidth: 2,
-        strokeDashArray: null,
-    },
-    frame: {
-        fillColor: "#FFFFFF",
-        strokeColor: "#E5E7EB",
-        strokeWidth: 1,
-        strokeDashArray: null,
-    },
-    text: {
-        fontSize: 24,
-        fontFamily: "cursive",
-        color: "#ffffff",
-        fontWeight: "400",
-        textAlign: "left",
-    },
-    image: {
-        opacity: 1,
-        filters: [],
-    },
-    eraser: {
-        size: 20,
-    },
-    line: {
-        strokeColor: "#ffffff",
-        strokeWidth: 2,
-        strokeDashArray: null,
-    }, // ← ADD THIS
-    arrow: {
-        strokeColor: "#ffffff",
-        strokeWidth: 2,
-        strokeDashArray: null,
-    }, // ← ADD THIS
+    pen: { color: "#ffffff", strokeWidth: 2, opacity: 1, strokeDashArray: null },
+    rectangle: { fillColor: "transparent", strokeColor: "#ffffff", strokeWidth: 2, strokeDashArray: null },
+    circle: { fillColor: "transparent", strokeColor: "#ffffff", strokeWidth: 2, strokeDashArray: null },
+    frame: { fillColor: "#FFFFFF", strokeColor: "#E5E7EB", strokeWidth: 1, strokeDashArray: null },
+    text: { fontSize: 24, fontFamily: "cursive", color: "#ffffff", fontWeight: "400", textAlign: "left" },
+    image: { opacity: 1, filters: [] },
+    eraser: { size: 20 },
+    line: { strokeColor: "#ffffff", strokeWidth: 2, strokeDashArray: null },
+    arrow: { strokeColor: "#ffffff", strokeWidth: 2, strokeDashArray: null },
 };
-export const useWhiteboardStore = create()(devtools((set, get) => ({
-    // Tool state
+// ─── Store ────────────────────────────────────────────────────────────────────
+export const useWhiteboardStore = create()((set, get) => ({
+    // ── Tool ──────────────────────────────────────────────────────────────────
     activeTool: "select",
     setActiveTool: (tool) => set({ activeTool: tool }),
-    // Selected object type (for editing)
+    // ── Dropdown ──────────────────────────────────────────────────────────────
+    activeDropdown: null,
+    setActiveDropdown: (id) => set({ activeDropdown: id }),
+    // ── Selected object type ──────────────────────────────────────────────────
     selectedObjectType: null,
     setSelectedObjectType: (type) => set({ selectedObjectType: type }),
-    // Canvas objects
+    // ── Canvas objects ────────────────────────────────────────────────────────
+    // NOTE: Fabric instances have circular refs and DOM refs — they cannot be
+    // serialized. If you add devtools back, exclude this slice or it will throw.
+    // Using concat() instead of spread avoids the intermediate spread allocation.
     canvasObjects: [],
-    addCanvasObject: (obj) => set((state) => ({
-        canvasObjects: [...state.canvasObjects, obj],
-    })),
-    removeCanvasObject: (obj) => set((state) => ({
-        canvasObjects: state.canvasObjects.filter((o) => o !== obj),
-    })),
+    addCanvasObject: (obj) => set((s) => ({ canvasObjects: s.canvasObjects.concat(obj) })),
+    removeCanvasObject: (obj) => set((s) => ({ canvasObjects: s.canvasObjects.filter((o) => o !== obj) })),
     clearCanvasObjects: () => set({ canvasObjects: [] }),
-    // Tool options
+    // ── Selected objects ──────────────────────────────────────────────────────
+    selectedObjects: [],
+    setSelectedObjects: (objects) => set({ selectedObjects: objects }),
+    // ── Tool options ──────────────────────────────────────────────────────────
     toolOptions: defaultToolOptions,
-    setToolOption: (tool, option, value) => set((state) => ({
+    setToolOption: (tool, option, value) => set((s) => ({
         toolOptions: {
-            ...state.toolOptions,
-            [tool]: {
-                ...state.toolOptions[tool],
-                [option]: value,
-            },
+            ...s.toolOptions,
+            [tool]: { ...s.toolOptions[tool], [option]: value },
         },
     })),
-    // History
+    // ── History ───────────────────────────────────────────────────────────────
     history: [],
     historyIndex: -1,
     canUndo: false,
     canRedo: false,
-    pushHistory: (state) => {
-        const { history, historyIndex } = get();
-        // Slice off any redo states ahead of current index
-        const newHistory = history.slice(0, historyIndex + 1);
-        newHistory.push(state);
-        set({
-            history: newHistory,
-            historyIndex: newHistory.length - 1,
-            // Can undo if there is at least 1 previous state (index > 0)
-            canUndo: newHistory.length > 1,
-            canRedo: false,
-        });
-    },
-    // Sets the selected dropdown (task/document) - used to auto-switch back to select tool when closing
-    activeDropdown: null,
-    setActiveDropdown: (id) => set({
-        activeDropdown: id,
+    // Uses set() updater (single atomic write) instead of get() + set() which
+    // could interleave in React concurrent mode.
+    pushHistory: (snapshot) => set((s) => {
+        const trimmed = s.history.slice(0, s.historyIndex + 1);
+        trimmed.push(snapshot);
+        const capped = trimmed.length > MAX_HISTORY ? trimmed.slice(-MAX_HISTORY) : trimmed;
+        const newIndex = capped.length - 1;
+        return { history: capped, historyIndex: newIndex, canUndo: newIndex > 0, canRedo: false };
     }),
     undo: () => {
         const { history, historyIndex } = get();
-        // Must have a previous state to go back to
         if (historyIndex > 0) {
-            const newIndex = historyIndex - 1;
-            set({
-                historyIndex: newIndex,
-                canUndo: newIndex > 0,
-                canRedo: true,
-            });
-            return history[newIndex];
+            const i = historyIndex - 1;
+            set({ historyIndex: i, canUndo: i > 0, canRedo: true });
+            return history[i];
         }
         return null;
     },
     redo: () => {
         const { history, historyIndex } = get();
         if (historyIndex < history.length - 1) {
-            const newIndex = historyIndex + 1;
-            set({
-                historyIndex: newIndex,
-                canUndo: true,
-                canRedo: newIndex < history.length - 1,
-            });
-            return history[newIndex];
+            const i = historyIndex + 1;
+            set({ historyIndex: i, canUndo: true, canRedo: i < history.length - 1 });
+            return history[i];
         }
         return null;
     },
     setCanUndo: (v) => set({ canUndo: v }),
     setCanRedo: (v) => set({ canRedo: v }),
-    // Zoom
+    // ── Zoom ──────────────────────────────────────────────────────────────────
     zoom: 1,
     setZoom: (zoom) => set({ zoom }),
-    selectedObjects: [],
-    setSelectedObjects: (objects) => set({ selectedObjects: objects }),
-}), { name: "fabric-whiteboard-store" }));
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mhamz.01/easyflow-whiteboard",
-    "version": "2.37.0",
+    "version": "2.39.0",
     "description": "A feature-rich whiteboard component built with Fabric.js and React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",