- add LayerControl

- add layer prperty for map
- npm wanted updates

readme.md

@@ -21,6 +21,10 @@ Configure your database connection in .env-file e.g.:
 ```ini
 NODE_ENV=production
 ```
+
+Update npm dependencies:\
+`npm update`
+
 Build production files:\
 `npm run prod`
 

src/js/controls/LayerControl.css

@@ -0,0 +1,134 @@
+/* layers control */
+.gba-controllayers {  
+    background: none repeat scroll 0 0 #FFF;
+   border-radius: 5px;
+}
+
+/* der eigentliche Button */
+.gba-controllayers-toggle {
+ width: 30px;
+   height: 30px;
+   -webkit-user-select: none;
+   -moz-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+   cursor: pointer;
+   border-radius: 5px;
+   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABLFBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmVlZWWlpaXl5eYmJjT09P///+ZmZmdnZ2qqqq3t7fOzs7Pz8/Q0NDR0dHS0tKTk5PU1NTV1dWUlJTKysrMzMzNzc2kpKSlpaWpqambm5uvr6+xsbGioqK+vr7W1tbh4eHi4uLw8PD29vb4+Pj7+/v8/PygoKDY2NjIyMiurq6SkpKwsLCjo6OysrK0tLS1tbW2tracnJy4uLjLy8vZ2dna2trc3Nzf39+6urq8vLzj4+Pl5eXm5ubo6Ojp6enq6uqRkZHz8/P19fW/v7/39/fAwMDCwsKnp6f9/f3+/v6enp7FxcXGxsaampqfn5/Dw8PhTh9TAAAAFHRSTlMAAk9hdXZ+t8fJytPY3N/i7O3v8vSJ2KIAAAFdSURBVHhehZPlcuswEEadpk0Z0orNGGSGMjMz9973f4fGkI7G47rnlzRn9WlntBISqcWVX5hLCsI4i2FMWIjTk8JynJ4R0vwWOQ7i91O8RmZVXRVNHKmxKa62KW3VmIl5HUj20KIeVzJ0QtqB8jX9oVF2AKcBqJxTnrcjyYSBho50TMP0SN5ErsZFu0cjeMzmsasVGk3vCbrhwMsO0yWbwG8NOJVG+ORh0YSjztFtf9Dm7Z36tY6DzjHon6qq0eyM5P2JpuV29iD29L9dxTZ0TSGXXVd2mrqi64Z9UBE9vW/buoum2Dev3QtD0T3qZAN54S//CfEL1EFd0bylZdSqfjiDSPq0ggJfEvJcgOjnSSArZ4b3BxDrQ0KQfzEMSts5v4DYmTUGw+OAwbusWsOOs1slgCOGCYP+maHKoi95HYBgoQp9GejQICPEeKb/+gYT8Z8okZpPR7M0mxS+AQ3gZKp5dNfSAAAAAElFTkSuQmCC') /*img/layer.png*/;
+   background-position: 50% 50%;
+   background-repeat: no-repeat;
+   display: block;
+}
+
+
+.gba-controllayers .gba-controllayers-container {
+   display: none;
+}
+.gba-controllayers-expanded .gba-controllayers-container {
+   display: block;
+   position: relative;
+}
+
+.gba-controllayers-expanded .gba-controllayers-toggle {
+   display: none;
+}
+
+.gba-controllayers-expanded {
+   padding: 6px 10px 6px 6px;
+   color: #333;
+   background: #eaeaea;
+}
+
+.gba-controllayers-selector {
+   margin-top: 2px;
+   position: relative;
+   top: 1px;
+}
+
+.gba-controllayers label {
+   display: block;
+}
+
+.gba-controllayers-separator {
+   height: 0;
+   border-top: 1px solid #ddd;
+   margin: 5px -10px 5px -6px;
+}
+
+
+
+
+.gbaLegendServiceLabel {
+   font-weight: bold;
+}
+
+.gbaLegendLayerLabel {
+   padding-top: 5px;
+}
+
+
+.checkboxFive {
+position: relative;
+width:35px;
+}
+input[type=checkbox] {
+     position: absolute; 
+   overflow: hidden; 
+   clip: rect(0 0 0 0); 
+   height:1px; 
+   width:1px;   
+   padding:0;
+   border:0;
+}
+
+
+/**Create the box for the checkbox*/ 
+.checkboxFive label {
+   cursor: pointer;
+   position: absolute;
+   width: 16px;
+   height: 16px;
+   top: 0;
+   left: 0;
+   background: #eee;
+   border: 1px solid #ddd;
+}
+/* Display the tick inside the checkbox */
+.checkboxFive label:after {
+   opacity: 0.2;
+   content: '';
+   position: absolute;
+   width: 8px;
+   height: 5px;
+   background: transparent;
+   top: 3px;
+   left: 3px;
+   border: 3px solid #333;
+   border-top: none;
+   border-right: none;
+   -webkit-transform: rotate(-45deg);
+   -moz-transform: rotate(-45deg);
+   -o-transform: rotate(-45deg);
+   -ms-transform: rotate(-45deg);
+   transform: rotate(-45deg);
+}
+/**
+
+* Create the hover event of the tick
+
+*/
+
+.checkboxFive label:hover::after {
+opacity: 0.5;
+}
+
+/**
+
+* Create the checkbox state for the tick
+
+*/
+
+.checkboxFive input[type=checkbox]:checked + label:after {
+opacity: 1;
+}
+

