gitea-mirror/aladin-lite
1
0
Fork 0
mirror of https://github.com/cds-astro/aladin-lite.git synced 2025-12-12 07:40:26 -08:00
Code Issues Packages Projects Releases Wiki Activity

fix some ui positioning

Browse Source
This commit is contained in:
Matthieu Baumann
2024-03-25 17:10:07 +01:00
parent e133f36fef
commit 0a6686835a
11 changed files with 77 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
examples/al-fullscreen.html
View File

@@ -3,7 +3,10 @@
<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>-->
@@ -11,7 +14,7 @@
<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'

34
examples/al-image-hips.html Normal file
View File

@@ -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>

31
src/css/aladin.css
View File

@@ -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;
}

6
src/js/Aladin.js
View File

@@ -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`

6
src/js/GenericPointer.js
View File

@@ -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');

1
src/js/Popup.js
View File

@@ -90,6 +90,7 @@ export let Popup = (function() {
}
source.popup = this;
this.source = source;
this.setPosition(source.x, source.y);
};

3
src/js/ProjectionEnum.js
View File

@@ -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},

20
src/js/View.js
View File

@@ -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
}

6
src/js/gui/FoV.js
View File

@@ -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)

2
src/js/gui/Widgets/ContextMenu.js
View File

@@ -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;

10
src/js/gui/Widgets/Widget.js
View File

@@ -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':