Mission Control Dashboard - Initial implementation

This commit is contained in:
Daniel Arroyo
2026-03-27 18:36:05 +00:00
parent 257cea2c7d
commit a8fb4d4555
12516 changed files with 2307128 additions and 2 deletions

View File

@@ -0,0 +1,67 @@
import { Feature, resolveVariant } from 'motion-dom';
let id = 0;
class ExitAnimationFeature extends Feature {
constructor() {
super(...arguments);
this.id = id++;
this.isExitComplete = false;
}
update() {
if (!this.node.presenceContext)
return;
const { isPresent, onExitComplete } = this.node.presenceContext;
const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};
if (!this.node.animationState || isPresent === prevIsPresent) {
return;
}
if (isPresent && prevIsPresent === false) {
/**
* When re-entering, if the exit animation already completed
* (element is at rest), reset to initial values so the enter
* animation replays from the correct position.
*/
if (this.isExitComplete) {
const { initial, custom } = this.node.getProps();
if (typeof initial === "string") {
const resolved = resolveVariant(this.node, initial, custom);
if (resolved) {
const { transition, transitionEnd, ...target } = resolved;
for (const key in target) {
this.node
.getValue(key)
?.jump(target[key]);
}
}
}
this.node.animationState.reset();
this.node.animationState.animateChanges();
}
else {
this.node.animationState.setActive("exit", false);
}
this.isExitComplete = false;
return;
}
const exitAnimation = this.node.animationState.setActive("exit", !isPresent);
if (onExitComplete && !isPresent) {
exitAnimation.then(() => {
this.isExitComplete = true;
onExitComplete(this.id);
});
}
}
mount() {
const { register, onExitComplete } = this.node.presenceContext || {};
if (onExitComplete) {
onExitComplete(this.id);
}
if (register) {
this.unmount = register(this.id);
}
}
unmount() { }
}
export { ExitAnimationFeature };
//# sourceMappingURL=exit.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"exit.mjs","sources":["../../../../../src/motion/features/animation/exit.ts"],"sourcesContent":["import { Feature, resolveVariant } from \"motion-dom\"\n\nlet id = 0\n\nexport class ExitAnimationFeature extends Feature<unknown> {\n private id: number = id++\n private isExitComplete = false\n\n update() {\n if (!this.node.presenceContext) return\n\n const { isPresent, onExitComplete } = this.node.presenceContext\n const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {}\n\n if (!this.node.animationState || isPresent === prevIsPresent) {\n return\n }\n\n if (isPresent && prevIsPresent === false) {\n /**\n * When re-entering, if the exit animation already completed\n * (element is at rest), reset to initial values so the enter\n * animation replays from the correct position.\n */\n if (this.isExitComplete) {\n const { initial, custom } = this.node.getProps()\n\n if (typeof initial === \"string\") {\n const resolved = resolveVariant(\n this.node,\n initial,\n custom\n )\n if (resolved) {\n const { transition, transitionEnd, ...target } =\n resolved\n for (const key in target) {\n this.node\n .getValue(key)\n ?.jump(\n target[\n key as keyof typeof target\n ] as any\n )\n }\n }\n }\n\n this.node.animationState.reset()\n this.node.animationState.animateChanges()\n } else {\n this.node.animationState.setActive(\"exit\", false)\n }\n\n this.isExitComplete = false\n return\n }\n\n const exitAnimation = this.node.animationState.setActive(\n \"exit\",\n !isPresent\n )\n\n if (onExitComplete && !isPresent) {\n exitAnimation.then(() => {\n this.isExitComplete = true\n onExitComplete(this.id)\n })\n }\n }\n\n mount() {\n const { register, onExitComplete } = this.node.presenceContext || {}\n\n if (onExitComplete) {\n onExitComplete(this.id)\n }\n\n if (register) {\n this.unmount = register(this.id)\n }\n }\n\n unmount() {}\n}\n"],"names":[],"mappings":";;AAEA,IAAI,EAAE,GAAG,CAAC;AAEJ,MAAO,oBAAqB,SAAQ,OAAgB,CAAA;AAA1D,IAAA,WAAA,GAAA;;QACY,IAAA,CAAA,EAAE,GAAW,EAAE,EAAE;QACjB,IAAA,CAAA,cAAc,GAAG,KAAK;IA8ElC;IA5EI,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE;QAEhC,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe;AAC/D,QAAA,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,mBAAmB,IAAI,EAAE;QAExE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,SAAS,KAAK,aAAa,EAAE;YAC1D;QACJ;AAEA,QAAA,IAAI,SAAS,IAAI,aAAa,KAAK,KAAK,EAAE;AACtC;;;;AAIG;AACH,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACrB,gBAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAEhD,gBAAA,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;AAC7B,oBAAA,MAAM,QAAQ,GAAG,cAAc,CAC3B,IAAI,CAAC,IAAI,EACT,OAAO,EACP,MAAM,CACT;oBACD,IAAI,QAAQ,EAAE;wBACV,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,MAAM,EAAE,GAC1C,QAAQ;AACZ,wBAAA,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE;AACtB,4BAAA,IAAI,CAAC;iCACA,QAAQ,CAAC,GAAG;AACb,kCAAE,IAAI,CACF,MAAM,CACF,GAA0B,CACtB,CACX;wBACT;oBACJ;gBACJ;AAEA,gBAAA,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;AAChC,gBAAA,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE;YAC7C;iBAAO;gBACH,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC;YACrD;AAEA,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;YAC3B;QACJ;AAEA,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CACpD,MAAM,EACN,CAAC,SAAS,CACb;AAED,QAAA,IAAI,cAAc,IAAI,CAAC,SAAS,EAAE;AAC9B,YAAA,aAAa,CAAC,IAAI,CAAC,MAAK;AACpB,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC1B,gBAAA,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;AAC3B,YAAA,CAAC,CAAC;QACN;IACJ;IAEA,KAAK,GAAA;AACD,QAAA,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,EAAE;QAEpE,IAAI,cAAc,EAAE;AAChB,YAAA,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;QAC3B;QAEA,IAAI,QAAQ,EAAE;YACV,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QACpC;IACJ;AAEA,IAAA,OAAO,KAAI;AACd;;;;"}

