solidjs-motion 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -5,6 +5,30 @@ All notable changes to `solidjs-motion` / `@solidjs-motion/motion` are documente
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.2] — 2026-05-20
+
+### Fixed
+
+- **Drag now coexists with `initial` / `animate` / `exit`.** A draggable
+  element with an entrance animation (`<motion.X drag initial={{x:-300}}
+  animate={{x:0}}>`) used to break in two ways: animate's `x`/`y` never
+  reached the DOM, and on pointerdown the element snapped back to the
+  initial position. Three linked fixes:
+  - Drag's exclusion of `x`/`y` from the gesture-state winners is now
+    gated on `active.whileDrag` (pointer-engaged) instead of
+    `dragEnabled` (configured), matching motion-react. Animate's `x`/`y`
+    flow normally while drag is configured but idle; drag only claims
+    them during active interaction.
+  - The diff effect's removed-key fallback no longer reverts `x`/`y` to
+    `initial` when drag activates and excludes them. Drag *claiming* a
+    key is not the same as removing it.
+  - `handlePanStart` now syncs the x/y MotionValues to the element's
+    current visible translate (parsed from `getComputedStyle` +
+    `el.style.transform`) before capturing `dragStart`. motion's
+    `animate(el, target)` interpolates style.transform via WAAPI but
+    doesn't keep the visualElement's MVs in sync, so the MV would still
+    hold the entrance start value when drag began.
+
 ## [0.1.1] — 2026-05-20
 
 ### Docs

package/dist/index.js

