Skip to main content
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: DesignBlockId, selected: boolean): void

Update the selection state of a block. Fails for invalid blocks.

  • id: The block to query.
  • selected: Whether or not the block should be selected.
isSelected(id: DesignBlockId): boolean

Get the selected state of a block.

  • id: The block to query.
  • Returns True if the block is selected, false otherwise.
select(id: DesignBlockId): void

Selects the given block and deselects all other blocks.

  • id: The block to be selected.
findAllSelected(): DesignBlockId[]

Get all currently selected blocks.

  • Returns An array of block ids.
onSelectionChanged: (callback: () => void) => (() => void)

Subscribe to changes in the current set of selected blocks.

  • callback: This function is called at the end of the engine update if the selection has changed.
  • Returns A method to unsubscribe.
onClicked: (callback: (id: DesignBlockId) => void) => (() => void)

Subscribe to block click events.

  • callback: This function is called at the end of the engine update if a block has been clicked.
  • Returns A method to unsubscribe.
setVisible(id: DesignBlockId, visible: boolean): void

Update a block's visibility.

  • id: The block to update.
  • visible: Whether the block shall be visible.
isVisible(id: DesignBlockId): boolean

Query a block's visibility.

  • id: The block to query.
  • Returns True if visible, false otherwise.
setClipped(id: DesignBlockId, clipped: boolean): void

Update a block's clipped state.

  • id: The block to update.
  • clipped: Whether the block should clips its contents to its frame.
isClipped(id: DesignBlockId): boolean

Query a block's clipped state. If true, the block should clip its contents to its frame.

  • id: The block to query.
  • Returns True if clipped, false otherwise.
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 unsubscribeOnClicked = engine.block.onClicked((block) => {
  console.log('Block clicked: ', block)
});
const isVisible = engine.block.isVisible(block);
engine.block.setVisible(block, true);


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