fix some ui positioning

cds-astro · Mar 25, 2024 · 0a66868 · 0a66868
1 parent e133f36
commit 0a66868
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 49 deletions.
diff --git a/examples/al-fullscreen.html b/examples/al-fullscreen.html
@@ -3,15 +3,18 @@
 <head>
 </head>
 <body>
-<div id="aladin-lite-div" style="width: 100%; height: 100%"></div>
+    <div>
+<div id="offset" style="display: inline-block; width: 200px; height: 100px"></div>
+<div id="aladin-lite-div" style="display: inline-block; width: 50%"></div>
+</div>
 <!--<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script>-->
 
 
 <script>let aladin, hips</script>
 <script type="module">
     import A from '../src/js/A.js';
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', target: 'galactic center', survey: 'P/Finkbeiner'});
+        aladin = A.aladin('#aladin-lite-div', {projection: 'TAN', cooFrame: 'galactic', showSettingsControl: true, showSimbadPointerControl: true, showContextMenu: true, target: 'galactic center', survey: 'P/Finkbeiner'});
         // possible values are 'blues', 'cividis', 'cubehelix', 'eosb', 'grayscale', 'inferno', 'magma', 'native', 'parula', 'plasma', 'rainbow',
         // 'rdbu', 'rdylbu', 'redtemperature', 'sinebow', 'spectral', 'summer', 'viridis', 'ylgnbu' and 'ylorbr'
 

diff --git a/examples/al-image-hips.html b/examples/al-image-hips.html
@@ -0,0 +1,34 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+
+    A.init.then(() => {
+        // Start up Aladin Lite
+        let aladin = A.aladin('#aladin-lite-div', {target: 'Sgr a*', fov: 0.5, showContextMenu: true});
+        let survey1 = aladin.getBaseImageLayer();
+        survey1.setColormap('magma', {stretch: 'linear'});
+
+        let survey2 = aladin.newImageSurvey("CDS/P/2MASS6X/H");
+        aladin.setImageLayer(survey2)
+        survey2.setColormap('rdbu', {stretch: 'asinh'});
+
+        let survey3 = aladin.newImageSurvey("https://alasky.cds.unistra.fr/CFHTLS-T0007b/Deep/UALLSKY/");
+        aladin.setImageLayer(survey3)
+        survey3.setColormap('cubehelix', {stretch: 'linear'});
+
+        aladin.setImageLayer(survey2);
+        aladin.setImageLayer(survey3);
+        aladin.setImageLayer(survey3);
+
+        //aladin.setOverlayImageLayer(survey2);
+    });
+</script>
+</body>
+</html>
diff --git a/src/css/aladin.css b/src/css/aladin.css
@@ -5,7 +5,6 @@ body { overscroll-behavior: contain; }
     height: 100%;
 	border: 0px solid #ddd;
     /* SVG inside divs add a 4px height: https://stackoverflow.com/questions/75751593/why-there-is-additional-4px-height-for-div-when-there-is-svg-inside-it */
-    line-height: 0;
 
     /* disable x swipe on chrome, firefox */
     /* see. https://stackoverflow.com/questions/30636930/disable-web-page-navigation-on-swipeback-and-forward */
