@openglobus/og 0.14.10 → 0.15.0

package/src/og/control/Control.js

@@ -1,188 +1,187 @@
-/**
- * @module og/control/Control
- */
-
-"use strict";
-
-/**
- * Base control class for implementing renderer controls.
- * All other controls extend from this class.
- * @class
- * @param {Object} [options] - Control activation options:
- * @param {Boolean} [options.autoActivated=true] - If true - calls initialize function after the renderer assigning.
- */
-class Control {
-    /**
-     * @param {Object} [options] - Control activation options:
-     */
-    constructor(options) {
-        options = options || {};
-
-        this._id = Control.__staticCounter++;
-
-        this._name = options.name || "_control_" + this._id;
-
-        /**
-         * Control initialized.
-         * @protected
-         * @type {Boolean}
-         */
-        this._initialized = false;
-
-        /**
-         * Assigned renderer.
-         * @public
-         * @type {Renderer}
-         */
-        this.renderer = null;
-
-        /**
-         * Auto activation flag.
-         * @public
-         * @type {Boolean}
-         */
-        this.autoActivate = options.autoActivate != undefined ? options.autoActivate : true;
-
-        /**
-         * Control activity.
-         * @protected
-         * @type {Boolean}
-         */
-        this._active = false;
-    }
-
-    static get __staticCounter() {
-        if (!this.__counter && this.__counter !== 0) {
-            this.__counter = 0;
-        }
-        return this.__counter;
-    }
-
-    static set __staticCounter(n) {
-        this.__counter = n;
-    }
-
-    /**
-     * Returns control name.
-     * @public
-     * @virtual
-     */
-    get name() {
-        return this._name;
-    }
-
-    /**
-     * Control initialization function have to be overriden.
-     * @public
-     * @virtual
-     */
-    oninit() {}
-
-    /**
-     * Control renderer assigning function have to be overriden.
-     * @public
-     * @virtual
-     */
-    onadd() {}
-
-    /**
-     * Control remove function have to be overriden.
-     * @public
-     * @virtual
-     */
-    onremove() {}
-
-    /**
-     * Control activation function have to be overriden.
-     * @public
-     * @virtual
-     */
-    onactivate() {}
-
-    /**
-     * Control deactivation function have to be overriden.
-     * @public
-     * @virtual
-     */
-    ondeactivate() {}
-
-    /**
-     * Assign renderer to the control.
-     * @public
-     * @type {Renderer}
-     */
-    addTo(renderer) {
-        if (renderer) {
-            this.renderer = renderer;
-            renderer.controls[this.name] = this;
-            this.onadd && this.onadd();
-            if (this.autoActivate) {
-                this._initialized = true;
-                this.oninit && this.oninit();
-                this._active = true;
-            }
-        }
-    }
-
-    /**
-     * Assign renderer to the control.
-     * @public
-     */
-    remove() {
-        this.onremove && this.onremove();
-
-        let r = this.renderer,
-            n = this.name;
-
-        if (!r) return;
-
-        let c = r.controls[n];
-
-        if (c) {
-            if (this.isEqual(c)) {
-                r.controls[n] = null;
-                delete r.controls[n];
-            }
-        }
-
-        this.renderer = null;
-        this._active = false;
-        this._initialized = false;
-    }
-
-    /**
-     * Activate control.
-     * @public
-     */
-    activate() {
-        if (!this._initialized) {
-            this._initialized = true;
-            this.oninit && this.oninit();
-        }
-        this._active = true;
-        this.onactivate && this.onactivate();
-    }
-
-    /**
-     * Deactivate control.
-     * @public
-     */
-    deactivate() {
-        this._active = false;
-        this.ondeactivate && this.ondeactivate();
-    }
-
-    /**
-     * Is control active.
-     * @public
-     */
-    isActive() {
-        return this._active;
-    }
-
-    isEqual(control) {
-        return control._id === this._id;
-    }
-}
-
-export { Control };
+/**
+ * @module og/control/Control
+ */
+
+"use strict";
+
+/**
+ * Base control class for implementing renderer controls.
+ * All other controls extend from this class.
+ * @class
+ * @param {Object} [options] - Control activation options:
+ * @param {Boolean} [options.autoActivated=true] - If true - calls initialize function after the renderer assigning.
+ */
+class Control {
+    /**
+     * @param {Object} [options] - Control activation options:
+     */
+    constructor(options) {
+        options = options || {};
+
+        this._id = Control.__staticCounter++;
+
+        this._name = options.name || "_control_" + this._id;
+
+        /**
+         * Control initialized.
+         * @protected
+         * @type {Boolean}
+         */
+        this._initialized = false;
+
+        /**
+         * Assigned renderer.
+         * @public
+         * @type {Renderer}
+         */
+        this.renderer = null;
+
+        /**
+         * Auto activation flag.
+         * @public
+         * @type {Boolean}
+         */
+        this.autoActivate = options.autoActivate != undefined ? options.autoActivate : true;
+
+        /**
+         * Control activity.
+         * @protected
+         * @type {Boolean}
+         */
+        this._active = false;
+    }
+
+    static get __staticCounter() {
+        if (!this.__counter && this.__counter !== 0) {
+            this.__counter = 0;
+        }
+        return this.__counter;
+    }
+
+    static set __staticCounter(n) {
+        this.__counter = n;
+    }
+
+    /**
+     * Returns control name.
+     * @public
+     * @virtual
+     */
+    get name() {
+        return this._name;
+    }
+
+    /**
+     * Control initialization function have to be overriden.
+     * @public
+     * @virtual
+     */
+    oninit() {}
+
+    /**
+     * Control renderer assigning function have to be overriden.
+     * @public
+     * @virtual
+     */
+    onadd() {}
+
+    /**
+     * Control remove function have to be overriden.
+     * @public
+     * @virtual
+     */
+    onremove() {}
+
+    /**
+     * Control activation function have to be overriden.
+     * @public
+     * @virtual
+     */
+    onactivate() {}
+
+    /**
+     * Control deactivation function have to be overriden.
+     * @public
+     * @virtual
+     */
+    ondeactivate() {}
+
+    /**
+     * Assign renderer to the control.
+     * @public
+     * @type {Renderer}
+     */
+    addTo(renderer) {
+        if (renderer) {
+            this.renderer = renderer;
+            renderer.controls[this.name] = this;
+            this.onadd && this.onadd();
+            if (this.autoActivate) {
+                this._initialized = true;
+                this.oninit && this.oninit();
+            }
+        }
+    }
+
+    /**
+     * Assign renderer to the control.
+     * @public
+     */
+    remove() {
+        this.onremove && this.onremove();
+
+        let r = this.renderer,
+            n = this.name;
+
+        if (!r) return;
+
+        let c = r.controls[n];
+
+        if (c) {
+            if (this.isEqual(c)) {
+                r.controls[n] = null;
+                delete r.controls[n];
+            }
+        }
+
+        this.renderer = null;
+        this._active = false;
+        this._initialized = false;
+    }
+
+    /**
+     * Activate control.
+     * @public
+     */
+    activate() {
+        if (!this._initialized) {
+            this._initialized = true;
+            this.oninit && this.oninit();
+        }
+        this._active = true;
+        this.onactivate && this.onactivate();
+    }
+
+    /**
+     * Deactivate control.
+     * @public
+     */
+    deactivate() {
+        this._active = false;
+        this.ondeactivate && this.ondeactivate();
+    }
+
+    /**
+     * Is control active.
+     * @public
+     */
+    isActive() {
+        return this._active;
+    }
+
+    isEqual(control) {
+        return control._id === this._id;
+    }
+}
+
+export { Control };

