@maas/vue-equipment 0.26.5 → 0.27.0

package/dist/plugins/MagicDraggable/index.mjs

@@ -0,0 +1,8 @@
+import MagicDraggable from "./src/components/MagicDraggable.vue";
+import { useDraggableApi } from "./src/composables/useDraggableApi.mjs";
+const MagicDraggablePlugin = {
+  install: (app) => {
+    app.component("MagicDraggable", MagicDraggable);
+  }
+};
+export { MagicDraggablePlugin, MagicDraggable, useDraggableApi };

package/dist/plugins/MagicDraggable/nuxt.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@nuxt/schema").NuxtModule<import("@nuxt/schema").ModuleOptions>;
+export default _default;

package/dist/plugins/MagicDraggable/nuxt.mjs

@@ -0,0 +1,23 @@
+import {
+  defineNuxtModule,
+  createResolver,
+  addComponent,
+  addImports
+} from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicDraggable"
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    addComponent({
+      filePath: resolver.resolve("src/components/MagicDraggable.vue"),
+      name: "MagicDraggable",
+      global: true
+    });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicDraggable",
+      name: "useDraggableApi"
+    });
+  }
+});

package/dist/plugins/MagicDraggable/src/components/MagicDraggable.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    ref="drawerRef"
+    class="magic-draggable"
+    :id="toValue(id)"
+    :class="[
+      toValue(props.class),
+
+      {
+        '-dragging': dragging,
+        '-disabled': disabled,
+      },
+    ]"
+  >
+    <div class="magic-draggable__wrapper" ref="wrapperRef">
+      <component
+        :is="mappedOptions.tag"
+        ref="elRef"
+        class="magic-draggable__drag"
+        :style="style"
+        @pointerdown="guardedPointerdown"
+        @click="guardedClick"
+      >
+        <component v-if="component" v-bind="props" :is="component" />
+        <slot v-else />
+      </component>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  toValue,
+  onMounted,
+  type Component,
+  type MaybeRef,
+} from 'vue'
+import { defu } from 'defu'
+import { useDraggableDrag } from '../composables/private/useDraggableDrag'
+import { useDraggableState } from '../composables/private/useDraggableState'
+import { defaultOptions } from '../utils/defaultOptions'
+
+import type { DraggableOptions } from '../types'
+
+interface MagicDrawerProps {
+  id: MaybeRef<string>
+  class?: MaybeRef<string>
+  component?: Component
+  props?: Record<string, unknown>
+  options?: DraggableOptions
+}
+
+const props = withDefaults(defineProps<MagicDrawerProps>(), {
+  options: () => defaultOptions,
+})
+
+const mappedOptions = defu(props.options, defaultOptions)
+
+const elRef = ref<HTMLElement | undefined>(undefined)
+const wrapperRef = ref<HTMLDivElement | undefined>(undefined)
+
+const { findState } = useDraggableState(props.id)
+const { dragging } = findState()
+
+// Make sure this is reactive
+const disabled = computed(() => {
+  if (props.options.disabled === undefined) {
+    return defaultOptions.disabled
+  } else {
+    return props.options.disabled
+  }
+})
+
+const { snapPoints, animation, initial, threshold } = mappedOptions
+
+const { initialize, onPointerdown, onClick, style } = useDraggableDrag({
+  id: props.id,
+  elRef,
+  wrapperRef,
+  threshold,
+  snapPoints,
+  animation,
+  initial,
+})
+
+// Public functions
+function guardedPointerdown(event: PointerEvent) {
+  if (!disabled.value) {
+    onPointerdown(event)
+  }
+}
+
+function guardedClick(event: PointerEvent) {
+  if (!disabled.value) {
+    onClick(event)
+  }
+}
+
+onMounted(() => {
+  initialize()
+})
+</script>
+
+<style>
+:root{--magic-draggable-z-index:999;--magic-draggable-position:fixed;--magic-draggable-height:100%;--magic-draggable-width:100%;--magic-draggable-inset:0}.magic-draggable{background:transparent;border:none;color:inherit;height:var(--magic-draggable-height);inset:var(--magic-draggable-inset);padding:0;position:var(--magic-draggable-position);width:var(--magic-draggable-width);z-index:var(--magic-draggable-z-index)}.magic-draggable,.magic-draggable.-disabled{pointer-events:none}.magic-draggable__wrapper{display:block;height:100%;width:100%}.magic-draggable__drag{cursor:grab;display:inline-flex;height:auto;pointer-events:auto;position:relative;transform-origin:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:auto}.magic-draggable.-dragging .magic-draggable__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-draggable.-disabled .magic-draggable__drag{cursor:default}
+</style>

