dragon-graph-lib 0.1.2 → 0.1.4

package/src/dragon-graph-lib.js

@@ -14,16 +14,14 @@ export class Socket
 {
     /**
      * @param {string} name Socket type name
-     * @param {boolean} multi_input (For input sockets) whether it should accept multiple incoming connections
      */
-    constructor(name, multi_input=false)
+    constructor(name)
     {
         /**
          * Socket type name
          * @member {string}
          */
         this.name = name;
-        this.multi_input = multi_input;
         this.accepts_incoming = new Set();
     }
 
@@ -204,11 +202,6 @@ class Connector extends VisualElement
         this.dom_items = {};
     }
 
-    update_dom()
-    {
-        this.dom_items.label.textContent = this.label;
-    }
-
     /**
      * Adds a connection to the connector
      * @param {Connection} connection
@@ -242,8 +235,9 @@ export class NodeInput extends Connector
      * @param {string}  label   User-visible label / title
      * @param {Socket?} socket  Optional socket for incoming connectors
      * @param {HTMLInputElement?} control Optional control to set the value without a connection
+     * @param {boolean} multiple Whether this input accepts multiple incoming connections
      */
-    constructor(node, name, label, socket, control)
+    constructor(node, name, label, socket, control, multiple=false)
     {
         super(node, name, label, socket);
         /**
@@ -251,6 +245,11 @@ export class NodeInput extends Connector
          * @member {HTMLInputElement?}
          */
         this.control = control;
+        /**
+         * Whether this input accepts multiple incoming connections
+         * @member {boolean}
+         */
+        this.multiple = multiple;
     }
 
     build_dom()
@@ -264,20 +263,17 @@ export class NodeInput extends Connector
             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);
+            container.appendChild(this.control.to_dom(this.label, this.name));
+        else
+            container.appendChild(NodeControl.make_label(this.label));
 
         return container;
     }
 
     connect(connection)
     {
-        if ( !this.socket.multi_input )
+        if ( !this.multiple )
         {
             for ( let conn of this.connections )
                 conn.disconnect();
@@ -287,7 +283,7 @@ export class NodeInput extends Connector
         this.connections.push(connection);
 
         if ( this.control )
-            this.control.style.visibility = "hidden";
+            this.control.hide();
     }
 
     /**
@@ -298,7 +294,7 @@ export class NodeInput extends Connector
     {
         if ( this.control )
         {
-            this.control.value = value;
+            this.control.set_value(value);
         }
     }
 
@@ -308,7 +304,7 @@ export class NodeInput extends Connector
      * If there's input connections, the value is based on those.
      * Otherwise the value comes from the control.
      *
-     * If there is a socket on this connector with multi_input, the returned value
+     * If there this connector accepts multiple inputs, the returned value
      * is always an array.
      *
      * @return {any}
@@ -317,20 +313,20 @@ export class NodeInput extends Connector
     {
         if ( this.connections.length )
         {
-            if ( this.socket.multi_input )
+            if ( this.multiple )
                 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 )
+            if ( this.socket && this.multiple )
                 return [];
             return null;
         }
 
-        let value = this.control.value
-        if ( this.socket && this.socket.multi_input )
+        let value = this.control.get_value();
+        if ( this.socket && this.multiple )
             return [value];
         return value;
     }
@@ -339,7 +335,7 @@ export class NodeInput extends Connector
     {
         super.disconnect(connection);
         if ( this.control && this.connections.length == 0 )
-            this.control.style.visibility = "visible";
+            this.control.show();
     }
 }
 
@@ -401,7 +397,7 @@ export class NodeOutput extends Connector
      */
     get_value()
     {
-        if ( this.value == undefined )
+        if ( this.value === undefined || this.node.dirty )
             this.node.evaluate();
         return this.value;
     }
@@ -414,23 +410,221 @@ function force_default(ev)
 }
 
 /**
- * Creates a node control
- * @param {string} type Input type
- * @param {object} attrs Input attributes as an object
- * @returns {HTMLInputElement}
+ * Custom control interface
  */
