@fc3/mmcadi 0.1.56 → 0.1.58

package/dist/.last-compile-time

@@ -1 +1 @@
-1767665040
+1767847432

package/dist/.last-publish-time

@@ -1 +1 @@
-1767665144
+1767848006

package/dist/client.js

@@ -2280,20 +2280,29 @@
   var InteractionHelper = class {
     constructor() {
       this.drag_start_coordinate = null;
+      this.drag_current_coordinate = null;
       this.drag_delay_timer = null;
+      this.scroll_timer = null;
+      this.scroll_direction = null;
+      this.last_scroll_time = null;
+      this.current_scroll_y = null;
     }
     attach() {
-      document.addEventListener("pointerdown", (event) => {
-        this.handlePointerDown(event);
+      if (!this.isTouchDevice()) {
+        return;
+      }
+      this.applyNonInteractiveClasses();
+      document.addEventListener("touchstart", (event) => {
+        this.handleTouchStart(event);
       }, { capture: true });
-      document.addEventListener("pointermove", (event) => {
-        this.handlePointerMove(event);
+      document.addEventListener("touchmove", (event) => {
+        this.handleTouchMove(event);
       }, { capture: true, passive: false });
-      document.addEventListener("pointerup", (event) => {
-        this.handlePointerUp(event);
+      document.addEventListener("touchend", (event) => {
+        this.handleTouchEnd(event);
       }, { capture: true });
-      document.addEventListener("pointercancel", (event) => {
-        this.handlePointerCancel(event);
+      document.addEventListener("click", (event) => {
+        this.handleGenericClick(event);
       }, { capture: true });
       document.addEventListener("dragstart", (event) => {
         this.handleNativeDragStart(event);
@@ -2303,14 +2312,29 @@
       const elements = Array.from(document.querySelectorAll(".dragging"));
       return elements.length > 0;
     }
-    handlePointerDown(event) {
+    applyNonInteractiveClasses() {
+      const raw_elements = document.querySelectorAll("section.block");
+      const elements = Array.from(raw_elements);
+      elements.forEach((element) => {
+        element.classList.add("no-interaction");
+      });
+    }
+    isTouchDevice() {
+      if (Math.random() > 0) {
+        return true;
+      }
+      const pointer_matches = window.matchMedia("(pointer: coarse)").matches;
+      const hover_none_matches = window.matchMedia("(hover: none)").matches;
+      return pointer_matches && hover_none_matches;
+    }
+    handleTouchStart(event) {
       const { target } = event;
       if (target === null) {
         return;
       }
       const target_element = target;
       let current_element = target_element;
-      while (current_element) {
+      while (current_element instanceof HTMLElement) {
         const attribute = current_element.getAttribute("data-role");
         if (attribute === "block_activation") {
           break;
@@ -2319,24 +2343,23 @@
           return;
         }
         current_element = current_element.parentNode;
-        if (!(current_element instanceof HTMLElement)) {
-          break;
-        }
       }
       const block = target_element.closest("section.block");
       if (block === null) {
         return;
       }
-      if (target_element.closest("button, input, textarea, select, label, form")) {
+      if (target_element.closest("input, textarea, select, label, form")) {
         return;
       }
       const coordinate = this.getEventCoordinate(event);
       if (coordinate === null) {
         return;
       }
-      this.drag_start_coordinate = coordinate;
+      this.setDragStartCoordinate(coordinate);
+      this.setDragCurrentCoordinate(coordinate);
       block.classList.add("drag-candidate");
       this.scheduleDelayedDrag();
+      event.preventDefault();
     }
     scheduleDelayedDrag() {
       this.cancelDelayedDrag();
@@ -2348,7 +2371,8 @@
         clearTimeout(this.drag_delay_timer);
       }
     }
-    removeClassFromAllElements(class_name) {
+    demoteAllDragCandidates() {
+      const class_name = "drag-candidate";
       const raw_elements = document.querySelectorAll(`.${class_name}`);
       const elements = Array.from(raw_elements);
       elements.forEach((element) => {
@@ -2356,7 +2380,22 @@
       });
       return elements;
     }
+    createDragMask() {
+      const mask = document.createElement("div");
+      mask.classList.add("drag-mask");
+      document.body.appendChild(mask);
+      document.body.style.overflow = "hidden";
+    }
+    hideDragMask() {
+      const raw_elements = document.querySelectorAll(".drag-mask");
+      const elements = Array.from(raw_elements);
+      elements.forEach((element) => {
+        document.body.removeChild(element);
+      });
+      document.body.style.overflow = "auto";
+    }
     beginDelayedDrag() {
+      this.createDragMask();
       const raw_candidates = document.querySelectorAll(".drag-candidate");
       const candidates = Array.from(raw_candidates);
       candidates.forEach((candidate) => {
@@ -2380,6 +2419,7 @@
         });
         candidate.setAttribute("data-drag-start-x", rect.left.toString());
         candidate.setAttribute("data-drag-start-y", rect.top.toString());
+        candidate.setAttribute("data-dragging", "true");
         candidate.classList.add("dragging");
         parentNode.insertBefore(ghost, candidate);
       });
@@ -2394,39 +2434,28 @@
         event.preventDefault();
       }
     }
-    handlePointerMove(event) {
+    handleTouchMove(event) {
       const current_coordinate = this.getEventCoordinate(event);
       const start_coordinate = this.getDragStartCoordinate();
       if (start_coordinate === null || current_coordinate === null) {
         return;
       }
-      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");
-          }
-        }
-      }
-      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.demoteAllDragCandidates();
       this.scheduleDelayedDrag();
+      this.setDragCurrentCoordinate(current_coordinate);
+      this.updateDragTargets();
+      if (this.isDragging()) {
+        event.preventDefault();
+      }
+    }
+    updateDragTargets() {
       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);
+        this.updateDragTarget(target_block);
       });
-      if (drag_target_blocks.length > 0) {
-        event.preventDefault();
-      }
     }
-    translateDragTargetBlock(block, current_coordinate) {
+    updateDragTarget(block) {
       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) {
@@ -2446,17 +2475,36 @@
 			`);
       }
       const start_coordinate = this.getDragStartCoordinate();
+      const current_coordinate = this.getDragCurrentCoordinate();
       if (start_coordinate === null) {
         throw new import_errors8.InvariantViolation(`
 				Tried to translate drag target, but drag start coordinate was null
 			`);
       }
+      if (current_coordinate === null) {
+        throw new import_errors8.InvariantViolation(`
+				Tried to translate drag target, but drag current 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 container = document.querySelector("main");
+      if (container === null) {
+        throw new import_errors8.InvariantViolation(`
+				Unable to find <main> container element in the DOM
+			`);
+      }
+      const container_rect = container.getBoundingClientRect();
       const new_x = parsed_x + x_delta;
-      const new_y = parsed_y + y_delta;
+      const new_y = Math.max(
+        container_rect.top,
+        Math.min(
+          parsed_y + y_delta,
+          container_rect.bottom
+        )
+      );
       block.style.left = `${new_x}px`;
       block.style.top = `${new_y}px`;
       const block_rect = block.getBoundingClientRect();
@@ -2487,6 +2535,91 @@
           }
         }
       }
+      if (block_rect.top < 0) {
+        this.startScrollingUp();
+      } else if (block_rect.bottom > window.innerHeight) {
+        this.startScrollingDown();
+      } else {
+        this.stopScrolling();
+      }
+    }
+    stopScrolling() {
+      this.setScrollDirection(null);
+    }
+    startScrollingUp() {
+      this.setScrollDirection("up" /* UP */);
+    }
+    startScrollingDown() {
+      this.setScrollDirection("down" /* DOWN */);
+    }
+    setScrollDirection(scroll_direction) {
+      if (this.scroll_direction === scroll_direction) {
+        return;
+      }
+      this.scroll_direction = scroll_direction;
+      if (scroll_direction === null) {
+        this.last_scroll_time = null;
+        this.current_scroll_y = null;
+      } else {
+        this.last_scroll_time = Date.now();
+        this.current_scroll_y = window.scrollY;
+        this.scheduleScroll();
+      }
+    }
+    getScrollDirection() {
+      return this.scroll_direction;
+    }
+    setLastScrollTime(time) {
+      this.last_scroll_time = time;
+    }
+    getLastScrollTime() {
+      if (this.last_scroll_time === null) {
+        throw new import_errors8.InvariantViolation(`
+				Tried to read last scroll time, but it was not set
+			`);
+      }
+      return this.last_scroll_time;
+    }
+    scheduleScroll() {
+      if (this.scroll_timer) {
+        window.cancelAnimationFrame(this.scroll_timer);
+        this.scroll_timer = null;
+      }
+      this.scroll_timer = window.requestAnimationFrame(() => {
+        this.scroll();
+      });
+    }
+    scroll() {
+      if (!this.isDragging()) {
+        return;
+      }
+      const scroll_direction = this.getScrollDirection();
+      if (scroll_direction === null) {
+        return;
+      }
+      const last_scroll_time = this.getLastScrollTime();
+      const now = Date.now();
+      const elapsed_time = now - last_scroll_time;
+      const scroll_speed_per_second = window.innerHeight / 2;
+      const time_ratio = elapsed_time / import_time.TimeInterval.ONE_SECOND;
+      const scroll_amount = scroll_speed_per_second * time_ratio;
+      const scroll_y = this.getCurrentScrollY();
+      const sign = scroll_direction === "up" /* UP */ ? -1 : 1;
+      const new_scroll_y = Math.max(
+        0,
+        Math.min(
+          document.documentElement.scrollHeight,
+          scroll_y + scroll_amount * sign
+        )
+      );
+      this.setCurrentScrollY(new_scroll_y);
+      this.setLastScrollTime(now);
+      const window_moved = new_scroll_y !== scroll_y;
+      if (window_moved) {
+        window.scrollTo(0, new_scroll_y);
+        this.updateDragTargets();
+      }
+      this.scheduleScroll();
     }
     getGhostForBlock(block) {
       const index_path = get_index_path_for_element_default(block);
@@ -2530,12 +2663,16 @@
       if (index === -1) {
         throw new import_errors8.InvariantViolation("Unable to locate ghost within siblings");
       }
+      index++;
       while (index < siblings.length) {
-        index++;
-        const sibling = siblings[index];
+        const sibling = siblings[index++];
         if (sibling === block) {
           continue;
         }
+        if (sibling === void 0) {
+          console.log(sibling);
+          console.log(siblings);
+        }
         const { classList } = sibling;
         if (!classList.contains("block")) {
           continue;
@@ -2547,26 +2684,36 @@
       }
       return null;
     }
-    handlePointerUp(event) {
+    handleTouchEnd(event) {
       this.stopDragging();
     }
-    handlePointerCancel(event) {
-      this.stopDragging();
+    handleGenericClick(event) {
+      const { target } = event;
+      if (target === null) {
+        return;
+      }
+      const target_element = target;
+      const block = target_element.closest("section.block");
+      if (block === null) {
+        return;
+      }
+      const attribute = block.getAttribute("data-dragging");
+      if (attribute === "true") {
+        block.removeAttribute("data-dragging");
+        event.preventDefault();
+        event.stopPropagation();
+      }
     }
     stopDragging() {
-      this.showFullscreenBlockingOverlay();
       this.stopDraggingAsync().then(() => {
-        this.hideFullscreenBlockingOverlay();
+        this.hideDragMask();
       });
     }
-    showFullscreenBlockingOverlay() {
-    }
-    hideFullscreenBlockingOverlay() {
-    }
     async stopDraggingAsync() {
       this.cancelDelayedDrag();
-      this.removeClassFromAllElements("drag-candidate");
-      const dragging_elements = this.removeClassFromAllElements("dragging");
+      this.demoteAllDragCandidates();
+      const raw_elements = document.querySelectorAll(".dragging");
+      const dragging_elements = Array.from(raw_elements);
       let index = 0;
       while (index < dragging_elements.length) {
         const element = dragging_elements[index++];
@@ -2574,8 +2721,8 @@
         const source_index_path = get_index_path_for_element_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, {
+          opacity: "0",
           left: "",
           top: "",
           right: "",
@@ -2583,39 +2730,55 @@
           width: "",
           height: ""
         });
+        element.classList.remove("dragging");
+        ghost.replaceWith(element);
+        element.style.opacity = "1";
       }
+      this.recomputeIndexPaths();
     }
-    getIndexPathSafe(element) {
-      const is_block = element.classList.contains("block");
-      if (!is_block) {
-        return null;
-      }
-      const is_ghost = element.classList.contains("ghost");
-      if (is_ghost) {
-        return null;
-      }
-      return get_index_path_for_element_default(element);
+    recomputeIndexPaths() {
+      const raw_blocks = document.querySelectorAll("section.block");
+      const blocks = Array.from(raw_blocks);
+      let index = 0;
+      blocks.forEach((block) => {
+        const block_parent = block.parentNode;
+        if (block_parent === null) {
+          throw new import_errors8.InvariantViolation(`
+					Tried to read block parent element, but it was not set
+				`);
+        }
+        const multicolumn_ancestor = block_parent.closest("section.block.multi_column");
+        if (multicolumn_ancestor === null) {
+          const index_path = index.toString();
+          block.setAttribute("data-index-path", index_path);
+          index++;
+        }
+      });
     }
     getIndexPathForGhost(ghost) {
-      let current_child = ghost;
-      while (current_child) {
-        const index_path = this.getIndexPathSafe(current_child);
-        if (index_path !== null) {
-          return index_path;
-        }
-        current_child = current_child.nextElementSibling;
+      const parent_element = ghost.parentNode;
+      if (parent_element === null) {
+        throw new import_errors8.InvariantViolation(`
+				Tried to read parent element for ghost, but it was not set
+			`);
       }
-      current_child = ghost;
-      while (current_child) {
-        const index_path = this.getIndexPathSafe(current_child);
-        if (index_path !== null) {
-          const index_major_version = parseInt(index_path);
-          const next_version = index_major_version + 1;
-          return next_version.toString();
+      const siblings = Array.from(parent_element.children);
+      let index = 0;
+      let effective_index = 0;
+      while (index < siblings.length) {
+        const sibling = siblings[index++];
+        if (!sibling.classList.contains("block")) {
+          continue;
         }
-        current_child = current_child.previousElementSibling;
+        if (sibling.classList.contains("dragging")) {
+          continue;
+        }
+        if (sibling === ghost) {
+          break;
+        }
+        effective_index++;
       }
-      return "0";
+      return effective_index.toString();
     }
     async submitReposition(source_index_path, target_index_path) {
       const form = new FormData();
@@ -2637,14 +2800,42 @@
       }
     }
     getEventCoordinate(event) {
+      const { touches } = event;
+      if (touches === void 0) {
+        return null;
+      }
+      const touch = touches[0];
+      if (touch === void 0) {
+        return null;
+      }
       return {
-        x: event.clientX,
-        y: event.clientY
+        x: touch.clientX,
+        y: touch.clientY
       };
     }
     getDragStartCoordinate() {
       return this.drag_start_coordinate;
     }
+    setDragStartCoordinate(coordinate) {
+      this.drag_start_coordinate = coordinate;
+    }
+    getDragCurrentCoordinate() {
+      return this.drag_current_coordinate;
+    }
+    setDragCurrentCoordinate(coordinate) {
+      this.drag_current_coordinate = coordinate;
+    }
+    getCurrentScrollY() {
+      if (this.current_scroll_y === null) {
+        throw new import_errors8.InvariantViolation(`
+				Tried to read current scroll y, but it was not set
+			`);
+      }
+      return this.current_scroll_y;
+    }
+    setCurrentScrollY(scroll_y) {
+      this.current_scroll_y = scroll_y;
+    }
   };
   var interaction_default = InteractionHelper;
 

package/dist/src/client/helper/interaction.d.ts

@@ -1,30 +1,52 @@
 declare class InteractionHelper {
     private drag_start_coordinate;
+    private drag_current_coordinate;
     private drag_delay_timer;
+    private scroll_timer;
+    private scroll_direction;
+    private last_scroll_time;
+    private current_scroll_y;
     constructor();
     attach(): void;
     isDragging(): boolean;
-    private handlePointerDown;
+    private applyNonInteractiveClasses;
+    private isTouchDevice;
+    private handleTouchStart;
     private scheduleDelayedDrag;
     private cancelDelayedDrag;
-    private removeClassFromAllElements;
+    private demoteAllDragCandidates;
+    private createDragMask;
+    private hideDragMask;
     private beginDelayedDrag;
     private handleNativeDragStart;
-    private handlePointerMove;
-    private translateDragTargetBlock;
+    private handleTouchMove;
+    private updateDragTargets;
+    private updateDragTarget;
+    private stopScrolling;
+    private startScrollingUp;
+    private startScrollingDown;
+    private setScrollDirection;
+    private getScrollDirection;
+    private setLastScrollTime;
+    private getLastScrollTime;
+    private scheduleScroll;
+    private scroll;
     private getGhostForBlock;
     private getPreviousBlock;
     private getNextBlock;
-    private handlePointerUp;
-    private handlePointerCancel;
+    private handleTouchEnd;
+    private handleGenericClick;
     private stopDragging;
-    private showFullscreenBlockingOverlay;
-    private hideFullscreenBlockingOverlay;
     private stopDraggingAsync;
-    private getIndexPathSafe;
+    private recomputeIndexPaths;
     private getIndexPathForGhost;
     private submitReposition;
     private getEventCoordinate;
     private getDragStartCoordinate;
+    private setDragStartCoordinate;
+    private getDragCurrentCoordinate;
+    private setDragCurrentCoordinate;
+    private getCurrentScrollY;
+    private setCurrentScrollY;
 }
 export default InteractionHelper;