@kitlangton/solid-motion 0.1.0 → 0.2.1

package/README.md

@@ -48,7 +48,8 @@ Motion values update the DOM directly without re-running components.
 
 ## Notes
 
-- Specify `bounce` whenever you use `visualDuration` (the pinned engine,
-  `motion-dom@12.30`, ignores `visualDuration` on its own).
+- As in Motion for React, `visualDuration` takes effect only alongside `bounce`
+  (use `bounce: 0` for no overshoot; negative values overdamp).
 - Layout animations (`layout`, `layoutId`) are not implemented yet.
-- Gesture implementations are adapted from `framer-motion@12.30.0` (MIT).
+- Built on `motion-dom@14`. Gesture implementations are adapted from
+  `framer-motion@14.0.0` (MIT).

package/dist/gestures/drag/VisualElementDragControls.d.ts

@@ -64,8 +64,6 @@ export declare class VisualElementDragControls {
     private startAnimation;
     private startAxisValueAnimation;
     private stopAnimation;
-    private pauseAnimation;
-    private getAnimationState;
     /**
      * Drag works differently depending on which props are provided.
      *
@@ -73,6 +71,10 @@ export declare class VisualElementDragControls {
      * - Otherwise, we apply the delta to the x/y motion values.
      */
     private getAxisMotionValue;
+    /**
+     * Measure the live box - projection.layout may or may not include the
+     * drag transform, depending on when it was measured.
+     */
     private snapToCursor;
     /**
      * When the viewport resizes we want to check if the measured constraints

package/dist/gestures/drag/utils/constraints.d.ts

@@ -48,7 +48,7 @@ export declare function calcViewportConstraints(layoutBox: Box, constraintsBox:
 };
 /**
  * Calculate a transform origin relative to the source axis, between 0-1, that results
- * in an asthetically pleasing scale/transform needed to project from source to target.
+ * in an aesthetically pleasing scale/transform needed to project from source to target.
  */
 export declare function calcOrigin(source: Axis, target: Axis): number;
 /**

package/dist/gestures/pan/PanSession.d.ts

@@ -11,7 +11,7 @@ interface PanSessionHandlers {
 }
 interface PanSessionOptions {
     transformPagePoint?: TransformPoint;
-    dragSnapToOrigin?: boolean;
+    dragSnapToOrigin?: boolean | "x" | "y";
     distanceThreshold?: number;
     contextWindow?: (Window & typeof globalThis) | null;
     /**
@@ -41,6 +41,17 @@ export declare class PanSession {
      * @internal
      */
     private lastMoveEventInfo;
+    /**
+     * Raw (untransformed) event info, re-transformed each frame
+     * so transformPagePoint sees the current parent matrix.
+     * @internal
+     */
+    private lastRawMoveEventInfo;
+    /**
+     * Whether a pointermove has arrived since the last updatePoint.
+     * @internal
+     */
+    private hasPendingMove?;
     /**
      * @internal
      */
@@ -54,7 +65,7 @@ export declare class PanSession {
      */
     private removeListeners;
     /**
-     * For determining if an animation should resume after it is interupted
+     * For determining if an animation should resume after it is interrupted
      *
      * @internal
      */

package/dist/gestures/pan/index.d.ts

@@ -6,7 +6,7 @@ export declare class PanGesture extends Feature<Element> {
     createPanHandlers(): {
         onSessionStart: (event: PointerEvent, info: PanInfo) => void;
         onStart: (event: PointerEvent, info: PanInfo) => void;
-        onMove: ((event: PointerEvent, info: PanInfo) => void) | undefined;
+        onMove: (event: PointerEvent, info: PanInfo) => void;
         onEnd: (event: PointerEvent, info: PanInfo) => void;
     };
     mount(): void;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { createComponent, Dynamic, mergeProps, getNextElement, use, insert, effect, style, template } from "solid-js/web";
 import { createContext, useContext, splitProps, createSignal, createEffect, createMemo, onMount, onCleanup, mergeProps as mergeProps$1, on, untrack, For, batch, Index, children } from "solid-js";
-import { isControllingVariants, isVariantLabel, SVGVisualElement, HTMLVisualElement, isMotionValue, isForcedMotionValue, buildHTMLStyles, buildSVGAttrs, isSVGTag, resolveMotionValue, isVariantNode, isAnimationControls, resolveVariantFromProps, getFeatureDefinitions, setFeatureDefinitions, Feature, createAnimationState, isPrimaryPointer, addDomEvent, frameData, frame, cancelFrame, mixNumber, calcLength, createBox, eachAxis, measurePageBox, convertBoxToBoundingBox, convertBoundingBoxToBox, addValueToWillChange, animateMotionValue, setDragLock, percent, hover, press, HTMLProjectionNode, scrapeSVGMotionValuesFromProps, scrapeHTMLMotionValuesFromProps, motionValue, transformValue, transform, mapValue, JSAnimation, resolveElements, defaultOffset, isGenerator, createGeneratorEasing, fillOffset, isSVGElement, isSVGSVGElement, visualElementStore, ObjectVisualElement, animateSingleValue, animateTarget, spring, GroupAnimationWithThen } from "motion-dom";
+import { isControllingVariants, isVariantLabel, SVGVisualElement, HTMLVisualElement, isMotionValue, isForcedMotionValue, buildHTMLStyles, buildSVGAttrs, isSVGTag, resolveMotionValue, isVariantNode, isAnimationControls, resolveVariantFromProps, getFeatureDefinitions, setFeatureDefinitions, Feature, createAnimationState, isPrimaryPointer, addDomEvent, time, frame, frameData, cancelFrame, mixNumber, calcLength, createBox, eachAxis, measurePageBox, convertBoxToBoundingBox, convertBoundingBoxToBox, addValueToWillChange, animateMotionValue, setDragLock, percent, resize, isElementTextInput, hover, press, HTMLProjectionNode, setTarget, scrapeSVGMotionValuesFromProps, scrapeHTMLMotionValuesFromProps, motionValue, transformValue, transform, mapValue, JSAnimation, resolveElements, defaultOffset, isGenerator, createGeneratorEasing, fillOffset, isSVGElement, isSVGSVGElement, visualElementStore, ObjectVisualElement, animateSingleValue, animateTarget, spring, GroupAnimationWithThen } from "motion-dom";
 export * from "motion-dom";
 import { pipe, secondsToMilliseconds, millisecondsToSeconds, progress, clamp, invariant, noop, getEasingForSegment, removeItem } from "motion-utils";
 const defaultContext = {
@@ -408,6 +408,7 @@ class PanSession {
     this.startEvent = null;
     this.lastMoveEvent = null;
     this.lastMoveEventInfo = null;
+    this.lastRawMoveEventInfo = null;
     this.handlers = {};
     this.removeListeners = () => {
     };
@@ -424,13 +425,19 @@ class PanSession {
     };
     this.updatePoint = () => {
       if (!(this.lastMoveEvent && this.lastMoveEventInfo)) return;
+      this.hasPendingMove = false;
+      if (this.lastRawMoveEventInfo) {
+        this.lastMoveEventInfo = transformPoint(
+          this.lastRawMoveEventInfo,
+          this.transformPagePoint
+        );
+      }
       const info2 = getPanInfo(this.lastMoveEventInfo, this.history);
       const isPanStarted = this.startEvent !== null;
       const isDistancePastThreshold = distance2D(info2.offset, { x: 0, y: 0 }) >= this.distanceThreshold;
       if (!isPanStarted && !isDistancePastThreshold) return;
       const { point: point2 } = info2;
-      const { timestamp: timestamp2 } = frameData;
-      this.history.push({ ...point2, timestamp: timestamp2 });
+      this.history.push({ ...point2, timestamp: time.now() });
       const { onStart, onMove } = this.handlers;
       if (!isPanStarted) {
         onStart && onStart(this.lastMoveEvent, info2);
@@ -440,10 +447,13 @@ class PanSession {
     };
     this.handlePointerMove = (event2, info2) => {
       this.lastMoveEvent = event2;
+      this.lastRawMoveEventInfo = info2;
       this.lastMoveEventInfo = transformPoint(info2, this.transformPagePoint);
+      this.hasPendingMove = true;
       frame.update(this.updatePoint, true);
     };
     this.handlePointerUp = (event2, info2) => {
+      this.hasPendingMove && this.updatePoint();
       this.end();
       const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
       if (this.dragSnapToOrigin || !this.startEvent) {
@@ -472,21 +482,25 @@ class PanSession {
     this.history = [{ ...point, timestamp }];
     const { onSessionStart } = handlers;
     onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
+    const eventOptions = { passive: true, capture: true };
     this.removeListeners = pipe(
       addPointerEvent(
         this.contextWindow,
         "pointermove",
-        this.handlePointerMove
+        this.handlePointerMove,
+        eventOptions
       ),
       addPointerEvent(
         this.contextWindow,
         "pointerup",
-        this.handlePointerUp
+        this.handlePointerUp,
+        eventOptions
       ),
       addPointerEvent(
         this.contextWindow,
         "pointercancel",
-        this.handlePointerUp
+        this.handlePointerUp,
+        eventOptions
       )
     );
     if (element) {
@@ -513,12 +527,9 @@ class PanSession {
       y: window.scrollY
     });
     window.addEventListener("scroll", this.onElementScroll, {
-      capture: true,
-      passive: true
-    });
-    window.addEventListener("scroll", this.onWindowScroll, {
-      passive: true
+      capture: true
     });
+    window.addEventListener("scroll", this.onWindowScroll);
     this.removeScrollListeners = () => {
       window.removeEventListener("scroll", this.onElementScroll, {
         capture: true
@@ -603,15 +614,18 @@ function getVelocity(history, timeDelta) {
   if (!timestampedPoint) {
     return { x: 0, y: 0 };
   }
-  const time = millisecondsToSeconds(
+  if (timestampedPoint === history[0] && history.length > 2 && lastPoint.timestamp - timestampedPoint.timestamp > secondsToMilliseconds(timeDelta) * 2) {
+    timestampedPoint = history[1];
+  }
+  const seconds = millisecondsToSeconds(
     lastPoint.timestamp - timestampedPoint.timestamp
   );
-  if (time === 0) {
+  if (seconds === 0) {
     return { x: 0, y: 0 };
   }
   const currentVelocity = {
-    x: (lastPoint.x - timestampedPoint.x) / time,
-    y: (lastPoint.y - timestampedPoint.y) / time
+    x: (lastPoint.x - timestampedPoint.x) / seconds,
+    y: (lastPoint.y - timestampedPoint.y) / seconds
   };
   if (currentVelocity.x === Infinity) {
     currentVelocity.x = 0;
@@ -715,15 +729,10 @@ class VisualElementDragControls {
     const { presenceContext } = this.visualElement;
     if (presenceContext && presenceContext.isPresent === false) return;
     const onSessionStart = (event) => {
-      if (snapToCursor) {
-        this.stopAnimation();
-        this.snapToCursor(extractEventInfo(event).point);
-      } else {
-        this.pauseAnimation();
-      }
+      if (snapToCursor) this.snapToCursor(event);
+      this.stopAnimation();
     };
     const onStart = (event, info) => {
-      this.stopAnimation();
       const { drag, dragPropagation, onDragStart } = this.getProps();
       if (drag && !dragPropagation) {
         if (this.openDragLock) this.openDragLock();
@@ -754,7 +763,7 @@ class VisualElementDragControls {
         this.originPoint[axis] = current;
       });
       if (onDragStart) {
-        frame.postRender(() => onDragStart(event, info));
+        frame.update(() => onDragStart(event, info), false, true);
       }
       addValueToWillChange(this.visualElement, "transform");
       const { animationState } = this.visualElement;
@@ -781,7 +790,9 @@ class VisualElementDragControls {
       this.updateAxis("x", info.point, offset);
       this.updateAxis("y", info.point, offset);
       this.visualElement.render();
-      onDrag && onDrag(event, info);
+      if (onDrag) {
+        frame.update(() => onDrag(event, info), false, true);
+      }
     };
     const onSessionEnd = (event, info) => {
       this.latestPointerEvent = event;
@@ -790,9 +801,12 @@ class VisualElementDragControls {
       this.latestPointerEvent = null;
       this.latestPanInfo = null;
     };
-    const resumeAnimation = () => eachAxis(
-      (axis) => this.getAnimationState(axis) === "paused" && this.getAxisMotionValue(axis).animation?.play()
-    );
+    const resumeAnimation = () => {
+      const { dragSnapToOrigin: snap } = this.getProps();
+      if (snap || this.constraints) {
+        this.startAnimation({ x: 0, y: 0 });
+      }
+    };
     const { dragSnapToOrigin } = this.getProps();
     this.panSession = new PanSession(
       originEvent,
@@ -894,7 +908,7 @@ class VisualElementDragControls {
       }
     }
     this.elastic = resolveDragElastic(dragElastic);
-    if (prevConstraints !== this.constraints && layout && this.constraints && !this.hasMutatedConstraints) {
+    if (prevConstraints !== this.constraints && !isRefObject(dragConstraints) && layout && this.constraints && !this.hasMutatedConstraints) {
       eachAxis((axis) => {
         if (this.constraints !== false && this.getAxisMotionValue(axis)) {
           this.constraints[axis] = rebaseAxisConstraints(
@@ -916,6 +930,10 @@ class VisualElementDragControls {
     );
     const { projection } = this.visualElement;
     if (!projection || !projection.layout) return false;
+    if (projection.root) {
+      projection.root.scroll = void 0;
+      projection.root.updateScroll();
+    }
     const constraintsBox = measurePageBox(
       constraintsElement,
       projection.root,
@@ -951,7 +969,8 @@ class VisualElementDragControls {
         return;
       }
       let transition = constraints && constraints[axis] || {};
-      if (dragSnapToOrigin) transition = { min: 0, max: 0 };
+      if (dragSnapToOrigin === true || dragSnapToOrigin === axis)
+        transition = { min: 0, max: 0 };
       const bounceStiffness = dragElastic ? 200 : 1e6;
       const bounceDamping = dragElastic ? 40 : 1e7;
       const inertia = {
@@ -986,12 +1005,6 @@ class VisualElementDragControls {
   stopAnimation() {
     eachAxis((axis) => this.getAxisMotionValue(axis).stop());
   }
-  pauseAnimation() {
-    eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
-  }
-  getAnimationState(axis) {
-    return this.getAxisMotionValue(axis).animation?.state;
-  }
   /**
    * Drag works differently depending on which props are provided.
    *
@@ -1004,20 +1017,25 @@ class VisualElementDragControls {
     const externalMotionValue = props[dragKey];
     return externalMotionValue ? externalMotionValue : this.visualElement.getValue(
       axis,
-      (props.initial ? props.initial[axis] : void 0) || 0
+      this.visualElement.latestValues[axis] ?? 0
     );
   }
-  snapToCursor(point) {
+  /**
+   * Measure the live box - projection.layout may or may not include the
+   * drag transform, depending on when it was measured.
+   */
+  snapToCursor({ clientX, clientY }) {
+    const { drag } = this.getProps();
+    const point = { x: clientX, y: clientY };
+    const cursor = this.visualElement.getTransformPagePoint()?.(point) || point;
+    const box = this.visualElement.measureViewportBox();
     eachAxis((axis) => {
-      const { drag } = this.getProps();
       if (!shouldDrag(axis, drag, this.currentDirection)) return;
-      const { projection } = this.visualElement;
       const axisValue = this.getAxisMotionValue(axis);
-      if (projection && projection.layout) {
-        const { min, max } = projection.layout.layoutBox[axis];
-        const current = axisValue.get() || 0;
-        axisValue.set(point[axis] - mixNumber(min, max, 0.5) + current);
-      }
+      const { min, max } = box[axis];
+      axisValue.set(
+        (axisValue.get() || 0) + cursor[axis] - mixNumber(min, max, 0.5)
+      );
     });
   }
   /**
@@ -1032,28 +1050,28 @@ class VisualElementDragControls {
     if (!isRefObject(dragConstraints) || !projection || !this.constraints)
       return;
     this.stopAnimation();
+    const constraints = this.constraints;
     const boxProgress = { x: 0, y: 0 };
     eachAxis((axis) => {
-      const axisValue = this.getAxisMotionValue(axis);
-      if (axisValue && this.constraints !== false) {
-        const latest = axisValue.get();
-        boxProgress[axis] = calcOrigin(
-          { min: latest, max: latest },
-          this.constraints[axis]
-        );
-      }
+      const latest = this.getAxisMotionValue(axis).get();
+      boxProgress[axis] = calcOrigin(
+        { min: latest, max: latest },
+        constraints[axis]
+      );
     });
     const { transformTemplate } = this.visualElement.getProps();
     this.visualElement.current.style.transform = transformTemplate ? transformTemplate({}, "") : "none";
     projection.root && projection.root.updateScroll();
     projection.updateLayout();
+    this.constraints = false;
     this.resolveConstraints();
     eachAxis((axis) => {
-      if (!shouldDrag(axis, drag, null)) return;
       const axisValue = this.getAxisMotionValue(axis);
+      if (!shouldDrag(axis, drag, null) || !axisValue.get()) return;
       const { min, max } = this.constraints[axis];
       axisValue.set(mixNumber(min, max, boxProgress[axis]));
     });
+    this.visualElement.render();
   }
   addListeners() {
     if (!this.visualElement.current) return;
@@ -1065,16 +1083,24 @@ class VisualElementDragControls {
       (event) => {
         const { drag, dragListener = true } = this.getProps();
         const target = event.target;
-        const isClickingTextInputChild = target !== element && (Boolean(target.closest("input, textarea, select")) || target instanceof HTMLElement && target.isContentEditable);
+        const isClickingTextInputChild = target !== element && isElementTextInput(target);
         if (drag && dragListener && !isClickingTextInputChild) {
           this.start(event);
         }
       }
     );
+    let stopResizeObservers;
     const measureDragConstraints = () => {
       const { dragConstraints } = this.getProps();
       if (isRefObject(dragConstraints) && dragConstraints.current) {
         this.constraints = this.resolveRefConstraints();
+        if (!stopResizeObservers) {
+          stopResizeObservers = startResizeObservers(
+            element,
+            dragConstraints.current,
+            () => this.scalePositionWithinConstraints()
+          );
+        }
       }
     };
     const { projection } = this.visualElement;
@@ -1114,6 +1140,7 @@ class VisualElementDragControls {
       stopPointerListener();
       stopMeasureLayoutListener();
       stopLayoutUpdateListener && stopLayoutUpdateListener();
+      stopResizeObservers && stopResizeObservers();
     };
   }
   getProps() {
@@ -1137,6 +1164,24 @@ class VisualElementDragControls {
     };
   }
 }
+function skipFirstCall(callback) {
+  let isFirst = true;
+  return () => {
+    if (isFirst) {
+      isFirst = false;
+      return;
+    }
+    callback();
+  };
+}
+function startResizeObservers(element, constraintsElement, onResize) {
+  const stopElement = resize(element, skipFirstCall(onResize));
+  const stopContainer = resize(constraintsElement, skipFirstCall(onResize));
+  return () => {
+    stopElement();
+    stopContainer();
+  };
+}
 function shouldDrag(direction, drag, currentDirection) {
   return (drag === true || drag === direction) && (currentDirection === null || currentDirection === direction);
 }
@@ -1183,7 +1228,7 @@ let DragGesture$1 = class DragGesture extends Feature {
 };
 const asyncHandler = (handler) => (event, info) => {
   if (handler) {
-    frame.postRender(() => handler(event, info));
+    frame.update(() => handler(event, info), false, true);
   }
 };
 class PanGesture extends Feature {
@@ -1206,7 +1251,7 @@ class PanGesture extends Feature {
     return {
       onSessionStart: asyncHandler(onPanSessionStart),
       onStart: asyncHandler(onPanStart),
-      onMove: onPan,
+      onMove: asyncHandler(onPan),
       onEnd: (event, info) => {
         delete this.session;
         if (onPanEnd) {
@@ -1271,6 +1316,7 @@ class PressGesture extends Feature {
   mount() {
     const { current } = this.node;
     if (!current) return;
+    const { globalTapTarget, propagate } = this.node.props;
     this.unmount = press(
       current,
       (_element, startEvent) => {
@@ -1281,7 +1327,10 @@ class PressGesture extends Feature {
           success ? "End" : "Cancel"
         );
       },
-      { useGlobalTarget: this.node.props.globalTapTarget }
+      {
+        useGlobalTarget: globalTapTarget,
+        stopPropagation: propagate?.tap === false
+      }
     );
   }
   unmount() {
@@ -1429,6 +1478,7 @@ function createMotionComponent(Component, {
       if (!visualElement) return;
       visualElement.scheduleRenderMicrotask();
     });
+    let mounted = false;
     createEffect(() => {
       if (!visualElement) return;
       const nextProps = getLatestProps();
@@ -1436,9 +1486,18 @@ function createMotionComponent(Component, {
       visualElement.update(nextProps, nextPresenceContext);
       prepareDragProjection(visualElement, nextProps);
       visualElement.updateFeatures();
-      if (visualElement.current && visualElement.animationState) {
-        visualElement.animationState.animateChanges();
+      if (!visualElement.current || !visualElement.animationState) return;
+      if (!mounted) {
+        mounted = true;
+        const {
+          animate: animate2
+        } = nextProps;
+        const blocked = nextProps.initial === false || nextPresenceContext?.initial === false;
+        if (blocked && animate2 && typeof animate2 !== "boolean" && !isAnimationControls(animate2)) {
+          setTarget(visualElement, animate2);
+        }
       }
+      visualElement.animationState.animateChanges();
     });
     onCleanup(() => {
       visualElement?.unmount();