bind fov and zoom controls to showFov and showZoomControl aladin lite…

… init options
cds-astro · Mar 5, 2024 · f8ee02a · f8ee02a
1 parent 01c2a60
commit f8ee02a
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 68 deletions.
diff --git a/examples/al-init-custom-options.html b/examples/al-init-custom-options.html
@@ -23,8 +23,11 @@
                 showCooGrid: true, // set the grid
                 fullScreen: true,
                 showShareControl: true,
+                showSettingsControl: true,
+                showLayersControl: true,
                 showContextMenu: true,
                 showFullscreenControl: true,
+                showZoomControl: false,
             }
         );
     });

diff --git a/src/js/Aladin.js b/src/js/Aladin.js
@@ -82,7 +82,6 @@ import { Toolbar } from './gui/Widgets/Toolbar';
  * @property {boolean} [showOverlayStackControl=true] - Whether to show the overlay stack control toolbar.
  * @property {boolean} [showSurveyStackControl=true] - Whether to show the survey stack control toolbar.
  * @property {boolean} [showFullscreenControl=true] - Whether to show the fullscreen control toolbar.
- * @property {boolean} [showGotoControl=false] - Whether to show the goto control toolbar.
  * @property {boolean} [showSimbadPointerControl=false] - Whether to show the Simbad pointer control toolbar.
  * @property {boolean} [showCooGridControl=false] - Whether to show the coordinate grid control toolbar.
  * @property {boolean} [showSettingsControl=true] - Whether to show the settings control toolbar.
