@mhamz.01/easyflow-whiteboard 2.158.0 → 2.161.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.
@@ -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,wBAstBG"}
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;;AAcD,wBA6tBG"}
@@ -31,6 +31,7 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
31
31
  canvasObjectsStartPos: new Map(),
32
32
  offsetX: 0,
33
33
  offsetY: 0,
34
+ groupStartPos: null, // ← add this
34
35
  });
35
36
  const rafIdRef = useRef(null);
36
37
  const fabricMoveRafRef = useRef(null); // Issue 7
@@ -309,31 +310,31 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
309
310
  startPositions.set(id, pos);
310
311
  });
311
312
  const liveActiveObjects = canvas.getActiveObjects();
312
- const activeSelection = canvas.getActiveObject();
313
313
  const canvasObjectsStartPos = new Map();
314
- liveActiveObjects.forEach((obj) => {
315
- const activeSelection = canvas.getActiveObject();
316
- if (activeSelection && activeSelection.type === "activeSelection") {
317
- canvasObjectsStartPos.set(activeSelection, {
318
- left: activeSelection.left || 0,
319
- top: activeSelection.top || 0,
320
- });
321
- }
322
- else {
323
- canvasObjectsStartPos.set(obj, {
324
- left: obj.left || 0,
325
- top: obj.top || 0,
326
- });
314
+ const groupObj = canvas.getActiveObject();
315
+ const groupStartPos = (groupObj && groupObj.type === "activeSelection")
316
+ ? {
317
+ left: groupObj.left || 0,
318
+ top: groupObj.top || 0,
319
+ // offset from click to group's left/top in world units
320
+ offsetX: clickWorldX - (groupObj.left || 0),
321
+ offsetY: clickWorldY - (groupObj.top || 0),
327
322
  }
328
- });
323
+ : null;
324
+ if (!groupStartPos) {
325
+ liveActiveObjects.forEach((obj) => {
326
+ canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
327
+ });
328
+ }
329
329
  // 10. Commit to the ref for the requestAnimationFrame loop
330
330
  dragStateRef.current = {
331
331
  isDragging: true,
332
332
  itemIds: itemsToDrag,
333
333
  startPositions,
334
334
  canvasObjectsStartPos,
335
- offsetX: worldOffsetX, // ← was clickWorldX, should be the offset
336
- offsetY: worldOffsetY, // ← was clickWorldY
335
+ groupStartPos, // ← add this field
336
+ offsetX: worldOffsetX,
337
+ offsetY: worldOffsetY,
337
338
  };
338
339
  // if (!selectedIdsRef.current.has(itemId) && dragStateRef.current.itemIds.length === 0) {
339
340
  // setSelectedIds(new Set([itemId]));
@@ -402,18 +403,21 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
402
403
  }
403
404
  : d));
404
405
  // 7. Sync Fabric Objects (Imperative update for performance)
405
- canvasObjectsStartPos.forEach((startPos, obj) => {
406
- obj.set({
407
- left: startPos.left + deltaX,
408
- top: startPos.top + deltaY,
409
- });
410
- obj.setCoords(); // Required for selection/intersection accuracy
411
- });
406
+ // canvasObjectsStartPos.forEach((startPos, obj) => {
407
+ // obj.set({
408
+ // left: startPos.left + deltaX,
409
+ // top: startPos.top + deltaY,
410
+ // });
411
+ // obj.setCoords(); // Required for selection/intersection accuracy
412
+ // });
412
413
  const activeObj = canvas.getActiveObject();
413
414
  if (activeObj && activeObj.type === "activeSelection") {
414
- const groupStart = canvasObjectsStartPos.get(activeObj);
415
- if (groupStart) {
416
- activeObj.set({ left: groupStart.left + deltaX, top: groupStart.top + deltaY });
415
+ const { groupStartPos } = dragStateRef.current;
416
+ if (groupStartPos) {
417
+ activeObj.set({
418
+ left: currentWorldX - groupStartPos.offsetX,
419
+ top: currentWorldY - groupStartPos.offsetY,
420
+ });
417
421
  activeObj.setCoords();
418
422
  }
419
423
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhamz.01/easyflow-whiteboard",
3
- "version": "2.158.0",
3
+ "version": "2.161.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",