@fc3/mmcadi 0.1.50 → 0.1.52

package/dist/src/client/helper/interaction.js

@@ -3,634 +3,361 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const time_1 = require("@fc3/time");
 const errors_1 = require("@fc3/errors");
 const action_type_1 = __importDefault(require("./../../enum/action-type.js"));
-const emoji_1 = __importDefault(require("./../../enum/emoji.js"));
 const get_index_path_for_element_1 = __importDefault(require("./../utility/get-index-path-for-element.js"));
 class InteractionHelper {
     constructor() {
-        this.drag_active = false;
-        this.drag_origin_block = null;
-        this.drag_placeholder = null;
-        this.drag_ghost = null;
-        this.drag_start_y = null;
-        this.drag_pointer_offset_y = null;
-        this.drag_press_timer = null;
-        this.swipe_active = false;
-        this.swipe_block = null;
-        this.swipe_start_x = null;
-        this.swipe_start_y = null;
-        this.swipe_content = null;
-        this.swipe_menu_width = 0;
-        this.open_swipe_block = null;
-        this.open_swipe_content = null;
+        this.drag_start_coordinate = null;
+        this.drag_delay_timer = null;
     }
     attach() {
-        document.addEventListener('mousedown', (event) => {
-            this.onPressStart(event);
-        }, true);
-        document.addEventListener('touchstart', (event) => {
-            this.onPressStart(event);
+        document.addEventListener('pointerdown', (event) => {
+            this.handlePointerDown(event);
+        }, { capture: true });
+        document.addEventListener('pointermove', (event) => {
+            this.handlePointerMove(event);
         }, { capture: true, passive: false });
-        document.addEventListener('mousemove', (event) => {
-            this.onPointerMove(event);
-        }, true);
-        document.addEventListener('touchmove', (event) => {
-            this.onPointerMove(event);
-        }, { capture: true, passive: false });
-        document.addEventListener('mouseup', (event) => {
-            this.onPressEnd(event);
-        }, true);
-        document.addEventListener('touchend', (event) => {
-            this.onPressEnd(event);
-        }, true);
-        // Close any open swipe when touching outside
-        document.addEventListener('touchstart', (event) => {
-            this.onGlobalTouchStart(event);
-        }, { capture: true, passive: true });
-        // Prevent native browser drag for anchors/images inside blocks so our
-        // custom drag logic receives mousemove events instead of dragover.
+        document.addEventListener('pointerup', (event) => {
+            this.handlePointerUp(event);
+        }, { capture: true });
+        document.addEventListener('pointercancel', (event) => {
+            this.handlePointerCancel(event);
+        }, { capture: true });
         document.addEventListener('dragstart', (event) => {
-            this.onNativeDragStart(event);
-        }, true);
+            this.handleNativeDragStart(event);
+        }, { capture: true });
     }
     isDragging() {
-        return this.drag_active;
-    }
-    getBlockElements() {
-        const elements = document.querySelectorAll('section.block');
-        return Array.from(elements);
-    }
-    getSiblingBlocks(container, exclude) {
-        const children = Array.from(container.children);
-        return children.filter((element) => {
-            if (element === exclude) {
-                return false;
-            }
-            return element.classList.contains('block');
-        });
+        const elements = Array.from(document.querySelectorAll('.dragging'));
+        return elements.length > 0;
     }
-    onPressStart(event) {
-        const target = event.target;
+    handlePointerDown(event) {
+        const { target } = event;
         if (target === null) {
             return;
         }
-        // Allow starting drag from anchors (e.g., Folder blocks wrap content in <a>).
-        // Still block on true form controls to avoid interfering with inputs/buttons.
-        if (target.closest('button, input, textarea, select, label, form')) {
-            return;
+        const target_element = target;
+        let current_element = target_element;
+        while (current_element) {
+            const attribute = current_element.getAttribute('data-role');
+            if (attribute === 'block_activation') {
+                break;
+            }
+            // Tricky. Bail out early if we detect an anchor element in the event
+            // ancestry that is NOT an all-block-encompassing link (eg, a folder block).
+            if (current_element instanceof HTMLAnchorElement) {
+                return;
+            }
+            current_element = current_element.parentNode;
+            if (!(current_element instanceof HTMLElement)) {
+                break;
+            }
         }
-        const block = target.closest('section.block');
+        const block = target_element.closest('section.block');
         if (block === null) {
             return;
         }
-        // Avoid native link-drag by preventing default on mousedown for anchors
-        if (event instanceof MouseEvent) {
-            const anchor = target.closest('a[href]');
-            if (anchor) {
-                event.preventDefault();
-            }
+        if (target_element.closest('button, input, textarea, select, label, form')) {
+            return;
         }
-        const touch_event = event;
-        const is_touch = touch_event.type === 'touchstart';
-        const point = this.getEventPoint(event);
-        if (point === null) {
+        const coordinate = this.getEventCoordinate(event);
+        if (coordinate === null) {
             return;
         }
-        this.drag_origin_block = block;
-        this.drag_start_y = point.clientY;
-        if (is_touch) {
-            this.swipe_block = block;
-            this.swipe_start_x = point.clientX;
-            this.swipe_start_y = point.clientY;
+        this.drag_start_coordinate = coordinate;
+        block.classList.add('drag-candidate');
+        this.scheduleDelayedDrag();
+    }
+    scheduleDelayedDrag() {
+        this.cancelDelayedDrag();
+        const delay = time_1.TimeInterval.ONE_SECOND;
+        this.drag_delay_timer = setTimeout(this.beginDelayedDrag.bind(this), delay);
+    }
+    cancelDelayedDrag() {
+        if (this.drag_delay_timer !== null) {
+            clearTimeout(this.drag_delay_timer);
         }
-        const threshold_ms = is_touch ? 350 : 200;
-        this.clearPressTimer();
-        this.drag_press_timer = window.setTimeout(() => {
-            this.beginDrag(point.clientY);
-        }, threshold_ms);
     }
-    onNativeDragStart(event) {
+    removeClassFromAllElements(class_name) {
+        const raw_elements = document.querySelectorAll(`.${class_name}`);
+        const elements = Array.from(raw_elements);
+        elements.forEach((element) => {
+            element.classList.remove(class_name);
+        });
+        return elements;
+    }
+    beginDelayedDrag() {
+        const raw_candidates = document.querySelectorAll('.drag-candidate');
+        const candidates = Array.from(raw_candidates);
+        candidates.forEach((candidate) => {
+            const ghost = candidate.cloneNode(true);
+            const index_path = (0, get_index_path_for_element_1.default)(candidate);
+            ghost.classList.add('ghost');
+            ghost.setAttribute('data-for', index_path);
+            candidate.classList.remove('drag-candidate');
+            const { parentNode } = candidate;
+            if (parentNode === null) {
+                throw new errors_1.InvariantViolation(`
+					Expected drag candidate to be located in a parent, but it was null
+				`);
+            }
+            const rect = candidate.getBoundingClientRect();
+            Object.assign(candidate.style, {
+                top: `${rect.top}px`,
+                left: `${rect.left}px`,
+                width: `${rect.width}px`,
+                height: `${rect.height}px`
+            });
+            candidate.setAttribute('data-drag-start-x', rect.left.toString());
+            candidate.setAttribute('data-drag-start-y', rect.top.toString());
+            candidate.classList.add('dragging');
+            parentNode.insertBefore(ghost, candidate);
+        });
+    }
+    handleNativeDragStart(event) {
         const target = event.target;
         if (!target) {
             return;
         }
-        if (target.closest('section.block')) {
+        const closest_block = target.closest('section.block');
+        if (closest_block !== null) {
             event.preventDefault();
         }
     }
-    onPointerMove(event) {
-        const point = this.getEventPoint(event);
-        if (point === null) {
+    handlePointerMove(event) {
+        const current_coordinate = this.getEventCoordinate(event);
+        const start_coordinate = this.getDragStartCoordinate();
+        if (start_coordinate === null || current_coordinate === null) {
             return;
         }
-        const touch_event = event;
-        const { touches } = touch_event;
-        const is_touch = touches !== undefined;
-        // Touch-only swipe detection (left swipe reveals actions)
-        if (is_touch && this.swipe_block) {
-            if (this.swipe_start_x === null || this.swipe_start_y === null) {
-                throw new errors_1.InvariantViolation('Swipe start coordinates were not initialized');
-            }
-            const start_x = this.swipe_start_x;
-            const start_y = this.swipe_start_y;
-            const delta_x = point.clientX - start_x;
-            const delta_y = point.clientY - start_y;
-            if (!this.swipe_active) {
-                const abs_x = Math.abs(delta_x);
-                const abs_y = Math.abs(delta_y);
-                // Initiate swipe if horizontal dominates and exceeds threshold
-                if (abs_x > 12 && abs_x > abs_y) {
-                    // Cancel pending drag long-press
-                    this.clearPressTimer();
-                    // Close any previously open swipe on another block
-                    this.closeOpenSwipeMenu(this.swipe_block);
-                    this.swipe_active = true;
-                    this.beginSwipe(this.swipe_block);
+        const { target } = event;
+        if (target !== null) {
+            const target_element = target;
+            const block = target_element.closest('section.block');
+            if (block) {
+                if (!block.classList.contains('dragging')) {
+                    block.classList.add('drag-candidate');
                 }
             }
-            if (this.swipe_active) {
-                event.preventDefault();
-                const content_element = this.swipe_content;
-                const menu_width = this.swipe_menu_width;
-                // Only allow left swipe (negative delta_x)
-                const translate_x = Math.max(-menu_width, Math.min(0, delta_x));
-                content_element.style.transition = '';
-                content_element.style.transform = `translateX(${translate_x}px)`;
-                // Don't fall through to drag while swiping:
-                return;
-            }
-        }
-        if (!this.drag_active && this.drag_origin_block && this.drag_start_y !== null) {
-            const delta_y = Math.abs(point.clientY - this.drag_start_y);
-            if (delta_y > 8 && this.drag_press_timer !== null) {
-                this.beginDrag(point.clientY);
-            }
-        }
-        if (!this.drag_active) {
-            return;
-        }
-        event.preventDefault();
-        // FLIP: capture positions before DOM change (within current container)
-        const origin = this.drag_origin_block;
-        let container = null;
-        if (this.drag_placeholder !== null) {
-            container = this.drag_placeholder.parentElement;
-        }
-        if (container === null && origin !== null) {
-            container = origin.parentElement;
         }
-        if (container === null) {
-            return;
-        }
-        const blocks_before = this.getSiblingBlocks(container, origin);
-        const preceding_rects = new Map();
-        blocks_before.forEach((element) => {
-            const rect = element.getBoundingClientRect();
-            preceding_rects.set(element, rect);
+        const { x: start_x, y: start_y } = start_coordinate;
+        const { x: current_x, y: current_y } = current_coordinate;
+        const distance = Math.hypot(current_x - start_x, current_y - start_y);
+        if (distance > 25) {
+            this.removeClassFromAllElements('drag-candidate');
+        }
+        this.scheduleDelayedDrag();
+        const raw_targets = document.querySelectorAll('.dragging');
+        const drag_target_blocks = Array.from(raw_targets);
+        drag_target_blocks.forEach((target_block) => {
+            this.translateDragTargetBlock(target_block, current_coordinate);
         });
-        // Move placeholder to its new spot
-        this.updatePlaceholderPosition(point.clientY);
-        // Update ghost to follow pointer (glued to finger/mouse)
-        if (this.drag_ghost && this.drag_pointer_offset_y !== null) {
-            const top_position = point.clientY - this.drag_pointer_offset_y;
-            this.drag_ghost.style.top = `${top_position}px`;
+        if (drag_target_blocks.length > 0) {
+            event.preventDefault();
         }
-        // Capture last positions and animate
-        const blocks_after = this.getSiblingBlocks(container, origin);
-        this.animateWithFlip(preceding_rects, blocks_after);
     }
-    onPressEnd(event) {
-        this.clearPressTimer();
-        // Finalize swipe if active
-        if (this.swipe_active) {
-            const content = this.swipe_content;
-            const style = window.getComputedStyle(content);
-            let current_x = 0;
-            try {
-                const css_matrix = new WebKitCSSMatrix(style.transform);
-                current_x = css_matrix.m41;
-            }
-            catch {
-                const translate_match = style.transform.match(/translateX\(([-0-9.]+)px\)/);
-                if (translate_match) {
-                    current_x = parseFloat(translate_match[1]);
+    translateDragTargetBlock(block, current_coordinate) {
+        const x_attribute = block.getAttribute('data-drag-start-x');
+        const y_attribute = block.getAttribute('data-drag-start-y');
+        if (x_attribute === null || y_attribute === null) {
+            throw new errors_1.InvariantViolation(`
+				Drag coordinate attributes were invalid:
+				x: ${x_attribute}
+				y: ${y_attribute}
+			`);
+        }
+        const parsed_x = parseInt(x_attribute);
+        const parsed_y = parseInt(y_attribute);
+        if (isNaN(parsed_x) || isNaN(parsed_y)) {
+            throw new errors_1.InvariantViolation(`
+				Drag coordinate attributes were invalid:
+				x: ${x_attribute}
+				y: ${y_attribute}
+			`);
+        }
+        const start_coordinate = this.getDragStartCoordinate();
+        if (start_coordinate === null) {
+            throw new errors_1.InvariantViolation(`
+				Tried to translate drag target, but drag start coordinate was null
+			`);
+        }
+        const { x: start_x, y: start_y } = start_coordinate;
+        const { x: current_x, y: current_y } = current_coordinate;
+        const x_delta = current_x - start_x;
+        const y_delta = current_y - start_y;
+        const new_x = parsed_x + x_delta;
+        const new_y = parsed_y + y_delta;
+        block.style.left = `${new_x}px`;
+        block.style.top = `${new_y}px`;
+        const block_rect = block.getBoundingClientRect();
+        const previous_block = this.getPreviousBlock(block);
+        const next_block = this.getNextBlock(block);
+        const ghost = this.getGhostForBlock(block);
+        let swapped = false;
+        if (previous_block !== null) {
+            const previous_rect = previous_block.getBoundingClientRect();
+            const previous_block_y_threshold = previous_rect.top + (previous_rect.height * 0.4);
+            if (block_rect.top < previous_block_y_threshold) {
+                swapped = true;
+                const next_sibling = ghost.nextElementSibling;
+                previous_block.replaceWith(ghost);
+                if (next_sibling) {
+                    next_sibling.before(previous_block);
                 }
             }
-            const width = this.swipe_menu_width;
-            const open = Math.abs(current_x) > width / 2;
-            content.style.transition = 'transform 150ms ease';
-            content.style.transform = open ? `translateX(${-width}px)` : 'translateX(0)';
-            if (!open) {
-                this.teardownSwipe();
-            }
-            if (open) {
-                this.open_swipe_block = this.swipe_block;
-                this.open_swipe_content = content;
-            }
-            this.swipe_active = false;
-            return;
-        }
-        if (!this.drag_active) {
-            this.resetDragState();
-            return;
         }
-        event.preventDefault();
-        const origin = this.drag_origin_block;
-        const placeholder = this.drag_placeholder;
-        const source_index_path = (0, get_index_path_for_element_1.default)(origin);
-        const target_index_path = this.computeTargetIndexPath(placeholder);
-        this.cleanupDragElements();
-        if (target_index_path === null || target_index_path === source_index_path) {
-            this.resetDragState();
-            return;
-        }
-        const editing = new URL(window.location.href).searchParams.get('editing') === 'true';
-        this.postReposition(source_index_path, target_index_path, editing)
-            .then((new_index_path) => {
-            if (new_index_path) {
-                const url = new URL(window.location.href);
-                url.searchParams.set('index_path', new_index_path);
-                history.replaceState({}, '', url.toString());
-            }
-            const blocks = this.getBlockElements();
-            blocks.forEach((element) => {
-                element.classList.remove('selected');
-            });
-            origin.classList.add('selected');
-            // Rewrite data-index-path for all top-level blocks to reflect new order
-            this.updateTopLevelIndexPaths();
-        })
-            .finally(() => {
-            this.resetDragState();
-        });
-    }
-    beginSwipe(block) {
-        // Ensure wrapper and actions exist
-        const result = this.ensureSwipeUI(block);
-        const target = result.target;
-        const menu = result.menu;
-        const menu_width = result.menu_width;
-        this.swipe_content = target;
-        this.swipe_menu_width = menu_width;
-        if (menu) {
-            menu.style.display = 'flex';
-            menu.style.opacity = '1';
-        }
-    }
-    closeOpenSwipeMenu(except) {
-        if (!this.open_swipe_content) {
-            return;
-        }
-        if (except && this.open_swipe_block === except) {
-            return;
-        }
-        const content = this.open_swipe_content;
-        content.style.transition = 'transform 150ms ease';
-        content.style.transform = 'translateX(0)';
-        const clear_callback = () => {
-            content.removeEventListener('transitionend', clear_callback);
-            if (this.open_swipe_block) {
-                const menu_element = this.getSwipeMenuFor(this.open_swipe_block);
-                if (menu_element && menu_element.parentElement) {
-                    menu_element.parentElement.removeChild(menu_element);
+        if (next_block !== null && swapped === false) {
+            const next_rect = next_block.getBoundingClientRect();
+            const next_block_y_threshold = next_rect.top + (next_rect.height * 0.6);
+            if (block_rect.bottom > next_block_y_threshold) {
+                const next_sibling = ghost.nextElementSibling === next_block ? ghost : ghost.nextElementSibling;
+                next_block.replaceWith(ghost);
+                if (next_sibling) {
+                    next_sibling.before(next_block);
                 }
             }
-            this.open_swipe_block = null;
-            this.open_swipe_content = null;
-        };
-        content.addEventListener('transitionend', clear_callback);
-    }
-    teardownSwipe() {
-        if (!this.swipe_block || !this.swipe_content) {
-            this.resetSwipeState();
-            return;
-        }
-        this.swipe_content.style.transition = '';
-        this.swipe_content.style.transform = 'translateX(0)';
-        const menu = this.getSwipeMenuFor(this.swipe_block);
-        if (menu && menu.parentElement) {
-            menu.parentElement.removeChild(menu);
         }
-        this.resetSwipeState();
     }
-    onGlobalTouchStart(event) {
-        if (!this.open_swipe_block || !this.open_swipe_content) {
-            return;
-        }
-        const target = event.target;
-        if (!target) {
-            return;
-        }
-        // Ignore touches inside the open block or its action menu
-        const menu = this.getSwipeMenuFor(this.open_swipe_block);
-        const closest_block = target.closest('section.block');
-        const swipe_actions = target.closest('.swipe-actions');
-        if (closest_block === this.open_swipe_block || swipe_actions === menu) {
-            return;
-        }
-        this.closeOpenSwipeMenu();
+    getGhostForBlock(block) {
+        const index_path = (0, get_index_path_for_element_1.default)(block);
+        const ghost = document.querySelector(`[data-for="${index_path}"]`);
+        if (ghost === null) {
+            throw new errors_1.InvariantViolation(`
+				Unable to find ghost for block with index path ${index_path}
+			`);
+        }
+        return ghost;
     }
-    getSwipeMenuFor(block) {
-        const wrapper = block.closest('main .section-wrapper');
-        if (!wrapper || !block.id) {
-            return null;
+    getPreviousBlock(block) {
+        const parent_node = block.parentNode;
+        const siblings = Array.from(parent_node.children);
+        const ghost = this.getGhostForBlock(block);
+        let index = siblings.indexOf(ghost);
+        if (index === -1) {
+            throw new errors_1.InvariantViolation('Unable to locate ghost within siblings');
+        }
+        while (index--) {
+            const sibling = siblings[index];
+            if (sibling === block) {
+                continue;
+            }
+            const { classList } = sibling;
+            if (!classList.contains('block')) {
+                continue;
+            }
+            if (classList.contains('ghost')) {
+                continue;
+            }
+            return sibling;
         }
-        return wrapper.querySelector(`.swipe-actions[data-for="${block.id}"]`);
+        return null;
     }
-    resetSwipeState() {
-        this.swipe_block = null;
-        this.swipe_start_x = null;
-        this.swipe_start_y = null;
-        this.swipe_content = null;
-        this.swipe_menu_width = 0;
-    }
-    ensureSwipeUI(block) {
-        const target = block;
-        target.style.willChange = 'transform';
-        target.style.transform = 'translateX(0)';
-        target.style.transition = '';
-        target.style.position = target.style.position || 'relative';
-        target.style.zIndex = '1';
-        const wrapper = block.closest('main .section-wrapper');
-        let menu = null;
-        if (wrapper) {
-            if (getComputedStyle(wrapper).position === 'static') {
-                wrapper.style.position = 'relative';
+    getNextBlock(block) {
+        const parent_node = block.parentNode;
+        const siblings = Array.from(parent_node.children);
+        const ghost = this.getGhostForBlock(block);
+        let index = siblings.indexOf(ghost);
+        if (index === -1) {
+            throw new errors_1.InvariantViolation('Unable to locate ghost within siblings');
+        }
+        while (index < siblings.length) {
+            index++;
+            const sibling = siblings[index];
+            if (sibling === block) {
+                continue;
             }
-            let existing = wrapper.querySelector(`.swipe-actions[data-for="${block.id}"]`);
-            if (!existing) {
-                existing = document.createElement('div');
-                existing.className = 'swipe-actions';
-                existing.setAttribute('data-for', block.id);
-                existing.style.position = 'absolute';
-                existing.style.right = '0';
-                existing.style.display = 'none';
-                existing.style.opacity = '0';
-                existing.style.gap = '8px';
-                existing.style.alignItems = 'stretch';
-                existing.style.padding = '0 8px';
-                existing.style.background = 'transparent';
-                existing.style.zIndex = '0';
-                const edit_button = document.createElement('button');
-                const delete_button = document.createElement('button');
-                const add_button = document.createElement('button');
-                edit_button.textContent = emoji_1.default.GEAR;
-                edit_button.setAttribute('aria-label', 'Edit');
-                edit_button.style.background = '#f0ad4e';
-                edit_button.style.color = '#000';
-                edit_button.style.border = 'none';
-                edit_button.style.padding = '0';
-                edit_button.style.fontSize = '20px';
-                edit_button.style.width = '48px';
-                edit_button.style.minWidth = '48px';
-                edit_button.style.display = 'flex';
-                edit_button.style.alignItems = 'center';
-                edit_button.style.justifyContent = 'center';
-                edit_button.style.cursor = 'pointer';
-                delete_button.textContent = emoji_1.default.RED_X;
-                delete_button.setAttribute('aria-label', 'Delete');
-                delete_button.style.background = '#e74c3c';
-                delete_button.style.color = '#fff';
-                delete_button.style.border = 'none';
-                delete_button.style.padding = '0';
-                delete_button.style.fontSize = '20px';
-                delete_button.style.width = '48px';
-                delete_button.style.minWidth = '48px';
-                delete_button.style.display = 'flex';
-                delete_button.style.alignItems = 'center';
-                delete_button.style.justifyContent = 'center';
-                delete_button.style.cursor = 'pointer';
-                add_button.textContent = emoji_1.default.PLUS_SIGN;
-                add_button.setAttribute('aria-label', 'Add After');
-                add_button.style.background = '#27ae60';
-                add_button.style.color = '#fff';
-                add_button.style.border = 'none';
-                add_button.style.padding = '0';
-                add_button.style.fontSize = '20px';
-                add_button.style.width = '48px';
-                add_button.style.minWidth = '48px';
-                add_button.style.display = 'flex';
-                add_button.style.alignItems = 'center';
-                add_button.style.justifyContent = 'center';
-                add_button.style.cursor = 'pointer';
-                existing.appendChild(edit_button);
-                existing.appendChild(delete_button);
-                existing.appendChild(add_button);
-                wrapper.appendChild(existing);
-                const edit_handler = (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.navigateToBlockLink(block, 'edit');
-                };
-                const delete_handler = (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.navigateToBlockLink(block, 'delete');
-                };
-                const add_handler = (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.navigateToAddAfter(block);
-                };
-                // Prevent global touchstart from closing when interacting with menu
-                existing.addEventListener('touchstart', (event) => {
-                    event.stopPropagation();
-                });
-                existing.addEventListener('mousedown', (event) => {
-                    event.stopPropagation();
-                });
-                edit_button.addEventListener('click', edit_handler);
-                edit_button.addEventListener('touchend', edit_handler);
-                delete_button.addEventListener('click', delete_handler);
-                delete_button.addEventListener('touchend', delete_handler);
-                add_button.addEventListener('click', add_handler);
-                add_button.addEventListener('touchend', add_handler);
+            const { classList } = sibling;
+            if (!classList.contains('block')) {
+                continue;
             }
-            menu = existing;
-            // align to block
-            const top = block.offsetTop;
-            const height = block.offsetHeight;
-            menu.style.top = `${top}px`;
-            menu.style.height = `${height}px`;
-        }
-        let menu_width = 160;
-        if (menu) {
-            const prevDisplay = menu.style.display;
-            const prevOpacity = menu.style.opacity;
-            menu.style.display = 'flex';
-            menu.style.opacity = '0';
-            menu_width = menu.offsetWidth || 160;
-            menu.style.display = prevDisplay;
-            menu.style.opacity = prevOpacity;
+            if (classList.contains('ghost')) {
+                continue;
+            }
+            return sibling;
         }
-        this.enforceTimeVisibility(block);
-        return {
-            target,
-            menu,
-            menu_width
-        };
+        return null;
     }
-    navigateToAddAfter(block) {
-        const current = (0, get_index_path_for_element_1.default)(block);
-        // Compute after index by incrementing the last segment
-        const parts = current.split('.').map((part) => {
-            return parseInt(part, 10);
-        });
-        const has_invalid_number = parts.some((value) => {
-            return isNaN(value);
+    handlePointerUp(event) {
+        this.stopDragging();
+    }
+    handlePointerCancel(event) {
+        this.stopDragging();
+    }
+    stopDragging() {
+        this.showFullscreenBlockingOverlay();
+        this.stopDraggingAsync().then(() => {
+            this.hideFullscreenBlockingOverlay();
         });
-        if (parts.length === 0 || has_invalid_number) {
-            throw new errors_1.InvariantViolation('Invalid index_path for Add After');
-        }
-        const last = parts.pop();
-        if (last === undefined) {
-            throw new errors_1.InvariantViolation('Unable to compute next index for Add After');
-        }
-        parts.push(last + 1);
-        const index_path = parts.join('.');
-        const url = new URL(window.location.href);
-        const editing = url.searchParams.get('editing') === 'true';
-        const path = window.location.pathname;
-        const actionUrl = new URL('/actions', window.location.origin);
-        actionUrl.searchParams.set('path', path);
-        actionUrl.searchParams.set('editing', String(editing));
-        actionUrl.searchParams.set('action_type', 'add_block');
-        actionUrl.searchParams.set('index_path', index_path);
-        window.location.href = actionUrl.toString();
     }
-    enforceTimeVisibility(block) {
-        const shows_time = block.classList.contains('with-time');
-        const time_element = block.querySelector(':scope time');
-        if (!time_element) {
-            return;
-        }
-        if (!shows_time) {
-            time_element.style.display = 'none';
-        }
-        else {
-            time_element.style.display = '';
-        }
+    showFullscreenBlockingOverlay() {
     }
-    navigateToBlockLink(block, type) {
-        const block_id = block.id;
-        const link_id = `${block_id}-${type}`;
-        const link_element = document.getElementById(link_id);
-        if (!link_element) {
-            return;
-        }
-        const href = link_element.getAttribute('href');
-        if (href) {
-            window.location.href = href;
-        }
+    hideFullscreenBlockingOverlay() {
     }
-    beginDrag(current_y) {
-        if (this.drag_active) {
-            return;
-        }
-        const block = this.drag_origin_block;
-        if (!block) {
-            return;
-        }
-        this.drag_active = true;
-        // Reduce text selection and improve UX while dragging
-        document.body.style.userSelect = 'none';
-        document.body.style.cursor = 'grabbing';
-        const rect = block.getBoundingClientRect();
-        const ghost = block.cloneNode(true);
-        ghost.style.position = 'fixed';
-        ghost.style.top = `${rect.top}px`;
-        ghost.style.left = `${rect.left}px`;
-        ghost.style.width = `${rect.width}px`;
-        ghost.style.pointerEvents = 'none';
-        ghost.style.opacity = '0.9';
-        ghost.style.boxShadow = '0 8px 16px rgba(0,0,0,0.2)';
-        ghost.style.zIndex = '9999';
-        // No transition on top; keep glued to pointer
-        document.body.appendChild(ghost);
-        this.drag_ghost = ghost;
-        // Record pointer offset within the element so the ghost aligns under finger
-        this.drag_pointer_offset_y = current_y - rect.top;
-        // Replace the original block's layout with a placeholder in the same spot
-        const placeholder = document.createElement('div');
-        placeholder.style.height = `${rect.height}px`;
-        placeholder.style.margin = getComputedStyle(block).margin;
-        placeholder.style.border = '2px dashed #888';
-        placeholder.style.borderRadius = '4px';
-        placeholder.style.boxSizing = 'border-box';
-        if (block.parentElement !== null) {
-            block.parentElement.insertBefore(placeholder, block);
+    async stopDraggingAsync() {
+        this.cancelDelayedDrag();
+        this.removeClassFromAllElements('drag-candidate');
+        const dragging_elements = this.removeClassFromAllElements('dragging');
+        let index = 0;
+        while (index < dragging_elements.length) {
+            const element = dragging_elements[index++];
+            const ghost = this.getGhostForBlock(element);
+            const source_index_path = (0, get_index_path_for_element_1.default)(element);
+            const target_index_path = this.getIndexPathForGhost(ghost);
+            await this.submitReposition(source_index_path, target_index_path);
+            ghost.replaceWith(element);
+            Object.assign(element.style, {
+                left: '',
+                top: '',
+                right: '',
+                bottom: '',
+                width: '',
+                height: ''
+            });
         }
-        this.drag_placeholder = placeholder;
-        // Remove original from layout so we don't keep extra blank space
-        block.style.display = 'none';
-        this.updatePlaceholderPosition(current_y);
     }
-    updatePlaceholderPosition(cursor_y) {
-        const placeholder = this.drag_placeholder;
-        const origin = this.drag_origin_block;
-        if (!placeholder || !origin) {
-            return;
-        }
-        const container = placeholder.parentElement;
-        const blocks = this.getSiblingBlocks(container, origin);
-        let inserted = false;
-        for (let i = 0; i < blocks.length; i++) {
-            const element = blocks[i];
-            const rect = element.getBoundingClientRect();
-            const midpoint = rect.top + rect.height / 2;
-            if (cursor_y < midpoint) {
-                const parent = element.parentElement;
-                if (parent) {
-                    parent.insertBefore(placeholder, element);
-                }
-                inserted = true;
-                break;
-            }
+    getIndexPathSafe(element) {
+        const is_block = element.classList.contains('block');
+        if (!is_block) {
+            return null;
         }
-        if (!inserted) {
-            const last_element = blocks[blocks.length - 1];
-            if (last_element) {
-                const parent = last_element.parentElement;
-                if (parent) {
-                    parent.appendChild(placeholder);
-                }
-            }
+        const is_ghost = element.classList.contains('ghost');
+        if (is_ghost) {
+            return null;
         }
+        return (0, get_index_path_for_element_1.default)(element);
     }
-    animateWithFlip(preceding_rects, blocks_after) {
-        blocks_after.forEach((element) => {
-            const first = preceding_rects.get(element);
-            if (!first) {
-                return;
+    getIndexPathForGhost(ghost) {
+        let current_child = ghost;
+        while (current_child) {
+            const index_path = this.getIndexPathSafe(current_child);
+            if (index_path !== null) {
+                return index_path;
             }
-            const last_rect = element.getBoundingClientRect();
-            const delta_y = first.top - last_rect.top;
-            if (delta_y === 0) {
-                return;
+            current_child = current_child.nextElementSibling;
+        }
+        current_child = ghost;
+        while (current_child) {
+            const index_path = this.getIndexPathSafe(current_child);
+            if (index_path !== null) {
+                // TODO: This will need to change when I implement drag-reordering of
+                // multicolumn layouts.
+                const index_major_version = parseInt(index_path);
+                const next_version = index_major_version + 1;
+                return next_version.toString();
             }
-            // Invert
-            element.style.transition = '';
-            element.style.transform = `translateY(${delta_y}px)`;
-            // Play
-            void element.getBoundingClientRect();
-            element.style.transition = 'transform 120ms ease';
-            element.style.transform = 'translateY(0)';
-            const cleanup = () => {
-                element.style.transition = '';
-                element.style.transform = '';
-                element.removeEventListener('transitionend', cleanup);
-            };
-            element.addEventListener('transitionend', cleanup);
-        });
+            current_child = current_child.previousElementSibling;
+        }
+        return '0';
     }
-    async postReposition(source_index_path, target_index_path, editing) {
+    async submitReposition(source_index_path, target_index_path) {
         const form = new FormData();
         form.set('path', window.location.pathname);
         form.set('action_type', action_type_1.default.REPOSITION_BLOCK);
         form.set('source_index_path', source_index_path);
         form.set('target_index_path', target_index_path);
-        const response = await fetch(`/actions?editing=${editing}`, {
+        const response = await fetch(`/actions`, {
             method: 'POST',
             body: form,
             credentials: 'same-origin',
@@ -644,96 +371,15 @@ class InteractionHelper {
             return null;
         }
     }
-    computeTargetIndexPath(placeholder) {
-        if (!placeholder) {
-            return null;
-        }
-        const parent = placeholder.parentElement;
-        if (!parent) {
-            return null;
-        }
-        let index = 0;
-        const children_elements = Array.from(parent.children);
-        for (let i = 0; i < children_elements.length; i++) {
-            const child_element = children_elements[i];
-            if (child_element === placeholder) {
-                break;
-            }
-            if (child_element.classList.contains('block')) {
-                index += 1;
-            }
-        }
-        return index.toString();
-    }
-    updateTopLevelIndexPaths() {
-        // Top-level blocks are rendered inside main > .section-wrapper
-        const wrapper = document.querySelector('main .section-wrapper');
-        let blocks;
-        if (wrapper) {
-            const node_list = wrapper.querySelectorAll(':scope > section.block');
-            blocks = Array.from(node_list);
-        }
-        else {
-            // Fallback: direct children of main if wrapper is not present
-            const node_list = document.querySelectorAll('main > section.block');
-            blocks = Array.from(node_list);
-        }
-        for (let i = 0; i < blocks.length; i++) {
-            blocks[i].setAttribute('data-index-path', i.toString());
-        }
-    }
-    cleanupDragElements() {
-        if (this.drag_ghost && this.drag_ghost.parentElement) {
-            this.drag_ghost.parentElement.removeChild(this.drag_ghost);
-        }
-        if (this.drag_placeholder && this.drag_placeholder.parentElement) {
-            // Move the real element into the placeholder's final position
-            if (this.drag_origin_block) {
-                this.drag_placeholder.parentElement.insertBefore(this.drag_origin_block, this.drag_placeholder);
-            }
-            this.drag_placeholder.parentElement.removeChild(this.drag_placeholder);
-        }
-        if (this.drag_origin_block) {
-            this.drag_origin_block.style.display = '';
-        }
-        this.drag_ghost = null;
-        this.drag_placeholder = null;
-        // Restore global styles
-        document.body.style.userSelect = '';
-        document.body.style.cursor = '';
-    }
-    resetDragState() {
-        this.cleanupDragElements();
-        this.drag_active = false;
-        this.drag_origin_block = null;
-        this.drag_start_y = null;
-        this.drag_pointer_offset_y = null;
-    }
-    clearPressTimer() {
-        if (this.drag_press_timer !== null) {
-            window.clearTimeout(this.drag_press_timer);
-            this.drag_press_timer = null;
-        }
-    }
-    getEventPoint(event) {
-        const touch_event = event;
-        const has_touches = touch_event.touches !== undefined;
-        if (has_touches) {
-            const primary_touch = touch_event.touches[0] || touch_event.changedTouches[0];
-            if (!primary_touch) {
-                return null;
-            }
-            return {
-                clientX: primary_touch.clientX,
-                clientY: primary_touch.clientY
-            };
-        }
-        const mouse_event = event;
+    getEventCoordinate(event) {
         return {
-            clientX: mouse_event.clientX,
-            clientY: mouse_event.clientY
+            x: event.clientX,
+            y: event.clientY
         };
     }
+    getDragStartCoordinate() {
+        return this.drag_start_coordinate;
+    }
 }
 exports.default = InteractionHelper;
 //# sourceMappingURL=interaction.js.map