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