performance updates and readonly mode

Author: ellthompson

src/components/Graph/graph-view-edge.js

@@ -1,11 +1,11 @@
-import { ContextMenu } from '../../pcui';
+import { ContextMenu } from '../../pcui-external';
 import * as joint from 'jointjs';
 
 import sourceMarkerDefaultImage from '../../assets/source-marker-default.png';
 import sourceMarkerActiveImage from '../../assets/source-marker-active.png';
 import sourceMarkerDeactiveImage from '../../assets/source-marker-deactive.png';
 
-joint.connectors.smoothInOut = function(sourcePoint, targetPoint, vertices, args) {
+joint.connectors.smoothInOut = function (sourcePoint, targetPoint, vertices, args) {
     var p1 = sourcePoint.clone();
     p1.offset(30, 0);
 
@@ -15,7 +15,7 @@ joint.connectors.smoothInOut = function(sourcePoint, targetPoint, vertices, args
     var path = new joint.g.Path(joint.g.Path.createSegment('M', sourcePoint));
     path.appendSegment(joint.g.Path.createSegment('C', p1, p2, targetPoint));
     return path;
-}
+};
 
 class GraphViewEdge {
     constructor(graphView, paper, graph, graphSchema, edgeData, edgeSchema, onEdgeSelected) {
@@ -46,12 +46,23 @@ class GraphViewEdge {
         } else {
             link.target(targetNode.model);
         }
-        this._graph.addCell(link);
-        link.toBack();
 
-        this._paper.findViewByModel(link).on('cell:pointerdown', function () {
-            onEdgeSelected(edgeData);
-        });
+        var onCellMountedToDom = () => {
+            this._paper.findViewByModel(link).on('cell:pointerdown', function () {
+                onEdgeSelected(edgeData);
+            });
+            if (edgeData && Number.isFinite(edgeData.inPort)) {
+                this._graphView.updatePortStatesForEdge(link, true);
+            }
+            link.toBack();
+        };
+        if (this._graphView._batchingCells) {
+            this._graphView._cells.push(link);
+            this._graphView._cellMountedFunctions.push(onCellMountedToDom);
+        } else {
+            this._graph.addCell(link);
+            onCellMountedToDom();
+        }
 
         this.model = link;
     }
@@ -95,6 +106,7 @@ class GraphViewEdge {
     }
 
     addContextMenu(items) {
+        if (this._graphView._config.readOnly) return;
         var edgeCell = this._paper.findViewByModel(this.model);
         if (!edgeCell) return;
         var contextMenu = document.createElement('div');

src/components/Graph/graph-view-node.js

@@ -35,7 +35,7 @@ class GraphViewNode {
 
         var labelName;
         if (nodeSchema.outPorts || nodeSchema.inPorts) {
-            labelName = nodeData.attributes && nodeData.attributes.name ? `${nodeSchema.name} (${nodeData.attributes.name})` : nodeSchema.name;
+            labelName = nodeData.attributes && nodeData.attributes.name ? `${nodeData.attributes.name} (${nodeSchema.name})` : nodeSchema.name;
         } else {
             labelName = nodeData.attributes && nodeData.attributes.name || nodeData.name;
         }
@@ -223,10 +223,9 @@ class GraphViewNode {
                 }
             }));
         }
-        this._graph.addCell(rect);
 
+        var containers = [];
         if (nodeSchema.attributes) {
-            const nodeDiv = document.querySelector(`#nodediv_${rect.id}`);
             nodeSchema.attributes.forEach((attribute, i) => {
                 const container = new Container({ class: 'graph-node-container' });
                 const label = new Label({ text: attribute.name, class: 'graph-node-label' });
@@ -276,26 +275,42 @@ class GraphViewNode {
                         input.inputs.forEach(i => i._sliderControl.dom.remove());
                         break;
                 }
+                input.enabled = !this._graphView._config.readOnly;
                 input.dom.setAttribute('id', `input_${attribute.name}`);
                 container.dom.setAttribute('style', `margin-top: ${i === 0 ? 33 + portHeight : 5}px; margin-bottom: 5px;`);
                 container.append(label);
                 container.append(input);
-                nodeDiv.appendChild(container.dom);
+                containers.push(container);
             });
         }
 
