From 8b57f1dcb8eb7763daa70c5f9a4bec8f7b818d30 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Tue, 15 Dec 2020 12:48:52 +0100 Subject: [PATCH] - add ZoomControl.js - add zoom control as default control to map object --- images/egdi_logo.min.svg | 1 - images/egdi_logo.svg | 136 +++++++++----------------------- src/js/controls/HomeButton.js | 11 +-- src/js/controls/ZoomControl.css | 29 +++++++ src/js/controls/ZoomControl.js | 89 +++++++++++++++++++++ src/js/core/Map.js | 4 + src/js/core/browser.js | 11 +++ src/js/core/domUtil.js | 11 ++- src/js/core/utilities.js | 20 ++--- src/js/main.js | 2 +- 10 files changed, 196 insertions(+), 118 deletions(-) delete mode 100644 images/egdi_logo.min.svg create mode 100644 src/js/controls/ZoomControl.css create mode 100644 src/js/controls/ZoomControl.js diff --git a/images/egdi_logo.min.svg b/images/egdi_logo.min.svg deleted file mode 100644 index 8085443..0000000 --- a/images/egdi_logo.min.svg +++ /dev/null @@ -1 +0,0 @@ -EGDI \ No newline at end of file diff --git a/images/egdi_logo.svg b/images/egdi_logo.svg index bf0fc96..3e720a5 100644 --- a/images/egdi_logo.svg +++ b/images/egdi_logo.svg @@ -1,101 +1,37 @@ - - - - - - - - image/svg+xml - - - - - - EGDI - - - - - - - + + + + + image/svg+xml + + + + + + EGDI + + + + + + + \ No newline at end of file diff --git a/src/js/controls/HomeButton.js b/src/js/controls/HomeButton.js index 65ca11f..6dbc82a 100644 --- a/src/js/controls/HomeButton.js +++ b/src/js/controls/HomeButton.js @@ -3,6 +3,8 @@ import * as dom from '../core/domUtil'; import * as domEvent from '../core/domEvent'; class HomeButton extends Control { + + map; options = { position: 'topright', homeText: '+', @@ -85,14 +87,13 @@ class HomeButton extends Control { //var link = L.DomUtil.create('a', className, container); let link = dom.createDom("span", { "class": className, innerHTML: html, title: title }, container); - // let stop = domEvent.stopPropagation(); - domEvent.on(link, 'click', fn, context); + // let stop = domEvent.stopPropagation; + domEvent // .on(link, 'click', stop) // .on(link, 'mousedown', stop) // .on(link, 'dblclick', stop) - // .on(link, 'click', domEvent.preventDefault()) - // //.on(link, 'click', fn.bind(this)); - // .on(link, 'click', fn, context); + // .on(link, 'click', domEvent.preventDefault) + .on(link, 'click', fn, context); return link; } diff --git a/src/js/controls/ZoomControl.css b/src/js/controls/ZoomControl.css new file mode 100644 index 0000000..da216cd --- /dev/null +++ b/src/js/controls/ZoomControl.css @@ -0,0 +1,29 @@ +.gba-control-zoom { + border-radius: 4px; +} + + .gba-control-zoom span { + display: block; + height: 30px; + width: 31px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + background-position: 50% 50%; + background-repeat: no-repeat; + } +/*.my-gba-control-zoom a:hover { + background-color: rgba(102,102,102,0.90); + }*/ +.gba-control-zoom-in { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAxlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZn///+VlZWYmJiZmZmWlpaXl5fw8PDk5OT6+vrm5uarq6uampqkpKTn5+egoKD7+/vy8vLl5eX5+fng4OCenp6SkpKcnJz8/PydnZ3x8fGxsbGtra2mpqbh4eGioqL9/f3r6+ufn5+qqqqhoaGoqKjs7Oybm5uUlJSWaKJBAAAAGnRSTlPk+cftAOPvgvgGkut0WrvJytuzaf1Fbc/EUVDNfwkAAADBSURBVHhetdLFssMwDIZRNU3xIoMMYSzjZXr/l6q1izO1dv1Wmjk7zQ+j8VnneEM492GgmC6gx/El9Dm+gi7Hns1CCO3mbLfdptLFclkjFsLNIeLkBCxNwR/xv6RsztamZblBTNSaslj/hDX1jrja0PHxGTT5C+3i0uK0xZXFwT5KTEWFOJ3QNZvLBiupTUKFiNFCU6f4Gs/0FoZ/4/jVwdRbnn8rNwemNjN5/JCv4YbjW7hj9P4B/McnOF7v+cU/AEI2X3dttU52AAAAAElFTkSuQmCC') /*img/zoomIn.png*/; + margin-bottom: 2px; +} + +.gba-control-zoom-out { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAMAAADHso01AAAAhFBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiZmZmXl5efn5+6urr////+/v6srKybm5uUlJStra319fW5ubmgoKCVlZW2tra9vb35+fm4/JSJAAAAGnRSTlN7x4/tAMjuGSy2aIteC+AWupAw5c4edI5nD8z6iFwAAAB3SURBVHhe3dK3DoQwDIBhB8KFfr2Z3q+8//uxEJYQZ2DLv36yZMkGLkLQFCcc/DTTxo4QZEQRuBQzOFDsGaZtYOzWNhiLsVz6tqjwp69k/yJXuaklDwobp/PpJytbJDe34ST7PtXEJ4rPcLnq9SaA3x/Ods/Xm8/EaFl6wRVnDgAAAABJRU5ErkJggg==') /*img/zoomOut.png*/; + /*font: bold 18px 'Lucida Console', Monaco, monospace; + text-indent: 1px;*/ +} \ No newline at end of file diff --git a/src/js/controls/ZoomControl.js b/src/js/controls/ZoomControl.js new file mode 100644 index 0000000..3a45a44 --- /dev/null +++ b/src/js/controls/ZoomControl.js @@ -0,0 +1,89 @@ +import { Control } from "./Control"; +import * as dom from '../core/domUtil'; +import * as domEvent from '../core/domEvent'; + +import './ZoomControl.css'; + + +class ZoomControl extends Control { + + _map; + + options = { + position: 'topright', + zoomInText: '+', + zoomInTitle: 'Zoom in', + zoomOutText: '-', + zoomOutTitle: 'Zoom out' + }; + + constructor(defaults) { + super(defaults); + } + + onAdd(map) { + this.map = map; + // var b = this._nls = util.mixin({}, N.widgets.zoom); + let className = 'gba-control-zoom'; + let container = this._container = dom.createDom("div", { "class": className }); + + this._map = map; + // don't use options.zoomInText because of predefined png + this._zoomInButton = this._createButton( + "", this.options.zoomInTitle, + // "", b.zoomInTitle, + className + '-in', container, this._zoomIn, this); + + // don't use options.zoomOutText because of predefined png + this._zoomOutButton = this._createButton( + "", this.options.zoomOutTitle, + // "", b.zoomOutTitle, + className + '-out', container, this._zoomOut, this); + + this._updateDisabled(); + //map.on('zoomend zoomlevelschange', this._updateDisabled, this); + return container; + } + + _zoomIn(e) { + //this._map.zoomIn(e.shiftKey ? 3 : 1); + this._map.dollyOut(); + } + + _zoomOut(e) { + //this._map.zoomOut(e.shiftKey ? 3 : 1); + this._map.dollyIn(); + } + + _createButton(html, title, className, container, fn, context) { + let link = dom.createDom("span", { "class": className, innerHTML: html, title: title }, container); + + // let stop = domEvent.stopPropagation; + domEvent + // .on(link, 'click', stop) + // .on(link, 'mousedown', stop) + // .on(link, 'dblclick', stop) + // .on(link, 'click', domEvent.preventDefault) + .on(link, 'click', fn, context); + return link; + } + + _updateDisabled () { + + var className = 'leaflet-disabled'; + + dom.removeClass(this._zoomInButton, className); + + dom.removeClass(this._zoomOutButton, className); + + //if (map._zoom === map.getMinZoom()) { + // L.DomUtil.addClass(this._zoomOutButton, className); + //} + //if (map._zoom === map.getMaxZoom()) { + // L.DomUtil.addClass(this._zoomInButton, className); + //} + } + +} + +export { ZoomControl }; \ No newline at end of file diff --git a/src/js/core/Map.js b/src/js/core/Map.js index 7458729..247afce 100644 --- a/src/js/core/Map.js +++ b/src/js/core/Map.js @@ -1,6 +1,7 @@ import { OrbitControls } from '../lib/OrbitControls'; import * as dom from './domUtil'; import { HomeButton } from '../controls/HomeButton'; +import { ZoomControl } from '../controls/ZoomControl'; import * as util from './utilities'; class Map extends OrbitControls { @@ -57,6 +58,9 @@ class Map extends OrbitControls { // this._controls.homeControl = (new HomeButton()).addTo(this); let homeControl = this._controls.homeControl = new HomeButton(); homeControl.addTo(this); + + let zoomControl = this._controls.zoomControl = new ZoomControl(); + zoomControl.addTo(this); } addLayer(layer) { diff --git a/src/js/core/browser.js b/src/js/core/browser.js index 54bb844..8ac6886 100644 --- a/src/js/core/browser.js +++ b/src/js/core/browser.js @@ -4,3 +4,14 @@ // `true` for all browsers supporting [pointer events](https://msdn.microsoft.com/en-us/library/dn433244%28v=vs.85%29.aspx). export var pointer = !!(window.PointerEvent || msPointer); +export var touch = !window.L_NO_TOUCH && (pointer || 'ontouchstart' in window || + (window.DocumentTouch && document instanceof window.DocumentTouch)); + + +// @property mobile: Boolean; `true` for all browsers running in a mobile device. +export var mobile = typeof orientation !== 'undefined' || userAgentContains('mobile'); + + +function userAgentContains(str) { + return navigator.userAgent.toLowerCase().indexOf(str) >= 0; +} \ No newline at end of file diff --git a/src/js/core/domUtil.js b/src/js/core/domUtil.js index b73c7e0..6aec6fd 100644 --- a/src/js/core/domUtil.js +++ b/src/js/core/domUtil.js @@ -3,7 +3,7 @@ import * as util from './utilities'; * @namespace DomUtil * * Utility functions to work with the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) - * tree, used by Leaflet internally. + * tree, used by 3D viewer internally. * * Most functions expecting or returning a `HTMLElement` also work for * SVG elements. The only difference is that classes refer to CSS classes @@ -100,6 +100,15 @@ export function addClass(el, name) { } } +// @function removeClass(el: HTMLElement, name: String) +// Removes `name` from the element's class attribute. +export function removeClass(el, name) { + if (el.classList !== undefined) { + el.classList.remove(name); + } else { + setClass(el, util.trim((' ' + getClass(el) + ' ').replace(' ' + name + ' ', ' '))); + } +} // @function setClass(el: HTMLElement, name: String) // Sets the element's class. diff --git a/src/js/core/utilities.js b/src/js/core/utilities.js index 494c2de..e948a7d 100644 --- a/src/js/core/utilities.js +++ b/src/js/core/utilities.js @@ -110,14 +110,14 @@ export function extend(dest) { // @function create(proto: Object, properties?: Object): Object // Compatibility polyfill for [Object.create](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/create) export var create = Object.create || (function () { - function F() {} + function F() { } return function (proto) { F.prototype = proto; return new F(); }; })() -export function showLoading () { +export function showLoading() { var element = dom.byId("loadingImg"); //domUtil.show(_loading); if (element) { @@ -125,7 +125,7 @@ export function showLoading () { } } -export function hideLoading () { +export function hideLoading() { var element = dom.byId("loadingImg"); if (element) { element.style.display = "none"; @@ -133,7 +133,7 @@ export function hideLoading () { } // Merges the given properties to the `options` of the `obj` object, returning the resulting options. See `Class options` -export function setOptions (obj, options) { +export function setOptions(obj, options) { if (!Object.prototype.hasOwnProperty.call(obj, 'options')) { obj.options = obj.options ? create(obj.options) : {}; } @@ -149,21 +149,21 @@ export var lastId = 0; // @function stamp(obj: Object): Number // Returns the unique ID of an object, assigning it one if it doesn't have it. -export function stamp (obj){ +export function stamp(obj) { let key = '_gba_id'; obj[key] = obj[key] || ++lastId; return obj[key]; } -export function hasTouch () { - var phantomjs = navigator.userAgent.toLowerCase().indexOf('phantom') !== -1; +export function hasTouch() { + let phantomjs = navigator.userAgent.toLowerCase().indexOf('phantom') !== -1; - var isTouchDevice = phantomjs + let isTouchDevice = phantomjs || 'ontouchstart' in window - || (window.DocumentTouch && document instanceof window.DocumentTouch) + // || (window.DocumentTouch && document instanceof window.DocumentTouch) || ("onpointerdown" in document && navigator.maxTouchPoints > 0) - || window.navigator.msMaxTouchPoints; + || (window.navigator.msMaxTouchPoints > 0); return isTouchDevice; } diff --git a/src/js/main.js b/src/js/main.js index b9a47d9..66e8928 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -120,7 +120,7 @@ class Application { // this.map.maxDistance = size*15; //add map controls: - if (!util.hasTouch) { + if (util.hasTouch() == false) { let coordinates = new Coordinates({ camera: this.camera, crs: "EPSG:3034" }).addTo(this.map); // coordinates.addListener('onPoint', (vector) => { // this.queryMarker.position.set(vector.x, vector.y, vector.z);