package/src/og/control/GeoImageDragControl.js

@@ -6,96 +6,114 @@
 
 import { Control } from './Control.js';
 import { BaseGeoImage } from '../layer/BaseGeoImage.js';
-import { elementFactory, btnClickHandler } from "./UIhelpers.js";
+import { ToggleButton } from "../ui/ToggleButton.js";
+
+const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M16 13l6.964 4.062-2.973.85 2.125 3.681-1.732 1-2.125-3.68-2.223 2.15L16 13zm-2-7h2v2h5a1 1 0 0 1 1 1v4h-2v-3H10v10h4v2H9a1 1 0 0 1-1-1v-5H6v-2h2V9a1 1 0 0 1 1-1h5V6zM4 14v2H2v-2h2zm0-4v2H2v-2h2zm0-4v2H2V6h2zm0-4v2H2V2h2zm4 0v2H6V2h2zm4 0v2h-2V2h2zm4 0v2h-2V2h2z" fill="#000"/></svg>`;
 
 class GeoImageDragControl extends Control {
     constructor(options = {}) {
         super(options);
+
         this._cornerIndex = -1;
         this._catchCorner = false;
+
+        this._toggleBtn = new ToggleButton({
+            classList: ["og-map-button", "og-geoimagegrag_button"],
+            icon: ICON_BUTTON_SVG
+        });
+
     }
 
     oninit() {
-        let p = this.planet;
-        this.createDraggerButton();
+        this._toggleBtn.appendTo(this.renderer.div);
 
-        p.events.on('layeradd', function (e) {
-            this._bindLayer(e);
+        this.planet.events.on('layeradd', function (e) {
+            if (this.isActive()) {
+                this._bindLayer(e);
+            }
         }, this);
 
-        for (let i = 0; i < p.layers.length; i++) {
-            if (p.layers[i] instanceof BaseGeoImage) {
-                this._bindLayer(p.layers[i]);
+        this._toggleBtn.on("change", (isActive) => {
+            if (isActive) {
+                this.activate();
+            } else {
+                this.deactivate();
             }
+        });
+    }
+
+    onactivate() {
+        super.onactivate();
+
+        let p = this.planet;
+        for (let i = 0; i < p.layers.length; i++) {
+            this._bindLayer(p.layers[i]);
         }
-        btnClickHandler('og-geo-image-dragger-menu-btn', null, null, '#og-geo-image-dragger-menu-icon'); // btn_id, dialog_id, dialog_selector, icon_id
     }
 
-    // Create a button to activate-deactivate control
-    createDraggerButton() {
-        let btn = elementFactory('div', {
-                id: 'og-geo-image-dragger-menu-btn',
-                class: 'og-geo-image-dragger og-menu-btn og-OFF'
-            },
-            elementFactory('div', { id: 'og-geo-image-dragger-menu-icon', class: 'og-icon-holder' }));
-        this.renderer.div.appendChild(btn);
+    ondeactivate() {
+        super.ondeactivate();
+        let p = this.planet;
+        for (let i = 0; i < p.layers.length; i++) {
+            this._unbindLayer(p.layers[i]);
+        }
     }
 
     _bindLayer(layer) {
-        if (layer instanceof BaseGeoImage) { // if the layer is a geoImage layer
-
-            var p = this.planet;
-
-            layer.events.on('mousemove', function (ms) {
-                var btn = document.getElementById('og-geo-image-dragger-menu-btn');
-                var btn_off = btn.classList.contains('og-OFF');
-                if (this._active && !btn_off) { // active layer and button ON
-                    if (this._catchCorner) {// mouse is catching a corner
-                        var corners = layer.getCornersLonLat();
-                        corners[this._cornerIndex] = p.getLonLatFromPixelTerrain(ms, true);
-                        layer.setCornersLonLat(corners);
-                    } else { // mouse isn't catching
-                        this._cornerIndex = -1;
-                        for (var i = 0; i < layer._cornersWgs84.length; i++) {
-                            var ground = p.getLonLatFromPixelTerrain(ms, true);
-                            // mouse is near
-                            if (ground && p.ellipsoid.getGreatCircleDistance(layer._cornersWgs84[i], ground) / p.getDistanceFromPixel(ms, true) <= 0.05) {
-                                this._cornerIndex = i;
-                                document.body.style.cursor = 'move';
-                                break;
-                                // mouse is far
-                            } else {
-                                document.body.style.cursor = 'auto';
-
-                            }
-                        }
-                    }
-                }
-
-                layer.events.on("mouseleave", function () {
-                    document.body.style.cursor = 'auto';
-                });
+        if (layer instanceof BaseGeoImage) {
+            layer.events.on('mousemove', this._onMouseMove, this);
+            layer.events.on("mouseleave", this._onMouseLeave, this);
+            layer.events.on('ldown', this._onLDown, this);
+            layer.events.on('lup', this._onLUp, this);
+        }
+    }
 
-            }, this);
+    _unbindLayer(layer) {
+        if (layer instanceof BaseGeoImage) {
+            layer.events.off('mousemove', this._onMouseMove);
+            layer.events.off("mouseleave", this._onMouseLeave);
+            layer.events.off('ldown', this._onLDown);
+            layer.events.off('lup', this._onLUp);
+        }
+    }
 
-            layer.events.on('ldown', function (ms) {
-                if (this._active && this._cornerIndex !== -1) {
-                    this._catchCorner = true;
-                    ms.renderer.controls.mouseNavigation.deactivate();
-                }
-            }, this);
+    _onLUp(ms) {
+        this._catchCorner = false;
+        ms.renderer.controls.mouseNavigation.activate();
+    }
 
-            layer.events.on('lup', function (ms) {
-                if (this._active) {
-                    this._catchCorner = false;
-                    ms.renderer.controls.mouseNavigation.activate();
-                }
-            }, this);
+    _onLDown(ms) {
+        if (this._cornerIndex !== -1) {
+            this._catchCorner = true;
+            ms.renderer.controls.mouseNavigation.deactivate();
+        }
+    }
 
-            layer.events.on('rdblclick', function () {
-                alert(layer.getID());
-            })
+    _onMouseLeave() {
+        document.body.style.cursor = 'auto';
+    }
 
+    _onMouseMove(ms) {
+        let layer = ms.pickingObject,
+            p = this.planet;
+        if (this._catchCorner) {// mouse is catching a corner
+            let corners = layer.getCornersLonLat();
+            corners[this._cornerIndex] = p.getLonLatFromPixelTerrain(ms, true);
+            layer.setCornersLonLat(corners);
+        } else { // mouse isn't catching
+            this._cornerIndex = -1;
+            for (let i = 0; i < layer._cornersWgs84.length; i++) {
+                let ground = p.getLonLatFromPixelTerrain(ms, true);
+                // mouse is near
+                if (ground && p.ellipsoid.getGreatCircleDistance(layer._cornersWgs84[i], ground) / p.getDistanceFromPixel(ms, true) <= 0.05) {
+                    this._cornerIndex = i;
+                    document.body.style.cursor = 'move';
+                    break;
+                    // mouse is far
+                } else {
+                    document.body.style.cursor = 'auto';
+                }
+            }
         }
     }
 }