@oicl/openbridge-webcomponents 0.0.8 → 0.0.10
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/.release-it.json +12 -0
- package/.storybook/main.ts +17 -0
- package/.storybook/preview.ts +0 -1
- package/CHANGELOG.md +118 -41
- package/__snapshots__/application-topbar--inactive.png +0 -0
- package/__snapshots__/button-button--raised-disabled.png +0 -0
- package/__snapshots__/button-rich-button--with-graphic-info.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 +679 -297
- 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/button/button.css.js +2 -2
- package/dist/components/navigation-item/navigation-item.css.js +2 -1
- package/dist/components/navigation-item/navigation-item.css.js.map +1 -1
- package/dist/components/notification-button/notification-button.css.js +1 -1
- package/dist/components/rich-button/rich-button.css.js +20 -10
- package/dist/components/rich-button/rich-button.css.js.map +1 -1
- package/dist/components/rich-button/rich-button.d.ts +1 -0
- package/dist/components/rich-button/rich-button.d.ts.map +1 -1
- package/dist/components/rich-button/rich-button.js +5 -0
- package/dist/components/rich-button/rich-button.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/fix-generated.cjs +1 -0
- package/package.json +20 -26
- 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/rich-button/rich-button.css +15 -2
- package/src/components/rich-button/rich-button.stories.ts +36 -0
- package/src/components/rich-button/rich-button.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/.yarnrc.yml +0 -1
- 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
- package/test.svg +0 -3
@@ -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
|
-
}
|