Boolean Operations

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to combine blocks through the block API with boolean operations.

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.

Combining#

Combining blocks allows you to create a new block with a customized shape.

Combining blocks with the union, intersection or XOR operation will result in the new block whose fill is that of the top-most block and whose shape is the result of applying the operation pair-wise on blocks from the top-most block to the bottom-most block. Combining blocks with the difference operation will result in the new block whose fill is that of the bottom-most block and whose shape is the result of applying the operation pair-wise on blocks from the bottom-most block to the top-most block.

The combined blocks will be destroyed.

Only the following blocks can be combined#

A graphics block
A text block

JavaScript


isCombinable(ids: DesignBlockId[]): boolean

Checks whether blocks could be combined. Only graphics blocks and text blocks can be combined. All blocks must have the "lifecycle/duplicate" scope enabled.

ids: An array of block ids.
Returns Whether the blocks can be combined.

JavaScript


combine(ids: DesignBlockId[], op: BooleanOperation): DesignBlockId

Perform a boolean operation on the given blocks. All blocks must be combinable. See isCombinable. The parent, fill and sort order of the new block is that of the prioritized block. When performing a Union, Intersection or XOR, the operation is performed pair-wise starting with the element with the highest sort order. When performing a Difference, the operation is performed pair-wise starting with the element with the lowest sort order.

ids: The blocks to combine. They will be destroyed if "lifecycle/destroy" scope is enabled.
op: The boolean operation to perform.
Returns The newly created block or an error.


// Create blocks and append to scene
const star = engine.block.create('shapes/star');
const rect = engine.block.create('shapes/rect');
engine.block.appendChild(page, star);
engine.block.appendChild(page, rect);

// Check whether the blocks may be combined
const combinable = engine.block.isCombinable([star, rect]);
if (combinable) {
  const combined = engine.block.combine([star, rect], 'Union');
}