merge non-gss label centering #3 and #24

flowhub · Nov 20, 2013 · 3eca391 · 3eca391
2 parents e73b142 + 802893c
commit 3eca391
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 47 deletions.
diff --git a/bower.json b/bower.json
@@ -9,7 +9,6 @@
   "dependencies": {
     "polymer": "0.0.20131107",
     "the-behavior": "*",
-    "gss": "git://github.com/the-gss/gss.git#gh-pages",
     "font-awesome": "~4.0.3"
   },
   "license": "MIT",

diff --git a/the-graph-editor/index.html b/the-graph-editor/index.html
@@ -4,15 +4,9 @@
     <title>Graph Editor</title>
     <meta charset="utf-8">
     <script src="../bower_components/polymer/polymer.min.js"></script>
-    <script>
-      window.GSS_CONFIG = {
-        workerURL: '../bower_components/gss/browser/gss-solver.min.js'
-      };
-    </script>
 
-    <script src="../bower_components/gss/browser/gss.js"></script>
     <!-- <link rel="import" href="../bower_components/the-behavior/the-behaviors/the-behaviors.html"> -->
-    <!--<link rel="import" href="../bower_components/the-behavior/the-pointer-trail/the-pointer-trail.html">-->
+    <!-- <link rel="import" href="../bower_components/the-behavior/the-pointer-trail/the-pointer-trail.html"> -->
 
     <link rel="import" href="the-graph-editor.html">
     <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
@@ -39,14 +33,6 @@
       <img src="loading.gif"/>
       <div id="loading-message">loading custom elements...</div>
     </div>
-
-    <style type="text/gss">
-      /* Ensure nodes are square and of touchable size */
-      [node-width] == 70 * [zoom];
-      /* Center process label */
-      .the-graph-process-label[left] == [node-width]/2 - .the-graph-process-label[intrinsic-width]/2;
-      .the-graph-process-component[left] == [node-width]/2 - .the-graph-process-component[intrinsic-width]/2;
-    </style>
     <script type="text/javascript">
       Polymer.veiledElements = ["the-graph-editor"];
       window.addEventListener('WebComponentsReady', function() {

diff --git a/the-graph-process/the-graph-process.html b/the-graph-process/the-graph-process.html
@@ -3,10 +3,17 @@
 <polymer-element name="the-graph-process" attributes="label position component process highlight icon" lightdom>
 
   <template>
-    <h1 class="the-graph-process-label">{{label}}</h1>
-    <template if="{{ label != component }}">
-    <h2 class="the-graph-process-component">{{component}}</h2>
-    </template>
+    <div class="the-graph-process-label">
+      <h1>{{label}}</h1>
+      <h2>
+        <template if="{{ label != component }}">
+        {{component}}
+        </template>
+        <template if="{{ label == component }}">
+        &nbsp;
+        </template>
+      </h2>
+    </div>
     <i class="icon fa fa-{{icon}}"></i>
     <the-graph-inports id="inports">
       <template repeat="{{port in inports}}">
@@ -313,6 +320,10 @@ <h2 class="the-graph-process-component">{{component}}</h2>
         ports.forEach(function(port){
           port.graphZoom();
         }.bind(this));
+
+        // Update label
+        var label = this.getElementsByClassName('the-graph-process-label')[0];
+        label.style.left = Math.round(diameter / 2 - label.clientWidth / 2) + 'px';
       },
       getPosition: function () {
         // return this._position;

diff --git a/the-graph/the-graph.html b/the-graph/the-graph.html
@@ -88,11 +88,6 @@
         this.scalePanD = { x: 0, y: 0 };
       },
       enteredView: function () {
-        /*
-        document.addEventListener('solved', function (data) {
-          console.log(data.detail.values);
-        });
-        */
         this.addEventListener('moved', function () {
           this.fire('changed', this);
         }.bind(this));
@@ -218,11 +213,6 @@
         }
         this.observe();
 
-        // Handle passing zoom value to the GSS engine for node rescaling
-        this.engine = GSS.engines[0];
-        this.engine.registerCommand(["suggest", ["get","[zoom]"], this.zoom]);
-        this.engine.solve();
-
         // Used to limit panning
         this.addEventListener('moved', this.calcMinMax.bind(this));
 
@@ -497,7 +487,6 @@
       },
       graphChanged: function () {
         this.observe();
-        GSS.unobserve();
         this.graphId = this.graph.id;
         this.nodes = [];
         this.edges = [];
@@ -557,7 +546,6 @@
         // Used to limit panning
         this.calcMinMax();
         this.updateGridBg();
-        GSS.observe();
       },
       gridChanged: function () {
         var processes = this.$.nodes.getProcesses();

diff --git a/themes/default/the-graph.css b/themes/default/the-graph.css
@@ -196,31 +196,28 @@ the-graph-process.highlight i.icon, the-graph-subgraph.highlight i.icon {
   margin-top: -10px;
   margin-left: -8px;
 }
-the-graph-process h1, the-graph-subgraph h1, the-graph-export h1 {
-  display: block;
+the-graph-process .the-graph-process-label {
   position: absolute;
-  bottom: -27px;
-  left: 0;
+  bottom: -34px;
+  left: 0px;
+  text-align: center;
+}
+the-graph-process h1, the-graph-subgraph h1, the-graph-export h1 {
+  display: inline;
   font-size: 12px;
   color: white;
   font-weight: lighter;
-  padding: 2px 0;
+  padding: 2px;
+  margin: 0px;
   background-color: rgba(0,0,0, 0.35);
   border-radius: 3px;
-
-  /*
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-  */
 }
 the-graph-process h2, the-graph-subgraph h2, the-graph-export h2 {
   display: block;
-  position: absolute;
-  bottom: -42px;
-  left: 0;
   font-size: 8px;
+  margin: 0px;
+  margin-top: 2px;
+  padding: 0px;
   color: hsl(189, 11%, 26%);
   font-weight: lighter;
   text-transform: uppercase;