@canva/design 1.7.0 → 1.9.0

package/index.d.ts

@@ -99,6 +99,14 @@ export declare type AppElementRenderer<A extends AppElementData> = (
  */
 export declare type AppElementRendererOutput = NativeSimpleElementWithBox[];
 
+/**
+ * @public
+ * A unique identifier that references an app runtime process
+ */
+export declare type AppProcessId = string & {
+  __appProcessId: never;
+};
+
 /**
  * @public
  * Options for defining the drag-and-drop behavior of audio tracks.
@@ -205,6 +213,23 @@ export declare type Coordinates = {
   y: number;
 };
 
+/**
+ * @public
+ * Provides methods for interacting with design overlay
+ */
+export declare type DesignOverlay = {
+  /**
+   * Registers a callback that runs when an overlay canOpen status changed on a particular target.
+   *
+   * @remarks
+   * The callback fires immediately
+   */
+  registerOnCanOpen<Target extends OverlayTarget>(opts: {
+    target: Target;
+    onCanOpen(event: OverlayOpenableEvent<Target>): void;
+  }): () => void;
+};
+
 /**
  * @public
  * Provides methods for interacting with the user's selected content, such as images or text.
@@ -938,6 +963,51 @@ export declare type NativeVideoElementWithBox = NativeVideoElement & Box;
  */
 declare type ObjectPrimitive = Boolean | String;
 
+/**
+ * @public
+ * An alias for the DesignOverlay interface, providing access to design overlay related functionality
+ */
+export declare const overlay: DesignOverlay;
+
+/**
+ * @public
+ * Information about whether the overlay can be opened or not on a particular {@link OverlayTarget}
+ */
+export declare type OverlayOpenableEvent<Target extends OverlayTarget> = {
+  /**
+   * An event indicating whether the overlay can be opened or not when {@link OverlayTarget} is `"image_selection"`
+   */
+  ["image_selection"]:
+    | OverlayUnopenableEvent
+    | {
+        canOpen: true;
+        /**
+         * Launch a new app process on an overlay on top of the current selected image fill
+         *
+         * @remarks
+         * `launchParameters` specifies the type of data that are provided to an app process at its launch
+         */
+        readonly open: (options: {
+          launchParameters?: any;
+        }) => Promise<AppProcessId>;
+      };
+}[Target];
+
+/**
+ * @public
+ * The target to check if an overlay can be opened for
+ */
+export declare type OverlayTarget = "image_selection";
+
+/**
+ * @public
+ * Information about the overlay when it can not be opened on a particular {@link OverlayTarget}
+ */
+declare type OverlayUnopenableEvent = {
+  canOpen: false;
+  reason: string;
+};
+
 /**
  * @public
  * The appearance of a page's background.
@@ -1083,7 +1153,7 @@ export declare interface SelectionEvent<Scope extends SelectionScope> {
  * @public
  * The type of content that apps can detect selection changes on.
  */
-export declare type SelectionScope = "plaintext" | "image";
+export declare type SelectionScope = "plaintext" | "image" | "video";
 
 /**
  * @public
@@ -1111,6 +1181,15 @@ export declare type SelectionValue<Scope extends SelectionScope> = {
      */
     ref: ImageRef;
   };
+  /**
+   * The selected content when {@link SelectionScope} is `"video"`.
+   */
+  ["video"]: {
+    /**
+     * A unique identifier that points to an video asset in Canva's backend.
+     */
+    ref: VideoRef;
+  };
 }[Scope];
 
 /**
@@ -1196,7 +1275,7 @@ export declare type TextAttributes = {
    * The alignment of the text.
    * @defaultValue 'start'
    */
-  textAlign?: "start" | "center" | "end";
+  textAlign?: "start" | "center" | "end" | "justify";
   /**
    * The color of the text as a hex code.
    *
@@ -1244,7 +1323,7 @@ export declare type TextDragConfig = {
    * The alignment of the text.
    * @defaultValue 'start'
    */
