@fc3/mmcadi 0.1.56 → 0.1.57

package/dist/.last-compile-time

@@ -1 +1 @@
-1767665040
+1767736645

package/dist/.last-publish-time

@@ -1 +1 @@
-1767665144
+1767736776

package/dist/client.js

@@ -2283,17 +2283,21 @@
       this.drag_delay_timer = 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 +2307,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,15 +2338,12 @@
           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);
@@ -2337,6 +2353,7 @@
       this.drag_start_coordinate = coordinate;
       block.classList.add("drag-candidate");
       this.scheduleDelayedDrag();
+      event.preventDefault();
     }
     scheduleDelayedDrag() {
       this.cancelDelayedDrag();
@@ -2348,7 +2365,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 +2374,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 +2413,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,28 +2428,13 @@
         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();
       const raw_targets = document.querySelectorAll(".dragging");
       const drag_target_blocks = Array.from(raw_targets);
@@ -2547,26 +2566,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 +2603,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 +2612,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,9 +2682,17 @@
       }
     }
     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() {

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

@@ -4,24 +4,26 @@ declare class InteractionHelper {
     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 handleTouchMove;
     private translateDragTargetBlock;
     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;

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

@@ -13,17 +13,21 @@ class InteractionHelper {
         this.drag_delay_timer = 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);
@@ -33,33 +37,47 @@ class InteractionHelper {
         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;
             }
             // 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).
+            // ancestry that is NOT an all-block-encompassing link (eg, a folder block)
+            // the existence of which was ruled out by checking its data-role
+            // attribute above (folder and link blocks both have "block_activation")
             if (current_element instanceof HTMLAnchorElement) {
                 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);
@@ -69,6 +87,7 @@ class InteractionHelper {
         this.drag_start_coordinate = coordinate;
         block.classList.add('drag-candidate');
         this.scheduleDelayedDrag();
+        event.preventDefault();
     }
     scheduleDelayedDrag() {
         this.cancelDelayedDrag();
@@ -80,7 +99,8 @@ class InteractionHelper {
             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) => {
@@ -88,7 +108,22 @@ class InteractionHelper {
         });
         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) => {
@@ -112,6 +147,7 @@ class InteractionHelper {
             });
             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);
         });
@@ -126,28 +162,13 @@ class InteractionHelper {
             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();
         const raw_targets = document.querySelectorAll('.dragging');
         const drag_target_blocks = Array.from(raw_targets);
@@ -279,26 +300,36 @@ class InteractionHelper {
         }
         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++];
@@ -306,8 +337,8 @@ class InteractionHelper {
             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, {
+                opacity: '0',
                 left: '',
                 top: '',
                 right: '',
@@ -315,41 +346,55 @@ class InteractionHelper {
                 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 (0, get_index_path_for_element_1.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 errors_1.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;
+        const parent_element = ghost.parentNode;
+        if (parent_element === null) {
+            throw new errors_1.InvariantViolation(`
+				Tried to read parent element for ghost, but it was not set
+			`);
+        }
+        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.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();
+            if (sibling.classList.contains('dragging')) {
+                continue;
+            }
+            if (sibling === ghost) {
+                break;
             }
-            current_child = current_child.previousElementSibling;
+            effective_index++;
         }
-        return '0';
+        return effective_index.toString();
     }
     async submitReposition(source_index_path, target_index_path) {
         const form = new FormData();
@@ -372,9 +417,17 @@ class InteractionHelper {
         }
     }
     getEventCoordinate(event) {
+        const { touches } = event;
+        if (touches === undefined) {
+            return null;
+        }
+        const touch = touches[0];
+        if (touch === undefined) {
+            return null;
+        }
         return {
-            x: event.clientX,
-            y: event.clientY
+            x: touch.clientX,
+            y: touch.clientY
         };
     }
     getDragStartCoordinate() {