@maas/vue-equipment 1.0.0-beta.2 → 1.0.0-beta.21

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

@@ -1,34 +1,56 @@
-import { ref, toValue, nextTick } from "vue";
+import {
+  ref,
+  toRefs,
+  computed,
+  toValue,
+  nextTick
+} from "vue";
 import { computedWithControl } from "@vueuse/core";
 import { interpolate } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 import { defu } from "defu";
+import { useDraggableState } from "./useDraggableState.mjs";
 export function useDraggableSnap(args) {
-  const { id, draggedY, draggedX, elRect, wrapperRect, animation, snapPoints } = args;
-  const activeSnapPoint = ref(void 0);
+  const { id, animation, snapPoints } = args;
+  const { initializeState } = useDraggableState(toValue(id));
+  const state = initializeState();
+  const {
+    lastDraggedX,
+    lastDraggedY,
+    draggedX,
+    draggedY,
+    elRect,
+    wrapperRect,
+    activeSnapPoint
+  } = toRefs(state);
+  const interpolationIdX = ref(void 0);
+  const interpolationIdY = ref(void 0);
+  const mappedActiveSnapPoint = computed(() => {
+    if (!activeSnapPoint.value) {
+      return void 0;
+    }
+    return mapSnapPoint(activeSnapPoint.value);
+  });
   const mappedSnapPoints = computedWithControl(
     () => toValue(wrapperRect),
     () => {
       const mapped = toValue(snapPoints).map((snapPoint) => {
         return mapSnapPoint(snapPoint);
       }).filter((snapPoint) => snapPoint !== void 0);
-      return mapped;
+      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;
-        },
-        {}
-      );
+      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;
     }
   );
