@mhamz.01/easyflow-whiteboard 1.9.0 → 1.11.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 (3) 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 +57 -1
  3. 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,2CAshBzB"}
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) {
@@ -344,8 +395,13 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
344
395
  }, children: children }, id));
345
396
  };
346
397
  return (_jsx("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none", style: { zIndex: 50 }, onWheel: handleOverlayWheel, onClick: (e) => {
347
- if (e.target === e.currentTarget)
398
+ // Clear selection when clicking on overlay background
399
+ if (e.target === e.currentTarget) {
348
400
  setSelectedIds(new Set());
401
+ // Also clear Fabric selection
402
+ fabricCanvas?.current?.discardActiveObject();
403
+ fabricCanvas?.current?.renderAll();
404
+ }
349
405
  }, children: _jsxs("div", { className: "absolute top-0 left-0 pointer-events-none", style: {
350
406
  transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px)`,
351
407
  transformOrigin: "top left",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhamz.01/easyflow-whiteboard",
3
- "version": "1.9.0",
3
+ "version": "1.11.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",