ui/sliderWidget.js

  1. var svgWidget = require('./svgWidget');
  2. var inherit = require('../inherit');
  3. var registerWidget = require('../registry').registerWidget;
  5. /**
  6.  * @typedef {geo.gui.widget.spec} geo.gui.sliderWidget.spec
  7.  * @extends {geo.gui.widget.spec}
  8.  * @property {number} [width=20] The width of the slider in pixels.
  9.  * @property {number} [height=160] The height of the slider in pixels.  The
  10.  *   actual bar is `height - 3 * width`.
  11.  */
  13. /**
  14.  * Create a new instance of class sliderWidget.
  15.  *
  16.  * @class
  17.  * @alias geo.gui.sliderWidget
  18.  * @extends geo.gui.svgWidget
  19.  * @param {geo.gui.sliderWidget.spec} arg Options for the widget.
  20.  * @returns {geo.gui.sliderWidget}
  21.  */
  22. var sliderWidget = function (arg) {
  23.   'use strict';
  24.   if (!(this instanceof sliderWidget)) {
  25.     return new sliderWidget(arg);
  26.   }
  27.   svgWidget.call(this, arg);
  29.   var d3 = require('../svg/svgRenderer').d3;
  30.   var geo_event = require('../event');
  32.   var m_this = this,
  33.       s_exit = this._exit,
  34.       m_xscale,
  35.       m_yscale,
  36.       m_plus,
  37.       m_minus,
  38.       m_nub,
  39.       m_width = arg.width || 20, // Size of the widget in pixels
  40.       m_height = arg.height || 160,  // slider height + 3 * width
  41.       m_nubSize = arg.width ? arg.width * 0.5 : 10,
  42.       m_plusIcon,
  43.       m_minusIcon,
  44.       m_group,
  45.       m_lowContrast,
  46.       m_highlightDur = 100;
  48.   /* http://icomoon.io */
  49.   /* CC BY 3.0 http://creativecommons.org/licenses/by/3.0/ */
  50.   m_plusIcon = 'M512 81.92c-237.568 0-430.080 192.614-430.080 430.080 0 237.568 192.563 430.080 430.080 430.080s430.080-192.563 430.080-430.080c0-237.517-192.563-430.080-430.080-430.080zM564.326 564.326v206.182h-104.653v-206.182h-206.234v-104.653h206.182v-206.234h104.704v206.182h206.182v104.704h-206.182z';
  51.   m_minusIcon = 'M512 81.92c-237.568 0-430.080 192.614-430.080 430.080 0 237.568 192.563 430.080 430.080 430.080s430.080-192.563 430.080-430.080c0-237.517-192.563-430.080-430.080-430.080zM770.56 459.674v104.704h-517.12v-104.704h517.12z';
  53.   // Define off-white gray colors for low contrast ui (unselected).
  54.   m_lowContrast = {
  55.     white: '#f4f4f4',
  56.     black: '#505050'
  57.   };
  59.   /**
  60.    * Add an icon from a path string.  Returns a d3 group element.
  61.    *
  62.    * @param {string} icon svg path string.
  63.    * @param {d3Selection} base where to append the element.
  64.    * @param {number} cx Center x-coordinate.
  65.    * @param {number} cy Center y-coordinate.
  66.    * @param {number} size Icon size in pixels.
  67.    * @returns {d3GroupElement}
  68.    */
  69.   function put_icon(icon, base, cx, cy, size) {
  70.     var g = base.append('g');
  72.     // the scale factor
  73.     var s = size / 1024;
  75.     g.append('g')
  76.       .append('g')
  77.         .attr(
  78.           'transform',
  79.           'translate(' + cx + ',' + cy + ') scale(' + s + ') translate(-512,-512)'
  80.         )
  81.       .append('path')
  82.         .attr('d', icon)
  83.         .attr('class', 'geo-glyphicon');
  85.     return g;
  86.   }
  88.   /**
  89.    * Return the size of the widget.
  90.    *
  91.    * @returns {geo.screenSize}
  92.    */
  93.   this.size = function () {
  94.     return {width: m_width, height: m_height};
  95.   };
  97.   /**
  98.    * Initialize the slider widget.
  99.    *
  100.    * @returns {this}
  101.    */
  102.   this._init = function () {
  103.     m_this._createCanvas();
  104.     m_this._appendCanvasToParent();
  106.     m_this.reposition();
  108.     var svg = d3.select(m_this.canvas()),
  109.         map = m_this.layer().map();
  111.     svg.attr('width', m_width).attr('height', m_height);
  113.     // create d3 scales for positioning
  114.     // TODO: make customizable and responsive
  115.     m_xscale = d3.scaleLinear().domain([-4, 4]).range([0, m_width]);
  116.     m_yscale = d3.scaleLinear().domain([0, 1]).range([m_width * 1.5, m_height - m_width * 1.5]);
  118.     // Create the main group element
  119.     svg = svg.append('g').classed('geo-ui-slider', true);
  120.     m_group = svg;
  122.     // Create + zoom button
  123.     m_plus = svg.append('g');
  124.     m_plus.append('circle')
  125.       .datum({
  126.         fill: 'white',
  127.         stroke: null
  128.       })
  129.       .classed('geo-zoom-in', true)
  130.       .attr('cx', m_xscale(0))
  131.       .attr('cy', m_yscale(0.0) - m_width + 2)
  132.       .attr('r', (m_width - 2) / 2)
  133.       .style('cursor', 'pointer')
  134.       .on('click', function () {
  135.         var z = map.zoom();
  136.         map.transition({
  137.           zoom: z + 1,
  138.           ease: d3.easeCubicInOut,
  139.           duration: 500
  140.         });
  141.       })
  142.       .on('mousedown', function (evt) {
  143.         evt.stopPropagation();
  144.       });
  146.     put_icon(
  147.       m_plusIcon,
  148.       m_plus,
  149.       m_xscale(0),
  150.       m_yscale(0) - m_width + 2,
  151.       m_width + 4
  152.     ).style('cursor', 'pointer')
  153.       .style('pointer-events', 'none')
  154.       .select('path')
  155.       .datum({
  156.         fill: 'black',
  157.         stroke: null
  158.       });
  160.     // Create the - zoom button
  161.     m_minus = svg.append('g');
  162.     m_minus.append('circle')
  163.       .datum({
  164.         fill: 'white',
  165.         stroke: null
  166.       })
  167.       .classed('geo-zoom-out', true)
  168.       .attr('cx', m_xscale(0))
  169.       .attr('cy', m_yscale(1.0) + m_width - 2)
  170.       .attr('r', (m_width - 2) / 2)
  171.       .style('cursor', 'pointer')
  172.       .on('click', function () {
  173.         var z = map.zoom();
  174.         map.transition({
  175.           zoom: z - 1,
  176.           ease: d3.easeCubicInOut,
  177.           duration: 500
  178.         });
  179.       })
  180.       .on('mousedown', function (evt) {
  181.         evt.stopPropagation();
  182.       });
  184.     put_icon(
  185.       m_minusIcon,
  186.       m_minus,
  187.       m_xscale(0),
  188.       m_yscale(1) + m_width - 2,
  189.       m_width + 4
  190.     ).style('cursor', 'pointer')
  191.       .style('pointer-events', 'none')
  192.       .select('path')
  193.       .datum({
  194.         fill: 'black',
  195.         stroke: null
  196.       });
  198.     /**
  199.      * Respond to a mouse event on the widget.
  200.      *
  201.      * @param {d3Event} evt The event on the widget.
  202.      * @param {boolean} [trans] Truthy for an animated transition.
  203.      */
  204.     function respond(evt, trans) {
  205.       var z = m_yscale.invert(d3.pointer(event, svg.node())[1]),
  206.           zrange = map.zoomRange();
  207.       z = (1 - z) * (zrange.max - zrange.min) + zrange.min;
  208.       if (trans) {
  209.         map.transition({
  210.           zoom: z,
  211.           ease: d3.easeCubicInOut,
  212.           duration: 500,
  213.           done: m_this._update()
  214.         });
  215.       } else {
  216.         map.zoom(z);
  217.         m_this._update();
  218.       }
  219.       evt.stopPropagation();
  220.     }
  222.     // Create the track
  223.     svg.append('rect')
  224.       .datum({
  225.         fill: 'white',
  226.         stroke: 'black'
  227.       })
  228.       .classed('geo-zoom-track', true)
  229.       .attr('x', m_xscale(0) - m_width / 6)
  230.       .attr('y', m_yscale(0))
  231.       .attr('rx', m_width / 10)
  232.       .attr('ry', m_width / 10)
  233.       .attr('width', m_width / 3)
  234.       .attr('height', m_height - m_width * 3)
  235.       .style('cursor', 'pointer')
  236.       .on('click', function (evt) {
  237.         respond(evt, true);
  238.       });
  240.     // Create the nub
  241.     m_nub = svg.append('rect')
  242.       .datum({
  243.         fill: 'black',
  244.         stroke: null
  245.       })
  246.       .classed('geo-zoom-nub', true)
  247.       .attr('x', m_xscale(-4))
  248.       .attr('y', m_yscale(0.5) - m_nubSize / 2)
  249.       .attr('rx', 3)
  250.       .attr('ry', 3)
  251.       .attr('width', m_width)
  252.       .attr('height', m_nubSize)
  253.       .style('cursor', 'pointer')
  254.       .on('mousedown', function (evt) {
  255.         d3.select(document).on('mousemove.geo.slider', function () {
  256.           respond(evt);
  257.         });
  258.         d3.select(document).on('mouseup.geo.slider', function () {
  259.           respond(evt);
  260.           d3.select(document).on('.geo.slider', null);
  261.         });
  262.         evt.stopPropagation();
  263.       });
  265.     /**
  266.      * When the mouse is over the widget, change the style.
  267.      */
  268.     function mouseOver() {
  269.       d3.select(this).attr('filter', 'url(#geo-highlight)');
  270.       m_group.selectAll('rect,path,circle').transition()
  271.         .duration(m_highlightDur)
  272.         .style('fill', function (d) {
  273.           return d.fill || null;
  274.         })
  275.         .style('stroke', function (d) {
  276.           return d.stroke || null;
  277.         });
  278.     }
  280.     /**
  281.      * When the mouse is no longer over the widget, change the style.
  282.      */
  283.     function mouseOut() {
  284.       d3.select(this).attr('filter', null);
  285.       m_group.selectAll('circle,rect,path').transition()
  286.         .duration(m_highlightDur)
  287.         .style('fill', function (d) {
  288.           return m_lowContrast[d.fill] || null;
  289.         })
  290.         .style('stroke', function (d) {
  291.           return m_lowContrast[d.stroke] || null;
  292.         });
  293.     }
  295.     m_group.selectAll('*')
  296.       .on('mouseover', mouseOver)
  297.       .on('mouseout', mouseOut);
  299.     // Update the nub position on zoom
  300.     m_this.geoOn(geo_event.zoom, m_this._update);
  302.     mouseOut();
  303.     m_this._update();
  304.     return m_this;
  305.   };
  307.   /**
  308.    * Removes the slider element from the map and unbinds all handlers.
  309.    */
  310.   this._exit = function () {
  311.     m_this.geoOff(geo_event.zoom, m_this._update);
  312.     m_group.remove();
  313.     s_exit();
  314.   };
  316.   /**
  317.    * Update the slider widget state in response to map changes.  I.e., zoom
  318.    * range changes.
  319.    *
  320.    * @param {object} [obj] An object that can specify a zoom value.
  321.    * @param {number} [obj.zoom] The new zoom value to show on the slider.
  322.    */
  323.   this._update = function (obj) {
  324.     var map = m_this.layer().map(),
  325.         zoomRange = map.zoomRange(),
  326.         zoom = map.zoom(),
  327.         zoomScale = d3.scaleLinear();
  329.     obj = obj || {};
  330.     zoom = obj.value || zoom;
  331.     zoomScale.domain([zoomRange.min, zoomRange.max])
  332.       .range([1, 0])
  333.       .clamp(true);
  335.     m_nub.attr('y', m_yscale(zoomScale(zoom)) - m_nubSize / 2);
  336.   };
  337. };
  339. inherit(sliderWidget, svgWidget);
  341. registerWidget('dom', 'slider', sliderWidget);
  342. module.exports = sliderWidget;