px-vis-clip-path-complex-area.html

<!--
Copyright (c) 2018, General Electric

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<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" />


<!--

### Usage

    <px-vis-clip-complex-area
      svg="[[svg]]"
      x="[[x]]"
      y="[[y]]"
      domain-changed="[[domainChanged]]"
      chart-data="[[chartData]]"
      dimensions="[[dimensions]]"
      clip-path="{{clipPath}}">
    </px-vis-clip-complex-area>

## MDN Spec
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

@element px-vis-clip-path-complex-area
@blurb The clipping path restricts the region to which paint can be applied.
@homepage index.html
@demo demo.html
-->
<dom-module id="px-vis-clip-path-complex-area">
    <template>
    </template>
</dom-module>

<script>
  Polymer({

    is: 'px-vis-clip-path-complex-area',

    behaviors: [
      PxVisBehavior.observerCheck,
      PxVisBehaviorD3.svg,
      PxVisBehavior.sizing,
      PxVisBehaviorD3.axes,
      PxVisBehavior.commonMethods,
      PxVisBehaviorD3.clipPath
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
       * Holder for the clip path object
       *
       */
      _clipPathObj: {
        type: Object
      },
      /**
       * Holder for the clip path svg
       *
       */
      _clipPathSvg: {
        type: Object
      }
    },

    observers: [
      '_drawElement(domainChanged, svg, dimensions, chartData)'
    ],

    detached: function() {
      // this._clipPathObj.remove();
    },

    /**
     * Creates and sets a clipping path
     *
     * @method _drawElement
     */
    _drawElement: function() {
     if(this.hasUndefinedArguments(arguments)) {
       return;
     }

     if(this.domainChanged) {

        if(!this._clipPathObj) {
          this.set('clipPath', this.generateRandomID('cp_'));
          this.fire('px-vis-clip-path-updated', { 'dataVar': 'clipPath', 'data': this.clipPath, 'method':'set' });

          this._clipPathObj =  this.svg
            .append("clipPath")
            .attr("id",this.clipPath);
        }

        var _this = this,
            area = Px.d3.radialArea()
              .angle(function(d) {
                return _this.x(d);
              })
              .innerRadius(function(d) {
                  // ~~ --> round pixels values to optimize svg perfs
                return ~~_this.y.range()[0];
              })
              .outerRadius(function(d) {
                  // ~~ --> round pixels values to optimize svg perfs
                return ~~_this.y.range()[1] + 1; //+1px to not clip the very edge
              })
              .defined( function(d) {
                return _this.x(d) || _this.x(d) === 0;
              })
              .curve(Px.d3.curveLinearClosed);

        this._clipPathSvg = this._clipPathObj.selectAll("path")
          .data([this.dimensions])
          .enter()
          .append("path");

        //cant do merge because our data is not changing. So always run
        this._clipPathObj.selectAll("path")
                         .attr('d', function(d) {
                            return area(d);
                          });
      }
    }
  });
</script>