svelte-motion - npm Package Compare versions

src/render/dom/projection/convert-to-relative.js

src/render/dom/projection/relative-set.js

src/render/dom/projection/utils.js

src/render/utils/is-draggable.js

2

package.json

		{
		"name": "svelte-motion",
		"version": "0.5.2",
		"version": "0.5.3",
		"description": "Svelte animstion library baded on the React library framer-motion.",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

53

src/components/AnimateSharedLayout/utils/batcher.js

		/**
		based on framer-motion@4.0.3,
		based on framer-motion@4.1.11,
		Copyright (c) 2018 Framer B.V.
		*/

		import { getFrameData, flushSync } from "framesync"
		import sync, { flushSync } from 'framesync';
		import { withoutTreeTransform, batchResetAndMeasure } from '../../../render/dom/projection/utils.js';
		import { compareByDepth } from '../../../render/utils/compare-by-depth.js';
		@@ -14,3 +15,2 @@ import { Presence } from '../types.js';
		var defaultHandler = {
		measureLayout: function (child) { return child.updateLayoutMeasurement(); },
		layoutReady: function (child) { return child.notifyLayoutReady(); },
		@@ -26,18 +26,12 @@ };
		flush: function (_a) {

		var _b = _a === void 0 ? defaultHandler : _a, measureLayout = _b.measureLayout, layoutReady = _b.layoutReady, parent = _b.parent;
		var _b = _a === void 0 ? defaultHandler : _a, layoutReady = _b.layoutReady, parent = _b.parent;
		var order = Array.from(queue).sort(compareByDepth);
		var resetAndMeasure = function () {
		/**
		* Write: Reset any transforms on children elements so we can read their actual layout
		*/
		order.forEach(function (child) { return child.resetTransform(); });
		/**
		* Read: Measure the actual layout
		*/
		order.forEach(measureLayout);
		};
		parent
		? parent.withoutTransform(resetAndMeasure)
		: resetAndMeasure();
		if (parent) {
		withoutTreeTransform(parent, function () {
		batchResetAndMeasure(order);
		});
		}
		else {
		batchResetAndMeasure(order);
		}
		/**
		@@ -57,5 +51,19 @@ * Write: Notify the VisualElements they're ready for further write operations.
		});

		flushSync.preRender()
		flushSync.render()
		/**
		* Starting these animations will have queued jobs on the frame loop. In some situations,
		* like when removing an element, these will be processed too late after the DOM is manipulated,
		* leaving a flash of incorrectly-projected content. By manually flushing these jobs
		* we ensure there's no flash.
		*/
		flushSync.preRender();
		flushSync.render();
		/**
		* Schedule a callback at the end of the following frame to assign the latest projection
		* box to the prevViewportBox snapshot. Once global batching is in place this could be run
		* synchronously. But for now it ensures that if any nested `AnimateSharedLayout` top-level
		* child attempts to calculate its previous relative position against a prevViewportBox
		* it will be against its latest projection box instead, as the snapshot is useless beyond this
		* render.
		*/
		sync.postRender(function () { return order.forEach(assignProjectionToSnapshot); });
		queue.clear();
		@@ -65,3 +73,6 @@ },
		}
		function assignProjectionToSnapshot(child) {
		child.prevViewportBox = child.projection.target;
		}

		export { createBatcher };

3

