@oicl/openbridge-webcomponents 0.0.9 → 0.0.12
Sign up to get free protection for your applications and to get access to all the features.
- package/.release-it.json +1 -1
- package/.storybook/preview.ts +0 -1
- package/CHANGELOG.md +53 -1
- package/__snapshots__/application-topbar--inactive.png +0 -0
- package/__snapshots__/button-button--raised-disabled.png +0 -0
- package/__snapshots__/input-slider--no-icons.png +0 -0
- package/__snapshots__/input-slider--no-value.png +0 -0
- package/__snapshots__/line-corner-line--primary.png +0 -0
- package/__snapshots__/line-example--air.png +0 -0
- package/__snapshots__/line-example--connector.png +0 -0
- package/__snapshots__/line-example--electric.png +0 -0
- package/__snapshots__/line-example--fluid.png +0 -0
- package/__snapshots__/line-horizontal-line--primary.png +0 -0
- package/__snapshots__/line-vertical-line--complex.png +0 -0
- package/__snapshots__/line-vertical-line--primary.png +0 -0
- package/custom-elements.json +628 -263
- package/dist/automation/corner-line/corner-line.d.ts +22 -0
- package/dist/automation/corner-line/corner-line.d.ts.map +1 -0
- package/dist/automation/corner-line/corner-line.js +161 -0
- package/dist/automation/corner-line/corner-line.js.map +1 -0
- package/dist/automation/horizontal-line/horizontal-line.d.ts +15 -0
- package/dist/automation/horizontal-line/horizontal-line.d.ts.map +1 -0
- package/dist/automation/horizontal-line/horizontal-line.js +110 -0
- package/dist/automation/horizontal-line/horizontal-line.js.map +1 -0
- package/dist/automation/index.d.ts +20 -0
- package/dist/automation/index.d.ts.map +1 -0
- package/dist/automation/index.js +42 -0
- package/dist/automation/index.js.map +1 -0
- package/dist/automation/vertical-line/vertical-line.d.ts +15 -0
- package/dist/automation/vertical-line/vertical-line.d.ts.map +1 -0
- package/dist/automation/vertical-line/vertical-line.js +111 -0
- package/dist/automation/vertical-line/vertical-line.js.map +1 -0
- package/dist/components/brilliance-menu/brilliance-menu.d.ts.map +1 -1
- package/dist/components/brilliance-menu/brilliance-menu.js +2 -0
- package/dist/components/brilliance-menu/brilliance-menu.js.map +1 -1
- package/dist/components/slider/slider.css.js +20 -0
- package/dist/components/slider/slider.css.js.map +1 -1
- package/dist/components/slider/slider.d.ts +8 -0
- package/dist/components/slider/slider.d.ts.map +1 -1
- package/dist/components/slider/slider.js +44 -18
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/top-bar/top-bar.css.js +5 -1
- package/dist/components/top-bar/top-bar.css.js.map +1 -1
- package/dist/components/top-bar/top-bar.d.ts.map +1 -1
- package/dist/components/top-bar/top-bar.js +8 -8
- package/dist/components/top-bar/top-bar.js.map +1 -1
- package/package.json +18 -25
- package/src/automation/corner-line/corner-line.stories.ts +31 -0
- package/src/automation/corner-line/corner-line.ts +167 -0
- package/src/automation/horizontal-line/horizontal-line.stories.ts +28 -0
- package/src/automation/horizontal-line/horizontal-line.ts +100 -0
- package/src/automation/index.ts +41 -0
- package/src/automation/line.stories.ts +142 -0
- package/src/automation/vertical-line/vertical-line.stories.ts +71 -0
- package/src/automation/vertical-line/vertical-line.ts +104 -0
- package/src/components/brilliance-menu/brilliance-menu.ts +2 -0
- package/src/components/slider/slider.css +20 -0
- package/src/components/slider/slider.stories.ts +20 -1
- package/src/components/slider/slider.ts +43 -19
- package/src/components/top-bar/top-bar.css +4 -0
- package/src/components/top-bar/top-bar.ts +10 -8
- package/src/palettes/variables.css +64 -43
- package/script/svg-instruments/convert-svg.ts +0 -246
- package/script/svg-instruments/environment.d.ts +0 -7
- package/script/svg-instruments/exports.ts +0 -82
- package/script/svg-instruments/figma-types.ts +0 -804
- package/script/svg-instruments/figmaImport.ts +0 -79
- package/script/svg-instruments/main.ts +0 -109
@@ -1,804 +0,0 @@
|
|
1
|
-
// Figma Plugin API version 1, update 14
|
2
|
-
|
3
|
-
export interface StyledNode {
|
4
|
-
name: string;
|
5
|
-
id: string;
|
6
|
-
children?: StyledNode[];
|
7
|
-
visible?: boolean;
|
8
|
-
styles?: {
|
9
|
-
stroke?: string;
|
10
|
-
strokes?: string;
|
11
|
-
fill?: string;
|
12
|
-
fills?: string;
|
13
|
-
text?: string;
|
14
|
-
};
|
15
|
-
background?: any[];
|
16
|
-
strokes?: any[];
|
17
|
-
strokeAlign?: string;
|
18
|
-
}
|
19
|
-
|
20
|
-
export interface Style {
|
21
|
-
key: string;
|
22
|
-
name: string;
|
23
|
-
styleType: 'FILL' | 'EFFECT' | 'TEXT' | 'GRID';
|
24
|
-
}
|
25
|
-
|
26
|
-
export type StyleDict = {[id: string]: Style};
|
27
|
-
|
28
|
-
////////////////////////////////////////////////////////////////////////////////
|
29
|
-
// Datatypes
|
30
|
-
|
31
|
-
type Transform = [[number, number, number], [number, number, number]];
|
32
|
-
|
33
|
-
interface Vector {
|
34
|
-
readonly x: number;
|
35
|
-
readonly y: number;
|
36
|
-
}
|
37
|
-
|
38
|
-
interface Rect {
|
39
|
-
readonly x: number;
|
40
|
-
readonly y: number;
|
41
|
-
readonly width: number;
|
42
|
-
readonly height: number;
|
43
|
-
}
|
44
|
-
|
45
|
-
interface RGB {
|
46
|
-
readonly r: number;
|
47
|
-
readonly g: number;
|
48
|
-
readonly b: number;
|
49
|
-
}
|
50
|
-
|
51
|
-
interface RGBA {
|
52
|
-
readonly r: number;
|
53
|
-
readonly g: number;
|
54
|
-
readonly b: number;
|
55
|
-
readonly a: number;
|
56
|
-
}
|
57
|
-
|
58
|
-
interface FontName {
|
59
|
-
readonly family: string;
|
60
|
-
readonly style: string;
|
61
|
-
}
|
62
|
-
|
63
|
-
type TextCase = 'ORIGINAL' | 'UPPER' | 'LOWER' | 'TITLE';
|
64
|
-
|
65
|
-
type TextDecoration = 'NONE' | 'UNDERLINE' | 'STRIKETHROUGH';
|
66
|
-
|
67
|
-
interface ArcData {
|
68
|
-
readonly startingAngle: number;
|
69
|
-
readonly endingAngle: number;
|
70
|
-
readonly innerRadius: number;
|
71
|
-
}
|
72
|
-
|
73
|
-
interface ShadowEffect {
|
74
|
-
readonly type: 'DROP_SHADOW' | 'INNER_SHADOW';
|
75
|
-
readonly color: RGBA;
|
76
|
-
readonly offset: Vector;
|
77
|
-
readonly radius: number;
|
78
|
-
readonly spread?: number;
|
79
|
-
readonly visible: boolean;
|
80
|
-
readonly blendMode: BlendMode;
|
81
|
-
}
|
82
|
-
|
83
|
-
interface BlurEffect {
|
84
|
-
readonly type: 'LAYER_BLUR' | 'BACKGROUND_BLUR';
|
85
|
-
readonly radius: number;
|
86
|
-
readonly visible: boolean;
|
87
|
-
}
|
88
|
-
|
89
|
-
type Effect = ShadowEffect | BlurEffect;
|
90
|
-
|
91
|
-
type ConstraintType = 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'SCALE';
|
92
|
-
|
93
|
-
interface Constraints {
|
94
|
-
readonly horizontal: ConstraintType;
|
95
|
-
readonly vertical: ConstraintType;
|
96
|
-
}
|
97
|
-
|
98
|
-
interface ColorStop {
|
99
|
-
readonly position: number;
|
100
|
-
readonly color: RGBA;
|
101
|
-
}
|
102
|
-
|
103
|
-
interface ImageFilters {
|
104
|
-
readonly exposure?: number;
|
105
|
-
readonly contrast?: number;
|
106
|
-
readonly saturation?: number;
|
107
|
-
readonly temperature?: number;
|
108
|
-
readonly tint?: number;
|
109
|
-
readonly highlights?: number;
|
110
|
-
readonly shadows?: number;
|
111
|
-
}
|
112
|
-
|
113
|
-
interface SolidPaint {
|
114
|
-
readonly type: 'SOLID';
|
115
|
-
readonly color: RGB;
|
116
|
-
|
117
|
-
readonly visible?: boolean;
|
118
|
-
readonly opacity?: number;
|
119
|
-
readonly blendMode?: BlendMode;
|
120
|
-
}
|
121
|
-
|
122
|
-
interface GradientPaint {
|
123
|
-
readonly type:
|
124
|
-
| 'GRADIENT_LINEAR'
|
125
|
-
| 'GRADIENT_RADIAL'
|
126
|
-
| 'GRADIENT_ANGULAR'
|
127
|
-
| 'GRADIENT_DIAMOND';
|
128
|
-
readonly gradientTransform: Transform;
|
129
|
-
readonly gradientStops: ReadonlyArray<ColorStop>;
|
130
|
-
|
131
|
-
readonly visible?: boolean;
|
132
|
-
readonly opacity?: number;
|
133
|
-
readonly blendMode?: BlendMode;
|
134
|
-
}
|
135
|
-
|
136
|
-
interface ImagePaint {
|
137
|
-
readonly type: 'IMAGE';
|
138
|
-
readonly scaleMode: 'FILL' | 'FIT' | 'CROP' | 'TILE';
|
139
|
-
readonly imageHash: string | null;
|
140
|
-
readonly imageTransform?: Transform; // setting for "CROP"
|
141
|
-
readonly scalingFactor?: number; // setting for "TILE"
|
142
|
-
readonly filters?: ImageFilters;
|
143
|
-
|
144
|
-
readonly visible?: boolean;
|
145
|
-
readonly opacity?: number;
|
146
|
-
readonly blendMode?: BlendMode;
|
147
|
-
}
|
148
|
-
|
149
|
-
type Paint = SolidPaint | GradientPaint | ImagePaint;
|
150
|
-
|
151
|
-
interface Guide {
|
152
|
-
readonly axis: 'X' | 'Y';
|
153
|
-
readonly offset: number;
|
154
|
-
}
|
155
|
-
|
156
|
-
interface RowsColsLayoutGrid {
|
157
|
-
readonly pattern: 'ROWS' | 'COLUMNS';
|
158
|
-
readonly alignment: 'MIN' | 'MAX' | 'STRETCH' | 'CENTER';
|
159
|
-
readonly gutterSize: number;
|
160
|
-
|
161
|
-
readonly count: number; // Infinity when "Auto" is set in the UI
|
162
|
-
readonly sectionSize?: number; // Not set for alignment: "STRETCH"
|
163
|
-
readonly offset?: number; // Not set for alignment: "CENTER"
|
164
|
-
|
165
|
-
readonly visible?: boolean;
|
166
|
-
readonly color?: RGBA;
|
167
|
-
}
|
168
|
-
|
169
|
-
interface GridLayoutGrid {
|
170
|
-
readonly pattern: 'GRID';
|
171
|
-
readonly sectionSize: number;
|
172
|
-
|
173
|
-
readonly visible?: boolean;
|
174
|
-
readonly color?: RGBA;
|
175
|
-
}
|
176
|
-
|
177
|
-
type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid;
|
178
|
-
|
179
|
-
interface ExportSettingsConstraints {
|
180
|
-
readonly type: 'SCALE' | 'WIDTH' | 'HEIGHT';
|
181
|
-
readonly value: number;
|
182
|
-
}
|
183
|
-
|
184
|
-
interface ExportSettingsImage {
|
185
|
-
readonly format: 'JPG' | 'PNG';
|
186
|
-
readonly contentsOnly?: boolean; // defaults to true
|
187
|
-
readonly suffix?: string;
|
188
|
-
readonly constraint?: ExportSettingsConstraints;
|
189
|
-
}
|
190
|
-
|
191
|
-
interface ExportSettingsSVG {
|
192
|
-
readonly format: 'SVG';
|
193
|
-
readonly contentsOnly?: boolean; // defaults to true
|
194
|
-
readonly suffix?: string;
|
195
|
-
readonly svgOutlineText?: boolean; // defaults to true
|
196
|
-
readonly svgIdAttribute?: boolean; // defaults to false
|
197
|
-
readonly svgSimplifyStroke?: boolean; // defaults to true
|
198
|
-
}
|
199
|
-
|
200
|
-
interface ExportSettingsPDF {
|
201
|
-
readonly format: 'PDF';
|
202
|
-
readonly contentsOnly?: boolean; // defaults to true
|
203
|
-
readonly suffix?: string;
|
204
|
-
}
|
205
|
-
|
206
|
-
type ExportSettings =
|
207
|
-
| ExportSettingsImage
|
208
|
-
| ExportSettingsSVG
|
209
|
-
| ExportSettingsPDF;
|
210
|
-
|
211
|
-
type WindingRule = 'NONZERO' | 'EVENODD';
|
212
|
-
|
213
|
-
interface VectorVertex {
|
214
|
-
readonly x: number;
|
215
|
-
readonly y: number;
|
216
|
-
readonly strokeCap?: StrokeCap;
|
217
|
-
readonly strokeJoin?: StrokeJoin;
|
218
|
-
readonly cornerRadius?: number;
|
219
|
-
readonly handleMirroring?: HandleMirroring;
|
220
|
-
}
|
221
|
-
|
222
|
-
interface VectorSegment {
|
223
|
-
readonly start: number;
|
224
|
-
readonly end: number;
|
225
|
-
readonly tangentStart?: Vector; // Defaults to { x: 0, y: 0 }
|
226
|
-
readonly tangentEnd?: Vector; // Defaults to { x: 0, y: 0 }
|
227
|
-
}
|
228
|
-
|
229
|
-
interface VectorRegion {
|
230
|
-
readonly windingRule: WindingRule;
|
231
|
-
readonly loops: ReadonlyArray<ReadonlyArray<number>>;
|
232
|
-
}
|
233
|
-
|
234
|
-
interface VectorNetwork {
|
235
|
-
readonly vertices: ReadonlyArray<VectorVertex>;
|
236
|
-
readonly segments: ReadonlyArray<VectorSegment>;
|
237
|
-
readonly regions?: ReadonlyArray<VectorRegion>; // Defaults to []
|
238
|
-
}
|
239
|
-
|
240
|
-
interface VectorPath {
|
241
|
-
readonly windingRule: WindingRule | 'NONE';
|
242
|
-
readonly data: string;
|
243
|
-
}
|
244
|
-
|
245
|
-
type VectorPaths = ReadonlyArray<VectorPath>;
|
246
|
-
|
247
|
-
interface LetterSpacing {
|
248
|
-
readonly value: number;
|
249
|
-
readonly unit: 'PIXELS' | 'PERCENT';
|
250
|
-
}
|
251
|
-
|
252
|
-
type LineHeight =
|
253
|
-
| {
|
254
|
-
readonly value: number;
|
255
|
-
readonly unit: 'PIXELS' | 'PERCENT';
|
256
|
-
}
|
257
|
-
| {
|
258
|
-
readonly unit: 'AUTO';
|
259
|
-
};
|
260
|
-
|
261
|
-
type BlendMode =
|
262
|
-
| 'PASS_THROUGH'
|
263
|
-
| 'NORMAL'
|
264
|
-
| 'DARKEN'
|
265
|
-
| 'MULTIPLY'
|
266
|
-
| 'LINEAR_BURN'
|
267
|
-
| 'COLOR_BURN'
|
268
|
-
| 'LIGHTEN'
|
269
|
-
| 'SCREEN'
|
270
|
-
| 'LINEAR_DODGE'
|
271
|
-
| 'COLOR_DODGE'
|
272
|
-
| 'OVERLAY'
|
273
|
-
| 'SOFT_LIGHT'
|
274
|
-
| 'HARD_LIGHT'
|
275
|
-
| 'DIFFERENCE'
|
276
|
-
| 'EXCLUSION'
|
277
|
-
| 'HUE'
|
278
|
-
| 'SATURATION'
|
279
|
-
| 'COLOR'
|
280
|
-
| 'LUMINOSITY';
|
281
|
-
|
282
|
-
interface Font {
|
283
|
-
fontName: FontName;
|
284
|
-
}
|
285
|
-
|
286
|
-
type Reaction = {action: Action; trigger: Trigger};
|
287
|
-
|
288
|
-
type Action =
|
289
|
-
| {readonly type: 'BACK' | 'CLOSE'}
|
290
|
-
| {readonly type: 'URL'; url: string}
|
291
|
-
| {
|
292
|
-
readonly type: 'NODE';
|
293
|
-
readonly destinationId: string | null;
|
294
|
-
readonly navigation: Navigation;
|
295
|
-
readonly transition: Transition | null;
|
296
|
-
readonly preserveScrollPosition: boolean;
|
297
|
-
|
298
|
-
// Only present if navigation == "OVERLAY" and the destination uses
|
299
|
-
// overlay position type "RELATIVE"
|
300
|
-
readonly overlayRelativePosition?: Vector;
|
301
|
-
};
|
302
|
-
|
303
|
-
interface SimpleTransition {
|
304
|
-
readonly type: 'DISSOLVE' | 'SMART_ANIMATE';
|
305
|
-
readonly easing: Easing;
|
306
|
-
readonly duration: number;
|
307
|
-
}
|
308
|
-
|
309
|
-
interface DirectionalTransition {
|
310
|
-
readonly type: 'MOVE_IN' | 'MOVE_OUT' | 'PUSH' | 'SLIDE_IN' | 'SLIDE_OUT';
|
311
|
-
readonly direction: 'LEFT' | 'RIGHT' | 'TOP' | 'BOTTOM';
|
312
|
-
readonly matchLayers: boolean;
|
313
|
-
|
314
|
-
readonly easing: Easing;
|
315
|
-
readonly duration: number;
|
316
|
-
}
|
317
|
-
|
318
|
-
type Transition = SimpleTransition | DirectionalTransition;
|
319
|
-
|
320
|
-
type Trigger =
|
321
|
-
| {readonly type: 'ON_CLICK' | 'ON_HOVER' | 'ON_PRESS' | 'ON_DRAG'}
|
322
|
-
| {readonly type: 'AFTER_TIMEOUT'; readonly timeout: number}
|
323
|
-
| {
|
324
|
-
readonly type: 'MOUSE_ENTER' | 'MOUSE_LEAVE' | 'MOUSE_UP' | 'MOUSE_DOWN';
|
325
|
-
readonly delay: number;
|
326
|
-
};
|
327
|
-
|
328
|
-
type Navigation = 'NAVIGATE' | 'SWAP' | 'OVERLAY';
|
329
|
-
|
330
|
-
interface Easing {
|
331
|
-
readonly type: 'EASE_IN' | 'EASE_OUT' | 'EASE_IN_AND_OUT' | 'LINEAR';
|
332
|
-
readonly easingFunctionCubicBezier?: EasingFunctionBezier;
|
333
|
-
}
|
334
|
-
|
335
|
-
interface EasingFunctionBezier {
|
336
|
-
x1: number;
|
337
|
-
y1: number;
|
338
|
-
x2: number;
|
339
|
-
y2: number;
|
340
|
-
}
|
341
|
-
|
342
|
-
type OverflowDirection = 'NONE' | 'HORIZONTAL' | 'VERTICAL' | 'BOTH';
|
343
|
-
|
344
|
-
type OverlayPositionType =
|
345
|
-
| 'CENTER'
|
346
|
-
| 'TOP_LEFT'
|
347
|
-
| 'TOP_CENTER'
|
348
|
-
| 'TOP_RIGHT'
|
349
|
-
| 'BOTTOM_LEFT'
|
350
|
-
| 'BOTTOM_CENTER'
|
351
|
-
| 'BOTTOM_RIGHT'
|
352
|
-
| 'MANUAL';
|
353
|
-
|
354
|
-
type OverlayBackground =
|
355
|
-
| {readonly type: 'NONE'}
|
356
|
-
| {readonly type: 'SOLID_COLOR'; readonly color: RGBA};
|
357
|
-
|
358
|
-
type OverlayBackgroundInteraction = 'NONE' | 'CLOSE_ON_CLICK_OUTSIDE';
|
359
|
-
|
360
|
-
type PublishStatus = 'UNPUBLISHED' | 'CURRENT' | 'CHANGED';
|
361
|
-
|
362
|
-
////////////////////////////////////////////////////////////////////////////////
|
363
|
-
// Mixins
|
364
|
-
|
365
|
-
interface BaseNodeMixin {
|
366
|
-
readonly id: string;
|
367
|
-
readonly parent: (BaseNode & ChildrenMixin) | null;
|
368
|
-
name: string; // Note: setting this also sets `autoRename` to false on TextNodes
|
369
|
-
readonly removed: boolean;
|
370
|
-
toString(): string;
|
371
|
-
remove(): void;
|
372
|
-
|
373
|
-
getPluginData(key: string): string;
|
374
|
-
setPluginData(key: string, value: string): void;
|
375
|
-
|
376
|
-
// Namespace is a string that must be at least 3 alphanumeric characters, and should
|
377
|
-
// be a name related to your plugin. Other plugins will be able to read this data.
|
378
|
-
getSharedPluginData(namespace: string, key: string): string;
|
379
|
-
setSharedPluginData(namespace: string, key: string, value: string): void;
|
380
|
-
setRelaunchData(data: {[command: string]: /* description */ string}): void;
|
381
|
-
}
|
382
|
-
|
383
|
-
interface SceneNodeMixin {
|
384
|
-
visible: boolean;
|
385
|
-
locked: boolean;
|
386
|
-
}
|
387
|
-
|
388
|
-
interface ChildrenMixin {
|
389
|
-
readonly children: ReadonlyArray<SceneNode>;
|
390
|
-
|
391
|
-
appendChild(child: SceneNode): void;
|
392
|
-
insertChild(index: number, child: SceneNode): void;
|
393
|
-
|
394
|
-
findChildren(callback?: (node: SceneNode) => boolean): SceneNode[];
|
395
|
-
findChild(callback: (node: SceneNode) => boolean): SceneNode | null;
|
396
|
-
|
397
|
-
/**
|
398
|
-
* If you only need to search immediate children, it is much faster
|
399
|
-
* to call node.children.filter(callback) or node.findChildren(callback)
|
400
|
-
*/
|
401
|
-
findAll(callback?: (node: SceneNode) => boolean): SceneNode[];
|
402
|
-
|
403
|
-
/**
|
404
|
-
* If you only need to search immediate children, it is much faster
|
405
|
-
* to call node.children.find(callback) or node.findChild(callback)
|
406
|
-
*/
|
407
|
-
findOne(callback: (node: SceneNode) => boolean): SceneNode | null;
|
408
|
-
}
|
409
|
-
|
410
|
-
interface ConstraintMixin {
|
411
|
-
constraints: Constraints;
|
412
|
-
}
|
413
|
-
|
414
|
-
interface LayoutMixin {
|
415
|
-
readonly absoluteTransform: Transform;
|
416
|
-
relativeTransform: Transform;
|
417
|
-
x: number;
|
418
|
-
y: number;
|
419
|
-
rotation: number; // In degrees
|
420
|
-
|
421
|
-
readonly width: number;
|
422
|
-
readonly height: number;
|
423
|
-
constrainProportions: boolean;
|
424
|
-
|
425
|
-
layoutAlign: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH'; // applicable only inside auto-layout frames
|
426
|
-
|
427
|
-
resize(width: number, height: number): void;
|
428
|
-
resizeWithoutConstraints(width: number, height: number): void;
|
429
|
-
rescale(scale: number): void;
|
430
|
-
}
|
431
|
-
|
432
|
-
interface BlendMixin {
|
433
|
-
opacity: number;
|
434
|
-
blendMode: BlendMode;
|
435
|
-
isMask: boolean;
|
436
|
-
effects: ReadonlyArray<Effect>;
|
437
|
-
effectStyleId: string;
|
438
|
-
}
|
439
|
-
|
440
|
-
interface ContainerMixin {
|
441
|
-
expanded: boolean;
|
442
|
-
backgrounds: ReadonlyArray<Paint>; // DEPRECATED: use 'fills' instead
|
443
|
-
backgroundStyleId: string; // DEPRECATED: use 'fillStyleId' instead
|
444
|
-
}
|
445
|
-
|
446
|
-
type StrokeCap =
|
447
|
-
| 'NONE'
|
448
|
-
| 'ROUND'
|
449
|
-
| 'SQUARE'
|
450
|
-
| 'ARROW_LINES'
|
451
|
-
| 'ARROW_EQUILATERAL';
|
452
|
-
type StrokeJoin = 'MITER' | 'BEVEL' | 'ROUND';
|
453
|
-
type HandleMirroring = 'NONE' | 'ANGLE' | 'ANGLE_AND_LENGTH';
|
454
|
-
|
455
|
-
interface GeometryMixin {
|
456
|
-
fills: ReadonlyArray<Paint>;
|
457
|
-
strokes: ReadonlyArray<Paint>;
|
458
|
-
strokeWeight: number;
|
459
|
-
strokeMiterLimit: number;
|
460
|
-
strokeAlign: 'CENTER' | 'INSIDE' | 'OUTSIDE';
|
461
|
-
strokeCap: StrokeCap;
|
462
|
-
strokeJoin: StrokeJoin;
|
463
|
-
dashPattern: ReadonlyArray<number>;
|
464
|
-
fillStyleId: string;
|
465
|
-
strokeStyleId: string;
|
466
|
-
outlineStroke(): VectorNode | null;
|
467
|
-
}
|
468
|
-
|
469
|
-
interface CornerMixin {
|
470
|
-
cornerRadius: number;
|
471
|
-
cornerSmoothing: number;
|
472
|
-
}
|
473
|
-
|
474
|
-
interface RectangleCornerMixin {
|
475
|
-
topLeftRadius: number;
|
476
|
-
topRightRadius: number;
|
477
|
-
bottomLeftRadius: number;
|
478
|
-
bottomRightRadius: number;
|
479
|
-
}
|
480
|
-
|
481
|
-
interface ExportMixin {
|
482
|
-
exportSettings: ReadonlyArray<ExportSettings>;
|
483
|
-
exportAsync(settings?: ExportSettings): Promise<Uint8Array>; // Defaults to PNG format
|
484
|
-
}
|
485
|
-
|
486
|
-
interface ReactionMixin {
|
487
|
-
readonly reactions: ReadonlyArray<Reaction>;
|
488
|
-
}
|
489
|
-
|
490
|
-
interface DefaultShapeMixin
|
491
|
-
extends BaseNodeMixin,
|
492
|
-
SceneNodeMixin,
|
493
|
-
ReactionMixin,
|
494
|
-
BlendMixin,
|
495
|
-
GeometryMixin,
|
496
|
-
LayoutMixin,
|
497
|
-
ExportMixin {}
|
498
|
-
|
499
|
-
interface DefaultFrameMixin
|
500
|
-
extends BaseNodeMixin,
|
501
|
-
SceneNodeMixin,
|
502
|
-
ReactionMixin,
|
503
|
-
ChildrenMixin,
|
504
|
-
ContainerMixin,
|
505
|
-
GeometryMixin,
|
506
|
-
CornerMixin,
|
507
|
-
RectangleCornerMixin,
|
508
|
-
BlendMixin,
|
509
|
-
ConstraintMixin,
|
510
|
-
LayoutMixin,
|
511
|
-
ExportMixin {
|
512
|
-
layoutMode: 'NONE' | 'HORIZONTAL' | 'VERTICAL';
|
513
|
-
counterAxisSizingMode: 'FIXED' | 'AUTO'; // applicable only if layoutMode != "NONE"
|
514
|
-
horizontalPadding: number; // applicable only if layoutMode != "NONE"
|
515
|
-
verticalPadding: number; // applicable only if layoutMode != "NONE"
|
516
|
-
itemSpacing: number; // applicable only if layoutMode != "NONE"
|
517
|
-
|
518
|
-
layoutGrids: ReadonlyArray<LayoutGrid>;
|
519
|
-
gridStyleId: string;
|
520
|
-
clipsContent: boolean;
|
521
|
-
guides: ReadonlyArray<Guide>;
|
522
|
-
|
523
|
-
overflowDirection: OverflowDirection;
|
524
|
-
numberOfFixedChildren: number;
|
525
|
-
|
526
|
-
readonly overlayPositionType: OverlayPositionType;
|
527
|
-
readonly overlayBackground: OverlayBackground;
|
528
|
-
readonly overlayBackgroundInteraction: OverlayBackgroundInteraction;
|
529
|
-
}
|
530
|
-
|
531
|
-
////////////////////////////////////////////////////////////////////////////////
|
532
|
-
// Nodes
|
533
|
-
|
534
|
-
interface DocumentNode extends BaseNodeMixin {
|
535
|
-
readonly type: 'DOCUMENT';
|
536
|
-
|
537
|
-
readonly children: ReadonlyArray<PageNode>;
|
538
|
-
|
539
|
-
appendChild(child: PageNode): void;
|
540
|
-
insertChild(index: number, child: PageNode): void;
|
541
|
-
findChildren(callback?: (node: PageNode) => boolean): Array<PageNode>;
|
542
|
-
findChild(callback: (node: PageNode) => boolean): PageNode | null;
|
543
|
-
|
544
|
-
/**
|
545
|
-
* If you only need to search immediate children, it is much faster
|
546
|
-
* to call node.children.filter(callback) or node.findChildren(callback)
|
547
|
-
*/
|
548
|
-
findAll(
|
549
|
-
callback?: (node: PageNode | SceneNode) => boolean
|
550
|
-
): Array<PageNode | SceneNode>;
|
551
|
-
|
552
|
-
/**
|
553
|
-
* If you only need to search immediate children, it is much faster
|
554
|
-
* to call node.children.find(callback) or node.findChild(callback)
|
555
|
-
*/
|
556
|
-
findOne(
|
557
|
-
callback: (node: PageNode | SceneNode) => boolean
|
558
|
-
): PageNode | SceneNode | null;
|
559
|
-
}
|
560
|
-
|
561
|
-
interface PageNode extends BaseNodeMixin, ChildrenMixin, ExportMixin {
|
562
|
-
readonly type: 'PAGE';
|
563
|
-
clone(): PageNode;
|
564
|
-
|
565
|
-
guides: ReadonlyArray<Guide>;
|
566
|
-
selection: ReadonlyArray<SceneNode>;
|
567
|
-
selectedTextRange: {node: TextNode; start: number; end: number} | null;
|
568
|
-
|
569
|
-
backgrounds: ReadonlyArray<Paint>;
|
570
|
-
|
571
|
-
readonly prototypeStartNode:
|
572
|
-
| FrameNode
|
573
|
-
| GroupNode
|
574
|
-
| ComponentNode
|
575
|
-
| InstanceNode
|
576
|
-
| null;
|
577
|
-
}
|
578
|
-
|
579
|
-
export interface FrameNode extends DefaultFrameMixin {
|
580
|
-
readonly type: 'FRAME';
|
581
|
-
clone(): FrameNode;
|
582
|
-
}
|
583
|
-
|
584
|
-
interface GroupNode
|
585
|
-
extends BaseNodeMixin,
|
586
|
-
SceneNodeMixin,
|
587
|
-
ReactionMixin,
|
588
|
-
ChildrenMixin,
|
589
|
-
ContainerMixin,
|
590
|
-
BlendMixin,
|
591
|
-
LayoutMixin,
|
592
|
-
ExportMixin {
|
593
|
-
readonly type: 'GROUP';
|
594
|
-
clone(): GroupNode;
|
595
|
-
}
|
596
|
-
|
597
|
-
interface SliceNode
|
598
|
-
extends BaseNodeMixin,
|
599
|
-
SceneNodeMixin,
|
600
|
-
LayoutMixin,
|
601
|
-
ExportMixin {
|
602
|
-
readonly type: 'SLICE';
|
603
|
-
clone(): SliceNode;
|
604
|
-
}
|
605
|
-
|
606
|
-
interface RectangleNode
|
607
|
-
extends DefaultShapeMixin,
|
608
|
-
ConstraintMixin,
|
609
|
-
CornerMixin,
|
610
|
-
RectangleCornerMixin {
|
611
|
-
readonly type: 'RECTANGLE';
|
612
|
-
clone(): RectangleNode;
|
613
|
-
}
|
614
|
-
|
615
|
-
interface LineNode extends DefaultShapeMixin, ConstraintMixin {
|
616
|
-
readonly type: 'LINE';
|
617
|
-
clone(): LineNode;
|
618
|
-
}
|
619
|
-
|
620
|
-
export interface EllipseNode
|
621
|
-
extends DefaultShapeMixin,
|
622
|
-
ConstraintMixin,
|
623
|
-
CornerMixin {
|
624
|
-
readonly type: 'ELLIPSE';
|
625
|
-
clone(): EllipseNode;
|
626
|
-
arcData: ArcData;
|
627
|
-
}
|
628
|
-
|
629
|
-
interface PolygonNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
|
630
|
-
readonly type: 'POLYGON';
|
631
|
-
clone(): PolygonNode;
|
632
|
-
pointCount: number;
|
633
|
-
}
|
634
|
-
|
635
|
-
interface StarNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
|
636
|
-
readonly type: 'STAR';
|
637
|
-
clone(): StarNode;
|
638
|
-
pointCount: number;
|
639
|
-
innerRadius: number;
|
640
|
-
}
|
641
|
-
|
642
|
-
interface VectorNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
|
643
|
-
readonly type: 'VECTOR';
|
644
|
-
clone(): VectorNode;
|
645
|
-
vectorNetwork: VectorNetwork;
|
646
|
-
vectorPaths: VectorPaths;
|
647
|
-
handleMirroring: HandleMirroring;
|
648
|
-
}
|
649
|
-
|
650
|
-
interface TextNode extends DefaultShapeMixin, ConstraintMixin {
|
651
|
-
readonly type: 'TEXT';
|
652
|
-
clone(): TextNode;
|
653
|
-
readonly hasMissingFont: boolean;
|
654
|
-
textAlignHorizontal: 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFIED';
|
655
|
-
textAlignVertical: 'TOP' | 'CENTER' | 'BOTTOM';
|
656
|
-
textAutoResize: 'NONE' | 'WIDTH_AND_HEIGHT' | 'HEIGHT';
|
657
|
-
paragraphIndent: number;
|
658
|
-
paragraphSpacing: number;
|
659
|
-
autoRename: boolean;
|
660
|
-
|
661
|
-
textStyleId: string;
|
662
|
-
fontSize: number;
|
663
|
-
fontName: FontName;
|
664
|
-
textCase: TextCase;
|
665
|
-
textDecoration: TextDecoration;
|
666
|
-
letterSpacing: LetterSpacing;
|
667
|
-
lineHeight: LineHeight;
|
668
|
-
|
669
|
-
characters: string;
|
670
|
-
insertCharacters(
|
671
|
-
start: number,
|
672
|
-
characters: string,
|
673
|
-
useStyle?: 'BEFORE' | 'AFTER'
|
674
|
-
): void;
|
675
|
-
deleteCharacters(start: number, end: number): void;
|
676
|
-
|
677
|
-
getRangeFontSize(start: number, end: number): number;
|
678
|
-
setRangeFontSize(start: number, end: number, value: number): void;
|
679
|
-
getRangeFontName(start: number, end: number): FontName;
|
680
|
-
setRangeFontName(start: number, end: number, value: FontName): void;
|
681
|
-
getRangeTextCase(start: number, end: number): TextCase;
|
682
|
-
setRangeTextCase(start: number, end: number, value: TextCase): void;
|
683
|
-
getRangeTextDecoration(start: number, end: number): TextDecoration;
|
684
|
-
setRangeTextDecoration(
|
685
|
-
start: number,
|
686
|
-
end: number,
|
687
|
-
value: TextDecoration
|
688
|
-
): void;
|
689
|
-
getRangeLetterSpacing(start: number, end: number): LetterSpacing;
|
690
|
-
setRangeLetterSpacing(start: number, end: number, value: LetterSpacing): void;
|
691
|
-
getRangeLineHeight(start: number, end: number): LineHeight;
|
692
|
-
setRangeLineHeight(start: number, end: number, value: LineHeight): void;
|
693
|
-
getRangeFills(start: number, end: number): Paint[];
|
694
|
-
setRangeFills(start: number, end: number, value: Paint[]): void;
|
695
|
-
getRangeTextStyleId(start: number, end: number): string;
|
696
|
-
setRangeTextStyleId(start: number, end: number, value: string): void;
|
697
|
-
getRangeFillStyleId(start: number, end: number): string;
|
698
|
-
setRangeFillStyleId(start: number, end: number, value: string): void;
|
699
|
-
}
|
700
|
-
|
701
|
-
interface ComponentNode extends DefaultFrameMixin {
|
702
|
-
readonly type: 'COMPONENT';
|
703
|
-
clone(): ComponentNode;
|
704
|
-
|
705
|
-
createInstance(): InstanceNode;
|
706
|
-
description: string;
|
707
|
-
readonly remote: boolean;
|
708
|
-
readonly key: string; // The key to use with "importComponentByKeyAsync"
|
709
|
-
getPublishStatusAsync(): Promise<PublishStatus>;
|
710
|
-
}
|
711
|
-
|
712
|
-
interface InstanceNode extends DefaultFrameMixin {
|
713
|
-
readonly type: 'INSTANCE';
|
714
|
-
clone(): InstanceNode;
|
715
|
-
mainComponent: ComponentNode;
|
716
|
-
scaleFactor: number;
|
717
|
-
}
|
718
|
-
|
719
|
-
interface BooleanOperationNode
|
720
|
-
extends DefaultShapeMixin,
|
721
|
-
ChildrenMixin,
|
722
|
-
CornerMixin {
|
723
|
-
readonly type: 'BOOLEAN_OPERATION';
|
724
|
-
clone(): BooleanOperationNode;
|
725
|
-
booleanOperation: 'UNION' | 'INTERSECT' | 'SUBTRACT' | 'EXCLUDE';
|
726
|
-
|
727
|
-
expanded: boolean;
|
728
|
-
}
|
729
|
-
|
730
|
-
type BaseNode = DocumentNode | PageNode | SceneNode;
|
731
|
-
|
732
|
-
export type SceneNode =
|
733
|
-
| SliceNode
|
734
|
-
| FrameNode
|
735
|
-
| GroupNode
|
736
|
-
| ComponentNode
|
737
|
-
| InstanceNode
|
738
|
-
| BooleanOperationNode
|
739
|
-
| VectorNode
|
740
|
-
| StarNode
|
741
|
-
| LineNode
|
742
|
-
| EllipseNode
|
743
|
-
| PolygonNode
|
744
|
-
| RectangleNode
|
745
|
-
| TextNode;
|
746
|
-
|
747
|
-
type NodeType =
|
748
|
-
| 'DOCUMENT'
|
749
|
-
| 'PAGE'
|
750
|
-
| 'SLICE'
|
751
|
-
| 'FRAME'
|
752
|
-
| 'GROUP'
|
753
|
-
| 'COMPONENT'
|
754
|
-
| 'INSTANCE'
|
755
|
-
| 'BOOLEAN_OPERATION'
|
756
|
-
| 'VECTOR'
|
757
|
-
| 'STAR'
|
758
|
-
| 'LINE'
|
759
|
-
| 'ELLIPSE'
|
760
|
-
| 'POLYGON'
|
761
|
-
| 'RECTANGLE'
|
762
|
-
| 'TEXT';
|
763
|
-
|
764
|
-
////////////////////////////////////////////////////////////////////////////////
|
765
|
-
// Styles
|
766
|
-
type StyleType = 'PAINT' | 'TEXT' | 'EFFECT' | 'GRID';
|
767
|
-
|
768
|
-
interface BaseStyle {
|
769
|
-
readonly id: string;
|
770
|
-
readonly type: StyleType;
|
771
|
-
name: string;
|
772
|
-
description: string;
|
773
|
-
readonly remote: boolean;
|
774
|
-
readonly key: string; // The key to use with "importStyleByKeyAsync"
|
775
|
-
remove(): void;
|
776
|
-
getPublishStatusAsync(): Promise<PublishStatus>;
|
777
|
-
}
|
778
|
-
|
779
|
-
interface PaintStyle extends BaseStyle {
|
780
|
-
type: 'PAINT';
|
781
|
-
paints: ReadonlyArray<Paint>;
|
782
|
-
}
|
783
|
-
|
784
|
-
interface TextStyle extends BaseStyle {
|
785
|
-
type: 'TEXT';
|
786
|
-
fontSize: number;
|
787
|
-
textDecoration: TextDecoration;
|
788
|
-
fontName: FontName;
|
789
|
-
letterSpacing: LetterSpacing;
|
790
|
-
lineHeight: LineHeight;
|
791
|
-
paragraphIndent: number;
|
792
|
-
paragraphSpacing: number;
|
793
|
-
textCase: TextCase;
|
794
|
-
}
|
795
|
-
|
796
|
-
interface EffectStyle extends BaseStyle {
|
797
|
-
type: 'EFFECT';
|
798
|
-
effects: ReadonlyArray<Effect>;
|
799
|
-
}
|
800
|
-
|
801
|
-
interface GridStyle extends BaseStyle {
|
802
|
-
type: 'GRID';
|
803
|
-
layoutGrids: ReadonlyArray<LayoutGrid>;
|
804
|
-
}
|