@motionscript/grids 0.1.0-alpha.5 → 0.1.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +47 -15
  3. package/dist/browser/chunks/chunk-J62D7EFZ.js +2 -0
  4. package/dist/browser/chunks/chunk-J62D7EFZ.js.map +7 -0
  5. package/dist/browser/index.js +1 -1
  6. package/dist/browser/index.js.map +3 -3
  7. package/dist/browser/kit.js +1 -1
  8. package/dist/browser/manifest.json +1 -1
  9. package/dist/engine.d.ts +4 -4
  10. package/dist/engine.js +4 -4
  11. package/dist/engine.js.map +1 -1
  12. package/dist/kit/index.d.ts +3 -1
  13. package/dist/kit/index.d.ts.map +1 -1
  14. package/dist/kit/index.js +4 -1
  15. package/dist/kit/index.js.map +1 -1
  16. package/dist/kit/item-grid.d.ts +203 -198
  17. package/dist/kit/item-grid.d.ts.map +1 -1
  18. package/dist/kit/item-grid.js +413 -440
  19. package/dist/kit/item-grid.js.map +1 -1
  20. package/dist/nodes.d.ts +8 -3
  21. package/dist/nodes.d.ts.map +1 -1
  22. package/dist/nodes.js +6 -10
  23. package/dist/nodes.js.map +1 -1
  24. package/dist/path-grid/path-grid.d.ts +108 -73
  25. package/dist/path-grid/path-grid.d.ts.map +1 -1
  26. package/dist/path-grid/path-grid.js +129 -172
  27. package/dist/path-grid/path-grid.js.map +1 -1
  28. package/dist/radial-grid/radial-grid.d.ts +97 -45
  29. package/dist/radial-grid/radial-grid.d.ts.map +1 -1
  30. package/dist/radial-grid/radial-grid.js +55 -87
  31. package/dist/radial-grid/radial-grid.js.map +1 -1
  32. package/dist/rectangular-grid/rectangular-grid.d.ts +114 -70
  33. package/dist/rectangular-grid/rectangular-grid.d.ts.map +1 -1
  34. package/dist/rectangular-grid/rectangular-grid.js +107 -145
  35. package/dist/rectangular-grid/rectangular-grid.js.map +1 -1
  36. package/dist/sphere-grid/sphere-grid.d.ts +109 -60
  37. package/dist/sphere-grid/sphere-grid.d.ts.map +1 -1
  38. package/dist/sphere-grid/sphere-grid.js +90 -137
  39. package/dist/sphere-grid/sphere-grid.js.map +1 -1
  40. package/package.json +4 -4
  41. package/src/engine.ts +4 -4
  42. package/src/kit/index.ts +13 -1
  43. package/src/kit/item-grid.ts +505 -442
  44. package/src/nodes.ts +18 -3
  45. package/src/path-grid/path-grid.ts +137 -164
  46. package/src/radial-grid/radial-grid.ts +69 -78
  47. package/src/rectangular-grid/rectangular-grid.ts +118 -133
  48. package/src/sphere-grid/sphere-grid.ts +103 -117
  49. package/dist/browser/chunks/chunk-XDUDKWM7.js +0 -2
  50. package/dist/browser/chunks/chunk-XDUDKWM7.js.map +0 -7
@@ -1,42 +1,66 @@
1
1
  import {
2
- command,
2
+ component2d,
3
3
  easeInOut,
4
- node,
5
- property,
6
- type Command,
7
- type CommandArgs,
8
- type NodeConfig,
9
- type Size2D,
4
+ Types,
5
+ type NodeOf,
6
+ type Values,
7
+ // Named so the emitted declaration reaches these through the sdk, not core.
8
+ type Node2D as _Node2D,
9
+ type Node2DProps as _Node2DProps,
10
10
  } from "@motionscript/sdk"
11
11
 
12
12
  import {
13
13
  CELL_MODES,
14
- contentBoxOf,
15
14
  FILL_DIRECTIONS,
16
- LINE_ALIGNS,
17
15
  ItemGrid,
16
+ LINE_ALIGNS,
18
17
  rectangularCell,
19
18
  staggerArgs,
20
19
  TRANSITION_STAGGER,
21
- type CellMode,
22
- type FillDirection,
23
- type ItemGridProps,
24
- type LineAlign,
25
20
  type RectangularArrangement,
26
- type StaggerArgs,
27
21
  } from "../kit"
28
22
 
