@mhamz.01/easyflow-whiteboard 2.171.0 → 2.172.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 (4) hide show
  1. package/dist/components/node/hooks/useNodeDrag.d.ts +3 -2
  2. package/dist/components/node/hooks/useNodeDrag.d.ts.map +1 -1
  3. package/dist/components/node/hooks/useNodeDrag.js +29 -15
  4. package/package.json +1 -1
package/dist/components/node/hooks/useNodeDrag.d.ts CHANGED
@@ -21,8 +21,9 @@ interface UseNodeDragProps {
21
21
  * during a drag stays correct without extra state dependencies.
22
22
  * - startPositions + anchor-offset approach prevents the "jump on drag start"
23
23
  * bug that occurs when using raw mouse coords.
24
- * - activeSelection group positions are resolved via calcTransformMatrix so
25
- * multi-selected Fabric objects stay in sync when dragged from HTML nodes.
24
+ * - Fabric object positions are read via queueMicrotask (after discardActiveObject)
25
+ * so they are always in ground-truth world coords, immune to Fabric v6's
26
+ * matrix-decomposition vs matrix-multiplication divergence.
26
27
  */
27
28
  export declare function useNodeDrag({ selectedIdsRef, dragSelectedIdsRef, localTasksRef, localDocumentsRef, fabricCanvas, setLocalTasks, setLocalDocuments, onTasksUpdate, onDocumentsUpdate, }: UseNodeDragProps): {
28
29
  dragging: {
package/dist/components/node/hooks/useNodeDrag.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useNodeDrag.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeDrag.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,UAAU,IAAI,eAAe,EAC7B,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAA4B,MAAM,wBAAwB,CAAC;AAEvF,UAAU,gBAAgB;IACxB,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,aAAa,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACrD;AAcD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,iBAAiB,GAClB,EAAE,gBAAgB;;iBACmC,MAAM,EAAE;;0BAcrD,MAAM,KAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS;8BAWzC,MAAM,KAAK,eAAe,GAAG,eAAe;EAkKxD"}
1
+ {"version":3,"file":"useNodeDrag.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeDrag.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,UAAU,IAAI,eAAe,EAC7B,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAA4B,MAAM,wBAAwB,CAAC;AAEvF,UAAU,gBAAgB;IACxB,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,aAAa,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACrD;AAcD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,iBAAiB,GAClB,EAAE,gBAAgB;;iBACmC,MAAM,EAAE;;0BAcrD,MAAM,KAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS;8BAWzC,MAAM,KAAK,eAAe,GAAG,eAAe;EAgLxD"}
package/dist/components/node/hooks/useNodeDrag.js CHANGED
@@ -17,8 +17,9 @@ function readPointer(e) {
17
17
  * during a drag stays correct without extra state dependencies.
18
18
  * - startPositions + anchor-offset approach prevents the "jump on drag start"
19
19
  * bug that occurs when using raw mouse coords.
20
- * - activeSelection group positions are resolved via calcTransformMatrix so
21
- * multi-selected Fabric objects stay in sync when dragged from HTML nodes.
20
+ * - Fabric object positions are read via queueMicrotask (after discardActiveObject)
21
+ * so they are always in ground-truth world coords, immune to Fabric v6's
22
+ * matrix-decomposition vs matrix-multiplication divergence.
22
23
  */
23
24
  export function useNodeDrag({ selectedIdsRef, dragSelectedIdsRef, localTasksRef, localDocumentsRef, fabricCanvas, setLocalTasks, setLocalDocuments, onTasksUpdate, onDocumentsUpdate, }) {
24
25
  const [dragging, setDragging] = useState(null);
@@ -72,21 +73,34 @@ export function useNodeDrag({ selectedIdsRef, dragSelectedIdsRef, localTasksRef,
72
73
  if (pos)
73
74
  startPositions.set(id, pos);
74
75
  });
75
- // Resolve Fabric object start positions. For activeSelection groups,
76
- // calcTransformMatrix gives the true world position regardless of the
77
- // group's internal coordinate space.
76
+ // Capture Fabric object references NOW (before handleSelect fires
77
+ // discardActiveObject), but read their actual left/top positions via a
78
+ // queueMicrotask that runs AFTER discardActiveObject() has restored every
79
+ // object to true world coordinates, yet BEFORE any requestAnimationFrame
80
+ // callback (where handleMove runs).
81
+ //
82
+ // Why not calcTransformMatrix() here?
83
+ // In Fabric v6 the matrix-multiplication path (calcTransformMatrix) and
84
+ // the matrix-decomposition path (ActiveSelection.destroy) are independent
85
+ // algorithms. They can diverge when objects carry scale, strokeUniform, or
86
+ // accumulated float rounding — causing a visible position jump on frame 1.
87
+ // Reading obj.left/top after discard is the ground-truth value: no
88
+ // prediction, no mismatch.
78
89
  const liveActiveObjects = canvas.getActiveObjects();
79
- const activeSelection = canvas.getActiveObject();
80
90
  const canvasObjectsStartPos = new Map();
81
- liveActiveObjects.forEach((obj) => {
82
- if (activeSelection?.type === "activeSelection") {
83
- const matrix = obj.calcTransformMatrix();
84
- canvasObjectsStartPos.set(obj, { left: matrix[4], top: matrix[5] });
85
- }
86
- else {
87
- canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
88
- }
89
- });
91
+ const objectsToSync = [...liveActiveObjects];
92
+ if (objectsToSync.length > 0) {
93
+ queueMicrotask(() => {
94
+ if (!dragStateRef.current.isDragging)
95
+ return;
96
+ objectsToSync.forEach((obj) => {
97
+ dragStateRef.current.canvasObjectsStartPos.set(obj, {
98
+ left: obj.left || 0,
99
+ top: obj.top || 0,
100
+ });
101
+ });
102
+ });
103
+ }
90
104
  dragStateRef.current = {
91
105
  isDragging: true,
92
106
  itemIds: itemsToDrag,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhamz.01/easyflow-whiteboard",
3
- "version": "2.171.0",
3
+ "version": "2.172.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",