@mhamz.01/easyflow-whiteboard 2.124.0 → 2.125.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/toolbar/tooloptions-panel.d.ts +3 -3
- package/dist/components/toolbar/tooloptions-panel.d.ts.map +1 -1
- package/dist/components/toolbar/tooloptions-panel.js +45 -11
- package/dist/components/toolbar/whiteboard-toolbar.d.ts +3 -3
- package/dist/components/toolbar/whiteboard-toolbar.d.ts.map +1 -1
- package/dist/components/toolbar/whiteboard-toolbar.js +88 -48
- package/dist/components/whiteboard/whiteboard-test.d.ts.map +1 -1
- package/dist/components/whiteboard/whiteboard-test.js +104 -27
- package/dist/styles.css +18 -0
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { RefObject } from "react";
|
|
1
|
+
import React, { RefObject } from "react";
|
|
2
2
|
import fabric from "fabric";
|
|
3
3
|
interface ToolOptionsPanelProps {
|
|
4
4
|
fabricCanvas: RefObject<fabric.Canvas | null>;
|
|
5
5
|
}
|
|
6
|
-
|
|
7
|
-
export
|
|
6
|
+
declare const _default: React.NamedExoticComponent<ToolOptionsPanelProps>;
|
|
7
|
+
export default _default;
|
|
8
8
|
//# sourceMappingURL=tooloptions-panel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooloptions-panel.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/tooloptions-panel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tooloptions-panel.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/tooloptions-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA6C,MAAM,OAAO,CAAC;AAUpF,OAAO,MAA4C,MAAM,QAAQ,CAAC;AAIlE,UAAU,qBAAqB;IAC7B,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;;AAWD,wBA2PG"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { useEffect, useMemo, useState } from "react";
|
|
3
|
+
import React, { useEffect, useMemo, useState, useCallback } from "react";
|
|
4
4
|
import { cn } from "../../lib/utils";
|
|
5
5
|
import { useWhiteboardStore } from "../../store/whiteboard-store";
|
|
6
6
|
import PenOptions from "./options/pen-option";
|
|
@@ -12,13 +12,21 @@ import ArrowOptions from "./options/arrow-options";
|
|
|
12
12
|
import { Rect, Circle, IText } from "fabric";
|
|
13
13
|
import { Settings2, ChevronDown } from "lucide-react";
|
|
14
14
|
import LayerControls from "./layers-control";
|
|
15
|
-
|
|
15
|
+
// ── Memoized child components ─────────────────────────────────────────────────
|
|
16
|
+
const MemoizedPenOptions = React.memo(PenOptions);
|
|
17
|
+
const MemoizedShapeOptions = React.memo(ShapeOptions);
|
|
18
|
+
const MemoizedTextOptions = React.memo(TextOptions);
|
|
19
|
+
const MemoizedImageOptions = React.memo(ImageOptions);
|
|
20
|
+
const MemoizedLineOptions = React.memo(LineOptions);
|
|
21
|
+
const MemoizedArrowOptions = React.memo(ArrowOptions);
|
|
22
|
+
const MemoizedLayerControls = React.memo(LayerControls);
|
|
23
|
+
export default React.memo(function ToolOptionsPanel({ fabricCanvas, }) {
|
|
16
24
|
const activeTool = useWhiteboardStore((state) => state.activeTool);
|
|
17
25
|
const selectedObjectType = useWhiteboardStore((state) => state.selectedObjectType);
|
|
18
26
|
const toolOptions = useWhiteboardStore((state) => state.toolOptions);
|
|
19
27
|
const [isMobileExpanded, setIsMobileExpanded] = useState(false);
|
|
20
28
|
const displayTool = selectedObjectType || activeTool;
|
|
21
|
-
// Real-time fabric updates
|
|
29
|
+
// ── Real-time fabric updates ──────────────────────────────────────────────────
|
|
22
30
|
useEffect(() => {
|
|
23
31
|
const canvas = fabricCanvas.current;
|
|
24
32
|
if (!canvas)
|
|
@@ -57,21 +65,43 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
|
|
|
57
65
|
}
|
|
58
66
|
canvas.renderAll();
|
|
59
67
|
}, [toolOptions, selectedObjectType, fabricCanvas]);
|
|
60
|
-
|
|
68
|
+
// ── Memoized constants ────────────────────────────────────────────────────────
|
|
69
|
+
const toolsWithoutOptions = useMemo(() => ["select", "pan", "undo", "redo", "eraser"], []);
|
|
61
70
|
const isOpen = useMemo(() => {
|
|
62
71
|
const target = selectedObjectType || activeTool;
|
|
63
72
|
return target && !toolsWithoutOptions.includes(target);
|
|
64
|
-
}, [activeTool, selectedObjectType]);
|
|
73
|
+
}, [activeTool, selectedObjectType, toolsWithoutOptions]);
|
|
74
|
+
// ── Auto-collapse mobile panel when tool changes ───────────────────────────────
|
|
65
75
|
useEffect(() => {
|
|
66
76
|
if (!isOpen) {
|
|
67
77
|
setIsMobileExpanded(false);
|
|
68
78
|
}
|
|
69
79
|
}, [isOpen]);
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
80
|
+
// ── Memoized handlers ─────────────────────────────────────────────────────────
|
|
81
|
+
const handleMobileToggle = useCallback(() => {
|
|
82
|
+
setIsMobileExpanded((prev) => !prev);
|
|
83
|
+
}, []);
|
|
84
|
+
// ── Memoized desktop sidebar content ──────────────────────────────────────────
|
|
85
|
+
const desktopContent = useMemo(() => {
|
|
86
|
+
return (_jsxs("div", { className: "space-y-6 text-neutral-200", children: [displayTool === "pen" && _jsx(MemoizedPenOptions, {}), (displayTool === "rectangle" || displayTool === "circle" || displayTool === "frame") && (_jsx(MemoizedShapeOptions, { shapeType: displayTool })), displayTool === "text" && _jsx(MemoizedTextOptions, {}), displayTool === "image" && _jsx(MemoizedImageOptions, {}), displayTool === "line" && _jsx(MemoizedLineOptions, {}), displayTool === "arrow" && _jsx(MemoizedArrowOptions, { fabricCanvas: fabricCanvas }), selectedObjectType && _jsx(MemoizedLayerControls, { fabricCanvas: fabricCanvas })] }));
|
|
87
|
+
}, [displayTool, selectedObjectType, fabricCanvas]);
|
|
88
|
+
// ── Memoized mobile content ───────────────────────────────────────────────────
|
|
89
|
+
const mobileContent = useMemo(() => {
|
|
90
|
+
return (_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(MemoizedPenOptions, {}), (displayTool === "rectangle" || displayTool === "circle" || displayTool === "frame") && (_jsx(MemoizedShapeOptions, { shapeType: displayTool })), displayTool === "text" && _jsx(MemoizedTextOptions, {}), displayTool === "image" && _jsx(MemoizedImageOptions, {}), displayTool === "line" && _jsx(MemoizedLineOptions, {}), displayTool === "arrow" && _jsx(MemoizedArrowOptions, { fabricCanvas: fabricCanvas })] }));
|
|
91
|
+
}, [displayTool, fabricCanvas]);
|
|
92
|
+
// ── Memoized desktop header ───────────────────────────────────────────────────
|
|
93
|
+
const desktopHeader = useMemo(() => (_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 })] })), [displayTool]);
|
|
94
|
+
// ── Memoized mobile header ────────────────────────────────────────────────────
|
|
95
|
+
const mobileHeader = useMemo(() => (_jsxs("div", { className: "flex items-center justify-between px-4 h-[48px] cursor-pointer", onClick: handleMobileToggle, 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" }) }) })] })), [displayTool, isMobileExpanded, handleMobileToggle]);
|
|
96
|
+
// ── Memoized desktop sidebar classes ──────────────────────────────────────────
|
|
97
|
+
const desktopSidebarClasses = useMemo(() => 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
|
|
98
|
+
? "translate-x-0 opacity-100 visible scale-100"
|
|
99
|
+
: "-translate-x-12 opacity-0 invisible scale-95 pointer-events-none"), [isOpen]);
|
|
100
|
+
// ── Memoized mobile panel classes ─────────────────────────────────────────────
|
|
101
|
+
const mobilePanelClasses = useMemo(() => cn("md:hidden", "fixed left-3 top-4 z-40", "w-[calc(100%-80px)] max-w-[180px]", "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]"), [isMobileExpanded]);
|
|
102
|
+
// ── Memoized mobile content container classes ─────────────────────────────────
|
|
103
|
+
const mobileContentClasses = useMemo(() => cn("overflow-hidden transition-all duration-300", isMobileExpanded ? "opacity-100 h-auto" : "opacity-0 h-0"), [isMobileExpanded]);
|
|
104
|
+
return (_jsxs(_Fragment, { children: [_jsxs("aside", { className: desktopSidebarClasses, 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]" }), desktopHeader, _jsx("div", { className: "flex-1 overflow-y-auto p-5 custom-scrollbar scroll-smooth", children: desktopContent }), _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: mobilePanelClasses, children: [mobileHeader, _jsx("div", { className: mobileContentClasses, children: mobileContent })] })), _jsx("style", { children: `
|
|
75
105
|
.custom-scrollbar::-webkit-scrollbar {
|
|
76
106
|
width: 4px;
|
|
77
107
|
}
|
|
@@ -86,4 +116,8 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
|
|
|
86
116
|
background: #029AFF;
|
|
87
117
|
}
|
|
88
118
|
` })] }));
|
|
89
|
-
}
|
|
119
|
+
}, (prev, next) => {
|
|
120
|
+
// Custom comparator for React.memo
|
|
121
|
+
// Return true to skip re-render, false to re-render
|
|
122
|
+
return prev.fabricCanvas === next.fabricCanvas;
|
|
123
|
+
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MutableRefObject } from "react";
|
|
1
|
+
import React, { MutableRefObject } from "react";
|
|
2
2
|
import { Canvas } from "fabric";
|
|
3
3
|
interface TaskTemplate {
|
|
4
4
|
id: string;
|
|
@@ -26,6 +26,6 @@ interface WhiteboardToolbarProps {
|
|
|
26
26
|
availableDocuments?: DocumentTemplate[];
|
|
27
27
|
isLoadingData?: boolean;
|
|
28
28
|
}
|
|
29
|
-
|
|
30
|
-
export
|
|
29
|
+
declare const _default: React.NamedExoticComponent<WhiteboardToolbarProps>;
|
|
30
|
+
export default _default;
|
|
31
31
|
//# sourceMappingURL=whiteboard-toolbar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"whiteboard-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/whiteboard-toolbar.tsx"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"file":"whiteboard-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/whiteboard-toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAqB,gBAAgB,EAAkC,MAAM,OAAO,CAAC;AAKnG,OAAO,EAAE,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAQtC,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,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,UAAU,gBAAgB;IACxB,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;CACpB;AAkBD,UAAU,sBAAsB;IAC9B,YAAY,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,cAAc,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;;AAUD,wBA2SG"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { useEffect, useRef, useState } from "react";
|
|
3
|
+
import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
|
|
4
4
|
import { MousePointer2, Pencil, Square, Circle, Minus, MoveRight, Type, Eraser, Hand, Frame, Undo2, Redo2, Image as ImageIcon, } from "lucide-react";
|
|
5
5
|
import { util } from "fabric";
|
|
6
6
|
import { useWhiteboardStore } from "../../store/whiteboard-store";
|
|
@@ -24,7 +24,13 @@ const TOOLS = [
|
|
|
24
24
|
{ id: "undo", icon: Undo2, label: "Undo", shortcut: "⌘Z", category: "history" },
|
|
25
25
|
{ id: "redo", icon: Redo2, label: "Redo", shortcut: "⌘⇧Z", category: "history" },
|
|
26
26
|
];
|
|
27
|
-
|
|
27
|
+
// ── Memoized ToolButton wrapper ───────────────────────────────────────────────
|
|
28
|
+
const MemoizedToolButton = React.memo(ToolButton);
|
|
29
|
+
const MemoizedToolbarSeparator = React.memo(ToolbarSeparator);
|
|
30
|
+
const MemoizedTaskDropdown = React.memo(TaskDropdown);
|
|
31
|
+
const MemoizedDocumentDropdown = React.memo(DocumentDropdown);
|
|
32
|
+
// ── Main Component ────────────────────────────────────────────────────────────
|
|
33
|
+
export default React.memo(function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddTask, onAddDocument, availableTasks = [], availableDocuments = [], isLoadingData = false, }) {
|
|
28
34
|
const activeTool = useWhiteboardStore((s) => s.activeTool);
|
|
29
35
|
const setActiveTool = useWhiteboardStore((s) => s.setActiveTool);
|
|
30
36
|
const canUndo = useWhiteboardStore((s) => s.canUndo);
|
|
@@ -32,53 +38,33 @@ export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddT
|
|
|
32
38
|
const undo = useWhiteboardStore((s) => s.undo);
|
|
33
39
|
const redo = useWhiteboardStore((s) => s.redo);
|
|
34
40
|
const scrollRef = useRef(null);
|
|
35
|
-
const [scrollPosition, setScrollPosition] = useState(0);
|
|
36
41
|
const fileInputRef = useRef(null);
|
|
37
|
-
const
|
|
42
|
+
const [scrollPosition, setScrollPosition] = useState(0);
|
|
43
|
+
// ── Memoized callbacks ────────────────────────────────────────────────────────
|
|
44
|
+
const handleScroll = useCallback(() => {
|
|
38
45
|
if (scrollRef.current) {
|
|
39
46
|
const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
|
|
40
47
|
const position = scrollLeft / (scrollWidth - clientWidth);
|
|
41
48
|
setScrollPosition(position);
|
|
42
49
|
}
|
|
43
|
-
};
|
|
44
|
-
//
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
// If the user selects something other than the default 'select' tool
|
|
48
|
-
if (!canvas || activeTool === "select")
|
|
49
|
-
return;
|
|
50
|
-
const hero = canvas.getObjects().find((obj) => obj.id === "welcome-hero");
|
|
51
|
-
if (hero) {
|
|
52
|
-
hero.animate({
|
|
53
|
-
opacity: 0,
|
|
54
|
-
top: (hero.top || 0) - 20 // Subtle "lift" animation on exit
|
|
55
|
-
}, {
|
|
56
|
-
duration: 500,
|
|
57
|
-
easing: util.ease.easeInQuad,
|
|
58
|
-
onChange: () => canvas.requestRenderAll(),
|
|
59
|
-
onComplete: () => {
|
|
60
|
-
canvas.remove(hero);
|
|
61
|
-
canvas.requestRenderAll();
|
|
62
|
-
},
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
}, [activeTool]);
|
|
66
|
-
// ── Restore helper ───────────────────────────────────────────────────────────
|
|
67
|
-
// Sets isRestoringRef=true BEFORE loadFromJSON so that the object:added events
|
|
68
|
-
// fired during restore do NOT push new entries onto the history stack.
|
|
69
|
-
// Without this, undo corrupts the stack and redo breaks permanently.
|
|
70
|
-
const restoreCanvas = (canvas, json) => {
|
|
71
|
-
isRestoringRef.current = true; // ← block saveState during restore
|
|
50
|
+
}, []);
|
|
51
|
+
// ── Restore helper (memoized) ─────────────────────────────────────────────────
|
|
52
|
+
const restoreCanvas = useCallback((canvas, json) => {
|
|
53
|
+
isRestoringRef.current = true;
|
|
72
54
|
canvas.loadFromJSON(JSON.parse(json)).then(() => {
|
|
73
55
|
canvas.isDrawingMode = false;
|
|
74
56
|
canvas.selection = true;
|
|
75
|
-
canvas.forEachObject((obj) => {
|
|
57
|
+
canvas.forEachObject((obj) => {
|
|
58
|
+
obj.selectable = true;
|
|
59
|
+
obj.evented = true;
|
|
60
|
+
});
|
|
76
61
|
canvas.renderAll();
|
|
77
62
|
setActiveTool("select");
|
|
78
|
-
isRestoringRef.current = false;
|
|
63
|
+
isRestoringRef.current = false;
|
|
79
64
|
});
|
|
80
|
-
};
|
|
81
|
-
|
|
65
|
+
}, [setActiveTool, isRestoringRef]);
|
|
66
|
+
// ── Handle tool click (memoized) ──────────────────────────────────────────────
|
|
67
|
+
const handleToolClick = useCallback((toolId) => {
|
|
82
68
|
const canvas = fabricCanvas.current;
|
|
83
69
|
if (!canvas)
|
|
84
70
|
return;
|
|
@@ -101,8 +87,9 @@ export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddT
|
|
|
101
87
|
return;
|
|
102
88
|
}
|
|
103
89
|
setActiveTool(toolId);
|
|
104
|
-
};
|
|
105
|
-
|
|
90
|
+
}, [fabricCanvas, undo, redo, restoreCanvas, setActiveTool]);
|
|
91
|
+
// ── Handle image upload (memoized) ────────────────────────────────────────────
|
|
92
|
+
const handleImageUpload = useCallback((e) => {
|
|
106
93
|
const file = e.target.files?.[0];
|
|
107
94
|
if (!file || !file.type.startsWith("image/"))
|
|
108
95
|
return;
|
|
@@ -110,19 +97,56 @@ export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddT
|
|
|
110
97
|
if (!canvas)
|
|
111
98
|
return;
|
|
112
99
|
const reader = new FileReader();
|
|
113
|
-
reader.onload = (ev) => {
|
|
114
|
-
|
|
100
|
+
reader.onload = (ev) => {
|
|
101
|
+
const url = ev.target?.result;
|
|
102
|
+
if (url)
|
|
103
|
+
addImageToCanvas(canvas, url);
|
|
104
|
+
};
|
|
115
105
|
reader.readAsDataURL(file);
|
|
116
106
|
e.target.value = "";
|
|
117
|
-
};
|
|
118
|
-
//
|
|
107
|
+
}, [fabricCanvas]);
|
|
108
|
+
// ── Hero animation effect ─────────────────────────────────────────────────────
|
|
109
|
+
useEffect(() => {
|
|
110
|
+
const canvas = fabricCanvas.current;
|
|
111
|
+
if (!canvas || activeTool === "select")
|
|
112
|
+
return;
|
|
113
|
+
const hero = canvas.getObjects().find((obj) => obj.id === "welcome-hero");
|
|
114
|
+
if (hero) {
|
|
115
|
+
hero.animate({
|
|
116
|
+
opacity: 0,
|
|
117
|
+
top: (hero.top || 0) - 20,
|
|
118
|
+
}, {
|
|
119
|
+
duration: 500,
|
|
120
|
+
easing: util.ease.easeInQuad,
|
|
121
|
+
onChange: () => canvas.requestRenderAll(),
|
|
122
|
+
onComplete: () => {
|
|
123
|
+
canvas.remove(hero);
|
|
124
|
+
canvas.requestRenderAll();
|
|
125
|
+
},
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
}, [activeTool, fabricCanvas]);
|
|
129
|
+
// ── Keyboard shortcuts effect ─────────────────────────────────────────────────
|
|
119
130
|
useEffect(() => {
|
|
120
131
|
const onKey = (e) => {
|
|
121
|
-
if (e.target instanceof HTMLInputElement ||
|
|
132
|
+
if (e.target instanceof HTMLInputElement ||
|
|
133
|
+
e.target instanceof HTMLTextAreaElement)
|
|
122
134
|
return;
|
|
123
135
|
const key = e.key.toLowerCase();
|
|
124
136
|
const ctrl = e.ctrlKey || e.metaKey;
|
|
125
|
-
const shortcuts = {
|
|
137
|
+
const shortcuts = {
|
|
138
|
+
v: "select",
|
|
139
|
+
h: "pan",
|
|
140
|
+
p: "pen",
|
|
141
|
+
r: "rectangle",
|
|
142
|
+
c: "circle",
|
|
143
|
+
f: "frame",
|
|
144
|
+
l: "line",
|
|
145
|
+
a: "arrow",
|
|
146
|
+
t: "text",
|
|
147
|
+
i: "image",
|
|
148
|
+
e: "eraser",
|
|
149
|
+
};
|
|
126
150
|
if (shortcuts[key] && !ctrl) {
|
|
127
151
|
e.preventDefault();
|
|
128
152
|
handleToolClick(shortcuts[key]);
|
|
@@ -148,8 +172,14 @@ export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddT
|
|
|
148
172
|
};
|
|
149
173
|
window.addEventListener("keydown", onKey);
|
|
150
174
|
return () => window.removeEventListener("keydown", onKey);
|
|
151
|
-
}, [
|
|
152
|
-
|
|
175
|
+
}, [fabricCanvas, activeTool, handleToolClick]);
|
|
176
|
+
// ── Memoized tool buttons ─────────────────────────────────────────────────────
|
|
177
|
+
const toolButtons = useMemo(() => TOOLS.map((tool, index) => (_jsxs("div", { className: "flex items-center snap-center", children: [_jsx(MemoizedToolButton, { icon: tool.icon, label: tool.label, isActive: activeTool === tool.id, onClick: () => handleToolClick(tool.id), disabled: (tool.id === "undo" && !canUndo) || (tool.id === "redo" && !canRedo), shortcut: tool.shortcut }), (index === 1 || index === 9) && (_jsx("div", { className: "hidden md:block mx-1", children: _jsx(MemoizedToolbarSeparator, {}) }))] }, tool.id))), [activeTool, canUndo, canRedo, handleToolClick]);
|
|
178
|
+
// ── Memoized dropdown section ─────────────────────────────────────────────────
|
|
179
|
+
const dropdownSection = useMemo(() => (onAddTask || onAddDocument) && (_jsxs("div", { className: "flex items-center gap-1 snap-center pr-2", children: [_jsx("div", { className: "mx-1 flex-shrink-0", children: _jsx(MemoizedToolbarSeparator, {}) }), onAddTask && (_jsx(MemoizedTaskDropdown, { onAddTask: onAddTask, availableTasks: availableTasks })), onAddDocument && (_jsx(MemoizedDocumentDropdown, { onAddDocument: onAddDocument, availableDocuments: availableDocuments }))] })), [onAddTask, onAddDocument, availableTasks, availableDocuments]);
|
|
180
|
+
// ── Scroll indicator visibility ───────────────────────────────────────────────
|
|
181
|
+
const scrollIndicators = useMemo(() => (_jsxs("div", { className: "flex gap-1.5 md:hidden", children: [_jsx("div", { className: `w-1.5 h-1.5 rounded-full transition-all duration-300 ${scrollPosition < 0.5 ? "bg-white w-6" : "bg-white/30"}` }), _jsx("div", { className: `w-1.5 h-1.5 rounded-full transition-all duration-300 ${scrollPosition >= 0.5 ? "bg-white w-6" : "bg-white/30"}` })] })), [scrollPosition]);
|
|
182
|
+
return (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleImageUpload, className: "hidden" }), _jsxs("div", { className: "fixed bottom-4 md:bottom-6 left-0 right-0 z-50 flex flex-col items-center gap-2 px-4 pointer-events-none", children: [_jsxs("div", { className: "relative w-full md:w-auto max-w-full pointer-events-auto", children: [_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-[#0b0b0b] to-transparent pointer-events-none z-10 md:hidden rounded-l-2xl" }), _jsx("div", { className: "absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-[#0b0b0b] to-transparent pointer-events-none z-10 md:hidden rounded-r-2xl" }), _jsxs("div", { ref: scrollRef, onScroll: handleScroll, className: "flex items-center gap-1 px-2 py-2 bg-black/95 backdrop-blur-md border border-[#A1A1A1] rounded-2xl shadow-2xl overflow-x-auto md:overflow-x-visible snap-x snap-mandatory md:snap-none scrollbar-hide scroll-smooth", children: [toolButtons, dropdownSection] })] }), scrollIndicators] }), _jsx("style", { children: `
|
|
153
183
|
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
|
154
184
|
.scrollbar-hide {
|
|
155
185
|
-ms-overflow-style: none;
|
|
@@ -157,4 +187,14 @@ export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddT
|
|
|
157
187
|
-webkit-overflow-scrolling: touch;
|
|
158
188
|
}
|
|
159
189
|
` })] }));
|
|
160
|
-
}
|
|
190
|
+
}, (prev, next) => {
|
|
191
|
+
// Custom comparator for React.memo
|
|
192
|
+
// Return true to skip re-render, false to re-render
|
|
193
|
+
return (prev.fabricCanvas === next.fabricCanvas &&
|
|
194
|
+
prev.isRestoringRef === next.isRestoringRef &&
|
|
195
|
+
prev.onAddTask === next.onAddTask &&
|
|
196
|
+
prev.onAddDocument === next.onAddDocument &&
|
|
197
|
+
prev.availableTasks === next.availableTasks &&
|
|
198
|
+
prev.availableDocuments === next.availableDocuments &&
|
|
199
|
+
prev.isLoadingData === next.isLoadingData);
|
|
200
|
+
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAkB5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,UAAU,IAAI;IACZ,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,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;KACxB,CAAC;IACF,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,SAAS,EAAE,GAAG,EAAE,CAAC;KAClB,KAAK,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA2HD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAmB,EACnB,kBAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CAiRvB"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useCallback,
|
|
3
|
+
import React, { useCallback, useRef, useState } from "react";
|
|
4
4
|
import { classRegistry } from "fabric";
|
|
5
5
|
import { useWhiteboardStore } from "../../store/whiteboard-store";
|
|
6
6
|
import WhiteboardToolbar from "../toolbar/whiteboard-toolbar";
|
|
@@ -23,6 +23,54 @@ import { usePersistence } from "../../hooks/usePersistance";
|
|
|
23
23
|
import { ToolbarSkeleton } from "../toolbar/toolbar-skeleton/toolbar-skeleton";
|
|
24
24
|
import { useCopyPaste } from "../../hooks/useCopyPaste";
|
|
25
25
|
classRegistry.setClass(Frame, "frame");
|
|
26
|
+
// ── Memoized Toolbar wrapper (Issue 10) ───────────────────────────────────────
|
|
27
|
+
const MemoizedToolbarWrapper = React.memo(function ToolbarWrapper({ canvasReady, fabricCanvasRef, isRestoringRef, onAddTask, onAddDocument, availableDocuments, availableTasks, isLoadingData, }) {
|
|
28
|
+
return canvasReady ? (_jsx(WhiteboardToolbar, { fabricCanvas: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: onAddTask, onAddDocument: onAddDocument, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData })) : (_jsx(ToolbarSkeleton, {}));
|
|
29
|
+
});
|
|
30
|
+
// ── Memoized Overlay wrapper (Issue 11) ───────────────────────────────────────
|
|
31
|
+
// This wrapper only updates when tasks/documents/canvasReady change
|
|
32
|
+
// Not on every pan/zoom frame
|
|
33
|
+
const MemoizedOverlayWrapper = React.memo(function OverlayWrapper({ tasks, documents, canvasReady, fabricCanvasRef, onTasksUpdate, onDocumentsUpdate, }) {
|
|
34
|
+
// Issue 11: Read zoom/viewport directly from fabricCanvas instead of prop drilling
|
|
35
|
+
// This prevents re-renders on every pan/zoom frame
|
|
36
|
+
const [canvasZoom, setCanvasZoom] = useState(1);
|
|
37
|
+
const [canvasViewport, setCanvasViewport] = useState({ x: 0, y: 0 });
|
|
38
|
+
const [selectionBox, setSelectionBox] = useState(null);
|
|
39
|
+
const [selectedCanvasObjects, setSelectedCanvasObjects] = useState([]);
|
|
40
|
+
// Effect to sync zoom/viewport from fabric canvas
|
|
41
|
+
// This keeps the overlay in sync without prop drilling
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
const canvas = fabricCanvasRef.current;
|
|
44
|
+
if (!canvas)
|
|
45
|
+
return;
|
|
46
|
+
const updateViewport = () => {
|
|
47
|
+
const vpt = canvas.viewportTransform;
|
|
48
|
+
if (!vpt)
|
|
49
|
+
return;
|
|
50
|
+
// Extract zoom (scale) from viewport transform
|
|
51
|
+
const zoom = vpt[0];
|
|
52
|
+
const vpX = vpt[4];
|
|
53
|
+
const vpY = vpt[5];
|
|
54
|
+
setCanvasZoom(zoom);
|
|
55
|
+
setCanvasViewport({ x: vpX, y: vpY });
|
|
56
|
+
};
|
|
57
|
+
// Update on viewport change
|
|
58
|
+
canvas.on("viewport:changed", updateViewport);
|
|
59
|
+
updateViewport(); // Initial sync
|
|
60
|
+
return () => {
|
|
61
|
+
canvas.off("viewport:changed", updateViewport);
|
|
62
|
+
};
|
|
63
|
+
}, [fabricCanvasRef, canvasReady]);
|
|
64
|
+
return (_jsx(CanvasOverlayLayer, { tasks: tasks, documents: documents, onTasksUpdate: onTasksUpdate, onDocumentsUpdate: onDocumentsUpdate, canvasZoom: canvasZoom, canvasViewport: canvasViewport, selectionBox: selectionBox, selectedCanvasObjects: selectedCanvasObjects, fabricCanvas: fabricCanvasRef, canvasReady: canvasReady }));
|
|
65
|
+
}, (prev, next) => {
|
|
66
|
+
// Custom comparator — only re-render if these props change
|
|
67
|
+
return (prev.tasks === next.tasks &&
|
|
68
|
+
prev.documents === next.documents &&
|
|
69
|
+
prev.canvasReady === next.canvasReady &&
|
|
70
|
+
prev.fabricCanvasRef === next.fabricCanvasRef &&
|
|
71
|
+
prev.onTasksUpdate === next.onTasksUpdate &&
|
|
72
|
+
prev.onDocumentsUpdate === next.onDocumentsUpdate);
|
|
73
|
+
});
|
|
26
74
|
export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs, availableTasks = [], availableDocuments = [], isLoadingData = false, }) {
|
|
27
75
|
// Refs
|
|
28
76
|
const canvasRef = useRef(null);
|
|
@@ -48,14 +96,10 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
|
|
|
48
96
|
const [tasks, setTasks] = useState([]);
|
|
49
97
|
const [canvasReady, setCanvasReady] = useState(false);
|
|
50
98
|
const [documents, setDocuments] = useState([]);
|
|
51
|
-
const [canvasZoom, setCanvasZoom] = useState(1);
|
|
52
|
-
const [canvasViewport, setCanvasViewport] = useState({ x: 0, y: 0 });
|
|
53
|
-
const [selectionBox, setSelectionBox] = useState(null);
|
|
54
|
-
const [selectedCanvasObjects, setSelectedCanvasObjects] = useState([]);
|
|
55
99
|
const MIN_ZOOM = 0.1;
|
|
56
100
|
const MAX_ZOOM = 5;
|
|
57
101
|
const ZOOM_STEP = 0.1;
|
|
58
|
-
//
|
|
102
|
+
// Initialize canvas
|
|
59
103
|
useCanvasInit({
|
|
60
104
|
canvasRef,
|
|
61
105
|
fabricCanvasRef,
|
|
@@ -68,7 +112,7 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
|
|
|
68
112
|
initialData,
|
|
69
113
|
onReady: () => setCanvasReady(true),
|
|
70
114
|
});
|
|
71
|
-
//
|
|
115
|
+
// Persistence
|
|
72
116
|
usePersistence({
|
|
73
117
|
fabricCanvas: fabricCanvasRef,
|
|
74
118
|
tasks,
|
|
@@ -121,26 +165,26 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
|
|
|
121
165
|
fabricCanvas: fabricCanvasRef,
|
|
122
166
|
MIN_ZOOM,
|
|
123
167
|
MAX_ZOOM,
|
|
124
|
-
canvasZoom,
|
|
125
|
-
canvasViewport,
|
|
126
|
-
setCanvasZoom,
|
|
127
|
-
setCanvasViewport,
|
|
168
|
+
canvasZoom: 1, // Not used for state — just reference
|
|
169
|
+
canvasViewport: { x: 0, y: 0 },
|
|
170
|
+
setCanvasZoom: () => { }, // Not used anymore
|
|
171
|
+
setCanvasViewport: () => { }, // Not used anymore
|
|
128
172
|
});
|
|
129
173
|
// Pan
|
|
130
174
|
usePan({
|
|
131
175
|
fabricCanvas: fabricCanvasRef,
|
|
132
176
|
activeTool,
|
|
133
177
|
handleZoom,
|
|
134
|
-
setCanvasViewport,
|
|
178
|
+
setCanvasViewport: () => { }, // Not used anymore
|
|
135
179
|
});
|
|
136
180
|
// Selection
|
|
137
181
|
useSelection({
|
|
138
182
|
fabricCanvas: fabricCanvasRef,
|
|
139
183
|
activeTool,
|
|
140
|
-
canvasZoom,
|
|
141
|
-
canvasViewport,
|
|
142
|
-
setSelectionBox,
|
|
143
|
-
setSelectedCanvasObjects,
|
|
184
|
+
canvasZoom: 1, // Read from canvas instead
|
|
185
|
+
canvasViewport: { x: 0, y: 0 },
|
|
186
|
+
setSelectionBox: () => { }, // Not used anymore
|
|
187
|
+
setSelectedCanvasObjects: () => { }, // Not used anymore
|
|
144
188
|
isDrawingRef,
|
|
145
189
|
});
|
|
146
190
|
// Text style updates
|
|
@@ -161,7 +205,7 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
|
|
|
161
205
|
drawingHandlers,
|
|
162
206
|
eraserHandlers,
|
|
163
207
|
});
|
|
164
|
-
//
|
|
208
|
+
// ── Memoized static handlers ──────────────────────────────────────────────────
|
|
165
209
|
const handleAddTaskFromDropdown = useCallback((taskTemplate) => {
|
|
166
210
|
const canvas = fabricCanvasRef.current;
|
|
167
211
|
if (!canvas)
|
|
@@ -172,7 +216,15 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
|
|
|
172
216
|
const liveZoom = vpt[0];
|
|
173
217
|
const cx = (canvas.getWidth() / 2 - vpt[4]) / liveZoom;
|
|
174
218
|
const cy = (canvas.getHeight() / 2 - vpt[5]) / liveZoom;
|
|
175
|
-
setTasks((prev) => [
|
|
219
|
+
setTasks((prev) => [
|
|
220
|
+
...prev,
|
|
221
|
+
{
|
|
222
|
+
...taskTemplate,
|
|
223
|
+
id: `${taskTemplate.id}-${Date.now()}`,
|
|
224
|
+
x: cx - 150,
|
|
225
|
+
y: cy - 60,
|
|
226
|
+
},
|
|
227
|
+
]);
|
|
176
228
|
}, []);
|
|
177
229
|
const handleAddDocumentFromDropdown = useCallback((docTemplate) => {
|
|
178
230
|
const canvas = fabricCanvasRef.current;
|
|
@@ -184,18 +236,43 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
|
|
|
184
236
|
const liveZoom = vpt[0];
|
|
185
237
|
const cx = (canvas.getWidth() / 2 - vpt[4]) / liveZoom;
|
|
186
238
|
const cy = (canvas.getHeight() / 2 - vpt[5]) / liveZoom;
|
|
187
|
-
setDocuments((prev) => [
|
|
239
|
+
setDocuments((prev) => [
|
|
240
|
+
...prev,
|
|
241
|
+
{
|
|
242
|
+
...docTemplate,
|
|
243
|
+
id: `${docTemplate.id}-${Date.now()}`,
|
|
244
|
+
x: cx - 160,
|
|
245
|
+
y: cy - 80,
|
|
246
|
+
},
|
|
247
|
+
]);
|
|
188
248
|
}, []);
|
|
189
|
-
|
|
190
|
-
const
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
249
|
+
// ── Zoom handlers (read from canvas directly) ────────────────────────────────
|
|
250
|
+
const handleZoomIn = useCallback(() => {
|
|
251
|
+
const canvas = fabricCanvasRef.current;
|
|
252
|
+
if (!canvas)
|
|
253
|
+
return;
|
|
254
|
+
const vpt = canvas.viewportTransform;
|
|
255
|
+
if (!vpt)
|
|
256
|
+
return;
|
|
257
|
+
const currentZoom = vpt[0];
|
|
258
|
+
handleZoom(currentZoom + ZOOM_STEP);
|
|
259
|
+
}, [handleZoom]);
|
|
260
|
+
const handleZoomOut = useCallback(() => {
|
|
261
|
+
const canvas = fabricCanvasRef.current;
|
|
262
|
+
if (!canvas)
|
|
263
|
+
return;
|
|
264
|
+
const vpt = canvas.viewportTransform;
|
|
265
|
+
if (!vpt)
|
|
266
|
+
return;
|
|
267
|
+
const currentZoom = vpt[0];
|
|
268
|
+
handleZoom(currentZoom - ZOOM_STEP);
|
|
269
|
+
}, [handleZoom]);
|
|
270
|
+
const handleResetZoom = useCallback(() => {
|
|
271
|
+
handleZoom(1);
|
|
272
|
+
}, [handleZoom]);
|
|
196
273
|
return (_jsx("div", { className: "easyflow-whiteboard w-full h-full", children: _jsxs("div", { ref: containerRef, className: "relative w-full h-full overflow-hidden bg-[#0b0b0b]", style: { touchAction: "none", overscrollBehavior: "none" }, children: [_jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
|
|
197
274
|
backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.2) 1.2px, transparent 1.2px)`,
|
|
198
275
|
backgroundSize: "40px 40px",
|
|
199
276
|
zIndex: 0,
|
|
200
|
-
} }), _jsx("canvas", { ref: canvasRef, className: "absolute inset-0", style: { zIndex: 1 } }),
|
|
277
|
+
} }), _jsx("canvas", { ref: canvasRef, className: "absolute inset-0", style: { zIndex: 1 } }), _jsx(MemoizedOverlayWrapper, { tasks: tasks, documents: documents, canvasReady: canvasReady, fabricCanvasRef: fabricCanvasRef, onTasksUpdate: setTasks, onDocumentsUpdate: setDocuments }), _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: _jsx(MemoizedToolbarWrapper, { canvasReady: canvasReady, fabricCanvasRef: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ToolOptionsPanel, { fabricCanvas: fabricCanvasRef }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ZoomControls, { zoom: 1, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onResetZoom: handleResetZoom }) })] })] }) }));
|
|
201
278
|
}
|
package/dist/styles.css
CHANGED
|
@@ -333,6 +333,24 @@
|
|
|
333
333
|
.z-\[100\] {
|
|
334
334
|
z-index: 100;
|
|
335
335
|
}
|
|
336
|
+
.container {
|
|
337
|
+
width: 100%;
|
|
338
|
+
@media (width >= 40rem) {
|
|
339
|
+
max-width: 40rem;
|
|
340
|
+
}
|
|
341
|
+
@media (width >= 48rem) {
|
|
342
|
+
max-width: 48rem;
|
|
343
|
+
}
|
|
344
|
+
@media (width >= 64rem) {
|
|
345
|
+
max-width: 64rem;
|
|
346
|
+
}
|
|
347
|
+
@media (width >= 80rem) {
|
|
348
|
+
max-width: 80rem;
|
|
349
|
+
}
|
|
350
|
+
@media (width >= 96rem) {
|
|
351
|
+
max-width: 96rem;
|
|
352
|
+
}
|
|
353
|
+
}
|
|
336
354
|
.-mx-1 {
|
|
337
355
|
margin-inline: calc(var(--spacing) * -1);
|
|
338
356
|
}
|