@@ -1083,31 +1082,31 @@ canvas {
 .aladin-stack-control {
     position: absolute;
     top: 3rem;
-    left: 0.4rem;
+    left: 0.2rem;
 }
 
 .aladin-settings-control {
     position: absolute;
     top: 5.4rem;
-    left: 0.4rem;
+    left: 0.2rem;
 }
 
 .aladin-simbadPointer-control {
     position: absolute;
     top: 7.8rem;
-    left: 0.4rem;
+    left: 0.2rem;
 }
 
 .aladin-grid-control {
     position: absolute;
     top: 10.2rem;
-    left: 0.4rem;
+    left: 0.2rem;
 }
 
 .aladin-cooFrame {
     position: absolute;
-    top: 0.4rem;
-    left: 0.4rem;
+    top: 0.2rem;
+    left: 0.2rem;
 
     font-family: monospace;
 
@@ -1120,7 +1119,7 @@ canvas {
 
 .aladin-location {
     position: absolute;
-    top: 0.4rem;
+    top: 0.2rem;
     left: 7.15rem;
     font-family: monospace;
 
@@ -1133,8 +1132,8 @@ canvas {
 
 .aladin-fov {
     position: absolute;
-    bottom: 0.4rem;
-    left: 0.4rem;
+    bottom: 0.2rem;
+    left: 0.2rem;
 
     font-family: monospace;
 
@@ -1165,26 +1164,26 @@ canvas {
 .aladin-table {
     position: absolute;
     bottom: 2.8rem;
-    margin: 0rem 0.4rem;
-    max-width: calc(100% - 0.8rem);
+    left: 0.2rem;
+    max-width: calc(100% - 0.4rem);
     line-height: 1rem;
 }
 
 .aladin-share-control {
     position: absolute;
     top: 12.6rem;
-    left: 0.4rem;
+    left: 0.2rem;
 }
 
 .aladin-fullScreen-control {
     position: absolute;
-    top: 0.4rem;
-    right: 0.4rem;
+    top: 0.2rem;
+    right: 0.2rem;
 }
 
 .aladin-projection-control {
     position: absolute;
-    top: 0.4rem;
+    top: 0.2rem;
     right: 3rem;
 }
 

diff --git a/src/js/Aladin.js b/src/js/Aladin.js
@@ -73,15 +73,15 @@ import { CooFrame } from './gui/Input/CooFrame';
  * @typedef {Object} AladinOptions
  * @description Options for configuring the Aladin Lite instance.
  *
- * @property {string} [survey="https://alaskybis.unistra.fr/DSS/DSSColor"] URL or ID of the survey to use
- * @property {string[]} [surveyUrl=["https://alaskybis.unistra.fr/DSS/DSSColor", "https://alasky.unistra.fr/DSS/DSSColor"]]
+ * @property {string} [survey="CDS/P/DSS2/color"] URL or ID of the survey to use
+ * @property {string[]} [surveyUrl]
  *   Array of URLs for the survey images. This replaces the survey parameter.
  * @property {string} [target="0 +0"] - Target coordinates for the initial view.
  * @property {CooFrame} [cooFrame="J2000"] - Coordinate frame.
  * @property {number} [fov=60] - Field of view in degrees.
  * @property {string} [backgroundColor="rgb(60, 60, 60)"] - Background color in RGB format.
  *
- * @property {boolean} [showZoomControl=true] - Whether to show the zoom control toolbar.
+ * @property {boolean} [showZoomControl=false] - Whether to show the zoom control toolbar.
  * This element belongs to the FoV UI thus its CSS class is `aladin-fov` 
  * @property {boolean} [showLayersControl=true] - Whether to show the layers control toolbar.
  * CSS class for that button is `aladin-stack-control` 

diff --git a/src/js/GenericPointer.js b/src/js/GenericPointer.js
@@ -12,10 +12,10 @@ import { Utils } from './Utils';
 // allow to call either Simbad or Planetary features Pointers
 export let GenericPointer = function (view, e) {
     let xymouse;
-    if (e.x && e.y) {
-        xymouse = e;
-    } else {
+    if (e instanceof Event) {
         xymouse = Utils.relMouseCoords(e);
+    } else {
+        xymouse = e;
     }
 
     let radec = view.aladin.pix2world(xymouse.x, xymouse.y, 'icrs');

diff --git a/src/js/Popup.js b/src/js/Popup.js
@@ -90,6 +90,7 @@ export let Popup = (function() {
         }
         source.popup = this;
         this.source = source;
+
         this.setPosition(source.x, source.y);
     };
 

diff --git a/src/js/ProjectionEnum.js b/src/js/ProjectionEnum.js
@@ -32,7 +32,8 @@ export let ProjectionEnum = {
    TAN: {id: 1, fov: 150, label: "Tangential"},	         /* Gnomonic projection      */
    STG: {id: 2, fov: 360, label: "Stereographic"},	      /* Stereographic projection */
    SIN: {id: 3, fov: 180, label: "Spheric"},	      /* Orthographic		         */
-   ZEA: {id: 4, fov: 360, label: "Zenital equal-area"},	/* Equal-area 		         */
+   // TODO: fix why the projection disappears at fov = 360.0
+   ZEA: {id: 4, fov: 359.999, label: "Zenital equal-area"},	/* Equal-area 		         */
    //FEYE: {id: 5, fov: 190, label: "fish eye"},
    //AIR: {id: 6, fov: 360, label: "airy"},
    //AZP: {fov: 180},

diff --git a/src/js/View.js b/src/js/View.js
@@ -345,6 +345,9 @@ export let View = (function () {
     // called at startup and when window is resized
     // The WebGL backend is resized
     View.prototype.fixLayoutDimensions = function () {
+        // make de line height at 0. This prevents the resize observer to infinitely
+        // trigger over and over.
+        this.aladinDiv.style.setProperty('line-height', 0);
         Utils.cssScale = undefined;
 
         var computedWidth = parseFloat(window.getComputedStyle(this.aladinDiv).width) || 1.0;
@@ -363,19 +366,6 @@ export let View = (function () {
         this.mouseMoveIncrement = 160 / this.largestDim;
 
         // reinitialize 2D context
-        //this.aladinDiv.style.height = this.height + "px";
-
-        /*canvas
-        .style()
-        .set_property("width", &format!("{}px", width))
-        .unwrap_abort();
-    canvas
-        .style()
-        .set_property("height", &format!("{}px", height))
-        .unwrap_abort();
-
-    canvas.set_width(self.width as u32);
-    canvas.set_height(self.height as u32);*/
 
         this.catalogCtx = this.catalogCanvas.getContext("2d");
         this.catalogCtx.canvas.width = this.width;
@@ -414,6 +404,8 @@ export let View = (function () {
         }
 
         this.computeNorder();
+
+        this.aladinDiv.style.removeProperty('line-height');
     };
 
     var pixelateCanvasContext = function (ctx, pixelateFlag) {
@@ -819,8 +811,6 @@ export let View = (function () {
             if (view.mode == View.TOOL_SIMBAD_POINTER) {
                 // call Simbad pointer or Planetary features
                 GenericPointer(view, e);
-                // exit the simbad pointer mode
-                //view.setMode(View.PAN);
 
                 return; // when in TOOL_SIMBAD_POINTER mode, we do not call the listeners
             }

diff --git a/src/js/gui/FoV.js b/src/js/gui/FoV.js
@@ -83,8 +83,10 @@ export class FoV extends DOMElement {
         }
 
         let el = Layout.horizontal({layout, tooltip: { content: 'FoV', position: {direction: "top"}}});
-        el.tooltip.addClass('aladin-fov');
-        el.tooltip.addClass('aladin-dark-theme')
+        if (el.tooltip) {
+            el.tooltip.addClass('aladin-fov');
+            el.tooltip.addClass('aladin-dark-theme')
+        }
 
         super(el)
 

diff --git a/src/js/gui/Widgets/ContextMenu.js b/src/js/gui/Widgets/ContextMenu.js
@@ -317,7 +317,7 @@ export class ContextMenu extends DOMElement {
 
             let r = item.getBoundingClientRect();
 
-            if (r.x - aladinRect.left <= offsetWidth / 2.0) {
+            if (r.x - aladinRect.left <= aladinRect.right - (r.x + r.width)) {
                 leftDir -= 1;
             } else {
                 leftDir += 1;

diff --git a/src/js/gui/Widgets/Widget.js b/src/js/gui/Widgets/Widget.js
@@ -203,10 +203,12 @@ export class DOMElement {
         } else if (options && options.nextTo) {
             let dir = options.direction;
             let nextTo = options.nextTo;
-
+            let aDivRect = aladinDiv.getBoundingClientRect();
+            const offViewX = aDivRect.x;
+            const offViewY = aDivRect.y;
             if (!dir) {
                 // determine the direction with respect to the element given
-                let elX = options.nextTo.el.getBoundingClientRect().left + options.nextTo.el.getBoundingClientRect().width * 0.5;
+                let elX = options.nextTo.el.getBoundingClientRect().left + options.nextTo.el.getBoundingClientRect().width * 0.5 - offViewX;
                 dir = (elX < innerWidth / 2) ? 'right' : 'left';
             }
 
@@ -215,10 +217,6 @@ export class DOMElement {
             }
 
             let rect = nextTo.getBoundingClientRect();
-            let aDivRect = aladinDiv.getBoundingClientRect();
-
-            const offViewX = aDivRect.x;
-            const offViewY = aDivRect.y;
 
             switch (dir) {
                 case 'left':