@cesdk/cesdk-js 1.4.0-alpha.6 → 1.4.2

package/BlockAPI.d.ts

@@ -1,6 +1,6 @@
 type Vec2 = { x: number; y: number };
-type DesignElementId = number;
-type DesignElementType = string;
+type DesignBlockId = number;
+type DesignBlockType = string;
 type MimeType =
   | 'image/png'
   | 'image/jpeg'
@@ -10,14 +10,15 @@ type Size2 = {
   width: number;
   height: number;
 };
+type RGBA = [r: number, g: number, b: number, a: number];
 
 export enum PositionMode {
   /** Position in absolute design units. */
   Absolute = 'Absolute',
   /** Position in relation to the block's parent's size in percent, where 1.0 means 100%. */
   Percent = 'Percent',
-  /** Position is not defined. */
-  Undefined = 'Undefined'
+  /** Position is automatically determined. */
+  Undefined = 'Auto'
 }
 
 export enum SizeMode {
@@ -29,6 +30,16 @@ export enum SizeMode {
   Auto = 'Auto'
 }
 
+export enum PropertyType {
+  Bool = 'Bool',
+  Int = 'Int',
+  Float = 'Float',
+  String = 'String',
+  Color = 'Color',
+  Enum = 'Enum',
+  Struct = 'Struct'
+}
+
 export default class BlockAPI {
   /**
    * Exports a design block element as a file of the given mime type.
@@ -37,7 +48,7 @@ export default class BlockAPI {
    * @param mimeType The mime type of the output file. Defaults to 'image/png'
    * @returns A promise that resolves with the exported image or is rejected with an error.
    */
-  export(handle: DesignElementId, mimeType?: MimeType): Promise<Blob>;
+  export(handle: DesignBlockId, mimeType?: MimeType): Promise<Blob>;
 
   /**
    * Loads existing blocks from the given string.
@@ -45,7 +56,7 @@ export default class BlockAPI {
    * @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.
    */
-  loadFromString(content: string): Promise<DesignElementId[]>;
+  loadFromString(content: string): Promise<DesignBlockId[]>;
 
   /**
    * Saves the given blocks into a string. If given the root of a block hierarchy, e.g. a
@@ -53,14 +64,14 @@ export default class BlockAPI {
    * @param blocks
    * @returns A promise that resolves to a string representing the blocks or an error.
    */
-  saveToString(blocks: DesignElementId[]): Promise<string>;
+  saveToString(blocks: DesignBlockId[]): Promise<string>;
 
   /**
    * Create a new block, fails if type is unknown.
    * @param type The type of the block that shall be created.
    * @returns The created blocks handle.
    */
-  create(type: DesignElementType): DesignElementId;
+  create(type: DesignBlockType): DesignBlockId;
 
   /**
 
@@ -68,7 +79,7 @@ export default class BlockAPI {
    * @param id The block to query.
    * @returns The blocks type.
    */
-  getType(id: DesignElementId): DesignElementType;
+  getType(id: DesignBlockId): DesignBlockType;
 
   /**
    * Update the selection state of a block.
@@ -76,53 +87,60 @@ export default class BlockAPI {
    * @param id The block to query.
    * @param selected Whether or not the block should be selected.
    */
-  setSelected(id: DesignElementId, selected: boolean): void;
+  setSelected(id: DesignBlockId, selected: boolean): void;
 
   /**
    * Get the selected state of a block.
    * @param id The block to query.
    * @returns True if the block is selected, false otherwise.
    */
-  isSelected(id: DesignElementId): boolean;
+  isSelected(id: DesignBlockId): boolean;
 
   /**
    * Get all currently selected blocks.
    * @returns An array of block ids.
    */
-  findAllSelected(): DesignElementId[];
+  findAllSelected(): DesignBlockId[];
+
+  /** Checks whether the given block references any variables. Doesn't check the blocks children.
+   *
+   * @param block The block to inspect.
+   * @return true if the block references variables and false otherwise.
+   */
+  referencesAnyVariables(id: DesignBlockId): boolean;
 
   /**
    * Update a block's name.
    * @param id The block to update.
    * @param name The name to set.
    */
-  setName(id: DesignElementId, name: string): void;
+  setName(id: DesignBlockId, name: string): void;
 
   /**
    * Get a block's name.
    * @param id The block to update.
    */
-  getName(id: DesignElementId): string;
+  getName(id: DesignBlockId): string;
 
   /**
    * Finds all blocks with the given name.
    * @param name The name to search for.
    * @returns A list of block ids.
    */
-  findByName(name: string): DesignElementId[];
+  findByName(name: string): DesignBlockId[];
 
   /**
    * Finds all blocks with the given type.
    * @param type The type to search for.
    * @returns A list of block ids.
    */
-  findByType(type: DesignElementType): DesignElementId[];
+  findByType(type: DesignBlockType): DesignBlockId[];
 
   /**
    * Return all blocks currently known to the engine.
    * @returns A list of block ids.
    */
-  findAll(): /* filterSpec?: unknown */ DesignElementId[];
+  findAll(): /* filterSpec?: unknown */ DesignBlockId[];
 
   // Element
 
@@ -131,195 +149,202 @@ export default class BlockAPI {
    * @param id The block to query.
    * @returns True if visible, false otherwise.
    */
-  isVisible(id: DesignElementId): boolean;
+  isVisible(id: DesignBlockId): boolean;
 
   /**
    * Update a block's visibility.
    * @param id The block to update.
    * @param visible Whether the block shall be visible.
    */
-  setVisible(id: DesignElementId, visible: boolean): void;
+  setVisible(id: DesignBlockId, visible: boolean): void;
 
   /**
    * Query a block's x position.
    * @param id The block to query.
    * @returns The value of the x position.
    */
-  getPositionX(id: DesignElementId): number;
+  getPositionX(id: DesignBlockId): number;
 
   /**
    * Query a block's mode for its x position.
    * @param id The block to query.
    * @returns The current mode for the x position: absolute, percent or undefined.
    */
-  getPositionXMode(id: DesignElementId): PositionMode;
+  getPositionXMode(id: DesignBlockId): PositionMode;
 
   /**
    * Query a block's y position.
    * @param id The block to query.
    * @returns The value of the y position.
    */
-  getPositionY(id: DesignElementId): number;
+  getPositionY(id: DesignBlockId): number;
 
   /**
    * Query a block's mode for its y position.
    * @param id The block to query.
    * @returns The current mode for the y position: absolute, percent or undefined.
    */
-  getPositionYMode(id: DesignElementId): PositionMode;
+  getPositionYMode(id: DesignBlockId): PositionMode;
 
   /**
    * Update a block's x position.
    * @param id The block to update.
    * @param value The value of the x position.
    */
-  setPositionX(id: DesignElementId, value: number): void;
+  setPositionX(id: DesignBlockId, value: number): void;
 
   /**
    * Set a block's mode for its x position.
    * @param id The block to update.
    * @param mode The x position mode: absolute, percent or undefined.
    */
-  setPositionXMode(id: DesignElementId, mode: PositionMode): void;
+  setPositionXMode(id: DesignBlockId, mode: PositionMode): void;
 
   /**
    * Update a block's y position.
    * @param id The block to update.
    * @param value The value of the y position.
    */
-  setPositionY(id: DesignElementId, value: number): void;
+  setPositionY(id: DesignBlockId, value: number): void;
 
   /**
    * Set a block's mode for its y position.
    * @param id The block to update.
    * @param mode The y position mode: absolute, percent or undefined.
    */
-  setPositionYMode(id: DesignElementId, mode: PositionMode): void;
+  setPositionYMode(id: DesignBlockId, mode: PositionMode): void;
 
   /**
    * Query a block's rotation in radians.
    * @param id The block to query.
    * @returns The block's rotation around its center in radians.
    */
-  getRotation(id: DesignElementId): number;
+  getRotation(id: DesignBlockId): number;
 
   /**
    * Update a block's rotation.
    * @param id The block to update.
    * @param radians The new rotation in radians. Rotation is applied around the block's center.
    */
-  setRotation(id: DesignElementId, radians: number): void;
+  setRotation(id: DesignBlockId, radians: number): void;
 
   /**
    * Query a block's horizontal flip state.
    * @param id The block to query.
    * @returns A boolean indicating for whether the block is flipped in the queried direction
    */
-  getFlipHorizontal(id: DesignElementId): boolean;
+  getFlipHorizontal(id: DesignBlockId): boolean;
 
   /**
    * Query a block's vertical flip state.
    * @param id The block to query.
    * @returns A boolean indicating for whether the block is flipped in the queried direction
    */
-  getFlipVertical(id: DesignElementId): boolean;
+  getFlipVertical(id: DesignBlockId): boolean;
 
   /**
    * Update a block's horizontal flip.
    * @param id The block to update.
    * @param horizontal Whether the block should be flipped along its x-axis.
    */
-  setFlipHorizontal(id: DesignElementId, flip: boolean): void;
+  setFlipHorizontal(id: DesignBlockId, flip: boolean): void;
 
   /**
    * Update a block's vertical flip.
    * @param id The block to update.
    * @param vertical Whether the block should be flipped along its y-axis.
    */
-  setFlipVertical(id: DesignElementId, flip: boolean): void;
+  setFlipVertical(id: DesignBlockId, flip: boolean): void;
 
   /**
    * Query a block's width.
    * @param id The block to query.
    * @returns The value of the block's width.
    */
-  getWidth(id: DesignElementId): number;
+  getWidth(id: DesignBlockId): number;
 
   /**
    * Query a block's mode for its width.
    * @param id The block to query.
    * @returns The current mode for the width: absolute, percent or auto.
    */
-  getWidthMode(id: DesignElementId): SizeMode;
+  getWidthMode(id: DesignBlockId): SizeMode;
 
   /**
    * Query a block's height.
    * @param id The block to query.
    * @returns The value of the block's height.
    */
-  getHeight(id: DesignElementId): number;
+  getHeight(id: DesignBlockId): number;
 
   /**
    * Query a block's mode for its height.
    * @param id The block to query.
    * @returns The current mode for the height: absolute, percent or auto.
    */
-  getHeightMode(id: DesignElementId): SizeMode;
+  getHeightMode(id: DesignBlockId): SizeMode;
 
   /**
    * Update a block's width.
    * @param id The block to update.
    * @param value The new width of the block.
    */
-  setWidth(id: DesignElementId, value: number): void;
+  setWidth(id: DesignBlockId, value: number): void;
 
   /**
    * Set a block's mode for its width.
    * @param id The block to update.
    * @param mode The width mode: absolute, percent or auto.
    */
-  setWidthMode(id: DesignElementId, mode: SizeMode): void;
+  setWidthMode(id: DesignBlockId, mode: SizeMode): void;
 
   /**
    * Update a block's height.
    * @param id The block to update.
    * @param value The new height of the block.
    */
-  setHeight(id: DesignElementId, value: number): void;
+  setHeight(id: DesignBlockId, value: number): void;
 
   /**
    * Set a block's mode for its height.
    * @param id The block to update.
    * @param mode The height mode: absolute, percent or auto.
    */
-  setHeightMode(id: DesignElementId, mode: SizeMode): void;
+  setHeightMode(id: DesignBlockId, mode: SizeMode): void;
 
   /**
-   * Get a block's layouted size. Requires an `engine.render()` beforehand.
+   * Get a block's layouted width. Requires an `engine.render()` beforehand.
    * @param id The block to query.
-   * @returns A `Size2` object holding the size.
+   * @returns The layouted width.
    */
-  getFrameSize(id: DesignElementId): Size2;
+  getFrameWidth(id: DesignBlockId): number;
+
+  /**
+   * Get a block's layouted height. Requires an `engine.render()` beforehand.
+   * @param id The block to query.
+   * @returns The layouted height.
+   */
+  getFrameHeight(id: DesignBlockId): number;
 
   /**
    * Duplicates a block including its children.
    * @param id The block to duplicate.
    * @returns The handle of the duplicate.
    */
-  duplicate(id: DesignElementId): DesignElementId;
+  duplicate(id: DesignBlockId): DesignBlockId;
 
   /**
    * Destroys a block.
    * @param id The block to destroy.
    */
-  destroy(id: DesignElementId): void;
+  destroy(id: DesignBlockId): void;
 
   /**
    * Query a block's parent.
    * @param id The block to query.
    * @returns The parent's handle.
    */
-  getParent(id: DesignElementId): DesignElementId;
+  getParent(id: DesignBlockId): DesignBlockId;
 
   /**
    * Get all children of the given block. Children
@@ -328,7 +353,7 @@ export default class BlockAPI {
    * @param id The block to query.
    * @returns A list of block ids.
    */
-  getChildren(id: DesignElementId): DesignElementId[];
+  getChildren(id: DesignBlockId): DesignBlockId[];
 
   /**
    * Insert a new or existing child at a certain position in the parent's children.
@@ -336,16 +361,425 @@ export default class BlockAPI {
    * @param child The child to insert. Can be an existing child of `parent`.
    * @param index The index to insert or move to.
    */
-  insertChild(
-    parent: DesignElementId,
-    child: DesignElementId,
-    index: number
-  ): void;
+  insertChild(parent: DesignBlockId, child: DesignBlockId, index: number): void;
 
   /**
    * Appends a new or existing child to a block's children.
    * @param parent The block whose children should be updated.
    * @param child The child to insert. Can be an existing child of `parent`.
    */
-  appendChild(parent: DesignElementId, child: DesignElementId): void;
+  appendChild(parent: DesignBlockId, child: DesignBlockId): void;
+
+  /**
+   * Get the x position of the block's axis-aligned bounding box in the scene's global coordinate space.
+   * The scene's global coordinate space has its position at the top left.
+   * @param id The block whose bounding box should be calculated.
+   * @return UBQResult<float> The x coordinate of the position of the axis-aligned bounding box.
+   */
+  getGlobalBoundingBoxX(id: DesignBlockId): number;
+
+  /**
+   * Get the y position of the block's axis-aligned bounding box in the scene's global coordinate space.
+   * The scene's global coordinate space has its position at the top left.
+   * @param id The block whose bounding box should be calculated.
+   * @return UBQResult<float> The y coordinate of the position of the axis-aligned bounding box.
+   */
+  getGlobalBoundingBoxY(id: DesignBlockId): number;
+
+  /**
+   * Get the width of the block's axis-aligned bounding box in the scene's global coordinate space.
+   * The scene's global coordinate space has its position at the top left.
+   * @param id The block whose bounding box should be calculated.
+   * @return UBQResult<float> The width of the axis-aligned bounding box.
+   */
+  getGlobalBoundingBoxWidth(id: DesignBlockId): number;
+
+  /**
+   * Get the height of the block's axis-aligned bounding box in the scene's global coordinate space.
+   * The scene's global coordinate space has its position at the top left.
+   * @param id The block whose bounding box should be calculated.
+   * @return UBQResult<float> The height of the axis-aligned bounding box.
+   */
+  getGlobalBoundingBoxHeight(id: DesignBlockId): number;
+
+  /**
+   * Get all available properties of a block.
+   * @param id The block whose properties should be queried.
+   * @returns A list of the property names.
+   */
+  findAllProperties(id: DesignBlockId): string[];
+
+  /**
+   * Get the type of a property given its name.
+   * @param property The name of the property whose type should be queried.
+   * @returns The property type.
+   */
+  getPropertyType(property: string): PropertyType;
+
+  /**
+   * Get all the possible values of an enum given an enum property.
+   * @param enumProperty The name of the property whose enum values should be queried.
+   * @returns A list of the enum value names as string.
+   */
+  getEnumValues<T = string>(enumProperty: string): T[];
+
+  /**
+   * Set a bool property of the given design block to the given value.
+   * @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: string, value: boolean): void;
+
+  /**
+   * Get the value of a bool property of the given design block.
+   * @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: string): boolean;
+
+  /**
+   * Set an int property of the given design block to the given value.
+   * @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: string, value: number): void;
+
+  /**
+   * Get the value of an int property of the given design block.
+   * @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: string): number;
+
+  /**
+   * Set a float property of the given design block to the given value.
+   * @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: string, value: number): void;
+
+  /**
+   * Get the value of a float property of the given design block.
+   * @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: string): number;
+
+  /**
+   * Set a string property of the given design block to the given value.
+   * @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: string, value: string): void;
+
+  /**
+   * Get the value of a string property of the given design block.
+   * @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: string): string;
+
+  /**
+   * Set a color property of the given design block to the given value.
+   * @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.
+   */
+  setColorRGBA(
+    id: DesignBlockId,
+    property: string,
+    r: number,
+    g: number,
+    b: number,
+    a: number
+  ): void;
+
+  /**
+   * Get the value of a string property of the given design block.
+   * @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.
+   */
+  getColorRGBA(id: DesignBlockId, property: string): RGBA;
+
+  /**
+   * Set an enum property of the given design block to the given value.
+   * @param block The block whose property should be set.
+   * @param property The name of the property to set.
+   * @param value The enum value as string.
+   */
+  setEnum(id: DesignBlockId, property: string, value: string): void;
+
+  /**
+   * Get the value of an enum property of the given design block.
+   * @param block The block whose property should be queried.
+   * @param property The name of the property to query.
+   * @returns The value as string.
+   */
+  getEnum(id: DesignBlockId, property: string): string;
+
+  /**
+   * Query if the given block has crop properties.
+   * @param id The block to query.
+   * @returns true, if the block has crop properties.
+   */
+  hasCrop(id: DesignBlockId): boolean;
+
+  /**
+   * Set the crop scale in x direction of the given design block.
+   * @param id The block whose crop should be set.
+   * @param scaleX The scale in x direction.
+   */
+  setCropScaleX(id: DesignBlockId, scaleX: number): void;
+
+  /**
+   * Set the crop scale in y direction of the given design block.
+   * @param id The block whose crop should be set.
+   * @param scaleY The scale in y direction.
+   */
+  setCropScaleY(id: DesignBlockId, scaleY: number): void;
+
+  /**
+   * Set the crop rotation of the given design block.
+   * @param id The block whose crop should be set.
+   * @param rotation The rotation in radians.
+   */
+  setCropRotation(id: DesignBlockId, rotation: number): void;
+
+  /**
+   * Set the crop translation in x direction of the given design block.
+   * @param id The block whose crop should be set.
+   * @param translationY The translation in x direction.
+   */
+  setCropTranslationX(id: DesignBlockId, translationX: number): void;
+
+  /**
+   * Set the crop translation in y direction of the given design block.
+   * @param id The block whose crop should be set.
+   * @param translationY The translation in y direction.
+   */
+  setCropTranslationY(id: DesignBlockId, translationY: number): void;
+
+  /**
+   * Resets the manually set crop of the given design block.
+   * The block's content fill mode is set to 'cover'.
+   * @param id The block whose crop should be reset.
+   */
+  resetCrop(id: DesignBlockId): void;
+
+  /**
+   * Get the crop scale on the x axis of the given design block.
+   * @param id The block whose scale should be queried.
+   * @returns The scale on the x axis.
+   */
+  getCropScaleX(id: DesignBlockId): number;
+
+  /**
+   * Get the crop scale on the y axis of the given design block.
+   * @param id The block whose scale should be queried.
+   * @returns The scale on the y axis.
+   */
+  getCropScaleY(id: DesignBlockId): number;
+
+  /**
+   * Get the crop rotation of the given design block.
+   * @param id The block whose crop rotation should be queried.
+   * @returns The crop rotation.
+   */
+  getCropRotation(id: DesignBlockId): number;
+
+  /**
+   * Get the crop translation on the x axis of the given design block.
+   * @param id The block whose translation should be queried.
+   * @returns The translation on the x axis.
+   */
+  getCropTranslationX(id: DesignBlockId): number;
+
+  /**
+   * Get the crop translation on the y axis of the given design block.
+   * @param id The block whose translation should be queried.
+   * @returns The translation on the y axis.
+   */
+  getCropTranslationY(id: DesignBlockId): number;
+
+  /**
+   * Query if the given block has an opacity.
+   * @param id The block to query.
+   * @returns true, if the block has an opcity.
+   */
+  hasOpacity(id: DesignBlockId): boolean;
+
+  /**
+   * Set the opacity of the given design block.
+   * @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;
+
+  /**
+   * Get the opacity of the given design block.
+   * @param id The block whose opacity should be queried.
+   * @returns The opacity in a range of 0 to 1.
+   */
+  getOpacity(id: DesignBlockId): number;
+
+  /**
+   * Query if the given block has fill color properties.
+   * @param id The block to query.
+   * @returns true, if the block has fill color properties.
+   */
+  hasFillColor(id: DesignBlockId): boolean;
+
+  /**
+   * Set the fill color of the given design block.
+   * @param id The block whose fill color should be set.
+   * @param color The fill color to be set, a tuple of
+   * @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.
+   */
+  setFillColorRGBA(
+    id: DesignBlockId,
+    r: number,
+    g: number,
+    b: number,
+    a: number
+  ): void;
+
+  /**
+   * Get the fill color of the given design block.
+   * @param id The block whose fill color should be queried.
+   * @returns The fill color.
+   */
+  getFillColorRGBA(id: DesignBlockId): RGBA;
+
+  /**
+   * Enable or disable the fill of the given design block.
+   * @param id The block whose fill should be enabled or disabled.
+   * @param enabled If true, the fill will be enabled.
+   */
+  setFillColorEnabled(id: DesignBlockId, enabled: boolean): void;
+
+  /**
+   * Query if the fill of the given design block is enabled.
+   * @param id The block whose fill state should be queried.
+   * @returns True, if fill is enabled.
+   */
+  isFillColorEnabled(id: DesignBlockId): boolean;
+
+  /**
+   * Query if the given block has background color properties.
+   * @param id The block to query.
+   * @returns true, if the block has background color properties.
+   */
+  hasBackgroundColor(id: DesignBlockId): boolean;
+
+  /**
+   * Set the background color of the given design block.
+   * @param id The block whose background color should be set.
+   * @param color The background color to be set, a tuple of
+   * @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.
+   */
+  setBackgroundColorRGBA(
+    id: DesignBlockId,
+    r: number,
+    g: number,
+    b: number,
+    a: number
+  ): void;
+
+  /**
+   * Get the background color of the given design block.
+   * @param id The block whose background color should be queried.
+   * @returns The background color.
+   */
+  getBackgroundColorRGBA(id: DesignBlockId): RGBA;
+
+  /**
+   * Enable or disable the background of the given design block.
+   * @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;
+
+  /**
+   * Query if the background of the given design block is enabled.
+   * @param id The block whose background state should be queried.
+   * @returns True, if background is enabled.
+   */
+  isBackgroundColorEnabled(id: DesignBlockId): boolean;
+
+  /**
+   * Query if the given block has outline properties.
+   * @param id The block to query.
+   * @returns true, if the block has outline properties.
+   */
+  hasOutline(id: DesignBlockId): boolean;
+
+  /**
+   * Set the outline color of the given design block.
+   * @param id The block whose outline color should be set.
+   * @param color The outline color to be set, a tuple of
+   * @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.
+   */
+  setOutlineColorRGBA(
+    id: DesignBlockId,
+    r: number,
+    g: number,
+    b: number,
+    a: number
+  ): void;
+
+  /**
+   * Get the outline color of the given design block.
+   * @param id The block whose outline color should be queried.
+   * @returns The outline color.
+   */
+  getOutlineColorRGBA(id: DesignBlockId): RGBA;
+
+  /**
+   * Enable or disable the outline of the given design block.
+   * @param id The block whose outline should be enabled or disabled.
+   * @param enabled If true, the outline will be enabled.
+   */
+  setOutlineEnabled(id: DesignBlockId, enabled: boolean): void;
+
+  /**
+   * Query if the outline of the given design block is enabled.
+   * @param id The block whose outline state should be queried.
+   * @returns True, if outline is enabled.
+   */
+  isOutlineEnabled(id: DesignBlockId): boolean;
+
+  /**
+   * Set the outline width of the given design block.
+   * @param id The block whose outline width should be set.
+   * @param width The outline width to be set.
+   */
+  setOutlineWidth(id: DesignBlockId, width: number): void;
+
+  /**
+   * Get the outline width of the given design block.
+   * @param id The block whose outline width should be queried.
+   * @returns The outline width.
+   */
+  getOutlineWidth(id: DesignBlockId): number;
 }