Introduction to Commands

Nearly every feature in Tatami can be used with a commands. For that there is cmd method.

In the previous page you learned there is a command brush-size that will set size of paint brush.

We can call that with cmd("brush-size").

Some commands, such as brush-size, also need some parameters in order to work. We pass values by adding them in the command string, separated with : character(s).

So if I want to set brush size into value 30 I would need to run command cmd("brush-size:30")

Looking at that brush size slider, what happens under the hood is that on every input event that slider will trigger brush-size command and passes slider value for it.

cmd("brush-size:<value>")

You can call these commands anywhere in your application. To make things simpler we have built those tatami shortcut attributes so that you can use in the elements instead of writing your own handlers.

You would get the same exact brush-size updating by doing this

// Tatami attribute here is same..
<input
  tatami="brush-size"
  type="range"
  min="1"
  max="100"
  step="1"
  value="20"
/>
// as this..
document.getElementById("brush-size)
  .addEventListener("input", (e) => {
    cmd("brush-size:" + parseInt(e.target.value))
  }
)