@openglobus/og 0.15.1 → 0.15.2

package/src/og/control/Lighting.js

@@ -4,22 +4,44 @@
 
 "use strict";
 
-import { Control } from "./Control.js";
 import { Dialog } from '../ui/Dialog.js';
-import { View } from '../ui/View.js';
-import { ToggleButton } from "../ui/ToggleButton.js";
 import { Slider } from "../ui/Slider.js";
+import { ToggleButton } from "../ui/ToggleButton.js";
+import { View } from '../ui/View.js';
+import { Control } from "./Control.js";
+
+const SUN_STOP_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 70.41" style="enable-background:new 0 0 122.88 70.41" xml:space="preserve"><g><path d="M60.91,19.12c6.95,0,13.24,2.95,17.8,7.72c4.55,4.77,7.37,11.37,7.37,18.64c0,1.94-0.2,3.83-0.58,5.65h31.61 c2.1,0,2.62,1.16,2.62,2.59c0,1.43-0.52,2.59-2.62,2.59H7.09c-2.1,0-2.62-1.16-2.62-2.59c0-1.43,0.52-2.59,2.62-2.59h29.23 c-0.38-1.82-0.58-3.71-0.58-5.65c0-7.28,2.82-13.87,7.37-18.64C47.67,22.08,53.96,19.12,60.91,19.12L60.91,19.12L60.91,19.12z M63.4,70.41c-2.1,0-2.62-1.16-2.62-2.59s0.52-2.59,2.62-2.59h56.86c2.1,0,2.62,1.16,2.62,2.59s-0.52,2.59-2.62,2.59H63.4 L63.4,70.41z M2.62,70.41c-2.1,0-2.62-1.16-2.62-2.59s0.52-2.59,2.62-2.59h29.51c2.1,0,2.62,1.16,2.62,2.59s-0.52,2.59-2.62,2.59 H2.62L2.62,70.41z M38.39,9.46c-0.78-1.35-0.32-3.07,1.03-3.85c1.35-0.78,3.07-0.32,3.85,1.03l3.62,6.27 c0.78,1.35,0.32,3.07-1.03,3.85c-1.35,0.78-3.07,0.32-3.85-1.03L38.39,9.46L38.39,9.46L38.39,9.46z M58.67,2.83 c0-1.56,1.27-2.83,2.83-2.83c1.56,0,2.83,1.27,2.83,2.83v7.24c0,1.56-1.27,2.83-2.83,2.83c-1.56,0-2.83-1.26-2.83-2.83V2.83 L58.67,2.83L58.67,2.83z M79.56,7.23c0.77-1.35,2.49-1.81,3.84-1.04c1.35,0.77,1.81,2.49,1.04,3.84l-3.62,6.27 c-0.77,1.35-2.49,1.81-3.84,1.04c-1.35-0.77-1.81-2.49-1.04-3.84L79.56,7.23L79.56,7.23L79.56,7.23z M95.45,21.48 c1.35-0.78,3.07-0.32,3.85,1.03c0.78,1.35,0.32,3.07-1.03,3.85L92,29.98c-1.35,0.78-3.07,0.32-3.85-1.03 c-0.78-1.35-0.32-3.07,1.03-3.85L95.45,21.48L95.45,21.48L95.45,21.48z M102.08,41.76c1.56,0,2.83,1.27,2.83,2.83 c0,1.56-1.27,2.83-2.83,2.83h-7.24c-1.56,0-2.83-1.26-2.83-2.83s1.26-2.83,2.83-2.83H102.08L102.08,41.76L102.08,41.76z M19.74,46.25c-1.56,0-2.83-1.27-2.83-2.83c0-1.56,1.27-2.83,2.83-2.83h7.24c1.56,0,2.83,1.26,2.83,2.83s-1.27,2.83-2.83,2.83 H19.74L19.74,46.25L19.74,46.25z M24.14,25.35c-1.35-0.77-1.81-2.49-1.04-3.84c0.77-1.35,2.49-1.81,3.84-1.04l6.27,3.62 c1.35,0.77,1.81,2.49,1.04,3.84c-0.77,1.35-2.49,1.81-3.84,1.04L24.14,25.35L24.14,25.35L24.14,25.35z"/></g></svg>`;
+const SUN_ACTIVE_SVG_ICON = `<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Sans" d="M 16 4 C 9.3844277 4 4 9.3844277 4 16 C 4 22.615572 9.3844277 28 16 28 C 22.615572 28 28 22.615572 28 16 C 28 9.3844277 22.615572 4 16 4 z M 16 6 C 16.389823 6 16.778223 6.0506339 17.15625 6.09375 C 18.631659 7.6568432 21 10.9245 21 16 C 21 21.0755 18.631659 24.343157 17.15625 25.90625 C 16.778223 25.949366 16.389823 26 16 26 C 10.465308 26 6 21.534692 6 16 C 6 10.465308 10.465308 6 16 6 z" overflow="visible" font-family="Sans"/>
+</svg>
+`;
+const LIGHTING_ENABLED_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512">
+<g>
+</g>
+\t<path d="M257.894 156.948c-53.258 0-96.42 43.561-96.42 97.26 0 53.719 43.161 97.249 96.42 97.249 53.197 0 96.379-43.53 96.379-97.25 0-53.698-43.182-97.26-96.379-97.26zM257.894 309.873c-30.464 0-55.163-24.945-55.163-55.665s24.699-55.624 55.163-55.624c30.423 0 55.101 24.904 55.101 55.624s-24.688 55.665-55.101 55.665z" fill="#000000" />
+\t<path d="M241.808 43.499h32.144v79.575h-32.144v-79.575z" fill="#000000" />
+\t<path d="M417.209 115.897l-22.723-22.917-55.757 56.279 22.723 22.907z" fill="#000000" />
+\t<path d="M389.468 238.407h78.899v32.389h-78.899v-32.389z" fill="#000000" />
+\t<path d="M396.012 416.86l22.723-22.917-55.767-56.259-22.712 22.897z" fill="#000000" />
+\t<path d="M242.473 388.915h32.144v79.575h-32.144v-79.575z" fill="#000000" />
+\t<path d="M96.266 396.073l22.722 22.938 55.778-56.289-22.692-22.928z" fill="#000000" />
+\t<path d="M43.633 240.537h78.879v32.43h-78.879v-32.43z" fill="#000000" />
+\t<path d="M115.394 93.051l-22.681 22.907 55.757 56.258 22.702-22.917z" fill="#000000" />
+</svg>`;
+const ATMOSPHERE_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#000000" d="M135.688 18.5c-6.798 74.842-23.842 85.39-107.907 59.656 84.85 52.022 73.57 64.954-6.843 96.938 87.743-10.27 103.29 4.89 70.75 87.594 17.805-27.56 32.5-44.498 46.282-54.47-11.813 28.26-18.345 59.274-18.345 91.813 0 84.184 43.71 157.96 109.656 200.376-41.624-43.834-67.686-102.7-67.686-167.875 0-134.923 109.45-244.405 244.375-244.405 30.92 0 60.76 5.762 88 16.25-38.584-26.87-85.517-42.625-136.064-42.625-55.257 0-106.14 18.802-146.562 50.375 4.627-18.783 17.39-38.073 41.03-60.906C190.18 90.942 153.53 95.634 135.69 18.5zm10.03 77.188c5.67.002 11.428 1.247 16.876 3.874 14.506 6.998 22.72 21.81 22 36.938-10.26 10.87-19.507 22.696-27.594 35.344-9.035 2.753-19.075 2.27-28.25-2.156-19.37-9.343-27.5-32.6-18.156-51.97 6.715-13.92 20.638-22.036 35.125-22.03z"/></svg>`;
+
 
 const TEMPLATE =
     `<div class="og-lighing">
 
          <div class="og-option">
-           <div class="og-caption">Lighting enabled<input type="checkbox" id="lighting" name="light"/></div>
-         </div>
-         
-         <div class="og-option">
-           <div class="og-caption">Atmosphere enabled<input type="checkbox" id="atmosphere" name="atmosphere"/></div>
-         </div>
+           <div class="og-suncontrol"></div>
+         </div>        
          
          <div class="og-option og-atmosphere-opacity">
          </div>
@@ -121,12 +143,12 @@ class Lighting extends Control {
 
         this._atmosphereMaxOpacity = new Slider({
             label: "Max.opacity",
-            max: 1
+            max: 5
         });
 
         this._atmosphereMinOpacity = new Slider({
             label: "Min.opacity",
-            max: 1
+            max: 5
         });
 
         this._gamma = new Slider({
@@ -216,14 +238,11 @@ class Lighting extends Control {
     }
 
     oninit() {
+
         this._toggleBtn.appendTo(this.renderer.div);
         this._dialog.appendTo(this.renderer.div);
         this._panel.appendTo(this._dialog.container);
 
-        this._toggleBtn.on("change", (isActive) => {
-            this._dialog.setVisibility(isActive);
-        });
-
         this.$atmosphereOpacity = document.querySelector(".og-atmosphere-opacity");
         this.$gamma = document.querySelector(".og-option.og-gamma");
         this.$exposure = document.querySelector(".og-option.og-exposure");
@@ -233,6 +252,78 @@ class Lighting extends Control {
         this.$specular = document.querySelector(".og-option.og-specular");
         this.$night = document.querySelector(".og-option.og-night");
 
+        this._toggleBtn.on("change", (isActive) => {
+            this._dialog.setVisibility(isActive);
+        });
+
+        let $suncontrol = this._dialog.select(".og-suncontrol");
+
+        let sunStopBtn = new ToggleButton({
+            classList: ["og-suncontrol-button"],
+            isActive: true,
+            icon: SUN_STOP_SVG_ICON,
+            title: "Star/stop the Sun from following the camera"
+        });
+        sunStopBtn.appendTo($suncontrol);
+
+        let sunActiveBtn = new ToggleButton({
+            classList: ["og-suncontrol-button"],
+            isActive: true,
+            icon: SUN_ACTIVE_SVG_ICON,
+            title: "Activate/deactivate the Sun current time positioning"
+        });
+        sunActiveBtn.appendTo($suncontrol);
+
+        sunStopBtn.on("change", (isActive) => {
+            if (isActive) {
+                this.planet.renderer.controls.sun.start();
+            } else {
+                this.planet.renderer.controls.sun.stop();
+            }
+        });
+
+        sunActiveBtn.on("change", (isActive) => {
+            if (isActive) {
+                this.planet.renderer.controls.sun.activate();
+            } else {
+                this.planet.renderer.controls.sun.deactivate();
+            }
+        });
+
+        let lightingEnabledBtn = new ToggleButton({
+            classList: ["og-suncontrol-button"],
+            isActive: this.planet.lightEnabled,
+            icon: LIGHTING_ENABLED_SVG_ICON,
+            title: "Enable/disable planet lighting"
+        });
+        lightingEnabledBtn.appendTo($suncontrol);
+
+        lightingEnabledBtn.on("change", (isActive) => {
+            this.planet.lightEnabled = isActive;
+        });
+
+        let atmosphereEnabledBtn = new ToggleButton({
+            classList: ["og-suncontrol-button"],
+            isActive: this.planet.atmosphereEnabled,
+            icon: ATMOSPHERE_SVG_ICON,
+            title: "Enable/disable atmosphere scattering"
+        });
+        atmosphereEnabledBtn.appendTo($suncontrol);
+
+        if (this.planet.atmosphereEnabled) {
+            this.$atmosphereOpacity.style.display = "block";
+        } else {
+            this.$atmosphereOpacity.style.display = "none";
+        }
+        atmosphereEnabledBtn.on("change", (isActive) => {
+            this.planet.atmosphereEnabled = isActive;
+            if (this.planet.atmosphereEnabled) {
+                this.$atmosphereOpacity.style.display = "block";
+            } else {
+                this.$atmosphereOpacity.style.display = "none";
+            }
+        });
+
         this._atmosphereMaxOpacity.appendTo(this.$atmosphereOpacity);
         this._atmosphereMinOpacity.appendTo(this.$atmosphereOpacity);
 
@@ -255,26 +346,6 @@ class Lighting extends Control {
         this._specular_b.appendTo(this.$specular);
         this._shininess.appendTo(this.$specular);
 
-        document.getElementById("lighting").checked = this.planet.lightEnabled;
-        document.getElementById("lighting").addEventListener("change", (e) => {
-            this.planet.lightEnabled = e.target.checked;
-        });
-
-        if (this.planet.atmosphereEnabled) {
-            this.$atmosphereOpacity.style.display = "block";
-        } else {
-            this.$atmosphereOpacity.style.display = "none";
-        }
-        document.getElementById("atmosphere").checked = this.planet.atmosphereEnabled;
-        document.getElementById("atmosphere").addEventListener("change", (e) => {
-            this.planet.atmosphereEnabled = e.target.checked;
-            if (this.planet.atmosphereEnabled) {
-                this.$atmosphereOpacity.style.display = "block";
-            } else {
-                this.$atmosphereOpacity.style.display = "none";
-            }
-        });
-
         this._atmosphereMinOpacity.value = this.planet.atmosphereMinOpacity;
         this._atmosphereMinOpacity.on("change", (val) => {
             this.planet.atmosphereMinOpacity = val;

package/src/og/control/MouseNavigation.js

@@ -4,16 +4,16 @@
 
 "use strict";
 
-import * as math from "../math.js";
-import { Control } from "./Control.js";
+import { Sphere } from "../bv/Sphere.js";
 import { input } from "../input/input.js";
 import { Key } from "../Lock.js";
 import { LonLat } from "../LonLat.js";
+import * as math from "../math.js";
 import { Mat4 } from "../math/Mat4.js";
 import { Quat } from "../math/Quat.js";
 import { Ray } from "../math/Ray.js";
-import { Sphere } from "../bv/Sphere.js";
 import { Vec3 } from "../math/Vec3.js";
+import { Control } from "./Control.js";
 
 /**
  * Mouse planet camera dragging control.
@@ -457,4 +457,4 @@ class MouseNavigation extends Control {
     }
 }
 
-export { MouseNavigation };
+export { MouseNavigation };

package/src/og/control/MouseWheelZoomControl.js

@@ -4,11 +4,11 @@
 
 "use strict";
 
-import { Control } from "./Control.js";
+import { Sphere } from "../bv/Sphere.js";
 import { Key } from "../Lock.js";
 import { Quat } from "../math/Quat.js";
-import { Sphere } from "../bv/Sphere.js";
 import { Vec3 } from "../math/Vec3.js";
+import { Control } from "./Control.js";
 import { MouseNavigation } from "./MouseNavigation.js";
 
 /**

package/src/og/control/RulerSwitcher.js

@@ -4,9 +4,9 @@
 
 "use strict";
 
+import { ToggleButton } from "../ui/ToggleButton.js";
 import { Control } from "./Control.js";
 import { Ruler } from "./ruler/Ruler.js";
-import { ToggleButton } from "../ui/ToggleButton.js";
 
 const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
@@ -56,10 +56,11 @@ class RulerSwitcher extends Control {
 
         let btn = new ToggleButton({
             classList: ["og-map-button", "og-ruler_button"],
-            icon: ICON_BUTTON_SVG,
-            appendTo: this.renderer.div
+            icon: ICON_BUTTON_SVG
         });
 
+        btn.appendTo(this.renderer.div);
+
         btn.on("change", (isActive) => {
             if (isActive) {
                 this.onactivate();

package/src/og/control/ScaleControl.js

@@ -4,10 +4,10 @@
 
 "use strict";
 
-import { Control } from "./Control.js";
 import { RADIANS } from "../math.js";
-import { binarySearch, parseHTML } from "../utils/shared.js";
 import { Vec3 } from "../math/Vec3.js";
+import { binarySearch, parseHTML } from "../utils/shared.js";
+import { Control } from "./Control.js";
 
 const scale = [
     1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500, 1e3, 2e3, 3e3, 5e3, 10e3, 20e3, 30e3, 50e3,

package/src/og/control/ShowFps.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
-import { Control } from "./Control.js";
 import { print2d } from "../utils/shared.js";
+import { Control } from "./Control.js";
 
 /**
  * Frame per second(FPS) display control.
@@ -41,3 +41,4 @@ export function showFps(options) {
 }
 
 export { ShowFps };
+

package/src/og/control/SimpleNavigation.js

@@ -1,7 +1,7 @@
 "use strict";
 
-import { Control } from "./Control.js";
 import { input } from "../input/input.js";
+import { Control } from "./Control.js";
 
 /**
  * Simple keyboard camera navigation with W,S,A,D and shift keys to fly around the scene.
@@ -125,3 +125,4 @@ export function simpleNavigation(options) {
 }
 
 export { SimpleNavigation };
+

package/src/og/control/SimpleSkyBackground.js

@@ -4,9 +4,9 @@
 
 "use strict";
 
-import { Control } from "./Control.js";
-import { Program } from '../webgl/Program.js';
 import { htmlColorToRgb } from "../utils/shared.js";
+import { Program } from '../webgl/Program.js';
+import { Control } from "./Control.js";
 
 /**
  * Frame per second(FPS) display control.

package/src/og/control/Sun.js

@@ -4,11 +4,11 @@
 
 "use strict";
 
-import { Control } from "./Control.js";
 import { getSunPosition } from "../astro/earth.js";
 import { LightSource } from "../light/LightSource.js";
 import { Quat } from "../math/Quat.js";
 import { Vec3 } from "../math/Vec3.js";
+import { Control } from "./Control.js";
 
 /**
  * Real Sun geocentric position control that place the Sun on the right place by the Earth.
@@ -93,9 +93,16 @@ class Sun extends Control {
 
     stop() {
         this._stopped = true;
+        this.deactivate();
+    }
+
+    start() {
+        this._stopped = false;
+        this.activate();
     }
 
     onactivate() {
+        super.onactivate();
         this._stopped = false;
     }
 

package/src/og/control/ToggleWireframe.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
-import { Control } from "./Control.js";
 import { input } from "../input/input.js";
+import { Control } from "./Control.js";
 
 /**
  * Planet GL draw mode(TRIANGLE_STRIP/LINE_STRING) changer.
@@ -36,3 +36,4 @@ class ToggleWireframe extends Control {
 }
 
 export { ToggleWireframe };
+

package/src/og/control/TouchNavigation.js

@@ -4,14 +4,14 @@
 
 "use strict";
 
-import * as math from "../math.js";
-import { Control } from "./Control.js";
+import { Sphere } from "../bv/Sphere.js";
 import { Key } from "../Lock.js";
 import { LonLat } from "../LonLat.js";
+import * as math from "../math.js";
 import { Quat } from "../math/Quat.js";
 import { Ray } from "../math/Ray.js";
-import { Sphere } from "../bv/Sphere.js";
 import { Vec3 } from "../math/Vec3.js";
+import { Control } from "./Control.js";
 
 class Touch {
     constructor() {
@@ -338,3 +338,4 @@ class TouchNavigation extends Control {
 }
 
 export { TouchNavigation };
+

package/src/og/control/ZoomControl.js

@@ -4,9 +4,9 @@
 
 "use strict";
 
-import { Control } from "./Control.js";
 import { Key } from "../Lock.js";
 import { Button } from "../ui/Button.js";
+import { Control } from "./Control.js";
 
 const ICON_PLUS_SVG = '<?xml version="1.0"?>' +
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
@@ -37,15 +37,16 @@ class ZoomControl extends Control {
 
         let zoomInBtn = new Button({
             classList: ["og-map-button", "og-zoomin-button"],
-            icon: ICON_PLUS_SVG,
-            appendTo: this.renderer.div
+            icon: ICON_PLUS_SVG
         });
+        zoomInBtn.appendTo(this.renderer.div);
+
 
         let zoomOutBtn = new Button({
             classList: ["og-map-button", "og-zoomout-button"],
-            icon: ICON_MINUS_SVG,
-            appendTo: this.renderer.div
+            icon: ICON_MINUS_SVG
         });
+        zoomOutBtn.appendTo(this.renderer.div);
 
         zoomInBtn.on("mousedown", (e) => this.zoomIn());
         zoomInBtn.on("mouseup", (e) => this.stopZoom());

package/src/og/control/index.js

@@ -1,25 +1,25 @@
-import { Control } from "./Control.js";
 import { CompassButton } from "./CompassButton.js";
+import { Control } from "./Control.js";
 import { DebugInfo } from "./DebugInfo";
-import { EarthNavigation } from "./EarthNavigation.js";
 import { EarthCoordinates } from "./EarthCoordinates.js";
+import { EarthNavigation } from "./EarthNavigation.js";
 import { GeoImageDragControl } from "./GeoImageDragControl.js";
 import { KeyboardNavigation } from "./KeyboardNavigation.js";
+import { LayerAnimation } from "./LayerAnimation.js";
 import { LayerSwitcher } from "./LayerSwitcher.js";
+import { Lighting } from "./Lighting.js";
 import { MouseNavigation } from "./MouseNavigation.js";
-import { ToggleWireframe } from "./ToggleWireframe.js";
-import { TouchNavigation } from "./TouchNavigation.js";
-import { SimpleNavigation } from "./SimpleNavigation.js";
+import { MouseWheelZoomControl } from "./MouseWheelZoomControl.js";
 import { Ruler } from "./ruler/Ruler.js";
+import { ScaleControl } from "./ScaleControl.js";
 import { Selection } from "./selection/Selection.js";
 import { ShowFps } from "./ShowFps.js";
+import { SimpleNavigation } from "./SimpleNavigation.js";
+import { SimpleSkyBackground } from "./SimpleSkyBackground.js";
 import { Sun } from "./Sun.js";
+import { ToggleWireframe } from "./ToggleWireframe.js";
+import { TouchNavigation } from "./TouchNavigation.js";
 import { ZoomControl } from "./ZoomControl.js";
-import { MouseWheelZoomControl } from "./MouseWheelZoomControl.js";
-import { Lighting } from "./Lighting.js";
-import { LayerAnimation } from "./LayerAnimation.js";
-import { ScaleControl } from "./ScaleControl.js";
-import { SimpleSkyBackground } from "./SimpleSkyBackground.js";
 
 export {
     Control,

package/src/og/control/ruler/RulerScene.js

@@ -1,15 +1,12 @@
 'use strict';
 
-import * as math from '../../math.js';
-import { RenderNode } from '../../scene/RenderNode.js';
+import { Ellipsoid } from '../../ellipsoid/Ellipsoid.js';
+import { Entity } from '../../entity/Entity.js';
 import { Events } from '../../Events.js';
-import { LonLat } from '../../LonLat.js';
-import { Vec3 } from '../../math/Vec3.js';
-import { Vec2 } from '../../math/Vec2.js';
 import { Vector } from '../../layer/Vector.js';
-import { Entity } from '../../entity/Entity.js';
-import { Ellipsoid } from '../../ellipsoid/Ellipsoid.js';
+import { Vec2 } from '../../math/Vec2.js';
 import { Object3d } from '../../Object3d.js';
+import { RenderNode } from '../../scene/RenderNode.js';
 
 const OUTLINE_COUNT = 120;
 
@@ -61,8 +58,8 @@ class RulerScene extends RenderNode {
         this._trackEntity = new Entity({
             polyline: {
                 path3v: [],
-                thickness: 3.8,
-                color: "rgb(455,455,455)",
+                thickness: 4.8,
+                color: "rgb(255,131,0)",
                 isClosed: false
             }
         });
@@ -144,6 +141,9 @@ class RulerScene extends RenderNode {
         this._onLdblclick_ = this._onLdblclick.bind(this);
         this.renderer.events.on("ldblclick", this._onLdblclick_, this);
 
+        this._onLUp_ = this._onLUp.bind(this);
+        this.renderer.events.on("lup", this._onLUp_, this);
+
         this._onCornerEnter_ = this._onCornerEnter.bind(this);
         this._cornersLayer.events.on("mouseenter", this._onCornerEnter_, this);
 
@@ -168,8 +168,11 @@ class RulerScene extends RenderNode {
         this._pickedCorner = null;
         this._trackLayer.remove();
         this._cornersLayer.remove();
+
         this.renderer.events.off("lclick", this._onLclick_);
         this.renderer.events.off("mousemove", this._onMouseMove_);
+        this.renderer.events.off("lup", this._onLUp_);
+
         this._cornersLayer.events.off("mouseenter", this._onCornerEnter_);
         this._cornersLayer.events.off("mouseleave", this._onCornerLeave_);
         this._cornersLayer.events.off("ldown", this._onCornerLdown_);
@@ -179,6 +182,7 @@ class RulerScene extends RenderNode {
 
         this._onLclick_ = null;
         this._onMouseMove_ = null;
+        this._onLUp_ = null;
         this._onCornerLeave_ = null;
         this._onCornerEnter_ = null;
         this._onCornerLdown_ = null;
@@ -200,7 +204,7 @@ class RulerScene extends RenderNode {
         }
     }
 
-    _onCornerLup(e) {
+    _onLUp() {
         if (this._pickedCorner) {
             this.renderer.controls.mouseNavigation.activate();
             this._pickedCorner = null;
@@ -208,6 +212,10 @@ class RulerScene extends RenderNode {
         }
     }
 
+    _onCornerLup() {
+        this._onLUp();
+    }
+
     _onCornerEnter(e) {
         e.renderer.handler.canvas.style.cursor = "pointer";
     }
@@ -353,4 +361,4 @@ const EVENT_NAMES = [
     "touchenter"
 ];
 
-export { RulerScene };
+export { RulerScene };

package/src/og/control/selection/Selection.js

@@ -4,9 +4,9 @@
 
 "use strict";
 
+import { ToggleButton } from "../../ui/ToggleButton.js";
 import { Control } from "../Control.js";
 import { SelectionScene } from "./SelectionScene.js";
-import { ToggleButton } from "../../ui/ToggleButton.js";
 
 const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M2.1 0v1.914H0v6h3V3h5.1V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h1.8v1.2h3V0h-4.8zm1.8 7.2v6h3v-6h-3zM0 10.913v6h3v-6H0zM66.9 16.2v6h3v-6h-3zM0 19.914v6h3v-6H0zM66.9 25.2v6h3v-6h-3zM0 28.914v6h3v-6H0zM66.9 34.2v6h3v-6h-3zM0 37.914v6h3v-6H0zM66.9 43.2v6h3v-6h-3zM0 46.914v6h3v-6H0zM66.9 52.2v6h3v-6h-3zM0 55.914v5.191h3.809v-3H3v-2.19H0zm6.809 2.191v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9.648 1.899a2.076 2.076 0 0 0-2.19 2.324l3.137 33.676c.2 1.635 2.135 2.399 3.397 1.34l6.623-5.371l2.969 5.142c1.707 2.958 4.417 3.684 7.375 1.977c2.957-1.708 3.684-4.417 1.976-7.375l-2.959-5.125l7.848-3.008c1.548-.564 1.855-2.62.539-3.611L71.576 60.416a2.073 2.073 0 0 0-1.119-.412z" fill="#000000"></path></svg>`;

