px-vis-behavior-axis-drag.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="px-vis-behavior-common.html" />
<link rel="import" href="px-vis-behavior-d3.html" />

<script>
var PxVisBehaviorDrag = window.PxVisBehaviorDrag = (window.PxVisBehaviorDrag || {});

/*
    Name:
    PxVisBehaviorDrag.basicProps

    Description:
    Polymer behavior that provides the basic drag properties

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorDrag.basicProps
*/
PxVisBehaviorDrag.basicProps = [{
    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
       * Holder for the axis currently being dragged
       *
       */
      _dragging: {
        type: Object,
        value: function() { return {}; }
      },
      /**
       * Holder for the drag behavior
       *
       */
      dragBehavior: {
        type: Object,
        notify: true
      }
    },
    /**
     * helper function to calc the position of an axis
     *
     */
    _position: function(d) {
      var v = this._dragging[d];
      return v == null ? this.x(d) : v;
    },

    /**
     * Defines our transition for axis snapping
     *
     */
    transition: function(g) {
      return g.transition().duration(500);
    },
  },
  PxVisBehavior.sizing,
  PxVisBehavior.dimensions,
  PxVisBehavior.dataset,
  PxVisBehavior.completeSeriesConfig,
  PxVisBehaviorD3.dynamicRedraw,
  PxVisBehavior.mutedSeries,
  PxVisBehaviorD3.axes,
  PxVisBehavior.radial
];

