@maas/vue-equipment 1.0.1 → 1.2.0

package/dist/plugins/MagicTray/src/composables/private/useTrayGesture.mjs

@@ -0,0 +1,426 @@
+import { computed, onScopeDispose, readonly, ref, toValue, watch } from "vue";
+import { useEventListener } from "@vueuse/core";
+import {
+  cancelEdgeNavigation,
+  guardedReleasePointerCapture,
+  guardedSetPointerCapture,
+  isAndroid,
+  isIOS,
+  isWithinRange,
+  lockSelection,
+  snapCommit,
+  snapRelease
+} from "@maas/vue-equipment/utils";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useTraySnap } from "./useTraySnap.mjs";
+import { SIDES, useTrayUtils } from "./useTrayUtils.mjs";
+export function useTrayGesture(args) {
+  const { id, state, selectionLock = "press", preventEdgeNavigation } = args;
+  const { clampWithOvershoot, isVertical, isDraggableSide } = useTrayUtils();
+  const emitter = useMagicEmitter();
+  const {
+    maxInset,
+    mappedSnapPoints,
+    mappedRanges,
+    rangeAt,
+    snapPointAt,
+    restingInset,
+    findSnapTarget,
+    interpolateDragged
+  } = useTraySnap({ id, state });
+  let lastPendingTarget = void 0;
+  let heldRangeSnap = false;
+  let flicked = false;
+  let cancelPointerup = void 0;
+  let cancelPointermove = void 0;
+  let cancelPointercancel = void 0;
+  let cancelTouchmove = void 0;
+  let cancelTouchend = void 0;
+  let cancelTouchcancel = void 0;
+  let pointerdownTarget = null;
+  let releaseSelection = void 0;
+  const threshold = computed(() => state.options.threshold);
+  const disabled = computed(() => state.options.disabled);
+  const snapMode = computed(() => state.options.snap.mode);
+  const dragMode = computed(() => state.options.drag.mode);
+  const active = ref(false);
+  const hasDragged = computed(() => {
+    const sides = state.draggingSide ? [state.draggingSide] : SIDES;
+    return sides.some(
+      (side) => !isWithinRange({
+        input: state.dragged[side],
+        base: state.lastDragged[side],
+        threshold: toValue(threshold).lock
+      })
+    );
+  });
+  function lockSelectionOnce() {
+    releaseSelection ??= lockSelection();
+  }
+  function canBegin(side) {
+    return !state.dragging && !toValue(disabled) && state.elRect !== void 0 && isDraggableSide({ snapPoints: state.options.snapPoints, side });
+  }
+  function dragBounds(side) {
+    const points = mappedSnapPoints(side);
+    const geometricMax = maxInset(side);
+    if (!points.length) {
+      return { min: 0, max: geometricMax };
+    }
+    return {
+      min: Math.max(0, points[0]),
+      max: Math.min(points[points.length - 1], geometricMax)
+    };
+  }
+  function snapDrag(side) {
+    return {
+      points: mappedSnapPoints(side),
+      ranges: mappedRanges(side),
+      mode: snapMode.value,
+      rest: state.snapped[side],
+      start: state.lastDragged[side],
+      position: state.dragged[side]
+    };
+  }
+  function settleTarget(side) {
+    const target = snapRelease({
+      ...snapDrag(side),
+      committed: state.interpolateTo,
+      flicked,
+      tapped: !hasDragged.value
+    });
+    return restingInset(side, target);
+  }
+  function isSnapDrag(side) {
+    return typeof dragMode.value === "string" ? dragMode.value === "snap" : (dragMode.value?.[side] ?? "free") === "snap";
+  }
+  function computeInset(side, coord) {
+    let newInset = 0;
+    switch (side) {
+      case "top":
+        newInset = coord - state.origin;
+        break;
+      case "bottom":
+        newInset = state.origin - coord;
+        break;
+      case "left":
+        newInset = coord - state.origin;
+        break;
+      case "right":
+        newInset = state.origin - coord;
+        break;
+    }
+    const { min, max } = dragBounds(side);
+    return clampWithOvershoot(
+      newInset,
+      min,
+      max,
+      state.overshoot.outer[side],
+      state.overshoot.inner
+    );
+  }
+  function setDragged(side, coord) {
+    const newInset = computeInset(side, coord);
+    if (newInset === state.dragged[side]) {
+      return;
+    }
+    const prev = state.dragged[side];
+    state.relDirection[side] = newInset < prev ? "below" : "above";
+    state.dragged[side] = newInset;
+  }
+  function snapDragged(side, coord) {
+    const inset = computeInset(side, coord);
+    const target = findSnapTarget(side, inset);
+    if (target === void 0 || target === state.snapped[side]) {
+      return;
+    }
+    state.dragged[side] = target;
+    state.snapped[side] = target;
+    state.activeSnapPoint[side] = snapPointAt(side, target);
+    heldRangeSnap = !mappedSnapPoints(side).includes(target);
+    if (!heldRangeSnap) {
+      emitSnap(side);
+    }
+  }
+  function releaseSnapDrag(side) {
+    if (heldRangeSnap) {
+      emitSnap(side);
+    }
+    heldRangeSnap = false;
+  }
+  function emitSnap(side) {
+    const point = state.activeSnapPoint[side];
+    if (point === void 0) {
+      return;
+    }
+    emitter.emit("beforeSnap", {
+      id: toValue(id),
+      snapPoint: { side, point }
+    });
+    emitter.emit("afterSnap", {
+      id: toValue(id),
+      snapPoint: { side, point }
+    });
+  }
+  function checkPosition(side) {
+    const direction = state.relDirection[side];
+    state.interpolateTo = snapCommit({
+      ...snapDrag(side),
+      distance: toValue(threshold).distance,
+      flicked,
+      flickDirection: direction === "absolute" ? void 0 : direction
+    });
+  }
+  function emitWillSnapTo(side) {
+    const target = settleTarget(side);
+    const isPoint = mappedSnapPoints(side).includes(target);
+    const pending = !isPoint && rangeAt(side, target)?.range || target;
+    if (pending === lastPendingTarget) {
+      return;
+    }
+    lastPendingTarget = pending;
+    const snapPoint = snapPointAt(side, target);
+    if (snapPoint === void 0) {
+      return;
+    }
+    emitter.emit("willSnapTo", {
+      id: toValue(id),
+      side,
+      snapPoint
+    });
+  }
+  function checkMomentum(side) {
+    const elapsed = Date.now() - state.dragStart.getTime();
+    const distance = Math.abs(state.dragged[side] - state.lastDragged[side]);
+    const velocity = elapsed && distance ? distance / elapsed : 0;
+    flicked = velocity > toValue(threshold).momentum;
+  }
+  function resetListeners() {
+    cancelTouchmove?.();
+    cancelTouchend?.();
+    cancelTouchcancel?.();
+    cancelPointerup?.();
+    cancelPointermove?.();
+    cancelPointercancel?.();
+  }
+  function resetDragState() {
+    const side = state.draggingSide;
+    if (side) {
+      state.lastDragged[side] = state.snapped[side];
+    }
+    releaseSelection?.();
+    releaseSelection = void 0;
+    active.value = false;
+    state.dragging = false;
+    state.draggingSide = void 0;
+    state.interpolateTo = void 0;
+  }
+  function settle(side) {
+    const target = settleTarget(side);
+    if (target !== state.snapped[side] || state.interpolateTo !== void 0) {
+      state.snapped[side] = target;
+      state.activeSnapPoint[side] = snapPointAt(side, target);
+    }
+    interpolateDragged({ side, to: target });
+  }
+  function onPointermove(e) {
+    if (e.isTrusted && !e.isPrimary) {
+      return;
+    }
+    const side = state.draggingSide;
+    if (!side) {
+      return;
+    }
+    e.stopImmediatePropagation();
+    e.stopPropagation();
+    const coord = isVertical(side) ? e.clientY : e.clientX;
+    if (isSnapDrag(side)) {
+      snapDragged(side, coord);
+    } else {
+      setDragged(side, coord);
+      checkMomentum(side);
+      checkPosition(side);
+      emitWillSnapTo(side);
+    }
+    if (hasDragged.value) {
+      lockSelectionOnce();
+    }
+    emitter.emit("drag", {
+      id: toValue(id),
+      side,
+      value: state.dragged[side]
+    });
+  }
+  function onPointerup(e) {
+    const side = state.draggingSide;
+    if (side) {
+      if (isSnapDrag(side)) {
+        releaseSnapDrag(side);
+      } else {
+        settle(side);
+      }
+      emitter.emit("afterDrag", {
+        id: toValue(id),
+        side,
+        value: state.dragged[side]
+      });
+    }
+    resetDragState();
+    resetListeners();
+    guardedReleasePointerCapture({ event: e, element: pointerdownTarget });
+  }
+  function onTouchmove(e) {
+    const side = state.draggingSide;
+    if (!side) {
+      return;
+    }
+    const firstTouch = e.touches[0];
+    if (!firstTouch) {
+      return;
+    }
+    e.stopImmediatePropagation();
+    e.stopPropagation();
+    if (hasDragged.value) {
+      e.preventDefault();
+    }
+    const coord = isVertical(side) ? firstTouch.clientY : firstTouch.clientX;
+    if (isSnapDrag(side)) {
+      snapDragged(side, coord);
+    } else {
+      setDragged(side, coord);
+      checkMomentum(side);
+      checkPosition(side);
+      emitWillSnapTo(side);
+    }
+    if (hasDragged.value) {
+      lockSelectionOnce();
+    }
+    emitter.emit("drag", {
+      id: toValue(id),
+      side,
+      value: state.dragged[side]
+    });
+  }
+  function onTouchend() {
+    const side = state.draggingSide;
+    if (side) {
+      if (isSnapDrag(side)) {
+        releaseSnapDrag(side);
+      } else {
+        settle(side);
+      }
+      emitter.emit("afterDrag", {
+        id: toValue(id),
+        side,
+        value: state.dragged[side]
+      });
+    }
+    resetDragState();
+    resetListeners();
+  }
+  function beginDrag(side, coord, target) {
+    active.value = true;
+    state.dragging = true;
+    state.draggingSide = side;
+    state.interpolateTo = void 0;
+    state.dragged[side] += state.magnetic[side];
+    state.magnetic[side] = 0;
+    state.lastDragged[side] = state.dragged[side];
+    lastPendingTarget = void 0;
+    heldRangeSnap = false;
+    flicked = false;
+    pointerdownTarget = target;
+    if (selectionLock === "press") {
+      lockSelectionOnce();
+    }
+    switch (side) {
+      case "top":
+      case "left":
+        state.origin = coord - state.dragged[side];
+        break;
+      case "bottom":
+      case "right":
+        state.origin = coord + state.dragged[side];
+        break;
+    }
+    state.dragStart = /* @__PURE__ */ new Date();
+    emitter.emit("beforeDrag", {
+      id: toValue(id),
+      side,
+      value: state.dragged[side]
+    });
+  }
+  function onCancel() {
+    const side = state.draggingSide;
+    if (active.value && side) {
+      interpolateDragged({ side, to: state.snapped[side] });
+      resetDragState();
+    }
+    resetListeners();
+  }
+  function onPointerdown(side, e) {
+    if (!canBegin(side)) {
+      return;
+    }
+    const coord = isVertical(side) ? e.clientY : e.clientX;
+    const target = e.target instanceof Element ? e.target : null;
+    beginDrag(side, coord, target);
+    guardedSetPointerCapture({ event: e, element: target });
+    resetListeners();
+    cancelPointerup = useEventListener(document, "pointerup", onPointerup);
+    cancelPointercancel = useEventListener(
+      document,
+      "pointercancel",
+      onPointerup
+    );
+    cancelPointermove = useEventListener(
+      document,
+      "pointermove",
+      onPointermove,
+      {
+        passive: false
+      }
+    );
+    cancelTouchend = isIOS() || isAndroid() ? useEventListener(document, "touchend", onTouchend) : void 0;
+    cancelTouchcancel = isIOS() || isAndroid() ? useEventListener(document, "touchcancel", onTouchend) : void 0;
+    onPointermove(e);
+  }
+  function onTouchstart(side, e) {
+    if (toValue(preventEdgeNavigation)) {
+      cancelEdgeNavigation({ event: e });
+    }
+    if (!isAndroid() || !canBegin(side)) {
+      return;
+    }
+    const firstTouch = e.touches[0];
+    if (!firstTouch) {
+      return;
+    }
+    e.stopImmediatePropagation();
+    e.stopPropagation();
+    const coord = isVertical(side) ? firstTouch.clientY : firstTouch.clientX;
+    beginDrag(side, coord, e.target instanceof Element ? e.target : null);
+    cancelTouchmove?.();
+    cancelTouchmove = useEventListener(document, "touchmove", onTouchmove, {
+      passive: false
+    });
+    cancelTouchend?.();
+    cancelTouchend = useEventListener(document, "touchend", onTouchend, {
+      passive: false
+    });
+    cancelTouchcancel?.();
+    cancelTouchcancel = useEventListener(document, "touchcancel", onTouchend);
+    onTouchmove(e);
+  }
+  watch(disabled, (value) => {
+    if (value) {
+      onCancel();
+    }
+  });
+  onScopeDispose(onCancel, true);
+  return {
+    active: readonly(active),
+    hasDragged,
+    onPointerdown,
+    onTouchstart
+  };
+}

