graph-editor: add displaySelectionGroup property

v13inc · Sep 9, 2014 · 7dd4a19 · 7dd4a19
1 parent 9c5df51
commit 7dd4a19
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/the-graph-editor/the-graph-editor.html b/the-graph-editor/the-graph-editor.html
@@ -1,6 +1,6 @@
 <link rel="import" href="../the-graph/the-graph.html">
 
-<polymer-element name="the-graph-editor" attributes="grid snap width height autolayout theme selectedNodes errorNodes selectedEdges animatedEdges onContextMenu" touch-action="none">
+<polymer-element name="the-graph-editor" attributes="grid snap width height autolayout theme selectedNodes errorNodes selectedEdges animatedEdges onContextMenu displaySelectionGroup" touch-action="none">
   <template>
     <the-graph id="graph"
       name="{{ graph.properties.name }}"
@@ -14,6 +14,7 @@
       errorNodes="{{errorNodes}}"
       selectedEdges="{{selectedEdges}}"
       animatedEdges="{{animatedEdges}}"
+      displaySelectionGroup="{{displaySelectionGroup}}"
       getMenuDef="{{getMenuDef}}">
     </the-graph>
   </template>
@@ -37,6 +38,7 @@
       errorNodes: {},
       selectedEdges: [],
       animatedEdges: [],
+      displaySelectionGroup: true,
       created: function () {
         // Default pan
         this.pan = [0,0];

diff --git a/the-graph/the-graph-graph.js b/the-graph/the-graph-graph.js
@@ -85,6 +85,7 @@
     getInitialState: function() {
       return {
         graph: this.props.graph,
+        displaySelectionGroup: true,
         edgePreview: null,
         edgePreviewX: 0,
         edgePreviewY: 0,
@@ -724,7 +725,8 @@
       });
 
       // Selection pseudo-group
-      if (selectedIds.length >= 2) {
+      if (this.state.displaySelectionGroup &&
+          selectedIds.length >= 2) {
         var limits = TheGraph.findMinMax(graph, selectedIds);
         if (limits) {
           var pseudoGroup = {

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" touch-action="none">
+<polymer-element name="the-graph" attributes="graph menus library width height autolayout theme selectedNodes errorNodes selectedEdges animatedEdges getMenuDef pan scale displaySelectionGroup" touch-action="none">
 
   <template>
     <link rel="stylesheet" href="../themes/the-graph-dark.css">
@@ -45,6 +45,7 @@
       selectedEdges: [],
       animatedEdges: [],
       autolayouter: null,
+      displaySelectionGroup: true,
       created: function () {
         this.library = {};
         // Default pan
@@ -98,7 +99,8 @@
             onEdgeSelection: this.onEdgeSelection.bind(this),
             onNodeSelection: this.onNodeSelection.bind(this),
             onPanScale: this.onPanScale.bind(this),
-            getMenuDef: this.getMenuDef
+            getMenuDef: this.getMenuDef,
+            displaySelectionGroup: this.displaySelectionGroup
           }),
           this.$.svgcontainer
         );
@@ -329,6 +331,12 @@
         }
         return this.appView.state.scale;
       },
+      displaySelectionGroupChanged: function () {
+        if (!this.graphView) { return; }
+        this.graphView.setState({
+          displaySelectionGroup: this.displaySelectionGroup
+        });
+      },
       menusChanged: function () {
         // Only if the object itself changes, 
         // otherwise builds menu from reference every time menu shown