@mhamz.01/easyflow-whiteboard 2.102.0 → 2.103.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 (8) hide show
  1. package/dist/components/node/custom-node-overlay-layer.js +8 -8
  2. package/dist/hooks/usePersistance.d.ts.map +1 -1
  3. package/dist/hooks/usePersistance.js +10 -5
  4. package/dist/lib/fabric-arrow.d.ts.map +1 -1
  5. package/dist/lib/fabric-arrow.js +2 -4
  6. package/dist/lib/fabric-bidirectional-arrow.d.ts.map +1 -1
  7. package/dist/lib/fabric-bidirectional-arrow.js +10 -20
  8. package/package.json +1 -1
package/dist/components/node/custom-node-overlay-layer.js CHANGED
@@ -316,14 +316,14 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
316
316
  // (Current Mouse World - Initial World Offset from Start)
317
317
  const deltaX = currentWorldX - offsetX;
318
318
  const deltaY = currentWorldY - offsetY;
319
- if (itemIds.length > 0) {
320
- console.groupCollapsed(`Dragging Node: ${itemIds[0]}`);
321
- console.log("Screen Mouse:", { x: pointer.clientX, y: pointer.clientY });
322
- console.log("World Mouse:", { x: currentWorldX.toFixed(2), y: currentWorldY.toFixed(2) });
323
- console.log("Canvas Zoom:", liveZoom.toFixed(2));
324
- console.log("New Node Pos:", { x: deltaX.toFixed(2), y: deltaY.toFixed(2) });
325
- console.groupEnd();
326
- }
319
+ // if (itemIds.length > 0) {
320
+ // console.groupCollapsed(`Dragging Node: ${itemIds[0]}`);
321
+ // console.log("Screen Mouse:", { x: pointer.clientX, y: pointer.clientY });
322
+ // console.log("World Mouse:", { x: currentWorldX.toFixed(2), y: currentWorldY.toFixed(2) });
323
+ // console.log("Canvas Zoom:", liveZoom.toFixed(2));
324
+ // console.log("New Node Pos:", { x: deltaX.toFixed(2), y: deltaY.toFixed(2) });
325
+ // console.groupEnd();
326
+ // }
327
327
  // 5. Calculate the Movement Delta in World Units
328
328
  // We compare where the first item started vs where it is now.
329
329
  const firstId = itemIds[0];