package/dist/plugins/MagicTray/src/composables/private/useTrayMagnetism.mjs

@@ -5,18 +5,15 @@ import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useEasings } from "@maas/vue-equipment/composables/useEasings";
 import { useTraySnap } from "./useTraySnap.mjs";
-const SIDES = ["top", "right", "bottom", "left"];
-const EPSILON = 0.5;
+import { SIDES, useTrayUtils } from "./useTrayUtils.mjs";
 export function useTrayMagnetism(args) {
   const { id, elRef, handleRefs, state } = args;
   const { throwError } = useMagicError({
     prefix: "MagicTray",
     source: "useTrayMagnetism"
   });
-  const { mapSnapPoint, mappedSnapPoints, maxInset } = useTraySnap({
-    id,
-    state
-  });
+  const { maxInset } = useTraySnap({ id, state });
+  const { flattenSnapPoints } = useTrayUtils();
   const emitter = useMagicEmitter();
   const easings = useEasings();
   const magnetism = computed(() => state.options.magnetism);
@@ -40,29 +37,6 @@ export function useTrayMagnetism(args) {
   const enabled = computed(
     () => magneticSides.value.length > 0 && !disabled.value
   );
-  const magneticPoints = computed(
-    () => {
-      const result = {
-        top: [],
-        right: [],
-        bottom: [],
-        left: []
-      };
-      for (const side of magneticSides.value) {
-        const config = sideConfig(side);
-        if (!config || !mappedSnapPoints(side).length) {
-          continue;
-        }
-        result[side] = Object.entries(config).map(([key, direction]) => ({
-          inset: mapSnapPoint(side, coercePoint(key)),
-          direction
-        })).filter(
-          (point) => point.inset === 0 || !!point.inset && !Number.isNaN(point.inset)
-        );
-      }
-      return result;
-    }
-  );
   const progress = {
     top: 0,
     right: 0,
@@ -122,7 +96,7 @@ export function useTrayMagnetism(args) {
       if (!config) {
         continue;
       }
-      const configured = state.options.snapPoints[side] ?? [];
+      const configured = flattenSnapPoints(state.options.snapPoints[side] ?? []);
       for (const key of Object.keys(config)) {
         if (!configured.includes(coercePoint(key))) {
           throwError({
@@ -134,11 +108,11 @@ export function useTrayMagnetism(args) {
     }
   }
   function restDirection(side) {
-    const rest = state.snapped[side];
-    const match = magneticPoints.value[side].find(
-      (point) => Math.abs(point.inset - rest) < EPSILON
-    );
-    return match ? match.direction : null;
+    const point = state.activeSnapPoint[side];
+    if (point === void 0) {
+      return null;
+    }
+    return sideConfig(side)?.[point] ?? null;
   }
   function handleRect(side) {
     const handle = unrefElement(handleRefs[side].value?.[0]);
@@ -167,7 +141,7 @@ export function useTrayMagnetism(args) {
     if (settling[side]) {
       return;
     }
-    if (Math.abs(magneticOffset[side]) <= EPSILON) {
+    if (Math.round(magneticOffset[side]) === 0) {
       resetSide(side);
       return;
     }
@@ -344,7 +318,7 @@ export function useTrayMagnetism(args) {
       -state.dragged[side],
       maxInset(side) - state.dragged[side]
     );
-    if (Math.abs(target) > EPSILON) {
+    if (Math.round(target) !== 0) {
       cancelSettle(side);
       magneticOffset[side] = target;
       if (!isVirtual.value) {

package/dist/plugins/MagicTray/src/composables/private/useTrayProgress.mjs

@@ -2,7 +2,7 @@ import { toValue, watch } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { clampValue } from "@maas/vue-equipment/utils";
 import { useTraySnap } from "./useTraySnap.mjs";
-const SIDES = ["top", "right", "bottom", "left"];
+import { SIDES } from "./useTrayUtils.mjs";
 export function useTrayProgress(args) {
   const { id, state } = args;
   const emitter = useMagicEmitter();

package/dist/plugins/MagicTray/src/composables/private/useTraySnap.d.ts

@@ -1,5 +1,5 @@
 import type { MaybeRef } from 'vue';
-import type { MagicTraySide, MagicTraySnapPoint, TrayState } from '../../types/index.js';
+import type { MagicTraySide, MagicTraySnapPoint, MagicTraySnapRange, TrayState } from '../../types/index.js';
 type UseTraySnapArgs = {
     id: MaybeRef<string>;
     state: TrayState;
@@ -16,10 +16,11 @@ type InterpolateDraggedArgs = {
     duration?: number;
     easing?: (t: number) => number;
 };
-type FindClosestSnapPointArgs = {
-    side: MagicTraySide;
-    value: number;
-    direction?: 'below' | 'above' | 'absolute';
+type MappedSnapRange = {
+    min: number;
+    max: number;
+    momentum?: boolean;
+    range: MagicTraySnapRange;
 };
 export declare function useTraySnap(args: UseTraySnapArgs): {
     dimension: (side: MagicTraySide) => number;
@@ -28,8 +29,12 @@ export declare function useTraySnap(args: UseTraySnapArgs): {
     maxInset: (side: MagicTraySide) => number;
     mapSnapPoint: (side: MagicTraySide, snapPoint: MagicTraySnapPoint) => any;
     mappedSnapPoints: (side: MagicTraySide) => any[];
-    snapPointsMap: (side: MagicTraySide) => Record<number, MagicTraySnapPoint>;
-    findClosestSnapPoint: (args: FindClosestSnapPointArgs) => number | undefined;
+    mappedRanges: (side: MagicTraySide) => Array<MappedSnapRange>;
+    rangeAt: (side: MagicTraySide, inset: number) => any;
+    snapPointAt: (side: MagicTraySide, inset: number) => MagicTraySnapPoint | undefined;
+    restingInset: (side: MagicTraySide, inset: number) => any;
+    isSnapTarget: (side: MagicTraySide, snapPoint: MagicTraySnapPoint) => boolean;
+    findSnapTarget: (side: MagicTraySide, inset: number) => any;
     interpolateDragged: (args: InterpolateDraggedArgs) => void;
     snapTo: (args: SnapToArgs) => Promise<void>;
 };