package/dist/plugins/MagicDraggable/src/components/MagicDraggable.vue.d.ts

@@ -0,0 +1,41 @@
+import { type Component, type MaybeRef } from 'vue';
+import type { DraggableOptions } from '../types';
+interface MagicDrawerProps {
+    id: MaybeRef<string>;
+    class?: MaybeRef<string>;
+    component?: Component;
+    props?: Record<string, unknown>;
+    options?: DraggableOptions;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicDrawerProps>, {
+    options: () => DraggableOptions;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicDrawerProps>, {
+    options: () => DraggableOptions;
+}>>>, {
+    options: DraggableOptions;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.d.ts

@@ -0,0 +1,18 @@
+import { type Ref, type MaybeRef } from 'vue';
+import { type DefaultOptions } from '../../utils/defaultOptions.js';
+type UseDraggableDragArgs = {
+    id: MaybeRef<string>;
+    elRef: Ref<HTMLElement | undefined>;
+    wrapperRef: Ref<HTMLDivElement | undefined>;
+    threshold: MaybeRef<DefaultOptions['threshold']>;
+    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
+    animation: MaybeRef<DefaultOptions['animation']>;
+    initial: MaybeRef<DefaultOptions['initial']>;
+};
+export declare function useDraggableDrag(args: UseDraggableDragArgs): {
+    initialize: () => Promise<void>;
+    onPointerdown: (e: PointerEvent) => void;
+    onClick: (e: MouseEvent) => void;
+    style: import("vue").ComputedRef<string>;
+};
+export {};

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.mjs

@@ -0,0 +1,307 @@
+import {
+  ref,
+  computed,
+  toValue,
+  nextTick,
+  watch
+} from "vue";
+import {
+  useEventListener,
+  unrefElement,
+  useResizeObserver,
+  useThrottleFn,
+  useIdle
+} from "@vueuse/core";
+import { useDraggableSnap } from "./useDraggableSnap.mjs";
+import { useDraggableState } from "./useDraggableState.mjs";
+import { isIOS } from "@maas/vue-equipment/utils";
+export function useDraggableDrag(args) {
+  const { id, elRef, wrapperRef, threshold, snapPoints, initial, animation } = args;
+  const { findState } = useDraggableState(toValue(id));
+  const {
+    dragStart,
+    dragging,
+    interpolateTo,
+    originX,
+    originY,
+    lastDraggedX,
+    lastDraggedY,
+    intermediateDraggedX,
+    intermediateDraggedY,
+    draggedX,
+    draggedY,
+    elRect,
+    wrapperRect
+  } = findState();
+  let cancelPointerup = void 0;
+  let cancelPointermove = void 0;
+  let cancelTouchend = void 0;
+  const momentumThresholdReached = ref(false);
+  const distanceThresholdReached = ref(false);
+  const style = computed(
+    () => `transform: translate3d(${draggedX.value}px, ${draggedY.value}px, 0)`
+  );
+  const {
+    snapTo,
+    activeSnapPoint,
+    mapSnapPoint,
+    mappedSnapPoints,
+    snapPointsMap,
+    interpolateDragged
+  } = useDraggableSnap({
+    elRect,
+    wrapperRect,
+    animation,
+    snapPoints,
+    draggedY,
+    draggedX
+  });
+  async function getSizes() {
+    elRect.value = unrefElement(elRef)?.getBoundingClientRect();
+    wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
+    await nextTick();
+  }
+  function setDragged({ x, y }) {
+    draggedX.value = x - originX.value;
+    draggedY.value = y - originY.value;
+  }
+  function resetStateAndListeners() {
+    dragging.value = false;
+    interpolateTo.value = void 0;
+    momentumThresholdReached.value = false;
+    distanceThresholdReached.value = false;
+    cancelTouchend?.();
+    cancelPointerup?.();
+    cancelPointermove?.();
+  }
+  function detectCollision() {
+    const childRect = toValue(elRect);
+    const parentRect = toValue(wrapperRect);
+    if (!childRect || !parentRect) {
+      return;
+    }
+    if (childRect.width > parentRect.width || childRect.height > parentRect.height) {
+      console.warn("MagicDraggable is too small for its content");
+      return;
+    }
+    interpolateTo.value = { x: draggedX.value, y: draggedY.value };
+    if (childRect.top < parentRect.top) {
+      interpolateTo.value = { x: interpolateTo.value?.x, y: 0 };
+    } else if (childRect.bottom > parentRect.bottom) {
+      interpolateTo.value = {
+        x: interpolateTo.value?.x,
+        y: parentRect.height - childRect.height
+      };
+    }
+    if (childRect.left < parentRect.left) {
+      interpolateTo.value = { x: 0, y: interpolateTo.value?.y };
+    } else if (childRect.right > parentRect.right) {
+      interpolateTo.value = {
+        x: parentRect.width - childRect.width,
+        y: interpolateTo.value?.y
+      };
+    }
+  }
+  function vectorBetweenCoordinates(a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const length = Math.sqrt(dx * dx + dy * dy);
+    if (length === 0) {
+      return { x: 0, y: 0 };
+    } else {
+      return { x: dx / length, y: dy / length };
+    }
+  }
+  function dotProduct(vectorA, vectorB) {
+    return vectorA.x * vectorB.x + vectorA.y * vectorB.y;
+  }
+  function calculateDistance(a, b) {
+    return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
+  }
+  function checkDistance() {
+    if (toValue(threshold).distance) {
+      const intermediateDraggedCoords = {
+        x: intermediateDraggedX.value,
+        y: intermediateDraggedY.value
+      };
+      const draggedCoords = { x: draggedX.value, y: draggedY.value };
+      const draggedDistance = calculateDistance(
+        intermediateDraggedCoords,
+        draggedCoords
+      );
+      if (draggedDistance < toValue(threshold).distance) {
+        return;
+      }
+    }
+    distanceThresholdReached.value = true;
+  }
+  function checkMomentum() {
+    if (dragStart.value && toValue(threshold).momentum) {
+      const intermediateDraggedCoords = {
+        x: intermediateDraggedX.value,
+        y: intermediateDraggedY.value
+      };
+      const draggedCoords = { x: draggedX.value, y: draggedY.value };
+      const draggedDistance = calculateDistance(
+        intermediateDraggedCoords,
+        draggedCoords
+      );
+      const dragTime = (/* @__PURE__ */ new Date()).getTime() - dragStart.value.getTime();
+      if (dragTime === 0) {
+        return;
+      }
+      const dragSpeed = draggedDistance / dragTime;
+      if (dragSpeed < toValue(threshold).momentum) {
+        return;
+      }
+    }
+    momentumThresholdReached.value = true;
+  }
+  function compareDistances(a, b) {
+    const draggedCoords = { x: draggedX.value, y: draggedY.value };
+    const distanceA = calculateDistance(a, draggedCoords);
+    const distanceB = calculateDistance(b, draggedCoords);
+    return distanceA < distanceB ? a : b;
+  }
+  function findSnapPointByVector() {
+    let bestDotProduct = -Infinity;
+    const intermediateDraggedCoords = {
+      x: intermediateDraggedX.value,
+      y: intermediateDraggedY.value
+    };
+    const draggedCoords = { x: draggedX.value, y: draggedY.value };
+    const lineVector = vectorBetweenCoordinates(
+      intermediateDraggedCoords,
+      draggedCoords
+    );
+    for (let i = 0; i < mappedSnapPoints.value.length; i++) {
+      const snapPoint = mappedSnapPoints.value[i];
+      const targetVector = vectorBetweenCoordinates(
+        intermediateDraggedCoords,
+        snapPoint
+      );
+      const currentDotProduct = dotProduct(lineVector, targetVector);
+      if (currentDotProduct > bestDotProduct) {
+        bestDotProduct = currentDotProduct;
+        interpolateTo.value = snapPoint;
+      } else if (currentDotProduct === bestDotProduct) {
+        if (!interpolateTo.value) {
+          interpolateTo.value = snapPoint;
+        } else {
+          const smallerDistance = compareDistances(
+            snapPoint,
+            interpolateTo.value
+          );
+          interpolateTo.value = smallerDistance;
+        }
+      }
+    }
+  }
+  function findClosestSnapPoint() {
+    const draggedCoords = { x: draggedX.value, y: draggedY.value };
+    const closestSnapPoint = mappedSnapPoints.value.reduce((a, b) => {
+      return calculateDistance(a, draggedCoords) < calculateDistance(b, draggedCoords) ? a : b;
+    });
+    return closestSnapPoint;
+  }
+  function onPointerup(_e) {
+    if (!momentumThresholdReached.value && distanceThresholdReached.value) {
+      interpolateTo.value = findClosestSnapPoint();
+    }
+    const { x, y } = interpolateTo.value || {};
+    if (x !== void 0 && y !== void 0) {
+      interpolateDragged({ x, y });
+    }
+    if (interpolateTo.value) {
+      const key = `x${interpolateTo.value.x}y${interpolateTo.value.y}`;
+      activeSnapPoint.value = snapPointsMap.value[key];
+    }
+    resetStateAndListeners();
+  }
+  function onPointermove(e) {
+    setDragged({ x: e.screenX, y: e.screenY });
+    getSizes();
+    detectCollision();
+    if (!distanceThresholdReached.value) {
+      checkDistance();
+    }
+    if (!momentumThresholdReached.value) {
+      checkMomentum();
+    }
+    if (!distanceThresholdReached.value && !momentumThresholdReached.value) {
+      interpolateTo.value = { x: lastDraggedX.value, y: lastDraggedY.value };
+      return;
+    }
+    if (toValue(snapPoints).length) {
+      findSnapPointByVector();
+    }
+  }
+  function onIdle() {
+    interpolateTo.value = findClosestSnapPoint();
+    if (distanceThresholdReached.value && momentumThresholdReached.value) {
+      intermediateDraggedX.value = draggedX.value;
+      intermediateDraggedY.value = draggedY.value;
+      distanceThresholdReached.value = false;
+      momentumThresholdReached.value = false;
+    }
+  }
+  function onPointerdown(e) {
+    if (dragging.value) {
+      return;
+    } else {
+      dragging.value = true;
+    }
+    intermediateDraggedX.value = draggedX.value;
+    intermediateDraggedY.value = draggedY.value;
+    lastDraggedX.value = draggedX.value;
+    lastDraggedY.value = draggedY.value;
+    cancelPointerup = useEventListener(document, "pointerup", onPointerup);
+    cancelPointermove = useEventListener(document, "pointermove", onPointermove);
+    cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
+    originX.value = e.screenX - draggedX.value;
+    originY.value = e.screenY - draggedY.value;
+    dragStart.value = /* @__PURE__ */ new Date();
+    onPointermove(e);
+  }
+  function onClick(e) {
+    e.preventDefault();
+  }
+  async function initialize() {
+    await getSizes();
+    if (elRect.value && wrapperRect.value) {
+      if (elRect.value.width > wrapperRect.value.width || elRect.value.height > wrapperRect.value.height) {
+        console.warn("MagicDraggable is too small for its content");
+        return;
+      }
+    }
+    await nextTick();
+    if (toValue(initial).snapPoint) {
+      const mappedSnapPoint = mapSnapPoint(toValue(initial).snapPoint);
+      if (mappedSnapPoint) {
+        draggedX.value = mappedSnapPoint.x;
+        draggedY.value = mappedSnapPoint.y;
+      }
+    }
+  }
+  useResizeObserver(wrapperRef, async () => {
+    useThrottleFn(async () => {
+      await getSizes();
+      if (activeSnapPoint.value) {
+        await snapTo({ snapPoint: activeSnapPoint.value, interpolate: false });
+        snapPointsMap.trigger();
+      }
+    }, 100)();
+  });
+  const { idle } = useIdle(toValue(threshold).idle);
+  watch(idle, (value) => {
+    if (value && dragging.value) {
+      onIdle();
+    }
+  });
+  return {
+    initialize,
+    onPointerdown,
+    onClick,
+    style
+  };
+}

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableSnap.d.ts

@@ -0,0 +1,34 @@
+import { type MaybeRef, type Ref } from 'vue';
+import { type DefaultOptions } from '../../utils/defaultOptions.js';
+import type { SnapPoint, Coordinates } from '../../types.js';
+type UseDraggableSnapArgs = {
+    elRect: Ref<DOMRect | undefined>;
+    wrapperRect: Ref<DOMRect | undefined>;
+    draggedY: Ref<number>;
+    draggedX: Ref<number>;
+    animation: MaybeRef<DefaultOptions['animation']>;
+    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
+};
+type InterpolateDraggedArgs = {
+    x: number;
+    y: number;
+    duration?: number;
+    easing?: (t: number) => number;
+};
+type SnapToArgs = {
+    snapPoint: SnapPoint;
+    interpolate?: boolean;
+    duration?: number;
+};
+export declare function useDraggableSnap(args: UseDraggableSnapArgs): {
+    mappedSnapPoints: import("@vueuse/core").ComputedRefWithControl<Coordinates[]>;
+    activeSnapPoint: Ref<("center" | "top-center" | "bottom-center" | "top-left" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-right") | ["center" | "top-center" | "bottom-center" | "top-left" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-right", offset?: {
+        x?: number | undefined;
+        y?: number | undefined;
+    } | undefined] | undefined>;
+    snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<string, SnapPoint>>;
+    mapSnapPoint: (snapPoint: SnapPoint) => Coordinates | undefined;
+    interpolateDragged: (args: InterpolateDraggedArgs) => void;
+    snapTo: (args: SnapToArgs) => Promise<void>;
+};
+export {};

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableSnap.mjs

@@ -0,0 +1,143 @@
+import { ref, toValue, nextTick } from "vue";
+import { computedWithControl } from "@vueuse/core";
+import { interpolate } from "@maas/vue-equipment/utils";
+import { defu } from "defu";
+export function useDraggableSnap(args) {
+  const { draggedY, draggedX, elRect, wrapperRect, animation, snapPoints } = args;
+  const activeSnapPoint = ref(void 0);
+  const mappedSnapPoints = computedWithControl(
+    () => toValue(wrapperRect),
+    () => {
+      const mapped = toValue(snapPoints).map((snapPoint) => {
+        return mapSnapPoint(snapPoint);
+      }).filter((snapPoint) => snapPoint !== void 0);
+      return mapped;
+    }
+  );
+  const snapPointsMap = computedWithControl(
+    () => toValue(snapPoints),
+    () => {
+      const mapped = toValue(snapPoints).reduce((acc, current) => {
+        const key = mapSnapPoint(current);
+        if (key) {
+          const mappedKey = `x${key.x}y${key.y}`;
+          acc[mappedKey] = current;
+        }
+        return acc;
+      }, {});
+      return mapped;
+    }
+  );
+  function mapSnapPoint(snapPoint) {
+    if (!wrapperRect.value) {
+      console.warn("Wrapper rect is not defined");
+      return void 0;
+    }
+    if (!elRect.value) {
+      console.warn("Element rect is not defined");
+      return void 0;
+    }
+    const mappedSnapPoint = typeof snapPoint === "string" ? [snapPoint] : snapPoint;
+    const [position, offset] = mappedSnapPoint;
+    const mappedOffset = defu(offset, { x: 0, y: 0 });
+    switch (position) {
+      case "top-left":
+        return {
+          x: mappedOffset.x,
+          y: mappedOffset.y
+        };
+      case "top-center":
+        return {
+          x: wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2,
+          y: mappedOffset.y
+        };
+      case "top-right":
+        return {
+          x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
+          y: mappedOffset.y
+        };
+      case "center-left":
+        return {
+          x: mappedOffset.x,
+          y: wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2
+        };
+      case "center":
+        return {
+          x: wrapperRect.value.width / 2 - elRect.value.width / 2 + mappedOffset.x,
+          y: wrapperRect.value.height / 2 - elRect.value.height / 2 + mappedOffset.y
+        };
+      case "center-right":
+        return {
+          x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
+          y: wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2
+        };
+      case "bottom-left":
+        return {
+          x: mappedOffset.x,
+          y: wrapperRect.value.height + mappedOffset.y - elRect.value.height
+        };
+      case "bottom-center":
+        return {
+          x: wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2,
+          y: wrapperRect.value.height - mappedOffset.y - elRect.value.height
+        };
+      case "bottom-right":
+        return {
+          x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
+          y: wrapperRect.value.height - mappedOffset.y - elRect.value.height
+        };
+    }
+  }
+  function interpolateDragged(args2) {
+    const {
+      x,
+      y,
+      duration = toValue(animation).snap?.duration,
+      easing = toValue(animation).snap?.easing
+    } = args2;
+    interpolate({
+      from: draggedY.value,
+      to: y,
+      duration,
+      easing,
+      callback: (value) => {
+        draggedY.value = value;
+      }
+    });
+    interpolate({
+      from: draggedX.value,
+      to: x,
+      duration,
+      easing,
+      callback: (value) => {
+        draggedX.value = value;
+      }
+    });
+  }
+  async function snapTo(args2) {
+    const { snapPoint, interpolate: interpolate2, duration } = args2;
+    await nextTick();
+    const mappedSnapPoint = mapSnapPoint(snapPoint);
+    if (mappedSnapPoint) {
+      if (interpolate2) {
+        interpolateDragged({
+          x: mappedSnapPoint.x,
+          y: mappedSnapPoint.y,
+          duration
+        });
+      } else {
+        draggedX.value = mappedSnapPoint.x;
+        draggedY.value = mappedSnapPoint.y;
+      }
+    }
+    activeSnapPoint.value = snapPoint;
+  }
+  return {
+    mappedSnapPoints,
+    activeSnapPoint,
+    snapPointsMap,
+    mapSnapPoint,
+    interpolateDragged,
+    snapTo
+  };
+}