Tatami Attribute

Command attributes offer ease and quick way to build with Tatami. Here are examples of few use cases you might be looking for.

Before tatami attribute works you need to call tatami.api.initCommands(). It will run through DOM and bind every tag with [tatami] attribute with Tatami commands. To know when Tatami is all booted up and ready we should listen to Tatami's ready message.

Listening to Tatami's ready state and binding tatami attributes

window.addEventListener('message', e => {
  if (e.data.tatami === 'ready') {
    tatami.api.initCommands()
  }
})

If your application does dynamic page re-rendering then you need to call initCommands again after each render cycle. You can pass container as an argument to initialize attributes only for those DOM elements.

// Apply initCommands only to one DOM element (and it's children)
const el = document.querySelector('.some-element')
tatami.api.initCommands(el)

Buttons

Request image for new project

<button tatami="file-open">Open Image</button>

Request image for new layer

<button tatami="file-open:new-layer">Load Image as Layer</button>

Request .PNG image to be used as brush tip

<button tatami="file-open:brush-tip:.png">Load Brush Tip Image</button>

Input elements

Those previous loading operations can be done with file input tags as well.

Request image to be used as brush tip

<input type="file" tatami="brush-tip" />

Get image for new layer

<input type="file" tatami="new-layer" />

Updating brush options

Update brush brush color

<input type="color" tatami="brush-color" />

Adjust brush size

<input type="range" tatami="brush-size" min="1" max="100" step="1" value="20" />

Adjust brush opacity

<input type="range" tatami="brush-opacity" min="0" max="100" step="1" value="100" />

Selecting tools

Select Move tool

<button tatami="tool-move">Move</button>

Select Brush tool

<button tatami="tool-brush">Brush</button>

Select Gradient tool

<button tatami="tool-gradient">Move</button>

Layer

Layer opacity slider

<input type="range" tatami="layer-opacity" min="-1" max="100" step="1" value="100" />

More

Hue color adjustment slider

<input type="range" tatami="adjustment-hue" min="-1" max="1" step="0.01" value="0" />

Explore Commands Reference for more.