dragon-graph-lib 0.1.0

package/src/dragon-graph-lib.js

@@ -0,0 +1,920 @@
+
+function to_slug(string)
+{
+    return string.replace(/[^a-z0-9_-]+/ig, "-").toLowerCase();
+}
+
+export class Socket
+{
+    constructor(name, multi_input=false)
+    {
+        this.name = name;
+        this.multi_input = multi_input;
+        this.accepts_incoming = new Set();
+    }
+
+    accept(type)
+    {
+        let type_name = type instanceof Socket ? type.name : type;
+        this.accepts_incoming.add(type_name);
+    }
+
+    to_dom()
+    {
+        let elem = document.createElement("div");
+        elem.classList.add("dgl-socket", "socket-" + to_slug(this.name));
+        return elem;
+    }
+
+    output_can_connect(input_socket)
+    {
+        return input_socket.input_can_connect(this);
+    }
+
+    input_can_connect(output_socket)
+    {
+        return output_socket.name == this.name || this.accepts_incoming.has(output_socket.name);
+    }
+
+    static can_connect(output_socket, input_socket)
+    {
+        return output_socket.output_can_connect(input_socket);
+    }
+}
+
+
+class VisualElement
+{
+    constructor()
+    {
+        this.dom = null;
+    }
+
+    to_dom()
+    {
+        this.dom = this.build_dom();
+        this.update_dom();
+        return this.dom;
+    }
+
+    build_dom()
+    {
+        return document.createElement("div");
+    }
+
+    update_dom()
+    {
+    }
+
+    destroy()
+    {
+        if ( this.dom && this.dom.parentNode )
+        {
+            this.dom.parentNode.removeChild(this.dom);
+            this.dom = null;
+        }
+    }
+}
+
+export class Connection extends VisualElement
+{
+    margin = 10;
+
+    constructor(output, input)
+    {
+        super();
+        this.output = output;
+        this.input = input;
+    }
+
+    connect()
+    {
+        this.output.connect(this);
+        this.input.connect(this);
+    }
+
+    disconnect()
+    {
+        this.destroy();
+        this.output.disconnect(this);
+        this.input.disconnect(this);
+    }
+
+    static path_d(x1, y1, x2, y2)
+    {
+        let w = x2 - x1;
+        let h = y2 - y1;
+
+        return `M ${x1} ${y1}
+        C ${x1 + w / 3} ${y1}
+          ${x2 - w / 3} ${y2}
+          ${x2} ${y2}
+        `;
+    }
+}
+
+class NodeIO extends VisualElement
+{
+    constructor(node, name, label, socket)
+    {
+        super();
+        this.node = node;
+        this.name = name;
+        this.label = label;
+        this.socket = socket;
+        this.connections = [];
+        this.dom_items = {};
+    }
+
+    update_dom()
+    {
+        this.dom_items.label.textContent = this.label;
+    }
+
+    connect(connection)
+    {
+        this.connections.push(connection);
+    }
+
+    disconnect(connection)
+    {
+        let index = this.connections.indexOf(connection);
+        if ( index != -1 )
+            this.connections.splice(index, 1);
+    }
+}
+
+
+export class NodeInput extends NodeIO
+{
+    constructor(node, name, label, socket, control)
+    {
+        super(node, name, label, socket);
+        this.control = control;
+    }
+
+    build_dom()
+    {
+        let container = document.createElement("div");
+        container.classList.add("dgl-input");
+        if ( this.socket )
+        {
+            this.dom_items.socket = container.appendChild(this.socket.to_dom());
+            this.dom_items.socket.classList.add("dgl-input-socket");
+            container.classList.add("dgl-socketed");
+        }
+
+        this.dom_items.label = document.createElement("span");
+        this.dom_items.label.textContent = this.name;
+        this.dom_items.label.classList.add("dgl-label", "dgl-input-label");
+        container.appendChild(this.dom_items.label);
+
+        if ( this.control )
+            container.appendChild(this.control);
+
+        return container;
+    }
+
+    connect(connection)
+    {
+        if ( !this.socket.multi_input )
+        {
+            for ( let conn of this.connections )
+                conn.disconnect();
+            this.connections = [];
+        }
+
+        this.connections.push(connection);
+
+        if ( this.control )
+            this.control.style.visibility = "hidden";
+    }
+
+    set_value(value)
+    {
+        if ( this.control )
+        {
+            this.control.value = value;
+        }
+    }
+
+    get_value()
+    {
+        if ( this.connections.length )
+        {
+            if ( this.socket.multi_input )
+                return this.connections.map(c => c.output.get_value());
+            return this.connections[0].output.get_value();
+        }
+
+        if ( !this.control )
+        {
+            if ( this.socket && this.socket.multi_input )
+                return [];
+            return null;
+        }
+
+        let value = this.control.value
+        if ( this.socket && this.socket.multi_input )
+            return [value];
+        return value;
+    }
+
+    disconnect(connection)
+    {
+        super.disconnect(connection);
+        if ( this.control && this.connections.length == 0 )
+            this.control.style.visibility = "visible";
+    }
+}
+
+export class NodeOutput extends NodeIO
+{
+    constructor(node, name, label, socket)
+    {
+        super(node, name, label, socket);
+        this.value = undefined;
+    }
+
+    build_dom()
+    {
+        let container = document.createElement("div");
+        container.classList.add("dgl-output");
+        this.dom_items.label = document.createElement("span");
+        this.dom_items.label.textContent = this.name;
+        container.appendChild(this.dom_items.label);
+        this.dom_items.label.classList.add("dgl-label", "dgl-output-label");
+        this.dom_items.socket = container.appendChild(this.socket.to_dom());
+        this.dom_items.socket.classList.add("dgl-output-socket");
+
+        return container;
+    }
+
+    clear_value()
+    {
+        this.value = undefined;
+    }
+
+    set_value(value)
+    {
+        this.value = value;
+    }
+
+    get_value()
+    {
+        if ( this.value == undefined )
+            this.node.evaluate();
+        return this.value;
+    }
+}
+
+
+function force_default(ev)
+{
+    ev.stopPropagation();
+}
+
+export function NodeControl(type, attrs={})
+{
+    let elem = document.createElement("input");
+    elem.type = type;
+    elem.classList.add("dgl-control");
+    for ( let [k, v] of Object.entries(attrs) )
+        elem.setAttribute(k, v);
+    elem.addEventListener("mousedown", force_default);
+    elem.addEventListener("mouseup", force_default);
+    elem.addEventListener("mousemove", force_default);
+    elem.addEventListener("wheel", force_default);
+    return elem;
+}
+
+export class Node extends VisualElement
+{
+    constructor(title, type)
+    {
+        super();
+        this.title = title;
+        this.outputs = {};
+        this.inputs = {};
+        this.preview = null;
+        this.type = type;
+        this.x = 0;
+        this.y = 0;
+    }
+
+    set_input_value(data)
+    {
+        for ( let [k, v] of Object.entries(this.inputs) )
+        {
+            if ( k in data )
+                v.set_value(data[k]);
+        }
+    }
+
+    get_input_value()
+    {
+        let data = {};
+        for ( let [k, v] of Object.entries(this.inputs) )
+        {
+            data[k] = v.get_value();
+        }
+        return data;
+    }
+
+    connect(output_name, node, input_name)
+    {
+        let output = this.outputs[output_name];
+        let input = node.inputs[input_name];
+        if ( !output || !input )
+            return null;
+
+        if ( !Socket.can_connect(output.socket, input.socket) )
+            return null;
+
+        let connection = new Connection(output, input);
+        connection.connect();
+        return connection;
+    }
+
+    add_input(name, title, socket, control)
+    {
+        this.inputs[name] = new NodeInput(this, name, title, socket, control);
+    }
+
+    add_output(name, title, socket)
+    {
+        this.outputs[name] = new NodeOutput(this, name, title, socket);
+    }
+
+    update_dom()
+    {
+        this.dom.style.transform = `translate(${this.x}px, ${this.y}px`;
+    }
+
+    build_dom()
+    {
+        let dom = document.createElement("div");
+        dom.classList.add("dgl-node", "node-" + to_slug(this.title));
+
+        let title = dom.appendChild(document.createElement("div"));
+        title.textContent = this.title;
+        title.classList.add("dgl-title");
+
+        for ( let output of Object.values(this.outputs) )
+            dom.appendChild(output.to_dom());
+
+        this.preview = dom.appendChild(document.createElement("div"));
+        this.preview.classList.add("dgl-preview");
+
+        for ( let input of Object.values(this.inputs) )
+            dom.appendChild(input.to_dom());
+
+        return dom;
+    }
+
+    evaluate()
+    {
+        if ( this.type )
+            this.type.evaluate_node(this);
+    }
+
+    all_connections()
+    {
+        return Object.values(this.inputs).concat(Object.values(this.outputs))
+            .map(c => c.connections)
+            .reduce((a, b) => a.concat(b), [])
+        ;
+    }
+}
+
+export class NodeType
+{
+    constructor(name)
+    {
+        this.name = name;
+    }
+
+    create_node()
+    {
+        let node = new Node(this.name, this);
+        this.populate_node(node);
+        return node;
+    }
+
+    populate_node(node)
+    {
+    }
+
+    update_node(node)
+    {
+
+    }
+
+    evaluate_node(node)
+    {
+
+    }
+}
+
+export class ContextMenu extends VisualElement
+{
+    constructor(actions)
+    {
+        super();
+        this.actions = actions;
+    }
+
+    to_dom(editor)
+    {
+        this.dom = this.make_menu("dgl-menu", this.actions, editor);
+        this.dom.style.display = "none";
+        return this.dom;
+    }
+
+    make_action(title, action, editor)
+    {
+        let onclick = action;
+        if ( action instanceof NodeType )
+            onclick = () => editor.create_node(action);
+
+        let item = document.createElement("li");
+        item.classList.add("dgl-menu-item");
+        item.addEventListener("mousedown", (ev) => {
+            onclick();
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.dom.style.display = "none";
+        });
+        let label = item.appendChild(document.createElement("span"));
+        label.textContent = title;
+        return item;
+    }
+
+    make_menu(cls, actions, editor)
+    {
+        let dom = document.createElement("ul");
+        dom.classList.add(cls);
+
+        if ( Array.isArray(actions) )
+        {
+            for ( let action of actions )
+            {
+                dom.appendChild(this.make_action(action.name, action, editor));
+            }
+        }
+        else
+        {
+            for ( let [name, val] of Object.entries(actions) )
+            {
+                if ( Array.isArray(val) || (typeof val == "object" && !(val instanceof NodeType)) )
+                    dom.appendChild(this.make_submenu(name, val, editor));
+                else
+                    dom.appendChild(this.make_action(name, val));
+            }
+        }
+        return dom;
+    }
+
+    make_submenu(name, actions, editor)
+    {
+        let item = document.createElement("li");
+        item.classList.add("dgl-menu-item");
+        let label = item.appendChild(document.createElement("span"));
+        label.textContent = name;
+        label.classList.add("dgl-submenu-label");
+        item.appendChild(this.make_menu("dgl-submenu", actions, editor));
+        return item;
+    }
+
+    show(x, y)
+    {
+        this.dom.style.display = "";
+        this.dom.style.left = x + "px";
+        this.dom.style.top = y + "px";
+    }
+
+    close()
+    {
+        this.dom.style.display = "none";
+    }
+}
+
+export class Editor
+{
+    constructor(container, context_menu={})
+    {
+        this.nodes = [];
+
+        this.container = container;
+
+        this.area = container.appendChild(document.createElement("div"));
+        container.classList.add("dgl-editor");
+        this.area.classList.add("dgl-area");
+
+        this.connection_parent = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        this.area.appendChild(this.connection_parent);
+        this.connection_parent.classList.add("dgl-connection");
+        this.dragging_connection = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this.connection_parent.appendChild(this.dragging_connection);
+
+        this.selected_node = null;
+        this.scale = 1;
+        this.offset_x = 0;
+        this.offset_y = 0;
+        this.drag_start_x = 0;
+        this.drag_start_y = 0;
+        this.drag = null;
+        this.drag_connector = null;
+        this.cursor_x = 0;
+        this.cursor_y = 0;
+
+        this.container.addEventListener("mousedown", this._on_area_mouse_down.bind(this));
+        this.container.addEventListener("mousemove", this._on_area_mouse_move.bind(this));
+        this.container.addEventListener("mouseup", this._on_area_mouse_up.bind(this));
+        this.container.addEventListener("wheel", this._on_area_wheel.bind(this));
+        this.container.addEventListener("contextmenu", this._on_area_menu.bind(this));
+
+        this.context_menu = new ContextMenu(context_menu);
+        this.node_menu = new ContextMenu({
+            "Delete": () => {
+                if ( this.selected_node )
+                    this.remove_node(this.selected_node);
+            },
+            "Duplicate": () => {
+                if ( this.selected_node ) {
+                    let node = this.create_node(this.selected_node.type, this.selected_node.get_input_value());
+                    node.x = this.selected_node.x;
+                    node.y = this.selected_node.y;
+                    this._select_node(node);
+
+                }
+            }
+        });
+
+        this.container.appendChild(this.node_menu.to_dom(this));
+        this.container.appendChild(this.context_menu.to_dom(this));
+    }
+
+    create_node(type, data={})
+    {
+        let node = type.create_node();
+        node.set_input_value(data);
+        node.x = this.cursor_x;
+        node.y = this.cursor_y;
+        this.nodes.push(node);
+        let node_dom = node.to_dom();
+        this.area.appendChild(node_dom);
+
+        node_dom.addEventListener("mousedown", ev => this._on_node_mouse_down(ev, node));
+        node_dom.addEventListener("contextmenu", ev => this._on_node_menu(ev, node));
+
+        return node;
+    }
+
+    auto_layout()
+    {
+        setTimeout(() => this._on_auto_layout());
+    }
+
+    _auto_layout_traverse(node, depth)
+    {
+        if ( node._depth >= depth )
+            return depth;
+
+        if ( node._depth < depth )
+            node._depth = depth;
+
+        let max = depth;
+
+        for ( let inp of Object.values(node.inputs) )
+        {
+            for ( let conn of inp.connections )
+            {
+                let cd = this._auto_layout_traverse(conn.output.node, depth + 1);
+                if ( cd > max )
+                    max = cd;
+            }
+        }
+
+        return max;
+    }
+
+    _on_auto_layout()
+    {
+        for ( let node of this.nodes )
+        {
+            node._depth = -1;
+        }
+        let max_depth = 0;
+
+        for ( let node of this.nodes )
+        {
+            let out_conns = 0;
+            for ( let outp of Object.values(node.outputs) )
+            {
+                out_conns += outp.connections.length;
+            }
+            if ( out_conns == 0 )
+            {
+                let depth = this._auto_layout_traverse(node, 0);
+                if ( depth > max_depth )
+                    max_depth = depth;
+            }
+        }
+
+        let layers = new Array(max_depth + 1).fill(0).map(() => []);
+        for ( let node of this.nodes )
+        {
+            layers[max_depth - node._depth].push(node);
+        }
+
+        let xgap = 48;
+        let ygap = 12;
+        let x = 0;
+        let layer_heights = [];
+        let max_height = 0;
+        for ( let layer of layers )
+        {
+            let width = 0;
+            let y = 0;
+            for ( let node of layer )
+            {
+                node.x = x;
+                node.y = y;
+                let rect = node.dom.getBoundingClientRect();
+                if ( rect.width > width )
+                    width = rect.width;
+                y += rect.height + ygap;
+            }
+
+            x += width + xgap;
+            let height = y - ygap;
+            layer_heights.push(height);
+            if ( height > max_height )
+                max_height = height;
+        }
+
+        // Center vertically
+        for ( let i = 0; i < layers.length; i++ )
+        {
+            let offset = (max_height - layer_heights[i]) / 2;
+            for ( let node of layers[i] )
+                node.y += offset;
+        }
+
+        this._refresh_graph();
+    }
+
+    connect(output_node, output_name, input_node, input_name)
+    {
+        let conn = output_node.connect(output_name, input_node, input_name);
+        if ( conn )
+        {
+            conn.dom = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            conn.dom.classList.add("connection-from-" + to_slug(output_node.outputs[output_name].socket.name));
+            conn.dom.classList.add("connection-to-" + to_slug(input_node.inputs[input_name].socket.name));
+            this.connection_parent.appendChild(conn.dom);
+            this._update_connection(conn);
+            this._refresh_graph();
+        }
+        return conn;
+    }
+
+    disconnect(connection)
+    {
+        connection.disconnect();
+        this._refresh_graph();
+    }
+
+    _update_connection(conn)
+    {
+        let [x1, y1] = this._connection_point(conn.output);
+        let [x2, y2] = this._connection_point(conn.input);
+        conn.dom.setAttribute("d", Connection.path_d(x1, y1, x2, y2));
+    }
+
+    _close_menus()
+    {
+        this.context_menu.close();
+        this.node_menu.close();
+    }
+
+    _on_area_mouse_down(ev)
+    {
+        this._close_menus();
+        if ( ev.button == 0 )
+        {
+            this._select_node(null);
+        }
+        else if ( ev.button == 1 )
+        {
+            let rect = this.container.getBoundingClientRect();
+            this.drag_start_x = ev.clientX - rect.left;
+            this.drag_start_y = ev.clientY - rect.top;
+            this.drag_start_ox = this.offset_x;
+            this.drag_start_oy = this.offset_y;
+            this.drag = "pan";
+        }
+
+        ev.stopPropagation();
+        ev.preventDefault();
+    }
+
+    _connection_point(connector)
+    {
+
+        let rect = connector.dom_items.socket.getBoundingClientRect();
+        let px = rect.x + rect.width / 2;
+        let py = rect.y + rect.height / 2;
+        let crect = this.container.getBoundingClientRect();
+        return [
+            (px - crect.left - this.offset_x) / this.scale,
+            (py - crect.top - this.offset_y) / this.scale
+        ];
+    }
+
+    _on_area_mouse_move(ev)
+    {
+        let rect = this.container.getBoundingClientRect();
+        let drag_x = ev.clientX - rect.left;
+        let drag_y = ev.clientY - rect.top;
+        this.cursor_x = (drag_x - this.offset_x) / this.scale;
+        this.cursor_y = (drag_y - this.offset_y) / this.scale;
+
+        if ( this.drag )
+        {
+            let delta_x = drag_x - this.drag_start_x;
+            let delta_y = drag_y - this.drag_start_y;
+
+            if ( this.drag == "pan" )
+            {
+                this.offset_x = this.drag_start_ox + delta_x;
+                this.offset_y = this.drag_start_oy + delta_y;
+            }
+            else if ( this.drag == "node" )
+            {
+                let x = this.drag_start_ox + delta_x / this.scale;
+                let y = this.drag_start_oy + delta_y / this.scale;
+                this.selected_node.x = x;
+                this.selected_node.y = y;
+                this.selected_node.dom.style.transform = `translate(${x}px, ${y}px`;
+                for ( let connection of this.selected_node.all_connections() )
+                    this._update_connection(connection);
+            }
+            else if ( this.drag == "socket" )
+            {
+                let x1 = (drag_x - this.offset_x) / this.scale;
+                let y1 = (drag_y - this.offset_y) / this.scale;
+                let [x2, y2] = this._connection_point(this.drag_connector);
+
+                this.dragging_connection.setAttribute("d", Connection.path_d(x1, y1, x2, y2));
+            }
+
+            this._apply_transform();
+        }
+
+        ev.stopPropagation();
+        ev.preventDefault();
+    }
+
+    _apply_transform()
+    {
+        this.area.style.transform = `translate(${this.offset_x}px, ${this.offset_y}px) scale(${this.scale})`;
+    }
+
+    _refresh_graph()
+    {
+        for ( let node of this.nodes )
+        {
+            node.evaluate();
+            node.update_dom();
+        }
+
+        window.setTimeout(() => {
+            // TODO could optimize this, currently each connection is updated twice
+            for ( let node of this.nodes )
+            {
+                for ( let connection of node.all_connections() )
+                    this._update_connection(connection);
+            }
+        });
+    }
+
+    _get_dest_connector(ev)
+    {
+        let elem = document.elementFromPoint(ev.clientX, ev.clientY);
+        if ( !elem.classList.contains("dgl-socket") )
+            return null;
+
+        let conns = "inputs";
+        if ( this.drag_connector instanceof NodeInput )
+            conns = "outputs";
+
+        for ( let node of this.nodes )
+        {
+            for ( let conn of Object.values(node[conns]) )
+                if ( conn.dom_items.socket === elem )
+                    return conn;
+        }
+        return null;
+    }
+
+    _on_area_mouse_up(ev)
+    {
+        if ( this.drag == "socket" )
+        {
+            let dest = this._get_dest_connector(ev);
+            if ( dest && dest.node !== this.selected_node )
+            {
+                if ( this.drag_connector instanceof NodeInput )
+                    this.connect(dest.node, dest.name, this.selected_node, this.drag_connector.name);
+                else
+                    this.connect(this.selected_node, this.drag_connector.name, dest.node, dest.name);
+            }
+            this.drag_connector = null;
+            this.dragging_connection.setAttribute("d", "");
+        }
+        this.drag = null;
+        ev.stopPropagation();
+        ev.preventDefault();
+    }
+
+    _on_area_wheel(ev)
+    {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        let rect = this.container.getBoundingClientRect();
+        let mouse_x = ev.clientX - rect.left;
+        let mouse_y = ev.clientY - rect.top;
+
+        let unscaled_x = (mouse_x - this.offset_x) / this.scale;
+        let unscaled_y = (mouse_y - this.offset_y) / this.scale;
+
+        let delta = ev.deltaY > 0 ? 0.9 : 1.1;
+        this.scale *= delta;
+
+        this.offset_x = mouse_x - unscaled_x * this.scale;
+        this.offset_y = mouse_y - unscaled_y * this.scale;
+        this._apply_transform();
+    }
+
+    _select_node(node)
+    {
+        this.area.querySelectorAll(".dgl-node").forEach(e => e.classList.remove("dgl-selected"));
+        if ( node )
+            node.dom.classList.add("dgl-selected");
+        this.selected_node = node;
+    }
+
+    _on_node_mouse_down(ev, node)
+    {
+        this._close_menus();
+        if ( ev.button == 0 )
+        {
+            ev.stopPropagation();
+            this._select_node(node);
+            this.drag = "node";
+            let rect = this.container.getBoundingClientRect();
+            this.drag_start_x = ev.clientX - rect.left;
+            this.drag_start_y = ev.clientY - rect.top;
+            this.drag_start_ox = node.x;
+            this.drag_start_oy = node.y;
+            if ( ev.target.classList.contains("dgl-socket") )
+            {
+                this.drag = "socket";
+                let is_input = ev.target.classList.contains("dgl-input-socket");
+                let connectors = is_input ? node.inputs : node.outputs;
+                for ( let connector of Object.values(connectors) )
+                {
+                    if ( connector.dom_items.socket === ev.target)
+                    {
+                        this.drag_connector = connector;
+                        if ( is_input )
+                        {
+                            for ( let conn of connector.connections.slice() )
+                                conn.disconnect(conn);
+                            this._refresh_graph();
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    _on_node_menu(ev, node)
+    {
+        this._select_node(node);
+        this.node_menu.show(ev.clientX, ev.clientY);
+        ev.stopPropagation();
+        ev.preventDefault();
+    }
+
+    _on_area_menu(ev)
+    {
+        this.context_menu.show(ev.clientX, ev.clientY);
+        ev.stopPropagation();
+        ev.preventDefault();
+    }
+}