exports closes flowhub#44

Gruntfile.js

@@ -13,7 +13,8 @@
 
     var jshintOptions = { 
       strict: true,
-      newcap: false 
+      newcap: false,
+      "globals": { "Polymer": true }
     };
 
     this.initConfig({
@@ -67,17 +68,18 @@
       }
     });
 
-    // on watch events configure jshint:all to only run on changed file
+    // Only lint changed file
     // this.event.on('watch', function(action, filepath) {
     //   this.config('jshint.all.src', filepath);
-    // });
+    //   this.config('inlinelint.all.src', filepath);
+    // }.bind(this));
 
     this.loadNpmTasks('grunt-contrib-watch');
     this.loadNpmTasks('grunt-contrib-jshint');
     this.loadNpmTasks('grunt-lint-inline');
     this.loadNpmTasks('grunt-contrib-connect');
 
-    this.registerTask('dev', ['connect:server', 'watch']);
+    this.registerTask('dev', ['test', 'connect:server', 'watch']);
     this.registerTask('test', ['jshint:all', 'inlinelint:all']);
     this.registerTask('default', ['test']);
   };

the-graph-edge/the-graph-edge.html

@@ -122,7 +122,7 @@
       sourceNode: null,
       sourcePort: null,
       enteredView: function () {
-        // Find graph in parents, since the-graph-export has an edge child as well
+        // Find graph in parents, since the-graph-export has an edge child
         var graph = null;
         var parent = this.parentNode;
         while (parent && !graph) {

the-graph-export/the-graph-export.html

@@ -2,8 +2,12 @@
 <link rel="import" href="../the-graph-process/the-graph-process.html">
 <link rel="import" href="../the-graph-edge/the-graph-edge.html">
 
+<polymer-element name="the-graph-export" attributes="private public label route" lightdom>
 
-<polymer-element name="the-graph-export" attributes="private public position label route snap" class="the-graph-node" extends="the-graph-process">
+  <template>
+    <!-- <the-graph-process></the-graph-process> -->
+    <the-graph-edge id="edge" route="{{route}}"></the-graph-edge>
+  </template>
 
   <script>
   /* jshint strict: false */
@@ -13,33 +17,28 @@
     Polymer('the-graph-export', {
       "private": '',
       "public": '',
-      icon: '',
-      component: '',
+      route: 0,
+      nodeEl: null,
       portEl: null,
       privateNodeEl: null,
       privatePortEl: null,
       edgeEl: null,
-      directionalGestureEnabled: false,
       inports: [],
       outports: [],
       ready: function () {
-        this.super();
-
-        var pos = this.getPosition();
-        this._position = [pos.x, pos.y];
-        this.positionChanged();
-        this.graphZoom(this.zoom);
       },
       enteredView: function () {
-        this.super();
+        this.graph = this.parentNode.parentNode;
+
+        this.nodeEl = document.createElement("the-graph-process");
+        this.nodeEl.directionalGestureEnabled = false;
+        this.nodeEl.label = this.public;
+        this.appendChild(this.nodeEl);
+
         this.connect();
       },
       leftView: function () {
-        if (this.edgeEl && this.edgeEl.parentNode) {
-          this.edgeEl.parentNode.removeChild(this.edgeEl);
-        }
       },
-      waitingForLibrary: false,
       connect: function () {
         var pri = this.getPrivate();
         var node = this.graph.getNodeByName( pri.node );
@@ -69,53 +68,40 @@
         this.privatePortEl = inport ? inport : outport;
       },
       isImportChanged: function(){
-        var sourceNode, sourcePort, targetNode, targetPort;
         if (this.isImport) {
           // Imports have one outport
-          // this.inports = [];
-          // this.outports = [{name:"import",type:"all"}];
-          this.portEl = document.createElement("the-graph-port");
-          this.portEl.setAttribute("name", "import");
-          this.portEl.setAttribute("type", "all");
-          this.$.outports.appendChild(this.portEl);
+          this.nodeEl.outports = [{name:"import",type:"all"}];
           // Visual
-          this.icon = 'sign-in';
-          this.component = 'import';
-          // Wire
-          sourceNode = this;
-          sourcePort = this.portEl;
-          targetNode = this.privateNodeEl;
-          targetPort = this.privatePortEl;
+          this.nodeEl.icon = 'sign-in';
+          this.nodeEl.component = 'import';
         } else {
           // Exports have one inport
-          // this.inports = [{name:"export",type:"all"}];
-          // this.outports = [];
-          this.portEl = document.createElement("the-graph-port");
-          this.portEl.setAttribute("name", "export");
-          this.portEl.setAttribute("type", "all");
-          this.$.inports.appendChild(this.portEl);
+          this.nodeEl.inports = [{name:"export",type:"all"}];
           // Visual
-          this.icon = 'sign-out';
-          this.component = 'export';
-          // Wire
-          sourceNode = this.privateNodeEl;
-          sourcePort = this.privatePortEl;
-          targetNode = this;
-          targetPort = this.portEl;
+          this.nodeEl.icon = 'sign-out';
+          this.nodeEl.component = 'export';
         }
-        // TODO make wire
-        this.edgeEl = document.createElement('the-graph-edge');
-        this.edgeEl.sourceNode = sourceNode;
-        this.edgeEl.sourcePort = sourcePort;
-        this.edgeEl.targetNode = targetNode;
-        this.edgeEl.targetPort = targetPort;
-        this.appendChild(this.edgeEl);
-      },
-      inportsChanged: function () {
-        console.log("in", this.inports);
+        // Make wire (timeout since the port is made async)
+        setTimeout(this.makeEdge.bind(this), 0);
       },
-      outportsChanged: function () {
-        console.log("out", this.outports);
+      makeEdge: function () {
+        if (!this.nodeEl || !this.privateNodeEl || !this.privatePortEl) { return; }
+        this.portEl = this.nodeEl.querySelector("the-graph-port");
+        if (!this.portEl) { return; }
+        var sourceNode, sourcePort, targetNode, targetPort;
+        if (this.isImport) {
+          this.$.edge.sourceNode = this.nodeEl;
+          this.$.edge.sourcePort = this.portEl;
+          this.$.edge.targetNode = this.privateNodeEl;
+          this.$.edge.targetPort = this.privatePortEl;
+        } else {
+          this.$.edge.sourceNode = this.privateNodeEl;
+          this.$.edge.sourcePort = this.privatePortEl;
+          this.$.edge.targetNode = this.nodeEl;
+          this.$.edge.targetPort = this.portEl;
+        }
+
+        this.nodeEl.graphZoom(this.graph.zoom);
       },
       getPrivate: function () {
         var split = this.private.split('.');
@@ -128,6 +114,12 @@
         // Don't highlight
         return;
       },
+      getPosition: function () {
+        if (this.nodeEl) {
+          return this.nodeEl.getPosition();
+        }
+        return {x:0,y:0};
+      },
       toJSON: function () {
         var nodePos = this.getPosition();
 

the-graph-exports/the-graph-exports.html

@@ -15,7 +15,7 @@
       graphBumped: function (info) {
         var childNodes = this.getExports();
         childNodes.forEach(function (child) {
-          child.graphPanBumpZoom(info);
+          child.nodeEl.graphPanBumpZoom(info);
         });
       }
     });

the-graph-process/the-graph-process.html

@@ -61,7 +61,18 @@ <h2 class="the-graph-node-subtitle">
         this._position = [pos.x, pos.y];
       },
       enteredView: function () {
-        var graph = this.parentNode.parentNode;
+        // Find graph in parents, since the-graph-export has a process child
+        var graph = null;
+        var parent = this.parentNode;
+        while (parent && !graph) {
+          if (parent.nodeName === "THE-GRAPH") {
+            graph = parent;
+          }
+          parent = parent.parentNode;
+        }
+        if (!graph) {
+          throw new Error('Process element needs to have a "the-graph" ancestor.');
+        }
         this.graph = graph;
 
         // Initial bump
@@ -326,6 +337,10 @@ <h2 class="the-graph-node-subtitle">
           port.graphZoom();
         }.bind(this));
 
+        // if (this.nodeName === "THE-GRAPH-EXPORT") {
+        //   console.log(zoom, ports);
+        // }
+
         // Update label
         var label = this.$["the-graph-node-label"];
         label.style.left = Math.round(diameter / 2 - label.clientWidth / 2) + 'px';

the-graph/the-graph.html

@@ -643,8 +643,8 @@
                 this.fire('addedge', node);
                 break;
               case 'THE-GRAPH-INITIAL':
-                var target = node.getTarget();
-                node.targetNode = this.$.nodes.getProcessByName(target.node);
+                var iTarget = node.getTarget();
+                node.targetNode = this.$.nodes.getProcessByName(iTarget.node);
                 if (!node.targetNode) {
                   node.parentNode.removeChild(node);
                 }

themes/default/the-graph.css

@@ -132,6 +132,10 @@ the-graph.tiny .the-graph-node:before {
   bottom: 1px;
 }
 
+the-graph-export .the-graph-node:before {
+  background-color: hsla(49, 97%, 54%, 0.55);
+}
+
 .the-graph-node.selected {
   box-shadow: 0 0 5px #b5cf44;
 }