-        this._paper.findViewByModel(rect).on('element:pointerdown', () => {
-            if (this._hasLinked) {
-                this._hasLinked = false;
-                return;
-            }
-            onNodeSelected(this.nodeData);
-        });
+        var onCellMountedToDom = () => {
+            var nodeDiv = document.querySelector(`#nodediv_${rect.id}`);
+            containers.forEach(container => {
+                nodeDiv.appendChild(container.dom);
+            });
+            this._paper.findViewByModel(rect).on('element:pointerdown', () => {
+                if (this._hasLinked) {
+                    this._hasLinked = false;
+                    return;
+                }
+                onNodeSelected(this.nodeData);
+            });
+        };
+
+        if (this._graphView._batchingCells) {
+            this._graphView._cells.push(rect);
+            this._graphView._cellMountedFunctions.push(onCellMountedToDom);
+        } else {
+            this._graph.addCell(rect);
+            onCellMountedToDom();
+        }
 
         this.model = rect;
     }
 
     addContextMenu(items) {
+        if (this._graphView._config.readOnly) return;
         var nodeView = this._paper.findViewByModel(this.model);
         var contextMenu = document.createElement('div');
         this._paper.el.appendChild(contextMenu);
@@ -307,20 +322,36 @@ class GraphViewNode {
         });
     }
 
+
+    mapVectorToArray(v) {
+        var arr = [];
+        if (v.x) arr.push(v.x);
+        if (v.y) arr.push(v.y);
+        if (v.z) arr.push(v.z);
+        if (v.w) arr.push(v.w);
+        return arr;
+    }
+
     updateAttribute(attribute, value) {
         if (attribute === 'name') {
             var labelName;
             if (this.nodeSchema.outPorts || this.nodeSchema.inPorts) {
-                labelName = `${this.nodeSchema.name} (${value})`;
+                labelName = `${value} (${this.nodeSchema.name})`;
             } else {
                 labelName = value;
             }
             this.model.attr('label/text', labelName);
         }
         const attributeElement = document.querySelector(`#nodediv_${this.model.id}`).querySelector(`#input_${attribute}`);
         if (attributeElement) {
-            attributeElement.ui.value = value;
+            attributeElement.ui.suspendEvents = true;
+            if (Number.isFinite(value.x)) {
+                attributeElement.ui.value = this.mapVectorToArray(value);
+            } else {
+                attributeElement.ui.value = value;
+            }
             attributeElement.ui.error = false;
+            attributeElement.ui.suspendEvents = false;
         }
     }
 

src/components/Graph/graph-view.js

