@canva/design 2.4.1-beta.1 → 2.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{beta.d.ts → index.d.ts} +0 -768
- package/lib/cjs/sdk/design/{beta.js → index.js} +2 -10
- package/lib/esm/sdk/design/{beta.js → index.js} +1 -3
- package/package.json +10 -10
- package/lib/cjs/sdk/design/test/beta.js +0 -18
- package/lib/esm/sdk/design/test/beta.js +0 -1
- /package/test/{beta.d.ts → index.d.ts} +0 -0
package/{beta.d.ts → index.d.ts}
RENAMED
|
@@ -383,730 +383,6 @@ export declare type Coordinates = {
|
|
|
383
383
|
*/
|
|
384
384
|
export declare const createRichtextRange: () => RichtextRange;
|
|
385
385
|
|
|
386
|
-
/**
|
|
387
|
-
* @beta
|
|
388
|
-
* Describes a part of a design.
|
|
389
|
-
*/
|
|
390
|
-
export declare type DesignContext = DesignContextOptions["type"];
|
|
391
|
-
|
|
392
|
-
/**
|
|
393
|
-
* @beta
|
|
394
|
-
* Options for configuring which part of a design to read.
|
|
395
|
-
*/
|
|
396
|
-
declare type DesignContextOptions = {
|
|
397
|
-
/**
|
|
398
|
-
* The type of context.
|
|
399
|
-
*/
|
|
400
|
-
type: "current_page";
|
|
401
|
-
};
|
|
402
|
-
|
|
403
|
-
/**
|
|
404
|
-
* @beta
|
|
405
|
-
* Provides methods for reading and updating the structure and content of a design.
|
|
406
|
-
*/
|
|
407
|
-
export declare namespace DesignEditing {
|
|
408
|
-
/**
|
|
409
|
-
* @beta
|
|
410
|
-
* A snapshot containing a fragment of a design's structure and content.
|
|
411
|
-
*/
|
|
412
|
-
export type DesignDraft<D> = Readonly<D> & {
|
|
413
|
-
/**
|
|
414
|
-
* Saves any changes made to the draft.
|
|
415
|
-
*
|
|
416
|
-
* @remarks
|
|
417
|
-
* - Any changes to the draft are only reflected in the design after this method is called.
|
|
418
|
-
* - Once this method is called, further changes to the draft are not possible.
|
|
419
|
-
*/
|
|
420
|
-
save(): Promise<void>;
|
|
421
|
-
};
|
|
422
|
-
/**
|
|
423
|
-
* @beta
|
|
424
|
-
* Options for creating an image fill in the element builder
|
|
425
|
-
*/
|
|
426
|
-
export type ImageFillOpts = Partial<ImageFill> &
|
|
427
|
-
Required<Pick<ImageFill, "type" | "imageRef">>;
|
|
428
|
-
/**
|
|
429
|
-
* @beta
|
|
430
|
-
* Options for creating a video fill in the element builder
|
|
431
|
-
*/
|
|
432
|
-
export type VideoFillOpts = Partial<VideoFill> &
|
|
433
|
-
Required<Pick<VideoFill, "type" | "videoRef">>;
|
|
434
|
-
/**
|
|
435
|
-
* @beta
|
|
436
|
-
* Options for creating a media fill in the element builder
|
|
437
|
-
*/
|
|
438
|
-
export type MediaFillOpts = ImageFillOpts | VideoFillOpts;
|
|
439
|
-
/**
|
|
440
|
-
* @beta
|
|
441
|
-
* Options for creating a fill in the element builder
|
|
442
|
-
*/
|
|
443
|
-
export type FillOpts =
|
|
444
|
-
| {
|
|
445
|
-
color: ColorFillOpts;
|
|
446
|
-
media?: MediaFillOpts;
|
|
447
|
-
}
|
|
448
|
-
| {
|
|
449
|
-
color?: ColorFillOpts;
|
|
450
|
-
media: MediaFillOpts;
|
|
451
|
-
};
|
|
452
|
-
/**
|
|
453
|
-
* @beta
|
|
454
|
-
*/
|
|
455
|
-
export type ColorFillOpts = Exclude<ColorFill, Unsupported>;
|
|
456
|
-
/**
|
|
457
|
-
* @beta
|
|
458
|
-
* Options for creating a stroke in the element builder
|
|
459
|
-
*/
|
|
460
|
-
export type StrokeOpts = Pick<Stroke, "weight"> & {
|
|
461
|
-
color: ColorFillOpts;
|
|
462
|
-
};
|
|
463
|
-
/**
|
|
464
|
-
* @beta
|
|
465
|
-
* Options for creating a shape path in the element builder
|
|
466
|
-
*/
|
|
467
|
-
export type PathOpts = Pick<Path, "d"> & {
|
|
468
|
-
fill?: FillOpts;
|
|
469
|
-
stroke?: StrokeOpts;
|
|
470
|
-
};
|
|
471
|
-
/**
|
|
472
|
-
* @beta
|
|
473
|
-
* Options for creating a rect element.
|
|
474
|
-
*/
|
|
475
|
-
export type CreateRectElementOpts = Required<
|
|
476
|
-
Pick<RectElement, "top" | "left" | "width" | "height">
|
|
477
|
-
> & {
|
|
478
|
-
fill?: FillOpts;
|
|
479
|
-
} & {
|
|
480
|
-
stroke?: StrokeOpts;
|
|
481
|
-
} & Partial<Omit<RectElement, "fill" | "stroke" | "type">>;
|
|
482
|
-
/**
|
|
483
|
-
* @beta
|
|
484
|
-
* Options for creating a shape element.
|
|
485
|
-
*/
|
|
486
|
-
export type CreateShapeElementOpts = Required<
|
|
487
|
-
Pick<ShapeElement, "top" | "left" | "width" | "height" | "viewBox">
|
|
488
|
-
> & {
|
|
489
|
-
paths: PathOpts[];
|
|
490
|
-
} & Partial<Omit<ShapeElement, "type" | "paths">>;
|
|
491
|
-
/**
|
|
492
|
-
* @beta
|
|
493
|
-
* Options for creating an embed element.
|
|
494
|
-
*/
|
|
495
|
-
export type CreateEmbedElementOpts = Required<
|
|
496
|
-
Pick<EmbedElement, "top" | "left" | "width" | "height" | "url">
|
|
497
|
-
> &
|
|
498
|
-
Partial<Omit<EmbedElement, "type">>;
|
|
499
|
-
/**
|
|
500
|
-
* @beta
|
|
501
|
-
* Options for creating a text element.
|
|
502
|
-
*/
|
|
503
|
-
export type CreateTextElementOpts = Required<
|
|
504
|
-
Pick<TextElement, "top" | "left" | "width" | "text">
|
|
505
|
-
> &
|
|
506
|
-
Partial<Omit<TextElement, "type" | "height">>;
|
|
507
|
-
/**
|
|
508
|
-
* @beta
|
|
509
|
-
* Provides methods for creating elements.
|
|
510
|
-
*
|
|
511
|
-
* @remarks
|
|
512
|
-
* These methods don't add the elements to the design. They only return elements that can
|
|
513
|
-
* be added to a design, such as with the `insertAfter` method.
|
|
514
|
-
*/
|
|
515
|
-
export interface ElementBuilder {
|
|
516
|
-
/**
|
|
517
|
-
* Creates a rect element.
|
|
518
|
-
* @param opts - Options for creating the rect element.
|
|
519
|
-
*/
|
|
520
|
-
createRectElement(opts: CreateRectElementOpts): RectElement;
|
|
521
|
-
/**
|
|
522
|
-
* Creates a shape element.
|
|
523
|
-
* @param opts - Options for creating the shape element.
|
|
524
|
-
*/
|
|
525
|
-
createShapeElement(opts: CreateShapeElementOpts): ShapeElement;
|
|
526
|
-
/**
|
|
527
|
-
* Creates an embed element.
|
|
528
|
-
* @param opts - Options for creating the embed element.
|
|
529
|
-
*/
|
|
530
|
-
createEmbedElement(opts: CreateEmbedElementOpts): EmbedElement;
|
|
531
|
-
/**
|
|
532
|
-
* Creates a text element.
|
|
533
|
-
* @param opts - Options for creating the text element.
|
|
534
|
-
*/
|
|
535
|
-
createTextElement(opts: CreateTextElementOpts): TextElement;
|
|
536
|
-
/**
|
|
537
|
-
* Creates a richtext range.
|
|
538
|
-
*/
|
|
539
|
-
createRichtextRange(): RichtextRange;
|
|
540
|
-
/**
|
|
541
|
-
* Creates a clone of an element.
|
|
542
|
-
* @returns a new element with the same properties as the argument.
|
|
543
|
-
*/
|
|
544
|
-
cloneElement(element: RectElement): RectElement;
|
|
545
|
-
cloneElement(element: ShapeElement): ShapeElement;
|
|
546
|
-
cloneElement(element: EmbedElement): EmbedElement;
|
|
547
|
-
cloneElement(element: TextElement): TextElement;
|
|
548
|
-
cloneElement(
|
|
549
|
-
element: RectElement | ShapeElement | EmbedElement | TextElement,
|
|
550
|
-
): RectElement | ShapeElement | EmbedElement | TextElement;
|
|
551
|
-
}
|
|
552
|
-
/**
|
|
553
|
-
* @beta
|
|
554
|
-
* The result of reading part of a design when the context is the current page.
|
|
555
|
-
*/
|
|
556
|
-
export type CurrentPageResult = DesignDraft<{
|
|
557
|
-
/**
|
|
558
|
-
* The current page of the design.
|
|
559
|
-
*/
|
|
560
|
-
page: FixedPage;
|
|
561
|
-
}>;
|
|
562
|
-
/**
|
|
563
|
-
* @beta
|
|
564
|
-
* The result of reading part of a design.
|
|
565
|
-
*/
|
|
566
|
-
export type DesignOpenResult = CurrentPageResult;
|
|
567
|
-
/**
|
|
568
|
-
* A function called for each item in the list.
|
|
569
|
-
*
|
|
570
|
-
* @param item - The current item in the list.
|
|
571
|
-
* @param index - The index of the current item.
|
|
572
|
-
*/
|
|
573
|
-
export type ForEachCallback<T> = (item: T, index: number) => void;
|
|
574
|
-
/**
|
|
575
|
-
* A function that determines if an item should be included in the result.
|
|
576
|
-
*
|
|
577
|
-
* @param item - The item to test.
|
|
578
|
-
* @returns `true` if the item should be included, otherwise `false`.
|
|
579
|
-
*/
|
|
580
|
-
export type FilterPredicate<T> = (item: T) => boolean;
|
|
581
|
-
/**
|
|
582
|
-
* A type predicate function that determines if an item is of a specific type.
|
|
583
|
-
*
|
|
584
|
-
* @param item - The item to test.
|
|
585
|
-
* @returns `true` if the item is of type `C`, otherwise `false`.
|
|
586
|
-
*/
|
|
587
|
-
export type TypeFilterPredicate<T, C extends T> = (item: T) => item is C;
|
|
588
|
-
/**
|
|
589
|
-
* A list that cannot be changed.
|
|
590
|
-
*/
|
|
591
|
-
export interface ReadableList<T> {
|
|
592
|
-
/**
|
|
593
|
-
* Gets the number of items in the list.
|
|
594
|
-
*
|
|
595
|
-
* @returns The number of items.
|
|
596
|
-
*/
|
|
597
|
-
count(): number;
|
|
598
|
-
/**
|
|
599
|
-
* Converts the list to an array.
|
|
600
|
-
*
|
|
601
|
-
* @returns An array containing all items. The items are the same as in the list.
|
|
602
|
-
*/
|
|
603
|
-
toArray(): readonly T[];
|
|
604
|
-
/**
|
|
605
|
-
* Executes a function for each item in the list.
|
|
606
|
-
*
|
|
607
|
-
* @param callback - The function to run for each item.
|
|
608
|
-
*/
|
|
609
|
-
forEach(callback: ForEachCallback<T>): void;
|
|
610
|
-
/**
|
|
611
|
-
* Creates a new array with items that match a specific type.
|
|
612
|
-
*
|
|
613
|
-
* @param filter - A function that checks if an item is of type `C`.
|
|
614
|
-
* @returns An array of items that are of type `C`.
|
|
615
|
-
*/
|
|
616
|
-
filter<C extends T>(filter: TypeFilterPredicate<T, C>): readonly C[];
|
|
617
|
-
/**
|
|
618
|
-
* Creates a new array with items that pass a test.
|
|
619
|
-
*
|
|
620
|
-
* @param filter - A function that tests each item. Returns `true` to keep the item.
|
|
621
|
-
* @returns An array of items that passed the test.
|
|
622
|
-
*/
|
|
623
|
-
filter(filter: FilterPredicate<T>): readonly T[];
|
|
624
|
-
}
|
|
625
|
-
/**
|
|
626
|
-
* @beta
|
|
627
|
-
* A list of items that can be changed.
|
|
628
|
-
*/
|
|
629
|
-
export interface MutableList<T> {
|
|
630
|
-
/**
|
|
631
|
-
* Adds a copy of an item to the list and places it right before another item.
|
|
632
|
-
*
|
|
633
|
-
* @param ref - The existing item to place the new item before.
|
|
634
|
-
* If `ref` is `undefined`, the new item is added at the end of the list.
|
|
635
|
-
* If `ref` does not exist in the list, the operation fails.
|
|
636
|
-
*
|
|
637
|
-
* @param item - The item to add. A copy of this item will be inserted.
|
|
638
|
-
*
|
|
639
|
-
* @returns
|
|
640
|
-
* The added item, or `undefined` if the operation failed.
|
|
641
|
-
*/
|
|
642
|
-
insertBefore(ref: T | undefined, item: T): T | undefined;
|
|
643
|
-
/**
|
|
644
|
-
* Adds a copy of an item to the list and places it right after another item.
|
|
645
|
-
*
|
|
646
|
-
* @param ref - The existing item to place the new item after.
|
|
647
|
-
* If `ref` is `undefined`, the new item is added at the end of the list.
|
|
648
|
-
* If `ref` does not exist in the list, the operation fails.
|
|
649
|
-
*
|
|
650
|
-
* @param item - The item to add. A copy of this item will be inserted.
|
|
651
|
-
*
|
|
652
|
-
* @returns
|
|
653
|
-
* The added item, or `undefined` if the operation failed.
|
|
654
|
-
*/
|
|
655
|
-
insertAfter(ref: T | undefined, item: T): T | undefined;
|
|
656
|
-
/**
|
|
657
|
-
* Moves an existing item to a new position right before another item.
|
|
658
|
-
*
|
|
659
|
-
* @param ref - The existing item to move the item before.
|
|
660
|
-
* If `ref` is `undefined`, the item is moved to the end of the list.
|
|
661
|
-
* If `ref` does not exist in the list, the operation fails.
|
|
662
|
-
*
|
|
663
|
-
* @param item - The item to move.
|
|
664
|
-
* The operation fails if the item is not already in the list.
|
|
665
|
-
*/
|
|
666
|
-
moveBefore(ref: T | undefined, item: T): void;
|
|
667
|
-
/**
|
|
668
|
-
* Moves an existing item to a new position right after another item.
|
|
669
|
-
*
|
|
670
|
-
* @param ref - The existing item to move the item after.
|
|
671
|
-
* If `ref` is `undefined`, the item is moved to the end of the list.
|
|
672
|
-
* If `ref` does not exist in the list, the operation fails.
|
|
673
|
-
*
|
|
674
|
-
* @param item - The item to move.
|
|
675
|
-
* The operation fails if the item is not already in the list.
|
|
676
|
-
*/
|
|
677
|
-
moveAfter(ref: T | undefined, item: T): void;
|
|
678
|
-
/**
|
|
679
|
-
* Removes an item from the list.
|
|
680
|
-
*
|
|
681
|
-
* @param item - The item to remove from the list.
|
|
682
|
-
*/
|
|
683
|
-
delete(item: T): void;
|
|
684
|
-
}
|
|
685
|
-
/**
|
|
686
|
-
* @beta
|
|
687
|
-
* A list of items that can be read and updated.
|
|
688
|
-
*/
|
|
689
|
-
export interface List<T> extends ReadableList<T>, MutableList<T> {}
|
|
690
|
-
/**
|
|
691
|
-
* @beta
|
|
692
|
-
* Represents an element that's not supported by the Apps SDK.
|
|
693
|
-
*/
|
|
694
|
-
export interface Unsupported {
|
|
695
|
-
/**
|
|
696
|
-
* The type of element.
|
|
697
|
-
*/
|
|
698
|
-
readonly type: "unsupported";
|
|
699
|
-
}
|
|
700
|
-
/**
|
|
701
|
-
* @beta
|
|
702
|
-
* A single valid character in a hex code.
|
|
703
|
-
*/
|
|
704
|
-
export type Hex = `123456790abcdef`[number];
|
|
705
|
-
/**
|
|
706
|
-
* @beta
|
|
707
|
-
* A six-character hexadecimal color code prefixed with a `#`.
|
|
708
|
-
*/
|
|
709
|
-
export type HexCode = `#${Hex}${Hex}${Hex}${Hex}${Hex}${Hex}`;
|
|
710
|
-
/**
|
|
711
|
-
* @beta
|
|
712
|
-
* A set of dimensions.
|
|
713
|
-
*/
|
|
714
|
-
export interface Dimensions {
|
|
715
|
-
/**
|
|
716
|
-
* A width, in pixels.
|
|
717
|
-
*/
|
|
718
|
-
readonly width: number;
|
|
719
|
-
/**
|
|
720
|
-
* A height, in pixels.
|
|
721
|
-
*/
|
|
722
|
-
readonly height: number;
|
|
723
|
-
}
|
|
724
|
-
/**
|
|
725
|
-
* @beta
|
|
726
|
-
* An image that fills the interior of a path.
|
|
727
|
-
*/
|
|
728
|
-
export interface ImageFill {
|
|
729
|
-
/**
|
|
730
|
-
* The type of media.
|
|
731
|
-
*/
|
|
732
|
-
readonly type: "image";
|
|
733
|
-
/**
|
|
734
|
-
* A unique identifier that points to an image asset in Canva's backend.
|
|
735
|
-
*/
|
|
736
|
-
imageRef: ImageRef;
|
|
737
|
-
/**
|
|
738
|
-
* If `true`, the image is flipped horizontally.
|
|
739
|
-
*/
|
|
740
|
-
flipX: boolean;
|
|
741
|
-
/**
|
|
742
|
-
* If `true`, the image is flipped vertically.
|
|
743
|
-
*/
|
|
744
|
-
flipY: boolean;
|
|
745
|
-
}
|
|
746
|
-
/**
|
|
747
|
-
* @beta
|
|
748
|
-
* A video that fills the interior of a path.
|
|
749
|
-
*/
|
|
750
|
-
export interface VideoFill {
|
|
751
|
-
/**
|
|
752
|
-
* The type of media.
|
|
753
|
-
*/
|
|
754
|
-
readonly type: "video";
|
|
755
|
-
/**
|
|
756
|
-
* A unique identifier that points to a video asset in Canva's backend.
|
|
757
|
-
*/
|
|
758
|
-
videoRef: VideoRef;
|
|
759
|
-
/**
|
|
760
|
-
* If `true`, the video is flipped horizontally.
|
|
761
|
-
*/
|
|
762
|
-
flipX: boolean;
|
|
763
|
-
/**
|
|
764
|
-
* If `true`, the video is flipped vertically.
|
|
765
|
-
*/
|
|
766
|
-
flipY: boolean;
|
|
767
|
-
}
|
|
768
|
-
/**
|
|
769
|
-
* @beta
|
|
770
|
-
* A media item that fills the interior of a path.
|
|
771
|
-
*/
|
|
772
|
-
export type MediaFill = ImageFill | VideoFill;
|
|
773
|
-
/**
|
|
774
|
-
* @beta
|
|
775
|
-
* A solid color that fills the interior of a path.
|
|
776
|
-
*/
|
|
777
|
-
export interface SolidFill {
|
|
778
|
-
/**
|
|
779
|
-
* The type of color.
|
|
780
|
-
*/
|
|
781
|
-
readonly type: "solid";
|
|
782
|
-
/**
|
|
783
|
-
* The color of the fill, as a hex code.
|
|
784
|
-
*
|
|
785
|
-
* @remarks
|
|
786
|
-
* - Must be six characters long.
|
|
787
|
-
* - Must start with a `#`.
|
|
788
|
-
* - Must use lowercase letters.
|
|
789
|
-
*/
|
|
790
|
-
color: HexCode;
|
|
791
|
-
}
|
|
792
|
-
/**
|
|
793
|
-
* @beta
|
|
794
|
-
* A color that fills the interior of a path.
|
|
795
|
-
*/
|
|
796
|
-
export type ColorFill = SolidFill | Unsupported;
|
|
797
|
-
/**
|
|
798
|
-
* @beta
|
|
799
|
-
* Describes how a path is filled with color or media.
|
|
800
|
-
*
|
|
801
|
-
* @remarks
|
|
802
|
-
* If both `media` and `color` are defined, `media` takes precedence.
|
|
803
|
-
*/
|
|
804
|
-
export interface Fill {
|
|
805
|
-
/**
|
|
806
|
-
* The media fill for the path, if any.
|
|
807
|
-
*/
|
|
808
|
-
media: MediaFill | undefined;
|
|
809
|
-
/**
|
|
810
|
-
* The color fill for the path, if any.
|
|
811
|
-
*/
|
|
812
|
-
color: ColorFill | undefined;
|
|
813
|
-
}
|
|
814
|
-
/**
|
|
815
|
-
* @beta
|
|
816
|
-
* The scale and cropping of a shape.
|
|
817
|
-
*
|
|
818
|
-
* @remarks
|
|
819
|
-
* This is similar to the `viewBox` attribute of an `SVGElement`.
|
|
820
|
-
*/
|
|
821
|
-
export type AlignedBox = {
|
|
822
|
-
/**
|
|
823
|
-
* The distance of the shape from the top edge of the element, in pixels.
|
|
824
|
-
*/
|
|
825
|
-
readonly top: number;
|
|
826
|
-
/**
|
|
827
|
-
* The distance of the shape from the left edge of the element, in pixels.
|
|
828
|
-
*/
|
|
829
|
-
readonly left: number;
|
|
830
|
-
/**
|
|
831
|
-
* The width of the view box, in pixels.
|
|
832
|
-
*/
|
|
833
|
-
readonly width: number;
|
|
834
|
-
/**
|
|
835
|
-
* The height of the view box, in pixels.
|
|
836
|
-
*/
|
|
837
|
-
readonly height: number;
|
|
838
|
-
};
|
|
839
|
-
/**
|
|
840
|
-
* @beta
|
|
841
|
-
* A path that defines the structure of a shape element.
|
|
842
|
-
*/
|
|
843
|
-
export interface Path {
|
|
844
|
-
/**
|
|
845
|
-
* The shape of the path.
|
|
846
|
-
*
|
|
847
|
-
* @remarks
|
|
848
|
-
* This is similar to the `d` attribute of an SVG's `path` element, with some limitations:
|
|
849
|
-
*
|
|
850
|
-
* - Must start with an `M` command.
|
|
851
|
-
* - Only one `M` command is allowed.
|
|
852
|
-
* - `Q` and `T` commands are not permitted.
|
|
853
|
-
* - The path must be closed using a `Z` command or matching start and end coordinates.
|
|
854
|
-
*/
|
|
855
|
-
readonly d: string;
|
|
856
|
-
/**
|
|
857
|
-
* The appearance of the path's interior.
|
|
858
|
-
*/
|
|
859
|
-
readonly fill: Fill;
|
|
860
|
-
/**
|
|
861
|
-
* The stroke (outline) of the path, if any.
|
|
862
|
-
*/
|
|
863
|
-
readonly stroke: Stroke | undefined;
|
|
864
|
-
}
|
|
865
|
-
/**
|
|
866
|
-
* @beta
|
|
867
|
-
* Represents an outline, such as the border of an element.
|
|
868
|
-
*/
|
|
869
|
-
export interface Stroke {
|
|
870
|
-
/**
|
|
871
|
-
* The weight (thickness) of the stroke.
|
|
872
|
-
*
|
|
873
|
-
* @remarks
|
|
874
|
-
* - Minimum: 0
|
|
875
|
-
* - Maximum: 100
|
|
876
|
-
*/
|
|
877
|
-
weight: number;
|
|
878
|
-
/**
|
|
879
|
-
* The color of the stroke.
|
|
880
|
-
*/
|
|
881
|
-
color: ColorFill;
|
|
882
|
-
}
|
|
883
|
-
/**
|
|
884
|
-
* @beta
|
|
885
|
-
* The basic properties of an element.
|
|
886
|
-
*
|
|
887
|
-
* @remarks
|
|
888
|
-
* These properties are shared by all elements in a design.
|
|
889
|
-
*/
|
|
890
|
-
export interface Element extends Dimensions {
|
|
891
|
-
/**
|
|
892
|
-
* If `true`, the element is locked and cannot be modified.
|
|
893
|
-
*/
|
|
894
|
-
readonly locked: boolean;
|
|
895
|
-
/**
|
|
896
|
-
* The distance from the top edge of the container, in pixels.
|
|
897
|
-
*
|
|
898
|
-
* @remarks
|
|
899
|
-
* - The pixels are relative to their container.
|
|
900
|
-
* - Minimum: -32768
|
|
901
|
-
* - Maximum: 32767
|
|
902
|
-
*/
|
|
903
|
-
top: number;
|
|
904
|
-
/**
|
|
905
|
-
* The distance from the left edge of the container, in pixels.
|
|
906
|
-
*
|
|
907
|
-
* @remarks
|
|
908
|
-
* - The pixels are relative to their container.
|
|
909
|
-
* - Minimum: -32768
|
|
910
|
-
* - Maximum: 32767
|
|
911
|
-
*/
|
|
912
|
-
left: number;
|
|
913
|
-
/**
|
|
914
|
-
* A rotation, in degrees.
|
|
915
|
-
*
|
|
916
|
-
* @remarks
|
|
917
|
-
* - Minimum: -180
|
|
918
|
-
* - Maximum: 180
|
|
919
|
-
*/
|
|
920
|
-
rotation: number;
|
|
921
|
-
/**
|
|
922
|
-
* Transparency as a percentage.
|
|
923
|
-
*
|
|
924
|
-
* @remarks
|
|
925
|
-
* - Minimum: 0
|
|
926
|
-
* - Maximum: 1
|
|
927
|
-
*/
|
|
928
|
-
transparency: number;
|
|
929
|
-
}
|
|
930
|
-
/**
|
|
931
|
-
* @beta
|
|
932
|
-
* Represents a rectangular element.
|
|
933
|
-
*/
|
|
934
|
-
export interface Rect {
|
|
935
|
-
/**
|
|
936
|
-
* The type of content.
|
|
937
|
-
*/
|
|
938
|
-
readonly type: "rect";
|
|
939
|
-
/**
|
|
940
|
-
* The appearance of the rectangle's interior.
|
|
941
|
-
*/
|
|
942
|
-
readonly fill: Fill;
|
|
943
|
-
/**
|
|
944
|
-
* The outline of the rectangle.
|
|
945
|
-
*/
|
|
946
|
-
readonly stroke: Stroke;
|
|
947
|
-
}
|
|
948
|
-
/**
|
|
949
|
-
* @beta
|
|
950
|
-
* Represents a vector shape element.
|
|
951
|
-
*/
|
|
952
|
-
export interface Shape {
|
|
953
|
-
/**
|
|
954
|
-
* The type of content.
|
|
955
|
-
*/
|
|
956
|
-
readonly type: "shape";
|
|
957
|
-
/**
|
|
958
|
-
* The scale and cropping of the shape.
|
|
959
|
-
*/
|
|
960
|
-
viewBox: AlignedBox;
|
|
961
|
-
/**
|
|
962
|
-
* The paths that define the structure of the shape.
|
|
963
|
-
*
|
|
964
|
-
* @remarks
|
|
965
|
-
* - Must have between 1 and 30 paths.
|
|
966
|
-
* - Total size of all paths must not exceed 2kb.
|
|
967
|
-
* - Maximum of 6 unique fill colors across all paths.
|
|
968
|
-
*/
|
|
969
|
-
readonly paths: ReadableList<Path>;
|
|
970
|
-
}
|
|
971
|
-
/**
|
|
972
|
-
* @beta
|
|
973
|
-
* Represents group content.
|
|
974
|
-
*/
|
|
975
|
-
export interface Group<C> {
|
|
976
|
-
/**
|
|
977
|
-
* The type of content.
|
|
978
|
-
*/
|
|
979
|
-
readonly type: "group";
|
|
980
|
-
/**
|
|
981
|
-
* The elements that exist within the group.
|
|
982
|
-
*/
|
|
983
|
-
readonly contents: ReadableList<C>;
|
|
984
|
-
}
|
|
985
|
-
/**
|
|
986
|
-
* @beta
|
|
987
|
-
* Represents rich media content.
|
|
988
|
-
*/
|
|
989
|
-
export interface Embed {
|
|
990
|
-
/**
|
|
991
|
-
* The type of content.
|
|
992
|
-
*/
|
|
993
|
-
readonly type: "embed";
|
|
994
|
-
/**
|
|
995
|
-
* The URL of the rich media.
|
|
996
|
-
*
|
|
997
|
-
* @remarks
|
|
998
|
-
* This URL must be supported by the Iframely API.
|
|
999
|
-
*/
|
|
1000
|
-
readonly url: string;
|
|
1001
|
-
}
|
|
1002
|
-
/**
|
|
1003
|
-
* @beta
|
|
1004
|
-
* Represents text content.
|
|
1005
|
-
*/
|
|
1006
|
-
export interface Text {
|
|
1007
|
-
/**
|
|
1008
|
-
* The type of content.
|
|
1009
|
-
*/
|
|
1010
|
-
readonly type: "text";
|
|
1011
|
-
/**
|
|
1012
|
-
* The text content.
|
|
1013
|
-
*/
|
|
1014
|
-
readonly text: RichtextRange;
|
|
1015
|
-
}
|
|
1016
|
-
/**
|
|
1017
|
-
* @beta
|
|
1018
|
-
* An element that renders a rectangle.
|
|
1019
|
-
*
|
|
1020
|
-
* @remarks
|
|
1021
|
-
* The rectangle can be filled with image content, video content, or a solid color.
|
|
1022
|
-
*/
|
|
1023
|
-
export interface RectElement extends Rect, Element {}
|
|
1024
|
-
/**
|
|
1025
|
-
* @beta
|
|
1026
|
-
* An element that renders a vector shape.
|
|
1027
|
-
*/
|
|
1028
|
-
export interface ShapeElement extends Shape, Element {}
|
|
1029
|
-
/**
|
|
1030
|
-
* @beta
|
|
1031
|
-
* An element that renders a group of other elements.
|
|
1032
|
-
*/
|
|
1033
|
-
export interface GroupElement extends Group<GroupContentElement>, Element {}
|
|
1034
|
-
/**
|
|
1035
|
-
* @beta
|
|
1036
|
-
* An element that embeds rich media, such as a YouTube video.
|
|
1037
|
-
*/
|
|
1038
|
-
export interface EmbedElement extends Embed, Element {}
|
|
1039
|
-
/**
|
|
1040
|
-
* @beta
|
|
1041
|
-
* An element that renders text content.
|
|
1042
|
-
*/
|
|
1043
|
-
export interface TextElement extends Text, Element {}
|
|
1044
|
-
/**
|
|
1045
|
-
* @beta
|
|
1046
|
-
* An element that is not supported by the Apps SDK.
|
|
1047
|
-
*/
|
|
1048
|
-
export interface UnsupportedElement extends Unsupported, Element {}
|
|
1049
|
-
/**
|
|
1050
|
-
* @beta
|
|
1051
|
-
* An element that can exist in a group element.
|
|
1052
|
-
*/
|
|
1053
|
-
export type GroupContentElement =
|
|
1054
|
-
| RectElement
|
|
1055
|
-
| ShapeElement
|
|
1056
|
-
| EmbedElement
|
|
1057
|
-
| TextElement
|
|
1058
|
-
| UnsupportedElement;
|
|
1059
|
-
/**
|
|
1060
|
-
* @beta
|
|
1061
|
-
* An element that can exist on a fixed page.
|
|
1062
|
-
*/
|
|
1063
|
-
export type FixedElement =
|
|
1064
|
-
| RectElement
|
|
1065
|
-
| ShapeElement
|
|
1066
|
-
| GroupElement
|
|
1067
|
-
| EmbedElement
|
|
1068
|
-
| TextElement
|
|
1069
|
-
| UnsupportedElement;
|
|
1070
|
-
/**
|
|
1071
|
-
* @beta
|
|
1072
|
-
* A page with fixed dimensions.
|
|
1073
|
-
*/
|
|
1074
|
-
export interface FixedPage {
|
|
1075
|
-
/**
|
|
1076
|
-
* The type of page.
|
|
1077
|
-
*/
|
|
1078
|
-
readonly type: "fixed";
|
|
1079
|
-
/**
|
|
1080
|
-
* If `true`, the page is locked and cannot be modified.
|
|
1081
|
-
*/
|
|
1082
|
-
readonly locked: boolean;
|
|
1083
|
-
/**
|
|
1084
|
-
* The dimensions of the page. `dimensions` is undefined for whiteboard pages.
|
|
1085
|
-
*/
|
|
1086
|
-
readonly dimensions: Dimensions | undefined;
|
|
1087
|
-
/**
|
|
1088
|
-
* The background of the page. `background` is undefined for whiteboard pages.
|
|
1089
|
-
*/
|
|
1090
|
-
readonly background: Fill | undefined;
|
|
1091
|
-
/**
|
|
1092
|
-
* The elements on the page.
|
|
1093
|
-
*
|
|
1094
|
-
* @remarks
|
|
1095
|
-
* Elements are rendered in the order they appear in the list.
|
|
1096
|
-
* Later elements appear on top of earlier ones.
|
|
1097
|
-
*/
|
|
1098
|
-
readonly elements: List<FixedElement>;
|
|
1099
|
-
}
|
|
1100
|
-
/**
|
|
1101
|
-
* @beta
|
|
1102
|
-
* A page in a design.
|
|
1103
|
-
*/
|
|
1104
|
-
export type Page = FixedPage | Unsupported;
|
|
1105
|
-
|
|
1106
|
-
{
|
|
1107
|
-
}
|
|
1108
|
-
}
|
|
1109
|
-
|
|
1110
386
|
/**
|
|
1111
387
|
* @public
|
|
1112
388
|
* An element that's natively supported by the Canva editor.
|
|
@@ -1121,28 +397,6 @@ export declare type DesignElement =
|
|
|
1121
397
|
| RichtextElement
|
|
1122
398
|
| TableElement;
|
|
1123
399
|
|
|
1124
|
-
/**
|
|
1125
|
-
* @beta
|
|
1126
|
-
* A callback for reading and updating part of a design.
|
|
1127
|
-
* @param draft - The result of reading part of a design.
|
|
1128
|
-
* @param helpers - Helper methods for reading and updating the design.
|
|
1129
|
-
*/
|
|
1130
|
-
export declare type DesignOpenCallback = (
|
|
1131
|
-
draft: DesignEditing.DesignOpenResult,
|
|
1132
|
-
helpers: {
|
|
1133
|
-
/**
|
|
1134
|
-
* Provides methods for creating elements.
|
|
1135
|
-
*/
|
|
1136
|
-
elementBuilder: DesignEditing.ElementBuilder;
|
|
1137
|
-
},
|
|
1138
|
-
) => Promise<void> | void;
|
|
1139
|
-
|
|
1140
|
-
/**
|
|
1141
|
-
* @beta
|
|
1142
|
-
* Options for configuring which part of a design to read.
|
|
1143
|
-
*/
|
|
1144
|
-
export declare type DesignOpenOptions = DesignContextOptions;
|
|
1145
|
-
|
|
1146
400
|
/**
|
|
1147
401
|
* @public
|
|
1148
402
|
* Provides methods for managing the lifecycle of overlays, such as selected image overlays.
|
|
@@ -1883,23 +1137,6 @@ export declare type NativeVideoElementWithBox = VideoElementAtPoint;
|
|
|
1883
1137
|
*/
|
|
1884
1138
|
declare type ObjectPrimitive = Boolean | String;
|
|
1885
1139
|
|
|
1886
|
-
/**
|
|
1887
|
-
* @beta
|
|
1888
|
-
* Reads a specified part of the user's design and returns all elements in that part.
|
|
1889
|
-
*
|
|
1890
|
-
* @param options - Options for configuring how the design is read.
|
|
1891
|
-
* @param callback - A callback for operating on the design.
|
|
1892
|
-
*/
|
|
1893
|
-
export declare const openDesign: (
|
|
1894
|
-
options: DesignOpenOptions,
|
|
1895
|
-
callback: (
|
|
1896
|
-
draft: DesignEditing.DesignOpenResult,
|
|
1897
|
-
helpers: {
|
|
1898
|
-
elementBuilder: DesignEditing.ElementBuilder;
|
|
1899
|
-
},
|
|
1900
|
-
) => Promise<void> | void,
|
|
1901
|
-
) => Promise<void>;
|
|
1902
|
-
|
|
1903
1140
|
/**
|
|
1904
1141
|
* @public
|
|
1905
1142
|
* An alias for the DesignOverlay interface, providing access to design overlay related functionality
|
|
@@ -2560,11 +1797,6 @@ export declare type TextDragConfig = {
|
|
|
2560
1797
|
* @defaultValue "none"
|
|
2561
1798
|
*/
|
|
2562
1799
|
decoration?: "none" | "underline";
|
|
2563
|
-
/**
|
|
2564
|
-
* @beta
|
|
2565
|
-
* A unique identifier that points to a font asset in Canva's backend.
|
|
2566
|
-
*/
|
|
2567
|
-
fontRef?: FontRef;
|
|
2568
1800
|
};
|
|
2569
1801
|
|
|
2570
1802
|
/**
|
|
@@ -1,13 +1,7 @@
|
|
|
1
|
-
"use strict"
|
|
1
|
+
"use strict"
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
Object.defineProperty(exports, "openDesign", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return openDesign;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
5
|
_export_star(require("./public"), exports);
|
|
12
6
|
function _export_star(from, to) {
|
|
13
7
|
Object.keys(from).forEach(function(k) {
|
|
@@ -23,6 +17,4 @@ function _export_star(from, to) {
|
|
|
23
17
|
return from;
|
|
24
18
|
}
|
|
25
19
|
var _window___canva___sdkRegistration, _window___canva__;
|
|
26
|
-
|
|
27
|
-
const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
|
|
28
|
-
(_window___canva__ = 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.0', 'beta');
|
|
20
|
+
(_window___canva__ = 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.0', 'ga');
|
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
var _window___canva___sdkRegistration, _window___canva__;
|
|
2
|
-
const { canva_sdk } = window;
|
|
3
|
-
export const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
|
|
4
2
|
export * from './public';
|
|
5
|
-
(_window___canva__ = 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.0', '
|
|
3
|
+
(_window___canva__ = 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.0', 'ga');
|
package/package.json
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@canva/design",
|
|
3
|
-
"version": "2.4.1
|
|
3
|
+
"version": "2.4.1",
|
|
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
|
-
"types": "./
|
|
15
|
-
"require": "./lib/cjs/sdk/design/
|
|
16
|
-
"import": "./lib/esm/sdk/design/
|
|
14
|
+
"types": "./index.d.ts",
|
|
15
|
+
"require": "./lib/cjs/sdk/design/index.js",
|
|
16
|
+
"import": "./lib/esm/sdk/design/index.js"
|
|
17
17
|
},
|
|
18
18
|
"./test": {
|
|
19
|
-
"types": "./test/
|
|
20
|
-
"require": "./lib/cjs/sdk/design/test/
|
|
21
|
-
"import": "./lib/esm/sdk/design/test/
|
|
19
|
+
"types": "./test/index.d.ts",
|
|
20
|
+
"require": "./lib/cjs/sdk/design/test/index.js",
|
|
21
|
+
"import": "./lib/esm/sdk/design/test/index.js"
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
|
-
"typings": "./
|
|
24
|
+
"typings": "./index.d.ts"
|
|
25
25
|
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict"
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
_export_star(require("./index"), exports);
|
|
6
|
-
function _export_star(from, to) {
|
|
7
|
-
Object.keys(from).forEach(function(k) {
|
|
8
|
-
if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
|
|
9
|
-
Object.defineProperty(to, k, {
|
|
10
|
-
enumerable: true,
|
|
11
|
-
get: function() {
|
|
12
|
-
return from[k];
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
}
|
|
16
|
-
});
|
|
17
|
-
return from;
|
|
18
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './index';
|
|
File without changes
|