@canva/design 2.0.0-beta.2 → 2.1.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/{beta.d.ts → index.d.ts}
RENAMED
|
@@ -328,14 +328,6 @@ export declare interface ContentDraft<T> {
|
|
|
328
328
|
*/
|
|
329
329
|
export declare type ContentType = "richtext";
|
|
330
330
|
|
|
331
|
-
/**
|
|
332
|
-
* @beta
|
|
333
|
-
* Options for configuring where content in a design should be queried from.
|
|
334
|
-
*/
|
|
335
|
-
declare type ContextOptions = {
|
|
336
|
-
context: "current_page";
|
|
337
|
-
};
|
|
338
|
-
|
|
339
331
|
/**
|
|
340
332
|
* @public
|
|
341
333
|
* A set of X and Y coordinates.
|
|
@@ -357,746 +349,12 @@ export declare type Coordinates = {
|
|
|
357
349
|
*/
|
|
358
350
|
export declare function createRichtextRange(): RichtextRange;
|
|
359
351
|
|
|
360
|
-
/**
|
|
361
|
-
* @beta
|
|
362
|
-
* Describes a part of a design.
|
|
363
|
-
*/
|
|
364
|
-
export declare type DesignContext = DesignContextOptions["type"];
|
|
365
|
-
|
|
366
|
-
/**
|
|
367
|
-
* @beta
|
|
368
|
-
* Options for configuring which part of a design to read.
|
|
369
|
-
*/
|
|
370
|
-
declare type DesignContextOptions = {
|
|
371
|
-
/**
|
|
372
|
-
* The type of context.
|
|
373
|
-
*/
|
|
374
|
-
type: "current_page";
|
|
375
|
-
};
|
|
376
|
-
|
|
377
|
-
/**
|
|
378
|
-
* @beta
|
|
379
|
-
* Provides methods for reading and updating the structure and content of a design.
|
|
380
|
-
*/
|
|
381
|
-
export declare namespace DesignEditing {
|
|
382
|
-
/**
|
|
383
|
-
* @beta
|
|
384
|
-
* A snapshot containing a fragment of a design's structure and content.
|
|
385
|
-
*/
|
|
386
|
-
export type DesignDraft<D> = Readonly<D> & {
|
|
387
|
-
/**
|
|
388
|
-
* Saves any changes made to the draft.
|
|
389
|
-
*
|
|
390
|
-
* @remarks
|
|
391
|
-
* - Any changes to the draft are only reflected in the design after this method is called.
|
|
392
|
-
* - Once this method is called, further changes to the draft are not possible.
|
|
393
|
-
*/
|
|
394
|
-
save(): Promise<void>;
|
|
395
|
-
};
|
|
396
|
-
/**
|
|
397
|
-
* @beta
|
|
398
|
-
* Options for creating an image fill in the element builder
|
|
399
|
-
*/
|
|
400
|
-
export type ImageFillOpts = Partial<ImageFill> &
|
|
401
|
-
Required<Pick<ImageFill, "type" | "imageRef">>;
|
|
402
|
-
/**
|
|
403
|
-
* @beta
|
|
404
|
-
* Options for creating a video fill in the element builder
|
|
405
|
-
*/
|
|
406
|
-
export type VideoFillOpts = Partial<VideoFill> &
|
|
407
|
-
Required<Pick<VideoFill, "type" | "videoRef">>;
|
|
408
|
-
/**
|
|
409
|
-
* @beta
|
|
410
|
-
* Options for creating a media fill in the element builder
|
|
411
|
-
*/
|
|
412
|
-
export type MediaFillOpts = ImageFillOpts | VideoFillOpts;
|
|
413
|
-
/**
|
|
414
|
-
* @beta
|
|
415
|
-
* Options for creating a fill in the element builder
|
|
416
|
-
*/
|
|
417
|
-
export type FillOpts =
|
|
418
|
-
| {
|
|
419
|
-
color: ColorFillOpts;
|
|
420
|
-
media?: MediaFillOpts;
|
|
421
|
-
}
|
|
422
|
-
| {
|
|
423
|
-
color?: ColorFillOpts;
|
|
424
|
-
media: MediaFillOpts;
|
|
425
|
-
};
|
|
426
|
-
/**
|
|
427
|
-
* @beta
|
|
428
|
-
*/
|
|
429
|
-
export type ColorFillOpts = Exclude<ColorFill, Unsupported>;
|
|
430
|
-
/**
|
|
431
|
-
* @beta
|
|
432
|
-
* Options for creating a stroke in the element builder
|
|
433
|
-
*/
|
|
434
|
-
export type StrokeOpts = Pick<Stroke, "weight"> & {
|
|
435
|
-
color: ColorFillOpts;
|
|
436
|
-
};
|
|
437
|
-
/**
|
|
438
|
-
* @beta
|
|
439
|
-
* Options for creating a shape path in the element builder
|
|
440
|
-
*/
|
|
441
|
-
export type ShapePathOpts = Pick<Path, "d"> & {
|
|
442
|
-
fill?: FillOpts;
|
|
443
|
-
stroke?: StrokeOpts;
|
|
444
|
-
};
|
|
445
|
-
/**
|
|
446
|
-
* @beta
|
|
447
|
-
* Options for creating a rect element.
|
|
448
|
-
*/
|
|
449
|
-
export type CreateRectElementOpts = Required<
|
|
450
|
-
Pick<Element, "top" | "left" | "width" | "height">
|
|
451
|
-
> & {
|
|
452
|
-
fill?: FillOpts;
|
|
453
|
-
} & {
|
|
454
|
-
stroke?: StrokeOpts;
|
|
455
|
-
} & Partial<Omit<RectElement, "fill" | "stroke" | "type">>;
|
|
456
|
-
/**
|
|
457
|
-
* @beta
|
|
458
|
-
* Options for creating a shape element.
|
|
459
|
-
*/
|
|
460
|
-
export type CreateShapeElementOpts = Required<
|
|
461
|
-
Pick<ShapeElement, "top" | "left" | "width" | "height" | "viewBox">
|
|
462
|
-
> & {
|
|
463
|
-
paths: ShapePathOpts[];
|
|
464
|
-
} & Partial<Omit<ShapeElement, "type" | "paths">>;
|
|
465
|
-
/**
|
|
466
|
-
* @beta
|
|
467
|
-
* Options for creating an embed element.
|
|
468
|
-
*/ export type CreateEmbedElementOpts = Required<
|
|
469
|
-
Pick<EmbedElement, "top" | "left" | "width" | "height" | "url">
|
|
470
|
-
> &
|
|
471
|
-
Partial<Omit<EmbedElement, "type">>;
|
|
472
|
-
/**
|
|
473
|
-
* @beta
|
|
474
|
-
* Options for creating a text element.
|
|
475
|
-
*/
|
|
476
|
-
export type CreateTextElementOpts = Required<
|
|
477
|
-
Pick<TextElement, "top" | "left" | "width" | "text">
|
|
478
|
-
> &
|
|
479
|
-
Partial<Omit<TextElement, "type" | "height">>;
|
|
480
|
-
/**
|
|
481
|
-
* @beta
|
|
482
|
-
* Provides methods for creating elements.
|
|
483
|
-
*
|
|
484
|
-
* @remarks
|
|
485
|
-
* These methods don't add the elements to the design. They only return elements that can
|
|
486
|
-
* be added to a design, such as with the `insertAfter` method.
|
|
487
|
-
*/
|
|
488
|
-
export interface ElementBuilder {
|
|
489
|
-
/**
|
|
490
|
-
* Creates a rect element.
|
|
491
|
-
* @param opts - Options for creating the rect element.
|
|
492
|
-
*/
|
|
493
|
-
createRectElement(opts: CreateRectElementOpts): RectElement;
|
|
494
|
-
/**
|
|
495
|
-
* Creates a shape element.
|
|
496
|
-
* @param opts - Options for creating the shape element.
|
|
497
|
-
*/
|
|
498
|
-
createShapeElement(opts: CreateShapeElementOpts): ShapeElement;
|
|
499
|
-
/**
|
|
500
|
-
* Creates an embed element.
|
|
501
|
-
* @param opts - Options for creating the embed element.
|
|
502
|
-
*/
|
|
503
|
-
createEmbedElement(opts: CreateEmbedElementOpts): EmbedElement;
|
|
504
|
-
/**
|
|
505
|
-
* Creates a text element.
|
|
506
|
-
* @param opts - Options for creating the text element.
|
|
507
|
-
*/
|
|
508
|
-
createTextElement(opts: CreateTextElementOpts): TextElement;
|
|
509
|
-
/**
|
|
510
|
-
* Creates a richtext range.
|
|
511
|
-
*/
|
|
512
|
-
createRichtextRange(): RichtextRange;
|
|
513
|
-
}
|
|
514
|
-
/**
|
|
515
|
-
* @beta
|
|
516
|
-
* The result of reading part of a design when the context is the current page.
|
|
517
|
-
*/
|
|
518
|
-
export type CurrentPageResult = DesignDraft<{
|
|
519
|
-
/**
|
|
520
|
-
* The current page of the design.
|
|
521
|
-
*/
|
|
522
|
-
page: FixedPage;
|
|
523
|
-
}>;
|
|
524
|
-
/**
|
|
525
|
-
* @beta
|
|
526
|
-
* The result of reading part of a design.
|
|
527
|
-
*/
|
|
528
|
-
export type DesignOpenResult = CurrentPageResult;
|
|
529
|
-
/**
|
|
530
|
-
* A function called for each item in the list.
|
|
531
|
-
*
|
|
532
|
-
* @param item - The current item in the list.
|
|
533
|
-
* @param index - The index of the current item.
|
|
534
|
-
*/
|
|
535
|
-
export type ForEachCallback<T> = (item: T, index: number) => void;
|
|
536
|
-
/**
|
|
537
|
-
* A function that determines if an item should be included in the result.
|
|
538
|
-
*
|
|
539
|
-
* @param item - The item to test.
|
|
540
|
-
* @returns `true` if the item should be included, otherwise `false`.
|
|
541
|
-
*/
|
|
542
|
-
export type FilterPredicate<T> = (item: T) => boolean;
|
|
543
|
-
/**
|
|
544
|
-
* A type predicate function that determines if an item is of a specific type.
|
|
545
|
-
*
|
|
546
|
-
* @param item - The item to test.
|
|
547
|
-
* @returns `true` if the item is of type `C`, otherwise `false`.
|
|
548
|
-
*/
|
|
549
|
-
export type TypeFilterPredicate<T, C extends T> = (item: T) => item is C;
|
|
550
|
-
/**
|
|
551
|
-
* A list that cannot be changed.
|
|
552
|
-
*/
|
|
553
|
-
export interface ReadableList<T> {
|
|
554
|
-
/**
|
|
555
|
-
* Gets the number of items in the list.
|
|
556
|
-
*
|
|
557
|
-
* @returns The number of items.
|
|
558
|
-
*/
|
|
559
|
-
count(): number;
|
|
560
|
-
/**
|
|
561
|
-
* Converts the list to an array.
|
|
562
|
-
*
|
|
563
|
-
* @returns An array containing all items. The items are the same as in the list.
|
|
564
|
-
*/
|
|
565
|
-
toArray(): readonly T[];
|
|
566
|
-
/**
|
|
567
|
-
* Executes a function for each item in the list.
|
|
568
|
-
*
|
|
569
|
-
* @param callback - The function to run for each item.
|
|
570
|
-
*/
|
|
571
|
-
forEach(callback: ForEachCallback<T>): void;
|
|
572
|
-
/**
|
|
573
|
-
* Creates a new array with items that match a specific type.
|
|
574
|
-
*
|
|
575
|
-
* @param filter - A function that checks if an item is of type `C`.
|
|
576
|
-
* @returns An array of items that are of type `C`.
|
|
577
|
-
*/
|
|
578
|
-
filter<C extends T>(filter: TypeFilterPredicate<T, C>): readonly C[];
|
|
579
|
-
/**
|
|
580
|
-
* Creates a new array with items that pass a test.
|
|
581
|
-
*
|
|
582
|
-
* @param filter - A function that tests each item. Returns `true` to keep the item.
|
|
583
|
-
* @returns An array of items that passed the test.
|
|
584
|
-
*/
|
|
585
|
-
filter(filter: FilterPredicate<T>): readonly T[];
|
|
586
|
-
}
|
|
587
|
-
/**
|
|
588
|
-
* @beta
|
|
589
|
-
* A list of items that can be changed.
|
|
590
|
-
*/
|
|
591
|
-
export interface MutableList<T> {
|
|
592
|
-
/**
|
|
593
|
-
* Adds a copy of an item to the list and places it right before another item.
|
|
594
|
-
*
|
|
595
|
-
* @param ref - The existing item to place the new item before.
|
|
596
|
-
* If `ref` is `undefined`, the new item is added at the end of the list.
|
|
597
|
-
* If `ref` does not exist in the list, the operation fails.
|
|
598
|
-
*
|
|
599
|
-
* @param item - The item to add. A copy of this item will be inserted.
|
|
600
|
-
*
|
|
601
|
-
* @returns
|
|
602
|
-
* The added item, or `undefined` if the operation failed.
|
|
603
|
-
*/
|
|
604
|
-
insertBefore(ref: T | undefined, item: T): T | undefined;
|
|
605
|
-
/**
|
|
606
|
-
* Adds a copy of an item to the list and places it right after another item.
|
|
607
|
-
*
|
|
608
|
-
* @param ref - The existing item to place the new item after.
|
|
609
|
-
* If `ref` is `undefined`, the new item is added at the end of the list.
|
|
610
|
-
* If `ref` does not exist in the list, the operation fails.
|
|
611
|
-
*
|
|
612
|
-
* @param item - The item to add. A copy of this item will be inserted.
|
|
613
|
-
*
|
|
614
|
-
* @returns
|
|
615
|
-
* The added item, or `undefined` if the operation failed.
|
|
616
|
-
*/
|
|
617
|
-
insertAfter(ref: T | undefined, item: T): T | undefined;
|
|
618
|
-
/**
|
|
619
|
-
* Moves an existing item to a new position right before another item.
|
|
620
|
-
*
|
|
621
|
-
* @param ref - The existing item to move the item before.
|
|
622
|
-
* If `ref` is `undefined`, the item is moved to the end of the list.
|
|
623
|
-
* If `ref` does not exist in the list, the operation fails.
|
|
624
|
-
*
|
|
625
|
-
* @param item - The item to move.
|
|
626
|
-
* The operation fails if the item is not already in the list.
|
|
627
|
-
*/
|
|
628
|
-
moveBefore(ref: T | undefined, item: T): void;
|
|
629
|
-
/**
|
|
630
|
-
* Moves an existing item to a new position right after another item.
|
|
631
|
-
*
|
|
632
|
-
* @param ref - The existing item to move the item after.
|
|
633
|
-
* If `ref` is `undefined`, the item is moved to the end of the list.
|
|
634
|
-
* If `ref` does not exist in the list, the operation fails.
|
|
635
|
-
*
|
|
636
|
-
* @param item - The item to move.
|
|
637
|
-
* The operation fails if the item is not already in the list.
|
|
638
|
-
*/
|
|
639
|
-
moveAfter(ref: T | undefined, item: T): void;
|
|
640
|
-
/**
|
|
641
|
-
* Removes an item from the list.
|
|
642
|
-
*
|
|
643
|
-
* @param item - The item to remove from the list.
|
|
644
|
-
*/
|
|
645
|
-
delete(item: T): void;
|
|
646
|
-
}
|
|
647
|
-
/**
|
|
648
|
-
* @beta
|
|
649
|
-
* A list of items that can be read and updated.
|
|
650
|
-
*/
|
|
651
|
-
export interface List<T> extends ReadableList<T>, MutableList<T> {}
|
|
652
|
-
/**
|
|
653
|
-
* @beta
|
|
654
|
-
* Represents an element that's not supported by the Apps SDK.
|
|
655
|
-
*/
|
|
656
|
-
export interface Unsupported {
|
|
657
|
-
/**
|
|
658
|
-
* The type of element.
|
|
659
|
-
*/
|
|
660
|
-
readonly type: "unsupported";
|
|
661
|
-
}
|
|
662
|
-
/**
|
|
663
|
-
* @beta
|
|
664
|
-
* A single valid character in a hex code.
|
|
665
|
-
*/
|
|
666
|
-
export type Hex = `123456790abcdef`[number];
|
|
667
|
-
/**
|
|
668
|
-
* @beta
|
|
669
|
-
* A six-character hexadecimal color code prefixed with a `#`.
|
|
670
|
-
*/
|
|
671
|
-
export type HexCode = `#${Hex}${Hex}${Hex}${Hex}${Hex}${Hex}`;
|
|
672
|
-
/**
|
|
673
|
-
* @beta
|
|
674
|
-
* A set of dimensions.
|
|
675
|
-
*/
|
|
676
|
-
export interface Dimensions {
|
|
677
|
-
/**
|
|
678
|
-
* A width, in pixels.
|
|
679
|
-
*/
|
|
680
|
-
readonly width: number;
|
|
681
|
-
/**
|
|
682
|
-
* A height, in pixels.
|
|
683
|
-
*/
|
|
684
|
-
readonly height: number;
|
|
685
|
-
}
|
|
686
|
-
/**
|
|
687
|
-
* @beta
|
|
688
|
-
* An image that fills the interior of a path.
|
|
689
|
-
*/
|
|
690
|
-
export interface ImageFill {
|
|
691
|
-
/**
|
|
692
|
-
* The type of media.
|
|
693
|
-
*/
|
|
694
|
-
readonly type: "image";
|
|
695
|
-
/**
|
|
696
|
-
* A unique identifier that points to an image asset in Canva's backend.
|
|
697
|
-
*/
|
|
698
|
-
imageRef: string;
|
|
699
|
-
/**
|
|
700
|
-
* If `true`, the image is flipped horizontally.
|
|
701
|
-
*/
|
|
702
|
-
flipX: boolean;
|
|
703
|
-
/**
|
|
704
|
-
* If `true`, the image is flipped vertically.
|
|
705
|
-
*/
|
|
706
|
-
flipY: boolean;
|
|
707
|
-
}
|
|
708
|
-
/**
|
|
709
|
-
* @beta
|
|
710
|
-
* A video that fills the interior of a path.
|
|
711
|
-
*/
|
|
712
|
-
export interface VideoFill {
|
|
713
|
-
/**
|
|
714
|
-
* The type of media.
|
|
715
|
-
*/
|
|
716
|
-
readonly type: "video";
|
|
717
|
-
/**
|
|
718
|
-
* A unique identifier that points to a video asset in Canva's backend.
|
|
719
|
-
*/
|
|
720
|
-
videoRef: string;
|
|
721
|
-
/**
|
|
722
|
-
* If `true`, the video is flipped horizontally.
|
|
723
|
-
*/
|
|
724
|
-
flipX: boolean;
|
|
725
|
-
/**
|
|
726
|
-
* If `true`, the video is flipped vertically.
|
|
727
|
-
*/
|
|
728
|
-
flipY: boolean;
|
|
729
|
-
}
|
|
730
|
-
/**
|
|
731
|
-
* @beta
|
|
732
|
-
* A media item that fills the interior of a path.
|
|
733
|
-
*/
|
|
734
|
-
export type MediaFill = ImageFill | VideoFill;
|
|
735
|
-
/**
|
|
736
|
-
* @beta
|
|
737
|
-
* A solid color that fills the interior of a path.
|
|
738
|
-
*/
|
|
739
|
-
export interface SolidFill {
|
|
740
|
-
/**
|
|
741
|
-
* The type of color.
|
|
742
|
-
*/
|
|
743
|
-
readonly type: "solid";
|
|
744
|
-
/**
|
|
745
|
-
* The color of the fill, as a hex code.
|
|
746
|
-
*
|
|
747
|
-
* @remarks
|
|
748
|
-
* - Must be six characters long.
|
|
749
|
-
* - Must start with a `#`.
|
|
750
|
-
* - Must use lowercase letters.
|
|
751
|
-
*/
|
|
752
|
-
color: HexCode;
|
|
753
|
-
}
|
|
754
|
-
/**
|
|
755
|
-
* @beta
|
|
756
|
-
* A color that fills the interior of a path.
|
|
757
|
-
*/
|
|
758
|
-
export type ColorFill = SolidFill | Unsupported;
|
|
759
|
-
/**
|
|
760
|
-
* @beta
|
|
761
|
-
* Describes how a path is filled with color or media.
|
|
762
|
-
*
|
|
763
|
-
* @remarks
|
|
764
|
-
* If both `media` and `color` are defined, `media` takes precedence.
|
|
765
|
-
*/
|
|
766
|
-
export interface Fill {
|
|
767
|
-
/**
|
|
768
|
-
* The media fill for the path, if any.
|
|
769
|
-
*/
|
|
770
|
-
media: MediaFill | undefined;
|
|
771
|
-
/**
|
|
772
|
-
* The color fill for the path, if any.
|
|
773
|
-
*/
|
|
774
|
-
color: ColorFill | undefined;
|
|
775
|
-
}
|
|
776
|
-
/**
|
|
777
|
-
* @beta
|
|
778
|
-
* The scale and cropping of a shape.
|
|
779
|
-
*
|
|
780
|
-
* @remarks
|
|
781
|
-
* This is similar to the `viewBox` attribute of an `SVGElement`.
|
|
782
|
-
*/
|
|
783
|
-
export type AlignedBox = {
|
|
784
|
-
/**
|
|
785
|
-
* The distance of the shape from the top edge of the element, in pixels.
|
|
786
|
-
*/
|
|
787
|
-
readonly top: number;
|
|
788
|
-
/**
|
|
789
|
-
* The distance of the shape from the left edge of the element, in pixels.
|
|
790
|
-
*/
|
|
791
|
-
readonly left: number;
|
|
792
|
-
/**
|
|
793
|
-
* The width of the view box, in pixels.
|
|
794
|
-
*/
|
|
795
|
-
readonly width: number;
|
|
796
|
-
/**
|
|
797
|
-
* The height of the view box, in pixels.
|
|
798
|
-
*/
|
|
799
|
-
readonly height: number;
|
|
800
|
-
};
|
|
801
|
-
/**
|
|
802
|
-
* @beta
|
|
803
|
-
* A path that defines the structure of a shape element.
|
|
804
|
-
*/
|
|
805
|
-
export interface Path {
|
|
806
|
-
/**
|
|
807
|
-
* The shape of the path.
|
|
808
|
-
*
|
|
809
|
-
* @remarks
|
|
810
|
-
* This is similar to the `d` attribute of an SVG's `path` element, with some limitations:
|
|
811
|
-
*
|
|
812
|
-
* - Must start with an `M` command.
|
|
813
|
-
* - Only one `M` command is allowed.
|
|
814
|
-
* - `Q` and `T` commands are not permitted.
|
|
815
|
-
* - The path must be closed using a `Z` command or matching start and end coordinates.
|
|
816
|
-
*/
|
|
817
|
-
readonly d: string;
|
|
818
|
-
/**
|
|
819
|
-
* The appearance of the path's interior.
|
|
820
|
-
*/
|
|
821
|
-
readonly fill: Fill;
|
|
822
|
-
/**
|
|
823
|
-
* The stroke (outline) of the path, if any.
|
|
824
|
-
*/
|
|
825
|
-
readonly stroke: Stroke | undefined;
|
|
826
|
-
}
|
|
827
|
-
/**
|
|
828
|
-
* @beta
|
|
829
|
-
* Represents an outline, such as the border of an element.
|
|
830
|
-
*/
|
|
831
|
-
export interface Stroke {
|
|
832
|
-
/**
|
|
833
|
-
* The weight (thickness) of the stroke.
|
|
834
|
-
*
|
|
835
|
-
* @remarks
|
|
836
|
-
* - Minimum: 0
|
|
837
|
-
* - Maximum: 100
|
|
838
|
-
*/
|
|
839
|
-
weight: number;
|
|
840
|
-
/**
|
|
841
|
-
* The color of the stroke.
|
|
842
|
-
*/
|
|
843
|
-
color: ColorFill;
|
|
844
|
-
}
|
|
845
|
-
/**
|
|
846
|
-
* @beta
|
|
847
|
-
* The basic properties of an element.
|
|
848
|
-
*
|
|
849
|
-
* @remarks
|
|
850
|
-
* These properties are shared by all elements in a design.
|
|
851
|
-
*/
|
|
852
|
-
export interface Element extends Dimensions {
|
|
853
|
-
/**
|
|
854
|
-
* If `true`, the element is locked and cannot be modified.
|
|
855
|
-
*/
|
|
856
|
-
readonly locked: boolean;
|
|
857
|
-
/**
|
|
858
|
-
* The distance from the top edge of the container, in pixels.
|
|
859
|
-
*
|
|
860
|
-
* @remarks
|
|
861
|
-
* - The pixels are relative to their container.
|
|
862
|
-
* - Minimum: -32768
|
|
863
|
-
* - Maximum: 32767
|
|
864
|
-
*/
|
|
865
|
-
top: number;
|
|
866
|
-
/**
|
|
867
|
-
* The distance from the left edge of the container, in pixels.
|
|
868
|
-
*
|
|
869
|
-
* @remarks
|
|
870
|
-
* - The pixels are relative to their container.
|
|
871
|
-
* - Minimum: -32768
|
|
872
|
-
* - Maximum: 32767
|
|
873
|
-
*/
|
|
874
|
-
left: number;
|
|
875
|
-
/**
|
|
876
|
-
* A rotation, in degrees.
|
|
877
|
-
*
|
|
878
|
-
* @remarks
|
|
879
|
-
* - Minimum: -180
|
|
880
|
-
* - Maximum: 180
|
|
881
|
-
*/
|
|
882
|
-
rotation: number;
|
|
883
|
-
/**
|
|
884
|
-
* Transparency as a percentage.
|
|
885
|
-
*
|
|
886
|
-
* @remarks
|
|
887
|
-
* - Minimum: 0
|
|
888
|
-
* - Maximum: 1
|
|
889
|
-
*/
|
|
890
|
-
transparency: number;
|
|
891
|
-
}
|
|
892
|
-
/**
|
|
893
|
-
* @beta
|
|
894
|
-
* Represents a rectangular element.
|
|
895
|
-
*/
|
|
896
|
-
export interface Rect {
|
|
897
|
-
/**
|
|
898
|
-
* The type of content.
|
|
899
|
-
*/
|
|
900
|
-
readonly type: "rect";
|
|
901
|
-
/**
|
|
902
|
-
* The appearance of the rectangle's interior.
|
|
903
|
-
*/
|
|
904
|
-
readonly fill: Fill;
|
|
905
|
-
/**
|
|
906
|
-
* The outline of the rectangle.
|
|
907
|
-
*/
|
|
908
|
-
readonly stroke: Stroke;
|
|
909
|
-
}
|
|
910
|
-
/**
|
|
911
|
-
* @beta
|
|
912
|
-
* Represents a vector shape element.
|
|
913
|
-
*/
|
|
914
|
-
export interface Shape {
|
|
915
|
-
/**
|
|
916
|
-
* The type of content.
|
|
917
|
-
*/
|
|
918
|
-
readonly type: "shape";
|
|
919
|
-
/**
|
|
920
|
-
* The scale and cropping of the shape.
|
|
921
|
-
*/
|
|
922
|
-
viewBox: AlignedBox;
|
|
923
|
-
/**
|
|
924
|
-
* The paths that define the structure of the shape.
|
|
925
|
-
*
|
|
926
|
-
* @remarks
|
|
927
|
-
* - Must have between 1 and 30 paths.
|
|
928
|
-
* - Total size of all paths must not exceed 2kb.
|
|
929
|
-
* - Maximum of 6 unique fill colors across all paths.
|
|
930
|
-
*/
|
|
931
|
-
readonly paths: ReadableList<Path>;
|
|
932
|
-
}
|
|
933
|
-
/**
|
|
934
|
-
* @beta
|
|
935
|
-
* Represents group content.
|
|
936
|
-
*/
|
|
937
|
-
export interface Group<C> {
|
|
938
|
-
/**
|
|
939
|
-
* The type of content.
|
|
940
|
-
*/
|
|
941
|
-
readonly type: "group";
|
|
942
|
-
/**
|
|
943
|
-
* The elements that exist within the group.
|
|
944
|
-
*/
|
|
945
|
-
readonly contents: ReadableList<C>;
|
|
946
|
-
}
|
|
947
|
-
/**
|
|
948
|
-
* @beta
|
|
949
|
-
* Represents rich media content.
|
|
950
|
-
*/
|
|
951
|
-
export interface Embed {
|
|
952
|
-
/**
|
|
953
|
-
* The type of content.
|
|
954
|
-
*/
|
|
955
|
-
readonly type: "embed";
|
|
956
|
-
/**
|
|
957
|
-
* The URL of the rich media.
|
|
958
|
-
*
|
|
959
|
-
* @remarks
|
|
960
|
-
* This URL must be supported by the Iframely API.
|
|
961
|
-
*/
|
|
962
|
-
readonly url: string;
|
|
963
|
-
}
|
|
964
|
-
/**
|
|
965
|
-
* @beta
|
|
966
|
-
* Represents text content.
|
|
967
|
-
*/
|
|
968
|
-
export interface Text {
|
|
969
|
-
/**
|
|
970
|
-
* The type of content.
|
|
971
|
-
*/
|
|
972
|
-
readonly type: "text";
|
|
973
|
-
/**
|
|
974
|
-
* The text content.
|
|
975
|
-
*/
|
|
976
|
-
readonly text: RichtextRange;
|
|
977
|
-
}
|
|
978
|
-
/**
|
|
979
|
-
* @beta
|
|
980
|
-
* An element that renders a rectangle.
|
|
981
|
-
*
|
|
982
|
-
* @remarks
|
|
983
|
-
* The rectangle can be filled with image content, video content, or a solid color.
|
|
984
|
-
*/
|
|
985
|
-
export interface RectElement extends Rect, Element {}
|
|
986
|
-
/**
|
|
987
|
-
* @beta
|
|
988
|
-
* An element that renders a vector shape.
|
|
989
|
-
*/
|
|
990
|
-
export interface ShapeElement extends Shape, Element {}
|
|
991
|
-
/**
|
|
992
|
-
* @beta
|
|
993
|
-
* An element that renders a group of other elements.
|
|
994
|
-
*/
|
|
995
|
-
export interface GroupElement extends Group<GroupContentElement>, Element {}
|
|
996
|
-
/**
|
|
997
|
-
* @beta
|
|
998
|
-
* An element that embeds rich media, such as a YouTube video.
|
|
999
|
-
*/
|
|
1000
|
-
export interface EmbedElement extends Embed, Element {}
|
|
1001
|
-
/**
|
|
1002
|
-
* @beta
|
|
1003
|
-
* An element that renders text content.
|
|
1004
|
-
*/
|
|
1005
|
-
export interface TextElement extends Text, Element {}
|
|
1006
|
-
/**
|
|
1007
|
-
* @beta
|
|
1008
|
-
* An element that is not supported by the Apps SDK.
|
|
1009
|
-
*/
|
|
1010
|
-
export interface UnsupportedElement extends Unsupported, Element {}
|
|
1011
|
-
/**
|
|
1012
|
-
* @beta
|
|
1013
|
-
* An element that can exist in a group element.
|
|
1014
|
-
*/
|
|
1015
|
-
export type GroupContentElement =
|
|
1016
|
-
| RectElement
|
|
1017
|
-
| ShapeElement
|
|
1018
|
-
| EmbedElement
|
|
1019
|
-
| TextElement
|
|
1020
|
-
| UnsupportedElement;
|
|
1021
|
-
/**
|
|
1022
|
-
* @beta
|
|
1023
|
-
* An element that can exist on a fixed page.
|
|
1024
|
-
*/
|
|
1025
|
-
export type FixedElement =
|
|
1026
|
-
| RectElement
|
|
1027
|
-
| ShapeElement
|
|
1028
|
-
| GroupElement
|
|
1029
|
-
| EmbedElement
|
|
1030
|
-
| TextElement
|
|
1031
|
-
| UnsupportedElement;
|
|
1032
|
-
/**
|
|
1033
|
-
* @beta
|
|
1034
|
-
* A page with fixed dimensions.
|
|
1035
|
-
*/
|
|
1036
|
-
export interface FixedPage {
|
|
1037
|
-
/**
|
|
1038
|
-
* The type of page.
|
|
1039
|
-
*/
|
|
1040
|
-
readonly type: "fixed";
|
|
1041
|
-
/**
|
|
1042
|
-
* If `true`, the page is locked and cannot be modified.
|
|
1043
|
-
*/
|
|
1044
|
-
readonly locked: boolean;
|
|
1045
|
-
/**
|
|
1046
|
-
* The dimensions of the page. `dimensions` is undefined for whiteboard pages.
|
|
1047
|
-
*/
|
|
1048
|
-
readonly dimensions: Dimensions | undefined;
|
|
1049
|
-
/**
|
|
1050
|
-
* The background of the page. `background` is undefined for whiteboard pages.
|
|
1051
|
-
*/
|
|
1052
|
-
readonly background: Fill | undefined;
|
|
1053
|
-
/**
|
|
1054
|
-
* The elements on the page.
|
|
1055
|
-
*
|
|
1056
|
-
* @remarks
|
|
1057
|
-
* Elements are rendered in the order they appear in the list.
|
|
1058
|
-
* Later elements appear on top of earlier ones.
|
|
1059
|
-
*/
|
|
1060
|
-
readonly elements: List<FixedElement>;
|
|
1061
|
-
}
|
|
1062
|
-
/**
|
|
1063
|
-
* @beta
|
|
1064
|
-
* A page in a design.
|
|
1065
|
-
*/
|
|
1066
|
-
export type Page = FixedPage | Unsupported;
|
|
1067
|
-
|
|
1068
|
-
{
|
|
1069
|
-
}
|
|
1070
|
-
}
|
|
1071
|
-
|
|
1072
352
|
/**
|
|
1073
353
|
* @public
|
|
1074
354
|
* An element that's natively supported by the Canva editor.
|
|
1075
355
|
*/
|
|
1076
356
|
export declare type DesignElement = NativeElement;
|
|
1077
357
|
|
|
1078
|
-
/**
|
|
1079
|
-
* @beta
|
|
1080
|
-
* A callback for reading and updating part of a design.
|
|
1081
|
-
* @param draft - The result of reading part of a design.
|
|
1082
|
-
* @param helpers - Helper methods for reading and updating the design.
|
|
1083
|
-
*/
|
|
1084
|
-
export declare type DesignOpenCallback = (
|
|
1085
|
-
draft: DesignEditing.DesignOpenResult,
|
|
1086
|
-
helpers: {
|
|
1087
|
-
/**
|
|
1088
|
-
* Provides methods for creating elements.
|
|
1089
|
-
*/
|
|
1090
|
-
elementBuilder: DesignEditing.ElementBuilder;
|
|
1091
|
-
}
|
|
1092
|
-
) => Promise<void> | void;
|
|
1093
|
-
|
|
1094
|
-
/**
|
|
1095
|
-
* @beta
|
|
1096
|
-
* Options for configuring which part of a design to read.
|
|
1097
|
-
*/
|
|
1098
|
-
export declare type DesignOpenOptions = DesignContextOptions;
|
|
1099
|
-
|
|
1100
358
|
/**
|
|
1101
359
|
* @public
|
|
1102
360
|
* Provides methods for managing the lifecycle of overlays, such as selected image overlays.
|
|
@@ -1206,14 +464,6 @@ export declare type DragStartEvent<E extends Element> = Pick<
|
|
|
1206
464
|
currentTarget: E;
|
|
1207
465
|
};
|
|
1208
466
|
|
|
1209
|
-
/**
|
|
1210
|
-
* @beta
|
|
1211
|
-
* Options for configuring how a design is read.
|
|
1212
|
-
*/
|
|
1213
|
-
export declare type EditContentOptions<T extends ContentType> = {
|
|
1214
|
-
contentType: T;
|
|
1215
|
-
} & ContextOptions;
|
|
1216
|
-
|
|
1217
467
|
/**
|
|
1218
468
|
* @public
|
|
1219
469
|
* Elements targeting a cursor are a subset of the base Element
|
|
@@ -1649,6 +899,7 @@ export declare type NativeElement =
|
|
|
1649
899
|
| NativeGroupElement;
|
|
1650
900
|
|
|
1651
901
|
/**
|
|
902
|
+
* @deprecated
|
|
1652
903
|
* @public
|
|
1653
904
|
* The types of elements an app can add to a user's design.
|
|
1654
905
|
*/
|
|
@@ -1956,23 +1207,6 @@ export declare type NativeVideoElementWithBox = NativeVideoElement & Box;
|
|
|
1956
1207
|
*/
|
|
1957
1208
|
declare type ObjectPrimitive = Boolean | String;
|
|
1958
1209
|
|
|
1959
|
-
/**
|
|
1960
|
-
* @beta
|
|
1961
|
-
* Reads a specified part of the user's design and returns all elements in that part.
|
|
1962
|
-
*
|
|
1963
|
-
* @param options - Options for configuring how a design is read.
|
|
1964
|
-
* @param callback - A callback for operating on the design.
|
|
1965
|
-
*/
|
|
1966
|
-
export declare const openDesign: (
|
|
1967
|
-
options: DesignOpenOptions,
|
|
1968
|
-
callback: (
|
|
1969
|
-
draft: DesignEditing.DesignOpenResult,
|
|
1970
|
-
helpers: {
|
|
1971
|
-
elementBuilder: DesignEditing.ElementBuilder;
|
|
1972
|
-
}
|
|
1973
|
-
) => Promise<void> | void
|
|
1974
|
-
) => Promise<void>;
|
|
1975
|
-
|
|
1976
1210
|
/**
|
|
1977
1211
|
* @public
|
|
1978
1212
|
* An alias for the DesignOverlay interface, providing access to design overlay related functionality
|
|
@@ -2142,59 +1376,6 @@ declare type Position = {
|
|
|
2142
1376
|
*/
|
|
2143
1377
|
declare type Primitive = undefined | null | number | boolean | string;
|
|
2144
1378
|
|
|
2145
|
-
/**
|
|
2146
|
-
* @beta
|
|
2147
|
-
* A snapshot of content returned by a query.
|
|
2148
|
-
*
|
|
2149
|
-
* @remarks
|
|
2150
|
-
* The snapshot is known as the *draft*.
|
|
2151
|
-
*/
|
|
2152
|
-
export declare interface QueryContentDraft<T> {
|
|
2153
|
-
/**
|
|
2154
|
-
* The individual content items returned by a query.
|
|
2155
|
-
*/
|
|
2156
|
-
readonly contents: readonly T[];
|
|
2157
|
-
/**
|
|
2158
|
-
* Commits any changes made to the items in the `contents` array.
|
|
2159
|
-
*
|
|
2160
|
-
* @remarks
|
|
2161
|
-
* An app must call this method for any changes to be reflected in the user's design.
|
|
2162
|
-
*/
|
|
2163
|
-
sync(): Promise<void>;
|
|
2164
|
-
}
|
|
2165
|
-
|
|
2166
|
-
/**
|
|
2167
|
-
* @beta
|
|
2168
|
-
* The result of querying content in a design.
|
|
2169
|
-
*/
|
|
2170
|
-
export declare type QueryResult<T extends ContentType> = {
|
|
2171
|
-
["richtext"]: QueryContentDraft<
|
|
2172
|
-
RichtextRange & {
|
|
2173
|
-
readonly deleted: boolean;
|
|
2174
|
-
}
|
|
2175
|
-
>;
|
|
2176
|
-
}[T];
|
|
2177
|
-
|
|
2178
|
-
/**
|
|
2179
|
-
* @beta
|
|
2180
|
-
* Reads content of the specified type from the user's design.
|
|
2181
|
-
* @param options - Options for configuring how a design is read.
|
|
2182
|
-
* @param callback - A callback for operating on the queried content.
|
|
2183
|
-
*/
|
|
2184
|
-
export declare const readContent: <T extends ContentType>(
|
|
2185
|
-
options: EditContentOptions<T>,
|
|
2186
|
-
callback: (draft: QueryResult<T>) => Promise<void> | void
|
|
2187
|
-
) => Promise<void>;
|
|
2188
|
-
|
|
2189
|
-
/**
|
|
2190
|
-
* @beta
|
|
2191
|
-
* A callback for reading and updating part of a design.
|
|
2192
|
-
* @param draft - The result of reading the content in a design.
|
|
2193
|
-
*/
|
|
2194
|
-
export declare type ReadContentCallback<T extends ContentType> = (
|
|
2195
|
-
draft: QueryResult<T>
|
|
2196
|
-
) => Promise<void> | void;
|
|
2197
|
-
|
|
2198
1379
|
/**
|
|
2199
1380
|
* @public
|
|
2200
1381
|
* Exports the user's design as one or more static files.
|
|
@@ -2680,11 +1861,6 @@ export declare type TextDragConfig = {
|
|
|
2680
1861
|
* @defaultValue "none"
|
|
2681
1862
|
*/
|
|
2682
1863
|
decoration?: "none" | "underline";
|
|
2683
|
-
/**
|
|
2684
|
-
* @beta
|
|
2685
|
-
* A unique identifier that points to a font asset in Canva's backend.
|
|
2686
|
-
*/
|
|
2687
|
-
fontRef?: FontRef;
|
|
2688
1864
|
};
|
|
2689
1865
|
|
|
2690
1866
|
/**
|
|
@@ -1,21 +1,7 @@
|
|
|
1
|
-
"use strict"
|
|
1
|
+
"use strict"
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
readContent: function() {
|
|
13
|
-
return readContent;
|
|
14
|
-
},
|
|
15
|
-
openDesign: function() {
|
|
16
|
-
return openDesign;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
5
|
_export_star(require("./public"), exports);
|
|
20
6
|
function _export_star(from, to) {
|
|
21
7
|
Object.keys(from).forEach(function(k) {
|
|
@@ -31,8 +17,5 @@ function _export_star(from, to) {
|
|
|
31
17
|
return from;
|
|
32
18
|
}
|
|
33
19
|
var _window___canva___sdkRegistration, _window___canva__;
|
|
34
|
-
const { canva_sdk } = window;
|
|
35
|
-
const readContent = canva_sdk.design.v2.designInteraction.readContent;
|
|
36
|
-
const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
|
|
37
20
|
(_window___canva__ =
|
|
38
|
-
window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.
|
|
21
|
+
window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.1.0', 'ga');
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
var _window___canva___sdkRegistration, _window___canva__;
|
|
2
|
-
const { canva_sdk } = window;
|
|
3
|
-
export const readContent = canva_sdk.design.v2.designInteraction.readContent;
|
|
4
|
-
export const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
|
|
5
2
|
export * from './public';
|
|
6
3
|
(_window___canva__ =
|
|
7
|
-
window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.
|
|
4
|
+
window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.1.0', 'ga');
|
package/package.json
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@canva/design",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "The Canva Apps SDK design library",
|
|
5
5
|
"author": "Canva Pty Ltd.",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md FILE",
|
|
7
7
|
"peerDependencies": {
|
|
8
8
|
"@canva/error": "^2.0.0"
|
|
9
9
|
},
|
|
10
|
-
"main": "./lib/cjs/sdk/design/
|
|
11
|
-
"module": "./lib/esm/sdk/design/
|
|
10
|
+
"main": "./lib/cjs/sdk/design/index.js",
|
|
11
|
+
"module": "./lib/esm/sdk/design/index.js",
|
|
12
12
|
"exports": {
|
|
13
13
|
".": {
|
|
14
14
|
"require": {
|
|
15
|
-
"types": "./
|
|
16
|
-
"default": "./lib/cjs/sdk/design/
|
|
15
|
+
"types": "./index.d.ts",
|
|
16
|
+
"default": "./lib/cjs/sdk/design/index.js"
|
|
17
17
|
},
|
|
18
18
|
"import": {
|
|
19
|
-
"types": "./
|
|
20
|
-
"default": "./lib/esm/sdk/design/
|
|
19
|
+
"types": "./index.d.ts",
|
|
20
|
+
"default": "./lib/esm/sdk/design/index.js"
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
|
-
"typings": "./
|
|
24
|
+
"typings": "./index.d.ts"
|
|
25
25
|
}
|