View File

@@ -0,0 +1,39 @@
import { Feature, createAnimationState, isAnimationControls } from 'motion-dom';
class AnimationFeature extends Feature {
/**
* We dynamically generate the AnimationState manager as it contains a reference
* to the underlying animation library. We only want to load that if we load this,
* so people can optionally code split it out using the `m` component.
*/
constructor(node) {
super(node);
node.animationState || (node.animationState = createAnimationState(node));
}
updateAnimationControlsSubscription() {
const { animate } = this.node.getProps();
if (isAnimationControls(animate)) {
this.unmountControls = animate.subscribe(this.node);
}
}
/**
* Subscribe any provided AnimationControls to the component's VisualElement
*/
mount() {
this.updateAnimationControlsSubscription();
}
update() {
const { animate } = this.node.getProps();
const { animate: prevAnimate } = this.node.prevProps || {};
if (animate !== prevAnimate) {
this.updateAnimationControlsSubscription();
}
}
unmount() {
this.node.animationState.reset();
this.unmountControls?.();
}
}
export { AnimationFeature };
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","sources":["../../../../../src/motion/features/animation/index.ts"],"sourcesContent":["import {\n createAnimationState,\n Feature,\n isAnimationControls,\n type VisualElement,\n} from \"motion-dom\"\n\nexport class AnimationFeature extends Feature<unknown> {\n unmountControls?: () => void\n\n /**\n * We dynamically generate the AnimationState manager as it contains a reference\n * to the underlying animation library. We only want to load that if we load this,\n * so people can optionally code split it out using the `m` component.\n */\n constructor(node: VisualElement) {\n super(node)\n node.animationState ||= createAnimationState(node)\n }\n\n updateAnimationControlsSubscription() {\n const { animate } = this.node.getProps()\n if (isAnimationControls(animate)) {\n this.unmountControls = animate.subscribe(this.node)\n }\n }\n\n /**\n * Subscribe any provided AnimationControls to the component's VisualElement\n */\n mount() {\n this.updateAnimationControlsSubscription()\n }\n\n update() {\n const { animate } = this.node.getProps()\n const { animate: prevAnimate } = this.node.prevProps || {}\n if (animate !== prevAnimate) {\n this.updateAnimationControlsSubscription()\n }\n }\n\n unmount() {\n this.node.animationState!.reset()\n this.unmountControls?.()\n }\n}\n"],"names":[],"mappings":";;AAOM,MAAO,gBAAiB,SAAQ,OAAgB,CAAA;AAGlD;;;;AAIG;AACH,IAAA,WAAA,CAAY,IAAmB,EAAA;QAC3B,KAAK,CAAC,IAAI,CAAC;QACX,IAAI,CAAC,cAAc,KAAnB,IAAI,CAAC,cAAc,GAAK,oBAAoB,CAAC,IAAI,CAAC,CAAA;IACtD;IAEA,mCAAmC,GAAA;QAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACxC,QAAA,IAAI,mBAAmB,CAAC,OAAO,CAAC,EAAE;YAC9B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;QACvD;IACJ;AAEA;;AAEG;IACH,KAAK,GAAA;QACD,IAAI,CAAC,mCAAmC,EAAE;IAC9C;IAEA,MAAM,GAAA;QACF,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACxC,QAAA,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE;AAC1D,QAAA,IAAI,OAAO,KAAK,WAAW,EAAE;YACzB,IAAI,CAAC,mCAAmC,EAAE;QAC9C;IACJ;IAEA,OAAO,GAAA;AACH,QAAA,IAAI,CAAC,IAAI,CAAC,cAAe,CAAC,KAAK,EAAE;AACjC,QAAA,IAAI,CAAC,eAAe,IAAI;IAC5B;AACH;;;;"}

