4922 lines
172 KiB
JavaScript
4922 lines
172 KiB
JavaScript
import { $ as current_component, P as push, X as slot, Z as bind_props, R as pop, T as getContext, Q as setContext, W as fallback, a0 as store_get, a1 as unsubscribe_stores, Y as invalid_default_snippet, a2 as rest_props, a3 as sanitize_props, a4 as ensure_array_like, _ as stringify } from "./index.js";
|
|
import { clsx as clsx$1 } from "clsx";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { w as writable, g as get, r as readable, d as derived } from "./index2.js";
|
|
import { __read, __rest, __spreadArray } from "tslib";
|
|
import sync, { getFrameData, cancelSync, flushSync } from "framesync";
|
|
import { velocityPerSecond, cubicBezier, linear, easeIn, easeInOut, easeOut, circIn, circInOut, circOut, backIn, backInOut, backOut, anticipate, bounceIn, bounceInOut, bounceOut, inertia, animate, mix, progress, clamp, distance, pipe } from "popmotion";
|
|
import { complex, number, px, degrees, scale, alpha, progressPercentage, color, filter, percent, vw, vh } from "style-value-types";
|
|
import { warning, invariant } from "hey-listen";
|
|
import { b as base } from "./paths.js";
|
|
import { e as escape_html } from "./escaping.js";
|
|
const replacements = {
|
|
translate: /* @__PURE__ */ new Map([
|
|
[true, "yes"],
|
|
[false, "no"]
|
|
])
|
|
};
|
|
function attr(name, value, is_boolean = false) {
|
|
if (value == null || !value && is_boolean || value === "" && name === "class") return "";
|
|
const normalized = name in replacements && replacements[name].get(value) || value;
|
|
const assignment = is_boolean ? "" : `="${escape_html(normalized, true)}"`;
|
|
return ` ${name}${assignment}`;
|
|
}
|
|
function clsx(value) {
|
|
if (typeof value === "object") {
|
|
return clsx$1(value);
|
|
} else {
|
|
return value ?? "";
|
|
}
|
|
}
|
|
function onDestroy(fn) {
|
|
var context = (
|
|
/** @type {Component} */
|
|
current_component
|
|
);
|
|
(context.d ??= []).push(fn);
|
|
}
|
|
async function tick() {
|
|
}
|
|
var Presence;
|
|
(function(Presence2) {
|
|
Presence2[Presence2["Entering"] = 0] = "Entering";
|
|
Presence2[Presence2["Present"] = 1] = "Present";
|
|
Presence2[Presence2["Exiting"] = 2] = "Exiting";
|
|
})(Presence || (Presence = {}));
|
|
var VisibilityAction;
|
|
(function(VisibilityAction2) {
|
|
VisibilityAction2[VisibilityAction2["Hide"] = 0] = "Hide";
|
|
VisibilityAction2[VisibilityAction2["Show"] = 1] = "Show";
|
|
})(VisibilityAction || (VisibilityAction = {}));
|
|
function addUniqueItem(arr, item) {
|
|
arr.indexOf(item) === -1 && arr.push(item);
|
|
}
|
|
function removeItem(arr, item) {
|
|
var index = arr.indexOf(item);
|
|
index > -1 && arr.splice(index, 1);
|
|
}
|
|
var SubscriptionManager = (
|
|
/** @class */
|
|
function() {
|
|
function SubscriptionManager2() {
|
|
this.subscriptions = [];
|
|
}
|
|
SubscriptionManager2.prototype.add = function(handler) {
|
|
var _this = this;
|
|
addUniqueItem(this.subscriptions, handler);
|
|
return function() {
|
|
return removeItem(_this.subscriptions, handler);
|
|
};
|
|
};
|
|
SubscriptionManager2.prototype.notify = function(a, b, c) {
|
|
var numSubscriptions = this.subscriptions.length;
|
|
if (!numSubscriptions)
|
|
return;
|
|
if (numSubscriptions === 1) {
|
|
this.subscriptions[0](a, b, c);
|
|
} else {
|
|
for (var i = 0; i < numSubscriptions; i++) {
|
|
var handler = this.subscriptions[i];
|
|
handler && handler(a, b, c);
|
|
}
|
|
}
|
|
};
|
|
SubscriptionManager2.prototype.getSize = function() {
|
|
return this.subscriptions.length;
|
|
};
|
|
SubscriptionManager2.prototype.clear = function() {
|
|
this.subscriptions.length = 0;
|
|
};
|
|
return SubscriptionManager2;
|
|
}()
|
|
);
|
|
var isFloat = function(value) {
|
|
return !isNaN(parseFloat(value));
|
|
};
|
|
var MotionValue = (
|
|
/** @class */
|
|
function() {
|
|
function MotionValue2(init, startStopNotifier) {
|
|
var _this = this;
|
|
this.timeDelta = 0;
|
|
this.lastUpdated = 0;
|
|
this.updateSubscribers = new SubscriptionManager();
|
|
this.velocityUpdateSubscribers = new SubscriptionManager();
|
|
this.renderSubscribers = new SubscriptionManager();
|
|
this.canTrackVelocity = false;
|
|
this.updateAndNotify = function(v, render) {
|
|
if (render === void 0) {
|
|
render = true;
|
|
}
|
|
_this.prev = _this.current;
|
|
_this.current = v;
|
|
var _a = getFrameData(), delta2 = _a.delta, timestamp = _a.timestamp;
|
|
if (_this.lastUpdated !== timestamp) {
|
|
_this.timeDelta = delta2;
|
|
_this.lastUpdated = timestamp;
|
|
sync.postRender(_this.scheduleVelocityCheck);
|
|
}
|
|
if (_this.prev !== _this.current) {
|
|
_this.updateSubscribers.notify(_this.current);
|
|
}
|
|
if (_this.velocityUpdateSubscribers.getSize()) {
|
|
_this.velocityUpdateSubscribers.notify(_this.getVelocity());
|
|
}
|
|
if (render) {
|
|
_this.renderSubscribers.notify(_this.current);
|
|
}
|
|
};
|
|
this.scheduleVelocityCheck = function() {
|
|
return sync.postRender(_this.velocityCheck);
|
|
};
|
|
this.velocityCheck = function(_a) {
|
|
var timestamp = _a.timestamp;
|
|
if (timestamp !== _this.lastUpdated) {
|
|
_this.prev = _this.current;
|
|
_this.velocityUpdateSubscribers.notify(_this.getVelocity());
|
|
}
|
|
};
|
|
this.hasAnimated = false;
|
|
this.prev = this.current = init;
|
|
this.canTrackVelocity = isFloat(this.current);
|
|
this.onSubscription = () => {
|
|
};
|
|
this.onUnsubscription = () => {
|
|
};
|
|
if (startStopNotifier) {
|
|
this.onSubscription = () => {
|
|
if (this.updateSubscribers.getSize() + this.velocityUpdateSubscribers.getSize() + this.renderSubscribers.getSize() === 0) {
|
|
const unsub = startStopNotifier();
|
|
this.onUnsubscription = () => {
|
|
};
|
|
if (unsub) {
|
|
this.onUnsubscription = () => {
|
|
if (this.updateSubscribers.getSize() + this.velocityUpdateSubscribers.getSize() + this.renderSubscribers.getSize() === 0) {
|
|
unsub();
|
|
}
|
|
};
|
|
}
|
|
}
|
|
};
|
|
}
|
|
}
|
|
MotionValue2.prototype.onChange = function(subscription) {
|
|
this.onSubscription();
|
|
const unsub = this.updateSubscribers.add(subscription);
|
|
return () => {
|
|
unsub();
|
|
this.onUnsubscription();
|
|
};
|
|
};
|
|
MotionValue2.prototype.subscribe = function(subscription) {
|
|
return this.onChange(subscription);
|
|
};
|
|
MotionValue2.prototype.clearListeners = function() {
|
|
this.updateSubscribers.clear();
|
|
this.onUnsubscription();
|
|
};
|
|
MotionValue2.prototype.onRenderRequest = function(subscription) {
|
|
this.onSubscription();
|
|
subscription(this.get());
|
|
const unsub = this.renderSubscribers.add(subscription);
|
|
return () => {
|
|
unsub();
|
|
this.onUnsubscription();
|
|
};
|
|
};
|
|
MotionValue2.prototype.attach = function(passiveEffect) {
|
|
this.passiveEffect = passiveEffect;
|
|
};
|
|
MotionValue2.prototype.set = function(v, render) {
|
|
if (render === void 0) {
|
|
render = true;
|
|
}
|
|
if (!render || !this.passiveEffect) {
|
|
this.updateAndNotify(v, render);
|
|
} else {
|
|
this.passiveEffect(v, this.updateAndNotify);
|
|
}
|
|
};
|
|
MotionValue2.prototype.update = function(v) {
|
|
this.set(v(this.get()));
|
|
};
|
|
MotionValue2.prototype.get = function() {
|
|
this.onSubscription();
|
|
const curr = this.current;
|
|
this.onUnsubscription();
|
|
return curr;
|
|
};
|
|
MotionValue2.prototype.getPrevious = function() {
|
|
return this.prev;
|
|
};
|
|
MotionValue2.prototype.getVelocity = function() {
|
|
this.onSubscription();
|
|
const vel = this.canTrackVelocity ? (
|
|
// These casts could be avoided if parseFloat would be typed better
|
|
velocityPerSecond(parseFloat(this.current) - parseFloat(this.prev), this.timeDelta)
|
|
) : 0;
|
|
this.onUnsubscription();
|
|
return vel;
|
|
};
|
|
MotionValue2.prototype.start = function(animation) {
|
|
var _this = this;
|
|
this.stop();
|
|
return new Promise(function(resolve) {
|
|
_this.hasAnimated = true;
|
|
_this.stopAnimation = animation(resolve);
|
|
}).then(function() {
|
|
return _this.clearAnimation();
|
|
});
|
|
};
|
|
MotionValue2.prototype.stop = function() {
|
|
if (this.stopAnimation)
|
|
this.stopAnimation();
|
|
this.clearAnimation();
|
|
};
|
|
MotionValue2.prototype.isAnimating = function() {
|
|
return !!this.stopAnimation;
|
|
};
|
|
MotionValue2.prototype.clearAnimation = function() {
|
|
this.stopAnimation = null;
|
|
};
|
|
MotionValue2.prototype.destroy = function() {
|
|
this.updateSubscribers.clear();
|
|
this.renderSubscribers.clear();
|
|
this.stop();
|
|
this.onUnsubscription();
|
|
};
|
|
return MotionValue2;
|
|
}()
|
|
);
|
|
function motionValue(init, startStopNotifier) {
|
|
return new MotionValue(init, startStopNotifier);
|
|
}
|
|
const getDomContext = (name, el) => {
|
|
if (!el || !window) {
|
|
return void 0;
|
|
}
|
|
let par = el;
|
|
while (par = par.parentNode) {
|
|
if (par.motionDomContext && par.motionDomContext.has(name)) {
|
|
return par.motionDomContext.get(name);
|
|
}
|
|
}
|
|
return void 0;
|
|
};
|
|
const setDomContext = (name, el, value) => {
|
|
if (el && window) {
|
|
if (!el.motionDomContext) {
|
|
el.motionDomContext = /* @__PURE__ */ new Map();
|
|
}
|
|
el.motionDomContext.set(name, value);
|
|
}
|
|
};
|
|
var MotionConfigContext = (c) => getDomContext("MotionConfig", c) || writable({
|
|
transformPagePoint: function(p) {
|
|
return p;
|
|
},
|
|
isStatic: false
|
|
});
|
|
const ScaleCorrectionContext = (isCustom) => getDomContext("ScaleCorrection", isCustom) || writable([]);
|
|
const ScaleCorrectionParentContext = () => writable([]);
|
|
const provideScaleCorrection = (isCustom) => {
|
|
const fromParent = getContext(ScaleCorrectionContext) || ScaleCorrectionContext(isCustom);
|
|
const ctx = ScaleCorrectionContext();
|
|
setContext(ScaleCorrectionContext, ctx);
|
|
setDomContext("ScaleCorrection", isCustom, ctx);
|
|
setContext(ScaleCorrectionParentContext, fromParent);
|
|
};
|
|
function ScaleCorrectionProvider($$payload, $$props) {
|
|
push();
|
|
let isCustom = $$props["isCustom"];
|
|
provideScaleCorrection(isCustom);
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", {}, null);
|
|
$$payload.out += `<!---->`;
|
|
bind_props($$props, { isCustom });
|
|
pop();
|
|
}
|
|
var secondsToMilliseconds = function(seconds) {
|
|
return seconds * 1e3;
|
|
};
|
|
var easingLookup = {
|
|
linear,
|
|
easeIn,
|
|
easeInOut,
|
|
easeOut,
|
|
circIn,
|
|
circInOut,
|
|
circOut,
|
|
backIn,
|
|
backInOut,
|
|
backOut,
|
|
anticipate,
|
|
bounceIn,
|
|
bounceInOut,
|
|
bounceOut
|
|
};
|
|
var easingDefinitionToFunction = function(definition) {
|
|
if (Array.isArray(definition)) {
|
|
var _a = __read(definition, 4), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
|
|
return cubicBezier(x1, y1, x2, y2);
|
|
} else if (typeof definition === "string") {
|
|
return easingLookup[definition];
|
|
}
|
|
return definition;
|
|
};
|
|
var isEasingArray = function(ease) {
|
|
return Array.isArray(ease) && typeof ease[0] !== "number";
|
|
};
|
|
var isAnimatable = function(key, value) {
|
|
if (key === "zIndex")
|
|
return false;
|
|
if (typeof value === "number" || Array.isArray(value))
|
|
return true;
|
|
if (typeof value === "string" && // It's animatable if we have a string
|
|
complex.test(value) && // And it contains numbers and/or colors
|
|
!value.startsWith("url(")) {
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
var isKeyframesTarget = function(v) {
|
|
return Array.isArray(v);
|
|
};
|
|
var underDampedSpring = function() {
|
|
return {
|
|
type: "spring",
|
|
stiffness: 500,
|
|
damping: 25,
|
|
restDelta: 0.5,
|
|
restSpeed: 10
|
|
};
|
|
};
|
|
var criticallyDampedSpring = function(to) {
|
|
return {
|
|
type: "spring",
|
|
stiffness: 550,
|
|
damping: to === 0 ? 2 * Math.sqrt(550) : 30,
|
|
restDelta: 0.01,
|
|
restSpeed: 10
|
|
};
|
|
};
|
|
var linearTween = function() {
|
|
return {
|
|
type: "keyframes",
|
|
ease: "linear",
|
|
duration: 0.3
|
|
};
|
|
};
|
|
var keyframes = function(values) {
|
|
return {
|
|
type: "keyframes",
|
|
duration: 0.8,
|
|
values
|
|
};
|
|
};
|
|
var defaultTransitions = {
|
|
x: underDampedSpring,
|
|
y: underDampedSpring,
|
|
z: underDampedSpring,
|
|
rotate: underDampedSpring,
|
|
rotateX: underDampedSpring,
|
|
rotateY: underDampedSpring,
|
|
rotateZ: underDampedSpring,
|
|
scaleX: criticallyDampedSpring,
|
|
scaleY: criticallyDampedSpring,
|
|
scale: criticallyDampedSpring,
|
|
opacity: linearTween,
|
|
backgroundColor: linearTween,
|
|
color: linearTween,
|
|
default: criticallyDampedSpring
|
|
};
|
|
var getDefaultTransition = function(valueKey, to) {
|
|
var transitionFactory;
|
|
if (isKeyframesTarget(to)) {
|
|
transitionFactory = keyframes;
|
|
} else {
|
|
transitionFactory = defaultTransitions[valueKey] || defaultTransitions.default;
|
|
}
|
|
return Object.assign({ to }, transitionFactory(to));
|
|
};
|
|
var int = Object.assign(Object.assign({}, number), { transform: Math.round });
|
|
var numberValueTypes = {
|
|
// Border props
|
|
borderWidth: px,
|
|
borderTopWidth: px,
|
|
borderRightWidth: px,
|
|
borderBottomWidth: px,
|
|
borderLeftWidth: px,
|
|
borderRadius: px,
|
|
radius: px,
|
|
borderTopLeftRadius: px,
|
|
borderTopRightRadius: px,
|
|
borderBottomRightRadius: px,
|
|
borderBottomLeftRadius: px,
|
|
// Positioning props
|
|
width: px,
|
|
maxWidth: px,
|
|
height: px,
|
|
maxHeight: px,
|
|
size: px,
|
|
top: px,
|
|
right: px,
|
|
bottom: px,
|
|
left: px,
|
|
// Spacing props
|
|
padding: px,
|
|
paddingTop: px,
|
|
paddingRight: px,
|
|
paddingBottom: px,
|
|
paddingLeft: px,
|
|
margin: px,
|
|
marginTop: px,
|
|
marginRight: px,
|
|
marginBottom: px,
|
|
marginLeft: px,
|
|
// Transform props
|
|
rotate: degrees,
|
|
rotateX: degrees,
|
|
rotateY: degrees,
|
|
rotateZ: degrees,
|
|
scale,
|
|
scaleX: scale,
|
|
scaleY: scale,
|
|
scaleZ: scale,
|
|
skew: degrees,
|
|
skewX: degrees,
|
|
skewY: degrees,
|
|
distance: px,
|
|
translateX: px,
|
|
translateY: px,
|
|
translateZ: px,
|
|
x: px,
|
|
y: px,
|
|
z: px,
|
|
perspective: px,
|
|
transformPerspective: px,
|
|
opacity: alpha,
|
|
originX: progressPercentage,
|
|
originY: progressPercentage,
|
|
originZ: px,
|
|
// Misc
|
|
zIndex: int,
|
|
// SVG
|
|
fillOpacity: alpha,
|
|
strokeOpacity: alpha,
|
|
numOctaves: int
|
|
};
|
|
var defaultValueTypes = Object.assign(Object.assign({}, numberValueTypes), {
|
|
// Color props
|
|
color,
|
|
backgroundColor: color,
|
|
outlineColor: color,
|
|
fill: color,
|
|
stroke: color,
|
|
// Border props
|
|
borderColor: color,
|
|
borderTopColor: color,
|
|
borderRightColor: color,
|
|
borderBottomColor: color,
|
|
borderLeftColor: color,
|
|
filter,
|
|
WebkitFilter: filter
|
|
});
|
|
var getDefaultValueType = function(key) {
|
|
return defaultValueTypes[key];
|
|
};
|
|
function getAnimatableNone(key, value) {
|
|
var _a;
|
|
var defaultValueType = getDefaultValueType(key);
|
|
if (defaultValueType !== filter)
|
|
defaultValueType = complex;
|
|
return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
|
|
}
|
|
function isTransitionDefined(_a) {
|
|
_a.when;
|
|
_a.delay;
|
|
_a.delayChildren;
|
|
_a.staggerChildren;
|
|
_a.staggerDirection;
|
|
_a.repeat;
|
|
_a.repeatType;
|
|
_a.repeatDelay;
|
|
_a.from;
|
|
var transition = __rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
|
|
return !!Object.keys(transition).length;
|
|
}
|
|
var legacyRepeatWarning = false;
|
|
function convertTransitionToAnimationOptions(_a) {
|
|
var ease = _a.ease, times = _a.times, yoyo = _a.yoyo, flip = _a.flip, loop = _a.loop, transition = __rest(_a, ["ease", "times", "yoyo", "flip", "loop"]);
|
|
var options = Object.assign({}, transition);
|
|
if (times)
|
|
options["offset"] = times;
|
|
if (transition.duration)
|
|
options["duration"] = secondsToMilliseconds(transition.duration);
|
|
if (transition.repeatDelay)
|
|
options.repeatDelay = secondsToMilliseconds(transition.repeatDelay);
|
|
if (ease) {
|
|
options["ease"] = isEasingArray(ease) ? ease.map(easingDefinitionToFunction) : easingDefinitionToFunction(ease);
|
|
}
|
|
if (transition.type === "tween")
|
|
options.type = "keyframes";
|
|
if (yoyo || loop || flip) {
|
|
warning(!legacyRepeatWarning, "yoyo, loop and flip have been removed from the API. Replace with repeat and repeatType options.");
|
|
legacyRepeatWarning = true;
|
|
if (yoyo) {
|
|
options.repeatType = "reverse";
|
|
} else if (loop) {
|
|
options.repeatType = "loop";
|
|
} else if (flip) {
|
|
options.repeatType = "mirror";
|
|
}
|
|
options.repeat = loop || yoyo || flip || transition.repeat;
|
|
}
|
|
if (transition.type !== "spring")
|
|
options.type = "keyframes";
|
|
return options;
|
|
}
|
|
function getDelayFromTransition(transition, key) {
|
|
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;
|
|
}
|
|
function getPopmotionAnimationOptions(transition, options, key) {
|
|
var _a;
|
|
if (Array.isArray(options.to)) {
|
|
(_a = transition.duration) !== null && _a !== void 0 ? _a : transition.duration = 0.8;
|
|
}
|
|
hydrateKeyframes(options);
|
|
if (!isTransitionDefined(transition)) {
|
|
transition = Object.assign(Object.assign({}, transition), getDefaultTransition(key, options.to));
|
|
}
|
|
return Object.assign(Object.assign({}, options), convertTransitionToAnimationOptions(transition));
|
|
}
|
|
function getAnimation(key, value, target, transition, onComplete) {
|
|
var _a;
|
|
var valueTransition = getValueTransition(transition, key);
|
|
var origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();
|
|
var isTargetAnimatable = isAnimatable(key, target);
|
|
if (origin === "none" && isTargetAnimatable && typeof target === "string") {
|
|
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.");
|
|
function start() {
|
|
var options = {
|
|
from: origin,
|
|
to: target,
|
|
velocity: value.getVelocity(),
|
|
onComplete,
|
|
onUpdate: function(v) {
|
|
return value.set(v);
|
|
}
|
|
};
|
|
return valueTransition.type === "inertia" || valueTransition.type === "decay" ? inertia(Object.assign(Object.assign({}, options), valueTransition)) : animate(Object.assign(Object.assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), { onUpdate: function(v) {
|
|
var _a2;
|
|
options.onUpdate(v);
|
|
(_a2 = valueTransition.onUpdate) === null || _a2 === void 0 ? void 0 : _a2.call(valueTransition, v);
|
|
}, onComplete: function() {
|
|
var _a2;
|
|
options.onComplete();
|
|
(_a2 = valueTransition.onComplete) === null || _a2 === void 0 ? void 0 : _a2.call(valueTransition);
|
|
} }));
|
|
}
|
|
function set() {
|
|
var _a2;
|
|
value.set(target);
|
|
onComplete();
|
|
(_a2 = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onComplete) === null || _a2 === void 0 ? void 0 : _a2.call(valueTransition);
|
|
return { stop: function() {
|
|
} };
|
|
}
|
|
return !isOriginAnimatable || !isTargetAnimatable || valueTransition.type === false ? set : start;
|
|
}
|
|
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) {
|
|
return transition[key] || transition["default"] || transition;
|
|
}
|
|
function startAnimation(key, value, target, transition) {
|
|
if (transition === void 0) {
|
|
transition = {};
|
|
}
|
|
return value.start(function(onComplete) {
|
|
var delayTimer;
|
|
var controls;
|
|
var animation = getAnimation(key, value, target, transition, onComplete);
|
|
var delay = getDelayFromTransition(transition, key);
|
|
var start = function() {
|
|
return controls = animation();
|
|
};
|
|
if (delay) {
|
|
delayTimer = setTimeout(start, secondsToMilliseconds(delay));
|
|
} else {
|
|
start();
|
|
}
|
|
return function() {
|
|
clearTimeout(delayTimer);
|
|
controls === null || controls === void 0 ? void 0 : controls.stop();
|
|
};
|
|
});
|
|
}
|
|
var isNumericalString = function(v) {
|
|
return /^\-?\d*\.?\d+$/.test(v);
|
|
};
|
|
var isCustomValue = function(v) {
|
|
return Boolean(v && typeof v === "object" && v.mix && v.toValue);
|
|
};
|
|
var resolveFinalValueInKeyframes = function(v) {
|
|
return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
|
|
};
|
|
var testValueType = function(v) {
|
|
return function(type) {
|
|
return type.test(v);
|
|
};
|
|
};
|
|
var auto = {
|
|
test: function(v) {
|
|
return v === "auto";
|
|
},
|
|
parse: function(v) {
|
|
return v;
|
|
}
|
|
};
|
|
var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
|
|
var findDimensionValueType = function(v) {
|
|
return dimensionValueTypes.find(testValueType(v));
|
|
};
|
|
var valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes)), [color, complex]);
|
|
var findValueType = function(v) {
|
|
return valueTypes.find(testValueType(v));
|
|
};
|
|
function isVariantLabels(v) {
|
|
return Array.isArray(v);
|
|
}
|
|
function isVariantLabel(v) {
|
|
return typeof v === "string" || isVariantLabels(v);
|
|
}
|
|
function getCurrent(visualElement2) {
|
|
var current = {};
|
|
visualElement2.forEachValue(function(value, key) {
|
|
return current[key] = value.get();
|
|
});
|
|
return current;
|
|
}
|
|
function getVelocity$1(visualElement2) {
|
|
var velocity = {};
|
|
visualElement2.forEachValue(function(value, key) {
|
|
return velocity[key] = value.getVelocity();
|
|
});
|
|
return velocity;
|
|
}
|
|
function resolveVariantFromProps(props, definition, custom, currentValues, currentVelocity) {
|
|
var _a;
|
|
if (currentValues === void 0) {
|
|
currentValues = {};
|
|
}
|
|
if (currentVelocity === void 0) {
|
|
currentVelocity = {};
|
|
}
|
|
if (typeof definition === "string") {
|
|
definition = (_a = props.variants) === null || _a === void 0 ? void 0 : _a[definition];
|
|
}
|
|
return typeof definition === "function" ? definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity) : definition;
|
|
}
|
|
function resolveVariant(visualElement2, definition, custom) {
|
|
var props = visualElement2.getProps();
|
|
return resolveVariantFromProps(props, definition, custom !== null && custom !== void 0 ? custom : props.custom, getCurrent(visualElement2), getVelocity$1(visualElement2));
|
|
}
|
|
function checkIfControllingVariants(props) {
|
|
var _a;
|
|
return typeof ((_a = props.animate) === null || _a === void 0 ? void 0 : _a.start) === "function" || isVariantLabel(props.initial) || isVariantLabel(props.animate) || isVariantLabel(props.whileHover) || isVariantLabel(props.whileDrag) || isVariantLabel(props.whileTap) || isVariantLabel(props.whileFocus) || isVariantLabel(props.exit);
|
|
}
|
|
function checkIfVariantNode(props) {
|
|
return Boolean(checkIfControllingVariants(props) || props.variants);
|
|
}
|
|
function setMotionValue(visualElement2, key, value) {
|
|
if (visualElement2.hasValue(key)) {
|
|
visualElement2.getValue(key).set(value);
|
|
} else {
|
|
visualElement2.addValue(key, motionValue(value));
|
|
}
|
|
}
|
|
function setTarget(visualElement2, definition) {
|
|
var resolved = resolveVariant(visualElement2, definition);
|
|
var _a = resolved ? visualElement2.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b;
|
|
_a.transition;
|
|
var target = __rest(_a, ["transitionEnd", "transition"]);
|
|
target = Object.assign(Object.assign({}, target), transitionEnd);
|
|
for (var key in target) {
|
|
var value = resolveFinalValueInKeyframes(target[key]);
|
|
setMotionValue(visualElement2, key, value);
|
|
}
|
|
}
|
|
function checkTargetForNewValues(visualElement2, target, origin) {
|
|
var _a, _b, _c;
|
|
var _d;
|
|
var newValueKeys = Object.keys(target).filter(function(key2) {
|
|
return !visualElement2.hasValue(key2);
|
|
});
|
|
var numNewValues = newValueKeys.length;
|
|
if (!numNewValues)
|
|
return;
|
|
for (var i = 0; i < numNewValues; i++) {
|
|
var key = newValueKeys[i];
|
|
var targetValue = target[key];
|
|
var value = null;
|
|
if (Array.isArray(targetValue)) {
|
|
value = targetValue[0];
|
|
}
|
|
if (value === null) {
|
|
value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement2.readValue(key)) !== null && _b !== void 0 ? _b : target[key];
|
|
}
|
|
if (value === void 0 || value === null)
|
|
continue;
|
|
if (typeof value === "string" && isNumericalString(value)) {
|
|
value = parseFloat(value);
|
|
} else if (!findValueType(value) && complex.test(targetValue)) {
|
|
value = getAnimatableNone(key, targetValue);
|
|
}
|
|
visualElement2.addValue(key, motionValue(value));
|
|
(_c = (_d = origin)[key]) !== null && _c !== void 0 ? _c : _d[key] = value;
|
|
visualElement2.setBaseTarget(key, value);
|
|
}
|
|
}
|
|
function getOriginFromTransition(key, transition) {
|
|
if (!transition)
|
|
return;
|
|
var valueTransition = transition[key] || transition["default"] || transition;
|
|
return valueTransition.from;
|
|
}
|
|
function getOrigin(target, transition, visualElement2) {
|
|
var _a, _b;
|
|
var origin = {};
|
|
for (var key in target) {
|
|
origin[key] = (_a = getOriginFromTransition(key, transition)) !== null && _a !== void 0 ? _a : (_b = visualElement2.getValue(key)) === null || _b === void 0 ? void 0 : _b.get();
|
|
}
|
|
return origin;
|
|
}
|
|
function animateVisualElement(visualElement2, definition, options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
visualElement2.notifyAnimationStart();
|
|
var animation;
|
|
if (Array.isArray(definition)) {
|
|
var animations2 = definition.map(function(variant) {
|
|
return animateVariant(visualElement2, variant, options);
|
|
});
|
|
animation = Promise.all(animations2);
|
|
} else if (typeof definition === "string") {
|
|
animation = animateVariant(visualElement2, definition, options);
|
|
} else {
|
|
var resolvedDefinition = typeof definition === "function" ? resolveVariant(visualElement2, definition, options.custom) : definition;
|
|
animation = animateTarget(visualElement2, resolvedDefinition, options);
|
|
}
|
|
return animation.then(function() {
|
|
return visualElement2.notifyAnimationComplete(definition);
|
|
});
|
|
}
|
|
function animateVariant(visualElement2, variant, options) {
|
|
var _a;
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
var resolved = resolveVariant(visualElement2, variant, options.custom);
|
|
var _b = (resolved || {}).transition, transition = _b === void 0 ? visualElement2.getDefaultTransition() || {} : _b;
|
|
if (options.transitionOverride) {
|
|
transition = options.transitionOverride;
|
|
}
|
|
var getAnimation2 = resolved ? function() {
|
|
return animateTarget(visualElement2, resolved, options);
|
|
} : function() {
|
|
return Promise.resolve();
|
|
};
|
|
var getChildAnimations = ((_a = visualElement2.variantChildren) === null || _a === void 0 ? void 0 : _a.size) ? function(forwardDelay) {
|
|
if (forwardDelay === void 0) {
|
|
forwardDelay = 0;
|
|
}
|
|
var _a2 = transition.delayChildren, delayChildren = _a2 === void 0 ? 0 : _a2, staggerChildren = transition.staggerChildren, staggerDirection = transition.staggerDirection;
|
|
return animateChildren(visualElement2, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
|
|
} : function() {
|
|
return Promise.resolve();
|
|
};
|
|
var when = transition.when;
|
|
if (when) {
|
|
var _c = __read(when === "beforeChildren" ? [getAnimation2, getChildAnimations] : [getChildAnimations, getAnimation2], 2), first = _c[0], last = _c[1];
|
|
return first().then(last);
|
|
} else {
|
|
return Promise.all([getAnimation2(), getChildAnimations(options.delay)]);
|
|
}
|
|
}
|
|
function animateTarget(visualElement2, definition, _a) {
|
|
var _b;
|
|
var _c = _a === void 0 ? {} : _a, _d = _c.delay, delay = _d === void 0 ? 0 : _d, transitionOverride = _c.transitionOverride, type = _c.type;
|
|
var _e = visualElement2.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement2.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = __rest(_e, ["transition", "transitionEnd"]);
|
|
if (transitionOverride)
|
|
transition = transitionOverride;
|
|
var animations2 = [];
|
|
var animationTypeState = type && ((_b = visualElement2.animationState) === null || _b === void 0 ? void 0 : _b.getState()[type]);
|
|
for (var key in target) {
|
|
var value = visualElement2.getValue(key);
|
|
var valueTarget = target[key];
|
|
if (!value || valueTarget === void 0 || animationTypeState && shouldBlockAnimation(animationTypeState, key)) {
|
|
continue;
|
|
}
|
|
var animation = startAnimation(key, value, valueTarget, Object.assign({ delay }, transition));
|
|
animations2.push(animation);
|
|
}
|
|
return Promise.all(animations2).then(function() {
|
|
transitionEnd && setTarget(visualElement2, transitionEnd);
|
|
});
|
|
}
|
|
function animateChildren(visualElement2, variant, delayChildren, staggerChildren, staggerDirection, options) {
|
|
if (delayChildren === void 0) {
|
|
delayChildren = 0;
|
|
}
|
|
if (staggerChildren === void 0) {
|
|
staggerChildren = 0;
|
|
}
|
|
if (staggerDirection === void 0) {
|
|
staggerDirection = 1;
|
|
}
|
|
var animations2 = [];
|
|
var maxStaggerDuration = (visualElement2.variantChildren.size - 1) * staggerChildren;
|
|
var generateStaggerDuration = staggerDirection === 1 ? function(i) {
|
|
if (i === void 0) {
|
|
i = 0;
|
|
}
|
|
return i * staggerChildren;
|
|
} : function(i) {
|
|
if (i === void 0) {
|
|
i = 0;
|
|
}
|
|
return maxStaggerDuration - i * staggerChildren;
|
|
};
|
|
Array.from(visualElement2.variantChildren).sort(sortByTreeOrder).forEach(function(child, i) {
|
|
animations2.push(animateVariant(child, variant, Object.assign(Object.assign({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function() {
|
|
return child.notifyAnimationComplete(variant);
|
|
}));
|
|
});
|
|
return Promise.all(animations2);
|
|
}
|
|
function sortByTreeOrder(a, b) {
|
|
return a.sortNodePosition(b);
|
|
}
|
|
function shouldBlockAnimation(_a, key) {
|
|
var protectedKeys = _a.protectedKeys, needsAnimating = _a.needsAnimating;
|
|
var shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
|
|
needsAnimating[key] = false;
|
|
return shouldBlock;
|
|
}
|
|
var valueScaleCorrection = {};
|
|
function eachAxis(handler) {
|
|
return [handler("x"), handler("y")];
|
|
}
|
|
function noop(any) {
|
|
return any;
|
|
}
|
|
function convertBoundingBoxToAxisBox(_a) {
|
|
var top = _a.top, left = _a.left, right = _a.right, bottom = _a.bottom;
|
|
return {
|
|
x: { min: left, max: right },
|
|
y: { min: top, max: bottom }
|
|
};
|
|
}
|
|
function convertAxisBoxToBoundingBox(_a) {
|
|
var x = _a.x, y = _a.y;
|
|
return {
|
|
top: y.min,
|
|
bottom: y.max,
|
|
left: x.min,
|
|
right: x.max
|
|
};
|
|
}
|
|
function transformBoundingBox(_a, transformPoint2) {
|
|
var top = _a.top, left = _a.left, bottom = _a.bottom, right = _a.right;
|
|
if (transformPoint2 === void 0) {
|
|
transformPoint2 = noop;
|
|
}
|
|
var topLeft = transformPoint2({ x: left, y: top });
|
|
var bottomRight = transformPoint2({ x: right, y: bottom });
|
|
return {
|
|
top: topLeft.y,
|
|
left: topLeft.x,
|
|
bottom: bottomRight.y,
|
|
right: bottomRight.x
|
|
};
|
|
}
|
|
function axisBox() {
|
|
return { x: { min: 0, max: 1 }, y: { min: 0, max: 1 } };
|
|
}
|
|
function copyAxisBox(box) {
|
|
return {
|
|
x: Object.assign({}, box.x),
|
|
y: Object.assign({}, box.y)
|
|
};
|
|
}
|
|
var zeroDelta = {
|
|
translate: 0,
|
|
scale: 1,
|
|
origin: 0,
|
|
originPoint: 0
|
|
};
|
|
function delta() {
|
|
return {
|
|
x: Object.assign({}, zeroDelta),
|
|
y: Object.assign({}, zeroDelta)
|
|
};
|
|
}
|
|
function isDraggable(visualElement2) {
|
|
var _a = visualElement2.getProps(), drag2 = _a.drag, _dragX = _a._dragX;
|
|
return drag2 && !_dragX;
|
|
}
|
|
function resetAxis(axis, originAxis) {
|
|
axis.min = originAxis.min;
|
|
axis.max = originAxis.max;
|
|
}
|
|
function resetBox(box, originBox) {
|
|
resetAxis(box.x, originBox.x);
|
|
resetAxis(box.y, originBox.y);
|
|
}
|
|
function scalePoint(point, scale2, originPoint) {
|
|
var distanceFromOrigin = point - originPoint;
|
|
var scaled = scale2 * distanceFromOrigin;
|
|
return originPoint + scaled;
|
|
}
|
|
function applyPointDelta(point, translate, scale2, originPoint, boxScale) {
|
|
if (boxScale !== void 0) {
|
|
point = scalePoint(point, boxScale, originPoint);
|
|
}
|
|
return scalePoint(point, scale2, originPoint) + translate;
|
|
}
|
|
function applyAxisDelta(axis, translate, scale2, originPoint, boxScale) {
|
|
if (translate === void 0) {
|
|
translate = 0;
|
|
}
|
|
if (scale2 === void 0) {
|
|
scale2 = 1;
|
|
}
|
|
axis.min = applyPointDelta(axis.min, translate, scale2, originPoint, boxScale);
|
|
axis.max = applyPointDelta(axis.max, translate, scale2, originPoint, boxScale);
|
|
}
|
|
function applyBoxDelta(box, _a) {
|
|
var x = _a.x, y = _a.y;
|
|
applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);
|
|
applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);
|
|
}
|
|
function applyAxisTransforms(final, axis, transforms, _a) {
|
|
var _b = __read(_a, 3), key = _b[0], scaleKey = _b[1], originKey = _b[2];
|
|
final.min = axis.min;
|
|
final.max = axis.max;
|
|
var axisOrigin = transforms[originKey] !== void 0 ? transforms[originKey] : 0.5;
|
|
var originPoint = mix(axis.min, axis.max, axisOrigin);
|
|
applyAxisDelta(final, transforms[key], transforms[scaleKey], originPoint, transforms.scale);
|
|
}
|
|
var xKeys = ["x", "scaleX", "originX"];
|
|
var yKeys = ["y", "scaleY", "originY"];
|
|
function applyBoxTransforms(finalBox, box, transforms) {
|
|
applyAxisTransforms(finalBox.x, box.x, transforms, xKeys);
|
|
applyAxisTransforms(finalBox.y, box.y, transforms, yKeys);
|
|
}
|
|
function removePointDelta(point, translate, scale2, originPoint, boxScale) {
|
|
point -= translate;
|
|
point = scalePoint(point, 1 / scale2, originPoint);
|
|
if (boxScale !== void 0) {
|
|
point = scalePoint(point, 1 / boxScale, originPoint);
|
|
}
|
|
return point;
|
|
}
|
|
function removeAxisDelta(axis, translate, scale2, origin, boxScale) {
|
|
if (translate === void 0) {
|
|
translate = 0;
|
|
}
|
|
if (scale2 === void 0) {
|
|
scale2 = 1;
|
|
}
|
|
if (origin === void 0) {
|
|
origin = 0.5;
|
|
}
|
|
var originPoint = mix(axis.min, axis.max, origin) - translate;
|
|
axis.min = removePointDelta(axis.min, translate, scale2, originPoint, boxScale);
|
|
axis.max = removePointDelta(axis.max, translate, scale2, originPoint, boxScale);
|
|
}
|
|
function removeAxisTransforms(axis, transforms, _a) {
|
|
var _b = __read(_a, 3), key = _b[0], scaleKey = _b[1], originKey = _b[2];
|
|
removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale);
|
|
}
|
|
function removeBoxTransforms(box, transforms) {
|
|
removeAxisTransforms(box.x, transforms, xKeys);
|
|
removeAxisTransforms(box.y, transforms, yKeys);
|
|
}
|
|
function applyTreeDeltas(box, treeScale, treePath) {
|
|
var treeLength = treePath.length;
|
|
if (!treeLength)
|
|
return;
|
|
treeScale.x = treeScale.y = 1;
|
|
var node;
|
|
var delta2;
|
|
for (var i = 0; i < treeLength; i++) {
|
|
node = treePath[i];
|
|
delta2 = node.getLayoutState().delta;
|
|
treeScale.x *= delta2.x.scale;
|
|
treeScale.y *= delta2.y.scale;
|
|
applyBoxDelta(box, delta2);
|
|
if (isDraggable(node)) {
|
|
applyBoxTransforms(box, box, node.getLatestValues());
|
|
}
|
|
}
|
|
}
|
|
var clampProgress = function(v) {
|
|
return clamp(0, 1, v);
|
|
};
|
|
function isNear(value, target, maxDistance) {
|
|
if (target === void 0) {
|
|
target = 0;
|
|
}
|
|
if (maxDistance === void 0) {
|
|
maxDistance = 0.01;
|
|
}
|
|
return distance(value, target) < maxDistance;
|
|
}
|
|
function calcLength(axis) {
|
|
return axis.max - axis.min;
|
|
}
|
|
function calcOrigin$1(source, target) {
|
|
var origin = 0.5;
|
|
var sourceLength = calcLength(source);
|
|
var targetLength = calcLength(target);
|
|
if (targetLength > sourceLength) {
|
|
origin = progress(target.min, target.max - sourceLength, source.min);
|
|
} else if (sourceLength > targetLength) {
|
|
origin = progress(source.min, source.max - targetLength, target.min);
|
|
}
|
|
return clampProgress(origin);
|
|
}
|
|
function updateAxisDelta(delta2, source, target, origin) {
|
|
if (origin === void 0) {
|
|
origin = 0.5;
|
|
}
|
|
delta2.origin = origin;
|
|
delta2.originPoint = mix(source.min, source.max, delta2.origin);
|
|
delta2.scale = calcLength(target) / calcLength(source);
|
|
if (isNear(delta2.scale, 1, 1e-4))
|
|
delta2.scale = 1;
|
|
delta2.translate = mix(target.min, target.max, delta2.origin) - delta2.originPoint;
|
|
if (isNear(delta2.translate))
|
|
delta2.translate = 0;
|
|
}
|
|
function updateBoxDelta(delta2, source, target, origin) {
|
|
updateAxisDelta(delta2.x, source.x, target.x, defaultOrigin(origin.originX));
|
|
updateAxisDelta(delta2.y, source.y, target.y, defaultOrigin(origin.originY));
|
|
}
|
|
function defaultOrigin(origin) {
|
|
return typeof origin === "number" ? origin : 0.5;
|
|
}
|
|
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);
|
|
}
|
|
var isMotionValue = function(value) {
|
|
return value !== null && typeof value === "object" && value.getVelocity;
|
|
};
|
|
var createProjectionState = function() {
|
|
return {
|
|
isEnabled: false,
|
|
isTargetLocked: false,
|
|
target: axisBox(),
|
|
targetFinal: axisBox()
|
|
};
|
|
};
|
|
function createLayoutState() {
|
|
return {
|
|
isHydrated: false,
|
|
layout: axisBox(),
|
|
layoutCorrected: axisBox(),
|
|
treeScale: { x: 1, y: 1 },
|
|
delta: delta(),
|
|
deltaFinal: delta(),
|
|
deltaTransform: ""
|
|
};
|
|
}
|
|
var zeroLayout = createLayoutState();
|
|
function buildLayoutProjectionTransform(_a, treeScale, latestTransform) {
|
|
var x = _a.x, y = _a.y;
|
|
var xTranslate = x.translate / treeScale.x;
|
|
var yTranslate = y.translate / treeScale.y;
|
|
var transform = "translate3d(" + xTranslate + "px, " + yTranslate + "px, 0) ";
|
|
if (latestTransform) {
|
|
var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
|
|
if (rotate)
|
|
transform += "rotate(" + rotate + ") ";
|
|
if (rotateX)
|
|
transform += "rotateX(" + rotateX + ") ";
|
|
if (rotateY)
|
|
transform += "rotateY(" + rotateY + ") ";
|
|
}
|
|
transform += "scale(" + x.scale + ", " + y.scale + ")";
|
|
return !latestTransform && transform === identityProjection ? "" : transform;
|
|
}
|
|
function buildLayoutProjectionTransformOrigin(_a) {
|
|
var deltaFinal = _a.deltaFinal;
|
|
return deltaFinal.x.origin * 100 + "% " + deltaFinal.y.origin * 100 + "% 0";
|
|
}
|
|
var identityProjection = buildLayoutProjectionTransform(zeroLayout.delta, zeroLayout.treeScale, { x: 1, y: 1 });
|
|
var isAnimationControls = function(v) {
|
|
return typeof v === "object" && typeof v.start === "function";
|
|
};
|
|
function shallowCompare(next, prev) {
|
|
if (!Array.isArray(prev))
|
|
return false;
|
|
var prevLength = prev.length;
|
|
if (prevLength !== next.length)
|
|
return false;
|
|
for (var i = 0; i < prevLength; i++) {
|
|
if (prev[i] !== next[i])
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
var AnimationType;
|
|
(function(AnimationType2) {
|
|
AnimationType2["Animate"] = "animate";
|
|
AnimationType2["Hover"] = "whileHover";
|
|
AnimationType2["Tap"] = "whileTap";
|
|
AnimationType2["Drag"] = "whileDrag";
|
|
AnimationType2["Focus"] = "whileFocus";
|
|
AnimationType2["Exit"] = "exit";
|
|
})(AnimationType || (AnimationType = {}));
|
|
var variantPriorityOrder = [
|
|
AnimationType.Animate,
|
|
AnimationType.Hover,
|
|
AnimationType.Tap,
|
|
AnimationType.Drag,
|
|
AnimationType.Focus,
|
|
AnimationType.Exit
|
|
];
|
|
var reversePriorityOrder = __spreadArray([], __read(variantPriorityOrder)).reverse();
|
|
var numAnimationTypes = variantPriorityOrder.length;
|
|
function animateList(visualElement2) {
|
|
return function(animations2) {
|
|
return Promise.all(animations2.map(function(_a) {
|
|
var animation = _a.animation, options = _a.options;
|
|
return animateVisualElement(visualElement2, animation, options);
|
|
}));
|
|
};
|
|
}
|
|
function createAnimationState(visualElement2) {
|
|
var animate2 = animateList(visualElement2);
|
|
var state = createState();
|
|
var allAnimatedKeys = {};
|
|
var isInitialRender = true;
|
|
var buildResolvedTypeValues = function(acc, definition) {
|
|
var resolved = resolveVariant(visualElement2, definition);
|
|
if (resolved) {
|
|
resolved.transition;
|
|
var transitionEnd = resolved.transitionEnd, target = __rest(resolved, ["transition", "transitionEnd"]);
|
|
acc = Object.assign(Object.assign(Object.assign({}, acc), target), transitionEnd);
|
|
}
|
|
return acc;
|
|
};
|
|
function isAnimated(key) {
|
|
return allAnimatedKeys[key] !== void 0;
|
|
}
|
|
function setAnimateFunction(makeAnimator) {
|
|
animate2 = makeAnimator(visualElement2);
|
|
}
|
|
function animateChanges(options, changedActiveType) {
|
|
var _a;
|
|
var props = visualElement2.getProps();
|
|
var context = visualElement2.getVariantContext(true) || {};
|
|
var animations2 = [];
|
|
var removedKeys = /* @__PURE__ */ new Set();
|
|
var encounteredKeys = {};
|
|
var removedVariantIndex = Infinity;
|
|
var _loop_1 = function(i2) {
|
|
var type = reversePriorityOrder[i2];
|
|
var typeState = state[type];
|
|
var prop = (_a = props[type]) !== null && _a !== void 0 ? _a : context[type];
|
|
var propIsVariant = isVariantLabel(prop);
|
|
var activeDelta = type === changedActiveType ? typeState.isActive : null;
|
|
if (activeDelta === false)
|
|
removedVariantIndex = i2;
|
|
var isInherited = prop === context[type] && prop !== props[type] && propIsVariant;
|
|
if (isInherited && isInitialRender && visualElement2.manuallyAnimateOnMount) {
|
|
isInherited = false;
|
|
}
|
|
typeState.protectedKeys = Object.assign({}, encounteredKeys);
|
|
if (
|
|
// If it isn't active and hasn't *just* been set as inactive
|
|
!typeState.isActive && activeDelta === null || // If we didn't and don't have any defined prop for this animation type
|
|
!prop && !typeState.prevProp || // Or if the prop doesn't define an animation
|
|
isAnimationControls(prop) || typeof prop === "boolean"
|
|
) {
|
|
return "continue";
|
|
}
|
|
var shouldAnimateType = variantsHaveChanged(typeState.prevProp, prop) || // If we're making this variant active, we want to always make it active
|
|
type === changedActiveType && typeState.isActive && !isInherited && propIsVariant || // If we removed a higher-priority variant (i is in reverse order)
|
|
i2 > removedVariantIndex && propIsVariant;
|
|
var definitionList = Array.isArray(prop) ? prop : [prop];
|
|
var resolvedValues = definitionList.reduce(buildResolvedTypeValues, {});
|
|
if (activeDelta === false)
|
|
resolvedValues = {};
|
|
var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b;
|
|
var allKeys = Object.assign(Object.assign({}, prevResolvedValues), resolvedValues);
|
|
var markToAnimate = function(key2) {
|
|
shouldAnimateType = true;
|
|
removedKeys.delete(key2);
|
|
typeState.needsAnimating[key2] = true;
|
|
};
|
|
for (var key in allKeys) {
|
|
var next = resolvedValues[key];
|
|
var prev = prevResolvedValues[key];
|
|
if (encounteredKeys.hasOwnProperty(key))
|
|
continue;
|
|
if (next !== prev) {
|
|
if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
|
|
if (!shallowCompare(next, prev)) {
|
|
markToAnimate(key);
|
|
} else {
|
|
typeState.protectedKeys[key] = true;
|
|
}
|
|
} else if (next !== void 0) {
|
|
markToAnimate(key);
|
|
} else {
|
|
removedKeys.add(key);
|
|
}
|
|
} else if (next !== void 0 && removedKeys.has(key)) {
|
|
markToAnimate(key);
|
|
} else {
|
|
typeState.protectedKeys[key] = true;
|
|
}
|
|
}
|
|
typeState.prevProp = prop;
|
|
typeState.prevResolvedValues = resolvedValues;
|
|
if (typeState.isActive) {
|
|
encounteredKeys = Object.assign(Object.assign({}, encounteredKeys), resolvedValues);
|
|
}
|
|
if (isInitialRender && visualElement2.blockInitialAnimation) {
|
|
shouldAnimateType = false;
|
|
}
|
|
if (shouldAnimateType && !isInherited) {
|
|
animations2.push.apply(animations2, __spreadArray([], __read(definitionList.map(function(animation) {
|
|
return {
|
|
animation,
|
|
options: Object.assign({ type }, options)
|
|
};
|
|
}))));
|
|
}
|
|
};
|
|
for (var i = 0; i < numAnimationTypes; i++) {
|
|
_loop_1(i);
|
|
}
|
|
allAnimatedKeys = Object.assign({}, encounteredKeys);
|
|
if (removedKeys.size) {
|
|
var fallbackAnimation_1 = {};
|
|
removedKeys.forEach(function(key) {
|
|
var fallbackTarget = visualElement2.getBaseTarget(key);
|
|
if (fallbackTarget !== void 0) {
|
|
fallbackAnimation_1[key] = fallbackTarget;
|
|
}
|
|
});
|
|
animations2.push({ animation: fallbackAnimation_1 });
|
|
}
|
|
var shouldAnimate = Boolean(animations2.length);
|
|
if (isInitialRender && props.initial === false && !visualElement2.manuallyAnimateOnMount) {
|
|
shouldAnimate = false;
|
|
}
|
|
isInitialRender = false;
|
|
return shouldAnimate ? animate2(animations2) : Promise.resolve();
|
|
}
|
|
function setActive(type, isActive, options) {
|
|
var _a;
|
|
if (state[type].isActive === isActive)
|
|
return Promise.resolve();
|
|
(_a = visualElement2.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function(child) {
|
|
var _a2;
|
|
return (_a2 = child.animationState) === null || _a2 === void 0 ? void 0 : _a2.setActive(type, isActive);
|
|
});
|
|
state[type].isActive = isActive;
|
|
return animateChanges(options, type);
|
|
}
|
|
return {
|
|
isAnimated,
|
|
animateChanges,
|
|
setActive,
|
|
setAnimateFunction,
|
|
getState: function() {
|
|
return state;
|
|
}
|
|
};
|
|
}
|
|
function variantsHaveChanged(prev, next) {
|
|
if (typeof next === "string") {
|
|
return next !== prev;
|
|
} else if (isVariantLabels(next)) {
|
|
return !shallowCompare(next, prev);
|
|
}
|
|
return false;
|
|
}
|
|
function createTypeState(isActive) {
|
|
if (isActive === void 0) {
|
|
isActive = false;
|
|
}
|
|
return {
|
|
isActive,
|
|
protectedKeys: {},
|
|
needsAnimating: {},
|
|
prevResolvedValues: {}
|
|
};
|
|
}
|
|
function createState() {
|
|
var _a;
|
|
return _a = {}, _a[AnimationType.Animate] = createTypeState(true), _a[AnimationType.Hover] = createTypeState(), _a[AnimationType.Tap] = createTypeState(), _a[AnimationType.Drag] = createTypeState(), _a[AnimationType.Focus] = createTypeState(), _a[AnimationType.Exit] = createTypeState(), _a;
|
|
}
|
|
var names = [
|
|
"LayoutMeasure",
|
|
"BeforeLayoutMeasure",
|
|
"LayoutUpdate",
|
|
"ViewportBoxUpdate",
|
|
"Update",
|
|
"Render",
|
|
"AnimationComplete",
|
|
"LayoutAnimationComplete",
|
|
"AnimationStart",
|
|
"SetAxisTarget",
|
|
"Unmount"
|
|
];
|
|
function createLifecycles() {
|
|
var managers = names.map(function() {
|
|
return new SubscriptionManager();
|
|
});
|
|
var propSubscriptions = {};
|
|
var lifecycles = {
|
|
clearAllListeners: function() {
|
|
return managers.forEach(function(manager) {
|
|
return manager.clear();
|
|
});
|
|
},
|
|
updatePropListeners: function(props) {
|
|
return names.forEach(function(name) {
|
|
var _a;
|
|
(_a = propSubscriptions[name]) === null || _a === void 0 ? void 0 : _a.call(propSubscriptions);
|
|
var on = "on" + name;
|
|
var propListener = props[on];
|
|
if (propListener) {
|
|
propSubscriptions[name] = lifecycles[on](propListener);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
managers.forEach(function(manager, i) {
|
|
lifecycles["on" + names[i]] = function(handler) {
|
|
return manager.add(handler);
|
|
};
|
|
lifecycles["notify" + names[i]] = function() {
|
|
var args = [];
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
args[_i] = arguments[_i];
|
|
}
|
|
return manager.notify.apply(manager, __spreadArray([], __read(args)));
|
|
};
|
|
});
|
|
return lifecycles;
|
|
}
|
|
function updateMotionValuesFromProps(element, next, prev) {
|
|
var _a;
|
|
for (var key in next) {
|
|
var nextValue = next[key];
|
|
var prevValue = prev[key];
|
|
if (isMotionValue(nextValue)) {
|
|
element.addValue(key, nextValue);
|
|
} else if (isMotionValue(prevValue)) {
|
|
element.addValue(key, motionValue(nextValue));
|
|
} else if (prevValue !== nextValue) {
|
|
if (element.hasValue(key)) {
|
|
var existingValue = element.getValue(key);
|
|
!existingValue.hasAnimated && existingValue.set(nextValue);
|
|
} else {
|
|
element.addValue(key, motionValue((_a = element.getStaticValue(key)) !== null && _a !== void 0 ? _a : nextValue));
|
|
}
|
|
}
|
|
}
|
|
for (var key in prev) {
|
|
if (next[key] === void 0)
|
|
element.removeValue(key);
|
|
}
|
|
return next;
|
|
}
|
|
function updateLayoutDeltas(_a, _b, treePath, transformOrigin) {
|
|
var delta2 = _a.delta, layout = _a.layout, layoutCorrected = _a.layoutCorrected, treeScale = _a.treeScale;
|
|
var target = _b.target;
|
|
resetBox(layoutCorrected, layout);
|
|
applyTreeDeltas(layoutCorrected, treeScale, treePath);
|
|
updateBoxDelta(delta2, layoutCorrected, target, transformOrigin);
|
|
}
|
|
var compareByDepth = function(a, b) {
|
|
return a.depth - b.depth;
|
|
};
|
|
var FlatTree = (
|
|
/** @class */
|
|
function() {
|
|
function FlatTree2() {
|
|
this.children = [];
|
|
this.isDirty = false;
|
|
}
|
|
FlatTree2.prototype.add = function(child) {
|
|
addUniqueItem(this.children, child);
|
|
this.isDirty = true;
|
|
};
|
|
FlatTree2.prototype.remove = function(child) {
|
|
removeItem(this.children, child);
|
|
this.isDirty = true;
|
|
};
|
|
FlatTree2.prototype.forEach = function(callback) {
|
|
this.isDirty && this.children.sort(compareByDepth);
|
|
var numChildren = this.children.length;
|
|
for (var i = 0; i < numChildren; i++) {
|
|
callback(this.children[i]);
|
|
}
|
|
};
|
|
return FlatTree2;
|
|
}()
|
|
);
|
|
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 setCurrentViewportBox(visualElement2) {
|
|
var projectionParent = visualElement2.getProjectionParent();
|
|
if (!projectionParent) {
|
|
visualElement2.rebaseProjectionTarget();
|
|
return;
|
|
}
|
|
var relativeOffset = calcRelativeOffset(projectionParent.getLayoutState().layout, visualElement2.getLayoutState().layout);
|
|
eachAxis(function(axis) {
|
|
visualElement2.setProjectionTargetAxis(axis, relativeOffset[axis].min, relativeOffset[axis].max, true);
|
|
});
|
|
}
|
|
var visualElement = function(_a) {
|
|
var _b = _a.treeType, treeType = _b === void 0 ? "" : _b, build = _a.build, getBaseTarget = _a.getBaseTarget, makeTargetAnimatable = _a.makeTargetAnimatable, measureViewportBox = _a.measureViewportBox, renderInstance = _a.render, readValueFromInstance = _a.readValueFromInstance, resetTransform = _a.resetTransform, restoreTransform = _a.restoreTransform, removeValueFromRenderState = _a.removeValueFromRenderState, sortNodePosition = _a.sortNodePosition, scrapeMotionValuesFromProps2 = _a.scrapeMotionValuesFromProps;
|
|
return function(_a2, options) {
|
|
var parent = _a2.parent, props = _a2.props, presenceId2 = _a2.presenceId, blockInitialAnimation = _a2.blockInitialAnimation, visualState = _a2.visualState;
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
var latestValues = visualState.latestValues, renderState = visualState.renderState;
|
|
var instance;
|
|
var lifecycles = createLifecycles();
|
|
var projection = createProjectionState();
|
|
var projectionParent;
|
|
var leadProjection = projection;
|
|
var leadLatestValues = latestValues;
|
|
var unsubscribeFromLeadVisualElement;
|
|
var layoutState = createLayoutState();
|
|
var crossfader;
|
|
var hasViewportBoxUpdated = false;
|
|
var values = /* @__PURE__ */ new Map();
|
|
var valueSubscriptions = /* @__PURE__ */ new Map();
|
|
var prevMotionValues = {};
|
|
var projectionTargetProgress;
|
|
var baseTarget = Object.assign({}, latestValues);
|
|
var removeFromVariantTree;
|
|
function render() {
|
|
if (!instance)
|
|
return;
|
|
if (element.isProjectionReady()) {
|
|
applyBoxTransforms(leadProjection.targetFinal, leadProjection.target, leadLatestValues);
|
|
updateBoxDelta(layoutState.deltaFinal, layoutState.layoutCorrected, leadProjection.targetFinal, latestValues);
|
|
}
|
|
triggerBuild();
|
|
renderInstance(instance, renderState);
|
|
}
|
|
function triggerBuild() {
|
|
var valuesToRender = latestValues;
|
|
if (crossfader && crossfader.isActive()) {
|
|
var crossfadedValues = crossfader.getCrossfadeState(element);
|
|
if (crossfadedValues)
|
|
valuesToRender = crossfadedValues;
|
|
}
|
|
build(element, renderState, valuesToRender, leadProjection, layoutState, options, props);
|
|
}
|
|
function update() {
|
|
lifecycles.notifyUpdate(latestValues);
|
|
}
|
|
function updateLayoutProjection() {
|
|
if (!element.isProjectionReady())
|
|
return;
|
|
var delta2 = layoutState.delta, treeScale = layoutState.treeScale;
|
|
var prevTreeScaleX = treeScale.x;
|
|
var prevTreeScaleY = treeScale.y;
|
|
var prevDeltaTransform = layoutState.deltaTransform;
|
|
updateLayoutDeltas(layoutState, leadProjection, element.path, latestValues);
|
|
hasViewportBoxUpdated && element.notifyViewportBoxUpdate(leadProjection.target, delta2);
|
|
hasViewportBoxUpdated = false;
|
|
var deltaTransform = buildLayoutProjectionTransform(delta2, treeScale);
|
|
if (deltaTransform !== prevDeltaTransform || // Also compare calculated treeScale, for values that rely on this only for scale correction
|
|
prevTreeScaleX !== treeScale.x || prevTreeScaleY !== treeScale.y) {
|
|
element.scheduleRender();
|
|
}
|
|
layoutState.deltaTransform = deltaTransform;
|
|
}
|
|
function updateTreeLayoutProjection() {
|
|
element.layoutTree.forEach(fireUpdateLayoutProjection);
|
|
}
|
|
function bindToMotionValue(key2, value2) {
|
|
var removeOnChange = value2.onChange(function(latestValue) {
|
|
latestValues[key2] = latestValue;
|
|
props.onUpdate && sync.update(update, false, true);
|
|
});
|
|
var removeOnRenderRequest = value2.onRenderRequest(element.scheduleRender);
|
|
valueSubscriptions.set(key2, function() {
|
|
removeOnChange();
|
|
removeOnRenderRequest();
|
|
});
|
|
}
|
|
var initialMotionValues = scrapeMotionValuesFromProps2(props);
|
|
for (var key in initialMotionValues) {
|
|
var value = initialMotionValues[key];
|
|
if (latestValues[key] !== void 0 && isMotionValue(value)) {
|
|
value.set(latestValues[key], false);
|
|
}
|
|
}
|
|
var isControllingVariants = checkIfControllingVariants(props);
|
|
var isVariantNode = checkIfVariantNode(props);
|
|
var element = Object.assign(Object.assign({
|
|
treeType,
|
|
/**
|
|
* This is a mirror of the internal instance prop, which keeps
|
|
* VisualElement type-compatible with React's RefObject.
|
|
*/
|
|
current: null,
|
|
/**
|
|
* The depth of this visual element within the visual element tree.
|
|
*/
|
|
depth: parent ? parent.depth + 1 : 0,
|
|
parent,
|
|
children: /* @__PURE__ */ new Set(),
|
|
/**
|
|
* An ancestor path back to the root visual element. This is used
|
|
* by layout projection to quickly recurse back up the tree.
|
|
*/
|
|
path: parent ? __spreadArray(__spreadArray([], __read(parent.path)), [parent]) : [],
|
|
layoutTree: parent ? parent.layoutTree : new FlatTree(),
|
|
/**
|
|
*
|
|
*/
|
|
presenceId: presenceId2,
|
|
projection,
|
|
/**
|
|
* If this component is part of the variant tree, it should track
|
|
* any children that are also part of the tree. This is essentially
|
|
* a shadow tree to simplify logic around how to stagger over children.
|
|
*/
|
|
variantChildren: isVariantNode ? /* @__PURE__ */ new Set() : void 0,
|
|
/**
|
|
* Whether this instance is visible. This can be changed imperatively
|
|
* by AnimateSharedLayout, is analogous to CSS's visibility in that
|
|
* hidden elements should take up layout, and needs enacting by the configured
|
|
* render function.
|
|
*/
|
|
isVisible: void 0,
|
|
/**
|
|
* Normally, if a component is controlled by a parent's variants, it can
|
|
* rely on that ancestor to trigger animations further down the tree.
|
|
* However, if a component is created after its parent is mounted, the parent
|
|
* won't trigger that mount animation so the child needs to.
|
|
*
|
|
* TODO: This might be better replaced with a method isParentMounted
|
|
*/
|
|
manuallyAnimateOnMount: Boolean(parent === null || parent === void 0 ? void 0 : parent.isMounted()),
|
|
/**
|
|
* This can be set by AnimatePresence to force components that mount
|
|
* at the same time as it to mount as if they have initial={false} set.
|
|
*/
|
|
blockInitialAnimation,
|
|
/**
|
|
* Determine whether this component has mounted yet. This is mostly used
|
|
* by variant children to determine whether they need to trigger their
|
|
* own animations on mount.
|
|
*/
|
|
isMounted: function() {
|
|
return Boolean(instance);
|
|
},
|
|
mount: function(newInstance) {
|
|
instance = element.current = newInstance;
|
|
element.pointTo(element);
|
|
if (isVariantNode && parent && !isControllingVariants) {
|
|
removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element);
|
|
}
|
|
parent === null || parent === void 0 ? void 0 : parent.children.add(element);
|
|
},
|
|
/**
|
|
*
|
|
*/
|
|
unmount: function() {
|
|
cancelSync.update(update);
|
|
cancelSync.render(render);
|
|
cancelSync.preRender(element.updateLayoutProjection);
|
|
valueSubscriptions.forEach(function(remove) {
|
|
return remove();
|
|
});
|
|
element.stopLayoutAnimation();
|
|
element.layoutTree.remove(element);
|
|
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();
|
|
},
|
|
/**
|
|
* Add a child visual element to our set of children.
|
|
*/
|
|
addVariantChild: function(child) {
|
|
var _a3;
|
|
var closestVariantNode = element.getClosestVariantNode();
|
|
if (closestVariantNode) {
|
|
(_a3 = closestVariantNode.variantChildren) === null || _a3 === void 0 ? void 0 : _a3.add(child);
|
|
return function() {
|
|
return closestVariantNode.variantChildren.delete(child);
|
|
};
|
|
}
|
|
},
|
|
sortNodePosition: function(other) {
|
|
if (!sortNodePosition || treeType !== other.treeType)
|
|
return 0;
|
|
return sortNodePosition(element.getInstance(), other.getInstance());
|
|
},
|
|
/**
|
|
* Returns the closest variant node in the tree starting from
|
|
* this visual element.
|
|
*/
|
|
getClosestVariantNode: function() {
|
|
return isVariantNode ? element : parent === null || parent === void 0 ? void 0 : parent.getClosestVariantNode();
|
|
},
|
|
/**
|
|
* A method that schedules an update to layout projections throughout
|
|
* the tree. We inherit from the parent so there's only ever one
|
|
* job scheduled on the next frame - that of the root visual element.
|
|
*/
|
|
scheduleUpdateLayoutProjection: parent ? parent.scheduleUpdateLayoutProjection : function() {
|
|
return sync.preRender(element.updateTreeLayoutProjection, false, true);
|
|
},
|
|
/**
|
|
* Expose the latest layoutId prop.
|
|
*/
|
|
getLayoutId: function() {
|
|
return props.layoutId;
|
|
},
|
|
/**
|
|
* Returns the current instance.
|
|
*/
|
|
getInstance: function() {
|
|
return instance;
|
|
},
|
|
/**
|
|
* Get/set the latest static values.
|
|
*/
|
|
getStaticValue: function(key2) {
|
|
return latestValues[key2];
|
|
},
|
|
setStaticValue: function(key2, value2) {
|
|
return latestValues[key2] = value2;
|
|
},
|
|
/**
|
|
* Returns the latest motion value state. Currently only used to take
|
|
* a snapshot of the visual element - perhaps this can return the whole
|
|
* visual state
|
|
*/
|
|
getLatestValues: function() {
|
|
return latestValues;
|
|
},
|
|
/**
|
|
* Set the visiblity of the visual element. If it's changed, schedule
|
|
* a render to reflect these changes.
|
|
*/
|
|
setVisibility: function(visibility) {
|
|
if (element.isVisible === visibility)
|
|
return;
|
|
element.isVisible = visibility;
|
|
element.scheduleRender();
|
|
},
|
|
/**
|
|
* Make a target animatable by Popmotion. For instance, if we're
|
|
* trying to animate width from 100px to 100vw we need to measure 100vw
|
|
* in pixels to determine what we really need to animate to. This is also
|
|
* pluggable to support Framer's custom value types like Color,
|
|
* and CSS variables.
|
|
*/
|
|
makeTargetAnimatable: function(target, canMutate) {
|
|
if (canMutate === void 0) {
|
|
canMutate = true;
|
|
}
|
|
return makeTargetAnimatable(element, target, props, canMutate);
|
|
},
|
|
// Motion values ========================
|
|
/**
|
|
* Add a motion value and bind it to this visual element.
|
|
*/
|
|
addValue: function(key2, value2) {
|
|
if (element.hasValue(key2))
|
|
element.removeValue(key2);
|
|
values.set(key2, value2);
|
|
latestValues[key2] = value2.get();
|
|
bindToMotionValue(key2, value2);
|
|
},
|
|
/**
|
|
* Remove a motion value and unbind any active subscriptions.
|
|
*/
|
|
removeValue: function(key2) {
|
|
var _a3;
|
|
values.delete(key2);
|
|
(_a3 = valueSubscriptions.get(key2)) === null || _a3 === void 0 ? void 0 : _a3();
|
|
valueSubscriptions.delete(key2);
|
|
delete latestValues[key2];
|
|
removeValueFromRenderState(key2, renderState);
|
|
},
|
|
/**
|
|
* Check whether we have a motion value for this key
|
|
*/
|
|
hasValue: function(key2) {
|
|
return values.has(key2);
|
|
},
|
|
/**
|
|
* Get a motion value for this key. If called with a default
|
|
* value, we'll create one if none exists.
|
|
*/
|
|
getValue: function(key2, defaultValue) {
|
|
var value2 = values.get(key2);
|
|
if (value2 === void 0 && defaultValue !== void 0) {
|
|
value2 = motionValue(defaultValue);
|
|
element.addValue(key2, value2);
|
|
}
|
|
return value2;
|
|
},
|
|
/**
|
|
* Iterate over our motion values.
|
|
*/
|
|
forEachValue: function(callback) {
|
|
return values.forEach(callback);
|
|
},
|
|
/**
|
|
* If we're trying to animate to a previously unencountered value,
|
|
* we need to check for it in our state and as a last resort read it
|
|
* directly from the instance (which might have performance implications).
|
|
*/
|
|
readValue: function(key2) {
|
|
var _a3;
|
|
return (_a3 = latestValues[key2]) !== null && _a3 !== void 0 ? _a3 : readValueFromInstance(instance, key2, options);
|
|
},
|
|
/**
|
|
* Set the base target to later animate back to. This is currently
|
|
* only hydrated on creation and when we first read a value.
|
|
*/
|
|
setBaseTarget: function(key2, value2) {
|
|
baseTarget[key2] = value2;
|
|
},
|
|
/**
|
|
* Find the base target for a value thats been removed from all animation
|
|
* props.
|
|
*/
|
|
getBaseTarget: function(key2) {
|
|
if (getBaseTarget) {
|
|
var target = getBaseTarget(props, key2);
|
|
if (target !== void 0 && !isMotionValue(target))
|
|
return target;
|
|
}
|
|
return baseTarget[key2];
|
|
}
|
|
}, lifecycles), {
|
|
/**
|
|
* Build the renderer state based on the latest visual state.
|
|
*/
|
|
build: function() {
|
|
triggerBuild();
|
|
return renderState;
|
|
},
|
|
/**
|
|
* Schedule a render on the next animation frame.
|
|
*/
|
|
scheduleRender: function() {
|
|
sync.render(render, false, true);
|
|
},
|
|
/**
|
|
* Synchronously fire render. It's prefered that we batch renders but
|
|
* in many circumstances, like layout measurement, we need to run this
|
|
* synchronously. However in those instances other measures should be taken
|
|
* to batch reads/writes.
|
|
*/
|
|
syncRender: render,
|
|
/**
|
|
* Update the provided props. Ensure any newly-added motion values are
|
|
* added to our map, old ones removed, and listeners updated.
|
|
*/
|
|
setProps: function(newProps) {
|
|
props = newProps;
|
|
lifecycles.updatePropListeners(newProps);
|
|
prevMotionValues = updateMotionValuesFromProps(element, scrapeMotionValuesFromProps2(props), prevMotionValues);
|
|
},
|
|
getProps: function() {
|
|
return props;
|
|
},
|
|
// Variants ==============================
|
|
/**
|
|
* Returns the variant definition with a given name.
|
|
*/
|
|
getVariant: function(name) {
|
|
var _a3;
|
|
return (_a3 = props.variants) === null || _a3 === void 0 ? void 0 : _a3[name];
|
|
},
|
|
/**
|
|
* Returns the defined default transition on this component.
|
|
*/
|
|
getDefaultTransition: function() {
|
|
return props.transition;
|
|
},
|
|
/**
|
|
* Used by child variant nodes to get the closest ancestor variant props.
|
|
*/
|
|
getVariantContext: function(startAtParent) {
|
|
if (startAtParent === void 0) {
|
|
startAtParent = false;
|
|
}
|
|
if (startAtParent)
|
|
return parent === null || parent === void 0 ? void 0 : parent.getVariantContext();
|
|
if (!isControllingVariants) {
|
|
var context_1 = (parent === null || parent === void 0 ? void 0 : parent.getVariantContext()) || {};
|
|
if (props.initial !== void 0) {
|
|
context_1.initial = props.initial;
|
|
}
|
|
return context_1;
|
|
}
|
|
var context = {};
|
|
for (var i = 0; i < numVariantProps; i++) {
|
|
var name_1 = variantProps[i];
|
|
var prop = props[name_1];
|
|
if (isVariantLabel(prop) || prop === false) {
|
|
context[name_1] = prop;
|
|
}
|
|
}
|
|
return context;
|
|
},
|
|
// Layout projection ==============================
|
|
/**
|
|
* Enable layout projection for this visual element. Won't actually
|
|
* occur until we also have hydrated layout measurements.
|
|
*/
|
|
enableLayoutProjection: function() {
|
|
projection.isEnabled = true;
|
|
element.layoutTree.add(element);
|
|
},
|
|
/**
|
|
* Lock the projection target, for instance when dragging, so
|
|
* nothing else can try and animate it.
|
|
*/
|
|
lockProjectionTarget: function() {
|
|
projection.isTargetLocked = true;
|
|
},
|
|
unlockProjectionTarget: function() {
|
|
element.stopLayoutAnimation();
|
|
projection.isTargetLocked = false;
|
|
},
|
|
getLayoutState: function() {
|
|
return layoutState;
|
|
},
|
|
setCrossfader: function(newCrossfader) {
|
|
crossfader = newCrossfader;
|
|
},
|
|
isProjectionReady: function() {
|
|
return projection.isEnabled && projection.isHydrated && layoutState.isHydrated;
|
|
},
|
|
/**
|
|
* Start a layout animation on a given axis.
|
|
*/
|
|
startLayoutAnimation: function(axis, transition, isRelative) {
|
|
if (isRelative === void 0) {
|
|
isRelative = false;
|
|
}
|
|
var progress2 = element.getProjectionAnimationProgress()[axis];
|
|
var _a3 = isRelative ? projection.relativeTarget[axis] : projection.target[axis], min = _a3.min, max = _a3.max;
|
|
var length = max - min;
|
|
progress2.clearListeners();
|
|
progress2.set(min);
|
|
progress2.set(min);
|
|
progress2.onChange(function(v) {
|
|
element.setProjectionTargetAxis(axis, v, v + length, isRelative);
|
|
});
|
|
return element.animateMotionValue(axis, progress2, 0, transition);
|
|
},
|
|
/**
|
|
* Stop layout animations.
|
|
*/
|
|
stopLayoutAnimation: function() {
|
|
eachAxis(function(axis) {
|
|
return element.getProjectionAnimationProgress()[axis].stop();
|
|
});
|
|
},
|
|
/**
|
|
* Measure the current viewport box with or without transforms.
|
|
* Only measures axis-aligned boxes, rotate and skew must be manually
|
|
* removed with a re-render to work.
|
|
*/
|
|
measureViewportBox: function(withTransform) {
|
|
if (withTransform === void 0) {
|
|
withTransform = true;
|
|
}
|
|
var viewportBox = measureViewportBox(instance, options);
|
|
if (!withTransform)
|
|
removeBoxTransforms(viewportBox, latestValues);
|
|
return viewportBox;
|
|
},
|
|
/**
|
|
* Get the motion values tracking the layout animations on each
|
|
* axis. Lazy init if not already created.
|
|
*/
|
|
getProjectionAnimationProgress: function() {
|
|
projectionTargetProgress || (projectionTargetProgress = {
|
|
x: motionValue(0),
|
|
y: motionValue(0)
|
|
});
|
|
return projectionTargetProgress;
|
|
},
|
|
/**
|
|
* Update the projection of a single axis. Schedule an update to
|
|
* the tree layout projection.
|
|
*/
|
|
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 = void 0;
|
|
target = projection.target[axis];
|
|
}
|
|
projection.isHydrated = true;
|
|
target.min = min;
|
|
target.max = max;
|
|
hasViewportBoxUpdated = true;
|
|
lifecycles.notifySetAxisTarget();
|
|
},
|
|
/**
|
|
* Rebase the projection target on top of the provided viewport box
|
|
* or the measured layout. This ensures that non-animating elements
|
|
* don't fall out of sync differences in measurements vs projections
|
|
* after a page scroll or other relayout.
|
|
*/
|
|
rebaseProjectionTarget: function(force, box) {
|
|
if (box === void 0) {
|
|
box = layoutState.layout;
|
|
}
|
|
var _a3 = element.getProjectionAnimationProgress(), x = _a3.x, y = _a3.y;
|
|
var shouldRebase = !projection.relativeTarget && !projection.isTargetLocked && !x.isAnimating() && !y.isAnimating();
|
|
if (force || shouldRebase) {
|
|
eachAxis(function(axis) {
|
|
var _a4 = box[axis], min = _a4.min, max = _a4.max;
|
|
element.setProjectionTargetAxis(axis, min, max);
|
|
});
|
|
}
|
|
},
|
|
/**
|
|
* Notify the visual element that its layout is up-to-date.
|
|
* Currently Animate.tsx uses this to check whether a layout animation
|
|
* needs to be performed.
|
|
*/
|
|
notifyLayoutReady: function(config) {
|
|
setCurrentViewportBox(element);
|
|
element.notifyLayoutUpdate(layoutState.layout, element.prevViewportBox || layoutState.layout, config);
|
|
},
|
|
/**
|
|
* Temporarily reset the transform of the instance.
|
|
*/
|
|
resetTransform: function() {
|
|
return resetTransform(element, instance, props);
|
|
},
|
|
restoreTransform: function() {
|
|
return restoreTransform(instance, renderState);
|
|
},
|
|
updateLayoutProjection,
|
|
updateTreeLayoutProjection: function() {
|
|
element.layoutTree.forEach(fireResolveRelativeTargetBox);
|
|
sync.preRender(updateTreeLayoutProjection, false, true);
|
|
},
|
|
getProjectionParent: function() {
|
|
if (projectionParent === void 0) {
|
|
var foundParent = false;
|
|
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);
|
|
},
|
|
/**
|
|
*
|
|
*/
|
|
pointTo: function(newLead) {
|
|
leadProjection = newLead.projection;
|
|
leadLatestValues = newLead.getLatestValues();
|
|
unsubscribeFromLeadVisualElement === null || unsubscribeFromLeadVisualElement === void 0 ? void 0 : unsubscribeFromLeadVisualElement();
|
|
unsubscribeFromLeadVisualElement = pipe(newLead.onSetAxisTarget(element.scheduleUpdateLayoutProjection), newLead.onLayoutAnimationComplete(function() {
|
|
var _a3;
|
|
if (element.isPresent) {
|
|
element.presence = Presence.Present;
|
|
} else {
|
|
(_a3 = element.layoutSafeToRemove) === null || _a3 === void 0 ? void 0 : _a3.call(element);
|
|
}
|
|
}));
|
|
},
|
|
// TODO: Clean this up
|
|
isPresent: true,
|
|
presence: Presence.Entering
|
|
});
|
|
return element;
|
|
};
|
|
};
|
|
function fireResolveRelativeTargetBox(child) {
|
|
child.resolveRelativeTargetBox();
|
|
}
|
|
function fireUpdateLayoutProjection(child) {
|
|
child.updateLayoutProjection();
|
|
}
|
|
var variantProps = __spreadArray(["initial"], __read(variantPriorityOrder));
|
|
var numVariantProps = variantProps.length;
|
|
var validMotionProps = /* @__PURE__ */ new Set([
|
|
"initial",
|
|
"animate",
|
|
"exit",
|
|
"style",
|
|
"variants",
|
|
"transition",
|
|
"transformTemplate",
|
|
"transformValues",
|
|
"custom",
|
|
"inherit",
|
|
"layout",
|
|
"layoutId",
|
|
"onLayoutAnimationComplete",
|
|
"onViewportBoxUpdate",
|
|
"onLayoutMeasure",
|
|
"onBeforeLayoutMeasure",
|
|
"onAnimationStart",
|
|
"onAnimationComplete",
|
|
"onUpdate",
|
|
"onDragStart",
|
|
"onDrag",
|
|
"onDragEnd",
|
|
"onMeasureDragConstraints",
|
|
"onDirectionLock",
|
|
"onDragTransitionEnd",
|
|
"drag",
|
|
"dragControls",
|
|
"dragListener",
|
|
"dragConstraints",
|
|
"dragDirectionLock",
|
|
"_dragX",
|
|
"_dragY",
|
|
"dragElastic",
|
|
"dragMomentum",
|
|
"dragPropagation",
|
|
"dragTransition",
|
|
"whileDrag",
|
|
"onPan",
|
|
"onPanStart",
|
|
"onPanEnd",
|
|
"onPanSessionStart",
|
|
"onTap",
|
|
"onTapStart",
|
|
"onTapCancel",
|
|
"onHoverStart",
|
|
"onHoverEnd",
|
|
"whileFocus",
|
|
"whileTap",
|
|
"whileHover"
|
|
]);
|
|
function isValidMotionProp(key) {
|
|
return validMotionProps.has(key);
|
|
}
|
|
const PresenceContext = (c) => getDomContext("Presence", c) || writable(null);
|
|
let counter = 0;
|
|
const incrementId = () => counter++;
|
|
function isPresent(context) {
|
|
return context === null ? true : context.isPresent;
|
|
}
|
|
const usePresence = (isCustom = false) => {
|
|
const context = getContext(PresenceContext) || PresenceContext(isCustom);
|
|
const id = get(context) === null ? void 0 : incrementId();
|
|
if (get(context) === null) {
|
|
return readable([true, null]);
|
|
}
|
|
return derived(
|
|
context,
|
|
($v) => !$v.isPresent && $v.onExitComplete ? [false, () => $v.onExitComplete?.(id)] : [true]
|
|
);
|
|
};
|
|
const LayoutGroupContext = (c) => getDomContext("LayoutGroup", c) || writable(null);
|
|
function isProjecting(visualElement2) {
|
|
var isEnabled = visualElement2.projection.isEnabled;
|
|
return isEnabled || visualElement2.shouldResetTransform();
|
|
}
|
|
function collectProjectingAncestors(visualElement2, ancestors) {
|
|
if (ancestors === void 0) {
|
|
ancestors = [];
|
|
}
|
|
var parent = visualElement2.parent;
|
|
if (parent)
|
|
collectProjectingAncestors(parent, ancestors);
|
|
if (isProjecting(visualElement2))
|
|
ancestors.push(visualElement2);
|
|
return ancestors;
|
|
}
|
|
function collectProjectingChildren(visualElement2) {
|
|
var children = [];
|
|
var addChild = function(child) {
|
|
if (isProjecting(child))
|
|
children.push(child);
|
|
child.children.forEach(addChild);
|
|
};
|
|
visualElement2.children.forEach(addChild);
|
|
return children.sort(compareByDepth);
|
|
}
|
|
function updateLayoutMeasurement(visualElement2) {
|
|
if (visualElement2.shouldResetTransform())
|
|
return;
|
|
var layoutState = visualElement2.getLayoutState();
|
|
visualElement2.notifyBeforeLayoutMeasure(layoutState.layout);
|
|
layoutState.isHydrated = true;
|
|
layoutState.layout = visualElement2.measureViewportBox();
|
|
layoutState.layoutCorrected = copyAxisBox(layoutState.layout);
|
|
visualElement2.notifyLayoutMeasure(layoutState.layout, visualElement2.prevViewportBox || layoutState.layout);
|
|
sync.update(function() {
|
|
return visualElement2.rebaseProjectionTarget();
|
|
});
|
|
}
|
|
function snapshotViewportBox(visualElement2, nc) {
|
|
if (visualElement2.shouldResetTransform())
|
|
return;
|
|
if (!nc) visualElement2.prevViewportBox = visualElement2.measureViewportBox(false);
|
|
visualElement2.rebaseProjectionTarget(false, visualElement2.prevViewportBox);
|
|
}
|
|
var unresolvedJobs = /* @__PURE__ */ new Set();
|
|
function pushJob(stack, job, pointer) {
|
|
if (!stack[pointer])
|
|
stack[pointer] = [];
|
|
stack[pointer].push(job);
|
|
}
|
|
function batchLayout(callback) {
|
|
unresolvedJobs.add(callback);
|
|
return function() {
|
|
return unresolvedJobs.delete(callback);
|
|
};
|
|
}
|
|
function flushLayout() {
|
|
if (!unresolvedJobs.size)
|
|
return;
|
|
var pointer = 0;
|
|
var reads = [[]];
|
|
var writes = [];
|
|
var setRead = function(job) {
|
|
return pushJob(reads, job, pointer);
|
|
};
|
|
var setWrite = function(job) {
|
|
pushJob(writes, job, pointer);
|
|
pointer++;
|
|
};
|
|
unresolvedJobs.forEach(function(callback) {
|
|
callback(setRead, setWrite);
|
|
pointer = 0;
|
|
});
|
|
unresolvedJobs.clear();
|
|
sync.postRender(function() {
|
|
setTimeout(function() {
|
|
return false;
|
|
}, 10);
|
|
});
|
|
var numStacks = writes.length;
|
|
for (var i = 0; i <= numStacks; i++) {
|
|
reads[i] && reads[i].forEach(executeJob);
|
|
writes[i] && writes[i].forEach(executeJob);
|
|
}
|
|
}
|
|
var executeJob = function(job) {
|
|
return job();
|
|
};
|
|
var defaultHandler = {
|
|
layoutReady: function(child) {
|
|
return child.notifyLayoutReady();
|
|
}
|
|
};
|
|
function createBatcher() {
|
|
var queue = /* @__PURE__ */ new Set();
|
|
return {
|
|
add: function(child) {
|
|
return queue.add(child);
|
|
},
|
|
flush: function(_a) {
|
|
var _b = _a === void 0 ? defaultHandler : _a, layoutReady = _b.layoutReady, parent = _b.parent;
|
|
batchLayout(function(read, write) {
|
|
var order2 = Array.from(queue).sort(compareByDepth);
|
|
var ancestors = parent ? collectProjectingAncestors(parent) : [];
|
|
write(function() {
|
|
var allElements = __spreadArray(__spreadArray([], __read(ancestors)), __read(order2));
|
|
allElements.forEach(function(element) {
|
|
return element.resetTransform();
|
|
});
|
|
});
|
|
read(function() {
|
|
order2.forEach(updateLayoutMeasurement);
|
|
});
|
|
write(function() {
|
|
ancestors.forEach(function(element) {
|
|
return element.restoreTransform();
|
|
});
|
|
order2.forEach(layoutReady);
|
|
});
|
|
read(function() {
|
|
order2.forEach(function(child) {
|
|
if (child.isPresent)
|
|
child.presence = Presence.Present;
|
|
});
|
|
});
|
|
write(function() {
|
|
flushSync.preRender();
|
|
flushSync.render();
|
|
});
|
|
read(function() {
|
|
sync.postRender(function() {
|
|
return order2.forEach(assignProjectionToSnapshot);
|
|
});
|
|
queue.clear();
|
|
});
|
|
});
|
|
flushLayout();
|
|
}
|
|
};
|
|
}
|
|
function assignProjectionToSnapshot(child) {
|
|
child.prevViewportBox = child.projection.target;
|
|
}
|
|
var SharedLayoutContext = (custom) => getDomContext("SharedLayout", custom) || writable(createBatcher());
|
|
var FramerTreeLayoutContext = () => writable(createBatcher());
|
|
function isSharedLayout(context) {
|
|
return !!context.forceUpdate;
|
|
}
|
|
const LazyContext = (c) => getDomContext("Lazy", c) || writable({ strict: false });
|
|
const MotionContext = (c) => getDomContext("Motion", c) || writable({});
|
|
function UseVisualElement($$payload, $$props) {
|
|
push();
|
|
var $$store_subs;
|
|
let createVisualElement = fallback($$props["createVisualElement"], void 0), props = $$props["props"], Component = $$props["Component"], visualState = $$props["visualState"], isCustom = $$props["isCustom"];
|
|
const config = getContext(MotionConfigContext) || MotionConfigContext(isCustom);
|
|
const presenceContext = getContext(PresenceContext) || PresenceContext(isCustom);
|
|
const lazyContext = getContext(LazyContext) || LazyContext(isCustom);
|
|
const mc = getContext(MotionContext) || MotionContext(isCustom);
|
|
let parent = get(mc).visualElement;
|
|
const layoutGroupId = getContext(LayoutGroupContext) || LayoutGroupContext(isCustom);
|
|
let layoutId = store_get($$store_subs ??= {}, "$layoutGroupId", layoutGroupId) && props.layoutId !== void 0 ? store_get($$store_subs ??= {}, "$layoutGroupId", layoutGroupId) + "-" + props.layoutId : props.layoutId;
|
|
let visualElementRef = void 0;
|
|
if (!createVisualElement) {
|
|
createVisualElement = store_get($$store_subs ??= {}, "$lazyContext", lazyContext).renderer;
|
|
}
|
|
let visualElement2 = visualElementRef;
|
|
onDestroy(() => {
|
|
visualElement2?.notifyUnmount();
|
|
});
|
|
parent = store_get($$store_subs ??= {}, "$mc", mc).visualElement;
|
|
layoutId = store_get($$store_subs ??= {}, "$layoutGroupId", layoutGroupId) && props.layoutId !== void 0 ? store_get($$store_subs ??= {}, "$layoutGroupId", layoutGroupId) + "-" + props.layoutId : props.layoutId;
|
|
if (!visualElementRef && createVisualElement) {
|
|
visualElementRef = createVisualElement(Component, {
|
|
visualState,
|
|
parent,
|
|
props: { ...props, layoutId },
|
|
presenceId: store_get($$store_subs ??= {}, "$presenceContext", presenceContext)?.id,
|
|
blockInitialAnimation: store_get($$store_subs ??= {}, "$presenceContext", presenceContext)?.initial === false
|
|
});
|
|
}
|
|
visualElement2 = visualElementRef;
|
|
if (visualElement2) {
|
|
visualElement2.setProps({
|
|
...store_get($$store_subs ??= {}, "$config", config),
|
|
...props,
|
|
layoutId
|
|
});
|
|
visualElement2.isPresent = isPresent(store_get($$store_subs ??= {}, "$presenceContext", presenceContext));
|
|
visualElement2.isPresenceRoot = !parent || parent.presenceId !== store_get($$store_subs ??= {}, "$presenceContext", presenceContext)?.id;
|
|
visualElement2.syncRender();
|
|
}
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", { visualElement: visualElement2 }, null);
|
|
$$payload.out += `<!---->`;
|
|
if ($$store_subs) unsubscribe_stores($$store_subs);
|
|
bind_props($$props, {
|
|
createVisualElement,
|
|
props,
|
|
Component,
|
|
visualState,
|
|
isCustom
|
|
});
|
|
pop();
|
|
}
|
|
var createDefinition = function(propNames) {
|
|
return {
|
|
isEnabled: function(props) {
|
|
return propNames.some(function(name) {
|
|
return !!props[name];
|
|
});
|
|
}
|
|
};
|
|
};
|
|
var featureDefinitions = {
|
|
measureLayout: createDefinition(["layout", "layoutId", "drag"]),
|
|
animation: createDefinition([
|
|
"animate",
|
|
"exit",
|
|
"variants",
|
|
"whileHover",
|
|
"whileTap",
|
|
"whileFocus",
|
|
"whileDrag"
|
|
]),
|
|
exit: createDefinition(["exit"]),
|
|
drag: createDefinition(["drag", "dragControls"]),
|
|
focus: createDefinition(["whileFocus"]),
|
|
hover: createDefinition(["whileHover", "onHoverStart", "onHoverEnd"]),
|
|
tap: createDefinition(["whileTap", "onTap", "onTapStart", "onTapCancel"]),
|
|
pan: createDefinition([
|
|
"onPan",
|
|
"onPanStart",
|
|
"onPanSessionStart",
|
|
"onPanEnd"
|
|
]),
|
|
layoutAnimation: createDefinition(["layout", "layoutId"])
|
|
};
|
|
function loadFeatures(features) {
|
|
for (var key in features) {
|
|
var Component = features[key];
|
|
if (Component !== null) {
|
|
featureDefinitions[key].Component = Component;
|
|
}
|
|
}
|
|
}
|
|
function UseFeatures($$payload, $$props) {
|
|
push();
|
|
const featureNames = Object.keys(featureDefinitions);
|
|
const numFeatures = featureNames.length;
|
|
let visualElement2 = $$props["visualElement"], props = $$props["props"];
|
|
let features = [];
|
|
{
|
|
features = [];
|
|
for (let i = 0; i < numFeatures; i++) {
|
|
const name = featureNames[i];
|
|
const { isEnabled, Component } = featureDefinitions[name];
|
|
if (isEnabled(props) && Component) {
|
|
features.push({ Component, key: name, props, visualElement: visualElement2 });
|
|
}
|
|
}
|
|
}
|
|
if (visualElement2) {
|
|
$$payload.out += "<!--[-->";
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", { features }, null);
|
|
$$payload.out += `<!---->`;
|
|
} else {
|
|
$$payload.out += "<!--[!-->";
|
|
}
|
|
$$payload.out += `<!--]-->`;
|
|
bind_props($$props, { visualElement: visualElement2, props });
|
|
pop();
|
|
}
|
|
function MotionContextProvider($$payload, $$props) {
|
|
push();
|
|
let value = $$props["value"], isCustom = $$props["isCustom"];
|
|
let store = writable(value);
|
|
setContext(MotionContext, store);
|
|
setDomContext("Motion", isCustom, store);
|
|
onDestroy(() => {
|
|
value?.visualElement?.unmount();
|
|
});
|
|
store.set(value);
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", {}, null);
|
|
$$payload.out += `<!---->`;
|
|
bind_props($$props, { value, isCustom });
|
|
pop();
|
|
}
|
|
var createHtmlRenderState = function() {
|
|
return {
|
|
style: {},
|
|
transform: {},
|
|
transformKeys: [],
|
|
transformOrigin: {},
|
|
vars: {}
|
|
};
|
|
};
|
|
var createSvgRenderState = function() {
|
|
return Object.assign(Object.assign({}, createHtmlRenderState()), { attrs: {} });
|
|
};
|
|
var transformAxes = ["", "X", "Y", "Z"];
|
|
var order = ["translate", "scale", "rotate", "skew"];
|
|
var transformProps = ["transformPerspective", "x", "y", "z"];
|
|
order.forEach(function(operationKey) {
|
|
return transformAxes.forEach(function(axesKey) {
|
|
return transformProps.push(operationKey + axesKey);
|
|
});
|
|
});
|
|
function sortTransformProps(a, b) {
|
|
return transformProps.indexOf(a) - transformProps.indexOf(b);
|
|
}
|
|
var transformPropSet = new Set(transformProps);
|
|
function isTransformProp(key) {
|
|
return transformPropSet.has(key);
|
|
}
|
|
var transformOriginProps = /* @__PURE__ */ new Set(["originX", "originY", "originZ"]);
|
|
function isTransformOriginProp(key) {
|
|
return transformOriginProps.has(key);
|
|
}
|
|
function isForcedMotionValue(key, _a) {
|
|
var layout = _a.layout, layoutId = _a.layoutId;
|
|
return isTransformProp(key) || isTransformOriginProp(key) || (layout || layoutId !== void 0) && !!valueScaleCorrection[key];
|
|
}
|
|
var translateAlias = {
|
|
x: "translateX",
|
|
y: "translateY",
|
|
z: "translateZ",
|
|
transformPerspective: "perspective"
|
|
};
|
|
function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
|
|
var transform = _a.transform, transformKeys2 = _a.transformKeys;
|
|
var _c = _b.enableHardwareAcceleration, enableHardwareAcceleration = _c === void 0 ? true : _c, _d = _b.allowTransformNone, allowTransformNone = _d === void 0 ? true : _d;
|
|
var transformString = "";
|
|
transformKeys2.sort(sortTransformProps);
|
|
var transformHasZ = false;
|
|
var numTransformKeys = transformKeys2.length;
|
|
for (var i = 0; i < numTransformKeys; i++) {
|
|
var key = transformKeys2[i];
|
|
transformString += (translateAlias[key] || key) + "(" + transform[key] + ") ";
|
|
if (key === "z")
|
|
transformHasZ = true;
|
|
}
|
|
if (!transformHasZ && enableHardwareAcceleration) {
|
|
transformString += "translateZ(0)";
|
|
} else {
|
|
transformString = transformString.trim();
|
|
}
|
|
if (transformTemplate) {
|
|
transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
|
|
} else if (allowTransformNone && transformIsDefault) {
|
|
transformString = "none";
|
|
}
|
|
return transformString;
|
|
}
|
|
function buildTransformOrigin(_a) {
|
|
var _b = _a.originX, originX = _b === void 0 ? "50%" : _b, _c = _a.originY, originY = _c === void 0 ? "50%" : _c, _d = _a.originZ, originZ = _d === void 0 ? 0 : _d;
|
|
return originX + " " + originY + " " + originZ;
|
|
}
|
|
function isCSSVariable$1(key) {
|
|
return key.startsWith("--");
|
|
}
|
|
var getValueAsType = function(value, type) {
|
|
return type && typeof value === "number" ? type.transform(value) : value;
|
|
};
|
|
function buildHTMLStyles(state, latestValues, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin) {
|
|
var _a;
|
|
var style = state.style, vars = state.vars, transform = state.transform, transformKeys2 = state.transformKeys, transformOrigin = state.transformOrigin;
|
|
transformKeys2.length = 0;
|
|
var hasTransform = false;
|
|
var hasTransformOrigin = false;
|
|
var transformIsNone = true;
|
|
for (var key in latestValues) {
|
|
var value = latestValues[key];
|
|
if (isCSSVariable$1(key)) {
|
|
vars[key] = value;
|
|
continue;
|
|
}
|
|
var valueType = numberValueTypes[key];
|
|
var valueAsType = getValueAsType(value, valueType);
|
|
if (isTransformProp(key)) {
|
|
hasTransform = true;
|
|
transform[key] = valueAsType;
|
|
transformKeys2.push(key);
|
|
if (!transformIsNone)
|
|
continue;
|
|
if (value !== ((_a = valueType.default) !== null && _a !== void 0 ? _a : 0))
|
|
transformIsNone = false;
|
|
} else if (isTransformOriginProp(key)) {
|
|
transformOrigin[key] = valueAsType;
|
|
hasTransformOrigin = true;
|
|
} else {
|
|
if (layoutState && projection && layoutState.isHydrated && valueScaleCorrection[key]) {
|
|
var correctedValue = valueScaleCorrection[key].process(value, layoutState, projection);
|
|
var applyTo = valueScaleCorrection[key].applyTo;
|
|
if (applyTo) {
|
|
var num = applyTo.length;
|
|
for (var i = 0; i < num; i++) {
|
|
style[applyTo[i]] = correctedValue;
|
|
}
|
|
} else {
|
|
style[key] = correctedValue;
|
|
}
|
|
} else {
|
|
style[key] = valueAsType;
|
|
}
|
|
}
|
|
}
|
|
if (layoutState && projection && buildProjectionTransform && buildProjectionTransformOrigin) {
|
|
style.transform = buildProjectionTransform(layoutState.deltaFinal, layoutState.treeScale, hasTransform ? transform : void 0);
|
|
if (transformTemplate) {
|
|
style.transform = transformTemplate(transform, style.transform);
|
|
}
|
|
style.transformOrigin = buildProjectionTransformOrigin(layoutState);
|
|
} else {
|
|
if (hasTransform) {
|
|
style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
|
|
}
|
|
if (hasTransformOrigin) {
|
|
style.transformOrigin = buildTransformOrigin(transformOrigin);
|
|
}
|
|
}
|
|
}
|
|
function UseInitialMotionValues($$payload, $$props) {
|
|
push();
|
|
let styles;
|
|
let visualState = $$props["visualState"], isStatic = $$props["isStatic"], props = $$props["props"];
|
|
const memo = () => {
|
|
let state = createHtmlRenderState();
|
|
buildHTMLStyles(state, visualState, void 0, void 0, { enableHardwareAcceleration: !isStatic }, props.transformTemplate);
|
|
const { vars, style } = state;
|
|
return { ...vars, ...style };
|
|
};
|
|
styles = memo();
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", { styles }, null);
|
|
$$payload.out += `<!---->`;
|
|
bind_props($$props, { visualState, isStatic, props });
|
|
pop();
|
|
}
|
|
function copyRawValuesOnly(target, source, props) {
|
|
for (const key in source) {
|
|
if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
function UseStyle($$payload, $$props) {
|
|
push();
|
|
let styleProp;
|
|
let visualState = $$props["visualState"], props = $$props["props"], isStatic = $$props["isStatic"];
|
|
let style = {};
|
|
const cRVO = copyRawValuesOnly;
|
|
const toStyle = (s1) => {
|
|
Object.assign(style, s1);
|
|
if (props.transformValues) {
|
|
style = props.transformValues(style);
|
|
}
|
|
return style;
|
|
};
|
|
styleProp = props.style || {};
|
|
cRVO(style, styleProp, props);
|
|
UseInitialMotionValues($$payload, {
|
|
props,
|
|
visualState,
|
|
isStatic,
|
|
children: invalid_default_snippet,
|
|
$$slots: {
|
|
default: ($$payload2, { styles: s1 }) => {
|
|
$$payload2.out += `<!---->`;
|
|
slot($$payload2, $$props, "default", { styles: toStyle(s1) }, null);
|
|
$$payload2.out += `<!---->`;
|
|
}
|
|
}
|
|
});
|
|
bind_props($$props, { visualState, props, isStatic });
|
|
pop();
|
|
}
|
|
function UseHTMLProps($$payload, $$props) {
|
|
let props = $$props["props"], visualState = $$props["visualState"], isStatic = $$props["isStatic"];
|
|
const getHTMLProps = (style, props2) => {
|
|
let htmlProps = {};
|
|
if (Boolean(props2.drag)) {
|
|
htmlProps.draggable = false;
|
|
style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout = "none";
|
|
style.touchAction = props2.drag === true ? "none" : `pan-${props2.drag === "x" ? "y" : "x"}`;
|
|
}
|
|
htmlProps.style = style;
|
|
return htmlProps;
|
|
};
|
|
UseStyle($$payload, {
|
|
visualState,
|
|
props,
|
|
isStatic,
|
|
children: invalid_default_snippet,
|
|
$$slots: {
|
|
default: ($$payload2, { styles }) => {
|
|
$$payload2.out += `<!---->`;
|
|
slot($$payload2, $$props, "default", { visualProps: getHTMLProps(styles, props) }, null);
|
|
$$payload2.out += `<!---->`;
|
|
}
|
|
}
|
|
});
|
|
bind_props($$props, { props, visualState, isStatic });
|
|
}
|
|
function calcOrigin(origin, offset, size) {
|
|
return typeof origin === "string" ? origin : px.transform(offset + size * origin);
|
|
}
|
|
function calcSVGTransformOrigin(dimensions, originX, originY) {
|
|
var pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
|
|
var pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
|
|
return pxOriginX + " " + pxOriginY;
|
|
}
|
|
var progressToPixels = function(progress2, length) {
|
|
return px.transform(progress2 * length);
|
|
};
|
|
var camelKeys = {
|
|
offset: "strokeDashoffset",
|
|
array: "strokeDasharray"
|
|
};
|
|
function buildSVGPath(attrs, totalLength, length, spacing, offset, useDashCase) {
|
|
if (spacing === void 0) {
|
|
spacing = 1;
|
|
}
|
|
if (offset === void 0) {
|
|
offset = 0;
|
|
}
|
|
var keys = camelKeys;
|
|
attrs[keys.offset] = progressToPixels(-offset, totalLength);
|
|
var pathLength = progressToPixels(length, totalLength);
|
|
var pathSpacing = progressToPixels(spacing, totalLength);
|
|
attrs[keys.array] = pathLength + " " + pathSpacing;
|
|
}
|
|
function buildSVGAttrs(state, _a, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin) {
|
|
var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, latest = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
|
|
buildHTMLStyles(state, latest, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin);
|
|
state.attrs = state.style;
|
|
state.style = {};
|
|
var attrs = state.attrs, style = state.style, dimensions = state.dimensions, totalPathLength = state.totalPathLength;
|
|
if (attrs.transform) {
|
|
if (dimensions)
|
|
style.transform = attrs.transform;
|
|
delete attrs.transform;
|
|
}
|
|
if (dimensions && (originX !== void 0 || originY !== void 0 || style.transform)) {
|
|
style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== void 0 ? originX : 0.5, originY !== void 0 ? originY : 0.5);
|
|
}
|
|
if (attrX !== void 0)
|
|
attrs.x = attrX;
|
|
if (attrY !== void 0)
|
|
attrs.y = attrY;
|
|
if (totalPathLength !== void 0 && pathLength !== void 0) {
|
|
buildSVGPath(attrs, totalPathLength, pathLength, pathSpacing, pathOffset);
|
|
}
|
|
}
|
|
function UseSVGProps($$payload, $$props) {
|
|
push();
|
|
let visualProps;
|
|
let visualState = $$props["visualState"], props = $$props["props"];
|
|
let memo = () => {
|
|
const state = createSvgRenderState();
|
|
buildSVGAttrs(state, visualState, void 0, void 0, { enableHardwareAcceleration: false }, props.transformTemplate);
|
|
return { ...state.attrs, style: { ...state.style } };
|
|
};
|
|
visualProps = memo();
|
|
if (props.style) {
|
|
const rawStyles = {};
|
|
copyRawValuesOnly(rawStyles, props.style, props);
|
|
visualProps.style = { ...rawStyles, ...visualProps.style };
|
|
}
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", { visualProps }, null);
|
|
$$payload.out += `<!---->`;
|
|
bind_props($$props, { visualState, props });
|
|
pop();
|
|
}
|
|
var shouldForward = function(key) {
|
|
return !isValidMotionProp(key);
|
|
};
|
|
try {
|
|
var emotionIsPropValid_1 = require("@emotion/is-prop-valid").default;
|
|
shouldForward = function(key) {
|
|
if (key.startsWith("on")) {
|
|
return !isValidMotionProp(key);
|
|
} else {
|
|
return emotionIsPropValid_1(key);
|
|
}
|
|
};
|
|
} catch (_a) {
|
|
}
|
|
function filterProps(props, isDom, forwardMotionProps) {
|
|
var filteredProps = {};
|
|
for (var key in props) {
|
|
if (shouldForward(key) || forwardMotionProps === true && isValidMotionProp(key) || !isDom && !isValidMotionProp(key)) {
|
|
filteredProps[key] = props[key];
|
|
}
|
|
}
|
|
return filteredProps;
|
|
}
|
|
function UseRender($$payload, $$props) {
|
|
push();
|
|
let filteredProps;
|
|
let props = $$props["props"], visualState = $$props["visualState"], Component = $$props["Component"], forwardMotionProps = fallback($$props["forwardMotionProps"], false), isStatic = $$props["isStatic"], ref = $$props["ref"], targetEl = fallback($$props["targetEl"], void 0);
|
|
const motion2 = (node) => {
|
|
ref(node);
|
|
};
|
|
filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
|
|
if (targetEl) {
|
|
motion2(targetEl);
|
|
}
|
|
$$payload.out += `<!---->`;
|
|
(Component === "SVG" ? UseSVGProps : UseHTMLProps)?.($$payload, {
|
|
visualState,
|
|
isStatic,
|
|
props,
|
|
children: invalid_default_snippet,
|
|
$$slots: {
|
|
default: ($$payload2, { visualProps }) => {
|
|
$$payload2.out += `<!---->`;
|
|
slot(
|
|
$$payload2,
|
|
$$props,
|
|
"default",
|
|
{
|
|
motion: motion2,
|
|
props: { ...filteredProps, ...visualProps }
|
|
},
|
|
null
|
|
);
|
|
$$payload2.out += `<!---->`;
|
|
}
|
|
}
|
|
});
|
|
$$payload.out += `<!---->`;
|
|
bind_props($$props, {
|
|
props,
|
|
visualState,
|
|
Component,
|
|
forwardMotionProps,
|
|
isStatic,
|
|
ref,
|
|
targetEl
|
|
});
|
|
pop();
|
|
}
|
|
function getBoundingBox(element, transformPagePoint) {
|
|
var box = element.getBoundingClientRect();
|
|
return convertBoundingBoxToAxisBox(transformBoundingBox(box, transformPagePoint));
|
|
}
|
|
function isCSSVariable(value) {
|
|
return typeof value === "string" && value.startsWith("var(--");
|
|
}
|
|
var cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
|
|
function parseCSSVariable(current) {
|
|
var match = cssVariableRegex.exec(current);
|
|
if (!match)
|
|
return [,];
|
|
var _a = __read(match, 3), token = _a[1], fallback2 = _a[2];
|
|
return [token, fallback2];
|
|
}
|
|
function getVariableValue(current, element, depth) {
|
|
var _a = __read(parseCSSVariable(current), 2), token = _a[0], fallback2 = _a[1];
|
|
if (!token)
|
|
return;
|
|
var resolved = window.getComputedStyle(element).getPropertyValue(token);
|
|
if (resolved) {
|
|
return resolved.trim();
|
|
} else if (isCSSVariable(fallback2)) {
|
|
return getVariableValue(fallback2, element);
|
|
} else {
|
|
return fallback2;
|
|
}
|
|
}
|
|
function resolveCSSVariables(visualElement2, _a, transitionEnd) {
|
|
var _b;
|
|
var target = __rest(_a, []);
|
|
var element = visualElement2.getInstance();
|
|
if (!(element instanceof HTMLElement))
|
|
return { target, transitionEnd };
|
|
if (transitionEnd) {
|
|
transitionEnd = Object.assign({}, transitionEnd);
|
|
}
|
|
visualElement2.forEachValue(function(value) {
|
|
var current2 = value.get();
|
|
if (!isCSSVariable(current2))
|
|
return;
|
|
var resolved2 = getVariableValue(current2, element);
|
|
if (resolved2)
|
|
value.set(resolved2);
|
|
});
|
|
for (var key in target) {
|
|
var current = target[key];
|
|
if (!isCSSVariable(current))
|
|
continue;
|
|
var resolved = getVariableValue(current, element);
|
|
if (!resolved)
|
|
continue;
|
|
target[key] = resolved;
|
|
if (transitionEnd)
|
|
(_b = transitionEnd[key]) !== null && _b !== void 0 ? _b : transitionEnd[key] = current;
|
|
}
|
|
return { target, transitionEnd };
|
|
}
|
|
var positionalKeys = /* @__PURE__ */ new Set([
|
|
"width",
|
|
"height",
|
|
"top",
|
|
"left",
|
|
"right",
|
|
"bottom",
|
|
"x",
|
|
"y"
|
|
]);
|
|
var isPositionalKey = function(key) {
|
|
return positionalKeys.has(key);
|
|
};
|
|
var hasPositionalKey = function(target) {
|
|
return Object.keys(target).some(isPositionalKey);
|
|
};
|
|
var setAndResetVelocity = function(value, to) {
|
|
value.set(to, false);
|
|
value.set(to);
|
|
};
|
|
var isNumOrPxType = function(v) {
|
|
return v === number || v === px;
|
|
};
|
|
var BoundingBoxDimension;
|
|
(function(BoundingBoxDimension2) {
|
|
BoundingBoxDimension2["width"] = "width";
|
|
BoundingBoxDimension2["height"] = "height";
|
|
BoundingBoxDimension2["left"] = "left";
|
|
BoundingBoxDimension2["right"] = "right";
|
|
BoundingBoxDimension2["top"] = "top";
|
|
BoundingBoxDimension2["bottom"] = "bottom";
|
|
})(BoundingBoxDimension || (BoundingBoxDimension = {}));
|
|
var getPosFromMatrix = function(matrix, pos) {
|
|
return parseFloat(matrix.split(", ")[pos]);
|
|
};
|
|
var getTranslateFromMatrix = function(pos2, pos3) {
|
|
return function(_bbox, _a) {
|
|
var transform = _a.transform;
|
|
if (transform === "none" || !transform)
|
|
return 0;
|
|
var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
|
|
if (matrix3d) {
|
|
return getPosFromMatrix(matrix3d[1], pos3);
|
|
} else {
|
|
var matrix = transform.match(/^matrix\((.+)\)$/);
|
|
if (matrix) {
|
|
return getPosFromMatrix(matrix[1], pos2);
|
|
} else {
|
|
return 0;
|
|
}
|
|
}
|
|
};
|
|
};
|
|
var transformKeys = /* @__PURE__ */ new Set(["x", "y", "z"]);
|
|
var nonTranslationalTransformKeys = transformProps.filter(function(key) {
|
|
return !transformKeys.has(key);
|
|
});
|
|
function removeNonTranslationalTransform(visualElement2) {
|
|
var removedTransforms = [];
|
|
nonTranslationalTransformKeys.forEach(function(key) {
|
|
var value = visualElement2.getValue(key);
|
|
if (value !== void 0) {
|
|
removedTransforms.push([key, value.get()]);
|
|
value.set(key.startsWith("scale") ? 1 : 0);
|
|
}
|
|
});
|
|
if (removedTransforms.length)
|
|
visualElement2.syncRender();
|
|
return removedTransforms;
|
|
}
|
|
var positionalValues = {
|
|
// Dimensions
|
|
width: function(_a) {
|
|
var x = _a.x;
|
|
return x.max - x.min;
|
|
},
|
|
height: function(_a) {
|
|
var y = _a.y;
|
|
return y.max - y.min;
|
|
},
|
|
top: function(_bbox, _a) {
|
|
var top = _a.top;
|
|
return parseFloat(top);
|
|
},
|
|
left: function(_bbox, _a) {
|
|
var left = _a.left;
|
|
return parseFloat(left);
|
|
},
|
|
bottom: function(_a, _b) {
|
|
var y = _a.y;
|
|
var top = _b.top;
|
|
return parseFloat(top) + (y.max - y.min);
|
|
},
|
|
right: function(_a, _b) {
|
|
var x = _a.x;
|
|
var left = _b.left;
|
|
return parseFloat(left) + (x.max - x.min);
|
|
},
|
|
// Transform
|
|
x: getTranslateFromMatrix(4, 13),
|
|
y: getTranslateFromMatrix(5, 14)
|
|
};
|
|
var convertChangedValueTypes = function(target, visualElement2, changedKeys) {
|
|
var originBbox = visualElement2.measureViewportBox();
|
|
var element = visualElement2.getInstance();
|
|
var elementComputedStyle = getComputedStyle(element);
|
|
var display = elementComputedStyle.display, top = elementComputedStyle.top, left = elementComputedStyle.left, bottom = elementComputedStyle.bottom, right = elementComputedStyle.right, transform = elementComputedStyle.transform;
|
|
var originComputedStyle = { top, left, bottom, right, transform };
|
|
if (display === "none") {
|
|
visualElement2.setStaticValue("display", target.display || "block");
|
|
}
|
|
visualElement2.syncRender();
|
|
var targetBbox = visualElement2.measureViewportBox();
|
|
changedKeys.forEach(function(key) {
|
|
var value = visualElement2.getValue(key);
|
|
setAndResetVelocity(value, positionalValues[key](originBbox, originComputedStyle));
|
|
target[key] = positionalValues[key](targetBbox, elementComputedStyle);
|
|
});
|
|
return target;
|
|
};
|
|
var checkAndConvertChangedValueTypes = function(visualElement2, target, origin, transitionEnd) {
|
|
if (origin === void 0) {
|
|
origin = {};
|
|
}
|
|
if (transitionEnd === void 0) {
|
|
transitionEnd = {};
|
|
}
|
|
target = Object.assign({}, target);
|
|
transitionEnd = Object.assign({}, transitionEnd);
|
|
var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
|
|
var removedTransformValues = [];
|
|
var hasAttemptedToRemoveTransformValues = false;
|
|
var changedValueTypeKeys = [];
|
|
targetPositionalKeys.forEach(function(key) {
|
|
var value = visualElement2.getValue(key);
|
|
if (!visualElement2.hasValue(key))
|
|
return;
|
|
var from = origin[key];
|
|
var to = target[key];
|
|
var fromType = findDimensionValueType(from);
|
|
var toType;
|
|
if (isKeyframesTarget(to)) {
|
|
var numKeyframes = to.length;
|
|
for (var i = to[0] === null ? 1 : 0; i < numKeyframes; i++) {
|
|
if (!toType) {
|
|
toType = findDimensionValueType(to[i]);
|
|
}
|
|
}
|
|
} else {
|
|
toType = findDimensionValueType(to);
|
|
}
|
|
if (fromType !== toType) {
|
|
if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
|
|
var current = value.get();
|
|
if (typeof current === "string") {
|
|
value.set(parseFloat(current));
|
|
}
|
|
if (typeof to === "string") {
|
|
target[key] = parseFloat(to);
|
|
} else if (Array.isArray(to) && toType === px) {
|
|
target[key] = to.map(parseFloat);
|
|
}
|
|
} else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) && (toType === null || toType === void 0 ? void 0 : toType.transform) && (from === 0 || to === 0)) {
|
|
if (from === 0) {
|
|
value.set(toType.transform(from));
|
|
} else {
|
|
target[key] = fromType.transform(to);
|
|
}
|
|
} else {
|
|
if (!hasAttemptedToRemoveTransformValues) {
|
|
removedTransformValues = removeNonTranslationalTransform(visualElement2);
|
|
hasAttemptedToRemoveTransformValues = true;
|
|
}
|
|
changedValueTypeKeys.push(key);
|
|
transitionEnd[key] = transitionEnd[key] !== void 0 ? transitionEnd[key] : target[key];
|
|
setAndResetVelocity(value, to);
|
|
}
|
|
}
|
|
});
|
|
if (changedValueTypeKeys.length) {
|
|
var convertedTarget = convertChangedValueTypes(target, visualElement2, changedValueTypeKeys);
|
|
if (removedTransformValues.length) {
|
|
removedTransformValues.forEach(function(_a) {
|
|
var _b = __read(_a, 2), key = _b[0], value = _b[1];
|
|
visualElement2.getValue(key).set(value);
|
|
});
|
|
}
|
|
visualElement2.syncRender();
|
|
return { target: convertedTarget, transitionEnd };
|
|
} else {
|
|
return { target, transitionEnd };
|
|
}
|
|
};
|
|
function unitConversion(visualElement2, target, origin, transitionEnd) {
|
|
return hasPositionalKey(target) ? checkAndConvertChangedValueTypes(visualElement2, target, origin, transitionEnd) : { target, transitionEnd };
|
|
}
|
|
var parseDomVariant = function(visualElement2, target, origin, transitionEnd) {
|
|
var resolved = resolveCSSVariables(visualElement2, target, transitionEnd);
|
|
target = resolved.target;
|
|
transitionEnd = resolved.transitionEnd;
|
|
return unitConversion(visualElement2, target, origin, transitionEnd);
|
|
};
|
|
function scrapeMotionValuesFromProps$1(props) {
|
|
var style = props.style;
|
|
var newValues = {};
|
|
for (var key in style) {
|
|
if (isMotionValue(style[key]) || isForcedMotionValue(key, props)) {
|
|
newValues[key] = style[key];
|
|
}
|
|
}
|
|
return newValues;
|
|
}
|
|
function renderHTML(element, _a) {
|
|
var style = _a.style, vars = _a.vars;
|
|
Object.assign(element.style, style);
|
|
for (var key in vars) {
|
|
element.style.setProperty(key, vars[key]);
|
|
}
|
|
}
|
|
function getComputedStyle$1(element) {
|
|
return window.getComputedStyle(element);
|
|
}
|
|
var htmlConfig = {
|
|
treeType: "dom",
|
|
readValueFromInstance: function(domElement, key) {
|
|
if (isTransformProp(key)) {
|
|
var defaultType = getDefaultValueType(key);
|
|
return defaultType ? defaultType.default || 0 : 0;
|
|
} else {
|
|
var computedStyle = getComputedStyle$1(domElement);
|
|
return (isCSSVariable$1(key) ? computedStyle.getPropertyValue(key) : computedStyle[key]) || 0;
|
|
}
|
|
},
|
|
sortNodePosition: function(a, b) {
|
|
return a.compareDocumentPosition(b) & 2 ? 1 : -1;
|
|
},
|
|
getBaseTarget: function(props, key) {
|
|
var _a;
|
|
return (_a = props.style) === null || _a === void 0 ? void 0 : _a[key];
|
|
},
|
|
measureViewportBox: function(element, _a) {
|
|
var transformPagePoint = _a.transformPagePoint;
|
|
return getBoundingBox(element, transformPagePoint);
|
|
},
|
|
/**
|
|
* Reset the transform on the current Element. This is called as part
|
|
* of a batched process across the entire layout tree. To remove this write
|
|
* cycle it'd be interesting to see if it's possible to "undo" all the current
|
|
* layout transforms up the tree in the same way this.getBoundingBoxWithoutTransforms
|
|
* works
|
|
*/
|
|
resetTransform: function(element, domElement, props) {
|
|
var transformTemplate = props.transformTemplate;
|
|
domElement.style.transform = transformTemplate ? transformTemplate({}, "") : "none";
|
|
element.scheduleRender();
|
|
},
|
|
restoreTransform: function(instance, mutableState) {
|
|
instance.style.transform = mutableState.style.transform;
|
|
},
|
|
removeValueFromRenderState: function(key, _a) {
|
|
var vars = _a.vars, style = _a.style;
|
|
delete vars[key];
|
|
delete style[key];
|
|
},
|
|
/**
|
|
* Ensure that HTML and Framer-specific value types like `px`->`%` and `Color`
|
|
* can be animated by Motion.
|
|
*/
|
|
makeTargetAnimatable: function(element, _a, _b, isMounted) {
|
|
var transformValues = _b.transformValues;
|
|
if (isMounted === void 0) {
|
|
isMounted = true;
|
|
}
|
|
var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
|
|
var origin = getOrigin(target, transition || {}, element);
|
|
if (transformValues) {
|
|
if (transitionEnd)
|
|
transitionEnd = transformValues(transitionEnd);
|
|
if (target)
|
|
target = transformValues(target);
|
|
if (origin)
|
|
origin = transformValues(origin);
|
|
}
|
|
if (isMounted) {
|
|
checkTargetForNewValues(element, target, origin);
|
|
var parsed = parseDomVariant(element, target, origin, transitionEnd);
|
|
transitionEnd = parsed.transitionEnd;
|
|
target = parsed.target;
|
|
}
|
|
return Object.assign({
|
|
transition,
|
|
transitionEnd
|
|
}, target);
|
|
},
|
|
scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
|
|
build: function(element, renderState, latestValues, projection, layoutState, options, props) {
|
|
if (element.isVisible !== void 0) {
|
|
renderState.style.visibility = element.isVisible ? "visible" : "hidden";
|
|
}
|
|
var isProjectionTranform = projection.isEnabled && layoutState.isHydrated;
|
|
buildHTMLStyles(renderState, latestValues, projection, layoutState, options, props.transformTemplate, isProjectionTranform ? buildLayoutProjectionTransform : void 0, isProjectionTranform ? buildLayoutProjectionTransformOrigin : void 0);
|
|
},
|
|
render: renderHTML
|
|
};
|
|
var htmlVisualElement = visualElement(htmlConfig);
|
|
function scrapeMotionValuesFromProps(props) {
|
|
var newValues = scrapeMotionValuesFromProps$1(props);
|
|
for (var key in props) {
|
|
if (isMotionValue(props[key])) {
|
|
var targetKey = key === "x" || key === "y" ? "attr" + key.toUpperCase() : key;
|
|
newValues[targetKey] = props[key];
|
|
}
|
|
}
|
|
return newValues;
|
|
}
|
|
var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
|
|
var REPLACE_TEMPLATE = "$1-$2";
|
|
var camelToDash = function(str) {
|
|
return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
|
|
};
|
|
var camelCaseAttributes = /* @__PURE__ */ new Set([
|
|
"baseFrequency",
|
|
"diffuseConstant",
|
|
"kernelMatrix",
|
|
"kernelUnitLength",
|
|
"keySplines",
|
|
"keyTimes",
|
|
"limitingConeAngle",
|
|
"markerHeight",
|
|
"markerWidth",
|
|
"numOctaves",
|
|
"targetX",
|
|
"targetY",
|
|
"surfaceScale",
|
|
"specularConstant",
|
|
"specularExponent",
|
|
"stdDeviation",
|
|
"tableValues",
|
|
"viewBox"
|
|
]);
|
|
function renderSVG(element, renderState) {
|
|
renderHTML(element, renderState);
|
|
for (var key in renderState.attrs) {
|
|
element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
|
|
}
|
|
}
|
|
var svgVisualElement = visualElement(Object.assign(Object.assign({}, htmlConfig), {
|
|
getBaseTarget: function(props, key) {
|
|
return props[key];
|
|
},
|
|
readValueFromInstance: function(domElement, key) {
|
|
var _a;
|
|
if (isTransformProp(key)) {
|
|
return ((_a = getDefaultValueType(key)) === null || _a === void 0 ? void 0 : _a.default) || 0;
|
|
}
|
|
key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
|
|
return domElement.getAttribute(key);
|
|
},
|
|
scrapeMotionValuesFromProps,
|
|
build: function(_element, renderState, latestValues, projection, layoutState, options, props) {
|
|
var isProjectionTranform = projection.isEnabled && layoutState.isHydrated;
|
|
buildSVGAttrs(renderState, latestValues, projection, layoutState, options, props.transformTemplate, isProjectionTranform ? buildLayoutProjectionTransform : void 0, isProjectionTranform ? buildLayoutProjectionTransformOrigin : void 0);
|
|
},
|
|
render: renderSVG
|
|
}));
|
|
var createDomVisualElement = function(Component, options) {
|
|
return Component === "SVG" ? svgVisualElement(options, { enableHardwareAcceleration: false }) : htmlVisualElement(options, { enableHardwareAcceleration: true });
|
|
};
|
|
var svgMotionConfig = {
|
|
scrapeMotionValuesFromProps,
|
|
createRenderState: createSvgRenderState,
|
|
onMount: function(props, instance, _a) {
|
|
var renderState = _a.renderState, latestValues = _a.latestValues;
|
|
try {
|
|
renderState.dimensions = typeof instance.getBBox === "function" ? instance.getBBox() : instance.getBoundingClientRect();
|
|
} catch (e) {
|
|
renderState.dimensions = {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0
|
|
};
|
|
}
|
|
if (isPath(instance)) {
|
|
renderState.totalPathLength = instance.getTotalLength();
|
|
}
|
|
buildSVGAttrs(renderState, latestValues, void 0, void 0, { enableHardwareAcceleration: false }, props.transformTemplate);
|
|
renderSVG(instance, renderState);
|
|
}
|
|
};
|
|
function isPath(element) {
|
|
return element.tagName === "path";
|
|
}
|
|
var htmlMotionConfig = {
|
|
scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
|
|
createRenderState: createHtmlRenderState
|
|
};
|
|
function getCurrentTreeVariants(props, context) {
|
|
if (checkIfControllingVariants(props)) {
|
|
var initial = props.initial, animate2 = props.animate;
|
|
return {
|
|
initial: initial === false || isVariantLabel(initial) ? initial : void 0,
|
|
animate: isVariantLabel(animate2) ? animate2 : void 0
|
|
};
|
|
}
|
|
return props.inherit !== false ? context || {} : {};
|
|
}
|
|
function UseCreateMotionContext($$payload, $$props) {
|
|
push();
|
|
var $$store_subs;
|
|
let props = $$props["props"], isStatic = $$props["isStatic"], isCustom = $$props["isCustom"];
|
|
let mc = getContext(MotionContext) || MotionContext(isCustom);
|
|
let tmp = getCurrentTreeVariants(props, get(mc)), initial = tmp.initial, animate2 = tmp.animate;
|
|
const variantLabelsAsDependency = (prop) => {
|
|
return Array.isArray(prop) ? prop.join(" ") : prop;
|
|
};
|
|
const memo = () => {
|
|
return { initial, animate: animate2 };
|
|
};
|
|
let value = memo();
|
|
({ initial, animate: animate2 } = getCurrentTreeVariants(props, store_get($$store_subs ??= {}, "$mc", mc)));
|
|
if (isStatic) {
|
|
value = memo(variantLabelsAsDependency(initial), variantLabelsAsDependency(animate2));
|
|
}
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", { value }, null);
|
|
$$payload.out += `<!---->`;
|
|
if ($$store_subs) unsubscribe_stores($$store_subs);
|
|
bind_props($$props, { props, isStatic, isCustom });
|
|
pop();
|
|
}
|
|
function resolveMotionValue(value) {
|
|
var unwrappedValue = isMotionValue(value) ? value.get() : value;
|
|
return isCustomValue(unwrappedValue) ? unwrappedValue.toValue() : unwrappedValue;
|
|
}
|
|
const makeState = ({
|
|
scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2,
|
|
createRenderState,
|
|
onMount
|
|
}, props, context, presenceContext) => {
|
|
const state = {
|
|
latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps2),
|
|
renderState: createRenderState()
|
|
};
|
|
if (onMount) {
|
|
state.mount = (instance) => onMount(props, instance, state);
|
|
}
|
|
return state;
|
|
};
|
|
function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
|
|
const values = {};
|
|
const blockInitialAnimation = presenceContext?.initial === false;
|
|
const motionValues = scrapeMotionValues(props);
|
|
for (const key in motionValues) {
|
|
values[key] = resolveMotionValue(motionValues[key]);
|
|
}
|
|
let { initial, animate: animate2 } = props;
|
|
const isControllingVariants = checkIfControllingVariants(props);
|
|
const isVariantNode = checkIfVariantNode(props);
|
|
if (context && isVariantNode && !isControllingVariants && props.inherit !== false) {
|
|
initial !== null && initial !== void 0 ? initial : initial = context.initial;
|
|
animate2 !== null && animate2 !== void 0 ? animate2 : animate2 = context.animate;
|
|
}
|
|
const variantToSet = blockInitialAnimation || initial === false ? animate2 : initial;
|
|
if (variantToSet && typeof variantToSet !== "boolean" && !isAnimationControls(variantToSet)) {
|
|
const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
|
|
list.forEach((definition) => {
|
|
const resolved = resolveVariantFromProps(props, definition);
|
|
if (!resolved) return;
|
|
const { transitionEnd, transition, ...target } = resolved;
|
|
for (const key in target) values[key] = target[key];
|
|
for (const key in transitionEnd) values[key] = transitionEnd[key];
|
|
});
|
|
}
|
|
return values;
|
|
}
|
|
function UseVisualState($$payload, $$props) {
|
|
push();
|
|
var $$store_subs;
|
|
let config = $$props["config"], props = $$props["props"], isStatic = $$props["isStatic"], isCustom = $$props["isCustom"];
|
|
const context = getContext(MotionContext) || MotionContext(isCustom);
|
|
const presenceContext = getContext(PresenceContext) || PresenceContext(isCustom);
|
|
let state = makeState(config, props, get(context), get(presenceContext));
|
|
const ms = makeState;
|
|
if (isStatic) {
|
|
state = ms(config, props, store_get($$store_subs ??= {}, "$context", context), store_get($$store_subs ??= {}, "$presenceContext", presenceContext));
|
|
}
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", { state }, null);
|
|
$$payload.out += `<!---->`;
|
|
if ($$store_subs) unsubscribe_stores($$store_subs);
|
|
bind_props($$props, { config, props, isStatic, isCustom });
|
|
pop();
|
|
}
|
|
function isRefObject(ref) {
|
|
return typeof ref === "object" && Object.prototype.hasOwnProperty.call(ref, "current");
|
|
}
|
|
function useMotionRef(visualState, visualElement2, externalRef) {
|
|
return function(instance) {
|
|
var _a;
|
|
instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance));
|
|
if (visualElement2) {
|
|
instance ? visualElement2.mount(instance) : visualElement2.unmount();
|
|
}
|
|
if (externalRef) {
|
|
if (typeof externalRef === "function") {
|
|
externalRef(instance);
|
|
} else if (isRefObject(externalRef)) {
|
|
externalRef.current = instance;
|
|
}
|
|
}
|
|
};
|
|
}
|
|
function Motion($$payload, $$props) {
|
|
const $$sanitized_props = sanitize_props($$props);
|
|
const $$restProps = rest_props($$sanitized_props, [
|
|
"isSVG",
|
|
"forwardMotionProps",
|
|
"externalRef",
|
|
"targetEl"
|
|
]);
|
|
push();
|
|
var $$store_subs;
|
|
let motionProps, isStatic;
|
|
let isSVG = fallback($$props["isSVG"], false), forwardMotionProps = fallback($$props["forwardMotionProps"], false), externalRef = fallback($$props["externalRef"], void 0), targetEl = fallback($$props["targetEl"], void 0);
|
|
const isCustom = targetEl;
|
|
let Component = isSVG ? "SVG" : "DOM";
|
|
let createVisualElement = createDomVisualElement;
|
|
let visualStateConfig = isSVG ? svgMotionConfig : htmlMotionConfig;
|
|
const a = getContext(MotionConfigContext) || MotionConfigContext(isCustom);
|
|
const setContext2 = (c, v) => {
|
|
c.visualElement = v;
|
|
return v;
|
|
};
|
|
motionProps = $$restProps;
|
|
({ isStatic } = store_get($$store_subs ??= {}, "$a", a) || {});
|
|
ScaleCorrectionProvider($$payload, {
|
|
isCustom,
|
|
children: ($$payload2) => {
|
|
UseCreateMotionContext($$payload2, {
|
|
props: motionProps,
|
|
isStatic,
|
|
isCustom,
|
|
children: invalid_default_snippet,
|
|
$$slots: {
|
|
default: ($$payload3, { value: context }) => {
|
|
UseVisualState($$payload3, {
|
|
config: visualStateConfig,
|
|
props: motionProps,
|
|
isStatic,
|
|
isCustom,
|
|
children: invalid_default_snippet,
|
|
$$slots: {
|
|
default: ($$payload4, { state: visualState }) => {
|
|
UseVisualElement($$payload4, {
|
|
Component,
|
|
visualState,
|
|
createVisualElement,
|
|
props: motionProps,
|
|
isCustom,
|
|
children: invalid_default_snippet,
|
|
$$slots: {
|
|
default: ($$payload5, { visualElement: visualElement2 }) => {
|
|
UseFeatures($$payload5, {
|
|
visualElement: setContext2(context, visualElement2),
|
|
props: motionProps,
|
|
children: invalid_default_snippet,
|
|
$$slots: {
|
|
default: ($$payload6, { features: _features }) => {
|
|
MotionContextProvider($$payload6, {
|
|
value: context,
|
|
isCustom,
|
|
children: ($$payload7) => {
|
|
UseRender($$payload7, {
|
|
Component,
|
|
props: motionProps,
|
|
ref: useMotionRef(visualState, context.visualElement, externalRef),
|
|
visualState,
|
|
isStatic,
|
|
forwardMotionProps,
|
|
children: invalid_default_snippet,
|
|
$$slots: {
|
|
default: ($$payload8, { motion: motion2, props: renderProps }) => {
|
|
$$payload8.out += `<!---->`;
|
|
slot($$payload8, $$props, "default", { motion: motion2, props: renderProps }, null);
|
|
$$payload8.out += `<!---->`;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
$$slots: { default: true }
|
|
});
|
|
$$payload6.out += `<!----> `;
|
|
{
|
|
$$payload6.out += "<!--[!-->";
|
|
}
|
|
$$payload6.out += `<!--]-->`;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
$$slots: { default: true }
|
|
});
|
|
if ($$store_subs) unsubscribe_stores($$store_subs);
|
|
bind_props($$props, {
|
|
isSVG,
|
|
forwardMotionProps,
|
|
externalRef,
|
|
targetEl
|
|
});
|
|
pop();
|
|
}
|
|
function addDomEvent(target, eventName, handler, options) {
|
|
target.addEventListener(eventName, handler, options);
|
|
return function() {
|
|
return target.removeEventListener(eventName, handler, options);
|
|
};
|
|
}
|
|
function UseDomEvent($$payload, $$props) {
|
|
push();
|
|
let ref = $$props["ref"], eventName = $$props["eventName"], handler = fallback($$props["handler"], void 0), options = fallback($$props["options"], void 0);
|
|
let cleanup = () => {
|
|
};
|
|
const effect = () => {
|
|
cleanup();
|
|
if (!ref) {
|
|
return () => {
|
|
};
|
|
}
|
|
const element = ref.current;
|
|
if (handler && element) {
|
|
return addDomEvent(element, eventName, handler, options);
|
|
}
|
|
return () => {
|
|
};
|
|
};
|
|
onDestroy(cleanup);
|
|
cleanup = effect();
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", {}, null);
|
|
$$payload.out += `<!---->`;
|
|
bind_props($$props, { ref, eventName, handler, options });
|
|
pop();
|
|
}
|
|
function isMouseEvent(event) {
|
|
if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) {
|
|
return !!(event.pointerType === "mouse");
|
|
}
|
|
return event instanceof MouseEvent;
|
|
}
|
|
function isTouchEvent(event) {
|
|
var hasTouches = !!event.touches;
|
|
return hasTouches;
|
|
}
|
|
function filterPrimaryPointer(eventHandler) {
|
|
return function(event) {
|
|
var isMouseEvent2 = event instanceof MouseEvent;
|
|
var isPrimaryPointer = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
if (isPrimaryPointer) {
|
|
eventHandler(event);
|
|
}
|
|
};
|
|
}
|
|
var defaultPagePoint = { pageX: 0, pageY: 0 };
|
|
function pointFromTouch(e, pointType) {
|
|
if (pointType === void 0) {
|
|
pointType = "page";
|
|
}
|
|
var primaryTouch = e.touches[0] || e.changedTouches[0];
|
|
var point = primaryTouch || defaultPagePoint;
|
|
return {
|
|
x: point[pointType + "X"],
|
|
y: point[pointType + "Y"]
|
|
};
|
|
}
|
|
function pointFromMouse(point, pointType) {
|
|
if (pointType === void 0) {
|
|
pointType = "page";
|
|
}
|
|
return {
|
|
x: point[pointType + "X"],
|
|
y: point[pointType + "Y"]
|
|
};
|
|
}
|
|
function extractEventInfo(event, pointType) {
|
|
if (pointType === void 0) {
|
|
pointType = "page";
|
|
}
|
|
return {
|
|
point: isTouchEvent(event) ? pointFromTouch(event, pointType) : pointFromMouse(event, pointType)
|
|
};
|
|
}
|
|
function getViewportPointFromEvent(event) {
|
|
return extractEventInfo(event, "client");
|
|
}
|
|
var wrapHandler = function(handler, shouldFilterPrimaryPointer) {
|
|
if (shouldFilterPrimaryPointer === void 0) {
|
|
shouldFilterPrimaryPointer = false;
|
|
}
|
|
var listener = function(event) {
|
|
return handler(event, extractEventInfo(event));
|
|
};
|
|
return shouldFilterPrimaryPointer ? filterPrimaryPointer(listener) : listener;
|
|
};
|
|
var isBrowser = typeof window !== "undefined";
|
|
var supportsPointerEvents = function() {
|
|
return isBrowser && window.onpointerdown === null;
|
|
};
|
|
var supportsTouchEvents = function() {
|
|
return isBrowser && window.ontouchstart === null;
|
|
};
|
|
var supportsMouseEvents = function() {
|
|
return isBrowser && window.onmousedown === null;
|
|
};
|
|
const mouseEventNames = {
|
|
pointerdown: "mousedown",
|
|
pointermove: "mousemove",
|
|
pointerup: "mouseup",
|
|
pointercancel: "mousecancel",
|
|
pointerover: "mouseover",
|
|
pointerout: "mouseout",
|
|
pointerenter: "mouseenter",
|
|
pointerleave: "mouseleave"
|
|
};
|
|
const touchEventNames = {
|
|
pointerdown: "touchstart",
|
|
pointermove: "touchmove",
|
|
pointerup: "touchend",
|
|
pointercancel: "touchcancel"
|
|
};
|
|
function getPointerEventName(name) {
|
|
if (supportsPointerEvents()) {
|
|
return name;
|
|
} else if (supportsTouchEvents()) {
|
|
return touchEventNames[name];
|
|
} else if (supportsMouseEvents()) {
|
|
return mouseEventNames[name];
|
|
}
|
|
return name;
|
|
}
|
|
function addPointerEvent(target, eventName, handler, options) {
|
|
return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === "pointerdown"), options);
|
|
}
|
|
function UsePointerEvent($$payload, $$props) {
|
|
push();
|
|
let ref = $$props["ref"], eventName = $$props["eventName"], handler = fallback($$props["handler"], void 0), options = fallback($$props["options"], void 0);
|
|
UseDomEvent($$payload, {
|
|
ref,
|
|
eventName: getPointerEventName(eventName),
|
|
handler: handler && wrapHandler(handler, eventName === "pointerdown"),
|
|
options,
|
|
children: ($$payload2) => {
|
|
$$payload2.out += `<!---->`;
|
|
slot($$payload2, $$props, "default", {}, null);
|
|
$$payload2.out += `<!---->`;
|
|
},
|
|
$$slots: { default: true }
|
|
});
|
|
bind_props($$props, { ref, eventName, handler, options });
|
|
pop();
|
|
}
|
|
var PanSession = (
|
|
/** @class */
|
|
function() {
|
|
function PanSession2(event, handlers, _a) {
|
|
var _this = this;
|
|
var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint;
|
|
this.startEvent = null;
|
|
this.lastMoveEvent = null;
|
|
this.lastMoveEventInfo = null;
|
|
this.handlers = {};
|
|
this.updatePoint = function() {
|
|
if (!(_this.lastMoveEvent && _this.lastMoveEventInfo))
|
|
return;
|
|
var info2 = getPanInfo(_this.lastMoveEventInfo, _this.history);
|
|
var isPanStarted = _this.startEvent !== null;
|
|
var isDistancePastThreshold = distance(info2.offset, { x: 0, y: 0 }) >= 3;
|
|
if (!isPanStarted && !isDistancePastThreshold)
|
|
return;
|
|
var point2 = info2.point;
|
|
var timestamp2 = getFrameData().timestamp;
|
|
_this.history.push(Object.assign(Object.assign({}, point2), { timestamp: timestamp2 }));
|
|
var _a2 = _this.handlers, onStart = _a2.onStart, onMove = _a2.onMove;
|
|
if (!isPanStarted) {
|
|
onStart && onStart(_this.lastMoveEvent, info2);
|
|
_this.startEvent = _this.lastMoveEvent;
|
|
}
|
|
onMove && onMove(_this.lastMoveEvent, info2);
|
|
};
|
|
this.handlePointerMove = function(event2, info2) {
|
|
_this.lastMoveEvent = event2;
|
|
_this.lastMoveEventInfo = transformPoint(info2, _this.transformPagePoint);
|
|
if (isMouseEvent(event2) && event2.buttons === 0) {
|
|
_this.handlePointerUp(event2, info2);
|
|
return;
|
|
}
|
|
sync.update(_this.updatePoint, true);
|
|
};
|
|
this.handlePointerUp = function(event2, info2) {
|
|
_this.end();
|
|
var _a2 = _this.handlers, onEnd = _a2.onEnd, onSessionEnd = _a2.onSessionEnd;
|
|
var panInfo = getPanInfo(transformPoint(info2, _this.transformPagePoint), _this.history);
|
|
if (_this.startEvent && onEnd) {
|
|
onEnd(event2, panInfo);
|
|
}
|
|
onSessionEnd && onSessionEnd(event2, panInfo);
|
|
};
|
|
if (isTouchEvent(event) && event.touches.length > 1)
|
|
return;
|
|
this.handlers = handlers;
|
|
this.transformPagePoint = transformPagePoint;
|
|
var info = extractEventInfo(event);
|
|
var initialInfo = transformPoint(info, this.transformPagePoint);
|
|
var point = initialInfo.point;
|
|
var timestamp = getFrameData().timestamp;
|
|
this.history = [Object.assign(Object.assign({}, point), { timestamp })];
|
|
var onSessionStart = handlers.onSessionStart;
|
|
onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
|
|
this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp));
|
|
}
|
|
PanSession2.prototype.updateHandlers = function(handlers) {
|
|
this.handlers = handlers;
|
|
};
|
|
PanSession2.prototype.end = function() {
|
|
this.removeListeners && this.removeListeners();
|
|
cancelSync.update(this.updatePoint);
|
|
};
|
|
return PanSession2;
|
|
}()
|
|
);
|
|
function transformPoint(info, transformPagePoint) {
|
|
return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
|
|
}
|
|
function subtractPoint(a, b) {
|
|
return { x: a.x - b.x, y: a.y - b.y };
|
|
}
|
|
function getPanInfo(_a, history) {
|
|
var point = _a.point;
|
|
return {
|
|
point,
|
|
delta: subtractPoint(point, lastDevicePoint(history)),
|
|
offset: subtractPoint(point, startDevicePoint(history)),
|
|
velocity: getVelocity(history, 0.1)
|
|
};
|
|
}
|
|
function startDevicePoint(history) {
|
|
return history[0];
|
|
}
|
|
function lastDevicePoint(history) {
|
|
return history[history.length - 1];
|
|
}
|
|
function getVelocity(history, timeDelta) {
|
|
if (history.length < 2) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
var i = history.length - 1;
|
|
var timestampedPoint = null;
|
|
var lastPoint = lastDevicePoint(history);
|
|
while (i >= 0) {
|
|
timestampedPoint = history[i];
|
|
if (lastPoint.timestamp - timestampedPoint.timestamp > secondsToMilliseconds(timeDelta)) {
|
|
break;
|
|
}
|
|
i--;
|
|
}
|
|
if (!timestampedPoint) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
var time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1e3;
|
|
if (time === 0) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
var currentVelocity = {
|
|
x: (lastPoint.x - timestampedPoint.x) / time,
|
|
y: (lastPoint.y - timestampedPoint.y) / time
|
|
};
|
|
if (currentVelocity.x === Infinity) {
|
|
currentVelocity.x = 0;
|
|
}
|
|
if (currentVelocity.y === Infinity) {
|
|
currentVelocity.y = 0;
|
|
}
|
|
return currentVelocity;
|
|
}
|
|
function UsePanGesture($$payload, $$props) {
|
|
push();
|
|
var $$store_subs;
|
|
let hasPanEvents;
|
|
let props = $$props["props"], visualElement2 = $$props["visualElement"], isCustom = $$props["isCustom"];
|
|
let tmp = props, onPan = tmp.onPan, onPanStart = tmp.onPanStart, onPanEnd = tmp.onPanEnd, onPanSessionStart = tmp.onPanSessionStart;
|
|
let panSession = null;
|
|
const mcc = getContext(MotionConfigContext) || MotionConfigContext(isCustom);
|
|
let tmp_1 = get(mcc), transformPagePoint = tmp_1.transformPagePoint;
|
|
let handlers = {
|
|
onSessionStart: onPanSessionStart,
|
|
onStart: onPanStart,
|
|
onMove: onPan,
|
|
onEnd: (event, info) => {
|
|
panSession = null;
|
|
onPanEnd && onPanEnd(event, info);
|
|
}
|
|
};
|
|
function onPointerDown(event) {
|
|
panSession = new PanSession(event, handlers, { transformPagePoint });
|
|
}
|
|
onDestroy(() => panSession && panSession.end());
|
|
({
|
|
onPan,
|
|
onPanStart,
|
|
onPanEnd,
|
|
onPanSessionStart
|
|
} = props);
|
|
hasPanEvents = onPan || onPanStart || onPanEnd || onPanSessionStart;
|
|
({ transformPagePoint } = store_get($$store_subs ??= {}, "$mcc", mcc));
|
|
handlers = {
|
|
onSessionStart: onPanSessionStart,
|
|
onStart: onPanStart,
|
|
onMove: onPan,
|
|
onEnd: (event, info) => {
|
|
panSession = null;
|
|
onPanEnd && onPanEnd(event, info);
|
|
}
|
|
};
|
|
UsePointerEvent($$payload, {
|
|
ref: visualElement2,
|
|
eventName: "pointerdown",
|
|
handler: hasPanEvents && onPointerDown,
|
|
children: ($$payload2) => {
|
|
$$payload2.out += `<!---->`;
|
|
slot($$payload2, $$props, "default", {}, null);
|
|
$$payload2.out += `<!---->`;
|
|
},
|
|
$$slots: { default: true }
|
|
});
|
|
if ($$store_subs) unsubscribe_stores($$store_subs);
|
|
bind_props($$props, { props, visualElement: visualElement2, isCustom });
|
|
pop();
|
|
}
|
|
var isNodeOrChild = function(parent, child) {
|
|
if (!child) {
|
|
return false;
|
|
} else if (parent === child) {
|
|
return true;
|
|
} else {
|
|
return isNodeOrChild(parent, child.parentElement);
|
|
}
|
|
};
|
|
function createLock(name) {
|
|
var lock = null;
|
|
return function() {
|
|
var openLock = function() {
|
|
lock = null;
|
|
};
|
|
if (lock === null) {
|
|
lock = name;
|
|
return openLock;
|
|
}
|
|
return false;
|
|
};
|
|
}
|
|
var globalHorizontalLock = createLock("dragHorizontal");
|
|
var globalVerticalLock = createLock("dragVertical");
|
|
function getGlobalLock(drag2) {
|
|
var lock = false;
|
|
if (drag2 === "y") {
|
|
lock = globalVerticalLock();
|
|
} else if (drag2 === "x") {
|
|
lock = globalHorizontalLock();
|
|
} else {
|
|
var openHorizontal_1 = globalHorizontalLock();
|
|
var openVertical_1 = globalVerticalLock();
|
|
if (openHorizontal_1 && openVertical_1) {
|
|
lock = function() {
|
|
openHorizontal_1();
|
|
openVertical_1();
|
|
};
|
|
} else {
|
|
if (openHorizontal_1)
|
|
openHorizontal_1();
|
|
if (openVertical_1)
|
|
openVertical_1();
|
|
}
|
|
}
|
|
return lock;
|
|
}
|
|
function isDragActive() {
|
|
var openGestureLock = getGlobalLock(true);
|
|
if (!openGestureLock)
|
|
return true;
|
|
openGestureLock();
|
|
return false;
|
|
}
|
|
function UseTapGesture($$payload, $$props) {
|
|
push();
|
|
let onTap, onTapStart, onTapCancel, whileTap, hasPressListeners;
|
|
let props = $$props["props"], visualElement2 = $$props["visualElement"];
|
|
let isPressing = false;
|
|
let cancelPointerEndListeners = null;
|
|
function removePointerEndListener() {
|
|
cancelPointerEndListeners?.();
|
|
cancelPointerEndListeners = null;
|
|
}
|
|
function checkPointerEnd() {
|
|
removePointerEndListener();
|
|
isPressing = false;
|
|
visualElement2.animationState?.setActive(AnimationType.Tap, false);
|
|
return !isDragActive();
|
|
}
|
|
function onPointerUp(event, info) {
|
|
if (!checkPointerEnd()) return;
|
|
!isNodeOrChild(visualElement2.getInstance(), event.target) ? onTapCancel?.(event, info) : onTap?.(event, info);
|
|
}
|
|
function onPointerCancel(event, info) {
|
|
if (!checkPointerEnd()) return;
|
|
onTapCancel?.(event, info);
|
|
}
|
|
function onPointerDown(event, info) {
|
|
if (isPressing) return;
|
|
removePointerEndListener();
|
|
isPressing = true;
|
|
cancelPointerEndListeners = pipe(addPointerEvent(window, "pointerup", onPointerUp), addPointerEvent(window, "pointercancel", onPointerCancel));
|
|
onTapStart?.(event, info);
|
|
visualElement2.animationState?.setActive(AnimationType.Tap, true);
|
|
}
|
|
onDestroy(removePointerEndListener);
|
|
({ onTap, onTapStart, onTapCancel, whileTap } = props);
|
|
hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
|
|
UsePointerEvent($$payload, {
|
|
ref: visualElement2,
|
|
eventName: "pointerdown",
|
|
handler: hasPressListeners ? onPointerDown : void 0,
|
|
children: ($$payload2) => {
|
|
$$payload2.out += `<!---->`;
|
|
slot($$payload2, $$props, "default", {}, null);
|
|
$$payload2.out += `<!---->`;
|
|
},
|
|
$$slots: { default: true }
|
|
});
|
|
bind_props($$props, { props, visualElement: visualElement2 });
|
|
pop();
|
|
}
|
|
function createHoverEvent(visualElement2, isActive, callback) {
|
|
return (event, info) => {
|
|
if (!isMouseEvent(event) || isDragActive()) return;
|
|
callback?.(event, info);
|
|
visualElement2.animationState?.setActive(AnimationType.Hover, isActive);
|
|
};
|
|
}
|
|
function UseHoverGesture($$payload, $$props) {
|
|
push();
|
|
let props = $$props["props"], visualElement2 = $$props["visualElement"];
|
|
let tmp = props, onHoverStart = tmp.onHoverStart, onHoverEnd = tmp.onHoverEnd, whileHover = tmp.whileHover;
|
|
({ onHoverStart, onHoverEnd, whileHover } = props);
|
|
UsePointerEvent($$payload, {
|
|
ref: visualElement2,
|
|
eventName: "pointerenter",
|
|
handler: onHoverStart || whileHover ? createHoverEvent(visualElement2, true, onHoverStart) : void 0
|
|
});
|
|
$$payload.out += `<!----> `;
|
|
UsePointerEvent($$payload, {
|
|
ref: visualElement2,
|
|
eventName: "pointerleave",
|
|
handler: onHoverEnd || whileHover ? createHoverEvent(visualElement2, false, onHoverEnd) : void 0
|
|
});
|
|
$$payload.out += `<!----> <!---->`;
|
|
slot($$payload, $$props, "default", {}, null);
|
|
$$payload.out += `<!---->`;
|
|
bind_props($$props, { props, visualElement: visualElement2 });
|
|
pop();
|
|
}
|
|
function UseFocusGesture($$payload, $$props) {
|
|
push();
|
|
let whileFocus;
|
|
let props = $$props["props"], visualElement2 = $$props["visualElement"];
|
|
const onFocus = () => {
|
|
visualElement2.animationState?.setActive(AnimationType.Focus, true);
|
|
};
|
|
const onBlur = () => {
|
|
visualElement2.animationState?.setActive(AnimationType.Focus, false);
|
|
};
|
|
({ whileFocus } = props);
|
|
UseDomEvent($$payload, {
|
|
ref: visualElement2,
|
|
eventName: "focus",
|
|
handler: whileFocus ? onFocus : void 0,
|
|
children: ($$payload2) => {
|
|
UseDomEvent($$payload2, {
|
|
ref: visualElement2,
|
|
eventName: "blur",
|
|
handler: whileFocus ? onBlur : void 0,
|
|
children: ($$payload3) => {
|
|
$$payload3.out += `<!---->`;
|
|
slot($$payload3, $$props, "default", {}, null);
|
|
$$payload3.out += `<!---->`;
|
|
},
|
|
$$slots: { default: true }
|
|
});
|
|
},
|
|
$$slots: { default: true }
|
|
});
|
|
bind_props($$props, { props, visualElement: visualElement2 });
|
|
pop();
|
|
}
|
|
const createMotionClass = (features) => {
|
|
loadFeatures(features);
|
|
return Motion;
|
|
};
|
|
const gestureAnimations = {
|
|
tap: UseTapGesture,
|
|
focus: UseFocusGesture,
|
|
hover: UseHoverGesture
|
|
};
|
|
function applyConstraints(point, _a, elastic) {
|
|
var min = _a.min, max = _a.max;
|
|
if (min !== void 0 && point < min) {
|
|
point = elastic ? mix(min, point, elastic.min) : Math.max(point, min);
|
|
} else if (max !== void 0 && point > max) {
|
|
point = elastic ? mix(max, point, elastic.max) : Math.min(point, max);
|
|
}
|
|
return point;
|
|
}
|
|
function calcConstrainedMinPoint(point, length, progress2, constraints, elastic) {
|
|
var min = point - length * progress2;
|
|
return constraints ? applyConstraints(min, constraints, elastic) : min;
|
|
}
|
|
function calcRelativeAxisConstraints(axis, min, max) {
|
|
return {
|
|
min: min !== void 0 ? axis.min + min : void 0,
|
|
max: max !== void 0 ? axis.max + max - (axis.max - axis.min) : void 0
|
|
};
|
|
}
|
|
function calcRelativeConstraints(layoutBox, _a) {
|
|
var top = _a.top, left = _a.left, bottom = _a.bottom, right = _a.right;
|
|
return {
|
|
x: calcRelativeAxisConstraints(layoutBox.x, left, right),
|
|
y: calcRelativeAxisConstraints(layoutBox.y, top, bottom)
|
|
};
|
|
}
|
|
function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
|
|
var _a;
|
|
var min = constraintsAxis.min - layoutAxis.min;
|
|
var max = constraintsAxis.max - layoutAxis.max;
|
|
if (constraintsAxis.max - constraintsAxis.min < layoutAxis.max - layoutAxis.min) {
|
|
_a = __read([max, min], 2), min = _a[0], max = _a[1];
|
|
}
|
|
return {
|
|
min: layoutAxis.min + min,
|
|
max: layoutAxis.min + max
|
|
};
|
|
}
|
|
function calcViewportConstraints(layoutBox, constraintsBox) {
|
|
return {
|
|
x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
|
|
y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y)
|
|
};
|
|
}
|
|
function calcPositionFromProgress(axis, constraints, progress2) {
|
|
var axisLength = axis.max - axis.min;
|
|
var min = mix(constraints.min, constraints.max - axisLength, progress2);
|
|
return { min, max: min + axisLength };
|
|
}
|
|
function rebaseAxisConstraints(layout, constraints) {
|
|
var relativeConstraints = {};
|
|
if (constraints.min !== void 0) {
|
|
relativeConstraints.min = constraints.min - layout.min;
|
|
}
|
|
if (constraints.max !== void 0) {
|
|
relativeConstraints.max = constraints.max - layout.min;
|
|
}
|
|
return relativeConstraints;
|
|
}
|
|
var defaultElastic = 0.35;
|
|
function resolveDragElastic(dragElastic) {
|
|
if (dragElastic === false) {
|
|
dragElastic = 0;
|
|
} else if (dragElastic === true) {
|
|
dragElastic = defaultElastic;
|
|
}
|
|
return {
|
|
x: resolveAxisElastic(dragElastic, "left", "right"),
|
|
y: resolveAxisElastic(dragElastic, "top", "bottom")
|
|
};
|
|
}
|
|
function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
|
|
return {
|
|
min: resolvePointElastic(dragElastic, minLabel),
|
|
max: resolvePointElastic(dragElastic, maxLabel)
|
|
};
|
|
}
|
|
function resolvePointElastic(dragElastic, label) {
|
|
var _a;
|
|
return typeof dragElastic === "number" ? dragElastic : (_a = dragElastic[label]) !== null && _a !== void 0 ? _a : 0;
|
|
}
|
|
function convertToRelativeProjection(visualElement2, isLayoutDrag) {
|
|
if (isLayoutDrag === void 0) {
|
|
isLayoutDrag = true;
|
|
}
|
|
var projectionParent = visualElement2.getProjectionParent();
|
|
if (!projectionParent)
|
|
return false;
|
|
var offset;
|
|
if (isLayoutDrag) {
|
|
offset = calcRelativeOffset(projectionParent.projection.target, visualElement2.projection.target);
|
|
removeBoxTransforms(offset, projectionParent.getLatestValues());
|
|
} else {
|
|
offset = calcRelativeOffset(projectionParent.getLayoutState().layout, visualElement2.getLayoutState().layout);
|
|
}
|
|
eachAxis(function(axis) {
|
|
return visualElement2.setProjectionTargetAxis(axis, offset[axis].min, offset[axis].max, true);
|
|
});
|
|
return true;
|
|
}
|
|
var elementDragControls = /* @__PURE__ */ new WeakMap();
|
|
var lastPointerEvent;
|
|
var VisualElementDragControls = (
|
|
/** @class */
|
|
function() {
|
|
function VisualElementDragControls2(_a) {
|
|
var visualElement2 = _a.visualElement;
|
|
this.isDragging = false;
|
|
this.currentDirection = null;
|
|
this.constraints = false;
|
|
this.elastic = axisBox();
|
|
this.props = {};
|
|
this.hasMutatedConstraints = false;
|
|
this.cursorProgress = {
|
|
x: 0.5,
|
|
y: 0.5
|
|
};
|
|
this.originPoint = {};
|
|
this.openGlobalLock = null;
|
|
this.panSession = null;
|
|
this.visualElement = visualElement2;
|
|
this.visualElement.enableLayoutProjection();
|
|
elementDragControls.set(visualElement2, this);
|
|
}
|
|
VisualElementDragControls2.prototype.start = function(originEvent, _a) {
|
|
var _this = this;
|
|
var _b = _a === void 0 ? {} : _a, _c = _b.snapToCursor, snapToCursor = _c === void 0 ? false : _c, cursorProgress = _b.cursorProgress;
|
|
var onSessionStart = function(event) {
|
|
var _a2;
|
|
_this.stopMotion();
|
|
var initialPoint = getViewportPointFromEvent(event).point;
|
|
(_a2 = _this.cancelLayout) === null || _a2 === void 0 ? void 0 : _a2.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;
|
|
_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();
|
|
var projection = _this.visualElement.projection;
|
|
eachAxis(function(axis) {
|
|
if (!hasManuallySetCursorOrigin) {
|
|
var _a3 = projection.target[axis], min = _a3.min, max = _a3.max;
|
|
_this.cursorProgress[axis] = cursorProgress ? cursorProgress[axis] : progress(min, max, initialPoint[axis]);
|
|
}
|
|
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();
|
|
});
|
|
});
|
|
};
|
|
var onStart = function(event, info) {
|
|
var _a2, _b2, _c2;
|
|
var _d = _this.props, drag2 = _d.drag, dragPropagation = _d.dragPropagation;
|
|
if (drag2 && !dragPropagation) {
|
|
if (_this.openGlobalLock)
|
|
_this.openGlobalLock();
|
|
_this.openGlobalLock = getGlobalLock(drag2);
|
|
if (!_this.openGlobalLock)
|
|
return;
|
|
}
|
|
flushLayout();
|
|
_this.isDragging = true;
|
|
_this.currentDirection = null;
|
|
(_b2 = (_a2 = _this.props).onDragStart) === null || _b2 === void 0 ? void 0 : _b2.call(_a2, event, info);
|
|
(_c2 = _this.visualElement.animationState) === null || _c2 === void 0 ? void 0 : _c2.setActive(AnimationType.Drag, true);
|
|
};
|
|
var onMove = function(event, info) {
|
|
var _a2, _b2, _c2, _d;
|
|
var _e = _this.props, dragPropagation = _e.dragPropagation, dragDirectionLock = _e.dragDirectionLock;
|
|
if (!dragPropagation && !_this.openGlobalLock)
|
|
return;
|
|
var offset = info.offset;
|
|
if (dragDirectionLock && _this.currentDirection === null) {
|
|
_this.currentDirection = getCurrentDirection(offset);
|
|
if (_this.currentDirection !== null) {
|
|
(_b2 = (_a2 = _this.props).onDirectionLock) === null || _b2 === void 0 ? void 0 : _b2.call(_a2, _this.currentDirection);
|
|
}
|
|
return;
|
|
}
|
|
_this.updateAxis("x", info.point, offset);
|
|
_this.updateAxis("y", info.point, offset);
|
|
(_d = (_c2 = _this.props).onDrag) === null || _d === void 0 ? void 0 : _d.call(_c2, event, info);
|
|
lastPointerEvent = event;
|
|
};
|
|
var onSessionEnd = function(event, info) {
|
|
return _this.stop(event, info);
|
|
};
|
|
var transformPagePoint = this.props.transformPagePoint;
|
|
this.panSession = new PanSession(originEvent, {
|
|
onSessionStart,
|
|
onStart,
|
|
onMove,
|
|
onSessionEnd
|
|
}, { transformPagePoint });
|
|
};
|
|
VisualElementDragControls2.prototype.resolveDragConstraints = function() {
|
|
var _this = this;
|
|
var _a = this.props, dragConstraints = _a.dragConstraints, dragElastic = _a.dragElastic;
|
|
var layout = this.visualElement.getLayoutState().layoutCorrected;
|
|
if (dragConstraints) {
|
|
this.constraints = isRefObject(dragConstraints) ? this.resolveRefConstraints(layout, dragConstraints) : calcRelativeConstraints(layout, dragConstraints);
|
|
} else {
|
|
this.constraints = false;
|
|
}
|
|
this.elastic = resolveDragElastic(dragElastic);
|
|
if (this.constraints && !this.hasMutatedConstraints) {
|
|
eachAxis(function(axis) {
|
|
if (_this.getAxisMotionValue(axis)) {
|
|
_this.constraints[axis] = rebaseAxisConstraints(layout[axis], _this.constraints[axis]);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
VisualElementDragControls2.prototype.resolveRefConstraints = function(layoutBox, constraints) {
|
|
var _a = this.props, onMeasureDragConstraints = _a.onMeasureDragConstraints, transformPagePoint = _a.transformPagePoint;
|
|
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.");
|
|
this.constraintsBox = getBoundingBox(constraintsElement, transformPagePoint);
|
|
var measuredConstraints = calcViewportConstraints(layoutBox, this.constraintsBox);
|
|
if (onMeasureDragConstraints) {
|
|
var userConstraints = onMeasureDragConstraints(convertAxisBoxToBoundingBox(measuredConstraints));
|
|
this.hasMutatedConstraints = !!userConstraints;
|
|
if (userConstraints) {
|
|
measuredConstraints = convertBoundingBoxToAxisBox(userConstraints);
|
|
}
|
|
}
|
|
return measuredConstraints;
|
|
};
|
|
VisualElementDragControls2.prototype.cancelDrag = function() {
|
|
var _a, _b;
|
|
this.visualElement.unlockProjectionTarget();
|
|
(_a = this.cancelLayout) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
this.isDragging = false;
|
|
this.panSession && this.panSession.end();
|
|
this.panSession = null;
|
|
if (!this.props.dragPropagation && this.openGlobalLock) {
|
|
this.openGlobalLock();
|
|
this.openGlobalLock = null;
|
|
}
|
|
(_b = this.visualElement.animationState) === null || _b === void 0 ? void 0 : _b.setActive(AnimationType.Drag, false);
|
|
};
|
|
VisualElementDragControls2.prototype.stop = function(event, info) {
|
|
var _a, _b, _c;
|
|
(_a = this.panSession) === null || _a === void 0 ? void 0 : _a.end();
|
|
this.panSession = null;
|
|
var isDragging = this.isDragging;
|
|
this.cancelDrag();
|
|
if (!isDragging)
|
|
return;
|
|
var velocity = info.velocity;
|
|
this.animateDragEnd(velocity);
|
|
(_c = (_b = this.props).onDragEnd) === null || _c === void 0 ? void 0 : _c.call(_b, event, info);
|
|
};
|
|
VisualElementDragControls2.prototype.snapToCursor = function(point) {
|
|
var _this = this;
|
|
return eachAxis(function(axis) {
|
|
var drag2 = _this.props.drag;
|
|
if (!shouldDrag(axis, drag2, _this.currentDirection))
|
|
return;
|
|
var axisValue = _this.getAxisMotionValue(axis);
|
|
if (axisValue) {
|
|
var box = _this.visualElement.getLayoutState().layout;
|
|
var length_1 = box[axis].max - box[axis].min;
|
|
var center = box[axis].min + length_1 / 2;
|
|
var offset = point[axis] - center;
|
|
_this.originPoint[axis] = point[axis];
|
|
axisValue.set(offset);
|
|
} else {
|
|
_this.cursorProgress[axis] = 0.5;
|
|
return true;
|
|
}
|
|
}).includes(true);
|
|
};
|
|
VisualElementDragControls2.prototype.updateAxis = function(axis, point, offset) {
|
|
var drag2 = this.props.drag;
|
|
if (!shouldDrag(axis, drag2, this.currentDirection))
|
|
return;
|
|
return this.getAxisMotionValue(axis) ? this.updateAxisMotionValue(axis, offset) : this.updateVisualElementAxis(axis, point);
|
|
};
|
|
VisualElementDragControls2.prototype.updateAxisMotionValue = function(axis, offset) {
|
|
var axisValue = this.getAxisMotionValue(axis);
|
|
if (!offset || !axisValue)
|
|
return;
|
|
var nextValue = this.originPoint[axis] + offset[axis];
|
|
var update = this.constraints ? applyConstraints(nextValue, this.constraints[axis], this.elastic[axis]) : nextValue;
|
|
axisValue.set(update);
|
|
};
|
|
VisualElementDragControls2.prototype.updateVisualElementAxis = function(axis, point) {
|
|
var _a;
|
|
var axisLayout = this.visualElement.getLayoutState().layout[axis];
|
|
var axisLength = axisLayout.max - axisLayout.min;
|
|
var axisProgress = this.cursorProgress[axis];
|
|
var min = calcConstrainedMinPoint(point[axis], axisLength, axisProgress, (_a = this.constraints) === null || _a === void 0 ? void 0 : _a[axis], this.elastic[axis]);
|
|
this.visualElement.setProjectionTargetAxis(axis, min, min + axisLength);
|
|
};
|
|
VisualElementDragControls2.prototype.setProps = function(_a) {
|
|
var _b = _a.drag, drag2 = _b === void 0 ? false : _b, _c = _a.dragDirectionLock, dragDirectionLock = _c === void 0 ? false : _c, _d = _a.dragPropagation, dragPropagation = _d === void 0 ? false : _d, _e = _a.dragConstraints, dragConstraints = _e === void 0 ? false : _e, _f = _a.dragElastic, dragElastic = _f === void 0 ? defaultElastic : _f, _g = _a.dragMomentum, dragMomentum = _g === void 0 ? true : _g, remainingProps = __rest(_a, ["drag", "dragDirectionLock", "dragPropagation", "dragConstraints", "dragElastic", "dragMomentum"]);
|
|
this.props = Object.assign({
|
|
drag: drag2,
|
|
dragDirectionLock,
|
|
dragPropagation,
|
|
dragConstraints,
|
|
dragElastic,
|
|
dragMomentum
|
|
}, remainingProps);
|
|
};
|
|
VisualElementDragControls2.prototype.getAxisMotionValue = function(axis) {
|
|
var _a = this.props, layout = _a.layout, layoutId = _a.layoutId;
|
|
var dragKey = "_drag" + axis.toUpperCase();
|
|
if (this.props[dragKey]) {
|
|
return this.props[dragKey];
|
|
} else if (!layout && layoutId === void 0) {
|
|
return this.visualElement.getValue(axis, 0);
|
|
}
|
|
};
|
|
VisualElementDragControls2.prototype.isLayoutDrag = function() {
|
|
return !this.getAxisMotionValue("x");
|
|
};
|
|
VisualElementDragControls2.prototype.isExternalDrag = function() {
|
|
var _a = this.props, _dragX = _a._dragX, _dragY = _a._dragY;
|
|
return _dragX || _dragY;
|
|
};
|
|
VisualElementDragControls2.prototype.animateDragEnd = function(velocity) {
|
|
var _this = this;
|
|
var _a = this.props, drag2 = _a.drag, dragMomentum = _a.dragMomentum, dragElastic = _a.dragElastic, dragTransition = _a.dragTransition;
|
|
var isRelative = convertToRelativeProjection(this.visualElement, this.isLayoutDrag() && !this.isExternalDrag());
|
|
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 _a2 = relativeConstraints_1[axis], min = _a2.min, max = _a2.max;
|
|
constraints[axis] = {
|
|
min: isNaN(min) ? void 0 : min,
|
|
max: isNaN(max) ? void 0 : max
|
|
};
|
|
});
|
|
}
|
|
}
|
|
var momentumAnimations = eachAxis(function(axis) {
|
|
var _a2;
|
|
if (!shouldDrag(axis, drag2, _this.currentDirection)) {
|
|
return;
|
|
}
|
|
var transition = (_a2 = constraints === null || constraints === void 0 ? void 0 : constraints[axis]) !== null && _a2 !== void 0 ? _a2 : {};
|
|
var bounceStiffness = dragElastic ? 200 : 1e6;
|
|
var bounceDamping = dragElastic ? 40 : 1e7;
|
|
var inertia2 = Object.assign(Object.assign({
|
|
type: "inertia",
|
|
velocity: dragMomentum ? velocity[axis] : 0,
|
|
bounceStiffness,
|
|
bounceDamping,
|
|
timeConstant: 750,
|
|
restDelta: 1,
|
|
restSpeed: 10
|
|
}, dragTransition), transition);
|
|
return _this.getAxisMotionValue(axis) ? _this.startAxisValueAnimation(axis, inertia2) : _this.visualElement.startLayoutAnimation(axis, inertia2, isRelative);
|
|
});
|
|
return Promise.all(momentumAnimations).then(function() {
|
|
var _a2, _b;
|
|
(_b = (_a2 = _this.props).onDragTransitionEnd) === null || _b === void 0 ? void 0 : _b.call(_a2);
|
|
});
|
|
};
|
|
VisualElementDragControls2.prototype.stopMotion = function() {
|
|
var _this = this;
|
|
eachAxis(function(axis) {
|
|
var axisValue = _this.getAxisMotionValue(axis);
|
|
axisValue ? axisValue.stop() : _this.visualElement.stopLayoutAnimation();
|
|
});
|
|
};
|
|
VisualElementDragControls2.prototype.startAxisValueAnimation = function(axis, transition) {
|
|
var axisValue = this.getAxisMotionValue(axis);
|
|
if (!axisValue)
|
|
return;
|
|
var currentValue = axisValue.get();
|
|
axisValue.set(currentValue);
|
|
axisValue.set(currentValue);
|
|
return startAnimation(axis, axisValue, 0, transition);
|
|
};
|
|
VisualElementDragControls2.prototype.scalePoint = function() {
|
|
var _this = this;
|
|
var _a = this.props, drag2 = _a.drag, dragConstraints = _a.dragConstraints;
|
|
if (!isRefObject(dragConstraints) || !this.constraintsBox)
|
|
return;
|
|
this.stopMotion();
|
|
var boxProgress = { x: 0, y: 0 };
|
|
eachAxis(function(axis) {
|
|
boxProgress[axis] = calcOrigin$1(_this.visualElement.projection.target[axis], _this.constraintsBox[axis]);
|
|
});
|
|
this.updateConstraints(function() {
|
|
eachAxis(function(axis) {
|
|
if (!shouldDrag(axis, drag2, null))
|
|
return;
|
|
var _a2 = calcPositionFromProgress(_this.visualElement.projection.target[axis], _this.constraintsBox[axis], boxProgress[axis]), min = _a2.min, max = _a2.max;
|
|
_this.visualElement.setProjectionTargetAxis(axis, min, max);
|
|
});
|
|
});
|
|
setTimeout(flushLayout, 1);
|
|
};
|
|
VisualElementDragControls2.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);
|
|
});
|
|
};
|
|
VisualElementDragControls2.prototype.mount = function(visualElement2) {
|
|
var _this = this;
|
|
var element = visualElement2.getInstance();
|
|
var stopPointerListener = addPointerEvent(element, "pointerdown", function(event) {
|
|
var _a = _this.props, drag2 = _a.drag, _b = _a.dragListener, dragListener = _b === void 0 ? true : _b;
|
|
drag2 && dragListener && _this.start(event);
|
|
});
|
|
var stopResizeListener = addDomEvent(window, "resize", function() {
|
|
_this.scalePoint();
|
|
});
|
|
var stopLayoutUpdateListener = visualElement2.onLayoutUpdate(function() {
|
|
if (_this.isDragging) {
|
|
_this.resolveDragConstraints();
|
|
}
|
|
});
|
|
var prevDragCursor = visualElement2.prevDragCursor;
|
|
if (prevDragCursor) {
|
|
this.start(lastPointerEvent, { cursorProgress: prevDragCursor });
|
|
}
|
|
return function() {
|
|
stopPointerListener === null || stopPointerListener === void 0 ? void 0 : stopPointerListener();
|
|
stopResizeListener === null || stopResizeListener === void 0 ? void 0 : stopResizeListener();
|
|
stopLayoutUpdateListener === null || stopLayoutUpdateListener === void 0 ? void 0 : stopLayoutUpdateListener();
|
|
_this.cancelDrag();
|
|
};
|
|
};
|
|
return VisualElementDragControls2;
|
|
}()
|
|
);
|
|
function shouldDrag(direction, drag2, currentDirection) {
|
|
return (drag2 === true || drag2 === direction) && (currentDirection === null || currentDirection === direction);
|
|
}
|
|
function getCurrentDirection(offset, lockThreshold) {
|
|
if (lockThreshold === void 0) {
|
|
lockThreshold = 10;
|
|
}
|
|
var direction = null;
|
|
if (Math.abs(offset.y) > lockThreshold) {
|
|
direction = "y";
|
|
} else if (Math.abs(offset.x) > lockThreshold) {
|
|
direction = "x";
|
|
}
|
|
return direction;
|
|
}
|
|
function UseDrag($$payload, $$props) {
|
|
push();
|
|
var $$store_subs;
|
|
let visualElement2 = $$props["visualElement"], props = $$props["props"], isCustom = $$props["isCustom"];
|
|
const mcc = getContext(MotionConfigContext) || MotionConfigContext(isCustom);
|
|
let dragControls = new VisualElementDragControls({ visualElement: visualElement2 });
|
|
let cleanup;
|
|
const dragEffect = () => {
|
|
if (cleanup) {
|
|
cleanup();
|
|
}
|
|
if (groupDragControls) {
|
|
cleanup = groupDragControls.subscribe(dragControls);
|
|
}
|
|
};
|
|
let tmp = props, groupDragControls = tmp.dragControls;
|
|
let tmp_1 = get(mcc), transformPagePoint = tmp_1.transformPagePoint;
|
|
dragControls.setProps({ ...props, transformPagePoint });
|
|
onDestroy(() => {
|
|
if (cleanup) {
|
|
cleanup();
|
|
}
|
|
});
|
|
({ dragControls: groupDragControls } = props);
|
|
({ transformPagePoint } = store_get($$store_subs ??= {}, "$mcc", mcc));
|
|
dragControls.setProps({ ...props, transformPagePoint });
|
|
dragEffect();
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", {}, null);
|
|
$$payload.out += `<!---->`;
|
|
if ($$store_subs) unsubscribe_stores($$store_subs);
|
|
bind_props($$props, { visualElement: visualElement2, props, isCustom });
|
|
pop();
|
|
}
|
|
const drag = {
|
|
pan: UsePanGesture,
|
|
drag: UseDrag
|
|
};
|
|
function Animate($$payload, $$props) {
|
|
push();
|
|
let visualElement2 = $$props["visualElement"], layout = fallback($$props["layout"], void 0), safeToRemove = $$props["safeToRemove"];
|
|
let stopAxisAnimation = { x: void 0, y: void 0 };
|
|
let unsubLayoutReady;
|
|
onDestroy(() => {
|
|
unsubLayoutReady();
|
|
eachAxis((axis) => stopAxisAnimation[axis]?.());
|
|
});
|
|
bind_props($$props, { visualElement: visualElement2, layout, safeToRemove });
|
|
pop();
|
|
}
|
|
function AnimateLayoutContextProvider($$payload, $$props) {
|
|
push();
|
|
var $$store_subs;
|
|
let visualElement2 = $$props["visualElement"], props = $$props["props"], isCustom = $$props["isCustom"];
|
|
let tmp = props, layout = tmp.layout;
|
|
const presence = usePresence(isCustom);
|
|
({ layout } = props);
|
|
Animate($$payload, {
|
|
visualElement: visualElement2,
|
|
layout,
|
|
safeToRemove: store_get($$store_subs ??= {}, "$presence", presence)[1]
|
|
});
|
|
if ($$store_subs) unsubscribe_stores($$store_subs);
|
|
bind_props($$props, { visualElement: visualElement2, props, isCustom });
|
|
pop();
|
|
}
|
|
function Measure($$payload, $$props) {
|
|
push();
|
|
let visualElement2 = $$props["visualElement"], syncLayout = $$props["syncLayout"], framerSyncLayout = $$props["framerSyncLayout"], update = $$props["update"];
|
|
const scaleCorrectionContext = getContext(ScaleCorrectionContext);
|
|
const scaleCorrectionParentContext = getContext(ScaleCorrectionParentContext);
|
|
let updated = false;
|
|
const updater = (nc = false) => {
|
|
if (updated) {
|
|
return null;
|
|
}
|
|
updated = true;
|
|
get(scaleCorrectionContext).forEach((v) => {
|
|
v.updater?.(true);
|
|
});
|
|
if (isSharedLayout(syncLayout)) {
|
|
syncLayout.syncUpdate();
|
|
} else {
|
|
snapshotViewportBox(visualElement2, nc);
|
|
syncLayout.add(visualElement2);
|
|
}
|
|
return null;
|
|
};
|
|
const afterU = (nc = false) => {
|
|
updated = false;
|
|
const scc = get(scaleCorrectionContext);
|
|
scc.forEach((v, i) => {
|
|
v.afterU?.(true);
|
|
});
|
|
if (!isSharedLayout(syncLayout)) {
|
|
syncLayout.flush();
|
|
}
|
|
};
|
|
scaleCorrectionParentContext.update((v) => v.concat([{ updater, afterU }]));
|
|
update !== void 0 && updater(update);
|
|
bind_props($$props, {
|
|
visualElement: visualElement2,
|
|
syncLayout,
|
|
framerSyncLayout,
|
|
update
|
|
});
|
|
pop();
|
|
}
|
|
function MeasureContextProvider($$payload, $$props) {
|
|
push();
|
|
var $$store_subs;
|
|
let update;
|
|
let visualElement2 = $$props["visualElement"], props = $$props["props"], isCustom = $$props["isCustom"];
|
|
const syncLayout = getContext(SharedLayoutContext) || SharedLayoutContext(isCustom);
|
|
const framerSyncLayout = getContext(FramerTreeLayoutContext) || FramerTreeLayoutContext();
|
|
({ update } = props);
|
|
Measure($$payload, {
|
|
syncLayout: store_get($$store_subs ??= {}, "$syncLayout", syncLayout),
|
|
framerSyncLayout: store_get($$store_subs ??= {}, "$framerSyncLayout", framerSyncLayout),
|
|
visualElement: visualElement2,
|
|
update
|
|
});
|
|
if ($$store_subs) unsubscribe_stores($$store_subs);
|
|
bind_props($$props, { visualElement: visualElement2, props, isCustom });
|
|
pop();
|
|
}
|
|
var layoutAnimations = {
|
|
measureLayout: MeasureContextProvider,
|
|
layoutAnimation: AnimateLayoutContextProvider
|
|
};
|
|
function AnimationState($$payload, $$props) {
|
|
push();
|
|
let visualElement2 = $$props["visualElement"], props = $$props["props"];
|
|
let tmp = props, animate2 = tmp.animate;
|
|
({ animate: animate2 } = props);
|
|
{
|
|
visualElement2.animationState = visualElement2.animationState || createAnimationState(visualElement2);
|
|
}
|
|
if (isAnimationControls(animate2)) {
|
|
tick().then(() => animate2.subscribe(visualElement2));
|
|
}
|
|
bind_props($$props, { visualElement: visualElement2, props });
|
|
pop();
|
|
}
|
|
function Exit($$payload, $$props) {
|
|
push();
|
|
var $$store_subs;
|
|
let custom;
|
|
let props = $$props["props"], visualElement2 = $$props["visualElement"], isCustom = $$props["isCustom"];
|
|
const presenceContext = getContext(PresenceContext) || PresenceContext(isCustom);
|
|
const presence = usePresence(isCustom);
|
|
const effect = (pres) => {
|
|
const [isPresent2, onExitComplete] = pres;
|
|
const animation = visualElement2.animationState?.setActive(AnimationType.Exit, !isPresent2, {
|
|
custom: store_get($$store_subs ??= {}, "$presenceContext", presenceContext)?.custom ?? custom
|
|
});
|
|
!isPresent2 && animation?.then(onExitComplete);
|
|
return "";
|
|
};
|
|
({ custom } = props);
|
|
effect(store_get($$store_subs ??= {}, "$presence", presence));
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", {}, null);
|
|
$$payload.out += `<!---->`;
|
|
if ($$store_subs) unsubscribe_stores($$store_subs);
|
|
bind_props($$props, { props, visualElement: visualElement2, isCustom });
|
|
pop();
|
|
}
|
|
const animations = {
|
|
animation: AnimationState,
|
|
exit: Exit
|
|
};
|
|
const featureBundle = {
|
|
...animations,
|
|
...gestureAnimations,
|
|
...drag,
|
|
...layoutAnimations
|
|
};
|
|
var motion = (
|
|
//createMotionProxy(allMotionFeatures);
|
|
/* @__PURE__ */ createMotionClass(featureBundle)
|
|
);
|
|
let presenceId = 0;
|
|
function getPresenceId() {
|
|
const id = presenceId;
|
|
presenceId++;
|
|
return id;
|
|
}
|
|
function newChildrenMap() {
|
|
return /* @__PURE__ */ new Map();
|
|
}
|
|
function PresenceChild($$payload, $$props) {
|
|
push();
|
|
let isPresent2 = $$props["isPresent"], onExitComplete = fallback($$props["onExitComplete"], void 0), initial = $$props["initial"], custom = fallback($$props["custom"], void 0), presenceAffectsLayout = $$props["presenceAffectsLayout"], isCustom = $$props["isCustom"];
|
|
const presenceChildren = new newChildrenMap();
|
|
const id = getPresenceId();
|
|
const memoContext = () => {
|
|
return {
|
|
id,
|
|
initial,
|
|
isPresent: isPresent2,
|
|
custom,
|
|
onExitComplete: (childId) => {
|
|
presenceChildren.set(childId, true);
|
|
let allComplete = true;
|
|
presenceChildren.forEach((isComplete) => {
|
|
if (!isComplete) allComplete = false;
|
|
});
|
|
allComplete && onExitComplete?.();
|
|
},
|
|
register: (childId) => {
|
|
presenceChildren.set(childId, false);
|
|
return () => presenceChildren.delete(childId);
|
|
}
|
|
};
|
|
};
|
|
let context = PresenceContext();
|
|
const keyset = () => {
|
|
presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
|
|
};
|
|
setContext(PresenceContext, context);
|
|
setDomContext("Presence", isCustom, context);
|
|
context.set(memoContext());
|
|
keyset();
|
|
tick().then(() => {
|
|
!isPresent2 && !presenceChildren.size && onExitComplete?.();
|
|
});
|
|
$$payload.out += `<!---->`;
|
|
slot($$payload, $$props, "default", {}, null);
|
|
$$payload.out += `<!---->`;
|
|
bind_props($$props, {
|
|
isPresent: isPresent2,
|
|
onExitComplete,
|
|
initial,
|
|
custom,
|
|
presenceAffectsLayout,
|
|
isCustom
|
|
});
|
|
pop();
|
|
}
|
|
function AnimatePresence($$payload, $$props) {
|
|
push();
|
|
var $$store_subs;
|
|
let isl, forceRender;
|
|
let list = fallback($$props["list"], void 0), custom = fallback($$props["custom"], void 0), initial = fallback($$props["initial"], true), onExitComplete = fallback($$props["onExitComplete"], void 0), exitBeforeEnter = fallback($$props["exitBeforeEnter"], void 0), presenceAffectsLayout = fallback($$props["presenceAffectsLayout"], true), show = fallback($$props["show"], void 0), isCustom = fallback($$props["isCustom"], false);
|
|
let _list = list !== void 0 ? list : show ? [{ key: 1 }] : [];
|
|
const layoutContext = getContext(SharedLayoutContext) || SharedLayoutContext(isCustom);
|
|
function getChildKey(child) {
|
|
return child.key || "";
|
|
}
|
|
let isInitialRender = true;
|
|
let filteredChildren = _list;
|
|
let presentChildren = filteredChildren;
|
|
let allChildren = /* @__PURE__ */ new Map();
|
|
let exiting = /* @__PURE__ */ new Set();
|
|
const updateChildLookup = (children, allChild) => {
|
|
children.forEach((child) => {
|
|
const key = getChildKey(child);
|
|
allChild.set(key, child);
|
|
});
|
|
};
|
|
let childrenToRender = [
|
|
...filteredChildren.map((v) => ({ present: true, item: v, key: v.key }))
|
|
];
|
|
_list = list !== void 0 ? list : show ? [{ key: 1 }] : [];
|
|
isl = isSharedLayout(store_get($$store_subs ??= {}, "$layoutContext", layoutContext));
|
|
forceRender = () => {
|
|
if (isl) {
|
|
store_get($$store_subs ??= {}, "$layoutContext", layoutContext).forceUpdate();
|
|
}
|
|
_list = [..._list];
|
|
};
|
|
filteredChildren = _list;
|
|
updateChildLookup(filteredChildren, allChildren);
|
|
if (!isInitialRender) {
|
|
childrenToRender = [
|
|
...filteredChildren.map((v) => ({ present: true, item: v, key: v.key }))
|
|
];
|
|
const presentKeys = presentChildren.map(getChildKey);
|
|
const targetKeys = filteredChildren.map(getChildKey);
|
|
const numPresent = presentKeys.length;
|
|
for (let i = 0; i < numPresent; i++) {
|
|
const key = presentKeys[i];
|
|
if (targetKeys.indexOf(key) === -1) {
|
|
exiting.add(key);
|
|
} else {
|
|
exiting.delete(key);
|
|
}
|
|
}
|
|
if (exitBeforeEnter && exiting.size) {
|
|
childrenToRender = [];
|
|
}
|
|
exiting.forEach((key) => {
|
|
if (targetKeys.indexOf(key) !== -1) return;
|
|
const child = allChildren.get(key);
|
|
if (!child) return;
|
|
const insertionIndex = presentKeys.indexOf(key);
|
|
const onExit = () => {
|
|
allChildren.delete(key);
|
|
exiting.delete(key);
|
|
const removeIndex = presentChildren.findIndex((presentChild) => presentChild.key === key);
|
|
if (removeIndex < 0) {
|
|
return;
|
|
}
|
|
presentChildren.splice(removeIndex, 1);
|
|
if (!exiting.size) {
|
|
presentChildren = [...filteredChildren];
|
|
forceRender();
|
|
onExitComplete && onExitComplete();
|
|
}
|
|
};
|
|
childrenToRender.splice(insertionIndex, 0, {
|
|
present: false,
|
|
item: child,
|
|
key: getChildKey(child),
|
|
onExit
|
|
});
|
|
});
|
|
presentChildren = childrenToRender;
|
|
} else {
|
|
isInitialRender = false;
|
|
}
|
|
const each_array = ensure_array_like(childrenToRender);
|
|
$$payload.out += `<!--[-->`;
|
|
for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
|
|
let child = each_array[$$index];
|
|
PresenceChild($$payload, {
|
|
isPresent: child.present,
|
|
initial: initial ? void 0 : false,
|
|
custom: child.onExit ? custom : void 0,
|
|
presenceAffectsLayout,
|
|
onExitComplete: child.onExit,
|
|
isCustom,
|
|
children: ($$payload2) => {
|
|
$$payload2.out += `<!---->`;
|
|
slot($$payload2, $$props, "default", { item: child.item }, null);
|
|
$$payload2.out += `<!---->`;
|
|
},
|
|
$$slots: { default: true }
|
|
});
|
|
}
|
|
$$payload.out += `<!--]-->`;
|
|
if ($$store_subs) unsubscribe_stores($$store_subs);
|
|
bind_props($$props, {
|
|
list,
|
|
custom,
|
|
initial,
|
|
onExitComplete,
|
|
exitBeforeEnter,
|
|
presenceAffectsLayout,
|
|
show,
|
|
isCustom
|
|
});
|
|
pop();
|
|
}
|
|
Promise.resolve();
|
|
function cn(...inputs) {
|
|
return twMerge(clsx$1(inputs));
|
|
}
|
|
function BlurFade($$payload, $$props) {
|
|
push();
|
|
let duration = fallback($$props["duration"], 0.4);
|
|
let delay = fallback($$props["delay"], 0);
|
|
let yOffset = fallback($$props["yOffset"], 6);
|
|
let inViewMargin = fallback($$props["inViewMargin"], "-50px");
|
|
let blur = fallback($$props["blur"], "6px");
|
|
let id = fallback($$props["id"], () => "fallback-id", true);
|
|
let once = fallback($$props["once"], false);
|
|
let defaultVariants = {
|
|
hidden: {
|
|
opacity: 0,
|
|
y: yOffset,
|
|
filter: `blur(${blur})`
|
|
},
|
|
visible: { opacity: 1, y: 0, filter: `blur(0px)` }
|
|
};
|
|
let isInView = "hidden";
|
|
let className = fallback($$props["class"], "");
|
|
AnimatePresence($$payload, {
|
|
list: [{ key: id }],
|
|
children: invalid_default_snippet,
|
|
$$slots: {
|
|
default: ($$payload2, { item }) => {
|
|
motion($$payload2, {
|
|
initial: "hidden",
|
|
animate: isInView,
|
|
exit: "hidden",
|
|
variants: defaultVariants,
|
|
transition: {
|
|
delay: 0.04 + delay,
|
|
duration,
|
|
ease: "easeOut"
|
|
},
|
|
children: invalid_default_snippet,
|
|
$$slots: {
|
|
default: ($$payload3, { motion: motion2 }) => {
|
|
$$payload3.out += `<div${attr("class", clsx(cn(className)))}><!---->`;
|
|
slot($$payload3, $$props, "default", {}, () => {
|
|
$$payload3.out += `Default`;
|
|
});
|
|
$$payload3.out += `<!----></div>`;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
bind_props($$props, {
|
|
duration,
|
|
delay,
|
|
yOffset,
|
|
inViewMargin,
|
|
blur,
|
|
id,
|
|
once,
|
|
class: className
|
|
});
|
|
pop();
|
|
}
|
|
function Navigations($$payload) {
|
|
$$payload.out += `<div class="btm-nav max-w-[16rem] max-h-[4rem] place-self-center mb-3 rounded-lg text-xl shadow-2xl bg-primary"><a aria-label="Home"${attr("href", `${stringify(base)}/`)} class="svelte-1kgnly8"><i class="fa-solid fa-house svelte-1kgnly8"></i></a> <a aria-label="Contact"${attr("href", `${stringify(base)}/contact`)} class="svelte-1kgnly8"><i class="fa-solid fa-address-book svelte-1kgnly8"></i></a> <a aria-label="Skills"${attr("href", `${stringify(base)}/skills`)} class="svelte-1kgnly8"><i class="fa-solid fa-tools svelte-1kgnly8"></i></a> <a aria-label="Projects"${attr("href", `${stringify(base)}/projects`)} class="svelte-1kgnly8"><i class="fa-solid fa-suitcase svelte-1kgnly8"></i></a></div>`;
|
|
}
|
|
export {
|
|
BlurFade as B,
|
|
Navigations as N,
|
|
attr as a,
|
|
cn as b,
|
|
clsx as c,
|
|
motionValue as d,
|
|
motion as m
|
|
};
|