@mhamz.01/easyflow-whiteboard 2.152.0 → 2.154.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 +38 -11
  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":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI9C,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;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,IAAI,CAAC,CAAC;CAC5D;;AAaD,wBAyrBG"}
1
+ {"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI9C,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;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,IAAI,CAAC,CAAC;CAC5D;;AAaD,wBAktBG"}
package/dist/components/node/custom-node-overlay-layer.js CHANGED
@@ -20,6 +20,7 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
20
20
  const isHtmlSelectingRef = useRef(false);
21
21
  const isSelectionBoxActiveRef = useRef(false);
22
22
  const htmlNodesSelectedByBoxRef = useRef(false);
23
+ const dragSelectedIdsRef = useRef(new Set());
23
24
  localTasksRef.current = localTasks;
24
25
  localDocumentsRef.current = localDocuments;
25
26
  selectedIdsRef.current = selectedIds;
@@ -128,7 +129,8 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
128
129
  target._prevTop = target.top;
129
130
  if (deltaX === 0 && deltaY === 0)
130
131
  return;
131
- const sel = selectedIdsRef.current;
132
+ // const sel = selectedIdsRef.current;
133
+ const sel = dragSelectedIdsRef.current;
132
134
  // Skip if frame already queued
133
135
  if (fabricMoveRafRef.current !== null)
134
136
  return;
@@ -154,11 +156,16 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
154
156
  const isClickingIntoActiveSelection = target &&
155
157
  activeObjects.length > 1 &&
156
158
  activeObjects.includes(target); // ← target must be IN the selection, not just any click
157
- if (isClickingIntoActiveSelection)
159
+ if (isClickingIntoActiveSelection) {
160
+ // ← Snapshot BEFORE any selection events fire
161
+ dragSelectedIdsRef.current = new Set(selectedIdsRef.current);
158
162
  return;
163
+ }
159
164
  if (isSelectionBoxActiveRef.current)
160
165
  return;
166
+ dragSelectedIdsRef.current = new Set(selectedIdsRef.current);
161
167
  htmlNodesSelectedByBoxRef.current = false;
168
+ // dragSelectedIdsRef.current = new Set();
162
169
  setSelectedIds(new Set());
163
170
  };
164
171
  // const handleSelectionCleared = () => {
@@ -301,13 +308,27 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
301
308
  if (pos)
302
309
  startPositions.set(id, pos);
303
310
  });
304
- // 9. Snapshot starting positions for all selected Fabric objects
311
+ const liveActiveObjects = canvas.getActiveObjects();
312
+ const activeSelection = canvas.getActiveObject();
305
313
  const canvasObjectsStartPos = new Map();
306
- selectedCanvasObjects.forEach((obj) => {
307
- canvasObjectsStartPos.set(obj, {
308
- left: obj.left || 0,
309
- top: obj.top || 0,
310
- });
314
+ liveActiveObjects.forEach((obj) => {
315
+ // If objects are grouped in an activeSelection, their left/top is relative
316
+ // to the group center. We need their true world position instead.
317
+ if (activeSelection && activeSelection.type === "activeSelection") {
318
+ // Calculate the object's true world position from its transform matrix
319
+ const matrix = obj.calcTransformMatrix();
320
+ canvasObjectsStartPos.set(obj, {
321
+ left: matrix[4], // translateX from world transform
322
+ top: matrix[5], // translateY from world transform
323
+ });
324
+ }
325
+ else {
326
+ // Single object — left/top IS world position
327
+ canvasObjectsStartPos.set(obj, {
328
+ left: obj.left || 0,
329
+ top: obj.top || 0,
330
+ });
331
+ }
311
332
  });
312
333
  // 10. Commit to the ref for the requestAnimationFrame loop
313
334
  dragStateRef.current = {
@@ -318,9 +339,10 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
318
339
  offsetX: worldOffsetX, // ← was clickWorldX, should be the offset
319
340
  offsetY: worldOffsetY, // ← was clickWorldY
320
341
  };
321
- if (!selectedIdsRef.current.has(itemId) && dragStateRef.current.itemIds.length === 0) {
322
- setSelectedIds(new Set([itemId]));
323
- }
342
+ // if (!selectedIdsRef.current.has(itemId) && dragStateRef.current.itemIds.length === 0) {
343
+ // setSelectedIds(new Set([itemId]));
344
+ // }
345
+ dragSelectedIdsRef.current = new Set(itemsToDrag);
324
346
  // 11. Trigger UI states
325
347
  setDragging({ itemIds: itemsToDrag });
326
348
  document.body.style.cursor = "grabbing";
@@ -391,6 +413,10 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
391
413
  });
392
414
  obj.setCoords(); // Required for selection/intersection accuracy
393
415
  });
416
+ const activeObj = canvas.getActiveObject();
417
+ if (activeObj && activeObj.type === "activeSelection") {
418
+ activeObj.setCoords();
419
+ }
394
420
  // 8. Single render call for all Fabric changes
395
421
  canvas.requestRenderAll();
396
422
  });
@@ -400,6 +426,7 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
400
426
  if (rafIdRef.current !== null)
401
427
  cancelAnimationFrame(rafIdRef.current);
402
428
  dragStateRef.current.isDragging = false;
429
+ dragSelectedIdsRef.current = new Set();
403
430
  setDragging(null);
404
431
  document.body.style.cursor = "";
405
432
  document.body.style.userSelect = "";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhamz.01/easyflow-whiteboard",
3
- "version": "2.152.0",
3
+ "version": "2.154.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",