Socket
Socket
Sign inDemoInstall

svelte-motion

Package Overview
Dependencies
6
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.5.3 to 0.5.4

src/context/ScaleCorrectionProvider.svelte
src/render/dom/utils/batch-layout.js

2

package.json
{
"name": "svelte-motion",
"version": "0.5.3",
"version": "0.5.4",
"description": "Svelte animstion library baded on the React library framer-motion.",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

2

README.md

@@ -11,4 +11,2 @@ # Svelte Motion

if you run into build issues with Rollup like 'process is undefined', you need to add [rollup-plugin-inject-process-env](https://github.com/badcafe/rollup-plugin-inject-process-env#readme) or a similar plugin.
## Usage

@@ -15,0 +13,0 @@

57

src/animation/utils/transitions.js
/**
based on framer-motion@4.0.3,
based on framer-motion@4.1.15,
Copyright (c) 2018 Framer B.V.

@@ -8,3 +8,2 @@ */

import { inertia, animate } from 'popmotion';
//import { warning } from 'hey-listen';
import { secondsToMilliseconds } from '../../utils/time-conversion.js';

@@ -14,2 +13,3 @@ import { isEasingArray, easingDefinitionToFunction } from './easing.js';

import { getDefaultTransition } from './default-transitions.js';
import { warning } from 'hey-listen';
import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.js';

@@ -59,3 +59,3 @@

if (yoyo || loop || flip) {
//warning(!legacyRepeatWarning, "yoyo, loop and flip have been removed from the API. Replace with repeat and repeatType options.");
warning(!legacyRepeatWarning, "yoyo, loop and flip have been removed from the API. Replace with repeat and repeatType options.");
legacyRepeatWarning = true;

@@ -83,15 +83,15 @@ if (yoyo) {

/**
* Get the delay for a value by checking Transition with decreasing specificity.
*/
* Get the delay for a value by checking Transition with decreasing specificity.
*/
function getDelayFromTransition(transition, key) {
var _a;
var valueTransition = getValueTransition(transition, key) || {};
return (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : 0;
var _a;
var valueTransition = getValueTransition(transition, key) || {};
return (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : 0;
}
function hydrateKeyframes(options) {
if (Array.isArray(options.to) && options.to[0] === null) {
options.to = __spreadArray([], __read(options.to));
options.to[0] = options.from;
}
return options;
if (Array.isArray(options.to) && options.to[0] === null) {
options.to = __spreadArray([], __read(options.to));
options.to[0] = options.from;
}
return options;
}

@@ -120,11 +120,19 @@ function getPopmotionAnimationOptions(transition, options, key) {

var isTargetAnimatable = isAnimatable(key, target);
/**
* If we're trying to animate from "none", try and get an animatable version
* of the target. This could be improved to work both ways.
*/
if (origin === "none" && isTargetAnimatable && typeof target === "string") {
/**
* If we're trying to animate from "none", try and get an animatable version
* of the target. This could be improved to work both ways.
*/
origin = getAnimatableNone(key, target);
}
else if (isZero(origin) && typeof target === "string") {
origin = getZeroUnit(target);
}
else if (!Array.isArray(target) &&
isZero(target) &&
typeof origin === "string") {
target = getZeroUnit(origin);
}
var isOriginAnimatable = isAnimatable(key, origin);
//warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to \"" + target + "\". " + origin + " is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to \"" + target + "\". " + origin + " is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
function start() {

@@ -164,2 +172,13 @@ var options = {

}
function isZero(value) {
return (value === 0 ||
(typeof value === "string" &&
parseFloat(value) === 0 &&
value.indexOf(" ") === -1));
}
function getZeroUnit(potentialUnitType) {
return typeof potentialUnitType === "number"
? 0
: getAnimatableNone("", potentialUnitType);
}
function getValueTransition(transition, key) {

@@ -195,2 +214,2 @@ return transition[key] || transition["default"] || transition;

export { convertTransitionToAnimationOptions, getDelayFromTransition, getPopmotionAnimationOptions, getValueTransition, hydrateKeyframes, isTransitionDefined, startAnimation };
export { convertTransitionToAnimationOptions, getDelayFromTransition, getPopmotionAnimationOptions, getValueTransition, getZeroUnit, hydrateKeyframes, isTransitionDefined, isZero, startAnimation };

98

src/components/AnimateSharedLayout/utils/batcher.js
/**
based on framer-motion@4.1.11,
based on framer-motion@4.1.15,
Copyright (c) 2018 Framer B.V.
*/
import { __spreadArray, __read } from 'tslib';
import sync, { flushSync } from 'framesync';
import { withoutTreeTransform, batchResetAndMeasure } from '../../../render/dom/projection/utils.js';
import { collectProjectingAncestors, updateLayoutMeasurement } from '../../../render/dom/projection/utils.js';
import { batchLayout, flushLayout } from '../../../render/dom/utils/batch-layout.js';
import { compareByDepth } from '../../../render/utils/compare-by-depth.js';

@@ -26,43 +28,57 @@ import { Presence } from '../types.js';

var _b = _a === void 0 ? defaultHandler : _a, layoutReady = _b.layoutReady, parent = _b.parent;
var order = Array.from(queue).sort(compareByDepth);
if (parent) {
withoutTreeTransform(parent, function () {
batchResetAndMeasure(order);
batchLayout(function (read, write) {
var order = Array.from(queue).sort(compareByDepth);
var ancestors = parent
? collectProjectingAncestors(parent)
: [];
write(function () {
var allElements = __spreadArray(__spreadArray([], __read(ancestors)), __read(order));
allElements.forEach(function (element) { return element.resetTransform(); });
});
}
else {
batchResetAndMeasure(order);
}
/**
* Write: Notify the VisualElements they're ready for further write operations.
*/
order.forEach(layoutReady);
/**
* After all children have started animating, ensure any Entering components are set to Present.
* If we add deferred animations (set up all animations and then start them in two loops) this
* could be moved to the start loop. But it needs to happen after all the animations configs
* are generated in AnimateSharedLayout as this relies on presence data
*/
order.forEach(function (child) {
if (child.isPresent)
child.presence = Presence.Present;
read(function () {
order.forEach(updateLayoutMeasurement);
});
write(function () {
ancestors.forEach(function (element) { return element.restoreTransform(); });
order.forEach(layoutReady);
});
read(function () {
/**
* After all children have started animating, ensure any Entering components are set to Present.
* If we add deferred animations (set up all animations and then start them in two loops) this
* could be moved to the start loop. But it needs to happen after all the animations configs
* are generated in AnimateSharedLayout as this relies on presence data
*/
order.forEach(function (child) {
if (child.isPresent)
child.presence = Presence.Present;
});
});
write(function () {
/**
* 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();
});
read(function () {
/**
* 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();
});
});
/**
* 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();
// TODO: Need to find a layout-synchronous way of flushing this
flushLayout();
},

@@ -69,0 +85,0 @@ };

31

src/components/AnimateSharedLayout/utils/crossfader.js

@@ -10,2 +10,3 @@ /**

import { animate } from '../../../animation/animate.js';
import { getValueTransition } from '../../../animation/utils/transitions.js';
import { motionValue } from '../../../value/index.js';

@@ -24,2 +25,3 @@

};
var prevOptions = __assign({}, options);
var leadState = {};

@@ -57,5 +59,6 @@ var followState = {};

};
transition = transition && getValueTransition(transition, "crossfade");
return animate(progress, target, __assign(__assign({}, transition), { onUpdate: onUpdate, onComplete: function () {
if (!hasUpdated) {
progress.set(1);
progress.set(target);
/**

@@ -103,3 +106,8 @@ * If we never ran an update, for instance if this was an instant transition, fire a

if (options.crossfadeOpacity && follow) {
leadState.opacity = mix(0, leadTargetOpacity, easeCrossfadeIn(p));
leadState.opacity = mix(
/**
* If the follow child has been completely hidden we animate
* this opacity from its previous opacity, but otherwise from completely transparent.
*/
follow.isVisible !== false ? 0 : followTargetOpacity, leadTargetOpacity, easeCrossfadeIn(p));
followState.opacity = options.preserveFollowOpacity

@@ -123,3 +131,17 @@ ? followTargetOpacity

toLead: function (transition) {
progress.set(options.follow ? 1 - progress.get() : 0);
var initialProgress = 0;
if (!options.prevValues && !options.follow) {
/**
* If we're not coming from anywhere, start at the end of the animation.
*/
initialProgress = 1;
}
else if (prevOptions.lead === options.follow &&
prevOptions.follow === options.lead) {
/**
* If we're swapping follow/lead we can reverse the progress
*/
initialProgress = 1 - progress.get();
}
progress.set(initialProgress);
return startCrossfadeAnimation(1, transition);

@@ -139,2 +161,3 @@ },

setOptions: function (newOptions) {
prevOptions = options;
options = newOptions;

@@ -182,3 +205,3 @@ leadState = {};

typeof leadRadius === "number") {
var radius = mix(followRadius, leadRadius, p);
var radius = Math.max(mix(followRadius, leadRadius, p), 0);
leadState[borderLabel] = followState[borderLabel] = radius;

@@ -185,0 +208,0 @@ }

13

src/components/AnimateSharedLayout/utils/stack.js

@@ -81,3 +81,6 @@ /**

});
if (state.follow &&
if (
// Don't crossfade if we've just animated back from lead and switched the
// old follow to the new lead.
state.lead !== prevState.follow &&
(prevState.lead !== state.lead ||

@@ -89,2 +92,3 @@ prevState.leadIsExiting !== state.leadIsExiting)) {

animate: function (child, shouldCrossfade) {
var _a;
if (shouldCrossfade === void 0) { shouldCrossfade = false; }

@@ -103,2 +107,9 @@ if (child === state.lead) {

var config = {};
var prevParent = (_a = state.follow) === null || _a === void 0 ? void 0 : _a.getProjectionParent();
if (prevParent) {
/**
* We'll use this to determine if the element or its layoutId has been reparented.
*/
config.prevParent = prevParent;
}
if (child.presence === Presence.Entering) {

@@ -105,0 +116,0 @@ config.originBox = getFollowViewportBox();

211

src/gestures/drag/VisualElementDragControls.js
/**
based on framer-motion@4.0.3,
based on framer-motion@4.1.15,
Copyright (c) 2018 Framer B.V.
*/
import {fixed} from '../../utils/fix-process-env';
import { __rest, __assign } from 'tslib';
//import { invariant } from 'hey-listen';
import { __rest, __assign, __spreadArray, __read } from 'tslib';
import { invariant } from 'hey-listen';
import { PanSession } from '../PanSession.js';

@@ -21,6 +21,8 @@ import { getGlobalLock } from './utils/lock.js';

import { AnimationType } from '../../render/utils/types.js';
import { updateTreeLayoutMeasurements } from '../../render/dom/projection/utils.js';
import { collectProjectingAncestors, updateLayoutMeasurement, collectProjectingChildren } 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';
import { flushLayout, batchLayout } from '../../render/dom/utils/batch-layout.js';
import { flushSync } from 'framesync';

@@ -104,48 +106,78 @@ var elementDragControls = new WeakMap();

var onSessionStart = function (event) {
var _a;
// Stop any animations on both axis values immediately. This allows the user to throw and catch
// the component.
_this.stopMotion();
/**
* Ensure that this element's layout measurements are updated.
* We'll need these to accurately project the element and figure out its constraints.
* Save the initial point. We'll use this to calculate the pointer's position rather
* than the one we receive when the gesture actually starts. By then, the pointer will
* have already moved, and the perception will be of the pointer "slipping" across the element
*/
_this.updateLayoutMeasurements();
/**
* 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);
/**
* 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
* of the element. Every frame, we calculate a new bounding box using this relative position
* and let the visualElement renderer figure out how to reproject the element into this bounding
* box.
*
* By doing it this way, rather than applying an x/y transform directly to the element,
* we can ensure the component always visually sticks to the cursor as we'd expect, even
* if the DOM element itself changes layout as a result of React updates the user might
* make based on the drag position.
*/
var point = getViewportPointFromEvent(event).point;
eachAxis(function (axis) {
var _a = _this.visualElement.projection.target[axis], min = _a.min, max = _a.max;
_this.cursorProgress[axis] = cursorProgress
? cursorProgress[axis]
: progress(min, max, point[axis]);
var initialPoint = getViewportPointFromEvent(event).point;
(_a = _this.cancelLayout) === null || _a === void 0 ? void 0 : _a.call(_this);
_this.cancelLayout = batchLayout(function (read, write) {
var ancestors = collectProjectingAncestors(_this.visualElement);
var children = collectProjectingChildren(_this.visualElement);
var tree = __spreadArray(__spreadArray([], __read(ancestors)), __read(children));
var hasManuallySetCursorOrigin = false;
/**
* If we have external drag MotionValues, record their origin point. On pointermove
* we'll apply the pan gesture offset directly to this value.
* Apply a simple lock to the projection target. This ensures no animations
* can run on the projection box while this lock is active.
*/
var axisValue = _this.getAxisMotionValue(axis);
if (axisValue) {
_this.originPoint[axis] = axisValue.get();
}
_this.isLayoutDrag() && _this.visualElement.lockProjectionTarget();
write(function () {
tree.forEach(function (element) { return element.resetTransform(); });
});
read(function () {
updateLayoutMeasurement(_this.visualElement);
children.forEach(updateLayoutMeasurement);
});
write(function () {
tree.forEach(function (element) { return element.restoreTransform(); });
if (snapToCursor) {
hasManuallySetCursorOrigin = _this.snapToCursor(initialPoint);
}
});
read(function () {
var isRelativeDrag = Boolean(_this.getAxisMotionValue("x") && !_this.isExternalDrag());
if (!isRelativeDrag) {
_this.visualElement.rebaseProjectionTarget(true, _this.visualElement.measureViewportBox(false));
}
_this.visualElement.scheduleUpdateLayoutProjection();
/**
* When dragging starts, we want to find where the cursor is relative to the bounding box
* of the element. Every frame, we calculate a new bounding box using this relative position
* and let the visualElement renderer figure out how to reproject the element into this bounding
* box.
*
* By doing it this way, rather than applying an x/y transform directly to the element,
* we can ensure the component always visually sticks to the cursor as we'd expect, even
* if the DOM element itself changes layout as a result of React updates the user might
* make based on the drag position.
*/
var projection = _this.visualElement.projection;
eachAxis(function (axis) {
if (!hasManuallySetCursorOrigin) {
var _a = projection.target[axis], min = _a.min, max = _a.max;
_this.cursorProgress[axis] = cursorProgress
? cursorProgress[axis]
: progress(min, max, initialPoint[axis]);
}
/**
* If we have external drag MotionValues, record their origin point. On pointermove
* we'll apply the pan gesture offset directly to this value.
*/
var axisValue = _this.getAxisMotionValue(axis);
if (axisValue) {
_this.originPoint[axis] = axisValue.get();
}
});
});
write(function () {
flushSync.update();
flushSync.preRender();
flushSync.render();
flushSync.postRender();
});
read(function () { return _this.resolveDragConstraints(); });
});

@@ -165,8 +197,3 @@ };

}
/**
* 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();
flushLayout();
// Set current drag status

@@ -196,4 +223,4 @@ _this.isDragging = true;

// Update each point with the latest position
_this.updateAxis("x", event, offset);
_this.updateAxis("y", event, offset);
_this.updateAxis("x", info.point, offset);
_this.updateAxis("y", info.point, offset);
// Fire onDrag event

@@ -204,3 +231,5 @@ (_d = (_c = _this.props).onDrag) === null || _d === void 0 ? void 0 : _d.call(_c, event, info);

};
var onEnd = function (event, info) { return _this.stop(event, info); };
var onSessionEnd = function (event, info) {
return _this.stop(event, info);
};
var transformPagePoint = this.props.transformPagePoint;

@@ -211,12 +240,8 @@ this.panSession = new PanSession(originEvent, {

onMove: onMove,
onEnd: onEnd,
onSessionEnd: onSessionEnd,
}, { transformPagePoint: transformPagePoint });
};
VisualElementDragControls.prototype.updateLayoutMeasurements = function () {
updateTreeLayoutMeasurements(this.visualElement, Boolean(this.getAxisMotionValue("x") && !this.isExternalDrag()));
};
VisualElementDragControls.prototype.resolveDragConstraints = function () {
var _this = this;
var _a = this.props, dragConstraints = _a.dragConstraints, dragElastic = _a.dragElastic;
this.visualElement.updateLayoutProjection();
var layout = this.visualElement.getLayoutState().layoutCorrected;

@@ -247,3 +272,3 @@ if (dragConstraints) {

var constraintsElement = constraints.current;
//invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
this.constraintsBox = getBoundingBox(constraintsElement, transformPagePoint);

@@ -265,3 +290,5 @@ var measuredConstraints = calcViewportConstraints(layoutBox, this.constraintsBox);

VisualElementDragControls.prototype.cancelDrag = function () {
var _a;
var _a, _b;
this.visualElement.unlockProjectionTarget();
(_a = this.cancelLayout) === null || _a === void 0 ? void 0 : _a.call(this);
this.isDragging = false;

@@ -271,12 +298,9 @@ this.panSession && this.panSession.end();

if (!this.props.dragPropagation && this.openGlobalLock) {
this.openGlobalLock();
this.openGlobalLock = null;
}
(_a = this.visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Drag, false);
(_b = this.visualElement.animationState) === null || _b === void 0 ? void 0 : _b.setActive(AnimationType.Drag, false);
};
VisualElementDragControls.prototype.stop = function (event, info) {
var _a, _b, _c;
this.visualElement.unlockProjectionTarget();
(_a = this.panSession) === null || _a === void 0 ? void 0 : _a.end();

@@ -292,5 +316,5 @@ this.panSession = null;

};
VisualElementDragControls.prototype.snapToCursor = function (event) {
VisualElementDragControls.prototype.snapToCursor = function (point) {
var _this = this;
eachAxis(function (axis) {
return eachAxis(function (axis) {
var drag = _this.props.drag;

@@ -302,3 +326,2 @@ // If we're not dragging this axis, do an early return.

if (axisValue) {
var point = getViewportPointFromEvent(event).point;
var box = _this.visualElement.getLayoutState().layout;

@@ -313,5 +336,5 @@ var length_1 = box[axis].max - box[axis].min;

_this.cursorProgress[axis] = 0.5;
_this.updateVisualElementAxis(axis, event);
return true;
}
});
}).includes(true);
};

@@ -321,3 +344,3 @@ /**

*/
VisualElementDragControls.prototype.updateAxis = function (axis, event, offset) {
VisualElementDragControls.prototype.updateAxis = function (axis, point, offset) {
var drag = this.props.drag;

@@ -329,3 +352,3 @@ // If we're not dragging this axis, do an early return.

? this.updateAxisMotionValue(axis, offset)
: this.updateVisualElementAxis(axis, event);
: this.updateVisualElementAxis(axis, point);
};

@@ -342,3 +365,3 @@ VisualElementDragControls.prototype.updateAxisMotionValue = function (axis, offset) {

};
VisualElementDragControls.prototype.updateVisualElementAxis = function (axis, event) {
VisualElementDragControls.prototype.updateVisualElementAxis = function (axis, point) {
var _a;

@@ -352,3 +375,2 @@ // Get the actual layout bounding box of the element

var axisProgress = this.cursorProgress[axis];
var point = getViewportPointFromEvent(event).point;
// Calculate a new min point based on the latest pointer position, constraints and elastic

@@ -473,3 +495,2 @@ var min = calcConstrainedMinPoint(point[axis], axisLength, axisProgress, (_a = this.constraints) === null || _a === void 0 ? void 0 : _a[axis], this.elastic[axis]);

return;
// Stop any current animations as there can be some visual glitching if we resize mid animation

@@ -487,13 +508,36 @@ this.stopMotion();

*/
this.updateLayoutMeasurements();
this.resolveDragConstraints();
eachAxis(function (axis) {
if (!shouldDrag(axis, drag, null))
return;
// Calculate the position of the targetBox relative to the constraintsBox using the
// previously calculated progress
var _a = calcPositionFromProgress(_this.visualElement.projection.target[axis], _this.constraintsBox[axis], boxProgress[axis]), min = _a.min, max = _a.max;
_this.visualElement.setProjectionTargetAxis(axis, min, max);
this.updateConstraints(function () {
eachAxis(function (axis) {
if (!shouldDrag(axis, drag, null))
return;
// Calculate the position of the targetBox relative to the constraintsBox using the
// previously calculated progress
var _a = calcPositionFromProgress(_this.visualElement.projection.target[axis], _this.constraintsBox[axis], boxProgress[axis]), min = _a.min, max = _a.max;
_this.visualElement.setProjectionTargetAxis(axis, min, max);
});
});
/**
* If any other draggable components are queuing the same tasks synchronously
* this will wait until they've all been scheduled before flushing.
*/
setTimeout(flushLayout, 1);
};
VisualElementDragControls.prototype.updateConstraints = function (onReady) {
var _this = this;
this.cancelLayout = batchLayout(function (read, write) {
var ancestors = collectProjectingAncestors(_this.visualElement);
write(function () {
return ancestors.forEach(function (element) { return element.resetTransform(); });
});
read(function () { return updateLayoutMeasurement(_this.visualElement); });
write(function () {
return ancestors.forEach(function (element) { return element.restoreTransform(); });
});
read(function () {
_this.resolveDragConstraints();
});
if (onReady)
write(onReady);
});
};
VisualElementDragControls.prototype.mount = function (visualElement) {

@@ -521,4 +565,5 @@ var _this = this;

var stopLayoutUpdateListener = visualElement.onLayoutUpdate(function () {
if (_this.isDragging)
if (_this.isDragging) {
_this.resolveDragConstraints();
}
});

@@ -525,0 +570,0 @@ /**

51

src/render/dom/projection/utils.js

@@ -10,17 +10,20 @@ /**

function updateTreeLayoutMeasurements(visualElement, isRelativeDrag) {
withoutTreeTransform(visualElement, function () {
var allChildren = collectProjectingChildren(visualElement);
batchResetAndMeasure(allChildren);
updateLayoutMeasurement(visualElement);
});
!isRelativeDrag &&
visualElement.rebaseProjectionTarget(true, visualElement.measureViewportBox(false));
function isProjecting(visualElement) {
var isEnabled = visualElement.projection.isEnabled;
return isEnabled || visualElement.shouldResetTransform();
}
function collectProjectingAncestors(visualElement, ancestors) {
if (ancestors === void 0) { ancestors = []; }
var parent = visualElement.parent;
if (parent)
collectProjectingAncestors(parent, ancestors);
if (isProjecting(visualElement))
ancestors.push(visualElement);
return ancestors;
}
function collectProjectingChildren(visualElement) {
var children = [];
var addChild = function (child) {
if (child.projection.isEnabled || child.shouldResetTransform()) {
if (isProjecting(child))
children.push(child);
}
child.children.forEach(addChild);

@@ -32,14 +35,2 @@ };

/**
* Perform the callback after temporarily unapplying the transform
* upwards through the tree.
*/
function withoutTreeTransform(visualElement, callback) {
var parent = visualElement.parent;
var isEnabled = visualElement.projection.isEnabled;
var shouldReset = isEnabled || visualElement.shouldResetTransform();
shouldReset && visualElement.resetTransform();
parent ? withoutTreeTransform(parent, callback) : callback();
shouldReset && visualElement.restoreTransform();
}
/**
* Update the layoutState by measuring the DOM layout. This

@@ -62,6 +53,6 @@ * should be called after resetting any layout-affecting transforms.

*/
function snapshotViewportBox(visualElement) {
function snapshotViewportBox(visualElement,nc) {
if (visualElement.shouldResetTransform())
return;
visualElement.prevViewportBox = visualElement.measureViewportBox(false);
if (!nc) visualElement.prevViewportBox = visualElement.measureViewportBox(false);
/**

@@ -73,13 +64,3 @@ * Update targetBox to match the prevViewportBox. This is just to ensure

}
function batchResetAndMeasure(order) {
/**
* 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(updateLayoutMeasurement);
}
export { batchResetAndMeasure, collectProjectingChildren, snapshotViewportBox, updateLayoutMeasurement, updateTreeLayoutMeasurements, withoutTreeTransform };
export { collectProjectingAncestors, collectProjectingChildren, snapshotViewportBox, updateLayoutMeasurement };

21

src/render/dom/utils/create-config.js

@@ -6,23 +6,16 @@ /**

import { __assign } from 'tslib';
import { isSVGComponent } from './is-svg-component.js';
import { createUseRender } from '../use-render.js';
import { svgMotionConfig } from '../../svg/config-motion.js';
import { htmlMotionConfig } from '../../html/config-motion.js';
function createDomMotionConfig(
Component,
{ forwardMotionProps = false },
preloadedFeatures,
createVisualElement) {
var baseConfig = Component==="SVG"
function createDomMotionConfig(Component, _a, preloadedFeatures, createVisualElement) {
var _b = _a.forwardMotionProps, forwardMotionProps = _b === void 0 ? false : _b;
var baseConfig = isSVGComponent(Component)
? svgMotionConfig
: htmlMotionConfig;
return {
...baseConfig,
preloadedFeatures,
forwardMotionProps,
createVisualElement,
Component,
}
return __assign(__assign({}, baseConfig), { preloadedFeatures: preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement: createVisualElement,
Component: Component });
}
export { createDomMotionConfig };

8

src/render/html/visual-element.js
/**
based on framer-motion@4.0.3,
based on framer-motion@4.1.15,
Copyright (c) 2018 Framer B.V.

@@ -59,8 +59,2 @@ */

resetTransform: function (element, domElement, props) {
/**
* When we reset the transform of an element, there's a fair possibility that
* the element will visually move from underneath the pointer, triggering attached
* pointerenter/leave events. We temporarily suspend these while measurement takes place.
*/
element.suspendHoverEvents();
var transformTemplate = props.transformTemplate;

@@ -67,0 +61,0 @@ domElement.style.transform = transformTemplate

35

src/render/index.js

@@ -155,5 +155,7 @@ /**

function updateLayoutProjection() {
if (!element.isProjectionReady())
return;
var delta = layoutState.delta, treeScale = layoutState.treeScale;
var prevTreeScaleX = treeScale.x;
var prevTreeScaleY = treeScale.x;
var prevTreeScaleY = treeScale.y;
var prevDeltaTransform = layoutState.deltaTransform;

@@ -260,9 +262,2 @@ updateLayoutDeltas(layoutState, leadProjection, element.path, latestValues);

/**
* A boolean that can be used to determine whether to respect hover events.
* For layout measurements we often have to reposition the instance by
* removing its transform. This can trigger hover events, which is
* undesired.
*/
isHoverEventsEnabled: true,
/**
* Determine whether this component has mounted yet. This is mostly used

@@ -370,18 +365,2 @@ * by variant children to determine whether they need to trigger their

},
/**
* Temporarily suspend hover events while we remove transforms in order to measure the layout.
*
* This seems like an odd bit of scheduling but what we're doing is saying after
* the next render, wait 10 milliseconds before reenabling hover events. Waiting until
* the next frame results in missed, valid hover events. But triggering on the postRender
* frame is too soon to avoid triggering events with layout measurements.
*
* Note: If we figure out a way of measuring layout while transforms remain applied, this can be removed.
*/
suspendHoverEvents: function () {
element.isHoverEventsEnabled = false;
sync.postRender(function () {
return setTimeout(function () { return (element.isHoverEventsEnabled = true); }, 10);
});
},
// Motion values ========================

@@ -538,3 +517,7 @@ /**

crossfader = newCrossfader;
}, isProjectionReady: function () { return projection.isEnabled && layoutState.isHydrated; },
}, isProjectionReady: function () {
return projection.isEnabled &&
projection.isHydrated &&
layoutState.isHydrated;
},
/**

@@ -606,2 +589,3 @@ * Start a layout animation on a given axis.

}
projection.isHydrated = true;
target.min = min;

@@ -655,2 +639,3 @@ target.max = max;

sync.preRender(updateTreeLayoutProjection, false, true);
// sync.postRender(() => element.scheduleUpdateLayoutProjection())
},

@@ -657,0 +642,0 @@ getProjectionParent: function () {

23

src/render/utils/animation-state.js

@@ -5,10 +5,9 @@ /**

*/
import { __spread, __assign, __rest } from 'tslib';
import { __spreadArray, __read, __assign, __rest } from 'tslib';
import { isAnimationControls } from '../../animation/utils/is-animation-controls.js';
import { isKeyframesTarget } from '../../animation/utils/is-keyframes-target.js';
import { isVariantLabels, resolveVariant, isVariantLabel } from './variants.js';
import { shallowCompare } from '../../utils/shallow-compare.js';
import { animateVisualElement } from './animation.js';
import { shallowCompare } from '../../utils/shallow-compare.js';
import { AnimationType } from './types.js';
import { isAnimationControls } from '../../animation/utils/is-animation-controls.js';
import { isVariantLabels, resolveVariant, isVariantLabel } from './variants.js';

@@ -23,3 +22,3 @@ var variantPriorityOrder = [

];
var reversePriorityOrder = __spread(variantPriorityOrder).reverse();
var reversePriorityOrder = __spreadArray([], __read(variantPriorityOrder)).reverse();
var numAnimationTypes = variantPriorityOrder.length;

@@ -46,3 +45,3 @@ function animateList(visualElement) {

if (resolved) {
var transition = resolved.transition, transitionEnd = resolved.transitionEnd, target = __rest(resolved, ["transition", "transitionEnd"]);
resolved.transition; var transitionEnd = resolved.transitionEnd, target = __rest(resolved, ["transition", "transitionEnd"]);
acc = __assign(__assign(__assign({}, acc), target), transitionEnd);

@@ -73,3 +72,3 @@ }

function animateChanges(options, changedActiveType) {
var _a;
var props = visualElement.getProps();

@@ -125,3 +124,2 @@ var context = visualElement.getVariantContext(true) || {};

}
/**

@@ -177,3 +175,3 @@ * Set all encountered keys so far as the protected keys for this type. This will

*/
var _a = typeState.prevResolvedValues, prevResolvedValues = _a === void 0 ? {} : _a;
var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b;
var allKeys = __assign(__assign({}, prevResolvedValues), resolvedValues);

@@ -256,6 +254,6 @@ var markToAnimate = function (key) {

if (shouldAnimateType && !isInherited) {
animations.push.apply(animations, __spread(definitionList.map(function (animation) { return ({
animations.push.apply(animations, __spreadArray([], __read(definitionList.map(function (animation) { return ({
animation: animation,
options: __assign({ type: type }, options),
}); })));
}); }))));
}

@@ -294,3 +292,2 @@ };

}
isInitialRender = false;

@@ -297,0 +294,0 @@ return shouldAnimate ? animate(animations) : Promise.resolve();

11

src/utils/fix-process-env.js
const fix = ()=>{
try{
if (!process.env){
process.env={};
}
return true;;
}catch(e){}
if (!window || (window.process && window.process.env)){
return false;
}
if (!window.process){

@@ -10,5 +19,5 @@ window.process={}

window.process.env={};
return true;
return true;
}
export const fixed = fix();

2

src/utils/geometry/delta-apply.js
/**
based on framer-motion@4.1.11,
based on framer-motion@4.1.15,
Copyright (c) 2018 Framer B.V.

@@ -4,0 +4,0 @@ */

2

src/utils/geometry/delta-calc.js
/**
based on framer-motion@4.1.11,
based on framer-motion@4.1.15,
Copyright (c) 2018 Framer B.V.

@@ -4,0 +4,0 @@ */

2

src/utils/geometry/index.js
/**
based on framer-motion@4.0.3,
based on framer-motion@4.1.15,
Copyright (c) 2018 Framer B.V.

@@ -4,0 +4,0 @@ */

src/motion/features/layout/use-snapshot-on-unmount.js
src/motion/features/layout/UseSnapshotOnMount.svelte
src/animation/UseAnimatedState.svelte

Sorry, the diff of this file is not supported yet

src/components/AnimatePresence/AnimatePresence.svelte

Sorry, the diff of this file is not supported yet

src/components/AnimatePresence/PresenceChild.svelte

Sorry, the diff of this file is not supported yet

src/motion/features/layout/Animate.svelte

Sorry, the diff of this file is not supported yet

src/motion/features/layout/Measure.svelte

Sorry, the diff of this file is not supported yet

src/motion/Motion.svelte

Sorry, the diff of this file is not supported yet

src/motion/utils/UseVisualElement.svelte

Sorry, the diff of this file is not supported yet

src/render/dom/UseRender.svelte

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc