@mhamz.01/easyflow-whiteboard 2.151.0 → 2.153.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 +31 -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,wBA2qBG"}
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,wBAgsBG"}
package/dist/components/node/custom-node-overlay-layer.js CHANGED
@@ -19,6 +19,8 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
19
19
  const selectedIdsRef = useRef(selectedIds);
20
20
  const isHtmlSelectingRef = useRef(false);
21
21
  const isSelectionBoxActiveRef = useRef(false);
22
+ const htmlNodesSelectedByBoxRef = useRef(false);
23
+ const dragSelectedIdsRef = useRef(new Set());
22
24
  localTasksRef.current = localTasks;
23
25
  localDocumentsRef.current = localDocuments;
24
26
  selectedIdsRef.current = selectedIds;
@@ -127,7 +129,8 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
127
129
  target._prevTop = target.top;
128
130
  if (deltaX === 0 && deltaY === 0)
129
131
  return;
130
- const sel = selectedIdsRef.current;
132
+ // const sel = selectedIdsRef.current;
133
+ const sel = dragSelectedIdsRef.current;
131
134
  // Skip if frame already queued
132
135
  if (fabricMoveRafRef.current !== null)
133
136
  return;
@@ -153,10 +156,16 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
153
156
  const isClickingIntoActiveSelection = target &&
154
157
  activeObjects.length > 1 &&
155
158
  activeObjects.includes(target); // ← target must be IN the selection, not just any click
156
- if (isClickingIntoActiveSelection)
159
+ if (isClickingIntoActiveSelection) {
160
+ // ← Snapshot BEFORE any selection events fire
161
+ dragSelectedIdsRef.current = new Set(selectedIdsRef.current);
157
162
  return;
163
+ }
158
164
  if (isSelectionBoxActiveRef.current)
159
165
  return;
166
+ dragSelectedIdsRef.current = new Set(selectedIdsRef.current);
167
+ htmlNodesSelectedByBoxRef.current = false;
168
+ // dragSelectedIdsRef.current = new Set();
160
169
  setSelectedIds(new Set());
161
170
  };
162
171
  // const handleSelectionCleared = () => {
@@ -167,6 +176,8 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
167
176
  return; // ← skip if HTML node initiated this
168
177
  if (isSelectionBoxActiveRef.current)
169
178
  return; // ← add this
179
+ if (htmlNodesSelectedByBoxRef.current)
180
+ return;
170
181
  setSelectedIds(new Set());
171
182
  };
172
183
  const handleFabricSelectionUpdated = () => {
@@ -174,6 +185,8 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
174
185
  return; // ← skip if HTML node initiated this
175
186
  if (isSelectionBoxActiveRef.current)
176
187
  return; // ← add this
188
+ if (htmlNodesSelectedByBoxRef.current)
189
+ return;
177
190
  setSelectedIds(new Set());
178
191
  };
179
192
  canvas.on("object:moving", handleObjectMoving);
@@ -232,13 +245,17 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
232
245
  }
233
246
  // ── O(n) equality check: size first (fast path), then membership ──
234
247
  setSelectedIds((prev) => {
235
- if (prev.size !== newSelected.size)
248
+ if (prev.size !== newSelected.size) {
249
+ htmlNodesSelectedByBoxRef.current = newSelected.size > 0; // ← track if any HTML nodes selected
236
250
  return newSelected;
251
+ }
237
252
  for (const id of newSelected) {
238
- if (!prev.has(id))
239
- return newSelected; // found a difference, swap
253
+ if (!prev.has(id)) {
254
+ htmlNodesSelectedByBoxRef.current = newSelected.size > 0;
255
+ return newSelected;
256
+ }
240
257
  }
241
- return prev; // identical — return same reference, no re-render
258
+ return prev;
242
259
  });
243
260
  }, [selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport]);
244
261
  // ── Drag start (HTML Node side) ──────────────────────────────────────────────
@@ -291,9 +308,9 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
291
308
  if (pos)
292
309
  startPositions.set(id, pos);
293
310
  });
294
- // 9. Snapshot starting positions for all selected Fabric objects
311
+ const liveActiveObjects = canvas.getActiveObjects();
295
312
  const canvasObjectsStartPos = new Map();
296
- selectedCanvasObjects.forEach((obj) => {
313
+ liveActiveObjects.forEach((obj) => {
297
314
  canvasObjectsStartPos.set(obj, {
298
315
  left: obj.left || 0,
299
316
  top: obj.top || 0,
@@ -308,9 +325,10 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
308
325
  offsetX: worldOffsetX, // ← was clickWorldX, should be the offset
309
326
  offsetY: worldOffsetY, // ← was clickWorldY
310
327
  };
311
- if (!selectedIdsRef.current.has(itemId) && dragStateRef.current.itemIds.length === 0) {
312
- setSelectedIds(new Set([itemId]));
313
- }
328
+ // if (!selectedIdsRef.current.has(itemId) && dragStateRef.current.itemIds.length === 0) {
329
+ // setSelectedIds(new Set([itemId]));
330
+ // }
331
+ dragSelectedIdsRef.current = new Set(itemsToDrag);
314
332
  // 11. Trigger UI states
315
333
  setDragging({ itemIds: itemsToDrag });
316
334
  document.body.style.cursor = "grabbing";
@@ -390,6 +408,7 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
390
408
  if (rafIdRef.current !== null)
391
409
  cancelAnimationFrame(rafIdRef.current);
392
410
  dragStateRef.current.isDragging = false;
411
+ dragSelectedIdsRef.current = new Set();
393
412
  setDragging(null);
394
413
  document.body.style.cursor = "";
395
414
  document.body.style.userSelect = "";
@@ -419,6 +438,7 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
419
438
  canvas.requestRenderAll();
420
439
  isHtmlSelectingRef.current = false; // ← reset immediately
421
440
  }
441
+ htmlNodesSelectedByBoxRef.current = false;
422
442
  if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
423
443
  setSelectedIds((prev) => {
424
444
  const next = new Set(prev);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhamz.01/easyflow-whiteboard",
3
- "version": "2.151.0",
3
+ "version": "2.153.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",