src/js/controls/LayerControl.js

@@ -0,0 +1,164 @@
+import { Control } from "./Control";
+import { Group } from 'three/src/objects/Group';
+import * as util from '../core/utilities';
+import * as dom from '../core/domUtil';
+import * as domEvent from '../core/domEvent';
+
+import './LayerControl.css';
+
+export class LayerControl extends Control {
+
+    // default options
+    options = {
+        collapsed: true,
+        position: 'topright',
+        autoZIndex: true
+    };
+
+    //private class fileds:
+    _mainMap;
+    _scene;
+    _objectGroup;
+    _layersLink;
+    _separator;
+    _baseLayersList;
+    _overlaysList
+    _layers;
+    _handlingClick;
+
+    constructor(overlayLayers, options) {
+        super(options);
+
+        this._objectGroup = new Group();
+        this._objectGroup.visible = true;
+        this._layers = {};
+        util.setOptions(this, options);
+
+        for (let i in overlayLayers) {
+            this._addLayer(overlayLayers[i], overlayLayers[i].name, true);
+        }
+    }
+
+    onAdd(map) {
+        this._mainMap = map;
+
+        let className = "gba-controllayers"
+        let container = this._container = dom.createDom("div", { "class": className });
+        domEvent.on(container, 'click', domEvent.stopPropagation);
+
+        let layerContainer = this._layerContainer =  dom.createDom('div', { "class": className + '-container' }, container);
+
+        if (this.options.collapsed) {
+            domEvent.on(container, 'mouseenter', this._expand, this);
+            domEvent.on(container, 'mouseleave', this._collapse, this);
+
+            ///////////////// der eigentliche Button
+            this._layersLink = dom.createDom("span", { "class": className + "-toggle", title: 'Layers' }, container);
+
+            domEvent.on(this._layersLink, 'focus', this._expand, this);
+        }
+        else {
+            this._expand();
+        }
+        this._baseLayersList = dom.createDom('div', { "class": className + '-base' }, layerContainer);
+        this._separator = dom.createDom('div', { "class": className + '-separator' }, layerContainer);
+        //this._overlaysList = dom.createDom('div', { "class": className + '-overlays' }, layerContainer);
+        var overlayTable = dom.createDom("table", { cellpadding: 0, cellspacing: 0, width: "95%", "class": className + '-overlays' }, layerContainer);
+        this._overlaysList = dom.createDom("tbody", {}, overlayTable);
+
+        this._updateLayerList();
+
+        return container;
+    }
+
+    _addLayer(layer, name, overlay) {
+        let id = util.stamp(layer);
+
+        this._layers[id] = {
+            layer: layer,
+            name: name,
+            overlay: overlay
+        };
+        layer.addListener('visibility-change', this._updateLayerList, this);     
+    }
+
+    _updateLayerList() {
+        if (!this._container) {
+            return;
+        }
+
+        this._baseLayersList.innerHTML = '';
+        this._overlaysList.innerHTML = '';
+
+        let baseLayersPresent = false;
+        let overlaysPresent = false;
+       
+
+        for (let i in this._layers) {
+            let obj = this._layers[i];
+            this._addLegendEntry(obj);
+            //this._addOpacitySlider(obj);
+            overlaysPresent = overlaysPresent || obj.overlay;
+            baseLayersPresent = baseLayersPresent || !obj.overlay;
+        }
+        this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';
+    }
+
+    _addLegendEntry (obj) {
+        var checked = obj.layer.visible;//this._map.hasLayer(obj.layer);
+        var container = obj.overlay ? this._overlaysList : this._baseLayersList;
+        //container.appendChild(legendEntryRow);
+
+        var legendEntryRow = dom.createDom("tr", { style: "display: row-table; height: 20px;" }, container);
+        //domStyle.set(legendEntryRow, 'display', rowVisibility);
+        //dom.setProperties(legendEntryRow, { style: "display: row-table;" });
+        var chkDataCell = dom.createDom("td", { "class": "checkboxFive" }, legendEntryRow);
+        var lblDataCell = dom.createDom("td", {}, legendEntryRow);
+
+
+        var input = dom.createDom("input", { type: 'checkbox', checked: checked, id: util.stamp(obj.layer) }, chkDataCell);
+        input.layerId = util.stamp(obj.layer);
+        domEvent.on(input, 'click', function () { this._onInputClick(util.stamp(obj.layer)); }, this);
+        var chkLabel = dom.createDom("label", { for: util.stamp(obj.layer) }, chkDataCell);
+
+        //var span = dom.createDom("span", { innerHTML: " " + obj.name }, lblDataCell);
+        //legend entry label
+        var _table = dom.createDom("table", { width: "95%", dir: "ltr" }, lblDataCell);
+        var _tbody = dom.createDom("tbody", {}, _table);
+        var _tr = dom.createDom("tr", {}, _tbody);
+        var _td = dom.createDom("td", { innerHTML: obj.name, align: this.alignRight ? "right" : "left" }, _tr);
+
+
+
+
+        return legendEntryRow;
+
+    }
+
+    _onInputClick (layerId) {
+        let inputs = this._layerContainer.getElementsByTagName('input');  
+        this._handlingClick = true;
+
+        for (let i = 0; i <  inputs.length; i++) {
+            let input = inputs[i];
+            if (input.type == 'checkbox' && layerId === input.layerId) {
+                let obj = this._layers[input.layerId];
+                var isChecked = input.checked;
+                obj.layer.setVisible(isChecked);
+            }
+        }
+
+        this._handlingClick = false;
+        this._map.update();
+        //this._refocusOnMap();
+    }
+
+    _expand() {
+        this._container.classList.add("gba-controllayers-expanded");
+    }
+
+    _collapse() {
+        this._container.classList.remove("gba-controllayers-expanded");
+    }
+
+}