-  textAlign?: "start" | "center" | "end";
+  textAlign?: "start" | "center" | "end" | "justify";
   /**
    * The weight of the font.
    * @defaultValue 'normal'

package/lib/cjs/sdk/design/index.js

@@ -1,17 +1,19 @@
+// Copyright 2023 Canva Inc. All Rights Reserved.
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./public"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./public"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/sdk/design/public.js

@@ -1,97 +1,80 @@
+// Copyright 2023 Canva Inc. All Rights Reserved.
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDesignToken = exports.initAppElement = exports.getCurrentPageContext = exports.addAudioTrack = exports.addNativeElement = exports.ui = exports.requestExport = exports.getDefaultPageDimensions = exports.setCurrentPageBackground = exports.addPage = exports.selection = void 0;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    selection: function() {
+        return selection;
+    },
+    overlay: function() {
+        return overlay;
+    },
+    addPage: function() {
+        return addPage;
+    },
+    setCurrentPageBackground: function() {
+        return setCurrentPageBackground;
+    },
+    getDefaultPageDimensions: function() {
+        return getDefaultPageDimensions;
+    },
+    requestExport: function() {
+        return requestExport;
+    },
+    ui: function() {
+        return ui;
+    },
+    addNativeElement: function() {
+        return addNativeElement;
+    },
+    addAudioTrack: function() {
+        return addAudioTrack;
+    },
+    getCurrentPageContext: function() {
+        return getCurrentPageContext;
+    },
+    initAppElement: function() {
+        return initAppElement;
+    },
+    getDesignToken: function() {
+        return getDesignToken;
+    }
+});
 const { canva } = window;
-/**
- * @public
- * An alias for the DesignSelection interface, providing access to design selection related functionality
- */
-exports.selection = canva.designInteraction.selection;
-/**
- * @public
- * Adds a new page immediately after the currently selected page.
- * @param opts - Configuration for the new page to be added.
- */
+const selection = canva.designInteraction.selection;
+const overlay = canva.designInteraction.overlay;
 function addPage(opts) {
     return canva.designInteraction.addPage(opts);
 }
-exports.addPage = addPage;
-/**
- * @public
- * Updates the background of the user's current page. The background can be a solid color,
- * an image or a video.
- */
 function setCurrentPageBackground(opts) {
     return canva.designInteraction.setCurrentPageBackground(opts);
 }
-exports.setCurrentPageBackground = setCurrentPageBackground;
-/**
- * @public
- * Gets the default dimensions that a new page will have when it is added to a design.
- * It is possible for a user to resize a page without resizing the entire design, e.g. by clicking
- * "Expand to Whiteboard". However, there will always be a single set of default dimensions for a
- * design that is applied whenever a new page is created.
- *
- * Returns `undefined` if the design is unbounded (e.g. Whiteboard or Doc).
- */
 function getDefaultPageDimensions() {
     return canva.designInteraction.getDefaultPageDimensions();
 }
-exports.getDefaultPageDimensions = getDefaultPageDimensions;
-/**
- * @public
- * Exports the user's design as one or more static files.
- * @param request - The request object containing configurations of the design export.
- */
 function requestExport(request) {
     return canva.export.requestExport(request);
 }
-exports.requestExport = requestExport;
-/**
- * An alias for the UI interface, providing access to ui related functionality
- * @public
- */
-exports.ui = canva.dragAndDrop;
-/**
- * @public
- * Adds a native element to the user's design.
- * @param element - The element to add to the user's design.
- */
+const ui = canva.dragAndDrop;
 function addNativeElement(element) {
     return canva.designInteraction.addNativeElement(element);
 }
-exports.addNativeElement = addNativeElement;
-/**
- * Adds an audio track to the user's design.
- * @public
- * @param audioTrack - The audio track to add to the user's design.
- */
 function addAudioTrack(audioTrack) {
     return canva.designInteraction.addAudioTrack(audioTrack);
 }
-exports.addAudioTrack = addAudioTrack;
-/**
- * Allows to get the context of currently selected page.
- * @public
- * @returns Page context of currently selected page
- */
 function getCurrentPageContext() {
     return canva.designInteraction.getCurrentPageContext();
 }
-exports.getCurrentPageContext = getCurrentPageContext;
-/**
- * @public
- * @param appElementConfig - Configuration for an AppElementClient
- */
 function initAppElement(appElementConfig) {
     return canva.designInteraction.initAppElement(appElementConfig);
 }
-exports.initAppElement = initAppElement;
-/**
- * @public
- * Retrieves a signed JWT that contains the Design ID, App ID and User ID.
- */
 function getDesignToken() {
     return canva.designInteraction.getDesignToken();
 }
