motion-v 0.3.0 → 0.4.0

package/dist/es/features/events.mjs

@@ -1,53 +1,69 @@
-import { Feature as i } from "./feature.mjs";
-class h extends i {
+import { Feature } from "./feature.mjs";
+class EventFeature extends Feature {
   constructor() {
-    super(...arguments), this.handlers = {};
+    super(...arguments);
+    this.handlers = {};
   }
   mount() {
-    const r = this.state.getElement();
-    r && (this.handlers.motionstart = (s) => {
-      var t, e;
-      const n = s.detail.target;
-      (e = (t = this.state.getOptions()).onMotionStart) == null || e.call(t, n);
-    }, this.handlers.motioncomplete = (s) => {
-      var t, e;
-      const n = s.detail.target;
-      (e = (t = this.state.getOptions()).onMotionComplete) == null || e.call(t, n);
-    }, this.handlers.hoverstart = (s) => {
-      var t, e;
-      const n = s.detail;
-      (e = (t = this.state.getOptions()).onHoverStart) == null || e.call(t, n);
-    }, this.handlers.hoverend = (s) => {
-      var t, e;
-      const n = s.detail;
-      (e = (t = this.state.getOptions()).onHoverEnd) == null || e.call(t, n);
-    }, this.handlers.pressstart = (s) => {
-      var t, e;
-      const n = s.detail;
-      (e = (t = this.state.getOptions()).onPressStart) == null || e.call(t, n);
-    }, this.handlers.pressend = (s) => {
-      var t, e;
-      const n = s.detail;
-      (e = (t = this.state.getOptions()).onPressEnd) == null || e.call(t, n);
-    }, this.handlers.viewenter = (s) => {
-      var t, e;
-      const n = s.detail.target;
-      (e = (t = this.state.getOptions()).onViewEnter) == null || e.call(t, n);
-    }, this.handlers.viewleave = (s) => {
-      var t, e;
-      const n = s.detail.target;
-      (e = (t = this.state.getOptions()).onViewLeave) == null || e.call(t, n);
-    }, Object.entries(this.handlers).forEach(([s, n]) => {
-      r.addEventListener(s, n);
-    }));
+    const element = this.state.element;
+    if (!element)
+      return;
+    this.handlers.motionstart = (event) => {
+      var _a, _b;
+      const target = event.detail.target;
+      (_b = (_a = this.state.getOptions()).onMotionStart) == null ? void 0 : _b.call(_a, target);
+    };
+    this.handlers.motioncomplete = (event) => {
+      var _a, _b;
+      const target = event.detail.target;
+      (_b = (_a = this.state.getOptions()).onMotionComplete) == null ? void 0 : _b.call(_a, target);
+    };
+    this.handlers.hoverstart = (event) => {
+      var _a, _b;
+      const e = event.detail;
+      (_b = (_a = this.state.getOptions()).onHoverStart) == null ? void 0 : _b.call(_a, e);
+    };
+    this.handlers.hoverend = (event) => {
+      var _a, _b;
+      const e = event.detail;
+      (_b = (_a = this.state.getOptions()).onHoverEnd) == null ? void 0 : _b.call(_a, e);
+    };
+    this.handlers.pressstart = (event) => {
+      var _a, _b;
+      const e = event.detail;
+      (_b = (_a = this.state.getOptions()).onPressStart) == null ? void 0 : _b.call(_a, e);
+    };
+    this.handlers.pressend = (event) => {
+      var _a, _b;
+      const e = event.detail;
+      (_b = (_a = this.state.getOptions()).onPressEnd) == null ? void 0 : _b.call(_a, e);
+    };
+    this.handlers.viewenter = (event) => {
+      var _a, _b;
+      const target = event.detail.target;
+      (_b = (_a = this.state.getOptions()).onViewEnter) == null ? void 0 : _b.call(_a, target);
+    };
+    this.handlers.viewleave = (event) => {
+      var _a, _b;
+      const target = event.detail.target;
+      (_b = (_a = this.state.getOptions()).onViewLeave) == null ? void 0 : _b.call(_a, target);
+    };
+    Object.entries(this.handlers).forEach(([event, handler]) => {
+      element.addEventListener(event, handler);
+    });
   }
   unmount() {
-    const r = this.state.getElement();
-    r && Object.entries(this.handlers).forEach(([s, n]) => {
-      n && (r.removeEventListener(s, n), delete this.handlers[s]);
+    const element = this.state.element;
+    if (!element)
+      return;
+    Object.entries(this.handlers).forEach(([event, handler]) => {
+      if (handler) {
+        element.removeEventListener(event, handler);
+        delete this.handlers[event];
+      }
     });
   }
 }
 export {
-  h as EventFeature
+  EventFeature
 };

package/dist/es/features/feature-manager.mjs

@@ -1,28 +1,31 @@
-import { EventFeature as r } from "./events.mjs";
-import { SVGFeature as t } from "./svg.mjs";
-import { HoverGesture as o } from "./gestures/hover.mjs";
-import { PressGesture as u } from "./gestures/press.mjs";
-import { InViewGesture as n } from "./gestures/in-view.mjs";
-class p {
-  constructor(e) {
-    this.features = [], this.features = [
-      new o(e),
-      new u(e),
-      new n(e),
-      new t(e),
-      new r(e)
+import { EventFeature } from "./events.mjs";
+import { SVGFeature } from "./svg.mjs";
+import { LayoutFeature } from "./layout/layout.mjs";
+import { HoverGesture } from "./gestures/hover.mjs";
+import { PressGesture } from "./gestures/press.mjs";
+import { InViewGesture } from "./gestures/in-view.mjs";
+class FeatureManager {
+  constructor(state) {
+    this.features = [];
+    this.features = [
+      new HoverGesture(state),
+      new PressGesture(state),
+      new InViewGesture(state),
+      new SVGFeature(state),
+      new EventFeature(state),
+      new LayoutFeature(state)
     ];
   }
   mount() {
-    this.features.forEach((e) => e.mount());
+    this.features.forEach((feature) => feature.mount());
   }
   unmount() {
-    this.features.forEach((e) => e.unmount());
+    this.features.forEach((feature) => feature.unmount());
   }
   update() {
-    this.features.forEach((e) => e.update());
+    this.features.forEach((feature) => feature.update());
   }
 }
 export {
-  p as FeatureManager
+  FeatureManager
 };

package/dist/es/features/feature.mjs

@@ -1,10 +1,10 @@
-class s {
-  constructor(t) {
-    this.state = t;
+class Feature {
+  constructor(state) {
+    this.state = state;
   }
   update() {
   }
 }
 export {
-  s as Feature
+  Feature
 };

package/dist/es/features/gestures/base.mjs

@@ -1,14 +1,19 @@
-import { Feature as s } from "../feature.mjs";
-class r extends s {
+import { Feature } from "../feature.mjs";
+class BaseGesture extends Feature {
   updateGestureSubscriptions() {
-    const e = this.isActive();
-    e && !this.removeGestureSubscriptions ? this.removeGestureSubscriptions = this.subscribeEvents() : !e && this.removeGestureSubscriptions && (this.removeGestureSubscriptions(), this.removeGestureSubscriptions = void 0);
+    const isActive = this.isActive();
+    if (isActive && !this.removeGestureSubscriptions) {
+      this.removeGestureSubscriptions = this.subscribeEvents();
+    } else if (!isActive && this.removeGestureSubscriptions) {
+      this.removeGestureSubscriptions();
+      this.removeGestureSubscriptions = void 0;
+    }
   }
   unmount() {
-    var e;
-    (e = this.removeGestureSubscriptions) == null || e.call(this);
+    var _a;
+    (_a = this.removeGestureSubscriptions) == null ? void 0 : _a.call(this);
   }
 }
 export {
-  r as BaseGesture
+  BaseGesture
 };

package/dist/es/features/gestures/hover.mjs

@@ -1,23 +1,32 @@
-import { dispatchPointerEvent as i } from "../../utils/events.mjs";
-import { BaseGesture as u } from "./base.mjs";
-function o(s, r, e) {
-  return (t) => {
-    t.pointerType && t.pointerType !== "mouse" || (e(), i(s, r, t));
+import { dispatchPointerEvent } from "../../utils/events.mjs";
+import { BaseGesture } from "./base.mjs";
+function mouseEvent(element, name, action) {
+  return (event) => {
+    if (event.pointerType && event.pointerType !== "mouse")
+      return;
+    action();
+    dispatchPointerEvent(element, name, event);
   };
 }
-class a extends u {
+class HoverGesture extends BaseGesture {
   isActive() {
-    return !!this.state.getOptions().hover;
+    return Boolean(this.state.getOptions().hover);
   }
-  constructor(r) {
-    super(r), this.subscribeEvents = () => {
-      const e = this.state.getElement(), t = o(e, "hoverstart", () => {
-        this.state.setActive("hover", !0);
-      }), n = o(e, "hoverend", () => {
-        this.state.setActive("hover", !1);
+  constructor(state) {
+    super(state);
+    this.subscribeEvents = () => {
+      const element = this.state.element;
+      const onEnter = mouseEvent(element, "hoverstart", () => {
+        this.state.setActive("hover", true);
       });
-      return e.addEventListener("pointerenter", t), e.addEventListener("pointerleave", n), () => {
-        e.removeEventListener("pointerenter", t), e.removeEventListener("pointerleave", n);
+      const onLeave = mouseEvent(element, "hoverend", () => {
+        this.state.setActive("hover", false);
+      });
+      element.addEventListener("pointerenter", onEnter);
+      element.addEventListener("pointerleave", onLeave);
+      return () => {
+        element.removeEventListener("pointerenter", onEnter);
+        element.removeEventListener("pointerleave", onLeave);
       };
     };
   }
@@ -29,5 +38,5 @@ class a extends u {
   }
 }
 export {
-  a as HoverGesture
+  HoverGesture
 };

package/dist/es/features/gestures/in-view.mjs

@@ -1,20 +1,26 @@
-import { dispatchPointerEvent as i } from "../../utils/events.mjs";
-import { inView as p } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/viewport/index.mjs";
-import { BaseGesture as a } from "./base.mjs";
-class w extends a {
+import { dispatchPointerEvent } from "../../utils/events.mjs";
+import { inView } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { BaseGesture } from "./base.mjs";
+class InViewGesture extends BaseGesture {
   isActive() {
-    return !!this.state.getOptions().inView;
+    return Boolean(this.state.getOptions().inView);
   }
-  constructor(s) {
-    super(s), this.subscribeEvents = () => {
-      var e;
-      const t = this.state.getElement(), { once: n, ...r } = ((e = this.state.getOptions()) == null ? void 0 : e.inViewOptions) || {};
-      return p(t, (o) => {
-        if (this.state.setActive("inView", !0), i(t, "viewenter", o), !n)
-          return (u) => {
-            this.state.setActive("inView", !1), i(t, "viewleave", u);
+  constructor(state) {
+    super(state);
+    this.subscribeEvents = () => {
+      var _a;
+      const element = this.state.element;
+      const { once, ...viewOptions } = ((_a = this.state.getOptions()) == null ? void 0 : _a.inViewOptions) || {};
+      return inView(element, (enterEntry) => {
+        this.state.setActive("inView", true);
+        dispatchPointerEvent(element, "viewenter", enterEntry);
+        if (!once) {
+          return (leaveEntry) => {
+            this.state.setActive("inView", false);
+            dispatchPointerEvent(element, "viewleave", leaveEntry);
           };
-      }, r);
+        }
+      }, viewOptions);
     };
   }
   mount() {
@@ -25,5 +31,5 @@ class w extends a {
   }
 }
 export {
-  w as InViewGesture
+  InViewGesture
 };

package/dist/es/features/gestures/press.mjs

@@ -1,18 +1,27 @@
-import { dispatchPointerEvent as r } from "../../utils/events.mjs";
-import { BaseGesture as o } from "./base.mjs";
-class d extends o {
+import { dispatchPointerEvent } from "../../utils/events.mjs";
+import { BaseGesture } from "./base.mjs";
+class PressGesture extends BaseGesture {
   isActive() {
-    return !!this.state.getOptions().press;
+    return Boolean(this.state.getOptions().press);
   }
-  constructor(i) {
-    super(i), this.subscribeEvents = () => {
-      const e = this.state.getElement(), t = (s) => {
-        this.state.setActive("press", !1), r(e, "pressend", s), window.removeEventListener("pointerup", t);
-      }, n = (s) => {
-        this.state.setActive("press", !0), r(e, "pressstart", s), window.addEventListener("pointerup", t);
+  constructor(state) {
+    super(state);
+    this.subscribeEvents = () => {
+      const element = this.state.element;
+      const onPointerUp = (event) => {
+        this.state.setActive("press", false);
+        dispatchPointerEvent(element, "pressend", event);
+        window.removeEventListener("pointerup", onPointerUp);
       };
-      return e.addEventListener("pointerdown", n), () => {
-        e.removeEventListener("pointerdown", n), window.removeEventListener("pointerup", t);
+      const onPointerDown = (event) => {
+        this.state.setActive("press", true);
+        dispatchPointerEvent(element, "pressstart", event);
+        window.addEventListener("pointerup", onPointerUp);
+      };
+      element.addEventListener("pointerdown", onPointerDown);
+      return () => {
+        element.removeEventListener("pointerdown", onPointerDown);
+        window.removeEventListener("pointerup", onPointerUp);
       };
     };
   }
@@ -24,5 +33,5 @@ class d extends o {
   }
 }
 export {
-  d as PressGesture
+  PressGesture
 };

package/dist/es/features/layout/config.mjs

@@ -0,0 +1,21 @@
+import { correctBorderRadius } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.mjs";
+import { correctBoxShadow } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs";
+const defaultScaleCorrector = {
+  borderRadius: {
+    ...correctBorderRadius,
+    applyTo: [
+      "borderTopLeftRadius",
+      "borderTopRightRadius",
+      "borderBottomLeftRadius",
+      "borderBottomRightRadius"
+    ]
+  },
+  borderTopLeftRadius: correctBorderRadius,
+  borderTopRightRadius: correctBorderRadius,
+  borderBottomLeftRadius: correctBorderRadius,
+  borderBottomRightRadius: correctBorderRadius,
+  boxShadow: correctBoxShadow
+};
+export {
+  defaultScaleCorrector
+};

package/dist/es/features/layout/layout.mjs

@@ -0,0 +1,74 @@
+import { Feature } from "../feature.mjs";
+import { HTMLProjectionNode } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs";
+import { getClosestProjectingNode } from "./utils.mjs";
+import { onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount } from "vue";
+import { addScaleCorrector } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs";
+import { defaultScaleCorrector } from "./config.mjs";
+import { globalProjectionState } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/projection/node/state.mjs";
+import { injectLayoutGroup } from "../../components/context.mjs";
+class LayoutFeature extends Feature {
+  constructor(state) {
+    super(state);
+    const options = this.state.getOptions();
+    const visualElement = this.state.visualElement;
+    if (options.layout || options.layoutId) {
+      addScaleCorrector(defaultScaleCorrector);
+      this.layoutGroup = injectLayoutGroup({});
+      onBeforeMount(() => {
+        visualElement.projection = new HTMLProjectionNode(
+          visualElement.latestValues,
+          options["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent)
+        );
+        visualElement.projection.setOptions({
+          layout: options.layout,
+          layoutId: options.layoutId,
+          // TODO: drag
+          alwaysMeasureLayout: false,
+          visualElement,
+          animationType: typeof options.layout === "string" ? options.layout : "both",
+          // initialPromotionConfig
+          layoutRoot: options.layoutRoot,
+          layoutScroll: options.layoutScroll
+        });
+      });
+      onBeforeUpdate(() => {
+        var _a;
+        (_a = visualElement.projection) == null ? void 0 : _a.willUpdate();
+      });
+      onUpdated(() => {
+        var _a;
+        (_a = visualElement.projection) == null ? void 0 : _a.root.didUpdate();
+      });
+      onBeforeUnmount(() => {
+        var _a;
+        if (visualElement.projection) {
+          visualElement.projection.unmount();
+          if ((_a = this.layoutGroup) == null ? void 0 : _a.group)
+            this.layoutGroup.group.remove(visualElement.projection);
+        }
+      });
+    }
+  }
+  update() {
+    var _a;
+    (_a = this.state.visualElement.projection) == null ? void 0 : _a.setOptions(this.state.getOptions());
+  }
+  mount() {
+    var _a, _b;
+    const options = this.state.getOptions();
+    if (options.layout || options.layoutId) {
+      const projection = this.state.visualElement.projection;
+      if (projection) {
+        (_b = (_a = this.layoutGroup) == null ? void 0 : _a.group) == null ? void 0 : _b.add(projection);
+      }
+      globalProjectionState.hasEverUpdated = true;
+      projection == null ? void 0 : projection.mount(this.state.element);
+      projection == null ? void 0 : projection.root.didUpdate();
+    }
+  }
+  unmount() {
+  }
+}
+export {
+  LayoutFeature
+};

package/dist/es/features/layout/utils.mjs

@@ -0,0 +1,8 @@
+function getClosestProjectingNode(visualElement) {
+  if (!visualElement)
+    return void 0;
+  return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
+}
+export {
+  getClosestProjectingNode
+};

package/dist/es/features/svg.mjs

@@ -1,19 +1,20 @@
-import { Feature as i } from "./feature.mjs";
-import { frame as s } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
-function o(e) {
-  return e instanceof SVGElement && e.tagName !== "svg";
+import { Feature } from "./feature.mjs";
+import { frame } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
+function isSVGElement(element) {
+  return element instanceof SVGElement && element.tagName !== "svg";
 }
-class u extends i {
+class SVGFeature extends Feature {
   mount() {
-    const t = this.state.getElement();
-    if (!o(t))
+    const instance = this.state.element;
+    if (!isSVGElement(instance)) {
       return;
-    const n = this.state.visualElement;
-    s.read(() => {
+    }
+    const visualElement = this.state.visualElement;
+    frame.read(() => {
       try {
-        n.renderState.dimensions = typeof t.getBBox == "function" ? t.getBBox() : t.getBoundingClientRect();
-      } catch {
-        n.renderState.dimensions = {
+        visualElement.renderState.dimensions = typeof instance.getBBox === "function" ? instance.getBBox() : instance.getBoundingClientRect();
+      } catch (e) {
+        visualElement.renderState.dimensions = {
           x: 0,
           y: 0,
           width: 0,
@@ -26,5 +27,5 @@ class u extends i {
   }
 }
 export {
-  u as SVGFeature
+  SVGFeature
 };