- npm updates for dev tools

- three.js update to 0.124.0
- EventEmitter.js: emit args array
- RangeSlider.js and RangeSlider.css: schow also the ticks

package.json

@@ -6,7 +6,7 @@
     "dependencies": {
         "normalize.css": "^8.0.1",
         "proj4": "^2.6.3",
-        "three": "^0.123.0"
+        "three": "^0.124.0"
     },
     "author": "Arno Kaimbacher",
     "license": "MIT",

src/js/controls/Coordinates.js

@@ -53,7 +53,8 @@ export class Coordinates extends Control {
         map.removeListener('mouse-move', this._onMouseMove, this);
     }
 
-    _onMouseMove(event) {
+    _onMouseMove(e) {
+        let event = e[0];
         let canvasOffset = this._getOffset(this.map.domElement);
         let xClickedOnCanvas = event.clientX - canvasOffset.left;
         let yClickedonCanvas = event.clientY - canvasOffset.top;

src/js/controls/SliderControl.css

@@ -1,9 +1,9 @@
-.gba-control-slider {  
+/* .gba-control-slider {  
     background: none repeat scroll 0 0 #FFF;    
-}
+} */
 
 .gba-control-slider.vertical {
-    width: 26px;    
+    /* width: 26px;     */
     height: 100%;
     /* background-color: azure; */
 }

src/js/controls/SliderControl.js

@@ -131,7 +131,7 @@ export class SliderControl extends Control {
     }
 
     _updateValue(e) {
-        this.value = e.value;//this.slider.value;
+        this.value = e[0];//this.slider.value;
         if (this.options.showValue) {
             this._sliderValue.innerHTML = this.value;
         }
@@ -146,7 +146,7 @@ export class SliderControl extends Control {
         //},this);
         for (var prop in this._map._layers) {
             if (this._map._layers.hasOwnProperty(prop)) {
-                var layer = this._map._layers[prop];
+                let layer = this._map._layers[prop];
                 // if (layer.declaredClass === "GridLayer" || layer.declaredClass === "DxfLayer" || layer.declaredClass === "DemLayer")
                 layer.scaleZ(this.value);
             }

src/js/core/EventEmitter.js

@@ -3,7 +3,10 @@ import * as util from './utilities';
 var eventsKey = '_events';
 
 class EventEmitter {
+    // events = {};
+
     constructor() {
+        this.events = {};
     }
 
     _getEvents() {
@@ -93,6 +96,10 @@ class EventEmitter {
         return this;
     }
 
+    on(eventName, fn, context) {
+        return this.addListener(eventName, fn, context);
+    }
+
     removeListener(evt, fn, context) { // ([String, Function, Object]) or (Object[, Object])
 
         if (!this[eventsKey]) {
@@ -147,6 +154,10 @@ class EventEmitter {
         return this;
     }
 
+    off(eventName, fn, context) {
+        return this.removeListener(eventName, fn, context);
+      }
+
     hasEventListeners(type) { // (String) -> Boolean
         var events = this[eventsKey];
         return !!events && ((type in events && events[type].length > 0) ||
@@ -154,12 +165,14 @@ class EventEmitter {
     }
 
     // (String[, Object])
-    emit(type, data) {
+    // emit(type, data) {
+    emit(type, ...args) {
         if (!this.hasEventListeners(type)) {
             return this;
         }
 
-        let event = util.extend({}, data, { type: type, target: this });
+        // let event = util.extend({}, data, { type: type, target: this });
+        let event = util.extend({}, args, { type: type, target: this });
 
         let events = this[eventsKey],
             listeners, i, len, typeIndex, contextId;
@@ -169,7 +182,11 @@ class EventEmitter {
             listeners = events[type].slice();
 
             for (i = 0, len = listeners.length; i < len; i++) {
-                listeners[i].action.call(listeners[i].context, event);
+                // listeners[i].action.call(listeners[i].context, event);
+                let listener = listeners[i];
+                listener.action.call(listener.context, event);
+                
+                // listener.apply(this, args);
             }
         }
 
@@ -181,7 +198,9 @@ class EventEmitter {
 
             if (listeners) {
                 for (i = 0, len = listeners.length; i < len; i++) {
-                    listeners[i].action.call(listeners[i].context, event);
+                    // listeners[i].action.call(listeners[i].context, event);
+                    let listener = listeners[i];
+                    listener.action.call(listener.context, event);
                 }
             }
         }

src/js/core/RangeSlider.css

@@ -1,23 +1,13 @@
-    /* .range-slider-track .dragger {
-      display: block;   
-      position: relative;
-      z-index: 2;     
-      cursor: inherit;
-      border: none;
-      height: inherit;     
-      width: 14px;
-      border-radius: 5%;
-      background: #333;     
-    } */
     .slider {
       display: inline-block;
       vertical-align: middle;
       position: relative;
+      overflow: visible;
     }
 
     .slider.slider-vertical {
       height: 160px;
-      width: 25px;
+      width: 30px;
     }
 
     .slider.slider-vertical .range-slider-track {
@@ -25,16 +15,17 @@
       /* cursor: pointer; */
       width: 5px;
       height: 100%;
-      /* margin-left: -5px; */
+      margin-left: -2.5px;
       left: 50%;
       top: 0;
     }
+
     .slider.slider-vertical .slider-selection {
       width: 100%;
       left: 0;
       top: 0;
       bottom: 0;
-      border-radius:0%;
+      /* border-radius:0%; */
     }
 
     /* .slider-vertical .range-slider-track:before {
@@ -46,9 +37,10 @@
     } */
 
     .slider.slider-vertical .slider-handle {
-      margin-left: -10px;
+      margin-left: -7.5px;
-      /* margin-top: -10px; */
+      margin-top: -4px;
     }
+
     .slider.slider-vertical .slider-handle.triangle {
       border-width: 10px 0 10px 10px;
       width: 1px;
@@ -57,7 +49,20 @@
       margin-left: 0;
     }
 
+    .slider-ticks {
+      overflow: visible;
+    }
 
+    .slider-tick {
+      position: absolute;
+      width: 100%;
+      min-height: 2px;
+      /* margin-left: 20px; */
+      /* padding-top: 2.5px; */
+      background-color: #6b716f;
+      overflow: visible;
+      margin-top: -2px;
+    }
 
     /*.no-select {
     -webkit-touch-callout: none;
@@ -86,7 +91,6 @@
       left: 0;
     }
 
- 
     .slider.slider-horizontal .slider-selection {
       height: 100%;
       top: 0;
@@ -98,17 +102,15 @@
       margin-top: -5px;
     }
 
-
-
     .range-slider-track {
       position: absolute;
       cursor: pointer;
-      background-color: #333;
+      /* background-color: #333; */
+      background-color: #6b716f;
       box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
       border-radius: 4px;
     }
 
-
     /*.slider.slider-horizontal .slider-handle.triangle {
   border-width: 0 10px 10px 10px;
   width: 0;
@@ -117,10 +119,10 @@
   margin-top: 0;
 }*/
 
-
+    .slider input {
-.slider input {
       display: none;
-}
+    }
+
     .slider .tooltip-inner {
       white-space: nowrap;
     }
@@ -143,10 +145,10 @@
 
     .slider-handle {
       position: absolute;
-      width: 25px;
+      width: 20px;
       height: 10px;
       /* background-color: #0e90d2; */
-      background-color:black;
+      background-color: black;
       /* background-image: -moz-linear-gradient(top, #149bdf, #0480be);
       background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
       background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
@@ -157,10 +159,7 @@
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
       opacity: 0.8;
       border: 0 solid transparent;
-    }
+      z-index: 999;
-
-    .slider-handle.round {
-      /* border-radius: 20px; */
     }
 
     .slider-handle.triangle {

src/js/core/RangeSlider.js

@@ -16,12 +16,10 @@ class RangeSlider extends EventEmitter {
         orientation: "horizontal",
         rangeClass: "", // add extra custom class for the range slider track
         draggerClass: "",// add extra custom class for the range slider dragger
-        //min: -50,
-        //max: 50,
         selection: 'before',
         tooltip: 'show',
         handle: 'round',
-        step: 1
+        stepSize: 1
     };
 
     constructor(elem, options) {
@@ -40,6 +38,7 @@ class RangeSlider extends EventEmitter {
                 '<div class="slider-handle"></div>' +
                 '<div class="slider-handle"></div>' +
                 '</div>' +
+                '<div class="slider-ticks"></div>' +
                 '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
 
         }, this.element);
@@ -49,6 +48,8 @@ class RangeSlider extends EventEmitter {
         this.tooltip = this.picker.getElementsByClassName('tooltip')[0];
         this.tooltipInner = this.tooltip.getElementsByClassName('tooltip-inner')[0];
         this.sliderTrack = this.picker.getElementsByClassName('range-slider-track')[0];
+        this.sliderTicks = this.picker.getElementsByClassName('slider-ticks')[0];
+
 
         this.orientation = this.options.orientation;
 
@@ -77,12 +78,22 @@ class RangeSlider extends EventEmitter {
 
         this.min = this.options.min;
         this.max = this.options.max;
-        this.step = this.options.step;
+        this.stepSize = this.options.stepSize;
         this.value = this.options.value;
         //if (this.value[1]) {
         //    this.range = true;
         //}
 
+        let positionStep = 160/4;
+        let topPosition = 0;
+        for (let i = this.min; i <= this.max; i = i + this.stepSize) {
+            let sliderTick = dom.createDom("div", {
+                "class": 'slider-tick'
+            }, this.sliderTicks);
+            sliderTick.style.top = topPosition + 'px';
+            topPosition = topPosition + positionStep;
+        }
+
         this.selection = this.options.selection;
         this.selectionEl = this.picker.getElementsByClassName('slider-selection')[0];
         if (this.selection === 'none') {
@@ -127,7 +138,7 @@ class RangeSlider extends EventEmitter {
         this.percentage = [
             (this.value[0] - this.min) * 100 / this.diff,
             (this.value[1] - this.min) * 100 / this.diff,
-            this.step * 100 / this.diff
+            this.stepSize * 100 / this.diff
         ];
 
         //this.offset = this.picker.offset();
@@ -209,8 +220,8 @@ class RangeSlider extends EventEmitter {
             this.dragged = 0;
         }
 
-        this.percentage[this.dragged] = percentage;
+        // this.percentage[this.dragged] = percentage;
-        this.layout();
+        // this.layout();
 
         domEvent.on(this.picker, "mousemove", this.mousemove, this);
         domEvent.on(this.picker, 'mouseup', this.mouseup, this);
@@ -221,8 +232,15 @@ class RangeSlider extends EventEmitter {
         //if (this.options.inverse === true) {
         //    val = val * -1;
         //}
+        // this.emit("slide", { value: value });
 
-        this.emit("slide", { value: value });
+        // this.percentage[this.dragged] = percentage;
+        if (this.percentage[this.dragged] != percentage) {
+            this.percentage[this.dragged] = percentage;
+            this.layout();
+            let value = this.calculateValue();
+            this.emit("slide", value);
+        }
 
         return false;
     }
@@ -252,7 +270,7 @@ class RangeSlider extends EventEmitter {
             this.percentage[this.dragged] = percentage;
             this.layout();
             let value = this.calculateValue();
-            this.emit("slide", { value: value });
+            this.emit("slide", value);
         }
         //if (this.options.inverse === true) {
         //    val = val * -1;
@@ -278,7 +296,7 @@ class RangeSlider extends EventEmitter {
         //}
         this.element;
         let value = this.calculateValue();
-        this.emit('onChange', { value: value, status: 'ok'});       
+        this.emit('onChange', { value: value, status: 'ok' });
         return false;
     }
 
@@ -294,19 +312,19 @@ class RangeSlider extends EventEmitter {
 
         //also change border geometry
         let value = this.calculateValue();
-        this.emit('onChange', { value: value, status: 'ok'});    
+        this.emit('onChange', { value: value, status: 'ok' });
     }
 
     calculateValue() {
         var val;
         if (this.range) {
             val = [
-                (this.min + Math.round((this.diff * this.percentage[0] / 100) / this.step) * this.step),
+                (this.min + Math.round((this.diff * this.percentage[0] / 100) / this.stepSize) * this.stepSize),
-                (this.min + Math.round((this.diff * this.percentage[1] / 100) / this.step) * this.step)
+                (this.min + Math.round((this.diff * this.percentage[1] / 100) / this.stepSize) * this.stepSize)
             ];
             this.value = val;
         } else {
-            val = (this.min + Math.round((this.diff * this.percentage[0] / 100) / this.step) * this.step);
+            val = (this.min + Math.round((this.diff * this.percentage[0] / 100) / this.stepSize) * this.stepSize);
             this.value = [val, this.value[1]];
         }
         return val;
@@ -316,7 +334,7 @@ class RangeSlider extends EventEmitter {
         if (this.touchCapable) {
             ev = ev.touches[0];
         }
-        var percentage = (ev[this.mousePos] - this.offset[this.stylePos]) * 100 / this.size;
+        let percentage = (ev[this.mousePos] - this.offset[this.stylePos]) * 100 / this.size;
         percentage = Math.round(percentage / this.percentage[2]) * this.percentage[2];
         return Math.max(0, Math.min(100, percentage));
     }
@@ -347,7 +365,7 @@ class RangeSlider extends EventEmitter {
         this.percentage = [
             (this.value[0] - this.min) * 100 / this.diff,
             (this.value[1] - this.min) * 100 / this.diff,
-            this.step * 100 / this.diff
+            this.stepSize * 100 / this.diff
         ];
         this.layout();
     }