/*
    Name:
    PxVisBehaviorDrag.parallelAxisDrag

    Description:
    Polymer behavior that provides the drag behavior for parallel coordinates and radar

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorDrag.parallelAxisDrag
*/
PxVisBehaviorDrag.parallelAxisDrag = [{
    createParallelAxisDrag: function() {

      this.dragBehavior = Px.d3.drag()
        .container(this.dragContainerElem)
        .on("start.drag", this._onDragStart.bind(this))
        .on("drag.drag", this._onDrag.bind(this))
        .on("end.drag", this._onDragEnd.bind(this));

      this.notifyPath('dragBehavior', this.dragBehavior);
    },
    /**
     * When an axis starts being dragged
     *
     */
    _onDragStart: function() {
      var d = this.dimension;

      //reset dragging var
      this._dragging = {};

      //set equal to our axis
      this._dragging[d] = this.x(d);
    },
    /**
     * When an axis is dragged
     *
     */
    _onDrag: function() {
      this.debounce('drag', function(e) {

        if(this.radial) {
          this._radialDrag(e);
        } else {
          this._linearDrag(e);
        }

        //reset the domain
        // this.x.domain(this.dimensions);

        // redraw the lines
        if(this.redrawSeries & this.dynamicRedraw){
          _this.fire('px-vis-redraw-lines');
        }

        // move the currently grabed axis (and reorder the others if above is active)
        this.svg.attr("transform", this._radialOrLinear.bind(this));

        this.fire('px-vis-recalc-title-location');
      }.bind(this, Px.d3.event), 10);
    },

    _onDragEnd: function() {

      this._dragging = {};

      // make the axis snap into place
      this.transition(this.svg)
        .attr("transform", function() {
          return this.radial ? "rotate(" + (this.x(this.dimension) * 180 / Math.PI + 180) + ")" : "translate(" + this.x(this.dimension) + ",0)";
        }.bind(this));

      if(this.redrawSeries) {
        // redraw the lines
        this.set('completeSeriesConfig.*.x',this.dimensions);
        this.fire('px-vis-complete-series-config', { 'data': this.dimensions, 'dataVar': 'completeSeriesConfig.*.x' ,'method': 'set' });

        this.fire('px-vis-redraw-lines');
      }

      // alert parents that we are done moving the axis
      this.fire("px-axis-done");
    },

    _linearDrag: function(e) {
      var d = this.dimension;

      //get the x coordinate bounded by our chart extents
      this._dragging[d] = Math.min(this.width, Math.max(0, e.x));

      // reorder dynamically:
      // this._linearSort(this.axes, this.dimension);
      var swappedDim = this._linearSort(this.dimensions, this.dimension, e);

      if(swappedDim) {
        this.fire('px-vis-drag-dimension-swapped', { "dimensions" : this.dimensions, "swappedDim": swappedDim, "dimension": this.dimension });
      }
    },

    _radialDrag: function(e) {
      /*
        arctan gives us our angle, but 0 at 3 o'clock and our chart 0 is at 12. So add pi/2

              -pi/2                         0
               ____                        ____
             .'    `.                    .'    `.
            /        \                  /        \
        pi |          | 0   -->  3pi/2 |          | pi/2
            \        /                  \        /
             `.____.'                    `.____.'
               pi/2                         pi
      */

      var angle = Math.atan2(e.y,e.x) + Math.PI / 2,
          //arctan also gives us angle from -pi to pi; we want 0 to 2pi, so check if it is still negative
          angle_2PI = angle < 0 ? angle + 2 * Math.PI : angle,
          d = this.dimension;

      this._dragging[d] = angle_2PI;

      // this.axes = this._radialSort(this.axes, d, angle_2PI);
      var swappedDim = this._radialSort(this.dimensions, d, angle_2PI);

      if(swappedDim) {
        this.fire('px-vis-drag-dimension-swapped', { "dimensions" : this.dimensions, "swappedDim": swappedDim, "dimension": this.dimension });
      }
    },

    _linearSort: function(dims, d, e) {
      var len = dims.length - 1,
          index = dims.indexOf(d),
          left_index = index === 0 ? -1 : index - 1,
          right_index = index === len ? -1 : index + 1,
          myPos = Math.min(this.width, Math.max(0, e.x)),
          leftPos = left_index === -1 ? 'edge' : this.x(dims[left_index]),
          rightPos = right_index === -1 ? 'edge' : this.x(dims[right_index]),
          swapWithDim = null;

      // if we are not on the chart edge and we have moved past our left hand neighbor
      if(leftPos !== 'edge' && myPos < leftPos) {
        swapWithDim = dims[left_index];
        dims[index] = swapWithDim;
        dims[left_index] = d;
      } else if(rightPos !== 'edge' && myPos > rightPos) {
        swapWithDim = dims[right_index];
        dims[index] = swapWithDim;
        dims[right_index] = d;
      }

      return swapWithDim;
    },

    /**
     * Sorting function for polar in a cartesian space
     *
     */
    _radialSort: function(dims, d, angle){
      //first, figure out if our axis is or is near 0/2pi which requires special handling
      var len = dims.length - 1,
          index = dims.indexOf(d),
          left_index = index === 0 ? len : index - 1,
          right_index = index === len ? 0 : index + 1,
          swapWithDim;

      //if we are moving the center elem
      if(index === 0){
        //cant just look at the next axis in the case of there only being 3 axes. So look if it has passed the axis but not gone too far....
        var right_bound = len === 2 ? Math.PI : this.x(dims[right_index + 1]),
            left_bound = len === 2 ? Math.PI : this.x(dims[left_index - 1]);
        //make sure it is bounded by two axes
        if(angle > this.x(dims[right_index]) && angle < right_bound) {
          swapWithDim = dims[right_index];
          dims[index] = dims[right_index];
          dims[right_index] = d;
        } else if(angle < this.x(dims[left_index]) && angle > left_bound) {
          swapWithDim = dims[left_index];
          dims[index] = dims[left_index];
          dims[left_index] = d;
        }
      }
      //if the left index is 0, then we need to see if the axis angle passes 2pi
      else if(left_index === 0){
        var bounding_angle = len === 2 ? 3 * Math.PI / 2 : this.x(dims[len]);

        //if our angle is greater than our last element, then we have passed 0
        if(angle > bounding_angle) {
          swapWithDim = dims[left_index];
          dims[index] = dims[left_index];
          dims[left_index] = d;
        } else if(angle > this.x(dims[right_index])) {
          swapWithDim = dims[right_index];
          dims[index] = dims[right_index];
          dims[right_index] = d;
        }
      }
      //if our right is 0, then we need to check when angle passes 2pi and restarts at 0
      else if(right_index === 0 ){
        var bounding_angle = len === 2 ? Math.PI / 2 : this.x(dims[1]);

        //see if angle is > 0 and bounded by the first axis
        if(angle <= bounding_angle) {
          swapWithDim = dims[right_index];
          dims[index] = dims[right_index];
          dims[right_index] = d;
        } else if(angle < this.x(dims[left_index])) {
          swapWithDim = dims[left_index];
          dims[index] = dims[left_index];
          dims[left_index] = d;
        }
      }
      //else, just flip axes as normal
      else {
        if(angle < this.x(dims[left_index])) {
          swapWithDim = dims[left_index];
          dims[index] = dims[left_index];
          dims[left_index] = d;
        } else if(angle > this.x(dims[right_index])) {
          swapWithDim = dims[right_index];
          dims[index] = dims[right_index];
          dims[right_index] = d;
        }
      }
      return swapWithDim;
    },
    /**
     * Helper function to return either a rotate transform or translate transform
     *
     */
    _radialOrLinear: function() {
      var d = this.dimension;
      return this.radial ? "rotate(" + (this._position(d) * 180 / Math.PI + 180) + ")" : "translate(" + this._position(d) + ",0)";
    }
  },
  PxVisBehaviorDrag.basicProps
];

