1 line
20 KiB
Plaintext
1 line
20 KiB
Plaintext
|
{"version":3,"file":"LayoutAnimationBuilder.mjs","sources":["../../../src/layout/LayoutAnimationBuilder.ts"],"sourcesContent":["import type { Box } from \"motion-utils\"\nimport { GroupAnimation } from \"../animation/GroupAnimation\"\nimport type {\n AnimationOptions,\n AnimationPlaybackControls,\n Transition,\n} from \"../animation/types\"\nimport { frame } from \"../frameloop\"\nimport { copyBoxInto } from \"../projection/geometry/copy\"\nimport { createBox } from \"../projection/geometry/models\"\nimport { HTMLProjectionNode } from \"../projection/node/HTMLProjectionNode\"\nimport type { IProjectionNode } from \"../projection/node/types\"\nimport { HTMLVisualElement } from \"../render/html/HTMLVisualElement\"\nimport { visualElementStore } from \"../render/store\"\nimport type { VisualElement } from \"../render/VisualElement\"\nimport { resolveElements, type ElementOrSelector } from \"../utils/resolve-elements\"\n\ntype LayoutAnimationScope = Element | Document\n\ninterface LayoutElementRecord {\n element: Element\n visualElement: VisualElement\n projection: IProjectionNode\n}\n\ninterface LayoutAttributes {\n layout?: boolean | \"position\" | \"size\" | \"preserve-aspect\" | \"x\" | \"y\"\n layoutId?: string\n}\n\ntype LayoutBuilderResolve = (animation: GroupAnimation) => void\ntype LayoutBuilderReject = (error: unknown) => void\n\ninterface ProjectionOptions {\n layout?: boolean | \"position\" | \"size\" | \"preserve-aspect\" | \"x\" | \"y\"\n layoutId?: string\n animationType?: \"size\" | \"position\" | \"both\" | \"preserve-aspect\" | \"x\" | \"y\"\n transition?: Transition\n crossfade?: boolean\n}\n\nconst layoutSelector = \"[data-layout], [data-layout-id]\"\nconst noop = () => {}\nfunction snapshotFromTarget(projection: IProjectionNode): LayoutElementRecord[\"projection\"][\"snapshot\"] {\n const target = projection.targetWithTransforms || projection.target\n if (!target) return undefined\n\n const measuredBox = createBox()\n const layoutBox = createBox()\n copyBoxInto(measuredBox, target as Box)\n copyBoxInto(layoutBox, target as Box)\n\n return {\n animationId: projection.root?.animationId ?? 0,\n measuredBox,\n layoutBox,\n latestValues: projection.animationValues || projection.latestValues || {},\n source: projection.id,\n }\n}\n\nexport class LayoutAnimationBuilder {\n private scope: LayoutAnimationScope\n private updateDom: () => void | Promise<void>\n private defaultOptions?: AnimationOptions\n private sharedTransitions = new Map<string, AnimationOptions>()\n private notifyReady: LayoutBuilderResolve = noop\n private rejectReady: LayoutBuilderReject = noop\n private readyPromise: Promise<GroupAnimation>\n\n constructor(\n scope: LayoutAnimationScope,\n updateDom: () => void | Promise<void>,\n defaultOptions?: AnimationOptions\n ) {\n this.scope = scope\n this.updateDom = updateDom\n this.defaultOptions = defaultOptions\n\n this.readyPromise = new Promise<GroupAnimation>((resolve, reject) => {\n this.notifyReady = resolve\n this.rejectReady = reject\n })\n\n frame.postRender(() => {\n this.start().then(this.notifyReady).catch(this.rejectReady)\n })\n }\n\n shared(id: string, transition: AnimationOptions): this {\n this.sharedTransitions.set(id, transition)\n return this\n }\n\n then(\n resolve: LayoutBuilderResolve,\n reject?: LayoutBuilderReject\n ): Promise<void> {\n return this.readyPromise.then(resolve, reject)\n }\n\n private async start(): Promise<GroupAnimation> {\n const beforeElements = collectLayoutElements(this.scope)\n const beforeRecords = this.buildRecords(beforeElements)\n\n beforeRecords.forEach(({ projection }) => {\n const hasCurrentAnimation = Boolean(projection.currentAnimation)\n const isSharedLayout = Boolean(projection.options.layoutId)\n if (hasCurre
|