- 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
This commit is contained in:
Arno Kaimbacher
parent
ca1a983665
commit
e62d4908f0
1341
package-lock.json
generated
1341
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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; */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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-top: -10px; */
|
||||
margin-left: -7.5px;
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.slider-handle.round {
|
||||
/* border-radius: 20px; */
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.slider-handle.triangle {
|
||||
|
|
|
|||
|
|
@ -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.layout();
|
||||
// this.percentage[this.dragged] = percentage;
|
||||
// this.layout();
|
||||
|
||||
domEvent.on(this.picker, "mousemove", this.mousemove, this);
|
||||
domEvent.on(this.picker, 'mouseup', this.mouseup, this);
|
||||
|
|
@ -221,9 +232,16 @@ class RangeSlider extends EventEmitter {
|
|||
//if (this.options.inverse === true) {
|
||||
// val = val * -1;
|
||||
//}
|
||||
// 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);
|
||||
}
|
||||
|
||||
this.emit("slide", { value: value });
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -248,25 +266,25 @@ class RangeSlider extends EventEmitter {
|
|||
// }
|
||||
|
||||
// this.percentage[this.dragged] = percentage;
|
||||
if (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: value });
|
||||
}
|
||||
this.emit("slide", value);
|
||||
}
|
||||
//if (this.options.inverse === true) {
|
||||
// val = val * -1;
|
||||
//}
|
||||
|
||||
// this.layout();
|
||||
// let value = this.calculateValue();
|
||||
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
mouseup(ev) {
|
||||
this.handle1.style.cursor = "pointer";
|
||||
this.sliderTrack.style.cursor = "pointer";
|
||||
this.sliderTrack.style.cursor = "pointer";
|
||||
|
||||
domEvent.off(this.picker, "mousemove", this.mousemove, this);
|
||||
domEvent.off(this.picker, 'mouseup', this.mouseup, this);
|
||||
|
|
@ -277,36 +295,36 @@ class RangeSlider extends EventEmitter {
|
|||
// this.hideTooltip();
|
||||
//}
|
||||
this.element;
|
||||
let value = this.calculateValue();
|
||||
this.emit('onChange', { value: value, status: 'ok'});
|
||||
let value = this.calculateValue();
|
||||
this.emit('onChange', { value: value, status: 'ok' });
|
||||
return false;
|
||||
}
|
||||
|
||||
onMouseLeave() {
|
||||
this.handle1.style.cursor = "pointer";
|
||||
this.sliderTrack.style.cursor = "pointer";
|
||||
this.sliderTrack.style.cursor = "pointer";
|
||||
|
||||
domEvent.off(this.picker, "mousemove", this.mousemove, this);
|
||||
domEvent.off(this.picker, 'mouseup', this.mouseup, this);
|
||||
domEvent.off(this.picker, 'mouseleave', this.onMouseLeave, this);
|
||||
|
||||
this.inDrag = false;
|
||||
|
||||
this.inDrag = false;
|
||||
|
||||
//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[1] / 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.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();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user