@mhamz.01/easyflow-whiteboard 1.8.0 → 1.10.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.
Files changed (5) hide show
  1. package/dist/components/node/custom-node-overlay-layer.d.ts.map +1 -1
  2. package/dist/components/node/custom-node-overlay-layer.js +51 -0
  3. package/dist/hooks/useSelection.d.ts.map +1 -1
  4. package/dist/hooks/useSelection.js +11 -4
  5. package/package.json +1 -1
package/dist/components/node/custom-node-overlay-layer.d.ts.map CHANGED
@@ -1 +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;AAM9C,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,2CA+czB"}
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;AAM9C,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,2CAghBzB"}
package/dist/components/node/custom-node-overlay-layer.js CHANGED
@@ -22,6 +22,57 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
22
22
  // ── Sync props → local state ────────────────────────────────────────────────
23
23
  useEffect(() => { setLocalTasks(tasks); }, [tasks]);
24
24
  useEffect(() => { setLocalDocuments(documents); }, [documents]);
25
+ // ----Sync with Fabric canvas-------------------------------------------------
26
+ useEffect(() => {
27
+ const canvas = fabricCanvas?.current;
28
+ if (!canvas)
29
+ return;
30
+ const handleSelectionCleared = () => {
31
+ setSelectedIds(new Set());
32
+ };
33
+ const handleMouseDown = (e) => {
34
+ if (!e.target) {
35
+ setSelectedIds(new Set());
36
+ }
37
+ };
38
+ canvas.on("selection:cleared", handleSelectionCleared);
39
+ canvas.on("mouse:down", handleMouseDown);
40
+ return () => {
41
+ canvas.off("selection:cleared", handleSelectionCleared);
42
+ canvas.off("mouse:down", handleMouseDown);
43
+ };
44
+ }, [fabricCanvas]);
45
+ // 3. Update your existing keyboard handler to include clearing on click outside
46
+ useEffect(() => {
47
+ const handleKeyDown = (e) => {
48
+ if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
49
+ return;
50
+ // Clear selection on Escape
51
+ if (e.key === "Escape") {
52
+ setSelectedIds(new Set());
53
+ fabricCanvas?.current?.discardActiveObject();
54
+ fabricCanvas?.current?.renderAll();
55
+ }
56
+ // Select All
57
+ if ((e.ctrlKey || e.metaKey) && e.key === "a") {
58
+ e.preventDefault();
59
+ setSelectedIds(new Set([...localTasks.map((t) => t.id), ...localDocuments.map((d) => d.id)]));
60
+ }
61
+ // Delete
62
+ if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
63
+ e.preventDefault();
64
+ const updatedTasks = localTasks.filter((t) => !selectedIds.has(t.id));
65
+ const updatedDocs = localDocuments.filter((d) => !selectedIds.has(d.id));
66
+ setLocalTasks(updatedTasks);
67
+ setLocalDocuments(updatedDocs);
68
+ setSelectedIds(new Set());
69
+ onTasksUpdate?.(updatedTasks);
70
+ onDocumentsUpdate?.(updatedDocs);
71
+ }
72
+ };
73
+ window.addEventListener("keydown", handleKeyDown);
74
+ return () => window.removeEventListener("keydown", handleKeyDown);
75
+ }, [localTasks, localDocuments, selectedIds, fabricCanvas, onTasksUpdate, onDocumentsUpdate]);
25
76
  // ── Event Forwarding (Fixes Zooming on Nodes) ───────────────────────────────
26
77
  const handleOverlayWheel = (e) => {
27
78
  if (e.ctrlKey || e.metaKey || e.shiftKey) {
package/dist/hooks/useSelection.d.ts.map CHANGED
@@ -1 +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,oHAQ1B,iBAAiB,SA0JnB,CAAC"}
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,oHAQ1B,iBAAiB,SAkKnB,CAAC"}
package/dist/hooks/useSelection.js CHANGED
@@ -54,12 +54,19 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
54
54
  });
55
55
  selRect.setCoords();
56
56
  canvas.renderAll();
57
+ // ═══════════════════════════════════════════════════════════════
58
+ // FIX: Get canvas element offset from viewport
59
+ // ═══════════════════════════════════════════════════════════════
60
+ const canvasElement = canvas.getElement();
61
+ const rect = canvasElement.getBoundingClientRect();
62
+ // Calculate selection box in screen coordinates (including canvas offset)
57
63
  setSelectionBox({
58
- x1: Math.min(selStart.x, p.x) * canvasZoom + canvasViewport.x,
59
- y1: Math.min(selStart.y, p.y) * canvasZoom + canvasViewport.y,
60
- x2: Math.max(selStart.x, p.x) * canvasZoom + canvasViewport.x,
61
- y2: Math.max(selStart.y, p.y) * canvasZoom + canvasViewport.y,
64
+ x1: Math.min(selStart.x, p.x) * canvasZoom + canvasViewport.x + rect.left,
65
+ y1: Math.min(selStart.y, p.y) * canvasZoom + canvasViewport.y + rect.top,
66
+ x2: Math.max(selStart.x, p.x) * canvasZoom + canvasViewport.x + rect.left,
67
+ y2: Math.max(selStart.y, p.y) * canvasZoom + canvasViewport.y + rect.top,
62
68
  });
69
+ // ═══════════════════════════════════════════════════════════════
63
70
  });
64
71
  };
65
72
  const onUp = () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhamz.01/easyflow-whiteboard",
3
- "version": "1.8.0",
3
+ "version": "1.10.0",
4
4
  "description": "A feature-rich whiteboard component built with Fabric.js and React",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",