View File

@@ -0,0 +1,14 @@
import { AnimationFeature } from './animation/index.mjs';
import { ExitAnimationFeature } from './animation/exit.mjs';
const animations = {
animation: {
Feature: AnimationFeature,
},
exit: {
Feature: ExitAnimationFeature,
},
};
export { animations };
//# sourceMappingURL=animations.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"animations.mjs","sources":["../../../../src/motion/features/animations.ts"],"sourcesContent":["import { AnimationFeature } from \"./animation\"\nimport { ExitAnimationFeature } from \"./animation/exit\"\nimport { FeaturePackages } from \"./types\"\n\nexport const animations: FeaturePackages = {\n animation: {\n Feature: AnimationFeature,\n },\n exit: {\n Feature: ExitAnimationFeature,\n },\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,UAAU,GAAoB;AACvC,IAAA,SAAS,EAAE;AACP,QAAA,OAAO,EAAE,gBAAgB;AAC5B,KAAA;AACD,IAAA,IAAI,EAAE;AACF,QAAA,OAAO,EAAE,oBAAoB;AAChC,KAAA;;;;;"}

View File

@@ -0,0 +1,49 @@
import { getFeatureDefinitions, setFeatureDefinitions } from 'motion-dom';
const featureProps = {
animation: [
"animate",
"variants",
"whileHover",
"whileTap",
"exit",
"whileInView",
"whileFocus",
"whileDrag",
],
exit: ["exit"],
drag: ["drag", "dragControls"],
focus: ["whileFocus"],
hover: ["whileHover", "onHoverStart", "onHoverEnd"],
tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
layout: ["layout", "layoutId"],
};
let isInitialized = false;
/**
* Initialize feature definitions with isEnabled checks.
* This must be called before any motion components are rendered.
*/
function initFeatureDefinitions() {
if (isInitialized)
return;
const initialFeatureDefinitions = {};
for (const key in featureProps) {
initialFeatureDefinitions[key] = {
isEnabled: (props) => featureProps[key].some((name) => !!props[name]),
};
}
setFeatureDefinitions(initialFeatureDefinitions);
isInitialized = true;
}
/**
* Get the current feature definitions, initializing if needed.
*/
function getInitializedFeatureDefinitions() {
initFeatureDefinitions();
return getFeatureDefinitions();
}
export { getInitializedFeatureDefinitions, initFeatureDefinitions };
//# sourceMappingURL=definitions.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"definitions.mjs","sources":["../../../../src/motion/features/definitions.ts"],"sourcesContent":["import { getFeatureDefinitions, setFeatureDefinitions } from \"motion-dom\"\nimport { MotionProps } from \"../types\"\nimport { FeatureDefinitions } from \"./types\"\n\nconst featureProps = {\n animation: [\n \"animate\",\n \"variants\",\n \"whileHover\",\n \"whileTap\",\n \"exit\",\n \"whileInView\",\n \"whileFocus\",\n \"whileDrag\",\n ],\n exit: [\"exit\"],\n drag: [\"drag\", \"dragControls\"],\n focus: [\"whileFocus\"],\n hover: [\"whileHover\", \"onHoverStart\", \"onHoverEnd\"],\n tap: [\"whileTap\", \"onTap\", \"onTapStart\", \"onTapCancel\"],\n pan: [\"onPan\", \"onPanStart\", \"onPanSessionStart\", \"onPanEnd\"],\n inView: [\"whileInView\", \"onViewportEnter\", \"onViewportLeave\"],\n layout: [\"layout\", \"layoutId\"],\n}\n\nlet isInitialized = false\n\n/**\n * Initialize feature definitions with isEnabled checks.\n * This must be called before any motion components are rendered.\n */\nexport function initFeatureDefinitions() {\n if (isInitialized) return\n\n const initialFeatureDefinitions: Partial<FeatureDefinitions> = {}\n\n for (const key in featureProps) {\n initialFeatureDefinitions[\n key as keyof typeof initialFeatureDefinitions\n ] = {\n isEnabled: (props: MotionProps) =>\n featureProps[key as keyof typeof featureProps].some(\n (name: string) => !!props[name as keyof typeof props]\n ),\n }\n }\n\n setFeatureDefinitions(initialFeatureDefinitions)\n isInitialized = true\n}\n\n/**\n * Get the current feature definitions, initializing if needed.\n */\nexport function getInitializedFeatureDefinitions(): Partial<FeatureDefinitions> {\n initFeatureDefinitions()\n return getFeatureDefinitions()\n}\n"],"names":[],"mappings":";;AAIA,MAAM,YAAY,GAAG;AACjB,IAAA,SAAS,EAAE;QACP,SAAS;QACT,UAAU;QACV,YAAY;QACZ,UAAU;QACV,MAAM;QACN,aAAa;QACb,YAAY;QACZ,WAAW;AACd,KAAA;IACD,IAAI,EAAE,CAAC,MAAM,CAAC;AACd,IAAA,IAAI,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC;IAC9B,KAAK,EAAE,CAAC,YAAY,CAAC;AACrB,IAAA,KAAK,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,YAAY,CAAC;IACnD,GAAG,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,CAAC;IACvD,GAAG,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,UAAU,CAAC;AAC7D,IAAA,MAAM,EAAE,CAAC,aAAa,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;AAC7D,IAAA,MAAM,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;CACjC;AAED,IAAI,aAAa,GAAG,KAAK;AAEzB;;;AAGG;SACa,sBAAsB,GAAA;AAClC,IAAA,IAAI,aAAa;QAAE;IAEnB,MAAM,yBAAyB,GAAgC,EAAE;AAEjE,IAAA,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;QAC5B,yBAAyB,CACrB,GAA6C,CAChD,GAAG;YACA,SAAS,EAAE,CAAC,KAAkB,KAC1B,YAAY,CAAC,GAAgC,CAAC,CAAC,IAAI,CAC/C,CAAC,IAAY,KAAK,CAAC,CAAC,KAAK,CAAC,IAA0B,CAAC,CACxD;SACR;IACL;IAEA,qBAAqB,CAAC,yBAAyB,CAAC;IAChD,aAAa,GAAG,IAAI;AACxB;AAEA;;AAEG;SACa,gCAAgC,GAAA;AAC5C,IAAA,sBAAsB,EAAE;IACxB,OAAO,qBAAqB,EAAE;AAClC;;;;"}

