px-vis-svg-canvas.html

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="px-vis-behavior-common.html" />
<link rel="import" href="px-vis-behavior-d3.html" />
<link rel="import" href="px-vis-svg.html" />
<link rel="import" href="px-vis-canvas.html" />


<!--
Element which creates an Canvas element and context

##### Usage

    <px-vis-svg-canvas
        svg="{{svg}}"
        px-svg-elem="{{pxSvgElem}}"
        canvas="{{canvas}}"
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]">
    </px-vis-svg-canvas>

@element px-vis-svg
@blurb Element which creates an SVG element and sets up d3
@homepage index.html
@demo demo.html
-->

<link rel="import" href="css/px-vis-svg-canvas-styles.html">

<dom-module id="px-vis-svg-canvas">
  <template>
    <style include="px-vis-svg-canvas-styles"></style>

    <div
      class="rel-container"
      style$="height:[[height]]px; width:[[width]]px">
      <px-vis-svg
        class="abs-elem inline--flex"
        on-px-vis-svg-updated="_refireEvent"
        on-px-vis-svg-element-updated="_refireEvent"
        svg="{{svgLower}}"
        px-svg-elem="{{pxSvgElemLower}}"
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]"
        offset="[[offset]]">
      </px-vis-svg>
      <px-vis-canvas
        class="abs-elem inline--flex"
        on-px-vis-canvas-context-updated="_refireEvent"
        canvas-context="{{canvasContext}}"
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]"
        offset="[[offset]]">
      </px-vis-canvas>
      <px-vis-svg
        class="abs-elem inline--flex"
        on-px-vis-svg-updated="_refireEvent"
        on-px-vis-svg-element-updated="_refireEvent"
        svg="{{svg}}"
        px-svg-elem="{{pxSvgElem}}"
        width="[[width]]"
        height="[[height]]"
        margin="[[margin]]"
        offset="[[offset]]">
      </px-vis-svg>
    </div>
  </template>
</dom-module>

<script>
    Polymer({

        is: 'px-vis-svg-canvas',
        behaviors: [
          PxVisBehavior.sizing,
          PxVisBehaviorD3.canvas,
          PxVisBehaviorD3.svg,
          PxVisBehaviorD3.svgLower
        ],

        /**
         * Properties block, expose attribute values to the DOM via 'reflect'
         *
         * @property properties
         * @type Object
         */
        properties: {},

        /**
         * Refires the caught events for precipitation pattern. We must refire because canvas and svg are "local" properties and thus the depth of their origin matters.
         *
         */
        _refireEvent: function(evt) {
          evt.stopPropagation();

          this.fire(evt.type,{ 'data': evt.detail.data, 'dataVar': evt.detail.dataVar, 'method': evt.detail.method });
        }
    });
</script>