Make snap configurable property of graph editor

flowhub · Aug 29, 2016 · 45c8619 · 45c8619
1 parent 373b0d7
commit 45c8619
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git a/the-graph-editor/the-graph-editor.html b/the-graph-editor/the-graph-editor.html
@@ -6,6 +6,8 @@
       name="{{ graph.properties.name }}"
       graph="{{nofloGraph}}"
       menus="{{menus}}"
+      grid="{{grid}}"
+      snap="{{snap}}"
       width="{{width}}" height="{{height}}"
       pan="{{pan}}" scale="{{scale}}"
       autolayout="{{autolayout}}"

diff --git a/the-graph/the-graph-app.js b/the-graph/the-graph-app.js
@@ -88,6 +88,12 @@
         offsetX: this.props.offsetX
       };
     },
+    getDefaultProps: function () {
+      return {
+        snap: TheGraph.config.nodeSize / 2,
+        grid: TheGraph.config.nodeSize
+      };
+    },
     zoomFactor: 0,
     zoomX: 0,
     zoomY: 0,
@@ -477,7 +483,7 @@
 
       // Background grid pattern
       var scale = this.state.scale;
-      var g = TheGraph.config.nodeSize * scale;
+      var g = this.props.grid * scale;
 
       var dx = this.state.x % g;
       var dy = this.state.y % g;
@@ -566,6 +572,8 @@
       var graphElementOptions = {
         graph: this.props.graph,
         scale: this.state.scale,
+        grid: this.props.grid,
+        snap: this.props.snap,
         app: this,
         library: this.props.library,
         onNodeSelection: this.props.onNodeSelection,

diff --git a/the-graph/the-graph-graph.js b/the-graph/the-graph-graph.js
@@ -194,7 +194,7 @@
           });
         } else {
           // Snap to grid
-          var snap = TheGraph.config.nodeHeight / 2;
+          var snap = this.props.snap;
           graph.setNodeMetadata(node.id, {
             x: Math.round(node.metadata.x/snap) * snap,
             y: Math.round(node.metadata.y/snap) * snap
@@ -465,6 +465,7 @@
           y: node.metadata.y,
           label: node.metadata.label,
           sublabel: node.metadata.sublabel || node.component,
+          snap: self.props.snap,
           width: node.metadata.width,
           height: node.metadata.height,
           app: self.props.app,

diff --git a/the-graph/the-graph-node.js b/the-graph/the-graph-node.js
@@ -183,7 +183,7 @@
 
       // Snap to grid
       var snapToGrid = true;
-      var snap = TheGraph.config.node.snap / 2;
+      var snap = this.props.snap || TheGraph.config.node.snap / 2;
       if (snapToGrid) {
         var x, y;
         if (this.props.export) {

diff --git a/the-graph/the-graph.html b/the-graph/the-graph.html
@@ -1,4 +1,4 @@
-<polymer-element name="the-graph" attributes="graph menus library width height autolayout theme selectedNodes errorNodes selectedEdges animatedEdges getMenuDef pan scale maxZoom minZoom displaySelectionGroup forceSelection offsetY offsetX" touch-action="none">
+<polymer-element name="the-graph" attributes="graph menus library snap width height autolayout theme selectedNodes errorNodes selectedEdges animatedEdges getMenuDef pan scale maxZoom minZoom displaySelectionGroup forceSelection offsetY offsetX" touch-action="none">
 
 
   <template>
@@ -66,6 +66,9 @@
       ready: function () {
         this.themeChanged();
       },
+      snapChanged: function () {
+        this.appView
+      },
       themeChanged: function () {
         this.$.svgcontainer.className = "the-graph-"+this.theme;
       },
@@ -98,6 +101,8 @@
         this.appView = ReactDOM.render(
           window.TheGraph.App({
             graph: this.graph,
+            grid: this.grid,
+            snap: this.snap,
             width: this.width,
             minZoom: this.minZoom,
             maxZoom: this.maxZoom,