-export function NodeControl(type, attrs={})
+export class NodeControl
 {
-    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;
+    /**
+     * @param {object}  config          Control config
+     * @param {any}     config.default  Control default value
+     */
+    constructor(config={})
+    {
+        this.on_change = null;
+        this.config = config;
+    }
+
+    to_dom(label, name)
+    {
+        this.element = document.createElement("div");
+        this.element.classList.add("dgl-control-parent");
+        if ( label.length )
+            this.element.appendChild(NodeControl.make_label(label));
+        this.setup_dom(this.element, name);
+        if ( "default" in this.config )
+            this.set_value(this.config.default);
+        return this.element;
+    }
+
+    /**
+     * Sets up the DOM
+     * @param {HTMLElement} parent  Element to add additional content to
+     * @param {name}        name    Control name
+     */
+    setup_dom(_parent, _name)
+    {
+    }
+
+    /**
+     * Dispatches the change event to update the graph
+     */
+    notify_change()
+    {
+        this.on_change();
+    }
+
+    /**
+     * Override to return the control value
+     * @returns {any} value
+     */
+    get_value()
+    {
+    }
+
+    /**
+     * Override to return set a value to the control
+     * @param {any} value
+     */
+    set_value(_value)
+    {
+    }
+
+    /**
+     * Ensures an element uses the default mouse interactions instead of
+     * propagating to the node editor
+     */
+    use_default_events(element)
+    {
+        element.addEventListener("mousedown", force_default);
+        element.addEventListener("mouseup", force_default);
+        element.addEventListener("mousemove", force_default);
+        element.addEventListener("wheel", force_default);
+    }
+
+    /**
+     * Creates a label element
+     * @param {string} label Text to display
+     */
+    static make_label(label)
+    {
+        let elem = document.createElement("span");
+        elem.textContent = label;
+        elem.classList.add("dgl-label", "dgl-input-label");
+        return elem;
+    }
+
+    set_visibility(value)
+    {
+        for ( let ch of this.element.children )
+            if ( !ch.classList.contains("dgl-label") )
+                ch.style.visibility = value;
+    }
+
+    /**
+     * Hides the control when an input connection is attached
+     */
+    hide()
+    {
+        this.set_visibility("hidden");
+    }
+
+    /**
+     * Shows the control when an input connection is detached
+     */
+    show()
+    {
+        this.set_visibility("visible");
+    }
+
+    /**
+     * Serializes a value to JSON
+     * @param {any}  value Value to serialize, as returned from this.get_value()
+     * @return {any} value Value that can be serialized to JSON
+     */
+    serialize_value(value)
+    {
+        return value;
+    }
+
+    /**
+     * Deserializes a value from JSON
+     * @param {any}  value Value from a JSON object
+     * @return {any} value Value that can be passed to this.set_value()
+     */
+    deserialize_value(value)
+    {
+        return value;
+    }
+}
+
+/**
+ * Control for simple input elements
+ */
+export class InputControl extends NodeControl
+{
+    /**
+     * @param {object}  config          Control config
+     * @param {string}  config.type     Input type
+     * @param {object}  config.attrs    Input attributes
+     * @param {any}     config.default  Default value
+     */
+    constructor(config={type: "text"})
+    {
+        super(config);
+    }
+
+    setup_dom(parent, name)
+    {
+        this.input = document.createElement("input");
+        parent.appendChild(this.input);
+        this.input.type = this.config.type;
+        this.input.classList.add("dgl-control");
+        for ( let [k, v] of Object.entries(this.config.attrs ?? {}) )
+            this.input.setAttribute(k, v);
+        this.use_default_events(this.input);
+        this.input.name = name;
+        this.input.addEventListener("input", () => this.notify_change());
+    }
+
+    get_value()
+    {
+        if ( this.config.type == "checkbox" )
+            return this.input.checked;
+        if ( this.config.type == "number" || this.config.type == "range" )
+            return Number(this.input.value);
+        return this.input.value;
+    }
+
+    set_value(value)
+    {
+        if ( this.config.type == "checkbox" )
+            this.input.checked = value;
+        else
+            this.input.value = value;
+    }
+}
+
+/**
+ * Drop-down Control
+ */
+export class DropDownControl extends NodeControl
+{
+
+    /**
+     * @param {object}              config          Control config
+     * @param {Array.<string, string>}  config.options  Drop down options ([value, display])
+     * @param {any}                 config.default  Default value
+     */
+    constructor(config={options: []})
+    {
+        super(config);
+    }
+
+    setup_dom(parent, name)
+    {
+        this.input = document.createElement("select");
+        for ( let [value, display] of this.config.options )
+        {
+            let option = document.createElement("option");
+            this.input.appendChild(option);
+            option.value = value;
+            option.textContent = display ?? value;
+        }
+        this.input.name = name;
+        parent.appendChild(this.input);
+        this.use_default_events(this.input);
+        this.input.addEventListener("input", () => this.notify_change());
+    }
+
+    get_value()
+    {
+        return this.input.value;
+    }
+
+    set_value(value)
+    {
+        this.input.value = value;
+    }
 }
 
 /**
@@ -472,13 +666,14 @@ export class Node extends VisualElement
          * @member {number}
          */
         this.y = 0;
