fdds/js/components/timeSeriesMarker.js

   1 import { rgbToHex } from '../util.js';
   2 import { map } from '../map.js';
   3 import { controllers } from './Controller.js';
   4 import { TimeSeriesButton } from './timeSeriesButton.js';
   5
   6 export class TimeSeriesMarker extends HTMLElement {
   7     constructor(latLon) {
   8         super();
   9         const roundLatLon = (num) => Math.round(num*100)/100;
  10         this.innerHTML = `
  11             <div id='timeSeriesMarker'>
  12                 <div id='marker-menu'>
  13                     <span id='hideMenu' class='hideMenu interactive-button'>hide</span>
  14                     <div>
  15                         <label style='display: inline-block; width: 100px' for='timeseries-custom-name'>Add name: </label>
  16                         <input id='timeseries-custom-name'></input>
  17                     </div>
  18
  19                     <div>
  20                         <span style='margin: 1px; margin-right: 10px'>lat: ${roundLatLon(latLon.lat)} lon: ${roundLatLon(latLon.lng)}</span>
  21                         <span id='rgb-value' style='margin:0'>No layer with colorbar to show values</span>
  22                     </div>
  23                     <p id='colorbar-location' style='margin: 0'></p>
  24                     <button class='timeSeriesButton' id='open-timeseries-menu'>generate timeseries</button>
  25                 </div>
  26
  27                 <div id='timeseries-menu' class='hidden'>
  28                     <span id='close-timeseries-menu' class='hideMenu interactive-button'>cancel</span>
  29                 </div>
  30             </div>
  31         `;
  32         this.chartColor = null;
  33         this.colorInputted = false;
  34         this.clrbarLocation = null;
  35         this.hideOnChart = false;
  36         this.infoOpen = false;
  37         this.timeSeriesButton = this.createTimeSeriesButton();
  38     }
  39
  40     createTimeSeriesButton() {
  41         let timeSeriesButton = new TimeSeriesButton();
  42         const timeSeriesMenu = this.querySelector('#timeseries-menu');
  43         timeSeriesMenu.appendChild(timeSeriesButton);
  44         return timeSeriesButton;
  45     }
  46
  47     connectedCallback() {
  48         this.initializeTimeseriesMenu();
  49     }
  50
  51     initializeTimeseriesMenu() {
  52         const generateTimeseries = this.querySelector('#open-timeseries-menu');
  53         const markerMenu = this.querySelector('#marker-menu');
  54         const timeseriesMenu = this.querySelector('#timeseries-menu');
  55         const closeTimeseriesMenu = this.querySelector('#close-timeseries-menu');
  56         generateTimeseries.onpointerdown = () => {
  57             markerMenu.classList.add('hidden');
  58             timeseriesMenu.classList.remove('hidden');
  59         }
  60         closeTimeseriesMenu.onpointerdown = () => {
  61             markerMenu.classList.remove('hidden');
  62             timeseriesMenu.classList.add('hidden');
  63         }
  64     }
  65
  66     getChartColor() {
  67         return this.chartColor;
  68     }
  69
  70     setChartColor(chartColor) {
  71         this.chartColor = chartColor;
  72         this.colorInputted = true;
  73     }
  74
  75     setName(name) {
  76         this.querySelector('#timeseries-custom-name').value = name;
  77     }
  78
  79     getName() {
  80         return this.querySelector('#timeseries-custom-name').value;
  81     }
  82
  83     bindHide(fun) {
  84         const hideButton = this.querySelector('#hideMenu');
  85         hideButton.onclick = fun;
  86     }
  87
  88     setRGBValues(rgb, clrbarLocation) {
  89         let [r, g, b] = rgb;
  90         if ((r + g + b) > 745) {
  91             [r, g, b] = [0, 0, 0];
  92         }
  93         if (!this.colorInputted) {
  94             let hexValue = rgbToHex(r, g, b);
  95             this.chartColor = hexValue;
  96         }
  97         this.clrbarLocation = clrbarLocation;
  98         const clrbarP = this.querySelector('#colorbar-location');
  99         const rgbP = this.querySelector('#rgb-value');
 100         clrbarP.style.display = 'none';
 101         rgbP.innerHTML = 'No layer with colorbar to show values of';
 102         rgbP.style.color = 'black';
 103         if (clrbarLocation != null) {
 104             this.enableTimeSeriesButtons();
 105             clrbarP.style.display = 'block';
 106             clrbarP.innerHTML = 'colorbar location: ' + clrbarLocation;
 107             rgbP.style.color = `rgb(${r},${g},${b})`;
 108             rgbP.innerHTML = `pixel value: R${r} G${g} B${b}`;
 109         } else {
 110             this.disableTimeSeriesButtons();
 111         }
 112     }
 113
 114     disableTimeSeriesButtons() {
 115         const openTimeSeriesButton = this.querySelector('#open-timeseries-menu');
 116         openTimeSeriesButton.disabled = true;
 117         this.timeSeriesButton.getButton().disabled = true;
 118     }
 119
 120     enableTimeSeriesButtons() {
 121         const openTimeSeriesButton = this.querySelector('#open-timeseries-menu');
 122         openTimeSeriesButton.disabled = false;
 123         this.timeSeriesButton.getButton().disabled = false;
 124     }
 125 }
 126
 127 export class Marker {
 128     constructor(latLon, coords) {
 129         this._latlng = latLon;
 130         this.imageCoords = coords;
 131
 132         this.popup = L.popup({closeOnClick: false, autoClose: false, autoPan: false}).setLatLng(latLon).addTo(map);
 133         this.timeSeriesMarker = new TimeSeriesMarker(latLon, coords);
 134         this.timeSeriesMarker.bindHide(() => this.hideMarkerInfo());
 135         this.popup.setContent(this.timeSeriesMarker);
 136         this.popup.getElement().style.display = 'none';
 137
 138         let svgString = `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>
 139                                 <path d="M0 0h24v24H0V0z" fill="none"></path>
 140                                 <path d="M7 10l5 5 5-5H7z"></path>
 141                               </svg>`;
 142         let myIconUrl = encodeURI("data:image/svg+xml," + svgString).replace('#','%23');
 143         let markerIcon = L.icon({iconUrl: myIconUrl, iconAnchor: [13, 16]});
 144
 145         this.marker = L.marker(latLon, {icon: markerIcon, autoPan: false}).addTo(map);
 146         this.popup.on('remove', () => {
 147             controllers.timeSeriesMarkers.remove(this);
 148             this.marker.removeFrom(map);
 149         });
 150         this.marker.on('mousedown', () => {
 151             if (this.timeSeriesMarker.infoOpen) {
 152                 this.hideMarkerInfo();
 153             } else {
 154                 this.showMarkerInfo();
 155             }
 156         });
 157     }
 158
 159     hideMarkerInfo() {
 160         let popupElem = this.popup.getElement();
 161         popupElem.style.display = 'none';
 162         this.timeSeriesMarker.infoOpen = false;
 163     }
 164
 165     showMarkerInfo() {
 166         let popupElem = this.popup.getElement();
 167         popupElem.style.display = 'block';
 168         this.timeSeriesMarker.infoOpen = true;
 169     }
 170
 171     getContent() {
 172         return this.timeSeriesMarker;
 173     }
 174 }
 175
 176 window.customElements.define('time-series-marker', TimeSeriesMarker);