diff --git a/examples/al-fullscreen.html b/examples/al-fullscreen.html index e9c7d53a..e0feae3b 100644 --- a/examples/al-fullscreen.html +++ b/examples/al-fullscreen.html @@ -3,7 +3,10 @@ -
+
+
+
+
@@ -11,7 +14,7 @@ + + diff --git a/src/css/aladin.css b/src/css/aladin.css index ab41a15d..35d9d0eb 100644 --- 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 index 05755491..302afb0b 100644 --- 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 index 873e1120..fe453f93 100644 --- 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 index 0092da78..9d6ad2d7 100644 --- 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 index 0ded42ec..a5b1c34f 100644 --- 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 index b5f38deb..6d7b514f 100644 --- 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 index d322e72a..8dc806f2 100644 --- 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 index 23e882b2..06d4b6e3 100644 --- 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 index 9531c1b0..a0bbc455 100644 --- 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':