Docks

A whole view of the plugin's own, in the canvas's place.

A dock gets a button in the toolbox. Opened, it takes the canvas's place. The user goes back to the canvas (the view keeps running) or closes it. open is given an empty element to fill and the API, and may return a function that tidies up.

docks: [{
  key: 'notes', name: 'Notes', icon: 'Text', about: 'Notes kept with the project',
  open(host, api) {
    const area = document.createElement('textarea');
    area.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;padding:16px;border:0;';
    area.value = api.project.doc.notes ?? '';
    area.oninput = () => (api.project.doc.notes = area.value);      // kept in the project, and saved with it
    host.append(area);
    return () => area.remove();
  },
}],

from js import document


@plugin.dock('Notes', icon='Text', about='Notes kept with the project')
def notes(host, app):
    area = document.createElement('textarea')
    area.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;padding:16px;border:0;'
    area.value = app.doc.get('notes', '')

    def typed(event):
        app.project.doc.notes = area.value          # kept in the project, and saved with it
    area.oninput = typed
    host.append(area)
    return lambda: area.remove()

The animation window stays visible under a dock, so a dock that makes an animation is played from there. The built-in Compositor is a dock.

A dock may build its view however it likes: plain elements, a canvas, or a framework's component mounted into host. In Python the page is reached through from js import document.