Listening to Messages

Tapping into Tatami messages

Listening to Messages

Tatami WebAssembly binary is running in that HTML Canvas element. Most of the times we just send commands to Tatami or request information from it with API methods (more about that in the next section). However sometimes we need to wait for Tatami to complete some operation and for that we've built messaging system.

When certain events happen inside Tatami engine it will send postMessage we can listen to. One of these events is layers_changed. Tatami will send that anytime contents of any layer updates. For example when you have finished drawing brush stroke, so by listening to this message you would know when to update your layer panel, for example.

You can create message listener and see messages coming in as you use the engine.

window.addEventListener("message", (e) => {
  console.log(e.data);
  if (e.data.command === "layers_changed") {
    console.log('Layers have changed')
  }
});

Messages coming from WebAssembly/C++ side have command, params and version attributes. For example:

{
  command: 'undo_redo_changed',
  params: {
    can_redo: false,
    can_undo: true
  },
  version: 1
}

You might notice that every time you trigger a command that will also send postMessage with command and params. This is because we have been working on several projects where we needed to run Tatami inside IFRAME and the parent window needed to know what's happening inside.

Messages coming from the JavaScript commands have tatami and params attributes. For example:

{
  tatami: 'brush-color',
  params: '#b84242'
}

Tatami Engine Messages

One message you should know about first is the message of Tatami being ready.

window.addEventListener('message', e => {
  if (e.data.tatami === 'ready') {
    // Do some launch things
  }
})

Some of the messages have parameters coming with them, which are not listed here. We suggest that you monitor these messages and see them in action.

Here is an example for message listener you can use

window.addEventListener("message", (e) => {
  console.log(e.data);
});
MessageDescription
canvas_clickTatami canvas was clicked on
selection_madeSelection tool has finished making a selection
selection_unselectedSelection was cleared
upload_finishedFile upload to Tatami's internal storage was completed
select_layerLayer was selected
layers_changedLayer contents were updated
object_ready3D object is ready to be used
selected_object_changedSome vector shape was selected or unselected
refresh_layer_thumbsTatami has updated layer thumbnail images internally
undo_redo_changedHistory was updated, there is new undo or redo state
undo_redo_appliedUndo or Redo was triggered
accept_cropCrop was applied
store_changedSomething updated in Tatami's internal storage
analyzer_resultTatami has analyzed image colors and returns array of hex values

Beyond Commands and Messages

With Commands you can trigger things inside the engine, such as: add new layer. When the layer is created Tatami will send a message about layers changed. Next level from here is to interact directly with Tatami API. With that you can do things like ask layer list, modify certain props of the layers and update multiple values with single API call.