Skip to content

Editor State

The CreativeEditor SDK operates in different states called Edit Modes, each designed for a specific type of interaction on the canvas:

  • Transform: this is the default mode which allow to move, resize and manipulate things on the canvas
  • Text: Allows to edit the text elements on the canvas
  • Crop: Allow to Crop media blocks (images, videos, etc…)
  • Trim: Trim the clips in video mode
  • Playback: Play the media (mostly video) in video mode

While users typically interact with these modes through the UI (e.g., showing or hiding specific controls based on the active mode), it’s also possible to manage them programmatically via the engine’s API, though this isn’t always required.

In this example, we will show you how to use the CreativeEditor SDK’s CreativeEngine to set and query the editor state in the editor API, i.e., what type of content the user is currently able to edit.

State

The editor state consists of the current edit mode, which informs what type of content the user is currently able to edit. The edit mode can be set to either 'Transform', 'Crop', 'Text', or a custom user-defined one. You can also query the intended mouse cursor and the location of the text cursor while editing text.

Instead of having to constantly query the state in a loop, you can also be notified when the state has changed to then act on these changes in a callback.

onStateChanged: (callback: () => void) => (() => void)

Subscribe to changes to the editor state.

  • callback: This function is called at the end of the engine update, if the editor state has changed.
  • Returns A method to unsubscribe.
setEditMode(mode: EditMode): void

Set the edit mode of the editor. An edit mode defines what type of content can currently be edited by the user. Hint: the initial edit mode is “Transform”.

  • mode: “Transform”, “Crop”, “Text”, “Playback”, “Trim” or a custom value.
getEditMode(): EditMode

Get the current edit mode of the editor. An edit mode defines what type of content can currently be edited by the user.

  • Returns “Transform”, “Crop”, “Text”, “Playback”, “Trim” or a custom value.
unstable_isInteractionHappening(): boolean

If an user interaction is happening, e.g., a resize edit with a drag handle or a touch gesture.

  • Returns True if an interaction is happening.

Cursor

getCursorType(): 'Arrow' | 'Move' | 'MoveNotPermitted' | 'Resize' | 'Rotate' | 'Text'

Get the type of cursor that should be displayed by the application.

  • Returns The cursor type.
getCursorRotation(): number

Get the rotation with which to render the mouse cursor.

  • Returns The angle in radians.
getTextCursorPositionInScreenSpaceX(): number

Get the current text cursor’s x position in screen space.

  • Returns The text cursor’s x position in screen space.
getTextCursorPositionInScreenSpaceY(): number

Get the current text cursor’s y position in screen space.

  • Returns The text cursor’s y position in screen space.

Full Code

Here’s the full code:

const unsubscribeState = engine.editor.onStateChanged(() =>
  console.log('Editor state has changed'),
);


// Native modes: 'Transform', 'Crop', 'Text'
engine.editor.setEditMode('Crop');
engine.editor.getEditMode(); // 'Crop'


engine.editor.unstable_isInteractionHappening();


// Use this information to alter the displayed cursor
engine.editor.getCursorType();
engine.editor.getCursorRotation();


// Query information about the text cursor position
engine.editor.getTextCursorPositionInScreenSpaceX();
engine.editor.getTextCursorPositionInScreenSpaceY();