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.
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);