zuljaman-banner-components 1.0.10 → 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 +87 -18
  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,CAkjB5D,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
@@ -33,12 +33,43 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
33
33
  const justSelectedRef = react_1.default.useRef(false);
34
34
  const justStoppedWithoutDragRef = react_1.default.useRef(false);
35
35
  const dragStartPosRef = react_1.default.useRef({ x: 0, y: 0 });
36
+ const onDragMoveRef = react_1.default.useRef(onDragMove);
37
+ const onPositionChangeRef = react_1.default.useRef(onPositionChange);
38
+ const onWidthChangeRef = react_1.default.useRef(onWidthChange);
39
+ const scaleRef = react_1.default.useRef(scale);
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);
36
44
  react_1.default.useEffect(() => {
37
45
  currentRotationRef.current = rotation;
38
46
  }, [rotation]);
39
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);
40
54
  setCurrentPosition(position);
41
55
  }, [position]);
56
+ react_1.default.useEffect(() => {
57
+ onDragMoveRef.current = onDragMove;
58
+ onPositionChangeRef.current = onPositionChange;
59
+ onWidthChangeRef.current = onWidthChange;
60
+ scaleRef.current = scale;
61
+ widthRef.current = width;
62
+ currentPositionRef.current = currentPosition;
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
+ }, []);
42
73
  if (!enabled) {
43
74
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
44
75
  }
@@ -157,23 +188,28 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
157
188
  }, [isResizing, resizeSide]);
158
189
  // Drag handlers - use effect to manage pre-drag and actual drag state
