zuljaman-banner-components 1.0.9 → 1.0.11

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 +58 -24
  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,CAyhB5D,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,CA+jB5D,CAAC"}
package/dist/components/shared/DraggableElement.js CHANGED
@@ -33,12 +33,24 @@ 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);
36
41
  react_1.default.useEffect(() => {
37
42
  currentRotationRef.current = rotation;
38
43
  }, [rotation]);
39
44
  react_1.default.useEffect(() => {
40
45
  setCurrentPosition(position);
41
46
  }, [position]);
47
+ react_1.default.useEffect(() => {
48
+ onDragMoveRef.current = onDragMove;
49
+ onPositionChangeRef.current = onPositionChange;
50
+ onWidthChangeRef.current = onWidthChange;
51
+ scaleRef.current = scale;
52
+ widthRef.current = width;
53
+ });
42
54
  if (!enabled) {
43
55
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
44
56
  }
@@ -155,36 +167,22 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
155
167
  };
156
168
  }
157
169
  }, [isResizing, resizeSide]);
158
- // Drag handlers
159
- const handleDragStart = (e) => {
160
- const target = e.target;
161
- if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
162
- return;
163
- }
164
- // Auto-select element when starting to drag
165
- if (!isSelected) {
166
- onSelect(elementId);
167
- }
168
- hasDraggedRef.current = false;
169
- dragStartPosRef.current = { x: e.clientX, y: e.clientY };
170
- startPositionRef.current = { x: currentPosition.x, y: currentPosition.y };
171
- setIsDragging(true);
172
- };
170
+ // Drag handlers - use effect to manage pre-drag and actual drag state
173
171
  react_1.default.useEffect(() => {
174
172
  if (!isDragging)
175
173
  return;
176
174
  const handleDragMove = (e) => {
177
175
  hasDraggedRef.current = true;
178
- const deltaX = (e.clientX - dragStartPosRef.current.x) / scale;
179
- const deltaY = (e.clientY - dragStartPosRef.current.y) / scale;
176
+ const deltaX = (e.clientX - dragStartPosRef.current.x) / scaleRef.current;
177
+ const deltaY = (e.clientY - dragStartPosRef.current.y) / scaleRef.current;
180
178
  const newPosition = {
181
179
  x: startPositionRef.current.x + deltaX,
182
180
  y: startPositionRef.current.y + deltaY,
183
181
  };
184
182
  setCurrentPosition(newPosition);
185
- if (contentOnlyRef.current && onDragMove) {
183
+ if (contentOnlyRef.current && onDragMoveRef.current) {
186
184
  const elementBounds = contentOnlyRef.current.getBoundingClientRect();
187
- onDragMove(elementId, elementBounds);
185
+ onDragMoveRef.current(elementId, elementBounds);
188
186
  }
189
187
  };
190
188
  const handleDragEnd = () => {
@@ -195,14 +193,15 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
195
193
  setIsDragging(false);
196
194
  // Use callback form to get latest position
197
195
  setCurrentPosition((pos) => {
198
- onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(pos);
196
+ var _a;
197
+ (_a = onPositionChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPositionChangeRef, pos);
199
198
  return pos;
200
199
  });
201
200
  // Auto-capture width if not explicitly set
202
- if (width === undefined && contentOnlyRef.current && onWidthChange) {
201
+ if (widthRef.current === undefined && contentOnlyRef.current && onWidthChangeRef.current) {
203
202
  const currentWidth = contentOnlyRef.current.offsetWidth;
204
203
  if (currentWidth > 0) {
205
- onWidthChange(Math.round(currentWidth));
204
+ onWidthChangeRef.current(Math.round(currentWidth));
206
205
  }
207
206
  }
208
207
  };
@@ -212,7 +211,42 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
212
211
  window.removeEventListener('mousemove', handleDragMove);
213
212
  window.removeEventListener('mouseup', handleDragEnd);
214
213
  };
215
- }, [isDragging, scale, onDragMove, onPositionChange, onWidthChange, width, elementId]);
214
+ }, [isDragging, elementId]);
215
+ // Handle pre-drag mouse tracking
216
+ const handleMouseDownForDrag = react_1.default.useCallback((e) => {
217
+ const target = e.target;
218
+ if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
219
+ return;
220
+ }
221
+ // Auto-select element when starting to interact
222
+ if (!isSelected) {
223
+ onSelect(elementId);
224
+ }
225
+ hasDraggedRef.current = false;
226
+ const startX = e.clientX;
227
+ const startY = e.clientY;
228
+ dragStartPosRef.current = { x: startX, y: startY };
229
+ startPositionRef.current = { x: currentPosition.x, y: currentPosition.y };
230
+ // Add temporary listeners to detect movement before activating drag
231
+ const handlePreDragMove = (moveEvent) => {
232
+ const deltaX = Math.abs(moveEvent.clientX - startX);
233
+ const deltaY = Math.abs(moveEvent.clientY - startY);
234
+ // If mouse moved more than threshold, activate drag
235
+ if (deltaX > 3 || deltaY > 3) {
236
+ setIsDragging(true);
237
+ // Remove temporary listeners
238
+ window.removeEventListener('mousemove', handlePreDragMove);
239
+ window.removeEventListener('mouseup', handlePreDragEnd);
240
+ }
241
+ };
242
+ const handlePreDragEnd = () => {
243
+ // Mouse up without moving = click, not drag
244
+ window.removeEventListener('mousemove', handlePreDragMove);
245
+ window.removeEventListener('mouseup', handlePreDragEnd);
246
+ };
247
+ window.addEventListener('mousemove', handlePreDragMove);
248
+ window.addEventListener('mouseup', handlePreDragEnd);
249
+ }, [isSelected, onSelect, elementId, currentPosition.x, currentPosition.y]);
216
250
  // Selection handlers
217
251
  const handleElementClick = (e) => {
218
252
  // Don't toggle selection if clicking rotation or width handles
@@ -266,7 +300,7 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
266
300
  return;
267
301
  }
268
302
  mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
269
- handleDragStart(e);
303
+ handleMouseDownForDrag(e);
270
304
  }, onMouseUp: (e) => {
271
305
  // Detect click (mouse up at same position as mouse down)
272
306
  const target = e.target;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zuljaman-banner-components",
3
- "version": "1.0.9",
3
+ "version": "1.0.11",
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",