package/dist/hooks/usePersistance.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"usePersistance.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersistance.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAIhC,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;CAClB;AAED,UAAU,mBAAmB;IAC3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAG7C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAElD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAID,eAAO,MAAM,cAAc,GAAI,8GAS5B,mBAAmB,SAwGrB,CAAC"}
1
+ {"version":3,"file":"usePersistance.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersistance.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAIhC,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;CAClB;AAED,UAAU,mBAAmB;IAC3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAG7C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAElD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAID,eAAO,MAAM,cAAc,GAAI,8GAS5B,mBAAmB,SAgHrB,CAAC"}
package/dist/hooks/usePersistance.js CHANGED
@@ -16,6 +16,7 @@ export const usePersistence = ({ fabricCanvas, tasks, documents, pushHistory, is
16
16
  // ── Core save function ────────────────────────────────────────────────────
17
17
  // Reads latest state from refs — safe to call from any closure regardless
18
18
  // of when it was created (no stale capture possible).
19
+ // ── Core save function ────────────────────────────────────────────────────
19
20
  const performSave = useRef(() => {
20
21
  const canvas = fabricCanvas.current;
21
22
  if (!canvas)
@@ -24,14 +25,18 @@ export const usePersistence = ({ fabricCanvas, tasks, documents, pushHistory, is
24
25
  return;
25
26
  try {
26
27
  const canvasJson = JSON.stringify(canvas.toJSON());
27
- // Push to undo/redo history
28
- pushHistoryRef.current(canvasJson);
29
- // Notify consumer — they decide how to persist (DB, API, etc.)
30
- onSaveRef.current?.({
28
+ // Create the final payload object
29
+ const payload = {
31
30
  canvas: canvasJson,
32
31
  tasks: tasksRef.current,
33
32
  documents: documentsRef.current,
34
- });
33
+ };
34
+ // 🔍 ADD THIS LOG HERE:
35
+ console.log("🚀 FINAL WHITEBOARD STRUCTURE:", payload);
36
+ // Push to undo/redo history
37
+ pushHistoryRef.current(canvasJson);
38
+ // Notify consumer
39
+ onSaveRef.current?.(payload);
35
40
  }
36
41
  catch (err) {
37
42
  console.error("[usePersistence] Save failed:", err);
package/dist/lib/fabric-arrow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fabric-arrow.d.ts","sourceRoot":"","sources":["../../src/lib/fabric-arrow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAiB,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAEvG,qBAAa,KAAM,SAAQ,IAAI;IAC7B,MAAM,CAAC,IAAI,SAAW;gBAIV,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE,GAAG;IAInE,OAAO,CAAC,GAAG,EAAE,wBAAwB;IA6BrC;;;OAGG;IACH,QAAQ,CACN,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,mBAAmB,CAAC,EAC9F,CAAC,SAAS,MAAM,CAAC,GAAG,KAAK,EACzB,mBAAmB,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,mBAAmB;IAI9D;;OAEG;IACH,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC;CAU/C"}
1
+ {"version":3,"file":"fabric-arrow.d.ts","sourceRoot":"","sources":["../../src/lib/fabric-arrow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAiB,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAEvG,qBAAa,KAAM,SAAQ,IAAI;IAC7B,MAAM,CAAC,IAAI,SAAW;gBAIV,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE,GAAG;IAInE,OAAO,CAAC,GAAG,EAAE,wBAAwB;IA2BrC;;;OAGG;IACH,QAAQ,CACN,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,mBAAmB,CAAC,EAC9F,CAAC,SAAS,MAAM,CAAC,GAAG,KAAK,EACzB,mBAAmB,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,mBAAmB;IAI9D;;OAEG;IACH,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC;CAU/C"}
package/dist/lib/fabric-arrow.js CHANGED
@@ -11,10 +11,8 @@ export class Arrow extends Line {
11
11
  const dx = p.x2 - p.x1;
12
12
  const dy = p.y2 - p.y1;
13
13
  const angle = Math.atan2(dy, dx);
14
- // ← FIX: Scale arrowhead based on strokeWidth
15
- const strokeWidth = this.strokeWidth || 2;
16
- const headLength = 10 + strokeWidth * 2; // Base 10 + 2x stroke
17
- const headWidth = 6 + strokeWidth * 1.5; // Base 6 + 1.5x stroke
14
+ const headLength = 15;
15
+ const headWidth = 10;
18
16
  ctx.save();
19
17
  ctx.translate(p.x2, p.y2);
20
18
  ctx.rotate(angle);
package/dist/lib/fabric-bidirectional-arrow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fabric-bidirectional-arrow.d.ts","sourceRoot":"","sources":["../../src/lib/fabric-bidirectional-arrow.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,IAAI,EAEJ,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACb,MAAM,QAAQ,CAAC;AAGhB,qBAAa,kBAAmB,SAAQ,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,mBAAmB,EAAE,YAAY,CAAC;IACzG,OAAgB,IAAI,SAAyB;IAEtC,QAAQ,EAAE,MAAM,CAAC;gBAEZ,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE,GAAG;IAKnE,OAAgB,eAAe,WAAyC;IAExE,OAAO,CAAC,GAAG,EAAE,wBAAwB;IAwCrC,OAAO,CAAC,cAAc;IAStB;;;OAGG;IACM,QAAQ,CACf,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,mBAAmB,CAAC,EAC9F,CAAC,SAAS,MAAM,CAAC,GAAG,KAAK,EACzB,mBAAmB,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,mBAAmB;IAO9D;;;OAGG;WACa,UAAU,CAAC,MAAM,EAAE,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC;CAStD"}
1
+ {"version":3,"file":"fabric-bidirectional-arrow.d.ts","sourceRoot":"","sources":["../../src/lib/fabric-bidirectional-arrow.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,IAAI,EAEJ,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACb,MAAM,QAAQ,CAAC;AAGhB,qBAAa,kBAAmB,SAAQ,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,mBAAmB,EAAE,YAAY,CAAC;IACzG,OAAgB,IAAI,SAAyB;IAEtC,QAAQ,EAAE,MAAM,CAAC;gBAEZ,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE,GAAG;IAKnE,OAAgB,eAAe,WAAyC;IAExE,OAAO,CAAC,GAAG,EAAE,wBAAwB;IA6BrC,OAAO,CAAC,cAAc;IAStB;;;OAGG;IACM,QAAQ,CACf,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,mBAAmB,CAAC,EAC9F,CAAC,SAAS,MAAM,CAAC,GAAG,KAAK,EACzB,mBAAmB,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,mBAAmB;IAO9D;;;OAGG;WACa,UAAU,CAAC,MAAM,EAAE,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC;CAStD"}
package/dist/lib/fabric-bidirectional-arrow.js CHANGED
@@ -11,31 +11,21 @@ export class BidirectionalArrow extends Line {
11
11
  const dx = p.x2 - p.x1;
12
12
  const dy = p.y2 - p.y1;
13
13
  const angle = Math.atan2(dy, dx);
14
- const strokeWidth = this.strokeWidth || 2;
15
- const headLength = 10 + strokeWidth * 2;
16
- const headWidth = 6 + strokeWidth * 1.5;
14
+ const head = this.headSize;
15
+ ctx.save();
16
+ ctx.fillStyle = this.stroke || "#000000";
17
+ // End Arrowhead
17
18
  ctx.save();
18
- // Right arrowhead
19
19
  ctx.translate(p.x2, p.y2);
20
20
  ctx.rotate(angle);
21
- ctx.beginPath();
22
- ctx.moveTo(0, 0);
23
- ctx.lineTo(-headLength, headWidth / 2);
24
- ctx.lineTo(-headLength, -headWidth / 2);
25
- ctx.closePath();
26
- ctx.fillStyle = this.stroke || "#000000";
27
- ctx.fill();
28
- // Left arrowhead
29
- ctx.translate(-p.x2, -p.y2);
21
+ this._drawArrowHead(ctx, head);
22
+ ctx.restore();
23
+ // Start Arrowhead
24
+ ctx.save();
30
25
  ctx.translate(p.x1, p.y1);
31
26
  ctx.rotate(angle + Math.PI);
32
- ctx.beginPath();
33
- ctx.moveTo(0, 0);
34
- ctx.lineTo(-headLength, headWidth / 2);
35
- ctx.lineTo(-headLength, -headWidth / 2);
36
- ctx.closePath();
37
- ctx.fillStyle = this.stroke || "#000000";
38
- ctx.fill();
27
+ this._drawArrowHead(ctx, head);
28
+ ctx.restore();
39
29
  ctx.restore();
40
30
  }
41
31
  _drawArrowHead(ctx, size) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhamz.01/easyflow-whiteboard",
3
- "version": "2.102.0",
3
+ "version": "2.103.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",