Skip to main content
Platform
Language

Observe Editing State

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.

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.

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.