zuljaman-banner-components 1.0.11 → 1.0.14

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/shared/DraggableElement.d.ts.map +1 -1
  2. package/dist/components/shared/DraggableElement.js +70 -16
  3. package/package.json +1 -1
package/dist/components/shared/DraggableElement.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DraggableElement.d.ts","sourceRoot":"","sources":["../../../src/components/shared/DraggableElement.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IAGpB,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,IAAI,CAAC;IAGvB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAG1D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+jB5D,CAAC"}
1
+ {"version":3,"file":"DraggableElement.d.ts","sourceRoot":"","sources":["../../../src/components/shared/DraggableElement.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IAGpB,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,IAAI,CAAC;IAGvB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAG1D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAioB5D,CAAC"}
package/dist/components/shared/DraggableElement.js CHANGED
@@ -38,10 +38,19 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
38
38
  const onWidthChangeRef = react_1.default.useRef(onWidthChange);
39
39
  const scaleRef = react_1.default.useRef(scale);
40
40
  const widthRef = react_1.default.useRef(width);
41
+ const preDragCleanupRef = react_1.default.useRef(null);
42
+ const currentPositionRef = react_1.default.useRef(currentPosition);
43
+ const isDraggingRef = react_1.default.useRef(false);
41
44
  react_1.default.useEffect(() => {
42
45
  currentRotationRef.current = rotation;
43
46
  }, [rotation]);
44
47
  react_1.default.useEffect(() => {
48
+ // Don't update position from props if we're currently dragging or in pre-drag phase
49
+ if (isDraggingRef.current || preDragCleanupRef.current) {
50
+ console.log('[DraggableElement] Position prop changed but BLOCKED - currently dragging/pre-drag');
51
+ return;
52
+ }
53
+ console.log('[DraggableElement] Position prop changed, updating currentPosition:', position);
45
54
  setCurrentPosition(position);
46
55
  }, [position]);
47
56
  react_1.default.useEffect(() => {
@@ -50,7 +59,17 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
50
59
  onWidthChangeRef.current = onWidthChange;
51
60
  scaleRef.current = scale;
52
61
  widthRef.current = width;
62
+ currentPositionRef.current = currentPosition;
53
63
  });
64
+ // Cleanup pre-drag listeners on unmount or when dragging state changes
65
+ react_1.default.useEffect(() => {
66
+ return () => {
67
+ if (preDragCleanupRef.current) {
68
+ preDragCleanupRef.current();
69
+ preDragCleanupRef.current = null;
70
+ }
71
+ };
72
+ }, []);
54
73
  if (!enabled) {
55
74
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
56
75
  }
@@ -169,8 +188,12 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
169
188
  }, [isResizing, resizeSide]);
170
189
  // Drag handlers - use effect to manage pre-drag and actual drag state
