@canva/design 1.11.0-beta.1 → 2.0.0
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/index.d.ts +2085 -0
- package/lib/cjs/sdk/design/index.js +21 -0
- package/lib/cjs/sdk/design/public.js +28 -29
- package/lib/esm/sdk/design/index.js +4 -0
- package/lib/esm/sdk/design/public.js +21 -78
- package/package.json +10 -10
- package/beta.d.ts +0 -2058
- package/lib/cjs/sdk/design/beta.js +0 -49
- package/lib/esm/sdk/design/beta.js +0 -26
package/beta.d.ts
DELETED
|
@@ -1,2058 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Adds an audio track to the user's design.
|
|
3
|
-
* @public
|
|
4
|
-
* @param audioTrack - The audio track to add to the user's design.
|
|
5
|
-
*/
|
|
6
|
-
export declare function addAudioTrack(audioTrack: AudioTrack): Promise<void>;
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* @beta
|
|
10
|
-
* Adds a native element to the user's design.
|
|
11
|
-
* @param element - The element to add to the user's design.
|
|
12
|
-
*/
|
|
13
|
-
export declare function addNativeElement(
|
|
14
|
-
element:
|
|
15
|
-
| NativeElement
|
|
16
|
-
| NativeElementWithBox
|
|
17
|
-
| NativeTableElement
|
|
18
|
-
| NativeRichtextElement
|
|
19
|
-
| NativeRichtextElementWithBox
|
|
20
|
-
): Promise<void>;
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* @public
|
|
24
|
-
* Adds a native element to the user's design.
|
|
25
|
-
* @param element - The element to add to the user's design.
|
|
26
|
-
*/
|
|
27
|
-
export declare function addNativeElement(
|
|
28
|
-
element: NativeElement | NativeElementWithBox
|
|
29
|
-
): Promise<void>;
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* @public
|
|
33
|
-
* Adds a new page immediately after the currently selected page.
|
|
34
|
-
* @param opts - Configuration for the new page to be added.
|
|
35
|
-
*/
|
|
36
|
-
export declare function addPage(opts?: {
|
|
37
|
-
/** Elements to be added to the page */
|
|
38
|
-
elements?: NativeElementWithBox[];
|
|
39
|
-
/**
|
|
40
|
-
* The page background. This can be a solid color, an image or a video.
|
|
41
|
-
**/
|
|
42
|
-
background?: PageBackgroundFill;
|
|
43
|
-
/** A page title which must be no longer than 255 characters */
|
|
44
|
-
title?: string;
|
|
45
|
-
}): Promise<void>;
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* @public
|
|
49
|
-
* Describes any alt-text that will be added for a11y.
|
|
50
|
-
*/
|
|
51
|
-
export declare type AltText = {
|
|
52
|
-
/**
|
|
53
|
-
* The text that will appear as alt-text.
|
|
54
|
-
*/
|
|
55
|
-
text: string;
|
|
56
|
-
/**
|
|
57
|
-
* An optional property that will determine whether text is shown in just the editor or both editor and view mode.
|
|
58
|
-
* If set to true, alt-text will only be rendered inside the editor.
|
|
59
|
-
* If set to false or omitted, alt-text will be rendered in both the editor and in view only mode.
|
|
60
|
-
*/
|
|
61
|
-
decorative: boolean | undefined;
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
/**
|
|
65
|
-
* @public
|
|
66
|
-
* A callback that runs when an app element's data is created or updated,
|
|
67
|
-
* or when the user selects an existing app element.
|
|
68
|
-
*/
|
|
69
|
-
export declare type AppElementChangeHandler<A extends AppElementData> = (
|
|
70
|
-
appElement:
|
|
71
|
-
| {
|
|
72
|
-
data: A;
|
|
73
|
-
version: number;
|
|
74
|
-
}
|
|
75
|
-
| undefined
|
|
76
|
-
) => void;
|
|
77
|
-
|
|
78
|
-
/**
|
|
79
|
-
* @public
|
|
80
|
-
* A client interface for managing app elements and app element data.
|
|
81
|
-
*/
|
|
82
|
-
export declare interface AppElementClient<A extends AppElementData> {
|
|
83
|
-
/**
|
|
84
|
-
* Attaches data to the selected app element or creates a new app element if one is not selected.
|
|
85
|
-
* If data already exists, it's overwritten.
|
|
86
|
-
* @param appElementData - The data to attach to the app element.
|
|
87
|
-
*/
|
|
88
|
-
addOrUpdateElement(appElementData: A, placement?: Placement): Promise<void>;
|
|
89
|
-
/**
|
|
90
|
-
* Registers a callback that runs when the app element's data is created or
|
|
91
|
-
* updated and when the user selects an existing app element.
|
|
92
|
-
* @param handler - The callback to run when the app element's data is changed
|
|
93
|
-
* and when the user selects an existing app element.
|
|
94
|
-
*/
|
|
95
|
-
registerOnElementChange(handler: AppElementChangeHandler<A>): void;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/**
|
|
99
|
-
* @public
|
|
100
|
-
* Configuration for an AppElementClient
|
|
101
|
-
*/
|
|
102
|
-
export declare type AppElementClientConfiguration<A extends AppElementData> = {
|
|
103
|
-
/**
|
|
104
|
-
* The AppElementRenderer to use when rendering the app element
|
|
105
|
-
*/
|
|
106
|
-
render: AppElementRenderer<A>;
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* @public
|
|
111
|
-
* The data an app can attach to an app element.
|
|
112
|
-
*/
|
|
113
|
-
export declare type AppElementData = Record<string, Value>;
|
|
114
|
-
|
|
115
|
-
/**
|
|
116
|
-
* @public
|
|
117
|
-
* A callback that runs when an app's element is changed.
|
|
118
|
-
*
|
|
119
|
-
* @remarks
|
|
120
|
-
* This callback must return one or more elements to render within the app element.
|
|
121
|
-
*/
|
|
122
|
-
export declare type AppElementRenderer<A extends AppElementData> = (
|
|
123
|
-
appElementData: A
|
|
124
|
-
) => AppElementRendererOutput;
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* @public
|
|
128
|
-
* A return value of {@link AppElementRenderer} function.
|
|
129
|
-
* It is an array of elements to render within an app element.
|
|
130
|
-
*/
|
|
131
|
-
export declare type AppElementRendererOutput = NativeSimpleElementWithBox[];
|
|
132
|
-
|
|
133
|
-
/**
|
|
134
|
-
* @public
|
|
135
|
-
* A unique identifier that references an app runtime process
|
|
136
|
-
*/
|
|
137
|
-
export declare type AppProcessId = string & {
|
|
138
|
-
__appProcessId: never;
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
/**
|
|
142
|
-
* @public
|
|
143
|
-
* Options for defining the drag-and-drop behavior of audio tracks.
|
|
144
|
-
*/
|
|
145
|
-
export declare type AudioDragConfig = {
|
|
146
|
-
/**
|
|
147
|
-
* The type of element.
|
|
148
|
-
*/
|
|
149
|
-
type: "AUDIO";
|
|
150
|
-
/**
|
|
151
|
-
* A function that returns a reference (ref) to an audio asset in Canva's backend.
|
|
152
|
-
*/
|
|
153
|
-
resolveAudioRef: () => Promise<{
|
|
154
|
-
ref: AudioRef;
|
|
155
|
-
}>;
|
|
156
|
-
/**
|
|
157
|
-
* The duration of the audio track, in milliseconds.
|
|
158
|
-
*/
|
|
159
|
-
durationMs: number;
|
|
160
|
-
/**
|
|
161
|
-
* A human readable title for the audio track.
|
|
162
|
-
*/
|
|
163
|
-
title: string;
|
|
164
|
-
};
|
|
165
|
-
|
|
166
|
-
/**
|
|
167
|
-
* @public
|
|
168
|
-
* A unique identifier that references an audio asset in Canva's backend.
|
|
169
|
-
*/
|
|
170
|
-
export declare type AudioRef = string & {
|
|
171
|
-
__audioRef: never;
|
|
172
|
-
};
|
|
173
|
-
|
|
174
|
-
/**
|
|
175
|
-
* @public
|
|
176
|
-
* An audio track that can be added to a user's design.
|
|
177
|
-
*/
|
|
178
|
-
export declare type AudioTrack = {
|
|
179
|
-
/**
|
|
180
|
-
* A unique identifier that references an audio asset in Canva's backend.
|
|
181
|
-
*/
|
|
182
|
-
ref: AudioRef;
|
|
183
|
-
};
|
|
184
|
-
|
|
185
|
-
/**
|
|
186
|
-
* @beta
|
|
187
|
-
* The boundaries of a rich text region.
|
|
188
|
-
*/
|
|
189
|
-
export declare type Bounds = {
|
|
190
|
-
/**
|
|
191
|
-
* The index of the character from which the region starts.
|
|
192
|
-
*
|
|
193
|
-
* @remarks
|
|
194
|
-
* A value of `0` means the region starts from the first character.
|
|
195
|
-
*/
|
|
196
|
-
index: number;
|
|
197
|
-
/**
|
|
198
|
-
* The length of the text region.
|
|
199
|
-
*/
|
|
200
|
-
length: number;
|
|
201
|
-
};
|
|
202
|
-
|
|
203
|
-
/**
|
|
204
|
-
* @public
|
|
205
|
-
* The dimensions, position, and rotation of an element.
|
|
206
|
-
*
|
|
207
|
-
* @remarks
|
|
208
|
-
* Units are relative to the parent container both in terms of position and size
|
|
209
|
-
*/
|
|
210
|
-
export declare type Box = Position & (WidthAndHeight | Width | Height);
|
|
211
|
-
|
|
212
|
-
/**
|
|
213
|
-
* @beta
|
|
214
|
-
* A cell for a NativeTableElement. Cells can have text content and a background color.
|
|
215
|
-
* A cell can also be sized by setting the colSpan and rowSpan values for how many columns
|
|
216
|
-
* and rows the cell occupies respectively.
|
|
217
|
-
*/
|
|
218
|
-
export declare type Cell = {
|
|
219
|
-
/**
|
|
220
|
-
* The text content of the table cell
|
|
221
|
-
*/
|
|
222
|
-
text?: NativeTextElement;
|
|
223
|
-
/**
|
|
224
|
-
* The background of the table cell
|
|
225
|
-
*/
|
|
226
|
-
fill?: Pick<Fill, "color">;
|
|
227
|
-
/**
|
|
228
|
-
* How many columns this cell occupies
|
|
229
|
-
*/
|
|
230
|
-
colSpan?: number;
|
|
231
|
-
/**
|
|
232
|
-
* How many rows this cell occupies
|
|
233
|
-
*/
|
|
234
|
-
rowSpan?: number;
|
|
235
|
-
};
|
|
236
|
-
|
|
237
|
-
declare type CommonImageDragConfig = {
|
|
238
|
-
/**
|
|
239
|
-
* The type of element.
|
|
240
|
-
*/
|
|
241
|
-
type: "IMAGE";
|
|
242
|
-
/**
|
|
243
|
-
* The dimensions of the preview image.
|
|
244
|
-
*
|
|
245
|
-
* @remarks
|
|
246
|
-
* The preview image is the image that users see under their cursor while dragging
|
|
247
|
-
* it into their design.
|
|
248
|
-
*/
|
|
249
|
-
previewSize: Dimensions;
|
|
250
|
-
};
|
|
251
|
-
|
|
252
|
-
/**
|
|
253
|
-
* @public
|
|
254
|
-
* A snapshot of some part of the document content.
|
|
255
|
-
*
|
|
256
|
-
* @remarks
|
|
257
|
-
* You can mutate the values in the `contents` array and then persist those changes with the `save` method.
|
|
258
|
-
*/
|
|
259
|
-
export declare interface ContentDraft<T> {
|
|
260
|
-
/**
|
|
261
|
-
* The selected content.
|
|
262
|
-
*/
|
|
263
|
-
readonly contents: readonly T[];
|
|
264
|
-
/**
|
|
265
|
-
* Saves changes made to items in the `contents` array.
|
|
266
|
-
* Once saved, those changes are reflected in the user's design.
|
|
267
|
-
*
|
|
268
|
-
* @remarks
|
|
269
|
-
* Any other changes to the content since calling the `read` method, such as the user editing the content directly, will be overwritten.
|
|
270
|
-
* Only properties that are different from the original state are written to the design.
|
|
271
|
-
*/
|
|
272
|
-
save(): Promise<void>;
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
/**
|
|
276
|
-
* @beta
|
|
277
|
-
* A type of content that can be read from a user's design.
|
|
278
|
-
*/
|
|
279
|
-
export declare type ContentType = "richtext";
|
|
280
|
-
|
|
281
|
-
/**
|
|
282
|
-
* @beta
|
|
283
|
-
* Options for configuring where content in a design should be queried from.
|
|
284
|
-
*/
|
|
285
|
-
declare type ContextOptions = {
|
|
286
|
-
context: "current_page";
|
|
287
|
-
};
|
|
288
|
-
|
|
289
|
-
/**
|
|
290
|
-
* @public
|
|
291
|
-
* Represents X and Y coordinates.
|
|
292
|
-
*/
|
|
293
|
-
export declare type Coordinates = {
|
|
294
|
-
/**
|
|
295
|
-
* Represents an X coordinate, in pixels.
|
|
296
|
-
*/
|
|
297
|
-
x: number;
|
|
298
|
-
/**
|
|
299
|
-
* Represents a Y coordinate, in pixels.
|
|
300
|
-
*/
|
|
301
|
-
y: number;
|
|
302
|
-
};
|
|
303
|
-
|
|
304
|
-
/**
|
|
305
|
-
* @beta
|
|
306
|
-
* Creates a new RichtextRange object, which contains methods to manipulate text.
|
|
307
|
-
*/
|
|
308
|
-
export declare function createRichtextRange(): RichtextRange;
|
|
309
|
-
|
|
310
|
-
/**
|
|
311
|
-
* @public
|
|
312
|
-
* Provides methods for interacting with design overlay
|
|
313
|
-
*/
|
|
314
|
-
export declare type DesignOverlay = {
|
|
315
|
-
/**
|
|
316
|
-
* Registers a callback that runs when an overlay canOpen status changed on a particular target.
|
|
317
|
-
*
|
|
318
|
-
* @remarks
|
|
319
|
-
* The callback fires immediately
|
|
320
|
-
*/
|
|
321
|
-
registerOnCanOpen<Target extends OverlayTarget>(opts: {
|
|
322
|
-
target: Target;
|
|
323
|
-
onCanOpen(event: OverlayOpenableEvent<Target>): void;
|
|
324
|
-
}): () => void;
|
|
325
|
-
};
|
|
326
|
-
|
|
327
|
-
/**
|
|
328
|
-
* @beta
|
|
329
|
-
* Provides methods for interacting with the user's selected content, such as images or text.
|
|
330
|
-
*/
|
|
331
|
-
export declare type DesignSelection = {
|
|
332
|
-
/**
|
|
333
|
-
* Registers a callback that runs when a user selects an element that contains the specified type of content.
|
|
334
|
-
*
|
|
335
|
-
* @remarks
|
|
336
|
-
* The callback fires immediately if content is already selected.
|
|
337
|
-
*/
|
|
338
|
-
registerOnChange<Scope extends SelectionScope>(opts: {
|
|
339
|
-
/**
|
|
340
|
-
* The type of content that, when selected, triggers the `onChange` callback.
|
|
341
|
-
*/
|
|
342
|
-
scope: Scope;
|
|
343
|
-
/**
|
|
344
|
-
* The callback to run when the selection changes.
|
|
345
|
-
*/
|
|
346
|
-
onChange(event: SelectionEvent<Scope>): void;
|
|
347
|
-
}): () => void;
|
|
348
|
-
};
|
|
349
|
-
|
|
350
|
-
/**
|
|
351
|
-
* @public
|
|
352
|
-
* JWT that contains the Design ID and App ID.
|
|
353
|
-
*/
|
|
354
|
-
export declare type DesignToken = {
|
|
355
|
-
token: string;
|
|
356
|
-
};
|
|
357
|
-
|
|
358
|
-
/**
|
|
359
|
-
* @public
|
|
360
|
-
* Represents a width and a height.
|
|
361
|
-
*/
|
|
362
|
-
export declare type Dimensions = {
|
|
363
|
-
/**
|
|
364
|
-
* Represents a width, in pixels.
|
|
365
|
-
*/
|
|
366
|
-
width: number;
|
|
367
|
-
/**
|
|
368
|
-
* Represents a height, in pixels.
|
|
369
|
-
*/
|
|
370
|
-
height: number;
|
|
371
|
-
};
|
|
372
|
-
|
|
373
|
-
/**
|
|
374
|
-
* @public
|
|
375
|
-
* Callbacks that run during the lifecycle of a drag-and-drop.
|
|
376
|
-
*/
|
|
377
|
-
export declare type DragCallback = {
|
|
378
|
-
/**
|
|
379
|
-
* A callback that runs when the user starts dragging an element into their design.
|
|
380
|
-
*
|
|
381
|
-
* @param element - The element being dragged into the user's design.
|
|
382
|
-
*/
|
|
383
|
-
onDragStart: (element: HTMLElement) => void;
|
|
384
|
-
/**
|
|
385
|
-
* A callback that runs when the user finishes dragging an element into their design.
|
|
386
|
-
*
|
|
387
|
-
* @param element - The element being dragged into the user's design.
|
|
388
|
-
*/
|
|
389
|
-
onDragEnd: (element: HTMLElement) => void;
|
|
390
|
-
};
|
|
391
|
-
|
|
392
|
-
/**
|
|
393
|
-
* @public
|
|
394
|
-
* Options for making an element draggable.
|
|
395
|
-
*/
|
|
396
|
-
export declare type DraggableElementData = ElementData | ImageElementData;
|
|
397
|
-
|
|
398
|
-
/**
|
|
399
|
-
* @public
|
|
400
|
-
* Represents a drag start event that occurs when initiating a drag-and-drop behavior inside the app.
|
|
401
|
-
*/
|
|
402
|
-
export declare type DragStartEvent<E extends Element> = Pick<
|
|
403
|
-
DragEvent,
|
|
404
|
-
"dataTransfer" | "currentTarget" | "preventDefault" | "clientX" | "clientY"
|
|
405
|
-
> & {
|
|
406
|
-
currentTarget: E;
|
|
407
|
-
};
|
|
408
|
-
|
|
409
|
-
/**
|
|
410
|
-
* @beta
|
|
411
|
-
* Options for configuring how a design is read.
|
|
412
|
-
*/
|
|
413
|
-
export declare type EditContentOptions<T extends ContentType> = {
|
|
414
|
-
contentType: T;
|
|
415
|
-
} & ContextOptions;
|
|
416
|
-
|
|
417
|
-
/**
|
|
418
|
-
* @public
|
|
419
|
-
* Options for making an `HTMLElement` draggable.
|
|
420
|
-
*/
|
|
421
|
-
export declare type ElementData = DragCallback & {
|
|
422
|
-
/**
|
|
423
|
-
* The element to be made draggable.
|
|
424
|
-
*/
|
|
425
|
-
node: HTMLElement;
|
|
426
|
-
/**
|
|
427
|
-
* Options for defining the drag-and-drop behavior.
|
|
428
|
-
*
|
|
429
|
-
* @remarks
|
|
430
|
-
* This data is required because it can't be inferred from the `node` property.
|
|
431
|
-
*/
|
|
432
|
-
dragData: UserSuppliedDragData;
|
|
433
|
-
};
|
|
434
|
-
|
|
435
|
-
/**
|
|
436
|
-
* @public
|
|
437
|
-
*
|
|
438
|
-
* Options for defining the drag-and-drop behaviour for embeds.
|
|
439
|
-
*/
|
|
440
|
-
export declare type EmbedDragConfig = {
|
|
441
|
-
/**
|
|
442
|
-
* The type of element.
|
|
443
|
-
*/
|
|
444
|
-
type: "EMBED";
|
|
445
|
-
/**
|
|
446
|
-
* The dimensions of the preview image.
|
|
447
|
-
* The preview image is the image that users see under their cursor
|
|
448
|
-
* while dragging it into their design.
|
|
449
|
-
*/
|
|
450
|
-
previewSize: Dimensions;
|
|
451
|
-
/**
|
|
452
|
-
* Represents the preview image of the embed.
|
|
453
|
-
*/
|
|
454
|
-
previewUrl: string;
|
|
455
|
-
/**
|
|
456
|
-
* Represents the embed source url.
|
|
457
|
-
*/
|
|
458
|
-
embedUrl: string;
|
|
459
|
-
};
|
|
460
|
-
|
|
461
|
-
/**
|
|
462
|
-
* @public
|
|
463
|
-
* Export aborted response
|
|
464
|
-
*
|
|
465
|
-
* @remarks
|
|
466
|
-
* Ane export flow is considered aborted when a user closes
|
|
467
|
-
* the export options menu.
|
|
468
|
-
*/
|
|
469
|
-
export declare type ExportAborted = {
|
|
470
|
-
/**
|
|
471
|
-
* The status of the export flow when the user has aborted the export menu.
|
|
472
|
-
*/
|
|
473
|
-
status: "ABORTED";
|
|
474
|
-
};
|
|
475
|
-
|
|
476
|
-
/**
|
|
477
|
-
* @public
|
|
478
|
-
* The exported file.
|
|
479
|
-
*/
|
|
480
|
-
export declare type ExportBlob = {
|
|
481
|
-
/**
|
|
482
|
-
* The URL of the exported design.
|
|
483
|
-
*
|
|
484
|
-
* @remarks
|
|
485
|
-
* If the user's design contains multiple pages but is exported in a format that doesn't support multiple pages, the URL will point to a ZIP file that contains each page as a separate file.
|
|
486
|
-
*
|
|
487
|
-
* For example:
|
|
488
|
-
*
|
|
489
|
-
* - If a single-page design is exported as a JPG, the URL will point to a JPG file
|
|
490
|
-
* - If a multi-page design is exported as a JPG, the URL will point to a ZIP file that contains a separate JPG file for each page
|
|
491
|
-
* - If a multi-page design is exported as a PDF, the URL will point to a PDF file that contains all of the pages
|
|
492
|
-
*
|
|
493
|
-
* The following file types support multiple pages:
|
|
494
|
-
*
|
|
495
|
-
* - `"GIF"`
|
|
496
|
-
* - `"PDF_STANDARD"`
|
|
497
|
-
* - `"PPTX"`
|
|
498
|
-
* - `"VIDEO"`
|
|
499
|
-
*
|
|
500
|
-
* The following file types do not support multiple pages:
|
|
501
|
-
*
|
|
502
|
-
* - `"JPG"`
|
|
503
|
-
* - `"PNG"`
|
|
504
|
-
* - `"SVG"`
|
|
505
|
-
*/
|
|
506
|
-
url: string;
|
|
507
|
-
};
|
|
508
|
-
|
|
509
|
-
/**
|
|
510
|
-
* @public
|
|
511
|
-
* Export completed response
|
|
512
|
-
*/
|
|
513
|
-
export declare type ExportCompleted = {
|
|
514
|
-
/**
|
|
515
|
-
* The status of the export flow when the user has submitted the export menu.
|
|
516
|
-
*/
|
|
517
|
-
status: "COMPLETED";
|
|
518
|
-
/**
|
|
519
|
-
* The title of the successful export of a design, if it has been set by the user.
|
|
520
|
-
*/
|
|
521
|
-
title?: string;
|
|
522
|
-
/**
|
|
523
|
-
* The exported files.
|
|
524
|
-
*
|
|
525
|
-
* @remarks
|
|
526
|
-
* This array only contains one element. This is because, if a multi-page design is exported as multiple files, the files are exported in a ZIP file. In the future, there'll be an option for each file to be a separate element in the array.
|
|
527
|
-
*/
|
|
528
|
-
exportBlobs: ExportBlob[];
|
|
529
|
-
};
|
|
530
|
-
|
|
531
|
-
/**
|
|
532
|
-
* @public
|
|
533
|
-
* The types of files that Canva supports for exported designs.
|
|
534
|
-
*/
|
|
535
|
-
export declare type ExportFileType =
|
|
536
|
-
| "PNG"
|
|
537
|
-
| "JPG"
|
|
538
|
-
| "PDF_STANDARD"
|
|
539
|
-
| "VIDEO"
|
|
540
|
-
| "GIF"
|
|
541
|
-
| "PPTX"
|
|
542
|
-
| "SVG";
|
|
543
|
-
|
|
544
|
-
/**
|
|
545
|
-
* @public
|
|
546
|
-
* The options for configuring the export of a design.
|
|
547
|
-
*/
|
|
548
|
-
export declare type ExportRequest = {
|
|
549
|
-
/**
|
|
550
|
-
* The types of files the user can export their design as.
|
|
551
|
-
*
|
|
552
|
-
* @remarks
|
|
553
|
-
* You must provide at least one file type.
|
|
554
|
-
*/
|
|
555
|
-
acceptedFileTypes: ExportFileType[];
|
|
556
|
-
};
|
|
557
|
-
|
|
558
|
-
/**
|
|
559
|
-
* @public
|
|
560
|
-
* The response of an export request.
|
|
561
|
-
*/
|
|
562
|
-
export declare type ExportResponse = ExportCompleted | ExportAborted;
|
|
563
|
-
|
|
564
|
-
/**
|
|
565
|
-
* @public
|
|
566
|
-
*
|
|
567
|
-
* Options for defining the Drag and Drop behaviour for images uploaded
|
|
568
|
-
* via the Content capability.
|
|
569
|
-
*/
|
|
570
|
-
export declare type ExternalImageDragConfig = CommonImageDragConfig & {
|
|
571
|
-
/**
|
|
572
|
-
* The function that resolves an image ref
|
|
573
|
-
* @remarks
|
|
574
|
-
*
|
|
575
|
-
* This function will be run during the drag process in order to fetch the media ref of the
|
|
576
|
-
* external image being fetched. This function should return the result of `upload`
|
|
577
|
-
* from the content capability.
|
|
578
|
-
*/
|
|
579
|
-
resolveImageRef: () => Promise<{
|
|
580
|
-
ref: ImageRef;
|
|
581
|
-
}>;
|
|
582
|
-
/**
|
|
583
|
-
* The URL of the preview image.
|
|
584
|
-
*
|
|
585
|
-
* @remarks
|
|
586
|
-
* The preview image is the image that users see under their cursor while dragging
|
|
587
|
-
* it into their design.
|
|
588
|
-
*/
|
|
589
|
-
previewUrl: string;
|
|
590
|
-
/**
|
|
591
|
-
* The dimensions of the full-size image.
|
|
592
|
-
*
|
|
593
|
-
* @remarks
|
|
594
|
-
* The full-size image is the image that Canva uploads to the user's account and
|
|
595
|
-
* adds to their design.
|
|
596
|
-
*
|
|
597
|
-
* If omitted, the value of the `previewSize` property is used as a fallback.
|
|
598
|
-
*/
|
|
599
|
-
fullSize?: Dimensions;
|
|
600
|
-
};
|
|
601
|
-
|
|
602
|
-
/**
|
|
603
|
-
* @public
|
|
604
|
-
* The appearance of a path's interior.
|
|
605
|
-
*/
|
|
606
|
-
export declare type Fill = {
|
|
607
|
-
/**
|
|
608
|
-
* Boolean defining whether image or video can be dropped on the fill by the user.
|
|
609
|
-
* If set to true, images or videos can be dropped on the fill.
|
|
610
|
-
*/
|
|
611
|
-
dropTarget?: boolean;
|
|
612
|
-
/**
|
|
613
|
-
* The color of the fill as a hex code.
|
|
614
|
-
*
|
|
615
|
-
* @remarks
|
|
616
|
-
* The hex code must include all six characters and be prefixed with a # symbol (e.g. #ff0099).
|
|
617
|
-
* Only one type of fill (color, image or video) can be set.
|
|
618
|
-
*/
|
|
619
|
-
color?: string;
|
|
620
|
-
/**
|
|
621
|
-
* An asset (image or video) that will be used to fill the given path.
|
|
622
|
-
*
|
|
623
|
-
* @remarks
|
|
624
|
-
* Only one type of fill (color, image or video) can be set.
|
|
625
|
-
*/
|
|
626
|
-
asset?: ImageFill | VideoFill;
|
|
627
|
-
};
|
|
628
|
-
|
|
629
|
-
/**
|
|
630
|
-
* @public
|
|
631
|
-
* A reference to a font that can be used in other parts of the SDK.
|
|
632
|
-
*/
|
|
633
|
-
export declare type FontRef = string & {
|
|
634
|
-
__fontRef: never;
|
|
635
|
-
};
|
|
636
|
-
|
|
637
|
-
/**
|
|
638
|
-
* @public
|
|
639
|
-
* Font weights supported in the SDK.
|
|
640
|
-
**/
|
|
641
|
-
export declare type FontWeight =
|
|
642
|
-
| "normal"
|
|
643
|
-
| "thin"
|
|
644
|
-
| "extralight"
|
|
645
|
-
| "light"
|
|
646
|
-
| "medium"
|
|
647
|
-
| "semibold"
|
|
648
|
-
| "bold"
|
|
649
|
-
| "ultrabold"
|
|
650
|
-
| "heavy";
|
|
651
|
-
|
|
652
|
-
/**
|
|
653
|
-
* Allows to get the context of currently selected page.
|
|
654
|
-
* @public
|
|
655
|
-
* @returns Page context of currently selected page
|
|
656
|
-
*/
|
|
657
|
-
export declare function getCurrentPageContext(): Promise<PageContext>;
|
|
658
|
-
|
|
659
|
-
/**
|
|
660
|
-
* @public
|
|
661
|
-
* Gets the default dimensions that a new page will have when it is added to a design.
|
|
662
|
-
* It is possible for a user to resize a page without resizing the entire design, e.g. by clicking
|
|
663
|
-
* "Expand to Whiteboard". However, there will always be a single set of default dimensions for a
|
|
664
|
-
* design that is applied whenever a new page is created.
|
|
665
|
-
*
|
|
666
|
-
* Returns `undefined` if the design is unbounded (e.g. Whiteboard or Doc).
|
|
667
|
-
*/
|
|
668
|
-
export declare function getDefaultPageDimensions(): Promise<
|
|
669
|
-
Dimensions | undefined
|
|
670
|
-
>;
|
|
671
|
-
|
|
672
|
-
/**
|
|
673
|
-
* @public
|
|
674
|
-
* Retrieves a signed JWT that contains the Design ID, App ID and User ID.
|
|
675
|
-
*/
|
|
676
|
-
export declare function getDesignToken(): Promise<DesignToken>;
|
|
677
|
-
|
|
678
|
-
declare type Height = {
|
|
679
|
-
width: "auto";
|
|
680
|
-
height: number;
|
|
681
|
-
};
|
|
682
|
-
|
|
683
|
-
/**
|
|
684
|
-
* @public
|
|
685
|
-
* Options for defining the drag-and-drop behavior of an image element that can be defined by an
|
|
686
|
-
* app developer.
|
|
687
|
-
*/
|
|
688
|
-
export declare type ImageDragConfig = ExternalImageDragConfig;
|
|
689
|
-
|
|
690
|
-
/**
|
|
691
|
-
* @public
|
|
692
|
-
* Options for defining the drag-and-drop behavior for images.
|
|
693
|
-
*/
|
|
694
|
-
export declare type ImageDragConfigForElement<E extends Element> =
|
|
695
|
-
E extends HTMLImageElement
|
|
696
|
-
? Partial<ImageDragConfig> & Pick<ImageDragConfig, "type">
|
|
697
|
-
: ImageDragConfig;
|
|
698
|
-
|
|
699
|
-
/**
|
|
700
|
-
* @public
|
|
701
|
-
* Options for making an `HTMLImageElement` draggable.
|
|
702
|
-
*/
|
|
703
|
-
export declare type ImageElementData = DragCallback & {
|
|
704
|
-
/**
|
|
705
|
-
* The element to be made draggable.
|
|
706
|
-
*/
|
|
707
|
-
node: HTMLImageElement;
|
|
708
|
-
/**
|
|
709
|
-
* Options for defining the drag-and-drop behavior.
|
|
710
|
-
*
|
|
711
|
-
* @remarks
|
|
712
|
-
* If any of this data is omitted, it's inferred from the `node` property.
|
|
713
|
-
*/
|
|
714
|
-
dragData?:
|
|
715
|
-
| Partial<UserSuppliedImageDragData>
|
|
716
|
-
| (Partial<UserSuppliedVideoDragData> &
|
|
717
|
-
Pick<UserSuppliedVideoDragData, "type" | "resolveVideoRef">);
|
|
718
|
-
};
|
|
719
|
-
|
|
720
|
-
/**
|
|
721
|
-
* @public
|
|
722
|
-
* An image asset that will be used to fill the given path.
|
|
723
|
-
*/
|
|
724
|
-
export declare type ImageFill = {
|
|
725
|
-
/**
|
|
726
|
-
* Type of an asset that will be used to fill the given path.
|
|
727
|
-
*/
|
|
728
|
-
type: "IMAGE";
|
|
729
|
-
/**
|
|
730
|
-
* A unique identifier that references an image asset in Canva's backend.
|
|
731
|
-
*/
|
|
732
|
-
ref: ImageRef;
|
|
733
|
-
};
|
|
734
|
-
|
|
735
|
-
/**
|
|
736
|
-
* @public
|
|
737
|
-
* A unique identifier that references an image asset in Canva's backend.
|
|
738
|
-
*/
|
|
739
|
-
export declare type ImageRef = string & {
|
|
740
|
-
__imageRef: never;
|
|
741
|
-
};
|
|
742
|
-
|
|
743
|
-
/**
|
|
744
|
-
* @public
|
|
745
|
-
* @param appElementConfig - Configuration for an AppElementClient
|
|
746
|
-
*/
|
|
747
|
-
export declare function initAppElement<A extends AppElementData>(
|
|
748
|
-
appElementConfig: AppElementClientConfiguration<A>
|
|
749
|
-
): AppElementClient<A>;
|
|
750
|
-
|
|
751
|
-
/**
|
|
752
|
-
* @beta
|
|
753
|
-
*
|
|
754
|
-
* Inline formatting values for richtext
|
|
755
|
-
*/
|
|
756
|
-
export declare type InlineFormatting = {
|
|
757
|
-
/**
|
|
758
|
-
* The color of the text as a hex code.
|
|
759
|
-
*
|
|
760
|
-
* @remarks
|
|
761
|
-
* The hex code must include all six characters and be prefixed with a # symbol
|
|
762
|
-
* (e.g. #ff0099). The default value is #000000.
|
|
763
|
-
*/
|
|
764
|
-
color?: string;
|
|
765
|
-
/**
|
|
766
|
-
* The weight (thickness) of the font.
|
|
767
|
-
*
|
|
768
|
-
* @remarks
|
|
769
|
-
* The available font weights depend on the font.
|
|
770
|
-
*
|
|
771
|
-
* @defaultValue 'normal'
|
|
772
|
-
*/
|
|
773
|
-
fontWeight?: FontWeight;
|
|
774
|
-
/**
|
|
775
|
-
* The style of the font.
|
|
776
|
-
* @defaultValue 'normal'
|
|
777
|
-
*/
|
|
778
|
-
fontStyle?: "normal" | "italic";
|
|
779
|
-
/**
|
|
780
|
-
* The decoration of the text.
|
|
781
|
-
* @defaultValue 'none'
|
|
782
|
-
*/
|
|
783
|
-
decoration?: "none" | "underline";
|
|
784
|
-
/**
|
|
785
|
-
* The strikethrough of the text.
|
|
786
|
-
* @defaultValue 'none'
|
|
787
|
-
*/
|
|
788
|
-
strikethrough?: "none" | "strikethrough";
|
|
789
|
-
/**
|
|
790
|
-
* A url that the underlying text will link to
|
|
791
|
-
*/
|
|
792
|
-
link?: string;
|
|
793
|
-
};
|
|
794
|
-
|
|
795
|
-
/**
|
|
796
|
-
* @public
|
|
797
|
-
* A native element.
|
|
798
|
-
*/
|
|
799
|
-
export declare type NativeElement =
|
|
800
|
-
| NativeImageElement
|
|
801
|
-
| NativeVideoElement
|
|
802
|
-
| NativeEmbedElement
|
|
803
|
-
| NativeTextElement
|
|
804
|
-
| NativeShapeElement
|
|
805
|
-
| NativeGroupElement;
|
|
806
|
-
|
|
807
|
-
/**
|
|
808
|
-
* @public
|
|
809
|
-
* The types of elements an app can add to a user's design.
|
|
810
|
-
*/
|
|
811
|
-
export declare type NativeElementType =
|
|
812
|
-
| "IMAGE"
|
|
813
|
-
| "EMBED"
|
|
814
|
-
| "TEXT"
|
|
815
|
-
| "SHAPE"
|
|
816
|
-
| "VIDEO";
|
|
817
|
-
|
|
818
|
-
/**
|
|
819
|
-
* @public
|
|
820
|
-
* An element that exists within an app or group element.
|
|
821
|
-
*/
|
|
822
|
-
export declare type NativeElementWithBox =
|
|
823
|
-
| NativeImageElementWithBox
|
|
824
|
-
| NativeVideoElementWithBox
|
|
825
|
-
| NativeEmbedElementWithBox
|
|
826
|
-
| NativeTextElementWithBox
|
|
827
|
-
| NativeShapeElementWithBox
|
|
828
|
-
| NativeGroupElementWithBox;
|
|
829
|
-
|
|
830
|
-
/**
|
|
831
|
-
* @public
|
|
832
|
-
* An element that renders an embeddable piece of media, such as a YouTube video.
|
|
833
|
-
*/
|
|
834
|
-
export declare type NativeEmbedElement = {
|
|
835
|
-
/**
|
|
836
|
-
* The type of element.
|
|
837
|
-
*/
|
|
838
|
-
type: "EMBED";
|
|
839
|
-
/**
|
|
840
|
-
* The URL of the embed. This URL must be supported by the Iframely API.
|
|
841
|
-
*/
|
|
842
|
-
url: string;
|
|
843
|
-
};
|
|
844
|
-
|
|
845
|
-
/**
|
|
846
|
-
* @public
|
|
847
|
-
* An element that renders an embeddable piece of media, such as a YouTube video.
|
|
848
|
-
*
|
|
849
|
-
* @remarks
|
|
850
|
-
* This type includes properties for controlling the position and dimensions of the
|
|
851
|
-
* element.
|
|
852
|
-
* It will be positioned and sized relative to its parent container.
|
|
853
|
-
* The parent container may be an app element, or the current page.
|
|
854
|
-
*/
|
|
855
|
-
export declare type NativeEmbedElementWithBox = {
|
|
856
|
-
/**
|
|
857
|
-
* The type of element.
|
|
858
|
-
*/
|
|
859
|
-
type: "EMBED";
|
|
860
|
-
/**
|
|
861
|
-
* The URL of the embed.
|
|
862
|
-
*
|
|
863
|
-
* @remarks
|
|
864
|
-
* This URL must be supported by the Iframely API.
|
|
865
|
-
*/
|
|
866
|
-
url: string;
|
|
867
|
-
} & Box;
|
|
868
|
-
|
|
869
|
-
/**
|
|
870
|
-
* @public
|
|
871
|
-
* An element containing two or more {@link NativeElementWithBox}.
|
|
872
|
-
*/
|
|
873
|
-
export declare type NativeGroupElement = {
|
|
874
|
-
/**
|
|
875
|
-
* The type of element.
|
|
876
|
-
*/
|
|
877
|
-
type: "GROUP";
|
|
878
|
-
/**
|
|
879
|
-
* The inner elements contained by the group element. These elements require a Box as they are
|
|
880
|
-
* relatively positioned to the outer boundaries of the group element.
|
|
881
|
-
*/
|
|
882
|
-
children: NativeSimpleElementWithBox[];
|
|
883
|
-
};
|
|
884
|
-
|
|
885
|
-
/**
|
|
886
|
-
* @public
|
|
887
|
-
* An element containing two or more {@link NativeSimpleElementWithBox}.
|
|
888
|
-
*
|
|
889
|
-
* @remarks
|
|
890
|
-
* This type includes properties for controlling the position and dimensions
|
|
891
|
-
* of the element
|
|
892
|
-
*/
|
|
893
|
-
export declare type NativeGroupElementWithBox = {
|
|
894
|
-
/**
|
|
895
|
-
* The type of element.
|
|
896
|
-
*/
|
|
897
|
-
type: "GROUP";
|
|
898
|
-
/**
|
|
899
|
-
* The inner elements contained by the group element. These elements require a Box as they are
|
|
900
|
-
* relatively positioned to the outer boundaries of the group element.
|
|
901
|
-
*/
|
|
902
|
-
children: NativeSimpleElementWithBox[];
|
|
903
|
-
} & Box;
|
|
904
|
-
|
|
905
|
-
/**
|
|
906
|
-
* @public
|
|
907
|
-
* An element that renders an image in the user's design.
|
|
908
|
-
*/
|
|
909
|
-
export declare type NativeImageElement = {
|
|
910
|
-
/**
|
|
911
|
-
* The type of element.
|
|
912
|
-
*/
|
|
913
|
-
type: "IMAGE";
|
|
914
|
-
/**
|
|
915
|
-
* An optional object to describe alt-text that may be applied to an image.
|
|
916
|
-
*/
|
|
917
|
-
altText?: AltText;
|
|
918
|
-
} & (
|
|
919
|
-
| {
|
|
920
|
-
/**
|
|
921
|
-
* A data URL that contains the image data.
|
|
922
|
-
*/
|
|
923
|
-
dataUrl: string;
|
|
924
|
-
/**
|
|
925
|
-
* A unique identifier that references an image asset in Canva's backend.
|
|
926
|
-
*/
|
|
927
|
-
ref?: never;
|
|
928
|
-
}
|
|
929
|
-
| {
|
|
930
|
-
/**
|
|
931
|
-
* A data URL that contains the image data.
|
|
932
|
-
*/
|
|
933
|
-
dataUrl?: never;
|
|
934
|
-
/**
|
|
935
|
-
* A unique identifier that references an image asset in Canva's backend.
|
|
936
|
-
*/
|
|
937
|
-
ref: ImageRef;
|
|
938
|
-
}
|
|
939
|
-
);
|
|
940
|
-
|
|
941
|
-
/**
|
|
942
|
-
* @public
|
|
943
|
-
* An element that renders an image in the user's design.
|
|
944
|
-
*
|
|
945
|
-
* @remarks
|
|
946
|
-
* This type includes properties for controlling the position and dimensions
|
|
947
|
-
* of the element.
|
|
948
|
-
* It will be positioned and sized relative to its parent container.
|
|
949
|
-
* The parent container may be an app element, or the current page.
|
|
950
|
-
*/
|
|
951
|
-
export declare type NativeImageElementWithBox = NativeImageElement & Box;
|
|
952
|
-
|
|
953
|
-
/**
|
|
954
|
-
* @beta
|
|
955
|
-
* An element that renders richtext.
|
|
956
|
-
*/
|
|
957
|
-
export declare type NativeRichtextElement = {
|
|
958
|
-
/**
|
|
959
|
-
* The type of element.
|
|
960
|
-
*/
|
|
961
|
-
type: "RICHTEXT";
|
|
962
|
-
/**
|
|
963
|
-
* An object containing rich text which exposes methods to manipulate the text.
|
|
964
|
-
*/
|
|
965
|
-
range: RichtextRange;
|
|
966
|
-
};
|
|
967
|
-
|
|
968
|
-
/**
|
|
969
|
-
* @beta
|
|
970
|
-
* An element that renders richtext.
|
|
971
|
-
*
|
|
972
|
-
* @remarks
|
|
973
|
-
* This type includes properties for controlling the position and dimensions of the
|
|
974
|
-
* element.
|
|
975
|
-
* It will be positioned and sized relative to its parent container.
|
|
976
|
-
* The parent container may be an app element, or the current page.
|
|
977
|
-
*/
|
|
978
|
-
export declare type NativeRichtextElementWithBox = NativeRichtextElement &
|
|
979
|
-
TextBox;
|
|
980
|
-
|
|
981
|
-
/**
|
|
982
|
-
* @public
|
|
983
|
-
* An element that renders a vector shape.
|
|
984
|
-
*/
|
|
985
|
-
export declare type NativeShapeElement = {
|
|
986
|
-
/**
|
|
987
|
-
* The type of element.
|
|
988
|
-
*/
|
|
989
|
-
type: "SHAPE";
|
|
990
|
-
/**
|
|
991
|
-
* Properties for configuring the scale and cropping of a shape.
|
|
992
|
-
*
|
|
993
|
-
* @remarks
|
|
994
|
-
* This is similar to the `viewBox` attribute of the <svg> element.
|
|
995
|
-
*/
|
|
996
|
-
viewBox: ShapeViewBox;
|
|
997
|
-
/**
|
|
998
|
-
* The paths that define the shape of the element.
|
|
999
|
-
*
|
|
1000
|
-
* @remarks
|
|
1001
|
-
* There must be between 1 and 30 paths. The maximum combined size of all paths must
|
|
1002
|
-
* not exceed 2kb. The maximum numbrer of unique fill colors across all paths is 6.
|
|
1003
|
-
*/
|
|
1004
|
-
paths: ShapePath[];
|
|
1005
|
-
};
|
|
1006
|
-
|
|
1007
|
-
/**
|
|
1008
|
-
* @public
|
|
1009
|
-
* An element that renders a vector shape.
|
|
1010
|
-
*
|
|
1011
|
-
* @remarks
|
|
1012
|
-
* This type includes properties for controlling the position and dimensions of the
|
|
1013
|
-
* element.
|
|
1014
|
-
* It will be positioned and sized relative to its parent container.
|
|
1015
|
-
* The parent container may be an app element, or the current page.
|
|
1016
|
-
*/
|
|
1017
|
-
export declare type NativeShapeElementWithBox = {
|
|
1018
|
-
/**
|
|
1019
|
-
* The type of element.
|
|
1020
|
-
*/
|
|
1021
|
-
type: "SHAPE";
|
|
1022
|
-
/**
|
|
1023
|
-
* Properties for configuring the scale and cropping of a shape.
|
|
1024
|
-
*
|
|
1025
|
-
* @remarks
|
|
1026
|
-
* This is similar to the `viewBox` attribute of the <svg> element.
|
|
1027
|
-
*/
|
|
1028
|
-
viewBox: ShapeViewBox;
|
|
1029
|
-
/**
|
|
1030
|
-
* The paths that define the shape of the element.
|
|
1031
|
-
*/
|
|
1032
|
-
paths: ShapePath[];
|
|
1033
|
-
} & Box;
|
|
1034
|
-
|
|
1035
|
-
/**
|
|
1036
|
-
* @public
|
|
1037
|
-
* An element that exists within a group element.
|
|
1038
|
-
*/
|
|
1039
|
-
export declare type NativeSimpleElementWithBox = Exclude<
|
|
1040
|
-
NativeElementWithBox,
|
|
1041
|
-
NativeGroupElementWithBox
|
|
1042
|
-
>;
|
|
1043
|
-
|
|
1044
|
-
/**
|
|
1045
|
-
* @beta
|
|
1046
|
-
* An element that renders a table.
|
|
1047
|
-
*/
|
|
1048
|
-
export declare type NativeTableElement = {
|
|
1049
|
-
/**
|
|
1050
|
-
* The type of element.
|
|
1051
|
-
*/
|
|
1052
|
-
type: "TABLE";
|
|
1053
|
-
/**
|
|
1054
|
-
* The rows of the table. Each row contains an array of cells, 1 cell per column in the row.
|
|
1055
|
-
*/
|
|
1056
|
-
rows: {
|
|
1057
|
-
cells: Cell[];
|
|
1058
|
-
}[];
|
|
1059
|
-
};
|
|
1060
|
-
|
|
1061
|
-
/**
|
|
1062
|
-
* @public
|
|
1063
|
-
* An element that renders text.
|
|
1064
|
-
*/
|
|
1065
|
-
export declare type NativeTextElement = {
|
|
1066
|
-
/**
|
|
1067
|
-
* The type of element.
|
|
1068
|
-
*/
|
|
1069
|
-
type: "TEXT";
|
|
1070
|
-
/**
|
|
1071
|
-
* The text to render within the element. In the future, each item in this
|
|
1072
|
-
* array will map to a paragraph. At the moment, only one item is supported.
|
|
1073
|
-
*/
|
|
1074
|
-
children: string[];
|
|
1075
|
-
} & TextAttributes;
|
|
1076
|
-
|
|
1077
|
-
/**
|
|
1078
|
-
* @public
|
|
1079
|
-
* An element that renders text.
|
|
1080
|
-
*
|
|
1081
|
-
* @remarks
|
|
1082
|
-
* This type includes properties for controlling the position and dimensions of the
|
|
1083
|
-
* element.
|
|
1084
|
-
* It will be positioned and sized relative to its parent container.
|
|
1085
|
-
* The parent container may be an app element, or the current page.
|
|
1086
|
-
*/
|
|
1087
|
-
export declare type NativeTextElementWithBox = {
|
|
1088
|
-
/**
|
|
1089
|
-
* The type of element.
|
|
1090
|
-
*/
|
|
1091
|
-
type: "TEXT";
|
|
1092
|
-
/**
|
|
1093
|
-
* The text to render within the element.
|
|
1094
|
-
*
|
|
1095
|
-
* @remarks
|
|
1096
|
-
* In the future, each item in this array will map to a paragraph. At the moment,
|
|
1097
|
-
* only one item is supported.
|
|
1098
|
-
*/
|
|
1099
|
-
children: [string];
|
|
1100
|
-
/**
|
|
1101
|
-
* The width of the element. This must be an integer between 0 and 32767.
|
|
1102
|
-
*/
|
|
1103
|
-
width?: number;
|
|
1104
|
-
/**
|
|
1105
|
-
* The distance from the top edge of the container.
|
|
1106
|
-
*
|
|
1107
|
-
* @remarks
|
|
1108
|
-
* This must be an integer between -32768 and 32767. This property doesn't have
|
|
1109
|
-
* any effect if the app element only contains a single element.
|
|
1110
|
-
*/
|
|
1111
|
-
top: number;
|
|
1112
|
-
/**
|
|
1113
|
-
* The distance from the left edge of the container.
|
|
1114
|
-
*
|
|
1115
|
-
* @remarks
|
|
1116
|
-
* This must be an integer between -32768 and 32767. This property doesn't have
|
|
1117
|
-
* any effect if the app element only contains a single element.
|
|
1118
|
-
*/
|
|
1119
|
-
left: number;
|
|
1120
|
-
/**
|
|
1121
|
-
* The rotation of the element, in degrees.
|
|
1122
|
-
*
|
|
1123
|
-
* @remarks
|
|
1124
|
-
* This must be an integer between -180 and 180.
|
|
1125
|
-
*/
|
|
1126
|
-
rotation?: number;
|
|
1127
|
-
} & TextAttributes;
|
|
1128
|
-
|
|
1129
|
-
/**
|
|
1130
|
-
* @public
|
|
1131
|
-
* An element that renders a video in the user's design.
|
|
1132
|
-
*/
|
|
1133
|
-
export declare type NativeVideoElement = {
|
|
1134
|
-
/**
|
|
1135
|
-
* The type of element.
|
|
1136
|
-
*/
|
|
1137
|
-
type: "VIDEO";
|
|
1138
|
-
/**
|
|
1139
|
-
* A unique identifier that references a video asset in Canva's backend.
|
|
1140
|
-
*/
|
|
1141
|
-
ref: VideoRef;
|
|
1142
|
-
/**
|
|
1143
|
-
* An optional object to describe alt-text that may be applied to a video.
|
|
1144
|
-
*/
|
|
1145
|
-
altText?: AltText;
|
|
1146
|
-
};
|
|
1147
|
-
|
|
1148
|
-
/**
|
|
1149
|
-
* @public
|
|
1150
|
-
* An element that renders a video in the user's design.
|
|
1151
|
-
*
|
|
1152
|
-
* @remarks
|
|
1153
|
-
* This type includes properties for controlling the position and dimensions
|
|
1154
|
-
* of the element.
|
|
1155
|
-
* It will be positioned and sized relative to its parent container.
|
|
1156
|
-
* The parent container may be an app element, or the current page.
|
|
1157
|
-
*/
|
|
1158
|
-
export declare type NativeVideoElementWithBox = NativeVideoElement & Box;
|
|
1159
|
-
|
|
1160
|
-
/**
|
|
1161
|
-
* The types of object primitive values that can be stored within an app element's data.
|
|
1162
|
-
*/
|
|
1163
|
-
declare type ObjectPrimitive = Boolean | String;
|
|
1164
|
-
|
|
1165
|
-
/**
|
|
1166
|
-
* @public
|
|
1167
|
-
* An alias for the DesignOverlay interface, providing access to design overlay related functionality
|
|
1168
|
-
*/
|
|
1169
|
-
export declare const overlay: DesignOverlay;
|
|
1170
|
-
|
|
1171
|
-
/**
|
|
1172
|
-
* @public
|
|
1173
|
-
* Information about whether the overlay can be opened or not on a particular {@link OverlayTarget}
|
|
1174
|
-
*/
|
|
1175
|
-
export declare type OverlayOpenableEvent<Target extends OverlayTarget> = {
|
|
1176
|
-
/**
|
|
1177
|
-
* An event indicating whether the overlay can be opened or not when {@link OverlayTarget} is `"image_selection"`
|
|
1178
|
-
*/
|
|
1179
|
-
["image_selection"]:
|
|
1180
|
-
| OverlayUnopenableEvent
|
|
1181
|
-
| {
|
|
1182
|
-
canOpen: true;
|
|
1183
|
-
/**
|
|
1184
|
-
* Launch a new app process on an overlay on top of the current selected image fill
|
|
1185
|
-
*
|
|
1186
|
-
* @remarks
|
|
1187
|
-
* `launchParameters` specifies the type of data that are provided to an app process at its launch
|
|
1188
|
-
*/
|
|
1189
|
-
readonly open: (options: {
|
|
1190
|
-
launchParameters?: any;
|
|
1191
|
-
}) => Promise<AppProcessId>;
|
|
1192
|
-
};
|
|
1193
|
-
}[Target];
|
|
1194
|
-
|
|
1195
|
-
/**
|
|
1196
|
-
* @public
|
|
1197
|
-
* The target to check if an overlay can be opened for
|
|
1198
|
-
*/
|
|
1199
|
-
export declare type OverlayTarget = "image_selection";
|
|
1200
|
-
|
|
1201
|
-
/**
|
|
1202
|
-
* @public
|
|
1203
|
-
* Information about the overlay when it can not be opened on a particular {@link OverlayTarget}
|
|
1204
|
-
*/
|
|
1205
|
-
declare type OverlayUnopenableEvent = {
|
|
1206
|
-
canOpen: false;
|
|
1207
|
-
reason: string;
|
|
1208
|
-
};
|
|
1209
|
-
|
|
1210
|
-
/**
|
|
1211
|
-
* @public
|
|
1212
|
-
* The appearance of a page's background.
|
|
1213
|
-
*/
|
|
1214
|
-
export declare type PageBackgroundFill = Pick<Fill, "asset" | "color">;
|
|
1215
|
-
|
|
1216
|
-
/**
|
|
1217
|
-
* @public
|
|
1218
|
-
* Page context
|
|
1219
|
-
*/
|
|
1220
|
-
export declare type PageContext = {
|
|
1221
|
-
/**
|
|
1222
|
-
* Page dimensions in px
|
|
1223
|
-
*
|
|
1224
|
-
* @remarks
|
|
1225
|
-
* This value is undefined for Whiteboard and Docs
|
|
1226
|
-
*/
|
|
1227
|
-
dimensions: PageDimensions | undefined;
|
|
1228
|
-
};
|
|
1229
|
-
|
|
1230
|
-
/**
|
|
1231
|
-
* @public
|
|
1232
|
-
* Page Dimensions
|
|
1233
|
-
*/
|
|
1234
|
-
export declare type PageDimensions = {
|
|
1235
|
-
width: number;
|
|
1236
|
-
height: number;
|
|
1237
|
-
};
|
|
1238
|
-
|
|
1239
|
-
/**
|
|
1240
|
-
* @public
|
|
1241
|
-
* The outline of a path.
|
|
1242
|
-
*/
|
|
1243
|
-
export declare type PathStroke = {
|
|
1244
|
-
/**
|
|
1245
|
-
* The weight of the stroke. This must be an integer between 0 and 100.
|
|
1246
|
-
*/
|
|
1247
|
-
weight: number;
|
|
1248
|
-
/**
|
|
1249
|
-
* The color of the stroke as a hex code.
|
|
1250
|
-
*
|
|
1251
|
-
* @remarks
|
|
1252
|
-
* The hex code must include all six characters and be prefixed with a # symbol (e.g. #ff0099).
|
|
1253
|
-
*/
|
|
1254
|
-
color: string;
|
|
1255
|
-
/**
|
|
1256
|
-
* The alignment of the stroke. The only supported value is 'inset'.
|
|
1257
|
-
*/
|
|
1258
|
-
strokeAlign: "inset";
|
|
1259
|
-
};
|
|
1260
|
-
|
|
1261
|
-
/**
|
|
1262
|
-
* @public
|
|
1263
|
-
* The dimensions, position, and rotation of an element.
|
|
1264
|
-
*/
|
|
1265
|
-
export declare type Placement = Position & (WidthAndHeight | Width | Height);
|
|
1266
|
-
|
|
1267
|
-
declare type Position = {
|
|
1268
|
-
/**
|
|
1269
|
-
* The distance from the top edge of the container.
|
|
1270
|
-
*
|
|
1271
|
-
* @remarks
|
|
1272
|
-
* This must be an integer between -32768 and 32767. This property doesn't
|
|
1273
|
-
* have any effect if the app element only contains a single element.
|
|
1274
|
-
*/
|
|
1275
|
-
top: number;
|
|
1276
|
-
/**
|
|
1277
|
-
* The distance from the left edge of the container.
|
|
1278
|
-
*
|
|
1279
|
-
* @remarks
|
|
1280
|
-
* This must be an integer between -32768 and 32767. This property doesn't
|
|
1281
|
-
* have any effect if the app element only contains a single element.
|
|
1282
|
-
*/
|
|
1283
|
-
left: number;
|
|
1284
|
-
/**
|
|
1285
|
-
* The rotation of the box, in degrees.
|
|
1286
|
-
*
|
|
1287
|
-
* @remarks
|
|
1288
|
-
* This must be an integer between -180 and 180.
|
|
1289
|
-
*/
|
|
1290
|
-
rotation?: number;
|
|
1291
|
-
};
|
|
1292
|
-
|
|
1293
|
-
/**
|
|
1294
|
-
* The types of primitive values that can be stored within an app element's data.
|
|
1295
|
-
*
|
|
1296
|
-
* @remarks
|
|
1297
|
-
* All types of primitives are supported except for symbols and bigints.
|
|
1298
|
-
*/
|
|
1299
|
-
declare type Primitive = undefined | null | number | boolean | string;
|
|
1300
|
-
|
|
1301
|
-
/**
|
|
1302
|
-
* @beta
|
|
1303
|
-
* A snapshot of content returned by a query.
|
|
1304
|
-
*
|
|
1305
|
-
* @remarks
|
|
1306
|
-
* The snapshot is known as the *draft*.
|
|
1307
|
-
*/
|
|
1308
|
-
export declare interface QueryContentDraft<T> {
|
|
1309
|
-
/**
|
|
1310
|
-
* The individual content items returned by a query.
|
|
1311
|
-
*/
|
|
1312
|
-
readonly contents: readonly T[];
|
|
1313
|
-
/**
|
|
1314
|
-
* Commits any changes made to the items in the `contents` array.
|
|
1315
|
-
*
|
|
1316
|
-
* @remarks
|
|
1317
|
-
* An app must call this method for any changes to be reflected in the user's design.
|
|
1318
|
-
*/
|
|
1319
|
-
sync(): Promise<void>;
|
|
1320
|
-
}
|
|
1321
|
-
|
|
1322
|
-
/**
|
|
1323
|
-
* @beta
|
|
1324
|
-
* The result of querying content in a design.
|
|
1325
|
-
*/
|
|
1326
|
-
export declare type QueryResult<T extends ContentType> = {
|
|
1327
|
-
["richtext"]: QueryContentDraft<
|
|
1328
|
-
RichtextRange & {
|
|
1329
|
-
readonly deleted: boolean;
|
|
1330
|
-
}
|
|
1331
|
-
>;
|
|
1332
|
-
}[T];
|
|
1333
|
-
|
|
1334
|
-
/**
|
|
1335
|
-
* @beta
|
|
1336
|
-
* Reads content of the specified type from the user's design.
|
|
1337
|
-
* @param options - Options for configuring how a design is read.
|
|
1338
|
-
* @param callback - A callback for operating on the queried content.
|
|
1339
|
-
*/
|
|
1340
|
-
export declare function readContent<T extends ContentType>(
|
|
1341
|
-
options: EditContentOptions<T>,
|
|
1342
|
-
callback: (draft: QueryResult<T>) => Promise<void> | void
|
|
1343
|
-
): Promise<void>;
|
|
1344
|
-
|
|
1345
|
-
/**
|
|
1346
|
-
* @public
|
|
1347
|
-
* Exports the user's design as one or more static files.
|
|
1348
|
-
* @param request - The request object containing configurations of the design export.
|
|
1349
|
-
*/
|
|
1350
|
-
export declare function requestExport(
|
|
1351
|
-
request: ExportRequest
|
|
1352
|
-
): Promise<ExportResponse>;
|
|
1353
|
-
|
|
1354
|
-
/**
|
|
1355
|
-
* @beta
|
|
1356
|
-
*
|
|
1357
|
-
* Formatting values for richtext
|
|
1358
|
-
*/
|
|
1359
|
-
export declare type RichtextFormatting = InlineFormatting & {
|
|
1360
|
-
/**
|
|
1361
|
-
* @public
|
|
1362
|
-
* A reference to the font to use for this text element.
|
|
1363
|
-
*/
|
|
1364
|
-
fontRef?: FontRef;
|
|
1365
|
-
/**
|
|
1366
|
-
* The size of the text, in pixels.
|
|
1367
|
-
*
|
|
1368
|
-
* @remarks
|
|
1369
|
-
* This must be an integer between 1 and 1000.
|
|
1370
|
-
* In the UI of the Canva editor, this number is shown as points (pts), not pixels.
|
|
1371
|
-
*/
|
|
1372
|
-
fontSize?: number;
|
|
1373
|
-
/**
|
|
1374
|
-
* The alignment of the text.
|
|
1375
|
-
* @defaultValue 'start'
|
|
1376
|
-
*/
|
|
1377
|
-
textAlign?: "start" | "center" | "end" | "justify";
|
|
1378
|
-
/**
|
|
1379
|
-
* The list indentation level of the current paragraph.
|
|
1380
|
-
*/
|
|
1381
|
-
listLevel?: number;
|
|
1382
|
-
/**
|
|
1383
|
-
* The appearance of the marker for list items.
|
|
1384
|
-
*
|
|
1385
|
-
* @remarks
|
|
1386
|
-
* This property only has an effect if `listLevel` is a number greater than 0.
|
|
1387
|
-
*
|
|
1388
|
-
* @defaultValue 'none'
|
|
1389
|
-
*/
|
|
1390
|
-
listMarker?:
|
|
1391
|
-
| "none"
|
|
1392
|
-
| "disc"
|
|
1393
|
-
| "circle"
|
|
1394
|
-
| "square"
|
|
1395
|
-
| "decimal"
|
|
1396
|
-
| "lower-alpha"
|
|
1397
|
-
| "lower-roman"
|
|
1398
|
-
| "checked"
|
|
1399
|
-
| "unchecked";
|
|
1400
|
-
};
|
|
1401
|
-
|
|
1402
|
-
/**
|
|
1403
|
-
* @beta
|
|
1404
|
-
*
|
|
1405
|
-
* An object containing rich text which exposes methods to manipulate the text.
|
|
1406
|
-
* This is generated from a selection, with a range created for each instance of text in the selection.
|
|
1407
|
-
* For example, if a table is currently selected, a range will be created for each cell.
|
|
1408
|
-
* If only part of the text of an element is selected, then only that part will be represented in the range.
|
|
1409
|
-
*/
|
|
1410
|
-
export declare type RichtextRange = {
|
|
1411
|
-
/**
|
|
1412
|
-
* Formats all paragraphs that overlap the given bounds. The newline character separates text into
|
|
1413
|
-
* distinct paragraphs. Newline separator is treated as the final character of each paragraph.
|
|
1414
|
-
* All paragraphs that overlap the given bounds will be formatted in their entirety.
|
|
1415
|
-
* @param bounds - The region of text overlapping the paragraphs to apply the formatting.
|
|
1416
|
-
* @param formatting - The formatting to apply to the paragraph(s).
|
|
1417
|
-
*/
|
|
1418
|
-
formatParagraph(bounds: Bounds, formatting: RichtextFormatting): void;
|
|
1419
|
-
/**
|
|
1420
|
-
* Formats a given region of rich text with inline formatting.
|
|
1421
|
-
* @param bounds - The region of text to apply the formatting.
|
|
1422
|
-
* @param formatting - The inline formatting to apply to the region of text.
|
|
1423
|
-
*/
|
|
1424
|
-
formatText(bounds: Bounds, formatting: InlineFormatting): void;
|
|
1425
|
-
/**
|
|
1426
|
-
* Appends characters to the rich text range.
|
|
1427
|
-
* Appended characters can be formatted with inline formatting properties.
|
|
1428
|
-
* @param characters - The characters to append to the rich text range.
|
|
1429
|
-
* @param formatting - The inline formatting to apply to the appended text.
|
|
1430
|
-
*/
|
|
1431
|
-
appendText(
|
|
1432
|
-
characters: string,
|
|
1433
|
-
formatting?: InlineFormatting
|
|
1434
|
-
): {
|
|
1435
|
-
bounds: Bounds;
|
|
1436
|
-
};
|
|
1437
|
-
/**
|
|
1438
|
-
* Replaces a region of the rich text range with the specified characters.
|
|
1439
|
-
* Replaced characters can be formatted with inline formatting properties.
|
|
1440
|
-
* @param bounds - The region of text to be replaced.
|
|
1441
|
-
* @param characters - The replacement characters.
|
|
1442
|
-
* @param formatting - The inline formatting to apply to the replaced text.
|
|
1443
|
-
*/
|
|
1444
|
-
replaceText(
|
|
1445
|
-
bounds: Bounds,
|
|
1446
|
-
characters: string,
|
|
1447
|
-
formatting?: InlineFormatting
|
|
1448
|
-
): {
|
|
1449
|
-
bounds: Bounds;
|
|
1450
|
-
};
|
|
1451
|
-
/**
|
|
1452
|
-
* Returns the current state of the rich text range as plain text.
|
|
1453
|
-
*
|
|
1454
|
-
* @remarks
|
|
1455
|
-
* If this range is a draft, this includes any changes to the text that have not been committed.
|
|
1456
|
-
*/
|
|
1457
|
-
readPlaintext(): string;
|
|
1458
|
-
/**
|
|
1459
|
-
* Returns the current state of the rich text range as an array of text regions.
|
|
1460
|
-
* Each region is an object that contains the text itself and its formatting.
|
|
1461
|
-
*
|
|
1462
|
-
* @remarks
|
|
1463
|
-
* If this range is a draft, this array includes any changes to the text that have not been committed.
|
|
1464
|
-
*/
|
|
1465
|
-
readTextRegions(): TextRegion[];
|
|
1466
|
-
};
|
|
1467
|
-
|
|
1468
|
-
/**
|
|
1469
|
-
* @beta
|
|
1470
|
-
* An alias for the DesignSelection interface, providing access to design selection related functionality
|
|
1471
|
-
*/
|
|
1472
|
-
export declare const selection: DesignSelection;
|
|
1473
|
-
|
|
1474
|
-
/**
|
|
1475
|
-
* @beta
|
|
1476
|
-
* Information about the user's selection. To access the selected content, call the `read` method.
|
|
1477
|
-
*/
|
|
1478
|
-
export declare interface SelectionEvent<Scope extends SelectionScope> {
|
|
1479
|
-
/**
|
|
1480
|
-
* The type of content that's selected.
|
|
1481
|
-
*/
|
|
1482
|
-
readonly scope: Scope;
|
|
1483
|
-
/**
|
|
1484
|
-
* The number of selected elements.
|
|
1485
|
-
*/
|
|
1486
|
-
readonly count: number;
|
|
1487
|
-
/**
|
|
1488
|
-
* Creates a snapshot of the selected content and returns a *draft* object.
|
|
1489
|
-
* The draft has a mutable `contents` property for making changes to the selected content.
|
|
1490
|
-
* Any changes made to `contents` are not immediately persisted or reflected in the user's design.
|
|
1491
|
-
* To persist the changes, call the `save` method that's available via the draft.
|
|
1492
|
-
*
|
|
1493
|
-
* @example Replacing text
|
|
1494
|
-
* ```
|
|
1495
|
-
* const draft = await selectionEvent.read();
|
|
1496
|
-
*
|
|
1497
|
-
* for(const content of draft.contents) {
|
|
1498
|
-
* // This change won't immediately appear in the user's design
|
|
1499
|
-
* content.text = "This is the new text";
|
|
1500
|
-
* }
|
|
1501
|
-
*
|
|
1502
|
-
* // The changes will now appear in the user's design
|
|
1503
|
-
* await draft.save();
|
|
1504
|
-
* ```
|
|
1505
|
-
*/
|
|
1506
|
-
read(): Promise<ContentDraft<SelectionValue<Scope>>>;
|
|
1507
|
-
}
|
|
1508
|
-
|
|
1509
|
-
/**
|
|
1510
|
-
* @beta
|
|
1511
|
-
* The type of content that apps can detect selection changes on.
|
|
1512
|
-
*/
|
|
1513
|
-
export declare type SelectionScope =
|
|
1514
|
-
| "plaintext"
|
|
1515
|
-
| "image"
|
|
1516
|
-
| "video"
|
|
1517
|
-
| "richtext";
|
|
1518
|
-
|
|
1519
|
-
/**
|
|
1520
|
-
* @beta
|
|
1521
|
-
* The selected content.
|
|
1522
|
-
*
|
|
1523
|
-
* @remarks
|
|
1524
|
-
* The value depends on the {@link SelectionScope}.
|
|
1525
|
-
*/
|
|
1526
|
-
export declare type SelectionValue<Scope extends SelectionScope> = {
|
|
1527
|
-
/**
|
|
1528
|
-
* The selected content when {@link SelectionScope} is `"plaintext"`.
|
|
1529
|
-
*/
|
|
1530
|
-
["plaintext"]: {
|
|
1531
|
-
/**
|
|
1532
|
-
* The text content of the element as plain text.
|
|
1533
|
-
*/
|
|
1534
|
-
text: string;
|
|
1535
|
-
};
|
|
1536
|
-
/**
|
|
1537
|
-
* The selected content when {@link SelectionScope} is `"image"`.
|
|
1538
|
-
*/
|
|
1539
|
-
["image"]: {
|
|
1540
|
-
/**
|
|
1541
|
-
* A unique identifier that points to an image asset in Canva's backend.
|
|
1542
|
-
*/
|
|
1543
|
-
ref: ImageRef;
|
|
1544
|
-
};
|
|
1545
|
-
/**
|
|
1546
|
-
* The selected content when {@link SelectionScope} is `"video"`.
|
|
1547
|
-
*/
|
|
1548
|
-
["video"]: {
|
|
1549
|
-
/**
|
|
1550
|
-
* A unique identifier that points to an video asset in Canva's backend.
|
|
1551
|
-
*/
|
|
1552
|
-
ref: VideoRef;
|
|
1553
|
-
};
|
|
1554
|
-
/**
|
|
1555
|
-
* The selected content when {@link SelectionScope} is `"richtext"`.
|
|
1556
|
-
*/
|
|
1557
|
-
["richtext"]: RichtextRange;
|
|
1558
|
-
}[Scope];
|
|
1559
|
-
|
|
1560
|
-
/**
|
|
1561
|
-
* @public
|
|
1562
|
-
* Updates the background of the user's current page. The background can be a solid color,
|
|
1563
|
-
* an image or a video.
|
|
1564
|
-
*/
|
|
1565
|
-
export declare function setCurrentPageBackground(
|
|
1566
|
-
opts: PageBackgroundFill
|
|
1567
|
-
): Promise<void>;
|
|
1568
|
-
|
|
1569
|
-
/**
|
|
1570
|
-
* @public
|
|
1571
|
-
* A path that defines the shape of a shape element.
|
|
1572
|
-
*/
|
|
1573
|
-
export declare type ShapePath = {
|
|
1574
|
-
/**
|
|
1575
|
-
* The shape of the path.
|
|
1576
|
-
*
|
|
1577
|
-
* @remarks
|
|
1578
|
-
* This accepts the same value as the `d` attribute of the SVG <path> element,
|
|
1579
|
-
* with some limitations.
|
|
1580
|
-
*
|
|
1581
|
-
* The path must:
|
|
1582
|
-
*
|
|
1583
|
-
* - start with an M command
|
|
1584
|
-
* - not have more than one M command
|
|
1585
|
-
* - not use the Q command
|
|
1586
|
-
* - be closed, either with a Z command at the end or by having the last
|
|
1587
|
-
* coordinate match the first coordinate
|
|
1588
|
-
*/
|
|
1589
|
-
d: string;
|
|
1590
|
-
/**
|
|
1591
|
-
* The appearance of the path's interior.
|
|
1592
|
-
*/
|
|
1593
|
-
fill: Fill;
|
|
1594
|
-
/**
|
|
1595
|
-
* The outline of the path.
|
|
1596
|
-
*/
|
|
1597
|
-
stroke?: PathStroke;
|
|
1598
|
-
};
|
|
1599
|
-
|
|
1600
|
-
/**
|
|
1601
|
-
* @public
|
|
1602
|
-
* Properties for configuring the scale and cropping of a shape.
|
|
1603
|
-
*
|
|
1604
|
-
* @remarks
|
|
1605
|
-
* This is similar to the `viewBox` attribute of the <svg> element.
|
|
1606
|
-
*/
|
|
1607
|
-
export declare type ShapeViewBox = {
|
|
1608
|
-
/**
|
|
1609
|
-
* The distance of the shape from the top edge of the element.
|
|
1610
|
-
*/
|
|
1611
|
-
top: number;
|
|
1612
|
-
/**
|
|
1613
|
-
* The distance of the shape from the left edge of the element.
|
|
1614
|
-
*/
|
|
1615
|
-
left: number;
|
|
1616
|
-
/**
|
|
1617
|
-
* The width of the view box.
|
|
1618
|
-
*/
|
|
1619
|
-
width: number;
|
|
1620
|
-
/**
|
|
1621
|
-
* The height of the view box.
|
|
1622
|
-
*/
|
|
1623
|
-
height: number;
|
|
1624
|
-
};
|
|
1625
|
-
|
|
1626
|
-
/**
|
|
1627
|
-
* @public
|
|
1628
|
-
* Attributes for changing the appearance of text.
|
|
1629
|
-
*/
|
|
1630
|
-
export declare type TextAttributes = {
|
|
1631
|
-
/**
|
|
1632
|
-
* The size of the text.
|
|
1633
|
-
*
|
|
1634
|
-
* @remarks
|
|
1635
|
-
* The default value is 16. This must be an integer between 1 and 1000.
|
|
1636
|
-
* This property will be ignored when adding native text elements without specifying placement.
|
|
1637
|
-
*/
|
|
1638
|
-
fontSize?: number;
|
|
1639
|
-
/**
|
|
1640
|
-
* The alignment of the text.
|
|
1641
|
-
* @defaultValue 'start'
|
|
1642
|
-
*/
|
|
1643
|
-
textAlign?: "start" | "center" | "end" | "justify";
|
|
1644
|
-
/**
|
|
1645
|
-
* The color of the text as a hex code.
|
|
1646
|
-
*
|
|
1647
|
-
* @remarks
|
|
1648
|
-
* The hex code must include all six characters and be prefixed with a # symbol
|
|
1649
|
-
* (e.g. #ff0099). The default value is #000000.
|
|
1650
|
-
*/
|
|
1651
|
-
color?: string;
|
|
1652
|
-
/**
|
|
1653
|
-
* @public
|
|
1654
|
-
* A reference to the font to use for this text element.
|
|
1655
|
-
*/
|
|
1656
|
-
fontRef?: FontRef;
|
|
1657
|
-
/**
|
|
1658
|
-
* The weight of the font.
|
|
1659
|
-
* @defaultValue 'normal'
|
|
1660
|
-
*/
|
|
1661
|
-
fontWeight?: FontWeight;
|
|
1662
|
-
/**
|
|
1663
|
-
* The style of the font.
|
|
1664
|
-
* @defaultValue 'normal'
|
|
1665
|
-
*/
|
|
1666
|
-
fontStyle?: "normal" | "italic";
|
|
1667
|
-
/**
|
|
1668
|
-
* The decoration of the font.
|
|
1669
|
-
* @defaultValue 'none'
|
|
1670
|
-
*/
|
|
1671
|
-
decoration?: "none" | "underline";
|
|
1672
|
-
};
|
|
1673
|
-
|
|
1674
|
-
/**
|
|
1675
|
-
* @beta
|
|
1676
|
-
*/
|
|
1677
|
-
declare type TextBox = {
|
|
1678
|
-
/**
|
|
1679
|
-
* The width of the element. This must be an integer between 0 and 32767.
|
|
1680
|
-
*/
|
|
1681
|
-
width?: number;
|
|
1682
|
-
/**
|
|
1683
|
-
* The distance from the top edge of the container.
|
|
1684
|
-
*
|
|
1685
|
-
* @remarks
|
|
1686
|
-
* This must be an integer between -32768 and 32767. This property doesn't have
|
|
1687
|
-
* any effect if the app element only contains a single element.
|
|
1688
|
-
*/
|
|
1689
|
-
top: number;
|
|
1690
|
-
/**
|
|
1691
|
-
* The distance from the left edge of the container.
|
|
1692
|
-
*
|
|
1693
|
-
* @remarks
|
|
1694
|
-
* This must be an integer between -32768 and 32767. This property doesn't have
|
|
1695
|
-
* any effect if the app element only contains a single element.
|
|
1696
|
-
*/
|
|
1697
|
-
left: number;
|
|
1698
|
-
/**
|
|
1699
|
-
* The rotation of the element, in degrees.
|
|
1700
|
-
*
|
|
1701
|
-
* @remarks
|
|
1702
|
-
* This must be an integer between -180 and 180.
|
|
1703
|
-
*/
|
|
1704
|
-
rotation?: number;
|
|
1705
|
-
};
|
|
1706
|
-
|
|
1707
|
-
/**
|
|
1708
|
-
* @public
|
|
1709
|
-
* Options for defining the drag-and-drop behavior of a text element.
|
|
1710
|
-
*/
|
|
1711
|
-
export declare type TextDragConfig = {
|
|
1712
|
-
/**
|
|
1713
|
-
* The type of element.
|
|
1714
|
-
*/
|
|
1715
|
-
type: "TEXT";
|
|
1716
|
-
/**
|
|
1717
|
-
* The text content to drag.
|
|
1718
|
-
*/
|
|
1719
|
-
children?: string[];
|
|
1720
|
-
/**
|
|
1721
|
-
* The alignment of the text.
|
|
1722
|
-
* @defaultValue 'start'
|
|
1723
|
-
*/
|
|
1724
|
-
textAlign?: "start" | "center" | "end" | "justify";
|
|
1725
|
-
/**
|
|
1726
|
-
* The weight of the font.
|
|
1727
|
-
* @defaultValue 'normal'
|
|
1728
|
-
*/
|
|
1729
|
-
fontWeight?: FontWeight;
|
|
1730
|
-
/**
|
|
1731
|
-
* The style of the font.
|
|
1732
|
-
* @defaultValue 'normal'
|
|
1733
|
-
*/
|
|
1734
|
-
fontStyle?: "normal" | "italic";
|
|
1735
|
-
/**
|
|
1736
|
-
* The decoration of the font.
|
|
1737
|
-
* @defaultValue 'none'
|
|
1738
|
-
*/
|
|
1739
|
-
decoration?: "none" | "underline";
|
|
1740
|
-
/**
|
|
1741
|
-
* @beta
|
|
1742
|
-
* A unique identifier that references a font asset in Canva's backend.
|
|
1743
|
-
*/
|
|
1744
|
-
fontRef?: FontRef;
|
|
1745
|
-
};
|
|
1746
|
-
|
|
1747
|
-
/**
|
|
1748
|
-
* @beta
|
|
1749
|
-
* A region of rich text.
|
|
1750
|
-
*/
|
|
1751
|
-
export declare type TextRegion = {
|
|
1752
|
-
/**
|
|
1753
|
-
* The plain text content of the region.
|
|
1754
|
-
*/
|
|
1755
|
-
text: string;
|
|
1756
|
-
/**
|
|
1757
|
-
* The formatting of the region.
|
|
1758
|
-
*/
|
|
1759
|
-
formatting?: Partial<RichtextFormatting>;
|
|
1760
|
-
};
|
|
1761
|
-
|
|
1762
|
-
/**
|
|
1763
|
-
* @public
|
|
1764
|
-
* The methods for adding drag-and-drop behavior to an app.
|
|
1765
|
-
*/
|
|
1766
|
-
export declare interface UI {
|
|
1767
|
-
/**
|
|
1768
|
-
* @public
|
|
1769
|
-
* Makes the specified node draggable.
|
|
1770
|
-
*
|
|
1771
|
-
* @deprecated use `UI.startDrag` instead
|
|
1772
|
-
*
|
|
1773
|
-
* @param options - Options for making an element draggable.
|
|
1774
|
-
*/
|
|
1775
|
-
makeDraggable(options: DraggableElementData): void;
|
|
1776
|
-
/**
|
|
1777
|
-
* @public
|
|
1778
|
-
* Handles a drag event initiated inside the app to Canva, enables drag-and_drop interactions with elements outside of the app.
|
|
1779
|
-
* @param event - The drag start event.
|
|
1780
|
-
* @param dragData - The data to be passed to the drag handler.
|
|
1781
|
-
*/
|
|
1782
|
-
startDrag<E extends HTMLElement>(
|
|
1783
|
-
event: DragStartEvent<E>,
|
|
1784
|
-
dragData:
|
|
1785
|
-
| TextDragConfig
|
|
1786
|
-
| AudioDragConfig
|
|
1787
|
-
| EmbedDragConfig
|
|
1788
|
-
| VideoDragConfigForElement<E>
|
|
1789
|
-
| ImageDragConfigForElement<E>
|
|
1790
|
-
): Promise<void>;
|
|
1791
|
-
}
|
|
1792
|
-
|
|
1793
|
-
/**
|
|
1794
|
-
* An alias for the UI interface, providing access to ui related functionality
|
|
1795
|
-
* @public
|
|
1796
|
-
*/
|
|
1797
|
-
export declare const ui: UI;
|
|
1798
|
-
|
|
1799
|
-
/**
|
|
1800
|
-
* @deprecated
|
|
1801
|
-
* @public
|
|
1802
|
-
* Options for defining the drag-and-drop behavior of audio tracks.
|
|
1803
|
-
*/
|
|
1804
|
-
export declare type UserSuppliedAudioDragData = AudioDragConfig;
|
|
1805
|
-
|
|
1806
|
-
/**
|
|
1807
|
-
* @deprecated
|
|
1808
|
-
* @public
|
|
1809
|
-
*
|
|
1810
|
-
* Options for defining the Drag and Drop behaviour for images
|
|
1811
|
-
* which have been supplied as data urls
|
|
1812
|
-
*/
|
|
1813
|
-
export declare type UserSuppliedDataUrlImageDragData = CommonImageDragConfig & {
|
|
1814
|
-
/**
|
|
1815
|
-
* The dimensions of the full-size image.
|
|
1816
|
-
*
|
|
1817
|
-
* @remarks
|
|
1818
|
-
* The full-size image is the image that Canva uploads to the user's account and
|
|
1819
|
-
* adds to their design.
|
|
1820
|
-
*
|
|
1821
|
-
* If omitted, the value of the `previewSize` property is used as a fallback.
|
|
1822
|
-
*/
|
|
1823
|
-
fullSize?: Dimensions;
|
|
1824
|
-
/**
|
|
1825
|
-
* The data URL of the preview image.
|
|
1826
|
-
*
|
|
1827
|
-
* @remarks
|
|
1828
|
-
* The preview image is the image that users see under their cursor while dragging
|
|
1829
|
-
* it into their design.
|
|
1830
|
-
*
|
|
1831
|
-
* If omitted, the value of the `fullSizeSrc` property is used as a fallback.
|
|
1832
|
-
*/
|
|
1833
|
-
previewSrc?: string;
|
|
1834
|
-
/**
|
|
1835
|
-
* The data URL of the full-size image.
|
|
1836
|
-
*
|
|
1837
|
-
* @remarks
|
|
1838
|
-
* The full-size image is the image that Canva uploads to the user's account and
|
|
1839
|
-
* adds to their design.
|
|
1840
|
-
*/
|
|
1841
|
-
fullSizeSrc: string;
|
|
1842
|
-
};
|
|
1843
|
-
|
|
1844
|
-
/**
|
|
1845
|
-
* @deprecated
|
|
1846
|
-
* @public
|
|
1847
|
-
* Options for defining the drag-and-drop behavior that can be defined by an app developer.
|
|
1848
|
-
*/
|
|
1849
|
-
export declare type UserSuppliedDragData =
|
|
1850
|
-
| UserSuppliedImageDragData
|
|
1851
|
-
| UserSuppliedTextDragData
|
|
1852
|
-
| UserSuppliedVideoDragData
|
|
1853
|
-
| UserSuppliedAudioDragData;
|
|
1854
|
-
|
|
1855
|
-
/**
|
|
1856
|
-
* @deprecated
|
|
1857
|
-
* @public
|
|
1858
|
-
*
|
|
1859
|
-
* Options for defining the Drag and Drop behaviour for images uploaded
|
|
1860
|
-
* via the Content capability.
|
|
1861
|
-
*/
|
|
1862
|
-
export declare type UserSuppliedExternalImageDragData =
|
|
1863
|
-
CommonImageDragConfig & {
|
|
1864
|
-
/**
|
|
1865
|
-
* The function that resolves an image ref
|
|
1866
|
-
* @remarks
|
|
1867
|
-
*
|
|
1868
|
-
* This function will be run during the drag process in order to fetch the media ref of the
|
|
1869
|
-
* external image being fetched. This function should return the result of `upload`
|
|
1870
|
-
* from the content capability.
|
|
1871
|
-
*/
|
|
1872
|
-
resolveImageRef: () => Promise<{
|
|
1873
|
-
ref: ImageRef;
|
|
1874
|
-
}>;
|
|
1875
|
-
/**
|
|
1876
|
-
* The URL of the preview image.
|
|
1877
|
-
*
|
|
1878
|
-
* @remarks
|
|
1879
|
-
* The preview image is the image that users see under their cursor while dragging
|
|
1880
|
-
* it into their design.
|
|
1881
|
-
*/
|
|
1882
|
-
previewSrc: string;
|
|
1883
|
-
/**
|
|
1884
|
-
* The dimensions of the full-size image.
|
|
1885
|
-
*
|
|
1886
|
-
* @remarks
|
|
1887
|
-
* The full-size image is the image that Canva uploads to the user's account and
|
|
1888
|
-
* adds to their design.
|
|
1889
|
-
*
|
|
1890
|
-
* If omitted, the value of the `previewSize` property is used as a fallback.
|
|
1891
|
-
*/
|
|
1892
|
-
fullSize?: Dimensions;
|
|
1893
|
-
};
|
|
1894
|
-
|
|
1895
|
-
/**
|
|
1896
|
-
* @deprecated
|
|
1897
|
-
* @public
|
|
1898
|
-
* Options for defining the drag-and-drop behavior of an image element that can be defined by an
|
|
1899
|
-
* app developer.
|
|
1900
|
-
*/
|
|
1901
|
-
export declare type UserSuppliedImageDragData =
|
|
1902
|
-
| UserSuppliedDataUrlImageDragData
|
|
1903
|
-
| UserSuppliedExternalImageDragData;
|
|
1904
|
-
|
|
1905
|
-
/**
|
|
1906
|
-
* @deprecated
|
|
1907
|
-
* @public
|
|
1908
|
-
* Options for defining the drag-and-drop behavior of a text element.
|
|
1909
|
-
*/
|
|
1910
|
-
export declare type UserSuppliedTextDragData = TextDragConfig;
|
|
1911
|
-
|
|
1912
|
-
/**
|
|
1913
|
-
* @deprecated
|
|
1914
|
-
* @public
|
|
1915
|
-
* Options for defining the drag-and-drop behavior for videos.
|
|
1916
|
-
*/
|
|
1917
|
-
export declare type UserSuppliedVideoDragData = {
|
|
1918
|
-
/**
|
|
1919
|
-
* The type of element.
|
|
1920
|
-
*/
|
|
1921
|
-
type: "VIDEO";
|
|
1922
|
-
/**
|
|
1923
|
-
* The function used resolve the video ref.
|
|
1924
|
-
* This is used in conjunction with content import.
|
|
1925
|
-
*/
|
|
1926
|
-
resolveVideoRef: () => Promise<{
|
|
1927
|
-
ref: VideoRef;
|
|
1928
|
-
}>;
|
|
1929
|
-
/**
|
|
1930
|
-
* The dimensions of the preview image.
|
|
1931
|
-
* @remarks
|
|
1932
|
-
* The preview image is the image that users see under their cursor
|
|
1933
|
-
* while dragging it into their design.
|
|
1934
|
-
*/
|
|
1935
|
-
previewSize: Dimensions;
|
|
1936
|
-
/**
|
|
1937
|
-
* The dimensions of the full-size video.
|
|
1938
|
-
* These dimensions are used when adding the video to the design
|
|
1939
|
-
*
|
|
1940
|
-
* If omitted, the value of the `previewSize` property is
|
|
1941
|
-
* used as a fallback.
|
|
1942
|
-
*/
|
|
1943
|
-
fullSize?: Dimensions;
|
|
1944
|
-
/**
|
|
1945
|
-
* The URL of the preview image.
|
|
1946
|
-
*
|
|
1947
|
-
* @remarks
|
|
1948
|
-
* The preview image is the image that users see under their cursor while dragging
|
|
1949
|
-
* it into their design.
|
|
1950
|
-
*/
|
|
1951
|
-
previewSrc: string;
|
|
1952
|
-
};
|
|
1953
|
-
|
|
1954
|
-
/**
|
|
1955
|
-
* @public
|
|
1956
|
-
* The types of values that can be stored within an app element's data.
|
|
1957
|
-
*/
|
|
1958
|
-
export declare type Value =
|
|
1959
|
-
| Primitive
|
|
1960
|
-
| ObjectPrimitive
|
|
1961
|
-
| Exclude<Value, undefined>[]
|
|
1962
|
-
| {
|
|
1963
|
-
[key: string]: Value;
|
|
1964
|
-
};
|
|
1965
|
-
|
|
1966
|
-
/**
|
|
1967
|
-
* @public
|
|
1968
|
-
* Options for defining the drag-and-drop behavior for videos.
|
|
1969
|
-
*/
|
|
1970
|
-
export declare type VideoDragConfig = {
|
|
1971
|
-
/**
|
|
1972
|
-
* The type of element.
|
|
1973
|
-
*/
|
|
1974
|
-
type: "VIDEO";
|
|
1975
|
-
/**
|
|
1976
|
-
* The function used resolve the video ref.
|
|
1977
|
-
* This is used in conjunction with content import.
|
|
1978
|
-
*/
|
|
1979
|
-
resolveVideoRef: () => Promise<{
|
|
1980
|
-
ref: VideoRef;
|
|
1981
|
-
}>;
|
|
1982
|
-
/**
|
|
1983
|
-
* The dimensions of the preview image.
|
|
1984
|
-
* @remarks
|
|
1985
|
-
* The preview image is the image that users see under their cursor
|
|
1986
|
-
* while dragging it into their design.
|
|
1987
|
-
*/
|
|
1988
|
-
previewSize: Dimensions;
|
|
1989
|
-
/**
|
|
1990
|
-
* The dimensions of the full-size video.
|
|
1991
|
-
* These dimensions are used when adding the video to the design
|
|
1992
|
-
*
|
|
1993
|
-
* If omitted, the value of the `previewSize` property is
|
|
1994
|
-
* used as a fallback.
|
|
1995
|
-
*/
|
|
1996
|
-
fullSize?: Dimensions;
|
|
1997
|
-
/**
|
|
1998
|
-
* The URL of the preview image.
|
|
1999
|
-
*
|
|
2000
|
-
* @remarks
|
|
2001
|
-
* The preview image is the image that users see under their cursor while dragging
|
|
2002
|
-
* it into their design.
|
|
2003
|
-
*/
|
|
2004
|
-
previewUrl: string;
|
|
2005
|
-
};
|
|
2006
|
-
|
|
2007
|
-
/**
|
|
2008
|
-
* @public
|
|
2009
|
-
* Options for defining the drag-and-drop behavior for videos.
|
|
2010
|
-
*/
|
|
2011
|
-
export declare type VideoDragConfigForElement<E extends Element> =
|
|
2012
|
-
E extends HTMLImageElement
|
|
2013
|
-
? Partial<VideoDragConfig> &
|
|
2014
|
-
Pick<VideoDragConfig, "type" | "resolveVideoRef">
|
|
2015
|
-
: VideoDragConfig;
|
|
2016
|
-
|
|
2017
|
-
/**
|
|
2018
|
-
* @public
|
|
2019
|
-
* A video asset that will be used to fill the given path.
|
|
2020
|
-
*/
|
|
2021
|
-
export declare type VideoFill = {
|
|
2022
|
-
/**
|
|
2023
|
-
* Type of an asset that will be used to fill the given path.
|
|
2024
|
-
*/
|
|
2025
|
-
type: "VIDEO";
|
|
2026
|
-
/**
|
|
2027
|
-
* A unique identifier that references a video asset in Canva's backend.
|
|
2028
|
-
*/
|
|
2029
|
-
ref: VideoRef;
|
|
2030
|
-
};
|
|
2031
|
-
|
|
2032
|
-
/**
|
|
2033
|
-
* @public
|
|
2034
|
-
* A unique identifier that references a video asset in Canva's backend.
|
|
2035
|
-
*/
|
|
2036
|
-
export declare type VideoRef = string & {
|
|
2037
|
-
__videoRef: never;
|
|
2038
|
-
};
|
|
2039
|
-
|
|
2040
|
-
declare type Width = {
|
|
2041
|
-
width: number;
|
|
2042
|
-
height: "auto";
|
|
2043
|
-
};
|
|
2044
|
-
|
|
2045
|
-
declare type WidthAndHeight = {
|
|
2046
|
-
/**
|
|
2047
|
-
* The width of the box. If height is a number, this can be set to "auto".
|
|
2048
|
-
* Otherwise, it must be an integer between 0 and 32767.
|
|
2049
|
-
*/
|
|
2050
|
-
width: number;
|
|
2051
|
-
/**
|
|
2052
|
-
* The height of the box. If width is a number, this can be set to "auto".
|
|
2053
|
-
* Otherwise, it must be an integer between 0 and 32767.
|
|
2054
|
-
*/
|
|
2055
|
-
height: number;
|
|
2056
|
-
};
|
|
2057
|
-
|
|
2058
|
-
export {};
|