@amplifyup/sdk 0.1.11 → 0.1.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.
- package/dist/AmplifyRenderer.d.mts +3 -1
- package/dist/AmplifyRenderer.d.ts +3 -1
- package/dist/AmplifyRenderer.js +328 -110
- package/dist/AmplifyRenderer.js.map +1 -1
- package/dist/AmplifyRenderer.mjs +328 -110
- package/dist/AmplifyRenderer.mjs.map +1 -1
- package/dist/index.d.mts +25 -0
- package/dist/index.d.ts +25 -0
- package/dist/index.js +284 -102
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +284 -102
- package/dist/index.mjs.map +1 -1
- package/dist/react.d.mts +8 -2
- package/dist/react.d.ts +8 -2
- package/dist/react.js +350 -134
- package/dist/react.js.map +1 -1
- package/dist/react.mjs +350 -134
- package/dist/react.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -38,6 +38,15 @@ declare class AmplifyUpSDK {
|
|
|
38
38
|
private messageListener;
|
|
39
39
|
private mutationObserver;
|
|
40
40
|
private composerDragHandlers;
|
|
41
|
+
/** Last slot highlighted during Composer drag — avoid clear/re-add flicker. */
|
|
42
|
+
private lastComposerDragSlot;
|
|
43
|
+
/** Consecutive miss frames before clearing highlight (anti-jitter). */
|
|
44
|
+
private composerDragMissFrames;
|
|
45
|
+
/**
|
|
46
|
+
* Parent overlay is driving drag via postMessage. Native iframe dragleave must
|
|
47
|
+
* not clear highlight — overlay takeover fires a spurious document dragleave.
|
|
48
|
+
*/
|
|
49
|
+
private composerOverlayDragActive;
|
|
41
50
|
private isVisualEditorMode;
|
|
42
51
|
private eventSelectionMode;
|
|
43
52
|
private eventSelectionClickHandler;
|
|
@@ -216,6 +225,22 @@ declare class AmplifyUpSDK {
|
|
|
216
225
|
* Generate a CSS selector for an element
|
|
217
226
|
*/
|
|
218
227
|
private generateSelectorForElement;
|
|
228
|
+
/** Clear drag-over highlight state (Composer overlay path or native drag end). */
|
|
229
|
+
private clearComposerDragHighlight;
|
|
230
|
+
/** Re-apply drag-over class only if missing (avoids classList churn / flicker). */
|
|
231
|
+
private ensureDragOverClass;
|
|
232
|
+
/**
|
|
233
|
+
* Composer drag targets the innermost (most specific) slot under the cursor.
|
|
234
|
+
* e.g. FullWidthGrid's main wins over a page-level main that wraps it.
|
|
235
|
+
*/
|
|
236
|
+
private resolveSlotAtPoint;
|
|
237
|
+
/** Parent layout node that owns this slot (null for page-level code main). */
|
|
238
|
+
private parentComponentForSlot;
|
|
239
|
+
private pointInRect;
|
|
240
|
+
private setComposerDragHighlight;
|
|
241
|
+
private handleComposerDragAtPoint;
|
|
242
|
+
private postDropOnSlot;
|
|
243
|
+
private handleComposerDropAtPoint;
|
|
219
244
|
/**
|
|
220
245
|
* Enable component highlighting
|
|
221
246
|
*/
|
package/dist/index.d.ts
CHANGED
|
@@ -38,6 +38,15 @@ declare class AmplifyUpSDK {
|
|
|
38
38
|
private messageListener;
|
|
39
39
|
private mutationObserver;
|
|
40
40
|
private composerDragHandlers;
|
|
41
|
+
/** Last slot highlighted during Composer drag — avoid clear/re-add flicker. */
|
|
42
|
+
private lastComposerDragSlot;
|
|
43
|
+
/** Consecutive miss frames before clearing highlight (anti-jitter). */
|
|
44
|
+
private composerDragMissFrames;
|
|
45
|
+
/**
|
|
46
|
+
* Parent overlay is driving drag via postMessage. Native iframe dragleave must
|
|
47
|
+
* not clear highlight — overlay takeover fires a spurious document dragleave.
|
|
48
|
+
*/
|
|
49
|
+
private composerOverlayDragActive;
|
|
41
50
|
private isVisualEditorMode;
|
|
42
51
|
private eventSelectionMode;
|
|
43
52
|
private eventSelectionClickHandler;
|
|
@@ -216,6 +225,22 @@ declare class AmplifyUpSDK {
|
|
|
216
225
|
* Generate a CSS selector for an element
|
|
217
226
|
*/
|
|
218
227
|
private generateSelectorForElement;
|
|
228
|
+
/** Clear drag-over highlight state (Composer overlay path or native drag end). */
|
|
229
|
+
private clearComposerDragHighlight;
|
|
230
|
+
/** Re-apply drag-over class only if missing (avoids classList churn / flicker). */
|
|
231
|
+
private ensureDragOverClass;
|
|
232
|
+
/**
|
|
233
|
+
* Composer drag targets the innermost (most specific) slot under the cursor.
|
|
234
|
+
* e.g. FullWidthGrid's main wins over a page-level main that wraps it.
|
|
235
|
+
*/
|
|
236
|
+
private resolveSlotAtPoint;
|
|
237
|
+
/** Parent layout node that owns this slot (null for page-level code main). */
|
|
238
|
+
private parentComponentForSlot;
|
|
239
|
+
private pointInRect;
|
|
240
|
+
private setComposerDragHighlight;
|
|
241
|
+
private handleComposerDragAtPoint;
|
|
242
|
+
private postDropOnSlot;
|
|
243
|
+
private handleComposerDropAtPoint;
|
|
219
244
|
/**
|
|
220
245
|
* Enable component highlighting
|
|
221
246
|
*/
|
package/dist/index.js
CHANGED
|
@@ -344,6 +344,15 @@ var AmplifyUpSDK = class {
|
|
|
344
344
|
this.messageListener = null;
|
|
345
345
|
this.mutationObserver = null;
|
|
346
346
|
this.composerDragHandlers = null;
|
|
347
|
+
/** Last slot highlighted during Composer drag — avoid clear/re-add flicker. */
|
|
348
|
+
this.lastComposerDragSlot = null;
|
|
349
|
+
/** Consecutive miss frames before clearing highlight (anti-jitter). */
|
|
350
|
+
this.composerDragMissFrames = 0;
|
|
351
|
+
/**
|
|
352
|
+
* Parent overlay is driving drag via postMessage. Native iframe dragleave must
|
|
353
|
+
* not clear highlight — overlay takeover fires a spurious document dragleave.
|
|
354
|
+
*/
|
|
355
|
+
this.composerOverlayDragActive = false;
|
|
347
356
|
this.isVisualEditorMode = false;
|
|
348
357
|
this.eventSelectionMode = false;
|
|
349
358
|
this.eventSelectionClickHandler = null;
|
|
@@ -874,6 +883,12 @@ Available Console Commands:
|
|
|
874
883
|
}
|
|
875
884
|
throw new Error(`Failed to fetch page: ${response.statusText}`);
|
|
876
885
|
}
|
|
886
|
+
const contentType = response.headers.get("content-type") || "";
|
|
887
|
+
if (!contentType.includes("application/json")) {
|
|
888
|
+
throw new Error(
|
|
889
|
+
`Layout provider returned non-JSON (${contentType || "unknown"}). Check Composer preview routing.`
|
|
890
|
+
);
|
|
891
|
+
}
|
|
877
892
|
const data = await response.json();
|
|
878
893
|
const pageConfig = data.page;
|
|
879
894
|
if (pageConfig?.eventTracking) {
|
|
@@ -1158,33 +1173,94 @@ Available Console Commands:
|
|
|
1158
1173
|
}
|
|
1159
1174
|
return;
|
|
1160
1175
|
}
|
|
1176
|
+
if (event.data?.type === "COMPOSER_DRAG_START") {
|
|
1177
|
+
this.composerOverlayDragActive = true;
|
|
1178
|
+
if (typeof document !== "undefined") {
|
|
1179
|
+
document.body.classList.add("amplifyup-composer-dragging");
|
|
1180
|
+
}
|
|
1181
|
+
return;
|
|
1182
|
+
}
|
|
1183
|
+
if (event.data?.type === "COMPOSER_DRAG_AT_POINT") {
|
|
1184
|
+
const { x, y } = event.data;
|
|
1185
|
+
if (typeof x === "number" && typeof y === "number") {
|
|
1186
|
+
this.handleComposerDragAtPoint(x, y);
|
|
1187
|
+
}
|
|
1188
|
+
return;
|
|
1189
|
+
}
|
|
1190
|
+
if (event.data?.type === "COMPOSER_DROP_AT_POINT") {
|
|
1191
|
+
const { x, y } = event.data;
|
|
1192
|
+
if (typeof x === "number" && typeof y === "number") {
|
|
1193
|
+
this.handleComposerDropAtPoint(x, y);
|
|
1194
|
+
}
|
|
1195
|
+
return;
|
|
1196
|
+
}
|
|
1197
|
+
if (event.data?.type === "COMPOSER_DRAG_END") {
|
|
1198
|
+
this.composerOverlayDragActive = false;
|
|
1199
|
+
this.clearComposerDragHighlight();
|
|
1200
|
+
return;
|
|
1201
|
+
}
|
|
1161
1202
|
if (event.data?.type === "GET_ELEMENT_POSITION") {
|
|
1162
|
-
const { componentId, slotName } = event.data;
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1203
|
+
const { componentId, slotName, nodeId, isPageSlot } = event.data;
|
|
1204
|
+
let element = null;
|
|
1205
|
+
if (isPageSlot || slotName === "main" && !nodeId && !componentId) {
|
|
1206
|
+
element = document.querySelector(
|
|
1207
|
+
'[data-slot-source="page"]'
|
|
1208
|
+
);
|
|
1209
|
+
}
|
|
1210
|
+
if (!element && nodeId && slotName) {
|
|
1211
|
+
element = document.querySelector(
|
|
1212
|
+
`[data-parent-node-id="${nodeId}"][data-slot-id="${slotName}"], [data-parent-node-id="${nodeId}"][data-amplifyup-slot="${slotName}"]`
|
|
1213
|
+
);
|
|
1214
|
+
}
|
|
1215
|
+
if (!element && nodeId && !slotName) {
|
|
1216
|
+
element = document.querySelector(
|
|
1217
|
+
`[data-node-id="${nodeId}"]`
|
|
1218
|
+
);
|
|
1219
|
+
}
|
|
1220
|
+
if (!element && slotName) {
|
|
1221
|
+
element = document.querySelector(
|
|
1222
|
+
`[data-amplifyup-slot="${slotName}"], [data-slot-id="${slotName}"]`
|
|
1223
|
+
);
|
|
1224
|
+
}
|
|
1225
|
+
if (!element && componentId) {
|
|
1226
|
+
element = document.querySelector(
|
|
1227
|
+
`[data-amplifyup-component="${componentId}"], [data-component-id="${componentId}"]`
|
|
1228
|
+
);
|
|
1229
|
+
}
|
|
1230
|
+
console.log("[AmplifyUp SDK] Finding element position:", {
|
|
1231
|
+
componentId,
|
|
1232
|
+
slotName,
|
|
1233
|
+
nodeId,
|
|
1234
|
+
isPageSlot,
|
|
1235
|
+
found: !!element
|
|
1236
|
+
});
|
|
1166
1237
|
if (element) {
|
|
1167
1238
|
const rect = element.getBoundingClientRect();
|
|
1168
1239
|
const position = {
|
|
1169
1240
|
x: rect.left + rect.width / 2,
|
|
1170
|
-
// Center of element
|
|
1171
1241
|
y: rect.top - 50,
|
|
1172
|
-
// Position above element
|
|
1173
1242
|
width: rect.width,
|
|
1174
1243
|
height: rect.height
|
|
1175
1244
|
};
|
|
1176
|
-
|
|
1245
|
+
const bounds = {
|
|
1246
|
+
top: rect.top,
|
|
1247
|
+
left: rect.left,
|
|
1248
|
+
width: rect.width,
|
|
1249
|
+
height: rect.height
|
|
1250
|
+
};
|
|
1177
1251
|
if (window.parent && window.parent !== window) {
|
|
1178
1252
|
window.parent.postMessage({
|
|
1179
1253
|
type: "ELEMENT_POSITION",
|
|
1180
|
-
componentId,
|
|
1181
|
-
slotName,
|
|
1182
|
-
|
|
1254
|
+
componentId: componentId || null,
|
|
1255
|
+
slotName: slotName || null,
|
|
1256
|
+
nodeId: nodeId || null,
|
|
1257
|
+
isPageSlot: !!isPageSlot,
|
|
1258
|
+
position,
|
|
1259
|
+
bounds
|
|
1183
1260
|
}, "*");
|
|
1184
|
-
console.log("[AmplifyUp SDK] Sent ELEMENT_POSITION message");
|
|
1185
1261
|
}
|
|
1186
1262
|
} else {
|
|
1187
|
-
console.warn("[AmplifyUp SDK] Element not found for
|
|
1263
|
+
console.warn("[AmplifyUp SDK] Element not found for position request");
|
|
1188
1264
|
}
|
|
1189
1265
|
return;
|
|
1190
1266
|
}
|
|
@@ -1291,6 +1367,157 @@ Available Console Commands:
|
|
|
1291
1367
|
}
|
|
1292
1368
|
return el.tagName.toLowerCase();
|
|
1293
1369
|
}
|
|
1370
|
+
/** Clear drag-over highlight state (Composer overlay path or native drag end). */
|
|
1371
|
+
clearComposerDragHighlight() {
|
|
1372
|
+
if (typeof document === "undefined") return;
|
|
1373
|
+
const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
|
|
1374
|
+
document.querySelectorAll(`${slotSelector}.amplifyup-drag-over-slot`).forEach((el) => {
|
|
1375
|
+
el.classList.remove("amplifyup-drag-over-slot");
|
|
1376
|
+
});
|
|
1377
|
+
document.body.classList.remove("amplifyup-drag-no-drop");
|
|
1378
|
+
document.body.classList.remove("amplifyup-composer-dragging");
|
|
1379
|
+
this.lastComposerDragSlot = null;
|
|
1380
|
+
this.composerDragMissFrames = 0;
|
|
1381
|
+
}
|
|
1382
|
+
/** Re-apply drag-over class only if missing (avoids classList churn / flicker). */
|
|
1383
|
+
ensureDragOverClass(slot) {
|
|
1384
|
+
if (!slot.classList.contains("amplifyup-drag-over-slot")) {
|
|
1385
|
+
slot.classList.add("amplifyup-drag-over-slot");
|
|
1386
|
+
}
|
|
1387
|
+
if (document.body.classList.contains("amplifyup-drag-no-drop")) {
|
|
1388
|
+
document.body.classList.remove("amplifyup-drag-no-drop");
|
|
1389
|
+
}
|
|
1390
|
+
}
|
|
1391
|
+
/**
|
|
1392
|
+
* Composer drag targets the innermost (most specific) slot under the cursor.
|
|
1393
|
+
* e.g. FullWidthGrid's main wins over a page-level main that wraps it.
|
|
1394
|
+
*/
|
|
1395
|
+
resolveSlotAtPoint(x, y) {
|
|
1396
|
+
if (typeof document === "undefined") return null;
|
|
1397
|
+
const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
|
|
1398
|
+
const containing = [];
|
|
1399
|
+
document.querySelectorAll(slotSelector).forEach((node) => {
|
|
1400
|
+
const el = node;
|
|
1401
|
+
const r = el.getBoundingClientRect();
|
|
1402
|
+
if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) {
|
|
1403
|
+
containing.push(el);
|
|
1404
|
+
}
|
|
1405
|
+
});
|
|
1406
|
+
if (containing.length === 0) return null;
|
|
1407
|
+
const innermost = containing.filter(
|
|
1408
|
+
(el) => !containing.some((other) => other !== el && el.contains(other))
|
|
1409
|
+
);
|
|
1410
|
+
if (innermost.length === 1) return innermost[0];
|
|
1411
|
+
let best = innermost[0];
|
|
1412
|
+
let bestArea = Infinity;
|
|
1413
|
+
for (const el of innermost) {
|
|
1414
|
+
const r = el.getBoundingClientRect();
|
|
1415
|
+
const area = Math.max(1, r.width) * Math.max(1, r.height);
|
|
1416
|
+
if (area < bestArea) {
|
|
1417
|
+
bestArea = area;
|
|
1418
|
+
best = el;
|
|
1419
|
+
}
|
|
1420
|
+
}
|
|
1421
|
+
return best;
|
|
1422
|
+
}
|
|
1423
|
+
/** Parent layout node that owns this slot (null for page-level code main). */
|
|
1424
|
+
parentComponentForSlot(slotEl) {
|
|
1425
|
+
let componentId = slotEl.getAttribute("data-parent-component-id");
|
|
1426
|
+
let nodeId = slotEl.getAttribute("data-parent-node-id");
|
|
1427
|
+
let el = slotEl.parentElement;
|
|
1428
|
+
while (el && (!nodeId || !componentId)) {
|
|
1429
|
+
if (!nodeId && el.hasAttribute("data-node-id")) {
|
|
1430
|
+
nodeId = el.getAttribute("data-node-id");
|
|
1431
|
+
}
|
|
1432
|
+
if (!componentId) {
|
|
1433
|
+
componentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
|
|
1434
|
+
}
|
|
1435
|
+
if (nodeId) break;
|
|
1436
|
+
el = el.parentElement;
|
|
1437
|
+
}
|
|
1438
|
+
return { componentId, nodeId };
|
|
1439
|
+
}
|
|
1440
|
+
pointInRect(x, y, el, pad = 8) {
|
|
1441
|
+
const r = el.getBoundingClientRect();
|
|
1442
|
+
return x >= r.left - pad && x <= r.right + pad && y >= r.top - pad && y <= r.bottom + pad;
|
|
1443
|
+
}
|
|
1444
|
+
setComposerDragHighlight(slot, x, y) {
|
|
1445
|
+
if (slot && slot === this.lastComposerDragSlot) {
|
|
1446
|
+
this.composerDragMissFrames = 0;
|
|
1447
|
+
this.ensureDragOverClass(slot);
|
|
1448
|
+
return;
|
|
1449
|
+
}
|
|
1450
|
+
if (slot && this.lastComposerDragSlot && this.lastComposerDragSlot.contains(slot) && slot !== this.lastComposerDragSlot) {
|
|
1451
|
+
this.composerDragMissFrames = 0;
|
|
1452
|
+
this.lastComposerDragSlot.classList.remove("amplifyup-drag-over-slot");
|
|
1453
|
+
this.lastComposerDragSlot = slot;
|
|
1454
|
+
this.ensureDragOverClass(slot);
|
|
1455
|
+
return;
|
|
1456
|
+
}
|
|
1457
|
+
if (this.lastComposerDragSlot && typeof x === "number" && typeof y === "number" && this.pointInRect(x, y, this.lastComposerDragSlot)) {
|
|
1458
|
+
if (!slot || slot.contains(this.lastComposerDragSlot) || slot === this.lastComposerDragSlot) {
|
|
1459
|
+
this.composerDragMissFrames = 0;
|
|
1460
|
+
this.ensureDragOverClass(this.lastComposerDragSlot);
|
|
1461
|
+
return;
|
|
1462
|
+
}
|
|
1463
|
+
}
|
|
1464
|
+
if (slot) {
|
|
1465
|
+
this.composerDragMissFrames = 0;
|
|
1466
|
+
if (this.lastComposerDragSlot && this.lastComposerDragSlot !== slot) {
|
|
1467
|
+
this.lastComposerDragSlot.classList.remove("amplifyup-drag-over-slot");
|
|
1468
|
+
}
|
|
1469
|
+
this.lastComposerDragSlot = slot;
|
|
1470
|
+
this.ensureDragOverClass(slot);
|
|
1471
|
+
return;
|
|
1472
|
+
}
|
|
1473
|
+
this.composerDragMissFrames += 1;
|
|
1474
|
+
if (this.lastComposerDragSlot && this.composerDragMissFrames < 8) {
|
|
1475
|
+
this.ensureDragOverClass(this.lastComposerDragSlot);
|
|
1476
|
+
return;
|
|
1477
|
+
}
|
|
1478
|
+
if (this.lastComposerDragSlot) {
|
|
1479
|
+
this.lastComposerDragSlot.classList.remove("amplifyup-drag-over-slot");
|
|
1480
|
+
this.lastComposerDragSlot = null;
|
|
1481
|
+
}
|
|
1482
|
+
if (!document.body.classList.contains("amplifyup-drag-no-drop")) {
|
|
1483
|
+
document.body.classList.add("amplifyup-drag-no-drop");
|
|
1484
|
+
}
|
|
1485
|
+
}
|
|
1486
|
+
handleComposerDragAtPoint(x, y) {
|
|
1487
|
+
this.composerOverlayDragActive = true;
|
|
1488
|
+
if (!document.body.classList.contains("amplifyup-composer-dragging")) {
|
|
1489
|
+
document.body.classList.add("amplifyup-composer-dragging");
|
|
1490
|
+
}
|
|
1491
|
+
this.setComposerDragHighlight(this.resolveSlotAtPoint(x, y), x, y);
|
|
1492
|
+
}
|
|
1493
|
+
postDropOnSlot(slotEl) {
|
|
1494
|
+
const win = window;
|
|
1495
|
+
if (!win.parent || win.parent === win) return;
|
|
1496
|
+
const slotName = slotEl.getAttribute("data-amplifyup-slot") || slotEl.getAttribute("data-slot-id");
|
|
1497
|
+
if (!slotName) return;
|
|
1498
|
+
const { componentId, nodeId } = this.parentComponentForSlot(slotEl);
|
|
1499
|
+
const isEmpty = slotEl.getAttribute("data-slot-empty") === "true";
|
|
1500
|
+
win.parent.postMessage(
|
|
1501
|
+
{
|
|
1502
|
+
type: "DROP_ON_SLOT",
|
|
1503
|
+
slotName,
|
|
1504
|
+
slotElement: {
|
|
1505
|
+
path: slotEl.getAttribute("data-slot-path"),
|
|
1506
|
+
isEmpty,
|
|
1507
|
+
parentComponentId: componentId,
|
|
1508
|
+
parentNodeId: nodeId
|
|
1509
|
+
}
|
|
1510
|
+
},
|
|
1511
|
+
"*"
|
|
1512
|
+
);
|
|
1513
|
+
}
|
|
1514
|
+
handleComposerDropAtPoint(x, y) {
|
|
1515
|
+
if (typeof document === "undefined") return;
|
|
1516
|
+
const htmlEl = this.resolveSlotAtPoint(x, y);
|
|
1517
|
+
this.clearComposerDragHighlight();
|
|
1518
|
+
if (!htmlEl) return;
|
|
1519
|
+
this.postDropOnSlot(htmlEl);
|
|
1520
|
+
}
|
|
1294
1521
|
/**
|
|
1295
1522
|
* Enable component highlighting
|
|
1296
1523
|
*/
|
|
@@ -1317,35 +1544,25 @@ Available Console Commands:
|
|
|
1317
1544
|
this.teardownComposerDragDrop();
|
|
1318
1545
|
const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
|
|
1319
1546
|
const clearDragOverState = () => {
|
|
1320
|
-
|
|
1321
|
-
el.classList.remove("amplifyup-drag-over-slot");
|
|
1322
|
-
});
|
|
1323
|
-
document.body.classList.remove("amplifyup-drag-no-drop");
|
|
1547
|
+
this.clearComposerDragHighlight();
|
|
1324
1548
|
};
|
|
1325
1549
|
const dragenter = (e) => {
|
|
1326
1550
|
e.preventDefault();
|
|
1327
|
-
if (e.dataTransfer?.types?.length) {
|
|
1328
|
-
document.body.classList.add("amplifyup-drag-no-drop");
|
|
1329
|
-
}
|
|
1330
1551
|
};
|
|
1331
1552
|
const dragover = (e) => {
|
|
1332
1553
|
e.preventDefault();
|
|
1333
|
-
|
|
1334
|
-
|
|
1554
|
+
if (this.composerOverlayDragActive) {
|
|
1555
|
+
if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
|
|
1556
|
+
return;
|
|
1557
|
+
}
|
|
1558
|
+
const slot = this.resolveSlotAtPoint(e.clientX, e.clientY);
|
|
1335
1559
|
if (e.dataTransfer) {
|
|
1336
1560
|
e.dataTransfer.dropEffect = slot ? "copy" : "none";
|
|
1337
1561
|
}
|
|
1338
|
-
|
|
1339
|
-
el.classList.remove("amplifyup-drag-over-slot");
|
|
1340
|
-
});
|
|
1341
|
-
if (slot) {
|
|
1342
|
-
slot.classList.add("amplifyup-drag-over-slot");
|
|
1343
|
-
document.body.classList.remove("amplifyup-drag-no-drop");
|
|
1344
|
-
} else {
|
|
1345
|
-
document.body.classList.add("amplifyup-drag-no-drop");
|
|
1346
|
-
}
|
|
1562
|
+
this.setComposerDragHighlight(slot, e.clientX, e.clientY);
|
|
1347
1563
|
};
|
|
1348
1564
|
const dragleave = (e) => {
|
|
1565
|
+
if (this.composerOverlayDragActive) return;
|
|
1349
1566
|
const related = e.relatedTarget;
|
|
1350
1567
|
if (!related || !document.body.contains(related)) {
|
|
1351
1568
|
clearDragOverState();
|
|
@@ -1353,20 +1570,10 @@ Available Console Commands:
|
|
|
1353
1570
|
};
|
|
1354
1571
|
const drop = (e) => {
|
|
1355
1572
|
e.preventDefault();
|
|
1356
|
-
const
|
|
1357
|
-
const slot = target?.closest?.(slotSelector);
|
|
1573
|
+
const slot = this.resolveSlotAtPoint(e.clientX, e.clientY);
|
|
1358
1574
|
clearDragOverState();
|
|
1359
1575
|
if (!slot || !this.isVisualEditorMode) return;
|
|
1360
|
-
|
|
1361
|
-
const isEmpty = slot.getAttribute("data-slot-empty") === "true";
|
|
1362
|
-
const win = window;
|
|
1363
|
-
if (slotName && win.parent && win.parent !== win) {
|
|
1364
|
-
win.parent.postMessage({
|
|
1365
|
-
type: "DROP_ON_SLOT",
|
|
1366
|
-
slotName,
|
|
1367
|
-
slotElement: { path: slot.getAttribute("data-slot-path"), isEmpty }
|
|
1368
|
-
}, "*");
|
|
1369
|
-
}
|
|
1576
|
+
this.postDropOnSlot(slot);
|
|
1370
1577
|
};
|
|
1371
1578
|
const mouseover = (e) => {
|
|
1372
1579
|
if (!this.showZonesEnabled) return;
|
|
@@ -1405,7 +1612,11 @@ Available Console Commands:
|
|
|
1405
1612
|
document.removeEventListener("mouseover", h.mouseover, true);
|
|
1406
1613
|
document.removeEventListener("mouseout", h.mouseout, true);
|
|
1407
1614
|
this.composerDragHandlers = null;
|
|
1615
|
+
this.composerOverlayDragActive = false;
|
|
1616
|
+
this.lastComposerDragSlot = null;
|
|
1617
|
+
this.composerDragMissFrames = 0;
|
|
1408
1618
|
document.body.classList.remove("amplifyup-drag-no-drop");
|
|
1619
|
+
document.body.classList.remove("amplifyup-composer-dragging");
|
|
1409
1620
|
document.querySelectorAll("[data-slot-id].amplifyup-drag-over-slot, [data-amplifyup-slot].amplifyup-drag-over-slot").forEach((el) => {
|
|
1410
1621
|
el.classList.remove("amplifyup-drag-over-slot");
|
|
1411
1622
|
});
|
|
@@ -1446,21 +1657,32 @@ Available Console Commands:
|
|
|
1446
1657
|
'[data-slot-id="main"], [data-amplifyup-slot="main"] {',
|
|
1447
1658
|
" min-height: 50vh !important;",
|
|
1448
1659
|
"}",
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
"
|
|
1453
|
-
"
|
|
1454
|
-
"
|
|
1455
|
-
"
|
|
1456
|
-
"
|
|
1660
|
+
/* Single empty-state hint — Slot React label uses .amplifyup-slot-placeholder */
|
|
1661
|
+
".amplifyup-slot-placeholder {",
|
|
1662
|
+
" display: flex !important;",
|
|
1663
|
+
" align-items: center !important;",
|
|
1664
|
+
" justify-content: center !important;",
|
|
1665
|
+
" min-height: inherit !important;",
|
|
1666
|
+
" color: rgba(34, 197, 94, 0.75) !important;",
|
|
1667
|
+
" font-size: 14px !important;",
|
|
1668
|
+
" font-weight: 500 !important;",
|
|
1457
1669
|
" pointer-events: none !important;",
|
|
1458
|
-
"
|
|
1670
|
+
" text-align: center !important;",
|
|
1459
1671
|
"}",
|
|
1460
1672
|
"[data-slot-id].amplifyup-slot-hover, [data-amplifyup-slot].amplifyup-slot-hover {",
|
|
1461
1673
|
" outline-color: rgba(34, 197, 94, 1) !important;",
|
|
1462
1674
|
" background: rgba(34, 197, 94, 0.06) !important;",
|
|
1463
1675
|
"}",
|
|
1676
|
+
/* During any Composer drag, hide idle slot labels so they don't flash
|
|
1677
|
+
when the active drag-over class briefly changes */
|
|
1678
|
+
"body.amplifyup-composer-dragging .amplifyup-slot-placeholder {",
|
|
1679
|
+
" visibility: hidden !important;",
|
|
1680
|
+
" opacity: 0 !important;",
|
|
1681
|
+
"}",
|
|
1682
|
+
"body.amplifyup-composer-dragging [data-slot-id]::before,",
|
|
1683
|
+
"body.amplifyup-composer-dragging [data-amplifyup-slot]::before {",
|
|
1684
|
+
" content: none !important;",
|
|
1685
|
+
"}",
|
|
1464
1686
|
"[data-slot-id].amplifyup-drag-over-slot, [data-amplifyup-slot].amplifyup-drag-over-slot {",
|
|
1465
1687
|
" outline: 2px solid rgba(34, 197, 94, 1) !important;",
|
|
1466
1688
|
" background: rgba(34, 197, 94, 0.18) !important;",
|
|
@@ -1476,7 +1698,7 @@ Available Console Commands:
|
|
|
1476
1698
|
" color: rgb(22, 163, 74) !important;",
|
|
1477
1699
|
" pointer-events: none !important;",
|
|
1478
1700
|
" white-space: nowrap !important;",
|
|
1479
|
-
" z-index:
|
|
1701
|
+
" z-index: 2 !important;",
|
|
1480
1702
|
"}",
|
|
1481
1703
|
"body.amplifyup-drag-no-drop { cursor: no-drop !important; }",
|
|
1482
1704
|
"body.amplifyup-drag-no-drop::before {",
|
|
@@ -1603,18 +1825,23 @@ Available Console Commands:
|
|
|
1603
1825
|
sendSelectionMessage(element, hierarchy, isEmpty) {
|
|
1604
1826
|
if (!this.isVisualEditorMode) return;
|
|
1605
1827
|
const componentId = element.getAttribute("data-amplifyup-component") || element.getAttribute("data-component-id");
|
|
1606
|
-
const slotName = element.getAttribute("data-amplifyup-slot") || element.getAttribute("data-slot-id");
|
|
1828
|
+
const slotName = componentId ? null : element.getAttribute("data-amplifyup-slot") || element.getAttribute("data-slot-id");
|
|
1607
1829
|
const componentName = element.getAttribute("data-component-name");
|
|
1608
1830
|
const hierarchyInfo = hierarchy.map((el, index) => {
|
|
1609
1831
|
const elComponentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
|
|
1610
1832
|
const elSlotName = el.getAttribute("data-amplifyup-slot") || el.getAttribute("data-slot-id");
|
|
1611
1833
|
const elComponentName = el.getAttribute("data-component-name");
|
|
1834
|
+
const isSlot = !elComponentId && !!elSlotName;
|
|
1835
|
+
const isPageSlot = isSlot && el.getAttribute("data-slot-source") === "page";
|
|
1836
|
+
const nodeId = el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null);
|
|
1612
1837
|
return {
|
|
1613
1838
|
index,
|
|
1614
1839
|
componentId: elComponentId,
|
|
1615
|
-
componentName: elComponentName,
|
|
1616
|
-
slotName: elSlotName,
|
|
1617
|
-
isSlot
|
|
1840
|
+
componentName: isPageSlot ? "Page" : elComponentName,
|
|
1841
|
+
slotName: isSlot ? elSlotName : null,
|
|
1842
|
+
isSlot,
|
|
1843
|
+
isPageSlot,
|
|
1844
|
+
nodeId
|
|
1618
1845
|
};
|
|
1619
1846
|
});
|
|
1620
1847
|
const rect = element.getBoundingClientRect ? element.getBoundingClientRect() : null;
|
|
@@ -1651,7 +1878,6 @@ Available Console Commands:
|
|
|
1651
1878
|
return;
|
|
1652
1879
|
}
|
|
1653
1880
|
const doc = document;
|
|
1654
|
-
const win = window;
|
|
1655
1881
|
if (highlightComponents) {
|
|
1656
1882
|
const componentElements = doc.querySelectorAll("[data-amplifyup-component], [data-component-id]");
|
|
1657
1883
|
console.log("[AmplifyUp SDK] Found", componentElements.length, "components to highlight");
|
|
@@ -1712,52 +1938,8 @@ Available Console Commands:
|
|
|
1712
1938
|
e.stopPropagation();
|
|
1713
1939
|
this.sendSelectionMessage(htmlEl, hierarchy, isEmpty);
|
|
1714
1940
|
};
|
|
1715
|
-
const handleDrop = (e) => {
|
|
1716
|
-
e.preventDefault();
|
|
1717
|
-
e.stopPropagation();
|
|
1718
|
-
htmlEl.classList.remove("amplifyup-drag-over-slot");
|
|
1719
|
-
if (!win.parent || win.parent === win) return;
|
|
1720
|
-
win.parent.postMessage({
|
|
1721
|
-
type: "DROP_ON_SLOT",
|
|
1722
|
-
slotName,
|
|
1723
|
-
slotElement: { path: htmlEl.getAttribute("data-slot-path"), isEmpty }
|
|
1724
|
-
}, "*");
|
|
1725
|
-
try {
|
|
1726
|
-
const data = JSON.parse(e.dataTransfer.getData("application/json"));
|
|
1727
|
-
if (data.type === "component") {
|
|
1728
|
-
win.parent.postMessage({
|
|
1729
|
-
type: "COMPONENT_DROPPED",
|
|
1730
|
-
componentId: data.componentId,
|
|
1731
|
-
componentName: data.componentName,
|
|
1732
|
-
slotName,
|
|
1733
|
-
slotElement: { path: htmlEl.getAttribute("data-slot-path"), isEmpty }
|
|
1734
|
-
}, "*");
|
|
1735
|
-
}
|
|
1736
|
-
} catch (_err) {
|
|
1737
|
-
}
|
|
1738
|
-
};
|
|
1739
|
-
const handleDragOver = (e) => {
|
|
1740
|
-
e.preventDefault();
|
|
1741
|
-
e.stopPropagation();
|
|
1742
|
-
e.dataTransfer.dropEffect = "copy";
|
|
1743
|
-
htmlEl.classList.add("amplifyup-drag-over-slot");
|
|
1744
|
-
};
|
|
1745
|
-
const handleDragLeave = (e) => {
|
|
1746
|
-
const related = e.relatedTarget;
|
|
1747
|
-
if (!related || !htmlEl.contains(related)) {
|
|
1748
|
-
htmlEl.classList.remove("amplifyup-drag-over-slot");
|
|
1749
|
-
}
|
|
1750
|
-
};
|
|
1751
1941
|
htmlEl.addEventListener("click", handleClick);
|
|
1752
|
-
htmlEl.
|
|
1753
|
-
htmlEl.addEventListener("dragleave", handleDragLeave);
|
|
1754
|
-
htmlEl.addEventListener("drop", handleDrop);
|
|
1755
|
-
htmlEl._amplifyupSlotHandlers = {
|
|
1756
|
-
handleClick,
|
|
1757
|
-
handleDragOver,
|
|
1758
|
-
handleDragLeave,
|
|
1759
|
-
handleDrop
|
|
1760
|
-
};
|
|
1942
|
+
htmlEl._amplifyupSlotHandlers = { handleClick };
|
|
1761
1943
|
});
|
|
1762
1944
|
}
|
|
1763
1945
|
}
|