Utils

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to control URI lookups and perform color conversions in the editor API.

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.

URI Resolver#

The CreativeEngine allows overriding how URI's are resolved at runtime using the following APIs. See the in-depth guide for more details.

JavaScript


setURIResolver(resolver: (URI: string, defaultURIResolver: (URI: string) => string) => string): void

Sets a custom URI resolver. This function can be called more than once. Subsequent calls will overwrite previous calls. To remove a previously set resolver, pass the value null. The given function must return an absolute path with a scheme.

resolver: Custom resolution function. The resolution function should not reference variables outside of its scope. It receives the default URI resolver as its second argument

JavaScript


getAbsoluteURI(relativePath: string): string

Resolves the given path. If a custom resolver has been set with setURIResolver, it invokes it with the given path. Else, it resolves it as relative to the basePath setting. This performs NO validation of whether a file exists at the specified location.

relativePath: A relative path string
Returns The resolved absolute uri or an error if an invalid path was given.

JavaScript


defaultURIResolver(relativePath: string): string

This is the default implementation for the URI resolver. It resolves the given path relative to the basePath setting.

relativePath: The relative path that should be resolved.
Returns The resolved absolute URI.

Color Conversions#

To ease implementing advanced color interfaces, you may rely on the engine to perform color conversions.

JavaScript


convertColorToColorSpace(color: Color, colorSpace: 'sRGB'): RGBAColor

Converts a color to the given color space.

color: The color to convert.
colorSpace: The color space to convert to.
Returns The converted color.

JavaScript


convertColorToColorSpace(color: Color, colorSpace: 'CMYK'): CMYKColor

JavaScript


convertColorToColorSpace(color: Color, colorSpace: ColorSpace): never


// Replace all .jpg files with the IMG.LY logo!
engine.editor.setURIResolver((uri) => {
  if (uri.endsWith('.jpg')) {
    return 'https://img.ly/static/ubq_samples/imgly_logo.jpg';
  }
  // Make use of the default URI resolution behavior.
  return engine.editor.defaultURIResolver(uri);
});

// The custom resolver will return a path to the IMG.LY logo because the given path ends with '.jpg'.
// This applies regardless if the given path is relative or absolute.
engine.editor.getAbsoluteURI('/banana.jpg');

// Convert a color
const color = engine.block.getStrokeColor(block);
const cmykColor = engine.editor.convertColorToColorSpace(color, 'CMYK');