View File

@@ -0,0 +1,18 @@
import { DragGesture } from '../../gestures/drag/index.mjs';
import { PanGesture } from '../../gestures/pan/index.mjs';
import { MeasureLayout } from './layout/MeasureLayout.mjs';
import { HTMLProjectionNode } from 'motion-dom';
const drag = {
pan: {
Feature: PanGesture,
},
drag: {
Feature: DragGesture,
ProjectionNode: HTMLProjectionNode,
MeasureLayout,
},
};
export { drag };
//# sourceMappingURL=drag.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"drag.mjs","sources":["../../../../src/motion/features/drag.ts"],"sourcesContent":["import { DragGesture } from \"../../gestures/drag\"\nimport { PanGesture } from \"../../gestures/pan\"\nimport { HTMLProjectionNode } from \"../../projection\"\nimport { MeasureLayout } from \"./layout/MeasureLayout\"\nimport { FeaturePackages } from \"./types\"\n\nexport const drag: FeaturePackages = {\n pan: {\n Feature: PanGesture,\n },\n drag: {\n Feature: DragGesture,\n ProjectionNode: HTMLProjectionNode,\n MeasureLayout,\n },\n}\n"],"names":[],"mappings":";;;;;AAMO,MAAM,IAAI,GAAoB;AACjC,IAAA,GAAG,EAAE;AACD,QAAA,OAAO,EAAE,UAAU;AACtB,KAAA;AACD,IAAA,IAAI,EAAE;AACF,QAAA,OAAO,EAAE,WAAW;AACpB,QAAA,cAAc,EAAE,kBAAkB;QAClC,aAAa;AAChB,KAAA;;;;;"}

View File

@@ -0,0 +1,22 @@
import { HoverGesture } from '../../gestures/hover.mjs';
import { FocusGesture } from '../../gestures/focus.mjs';
import { PressGesture } from '../../gestures/press.mjs';
import { InViewFeature } from './viewport/index.mjs';
const gestureAnimations = {
inView: {
Feature: InViewFeature,
},
tap: {
Feature: PressGesture,
},
focus: {
Feature: FocusGesture,
},
hover: {
Feature: HoverGesture,
},
};
export { gestureAnimations };
//# sourceMappingURL=gestures.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"gestures.mjs","sources":["../../../../src/motion/features/gestures.ts"],"sourcesContent":["import { HoverGesture } from \"../../gestures/hover\"\nimport { FocusGesture } from \"../../gestures/focus\"\nimport { PressGesture } from \"../../gestures/press\"\nimport { InViewFeature } from \"./viewport\"\nimport { FeaturePackages } from \"./types\"\n\nexport const gestureAnimations: FeaturePackages = {\n inView: {\n Feature: InViewFeature,\n },\n tap: {\n Feature: PressGesture,\n },\n focus: {\n Feature: FocusGesture,\n },\n hover: {\n Feature: HoverGesture,\n },\n}\n"],"names":[],"mappings":";;;;;AAMO,MAAM,iBAAiB,GAAoB;AAC9C,IAAA,MAAM,EAAE;AACJ,QAAA,OAAO,EAAE,aAAa;AACzB,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,OAAO,EAAE,YAAY;AACxB,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,OAAO,EAAE,YAAY;AACxB,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,OAAO,EAAE,YAAY;AACxB,KAAA;;;;;"}

View File

@@ -0,0 +1,12 @@
import { HTMLProjectionNode } from 'motion-dom';
import { MeasureLayout } from './layout/MeasureLayout.mjs';
const layout = {
layout: {
ProjectionNode: HTMLProjectionNode,
MeasureLayout,
},
};
export { layout };
//# sourceMappingURL=layout.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"layout.mjs","sources":["../../../../src/motion/features/layout.ts"],"sourcesContent":["import { HTMLProjectionNode } from \"motion-dom\"\nimport { MeasureLayout } from \"./layout/MeasureLayout\"\nimport { FeaturePackages } from \"./types\"\n\nexport const layout: FeaturePackages = {\n layout: {\n ProjectionNode: HTMLProjectionNode,\n MeasureLayout,\n },\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,MAAM,GAAoB;AACnC,IAAA,MAAM,EAAE;AACJ,QAAA,cAAc,EAAE,kBAAkB;QAClC,aAAa;AAChB,KAAA;;;;;"}

View File