@@ -371,9 +370,7 @@ export let Aladin = (function () {
             viewport.add(this.location);
         }
         // Add the FoV info
-        if (options.showFov) {
-            viewport.add(new FoV(this))
-        }
+        viewport.add(new FoV(this, options))
 
         ////////////////////////////////////////////////////
         let menu = new Menu({
@@ -387,16 +384,7 @@ export let Aladin = (function () {
 
         // Add the layers control
         if (options.showLayersControl) {
-            menu.enable('stack')
             menu.enable('overlay')
-        } else {
-            if (options.showSurveyStackControl) {
-                menu.enable('stack')
-            }
-
-            if (options.showOverlayStackControl) {
-                menu.enable('overlay')
-            }
         }
         // Add the simbad pointer control
         if (options.showSimbadPointerControl) {
@@ -432,14 +420,12 @@ export let Aladin = (function () {
 
         // share control panel
         if (options.showShareControl) {
-            let share = new Toolbar({
+            /*let share = new Toolbar({
                 orientation: 'horizontal',
-                position: {
-                    anchor: 'left bottom'
-                }
+                
             }, this);
 
-            share.add(new ShareActionButton(self))
+            share.add()*/
             /*share.add(new SnapshotActionButton({
                 tooltip: {
                     content: 'Take a snapshot of your current view',
@@ -449,7 +435,11 @@ export let Aladin = (function () {
                 },
             }, this))*/
 
-            this.addUI(share);
+            this.addUI(new ShareActionButton(self, {
+                position: {
+                    anchor: 'left bottom'
+                }
+            }));
         }
 
         if (options.showProjectionControl) {
@@ -556,13 +546,11 @@ export let Aladin = (function () {
         showZoomControl: true,
         // Menu toolbar
         showLayersControl: false,
-        showOverlayStackControl: true,
-        showSurveyStackControl: true,
         showFullscreenControl: true,
-        showGotoControl: false,
+        //showGotoControl: false,
         showSimbadPointerControl: false,
         showCooGridControl: false,
-        showSettingsControl: true,
+        showSettingsControl: false,
         // Share toolbar
         showShareControl: false,
 

diff --git a/src/js/gui/FoV.js b/src/js/gui/FoV.js
@@ -40,58 +40,65 @@ import minusIconUrl from "../../../assets/icons/minus.svg"
 
 export class FoV extends DOMElement {
     // constructor
-    constructor(aladin) {
-        let el = Layout.horizontal({
-            layout: [
-                new ActionButton({
+    constructor(aladin, options) {
+        let layout = [];
+
+        if (options.showZoomControl) {
+            layout.push(new ActionButton({
+                size: 'small',
+                icon: {
+                    monochrome: true,
                     size: 'small',
-                    icon: {
-                        monochrome: true,
-                        size: 'small',
-                        url: plusIconUrl,
-                    },
-                    cssStyle: {
-                        marginRight: 0,
-                        borderRight: 'none',
-                        borderRadius: '5px 0px 0px 5px'
-                    },
-                    action(o) {
-                        aladin.increaseZoom();
-                    }
-                }),
-                new ActionButton({
+                    url: plusIconUrl,
+                },
+                cssStyle: {
+                    marginRight: 0,
+                    borderRight: 'none',
+                    borderRadius: '5px 0px 0px 5px'
+                },
+                action(o) {
+                    aladin.increaseZoom();
+                }
+            }))
+            layout.push(new ActionButton({
+                size: 'small',
+                cssStyle: {
+                    borderRadius: '0px 5px 5px 0px'
+                },
+                icon: {
+                    monochrome: true,
                     size: 'small',
-                    cssStyle: {
-                        borderRadius: '0px 5px 5px 0px'
-                    },
-                    icon: {
-                        monochrome: true,
-                        size: 'small',
-                        url: minusIconUrl,
-                    },
-                    action(o) {
-                        aladin.decreaseZoom();
-                    }
-                }),
-                '<div class="aladin-monospace-text"></div>',
-                '<div class="aladin-label-text">&times;</div>',
-                '<div class="aladin-monospace-text"></div>',
-            ]
-        });
+                    url: minusIconUrl,
+                },
+                action(o) {
+                    aladin.decreaseZoom();
+                }
+            }))
+        }
+
+        if (options.showFov) {
+            layout.push(...['<div class="aladin-monospace-text"></div>',
+            '<div class="aladin-label-text">&times;</div>',
+            '<div class="aladin-monospace-text"></div>'])
+        }
+
+        let el = Layout.horizontal(layout);
         el.addClass('aladin-fov');
         el.addClass('aladin-dark-theme')
 
         super(el)
 
-        let self = this;
-        ALEvent.ZOOM_CHANGED.listenedBy(aladin.aladinDiv, function (e) {
+        if (options.showFov) {
+            let self = this;
+            ALEvent.ZOOM_CHANGED.listenedBy(aladin.aladinDiv, function (e) {
+                let [fovXDeg, fovYDeg] = aladin.getFov();
+
+                self._update(fovXDeg, fovYDeg)
+            });
+
             let [fovXDeg, fovYDeg] = aladin.getFov();
-
             self._update(fovXDeg, fovYDeg)
-        });
-
-        let [fovXDeg, fovYDeg] = aladin.getFov();
-        self._update(fovXDeg, fovYDeg)
+        }
     };
 
     _update(fovXDeg, fovYDeg) {

diff --git a/src/js/gui/Toolbar/Menu.js b/src/js/gui/Toolbar/Menu.js
@@ -26,12 +26,10 @@ import { SettingsCtxMenu } from "../CtxMenu/Settings";
 import { OverlayStack } from "../CtxMenu/OverlayStack";
 //import { GotoBox } from "../Box/GotoBox";
 import { SimbadPointer } from "../Button/SimbadPointer";
-import { ProjectionActionButton } from "../Button/Projection";
 
 import settingsIcon from './../../../../assets/icons/settings.svg';
 import stackOverlayIconUrl from './../../../../assets/icons/stack.svg';
 import { GridEnabler } from '../Button/GridEnabler';
-import searchIcon from './../../../../assets/icons/search.svg';
 
 import { Utils as UtilsExt } from "../../Utils";
 import { Utils } from "../Utils";