@cesdk/cesdk-js 1.13.1 → 1.14.0

package/index.d.ts

@@ -85,6 +85,11 @@ export declare class AssetAPI {
      * @returns The asset groups.
      */
     getGroups(id: string): Promise<string[]>;
+    /**
+     * Queries the list of supported mime types of the specified asset source.
+     * An empty result means that all mime types are supported.
+     * @param sourceId - The ID of the asset source.
+     */
     getSupportedMimeTypes(sourceId: string): string[];
     /**
      * Queries the asset source's credits info.
@@ -595,6 +600,12 @@ export declare class BlockAPI {
      * @returns A method to unsubscribe.
      */
     onSelectionChanged(callback: () => void): () => void;
+    /**
+     * Subscribe to block click events.
+     * @param callback - This function is called at the end of the engine update if a block has been clicked.
+     * @returns A method to unsubscribe.
+     */
+    onClicked(callback: (id: DesignBlockId) => void): () => void;
     /**
      * Confirms that a given set of blocks can be grouped together.
      * @param ids - A non-empty array of block ids.
@@ -662,6 +673,32 @@ export declare class BlockAPI {
      * @returns A list of block ids.
      */
     findAllPlaceholders(): DesignBlockId[];
+    /**
+     * Create a new shape, fails if type is unknown.
+     * @param type - The type of the shape object that shall be created.
+     * @returns The created shape's handle.
+     */
+    createShape(type: string): DesignBlockId;
+    /**
+     * Query if the given block has a shape property.
+     * @param id - The block to query.
+     * @returns true, if the block has a shape property, an error otherwise.
+     */
+    hasShape(id: DesignBlockId): boolean;
+    /**
+     * Returns the block containing the shape properties of the given block.
+     * @param id - The block whose shape block should be returned.
+     * @returns The block that currently defines the given block's shape.
+     */
+    getShape(id: DesignBlockId): DesignBlockId;
+    /**
+     * Sets the block containing the shape properties of the given block.
+     * Note that the previous shape block is not destroyed automatically.
+     * The new shape is disconnected from its previously attached block.
+     * @param id - The block whose shape should be changed.
+     * @param fill - The new shape.
+     */
+    setShape(id: DesignBlockId, shape: DesignBlockId): void;
     /**
      * Query a block's visibility.
      * @param id - The block to query.
@@ -1241,6 +1278,8 @@ export declare class BlockAPI {
     setCropRotation(id: DesignBlockId, rotation: number): void;
     /**
      * Set the crop scale ratio of the given design block.
+     * This will uniformly scale the content up or down. The center of the
+     * scale operation is the center of the crop frame.
      * @param id - The block whose crop should be set.
      * @param scaleRatio - The crop scale ratio.
      */
@@ -2054,6 +2093,24 @@ export declare class BlockAPI {
      * @returns the enabled state of the placeholder function.
      */
     isPlaceholderEnabled(id: DesignBlockId): boolean;
+    /**
+     * Checks whether the block supports placeholder behavior.
+     * @param block - The block to query.
+     * @returns True, if the block supports placeholder behavior.
+     */
+    hasPlaceholderBehavior(id: DesignBlockId): boolean;
+    /**
+     * Enable or disable the placeholder behavior for a block.
+     * @param id - The block whose placeholder behavior should be enabled or disabled.
+     * @param enabled - Whether the placeholder behavior should be enabled or disabled.
+     */
+    setPlaceholderBehaviorEnabled(id: DesignBlockId, enabled: boolean): void;
+    /**
+     * Query whether the placeholder behavior for a block is enabled.
+     * @param id - The block whose placeholder behavior state should be queried.
+     * @returns the enabled state of the placeholder behavior.
+     */
+    isPlaceholderBehaviorEnabled(id: DesignBlockId): boolean;
     /**
      * Query if the given block shows placeholder content.
      * @param id - The block to query.
@@ -2332,11 +2389,36 @@ export declare class BlockAPI {
      * @returns The video or audio file duration
      */
     getAVResourceTotalDuration(id: DesignBlockId): number;
+    /**
+     * Get the video width in pixels of the video resource that is attached to the given block.
+     * @param block - The video fill.
+     * @returns The video width in pixels or an error.
+     */
+    getVideoWidth(id: DesignBlockId): number;
+    /**
+     * Get the video height in pixels of the video resource that is attached to the given block.
+     * @param block - The video fill.
+     * @returns The video height in pixels or an error.
+     */
+    getVideoHeight(id: DesignBlockId): number;
+    /**
+     * Generate a sequence of thumbnails for the given video fill or page.
+     * Note: there can only be one thumbnail generation request in progress for a given block.
+     * @param id - The video fill or page.
+     * @param thumbnailHeight - The height of a thumbnail. The width will be calculated from the video aspect ratio.
+     * @param timeBegin - The time in seconds at which the thumbnail sequence should start.
+     * @param timeEnd - The time in seconds at which the thumbnail sequence should end.
+     * @param numberOfFrames - The number of frames to generate.
+     * @param onFrame - Gets passed the frame index and RGBA image data.
+     * @returns A method that will cancel any thumbnail generation request in progress for this block.
+     */
+    generateVideoThumbnailSequence(id: DesignBlockId, thumbnailHeight: number, timeBegin: number, timeEnd: number, numberOfFrames: number, onFrame: (frameIndex: number, result: ImageData | Error) => void): () => void;
     /**
      * Generate a thumbnail for the given video fill.
      * @param id - The video fill.
      * @param thumbnailHeight - The height of a thumbnail. The width will be calculated from the video aspect ratio.
      * @returns A thumbnail encoded as JPEG.
+     * @deprecated Use `generateVideoThumbnailSequence` instead.
      */
     getVideoFillThumbnail(id: DesignBlockId, thumbnailHeight: number): Promise<Blob>;
     /**
@@ -2346,6 +2428,7 @@ export declare class BlockAPI {
      * @param numberOfRows - The number of rows to generate.
      * @param thumbnailHeight - The height of a thumbnail. The width will be calculated from the video aspect ratio.
      * @returns A thumbnail atlas of the video as JPEG.
+     * @deprecated Use `generateVideoThumbnailSequence` instead.
      */
     getVideoFillThumbnailAtlas(id: DesignBlockId, numberOfColumns: number, numberOfRows: number, thumbnailHeight: number): Promise<Blob>;
     /**
@@ -2355,6 +2438,7 @@ export declare class BlockAPI {
      * @param numberOfRows - The number of rows to generate.
      * @param thumbnailHeight - The height of a thumbnail. The width will be calculated from the page aspect ratio.
      * @returns A thumbnail atlas of the composition as JPEG.
+     * @deprecated Use `generateVideoThumbnailSequence` instead.
      */
     getPageThumbnailAtlas(id: DesignBlockId, numberOfColumns: number, numberOfRows: number, thumbnailHeight: number): Promise<Blob>;
 }
@@ -2461,6 +2545,7 @@ declare namespace ConfigTypes {
         Scale,
         I18n,
         A11y,
+        UploadCallbackContext,
         OnUploadCallback,
         OnUploadOptions,
         Callbacks,
@@ -2504,6 +2589,7 @@ export declare type CreateConfiguration = Partial<_RequiredCreateConfiguratioan>
 declare class CreativeEditorSDK {
     #private;
     engine: CreativeEngine;
+    ui: UserInterfaceAPI;
     /**
      * Convenience function that registers a set of asset sources containing our
      * example assets. These are
@@ -2642,7 +2728,7 @@ declare class CreativeEditorSDK {
     setTranslations(definition: {
         [locale: string]: object;
     }): void;
-    unstable_switchPage(pageId: number): void;
+    unstable_switchPage(pageId: number): Promise<void>;
     unstable_getPages(): Promise<number[]>;
     unstable_getActivePage(): Promise<number>;
     unstable_onActivePageChanged(callback: (id: number) => void): () => void;
@@ -2841,7 +2927,7 @@ export declare enum DesignBlockType {
 }
 
 /**
- * The scene layout determines how the layout stack should layout its pages.
+ * The unit type in which the page values (size, distances, etc.) are defined.
  * @public
  */
 export declare type DesignUnit = 'Pixel' | 'Millimeter' | 'Inch';
@@ -3698,7 +3784,7 @@ declare type OffscreenCanvas_2 = {
 export { OffscreenCanvas_2 as OffscreenCanvas }
 
 /** @public */
-declare type OnUploadCallback = (file: File, onProgress: (progress: number) => void) => Promise<AssetDefinition>;
+declare type OnUploadCallback = (file: File, onProgress: (progress: number) => void, context?: UploadCallbackContext) => Promise<AssetDefinition>;
 
 /** @public */
 declare type OnUploadOptions = {
@@ -4224,6 +4310,12 @@ declare interface UIOptionsPerDesignUnit {
  */
 declare type UnsubscribeFn = () => void;
 
+/** @public */
+declare interface UploadCallbackContext {
+    sourceId: string;
+    group?: string;
+}
+
 /** @public */
 export declare interface UserInterface {
     baseURL?: string;
@@ -4241,6 +4333,59 @@ export declare interface UserInterface {
     };
 }
 
+/**
+ * A public interface for controlling the UI of the Creative Editor SDK
+ *
+ * @public
+ */
+declare class UserInterfaceAPI {
+    #private;
+    /**
+     * Opens a panel with the given id if and only if it exists, is not open and
+     * currently registered (known to the UI). Otherwise the method does nothing
+     * and is a noop.
+     *
+     * Available panel ids beside custom panel ids:
+     * - `//ly.img.panel/inspector`
+     *   opening the inspector panel for the current selected block
+     * - `//ly.img.panel/assetLibrary.replace`
+     *   opening the library with asset to replace the currently selected block.
+     *   Beware that the library might show nothing depending on how it configured.
+     *
+     * @param panelId - The id of the panel to open.
+     */
+    openPanel(panelId: string): void;
+    /**
+     * Closes a panel with the given id if and only if it exists and is open.
+     * Otherwise the method does nothing and is a noop.
+     *
+     * Available panel ids beside custom panel ids:
+     * - `//ly.img.panel/inspector`
+     *   closing the inspector panel for the current selected block
+     * - `//ly.img.panel/assetLibrary`
+     *   closing the currently open library
+     * - `//ly.img.panel/assetLibrary.replace`
+     *   closing the library with asset to replace the currently selected block.
+     *
+     * @param panelId - The id of the panel to close.
+     */
+    closePanel(panelId: string): void;
+    /**
+     * Returns `true` if and only if a panel with the given id is open.
+     *
+     * Available panel ids beside custom panel ids:
+     * - `//ly.img.panel/inspector`
+     *   inspector panel for the current selected block
+     * - `//ly.img.panel/assetLibrary`
+     *   the asset library
+     * - `//ly.img.panel/assetLibrary.replace`
+     *   closing the library with asset to replace the currently selected block.
+     *
+     * @param panelId - The id of a panel that might be open
+     */
+    isPanelOpen(panelId: string): boolean;
+}
+
 /** @public */
 declare interface UserInterfaceAssetLibrary extends UserInterfaceElement {
     position?: PanelPosition;
@@ -4273,6 +4418,7 @@ declare namespace UserInterfaceElements {
         UserInterfaceInspectorBlockImage,
         UserInterfaceInspectorBlockVideoFill,
         UserInterfaceInspectorBlockRectShape,
+        UserInterfaceInspectorBlockDesign,
         UserInterfaceInspectorBlockShape,
         UserInterfaceInspector,
         UserInterfaceSettings,
@@ -4343,6 +4489,15 @@ declare interface UserInterfaceInspector extends UserInterfaceElement {
 declare interface UserInterfaceInspectorBlock {
 }
 
+/** @public */
+declare interface UserInterfaceInspectorBlockDesign extends UserInterfaceInspectorBlock {
+    crop?: UserInterfaceElement | boolean;
+    filters?: UserInterfaceElement | boolean;
+    adjustments?: UserInterfaceElement | boolean;
+    effects?: UserInterfaceElement | boolean;
+    blur?: UserInterfaceElement | boolean;
+}
+
 /** @public */
 declare interface UserInterfaceInspectorBlockImage extends UserInterfaceInspectorBlock {
     crop?: UserInterfaceElement | boolean;
@@ -4391,6 +4546,7 @@ declare interface UserInterfaceInspectorBlocks {
     '//ly.img.ubq/shapes/ellipse'?: UserInterfaceInspectorBlockShape;
     '//ly.img.ubq/text'?: UserInterfaceInspectorBlockText;
     '//ly.img.ubq/page'?: UserInterfaceInspectorBlockPage;
+    '//ly.img.ubq/design'?: UserInterfaceInspectorBlockDesign;
 }
 
 /** @public */
@@ -4542,7 +4698,10 @@ declare enum ViewStyle {
  */
 export declare type XYWH = [x: number, y: number, w: number, h: number];
 
-/**  @public */
+/**
+ * The axis(es) for which to auto-fit.
+ * @public
+ */
 export declare type ZoomAutoFitAxis = 'Horizontal' | 'Vertical' | 'Both';
 
 export { }

package/index.html

@@ -14,115 +14,116 @@
       .ubq-public {
         /* Override CSS variables for a custom theme */
       }</style><script defer="defer" src="cesdk.umd.js"></script><link href="assets/ui/stylesheets/cesdk.css" rel="stylesheet"><link href="assets/ui/stylesheets/cesdk-themes.css" rel="stylesheet"></head><body><div id="root"></div><script>window.onload = function () {
-          var href = window.location.href.split('?');
-          var config = {
-            locale: 'en',
-            baseURL: "assets/",
-            role: 'Creator', // 'Creator', 'Adopter', 'Viewer'
-            callbacks: {
-              onSave: handleSave,
-              onLoad: handleLoad,
-              onExport: handleExport,
-              onUnsupportedBrowser: () => {
-                console.error('Unsupported Browser Detected');
-              },
-              log: (msg, level) => {
-                console.log(msg)
-              },
-            },
-            ui: {
-              elements: {
+        var href = window.location.href.split('?');
+        var config = {
+          locale: 'en',
+          baseURL: 'assets/',
+          role: 'Creator', // 'Creator', 'Adopter', 'Viewer'
+          callbacks: {
+            onSave: handleSave,
+            onLoad: handleLoad,
+            onExport: handleExport,
+            onUnsupportedBrowser: () => {
+              console.error('Unsupported Browser Detected');
+            }
+          },
+          ui: {
+            elements: {
               view: 'default',
-                panels: {
-                  settings: true
-                },
-                navigation: {
-                  action: {
-                    close: true,
-                    back: true,
-                    save: true,
-                    load: true,
-                    export: true,
-                  }
-                }
+              panels: {
+                settings: true
               },
-            },
-            defaultFont: '//ly.img.cesdk.fonts/roboto_regular'
-          };
-
-
-        CreativeEditorSDK.create(
-          document.getElementById('root'),
-          config
-        ).then(async (instance) => {
-          await Promise.all([
-            instance.addDefaultAssetSources(),
-            instance.addDemoAssetSources()
-          ]);
-          await instance.createEmptyScene();
-        });
-      }
-
-        var handleExport = function (blobs) {
-          const blob = blobs[0];
-          const element = document.createElement('a');
-          element.setAttribute('href', window.URL.createObjectURL(blob));
-          element.setAttribute('download', `cesdk-${new Date().toISOString()}.png`);
-
-          element.style.display = 'none';
-          document.body.appendChild(element);
-
-          element.click();
-
-          document.body.removeChild(element);
-        }
-
-        var handleSave = function (scene) {
-          const element = document.createElement('a');
-          const base64Data = btoa(unescape(encodeURIComponent(scene)));
-          element.setAttribute(
-            'href',
-            `data:application/octet-stream;base64,${base64Data}`
-          );
-          element.setAttribute('download', `cesdk-${new Date().toISOString()}.scene`);
-
-          element.style.display = 'none';
-          document.body.appendChild(element);
-
-          element.click();
-
-          document.body.removeChild(element);
-        };
-
-        var handleLoad = (function () {
-          const element = document.createElement('input');
-          element.setAttribute('type', 'file');
-          element.setAttribute('accept', '.scene');
-
-          element.style.display = 'none';
-          document.body.appendChild(element);
-
-          return () => {
-            return new Promise((resolve, reject) => {
-              element.onchange = (e) => {
-                const file = e.target.files[0];
-                if (file === undefined) {
-                  reject(new Error('No files selected'));
-                } else {
-                  const reader = new FileReader();
-                  reader.readAsText(file, 'UTF-8');
-
-                  reader.onload = (readerEvent) => {
-                    const scene = readerEvent.target.result;
-                    resolve(scene);
-                  };
+              navigation: {
+                action: {
+                  close: true,
+                  back: true,
+                  save: true,
+                  load: true,
+                  export: true
                 }
+              }
+            }
+          },
+          defaultFont: '//ly.img.cesdk.fonts/roboto_regular'
+        };
 
-                element.onchange = null;
-                element.value = '';
-              };
-
-              element.click();
-            });
+        CreativeEditorSDK.create(document.getElementById('root'), config).then(
+          async (instance) => {
+            await Promise.all([
+              instance.addDefaultAssetSources(),
+              instance.addDemoAssetSources()
+            ]);
+            await instance.createDesignScene();
           }
-        })();</script></body></html>
+        );
+      };
+
+      var handleExport = function (blobs) {
+        const blob = blobs[0];
+        const element = document.createElement('a');
+        element.setAttribute('href', window.URL.createObjectURL(blob));
+        element.setAttribute(
+          'download',
+          `cesdk-${new Date().toISOString()}.png`
+        );
+
+        element.style.display = 'none';
+        document.body.appendChild(element);
+
+        element.click();
+
+        document.body.removeChild(element);
+      };
+
+      var handleSave = function (scene) {
+        const element = document.createElement('a');
+        const base64Data = btoa(unescape(encodeURIComponent(scene)));
+        element.setAttribute(
+          'href',
+          `data:application/octet-stream;base64,${base64Data}`
+        );
+        element.setAttribute(
+          'download',
+          `cesdk-${new Date().toISOString()}.scene`
+        );
+
+        element.style.display = 'none';
+        document.body.appendChild(element);
+
+        element.click();
+
+        document.body.removeChild(element);
+      };
+
+      var handleLoad = (function () {
+        const element = document.createElement('input');
+        element.setAttribute('type', 'file');
+        element.setAttribute('accept', '.scene');
+
+        element.style.display = 'none';
+        document.body.appendChild(element);
+
+        return () => {
+          return new Promise((resolve, reject) => {
+            element.onchange = (e) => {
+              const file = e.target.files[0];
+              if (file === undefined) {
+                reject(new Error('No files selected'));
+              } else {
+                const reader = new FileReader();
+                reader.readAsText(file, 'UTF-8');
+
+                reader.onload = (readerEvent) => {
+                  const scene = readerEvent.target.result;
+                  resolve(scene);
+                };
+              }
+
+              element.onchange = null;
+              element.value = '';
+            };
+
+            element.click();
+          });
+        };
+      })();</script></body></html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cesdk/cesdk-js",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "main": "./cesdk.umd.js",
   "types": "./index.d.ts",
   "homepage": "https://www.img.ly",