zuljaman-banner-components 1.0.8 → 1.0.10

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 -47
  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,CAqhB5D,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,CAkjB5D,CAAC"}
package/dist/components/shared/DraggableElement.js CHANGED
@@ -155,62 +155,85 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
155
155
  };
156
156
  }
157
157
  }, [isResizing, resizeSide]);
158
- // Drag handlers
159
- const handleDragStart = (e) => {
158
+ // Drag handlers - use effect to manage pre-drag and actual drag state
159
+ react_1.default.useEffect(() => {
160
+ if (!isDragging)
161
+ return;
162
+ const handleDragMove = (e) => {
163
+ hasDraggedRef.current = true;
164
+ const deltaX = (e.clientX - dragStartPosRef.current.x) / scale;
165
+ const deltaY = (e.clientY - dragStartPosRef.current.y) / scale;
166
+ const newPosition = {
167
+ x: startPositionRef.current.x + deltaX,
168
+ y: startPositionRef.current.y + deltaY,
169
+ };
170
+ setCurrentPosition(newPosition);
171
+ if (contentOnlyRef.current && onDragMove) {
172
+ const elementBounds = contentOnlyRef.current.getBoundingClientRect();
173
+ onDragMove(elementId, elementBounds);
174
+ }
175
+ };
176
+ const handleDragEnd = () => {
177
+ // If we didn't actually drag, set flag to prevent onClick from toggling
178
+ if (!hasDraggedRef.current) {
179
+ justStoppedWithoutDragRef.current = true;
180
+ }
181
+ setIsDragging(false);
182
+ // Use callback form to get latest position
183
+ setCurrentPosition((pos) => {
184
+ onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(pos);
185
+ return pos;
186
+ });
187
+ // Auto-capture width if not explicitly set
188
+ if (width === undefined && contentOnlyRef.current && onWidthChange) {
189
+ const currentWidth = contentOnlyRef.current.offsetWidth;
190
+ if (currentWidth > 0) {
191
+ onWidthChange(Math.round(currentWidth));
192
+ }
193
+ }
194
+ };
195
+ window.addEventListener('mousemove', handleDragMove);
196
+ window.addEventListener('mouseup', handleDragEnd);
197
+ return () => {
198
+ window.removeEventListener('mousemove', handleDragMove);
199
+ window.removeEventListener('mouseup', handleDragEnd);
200
+ };
201
+ }, [isDragging, scale, onDragMove, onPositionChange, onWidthChange, width, elementId]);
202
+ // Handle pre-drag mouse tracking
203
+ const handleMouseDownForDrag = react_1.default.useCallback((e) => {
160
204
  const target = e.target;
161
205
  if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
162
206
  return;
163
207
  }
164
- // Auto-select element when starting to drag
208
+ // Auto-select element when starting to interact
165
209
  if (!isSelected) {
166
210
  onSelect(elementId);
167
211
  }
168
212
  hasDraggedRef.current = false;
169
- dragStartPosRef.current = { x: e.clientX, y: e.clientY };
213
+ const startX = e.clientX;
214
+ const startY = e.clientY;
215
+ dragStartPosRef.current = { x: startX, y: startY };
170
216
  startPositionRef.current = { x: currentPosition.x, y: currentPosition.y };
171
- setIsDragging(true);
172
- };
173
- const handleDragMove = (e) => {
174
- if (!isDragging)
175
- return;
176
- hasDraggedRef.current = true;
177
- const deltaX = (e.clientX - dragStartPosRef.current.x) / scale;
178
- const deltaY = (e.clientY - dragStartPosRef.current.y) / scale;
179
- const newPosition = {
180
- x: startPositionRef.current.x + deltaX,
181
- y: startPositionRef.current.y + deltaY,
182
- };
183
- setCurrentPosition(newPosition);
184
- if (contentOnlyRef.current && onDragMove) {
185
- const elementBounds = contentOnlyRef.current.getBoundingClientRect();
186
- onDragMove(elementId, elementBounds);
187
- }
188
- };
189
- const handleDragEnd = () => {
190
- // If we didn't actually drag, set flag to prevent onClick from toggling
191
- if (!hasDraggedRef.current) {
192
- justStoppedWithoutDragRef.current = true;
193
- }
194
- setIsDragging(false);
195
- onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(currentPosition);
196
- // Auto-capture width if not explicitly set
197
- if (width === undefined && contentOnlyRef.current && onWidthChange) {
198
- const currentWidth = contentOnlyRef.current.offsetWidth;
199
- if (currentWidth > 0) {
200
- onWidthChange(Math.round(currentWidth));
217
+ // Add temporary listeners to detect movement before activating drag
218
+ const handlePreDragMove = (moveEvent) => {
219
+ const deltaX = Math.abs(moveEvent.clientX - startX);
220
+ const deltaY = Math.abs(moveEvent.clientY - startY);
221
+ // If mouse moved more than threshold, activate drag
222
+ if (deltaX > 3 || deltaY > 3) {
223
+ setIsDragging(true);
224
+ // Remove temporary listeners
225
+ window.removeEventListener('mousemove', handlePreDragMove);
226
+ window.removeEventListener('mouseup', handlePreDragEnd);
201
227
  }
202
- }
203
- };
204
- react_1.default.useEffect(() => {
205
- if (isDragging) {
206
- window.addEventListener('mousemove', handleDragMove);
207
- window.addEventListener('mouseup', handleDragEnd);
208
- return () => {
209
- window.removeEventListener('mousemove', handleDragMove);
210
- window.removeEventListener('mouseup', handleDragEnd);
211
- };
212
- }
213
- }, [isDragging, currentPosition, scale]);
228
+ };
229
+ const handlePreDragEnd = () => {
230
+ // Mouse up without moving = click, not drag
231
+ window.removeEventListener('mousemove', handlePreDragMove);
232
+ window.removeEventListener('mouseup', handlePreDragEnd);
233
+ };
234
+ window.addEventListener('mousemove', handlePreDragMove);
235
+ window.addEventListener('mouseup', handlePreDragEnd);
236
+ }, [isSelected, onSelect, elementId, currentPosition.x, currentPosition.y]);
214
237
  // Selection handlers
215
238
  const handleElementClick = (e) => {
216
239
  // Don't toggle selection if clicking rotation or width handles
@@ -264,7 +287,7 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
264
287
  return;
265
288
  }
266
289
  mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
267
- handleDragStart(e);
290
+ handleMouseDownForDrag(e);
268
291
  }, onMouseUp: (e) => {
269
292
  // Detect click (mouse up at same position as mouse down)
270
293
  const target = e.target;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zuljaman-banner-components",
3
- "version": "1.0.8",
3
+ "version": "1.0.10",
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",