Controlling the UI with the Feature API

Enable Feature#

The following API allows to enable a custom or built-in feature (see the list of built-in features below):

enable(featureId: FeatureId | FeatureId[], predicate: FeaturePredicate)

The predicate is either a boolean that forces the features to be enabled or not, or a function that takes a context and returns a boolean value. (The type FeaturePredicate is boolean | ((context: EnableFeatureContext) => boolean), where EnableFeatureContext is {engine: CreativeEngine, isPreviousEnable: () => boolean}.)

Providing a function has the added benefit of receiving the return value of any previous predicates. This is useful for overwriting the default behavior under specific circumstances, or for chaining more complex predicates.

Example: Chaining Predicates#

// Enable the feature by default
cesdk.feature.enable('my.feature', true); 

// Disable the feature after 10 pm
cesdk.feature.enable(
  'my.feature', 
  ({isPreviousEnable}) => 
    (new Date().getHours() >= 22 ? false : isPreviousEnable())
);

Tip: FeatureId can be an arbitrary string, so you can use this mechanism to toggle your own custom features, as well.

Example: Overwriting Defaults#

Let's say you introduced a new kind of block that represents an Avatar. Regardless of scopes or the current mode of the editor, you want to hide the duplicate & delete button in the canvas menu for this kind of block. You can achieve this by adding new predicates to change the default feature behavior:

cesdk.feature.enable(
  'ly.img.delete',
  ({engine, isPreviousEnable}) => {
    const selectedBlock = engine.block.findAllSelected()[0];
    const kind = engine.block.getKind( selectedBlock );
    if (kind === 'avatar') { 
      return false;
    } else {
      return isPreviousEnable();
    }
  }
);

cesdk.feature.enable(
  'ly.img.duplicate',
  ({engine, isPreviousEnable}) => {
    const selectedBlock = engine.block.findAllSelected()[0];
    const kind = engine.block.getKind( selectedBlock );
    if (kind === 'avatar') { 
      return false;
    } else {
      return isPreviousEnable();
    }
  }
);

Check Feature#

The following API allows to query if the feature is currently enabled:

isEnabled(featureId: FeatureId, context: FeatureContext)

The type FeatureContext is {engine: CreativeEngine}, meaning that you will need to supply the active engine instance when checking a feature, for Example:

if (!cesdk.feature.isEnabled('ly.img.navigate.close', { engine })) {
  return null;
}

Built-In Features#

The following features are built-in to CE.SDK: