fix(builder): use stable canvas container for drop/reorder positioning

This commit is contained in:
komkida91
2026-02-22 17:52:24 +01:00
parent b3bb7d57aa
commit d5f2b819bf

View File

@@ -1386,6 +1386,7 @@ const state = {
canvas.appendChild(overlay);
}
const inner = document.createElement("div");
inner.className = "canvas-inner";
inner.style.position = "relative";
inner.style.zIndex = "1";
if (!state.settings.free_drag){
@@ -1610,6 +1611,10 @@ const state = {
}
function removeDrop(){ if (dropIndicator && dropIndicator.parentNode) dropIndicator.parentNode.removeChild(dropIndicator); dropIndicator=null; }
function getCanvasContainer(canvas){
if (!canvas) return null;
return canvas.querySelector(".canvas-inner") || canvas;
}
function getDropIndex(container,y,x){
const blocks=[...container.querySelectorAll(".block")]
.filter((n)=>n.dataset.blockId !== draggingBlockId);
@@ -1654,7 +1659,7 @@ const state = {
function startPointerDrag(blockId, e){
if (!blockId || state.settings.free_drag) return;
const canvas = document.getElementById("previewCanvas");
const container = canvas ? (canvas.querySelector("div") || canvas) : null;
const container = getCanvasContainer(canvas);
if (!container) return;
pointerDrag = { active: true, id: blockId, index: null, split: null };
draggingBlockId = blockId;
@@ -1709,7 +1714,7 @@ const state = {
function startManualDrag(blockId, e){
if (!blockId || state.settings.free_drag) return;
const canvas = document.getElementById("previewCanvas");
const container = canvas ? (canvas.querySelector("div") || canvas) : null;
const container = getCanvasContainer(canvas);
if (!container) return;
manualDrag = { active: true, id: blockId, index: null };
draggingBlockId = blockId;
@@ -1750,9 +1755,11 @@ const state = {
function moveBlock(id,toIndex){
const from=state.blocks.findIndex(b=>b.id===id);
if (from<0) return;
const clamped = Math.max(0, Math.min(state.blocks.length, Number(toIndex)));
const numericTo = Number(toIndex);
if (!Number.isFinite(numericTo)) return;
const clamped = Math.max(0, Math.min(state.blocks.length - 1, numericTo));
const [b]=state.blocks.splice(from,1);
const target = clamped > from ? clamped - 1 : clamped;
const target = Math.max(0, Math.min(state.blocks.length, clamped));
state.blocks.splice(target,0,b);
selectedBlockId = b.id;
renderPreview();
@@ -2138,7 +2145,8 @@ const state = {
canvas.addEventListener("dragover",(e)=>{
e.preventDefault();
if (!state.settings.free_drag){
const container=canvas.querySelector("div")||canvas;
const container=getCanvasContainer(canvas);
if (!container) return;
const index=getDropIndex(container,e.clientY,e.clientX);
showDrop(container,index);
}
@@ -2154,7 +2162,8 @@ const state = {
const rect = canvas.getBoundingClientRect();
b.pos = { x: Math.max(0, e.clientX - rect.left - 20), y: Math.max(0, e.clientY - rect.top - 20) };
} else {
const container=canvas.querySelector("div")||canvas;
const container=getCanvasContainer(canvas);
if (!container) return;
const index=getDropIndex(container,e.clientY,e.clientX);
state.blocks.splice(index,0,b);
selectedBlockId=b.id;