Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Platform:
Language:

Selection & Visibility

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify scenes through the block API.

Setup#

This example uses the headless CreativeEngine. See the Setup article for a detailed guide. To get started right away, you can also access the block API within a running CE.SDK instance via cesdk.engine.block. Check out the APIs Overview to see that illustrated in more detail.

Select blocks and change their visibility#

Note on Visibility#

A block can potentially be invisible (in the sense that you can't see it), even though isVisible() returns true. This could be the case when a block has not been added to a parent, the parent itself is not visible, or the block is obscured by another block on top of it.

  • setSelected(id:number, selected:boolean): void sets whether a block is selected or not. Previously selected blocks remain selected.
  • isSelected(id: number): boolean returns true if a block is selected, false otherwise.
  • select(id: number): void Selects a given block and deselect all other blocks.
  • findAllSelected(): number[] returns an array containing the ids of all currently selected blocks.
  • onSelectionChanged(callback: () => void): () => void Subscribe to changes to the selection. Returns a function that can be called to unsubscribe from receiving events.
  • setVisible(id: number, visible: boolean): void sets whether a block is currently visible (the normal case) or not (block is hidden).
  • isVisible(id: number): boolean returns the state of the visibility flag for a block.
  • setClipped(id: number, clipped: boolean): void sets whether a block is currently clipping its contents to its frame or not (block contents are clipped).
  • isClipped(id: number): boolean returns the state of the clipped flag for a block.
File:
engine.block.setSelected(block, true);
const isSelected = engine.block.isSelected(block);
engine.block.select(block);
const selectedIds = engine.block.findAllSelected();
const unsubscribeSelectionChanged = engine.block.onSelectionChanged(() => {
  const selectedIds = engine.block.findAllSelected();
  console.log('Selection changed: ', selectedIds)
});


const isVisible = engine.block.isVisible(block);
engine.block.setVisible(block, true);


const isClipped = engine.block.isClipped(page);
engine.block.setClipped(page, true);