package/src/og/control/selection/SelectionScene.js

@@ -1,15 +1,12 @@
 'use strict';
 
-import * as math from '../../math.js';
-import { RenderNode } from '../../scene/RenderNode.js';
+import { Ellipsoid } from '../../ellipsoid/Ellipsoid.js';
+import { Entity } from '../../entity/Entity.js';
 import { Events } from '../../Events.js';
-import { LonLat } from '../../LonLat.js';
-import { Vec3 } from '../../math/Vec3.js';
-import { Vec2 } from '../../math/Vec2.js';
 import { Vector } from '../../layer/Vector.js';
-import { Entity } from '../../entity/Entity.js';
-import { Ellipsoid } from '../../ellipsoid/Ellipsoid.js';
+import { LonLat } from '../../LonLat.js';
 import { Object3d } from '../../Object3d.js';
+import { RenderNode } from '../../scene/RenderNode.js';
 
 const OUTLINE_COUNT = 120;
 
@@ -347,4 +344,4 @@ const EVENT_NAMES = [
     "touchenter"
 ];
 
-export { SelectionScene };
+export { SelectionScene };

package/src/og/control/timeline/TimelineControl.js

@@ -1,10 +1,9 @@
 'use strict';
 
-import { Control } from '../Control.js';
-import { TimelineView } from './TimelineView.js';
 import { Dialog } from "../../ui/Dialog.js";
 import { ToggleButton } from "../../ui/ToggleButton.js";
-import { UTCtoDate } from "../../astro/jd.js";
+import { Control } from '../Control.js';
+import { TimelineView } from './TimelineView.js';
 
 function addHours(date, hours) {
     const temp = new Date(date);
@@ -96,4 +95,4 @@ class TimelineControl extends Control {
     }
 }
 
-export { TimelineControl };
+export { TimelineControl };

package/src/og/control/timeline/TimelineModel.js

@@ -1,7 +1,7 @@
 'use strict';
 
-import { addSeconds } from "./timelineUtils.js";
 import { Events } from '../../Events.js';
+import { addSeconds } from "./timelineUtils.js";
 
 class TimelineModel {
     constructor(options = {}) {
@@ -130,4 +130,4 @@ class TimelineModel {
     }
 }
 
-export { TimelineModel }
+export { TimelineModel };