exodeui-angular 0.0.0-stage → 1.0.1
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 +169 -2
- package/dist/index.d.ts +2085 -0
- package/dist/index.js +72 -0
- package/dist/index.mjs +17870 -0
- package/package.json +88 -4
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,2085 @@
|
|
|
1
|
+
import { AfterViewInit } from '@angular/core';
|
|
2
|
+
import { ChangeDetectorRef } from '@angular/core';
|
|
3
|
+
import { ElementRef } from '@angular/core';
|
|
4
|
+
import { EventEmitter } from '@angular/core';
|
|
5
|
+
import { NgZone } from '@angular/core';
|
|
6
|
+
import { OnChanges } from '@angular/core';
|
|
7
|
+
import { OnDestroy } from '@angular/core';
|
|
8
|
+
import { OnInit } from '@angular/core';
|
|
9
|
+
import { SimpleChanges } from '@angular/core';
|
|
10
|
+
|
|
11
|
+
export declare interface Adjustments {
|
|
12
|
+
exposure?: number;
|
|
13
|
+
contrast?: number;
|
|
14
|
+
saturation?: number;
|
|
15
|
+
hue?: number;
|
|
16
|
+
negative?: number;
|
|
17
|
+
temperature?: number;
|
|
18
|
+
tint?: number;
|
|
19
|
+
highlights?: number;
|
|
20
|
+
shadows?: number;
|
|
21
|
+
blur?: number;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export declare type AlignContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'stretch';
|
|
25
|
+
|
|
26
|
+
export declare type AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch';
|
|
27
|
+
|
|
28
|
+
export declare type Alignment = 'Center' | 'TopLeft' | 'TopCenter' | 'TopRight' | 'CenterLeft' | 'CenterRight' | 'BottomLeft' | 'BottomCenter' | 'BottomRight';
|
|
29
|
+
|
|
30
|
+
export declare interface AnalyticsConfig {
|
|
31
|
+
isEnabled: boolean;
|
|
32
|
+
eventName: string;
|
|
33
|
+
triggerType: 'click' | 'hover' | 'visible';
|
|
34
|
+
platforms: {
|
|
35
|
+
ga4: boolean;
|
|
36
|
+
meta: boolean;
|
|
37
|
+
mixpanel: boolean;
|
|
38
|
+
};
|
|
39
|
+
parameters: AnalyticsParameter[];
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export declare interface AnalyticsParameter {
|
|
43
|
+
key: string;
|
|
44
|
+
value: string;
|
|
45
|
+
type: 'literal' | 'variable';
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
declare interface Animation_2 {
|
|
49
|
+
id: string;
|
|
50
|
+
name: string;
|
|
51
|
+
duration: number;
|
|
52
|
+
tracks: Track[];
|
|
53
|
+
playInstances?: PlayInstance[];
|
|
54
|
+
}
|
|
55
|
+
export { Animation_2 as Animation }
|
|
56
|
+
|
|
57
|
+
export declare interface AnimationFlowRule {
|
|
58
|
+
id: string;
|
|
59
|
+
trigger: 'on_load' | 'after_delay' | 'after_anim' | 'on_scroll' | 'manual' | 'variable';
|
|
60
|
+
targetAnimationId: string;
|
|
61
|
+
delay?: number;
|
|
62
|
+
afterAnim?: string;
|
|
63
|
+
conditions?: {
|
|
64
|
+
variable: string;
|
|
65
|
+
operator: string;
|
|
66
|
+
value: any;
|
|
67
|
+
}[];
|
|
68
|
+
subAnimationIds?: string[];
|
|
69
|
+
loop?: boolean;
|
|
70
|
+
conditionVariableId?: string;
|
|
71
|
+
conditionOperator?: string;
|
|
72
|
+
conditionValue?: any;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
declare interface ApiAuthConfig {
|
|
76
|
+
type: ApiAuthType;
|
|
77
|
+
/** bearer token */
|
|
78
|
+
token?: string;
|
|
79
|
+
/** basic auth */
|
|
80
|
+
username?: string;
|
|
81
|
+
password?: string;
|
|
82
|
+
/** for 'header' | 'query' — the name to send the credential under */
|
|
83
|
+
keyName?: string;
|
|
84
|
+
secret?: boolean;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
declare type ApiAuthType = 'none' | 'bearer' | 'basic' | 'header' | 'query';
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* API Variable core.
|
|
91
|
+
*
|
|
92
|
+
* Backs the `Api` state-machine input type: a variable whose value is pulled
|
|
93
|
+
* directly from a URL on an interval, like a normal API caller.
|
|
94
|
+
*
|
|
95
|
+
* This module is deliberately framework-agnostic and dependency-free so the
|
|
96
|
+
* exact same file can be dropped into the editor and every framework runtime
|
|
97
|
+
* (React / Vue / Svelte / Solid / Angular / RN / Vanilla).
|
|
98
|
+
*
|
|
99
|
+
* Security model:
|
|
100
|
+
* - https-only by default, credentials-in-URL rejected, private/loopback/
|
|
101
|
+
* link-local hosts blocked (anti-SSRF).
|
|
102
|
+
* - hard timeout + response-size cap, one in-flight request at a time.
|
|
103
|
+
* - secrets are flagged and can be redacted before a project is exported.
|
|
104
|
+
*/
|
|
105
|
+
declare type ApiHttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
|
|
106
|
+
|
|
107
|
+
/** A single query param or header row. */
|
|
108
|
+
declare interface ApiKeyValue {
|
|
109
|
+
id: string;
|
|
110
|
+
key: string;
|
|
111
|
+
value: string;
|
|
112
|
+
/** Masked in the UI and flagged on export. */
|
|
113
|
+
secret?: boolean;
|
|
114
|
+
enabled?: boolean;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
declare type ApiResultType = 'auto' | 'number' | 'string' | 'boolean' | 'array';
|
|
118
|
+
|
|
119
|
+
declare interface ApiVariableConfig {
|
|
120
|
+
url: string;
|
|
121
|
+
method?: ApiHttpMethod;
|
|
122
|
+
query?: ApiKeyValue[];
|
|
123
|
+
headers?: ApiKeyValue[];
|
|
124
|
+
/** Raw request body (JSON string) for POST/PUT/PATCH. */
|
|
125
|
+
body?: string;
|
|
126
|
+
auth?: ApiAuthConfig;
|
|
127
|
+
/** Dot/bracket path into the JSON response, e.g. `$.data.items[0].price`. Empty = whole payload. */
|
|
128
|
+
path?: string;
|
|
129
|
+
resultType?: ApiResultType;
|
|
130
|
+
/** Poll interval in ms. 0/undefined = manual refresh only. */
|
|
131
|
+
intervalMs?: number;
|
|
132
|
+
/** Request timeout in ms (default 10_000). */
|
|
133
|
+
timeoutMs?: number;
|
|
134
|
+
/** Start polling when the project loads/plays (default true). */
|
|
135
|
+
startOnLoad?: boolean;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
export declare interface Artboard {
|
|
139
|
+
id?: string;
|
|
140
|
+
name: string;
|
|
141
|
+
width: number;
|
|
142
|
+
height: number;
|
|
143
|
+
backgroundColor: string;
|
|
144
|
+
backgroundVisible?: boolean;
|
|
145
|
+
backgroundImage?: string;
|
|
146
|
+
backgroundOpacity?: number;
|
|
147
|
+
opacity?: number;
|
|
148
|
+
x?: number;
|
|
149
|
+
y?: number;
|
|
150
|
+
objects: (ShapeObject | any)[];
|
|
151
|
+
animations: Animation_2[];
|
|
152
|
+
stateMachine?: StateMachine;
|
|
153
|
+
tokens?: DesignTokens;
|
|
154
|
+
physics?: {
|
|
155
|
+
enabled?: boolean;
|
|
156
|
+
gravity?: {
|
|
157
|
+
x: number;
|
|
158
|
+
y: number;
|
|
159
|
+
};
|
|
160
|
+
wind?: {
|
|
161
|
+
x: number;
|
|
162
|
+
y: number;
|
|
163
|
+
};
|
|
164
|
+
timeScale?: number;
|
|
165
|
+
collideWithBounds?: boolean;
|
|
166
|
+
joints?: any[];
|
|
167
|
+
/** Physics Effects for every falling body (see physicsEffects.ts). */
|
|
168
|
+
effects?: PhysicsEffectsConfig;
|
|
169
|
+
};
|
|
170
|
+
layoutProps?: LayoutProps;
|
|
171
|
+
layoutScaleFactor?: number;
|
|
172
|
+
baseWidth?: number;
|
|
173
|
+
baseHeight?: number;
|
|
174
|
+
seo?: SEOConfig;
|
|
175
|
+
startupAnimationId?: string;
|
|
176
|
+
startupSubAnimationIds?: string[];
|
|
177
|
+
animationFlow?: AnimationFlowRule[];
|
|
178
|
+
/** Screen-to-Screen navigation rules (see NavigationRule). */
|
|
179
|
+
navigation?: NavigationRule[];
|
|
180
|
+
stateVariables?: {
|
|
181
|
+
id: string;
|
|
182
|
+
name: string;
|
|
183
|
+
type: 'Boolean' | 'Number' | 'Trigger' | 'RandomNumber' | 'RandomColor';
|
|
184
|
+
value: any;
|
|
185
|
+
min?: number;
|
|
186
|
+
max?: number;
|
|
187
|
+
minAlpha?: number;
|
|
188
|
+
maxAlpha?: number;
|
|
189
|
+
}[];
|
|
190
|
+
lastModified?: number;
|
|
191
|
+
responsive?: ResponsiveConfig;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
export declare interface ArtEffectConfig {
|
|
195
|
+
enabled: boolean;
|
|
196
|
+
type: ArtEffectType;
|
|
197
|
+
intensity: number;
|
|
198
|
+
speed?: number;
|
|
199
|
+
scale?: number;
|
|
200
|
+
color1?: string;
|
|
201
|
+
color2?: string;
|
|
202
|
+
chaosEnabled?: boolean;
|
|
203
|
+
chaosAmount?: number;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/**
|
|
207
|
+
* Gen Z Art Effects - Inspired by modern design trends
|
|
208
|
+
*/
|
|
209
|
+
export declare type ArtEffectType = 'glitch' | 'halftone' | 'pixelate' | 'noise' | 'acid_gradient' | 'acid_rave' | 'shimmer';
|
|
210
|
+
|
|
211
|
+
export declare const BAR_STYLE_PRESETS: Record<string, {
|
|
212
|
+
label: string;
|
|
213
|
+
colors: string[];
|
|
214
|
+
cardBackground: string;
|
|
215
|
+
cardBorderColor: string;
|
|
216
|
+
gridColor: string;
|
|
217
|
+
axisLabelColor: string;
|
|
218
|
+
legendColor: string;
|
|
219
|
+
barGradient: boolean;
|
|
220
|
+
}>;
|
|
221
|
+
|
|
222
|
+
export declare interface Behavior {
|
|
223
|
+
id: string;
|
|
224
|
+
type: BehaviorType;
|
|
225
|
+
enabled: boolean;
|
|
226
|
+
sensors: BehaviorSensor[];
|
|
227
|
+
settings?: Record<string, any>;
|
|
228
|
+
startTime?: number;
|
|
229
|
+
endTime?: number;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
export declare enum BehaviorSensor {
|
|
233
|
+
Scale = "Scale",
|
|
234
|
+
Opacity = "Opacity",
|
|
235
|
+
RotateZ = "RotateZ",
|
|
236
|
+
RotateX = "RotateX",
|
|
237
|
+
RotateY = "RotateY",
|
|
238
|
+
PositionX = "PositionX",
|
|
239
|
+
PositionY = "PositionY",
|
|
240
|
+
SkewX = "SkewX",
|
|
241
|
+
Blur = "Blur",
|
|
242
|
+
Exposure = "Exposure",
|
|
243
|
+
HueShift = "HueShift",
|
|
244
|
+
Negative = "Negative",
|
|
245
|
+
CornerRadius = "CornerRadius",
|
|
246
|
+
StrokeWidth = "StrokeWidth",
|
|
247
|
+
BoxShadow = "BoxShadow",
|
|
248
|
+
FontSize = "FontSize",
|
|
249
|
+
LetterSpacing = "LetterSpacing"
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
export declare enum BehaviorType {
|
|
253
|
+
Proximity = "Proximity",
|
|
254
|
+
Magnetic = "Magnetic",
|
|
255
|
+
Repel = "Repel",
|
|
256
|
+
Orbit = "Orbit",
|
|
257
|
+
Vortex = "Vortex",
|
|
258
|
+
Fluid = "Fluid",
|
|
259
|
+
Elastic = "Elastic",
|
|
260
|
+
Holographic = "Holographic",
|
|
261
|
+
Sticky = "Sticky",
|
|
262
|
+
Dilation = "Dilation",
|
|
263
|
+
Parallax = "Parallax",
|
|
264
|
+
Noise = "Noise",
|
|
265
|
+
Float = "Float",
|
|
266
|
+
Pulse = "Pulse",
|
|
267
|
+
Draggable = "Draggable",
|
|
268
|
+
Scroll = "Scroll",
|
|
269
|
+
LookAt = "LookAt",
|
|
270
|
+
Glint = "Glint",
|
|
271
|
+
Scan = "Scan",
|
|
272
|
+
Ratchet = "Ratchet",
|
|
273
|
+
Jitter = "Jitter",
|
|
274
|
+
Follower = "Follower",
|
|
275
|
+
Wrap = "Wrap",
|
|
276
|
+
Typewriter = "Typewriter",
|
|
277
|
+
Scramble = "Scramble",
|
|
278
|
+
Wave = "Wave",
|
|
279
|
+
Bounce = "Bounce",
|
|
280
|
+
TextTrail = "TextTrail",
|
|
281
|
+
Reveal3D = "Reveal3D",
|
|
282
|
+
RevealSlide = "RevealSlide",
|
|
283
|
+
RevealBlur = "RevealBlur",
|
|
284
|
+
TextLiquid = "TextLiquid",
|
|
285
|
+
TextVortex = "TextVortex",
|
|
286
|
+
TextExplosion = "TextExplosion",
|
|
287
|
+
TextRain = "TextRain",
|
|
288
|
+
TextGravity = "TextGravity",
|
|
289
|
+
TextMatrix = "TextMatrix",
|
|
290
|
+
TextNeon = "TextNeon",
|
|
291
|
+
TextDissolve = "TextDissolve",
|
|
292
|
+
TextOrganic = "TextOrganic",
|
|
293
|
+
TextBreathe = "TextBreathe",
|
|
294
|
+
TextSpin = "TextSpin",
|
|
295
|
+
TextMagnet = "TextMagnet",
|
|
296
|
+
TextPerspective = "TextPerspective",
|
|
297
|
+
TextMirror = "TextMirror",
|
|
298
|
+
TextFloral = "TextFloral",
|
|
299
|
+
TextSmoke = "TextSmoke",
|
|
300
|
+
TextVariable = "TextVariable",
|
|
301
|
+
TextZing = "TextZing",
|
|
302
|
+
TextElastic = "TextElastic",
|
|
303
|
+
TextGlitch3D = "TextGlitch3D",
|
|
304
|
+
GlitchText = "GlitchText",
|
|
305
|
+
TextCounter = "TextCounter",
|
|
306
|
+
Squash = "Squash",
|
|
307
|
+
Spotlight = "Spotlight",
|
|
308
|
+
Lens = "Lens",
|
|
309
|
+
Gravity = "Gravity",
|
|
310
|
+
Velocity = "Velocity",
|
|
311
|
+
Shear = "Shear",
|
|
312
|
+
LayoutAnimation = "LayoutAnimation",
|
|
313
|
+
SpringChain = "SpringChain",
|
|
314
|
+
ParticleEmitter = "ParticleEmitter",
|
|
315
|
+
StateReactive = "StateReactive",
|
|
316
|
+
Fold = "Fold",
|
|
317
|
+
Crumple = "Crumple"
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
export declare interface BlendAnimation {
|
|
321
|
+
animationId: string;
|
|
322
|
+
position: [number, number];
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
export declare interface Blur {
|
|
326
|
+
amount: number;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
export declare interface BoneIKConfig {
|
|
330
|
+
boneCount: number;
|
|
331
|
+
solver: 'analytic-2bone' | 'ccd';
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
export declare type BoneMode = 'fk' | 'ik' | 'spline';
|
|
335
|
+
|
|
336
|
+
export declare interface BoneObject {
|
|
337
|
+
type: 'Bone';
|
|
338
|
+
id: string;
|
|
339
|
+
name: string;
|
|
340
|
+
transform: Transform;
|
|
341
|
+
geometry: {
|
|
342
|
+
type: 'Bone';
|
|
343
|
+
length: number;
|
|
344
|
+
isTip?: boolean;
|
|
345
|
+
};
|
|
346
|
+
style: Style;
|
|
347
|
+
mode?: BoneMode;
|
|
348
|
+
ikConfig?: BoneIKConfig;
|
|
349
|
+
splineConfig?: BoneSplineConfig;
|
|
350
|
+
opacity?: number;
|
|
351
|
+
visible?: boolean;
|
|
352
|
+
isVisible?: boolean;
|
|
353
|
+
parentId?: string;
|
|
354
|
+
children?: string[];
|
|
355
|
+
options?: any;
|
|
356
|
+
triggers?: Trigger[];
|
|
357
|
+
interactions?: Interaction[];
|
|
358
|
+
constraints?: Constraint[];
|
|
359
|
+
physics?: Physics;
|
|
360
|
+
behaviors?: Behavior[];
|
|
361
|
+
masks?: any[];
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
export declare interface BoneSplineConfig {
|
|
365
|
+
points: {
|
|
366
|
+
x: number;
|
|
367
|
+
y: number;
|
|
368
|
+
}[];
|
|
369
|
+
tension: number;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
export declare interface ComponentEvent {
|
|
373
|
+
objectId: string;
|
|
374
|
+
componentName: string;
|
|
375
|
+
variant: string;
|
|
376
|
+
property: string;
|
|
377
|
+
value: any;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
export declare interface Condition {
|
|
381
|
+
inputId: string;
|
|
382
|
+
op: ConditionOp;
|
|
383
|
+
value?: number | boolean;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
export declare enum ConditionOp {
|
|
387
|
+
Equal = "Equal",
|
|
388
|
+
NotEqual = "NotEqual",
|
|
389
|
+
GreaterThan = "GreaterThan",
|
|
390
|
+
LessThan = "LessThan",
|
|
391
|
+
GreaterEqual = "GreaterEqual",
|
|
392
|
+
LessEqual = "LessEqual",
|
|
393
|
+
IsTrue = "IsTrue",
|
|
394
|
+
IsFalse = "IsFalse"
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
export declare interface Constraint {
|
|
398
|
+
id?: string;
|
|
399
|
+
type: 'Translation' | 'Rotation' | 'Scale' | 'Transform' | 'Distance' | 'IK' | 'FollowPath' | 'FollowPointer';
|
|
400
|
+
targetId: string;
|
|
401
|
+
strength: number;
|
|
402
|
+
copyX?: boolean;
|
|
403
|
+
copyY?: boolean;
|
|
404
|
+
limitX?: {
|
|
405
|
+
enabled: boolean;
|
|
406
|
+
min: number;
|
|
407
|
+
max: number;
|
|
408
|
+
};
|
|
409
|
+
limitY?: {
|
|
410
|
+
enabled: boolean;
|
|
411
|
+
min: number;
|
|
412
|
+
max: number;
|
|
413
|
+
};
|
|
414
|
+
distance?: number;
|
|
415
|
+
mode?: 'clamped' | 'exact' | 'minimum' | 'maximum';
|
|
416
|
+
orient?: boolean;
|
|
417
|
+
offsetRotation?: number;
|
|
418
|
+
offsetX?: number;
|
|
419
|
+
offsetY?: number;
|
|
420
|
+
useSpring?: boolean;
|
|
421
|
+
stiffness?: number;
|
|
422
|
+
damping?: number;
|
|
423
|
+
mass?: number;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
export declare interface DesignTokens {
|
|
427
|
+
colors: Record<string, string>;
|
|
428
|
+
typography: Record<string, {
|
|
429
|
+
fontFamily: string;
|
|
430
|
+
fontSize: number;
|
|
431
|
+
fontWeight: string | number;
|
|
432
|
+
lineHeight?: number;
|
|
433
|
+
}>;
|
|
434
|
+
spacing: Record<string, number>;
|
|
435
|
+
effects: Record<string, any>;
|
|
436
|
+
radii?: Record<string, number>;
|
|
437
|
+
opacities?: Record<string, number>;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
declare interface EventListener_2 {
|
|
441
|
+
id: string;
|
|
442
|
+
objectId: string;
|
|
443
|
+
eventType: string;
|
|
444
|
+
name: string;
|
|
445
|
+
}
|
|
446
|
+
export { EventListener_2 as EventListener }
|
|
447
|
+
|
|
448
|
+
/** Callbacks every framework wrapper can forward to its framework-idiomatic handlers. */
|
|
449
|
+
export declare interface ExodeCanvasCallbacks {
|
|
450
|
+
onReady?: (engine: ExodeUIEngine) => void;
|
|
451
|
+
onTrigger?: (triggerId: string, metadata?: any) => void;
|
|
452
|
+
onInputUpdate?: (inputs: Record<string, any>) => void;
|
|
453
|
+
onComponentChange?: (event: ComponentEvent) => void;
|
|
454
|
+
onToggle?: (id: string, active: boolean) => void;
|
|
455
|
+
onInputChange?: (id: string, value: string) => void;
|
|
456
|
+
onInputFocus?: (id: string) => void;
|
|
457
|
+
onInputBlur?: (id: string) => void;
|
|
458
|
+
onButtonClick?: (id: string, objectId?: string) => void;
|
|
459
|
+
onGraphPointClick?: (graphId: string, point: any) => void;
|
|
460
|
+
onNavigation?: (event: ExodeNavigationEvent) => void;
|
|
461
|
+
onLog?: (message: string, level: 'info' | 'warn' | 'error') => void;
|
|
462
|
+
onLogicUpdate?: (state: any) => void;
|
|
463
|
+
onFPSUpdate?: (fps: number) => void;
|
|
464
|
+
/** Named callbacks matching listeners configured in the Exode editor. */
|
|
465
|
+
callbacks?: Record<string, (...args: any[]) => void>;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
export declare interface ExodeCanvasOptions extends ExodeCanvasCallbacks {
|
|
469
|
+
artboard?: Artboard;
|
|
470
|
+
/** URL to an `.exode` / `.bexode` file, or a JSON string. */
|
|
471
|
+
src?: string;
|
|
472
|
+
/** Pre-read `.bexode` buffer. */
|
|
473
|
+
buffer?: ArrayBuffer | Uint8Array;
|
|
474
|
+
/** Bump to force a reload of the same artboard. */
|
|
475
|
+
revision?: number;
|
|
476
|
+
fit?: Fit;
|
|
477
|
+
alignment?: Alignment;
|
|
478
|
+
layoutScaleFactor?: number;
|
|
479
|
+
autoPlay?: boolean;
|
|
480
|
+
interactive?: boolean;
|
|
481
|
+
preventScroll?: boolean;
|
|
482
|
+
highRefreshRate?: boolean;
|
|
483
|
+
currentTime?: number;
|
|
484
|
+
scrollX?: number;
|
|
485
|
+
scrollY?: number;
|
|
486
|
+
viewportScrollX?: number;
|
|
487
|
+
viewportScrollY?: number;
|
|
488
|
+
mouseX?: number;
|
|
489
|
+
mouseY?: number;
|
|
490
|
+
isMouseDown?: boolean;
|
|
491
|
+
inputs?: Record<string, any>;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
/**
|
|
495
|
+
* ExodeCanvasRuntime owns the engine, the render loop and all DOM listeners for a
|
|
496
|
+
* single canvas element. Every framework package (vanilla, Vue, Solid, Svelte,
|
|
497
|
+
* Angular) drives one of these so behaviour stays identical across frameworks.
|
|
498
|
+
*/
|
|
499
|
+
export declare class ExodeCanvasRuntime {
|
|
500
|
+
readonly engine: ExodeUIEngine;
|
|
501
|
+
private canvas;
|
|
502
|
+
private ctx;
|
|
503
|
+
private opts;
|
|
504
|
+
private rafId;
|
|
505
|
+
private subFrameTimer;
|
|
506
|
+
private lastTime;
|
|
507
|
+
private lastRenderMs;
|
|
508
|
+
private fpsFrames;
|
|
509
|
+
private fpsLastTime;
|
|
510
|
+
private destroyed;
|
|
511
|
+
private eventsAttached;
|
|
512
|
+
private resizeObserver;
|
|
513
|
+
private canvasRect;
|
|
514
|
+
private lastLoadedId;
|
|
515
|
+
private lastRevision;
|
|
516
|
+
private loadToken;
|
|
517
|
+
private artboardState;
|
|
518
|
+
constructor(canvas: HTMLCanvasElement, options?: ExodeCanvasOptions);
|
|
519
|
+
/** Merge new options and apply whichever ones affect the running engine. */
|
|
520
|
+
setOptions(patch: Partial<ExodeCanvasOptions>): void;
|
|
521
|
+
/** Load the artboard from `artboard`, `buffer` or `src`. Safe to call repeatedly. */
|
|
522
|
+
loadArtboard(force?: boolean): Promise<void>;
|
|
523
|
+
/** Start the animation loop. */
|
|
524
|
+
play(): void;
|
|
525
|
+
/** Stop the animation loop (the last frame stays on screen). */
|
|
526
|
+
pause(): void;
|
|
527
|
+
/** Seek to a time in seconds and render that frame immediately. */
|
|
528
|
+
seek(time: number): void;
|
|
529
|
+
/** Recompute the backing buffer size from the canvas CSS size. */
|
|
530
|
+
resize(): void;
|
|
531
|
+
/** Current artboard data, if one has been loaded. */
|
|
532
|
+
getArtboard(): Artboard | null;
|
|
533
|
+
/** Remove every listener and stop the loop. */
|
|
534
|
+
destroy(): void;
|
|
535
|
+
private get interactive();
|
|
536
|
+
private set interactive(value);
|
|
537
|
+
private get listeners();
|
|
538
|
+
private log;
|
|
539
|
+
private invokeNamedListeners;
|
|
540
|
+
private registerCallbacks;
|
|
541
|
+
private applyLayout;
|
|
542
|
+
private applySensors;
|
|
543
|
+
private watchResize;
|
|
544
|
+
private onWindowResize;
|
|
545
|
+
/**
|
|
546
|
+
* Size the backing buffer from the unscaled CSS layout box so ancestor CSS
|
|
547
|
+
* transforms don't shrink the render resolution, while keeping pointer mapping
|
|
548
|
+
* based on the on-screen (possibly scaled) rect.
|
|
549
|
+
*/
|
|
550
|
+
private syncSize;
|
|
551
|
+
private context;
|
|
552
|
+
private renderFrame;
|
|
553
|
+
private tick;
|
|
554
|
+
private loop;
|
|
555
|
+
private toCanvas;
|
|
556
|
+
private pointer;
|
|
557
|
+
private onPointerDown;
|
|
558
|
+
private onPointerMove;
|
|
559
|
+
private onPointerUp;
|
|
560
|
+
private onPointerLeave;
|
|
561
|
+
private onClick;
|
|
562
|
+
private onWheel;
|
|
563
|
+
private onKeyDown;
|
|
564
|
+
private onKeyUp;
|
|
565
|
+
private onWindowKeyDown;
|
|
566
|
+
private onWindowKeyUp;
|
|
567
|
+
private onWindowBlur;
|
|
568
|
+
private onWindowScroll;
|
|
569
|
+
private attachEvents;
|
|
570
|
+
private detachEvents;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
export declare interface ExodeListener {
|
|
574
|
+
objectId: string;
|
|
575
|
+
eventType: string;
|
|
576
|
+
name: string;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
export declare interface ExodeNavigationEvent {
|
|
580
|
+
type: 'artboard' | 'url' | 'back' | 'next';
|
|
581
|
+
value: string;
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
/**
|
|
585
|
+
* ExodeUICanvas Angular Component
|
|
586
|
+
*
|
|
587
|
+
* Usage:
|
|
588
|
+
* ```html
|
|
589
|
+
* <exodeui-canvas
|
|
590
|
+
* [artboard]="myArtboard"
|
|
591
|
+
* fit="Contain"
|
|
592
|
+
* (ready)="onReady($event)"
|
|
593
|
+
* ></exodeui-canvas>
|
|
594
|
+
* ```
|
|
595
|
+
*/
|
|
596
|
+
export declare class ExodeUICanvasComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
|
|
597
|
+
private ngZone;
|
|
598
|
+
private cdr;
|
|
599
|
+
canvasRef: ElementRef<HTMLCanvasElement>;
|
|
600
|
+
artboard?: Artboard;
|
|
601
|
+
src?: string;
|
|
602
|
+
buffer?: ArrayBuffer | Uint8Array;
|
|
603
|
+
fit: Fit;
|
|
604
|
+
alignment: Alignment;
|
|
605
|
+
layoutScaleFactor?: number;
|
|
606
|
+
autoPlay: boolean;
|
|
607
|
+
interactive: boolean;
|
|
608
|
+
preventScroll: boolean;
|
|
609
|
+
highRefreshRate: boolean;
|
|
610
|
+
currentTime?: number;
|
|
611
|
+
revision: number;
|
|
612
|
+
scrollX?: number;
|
|
613
|
+
scrollY?: number;
|
|
614
|
+
viewportScrollX?: number;
|
|
615
|
+
viewportScrollY?: number;
|
|
616
|
+
mouseX?: number;
|
|
617
|
+
mouseY?: number;
|
|
618
|
+
isMouseDown?: boolean;
|
|
619
|
+
inputs?: Record<string, any>;
|
|
620
|
+
callbacks?: Record<string, (...args: any[]) => void>;
|
|
621
|
+
ready: EventEmitter<ExodeUIEngine>;
|
|
622
|
+
trigger: EventEmitter<{
|
|
623
|
+
name: string;
|
|
624
|
+
anim: string;
|
|
625
|
+
}>;
|
|
626
|
+
inputUpdate: EventEmitter<{
|
|
627
|
+
id: string;
|
|
628
|
+
value: any;
|
|
629
|
+
}>;
|
|
630
|
+
componentChange: EventEmitter<ComponentEvent>;
|
|
631
|
+
toggle: EventEmitter<{
|
|
632
|
+
name: string;
|
|
633
|
+
checked: boolean;
|
|
634
|
+
}>;
|
|
635
|
+
inputChange: EventEmitter<{
|
|
636
|
+
name: string;
|
|
637
|
+
text: string;
|
|
638
|
+
}>;
|
|
639
|
+
inputFocus: EventEmitter<string>;
|
|
640
|
+
inputBlur: EventEmitter<string>;
|
|
641
|
+
buttonClick: EventEmitter<{
|
|
642
|
+
name: string;
|
|
643
|
+
objectId: string;
|
|
644
|
+
}>;
|
|
645
|
+
navigation: EventEmitter<ExodeNavigationEvent>;
|
|
646
|
+
graphPointClick: EventEmitter<{
|
|
647
|
+
graphId: string;
|
|
648
|
+
point: any;
|
|
649
|
+
}>;
|
|
650
|
+
log: EventEmitter<{
|
|
651
|
+
message: string;
|
|
652
|
+
level: "info" | "warn" | "error";
|
|
653
|
+
}>;
|
|
654
|
+
logicUpdate: EventEmitter<any>;
|
|
655
|
+
fpsUpdate: EventEmitter<number>;
|
|
656
|
+
private runtime;
|
|
657
|
+
private _mounted;
|
|
658
|
+
joysticks: any[];
|
|
659
|
+
private pressed;
|
|
660
|
+
constructor(ngZone: NgZone, cdr: ChangeDetectorRef);
|
|
661
|
+
/** The runtime engine (available after `ngAfterViewInit`). */
|
|
662
|
+
get engine(): ExodeUIEngine | null;
|
|
663
|
+
ngOnInit(): void;
|
|
664
|
+
ngAfterViewInit(): void;
|
|
665
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
666
|
+
ngOnDestroy(): void;
|
|
667
|
+
getEngine(): ExodeUIEngine | null;
|
|
668
|
+
play(): void;
|
|
669
|
+
pause(): void;
|
|
670
|
+
seek(time: number): void;
|
|
671
|
+
resize(): void;
|
|
672
|
+
setLayout(fit: Fit, alignment?: Alignment, layoutScaleFactor?: number): void;
|
|
673
|
+
setOptions(options: Partial<ExodeCanvasOptions>): void;
|
|
674
|
+
setInputBool(name: string, value: boolean): void;
|
|
675
|
+
setInputNumber(name: string, value: number): void;
|
|
676
|
+
setInputText(name: string, value: string): void;
|
|
677
|
+
fireTrigger(name: string): void;
|
|
678
|
+
updateInput(name: string, value: any): void;
|
|
679
|
+
updateObjectOptions(id: string, opts: any): void;
|
|
680
|
+
updateConstraint(id: string, index: number, props: any): void;
|
|
681
|
+
updateGraphData(nameOrId: string, data: number[] | number[][], categories?: string[]): void;
|
|
682
|
+
getInputValue(nameOrId: string): any;
|
|
683
|
+
padCorner(joystick: any): {
|
|
684
|
+
bottom?: string;
|
|
685
|
+
left?: string;
|
|
686
|
+
right?: string;
|
|
687
|
+
top?: string;
|
|
688
|
+
};
|
|
689
|
+
padButtons(joystick: any): string[];
|
|
690
|
+
buttonStyle(key: string): string;
|
|
691
|
+
pressKey(key: string, event: PointerEvent): void;
|
|
692
|
+
releaseKey(key: string, event?: PointerEvent): void;
|
|
693
|
+
private runtimeOptions;
|
|
694
|
+
private inZone;
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
export declare class ExodeUIEngine {
|
|
698
|
+
private artboard;
|
|
699
|
+
private objectStates;
|
|
700
|
+
private extrusionPoses;
|
|
701
|
+
private trailHistories;
|
|
702
|
+
private physicsEngine;
|
|
703
|
+
private physicsFx;
|
|
704
|
+
private physicsFields;
|
|
705
|
+
private activeStateMachine;
|
|
706
|
+
private inputs;
|
|
707
|
+
viewportScrollX: number;
|
|
708
|
+
viewportScrollY: number;
|
|
709
|
+
setViewportScroll(x: number, y: number): void;
|
|
710
|
+
getInputValue(nameOrId: string): any;
|
|
711
|
+
getInput(nameOrId: string): any;
|
|
712
|
+
private inputNameMap;
|
|
713
|
+
private layerStates;
|
|
714
|
+
private pretextCache;
|
|
715
|
+
private pointerHistory;
|
|
716
|
+
private readonly MAX_HISTORY;
|
|
717
|
+
private imageCache;
|
|
718
|
+
private lastValidSvgImgMap;
|
|
719
|
+
private renderFunctionCache;
|
|
720
|
+
private scriptUpdateCache;
|
|
721
|
+
private scriptEffects;
|
|
722
|
+
private sceneApi;
|
|
723
|
+
private animationCodeFunctionCache;
|
|
724
|
+
private maskBuffer;
|
|
725
|
+
private maskCtx;
|
|
726
|
+
private lumaBuffer;
|
|
727
|
+
private lumaCtx;
|
|
728
|
+
private _noiseTileCanvas;
|
|
729
|
+
private layout;
|
|
730
|
+
private onTrigger?;
|
|
731
|
+
private onInputUpdate?;
|
|
732
|
+
private onComponentChange?;
|
|
733
|
+
private onToggle?;
|
|
734
|
+
private onInputChange?;
|
|
735
|
+
private onInputFocus?;
|
|
736
|
+
private onInputBlur?;
|
|
737
|
+
private onLog?;
|
|
738
|
+
private onButtonClick?;
|
|
739
|
+
private onGraphPointClick?;
|
|
740
|
+
private justFiredTriggers;
|
|
741
|
+
private rootTransform;
|
|
742
|
+
private canvasWidth;
|
|
743
|
+
private canvasHeight;
|
|
744
|
+
/** Backing pixels per layout pixel. Set by the host when the canvas is CSS-scaled
|
|
745
|
+
* (e.g. a preview shrunk to fit) so it can render at its on-screen density. */
|
|
746
|
+
pixelRatio: number | null;
|
|
747
|
+
private getPixelRatio;
|
|
748
|
+
private lastHoveredObjectId;
|
|
749
|
+
/** Physics contacts that started during the last step, dispatched to 'Collision' rules after it. */
|
|
750
|
+
private pendingCollisions;
|
|
751
|
+
/** The other body while a 'Collision' event is being dispatched (null for every other event). */
|
|
752
|
+
private collisionOtherId;
|
|
753
|
+
private _lastPointerPos;
|
|
754
|
+
private _prevPointerPos;
|
|
755
|
+
private _mouseDelta;
|
|
756
|
+
private _hasSpatialConstraintsApplied;
|
|
757
|
+
private focusedId;
|
|
758
|
+
private draggingSliderId;
|
|
759
|
+
private draggingJoystickId;
|
|
760
|
+
/** Per-pointer joystick drags for multi-touch (pointerId -> joystickId). */
|
|
761
|
+
private joystickPointerMap;
|
|
762
|
+
/** Joysticks currently released with spring return — animated back in processJoysticks. */
|
|
763
|
+
private springingJoysticks;
|
|
764
|
+
private activeDropdownId;
|
|
765
|
+
private activeObjectId;
|
|
766
|
+
private draggingListViewId;
|
|
767
|
+
private draggingListViewIsScrollbar;
|
|
768
|
+
scrollOffset: {
|
|
769
|
+
x: number;
|
|
770
|
+
y: number;
|
|
771
|
+
};
|
|
772
|
+
private _totalScroll;
|
|
773
|
+
private draggingBehaviors;
|
|
774
|
+
/** Scene physics makes un-configured shapes bodies only while no object has opted in. */
|
|
775
|
+
private sceneDefaultsAllBodies;
|
|
776
|
+
private dragStartPointer;
|
|
777
|
+
private dragStartPositions;
|
|
778
|
+
private isMouseDown;
|
|
779
|
+
private activeKeys;
|
|
780
|
+
private pressedKeys;
|
|
781
|
+
private graphHoverStates;
|
|
782
|
+
private barChartRenderedBars;
|
|
783
|
+
private pieChartRenderedSlices;
|
|
784
|
+
private _layoutAnimCache;
|
|
785
|
+
private _springChainState;
|
|
786
|
+
private _emitterPools;
|
|
787
|
+
private _cachedObjectMap;
|
|
788
|
+
private _cachedRootObjects;
|
|
789
|
+
private _cachedObjectMapArtboard;
|
|
790
|
+
private _cachedObjectMapCount;
|
|
791
|
+
private objectVelocities;
|
|
792
|
+
private currentTime;
|
|
793
|
+
private frameCount;
|
|
794
|
+
private entranceStartTimes;
|
|
795
|
+
private fontLeadingFactors;
|
|
796
|
+
private onLogicUpdate?;
|
|
797
|
+
private logicNodeValues;
|
|
798
|
+
private logicNodeState;
|
|
799
|
+
private pointerDownTimes;
|
|
800
|
+
private activeHoverIds;
|
|
801
|
+
private onNavigation?;
|
|
802
|
+
private periodicTriggerTimes;
|
|
803
|
+
private wasInView;
|
|
804
|
+
private scrollProgressLastValue;
|
|
805
|
+
setTriggerCallback(cb: (triggerName: string, animationName: string) => void): void;
|
|
806
|
+
/**
|
|
807
|
+
* Bridge handed to custom effects as env.input / env.setInput / env.emit, so
|
|
808
|
+
* code-drawn elements (e.g. items inside a liquid menu) can read state, drive
|
|
809
|
+
* the state machine and report clicks to the app like native objects do.
|
|
810
|
+
* Created once and reused every frame.
|
|
811
|
+
*/
|
|
812
|
+
/**
|
|
813
|
+
* Scene access for effect scripts: keys held, object state, triggers and
|
|
814
|
+
* screen navigation. A CustomEffect whose code defines
|
|
815
|
+
* function update(env, dt) { … }
|
|
816
|
+
* is called every frame with env = { inputs, input, setInput, emit, params,
|
|
817
|
+
* time, state, scene }. env.state is a plain object kept until the next load.
|
|
818
|
+
*/
|
|
819
|
+
private getSceneApi;
|
|
820
|
+
private getLocalPointer;
|
|
821
|
+
private runEffectScripts;
|
|
822
|
+
private getCustomEffectBridge;
|
|
823
|
+
setInputUpdateCallback(cb: (nameOrId: string, value: any) => void): void;
|
|
824
|
+
setComponentChangeCallback(cb: (event: ComponentEvent) => void): void;
|
|
825
|
+
setToggleCallback(cb: (name: string, checked: boolean) => void): void;
|
|
826
|
+
setLogicUpdateCallback(cb: (values: Record<string, any>) => void): void;
|
|
827
|
+
setInputChangeCallback(cb: (name: string, text: string) => void): void;
|
|
828
|
+
setButtonClickCallback(cb: (name: string, objectId: string) => void): void;
|
|
829
|
+
setGraphPointClickCallback(cb: (event: {
|
|
830
|
+
objectId: string;
|
|
831
|
+
componentName: string;
|
|
832
|
+
datasetIndex: number;
|
|
833
|
+
pointIndex: number;
|
|
834
|
+
value: number;
|
|
835
|
+
label: string;
|
|
836
|
+
}) => void): void;
|
|
837
|
+
setNavigationCallback(cb: (target: {
|
|
838
|
+
type: 'artboard' | 'url' | 'back' | 'next';
|
|
839
|
+
value: string;
|
|
840
|
+
}) => void): void;
|
|
841
|
+
private ensurePathPoints;
|
|
842
|
+
private static pathParseCache;
|
|
843
|
+
private svgPathToPoints;
|
|
844
|
+
private parseSvgPath;
|
|
845
|
+
setOnLogCallback(cb: (msg: string) => void): void;
|
|
846
|
+
private debugLog;
|
|
847
|
+
setInputFocusCallback(cb: (name: string) => void): void;
|
|
848
|
+
setInputBlurCallback(cb: (name: string) => void): void;
|
|
849
|
+
updateConstraint(objectId: string, index: number, properties: Partial<Constraint>): void;
|
|
850
|
+
private debug_objectsRendered;
|
|
851
|
+
private debug_objectsTotal;
|
|
852
|
+
private lastRenderTime;
|
|
853
|
+
debugMode: boolean;
|
|
854
|
+
private log;
|
|
855
|
+
private warn;
|
|
856
|
+
constructor();
|
|
857
|
+
private setInternalInput;
|
|
858
|
+
setLayout(fit: Fit, alignment: Alignment, layoutScaleFactor?: number): void;
|
|
859
|
+
getActiveStateIds(layerName?: string): string[];
|
|
860
|
+
getObjectState(id: string): any;
|
|
861
|
+
updateObjectOptions(id: string, newOptions: any): void;
|
|
862
|
+
updateGraphData(nameOrId: string, data: number[] | number[][], categories?: string[]): void;
|
|
863
|
+
updateBarChartData(nameOrId: string, datasets: (number[] | {
|
|
864
|
+
id?: string;
|
|
865
|
+
label?: string;
|
|
866
|
+
data: number[];
|
|
867
|
+
color?: string;
|
|
868
|
+
})[], categories?: string[]): void;
|
|
869
|
+
updatePieChartData(nameOrId: string, slices: (number | {
|
|
870
|
+
id?: string;
|
|
871
|
+
label?: string;
|
|
872
|
+
value: number;
|
|
873
|
+
color?: string;
|
|
874
|
+
})[]): void;
|
|
875
|
+
setDropdownOptions(nameOrId: string, options: string[]): void;
|
|
876
|
+
load(data: Artboard): void;
|
|
877
|
+
/**
|
|
878
|
+
* Pre-loads all images found in the artboard into the image cache.
|
|
879
|
+
* This ensures base64 images from Figma exports are decoded before the first render frame.
|
|
880
|
+
*/
|
|
881
|
+
private preloadImages;
|
|
882
|
+
/**
|
|
883
|
+
* Decompresses strings that were compressed during export.
|
|
884
|
+
* Matches the Editor's optimization pipeline.
|
|
885
|
+
*/
|
|
886
|
+
private decompressStrings;
|
|
887
|
+
/** [API Variables] Live URL-backed inputs, polled on an interval. */
|
|
888
|
+
private apiPollers;
|
|
889
|
+
private startApiPollers;
|
|
890
|
+
private stopApiPollers;
|
|
891
|
+
/** Manually refresh one API variable by id or name. */
|
|
892
|
+
refreshApiVariable(nameOrId: string): void;
|
|
893
|
+
reset(): void;
|
|
894
|
+
private updateAutoLayout;
|
|
895
|
+
private updateViewportInputs;
|
|
896
|
+
/**
|
|
897
|
+
* Per-breakpoint geometry (`object.breakpointGeometry[breakpointId]`): when the
|
|
898
|
+
* artboard width enters another breakpoint, every object takes that
|
|
899
|
+
* breakpoint's position/size/visibility/type, its position keyframes and
|
|
900
|
+
* interaction targets move by the same delta, and spatial constraints measure
|
|
901
|
+
* from that breakpoint's design width. Captured from real layouts (e.g. the
|
|
902
|
+
* HTML converter rendering a page at each width), so each breakpoint matches.
|
|
903
|
+
*/
|
|
904
|
+
private activeGeometryBreakpoint;
|
|
905
|
+
private applyBreakpointGeometry;
|
|
906
|
+
private solveSpatialConstraints;
|
|
907
|
+
private loadFonts;
|
|
908
|
+
private enterStates;
|
|
909
|
+
setInputBool(nameOrId: string, value: boolean): void;
|
|
910
|
+
setInputNumber(nameOrId: string, value: number): void;
|
|
911
|
+
fireTrigger(nameOrId: string): void;
|
|
912
|
+
setInputText(nameOrId: string, value: string): void;
|
|
913
|
+
setInputNumberArray(nameOrId: string, value: number[]): void;
|
|
914
|
+
setInputStringArray(nameOrId: string, value: string[]): void;
|
|
915
|
+
/** Active property tweens and persistent overrides from `applyState` interactions. */
|
|
916
|
+
private interactionTweens;
|
|
917
|
+
private interactionOverrides;
|
|
918
|
+
private readObjectProperty;
|
|
919
|
+
/**
|
|
920
|
+
* `applyState` interaction: optionally set an input, then move a set of object
|
|
921
|
+
* properties to target values over `duration` seconds with `easing`.
|
|
922
|
+
* { action: 'applyState', setInput?: { inputId, value }, duration?, easing?,
|
|
923
|
+
* properties: [{ objectId, property, value }] }
|
|
924
|
+
*/
|
|
925
|
+
private applyInteractionState;
|
|
926
|
+
private stepInteractionStates;
|
|
927
|
+
/** Like updateObjectProperty, but seeds nested containers from the authored object. */
|
|
928
|
+
private writeInteractionProperty;
|
|
929
|
+
updateObjectProperty(id: string, property: string, value: any): void;
|
|
930
|
+
updateInput(nameOrId: string, value: any): void;
|
|
931
|
+
/** Last result per variable-triggered flow rule, for rising-edge firing. */
|
|
932
|
+
private variableRulePassing;
|
|
933
|
+
private evaluateVariableTriggers;
|
|
934
|
+
private evaluateTransitions;
|
|
935
|
+
/**
|
|
936
|
+
* Find a global transition from any state in the layer whose conditions are met.
|
|
937
|
+
* This allows inputs to act as "global listeners" that can trigger state changes
|
|
938
|
+
* from any state, not just the current state.
|
|
939
|
+
*
|
|
940
|
+
* @param layer - The state machine layer to search
|
|
941
|
+
* @param currentStateIds - The currently active state IDs (to skip)
|
|
942
|
+
* @returns The first matching transition, or null if none found
|
|
943
|
+
*/
|
|
944
|
+
private findGlobalTransition;
|
|
945
|
+
private checkConditions;
|
|
946
|
+
private evaluateLogicTree;
|
|
947
|
+
private runLogicNodes;
|
|
948
|
+
private resolvePath;
|
|
949
|
+
/**
|
|
950
|
+
* Evaluate a logic-property formula the way the editor does: variable names
|
|
951
|
+
* (project variables and state-machine inputs, `name` or `$name`) are replaced
|
|
952
|
+
* by their live values, then the arithmetic/boolean expression is evaluated.
|
|
953
|
+
*/
|
|
954
|
+
private logicFormulaCache;
|
|
955
|
+
private evaluateLogicFormula;
|
|
956
|
+
private processLogicProperties;
|
|
957
|
+
private activeTriggers;
|
|
958
|
+
seek(time: number): void;
|
|
959
|
+
private _pointerSprings;
|
|
960
|
+
private feedPointerInputs;
|
|
961
|
+
private stepPointerSprings;
|
|
962
|
+
advance(dt: number): void;
|
|
963
|
+
private evaluateCodeAnimations;
|
|
964
|
+
private navigationHistory;
|
|
965
|
+
private navigationFiredAt;
|
|
966
|
+
private navigationSnapshot;
|
|
967
|
+
private navigationDepth;
|
|
968
|
+
private navigationPendingLoad;
|
|
969
|
+
private handlingScreenExit;
|
|
970
|
+
private navigationIntent;
|
|
971
|
+
/** Pointer-down position + latest drag delta, used to resolve swipe directions. */
|
|
972
|
+
private navigationGestureStart;
|
|
973
|
+
private navigationGesture;
|
|
974
|
+
private navigationSwipeThreshold;
|
|
975
|
+
/** Rules attached to a layer (`object`) or to the Screen itself (`screen`). */
|
|
976
|
+
private navigationRulesFor;
|
|
977
|
+
private navigationConditionsPass;
|
|
978
|
+
private navigationEventMatches;
|
|
979
|
+
/**
|
|
980
|
+
* Swipe rules only fire when the drag actually moved far enough in the
|
|
981
|
+
* matching direction. Without gesture data (e.g. a programmatic 'Drag'
|
|
982
|
+
* event) the rule stays permissive so existing behaviour is preserved.
|
|
983
|
+
*/
|
|
984
|
+
private navigationSwipeMatches;
|
|
985
|
+
private fireNavigation;
|
|
986
|
+
/** Run the first matching rule (rules are ordered; one navigation per event). */
|
|
987
|
+
private runNavigationRules;
|
|
988
|
+
private readNavigationProperty;
|
|
989
|
+
/** Time- and data-driven rules: delay, interval, variable, property change. */
|
|
990
|
+
private evaluateContinuousNavigation;
|
|
991
|
+
private evaluateContinuousInteractions;
|
|
992
|
+
private solveConstraints;
|
|
993
|
+
private getGlobalTransform;
|
|
994
|
+
private globalToLocal;
|
|
995
|
+
/**
|
|
996
|
+
* The same exact solve as the editor, so the two can't disagree. It blends from the FK
|
|
997
|
+
* pose, so Strength 0 is pure FK: `ikPoses` remembers the pose under the last solve, which
|
|
998
|
+
* is replaced whenever an animation writes a new rotation.
|
|
999
|
+
*/
|
|
1000
|
+
private ikPoses;
|
|
1001
|
+
private solveTwoBoneIK;
|
|
1002
|
+
private getBoneTipWorld;
|
|
1003
|
+
private solveIK;
|
|
1004
|
+
private computeSpring;
|
|
1005
|
+
handlePointerInput(type: string, canvasX: number, canvasY: number, canvasWidth: number, canvasHeight: number, pointerId?: number): void;
|
|
1006
|
+
handleScroll(x: number, y: number): void;
|
|
1007
|
+
isListViewObject(obj: any): boolean;
|
|
1008
|
+
isLineGraphObject(obj: any): boolean;
|
|
1009
|
+
isBarChartObject(obj: any): boolean;
|
|
1010
|
+
isPieChartObject(obj: any): boolean;
|
|
1011
|
+
isGraphObject(obj: any): boolean;
|
|
1012
|
+
isInputBoxObject(obj: any): boolean;
|
|
1013
|
+
isClickableObject(obj: any): boolean;
|
|
1014
|
+
getLastHoveredObject(): any;
|
|
1015
|
+
clearAllGraphHover(): void;
|
|
1016
|
+
private getLocalCoords;
|
|
1017
|
+
private updateGraphHoverFromPointer;
|
|
1018
|
+
getGraphHoverState(id: string): any;
|
|
1019
|
+
getResolvedListViewItems(obj: any, opts?: any): any[];
|
|
1020
|
+
getResolvedDropdownOptions(obj: any, opts?: any): string[];
|
|
1021
|
+
handleWheel(deltaX: number, deltaY: number, canvasX?: number, canvasY?: number, canvasWidth?: number, canvasHeight?: number): void;
|
|
1022
|
+
private handlePointerEvent;
|
|
1023
|
+
handleKeyDown(e: KeyboardEvent): void;
|
|
1024
|
+
handleKeyUp(e: KeyboardEvent): void;
|
|
1025
|
+
/** Forget held keys: after the window loses focus their keyups never arrive. */
|
|
1026
|
+
releaseKeys(): void;
|
|
1027
|
+
private hasDragInteraction;
|
|
1028
|
+
private clampDragToBounds;
|
|
1029
|
+
/** Change a body's physics settings at runtime: buoyancy, tags, orbit, gravityScale, lockRotation… */
|
|
1030
|
+
setPhysicsProps(id: string, props: Record<string, any>): void;
|
|
1031
|
+
/** Change a field on an object at runtime, e.g. physicsAttractor or physicsFluid. */
|
|
1032
|
+
setObjectField(id: string, key: string, value: any): void;
|
|
1033
|
+
/** Resize an object and rebuild its physics body in place (for weights that grow with data). */
|
|
1034
|
+
resizeBody(id: string, width: number, height: number): void;
|
|
1035
|
+
/** Dispatch a physics contact to `selfId`'s 'Collision' rules, with `otherId` as the body it hit. */
|
|
1036
|
+
private fireCollision;
|
|
1037
|
+
/** A rule's `collisionWith` matches the other body itself or any group it sits in; empty matches anything. */
|
|
1038
|
+
private collisionMatches;
|
|
1039
|
+
private fireEventForObject;
|
|
1040
|
+
private fireAnalyticsEvent;
|
|
1041
|
+
private getAnimationDuration;
|
|
1042
|
+
private initGlobalAnimationTriggers;
|
|
1043
|
+
private resolveInteractionDuration;
|
|
1044
|
+
private triggerGlobalAnimation;
|
|
1045
|
+
private handleAnimationFinished;
|
|
1046
|
+
private getEntranceProgress;
|
|
1047
|
+
private getWorldTransform;
|
|
1048
|
+
private hitTest;
|
|
1049
|
+
private updateSliderValueFromPointer;
|
|
1050
|
+
/** Clamp a normalized handle value (-1..1) to the joystick's bounds shape. */
|
|
1051
|
+
private clampJoystickToBounds;
|
|
1052
|
+
/**
|
|
1053
|
+
* Snap a normalized handle value to the nearest of 4 or 8 directions (Rive's
|
|
1054
|
+
* "Joy 4-Way" / "Joy 8-Way"). Values below the snap threshold are untouched
|
|
1055
|
+
* so the stick can still rest near the centre.
|
|
1056
|
+
*/
|
|
1057
|
+
private snapJoystickDirection;
|
|
1058
|
+
/** Apply deadzone + per-axis step snapping to a normalized handle value. */
|
|
1059
|
+
private applyJoystickConstraints;
|
|
1060
|
+
/**
|
|
1061
|
+
* Animate the handle towards (0,0) instead of snapping. Called when an input
|
|
1062
|
+
* source stops driving the stick (release, key up, spring return).
|
|
1063
|
+
*/
|
|
1064
|
+
private springJoystickBack;
|
|
1065
|
+
/**
|
|
1066
|
+
* Read the currently connected Gamepad (if any) and return normalized axis
|
|
1067
|
+
* values for the configured stick, or null when no pad / no input.
|
|
1068
|
+
*/
|
|
1069
|
+
private readGamepadStick;
|
|
1070
|
+
/**
|
|
1071
|
+
* Apply a joystick's rigging animations (xAnimationId / yAnimationId): the
|
|
1072
|
+
* handle position scrubs the timeline of the assigned animation, matching the
|
|
1073
|
+
* editor preview exactly (delta-from-midpoint so the animation's rest pose at
|
|
1074
|
+
* t=duration/2 is the un-deflected result).
|
|
1075
|
+
*/
|
|
1076
|
+
private applyJoystickRigging;
|
|
1077
|
+
/**
|
|
1078
|
+
* Detect bindings that were applied on a previous frame but have since been
|
|
1079
|
+
* removed from the joystick, and restore each target object to the value it
|
|
1080
|
+
* had before the binding started driving it.
|
|
1081
|
+
*/
|
|
1082
|
+
private reconcileJoystickBindings;
|
|
1083
|
+
/**
|
|
1084
|
+
* Put a bound target back at its base value (the value the binding reads as
|
|
1085
|
+
* its origin) and drop the velocity/smoothing integration caches so a later
|
|
1086
|
+
* re-bind starts cleanly instead of continuing from a stale offset.
|
|
1087
|
+
*/
|
|
1088
|
+
private restoreJoystickBindingTarget;
|
|
1089
|
+
private updateJoystickValueFromPointer;
|
|
1090
|
+
private processJoysticks;
|
|
1091
|
+
private _index;
|
|
1092
|
+
private lookupIndex;
|
|
1093
|
+
private objById;
|
|
1094
|
+
private animById;
|
|
1095
|
+
applyBlendState(state: any, time: number): void;
|
|
1096
|
+
applyAnimation(anim: Animation_2, time: number, filterObjectId?: string | string[]): void;
|
|
1097
|
+
private interpolate;
|
|
1098
|
+
private interpolateValue;
|
|
1099
|
+
private interpolateColor;
|
|
1100
|
+
private interpolateStops;
|
|
1101
|
+
private interpolateFill;
|
|
1102
|
+
private interpolateStroke;
|
|
1103
|
+
render(ctx: CanvasRenderingContext2D, width: number, height: number): void;
|
|
1104
|
+
private isObjectInView;
|
|
1105
|
+
private calculateTransform;
|
|
1106
|
+
private mapFontWeight;
|
|
1107
|
+
private drawTextDecoration;
|
|
1108
|
+
/** The mesh for an extruded group whose pose has been animated or bound, else null (its children hold the rest pose). */
|
|
1109
|
+
private getExtrusionPose;
|
|
1110
|
+
/** Faces are sorted back to front and centred on the group, matching what the editor draws. */
|
|
1111
|
+
private drawExtrusionPose;
|
|
1112
|
+
private renderObject;
|
|
1113
|
+
private applyLightTrailUnderlay;
|
|
1114
|
+
private applyOuterGlowUnderlay;
|
|
1115
|
+
private _renderText;
|
|
1116
|
+
private applyStrokeAlignment;
|
|
1117
|
+
private getPerimeter;
|
|
1118
|
+
private getBezierLength;
|
|
1119
|
+
private getBezierTAtLength;
|
|
1120
|
+
private getPointOnPath;
|
|
1121
|
+
private getBezierPointAndAngle;
|
|
1122
|
+
private applyAbsoluteTransform;
|
|
1123
|
+
private applyObjectTransform;
|
|
1124
|
+
private applyCustomEffect;
|
|
1125
|
+
private applyPatternGrid;
|
|
1126
|
+
/**
|
|
1127
|
+
* CSS-style inset shadows: `style.effects` entries of
|
|
1128
|
+
* `{ type: 'InnerShadow', color, opacity, blur, offsetX, offsetY }`.
|
|
1129
|
+
* A ring (large rect minus the shape) casts its shadow into the clipped shape.
|
|
1130
|
+
*/
|
|
1131
|
+
private applyInnerShadowOverlay;
|
|
1132
|
+
private applyInnerGlowOverlay;
|
|
1133
|
+
private applyArtEffectOverlay;
|
|
1134
|
+
/** Helper: shift the hue of a hex/hsl color by degrees, return as hsla */
|
|
1135
|
+
private _shiftHue;
|
|
1136
|
+
/**
|
|
1137
|
+
* Simulate CSS `backdrop-filter: blur()` + glass overlay on Canvas2D.
|
|
1138
|
+
* Since real backdrop-filter is not available in canvas, we:
|
|
1139
|
+
* 1. Sample the canvas pixels behind this object's bounding box
|
|
1140
|
+
* 2. Draw them into an offscreen canvas and apply a blur filter
|
|
1141
|
+
* 3. Clip to the object shape and paint the blurred backdrop
|
|
1142
|
+
* 4. Apply the overlay color tint, sheen highlight, noise grain, and glass border
|
|
1143
|
+
*/
|
|
1144
|
+
private applyBackgroundBlurGlass;
|
|
1145
|
+
/**
|
|
1146
|
+
* Paint a mask source into the context preserving its real alpha.
|
|
1147
|
+
*
|
|
1148
|
+
* The caller composites this with destination-in / destination-out, so only the
|
|
1149
|
+
* alpha channel matters and the source has to be drawn the way it actually
|
|
1150
|
+
* renders: fill *and* stroke (a Line or a fill:None shape has no fillable area
|
|
1151
|
+
* and used to erase the masked layer), real bitmap alpha for images, glyphs for
|
|
1152
|
+
* text, artwork for SVG and the union of a group's children.
|
|
1153
|
+
*
|
|
1154
|
+
* The node's own transform is applied here, so the caller must already have
|
|
1155
|
+
* applied the node's ancestors; that nesting is what keeps the children of a
|
|
1156
|
+
* group mask from being transformed twice.
|
|
1157
|
+
*/
|
|
1158
|
+
private paintMaskSource;
|
|
1159
|
+
private applyPath;
|
|
1160
|
+
private _tracePath;
|
|
1161
|
+
private renderInputBox;
|
|
1162
|
+
private renderSlider;
|
|
1163
|
+
private renderDropdown;
|
|
1164
|
+
private renderButton;
|
|
1165
|
+
private drawButtonIcon;
|
|
1166
|
+
private renderToggleButton;
|
|
1167
|
+
private renderToggle;
|
|
1168
|
+
private renderCheckbox;
|
|
1169
|
+
private renderRadioGroup;
|
|
1170
|
+
private renderBarChart;
|
|
1171
|
+
private renderPieChart;
|
|
1172
|
+
private renderJoystick;
|
|
1173
|
+
private getRadioGroupItemIndexAtPointer;
|
|
1174
|
+
private renderLineGraph;
|
|
1175
|
+
private _catmullRom;
|
|
1176
|
+
private normalizeOpacity;
|
|
1177
|
+
private createCanvasFill;
|
|
1178
|
+
private drawRoundRect;
|
|
1179
|
+
private renderListView;
|
|
1180
|
+
private drawCustomShape;
|
|
1181
|
+
private updateListViewScrollFromPointer;
|
|
1182
|
+
private updateListViewHoverFromPointer;
|
|
1183
|
+
private getListViewItemIndexAtPointer;
|
|
1184
|
+
private drawListViewRect;
|
|
1185
|
+
private solveBehaviors;
|
|
1186
|
+
private applyBehaviorSensor;
|
|
1187
|
+
private getObjectProperty;
|
|
1188
|
+
private setObjectProperty;
|
|
1189
|
+
private applyEasing;
|
|
1190
|
+
private lerp;
|
|
1191
|
+
private deepMerge;
|
|
1192
|
+
private processFabricAdjustmentsCanvas;
|
|
1193
|
+
private renderFittedImage;
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
export declare class ExodeUIService {
|
|
1197
|
+
private _engine;
|
|
1198
|
+
get engine(): ExodeUIEngine | null;
|
|
1199
|
+
/** Called from onReady output: (ready)="exodeui.register($event)" */
|
|
1200
|
+
register(engine: ExodeUIEngine): void;
|
|
1201
|
+
updateInput(nameOrId: string, value: any): void;
|
|
1202
|
+
setInputBool(name: string, value: boolean): void;
|
|
1203
|
+
setInputNumber(name: string, value: number): void;
|
|
1204
|
+
setInputText(name: string, value: string): void;
|
|
1205
|
+
fireTrigger(name: string): void;
|
|
1206
|
+
setInputNumberArray(name: string, value: number[]): void;
|
|
1207
|
+
setInputStringArray(name: string, value: string[]): void;
|
|
1208
|
+
updateObjectOptions(id: string, opts: any): void;
|
|
1209
|
+
updateConstraint(id: string, index: number, props: any): void;
|
|
1210
|
+
updateGraphData(nameOrId: string, data: number[]): void;
|
|
1211
|
+
updateObjectProperty(id: string, property: string, value: any): void;
|
|
1212
|
+
setDropdownOptions(nameOrId: string, options: string[]): void;
|
|
1213
|
+
getInputValue(nameOrId: string): any;
|
|
1214
|
+
}
|
|
1215
|
+
|
|
1216
|
+
export declare interface Fill {
|
|
1217
|
+
type: 'Solid' | 'LinearGradient' | 'RadialGradient' | 'AngularGradient' | 'DiamondGradient' | 'Pattern' | 'None';
|
|
1218
|
+
color?: string;
|
|
1219
|
+
opacity: number;
|
|
1220
|
+
stops?: {
|
|
1221
|
+
offset: number;
|
|
1222
|
+
color: string;
|
|
1223
|
+
opacity?: number;
|
|
1224
|
+
}[];
|
|
1225
|
+
start?: [number, number];
|
|
1226
|
+
end?: [number, number];
|
|
1227
|
+
center?: [number, number];
|
|
1228
|
+
radius?: number;
|
|
1229
|
+
url?: string;
|
|
1230
|
+
scaleX?: number;
|
|
1231
|
+
scaleY?: number;
|
|
1232
|
+
offsetX?: number;
|
|
1233
|
+
offsetY?: number;
|
|
1234
|
+
rotation?: number;
|
|
1235
|
+
gradientTransform?: number[];
|
|
1236
|
+
}
|
|
1237
|
+
|
|
1238
|
+
export declare type Fit = 'Cover' | 'Contain' | 'Fill' | 'FitWidth' | 'FitHeight' | 'None' | 'ScaleDown' | 'Layout';
|
|
1239
|
+
|
|
1240
|
+
export declare type Geometry = {
|
|
1241
|
+
type: 'Rectangle';
|
|
1242
|
+
width: number;
|
|
1243
|
+
height: number;
|
|
1244
|
+
corner_radius?: number | [number, number, number, number] | {
|
|
1245
|
+
tl?: number;
|
|
1246
|
+
tr?: number;
|
|
1247
|
+
br?: number;
|
|
1248
|
+
bl?: number;
|
|
1249
|
+
};
|
|
1250
|
+
cornerRadius?: number | [number, number, number, number] | {
|
|
1251
|
+
tl?: number;
|
|
1252
|
+
tr?: number;
|
|
1253
|
+
br?: number;
|
|
1254
|
+
bl?: number;
|
|
1255
|
+
};
|
|
1256
|
+
isMask?: boolean;
|
|
1257
|
+
} | {
|
|
1258
|
+
type: 'Ellipse';
|
|
1259
|
+
width: number;
|
|
1260
|
+
height: number;
|
|
1261
|
+
startAngle?: number;
|
|
1262
|
+
sweepAngle?: number;
|
|
1263
|
+
ratio?: number;
|
|
1264
|
+
isMask?: boolean;
|
|
1265
|
+
} | {
|
|
1266
|
+
type: 'Text';
|
|
1267
|
+
text: string;
|
|
1268
|
+
fontSize: number;
|
|
1269
|
+
fontFamily: string;
|
|
1270
|
+
fontWeight?: string | number;
|
|
1271
|
+
textAlign?: 'left' | 'center' | 'right' | 'justify';
|
|
1272
|
+
textVerticalAlign?: 'top' | 'middle' | 'center' | 'bottom';
|
|
1273
|
+
width?: number;
|
|
1274
|
+
height?: number;
|
|
1275
|
+
lineHeight?: number;
|
|
1276
|
+
letterSpacing?: number;
|
|
1277
|
+
textDecoration?: 'none' | 'underline' | 'line-through';
|
|
1278
|
+
textCase?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
|
|
1279
|
+
paragraphSpacing?: number;
|
|
1280
|
+
paragraphIndent?: number;
|
|
1281
|
+
textInputId?: string;
|
|
1282
|
+
segments?: {
|
|
1283
|
+
text: string;
|
|
1284
|
+
fill: Fill;
|
|
1285
|
+
fontSize?: number;
|
|
1286
|
+
fontFamily?: string;
|
|
1287
|
+
fontWeight?: string | number;
|
|
1288
|
+
fontStyle?: 'normal' | 'italic';
|
|
1289
|
+
textDecoration?: 'none' | 'underline' | 'line-through';
|
|
1290
|
+
}[];
|
|
1291
|
+
enableSegments?: boolean;
|
|
1292
|
+
isMask?: boolean;
|
|
1293
|
+
textPre?: string;
|
|
1294
|
+
textPost?: string;
|
|
1295
|
+
isTextVarEnabled?: boolean;
|
|
1296
|
+
pathId?: string;
|
|
1297
|
+
pathOffset?: number;
|
|
1298
|
+
pathOffsetY?: number;
|
|
1299
|
+
pathAlign?: 'baseline' | 'top' | 'bottom' | 'center';
|
|
1300
|
+
pathSide?: 'left' | 'right';
|
|
1301
|
+
typewriter?: {
|
|
1302
|
+
options: {
|
|
1303
|
+
speed: number;
|
|
1304
|
+
loop: boolean;
|
|
1305
|
+
};
|
|
1306
|
+
isEnabled: boolean;
|
|
1307
|
+
};
|
|
1308
|
+
fontStyle?: 'normal' | 'italic';
|
|
1309
|
+
isPointText?: boolean;
|
|
1310
|
+
autoHeight?: boolean;
|
|
1311
|
+
padding?: {
|
|
1312
|
+
top?: number;
|
|
1313
|
+
right?: number;
|
|
1314
|
+
bottom?: number;
|
|
1315
|
+
left?: number;
|
|
1316
|
+
};
|
|
1317
|
+
smallCaps?: boolean;
|
|
1318
|
+
baselineShift?: number;
|
|
1319
|
+
hyphenation?: boolean;
|
|
1320
|
+
composer?: 'single-line' | 'every-line';
|
|
1321
|
+
balanceRaggedLines?: boolean;
|
|
1322
|
+
kerning?: 'auto' | 'optical' | 'manual' | 'none';
|
|
1323
|
+
kerningValue?: number;
|
|
1324
|
+
justifyMinWordSpacing?: number;
|
|
1325
|
+
justifyMaxWordSpacing?: number;
|
|
1326
|
+
justifyMinLetterSpacing?: number;
|
|
1327
|
+
justifyMaxLetterSpacing?: number;
|
|
1328
|
+
paragraphRule?: {
|
|
1329
|
+
top?: {
|
|
1330
|
+
width: number;
|
|
1331
|
+
color: string;
|
|
1332
|
+
offset: number;
|
|
1333
|
+
};
|
|
1334
|
+
bottom?: {
|
|
1335
|
+
width: number;
|
|
1336
|
+
color: string;
|
|
1337
|
+
offset: number;
|
|
1338
|
+
};
|
|
1339
|
+
};
|
|
1340
|
+
pathFlip?: boolean;
|
|
1341
|
+
} | {
|
|
1342
|
+
type: 'Triangle';
|
|
1343
|
+
width: number;
|
|
1344
|
+
height: number;
|
|
1345
|
+
isMask?: boolean;
|
|
1346
|
+
} | {
|
|
1347
|
+
type: 'Polygon';
|
|
1348
|
+
radius: number;
|
|
1349
|
+
sides: number;
|
|
1350
|
+
isMask?: boolean;
|
|
1351
|
+
} | {
|
|
1352
|
+
type: 'Star';
|
|
1353
|
+
inner_radius: number;
|
|
1354
|
+
outer_radius: number;
|
|
1355
|
+
points: number;
|
|
1356
|
+
isMask?: boolean;
|
|
1357
|
+
} | {
|
|
1358
|
+
type: 'Line';
|
|
1359
|
+
length: number;
|
|
1360
|
+
isMask?: boolean;
|
|
1361
|
+
} | {
|
|
1362
|
+
type: 'SVG';
|
|
1363
|
+
svgContent: string;
|
|
1364
|
+
width: number;
|
|
1365
|
+
height: number;
|
|
1366
|
+
preserveAspectRatio: boolean;
|
|
1367
|
+
colors: string[];
|
|
1368
|
+
} | {
|
|
1369
|
+
type: 'Image';
|
|
1370
|
+
src: string;
|
|
1371
|
+
width: number;
|
|
1372
|
+
height: number;
|
|
1373
|
+
adjustments?: Adjustments;
|
|
1374
|
+
} | {
|
|
1375
|
+
type: 'Joystick';
|
|
1376
|
+
width: number;
|
|
1377
|
+
height: number;
|
|
1378
|
+
isMask?: boolean;
|
|
1379
|
+
stepX?: number;
|
|
1380
|
+
stepY?: number;
|
|
1381
|
+
deadzone?: number;
|
|
1382
|
+
boundsShape?: 'circle' | 'square';
|
|
1383
|
+
handleOrigin?: 'center' | 'top-left' | 'bottom-right';
|
|
1384
|
+
options?: any;
|
|
1385
|
+
} | {
|
|
1386
|
+
type: "LineGraph";
|
|
1387
|
+
datasets?: LineDataset[];
|
|
1388
|
+
data?: number[];
|
|
1389
|
+
width: number;
|
|
1390
|
+
height: number;
|
|
1391
|
+
lineColor?: string;
|
|
1392
|
+
lineWidth?: number;
|
|
1393
|
+
showArea?: boolean;
|
|
1394
|
+
areaColor?: string;
|
|
1395
|
+
smoothing?: boolean;
|
|
1396
|
+
showPoints?: boolean;
|
|
1397
|
+
pointSize?: number;
|
|
1398
|
+
pointFill?: string;
|
|
1399
|
+
pointStrokeColor?: string;
|
|
1400
|
+
pointStrokeWidth?: number;
|
|
1401
|
+
showXAxis?: boolean;
|
|
1402
|
+
showYAxis?: boolean;
|
|
1403
|
+
xAxisColor?: string;
|
|
1404
|
+
yAxisColor?: string;
|
|
1405
|
+
showXLabels?: boolean;
|
|
1406
|
+
showYLabels?: boolean;
|
|
1407
|
+
axisLabelColor?: string;
|
|
1408
|
+
axisLabelFontSize?: number;
|
|
1409
|
+
showLegend?: boolean;
|
|
1410
|
+
legendColor?: string;
|
|
1411
|
+
legendFontSize?: number;
|
|
1412
|
+
areaOpacity?: number;
|
|
1413
|
+
} | {
|
|
1414
|
+
type: 'Component';
|
|
1415
|
+
variant: string;
|
|
1416
|
+
width: number;
|
|
1417
|
+
height: number;
|
|
1418
|
+
} | {
|
|
1419
|
+
type: 'Path';
|
|
1420
|
+
points: (any & {
|
|
1421
|
+
moveTo?: boolean;
|
|
1422
|
+
})[];
|
|
1423
|
+
isMask?: boolean;
|
|
1424
|
+
isClosed?: boolean;
|
|
1425
|
+
is_closed?: boolean;
|
|
1426
|
+
};
|
|
1427
|
+
|
|
1428
|
+
export declare const getToggleSvgPathBounds: (d: string) => {
|
|
1429
|
+
minX: number;
|
|
1430
|
+
minY: number;
|
|
1431
|
+
maxX: number;
|
|
1432
|
+
maxY: number;
|
|
1433
|
+
width: number;
|
|
1434
|
+
height: number;
|
|
1435
|
+
cx: number;
|
|
1436
|
+
cy: number;
|
|
1437
|
+
};
|
|
1438
|
+
|
|
1439
|
+
export declare interface Input {
|
|
1440
|
+
id: string;
|
|
1441
|
+
name: string;
|
|
1442
|
+
value: InputValue;
|
|
1443
|
+
x?: number;
|
|
1444
|
+
y?: number;
|
|
1445
|
+
nodes?: InputNodePosition[];
|
|
1446
|
+
sourceId?: string;
|
|
1447
|
+
sourceHandleId?: string;
|
|
1448
|
+
}
|
|
1449
|
+
|
|
1450
|
+
export declare interface InputNodePosition {
|
|
1451
|
+
id: string;
|
|
1452
|
+
x: number;
|
|
1453
|
+
y: number;
|
|
1454
|
+
}
|
|
1455
|
+
|
|
1456
|
+
export declare type InputValue = {
|
|
1457
|
+
type: 'Boolean';
|
|
1458
|
+
value: boolean;
|
|
1459
|
+
} | {
|
|
1460
|
+
type: 'Number';
|
|
1461
|
+
value: number;
|
|
1462
|
+
} | {
|
|
1463
|
+
type: 'Trigger';
|
|
1464
|
+
value: boolean;
|
|
1465
|
+
} | {
|
|
1466
|
+
type: 'Text';
|
|
1467
|
+
value: string;
|
|
1468
|
+
} | {
|
|
1469
|
+
type: 'Object';
|
|
1470
|
+
value: string;
|
|
1471
|
+
} | {
|
|
1472
|
+
type: 'Api';
|
|
1473
|
+
value: any;
|
|
1474
|
+
api: ApiVariableConfig;
|
|
1475
|
+
};
|
|
1476
|
+
|
|
1477
|
+
export declare interface Interaction {
|
|
1478
|
+
id: string;
|
|
1479
|
+
event: 'onClick' | 'onHold' | 'pointerDown' | 'pointerUp' | 'hover' | string;
|
|
1480
|
+
action: 'setInput' | 'fireTrigger' | 'setProperty' | 'Navigate Artboard' | 'Navigate URL' | 'navigate' | 'Play Animation' | 'Stop Animation' | 'Pause Animation' | 'Switch to State' | 'Toggle Boolean' | string;
|
|
1481
|
+
targetInputId?: string;
|
|
1482
|
+
targetProperty?: string;
|
|
1483
|
+
targetObjectId?: string;
|
|
1484
|
+
targetArtboard?: string;
|
|
1485
|
+
targetState?: string;
|
|
1486
|
+
navigateUrl?: string;
|
|
1487
|
+
value?: any;
|
|
1488
|
+
targetAnimationId?: string;
|
|
1489
|
+
/** Number input that supplies the requested playback duration in milliseconds. */
|
|
1490
|
+
transitionDurationInputId?: string;
|
|
1491
|
+
/** Literal playback duration in milliseconds when no input is bound. */
|
|
1492
|
+
transitionDuration?: number;
|
|
1493
|
+
easingCurve?: string;
|
|
1494
|
+
subAnimationIds?: string[];
|
|
1495
|
+
playMode?: 'single' | 'all' | 'custom';
|
|
1496
|
+
triggers?: string[];
|
|
1497
|
+
triggerLogic?: 'OR' | 'AND';
|
|
1498
|
+
conditions?: Condition[];
|
|
1499
|
+
delayValue?: number;
|
|
1500
|
+
intervalValue?: number;
|
|
1501
|
+
}
|
|
1502
|
+
|
|
1503
|
+
/** JSDOM/happy-dom friendly guard so tests can construct a runtime safely. */
|
|
1504
|
+
export declare function isCanvasElement(el: unknown): el is HTMLCanvasElement;
|
|
1505
|
+
|
|
1506
|
+
/**
|
|
1507
|
+
* Validates that property paths do not contain prototype pollution vectors (__proto__, constructor, prototype).
|
|
1508
|
+
*/
|
|
1509
|
+
export declare function isSafePropertyPath(path: string | undefined | null): boolean;
|
|
1510
|
+
|
|
1511
|
+
/**
|
|
1512
|
+
* Validates that URLs do not use dangerous schemes like javascript:, vbscript:, or data:
|
|
1513
|
+
*/
|
|
1514
|
+
export declare function isSafeUrl(url: string | undefined | null): boolean;
|
|
1515
|
+
|
|
1516
|
+
export declare type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
|
|
1517
|
+
|
|
1518
|
+
declare interface Keyframe_2 {
|
|
1519
|
+
time: number;
|
|
1520
|
+
value: number | string;
|
|
1521
|
+
easing: string;
|
|
1522
|
+
}
|
|
1523
|
+
export { Keyframe_2 as Keyframe }
|
|
1524
|
+
|
|
1525
|
+
export declare interface Layer {
|
|
1526
|
+
name: string;
|
|
1527
|
+
entryStateId: string;
|
|
1528
|
+
entryConditions?: Condition[];
|
|
1529
|
+
states: State[];
|
|
1530
|
+
}
|
|
1531
|
+
|
|
1532
|
+
export declare interface Layout {
|
|
1533
|
+
fit: Fit;
|
|
1534
|
+
alignment: Alignment;
|
|
1535
|
+
layoutScaleFactor?: number;
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1538
|
+
export declare type LayoutAlign = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
1539
|
+
|
|
1540
|
+
export declare interface LayoutBreakpoint {
|
|
1541
|
+
id: string;
|
|
1542
|
+
/** Human label, e.g. "Mobile" / "Tablet" / "Desktop". */
|
|
1543
|
+
name: string;
|
|
1544
|
+
/** Inclusive lower bound of the device width (px) this breakpoint starts at. */
|
|
1545
|
+
minWidth: number;
|
|
1546
|
+
/** Optional inclusive upper bound. Omitted means "and wider". */
|
|
1547
|
+
maxWidth?: number;
|
|
1548
|
+
/**
|
|
1549
|
+
* @deprecated Inline overrides on a per-container definition. Overrides now
|
|
1550
|
+
* live on `layoutProps.responsive[id]`. Still honoured for older documents.
|
|
1551
|
+
*/
|
|
1552
|
+
props?: Partial<Omit<LayoutProps, 'breakpoints' | 'responsive'>>;
|
|
1553
|
+
}
|
|
1554
|
+
|
|
1555
|
+
export declare type LayoutDirection = 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse';
|
|
1556
|
+
|
|
1557
|
+
export declare type LayoutMode = 'none' | 'linear' | 'grid' | 'stack' | 'frame' | 'flow' | 'masonry' | 'anchor';
|
|
1558
|
+
|
|
1559
|
+
export declare interface LayoutProps {
|
|
1560
|
+
width?: ResizingMode;
|
|
1561
|
+
height?: ResizingMode;
|
|
1562
|
+
layoutSizingHorizontal?: ResizingMode;
|
|
1563
|
+
layoutSizingVertical?: ResizingMode;
|
|
1564
|
+
minWidth?: number;
|
|
1565
|
+
minHeight?: number;
|
|
1566
|
+
maxWidth?: number;
|
|
1567
|
+
maxHeight?: number;
|
|
1568
|
+
gridArea?: string;
|
|
1569
|
+
/** Flexbox grow factor. `fill` sizing implies 1 when this is unset. */
|
|
1570
|
+
flexGrow?: number;
|
|
1571
|
+
/** Flexbox shrink factor. `fill` sizing implies 1 when this is unset. */
|
|
1572
|
+
flexShrink?: number;
|
|
1573
|
+
/** Flexbox base size along the main axis. */
|
|
1574
|
+
flexBasis?: number;
|
|
1575
|
+
/** Per-item cross-axis alignment, overriding the container's alignItems. */
|
|
1576
|
+
alignSelf?: AlignItems;
|
|
1577
|
+
/**
|
|
1578
|
+
* How this object lays out its children. Absent or `'none'` leaves children
|
|
1579
|
+
* at their authored positions; `'linear'` is flexbox, `'grid'` is the track
|
|
1580
|
+
* grid. There is no separate on/off flag — layout is just a property.
|
|
1581
|
+
*/
|
|
1582
|
+
mode?: LayoutMode;
|
|
1583
|
+
direction?: LayoutDirection;
|
|
1584
|
+
/** @deprecated Use `gap` (or rowGap/columnGap) instead. */
|
|
1585
|
+
spacing?: number | 'auto';
|
|
1586
|
+
/** Gap between items on the main axis; falls back to rowGap/columnGap, then spacing. */
|
|
1587
|
+
gap?: number | 'auto';
|
|
1588
|
+
columnGap?: number;
|
|
1589
|
+
rowGap?: number;
|
|
1590
|
+
gridColumns?: string;
|
|
1591
|
+
gridRows?: string;
|
|
1592
|
+
padding?: {
|
|
1593
|
+
top: number;
|
|
1594
|
+
right: number;
|
|
1595
|
+
bottom: number;
|
|
1596
|
+
left: number;
|
|
1597
|
+
};
|
|
1598
|
+
/** @deprecated Use justifyContent/alignItems instead. */
|
|
1599
|
+
align?: LayoutAlign;
|
|
1600
|
+
justifyContent?: JustifyContent;
|
|
1601
|
+
alignItems?: AlignItems;
|
|
1602
|
+
alignContent?: AlignContent;
|
|
1603
|
+
wrap?: boolean;
|
|
1604
|
+
/**
|
|
1605
|
+
* @deprecated Legacy inline breakpoint *definitions* on a container. The
|
|
1606
|
+
* shared set now lives on `artboard.responsive.breakpoints`; this is still
|
|
1607
|
+
* honoured so older documents keep rendering.
|
|
1608
|
+
*/
|
|
1609
|
+
breakpoints?: LayoutBreakpoint[];
|
|
1610
|
+
/**
|
|
1611
|
+
* Per-breakpoint overrides, keyed by the shared breakpoint id. Resolved
|
|
1612
|
+
* against the device (artboard) width, so every container switches its
|
|
1613
|
+
* layout at the same breakpoints.
|
|
1614
|
+
*/
|
|
1615
|
+
responsive?: Record<string, Partial<Omit<LayoutProps, 'breakpoints' | 'responsive' | 'padding'>> & {
|
|
1616
|
+
/** Padding overrides merge per side — set only the edges you change. */
|
|
1617
|
+
padding?: Partial<NonNullable<LayoutProps['padding']>>;
|
|
1618
|
+
}>;
|
|
1619
|
+
}
|
|
1620
|
+
|
|
1621
|
+
export declare interface LineDataset {
|
|
1622
|
+
id: string;
|
|
1623
|
+
label: string;
|
|
1624
|
+
data: number[];
|
|
1625
|
+
lineColor: string;
|
|
1626
|
+
lineWidth: number;
|
|
1627
|
+
showArea: boolean;
|
|
1628
|
+
areaColor: string;
|
|
1629
|
+
smoothing: boolean;
|
|
1630
|
+
showPoints: boolean;
|
|
1631
|
+
pointSize: number;
|
|
1632
|
+
pointFill: string;
|
|
1633
|
+
pointStrokeColor: string;
|
|
1634
|
+
pointStrokeWidth: number;
|
|
1635
|
+
inputId?: string;
|
|
1636
|
+
isVarEnabled?: boolean;
|
|
1637
|
+
}
|
|
1638
|
+
|
|
1639
|
+
/**
|
|
1640
|
+
* Liquid Fill - Shapes that fill like pouring liquid
|
|
1641
|
+
*/
|
|
1642
|
+
export declare interface LiquidFillConfig {
|
|
1643
|
+
enabled: boolean;
|
|
1644
|
+
fillLevel: number;
|
|
1645
|
+
waveAmplitude: number;
|
|
1646
|
+
waveFrequency: number;
|
|
1647
|
+
color: string;
|
|
1648
|
+
opacity: number;
|
|
1649
|
+
direction?: 'up' | 'down' | 'left' | 'right';
|
|
1650
|
+
}
|
|
1651
|
+
|
|
1652
|
+
/**
|
|
1653
|
+
* Liquid Morphing - Blob-like deformations for shapes
|
|
1654
|
+
*/
|
|
1655
|
+
export declare interface LiquidMorphConfig {
|
|
1656
|
+
enabled: boolean;
|
|
1657
|
+
blobStrength: number;
|
|
1658
|
+
frequency: number;
|
|
1659
|
+
amplitude?: number;
|
|
1660
|
+
seed?: number;
|
|
1661
|
+
}
|
|
1662
|
+
|
|
1663
|
+
export declare interface LogicNode {
|
|
1664
|
+
id: string;
|
|
1665
|
+
name: string;
|
|
1666
|
+
op: LogicOp;
|
|
1667
|
+
x: number;
|
|
1668
|
+
y: number;
|
|
1669
|
+
inputs: {
|
|
1670
|
+
id: string;
|
|
1671
|
+
sourceId?: string;
|
|
1672
|
+
sourceHandleId?: string;
|
|
1673
|
+
value?: any;
|
|
1674
|
+
}[];
|
|
1675
|
+
value?: any;
|
|
1676
|
+
label?: string;
|
|
1677
|
+
}
|
|
1678
|
+
|
|
1679
|
+
export declare enum LogicOp {
|
|
1680
|
+
AND = "AND",
|
|
1681
|
+
OR = "OR",
|
|
1682
|
+
NOT = "NOT",
|
|
1683
|
+
XOR = "XOR",
|
|
1684
|
+
OBJECT = "OBJECT",
|
|
1685
|
+
PROPERTY = "PROPERTY",
|
|
1686
|
+
GET_PROPERTY = "GET_PROPERTY",
|
|
1687
|
+
SET_PROPERTY = "SET_PROPERTY",
|
|
1688
|
+
ADD = "ADD",
|
|
1689
|
+
SUB = "SUB",
|
|
1690
|
+
MUL = "MUL",
|
|
1691
|
+
DIV = "DIV",
|
|
1692
|
+
MOD = "MOD",
|
|
1693
|
+
POW = "POW",
|
|
1694
|
+
ABS = "ABS",
|
|
1695
|
+
ROUND = "ROUND",
|
|
1696
|
+
FLOOR = "FLOOR",
|
|
1697
|
+
CEIL = "CEIL",
|
|
1698
|
+
SIN = "SIN",
|
|
1699
|
+
COS = "COS",
|
|
1700
|
+
TAN = "TAN",
|
|
1701
|
+
CLAMP = "CLAMP",
|
|
1702
|
+
REMAP = "REMAP",
|
|
1703
|
+
EQ = "EQ",
|
|
1704
|
+
NEQ = "NEQ",
|
|
1705
|
+
GT = "GT",
|
|
1706
|
+
LT = "LT",
|
|
1707
|
+
GTE = "GTE",
|
|
1708
|
+
LTE = "LTE",
|
|
1709
|
+
IF_ELSE = "IF_ELSE",
|
|
1710
|
+
VALUE = "VALUE",
|
|
1711
|
+
INPUT = "INPUT",
|
|
1712
|
+
LOG = "LOG",
|
|
1713
|
+
SCROLL_X = "SCROLL_X",
|
|
1714
|
+
SCROLL_Y = "SCROLL_Y",
|
|
1715
|
+
MOUSE_X = "MOUSE_X",
|
|
1716
|
+
MOUSE_Y = "MOUSE_Y",
|
|
1717
|
+
IS_MOUSE_DOWN = "IS_MOUSE_DOWN",
|
|
1718
|
+
EFFECTOR = "EFFECTOR",
|
|
1719
|
+
MONITOR = "MONITOR",
|
|
1720
|
+
DELAY = "DELAY",
|
|
1721
|
+
SPRING_PULL = "SPRING_PULL",
|
|
1722
|
+
SPRING_SETTLE = "SPRING_SETTLE",
|
|
1723
|
+
EMIT = "EMIT"
|
|
1724
|
+
}
|
|
1725
|
+
|
|
1726
|
+
export declare interface LogicProperty {
|
|
1727
|
+
id: string;
|
|
1728
|
+
name: string;
|
|
1729
|
+
valueType: 'variable' | 'constant' | 'expression';
|
|
1730
|
+
variableId?: string;
|
|
1731
|
+
value?: any;
|
|
1732
|
+
}
|
|
1733
|
+
|
|
1734
|
+
export declare interface NavigationCondition {
|
|
1735
|
+
inputId: string;
|
|
1736
|
+
operator: '==' | '!=' | '>' | '<' | '>=' | '<=';
|
|
1737
|
+
value: any;
|
|
1738
|
+
}
|
|
1739
|
+
|
|
1740
|
+
/**
|
|
1741
|
+
* A Screen-to-Screen navigation rule.
|
|
1742
|
+
*
|
|
1743
|
+
* Rules live on the Screen (`artboard.navigation`) and are either attached to an
|
|
1744
|
+
* object (`objectId` set) or screen-level (`objectId` null: load/exit/timing/data).
|
|
1745
|
+
*/
|
|
1746
|
+
export declare interface NavigationRule {
|
|
1747
|
+
id: string;
|
|
1748
|
+
name?: string;
|
|
1749
|
+
enabled?: boolean;
|
|
1750
|
+
trigger: NavigationTriggerType;
|
|
1751
|
+
objectId?: string | null;
|
|
1752
|
+
conditions?: NavigationCondition[];
|
|
1753
|
+
conditionLogic?: 'AND' | 'OR';
|
|
1754
|
+
property?: string;
|
|
1755
|
+
delayMs?: number;
|
|
1756
|
+
intervalMs?: number;
|
|
1757
|
+
target: NavigationTarget;
|
|
1758
|
+
targetScreenId?: string | null;
|
|
1759
|
+
url?: string;
|
|
1760
|
+
transition?: NavigationTransition;
|
|
1761
|
+
duration?: number;
|
|
1762
|
+
}
|
|
1763
|
+
|
|
1764
|
+
/** Where a navigation rule goes. */
|
|
1765
|
+
export declare type NavigationTarget = 'screen' | 'back' | 'next' | 'url';
|
|
1766
|
+
|
|
1767
|
+
export declare type NavigationTransition = 'none' | 'fade' | 'slideLeft' | 'slideRight' | 'slideUp' | 'slideDown' | 'zoom';
|
|
1768
|
+
|
|
1769
|
+
/** What starts a navigation rule (mirrors the editor's NavigationRule.trigger). */
|
|
1770
|
+
export declare type NavigationTriggerType = 'click' | 'doubleClick' | 'rightClick' | 'hover' | 'hoverOut' | 'press' | 'release' | 'longPress' | 'swipeLeft' | 'swipeRight' | 'swipeUp' | 'swipeDown' | 'scrollIntoView' | 'variable' | 'propertyChange' | 'visible' | 'hidden' | 'toggle' | 'delay' | 'interval' | 'screenLoad' | 'screenExit' | 'animationEnd' | 'stateEnter';
|
|
1771
|
+
|
|
1772
|
+
export declare interface Physics {
|
|
1773
|
+
enabled: boolean;
|
|
1774
|
+
bodyType: 'Dynamic' | 'Static';
|
|
1775
|
+
mass: number;
|
|
1776
|
+
density: number;
|
|
1777
|
+
friction: number;
|
|
1778
|
+
restitution: number;
|
|
1779
|
+
frictionAir: number;
|
|
1780
|
+
isSensor: boolean;
|
|
1781
|
+
}
|
|
1782
|
+
|
|
1783
|
+
/**
|
|
1784
|
+
* Physics Effects — visual effects driven by the physics simulation.
|
|
1785
|
+
*
|
|
1786
|
+
* Turn them on for every falling body with `artboard.physics.effects`, and override or opt out
|
|
1787
|
+
* per object with `object.physicsEffects` (an object to override, `false` to disable):
|
|
1788
|
+
*
|
|
1789
|
+
* physics.effects = {
|
|
1790
|
+
* squash: { amount: 1 }, // stretch along motion, squash on impact
|
|
1791
|
+
* trail: { length: 6, opacity: 0.3 }, // afterimages behind fast bodies
|
|
1792
|
+
* impact: { color: '#FFFFFF', size: 1 }, // shockwave ring where a body hits
|
|
1793
|
+
* dust: { color: '#CFC8BE', count: 10 }, // particles on hard landings
|
|
1794
|
+
* heat: { color: '#FF6B3D', maxSpeed: 1600 }, // glow that grows with speed
|
|
1795
|
+
* shadow: { opacity: 0.35, groundY: 820 }, // contact shadow on the ground
|
|
1796
|
+
* shake: { amount: 1 }, // artboard shake on heavy impacts
|
|
1797
|
+
* }
|
|
1798
|
+
*
|
|
1799
|
+
* Each effect is on when its key is present (set `enabled: false` to switch one off).
|
|
1800
|
+
* Impacts are detected from sudden velocity changes, so no collision setup is needed.
|
|
1801
|
+
*/
|
|
1802
|
+
declare interface PhysicsEffectsConfig {
|
|
1803
|
+
squash?: {
|
|
1804
|
+
enabled?: boolean;
|
|
1805
|
+
amount?: number;
|
|
1806
|
+
};
|
|
1807
|
+
trail?: {
|
|
1808
|
+
enabled?: boolean;
|
|
1809
|
+
length?: number;
|
|
1810
|
+
opacity?: number;
|
|
1811
|
+
minSpeed?: number;
|
|
1812
|
+
};
|
|
1813
|
+
impact?: {
|
|
1814
|
+
enabled?: boolean;
|
|
1815
|
+
color?: string;
|
|
1816
|
+
size?: number;
|
|
1817
|
+
minSpeed?: number;
|
|
1818
|
+
};
|
|
1819
|
+
dust?: {
|
|
1820
|
+
enabled?: boolean;
|
|
1821
|
+
color?: string;
|
|
1822
|
+
count?: number;
|
|
1823
|
+
minSpeed?: number;
|
|
1824
|
+
};
|
|
1825
|
+
heat?: {
|
|
1826
|
+
enabled?: boolean;
|
|
1827
|
+
color?: string;
|
|
1828
|
+
maxSpeed?: number;
|
|
1829
|
+
blur?: number;
|
|
1830
|
+
};
|
|
1831
|
+
shadow?: {
|
|
1832
|
+
enabled?: boolean;
|
|
1833
|
+
opacity?: number;
|
|
1834
|
+
groundY?: number;
|
|
1835
|
+
color?: string;
|
|
1836
|
+
};
|
|
1837
|
+
shake?: {
|
|
1838
|
+
enabled?: boolean;
|
|
1839
|
+
amount?: number;
|
|
1840
|
+
};
|
|
1841
|
+
}
|
|
1842
|
+
|
|
1843
|
+
export declare interface PlayInstance {
|
|
1844
|
+
id: string;
|
|
1845
|
+
trigger: 'on_load' | 'after_delay' | 'after_anim' | 'on_scroll' | 'manual';
|
|
1846
|
+
delay?: number;
|
|
1847
|
+
afterAnim?: string;
|
|
1848
|
+
conditions?: {
|
|
1849
|
+
variable: string;
|
|
1850
|
+
operator: string;
|
|
1851
|
+
value: any;
|
|
1852
|
+
}[];
|
|
1853
|
+
subAnimationIds?: string[];
|
|
1854
|
+
loop?: boolean;
|
|
1855
|
+
}
|
|
1856
|
+
|
|
1857
|
+
export declare interface RepeaterConfig {
|
|
1858
|
+
isEnabled: boolean;
|
|
1859
|
+
type: 'Linear' | 'Grid' | 'Radial';
|
|
1860
|
+
count: number;
|
|
1861
|
+
offsetX?: number;
|
|
1862
|
+
offsetY?: number;
|
|
1863
|
+
rotation?: number;
|
|
1864
|
+
scale?: number;
|
|
1865
|
+
cols?: number;
|
|
1866
|
+
gapX?: number;
|
|
1867
|
+
gapY?: number;
|
|
1868
|
+
radius?: number;
|
|
1869
|
+
startAngle?: number;
|
|
1870
|
+
endAngle?: number;
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1873
|
+
export declare type ResizingMode = 'fixed' | 'hug' | 'fill';
|
|
1874
|
+
|
|
1875
|
+
export declare interface ResponsiveConfig {
|
|
1876
|
+
enabled: boolean;
|
|
1877
|
+
mode: 'fixed' | 'hug' | 'fill' | 'constraint';
|
|
1878
|
+
width?: {
|
|
1879
|
+
min?: number;
|
|
1880
|
+
max?: number;
|
|
1881
|
+
type: 'percentage' | 'fixed';
|
|
1882
|
+
};
|
|
1883
|
+
height?: {
|
|
1884
|
+
min?: number;
|
|
1885
|
+
max?: number;
|
|
1886
|
+
type: 'percentage' | 'fixed';
|
|
1887
|
+
};
|
|
1888
|
+
maintainAspectRatio: boolean;
|
|
1889
|
+
scaleObjects: boolean;
|
|
1890
|
+
/** The document-wide breakpoint set, shared by every container. */
|
|
1891
|
+
breakpoints?: LayoutBreakpoint[];
|
|
1892
|
+
}
|
|
1893
|
+
|
|
1894
|
+
export declare interface SEOConfig {
|
|
1895
|
+
title?: string;
|
|
1896
|
+
description?: string;
|
|
1897
|
+
keywords?: string[];
|
|
1898
|
+
ogImage?: string;
|
|
1899
|
+
jsonLd?: any;
|
|
1900
|
+
/**
|
|
1901
|
+
* By default, we extract all text objects for semantic HTML.
|
|
1902
|
+
* Set this to false to only use explicitly provided metadata.
|
|
1903
|
+
*/
|
|
1904
|
+
enableSmartExtraction?: boolean;
|
|
1905
|
+
}
|
|
1906
|
+
|
|
1907
|
+
export declare interface Shadow {
|
|
1908
|
+
color: string;
|
|
1909
|
+
blur: number;
|
|
1910
|
+
offsetX: number;
|
|
1911
|
+
offsetY: number;
|
|
1912
|
+
opacity: number;
|
|
1913
|
+
isEnabled?: boolean;
|
|
1914
|
+
spread?: number;
|
|
1915
|
+
}
|
|
1916
|
+
|
|
1917
|
+
export declare interface ShapeObject {
|
|
1918
|
+
type: 'Shape' | 'Group' | 'Component' | 'Button' | 'Bone' | 'Toggle' | 'Slider' | 'Dropdown' | 'ListView' | 'Checkbox' | 'RadioGroup' | 'BarChart' | 'PieChart';
|
|
1919
|
+
id: string;
|
|
1920
|
+
name: string;
|
|
1921
|
+
transform: Transform;
|
|
1922
|
+
geometry?: Geometry;
|
|
1923
|
+
style: Style;
|
|
1924
|
+
parentId?: string;
|
|
1925
|
+
children?: string[];
|
|
1926
|
+
triggers?: Trigger[];
|
|
1927
|
+
interactions?: Interaction[];
|
|
1928
|
+
constraints?: Constraint[];
|
|
1929
|
+
spatialConstraints?: SpatialConstraint;
|
|
1930
|
+
physics?: Physics;
|
|
1931
|
+
renderAsGroup?: boolean;
|
|
1932
|
+
opacity?: number;
|
|
1933
|
+
visible?: boolean;
|
|
1934
|
+
isVisible?: boolean;
|
|
1935
|
+
blendMode?: string;
|
|
1936
|
+
compositeOperation?: string;
|
|
1937
|
+
options?: any;
|
|
1938
|
+
inputId?: string;
|
|
1939
|
+
maskedBy?: string;
|
|
1940
|
+
maskInverted?: boolean;
|
|
1941
|
+
maskOpacity?: number;
|
|
1942
|
+
maskFeather?: number;
|
|
1943
|
+
maskType?: 'alpha' | 'luma';
|
|
1944
|
+
maskBlendMode?: string;
|
|
1945
|
+
behaviors?: Behavior[];
|
|
1946
|
+
liquidMorph?: LiquidMorphConfig;
|
|
1947
|
+
liquidFill?: LiquidFillConfig;
|
|
1948
|
+
artEffect?: ArtEffectConfig;
|
|
1949
|
+
width?: number;
|
|
1950
|
+
height?: number;
|
|
1951
|
+
cornerRadius?: number | [number, number, number, number];
|
|
1952
|
+
clipContent?: boolean;
|
|
1953
|
+
layoutProps?: LayoutProps;
|
|
1954
|
+
altText?: string;
|
|
1955
|
+
repeaterConfig?: RepeaterConfig;
|
|
1956
|
+
weights?: {
|
|
1957
|
+
[vertexIndex: string | number]: {
|
|
1958
|
+
boneId: string;
|
|
1959
|
+
amount: number;
|
|
1960
|
+
}[];
|
|
1961
|
+
};
|
|
1962
|
+
bindMatrices?: {
|
|
1963
|
+
[boneId: string]: number[];
|
|
1964
|
+
};
|
|
1965
|
+
logicProperties?: LogicProperty[];
|
|
1966
|
+
codeAnimation?: any;
|
|
1967
|
+
codeAnimations?: any[];
|
|
1968
|
+
data?: any;
|
|
1969
|
+
}
|
|
1970
|
+
|
|
1971
|
+
export declare interface SpatialConstraint {
|
|
1972
|
+
horizontal?: 'left' | 'right' | 'left-right' | 'center' | 'scale';
|
|
1973
|
+
vertical?: 'top' | 'bottom' | 'top-bottom' | 'center' | 'scale';
|
|
1974
|
+
relativeTo?: string;
|
|
1975
|
+
offsetX?: number;
|
|
1976
|
+
offsetY?: number;
|
|
1977
|
+
minWidth?: number;
|
|
1978
|
+
maxWidth?: number;
|
|
1979
|
+
minHeight?: number;
|
|
1980
|
+
maxHeight?: number;
|
|
1981
|
+
lockAspectRatio?: boolean;
|
|
1982
|
+
}
|
|
1983
|
+
|
|
1984
|
+
export declare interface State {
|
|
1985
|
+
id: string;
|
|
1986
|
+
name: string;
|
|
1987
|
+
x: number;
|
|
1988
|
+
y: number;
|
|
1989
|
+
transitions: Transition[];
|
|
1990
|
+
animationId?: string | null;
|
|
1991
|
+
loop?: boolean;
|
|
1992
|
+
isBlendState?: boolean;
|
|
1993
|
+
blendType?: '1D' | '2D';
|
|
1994
|
+
blendAnimations?: BlendAnimation[];
|
|
1995
|
+
blendInputX?: string;
|
|
1996
|
+
blendInputY?: string;
|
|
1997
|
+
speed?: number;
|
|
1998
|
+
onEntry?: StateAction[];
|
|
1999
|
+
onExit?: StateAction[];
|
|
2000
|
+
}
|
|
2001
|
+
|
|
2002
|
+
export declare interface StateAction {
|
|
2003
|
+
type: 'SetInput' | 'FireTrigger';
|
|
2004
|
+
inputId: string;
|
|
2005
|
+
value?: boolean | number;
|
|
2006
|
+
}
|
|
2007
|
+
|
|
2008
|
+
export declare interface StateMachine {
|
|
2009
|
+
inputs: Input[];
|
|
2010
|
+
layers: Layer[];
|
|
2011
|
+
logicNodes?: LogicNode[];
|
|
2012
|
+
listeners?: EventListener_2[];
|
|
2013
|
+
}
|
|
2014
|
+
|
|
2015
|
+
export declare interface Style {
|
|
2016
|
+
fill?: Fill;
|
|
2017
|
+
stroke?: {
|
|
2018
|
+
color?: string;
|
|
2019
|
+
fill?: Fill;
|
|
2020
|
+
width: number;
|
|
2021
|
+
opacity: number;
|
|
2022
|
+
alignment?: 'center' | 'inside' | 'outside';
|
|
2023
|
+
lineCap?: 'butt' | 'round' | 'square';
|
|
2024
|
+
lineJoin?: 'miter' | 'round' | 'bevel';
|
|
2025
|
+
miterLimit?: number;
|
|
2026
|
+
dashArray?: number[];
|
|
2027
|
+
dashOffset?: number;
|
|
2028
|
+
trimStart?: number;
|
|
2029
|
+
trimEnd?: number;
|
|
2030
|
+
trimOffset?: number;
|
|
2031
|
+
isEnabled?: boolean;
|
|
2032
|
+
};
|
|
2033
|
+
shadow?: Shadow;
|
|
2034
|
+
blur?: Blur;
|
|
2035
|
+
adjustments?: Adjustments;
|
|
2036
|
+
liquidMorph?: LiquidMorphConfig;
|
|
2037
|
+
liquidFill?: LiquidFillConfig;
|
|
2038
|
+
artEffect?: ArtEffectConfig;
|
|
2039
|
+
palette?: string[];
|
|
2040
|
+
analytics?: AnalyticsConfig;
|
|
2041
|
+
compositeOperation?: GlobalCompositeOperation | string;
|
|
2042
|
+
}
|
|
2043
|
+
|
|
2044
|
+
export declare const TOGGLE_SHAPE_NAME_MAP: Record<string, string>;
|
|
2045
|
+
|
|
2046
|
+
export declare interface Track {
|
|
2047
|
+
object_id: string;
|
|
2048
|
+
property: string;
|
|
2049
|
+
keyframes: Keyframe_2[];
|
|
2050
|
+
}
|
|
2051
|
+
|
|
2052
|
+
export declare interface Transform {
|
|
2053
|
+
x: number;
|
|
2054
|
+
y: number;
|
|
2055
|
+
rotation: number;
|
|
2056
|
+
scale_x: number;
|
|
2057
|
+
scale_y: number;
|
|
2058
|
+
opacity?: number;
|
|
2059
|
+
skew_x?: number;
|
|
2060
|
+
skew_y?: number;
|
|
2061
|
+
flip_x?: boolean;
|
|
2062
|
+
flip_y?: boolean;
|
|
2063
|
+
}
|
|
2064
|
+
|
|
2065
|
+
export declare interface Transition {
|
|
2066
|
+
id: string;
|
|
2067
|
+
targetStateId: string;
|
|
2068
|
+
duration: number;
|
|
2069
|
+
delay?: number;
|
|
2070
|
+
conditions: Condition[];
|
|
2071
|
+
}
|
|
2072
|
+
|
|
2073
|
+
export declare interface Trigger {
|
|
2074
|
+
id: string;
|
|
2075
|
+
name: string;
|
|
2076
|
+
eventType: 'onClick' | 'onHold' | 'pointerDown' | 'pointerUp' | 'hover';
|
|
2077
|
+
entryAnimationId?: string | null;
|
|
2078
|
+
exitAnimationId?: string | null;
|
|
2079
|
+
targetObjectId?: string | null;
|
|
2080
|
+
duration?: number;
|
|
2081
|
+
loop?: boolean;
|
|
2082
|
+
conditions?: Condition[];
|
|
2083
|
+
}
|
|
2084
|
+
|
|
2085
|
+
export { }
|