dynim-core 1.0.3 → 1.0.5

package/dist/builder/drag-engine.js

@@ -1,686 +0,0 @@
-/**
- * Drag & drop engine - handles all drag detection and drop target calculation
- */
-import { buildPlacementTarget, canDropInZone } from './element-utils';
-const DRAG_THRESHOLD = 5;
-const EDGE_MARGIN = 40;
-const WRAPPER_ATTR = 'data-dnd-wrapper';
-export function createDragEngine(config) {
-    const { contentRoot, editorState, historyState, diffState, overlays, onRescan } = config;
-    let freezeOverlay = config.freezeOverlay || null;
-    function setFreezeOverlay(overlay) {
-        freezeOverlay = overlay;
-    }
-    let mouseDownInfo = null;
-    let dragInfo = null;
-    let dragEndTime = 0;
-    function isEditorElement(el) {
-        const skipIds = ['__editor-freeze-overlay__', '__editor-overlays__', '__inspector-overlay__'];
-        return skipIds.some(id => el.id === id || el.closest(`#${id}`));
-    }
-    function isContainerHorizontal(element) {
-        const style = window.getComputedStyle(element);
-        const display = style.display;
-        const flexDirection = style.flexDirection;
-        if (display === 'flex' || display === 'inline-flex') {
-            return flexDirection !== 'column' && flexDirection !== 'column-reverse';
-        }
-        if (display === 'grid' || display === 'inline-grid') {
-            const gridAutoFlow = style.gridAutoFlow || '';
-            return !gridAutoFlow.includes('column');
-        }
-        return false;
-    }
-    function isParentHorizontalFlex(element) {
-        const parent = element.parentElement;
-        if (!parent)
-            return false;
-        const style = window.getComputedStyle(parent);
-        if (style.display === 'flex' || style.display === 'inline-flex') {
-            return style.flexDirection !== 'column' && style.flexDirection !== 'column-reverse';
-        }
-        return false;
-    }
-    function getDropZone(x, y, rect) {
-        const normX = (x - rect.left) / rect.width;
-        const normY = (y - rect.top) / rect.height;
-        const edgeThreshold = 0.3;
-        if (normY < edgeThreshold)
-            return 'top';
-        if (normY > 1 - edgeThreshold)
-            return 'bottom';
-        if (normX < 0.5)
-            return 'left';
-        return 'right';
-    }
-    function getSiblingDropPosition(x, y, rect, isParentHorizontal) {
-        if (isParentHorizontal) {
-            const midX = rect.left + rect.width / 2;
-            return x < midX ? 'left' : 'right';
-        }
-        else {
-            const midY = rect.top + rect.height / 2;
-            return y < midY ? 'top' : 'bottom';
-        }
-    }
-    function distanceToBounds(x, y, rect) {
-        const distX = x < rect.left ? rect.left - x : x > rect.right ? x - rect.right : 0;
-        const distY = y < rect.top ? rect.top - y : y > rect.bottom ? y - rect.bottom : 0;
-        return Math.sqrt(distX * distX + distY * distY);
-    }
-    function findClosestChildWithinMargin(container, x, y, draggedElement) {
-        let closestChild = null;
-        let closestDist = Infinity;
-        for (const child of Array.from(container.children)) {
-            if (child === draggedElement || draggedElement.contains(child))
-                continue;
-            const childEl = child;
-            const rect = childEl.getBoundingClientRect();
-            const dist = distanceToBounds(x, y, rect);
-            if (dist < closestDist && dist <= EDGE_MARGIN) {
-                closestDist = dist;
-                closestChild = childEl;
-            }
-        }
-        return closestChild;
-    }
-    function findNearestChild(parent, x, y, isHorizontal, draggedElement) {
-        const children = Array.from(parent.children).filter(child => child !== draggedElement && !draggedElement.contains(child));
-        if (children.length === 0)
-            return null;
-        let nearestChild = null;
-        let nearestDistance = Infinity;
-        let nearestPosition = null;
-        for (const child of children) {
-            const rect = child.getBoundingClientRect();
-            let distance;
-            let position;
-            if (isHorizontal) {
-                const distToLeft = Math.abs(x - rect.left);
-                const distToRight = Math.abs(x - rect.right);
-                if (distToLeft <= distToRight) {
-                    distance = distToLeft;
-                    position = 'left';
-                }
-                else {
-                    distance = distToRight;
-                    position = 'right';
-                }
-            }
-            else {
-                const distToTop = Math.abs(y - rect.top);
-                const distToBottom = Math.abs(y - rect.bottom);
-                if (distToTop <= distToBottom) {
-                    distance = distToTop;
-                    position = 'top';
-                }
-                else {
-                    distance = distToBottom;
-                    position = 'bottom';
-                }
-            }
-            if (distance < nearestDistance) {
-                nearestDistance = distance;
-                nearestChild = child;
-                nearestPosition = position;
-            }
-        }
-        if (!nearestChild && children.length > 0) {
-            nearestChild = children[0];
-            nearestPosition = isHorizontal ? 'left' : 'top';
-        }
-        if (!nearestChild)
-            return null;
-        return { child: nearestChild, position: nearestPosition };
-    }
-    function isValidVisibilityDrop(targetElement, draggedElement) {
-        return canDropInZone(draggedElement, targetElement);
-    }
-    function findDropTarget(x, y, draggedElement) {
-        if (!contentRoot) {
-            return null;
-        }
-        const overlay = document.getElementById('__editor-freeze-overlay__');
-        const overlaysContainer = document.getElementById('__editor-overlays__');
-        if (overlay)
-            overlay.style.pointerEvents = 'none';
-        if (overlaysContainer)
-            overlaysContainer.style.display = 'none';
-        let targetElement = document.elementFromPoint(x, y);
-        if (overlay)
-            overlay.style.pointerEvents = 'auto';
-        if (overlaysContainer)
-            overlaysContainer.style.display = '';
-        if (!targetElement) {
-            return null;
-        }
-        if (isEditorElement(targetElement)) {
-            return null;
-        }
-        if (targetElement === draggedElement || draggedElement.contains(targetElement)) {
-            targetElement = draggedElement.parentElement;
-            while (targetElement &&
-                targetElement !== contentRoot &&
-                targetElement.hasAttribute(WRAPPER_ATTR) &&
-                targetElement.children.length <= 1) {
-                targetElement = targetElement.parentElement;
-            }
-            if (!targetElement || targetElement === contentRoot) {
-                return null;
-            }
-        }
-        if (targetElement === contentRoot || !contentRoot.contains(targetElement)) {
-            return null;
-        }
-        function getParentRect(el) {
-            const parent = el.parentElement;
-            if (parent && parent !== contentRoot) {
-                return parent.getBoundingClientRect();
-            }
-            return null;
-        }
-        if (targetElement.children.length > 0) {
-            const isHorizontal = isContainerHorizontal(targetElement);
-            const containerRect = targetElement.getBoundingClientRect();
-            let directChild = null;
-            for (const child of Array.from(targetElement.children)) {
-                if (child === draggedElement || draggedElement.contains(child))
-                    continue;
-                const childRect = child.getBoundingClientRect();
-                if (x >= childRect.left && x <= childRect.right &&
-                    y >= childRect.top && y <= childRect.bottom) {
-                    directChild = child;
-                    break;
-                }
-            }
-            if (directChild) {
-                if (directChild.children.length > 0) {
-                    const childIsHorizontal = isContainerHorizontal(directChild);
-                    const childRect = directChild.getBoundingClientRect();
-                    const deeperTarget = findClosestChildWithinMargin(directChild, x, y, draggedElement);
-                    if (deeperTarget) {
-                        if (!isValidVisibilityDrop(deeperTarget, draggedElement)) {
-                            return null;
-                        }
-                        const rect = deeperTarget.getBoundingClientRect();
-                        const position = getSiblingDropPosition(x, y, rect, childIsHorizontal);
-                        const parentRect = deeperTarget.parentElement?.getBoundingClientRect() ?? null;
-                        return { element: deeperTarget, position, rect, parentRect };
-                    }
-                    const nearestInChild = findNearestChild(directChild, x, y, childIsHorizontal, draggedElement);
-                    if (nearestInChild) {
-                        if (!isValidVisibilityDrop(nearestInChild.child, draggedElement)) {
-                            return null;
-                        }
-                        const rect = nearestInChild.child.getBoundingClientRect();
-                        return {
-                            element: nearestInChild.child,
-                            position: nearestInChild.position,
-                            rect,
-                            parentRect: childRect
-                        };
-                    }
-                }
-                if (!isValidVisibilityDrop(directChild, draggedElement)) {
-                    return null;
-                }
-                const rect = directChild.getBoundingClientRect();
-                const position = getSiblingDropPosition(x, y, rect, isHorizontal);
-                return { element: directChild, position, rect, parentRect: containerRect };
-            }
-            const nearbyChild = findClosestChildWithinMargin(targetElement, x, y, draggedElement);
-            if (nearbyChild) {
-                if (!isValidVisibilityDrop(nearbyChild, draggedElement)) {
-                    return null;
-                }
-                const childRect = nearbyChild.getBoundingClientRect();
-                const position = getSiblingDropPosition(x, y, childRect, isHorizontal);
-                return { element: nearbyChild, position, rect: childRect, parentRect: containerRect };
-            }
-            const nearest = findNearestChild(targetElement, x, y, isHorizontal, draggedElement);
-            if (nearest) {
-                if (!isValidVisibilityDrop(nearest.child, draggedElement)) {
-                    return null;
-                }
-                const childRect = nearest.child.getBoundingClientRect();
-                return {
-                    element: nearest.child,
-                    position: nearest.position,
-                    rect: childRect,
-                    parentRect: containerRect
-                };
-            }
-        }
-        if (!isValidVisibilityDrop(targetElement, draggedElement)) {
-            return null;
-        }
-        const rect = targetElement.getBoundingClientRect();
-        const position = getDropZone(x, y, rect);
-        const parentRect = getParentRect(targetElement);
-        return { element: targetElement, position, rect, parentRect };
-    }
-    function cleanupWrapper(wrapper) {
-        const parent = wrapper.parentElement;
-        if (!parent)
-            return;
-        if (wrapper.children.length === 0) {
-            parent.removeChild(wrapper);
-        }
-        else if (wrapper.children.length === 1) {
-            const child = wrapper.children[0];
-            parent.insertBefore(child, wrapper);
-            parent.removeChild(wrapper);
-        }
-    }
-    function executeMove(sourceElement, dropTarget) {
-        if (!dropTarget)
-            return;
-        const originalParent = sourceElement.parentElement;
-        const originalNextSibling = sourceElement.nextSibling;
-        if (!originalParent)
-            return;
-        const fromPlacement = buildPlacementTarget(sourceElement);
-        const originalParentWasWrapper = originalParent.hasAttribute(WRAPPER_ATTR);
-        const wrapperToCleanup = originalParentWasWrapper ? originalParent : null;
-        const { element: targetElement, position } = dropTarget;
-        const targetParent = targetElement.parentElement;
-        if (!targetParent)
-            return;
-        let newParent;
-        let newNextSibling;
-        let createdWrapper = null;
-        if (position === 'left' || position === 'right') {
-            if (isParentHorizontalFlex(targetElement)) {
-                newParent = targetParent;
-                if (position === 'left') {
-                    newNextSibling = targetElement;
-                    targetParent.insertBefore(sourceElement, targetElement);
-                }
-                else {
-                    newNextSibling = targetElement.nextSibling;
-                    targetParent.insertBefore(sourceElement, newNextSibling);
-                }
-            }
-            else {
-                const targetStyle = window.getComputedStyle(targetElement);
-                const targetDisplay = targetStyle.display;
-                const isTargetInline = targetDisplay === 'inline' || targetDisplay === 'inline-block' ||
-                    targetDisplay === 'inline-flex' || targetDisplay === 'inline-grid';
-                const wrapper = document.createElement('div');
-                wrapper.setAttribute(WRAPPER_ATTR, 'true');
-                wrapper.style.display = isTargetInline ? 'inline-flex' : 'flex';
-                wrapper.style.flexDirection = 'row';
-                wrapper.style.alignItems = 'center';
-                wrapper.style.gap = '8px';
-                const wrapperInsertedBefore = targetElement.nextSibling;
-                targetParent.insertBefore(wrapper, targetElement);
-                wrapper.appendChild(targetElement);
-                if (position === 'left') {
-                    wrapper.insertBefore(sourceElement, targetElement);
-                    newNextSibling = targetElement;
-                }
-                else {
-                    wrapper.appendChild(sourceElement);
-                    newNextSibling = null;
-                }
-                newParent = wrapper;
-                createdWrapper = {
-                    type: 'horizontal',
-                    position: position,
-                    wrapperParent: targetParent,
-                    insertedBefore: wrapperInsertedBefore,
-                    targetElement: targetElement,
-                    styles: {
-                        display: wrapper.style.display,
-                        flexDirection: wrapper.style.flexDirection,
-                        alignItems: wrapper.style.alignItems,
-                        gap: wrapper.style.gap
-                    }
-                };
-            }
-        }
-        else {
-            const wrapper = document.createElement('div');
-            wrapper.setAttribute(WRAPPER_ATTR, 'true');
-            wrapper.style.textAlign = 'inherit';
-            const insertionRef = position === 'top' ? targetElement : targetElement.nextSibling;
-            wrapper.appendChild(sourceElement);
-            newParent = wrapper;
-            newNextSibling = null;
-            if (position === 'top') {
-                targetParent.insertBefore(wrapper, targetElement);
-            }
-            else {
-                targetParent.insertBefore(wrapper, targetElement.nextSibling);
-            }
-            createdWrapper = {
-                type: 'vertical',
-                position: position,
-                wrapperParent: targetParent,
-                insertedBefore: insertionRef,
-                targetElement: targetElement,
-                styles: {
-                    textAlign: wrapper.style.textAlign
-                }
-            };
-        }
-        if (wrapperToCleanup) {
-            cleanupWrapper(wrapperToCleanup);
-        }
-        historyState.pushChange({
-            type: 'move',
-            element: sourceElement,
-            originalParent,
-            originalNextSibling,
-            originalParentWasWrapper,
-            newParent,
-            newNextSibling,
-            createdWrapper
-        });
-        if (fromPlacement && diffState) {
-            diffState.trackElement(sourceElement, fromPlacement);
-        }
-        setTimeout(() => onRescan?.(), 50);
-    }
-    function executeUndo() {
-        const entry = historyState.undo();
-        if (!entry || entry.type !== 'move')
-            return;
-        const { element, originalParent, originalNextSibling, createdWrapper } = entry;
-        if (!document.body.contains(element)) {
-            console.warn('Undo failed: element no longer in DOM');
-            return;
-        }
-        const currentParent = element.parentElement;
-        if (createdWrapper) {
-            const wrapper = currentParent;
-            if (wrapper?.hasAttribute(WRAPPER_ATTR)) {
-                const wrapperParent = wrapper.parentElement;
-                if (wrapperParent) {
-                    const wrapperNextSibling = wrapper.nextSibling;
-                    while (wrapper.firstChild) {
-                        wrapperParent.insertBefore(wrapper.firstChild, wrapperNextSibling);
-                    }
-                    wrapperParent.removeChild(wrapper);
-                }
-            }
-        }
-        else if (currentParent?.hasAttribute(WRAPPER_ATTR)) {
-            element.remove();
-            cleanupWrapper(currentParent);
-        }
-        if (!document.body.contains(originalParent)) {
-            console.warn('Undo: original parent no longer in DOM, element left in place');
-            setTimeout(() => onRescan?.(), 50);
-            return;
-        }
-        originalParent.insertBefore(element, originalNextSibling);
-        setTimeout(() => onRescan?.(), 50);
-    }
-    function executeRedo() {
-        const entry = historyState.redo();
-        if (!entry || entry.type !== 'move')
-            return;
-        const { element, createdWrapper } = entry;
-        if (!document.body.contains(element)) {
-            console.warn('Redo failed: element no longer in DOM');
-            return;
-        }
-        const currentParent = element.parentElement;
-        if (currentParent?.hasAttribute(WRAPPER_ATTR)) {
-            element.remove();
-            cleanupWrapper(currentParent);
-        }
-        if (createdWrapper) {
-            const { type, position, wrapperParent, targetElement, styles } = createdWrapper;
-            if (!document.body.contains(wrapperParent) || !document.body.contains(targetElement)) {
-                console.warn('Redo failed: wrapper parent or target element no longer in DOM');
-                return;
-            }
-            if (type === 'horizontal') {
-                const wrapper = document.createElement('div');
-                wrapper.setAttribute(WRAPPER_ATTR, 'true');
-                Object.assign(wrapper.style, styles);
-                wrapperParent.insertBefore(wrapper, targetElement);
-                wrapper.appendChild(targetElement);
-                if (position === 'left') {
-                    wrapper.insertBefore(element, targetElement);
-                }
-                else {
-                    wrapper.appendChild(element);
-                }
-            }
-            else {
-                const wrapper = document.createElement('div');
-                wrapper.setAttribute(WRAPPER_ATTR, 'true');
-                Object.assign(wrapper.style, styles);
-                wrapper.appendChild(element);
-                if (position === 'top') {
-                    wrapperParent.insertBefore(wrapper, targetElement);
-                }
-                else {
-                    wrapperParent.insertBefore(wrapper, targetElement.nextSibling);
-                }
-            }
-        }
-        else {
-            const { newParent, newNextSibling } = entry;
-            if (!document.body.contains(newParent)) {
-                console.warn('Redo failed: new parent no longer in DOM');
-                return;
-            }
-            newParent.insertBefore(element, newNextSibling);
-        }
-        setTimeout(() => onRescan?.(), 50);
-    }
-    function handleMouseDown(e, element) {
-        const state = editorState.getState();
-        if (!element) {
-            if (state.selectedElement) {
-                editorState.clearSelection();
-                overlays.hideSelection();
-            }
-            return;
-        }
-        mouseDownInfo = {
-            x: e.clientX,
-            y: e.clientY,
-            element
-        };
-        if (element !== state.selectedElement && state.selectedElement) {
-            editorState.clearSelection();
-            overlays.hideSelection();
-        }
-    }
-    function handleMouseMove(e, element) {
-        if (mouseDownInfo && !dragInfo) {
-            const dx = e.clientX - mouseDownInfo.x;
-            const dy = e.clientY - mouseDownInfo.y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            if (distance >= DRAG_THRESHOLD) {
-                const dragElement = mouseDownInfo.element;
-                const rect = dragElement.getBoundingClientRect();
-                const grabOffsetX = mouseDownInfo.x - rect.left;
-                const grabOffsetY = mouseDownInfo.y - rect.top;
-                dragInfo = {
-                    element: dragElement,
-                    rect,
-                    startX: mouseDownInfo.x,
-                    startY: mouseDownInfo.y,
-                    grabOffsetX,
-                    grabOffsetY
-                };
-                editorState.startDrag(dragElement, rect);
-                editorState.clearHover();
-                overlays.hideHover();
-                overlays.hideSelection();
-                freezeOverlay?.setCursor('grabbing');
-            }
-        }
-        if (dragInfo) {
-            const dropTarget = findDropTarget(e.clientX, e.clientY, dragInfo.element);
-            const ghostPos = { x: e.clientX, y: e.clientY };
-            editorState.updateDrag(ghostPos, dropTarget);
-            overlays.showDragGhost(dragInfo.rect, ghostPos, dragInfo.grabOffsetX, dragInfo.grabOffsetY);
-            if (dropTarget) {
-                overlays.showDropIndicator(dropTarget.rect, dropTarget.position, dropTarget.parentRect);
-                overlays.hideNoDropIndicator();
-                freezeOverlay?.setCursor('grabbing');
-            }
-            else {
-                overlays.hideDropIndicator();
-                const overlay = document.getElementById('__editor-freeze-overlay__');
-                const overlaysContainer = document.getElementById('__editor-overlays__');
-                if (overlay)
-                    overlay.style.pointerEvents = 'none';
-                if (overlaysContainer)
-                    overlaysContainer.style.display = 'none';
-                const elementUnderCursor = document.elementFromPoint(e.clientX, e.clientY);
-                if (overlay)
-                    overlay.style.pointerEvents = 'auto';
-                if (overlaysContainer)
-                    overlaysContainer.style.display = '';
-                if (elementUnderCursor &&
-                    contentRoot.contains(elementUnderCursor) &&
-                    !isEditorElement(elementUnderCursor) &&
-                    elementUnderCursor !== dragInfo.element &&
-                    !canDropInZone(dragInfo.element, elementUnderCursor)) {
-                    const rect = elementUnderCursor.getBoundingClientRect();
-                    overlays.showNoDropIndicator(rect);
-                    freezeOverlay?.setCursor('not-allowed');
-                }
-                else {
-                    overlays.hideNoDropIndicator();
-                    freezeOverlay?.setCursor('grabbing');
-                }
-            }
-            return;
-        }
-        if (element) {
-            const rect = element.getBoundingClientRect();
-            editorState.setHover(null, element, rect);
-            overlays.showHover(rect);
-        }
-        else {
-            editorState.clearHover();
-            overlays.hideHover();
-        }
-    }
-    function handleMouseUp(e, _element) {
-        if (dragInfo) {
-            const dropTarget = findDropTarget(e.clientX, e.clientY, dragInfo.element);
-            if (dropTarget) {
-                executeMove(dragInfo.element, dropTarget);
-            }
-            dragEndTime = Date.now();
-            editorState.endDrag();
-            overlays.hideDragGhost();
-            overlays.hideDropIndicator();
-            overlays.hideNoDropIndicator();
-            editorState.clearHover();
-            overlays.hideHover();
-            freezeOverlay?.setCursor('default');
-        }
-        mouseDownInfo = null;
-        dragInfo = null;
-    }
-    function handleMouseLeave(_e) {
-        editorState.clearHover();
-        overlays.hideHover();
-        if (dragInfo) {
-            editorState.endDrag();
-            overlays.hideDragGhost();
-            overlays.hideDropIndicator();
-            overlays.hideNoDropIndicator();
-            freezeOverlay?.setCursor('default');
-        }
-        mouseDownInfo = null;
-        dragInfo = null;
-    }
-    function handleClick(e, element) {
-        if (Date.now() - dragEndTime < 200) {
-            return;
-        }
-        if (element) {
-            const rect = element.getBoundingClientRect();
-            const state = editorState.getState();
-            if (state.selectedElement === element) {
-                editorState.clearSelection();
-                overlays.hideSelection();
-                return;
-            }
-            editorState.setSelection(element, rect);
-            overlays.showSelection(rect);
-        }
-        else {
-            editorState.clearSelection();
-            overlays.hideSelection();
-        }
-    }
-    function handleDoubleClick(_e, element) {
-        if (element && element.children.length > 0) {
-            editorState.incrementDrillDepth();
-        }
-    }
-    function handleWheel(_e) {
-        requestAnimationFrame(() => {
-            const state = editorState.getState();
-            if (state.hoveredElement) {
-                const rect = state.hoveredElement.getBoundingClientRect();
-                editorState.setHover(null, state.hoveredElement, rect);
-                overlays.showHover(rect);
-            }
-            if (state.selectedElement) {
-                const rect = state.selectedElement.getBoundingClientRect();
-                editorState.setSelection(state.selectedElement, rect);
-                overlays.showSelection(rect);
-            }
-        });
-    }
-    function handleKeyDown(e) {
-        const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-        const modifier = isMac ? e.metaKey : e.ctrlKey;
-        if (modifier && e.key === 'z') {
-            e.preventDefault();
-            if (e.shiftKey) {
-                if (historyState.canRedo()) {
-                    executeRedo();
-                }
-            }
-            else {
-                if (historyState.canUndo()) {
-                    executeUndo();
-                }
-            }
-        }
-        if (modifier && e.key === 'y') {
-            e.preventDefault();
-            if (historyState.canRedo()) {
-                executeRedo();
-            }
-        }
-    }
-    function attach() {
-        window.addEventListener('keydown', handleKeyDown);
-    }
-    function detach() {
-        window.removeEventListener('keydown', handleKeyDown);
-        mouseDownInfo = null;
-        dragInfo = null;
-    }
-    return {
-        attach,
-        detach,
-        setFreezeOverlay,
-        handleMouseDown,
-        handleMouseMove,
-        handleMouseUp,
-        handleMouseLeave,
-        handleClick,
-        handleDoubleClick,
-        handleWheel,
-        executeUndo,
-        executeRedo,
-        findDropTarget
-    };
-}