src/js/core/EventEmitter.js

@@ -4,7 +4,6 @@ import * as util from './utilities';
 
 class EventEmitter {
     constructor() {
-        var test = "test";
     }
 
     _getEvents() {
@@ -147,6 +146,7 @@ class EventEmitter {
         }
         return this;
     }
+
     hasEventListeners(type) { // (String) -> Boolean
         var events = this[eventsKey];
         return !!events && ((type in events && events[type].length > 0) ||
@@ -189,18 +189,15 @@ class EventEmitter {
         return this;
     }
 
-
-
-
 }
 
-// aliases; we should ditch those eventually
+// // aliases; we should ditch those eventually
 
-// @method on(…): this
+// // @method on(…): this
-// Alias to [`on(…)`](#evented-on)
+// // Alias to [`on(…)`](#evented-on)
-EventEmitter.on = EventEmitter.addListener;
+// EventEmitter.prototype.on = EventEmitter.addListener;
 
-// @method off(…): this
+// // @method off(…): this
-EventEmitter.off = EventEmitter.removeListener;
+// EventEmitter.prototype.off = EventEmitter.removeListener;
 
 export { EventEmitter };

src/js/core/Map.js

@@ -26,6 +26,10 @@ class Map extends OrbitControls {
         this.initControls();
     }
 
+    get layers() {
+        return this._layers;
+    }
+
     _initControlPos() {
         //var test = document.getElementById("webgl");
 

src/js/layer/TinLayer.js

@@ -41,7 +41,8 @@ class TinLayer extends Layer {
 
     setVisible(visible) {
         this.visible = visible;
-        // this.objectGroup.visible = visible;       
+        this.mainMesh.visible = visible;    
+        this.emit('visibility-change');
     }
 
     async onAdd(map) {

src/js/main.js

@@ -9,6 +9,7 @@ import { Map } from './core/Map';
 import * as domEvent from './core/domEvent';
 import { Coordinates } from './controls/Coordinates';
 import { NortArrow } from './controls/NorthArrow';
+import { LayerControl } from './controls/LayerControl';
 import { Mesh } from 'three/src/objects/Mesh';
 import { SphereGeometry } from 'three/src/geometries/SphereGeometry';
 import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
@@ -143,6 +144,11 @@ class Application {
         });
         this.map.addLayer(dxf140Layer);
 
+        new LayerControl(this.map.layers, {
+            collapsed: true
+        }).addTo(this.map);
+
+
         domEvent.on(window, 'resize', this.onWindowResize, this);
         domEvent.on(window, 'keydown', this.keydown, this);
         this.start();