-exports.getDesignToken = getDesignToken;

package/lib/esm/sdk/design/index.js

@@ -1 +1,2 @@
+// Copyright 2023 Canva Inc. All Rights Reserved.
 export * from './public';

package/lib/esm/sdk/design/public.js

@@ -1,23 +1,25 @@
+// Copyright 2023 Canva Inc. All Rights Reserved.
 const { canva } = window;
 /**
  * @public
  * An alias for the DesignSelection interface, providing access to design selection related functionality
- */
-export const selection = canva.designInteraction.selection;
+ */ export const selection = canva.designInteraction.selection;
+/**
+ * @public
+ * An alias for the DesignOverlay interface, providing access to design overlay related functionality
+ */ export const overlay = canva.designInteraction.overlay;
 /**
  * @public
  * Adds a new page immediately after the currently selected page.
  * @param opts - Configuration for the new page to be added.
- */
-export function addPage(opts) {
+ */ export function addPage(opts) {
     return canva.designInteraction.addPage(opts);
 }
 /**
  * @public
  * Updates the background of the user's current page. The background can be a solid color,
  * an image or a video.
- */
-export function setCurrentPageBackground(opts) {
+ */ export function setCurrentPageBackground(opts) {
     return canva.designInteraction.setCurrentPageBackground(opts);
 }
 /**
@@ -28,58 +30,50 @@ export function setCurrentPageBackground(opts) {
  * design that is applied whenever a new page is created.
  *
  * Returns `undefined` if the design is unbounded (e.g. Whiteboard or Doc).
- */
-export function getDefaultPageDimensions() {
+ */ export function getDefaultPageDimensions() {
     return canva.designInteraction.getDefaultPageDimensions();
 }
 /**
  * @public
  * Exports the user's design as one or more static files.
  * @param request - The request object containing configurations of the design export.
- */
-export function requestExport(request) {
+ */ export function requestExport(request) {
     return canva.export.requestExport(request);
 }
 /**
  * An alias for the UI interface, providing access to ui related functionality
  * @public
- */
-export const ui = canva.dragAndDrop;
+ */ export const ui = canva.dragAndDrop;
 /**
  * @public
  * Adds a native element to the user's design.
  * @param element - The element to add to the user's design.
- */
-export function addNativeElement(element) {
+ */ export function addNativeElement(element) {
     return canva.designInteraction.addNativeElement(element);
 }
 /**
  * Adds an audio track to the user's design.
  * @public
  * @param audioTrack - The audio track to add to the user's design.
- */
-export function addAudioTrack(audioTrack) {
+ */ export function addAudioTrack(audioTrack) {
     return canva.designInteraction.addAudioTrack(audioTrack);
 }
 /**
  * Allows to get the context of currently selected page.
  * @public
  * @returns Page context of currently selected page
- */
-export function getCurrentPageContext() {
+ */ export function getCurrentPageContext() {
     return canva.designInteraction.getCurrentPageContext();
 }
 /**
  * @public
  * @param appElementConfig - Configuration for an AppElementClient
- */
-export function initAppElement(appElementConfig) {
+ */ export function initAppElement(appElementConfig) {
     return canva.designInteraction.initAppElement(appElementConfig);
 }
 /**
  * @public
  * Retrieves a signed JWT that contains the Design ID, App ID and User ID.
- */
-export function getDesignToken() {
+ */ export function getDesignToken() {
     return canva.designInteraction.getDesignToken();
 }

package/package.json

@@ -1,18 +1,24 @@
 {
   "name": "@canva/design",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "The Canva Apps SDK design library",
   "author": "Canva Pty Ltd.",
   "license": "SEE LICENSE IN LICENSE.md FILE",
   "peerDependencies": {
     "@canva/error": "^1.0.0"
   },
-  "main": "lib/cjs/sdk/design/index.js",
-  "module": "lib/esm/sdk/design/index.js",
+  "main": "./lib/cjs/sdk/design/index.js",
+  "module": "./lib/esm/sdk/design/index.js",
   "exports": {
     ".": {
-      "require": "./lib/cjs/sdk/design/index.js",
-      "import": "./lib/esm/sdk/design/index.js"
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./lib/cjs/sdk/design/index.js"
+      },
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./lib/esm/sdk/design/index.js"
+      }
     }
   },
   "typings": "./index.d.ts"