@maas/vue-equipment 1.1.0 → 1.2.0

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

@@ -7,30 +7,13 @@ import {
   toValue,
   watch
 } from "vue";
-import {
-  unrefElement,
-  useEventListener,
-  useResizeObserver,
-  useThrottleFn
-} from "@vueuse/core";
-import {
-  cancelEdgeNavigation,
-  convertToPixels,
-  guardedReleasePointerCapture,
-  guardedSetPointerCapture,
-  isAndroid,
-  isIOS,
-  isWithinRange,
-  lockSelection,
-  snapCommit,
-  snapRelease
-} 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({
@@ -39,94 +22,27 @@ export function useTrayDrag(args) {
   });
   const { initializeState } = useTrayState(toValue(id));
   const state = initializeState();
-  const { clampWithOvershoot, isVertical, flattenSnapPoints } = useTrayUtils();
+  const { flattenSnapPoints, isDraggableSide } = useTrayUtils();
   const emitter = useMagicEmitter();
   const {
     dimension,
     contentExtent,
-    maxInset,
     mapSnapPoint,
     mappedSnapPoints,
-    mappedRanges,
-    rangeAt,
     snapPointAt,
-    restingInset,
     isSnapTarget,
-    findSnapTarget,
-    interpolateDragged,
     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 ? snapPointAt(side, points[0]) : void 0;
   }
-  let lastPendingTarget = void 0;
-  let heldRangeSnap = false;
-  let flicked = false;
-  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 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";
-  }
-  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);
@@ -199,315 +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 = 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() {
-    releaseSelection?.();
-    releaseSelection = void 0;
-    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);
-    }
-    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)) {
-        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);
-    }
-    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)) {
-        releaseSnapDrag(side);
-      } else {
-        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;
-    heldRangeSnap = false;
-    flicked = false;
-    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)) {
@@ -584,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();
@@ -601,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();
@@ -630,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 {};