dragon-graph-lib 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dragon-graph-lib",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "description": "JS Library to create node-based editors",
     "homepage": "https://gitlab.com/mattbas/dragon-graph-lib",
     "bugs": {

package/src/dragon-graph-lib-global.js

@@ -205,11 +205,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
@@ -265,13 +260,10 @@ 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;
     }
@@ -288,7 +280,7 @@ class NodeInput extends Connector
         this.connections.push(connection);
 
         if ( this.control )
-            this.control.style.visibility = "hidden";
+            this.control.hide();
     }
 
     /**
@@ -299,7 +291,7 @@ class NodeInput extends Connector
     {
         if ( this.control )
         {
-            this.control.value = value;
+            this.control.set_value(value);
         }
     }
 
@@ -330,7 +322,7 @@ class NodeInput extends Connector
             return null;
         }
 
-        let value = this.control.value
+        let value = this.control.get_value();
         if ( this.socket && this.socket.multi_input )
             return [value];
         return value;
@@ -340,7 +332,7 @@ class NodeInput extends Connector
     {
         super.disconnect(connection);
         if ( this.control && this.connections.length == 0 )
-            this.control.style.visibility = "visible";
+            this.control.show();
     }
 }
 
@@ -402,7 +394,7 @@ class NodeOutput extends Connector
      */
     get_value()
     {
-        if ( this.value == undefined )
+        if ( this.value === undefined || this.node.dirty )
             this.node.evaluate();
         return this.value;
     }
@@ -415,23 +407,199 @@ 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
  */
-function NodeControl(type, attrs={})
+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");
+    }
+}
+
+/**
+ * Control for simple input elements
+ */
+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;
+        return this.input.value;
+    }
+
+    set_value(value)
+    {
+        if ( this.config.type == "checkbox" )
+            this.input.checked = value;
+        else
+            this.input.value = value;
+    }
+}
+
+/**
+ * Drop-down Control
+ */
+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;
+    }
 }
 
 /**
@@ -473,6 +641,7 @@ class Node extends VisualElement
          * @member {number}
          */
         this.y = 0;
+        this.dirty = true;
     }
 
     /**
@@ -575,6 +744,7 @@ class Node extends VisualElement
 
     evaluate()
     {
+        this.dirty = false;
         if ( this.type )
             this.type.evaluate_node(this);
     }
@@ -694,11 +864,17 @@ class ContextMenu extends VisualElement
 
     to_dom(editor)
     {
-        this.dom = this.make_menu("dgl-menu", this.actions, editor);
-        this.dom.style.display = "none";
+        this.dom = this.build(editor);
         return this.dom;
     }
 
+    build(editor)
+    {
+        let dom = this.make_menu("dgl-menu", this.actions, editor);
+        dom.style.display = "none";
+        return dom;
+    }
+
     make_action(title, action, editor)
     {
         let onclick = action;
@@ -773,6 +949,18 @@ 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;
+    }
 }
 
 /**
@@ -845,7 +1033,6 @@ class Editor
         this.container.appendChild(this.context_menu.to_dom(this));
     }
 
-
     /**
      * Adds a new node to the graph
      * @param {Node} node
@@ -865,7 +1052,10 @@ class Editor
         {
             if ( input.control )
             {
-                input.control.addEventListener("change", () => this._refresh_graph());
+                input.control.on_change = () => {
+                    node.dirty = true;
+                    this._refresh_graph();
+                };
             }
         }
     }
@@ -896,8 +1086,9 @@ class Editor
     create_node(type, data={})
     {
         let node = type.create_node();
-        node.set_input_value(data);
         this.add_node(node);
+        node.set_input_value(data);
+        this._refresh_graph();
         return node;
     }
 
@@ -1333,6 +1524,8 @@ Connection,
 NodeInput,
 NodeOutput,
 NodeControl,
+InputControl,
+DropDownControl,
 Node,
 NodeType,
 ContextMenu,

package/src/dragon-graph-lib.css

@@ -51,7 +51,7 @@
     width: fit-content;
     display: flex;
     flex-flow: column;
-    gap: 12px;
+    gap: var(--dgl-node-padding);
     cursor: pointer;
     user-select: none;
     border: 1px solid var(--dgl-node-text);
@@ -80,6 +80,7 @@
     stroke-width: var( --dgl-connection-width);
     fill: none;
 }
+
 .dgl-preview {
     max-width: 20ch;
 }
@@ -100,6 +101,10 @@
     position: relative;
 }
 
+.dgl-input-label {
+    margin-right: var(--dgl-node-padding);
+}
+
 .dgl-output {
     justify-content: end;
     left: calc(var(--dgl-node-padding) + var(--dgl-socket-size) / 2);

package/src/dragon-graph-lib.js

@@ -204,11 +204,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
@@ -264,13 +259,10 @@ 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;
     }
@@ -287,7 +279,7 @@ export class NodeInput extends Connector
         this.connections.push(connection);
 
         if ( this.control )
-            this.control.style.visibility = "hidden";
+            this.control.hide();
     }
 
     /**
@@ -298,7 +290,7 @@ export class NodeInput extends Connector
     {
         if ( this.control )
         {
-            this.control.value = value;
+            this.control.set_value(value);
         }
     }
 
@@ -329,7 +321,7 @@ export class NodeInput extends Connector
             return null;
         }
 
-        let value = this.control.value
+        let value = this.control.get_value();
         if ( this.socket && this.socket.multi_input )
             return [value];
         return value;
@@ -339,7 +331,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 +393,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 +406,199 @@ 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");
+    }
+}
+
+/**
+ * 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;
+        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,6 +640,7 @@ export class Node extends VisualElement
          * @member {number}
          */
         this.y = 0;
+        this.dirty = true;
     }
 
     /**
@@ -574,6 +743,7 @@ export class Node extends VisualElement
 
     evaluate()
     {
+        this.dirty = false;
         if ( this.type )
             this.type.evaluate_node(this);
     }
@@ -693,11 +863,17 @@ export class ContextMenu extends VisualElement
 
     to_dom(editor)
     {
-        this.dom = this.make_menu("dgl-menu", this.actions, editor);
-        this.dom.style.display = "none";
+        this.dom = this.build(editor);
         return this.dom;
     }
 
+    build(editor)
+    {
+        let dom = this.make_menu("dgl-menu", this.actions, editor);
+        dom.style.display = "none";
+        return dom;
+    }
+
     make_action(title, action, editor)
     {
         let onclick = action;
@@ -772,6 +948,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;
+    }
 }
 
 /**
@@ -844,7 +1032,6 @@ export class Editor
         this.container.appendChild(this.context_menu.to_dom(this));
     }
 
-
     /**
      * Adds a new node to the graph
      * @param {Node} node
@@ -864,7 +1051,10 @@ export class Editor
         {
             if ( input.control )
             {
-                input.control.addEventListener("change", () => this._refresh_graph());
+                input.control.on_change = () => {
+                    node.dirty = true;
+                    this._refresh_graph();
+                };
             }
         }
     }
@@ -895,8 +1085,9 @@ export class Editor
     create_node(type, data={})
     {
         let node = type.create_node();
-        node.set_input_value(data);
         this.add_node(node);
+        node.set_input_value(data);
+        this._refresh_graph();
         return node;
     }