svg/vectorFeature.js

  1. var inherit = require('../inherit');
  2. var registerFeature = require('../registry').registerFeature;
  3. var vectorFeature = require('../vectorFeature');
  5. /* These markers are available to all instances of the vectorFeature. */
  6. var markerConfigs = {
  7.   arrow: {
  8.     attrs: {
  9.       class: 'geo-vector-arrow geo-vector-marker',
  10.       viewBox: '0 0 10 10',
  11.       refX: 1,
  12.       refY: 5,
  13.       markerHeight: 5,
  14.       markerWidth: 5,
  15.       orient: 'auto'
  16.     },
  17.     path: 'M 0 0 L 10 5 L 0 10 z'
  18.   },
  19.   point: {
  20.     attrs: {
  21.       class: 'geo-vector-point geo-vector-marker',
  22.       viewBox: '0 0 12 12',
  23.       refX: 6,
  24.       refY: 6,
  25.       markerHeight: 8,
  26.       markerWidth: 8,
  27.       orient: 'auto'
  28.     },
  29.     path: 'M 6 3 A 3 3 0 1 1 5.99999 3 Z'
  30.   },
  31.   bar: {
  32.     attrs: {
  33.       class: 'geo-vector-bar geo-vector-marker',
  34.       viewBox: '0 0 10 10',
  35.       refX: 0,
  36.       refY: 5,
  37.       markerHeight: 6,
  38.       markerWidth: 6,
  39.       orient: 'auto'
  40.     },
  41.     path: 'M 0 0 L 2 0 L 2 10 L 0 10 z'
  42.   },
  43.   wedge: {
  44.     attrs: {
  45.       class: 'geo-vector-wedge geo-vector-marker',
  46.       viewBox: '0 0 10 10',
  47.       refX: 10,
  48.       refY: 5,
  49.       markerHeight: 5,
  50.       markerWidth: 5,
  51.       orient: 'auto'
  52.     },
  53.     path: 'M 0 0 L 1 0 L 10 5 L 1 10 L 0 10 L 9 5 L 0 0'
  54.   }
  55. };
  57. /**
  58.  * Create a new instance of svg.vectorFeature.
  59.  *
  60.  * @class
  61.  * @alias geo.svg.vectorFeature
  62.  * @extends geo.vectorFeature
  63.  * @extends geo.svg.object
  64.  * @param {geo.vectorFeature.spec} arg Feature options.
  65.  * @returns {geo.vectorFeature}
  66.  */
  67. var svg_vectorFeature = function (arg) {
  68.   'use strict';
  69.   if (!(this instanceof svg_vectorFeature)) {
  70.     return new svg_vectorFeature(arg);
  71.   }
  73.   var object = require('./object');
  74.   var timestamp = require('../timestamp');
  75.   var d3 = require('./svgRenderer').d3;
  77.   arg = arg || {};
  78.   vectorFeature.call(this, arg);
  79.   object.call(this);
  81.   /**
  82.    * @private
  83.    */
  84.   var m_this = this,
  85.       s_exit = this._exit,
  86.       s_update = this._update,
  87.       m_buildTime = timestamp(),
  88.       m_style = {};
  90.   /**
  91.    * Generate a unique ID for a marker definition.
  92.    *
  93.    * @param {object} d The marker datum (unused).
  94.    * @param {number} i The marker index.
  95.    * @param {string} position The marker's vector position (`'head'` or
  96.    *   `'tail'`).
  97.    * @returns {string} The constructed ID.
  98.    */
  99.   function markerID(d, i, position) {
  100.     return m_this._svgid() + '_marker_' + i + '_' + position;
  101.   }
  103.   /**
  104.    * Add marker styles for vector arrows.
  105.    *
  106.    * @param {object[]} data The vector data array.
  107.    * @param {function} stroke The stroke accessor.
  108.    * @param {function} opacity The opacity accessor.
  109.    * @param {function} originStyle The marker style for the vector head.
  110.    * @param {function} endStyle The marker style for the vector tail.
  111.    */
  112.   function updateMarkers(data, stroke, opacity, originStyle, endStyle) {
  113.     //this allows for multiple vectorFeature in a layer
  114.     var markerGroup = m_this.renderer()._definitions()
  115.       .selectAll('g.marker-group#' + m_this._svgid())
  116.       .data(data.length ? [1] : []);
  118.     markerGroup
  119.       .enter()
  120.       .append('g')
  121.       .attr('id', m_this._svgid)
  122.       .attr('class', 'marker-group');
  124.     markerGroup.exit().remove();
  126.     var markers = data.reduce(function (markers, d, i) {
  127.       var head = markerConfigs[endStyle(d, i)];
  128.       var tail = markerConfigs[originStyle(d, i)];
  129.       if (head) {
  130.         markers.push({
  131.           data: d,
  132.           dataIndex: i,
  133.           head: true
  134.         });
  135.       }
  136.       if (tail) {
  137.         markers.push({
  138.           data: d,
  139.           dataIndex: i,
  140.           head: false
  141.         });
  142.       }
  143.       return markers;
  144.     }, []);
  146.     markerGroup = m_this.renderer()._definitions()
  147.       .selectAll('g.marker-group#' + m_this._svgid());
  149.     var sel = markerGroup
  150.       .selectAll('marker.geo-vector-marker')
  151.       .data(markers);
  153.     var renderer = m_this.renderer();
  155.     sel.enter()
  156.       .append('marker')
  157.       .each(function (d) {
  158.         var marker = d3.select(this);
  159.         var markerData = d.head ? markerConfigs[endStyle(d.data, d.dataIndex)] : markerConfigs[originStyle(d.data, d.dataIndex)];
  160.         Object.keys(markerData.attrs).forEach(function (attrName) {
  161.           marker.attr(attrName, markerData.attrs[attrName]);
  162.         });
  163.       })
  164.       .attr('id', function (d) {
  165.         return markerID(d.data, d.dataIndex, d.head ? 'head' : 'tail');
  166.       })
  167.       .style('stroke', function (d) {
  168.         return renderer._convertColor(stroke)(d.data, d.dataIndex);
  169.       })
  170.       .style('fill', function (d) {
  171.         return renderer._convertColor(stroke)(d.data, d.dataIndex);
  172.       })
  173.       .style('opacity', function (d) {
  174.         return opacity(d.data, d.dataIndex);
  175.       })
  176.       .append('path')
  177.       .attr('d', function (d) {
  178.         return d.head ? markerConfigs[endStyle(d.data, d.dataIndex)].path : markerConfigs[originStyle(d.data, d.dataIndex)].path;
  179.       });
  181.     sel.exit().remove();
  182.   }
  184.   /**
  185.    * Build.
  186.    *
  187.    * @returns {this}.
  188.    */
  189.   this._build = function () {
  190.     var data = m_this.data(),
  191.         s_style = m_this.style.get(),
  192.         m_renderer = m_this.renderer(),
  193.         orig_func = m_this.origin(),
  194.         size_func = m_this.delta(),
  195.         cache = [],
  196.         scale = m_this.style('scale'),
  197.         max = 0;
  199.     // call super-method
  200.     s_update.call(m_this);
  202.     // default to empty data array
  203.     if (!data) { data = []; }
  205.     // cache the georeferencing
  206.     cache = data.map(function (d, i) {
  207.       var origin = m_this.featureGcsToDisplay(orig_func(d, i)),
  208.           delta = size_func(d, i);
  209.       max = Math.max(max, delta.x * delta.x + delta.y * delta.y);
  210.       return {
  211.         x1: origin.x,
  212.         y1: origin.y,
  213.         dx: delta.x,
  214.         dy: -delta.y
  215.       };
  216.     });
  218.     max = Math.sqrt(max);
  219.     if (!scale) {
  220.       scale = 75 / (max ? max : 1);
  221.     }
  223.     function getScale() {
  224.       return scale / m_renderer.scaleFactor();
  225.     }
  227.     // fill in svg renderer style object defaults
  228.     m_style.id = m_this._svgid();
  229.     m_style.data = data;
  230.     m_style.append = 'line';
  231.     m_style.attributes = {
  232.       x1: function (d, i) {
  233.         return cache[i].x1;
  234.       },
  235.       y1: function (d, i) {
  236.         return cache[i].y1;
  237.       },
  238.       x2: function (d, i) {
  239.         return cache[i].x1 + getScale() * cache[i].dx;
  240.       },
  241.       y2: function (d, i) {
  242.         return cache[i].y1 + getScale() * cache[i].dy;
  243.       },
  244.       'marker-start': function (d, i) {
  245.         return 'url(#' + markerID(d, i, 'tail') + ')';
  246.       },
  247.       'marker-end': function (d, i) {
  248.         return 'url(#' + markerID(d, i, 'head') + ')';
  249.       }
  250.     };
  251.     m_style.style = {
  252.       stroke: function () { return true; },
  253.       strokeColor: s_style.strokeColor,
  254.       strokeWidth: s_style.strokeWidth,
  255.       strokeOpacity: s_style.strokeOpacity,
  256.       originStyle: s_style.originStyle,
  257.       endStyle: s_style.endStyle
  258.     };
  259.     m_style.classes = ['svgVectorFeature'];
  260.     m_style.visible = m_this.visible;
  262.     // Add markers to the definition list
  263.     updateMarkers(data, s_style.strokeColor, s_style.strokeOpacity, s_style.originStyle, s_style.endStyle);
  265.     // pass to renderer to draw
  266.     m_this.renderer()._drawFeatures(m_style);
  268.     // update time stamps
  269.     m_buildTime.modified();
  270.     m_this.updateTime().modified();
  271.     return m_this;
  272.   };
  274.   /**
  275.    * Update.
  276.    *
  277.    * @returns {this}
  278.    */
  279.   this._update = function () {
  280.     s_update.call(m_this);
  282.     if (m_this.timestamp() >= m_buildTime.timestamp()) {
  283.       m_this._build();
  284.     } else {
  285.       updateMarkers(
  286.         m_style.data,
  287.         m_style.style.strokeColor,
  288.         m_style.style.strokeOpacity,
  289.         m_style.style.originStyle,
  290.         m_style.style.endStyle
  291.       );
  292.     }
  294.     return m_this;
  295.   };
  297.   /**
  298.    * Exit.  Remove markers.
  299.    */
  300.   this._exit = function () {
  301.     s_exit.call(m_this);
  302.     m_style = {};
  303.     updateMarkers([], null, null, null, null);
  304.   };
  306.   this._init(arg);
  307.   return this;
  308. };
  310. svg_vectorFeature.markerConfigs = markerConfigs;
  312. inherit(svg_vectorFeature, vectorFeature);
  314. // Now register it
  315. registerFeature('svg', 'vector', svg_vectorFeature);
  316. module.exports = svg_vectorFeature;