Source: Synview.js

  1. /**
  2.  * @module meteoJS/synview
  3.  */
  5. import $ from 'jquery';
  6. import SynviewMap from './synview/SynviewMap.js';
  7. import Timeline from './Timeline.js';
  8. import TypeCollection from './synview/TypeCollection.js';
  9. import Tooltip from './synview/Tooltip.js';
  11. /**
  12.  * Options for constructor.
  13.  * 
  14.  * @typedef {Object} module:meteoJS/synview~options
  15.  * @param {module:meteoJS/synview/map.SynviewMap|undefined} [map]
  16.  *   Synview map object.
  17.  * @param {module:meteoJS/timeline.Timeline|undefined} [timeline]
  18.  *   Timeline object.
  19.  * @param {module:meteoJS/tooltip.Tooltip} [tooltip] - Tooltip object.
  20.  */
  22. /**
  23.  * Mapping object to show map data for different timestamps. Create one object
  24.  * per map.
  25.  */
  26. export default class Synview {
  27.   
  28.   /**
  29.    * @param {module:meteoJS/synview~options} options - Options.
  30.    */
  31.   constructor(options) {
  32.     /**
  33.      * @type {module:meteoJS/synview~options}
  34.      * @private
  35.      */
  36.     this.options = $.extend(true, {
  37.       map: undefined,
  38.       timeline: undefined,
  39.       tooltip: undefined
  40.     }, options);
  41.     // Normalize options
  42.     if (this.options.map === undefined)
  43.       this.options.map = new SynviewMap();
  44.     if (this.options.timeline === undefined)
  45.       this.options.timeline = new Timeline();
  46.     
  47.     /**
  48.      * Collection of synview types.
  49.      * @member {module:meteoJS/synview/typecollection.TypeCollection}
  50.      */
  51.     this.typeCollection = new TypeCollection();
  52.     /** @type meteoJS/synview/tooltip~Tooltip|undefined */
  53.     this.tooltip = undefined;
  54.     
  55.     // Timeline initialisieren
  56.     this.options.timeline.on('change:time', function () {
  57.       this.getTypeCollection().getItems().map(function (type) {
  58.         type.setDisplayTime(this.options.timeline.getSelectedTime());
  59.       }, this);
  60.     }, this);
  61.     
  62.     // typeCollection initialisieren
  63.     var timeline = this.options.timeline;
  64.     var updateTimes = function () {
  65.       var isLastTime = timeline.isLastEnabledTime();
  66.       // Zeitpunkte einlesen
  67.       if (this.getVisible())
  68.         timeline.setTimesBySetID(this.getId(), this.getResourceCollection().getTimes());
  69.       else
  70.         timeline.setTimesBySetID(this.getId(), []);
  71.       // Switch to last timestamp, if it was the last one already before.
  72.       if (isLastTime)
  73.         timeline.last();
  74.       else if (isNaN(timeline.getSelectedTime()))
  75.         timeline.first();
  76.     };
  77.     var appendType = function (type) {
  78.       type.setLayerGroup(this.options.map.makeLayerGroup());
  79.       updateTimes.call(type);
  80.       type.setDisplayTime(this.getTimeline().getSelectedTime());
  81.       type.on('change:resources', updateTimes);
  82.       // Zeitpunkte bei visible-Änderungen löschen oder hinzufügen
  83.       type.on('change:visible', updateTimes);
  84.       if (type.getTooltip() !== undefined &&
  85.           this.tooltip === undefined) {
  86.         this.tooltip = new Tooltip({
  87.           map: this.options.map,
  88.           typeCollection: this.typeCollection,
  89.           tooltip: this.options.tooltip
  90.         });
  91.       }
  92.     };
  93.     var removeType = function (type) {
  94.       this.getTimeline().deleteSetID(type.getId());
  95.       // Layer-Group löschen (bzw. aus OL entfernen)
  96.       // Events aus dem Type löschen
  97.     };
  98.     this.typeCollection.on('add:item', appendType, this);
  99.     this.typeCollection.on('remove:item', removeType, this);
  100.     this.typeCollection.on('replace:item', function (type, removedType) {
  101.       appendType.call(this, type);
  102.       removeType.call(this, removedType);
  103.     }, this);
  104.   }
  105.   
  106.   /**
  107.    * Returns timeline object.
  108.    * 
  109.    * @return {meteoJS.timeline} Timeline.
  110.    */
  111.   getTimeline() {
  112.     return this.options.timeline;
  113.   }
  114.   
  115.   /**
  116.    * Returns map object.
  117.    * 
  118.    * @return {meteoJS.synview.map} Map object.
  119.    */
  120.   getMap() {
  121.     return this.options.map;
  122.   }
  123.   
  124.   /**
  125.    * Returns collection object of appended types.
  126.    * 
  127.    * @return {meteoJS.synview.typeCollection} Type collection.
  128.    */
  129.   getTypeCollection() {
  130.     return this.typeCollection;
  131.   }
  132.   
  133.   /**
  134.    * Append a type to this synview. Wrapper for getTypeCollection().append(type),
  135.    * but ensures, that the new type has an id different than undefined.
  136.    * 
  137.    * @param {meteoJS.synview.type} type Type to append.
  138.    * @return {meteoJS.synview} This.
  139.    */
  140.   appendType(type) {
  141.     if (type.getId() === undefined) {
  142.       var prefixId = 'synview-type-';
  143.       var i = 0;
  144.       var newId;
  145.       do {
  146.         newId = prefixId + (i++);
  147.       } while (this.getTypeCollection().containsId(newId));
  148.       type.setId(newId);
  149.     }
  150.     this.getTypeCollection().append(type);
  151.     return this;
  152.   }
  153.   
  154.   /**
  155.    * Returns the tooltip object.
  156.    * 
  157.    * @returns {module:meteoJS/tooltip~Tooltip} - Tooltip object.
  158.    */
  159.   getTooltip() {
  160.     return this.options.tooltip;
  161.   }
  162.   
  163. }