@@ -0,0 +1,136 @@
"use client";
import { jsx } from 'react/jsx-runtime';
import { globalProjectionState, frame, microtask } from 'motion-dom';
import { useContext, Component } from 'react';
import { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';
import { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';
import { SwitchLayoutGroupContext } from '../../../context/SwitchLayoutGroupContext.mjs';
/**
* Track whether we've taken any snapshots yet. If not,
* we can safely skip notification of didUpdate.
*
* Difficult to capture in a test but to prevent flickering
* we must set this to true either on update or unmount.
* Running `next-env/layout-id` in Safari will show this behaviour if broken.
*/
let hasTakenAnySnapshot = false;
class MeasureLayoutWithContext extends Component {
/**
* This only mounts projection nodes for components that
* need measuring, we might want to do it for all components
* in order to incorporate transforms
*/
componentDidMount() {
const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;
const { projection } = visualElement;
if (projection) {
if (layoutGroup.group)
layoutGroup.group.add(projection);
if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {
switchLayoutGroup.register(projection);
}
if (hasTakenAnySnapshot) {
projection.root.didUpdate();
}
projection.addEventListener("animationComplete", () => {
this.safeToRemove();
});
projection.setOptions({
...projection.options,
layoutDependency: this.props.layoutDependency,
onExitComplete: () => this.safeToRemove(),
});
}
globalProjectionState.hasEverUpdated = true;
}
getSnapshotBeforeUpdate(prevProps) {
const { layoutDependency, visualElement, drag, isPresent } = this.props;
const { projection } = visualElement;
if (!projection)
return null;
/**
* TODO: We use this data in relegate to determine whether to
* promote a previous element. There's no guarantee its presence data
* will have updated by this point - if a bug like this arises it will
* have to be that we markForRelegation and then find a new lead some other way,
* perhaps in didUpdate
*/
projection.isPresent = isPresent;
if (prevProps.layoutDependency !== layoutDependency) {
projection.setOptions({
...projection.options,
layoutDependency,
});
}
hasTakenAnySnapshot = true;
if (drag ||
prevProps.layoutDependency !== layoutDependency ||
layoutDependency === undefined ||
prevProps.isPresent !== isPresent) {
projection.willUpdate();
}
else {
this.safeToRemove();
}
if (prevProps.isPresent !== isPresent) {
if (isPresent) {
projection.promote();
}
else if (!projection.relegate()) {
/**
* If there's another stack member taking over from this one,
* it's in charge of the exit animation and therefore should
* be in charge of the safe to remove. Otherwise we call it here.
*/
frame.postRender(() => {
const stack = projection.getStack();
if (!stack || !stack.members.length) {
this.safeToRemove();
}
});
}
}
return null;
}
componentDidUpdate() {
const { visualElement, layoutAnchor } = this.props;
const { projection } = visualElement;
if (projection) {
projection.options.layoutAnchor = layoutAnchor;
projection.root.didUpdate();
microtask.postRender(() => {
if (!projection.currentAnimation && projection.isLead()) {
this.safeToRemove();
}
});
}
}
componentWillUnmount() {
const { visualElement, layoutGroup, switchLayoutGroup: promoteContext, } = this.props;
const { projection } = visualElement;
hasTakenAnySnapshot = true;
if (projection) {
projection.scheduleCheckAfterUnmount();
if (layoutGroup && layoutGroup.group)
layoutGroup.group.remove(projection);
if (promoteContext && promoteContext.deregister)
promoteContext.deregister(projection);
}
}
safeToRemove() {
const { safeToRemove } = this.props;
safeToRemove && safeToRemove();
}
render() {
return null;
}
}
function MeasureLayout(props) {
const [isPresent, safeToRemove] = usePresence();
const layoutGroup = useContext(LayoutGroupContext);
return (jsx(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove }));
}
export { MeasureLayout };
//# sourceMappingURL=MeasureLayout.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,16 @@
import { setFeatureDefinitions } from 'motion-dom';
import { getInitializedFeatureDefinitions } from './definitions.mjs';
function loadFeatures(features) {
const featureDefinitions = getInitializedFeatureDefinitions();
for (const key in features) {
featureDefinitions[key] = {
...featureDefinitions[key],
...features[key],
};
}
setFeatureDefinitions(featureDefinitions);
}
export { loadFeatures };
//# sourceMappingURL=load-features.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"load-features.mjs","sources":["../../../../src/motion/features/load-features.ts"],"sourcesContent":["import { setFeatureDefinitions } from \"motion-dom\"\nimport { getInitializedFeatureDefinitions } from \"./definitions\"\nimport { FeaturePackages } from \"./types\"\n\nexport function loadFeatures(features: FeaturePackages) {\n const featureDefinitions = getInitializedFeatureDefinitions()\n\n for (const key in features) {\n featureDefinitions[key as keyof typeof featureDefinitions] = {\n ...featureDefinitions[key as keyof typeof featureDefinitions],\n ...features[key as keyof typeof features],\n } as any\n }\n\n setFeatureDefinitions(featureDefinitions)\n}\n"],"names":[],"mappings":";;;AAIM,SAAU,YAAY,CAAC,QAAyB,EAAA;AAClD,IAAA,MAAM,kBAAkB,GAAG,gCAAgC,EAAE;AAE7D,IAAA,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE;QACxB,kBAAkB,CAAC,GAAsC,CAAC,GAAG;YACzD,GAAG,kBAAkB,CAAC,GAAsC,CAAC;YAC7D,GAAG,QAAQ,CAAC,GAA4B,CAAC;SACrC;IACZ;IAEA,qBAAqB,CAAC,kBAAkB,CAAC;AAC7C;;;;"}

View File

@@ -0,0 +1,77 @@
import { Feature } from 'motion-dom';
import { observeIntersection } from './observers.mjs';
const thresholdNames = {
some: 0,
all: 1,
};
class InViewFeature extends Feature {
constructor() {
super(...arguments);
this.hasEnteredView = false;
this.isInView = false;
}
startObserver() {
this.stopObserver?.();
const { viewport = {} } = this.node.getProps();
const { root, margin: rootMargin, amount = "some", once } = viewport;
const options = {
root: root ? root.current : undefined,
rootMargin,
threshold: typeof amount === "number" ? amount : thresholdNames[amount],
};
const onIntersectionUpdate = (entry) => {
const { isIntersecting } = entry;
/**
* If there's been no change in the viewport state, early return.
*/
if (this.isInView === isIntersecting)
return;
this.isInView = isIntersecting;
/**
* Handle hasEnteredView. If this is only meant to run once, and
* element isn't visible, early return. Otherwise set hasEnteredView to true.
*/
if (once && !isIntersecting && this.hasEnteredView) {
return;
}
else if (isIntersecting) {
this.hasEnteredView = true;
}
if (this.node.animationState) {
this.node.animationState.setActive("whileInView", isIntersecting);
}
/**
* Use the latest committed props rather than the ones in scope
* when this observer is created
*/
const { onViewportEnter, onViewportLeave } = this.node.getProps();
const callback = isIntersecting ? onViewportEnter : onViewportLeave;
callback && callback(entry);
};
this.stopObserver = observeIntersection(this.node.current, options, onIntersectionUpdate);
}
mount() {
this.startObserver();
}
update() {
if (typeof IntersectionObserver === "undefined")
return;
const { props, prevProps } = this.node;
const hasOptionsChanged = ["amount", "margin", "root"].some(hasViewportOptionChanged(props, prevProps));
if (hasOptionsChanged) {
this.startObserver();
}
}
unmount() {
this.stopObserver?.();
this.hasEnteredView = false;
this.isInView = false;
}
}
function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {
return (name) => viewport[name] !== prevViewport[name];
}
export { InViewFeature };
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,50 @@
/**
* Map an IntersectionHandler callback to an element. We only ever make one handler for one
* element, so even though these handlers might all be triggered by different
* observers, we can keep them in the same map.
*/
const observerCallbacks = new WeakMap();
/**
* Multiple observers can be created for multiple element/document roots. Each with
* different settings. So here we store dictionaries of observers to each root,
* using serialised settings (threshold/margin) as lookup keys.
*/
const observers = new WeakMap();
const fireObserverCallback = (entry) => {
const callback = observerCallbacks.get(entry.target);
callback && callback(entry);
};
const fireAllObserverCallbacks = (entries) => {
entries.forEach(fireObserverCallback);
};
function initIntersectionObserver({ root, ...options }) {
const lookupRoot = root || document;
/**
* If we don't have an observer lookup map for this root, create one.
*/
if (!observers.has(lookupRoot)) {
observers.set(lookupRoot, {});
}
const rootObservers = observers.get(lookupRoot);
const key = JSON.stringify(options);
/**
* If we don't have an observer for this combination of root and settings,
* create one.
*/
if (!rootObservers[key]) {
rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });
}
return rootObservers[key];
}
function observeIntersection(element, options, callback) {
const rootInteresectionObserver = initIntersectionObserver(options);
observerCallbacks.set(element, callback);
rootInteresectionObserver.observe(element);
return () => {
observerCallbacks.delete(element);
rootInteresectionObserver.unobserve(element);
};
}
export { observeIntersection };
//# sourceMappingURL=observers.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"observers.mjs","sources":["../../../../../src/motion/features/viewport/observers.ts"],"sourcesContent":["type IntersectionHandler = (entry: IntersectionObserverEntry) => void\n\ninterface ElementIntersectionObservers {\n [key: string]: IntersectionObserver\n}\n\n/**\n * Map an IntersectionHandler callback to an element. We only ever make one handler for one\n * element, so even though these handlers might all be triggered by different\n * observers, we can keep them in the same map.\n */\nconst observerCallbacks = new WeakMap<Element, IntersectionHandler>()\n\n/**\n * Multiple observers can be created for multiple element/document roots. Each with\n * different settings. So here we store dictionaries of observers to each root,\n * using serialised settings (threshold/margin) as lookup keys.\n */\nconst observers = new WeakMap<\n Element | Document,\n ElementIntersectionObservers\n>()\n\nconst fireObserverCallback = (entry: IntersectionObserverEntry) => {\n const callback = observerCallbacks.get(entry.target)\n callback && callback(entry)\n}\n\nconst fireAllObserverCallbacks: IntersectionObserverCallback = (entries) => {\n entries.forEach(fireObserverCallback)\n}\n\nfunction initIntersectionObserver({\n root,\n ...options\n}: IntersectionObserverInit): IntersectionObserver {\n const lookupRoot = root || document\n\n /**\n * If we don't have an observer lookup map for this root, create one.\n */\n if (!observers.has(lookupRoot)) {\n observers.set(lookupRoot, {})\n }\n const rootObservers = observers.get(lookupRoot)!\n\n const key = JSON.stringify(options)\n\n /**\n * If we don't have an observer for this combination of root and settings,\n * create one.\n */\n if (!rootObservers[key]) {\n rootObservers[key] = new IntersectionObserver(\n fireAllObserverCallbacks,\n { root, ...options }\n )\n }\n\n return rootObservers[key]\n}\n\nexport function observeIntersection(\n element: Element,\n options: IntersectionObserverInit,\n callback: IntersectionHandler\n) {\n const rootInteresectionObserver = initIntersectionObserver(options)\n\n observerCallbacks.set(element, callback)\n rootInteresectionObserver.observe(element)\n\n return () => {\n observerCallbacks.delete(element)\n rootInteresectionObserver.unobserve(element)\n }\n}\n"],"names":[],"mappings":"AAMA;;;;AAIG;AACH,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAAgC;AAErE;;;;AAIG;AACH,MAAM,SAAS,GAAG,IAAI,OAAO,EAG1B;AAEH,MAAM,oBAAoB,GAAG,CAAC,KAAgC,KAAI;IAC9D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC;AACpD,IAAA,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC;AAC/B,CAAC;AAED,MAAM,wBAAwB,GAAiC,CAAC,OAAO,KAAI;AACvE,IAAA,OAAO,CAAC,OAAO,CAAC,oBAAoB,CAAC;AACzC,CAAC;AAED,SAAS,wBAAwB,CAAC,EAC9B,IAAI,EACJ,GAAG,OAAO,EACa,EAAA;AACvB,IAAA,MAAM,UAAU,GAAG,IAAI,IAAI,QAAQ;AAEnC;;AAEG;IACH,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;AAC5B,QAAA,SAAS,CAAC,GAAG,CAAC,UAAU,EAAE,EAAE,CAAC;IACjC;IACA,MAAM,aAAa,GAAG,SAAS,CAAC,GAAG,CAAC,UAAU,CAAE;IAEhD,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;AAEnC;;;AAGG;AACH,IAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE;AACrB,QAAA,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI,oBAAoB,CACzC,wBAAwB,EACxB,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CACvB;IACL;AAEA,IAAA,OAAO,aAAa,CAAC,GAAG,CAAC;AAC7B;SAEgB,mBAAmB,CAC/B,OAAgB,EAChB,OAAiC,EACjC,QAA6B,EAAA;AAE7B,IAAA,MAAM,yBAAyB,GAAG,wBAAwB,CAAC,OAAO,CAAC;AAEnE,IAAA,iBAAiB,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC;AACxC,IAAA,yBAAyB,CAAC,OAAO,CAAC,OAAO,CAAC;AAE1C,IAAA,OAAO,MAAK;AACR,QAAA,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC;AACjC,QAAA,yBAAyB,CAAC,SAAS,CAAC,OAAO,CAAC;AAChD,IAAA,CAAC;AACL;;;;"}