@@ -871,6 +871,91 @@ function ensureVisualElement(el) {
 	return ve;
 }
 /**
+* Parse the visible translate from an element's transform — reads both
+* `getComputedStyle(el).transform` (which real browsers normalize to
+* matrix form) AND `el.style.transform` (which preserves the raw syntax
+* motion-dom's writer emits, e.g. `translate3d(50px, 0px, 0)`). Used by
+* drag's pan-start to sync the x/y MotionValues to what the user is
+* actually seeing.
+*
+* Why both sources: motion's `animate(el, target)` interpolates style.
+* transform via WAAPI but DOESN'T update the VE's MVs during the tween,
+* so after `initial: {x:-300} → animate: {x:0}` the MV still holds -300.
+* Reading the current transform recovers the truth. We prefer computed
+* (post-animation, post-WAAPI-commit value) and fall back to inline
+* (covers jsdom + cases where motion's writer wrote inline but the
+* browser hasn't run a style-resolve pass yet).
+*
+* Supported syntaxes:
+*   - `"none"` / empty → {0, 0}
+*   - `matrix(a, b, c, d, tx, ty)`
+*   - `matrix3d(..., tx, ty, ...)`
+*   - `translateX(Npx)` / `translateY(Npx)` / `translate(tx, ty)`
+*   - `translate3d(tx, ty, tz)`
+*   - Any of the above mixed with other transform functions (regex-
+*     based extraction picks just the translate components).
+*/
+function readVisibleTranslate(el) {
+	const fromString = (transform) => {
+		if (!transform || transform === "none") return null;
+		if (transform.startsWith("matrix3d(")) {
+			const values = transform.slice(9, -1).split(",");
+			const tx = Number.parseFloat(values[12] ?? "0");
+			const ty = Number.parseFloat(values[13] ?? "0");
+			if (!Number.isFinite(tx) && !Number.isFinite(ty)) return null;
+			return {
+				x: Number.isFinite(tx) ? tx : 0,
+				y: Number.isFinite(ty) ? ty : 0
+			};
+		}
+		if (transform.startsWith("matrix(")) {
+			const values = transform.slice(7, -1).split(",");
+			const tx = Number.parseFloat(values[4] ?? "0");
+			const ty = Number.parseFloat(values[5] ?? "0");
+			if (!Number.isFinite(tx) && !Number.isFinite(ty)) return null;
+			return {
+				x: Number.isFinite(tx) ? tx : 0,
+				y: Number.isFinite(ty) ? ty : 0
+			};
+		}
+		let x = 0;
+		let y = 0;
+		let found = false;
+		const translate3d = transform.match(/translate3d\(\s*([-\d.]+)px\s*,\s*([-\d.]+)px/);
+		if (translate3d) {
+			x = Number.parseFloat(translate3d[1] ?? "0");
+			y = Number.parseFloat(translate3d[2] ?? "0");
+			found = true;
+		} else {
+			const translate2d = transform.match(/translate\(\s*([-\d.]+)px\s*(?:,\s*([-\d.]+)px)?/);
+			if (translate2d) {
+				x = Number.parseFloat(translate2d[1] ?? "0");
+				y = Number.parseFloat(translate2d[2] ?? "0");
+				found = true;
+			}
+			const translateX = transform.match(/translateX\(\s*([-\d.]+)px/);
+			if (translateX) {
+				x = Number.parseFloat(translateX[1] ?? "0");
+				found = true;
+			}
+			const translateY = transform.match(/translateY\(\s*([-\d.]+)px/);
+			if (translateY) {
+				y = Number.parseFloat(translateY[1] ?? "0");
+				found = true;
+			}
+		}
+		if (!found) return null;
+		return {
+			x: Number.isFinite(x) ? x : 0,
+			y: Number.isFinite(y) ? y : 0
+		};
+	};
+	return fromString(getComputedStyle(el).transform) ?? fromString(el.style.transform) ?? {
+		x: 0,
+		y: 0
+	};
+}
+/**
 * Compute the `touch-action` CSS value for an element being dragged.
 * Disabling touch-action prevents the browser from interpreting the gesture
 * as a scroll. Axis-locked drags leave the unused axis available for scroll
@@ -1008,14 +1093,27 @@ function createDrag(el, getOpts, setActive) {
 		for (const ctrl of momentumControls) ctrl.stop();
 		momentumControls = [];
 	}
-	const handlePanStart = (event, info) => {
+	const handlePanStart = (event, info, mvIsAuthoritative = false) => {
 		if (!isDragEnabled()) return;
 		stopMomentum();
 		const ve = ensureVisualElement(el);
 		xMV = ve.getValue("x", 0);
 		yMV = ve.getValue("y", 0);
-		dragStartX = xMV.get();
-		dragStartY = yMV.get();
+		const axis = getOpts().drag;
+		if (mvIsAuthoritative) {
+			dragStartX = xMV.get();
+			dragStartY = yMV.get();
+		} else {
+			const visible = readVisibleTranslate(el);
+			if (axis !== "y") {
+				if (visible.x !== xMV.get()) xMV.set(visible.x);
+				dragStartX = visible.x;
+			} else dragStartX = xMV.get();
+			if (axis !== "x") {
+				if (visible.y !== yMV.get()) yMV.set(visible.y);
+				dragStartY = visible.y;
+			} else dragStartY = yMV.get();
+		}
 		sessionBounds = resolveConstraints(getOpts().dragConstraints, el, dragStartX, dragStartY);
 		savedUserSelect = document.body.style.userSelect;
 		savedTouchAction = el.style.touchAction;
@@ -1184,7 +1282,7 @@ function createDrag(el, getOpts, setActive) {
 				x: 0,
 				y: 0
 			}
-		});
+		}, Boolean(options.snapToCursor));
 		const sessionStartPoint = {
 			x: event.clientX,
 			y: event.clientY
@@ -1493,7 +1591,7 @@ function createGestureStateMachine(deps) {
 	});
 	const winners = createMemo(() => {
 		const targets = stateTargets();
-		const dragEnabled = Boolean(getOpts().drag);
+		const dragActive = active.whileDrag;
 		const out = {};
 		for (const stateName of PRIORITY_HIGH_TO_LOW) {
 			if (!isStateActive(stateName, active, parentVariantCtx)) continue;
@@ -1502,7 +1600,7 @@ function createGestureStateMachine(deps) {
 			for (const key in target) {
 				if (key === "transition") continue;
 				if (key in out) continue;
-				if (!active.exit && dragEnabled && (key === "x" || key === "y")) continue;
+				if (!active.exit && dragActive && (key === "x" || key === "y")) continue;
 				out[key] = {
 					value: target[key],
 					transition: target.transition,
@@ -1545,6 +1643,7 @@ function createGestureStateMachine(deps) {
 			}
 			for (const key in lastApplied) {
 				if (key in next) continue;
+				if (active.whileDrag && (key === "x" || key === "y")) continue;
 				const initialValue = initialTarget && key in initialTarget ? initialTarget[key] : void 0;
 				changes[key] = initialValue !== void 0 ? initialValue : getMotionDefault(key);
 			}