+        this.dirty = true;
     }
 
     /**
      * Sets control values for inputs
      * @param {object} data Object with input names as keys and associated values
      */
-    set_input_value(data)
+    set_input_data(data)
     {
         for ( let [k, v] of Object.entries(this.inputs) )
         {
@@ -491,7 +686,7 @@ export class Node extends VisualElement
      * Gets values from the inputs
      * @returns {object} Object with input names as keys and associated values
      */
-    get_input_value()
+    get_input_data()
     {
         let data = {};
         for ( let [k, v] of Object.entries(this.inputs) )
@@ -525,10 +720,11 @@ export class Node extends VisualElement
      * @param {string}  label   User-visible label / title
      * @param {Socket?} socket  Optional socket for incoming connectors
      * @param {HTMLInputElement?} control Optional control to set the value without a connection
+     * @param {boolean} multiple Whether this input accepts multiple incoming connections
      */
-    add_input(name, title, socket, control)
+    add_input(name, title, socket, control, multiple)
     {
-        this.inputs[name] = new NodeInput(this, name, title, socket, control);
+        this.inputs[name] = new NodeInput(this, name, title, socket, control, multiple);
     }
 
     /**
@@ -574,6 +770,7 @@ export class Node extends VisualElement
 
     evaluate()
     {
+        this.dirty = false;
         if ( this.type )
             this.type.evaluate_node(this);
     }
@@ -594,7 +791,7 @@ export class Node extends VisualElement
      * Returns a list of all output connections
      * @returns {Connection[]}
      */
-    all_connections()
+    output_connections()
     {
         return Object.values(this.outputs)
             .map(c => c.connections)
@@ -680,29 +877,37 @@ export class NodeType
 export class ContextMenu extends VisualElement
 {
     /**
+     * @param {Editor} editor
      * @param {object|NodeType[]} actions If an object,
      * keys will be items in the menu while values are the performed actions.
      * Possible values are callbacks, NodeType instances (which will create new nodes),
      * Or other actions definitions for submenus
      */
-    constructor(actions)
+    constructor(editor, actions)
     {
         super();
+        this.editor = editor;
         this.actions = actions;
     }
 
-    to_dom(editor)
+    to_dom()
     {
-        this.dom = this.make_menu("dgl-menu", this.actions, editor);
-        this.dom.style.display = "none";
+        this.dom = this.build();
         return this.dom;
     }
 
-    make_action(title, action, editor)
+    build()
+    {
+        let dom = this.make_menu("dgl-menu", this.actions);
+        dom.style.display = "none";
+        return dom;
+    }
+
+    make_action(title, action)
     {
         let onclick = action;
         if ( action instanceof NodeType )
-            onclick = () => editor.create_node(action);
+            onclick = () => this.editor.create_node(action);
 
         let item = document.createElement("li");
         item.classList.add("dgl-menu-item");
@@ -717,7 +922,7 @@ export class ContextMenu extends VisualElement
         return item;
     }
 
-    make_menu(cls, actions, editor)
+    make_menu(cls, actions)
     {
         let dom = document.createElement("ul");
         dom.classList.add(cls);
@@ -726,7 +931,7 @@ export class ContextMenu extends VisualElement
         {
             for ( let action of actions )
             {
-                dom.appendChild(this.make_action(action.name, action, editor));
+                dom.appendChild(this.make_action(action.name, action));
             }
         }
         else
@@ -734,7 +939,7 @@ export class ContextMenu extends VisualElement
             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));
+                    dom.appendChild(this.make_submenu(name, val));
                 else
                     dom.appendChild(this.make_action(name, val));
             }
@@ -742,14 +947,14 @@ export class ContextMenu extends VisualElement
         return dom;
     }
 
-    make_submenu(name, actions, editor)
+    make_submenu(name, actions)
     {
         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));
+        item.appendChild(this.make_menu("dgl-submenu", actions));
         return item;
     }
 