src/gestures/drag/utils/lock.js

		@@ -12,2 +12,3 @@ /**
		};

		if (lock === null) {
		@@ -25,5 +26,7 @@ lock = name;
		if (drag === "y") {

		lock = globalVerticalLock();
		}
		else if (drag === "x") {

		lock = globalHorizontalLock();
		@@ -30,0 +33,0 @@ }

142

src/gestures/drag/VisualElementDragControls.js

		@@ -8,3 +8,2 @@ /**
		//import { invariant } from 'hey-listen';
		import { progress } from 'popmotion';
		import { PanSession } from '../PanSession.js';
		@@ -23,2 +22,6 @@ import { getGlobalLock } from './utils/lock.js';
		import { AnimationType } from '../../render/utils/types.js';
		import { updateTreeLayoutMeasurements } from '../../render/dom/projection/utils.js';
		import { progress } from 'popmotion';
		import { convertToRelativeProjection } from '../../render/dom/projection/convert-to-relative.js';
		import { calcRelativeOffset } from '../../motion/features/layout/utils.js';

		@@ -101,40 +104,25 @@ var elementDragControls = new WeakMap();
		var _b = _a === void 0 ? {} : _a, _c = _b.snapToCursor, snapToCursor = _c === void 0 ? false : _c, cursorProgress = _b.cursorProgress;
		/**
		* If this drag session has been manually triggered by the user, it might be from an event
		* outside the draggable element. If snapToCursor is set to true, we need to measure the position
		* of the element and snap it to the cursor.
		*/
		snapToCursor && this.snapToCursor(originEvent);
		var onSessionStart = function () {
		var onSessionStart = function (event) {
		// Stop any animations on both axis values immediately. This allows the user to throw and catch
		// the component.

		_this.stopMotion();
		};
		var onStart = function (event, info) {
		var _a, _b, _c;
		// Attempt to grab the global drag gesture lock - maybe make this part of PanSession
		var _d = _this.props, drag = _d.drag, dragPropagation = _d.dragPropagation;
		if (drag && !dragPropagation) {
		if (_this.openGlobalLock)
		_this.openGlobalLock();
		_this.openGlobalLock = getGlobalLock(drag);
		// If we don 't have the lock, don't start dragging
		if (!_this.openGlobalLock)
		return;
		}

		/**
		* Record the progress of the mouse within the draggable element on each axis.
		* onPan, we're going to use this to calculate a new bounding box for the element to
		* project into. This will ensure that even if the DOM element moves via a relayout, it'll
		* stick to the correct place under the pointer.
		* Ensure that this element's layout measurements are updated.
		* We'll need these to accurately project the element and figure out its constraints.
		*/
		_this.prepareBoundingBox();
		_this.visualElement.lockProjectionTarget();
		_this.updateLayoutMeasurements();
		/**
		* Resolve the drag constraints. These are either set as top/right/bottom/left constraints
		* relative to the element's layout, or a ref to another element. Both need converting to
		* viewport coordinates.
		* If this drag session has been manually triggered by the user, it might be from an event
		* outside the draggable element. If snapToCursor is set to true, we need to measure the position
		* of the element and snap it to the cursor.
		*/
		_this.resolveDragConstraints();
		snapToCursor && _this.snapToCursor(originEvent);
		/**
		* Apply a simple lock to the projection target. This ensures no animations
		* can run on the projection box while this lock is active.
		*/
		_this.isLayoutDrag() && _this.visualElement.lockProjectionTarget();
		/**
		* When dragging starts, we want to find where the cursor is relative to the bounding box
		@@ -165,2 +153,21 @@ * of the element. Every frame, we calculate a new bounding box using this relative position
		});
		};
		var onStart = function (event, info) {
		var _a, _b, _c;
		// Attempt to grab the global drag gesture lock - maybe make this part of PanSession
		var _d = _this.props, drag = _d.drag, dragPropagation = _d.dragPropagation;
		if (drag && !dragPropagation) {
		if (_this.openGlobalLock)
		_this.openGlobalLock();
		_this.openGlobalLock = getGlobalLock(drag);
		// If we don 't have the lock, don't start dragging
		if (!_this.openGlobalLock)
		return;
		}
		/**
		* Resolve the drag constraints. These are either set as top/right/bottom/left constraints
		* relative to the element's layout, or a ref to another element. Both need converting to
		* viewport coordinates.
		*/
		_this.resolveDragConstraints();
		// Set current drag status
		@@ -206,11 +213,4 @@ _this.isDragging = true;
		};
		/**
		* Ensure the component's layout and target bounding boxes are up-to-date.
		*/
		VisualElementDragControls.prototype.prepareBoundingBox = function () {
		var visualElement = this.visualElement;
		visualElement.withoutTransform(function () {
		visualElement.updateLayoutMeasurement();
		});
		visualElement.rebaseProjectionTarget(true, visualElement.measureViewportBox(false));
		VisualElementDragControls.prototype.updateLayoutMeasurements = function () {
		updateTreeLayoutMeasurements(this.visualElement, Boolean(this.getAxisMotionValue("x") && !this.isExternalDrag()));
		};
		@@ -220,6 +220,8 @@ VisualElementDragControls.prototype.resolveDragConstraints = function () {
		var _a = this.props, dragConstraints = _a.dragConstraints, dragElastic = _a.dragElastic;
		this.visualElement.updateLayoutProjection();
		var layout = this.visualElement.getLayoutState().layoutCorrected;
		if (dragConstraints) {
		this.constraints = isRefObject(dragConstraints)
		? this.resolveRefConstraints(this.visualElement.getLayoutState().layout, dragConstraints)
		: calcRelativeConstraints(this.visualElement.getLayoutState().layout, dragConstraints);
		? this.resolveRefConstraints(layout, dragConstraints)
		: calcRelativeConstraints(layout, dragConstraints);
		}
		@@ -237,3 +239,3 @@ else {
		if (_this.getAxisMotionValue(axis)) {
		_this.constraints[axis] = rebaseAxisConstraints(_this.visualElement.getLayoutState().layout[axis], _this.constraints[axis]);
		_this.constraints[axis] = rebaseAxisConstraints(layout[axis], _this.constraints[axis]);
		}
		@@ -268,2 +270,3 @@ });
		if (!this.props.dragPropagation && this.openGlobalLock) {

		this.openGlobalLock();
		@@ -275,3 +278,4 @@ this.openGlobalLock = null;
		VisualElementDragControls.prototype.stop = function (event, info) {
		var _a;

		var _a, _b, _c;
		this.visualElement.unlockProjectionTarget();
		@@ -284,12 +288,8 @@ (_a = this.panSession) === null \|\| _a === void 0 ? void 0 : _a.end();
		return;
		var _b = this.props, dragMomentum = _b.dragMomentum, onDragEnd = _b.onDragEnd;
		if (dragMomentum \|\| this.elastic) {
		var velocity = info.velocity;
		this.animateDragEnd(velocity);
		}
		onDragEnd === null \|\| onDragEnd === void 0 ? void 0 : onDragEnd(event, info);
		var velocity = info.velocity;
		this.animateDragEnd(velocity);
		(_c = (_b = this.props).onDragEnd) === null \|\| _c === void 0 ? void 0 : _c.call(_b, event, info);
		};
		VisualElementDragControls.prototype.snapToCursor = function (event) {
		var _this = this;
		this.prepareBoundingBox();
		eachAxis(function (axis) {
		@@ -380,10 +380,43 @@ var drag = _this.props.drag;
		};
		VisualElementDragControls.prototype.isLayoutDrag = function () {
		return !this.getAxisMotionValue("x");
		};
		VisualElementDragControls.prototype.isExternalDrag = function () {
		var _a = this.props, _dragX = _a._dragX, _dragY = _a._dragY;
		return _dragX \|\| _dragY;
		};
		VisualElementDragControls.prototype.animateDragEnd = function (velocity) {
		var _this = this;
		var _a = this.props, drag = _a.drag, dragMomentum = _a.dragMomentum, dragElastic = _a.dragElastic, dragTransition = _a.dragTransition;
		/**
		* Everything beyond the drag gesture should be performed with
		* relative projection so children stay in sync with their parent element.
		*/
		var isRelative = convertToRelativeProjection(this.visualElement, this.isLayoutDrag() && !this.isExternalDrag());
		/**
		* If we had previously resolved constraints relative to the viewport,
		* we need to also convert those to a relative coordinate space for the animation
		*/
		var constraints = this.constraints \|\| {};
		if (isRelative &&
		Object.keys(constraints).length &&
		this.isLayoutDrag()) {
		var projectionParent = this.visualElement.getProjectionParent();
		if (projectionParent) {
		var relativeConstraints_1 = calcRelativeOffset(projectionParent.projection.targetFinal, constraints);
		eachAxis(function (axis) {
		var _a = relativeConstraints_1[axis], min = _a.min, max = _a.max;
		constraints[axis] = {
		min: isNaN(min) ? undefined : min,
		max: isNaN(max) ? undefined : max,
		};
		});
		}
		}
		var momentumAnimations = eachAxis(function (axis) {
		var _a;
		if (!shouldDrag(axis, drag, _this.currentDirection)) {
		return;
		}
		var transition = _this.constraints ? _this.constraints[axis] : {};
		var transition = (_a = constraints === null \|\| constraints === void 0 ? void 0 : constraints[axis]) !== null && _a !== void 0 ? _a : {};
		/**
		@@ -404,3 +437,3 @@ * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame
		? _this.startAxisValueAnimation(axis, inertia)
		: _this.visualElement.startLayoutAnimation(axis, inertia);
		: _this.visualElement.startLayoutAnimation(axis, inertia, isRelative);
		});
		@@ -436,2 +469,3 @@ // Run all animations and then resolve the new drag constraints.
		return;

		// Stop any current animations as there can be some visual glitching if we resize mid animation
		@@ -449,3 +483,3 @@ this.stopMotion();
		*/
		this.prepareBoundingBox();
		this.updateLayoutMeasurements();
		this.resolveDragConstraints();
		@@ -452,0 +486,0 @@ eachAxis(function (axis) {

5

src/gestures/PanSession.js

		@@ -63,3 +63,5 @@ /**
		if (isMouseEvent(event) && event.buttons === 0) {

		_this.handlePointerUp(event, info);

		return;
		@@ -71,2 +73,3 @@ }
		this.handlePointerUp = function (event, info) {

		_this.end();
		@@ -78,2 +81,3 @@ var onEnd = _this.handlers.onEnd;
		onEnd && onEnd(event, panInfo);

		};
		@@ -83,2 +87,3 @@ // If we have more than one touch, don't start detecting this gesture
		return;

		this.handlers = handlers;
		@@ -85,0 +90,0 @@ this.transformPagePoint = transformPagePoint;

22

src/motion/features/layout/utils.js

		/**
		based on framer-motion@4.0.3,
		based on framer-motion@4.1.11,
		Copyright (c) 2018 Framer B.V.
		@@ -12,3 +12,21 @@ */
		}
		function calcRelativeOffsetAxis(parent, child) {
		return {
		min: child.min - parent.min,
		max: child.max - parent.min,
		};
		}
		function calcRelativeOffset(parent, child) {
		return {
		x: calcRelativeOffsetAxis(parent.x, child.x),
		y: calcRelativeOffsetAxis(parent.y, child.y),
		};
		}
		function checkIfParentHasChanged(prev, next) {
		var prevId = prev.getLayoutId();
		var nextId = next.getLayoutId();
		return prevId !== nextId \|\| (nextId === undefined && prev !== next);
		}

		export { tweenAxis };
		export { calcRelativeOffset, calcRelativeOffsetAxis, checkIfParentHasChanged, tweenAxis };

160

src/render/index.js

		/**
		based on framer-motion@4.0.3,
		based on framer-motion@4.1.1,
		Copyright (c) 2018 Framer B.V.
		@@ -11,5 +11,5 @@ */
		import { eachAxis } from '../utils/each-axis.js';
		import { copyAxisBox } from '../utils/geometry/index.js';
		import { axisBox } from '../utils/geometry/index.js';
		import { removeBoxTransforms, applyBoxTransforms } from '../utils/geometry/delta-apply.js';
		import { updateBoxDelta } from '../utils/geometry/delta-calc.js';
		import { calcRelativeBox, updateBoxDelta } from '../utils/geometry/delta-calc.js';
		import { motionValue } from '../value/index.js';
		@@ -25,2 +25,4 @@ import { isMotionValue } from '../value/utils/is-motion-value.js';
		import { checkIfControllingVariants, checkIfVariantNode, isVariantLabel } from './utils/variants.js';
		import { setCurrentViewportBox } from './dom/projection/relative-set.js';
		import { isDraggable } from './utils/is-draggable.js';

		@@ -50,2 +52,9 @@ var visualElement = function (_a) {
		/**
		* A reference to the nearest projecting parent. This is either
		* undefined if we haven't looked for the nearest projecting parent,
		* false if there is no parent performing layout projection, or a reference
		* to the projecting parent.
		*/
		var projectionParent;
		/**
		* This is a reference to the visual state of the "lead" visual element.
		@@ -115,15 +124,6 @@ * Usually, this will be this visual element. But if it shares a layoutId
		*/
		function isProjecting() {
		return projection.isEnabled && layoutState.isHydrated;
		}
		/**
		*
		*/
		function render() {

		if (!instance)
		return;

		if (isProjecting()) {

		if (element.isProjectionReady()) {
		/**
		@@ -144,5 +144,3 @@ * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
		triggerBuild();

		renderInstance(instance, renderState);

		}
		@@ -156,7 +154,5 @@ function triggerBuild() {
		}

		build(element, renderState, valuesToRender, leadProjection, layoutState, options, props);
		}
		function update() {

		lifecycles.notifyUpdate(latestValues);
		@@ -182,2 +178,5 @@ }
		}
		function updateTreeLayoutProjection() {
		element.layoutTree.forEach(fireUpdateLayoutProjection);
		}
		/**
		@@ -219,4 +218,2 @@ *
		var isVariantNode = checkIfVariantNode(props);


		var element = __assign(__assign({ treeType: treeType,
		@@ -231,3 +228,3 @@ /**
		*/
		depth: parent ? parent.depth + 1 : 0,
		depth: parent ? parent.depth + 1 : 0, parent: parent, children: new Set(),
		/**
		@@ -237,5 +234,3 @@ * An ancestor path back to the root visual element. This is used
		*/
		path: parent ? [...parent.path, parent]:[],

		layoutTree: parent ? parent.layoutTree : new FlatTree(),
		path: parent ? __spreadArray(__spreadArray([], __read(parent.path)), [parent]) : [], layoutTree: parent ? parent.layoutTree : new FlatTree(),
		/**
		@@ -291,2 +286,3 @@ *
		}
		parent === null \|\| parent === void 0 ? void 0 : parent.children.add(element);
		},
		@@ -297,3 +293,2 @@ /**
		unmount: function () {

		cancelSync.update(update);
		@@ -306,5 +301,5 @@ cancelSync.render(render);
		removeFromVariantTree === null \|\| removeFromVariantTree === void 0 ? void 0 : removeFromVariantTree();
		parent === null \|\| parent === void 0 ? void 0 : parent.children.delete(element);
		unsubscribeFromLeadVisualElement === null \|\| unsubscribeFromLeadVisualElement === void 0 ? void 0 : unsubscribeFromLeadVisualElement();
		lifecycles.clearAllListeners();

		},
		@@ -495,3 +490,2 @@ /**
		setProps: function (newProps) {

		props = newProps;
		@@ -553,24 +547,14 @@ lifecycles.updatePropListeners(newProps);
		projection.isTargetLocked = false;
		},
		/**
		* Record the viewport box as it was before an expected mutation/re-render
		*/
		snapshotViewportBox: function () {
		// TODO: Store this snapshot in LayoutState
		element.prevViewportBox = element.measureViewportBox(false);
		/**
		* Update targetBox to match the prevViewportBox. This is just to ensure
		* that targetBox is affected by scroll in the same way as the measured box
		*/
		element.rebaseProjectionTarget(false, element.prevViewportBox);
		}, getLayoutState: function () { return layoutState; }, setCrossfader: function (newCrossfader) {
		crossfader = newCrossfader;
		},
		}, isProjectionReady: function () { return projection.isEnabled && layoutState.isHydrated; },
		/**
		* Start a layout animation on a given axis.
		* TODO: This could be better.
		*/
		startLayoutAnimation: function (axis, transition) {
		startLayoutAnimation: function (axis, transition, isRelative) {
		if (isRelative === void 0) { isRelative = false; }
		var progress = element.getProjectionAnimationProgress()[axis];
		var _a = projection.target[axis], min = _a.min, max = _a.max;
		var _a = isRelative
		? projection.relativeTarget[axis]
		: projection.target[axis], min = _a.min, max = _a.max;
		var length = max - min;
		@@ -581,3 +565,3 @@ progress.clearListeners();
		progress.onChange(function (v) {
		return element.setProjectionTargetAxis(axis, v, v + length);
		element.setProjectionTargetAxis(axis, v, v + length, isRelative);
		});
		@@ -607,14 +591,2 @@ return element.animateMotionValue(axis, progress, 0, transition);
		/**
		* Update the layoutState by measuring the DOM layout. This
		* should be called after resetting any layout-affecting transforms.
		*/
		updateLayoutMeasurement: function () {
		element.notifyBeforeLayoutMeasure(layoutState.layout);
		layoutState.isHydrated = true;
		layoutState.layout = element.measureViewportBox();
		layoutState.layoutCorrected = copyAxisBox(layoutState.layout);
		element.notifyLayoutMeasure(layoutState.layout, element.prevViewportBox \|\| layoutState.layout);
		sync.update(function () { return element.rebaseProjectionTarget(); });
		},
		/**
		* Get the motion values tracking the layout animations on each
		@@ -634,6 +606,15 @@ * axis. Lazy init if not already created.
		*/
		setProjectionTargetAxis: function (axis, min, max) {

		var target = projection.target[axis];

		setProjectionTargetAxis: function (axis, min, max, isRelative) {
		if (isRelative === void 0) { isRelative = false; }
		var target;
		if (isRelative) {
		if (!projection.relativeTarget) {
		projection.relativeTarget = axisBox();
		}
		target = projection.relativeTarget[axis];
		}
		else {
		projection.relativeTarget = undefined;
		target = projection.target[axis];
		}
		target.min = min;
		@@ -654,4 +635,4 @@ target.max = max;
		var _a = element.getProjectionAnimationProgress(), x = _a.x, y = _a.y;

		var shouldRebase = !projection.isTargetLocked &&
		var shouldRebase = !projection.relativeTarget &&
		!projection.isTargetLocked &&
		!x.isAnimating() &&
		@@ -672,4 +653,4 @@ !y.isAnimating();
		notifyLayoutReady: function (config) {
		setCurrentViewportBox(element);
		element.notifyLayoutUpdate(layoutState.layout, element.prevViewportBox \|\| layoutState.layout, config);

		},
		@@ -679,19 +660,41 @@ /**
		*/
		resetTransform: function () {

		return resetTransform(element, instance, props); },
		/**
		* Perform the callback after temporarily unapplying the transform
		* upwards through the tree.
		*/
		withoutTransform: function (callback) {
		var isEnabled = projection.isEnabled;
		isEnabled && element.resetTransform();
		parent ? parent.withoutTransform(callback) : callback();
		isEnabled && restoreTransform(instance, renderState);
		},
		updateLayoutProjection: updateLayoutProjection,
		resetTransform: function () { return resetTransform(element, instance, props); }, restoreTransform: function () { return restoreTransform(instance, renderState); }, updateLayoutProjection: updateLayoutProjection,
		updateTreeLayoutProjection: function () {
		element.layoutTree.forEach(fireUpdateLayoutProjection);
		element.layoutTree.forEach(fireResolveRelativeTargetBox);
		/**
		* Schedule the projection updates at the end of the current preRender
		* step. This will ensure that all layout trees will first resolve
		* relative projection boxes into viewport boxes, and then
		* update projections.
		*/
		sync.preRender(updateTreeLayoutProjection, false, true);
		},
		getProjectionParent: function () {
		if (projectionParent === undefined) {
		var foundParent = false;
		// Search backwards through the tree path
		for (var i = element.path.length - 1; i >= 0; i--) {
		var ancestor = element.path[i];
		if (ancestor.projection.isEnabled) {
		foundParent = ancestor;
		break;
		}
		}
		projectionParent = foundParent;
		}
		return projectionParent;
		},
		resolveRelativeTargetBox: function () {
		var relativeParent = element.getProjectionParent();
		if (!projection.relativeTarget \|\| !relativeParent)
		return;
		calcRelativeBox(projection, relativeParent.projection);
		if (isDraggable(relativeParent)) {
		var target = projection.target;
		applyBoxTransforms(target, target, relativeParent.getLatestValues());
		}
		},
		shouldResetTransform: function () {
		return Boolean(props._layoutResetTransform);
		},
		/**
		@@ -722,2 +725,5 @@ *
		};
		function fireResolveRelativeTargetBox(child) {
		child.resolveRelativeTargetBox();
		}
		function fireUpdateLayoutProjection(child) {
		@@ -724,0 +730,0 @@ child.updateLayoutProjection();

12

src/utils/geometry/delta-apply.js

		/**
		based on framer-motion@4.0.3,
		based on framer-motion@4.1.11,
		Copyright (c) 2018 Framer B.V.
		@@ -8,2 +8,3 @@ */
		import { mix } from 'popmotion';
		import { isDraggable } from '../../render/utils/is-draggable.js';

		@@ -139,4 +140,7 @@ /**
		treeScale.x = treeScale.y = 1;
		var node;
		var delta;
		for (var i = 0; i < treeLength; i++) {
		var delta = treePath[i].getLayoutState().delta;
		node = treePath[i];
		delta = node.getLayoutState().delta;
		// Incoporate each ancestor's scale into a culmulative treeScale for this component
		@@ -147,2 +151,6 @@ treeScale.x *= delta.x.scale;
		applyBoxDelta(box, delta);
		// If this is a draggable ancestor, also incorporate the node's transform to the layout box
		if (isDraggable(node)) {
		applyBoxTransforms(box, box, node.getLatestValues());
		}
		}
		@@ -149,0 +157,0 @@ }

12

src/utils/geometry/delta-calc.js

		/**
		based on framer-motion@4.0.3,
		based on framer-motion@4.1.11,
		Copyright (c) 2018 Framer B.V.
		@@ -71,3 +71,11 @@ */
		}
		function calcRelativeAxis(target, relative, parent) {
		target.min = parent.min + relative.min;
		target.max = target.min + calcLength(relative);
		}
		function calcRelativeBox(projection, parentProjection) {
		calcRelativeAxis(projection.target.x, projection.relativeTarget.x, parentProjection.target.x);
		calcRelativeAxis(projection.target.y, projection.relativeTarget.y, parentProjection.target.y);
		}

		export { calcOrigin, isNear, updateAxisDelta, updateBoxDelta };
		export { calcOrigin, calcRelativeAxis, calcRelativeBox, isNear, updateAxisDelta, updateBoxDelta };

dist/index.js

Sorry, the diff of this file is too big to display

dist/index.mjs