159
190
  react_1.default.useEffect(() => {
160
- if (!isDragging)
191
+ if (!isDragging) {
192
+ isDraggingRef.current = false;
161
193
  return;
194
+ }
195
+ isDraggingRef.current = true;
196
+ console.log('[DraggableElement] DRAG ACTIVATED - adding drag listeners');
162
197
  const handleDragMove = (e) => {
163
198
  hasDraggedRef.current = true;
164
- const deltaX = (e.clientX - dragStartPosRef.current.x) / scale;
165
- const deltaY = (e.clientY - dragStartPosRef.current.y) / scale;
199
+ const deltaX = (e.clientX - dragStartPosRef.current.x) / scaleRef.current;
200
+ const deltaY = (e.clientY - dragStartPosRef.current.y) / scaleRef.current;
166
201
  const newPosition = {
167
202
  x: startPositionRef.current.x + deltaX,
168
203
  y: startPositionRef.current.y + deltaY,
169
204
  };
170
205
  setCurrentPosition(newPosition);
171
- if (contentOnlyRef.current && onDragMove) {
206
+ if (contentOnlyRef.current && onDragMoveRef.current) {
172
207
  const elementBounds = contentOnlyRef.current.getBoundingClientRect();
173
- onDragMove(elementId, elementBounds);
208
+ onDragMoveRef.current(elementId, elementBounds);
174
209
  }
175
210
  };
176
211
  const handleDragEnd = () => {
212
+ console.log('[DraggableElement] Drag mouseup - ending drag');
177
213
  // If we didn't actually drag, set flag to prevent onClick from toggling
178
214
  if (!hasDraggedRef.current) {
179
215
  justStoppedWithoutDragRef.current = true;
@@ -181,59 +217,75 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
181
217
  setIsDragging(false);
182
218
  // Use callback form to get latest position
183
219
  setCurrentPosition((pos) => {
184
- onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(pos);
220
+ var _a;
221
+ (_a = onPositionChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPositionChangeRef, pos);
185
222
  return pos;
186
223
  });
187
224
  // Auto-capture width if not explicitly set
188
- if (width === undefined && contentOnlyRef.current && onWidthChange) {
225
+ if (widthRef.current === undefined && contentOnlyRef.current && onWidthChangeRef.current) {
189
226
  const currentWidth = contentOnlyRef.current.offsetWidth;
190
227
  if (currentWidth > 0) {
191
- onWidthChange(Math.round(currentWidth));
228
+ onWidthChangeRef.current(Math.round(currentWidth));
192
229
  }
193
230
  }
194
231
  };
195
232
  window.addEventListener('mousemove', handleDragMove);
196
233
  window.addEventListener('mouseup', handleDragEnd);
197
234
  return () => {
235
+ console.log('[DraggableElement] Removing drag listeners');
198
236
  window.removeEventListener('mousemove', handleDragMove);
199
237
  window.removeEventListener('mouseup', handleDragEnd);
200
238
  };
201
- }, [isDragging, scale, onDragMove, onPositionChange, onWidthChange, width, elementId]);
239
+ }, [isDragging, elementId]);
202
240
  // Handle pre-drag mouse tracking
203
241
  const handleMouseDownForDrag = react_1.default.useCallback((e) => {
204
242
  const target = e.target;
205
243
  if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
206
244
  return;
207
245
  }
208
- // Auto-select element when starting to interact
209
- if (!isSelected) {
210
- 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;
211
252
  }
253
+ console.log('[DraggableElement] MouseDown - starting pre-drag phase');
212
254
  hasDraggedRef.current = false;
213
255
  const startX = e.clientX;
214
256
  const startY = e.clientY;
215
257
  dragStartPosRef.current = { x: startX, y: startY };
216
- startPositionRef.current = { x: currentPosition.x, y: currentPosition.y };
258
+ startPositionRef.current = { x: currentPositionRef.current.x, y: currentPositionRef.current.y };
217
259
  // Add temporary listeners to detect movement before activating drag
218
260
  const handlePreDragMove = (moveEvent) => {
219
261
  const deltaX = Math.abs(moveEvent.clientX - startX);
220
262
  const deltaY = Math.abs(moveEvent.clientY - startY);
221
- // If mouse moved more than threshold, activate drag
222
- 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');
223
267
  setIsDragging(true);
224
268
  // Remove temporary listeners
225
- window.removeEventListener('mousemove', handlePreDragMove);
226
- window.removeEventListener('mouseup', handlePreDragEnd);
269
+ cleanup();
227
270
  }
228
271
  };
229
272
  const handlePreDragEnd = () => {
273
+ console.log('[DraggableElement] PreDrag mouseup - click without drag');
230
274
  // Mouse up without moving = click, not drag
275
+ cleanup();
276
+ };
277
+ const cleanup = () => {
278
+ console.log('[DraggableElement] Cleaning up pre-drag listeners');
231
279
  window.removeEventListener('mousemove', handlePreDragMove);
232
280
  window.removeEventListener('mouseup', handlePreDragEnd);
281
+ preDragCleanupRef.current = null;
233
282
  };
283
+ console.log('[DraggableElement] Adding pre-drag listeners');
234
284
  window.addEventListener('mousemove', handlePreDragMove);
235
285
  window.addEventListener('mouseup', handlePreDragEnd);
236
- }, [isSelected, onSelect, elementId, currentPosition.x, currentPosition.y]);
286
+ // Store cleanup function for external cleanup if needed
287
+ preDragCleanupRef.current = cleanup;
288
+ }, [isSelected, onSelect, elementId]);
237
289
  // Selection handlers
238
290
  const handleElementClick = (e) => {
239
291
  // Don't toggle selection if clicking rotation or width handles
@@ -241,6 +293,12 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
241
293
  if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
242
294
  return;
243
295
  }
296
+ // Prevent click during drag or pre-drag
297
+ if (isDraggingRef.current || preDragCleanupRef.current) {
298
+ e.preventDefault();
299
+ e.stopPropagation();
300
+ return;
301
+ }
244
302
  // If we just finished dragging, don't toggle
245
303
  if (hasDraggedRef.current) {
246
304
  hasDraggedRef.current = false;
@@ -286,6 +344,12 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
286
344
  mouseDownPosRef.current = null;
287
345
  return;
288
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
+ }
289
353
  mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
290
354
  handleMouseDownForDrag(e);
291
355
  }, onMouseUp: (e) => {
@@ -294,6 +358,11 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
294
358
  if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
295
359
  return;
296
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
+ }
297
366
  if (mouseDownPosRef.current) {
298
367
  const deltaX = Math.abs(e.clientX - mouseDownPosRef.current.x);
299
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.10",
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",