@@ -772,6 +977,18 @@ export class ContextMenu extends VisualElement
     {
         this.dom.style.display = "none";
     }
+
+    /**
+     * Rebuilds the DOM element
+     */
+    rebuild(editor)
+    {
+        let parent = this.dom.parentNode;
+        let old_e = this.dom;
+        let new_e = this.build(editor);
+        parent.replaceChild(new_e, old_e);
+        this.dom = new_e;
+    }
 }
 
 /**
@@ -787,6 +1004,7 @@ export class Editor
     constructor(container, context_menu={})
     {
         this.nodes = [];
+        this.type_registry = {};
 
         this.container = container;
         if ( !container.hasAttribute("tabindex") )
@@ -825,25 +1043,142 @@ export class Editor
         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({
+        this.context_menu = new ContextMenu(this, context_menu);
+        this.node_menu = new ContextMenu(this, {
             "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());
+                    let node = this.create_node(this.selected_node.type, this.selected_node.get_input_data());
                     this._select_node(node);
 
                 }
             }
         });
 
-        this.container.appendChild(this.node_menu.to_dom(this));
-        this.container.appendChild(this.context_menu.to_dom(this));
+        this.container.appendChild(this.node_menu.to_dom());
+        this.container.appendChild(this.context_menu.to_dom());
+    }
+
+    /**
+     * Registers node types for deserialization of graph data
+     * @param {NodeType} type Type to register, you must ensure names are unique.
+     * @param {string}   name Name override in the registry
+     */
+    register_type(type, name=null)
+    {
+        if ( !name )
+            name = type.name;
+        type.registry_name = name;
+        this.type_registry[name] = type;
+        return type;
+    }
+
+    /**
+     * Returns a list of registered node types
+     * @returns {NodeType[]}
+     */
+    registered_types()
+    {
+        return Object.values(this.type_registry);
     }
 
+    /**
+     * Serializes the editor data to a JSON object
+     * Requires all node types to be registered
+     * @returns {object}
+     */
+    toJSON()
+    {
+        let data = {
+            view: {
+                x: this.offset_x,
+                y: this.offset_y,
+                scale: this.scale
+            },
+            nodes: [],
+            connections: [],
+        };
+
+
+        for ( let i = 0; i < this.nodes.length; i++ )
+        {
+            this.nodes[i]._json_index = i;
+        }
+
+        for ( let node of this.nodes )
+        {
+            let node_data = {
+                index: node._json_index,
+                type: node.type.registry_name || node.type.name,
+                title: node.title,
+                x: node.x,
+                y: node.y,
+                inputs: {},
+            };
+
+            for ( let [name, input] of Object.entries(node.inputs) )
+            {
+                if ( input.control )
+                    node_data.inputs[name] = input.control.serialize_value(input.control.get_value());
+            }
+
+            for ( let conn of node.output_connections() )
+            {
+                data.connections.push([
+                    conn.output.node._json_index,
+                    conn.output.name,
+                    conn.input.node._json_index,
+                    conn.input.name
+                ]);
+            }
+
+            data.nodes.push(node_data);
+        }
+
+        return data;
+    }
+
+    /**
+     * Loads editor data from JSON
+     * Requires all node types to be registered
+     * @param {object} data Editor data as returned from toJSON
+     */
+    from_json(data)
+    {
+        this.clear();
+
+        this.offset_x = data.view.x;
+        this.offset_y = data.view.y;
+        this.scale = data.view.scale;
+        this._apply_transform();
+
+        for ( let node_data of data.nodes )
+        {
+            let node = this.type_registry[node_data.type].create_node();
+            node.title = node_data.title;
+            node.x = node_data.x;
+            node.y = node_data.y;
+            this.add_node(node);
+            for ( let [name, input] of Object.entries(node.inputs) )
+            {
+                let val = node_data.inputs[name];
+                if ( val !== undefined && input.control )
+                {
+                    input.set_value(input.control.deserialize_value(val));
+                }
+            }
+        }
+
+        for ( let [oind, oname, iind, iname] of data.connections )
+        {
+            this._create_connection(this.nodes[oind], oname, this.nodes[iind], iname);
+        }
+
+        this._refresh_graph();
+    }
 
     /**
      * Adds a new node to the graph
@@ -851,8 +1186,6 @@ export class Editor
      */
     add_node(node)
     {
-        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);
@@ -864,11 +1197,30 @@ export class Editor
         {
             if ( input.control )
             {
-                input.control.addEventListener("change", () => this._refresh_graph());
+                input.control.on_change = () => {
+                    node.dirty = true;
+                    this._refresh_graph();
+                };
             }
         }
     }
 
