Tootframes

Tootframes is a simple UI libary that does not use reactive bindings or external frameworks such as React, Angular, Vue or similar.

The name "Tootframes" is derived from the sound an elephant does plus "frames" for the frames where the UI elements are rendered.

Available UI Elements

• Button
• ColorPicker
• Dialogs & MessageDialogs
• Docking System (dockable containers)
• Dropdown
• Image
• Text Label
• ListBox (only one column)
• ListView (table with headers)
• Menu and MenuBar
• Node Editor
• Panels
• TreeView
• UndoHistory

License

Zlib: https://opensource.org/license/zlib

Usage

import { ROOT, NodeEditor, Node } from "@cpfr/tootframes";

// create a new node editor
let nodeEditor = new NodeEditor();

// create two nodes
var n1 = new Node("Node 1");
var n2 = new Node("Node 2");

// set the node position
n1.setPos(100, 100);
n2.setPos(200, 10);

// add some HTML content to the second node
let n2content = document.createElement("div");
n2content.textContent = "Lorem Ipsum dolor si amet bla bla";
n2._contentsElement.appendChild(n2content);

// add inputs and outputs to the nodes
let n1Out = n1.addOutput(null, null, true);
let n2In = n2.addInput("Input");
let n2Out = n2.addOutput("Output");

// add the nodes to the editor
nodeEditor.addNode(n1);
nodeEditor.addNode(n2);

// connect the output of node1 with the input of node2
nodeEditor.connect(n1Out, n2In);

// append the node editor to the root element of tootframes
ROOT.appendChild(nodeEditor);