v 0.3.6

* react update * move to noflo/klayjs-noflo * fix Windows build (flowhub#192)
mich31 · Dec 11, 2014 · c2b2c8c · c2b2c8c
1 parent 2bcd78e
commit c2b2c8c
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 147 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,4 +1,10 @@
-## 0.3.6 (dev)
+## 0.3.7 (dev)
+
+## 0.3.6 (2014 December 11)
+
+* Update to [React 0.12.1](https://github.com/facebook/react/releases/tag/v0.12.1)
+* Move to [klayjs-noflo](https://github.com/noflo/klayjs-noflo)
+* Fix Windows build (#192)
 
 ## 0.3.5 (Durham, 2014 November 14)
 

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -13,6 +13,9 @@
       css: ['themes/*.css']
     };
 
+    var glob = require('glob');
+    var stylExpand = glob.sync('./themes/*.styl').join(' ');
+
     var jshintOptions = { 
       strict: true,
       newcap: false,
@@ -32,10 +35,10 @@
       },
       exec: {
         build_stylus: {
-          command: 'node ./node_modules/stylus/bin/stylus ./themes/*.styl'
+          command: 'node ./node_modules/stylus/bin/stylus ' + stylExpand
         },
         build_fa: {
-          command: 'node ./scripts/build-font-awesome-javascript.js '
+          command: 'node ./scripts/build-font-awesome-javascript.js'
         }
       },
       browserify: {

diff --git a/bower.json b/bower.json
@@ -8,11 +8,11 @@
   ],
   "description": "HTML custom elements for dataflow graph editing",
   "dependencies": {
-    "hammerjs": "~1.1.2",
     "font-awesome": "~4.2.0",
-    "react": "~0.11.1",
-    "klay-js": "~0.1.0",
+    "hammerjs": "~1.1.2",
+    "klayjs-noflo": "~0.3.0",
     "polymer": "0.5.1",
+    "react": "~0.12.1",
     "react.animate-djdeath": "0.0.3"
   },
   "main": "the-graph/the-graph.html",

diff --git a/package.json b/package.json
@@ -16,7 +16,8 @@
     "grunt-contrib-connect": "~0.8.0",
     "grunt-browserify": "~3.0.0",
     "grunt-bower-install-simple": "^1.0.2",
-    "coffeeify": "^0.7.0"
+    "coffeeify": "^0.7.0",
+    "glob": "^4.3.1"
   },
   "scripts": {
     "test": "grunt test"

diff --git a/the-graph-editor/demo-simple.html b/the-graph-editor/demo-simple.html
@@ -7,7 +7,7 @@
     <!-- Bower Libraries -->
     <script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
     <script src="../bower_components/react/react-with-addons.js"></script>
-    <script src="../bower_components/klay-js/klay.js"></script>
+    <script src="../bower_components/klayjs-noflo/klay-noflo.js"></script>
     <script src="../bower_components/hammerjs/hammer.min.js"></script>
     <script src="../bower_components/ease-djdeath/index.js"></script>
     <script src="../bower_components/react.animate-djdeath/react.animate.js"></script>

diff --git a/the-graph-editor/index.html b/the-graph-editor/index.html
@@ -7,7 +7,7 @@
     <!-- Bower Libraries -->
     <script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
     <script src="../bower_components/react/react-with-addons.js"></script>
-    <script src="../bower_components/klay-js/klay.js"></script>
+    <script src="../bower_components/klayjs-noflo/klay-noflo.js"></script>
     <script src="../bower_components/hammerjs/hammer.min.js"></script>
     <script src="../bower_components/ease-djdeath/index.js"></script>
     <script src="../bower_components/react.animate-djdeath/react.animate.js"></script>

diff --git a/the-graph-editor/the-graph-editor.html b/the-graph-editor/the-graph-editor.html
@@ -341,6 +341,9 @@
       registerComponent: function (definition, generated) {
         this.$.graph.registerComponent(definition, generated);
       },
+      libraryRefresh: function () {
+        this.$.graph.debounceLibraryRefesh();
+      },
       updateIcon: function (nodeId, icon) {
         this.$.graph.updateIcon(nodeId, icon);
       },

diff --git a/the-graph/the-graph.html b/the-graph/the-graph.html
@@ -54,9 +54,9 @@
         // Default pan
         this.pan = [0,0];
         // Initializes the autolayouter
-        this.autolayouter = klay.init({
+        this.autolayouter = klayNoflo.init({
           onSuccess: this.applyAutolayout.bind(this),
-          workerScript: "../bower_components/klay-js/klay-worker.js"
+          workerScript: "../bower_components/klayjs/klay.js"
         });
       },
       ready: function () {
@@ -91,8 +91,9 @@
 
         // Setup app
         this.$.svgcontainer.innerHTML = "";
-        this.appView = React.renderComponent(
-          window.TheGraph.App({
+        var App = React.createFactory(window.TheGraph.App);
+        this.appView = React.render(
+          App({
             graph: this.graph,
             width: this.width,
             height: this.height,

diff --git a/themes/the-graph-dark.css b/themes/the-graph-dark.css
@@ -41,7 +41,6 @@
   0% {
     fill: rgba(230,238,240,0.94);
   }
-
   100% {
     fill: rgba(255,0,0,0.94);
   }
@@ -50,7 +49,6 @@
   0% {
     fill: rgba(230,238,240,0.94);
   }
-
   100% {
     fill: rgba(255,0,0,0.94);
   }
@@ -59,7 +57,6 @@
   0% {
     fill: rgba(230,238,240,0.94);
   }
-
   100% {
     fill: rgba(255,0,0,0.94);
   }
@@ -187,19 +184,15 @@
   0% {
     stroke-width: 12px;
   }
-
   10% {
     stroke-width: 18px;
   }
-
   30% {
     stroke-width: 12px;
   }
-
   40% {
     stroke-width: 18px;
   }
-
   60% {
     stroke-width: 12px;
   }
@@ -208,19 +201,15 @@
   0% {
     stroke-width: 12px;
   }
-
   10% {
     stroke-width: 18px;
   }
-
   30% {
     stroke-width: 12px;
   }
-
   40% {
     stroke-width: 18px;
   }
-
   60% {
     stroke-width: 12px;
   }
@@ -229,19 +218,15 @@
   0% {
     stroke-width: 12px;
   }
-
   10% {
     stroke-width: 18px;
   }
-
   30% {
     stroke-width: 12px;
   }
-
   40% {
     stroke-width: 18px;
   }
-
   60% {
     stroke-width: 12px;
   }
@@ -257,8 +242,7 @@
 }
 .the-graph-dark text {
   font-family: "SourceCodePro", "Source Code Pro", Helvetica, Arial, sans-serif;
-  text-rendering: geometricPrecision;
-/* makes text scale smoothly */
+  text-rendering: geometricPrecision; /* makes text scale smoothly */
   font-size: 14px;
   fill: #fff;
   text-anchor: middle;
@@ -709,7 +693,6 @@
   0% {
     fill: rgba(230,238,240,0.94);
   }
-
   100% {
     fill: rgba(255,0,0,0.94);
   }
@@ -718,7 +701,6 @@
   0% {
     fill: rgba(230,238,240,0.94);
   }
-
   100% {
     fill: rgba(255,0,0,0.94);
   }
@@ -727,16 +709,6 @@
   0% {
     fill: rgba(230,238,240,0.94);
   }
-
-  100% {
-    fill: rgba(255,0,0,0.94);
-  }
-}
-@-ms-keyframes error {
-  0% {
-    fill: rgba(230,238,240,0.94);
-  }
-
   100% {
     fill: rgba(255,0,0,0.94);
   }
@@ -745,7 +717,6 @@
   0% {
     fill: rgba(230,238,240,0.94);
   }
-
   100% {
     fill: rgba(255,0,0,0.94);
   }
@@ -754,19 +725,15 @@
   0% {
     stroke-width: 12px;
   }
-
   10% {
     stroke-width: 18px;
   }
-
   30% {
     stroke-width: 12px;
   }
-
   40% {
     stroke-width: 18px;
   }
-
   60% {
     stroke-width: 12px;
   }
@@ -775,19 +742,15 @@
   0% {
     stroke-width: 12px;
   }
-
   10% {
     stroke-width: 18px;
   }
-
   30% {
     stroke-width: 12px;
   }
-
   40% {
     stroke-width: 18px;
   }
-
   60% {
     stroke-width: 12px;
   }
@@ -796,40 +759,15 @@
   0% {
     stroke-width: 12px;
   }
-
-  10% {
-    stroke-width: 18px;
-  }
-
-  30% {
-    stroke-width: 12px;
-  }
-
-  40% {
-    stroke-width: 18px;
-  }
-
-  60% {
-    stroke-width: 12px;
-  }
-}
-@-ms-keyframes heartbeats {
-  0% {
-    stroke-width: 12px;
-  }
-
   10% {
     stroke-width: 18px;
   }
-
   30% {
     stroke-width: 12px;
   }
-
   40% {
     stroke-width: 18px;
   }
-
   60% {
     stroke-width: 12px;
   }
@@ -838,19 +776,15 @@
   0% {
     stroke-width: 12px;
   }
-
   10% {
     stroke-width: 18px;
   }
-
   30% {
     stroke-width: 12px;
   }
-
   40% {
     stroke-width: 18px;
   }
-
   60% {
     stroke-width: 12px;
   }