dragon-graph-lib 0.1.3 → 0.1.4

package/package.json

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

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

@@ -15,16 +15,14 @@ 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();
     }
 
@@ -238,8 +236,9 @@ 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);
         /**
@@ -247,6 +246,11 @@ class NodeInput extends Connector
          * @member {HTMLInputElement?}
          */
         this.control = control;
+        /**
+         * Whether this input accepts multiple incoming connections
+         * @member {boolean}
+         */
+        this.multiple = multiple;
     }
 
     build_dom()
@@ -270,7 +274,7 @@ class NodeInput extends Connector
 
     connect(connection)
     {
-        if ( !this.socket.multi_input )
+        if ( !this.multiple )
         {
             for ( let conn of this.connections )
                 conn.disconnect();
@@ -301,7 +305,7 @@ 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}
@@ -310,20 +314,20 @@ 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.get_value();
-        if ( this.socket && this.socket.multi_input )
+        if ( this.socket && this.multiple )
             return [value];
         return value;
     }
@@ -512,6 +516,26 @@ class NodeControl
     {
         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;
+    }
 }
 
 /**
@@ -547,6 +571,8 @@ class InputControl extends NodeControl
     {
         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;
     }
 
@@ -648,7 +674,7 @@ class Node extends VisualElement
      * 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) )
         {
@@ -661,7 +687,7 @@ 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) )
@@ -695,10 +721,11 @@ 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);
     }
 
     /**
@@ -765,7 +792,7 @@ 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)
@@ -851,35 +878,37 @@ class NodeType
 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.build(editor);
+        this.dom = this.build();
         return this.dom;
     }
 
-    build(editor)
+    build()
     {
-        let dom = this.make_menu("dgl-menu", this.actions, editor);
+        let dom = this.make_menu("dgl-menu", this.actions);
         dom.style.display = "none";
         return dom;
     }
 
-    make_action(title, action, editor)
+    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");
@@ -894,7 +923,7 @@ class ContextMenu extends VisualElement
         return item;
     }
 
-    make_menu(cls, actions, editor)
+    make_menu(cls, actions)
     {
         let dom = document.createElement("ul");
         dom.classList.add(cls);
@@ -903,7 +932,7 @@ 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
@@ -911,7 +940,7 @@ 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));
             }
@@ -919,14 +948,14 @@ 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;
     }
 
@@ -976,6 +1005,7 @@ class Editor
     constructor(container, context_menu={})
     {
         this.nodes = [];
+        this.type_registry = {};
 
         this.container = container;
         if ( !container.hasAttribute("tabindex") )
@@ -1014,23 +1044,141 @@ 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();
     }
 
     /**
@@ -1039,8 +1187,6 @@ 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);
@@ -1060,6 +1206,22 @@ class Editor
         }
     }
 
+    /**
+     * 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
@@ -1086,8 +1248,10 @@ class Editor
     create_node(type, data={})
     {
         let node = type.create_node();
+        node.x = this.cursor_x;
+        node.y = this.cursor_y;
         this.add_node(node);
-        node.set_input_value(data);
+        node.set_input_data(data);
         this._refresh_graph();
         return node;
     }
@@ -1192,6 +1356,17 @@ 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
@@ -1199,28 +1374,38 @@ 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;
@@ -1229,12 +1414,25 @@ 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
@@ -1245,13 +1443,9 @@ 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();
         }
@@ -1375,6 +1569,14 @@ 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 )

package/src/dragon-graph-lib.css

@@ -59,7 +59,7 @@
 }
 
 .dgl-socket:hover {
-     outline: 3px solid var(--dgl-node-text);
+    outline: 3px solid var(--dgl-node-text);
     border-width: 10px;
 }
 
@@ -74,6 +74,8 @@
 .dgl-connection {
     overflow: visible;
     position: absolute;
+    left: 0;
+    right: 0;
 }
 .dgl-connection path {
     stroke: var(--dgl-connection-color);
@@ -81,10 +83,6 @@
     fill: none;
 }
 
-.dgl-preview {
-    max-width: 20ch;
-}
-
 .dgl-title {
     font-weight: bold;
     border-bottom: 1px solid var(--dgl-node-text);

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();
     }
 
@@ -237,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);
         /**
@@ -246,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()
@@ -269,7 +273,7 @@ export class NodeInput extends Connector
 
     connect(connection)
     {
-        if ( !this.socket.multi_input )
+        if ( !this.multiple )
         {
             for ( let conn of this.connections )
                 conn.disconnect();
@@ -300,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}
@@ -309,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.get_value();
-        if ( this.socket && this.socket.multi_input )
+        if ( this.socket && this.multiple )
             return [value];
         return value;
     }
@@ -511,6 +515,26 @@ export class NodeControl
     {
         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;
+    }
 }
 
 /**
@@ -546,6 +570,8 @@ export class InputControl extends NodeControl
     {
         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;
     }
 
@@ -647,7 +673,7 @@ export class Node extends VisualElement
      * 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) )
         {
@@ -660,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) )
@@ -694,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);
     }
 
     /**
@@ -764,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)
@@ -850,35 +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.build(editor);
+        this.dom = this.build();
         return this.dom;
     }
 
-    build(editor)
+    build()
     {
-        let dom = this.make_menu("dgl-menu", this.actions, editor);
+        let dom = this.make_menu("dgl-menu", this.actions);
         dom.style.display = "none";
         return dom;
     }
 
-    make_action(title, action, editor)
+    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");
@@ -893,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);
@@ -902,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
@@ -910,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));
             }
@@ -918,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;
     }
 
@@ -975,6 +1004,7 @@ export class Editor
     constructor(container, context_menu={})
     {
         this.nodes = [];
+        this.type_registry = {};
 
         this.container = container;
         if ( !container.hasAttribute("tabindex") )
@@ -1013,23 +1043,141 @@ 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();
     }
 
     /**
@@ -1038,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);
@@ -1059,6 +1205,22 @@ export class Editor
         }
     }
 
+    /**
+     * 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
@@ -1085,8 +1247,10 @@ export class Editor
     create_node(type, data={})
     {
         let node = type.create_node();
+        node.x = this.cursor_x;
+        node.y = this.cursor_y;
         this.add_node(node);
-        node.set_input_value(data);
+        node.set_input_data(data);
         this._refresh_graph();
         return node;
     }
@@ -1191,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
@@ -1198,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;
@@ -1228,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
@@ -1244,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();
         }
@@ -1374,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 )