Remove nav depending on editor element

CHANGES.md

@@ -1,6 +1,12 @@
 ## dev
 
+## 0.8.0 (unreleased)
 
+Breaking changes
+
+* Polymer element `the-graph-nav` no longer takes and directly manipulates `editor`.
+Instead it fires events like `panto`. And it expects `graph` and `view` attributes to be set.
+See `examples/demo-full.html` for usage.
 
 ## 0.7.0 (2017 March 2)
 

examples/demo-full.html

@@ -108,9 +108,23 @@
           var graphString = JSON.stringify(graph);
           editor.graph = graph;
 
-          // Attach editor to nav
+          // Attach nav
           var nav = document.getElementById('nav');
-          nav.editor = editor;
+          editor.addEventListener('viewchanged', function(e) {
+            nav.view = e.detail;
+          });
+          nav.addEventListener('panto', function(e) {
+            var pan = e.detail;
+            editor.pan[0] = pan.x;
+            editor.pan[1] = pan.y;
+          });
+          nav.addEventListener('tap', function() {
+            editor.triggerFit();
+          });
+          editor.addEventListener('graphInitialised', function() {
+            // FIXME: editor should not init fbpGraph, but be passed in a ready instance
+            nav.graph = editor.fbpGraph;
+          });
 
           // Simulate a library update
           setTimeout(function () {
@@ -189,6 +203,7 @@
           document.getElementById("theme").addEventListener("click", function () {
             theme = (theme==="dark" ? "light" : "dark");
             editor.theme = theme;
+            nav.theme = theme;
           });
 
           // Focus a node

examples/demo-simple.html

@@ -19,7 +19,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">
@@ -55,11 +54,6 @@
         top: 0;
         left: 0;
       }
-      #nav {
-        position: absolute;
-        right: 0px;
-        bottom: 0px;
-      }
       #testing {
         position: absolute;
         top: 0;
@@ -77,8 +71,6 @@
       theme="dark">
     </the-graph-editor>
 
-    <the-graph-nav id="nav" width="216" height="162"></the-graph-nav>
-
     <div id="testing">
       <button id="autolayout">autolayout</button>
       <button id="addnode">add node</button>

the-graph-editor/the-graph-editor.html

@@ -87,11 +87,28 @@
         }
         return null;
       },
+      notifyViewChanged: function () {
+        var view = {
+          scale: this.scale,
+          pan: this.pan,
+          width: this.width,
+          height: this.height,
+        };
+        this.fire('viewchanged', view);
+      },
+      panChanged: function () {
+        this.notifyViewChanged();
+      },
+      scaleChanged: function () {
+        this.notifyViewChanged();
+      },
       widthChanged: function () {
         this.style.width = this.width + "px";
+        this.notifyViewChanged();
       },
       heightChanged: function () {
         this.style.height = this.height + "px";
+        this.notifyViewChanged();
       },
       graphChanged: function () {
         if (typeof this.graph.addNode === 'function') {

the-graph-nav/the-graph-nav.html

@@ -7,7 +7,7 @@
 
 <link rel="import" href="../the-graph-thumb/the-graph-thumb.html">
 
-<polymer-element name="the-graph-nav" attributes="width height editor hide" touch-action="none">
+<polymer-element name="the-graph-nav" attributes="width height graph theme hide" touch-action="none">
   <template>
     <style>
       #thumb, 
@@ -28,12 +28,12 @@
       }
     </style>
     <the-graph-thumb id="thumb"
-      graph="{{ editor.fbpGraph }}"
+      graph="{{ graph }}"
       thumbrectangle="{{thumbrectangle}}"
       width="{{width}}" height="{{height}}"
       thumbscale="{{thumbscale}}"
       hide="{{hide}}"
-      theme="{{ editor.theme }}">
+      theme="{{ theme }}">
     </the-graph-thumb>
     <canvas id="outcanvas" width="{{width}}" height="{{height}}" style="position:absolute;top:0;left:0;"></canvas>
     <div id="viewrect"></div>
@@ -68,16 +68,16 @@
 
         // Pan graph by dragging map
         this.addEventListener("track", function (event) {
-          if (!this.editor) { return; }
-          // Don't pan graph
+          // Don't pan underlying elements
           event.stopPropagation();
 
-          var x = this.editor.pan[0];
-          var y = this.editor.pan[1];
-          var panscale = this.thumbscale / this.editor.scale;
+          var x = -this.viewrectangle[0];
+          var y = -this.viewrectangle[1];
+          var panscale = this.thumbscale / this.scale;
           x -= event.ddx / panscale;
           y -= event.ddy / panscale;
-          this.editor.pan = [Math.round(x), Math.round(y)];
+          var panTo = { x: Math.round(x), y: Math.round(y) };
+          this.fire('panto', panTo);
 
           event.preventTap();
         }.bind(this));
@@ -88,37 +88,24 @@
 
         // Tap to fit
         this.addEventListener("tap", function () {
-          if (!this.editor) { return; }
-          this.editor.triggerFit();
+          this.fire('triggerfit');
         });
       },
-      observe: {
-        'editor.scale': 'editorScaleChanged',
-        'editor.width': 'editorWidthChanged',
-        'editor.height': 'editorHeightChanged',
-        'editor.pan': 'editorPanChanged',
-        'editor.theme': 'editorThemeChanged'
-      },
-      editorChanged: function (oldEditor, newEditor) {
-      },
-      editorPanChanged: function () {
-        if (!this.editor.pan) { return; }
-        var x = this.editor.pan[0];
-        var y = this.editor.pan[1];
+      viewChanged: function (view) {
+        if (!view) {
+            return;
+        }
+        var x = view.pan[0];
+        var y = view.pan[1];
 
         this.viewrectangle[0] = -x;
         this.viewrectangle[1] = -y;
+        this.viewrectangle[2] = view.width;
+        this.viewrectangle[3] = view.height;
+
+        this.scale = view.scale;
       },
-      editorWidthChanged: function () {
-        this.viewrectangle[2] = parseInt(this.editor.width, 10);
-      },
-      editorHeightChanged: function () {
-        this.viewrectangle[3] = parseInt(this.editor.height, 10);
-      },
-      editorScaleChanged: function () {
-        this.scale = this.editor.scale;
-      },
-      editorThemeChanged: function () {
+      themeChanged: function () {
         var style = TheGraph.nav.calculateStyleFromTheme(this.theme);
         this.backgroundColor = style.backgroundColor;
         this.viewBoxBorder = style.viewBoxBorder;