/*
    Name:
    PxVisBehaviorDrag.cartesianDrag

    Description:
    Polymer behavior that provides the drag behavior for multiaxis cartesian charts

    Dependencies:
    - D3.js

    @polymerBehavior PxVisBehaviorDrag.cartesianDrag
*/
PxVisBehaviorDrag.cartesianDrag = [{
    createCartesianDrag: function() {
      var dragBehavior = Px.d3.drag()
        .container(this.dragContainerElem)
        .on("start.drag", this._onCartesianDragStart.bind(this))
        .on("drag.drag", this._onCartesianDrag.bind(this))
        .on("end.drag",this._onCartesianDragEnd.bind(this));

      this.set('dragBehavior', dragBehavior);
    },

    /**
     * When an axis starts being dragged
     *
     */
    _onCartesianDragStart: function() {
      //reset dragging var
      this._dragging = {};
      //set equal to our axis
      this._dragging[this.dimension] = this.x(this.dimension);
    },
    /**
     * When an axis is dragged
     *
     */
    _onCartesianDrag: function() {
      this.debounce('drag', function(e) {
        var rDims = this.x.rightDomain(),
            lDims = this.x.leftDomain(),
            d = this.dimension,
            side = rDims.indexOf(d) !== -1 ? "right" : "left",
            num = rDims.indexOf(d) !== -1 ? rDims.indexOf(d) : lDims.indexOf(d),
            orientationChanged = false,
            swappedDim = null,
            dimToLeft = null,
            dimToRight = null,
            posDim,
            posDimToLeft,
            posDimToRight,
            leftOffset = 0,
            rightOffset = 0;


        if(side === 'left') {
          //get the x coordinate bounded by our chart extents
          this._dragging[d] = Math.min(this.width, Math.max(-this.margin.left, e.x));

          // get left and right bounding axis
          dimToLeft = lDims[num+1] ? lDims[num+1] : null;
          // if we are on a side, look at the start of the opposite axis set
          if(num === 0) {
            dimToRight = rDims[0] ? rDims[0] : null;
            rightOffset = this.width - this.margin.left * lDims.length;
          } else {
            dimToRight = lDims[num-1];
          }
        } else if(side === 'right') {
          //get the x coordinate bounded by our chart extents
          this._dragging[d] = Math.min(this.width + this.margin.right, Math.max(-this.margin.left, e.x)) - this.width  + this.margin.left + this.margin.right;

          // get left and right bounding axis
          dimToRight = rDims[num+1] ? rDims[num+1] : null;
          // if we are on a side, look at the start of the opposite axis set
          if(num === 0) {
            dimToLeft = lDims[0] ? lDims[0] : null;
            leftOffset =  this.margin.right * rDims.length - this.width;
          } else {
            dimToLeft = rDims[num-1];
          }
        }

        // sort it
        // FIXME this is dumb; should be able to get rid of _position, but cant be arsed to do it right now
        posDim = this._position(d);
        posDimToLeft = dimToLeft ? this.x(dimToLeft) + leftOffset: null;
        posDimToRight = dimToRight ? this.x(dimToRight)  + rightOffset : null;

        // has it passed to the left
        if((posDimToLeft || posDimToLeft === 0) && posDim < posDimToLeft) {
          swappedDim = dimToLeft;

          // if we were on the side, then we've changed orientation
          if(num === 0 && side === "right") {
            orientationChanged = true;
          }

          // swap the two dims
          var n = this.dimensions.indexOf(d),
              nl = this.dimensions.indexOf(dimToLeft);
          this.dimensions[n] = dimToLeft;
          this.dimensions[nl] = d;

        } else if((posDimToRight || posDimToRight === 0) && posDim > posDimToRight) {
          swappedDim = dimToRight;

          // if we were on the side, then we've changed orientation
          if(num === 0 && side === "left") {
            orientationChanged = true;
          }

          // swap the two dims
          var n = this.dimensions.indexOf(d),
              nr = this.dimensions.indexOf(dimToRight);
          this.dimensions[n] = dimToRight;
          this.dimensions[nr] = d;
        }

        // did we move a dimension
        if(swappedDim && !orientationChanged) {
          var l = lDims.length,
              r = rDims.length,
              newLDims = this.dimensions.slice(0,l),
              newRDims = this.dimensions.slice(l);

          this.x.leftDomain(newLDims);
          this.x.rightDomain(newRDims);

          this.fire('px-vis-drag-dimension-swapped', {
            "dimensions" : this.dimensions,
            "lDims" : newLDims,
            "rDims" : newRDims,
            "swappedDim": swappedDim
          });

        } else if(orientationChanged) {
          var l = lDims[0];
          lDims[0] = rDims[0];
          rDims[0] = l;

          this.x.leftDomain(lDims);
          this.x.rightDomain(rDims);

          this.dimensions = lDims.concat(rDims);

          this.fire("px-axis-orientation-changed");
        } else {
          // how many axes do we have on each side; maintain that proportion
          var l = lDims.length;
          var r = rDims.length;

          this.x.leftDomain(this.dimensions.slice(0,l));
          this.x.rightDomain(this.dimensions.slice(l));
        }

        // move the currently grabed axis (and reorder the others if above is active)
        this.svg.attr("transform", function() {
          return "translate(" + this._position(this.dimension) + ",0)";
        }.bind(this));

      }.bind(this,Px.d3.event),1);
    },
    _onCartesianDragEnd: function() {

      this._dragging = {};

      // make the axis snap into place
      this.transition(this.svg)
        .attr("transform", function() {
          return "translate(" + this.x(this.dimension) + ",0)";
        }.bind(this));

      // alert parents that we are done moving the axis
      this.fire("px-axis-drag-done");
    }
  }, PxVisBehaviorDrag.basicProps];
</script>