Search
Loading...
Skip to content

Group and Ungroup Objects

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.

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.

isGroupable(ids: DesignBlockId[]): boolean

Confirms that a given set of blocks can be grouped together.

  • ids: An array of block ids.
  • Returns Whether the blocks can be grouped together.
group(ids: DesignBlockId[]): DesignBlockId

Group blocks together.

  • ids: A non-empty array of block ids.
  • Returns The block id of the created group.
ungroup(id: DesignBlockId): void

Ungroups a group.

  • id: The group id from a previous call to group.
enterGroup(id: DesignBlockId): void

Changes selection from selected group to a block within that group. Nothing happens if group is not a group. Required scope: ‘editor/select’

  • id: The group id from a previous call to group.
enterGroup(id: DesignBlockId): void

Changes selection from selected group to a block within that group. Nothing happens if group is not a group. Required scope: ‘editor/select’

  • id: The group id from a previous call to group.
exitGroup(id: DesignBlockId): void

Changes selection from a group’s selected block to that group. Nothing happens if the id is not part of a group. Required scope: ‘editor/select’

  • id: A block id.

Full Code#

Here’s the full code:

// Create blocks and append to page
const member1 = engine.block.create('graphic');
const member2 = engine.block.create('graphic');
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);
}