the-graph-nav.html

<!-- 
  
* Wraps the-graph-thumb with a current view bounding box
* Observes changes from attached instance of the-graph-editor

-->

<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">
  <template>
    <style>
      #thumb, 
      #outcanvas {
        position: absolute;
        top: 0;
        left: 0;
        overflow: visible;
      }
      #viewrect {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 150px;
        border: 1px solid hsla(190, 100%, 80%, 0.4);
        border-style: dotted;
      }
    </style>
    <the-graph-thumb id="thumb"
      graph="{{ editor.fbpGraph }}"
      thumbrectangle="{{thumbrectangle}}"
      width="{{width}}" height="{{height}}"
      thumbscale="{{thumbscale}}"
      hide="{{hide}}"
      theme="{{ editor.theme }}">
    </the-graph-thumb>
    <canvas id="outcanvas" width="{{width}}" height="{{height}}" style="position:absolute;top:0;left:0;"></canvas>
    <div id="viewrect"></div>
  </template>
  <script>
  (function () {
    "use strict";

    Polymer('the-graph-nav', {
      width: 200,
      height: 150,
      hide: false,
      thumbscale: 1,
      backgroundColor: "hsla(184, 8%, 75%, 0.9)",
      outsideFill: "hsla(0, 0%, 0%, 0.4)",
      ready: function () {
        this.viewrectangle = [0,0,500,500];
        this.scaledviewrectangle = [0,0,200,150];
        this.theme = "dark";
      },
      attached: function () {
        this.style.overflow = "hidden";
        this.style.cursor = "move";
        this.style.width = this.width + "px";
        this.style.height = this.height + "px";

        // HACK way to make PolymerGestures work for now
        var noop = function(){};
        PolymerGestures.addEventListener(this, "track", noop);
        PolymerGestures.addEventListener(this, "trackend", noop);
        PolymerGestures.addEventListener(this, "tap", noop);

        // Pan graph by dragging map
        this.addEventListener("track", function (event) {
          if (!this.editor) { return; }
          // Don't pan graph
          event.stopPropagation();

          var x = this.editor.pan[0];
          var y = this.editor.pan[1];
          var panscale = this.thumbscale / this.editor.scale;
          x -= event.ddx / panscale;
          y -= event.ddy / panscale;
          this.editor.pan = [Math.round(x), Math.round(y)];

          event.preventTap();
        }.bind(this));
        this.addEventListener("trackend", function (event) {
          // Don't pan graph
          event.stopPropagation();
        }.bind(this));

        // Tap to fit
        this.addEventListener("tap", function () {
          if (!this.editor) { return; }
          this.editor.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];

        this.viewrectangle[0] = -x;
        this.viewrectangle[1] = -y;
      },
      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 () {
        var style = TheGraph.nav.calculateStyleFromTheme(this.theme);
        this.backgroundColor = style.backgroundColor;
        this.viewBoxBorder = style.viewBoxBorder;
        this.viewBoxBorder2 = style.viewBoxBorder2;
        this.outsideFill = style.outsideFill;
        this.style.backgroundColor = this.backgroundColor;
        // Redraw rectangle
        this.viewrectangleChanged();
      },
      viewrectangleChanged: function () {
        // Canvas to grey out outside view
        var context = this.$.outcanvas.getContext('2d');
        context = unwrap(context);

        var properties = {
            width: this.width,
            height: this.height,
            scale: this.scale,
            thumbscale: this.thumbscale,
            thumbrectangle: this.thumbrectangle, 
            viewrectangle: this.viewrectangle,
            viewBoxBorder: this.viewBoxBorder,
            viewBoxBorder2: this.viewBoxBorder2,
            outsideFill: this.outsideFill,
        };
        var nav = TheGraph.nav.render(context, this.$.viewrect, properties);
        this.hide = nav.hide;
        // this.scaledviewrectangle = [x, y, w, h];
      },
      hideChanged: function () {
        if (this.hide) {
          this.style.display = "none";
        } else {
          this.style.display = "block";
        }
      },
      thumbscaleChanged: function () {
        this.viewrectangleChanged();
      },
      thumbrectangleChanged: function () {
        // Binding this from the-graph-thumb to know the dimensions rendered
        var w = this.thumbrectangle[2];
        var h = this.thumbrectangle[3];
        this.thumbscale = (w>h) ? this.width/w : this.height/h;
      }
    });

  })();
  </script>
</polymer-element>