171
190
  react_1.default.useEffect(() => {
172
- if (!isDragging)
191
+ if (!isDragging) {
192
+ isDraggingRef.current = false;
173
193
  return;
194
+ }
195
+ isDraggingRef.current = true;
196
+ console.log('[DraggableElement] DRAG ACTIVATED - adding drag listeners');
174
197
  const handleDragMove = (e) => {
175
198
  hasDraggedRef.current = true;
176
199
  const deltaX = (e.clientX - dragStartPosRef.current.x) / scaleRef.current;
@@ -186,17 +209,16 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
186
209
  }
187
210
  };
188
211
  const handleDragEnd = () => {
212
+ var _a;
213
+ console.log('[DraggableElement] Drag mouseup - ending drag');
189
214
  // If we didn't actually drag, set flag to prevent onClick from toggling
190
215
  if (!hasDraggedRef.current) {
191
216
  justStoppedWithoutDragRef.current = true;
192
217
  }
193
218
  setIsDragging(false);
194
- // Use callback form to get latest position
195
- setCurrentPosition((pos) => {
196
- var _a;
197
- (_a = onPositionChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPositionChangeRef, pos);
198
- return pos;
199
- });
219
+ // Notify parent of final position (use ref to avoid state update during render)
220
+ const finalPosition = currentPositionRef.current;
221
+ (_a = onPositionChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPositionChangeRef, finalPosition);
200
222
  // Auto-capture width if not explicitly set
201
223
  if (widthRef.current === undefined && contentOnlyRef.current && onWidthChangeRef.current) {
202
224
  const currentWidth = contentOnlyRef.current.offsetWidth;
@@ -208,6 +230,7 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
208
230
  window.addEventListener('mousemove', handleDragMove);
209
231
  window.addEventListener('mouseup', handleDragEnd);
210
232
  return () => {
233
+ console.log('[DraggableElement] Removing drag listeners');
211
234
  window.removeEventListener('mousemove', handleDragMove);
212
235
  window.removeEventListener('mouseup', handleDragEnd);
213
236
  };
@@ -218,35 +241,49 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
218
241
  if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
219
242
  return;
220
243
  }
221
- // Auto-select element when starting to interact
222
- if (!isSelected) {
223
- onSelect(elementId);
244
+ // Prevent multiple executions if already dragging or pre-drag listeners are active
245
+ if (isDraggingRef.current || preDragCleanupRef.current) {
246
+ console.log('[DraggableElement] MouseDown - BLOCKED (already dragging or pre-drag active)');
247
+ e.preventDefault();
248
+ e.stopPropagation();
249
+ return;
224
250
  }
251
+ console.log('[DraggableElement] MouseDown - starting pre-drag phase');
225
252
  hasDraggedRef.current = false;
226
253
  const startX = e.clientX;
227
254
  const startY = e.clientY;
228
255
  dragStartPosRef.current = { x: startX, y: startY };
229
- startPositionRef.current = { x: currentPosition.x, y: currentPosition.y };
256
+ startPositionRef.current = { x: currentPositionRef.current.x, y: currentPositionRef.current.y };
230
257
  // Add temporary listeners to detect movement before activating drag
231
258
  const handlePreDragMove = (moveEvent) => {
232
259
  const deltaX = Math.abs(moveEvent.clientX - startX);
233
260
  const deltaY = Math.abs(moveEvent.clientY - startY);
234
- // If mouse moved more than threshold, activate drag
235
- if (deltaX > 3 || deltaY > 3) {
261
+ console.log('[DraggableElement] PreDrag mousemove - delta:', { deltaX, deltaY });
262
+ // If mouse moved more than threshold, activate drag (increased to 8px to prevent accidental drags on click)
263
+ if (deltaX > 8 || deltaY > 8) {
264
+ console.log('[DraggableElement] Threshold exceeded - activating drag');
236
265
  setIsDragging(true);
237
266
  // Remove temporary listeners
238
- window.removeEventListener('mousemove', handlePreDragMove);
239
- window.removeEventListener('mouseup', handlePreDragEnd);
267
+ cleanup();
240
268
  }
241
269
  };
242
270
  const handlePreDragEnd = () => {
271
+ console.log('[DraggableElement] PreDrag mouseup - click without drag');
243
272
  // Mouse up without moving = click, not drag
273
+ cleanup();
274
+ };
275
+ const cleanup = () => {
276
+ console.log('[DraggableElement] Cleaning up pre-drag listeners');
244
277
  window.removeEventListener('mousemove', handlePreDragMove);
245
278
  window.removeEventListener('mouseup', handlePreDragEnd);
279
+ preDragCleanupRef.current = null;
246
280
  };
281
+ console.log('[DraggableElement] Adding pre-drag listeners');
247
282
  window.addEventListener('mousemove', handlePreDragMove);
248
283
  window.addEventListener('mouseup', handlePreDragEnd);
249
- }, [isSelected, onSelect, elementId, currentPosition.x, currentPosition.y]);
284
+ // Store cleanup function for external cleanup if needed
285
+ preDragCleanupRef.current = cleanup;
286
+ }, [isSelected, onSelect, elementId]);
250
287
  // Selection handlers
251
288
  const handleElementClick = (e) => {
252
289
  // Don't toggle selection if clicking rotation or width handles
@@ -254,6 +291,12 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
254
291
  if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
255
292
  return;
256
293
  }
294
+ // Prevent click during drag or pre-drag
295
+ if (isDraggingRef.current || preDragCleanupRef.current) {
296
+ e.preventDefault();
297
+ e.stopPropagation();
298
+ return;
299
+ }
257
300
  // If we just finished dragging, don't toggle
258
301
  if (hasDraggedRef.current) {
259
302
  hasDraggedRef.current = false;
@@ -299,6 +342,12 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
299
342
  mouseDownPosRef.current = null;
300
343
  return;
301
344
  }
345
+ // Prevent any action if already dragging or pre-drag active
346
+ if (isDraggingRef.current || preDragCleanupRef.current) {
347
+ e.preventDefault();
348
+ e.stopPropagation();
349
+ return;
350
+ }
302
351
  mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
303
352
  handleMouseDownForDrag(e);
304
353
  }, onMouseUp: (e) => {
@@ -307,6 +356,11 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
307
356
  if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
308
357
  return;
309
358
  }
359
+ // Clean up pre-drag listeners if active (important: do this BEFORE stopPropagation)
360
+ if (preDragCleanupRef.current) {
361
+ console.log('[DraggableElement] onMouseUp - cleaning up pre-drag listeners');
362
+ preDragCleanupRef.current();
363
+ }
310
364
  if (mouseDownPosRef.current) {
311
365
  const deltaX = Math.abs(e.clientX - mouseDownPosRef.current.x);
312
366
  const deltaY = Math.abs(e.clientY - mouseDownPosRef.current.y);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zuljaman-banner-components",
3
- "version": "1.0.11",
3
+ "version": "1.0.14",
4
4
  "description": "Shared banner components package for Next.js and AWS Lambda platforms",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",