+    /**
+     * Removes all nodes from the graph
+     */
+    clear()
+    {
+        for ( let node of this.nodes )
+        {
+            for ( let conn of node.all_connections() )
+                conn.destroy();
+            node.destroy();
+        }
+        this.nodes = [];
+        this.reset_view();
+        this._refresh_graph();
+    }
+
     /**
      * Removes a node from the graph
      * @param {Node} node
@@ -895,8 +1247,11 @@ export class Editor
     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.add_node(node);
+        node.set_input_data(data);
+        this._refresh_graph();
         return node;
     }
 
@@ -1000,6 +1355,17 @@ export class Editor
         this.fit_view();
     }
 
+    /**
+     * Clears scale and offset
+     */
+    reset_view()
+    {
+        this.offset_x = 0;
+        this.offset_y = 0;
+        this.scale = 1;
+        this._apply_transform();
+    }
+
     /**
      * Pan and zoom to fit all the nodes
      * @param {number} margin Margin to leave around the area
@@ -1007,28 +1373,38 @@ export class Editor
     fit_view(margin=20)
     {
         if ( this.nodes.length == 0 )
+        {
+            this.reset_view();
             return;
+        }
 
         let left = Infinity;
         let right = -Infinity;
         let top = Infinity;
         let bottom = -Infinity;
 
+        let crect = this.container.getBoundingClientRect();
+
         for ( let node of this.nodes )
         {
-            let rect = node.dom.getBoundingClientRect();
+            let client_rect = node.dom.getBoundingClientRect();
+
+            let rect = {};
+            rect.left = node.x;
+            rect.right = node.x + client_rect.width / this.scale;
+            rect.top = node.y;
+            rect.bottom = node.y + client_rect.height / this.scale;
+
             if ( rect.left < left ) left = rect.left;
             if ( rect.right > right ) right = rect.right;
             if ( rect.top < top ) top = rect.top;
             if ( rect.bottom > bottom ) bottom = rect.bottom;
         }
 
-        let crect = this.container.getBoundingClientRect();
-
-        left += -margin - crect.left;
-        right += margin - crect.left;
-        top += -margin - crect.top;
-        bottom += margin - crect.top;
+        left += -margin;
+        right += margin;
+        top += -margin;
+        bottom += margin;
 
         let width = right - left;
         let height = bottom - top;
@@ -1037,12 +1413,25 @@ export class Editor
         let scale = Math.min(x_scale, y_scale);
         this.scale = scale;
 
-        this.offset_x = (crect.width - width * scale) / 2 - left + margin;
-        this.offset_y = (crect.height - height * scale) / 2 - top + margin;
+        this.offset_x = (crect.width - width * scale) / 2 - left * scale;
+        this.offset_y = (crect.height - height * scale) / 2 - top * scale;
         this._apply_transform();
 
     }
 
+    _create_connection(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);
+        }
+        return conn;
+    }
+
     /**
      * Adds a connection to the graph
      * @param {Node}    output_node Node the connection is coming from
@@ -1053,13 +1442,9 @@ export class Editor
      */
     connect(output_node, output_name, input_node, input_name)
     {
-        let conn = output_node.connect(output_name, input_node, input_name);
+        let conn = this._create_connection(output_node, 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();
         }
@@ -1183,6 +1568,14 @@ export class Editor
         this.area.style.transform = `translate(${this.offset_x}px, ${this.offset_y}px) scale(${this.scale})`;
     }
 
+    /**
+     * Re-evaluates all the nodes
+     */
+    update()
+    {
+        this._refresh_graph();
+    }
+
     _refresh_graph()
     {
         for ( let node of this.nodes )