Merge pull request #354 from flowhub/polymer-exodus-1

Removing Polymer for nav+thumb
flowhub · Jun 14, 2017 · de6730b · de6730b
2 parents 6fdb739 + 3989855
commit de6730b
Show file tree

Hide file tree

Showing 7 changed files with 235 additions and 304 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,5 +1,21 @@
 ## dev
 
+## 0.10.0 (unreleased)
+
+Breaking changes
+
+* Polymer element `the-graph-thumb` has been removed.
+Should instead use the JavaScript API `TheGraph.thumb.render()`,
+as shown in `examples/demo-thumbnail.html`.
+* Polymer element `the-graph-nav` has been removed.
+Should instead use the new React component `TheGraph.nav.Component`,
+as shown in `examples/demo-full.html`
+
+Internal changes
+
+* All dependencies except Polymer (deprecated) are installed via NPM
+* Some more modules have been converted to proper CommonJS
+
 ## 0.9.0 (2017 May 6)
 
 New features

diff --git a/examples/demo-full.html b/examples/demo-full.html
@@ -18,7 +18,6 @@
     <!-- Custom elements -->
     <link rel="import" href="../bower_components/polymer/polymer.html">
     <link rel="import" href="../the-graph-editor/the-graph-editor.html">
-    <link rel="import" href="../the-graph-nav/the-graph-nav.html">
 
     <!-- Fonts -->
     <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
@@ -76,7 +75,7 @@
       theme="dark">
     </the-graph-editor>
 
-    <the-graph-nav id="nav" width="216" height="162"></the-graph-nav>
+    <div id="nav"></div>
 
     <div id="testing">
       <button id="autolayout">autolayout</button>
@@ -113,22 +112,40 @@
             // Remove loading message
             var loading = document.getElementById("loading");
             loading.parentNode.removeChild(loading);
+
+            renderNav();
           });
 
           // Attach nav
-          var nav = document.getElementById('nav');
-          editor.addEventListener('viewchanged', function(e) {
-            nav.view = e.detail;
-          });
-          nav.addEventListener('panto', function(e) {
-            var pan = e.detail;
+          function fitGraphInView() {
+            editor.triggerFit();
+          }
+          function panEditorTo(pan) {
             editor.pan[0] = pan.x;
             editor.pan[1] = pan.y;
-          });
-          nav.addEventListener('tap', function() {
-            editor.triggerFit();
-          });
-
+          }
+          function renderNav() {
+            var props = {
+                height: 162,
+                width: 216,
+                graph: editor.graph,
+                onTap: fitGraphInView,
+                onPanTo: panEditorTo,
+                viewrectangle: [
+                    -editor.pan[0],
+                    -editor.pan[1],
+                    editor.width,
+                    editor.height
+                ],
+                viewscale: editor.scale,
+            };
+
+            var element = React.createElement(TheGraph.nav.Component, props);
+            ReactDOM.render(element, document.getElementById('nav'));
+          }
+          editor.graph.on('endTransaction', renderNav); // graph changed
+          editor.addEventListener('viewchanged', renderNav); // editor viewport changed
+
           // Simulate a library update
           setTimeout(function () {
             var originalComponent = editor.getComponent('core/Split');
@@ -206,7 +223,6 @@
           document.getElementById("theme").addEventListener("click", function () {
             theme = (theme==="dark" ? "light" : "dark");
             editor.theme = theme;
-            nav.theme = theme;
           });
 
           // Focus a node

diff --git a/examples/demo-thumbnail.html b/examples/demo-thumbnail.html
@@ -1,36 +1,42 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>the-graph-thumb documentation</title>
+    <title>the-graph-thumb example</title>
     <meta charset="utf-8">
 
     <!-- Deps -->
-    <script src="../node_modules/webcomponents.js/webcomponents.js"></script>
     <script src="../node_modules/react/dist/react.js"></script>
     <script src="../node_modules/react-dom/dist/react-dom.js"></script>
     <script src="../dist/the-graph.js"></script>
 
-    <link rel="import" href="../bower_components/polymer/polymer.html">
-    <link rel="import" href="../the-graph-thumb/the-graph-thumb.html">
-
   </head>
   <body style="background-color:gray; color:white;">
 
-    <the-graph-thumb id="thumb" width="400" height="300"></the-graph-thumb>
+    <canvas id="thumb" width="400" height="300" style='background-color:black; border:1px solid; border-color: white' ></canvas>
 
     <script type="text/javascript">
     (function(){
       "use strict";
+        var TheGraph = window.TheGraph;
+        var fbpGraph = window.TheGraph.fbpGraph;
 
-      Polymer.veiledElements = ["the-graph-thumb"];
-      window.addEventListener('polymer-ready', function() {
-
         window.loadGraph = function (json) {
           // Load graph
           var graphData = json.data.files['noflo.json'].content;
-          var thumb = document.getElementById('thumb');
-          window.fbpGraph.graph.loadJSON(graphData, function(err, graph) {
-            thumb.graph = graph;
+          fbpGraph.graph.loadJSON(graphData, function(err, graph) {
+            if (err) {
+              throw err;
+            }
+
+            // Render the numbnail
+            var thumb = document.getElementById('thumb');
+            var properties = TheGraph.thumb.styleFromTheme('dark');
+            properties.width = thumb.width;
+            properties.height = thumb.height;
+            properties.nodeSize = 60;
+            properties.lineWidth = 1;
+            var context = thumb.getContext("2d");
+            var info = TheGraph.thumb.render(context, graph, properties);
           });
 
         };
@@ -46,9 +52,7 @@
         // Edge algo test
         // script.src = 'https://api.github.com/gists/6890344?callback=loadGraph';
         body.appendChild(script);
-      });
-
-    })();
+      })();
     </script>
   </body>
 </html>
diff --git a/spec/runner.html b/spec/runner.html
@@ -50,8 +50,6 @@
       theme="dark">
     </the-graph-editor>
 
-    <the-graph-nav id="nav" width="216" height="162"></the-graph-nav>
-
     <script src="basics.js"></script>
     <script src="editing.js"></script>
     <script src="graphchanges.js"></script>

diff --git a/the-graph-nav/the-graph-nav.html b/the-graph-nav/the-graph-nav.html