@maas/vue-equipment 1.0.0-beta.71 → 1.0.0-beta.73

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.70",
+  "version": "1.0.0-beta.72",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -28,10 +28,6 @@ export function useTrayMagnetism(args) {
   const easing = computed(() => easings[magnetism.value.easing]);
   const disabled = computed(() => state.options.disabled);
   const animation = computed(() => state.options.animation);
-  function sideConfig(side) {
-    const { sides } = magnetism.value;
-    return sides ? sides[side] : void 0;
-  }
   const magneticSides = computed(() => {
     return SIDES.filter((side) => {
       const draggable = (state.options.snapPoints[side]?.length ?? 0) > 0;
@@ -109,6 +105,10 @@ export function useTrayMagnetism(args) {
   let lastX = 0;
   let lastY = 0;
   let cancelPointermove = void 0;
+  function sideConfig(side) {
+    const { sides } = magnetism.value;
+    return sides ? sides[side] : void 0;
+  }
   function coercePoint(key) {
     return key.endsWith("px") ? key : Number(key);
   }
@@ -136,14 +136,9 @@ export function useTrayMagnetism(args) {
     );
     return match ? match.direction : null;
   }
-  function handleHalfThickness(side) {
+  function handleRect(side) {
     const handle = unrefElement(handleRefs[side].value?.[0]);
-    if (!handle) {
-      return 0;
-    }
-    const rect = handle.getBoundingClientRect();
-    const size = side === "top" || side === "bottom" ? rect.height : rect.width;
-    return size / 2;
+    return handle ? handle.getBoundingClientRect() : null;
   }
   function cancelSettle(side) {
     if (settleId[side] !== void 0) {
@@ -158,6 +153,11 @@ export function useTrayMagnetism(args) {
       state.magnetic[side] = 0;
     }
   }
+  function disarm(side) {
+    armedDir[side] = null;
+    latched[side] = false;
+    resetSide(side);
+  }
   function settleSide(side) {
     if (settling[side]) {
       return;
@@ -185,9 +185,7 @@ export function useTrayMagnetism(args) {
   }
   function resetAll() {
     for (const side of SIDES) {
-      armedDir[side] = null;
-      latched[side] = false;
-      resetSide(side);
+      disarm(side);
     }
   }
   function axisOverflow(value, min, max) {
@@ -200,6 +198,147 @@ export function useTrayMagnetism(args) {
         return 0;
     }
   }
+  function normalizeRadius(radius) {
+    if (typeof radius === "number") {
+      return radius > 0 ? { start: radius, stop: 0, configured: true } : { start: void 0, stop: void 0, configured: false };
+    }
+    const { start, stop } = radius;
+    return { start, stop, configured: start !== void 0 || stop !== void 0 };
+  }
+  function measureAxis(side, x, y, rect, hRect) {
+    let perp = 0;
+    let overflow = 0;
+    let center = 0;
+    switch (side) {
+      case "top": {
+        const edge = rect.top + state.snapped.top;
+        perp = y - edge;
+        overflow = axisOverflow(x, rect.left, rect.right);
+        if (hRect) {
+          center = hRect.top + hRect.height / 2 - edge - state.magnetic.top;
+        }
+        break;
+      }
+      case "bottom": {
+        const edge = rect.bottom - state.snapped.bottom;
+        perp = edge - y;
+        overflow = axisOverflow(x, rect.left, rect.right);
+        if (hRect) {
+          center = edge - (hRect.top + hRect.height / 2) - state.magnetic.bottom;
+        }
+        break;
+      }
+      case "left": {
+        const edge = rect.left + state.snapped.left;
+        perp = x - edge;
+        overflow = axisOverflow(y, rect.top, rect.bottom);
+        if (hRect) {
+          center = hRect.left + hRect.width / 2 - edge - state.magnetic.left;
+        }
+        break;
+      }
+      case "right": {
+        const edge = rect.right - state.snapped.right;
+        perp = edge - x;
+        overflow = axisOverflow(y, rect.top, rect.bottom);
+        if (hRect) {
+          center = edge - (hRect.left + hRect.width / 2) - state.magnetic.right;
+        }
+        break;
+      }
+    }
+    return { perp, overflow, center };
+  }
+  function resolveBand(band, geo) {
+    const { pull, thickness, center } = geo;
+    if (band.configured) {
+      const stop = band.stop ?? pull;
+      const start = band.start ?? stop + (thickness || pull);
+      return { innerEdge: start, outerEdge: -start, span: start - stop };
+    }
+    const anchorHalf = thickness / 2;
+    return {
+      innerEdge: center + anchorHalf,
+      outerEdge: center - anchorHalf,
+      span: anchorHalf / 2
+    };
+  }
+  function updateSide(side, x, y, rect, band) {
+    const direction = restDirection(side);
+    if (!direction) {
+      disarm(side);
+      return;
+    }
+    const allowInner = direction === "inner" || direction === "both";
+    const allowOuter = direction === "outer" || direction === "both";
+    const hRect = handleRect(side);
+    const thickness = hRect ? side === "top" || side === "bottom" ? hRect.height : hRect.width : 0;
+    const pull = magnetism.value.pull > 0 ? magnetism.value.pull : thickness / 4;
+    pullPx[side] = pull;
+    if (pull <= 0) {
+      disarm(side);
+      return;
+    }
+    const { perp, overflow, center } = measureAxis(side, x, y, rect, hRect);
+    const { innerEdge, outerEdge, span } = resolveBand(band, {
+      pull,
+      thickness,
+      center
+    });
+    if (span <= 0) {
+      disarm(side);
+      return;
+    }
+    if (overflow === 0) {
+      switch (true) {
+        case (allowInner && perp >= innerEdge):
+          armedDir[side] = "inner";
+          break;
+        case (allowOuter && perp <= outerEdge):
+          armedDir[side] = "outer";
+          break;
+      }
+    }
+    const dir = armedDir[side];
+    if (!dir) {
+      resetSide(side);
+      return;
+    }
+    let t = 0;
+    let sign = 0;
+    switch (dir) {
+      case "inner":
+        t = clampValue((innerEdge - perp) / span, 0, 1);
+        sign = 1;
+        break;
+      case "outer":
+        t = clampValue((perp - outerEdge) / span, 0, 1);
+        sign = -1;
+        break;
+    }
+    switch (true) {
+      case overflow === 0:
+        latched[side] = t >= 1;
+        break;
+      case !latched[side]:
+        armedDir[side] = null;
+        resetSide(side);
+        return;
+    }
+    const magnitude = overflow === 0 ? easing.value(t) : 1;
+    const offset = sign * pull * magnitude;
+    const target = clampValue(
+      offset,
+      -state.dragged[side],
+      maxInset(side) - state.dragged[side]
+    );
+    if (Math.abs(target) > EPSILON) {
+      cancelSettle(side);
+      state.magnetic[side] = target;
+    } else {
+      settleSide(side);
+    }
+  }
   function update(x, y) {
     if (state.dragging || disabled.value) {
       resetAll();
@@ -210,99 +349,10 @@ export function useTrayMagnetism(args) {
       resetAll();
       return;
     }
-    const { pull: configuredPull, radius: configuredRadius } = magnetism.value;
+    const band = normalizeRadius(magnetism.value.radius);
     const rect = el.getBoundingClientRect();
     for (const side of magneticSides.value) {
-      const direction = restDirection(side);
-      if (!direction) {
-        armedDir[side] = null;
-        latched[side] = false;
-        resetSide(side);
-        continue;
-      }
-      const allowInner = direction === "inner" || direction === "both";
-      const allowOuter = direction === "outer" || direction === "both";
-      const anchorHalf = handleHalfThickness(side);
-      const radius = configuredRadius > 0 ? configuredRadius : anchorHalf / 2;
-      const pull = configuredPull > 0 ? configuredPull : anchorHalf / 2;
-      pullPx[side] = pull;
-      if (radius <= 0) {
-        armedDir[side] = null;
-        latched[side] = false;
-        resetSide(side);
-        continue;
-      }
-      let perp = 0;
-      let overflow = 0;
-      switch (side) {
-        case "top":
-          perp = y - (rect.top + state.snapped.top);
-          overflow = axisOverflow(x, rect.left, rect.right);
-          break;
-        case "bottom":
-          perp = rect.bottom - state.snapped.bottom - y;
-          overflow = axisOverflow(x, rect.left, rect.right);
-          break;
-        case "left":
-          perp = x - (rect.left + state.snapped.left);
-          overflow = axisOverflow(y, rect.top, rect.bottom);
-          break;
-        case "right":
-          perp = rect.right - state.snapped.right - x;
-          overflow = axisOverflow(y, rect.top, rect.bottom);
-          break;
-      }
-      if (overflow === 0) {
-        switch (true) {
-          case (allowInner && perp >= anchorHalf):
-            armedDir[side] = "inner";
-            break;
-          case (allowOuter && perp <= -anchorHalf):
-            armedDir[side] = "outer";
-            break;
-        }
-      }
-      const dir = armedDir[side];
-      if (!dir) {
-        resetSide(side);
-        continue;
-      }
-      let t = 0;
-      let sign = 0;
-      switch (dir) {
-        case "inner":
-          t = clampValue((anchorHalf - perp) / radius, 0, 1);
-          sign = 1;
-          break;
-        case "outer":
-          t = clampValue((anchorHalf + perp) / radius, 0, 1);
-          sign = -1;
-          break;
-      }
-      switch (true) {
-        case overflow === 0:
-          latched[side] = t >= 1;
-          break;
-        case !latched[side]:
-          armedDir[side] = null;
-          resetSide(side);
-          continue;
-      }
-      const magnitude = overflow === 0 ? easing.value(t) : 1;
-      const offset = sign * pull * magnitude;
-      const target = clampValue(
-        offset,
-        -state.dragged[side],
-        maxInset(side) - state.dragged[side]
-      );
-      switch (true) {
-        case Math.abs(target) > EPSILON:
-          cancelSettle(side);
-          state.magnetic[side] = target;
-          break;
-        default:
-          settleSide(side);
-      }
+      updateSide(side, x, y, rect, band);
     }
   }
   function onPointermove(e) {
@@ -342,6 +392,18 @@ export function useTrayMagnetism(args) {
     },
     { deep: true }
   );
+  watch(
+    () => ({ ...state.snapped }),
+    (next, prev) => {
+      for (const side of SIDES) {
+        if (next[side] !== prev[side]) {
+          armedDir[side] = null;
+          latched[side] = false;
+          settleSide(side);
+        }
+      }
+    }
+  );
   watch(
     () => [enabled.value, magnetism.value.sides, state.options.snapPoints],
     () => {

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

@@ -15,9 +15,13 @@ export type TraySnapPoints = Partial<Record<TraySide, TraySnapPoint[]>>;
 export type TrayMagneticDirection = 'inner' | 'outer' | 'both';
 export type TrayMagneticSide = Partial<Record<TraySnapPoint, TrayMagneticDirection>>;
 export type TrayMagneticSides = false | Partial<Record<TraySide, TrayMagneticSide>>;
+export type TrayMagneticRadius = number | {
+    start?: number;
+    stop?: number;
+};
 export interface TrayMagnetism {
     sides?: TrayMagneticSides;
-    radius?: number;
+    radius?: TrayMagneticRadius;
     pull?: number;
     easing?: EasingKey;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.71",
+  "version": "1.0.0-beta.73",
   "contributors": [
     {
       "name": "Robin Scholz",