zuljaman-banner-components 1.0.11 → 1.0.13

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 +66 -10
  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,CAmoB5D,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,6 +209,7 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
186
209
  }
187
210
  };
188
211
  const handleDragEnd = () => {
212
+ console.log('[DraggableElement] Drag mouseup - ending drag');
189
213
  // If we didn't actually drag, set flag to prevent onClick from toggling
190
214
  if (!hasDraggedRef.current) {
191
215
  justStoppedWithoutDragRef.current = true;
@@ -208,6 +232,7 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
208
232
  window.addEventListener('mousemove', handleDragMove);
209
233
  window.addEventListener('mouseup', handleDragEnd);
210
234
  return () => {
235
+ console.log('[DraggableElement] Removing drag listeners');
211
236
  window.removeEventListener('mousemove', handleDragMove);
212
237
  window.removeEventListener('mouseup', handleDragEnd);
213
238
  };
@@ -218,35 +243,49 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
218
243
  if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
219
244
  return;
220
245
  }
221
- // Auto-select element when starting to interact
222
- if (!isSelected) {
223
- onSelect(elementId);
246
+ // Prevent multiple executions if already dragging or pre-drag listeners are active
247
+ if (isDraggingRef.current || preDragCleanupRef.current) {
248
+ console.log('[DraggableElement] MouseDown - BLOCKED (already dragging or pre-drag active)');
249
+ e.preventDefault();
250
+ e.stopPropagation();
251
+ return;
224
252
  }
253
+ console.log('[DraggableElement] MouseDown - starting pre-drag phase');
225
254
  hasDraggedRef.current = false;
226
255
  const startX = e.clientX;
227
256
  const startY = e.clientY;
228
257
  dragStartPosRef.current = { x: startX, y: startY };
229
- startPositionRef.current = { x: currentPosition.x, y: currentPosition.y };
258
+ startPositionRef.current = { x: currentPositionRef.current.x, y: currentPositionRef.current.y };
230
259
  // Add temporary listeners to detect movement before activating drag
231
260
  const handlePreDragMove = (moveEvent) => {
232
261
  const deltaX = Math.abs(moveEvent.clientX - startX);
233
262
  const deltaY = Math.abs(moveEvent.clientY - startY);
234
- // If mouse moved more than threshold, activate drag
235
- if (deltaX > 3 || deltaY > 3) {
263
+ console.log('[DraggableElement] PreDrag mousemove - delta:', { deltaX, deltaY });
264
+ // If mouse moved more than threshold, activate drag (increased to 8px to prevent accidental drags on click)
265
+ if (deltaX > 8 || deltaY > 8) {
266
+ console.log('[DraggableElement] Threshold exceeded - activating drag');
236
267
  setIsDragging(true);
237
268
  // Remove temporary listeners
238
- window.removeEventListener('mousemove', handlePreDragMove);
239
- window.removeEventListener('mouseup', handlePreDragEnd);
269
+ cleanup();
240
270
  }
241
271
  };
242
272
  const handlePreDragEnd = () => {
273
+ console.log('[DraggableElement] PreDrag mouseup - click without drag');
243
274
  // Mouse up without moving = click, not drag
275
+ cleanup();
276
+ };
277
+ const cleanup = () => {
278
+ console.log('[DraggableElement] Cleaning up pre-drag listeners');
244
279
  window.removeEventListener('mousemove', handlePreDragMove);
245
280
  window.removeEventListener('mouseup', handlePreDragEnd);
281
+ preDragCleanupRef.current = null;
246
282
  };
283
+ console.log('[DraggableElement] Adding pre-drag listeners');
247
284
  window.addEventListener('mousemove', handlePreDragMove);
248
285
  window.addEventListener('mouseup', handlePreDragEnd);
249
- }, [isSelected, onSelect, elementId, currentPosition.x, currentPosition.y]);
286
+ // Store cleanup function for external cleanup if needed
287
+ preDragCleanupRef.current = cleanup;
288
+ }, [isSelected, onSelect, elementId]);
250
289
  // Selection handlers
251
290
  const handleElementClick = (e) => {
252
291
  // Don't toggle selection if clicking rotation or width handles
@@ -254,6 +293,12 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
254
293
  if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
255
294
  return;
256
295
  }
296
+ // Prevent click during drag or pre-drag
297
+ if (isDraggingRef.current || preDragCleanupRef.current) {
298
+ e.preventDefault();
299
+ e.stopPropagation();
300
+ return;
301
+ }
257
302
  // If we just finished dragging, don't toggle
258
303
  if (hasDraggedRef.current) {
259
304
  hasDraggedRef.current = false;
@@ -299,6 +344,12 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
299
344
  mouseDownPosRef.current = null;
300
345
  return;
301
346
  }
347
+ // Prevent any action if already dragging or pre-drag active
348
+ if (isDraggingRef.current || preDragCleanupRef.current) {
349
+ e.preventDefault();
350
+ e.stopPropagation();
351
+ return;
352
+ }
302
353
  mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
303
354
  handleMouseDownForDrag(e);
304
355
  }, onMouseUp: (e) => {
@@ -307,6 +358,11 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
307
358
  if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
308
359
  return;
309
360
  }
361
+ // Clean up pre-drag listeners if active (important: do this BEFORE stopPropagation)
362
+ if (preDragCleanupRef.current) {
363
+ console.log('[DraggableElement] onMouseUp - cleaning up pre-drag listeners');
364
+ preDragCleanupRef.current();
365
+ }
310
366
  if (mouseDownPosRef.current) {
311
367
  const deltaX = Math.abs(e.clientX - mouseDownPosRef.current.x);
312
368
  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.13",
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",