mirror of
https://github.com/cds-astro/aladin-lite.git
synced 2026-01-18 15:57:45 -08:00
Compare commits
6 Commits
select-imp
...
small-devi
| Author | SHA1 | Date | |
|---|---|---|---|
|
9202375d2e | ||
|
|
b77267709d | ||
|
|
4d8ca68f8c | ||
|
|
c63284fc12 | ||
|
|
630f4453cc | ||
|
|
c80cba8ec8 |
2
.github/workflows/api_doc.yml
vendored
2
.github/workflows/api_doc.yml
vendored
@@ -43,7 +43,7 @@ jobs:
|
|||||||
uses: actions/upload-pages-artifact@v3
|
uses: actions/upload-pages-artifact@v3
|
||||||
with:
|
with:
|
||||||
# Upload entire repository
|
# Upload entire repository
|
||||||
path: './doc'
|
path: './docs'
|
||||||
- name: Deploy to GitHub Pages
|
- name: Deploy to GitHub Pages
|
||||||
id: deployment
|
id: deployment
|
||||||
uses: actions/deploy-pages@v4
|
uses: actions/deploy-pages@v4
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
## 3.4.2-beta
|
## 3.4.2-beta
|
||||||
|
|
||||||
|
* [impr] Improve smartphone support by setting media queries + a better logic for deploying the contextual menu sub options.
|
||||||
* [impr] Improve `WCS` view export with 3rd euler rotation encoding: <https://github.com/cds-astro/aladin-lite/issues/170>. Still some cases are to be handled like: crval on the equator or cylindrical with a galactic frame rotation.
|
* [impr] Improve `WCS` view export with 3rd euler rotation encoding: <https://github.com/cds-astro/aladin-lite/issues/170>. Still some cases are to be handled like: crval on the equator or cylindrical with a galactic frame rotation.
|
||||||
* [fixed] Change `RADECSYS` to `RADESYS` for `Aladin#getViewWCS` to follow fits standard deprecation
|
* [fixed] Change `RADECSYS` to `RADESYS` for `Aladin#getViewWCS` to follow fits standard deprecation
|
||||||
* [feat] Add new method `Aladin#getViewImageBuffer` to get the current view as a PNG buffer
|
* [feat] Add new method `Aladin#getViewImageBuffer` to get the current view as a PNG buffer
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|||||||
@@ -77,11 +77,7 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.aladin-stack-control {
|
|
||||||
position: absolute;
|
|
||||||
top: 10rem;
|
|
||||||
left: 10rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.myBox {
|
.myBox {
|
||||||
top: unset;
|
top: unset;
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
import A from '../src/js/A.js';
|
import A from '../src/js/A.js';
|
||||||
let aladin;
|
let aladin;
|
||||||
A.init.then(() => {
|
A.init.then(() => {
|
||||||
aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/Mellinger/color', showContextMenu: true});
|
aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/Mellinger/color', showContextMenu: true, fullScreen: true});
|
||||||
var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 3}, (moc) => {
|
var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 3}, (moc) => {
|
||||||
// moc is ready
|
// moc is ready
|
||||||
console.log(moc.contains(205.9019247, +2.4492764));
|
console.log(moc.contains(205.9019247, +2.4492764));
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ name = "aladin-lite"
|
|||||||
description = "Aladin Lite v3 introduces a new graphical engine written in Rust with the use of WebGL"
|
description = "Aladin Lite v3 introduces a new graphical engine written in Rust with the use of WebGL"
|
||||||
license = "BSD-3-Clause"
|
license = "BSD-3-Clause"
|
||||||
repository = "https://github.com/cds-astro/aladin-lite"
|
repository = "https://github.com/cds-astro/aladin-lite"
|
||||||
version = "3.4.1-beta"
|
version = "3.4.2-beta"
|
||||||
authors = [ "baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr",]
|
authors = [ "baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr",]
|
||||||
edition = "2018"
|
edition = "2018"
|
||||||
|
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
There can be a more supported alternative here: https://caniuse.com/?search=grid-template-columns */
|
There can be a more supported alternative here: https://caniuse.com/?search=grid-template-columns */
|
||||||
/*container-type: inline-size;*/
|
/*container-type: inline-size;*/
|
||||||
|
|
||||||
font-size: 1rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aladin-imageCanvas {
|
.aladin-imageCanvas {
|
||||||
@@ -58,7 +58,6 @@
|
|||||||
|
|
||||||
.aladin-measurement-div {
|
.aladin-measurement-div {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 0.8rem;
|
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@@ -132,7 +131,7 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
/*font-family: monospace;*/
|
/*font-family: monospace;*/
|
||||||
font-size: 11px;
|
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
.aladin-marker-measurement table {
|
.aladin-marker-measurement table {
|
||||||
@@ -205,8 +204,8 @@
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
max-width: 15em;
|
max-width: 15em;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
@@ -234,7 +233,7 @@ canvas {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.aladin-box-title {
|
.aladin-box-title {
|
||||||
font-size: 16px;
|
font-size: 1.0rem;
|
||||||
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
|
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@@ -256,7 +255,7 @@ canvas {
|
|||||||
border: 1px solid #AEAEAE!important;
|
border: 1px solid #AEAEAE!important;
|
||||||
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-size: 13px!important;
|
font-size: 1rem;
|
||||||
background: #fff!important;
|
background: #fff!important;
|
||||||
margin-right: 0.2em!important;
|
margin-right: 0.2em!important;
|
||||||
|
|
||||||
@@ -277,7 +276,7 @@ canvas {
|
|||||||
border: 1px solid #AEAEAE;
|
border: 1px solid #AEAEAE;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
font-size: 15px;
|
font-size: 1.0rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 0px;
|
line-height: 0px;
|
||||||
padding: 8px 2px;
|
padding: 8px 2px;
|
||||||
@@ -313,7 +312,8 @@ canvas {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
|
|
||||||
font-size: 1rem;
|
font-size: inherit;
|
||||||
|
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -418,7 +418,6 @@ canvas {
|
|||||||
.aladin-input-text.search {
|
.aladin-input-text.search {
|
||||||
background-image:none;
|
background-image:none;
|
||||||
text-indent: 0rem;
|
text-indent: 0rem;
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.2rem;
|
line-height: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -541,7 +540,6 @@ canvas {
|
|||||||
|
|
||||||
.aladin-window {
|
.aladin-window {
|
||||||
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
|
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
|
||||||
font-size: 13px;
|
|
||||||
background: white;
|
background: white;
|
||||||
border: 1px solid #bbb;
|
border: 1px solid #bbb;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@@ -560,7 +558,6 @@ canvas {
|
|||||||
|
|
||||||
.aladin-popup {
|
.aladin-popup {
|
||||||
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
|
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
|
||||||
font-size: 13px;
|
|
||||||
background: white;
|
background: white;
|
||||||
border: 1px solid #bbb;
|
border: 1px solid #bbb;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@@ -637,8 +634,6 @@ canvas {
|
|||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
|
||||||
max-width: 20rem;
|
max-width: 20rem;
|
||||||
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aladin-sp-title a {
|
.aladin-sp-title a {
|
||||||
@@ -646,14 +641,9 @@ canvas {
|
|||||||
color: #317d8d;
|
color: #317d8d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aladin-sp-content {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.aladin-sp-content a {
|
.aladin-sp-content a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #478ade;
|
color: #478ade;
|
||||||
font-size: 11px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aladin-cuts {
|
.aladin-cuts {
|
||||||
@@ -704,8 +694,6 @@ canvas {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
box-shadow: 0 0 8px rgba(0,0,0,0.2);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
|
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
|
||||||
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
@@ -754,12 +742,22 @@ canvas {
|
|||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.aladin-context-menu-item:hover > .aladin-context-sub-menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.aladin-context-menu-item:hover {
|
.aladin-context-menu-item:hover {
|
||||||
/* This is for the tooltip to appear outside the item, i.e. over the sibling item */
|
color: greenyellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aladin-context-menu-item:not(hover) {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.aladin-context-menu-item .aladin-context-sub-menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.aladin-context-menu .aladin-context-menu-item span {
|
.aladin-context-menu .aladin-context-menu-item span {
|
||||||
display: block;
|
display: block;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -776,20 +774,31 @@ canvas {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
.aladin-context-menu.left .aladin-context-sub-menu {
|
.aladin-context-menu .aladin-context-sub-menu.left {
|
||||||
left: 0;
|
left: 0;
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.aladin-context-menu.top .aladin-context-sub-menu {
|
.aladin-context-menu .aladin-context-sub-menu.right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aladin-context-menu .aladin-context-sub-menu.bottom {
|
||||||
top: 100%;
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aladin-context-menu .aladin-context-sub-menu.top {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
transform: translateY(-100%);
|
transform: translateY(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.aladin-context-menu.left.top .aladin-context-sub-menu {
|
.aladin-context-menu .aladin-context-sub-menu.left.top {
|
||||||
transform: translate(-100%, -100%);
|
transform: translate(-100%, -100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.aladin-reticle {
|
.aladin-reticle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
@@ -816,7 +825,6 @@ canvas {
|
|||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 1rem;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -835,14 +843,14 @@ canvas {
|
|||||||
/* Reset */
|
/* Reset */
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
font: inherit;
|
/*font: inherit;*/
|
||||||
/* Personalize */
|
/* Personalize */
|
||||||
padding: 2px;
|
padding: 0.2em;
|
||||||
|
font-size: inherit;
|
||||||
border-radius: 0.25em;
|
border-radius: 0.25em;
|
||||||
box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
|
box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 1rem;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/* <option> colors */
|
/* <option> colors */
|
||||||
/* Remove focus outline */
|
/* Remove focus outline */
|
||||||
@@ -989,7 +997,6 @@ canvas {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
|
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
|
||||||
font-size: 0.9rem;
|
|
||||||
|
|
||||||
transition-delay: 100ms;
|
transition-delay: 100ms;
|
||||||
}
|
}
|
||||||
@@ -1097,10 +1104,9 @@ canvas {
|
|||||||
|
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
font-size: 1rem;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
height: 1.7rem;
|
height: 1.7rem;
|
||||||
width: 5rem;
|
width: 4.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -1125,18 +1131,29 @@ canvas {
|
|||||||
.aladin-location {
|
.aladin-location {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.2rem;
|
top: 0.2rem;
|
||||||
left: 5.4rem;
|
left: 5.0rem;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
|
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
font-size: 1rem;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
height: 1.7rem;
|
height: 1.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.aladin-input-text {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
.aladin-location .aladin-input-text {
|
.aladin-location .aladin-input-text {
|
||||||
width: 15rem;
|
width: 13.5rem;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 0 0.4rem 0.4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aladin-location .aladin-location-copy {
|
||||||
|
margin-right: -0.2rem;
|
||||||
|
border-radius: 0.4rem 0px 0px 0.4rem;
|
||||||
|
border-right: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aladin-fov {
|
.aladin-fov {
|
||||||
@@ -1148,7 +1165,6 @@ canvas {
|
|||||||
|
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
|
|
||||||
font-size: 1rem;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
line-height: 1.7rem;
|
line-height: 1.7rem;
|
||||||
}
|
}
|
||||||
@@ -1224,6 +1240,35 @@ canvas {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Media query */
|
/* Media query */
|
||||||
|
@media screen and (max-width:480px) {
|
||||||
|
/* smartphones, Android phones, landscape iPhone */
|
||||||
|
.aladin-location > .aladin-btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aladin-location > .aladin-input-text {
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aladin-projection-control {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aladin-location .aladin-location-copy {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width:370px) {
|
||||||
|
/* smartphones, Android phones, landscape iPhone */
|
||||||
|
.aladin-location {
|
||||||
|
left: 0.2rem;
|
||||||
|
}
|
||||||
|
.aladin-cooFrame {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*@media screen and (max-width: 31rem) {
|
/*@media screen and (max-width: 31rem) {
|
||||||
.aladin-projection-control {
|
.aladin-projection-control {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
22
src/js/A.js
22
src/js/A.js
@@ -452,28 +452,6 @@ A.MOCFromPolygon= function (polygon, options, successCallback, errorCallback) {
|
|||||||
return moc;
|
return moc;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Represents options for configuring a catalog.
|
|
||||||
*
|
|
||||||
* @typedef {Object} CatalogOptions
|
|
||||||
* @property {string} url - The URL of the catalog.
|
|
||||||
* @property {string} [name="catalog"] - The name of the catalog.
|
|
||||||
* @property {string} [color] - The color associated with the catalog.
|
|
||||||
* @property {number} [sourceSize=8] - The size of the sources in the catalog.
|
|
||||||
* @property {number} [markerSize=12] - The size of the markers associated with sources.
|
|
||||||
* @property {string} [shape="square"] - The shape of the sources (e.g., "square", "circle", "rhomb", "triangle", "cross").
|
|
||||||
* @property {number} [limit] - The maximum number of sources to display.
|
|
||||||
* @property {function} [onClick] - The callback function to execute on a source click.
|
|
||||||
* @property {boolean} [readOnly=false] - Whether the catalog is read-only.
|
|
||||||
* @property {string} [raField] - The ID or name of the field holding Right Ascension (RA).
|
|
||||||
* @property {string} [decField] - The ID or name of the field holding Declination (dec).
|
|
||||||
* @property {function} [filter] - The filtering function for sources. Returns a boolean
|
|
||||||
* @property {boolean} [displayLabel=false] - Whether to display labels for sources.
|
|
||||||
* @property {string} [labelColumn] - The name of the column to be used for the label.
|
|
||||||
* @property {string} [labelColor] - The color of the source labels.
|
|
||||||
* @property {string} [labelFont="10px sans-serif"] - The font for the source labels.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Represents a catalog with configurable options for display and interaction.
|
* Represents a catalog with configurable options for display and interaction.
|
||||||
*
|
*
|
||||||
|
|||||||
@@ -40,34 +40,35 @@ import { Circle } from "./shapes/Circle.js";
|
|||||||
import { Footprint } from "./Footprint.js";
|
import { Footprint } from "./Footprint.js";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* Represents options for configuring a catalog.
|
||||||
*
|
*
|
||||||
* @namespace
|
* @typedef {Object} CatalogOptions
|
||||||
* @typedef {Object} Catalog
|
* @property {string} url - The URL of the catalog.
|
||||||
|
* @property {string} [name="catalog"] - The name of the catalog.
|
||||||
|
* @property {string} [color] - The color associated with the catalog.
|
||||||
|
* @property {number} [sourceSize=8] - The size of the sources in the catalog.
|
||||||
|
* @property {string|function|Image|HTMLCanvasElement} [shape="square"] - The shape of the sources (can be, "square", "circle", "plus", "cross", "rhomb", "triangle").
|
||||||
|
* @property {number} [limit] - The maximum number of sources to display.
|
||||||
|
* @property {string|Function} [onClick] - Whether the source data appears as a table row or a in popup. Can be 'showTable' string, 'showPopup' string or a custom user defined function that handles the click.
|
||||||
|
* @property {boolean} [readOnly=false] - Whether the catalog is read-only.
|
||||||
|
* @property {string} [raField] - The ID or name of the field holding Right Ascension (RA).
|
||||||
|
* @property {string} [decField] - The ID or name of the field holding Declination (dec).
|
||||||
|
* @property {function} [filter] - The filtering function for sources.
|
||||||
|
* @property {string} [selectionColor="#00ff00"] - The color to apply to selected sources in the catalog.
|
||||||
|
* @property {string} [hoverColor=color] - The color to apply to sources in the catalog when they are hovered.
|
||||||
|
* @property {boolean} [displayLabel=false] - Whether to display labels for sources.
|
||||||
|
* @property {string} [labelColumn] - The name of the column to be used for the label.
|
||||||
|
* @property {string} [labelColor=color] - The color of the source labels.
|
||||||
|
* @property {string} [labelFont="10px sans-serif"] - The font for the source labels.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export let Catalog = (function () {
|
export let Catalog = (function () {
|
||||||
/**
|
/**
|
||||||
* Represents a catalog with configurable options for display and interaction.
|
* Represents a catalog with configurable options for display and interaction.
|
||||||
*
|
*
|
||||||
* @class
|
* @class
|
||||||
* @constructs Catalog
|
* @constructs Catalog
|
||||||
* @param {Object} options - Configuration options for the catalog.
|
* @param {CatalogOptions} options - Configuration options for the catalog.
|
||||||
* @param {string} options.url - The URL of the catalog.
|
|
||||||
* @param {string} [options.name="catalog"] - The name of the catalog.
|
|
||||||
* @param {string} [options.color] - The color associated with the catalog.
|
|
||||||
* @param {number} [options.sourceSize=8] - The size of the sources in the catalog.
|
|
||||||
* @param {string|function|Image|HTMLCanvasElement} [options.shape="square"] - The shape of the sources (can be, "square", "circle", "plus", "cross", "rhomb", "triangle").
|
|
||||||
* @param {number} [options.limit] - The maximum number of sources to display.
|
|
||||||
* @param {string|Function} [options.onClick] - Whether the source data appears as a table row or a in popup. Can be 'showTable' string, 'showPopup' string or a custom user defined function that handles the click.
|
|
||||||
* @param {boolean} [options.readOnly=false] - Whether the catalog is read-only.
|
|
||||||
* @param {string} [options.raField] - The ID or name of the field holding Right Ascension (RA).
|
|
||||||
* @param {string} [options.decField] - The ID or name of the field holding Declination (dec).
|
|
||||||
* @param {function} [options.filter] - The filtering function for sources.
|
|
||||||
* @param {string} [options.selectionColor] - The color to apply to selected sources in the catalog.
|
|
||||||
* @param {string} [options.hoverColor] - The color to apply to sources in the catalog when they are hovered.
|
|
||||||
* @param {boolean} [options.displayLabel=false] - Whether to display labels for sources.
|
|
||||||
* @param {string} [options.labelColumn] - The name of the column to be used for the label.
|
|
||||||
* @param {string} [options.labelColor] - The color of the source labels.
|
|
||||||
* @param {string} [options.labelFont="10px sans-serif"] - The font for the source labels.
|
|
||||||
*
|
*
|
||||||
* @example
|
* @example
|
||||||
* const catalogOptions = {
|
* const catalogOptions = {
|
||||||
|
|||||||
@@ -34,6 +34,7 @@ import { CatalogQueryBox } from "./gui/Box/CatalogQueryBox.js";
|
|||||||
import cameraIconUrl from '../../assets/icons/camera.svg'
|
import cameraIconUrl from '../../assets/icons/camera.svg'
|
||||||
import targetIconUrl from '../../assets/icons/target.svg';
|
import targetIconUrl from '../../assets/icons/target.svg';
|
||||||
import uploadIconUrl from '../../assets/icons/upload.svg';
|
import uploadIconUrl from '../../assets/icons/upload.svg';
|
||||||
|
import selectIconUrl from '../../assets/icons/select.svg';
|
||||||
|
|
||||||
export let DefaultActionsForContextMenu = (function () {
|
export let DefaultActionsForContextMenu = (function () {
|
||||||
|
|
||||||
@@ -164,7 +165,7 @@ export let DefaultActionsForContextMenu = (function () {
|
|||||||
|
|
||||||
files.forEach(file => {
|
files.forEach(file => {
|
||||||
const url = URL.createObjectURL(file);
|
const url = URL.createObjectURL(file);
|
||||||
let moc = A.MOCFromURL(url, { name: file.name, edge: true });
|
let moc = A.MOCFromURL(url, { name: file.name });
|
||||||
a.addMOC(moc);
|
a.addMOC(moc);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@@ -190,6 +191,30 @@ export let DefaultActionsForContextMenu = (function () {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: {
|
||||||
|
icon: {
|
||||||
|
monochrome: true,
|
||||||
|
url: selectIconUrl,
|
||||||
|
size: 'small',
|
||||||
|
},
|
||||||
|
content: "Select sources"
|
||||||
|
},
|
||||||
|
subMenu: [
|
||||||
|
{
|
||||||
|
label: 'Circular',
|
||||||
|
action(o) {
|
||||||
|
a.select('circle', selectObjects)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Rectangular',
|
||||||
|
action(o) {
|
||||||
|
a.select('rect', selectObjects)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: {
|
label: {
|
||||||
icon: {
|
icon: {
|
||||||
@@ -219,23 +244,6 @@ export let DefaultActionsForContextMenu = (function () {
|
|||||||
window.open(hips2fitsUrl, '_blank');
|
window.open(hips2fitsUrl, '_blank');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: "Select sources",
|
|
||||||
subMenu: [
|
|
||||||
{
|
|
||||||
label: 'Circular',
|
|
||||||
action(o) {
|
|
||||||
a.select('circle', selectObjects)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Rectangular',
|
|
||||||
action(o) {
|
|
||||||
a.select('rect', selectObjects)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -539,7 +539,17 @@ export class OverlayStackBox extends Box {
|
|||||||
self.hipsSelectorBox._show({
|
self.hipsSelectorBox._show({
|
||||||
position: self.position,
|
position: self.position,
|
||||||
});*/
|
});*/
|
||||||
self.aladin.addNewImageLayer();
|
self.aladin.addNewImageLayer(
|
||||||
|
A.imageHiPS('CDS/P/DSS2/color', {
|
||||||
|
errorCallback: (e) => {
|
||||||
|
aladin.addStatusBarMessage({
|
||||||
|
duration: 2000,
|
||||||
|
type: 'info',
|
||||||
|
message: 'DSS2 colored HiPS could not plot',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -107,9 +107,6 @@ export class Location extends DOMElement {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
value: parseCoo(),
|
value: parseCoo(),
|
||||||
cssStyle: {
|
|
||||||
borderRadius: "0px 5px 5px 0px",
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
let copyBtn = new ActionButton({
|
let copyBtn = new ActionButton({
|
||||||
@@ -122,15 +119,8 @@ export class Location extends DOMElement {
|
|||||||
action(e) {
|
action(e) {
|
||||||
self.copyCoordinatesToClipboard()
|
self.copyCoordinatesToClipboard()
|
||||||
},
|
},
|
||||||
cssStyle: {
|
|
||||||
height: '1.4rem',
|
|
||||||
width: '1.4rem',
|
|
||||||
paddingRight: '0.2rem',
|
|
||||||
borderRadius: "5px 0px 0px 5px",
|
|
||||||
borderRight: 'none',
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
copyBtn.element().style.marginRight = 0;
|
copyBtn.el.classList.add("aladin-location-copy");
|
||||||
|
|
||||||
let el = Layout.horizontal({
|
let el = Layout.horizontal({
|
||||||
layout: [
|
layout: [
|
||||||
|
|||||||
@@ -91,7 +91,7 @@ export class ContextMenu extends DOMElement {
|
|||||||
ContextMenu._menus.push(this);
|
ContextMenu._menus.push(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
static lastHoveredItem;
|
//static lastHoveredItem;
|
||||||
|
|
||||||
_attachOption(target, opt, e, cssStyle) {
|
_attachOption(target, opt, e, cssStyle) {
|
||||||
let item = document.createElement('li');
|
let item = document.createElement('li');
|
||||||
@@ -202,7 +202,8 @@ export class ContextMenu extends DOMElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (opt.subMenu && opt.subMenu.length > 0) {
|
if (opt.subMenu && opt.subMenu.length > 0) {
|
||||||
item.appendChild(new Icon({url: nextIconSvg, size: 'small', monochrome: true}).element());
|
let iconElt = new Icon({url: nextIconSvg, size: 'small', monochrome: true}).element();
|
||||||
|
item.appendChild(iconElt);
|
||||||
item.style.display = 'flex';
|
item.style.display = 'flex';
|
||||||
item.style.alignItems = 'center';
|
item.style.alignItems = 'center';
|
||||||
item.style.justifyContent = 'space-between';
|
item.style.justifyContent = 'space-between';
|
||||||
@@ -218,19 +219,27 @@ export class ContextMenu extends DOMElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (opt.subMenu) {
|
if (opt.subMenu) {
|
||||||
|
// User
|
||||||
item.addEventListener('click', e => {
|
item.addEventListener('click', e => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
if (item.parentNode) {
|
/* Add the ability to deploy the menu/sub-menus for touch screen devices */
|
||||||
let subMenus = item.parentNode.querySelectorAll(".aladin-context-sub-menu")
|
if (Utils.hasTouchScreen()) {
|
||||||
for (let subMenuChild of subMenus) {
|
let subMenu = item.querySelector(".aladin-context-sub-menu")
|
||||||
subMenuChild.style.display = 'none';
|
let subMenuIsShown = subMenu.style.display === "block";
|
||||||
}
|
|
||||||
|
if (item.parentNode) {
|
||||||
|
let subMenus = item.parentNode.querySelectorAll(".aladin-context-sub-menu")
|
||||||
|
for (let subMenuChild of subMenus) {
|
||||||
|
subMenuChild.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!subMenuIsShown) {
|
||||||
|
subMenu.style.setProperty('display', 'block');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
item.querySelector(".aladin-context-sub-menu")
|
|
||||||
.style.display = 'block';
|
|
||||||
|
|
||||||
if (opt.action && (!opt.disabled || opt.disabled === false)) {
|
if (opt.action && (!opt.disabled || opt.disabled === false)) {
|
||||||
opt.action(e, self);
|
opt.action(e, self);
|
||||||
}
|
}
|
||||||
@@ -278,7 +287,7 @@ export class ContextMenu extends DOMElement {
|
|||||||
opt.hover(e, item);
|
opt.hover(e, item);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ContextMenu.lastHoveredItem) {
|
/*if (ContextMenu.lastHoveredItem) {
|
||||||
let parent = ContextMenu.lastHoveredItem.parentNode;
|
let parent = ContextMenu.lastHoveredItem.parentNode;
|
||||||
if (parent && (areSiblings(parent, item) || item.contains(parent) || item === parent)) {
|
if (parent && (areSiblings(parent, item) || item.contains(parent) || item === parent)) {
|
||||||
ContextMenu.lastHoveredItem.style.display = 'none';
|
ContextMenu.lastHoveredItem.style.display = 'none';
|
||||||
@@ -289,7 +298,7 @@ export class ContextMenu extends DOMElement {
|
|||||||
if (subMenu) {
|
if (subMenu) {
|
||||||
subMenu.style.display = 'block';
|
subMenu.style.display = 'block';
|
||||||
ContextMenu.lastHoveredItem = subMenu;
|
ContextMenu.lastHoveredItem = subMenu;
|
||||||
}
|
}*/
|
||||||
})
|
})
|
||||||
|
|
||||||
item.addEventListener('mouseout', e => {
|
item.addEventListener('mouseout', e => {
|
||||||
@@ -308,44 +317,43 @@ export class ContextMenu extends DOMElement {
|
|||||||
target.appendChild(item);
|
target.appendChild(item);
|
||||||
}
|
}
|
||||||
|
|
||||||
_subMenuDisplay(parent) {
|
_subMenuDisplay(parent, child) {
|
||||||
const {offsetWidth, offsetHeight} = this.aladin.aladinDiv;
|
parent.style.display = "block";
|
||||||
const aladinRect = this.aladin.aladinDiv.getBoundingClientRect();
|
child.style.display = "block";
|
||||||
|
|
||||||
|
if (child.classList.contains('aladin-context-sub-menu')) {
|
||||||
|
const aladinRect = this.aladin.aladinDiv.getBoundingClientRect();
|
||||||
|
|
||||||
let leftDir = 0;
|
let o = parent.getBoundingClientRect();
|
||||||
let topDir = 0;
|
let c = child.getBoundingClientRect();
|
||||||
|
|
||||||
for (let item of parent.children) {
|
child.classList.remove('left', 'right', 'top', 'bottom');
|
||||||
item.style.display = "block";
|
|
||||||
|
|
||||||
let r = item.getBoundingClientRect();
|
// First check if there is place towards the right, which is the desired behaviour
|
||||||
|
if (aladinRect.right - (o.x + o.width) >= c.width) {
|
||||||
if (r.x - aladinRect.left <= aladinRect.right - (r.x + r.width)) {
|
// do nothing as it is by default considering this case
|
||||||
leftDir -= 1;
|
} else if (o.x - aladinRect.left >= c.width) {
|
||||||
|
child.classList.add('left');
|
||||||
|
} else if (aladinRect.bottom - (o.y + o.height) >= c.height) {
|
||||||
|
child.classList.add('bottom');
|
||||||
} else {
|
} else {
|
||||||
leftDir += 1;
|
child.classList.add('top');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (r.y - aladinRect.top <= offsetHeight / 2.0) {
|
/*if (r.y - aladinRect.top <= offsetHeight / 2.0) {
|
||||||
topDir -= 1;
|
topDir -= 1;
|
||||||
} else {
|
} else {
|
||||||
topDir += 1;
|
topDir += 1;
|
||||||
}
|
}*/
|
||||||
|
|
||||||
item.style.display = "";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (leftDir > 0) {
|
for (let grandChild of child.children) {
|
||||||
this.el.classList.add('left');
|
this._subMenuDisplay(child, grandChild);
|
||||||
} else {
|
|
||||||
this.el.classList.add('right');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (topDir > 0) {
|
child.style.display = "";
|
||||||
this.el.classList.add('top');
|
parent.style.display = "";
|
||||||
} else {
|
|
||||||
this.el.classList.add('bottom');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
show(options) {
|
show(options) {
|
||||||
@@ -366,14 +374,14 @@ export class ContextMenu extends DOMElement {
|
|||||||
let mouseCoords = options && options.e && Utils.relMouseCoords(options.e)
|
let mouseCoords = options && options.e && Utils.relMouseCoords(options.e)
|
||||||
// Set position
|
// Set position
|
||||||
const position =
|
const position =
|
||||||
options && options.position ||
|
options && options.position ||
|
||||||
{left: mouseCoords.x, top: mouseCoords.y};
|
{left: mouseCoords.x, top: mouseCoords.y};
|
||||||
|
|
||||||
this.setPosition({...position, aladin: this.aladin})
|
this.setPosition({...position, aladin: this.aladin})
|
||||||
|
|
||||||
this.el.classList.remove('left')
|
for (let childEl of this.el.children) {
|
||||||
this.el.classList.remove('top')
|
this._subMenuDisplay(this.el, childEl);
|
||||||
|
}
|
||||||
this._subMenuDisplay(this.el)
|
|
||||||
|
|
||||||
super._show()
|
super._show()
|
||||||
}
|
}
|
||||||
|
|||||||
3
tutorials/Examples.md
Normal file
3
tutorials/Examples.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# JS API
|
||||||
|
|
||||||
|
A list of examples illustrating the API is available at this [link](https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/)
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
# User guide
|
# Customization
|
||||||
|
|
||||||
This is a guide for users wanting to customize the apparence of Aladin Lite user interface.
|
This is a guide for users wanting to customize the apparence of Aladin Lite user interface.
|
||||||
|
|
||||||
Reference in New Issue
Block a user