- TinLayer.js: add scaleZ methode for z-exaggeration
- new RangeSlider.js and RangeSlider.css - new SliderControl.js and SliderControl.css - small changes in EventEmitter.js - change GetiefExplore.code-workspace for debugging - document formating for page.css
This commit is contained in:
Arno Kaimbacher
parent
8b57f1dcb8
commit
ca1a983665
|
|
@ -18,6 +18,7 @@
|
|||
"url": "http://localhost:8080",
|
||||
"webRoot": "${workspaceFolder}",
|
||||
"breakOnLoad": true,
|
||||
"runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe",
|
||||
// "sourceMapPathOverrides": {
|
||||
// "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
|
||||
// "webpack:///./*": "${workspaceFolder}/*",
|
||||
|
|
|
|||
971
src/css/page.css
971
src/css/page.css
File diff suppressed because it is too large
Load Diff
105
src/js/controls/SliderControl.css
Normal file
105
src/js/controls/SliderControl.css
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
.gba-control-slider {
|
||||
background: none repeat scroll 0 0 #FFF;
|
||||
}
|
||||
|
||||
.gba-control-slider.vertical {
|
||||
width: 26px;
|
||||
height: 100%;
|
||||
/* background-color: azure; */
|
||||
}
|
||||
|
||||
.gba-control-slider.horizontal {
|
||||
height: 26px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.gba-control-slider .leaflet-range-icon {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+DQogICAgPHBhdGggZD0iTTE1IDE3djJoMnYtMmgydi0yaC0ydi0yaC0ydjJoLTJ2Mmgyem01LTE1SDRjLTEuMSAwLTIgLjktMiAydjE2YzAgMS4xLjkgMiAyIDJoMTZjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnpNNSA1aDZ2Mkg1VjV6bTE1IDE1SDRMMjAgNHYxNnoiLz4NCjwvc3ZnPg==');
|
||||
}
|
||||
|
||||
.gba-control-slider input[type=range] {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
z-index: 200;
|
||||
width: 100%;
|
||||
border: 1px solid #e6e6e6;
|
||||
background-color: #e6e6e6;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#d2d2d2));
|
||||
background-image: -webkit-linear-gradient(right, #e6e6e6, #d2d2d2);
|
||||
background-image: -moz-linear-gradient(right, #e6e6e6, #d2d2d2);
|
||||
background-image: -ms-linear-gradient(right, #e6e6e6, #d2d2d2);
|
||||
background-image: -o-linear-gradient(right, #e6e6e6, #d2d2d2)
|
||||
}
|
||||
|
||||
.gba-control-slider input[type=range][orient=horizontal] {
|
||||
margin-top: 5px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.gba-control-slider input[type=range][orient=vertical] {
|
||||
height: 150px;
|
||||
/* writing-mode: bt-lr; */
|
||||
|
||||
/*
|
||||
* -webkit-appearance is non-standard and may break in the future:
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
|
||||
* However, for now it's the only way to get a vertical range input on Chrome.
|
||||
*/
|
||||
/* -webkit-appearance: slider-vertical; */
|
||||
|
||||
writing-mode: bt-lr; /* IE */
|
||||
-webkit-appearance: slider-vertical; /* WebKit */
|
||||
|
||||
/* -webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg) */
|
||||
}
|
||||
|
||||
input[type=range].range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #FF0000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=range].round {
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* .gba-control-slider span {
|
||||
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,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAAAAAAeW/F+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAeUlEQVQoz8XTIQ6AMAyF4d3/BrUkSA6CRcAJJoYYDgX5ESxhoi1goPZL9rp2C+JW+Ip3lzOLwz0w2AxAazFn2dmJ5LUWiQ8YqhyVRaR0ofGlGleqt8Ydl1NUrtIVLsq7e2eyPbUVgM1fqD3zBuiclYxM7lOcf/wGSh2kFUcUTGKFMQAAAABJRU5ErkJggg==');
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
} */
|
||||
|
||||
/*paragraph for showing the value*/
|
||||
.gba-control-slider p.gba-control-slider-value {
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
display: none;
|
||||
}
|
||||
158
src/js/controls/SliderControl.js
Normal file
158
src/js/controls/SliderControl.js
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
import { Control } from "./Control";
|
||||
import * as dom from '../core/domUtil';
|
||||
import * as util from '../core/utilities';
|
||||
import * as domEvent from '../core/domEvent';
|
||||
import { RangeSlider } from '../core/RangeSlider';
|
||||
|
||||
import './SliderControl.css';
|
||||
|
||||
export class SliderControl extends Control {
|
||||
|
||||
options = {
|
||||
size: '100px',
|
||||
position: 'topright',
|
||||
min: 1,
|
||||
max: 5,
|
||||
step: 0.5,
|
||||
id: "slider",
|
||||
value: 1,
|
||||
collapsed: false,
|
||||
title: 'Z Slider',
|
||||
orientation: 'vertical',
|
||||
showValue: true,
|
||||
syncSlider: false,
|
||||
iconClass: 'leaflet-range-icon',
|
||||
icon: true
|
||||
};
|
||||
map;
|
||||
|
||||
constructor(options) {
|
||||
super(options);
|
||||
|
||||
util.setOptions(this, options);
|
||||
}
|
||||
|
||||
onAdd(map) {
|
||||
this.map = map;
|
||||
let container = this._container = this._initLayout();
|
||||
//this.update(this.options.value + "");
|
||||
return container;
|
||||
}
|
||||
|
||||
_initLayout() {
|
||||
|
||||
var className = 'gba-control-slider';
|
||||
var className2 = className + ' ' + this.options.orientation;
|
||||
//this._container = domUtil.create('div', className + ' ' + className + '-' + this.options.orientation);
|
||||
let container = this._container = dom.createDom("div", { "class": className2 });
|
||||
|
||||
///////////////// der eigentliche Button
|
||||
//this._sliderLink = domUtil.create('a', className + '-toggle', this._container);
|
||||
//this._sliderLink.setAttribute("title", this.options.title);
|
||||
//this._sliderLink.innerHTML = this.options.logo;
|
||||
this._sliderLink = dom.createDom("span", { "class": className + "-toggle", title: this.options.title }, container);
|
||||
|
||||
//if (this.options.showValue) {
|
||||
// this._sliderValue = L.DomUtil.create('p', className + '-value', this._container);
|
||||
// this._sliderValue.innerHTML = this.options.getValue(this.options.value);
|
||||
//}
|
||||
//show value
|
||||
this._sliderValue = dom.createDom("p", { "class": className + "-value", innerHTML: this.options.value }, container);
|
||||
|
||||
//if (this.options.increment) {
|
||||
// this._plus = L.DomUtil.create('a', className + '-plus', this._container);
|
||||
// this._plus.innerHTML = "+";
|
||||
// L.DomEvent.on(this._plus, 'click', this._increment, this);
|
||||
// L.DomUtil.addClass(this._container, 'leaflet-control-slider-incdec');
|
||||
//}
|
||||
|
||||
//this._sliderContainer = L.DomUtil.create('div', 'leaflet-slider-container', this._container);
|
||||
this._sliderContainer = dom.createDom('div', { "class": 'gba-slider-container' }, container);
|
||||
|
||||
// this.slider = dom.createDom('input', { "class": 'gba-slider round' }, this._sliderContainer);
|
||||
// if (this.options.orientation === 'vertical') { this.slider.setAttribute("orient", "vertical"); }
|
||||
// this.slider.setAttribute("title", this.options.title);
|
||||
// this.slider.setAttribute("id", this.options.id);
|
||||
// this.slider.setAttribute("type", "range");
|
||||
// this.slider.setAttribute("min", this.options.min);
|
||||
// this.slider.setAttribute("max", this.options.max);
|
||||
// this.slider.setAttribute("step", this.options.step);
|
||||
// this.slider.setAttribute("value", this.options.value);
|
||||
|
||||
this.slider = new RangeSlider(this._sliderContainer, {
|
||||
orientation: "vertical",
|
||||
value: 1,
|
||||
max: 5, min: 1,
|
||||
inverse: true,
|
||||
id: "z-slider"
|
||||
});
|
||||
|
||||
//if (this.options.syncSlider) {
|
||||
// L.DomEvent.on(this.slider, "input", function (e) {
|
||||
// this._updateValue();
|
||||
// }, this);
|
||||
//} else {
|
||||
// L.DomEvent.on(this.slider, "change", function (e) {
|
||||
// this._updateValue();
|
||||
// }, this);
|
||||
//}
|
||||
// domEvent.on(this.slider, "change", this._updateValue, this);
|
||||
|
||||
this.slider.addListener('slide', this._updateValue, this);
|
||||
|
||||
//if (this.options.increment) {
|
||||
// this._minus = L.DomUtil.create('a', className + '-minus', this._container);
|
||||
// this._minus.innerHTML = "-";
|
||||
// L.DomEvent.on(this._minus, 'click', this._decrement, this);
|
||||
//}
|
||||
|
||||
// if (this.options.showValue) {
|
||||
// if (window.matchMedia("screen and (-webkit-min-device-pixel-ratio:0)").matches && this.options.orientation === 'vertical') {
|
||||
// this.slider.style.width = (this.options.size.replace('px', '') - 36) + 'px';
|
||||
// this._sliderContainer.style.height = (this.options.size.replace('px', '') - 36) + 'px';
|
||||
// }
|
||||
// else if (this.options.orientation === 'vertical') {
|
||||
// this._sliderContainer.style.height = (this.options.size.replace('px', '') - 36) + 'px';
|
||||
// }
|
||||
// else {
|
||||
// this._sliderContainer.style.width = (this.options.size.replace('px', '') - 25) + 'px';
|
||||
// }
|
||||
// }
|
||||
//else {
|
||||
// if (window.matchMedia("screen and (-webkit-min-device-pixel-ratio:0)").matches && this.options.orientation == 'vertical') { this.slider.style.width = (this.options.size.replace('px', '') - 10) + 'px'; this._sliderContainer.style.height = (this.options.size.replace('px', '') - 10) + 'px'; }
|
||||
// else if (this.options.orientation == 'vertical') { this._sliderContainer.style.height = (this.options.size.replace('px', '') - 10) + 'px'; }
|
||||
// else { this._sliderContainer.style.width = (this.options.size.replace('px', '') - 25) + 'px'; }
|
||||
//}
|
||||
|
||||
//L.DomEvent.disableClickPropagation(this._container);
|
||||
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
_updateValue(e) {
|
||||
this.value = e.value;//this.slider.value;
|
||||
if (this.options.showValue) {
|
||||
this._sliderValue.innerHTML = this.value;
|
||||
}
|
||||
//this.options.layers[0].scaleZ(this.value);
|
||||
//this.update(this.value);
|
||||
|
||||
//this.options.layers.forEach(function (layer) {
|
||||
// layer.scaleZ(this.value);
|
||||
//},this);
|
||||
//this._map._layers.forEach(function (layer) {
|
||||
// layer.scaleZ(this.value);
|
||||
//},this);
|
||||
for (var prop in this._map._layers) {
|
||||
if (this._map._layers.hasOwnProperty(prop)) {
|
||||
var layer = this._map._layers[prop];
|
||||
// if (layer.declaredClass === "GridLayer" || layer.declaredClass === "DxfLayer" || layer.declaredClass === "DemLayer")
|
||||
layer.scaleZ(this.value);
|
||||
}
|
||||
}
|
||||
this._map.update();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -159,9 +159,9 @@ class EventEmitter {
|
|||
return this;
|
||||
}
|
||||
|
||||
var event = util.extend({}, data, { type: type, target: this });
|
||||
let event = util.extend({}, data, { type: type, target: this });
|
||||
|
||||
var events = this[eventsKey],
|
||||
let events = this[eventsKey],
|
||||
listeners, i, len, typeIndex, contextId;
|
||||
|
||||
if (events[type]) {
|
||||
|
|
|
|||
172
src/js/core/RangeSlider.css
Normal file
172
src/js/core/RangeSlider.css
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
/* .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;
|
||||
}
|
||||
|
||||
.slider.slider-vertical {
|
||||
height: 160px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.slider.slider-vertical .range-slider-track {
|
||||
cursor: pointer;
|
||||
/* cursor: pointer; */
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
/* margin-left: -5px; */
|
||||
left: 50%;
|
||||
top: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-selection {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius:0%;
|
||||
}
|
||||
|
||||
/* .slider-vertical .range-slider-track:before {
|
||||
top: 0;
|
||||
right: auto;
|
||||
left: 9px;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
} */
|
||||
|
||||
.slider.slider-vertical .slider-handle {
|
||||
margin-left: -10px;
|
||||
/* margin-top: -10px; */
|
||||
}
|
||||
.slider.slider-vertical .slider-handle.triangle {
|
||||
border-width: 10px 0 10px 10px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-left-color: #0480be;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*.no-select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}*/
|
||||
|
||||
.slider {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slider.slider-horizontal {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.slider.slider-horizontal .range-slider-track {
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
margin-top: -5px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
.slider.slider-horizontal .slider-selection {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.slider.slider-horizontal .slider-handle {
|
||||
margin-left: -10px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.range-slider-track {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
background-color: #333;
|
||||
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;
|
||||
height: 0;
|
||||
border-bottom-color: #0480be;
|
||||
margin-top: 0;
|
||||
}*/
|
||||
|
||||
|
||||
.slider input {
|
||||
display: none;
|
||||
}
|
||||
.slider .tooltip-inner {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.slider-selection {
|
||||
position: absolute;
|
||||
background-image: -moz-linear-gradient(top, #808080, rgba(0, 0, 0, 0.15));
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from( #808080), to(#f9f9f9));
|
||||
background-image: -webkit-linear-gradient(top, #808080, #f9f9f9);
|
||||
background-image: -o-linear-gradient(top, #808080, #f9f9f9);
|
||||
background-image: linear-gradient(to bottom, #808080, #f9f9f9);
|
||||
background-repeat: repeat-x;
|
||||
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#fff9f9f9', GradientType=0); */
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.slider-handle {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 10px;
|
||||
/* background-color: #0e90d2; */
|
||||
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);
|
||||
background-image: -o-linear-gradient(top, #149bdf, #0480be);
|
||||
background-image: linear-gradient(to bottom, #149bdf, #0480be);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); */
|
||||
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; */
|
||||
}
|
||||
|
||||
.slider-handle.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
357
src/js/core/RangeSlider.js
Normal file
357
src/js/core/RangeSlider.js
Normal file
|
|
@ -0,0 +1,357 @@
|
|||
import { EventEmitter } from './EventEmitter';
|
||||
import * as dom from '../core/domUtil';
|
||||
import * as util from '../core/utilities';
|
||||
import * as domEvent from '../core/domEvent';
|
||||
|
||||
import './RangeSlider.css';
|
||||
|
||||
class RangeSlider extends EventEmitter {
|
||||
|
||||
over = false;
|
||||
inDrag = false;
|
||||
|
||||
options = {
|
||||
value: 0, // set default value on initiation from `0` to `100` (percentage based)
|
||||
vertical: false, // vertical or horizontal?
|
||||
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
|
||||
};
|
||||
|
||||
constructor(elem, options) {
|
||||
super();
|
||||
|
||||
util.setOptions(this, options);
|
||||
this.value = this.options.value;
|
||||
|
||||
this.element = elem;
|
||||
|
||||
//this._initLayout();
|
||||
this.picker = dom.createDom("div", {
|
||||
"class": 'slider', innerHTML:
|
||||
'<div class="range-slider-track">' +
|
||||
'<div class="slider-selection"></div>' +
|
||||
'<div class="slider-handle"></div>' +
|
||||
'<div class="slider-handle"></div>' +
|
||||
'</div>' +
|
||||
'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
|
||||
|
||||
}, this.element);
|
||||
|
||||
this.id = this.options.id;
|
||||
// var tooltip = this.options.tooltip;
|
||||
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.orientation = this.options.orientation;
|
||||
|
||||
if (this.orientation === "horizontal") {
|
||||
dom.addClass(this.picker, "slider-horizontal");
|
||||
//.addClass('slider-horizontal')
|
||||
//.css('width', this.element.outerWidth());
|
||||
//$(this.picker).css('width', $(this.element).outerWidth());
|
||||
//this.picker.style.width = this.element['offsetWidth'] + 'px';
|
||||
this.orientation = 'horizontal';
|
||||
this.stylePos = 'left';
|
||||
this.mousePos = 'pageX';
|
||||
this.sizePos = 'offsetWidth';
|
||||
//this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px';
|
||||
dom.addClass(this.tooltip, "top");
|
||||
this.tooltip.style.top = -this.tooltip['offsetHeight'] - 14 + 'px';
|
||||
} else {
|
||||
dom.addClass(this.picker, "slider-vertical");
|
||||
this.stylePos = 'top';
|
||||
this.mousePos = 'pageY';
|
||||
this.sizePos = 'offsetHeight';
|
||||
// this.tooltip.addClass('right')[0].style.left = '100%';
|
||||
dom.addClass(this.tooltip, "right");
|
||||
this.tooltip.style.left = "100%";
|
||||
}
|
||||
|
||||
this.min = this.options.min;
|
||||
this.max = this.options.max;
|
||||
this.step = this.options.step;
|
||||
this.value = this.options.value;
|
||||
//if (this.value[1]) {
|
||||
// this.range = true;
|
||||
//}
|
||||
|
||||
this.selection = this.options.selection;
|
||||
this.selectionEl = this.picker.getElementsByClassName('slider-selection')[0];
|
||||
if (this.selection === 'none') {
|
||||
//this.selectionEl.addClass('hide');
|
||||
dom.addClass(this.selectionEl, "hide");
|
||||
}
|
||||
this.selectionElStyle = this.selectionEl.style;
|
||||
|
||||
this.handle1 = this.picker.getElementsByClassName('slider-handle')[0];
|
||||
this.handle1Stype = this.handle1.style;
|
||||
this.handle2 = this.picker.getElementsByClassName('slider-handle')[1];
|
||||
this.handle2Stype = this.handle2.style;
|
||||
|
||||
var handle = this.options.handle;
|
||||
switch (handle) {
|
||||
case 'round':
|
||||
dom.addClass(this.handle1, "round");
|
||||
dom.addClass(this.handle2, "round");
|
||||
break;
|
||||
case 'triangle':
|
||||
dom.addClass(this.handle1, "triangle");
|
||||
dom.addClass(this.handle2, "triangle");
|
||||
break;
|
||||
}
|
||||
|
||||
if (this.range) {
|
||||
this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
|
||||
this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
|
||||
}
|
||||
{
|
||||
this.value = [Math.max(this.min, Math.min(this.max, this.value))];
|
||||
//this.handle2.addClass('hide');
|
||||
dom.addClass(this.handle2, "hide");
|
||||
if (this.selection === 'after') {
|
||||
this.value[1] = this.max;
|
||||
} else {
|
||||
this.value[1] = this.min;
|
||||
}
|
||||
}
|
||||
|
||||
this.diff = this.max - this.min;
|
||||
this.percentage = [
|
||||
(this.value[0] - this.min) * 100 / this.diff,
|
||||
(this.value[1] - this.min) * 100 / this.diff,
|
||||
this.step * 100 / this.diff
|
||||
];
|
||||
|
||||
//this.offset = this.picker.offset();
|
||||
// this.offset = $(this.picker).offset();
|
||||
this.offset = this._getOffset(this.picker);
|
||||
|
||||
this.size = this.picker[this.sizePos];
|
||||
|
||||
//this.formater = options.formater;
|
||||
|
||||
this.layout();
|
||||
|
||||
domEvent.on(this.picker, "mousedown", this.mousedown, this);
|
||||
dom.addClass(this.tooltip, "hide");
|
||||
}
|
||||
|
||||
layout() {
|
||||
this.handle1Stype[this.stylePos] = this.percentage[0] + '%';
|
||||
//this.handle2Stype[this.stylePos] = this.percentage[1] + '%';
|
||||
|
||||
if (this.orientation == 'vertical') {
|
||||
this.selectionElStyle.top = Math.min(this.percentage[0], this.percentage[1]) + '%';
|
||||
this.selectionElStyle.height = Math.abs(this.percentage[0] - this.percentage[1]) + '%';
|
||||
} else {
|
||||
this.selectionElStyle.left = Math.min(this.percentage[0], this.percentage[1]) + '%';
|
||||
this.selectionElStyle.width = Math.abs(this.percentage[0] - this.percentage[1]) + '%';
|
||||
}
|
||||
|
||||
//if (this.range) {
|
||||
// this.tooltipInner.text(
|
||||
// this.formater(this.value[0]) +
|
||||
// ' : ' +
|
||||
// this.formater(this.value[1])
|
||||
// );
|
||||
// this.tooltip[0].style[this.stylePos] = this.size * (this.percentage[0] + (this.percentage[1] - this.percentage[0]) / 2) / 100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight() / 2 : this.tooltip.outerWidth() / 2) + 'px';
|
||||
//} else {
|
||||
// this.tooltipInner.text(
|
||||
// this.formater(this.value[0])
|
||||
// );
|
||||
// this.tooltip[0].style[this.stylePos] = this.size * this.percentage[0] / 100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight() / 2 : this.tooltip.outerWidth() / 2) + 'px';
|
||||
//}
|
||||
}
|
||||
|
||||
_getOffset(element) {
|
||||
if (!element.getClientRects().length) {
|
||||
return { top: 0, left: 0 };
|
||||
}
|
||||
|
||||
let rect = element.getBoundingClientRect();
|
||||
let win = element.ownerDocument.defaultView;
|
||||
return (
|
||||
{
|
||||
top: rect.top + win.pageYOffset,
|
||||
left: rect.left + win.pageXOffset
|
||||
});
|
||||
}
|
||||
|
||||
mousedown(ev) {
|
||||
|
||||
// Touch: Get the original event:
|
||||
if (this.touchCapable && ev.type === 'touchstart') {
|
||||
ev = ev.originalEvent;
|
||||
}
|
||||
|
||||
//this.offset = this.picker.offset();
|
||||
// this.offset = $(this.picker).offset();
|
||||
this.offset = this._getOffset(this.picker);
|
||||
|
||||
this.size = this.picker[this.sizePos];
|
||||
|
||||
let percentage = this.getPercentage(ev);
|
||||
|
||||
if (this.range) {
|
||||
// var diff1 = Math.abs(this.percentage[0] - percentage);
|
||||
// var diff2 = Math.abs(this.percentage[1] - percentage);
|
||||
// this.dragged = (diff1 < diff2) ? 0 : 1;
|
||||
}
|
||||
else {
|
||||
this.dragged = 0;
|
||||
}
|
||||
|
||||
this.percentage[this.dragged] = percentage;
|
||||
this.layout();
|
||||
|
||||
domEvent.on(this.picker, "mousemove", this.mousemove, this);
|
||||
domEvent.on(this.picker, 'mouseup', this.mouseup, this);
|
||||
domEvent.on(this.picker, 'mouseleave', this.onMouseLeave, this);
|
||||
|
||||
this.inDrag = true;
|
||||
let value = this.calculateValue();
|
||||
//if (this.options.inverse === true) {
|
||||
// val = val * -1;
|
||||
//}
|
||||
|
||||
this.emit("slide", { value: value });
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
mousemove(ev) {
|
||||
this.handle1.style.cursor = "grab";
|
||||
this.sliderTrack.style.cursor = "grab";
|
||||
|
||||
// Touch: Get the original event:
|
||||
if (this.touchCapable && ev.type === 'touchmove') {
|
||||
ev = ev.originalEvent;
|
||||
}
|
||||
|
||||
let percentage = this.getPercentage(ev);
|
||||
// if (this.range) {
|
||||
// if (this.dragged === 0 && this.percentage[1] < percentage) {
|
||||
// this.percentage[0] = this.percentage[1];
|
||||
// this.dragged = 1;
|
||||
// } else if (this.dragged === 1 && this.percentage[0] > percentage) {
|
||||
// this.percentage[1] = this.percentage[0];
|
||||
// this.dragged = 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// 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 });
|
||||
}
|
||||
//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";
|
||||
|
||||
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;
|
||||
//if (this.over == false) {
|
||||
// this.hideTooltip();
|
||||
//}
|
||||
this.element;
|
||||
let value = this.calculateValue();
|
||||
this.emit('onChange', { value: value, status: 'ok'});
|
||||
return false;
|
||||
}
|
||||
|
||||
onMouseLeave() {
|
||||
this.handle1.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;
|
||||
|
||||
//also change border geometry
|
||||
let value = this.calculateValue();
|
||||
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.value = val;
|
||||
} else {
|
||||
val = (this.min + Math.round((this.diff * this.percentage[0] / 100) / this.step) * this.step);
|
||||
this.value = [val, this.value[1]];
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
||||
getPercentage(ev) {
|
||||
if (this.touchCapable) {
|
||||
ev = ev.touches[0];
|
||||
}
|
||||
var 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));
|
||||
}
|
||||
|
||||
getValue() {
|
||||
if (this.range) {
|
||||
return this.value;
|
||||
}
|
||||
return this.value[0];
|
||||
}
|
||||
|
||||
setValue(val) {
|
||||
this.value = val;
|
||||
|
||||
if (this.range) {
|
||||
this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
|
||||
this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
|
||||
} else {
|
||||
this.value = [Math.max(this.min, Math.min(this.max, this.value))];
|
||||
this.handle2.addClass('hide');
|
||||
if (this.selection === 'after') {
|
||||
this.value[1] = this.max;
|
||||
} else {
|
||||
this.value[1] = this.min;
|
||||
}
|
||||
}
|
||||
this.diff = this.max - this.min;
|
||||
this.percentage = [
|
||||
(this.value[0] - this.min) * 100 / this.diff,
|
||||
(this.value[1] - this.min) * 100 / this.diff,
|
||||
this.step * 100 / this.diff
|
||||
];
|
||||
this.layout();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { RangeSlider };
|
||||
|
|
@ -41,10 +41,15 @@ class TinLayer extends Layer {
|
|||
|
||||
setVisible(visible) {
|
||||
this.visible = visible;
|
||||
this.mainMesh.visible = visible;
|
||||
this.mainMesh.visible = visible;
|
||||
this.emit('visibility-change');
|
||||
}
|
||||
|
||||
scaleZ(z) {
|
||||
this.mainMesh.scale.z = z;
|
||||
//this.objectGroup.scale.z = z;
|
||||
}
|
||||
|
||||
async onAdd(map) {
|
||||
await this.build(this.getScene());
|
||||
map.update();
|
||||
|
|
@ -95,14 +100,14 @@ class TinLayer extends Layer {
|
|||
|
||||
async points(geomId) {
|
||||
const url = POINTURL + geomId;
|
||||
const buffer = await this.request(url);
|
||||
return this.unpackVertices(buffer);
|
||||
const buffer = await this.request(url);
|
||||
return this.unpackVertices(buffer);
|
||||
}
|
||||
|
||||
async edges(geomId) {
|
||||
const url = EDGEURL + geomId;
|
||||
const buffer = await this.request(url);
|
||||
return this.unpackEdges(buffer);
|
||||
const buffer = await this.request(url);
|
||||
return this.unpackEdges(buffer);
|
||||
}
|
||||
|
||||
async request(url) {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import * as domEvent from './core/domEvent';
|
|||
import { Coordinates } from './controls/Coordinates';
|
||||
import { NortArrow } from './controls/NorthArrow';
|
||||
import { LayerControl } from './controls/LayerControl';
|
||||
import { SliderControl } from './controls/SliderControl';
|
||||
import { Mesh } from 'three/src/objects/Mesh';
|
||||
import { SphereGeometry } from 'three/src/geometries/SphereGeometry';
|
||||
import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
|
||||
|
|
@ -165,6 +166,8 @@ class Application {
|
|||
parentDiv: 'layer-control-parent-id'
|
||||
}).addTo(this.map);
|
||||
|
||||
//slider for scaling z value
|
||||
this.slider = new SliderControl({ layers: this.map.layers }).addTo(this.map);
|
||||
|
||||
// domEvent.on(window, 'resize', this.onWindowResize, this);
|
||||
// domEvent.on(window, 'keydown', this.keydown, this);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user