/** * Options for adding images to the scene. * @public */ export declare type AddImageOptions = { /** How the image should be sized and positioned */ sizeMode?: SizeMode; /** How the position should be interpreted */ positionMode?: PositionMode; /** X position in scene design units */ x?: number; /** Y position in scene design units */ y?: number; /** Corner radius for rounded corners in scene design units */ cornerRadius?: number; /** Size for the image - can be a number for equal width/height or an object */ size?: number | { /** Width in scene design units */ width: number; /** Height in scene design units */ height: number; }; /** Timeline configuration for video scenes */ timeline?: { /** Start time offset in seconds */ timeOffset?: number; /** Duration in seconds */ duration?: number; }; /** Drop shadow configuration */ shadow?: DropShadowOptions; /** Animation configuration */ animation?: AnimationOptions; }; /** * Options for adding videos to the scene. * @public */ export declare interface AddVideoOptions { /** How the video should be sized and positioned */ sizeMode?: SizeMode; /** How the position should be interpreted */ positionMode?: PositionMode; /** X position in scene design units */ x?: number; /** Y position in scene design units */ y?: number; /** Corner radius for rounded corners in scene design units */ cornerRadius?: number; /** Timeline configuration */ timeline?: { /** Start time offset in seconds */ timeOffset?: number; /** Duration in seconds */ duration?: number; }; /** Drop shadow configuration */ shadow?: DropShadowOptions; /** Animation configuration */ animation?: AnimationOptions; } /** * The shorthand block type IDs for the animation blocks. These are the IDs used to create new animations * using `cesdk.engine.block.createAnimation(id)`. * @public */ export declare const ANIMATION_TYPES: readonly ["slide", "pan", "fade", "blur", "grow", "zoom", "pop", "wipe", "baseline", "crop_zoom", "spin", "spin_loop", "fade_loop", "blur_loop", "pulsating_loop", "breathing_loop", "jump_loop", "squeeze_loop", "sway_loop", "scale_loop", "typewriter_text", "block_swipe_text", "spread_text", "merge_text", "ken_burns"]; /** @public */ export declare type AnimationBaselineDirection = (typeof AnimationBaselineDirectionValues)[number]; /** @public */ export declare const AnimationBaselineDirectionValues: readonly ["Up", "Right", "Down", "Left"]; /** @public */ export declare type AnimationBlockSwipeTextDirection = (typeof AnimationBlockSwipeTextDirectionValues)[number]; /** @public */ export declare const AnimationBlockSwipeTextDirectionValues: readonly ["Up", "Right", "Down", "Left"]; /** @public */ export declare type AnimationEasing = (typeof AnimationEasingValues)[number]; /** @public */ export declare const AnimationEasingValues: readonly ["Linear", "EaseIn", "EaseOut", "EaseInOut", "EaseInQuart", "EaseOutQuart", "EaseInOutQuart", "EaseInQuint", "EaseOutQuint", "EaseInOutQuint", "EaseInBack", "EaseOutBack", "EaseInOutBack", "EaseInSpring", "EaseOutSpring", "EaseInOutSpring"]; /** * Configuration options for animations. * @public */ export declare type AnimationEntry = { /** The type of animation to apply */ type: AnimationType; /** Duration of the animation in seconds */ duration: number; /** Easing function for the animation */ easing?: AnimationEasing; }; /** @public */ export declare type AnimationGrowDirection = (typeof AnimationGrowDirectionValues)[number]; /** @public */ export declare const AnimationGrowDirectionValues: readonly ["Horizontal", "Vertical", "TopLeft", "TopRight", "BottomLeft", "BottomRight", "All"]; /** @public */ export declare type AnimationJumpLoopDirection = (typeof AnimationJumpLoopDirectionValues)[number]; /** @public */ export declare const AnimationJumpLoopDirectionValues: readonly ["Up", "Right", "Down", "Left"]; /** @public */ export declare type AnimationKenBurnsDirection = (typeof AnimationKenBurnsDirectionValues)[number]; /** @public */ export declare const AnimationKenBurnsDirectionValues: readonly ["Up", "Right", "Down", "Left"]; /** @public */ export declare type AnimationMergeTextDirection = (typeof AnimationMergeTextDirectionValues)[number]; /** @public */ export declare const AnimationMergeTextDirectionValues: readonly ["Right", "Left"]; /** * Options for configuring animations (in, loop, out animations). * @public */ export declare type AnimationOptions = { /** Animation when the element enters */ in?: AnimationEntry; /** Animation that loops while the element is visible */ loop?: AnimationEntry; /** Animation when the element exits */ out?: AnimationEntry; }; /** @public */ export declare type AnimationScaleLoopDirection = (typeof AnimationScaleLoopDirectionValues)[number]; /** @public */ export declare const AnimationScaleLoopDirectionValues: readonly ["Horizontal", "Vertical", "TopLeft", "TopRight", "BottomLeft", "BottomRight", "All"]; /** @public */ export declare type AnimationSpinDirection = (typeof AnimationSpinDirectionValues)[number]; /** @public */ export declare const AnimationSpinDirectionValues: readonly ["Clockwise", "CounterClockwise"]; /** @public */ export declare type AnimationSpinLoopDirection = (typeof AnimationSpinLoopDirectionValues)[number]; /** @public */ export declare const AnimationSpinLoopDirectionValues: readonly ["Clockwise", "CounterClockwise"]; /** * The block type IDs for the animation blocks. These are the IDs used to create new animations * using `cesdk.engine.block.createAnimation(id)`. * Refer to {@link AnimationTypeShorthand} and {@link AnimationTypeLonghand} for more details. * @public */ export declare type AnimationType = AnimationTypeShorthand | AnimationTypeLonghand; /** * The longhand block type IDs for the animation blocks. These are the IDs used to create new animations * using `cesdk.engine.block.createAnimation(id)`. * @public */ export declare type AnimationTypeLonghand = `//ly.img.ubq/animation/${AnimationTypeShorthand}`; /** @public */ export declare type AnimationTypeShorthand = (typeof ANIMATION_TYPES)[number]; /** @public */ export declare type AnimationTypewriterTextWritingStyle = (typeof AnimationTypewriterTextWritingStyleValues)[number]; /** @public */ export declare const AnimationTypewriterTextWritingStyleValues: readonly ["Character", "Word"]; /** @public */ export declare type AnimationWipeDirection = (typeof AnimationWipeDirectionValues)[number]; /** @public */ export declare const AnimationWipeDirectionValues: readonly ["Up", "Right", "Down", "Left"]; /** * Represents the application MIME types used in the editor. * * @categoryDescription Application MIME Type * Defines the possible application MIME types used in the editor. * - 'application/octet-stream': Binary data format. * - 'application/pdf': PDF document format. * - 'application/zip': ZIP archive format. * * @public */ export declare type ApplicationMimeType = Extract; /** * Options for applying an asset to the scene. * @public */ export declare interface ApplyAssetOptions { /** * How the asset should be placed in the scene. * - 'clip': Background clip placed on background track * - 'overlay': Foreground overlay placed at playhead */ clipType?: 'clip' | 'overlay'; /** * Additional custom context options. * Allows passing arbitrary data to middleware for custom placement logic. */ [key: string]: unknown; } /** * Generic asset information * @public */ export declare interface Asset { /** * The unique id of this asset. */ id: string; /** Groups of the asset. */ groups?: AssetGroups; /** Asset-specific and custom meta information */ meta?: AssetMetaData; /** Structured asset-specific data */ payload?: AssetPayload; } /** * @public Manage asset sources and apply assets to scenes. * * Asset sources provide assets like images, videos, fonts, and other media that can be applied to design blocks. * This API allows registering custom asset sources, querying available assets, and applying them to scenes or specific blocks. * It supports both local and remote asset sources, with extensible middleware for custom asset handling. * * @categoryDescription Asset Source Management * Register, remove, and query asset sources for different types of media. * * @categoryDescription Asset Discovery * Search and filter assets from registered sources with advanced query options. * * @categoryDescription Asset Application * Apply assets to scenes, blocks, or specific properties with customizable behavior. * * @categoryDescription Asset Lifecycle * Add, remove, and manage assets within local asset sources. * * @categoryDescription Asset Information * Retrieve metadata, credits, licenses, and supported formats from asset sources. * * @categoryDescription Event Subscriptions * Subscribe to asset source changes and lifecycle events. */ export declare class AssetAPI { #private; /** * Register middleware that intercepts asset application to scenes. * * The middleware function receives the source ID, asset result, the original apply function, * and a context object containing options about how the asset should be applied. * It can perform custom logic before, after, or instead of the default asset application. * * @example * ```ts * engine.asset.registerApplyMiddleware(async (sourceId, assetResult, apply, context) => { * // Access context to determine placement intent * console.log('Clip type:', context.clipType); // 'clip', 'overlay', or undefined * console.log('Custom data:', context.myCustomField); // Access custom fields * * // do something before applying the asset * // You still have the choice to call apply or skip it * const blockId = await apply(sourceId, assetResult); * // do something after applying the asset * return blockId; * }) * ``` * * @category Asset Application * @param middleware - The middleware function that is called before applying the asset. * @returns A function that can be used to remove the middleware. */ registerApplyMiddleware(middleware: (sourceId: string, assetResult: AssetResult, apply: AssetAPI['apply'], context: ApplyAssetOptions) => Promise): VoidFunction; /** * Register middleware that intercepts asset application to specific blocks. * * The middleware function receives the source ID, asset result, target block, and the original apply function. * It can perform custom logic before, after, or instead of the default block asset application. * * @example * ```ts * engine.asset.registerApplyToBlockMiddleware(async (sourceId, assetResult, block, applyToBlock) => { * // do something before applying the asset * // You still have the choice to call applyToBlock or skip it * await applyToBlock(sourceId, assetResult, block); * // do something after applying the asset * }) * ``` * * @category Asset Application * @param middleware - The middleware function that is called before applying the asset. * @returns A function that can be used to remove the middleware. */ registerApplyToBlockMiddleware(middleware: (sourceId: string, assetResult: AssetResult, block: DesignBlockId, applyToBlock: AssetAPI['applyToBlock']) => Promise): VoidFunction; /** * Add a custom asset source with unique ID. * * The asset source provides methods for finding assets, applying them to scenes or blocks, * and managing asset lifecycle. All source operations are handled asynchronously. * * ```javascript * engine.asset.addSource({ * id: 'foobar', * async findAssets(queryData) { * return Promise.resolve({ * assets: [ * { * id: 'logo', * meta: { * uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', * } * } * ], * total: 1, * currentPage: queryData.page, * nextPage: undefined * }); * }, * }); * ``` * * @category Asset Source Management * @param source - The asset source configuration. */ addSource(source: AssetSource): void; /** * Add a local asset source. * * Local asset sources allow dynamic asset management through the add/remove methods. * You can specify supported MIME types to restrict what assets can be added. * * ```javascript * engine.asset.addLocalSource('local-source'); * ``` * * @category Asset Source Management * @param id - Unique identifier for the asset source. * @param supportedMimeTypes - The mime types of assets that are allowed to be added to this local source. * @param applyAsset - An optional callback that can be used to override the default behavior of applying a given asset result to the active scene. * @param applyAssetToBlock - An optional callback that can be used to override the default behavior of applying an asset result to a given block. */ addLocalSource(id: string, supportedMimeTypes?: string[], applyAsset?: (asset: CompleteAssetResult) => Promise, applyAssetToBlock?: (asset: CompleteAssetResult, block: DesignBlockId) => Promise): void; /** * Creates a new local asset source from a JSON string containing asset definitions. * * The JSON structure should contain a `version` field, an `id` field specifying the asset source identifier, * and an `assets` array with asset definitions. Each asset should have an `id`, localized `label` object, * and a `meta` object containing asset-specific properties like `uri`, `thumbUri`, `blockType`, etc. * * Optionally, you can provide a `basePath` for resolving relative URLs and additional options including a * `matcher` array to filter which assets are loaded based on their IDs. The matcher patterns support wildcard * matching using `*`. If multiple patterns are provided, an asset is included if it matches ANY of the patterns. * * @category Asset Source Management * @param contentJSON - The JSON string containing the asset definitions. * @param basePath - An optional base path with which \{\{base_url\}\} strings in the assets should be replaced. If no value is provided, settings.basePath is used. * @param options - Optional configuration: * - `matcher`: Array of patterns to filter assets by ID. Supports `*` wildcard. An asset is included if it matches ANY pattern. * @returns The ID of the newly created asset source (as specified in the JSON's `id` field). * * @example * ```javascript * // Load all assets from JSON * const json = JSON.stringify({ * "version": "2.0.0", * "id": "my.custom.assets", * "assets": [ * { * "id": "sample_asset", * "label": { "en": "Sample Asset" }, * "meta": { * "uri": "https://example.com/asset.jpg", * "thumbUri": "https://example.com/thumb.jpg", * "blockType": "//ly.img.ubq/image" * } * } * ] * }); * const sourceId = await engine.asset.addLocalAssetSourceFromJSONString(json); * console.log('Created asset source:', sourceId); // "my.custom.assets" * * // Load with custom base path * const sourceId2 = await engine.asset.addLocalAssetSourceFromJSONString( * json, * 'https://example.com/' * ); * * // Load only assets matching one of the patterns * const sourceId3 = await engine.asset.addLocalAssetSourceFromJSONString( * json, * undefined, * { matcher: ['sample_*', '*_asset'] } * ); * * // Load with custom base path and matcher * const sourceId4 = await engine.asset.addLocalAssetSourceFromJSONString( * json, * 'https://example.com/', * { matcher: ['portrait_*', 'landscape_*'] } * ); * ``` */ addLocalAssetSourceFromJSONString(contentJSON: string, basePath?: string, options?: { matcher?: string[]; }): Promise; /** * Creates a new local asset source from a JSON URI. * * Loads and parses a JSON file from the specified URI to create an asset source. The JSON structure * should contain a `version` field, an `id` field specifying the asset source identifier, and an * `assets` array with asset definitions. The created asset source will have the ID specified in the * JSON's `id` field, and all assets defined in the JSON will be added to the source. * * Note: The parent directory of the content.json URI will be used as the base path for resolving * relative URLs in the asset definitions (e.g., `{{base_url}}` placeholders). * * @category Asset Source Management * @param contentURI - The URI for the JSON file to load and parse. * @param options - Optional configuration: * - `matcher`: Array of patterns to filter assets by ID. Supports `*` wildcard. An asset is included if it matches ANY pattern. * @returns The ID of the newly created asset source (as specified in the JSON's `id` field). * * @example * ```javascript * // Load all audio assets from IMG.LY's CDN * const sourceId = await engine.asset.addLocalAssetSourceFromJSONURI( * 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/content.json' * ); * console.log('Loaded asset source:', sourceId); // "ly.img.audio" * * // Load only assets matching one of the patterns * const sourceId2 = await engine.asset.addLocalAssetSourceFromJSONURI( * 'https://cdn.img.ly/assets/demo/v3/ly.img.image/content.json', * { matcher: ['image-portrait-*', 'image-landscape-*'] } * ); * ``` */ addLocalAssetSourceFromJSONURI(contentURI: string, options?: { matcher?: string[]; }): Promise; /** * Remove a registered asset source. * * This permanently removes the asset source and all its associated assets. * Any ongoing operations with this source will be cancelled. * * ```javascript * engine.asset.removeSource('asset-source-id'); * ``` * * @category Asset Source Management * @param id - The ID of the asset source to remove. */ removeSource(id: string): void; /** * Get all registered asset source IDs. * * ```javascript * engine.asset.findAllSources(); * ``` * * @category Asset Source Management * @returns A list with the IDs of all registered asset sources. */ findAllSources(): string[]; /** * Search for assets in a specific source with advanced filtering. * * Supports pagination, text search, tag filtering, grouping, and sorting options. * Results include asset metadata, thumbnails, and application context. * * ```javascript * const result = await engine.asset.findAssets('asset-source-id', { * page: 0, * perPage: 100 * }); * const asset = result.assets[0]; * ``` * * @category Asset Discovery * @param sourceId - The ID of the asset source. * @param query - Query options to filter and sort the search results. * @returns Promise resolving to paginated search results. */ findAssets(sourceId: string, query: AssetQueryData): Promise>; /** * Fetch a specific asset by ID from an asset source. * * ```javascript * const asset = await engine.asset.fetchAsset('asset-source-id', 'asset-id', { * locale: 'en-US' * }); * ``` * * @category Asset Discovery * @param sourceId - The ID of the asset source to search in. * @param assetId - The ID of the asset to fetch. * @param params - Query parameters including locale (optional). * @returns Promise resolving to the complete asset result, or undefined if not found. */ fetchAsset(sourceId: string, assetId: string, params?: Pick): Promise; /** * Get available asset groups from a source. * * Groups provide categorization for assets within a source, enabling filtered discovery. * * ```javascript * const groups = engine.asset.getGroups(customSource.id); * ``` * * @category Asset Information * @param id - The ID of the asset source. * @returns Promise resolving to list of available group names. */ getGroups(id: string): Promise; /** * Get supported MIME types for an asset source. * * Returns the file types that can be added to this source. An empty result means all MIME types are supported. * * ```javascript * const mimeTypes = engine.asset.getSupportedMimeTypes('asset-source-id'); * ``` * * @category Asset Information * @param sourceId - The ID of the asset source. * @returns Array of supported MIME type strings. */ getSupportedMimeTypes(sourceId: string): string[]; /** * Get attribution credits for an asset source. * * ```javascript * const credits = engine.asset.getCredits('asset-source-id'); * ``` * * @category Asset Information * @param sourceId - The ID of the asset source. * @returns The asset source's credits info consisting of a name and an optional URL. */ getCredits(sourceId: string): { name: string; url: string | undefined; } | undefined; /** * Get license information for an asset source. * * ```javascript * const license = engine.asset.getLicense('asset-source-id'); * ``` * * @category Asset Information * @param sourceId - The ID of the asset source. * @returns The asset source's license info consisting of a name and an optional URL. */ getLicense(sourceId: string): { name: string; url: string | undefined; } | undefined; /** * Check if an asset source supports asset management. * * Returns true if the source allows adding and removing assets dynamically, via 'Add File' and 'Delete' button on the UI. * This is typically true for local asset sources and false for remote sources. * * ```javascript * engine.asset.canManageAssets('asset-source-id'); * ``` * * @category Asset Information * @param sourceId - The ID of the asset source to check. * @returns True if the source supports asset management operations. */ canManageAssets(sourceId: string): boolean; /** * Add an asset to a local asset source. * * Only works with local asset sources that support asset management. * The asset will be validated against the source's supported MIME types. * * ```javascript * engine.asset.addAssetToSource('local-source', { * id: 'asset-id', * label: { * en: 'My Asset' * }, * meta: { * uri: 'https://example.com/asset.jpg', * mimeType: 'image/jpeg' * } * }); * ``` * * @category Asset Lifecycle * @param sourceId - The local asset source ID that the asset should be added to. * @param asset - The asset definition to add to the source. */ addAssetToSource(sourceId: string, asset: AssetDefinition): void; /** * Remove an asset from a local asset source. * * Only works with local asset sources that support asset management. * The asset will be permanently deleted from the source. * * ```javascript * engine.asset.removeAssetFromSource('local-source', 'asset-id'); * ``` * * @category Asset Lifecycle * @param sourceId - The id of the local asset source that currently contains the asset. * @param assetId - The id of the asset to be removed. */ removeAssetFromSource(sourceId: string, assetId: string): void; /** * Apply an asset to the active scene. * * Creates a new block configured according to the asset's properties and adds it to the scene. * The behavior can be customized by providing an `applyAsset` function when registering the asset source, * or by passing context options to guide middleware behavior. * * @example * ```javascript * // Default behavior * await engine.asset.apply('asset-source-id', assetResult.assets[0]); * ``` * * @example * ```javascript * // Foreground overlay placement * await engine.asset.apply('asset-source-id', assetResult.assets[0], { * clipType: 'overlay' * }); * ``` * * @category Asset Application * @param sourceId - The ID of the asset source. * @param assetResult - A single asset result from a `findAssets` query. * @param options - Optional configuration for asset application. * @returns Promise resolving to the created block ID, or undefined if no block was created. */ apply(sourceId: string, assetResult: AssetResult, options?: ApplyAssetOptions): Promise; /** * Apply an asset to a specific block. * * Modifies the target block's properties according to the asset's configuration. * The behavior can be customized by providing an `applyAssetToBlock` function when registering the asset source. * * ```javascript * await engine.asset.applyToBlock('asset-source-id', assetResult.assets[0]); * ``` * * @category Asset Application * @param sourceId - The ID of the asset source. * @param assetResult - A single asset result from a `findAssets` query. * @param block - The block to apply the asset to. */ applyToBlock(sourceId: string, assetResult: AssetResult, block: DesignBlockId): Promise; /** * Apply a specific asset property to the currently selected element. * * Allows applying individual properties (like colors, fonts, or effects) from an asset * without creating a new block. The behavior can be customized by providing an `applyAssetProperty` function. * * ```javascript * const asset = assetResult.assets[0]; * if (asset.payload && asset.payload.properties) { * for (const property of asset.payload.properties) { * await engine.asset.applyProperty('asset-source-id', asset, property); * } * } * ``` * * @category Asset Application * @param sourceId - The ID of the asset source. * @param assetResult - A single asset result from a `findAssets` query. * @param property - The specific asset property to apply. */ applyProperty(sourceId: string, assetResult: AssetResult, property: AssetProperty): Promise; /** * Apply an asset using the engine's default implementation. * * The default implementation already handles various different kinds of assets and acts as a good starting point. * * ```javascript * engine.asset.addSource({ * id: 'foobar', * async findAssets(queryData) { * return Promise.resolve({ * assets: [ * { * id: 'logo', * meta: { * uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', * } * } * ], * total: 1, * currentPage: queryData.page, * nextPage: undefined * }); * }, * async applyAsset(assetResult) { * return engine.asset.defaultApplyAsset(assetResult); * }, * }); * ``` * * @category Asset Application * @param assetResult - A single asset result from a `findAssets` query. * @returns Promise resolving to the created block ID, or undefined if no block was created. */ defaultApplyAsset(assetResult: AssetResult): Promise; /** * Apply an asset to a block using the engine's default implementation. * * The default implementation already handles various different kinds of assets and acts as a good starting point. * * ```javascript * engine.asset.addSource({ * id: 'foobar', * async findAssets(queryData) { * return Promise.resolve({ * assets: [ * { * id: 'logo', * meta: { * uri: 'https://img.ly/static/ubq_samples/imgly_logo.jpg', * } * } * ], * total: 1, * currentPage: queryData.page, * nextPage: undefined * }); * }, * async applyAssetToBlock(assetResult, block) { * engine.asset.defaultApplyAssetToBlock(assetResult, block); * }, * }); * ``` * * @category Asset Application * @param assetResult - A single asset result from a `findAssets` query. * @param block - The block to apply the asset to. */ defaultApplyAssetToBlock(assetResult: AssetResult, block: DesignBlockId): Promise; /** * Subscribe to asset source addition events. * * ```javascript * engine.asset.onAssetSourceAdded((sourceID) => { * console.log(`Added source: ${sourceID}`); * }); * ``` * * @category Event Subscriptions * @param callback - The function called whenever an asset source is added. * @returns A method to unsubscribe from the event. */ onAssetSourceAdded: (callback: (sourceID: string) => void) => (() => void); /** * Subscribe to asset source removal events. * * ```javascript * engine.asset.onAssetSourceRemoved((sourceID) => { * console.log(`Removed source: ${sourceID}`); * }); * ``` * * @category Event Subscriptions * @param callback - The function called whenever an asset source is removed. * @returns A method to unsubscribe from the event. */ onAssetSourceRemoved: (callback: (sourceID: string) => void) => (() => void); /** * Subscribe to asset source content change events. * * ```javascript * engine.asset.onAssetSourceUpdated((sourceID) => { * console.log(`Updated source: ${sourceID}`); * }); * ``` * * @category Event Subscriptions * @param callback - The function called whenever an asset source's contents are updated. * @returns A method to unsubscribe from the event. */ onAssetSourceUpdated: (callback: (sourceID: string) => void) => (() => void); /** * Notify the engine that an asset source's contents have changed. * * This triggers refresh of any UI components that display assets from this source * and notifies subscribers to the asset source update events. * * ```javascript * engine.asset.assetSourceContentsChanged('asset-source-id'); * ``` * * @category Asset Lifecycle * @param sourceID - The asset source whose contents changed. */ assetSourceContentsChanged(sourceID: string): void; } /** * Asset boolean property definition * @public */ export declare interface AssetBooleanProperty { property: string; type: 'Boolean'; value: boolean; defaultValue: boolean; } /** * Asset Color payload CMYK representation * @public */ export declare interface AssetCMYKColor { colorSpace: 'CMYK'; c: number; m: number; y: number; k: number; } /** * Asset Color payload * @public */ export declare type AssetColor = AssetRGBColor | AssetCMYKColor | AssetSpotColor; /** * Asset color property definition * @public */ export declare interface AssetColorProperty { property: string; type: 'Color'; value: Color; defaultValue: Color; } /** * Asset transform preset payload that snaps a block's frame to the intrinsic * aspect ratio of the block's content (e.g. the underlying image or video). * @public */ export declare interface AssetContentAspectRatio { type: 'ContentAspectRatio'; } /** * Definition of an asset used if an asset is added to an asset source. * @public */ export declare interface AssetDefinition extends Asset { /** * Label used to display in aria-label and as a tooltip. * Will be also searched in a query and should be localized */ label?: Record; /** * Tags for this asset. Can be used for filtering, but is also useful for * free-text search. Since the label is searched as well as used for tooltips * you do not want to overdo it, but still add things which are searched. * Thus, it should be localized similar to the `label`. */ tags?: Record; } /** * Asset enum property definition * @public */ export declare interface AssetEnumProperty { property: string; type: 'Enum'; value: string; defaultValue: string; options: string[]; } /** * Asset transform preset payload fixed aspect ratio * @public */ export declare interface AssetFixedAspectRatio { type: 'FixedAspectRatio'; width: number; height: number; } /** * Asset transform preset payload fixed size * @public */ export declare interface AssetFixedSize { type: 'FixedSize'; width: number; height: number; designUnit: SceneDesignUnit; } /** * Asset transform preset payload free aspect ratio * @public */ export declare interface AssetFreeAspectRatio { type: 'FreeAspectRatio'; } /** * An asset can be member of multiple groups. Groups have a semantic meaning * used to build and group UIs exploring the assets, e.g.sections in the * content library, or for things like topics in Unsplash for instance. * * Tags in comparison have are more loosely hold meaning used for extended * searching/filtering. * @public */ export declare type AssetGroups = string[]; /** * Generic asset information * @public */ export declare type AssetMetaData = { /** The mime type of this asset or the data behind the asset's uri. */ mimeType?: string; /** The type id of the design block that should be created from this asset. */ blockType?: string; fillType?: string; shapeType?: string; kind?: string; uri?: string; thumbUri?: string; previewUri?: string; sourceSet?: Source[]; filename?: string; vectorPath?: string; width?: number; height?: number; duration?: string; effectType?: EffectType; blurType?: BlurType; looping?: boolean; } & Record; /** * Asset number property definition * @public */ export declare interface AssetNumberProperty { property: string; type: 'Int' | 'Float' | 'Double'; value: number; defaultValue: number; min: number; max: number; step: number; } /** * Asset payload * @public */ export declare interface AssetPayload { color?: AssetColor; sourceSet?: Source[]; typeface?: Typeface; transformPreset?: AssetTransformPreset; properties?: AssetProperty[]; } /** * Asset property for payload * @public */ export declare type AssetProperty = AssetBooleanProperty | AssetColorProperty | AssetEnumProperty | AssetNumberProperty | AssetStringProperty; /** * Defines a request for querying assets * @public */ export declare interface AssetQueryData { /** A query string used for (fuzzy) searching of labels and tags */ query?: string; /** The current page queried for paginated views. */ page: number; /** * Tags are searched with the query parameter, but this search is fuzzy. * If one needs to get assets with exactly the tag (from a tag cloud or filter) * this query parameter should be used. */ tags?: string | string[]; /** Query only these groups */ groups?: AssetGroups; /** Filter out assets with this groups */ excludeGroups?: AssetGroups; /** * Choose the locale of the labels and tags for localized search and filtering. * For local asset sources, labels and tags are resolved using a fallback chain: * requested locale → "en" → first available entry → empty default. */ locale?: Locale; /** * The number of results queried. How many assets shall be returned regardless * of the total number of assets available. * * Together with `page` this can be used for pagination. */ perPage: number; /** * The order to sort by if the asset source supports sorting. * If set to None, the order is the same as the assets were added to the source. */ sortingOrder?: SortingOrder; /** * The key that identifies the meta data value to sort by or 'id' to sort by the asset ID. * If empty, the assets are sorted by the index. */ sortKey?: string; /** * Sort assets that are marked as active first. */ sortActiveFirst?: boolean; } /** * Single asset result of a query from the engine. * @public */ export declare interface AssetResult extends Asset { /** The locale of the label and tags */ locale?: Locale; /** The label of the result. Used for description and tooltips. */ label?: string; /** The tags of this asset. Used for filtering and free-text searching. */ tags?: string[]; /** If the asset is marked as active, i.e., used in a currently selected element. */ active?: boolean; /** Credits for the artist of the asset */ credits?: { name: string; url?: string; }; /** License for this asset. Overwrites the source license if present */ license?: { name: string; url?: string; }; /** UTM parameters for the links inside the credits */ utm?: { source?: string; medium?: string; }; } /** * Represents the credits for an asset result. * * The `AssetResultCredits` interface provides a set of properties that describe the credits * for an asset result, including the name and URL of the credits. * * Methods for working with the credits of asset results. * * @public */ export declare interface _AssetResultCredits { name: string; url: string; } /** * Represents the license for an asset result. * * The `AssetResultLicense` interface provides a set of properties that describe the license * for an asset result, including the name and URL of the license. * * Methods for working with the license of asset results. * * @public */ export declare interface _AssetResultLicense { name: string; url: string; } /** * Asset Color payload RGB representation * @public */ export declare interface AssetRGBColor { colorSpace: 'sRGB'; r: number; g: number; b: number; } /** * A source of assets * @public */ export declare interface AssetSource { /** The unique id of the API */ id: string; /** Find all asset for the given type and the provided query data. */ findAssets(queryData: AssetQueryData): Promise; /** Fetch an asset by id. */ fetchAsset?: (id: string, params?: Pick) => Promise; /** Return every available group */ getGroups?: () => Promise; /** Credits for the source/api */ credits?: { name: string; url?: string; }; /** General license for all asset from this source */ license?: { name: string; url?: string; }; /** * Can the source add and remove assets dynamically? If `false` * methods like `addAsset` and `removeAsset` will throw an * error. * * @deprecated Will be removed in v1.11. Use `canAdd` and `canRemove` in the asset library configuration */ canManageAssets?: boolean; /** * Apply the given asset result to the active scene. * You can override this with custom behavior. * @returns the id of a new block if one was created from the asset. */ applyAsset?: (asset: CompleteAssetResult) => Promise; /** * Apply the given asset result to the given block. * You can override this with custom behavior. */ applyAssetToBlock?: (asset: CompleteAssetResult, block: DesignBlockId) => Promise; /** * Apply a property of the given asset result to the active scene. * You can override this with custom behavior. */ applyAssetProperty?: (asset: CompleteAssetResult, property: AssetProperty) => Promise; /** * Adds the given asset to this source. Throws an error if the asset source * does not support adding assets. */ addAsset?(asset: AssetDefinition): void; /** * Removes the given asset from this source. */ removeAsset?(assetId: string): void; /** * Generates a list of supported mime types for this source. * * @returns a list of the mime types should be supported by this source */ getSupportedMimeTypes?(): string[] | undefined; } /** * Asset Color payload SpotColor representation * @public */ export declare interface AssetSpotColor { colorSpace: 'SpotColor'; name: string; externalReference: string; representation: AssetRGBColor | AssetCMYKColor; } /** * Return type of a `findAssets` query. * @public */ export declare interface AssetsQueryResult { /** The assets in the requested page */ assets: T[]; /** The current, requested page */ currentPage: number; /** The next page to query if it exists */ nextPage?: number; /** How many assets are there in total for the current query regardless of the page */ total: number; } /** * Asset string property definition * @public */ export declare interface AssetStringProperty { property: string; type: 'String'; value: string; defaultValue: string; } /** * Transform preset payload * @public */ export declare type AssetTransformPreset = AssetFixedAspectRatio | AssetFreeAspectRatio | AssetContentAspectRatio | AssetFixedSize; /** * An async-compatible URI resolver function. * * May return a plain string for synchronous resolution, or a `Promise` * for asynchronous resolution. The engine preserves synchronous behaviour when * a plain string is returned (important for call-sites that expect immediate * resolution). * @public */ export declare type AsyncURIResolver = (URI: string, defaultURIResolver: (URI: string) => string) => Promise | string; /** * Represents the options for exporting audio. * * Defines the possible options for exporting audio. * - 'mimeType': The MIME type of the output audio file. * - 'onProgress': A callback which reports on the progress of the export. * - 'timeOffset': The time offset in seconds relative to the target block. * - 'duration': The duration in seconds of the final audio. * - 'sampleRate': The sample rate of the exported audio. * - 'numberOfChannels': The number of channels of the exported audio. * - 'skipEncoding': Skip encoding (audio data will be returned immediately even if not compatible with target MIME type). * * @public */ export declare type AudioExportOptions = { /** * The MIME type of the output audio file. * * @defaultValue 'audio/wav' */ mimeType?: AudioMimeType; /** * A callback which reports on the progress of the export. */ onProgress?: (numberOfRenderedFrames: number, numberOfEncodedFrames: number, totalNumberOfFrames: number) => void; /** * The time offset in seconds relative to the target block. * * @defaultValue 0 */ timeOffset?: number; /** * The duration in seconds of the final audio. * * @defaultValue The duration of the block. */ duration?: number; /** * The sample rate of the exported audio. * * @defaultValue 48000 */ sampleRate?: number; /** * The number of channels of the exported audio. * * @defaultValue 2 */ numberOfChannels?: number; /** * Skip encoding (audio data will be returned immediately even if not compatible with target MIME type). * * @defaultValue false */ skipEncoding?: boolean; /** * An AbortSignal that can be used to cancel the audio export operation. */ abortSignal?: AbortSignal; }; /** * Options for configuring audio extraction from video operations. * @public */ export declare type AudioFromVideoOptions = { /** * If true, the audio block will have the same duration, trim length, and trim offset as the source video. * If false, the full audio track is extracted without trim settings. * @defaultValue true */ keepTrimSettings?: boolean; /** * If true, mutes the audio of the original video fill block. * @defaultValue true */ muteOriginalVideo?: boolean; }; /** * Represents the audio MIME types used in the editor. * * @categoryDescription Audio MIME Type * Defines the possible audio MIME types used in the editor. * - 'audio/wav': WAV audio format. * - 'audio/mp4': MP4 audio format. * * @public */ export declare type AudioMimeType = Extract; /** * Information about a single audio track from a video. * This interface provides comprehensive metadata about audio tracks, * including codec information, technical specifications, and track details. * @public */ export declare interface AudioTrackInfo { /** The codec string */ audioCodec: string; /** The number of audio channels */ channels: number; /** The audio sample rate */ sampleRate: number; /** Duration of the audio track in seconds */ audioDuration: number; /** The number of audio packets (matches the number of encoded chunks) */ numAudioPackets: number; /** The number of audio frames */ numAudioFrames: number; /** Optional track name/label if available in metadata */ trackName: string; /** Track index in the container */ trackIndex: number; /** Track language code (ISO 639-2T format: "und", "eng", "deu", etc.) */ language: string; } /** @public */ export declare type BlendMode = (typeof BlendModeValues)[number]; /** @public */ export declare const BlendModeValues: readonly ["PassThrough", "Normal", "Darken", "Multiply", "ColorBurn", "LinearBurn", "DarkenColor", "Lighten", "Screen", "ColorDodge", "LinearDodge", "LightenColor", "Overlay", "SoftLight", "HardLight", "VividLight", "LinearLight", "PinLight", "HardMix", "Difference", "Exclusion", "Subtract", "Divide", "Hue", "Saturation", "Color", "Luminosity"]; /** * Create, manipulate, and query the building blocks of your design. * * This is the primary interface for all block-level operations. Use it to manage the * entire lifecycle of blocks from creation and serialization to destruction. You can precisely * control a block's appearance by modifying its fills, strokes, and effects, or transform * its position, size, and rotation. The API also includes powerful features for managing * complex content like text and video, organizing blocks into groups and hierarchies, and * exporting final designs to various formats. * * @public * @showCategories * @categoryDescription Block Lifecycle * Manage the complete lifecycle: create, find, duplicate, destroy, and serialize blocks. * @categoryDescription Block Export * Export blocks to various formats like images, videos, and audio. * @categoryDescription Block Fills * Create, configure, and manage block fills, including solid colors, gradients, and images. * @categoryDescription Block Video * Manage time-based media like video and audio, including playback, timing, and controls. * @categoryDescription Block State * Query the intrinsic state or identity of a block, such as its name, UUID, or lock status. * @categoryDescription Block Kind * Get and set a block's 'kind' identifier for custom categorization. * @categoryDescription Block Selection & Visibility * Manage a block's selection state and visibility on the canvas. * @categoryDescription Block Events * Subscribe to user actions and state changes related to blocks. * @categoryDescription Block Groups * Create and manage groups of blocks. * @categoryDescription Block Boolean Operations * Combine multiple blocks into a single new block using boolean path operations. * @categoryDescription Block Exploration * Find blocks by properties like name, type, or kind. * @categoryDescription Block Shapes * Create and configure shape blocks and geometric forms. * @categoryDescription Block Appearance * Control general appearance, including opacity, blend modes, flipping, and other visual properties. * @categoryDescription Block Layout * Structure designs by positioning, sizing, layering, aligning, and distributing blocks. * @categoryDescription Block Hierarchies * Manage parent-child relationships and the scene graph structure. * @categoryDescription Block Utils * Check block capabilities like alignability or distributability. * @categoryDescription Block Properties * Get and set any block property by name using low-level, generic accessors. * @categoryDescription Block Crop * Crop, scale, translate, and transform block content. * @categoryDescription Block Strokes * Control stroke appearance, including color, width, style, and position. * @categoryDescription Block Drop Shadow * Configure drop shadow effects, including blur, color, and offset. * @categoryDescription Block Effects * Create, manage, and apply various visual effects to blocks. * @categoryDescription Block Cutout * Create cutout operations and path-based modifications. * @categoryDescription Block Text * Create, edit, and style text content. * @categoryDescription Block Blur * Apply and configure blur effects on blocks. * @categoryDescription Block Placeholder * Manage placeholder functionality, controls, and behavior. * @categoryDescription Block Scopes * Manage permissions and capabilities per block. * @categoryDescription Block Animations * Create and manage animations and timeline-based effects. * @categoryDescription Helper * Convenient high-level functions that combine multiple operations into single, easy-to-use methods for common tasks like adding media, applying effects, and positioning blocks. */ export declare class BlockAPI { #private; /** * Exports a design block to a Blob. * * Performs an internal update to resolve the final layout for the blocks. * * @category Block Export * @param handle - The design block element to export. * @param options - The options for exporting the block type, including mime type and export settings. * @returns A promise that resolves with the exported image or is rejected with an error. */ export(handle: DesignBlockId, options?: ExportOptions): Promise; /** * Exports a design block to a Blob. * * Performs an internal update to resolve the final layout for the blocks. * * @category Block Export * @param handle - The design block element to export. * @param mimeType - The mime type of the output file. * @param options - The options for exporting the block type * @returns A promise that resolves with the exported image or is rejected with an error. * @deprecated Use the new `export` signature instead * @example * ```typescript * // Before migration * const blob = await cesdk.block.export(blockId, MimeType.Png, { pngCompressionLevel: 5 }) * // After migration * const blob = await cesdk.block.export(blockId, { mimeType: 'image/png', pngCompressionLevel: 5 }) * ``` */ export(handle: DesignBlockId, mimeType?: ExportOptions['mimeType'], options?: Omit): Promise; /** * Extracts the dominant colors from the rendered appearance of a block. * * Performs an internal update to resolve the final layout for the block. Will not * complete as long as assets are in a pending state; asset loading progresses during * engine updates. Crops, color adjustments, and effects applied to the block are * reflected in the returned palette. Fully or mostly transparent pixels are excluded * from the analysis. * * @category Block Analysis * @param handle - The design block element to analyze. Must be attached to a scene * and render visible content. * @param options - See `DominantColorsOptions`. * @returns A promise that resolves with the dominant colors sorted by weight, descending. */ getDominantColors(handle: DesignBlockId, options?: DominantColorsOptions): Promise; /** * Exports a design block and a color mask to two separate Blobs. * * Performs an internal update to resolve the final layout for the blocks. * * @category Block Export * @param handle - The design block element to export. * @param maskColorR - The red component of the special color mask color. * @param maskColorG - The green component of the special color mask color. * @param maskColorB - The blue component of the special color mask color. * @param options - The options for exporting the block type * @returns A promise that resolves with an array of the exported image and mask or is rejected with an error. */ exportWithColorMask(handle: DesignBlockId, maskColorR: number, maskColorG: number, maskColorB: number, options?: ExportOptions): Promise; /** * Exports a design block and a color mask to two separate Blobs. * * Performs an internal update to resolve the final layout for the blocks. * Removes all pixels that exactly match the given RGB color and replaces them with transparency. * The output includes two files: the masked image and the mask itself. * * @category Block Export * @param handle - The design block element to export. * @param mimeType - The mime type of the output file. * @param maskColorR - The red component of the special color mask color. * @param maskColorG - The green component of the special color mask color. * @param maskColorB - The blue component of the special color mask color. * @param options - The options for exporting the block type * @returns A promise that resolves with an array of the exported image and mask or is rejected with an error. * @deprecated Use the new `exportWithColorMask` signature instead * * @example * ```typescript * // Before migration * const blob = await cesdk.block.exportWithColorMask( * blockId, * MimeType.Png, * 0.5, * 0, * 0, * { * pngCompressionLevel: 5 * } * ); * // After migration * const blob = await cesdk.block.exportWithColorMask( * blockId, * 0.5, * 0, * 0, * { * mimeType: 'image/png', * pngCompressionLevel: 5 * } * ); * ``` */ exportWithColorMask(handle: DesignBlockId, mimeType: ExportOptions['mimeType'] | undefined, maskColorR: number, maskColorG: number, maskColorB: number, options?: Omit): Promise; /** * Exports a design block as a video file. * * Note: The export will run across multiple iterations of the update loop. In each iteration a frame is scheduled for encoding. * * @category Block Export * @param handle - The design block element to export. Currently, only page blocks are supported. * @param options - The options for exporting the video, including mime type, h264 profile, level, bitrate, time offset, duration, framerate, target width and height. * @returns A promise that resolves with a video blob or is rejected with an error. * @example * ```typescript * const page = engine.block.create('page'); * // Set up a progress tracking function * const progressTracker = (renderedFrames, encodedFrames, totalFrames) => { * console.log(`Progress: ${Math.round((encodedFrames / totalFrames) * 100)}%`); * }; * const videoOptions = { framerate: 30, duration: 5 }; * const videoBlob = await engine.block.exportVideo(page, MimeType.Mp4, progressTracker, videoOptions); * ``` */ exportVideo(handle: DesignBlockId, options?: VideoExportOptions): Promise; /** * Exports a design block as a video file. * * Note: The export will run across multiple iterations of the update loop. In each iteration a frame is scheduled for encoding. * * @category Block Export * @param handle - The design block element to export. Currently, only page blocks are supported. * @param mimeType - The MIME type of the output video file. * @param progressCallback - A callback which reports on the progress of the export. * @param options - The options for exporting the video, including h264 profile, level, bitrate, time offset, duration, framerate, target width and height. * @returns A promise that resolves with a video blob or is rejected with an error. * @deprecated Use the new `exportVideo` signature instead * * @example * ```typescript * // Before migration * const blob = await cesdk.block.exportVideo(blockId, 'video/mp4', handleProgress, { * targetWidth: 1920, * targetHeight: 1080, * }) * // After migration * const blob = await cesdk.block.exportVideo(blockId, { * mimeType: 'video/mp4', * progressCallback: handleProgress, * targetWidth: 1920, * targetHeight: 1080, * }) * ``` */ exportVideo(handle: DesignBlockId, mimeType?: VideoExportOptions['mimeType'], progressCallback?: VideoExportOptions['onProgress'], options?: Omit): Promise; /** * Exports a design block as an audio file. * * @category Block Export * @param handle - The design block element to export. Currently, only audio blocks are supported. * @param options - The options for exporting the audio, including mime type, progress callback, and export settings. * @returns A promise that resolves with an audio blob or is rejected with an error. * @experimental This API is experimental and may change or be removed in future versions. * @example * ```typescript * const audioBlock = engine.block.create('audio'); * // Set up a progress tracking function * const progressTracker = (renderedFrames, encodedFrames, totalFrames) => { * console.log(`Audio export progress: ${Math.round((encodedFrames / totalFrames) * 100)}%`); * }; * const audioOptions = { duration: 10 }; * const audioBlob = await engine.block.exportAudio(audioBlock, MimeType.Wav, progressTracker, audioOptions); * ``` */ exportAudio(handle: DesignBlockId, options?: AudioExportOptions): Promise; /** * Loads blocks from a serialized string. * * The blocks are not attached by default and won't be visible until attached to a page or the scene. * The UUID of the loaded blocks is replaced with a new one. * * @category Block Lifecycle * @param content - A string representing the given blocks. * @returns A promise that resolves with a list of handles representing the found blocks or an error. * @example * ```typescript * const serializedBlocks = await engine.block.saveToString([pageBlockId]); * // Later, load those blocks * const loadedBlocks = await engine.block.loadFromString(serializedBlocks); * // Attach the first loaded block to the scene * engine.block.appendChild(sceneBlockId, loadedBlocks[0]); * ``` */ loadFromString(content: string): Promise; /** * Loads blocks from a remote archive URL. * * The URL should be that of a file previously saved with `block.saveToArchive`. * The blocks are not attached by default and won't be visible until attached to a page or the scene. * The UUID of the loaded blocks is replaced with a new one. * * @category Block Lifecycle * @param url - The URL of the blocks archive file. * @returns A promise that resolves with a list of handles representing the found blocks or an error. * @example * ```typescript * // Load blocks from a remote archive * const loadedBlocks = await engine.block.loadFromArchiveURL('https://example.com/blocks.zip'); * // Attach the first loaded block to the scene * engine.block.appendChild(sceneBlockId, loadedBlocks[0]); * ``` */ loadFromArchiveURL(url: string): Promise; /** * Loads blocks from a URL. * * The URL should point to a blocks file within an unzipped archive directory previously saved with `block.saveToArchive`. * The blocks are not attached by default and won't be visible until attached to a page or the scene. * The UUID of the loaded blocks is replaced with a new one. * * @category Block Lifecycle * @param url - The URL to the blocks file * @returns A promise that resolves with a list of block handles * @example * ```typescript * // Load blocks from a URL * const loadedBlocks = await engine.block.loadFromURL('https://example.com/blocks.blocks'); * // Attach the first loaded block to the scene * engine.block.appendChild(sceneBlockId, loadedBlocks[0]); * ``` */ loadFromURL(url: string): Promise; /** * Saves the given blocks to a serialized string. * * If a page with multiple children is given, the entire hierarchy is saved. * * @category Block Lifecycle * @param blocks - The blocks to save. * @param allowedResourceSchemes - The resource schemes to allow in the saved string. Defaults to ['buffer', 'http', 'https']. * @param onDisallowedResourceScheme - An optional callback that is called for each resource URL that has a scheme absent from * `resourceSchemesAllowed`. The `url` parameter is the resource URL and the `dataHash` parameter is the hash of the * resource's data. The callback should return a new URL for the resource, which will be used in the serialized * scene. The callback is expected to return the original URL if no persistence is needed. * @returns A promise that resolves to a string representing the blocks or an error. * @example * ```typescript * // Create a page with a text element * const page = engine.block.create('page'); * const text = engine.block.create('text'); * engine.block.appendChild(page, text); * * // Save the whole page hierarchy to a string * const serialized = await engine.block.saveToString([page]); * ``` */ saveToString(blocks: DesignBlockId[], allowedResourceSchemes?: string[], onDisallowedResourceScheme?: (url: string, dataHash: string) => Promise): Promise; /** * Saves the given blocks and their assets to a zip archive. * * The archive contains all assets that were accessible when this function was called. * Blocks in the archived scene reference assets relative to the location of the scene file. * * @category Block Lifecycle * @param blocks - The blocks to save. * @returns A promise that resolves with a Blob on success or an error on failure. */ saveToArchive(blocks: DesignBlockId[]): Promise; /** * Creates a new block of a given type. * * ```javascript * // Create a new text block * const text = engine.block.create('text'); * const page = engine.scene.getCurrentPage(); * engine.block.appendChild(page, text); * * // Create a new image block * const image = engine.block.create('graphic'); * engine.block.setShape(image, engine.block.createShape('rect')); * const imageFill = engine.block.createFill('image'); * engine.block.setFill(image, imageFill); * engine.block.setString(imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg'); * engine.block.appendChild(page, image); * * // Create a new video block * const video = engine.block.create('graphic'); * engine.block.setShape(video, engine.block.createShape('rect')); * const videoFill = engine.block.createFill('video'); * engine.block.setString(videoFill, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'); * engine.block.setFill(video, videoFill); * engine.block.appendChild(page, video); * ``` * * @category Block Lifecycle * @param type - The type of the block that shall be created. * @returns The created block's handle. */ create(type: DesignBlockType): DesignBlockId; /** * Creates a new fill block. * * ```javascript * const solidColoFill = engine.block.createFill('color'); * // Longhand fill types are also supported * const imageFill = engine.block.createFill('//ly.img.ubq/fill/image'); * ``` * * @category Block Fills * @param type - The type of the fill object that shall be created. * @returns The created fill's handle. */ createFill(type: FillType): DesignBlockId; /** * Gets the number of available audio tracks in a video fill block. * * ```javascript * const trackCount = engine.block.getAudioTrackCountFromVideo(videoBlock); * console.log(`Video has ${trackCount} audio tracks`); * ``` * * @category Block Audio * @param videoFillBlock - The video fill block to examine. * @returns The number of audio tracks. * @throws Will throw an error if the block is not a video fill or has no audio. */ getAudioTrackCountFromVideo(videoFillBlock: DesignBlockId): number; /** * Creates a new audio block by extracting a specific audio track from a video fill block. * * ```javascript * // Extract the first audio track (usually the main mix) with trim settings * const audioBlock = engine.block.createAudioFromVideo(videoFillBlock, 0); * * // Extract full audio track without trim settings * const audioBlock = engine.block.createAudioFromVideo(videoFillBlock, 0, { keepTrimSettings: false }); * * // Extract a specific track, keep trim settings, and mute the original video * const dialogueTrack = engine.block.createAudioFromVideo(videoFillBlock, 1, { keepTrimSettings: true, muteOriginalVideo: true }); * ``` * * @category Block Audio * @param videoFillBlock - The video fill block to extract audio from. * @param trackIndex - The index of the audio track to extract (0-based). * @param options - Options for the audio extraction operation. * @returns The handle of the newly created audio block with extracted audio from the specified track. * @throws Will throw an error if the track index is invalid or the block has no audio. */ createAudioFromVideo(videoFillBlock: DesignBlockId, trackIndex: number, options?: AudioFromVideoOptions): DesignBlockId; /** * Creates multiple audio blocks by extracting all audio tracks from a video fill block. * * ```javascript * // Extract all audio tracks from a video with trim settings * const audioBlocks = engine.block.createAudiosFromVideo(videoFillBlock); * console.log(`Created ${audioBlocks.length} audio blocks`); * * // Extract all tracks without trim settings (full audio) * const audioBlocks = engine.block.createAudiosFromVideo(videoFillBlock, { keepTrimSettings: false }); * * // Extract all tracks with trim settings and mute the original video * const audioBlocks = engine.block.createAudiosFromVideo(videoFillBlock, { keepTrimSettings: true, muteOriginalVideo: true }); * ``` * * @category Block Audio * @param videoFillBlock - The video fill block to extract audio from. * @param options - Options for the audio extraction operation. * @returns An array of handles for the newly created audio blocks, one per track. * @throws Will throw an error if the block has no audio or extraction fails. */ createAudiosFromVideo(videoFillBlock: DesignBlockId, options?: AudioFromVideoOptions): DesignBlockId[]; /** * Gets information about all audio tracks from a video fill block. * * ```javascript * // Get information about all audio tracks * const trackInfos = engine.block.getAudioInfoFromVideo(videoFillBlock); * console.log(`Video has ${trackInfos.length} audio tracks`); * * // Display track information * trackInfos.forEach((track, index) => { * console.log(`Track ${index}: ${track.channels} channels, ${track.sampleRate}Hz, ${track.language}`); * }); * * // Use track info to create audio blocks selectively * const englishTracks = trackInfos.filter(track => track.language === 'eng'); * const audioBlocks = englishTracks.map(track => * engine.block.createAudioFromVideo(videoFillBlock, track.trackIndex) * ); * ``` * * @category Block Audio * @param videoFillBlock - The video fill block to analyze for audio track information. * @returns An array containing information about each audio track. * @throws Will throw an error if the block is not a video fill or has no audio. */ getAudioInfoFromVideo(videoFillBlock: DesignBlockId): AudioTrackInfo[]; /** * Creates new caption blocks from an SRT or VTT file URI. * * @category Block Video * @param uri - The URI for the captions file to load. Supported file formats are: SRT and VTT. * @returns A promise that resolves with a list of the created caption blocks. */ createCaptionsFromURI(uri: string): Promise; /** * Gets the longhand type of a given block. * * @category Block State * @param id - The block to query. * @returns The block's type. */ getType(id: DesignBlockId): ObjectTypeLonghand; /** * Gets the kind of a given block. * * ```javascript * const kind = engine.block.getKind(block); * ``` * * @category Block Kind * @param id - The block to query. * @returns The block's kind. */ getKind(id: DesignBlockId): string; /** * Sets the kind of a given block, a custom string for categorization of blocks. * * ```javascript * engine.block.setKind(text, 'title'); * ``` * * @category Block Kind * @param id - The block whose kind should be changed. * @param kind - The new kind. */ setKind(id: DesignBlockId, kind: string): void; /** * Selects a block, deselecting all others. * * @category Block Selection & Visibility * @param id - The block to be selected. */ select(id: DesignBlockId): void; /** * Sets the selection state of a block. * * @category Block Selection & Visibility * @param id - The block to query. * @param selected - Whether or not the block should be selected. */ setSelected(id: DesignBlockId, selected: boolean): void; /** * Gets the selection state of a block. * * @category Block Selection & Visibility * @param id - The block to query. * @returns True if the block is selected, false otherwise. */ isSelected(id: DesignBlockId): boolean; /** * Finds all currently selected blocks. * * @category Block Selection & Visibility * @returns An array of block ids. */ findAllSelected(): DesignBlockId[]; /** * Subscribes to changes in the selection. * * @category Block Events * @param callback - This function is called at the end of the engine update if the selection has changed. * @returns A method to unsubscribe. */ onSelectionChanged: (callback: () => void) => (() => void); /** * Subscribes to block click events. * * @category Block 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); /** * Checks if a set of blocks can be grouped. * * A scene block or a block that is already part of a group cannot be grouped. * * ```javascript * const groupable = engine.block.isGroupable([block1, block2]) * ``` * * @category Block Groups * @param ids - An array of block ids. * @returns Whether the blocks can be grouped together. */ isGroupable(ids: DesignBlockId[]): boolean; /** * Groups multiple blocks into a new group block. * * ```javascript * if (engine.block.isGroupable([block1, block2])) { * const group = engine.block.group(block1, block2]); * } * ``` * * @category Block Groups * @param ids - A non-empty array of block ids. * @returns The block id of the created group. */ group(ids: DesignBlockId[]): DesignBlockId; /** * Ungroups a group block, releasing its children. * * ```javascript * engine.block.ungroup(group); * ``` * * @category Block Groups * @param id - The group id from a previous call to `group`. */ ungroup(id: DesignBlockId): void; /** * Changes selection to a block within a selected group. * * Nothing happens if the target is not a group. * * ```javascript * engine.block.enterGroup(group); * ``` * * @category Block Groups * @param id - The group id from a previous call to `group`. */ enterGroup(id: DesignBlockId): void; /** * Changes selection from a block to its parent group. * * Nothing happens if the block is not part of a group. * * ```javascript * engine.block.exitGroup(member1); * ``` * * @category Block Groups * @param id - A block id. */ exitGroup(id: DesignBlockId): void; /** * Checks if a set of blocks can be combined using a boolean operation. * * Only graphics blocks and text blocks can be combined. * All blocks must have the "lifecycle/duplicate" scope enabled. * * @category Block Boolean Operations * @param ids - An array of block ids. * @returns Whether the blocks can be combined. */ isCombinable(ids: DesignBlockId[]): boolean; /** * Performs a boolean operation on a set of blocks. * * All blocks must be combinable. See `isCombinable`. * The parent, fill and sort order of the new block is that of the prioritized block. * * @category Block Boolean Operations * @param ids - The blocks to combine. They will be destroyed if "lifecycle/destroy" scope is enabled. * @param op - The boolean operation to perform. * @returns The newly created block or an error. */ combine(ids: DesignBlockId[], op: BooleanOperation): DesignBlockId; /** * Sets the name of a block. * * @category Block State * @param id - The block to update. * @param name - The name to set. */ setName(id: DesignBlockId, name: string): void; /** * Gets the name of a block. * * @category Block State * @param id - The block to query. * @returns The block's name. */ getName(id: DesignBlockId): string; /** * Gets the unique universal identifier (UUID) of a block. * * @category Block State * @param id - The block to query. * @returns The block's UUID. */ getUUID(id: DesignBlockId): string; /** * Finds all blocks with a given name. * * @category Block Exploration * @param name - The name to search for. * @returns A list of block ids. */ findByName(name: string): DesignBlockId[]; /** * Finds all blocks with a given type. * * @category Block Exploration * @param type - The type to search for. * @returns A list of block ids. */ findByType(type: ObjectType): DesignBlockId[]; /** * Finds all blocks with a given kind. * * ```javascript * const allTitles = engine.block.findByKind('title'); * ``` * * @category Block Exploration * @param kind - The kind to search for. * @returns A list of block ids. */ findByKind(kind: string): DesignBlockId[]; /** * Finds all blocks known to the engine. * * @category Block Exploration * @returns A list of block ids. */ findAll(): DesignBlockId[]; /** * Finds all placeholder blocks in the current scene. * * @category Block Exploration * @returns A list of block ids. */ findAllPlaceholders(): DesignBlockId[]; /** * Finds all blocks that are not attached to any scene. * * A block is considered unused when it has no path to a scene (no scene * reference and no ancestor that belongs to a scene) and is not itself a * scene. Generated blocks and render blocks (fills, effects, shapes, blurs) * are excluded, matching the behaviour of {@link BlockAPI.findAll}. * * This is useful for cleanup workflows and for filtering the URIs returned * by {@link EditorAPI.findAllMediaURIs} before relocating resources. * * @category Block Exploration * @returns A list of block ids that are not attached to any scene. */ findAllUnused(): DesignBlockId[]; /** * Creates a new shape block of a given type. * * ```javascript * const star = engine.block.createShape('star'); * // Longhand shape types are also supported * const rect = engine.block.createShape('//ly.img.ubq/shape/rect'); * ``` * * @category Block Shapes * @param type - The type of the shape object that shall be created. * @returns The created shape's handle. */ createShape(type: ShapeType): DesignBlockId; /** * Checks if a block has a shape property. * * @category Block Shapes * @param id - The block to query. * @returns true, if the block has a shape property, an error otherwise. * @deprecated Use supportsShape instead. */ hasShape(id: DesignBlockId): boolean; /** * Checks if a block supports having a shape. * * @category Block Shapes * @param id - The block to query. * @returns true, if the block has a shape property, an error otherwise. */ supportsShape(id: DesignBlockId): boolean; /** * Gets the shape block attached to a given block. * * @category Block Shapes * @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 shape block for a given block. * * Note that the previous shape block is not destroyed automatically. * The new shape is disconnected from its previously attached block. * * @category Block Shapes * @param id - The block whose shape should be changed. * @param shape - The new shape. */ setShape(id: DesignBlockId, shape: DesignBlockId): void; /** * Gets the visibility state of a block. * * @category Block Selection & Visibility * @param id - The block to query. * @returns True if visible, false otherwise. */ isVisible(id: DesignBlockId): boolean; /** * Sets the visibility state of a block. * * @category Block Selection & Visibility * @param id - The block to update. * @param visible - Whether the block shall be visible. */ setVisible(id: DesignBlockId, visible: boolean): void; /** * Gets the clipped state of a block. * * If true, the block should clip its contents to its frame. * * @category Block Appearance * @param id - The block to query. * @returns True if clipped, false otherwise. */ isClipped(id: DesignBlockId): boolean; /** * Sets the clipped state of a block. * * @category Block Appearance * @param id - The block to update. * @param clipped - Whether the block should clips its contents to its frame. */ setClipped(id: DesignBlockId, clipped: boolean): void; /** * Gets the transform-locked state of a block. * * If true, the block's transform can't be changed. * * @category Block Layout * @param id - The block to query. * @returns True if transform locked, false otherwise. */ isTransformLocked(id: DesignBlockId): boolean; /** * Sets the transform-locked state of a block. * * @category Block Layout * @param id - The block to update. * @param locked - Whether the block's transform should be locked. */ setTransformLocked(id: DesignBlockId, locked: boolean): void; /** * Gets the X position of a block. * * @category Block Layout * @param id - The block to query. * @returns The value of the x position. */ getPositionX(id: DesignBlockId): number; /** * Gets the mode for the block's X position. * * @category Block Layout * @param id - The block to query. * @returns The current mode for the x position: 'Absolute' or 'Percent'. */ getPositionXMode(id: DesignBlockId): PositionXMode; /** * Gets the Y position of a block. * * @category Block Layout * @param id - The block to query. * @returns The value of the y position. */ getPositionY(id: DesignBlockId): number; /** * Gets the mode for the block's Y position. * * @category Block Layout * @param id - The block to query. * @returns The current mode for the y position: 'Absolute' or 'Percent'. */ getPositionYMode(id: DesignBlockId): PositionYMode; /** * Sets the X position of a block. * * The position refers to the block's local space, relative to its parent with the origin at the top left. * * ```javascript * engine.block.setPositionX(block, 0.25); * ``` * * @category Block Layout * @param id - The block to update. * @param value - The value of the x position. */ setPositionX(id: DesignBlockId, value: number): void; /** * Sets the mode for the block's X position. * * ```javascript * engine.block.setPositionXMode(block, 'Percent'); * ``` * * @category Block Layout * @param id - The block to update. * @param mode - The x position mode: 'Absolute' or 'Percent'. */ setPositionXMode(id: DesignBlockId, mode: PositionXMode): void; /** * Sets the Y position of a block. * * The position refers to the block's local space, relative to its parent with the origin at the top left. * * ```javascript * engine.block.setPositionY(block, 0.25); * ``` * * @category Block Layout * @param id - The block to update. * @param value - The value of the y position. */ setPositionY(id: DesignBlockId, value: number): void; /** * Sets the mode for the block's Y position. * * ```javascript * engine.block.setPositionYMode(block, 'Absolute'); * ``` * * @category Block Layout * @param id - The block to update. * @param mode - The y position mode: 'Absolute' or 'Percent'. */ setPositionYMode(id: DesignBlockId, mode: PositionYMode): void; /** * Sets a block to always be rendered on top of its siblings. * * If true, this block's sorting order is automatically adjusted to be higher than all other siblings without this property. * * @category Block Layout * @param id - the block to update. * @param enabled - whether the block shall be always-on-top. */ setAlwaysOnTop(id: DesignBlockId, enabled: boolean): void; /** * Sets a block to always be rendered below its siblings. * * If true, this block's sorting order is automatically adjusted to be lower than all other siblings without this property. * * @category Block Layout * @param id - the block to update. * @param enabled - whether the block shall always be below its siblings. */ setAlwaysOnBottom(id: DesignBlockId, enabled: boolean): void; /** * Checks if a block is set to always be on top. * * @category Block Layout * @param id - the block to query. * @returns true if the block is set to be always-on-top, false otherwise. */ isAlwaysOnTop(id: DesignBlockId): boolean; /** * Checks if a block is set to always be on the bottom. * * @category Block Layout * @param id - the block to query. * @returns true if the block is set to be always-on-bottom, false otherwise. */ isAlwaysOnBottom(id: DesignBlockId): boolean; /** * Brings a block to the front of its siblings. * * Updates the sorting order so that the given block has the highest sorting order. * * @category Block Layout * @param id - The id of the block to bring to the front. */ bringToFront(id: DesignBlockId): void; /** * Sends a block to the back of its siblings. * * Updates the sorting order so that the given block has the lowest sorting order. * * @category Block Layout * @param id - The id of the block to send to the back. */ sendToBack(id: DesignBlockId): void; /** * Brings a block one layer forward. * * Updates the sorting order to be higher than its next sibling. * * @category Block Layout * @param id - The id of the block to bring forward. */ bringForward(id: DesignBlockId): void; /** * Sends a block one layer backward. * * Updates the sorting order to be lower than its previous sibling. * * @category Block Layout * @param id - The id of the block to send backward. */ sendBackward(id: DesignBlockId): void; /** * Gets the rotation of a block in radians. * * @category Block Layout * @param id - The block to query. * @returns The block's rotation around its center in radians. */ getRotation(id: DesignBlockId): number; /** * Sets the rotation of a block in radians. * * Rotation is applied around the block's center. * * @category Block Layout * @param id - The block to update. * @param radians - The new rotation in radians. */ setRotation(id: DesignBlockId, radians: number): void; /** * Gets the horizontal flip state of a block. * * @category Block Appearance * @param id - The block to query. * @returns A boolean indicating whether the block is flipped horizontally. */ getFlipHorizontal(id: DesignBlockId): boolean; /** * Gets the vertical flip state of a block. * * @category Block Appearance * @param id - The block to query. * @returns A boolean indicating whether the block is flipped vertically. */ getFlipVertical(id: DesignBlockId): boolean; /** * Sets the horizontal flip state of a block. * * @category Block Appearance * @param id - The block to update. * @param flip - If the flip should be enabled. */ setFlipHorizontal(id: DesignBlockId, flip: boolean): void; /** * Sets the vertical flip state of a block. * * @category Block Appearance * @param id - The block to update. * @param flip - If the flip should be enabled. */ setFlipVertical(id: DesignBlockId, flip: boolean): void; /** * Checks if a block supports content fill modes. * * @category Block Fills * @param id - The block to query. * @returns true, if the block has a content fill mode. * @deprecated Use supportsContentFillMode instead. */ hasContentFillMode(id: DesignBlockId): boolean; /** * Checks if a block supports content fill modes. * * @category Block Fills * @param id - The block to query. * @returns true, if the block has a content fill mode. */ supportsContentFillMode(id: DesignBlockId): boolean; /** * Gets the width of a block in the current width mode. * * ```javascript * const width = engine.block.getWidth(block); * ``` * * @category Block Layout * @param id - The block to query. * @returns The value of the block's width. */ getWidth(id: DesignBlockId): number; /** * Gets the mode for the block's width. * * ```javascript * const widthMode = engine.block.getWidthMode(block); * ``` * * @category Block Layout * @param id - The block to query. * @returns The current mode for the width: 'Absolute', 'Percent' or 'Auto'. */ getWidthMode(id: DesignBlockId): WidthMode; /** * Gets the height of a block in the current height mode. * * ```javascript * const height = engine.block.getHeight(block); * ``` * * @category Block Layout * @param id - The block to query. * @returns The value of the block's height. */ getHeight(id: DesignBlockId): number; /** * Gets the mode for the block's height. * * ```javascript * const heightMode = engine.block.getHeightMode(block); * ``` * * @category Block Layout * @param id - The block to query. * @returns The current mode for the height: 'Absolute', 'Percent' or 'Auto'. */ getHeightMode(id: DesignBlockId): HeightMode; /** * Update a block's size. * * @category Helper * @param id - The block to update. * @param width - The new width of the block. * @param height - The new height of the block. * @param options - Optional parameters for the size. Properties: * - `maintainCrop` - Whether or not the crop values, if available, should be automatically adjusted. * - `sizeMode` - The size mode: Absolute, Percent or Auto. */ setSize(id: DesignBlockId, width: number, height: number, options?: { maintainCrop?: boolean; sizeMode?: SizeMode; }): void; /** * Update a block's position. * * @category Helper * @param id - The block to update. * @param x - The new x position of the block. * @param y - The new y position of the block. * @param options - Optional parameters for the position. Properties: * - `positionMode` - The position mode: absolute, percent or undefined. */ setPosition(id: DesignBlockId, x: number, y: number, options?: { positionMode?: PositionMode; }): void; /** * Sets the width of a block in the current width mode. * * If the crop is maintained, the crop values will be automatically adjusted. * * ```javascript * engine.block.setWidth(block, 2.5, true); * ``` * * @category Block Layout * @param id - The block to update. * @param value - The new width of the block. * @param maintainCrop - Whether or not the crop values, if available, should be automatically adjusted. */ setWidth(id: DesignBlockId, value: number, maintainCrop?: boolean): void; /** * Sets the mode for the block's width. * * ```javascript * engine.block.setWidthMode(block, 'Percent'); * ``` * * @category Block Layout * @param id - The block to update. * @param mode - The width mode: 'Absolute', 'Percent' or 'Auto'. */ setWidthMode(id: DesignBlockId, mode: WidthMode): void; /** * Sets the height of a block in the current height mode. * * If the crop is maintained, the crop values will be automatically adjusted. * * ```javascript * engine.block.setHeight(block, 0.5); * engine.block.setHeight(block, 2.5, true); * ``` * * @category Block Layout * @param id - The block to update. * @param value - The new height of the block. * @param maintainCrop - Whether or not the crop values, if available, should be automatically adjusted. */ setHeight(id: DesignBlockId, value: number, maintainCrop?: boolean): void; /** * Sets the mode for the block's height. * * ```javascript * engine.block.setHeightMode(block, 'Percent'); * ``` * * @category Block Layout * @param id - The block to update. * @param mode - The height mode: 'Absolute', 'Percent' or 'Auto'. */ setHeightMode(id: DesignBlockId, mode: HeightMode): void; /** * Gets the final calculated X position of a block's frame. * * The position is only available after an internal update loop. * * ```javascript * const frameX = engine.block.getFrameX(block); * ``` * * @category Block Layout * @param id - The block to query. * @returns The layout position on the x-axis. */ getFrameX(id: DesignBlockId): number; /** * Gets the final calculated Y position of a block's frame. * * The position is only available after an internal update loop. * * ```javascript * const frameY = engine.block.getFrameY(block); * ``` * * @category Block Layout * @param id - The block to query. * @returns The layout position on the y-axis. */ getFrameY(id: DesignBlockId): number; /** * Gets the final calculated width of a block's frame. * * The width is only available after an internal update loop. * * ```javascript * const frameWidth = engine.block.getFrameWidth(block); * ``` * * @category Block Layout * @param id - The block to query. * @returns The layout width. */ getFrameWidth(id: DesignBlockId): number; /** * Gets the final calculated height of a block's frame. * * The height is only available after an internal update loop. * * ```javascript * const frameHeight = engine.block.getFrameHeight(block); * ``` * * @category Block Layout * @param id - The block to query. * @returns The layout height. */ getFrameHeight(id: DesignBlockId): number; /** * Sets the content fill mode of a block. * * ```javascript * engine.block.setContentFillMode(image, 'Cover'); * ``` * * @category Block Fills * @param id - The block to update. * @param mode - The content fill mode: 'Crop', 'Cover' or 'Contain'. */ setContentFillMode(id: DesignBlockId, mode: ContentFillMode): void; /** * Gets the content fill mode of a block. * * ```javascript * engine.block.getContentFillMode(image); * ``` * * @category Block Fills * @param id - The block to query. * @returns The current mode: 'Crop', 'Cover' or 'Contain'. */ getContentFillMode(id: DesignBlockId): ContentFillMode; /** * Duplicates a block and its children. * * @category Block Lifecycle * @param id - The block to duplicate. * @param attachToParent - Whether the duplicated block should be attached to the original's parent. Defaults to true. * @returns The handle of the duplicate. */ duplicate(id: DesignBlockId, attachToParent?: boolean): DesignBlockId; /** * Destroys a block and its children. * * @category Block Lifecycle * @param id - The block to destroy. */ destroy(id: DesignBlockId): void; /** * Checks if a block handle is valid. * * A block becomes invalid once it has been destroyed. * * @category Block State * @param id - The block to query. * @returns True, if the block is valid. */ isValid(id: DesignBlockId): boolean; /** * Gets the parent of a block. * * @category Block Hierarchies * @param id - The block to query. * @returns The parent's handle or null if the block has no parent. */ getParent(id: DesignBlockId): DesignBlockId | null; /** * Gets all direct children of a block. * * Children are sorted in their rendering order: Last child is rendered in front of other children. * * @category Block Hierarchies * @param id - The block to query. * @returns A list of block ids. */ getChildren(id: DesignBlockId): DesignBlockId[]; /** * Inserts a child block at a specific index. * * @category Block Hierarchies * @param parent - The block whose children should be updated. * @param child - The child to insert. Can be an existing child of `parent`. * @param index - The index to insert or move to. */ insertChild(parent: DesignBlockId, child: DesignBlockId, index: number): void; /** * Appends a child block to a parent. * * @category Block Hierarchies * @param parent - The block whose children should be updated. * @param child - The child to insert. Can be an existing child of `parent`. */ appendChild(parent: DesignBlockId, child: DesignBlockId): void; /** * Checks if a block references any variables. * * This check does not recurse into children. * * @category Block State * @param id - The block to inspect. * @returns true if the block references variables and false otherwise. */ referencesAnyVariables(id: DesignBlockId): boolean; /** * Gets the X position of the block's global bounding box. * * The position is in the scene's global coordinate space, with the origin at the top left. * * ```javascript * const globalX = engine.block.getGlobalBoundingBoxX(block); * ``` * * @category Block Layout * @param id - The block whose bounding box should be calculated. * @returns The x coordinate of the axis-aligned bounding box. */ getGlobalBoundingBoxX(id: DesignBlockId): number; /** * Gets the Y position of the block's global bounding box. * * The position is in the scene's global coordinate space, with the origin at the top left. * * ```javascript * const globalY = engine.block.getGlobalBoundingBoxY(block); * ``` * * @category Block Layout * @param id - The block whose bounding box should be calculated. * @returns The y coordinate of the axis-aligned bounding box. */ getGlobalBoundingBoxY(id: DesignBlockId): number; /** * Gets the width of the block's global bounding box. * * The width is in the scene's global coordinate space. * * ```javascript * const globalWidth = engine.block.getGlobalBoundingBoxWidth(block); * ``` * * @category Block Layout * @param id - The block whose bounding box should be calculated. * @returns The width of the axis-aligned bounding box. */ getGlobalBoundingBoxWidth(id: DesignBlockId): number; /** * Gets the height of the block's global bounding box. * * The height is in the scene's global coordinate space. * * ```javascript * const globalHeight = engine.block.getGlobalBoundingBoxHeight(block); * ``` * * @category Block Layout * @param id - The block whose bounding box should be calculated. * @returns The height of the axis-aligned bounding box. */ getGlobalBoundingBoxHeight(id: DesignBlockId): number; /** * Gets the screen-space bounding box for a set of blocks. * * ```javascript * const boundingBox = engine.block.getScreenSpaceBoundingBoxXYWH([block]); * ``` * * @category Block Layout * @param ids - The block to query. * @returns The position and size of the bounding box. */ getScreenSpaceBoundingBoxXYWH(ids: DesignBlockId[]): XYWH; /** * Aligns blocks horizontally. * * Aligns multiple blocks within their bounding box or a single block to its parent. * * @category Block Layout * @param ids - A non-empty array of block ids. * @param horizontalBlockAlignment - How they should be aligned: 'Left', 'Right', or 'Center'. */ alignHorizontally(ids: DesignBlockId[], horizontalBlockAlignment: TextHorizontalAlignment): void; /** * Aligns blocks vertically. * * Aligns multiple blocks within their bounding box or a single block to its parent. * * @category Block Layout * @param ids - A non-empty array of block ids. * @param verticalBlockAlignment - How they should be aligned: 'Top', 'Bottom', or 'Center'. */ alignVertically(ids: DesignBlockId[], verticalBlockAlignment: TextVerticalAlignment): void; /** * Checks if a set of blocks can be aligned. * * @category Block Utils * @param ids - An array of block ids. * @returns Whether the blocks can be aligned. */ isAlignable(ids: DesignBlockId[]): boolean; /** * Distributes blocks horizontally with even spacing. * * Distributes multiple blocks horizontally within their bounding box. * * @category Block Layout * @param ids - A non-empty array of block ids. */ distributeHorizontally(ids: DesignBlockId[]): void; /** * Distributes blocks vertically with even spacing. * * Distributes multiple blocks vertically within their bounding box. * * @category Block Layout * @param ids - A non-empty array of block ids. */ distributeVertically(ids: DesignBlockId[]): void; /** * Checks if a set of blocks can be distributed. * * @category Block Utils * @param ids - An array of block ids. * @returns Whether the blocks can be distributed. */ isDistributable(ids: DesignBlockId[]): boolean; /** * Resizes and positions a block to fill its parent. * * The crop values of the block are reset if it can be cropped. * * @category Block Layout * @param id - The block that should fill its parent. */ fillParent(id: DesignBlockId): void; /** * Resizes blocks while adjusting content to fit. * * The content of the blocks is automatically adjusted to fit the new dimensions. * Full-page blocks are resized to remain as full-page afterwards, while the blocks that are not full-page get resized as a group to the same scale factor and centered. * ```javascript * const pages = engine.scene.getPages(); * engine.block.resizeContentAware(pages, width: 100.0, 100.0); * ``` * * @category Block Layout * @param ids - The blocks to resize. * @param width - The new width of the blocks. * @param height - The new height of the blocks. */ resizeContentAware(ids: DesignBlockId[], width: number, height: number): void; /** * Scales a block and its children proportionally. * * This updates the position, size and style properties (e.g. stroke width) of * the block and its children around the specified anchor point. * * ```javascript * // Scale a block to double its size, anchored at the center. * engine.block.scale(block, 2.0, 0.5, 0.5); * ``` * * @category Block Layout * @param id - The block that should be scaled. * @param scale - The scale factor to be applied to the current properties of the block. * @param anchorX - The relative position along the width of the block around which the scaling should occur (0=left, 0.5=center, 1=right). Defaults to 0. * @param anchorY - The relative position along the height of the block around which the scaling should occur (0=top, 0.5=center, 1=bottom). Defaults to 0. */ scale(id: DesignBlockId, scale: number, anchorX?: number, anchorY?: number): void; /** * Gets all available properties of a block. * * @category Block Properties * @param id - The block whose properties should be queried. * @returns A list of the property names. */ findAllProperties(id: DesignBlockId): string[]; /** * Checks if a property is readable. * * @category Block Properties * @param property - The name of the property to check. * @returns Whether the property is readable. Returns false for unknown properties. */ isPropertyReadable(property: string): boolean; /** * Checks if a property is writable. * * @category Block Properties * @param property - The name of the property to check. * @returns Whether the property is writable. Returns false for unknown properties. */ isPropertyWritable(property: string): boolean; /** * Gets the type of a property by its name. * * @category Block Properties * @param property - The name of the property whose type should be queried. * @returns The property type. */ getPropertyType(property: string): PropertyType; /** * Gets all possible values of an enum property. * * @category Block Properties * @param enumProperty - The name of the property whose enum values should be queried. * @returns A list of the enum value names as a string array. */ getEnumValues(enumProperty: string): T[]; /** * Sets a boolean property on a block. * * ```javascript * engine.block.setBool(scene, 'scene/aspectRatioLock', false); * ``` * * @category Block Properties * @param id - The block whose property should be set. * @param property - The name of the property to set. * @param value - The value to set. */ setBool(id: DesignBlockId, property: BoolPropertyName, value: boolean): void; /** * Gets a boolean property from a block. * * ```javascript * engine.block.getBool(scene, 'scene/aspectRatioLock'); * ``` * * @category Block Properties * @param id - The block whose property should be queried. * @param property - The name of the property to query. * @returns The value of the property. */ getBool(id: DesignBlockId, property: BoolPropertyName): boolean; /** * Sets an integer property on a block. * * ```javascript * engine.block.setInt(starShape, 'shape/star/points', points + 2); * ``` * * @category Block Properties * @param id - The block whose property should be set. * @param property - The name of the property to set. * @param value - The value to set. */ setInt(id: DesignBlockId, property: IntPropertyName, value: number): void; /** * Gets an integer property from a block. * * ```javascript * engine.block.setInt(starShape, 'shape/star/points', points + 2); * ``` * * @category Block Properties * @param id - The block whose property should be queried. * @param property - The name of the property to query. * @returns The value of the property. */ getInt(id: DesignBlockId, property: IntPropertyName): number; /** * Sets a float property on a block. * * ```javascript * engine.block.setFloat(text, "text/letterSpacing", 0.2); * engine.block.setFloat(text, "text/lineHeight", 1.2); * ``` * * @category Block Properties * @param id - The block whose property should be set. * @param property - The name of the property to set. * @param value - The value to set. */ setFloat(id: DesignBlockId, property: FloatPropertyName, value: number): void; /** * Gets a float property from a block. * * ```javascript * engine.block.getFloat(starShape, 'shape/star/innerDiameter'); * ``` * * @category Block Properties * @param id - The block whose property should be queried. * @param property - The name of the property to query. * @returns The value of the property. */ getFloat(id: DesignBlockId, property: FloatPropertyName): number; /** * Sets a double-precision float property on a block. * * ```javascript * engine.block.setDouble(audio, 'playback/duration', 1.0); * ``` * * @category Block Properties * @param id - The block whose property should be set. * @param property - The name of the property to set. * @param value - The value to set. */ setDouble(id: DesignBlockId, property: DoublePropertyName, value: number): void; /** * Gets a double-precision float property from a block. * * ```javascript * engine.block.getDouble(audio, 'playback/duration'); * ``` * * @category Block Properties * @param id - The block whose property should be queried. * @param property - The name of the property to query. * @returns The value of the property. */ getDouble(id: DesignBlockId, property: DoublePropertyName): number; /** * Sets a string property on a block. * * ```javascript * engine.block.setString(text, 'text/text', 'Hello World'); * engine.block.setString(imageFill, 'fill/image/imageFileURI', 'https://example.com/sample.jpg'); * ``` * * @category Block Properties * @param id - The block whose property should be set. * @param property - The name of the property to set. * @param value - The value to set. */ setString(id: DesignBlockId, property: StringPropertyName, value: string): void; /** * Gets a string property from a block. * * ```javascript * engine.block.getString(text, 'text/text'); * engine.block.getString(imageFill, 'fill/image/imageFileURI'); * ``` * * @category Block Properties * @param id - The block whose property should be queried. * @param property - The name of the property to query. * @returns The value of the property. */ getString(id: DesignBlockId, property: StringPropertyName): string; /** * Sets a color property on a block. * * ```javascript * // Set the block's fill color to white. * engine.block.setColor(colorFill, 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); * ``` * * @category Block Properties * @param id - The block whose property should be set. * @param property - The name of the property to set. * @param value - The value to set. */ setColor(id: DesignBlockId, property: ColorPropertyName, value: Color): void; /** * Gets a color property from a block. * * ```javascript * engine.block.getColor(colorFill, 'fill/color/value'); * ``` * * @category Block Properties * @param id - The block whose property should be queried. * @param property - The name of the property to query. * @returns The value of the property. */ getColor(id: DesignBlockId, property: ColorPropertyName): Color; /** * Sets a color property on a block using RGBA values. * * @category Block Properties * @param id - The block whose property should be set. * @param property - The name of the property to set. * @param r - The red color component in the range of 0 to 1. * @param g - The green color component in the range of 0 to 1. * @param b - The blue color component in the range of 0 to 1. * @param a - The alpha color component in the range of 0 to 1. Defaults to 1. * @deprecated Use setColor() instead. */ setColorRGBA(id: DesignBlockId, property: string, r: number, g: number, b: number, a?: number): void; /** * Gets a color property from a block as RGBA values. * * @category Block Properties * @param id - The block whose property should be queried. * @param property - The name of the property to query. * @returns A tuple of channels red, green, blue and alpha in the range of 0 to 1. * @deprecated Use getColor() instead. */ getColorRGBA(id: DesignBlockId, property: string): RGBA; /** * Sets a spot color property on a block. * * @category Block Properties * @param id - The block whose property should be set. * @param property - The name of the property to set. * @param name - The name of the spot color. * @param tint - The tint factor in the range of 0 to 1. Defaults to 1. * @deprecated Use setColor() instead. */ setColorSpot(id: DesignBlockId, property: string, name: string, tint?: number): void; /** * Gets the spot color name from a color property. * * @category Block Properties * @param id - The block whose property should be queried. * @param property - The name of the property to query. * @returns The name of the spot color. * @deprecated Use getColor() instead. */ getColorSpotName(id: DesignBlockId, property: string): string; /** * Gets the spot color tint from a color property. * * @category Block Properties * @param id - The block whose property should be queried. * @param property - The name of the property to query. * @returns The tint factor of the spot color. * @deprecated Use getColor() instead. */ getColorSpotTint(id: DesignBlockId, property: string): number; /** * Sets the color stops for a gradient property. * * ```javascript * engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ * { color: { r: 1.0, g: 0.8, b: 0.2, a: 1.0 }, stop: 0 }, * { color: { r: 0.3, g: 0.4, b: 0.7, a: 1.0 }, stop: 1 } * ]); * ``` * * @category Block Fills * @param id - The block whose property should be set. * @param property - The name of the property to set, e.g. 'fill/gradient/colors'. * @param colors - An array of gradient color stops. */ setGradientColorStops(id: DesignBlockId, property: string, colors: GradientColorStop[]): void; /** * Gets the color stops from a gradient property. * * ``` * engine.block.getGradientColorStops(gradientFill, 'fill/gradient/colors'); * ``` * * @category Block Fills * @param id - The block whose property should be queried. * @param property - The name of the property to query. * @returns The gradient colors. */ getGradientColorStops(id: DesignBlockId, property: string): GradientColorStop[]; /** * Gets the source set from a block property. * * ```javascript * const sourceSet = engine.block.getSourceSet(imageFill, 'fill/image/sourceSet'); * ``` * * @category Block Fills * @param id - The block that should be queried. * @param property - The name of the property to query, e.g. 'fill/image/sourceSet'. * @returns The block's source set. */ getSourceSet(id: DesignBlockId, property: SourceSetPropertyName): Source[]; /** * Sets the source set for a block property. * * The crop and content fill mode of the associated block will be reset to default values. * * ```javascript * engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [{ * uri: 'https://example.com/sample.jpg', * width: 800, * height: 600 * }]); * ``` * * @category Block Fills * @param id - The block whose property should be set. * @param property - The name of the property to set. * @param sourceSet - The block's new source set. */ setSourceSet(id: DesignBlockId, property: SourceSetPropertyName, sourceSet: Source[]): void; /** * Adds an image file URI to a source set property. * * If an image with the same width already exists in the source set, it will be replaced. * * ```javascript * await engine.block.addImageFileURIToSourceSet(imageFill, 'fill/image/sourceSet', 'https://example.com/sample.jpg'); * ``` * * @category Block Fills * @param id - The block to update. * @param property - The name of the property to modify. * @param uri - The source to add to the source set. * @returns A promise that resolves when the operation is complete. */ addImageFileURIToSourceSet(id: DesignBlockId, property: SourceSetPropertyName, uri: string): Promise; /** * Adds a video file URI to a source set property. * * If a video with the same width already exists in the source set, it will be replaced. * * ```javascript * await engine.block.addVideoFileURIToSourceSet(videoFill, 'fill/video/sourceSet', 'https://example.com/sample.mp4'); * ``` * * @category Block Fills * @param id - The block to update. * @param property - The name of the property to modify. * @param uri - The source to add to the source set. * @returns A promise that resolves when the operation is complete. */ addVideoFileURIToSourceSet(id: DesignBlockId, property: SourceSetPropertyName, uri: string): Promise; /** * Sets an enum property on a block. * * ```javascript * engine.block.setEnum(text, 'text/horizontalAlignment', 'Center'); * engine.block.setEnum(text, 'text/verticalAlignment', 'Center'); * ``` * * @category Block Properties * @param id - The block whose property should be set. * @param property - The name of the property to set. * @param value - The enum value as a string. */ setEnum(id: DesignBlockId, property: T, value: BlockEnumType[T]): void; setEnum(id: DesignBlockId, property: string, value: string): void; /** * Gets an enum property from a block. * * ```javascript * engine.block.getEnum(text, 'text/horizontalAlignment'); * engine.block.getEnum(text, 'text/verticalAlignment'); * ``` * * @category Block Properties * @param id - The block whose property should be queried. * @param property - The name of the property to query. * @returns The value as a string. */ getEnum(id: DesignBlockId, property: T): BlockEnumType[T]; getEnum(id: DesignBlockId, property: string): string; /** * Checks if a block has crop properties. * * @category Block Crop * @param id - The block to query. * @returns true, if the block has crop properties. * @deprecated Use supportsCrop() instead. */ hasCrop(id: DesignBlockId): boolean; /** * Checks if a block supports cropping. * * ```javascript * engine.block.supportsCrop(image); * ``` * * @category Block Crop * @param id - The block to query. * @returns true, if the block supports cropping. */ supportsCrop(id: DesignBlockId): boolean; /** * Sets the horizontal crop scale of a block. * * ```javascript * engine.block.setCropScaleX(image, 2.0); * ``` * * @category Block Crop * @param id - The block whose crop should be set. * @param scaleX - The scale in x direction. */ setCropScaleX(id: DesignBlockId, scaleX: number): void; /** * Sets the vertical crop scale of a block. * * ```javascript * engine.block.setCropScaleY(image, 1.5); * ``` * * @category Block Crop * @param id - The block whose crop should be set. * @param scaleY - The scale in y direction. */ setCropScaleY(id: DesignBlockId, scaleY: number): void; /** * Sets the crop rotation of a block in radians. * * ```javascript * engine.block.setCropRotation(image, Math.PI); * ``` * * @category Block Crop * @param id - The block whose crop should be set. * @param rotation - The rotation in radians. */ setCropRotation(id: DesignBlockId, rotation: number): void; /** * Sets the uniform crop scale ratio of a block. * * This scales the content up or down from the center of the crop frame. * * ```javascript * engine.block.setCropScaleRatio(image, 3.0); * ``` * * @category Block Crop * @param id - The block whose crop should be set. * @param scaleRatio - The crop scale ratio. */ setCropScaleRatio(id: DesignBlockId, scaleRatio: number): void; /** * Sets the horizontal crop translation of a block in percentage of the crop frame width. * * ```javascript * engine.block.setCropTranslationX(image, -1.0); * ``` * * @category Block Crop * @param id - The block whose crop should be set. * @param translationX - The translation in x direction. */ setCropTranslationX(id: DesignBlockId, translationX: number): void; /** * Sets the vertical crop translation of a block in percentage of the crop frame height. * * ```javascript * engine.block.setCropTranslationY(image, 1.0); * ``` * * @category Block Crop * @param id - The block whose crop should be set. * @param translationY - The translation in y direction. */ setCropTranslationY(id: DesignBlockId, translationY: number): void; /** * Resets the crop of a block to its default state. * * The block's content fill mode is set to 'Cover'. * * ```javascript * engine.block.resetCrop(image); * ``` * * @category Block Crop * @param id - The block whose crop should be reset. */ resetCrop(id: DesignBlockId): void; /** * Gets the horizontal crop scale of a block. * * ```javascript * const scaleX = engine.block.getCropScaleX(image); * ``` * * @category Block Crop * @param id - The block whose scale should be queried. * @returns The scale on the x axis. */ getCropScaleX(id: DesignBlockId): number; /** * Gets the vertical crop scale of a block. * * ```javascript * const scaleY = engine.block.getCropScaleY(image); * ``` * * @category Block Crop * @param id - The block whose scale should be queried. * @returns The scale on the y axis. */ getCropScaleY(id: DesignBlockId): number; /** * Gets the crop rotation of a block in radians. * * ```javascript * const cropRotation = engine.block.getCropRotation(image); * ``` * * @category Block Crop * @param id - The block whose crop rotation should be queried. * @returns The crop rotation in radians. */ getCropRotation(id: DesignBlockId): number; /** * Gets the uniform crop scale ratio of a block. * * ```javascript * const cropScaleRatio = engine.block.getCropScaleRatio(image); * ``` * * @category Block Crop * @param id - The block whose crop scale ratio should be queried. * @returns The crop scale ratio. */ getCropScaleRatio(id: DesignBlockId): number; /** * Gets the horizontal crop translation of a block in percentage of the crop frame width. * * ```javascript * const cropTranslationX = engine.block.getCropTranslationX(image); * ``` * * @category Block Crop * @param id - The block whose translation should be queried. * @returns The translation on the x axis. */ getCropTranslationX(id: DesignBlockId): number; /** * Gets the vertical crop translation of a block in percentage of the crop frame height. * * ```javascript * const cropTranslationY = engine.block.getCropTranslationY(image); * ``` * * @category Block Crop * @param id - The block whose translation should be queried. * @returns The translation on the y axis. */ getCropTranslationY(id: DesignBlockId): number; /** * Adjusts the crop position and scale of the given image block to fill its crop frame, while maintaining the position and size of the crop frame. * * ```javascript * const adjustedScaleRatio = engine.block.adjustCropToFillFrame(image, 1.0); * ``` * * @category Block Crop * @param id - The block whose crop should be adjusted. * @param minScaleRatio - The minimal crop scale ratio to use. * @returns The adjusted scale ratio. */ adjustCropToFillFrame(id: DesignBlockId, minScaleRatio: number): number; /** * Flips the content horizontally within its crop frame. * * ```javascript * engine.block.flipCropHorizontal(image); * ``` * * @category Block Crop * @param id - The block whose crop should be updated. */ flipCropHorizontal(id: DesignBlockId): void; /** * Flips the content vertically within its crop frame. * * ```javascript * engine.block.flipCropVertical(image); * ``` * * @category Block Crop * @param id - The block whose crop should be updated. */ flipCropVertical(id: DesignBlockId): void; /** * Checks if the crop aspect ratio is locked for a block. * * When locked, crop handles will maintain the current aspect ratio during resize. * * ```javascript * const isLocked = engine.block.isCropAspectRatioLocked(block); * ``` * * @category Block Crop * @param id - The block to query. * @returns True if aspect ratio is locked, false otherwise. */ isCropAspectRatioLocked(id: DesignBlockId): boolean; /** * Sets whether the crop aspect ratio should be locked for a block. * * When enabled, crop handles will maintain the current aspect ratio. * When disabled, free resizing is allowed. * * ```javascript * engine.block.setCropAspectRatioLocked(block, true); * ``` * * @category Block Crop * @param id - The block to update. * @param locked - Whether aspect ratio should be locked. */ setCropAspectRatioLocked(id: DesignBlockId, locked: boolean): void; /** * Checks whether the "Original" crop preset (`ContentAspectRatio`) can be applied to a block. * * This runs the same preliminary check the apply path performs: it resolves the intrinsic * content dimensions from the block's image/video fill (an image fill resolves only from its * `sourceSet`; a video fill resolves from its `sourceSet` or the first decoded frame). Use it * to gate UI that would otherwise call the preset and fail — e.g. an unreplaced placeholder * image fill with an empty `sourceSet`. * * ```javascript * const canRevert = engine.block.canRevertToOriginalRatio(block); * ``` * * @category Block Crop * @param id - The block to query. * @returns True if the preset would resolve, false if it cannot (no/placeholder fill, empty * sourceSet, video not yet decoded, or unsupported fill type). */ canRevertToOriginalRatio(id: DesignBlockId): boolean; /** * Checks if a block has an opacity property. * * @category Block Appearance * @param id - The block to query. * @returns true, if the block has an opacity. * @deprecated Use supportsOpacity() instead. */ hasOpacity(id: DesignBlockId): boolean; /** * Checks if a block supports opacity. * * @category Block Appearance * @param id - The block to query. * @returns true, if the block supports opacity. */ supportsOpacity(id: DesignBlockId): boolean; /** * Sets the opacity of a block. * * @category Block Appearance * @param id - The block whose opacity should be set. * @param opacity - The opacity to be set. The valid range is 0 to 1. */ setOpacity(id: DesignBlockId, opacity: number): void; /** * Gets the opacity of a block. * * @category Block Appearance * @param id - The block whose opacity should be queried. * @returns The opacity value. */ getOpacity(id: DesignBlockId): number; /** * Checks if a block has a blend mode property. * * @category Block Appearance * @param id - The block to query. * @returns true, if the block has a blend mode. * @deprecated Use supportsBlendMode() instead. */ hasBlendMode(id: DesignBlockId): boolean; /** * Checks if a block supports blend modes. * * @category Block Appearance * @param id - The block to query. * @returns true, if the block supports blend modes. */ supportsBlendMode(id: DesignBlockId): boolean; /** * Sets the blend mode of a block. * * @category Block Appearance * @param id - The block whose blend mode should be set. * @param blendMode - The blend mode to be set. */ setBlendMode(id: DesignBlockId, blendMode: BlendMode): void; /** * Gets the blend mode of a block. * * @category Block Appearance * @param id - The block whose blend mode should be queried. * @returns The blend mode. */ getBlendMode(id: DesignBlockId): BlendMode; /** * Checks if a block has fill color properties. * * @category Block Fills * @param id - The block to query. * @returns true, if the block has fill color properties. * @deprecated Query the fill's type using getFill() and getType() instead. */ hasFillColor(id: DesignBlockId): boolean; /** * Checks if a block is included in exports. * * @category Block State * @param id - The block to query. * @returns true, if the block is included on the exported result, false otherwise. */ isIncludedInExport(id: DesignBlockId): boolean; /** * Sets whether a block should be included in exports. * * @category Block State * @param id - The block whose exportable state should be set. * @param enabled - If true, the block will be included on the exported result. */ setIncludedInExport(id: DesignBlockId, enabled: boolean): void; /** * Sets the fill color of a block using RGBA values. * * @category Block Fills * @param id - The block whose fill color should be set. * @param r - The red color component in the range of 0 to 1. * @param g - The green color component in the range of 0 to 1. * @param b - The blue color component in the range of 0 to 1. * @param a - The alpha color component in the range of 0 to 1. * @deprecated Use setFillSolidColor() instead. */ setFillColorRGBA(id: DesignBlockId, r: number, g: number, b: number, a?: number): void; /** * Gets the fill color of a block as RGBA values. * * @category Block Fills * @param id - The block whose fill color should be queried. * @returns The fill color. * @deprecated Use getFillSolidColor() instead. */ getFillColorRGBA(id: DesignBlockId): RGBA; /** * Enables or disables the fill of a block. * * @category Block Fills * @param id - The block whose fill should be enabled or disabled. * @param enabled - If true, the fill will be enabled. * @deprecated Use setFillEnabled() instead. */ setFillColorEnabled(id: DesignBlockId, enabled: boolean): void; /** * Checks if the fill of a block is enabled. * * @category Block Fills * @param id - The block whose fill state should be queried. * @returns True, if fill is enabled. * @deprecated Use isFillEnabled() instead. */ isFillColorEnabled(id: DesignBlockId): boolean; /** * Creates a new effect block. * * @category Block Effects * @param type - The type of the effect. * @returns The created effect's handle. */ createEffect(type: EffectType): DesignBlockId; /** * Checks if a block supports effects. * * @category Block Effects * @param id - The block to query. * @returns True, if the block can render effects, false otherwise. * @deprecated Use supportsEffects instead. */ hasEffects(id: DesignBlockId): boolean; /** * Checks if a block supports effects. * * @category Block Effects * @param id - The block to query. * @returns True, if the block can render effects, false otherwise. */ supportsEffects(id: DesignBlockId): boolean; /** * Gets all effects attached to a block. * * @category Block Effects * @param id - The block to query. * @returns A list of effects or an error, if the block doesn't support effects. */ getEffects(id: DesignBlockId): DesignBlockId[]; /** * Inserts an effect into a block's effect list at a given index. * * @category Block Effects * @param id - The block to update. * @param effectId - The effect to insert. * @param index - The index at which the effect shall be inserted. */ insertEffect(id: DesignBlockId, effectId: DesignBlockId, index: number): void; /** * Appends an effect to a block's effect list. * * @category Block Effects * @param id - The block to append the effect to. * @param effectId - The effect to append. */ appendEffect(id: DesignBlockId, effectId: DesignBlockId): void; /** * Removes an effect from a block's effect list at a given index. * * @category Block Effects * @param id - The block to remove the effect from. * @param index - The index where the effect is stored. */ removeEffect(id: DesignBlockId, index: number): void; /** * Checks if an effect block can be enabled or disabled. * * @category Block Effects * @param effectId - The 'effect' block to query. * @returns True, if the block supports enabling and disabling, false otherwise. * @deprecated Calls to this function can be removed. All effects can be enabled and disabled. */ hasEffectEnabled(effectId: DesignBlockId): boolean; /** * Sets the enabled state of an effect block. * * ```javascript * engine.block.setEffectEnabled(effects[0], false); * ``` * * @category Block Effects * @param effectId - The 'effect' block to update. * @param enabled - The new state. */ setEffectEnabled(effectId: DesignBlockId, enabled: boolean): void; /** * Queries if an effect block is enabled. * * ```javascript * engine.block.isEffectEnabled(effects[0]); * ``` * * @category Block Effects * @param effectId - The 'effect' block to query. * @returns True, if the effect is enabled. False otherwise. */ isEffectEnabled(effectId: DesignBlockId): boolean; /** * Creates a new blur block. * * @category Block Blur * @param type - The type of blur. * @returns The handle of the newly created blur. */ createBlur(type: BlurType): DesignBlockId; /** * Checks if a block supports blur. * * @category Block Blur * @param id - The block to query. * @returns True, if the block supports blur. * @deprecated Use supportsBlur instead. */ hasBlur(id: DesignBlockId): boolean; /** * Checks if a block supports blur. * * @category Block Blur * @param id - The block to query. * @returns True, if the block supports blur. */ supportsBlur(id: DesignBlockId): boolean; /** * Sets the blur effect for a block. * * @category Block Blur * @param id - The block to update. * @param blurId - A 'blur' block to apply. */ setBlur(id: DesignBlockId, blurId: DesignBlockId): void; /** * Gets the blur block of a given design block. * * @category Block Blur * @param id - The block to query. * @returns The 'blur' block. */ getBlur(id: DesignBlockId): DesignBlockId; /** * Enables or disables the blur effect on a block. * * ```javascript * engine.block.setBlurEnabled(block, true); * ``` * * @category Block Blur * @param id - The block to update. * @param enabled - The new enabled value. */ setBlurEnabled(id: DesignBlockId, enabled: boolean): void; /** * Checks if blur is enabled for a block. * * ```javascript * const isBlurEnabled = engine.block.isBlurEnabled(block); * ``` * * @category Block Blur * @param id - The block to query. * @returns True, if the blur is enabled. False otherwise. */ isBlurEnabled(id: DesignBlockId): boolean; /** * Checks if a block has background color properties. * * @category Block Appearance * @param id - The block to query. * @returns true, if the block has background color properties. * @deprecated Use supportsBackgroundColor() instead. */ hasBackgroundColor(id: DesignBlockId): boolean; /** * Checks if a block supports a background color. * * @category Block Appearance * @param id - The block to query. * @returns true, if the block supports a background color. */ supportsBackgroundColor(id: DesignBlockId): boolean; /** * Sets the background color of a block using RGBA values. * * @category Block Appearance * @param id - The block whose background color should be set. * @param r - The red color component in the range of 0 to 1. * @param g - The green color component in the range of 0 to 1. * @param b - The blue color component in the range of 0 to 1. * @param a - The alpha color component in the range of 0 to 1. * @deprecated Use `Use setColor() with the key path 'backgroundColor/color' instead.`. */ setBackgroundColorRGBA(id: DesignBlockId, r: number, g: number, b: number, a?: number): void; /** * Gets the background color of a block as RGBA values. * * @category Block Appearance * @param id - The block whose background color should be queried. * @returns The background color. * @deprecated Use `Use getColor() with the key path 'backgroundColor/color' instead.`. */ getBackgroundColorRGBA(id: DesignBlockId): RGBA; /** * Enables or disables the background of a block. * * ```javascript * engine.block.setBackgroundColorEnabled(block, true); * ``` * * @category Block Appearance * @param id - The block whose background should be enabled or disabled. * @param enabled - If true, the background will be enabled. */ setBackgroundColorEnabled(id: DesignBlockId, enabled: boolean): void; /** * Checks if the background of a block is enabled. * * ```javascript * const backgroundColorIsEnabled = engine.block.isBackgroundColorEnabled(block); * ``` * * @category Block Appearance * @param id - The block whose background state should be queried. * @returns True, if background is enabled. */ isBackgroundColorEnabled(id: DesignBlockId): boolean; /** * Checks if a block has a stroke property. * * @category Block Strokes * @param id - The block to query. * @returns True if the block has a stroke property. * @deprecated Use supportsStroke() instead. */ hasStroke(id: DesignBlockId): boolean; /** * Checks if a block supports a stroke. * * @category Block Strokes * @param id - The block to query. * @returns True if the block supports a stroke. */ supportsStroke(id: DesignBlockId): boolean; /** * Enables or disables the stroke of a block. * * ```javascript * engine.block.setStrokeEnabled(block, true); * ``` * * @category Block Strokes * @param id - The block whose stroke should be enabled or disabled. * @param enabled - If true, the stroke will be enabled. */ setStrokeEnabled(id: DesignBlockId, enabled: boolean): void; /** * Checks if the stroke of a block is enabled. * * ```javascript * const strokeIsEnabled = engine.block.isStrokeEnabled(block); * ``` * * @category Block Strokes * @param id - The block whose stroke state should be queried. * @returns True if the block's stroke is enabled. */ isStrokeEnabled(id: DesignBlockId): boolean; /** * Marks the stroke of a block as overprint for PDF export. * * The flag is only honored by the PDF writer when the stroke uses a spot color * (Separation/DeviceN). For process-color strokes it is a silent no-op. On-screen * rendering ignores the flag. * * ```javascript * engine.block.setStrokeOverprint(block, true); * ``` * * @category Block Strokes * @param id - The block whose stroke overprint flag should be set. * @param overprint - If true, the stroke is marked as overprint in exported PDFs. */ setStrokeOverprint(id: DesignBlockId, overprint: boolean): void; /** * Queries whether the stroke of a block is marked as overprint for PDF export. * * ```javascript * const overprint = engine.block.getStrokeOverprint(block); * ``` * * @category Block Strokes * @param id - The block whose stroke overprint flag should be queried. * @returns The stroke overprint flag. */ getStrokeOverprint(id: DesignBlockId): boolean; /** * Sets the stroke color of a block using RGBA values. * * @category Block Strokes * @param id - The block whose stroke color should be set. * @param r - The red color component in the range of 0 to 1. * @param g - The green color component in the range of 0 to 1. * @param b - The blue color component in the range of 0 to 1. * @param a - The alpha color component in the range of 0 to 1. * @deprecated Use setStrokeColor() instead. */ setStrokeColorRGBA(id: DesignBlockId, r: number, g: number, b: number, a?: number): void; /** * Sets the stroke color of a block. * * @category Block Strokes * @param id - The block whose stroke color should be set. * @param color - The color to set. */ setStrokeColor(id: DesignBlockId, color: Color): void; /** * Gets the stroke color of a block as RGBA values. * * @category Block Strokes * @param id - The block whose stroke color should be queried. * @returns The stroke color. * @deprecated Use getStrokeColor() instead. */ getStrokeColorRGBA(id: DesignBlockId): RGBA; /** * Gets the stroke color of a block. * * @category Block Strokes * @param id - The block whose stroke color should be queried. * @returns The stroke color. */ getStrokeColor(id: DesignBlockId): Color; /** * Sets the stroke width of a block. * * @category Block Strokes * @param id - The block whose stroke width should be set. * @param width - The stroke width to be set. */ setStrokeWidth(id: DesignBlockId, width: number): void; /** * Gets the stroke width of a block. * * @category Block Strokes * @param id - The block whose stroke width should be queried. * @returns The stroke's width. */ getStrokeWidth(id: DesignBlockId): number; /** * Sets the stroke style of a block. * * @category Block Strokes * @param id - The block whose stroke style should be set. * @param style - The stroke style to be set. */ setStrokeStyle(id: DesignBlockId, style: StrokeStyle): void; /** * Gets the stroke style of a block. * * @category Block Strokes * @param id - The block whose stroke style should be queried. * @returns The stroke's style. */ getStrokeStyle(id: DesignBlockId): StrokeStyle; /** * Sets the stroke position of a block. * * @category Block Strokes * @param id - The block whose stroke position should be set. * @param position - The stroke position to be set. */ setStrokePosition(id: DesignBlockId, position: StrokePosition): void; /** * Gets the stroke position of a block. * * @category Block Strokes * @param id - The block whose stroke position should be queried. * @returns The stroke position. */ getStrokePosition(id: DesignBlockId): StrokePosition; /** * Sets the stroke corner geometry of a block. * * @category Block Strokes * @param id - The block whose stroke corner geometry should be set. * @param cornerGeometry - The stroke corner geometry to be set. */ setStrokeCornerGeometry(id: DesignBlockId, cornerGeometry: StrokeCornerGeometry): void; /** * Gets the stroke corner geometry of a block. * * @category Block Strokes * @param id - The block whose stroke corner geometry should be queried. * @returns The stroke corner geometry. */ getStrokeCornerGeometry(id: DesignBlockId): StrokeCornerGeometry; /** * Checks if a block has a drop shadow property. * * @category Block Drop Shadow * @param id - The block to query. * @returns True if the block has a drop shadow property. * @deprecated Use supportsDropShadow() instead. */ hasDropShadow(id: DesignBlockId): boolean; /** * Checks if a block supports a drop shadow. * * @category Block Drop Shadow * @param id - The block to query. * @returns True if the block supports a drop shadow. */ supportsDropShadow(id: DesignBlockId): boolean; /** * Enables or disables the drop shadow of a block. * * ```javascript * engine.block.setDropShadowEnabled(block, true); * ``` * * @category Block Drop Shadow * @param id - The block whose drop shadow should be enabled or disabled. * @param enabled - If true, the drop shadow will be enabled. */ setDropShadowEnabled(id: DesignBlockId, enabled: boolean): void; /** * Checks if the drop shadow of a block is enabled. * * ```javascript * const dropShadowIsEnabled = engine.block.isDropShadowEnabled(block); * ``` * * @category Block Drop Shadow * @param id - The block whose drop shadow state should be queried. * @returns True if the block's drop shadow is enabled. */ isDropShadowEnabled(id: DesignBlockId): boolean; /** * Sets the drop shadow color of a block using RGBA values. * * @category Block Drop Shadow * @param id - The block whose drop shadow color should be set. * @param r - The red color component in the range of 0 to 1. * @param g - The green color component in the range of 0 to 1. * @param b - The blue color component in the range of 0 to 1. * @param a - The alpha color component in the range of 0 to 1. * @deprecated Use setDropShadowColor() instead. */ setDropShadowColorRGBA(id: DesignBlockId, r: number, g: number, b: number, a?: number): void; /** * Sets the drop shadow color of a block. * * @category Block Drop Shadow * @param id - The block whose drop shadow color should be set. * @param color - The color to set. */ setDropShadowColor(id: DesignBlockId, color: Color): void; /** * Gets the drop shadow color of a block as RGBA values. * * @category Block Drop Shadow * @param id - The block whose drop shadow color should be queried. * @returns The drop shadow color. * @deprecated Use getDropShadowColor instead. */ getDropShadowColorRGBA(id: DesignBlockId): RGBA; /** * Gets the drop shadow color of a block. * * @category Block Drop Shadow * @param id - The block whose drop shadow color should be queried. * @returns The drop shadow color. */ getDropShadowColor(id: DesignBlockId): Color; /** * Sets the drop shadow's horizontal offset. * * @category Block Drop Shadow * @param id - The block whose drop shadow's X offset should be set. * @param offsetX - The X offset to be set. */ setDropShadowOffsetX(id: DesignBlockId, offsetX: number): void; /** * Gets the drop shadow's horizontal offset. * * @category Block Drop Shadow * @param id - The block whose drop shadow's X offset should be queried. * @returns The offset. */ getDropShadowOffsetX(id: DesignBlockId): number; /** * Sets the drop shadow's vertical offset. * * @category Block Drop Shadow * @param id - The block whose drop shadow's Y offset should be set. * @param offsetY - The Y offset to be set. */ setDropShadowOffsetY(id: DesignBlockId, offsetY: number): void; /** * Gets the drop shadow's vertical offset. * * @category Block Drop Shadow * @param id - The block whose drop shadow's Y offset should be queried. * @returns The offset. */ getDropShadowOffsetY(id: DesignBlockId): number; /** * Sets the drop shadow's horizontal blur radius. * * @category Block Drop Shadow * @param id - The block whose drop shadow's blur radius should be set. * @param blurRadiusX - The blur radius to be set. */ setDropShadowBlurRadiusX(id: DesignBlockId, blurRadiusX: number): void; /** * Gets the drop shadow's horizontal blur radius. * * @category Block Drop Shadow * @param id - The block whose drop shadow's blur radius should be queried. * @returns The blur radius. */ getDropShadowBlurRadiusX(id: DesignBlockId): number; /** * Sets the drop shadow's vertical blur radius. * * @category Block Drop Shadow * @param id - The block whose drop shadow's blur radius should be set. * @param blurRadiusY - The blur radius to be set. */ setDropShadowBlurRadiusY(id: DesignBlockId, blurRadiusY: number): void; /** * Gets the drop shadow's vertical blur radius. * * @category Block Drop Shadow * @param id - The block whose drop shadow's blur radius should be queried. * @returns The blur radius. */ getDropShadowBlurRadiusY(id: DesignBlockId): number; /** * Sets the drop shadow's clipping behavior. * * This only applies to shapes. * * @category Block Drop Shadow * @param id - The block whose drop shadow's clip should be set. * @param clip - The drop shadow's clip to be set. */ setDropShadowClip(id: DesignBlockId, clip: boolean): void; /** * Gets the drop shadow's clipping behavior. * * @category Block Drop Shadow * @param id - The block whose drop shadow's clipping should be queried. * @returns The drop shadow's clipping state. */ getDropShadowClip(id: DesignBlockId): boolean; /** * Creates a cutout block from the contours of other blocks. * * The path is derived from either existing vector paths or by vectorizing the block's appearance. * * @category Block Cutout * @param ids - The blocks whose shape will serve as the basis for the cutout's path. * @param vectorizeDistanceThreshold - Max deviation from the original contour during vectorization. * @param simplifyDistanceThreshold - Max deviation for path simplification. 0 disables simplification. * @param useExistingShapeInformation - If true, use existing vector paths. * @returns The newly created block or an error. */ createCutoutFromBlocks(ids: DesignBlockId[], vectorizeDistanceThreshold?: number, simplifyDistanceThreshold?: number, useExistingShapeInformation?: boolean): DesignBlockId; /** * Creates a cutout block from an SVG path string. * * @category Block Cutout * @param path - An SVG string describing a path. * @returns The newly created block or an error. */ createCutoutFromPath(path: string): DesignBlockId; /** * Creates a new cutout block by performing a boolean operation on existing cutout blocks. * * @category Block Cutout * @param ids - The cutout blocks with which to perform to the operation. * @param op - The boolean operation to perform. * @returns The newly created block or an error. */ createCutoutFromOperation(ids: DesignBlockId[], op: CutoutOperation): DesignBlockId; /** * Replaces a range of text in a text block. * * ```javascript * engine.block.replaceText(text, 'Hello World'); * engine.block.replaceText(text, 'Alex', 6, 11); * ``` * * @category Block Text * @param id - The text block into which to insert the given text. * @param text - The text which should replace the selected range in the block. * @param from - The start index of the UTF-16 range to replace. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range to replace. Defaults to the end of the current selection or text. */ replaceText(id: DesignBlockId, text: string, from?: number, to?: number): void; /** * Removes a range of text from a text block. * * ```javascript * engine.block.removeText(text, 0, 6); * ``` * @category Block Text * @param id - The text block from which the selected text should be removed. * @param from - The start index of the UTF-16 range to remove. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range to remove. Defaults to the end of the current selection or text. */ removeText(id: DesignBlockId, from?: number, to?: number): void; /** * Sets the color for a range of text. * * ```javascript * engine.block.setTextColor(text, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 1, 4); * ``` * * @category Block Text * @param id - The text block whose color should be changed. * @param color - The new color of the selected text range. * @param from - The start index of the UTF-16 range to change. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range to change. Defaults to the end of the current selection or text. */ setTextColor(id: DesignBlockId, color: Color, from?: number, to?: number): void; /** * Gets the unique colors within a range of text. * * ```javascript * const colorsInRange = engine.block.getTextColors(text, 2, 5); * ``` * * @category Block Text * @param id - The text block whose colors should be returned. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. * @returns The ordered unique list of colors. */ getTextColors(id: DesignBlockId, from?: number, to?: number): Array; /** * Sets the font weight for a range of text. * * ```javascript * engine.block.setTextFontWeight(text, 'bold', 0, 5); * ``` * * @category Block Text * @param id - The text block whose weight should be changed. * @param fontWeight - The new weight of the selected text range. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. */ setTextFontWeight(id: DesignBlockId, fontWeight: FontWeight, from?: number, to?: number): void; /** * Gets the unique font weights within a range of text. * * ```javascript * const fontWeights = engine.block.getTextFontWeights(text, 0, 6); * ``` * * @category Block Text * @param id - The text block whose font weights should be returned. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. * @returns The ordered unique list of font weights. */ getTextFontWeights(id: DesignBlockId, from?: number, to?: number): FontWeight[]; /** * Sets the font size for a range of text. * * ```javascript * // With numeric fontSize (in points) * engine.block.setTextFontSize(text, 12, 0, 5); * * // With font size and options object * engine.block.setTextFontSize(text, 16, { unit: 'Pixel' }); * engine.block.setTextFontSize(text, 24, { unit: 'Point', from: 0, to: 10 }); * ``` * * @category Block Text * @param id - The text block whose font size should be changed. * @param fontSize - The new font size value. * @param options - An options object with unit, from, and to properties. */ setTextFontSize(id: DesignBlockId, fontSize: number, options?: TextFontSizeOptions): void; /** * Sets the font size for a range of text. * * @category Block Text * @param id - The text block whose font size should be changed. * @param fontSize - The new font size in points. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. * @deprecated Use the new signature with options object instead. * @example * ```typescript * // Before migration * engine.block.setTextFontSize(text, 18, 0, 5); * // After migration * engine.block.setTextFontSize(text, 18, { from: 0, to: 5 }); * ``` */ setTextFontSize(id: DesignBlockId, fontSize: number, from?: number, to?: number): void; /** * Gets the unique font sizes within a range of text. * * ```javascript * // Get all font sizes * const fontSizes = engine.block.getTextFontSizes(text); * * // Get font sizes for a range * const fontSizes = engine.block.getTextFontSizes(text, 0, 10); * * // With options object * const sizesInPx = engine.block.getTextFontSizes(text, { unit: 'Pixel' }); * const sizesInRange = engine.block.getTextFontSizes(text, { unit: 'Millimeter', from: 5, to: 15 }); * ``` * * @category Block Text * @param id - The text block whose font sizes should be returned. * @param options - An options object with unit, from, and to properties. * @returns The ordered unique list of font sizes. */ getTextFontSizes(id: DesignBlockId, options?: TextFontSizeOptions): number[]; /** * Gets the unique font sizes within a range of text. * * @category Block Text * @param id - The text block whose font sizes should be returned. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. * @returns The ordered unique list of font sizes in points. * @deprecated Use the new signature with options object instead. * @example * ```typescript * // Before migration * const fontSizes = engine.block.getTextFontSizes(text, 0, 10); * // After migration * const fontSizes = engine.block.getTextFontSizes(text, { from: 0, to: 10 }); * ``` */ getTextFontSizes(id: DesignBlockId, from?: number, to?: number): number[]; /** * Sets the font style for a range of text. * * ```javascript * engine.block.setTextFontStyle(text, 'italic', 0, 5); * ``` * * @category Block Text * @param id - The text block whose style should be changed. * @param fontStyle - The new style of the selected text range. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. */ setTextFontStyle(id: DesignBlockId, fontStyle: FontStyle, from?: number, to?: number): void; /** * Gets the unique font styles within a range of text. * * ```javascript * const fontStyles = engine.block.getTextFontStyles(text); * ``` * * @category Block Text * @param id - The text block whose font styles should be returned. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. * @returns The ordered unique list of font styles. */ getTextFontStyles(id: DesignBlockId, from?: number, to?: number): FontStyle[]; /** * Gets the unique text cases within a range of text. * * ```javascript * const textCases = engine.block.getTextCases(text); * ``` * * @category Block Text * @param id - The text block whose text cases should be returned. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. * @returns The ordered list of text cases. */ getTextCases(id: DesignBlockId, from?: number, to?: number): TextCase[]; /** * Sets the text case for a range of text. * * ```javascript * engine.block.setTextCase(text, 'Titlecase'); * ``` * * @category Block Text * @param id - The text block whose text case should be changed. * @param textCase - The new text case value. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. */ setTextCase(id: DesignBlockId, textCase: TextCase, from?: number, to?: number): void; /** * Gets the unique text decoration configurations within a range of text. * * Each element of the returned array is a decoration configuration representing * a unique combination of lines, style, color, and thickness found in the range. * * ```javascript * const decorations = engine.block.getTextDecorations(text); * // e.g., [{ lines: ['None'] }, { lines: ['Underline'], style: 'Dashed' }] * ``` * * @category Block Text * @param id - The text block whose text decorations should be returned. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. * @returns The ordered list of unique decoration configurations. */ getTextDecorations(id: DesignBlockId, from?: number, to?: number): TextDecorationConfig[]; /** * Sets the text decoration for a range of text. * * The config specifies which decoration lines, style, underline color, thickness, and offset to apply. * Use `{ lines: ['None'] }` to remove all decorations. * * ```javascript * engine.block.setTextDecoration(text, { lines: ['Underline'] }); * engine.block.setTextDecoration(text, { lines: ['Underline', 'Strikethrough'], style: 'Dashed' }); * engine.block.setTextDecoration(text, { lines: ['Overline'], style: 'Wavy', underlineThickness: 2.0 }); * engine.block.setTextDecoration(text, { lines: ['None'] }); // Remove decorations * ``` * * @category Block Text * @param id - The text block whose text decoration should be changed. * @param config - The decoration configuration to apply. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. */ setTextDecoration(id: DesignBlockId, config: TextDecorationConfig, from?: number, to?: number): void; /** * Toggles the underline decoration for a text range. * * If any part of the range does not have underline, the entire range gets underline. * If the entire range already has underline, it is removed. * Other decoration lines (strikethrough, overline) on each text run are preserved. * * ```javascript * engine.block.toggleTextDecorationUnderline(text); * ``` * * @category Block Text * @param id - The text block to modify. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. */ toggleTextDecorationUnderline(id: DesignBlockId, from?: number, to?: number): void; /** * Toggles the strikethrough decoration for a text range. * * If any part of the range does not have strikethrough, the entire range gets strikethrough. * If the entire range already has strikethrough, it is removed. * Other decoration lines (underline, overline) on each text run are preserved. * * ```javascript * engine.block.toggleTextDecorationStrikethrough(text); * ``` * * @category Block Text * @param id - The text block to modify. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. */ toggleTextDecorationStrikethrough(id: DesignBlockId, from?: number, to?: number): void; /** * Toggles the overline decoration for a text range. * * If any part of the range does not have overline, the entire range gets overline. * If the entire range already has overline, it is removed. * Other decoration lines (underline, strikethrough) on each text run are preserved. * * ```javascript * engine.block.toggleTextDecorationOverline(text); * ``` * * @category Block Text * @param id - The text block to modify. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. */ toggleTextDecorationOverline(id: DesignBlockId, from?: number, to?: number): void; /** * Gets the paragraph-level horizontal alignment override for a specific paragraph, * or the block-level alignment. * * ```javascript * const alignment = engine.block.getTextHorizontalAlignment(text, 0); * const blockAlignment = engine.block.getTextHorizontalAlignment(text); // paragraphIndex defaults to -1 * // e.g. 'Left' | 'Center' | 'Right' | 'Auto' | undefined * ``` * * @category Block Text * @param id - The text block to query. * @param paragraphIndex - The 0-based index of the paragraph to query. * Negative values return the block-level `text/horizontalAlignment` setting. * @returns The paragraph override, `undefined` if no override is set, * or the block-level alignment when `paragraphIndex < 0`. */ getTextHorizontalAlignment(id: DesignBlockId, paragraphIndex?: number): TextHorizontalAlignment | undefined; /** * Sets the paragraph-level horizontal alignment override for one or all paragraphs. * * ```javascript * engine.block.setTextHorizontalAlignment(text, 'Center', 0); * engine.block.setTextHorizontalAlignment(text, undefined, 0); // clear override * engine.block.setTextHorizontalAlignment(text, 'Right'); // apply to all * ``` * * @category Block Text * @param id - The text block to modify. * @param alignment - The alignment to apply, or `undefined` to clear the paragraph override. * @param paragraphIndex - The 0-based index of the paragraph. * Negative values clear all paragraph-level alignment overrides and, when `alignment` is provided, * apply that alignment to the whole text block. */ setTextHorizontalAlignment(id: DesignBlockId, alignment: TextHorizontalAlignment | undefined, paragraphIndex?: number): void; /** * Gets the list style for a specific paragraph of a text block. * * ```javascript * const listStyle = engine.block.getTextListStyle(text, 0); * ``` * * @category Block Text * @param id - The text block whose list style should be returned. * @param paragraphIndex - The 0-based index of the paragraph. * @returns The list style of the paragraph. */ getTextListStyle(id: DesignBlockId, paragraphIndex: number): ListStyle; /** * Sets the list style for a specific paragraph or all paragraphs of a text block. * * ```javascript * engine.block.setTextListStyle(text, 'Unordered'); * engine.block.setTextListStyle(text, 'Ordered', 0, 2); * ``` * * @category Block Text * @param id - The text block whose list style should be changed. * @param listStyle - The list style to apply. * @param paragraphIndex - The 0-based index of the paragraph to modify. Negative values apply to all paragraphs. * @param listLevel - Optional list nesting level to set atomically with the list style (0 = outermost). * When omitted the existing list level of each paragraph is preserved. * Has no visual effect when listStyle is 'None'. */ setTextListStyle(id: DesignBlockId, listStyle: ListStyle, paragraphIndex?: number, listLevel?: number): void; /** * Gets the list nesting level for a specific paragraph of a text block. * * ```javascript * const listLevel = engine.block.getTextListLevel(text, 0); * ``` * * @category Block Text * @param id - The text block whose list level should be returned. * @param paragraphIndex - The 0-based index of the paragraph. * @returns The list nesting level of the paragraph. */ getTextListLevel(id: DesignBlockId, paragraphIndex: number): number; /** * Sets the list nesting level for a specific paragraph or all paragraphs of a text block. * * ```javascript * engine.block.setTextListLevel(text, 1); * engine.block.setTextListLevel(text, 2, 0); * ``` * * @category Block Text * @param id - The text block whose list level should be changed. * @param listLevel - The list nesting level (0 = outermost). * @param paragraphIndex - The 0-based index of the paragraph to modify. Negative values apply to all paragraphs. */ setTextListLevel(id: DesignBlockId, listLevel: number, paragraphIndex?: number): void; /** * Returns the 0-based paragraph indices that overlap the given UTF-16 range. * * The range is half-open (exclusive): `from` is inclusive, `to` is exclusive (one past the last * code unit of interest). When `from === to` the range is a cursor position and the paragraph * containing `from` is returned. This convention matches `getTextCursorRange`, so the values * it returns can be passed directly without adjustment. * * Negative values for either parameter cause all paragraph indices to be returned. * * ```javascript * const indices = engine.block.getTextParagraphIndices(text); * const { from, to } = engine.block.getTextCursorRange(); * const indices = engine.block.getTextParagraphIndices(text, from, to); * ``` * * @category Block Text * @param id - The text block to query. * @param from - The inclusive start UTF-16 index. Negative values reference the entire text. * @param to - The exclusive end UTF-16 index. Negative values reference the entire text. * @returns The paragraph indices overlapping the range. */ getTextParagraphIndices(id: DesignBlockId, from?: number, to?: number): number[]; /** * Checks if the bold font weight can be toggled for a range of text. * * Returns true if any part of the range is not bold and the bold font is available. * * ```javascript * const canToggleBold = engine.block.canToggleBoldFont(text); * ``` * * @category Block Text * @param id - The text block to check. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. * @returns Whether the font weight can be toggled. */ canToggleBoldFont(id: DesignBlockId, from?: number, to?: number): boolean; /** * Checks if the italic font style can be toggled for a range of text. * * Returns true if any part of the range is not italic and the italic font is available. * * ```javascript * const canToggleItalic = engine.block.canToggleItalicFont(text); * ``` * * @category Block Text * @param id - The text block to check. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. * @returns Whether the font style can be toggled. */ canToggleItalicFont(id: DesignBlockId, from?: number, to?: number): boolean; /** * Toggles the font weight of a text range between bold and normal. * * If any part of the range is not bold, the entire range becomes bold. If the entire range is already bold, it becomes normal. * * * ```javascript * engine.block.toggleBoldFont(text); * ``` * * @category Block Text * @param id - The text block to modify. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. */ toggleBoldFont(id: DesignBlockId, from?: number, to?: number): void; /** * Toggles the font style of a text range between italic and normal. * * If any part of the range is not italic, the entire range becomes italic. If the entire range is already italic, it becomes normal. * * * ```javascript * engine.block.toggleItalicFont(text); * ``` * * @category Block Text * @param id - The text block to modify. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. */ toggleItalicFont(id: DesignBlockId, from?: number, to?: number): void; /** * Sets the font and typeface for an entire text block. * * Existing formatting is reset. * * ```javascript * engine.block.setFont(text, font.uri, typeface); * ``` * * @category Block Text * @param id - The text block whose font should be changed. * @param fontFileUri - The URI of the new font file. * @param typeface - The typeface of the new font. */ setFont(id: DesignBlockId, fontFileUri: string, typeface: Typeface): void; /** * Sets the typeface for a range of text. * * The current formatting is retained as much as possible. * * * ```javascript * engine.block.setTypeface(text, typeface, 2, 5); * ``` * * @category Block Text * @param id - The text block whose font should be changed. * @param typeface - The new typeface. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. */ setTypeface(id: DesignBlockId, typeface: Typeface, from?: number, to?: number): void; /** * Gets the base typeface of a text block. * * This does not return the typefaces of individual text runs. * * ```javascript * const defaultTypeface = engine.block.getTypeface(text); * ``` * * @category Block Text * @param id - The text block whose typeface should be queried. * @returns the typeface property of the text block. */ getTypeface(id: DesignBlockId): Typeface; /** * Gets the unique typefaces within a range of text. * * ```javascript * const currentTypefaces = engine.block.getTypefaces(text); * ``` * * @category Block Text * @param id - The text block whose typefaces should be queried. * @param from - The start index of the UTF-16 range. Defaults to the start of the current selection or text. * @param to - The end index of the UTF-16 range. Defaults to the end of the current selection or text. * @returns The unique typefaces in the range. */ getTypefaces(id: DesignBlockId, from?: number, to?: number): Typeface[]; /** * Gets the current text cursor or selection range. * * Returns the UTF-16 indices of the selected range of the text block that is currently being * edited. The range is half-open (exclusive): `from` is the index of the first selected code * unit, `to` is one past the last selected code unit. When `from === to` the cursor is * positioned between characters with no text selected. * * ```javascript * const selectedRange = engine.block.getTextCursorRange(); * ``` * * @category Block Text * @returns The selected UTF-16 range or `{ from: -1, to: -1 }` if no text block is being edited. */ getTextCursorRange(): Range_2; /** * Sets the text cursor range (selection) within the text block that is currently being edited. * * @category Block Text * @param range - The UTF-16 range to set as the selection. If `from` equals `to`, the cursor is positioned at that index. If `from` and `to` are set to -1, the whole text is selected. * @throws Error if no text block is currently being edited or if the range is invalid. */ setTextCursorRange(range: Range_2): void; /** * Gets the number of visible lines in a text block. * * ```javascript * const lineCount = engine.block.getTextVisibleLineCount(text); * ``` * * @category Block Text * @param id - The text block whose line count should be returned. * @returns The number of lines in the text block. */ getTextVisibleLineCount(id: DesignBlockId): number; /** * Gets the global bounding box of a visible line of text. * * The values are in the scene's global coordinate space. * * ```javascript * const lineBoundingBox = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH(text, 0); * ``` * * @category Block Text * @param id - The text block whose line bounding box should be returned. * @param lineIndex - The index of the line whose bounding box should be returned. * @returns The bounding box of the line. */ getTextVisibleLineGlobalBoundingBoxXYWH(id: DesignBlockId, lineIndex: number): XYWH; /** * Gets the text content of a visible line. * * @category Block Text * @param id - The text block whose line content should be returned. * @param lineIndex - The index of the line whose content should be returned. * @returns The text content of the line. */ getTextVisibleLineContent(id: DesignBlockId, lineIndex: number): string; /** * Gets the effective horizontal alignment of a text block. * If the alignment is set to Auto, this returns the resolved alignment (Left or Right) * based on the text direction of the first logical run. This never returns 'Auto'. * * @category Block Text * @param id - The text block whose effective alignment should be returned. * @returns The effective alignment ('Left', 'Right', or 'Center'). */ getTextEffectiveHorizontalAlignment(id: DesignBlockId): 'Left' | 'Right' | 'Center'; /** * Checks if a block has fill properties. * * @category Block Fills * @param id - The block to query. * @returns true, if the block has fill properties. * @deprecated Use supportsFill instead. */ hasFill(id: DesignBlockId): boolean; /** * Checks if a block supports a fill. * * @category Block Fills * @param id - The block to query. * @returns true, if the block supports a fill. */ supportsFill(id: DesignBlockId): boolean; /** * Checks if the fill of a block is enabled. * * ```javascript * engine.block.isFillEnabled(block); * ``` * * @category Block Fills * @param id - The block whose fill state should be queried. * @returns The fill state. */ isFillEnabled(id: DesignBlockId): boolean; /** * Enables or disables the fill of a block. * * ```javascript * engine.block.setFillEnabled(block, false); * ``` * * @category Block Fills * @param id - The block whose fill should be enabled or disabled. * @param enabled - If true, the fill will be enabled. */ setFillEnabled(id: DesignBlockId, enabled: boolean): void; /** * Queries whether the fill of a block is marked as overprint for PDF export. * * ```javascript * const overprint = engine.block.getFillOverprint(block); * ``` * * @category Block Fills * @param id - The block whose fill overprint flag should be queried. * @returns The fill overprint flag. */ getFillOverprint(id: DesignBlockId): boolean; /** * Marks the fill of a block as overprint for PDF export. * * The flag is only honored by the PDF writer when the fill uses a spot color * (Separation/DeviceN). For process-color fills it is a silent no-op. On-screen * rendering ignores the flag. * * ```javascript * engine.block.setFillOverprint(block, true); * ``` * * @category Block Fills * @param id - The block whose fill overprint flag should be set. * @param overprint - If true, the fill is marked as overprint in exported PDFs. */ setFillOverprint(id: DesignBlockId, overprint: boolean): void; /** * Gets the fill block attached to a given block. * * @category Block Fills * @param id - The block whose fill block should be returned. * @returns The block that currently defines the given block's fill. */ getFill(id: DesignBlockId): DesignBlockId; /** * Sets the fill block for a given block. * * The previous fill block is not destroyed automatically. * * @category Block Fills * @param id - The block whose fill should be changed. * @param fill - The new fill block. */ setFill(id: DesignBlockId, fill: DesignBlockId): void; /** * Sets the solid fill color of a block. * * @category Block Fills * @param id - The block whose fill color should be set. * @param r - The red color component in the range of 0 to 1. * @param g - The green color component in the range of 0 to 1. * @param b - The blue color component in the range of 0 to 1. * @param a - The alpha color component in the range of 0 to 1. Defaults to 1. */ setFillSolidColor(id: DesignBlockId, r: number, g: number, b: number, a?: number): void; /** * Gets the solid fill color of a block as RGBA values. * * @category Block Fills * @param id - The block whose fill color should be queried. * @returns The fill color. */ getFillSolidColor(id: DesignBlockId): RGBA; /** * Enables or disables the placeholder function for a block. * * When set to `true`, the given block becomes selectable by users and its placeholder capabilities are enabled in Adopter mode. * * ```javascript * engine.block.setPlaceholderEnabled(block, true); * ``` * * @category Block Placeholder * @param id - The block whose placeholder function should be enabled or disabled. * @param enabled - Whether the function should be enabled or disabled. */ setPlaceholderEnabled(id: DesignBlockId, enabled: boolean): void; /** * Checks if the placeholder function for a block is enabled and can be selected by users in Adopter mode. * * ```javascript * const placeholderIsEnabled = engine.block.isPlaceholderEnabled(block); * ``` * * @category Block Placeholder * @param id - The block whose placeholder function state should be queried. * @returns The enabled state of the placeholder function. */ isPlaceholderEnabled(id: DesignBlockId): boolean; /** * Checks if a block supports placeholder behavior. * * @category Block Placeholder * @param id - The block to query. * @returns True, if the block supports placeholder behavior. * @deprecated Use supportsPlaceholderBehavior instead. */ hasPlaceholderBehavior(id: DesignBlockId): boolean; /** * Checks if a block supports placeholder behavior. * * ```javascript * const placeholderBehaviorSupported = engine.block.supportsPlaceholderBehavior(block); * ``` * * @category Block Placeholder * @param id - The block to query. * @returns True, if the block supports placeholder behavior. */ supportsPlaceholderBehavior(id: DesignBlockId): boolean; /** * Enables or disables the placeholder behavior for a block. * * When its fill block is set to `true`, an image block will act as a placeholder, showing a control overlay and a replacement button. * * ```javascript * engine.block.setPlaceholderBehaviorEnabled(block, true); * ``` * * @category Block Placeholder * @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; /** * Checks if the placeholder behavior for a block is enabled. * * ```javascript * engine.block.setPlaceholderBehaviorEnabled(block, true); * ``` * * @category Block Placeholder * @param id - The block whose placeholder behavior state should be queried. * @returns The enabled state of the placeholder behavior. */ isPlaceholderBehaviorEnabled(id: DesignBlockId): boolean; /** * Checks if a block supports placeholder controls. * * @category Block Placeholder * @param id - The block to query. * @returns True, if the block supports placeholder controls. * @deprecated Use supportsPlaceholderControls instead. */ hasPlaceholderControls(id: DesignBlockId): boolean; /** * Checks if a block supports placeholder controls, e.g. a control overlay and a replacement button. * * @category Block Placeholder * @param id - The block to query. * @returns True, if the block supports placeholder controls. */ supportsPlaceholderControls(id: DesignBlockId): boolean; /** * Enables or disables the placeholder overlay pattern. * * ```javascript * engine.block.setPlaceholderControlsOverlayEnabled(block, true); * ``` * * @category Block Placeholder * @param id - The block whose placeholder overlay should be enabled or disabled. * @param enabled - Whether the placeholder overlay should be shown or not. */ setPlaceholderControlsOverlayEnabled(id: DesignBlockId, enabled: boolean): void; /** * Checks if the placeholder overlay pattern is enabled. * * ```javascript * const overlayEnabled = engine.block.isPlaceholderControlsOverlayEnabled(block); * ``` * * @category Block Placeholder * @param id - The block whose placeholder overlay visibility state should be queried. * @returns The visibility state of the block's placeholder overlay pattern. */ isPlaceholderControlsOverlayEnabled(id: DesignBlockId): boolean; /** * Enables or disables the placeholder button. * * ```javascript * engine.block.setPlaceholderControlsButtonEnabled(block, true); * ``` * * @category Block Placeholder * @param id - The block whose placeholder button should be shown or not. * @param enabled - Whether the placeholder button should be shown or not. */ setPlaceholderControlsButtonEnabled(id: DesignBlockId, enabled: boolean): void; /** * Checks if the placeholder button is enabled. * * ```javascript * const buttonEnabled = engine.block.isPlaceholderControlsButtonEnabled(block); * ``` * * @category Block Placeholder * @param id - The block whose placeholder button visibility state should be queried. * @returns The visibility state of the block's placeholder button. */ isPlaceholderControlsButtonEnabled(id: DesignBlockId): boolean; /** * Sets a metadata value for a given key on a block. * * If the key does not exist, it will be added. * * @category Block Metadata * @param id - The block whose metadata will be accessed. * @param key - The key used to identify the desired piece of metadata. * @param value - The value to set. */ setMetadata(id: DesignBlockId, key: string, value: string): void; /** * Gets a metadata value for a given key from a block. * * @category Block Metadata * @param id - The block whose metadata will be accessed. * @param key - The key used to identify the desired piece of metadata. * @returns The value associated with the key. */ getMetadata(id: DesignBlockId, key: string): string; /** * Checks if a block has metadata for a given key. * * @category Block Metadata * @param id - The block whose metadata will be accessed. * @param key - The key used to identify the desired piece of metadata. * @returns Whether the key exists. */ hasMetadata(id: DesignBlockId, key: string): boolean; /** * Finds all metadata keys on a block. * * @category Block Metadata * @param id - The block whose metadata will be accessed. * @returns A list of all metadata keys on this block. */ findAllMetadata(id: DesignBlockId): string[]; /** * Removes metadata for a given key from a block. * * @category Block Metadata * @param id - The block whose metadata will be accessed. * @param key - The key used to identify the desired piece of metadata. */ removeMetadata(id: DesignBlockId, key: string): void; /** * Enables or disables a scope for a block. * * ```javascript * // Allow the user to move the image block. * engine.block.setScopeEnabled(image, 'layer/move', true); * ``` * * @category Block Scopes * @param id - The block whose scope should be enabled or disabled. * @param key - The scope to enable or disable. * @param enabled - Whether the scope should be enabled or disabled. */ setScopeEnabled(id: DesignBlockId, key: Scope, enabled: boolean): void; /** * Checks if a scope is enabled for a block. * * ```javascript * engine.block.isScopeEnabled(image, 'layer/move'); * ``` * * @category Block Scopes * @param id - The block whose scope state should be queried. * @param key - The scope to query. * @returns The enabled state of the scope for the given block. */ isScopeEnabled(id: DesignBlockId, key: Scope): boolean; /** * Checks if an operation is allowed by a block's scopes. * * ```javascript * // This will return true when the global scope is set to 'Defer'. * engine.block.isAllowedByScope(image, 'layer/move'); * ``` * * @category Block Scopes * @param id - The block to check. * @param key - The scope to check. * @returns Whether the scope is allowed for the given block. */ isAllowedByScope(id: DesignBlockId, key: Scope): boolean; /** * Checks if a block has a duration property. * * @category Block Video * @param id - The block to query. * @returns true if the block has a duration property. * @deprecated Use supportsDuration instead. */ hasDuration(id: DesignBlockId): boolean; /** * Checks if a block supports a duration property. * * @category Block Video * @param id - The block to query. * @returns true if the block supports a duration property. */ supportsDuration(id: DesignBlockId): boolean; /** * Sets the playback duration of a block. * * The duration defines how long the block is active in the scene during playback. * * @category Block Video * @param id - The block whose duration should be changed. * @param duration - The new duration in seconds. */ setDuration(id: DesignBlockId, duration: number): void; /** * Gets the playback duration of a block. * * @category Block Video * @param id - The block whose duration should be returned. * @returns The block's duration in seconds. */ getDuration(id: DesignBlockId): number; /** * Sets a block as the page's duration source. * * This causes the page's total duration to be automatically determined by this block. * * @category Block Video * @param page - The page block for which it should be enabled. * @param id - The block that should become the duration source. */ setPageDurationSource(page: DesignBlockId, id: DesignBlockId): void; /** * Checks if a block is the duration source for its page. * * @category Block Video * @param id - The block whose duration source property should be queried. * @returns true if the block is a duration source for a page. */ isPageDurationSource(id: DesignBlockId): boolean; /** * Checks if a block can be set as the page's duration source. * * @category Block Video * @param page - The page to check against. * @param id - The block to query. * @returns true, if the block can be marked as the page's duration source. */ supportsPageDurationSource(page: DesignBlockId, id: DesignBlockId): boolean; /** * Removes a block as the page's duration source. * * If a scene or page is given, it is deactivated for all blocks within it. * * @category Block Video * @param id - The block whose duration source property should be removed. */ removePageDurationSource(id: DesignBlockId): void; /** * Checks if a block has a time offset property. * * @category Block Video * @param id - The block to query. * @returns true, if the block has a time offset property. * @deprecated Use supportsTimeOffset instead. */ hasTimeOffset(id: DesignBlockId): boolean; /** * Checks if a block supports a time offset. * * @category Block Video * @param id - The block to query. * @returns true, if the block supports a time offset. */ supportsTimeOffset(id: DesignBlockId): boolean; /** * Sets the time offset of a block relative to its parent. * * The time offset controls when the block first becomes active in the timeline. * * @category Block Video * @param id - The block whose time offset should be changed. * @param offset - The new time offset in seconds. */ setTimeOffset(id: DesignBlockId, offset: number): void; /** * Gets the time offset of a block relative to its parent. * * @category Block Video * @param id - The block whose time offset should be queried. * @returns The time offset of the block in seconds. */ getTimeOffset(id: DesignBlockId): number; /** * Checks if a block has trim properties. * * @category Block Video * @param id - The block to query. * @returns true, if the block has trim properties. * @deprecated Use supportsTrim instead. */ hasTrim(id: DesignBlockId): boolean; /** * Checks if a block supports trim properties. * * @category Block Video * @param id - The block to query. * @returns true, if the block supports trim properties. */ supportsTrim(id: DesignBlockId): boolean; /** * Sets the trim offset of a block's media content. * * This sets the time within the media clip where playback should begin. * * @category Block Video * @param id - The block whose trim should be updated. * @param offset - The new trim offset, measured in timeline seconds (scaled by playback rate). */ setTrimOffset(id: DesignBlockId, offset: number): void; /** * Gets the trim offset of a block's media content. * * @category Block Video * @param id - The block whose trim offset should be queried. * @returns the trim offset in seconds. */ getTrimOffset(id: DesignBlockId): number; /** * Sets the trim length of a block's media content. * * This is the duration of the media clip that should be used for playback. * * @category Block Video * @param id - The object whose trim length should be updated. * @param length - The new trim length in seconds. */ setTrimLength(id: DesignBlockId, length: number): void; /** * Gets the trim length of a block's media content. * * @category Block Video * @param id - The object whose trim length should be queried. * @returns The trim length of the object in seconds. */ getTrimLength(id: DesignBlockId): number; /** * Splits a block at the specified time. * * The original block will be trimmed to end at the split time, and the returned duplicate * will start at the split time and continue to the original end time. * * ```javascript * const duplicate = engine.block.split(video, 10.0); * ``` * * @category Block * @param id - The block to split. * @param atTime - The time (in seconds) relative to the block's time offset where the split should occur. * @param options - The options for configuring the split operation. * @returns The newly created second half of the split block. */ split(id: DesignBlockId, atTime: number, options?: SplitOptions): DesignBlockId; /** * Gets the total duration of a scene in video mode. * * @category Block Video * @param scene - The scene whose duration is being queried. * @returns the total scene duration. * @deprecated Use `getDuration` and pass a page block. */ getTotalSceneDuration(scene: DesignBlockId): number; /** * Sets whether a block should play its content during active playback. * * @category Block Video * @param id - The block that should be updated. * @param enabled - Whether the block should be playing its contents. */ setPlaying(id: DesignBlockId, enabled: boolean): void; /** * Checks if a block is playing its content. * * @category Block Video * @param id - The block to query. * @returns whether the block is playing during playback. */ isPlaying(id: DesignBlockId): boolean; /** * Checks if a block has a playback time property. * * @category Block Video * @param id - The block to query. * @returns whether the block has a playback time property. * @deprecated Use supportsPlaybackTime instead. */ hasPlaybackTime(id: DesignBlockId): boolean; /** * Checks if a block supports a playback time property. * * @category Block Video * @param id - The block to query. * @returns whether the block supports a playback time property. */ supportsPlaybackTime(id: DesignBlockId): boolean; /** * Sets the current playback time of a block's content. * * @category Block Video * @param id - The block whose playback time should be updated. * @param time - The new playback time of the block in seconds. */ setPlaybackTime(id: DesignBlockId, time: number): void; /** * Gets the current playback time of a block's content. * * @category Block Video * @param id - The block to query. * @returns The playback time of the block in seconds. */ getPlaybackTime(id: DesignBlockId): number; /** * Checks if a block is visible at the current scene playback time. * * @category Block State * @param id - The block to query. * @returns Whether the block should be visible on the canvas at the current playback time. */ isVisibleAtCurrentPlaybackTime(id: DesignBlockId): boolean; /** * Enables or disables solo playback for a block. * * When enabled, only this block's content will play while the rest of the scene remains paused. * * ```javascript * engine.block.setSoloPlaybackEnabled(videoFill, true); * ``` * * @category Block Video * @param id - The block or fill to update. * @param enabled - Whether solo playback should be enabled. */ setSoloPlaybackEnabled(id: DesignBlockId, enabled: boolean): void; /** * Checks if solo playback is enabled for a block. * * ```javascript * engine.block.isSoloPlaybackEnabled(videoFill); * ``` * * @category Block Video * @param id - The block or fill to query. * @returns Whether solo playback is enabled for this block. */ isSoloPlaybackEnabled(id: DesignBlockId): boolean; /** * Checks if a block has playback controls. * * @category Block Video * @param id - The block to query. * @returns Whether the block has playback control. * @deprecated Use supportsPlaybackControl instead */ hasPlaybackControl(id: DesignBlockId): boolean; /** * Checks if a block supports playback controls. * * @category Block Video * @param id - The block to query. * @returns Whether the block supports playback control. */ supportsPlaybackControl(id: DesignBlockId): boolean; /** * Sets whether a block's media content should loop. * * @category Block Video * @param id - The block or video fill to update. * @param looping - Whether the block should loop to the beginning or stop. */ setLooping(id: DesignBlockId, looping: boolean): void; /** * Checks if a block's media content is set to loop. * * @category Block Video * @param id - The block to query. * @returns Whether the block is looping. */ isLooping(id: DesignBlockId): boolean; /** * Sets whether the audio of a block is muted. * * @category Block Video * @param id - The block or video fill to update. * @param muted - Whether the audio should be muted. */ setMuted(id: DesignBlockId, muted: boolean): void; /** * Checks if a block's audio is muted due to engine rules. * * @category Block Video * @param id - The block to query. * @returns Whether the block is force muted. */ isForceMuted(id: DesignBlockId): boolean; /** * Checks if a block's audio is muted. * * @category Block Video * @param id - The block to query. * @returns Whether the block is muted. */ isMuted(id: DesignBlockId): boolean; /** * Sets the audio volume of a block. * * @category Block Video * @param id - The block or video fill to update. * @param volume - The desired volume, ranging from 0.0 to 1.0. */ setVolume(id: DesignBlockId, volume: number): void; /** * Gets the audio volume of a block. * * @category Block Video * @param id - The block to query. * @returns The volume, ranging from 0.0 to 1.0. */ getVolume(id: DesignBlockId): number; /** * Sets the playback speed multiplier of a block that supports playback control. * Note: This also adjusts the trim and duration of the block. * Video fills running faster than 3.0x are force muted until reduced to 3.0x or below. * * @category Block Video * @param id - The block or video fill to update. * @param speed - The desired playback speed multiplier. Valid range is [0.25, 3.0] for audio blocks and * [0.25, infinity) for video fills. */ setPlaybackSpeed(id: DesignBlockId, speed: number): void; /** * Gets the playback speed multiplier of a block that supports playback control. * * @category Block Video * @param id - The block to query. * @returns The playback speed multiplier. */ getPlaybackSpeed(id: DesignBlockId): number; /** * Forces the loading of a block's audio/video resource. * * If the resource failed to load previously, it will be reloaded. * * @category Block Video * @param id - The video fill or audio block whose resource should be loaded. * @returns A Promise that resolves once the resource has finished loading. */ forceLoadAVResource(id: DesignBlockId): Promise; /** * Checks if a block's audio/video resource is loaded. * * @category Block Video * @param id - The video fill or audio block. * @returns The loading state of the resource. * @experimental This API is experimental and may change or be removed in future versions. */ unstable_isAVResourceLoaded(id: DesignBlockId): boolean; /** * Gets the total duration of a block's audio/video resource. * * @category Block Video * @param id - The video fill or audio block. * @returns The video or audio file duration in seconds. */ getAVResourceTotalDuration(id: DesignBlockId): number; /** * Gets the width of a block's video resource. * * @category Block Video * @param id - The video fill block. * @returns The video width in pixels. */ getVideoWidth(id: DesignBlockId): number; /** * Gets the height of a block's video resource. * * @category Block Video * @param id - The video fill block. * @returns The video height in pixels. */ getVideoHeight(id: DesignBlockId): number; /** * Generate a sequence of thumbnails for the given video fill or design block. * * Note: There can only be one thumbnail generation request in progress for a given block. * Note: During playback, the thumbnail generation will be paused. * @category Block Video * @param id - The video fill or design block. * @param thumbnailHeight - The height of each thumbnail. * @param timeBegin - The start time in seconds for the thumbnail sequence. * @param timeEnd - The end time in seconds for the thumbnail sequence. * @param numberOfFrames - The number of frames to generate. * @param onFrame - A callback that receives the frame index and image data. * @returns A function to cancel the thumbnail generation request. */ generateVideoThumbnailSequence(id: DesignBlockId, thumbnailHeight: number, timeBegin: number, timeEnd: number, numberOfFrames: number, onFrame: (frameIndex: number, result: ImageData | Error) => void): () => void; /** * Generate a thumbnail sequence for the given audio block or video fill. * * A thumbnail in this case is a chunk of samples in the range of 0 to 1. * In case stereo data is requested, the samples are interleaved, starting with the left channel. * Note: During playback, the thumbnail generation will be paused. * * @category Block Video * @param id - The audio block or video fill. * @param samplesPerChunk - The number of samples per chunk. * @param timeBegin - The start time in seconds for the thumbnail sequence. * @param timeEnd - The end time in seconds for the thumbnail sequence. * @param numberOfSamples - The total number of samples to generate. * @param numberOfChannels - The number of channels in the output (1 for mono, 2 for stereo). * @param onChunk - A callback that receives the chunk index and sample data. * @returns A function to cancel the thumbnail generation request. */ generateAudioThumbnailSequence(id: DesignBlockId, samplesPerChunk: number, timeBegin: number, timeEnd: number, numberOfSamples: number, numberOfChannels: number, onChunk: (chunkIndex: number, result: Float32Array | Error) => void): () => void; /** * Generates a thumbnail for a video fill. * * @category Block Video * @param id - The video fill. * @param thumbnailHeight - The height of a thumbnail. The width will be calculated from the video aspect ratio. * @returns A promise that resolves with a thumbnail encoded as a JPEG blob. * @deprecated Use `generateVideoThumbnailSequence` instead. */ getVideoFillThumbnail(id: DesignBlockId, thumbnailHeight: number): Promise; /** * Generates a thumbnail atlas for a video fill. * * @category Block Video * @param id - The video fill. * @param numberOfColumns - The number of columns in the atlas. * @param numberOfRows - The number of rows in the atlas. * @param thumbnailHeight - The height of a single thumbnail. * @returns A promise that resolves with a thumbnail atlas encoded as a JPEG blob. * @deprecated Use `generateVideoThumbnailSequence` instead. */ getVideoFillThumbnailAtlas(id: DesignBlockId, numberOfColumns: number, numberOfRows: number, thumbnailHeight: number): Promise; /** * Generates a thumbnail atlas for a page. * * @category Block Video * @param id - The page. * @param numberOfColumns - The number of columns in the atlas. * @param numberOfRows - The number of rows in the atlas. * @param thumbnailHeight - The height of a single thumbnail. * @returns A promise that resolves with a thumbnail atlas encoded as a JPEG blob. * @deprecated Use `generateVideoThumbnailSequence` instead. */ getPageThumbnailAtlas(id: DesignBlockId, numberOfColumns: number, numberOfRows: number, thumbnailHeight: number): Promise; /** * Creates a new animation block. * * @category Block Animations * @param type - The type of animation to create. * @returns The handle of the new animation instance. */ createAnimation(type: AnimationType): DesignBlockId; /** * Checks if a block supports animation. * * @category Block Animations * @param id - The block to query. * @returns Whether the block supports animation. */ supportsAnimation(id: DesignBlockId): boolean; /** * Sets the "in" animation of a block. * * @category Block Animations * @param id - The block whose "in" animation should be set. * @param animation - The animation to set. */ setInAnimation(id: DesignBlockId, animation: DesignBlockId): void; /** * Sets the "loop" animation of a block. * * @category Block Animations * @param id - The block whose "loop" animation should be set. * @param animation - The animation to set. */ setLoopAnimation(id: DesignBlockId, animation: DesignBlockId): void; /** * Sets the "out" animation of a block. * * @category Block Animations * @param id - The block whose "out" animation should be set. * @param animation - The animation to set. */ setOutAnimation(id: DesignBlockId, animation: DesignBlockId): void; /** * Gets the "in" animation of a block. * * @category Block Animations * @param id - The block whose "in" animation should be queried. * @returns The "in" animation of the block. */ getInAnimation(id: DesignBlockId): DesignBlockId; /** * Gets the "loop" animation of a block. * * @category Block Animations * @param id - The block whose "loop" animation should be queried. * @returns The "loop" animation of the block. */ getLoopAnimation(id: DesignBlockId): DesignBlockId; /** * Gets the "out" animation of a block. * * @category Block Animations * @param id - The block whose "out" animation should be queried. * @returns The "out" animation of the block. */ getOutAnimation(id: DesignBlockId): DesignBlockId; /** * Updates a pixel stream fill block with a new pixel buffer. * * @category Block Video * @param id - The pixel stream fill block. * @param buffer - A canvas or video element to use as the pixel source. */ setNativePixelBuffer(id: number, buffer: HTMLCanvasElement | HTMLVideoElement): void; /** * Gets the current state of a block. * * A block's state is determined by its own state and that of its shape, fill, and effects. * * ```javascript * const state = engine.block.getState(block); * ``` * * @category Block State * @param id - The block to query. * @returns The block's state: 'Ready', 'Pending', or 'Error'. */ getState(id: DesignBlockId): BlockState; /** * Sets the state of a block. * * ```javascript * engine.block.setState(video, {type: 'Pending', progress: 0.5}); * engine.block.setState(page, {type: 'Ready'}); * engine.block.setState(image, {type: 'Error', error: 'ImageDecoding'}); * ``` * * @category Block State * @param id - The block whose state should be set. * @param state - The new state to set. */ setState(id: DesignBlockId, state: BlockState): void; /** * Subscribes to state changes for a set of blocks. * * The state is determined by the block and its associated shape, fill, and effects. * * ```javascript * const unsubscribe = engine.block.onStateChanged([], (blocks) => { * blocks.forEach(block => console.log(block)); * }); * ``` * * @category Block Events * @param ids - A list of block IDs to monitor. If empty, all blocks are monitored. * @param callback - The function to call when a state changes. * @returns A function to unsubscribe from the event. */ onStateChanged: (ids: DesignBlockId[], callback: (ids: DesignBlockId[]) => void) => (() => void); /** * Forces the loading of resources for a set of blocks and their children. * * This is useful for preloading resources. If a resource failed to load previously, it will be reloaded. * * Pass an empty array to load resources for every block currently known to the engine. * * @category Block Lifecycle * @param ids - The blocks whose resources should be loaded. Pass an empty array to load resources for every * block currently known to the engine. * @returns A Promise that resolves once all resources have finished loading. */ forceLoadResources(ids: DesignBlockId[]): Promise; /** * Adds an image to the current page. The image will be automatically loaded * and sized appropriately. In Video mode, timeline and animation options can be applied. * * @category Helper * @param url - URL or path to the image file * @param options - Configuration options for the image * @returns Promise that resolves to the ID of the created image block * @throws Error if no current page exists */ addImage(url: string, options?: AddImageOptions): Promise; /** * Adds a video block to the current scene page. The video will be positioned and sized * according to the provided parameters. Timeline and animation effects can be applied. * * @category Helper * @param url - URL or path to the video file * @param width - Width of the video in scene design units * @param height - Height of the video in scene design units * @param options - Configuration options for the video * @returns Promise that resolves to the ID of the created video block * @throws Error if no current page exists */ addVideo(url: string, width: number, height: number, options?: AddVideoOptions): Promise; /** * Applies an animation to a block. * * @category Helper * @param block - The ID of the block to apply the animation to * @param animation - The animation configuration options */ applyAnimation(block: DesignBlockId, animation?: AnimationOptions): void; /** * Applies a drop shadow effect to any block. * * @category Helper * @param block - The ID of the block to apply the shadow to * @param options - Shadow configuration options. If not provided, enables shadow with default settings */ applyDropShadow(block: DesignBlockId, options?: DropShadowOptions): void; /** * Generates a thumbnail image of the scene at a specific time. * * @category Helper * @param height - Height of the thumbnail in scene design units (maximum 512) * @param time - Time position in seconds to capture the thumbnail * @returns Promise that resolves to a Blob containing the PNG thumbnail image * @throws Error if no page exists or if height exceeds 512 pixels */ generateThumbnailAtTimeOffset(height: number, time: number): Promise; /** * Gets the background track of the current scene. * The background track is the track that determines the page duration. * * @category Helper * @returns The ID of the background track, or null if none exists */ getBackgroundTrack(): DesignBlockId | null; /** * Moves a block to the background track. * This is useful for organizing content in video scenes where you want * certain elements to be part of the background layer. * The background track is the track that determines the page duration. * If no background track exists, one will be created automatically. * * @category Helper * @param block - The ID of the block to move to the background track */ moveToBackgroundTrack(block: DesignBlockId): void; } /** @public */ export declare type BlockEnumType = { 'blend/mode': BlendMode; 'contentFill/mode': ContentFillMode; 'height/mode': HeightMode; 'page/guides/source': PageGuidesSource; 'position/x/mode': PositionXMode; 'position/y/mode': PositionYMode; 'scene/designUnit': SceneDesignUnit; 'scene/layout': SceneLayout; 'scene/mode': SceneMode; 'width/mode': WidthMode; 'stroke/cornerGeometry': StrokeCornerGeometry; 'stroke/position': StrokePosition; 'stroke/style': StrokeStyle; 'text/horizontalAlignment': TextHorizontalAlignment; 'text/verticalAlignment': TextVerticalAlignment; 'cutout/type': CutoutType; 'caption/horizontalAlignment': CaptionHorizontalAlignment; 'caption/verticalAlignment': CaptionVerticalAlignment; animationEasing: AnimationEasing; textAnimationWritingStyle: TextAnimationWritingStyle; 'animation/grow/direction': AnimationGrowDirection; 'animation/wipe/direction': AnimationWipeDirection; 'animation/baseline/direction': AnimationBaselineDirection; 'animation/spin/direction': AnimationSpinDirection; 'animation/spin_loop/direction': AnimationSpinLoopDirection; 'animation/jump_loop/direction': AnimationJumpLoopDirection; 'animation/typewriter_text/writingStyle': AnimationTypewriterTextWritingStyle; 'animation/block_swipe_text/direction': AnimationBlockSwipeTextDirection; 'animation/merge_text/direction': AnimationMergeTextDirection; 'animation/ken_burns/direction': AnimationKenBurnsDirection; 'animation/scale_loop/direction': AnimationScaleLoopDirection; 'fill/pixelStream/orientation': FillPixelStreamOrientation; 'shape/vector_path/fillRule': ShapeVectorPathFillRule; }; /** * Represents an event related to a design block. * * The `BlockEvent` interface provides a set of properties that describe an event related to * a design block, including the block ID and the type of event. * * @public */ export declare interface BlockEvent { block: DesignBlockId; type: 'Created' | 'Updated' | 'Destroyed'; } /** * Represents the state of a design block. * * The `BlockState` type is a union of the `BlockStateError`, `BlockStatePending`, and * `BlockStateReady` interfaces, which describe the possible states of a design block. * * @categoryDescription BlockState * Methods for working with the state of design blocks. * * @public */ export declare type BlockState = BlockStateError | BlockStatePending | BlockStateReady; /** * Represents an error state for a design block. * * The `BlockStateError` interface provides a set of properties that describe an error state * for a design block, including the type of error and a description of the error. * * @public */ export declare interface BlockStateError { type: 'Error'; error: 'AudioDecoding' | 'ImageDecoding' | 'FileFetch' | 'Unknown' | 'VideoDecoding'; } /** * Represents a pending state for a design block. * * The `BlockStatePending` interface provides a set of properties that describe a pending * state for a design block, including the type of state and the progress of the operation. * * @public */ export declare interface BlockStatePending { type: 'Pending'; /** Expected range is [0, 1] */ progress: number; } /** * Represents a ready state for a design block. * * The `BlockStateReady` interface provides a set of properties that describe a ready state * for a design block, including the type of state. * * @public */ export declare interface BlockStateReady { type: 'Ready'; } /** * The shorthand block type IDs for the blur blocks. These are the IDs used to create new blurs * using `cesdk.engine.block.createBlur(id)`. * @public */ export declare const BLUR_TYPES: readonly ["uniform", "linear", "mirrored", "radial"]; /** * Dispatched on the engine canvas when the text input has been blurred. * Call `preventDefault()` to disallow this and refocus the engine text input. * @public */ export declare interface BlurEvent extends CustomEvent { readonly type: 'cesdk-blur'; /** Contains the element that has received focus during the blur, or null */ readonly detail: EventTarget | null; /** Force focus back to the engine input */ preventDefault(): void; } /** * The block type IDs for the blur blocks. These are the IDs used to create new blurs * using `cesdk.engine.block.createBlur(id)`. * Refer to {@link BlurTypeShorthand} and {@link BlurTypeLonghand} for more details. * @public */ export declare type BlurType = BlurTypeShorthand | BlurTypeLonghand; /** * The longhand block type IDs for the blur blocks. These are the IDs used to create new blurs * using `cesdk.engine.block.createBlur(id)`. * @public */ export declare type BlurTypeLonghand = `//ly.img.ubq/blur/${BlurTypeShorthand}`; /** @public */ export declare type BlurTypeShorthand = (typeof BLUR_TYPES)[number]; /** * Represents the names of boolean operations. * * Defines the possible boolean operations. * - 'Difference': The difference between two shapes. * - 'Intersection': The intersection of two shapes. * - 'Union': The union of two shapes. * - 'XOR': The exclusive OR of two shapes. * * @public */ export declare type BooleanOperation = 'Difference' | 'Intersection' | 'Union' | 'XOR'; /** @public */ export declare type BoolPropertyName = 'alwaysOnBottom' | 'alwaysOnTop' | 'clipped' | 'flip/horizontal' | 'flip/vertical' | 'highlightEnabled' | 'includedInExport' | 'placeholder/enabled' | 'playback/playing' | 'playback/soloPlaybackEnabled' | 'scene/aspectRatioLock' | 'selected' | 'selectionEnabled' | 'transformLocked' | 'visible' | 'blur/enabled' | 'dropShadow/clip' | 'dropShadow/enabled' | 'fill/enabled' | 'page/guides/gridEnabled' | 'page/guides/gridSnapEnabled' | 'page/marginEnabled' | 'placeholderControls/showButton' | 'placeholderControls/showOverlay' | 'playback/looping' | 'playback/muted' | 'stroke/enabled' | 'backgroundColor/enabled' | 'placeholderBehavior/enabled' | 'text/automaticFontSizeEnabled' | 'text/clipLinesOutsideOfFrame' | 'text/hasClippedLines' | 'track/automaticallyManageBlockOffsets' | 'caption/automaticFontSizeEnabled' | 'caption/clipLinesOutsideOfFrame' | 'caption/hasClippedLines' | 'captionTrack/automaticallyManageBlockOffsets' | 'animation/slide/fade' | 'animation/pan/fade' | 'animation/blur/fade' | 'animation/zoom/fade' | 'animation/crop_zoom/fade' | 'animation/spin/fade' | 'animation/block_swipe_text/useTextColor' | 'animation/spread_text/fade' | 'animation/ken_burns/fade' | 'effect/enabled' | (string & {}); /** * Represents a buffer of data. * * The `Buffer` interface provides a set of properties that describe a buffer of data, * including a handle and the buffer itself. * * @public */ export declare interface Buffer { handle: string; buffer: Uint8Array; } /** @public */ export declare type CameraClampingOvershootMode = (typeof CameraClampingOvershootModeValues)[number]; /** @public */ export declare const CameraClampingOvershootModeValues: readonly ["Center", "Reverse"]; /** * An HTML Canvas or an Offscreen Canvas * @public */ export declare type Canvas = HTMLCanvasElement | OffscreenCanvas_2; /** @public */ export declare type CaptionHorizontalAlignment = (typeof CaptionHorizontalAlignmentValues)[number]; /** @public */ export declare const CaptionHorizontalAlignmentValues: readonly ["Left", "Right", "Center", "Auto"]; /** @public */ export declare type CaptionVerticalAlignment = (typeof CaptionVerticalAlignmentValues)[number]; /** @public */ export declare const CaptionVerticalAlignmentValues: readonly ["Top", "Bottom", "Center"]; /** * Throws an error if the current browser does not support video exporting. * @public */ export declare function checkVideoExportSupport(): Promise; /** * Throws an error if the current browser does not support video editing. * @public */ export declare function checkVideoSupport(): void; /** * Represents a color in the CMYK color space. * * The `CMYK` type is a tuple that contains four numbers representing the cyan, magenta, * yellow, and black components of the color. * * @categoryDescription CMYK * Methods for working with colors in the CMYK color space. * * @public */ export declare type CMYK = [c: number, m: number, y: number, k: number]; /** * Represents a CMYK color value. * * Defines a CMYK color value with components between 0 and 1. * - 'c': The cyan component. * - 'm': The magenta component. * - 'y': The yellow component. * - 'k': The black component. * - 'tint': The tint factor. * * @public */ export declare interface CMYKColor { /** Cyan */ c: number; /** Magenta */ m: number; /** Yellow */ y: number; /** Black */ k: number; /** The tint factor */ tint: number; } /** * Represents all color types supported by the engine. * * @categoryDescription Color * Defines all color types supported by the engine. * - 'RGBAColor': An RGBA color value. * - 'CMYKColor': A CMYK color value. * - 'SpotColor': A spot color value. * * @public */ export declare type Color = RGBAColor | CMYKColor | SpotColor; /** @public */ export declare type ColorPickerColorMode = (typeof ColorPickerColorModeValues)[number]; /** @public */ export declare const ColorPickerColorModeValues: readonly ["RGB", "CMYK", "Any"]; /** @public */ export declare type ColorPropertyName = 'dropShadow/color' | 'fill/solid/color' | 'page/guides/gridColor' | 'stroke/color' | 'backgroundColor/color' | 'animation/block_swipe_text/blockColor' | 'effect/duotone_filter/darkColor' | 'effect/duotone_filter/lightColor' | 'effect/green_screen/fromColor' | 'effect/recolor/fromColor' | 'effect/recolor/toColor' | 'fill/color/value' | (string & {}); /** * Represents the color space used in the editor. * * @categoryDescription Color Space * Defines the possible color spaces used in the editor. * - 'sRGB': The sRGB color space. * - 'CMYK': The CMYK color space. * - 'SpotColor': The spot color space. * * @public */ export declare type ColorSpace = 'sRGB' | 'CMYK' | 'SpotColor'; /** * Combines multiple reactive properties into a single reactive property. * * Similar to `combineLatest` from RxJS but simpler. Emits whenever any source emits. * * @example * ```typescript * const x = createReactiveProperty(0); * const y = createReactiveProperty(0); * * const position = combineProperties([x, y]); * * position.subscribe(([xVal, yVal]) => { * console.log(`Position: (${xVal}, ${yVal})`); * }); * ``` * * @param properties - Array of reactive properties to combine * @param options - Configuration options * @returns A reactive property containing an array of values * @public */ export declare function _combineProperties(properties: { [K in keyof T]: _ReadonlyReactiveProperty; }, options?: Pick<_ReactivePropertyOptions, 'equals'>): _ReadonlyReactiveProperty; /** * Asset results that are returned from the engine. * * They contain additional information about the context of the asset. * @public */ export declare interface CompleteAssetResult extends AssetResult { /** * Context how an asset was added or shall be used in the future. * This is added to all assets coming from the engine. */ context: { sourceId: string; }; /** This is optional in `AssetResult` but always present here */ active: boolean; } /** * Compression format for scene serialization. * @public */ declare enum CompressionFormat_2 { None = 0, Zstd = 1 } export { CompressionFormat_2 as CompressionFormat } /** * Compression level for scene serialization. * @public */ export declare enum CompressionLevel { Fastest = 0, Default = 1, Best = 2 } /** * Specifies the configuration for the Creative Editor SDK. * * The `Configuration` interface provides a set of properties that control the behavior * and settings of the editor. These options include settings for the base URL, license, * user ID, core settings, logger, feature flags, presets, force WebGL1, audio output, * and role. * * @public */ export declare interface Configuration { baseURL: string; license?: string; userId?: string; core: { baseURL: string; }; logger: Logger; featureFlags?: { [flag: string]: boolean | string; }; /** * @deprecated This config key is not used anymore and will be removed. */ presets: { /** * @deprecated The configuration option `presets.typefaces` does not exist anymore. * Custom typefaces should be defined as asset sources using * the `cesdk.engine.asset.addSource` or `cesdk.engine.asset.addLocalSource` instead. */ typefaces?: { [id: string]: TypefaceDefinition; }; }; /** * By default the engine tries to create a webgl2 context. If this fails it * falls back to trying to create a webgl1 context. If this configuration * option is set to true, it will no longer try to create a webgl2 context * and always create a webgl1 context. */ forceWebGL1?: boolean; /** * Whether the engine should automatically choose an audio output device or * should not output audio at all. * * If not configured the fallback value is 'auto'. */ audioOutput?: 'auto' | 'none'; role?: RoleString; } /** @public */ export declare type ContentFillMode = (typeof ContentFillModeValues)[number]; /** @public */ export declare const ContentFillModeValues: readonly ["Crop", "Cover", "Contain"]; /** * Creates a derived reactive property from one or more sources. * * The value is computed from source values using a derivation function. * Updates are memoized (only emit when derived value changes). * * @example * ```typescript * const width = createReactiveProperty(800); * const height = createReactiveProperty(600); * * const area = createDerivedProperty( * [width, height], * (w, h) => w * h * ); * * area.subscribe((value) => console.log('Area:', value)); * width.update(1000); // Logs: "Area: 600000" * ``` * * @param sources - Array of reactive properties or sources to track * @param derive - Function that computes the derived value from source values * @param options - Configuration options * @returns A read-only reactive property * @public */ export declare function _createDerivedProperty(sources: { [K in keyof S]: _ReadonlyReactiveProperty | _Source; }, derive: (...values: S) => T, options?: Pick<_ReactivePropertyOptions, 'equals'>): _ReadonlyReactiveProperty; /** * Creates a reactive property with subscribe, value, and update methods. * * This is the main utility for managing state with change notifications. * Values are memoized by default (only emit when value changes). * * @example * ```typescript * // Simple value * const zoom = createReactiveProperty(1.0); * zoom.subscribe((value) => console.log('Zoom:', value)); * zoom.update(2.0); // Logs: "Zoom: 2.0" * * // With custom equality for objects * const settings = createReactiveProperty( * { width: 800, height: 600 }, * { equals: isEqual } * ); * * // With initial value emission * const formats = createReactiveProperty( * defaultFormats, * { emitOnSubscribe: true } * ); * ``` * * @param initialValue - The initial value of the property * @param options - Configuration options * @returns A reactive property with subscribe, value, and update methods * @public */ export declare function _createReactiveProperty(initialValue: T, options?: _ReactivePropertyOptions): _ReactiveProperty; /** * Options for creating a video scene. * @public */ export declare type CreateSceneOptions = { /** The page options */ page: { /** The size of the page */ size: number | { width: number; height: number; }; /** The background color of the page */ color?: Color; }; }; /** * Creates a reactive property that tracks a source and updates based on a getter/setter. * * This is useful for wrapping engine properties or complex state logic. * * @example * ```typescript * const settings = createTrackedProperty( * // Getter * () => { * const camera = engine.block.findByType('camera')[0]; * return { * width: engine.block.getFloat(camera, 'camera/resolution/width'), * height: engine.block.getFloat(camera, 'camera/resolution/height') * }; * }, * // Setter * ({ width, height }) => { * const camera = engine.block.findByType('camera')[0]; * engine.block.setFloat(camera, 'camera/resolution/width', width); * engine.block.setFloat(camera, 'camera/resolution/height', height); * }, * // Source to track * onCameraUpdated, * // Options * { equals: isEqual } * ); * ``` * * @param getter - Function to get current value * @param setter - Function to update value * @param source - Source to track for updates * @param options - Configuration options * @returns A reactive property * @public */ export declare function _createTrackedProperty(getter: () => T, setter: (value: T) => void, source: (listener: _Listener) => _Unsubscribe, options?: Pick<_ReactivePropertyOptions, 'equals'>): _ReactiveProperty; /** * Generates an array of {@link Font} entries for a variable font file. * * Variable fonts pack multiple weight/style variants into a single file. * This helper builds every combination of weight and style that the font * supports so you can pass the result straight into a {@link Typeface}. * * @param uri - The URI of the variable font file. * @param variantWeight - When `true`, generates entries for all nine standard * weights (Thin through Heavy). When `false`, only Normal (400) is used. * @param variantItalic - When `true`, generates italic variants in addition * to normal style variants. When `false`, only normal style is used. * @returns An array of {@link Font} objects covering every requested combination. * * @example * ```ts * const fonts = createVariableFontCombinations( * 'https://example.com/font.woff2', * true, // weight variants * true // italic variants * ); * // → 18 entries: 9 weights × 2 styles * * engine.block.setTypeface(block, { * name: 'My Variable Font', * fonts * }); * ``` * * @public */ export declare function createVariableFontCombinations(uri: string, variantWeight: boolean, variantItalic: boolean): Font[]; /** * The CreativeEngine is the core processing unit of CE.SDK and handles state management, rendering, input handling, and much more. * It provides APIs to directly interact with assets, blocks, scenes, and variables. These APIs can be used in a headless environment * to build and manipulate designs programmatically, or in a browser to create interactive applications. * * @categoryDescription Engine Management * Methods for initializing, configuring, and managing the engine lifecycle. * * @categoryDescription Asset Sources * Methods for adding default and demo asset sources to the engine. * * @categoryDescription Experimental Features * Experimental APIs that may change or be removed in future versions. * * @public */ declare class CreativeEngine { #private; /** * The version of the CE.SDK package. * @category Engine Management */ static readonly version: string; /** * Manage and interact with assets in the engine. * @category Core APIs */ asset: AssetAPI; /** * Create, find, delete and modify with blocks in the engine. * @category Core APIs */ block: BlockAPI; /** * Manage the editor state, including edit modes and undo/redo operations. * @category Core APIs */ editor: EditorAPI; /** * Subscribe to events in the engine. * @category Core APIs */ event: EventAPI; /** * Manage scenes, including creating, modifying, and deleting scenes. * @category Core APIs */ scene: SceneAPI; /** * Manage variables in the engine, allowing for dynamic data handling and manipulation. * @category Core APIs */ variable: VariableAPI; /** The SDK version * @category Engine Management */ version: string; /** * Add and initialize a plugin to the engine. * * @category Engine Management * @param plugin - The plugin to add and initialize. */ addPlugin(plugin: EnginePlugin): Promise; /** * Configure the timeout for video export inactivity detection. * * Some browsers exhibit a bug where support for certain video codecs is * offered, but when attempting to decode or encode in these codecs, the * request will simply never return. We detect that situation using a * timeout. To prevent this mechanism from triggering in situations where the * export simply takes long because of a slow device, you can configure the * timeout here. * * @category Experimental Features * @param timeout - Timeout in milliseconds. Defaults to 10 seconds. * @experimental This API is experimental and may change or be removed in future versions. */ unstable_setVideoExportInactivityTimeout(timeout: number): void; /** * Configure the timeout for block-exports in WebWorkers. * * If exporting a block hangs because resources take too long to initialize, * the export will be aborted after this many ms. * * @category Experimental Features * @param timeout - Timeout in milliseconds (default: 10 000) * @experimental This API is experimental and may change or be removed in future versions. */ unstable_setExportInactivityTimeout(timeout: number): void; /** * Install the mousewheel event handler for the CreativeEngine on a different element than the canvas. * * This can be useful if you are rendering HTML elements on top of the canvas * and want to scroll the canvas when the mouse is over those elements. * * @category Engine Management * @param target - The HTML element to attach the wheel event handler to. * @returns A function that removes the event handler from the target and adds it back to the canvas. */ setWheelEventTarget(target: HTMLElement): () => void; /** * Access the canvas element used by the CreativeEngine. * @category Engine Management */ get element(): HTMLCreativeEngineCanvasElement | undefined; /** * Dispose the engine and clean up all resources. * * @category Engine Management */ dispose(): void; /** * Initialize a CreativeEngine with an optional configuration. * * @category Engine Management * @param config - Optional configuration object for engine initialization. * @returns A promise that resolves to an engine instance. */ static init>(config?: C): Promise; /** * Register a set of asset sources containing default assets. * * Available default asset sources: * - `'ly.img.sticker'` - Various stickers * - `'ly.img.vectorpath'` - Shapes and arrows * - `'ly.img.filter.lut'` - LUT effects of various kinds * - `'ly.img.filter.duotone'` - Color effects of various kinds * * These assets are parsed at `\{\{base_url\}\}//content.json`, where * `base_url` defaults to the IMG.LY CDN. * Each source is created via `addLocalSource` and populated with the parsed assets. To modify the available * assets, you may either exclude certain IDs via `excludeAssetSourceIds` or alter the sources after creation. * * @deprecated This method uses legacy v4 asset source IDs and will be removed in a future version. * Please migrate to v5 asset sources using engine.asset.addLocalAssetSourceFromJSONURI(). * @category Asset Sources * @param options - Configuration options for loading default asset sources. * @returns A promise that resolves when all asset sources are loaded. */ addDefaultAssetSources({ baseURL, excludeAssetSourceIds }?: { /** The source of the asset definitions, must be absolute. Defaults to IMG.LY CDN. */ baseURL?: string; /** A list of IDs, that will be ignored during load. */ excludeAssetSourceIds?: DefaultAssetSourceId[]; }): Promise; /** * Register a set of demo asset sources containing example assets. * * **Note**: These are demonstration assets not meant for production use. * * Available demo asset sources: * - `'ly.img.image'` - Sample images * - `'ly.img.image.upload'` - Demo source to upload image assets * - `'ly.img.audio'` - Sample audios * - `'ly.img.audio.upload'` - Demo source to upload audio assets * - `'ly.img.video'` - Sample videos * - `'ly.img.video.upload'` - Demo source to upload video assets * * @deprecated This method uses legacy v3 demo asset source IDs and will be removed in a future version. * Please migrate to v4 asset sources using engine.asset.addLocalAssetSourceFromJSONURI(). * @category Asset Sources * @param options - Configuration options for loading demo asset sources. * @returns A promise that resolves when all demo asset sources are loaded. */ addDemoAssetSources({ baseURL, excludeAssetSourceIds, sceneMode, withUploadAssetSources }?: { /** The source of the demo asset definitions, must be absolute. Defaults to IMG.LY CDN. */ baseURL?: string; /** A list of IDs, that will be ignored during load */ excludeAssetSourceIds?: DemoAssetSourceId[]; /** @deprecated Since v1.72. Scene mode no longer affects which asset sources are loaded. */ sceneMode?: SceneMode; /** If 'true' asset sources for uploads are added (default false) */ withUploadAssetSources?: boolean; }): Promise; /** * Returns the configured base URL for the engine's assets. * * @category Engine Management * @returns The absolute base URL configured for this engine instance. * * @example * ```typescript * const engine = await CreativeEngine.init({ * baseURL: 'https://my-cdn.example.com/assets/' * }); * * console.log(engine.getBaseURL()); // 'https://my-cdn.example.com/assets/' * ``` */ getBaseURL(): string; } export default CreativeEngine; /** * Dispatched on the engine canvas when the text input has been blurred. * Call `preventDefault()` to disallow this and refocus the engine text input. * @public */ export declare interface CursorEvent extends CustomEvent { readonly type: 'cesdk-cursor'; /** Contains the cursor style */ readonly detail: string; /** If default is prevented, the Creative Engine won't apply the cursor style to itself. */ preventDefault(): void; } /** * Represents the type of a cutout. * * @categoryDescription Cutout Type * Defines the possible types for a cutout. * - 'Solid': A solid cutout. * - 'Dashed': A dashed cutout. * * @public */ export declare type CutoutOperation = 'Difference' | 'Intersection' | 'Union' | 'XOR'; /** @public */ export declare type CutoutType = (typeof CutoutTypeValues)[number]; /** @public */ export declare const CutoutTypeValues: readonly ["Solid", "Dashed"]; /** * Represents the default asset source IDs used in the editor. * * @categoryDescription Default Asset Source ID * Defines the possible default asset source IDs used in the editor. * - 'ly.img.sticker': Asset source for stickers. * - 'ly.img.vectorpath': Asset source for vector paths. * - 'ly.img.colors.defaultPalette': Asset source for the default color palette. * - 'ly.img.filter.lut': Asset source for LUT filters. * - 'ly.img.filter.duotone': Asset source for duotone filters. * - 'ly.img.effect': Asset source for effects. * - 'ly.img.blur': Asset source for blur effects. * - 'ly.img.typeface': Asset source for typefaces. * - 'ly.img.page.presets': Asset source for page presets. * - 'ly.img.page.presets.video': Asset source for video page presets. * - 'ly.img.crop.presets': Asset source for crop presets. * - 'ly.img.captionPresets': Asset source for caption presets. * * @deprecated This function uses legacy v4 asset source IDs. Please migrate to v5 asset sources using engine.asset.addLocalAssetSourceFromJSONURI() directly. * @public */ export declare type DefaultAssetSourceId = 'ly.img.sticker' | 'ly.img.vectorpath' | 'ly.img.colors.defaultPalette' | 'ly.img.filter.lut' | 'ly.img.filter.duotone' | 'ly.img.effect' | 'ly.img.blur' | 'ly.img.typeface' | 'ly.img.page.presets' | 'ly.img.page.presets.video' | 'ly.img.crop.presets' | 'ly.img.text' | 'ly.img.captionPresets'; /** @public */ export declare function defaultLogger(message: string, level?: LogLevel): void; /** * Represents the default demo asset source IDs used in the editor. * * @categoryDescription Default Demo Asset Source ID * Defines the possible default demo asset source IDs used in the editor. * - 'ly.img.template': Asset source for templates. * - 'ly.img.image.upload': Asset source for uploading images. * - 'ly.img.video.upload': Asset source for uploading videos. * - 'ly.img.audio.upload': Asset source for uploading audio. * - 'ly.img.image': Asset source for images. * - 'ly.img.video': Asset source for videos. * - 'ly.img.video.template': Asset source for video templates. * - 'ly.img.audio': Asset source for audio. * - 'ly.img.textComponents': Asset source for text components. * * @deprecated This function uses legacy v3 demo asset source IDs. Please migrate to v4 asset sources using engine.asset.addLocalAssetSourceFromJSONURI() directly. * @public */ export declare type DemoAssetSourceId = 'ly.img.template' | 'ly.img.image.upload' | 'ly.img.video.upload' | 'ly.img.audio.upload' | 'ly.img.image' | 'ly.img.video' | 'ly.img.video.template' | 'ly.img.audio' | 'ly.img.textComponents'; /** * The shorthand block type IDs for the top-level design blocks. These are the IDs used to create new blocks * using `cesdk.engine.block.create(id)`. * @public */ export declare const DESIGN_BLOCK_TYPES: readonly ["scene", "stack", "camera", "page", "graphic", "audio", "text", "group", "cutout", "track", "caption", "captionTrack"]; /** * A numerical identifier for a design block * @public */ export declare type DesignBlockId = number; /** * The block type IDs for the top-level design blocks. These are the IDs used to create new blocks * using `cesdk.engine.block.create(id)`. * Refer to {@link DesignBlockTypeShorthand} and {@link DesignBlockTypeLonghand} for more details. * @public */ export declare type DesignBlockType = DesignBlockTypeShorthand | DesignBlockTypeLonghand; /** * The longhand block type IDs for the top-level design blocks. These are the IDs used to create new blocks * using `cesdk.engine.block.create(id)`. * @public */ export declare type DesignBlockTypeLonghand = `//ly.img.ubq/${DesignBlockTypeShorthand}`; /** @public */ export declare type DesignBlockTypeShorthand = (typeof DESIGN_BLOCK_TYPES)[number]; /** * A single color extracted from the rendered appearance of a block. * * @public */ export declare interface DominantColor { /** Red component in sRGB, normalized to the range [0, 1]. */ r: number; /** Green component in sRGB, normalized to the range [0, 1]. */ g: number; /** Blue component in sRGB, normalized to the range [0, 1]. */ b: number; /** * Share of analyzed pixels represented by this color, in the range [0, 1]. * Higher values indicate a more prominent color. The sum of weights returned * by a single `BlockAPI.getDominantColors` call is `1.0`. */ weight: number; } /** * Options for `BlockAPI.getDominantColors`. * * @public */ export declare interface DominantColorsOptions { /** * Number of dominant colors to extract. * The returned palette may contain fewer entries for images with very little variation, * and is empty when `count` is `0`. * * @defaultValue 5 */ count?: number; /** * If `true`, near-white pixels are excluded from the analysis. * Useful when analyzing images on white backgrounds to avoid the background * dominating the result. * * @defaultValue false */ ignoreWhite?: boolean; } /** @public */ export declare type DoubleClickSelectionMode = (typeof DoubleClickSelectionModeValues)[number]; /** @public */ export declare const DoubleClickSelectionModeValues: readonly ["Direct", "Hierarchical"]; /** @public */ export declare type DoublePropertyName = 'playback/time' | 'playback/duration' | 'playback/timeOffset' | 'audio/totalDuration' | 'playback/trimLength' | 'playback/trimOffset' | 'fill/video/totalDuration' | 'animation/scale_loop/startDelay' | 'animation/scale_loop/holdDuration' | 'animation/scale_loop/easingDuration' | (string & {}); /** * Information about a single audio track from a video. * This interface provides comprehensive metadata about audio tracks, * including codec information, technical specifications, and track details. * @public */ /** * Options for configuring drop shadow effects on blocks. * @public */ export declare type DropShadowOptions = { /** The color of the drop shadow */ color?: Color; /** The offset position of the shadow */ offset?: { /** Horizontal offset in scene design units */ x?: number; /** Vertical offset in scene design units */ y?: number; }; /** The blur radius of the shadow */ blur?: { /** Horizontal blur radius in scene design units */ x?: number; /** Vertical blur radius in scene design units */ y?: number; }; }; /** * Represents the current edit mode of the editor. * * @categoryDescription Edit Mode * Defines the possible edit modes of the editor. * - 'Transform': The mode for transforming blocks (e.g., resizing, rotating). * - 'Crop': The mode for cropping images. * - 'Text': The mode for editing text. * - 'Playback': The mode for playing back animations or videos. * - 'Trim': The mode for trimming video or audio. * - 'Custom': A custom edit mode defined by the user. * * @public */ export declare type EditMode = 'Transform' | 'Crop' | 'Text' | 'Playback' | 'Trim' | 'Vector' | (string & {}); /** * @public Control the design editor's behavior and settings. * * The EditorAPI provides access to edit modes, history management, editor settings, color management, * resource handling, and global scope controls. It serves as the central configuration and control interface * for the design editor engine. * * @categoryDescription Edit Mode Management * Control the editor's current editing mode and interaction state. * * @categoryDescription History Management * Create, manage, and operate on undo/redo history stacks. * * @categoryDescription Editor Settings * Configure editor behavior through typed settings for different data types. * * @categoryDescription Event Subscriptions * Subscribe to editor state changes, history updates, and role changes. * * @categoryDescription Role & Scope Management * Manage user roles and global scope permissions. * * @categoryDescription Color Management * Handle spot colors, color conversion, and color space operations. * * @categoryDescription Resource Management * Manage buffers, URIs, and resource data handling. * * @categoryDescription System Information * Access memory usage, export limits, and system capabilities. */ export declare class EditorAPI { #private; /** * Subscribe to editor state changes. * * @category Event Subscriptions * @param callback - Function called when the editor state changes. * @returns A method to unsubscribe from the event. */ onStateChanged: (callback: () => void) => (() => void); /** * Set the editor's current edit mode. * * Edit modes represent different tools or interaction states within the editor. Common ones, are "Crop" while the crop tool is shown or "Text" when inline-editing text. * * ```javascript * engine.editor.setEditMode('Crop'); * // With a base mode * engine.editor.setEditMode('CustomMode', 'Crop'); * ``` * * @category Edit Mode Management * @param mode - "Transform", "Crop", "Text", "Playback", "Trim", "Vector" or a custom value. * @param baseMode - Optional base mode from which the custom mode will inherit the settings. */ setEditMode(mode: EditMode, baseMode?: string): void; /** * Get the editor's current edit mode. * * Edit modes represent different tools or interaction states within the editor. Common ones, are "Crop" while the crop tool is shown or "Text" when inline-editing text. * * @category Edit Mode Management * @returns "Transform", "Crop", "Text", "Playback", "Trim", "Vector" or a custom value. */ getEditMode(): EditMode; /** * Check if a user interaction is currently happening. * * Detects active interactions like resize edits with drag handles or touch gestures. * * @category Experimental * @returns True if an interaction is happening. * @experimental This API is experimental and may change or be removed in future versions. */ unstable_isInteractionHappening(): boolean; /** * Check whether a vector anchor node is currently selected in vector edit mode. * * @category Vector Edit * @returns True if a vector anchor node is selected. */ hasSelectedVectorNode(): boolean; /** * Add a new vertex by splitting the segment after the currently selected vector node. * * @category Vector Edit */ addVectorNode(): void; /** * Delete the currently selected vector node from the path. * * @category Vector Edit */ deleteVectorNode(): void; /** * Check whether a vector control point handle is currently selected. * * @category Vector Edit */ hasSelectedVectorControlPoint(): boolean; /** * Delete (reset) the currently selected vector control point handles. * Removes the bezier handle from the node, converting that side to a straight line. * If the node has two handles, only the selected one is removed. * * @category Vector Edit */ deleteSelectedVectorControlPoints(): void; /** * Toggle the currently selected vector node between smooth (bezier handles) * and corner (no handles). * * @category Vector Edit */ toggleSelectedVectorNodeSmooth(): void; /** * Enable or disable bend mode for vector editing. * * When bend mode is active, clicking an anchor node automatically toggles * it between smooth (bezier handles) and corner (no handles). * * @param active - true to enable bend mode, false to return to normal move mode. * @category Vector Edit */ setVectorEditBendMode(active: boolean): void; /** * Check whether vector edit bend mode is currently active. * * @returns true if bend mode is active. * @category Vector Edit */ getVectorEditBendMode(): boolean; /** * Enable or disable add mode for vector editing. * * When add mode is active, clicking on a path segment inserts a new anchor * point at the click position. Mutually exclusive with bend and delete modes. * * @param active - true to enable add mode, false to return to normal move mode. * @category Vector Edit */ setVectorEditAddMode(active: boolean): void; /** * Check whether vector edit add mode is currently active. * * @returns true if add mode is active. * @category Vector Edit */ getVectorEditAddMode(): boolean; /** * Enable or disable delete mode for vector editing. * * When delete mode is active, clicking an anchor node instantly deletes it * from the path. Mutually exclusive with bend and add modes. * * @param active - true to enable delete mode, false to return to normal move mode. * @category Vector Edit */ setVectorEditDeleteMode(active: boolean): void; /** * Check whether vector edit delete mode is currently active. * * @returns true if delete mode is active. * @category Vector Edit */ getVectorEditDeleteMode(): boolean; /** * Set the bezier handle mirror mode for the currently selected vector node. * * Mirror modes control how the opposite handle behaves when one handle is dragged: * - 0 (None): handles move independently * - 1 (AngleAndLength): the opposite handle mirrors both angle and length * - 2 (AngleOnly): the opposite handle mirrors the angle but keeps its own length * * @param mode - The mirror mode (0, 1, or 2). * @category Vector Edit */ setSelectedVectorNodeMirrorMode(mode: number): void; /** * Get the bezier handle mirror mode of the currently selected vector node. * * @returns The mirror mode as a number (0 = None, 1 = AngleAndLength, 2 = AngleOnly). * @throws Error if no node is selected or no vector path is being edited. * @category Vector Edit */ getSelectedVectorNodeMirrorMode(): number; /** * Get the cursor type that should be displayed. * * @category Edit Mode Management * @returns The cursor type. */ getCursorType(): 'Arrow' | 'Move' | 'MoveNotPermitted' | 'Resize' | 'Rotate' | 'Text' | 'Cell'; /** * Get the cursor rotation angle. * * @category Edit Mode Management * @returns The angle in radians. */ getCursorRotation(): number; /** * Get the text cursor's x position in screen space. * * @category Edit Mode Management * @returns The text cursor's x position in screen space. */ getTextCursorPositionInScreenSpaceX(): number; /** * Get the text cursor's y position in screen space. * * @category Edit Mode Management * @returns The text cursor's y position in screen space. */ getTextCursorPositionInScreenSpaceY(): number; /** * Create a new undo/redo history stack. * * Multiple histories can exist, but only one can be active at a time. * * ```javascript * const newHistory = engine.editor.createHistory(); * ``` * * @category History Management * @returns The handle of the created history. */ createHistory(): HistoryId; /** * Destroy a history stack and free its resources. * * ```javascript * engine.editor.destroyHistory(oldHistory); * ``` * * @category History Management * @param history - The history handle to destroy. * @throws Error if the handle doesn't refer to a valid history. */ destroyHistory(history: HistoryId): void; /** * Set a history as the active undo/redo stack. * * All other histories lose their active state. Undo/redo operations only apply to the active history. * * ```javascript * engine.editor.setActiveHistory(newHistory); * ``` * * @category History Management * @param history - The history handle to make active. * @throws Error if the handle doesn't refer to a valid history. */ setActiveHistory(history: HistoryId): void; /** * Get the currently active history handle. * * Creates a new history if none exists. * * ```javascript * const oldHistory = engine.editor.getActiveHistory(); * ``` * * @category History Management * @returns The handle of the active history. */ getActiveHistory(): HistoryId; /** * Add a new history state to the undo stack. * * Only adds a state if undoable changes were made since the last undo step. * * ```javascript * engine.editor.addUndoStep(); * ``` * * @category History Management */ addUndoStep(): void; /** * Remove the last history state from the undo stack. * * Removes the most recent undo step if available. * * ```javascript * engine.editor.removeUndoStep(); * ``` * * @category History Management */ removeUndoStep(): void; /** * Undo one step in the active history if an undo step is available. * * ```javascript * engine.editor.undo(); * ``` * * @category History Management */ undo(): void; /** * Redo one step in the active history if a redo step is available. * * ```javascript * engine.editor.redo(); * ``` * * @category History Management */ redo(): void; /** * Check if an undo step is available. * * ```javascript * if (engine.editor.canUndo()) { * engine.editor.undo(); * } * ``` * * @category History Management * @returns True if an undo step is available. */ canUndo(): boolean; /** * Check if a redo step is available. * * ```javascript * if (engine.editor.canRedo()) { * engine.editor.redo(); * } * ``` * * @category History Management * @returns True if a redo step is available. */ canRedo(): boolean; /** * Subscribe to undo/redo history changes. * * ```javascript * const unsubscribe = engine.editor.onHistoryUpdated(() => { * const canUndo = engine.editor.canUndo(); * const canRedo = engine.editor.canRedo(); * console.log("History updated", {canUndo, canRedo}); * }) * ``` * * @category Event Subscriptions * @param callback - Function called when the undo/redo history changes. * @returns A method to unsubscribe from the event. */ onHistoryUpdated: (callback: () => void) => (() => void); /** * Subscribe to editor settings changes. * * @category Event Subscriptions * @param callback - Function called when editor settings change. * @returns A method to unsubscribe from the event. */ onSettingsChanged: (callback: () => void) => (() => void); /** * Subscribe to editor role changes. * * Allows reacting to role changes and updating engine settings accordingly. * The callback is triggered immediately after role changes and default settings are applied. * * @category Event Subscriptions * @param callback - Function called when the user role changes. * @returns A method to unsubscribe from the event. */ onRoleChanged: (callback: (role: RoleString) => void) => (() => void); /** * Set a setting value using the unified API. * The value type is automatically validated based on the key. * * @category Editor Settings * @param keypath - The setting key from Settings * @param value - The value to set (type-safe based on key) * @throws Error if the keypath is invalid or value type doesn't match * * @example * ```typescript * // Boolean setting * engine.editor.setSetting('doubleClickToCropEnabled', false); * * // Color setting * engine.editor.setSetting('highlightColor', { r: 1, g: 0, b: 1, a: 1 }); * * // Enum setting * engine.editor.setSetting('doubleClickSelectionMode', 'Direct'); * ``` */ setSetting(keypath: OptionalPrefix, value: SettingValueType): void; /** * Get a setting value using the unified API. * The return type is automatically inferred from the key. * * @category Editor Settings * @param keypath - The setting key from Settings * @returns The value of the setting (type-safe based on key) * @throws Error if the keypath is invalid * * @example * ```typescript * // Boolean setting * const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled'); * * // Color setting * const highlight = engine.editor.getSetting('highlightColor'); * * // Enum setting * const selectionMode = engine.editor.getSetting('doubleClickSelectionMode'); * ``` */ getSetting(keypath: OptionalPrefix): SettingValueType; /** * Set a boolean setting value. * * @category Editor Settings * @param keypath - The settings keypath, e.g. `doubleClickToCropEnabled`. * @param value - The boolean value to set. * @throws Error if the keypath is invalid. */ setSettingBool(keypath: SettingsBool, value: boolean): void; /** @deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. */ setSettingBool(keypath: `ubq://${SettingsBool}`, value: boolean): void; /** * Get a boolean setting value. * * @category Editor Settings * @param keypath - The settings keypath, e.g. `doubleClickToCropEnabled`. * @returns The boolean value of the setting. * @throws Error if the keypath is invalid. */ getSettingBool(keypath: SettingsBool): boolean; /** @deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. */ getSettingBool(keypath: `ubq://${SettingsBool}`): boolean; getSettingBool(keypath: SettingBoolPropertyName): boolean; /** * Set an integer setting value. * * @category Editor Settings * @param keypath - The settings keypath. * @param value - The integer value to set. * @throws Error if the keypath is invalid. */ setSettingInt(keypath: SettingsInt, value: number): void; setSettingInt(keypath: SettingIntPropertyName, value: number): void; /** * Get an integer setting value. * * @category Editor Settings * @param keypath - The settings keypath. * @returns The integer value of the setting. * @throws Error if the keypath is invalid. */ getSettingInt(keypath: SettingsInt): number; getSettingInt(keypath: SettingIntPropertyName): number; /** * Set a float setting value. * * @category Editor Settings * @param keypath - The settings keypath, e.g. `positionSnappingThreshold`. * @param value - The float value to set. * @throws Error if the keypath is invalid. */ setSettingFloat(keypath: SettingsFloat, value: number): void; /** @deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. */ setSettingFloat(keypath: `ubq://${SettingsFloat}`, value: number): void; setSettingFloat(keypath: SettingFloatPropertyName, value: number): void; /** * Get a float setting value. * * @category Editor Settings * @param keypath - The settings keypath, e.g. `positionSnappingThreshold`. * @returns The float value of the setting. * @throws Error if the keypath is invalid. */ getSettingFloat(keypath: SettingsFloat): number; /** @deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. */ getSettingFloat(keypath: `ubq://${SettingsFloat}`): number; getSettingFloat(keypath: SettingFloatPropertyName): number; /** * Set a string setting value. * * @category Editor Settings * @param keypath - The settings keypath, e.g. `license`. * @param value - The string value to set. * @throws Error if the keypath is invalid. */ setSettingString(keypath: SettingsString, value: string): void; /** @deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. */ setSettingString(keypath: `ubq://${SettingsString}`, value: string): void; setSettingString(keypath: SettingStringPropertyName, value: string): void; /** * Get a string setting value. * * @category Editor Settings * @param keypath - The settings keypath, e.g. `license`. * @returns The string value of the setting. * @throws Error if the keypath is invalid. */ getSettingString(keypath: SettingsString): string; /** @deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. */ getSettingString(keypath: `ubq://${SettingsString}`): string; getSettingString(keypath: SettingStringPropertyName): string; /** * Set a color setting. * @category Editor Settings * @param keypath - The settings keypath, e.g. `highlightColor`. * @param value - The The value to set. */ setSettingColor(keypath: SettingsColor, value: Color): void; /** @deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. */ setSettingColor(keypath: `ubq://${SettingsColor}`, value: Color): void; setSettingColor(keypath: SettingColorPropertyName, value: Color): void; /** * Get a color setting. * @category Editor Settings * @param keypath - The settings keypath, e.g. `highlightColor`. * @throws An error, if the keypath is invalid. */ getSettingColor(keypath: SettingsColor): Color; /** @deprecated Support for `ubq://` prefixed keypaths will be removed in a future release. */ getSettingColor(keypath: `ubq://${SettingsColor}`): Color; getSettingColor(keypath: SettingColorPropertyName): Color; /** * Set a color setting. * @param keypath - The settings keypath, e.g. `highlightColor`. * @param r - The red color component in the range of 0 to 1. * @param g - The green color component in the range of 0 to 1. * @param b - The blue color component in the range of 0 to 1. * @param a - The alpha color component in the range of 0 to 1. * @deprecated Use setSettingColor() instead. */ setSettingColorRGBA(keypath: SettingsColorRGBA | `ubq://${SettingsColorRGBA}`, r: number, g: number, b: number, a?: number): void; /** * Get a color setting. * @param keypath - The settings keypath, e.g. `highlightColor`. * @returns A tuple of channels red, green, blue and alpha in the range of 0 to 1. * @deprecated Use getSettingColor() instead. */ getSettingColorRGBA(keypath: SettingsColorRGBA | `ubq://${SettingsColorRGBA}`): RGBA; /** * Set an enum setting. * @category Editor Settings * @param keypath - The settings keypath, e.g. `doubleClickSelectionMode`. * @param value - The enum value as string. */ setSettingEnum(keypath: T, value: SettingEnumType[T]): void; setSettingEnum(keypath: string, value: string): void; /** * Get an enum setting. * @category Editor Settings * @param keypath - The settings keypath, e.g. `doubleClickSelectionMode`. * @returns The value as string. */ getSettingEnum(keypath: T): SettingEnumType[T]; getSettingEnum(keypath: string): string; /** * Get the possible enum options for a given enum setting. * @category Editor Settings * @param keypath - The settings keypath, e.g. `doubleClickSelectionMode`. * @returns The possible enum options as strings. */ getSettingEnumOptions(keypath: T): SettingEnumType[T][]; getSettingEnumOptions(keypath: string): string[]; /** * Set the user role and apply role-dependent defaults. * * Automatically configures scopes and settings based on the specified role. * * @category Role & Scope Management * @param role - The role to assign to the user. */ setRole(role: RoleString): void; /** * Get the current user role. * * @category Role & Scope Management * @returns The current role of the user. */ getRole(): RoleString; /** * Returns a list of all the settings available. * @category Editor Settings * @returns A list of settings keypaths. */ findAllSettings(): string[]; /** * Returns the type of a setting. * @category Editor Settings * @param keypath - The settings keypath, e.g. `doubleClickSelectionMode`. * @returns The setting type. */ getSettingType(keypath: string): SettingType; /** * Get the currently available memory. * * @category System Information * @returns The available memory in bytes. */ getAvailableMemory(): number; /** * Get the engine's current memory usage. * * @category System Information * @returns The current memory usage in bytes. */ getUsedMemory(): number; /** * Get the maximum export size limit for the current device. * * Exports are only possible when both width and height are below this limit. * Note that exports may still fail due to other constraints like memory. * * @category System Information * @returns The upper export size limit in pixels, or maximum 32-bit integer if unlimited. */ getMaxExportSize(): number; /** * Sets a custom URI resolver. * * This function can be called more than once. Subsequent calls will overwrite previous calls. * To remove a previously set resolver, pass the value `null`. * The given function must return an absolute path with a scheme and cannot be asynchronous. The input is allowed to be an invalid URI, e.g., due to placeholders. * * ```javascript * // Replace all .jpg files with the IMG.LY logo * engine.editor.setURIResolver((uri) => { * if (uri.endsWith('.jpg')) { * return 'https://img.ly/static/ubq_samples/imgly_logo.jpg'; * } * // Make use of the default URI resolution behavior. * return engine.editor.defaultURIResolver(uri); * }); * ``` * * @category Editor Settings * @param resolver - Custom resolution function. The resolution function * should not reference variables outside of its scope. * It receives the default URI resolver as its second argument */ setURIResolver(resolver: SyncURIResolver): void; /** * Sets a custom async URI resolver. * * This function can be called more than once. Subsequent calls will overwrite previous calls. * To remove a previously set resolver, pass the value `null`. * The given function must return an absolute path with a scheme. The input is allowed to be invalid URI, e.g., due * to placeholders. * * @category Editor Settings * @param resolver - Custom async resolution function. */ setURIResolverAsync(resolver: AsyncURIResolver | null): void; /** * This is the default implementation for the URI resolver. * * It resolves the given path relative to the `basePath` setting. * * ```javascript * engine.editor.defaultURIResolver(uri); * ``` * * @category Editor Settings * @param relativePath - The relative path that should be resolved. * @returns The resolved absolute URI. */ defaultURIResolver(relativePath: string): string; /** * Resolves the given path asynchronously. * * If a custom resolver has been set with `setURIResolverAsync` (or `setURIResolver`), it invokes it with the given * path. Else, it resolves it as relative to the `basePath` setting. * This performs NO validation of whether a file exists at the specified location. * * **Breaking change:** This method now returns a `Promise` instead * of a plain `string`. Callers must `await` the result. * * @category Editor Settings * @param relativePath - A relative path string * @returns Promise resolving to the resolved absolute uri or rejecting if an invalid path was given. */ getAbsoluteURI(relativePath: string): Promise; /** * Get all available global scope names. * * @category Role & Scope Management * @returns The names of all available global scopes. */ findAllScopes(): Scope[]; /** * Set a global scope permission level. * * @category Role & Scope Management * @param key - The scope to configure. * @param value - `Allow` always allows, `Deny` always denies, `Defer` defers to block-level. */ setGlobalScope(key: Scope, value: 'Allow' | 'Deny' | 'Defer'): void; /** * Get a global scope's permission level. * * @category Role & Scope Management * @param key - The scope to query. * @returns `Allow`, `Deny`, or `Defer` indicating the scope's permission level. */ getGlobalScope(key: Scope): 'Allow' | 'Deny' | 'Defer'; /** * Get all spot color names currently defined. * * @category Color Management * @returns The names of all defined spot colors. */ findAllSpotColors(): string[]; /** * Queries the RGB representation set for a spot color. * * If the value of the queried spot color has not been set yet, returns the default RGB representation (of magenta). * The alpha value is always 1.0. * @category Color Management * @param name - The name of a spot color. * @returns A result holding a float array of the four color components. */ getSpotColorRGBA(name: string): RGBA; /** * Queries the CMYK representation set for a spot color. * * If the value of the queried spot color has not been set yet, returns the default CMYK representation (of magenta). * @category Color Management * @param name - The name of a spot color. * @returns A result holding a float array of the four color components. */ getSpotColorCMYK(name: string): CMYK; /** * Sets the RGB representation of a spot color. * * Use this function to both create a new spot color or update an existing spot color. * @category Color Management * @param name - The name of a spot color. * @param r - The red color component in the range of 0 to 1. * @param g - The green color component in the range of 0 to 1. * @param b - The blue color component in the range of 0 to 1. */ setSpotColorRGB(name: string, r: number, g: number, b: number): void; /** * Sets the CMYK representation of a spot color. * * Use this function to both create a new spot color or update an existing spot color. * @category Color Management * @param name - The name of a spot color. * @param c - The cyan color component in the range of 0 to 1. * @param m - The magenta color component in the range of 0 to 1. * @param y - The yellow color component in the range of 0 to 1. * @param k - The key color component in the range of 0 to 1. */ setSpotColorCMYK(name: string, c: number, m: number, y: number, k: number): void; /** * Removes a spot color from the list of set spot colors. * * @category Color Management * @param name - The name of a spot color. * @returns An empty result on success, an error otherwise. */ removeSpotColor(name: string): void; /** * Set the spot color assign to a cutout type. * * All cutout blocks of the given type will be immediately assigned that spot color. * @category Color Management * @param type - The cutout type. * @param color - The spot color name to assign. */ setSpotColorForCutoutType(type: CutoutType, color: string): void; /** * Get the name of the spot color assigned to a cutout type. * @category Color Management * @param type - The cutout type. * @returns The color spot name. */ getSpotColorForCutoutType(type: CutoutType): string; /** * Converts a color to the given color space. * @category Color Management * @param color - The color to convert. * @param colorSpace - The color space to convert to. * @returns The converted color. */ convertColorToColorSpace(color: Color, colorSpace: 'sRGB'): RGBAColor; /** */ convertColorToColorSpace(color: Color, colorSpace: 'CMYK'): CMYKColor; /** */ convertColorToColorSpace(color: Color, colorSpace: ColorSpace): never; /** * Create a resizable buffer for arbitrary data. * * ```javascript * const buffer = engine.editor.createBuffer(); * * // Reference the buffer resource from the audio block * engine.block.setString(audioBlock, 'audio/fileURI', buffer); * ``` * * @category Resource Management * @returns A URI to identify the created buffer. */ createBuffer(): string; /** * Destroy a buffer and free its resources. * * ```javascript * engine.editor.destroyBuffer(buffer); * ``` * * @category Resource Management * @param uri - The URI of the buffer to destroy. */ destroyBuffer(uri: string): void; /** * Set the data of a buffer at a given offset. * * ```javascript * // Generate 10 seconds of stereo 48 kHz audio data * const samples = new Float32Array(10 * 2 * 48000); * for (let i = 0; i < samples.length; i += 2) { * samples[i] = samples[i + 1] = Math.sin((440 * i * Math.PI) / 48000); * } * // Assign the audio data to the buffer * engine.editor.setBufferData(buffer, 0, new Uint8Array(samples.buffer)); * ``` * * @category Resource Management * @param uri - The URI of the buffer to update. * @param offset - The offset in bytes at which to start writing. * @param data - The data to write. */ setBufferData(uri: string, offset: number, data: Uint8Array): void; /** * Get the data of a buffer at a given offset. * * ```javascript * engine.editor.findAllTransientResources().forEach((resource) => { * const bufferURI = resource.URL; * const length = engine.editor.getBufferLength(buffer); * const data = engine.editor.getBufferData(buffer, 0, length); * const blob = new Blob([data]); * }) * ``` * * @category Resource Management * @param uri - The URI of the buffer to query. * @param offset - The offset in bytes at which to start reading. * @param length - The number of bytes to read. * @returns The data at the given offset. */ getBufferData(uri: string, offset: number, length: number): Uint8Array; /** * Set the length of a buffer. * * ```javascript * // Reduce the buffer to half its length * const currentLength = engine.editor.getBufferLength(buffer); * engine.editor.setBufferLength(buffer, currentLength / 2); * ``` * * @category Resource Management * @param uri - The URI of the buffer to update. * @param length - The new length of the buffer in bytes. */ setBufferLength(uri: string, length: number): void; /** * Get the length of a buffer. * * ```javascript * const length = engine.editor.getBufferLength(buffer); * ``` * * @category Resource Management * @param uri - The URI of the buffer to query. * @returns The length of the buffer in bytes. */ getBufferLength(uri: string): number; /** * Get the MIME type of a resource. * * Downloads the resource if not already cached. * * @category Resource Management * @param uri - The URI of the resource. * @returns Promise resolving to the resource's MIME type. * @throws Error if the resource cannot be downloaded or MIME type determined. */ getMimeType(uri: string): Promise; /** * Gets the font metrics for a given font file URI. * * If the font is not yet loaded, it will be fetched asynchronously. * The returned metrics are in the font's design units coordinate space. * * ```javascript * const metrics = await engine.editor.getFontMetrics('/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Regular.ttf'); * console.log(metrics.ascender, metrics.descender, metrics.unitsPerEm); * console.log(metrics.lineGap); * console.log(metrics.capHeight, metrics.xHeight); * console.log(metrics.underlineOffset, metrics.underlineSize, metrics.strikeoutOffset, metrics.strikeoutSize); * ``` * * @category Resource Management * @param fontFileUri - The URI of the font file to get metrics from. * @returns A promise resolving to the font metrics. */ getFontMetrics(fontFileUri: string): Promise; /** * Get all transient resources that would be lost during export. * * Useful for identifying resources that need relocation (e.g., to a CDN) before export, * as these resources are not included in the exported scene. * * @category Resource Management * @returns The URLs and sizes of transient resources. */ findAllTransientResources(): TransientResource[]; /** * Get all media URIs referenced by blocks in the scene. * * Returns URIs from image fills, video fills, and audio blocks, including their source sets. * Only returns valid media URIs (http://, https://, file://), excluding transient resources * like buffer URIs. Useful for determining which media files are referenced by a scene * (e.g., for cleanup operations, CDN management, or file system tracking). * * @category Resource Management * @returns The URLs of all media resources referenced in the scene, deduplicated. */ findAllMediaURIs(): string[]; /** * Provides the data of a resource at the given URL. * * @category Resource Management * @param uri - The URL of the resource. * @param chunkSize - The size of the chunks in which the resource data is provided. * @param onData - The callback function that is called with the resource data or an error if an error occurred. * The callback will be called as long as there is data left to provide and the callback returns `true`. */ getResourceData(uri: string, chunkSize: number, onData: (result: Uint8Array) => boolean): void; /** * Changes the URL associated with a resource. * * This function can be used change the URL of a resource that has been relocated (e.g., to a CDN). * @category Resource Management * @param currentUrl - The current URL of the resource. * @param relocatedUrl - The new URL of the resource. */ relocateResource(currentUrl: string, relocatedUrl: string): void; /** * Checks wether the block has selection and hover highlighting enabled or disabled. * * ```javascript * const highlightingIsEnabled = engine.editor.isHighlightingEnabled(block); * ``` * * @param id - The block to query. * @returns True if highlighting is enabled, false otherwise. */ isHighlightingEnabled(id: DesignBlockId): boolean; /** * Enable or disable selection and hover highlighting for a block. * * ```javascript * engine.editor.setHighlightingEnabled(block, true); * ``` * * @param id - The block to update. * @param enabled - Whether or not the block should show highlighting when selected or hovered. */ setHighlightingEnabled(id: DesignBlockId, enabled: boolean): void; /** * Set global safe area insets for UI overlays. * * Safe area insets define UI-safe regions by specifying padding from screen edges. * These insets are automatically applied to all camera operations (zoom, pan, clamping) * to ensure important content remains visible when UI elements overlap the viewport edges. * Set to zero to disable (default state). * * @param insets - The inset values in CSS pixels (device-independent) * @public * @category Viewport */ setSafeAreaInsets(insets: { left?: number; top?: number; right?: number; bottom?: number; }): void; /** * Get the current global safe area insets configuration. * * @returns The current inset values in CSS pixels (device-independent) * @public * @category Viewport */ getSafeAreaInsets(): { left: number; top: number; right: number; bottom: number; }; /** * Checks whether the block can currently be selected. * * ```javascript * const selectionIsEnabled = engine.editor.isSelectionEnabled(block); * ``` * * @param id - The block to query. * @returns True if selection is enabled, false otherwise. */ isSelectionEnabled(id: DesignBlockId): boolean; /** * Enable or disable selection for a block. * * ```javascript * engine.editor.setSelectionEnabled(block, true); * ``` * * @param id - The block to update. * @param enabled - Whether the block should be selectable. */ setSelectionEnabled(id: DesignBlockId, enabled: boolean): void; /** * Set one or more rules that limit how far blocks can be positioned outside their * parent page during user interactions (drag, resize, touch gestures, crop). * Programmatic API calls are not affected. * * `overshoot` is a non-negative fraction of the moved block's own size: `0` * pins blocks fully inside the page, `0.3` allows 30% to extend past the page * bounds. Each rule's scope is determined by its keys: * - `{ overshoot }` — scene-wide default for every page in the scene. * - `{ overshoot, block }` — applies to a specific block. Pages are blocks, so * setting this on a page acts as the default for blocks inside that page. * - `{ overshoot, blockType }` — applies to every block of the given type * (e.g. `"text"` or `"//ly.img.ubq/text"`). * * Use `removeMovementConstraint` to clear a rule. * * When multiple rules match a block, the most specific one wins: * block \> parent page \> blockType \> scene-wide. * * @param rules - A single rule or an array of rules to apply. */ setMovementConstraint(rules: MovementConstraintRule | MovementConstraintRule[]): void; /** * Get the effective movement constraint for a block, picking the most specific * matching rule: block \> parent page \> blockType \> scene-wide. * * The returned `overshoot` is a fraction of the block's own size. * * @param id - The block to query. * @returns `{ overshoot }` with the effective value, or `null` if unconstrained. */ getMovementConstraint(id: DesignBlockId): ResolvedMovementConstraint; /** * Remove previously set movement constraints. * * - No argument: removes the scene-wide default. * - `{ block }` / `{ blockType }` (or an array): removes the matching scope(s). * * Removing a scope falls through to the next tier on subsequent resolution. * * @param scopes - Scope or array of scopes to remove. Omit to remove the * scene-wide default. */ removeMovementConstraint(scopes?: MovementConstraintScope | MovementConstraintScope[]): void; } /** * The shorthand block type IDs for the effect blocks. These are the IDs used to create new effects * using `cesdk.engine.block.createEffect(id)`. * @public */ export declare const EFFECT_TYPES: readonly ["adjustments", "cross_cut", "dot_pattern", "duotone_filter", "extrude_blur", "glow", "green_screen", "half_tone", "linocut", "liquid", "lut_filter", "mirror", "outliner", "pixelize", "posterize", "radial_pixel", "recolor", "sharpie", "shifter", "tilt_shift", "tv_glitch", "vignette"]; /** * The block type IDs for the effect blocks. These are the IDs used to create new effects * using `cesdk.engine.block.createEffect(id)`. * Refer to {@link EffectTypeShorthand} and {@link EffectTypeLonghand} for more details. * @public */ export declare type EffectType = EffectTypeShorthand | EffectTypeLonghand; /** * The longhand block type IDs for the effect blocks. These are the IDs used to create new effects * using `cesdk.engine.block.createEffect(id)`. * @public */ export declare type EffectTypeLonghand = `//ly.img.ubq/effect/${EffectTypeShorthand}`; /** @public */ export declare type EffectTypeShorthand = (typeof EFFECT_TYPES)[number]; /** * Represents an engine plugin. * * Defines the structure of an engine plugin, including its name, version, and initialization function. * - 'name': The name of the plugin. * - 'version': The version of the plugin. * - 'initialize': The function to initialize the plugin with the provided context. Can be synchronous or asynchronous. * * @public */ export declare interface EnginePlugin { name: string; version: string; initialize: (context: EnginePluginContext) => void | Promise; } /** * Represents the context for an engine plugin. * * Defines the context provided to an engine plugin, including APIs for assets, blocks, scenes, editor, events, and variables. * - 'engine': The engine instance containing APIs for asset, block, scene, editor, event, and variable management. * * @public */ export declare type EnginePluginContext = { engine: CreativeEngine; }; /** @public */ export declare type EnumPropertyName = 'blend/mode' | 'contentFill/mode' | 'height/mode' | 'position/x/mode' | 'position/y/mode' | 'scene/designUnit' | 'scene/layout' | 'scene/mode' | 'width/mode' | 'page/guides/source' | 'stroke/cornerGeometry' | 'stroke/position' | 'stroke/style' | 'text/horizontalAlignment' | 'text/verticalAlignment' | 'cutout/type' | 'caption/horizontalAlignment' | 'caption/verticalAlignment' | 'animationEasing' | 'textAnimationWritingStyle' | 'animation/grow/direction' | 'animation/wipe/direction' | 'animation/baseline/direction' | 'animation/spin/direction' | 'animation/spin_loop/direction' | 'animation/jump_loop/direction' | 'animation/typewriter_text/writingStyle' | 'animation/block_swipe_text/direction' | 'animation/merge_text/direction' | 'animation/ken_burns/direction' | 'animation/scale_loop/direction' | 'fill/pixelStream/orientation' | 'shape/vector_path/fillRule' | (string & {}); /** @public */ export declare type EnumValues = BlendMode | ContentFillMode | HeightMode | PageGuidesSource | PositionXMode | PositionYMode | SceneDesignUnit | SceneLayout | SceneMode | WidthMode | StrokeCornerGeometry | StrokePosition | StrokeStyle | TextHorizontalAlignment | TextVerticalAlignment | CutoutType | CaptionHorizontalAlignment | CaptionVerticalAlignment | AnimationEasing | TextAnimationWritingStyle | AnimationGrowDirection | AnimationWipeDirection | AnimationBaselineDirection | AnimationSpinDirection | AnimationSpinLoopDirection | AnimationJumpLoopDirection | AnimationTypewriterTextWritingStyle | AnimationBlockSwipeTextDirection | AnimationMergeTextDirection | AnimationKenBurnsDirection | AnimationScaleLoopDirection | FillPixelStreamOrientation | ShapeVectorPathFillRule | (string & {}); /** * A function that compares two values for equality * @public */ export declare type _EqualsFn = (a: T, b: T | undefined) => boolean; /** * @public Subscribe to block lifecycle events in the design engine. * * The EventAPI enables real-time monitoring of block changes through event subscriptions. * Events are bundled and delivered efficiently at the end of each engine update cycle. * * @categoryDescription Event Subscriptions * Subscribe to block lifecycle events with filtering and callback management. */ export declare class EventAPI { #private; /** * Subscribe to block lifecycle events. * * Events are bundled and delivered at the end of each engine update cycle for efficient processing. * * @category Event Subscriptions * @param blocks - List of blocks to filter events by. If empty, events for all blocks are sent. * @param callback - Function called with bundled events. * @returns A method to unsubscribe from the events. */ subscribe: (blocks: DesignBlockId[], callback: (events: BlockEvent[]) => void) => (() => void); } /** * Represents the options for exporting a design block. * * Defines the possible options for exporting a design block. * - 'mimeType': The MIME type of the output file. * - 'pngCompressionLevel': The PNG compression level to use, when exporting to PNG. * - 'jpegQuality': The JPEG quality to use when encoding to JPEG. * - 'webpQuality': The WebP quality to use when encoding to WebP. * - 'targetWidth': An optional target width used in conjunction with target height. * - 'targetHeight': An optional target height used in conjunction with target width. * - 'exportPdfWithHighCompatibility': Export the PDF document with a higher compatibility to different PDF viewers. * - 'exportPdfWithUnderlayer': Export the PDF document with an underlayer. * - 'underlayerSpotColorName': The name of the spot color to be used for the underlayer's fill. * - 'underlayerOffset': The adjustment in size of the shape of the underlayer. * - 'underlayerRenderRatio': Resolution multiplier for the underlayer contour extraction. * - 'underlayerMaxError': Curve-fit error tolerance for the underlayer contour. * - 'abortSignal': An abort signal that can be used to cancel the export. * * @public */ export declare type ExportOptions = { /** * The MIME type of the output file. * * @defaultValue 'image/png' */ mimeType?: ImageMimeType | Exclude; /** * The PNG compression level to use, when exporting to PNG. * * Valid values are 0 to 9, higher means smaller, but slower. * Quality is not affected. * Ignored for other encodings. * @defaultValue 5. */ pngCompressionLevel?: number; /** * The JPEG quality to use when encoding to JPEG. * * Valid values are (0-1], higher means better quality. * Ignored for other encodings. * * @defaultValue 0.9 */ jpegQuality?: number; /** * The WebP quality to use when encoding to WebP. Valid values are (0-1], higher means better quality. * WebP uses a special lossless encoding that usually produces smaller file sizes than PNG. * Ignored for other encodings. Defaults to 1.0. */ webpQuality?: number; /** * An optional target width used in conjunction with target height. * If used, the block will be rendered large enough, that it fills the target * size entirely while maintaining its aspect ratio. */ targetWidth?: number; /** * An optional target height used in conjunction with target width. * If used, the block will be rendered large enough, that it fills the target * size entirely while maintaining its aspect ratio. */ targetHeight?: number; /** * Export the PDF document with a higher compatibility to different PDF viewers. * Bitmap images and some effects like gradients will be rasterized with the DPI * setting instead of embedding them directly. */ exportPdfWithHighCompatibility?: boolean; /** * Export the PDF document with an underlayer. * An underlayer is generated by adding a graphics block behind the existing elements of the shape of the elements on * the page. */ exportPdfWithUnderlayer?: boolean; /** * The name of the spot color to be used for the underlayer's fill. */ underlayerSpotColorName?: string; /** * The adjustment in size of the shape of the underlayer. */ underlayerOffset?: number; /** * Resolution multiplier for the raster pass that extracts the underlayer contour. * Higher values produce sharper underlayer outlines at the cost of memory and export time. * Useful for small text on large pages, where the 1.0 default can miss fine glyph details. * Values `<= 0` fall back to 1.0. `NaN` / `Infinity` are rejected at the binding boundary * with a `StructError`; pass a real number or leave the field undefined to use the default. * * @defaultValue 1.0 */ underlayerRenderRatio?: number; /** * Maximum acceptable curve-fit error, in pixels, when vectorising the underlayer contour. * Smaller values produce tighter fits at the cost of more path complexity. * Useful together with `underlayerRenderRatio` for small text on large pages. * Values `<= 0` fall back to 2.0. `NaN` / `Infinity` are rejected at the binding boundary * with a `StructError`; pass a real number or leave the field undefined to use the default. * * @defaultValue 2.0 */ underlayerMaxError?: number; /** * If true, the export will include text bounding boxes that account for glyph overhangs. * When enabled, text blocks with glyphs that extend beyond their frame (e.g., decorative fonts with swashes) * will be exported with the full glyph bounds visible, preventing text clipping. * * @defaultValue false */ allowTextOverhang?: boolean; /** * Export CMYK colors using their native color spaces in the PDF. * When enabled, direct CMYK colors are written as DeviceCMYK (k/K operators) and spot colors with CMYK values * (set via setSpotColorCMYK) are written as DeviceN with process CMYK components. * When disabled (default), all colors are exported as DeviceRGB. * * @defaultValue false */ exportPdfWithDeviceCMYK?: boolean; /** * An abortsignal that can be used to cancel the export. */ abortSignal?: AbortSignal; }; /** * The shorthand block type IDs for the fill blocks. These are the IDs used to create new fills * using `cesdk.engine.block.createFill(id)`. * @public */ export declare const FILL_TYPES: readonly ["color", "gradient/linear", "gradient/radial", "gradient/conical", "image", "video", "pixelStream"]; /** @public */ export declare type FillPixelStreamOrientation = (typeof FillPixelStreamOrientationValues)[number]; /** @public */ export declare const FillPixelStreamOrientationValues: readonly ["Up", "Down", "Left", "Right", "UpMirrored", "DownMirrored", "LeftMirrored", "RightMirrored"]; /** * The block type IDs for the fill blocks. These are the IDs used to create new fills * using `cesdk.engine.block.createFill(id)`. * Refer to {@link FillTypeShorthand} and {@link FillTypeLonghand} for more details. * @public */ export declare type FillType = FillTypeShorthand | FillTypeLonghand; /** * The longhand block type IDs for the fill blocks. These are the IDs used to create new fills * using `cesdk.engine.block.createFill(id)`. * @public */ export declare type FillTypeLonghand = `//ly.img.ubq/fill/${FillTypeShorthand}`; /** @public */ export declare type FillTypeShorthand = (typeof FILL_TYPES)[number]; /** * Represents a query for finding assets. * * The `FindAssetsQuery` interface provides a set of properties that describe a query for finding * assets, including the number of assets per page, the page number, the query string, the tags, * the groups, the excluded groups, the locale, the sorting order, the sort key, and whether to * sort active assets first. * * Methods for working with queries for finding assets. * * @public */ export declare interface _FindAssetsQuery { perPage: number; page: number; query: string; tags: string[]; groups: string[]; excludeGroups: string[]; locale: string; sortingOrder: SortingOrder; sortKey: string; sortActiveFirst: boolean; } /** * Specifies the horizontal and vertical flip states of a design block. * * The `Flip` interface provides a set of properties that indicate whether the design block * is flipped horizontally or vertically. * * Methods for configuring the flip states of a design block. * * @public */ export declare interface _Flip { horizontal: boolean; vertical: boolean; } /** @public */ export declare type FloatPropertyName = 'globalBoundingBox/height' | 'globalBoundingBox/width' | 'globalBoundingBox/x' | 'globalBoundingBox/y' | 'height' | 'lastFrame/height' | 'lastFrame/width' | 'lastFrame/x' | 'lastFrame/y' | 'position/x' | 'position/y' | 'rotation' | 'scene/dpi' | 'scene/pageDimensions/height' | 'scene/pageDimensions/width' | 'scene/pixelScaleFactor' | 'width' | 'camera/pixelRatio' | 'camera/resolution/height' | 'camera/resolution/width' | 'camera/zoomLevel' | 'dropShadow/blurRadius/x' | 'dropShadow/blurRadius/y' | 'dropShadow/offset/x' | 'dropShadow/offset/y' | 'page/guides/gridSpacingX' | 'page/guides/gridSpacingY' | 'page/margin/bottom' | 'page/margin/left' | 'page/margin/right' | 'page/margin/top' | 'playback/speed' | 'playback/volume' | 'stroke/width' | 'opacity' | 'backgroundColor/cornerRadius' | 'backgroundColor/paddingBottom' | 'backgroundColor/paddingLeft' | 'backgroundColor/paddingRight' | 'backgroundColor/paddingTop' | 'text/fontSize' | 'text/letterSpacing' | 'text/lineHeight' | 'text/maxAutomaticFontSize' | 'text/minAutomaticFontSize' | 'text/paragraphSpacing' | 'cutout/offset' | 'cutout/smoothing' | 'caption/fontSize' | 'caption/letterSpacing' | 'caption/lineHeight' | 'caption/maxAutomaticFontSize' | 'caption/minAutomaticFontSize' | 'caption/paragraphSpacing' | 'animation/slide/direction' | 'textAnimationOverlap' | 'animation/pan/direction' | 'animation/pan/distance' | 'animation/blur/intensity' | 'animation/grow/scaleFactor' | 'animation/crop_zoom/scale' | 'animation/spin/intensity' | 'animation/blur_loop/intensity' | 'animation/pulsating_loop/intensity' | 'animation/breathing_loop/intensity' | 'animation/jump_loop/intensity' | 'animation/sway_loop/intensity' | 'animation/scale_loop/startScale' | 'animation/scale_loop/endScale' | 'animation/spread_text/intensity' | 'animation/merge_text/intensity' | 'animation/ken_burns/travelDistanceRatio' | 'animation/ken_burns/zoomIntensity' | 'blur/uniform/intensity' | 'blur/linear/blurRadius' | 'blur/linear/x1' | 'blur/linear/x2' | 'blur/linear/y1' | 'blur/linear/y2' | 'blur/mirrored/blurRadius' | 'blur/mirrored/gradientSize' | 'blur/mirrored/size' | 'blur/mirrored/x1' | 'blur/mirrored/x2' | 'blur/mirrored/y1' | 'blur/mirrored/y2' | 'blur/radial/blurRadius' | 'blur/radial/gradientRadius' | 'blur/radial/radius' | 'blur/radial/x' | 'blur/radial/y' | 'effect/adjustments/blacks' | 'effect/adjustments/brightness' | 'effect/adjustments/clarity' | 'effect/adjustments/contrast' | 'effect/adjustments/exposure' | 'effect/adjustments/gamma' | 'effect/adjustments/highlights' | 'effect/adjustments/saturation' | 'effect/adjustments/shadows' | 'effect/adjustments/sharpness' | 'effect/adjustments/temperature' | 'effect/adjustments/whites' | 'effect/cross_cut/offset' | 'effect/cross_cut/slices' | 'effect/cross_cut/speedV' | 'effect/cross_cut/time' | 'effect/dot_pattern/blur' | 'effect/dot_pattern/dots' | 'effect/dot_pattern/size' | 'effect/duotone_filter/intensity' | 'effect/extrude_blur/amount' | 'effect/glow/amount' | 'effect/glow/darkness' | 'effect/glow/size' | 'effect/green_screen/colorMatch' | 'effect/green_screen/smoothness' | 'effect/green_screen/spill' | 'effect/half_tone/angle' | 'effect/half_tone/scale' | 'effect/linocut/scale' | 'effect/liquid/amount' | 'effect/liquid/scale' | 'effect/liquid/time' | 'effect/lut_filter/intensity' | 'effect/outliner/amount' | 'effect/outliner/passthrough' | 'effect/posterize/levels' | 'effect/radial_pixel/radius' | 'effect/radial_pixel/segments' | 'effect/recolor/brightnessMatch' | 'effect/recolor/colorMatch' | 'effect/recolor/smoothness' | 'effect/shifter/amount' | 'effect/shifter/angle' | 'effect/tilt_shift/amount' | 'effect/tilt_shift/position' | 'effect/tv_glitch/distortion' | 'effect/tv_glitch/distortion2' | 'effect/tv_glitch/rollSpeed' | 'effect/tv_glitch/speed' | 'effect/vignette/darkness' | 'effect/vignette/offset' | 'fill/gradient/linear/endPointX' | 'fill/gradient/linear/endPointY' | 'fill/gradient/linear/startPointX' | 'fill/gradient/linear/startPointY' | 'fill/gradient/radial/centerPointX' | 'fill/gradient/radial/centerPointY' | 'fill/gradient/radial/radius' | 'fill/gradient/conical/centerPointX' | 'fill/gradient/conical/centerPointY' | 'shape/rect/cornerRadiusBL' | 'shape/rect/cornerRadiusBR' | 'shape/rect/cornerRadiusTL' | 'shape/rect/cornerRadiusTR' | 'shape/polygon/cornerRadius' | 'shape/star/innerDiameter' | 'shape/vector_path/cornerRadius' | 'shape/vector_path/height' | 'shape/vector_path/width' | (string & {}); /** * Represents a font. * * The Font interface defines the structure of a font within the Creative Editor SDK. * It includes properties for the uri, subFamily, weight, and style. * * @public */ export declare interface Font { uri: string; subFamily: string; weight?: FontWeight; style?: FontStyle; } /** * Font metrics extracted from a font file. * Values are in the font's design units coordinate space. * @public */ export declare interface FontMetrics { /** The ascender value in font design units. */ ascender: number; /** The descender value in font design units (typically negative). */ descender: number; /** The number of units per em square (typically 1000 or 2048). */ unitsPerEm: number; /** The OS/2 sTypoLineGap value in font design units. */ lineGap: number; /** The OS/2 sCapHeight value in font design units. */ capHeight: number; /** The OS/2 sxHeight value in font design units. */ xHeight: number; /** The post.underlinePosition value in font design units (typically negative). */ underlineOffset: number; /** The post.underlineThickness value in font design units. */ underlineSize: number; /** The OS/2 yStrikeoutPosition value in font design units. */ strikeoutOffset: number; /** The OS/2 yStrikeoutSize value in font design units. */ strikeoutSize: number; } /** * Extended design unit type that includes Point for font size operations. * Maintains consistency with SceneDesignUnit's capitalized naming convention. * @public */ export declare type FontSizeUnit = SceneDesignUnit | 'Point'; /** * Represents the style of a font. * * The FontStyle type defines the possible styles of a font within the Creative Editor SDK. * Each style corresponds to a different appearance, allowing for flexibility in how fonts are styled. * * @public */ export declare type FontStyle = 'normal' | 'italic'; /** * Represents the weight of a font. * * The FontWeight type defines the possible weights of a font within the Creative Editor SDK. * Each weight corresponds to a different thickness, allowing for flexibility in how fonts are styled. * * @public */ export declare type FontWeight = 'thin' | 'extraLight' | 'light' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'extraBold' | 'heavy'; /** * Represents a gradient color stop. * * Defines a gradient color stop with a color and a stop position. * - 'color': The color value. * - 'stop': The relative position of the color within the gradient in the range [0, 1]. * * @public */ export declare interface GradientColorStop { /** A color value within a gradient. */ color: Color; /** The relative position of the color within the gradient in the range [0, 1]. */ stop: number; } /** * Represents a gradient stop in the RGBA color space. * * The `GradientstopRGBA` type is a tuple that contains five numbers representing the stop * position and the red, green, blue, and alpha components of the color. * * @categoryDescription GradientstopRGBA * Methods for working with gradient stops in the RGBA color space. * * @public */ export declare type GradientstopRGBA = [ stop: number, r: number, g: number, b: number, a: number ]; /** @public */ export declare type HeightMode = (typeof HeightModeValues)[number]; /** @public */ export declare const HeightModeValues: readonly ["Absolute", "Percent", "Auto"]; /** * Represents a hexadecimal color value (RGB or RGBA) that starts with a '#'. * * @categoryDescription Hex Color String * Defines a hexadecimal color value that starts with a '#'. * - '#6686FF': A hexadecimal color value for RGB. * - '#6686FFFF': A hexadecimal color value for RGBA. * * @public */ export declare type HexColorString = string; /** * A numerical identifier for a history stack * @public */ export declare type HistoryId = number; /** @public */ export declare type HorizontalBlockAlignment = TextHorizontalAlignment; /** * A wrapper around a plain canvas * * The idea is to shield the user from the weird semantics of changing width * and height of a canvas by making this a opaque block element instead and * managing the internal render resolution of the canvas dynamically * * @public */ export declare interface HTMLCreativeEngineCanvasElement extends HTMLElement { /** * Clear the canvas * * This is useful when mounting the canvas into a new position in the DOM. * If the canvas is not cleared, it will appear in the new DOM position, with * its contents stretched to the new size. It will re-render correctly during * the next animation frame, but for a brief moment the canvas contents can * flash distorted. * * Call `clear()` before mounting into the DOM to avoid this. This will cause * the canvas to be cleared until rendering the next frame. */ clear(): void; } /** * Represents the image MIME types used in the editor. * * @categoryDescription Image MIME Type * Defines the possible image MIME types used in the editor. * - 'image/png': PNG image format. * - 'image/jpeg': JPEG image format. * - 'image/webp': WebP image format. * - 'image/x-tga': TGA image format. * - 'image/svg+xml': SVG image format. * * @public */ export declare type ImageMimeType = Extract; /** @public */ export declare type IntPropertyName = 'effect/lut_filter/horizontalTileCount' | 'effect/lut_filter/verticalTileCount' | 'effect/mirror/side' | 'effect/pixelize/horizontalPixelSize' | 'effect/pixelize/verticalPixelSize' | 'shape/polygon/sides' | 'shape/star/points' | (string & {}); /** * Type guard for {@link CMYKColor}. * * @categoryDescription Type Guard * Defines a type guard for CMYKColor. * * @public */ export declare function isCMYKColor(color: Color): color is CMYKColor; /** * Type guard for {@link RGBAColor}. * * @categoryDescription Type Guard * Defines a type guard for RGBAColor. * * @public */ export declare function isRGBAColor(color: Color): color is RGBAColor; /** * Type guard for {@link SpotColor}. * * @categoryDescription Type Guard * Defines a type guard for SpotColor. * * @public */ export declare function isSpotColor(color: Color): color is SpotColor; /** * A simplified source type for legacy API streams * @public */ export declare type _LegacySource = (handler: (value: T) => void) => () => void; /** * Lightweight reactive state utilities for managing subscriptions and state updates. * * This module provides a set of composable utilities for creating reactive properties * without the overhead of a full reactive framework. It's designed to replace the * previous Channel abstraction with simpler, more focused primitives. * * @module reactiveState * @public */ /** * A listener function that receives value updates * @public */ export declare type _Listener = (value: T) => void; /** * Represents the list style of a paragraph. * * @public */ export declare type ListStyle = 'None' | 'Unordered' | 'Ordered'; /** * e.g. `en`, `de`, etc. * @public */ export declare type Locale = string; /** * Represents a logger function. * * The Logger interface defines the structure of a logger function within the Creative Editor SDK. * It includes a method for logging messages with an optional log level. * * @categoryDescription Logging * Methods for managing logging within the editor. * * @public */ export declare interface Logger { (message: string, level?: LogLevel): void; } /** * Provides logging functionality for the Creative Editor SDK. * * The `Logger` interface and associated types define a standardized way to log messages * at different severity levels within the SDK. This allows developers to track the * behavior of the editor, diagnose issues, and understand the flow of operations. * * @categoryDescription Logging * Methods for managing logging within the editor. * * @public */ export declare type LogLevel = 'Info' | 'Warning' | 'Error'; /** * Provides a set of predefined log levels for the Creative Editor SDK. * * The `LogLevel` object contains constants representing different severity levels * for logging messages. These levels can be used to categorize log messages based * on their importance and urgency. * * @categoryDescription Logging * Methods for managing logging within the editor. * * @public * @deprecated Specifying log levels via `LogLevel.Info` has been deprecated. * Please use the desired LogLevel string directly. */ export declare const LogLevel: { readonly Info: "Info"; readonly Warning: "Warning"; readonly Error: "Error"; }; /** * Creates a simple event source that can emit values to subscribed listeners. * * This is the most basic building block - a pub/sub pattern without state management. * * @example * ```typescript * const onResize = makeSource<{ width: number; height: number }>(); * * // Subscribe * const unsubscribe = onResize((size) => { * console.log('New size:', size); * }); * * // Emit * onResize.emit({ width: 800, height: 600 }); * * // Cleanup * unsubscribe(); * ``` * * @returns A source function with an emit method * @public */ export declare function _makeSource(): _Source; /** * Merges multiple event sources into a single source that emits when any source emits. * * This is useful for tracking properties that depend on multiple independent events. * * @example * ```typescript * const zoomChanged = engine.scene.onZoomLevelChanged; * const dpiChanged = engine.scene.onDpiChanged; * * const zoomOrDpiChanged = mergeSources(zoomChanged, dpiChanged); * * // Now use with createTrackedProperty * const normalizedZoom = createTrackedProperty( * () => engine.scene.getZoomLevel() / getDpi(), * (value) => engine.scene.setZoomLevel(value * getDpi()), * zoomOrDpiChanged * ); * ``` * * @param sources - Event source functions to merge * @returns A merged source that emits when any source emits * @public */ export declare function _mergeSources(...sources: Array<(listener: _Listener) => _Unsubscribe>): (listener: _Listener) => _Unsubscribe; /** * Represents the MIME types used in the editor. * * @categoryDescription MIME Type * Defines the possible MIME types used in the editor. * - 'image/png': PNG image format. * - 'image/jpeg': JPEG image format. * - 'image/webp': WebP image format. * - 'image/x-tga': TGA image format. * - 'image/svg+xml': SVG image format. * - 'audio/wav': WAV audio format. * - 'audio/mp4': MP4 audio format. * - 'video/mp4': MP4 video format. * - 'video/quicktime': QuickTime video format. * - 'application/octet-stream': Binary data format. * - 'application/pdf': PDF document format. * - 'application/zip': ZIP archive format. * * @public * @deprecated Use the `MimeType` string literal types instead. */ declare const MimeType_2: { readonly Png: "image/png"; readonly Jpeg: "image/jpeg"; readonly WebP: "image/webp"; readonly Tga: "image/x-tga"; readonly Svg: "image/svg+xml"; readonly Wav: "audio/wav"; readonly Mp4Audio: "audio/mp4"; readonly Mp4: "video/mp4"; readonly QuickTime: "video/quicktime"; readonly Binary: "application/octet-stream"; readonly Pdf: "application/pdf"; readonly Zip: "application/zip"; }; /** * Represents the MIME types used in the editor. * * @categoryDescription MIME Type * Defines the possible MIME types used in the editor. * - 'image/png': PNG image format. * - 'image/jpeg': JPEG image format. * - 'image/webp': WebP image format. * - 'image/x-tga': TGA image format. * - 'image/svg+xml': SVG image format. * - 'audio/wav': WAV audio format. * - 'audio/mp4': MP4 audio format. * - 'video/mp4': MP4 video format. * - 'video/quicktime': QuickTime video format. * - 'application/octet-stream': Binary data format. * - 'application/pdf': PDF document format. * - 'application/zip': ZIP archive format. * * @public */ declare type MimeType_2 = (typeof MimeType_2)[keyof typeof MimeType_2]; export { MimeType_2 as MimeType } /** * A movement constraint rule. The scope is determined by which key is present: * neither (scene-wide default), `block` (per-block, includes pages), or * `blockType` (per-block-type). * * `overshoot` is a non-negative fraction of the moved block's own size. */ declare type MovementConstraintRule = { overshoot: number; } | { overshoot: number; block: DesignBlockId; } | { overshoot: number; blockType: string; }; /** * A scope descriptor used to identify an existing movement constraint for * removal. */ declare type MovementConstraintScope = { block: DesignBlockId; } | { blockType: string; }; /** * The block type IDs for all blocks types in the Creative Engine. Those are the types that can be * passed to `cesdk.engine.block.findByType(type)` for example. * Refer to {@link ObjectTypeShorthand} and {@link ObjectTypeLonghand} for more details. * @public */ export declare type ObjectType = ObjectTypeShorthand | ObjectTypeLonghand; /** * The longhand block type IDs for all blocks types in the Creative Engine. Those are the Types returned by the * engine when calling `cesdk.engine.block.getType(blockId)` for example. * @public */ export declare type ObjectTypeLonghand = DesignBlockTypeLonghand | ShapeTypeLonghand | FillTypeLonghand | EffectTypeLonghand | BlurTypeLonghand | AnimationTypeLonghand; /** * The shorthand block type IDs for all blocks types in the Creative Engine. Those are the types that can be * passed to `cesdk.engine.block.findByType(type)` for example. * @public */ export declare type ObjectTypeShorthand = DesignBlockTypeShorthand | `shape/${ShapeTypeShorthand}` | `fill/${FillTypeShorthand}` | `effect/${EffectTypeShorthand}` | `blur/${BlurTypeShorthand}` | `animation/${AnimationTypeShorthand}`; /** * A simplified placeholder type for `OffscreenCanvas`, to avoid a dependency on `@types/offscreencanvas` * @public */ declare type OffscreenCanvas_2 = { width: number; height: number; }; export { OffscreenCanvas_2 as OffscreenCanvas } /** @public */ export declare type OptionalPrefix = `ubq://${T}` | T; /** @public */ export declare interface PageDuration { pageId: DesignBlockId; duration: number; start: number; end: number; } /** @public */ export declare type PageGuidesSource = (typeof PageGuidesSourceValues)[number]; /** @public */ export declare const PageGuidesSourceValues: readonly ["Document", "Custom"]; /** * Represents a color definition for the custom color palette. * * @categoryDescription Palette Color * Defines a color definition for the custom color palette. * - 'HexColorString': A hexadecimal color value. * - 'RGBColor': An RGB color value. * - 'RGBAColor': An RGBA color value. * - 'SpotColor': A spot color value. * * @public */ export declare type PaletteColor = HexColorString | RGBColor | RGBAColor | SpotColor; /** @public */ export declare type PositionMode = PositionXMode | PositionYMode; /** @public */ export declare type PositionXMode = (typeof PositionXModeValues)[number]; /** @public */ export declare const PositionXModeValues: readonly ["Absolute", "Percent", "Auto"]; /** @public */ export declare type PositionYMode = (typeof PositionYModeValues)[number]; /** @public */ export declare const PositionYModeValues: readonly ["Absolute", "Percent", "Auto"]; /** * Represents the various types of properties that can be associated with design blocks. * Each type corresponds to a different kind of data that can be used to define the properties * of a design block within the system. * * @categoryDescription Property Types * Defines the different types of properties that can be used to describe design blocks. * * @public */ export declare type PropertyType = 'Bool' | 'Int' | 'Float' | 'String' | 'Color' | 'Enum' | 'Struct' | 'Double' | 'SourceSet'; /** * An open range. * @public * */ declare interface Range_2 { /** The starting value of the range */ from: number; /** The non-inclusive ending value of the range */ to: number; } export { Range_2 as Range } /** * Reactions track read calls and provide a way to react if they change. * * - Read calls are tracked by passing a function to `track`. That function * will be executed, and any read calls made during that execution will be * tracked and associated with this reaction. * - Reactions can be subscribed to by passing a callback to `subscribe`. That * callback will be executed whenever any of the read calls associated with * this reaction change. * * @public */ export declare interface Reaction { /** * Execute the callback and track all engine read calls that happen during * the execution. These read calls are associated with this reaction. */ track(cb: () => T): T; /** * When the Reactor detects that the engine read calls associated with this * reaction might have changed, it will invoke the subscription handler. * @returns A function that can be called to unsubscribe the handler. */ subscribe(cb: () => void): () => void; /** * Unsubscribe all handlers, nullify the reference to the Reactor * and dispose the reaction. */ dispose(): void; } /** * A reactive property with subscribe, value, and update methods * @public */ export declare interface _ReactiveProperty { /** * Subscribe to value changes * @param listener - Function to call when value changes * @returns Unsubscribe function */ subscribe: (listener: _Listener) => _Unsubscribe; /** * Get current value */ value: () => T; /** * Update the value (will notify listeners if changed) */ update: (newValue: T) => void; } /** * Options for creating a reactive property * @public */ export declare interface _ReactivePropertyOptions { /** * Equality comparison function (default: strict equality) */ equals?: _EqualsFn; /** * If true, emit the initial value to new subscribers */ emitOnSubscribe?: boolean; /** * Optional source to track (will subscribe and forward updates) */ trackSource?: (listener: _Listener) => _Unsubscribe; } /** * The reactor coordinates the update of registered _Reactions_. * * - Reactions are created with `createReaction()` * - `reaction.track(effect)` will run the effect and associate any engine read * calls during the execution with the Reaction. * - `reaction.subscribe(handler)` will invoke the handler whenever the engine read calls * in the reaction might have changed after an update. * * @public */ export declare interface Reactor { /** * Create and return a new Reaction that is associated with this Reactor. */ createReaction(debugName?: string): Reaction; /** * Dispose the reactor and all reactions. * After this call, the reactor is no longer usable. */ dispose(): void; /** * A promise that will resolve after the next update of the Reactor. * * This can be used to wait for the next update of the Reactor in an async function. * * ```ts * await reactor.nextReaction; * ``` * * This is useful in situations where you want to make sure that the effects of * a reactor update have propagated to any dependent code before continuing. * Particularly, this can be used to ensure that the UI has updated before * continuing with other operations. */ nextReaction: Promise; } /** * A read-only reactive property with subscribe and value methods * @public */ export declare interface _ReadonlyReactiveProperty { /** * Subscribe to value changes * @param listener - Function to call when value changes * @returns Unsubscribe function */ subscribe: (listener: _Listener) => _Unsubscribe; /** * Get current value */ value: () => T; } /** * Dispatched on the engine canvas right before the engine will refocus its text * input after a blur. Call `preventDefault()` to prevent the refocusing. * @public */ export declare interface RefocusEvent extends CustomEvent { readonly type: 'cesdk-refocus'; /** Contains the element that has received focus during the blur, or null */ readonly detail: EventTarget | null; /** Prevent refocusing the engine input */ preventDefault(): void; } /** * The effective movement constraint for a block, or `null` when no constraint * applies. */ declare type ResolvedMovementConstraint = { overshoot: number; } | null; /** * Represents a color in the RGBA color space. * * The `RGBA` type is a tuple that contains four numbers representing the red, green, * blue, and alpha components of the color. * * @categoryDescription RGBA * Methods for working with colors in the RGBA color space. * * @public */ export declare type RGBA = [r: number, g: number, b: number, a: number]; /** * Represents an RGBA color value. * * Defines an RGBA color value with components between 0 and 1. * - 'r': The red component. * - 'g': The green component. * - 'b': The blue component. * - 'a': The alpha component. * * @public */ export declare interface RGBAColor { /** Red */ r: number; /** Green */ g: number; /** Blue */ b: number; /** Alpha */ a: number; } /** * Represents an RGB color value. * * Defines an RGB color value with components between 0 and 1. * - 'r': The red component. * - 'g': The green component. * - 'b': The blue component. * * @public */ export declare interface RGBColor { /** Red */ r: number; /** Green */ g: number; /** Blue */ b: number; } /** * Represents a role string. * * The RoleString type defines the possible roles within the Creative Editor SDK. * Each role corresponds to a different level of access and permissions, allowing for flexibility in how users are managed. * * @categoryDescription Roles * Methods for managing roles within the editor. * * @public */ export declare type RoleString = 'Creator' | 'Adopter' | 'Viewer' | 'Presenter'; /** * Options for saveSceneToString operation. * @public */ declare interface SaveToStringOptions { /** * List of resource URL schemes that are allowed in the serialized scene. * Resources with other schemes will trigger the persistence callback. */ resourceSchemesAllowed?: string[]; /** * Optional callback for persisting resources with disallowed schemes. */ persistenceCallback?: (url: string, dataHash: string, persistedCallback?: { invoke(url: string, persistedUrl: string): void; }) => void; /** * Compression options for the serialized scene. * When compression is enabled, base64 encoding is skipped and raw binary data is returned. */ compression?: { /** Compression format (None = no compression, Zstd = zstd compression) */ format?: CompressionFormat_2; /** Compression level (Fastest, Default, Best) */ level?: CompressionLevel; }; } /** * @public Create, load, save, and manipulate scenes. * * Scenes are the root element of every design hierarchy. Their children, stacks of pages, individual pages or other blocks, define the content of the design. * Scenes can be created from scratch, loaded from a file or URL, or created from an image or video. After manipulation, they can be saved to a string or an archive. This allows further processing in another editor instance, automated processing in scripts or sharing with other users. * * @categoryDescription Scene Loading * Load scenes from various sources including strings, URLs, and archives. * * @categoryDescription Scene Saving * Save and export scenes to different formats. * * @categoryDescription Scene Creation * Create new scenes from scratch or from media files. * * @categoryDescription Scene Properties * Get and set scene properties like design units and mode. * * @categoryDescription Template Operations * Apply templates to existing scenes. * * @categoryDescription Page Management * Manage pages within scenes and find elements. * * @categoryDescription Camera & Zoom * Control camera position, zoom levels, and auto-fit behavior. * * @categoryDescription Event Subscriptions * Subscribe to scene-related events and changes. * * @categoryDescription Experimental Features * Experimental features that may change or be removed in future versions. */ export declare class SceneAPI { #private; /** * Load the contents of a scene file. * * The string must be the binary contents of a scene file and is directly imported as blocks. Any existing scene is replaced by the new one. * This is useful for loading scenes that were saved with `saveToString` or scenes that were created in another editor instance. * * ```javascript * const sceneContent = await creativeEngine.scene.saveToString(); * creativeEngine.scene.loadFromString(sceneContent); * ``` * * @category Scene Loading * @param sceneContent - The scene file contents, a base64 string. * @param overrideEditorConfig - Whether to override editor configuration with settings and data from the scene file. Defaults to false. * @param waitForResources - Whether to wait for all resources to finish loading before resolving. Defaults to false. * @returns A handle to the loaded scene. */ loadFromString(sceneContent: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise; /** * Load a scene from the URL to the scene file. * * The scene file will be fetched asynchronously by the engine and loaded into the engine once it is available. Any existing scene is replaced by the new one. * * ```javascript * const sceneURL = 'https://example.com/my-scene.json'; * creativeEngine.scene.loadFromURL(sceneURL); * ``` * * @category Scene Loading * @param url - The URL of the scene file. * @param overrideEditorConfig - Whether to override editor configuration with settings and data from the scene file. Defaults to false. * @param waitForResources - Whether to wait for all resources to finish loading before resolving. Defaults to false. * @returns scene A promise that resolves once the scene was loaded or rejects with an error otherwise. */ loadFromURL(url: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise; /** * Load a previously archived scene from the URL to the scene file. * * The scene file will be fetched asynchronously by the engine. This requires continuous `render` * calls on this engines instance. * * @category Scene Loading * @param url - The URL of the scene archive file. * @param overrideEditorConfig - Whether to override editor configuration with settings and data from the scene file. Defaults to false. * @param waitForResources - Whether to wait for all resources to finish loading before resolving. Defaults to false. * @returns scene A promise that resolves once the scene was loaded or rejects with an error otherwise. */ loadFromArchiveURL(url: string, overrideEditorConfig?: boolean, waitForResources?: boolean): Promise; /** * Serializes the current scene into a string. Selection is discarded. * * @category Scene Saving * @param allowedResourceSchemes - The resource schemes to allow in the saved string. * @param onDisallowedResourceScheme - An optional callback that is called for each resource URL that has a scheme absent from * `resourceSchemesAllowed`. The `url` parameter is the resource URL and the `dataHash` parameter is the hash of the * resource's data. The callback should return a new URL for the resource, which will be used in the serialized * scene. The callback is expected to return the original URL if no persistence is needed. * @returns A promise that resolves with a string on success or an error on failure. * @deprecated Use saveToString(options) instead for better extensibility and to access compression features. */ saveToString(allowedResourceSchemes: string[], onDisallowedResourceScheme?: (url: string, dataHash: string) => Promise): Promise; /** * Serializes the current scene into a string. Selection is discarded. * * @category Scene Saving * @param options - Save options containing: * - allowedResourceSchemes: The resource schemes to allow in the saved string. Defaults to ['blob', 'bundle', 'file', 'http', 'https', 'opfs']. * - onDisallowedResourceScheme: An optional callback that is called for each resource URL that has a scheme absent from * `resourceSchemesAllowed`. The `url` parameter is the resource URL and the `dataHash` parameter is the hash of the * resource's data. The callback should return a new URL for the resource, which will be used in the serialized * scene. The callback is expected to return the original URL if no persistence is needed. * - compression: Optional compression settings containing: * - format: Compression format (None or Zstd). Defaults to None. * - level: Compression level (Fastest, Default, or Best). Defaults to Default. * @returns A promise that resolves with a string on success or an error on failure. */ saveToString(options?: { allowedResourceSchemes?: string[]; onDisallowedResourceScheme?: (url: string, dataHash: string) => Promise; compression?: { format?: CompressionFormat_2; level?: CompressionLevel; }; }): Promise; /** * Saves the current scene and all of its referenced assets into an archive. * * The archive contains all assets, that were accessible when this function was called. * Blocks in the archived scene reference assets relative from to the location of the scene * file. These references are resolved when loading such a scene via `loadSceneFromURL`. * * @category Scene Saving * @returns A promise that resolves with a Blob on success or an error on failure. */ saveToArchive(): Promise; /** * Create a new design scene, along with its own camera. * * ```javascript * const scene = engine.scene.create(layout); * ``` * * @category Scene Creation * @param sceneLayout - The layout of the scene. * @param options - Optional parameters for the scene. Properties: * - `page` - Page options. Properties: * - `size` - The size of the page. * - `color` - Optional background color of the page. * @returns The scene's handle. */ create(sceneLayout?: SceneLayout, options?: CreateSceneOptions): DesignBlockId; /** * Create a new scene in video mode, along with its own camera. * * @deprecated Scene mode no longer affects engine behavior. Use `create()` followed by `setMode('Video')` instead. * * ```javascript * const scene = engine.scene.createVideo(); * ``` * * @category Scene Creation * @param options - Optional parameters for the scene. Properties: * - `page` - Page options. Properties: * - `size` - The size of the page. * - `color` - Optional background color of the page. * @returns The scene's handle. */ createVideo(options?: CreateSceneOptions): DesignBlockId; /** * Loads the given image and creates a scene with a single page showing the image. * * Fetching the image may take an arbitrary amount of time, so the scene isn't immediately available. * * ```javascript * const scene = await engine.scene.createFromImage('https://img.ly/static/ubq_samples/sample_4.jpg'); * ``` * * @category Scene Creation * @param url - The image URL. * @param dpi - The scene's DPI. * @param pixelScaleFactor - The display's pixel scale factor. * @returns A promise that resolves with the scene ID on success or rejected with an error otherwise. */ createFromImage(url: string, dpi?: number, pixelScaleFactor?: number, sceneLayout?: SceneLayout, spacing?: number, spacingInScreenSpace?: boolean): Promise; /** * Loads the given video and creates a scene with a single page showing the video. * * Fetching the video may take an arbitrary amount of time, so the scene isn't immediately * available. * * ```javascript * const scene = await engine.scene.createFromVideo('https://img.ly/static/ubq_video_samples/bbb.mp4'); * ``` * * @category Scene Creation * @param url - The video URL. * @returns A promise that resolves with the scene ID on success or rejected with an error otherwise. */ createFromVideo(url: string): Promise; /** * Return the currently active scene. * * ```javascript * const scene = engine.scene.get(); * ``` * * @category Scene Properties * @returns The scene or null, if none was created yet. */ get(): DesignBlockId | null; /** * Applies the contents of the given template scene to the currently loaded scene. * * This loads the template scene while keeping the design unit and page dimensions * of the current scene. The content of the pages is automatically adjusted to fit * the new dimensions. * * * ```javascript * engine.scene.applyTemplateFromString("UBQ1ewoiZm9ybWF0Ij..."); * ``` * * @category Template Operations * @param content - The template scene file contents, a base64 string. * @returns A Promise that resolves once the template was applied or rejects if there was an error. */ applyTemplateFromString(content: string): Promise; /** * Applies the contents of the given template scene to the currently loaded scene. * * This loads the template scene while keeping the design unit and page dimensions * of the current scene. The content of the pages is automatically adjusted to fit * the new dimensions. * * ```javascript * engine.scene.applyTemplateFromURL('https://cdn.img.ly/assets/demo/v4/ly.img.template/templates/cesdk_postcard_1.scene'); * ``` * * @category Template Operations * @param url - The url to the template scene file. * @returns A Promise that resolves once the template was applied or rejects if there was an error. */ applyTemplateFromURL(url: string): Promise; /** * Get the current scene mode. * * @deprecated Scene mode no longer affects engine behavior. All features work regardless of mode. * * ```javascript * const mode = scene.getMode(); * ``` * * @category Scene Properties * @returns The current mode of the scene, or null if no mode has been set. */ getMode(): SceneMode | null; /** * Set the mode of the scene. * * @deprecated Scene mode no longer affects engine behavior. All features work regardless of mode. * * ```javascript * engine.scene.setMode('Video'); * ``` * * @category Scene Properties * @param mode - The new mode for the scene. */ setMode(mode: SceneMode): void; /** * Converts all values of the current scene into the given design unit. * * ```javascript * engine.scene.setDesignUnit('Pixel'); * ``` * * @category Scene Properties * @param designUnit - The new design unit of the scene */ setDesignUnit(designUnit: SceneDesignUnit): void; /** * Returns the design unit of the current scene. * * ```javascript * engine.scene.getDesignUnit(); * ``` * * @category Scene Properties * @returns The current design unit. */ getDesignUnit(): SceneDesignUnit; /** * Get the layout of the current scene. * * ```javascript * const layout = engine.scene.getLayout(); * ``` * * @category Scene Properties * @returns The current layout of the scene. */ getLayout(): SceneLayout; /** * Set the layout of the current scene. * This will handle all necessary conversions including creating or destroying stack blocks * and reparenting pages as needed. * * When transitioning from stack layouts (VerticalStack, HorizontalStack, DepthStack) to Free layout, * the global positions of pages are preserved to maintain their visual appearance in the scene. * * ```javascript * engine.scene.setLayout('VerticalStack'); * ``` * * @category Scene Properties * @param layout - The new layout for the scene. */ setLayout(layout: SceneLayout): void; /** * Get the sorted list of pages in the scene. * * ```javascript * const pages = engine.scene.getPages(); * ``` * * @category Page Management * @returns The sorted list of pages in the scene. */ getPages(): DesignBlockId[]; /** * Get the current page, i.e., the page of the first selected element if this page * is at least 25% visible or, otherwise, the page nearest to the viewport center. * * ```javascript * const currentPage = engine.scene.getCurrentPage(); * ``` * * @category Page Management * @returns The current page in the scene or null. */ getCurrentPage(): DesignBlockId | null; /** * Find all blocks with the given type sorted by the distance to viewport center. * * ```javascript * // Use longhand block type ID to find nearest pages. * let nearestPageByType = engine.scene.findNearestToViewPortCenterByType('//ly.img.ubq/page')[0]; * // Or use shorthand block type ID. * nearestPageByType = engine.scene.findNearestToViewPortCenterByType('page')[0]; * ``` * * @category Page Management * @param type - The type to search for. * @returns A list of block ids sorted by distance to viewport center. */ findNearestToViewPortCenterByType(type: DesignBlockType): DesignBlockId[]; /** * Find all blocks with the given kind sorted by the distance to viewport center. * * ```javascript * let nearestImageByKind = engine.scene.findNearestToViewPortCenterByKind('image')[0]; * ``` * * @category Page Management * @param kind - The kind to search for. * @returns A list of block ids sorted by distance to viewport center. */ findNearestToViewPortCenterByKind(kind: string): DesignBlockId[]; /** * Set the zoom level of the scene, e.g., for headless versions. * * This only shows an effect if the zoom level is not handled/overwritten by the UI. * Setting a zoom level of 2.0f results in one dot in the design to be two pixels on the screen. * * ```javascript * // Zoom to 100% * engine.scene.setZoomLevel(1.0); * * // Zoom to 50% * engine.scene.setZoomLevel(0.5 * engine.scene.getZoomLevel()); * ``` * * @category Camera & Zoom * @param zoomLevel - The new zoom level. */ setZoomLevel(zoomLevel?: number): void; /** * Get the zoom level of the scene or for a camera in the scene in unit `dpx/dot`. A zoom level of 2.0 results in one pixel in the design to be two pixels * on the screen. * * ```javascript * const zoomLevel = engine.scene.getZoomLevel(); * ``` * * @category Camera & Zoom * @returns The zoom level of the block's camera. */ getZoomLevel(): number; /** * Sets the zoom and focus to show a block, optionally with animation. * This only shows an effect if the zoom level is not handled/overwritten by the UI. * Without padding, this results in a tight view on the block. * * @param id - The block that should be focused on. * @param options - Configuration for padding and animation. * @returns A promise that resolves once the zoom was set or rejects with an error otherwise. */ zoomToBlock(id: DesignBlockId, options?: ZoomOptions): Promise; /** * Sets the zoom and focus to show a block. * * This only shows an effect if the zoom level is not handled/overwritten by the UI. * Without padding, this results in a tight view on the block. * * ```javascript * // Bring entire scene in view with padding of 20px in all directions * engine.scene.zoomToBlock(scene, 20.0, 20.0, 20.0, 20.0); * ``` * * @category Camera & Zoom * @param id - The block that should be focused on. * @param paddingLeft - Optional padding in screen pixels to the left of the block. * @param paddingTop - Optional padding in screen pixels to the top of the block. * @param paddingRight - Optional padding in screen pixels to the right of the block. * @param paddingBottom - Optional padding in screen pixels to the bottom of the block. * @returns A promise that resolves once the zoom was set or rejects with an error otherwise. * @deprecated Use zoomToBlock with options object instead */ zoomToBlock(id: DesignBlockId, paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): Promise; /** * Continually adjusts the zoom level to fit the width or height of a block's axis-aligned bounding box. * * This only shows an effect if the zoom level is not handled/overwritten by the UI. * Without padding, this results in a tight view on the block. * No more than one block per scene can have zoom auto-fit enabled. * Calling `setZoomLevel` or `zoomToBlock` disables the continuous adjustment. * * ```javascript * // Follow page with padding of 20px horizontally before and after the block * engine.scene.enableZoomAutoFit(page, 'Horizontal', 20, 20) * ``` * * @category Camera & Zoom * @param id - The block for which the zoom is adjusted. * @param axis - The block axis for which the zoom is adjusted. * @param paddingBefore - Optional padding in screen pixels before the block. * @param paddingAfter - Optional padding in screen pixels after the block. */ enableZoomAutoFit(id: DesignBlockId, axis: 'Horizontal' | 'Vertical', paddingBefore?: number, paddingAfter?: number): void; /** * Continually adjusts the zoom level to fit the width or height of a block's axis-aligned bounding box. * * This only shows an effect if the zoom level is not handled/overwritten by the UI. * Without padding, this results in a tight view on the block. * Calling `setZoomLevel` or `zoomToBlock` disables the continuous adjustment. * * ```javascript * // Follow page with padding of 20px in both directions * engine.scene.enableZoomAutoFit(page, 'Both', 20.0, 20.0, 20.0, 20.0); * ``` * * @category Camera & Zoom * @param id - The block for which the zoom is adjusted. * @param axis - The block axis for which the zoom is adjusted. * @param paddingLeft - Optional padding in screen pixels to the left of the block. * @param paddingTop - Optional padding in screen pixels to the top of the block. * @param paddingRight - Optional padding in screen pixels to the right of the block. * @param paddingBottom - Optional padding in screen pixels to the bottom of the block. */ enableZoomAutoFit(id: DesignBlockId, axis: 'Both', paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): void; /** * Disables any previously set zoom auto-fit. * * ```javascript * engine.scene.disableZoomAutoFit(scene); * ``` * * @category Camera & Zoom * @param blockOrScene - The scene or a block in the scene for which to disable zoom auto-fit. */ disableZoomAutoFit(blockOrScene: DesignBlockId): void; /** * Queries whether zoom auto-fit is enabled for the given block. * * ```javascript * engine.scene.isZoomAutoFitEnabled(scene); * ``` * * @category Camera & Zoom * @param blockOrScene - The scene or a block in the scene for which to query the zoom auto-fit. * @returns True if the given block has auto-fit set or the scene contains a block for which auto-fit is set, false * otherwise. */ isZoomAutoFitEnabled(blockOrScene: DesignBlockId): boolean; /** * Continually ensures the camera position to be within the width and height of the blocks axis-aligned bounding box. * Disables any previously set camera position clamping in the scene and also takes priority over clamp camera commands. * * ```javascript * // Keep the scene with padding of 10px within the camera * engine.scene.unstable_enableCameraPositionClamping([scene], 10.0, 10.0, 10.0, 10.0, 0.0, 0.0, 0.0, 0.0); * ``` * * Without padding, this results in a tight clamp on the block. With padding, the padded part of the * blocks is ensured to be visible. * * @category Experimental Features * @param ids - The blocks to which the camera position is adjusted to, usually, the scene or a page. * @param paddingLeft - Optional padding in screen pixels to the left of the block. * @param paddingTop - Optional padding in screen pixels to the top of the block. * @param paddingRight - Optional padding in screen pixels to the right of the block. * @param paddingBottom - Optional padding in screen pixels to the bottom of the block. * @param scaledPaddingLeft - Optional padding in screen pixels to the left of the block that scales with the zoom level until five times the initial value. * @param scaledPaddingTop - Optional padding in screen pixels to the top of the block that scales with the zoom level until five times the initial value. * @param scaledPaddingRight - Optional padding in screen pixels to the right of the block that scales with the zoom level until five times the initial value. * @param scaledPaddingBottom - Optional padding in screen pixels to the bottom of the block that scales with the zoom level until five times the initial value. * @experimental This API is experimental and may change or be removed in future versions. */ unstable_enableCameraPositionClamping(ids: DesignBlockId[], paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number, scaledPaddingLeft?: number, scaledPaddingTop?: number, scaledPaddingRight?: number, scaledPaddingBottom?: number): void; /** * Disables any previously set position clamping for the current scene. * * ```javascript * engine.scene.unstable_disableCameraPositionClamping(); * ``` * * @category Experimental Features * @param blockOrScene - Optionally, the scene or a block in the scene for which to query the position clamping. * @experimental This API is experimental and may change or be removed in future versions. */ unstable_disableCameraPositionClamping(blockOrScene?: number | null): void; /** * Queries whether position clamping is enabled. * * ```javascript * engine.scene.unstable_isCameraPositionClampingEnabled(); * ``` * * @category Experimental Features * @param blockOrScene - Optionally, the scene or a block in the scene for which to query the position clamping. * @returns True if the given block has position clamping set or the scene contains a block for which position clamping is set, false * otherwise. * @experimental This API is experimental and may change or be removed in future versions. */ unstable_isCameraPositionClampingEnabled(blockOrScene?: number | null): boolean; /** * Continually ensures the zoom level of the camera in the active scene to be in the given range. * * ```javascript * // Allow zooming from 12.5% to 800% relative to the size of a page * engine.scene.unstable_enableCameraZoomClamping([page], 0.125, 8.0, 0.0, 0.0, 0.0, 0.0); * ``` * @category Experimental Features * @param ids - The blocks to which the camera zoom limits are adjusted to, usually, the scene or a page. * @param minZoomLimit - The minimum zoom level limit when zooming out, unlimited when negative. * @param maxZoomLimit - The maximum zoom level limit when zooming in, unlimited when negative. * @param paddingLeft - Optional padding in screen pixels to the left of the block. Only applied when the block is not a camera. * @param paddingTop - Optional padding in screen pixels to the top of the block. Only applied when the block is not a camera. * @param paddingRight - Optional padding in screen pixels to the right of the block. Only applied when the block is not a camera. * @param paddingBottom - Optional padding in screen pixels to the bottom of the block. Only applied when the block is not a camera. * @experimental This API is experimental and may change or be removed in future versions. */ unstable_enableCameraZoomClamping(ids: DesignBlockId[], minZoomLimit?: number, maxZoomLimit?: number, paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): void; /** * Disables any previously set zoom clamping for the current scene. * * ```javascript * engine.scene.unstable_disableCameraZoomClamping(); * ``` * * @category Experimental Features * @param blockOrScene - Optionally, the scene or a block for which to query the zoom clamping. * @experimental This API is experimental and may change or be removed in future versions. */ unstable_disableCameraZoomClamping(blockOrScene?: number | null): void; /** * Queries whether zoom clamping is enabled. * * ```javascript * engine.scene.unstable_isCameraZoomClampingEnabled(); * ``` * * @category Experimental Features * @param blockOrScene - Optionally, the scene or a block for which to query the zoom clamping. * @returns True if the given block has zoom clamping set or the scene contains a block for which zoom clamping is set, false otherwise. * @experimental This API is experimental and may change or be removed in future versions. */ unstable_isCameraZoomClampingEnabled(blockOrScene?: number | null): boolean; /** * Subscribe to changes to the zoom level. * * ```javascript * const unsubscribeZoomLevelChanged = engine.scene.onZoomLevelChanged(() => { * const zoomLevel = engine.scene.getZoomLevel(); * console.log('Zoom level is now: ', zoomLevel); * }); * ``` * * @category Event Subscriptions * @param callback - This function is called at the end of the engine update, if the zoom level has changed. * @returns A method to unsubscribe. * @privateRemarks This will currently fire on _all_ changes to camera properties */ onZoomLevelChanged: (callback: () => void) => (() => void); /** * Subscribe to changes to the active scene rendered by the engine. * * ```javascript * const unsubscribe = engine.scene.onActiveChanged(() => { * const newActiveScene = engine.scene.get(); * }); * ``` * * @category Event Subscriptions * @param callback - This function is called at the end of the engine update, if the active scene has changed. * @returns A method to unsubscribe. */ onActiveChanged: (callback: () => void) => (() => void); /** * Starts or stops playback of the current scene. * Only works in Video mode, not in Design mode. * * @param play - True to start playback, false to stop * @throws Error if no page is available for playback */ setPlaying(play: boolean): void; } /** @public */ declare type SceneDesignUnit = (typeof SceneDesignUnitValues)[number]; export { SceneDesignUnit as DesignUnit } export { SceneDesignUnit } /** @public */ export declare const SceneDesignUnitValues: readonly ["Pixel", "Millimeter", "Inch"]; /** @public */ export declare type SceneLayout = (typeof SceneLayoutValues)[number]; /** @public */ export declare const SceneLayoutValues: readonly ["Free", "VerticalStack", "HorizontalStack", "DepthStack"]; /** @public @deprecated Since v1.72. Scene mode no longer affects engine behavior. */ export declare type SceneMode = (typeof SceneModeValues)[number]; /** @public @deprecated Since v1.72. Scene mode no longer affects engine behavior. */ export declare const SceneModeValues: readonly ["Design", "Video"]; /** * @public * Represents the various scopes that define the capabilities and permissions * within the Creative Editor SDK. Each scope corresponds to a specific * functionality or action that can be performed within the editor. * * The `Scope` type is used to control access to different features and operations, * allowing for fine-grained control over what actions are permitted. * * @categoryDescription Scopes * Defines the various scopes that control the capabilities and permissions * within the Creative Editor SDK. * * @public */ export declare type Scope = 'text/edit' | 'text/character' | 'fill/change' | 'fill/changeType' | 'stroke/change' | 'shape/change' | 'layer/move' | 'layer/resize' | 'layer/rotate' | 'layer/flip' | 'layer/crop' | 'layer/opacity' | 'layer/blendMode' | 'layer/visibility' | 'layer/clipping' | 'appearance/adjustments' | 'appearance/filter' | 'appearance/effect' | 'appearance/blur' | 'appearance/shadow' | 'appearance/animation' | 'lifecycle/destroy' | 'lifecycle/duplicate' | 'editor/add' | 'editor/select'; /** @public */ export declare type SettingBoolPropertyName = 'alwaysHighlightPlaceholders' | 'doubleClickToCropEnabled' | 'showBuildVersion' | 'placeholderControls/showButton' | 'placeholderControls/showOverlay' | 'blockAnimations/enabled' | 'renderTextCursorAndSelectionInEngine' | 'touch/dragStartCanSelect' | 'touch/singlePointPanning' | 'mouse/enableZoom' | 'mouse/enableScroll' | 'controlGizmo/showCropHandles' | 'controlGizmo/showMoveHandles' | 'controlGizmo/dynamicMoveHandleVisibility' | 'controlGizmo/showResizeHandles' | 'controlGizmo/showScaleHandles' | 'controlGizmo/showRotateHandles' | 'controlGizmo/showCropScaleHandles' | 'page/title/canEdit' | 'page/title/show' | 'page/title/showPageTitleTemplate' | 'page/title/appendPageName' | 'page/title/showOnSinglePage' | 'page/dimOutOfPageAreas' | 'page/allowCropInteraction' | 'page/allowResizeInteraction' | 'page/restrictResizeInteractionToFixedAspectRatio' | 'page/allowRotateInteraction' | 'page/allowMoveInteraction' | 'page/marqueeSelectOnBodyDrag' | 'page/restrictPageSelectionToBorderAndTitle' | 'page/moveChildrenWhenCroppingFill' | 'page/selectWhenNoBlocksSelected' | 'page/highlightWhenCropping' | 'page/highlightDropTarget' | 'page/reparentBlocksToSceneWhenOutOfPage' | 'colorMaskingSettings/secondPass' | 'clampThumbnailTextureSizes' | 'useSystemFontFallback' | 'forceSystemEmojis' | 'features/textEditModeTransformHandlesEnabled' | 'features/videoStreamingEnabled' | 'grid/enabled' | 'grid/snapEnabled' | 'features/enableAutomaticEnumerations' | 'features/transparentClickThroughEnabled' | 'features/fontLineGapEnabled' | (string & {}); /** @public */ export declare type SettingColorPropertyName = 'clearColor' | 'handleFillColor' | 'highlightColor' | 'pageHighlightColor' | 'placeholderHighlightColor' | 'snappingGuideColor' | 'rotationSnappingGuideColor' | 'cropOverlayColor' | 'textVariableHighlightColor' | 'borderOutlineColor' | 'progressColor' | 'errorStateColor' | 'page/title/color' | 'page/marginFillColor' | 'page/marginFrameColor' | 'page/innerBorderColor' | 'page/outerBorderColor' | 'colorMaskingSettings/maskColor' | 'grid/color' | (string & {}); /** @public */ export declare type SettingEnumPropertyName = 'touch/pinchAction' | 'touch/rotateAction' | 'camera/clamping/overshootMode' | 'doubleClickSelectionMode' | 'colorPicker/colorMode' | 'timeline/trackVisibility' | (string & {}); /** @public */ export declare type SettingEnumType = { 'touch/pinchAction': TouchPinchAction; 'touch/rotateAction': TouchRotateAction; 'camera/clamping/overshootMode': CameraClampingOvershootMode; doubleClickSelectionMode: DoubleClickSelectionMode; 'colorPicker/colorMode': ColorPickerColorMode; 'timeline/trackVisibility': TimelineTrackVisibility; }; /** @public */ export declare type SettingEnumValues = TouchPinchAction | TouchRotateAction | CameraClampingOvershootMode | DoubleClickSelectionMode | ColorPickerColorMode | TimelineTrackVisibility | (string & {}); /** @public */ export declare type SettingFloatPropertyName = 'positionSnappingThreshold' | 'rotationSnappingThreshold' | 'controlGizmo/blockScaleDownLimit' | 'listIndentPerLevel' | 'grid/spacingX' | 'grid/spacingY' | (string & {}); /** @public */ export declare type SettingIntPropertyName = 'maxImageSize' | 'maxPreviewResolution' | (string & {}); /** * Union type of all valid setting keys. * @public */ export declare type SettingKey = keyof Settings; /** * Map of all available settings with their types. * This provides type-safe access to all editor settings. * * The settings are organized by type: * - Boolean settings control various on/off features in the editor * - String settings configure paths and textual values * - Float settings define numerical thresholds and limits * - Integer settings specify whole number limits * - Color settings control the visual appearance * - Enum settings provide predefined choice options * * @public */ export declare interface Settings { /** Whether to show handles for adjusting the crop area during crop mode. */ 'controlGizmo/showCropHandles': boolean; /** Whether to display the outer handles that scale the full image during crop. */ 'controlGizmo/showCropScaleHandles': boolean; /** Whether to show the move handles. */ 'controlGizmo/showMoveHandles': boolean; /** Whether the move handle visibility is dynamic based on block size. Set to false to always show. */ 'controlGizmo/dynamicMoveHandleVisibility': boolean; /** Whether to display the non-proportional resize handles (edge handles). */ 'controlGizmo/showResizeHandles': boolean; /** Whether to show the rotation handles. */ 'controlGizmo/showRotateHandles': boolean; /** Whether to display the proportional scale handles (corner handles). */ 'controlGizmo/showScaleHandles': boolean; /** Enable double-click to enter crop mode. */ doubleClickToCropEnabled: boolean; /** Enable single page mode where only one page is shown at a time. */ 'features/singlePageModeEnabled': boolean; /** Enable file system usage, that allows the engine to use the file system to store files for local uploads. */ 'features/fileSystemUsageEnabled': boolean; /** Enable the page carousel for navigating between pages. */ 'features/pageCarouselEnabled': boolean; /** Whether transform edits should retain the cover mode of the content. */ 'features/transformEditsRetainCoverMode': boolean; /** Whether auto-sized text blocks should be clamped to page boundaries during editing. */ 'features/clampTextBlockWidthToPageDimensionsDuringEditing': boolean; /** Whether the engine processes mouse scroll events. */ 'mouse/enableScroll': boolean; /** Whether the engine processes mouse zoom events. */ 'mouse/enableZoom': boolean; /** Whether crop interaction (by handles and gestures) should be possible. */ 'page/allowCropInteraction': boolean; /** Whether move interaction should be possible when page layout is not controlled by the scene. */ 'page/allowMoveInteraction': boolean; /** When enabled, a click+drag that starts on the page body performs a marquee selection of the blocks * inside the page instead of moving the page. The page can still be moved by dragging its title * (when visible in free layout) or by holding the command key (macOS) / control key (Windows/Linux) * while clicking and dragging on the page body. Has no effect when the page is not movable * (see `page/allowMoveInteraction` and scene layout constraints). */ 'page/marqueeSelectOnBodyDrag': boolean; /** When enabled, the page can only be selected by clicking on its title (when shown in free layout) * or near its border. Clicks inside the page body no longer select the page; the click falls * through to whatever block sits underneath. Independent of `page/marqueeSelectOnBodyDrag`. */ 'page/restrictPageSelectionToBorderAndTitle': boolean; /** Whether resize interaction (by handles and gestures) should be possible. */ 'page/allowResizeInteraction': boolean; /** Whether rotation interaction should be possible when page layout is not controlled by the scene. */ 'page/allowRotateInteraction': boolean; /** Whether pages support non-rectangular shapes. When false, supportsShape returns false for pages. */ 'page/allowShapeChange': boolean; /** Whether the opacity of the region outside of all pages should be reduced. */ 'page/dimOutOfPageAreas': boolean; /** Whether resize interaction should be restricted to fixed aspect ratio. */ 'page/restrictResizeInteractionToFixedAspectRatio': boolean; /** Whether children of the page should be transformed to match their old position when cropping. */ 'page/moveChildrenWhenCroppingFill': boolean; /** Whether to append the page name to the title even if not specified in the template. */ 'page/title/appendPageName': boolean; /** Whether double-clicking a page title enters text edit mode to rename the page. */ 'page/title/canEdit': boolean; /** Whether to show titles above each page. */ 'page/title/show': boolean; /** Whether to hide the page title when only a single page exists. */ 'page/title/showOnSinglePage': boolean; /** Whether to include the default page title from page.titleTemplate. */ 'page/title/showPageTitleTemplate': boolean; /** Whether to show the placeholder button. */ 'placeholderControls/showButton': boolean; /** Whether to show the overlay pattern for placeholders. */ 'placeholderControls/showOverlay': boolean; /** Whether animations should be enabled or not. */ 'blockAnimations/enabled': boolean; /** Whether the background grid is shown on pages. */ 'grid/enabled': boolean; /** Whether elements should snap to grid lines when dragged. */ 'grid/snapEnabled': boolean; /** Whether to display the build version in the UI. */ showBuildVersion: boolean; /** Whether drag start can select elements. */ 'touch/dragStartCanSelect': boolean; /** Whether single-point panning is enabled for touch interactions. */ 'touch/singlePointPanning': boolean; /** Whether to use system font as fallback for missing glyphs. */ useSystemFontFallback: boolean; /** Whether to force the use of system emojis instead of custom emoji fonts. */ forceSystemEmojis: boolean; /** Whether to select the page when a block is deselected and no other blocks are selected. */ 'page/selectWhenNoBlocksSelected': boolean; /** Whether highlighting should be automatically enabled on the current page when entering crop mode. */ 'page/highlightWhenCropping': boolean; /** Whether to highlight the page under a dragged element as a drop target. */ 'page/highlightDropTarget': boolean; /** Whether blocks should be reparented to the scene when dragged outside all pages, * and reparented back to a page when dragged over one. */ 'page/reparentBlocksToSceneWhenOutOfPage': boolean; /** Clamp thumbnail texture sizes to the platform's GPU texture limit. */ clampThumbnailTextureSizes: boolean; /** Toggle the dock components visibility */ 'dock/hideLabels': boolean; /** The root directory for resolving relative paths and `bundle://` URIs. * Also used as the base URL for loading font fallback files and the default emoji font (when self-hosting assets). * If empty, defaults to `https://cdn.img.ly/assets/v4` for font/emoji assets. */ basePath: string; /** The URI for the default emoji font file. */ defaultEmojiFontFileUri: string; /** The URI for the default font file. */ defaultFontFileUri: string; /** The license key for the SDK. */ license: string; /** The font file URI for page titles. */ 'page/title/fontFileUri': string; /** The separator between page number and page name in titles. */ 'page/title/separator': string; /** The URI for the fallback font used when glyphs are missing. */ fallbackFontUri: string; /** The supported MIME types for file uploads. */ 'upload/supportedMimeTypes': string; /** * Web-only: Credentials mode for cross-origin fetch requests. * - "omit": Never send cookies * - "same-origin": Send cookies only for same-origin requests (default) * - "include": Always send cookies, even for cross-origin requests * Note: Only affects web platform. Ignored on native platforms. */ 'web/fetchCredentials': 'omit' | 'same-origin' | 'include'; /** Scale-down limit for blocks in screen pixels when scaling with gizmos or touch gestures. */ 'controlGizmo/blockScaleDownLimit': number; /** The width of each list indentation level, in EM units. */ listIndentPerLevel: number; /** The threshold distance in pixels for position snapping. */ positionSnappingThreshold: number; /** The threshold angle in degrees for rotation snapping. */ rotationSnappingThreshold: number; /** Horizontal spacing between vertical grid lines in design units. */ 'grid/spacingX': number; /** Vertical spacing between horizontal grid lines in design units. */ 'grid/spacingY': number; /** The maximum size (width or height) in pixels for images. */ maxImageSize: number; /** The maximum dimension (width or height) in physical pixels for preview rendering. * When greater than 0, the scene is rendered at reduced resolution and upscaled for improved performance. * Does not affect exports. Set to -1 to disable (default). */ maxPreviewResolution: number; /** The color of the border outline for selected elements. */ borderOutlineColor: Color; /** The background clear color. */ clearColor: Color; /** The color used for color masking effects. */ 'colorMaskingSettings/maskColor': Color; /** The color of the crop overlay. */ cropOverlayColor: Color; /** The color indicating an error state. */ errorStateColor: Color; /** The highlight color for selected or active elements. */ highlightColor: Color; /** The color of the inner frame around the page. */ 'page/innerBorderColor': Color; /** The color filled into the bleed margins of pages. */ 'page/marginFillColor': Color; /** The color of the frame around the bleed margin area. */ 'page/marginFrameColor': Color; /** The color of the outer frame around the page. */ 'page/outerBorderColor': Color; /** The color of page titles visible in preview mode. */ 'page/title/color': Color; /** Color of the outline of each page */ pageHighlightColor: Color; /** The highlight color for placeholder elements. */ placeholderHighlightColor: Color; /** The color indicating progress or loading states. */ progressColor: Color; /** The color of rotation snapping guide lines. */ rotationSnappingGuideColor: Color; /** The color of rule of thirds guide lines. */ ruleOfThirdsLineColor: Color; /** The color of snapping guide lines. */ snappingGuideColor: Color; /** The highlight color for text variables. */ textVariableHighlightColor: Color; /** The fill color for handles. */ handleFillColor: Color; /** Color of the grid lines. */ 'grid/color': Color; /** The selection mode for double-click: Direct selects the clicked element, Hierarchical traverses the hierarchy. */ doubleClickSelectionMode: 'Direct' | 'Hierarchical'; /** The action performed for pinch gestures: None, Zoom, Scale, Auto, or Dynamic. */ 'touch/pinchAction': 'None' | 'Zoom' | 'Scale' | 'Auto' | 'Dynamic'; /** The action performed for rotate gestures: None or Rotate. */ 'touch/rotateAction': 'None' | 'Rotate'; /** Controls behavior when clamp area is smaller than viewport: Center or Reverse. */ 'camera/clamping/overshootMode': 'Center' | 'Reverse'; /** Controls the icon size of the dock components */ 'dock/iconSize': 'normal' | 'large'; /** Controls the color mode of the color picker. When set to 'RGB' or 'CMYK', only colors matching this mode are fully editable. Defaults to 'Any'. */ 'colorPicker/colorMode': 'RGB' | 'CMYK' | 'Any'; /** Controls which timeline tracks are visible. 'all' shows all tracks, 'active' shows only the track containing the active block. Defaults to 'all'. */ 'timeline/trackVisibility': 'all' | 'active'; } /** @public */ export declare type SettingsBool = SettingBoolPropertyName; /** * Represents the color settings available in the editor. * * @categoryDescription Color Settings * Defines the possible color settings in the editor. * - 'borderOutlineColor': The color of the border outline. * - 'clearColor': The clear color. * - 'colorMaskingSettings/maskColor': The color used for masking. * - 'cropOverlayColor': The color of the crop overlay. * - 'errorStateColor': The color indicating an error state. * - 'highlightColor': The highlight color. * - 'page/innerBorderColor': The color of the inner border of the page. * - 'page/marginFillColor': The color of the margin fill. * - 'page/marginFrameColor': The color of the margin frame. * - 'page/outerBorderColor': The color of the outer border of the page. * - 'page/title/color': The color of the page title. * - 'pageHighlightColor': Color of the outline of each page. * - 'placeholderHighlightColor': The highlight color for placeholders. * - 'progressColor': The color indicating progress. * - 'rotationSnappingGuideColor': The color of the rotation snapping guide. * - 'ruleOfThirdsLineColor': The color of the rule of thirds lines. * - 'snappingGuideColor': The color of the snapping guide. * - 'textVariableHighlightColor': The highlight color for text variables. * * @public */ export declare type SettingsColor = SettingColorPropertyName; /** * Represents the color settings available in the editor. * * @categoryDescription Color Settings * Defines the possible color settings in the editor. * - 'borderOutlineColor': The color of the border outline. * - 'clearColor': The clear color. * - 'colorMaskingSettings/maskColor': The color used for masking. * - 'cropOverlayColor': The color of the crop overlay. * - 'errorStateColor': The color indicating an error state. * - 'highlightColor': The highlight color. * - 'page/innerBorderColor': The color of the inner border of the page. * - 'page/marginFillColor': The color of the margin fill. * - 'page/marginFrameColor': The color of the margin frame. * - 'page/outerBorderColor': The color of the outer border of the page. * - 'page/title/color': The color of the page title. * - 'pageHighlightColor': Color of the outline of each page. * - 'placeholderHighlightColor': The highlight color for placeholders. * - 'progressColor': The color indicating progress. * - 'rotationSnappingGuideColor': The color of the rotation snapping guide. * - 'ruleOfThirdsLineColor': The color of the rule of thirds lines. * - 'snappingGuideColor': The color of the snapping guide. * - 'textVariableHighlightColor': The highlight color for text variables. * * @public * @deprecated Use SettingsColor instead. */ export declare type SettingsColorRGBA = SettingsColor; /** @public */ export declare type SettingsEnum = SettingEnumType; /** @public */ export declare type SettingsFloat = SettingFloatPropertyName; /** @public */ export declare type SettingsInt = SettingIntPropertyName; /** @public */ export declare type SettingsString = SettingStringPropertyName; /** @public */ export declare type SettingStringPropertyName = 'basePath' | 'defaultEmojiFontFileUri' | 'defaultFontFileUri' | 'upload/supportedMimeTypes' | 'license' | 'web/fetchCredentials' | 'page/title/separator' | 'page/title/fontFileUri' | 'fallbackFontUri' | (string & {}); /** * Represents the type of a setting. * * @categoryDescription Setting Type * Defines the possible types for a setting. * - 'Bool': A boolean setting. * - 'Int': An integer setting. * - 'Float': A float setting. * - 'String': A string setting. * - 'Color': A color setting. * - 'Enum': An enum setting. * * @public */ export declare type SettingType = 'Bool' | 'Int' | 'Float' | 'String' | 'Color' | 'Enum'; /** * Gets the value type for a specific setting key. * @public */ export declare type SettingValueType = Settings[K]; /** * The shorthand block type IDs for the shape blocks. These are the IDs used to create new shapes * using `cesdk.engine.block.createShape(id)`. * @public */ export declare const SHAPE_TYPES: readonly ["rect", "line", "ellipse", "polygon", "star", "vector_path"]; /** * The block type IDs for the shape blocks. These are the IDs used to create new shapes * using `cesdk.engine.block.createShape(id)`. * Refer to {@link ShapeTypeShorthand} and {@link ShapeTypeLonghand} for more details. * @public */ export declare type ShapeType = ShapeTypeShorthand | ShapeTypeLonghand; /** * The longhand block type IDs for the blocks. These are the IDs used to create new shapes * using `cesdk.engine.block.createShape(id)`. * @public */ export declare type ShapeTypeLonghand = `//ly.img.ubq/shape/${ShapeTypeShorthand}`; /** @public */ export declare type ShapeTypeShorthand = (typeof SHAPE_TYPES)[number]; /** @public */ export declare type ShapeVectorPathFillRule = (typeof ShapeVectorPathFillRuleValues)[number]; /** @public */ export declare const ShapeVectorPathFillRuleValues: readonly ["EvenOdd", "NonZero"]; /** @public */ export declare interface Size2 { width: number; height: number; } /** @public */ export declare type SizeMode = WidthMode | HeightMode; /** * The order to sort by if the asset source supports sorting. * If set to None, the order is the same as the assets were added to the source. * @public */ export declare type SortingOrder = 'None' | 'Ascending' | 'Descending'; /** * A single source width an intrinsic width & height. * @public */ export declare interface Source { uri: string; width: number; height: number; } /** * A source that can emit values to subscribed listeners * @public */ export declare interface _Source { (listener: _Listener): _Unsubscribe; emit: (value: T) => void; } /** @public */ export declare type SourceSetPropertyName = 'fill/image/sourceSet' | (string & {}); /** * Options for configuring block split operations. * @public */ export declare type SplitOptions = { /** * Whether or not the new block will be attached to the same parent as the original. * @defaultValue true */ attachToParent?: boolean; /** * Whether to create a parent track if needed and add both blocks to it. Only used when attachToParent is true. * @defaultValue false */ createParentTrackIfNeeded?: boolean; /** * Whether to select the newly created block after splitting. * @defaultValue true */ selectNewBlock?: boolean; }; /** * Represents a spot color value. * * Defines a spot color value with a name, tint, and external reference. * - 'name': The name of the spot color. * - 'tint': The tint factor. * - 'externalReference': The external reference of the spot color. * * @public */ export declare interface SpotColor { name: string; tint: number; externalReference: string; } /** @public */ export declare type StringPropertyName = 'name' | 'scene/pageFormatId' | 'type' | 'uuid' | 'page/titleTemplate' | 'audio/fileURI' | 'text/externalReference' | 'text/fontFileUri' | 'text/text' | 'text/typeface' | 'cutout/path' | 'caption/externalReference' | 'caption/fontFileUri' | 'caption/text' | 'caption/typeface' | 'effect/lut_filter/lutFileURI' | 'fill/image/externalReference' | 'fill/image/imageFileURI' | 'fill/image/previewFileURI' | 'fill/video/fileURI' | 'shape/vector_path/path' | (string & {}); /** @public */ export declare type StrokeCornerGeometry = (typeof StrokeCornerGeometryValues)[number]; /** @public */ export declare const StrokeCornerGeometryValues: readonly ["Bevel", "Miter", "Round"]; /** @public */ export declare type StrokePosition = (typeof StrokePositionValues)[number]; /** @public */ export declare const StrokePositionValues: readonly ["Center", "Inner", "Outer"]; /** @public */ export declare type StrokeStyle = (typeof StrokeStyleValues)[number]; /** @public */ export declare const StrokeStyleValues: readonly ["Dashed", "DashedRound", "Dotted", "LongDashed", "LongDashedRound", "Solid"]; /** * Represents a subscription to an event. * * The `Subscription` type is a number that uniquely identifies a subscription to an event. * * @categoryDescription Subscription * Methods for working with subscriptions to events. * * @public */ export declare type _Subscription = number; /** * Checks if the current browser supports necessary technologies to match our supported browsers * @public */ export declare function supportsBrowser(): boolean; /** * Checks if the current browser supports video editing. * * @returns false if the browser does not support the required APIs. * * @public */ export declare function supportsVideo(): boolean; /** * Checks if the current browser supports video exporting. * @public */ export declare function supportsVideoExport(): Promise; /** * Checks if the current browser supports web assembly * @public */ export declare function supportsWasm(): boolean; /** * A synchronous URI resolver function. * @public */ export declare type SyncURIResolver = (URI: string, defaultURIResolver: (URI: string) => string) => string; /** @public */ export declare type TextAnimationWritingStyle = (typeof TextAnimationWritingStyleValues)[number]; /** @public */ export declare const TextAnimationWritingStyleValues: readonly ["Block", "Line", "Character", "Word"]; /** * Represents the text case of a text block. * * @categoryDescription Text Case * Defines the possible text cases for a text block. * - 'Normal': The text is in its normal case. * - 'Uppercase': The text is in uppercase. * - 'Lowercase': The text is in lowercase. * - 'Titlecase': The text is in title case. * * @public */ export declare type TextCase = 'Normal' | 'Uppercase' | 'Lowercase' | 'Titlecase'; /** * Configuration for text decorations on a text run. * * All active decoration lines share the same style and thickness. * An optional underline color override can be set; overline and strikethrough * always use the text color. * * @public */ export declare interface TextDecorationConfig { /** The active decoration line types. Use `['None']` to clear all decorations. * When `'None'` is present, all other values are ignored. */ lines: TextDecorationLine[]; /** The style of the decoration lines. Defaults to 'Solid'. */ style?: TextDecorationStyle; /** Optional color override for underlines only. Uses the text color if not set. * Overline and strikethrough always use the text color. */ underlineColor?: Color; /** Multiplier for the underline thickness. Defaults to 1.0. */ underlineThickness?: number; /** Relative offset applied to the underline position as a multiplier on the font-default distance. 0 = font default, positive = proportionally further from baseline, negative = proportionally closer. The actual position is computed as `fontDefault * (1 + underlineOffset)`. Defaults to 0.0. */ underlineOffset?: number; /** When true, underlines skip over glyph descenders (skip-ink). Defaults to true. */ skipInk?: boolean; } /** * Represents a line type for text decoration. * * Text decoration lines are combinable — a range of text can have multiple decoration lines. * - 'None': No decoration. * - 'Underline': The text is underlined. * - 'Strikethrough': The text has a line through it. * - 'Overline': The text has a line above it. * * @public */ export declare type TextDecorationLine = 'None' | 'Underline' | 'Strikethrough' | 'Overline'; /** * Represents the style of a text decoration line. * * - 'Solid': A solid line (default). * - 'Double': Two parallel lines. * - 'Dotted': A series of dots. * - 'Dashed': A series of dashes. * - 'Wavy': A wavy line. * * @public */ export declare type TextDecorationStyle = 'Solid' | 'Double' | 'Dotted' | 'Dashed' | 'Wavy'; /** * Options for text font size operations with unit support. * @public */ export declare interface TextFontSizeOptions { /** The unit of the font size. Defaults to 'Point' */ unit?: FontSizeUnit; /** The start index of the UTF-16 range. Defaults to -1 (start of selection/text) */ from?: number; /** The end index of the UTF-16 range. Defaults to -1 (end of selection/text) */ to?: number; } /** @public */ declare type TextHorizontalAlignment = (typeof TextHorizontalAlignmentValues)[number]; export { TextHorizontalAlignment as HorizontalTextAlignment } export { TextHorizontalAlignment } /** @public */ export declare const TextHorizontalAlignmentValues: readonly ["Left", "Right", "Center", "Auto"]; /** @public */ declare type TextVerticalAlignment = (typeof TextVerticalAlignmentValues)[number]; export { TextVerticalAlignment } export { TextVerticalAlignment as VerticalTextAlignment } /** @public */ export declare const TextVerticalAlignmentValues: readonly ["Top", "Bottom", "Center"]; /** @public */ export declare type TimelineTrackVisibility = (typeof TimelineTrackVisibilityValues)[number]; /** @public */ export declare const TimelineTrackVisibilityValues: readonly ["all", "active"]; /** @public */ export declare type TouchPinchAction = (typeof TouchPinchActionValues)[number]; /** @public */ export declare const TouchPinchActionValues: readonly ["None", "Zoom", "Scale", "Auto", "Dynamic"]; /** @public */ export declare type TouchRotateAction = (typeof TouchRotateActionValues)[number]; /** @public */ export declare const TouchRotateActionValues: readonly ["None", "Rotate"]; /** * Represents a transient resource. * * The `TransientResource` interface provides a set of properties that describe a transient * resource, including a URL and the size of the resource. * * @public */ export declare interface TransientResource { URL: string; size: number; } /** * Represents a typeface. * * The Typeface interface defines the structure of a typeface within the Creative Editor SDK. * It includes properties for the name and fonts. * * @public */ export declare interface Typeface { /** The unique name of this typeface */ name: string; /** The list of all fonts that are part of this typeface. */ fonts: Font[]; } /** * Represents a typeface definition used in the editor. * * @deprecated This type definition is not used anymore and will be removed. * * Defines the structure of a typeface definition, including metadata, family name, and font details. * - 'meta': Optional metadata for the typeface, including default status, library, and categories. * - 'family': The name of the typeface family. * - 'fonts': An array of font definitions, each containing a font URL, weight, and style. * * @public */ export declare type TypefaceDefinition = { /** @deprecated The meta field is not used anymore */ meta?: { default?: boolean; library?: string; categories?: string[]; }; family: string; fonts: { fontURL: string; weight: FontWeight; style: FontStyle; }[]; }; /** * Specifies options for configuring audio extraction from video operations. * * The `UBQAudioFromVideoOptions` interface provides a set of properties that control the * behavior of the audio extraction operation. * * Methods for configuring audio extraction from video operations. * * @public */ export declare interface _UBQAudioFromVideoOptions { keepTrimSettings: boolean; muteOriginalVideo: boolean; } /** * Specifies options for exporting audio design blocks to various formats. * * The `UBQExportAudioOptions` interface provides a set of properties that control the * behavior and quality of the exported audio content. These options include settings * for sample rate and number of channels. * * Methods for configuring export settings for audio design blocks. * * @public */ export declare interface _UBQExportAudioOptions { sampleRate: number; numberOfChannels: number; skipEncoding?: boolean; } /** * Specifies options for exporting design blocks to various formats. * * The `UBQExportOptions` interface provides a set of properties that control the * behavior and quality of the exported content. These options include settings * for JPEG, WebP, PNG, and PDF exports, as well as options for resizing and * adding underlayers. * * @public */ export declare interface _UBQExportOptions { jpegQuality: number; webpQuality: number; pngCompressionLevel: number; useTargetSize: boolean; targetWidth: number; targetHeight: number; exportPdfWithHighCompatibility: boolean; exportPdfWithUnderlayer: boolean; underlayerSpotColorName: string; underlayerOffset: number; underlayerRenderRatio: number; underlayerMaxError: number; allowTextOverhang: boolean; exportPdfWithDeviceCMYK: boolean; } /** * Specifies options for exporting video design blocks to various formats. * * The `UBQExportVideoOptions` interface provides a set of properties that control the * behavior and quality of the exported video content. These options include settings * for H.264 profile, level, framerate, video bitrate, audio bitrate, and resizing. * * Methods for configuring export settings for video design blocks. * * @public */ export declare interface _UBQExportVideoOptions { h264Profile: number; h264Level: number; framerate: number; videoBitrate: number; audioBitrate: number; useTargetSize: boolean; targetWidth: number; targetHeight: number; allowTextOverhang: boolean; } /** * Specifies options for configuring block split operations. * * The `UBQSplitOptions` interface provides a set of properties that control the * behavior of the block splitting operation. * * Methods for configuring block split operations. * * @public */ export declare interface _UBQSplitOptions { attachToParent: boolean; createParentTrackIfNeeded: boolean; selectNewBlock: boolean; } /** * An unsubscribe function that removes a listener * @public */ export declare type _Unsubscribe = () => void; /** * @public Manage text variables within design templates. * * Text variables enable dynamic content replacement in design templates. Variables are stored * as key-value pairs and can be referenced in text blocks for automated content updates. * * ```ts * // Configure a text block that displays 'Hello, World' * const block = cesdk.engine.block.create('text'); * cesdk.engine.block.setText(block, 'Hello, {{name}}!'); * cesdk.engine.variable.setString('name', 'World'); * ``` * * @categoryDescription Variable Management * Create, update, retrieve, and remove text variables from the engine. */ export declare class VariableAPI { #private; /** * Get all text variable names currently stored in the engine. * * @category Variable Management * @returns List of variable names. */ findAll(): string[]; /** * Set a text variable's value. * * Creates a new variable if the key doesn't exist, or updates an existing one. * * @category Variable Management * @param key - The variable's key. * @param value - The text value to assign to the variable. */ setString(key: string, value: string): void; /** * Get a text variable's value. * * @category Variable Management * @param key - The variable's key. * @returns The text value of the variable. */ getString(key: string): string; /** * Remove a text variable from the engine. * * @category Variable Management * @param key - The variable's key to remove. */ remove(key: string): void; } /** @public */ export declare interface Vec2 { x: number; y: number; } /** @public */ export declare interface Vec3 { x: number; y: number; z: number; } /** @public */ export declare type VerticalBlockAlignment = TextVerticalAlignment; /** * Represents the options for exporting a video. * * Defines the possible options for exporting a video. * - 'mimeType': The MIME type of the output video file. * - 'onProgress': A callback which reports on the progress of the export. * - 'h264Profile': Determines the encoder feature set and in turn the quality, size and speed of the encoding process. * - 'h264Level': Controls the H.264 encoding level. * - 'videoBitrate': The video bitrate in bits per second. * - 'audioBitrate': The audio bitrate in bits per second. * - 'timeOffset': The time offset in seconds of the scene's timeline from which the video will start. * - 'duration': The duration in seconds of the final video. * - 'framerate': The target framerate of the exported video in Hz. * - 'targetWidth': An optional target width used in conjunction with target height. * - 'targetHeight': An optional target height used in conjunction with target width. * - 'abortSignal': An abort signal that can be used to cancel the export. * * @public */ export declare type VideoExportOptions = { /** * The MIME type of the output video file. * * @defaultValue 'video/mp4' */ mimeType?: VideoMimeType; /** * A callback which reports on the progress of the export. */ onProgress?: (numberOfRenderedFrames: number, numberOfEncodedFrames: number, totalNumberOfFrames: number) => void; /** * Determines the encoder feature set and in turn the quality, size and speed of the encoding process. * * @defaultValue 77 (Main) */ h264Profile?: number; /** * Controls the H.264 encoding level. This relates to parameters used by the encoder such as bit rate, * timings and motion vectors. Defined by the spec are levels 1.0 up to 6.2. To arrive at an integer value, * the level is multiplied by ten. E.g. to get level 5.2, pass a value of 52. * * @defaultValue 52 */ h264Level?: number; /** * The video bitrate in bits per second. Maximum bitrate is determined by h264Profile and h264Level. * If the value is 0, the bitrate is automatically determined by the engine. */ videoBitrate?: number; /** * The audio bitrate in bits per second. * If the value is 0, the bitrate is automatically determined by the engine (128kbps for stereo AAC stream). */ audioBitrate?: number; /** * The time offset in seconds of the scene's timeline from which the video will start. * * @defaultValue 0 */ timeOffset?: number; /** * The duration in seconds of the final video. * * @defaultValue The duration of the scene. */ duration?: number; /** * The target framerate of the exported video in Hz. * * @defaultValue 30 */ framerate?: number; /** * An optional target width used in conjunction with target height. * If used, the block will be rendered large enough, that it fills the target * size entirely while maintaining its aspect ratio. */ targetWidth?: number; /** * An optional target height used in conjunction with target width. * If used, the block will be rendered large enough, that it fills the target * size entirely while maintaining its aspect ratio. */ targetHeight?: number; /** * If true, the export will include text bounding boxes that account for glyph overhangs. * When enabled, text blocks with glyphs that extend beyond their frame (e.g., decorative fonts with swashes) * will be exported with the full glyph bounds visible, preventing text clipping. * * @defaultValue false */ allowTextOverhang?: boolean; /** * An abortsignal that can be used to cancel the export. */ abortSignal?: AbortSignal; }; /** * Represents the video MIME types used in the editor. * * @categoryDescription Video MIME Type * Defines the possible video MIME types used in the editor. * - 'video/mp4': MP4 video format. * - 'video/quicktime': QuickTime video format. * * @public */ export declare type VideoMimeType = Extract; /** @public */ export declare type WidthMode = (typeof WidthModeValues)[number]; /** @public */ export declare const WidthModeValues: readonly ["Absolute", "Percent", "Auto"]; /** * Describes a rectangle on the screen. * * The `XYWH` type is a tuple that contains four numbers representing the x and y coordinates * of the top-left corner of the rectangle, as well as the width and height of the rectangle. * * @categoryDescription XYWH * Methods for working with rectangles on the screen. * * @public */ export declare type XYWH = [x: number, y: number, w: number, h: number]; /** * The axis(es) for which to auto-fit. * @public */ export declare type ZoomAutoFitAxis = 'Horizontal' | 'Vertical' | 'Both'; /** * Options for zooming to a block with optional animation. * @public */ export declare type ZoomOptions = { /** Padding configuration around the block */ padding?: number | { x?: number; y?: number; } | { top?: number; bottom?: number; left?: number; right?: number; }; /** Animation configuration - boolean for default animation or object for custom settings */ animate?: boolean | { /** Duration of the animation in seconds */ duration?: number; /** Easing function for the animation */ easing?: AnimationEasing; /** Whether the animation can be interrupted */ interruptible?: boolean; }; }; export { }