@nitesh-tyagi/vectorflow 1.0.0 → 1.0.2
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.
- package/README.md +315 -47
- package/dist/vectorflow.umd.js +1 -1
- package/dist/vectorflow.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/engine.js +16 -12
package/README.md
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
A minimal, JSON-driven SVG pose animation library.
|
|
4
4
|
|
|
5
|
-
[](https://www.npmjs.com/package/vectorflow)
|
|
6
|
-
[](LICENSE)
|
|
5
|
+
[](https://www.npmjs.com/package/@nitesh-tyagi/vectorflow)
|
|
6
|
+
[](LICENSE)
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
@@ -12,6 +12,7 @@ A minimal, JSON-driven SVG pose animation library.
|
|
|
12
12
|
VectorFlow loads an SVG containing multiple **pose states** and a JSON config defining **routes** and **actions**, then animates smoothly between poses using attribute interpolation. No path morphing, no crossfades — just clean, transform-and-attribute-based transitions.
|
|
13
13
|
|
|
14
14
|
**Features:**
|
|
15
|
+
|
|
15
16
|
- Declarative JSON config — define states, routes, and actions
|
|
16
17
|
- Smooth SVG attribute interpolation (position, size, color, transform)
|
|
17
18
|
- Sequence and loop action types with cancellation support
|
|
@@ -21,20 +22,34 @@ VectorFlow loads an SVG containing multiple **pose states** and a JSON config de
|
|
|
21
22
|
|
|
22
23
|
---
|
|
23
24
|
|
|
25
|
+
## Table of Contents
|
|
26
|
+
|
|
27
|
+
- [Quick Start](#quick-start)
|
|
28
|
+
- [Preparing Your SVG](#preparing-your-svg)
|
|
29
|
+
- [Writing the JSON Config](#writing-the-json-config)
|
|
30
|
+
- [API Reference](#api-reference)
|
|
31
|
+
- [Full Example](#full-example)
|
|
32
|
+
- [License](#license)
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
24
36
|
## Quick Start
|
|
25
37
|
|
|
26
38
|
### Install
|
|
27
39
|
|
|
28
40
|
```bash
|
|
29
|
-
npm install vectorflow
|
|
41
|
+
npm install @nitesh-tyagi/vectorflow
|
|
30
42
|
```
|
|
31
43
|
|
|
32
44
|
### Browser (UMD)
|
|
33
45
|
|
|
34
46
|
```html
|
|
35
|
-
<script src="https://unpkg.com/vectorflow/dist/vectorflow.umd.js"></script>
|
|
47
|
+
<script src="https://unpkg.com/@nitesh-tyagi/vectorflow/dist/vectorflow.umd.js"></script>
|
|
36
48
|
<script>
|
|
37
|
-
const vf = new VectorFlow({
|
|
49
|
+
const vf = new VectorFlow({
|
|
50
|
+
svgElement: document.querySelector('svg'),
|
|
51
|
+
json: config,
|
|
52
|
+
});
|
|
38
53
|
vf.play('shuffle');
|
|
39
54
|
</script>
|
|
40
55
|
```
|
|
@@ -42,11 +57,11 @@ npm install vectorflow
|
|
|
42
57
|
### ES Module
|
|
43
58
|
|
|
44
59
|
```js
|
|
45
|
-
import VectorFlow from 'vectorflow';
|
|
60
|
+
import VectorFlow from '@nitesh-tyagi/vectorflow';
|
|
46
61
|
|
|
47
62
|
const vf = new VectorFlow({
|
|
48
63
|
svgElement: document.querySelector('#my-svg'),
|
|
49
|
-
json: configObject, // or JSON string
|
|
64
|
+
json: configObject, // or a JSON string
|
|
50
65
|
});
|
|
51
66
|
|
|
52
67
|
vf.play('left'); // play an action
|
|
@@ -56,7 +71,219 @@ vf.stop(); // cancel current playback
|
|
|
56
71
|
|
|
57
72
|
---
|
|
58
73
|
|
|
59
|
-
##
|
|
74
|
+
## Preparing Your SVG
|
|
75
|
+
|
|
76
|
+
VectorFlow discovers animation states and parts directly from your SVG markup. Follow these rules when creating your SVG:
|
|
77
|
+
|
|
78
|
+
### 1. Define State Groups
|
|
79
|
+
|
|
80
|
+
Wrap each pose/state in a `<g>` (group) element with an `id` of the form `state_{name}`:
|
|
81
|
+
|
|
82
|
+
```xml
|
|
83
|
+
<g id="state_left"> <!-- state name: "left" -->
|
|
84
|
+
...
|
|
85
|
+
</g>
|
|
86
|
+
<g id="state_center"> <!-- state name: "center" -->
|
|
87
|
+
...
|
|
88
|
+
</g>
|
|
89
|
+
<g id="state_right"> <!-- state name: "right" -->
|
|
90
|
+
...
|
|
91
|
+
</g>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
- The `state_` prefix is **required**. Everything after it becomes the state name used in your JSON config.
|
|
95
|
+
- You can have as many states as you need.
|
|
96
|
+
|
|
97
|
+
### 2. Tag Parts with `data-part`
|
|
98
|
+
|
|
99
|
+
Inside each state group, mark the elements that should be animated with a `data-part` attribute:
|
|
100
|
+
|
|
101
|
+
```xml
|
|
102
|
+
<g id="state_left">
|
|
103
|
+
<rect data-part="body" x="20" y="80" width="40" height="40" fill="red" />
|
|
104
|
+
<circle data-part="head" cx="40" cy="60" r="15" fill="orange" />
|
|
105
|
+
</g>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
- VectorFlow matches parts **by name** across states. A part called `"body"` in `state_left` will animate to the `"body"` in `state_right`.
|
|
109
|
+
- Part names must be **identical** across all states.
|
|
110
|
+
|
|
111
|
+
### 3. Keep Part Sets Consistent
|
|
112
|
+
|
|
113
|
+
**Every state group must contain the exact same set of `data-part` names.** If `state_left` has parts `body` and `head`, then `state_center` and `state_right` must also have `body` and `head`.
|
|
114
|
+
|
|
115
|
+
VectorFlow will throw an error if part sets don't match:
|
|
116
|
+
|
|
117
|
+
```
|
|
118
|
+
VectorFlow: Part mismatch between states. State "left" has parts [body,head]
|
|
119
|
+
but state "right" has parts [body].
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### 4. Animatable Attributes
|
|
123
|
+
|
|
124
|
+
VectorFlow interpolates the following SVG attributes and properties between states:
|
|
125
|
+
|
|
126
|
+
| Type | Attributes / Properties |
|
|
127
|
+
|------|------------------------|
|
|
128
|
+
| **Numeric** | `x`, `y`, `width`, `height`, `rx`, `ry`, `cx`, `cy`, `r`, `opacity` |
|
|
129
|
+
| **Colors** | `fill`, `stroke` (hex `#RGB`/`#RRGGBB` or `rgb()`) |
|
|
130
|
+
| **Transforms** | `translate(x,y)`, `scale(x,y)`, `rotate(angle)` |
|
|
131
|
+
|
|
132
|
+
Design your states so that the visual differences are expressed through these attributes. For example, to move a shape left, change its `x`; to recolor it, change its `fill`.
|
|
133
|
+
|
|
134
|
+
### 5. Minimal SVG Template
|
|
135
|
+
|
|
136
|
+
```xml
|
|
137
|
+
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
138
|
+
<!-- State: left -->
|
|
139
|
+
<g id="state_left">
|
|
140
|
+
<rect data-part="shape" x="20" y="80" width="40" height="40" fill="#e74c3c" />
|
|
141
|
+
</g>
|
|
142
|
+
|
|
143
|
+
<!-- State: center -->
|
|
144
|
+
<g id="state_center">
|
|
145
|
+
<rect data-part="shape" x="80" y="80" width="40" height="40" fill="#3498db" />
|
|
146
|
+
</g>
|
|
147
|
+
|
|
148
|
+
<!-- State: right -->
|
|
149
|
+
<g id="state_right">
|
|
150
|
+
<rect data-part="shape" x="140" y="80" width="40" height="40" fill="#2ecc71" />
|
|
151
|
+
</g>
|
|
152
|
+
</svg>
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
> **Tip:** At runtime, VectorFlow hides all state groups and creates a single `<g id="live_character">` clone to animate. Your original state groups serve as snapshots defining each pose.
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
159
|
+
## Writing the JSON Config
|
|
160
|
+
|
|
161
|
+
The JSON config tells VectorFlow which state to start in, how to transition between states, and what actions are available.
|
|
162
|
+
|
|
163
|
+
### Top-Level Structure
|
|
164
|
+
|
|
165
|
+
```json
|
|
166
|
+
{
|
|
167
|
+
"name": "my-animation",
|
|
168
|
+
"initial_state": "center",
|
|
169
|
+
"ms": 120,
|
|
170
|
+
"routes": { ... },
|
|
171
|
+
"actions": { ... }
|
|
172
|
+
}
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
| Field | Type | Required | Description |
|
|
176
|
+
|-------|------|----------|-------------|
|
|
177
|
+
| `name` | `string` | No | A label for this config (for your own reference). |
|
|
178
|
+
| `initial_state` | `string` | **Yes** | The state name to start in (must match an `id="state_..."` in your SVG). |
|
|
179
|
+
| `ms` | `number` | No | Default animation duration in milliseconds (default: `120`). |
|
|
180
|
+
| `routes` | `object` | **Yes** | Defines how to travel between states. |
|
|
181
|
+
| `actions` | `object` | **Yes** | Named animation sequences/loops that users can trigger. |
|
|
182
|
+
|
|
183
|
+
### Routes
|
|
184
|
+
|
|
185
|
+
Routes define the **path** the animation takes when transitioning to a target state. Each route key is a target and its value maps source states (or `"*"` for any source) to an array of intermediate + destination states.
|
|
186
|
+
|
|
187
|
+
```json
|
|
188
|
+
"routes": {
|
|
189
|
+
"left": {
|
|
190
|
+
"*": ["left"],
|
|
191
|
+
"right": ["center", "left"]
|
|
192
|
+
},
|
|
193
|
+
"right": {
|
|
194
|
+
"*": ["right"],
|
|
195
|
+
"left": ["center", "right"]
|
|
196
|
+
},
|
|
197
|
+
"center": {
|
|
198
|
+
"*": ["center"],
|
|
199
|
+
"ms": 60
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
**How route resolution works:**
|
|
205
|
+
|
|
206
|
+
1. When the engine needs to go to `"left"` from the current state, it looks up `routes["left"]`.
|
|
207
|
+
2. If there's a specific entry for the current state (e.g. `"right": ["center", "left"]`), it follows that path — first animate to `center`, then to `left`.
|
|
208
|
+
3. If no specific entry exists, it uses the wildcard `"*"` path.
|
|
209
|
+
4. If no route exists at all, VectorFlow jumps directly to the target state.
|
|
210
|
+
|
|
211
|
+
**Route-level `ms`:** You can set a per-route `ms` to override the global duration for transitions to that target state.
|
|
212
|
+
|
|
213
|
+
**Route keys vs state names:** Route keys don't have to match a state name. You can create alias routes that resolve to real states:
|
|
214
|
+
|
|
215
|
+
```json
|
|
216
|
+
"routes": {
|
|
217
|
+
"direct-left": { "*": ["left"] },
|
|
218
|
+
"direct-right": { "*": ["right"] }
|
|
219
|
+
}
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
Here `"direct-left"` is a route key (not a state) that resolves to state `"left"`. This is useful for defining multiple paths to the same state.
|
|
223
|
+
|
|
224
|
+
### Actions
|
|
225
|
+
|
|
226
|
+
Actions are the named animations you trigger via `vf.play('actionName')`. Each action has a type — either `"sequence"` (play once) or `"loop"` (repeat).
|
|
227
|
+
|
|
228
|
+
```json
|
|
229
|
+
"actions": {
|
|
230
|
+
"left": { "type": "sequence", "order": ["left"] },
|
|
231
|
+
"right": { "type": "sequence", "order": ["right"] },
|
|
232
|
+
"center": { "type": "sequence", "order": ["center"] },
|
|
233
|
+
"shuffle": {
|
|
234
|
+
"type": "loop",
|
|
235
|
+
"mode": "direct",
|
|
236
|
+
"order": ["left", "center", "right", "center"],
|
|
237
|
+
"ms": 80,
|
|
238
|
+
"count": 99999
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
| Field | Type | Default | Description |
|
|
244
|
+
|-------|------|---------|-------------|
|
|
245
|
+
| `type` | `"sequence" \| "loop"` | `"sequence"` | `sequence` plays once; `loop` repeats `count` times. |
|
|
246
|
+
| `order` | `string[]` | — | Array of route keys or state names to visit in order. |
|
|
247
|
+
| `ms` | `number` | — | Override animation duration for this action (takes highest priority). |
|
|
248
|
+
| `mode` | `"direct"` | — | If `"direct"`, skips intermediate route steps — jumps straight to the final resolved state. |
|
|
249
|
+
| `count` | `number` | `99999` | For loops: how many times to repeat the order cycle. |
|
|
250
|
+
|
|
251
|
+
**`order` items can be route keys or state names.** The engine resolves each entry through the routes table. If an entry matches a route key, VectorFlow follows that route's path. If it matches a state name directly, it goes there.
|
|
252
|
+
|
|
253
|
+
### Duration Precedence
|
|
254
|
+
|
|
255
|
+
When determining how long a step takes, VectorFlow checks in this order:
|
|
256
|
+
|
|
257
|
+
```
|
|
258
|
+
action.ms > routes[target].ms > json.ms > 120ms (fallback)
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
### Full JSON Example
|
|
262
|
+
|
|
263
|
+
```json
|
|
264
|
+
{
|
|
265
|
+
"name": "character",
|
|
266
|
+
"initial_state": "idle",
|
|
267
|
+
"ms": 150,
|
|
268
|
+
"routes": {
|
|
269
|
+
"idle": { "*": ["idle"] },
|
|
270
|
+
"walk-left": { "*": ["lean-left", "walk-left"], "walk-right": ["idle", "lean-left", "walk-left"] },
|
|
271
|
+
"walk-right": { "*": ["lean-right", "walk-right"], "walk-left": ["idle", "lean-right", "walk-right"] },
|
|
272
|
+
"lean-left": { "*": ["lean-left"], "ms": 80 },
|
|
273
|
+
"lean-right": { "*": ["lean-right"], "ms": 80 }
|
|
274
|
+
},
|
|
275
|
+
"actions": {
|
|
276
|
+
"go-left": { "type": "sequence", "order": ["walk-left"] },
|
|
277
|
+
"go-right": { "type": "sequence", "order": ["walk-right"] },
|
|
278
|
+
"reset": { "type": "sequence", "order": ["idle"], "ms": 200 },
|
|
279
|
+
"patrol": { "type": "loop", "order": ["walk-left", "idle", "walk-right", "idle"], "count": 10 }
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
---
|
|
285
|
+
|
|
286
|
+
## API Reference
|
|
60
287
|
|
|
61
288
|
### Constructor
|
|
62
289
|
|
|
@@ -66,19 +293,19 @@ const vf = new VectorFlow({ svgElement, json });
|
|
|
66
293
|
|
|
67
294
|
| Param | Type | Description |
|
|
68
295
|
|-------|------|-------------|
|
|
69
|
-
| `svgElement` | `SVGElement \| string` | An SVG DOM element or raw SVG string |
|
|
70
|
-
| `json` | `object \| string` | VectorFlow JSON config (object or string) |
|
|
296
|
+
| `svgElement` | `SVGElement \| string` | An SVG DOM element or raw SVG string. |
|
|
297
|
+
| `json` | `object \| string` | VectorFlow JSON config (object or JSON string). |
|
|
71
298
|
|
|
72
299
|
### Properties
|
|
73
300
|
|
|
74
301
|
| Property | Type | Description |
|
|
75
302
|
|----------|------|-------------|
|
|
76
|
-
| `vf.states` | `string[]` | All discovered state names |
|
|
77
|
-
| `vf.currentState` | `string` |
|
|
78
|
-
| `vf.actions` | `object` | Actions config from JSON |
|
|
79
|
-
| `vf.isPlaying` | `boolean` | Whether an action is currently playing |
|
|
80
|
-
| `vf.currentAction` | `string \| null` | Name of the playing action |
|
|
81
|
-
| `vf.svgElement` | `SVGElement` | The SVG element being animated |
|
|
303
|
+
| `vf.states` | `string[]` | All discovered state names from the SVG. |
|
|
304
|
+
| `vf.currentState` | `string` | The current active state. |
|
|
305
|
+
| `vf.actions` | `object` | Actions config from the JSON. |
|
|
306
|
+
| `vf.isPlaying` | `boolean` | Whether an action is currently playing. |
|
|
307
|
+
| `vf.currentAction` | `string \| null` | Name of the playing action, or `null`. |
|
|
308
|
+
| `vf.svgElement` | `SVGElement` | The SVG element being animated. |
|
|
82
309
|
|
|
83
310
|
### Methods
|
|
84
311
|
|
|
@@ -86,62 +313,103 @@ const vf = new VectorFlow({ svgElement, json });
|
|
|
86
313
|
|--------|---------|-------------|
|
|
87
314
|
| `vf.play(actionName)` | `Promise<void>` | Play a named action. Auto-cancels any running action. |
|
|
88
315
|
| `vf.stop()` | `void` | Cancel current playback immediately. |
|
|
89
|
-
| `vf.on(event, callback)` | `VectorFlow` | Register an event listener. |
|
|
90
|
-
| `vf.off(event, callback)` | `VectorFlow` | Remove an event listener. |
|
|
91
|
-
| `vf.destroy()` | `void` |
|
|
316
|
+
| `vf.on(event, callback)` | `VectorFlow` | Register an event listener (chainable). |
|
|
317
|
+
| `vf.off(event, callback)` | `VectorFlow` | Remove an event listener (chainable). |
|
|
318
|
+
| `vf.destroy()` | `void` | Stop playback, restore original SVG state groups, remove listeners. |
|
|
92
319
|
|
|
93
320
|
### Events
|
|
94
321
|
|
|
95
322
|
| Event | Callback Arg | Description |
|
|
96
323
|
|-------|-------------|-------------|
|
|
97
|
-
| `stateChange` | `string` | Fired after each step completes |
|
|
98
|
-
| `actionStart` | `string` | Fired when an action begins |
|
|
99
|
-
| `actionEnd` | `string` | Fired when an action finishes or is cancelled |
|
|
100
|
-
| `error` | `Error` | Fired on runtime errors |
|
|
324
|
+
| `stateChange` | `string` | Fired after each intermediate step completes (receives the new state name). |
|
|
325
|
+
| `actionStart` | `string` | Fired when an action begins playing. |
|
|
326
|
+
| `actionEnd` | `string` | Fired when an action finishes naturally or is cancelled. |
|
|
327
|
+
| `error` | `Error` | Fired on runtime errors during playback. |
|
|
328
|
+
|
|
329
|
+
```js
|
|
330
|
+
vf.on('stateChange', (state) => {
|
|
331
|
+
console.log('Now in state:', state);
|
|
332
|
+
});
|
|
333
|
+
|
|
334
|
+
vf.on('actionEnd', (actionName) => {
|
|
335
|
+
console.log(`Action "${actionName}" finished`);
|
|
336
|
+
});
|
|
337
|
+
```
|
|
101
338
|
|
|
102
339
|
---
|
|
103
340
|
|
|
104
|
-
##
|
|
341
|
+
## Full Example
|
|
342
|
+
|
|
343
|
+
### SVG (`character.svg`)
|
|
344
|
+
|
|
345
|
+
```xml
|
|
346
|
+
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
|
|
347
|
+
<g id="state_left">
|
|
348
|
+
<rect data-part="body" x="30" y="60" width="50" height="80" rx="8" fill="#e74c3c" />
|
|
349
|
+
<circle data-part="head" cx="55" cy="45" r="18" fill="#f5b041" />
|
|
350
|
+
</g>
|
|
351
|
+
<g id="state_center">
|
|
352
|
+
<rect data-part="body" x="125" y="60" width="50" height="80" rx="8" fill="#3498db" />
|
|
353
|
+
<circle data-part="head" cx="150" cy="45" r="18" fill="#f5b041" />
|
|
354
|
+
</g>
|
|
355
|
+
<g id="state_right">
|
|
356
|
+
<rect data-part="body" x="220" y="60" width="50" height="80" rx="8" fill="#2ecc71" />
|
|
357
|
+
<circle data-part="head" cx="245" cy="45" r="18" fill="#f5b041" />
|
|
358
|
+
</g>
|
|
359
|
+
</svg>
|
|
360
|
+
```
|
|
361
|
+
|
|
362
|
+
### JSON (`character.json`)
|
|
105
363
|
|
|
106
364
|
```json
|
|
107
365
|
{
|
|
108
|
-
"name": "
|
|
366
|
+
"name": "character",
|
|
109
367
|
"initial_state": "center",
|
|
110
|
-
"ms":
|
|
368
|
+
"ms": 150,
|
|
111
369
|
"routes": {
|
|
112
370
|
"left": { "*": ["left"], "right": ["center", "left"] },
|
|
113
371
|
"right": { "*": ["right"], "left": ["center", "right"] },
|
|
114
|
-
"center": { "*": ["center"], "ms":
|
|
372
|
+
"center": { "*": ["center"], "ms": 80 }
|
|
115
373
|
},
|
|
116
374
|
"actions": {
|
|
117
|
-
"left":
|
|
118
|
-
"right":
|
|
119
|
-
"
|
|
120
|
-
"
|
|
375
|
+
"go-left": { "type": "sequence", "order": ["left"] },
|
|
376
|
+
"go-right": { "type": "sequence", "order": ["right"] },
|
|
377
|
+
"reset": { "type": "sequence", "order": ["center"] },
|
|
378
|
+
"patrol": {
|
|
379
|
+
"type": "loop",
|
|
380
|
+
"order": ["left", "center", "right", "center"],
|
|
381
|
+
"ms": 100,
|
|
382
|
+
"count": 5
|
|
383
|
+
}
|
|
121
384
|
}
|
|
122
385
|
}
|
|
123
386
|
```
|
|
124
387
|
|
|
125
|
-
|
|
388
|
+
### JavaScript
|
|
126
389
|
|
|
127
|
-
|
|
390
|
+
```js
|
|
391
|
+
import VectorFlow from '@nitesh-tyagi/vectorflow';
|
|
128
392
|
|
|
129
|
-
|
|
393
|
+
// Load SVG (already in the DOM) and JSON config
|
|
394
|
+
const vf = new VectorFlow({
|
|
395
|
+
svgElement: document.querySelector('#character-svg'),
|
|
396
|
+
json: characterConfig,
|
|
397
|
+
});
|
|
130
398
|
|
|
131
|
-
|
|
399
|
+
// Wire up buttons
|
|
400
|
+
document.querySelector('#btn-left').onclick = () => vf.play('go-left');
|
|
401
|
+
document.querySelector('#btn-right').onclick = () => vf.play('go-right');
|
|
402
|
+
document.querySelector('#btn-reset').onclick = () => vf.play('reset');
|
|
403
|
+
document.querySelector('#btn-patrol').onclick = () => vf.play('patrol');
|
|
404
|
+
document.querySelector('#btn-stop').onclick = () => vf.stop();
|
|
132
405
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
</g>
|
|
141
|
-
<g id="state_right">
|
|
142
|
-
<rect data-part="shape" x="140" y="80" width="40" height="40" fill="green" />
|
|
143
|
-
</g>
|
|
144
|
-
</svg>
|
|
406
|
+
// Listen for state changes
|
|
407
|
+
vf.on('stateChange', (state) => {
|
|
408
|
+
document.querySelector('#current-state').textContent = state;
|
|
409
|
+
});
|
|
410
|
+
|
|
411
|
+
// Clean up when done
|
|
412
|
+
window.addEventListener('beforeunload', () => vf.destroy());
|
|
145
413
|
```
|
|
146
414
|
|
|
147
415
|
---
|
package/dist/vectorflow.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VectorFlow=e():t.VectorFlow=e()}(this,()=>(()=>{"use strict";var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function n(t){if(!t||"none"===t)return null;3===(t=t.trim().replace("#","")).length&&(t=t[0]+t[0]+t[1]+t[1]+t[2]+t[2]);const e=parseInt(t,16);return isNaN(e)?null:{r:e>>16&255,g:e>>8&255,b:255&e}}function r({r:t,g:e,b:n}){const r=t=>Math.round(Math.max(0,Math.min(255,t))).toString(16).padStart(2,"0");return`#${r(t)}${r(e)}${r(n)}`}function o(t,e,n){return t+(e-t)*n}function a(t,e,a){const i=n(t),s=n(e);return i&&s?r({r:o(i.r,s.r,a),g:o(i.g,s.g,a),b:o(i.b,s.b,a)}):e||t||"#000000"}t.d(e,{default:()=>_t});const i=["x","y","width","height","rx","ry","cx","cy","r","opacity"],s=["fill","stroke"];function u(t,e){const n=t.style.getPropertyValue(e);if(n&&"none"!==n)return c(n);const r=t.getAttribute(e);if(r&&"none"!==r)return c(r);const o=window.getComputedStyle(t).getPropertyValue(e);return o&&"none"!==o?c(o):null}function c(t){if(!t||"none"===t)return null;if((t=t.trim()).startsWith("#"))return t;const e=t.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i);if(e)return r({r:parseInt(e[1],10),g:parseInt(e[2],10),b:parseInt(e[3],10)});if("undefined"!=typeof document){const e=document.createElement("canvas").getContext("2d");e.fillStyle=t;const n=e.fillStyle;if(n.startsWith("#"))return n}return t}function l(t){const e={numericAttrs:{},colors:{},transform:null};for(const n of i){const r=t.getAttribute(n);if(null!==r&&""!==r){const t=parseFloat(r);isNaN(t)||(e.numericAttrs[n]=t)}}for(const n of s){const r=u(t,n);r&&(e.colors[n]=r)}const n=t.getAttribute("transform");return n&&(e.transform=n),e}function f(t){const e={translateX:0,translateY:0,scaleX:1,scaleY:1,rotate:0};if(!t)return e;const n=t.match(/translate\(\s*([-\d.]+)\s*[,\s]\s*([-\d.]+)\s*\)/);n&&(e.translateX=parseFloat(n[1]),e.translateY=parseFloat(n[2]));const r=t.match(/scale\(\s*([-\d.]+)(?:\s*[,\s]\s*([-\d.]+))?\s*\)/);r&&(e.scaleX=parseFloat(r[1]),e.scaleY=void 0!==r[2]?parseFloat(r[2]):e.scaleX);const o=t.match(/rotate\(\s*([-\d.]+)/);return o&&(e.rotate=parseFloat(o[1])),e}function d({translateX:t,translateY:e,scaleX:n,scaleY:r,rotate:o}){const a=[];return 0===t&&0===e||a.push(`translate(${t},${e})`),0!==o&&a.push(`rotate(${o})`),1===n&&1===r||a.push(`scale(${n},${r})`),a.length>0?a.join(" "):null}function h(t,e,n){const r=n[t];return r?Array.isArray(r[e])?r[e]:Array.isArray(r["*"])?r["*"]:[t]:[t]}function p(t,e){return t.length>0&&t[0]===e?t.slice(1):t}function m(t,e,n){return"number"==typeof t&&t>0?t:"number"==typeof e&&e>0?e:"number"==typeof n&&n>0?n:120}function g(t,e,n,r,o,a){const i=[];let s=e;for(const e of t){if(a&&!a.has(e))throw new Error(`VectorFlow: State not found in SVG: "${e}"`);const t=p(h(e,s,n),s);for(const e of t){if(a&&!a.has(e))throw new Error(`VectorFlow: State not found in SVG: "${e}"`);const t=n[e]?.ms,u=m(r,t,o);i.push({state:e,ms:u}),s=e}}return{steps:i,finalState:s}}function v(t,e,n,r,o,a){const i=[];let s=e;for(const e of t){if(a&&!a.has(e))throw new Error(`VectorFlow: State not found in SVG: "${e}"`);if(e===s)continue;const t=n[e]?.ms,u=m(r,t,o);i.push({state:e,ms:u}),s=e}return{steps:i,finalState:s}}var y={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},w={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},b=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],_={CSS:{},springs:{}};function M(t,e,n){return Math.min(Math.max(t,e),n)}function S(t,e){return t.indexOf(e)>-1}function x(t,e){return t.apply(null,e)}var E={arr:function(t){return Array.isArray(t)},obj:function(t){return S(Object.prototype.toString.call(t),"Object")},pth:function(t){return E.obj(t)&&t.hasOwnProperty("totalLength")},svg:function(t){return t instanceof SVGElement},inp:function(t){return t instanceof HTMLInputElement},dom:function(t){return t.nodeType||E.svg(t)},str:function(t){return"string"==typeof t},fnc:function(t){return"function"==typeof t},und:function(t){return void 0===t},nil:function(t){return E.und(t)||null===t},hex:function(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)},rgb:function(t){return/^rgb/.test(t)},hsl:function(t){return/^hsl/.test(t)},col:function(t){return E.hex(t)||E.rgb(t)||E.hsl(t)},key:function(t){return!y.hasOwnProperty(t)&&!w.hasOwnProperty(t)&&"targets"!==t&&"keyframes"!==t}};function A(t){var e=/\(([^)]+)\)/.exec(t);return e?e[1].split(",").map(function(t){return parseFloat(t)}):[]}function F(t,e){var n=A(t),r=M(E.und(n[0])?1:n[0],.1,100),o=M(E.und(n[1])?100:n[1],.1,100),a=M(E.und(n[2])?10:n[2],.1,100),i=M(E.und(n[3])?0:n[3],.1,100),s=Math.sqrt(o/r),u=a/(2*Math.sqrt(o*r)),c=u<1?s*Math.sqrt(1-u*u):0,l=u<1?(u*s-i)/c:-i+s;function f(t){var n=e?e*t/1e3:t;return n=u<1?Math.exp(-n*u*s)*(1*Math.cos(c*n)+l*Math.sin(c*n)):(1+l*n)*Math.exp(-n*s),0===t||1===t?t:1-n}return e?f:function(){var e=_.springs[t];if(e)return e;for(var n=1/6,r=0,o=0;;)if(1===f(r+=n)){if(++o>=16)break}else o=0;var a=r*n*1e3;return _.springs[t]=a,a}}function O(t){return void 0===t&&(t=10),function(e){return Math.ceil(M(e,1e-6,1)*t)*(1/t)}}var V,N,P=function(){var t=.1;function e(t,e){return 1-3*e+3*t}function n(t,e){return 3*e-6*t}function r(t){return 3*t}function o(t,o,a){return((e(o,a)*t+n(o,a))*t+r(o))*t}function a(t,o,a){return 3*e(o,a)*t*t+2*n(o,a)*t+r(o)}return function(e,n,r,i){if(0<=e&&e<=1&&0<=r&&r<=1){var s=new Float32Array(11);if(e!==n||r!==i)for(var u=0;u<11;++u)s[u]=o(u*t,e,r);return function(u){return e===n&&r===i||0===u||1===u?u:o(function(n){for(var i=0,u=1;10!==u&&s[u]<=n;++u)i+=t;--u;var c=i+(n-s[u])/(s[u+1]-s[u])*t,l=a(c,e,r);return l>=.001?function(t,e,n,r){for(var i=0;i<4;++i){var s=a(e,n,r);if(0===s)return e;e-=(o(e,n,r)-t)/s}return e}(n,c,e,r):0===l?c:function(t,e,n,r,a){var i,s,u=0;do{(i=o(s=e+(n-e)/2,r,a)-t)>0?n=s:e=s}while(Math.abs(i)>1e-7&&++u<10);return s}(n,i,i+t,e,r)}(u),n,i)}}}}(),C=(V={linear:function(){return function(t){return t}}},N={Sine:function(){return function(t){return 1-Math.cos(t*Math.PI/2)}},Expo:function(){return function(t){return t?Math.pow(2,10*t-10):0}},Circ:function(){return function(t){return 1-Math.sqrt(1-t*t)}},Back:function(){return function(t){return t*t*(3*t-2)}},Bounce:function(){return function(t){for(var e,n=4;t<((e=Math.pow(2,--n))-1)/11;);return 1/Math.pow(4,3-n)-7.5625*Math.pow((3*e-2)/22-t,2)}},Elastic:function(t,e){void 0===t&&(t=1),void 0===e&&(e=.5);var n=M(t,1,10),r=M(e,.1,2);return function(t){return 0===t||1===t?t:-n*Math.pow(2,10*(t-1))*Math.sin((t-1-r/(2*Math.PI)*Math.asin(1/n))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint"].forEach(function(t,e){N[t]=function(){return function(t){return Math.pow(t,e+2)}}}),Object.keys(N).forEach(function(t){var e=N[t];V["easeIn"+t]=e,V["easeOut"+t]=function(t,n){return function(r){return 1-e(t,n)(1-r)}},V["easeInOut"+t]=function(t,n){return function(r){return r<.5?e(t,n)(2*r)/2:1-e(t,n)(-2*r+2)/2}},V["easeOutIn"+t]=function(t,n){return function(r){return r<.5?(1-e(t,n)(1-2*r))/2:(e(t,n)(2*r-1)+1)/2}}}),V);function $(t,e){if(E.fnc(t))return t;var n=t.split("(")[0],r=C[n],o=A(t);switch(n){case"spring":return F(t,e);case"cubicBezier":return x(P,o);case"steps":return x(O,o);default:return x(r,o)}}function j(t){try{return document.querySelectorAll(t)}catch(t){return}}function k(t,e){for(var n=t.length,r=arguments.length>=2?arguments[1]:void 0,o=[],a=0;a<n;a++)if(a in t){var i=t[a];e.call(r,i,a,t)&&o.push(i)}return o}function D(t){return t.reduce(function(t,e){return t.concat(E.arr(e)?D(e):e)},[])}function I(t){return E.arr(t)?t:(E.str(t)&&(t=j(t)||t),t instanceof NodeList||t instanceof HTMLCollection?[].slice.call(t):[t])}function B(t,e){return t.some(function(t){return t===e})}function G(t){var e={};for(var n in t)e[n]=t[n];return e}function T(t,e){var n=G(t);for(var r in t)n[r]=e.hasOwnProperty(r)?e[r]:t[r];return n}function q(t,e){var n=G(t);for(var r in e)n[r]=E.und(t[r])?e[r]:t[r];return n}function X(t){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(t);if(e)return e[1]}function Y(t,e){return E.fnc(t)?t(e.target,e.id,e.total):t}function L(t,e){return t.getAttribute(e)}function H(t,e,n){if(B([n,"deg","rad","turn"],X(e)))return e;var r=_.CSS[e+n];if(!E.und(r))return r;var o=document.createElement(t.tagName),a=t.parentNode&&t.parentNode!==document?t.parentNode:document.body;a.appendChild(o),o.style.position="absolute",o.style.width=100+n;var i=100/o.offsetWidth;a.removeChild(o);var s=i*parseFloat(e);return _.CSS[e+n]=s,s}function J(t,e,n){if(e in t.style){var r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),o=t.style[e]||getComputedStyle(t).getPropertyValue(r)||"0";return n?H(t,o,n):o}}function W(t,e){return E.dom(t)&&!E.inp(t)&&(!E.nil(L(t,e))||E.svg(t)&&t[e])?"attribute":E.dom(t)&&B(b,e)?"transform":E.dom(t)&&"transform"!==e&&J(t,e)?"css":null!=t[e]?"object":void 0}function z(t){if(E.dom(t)){for(var e,n=t.style.transform||"",r=/(\w+)\(([^)]*)\)/g,o=new Map;e=r.exec(n);)o.set(e[1],e[2]);return o}}function Z(t,e,n,r){switch(W(t,e)){case"transform":return function(t,e,n,r){var o=S(e,"scale")?1:0+function(t){return S(t,"translate")||"perspective"===t?"px":S(t,"rotate")||S(t,"skew")?"deg":void 0}(e),a=z(t).get(e)||o;return n&&(n.transforms.list.set(e,a),n.transforms.last=e),r?H(t,a,r):a}(t,e,r,n);case"css":return J(t,e,n);case"attribute":return L(t,e);default:return t[e]||0}}function Q(t,e){var n=/^(\*=|\+=|-=)/.exec(t);if(!n)return t;var r=X(t)||0,o=parseFloat(e),a=parseFloat(t.replace(n[0],""));switch(n[0][0]){case"+":return o+a+r;case"-":return o-a+r;case"*":return o*a+r}}function R(t,e){if(E.col(t))return function(t){return E.rgb(t)?(n=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=t))?"rgba("+n[1]+",1)":e:E.hex(t)?function(t){var e=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(t,e,n,r){return e+e+n+n+r+r}),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return"rgba("+parseInt(n[1],16)+","+parseInt(n[2],16)+","+parseInt(n[3],16)+",1)"}(t):E.hsl(t)?function(t){var e,n,r,o=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(t),a=parseInt(o[1],10)/360,i=parseInt(o[2],10)/100,s=parseInt(o[3],10)/100,u=o[4]||1;function c(t,e,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*(e-t)*n:n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}if(0==i)e=n=r=s;else{var l=s<.5?s*(1+i):s+i-s*i,f=2*s-l;e=c(f,l,a+1/3),n=c(f,l,a),r=c(f,l,a-1/3)}return"rgba("+255*e+","+255*n+","+255*r+","+u+")"}(t):void 0;var e,n}(t);if(/\s/g.test(t))return t;var n=X(t),r=n?t.substr(0,t.length-n.length):t;return e?r+e:r}function U(t,e){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}function K(t){for(var e,n=t.points,r=0,o=0;o<n.numberOfItems;o++){var a=n.getItem(o);o>0&&(r+=U(e,a)),e=a}return r}function tt(t){if(t.getTotalLength)return t.getTotalLength();switch(t.tagName.toLowerCase()){case"circle":return function(t){return 2*Math.PI*L(t,"r")}(t);case"rect":return function(t){return 2*L(t,"width")+2*L(t,"height")}(t);case"line":return function(t){return U({x:L(t,"x1"),y:L(t,"y1")},{x:L(t,"x2"),y:L(t,"y2")})}(t);case"polyline":return K(t);case"polygon":return function(t){var e=t.points;return K(t)+U(e.getItem(e.numberOfItems-1),e.getItem(0))}(t)}}function et(t,e){var n=e||{},r=n.el||function(t){for(var e=t.parentNode;E.svg(e)&&E.svg(e.parentNode);)e=e.parentNode;return e}(t),o=r.getBoundingClientRect(),a=L(r,"viewBox"),i=o.width,s=o.height,u=n.viewBox||(a?a.split(" "):[0,0,i,s]);return{el:r,viewBox:u,x:u[0]/1,y:u[1]/1,w:i,h:s,vW:u[2],vH:u[3]}}function nt(t,e,n){function r(n){void 0===n&&(n=0);var r=e+n>=1?e+n:0;return t.el.getPointAtLength(r)}var o=et(t.el,t.svg),a=r(),i=r(-1),s=r(1),u=n?1:o.w/o.vW,c=n?1:o.h/o.vH;switch(t.property){case"x":return(a.x-o.x)*u;case"y":return(a.y-o.y)*c;case"angle":return 180*Math.atan2(s.y-i.y,s.x-i.x)/Math.PI}}function rt(t,e){var n=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,r=R(E.pth(t)?t.totalLength:t,e)+"";return{original:r,numbers:r.match(n)?r.match(n).map(Number):[0],strings:E.str(t)||e?r.split(n):[]}}function ot(t){return k(t?D(E.arr(t)?t.map(I):I(t)):[],function(t,e,n){return n.indexOf(t)===e})}function at(t){var e=ot(t);return e.map(function(t,n){return{target:t,id:n,total:e.length,transforms:{list:z(t)}}})}function it(t,e){var n=G(e);if(/^spring/.test(n.easing)&&(n.duration=F(n.easing)),E.arr(t)){var r=t.length;2!==r||E.obj(t[0])?E.fnc(e.duration)||(n.duration=e.duration/r):t={value:t}}var o=E.arr(t)?t:[t];return o.map(function(t,n){var r=E.obj(t)&&!E.pth(t)?t:{value:t};return E.und(r.delay)&&(r.delay=n?0:e.delay),E.und(r.endDelay)&&(r.endDelay=n===o.length-1?e.endDelay:0),r}).map(function(t){return q(t,n)})}var st={css:function(t,e,n){return t.style[e]=n},attribute:function(t,e,n){return t.setAttribute(e,n)},object:function(t,e,n){return t[e]=n},transform:function(t,e,n,r,o){if(r.list.set(e,n),e===r.last||o){var a="";r.list.forEach(function(t,e){a+=e+"("+t+") "}),t.style.transform=a}}};function ut(t,e){at(t).forEach(function(t){for(var n in e){var r=Y(e[n],t),o=t.target,a=X(r),i=Z(o,n,a,t),s=Q(R(r,a||X(i)),i),u=W(o,n);st[u](o,n,s,t.transforms,!0)}})}function ct(t,e){return k(D(t.map(function(t){return e.map(function(e){return function(t,e){var n=W(t.target,e.name);if(n){var r=function(t,e){var n;return t.tweens.map(function(r){var o=function(t,e){var n={};for(var r in t){var o=Y(t[r],e);E.arr(o)&&1===(o=o.map(function(t){return Y(t,e)})).length&&(o=o[0]),n[r]=o}return n.duration=parseFloat(n.duration),n.delay=parseFloat(n.delay),n}(r,e),a=o.value,i=E.arr(a)?a[1]:a,s=X(i),u=Z(e.target,t.name,s,e),c=n?n.to.original:u,l=E.arr(a)?a[0]:c,f=X(l)||X(u),d=s||f;return E.und(i)&&(i=c),o.from=rt(l,d),o.to=rt(Q(i,l),d),o.start=n?n.end:0,o.end=o.start+o.delay+o.duration+o.endDelay,o.easing=$(o.easing,o.duration),o.isPath=E.pth(a),o.isPathTargetInsideSVG=o.isPath&&E.svg(e.target),o.isColor=E.col(o.from.original),o.isColor&&(o.round=1),n=o,o})}(e,t),o=r[r.length-1];return{type:n,property:e.name,animatable:t,tweens:r,duration:o.end,delay:r[0].delay,endDelay:o.endDelay}}}(t,e)})})),function(t){return!E.und(t)})}function lt(t,e){var n=t.length,r=function(t){return t.timelineOffset?t.timelineOffset:0},o={};return o.duration=n?Math.max.apply(Math,t.map(function(t){return r(t)+t.duration})):e.duration,o.delay=n?Math.min.apply(Math,t.map(function(t){return r(t)+t.delay})):e.delay,o.endDelay=n?o.duration-Math.max.apply(Math,t.map(function(t){return r(t)+t.duration-t.endDelay})):e.endDelay,o}var ft=0,dt=[],ht=function(){var t;function e(n){for(var r=dt.length,o=0;o<r;){var a=dt[o];a.paused?(dt.splice(o,1),r--):(a.tick(n),o++)}t=o>0?requestAnimationFrame(e):void 0}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){mt.suspendWhenDocumentHidden&&(pt()?t=cancelAnimationFrame(t):(dt.forEach(function(t){return t._onDocumentVisibility()}),ht()))}),function(){t||pt()&&mt.suspendWhenDocumentHidden||!(dt.length>0)||(t=requestAnimationFrame(e))}}();function pt(){return!!document&&document.hidden}function mt(t){void 0===t&&(t={});var e,n=0,r=0,o=0,a=0,i=null;function s(t){var e=window.Promise&&new Promise(function(t){return i=t});return t.finished=e,e}var u=function(t){var e=T(y,t),n=T(w,t),r=function(t,e){var n=[],r=e.keyframes;for(var o in r&&(e=q(function(t){for(var e=k(D(t.map(function(t){return Object.keys(t)})),function(t){return E.key(t)}).reduce(function(t,e){return t.indexOf(e)<0&&t.push(e),t},[]),n={},r=function(r){var o=e[r];n[o]=t.map(function(t){var e={};for(var n in t)E.key(n)?n==o&&(e.value=t[n]):e[n]=t[n];return e})},o=0;o<e.length;o++)r(o);return n}(r),e)),e)E.key(o)&&n.push({name:o,tweens:it(e[o],t)});return n}(n,t),o=at(t.targets),a=ct(o,r),i=lt(a,n),s=ft;return ft++,q(e,{id:s,children:[],animatables:o,animations:a,duration:i.duration,delay:i.delay,endDelay:i.endDelay})}(t);function c(){var t=u.direction;"alternate"!==t&&(u.direction="normal"!==t?"normal":"reverse"),u.reversed=!u.reversed,e.forEach(function(t){return t.reversed=u.reversed})}function l(t){return u.reversed?u.duration-t:t}function f(){n=0,r=l(u.currentTime)*(1/mt.speed)}function d(t,e){e&&e.seek(t-e.timelineOffset)}function h(t){for(var e=0,n=u.animations,r=n.length;e<r;){var o=n[e],a=o.animatable,i=o.tweens,s=i.length-1,c=i[s];s&&(c=k(i,function(e){return t<e.end})[0]||c);for(var l=M(t-c.start-c.delay,0,c.duration)/c.duration,f=isNaN(l)?1:c.easing(l),d=c.to.strings,h=c.round,p=[],m=c.to.numbers.length,g=void 0,v=0;v<m;v++){var y=void 0,w=c.to.numbers[v],b=c.from.numbers[v]||0;y=c.isPath?nt(c.value,f*w,c.isPathTargetInsideSVG):b+f*(w-b),h&&(c.isColor&&v>2||(y=Math.round(y*h)/h)),p.push(y)}var _=d.length;if(_){g=d[0];for(var S=0;S<_;S++){d[S];var x=d[S+1],E=p[S];isNaN(E)||(g+=x?E+x:E+" ")}}else g=p[0];st[o.type](a.target,o.property,g,a.transforms),o.currentValue=g,e++}}function p(t){u[t]&&!u.passThrough&&u[t](u)}function m(t){var f=u.duration,m=u.delay,g=f-u.endDelay,v=l(t);u.progress=M(v/f*100,0,100),u.reversePlayback=v<u.currentTime,e&&function(t){if(u.reversePlayback)for(var n=a;n--;)d(t,e[n]);else for(var r=0;r<a;r++)d(t,e[r])}(v),!u.began&&u.currentTime>0&&(u.began=!0,p("begin")),!u.loopBegan&&u.currentTime>0&&(u.loopBegan=!0,p("loopBegin")),v<=m&&0!==u.currentTime&&h(0),(v>=g&&u.currentTime!==f||!f)&&h(f),v>m&&v<g?(u.changeBegan||(u.changeBegan=!0,u.changeCompleted=!1,p("changeBegin")),p("change"),h(v)):u.changeBegan&&(u.changeCompleted=!0,u.changeBegan=!1,p("changeComplete")),u.currentTime=M(v,0,f),u.began&&p("update"),t>=f&&(r=0,u.remaining&&!0!==u.remaining&&u.remaining--,u.remaining?(n=o,p("loopComplete"),u.loopBegan=!1,"alternate"===u.direction&&c()):(u.paused=!0,u.completed||(u.completed=!0,p("loopComplete"),p("complete"),!u.passThrough&&"Promise"in window&&(i(),s(u)))))}return s(u),u.reset=function(){var t=u.direction;u.passThrough=!1,u.currentTime=0,u.progress=0,u.paused=!0,u.began=!1,u.loopBegan=!1,u.changeBegan=!1,u.completed=!1,u.changeCompleted=!1,u.reversePlayback=!1,u.reversed="reverse"===t,u.remaining=u.loop,e=u.children;for(var n=a=e.length;n--;)u.children[n].reset();(u.reversed&&!0!==u.loop||"alternate"===t&&1===u.loop)&&u.remaining++,h(u.reversed?u.duration:0)},u._onDocumentVisibility=f,u.set=function(t,e){return ut(t,e),u},u.tick=function(t){o=t,n||(n=o),m((o+(r-n))*mt.speed)},u.seek=function(t){m(l(t))},u.pause=function(){u.paused=!0,f()},u.play=function(){u.paused&&(u.completed&&u.reset(),u.paused=!1,dt.push(u),f(),ht())},u.reverse=function(){c(),u.completed=!u.reversed,f()},u.restart=function(){u.reset(),u.play()},u.remove=function(t){vt(ot(t),u)},u.reset(),u.autoplay&&u.play(),u}function gt(t,e){for(var n=e.length;n--;)B(t,e[n].animatable.target)&&e.splice(n,1)}function vt(t,e){var n=e.animations,r=e.children;gt(t,n);for(var o=r.length;o--;){var a=r[o],i=a.animations;gt(t,i),i.length||a.children.length||r.splice(o,1)}n.length||r.length||e.pause()}mt.version="3.2.1",mt.speed=1,mt.suspendWhenDocumentHidden=!0,mt.running=dt,mt.remove=function(t){for(var e=ot(t),n=dt.length;n--;)vt(e,dt[n])},mt.get=Z,mt.set=ut,mt.convertPx=H,mt.path=function(t,e){var n=E.str(t)?j(t)[0]:t,r=e||100;return function(t){return{property:t,el:n,svg:et(n),totalLength:tt(n)*(r/100)}}},mt.setDashoffset=function(t){var e=tt(t);return t.setAttribute("stroke-dasharray",e),e},mt.stagger=function(t,e){void 0===e&&(e={});var n=e.direction||"normal",r=e.easing?$(e.easing):null,o=e.grid,a=e.axis,i=e.from||0,s="first"===i,u="center"===i,c="last"===i,l=E.arr(t),f=l?parseFloat(t[0]):parseFloat(t),d=l?parseFloat(t[1]):0,h=X(l?t[1]:t)||0,p=e.start||0+(l?f:0),m=[],g=0;return function(t,e,v){if(s&&(i=0),u&&(i=(v-1)/2),c&&(i=v-1),!m.length){for(var y=0;y<v;y++){if(o){var w=u?(o[0]-1)/2:i%o[0],b=u?(o[1]-1)/2:Math.floor(i/o[0]),_=w-y%o[0],M=b-Math.floor(y/o[0]),S=Math.sqrt(_*_+M*M);"x"===a&&(S=-_),"y"===a&&(S=-M),m.push(S)}else m.push(Math.abs(i-y));g=Math.max.apply(Math,m)}r&&(m=m.map(function(t){return r(t/g)*g})),"reverse"===n&&(m=m.map(function(t){return a?t<0?-1*t:-t:Math.abs(g-t)}))}return p+(l?(d-f)/g:f)*(Math.round(100*m[e])/100)+h}},mt.timeline=function(t){void 0===t&&(t={});var e=mt(t);return e.duration=0,e.add=function(n,r){var o=dt.indexOf(e),a=e.children;function i(t){t.passThrough=!0}o>-1&&dt.splice(o,1);for(var s=0;s<a.length;s++)i(a[s]);var u=q(n,T(w,t));u.targets=u.targets||t.targets;var c=e.duration;u.autoplay=!1,u.direction=e.direction,u.timelineOffset=E.und(r)?c:Q(r,c),i(e),e.seek(u.timelineOffset);var l=mt(u);i(l),a.push(l);var f=lt(a,t);return e.delay=f.delay,e.endDelay=f.endDelay,e.duration=f.duration,e.seek(0),e.reset(),e.autoplay&&e.play(),e},e},mt.easing=$,mt.penner=C,mt.random=function(t,e){return Math.floor(Math.random()*(e-t+1))+t};const yt=mt;function wt(t,e,n,r){return new Promise((i,s)=>{if(r?.aborted)return void s(new DOMException("Aborted","AbortError"));const u=[];let c=0;const h=t.size;if(0===h)return void i();for(const[r,s]of t){const t=e.get(r);if(!t)continue;const p=l(s),m={targets:s,duration:n,easing:"linear",complete:()=>{c++,c>=h&&i()}};for(const[e,n]of Object.entries(t.numericAttrs))(p.numericAttrs[e]??n)!==n&&(m[e]=n);const g=[];for(const[e,n]of Object.entries(t.colors)){const t=p.colors[e];t&&t!==n?g.push({prop:e,from:t,to:n}):!t&&n&&s.style.setProperty(e,n)}let v=null;if(t.transform||p.transform){const e=f(p.transform),n=f(t.transform);JSON.stringify(e)!==JSON.stringify(n)&&(v={from:e,to:n})}if(g.length>0||v){const t={t:0},e=yt({targets:t,t:1,duration:n,easing:"linear",update:()=>{const e=t.t;for(const{prop:t,from:n,to:r}of g){const o=a(n,r,e);s.style.setProperty(t,o)}if(v){const{from:t,to:n}=v,r=d({translateX:o(t.translateX,n.translateX,e),translateY:o(t.translateY,n.translateY,e),scaleX:o(t.scaleX,n.scaleX,e),scaleY:o(t.scaleY,n.scaleY,e),rotate:o(t.rotate,n.rotate,e)});r?s.setAttribute("transform",r):s.removeAttribute("transform")}}});u.push(e)}if(Object.keys(m).some(t=>!["targets","duration","easing","complete"].includes(t))){const t=yt(m);u.push(t)}else m.complete()}r&&r.addEventListener("abort",()=>{for(const t of u)yt.remove(t.targets||t),t.pause&&t.pause();s(new DOMException("Aborted","AbortError"))},{once:!0})})}async function bt(t,e,n,r,o){let a=null;for(const i of t){if(r?.aborted)throw new DOMException("Aborted","AbortError");const t=n.get(i.state);if(!t)throw new Error(`VectorFlow: No snapshots for state "${i.state}"`);await wt(e,t,i.ms,r),a=i.state,o&&o(i.state)}return a}const _t=class{constructor({svgElement:t,json:e}){if(this._listeners={stateChange:[],actionStart:[],actionEnd:[],error:[]},this._abortController=null,this._currentActionName=null,this._config=function(t){let e;if("string"==typeof t)try{e=JSON.parse(t)}catch(t){throw new Error(`VectorFlow: Invalid JSON — ${t.message}`)}else{if("object"!=typeof t||null===t)throw new Error("VectorFlow: JSON input must be a string or object");e=t}if(!e.initial_state||"string"!=typeof e.initial_state)throw new Error('VectorFlow: JSON must have a string "initial_state" field');if(!e.routes||"object"!=typeof e.routes)throw new Error('VectorFlow: JSON must have a "routes" object');if(!e.actions||"object"!=typeof e.actions)throw new Error('VectorFlow: JSON must have an "actions" object');const n="number"==typeof e.ms&&e.ms>0?e.ms:120,r={};for(const[t,n]of Object.entries(e.routes)){if("object"!=typeof n||null===n)throw new Error(`VectorFlow: routes["${t}"] must be an object`);r[t]={};for(const[e,o]of Object.entries(n))if("ms"===e){if("number"!=typeof o)throw new Error(`VectorFlow: routes["${t}"].ms must be a number`);r[t].ms=o}else{if(!Array.isArray(o)||!o.every(t=>"string"==typeof t))throw new Error(`VectorFlow: routes["${t}"]["${e}"] must be an array of strings`);r[t][e]=o}}const o={};for(const[t,n]of Object.entries(e.actions)){const e="loop"===n.type?"loop":"sequence";if(!Array.isArray(n.order)||0===n.order.length){console.warn(`VectorFlow: action "${t}" has no valid order — will be a no-op`),o[t]={type:e,order:[],ms:void 0,count:void 0,mode:void 0};continue}const r="number"==typeof n.ms&&n.ms>0?n.ms:void 0;let a,i;"loop"===e&&(a="number"==typeof n.count&&n.count>0?n.count:99999,i="string"==typeof n.mode?n.mode:void 0),o[t]={type:e,order:n.order,ms:r,count:a,mode:i}}return{name:e.name||"untitled",initial_state:e.initial_state,ms:n,routes:r,actions:o}}(e),"string"==typeof t){const e=document.createElement("div");if(e.innerHTML=t.trim(),this._svgElement=e.querySelector("svg"),!this._svgElement)throw new Error("VectorFlow: Provided SVG string does not contain an <svg> element.")}else{if(!(t instanceof SVGElement))throw new Error("VectorFlow: svgElement must be an SVG DOM element or an SVG string.");this._svgElement=t}if(this._stateMap=function(t){const e=t.querySelectorAll('g[id^="state_"]');if(0===e.length)throw new Error('VectorFlow: No state groups found in SVG. Expected groups with id="state_{name}".');const n=new Map;for(const t of e){const e=t.id.replace(/^state_/,"");e&&n.set(e,t)}if(0===n.size)throw new Error("VectorFlow: No valid state groups found in SVG.");return n}(this._svgElement),this._stateParts=function(t){const e=new Map;let n=null,r=null;for(const[o,a]of t){const t=new Map,i=a.querySelectorAll("[data-part]");for(const e of i){const n=e.getAttribute("data-part");n&&t.set(n,e)}if(0===t.size)throw new Error(`VectorFlow: State "${o}" has no parts (elements with data-part attribute).`);const s=Array.from(t.keys()).sort().join(",");if(null===n)n=s,r=o;else if(s!==n)throw new Error(`VectorFlow: Part mismatch between states. State "${r}" has parts [${n}] but state "${o}" has parts [${s}].`);e.set(o,t)}return e}(this._stateMap),this._validStates=new Set(this._stateMap.keys()),!this._validStates.has(this._config.initial_state)){const t=Array.from(this._validStates).join(", ");throw new Error(`VectorFlow: initial_state "${this._config.initial_state}" not found in SVG. Available states: ${t}`)}this._stateSnapshots=function(t){const e=new Map;for(const[n,r]of t){const t=new Map;for(const[e,n]of r)t.set(e,l(n));e.set(n,t)}return e}(this._stateParts);const{liveGroup:n,liveParts:r}=function(t,e,n){const r=e.get(n);if(!r){const t=Array.from(e.keys()).join(", ");throw new Error(`VectorFlow: initial_state "${n}" not found in SVG. Available states: ${t}`)}const o=t.querySelector("#live_character");o&&o.remove();const a=r.cloneNode(!0);a.id="live_character",a.removeAttribute("style"),a.style.display="",t.appendChild(a);for(const[,t]of e)t.style.display="none";const i=new Map,s=a.querySelectorAll("[data-part]");for(const t of s){const e=t.getAttribute("data-part");e&&i.set(e,t)}return{liveGroup:a,liveParts:i}}(this._svgElement,this._stateMap,this._config.initial_state);this._liveGroup=n,this._liveParts=r,this._currentState=this._config.initial_state}get states(){return Array.from(this._validStates)}get currentState(){return this._currentState}get actions(){return{...this._config.actions}}get svgElement(){return this._svgElement}get isPlaying(){return null!==this._abortController&&!this._abortController.signal.aborted}get currentAction(){return this._currentActionName}async play(t){const e=this._config.actions[t];if(!e){const e=new Error(`VectorFlow: Unknown action "${t}"`);throw this._emit("error",e),e}if(0!==e.order.length){this.stop(),this._abortController=new AbortController,this._currentActionName=t,this._emit("actionStart",t);try{const n=await async function(t,e,n,r,o,a,i,s,u,c){const{expandSequence:l,expandDirect:f}=c;if("loop"===t.type){const c=t.count||99999;let d=e;for(let e=0;e<c;e++){if(s?.aborted)throw new DOMException("Aborted","AbortError");let e;e="direct"===t.mode?f(t.order,d,n,t.ms,r,o):l(t.order,d,n,t.ms,r,o),e.steps.length>0&&(d=await bt(e.steps,a,i,s,u)||d)}return d}{const c=l(t.order,e,n,t.ms,r,o);return c.steps.length>0&&await bt(c.steps,a,i,s,u)||e}}(e,this._currentState,this._config.routes,this._config.ms,this._validStates,this._liveParts,this._stateSnapshots,this._abortController.signal,t=>{this._currentState=t,this._emit("stateChange",t)},{expandSequence:g,expandDirect:v});n&&(this._currentState=n),this._currentActionName=null,this._emit("actionEnd",t)}catch(t){if("AbortError"===t.name)return;throw this._currentActionName=null,this._emit("error",t),t}}else console.warn(`VectorFlow: Action "${t}" has empty order — no-op.`)}stop(){if(this._abortController&&(this._abortController.abort(),this._abortController=null,this._currentActionName)){const t=this._currentActionName;this._currentActionName=null,this._emit("actionEnd",t)}}on(t,e){return this._listeners[t]||(this._listeners[t]=[]),this._listeners[t].push(e),this}off(t,e){return this._listeners[t]&&(this._listeners[t]=this._listeners[t].filter(t=>t!==e)),this}destroy(){if(this.stop(),this._stateMap)for(const[,t]of this._stateMap)t.style.display="";this._liveGroup&&this._liveGroup.parentNode&&this._liveGroup.remove(),this._listeners={stateChange:[],actionStart:[],actionEnd:[],error:[]}}_emit(t,e){if(this._listeners[t])for(const n of this._listeners[t])try{n(e)}catch(e){console.error(`VectorFlow: Error in "${t}" listener:`,e)}}};return e.default})());
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VectorFlow=e():t.VectorFlow=e()}(this,()=>(()=>{"use strict";var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function n(t){if(!t||"none"===t)return null;3===(t=t.trim().replace("#","")).length&&(t=t[0]+t[0]+t[1]+t[1]+t[2]+t[2]);const e=parseInt(t,16);return isNaN(e)?null:{r:e>>16&255,g:e>>8&255,b:255&e}}function r({r:t,g:e,b:n}){const r=t=>Math.round(Math.max(0,Math.min(255,t))).toString(16).padStart(2,"0");return`#${r(t)}${r(e)}${r(n)}`}function o(t,e,n){return t+(e-t)*n}function a(t,e,a){const i=n(t),s=n(e);return i&&s?r({r:o(i.r,s.r,a),g:o(i.g,s.g,a),b:o(i.b,s.b,a)}):e||t||"#000000"}t.d(e,{default:()=>_t});const i=["x","y","width","height","rx","ry","cx","cy","r","opacity"],s=["fill","stroke"];function u(t,e){const n=t.style.getPropertyValue(e);if(n&&"none"!==n)return c(n);const r=t.getAttribute(e);if(r&&"none"!==r)return c(r);const o=window.getComputedStyle(t).getPropertyValue(e);return o&&"none"!==o?c(o):null}function c(t){if(!t||"none"===t)return null;if((t=t.trim()).startsWith("#"))return t;const e=t.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i);if(e)return r({r:parseInt(e[1],10),g:parseInt(e[2],10),b:parseInt(e[3],10)});if("undefined"!=typeof document){const e=document.createElement("canvas").getContext("2d");e.fillStyle=t;const n=e.fillStyle;if(n.startsWith("#"))return n}return t}function l(t){const e={numericAttrs:{},colors:{},transform:null};for(const n of i){const r=t.getAttribute(n);if(null!==r&&""!==r){const t=parseFloat(r);isNaN(t)||(e.numericAttrs[n]=t)}}for(const n of s){const r=u(t,n);r&&(e.colors[n]=r)}const n=t.getAttribute("transform");return n&&(e.transform=n),e}function f(t){const e={translateX:0,translateY:0,scaleX:1,scaleY:1,rotate:0};if(!t)return e;const n=t.match(/translate\(\s*([-\d.]+)\s*[,\s]\s*([-\d.]+)\s*\)/);n&&(e.translateX=parseFloat(n[1]),e.translateY=parseFloat(n[2]));const r=t.match(/scale\(\s*([-\d.]+)(?:\s*[,\s]\s*([-\d.]+))?\s*\)/);r&&(e.scaleX=parseFloat(r[1]),e.scaleY=void 0!==r[2]?parseFloat(r[2]):e.scaleX);const o=t.match(/rotate\(\s*([-\d.]+)/);return o&&(e.rotate=parseFloat(o[1])),e}function d({translateX:t,translateY:e,scaleX:n,scaleY:r,rotate:o}){const a=[];return 0===t&&0===e||a.push(`translate(${t},${e})`),0!==o&&a.push(`rotate(${o})`),1===n&&1===r||a.push(`scale(${n},${r})`),a.length>0?a.join(" "):null}function h(t,e,n){const r=n[t];return r?Array.isArray(r[e])?r[e]:Array.isArray(r["*"])?r["*"]:[t]:[t]}function p(t,e){return t.length>0&&t[0]===e?t.slice(1):t}function m(t,e,n){return"number"==typeof t&&t>0?t:"number"==typeof e&&e>0?e:"number"==typeof n&&n>0?n:120}function g(t,e,n,r,o,a){const i=[];let s=e;for(const e of t){const t=p(h(e,s,n),s);if(0!==t.length)for(const u of t){if(a&&!a.has(u))throw new Error(`VectorFlow: Route "${e}" resolves to unknown state "${u}"`);const t=m(r,n[e]?.ms??n[u]?.ms,o);i.push({state:u,ms:t}),s=u}}return{steps:i,finalState:s}}function v(t,e,n,r,o,a){const i=[];let s=e;for(const e of t){const t=h(e,s,n),u=t[t.length-1];if(a&&!a.has(u))throw new Error(`VectorFlow: Route "${e}" resolves to unknown state "${u}"`);if(u===s)continue;const c=m(r,n[e]?.ms??n[u]?.ms,o);i.push({state:u,ms:c}),s=u}return{steps:i,finalState:s}}var y={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},w={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},b=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],_={CSS:{},springs:{}};function M(t,e,n){return Math.min(Math.max(t,e),n)}function x(t,e){return t.indexOf(e)>-1}function A(t,e){return t.apply(null,e)}var E={arr:function(t){return Array.isArray(t)},obj:function(t){return x(Object.prototype.toString.call(t),"Object")},pth:function(t){return E.obj(t)&&t.hasOwnProperty("totalLength")},svg:function(t){return t instanceof SVGElement},inp:function(t){return t instanceof HTMLInputElement},dom:function(t){return t.nodeType||E.svg(t)},str:function(t){return"string"==typeof t},fnc:function(t){return"function"==typeof t},und:function(t){return void 0===t},nil:function(t){return E.und(t)||null===t},hex:function(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)},rgb:function(t){return/^rgb/.test(t)},hsl:function(t){return/^hsl/.test(t)},col:function(t){return E.hex(t)||E.rgb(t)||E.hsl(t)},key:function(t){return!y.hasOwnProperty(t)&&!w.hasOwnProperty(t)&&"targets"!==t&&"keyframes"!==t}};function S(t){var e=/\(([^)]+)\)/.exec(t);return e?e[1].split(",").map(function(t){return parseFloat(t)}):[]}function F(t,e){var n=S(t),r=M(E.und(n[0])?1:n[0],.1,100),o=M(E.und(n[1])?100:n[1],.1,100),a=M(E.und(n[2])?10:n[2],.1,100),i=M(E.und(n[3])?0:n[3],.1,100),s=Math.sqrt(o/r),u=a/(2*Math.sqrt(o*r)),c=u<1?s*Math.sqrt(1-u*u):0,l=u<1?(u*s-i)/c:-i+s;function f(t){var n=e?e*t/1e3:t;return n=u<1?Math.exp(-n*u*s)*(1*Math.cos(c*n)+l*Math.sin(c*n)):(1+l*n)*Math.exp(-n*s),0===t||1===t?t:1-n}return e?f:function(){var e=_.springs[t];if(e)return e;for(var n=1/6,r=0,o=0;;)if(1===f(r+=n)){if(++o>=16)break}else o=0;var a=r*n*1e3;return _.springs[t]=a,a}}function O(t){return void 0===t&&(t=10),function(e){return Math.ceil(M(e,1e-6,1)*t)*(1/t)}}var V,N,P=function(){var t=.1;function e(t,e){return 1-3*e+3*t}function n(t,e){return 3*e-6*t}function r(t){return 3*t}function o(t,o,a){return((e(o,a)*t+n(o,a))*t+r(o))*t}function a(t,o,a){return 3*e(o,a)*t*t+2*n(o,a)*t+r(o)}return function(e,n,r,i){if(0<=e&&e<=1&&0<=r&&r<=1){var s=new Float32Array(11);if(e!==n||r!==i)for(var u=0;u<11;++u)s[u]=o(u*t,e,r);return function(u){return e===n&&r===i||0===u||1===u?u:o(function(n){for(var i=0,u=1;10!==u&&s[u]<=n;++u)i+=t;--u;var c=i+(n-s[u])/(s[u+1]-s[u])*t,l=a(c,e,r);return l>=.001?function(t,e,n,r){for(var i=0;i<4;++i){var s=a(e,n,r);if(0===s)return e;e-=(o(e,n,r)-t)/s}return e}(n,c,e,r):0===l?c:function(t,e,n,r,a){var i,s,u=0;do{(i=o(s=e+(n-e)/2,r,a)-t)>0?n=s:e=s}while(Math.abs(i)>1e-7&&++u<10);return s}(n,i,i+t,e,r)}(u),n,i)}}}}(),C=(V={linear:function(){return function(t){return t}}},N={Sine:function(){return function(t){return 1-Math.cos(t*Math.PI/2)}},Expo:function(){return function(t){return t?Math.pow(2,10*t-10):0}},Circ:function(){return function(t){return 1-Math.sqrt(1-t*t)}},Back:function(){return function(t){return t*t*(3*t-2)}},Bounce:function(){return function(t){for(var e,n=4;t<((e=Math.pow(2,--n))-1)/11;);return 1/Math.pow(4,3-n)-7.5625*Math.pow((3*e-2)/22-t,2)}},Elastic:function(t,e){void 0===t&&(t=1),void 0===e&&(e=.5);var n=M(t,1,10),r=M(e,.1,2);return function(t){return 0===t||1===t?t:-n*Math.pow(2,10*(t-1))*Math.sin((t-1-r/(2*Math.PI)*Math.asin(1/n))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint"].forEach(function(t,e){N[t]=function(){return function(t){return Math.pow(t,e+2)}}}),Object.keys(N).forEach(function(t){var e=N[t];V["easeIn"+t]=e,V["easeOut"+t]=function(t,n){return function(r){return 1-e(t,n)(1-r)}},V["easeInOut"+t]=function(t,n){return function(r){return r<.5?e(t,n)(2*r)/2:1-e(t,n)(-2*r+2)/2}},V["easeOutIn"+t]=function(t,n){return function(r){return r<.5?(1-e(t,n)(1-2*r))/2:(e(t,n)(2*r-1)+1)/2}}}),V);function $(t,e){if(E.fnc(t))return t;var n=t.split("(")[0],r=C[n],o=S(t);switch(n){case"spring":return F(t,e);case"cubicBezier":return A(P,o);case"steps":return A(O,o);default:return A(r,o)}}function j(t){try{return document.querySelectorAll(t)}catch(t){return}}function k(t,e){for(var n=t.length,r=arguments.length>=2?arguments[1]:void 0,o=[],a=0;a<n;a++)if(a in t){var i=t[a];e.call(r,i,a,t)&&o.push(i)}return o}function D(t){return t.reduce(function(t,e){return t.concat(E.arr(e)?D(e):e)},[])}function I(t){return E.arr(t)?t:(E.str(t)&&(t=j(t)||t),t instanceof NodeList||t instanceof HTMLCollection?[].slice.call(t):[t])}function B(t,e){return t.some(function(t){return t===e})}function T(t){var e={};for(var n in t)e[n]=t[n];return e}function q(t,e){var n=T(t);for(var r in t)n[r]=e.hasOwnProperty(r)?e[r]:t[r];return n}function G(t,e){var n=T(t);for(var r in e)n[r]=E.und(t[r])?e[r]:t[r];return n}function X(t){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(t);if(e)return e[1]}function Y(t,e){return E.fnc(t)?t(e.target,e.id,e.total):t}function L(t,e){return t.getAttribute(e)}function H(t,e,n){if(B([n,"deg","rad","turn"],X(e)))return e;var r=_.CSS[e+n];if(!E.und(r))return r;var o=document.createElement(t.tagName),a=t.parentNode&&t.parentNode!==document?t.parentNode:document.body;a.appendChild(o),o.style.position="absolute",o.style.width=100+n;var i=100/o.offsetWidth;a.removeChild(o);var s=i*parseFloat(e);return _.CSS[e+n]=s,s}function J(t,e,n){if(e in t.style){var r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),o=t.style[e]||getComputedStyle(t).getPropertyValue(r)||"0";return n?H(t,o,n):o}}function W(t,e){return E.dom(t)&&!E.inp(t)&&(!E.nil(L(t,e))||E.svg(t)&&t[e])?"attribute":E.dom(t)&&B(b,e)?"transform":E.dom(t)&&"transform"!==e&&J(t,e)?"css":null!=t[e]?"object":void 0}function z(t){if(E.dom(t)){for(var e,n=t.style.transform||"",r=/(\w+)\(([^)]*)\)/g,o=new Map;e=r.exec(n);)o.set(e[1],e[2]);return o}}function Z(t,e,n,r){switch(W(t,e)){case"transform":return function(t,e,n,r){var o=x(e,"scale")?1:0+function(t){return x(t,"translate")||"perspective"===t?"px":x(t,"rotate")||x(t,"skew")?"deg":void 0}(e),a=z(t).get(e)||o;return n&&(n.transforms.list.set(e,a),n.transforms.last=e),r?H(t,a,r):a}(t,e,r,n);case"css":return J(t,e,n);case"attribute":return L(t,e);default:return t[e]||0}}function Q(t,e){var n=/^(\*=|\+=|-=)/.exec(t);if(!n)return t;var r=X(t)||0,o=parseFloat(e),a=parseFloat(t.replace(n[0],""));switch(n[0][0]){case"+":return o+a+r;case"-":return o-a+r;case"*":return o*a+r}}function R(t,e){if(E.col(t))return function(t){return E.rgb(t)?(n=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=t))?"rgba("+n[1]+",1)":e:E.hex(t)?function(t){var e=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(t,e,n,r){return e+e+n+n+r+r}),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return"rgba("+parseInt(n[1],16)+","+parseInt(n[2],16)+","+parseInt(n[3],16)+",1)"}(t):E.hsl(t)?function(t){var e,n,r,o=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(t),a=parseInt(o[1],10)/360,i=parseInt(o[2],10)/100,s=parseInt(o[3],10)/100,u=o[4]||1;function c(t,e,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*(e-t)*n:n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}if(0==i)e=n=r=s;else{var l=s<.5?s*(1+i):s+i-s*i,f=2*s-l;e=c(f,l,a+1/3),n=c(f,l,a),r=c(f,l,a-1/3)}return"rgba("+255*e+","+255*n+","+255*r+","+u+")"}(t):void 0;var e,n}(t);if(/\s/g.test(t))return t;var n=X(t),r=n?t.substr(0,t.length-n.length):t;return e?r+e:r}function U(t,e){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}function K(t){for(var e,n=t.points,r=0,o=0;o<n.numberOfItems;o++){var a=n.getItem(o);o>0&&(r+=U(e,a)),e=a}return r}function tt(t){if(t.getTotalLength)return t.getTotalLength();switch(t.tagName.toLowerCase()){case"circle":return function(t){return 2*Math.PI*L(t,"r")}(t);case"rect":return function(t){return 2*L(t,"width")+2*L(t,"height")}(t);case"line":return function(t){return U({x:L(t,"x1"),y:L(t,"y1")},{x:L(t,"x2"),y:L(t,"y2")})}(t);case"polyline":return K(t);case"polygon":return function(t){var e=t.points;return K(t)+U(e.getItem(e.numberOfItems-1),e.getItem(0))}(t)}}function et(t,e){var n=e||{},r=n.el||function(t){for(var e=t.parentNode;E.svg(e)&&E.svg(e.parentNode);)e=e.parentNode;return e}(t),o=r.getBoundingClientRect(),a=L(r,"viewBox"),i=o.width,s=o.height,u=n.viewBox||(a?a.split(" "):[0,0,i,s]);return{el:r,viewBox:u,x:u[0]/1,y:u[1]/1,w:i,h:s,vW:u[2],vH:u[3]}}function nt(t,e,n){function r(n){void 0===n&&(n=0);var r=e+n>=1?e+n:0;return t.el.getPointAtLength(r)}var o=et(t.el,t.svg),a=r(),i=r(-1),s=r(1),u=n?1:o.w/o.vW,c=n?1:o.h/o.vH;switch(t.property){case"x":return(a.x-o.x)*u;case"y":return(a.y-o.y)*c;case"angle":return 180*Math.atan2(s.y-i.y,s.x-i.x)/Math.PI}}function rt(t,e){var n=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,r=R(E.pth(t)?t.totalLength:t,e)+"";return{original:r,numbers:r.match(n)?r.match(n).map(Number):[0],strings:E.str(t)||e?r.split(n):[]}}function ot(t){return k(t?D(E.arr(t)?t.map(I):I(t)):[],function(t,e,n){return n.indexOf(t)===e})}function at(t){var e=ot(t);return e.map(function(t,n){return{target:t,id:n,total:e.length,transforms:{list:z(t)}}})}function it(t,e){var n=T(e);if(/^spring/.test(n.easing)&&(n.duration=F(n.easing)),E.arr(t)){var r=t.length;2!==r||E.obj(t[0])?E.fnc(e.duration)||(n.duration=e.duration/r):t={value:t}}var o=E.arr(t)?t:[t];return o.map(function(t,n){var r=E.obj(t)&&!E.pth(t)?t:{value:t};return E.und(r.delay)&&(r.delay=n?0:e.delay),E.und(r.endDelay)&&(r.endDelay=n===o.length-1?e.endDelay:0),r}).map(function(t){return G(t,n)})}var st={css:function(t,e,n){return t.style[e]=n},attribute:function(t,e,n){return t.setAttribute(e,n)},object:function(t,e,n){return t[e]=n},transform:function(t,e,n,r,o){if(r.list.set(e,n),e===r.last||o){var a="";r.list.forEach(function(t,e){a+=e+"("+t+") "}),t.style.transform=a}}};function ut(t,e){at(t).forEach(function(t){for(var n in e){var r=Y(e[n],t),o=t.target,a=X(r),i=Z(o,n,a,t),s=Q(R(r,a||X(i)),i),u=W(o,n);st[u](o,n,s,t.transforms,!0)}})}function ct(t,e){return k(D(t.map(function(t){return e.map(function(e){return function(t,e){var n=W(t.target,e.name);if(n){var r=function(t,e){var n;return t.tweens.map(function(r){var o=function(t,e){var n={};for(var r in t){var o=Y(t[r],e);E.arr(o)&&1===(o=o.map(function(t){return Y(t,e)})).length&&(o=o[0]),n[r]=o}return n.duration=parseFloat(n.duration),n.delay=parseFloat(n.delay),n}(r,e),a=o.value,i=E.arr(a)?a[1]:a,s=X(i),u=Z(e.target,t.name,s,e),c=n?n.to.original:u,l=E.arr(a)?a[0]:c,f=X(l)||X(u),d=s||f;return E.und(i)&&(i=c),o.from=rt(l,d),o.to=rt(Q(i,l),d),o.start=n?n.end:0,o.end=o.start+o.delay+o.duration+o.endDelay,o.easing=$(o.easing,o.duration),o.isPath=E.pth(a),o.isPathTargetInsideSVG=o.isPath&&E.svg(e.target),o.isColor=E.col(o.from.original),o.isColor&&(o.round=1),n=o,o})}(e,t),o=r[r.length-1];return{type:n,property:e.name,animatable:t,tweens:r,duration:o.end,delay:r[0].delay,endDelay:o.endDelay}}}(t,e)})})),function(t){return!E.und(t)})}function lt(t,e){var n=t.length,r=function(t){return t.timelineOffset?t.timelineOffset:0},o={};return o.duration=n?Math.max.apply(Math,t.map(function(t){return r(t)+t.duration})):e.duration,o.delay=n?Math.min.apply(Math,t.map(function(t){return r(t)+t.delay})):e.delay,o.endDelay=n?o.duration-Math.max.apply(Math,t.map(function(t){return r(t)+t.duration-t.endDelay})):e.endDelay,o}var ft=0,dt=[],ht=function(){var t;function e(n){for(var r=dt.length,o=0;o<r;){var a=dt[o];a.paused?(dt.splice(o,1),r--):(a.tick(n),o++)}t=o>0?requestAnimationFrame(e):void 0}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){mt.suspendWhenDocumentHidden&&(pt()?t=cancelAnimationFrame(t):(dt.forEach(function(t){return t._onDocumentVisibility()}),ht()))}),function(){t||pt()&&mt.suspendWhenDocumentHidden||!(dt.length>0)||(t=requestAnimationFrame(e))}}();function pt(){return!!document&&document.hidden}function mt(t){void 0===t&&(t={});var e,n=0,r=0,o=0,a=0,i=null;function s(t){var e=window.Promise&&new Promise(function(t){return i=t});return t.finished=e,e}var u=function(t){var e=q(y,t),n=q(w,t),r=function(t,e){var n=[],r=e.keyframes;for(var o in r&&(e=G(function(t){for(var e=k(D(t.map(function(t){return Object.keys(t)})),function(t){return E.key(t)}).reduce(function(t,e){return t.indexOf(e)<0&&t.push(e),t},[]),n={},r=function(r){var o=e[r];n[o]=t.map(function(t){var e={};for(var n in t)E.key(n)?n==o&&(e.value=t[n]):e[n]=t[n];return e})},o=0;o<e.length;o++)r(o);return n}(r),e)),e)E.key(o)&&n.push({name:o,tweens:it(e[o],t)});return n}(n,t),o=at(t.targets),a=ct(o,r),i=lt(a,n),s=ft;return ft++,G(e,{id:s,children:[],animatables:o,animations:a,duration:i.duration,delay:i.delay,endDelay:i.endDelay})}(t);function c(){var t=u.direction;"alternate"!==t&&(u.direction="normal"!==t?"normal":"reverse"),u.reversed=!u.reversed,e.forEach(function(t){return t.reversed=u.reversed})}function l(t){return u.reversed?u.duration-t:t}function f(){n=0,r=l(u.currentTime)*(1/mt.speed)}function d(t,e){e&&e.seek(t-e.timelineOffset)}function h(t){for(var e=0,n=u.animations,r=n.length;e<r;){var o=n[e],a=o.animatable,i=o.tweens,s=i.length-1,c=i[s];s&&(c=k(i,function(e){return t<e.end})[0]||c);for(var l=M(t-c.start-c.delay,0,c.duration)/c.duration,f=isNaN(l)?1:c.easing(l),d=c.to.strings,h=c.round,p=[],m=c.to.numbers.length,g=void 0,v=0;v<m;v++){var y=void 0,w=c.to.numbers[v],b=c.from.numbers[v]||0;y=c.isPath?nt(c.value,f*w,c.isPathTargetInsideSVG):b+f*(w-b),h&&(c.isColor&&v>2||(y=Math.round(y*h)/h)),p.push(y)}var _=d.length;if(_){g=d[0];for(var x=0;x<_;x++){d[x];var A=d[x+1],E=p[x];isNaN(E)||(g+=A?E+A:E+" ")}}else g=p[0];st[o.type](a.target,o.property,g,a.transforms),o.currentValue=g,e++}}function p(t){u[t]&&!u.passThrough&&u[t](u)}function m(t){var f=u.duration,m=u.delay,g=f-u.endDelay,v=l(t);u.progress=M(v/f*100,0,100),u.reversePlayback=v<u.currentTime,e&&function(t){if(u.reversePlayback)for(var n=a;n--;)d(t,e[n]);else for(var r=0;r<a;r++)d(t,e[r])}(v),!u.began&&u.currentTime>0&&(u.began=!0,p("begin")),!u.loopBegan&&u.currentTime>0&&(u.loopBegan=!0,p("loopBegin")),v<=m&&0!==u.currentTime&&h(0),(v>=g&&u.currentTime!==f||!f)&&h(f),v>m&&v<g?(u.changeBegan||(u.changeBegan=!0,u.changeCompleted=!1,p("changeBegin")),p("change"),h(v)):u.changeBegan&&(u.changeCompleted=!0,u.changeBegan=!1,p("changeComplete")),u.currentTime=M(v,0,f),u.began&&p("update"),t>=f&&(r=0,u.remaining&&!0!==u.remaining&&u.remaining--,u.remaining?(n=o,p("loopComplete"),u.loopBegan=!1,"alternate"===u.direction&&c()):(u.paused=!0,u.completed||(u.completed=!0,p("loopComplete"),p("complete"),!u.passThrough&&"Promise"in window&&(i(),s(u)))))}return s(u),u.reset=function(){var t=u.direction;u.passThrough=!1,u.currentTime=0,u.progress=0,u.paused=!0,u.began=!1,u.loopBegan=!1,u.changeBegan=!1,u.completed=!1,u.changeCompleted=!1,u.reversePlayback=!1,u.reversed="reverse"===t,u.remaining=u.loop,e=u.children;for(var n=a=e.length;n--;)u.children[n].reset();(u.reversed&&!0!==u.loop||"alternate"===t&&1===u.loop)&&u.remaining++,h(u.reversed?u.duration:0)},u._onDocumentVisibility=f,u.set=function(t,e){return ut(t,e),u},u.tick=function(t){o=t,n||(n=o),m((o+(r-n))*mt.speed)},u.seek=function(t){m(l(t))},u.pause=function(){u.paused=!0,f()},u.play=function(){u.paused&&(u.completed&&u.reset(),u.paused=!1,dt.push(u),f(),ht())},u.reverse=function(){c(),u.completed=!u.reversed,f()},u.restart=function(){u.reset(),u.play()},u.remove=function(t){vt(ot(t),u)},u.reset(),u.autoplay&&u.play(),u}function gt(t,e){for(var n=e.length;n--;)B(t,e[n].animatable.target)&&e.splice(n,1)}function vt(t,e){var n=e.animations,r=e.children;gt(t,n);for(var o=r.length;o--;){var a=r[o],i=a.animations;gt(t,i),i.length||a.children.length||r.splice(o,1)}n.length||r.length||e.pause()}mt.version="3.2.1",mt.speed=1,mt.suspendWhenDocumentHidden=!0,mt.running=dt,mt.remove=function(t){for(var e=ot(t),n=dt.length;n--;)vt(e,dt[n])},mt.get=Z,mt.set=ut,mt.convertPx=H,mt.path=function(t,e){var n=E.str(t)?j(t)[0]:t,r=e||100;return function(t){return{property:t,el:n,svg:et(n),totalLength:tt(n)*(r/100)}}},mt.setDashoffset=function(t){var e=tt(t);return t.setAttribute("stroke-dasharray",e),e},mt.stagger=function(t,e){void 0===e&&(e={});var n=e.direction||"normal",r=e.easing?$(e.easing):null,o=e.grid,a=e.axis,i=e.from||0,s="first"===i,u="center"===i,c="last"===i,l=E.arr(t),f=l?parseFloat(t[0]):parseFloat(t),d=l?parseFloat(t[1]):0,h=X(l?t[1]:t)||0,p=e.start||0+(l?f:0),m=[],g=0;return function(t,e,v){if(s&&(i=0),u&&(i=(v-1)/2),c&&(i=v-1),!m.length){for(var y=0;y<v;y++){if(o){var w=u?(o[0]-1)/2:i%o[0],b=u?(o[1]-1)/2:Math.floor(i/o[0]),_=w-y%o[0],M=b-Math.floor(y/o[0]),x=Math.sqrt(_*_+M*M);"x"===a&&(x=-_),"y"===a&&(x=-M),m.push(x)}else m.push(Math.abs(i-y));g=Math.max.apply(Math,m)}r&&(m=m.map(function(t){return r(t/g)*g})),"reverse"===n&&(m=m.map(function(t){return a?t<0?-1*t:-t:Math.abs(g-t)}))}return p+(l?(d-f)/g:f)*(Math.round(100*m[e])/100)+h}},mt.timeline=function(t){void 0===t&&(t={});var e=mt(t);return e.duration=0,e.add=function(n,r){var o=dt.indexOf(e),a=e.children;function i(t){t.passThrough=!0}o>-1&&dt.splice(o,1);for(var s=0;s<a.length;s++)i(a[s]);var u=G(n,q(w,t));u.targets=u.targets||t.targets;var c=e.duration;u.autoplay=!1,u.direction=e.direction,u.timelineOffset=E.und(r)?c:Q(r,c),i(e),e.seek(u.timelineOffset);var l=mt(u);i(l),a.push(l);var f=lt(a,t);return e.delay=f.delay,e.endDelay=f.endDelay,e.duration=f.duration,e.seek(0),e.reset(),e.autoplay&&e.play(),e},e},mt.easing=$,mt.penner=C,mt.random=function(t,e){return Math.floor(Math.random()*(e-t+1))+t};const yt=mt;function wt(t,e,n,r){return new Promise((i,s)=>{if(r?.aborted)return void s(new DOMException("Aborted","AbortError"));const u=[];let c=0;const h=t.size;if(0===h)return void i();for(const[r,s]of t){const t=e.get(r);if(!t)continue;const p=l(s),m={targets:s,duration:n,easing:"linear",complete:()=>{c++,c>=h&&i()}};for(const[e,n]of Object.entries(t.numericAttrs))(p.numericAttrs[e]??n)!==n&&(m[e]=n);const g=[];for(const[e,n]of Object.entries(t.colors)){const t=p.colors[e];t&&t!==n?g.push({prop:e,from:t,to:n}):!t&&n&&s.style.setProperty(e,n)}let v=null;if(t.transform||p.transform){const e=f(p.transform),n=f(t.transform);JSON.stringify(e)!==JSON.stringify(n)&&(v={from:e,to:n})}if(g.length>0||v){const t={t:0},e=yt({targets:t,t:1,duration:n,easing:"linear",update:()=>{const e=t.t;for(const{prop:t,from:n,to:r}of g){const o=a(n,r,e);s.style.setProperty(t,o)}if(v){const{from:t,to:n}=v,r=d({translateX:o(t.translateX,n.translateX,e),translateY:o(t.translateY,n.translateY,e),scaleX:o(t.scaleX,n.scaleX,e),scaleY:o(t.scaleY,n.scaleY,e),rotate:o(t.rotate,n.rotate,e)});r?s.setAttribute("transform",r):s.removeAttribute("transform")}}});u.push(e)}if(Object.keys(m).some(t=>!["targets","duration","easing","complete"].includes(t))){const t=yt(m);u.push(t)}else m.complete()}r&&r.addEventListener("abort",()=>{for(const t of u)yt.remove(t.targets||t),t.pause&&t.pause();s(new DOMException("Aborted","AbortError"))},{once:!0})})}async function bt(t,e,n,r,o){let a=null;for(const i of t){if(r?.aborted)throw new DOMException("Aborted","AbortError");const t=n.get(i.state);if(!t)throw new Error(`VectorFlow: No snapshots for state "${i.state}"`);await wt(e,t,i.ms,r),a=i.state,o&&o(i.state)}return a}const _t=class{constructor({svgElement:t,json:e}){if(this._listeners={stateChange:[],actionStart:[],actionEnd:[],error:[]},this._abortController=null,this._currentActionName=null,this._config=function(t){let e;if("string"==typeof t)try{e=JSON.parse(t)}catch(t){throw new Error(`VectorFlow: Invalid JSON — ${t.message}`)}else{if("object"!=typeof t||null===t)throw new Error("VectorFlow: JSON input must be a string or object");e=t}if(!e.initial_state||"string"!=typeof e.initial_state)throw new Error('VectorFlow: JSON must have a string "initial_state" field');if(!e.routes||"object"!=typeof e.routes)throw new Error('VectorFlow: JSON must have a "routes" object');if(!e.actions||"object"!=typeof e.actions)throw new Error('VectorFlow: JSON must have an "actions" object');const n="number"==typeof e.ms&&e.ms>0?e.ms:120,r={};for(const[t,n]of Object.entries(e.routes)){if("object"!=typeof n||null===n)throw new Error(`VectorFlow: routes["${t}"] must be an object`);r[t]={};for(const[e,o]of Object.entries(n))if("ms"===e){if("number"!=typeof o)throw new Error(`VectorFlow: routes["${t}"].ms must be a number`);r[t].ms=o}else{if(!Array.isArray(o)||!o.every(t=>"string"==typeof t))throw new Error(`VectorFlow: routes["${t}"]["${e}"] must be an array of strings`);r[t][e]=o}}const o={};for(const[t,n]of Object.entries(e.actions)){const e="loop"===n.type?"loop":"sequence";if(!Array.isArray(n.order)||0===n.order.length){console.warn(`VectorFlow: action "${t}" has no valid order — will be a no-op`),o[t]={type:e,order:[],ms:void 0,count:void 0,mode:void 0};continue}const r="number"==typeof n.ms&&n.ms>0?n.ms:void 0;let a,i;"loop"===e&&(a="number"==typeof n.count&&n.count>0?n.count:99999,i="string"==typeof n.mode?n.mode:void 0),o[t]={type:e,order:n.order,ms:r,count:a,mode:i}}return{name:e.name||"untitled",initial_state:e.initial_state,ms:n,routes:r,actions:o}}(e),"string"==typeof t){const e=document.createElement("div");if(e.innerHTML=t.trim(),this._svgElement=e.querySelector("svg"),!this._svgElement)throw new Error("VectorFlow: Provided SVG string does not contain an <svg> element.")}else{if(!(t instanceof SVGElement))throw new Error("VectorFlow: svgElement must be an SVG DOM element or an SVG string.");this._svgElement=t}if(this._stateMap=function(t){const e=t.querySelectorAll('g[id^="state_"]');if(0===e.length)throw new Error('VectorFlow: No state groups found in SVG. Expected groups with id="state_{name}".');const n=new Map;for(const t of e){const e=t.id.replace(/^state_/,"");e&&n.set(e,t)}if(0===n.size)throw new Error("VectorFlow: No valid state groups found in SVG.");return n}(this._svgElement),this._stateParts=function(t){const e=new Map;let n=null,r=null;for(const[o,a]of t){const t=new Map,i=a.querySelectorAll("[data-part]");for(const e of i){const n=e.getAttribute("data-part");n&&t.set(n,e)}if(0===t.size)throw new Error(`VectorFlow: State "${o}" has no parts (elements with data-part attribute).`);const s=Array.from(t.keys()).sort().join(",");if(null===n)n=s,r=o;else if(s!==n)throw new Error(`VectorFlow: Part mismatch between states. State "${r}" has parts [${n}] but state "${o}" has parts [${s}].`);e.set(o,t)}return e}(this._stateMap),this._validStates=new Set(this._stateMap.keys()),!this._validStates.has(this._config.initial_state)){const t=Array.from(this._validStates).join(", ");throw new Error(`VectorFlow: initial_state "${this._config.initial_state}" not found in SVG. Available states: ${t}`)}this._stateSnapshots=function(t){const e=new Map;for(const[n,r]of t){const t=new Map;for(const[e,n]of r)t.set(e,l(n));e.set(n,t)}return e}(this._stateParts);const{liveGroup:n,liveParts:r}=function(t,e,n){const r=e.get(n);if(!r){const t=Array.from(e.keys()).join(", ");throw new Error(`VectorFlow: initial_state "${n}" not found in SVG. Available states: ${t}`)}const o=t.querySelector("#live_character");o&&o.remove();const a=r.cloneNode(!0);a.id="live_character",a.removeAttribute("style"),a.style.display="",t.appendChild(a);for(const[,t]of e)t.style.display="none";const i=new Map,s=a.querySelectorAll("[data-part]");for(const t of s){const e=t.getAttribute("data-part");e&&i.set(e,t)}return{liveGroup:a,liveParts:i}}(this._svgElement,this._stateMap,this._config.initial_state);this._liveGroup=n,this._liveParts=r,this._currentState=this._config.initial_state}get states(){return Array.from(this._validStates)}get currentState(){return this._currentState}get actions(){return{...this._config.actions}}get svgElement(){return this._svgElement}get isPlaying(){return null!==this._abortController&&!this._abortController.signal.aborted}get currentAction(){return this._currentActionName}async play(t){const e=this._config.actions[t];if(!e){const e=new Error(`VectorFlow: Unknown action "${t}"`);throw this._emit("error",e),e}if(0!==e.order.length){this.stop(),this._abortController=new AbortController,this._currentActionName=t,this._emit("actionStart",t);try{const n=await async function(t,e,n,r,o,a,i,s,u,c){const{expandSequence:l,expandDirect:f}=c;if("loop"===t.type){const c=t.count||99999;let d=e;for(let e=0;e<c;e++){if(s?.aborted)throw new DOMException("Aborted","AbortError");let e;e="direct"===t.mode?f(t.order,d,n,t.ms,r,o):l(t.order,d,n,t.ms,r,o),e.steps.length>0&&(d=await bt(e.steps,a,i,s,u)||d)}return d}{const c=l(t.order,e,n,t.ms,r,o);return c.steps.length>0&&await bt(c.steps,a,i,s,u)||e}}(e,this._currentState,this._config.routes,this._config.ms,this._validStates,this._liveParts,this._stateSnapshots,this._abortController.signal,t=>{this._currentState=t,this._emit("stateChange",t)},{expandSequence:g,expandDirect:v});n&&(this._currentState=n),this._currentActionName=null,this._emit("actionEnd",t)}catch(t){if("AbortError"===t.name)return;throw this._currentActionName=null,this._emit("error",t),t}}else console.warn(`VectorFlow: Action "${t}" has empty order — no-op.`)}stop(){if(this._abortController&&(this._abortController.abort(),this._abortController=null,this._currentActionName)){const t=this._currentActionName;this._currentActionName=null,this._emit("actionEnd",t)}}on(t,e){return this._listeners[t]||(this._listeners[t]=[]),this._listeners[t].push(e),this}off(t,e){return this._listeners[t]&&(this._listeners[t]=this._listeners[t].filter(t=>t!==e)),this}destroy(){if(this.stop(),this._stateMap)for(const[,t]of this._stateMap)t.style.display="";this._liveGroup&&this._liveGroup.parentNode&&this._liveGroup.remove(),this._listeners={stateChange:[],actionStart:[],actionEnd:[],error:[]}}_emit(t,e){if(this._listeners[t])for(const n of this._listeners[t])try{n(e)}catch(e){console.error(`VectorFlow: Error in "${t}" listener:`,e)}}};return e.default})());
|
|
2
2
|
//# sourceMappingURL=vectorflow.umd.js.map
|