zuljaman-banner-components 1.0.9 → 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.
|
@@ -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,
|
|
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"}
|
|
@@ -155,21 +155,7 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
|
|
|
155
155
|
};
|
|
156
156
|
}
|
|
157
157
|
}, [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
|
-
};
|
|
158
|
+
// Drag handlers - use effect to manage pre-drag and actual drag state
|
|
173
159
|
react_1.default.useEffect(() => {
|
|
174
160
|
if (!isDragging)
|
|
175
161
|
return;
|
|
@@ -213,6 +199,41 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
|
|
|
213
199
|
window.removeEventListener('mouseup', handleDragEnd);
|
|
214
200
|
};
|
|
215
201
|
}, [isDragging, scale, onDragMove, onPositionChange, onWidthChange, width, elementId]);
|
|
202
|
+
// Handle pre-drag mouse tracking
|
|
203
|
+
const handleMouseDownForDrag = react_1.default.useCallback((e) => {
|
|
204
|
+
const target = e.target;
|
|
205
|
+
if (target.closest('.rotation-handle') || target.closest('.width-handle')) {
|
|
206
|
+
return;
|
|
207
|
+
}
|
|
208
|
+
// Auto-select element when starting to interact
|
|
209
|
+
if (!isSelected) {
|
|
210
|
+
onSelect(elementId);
|
|
211
|
+
}
|
|
212
|
+
hasDraggedRef.current = false;
|
|
213
|
+
const startX = e.clientX;
|
|
214
|
+
const startY = e.clientY;
|
|
215
|
+
dragStartPosRef.current = { x: startX, y: startY };
|
|
216
|
+
startPositionRef.current = { x: currentPosition.x, y: currentPosition.y };
|
|
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);
|
|
227
|
+
}
|
|
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]);
|
|
216
237
|
// Selection handlers
|
|
217
238
|
const handleElementClick = (e) => {
|
|
218
239
|
// Don't toggle selection if clicking rotation or width handles
|
|
@@ -266,7 +287,7 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
|
|
|
266
287
|
return;
|
|
267
288
|
}
|
|
268
289
|
mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
|
|
269
|
-
|
|
290
|
+
handleMouseDownForDrag(e);
|
|
270
291
|
}, onMouseUp: (e) => {
|
|
271
292
|
// Detect click (mouse up at same position as mouse down)
|
|
272
293
|
const target = e.target;
|