From f8ee02a60496427c9898622501a81120b697a5b3 Mon Sep 17 00:00:00 2001 From: Matthieu Baumann Date: Tue, 5 Mar 2024 11:19:30 +0100 Subject: [PATCH] bind fov and zoom controls to showFov and showZoomControl aladin lite init options --- examples/al-init-custom-options.html | 3 + src/js/Aladin.js | 34 ++++------ src/js/gui/FoV.js | 93 +++++++++++++++------------- src/js/gui/Toolbar/Menu.js | 2 - 4 files changed, 64 insertions(+), 68 deletions(-) diff --git a/examples/al-init-custom-options.html b/examples/al-init-custom-options.html index 426f0f9d2..8cfa6752d 100644 --- 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 index 577ba51e7..e1d42fb0e 100644 --- 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 index b5a444c30..71fc43600 100644 --- 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(); - } - }), - '
', - '
×
', - '
', - ] - }); + url: minusIconUrl, + }, + action(o) { + aladin.decreaseZoom(); + } + })) + } + + if (options.showFov) { + layout.push(...['
', + '
×
', + '
']) + } + + 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 index 148e56ddc..e208e9dcd 100644 --- 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";