@mhamz.01/easyflow-whiteboard 2.119.0 → 2.120.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AAQC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAkB3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGtD,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;AAID,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;IAClC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACtB,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;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAmB,EACnB,kBAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AAQC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAkB3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGtD,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;AAID,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;IAClC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACtB,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;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAmB,EACnB,kBAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CA4PvB"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useRef, useState } from "react";
|
|
3
|
+
import { useCallback, useMemo, 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";
|
|
@@ -161,12 +161,8 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
|
|
|
161
161
|
drawingHandlers,
|
|
162
162
|
eraserHandlers,
|
|
163
163
|
});
|
|
164
|
-
//
|
|
165
|
-
const
|
|
166
|
-
const handleZoomOut = () => handleZoom(canvasZoom - ZOOM_STEP);
|
|
167
|
-
const handleResetZoom = () => handleZoom(1);
|
|
168
|
-
// Dropdown handlers
|
|
169
|
-
const handleAddTaskFromDropdown = (taskTemplate) => {
|
|
164
|
+
// 1. Memoize static handlers
|
|
165
|
+
const handleAddTaskFromDropdown = useCallback((taskTemplate) => {
|
|
170
166
|
const canvas = fabricCanvasRef.current;
|
|
171
167
|
if (!canvas)
|
|
172
168
|
return;
|
|
@@ -176,12 +172,9 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
|
|
|
176
172
|
const liveZoom = vpt[0];
|
|
177
173
|
const cx = (canvas.getWidth() / 2 - vpt[4]) / liveZoom;
|
|
178
174
|
const cy = (canvas.getHeight() / 2 - vpt[5]) / liveZoom;
|
|
179
|
-
setTasks((prev) => [
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
]);
|
|
183
|
-
};
|
|
184
|
-
const handleAddDocumentFromDropdown = (docTemplate) => {
|
|
175
|
+
setTasks((prev) => [...prev, { ...taskTemplate, id: `${taskTemplate.id}-${Date.now()}`, x: cx - 150, y: cy - 60 }]);
|
|
176
|
+
}, []);
|
|
177
|
+
const handleAddDocumentFromDropdown = useCallback((docTemplate) => {
|
|
185
178
|
const canvas = fabricCanvasRef.current;
|
|
186
179
|
if (!canvas)
|
|
187
180
|
return;
|
|
@@ -191,16 +184,18 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
|
|
|
191
184
|
const liveZoom = vpt[0];
|
|
192
185
|
const cx = (canvas.getWidth() / 2 - vpt[4]) / liveZoom;
|
|
193
186
|
const cy = (canvas.getHeight() / 2 - vpt[5]) / liveZoom;
|
|
194
|
-
setDocuments((prev) => [
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
187
|
+
setDocuments((prev) => [...prev, { ...docTemplate, id: `${docTemplate.id}-${Date.now()}`, x: cx - 160, y: cy - 80 }]);
|
|
188
|
+
}, []);
|
|
189
|
+
const handleZoomIn = useCallback(() => handleZoom(canvasZoom + ZOOM_STEP), [canvasZoom, handleZoom]);
|
|
190
|
+
const handleZoomOut = useCallback(() => handleZoom(canvasZoom - ZOOM_STEP), [canvasZoom, handleZoom]);
|
|
191
|
+
const handleResetZoom = useCallback(() => handleZoom(1), [handleZoom]);
|
|
192
|
+
const MemoOverlay = useMemo(() => (_jsx(CanvasOverlayLayer, { tasks: tasks, documents: documents, onTasksUpdate: setTasks, onDocumentsUpdate: setDocuments, canvasZoom: canvasZoom, canvasViewport: canvasViewport, selectionBox: selectionBox, selectedCanvasObjects: selectedCanvasObjects, fabricCanvas: fabricCanvasRef, canvasReady: canvasReady })), [tasks, documents, canvasZoom, canvasViewport, selectionBox, selectedCanvasObjects, canvasReady]);
|
|
193
|
+
const MemoToolbar = useMemo(() => (canvasReady
|
|
194
|
+
? _jsx(WhiteboardToolbar, { fabricCanvas: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData })
|
|
195
|
+
: _jsx(ToolbarSkeleton, {})), [canvasReady, availableDocuments, availableTasks, isLoadingData, handleAddTaskFromDropdown, handleAddDocumentFromDropdown]);
|
|
196
|
+
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: {
|
|
200
197
|
backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.2) 1.2px, transparent 1.2px)`,
|
|
201
198
|
backgroundSize: "40px 40px",
|
|
202
199
|
zIndex: 0,
|
|
203
|
-
} }), _jsx("canvas", { ref: canvasRef, className: "absolute inset-0", style: { zIndex: 1 } }),
|
|
204
|
-
_jsx(WhiteboardToolbar, { fabricCanvas: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData })
|
|
205
|
-
: _jsx(ToolbarSkeleton, {}) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ToolOptionsPanel, { fabricCanvas: fabricCanvasRef }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ZoomControls, { zoom: canvasZoom, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onResetZoom: handleResetZoom }) })] })] }) }));
|
|
200
|
+
} }), _jsx("canvas", { ref: canvasRef, className: "absolute inset-0", style: { zIndex: 1 } }), MemoOverlay, _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: MemoToolbar }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ToolOptionsPanel, { fabricCanvas: fabricCanvasRef }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ZoomControls, { zoom: canvasZoom, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onResetZoom: handleResetZoom }) })] })] }) }));
|
|
206
201
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEraser.d.ts","sourceRoot":"","sources":["../../src/hooks/useEraser.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,UAAU,cAAc;IACtB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACzC,gBAAgB,EAAE,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/C,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,aAAa,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC7C,mBAAmB,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;IACzC,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,GAAI,oKAWvB,cAAc;;;;gCAsBoB;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;;
|
|
1
|
+
{"version":3,"file":"useEraser.d.ts","sourceRoot":"","sources":["../../src/hooks/useEraser.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,UAAU,cAAc;IACtB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACzC,gBAAgB,EAAE,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/C,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,aAAa,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC7C,mBAAmB,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;IACzC,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,GAAI,oKAWvB,cAAc;;;;gCAsBoB;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;;CA0I5D,CAAC"}
|
package/dist/hooks/useEraser.js
CHANGED
|
@@ -24,7 +24,7 @@ export const useEraser = ({ fabricCanvas, activeTool, toolOptions, eraserTraceRe
|
|
|
24
24
|
const canvas = fabricCanvas.current;
|
|
25
25
|
if (!canvas || activeTool !== "eraser")
|
|
26
26
|
return;
|
|
27
|
-
//
|
|
27
|
+
// Create or update trace circle
|
|
28
28
|
if (!eraserTraceRef.current) {
|
|
29
29
|
eraserTraceRef.current = new Circle({
|
|
30
30
|
radius: toolOptions.eraser.size / 1.5,
|
|
@@ -45,54 +45,66 @@ export const useEraser = ({ fabricCanvas, activeTool, toolOptions, eraserTraceRe
|
|
|
45
45
|
eraserTraceRef.current.set({ left: pointer.x, top: pointer.y });
|
|
46
46
|
eraserTraceRef.current.setCoords();
|
|
47
47
|
canvas.bringObjectToFront(eraserTraceRef.current);
|
|
48
|
+
// Smooth continuous trail
|
|
48
49
|
if (eraserActiveRef.current) {
|
|
49
50
|
suppressHistoryRef.current = true;
|
|
50
51
|
if (eraserPathPointsRef.current.length === 0) {
|
|
51
52
|
eraserPathPointsRef.current = [`M ${pointer.x} ${pointer.y}`];
|
|
52
53
|
const path = new fabric.Path(eraserPathPointsRef.current.join(" "), {
|
|
53
|
-
stroke: "rgba(
|
|
54
|
+
stroke: "rgba(220, 220, 220, 0.7)",
|
|
54
55
|
strokeWidth: toolOptions.eraser.size,
|
|
55
56
|
fill: null,
|
|
56
57
|
selectable: false,
|
|
57
58
|
evented: false,
|
|
58
59
|
strokeLineCap: "round",
|
|
59
60
|
strokeLineJoin: "round",
|
|
61
|
+
opacity: 1,
|
|
60
62
|
excludeFromExport: true,
|
|
61
63
|
});
|
|
62
64
|
canvas.add(path);
|
|
63
65
|
eraserPathRef.current = path;
|
|
64
66
|
}
|
|
65
67
|
else {
|
|
66
|
-
// ── FIX 1: Mutate path in place — no remove/add, no events fired ──
|
|
67
68
|
eraserPathPointsRef.current.push(`L ${pointer.x} ${pointer.y}`);
|
|
68
69
|
const pathString = eraserPathPointsRef.current.join(" ");
|
|
69
70
|
if (eraserPathRef.current) {
|
|
70
|
-
|
|
71
|
-
eraserPathRef.current.set({ path: parsed.path });
|
|
72
|
-
eraserPathRef.current.setCoords();
|
|
71
|
+
canvas.remove(eraserPathRef.current);
|
|
73
72
|
}
|
|
73
|
+
const path = new fabric.Path(pathString, {
|
|
74
|
+
stroke: "rgba(53, 53, 53, 0.7)",
|
|
75
|
+
strokeWidth: toolOptions.eraser.size,
|
|
76
|
+
fill: null,
|
|
77
|
+
selectable: false,
|
|
78
|
+
evented: false,
|
|
79
|
+
strokeLineCap: "round",
|
|
80
|
+
strokeLineJoin: "round",
|
|
81
|
+
opacity: 1,
|
|
82
|
+
excludeFromExport: true,
|
|
83
|
+
});
|
|
84
|
+
canvas.add(path);
|
|
85
|
+
eraserPathRef.current = path;
|
|
74
86
|
}
|
|
75
87
|
canvas.bringObjectToFront(eraserTraceRef.current);
|
|
76
88
|
}
|
|
77
|
-
//
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
else if (previousTargets.has(obj)) {
|
|
90
|
-
obj.set({ opacity: 1 });
|
|
89
|
+
// Find objects under eraser
|
|
90
|
+
const previousTargets = new Set(eraserTargetsRef.current);
|
|
91
|
+
eraserTargetsRef.current.clear();
|
|
92
|
+
canvas.forEachObject((obj) => {
|
|
93
|
+
if (obj === eraserTraceRef.current)
|
|
94
|
+
return;
|
|
95
|
+
if (obj === eraserPathRef.current)
|
|
96
|
+
return;
|
|
97
|
+
if (obj.intersectsWithObject(eraserTraceRef.current)) {
|
|
98
|
+
eraserTargetsRef.current.add(obj);
|
|
99
|
+
if (eraserActiveRef.current && obj.opacity !== 0.3) {
|
|
100
|
+
obj.set({ opacity: 0.3 });
|
|
91
101
|
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
102
|
+
}
|
|
103
|
+
else if (previousTargets.has(obj)) {
|
|
104
|
+
obj.set({ opacity: 1 });
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
canvas.renderAll();
|
|
96
108
|
};
|
|
97
109
|
const handleEraserUp = () => {
|
|
98
110
|
const canvas = fabricCanvas.current;
|
package/dist/styles.css
CHANGED