features.jade

import Feature from './feature?force-load'
import * as d3 from 'd3'
svg(width=props.width height=props.height ref="svg").map
  each feature in props.features
    Feature(feature=feature
            color=props.color
            d=props.path(feature)
            numOptions=props.numOptions
            onMouseMove=props.onMouseMove
            onMouseOut=props.onMouseLeave
            onMouseEnter=props.onMouseOver.bind(null, feature.properties)
            onMouseDown=props.onMouseDown
            onMouseUp=props.onMouseUp.bind(null, feature.properties)
            class={'clickable-feature': props.clickable}
          ).feature

export.
  function onMouseDown(properties, callback) {
    var move = false;
    if (move) return;
    return callback.bind(null, properties);
  }

export.
  function shouldComponentUpdate(props) {
    if (!props.features || !this.props.features) return true;
    if (props.color !== this.props.color) return true;
    return props.features.length !== this.props.features.length;
  }

export.
  function componentWillUnmount() {
    this.getDOMNode().removeEventListener('zoom', this.zoom);
  }

export.
  function componentDidMount() {
    if (!process.env.FEATURE_MAP_ZOOM) return
    var self = this;
    var svg = self.svg = d3.select(self.getDOMNode());
    self.paths = svg.selectAll('path');

    var minScale = 0.75;
    var maxScale = 12;

    var zoom = d3.behavior.zoom()
      .scaleExtent([minScale, maxScale])
      .on('zoom', this.zoom = function() {
        var event = d3.event;
        var s = event.scale;
        var t = event.translate;
        self.zoomHandler(zoom, s, t);
      });

    svg.call(zoom);
  }

export.
  function componentDidUpdate() {
    if(!this.svg) return;
    this.paths = this.svg.selectAll('path');
  }

export.
  function zoomHandler(zoom, s, t){
    var w = this.props.width;
    var h = this.props.height;
    t[0] = Math.min((w * s * 0.8), Math.max((w * s * -0.8), t[0]));
    t[1] = Math.min(h * (s - 0.5), Math.max(h / 2 * (1 - s) - h / 2 * s, t[1]));
    zoom.translate(t);
    this.paths.attr("transform", "translate(" + t + ")scale(" + s + ")" );
  }