29
- export interface RectangularGridProps extends ItemGridProps {
30
- columns: number
31
- fillDirection: FillDirection
32
- cellMode: CellMode
33
- cellWidth: number
34
- cellHeight: number
35
- columnGap: number
36
- rowGap: number
37
- lastLineAlign: LineAlign
38
- rowOffset: number
39
- columnOffset: number
23
+ const own = {
24
+ columns: Types.number(3, { min: 1, step: 1 }),
25
+ fillDirection: Types.oneOf(FILL_DIRECTIONS, { default: "row" }),
26
+ cellMode: Types.oneOf(CELL_MODES, { default: "fit" }),
27
+ cellWidth: Types.number(120, { min: 0, step: 1 }),
28
+ cellHeight: Types.number(120, { min: 0, step: 1 }),
29
+ columnGap: Types.number(24, { step: 1 }),
30
+ rowGap: Types.number(24, { step: 1 }),
31
+ lastLineAlign: Types.oneOf(LINE_ALIGNS, { default: "start" }),
32
+ rowOffset: Types.number(0, { min: -1, max: 1, step: 0.05 }),
33
+ columnOffset: Types.number(0, { min: -1, max: 1, step: 0.05 }),
34
+ }
35
+
36
+ type Own = Values<typeof own>
37
+
38
+ function arrangement(s: Own): RectangularArrangement {
39
+ return {
40
+ kind: "rectangular",
41
+ columns: s.columns,
42
+ fillDirection: s.fillDirection,
43
+ cellMode: s.cellMode,
44
+ cellWidth: s.cellWidth,
45
+ cellHeight: s.cellHeight,
46
+ columnGap: s.columnGap,
47
+ rowGap: s.rowGap,
48
+ lastLineAlign: s.lastLineAlign,
49
+ rowOffset: s.rowOffset,
50
+ columnOffset: s.columnOffset,
51
+ }
52
+ }
53
+
54
+ const arranger: ItemGrid.Arranger<Own> = {
55
+ arrangement,
56
+ // A child set to fill takes its cell, where the cell is not simply the largest child.
57
+ itemSpace: (s, count, space) => (s.cellMode === "fit" ? space : rectangularCell(arrangement(s), count, [], space)),
58
+ }
59
+
60
+ /** The focus args of a row or a column: the grow a row leaves out is the shared focus's. */
61
+ const lineFocus = {
62
+ dim: Types.number(0.7, { min: 0, max: 1, step: 0.05 }),
63
+ grow: ItemGrid.hinted(0.1, { min: 0, max: 1, step: 0.05 }),
40
64
  }
41
65
 
42
66
  /**
@@ -47,114 +71,75 @@ export interface RectangularGridProps extends ItemGridProps {
47
71
  * room a child set to fill grows into. Shift every other row by half a cell
48
72
  * for a brick bond or a hex pack.
49
73
  */
50
- @node({
74
+ export const RectangularGrid = ItemGrid.define(component2d({
51
75
  key: "rectangularGrid",
52
- parentKey: "node",
53
- forkable: true,
54
- layout: {
55
- children: "freeform",
56
- acceptsChildren: true,
57
- defaultWidthMode: "hug",
58
- defaultHeightMode: "hug",
76
+ state: { ...ItemGrid.state, ...own },
77
+ defaults: ItemGrid.defaults,
78
+ commands: {
79
+ ...ItemGrid.commands,
80
+ /** Re-flow the items into `columns` columns, each moving to its new cell. */
81
+ columnsTo: {
82
+ args: { columns: ItemGrid.hinted(4, { min: 1, step: 1 }), ...staggerArgs(TRANSITION_STAGGER) },
83
+ run: (timeline, s, children) => {
84
+ const columns = Math.max(1, Math.round(timeline.args.columns ?? s.columns))
85
+ return ItemGrid.transitionTo(timeline as never, s, children, { columns })
86
+ },
87
+ },
88
+ /** Animate the spacing between columns and rows. */
89
+ gapTo: {
90
+ args: { columnGap: ItemGrid.hinted(48), rowGap: ItemGrid.hinted(48) },
91
+ run: (timeline) => {
92
+ const data: { columnGap?: number; rowGap?: number } = {}
93
+ if (timeline.args.columnGap !== undefined) data.columnGap = timeline.args.columnGap
94
+ if (timeline.args.rowGap !== undefined) data.rowGap = timeline.args.rowGap
95
+ return timeline.tween(data)
96
+ },
97
+ },
98
+ /**
99
+ * Animate the cell size, from whatever the cells measure now. The grid
100
+ * switches to `fixed` cells as it starts, since a size of its own is what
101
+ * `fixed` means.
102
+ */
103
+ cellSizeTo: {
104
+ args: { cellWidth: ItemGrid.hinted(160, { min: 0 }), cellHeight: ItemGrid.hinted(160, { min: 0 }) },
105
+ easing: easeInOut("cubic"),
106
+ run: (timeline, s, children) => {
107
+ const sizes = children.map((child) => child.size)
108
+ const box = ItemGrid.contentBox(timeline.node.size, s.padding)
109
+ const from = rectangularCell(arrangement(s), sizes.length, sizes, box)
110
+ const width = timeline.args.cellWidth ?? from.width
111
+ const height = timeline.args.cellHeight ?? from.height
112
+ return timeline.animate((t) => ({
113
+ cellMode: "fixed",
114
+ cellWidth: from.width + (width - from.width) * t,
115
+ cellHeight: from.height + (height - from.height) * t,
116
+ }))
117
+ },
118
+ },
119
+ /** Bring one row (from 0 at the top) forward and push the rest back. */
120
+ focusRow: {
121
+ args: { row: Types.number(0, { min: 0, step: 1 }), ...lineFocus },
122
+ run: (timeline, s, children) => {
123
+ const slots = ItemGrid.itemSlots(timeline as never, s, children)
124
+ const row = Math.round(timeline.args.row ?? 0)
125
+ const inRow = (i: number) => slots[i]?.meta.kind === "rectangular" && slots[i].meta.row === row
126
+ return ItemGrid.focusOn(timeline as never, s, inRow, slots.length, timeline.args.dim ?? 0.7, timeline.args.grow ?? 0.15)
127
+ },
128
+ },
129
+ /** Bring one column (from 0 at the left) forward and push the rest back. */
130
+ focusColumn: {
131
+ args: { column: Types.number(0, { min: 0, step: 1 }), ...lineFocus },
132
+ run: (timeline, s, children) => {
133
+ const slots = ItemGrid.itemSlots(timeline as never, s, children)
134
+ const column = Math.round(timeline.args.column ?? 0)
135
+ const inColumn = (i: number) => slots[i]?.meta.kind === "rectangular" && slots[i].meta.column === column
136
+ return ItemGrid.focusOn(timeline as never, s, inColumn, slots.length, timeline.args.dim ?? 0.7, timeline.args.grow ?? 0.15)
137
+ },
138
+ },
59
139
  },
60
- })
61
- export class RectangularGrid extends ItemGrid<RectangularGridProps> {
62
- @property({ default: 3, min: 1, step: 1 }) declare columns: number
63
- @property({ default: "row", kind: "enum", options: FILL_DIRECTIONS }) declare fillDirection: FillDirection
64
- @property({ default: "fit", kind: "enum", options: CELL_MODES }) declare cellMode: CellMode
65
- @property({ default: 120, min: 0, step: 1 }) declare cellWidth: number
66
- @property({ default: 120, min: 0, step: 1 }) declare cellHeight: number
67
- @property({ default: 24, step: 1 }) declare columnGap: number
68
- @property({ default: 24, step: 1 }) declare rowGap: number
69
- @property({ default: "start", kind: "enum", options: LINE_ALIGNS }) declare lastLineAlign: LineAlign
70
- @property({ default: 0, min: -1, max: 1, step: 0.05 }) declare rowOffset: number
71
- @property({ default: 0, min: -1, max: 1, step: 0.05 }) declare columnOffset: number
72
-
73
- constructor(props?: NodeConfig<RectangularGrid, RectangularGridProps>) {
74
- super(props)
75
- }
76
-
77
- /** Re-flow the items into `columns` columns, each moving to its new cell. */
78
- @command({ args: [{ key: "columns", min: 1, step: 1, default: 4 }, ...staggerArgs(TRANSITION_STAGGER)] })
79
- columnsTo(args: CommandArgs<{ columns: number } & StaggerArgs> & { duration: number }): Command<RectangularGridProps> {
80
- const columns = Math.max(1, Math.round(args.data?.columns ?? this.columns))
81
- return this._transitionTo({ columns }, args)
82
- }
83
-
84
- /** Animate the spacing between columns and rows. */
85
- @command({ args: [{ key: "columnGap", default: 48 }, { key: "rowGap", default: 48 }] })
86
- gapTo(args: CommandArgs<{ columnGap?: number; rowGap?: number }> & { duration: number }): Command<RectangularGridProps> {
87
- const data: Partial<RectangularGridProps> = {}
88
- if (args.data?.columnGap !== undefined) data.columnGap = args.data.columnGap
89
- if (args.data?.rowGap !== undefined) data.rowGap = args.data.rowGap
90
- return this.to({ data, duration: args.duration, easing: args.easing })
91
- }
92
-
93
- /**
94
- * Animate the cell size, from whatever the cells measure now. The grid
95
- * switches to `fixed` cells as it starts, since a size of its own is what
96
- * `fixed` means.
97
- */
98
- @command({ args: [{ key: "cellWidth", min: 0, default: 160 }, { key: "cellHeight", min: 0, default: 160 }] })
99
- cellSizeTo(args: CommandArgs<{ cellWidth?: number; cellHeight?: number }> & { duration: number }): Command<RectangularGridProps> {
100
- const sizes = this._itemSizes()
101
- const from = rectangularCell(this.arrangementFor(), sizes.length, sizes, contentBoxOf(this))
102
- const width = args.data?.cellWidth ?? from.width
103
- const height = args.data?.cellHeight ?? from.height
104
- return this.command<RectangularGridProps>((t) => ({
105
- cellMode: "fixed",
106
- cellWidth: from.width + (width - from.width) * t,
107
- cellHeight: from.height + (height - from.height) * t,
108
- }), args.duration, args.easing ?? easeInOut("cubic"))
109
- }
110
-
111
- /** Bring one row (from 0 at the top) forward and push the rest back. */
112
- @command({
113
- args: [
114
- { key: "row", min: 0, step: 1, default: 0 },
115
- { key: "dim", min: 0, max: 1, step: 0.05, default: 0.7 },
116
- { key: "grow", min: 0, max: 1, step: 0.05, default: 0.1 },
117
- ],
118
- })
119
- focusRow(args: CommandArgs<{ row?: number; dim?: number; grow?: number }> & { duration: number }): Command<ItemGridProps> {
120
- const slots = this._itemSlots()
121
- const row = Math.round(args.data?.row ?? 0)
122
- return this._focusOn((i) => slots[i]?.meta.kind === "rectangular" && slots[i].meta.row === row, slots.length, args)
123
- }
140
+ ...ItemGrid.fields(arranger),
141
+ }), arranger)
124
142
 
125
- /** Bring one column (from 0 at the left) forward and push the rest back. */
126
- @command({
127
- args: [
128
- { key: "column", min: 0, step: 1, default: 0 },
129
- { key: "dim", min: 0, max: 1, step: 0.05, default: 0.7 },
130
- { key: "grow", min: 0, max: 1, step: 0.05, default: 0.1 },
131
- ],
132
- })
133
- focusColumn(args: CommandArgs<{ column?: number; dim?: number; grow?: number }> & { duration: number }): Command<ItemGridProps> {
134
- const slots = this._itemSlots()
135
- const column = Math.round(args.data?.column ?? 0)
136
- return this._focusOn((i) => slots[i]?.meta.kind === "rectangular" && slots[i].meta.column === column, slots.length, args)
137
- }
138
-
139
- protected override arrangementFor(): RectangularArrangement {
140
- return {
141
- kind: "rectangular",
142
- columns: this.columns,
143
- fillDirection: this.fillDirection,
144
- cellMode: this.cellMode,
145
- cellWidth: this.cellWidth,
146
- cellHeight: this.cellHeight,
147
- columnGap: this.columnGap,
148
- rowGap: this.rowGap,
149
- lastLineAlign: this.lastLineAlign,
150
- rowOffset: this.rowOffset,
151
- columnOffset: this.columnOffset,
152
- }
153
- }
154
-
155
- /** A child set to fill takes its cell, where the cell is not simply the largest child. */
156
- protected override itemSpace(count: number, space: Size2D): Size2D {
157
- if (this.cellMode === "fit") return space
158
- return rectangularCell(this.arrangementFor(), count, [], space)
159
- }
160
- }
143
+ export type RectangularGrid = NodeOf<typeof RectangularGrid>
144
+ /** What a call or a document row may set. */
145
+ export type RectangularGridProps = NonNullable<Parameters<typeof RectangularGrid>[0]>
@@ -1,4 +1,12 @@
1
- import { command, node, property, type Command, type CommandArgs, type NodeConfig } from "@motionscript/sdk"
1
+ import {
2
+ component2d,
3
+ Types,
4
+ type NodeOf,
5
+ type Values,
6
+ // Named so the emitted declaration reaches these through the sdk, not core.
7
+ type Node2D as _Node2D,
8
+ type Node2DProps as _Node2DProps,
9
+ } from "@motionscript/sdk"
2
10
 
3
11
  import {
4
12
  ItemGrid,
@@ -7,24 +15,41 @@ import {
7
15
  SPHERE_FACINGS,
8
16
  sphereFaceForward,
9
17
  wrapDegrees,
10
- type ItemGridProps,
11
18
  type SphereArrangement,
12
19
  type SphereAxis,
13
- type SphereFacing,
14
20
  } from "../kit"
15
21
 
16
- export interface SphereGridProps extends ItemGridProps {
17
- radius: number
18
- yaw: number
19
- pitch: number
20
- roll: number
21
- facing: SphereFacing
22
- focalLength: number
23
- depthFade: number
24
- cullBackfaces: boolean
25
- spinSpeed: number
22
+ const own = {
23
+ radius: Types.number(220, { min: 0, step: 1 }),
24
+ yaw: Types.number(0, { step: 1, unit: "°" }),
25
+ pitch: Types.number(0, { step: 1, unit: "°" }),
26
+ roll: Types.number(0, { step: 1, unit: "°" }),
27
+ facing: Types.oneOf(SPHERE_FACINGS, { default: "outward" }),
28
+ focalLength: Types.number(900, { min: 100, step: 10 }),
29
+ depthFade: Types.number(0.5, { min: 0, max: 1, step: 0.05 }),
30
+ cullBackfaces: false,
31
+ spinSpeed: Types.number(0, { step: 1, unit: "°/s" }),
26
32
  }
27
33
 
34
+ type Own = Values<typeof own>
35
+
36
+ function arrangement(s: Own): SphereArrangement {
37
+ return {
38
+ kind: "sphere",
39
+ radius: s.radius,
40
+ yaw: s.yaw,
41
+ pitch: s.pitch,
42
+ roll: s.roll,
43
+ facing: s.facing,
44
+ focalLength: s.focalLength,
45
+ depthFade: s.depthFade,
46
+ cullBackfaces: s.cullBackfaces,
47
+ spinSpeed: s.spinSpeed,
48
+ }
49
+ }
50
+
51
+ const arranger: ItemGrid.Arranger<Own> = { arrangement }
52
+
28
53
  const AXIS_PROP: Record<SphereAxis, "yaw" | "pitch" | "roll"> = { x: "pitch", y: "yaw", z: "roll" }
29
54
 
30
55
  /**
@@ -33,111 +58,72 @@ const AXIS_PROP: Record<SphereAxis, "yaw" | "pitch" | "roll"> = { x: "pitch", y:
33
58
  * side is smaller, drawn first, and hidden where a face turns away.
34
59
  *
35
60
  * `outward` lays each item flat on the surface; `billboard` keeps each one
36
- * facing the viewer, like labels on a globe. {@link turnTo} brings any item
37
- * round to the front.
61
+ * facing the viewer, like labels on a globe. `turnTo` brings any item round
62
+ * to the front.
38
63
  */
39
- @node({
64
+ export const SphereGrid = ItemGrid.define(component2d({
40
65
  key: "sphereGrid",
41
- parentKey: "node",
42
- forkable: true,
43
- layout: {
44
- children: "freeform",
45
- acceptsChildren: true,
46
- defaultWidthMode: "hug",
47
- defaultHeightMode: "hug",
48
- },
49
- })
50
- export class SphereGrid extends ItemGrid<SphereGridProps> {
51
- @property({ default: 220, min: 0, step: 1 }) declare radius: number
52
- @property({ default: 0, step: 1, unit: "°" }) declare yaw: number
53
- @property({ default: 0, step: 1, unit: "°" }) declare pitch: number
54
- @property({ default: 0, step: 1, unit: "°" }) declare roll: number
55
- @property({ default: "outward", kind: "enum", options: SPHERE_FACINGS }) declare facing: SphereFacing
56
- @property({ default: 900, min: 100, step: 10 }) declare focalLength: number
57
- @property({ default: 0.5, min: 0, max: 1, step: 0.05 }) declare depthFade: number
58
- @property({ default: false }) declare cullBackfaces: boolean
59
- @property({ default: 0, step: 1, unit: "°/s" }) declare spinSpeed: number
60
-
61
- constructor(props?: NodeConfig<SphereGrid, SphereGridProps>) {
62
- super(props)
63
- }
64
-
65
- /** Turn the sphere about an axis by `degrees` — `y` spins it like a globe. */
66
- @command({
67
- args: [
68
- { key: "axis", kind: "enum", options: SPHERE_AXES, default: "y" },
69
- { key: "degrees", step: 15, unit: "°", default: 360 },
70
- ],
71
- })
72
- spin(args: CommandArgs<{ axis?: SphereAxis; degrees?: number }> & { duration: number }): Command<SphereGridProps> {
73
- const key = AXIS_PROP[args.data?.axis ?? "y"] ?? "yaw"
74
- const degrees = args.data?.degrees ?? 360
75
- return this.to({ data: { [key]: this[key] + degrees }, duration: args.duration, easing: args.easing })
76
- }
77
-
78
- /** Turn the sphere to a set orientation. */
79
- @command({
80
- args: [
81
- { key: "yaw", unit: "°", default: 45 },
82
- { key: "pitch", unit: "°", default: 20 },
83
- { key: "roll", unit: "°", default: 0 },
84
- ],
85
- })
86
- orientTo(args: CommandArgs<{ yaw?: number; pitch?: number; roll?: number }> & { duration: number }): Command<SphereGridProps> {
87
- return this.to({
88
- data: { yaw: args.data?.yaw ?? this.yaw, pitch: args.data?.pitch ?? this.pitch, roll: args.data?.roll ?? this.roll },
89
- duration: args.duration,
90
- easing: args.easing,
91
- })
92
- }
93
-
94
- /** Turn the sphere the shorter way until an item (by its place in the layers) faces the viewer. */
95
- @command({ args: [{ key: "item", min: 0, step: 1, default: 0 }] })
96
- turnTo(args: CommandArgs<{ item?: number }> & { duration: number }): Command<SphereGridProps> {
97
- const count = this._itemCount()
98
- const slot = normalizeOrder(this.order, count).indexOf(Math.round(args.data?.item ?? 0))
99
- if (slot < 0) return this.to({ data: {}, duration: args.duration })
100
- const facing = sphereFaceForward(count, slot)
101
- // The yaw the clock has added is part of where the item is now.
102
- const spun = this.spinSpeed * this.time.total
103
- return this.to({
104
- data: {
105
- yaw: this.yaw + wrapDegrees(facing.yaw - (this.yaw + spun)),
106
- pitch: this.pitch + wrapDegrees(facing.pitch - this.pitch),
107
- roll: 0,
66
+ state: { ...ItemGrid.state, ...own },
67
+ defaults: ItemGrid.defaults,
68
+ commands: {
69
+ ...ItemGrid.commands,
70
+ /** Turn the sphere about an axis by `degrees` — `y` spins it like a globe. */
71
+ spin: {
72
+ args: {
73
+ axis: Types.oneOf(SPHERE_AXES, { default: "y" }),
74
+ degrees: Types.number(360, { step: 15, unit: "°" }),
108
75
  },
109
- duration: args.duration,
110
- easing: args.easing,
111
- })
112
- }
113
-
114
- @command({ args: [{ key: "radius", min: 0, default: 300 }] })
115
- radiusTo(args: CommandArgs<{ radius: number }> & { duration: number }): Command<SphereGridProps> {
116
- return this.to({ data: { radius: args.data?.radius ?? this.radius }, duration: args.duration, easing: args.easing })
117
- }
118
-
119
- /** Dolly the camera: a shorter focal length exaggerates the depth, a longer one flattens it. */
120
- @command({ args: [{ key: "focalLength", min: 100, default: 600 }] })
121
- focalLengthTo(args: CommandArgs<{ focalLength: number }> & { duration: number }): Command<SphereGridProps> {
122
- return this.to({
123
- data: { focalLength: args.data?.focalLength ?? this.focalLength },
124
- duration: args.duration,
125
- easing: args.easing,
126
- })
127
- }
76
+ run: (timeline, s) => {
77
+ const key = AXIS_PROP[timeline.args.axis ?? "y"] ?? "yaw"
78
+ return timeline.tween({ [key]: s[key] + (timeline.args.degrees ?? 360) })
79
+ },
80
+ },
81
+ /** Turn the sphere to a set orientation. */
82
+ orientTo: {
83
+ args: {
84
+ yaw: ItemGrid.hinted(45, { unit: "°" }),
85
+ pitch: ItemGrid.hinted(20, { unit: "°" }),
86
+ roll: ItemGrid.hinted(0, { unit: "°" }),
87
+ },
88
+ run: (timeline, s) => timeline.tween({
89
+ yaw: timeline.args.yaw ?? s.yaw,
90
+ pitch: timeline.args.pitch ?? s.pitch,
91
+ roll: timeline.args.roll ?? s.roll,
92
+ }),
93
+ },
94
+ /**
95
+ * Turn the sphere the shorter way until an item (by its place in the layers)
96
+ * faces the viewer. It turns from the orientation the sphere is given: the
97
+ * yaw its `spinSpeed` adds by the time the command runs is not counted, as
98
+ * commands are built against the tree standing at time 0.
99
+ */
100
+ turnTo: {
101
+ args: { item: Types.number(0, { min: 0, step: 1 }) },
102
+ run: (timeline, s, children) => {
103
+ const count = children.length
104
+ const slot = normalizeOrder(s.order, count).indexOf(Math.round(timeline.args.item ?? 0))
105
+ if (slot < 0) return timeline.tween({})
106
+ const facing = sphereFaceForward(count, slot)
107
+ return timeline.tween({
108
+ yaw: s.yaw + wrapDegrees(facing.yaw - s.yaw),
109
+ pitch: s.pitch + wrapDegrees(facing.pitch - s.pitch),
110
+ roll: 0,
111
+ })
112
+ },
113
+ },
114
+ radiusTo: {
115
+ args: { radius: ItemGrid.hinted(300, { min: 0 }) },
116
+ run: (timeline, s) => timeline.tween({ radius: timeline.args.radius ?? s.radius }),
117
+ },
118
+ /** Dolly the camera: a shorter focal length exaggerates the depth, a longer one flattens it. */
119
+ focalLengthTo: {
120
+ args: { focalLength: ItemGrid.hinted(600, { min: 100 }) },
121
+ run: (timeline, s) => timeline.tween({ focalLength: timeline.args.focalLength ?? s.focalLength }),
122
+ },
123
+ },
124
+ ...ItemGrid.fields(arranger),
125
+ }), arranger)
128
126
 
129
- protected override arrangementFor(): SphereArrangement {
130
- return {
131
- kind: "sphere",
132
- radius: this.radius,
133
- yaw: this.yaw,
134
- pitch: this.pitch,
135
- roll: this.roll,
136
- facing: this.facing,
137
- focalLength: this.focalLength,
138
- depthFade: this.depthFade,
139
- cullBackfaces: this.cullBackfaces,
140
- spinSpeed: this.spinSpeed,
141
- }
142
- }
143
- }
127
+ export type SphereGrid = NodeOf<typeof SphereGrid>
128
+ /** What a call or a document row may set. */
129
+ export type SphereGridProps = NonNullable<Parameters<typeof SphereGrid>[0]>
@@ -1,2 +0,0 @@
1
- import{pathOps as et}from"@motionscript/sdk";function _(n,t,e){return{x:n,y:t,depth:0,rotation:0,rotationX:0,rotationY:0,scale:1,opacity:1,meta:e}}function U(n,t,e){if(e<=0)return n;if(e>=1)return t;let o=(s,r)=>s+(r-s)*e;return{x:o(n.x,t.x),y:o(n.y,t.y),depth:o(n.depth,t.depth),rotation:o(n.rotation,t.rotation),rotationX:o(n.rotationX,t.rotationX),rotationY:o(n.rotationY,t.rotationY),scale:o(n.scale,t.scale),opacity:o(n.opacity,t.opacity),meta:e<.5?n.meta:t.meta}}function V(n,t){return t===1?n:{...n,x:n.x*t,y:n.y*t,depth:n.depth*t}}function tt(n){let t=0,e=0;for(let o of n)o.width>t&&(t=o.width),o.height>e&&(e=o.height);return{width:t,height:e}}var $t=["distribute","fixed"],R=new Map,_t=32;function wt(n){let t=R.get(n);if(t)return t;let e=et.contours(n),o={sampler:et.sampler(n),closed:e.length===1&&e[0].closed};return R.size>=_t&&R.delete(R.keys().next().value),R.set(n,o),o}function nt(n,t){let{count:e}=t;if(e===0)return[];let{sampler:o,closed:s}=wt(n.path),r=o.length,a=z(Math.min(n.trimStart,n.trimEnd)),i=z(Math.max(n.trimStart,n.trimEnd)),c=a*r,l=(i-a)*r,d=s&&a===0&&i===1,h=n.offset+n.flowSpeed*t.time,u=n.placement,M=u.rotation*Math.PI/180,S=Math.cos(M),I=Math.sin(M),y=[];for(let k=0;k<e;k++){let m;n.spacing==="fixed"&&l>0?m=h+k*n.spacingDistance/l:d?m=h+k/e:m=h+(e===1?.5:k/(e-1));let C=!0;d?m=m-Math.floor(m):(m<-1e-9||m>1+1e-9)&&(C=!1);let g=o.frameAt(c+z(m)*l);if(!g){let X=_(0,0,{kind:"path",t:z(m)});X.opacity=0,y.push(X);continue}let P=u.flipY?-1:1,T=(g.x-u.originX)*u.scale,v=(g.y-u.originY)*u.scale*P,b=_(u.x+T*S+v*I,u.y-T*I+v*S,{kind:"path",t:z(m)});n.alignToPath&&(b.rotation=-Math.atan2(g.ty*P,g.tx)*180/Math.PI+u.rotation),C||(b.opacity=0),y.push(b)}return y}function z(n){return n<0?0:n>1?1:n}var Qt=["clockwise","counterclockwise"];function ot(n,t,e){let o=n.sweep,s=Math.min(1,Math.abs(o)/360)**8,r=t<=1?0:o/(t-1+s),a=n.direction==="counterclockwise"?-1:1,i=n.startAngle+n.spinSpeed*e,c=[];for(let l=0;l<t;l++)c.push(i+a*l*r);return c}function st(n,t){let e=ot(n,t.count,t.time),o=e[0]??0;return e.map(s=>{let r=s*Math.PI/180,a=_(n.radius*Math.sin(r),n.radius*Math.cos(r),{kind:"radial",angle:Math.abs(s-o)});return n.rotateItems&&(a.rotation=s),a})}function Ut(n,t,e){let o=ot({...n,spinSpeed:0},t,0)[e]??n.startAngle;return-St(o)}function St(n){let t=(n%360+360)%360;return t>180?t-360:t}var ne=["row","column"],oe=["fit","fixed","fill"],se=["start","center","end"];function rt(n,t){let e=Math.max(1,Math.round(n.columns)),o=Math.max(1,Math.ceil(t/e));return n.fillDirection==="column"?{rows:o,columns:Math.max(1,Math.ceil(t/o))}:{rows:o,columns:e}}function kt(n,t,e,o){let{rows:s,columns:r}=rt(n,t);switch(n.cellMode){case"fixed":return{width:Math.max(0,n.cellWidth),height:Math.max(0,n.cellHeight)};case"fill":return{width:Math.max(0,(o.width-n.columnGap*(r-1))/r),height:Math.max(0,(o.height-n.rowGap*(s-1))/s)};default:return tt(e)}}function at(n,t){let{count:e}=t;if(e===0)return[];let{rows:o,columns:s}=rt(n,e),r=n.fillDirection==="column",a=r?s:o,i=r?o:s,c=kt(n,e,t.sizes,t.box),l=c.width+n.columnGap,d=c.height+n.rowGap,h=a-1,u=e-h*i,M=i-u,S=n.lastLineAlign==="center"?M/2:n.lastLineAlign==="end"?M:0,I=n.rowOffset*l,y=n.columnOffset*d,k=[];for(let m=0;m<e;m++){let C=Math.floor(m/i),g=m%i;C===h&&(g+=S);let P=r?g:C,T=r?C:g,v=Math.round(P),b=Math.round(T),X=(T-(s-1)/2)*l+(v%2===1?I:0)-(o>1?I/2:0),gt=((o-1)/2-P)*d-(b%2===1?y:0)+(s>1?y/2:0);k.push(_(X,gt,{kind:"rectangular",row:v,column:b}))}return k}var ie=["outward","billboard"],ce=["x","y","z"],It=Math.PI*(3-Math.sqrt(5)),w=180/Math.PI;function it(n,t){if(t<=1)return[0,0,1];let e=1-2*(n+.5)/t,o=Math.sqrt(Math.max(0,1-e*e)),s=n*It;return[Math.cos(s)*o,e,Math.sin(s)*o]}function At(n,t,e,o){let[s,r,a]=n,i=t/w,c=e/w,l=o/w,d=s*Math.cos(i)+a*Math.sin(i),h=-s*Math.sin(i)+a*Math.cos(i),u=r*Math.cos(c)-h*Math.sin(c),M=r*Math.sin(c)+h*Math.cos(c);return[d*Math.cos(l)+u*Math.sin(l),-d*Math.sin(l)+u*Math.cos(l),M]}function ct(n,t){let{count:e}=t,o=n.radius,s=n.yaw+n.spinSpeed*t.time,r=n.facing==="outward",a=[];for(let i=0;i<e;i++){let c=it(i,e),[l,d,h]=At(c,s,n.pitch,n.roll),u=_(l*o,d*o,{kind:"sphere",lat:Math.asin(Math.max(-1,Math.min(1,c[1])))*w,lon:Math.atan2(c[2],c[0])*w,depth:h});u.depth=h*o,r&&(u.rotationY=Math.asin(Math.max(-1,Math.min(1,l)))*w,u.rotationX=Math.atan2(d,h)*w),u.opacity=1-n.depthFade*(1-(h+1)/2),r&&n.cullBackfaces&&Ot(u,[l,d,h],n.focalLength)&&(u.opacity=0),a.push(u)}return a}function Ot(n,t,e){return e<=0?t[2]<0:t[0]*-n.x+t[1]*-n.y+t[2]*(e-n.depth)<0}function le(n,t){let[e,o,s]=it(t,n);return{yaw:-Math.atan2(e,s)*w,pitch:Math.atan2(o,Math.hypot(e,s))*w}}var ue=["circle","square","star","heart","infinity","wave","spiral","arc","line"];var G=new Map,Et=64;function de(n,t){let e=`${n}:${Math.round(t.width*100)}:${Math.round(t.height*100)}`,o=G.get(e);if(o)return o;let s=Ct(n,t);return G.size>=Et&&G.delete(G.keys().next().value),G.set(e,s),s}function Ct(n,t){let e=t.width>0?t.width:400,o=t.height>0?t.height:400,s=e/2,r=o/2;switch(n){case"square":return B([[-s,r],[s,r],[s,-r],[-s,-r]]);case"star":{let a=[];for(let i=0;i<10;i++){let c=i*Math.PI/5,l=i%2===0?1:.45;a.push([Math.sin(c)*s*l,Math.cos(c)*r*l])}return B(a)}case"heart":return B(N(96,a=>{let i=a*2*Math.PI,c=16*Math.sin(i)**3,l=13*Math.cos(i)-5*Math.cos(2*i)-2*Math.cos(3*i)-Math.cos(4*i);return[c/17*s,(l+2.5)/15.5*r]}).slice(0,-1));case"infinity":return B(N(96,a=>{let i=a*2*Math.PI,c=1+Math.sin(i)**2;return[Math.cos(i)/c*s,Math.sin(i)*Math.cos(i)/c*r*2]}).slice(0,-1));case"wave":return H(N(96,a=>[(-1+2*a)*s,Math.sin(a*4*Math.PI)*r*.6]));case"spiral":return H(N(160,a=>{let i=a*3*2*Math.PI,c=.08+.92*a;return[Math.sin(i)*s*c,Math.cos(i)*r*c]}));case"arc":return H(N(64,a=>{let i=-Math.PI/2+a*Math.PI;return[Math.sin(i)*s,-r+Math.cos(i)*o]}));case"line":return[{type:"M",x:-s,y:0},{type:"L",x:s,y:0}];default:return bt(s,r)}}function bt(n,t){let e=.5522847498;return[{type:"M",x:0,y:t},{type:"C",x1:e*n,y1:t,x2:n,y2:e*t,x:n,y:0},{type:"C",x1:n,y1:-e*t,x2:e*n,y2:-t,x:0,y:-t},{type:"C",x1:-e*n,y1:-t,x2:-n,y2:-e*t,x:-n,y:0},{type:"C",x1:-n,y1:e*t,x2:-e*n,y2:t,x:0,y:t},{type:"Z"}]}function N(n,t){let e=[];for(let o=0;o<=n;o++)e.push(t(o/n));return e}function H(n){return n.map(([t,e],o)=>o===0?{type:"M",x:t,y:e}:{type:"L",x:t,y:e})}function B(n){return[...H(n),{type:"Z"}]}function K(n,t){switch(n.kind){case"rectangular":return at(n,t);case"radial":return st(n,t);case"path":return nt(n,t);case"sphere":return ct(n,t)}}function $(n){return n.kind==="sphere"?Math.max(1,n.focalLength):0}function Lt(n){let t=Math.floor(n)>>>0;return()=>{t=t+1831565813>>>0;let e=t;return e=Math.imul(e^e>>>15,e|1),e^=e+Math.imul(e^e>>>7,e|61),((e^e>>>14)>>>0)/4294967296}}function W(n,t){let e=[...n],o=Lt(t);for(let s=e.length-1;s>0;s--){let r=Math.floor(o()*(s+1));[e[s],e[r]]=[e[r],e[s]]}return e}function lt(n){let t=2166136261;for(let e=0;e<n.length;e++)t=Math.imul(t^n.charCodeAt(e),16777619);return t>>>0}var ht=["index","reverse","random","centerOut","edgesIn","row","column","angle","path","depth"],Pt=.95;function ut(n,t,e){let o=t.length,s=Tt(n,t,e),r=1/0,a=-1/0;for(let c of s)c<r&&(r=c),c>a&&(a=c);let i=a-r;return i>1e-9?s.map(c=>(c-r)/i):new Array(o).fill(0)}function D(n,t,e){let o=Math.max(0,Math.min(Pt,e)),s=o===0?t:(t-n*o)/(1-o);return s<0?0:s>1?1:s}function Tt(n,t,e){switch(n){case"reverse":return t.map((o,s)=>-s);case"random":{let o=W(t.map((r,a)=>a),e),s=new Array(t.length);return o.forEach((r,a)=>{s[r]=a}),s}case"centerOut":return t.map(o=>Math.round(Math.hypot(o.x,o.y,o.depth)*1e3)/1e3);case"edgesIn":return t.map(o=>-Math.round(Math.hypot(o.x,o.y,o.depth)*1e3)/1e3);case"row":return t.map(o=>o.meta.kind==="rectangular"?o.meta.row:-Math.round(o.y));case"column":return t.map(o=>o.meta.kind==="rectangular"?o.meta.column:Math.round(o.x));case"angle":return t.map((o,s)=>o.meta.kind==="radial"?o.meta.angle:o.meta.kind==="rectangular"||o.meta.kind==="sphere"?vt(o):s);case"path":return t.map((o,s)=>o.meta.kind==="path"?o.meta.t:s);case"depth":return t.map((o,s)=>o.meta.kind==="sphere"?-o.meta.depth:s);default:return t.map((o,s)=>s)}}function vt(n){let t=Math.atan2(n.x,n.y)*180/Math.PI;return t<0?t+360:t}var Z=["scale","fade","center","rise","flip","spin"],dt=["scale","lift","fade","spin"];function ft(n,t,e,o,s,r){o&&Rt(n,o.style,o.values[t]??1,e),s&&zt(n,s,s.values[t]??0,e),r&&Gt(n,r,r.values[t]??0)}function Rt(n,t,e,o){if(e===1)return;let s=q(e);switch(t){case"fade":n.opacity*=s;break;case"center":n.x*=e,n.y*=e,n.depth*=e,n.opacity*=q(e*4);break;case"rise":n.y-=(1-e)*Math.max(40,o.height),n.opacity*=s;break;case"flip":n.rotationX+=(1-e)*90;break;case"spin":n.rotation-=(1-e)*180,n.scale*=Math.max(0,e);break;default:n.scale*=Math.max(0,e)}}function zt(n,t,e,o){if(e!==0)switch(t.style){case"lift":n.y+=t.amount*e*Math.max(40,o.height);break;case"fade":n.opacity*=q(1-t.amount*e);break;case"spin":n.rotation+=t.amount*e*360;break;default:n.scale*=1+t.amount*e}}function Gt(n,t,e){if(e!==0){if(e>0){n.scale*=1+t.grow*e;return}n.opacity*=q(1-t.dim*-e),n.scale*=Math.max(0,1+t.grow*.5*e)}}function q(n){return n<0?0:n>1?1:n}function A(n,t){let e=[],o=new Array(t).fill(!1);for(let s of n??[]){let r=Math.round(s);r>=0&&r<t&&!o[r]&&(o[r]=!0,e.push(r))}for(let s=0;s<t;s++)o[s]||e.push(s);return e}function J(n){let t=new Array(n.length);return n.forEach((e,o)=>{t[e]=o}),t}function pt(n){return Array.isArray(n)?n.map(Number).filter(Number.isFinite):typeof n!="string"?[]:n.split(/[\s,]+/).filter(t=>t!=="").map(Number).filter(Number.isFinite)}import{command as x,easeIn as Nt,easeInOut as Y,easeOut as mt,findNode2D as Dt,flowOps as F,frameIn as Yt,insetsOps as Mt,Node2D as Ft,property as O,sizeInputOps as yt}from"@motionscript/sdk";import{findNode2D as De,frameIn as Ye}from"@motionscript/sdk";var p=function(n,t,e,o){var s=arguments.length,r=s<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,e):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(n,t,e,o);else for(var i=n.length-1;i>=0;i--)(a=n[i])&&(r=(s<3?a(r):s>3?a(t,e,r):a(t,e))||r);return s>3&&r&&Object.defineProperty(t,e,r),r};function E(n){return[{key:"staggerOrder",kind:"enum",options:ht,default:"index"},{key:"stagger",min:0,max:.95,step:.05,default:n}]}var xt=["rectangularGrid","radialGrid","pathGrid","sphereGrid"],j=.3,Xt={width:0,height:0},Bt={x:0,y:0},f=class n extends Ft{reveal(t){let e=t.data?.style??"scale",o=t.easing??(e==="scale"||e==="flip"?mt("back"):mt("cubic")),s=this._ranks(t.data?.staggerOrder),r=t.data?.stagger??.5;return this.command(a=>a>=1?{revealState:null}:{revealState:{style:e,values:s.map(i=>o(D(i,a,r)))}},t.duration)}conceal(t){let e=t.data?.style??"scale",o=t.easing??(e==="scale"||e==="flip"?Nt("back"):Y("cubic")),s=this._ranks(t.data?.staggerOrder),r=t.data?.stagger??.5,a=this.revealState?.values;return this.command(i=>({revealState:{style:e,values:s.map((c,l)=>(a?.[l]??1)*(1-o(D(c,i,r))))}}),t.duration)}wave(t){let e=t.data?.style??"scale",o=t.data?.amount??.3,s=t.easing??Y("sine"),r=this._ranks(t.data?.staggerOrder),a=t.data?.stagger??.7;return this.command(i=>i>=1?{waveState:null}:{waveState:{style:e,amount:o,values:r.map(c=>Math.sin(Math.PI*s(D(c,i,a))))}},t.duration)}focus(t){let e=this._itemCount(),o=Math.round(t.data?.item??0);return this._focusOn(s=>s===o,e,t)}unfocus(t){let e=this.focusState,o=t.easing??Y("cubic");return this.command(s=>{if(s>=1||!e)return{focusState:null};let r=1-o(s);return{focusState:{...e,values:e.values.map(a=>a*r)}}},t.duration)}spreadTo(t){return this.to({data:{spread:t.data?.spread??1},duration:t.duration,easing:t.easing})}shuffle(t){let e=A(this.order,this._itemCount()),o=W(e,t.data?.seed??1);return o.length>1&&o.every((s,r)=>s===e[r])&&(o=[...o.slice(1),o[0]]),this._transitionTo({order:o},t)}swap(t){let e=A(this.order,this._itemCount()),o=e.indexOf(Math.round(t.data?.first??0)),s=e.indexOf(Math.round(t.data?.second??1));return o>=0&&s>=0&&([e[o],e[s]]=[e[s],e[o]]),this._transitionTo({order:e},t,0)}reorder(t){let e=A(pt(t.data?.order),this._itemCount());return this._transitionTo({order:e},t)}morphInto(t){return this._transitionTo({arrangeLike:t.data?.target??""},t)}applyDefaultSize(t){(!t||t.width===void 0)&&this.applyProp("width","hug",{tween:yt.lerp}),(!t||t.height===void 0)&&this.applyProp("height","hug",{tween:yt.lerp})}itemSpace(t,e,o){return e}measure(t,e){this.lastMeasure={constraints:t,measurer:e};let o=this.effectivePadding(),s=this.flowChildren();if(s.length===0)return this._measured=null,F.size(this,t,o,Xt);let r=F.contentBox(this,t,o),a=this._measureItems(s,r,e);return this._measured={space:r,sizes:a},F.size(this,t,o,Ht(this._targetSlots(s.length,a,r).slots,a,this._focal))}layoutChildren(t,e){this._placements.clear();let o=this.flowChildren();if(o.length===0){this._slots=[],this._sizes=[],this._focal=0;return}let s=Mt.insetBounds(t.width,t.height,this.effectivePadding()),r=this._measured;this._measured=null;let a=r&&r.sizes.length===o.length&&qt(r.space,s)?r.sizes:this._measureItems(o,s,e),i=this._resolve(a,s);this._slots=i,this._sizes=a;for(let c=0;c<o.length;c++){let l=i[c];o[c].layout({x:s.x+l.x,y:s.y-l.y,width:a[c].width,height:a[c].height},e),(l.rotation!==0||l.scale!==1||l.rotationX!==0||l.rotationY!==0||l.depth!==0||l.opacity!==1)&&this._placements.set(o[c],{rotation:l.rotation,scale:l.scale,rotationX:l.rotationX,rotationY:l.rotationY,depth:l.depth,opacity:l.opacity})}}_placementOf(t){return this._placements.get(t)??null}_spaceCamera(){let t=this._focal;return t<=0||this._inSpace()?null:{perspective:t,orbit:0,elevation:0,dolly:0,lookAt:Bt,zoom:1,heading:0,viewportX:0,viewportY:0}}_placements=new Map;_measured=null;_slots=[];_sizes=[];_focal=0;_borrowCache=null;_itemCount(){return this.flowChildren().length}_itemSlots(){let t=this._itemCount();if(this._slots.length===t)return this._slots;let e=new Array(t).fill({width:100,height:100});return this._targetSlots(t,e,L(this)).slots}_itemSizes(){return this._sizes.length===this._itemCount()?this._sizes:[]}_ranks(t){return ut(t??"index",this._itemSlots(),lt(this.id))}_transitionTo(t,e,o=j){let s=this._snapshot(),r=e.easing??Y("cubic"),a=this._ranks(e.data?.staggerOrder),i=e.data?.stagger??o;return this.command(c=>{if(c>=1)return{...t,transition:null};let l=a.map(d=>r(D(d,c,i)));return{...t,transition:{from:s,mix:l}}},e.duration)}_focusOn(t,e,o){let s=this.focusState,r=o.data?.dim??.7,a=o.data?.grow??.15,i=Array.from({length:e},(l,d)=>t(d)?1:-1),c=o.easing??Y("cubic");return this.command(l=>{let d=c(l);return{focusState:{dim:Q(s?.dim??r,r,d),grow:Q(s?.grow??a,a,d),values:i.map((h,u)=>Q(s?.values[u]??0,h,d))}}},o.duration)}_snapshot(){let t=this._borrowed();return{arrangement:t?t.arrangementFor(L(t)):this.arrangementFor(L(this)),source:t?.id??"",order:A(this.order,this._itemCount()),spread:this.spread}}_measureItems(t,e,o){let s=F.measure({},t,e,o).sizes,r=this.itemSpace(t.length,e,s);return r===e?[...s]:[...F.measure({},t,r,o).sizes]}_targetSlots(t,e,o){let s=this._borrowed(),r=s?s.arrangementFor(L(s)):this.arrangementFor(o),a=K(r,{count:t,sizes:e,box:s?L(s):o,time:this.time.total});return s&&(a=this._fromGrid(s,a)),{slots:J(A(this.order,t)).map(c=>V(a[c],this.spread)),arrangement:r}}_resolve(t,e){let o=t.length,s=this._targetSlots(o,t,e),r=s.slots,a=$(s.arrangement),i=this.transition;if(i){let{from:h}=i,u=h.source?this._gridById(h.source):null,M=u?L(u):e,S=K(h.arrangement,{count:o,sizes:t,box:M,time:this.time.total});u&&u!==this&&(S=this._fromGrid(u,S));let I=J(A(h.order,o));for(let y=0;y<o;y++)r[y]=U(V(S[I[y]],h.spread),r[y],i.mix[y]??1);a=a||$(h.arrangement)}this._focal=a;let c=this.revealState,l=this.waveState,d=this.focusState;if(c||l||d)for(let h=0;h<o;h++)ft(r[h],h,t[h],c,l,d);return r}_inSpace(){for(let t=this.parent;t;t=t.parent){if(t._spaceCamera())return!0;if(!t._rendersChildrenInSpace())return!1}return!1}_borrowed(){let t=this.arrangeLike;return!t||t===this.id?null:this._gridById(t)}_gridById(t){if(t===this.id)return this;let e=this._borrowCache;if(e&&e.id===t&&e.grid.mounted)return e.grid;let o=Dt(this,t),s=o instanceof n?o:null;return this._borrowCache=s?{id:t,grid:s}:null,s}_fromGrid(t,e){let o=Yt(this,t);return e.map(s=>{let r=Wt(s.x*o.scale,s.y*o.scale,o.rotation);return{...s,x:o.x+r.x,y:o.y+r.y,depth:s.depth*o.scale,rotation:s.rotation+o.rotation,scale:s.scale*o.scale}})}};p([O({default:[],kind:"order",animatable:!1})],f.prototype,"order",void 0);p([O({default:1,min:0,max:3,step:.05})],f.prototype,"spread",void 0);p([O({default:"",kind:"nodeRef",nodeTypes:xt,animatable:!1})],f.prototype,"arrangeLike",void 0);p([O({default:void 0,kind:"state",animatable:!1})],f.prototype,"revealState",void 0);p([O({default:void 0,kind:"state",animatable:!1})],f.prototype,"waveState",void 0);p([O({default:void 0,kind:"state",animatable:!1})],f.prototype,"focusState",void 0);p([O({default:void 0,kind:"state",animatable:!1})],f.prototype,"transition",void 0);p([x({args:[{key:"style",kind:"enum",options:Z,default:"scale"},...E(.5)]})],f.prototype,"reveal",null);p([x({args:[{key:"style",kind:"enum",options:Z,default:"scale"},...E(.5)]})],f.prototype,"conceal",null);p([x({args:[{key:"style",kind:"enum",options:dt,default:"scale"},{key:"amount",min:0,max:2,step:.05,default:.3},...E(.7)]})],f.prototype,"wave",null);p([x({args:[{key:"item",min:0,step:1,default:0},{key:"dim",min:0,max:1,step:.05,default:.7},{key:"grow",min:0,max:1,step:.05,default:.15}]})],f.prototype,"focus",null);p([x()],f.prototype,"unfocus",null);p([x({args:[{key:"spread",min:0,max:3,step:.05,default:1}]})],f.prototype,"spreadTo",null);p([x({args:[{key:"seed",min:0,step:1,default:1},...E(j)]})],f.prototype,"shuffle",null);p([x({args:[{key:"first",min:0,step:1,default:0},{key:"second",min:0,step:1,default:1},...E(0)]})],f.prototype,"swap",null);p([x({args:[{key:"order",kind:"text",default:""},...E(j)]})],f.prototype,"reorder",null);p([x({args:[{key:"target",kind:"nodeRef",nodeTypes:xt},...E(j)]})],f.prototype,"morphInto",null);function L(n){let t=n.layoutBounds,e=Mt.insetBounds(t.width,t.height,n.effectivePadding());return{width:e.width,height:e.height}}function Ht(n,t,e){let o=0,s=0;for(let r=0;r<n.length;r++){let a=n[r],i=t[r],c=a.rotation*Math.PI/180,l=Math.abs(Math.cos(c)),d=Math.abs(Math.sin(c)),h=e>0&&e-a.depth>1?e/(e-a.depth):1,u=(i.width*l+i.height*d)/2*a.scale*h,M=(i.width*d+i.height*l)/2*a.scale*h;o=Math.max(o,Math.abs(a.x)*h+u),s=Math.max(s,Math.abs(a.y)*h+M)}return{width:o*2,height:s*2}}function Wt(n,t,e){if(e===0)return{x:n,y:t};let o=e*Math.PI/180,s=Math.cos(o),r=Math.sin(o);return{x:n*s+t*r,y:-n*r+t*s}}function qt(n,t){return Math.abs(n.width-t.width)<1e-6&&Math.abs(n.height-t.height)<1e-6}function Q(n,t,e){return n+(t-n)*e}export{_ as a,U as b,V as c,tt as d,$t as e,nt as f,Qt as g,ot as h,st as i,Ut as j,St as k,ne as l,oe as m,se as n,rt as o,kt as p,at as q,ie as r,ce as s,it as t,At as u,ct as v,le as w,ue as x,de as y,K as z,$ as A,Lt as B,W as C,lt as D,ht as E,ut as F,D as G,Z as H,dt as I,ft as J,A as K,J as L,pt as M,E as N,xt as O,j as P,f as Q,L as R,De as S,Ye as T};
2
- //# sourceMappingURL=chunk-XDUDKWM7.js.map