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

Groups

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to group blocks through the block API. Groups form a cohesive unit.

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.

Grouping#

Multiple blocks can be grouped together to form a cohesive unit. A group being a block, it can itself be part of a group.

What cannot be grouped#

  • A scene
  • A block that already is part of a group
  • isGroupable(ids: number[]): boolean confirms that a given set of blocks can be grouped together.
  • group(ids: number[]): number groups blocks together and returns the block id of the newly created group.
  • ungroup(id: number): void ungroups a previously created group.
  • enterGroup(id: number): void changes selection from the selected group to a block within that group.
  • exitGroup(ids: number): void changes selection from a group's selected block to that group.
File:
// Create blocks and append to page
const member1 = engine.block.create('shapes/star');
const member2 = engine.block.create('shapes/rect');
engine.block.appendChild(page, member1);
engine.block.appendChild(page, member2);


// Check whether the blocks may be grouped
const groupable = engine.block.isGroupable([member1, member2])
if (groupable) {
  const group = engine.block.group([member1, member2]);
  engine.block.setSelected(group, true);
  engine.block.enterGroup(group);
  engine.block.setSelected(member1, true);
  engine.block.exitGroup(member1);
  engine.block.ungroup(group);
}