@fc3/mmcadi 0.1.57 → 0.1.59

package/dist/.last-compile-time

@@ -1 +1 @@
-1767736645
+1767915849

package/dist/.last-publish-time

@@ -1 +1 @@
-1767736776
+1767916022

package/dist/client.js

@@ -2280,7 +2280,13 @@
   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;
+      this.swiping = false;
     }
     attach() {
       if (!this.isTouchDevice()) {
@@ -2350,7 +2356,8 @@
       if (coordinate === null) {
         return;
       }
-      this.drag_start_coordinate = coordinate;
+      this.setDragStartCoordinate(coordinate);
+      this.setDragCurrentCoordinate(coordinate);
       block.classList.add("drag-candidate");
       this.scheduleDelayedDrag();
       event.preventDefault();
@@ -2430,22 +2437,116 @@
     }
     handleTouchMove(event) {
       const current_coordinate = this.getEventCoordinate(event);
+      this.setDragCurrentCoordinate(current_coordinate);
+      this.cancelDelayedDrag();
+      this.demoteAllDragCandidates();
+      if (this.isSwiping()) {
+        return this.handleSwipe();
+      }
+      if (this.shouldBeSwiping()) {
+        return this.activateSwiping();
+      }
+      this.scheduleDelayedDrag();
+      this.updateDragTargets();
+      if (this.isDragging()) {
+        event.preventDefault();
+      }
+    }
+    getCurrentAndStartCoordinates() {
+      const start_coordinate = this.getDragStartCoordinate();
+      const current_coordinate = this.getDragCurrentCoordinate();
+      if (start_coordinate === null) {
+        throw new import_errors8.InvariantViolation(`
+				Tried to read start coordinate during touch event,
+				but it was not set
+			`);
+      }
+      if (current_coordinate === null) {
+        throw new import_errors8.InvariantViolation(`
+				Tried to read current coordinate during touch event,
+				but it was not set
+			`);
+      }
+      return [current_coordinate, start_coordinate];
+    }
+    handleSwipe() {
+      const [current_coordinate, start_coordinate] = this.getCurrentAndStartCoordinates();
+      const x_delta = current_coordinate.x - start_coordinate.x;
+      const raw_elements = document.querySelectorAll("section.swiping");
+      const elements = Array.from(raw_elements);
+      elements.forEach((element) => {
+        const normalized_delta = Math.min(0, x_delta);
+        element.style.transform = `translateX(${normalized_delta}px)`;
+      });
+    }
+    activateSwiping() {
+      this.swiping = true;
+      const blocks = this.getCurrentTouchedBlocks();
+      blocks.forEach((block) => {
+        block.style.width = `${block.clientWidth}px`;
+        block.classList.add("swiping");
+      });
+    }
+    deactivateSwiping() {
+      this.swiping = false;
+      const [current_coordinate, start_coordinate] = this.getCurrentAndStartCoordinates();
+      const delta = current_coordinate.x - start_coordinate.x;
+      const raw_blocks = document.querySelectorAll("section.swiping");
+      const blocks = Array.from(raw_blocks);
+      blocks.forEach((block) => {
+        block.style.transform = "";
+        block.classList.remove("swiping");
+        const swipe_open = delta < block.clientWidth / 2 * -1;
+        if (swipe_open) {
+          const raw_open_blocks = document.querySelectorAll(".swipe-open");
+          const open_blocks = Array.from(raw_open_blocks);
+          open_blocks.forEach((block2) => {
+            block2.classList.remove("swipe-open");
+          });
+        }
+        block.classList.toggle("swipe-open", swipe_open);
+      });
+    }
+    getCurrentTouchedBlocks() {
+      const [current_coordinate, _] = this.getCurrentAndStartCoordinates();
+      const { x, y } = current_coordinate;
+      const raw_blocks = document.querySelectorAll("section.block");
+      const blocks = Array.from(raw_blocks);
+      return blocks.filter((block) => {
+        const rect = block.getBoundingClientRect();
+        if (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom) {
+          return true;
+        }
+        return false;
+      });
+    }
+    shouldBeSwiping() {
+      const blocks = this.getCurrentTouchedBlocks();
+      const open_block = blocks.find((block) => {
+        return block.classList.contains("swipe-open");
+      });
+      if (open_block) {
+        return true;
+      }
+      const current_coordinate = this.getDragCurrentCoordinate();
       const start_coordinate = this.getDragStartCoordinate();
       if (start_coordinate === null || current_coordinate === null) {
-        return;
+        return false;
       }
-      this.demoteAllDragCandidates();
-      this.scheduleDelayedDrag();
+      const x_delta = current_coordinate.x - start_coordinate.x;
+      const y_delta = current_coordinate.y - start_coordinate.y;
+      const x_threshold = -1 * 48;
+      const y_threshold = 48;
+      return x_delta < x_threshold && Math.abs(y_delta) < y_threshold;
+    }
+    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) {
@@ -2464,18 +2565,26 @@
 				y: ${y_attribute}
 			`);
       }
-      const start_coordinate = this.getDragStartCoordinate();
-      if (start_coordinate === null) {
-        throw new import_errors8.InvariantViolation(`
-				Tried to translate drag target, but drag start coordinate was null
-			`);
-      }
+      const [current_coordinate, start_coordinate] = this.getCurrentAndStartCoordinates();
       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();
@@ -2506,6 +2615,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);
@@ -2549,12 +2743,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;
@@ -2567,7 +2765,12 @@
       return null;
     }
     handleTouchEnd(event) {
-      this.stopDragging();
+      if (this.isSwiping()) {
+        this.deactivateSwiping();
+      }
+      if (this.isDragging()) {
+        this.stopDragging();
+      }
     }
     handleGenericClick(event) {
       const { target } = event;
@@ -2698,6 +2901,29 @@
     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;
+    }
+    isSwiping() {
+      return this.swiping;
+    }
   };
   var interaction_default = InteractionHelper;
 

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

@@ -1,6 +1,12 @@
 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;
+    private swiping;
     constructor();
     attach(): void;
     isDragging(): boolean;
@@ -15,7 +21,23 @@ declare class InteractionHelper {
     private beginDelayedDrag;
     private handleNativeDragStart;
     private handleTouchMove;
-    private translateDragTargetBlock;
+    private getCurrentAndStartCoordinates;
+    private handleSwipe;
+    private activateSwiping;
+    private deactivateSwiping;
+    private getCurrentTouchedBlocks;
+    private shouldBeSwiping;
+    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;
@@ -28,5 +50,11 @@ declare class InteractionHelper {
     private submitReposition;
     private getEventCoordinate;
     private getDragStartCoordinate;
+    private setDragStartCoordinate;
+    private getDragCurrentCoordinate;
+    private setDragCurrentCoordinate;
+    private getCurrentScrollY;
+    private setCurrentScrollY;
+    private isSwiping;
 }
 export default InteractionHelper;