@mhamz.01/easyflow-whiteboard 2.98.0 → 2.100.0

package/dist/components/toolbar/layers-control.d.ts

@@ -1 +1,7 @@
+import { Canvas } from "fabric";
+interface LayerControlsProps {
+    fabricCanvas: React.RefObject<Canvas | null>;
+}
+export default function LayerControls({ fabricCanvas }: LayerControlsProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=layers-control.d.ts.map

package/dist/components/toolbar/layers-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layers-control.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/layers-control.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"layers-control.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/layers-control.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,kBAAkB;IAC1B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,YAAY,EAAE,EAAE,kBAAkB,2CAkEzE"}

package/dist/components/toolbar/layers-control.js

@@ -1,67 +1,29 @@
-"use strict";
-// // components/toolbar/layer-controls.tsx
-// "use client";
-// import { ArrowUp, ArrowDown, MoveUp, MoveDown } from "lucide-react";
-// import { Canvas } from "fabric";
-// import { useWhiteboardStore } from "../../store/whiteboard-store";
-// interface LayerControlsProps {
-//   fabricCanvas: React.RefObject<Canvas | null>;
-// }
-// export default function LayerControls({ fabricCanvas }: LayerControlsProps) {
-// //   const { bringToFront, sendToBack, bringForward, sendBackward } = useWhiteboardStore();
-//   const handleBringToFront = () => {
-//     const canvas = fabricCanvas.current;
-//     if (canvas) bringToFront(canvas);
-//   };
-//   const handleSendToBack = () => {
-//     const canvas = fabricCanvas.current;
-//     if (canvas) sendToBack(canvas);
-//   };
-//   const handleBringForward = () => {
-//     const canvas = fabricCanvas.current;
-//     if (canvas) bringForward(canvas);
-//   };
-//   const handleSendBackward = () => {
-//     const canvas = fabricCanvas.current;
-//     if (canvas) sendBackward(canvas);
-//   };
-//   return (
-//     <div className="flex flex-col gap-1 p-2 bg-black/90 rounded-lg border border-white/10">
-//       <p className="text-xs text-white/60 mb-1">Layer Order</p>
-//       <div className="flex gap-1">
-//         {/* Bring to Front */}
-//         <button
-//           onClick={handleBringToFront}
-//           className="p-2 hover:bg-white/10 rounded transition-colors"
-//           title="Bring to Front"
-//         >
-//           <MoveUp size={16} className="text-white" />
-//         </button>
-//         {/* Bring Forward */}
-//         <button
-//           onClick={handleBringForward}
-//           className="p-2 hover:bg-white/10 rounded transition-colors"
-//           title="Bring Forward"
-//         >
-//           <ArrowUp size={16} className="text-white" />
-//         </button>
-//         {/* Send Backward */}
-//         <button
-//           onClick={handleSendBackward}
-//           className="p-2 hover:bg-white/10 rounded transition-colors"
-//           title="Send Backward"
-//         >
-//           <ArrowDown size={16} className="text-white" />
-//         </button>
-//         {/* Send to Back */}
-//         <button
-//           onClick={handleSendToBack}
-//           className="p-2 hover:bg-white/10 rounded transition-colors"
-//           title="Send to Back"
-//         >
-//           <MoveDown size={16} className="text-white" />
-//         </button>
-//       </div>
-//     </div>
-//   );
-// }
+// components/toolbar/layer-controls.tsx
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUp, ArrowDown, MoveUp, MoveDown } from "lucide-react";
+import { useWhiteboardStore } from "../../store/whiteboard-store";
+export default function LayerControls({ fabricCanvas }) {
+    const { bringToFront, sendToBack, bringForward, sendBackward } = useWhiteboardStore();
+    const handleBringToFront = () => {
+        const canvas = fabricCanvas.current;
+        if (canvas)
+            bringToFront(canvas);
+    };
+    const handleSendToBack = () => {
+        const canvas = fabricCanvas.current;
+        if (canvas)
+            sendToBack(canvas);
+    };
+    const handleBringForward = () => {
+        const canvas = fabricCanvas.current;
+        if (canvas)
+            bringForward(canvas);
+    };
+    const handleSendBackward = () => {
+        const canvas = fabricCanvas.current;
+        if (canvas)
+            sendBackward(canvas);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-1 p-2 bg-black/90 rounded-lg border border-white/10", children: [_jsx("p", { className: "text-xs text-white/60 mb-1", children: "Layer Order" }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { onClick: handleBringToFront, className: "p-2 hover:bg-white/10 rounded transition-colors", title: "Bring to Front", children: _jsx(MoveUp, { size: 16, className: "text-white" }) }), _jsx("button", { onClick: handleBringForward, className: "p-2 hover:bg-white/10 rounded transition-colors", title: "Bring Forward", children: _jsx(ArrowUp, { size: 16, className: "text-white" }) }), _jsx("button", { onClick: handleSendBackward, className: "p-2 hover:bg-white/10 rounded transition-colors", title: "Send Backward", children: _jsx(ArrowDown, { size: 16, className: "text-white" }) }), _jsx("button", { onClick: handleSendToBack, className: "p-2 hover:bg-white/10 rounded transition-colors", title: "Send to Back", children: _jsx(MoveDown, { size: 16, className: "text-white" }) })] })] }));
+}

package/dist/components/toolbar/tooloptions-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooloptions-panel.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/tooloptions-panel.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAC;AAU/E,OAAO,MAA2C,MAAM,QAAQ,CAAC;AAIjE,UAAU,qBAAqB;IAC7B,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,YAAY,GACb,EAAE,qBAAqB,2CA8NvB"}
+{"version":3,"file":"tooloptions-panel.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/tooloptions-panel.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,SAAS,EAAgC,MAAM,OAAO,CAAC;AAUvE,OAAO,MAA2C,MAAM,QAAQ,CAAC;AAIjE,UAAU,qBAAqB;IAC7B,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,YAAY,GACb,EAAE,qBAAqB,2CA0MvB"}

package/dist/components/toolbar/tooloptions-panel.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { cn } from "../../lib/utils";
 import { useWhiteboardStore } from "../../store/whiteboard-store";
 import PenOptions from "./options/pen-option";
@@ -11,13 +11,13 @@ import LineOptions from "./options/line-options";
 import ArrowOptions from "./options/arrow-options";
 import { Rect, Circle, IText } from "fabric";
 import { Settings2, ChevronDown } from "lucide-react";
+import LayerControls from "./layers-control";
 export default function ToolOptionsPanel({ fabricCanvas, }) {
     const activeTool = useWhiteboardStore((state) => state.activeTool);
     const selectedObjectType = useWhiteboardStore((state) => state.selectedObjectType);
     const toolOptions = useWhiteboardStore((state) => state.toolOptions);
     const [isMobileExpanded, setIsMobileExpanded] = useState(false);
     const displayTool = selectedObjectType || activeTool;
-    const isUpdatingRef = useRef(false);
     // Real-time fabric updates
     useEffect(() => {
         const canvas = fabricCanvas.current;
@@ -26,27 +26,10 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
         const selectedObject = canvas.getActiveObject();
         if (!selectedObject || !selectedObjectType)
             return;
-        // ⚠️ CRITICAL CHECK: 
-        // We only want to push Store -> Canvas if the Store values 
-        // are different from the Object's current values.
-        const updateIfChanged = (props) => {
-            let hasChanged = false;
-            Object.entries(props).forEach(([key, value]) => {
-                if (selectedObject.get(key) !== value) {
-                    hasChanged = true;
-                }
-            });
-            if (hasChanged) {
-                selectedObject.set(props);
-                canvas.renderAll();
-                // Only push history if a real change happened
-                // pushHistory(JSON.stringify(canvas.toJSON(['fill', 'stroke', 'strokeWidth', 'id'])));
-            }
-        };
         switch (selectedObjectType) {
             case "rectangle":
                 if (selectedObject instanceof Rect) {
-                    updateIfChanged({
+                    selectedObject.set({
                         fill: toolOptions.rectangle.fillColor,
                         stroke: toolOptions.rectangle.strokeColor,
                         strokeWidth: toolOptions.rectangle.strokeWidth,
@@ -55,7 +38,7 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
                 break;
             case "circle":
                 if (selectedObject instanceof Circle) {
-                    updateIfChanged({
+                    selectedObject.set({
                         fill: toolOptions.circle.fillColor,
                         stroke: toolOptions.circle.strokeColor,
                         strokeWidth: toolOptions.circle.strokeWidth,
@@ -64,7 +47,7 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
                 break;
             case "text":
                 if (selectedObject instanceof IText) {
-                    updateIfChanged({
+                    selectedObject.set({
                         fill: toolOptions.text.color,
                         fontSize: toolOptions.text.fontSize,
                         fontFamily: toolOptions.text.fontFamily,
@@ -72,6 +55,7 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
                 }
                 break;
         }
+        canvas.renderAll();
     }, [toolOptions, selectedObjectType, fabricCanvas]);
     const toolsWithoutOptions = ["select", "pan", "undo", "redo", "eraser"];
     const isOpen = useMemo(() => {
@@ -85,7 +69,7 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
     }, [isOpen]);
     return (_jsxs(_Fragment, { children: [_jsxs("aside", { className: cn("hidden md:flex", "absolute left-4 top-1/2 -translate-y-1/2 z-40", "flex-col", "w-64 max-h-[85vh]", "bg-[#1A1A1E]/90 backdrop-blur-xl", "border border-white/10", "shadow-[0_20px_50px_rgba(0,0,0,0.5)]", "rounded-[24px]", "transition-all duration-500 cubic-bezier(0.16, 1, 0.3, 1)", isOpen
                     ? "translate-x-0 opacity-100 visible scale-100"
-                    : "-translate-x-12 opacity-0 invisible scale-95 pointer-events-none"), children: [_jsx("div", { className: "absolute -left-[1px] top-1/2 -translate-y-1/2 w-[3px] h-12 bg-[#029AFF] rounded-r-full shadow-[0_0_15px_#029AFF]" }), _jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-white/5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "w-4 h-4 text-[#029AFF]" }), _jsx("h3", { className: "text-[11px] font-bold uppercase tracking-[0.1em] text-neutral-400", children: "Properties" })] }), _jsx("div", { className: "text-[10px] px-2 py-0.5 rounded-full bg-white/5 text-white/40 border border-white/5", children: displayTool })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-5 custom-scrollbar scroll-smooth", children: _jsxs("div", { className: "space-y-6 text-neutral-200", children: [displayTool === "pen" && _jsx(PenOptions, {}), (displayTool === "rectangle" || displayTool === "circle" || displayTool === "frame") && (_jsx(ShapeOptions, { shapeType: displayTool })), displayTool === "text" && _jsx(TextOptions, {}), displayTool === "image" && _jsx(ImageOptions, {}), displayTool === "line" && _jsx(LineOptions, {}), displayTool === "arrow" && _jsx(ArrowOptions, { fabricCanvas: fabricCanvas })] }) }), _jsx("div", { className: "p-3 flex justify-center", children: _jsx("div", { className: "w-8 h-1 rounded-full bg-white/10" }) })] }), isOpen && (_jsxs("div", { className: cn("md:hidden", "fixed left-3 top-4 z-40", // Positioned Top-Left to stay clear of Top-Right zoom
+                    : "-translate-x-12 opacity-0 invisible scale-95 pointer-events-none"), children: [_jsx("div", { className: "absolute -left-[1px] top-1/2 -translate-y-1/2 w-[3px] h-12 bg-[#029AFF] rounded-r-full shadow-[0_0_15px_#029AFF]" }), _jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-white/5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "w-4 h-4 text-[#029AFF]" }), _jsx("h3", { className: "text-[11px] font-bold uppercase tracking-[0.1em] text-neutral-400", children: "Properties" })] }), _jsx("div", { className: "text-[10px] px-2 py-0.5 rounded-full bg-white/5 text-white/40 border border-white/5", children: displayTool })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-5 custom-scrollbar scroll-smooth", children: _jsxs("div", { className: "space-y-6 text-neutral-200", children: [displayTool === "pen" && _jsx(PenOptions, {}), (displayTool === "rectangle" || displayTool === "circle" || displayTool === "frame") && (_jsx(ShapeOptions, { shapeType: displayTool })), displayTool === "text" && _jsx(TextOptions, {}), displayTool === "image" && _jsx(ImageOptions, {}), displayTool === "line" && _jsx(LineOptions, {}), displayTool === "arrow" && _jsx(ArrowOptions, { fabricCanvas: fabricCanvas }), selectedObjectType && (_jsx(LayerControls, { fabricCanvas: fabricCanvas }))] }) }), _jsx("div", { className: "p-3 flex justify-center", children: _jsx("div", { className: "w-8 h-1 rounded-full bg-white/10" }) })] }), isOpen && (_jsxs("div", { className: cn("md:hidden", "fixed left-3 top-4 z-40", // Positioned Top-Left to stay clear of Top-Right zoom
                 "w-[calc(100%-80px)] max-w-[180px]", // Leave room on the right to tap canvas
                 "bg-[#1A1A1E]/95 backdrop-blur-xl", "border border-white/10", "rounded-2xl shadow-2xl", "transition-all duration-300 ease-in-out", isMobileExpanded ? "max-h-[70vh]" : "h-[48px]"), children: [_jsxs("div", { className: "flex items-center justify-between px-4 h-[48px] cursor-pointer", onClick: () => setIsMobileExpanded(!isMobileExpanded), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "w-4 h-4 text-[#029AFF]" }), _jsxs("span", { className: "text-[10px] font-bold uppercase tracking-wider text-neutral-300", children: [displayTool, " Settings"] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("div", { className: cn("transition-transform duration-300", isMobileExpanded ? "rotate-180" : "rotate-0"), children: _jsx(ChevronDown, { className: "w-4 h-4 text-white/50" }) }) })] }), _jsx("div", { className: cn("overflow-hidden transition-all duration-300", isMobileExpanded ? "opacity-100 h-auto" : "opacity-0 h-0"), children: _jsxs("div", { className: "px-4 pb-5 pt-2 space-y-4 overflow-y-auto max-h-[60vh] custom-scrollbar", children: [_jsx("div", { className: "h-[1px] w-full bg-white/5 mb-4" }), displayTool === "pen" && _jsx(PenOptions, {}), (displayTool === "rectangle" || displayTool === "circle" || displayTool === "frame") && (_jsx(ShapeOptions, { shapeType: displayTool })), displayTool === "text" && _jsx(TextOptions, {}), displayTool === "image" && _jsx(ImageOptions, {}), displayTool === "line" && _jsx(LineOptions, {}), displayTool === "arrow" && _jsx(ArrowOptions, { fabricCanvas: fabricCanvas })] }) })] })), _jsx("style", { children: `
         .custom-scrollbar::-webkit-scrollbar {

package/dist/hooks/useSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/useSelection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAQ,YAAY,EAAe,MAAM,QAAQ,CAAC;AAMjE,UAAU,iBAAiB;IACzB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,eAAe,EAAE,CAAC,GAAG,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1F,wBAAwB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,YAAY,GAAI,wFAM1B,iBAAiB,SAuJnB,CAAC"}
+{"version":3,"file":"useSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/useSelection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAQ,YAAY,EAAe,MAAM,QAAQ,CAAC;AAMjE,UAAU,iBAAiB;IACzB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,eAAe,EAAE,CAAC,GAAG,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1F,wBAAwB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,YAAY,GAAI,wFAM1B,iBAAiB,SAsKnB,CAAC"}

package/dist/hooks/useSelection.js

@@ -103,6 +103,20 @@ export const useSelection = ({ fabricCanvas, activeTool, setSelectionBox, setSel
                         : sel instanceof BidirectionalArrow ? "arrow"
                             : typeMap[sel.type] ?? null;
             setSelectedObjectType(t);
+            if (t && sel.type !== "activeSelection") {
+                const store = useWhiteboardStore.getState();
+                if (t === "rectangle" && sel.fill) {
+                    store.setToolOption("rectangle", "fillColor", sel.fill);
+                    store.setToolOption("rectangle", "strokeColor", sel.stroke || "#ffffff");
+                    store.setToolOption("rectangle", "strokeWidth", sel.strokeWidth || 2);
+                }
+                else if (t === "circle" && sel.fill) {
+                    store.setToolOption("circle", "fillColor", sel.fill);
+                    store.setToolOption("circle", "strokeColor", sel.stroke || "#ffffff");
+                    store.setToolOption("circle", "strokeWidth", sel.strokeWidth || 2);
+                }
+                // Add for other types as needed...
+            }
         };
         const onDeselected = () => {
             setSelectedObjectType(null);

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

@@ -1,4 +1,4 @@
-import { FabricObject } from "fabric";
+import { Canvas, FabricObject } from "fabric";
 export type Tool = "select" | "pan" | "pen" | "rectangle" | "circle" | "line" | "arrow" | "frame" | "text" | "image" | "eraser" | "connector" | "undo" | "redo";
 export type ActiveDropdown = "task" | "document" | null;
 export interface ToolOptions {
@@ -62,6 +62,10 @@ interface WhiteboardState {
     addCanvasObject: (obj: FabricObject) => void;
     removeCanvasObject: (obj: FabricObject) => void;
     clearCanvasObjects: () => void;
+    bringToFront: (canvas: Canvas) => void;
+    sendToBack: (canvas: Canvas) => void;
+    bringForward: (canvas: Canvas) => void;
+    sendBackward: (canvas: Canvas) => void;
     selectedObjects: FabricObject[];
     setSelectedObjects: (objects: FabricObject[]) => void;
     toolOptions: ToolOptions;

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

@@ -81,4 +81,33 @@ export const useWhiteboardStore = create()((set, get) => ({
     // ── Zoom ──────────────────────────────────────────────────────────────────
     zoom: 1,
     setZoom: (zoom) => set({ zoom }),
+    // ── Layer ordering ─────────────────────────────────────────────────────
+    bringToFront: (canvas) => {
+        const active = canvas.getActiveObject();
+        if (active) {
+            canvas.bringObjectToFront(active);
+            canvas.requestRenderAll();
+        }
+    },
+    sendToBack: (canvas) => {
+        const active = canvas.getActiveObject();
+        if (active) {
+            canvas.sendObjectToBack(active);
+            canvas.requestRenderAll();
+        }
+    },
+    bringForward: (canvas) => {
+        const active = canvas.getActiveObject();
+        if (active) {
+            canvas.bringObjectForward(active);
+            canvas.requestRenderAll();
+        }
+    },
+    sendBackward: (canvas) => {
+        const active = canvas.getActiveObject();
+        if (active) {
+            canvas.sendObjectBackwards(active);
+            canvas.requestRenderAll();
+        }
+    },
 }));

package/package.json

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