zuljaman-banner-components 1.0.15 → 1.0.17
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":"BannerRenderer.d.ts","sourceRoot":"","sources":["../../src/components/BannerRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAgE,MAAM,OAAO,CAAC;AAGrF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAUvD,UAAU,mBAAmB;IAE3B,WAAW,EAAE,MAAM,CAAC;IAGpB,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IAEtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAGhD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAG7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpE,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAG5C,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvF,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,
|
|
1
|
+
{"version":3,"file":"BannerRenderer.d.ts","sourceRoot":"","sources":["../../src/components/BannerRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAgE,MAAM,OAAO,CAAC;AAGrF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAUvD,UAAU,mBAAmB;IAE3B,WAAW,EAAE,MAAM,CAAC;IAGpB,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IAEtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAGhD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAG7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpE,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAG5C,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvF,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAukBxD,CAAC"}
|
|
@@ -109,12 +109,6 @@ const BannerRenderer = ({ bannerStyle, copies = [], bannerSubstyle = 1, logoUrl,
|
|
|
109
109
|
return;
|
|
110
110
|
}
|
|
111
111
|
const { anchorElement, targetElement } = config.autoPositioningConfig;
|
|
112
|
-
console.log('🎯 AUTO-POSITION CALC:', {
|
|
113
|
-
anchorElement,
|
|
114
|
-
targetElement,
|
|
115
|
-
direction: config.autoPositioningConfig.direction,
|
|
116
|
-
gapRem: config.gapRem,
|
|
117
|
-
});
|
|
118
112
|
// Get anchor copy object to check if it's been dragged
|
|
119
113
|
let anchorCopy;
|
|
120
114
|
if (anchorElement === 'copy1') {
|
|
@@ -139,20 +133,12 @@ const BannerRenderer = ({ bannerStyle, copies = [], bannerSubstyle = 1, logoUrl,
|
|
|
139
133
|
(targetCopy.translateY !== undefined && targetCopy.translateY !== 0));
|
|
140
134
|
// Skip auto-positioning if either anchor or target has been manually positioned
|
|
141
135
|
if (anchorHasBeenDragged || targetHasBeenDragged) {
|
|
142
|
-
console.log('⏭️ SKIPPING AUTO-POSITION - Copy has been manually dragged:', {
|
|
143
|
-
anchorDragged: anchorHasBeenDragged,
|
|
144
|
-
targetDragged: targetHasBeenDragged,
|
|
145
|
-
});
|
|
146
136
|
return;
|
|
147
137
|
}
|
|
148
138
|
// Get anchor element ref
|
|
149
139
|
let anchorRef = null;
|
|
150
140
|
if (anchorElement === 'logo') {
|
|
151
141
|
anchorRef = logoRef.current;
|
|
152
|
-
console.log('📍 Logo anchor:', {
|
|
153
|
-
exists: !!anchorRef,
|
|
154
|
-
height: anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.getBoundingClientRect().height,
|
|
155
|
-
});
|
|
156
142
|
}
|
|
157
143
|
else if (anchorElement === 'copy1') {
|
|
158
144
|
// Find copy with styleSlot 0 (copy1)
|
|
@@ -160,10 +146,6 @@ const BannerRenderer = ({ bannerStyle, copies = [], bannerSubstyle = 1, logoUrl,
|
|
|
160
146
|
if (copy1Index !== -1) {
|
|
161
147
|
anchorRef = copyRefs.current[copy1Index];
|
|
162
148
|
}
|
|
163
|
-
console.log('📍 Copy1 anchor:', {
|
|
164
|
-
exists: !!anchorRef,
|
|
165
|
-
height: anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.getBoundingClientRect().height,
|
|
166
|
-
});
|
|
167
149
|
}
|
|
168
150
|
else if (anchorElement === 'copy2') {
|
|
169
151
|
// Find copy with styleSlot 1 (copy2)
|
|
@@ -171,14 +153,9 @@ const BannerRenderer = ({ bannerStyle, copies = [], bannerSubstyle = 1, logoUrl,
|
|
|
171
153
|
if (copy2Index !== -1) {
|
|
172
154
|
anchorRef = copyRefs.current[copy2Index];
|
|
173
155
|
}
|
|
174
|
-
console.log('📍 Copy2 anchor:', {
|
|
175
|
-
exists: !!anchorRef,
|
|
176
|
-
height: anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.getBoundingClientRect().height,
|
|
177
|
-
});
|
|
178
156
|
}
|
|
179
157
|
// If anchor element doesn't exist, can't calculate
|
|
180
158
|
if (!anchorRef) {
|
|
181
|
-
console.log('❌ NO ANCHOR REF - Skipping calculation');
|
|
182
159
|
return;
|
|
183
160
|
}
|
|
184
161
|
// Get target element ref
|
|
@@ -197,7 +174,6 @@ const BannerRenderer = ({ bannerStyle, copies = [], bannerSubstyle = 1, logoUrl,
|
|
|
197
174
|
}
|
|
198
175
|
// If target element doesn't exist, can't calculate
|
|
199
176
|
if (!targetRef) {
|
|
200
|
-
console.log('❌ NO TARGET REF - Skipping calculation');
|
|
201
177
|
return;
|
|
202
178
|
}
|
|
203
179
|
// Measure anchor and target heights
|
|
@@ -205,10 +181,8 @@ const BannerRenderer = ({ bannerStyle, copies = [], bannerSubstyle = 1, logoUrl,
|
|
|
205
181
|
const targetHeight = targetRef.getBoundingClientRect().height / sizeMultiplier;
|
|
206
182
|
// Determine if anchor has centerOrigin (logo doesn't, copies do)
|
|
207
183
|
const anchorHasCenterOrigin = anchorElement !== 'logo';
|
|
208
|
-
console.log('📏 Heights:', { anchorHeight, targetHeight, anchorHasCenterOrigin });
|
|
209
184
|
// Calculate offset
|
|
210
185
|
const offset = (0, positioningUtils_1.calculateAutoPositionOffset)(config, config.autoPositioningConfig, anchorHeight, targetHeight, anchorHasCenterOrigin);
|
|
211
|
-
console.log('✨ Calculated offset:', offset);
|
|
212
186
|
// Find target styleSlot
|
|
213
187
|
let targetStyleSlot;
|
|
214
188
|
if (targetElement === 'copy1') {
|
|
@@ -217,23 +191,19 @@ const BannerRenderer = ({ bannerStyle, copies = [], bannerSubstyle = 1, logoUrl,
|
|
|
217
191
|
else if (targetElement === 'copy2') {
|
|
218
192
|
targetStyleSlot = 1;
|
|
219
193
|
}
|
|
220
|
-
console.log('🎪 Target styleSlot:', targetStyleSlot);
|
|
221
194
|
// Update offsets only if changed
|
|
222
195
|
if (targetStyleSlot !== undefined) {
|
|
223
196
|
setAutoOffsets(prev => {
|
|
224
197
|
// Only update if offset has changed significantly (to prevent infinite loops from floating point precision)
|
|
225
198
|
const prevOffset = prev[targetStyleSlot] || 0;
|
|
226
199
|
const EPSILON = 0.1; // 0.1px tolerance
|
|
227
|
-
console.log('🔄 Offset comparison:', { prevOffset, newOffset: offset, willUpdate: Math.abs(prevOffset - offset) > EPSILON });
|
|
228
200
|
if (Math.abs(prevOffset - offset) > EPSILON) {
|
|
229
201
|
const newOffsets = {
|
|
230
202
|
...prev,
|
|
231
203
|
[targetStyleSlot]: offset,
|
|
232
204
|
};
|
|
233
|
-
console.log('✅ UPDATING OFFSETS:', newOffsets);
|
|
234
205
|
return newOffsets;
|
|
235
206
|
}
|
|
236
|
-
console.log('⏭️ SKIPPING - no significant change');
|
|
237
207
|
return prev; // No significant change, return same object to prevent re-render
|
|
238
208
|
});
|
|
239
209
|
}
|
|
@@ -391,18 +361,6 @@ const BannerRenderer = ({ bannerStyle, copies = [], bannerSubstyle = 1, logoUrl,
|
|
|
391
361
|
const finalY = baseY + (copy.translateY || 0);
|
|
392
362
|
const finalWidth = copy.width || configWidth;
|
|
393
363
|
const finalRotation = (_c = copy.rotation) !== null && _c !== void 0 ? _c : (isStyled ? ((_d = copyConfig === null || copyConfig === void 0 ? void 0 : copyConfig.rotation) !== null && _d !== void 0 ? _d : 0) : 0);
|
|
394
|
-
console.log(`📦 DRAGGABLE POSITION (styleSlot ${styleSlot}):`, {
|
|
395
|
-
configX,
|
|
396
|
-
configY,
|
|
397
|
-
autoOffset,
|
|
398
|
-
baseX,
|
|
399
|
-
baseY,
|
|
400
|
-
'copy.translateX': copy.translateX,
|
|
401
|
-
'copy.translateY': copy.translateY,
|
|
402
|
-
finalX,
|
|
403
|
-
finalY,
|
|
404
|
-
finalWidth,
|
|
405
|
-
});
|
|
406
364
|
return ((0, jsx_runtime_1.jsx)(shared_1.DraggableElement, { enabled: draggableMode, position: { x: finalX, y: finalY }, rotation: finalRotation, width: finalWidth, scale: sizeMultiplier, elementId: `copy-${copy.id}`, isSelected: selectedElement === `copy-${copy.id}`, centerOrigin: true, onPositionChange: (pos) => {
|
|
407
365
|
// Subtract base position to get only user adjustment
|
|
408
366
|
const adjustedPos = {
|
|
@@ -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,CAgnB5D,CAAC"}
|
|
@@ -47,10 +47,8 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
|
|
|
47
47
|
react_1.default.useEffect(() => {
|
|
48
48
|
// Don't update position from props if we're currently dragging or in pre-drag phase
|
|
49
49
|
if (isDraggingRef.current || preDragCleanupRef.current) {
|
|
50
|
-
console.log('[DraggableElement] Position prop changed but BLOCKED - currently dragging/pre-drag');
|
|
51
50
|
return;
|
|
52
51
|
}
|
|
53
|
-
console.log('[DraggableElement] Position prop changed, updating currentPosition:', position);
|
|
54
52
|
setCurrentPosition(position);
|
|
55
53
|
}, [position]);
|
|
56
54
|
react_1.default.useEffect(() => {
|
|
@@ -193,7 +191,6 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
|
|
|
193
191
|
return;
|
|
194
192
|
}
|
|
195
193
|
isDraggingRef.current = true;
|
|
196
|
-
console.log('[DraggableElement] DRAG ACTIVATED - adding drag listeners');
|
|
197
194
|
const handleDragMove = (e) => {
|
|
198
195
|
hasDraggedRef.current = true;
|
|
199
196
|
const deltaX = (e.clientX - dragStartPosRef.current.x) / scaleRef.current;
|
|
@@ -210,7 +207,6 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
|
|
|
210
207
|
};
|
|
211
208
|
const handleDragEnd = () => {
|
|
212
209
|
var _a;
|
|
213
|
-
console.log('[DraggableElement] Drag mouseup - ending drag');
|
|
214
210
|
// If we didn't actually drag, set flag to prevent onClick from toggling
|
|
215
211
|
if (!hasDraggedRef.current) {
|
|
216
212
|
justStoppedWithoutDragRef.current = true;
|
|
@@ -230,7 +226,6 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
|
|
|
230
226
|
window.addEventListener('mousemove', handleDragMove);
|
|
231
227
|
window.addEventListener('mouseup', handleDragEnd);
|
|
232
228
|
return () => {
|
|
233
|
-
console.log('[DraggableElement] Removing drag listeners');
|
|
234
229
|
window.removeEventListener('mousemove', handleDragMove);
|
|
235
230
|
window.removeEventListener('mouseup', handleDragEnd);
|
|
236
231
|
};
|
|
@@ -243,12 +238,10 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
|
|
|
243
238
|
}
|
|
244
239
|
// Prevent multiple executions if already dragging or pre-drag listeners are active
|
|
245
240
|
if (isDraggingRef.current || preDragCleanupRef.current) {
|
|
246
|
-
console.log('[DraggableElement] MouseDown - BLOCKED (already dragging or pre-drag active)');
|
|
247
241
|
e.preventDefault();
|
|
248
242
|
e.stopPropagation();
|
|
249
243
|
return;
|
|
250
244
|
}
|
|
251
|
-
console.log('[DraggableElement] MouseDown - starting pre-drag phase');
|
|
252
245
|
hasDraggedRef.current = false;
|
|
253
246
|
const startX = e.clientX;
|
|
254
247
|
const startY = e.clientY;
|
|
@@ -258,27 +251,22 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
|
|
|
258
251
|
const handlePreDragMove = (moveEvent) => {
|
|
259
252
|
const deltaX = Math.abs(moveEvent.clientX - startX);
|
|
260
253
|
const deltaY = Math.abs(moveEvent.clientY - startY);
|
|
261
|
-
console.log('[DraggableElement] PreDrag mousemove - delta:', { deltaX, deltaY });
|
|
262
254
|
// If mouse moved more than threshold, activate drag (increased to 8px to prevent accidental drags on click)
|
|
263
255
|
if (deltaX > 8 || deltaY > 8) {
|
|
264
|
-
console.log('[DraggableElement] Threshold exceeded - activating drag');
|
|
265
256
|
setIsDragging(true);
|
|
266
257
|
// Remove temporary listeners
|
|
267
258
|
cleanup();
|
|
268
259
|
}
|
|
269
260
|
};
|
|
270
261
|
const handlePreDragEnd = () => {
|
|
271
|
-
console.log('[DraggableElement] PreDrag mouseup - click without drag');
|
|
272
262
|
// Mouse up without moving = click, not drag
|
|
273
263
|
cleanup();
|
|
274
264
|
};
|
|
275
265
|
const cleanup = () => {
|
|
276
|
-
console.log('[DraggableElement] Cleaning up pre-drag listeners');
|
|
277
266
|
window.removeEventListener('mousemove', handlePreDragMove);
|
|
278
267
|
window.removeEventListener('mouseup', handlePreDragEnd);
|
|
279
268
|
preDragCleanupRef.current = null;
|
|
280
269
|
};
|
|
281
|
-
console.log('[DraggableElement] Adding pre-drag listeners');
|
|
282
270
|
window.addEventListener('mousemove', handlePreDragMove);
|
|
283
271
|
window.addEventListener('mouseup', handlePreDragEnd);
|
|
284
272
|
// Store cleanup function for external cleanup if needed
|
|
@@ -358,7 +346,6 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
|
|
|
358
346
|
}
|
|
359
347
|
// Clean up pre-drag listeners if active (important: do this BEFORE stopPropagation)
|
|
360
348
|
if (preDragCleanupRef.current) {
|
|
361
|
-
console.log('[DraggableElement] onMouseUp - cleaning up pre-drag listeners');
|
|
362
349
|
preDragCleanupRef.current();
|
|
363
350
|
}
|
|
364
351
|
if (mouseDownPosRef.current) {
|
|
@@ -385,7 +372,7 @@ const DraggableElement = ({ enabled, position, rotation, width, scale, elementId
|
|
|
385
372
|
transition: isDragging || isRotating || isResizing ? "none" : "opacity 0.2s ease",
|
|
386
373
|
display: "inline-block",
|
|
387
374
|
position: "relative",
|
|
388
|
-
transform: `translate(${currentPosition.x}px, ${currentPosition.y}px)
|
|
375
|
+
transform: enabled ? `translate(${currentPosition.x}px, ${currentPosition.y}px)` : undefined,
|
|
389
376
|
}, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
390
377
|
transform: centerOrigin ? 'translate(-50%, -50%)' : undefined,
|
|
391
378
|
position: "relative"
|