@@ -45,52 +67,65 @@ export function useDraggableSnap(args) {
     const mappedSnapPoint = typeof snapPoint === "string" ? [snapPoint] : snapPoint;
     const [position, offset] = mappedSnapPoint;
     const mappedOffset = defu(offset, { x: 0, y: 0 });
+    let x = 0;
+    let 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
-        };
+      case "top-left": {
+        x = mappedOffset.x;
+        y = mappedOffset.y;
+        break;
+      }
+      case "top": {
+        x = wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2;
+        y = mappedOffset.y;
+        break;
+      }
+      case "top-right": {
+        x = wrapperRect.value.width - mappedOffset.x - elRect.value.width;
+        y = mappedOffset.y;
+        break;
+      }
+      case "left": {
+        x = mappedOffset.x;
+        y = wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2;
+        break;
+      }
+      case "center": {
+        x = wrapperRect.value.width / 2 - elRect.value.width / 2 + mappedOffset.x;
+        y = wrapperRect.value.height / 2 - elRect.value.height / 2 + mappedOffset.y;
+        break;
+      }
+      case "right": {
+        x = wrapperRect.value.width - mappedOffset.x - elRect.value.width;
+        y = wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2;
+        break;
+      }
+      case "bottom-left": {
+        x = mappedOffset.x;
+        y = wrapperRect.value.height + mappedOffset.y - elRect.value.height;
+        break;
+      }
+      case "bottom": {
+        x = wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2;
+        y = wrapperRect.value.height - mappedOffset.y - elRect.value.height;
+        break;
+      }
+      case "bottom-right": {
+        x = wrapperRect.value.width - mappedOffset.x - elRect.value.width;
+        y = wrapperRect.value.height - mappedOffset.y - elRect.value.height;
+        break;
+      }
+    }
+    return { x: Math.round(x), y: Math.round(y) };
+  }
+  function cancelInterpolation() {
+    if (interpolationIdY.value) {
+      cancelAnimationFrame(interpolationIdY.value);
+      interpolationIdY.value = void 0;
+    }
+    if (interpolationIdX.value) {
+      cancelAnimationFrame(interpolationIdX.value);
+      interpolationIdX.value = void 0;
     }
   }
   function interpolateDragged(args2) {
@@ -102,19 +137,27 @@ export function useDraggableSnap(args) {
     } = args2;
     const snapPoint = snapPointsMap.value[`x${x}y${y}`];
     emitter.emit("beforeSnap", { id: toValue(id), snapPoint });
-    interpolate({
+    cancelInterpolation();
+    interpolationIdY.value = interpolate({
       from: draggedY.value,
       to: y,
       duration,
       easing,
-      callback: (value) => {
+      callback(value) {
         draggedY.value = value;
         if (y > x && draggedY.value === y) {
           emitter.emit("afterSnap", { id: toValue(id), snapPoint });
         }
+        if (draggedY.value === y) {
+          lastDraggedY.value = y;
+          interpolationIdY.value = void 0;
+        }
+      },
+      interpolationIdCallback(id2) {
+        interpolationIdY.value = id2;
       }
     });
-    interpolate({
+    interpolationIdX.value = interpolate({
       from: draggedX.value,
       to: x,
       duration,
@@ -124,6 +167,13 @@ export function useDraggableSnap(args) {
         if (x >= y && draggedX.value === x) {
           emitter.emit("afterSnap", { id: toValue(id), snapPoint });
         }
+        if (draggedX.value === x) {
+          lastDraggedX.value = x;
+          interpolationIdX.value = void 0;
+        }
+      },
+      interpolationIdCallback(id2) {
+        interpolationIdX.value = id2;
       }
     });
   }
@@ -139,15 +189,18 @@ export function useDraggableSnap(args) {
           duration
         });
       } else {
+        cancelInterpolation();
         draggedX.value = mappedSnapPoint.x;
         draggedY.value = mappedSnapPoint.y;
+        lastDraggedX.value = draggedX.value;
+        lastDraggedY.value = draggedY.value;
       }
     }
     activeSnapPoint.value = snapPoint;
   }
   return {
+    mappedActiveSnapPoint,
     mappedSnapPoints,
-    activeSnapPoint,
     snapPointsMap,
     mapSnapPoint,
     interpolateDragged,

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

@@ -1,5 +1,5 @@
 import { ref, reactive, toValue } from "vue";
-const drawerStateStore = ref([]);
+const draggableStateStore = ref([]);
 export function useDraggableState(id) {
   function createState(id2) {
     const state = {
@@ -16,24 +16,25 @@ export function useDraggableState(id) {
       draggedX: 0,
       draggedY: 0,
       elRect: void 0,
-      wrapperRect: void 0
+      wrapperRect: void 0,
+      activeSnapPoint: void 0
     };
     return reactive(state);
   }
   function addState(id2) {
     const state = createState(id2);
-    drawerStateStore.value = [...drawerStateStore.value, state];
+    draggableStateStore.value = [...draggableStateStore.value, state];
     return state;
   }
   function initializeState() {
-    let state = drawerStateStore.value.find((entry) => {
+    let state = draggableStateStore.value.find((entry) => {
       return entry.id === id;
     });
     if (!state) state = addState(toValue(id));
     return state;
   }
   function deleteState() {
-    drawerStateStore.value = drawerStateStore.value.filter(
+    draggableStateStore.value = draggableStateStore.value.filter(
       (x) => x.id !== id
     );
   }

package/dist/plugins/MagicDraggable/src/types/index.d.ts

@@ -1,5 +1,5 @@
 import type { RequireAll } from '@maas/vue-equipment/utils';
-type Position = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+type Position = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
 export type Coordinates = {
     x: number;
     y: number;
@@ -53,6 +53,7 @@ export interface DraggableState {
     draggedY: number;
     elRect: DOMRect | undefined;
     wrapperRect: DOMRect | undefined;
+    activeSnapPoint: DraggableSnapPoint | undefined;
 }
 export type DraggableEvents = {
     beforeSnap: {

package/dist/plugins/MagicDraggable/src/utils/defaultOptions.mjs

@@ -16,7 +16,7 @@ const defaultOptions = {
     }
   },
   initial: {
-    snapPoint: "center"
+    snapPoint: "top-left"
   },
   disabled: false
 };

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

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