@maas/vue-equipment 1.0.1 → 1.2.0

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

@@ -7,28 +7,13 @@ import {
   toValue,
   watch
 } from "vue";
-import {
-  unrefElement,
-  useEventListener,
-  useResizeObserver,
-  useThrottleFn
-} from "@vueuse/core";
-import {
-  cancelEdgeNavigation,
-  convertToPixels,
-  guardedReleasePointerCapture,
-  guardedSetPointerCapture,
-  isAndroid,
-  isIOS,
-  isWithinRange,
-  lockSelection
-} from "@maas/vue-equipment/utils";
+import { unrefElement, useResizeObserver, useThrottleFn } from "@vueuse/core";
+import { convertToPixels } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useTraySnap } from "./useTraySnap.mjs";
-import { useTrayUtils } from "./useTrayUtils.mjs";
+import { SIDES, useTrayUtils } from "./useTrayUtils.mjs";
 import { useTrayState } from "./useTrayState.mjs";
-const SIDES = ["top", "right", "bottom", "left"];
 export function useTrayDrag(args) {
   const { id, elRef } = args;
   const { logWarning } = useMagicError({
@@ -37,72 +22,27 @@ export function useTrayDrag(args) {
   });
   const { initializeState } = useTrayState(toValue(id));
   const state = initializeState();
-  const { clampWithOvershoot, isVertical } = useTrayUtils();
+  const { flattenSnapPoints, isDraggableSide } = useTrayUtils();
   const emitter = useMagicEmitter();
   const {
     dimension,
     contentExtent,
-    maxInset,
     mapSnapPoint,
     mappedSnapPoints,
-    snapPointsMap,
-    findClosestSnapPoint,
-    interpolateDragged,
+    snapPointAt,
+    isSnapTarget,
     snapTo
   } = useTraySnap({ id, state });
-  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 openSnapPoint(side) {
     const points = mappedSnapPoints(side);
-    return points.length ? snapPointsMap(side)[points[0]] : void 0;
+    return points.length ? snapPointAt(side, points[0]) : void 0;
   }
-  let lastPendingTarget = void 0;
-  let suppressClick = 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 resizeObserverEl = null;
-  let pointerdownTarget = void 0;
-  let releaseSelection = void 0;
   const draggableSides = computed(
-    () => SIDES.filter((side) => (state.options.snapPoints[side]?.length ?? 0) > 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 preventEdgeNavigation = computed(
-    () => state.options.preventEdgeNavigation
+    () => SIDES.filter(
+      (side) => isDraggableSide({ snapPoints: state.options.snapPoints, side })
+    )
   );
-  function snapReference(side) {
-    return snapMode.value === "step" ? state.lastDragged[side] : state.dragged[side];
-  }
-  function isSnapDrag(side) {
-    return typeof dragMode.value === "string" ? dragMode.value === "snap" : (dragMode.value?.[side] ?? "free") === "snap";
-  }
-  const hasDragged = computed(() => {
-    const side = state.draggingSide;
-    if (!side) {
-      return false;
-    }
-    return !isWithinRange({
-      input: state.dragged[side],
-      base: state.lastDragged[side],
-      threshold: toValue(threshold).lock
-    });
-  });
   const clipPath = computed(() => {
     const top = Math.max(0, state.dragged.top + state.magnetic.top);
     const right = Math.max(0, state.dragged.right + state.magnetic.right);
@@ -175,304 +115,6 @@ export function useTrayDrag(args) {
     state.overshoot.inner = innerPixels ?? 0;
     await nextTick();
   }
-  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 = findClosestSnapPoint({ side, value: inset });
-    if (target === void 0 || target === state.snapped[side]) {
-      return;
-    }
-    const snapPoint = snapPointsMap(side)[target];
-    state.dragged[side] = target;
-    state.snapped[side] = target;
-    state.activeSnapPoint[side] = snapPoint;
-    if (snapPoint || snapPoint === 0) {
-      emitter.emit("beforeSnap", {
-        id: toValue(id),
-        snapPoint: { side, point: snapPoint }
-      });
-      emitter.emit("afterSnap", {
-        id: toValue(id),
-        snapPoint: { side, point: snapPoint }
-      });
-    }
-  }
-  function checkPosition(side) {
-    const delta = state.dragged[side] - state.lastDragged[side];
-    if (Math.abs(delta) > toValue(threshold).distance) {
-      state.interpolateTo = findClosestSnapPoint({
-        side,
-        value: snapReference(side),
-        direction: delta < 0 ? "below" : "above"
-      });
-    } else {
-      state.interpolateTo = void 0;
-    }
-  }
-  function emitWillSnapTo(side) {
-    const target = state.interpolateTo ?? state.snapped[side];
-    if (target === lastPendingTarget) {
-      return;
-    }
-    lastPendingTarget = target;
-    const snapPoint = snapPointsMap(side)[target];
-    if (!snapPoint && snapPoint !== 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;
-    if (velocity > toValue(threshold).momentum) {
-      state.interpolateTo = findClosestSnapPoint({
-        side,
-        value: snapReference(side),
-        direction: state.relDirection[side]
-      });
-    }
-  }
-  function resetListeners() {
-    cancelTouchmove?.();
-    cancelTouchend?.();
-    cancelTouchcancel?.();
-    cancelPointerup?.();
-    cancelPointermove?.();
-    cancelPointercancel?.();
-  }
-  function resetDragState() {
-    releaseSelection?.();
-    releaseSelection = void 0;
-    state.dragging = false;
-    state.draggingSide = void 0;
-    state.interpolateTo = void 0;
-  }
-  function settle(side) {
-    if (state.interpolateTo || state.interpolateTo === 0) {
-      interpolateDragged({ side, to: state.interpolateTo });
-      state.snapped[side] = state.interpolateTo;
-      state.activeSnapPoint[side] = snapPointsMap(side)[state.interpolateTo];
-    } else {
-      interpolateDragged({ side, to: state.snapped[side] });
-    }
-  }
-  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);
-    }
-    emitter.emit("drag", {
-      id: toValue(id),
-      side,
-      value: state.dragged[side]
-    });
-  }
-  function onPointerup(e) {
-    const side = state.draggingSide;
-    if (side) {
-      suppressClick = hasDragged.value;
-      if (!isSnapDrag(side)) {
-        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);
-    }
-    emitter.emit("drag", {
-      id: toValue(id),
-      side,
-      value: state.dragged[side]
-    });
-  }
-  function onTouchend() {
-    const side = state.draggingSide;
-    if (side) {
-      suppressClick = hasDragged.value;
-      if (!isSnapDrag(side)) {
-        settle(side);
-      }
-      emitter.emit("afterDrag", {
-        id: toValue(id),
-        side,
-        value: state.dragged[side]
-      });
-    }
-    resetDragState();
-    resetListeners();
-  }
-  function beginDrag(side, coord, target) {
-    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;
-    suppressClick = false;
-    pointerdownTarget = target;
-    releaseSelection = lockSelection();
-    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 onHandlePointerdown(side, e) {
-    if (state.dragging || toValue(disabled)) {
-      return;
-    }
-    const coord = isVertical(side) ? e.clientY : e.clientX;
-    const target = e.target;
-    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 onHandleTouchstart(side, e) {
-    if (toValue(disabled)) {
-      return;
-    }
-    if (preventEdgeNavigation.value) {
-      cancelEdgeNavigation({ event: e });
-    }
-    if (!isAndroid() || state.dragging) {
-      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);
-    cancelTouchmove?.();
-    cancelTouchmove = useEventListener(document, "touchmove", onTouchmove, {
-      passive: false
-    });
-    cancelTouchend?.();
-    cancelTouchend = useEventListener(document, "touchend", onTouchend, {
-      passive: false
-    });
-    cancelTouchcancel?.();
-    cancelTouchcancel = useEventListener(document, "touchcancel", onTouchend);
-    onTouchmove(e);
-  }
-  function onHandleClick(e) {
-    if (suppressClick) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
-    suppressClick = false;
-  }
   async function snapToCallback(payload) {
     const { snapPoint } = payload;
     if (payload.id !== toValue(id) || typeof snapPoint !== "object" || Array.isArray(snapPoint)) {
@@ -484,6 +126,12 @@ export function useTrayDrag(args) {
       return;
     }
     await getSizes();
+    if (contentExtent(side) && !isSnapTarget(side, point)) {
+      logWarning(
+        `Cannot snap side "${side}" to ${point}, which is neither a snap point nor inside a range`
+      );
+      return;
+    }
     snapTo({
       side,
       snapPoint: point,
@@ -501,7 +149,14 @@ export function useTrayDrag(args) {
         pendingInitialSides.add(side);
         continue;
       }
-      const initial = state.options.initial.snapPoints?.[side] ?? openSnapPoint(side);
+      const configured = state.options.initial.snapPoints?.[side];
+      const isValid = configured === void 0 || isSnapTarget(side, configured);
+      if (!isValid) {
+        logWarning(
+          `initial.snapPoints.${side} (${configured}) is neither a snap point nor inside a range and is ignored`
+        );
+      }
+      const initial = (isValid ? configured : void 0) ?? openSnapPoint(side);
       if (initial === void 0) {
         continue;
       }
@@ -518,7 +173,7 @@ export function useTrayDrag(args) {
   }
   function validateSnapPoints() {
     for (const side of draggableSides.value) {
-      const points = state.options.snapPoints[side] ?? [];
+      const points = flattenSnapPoints(state.options.snapPoints[side] ?? []);
       const canOpen = points.some((point) => parseFloat(String(point)) === 0);
       const hasInitial = state.options.initial.snapPoints?.[side] !== void 0;
       if (!canOpen && !hasInitial) {
@@ -536,8 +191,7 @@ export function useTrayDrag(args) {
   function destroy() {
     emitter.off("snapTo", snapToCallback);
     resizeObserverEl?.stop();
-    resetDragState();
-    resetListeners();
+    state.elRect = void 0;
   }
   onMounted(async () => {
     await initialize();
@@ -553,14 +207,6 @@ export function useTrayDrag(args) {
       await applyInitial();
     }
   );
-  watch(disabled, (value) => {
-    if (value && state.draggingSide) {
-      const side = state.draggingSide;
-      interpolateDragged({ side, to: state.snapped[side] });
-      resetDragState();
-      resetListeners();
-    }
-  });
   resizeObserverEl = useResizeObserver(elRef, () => {
     useThrottleFn(async () => {
       await getSizes();
@@ -582,10 +228,6 @@ export function useTrayDrag(args) {
     draggableSides,
     clipPath,
     handleStyle,
-    hasDragged,
-    dimension,
-    onHandlePointerdown,
-    onHandleTouchstart,
-    onHandleClick
+    dimension
   };
 }

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

@@ -0,0 +1,16 @@
+import type { MaybeRef, MaybeRefOrGetter } from 'vue';
+import type { MagicTraySide, TrayState } from '../../types/index.js';
+type UseTrayGestureArgs = {
+    id: MaybeRef<string>;
+    state: TrayState;
+    selectionLock?: 'press' | 'drag';
+    preventEdgeNavigation: MaybeRefOrGetter<boolean>;
+};
+export declare function useTrayGesture(args: UseTrayGestureArgs): {
+    active: Readonly<import("vue").Ref<boolean, boolean>>;
+    hasDragged: import("vue").ComputedRef<boolean>;
+    onPointerdown: (side: MagicTraySide, e: PointerEvent) => void;
+    onTouchstart: (side: MagicTraySide, e: TouchEvent) => void;
+};
+export type UseTrayGestureReturn = ReturnType<typeof useTrayGesture>;
+export {};