@@ -29,16 +29,21 @@ class GraphView extends JointGraph {
         this._graphSchema = graphSchema;
         this._graphData = graphData;
 
+        this._config = config;
+
         this._nodes = {};
         this._edges = {};
 
+        this._cells = [];
+        this._cellMountedFunctions = [];
+
         joint.shapes.html = {};
         joint.shapes.html.Element = jointShapeElement();
         joint.shapes.html.ElementView = jointShapeElementView(this._paper);
 
-        this._graph.on('add', (cell) => this.updateNodePort(cell, true));
-        this._graph.on('remove', (cell) => this.updateNodePort(cell, false));
-        this._graph.on('change:target', (cell) => this.updateNodePort(cell, true));
+        // this._graph.on('add', (cell) => this.updatePortStatesForEdge(cell, true));
+        this._graph.on('remove', (cell) => this.updatePortStatesForEdge(cell, false));
+        this._graph.on('change:target', (cell) => this.updatePortStatesForEdge(cell, true));
 
         this._paper.on('cell:mousewheel', () => {
             parent.dom.dispatchEvent(new CustomEvent(GRAPH_ACTIONS.UPDATE_SCALE, { detail: { scale: this._paper.scale().sx } } ));
@@ -130,7 +135,27 @@ class GraphView extends JointGraph {
         });
     }
 
-    updateNodePort(cell, connected) {
+    batchCells() {
+        this._batchingCells = true;
+    }
+
+    isBatchingCells() {
+        return this._batchingCells;
+    }
+
+    addCellMountedFunction(f) {
+        this._cellMountedFunctions.push(f);
+    }
+
+    applyBatchedCells() {
+        this._batchingCells = false;
+        this._graph.addCells(this._cells);
+        this._cellMountedFunctions.forEach(f => f());
+        this._cells = [];
+        this._cellMountedFunctions = [];
+    }
+
+    updatePortStatesForEdge(cell, connected) {
         var source = cell.get('source');
         var target = cell.get('target');
         if (source && source.port && target && target.port) {
@@ -160,15 +185,24 @@ class GraphView extends JointGraph {
     addCanvasContextMenu(items) {
         this._viewContextMenu = document.createElement('div');
         this._paper.el.appendChild(this._viewContextMenu);
-        new ContextMenu({
+        var contextMenu = new ContextMenu({
             dom: this._viewContextMenu,
             items: items
         });
+        window.contextMenu = contextMenu;
+        return contextMenu._contextMenuEvent;
     }
 
     addNodeContextMenu(id, items) {
-        var node = this.getNode(id);
-        node.addContextMenu(items);
+        var addNodeContextMenuFunction = () => {
+            var node = this.getNode(id);
+            node.addContextMenu(items);
+        };
+        if (this._batchingCells) {
+            this._cellMountedFunctions.push(addNodeContextMenuFunction);
+        } else {
+            addNodeContextMenuFunction();
+        }
     }
 
     addEdgeContextMenu(id, items) {
@@ -219,8 +253,15 @@ class GraphView extends JointGraph {
     }
 
     addNodeEvent(id, event, callback, attribute) {
-        var node = this.getNode(id);
-        node.addEvent(event, callback, attribute);
+        var addNodeEventFunction = () => {
+            var node = this.getNode(id);
+            node.addEvent(event, callback, attribute);
+        };
+        if (this._batchingCells) {
+            this._cellMountedFunctions.push(addNodeEventFunction);
+        } else {
+            addNodeEventFunction();
+        }
     }
 
     getEdge(id) {
@@ -275,7 +316,20 @@ class GraphView extends JointGraph {
         delete this._edges[id];
     }
 
+    disableInputEvents() {
+        document.querySelectorAll('.graph-node-input').forEach(input => {
+            input.classList.add('graph-node-input-no-pointer-events');
+        });
+    }
+
+    enableInputEvents() {
+        document.querySelectorAll('.graph-node-input').forEach(input => {
+            input.classList.remove('graph-node-input-no-pointer-events');
+        });
+    }
+
     addUnconnectedEdge(nodeId, edgeType, edgeSchema, validateEdge, onEdgeConnected) {
+        this.disableInputEvents();
         const link = GraphViewEdge.createLink(edgeSchema);
         link.source(this.getNode(nodeId).model);
         link.target(this.getNode(nodeId).model);
@@ -303,11 +357,13 @@ class GraphView extends JointGraph {
             this._graph.removeCells(link);
             document.removeEventListener('mousemove', mouseMoveEvent);
             this._paper.off('cell:pointerdown', cellPointerDownEvent);
+            this.enableInputEvents();
         };
         var mouseDownEvent = () => {
             this._paper.off('cell:pointerdown', cellPointerDownEvent);
             document.removeEventListener('mousemove', mouseMoveEvent);
             this._graph.removeCells(link);
+            this.enableInputEvents();
         };
 
         document.addEventListener('mousemove', mouseMoveEvent);