test: unbind the layer shaders

The setAnimationLoop is replaced by call to requestAnimationFrame on the xrSession.

.github/workflows/npm-publish.yml

@@ -0,0 +1,35 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish to NPM
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - name: "Install the rust compiler"
+        run: |
+          curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+          source "$HOME/.cargo/env"
+      - name: "Install wasm-pack"
+        run: |
+          curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
+      - name: "Install dependencies"
+        run: |
+          npm install
+      - name: "Build Aladin Lite"
+        run: |
+          npm run build
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/test.yml

@@ -0,0 +1,37 @@
+name: Run tests
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - develop
+  # Allows to run this workflow manually from the Actions tab
+  workflow_dispatch:
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout branch ${{ github.head_ref }}"
+        uses: actions/checkout@v3
+      - name: "Setup node"
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: "Install the rust compiler"
+        run: |
+          curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+          source "$HOME/.cargo/env"
+      - name: "Install wasm-pack"
+        run: |
+          curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
+      - name: "Install dependencies"
+        run: |
+          npm install
+      - name: "Build Aladin Lite"
+        run: |
+          npm run build
+      - name: "Run some tests"
+        run: |
+          npm run test:build
+          npm run test:unit

.gitignore

@@ -8,4 +8,9 @@ package-lock.json
 src/core/target/
 src/core/Cargo.lock
 
-AladinLiteAssets.tar.gz
+aladin-lite*.tgz
+
+.vscode
+
+deploy.sh
+deploy-beta.sh

README.md

@@ -6,7 +6,7 @@ Aladin Lite is a Web application which enables HiPS visualization from the brows
 
 See [A&A 578, A114 (2015)](https://arxiv.org/abs/1505.02291) and [IVOA HiPS Recommendation](http://ivoa.net/documents/HiPS/index.html) for more details about the HiPS standard.
 
-Aladin Lite is built to be easily embeddable in any web page. It powers astronomical portals like [ESASky](https://almascience.eso.org/asax/), [ESO Science Archive portal](http://archive.eso.org/scienceportal/) and [ALMA Portal](https://almascience.eso.org/asax/).
+Aladin Lite is built to be easily embeddable in any web page. It powers astronomical portals like [ESASky](https://sky.esa.int/), [ESO Science Archive portal](http://archive.eso.org/scienceportal/) and [ALMA Portal](https://almascience.eso.org/asax/).
 
 More details on [Aladin Lite documentation page](http://aladin.u-strasbg.fr/AladinLite/doc/).
 
@@ -14,7 +14,13 @@ More details on [Aladin Lite documentation page](http://aladin.u-strasbg.fr/Alad
 
 Aladin Lite v3 is out! Please play with [Aladin Lite v3 at this link](https://aladin.u-strasbg.fr/AladinLite).
 
-If you want to embed it into your webpage, please include [the javascript script of Aladin Lite v3](https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js) into your project. API differences from the v2 are minimal, here is a snippet of code you can use to embed it into your webpages:
+## Embed it into your projects
+
+You can embed Aladin Lite it into your webpages in two ways
+
+### The vanilla way
+
+Please include [the javascript script of Aladin Lite v3](https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js) into your project. API differences from the v2 are minimal, here is a snippet of code you can use to embed it into your webpages:
 
 ```js
 <!doctype html>
@@ -39,6 +45,37 @@ If you want to embed it into your webpage, please include [the javascript script
 </html>
 ```
 
+### Using the aladin lite NPM package
+
+First, install it with npm:
+
+```npm i aladin-lite```
+
+Second, you can use it that way:
+
+```js
+<!doctype html>
+<html>
+<head>
+    <!-- Mandatory when setting up Aladin Lite v3 for a smartphones/tablet usage -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from 'aladin-lite';
+
+    A.init.then(() => {
+        let aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
+    });
+</script>
+
+</body>
+</html>
+```
+
 ## Goals of v3
 
 - Rust/WebGL new core integration
@@ -62,7 +99,6 @@ If you want to embed it into your webpage, please include [the javascript script
 ## Source code
 
 Source code is available in the ``src`` directory.
-Precisely, the core is implemented in Rust and can be found in ``src/core``.
 
 ## Licence
 
@@ -93,7 +129,7 @@ npm install
 After that you are supposed to have the Rust toolchain installed
 to compile the core project into WebAssembly.
 Follow the steps from the Rust official website [here](https://www.rust-lang.org/learn/get-started)
-
+You will also need [wasm-pack](https://rustwasm.github.io/wasm-pack/), a tool helping compiling rust into a proper .wasm file.
 
 Once it's installed you can only build the project:
 ```bash
@@ -116,7 +152,7 @@ and run the tests
 
 ```bash
 cd src/core
-cargo test
+cargo test --features webgl2
 ```
 
 To generate the Rust backend API documentation

assets/target.svg

@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.4163427mm"
+   height="5.4163427mm"
+   viewBox="0 0 5.4163429 5.4163429"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   inkscape:export-filename="target.png"
+   inkscape:export-xdpi="500"
+   inkscape:export-ydpi="500"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="target.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="20.70196"
+     inkscape:cx="3.7919116"
+     inkscape:cy="9.8541396"
+     inkscape:window-width="2560"
+     inkscape:window-height="1367"
+     inkscape:window-x="2560"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs2"><inkscape:path-effect
+       effect="powerclip"
+       id="path-effect4310"
+       is_visible="true"
+       lpeversion="1"
+       inverse="true"
+       flatten="false"
+       hide_clip="false"
+       message="Utilise la règle de remplissage « fill-rule: evenodd » de la boîte de dialogue &lt;b&gt;Fond et contour&lt;/b&gt; en l'absence de résultat de mise à plat après une conversion en chemin." /><inkscape:path-effect
+       effect="powerclip"
+       id="path-effect4302"
+       is_visible="true"
+       lpeversion="1"
+       inverse="true"
+       flatten="false"
+       hide_clip="false"
+       message="Utilise la règle de remplissage « fill-rule: evenodd » de la boîte de dialogue &lt;b&gt;Fond et contour&lt;/b&gt; en l'absence de résultat de mise à plat après une conversion en chemin." /></defs><g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-140.08642,-154.46187)"><circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.33835;stroke-dasharray:none;stroke-opacity:1"
+       id="path2746"
+       cx="142.79459"
+       cy="157.17004"
+       r="2.0865982" /><circle
+       style="display:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.164818;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4300"
+       cx="142.79459"
+       cy="157.17004"
+       r="0.50933534" /><circle
+       style="display:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.164818;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4308"
+       cx="142.79459"
+       cy="157.17004"
+       r="0.50933534" /><circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.3084;stroke-dasharray:none;stroke-opacity:1"
+       id="path4262"
+       cx="142.79459"
+       cy="157.17004"
+       r="0.95304745" /><path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.365001;stroke-dasharray:none;stroke-opacity:1"
+       d="m 143.43355,154.60018 v 2.66686"
+       id="path308"
+       clip-path="none"
+       transform="matrix(0.84492788,0,0,0.84492788,21.603582,23.835872)"
+       sodipodi:nodetypes="cc" /><path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.3084;stroke-dasharray:none;stroke-opacity:1"
+       d="m 145.50276,157.17004 h -2.2533"
+       id="path406"
+       clip-path="none"
+       sodipodi:nodetypes="cc" /><path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.3084;stroke-dasharray:none;stroke-opacity:1"
+       d="m 142.33972,157.17004 h -2.2533"
+       id="path408"
+       clip-path="none"
+       sodipodi:nodetypes="cc" /><path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.3084;stroke-dasharray:none;stroke-opacity:1"
+       d="m 142.79459,157.62491 v 2.2533"
+       id="path410"
+       clip-path="none"
+       sodipodi:nodetypes="cc" /></g></svg>

deploy-dbg.sh

@@ -1,12 +0,0 @@
-USER_ALADIN="matthieu.baumann"
-DATEUPLOAD="$(date '+%Y-%m-%d')"
-
-ssh $USER_ALADIN@aladin 'sg hips -c "mkdir -p $HOME/al-tmp && rm -rf $HOME/al-tmp/*"'
-# Copy the dist files
-scp dist/* $USER_ALADIN@aladin:~/al-tmp
-
-ssh $USER_ALADIN@aladin 'sg hips -c "rm -rf /home/thomas.boch/AladinLite/www/api/v3/21-02-2023d && 
-mkdir -p /home/thomas.boch/AladinLite/www/api/v3/21-02-2023d && 
-cp $HOME/al-tmp/* /home/thomas.boch/AladinLite/www/api/v3/21-02-2023d && 
-rm -rf /home/thomas.boch/AladinLite/www/api/v3/beta && 
-ln -s /home/thomas.boch/AladinLite/www/api/v3/21-02-2023d /home/thomas.boch/AladinLite/www/api/v3/beta"'

deploy.sh

@@ -1,11 +0,0 @@
-USER_ALADIN="matthieu.baumann"
-DATEUPLOAD="$(date '+%Y-%m-%d')"
-
-ssh $USER_ALADIN@aladin 'sg hips -c "mkdir -p $HOME/al-tmp && rm -rf $HOME/al-tmp/*"'
-scp dist/* $USER_ALADIN@aladin:~/al-tmp
-
-ssh $USER_ALADIN@aladin 'sg hips -c "rm -rf /home/thomas.boch/AladinLite/www/api/v3/22-12-2022 && 
-mkdir -p /home/thomas.boch/AladinLite/www/api/v3/22-12-2022 && 
-cp $HOME/al-tmp/* /home/thomas.boch/AladinLite/www/api/v3/22-12-2022 && 
-rm -rf /home/thomas.boch/AladinLite/www/api/v3/latest && 
-ln -s /home/thomas.boch/AladinLite/www/api/v3/22-12-2022 /home/thomas.boch/AladinLite/www/api/v3/latest"'

examples/al-aas225.html

@@ -4,10 +4,8 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', { fov:0.15, target: 'Arp 240', showReticle: false, fullScreen: true });

examples/al-adass2022.html

@@ -6,10 +6,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {survey: ["P/PanSTARRS/DR1/color-i-r-g"], showReticle: false, gridOptions: {opacity: 0.5}, projection: "AIT", cooFrame: 'galactic', target: "93.2721132 -20.9942421", fov: 1000, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGrid: false, showCooGridControl: false});

examples/al-additive-blend.html

@@ -4,10 +4,8 @@
 </head>
 <body>
     <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
 A.init.then(() => {
     let aladin = A.aladin('#aladin-lite-div', {projection: "TAN", survey: "P/HSC/DR2/deep/g", target: '02 21 36.529 -05 31 20.16', fov: 0.1});
 

examples/al-animation-CS-CDS-2022.html

@@ -16,10 +16,8 @@
     </div>
 </div>
 
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-<!-- <script type="text/javascript" src="https://aladin.u-strasbg.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script> -->
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', fov: 400, fullScreen: true, showCooGrid: false, showReticle: false})

examples/al-animation.html

@@ -7,10 +7,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {survey: "P/SPITZER/color", cooFrame: 'galactic', fov: 5});

examples/al-artifact.html

@@ -6,10 +6,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         var aladin = A.aladin(

examples/al-badbaselayer.html

@@ -4,10 +4,8 @@
 </head>
 <body>
     <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+    <script type="module">
+        import A from '../src/js/A.js';
 A.init.then(() => {
     let aladin = A.aladin('#aladin-lite-div', {fov: 70,projection: "AIT"});
     let hsc = aladin.newImageSurvey("P/HSC/DR2/deep/g", {colormap:"Purples", imgFormat: "fits"});

examples/al-big-circle.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';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 1', fov: 0.2, showContextMenu: true, fullScreen: true});
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
+        aladin.addOverlay(overlay);
+        overlay.add(A.circle(83.66067, 22.03081, 40.0, {color: 'cyan'})); // radius in degrees
+
+        aladin.on("footprintClicked", (footprint) => {
+            console.log("footprint clicked catched", footprint)
+        })
+        aladin.on("objectClicked", (object) => {
+            console.log("object clicked catched", object)
+        })
+        aladin.on("footprintHovered", (footprint) => {
+            console.log("footprint hovered catched", footprint)
+        })
+        aladin.on("objectHoveredStop", (object) => {
+            console.log("Object hovered stopped", object)
+        })
+    });
+</script>
+</body>
+</html>

examples/al-cat-custom-draw-function.html

@@ -7,10 +7,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite

examples/al-cat-custom-shape.html

@@ -7,10 +7,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M50', fov: 0.3});

examples/al-cat-read-only.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<head>
+<!--<link rel="stylesheet" href="./layers.css" />-->
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M50', fov: 0.7});
+
+        var cat1 = A.catalog({readOnly: true});
+        aladin.addCatalog(cat1);
+        cat1.addSources(A.source(105.69239256, -8.45235969));
+        cat1.addSources(A.source(105.70779763, -8.31350997));
+        cat1.addSources(A.source(105.74242906, -8.34776709));
+
+        var cat2 = A.catalog({readOnly: false});
+        aladin.addCatalog(cat2);
+        cat2.addSources(A.source(105.79239256, -8.45235969));
+        cat2.addSources(A.source(105.90779763, -8.31350997));
+        cat2.addSources(A.source(105.54242906, -8.34776709));
+    });
+</script>
+
+</body>
+</html>

examples/al-catalog-filter.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+Show sources with proper motion greater than:
+<input id='slider' style='vertical-align:middle;width:60vw;' step='1' min='0' max='10' type='range' value='0'>
+<span id='pmVal'  >0 mas/yr</span><br><br><div id='aladin-lite-div' style='width: 500px;height: 500px;'></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        var pmThreshold = 0;
+
+        var slider = document.getElementById('slider');
+        slider.oninput = function() {
+            pmThreshold = this.value;
+            $('#pmVal').html(pmThreshold + ' mas/yr');
+            cat.reportChange();
+        }
+
+        var myFilterFunction = function(source) {
+            var hpmag  = parseFloat(source.data['Hpmag']);
+            if (isNaN(hpmag)) {
+                return false;
+            }
+            return hpmag>pmThreshold;
+        }
+
+        aladin = A.aladin('#aladin-lite-div', {target: 'M 45', fov: 5});
+        var cat = A.catalogFromVizieR('I/311/hip2', 'M 45', 5, {onClick: 'showTable', filter: myFilterFunction});
+        aladin.addCatalog(cat);
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-catalog-hips-filter.html

@@ -12,10 +12,8 @@ Show sources with proper motion greater than:
 <input id='slider' style='vertical-align:middle;width:60vw;' step='1' min='0' max='500' type='range' value='0'>
 <span id='pmVal'  >0 mas/yr</span><br><br><div id='aladin-lite-div' style='width: 500px;height: 500px;'></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         var pmThreshold = 0;

examples/al-catalog-hips-shape.html

@@ -6,10 +6,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});

examples/al-catalog-hips.html

@@ -6,10 +6,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});

examples/al-cfht.html

@@ -6,10 +6,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+  import A from '../src/js/A.js';
   let aladin;
   A.init.then(() => {
       aladin = A.aladin('#aladin-lite-div', {survey: "P/PanSTARRS/DR1/color-z-zg-g", fov:1.5, target: "NGC 7318B"});

examples/al-chinavo.html

@@ -6,10 +6,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+  import A from '../src/js/A.js';
   let aladin;
   A.init.then(() => {
       // Start up Aladin Lite

examples/al-coronelli.html

@@ -14,14 +14,16 @@
         <!--link rel="stylesheet" href="css/grids-responsive-min.css"-->
         <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/buttons.css">
         <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/buttons-core.css">
-    
+
         <!--meta name="viewport" content="initial-scale=1.0, user-scalable=no"-->
         <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     </head>
 <body>
 
 <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
+<script type="text/javascript">
+    let aladin;
+</script>
 <div id="aladin-lite-div" style="width:100vw;height:100vh;">
     <div id="calibCircle" style="display: none;"></div>
     <div id="explain" class="aladin-box"></div>
@@ -79,15 +81,15 @@
 	<div id="coo_epoca">
             <a class="pure-button nav-button nav-goto" href="#">De Epoca</a><br>
             &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
-	</div>	
+	</div>
 	<div id="coo_legende">
             <a class="pure-button nav-button nav-goto" href="#">Légende</a><br>
             &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
-	</div>	
+	</div>
 	<div id="coo_orion">
             <a class="pure-button nav-button nav-goto" href="#">Orion</a><br>
             &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
-	</div>	
+	</div>
 	<div id="coo_magellan">
             <a class="pure-button nav-button nav-goto" href="#">Magellan</a><br>
             &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
@@ -95,7 +97,7 @@
 	<div id="coo_halley">
             <a class="pure-button nav-button nav-goto" href="#">Halley</a><br>
             &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
-	</div>	
+	</div>
 </div>
 
 <style type="text/css"> .aladin-reticleColor { color: rgb(178, 50, 178); font-weight:bold;} </style>
@@ -104,27 +106,27 @@
     html, body {
         height: 100%;
     }
-    
+
     body {
         display: flex;
         flex-direction: column;
     }
-    
+
     .aladin-zoomControl {
         top: 10% !important;
         left: unset !important;
         right: 4px !important;
     }
-    
+
     .aladin-zoomControl a {
         font-size: 24px !important;
         padding: 22px !important;
     }
-    
+
     #aladin{
         flex: 1 1 0;
     }
-    
+
     #explain {
         padding: 4px;
         top: 30%;
@@ -132,51 +134,51 @@
         font-size: 11pt;
         overflow: scroll;
     }
-    
+
     #explain tbody tr:nth-child(even) {
         background-color: #ffffff;
     }
-    
+
     #explain tbody tr:nth-child(odd) {
         background-color: #ccdaeb;
     }
-    
+
     #layersControlLeft {
         padding: 10px;
         right: unset;
         left: 4px;
         top: 20vh;
     }
-    
+
     #layersCL2 {
         padding: 10px;
         right: unset;
         left: 4px;
         top: 90vh;
     }
-    
+
     #layersControlRight {
         padding: 4px;
         left: unset;
         right: 4px;
         top: 25vh;
     }
-    
+
     #layersControlLeft, #layersControlRight, #layersCL2 input {
         margin-right: 5px;
     }
-    
+
     .img-hips {
         padding: 5px;
         margin: 5px;
     }
-    
+
     #opacity-slider {
         -webkit-appearance: none !important;  /* Override default CSS styles */
         width: 220px;
         height: 25px;
     }
-    
+
     #opacity-slider::-webkit-slider-thumb {
       -webkit-appearance: none !important; /* Override default look */
       appearance: none;
@@ -185,18 +187,18 @@
       background: #4CAF50; /* Green background */
       cursor: pointer; /* Cursor on hover */
     }
-    
+
     #opacity-slider::-moz-range-thumb {
       width: 25px; /* Set a specific slider handle width */
       height: 25px; /* Slider handle height */
       background: #4CAF50; /* Green background */
       cursor: pointer; /* Cursor on hover */
     }
-    
+
     .aladin-box {
         font-size: 12px !important;
     }
-    
+
     #calibCircle {
         position: fixed;
         border: 8px solid red;
@@ -208,27 +210,25 @@
         z-index: 1000;
         pointer-events: none;
     }
-    
+
     .pure-table {
         font-size: small;
     }
-    
+
     .catcoro {
         display: inline;
         vertical-align: middle;
     }
-    
+
     .coro-star {
         vertical-align: middle;
     }
-    
-
 </style>
 
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+<script type="module">
+    import A from '../src/js/A.js';
+    import {Utils} from '../src/js/Utils';
 
-<script type="text/javascript">
-    let aladin;
     A.init.then(() => {
         var hipsDir="http://alasky.u-strasbg.fr/CDS_P_Coronelli";
         aladin = A.aladin("#aladin-lite-div", {showSimbadPointerControl: true, realFullscreen: true, fov: 100, allowFullZoomout: true, showReticle: false });
@@ -360,7 +360,7 @@
         });
 
         // listen to click on objects
-        aladin.on('objectClicked', function(source) {
+        aladin.on('objectClicked', function(source, xyMouseCoords) {
             var html = '<table class="pure-table">';
 
             if (curSelectedSource != null) {
@@ -497,7 +497,7 @@
                     deleteOverlayTimeout = undefined;
                 }
                 isDrawing = true;
-                points.push([drawOverlayCanvas.relMouseCoords(e)]);
+                points.push([Utils.relMouseCoords(drawOverlayCanvas.imageCanvas, e)]);
             });
 
 
@@ -506,10 +506,10 @@
             e.preventDefault();
 
                 drawOverlayCtx.clearRect(0, 0, drawOverlayCtx.canvas.width, drawOverlayCtx.canvas.height);
-                points[points.length-1].push(drawOverlayCanvas.relMouseCoords(e));
+                points[points.length-1].push(Utils.relMouseCoords(drawOverlayCanvas.imageCanvas, e));
 
                 drawOverlayCtx.beginPath();
-                
+
                 for (var k=0; k<points.length; k++) {
                     drawOverlayCtx.moveTo(points[k][0].x, points[k][0].y);
                     for (var i = 1; i < points[k].length; i++) {

examples/al-displayFITS.html

@@ -7,9 +7,8 @@
 
 <div id="aladin-lite-div" style="width:440px;height:300px"></div>
 
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {cooFrame: "icrs", fullScreen: true});

examples/al-displayJPG.html

@@ -16,11 +16,8 @@ Image Opacity: <br/> <input id="slider" type="range" value=1 min=0 max=1 step=0.
 <input id="DSS" type="radio" name="survey" value="P/DSS2/Color" checked><label for="DSS">Optical (DSS2)  <label>
 <input id="2MASS" type="radio" name="survey" value="P/2MASS/Color"><label for="2MASS">Infrared (2MASS)<label>
 
-<div id='aladin-statsDiv'></div>
-
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: "0 0", cooFrame: "gal"});

examples/al-distortion.html

@@ -6,9 +6,8 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         /*aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic'});

examples/al-easy-access-simbad-ned.html

@@ -6,14 +6,12 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+  import A from '../src/js/A.js';
   let aladin;
   A.init.then(() => {
       // Start up Aladin Lite
-      aladin = A.aladin('#aladin-lite-div', {target: 'M 82', fov: 0.25});
+      aladin = A.aladin('#aladin-lite-div', {target: 'M 82', fov: 0.25, showContextMenu: true});
 
       aladin.addCatalog(A.catalogFromSimbad('M 82', 0.1, {onClick: 'showTable'}));
       aladin.addCatalog(A.catalogFromNED('09 55 52.4 +69 40 47', 0.1, {onClick: 'showPopup', shape: 'plus'}));

examples/al-easy-access-vizier.html

@@ -5,14 +5,13 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
 
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: 'M 45', fov: 5});
+        aladin = A.aladin('#aladin-lite-div', {target: 'M 45', fov: 5, showContextMenu: true});
         const cat = A.catalogFromVizieR('I/311/hip2', 'M 45', 5, {onClick: 'showTable'});
         aladin.addCatalog(cat);
     });

examples/al-ellipse.html

@@ -6,14 +6,12 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite
-        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 31', fov: 0.2});
+        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 31', fov: 3});
         var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
         aladin.addOverlay(overlay);
         overlay.addFootprints([

examples/al-eso-catalogs.html

@@ -0,0 +1,23 @@
+<!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';
+    var vmc_cepheids = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=401&FORMAT=votable&QUERY=SELECT%20*%20from%20vmc_er4_yjks_cepheidCatMetaData_fits_V3%20where%20%20CONTAINS(POINT(%27%27,RA2000,DEC2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
+    var pessto = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=3&FORMAT=votable&QUERY=SELECT%20*%20from%20safcat.PESSTO_TRAN_CAT_V3%20where%20CONTAINS(POINT(%27%27,TRANSIENT_RAJ2000,TRANSIENT_DECJ2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
+
+    var aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'LMC', fov: 5});
+        aladin.addCatalog(A.catalogFromURL('https://vizier.u-strasbg.fr/viz-bin/votable?-source=HIP2&-c=LMC&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=9999&-c.rm=180', {sourceSize:12, color: '#f08080'}));
+        aladin.addCatalog(A.catalogFromURL(vmc_cepheids, {onClick: 'showTable', sourceSize:14, color: '#fff080'}));
+        aladin.addCatalog(A.catalogFromURL(pessto, {onClick: 'showPopup', sourceSize:14, color: '#00f080'}), undefined, true);
+    });
+</script>
+</body>
+</html>

examples/al-event-listeners.html

@@ -7,21 +7,20 @@
 <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
 <div id='infoDiv'>&nbsp; </div>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     A.init.then(() => {
         var aladin = A.aladin('#aladin-lite-div', {target: '05 37 58 +08 17 35', fov: 12, backgroundColor: 'rgb(120, 0, 0)'});
         var cat = A.catalog({sourceSize: 20});
         aladin.addCatalog(cat);
-        cat.addSources([A.source(83.784490, 09.934156, {name: 'Meissa'}), A.source(88.792939, 7.407064, {name: 'Betelgeuse'}), A.source(81.282764, 6.349703, {name: 'Bellatrix'})]);
+        cat.addSources([A.source(83.784490, 9.934156, {name: 'Meissa'}), A.source(88.792939, 7.407064, {name: 'Betelgeuse'}), A.source(81.282764, 6.349703, {name: 'Bellatrix'})]);
+        var msg;
 
         // define function triggered when  a source is hovered
-        aladin.on('objectHovered', function(object) {
-            var msg;
+        aladin.on('objectHovered', function(object, xyMouseCoords) {
             if (object) {
-                msg = 'You hovered object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec;
+                msg = 'You hovered object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
             }
             else {
                 msg = 'No object hovered';
@@ -29,21 +28,22 @@
             $('#infoDiv').html(msg);
         });
 
-        aladin.on('objectHoveredStop', function(object) {
+        aladin.on('objectHoveredStop', function(object, xyMouseCoords) {
             if (object) {
-                msg = 'You stopped hove object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec;
+                msg = 'You stopped hove object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
             }
             $('#infoDiv').html(msg);
         });
 
         // define function triggered when an object is clicked
         var objClicked;
-        aladin.on('objectClicked', function(object) {
-            var msg;
+        aladin.on('objectClicked', function(object, xyMouseCoords) {
             if (object) {
                 objClicked = object;
-            object.select();
-                msg = 'You clicked object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec;
+                object.select();
+                msg = 'You clicked object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
             }
             else {
                 objClicked.deselect();
@@ -54,4 +54,4 @@
     });
 </script>
 </body>
-</html>
+</html>

examples/al-fill-polygon.html

@@ -0,0 +1,26 @@
+
+<!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';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {fov: 122, showContextMenu: true, fullScreen: true});
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
+
+        aladin.addOverlay(overlay);
+        overlay.addFootprints([A.polygon(
+            [[264.375,-35.68533471265207], [258.75,-30.000000000000018], [264.375,-24.624318352164085], [270,-30.000000000000018]],
+            {color: '#808080', fillColor: '#808080', opacity: .4, lineWidth: 1, fill: true})]);
+
+        aladin.gotoRaDec(264.375,-24.624318352164085);
+    });
+</script>
+</body>
+</html>

examples/al-footprints.html

@@ -6,10 +6,8 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite
@@ -23,17 +21,17 @@
         ]);
         overlay.add(A.circle(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
 
-        aladin.on("footprintClicked", (footprint) => {
-            console.log("footprint clicked catched", footprint)
+        aladin.on("footprintClicked", (footprint, xyMouseCoords) => {
+            console.log("footprint clicked catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
-        aladin.on("objectClicked", (object) => {
-            console.log("object clicked catched", object)
+        aladin.on("objectClicked", (object, xyMouseCoords) => {
+            console.log("object clicked catched: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
-        aladin.on("footprintHovered", (footprint) => {
-            console.log("footprint hovered catched", footprint)
+        aladin.on("footprintHovered", (footprint, xyMouseCoords) => {
+            console.log("footprint hovered catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
-        aladin.on("objectHoveredStop", (object) => {
-            console.log("Object hovered stopped", object)
+        aladin.on("objectHoveredStop", (object, xyMouseCoords) => {
+            console.log("Object hovered stopped: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
 
         const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 100, {onClick: 'showTable', limit: 1000});

examples/al-gaiadr3.html

@@ -14,11 +14,11 @@
     <form class="pure-form pure-form-stacked">
         <fieldset>
           <label for="option-gdr3-flux-color-map" class="pure-radio">
-            <input id="option-gdr3-flux-color-map" type="radio" name="img-hips" value="CDS/P/DM/flux-color-Rp-G-Bp/I/350/gaiaedr3" checked>
+            <input id="option-gdr3-flux-color-map" type="radio" name="img-hips" value="CDS/P/DM/flux-color-Rp-G-Bp/I/350/gaiaedr3">
             Gaia DR3 flux map
           </label>
           <label for="option-gdr3-density-map" class="pure-radio">
-            <input id="option-gdr3-density-map" type="radio" name="img-hips" value="CDS/P/DM/I/350/gaiaedr3">
+            <input id="option-gdr3-density-map" type="radio" name="img-hips" value="CDS/P/DM/I/350/gaiaedr3" checked>
             Gaia DR3 density map
           </label>
           <label for="option-DSS-map" class="pure-radio">
@@ -36,8 +36,8 @@
   </body>
 
   <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-  <script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-  <script type="text/javascript">
+  <script type="module">
+    import A from '../src/js/A.js';
     $('#layersControl').show();
 
     var curSelectedSource = null;
@@ -50,7 +50,7 @@
         const fluxMap = aladin.createImageSurvey('gdr3-color-flux-map', 'Gaia DR3 flux map', 'https://alasky.u-strasbg.fr/ancillary/GaiaEDR3/color-Rp-G-Bp-flux-map', 'equatorial', 7);
         const densityMap = aladin.createImageSurvey('gdr3-density-map', 'Gaia DR3 density map', 'https://alasky.u-strasbg.fr/ancillary/GaiaEDR3/density-map', 'equatorial', 7, {imgFormat: 'fits'});
 
-        aladin.setImageSurvey(fluxMap);
+        aladin.setImageSurvey(densityMap);
 
         var hipsCats = {
             //'gdr3': A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/I/355/gaiadr3', { name: 'Gaia DR3 sources', shape: 'circle', sourceSize: 8, color: '#d66bae' }),
@@ -62,7 +62,7 @@
         aladin.addCatalog(hipsCats['simbad']);
         //aladin.addCatalog(hipsCats['gdr3']);
 
-        cmDensMapChanged = false;
+        //cmDensMapChanged = false;
         // listen changes on HiPS image background selection
         $('input[type=radio][name=img-hips]').change(function () {
             if (this.value == 'CDS/P/DM/I/350/gaiaedr3') {
@@ -88,7 +88,7 @@
         });
 
         // listen to click on objects
-        aladin.on('objectClicked', function (source) {
+        aladin.on('objectClicked', function (source, xyMouseCoords) {
             var html = '<table class="pure-table">';
 
             if (curSelectedSource != null) {
@@ -142,4 +142,4 @@
         });
     });
 </script>
-</html>
+</html>

examples/al-gotoobject.html

@@ -4,10 +4,8 @@
 </head>
 <body>
     <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {survey: "P/DSS2/color", fov:1, showCooGridControl:true});

examples/al-gw.html

@@ -4,18 +4,16 @@
 </head>
 <body>
     <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+ <script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {projection: "TAN", target: '15 16 57.636 -60 55 7.49', showCooGrid: true, fov: 90});
+        aladin = A.aladin('#aladin-lite-div', {projection: "TAN", target: '15 16 57.636 -60 55 7.49', showCooGrid: true, fov: 90, fullScreen: true});
         
-        var moc_0_99 = A.MOCFromURL("./gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.5, lineWidth: 1, adaptativeDisplay: true});
-        var moc_0_95 = A.MOCFromURL("./gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.5, lineWidth: 1, adaptativeDisplay: true});
-        var moc_0_5 = A.MOCFromURL("./gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 0.5, lineWidth: 1, adaptativeDisplay: false});
-        var moc_0_2 = A.MOCFromURL("./gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 0.5, lineWidth: 1, adaptativeDisplay: false});
+        var moc_0_99 = A.MOCFromURL("./gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.7, lineWidth: 5, perimeter: true});
+        var moc_0_95 = A.MOCFromURL("./gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.8, lineWidth: 5, perimeter: true});
+        var moc_0_5 = A.MOCFromURL("./gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 1.0, lineWidth: 5, perimeter: true});
+        var moc_0_2 = A.MOCFromURL("./gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 1.0, lineWidth: 5, perimeter: true});
 
         aladin.addMOC(moc_0_99);
         aladin.addMOC(moc_0_95);

examples/al-hips-from-url.html

@@ -6,10 +6,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {survey: 'http://alasky.cds.unistra.fr/ancillary/GaiaDR2/hips-density-map/', target: 'galactic center'});

examples/al-hips-local.html

@@ -6,17 +6,14 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<!-- Load a hips located at ./hips/gaia/ -->
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'galactic center'});
         
-        let hsc = aladin.createImageSurvey('hips gaia', "hips gaia name", "./hips/gaia/", undefined, undefined, {colormap:"viridis"});
-        aladin.setBaseImageLayer(hsc);
+        let survey = aladin.createImageSurvey('hips gaia', "hips gaia name", "./hips/gaia", undefined, undefined, {colormap:"viridis"});
+        aladin.setBaseImageLayer(survey);
     });
 </script>
 

examples/al-hips-order-list.html

@@ -6,10 +6,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {survey: 'http://alasky.cds.unistra.fr/ancillary/GaiaDR2/hips-density-map/', target: 'galactic center'});

examples/al-image-layer-by-name.html

@@ -6,10 +6,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'galactic center'});

examples/al-init-custom-options.html

@@ -6,10 +6,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         var aladin = A.aladin(

examples/al-jwst.html

@@ -6,10 +6,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin(

examples/al-load-votables-by-url.html

@@ -5,10 +5,8 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     A.init.then(() => {
         var aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'LMC', fov: 5});
         aladin.addCatalog(A.catalogFromURL('https://vizier.u-strasbg.fr/viz-bin/votable?-source=HIP2&-c=LMC&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=9999&-c.rm=180', {sourceSize:12, color: '#f08080'}));        

examples/al-marker-creation.html

@@ -5,10 +5,8 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     A.init.then(() => {
         let a = A.aladin('#aladin-lite-div', {target: '03 47 00.00 +24 07 00.0', survey: 'P/DSS2/color', zoom: 2, showReticle: false});
         var cat = A.catalog({name: 'Some markers', sourceSize: 18});

examples/al-mars-features.html

@@ -6,9 +6,8 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {fov: 180, fullScreen: true, cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: false, survey: 'CDS/P/Mars/THEMIS-Day-100m-v12'});

examples/al-mars.html

@@ -5,10 +5,8 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: '240 +10.65', cooFrame: 'j2000d', fov: 90, showFrame: false, showCooGrid: true, showLayersControl: false, showGotoControl: false, fullScreen: true, showContextMenu: true});

examples/al-moc-isophot.html

@@ -7,10 +7,8 @@
       <div id="ui" class="ui">
       </div>
     </div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/ISOPHOT/170'});

examples/al-moc-json.html

@@ -7,10 +7,8 @@
       <div id="ui" class="ui">
       </div>
     </div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55});
@@ -23,6 +21,9 @@
         "7":[131423,131439,131443,131523,131556,131557,131580,131581,132099,132612,132613,132624,132625,132627,132637,
         132680,132681,132683,132709,132720,132721,132904,132905,132948,132952,132964,132968,133008,133009,133012,135252,135256,135268,135316,135320,135332,135336,148143,148152,148154,149507,149520
         ,149522,149523,149652,149654,149660,149662,149684,149686,149692,149694,149695,150120,150122,150208,150210,150216,150218,150240,150242,150243,155748,155752,155796,155800,155812,155816]};
+        //var json = {"3":[517],
+        //"4":[2065, 2067]};        
+        
         var moc = A.MOCFromJSON(json, {opacity: 0.25, color: 'magenta', lineWidth: 1, adaptativeDisplay: false});
         aladin.addMOC(moc);
     });

examples/al-moc-sdss9.html

@@ -7,21 +7,19 @@
       <div id="ui" class="ui">
       </div>
     </div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/Mellinger/color'});
-        var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 1, opacity: 1.0}, (moc) => {
+        var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 3, opacity: 1.0}, (moc) => {
             // moc is ready
             console.log(moc.contains(205.9019247, +2.4492764));
             console.log(moc.contains(-205.9019247, +2.4492764));
 
         });
-        var moc10 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=11&fmt=fits', {color: '#aabbcc', opacity: 0.1, lineWidth: 1});
-        var moc9 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=4&fmt=fits', {color: '#00ff00', opacity: 0.5, lineWidth: 1});
+        var moc10 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=11&fmt=fits', {color: '#ffffff', perimeter: true, fillColor: '#aabbcc', opacity: 0.1, fill: true, lineWidth: 3});
+        var moc9 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=4&fmt=fits', {color: '#00ff00', opacity: 0.5, lineWidth: 3, perimeter: true});
 
         aladin.addMOC(moc11);
         aladin.addMOC(moc10);

examples/al-moc-sky-fraction.html

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+  import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M51', fov: 180, fullScreen: true});

examples/al-moment.html

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin(

examples/al-multi-catalog-table.html

@@ -5,11 +5,10 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
 
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'M 45', fov: 5, showContextMenu: true});

examples/al-multiple-instances.html

@@ -8,10 +8,8 @@
 <div id="al2" style="width: 500px; height: 500px">
 </div>
   
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+  import A from '../src/js/A.js';
   let al1;
   let al2;
   A.init.then(() => {

examples/al-multiple-surveys.html

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {fullScreen: true, survey: ['P/DM/vizMine', 'P/HST/GOODS/color', 'P/MATLAS/g'], target: '0 0', showCooGrid: true, fov: 180});

examples/al-no-cors.html

@@ -7,10 +7,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite

examples/al-not-found.html

@@ -7,10 +7,8 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite

examples/al-obscore.html

@@ -5,18 +5,18 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-
-<script type="text/javascript">
 
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: '14 18 16.868 +56 44 29.37', fov: 5, showContextMenu: true});
+        aladin = A.aladin('#aladin-lite-div', {target: '14 18 16.868 +56 44 29.37', fov: 360, projection: 'AIT', showContextMenu: true});
 
-        const c1 = A.catalogFromURL('https://raw.githubusercontent.com/bmatthieu3/SKA-Discovery-Service-Mockup/aladin/ObsCore/ObsCore_003.xml', {onClick: 'showTable'});
+        const c1 = A.catalogFromURL('https://raw.githubusercontent.com/VisIVOLab/SKA-Discovery-Service-Mockup/main/ObsCore/ObsCore_003.xml', {onClick: 'showTable'});
         aladin.addCatalog(c1);
+
+        const c2 = A.catalogFromVizieR('B/assocdata/obscore', '14 18 16.868 +56 44 29.37', 100, {onClick: 'showTable', limit: 1000});
+        aladin.addCatalog(c2);
     });
 </script>
 </body>

examples/al-onames-labels.html

@@ -4,10 +4,8 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M1', fov: 0.3});

examples/al-overlay-image-layer.html

@@ -4,10 +4,10 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
+
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', fov: 110, target: 'galactic center'});

examples/al-perseverence.html

@@ -6,10 +6,9 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+<script type="module">
+  import A from '../src/js/A.js';
 
-<script type="text/javascript">
   let aladin;
   A.init.then(() => {
         // Start up Aladin Lite

examples/al-polyline.html

@@ -5,10 +5,10 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
+
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'Gamma Cas', fov: 10});

examples/al-remove-source.html

@@ -5,10 +5,10 @@
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
 <div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 <div id='buttons'></div>
 
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     A.init.then(() => {
         var a = A.aladin('#aladin-lite-div', {target: '03 47 00.00 +24 07 00.0', survey: 'P/DSS2/color', zoom: 2, showReticle: false});
         var cat = A.catalog({color: 'red', onClick: 'showTable'});

examples/al-response-div.html

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'M81', fov: 1});

examples/al-reverse-longitude.html

@@ -4,10 +4,8 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite

examples/al-rightclick-fits.html

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'M81', fov: 1});

examples/al-sdc2.html

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin(

examples/al-set-colormap.html

@@ -6,9 +6,8 @@
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
 <div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', target: 'galactic center', survey: 'P/Finkbeiner'});

examples/al-simbad-density.html

@@ -4,9 +4,8 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite

examples/al-simbad-pointer.html

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite

examples/al-snippet.html

@@ -5,7 +5,7 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script>
+<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.umd.cjs" charset="utf-8"></script>
 
 <script type="text/javascript">
     let aladin;

examples/al-stcs-footprints.html

@@ -5,14 +5,13 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 
-<script type="text/javascript">
-    let aladin;
+<script type="module">
+    import A from '../src/js/A.js';
+
     A.init.then(() => {
         // Start up Aladin Lite
-        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'Sgr a*', fov: 0.5});
+        let aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'Sgr a*', fov: 0.5});
         // This table contains a s_region column containing stcs expressed regions
         // that are automatically parsed
         aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/alma-footprints.xml', {onClick: 'showTable'}));

examples/al-stephan-quintet.html

@@ -5,10 +5,9 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
+    
     let aladin;
     A.init.then(() => {
         aladin = A.aladin(

examples/al-vr.html

@@ -0,0 +1,113 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<script type="importmap">
+    {
+      "imports": {
+        "three": "https://unpkg.com/three@0.157.0/build/three.module.js",
+        "three/addons/": "https://unpkg.com/three@0.157.0/examples/jsm/"
+      }
+    }
+</script>
+<body>
+
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+    
+    <script type="module">
+        import A from '../src/js/A.js';
+        import * as THREE from 'three';
+
+        let aladin;
+        A.init.then(() => {
+            aladin = A.aladin(
+                '#aladin-lite-div',
+                {
+                    survey: 'P/DSS2/color', // set a survey
+                    projection: 'TAN', // set a projection
+                    fov: 70, // initial field of view in degrees
+                    target: '338.98958 33.96', // initial target
+                    cooFrame: 'equatorial', // set galactic frame
+                    showCooGrid: true, // set the grid
+                    fullScreen: true,
+                    vr: {animation: animate.bind(renderer)},
+                }
+            );
+
+            //aladin.setOverlayImageLayer("https://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam+MIRI")
+            initScene(aladin.view.imageCanvas);
+            aladin.setRenderer(renderer);
+        });
+
+        let renderer = null;
+        let scene = null;
+        let camera = null;
+        let cubeMesh = null;
+        // let controls = null;
+
+        /**
+         * Initializes a 3D scene, camera, and renderer for virtual reality (VR).
+         *
+         * @param {HTMLCanvasElement} canvas - The HTML canvas element to render the
+         * 3D scene
+         */
+        function initScene(canvas) {
+            scene = new THREE.Scene();
+
+            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
+            scene.add(camera);
+
+            renderer = new THREE.WebGLRenderer({canvas: canvas, context: canvas.getContext('webgl2', {xrCompatible: true})}); // NOTE Une différence ici
+            renderer.setPixelRatio(window.devicePixelRatio);
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.xr.enabled = true;
+            // renderer.xr.setReferenceSpaceType('local');
+            renderer.autoClear = false;
+
+            const light = new THREE.PointLight(0xffffff, 10);
+            light.position.set(0, 2, 1);
+            scene.add(light);
+
+            const planeGeometry = new THREE.PlaneGeometry(10, 10);
+            const planeMaterial = new THREE.MeshPhongMaterial({ color: 0xff00ff });
+            const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
+            planeMesh.position.set(0, -1, 0);
+            planeMesh.rotation.x = -Math.PI / 2;
+            scene.add(planeMesh);
+            
+            const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
+            const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
+            cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
+            cubeMesh.position.set(0, 0, -2);
+            scene.add(cubeMesh);
+        }
+        
+        /**
+         * Function to animate the 3D scene and rendering it.
+         */
+        function animate() {
+            cubeMesh.rotation.x += 0.001;
+            cubeMesh.rotation.y += 0.001;
+
+            renderer.render( scene, camera );
+        }
+
+        // /**
+        //  * Initializes a WebGL2 context and handles potential errors.
+        //  */
+        // function initWebGL2() {
+        //     // canvas = aladin.view.imageCanvas;
+        //     canvas = document.getElementById(aladin.view.imageCanvas);
+        //     // gl = canvas.getContext("webgl2", { alpha: true });
+        //     gl = canvas.getContext('webgl2');
+        //     if (!gl) { // If the gl didn't create properly
+        //         alert('This browser doesn\'t support WebGL2');
+        //         return;
+        //     }
+
+        // }
+
+    </script>
+
+</body>
+</html>

examples/al-zoom-meerkat.html

@@ -6,9 +6,10 @@
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
 <div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
+
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {survey: ["P/Mellinger"], cooFrame: 'galactic', fov: 1000, fullScreen: true, showCooGrid: true});

examples/al-zoomchanged.html

@@ -6,9 +6,9 @@
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
 
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+<script type="module">
+    import A from '../src/js/A.js';
 
-<script type="text/javascript">
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});

examples/index.html

@@ -5,33 +5,12 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 
+<script type="text/javascript" src="./../dist/aladin.umd.cjs" charset="utf-8"></script>
 <script type="text/javascript">
     var aladin;
-
     A.init.then(() => {
-        /*aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic'});
-        aladin.setProjection('MOL');
-
-        aladin.setBaseImageLayer("P/PanSTARRS/DR1/g", {
-            imgFormat: 'fits',
-            colormap: 'redtemperature',
-            stretch: 'Asinh'
-        });*/
-
-        /*aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic'});
-        aladin.setProjection('AIT');
-
-        aladin.setBaseImageLayer("P/PanSTARRS/DR1/g", {imgFormat: "fits"});
-        aladin.getBaseImageLayer().setColormap('redtemperature', {stretch: "Asinh"});*/
-
         aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", fullScreen: true, expandLayersControl: true, cooFrame: 'equatorial', showProjectionControl: true, showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: false, showContextMenu: true});
-        //aladin.setProjection('AIT');
-
-        //let survey = aladin.createImageSurvey("P/PanSTARRS/DR1/g", null, null, null, null, );
-        /*aladin.setBaseImageLayer("P/PanSTARRS/DR1/g");
-        aladin.getBaseImageLayer().setColormap('viridis', {stretch: "Asinh"});*/
 
         // manage URL parameters
         const searchParams = new URL(document.location).searchParams;
@@ -62,8 +41,6 @@
                 enabled: b
             });
         }
-
-
     });
 </script>
 

examples/index_es.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../dist/aladin.js';
+
+    A.init.then(() => {
+        let aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", fullScreen: true, expandLayersControl: true, cooFrame: 'equatorial', showProjectionControl: true, showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: false, showContextMenu: true});
+
+        // manage URL parameters
+        const searchParams = new URL(document.location).searchParams;
+        if (searchParams.has('baseImageLayer')) {
+            aladin.setBaseImageLayer(searchParams.get('baseImageLayer'));
+        }
+        if (searchParams.has('overlayImageLayer')) {
+            aladin.setOverlayImageLayer(searchParams.get('overlayImageLayer'));
+        }
+        if (searchParams.has('cooFrame')) {
+            aladin.setFrame(searchParams.get('cooFrame'));
+        }
+        if (searchParams.has('fov')) {
+            aladin.setFoV(parseFloat(searchParams.get('fov')));
+        }
+        if (searchParams.has('ra') && searchParams.has('dec')) {
+            aladin.gotoRaDec(parseFloat(searchParams.get('ra')), parseFloat(searchParams.get('dec')));
+        }
+        if (searchParams.has('showReticle')) {
+            aladin.showReticle(searchParams.get('showReticle')==='true');
+        }
+        if (searchParams.has('projection')) {
+            aladin.setProjection(searchParams.get('projection'));
+        }
+        if (searchParams.has('showCooGrid')) {
+            const b = searchParams.get('showCooGrid') === 'true';
+            aladin.view.setGridConfig({
+                enabled: b
+            });
+        }
+    });
+</script>
+
+</body>
+</html>

examples/index_umd.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="text/javascript" src="./../dist/aladin.umd.cjs" charset="utf-8"></script>
+
+<script type="text/javascript">
+    A.init.then(() => {
+        let aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", fullScreen: true, expandLayersControl: true, cooFrame: 'equatorial', showProjectionControl: true, showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: false, showContextMenu: true});
+
+        // manage URL parameters
+        const searchParams = new URL(document.location).searchParams;
+        if (searchParams.has('baseImageLayer')) {
+            aladin.setBaseImageLayer(searchParams.get('baseImageLayer'));
+        }
+        if (searchParams.has('overlayImageLayer')) {
+            aladin.setOverlayImageLayer(searchParams.get('overlayImageLayer'));
+        }
+        if (searchParams.has('cooFrame')) {
+            aladin.setFrame(searchParams.get('cooFrame'));
+        }
+        if (searchParams.has('fov')) {
+            aladin.setFoV(parseFloat(searchParams.get('fov')));
+        }
+        if (searchParams.has('ra') && searchParams.has('dec')) {
+            aladin.gotoRaDec(parseFloat(searchParams.get('ra')), parseFloat(searchParams.get('dec')));
+        }
+        if (searchParams.has('showReticle')) {
+            aladin.showReticle(searchParams.get('showReticle')==='true');
+        }
+        if (searchParams.has('projection')) {
+            aladin.setProjection(searchParams.get('projection'));
+        }
+        if (searchParams.has('showCooGrid')) {
+            const b = searchParams.get('showCooGrid') === 'true';
+            aladin.view.setGridConfig({
+                enabled: b
+            });
+        }
+    });
+</script>
+
+</body>
+</html>

examples/open_all.sh

@@ -1,5 +0,0 @@
-#!/bin/bash
-
-for filename in *.html; do
-    google-chrome http://localhost:8080/${filename}
-done

package.json

@@ -1,18 +1,29 @@
 {
   "homepage": "https://aladin.u-strasbg.fr/",
   "name": "aladin-lite",
-  "version": "3.1.0",
+  "type": "module",
+  "version": "3.2.1",
   "description": "An astronomical HiPS visualizer in the browser",
   "author": "Thomas Boch and Matthieu Baumann",
   "license": "GPL-3",
-  "main": "dist/aladin.js",
+  "module": "./dist/aladin.js",
+  "main": "./dist/aladin.js",
   "files": [
-    "dist/*"
+    "dist/aladin.js",
+    "dist/aladin.umd.cjs",
+    "dist/index.html"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/aladin.js",
+      "require": "./dist/aladin.umd.cjs"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/cds-astro/aladin-lite"
   },
+  "email": "cds-question@unistra.fr",
   "keywords": [
     "astronomy",
     "visualization",
@@ -21,32 +32,31 @@
     "HiPS"
   ],
   "scripts": {
-    "package-tar": "tar -zcvf AladinLiteAssets.tar.gz dist/*",
-    "predeploy": "npm run build && npm run package-tar",
-    "deploy": "./deploy-dbg.sh",
-    "build": "webpack && sed \"s/\\\\.\\\\/\\\\.\\\\.\\\\/aladin\\\\.js/https:\\\\/\\\\/aladin.cds.unistra.fr\\\\/AladinLite\\\\/api\\\\/v3\\\\/latest\\\\/aladin.js/g\" examples/index.html > dist/index.html",
-    "serve": "webpack-dev-server"
+    "wasm": "wasm-pack build ./src/core --target web --release --out-name core -- --features webgl2",
+    "predeploy": "npm run build && rm -rf aladin-lite.tgz && npm pack",
+    "deploy": "./deploy.sh",
+    "deploy:beta": "npm run predeploy && ./deploy-beta.sh",
+    "build": "npm run wasm && vite build && cp examples/index.html dist/index.html",
+    "dev": "npm run build && vite",
+    "serve": "npm run dev",
+    "preview": "vite preview",
+    "test:build": "cd src/core && cargo test --release --features webgl2",
+    "test:unit": "vitest run"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
-    "@wasm-tool/wasm-pack-plugin": "^1.6.0",
-    "babel-loader": "^8.2.5",
-    "npm": "^8.19.2",
-    "terser-webpack-plugin": "^5.3.3",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.9.0",
-    "webpack-dev-server": "^4.7.4",
-    "webpack-glsl-loader": "^1.0.1",
-    "webpack-glsl-minify": "^1.5.0"
+    "happy-dom": "^8.9.0",
+    "npm": "^9.8.1",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.8",
+    "vite-plugin-css-injected-by-js": "^3.1.1",
+    "vite-plugin-glsl": "^1.1.2",
+    "vite-plugin-top-level-await": "^1.3.1",
+    "vite-plugin-wasm": "^3.2.2",
+    "vite-plugin-wasm-pack": "^0.1.12",
+    "vitest": "^0.32.2"
   },
   "dependencies": {
     "autocompleter": "^6.1.3",
-    "babel-preset-es2015": "^6.24.1",
-    "css-loader": "^5.0.1",
-    "file-loader": "^6.1.0",
-    "jquery": "^3.6.1",
-    "style-loader": "^3.3.1",
-    "wasm-pack": "^0.10.3"
+    "jquery": "^3.6.1"
   }
 }

src/core/Cargo.toml

@@ -3,7 +3,7 @@ name = "aladin-lite"
 description = "Aladin Lite v3 introduces a new graphical engine written in Rust with the use of WebGL"
 license = "BSD-3-Clause"
 repository = "https://github.com/cds-astro/aladin-lite"
-version = "3.1.1"
+version = "3.2.0"
 authors = ["baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr"]
 edition = "2018"
 
@@ -18,19 +18,17 @@ members = [
 crate-type = ["cdylib"]
 
 [dependencies]
-getrandom = {version="0.2", features = ["js"]}
-rand = {version = "0.8.5", features = ["getrandom"]}
 futures = "0.3.12"
 js-sys = "0.3.47"
 wasm-bindgen-futures = "0.4.20"
 cgmath = "*"
-cdshealpix = "0.6.4"
-moclib = { package = "moc", version = "0.10.1" }
-serde = { version = "^1.0.59", features = ["derive"] }
-serde_json = "1.0"
-serde-wasm-bindgen = "0.4"
+healpix = { package = "cdshealpix", git = "https://github.com/bmatthieu3/cds-healpix-rust", branch = "polygonIntersectVertices" }
+#moclib = { package = "moc", git = "https://github.com/cds-astro/cds-moc-rust", branch = "main" }
+moclib = { package = "moc", git = "https://github.com/bmatthieu3/cds-moc-rust", branch = "cellsWithUnidirectionalNeigs" }
+serde = { version = "^1.0.183", features = ["derive"] }
+serde_json = "1.0.104"
+serde-wasm-bindgen = "0.5"
 console_error_panic_hook = "0.1.7"
-fitsrs = "0.2.7"
 enum_dispatch = "0.3.8"
 wasm-bindgen = "0.2.79"
 wasm-streams = "0.3.0"
@@ -39,10 +37,12 @@ al-core = { path = "./al-core" }
 al-task-exec = { path = "./al-task-exec" }
 al-api = { path = "./al-api" }
 mapproj = "0.3.0"
-wcs = "0.2.6"
+fitsrs = "0.2.9"
+wcs = "0.2.8"
 colorgrad = "0.6.2"
 image-decoder = { package = "image", version = "0.24.2", default-features = false, features = ["jpeg", "png"] }
-votable = "0.2.3"
+votable = { package = "votable", git = "https://github.com/cds-astro/cds-votable-rust", branch = "main"}
+lyon = "1.0.1"
 
 [features]
 webgl1 = [
@@ -119,7 +119,7 @@ codegen-units = 256
 rpath = false
 
 [profile.release]
-opt-level = 3
+opt-level = 'z'
 debug = false
 debug-assertions = false
 overflow-checks = false

src/core/al-api/src/color.rs

@@ -1,6 +1,6 @@
 use wasm_bindgen::prelude::*;
 
-#[wasm_bindgen(raw_module = "../src/js/Color")]
+#[wasm_bindgen(raw_module = "../../js/Color.js")]
 extern "C" {
     pub type Color;
 
@@ -8,10 +8,11 @@ extern "C" {
     pub fn hexToRgb(hex: String) -> JsValue;
     #[wasm_bindgen(static_method_of = Color)]
     pub fn hexToRgba(hex: String) -> JsValue;
+    #[wasm_bindgen(static_method_of = Color)]
+    pub fn rgbToHex(r: u8, g: u8, b: u8) -> String;
 }
 
-#[derive(Debug, Clone, Copy)]
-#[derive(Deserialize, Serialize)]
+#[derive(Debug, Clone, Copy, Deserialize, Serialize)]
 #[wasm_bindgen]
 pub struct ColorRGB {
     pub r: f32,
@@ -20,8 +21,7 @@ pub struct ColorRGB {
 }
 
 use serde::{Deserialize, Serialize};
-#[derive(Debug, Clone, Copy)]
-#[derive(Deserialize, Serialize)]
+#[derive(Debug, Clone, Copy, Deserialize, Serialize)]
 #[serde(rename_all = "camelCase")]
 #[wasm_bindgen]
 pub struct ColorRGBA {
@@ -45,7 +45,6 @@ impl<'a> Mul<f32> for &'a ColorRGB {
     }
 }
 
-
 /*
 #[wasm_bindgen]
 impl Color {
@@ -96,4 +95,4 @@ impl TryFrom<JsValue> for ColorRGBA {
 
         Ok(c)
     }
-}
+}

src/core/al-api/src/coo_system.rs

@@ -106,7 +106,7 @@ pub const NUM_COOSYSTEM: usize = 2;
 
 impl CooSystem {
     #[inline]
-    pub fn to<S>(&self, coo_system: &Self) -> &Matrix4<S>
+    pub fn to<S>(&self, coo_system: Self) -> &Matrix4<S>
     where
         S: BaseFloat + CooBaseFloat,
     {

src/core/al-api/src/grid.rs

@@ -12,6 +12,8 @@ use super::color::ColorRGB;
 pub struct GridCfg {
     #[serde(default = "default_color")]
     pub color: Option<ColorRGB>,
+    #[serde(default = "default_thickness")]
+    pub thickness: Option<f32>,
     pub opacity: Option<f32>,
     #[serde(default = "default_labels")]
     pub show_labels: Option<bool>,
@@ -39,6 +41,10 @@ fn default_label_size() -> Option<f32> {
     None
 }
 
+fn default_thickness() -> Option<f32> {
+    None
+}
+
 fn default_fmt() -> Option<AngleSerializeFmt> {
     None
 }

src/core/al-api/src/hips.rs

@@ -47,6 +47,7 @@ pub struct HiPSProperties {
     tile_size: i32,
     formats: Vec<ImageExt>,
     dataproduct_subtype: Option<Vec<String>>,
+
     is_planetary_body: Option<bool>,
 
     bitpix: Option<i32>,
@@ -63,62 +64,62 @@ pub struct HiPSProperties {
 }
 
 impl HiPSProperties {
-    #[inline]
+    #[inline(always)]
     pub fn get_url(&self) -> &str {
         &self.url
     }
 
-    #[inline]
+    #[inline(always)]
     pub fn get_max_order(&self) -> u8 {
         self.max_order
     }
 
-    #[inline]
+    #[inline(always)]
     pub fn get_min_order(&self) -> Option<u8> {
         self.min_order
     }
 
-    #[inline]
+    #[inline(always)]
     pub fn get_bitpix(&self) -> Option<i32> {
         self.bitpix
     }
 
-    #[inline]
+    #[inline(always)]
     pub fn get_formats(&self) -> &[ImageExt] {
         &self.formats[..]
     }
 
-    #[inline]
+    #[inline(always)]
     pub fn get_tile_size(&self) -> i32 {
         self.tile_size
     }
 
-    #[inline]
+    #[inline(always)]
     pub fn get_frame(&self) -> CooSystem {
         self.frame
     }
 
-    #[inline]
+    #[inline(always)]
     pub fn get_sky_fraction(&self) -> Option<f32> {
         self.sky_fraction
     }
 
-    #[inline]
+    #[inline(always)]
     pub fn get_initial_fov(&self) -> Option<f64> {
         self.hips_initial_fov
     }
 
-    #[inline]
+    #[inline(always)]
     pub fn get_initial_ra(&self) -> Option<f64> {
         self.hips_initial_ra
     }
 
-    #[inline]
+    #[inline(always)]
     pub fn get_initial_dec(&self) -> Option<f64> {
         self.hips_initial_dec
     }
 
-    #[inline]
+    #[inline(always)]
     pub fn get_dataproduct_subtype(&self) -> &Option<Vec<String>> {
         &self.dataproduct_subtype
     }
@@ -131,7 +132,7 @@ pub enum ImageExt {
     Fits,
     Jpeg,
     Png,
-    Webp
+    Webp,
 }
 
 impl std::fmt::Display for ImageExt {
@@ -140,7 +141,7 @@ impl std::fmt::Display for ImageExt {
             ImageExt::Fits => write!(f, "fits"),
             ImageExt::Png => write!(f, "png"),
             ImageExt::Jpeg => write!(f, "jpg"),
-            ImageExt::Webp => write!(f, "webp")
+            ImageExt::Webp => write!(f, "webp"),
         }
     }
 }
@@ -192,7 +193,7 @@ use crate::colormap::CmapLabel;
 pub struct HiPSColor {
     // transfer function called before evaluating the colormap
     pub stretch: TransferFunction,
-    // low cut 
+    // low cut
     pub min_cut: Option<f32>,
     // high cut
     pub max_cut: Option<f32>,

src/core/al-api/src/moc.rs

@@ -1,76 +1,90 @@
 use wasm_bindgen::prelude::wasm_bindgen;
 
-use super::color::{Color, ColorRGB};
+use super::color::{Color, ColorRGBA};
 
 #[derive(Clone, Debug)]
 #[wasm_bindgen]
 pub struct MOC {
     uuid: String,
-    opacity: f32,
-    line_width: f32,
-    is_showing: bool,
-    color: ColorRGB,
-    adaptative_display: bool,
+    pub line_width: f32,
+    pub perimeter: bool,
+    pub filled: bool,
+    pub edges: bool,
+    pub show: bool,
+
+    pub color: ColorRGBA,
+    pub fill_color: ColorRGBA,
 }
+use crate::{color::ColorRGB, Abort};
 use std::convert::TryInto;
-use crate::Abort;
 #[wasm_bindgen]
 impl MOC {
     #[wasm_bindgen(constructor)]
-    pub fn new(uuid: String, opacity: f32, line_width: f32, is_showing: bool, hex_color: String, adaptative_display: bool) -> Self {
-        let color = Color::hexToRgb(hex_color);
-        let color = color.try_into().unwrap_abort();
+    pub fn new(
+        uuid: String,
+        opacity: f32,
+        line_width: f32,
+        perimeter: bool,
+        filled: bool,
+        edges: bool,
+        show: bool,
+        hex_color: String,
+        fill_color: String,
+    ) -> Self {
+        let parse_color = |color_hex_str: String, opacity: f32| -> ColorRGBA {
+            let rgb = Color::hexToRgb(color_hex_str);
+            let rgb: ColorRGB = rgb.try_into().unwrap_abort();
+            ColorRGBA {
+                r: rgb.r,
+                g: rgb.g,
+                b: rgb.b,
+                a: opacity,
+            }
+        };
+
+        let color = parse_color(hex_color, 1.0);
+        let fill_color = parse_color(fill_color, opacity);
+
         Self {
             uuid,
-            opacity,
             line_width,
+            perimeter,
+            filled,
+            fill_color,
+            edges,
             color,
-            is_showing,
-            adaptative_display
+            show,
         }
     }
-
-    #[wasm_bindgen(setter)]
-    pub fn set_is_showing(&mut self, is_showing: bool) {
-        self.is_showing = is_showing;
-    }
 }
 
 impl MOC {
     pub fn get_uuid(&self) -> &String {
         &self.uuid
     }
-
-    pub fn get_color(&self) -> &ColorRGB {
-        &self.color
-    }
-
-    pub fn get_opacity(&self) -> f32 {
-        self.opacity
-    }
-    
-    pub fn get_line_width(&self) -> f32 {
-        self.line_width
-    }
-
-    pub fn is_showing(&self) -> bool {
-        self.is_showing
-    }
-
-    pub fn is_adaptative_display(&self) -> bool {
-        self.adaptative_display
-    }
 }
 
 impl Default for MOC {
     fn default() -> Self {
         Self {
             uuid: String::from("moc"),
-            opacity: 1.0,
             line_width: 1.0,
-            is_showing: true,
-            color: ColorRGB {r: 1.0, g: 0.0, b: 0.0},
-            adaptative_display: true,
+            perimeter: false,
+            edges: true,
+            filled: false,
+            show: true,
+            color: ColorRGBA {
+                r: 1.0,
+                g: 0.0,
+                b: 0.0,
+                a: 1.0,
+            },
+            fill_color: ColorRGBA {
+                r: 1.0,
+                g: 0.0,
+                b: 0.0,
+                a: 1.0,
+            },
         }
     }
-}
+}

src/core/al-core/src/image/mod.rs

@@ -1,8 +1,8 @@
 pub mod bitmap;
+pub mod canvas;
 pub mod fits;
 pub mod format;
 pub mod html;
-pub mod canvas;
 pub mod raw;
 
 pub trait ArrayBuffer: AsRef<js_sys::Object> + std::fmt::Debug {
@@ -179,10 +179,10 @@ impl ArrayBuffer for ArrayF64 {
     }
 }
 
-use self::html::HTMLImage;
 use self::canvas::Canvas;
-use wasm_bindgen::JsValue;
+use self::html::HTMLImage;
 use super::Texture2DArray;
+use wasm_bindgen::JsValue;
 pub trait Image {
     fn tex_sub_image_3d(
         &self,
@@ -211,7 +211,7 @@ where
     }
 }
 
-use std::{rc::Rc, io::Cursor};
+use std::{io::Cursor, rc::Rc};
 impl<I> Image for Rc<I>
 where
     I: Image,
@@ -252,7 +252,7 @@ where
 }
 
 #[cfg(feature = "webgl2")]
-use crate::image::format::{R16I, R32I, R8UI, R64F};
+use crate::image::format::{R16I, R32I, R64F, R8UI};
 use crate::image::format::{R32F, RGB8U, RGBA8U};
 
 use bitmap::Bitmap;
@@ -298,16 +298,17 @@ impl Image for ImageType {
         offset: &Vector3<i32>,
     ) -> Result<(), JsValue> {
         match self {
-            ImageType::FitsImage { raw_bytes: raw_bytes_buf } => {
+            ImageType::FitsImage {
+                raw_bytes: raw_bytes_buf,
+            } => {
                 let num_bytes = raw_bytes_buf.length() as usize;
-                let mut raw_bytes = Vec::with_capacity(num_bytes);
-                unsafe { raw_bytes.set_len(num_bytes); }
+                let mut raw_bytes = vec![0; num_bytes];
                 raw_bytes_buf.copy_to(&mut raw_bytes[..]);
 
                 let mut bytes_reader = Cursor::new(raw_bytes.as_slice());
                 let fits_img = Fits::from_byte_slice(&mut bytes_reader)?;
                 fits_img.tex_sub_image_3d(textures, offset)?
-            },
+            }
             ImageType::Canvas { canvas } => canvas.tex_sub_image_3d(textures, offset)?,
             ImageType::ImageRgba8u { image } => image.tex_sub_image_3d(textures, offset)?,
             ImageType::ImageRgb8u { image } => image.tex_sub_image_3d(textures, offset)?,
@@ -323,4 +324,4 @@ impl Image for ImageType {
 
         Ok(())
     }
-}
+}

src/core/al-core/src/lib.rs

@@ -4,8 +4,6 @@ extern crate serde_json;
 extern crate futures;
 extern crate wasm_streams;
 
-pub mod text;
-
 pub mod image;
 mod object;
 pub mod shader;
@@ -14,6 +12,7 @@ pub mod webgl_ctx;
 #[macro_use]
 pub mod log;
 pub use log::log;
+
 pub mod colormap;
 pub use colormap::{Colormap, Colormaps};
 

src/core/al-core/src/object/vertex_array_object.rs

@@ -9,8 +9,8 @@ pub mod vao {
     use crate::object::element_array_buffer::ElementArrayBuffer;
 
     use crate::webgl_ctx::WebGlContext;
-    use std::collections::HashMap;
     use crate::Abort;
+    use std::collections::HashMap;
 
     pub struct VertexArrayObject {
         array_buffer: HashMap<&'static str, ArrayBuffer>,
@@ -88,7 +88,10 @@ pub mod vao {
         }*/
 
         pub fn num_elements(&self) -> usize {
-            self.element_array_buffer.as_ref().unwrap_abort().num_elements()
+            self.element_array_buffer
+                .as_ref()
+                .unwrap_abort()
+                .num_elements()
         }
 
         pub fn num_instances(&self) -> i32 {
@@ -155,6 +158,7 @@ pub mod vao {
 
         pub fn unbind(&self) {
             self.vao.gl.bind_vertex_array(None);
+            self._shader.unbind(&self.vao.gl);
         }
     }
 
@@ -170,8 +174,9 @@ pub mod vao {
     }
 
     impl<'a, 'b> ShaderVertexArrayObjectBoundRef<'a, 'b> {
-        pub fn draw_arrays(&self, mode: u32, byte_offset: i32, size: i32) {
+        pub fn draw_arrays(&self, mode: u32, byte_offset: i32, size: i32) -> &Self {
             self.vao.gl.draw_arrays(mode, byte_offset, size);
+            self
         }
 
         pub fn draw_elements_with_i32(
@@ -180,11 +185,12 @@ pub mod vao {
             num_elements: Option<i32>,
             type_: u32,
             byte_offset: i32,
-        ) {
+        ) -> &Self {
             let num_elements = num_elements.unwrap_or(self.vao.num_elements() as i32);
             self.vao
                 .gl
                 .draw_elements_with_i32(mode, num_elements, type_, byte_offset);
+            self
         }
 
         pub fn draw_elements_instanced_with_i32(
@@ -192,7 +198,7 @@ pub mod vao {
             mode: u32,
             offset_element_idx: i32,
             num_instances: i32,
-        ) {
+        ) -> &Self {
             self.vao.gl.draw_elements_instanced_with_i32(
                 mode,
                 self.vao.num_elements() as i32,
@@ -200,10 +206,12 @@ pub mod vao {
                 offset_element_idx,
                 num_instances,
             );
+            self
         }
 
         pub fn unbind(&self) {
             self.vao.gl.bind_vertex_array(None);
+            self._shader.unbind(&self.vao.gl);
         }
     }
 
@@ -444,7 +452,10 @@ pub mod vao {
         }*/
 
         pub fn num_elements(&self) -> usize {
-            self.element_array_buffer.as_ref().unwrap_abort().num_elements()
+            self.element_array_buffer
+                .as_ref()
+                .unwrap_abort()
+                .num_elements()
         }
 
         pub fn num_instances(&self) -> i32 {
@@ -511,7 +522,8 @@ pub mod vao {
         }
 
         pub fn unbind(&self) {
-            //self.vao.gl.bind_vertex_array(None);
+            self.vao.gl.bind_vertex_array(None);
+            self._shader.unbind(&self.vao.gl);
         }
     }
 
@@ -528,13 +540,15 @@ pub mod vao {
     }
     use crate::object::array_buffer::VertexBufferObject;
     impl<'a, 'b> ShaderVertexArrayObjectBoundRef<'a, 'b> {
-        pub fn draw_arrays(&self, mode: u32, byte_offset: i32, size: i32) {
+        pub fn draw_arrays(&self, mode: u32, byte_offset: i32, size: i32) -> &Self {
             for (attr, buf) in self.vao.array_buffer.iter() {
                 buf.bind();
                 buf.set_vertex_attrib_pointer_by_name::<f32>(self.shader, attr);
             }
 
             self.vao.gl.draw_arrays(mode, byte_offset, size);
+
+            self
         }
 
         pub fn draw_elements_with_i32(
@@ -543,7 +557,7 @@ pub mod vao {
             num_elements: Option<i32>,
             type_: u32,
             byte_offset: i32,
-        ) {
+        ) -> &Self {
             for (attr, buf) in self.vao.array_buffer.iter() {
                 buf.bind();
                 buf.set_vertex_attrib_pointer_by_name::<f32>(self.shader, attr);
@@ -555,6 +569,7 @@ pub mod vao {
             self.vao
                 .gl
                 .draw_elements_with_i32(mode, num_elements, type_, byte_offset);
+            self
         }
 
         pub fn draw_elements_instanced_with_i32(
@@ -562,7 +577,7 @@ pub mod vao {
             mode: u32,
             offset_element_idx: i32,
             num_instances: i32,
-        ) {
+        ) -> &Self {
             for (attr, buf) in self.vao.array_buffer.iter() {
                 buf.bind();
                 buf.set_vertex_attrib_pointer_by_name::<f32>(self.shader, attr);
@@ -587,10 +602,12 @@ pub mod vao {
                     offset_element_idx,
                     num_instances,
                 );
+            self
         }
 
         pub fn unbind(&self) {
-            //self.vao.gl.bind_vertex_array(None);
+            self.vao.gl.bind_vertex_array(None);
+            self.shader.unbind(&self.vao.gl);
         }
     }
 
@@ -716,6 +733,9 @@ pub mod vao {
 
         pub fn unbind(&self) {
             //self.vao.gl.bind_vertex_array(None);
+
+            self.vao.gl.bind_vertex_array(None);
+            self.shader.unbind(&self.vao.gl);
         }
     }
 

src/core/al-core/src/text.rs

@@ -1,171 +0,0 @@
-#[derive(Serialize, Deserialize)]
-pub struct LetterTexPosition {
-    pub x_min: u32,
-    pub x_max: u32,
-    pub y_min: u32,
-    pub y_max: u32,
-    pub x_advance: u32,
-    pub y_advance: u32,
-    pub w: u32,
-    pub h: u32,
-    pub bound_xmin: f32,
-    pub bound_ymin: f32,
-}
-
-use std::collections::HashMap;
-use serde::{Serialize, Deserialize};
-pub struct Font {
-    pub bitmap: Vec<u8>,
-    pub letters: HashMap<char, LetterTexPosition>,
-}
-
-pub const TEX_SIZE: usize = 256;
-
-mod tests {
-    #[test]
-    pub fn rasterize_font() {
-        #[derive(PartialEq)]
-        struct Letter {
-            pub l: char,
-            pub w: u32,
-            pub h: u32,
-            pub x_advance: u32,
-            pub y_advance: u32,
-            pub bitmap: Vec<u8>,
-            pub bounds: fontdue::OutlineBounds,
-        }
-        use std::cmp::Ordering;
-        impl PartialOrd for Letter {
-            fn partial_cmp(&self, other: &Self) -> Option<Ordering> {
-                let w_cmp = other.w.cmp(&self.w);
-        
-                if Ordering::Equal == w_cmp {
-                    Some(other.h.cmp(&self.h))
-                } else {
-                    Some(w_cmp)
-                }
-            }
-        }
-        
-        use super::TEX_SIZE;
-
-        use super::LetterTexPosition;
-        use std::collections::HashMap;
-        use std::io::Write;
-
-
-        // Read the font data.
-        let font = include_bytes!("../resources/arial.ttf") as &[u8];
-        // Parse it into the font type.
-        let font = fontdue::Font::from_bytes(font, fontdue::FontSettings::default()).unwrap();
-
-        // Rasterize and get the layout metrics for the letter 'g' at 17px.
-        let mut w = 0;
-        let mut h = 0;
-        let mut letters = Vec::new();
-        for c in 0_u8..255_u8 {
-            let (metrics, bitmap) = font.rasterize(c as char, 16.0);
-
-            letters.push(Letter {
-                w: metrics.width as u32,
-                h: metrics.height as u32,
-                x_advance: metrics.advance_width as u32,
-                y_advance: metrics.advance_height as u32,
-                bounds: metrics.bounds,
-                l: c as char,
-                bitmap,
-            });
-
-            h += metrics.height;
-            w = std::cmp::max(w, metrics.width);
-        }
-        letters.sort_unstable_by(|l, r| {
-            let w_cmp = r.w.cmp(&l.w);
-
-            if Ordering::Equal == w_cmp {
-                r.h.cmp(&l.h)
-            } else {
-                w_cmp
-            }
-        });
-
-        let mut letters_tex = HashMap::new();
-        let mut x_min = 0;
-        let mut y_min = 0;
-        let mut size_col = letters[0].w;
-        let mut img = vec![0; TEX_SIZE * TEX_SIZE * 4];
-
-        for Letter {
-            l,
-            w,
-            h,
-            x_advance,
-            y_advance,
-            bitmap,
-            bounds,
-        } in letters.into_iter()
-        {
-            let mut i = 0;
-
-            let mut y_max = y_min + h;
-            if y_max >= TEX_SIZE as u32 {
-                y_min = 0;
-                y_max = h;
-                x_min += size_col;
-
-                size_col = w;
-            }
-
-            // Draw here the letter in the tex
-            let x_max = x_min + w;
-            letters_tex.insert(
-                l,
-                LetterTexPosition {
-                    x_min,
-                    x_max,
-                    y_min,
-                    y_max,
-                    x_advance,
-                    y_advance,
-                    w: x_max - x_min,
-                    h: y_max - y_min,
-                    bound_xmin: bounds.xmin,
-                    bound_ymin: bounds.ymin,
-                },
-            );
-            for y in (y_min as usize)..(y_max as usize) {
-                for x in (x_min as usize)..(x_max as usize) {
-                    img[4 * (x + TEX_SIZE * y)] = bitmap[i];
-                    img[4 * (x + TEX_SIZE * y) + 1] = bitmap[i];
-                    img[4 * (x + TEX_SIZE * y) + 2] = bitmap[i];
-                    img[4 * (x + TEX_SIZE * y) + 3] = bitmap[i];
-
-                    i += 1;
-                }
-            }
-
-            y_min += h;
-        }
-
-        /* Save the jpeg file */
-        use std::fs::File;
-        use std::io::BufWriter;
-
-        let file = File::create("letters.png").unwrap();
-        let ref mut w = BufWriter::new(file);
-
-        let mut encoder = png::Encoder::new(w, TEX_SIZE as u32, TEX_SIZE as u32); // Width is 2 pixels and height is 1.
-        encoder.set_color(png::ColorType::Rgba);
-        encoder.set_depth(png::BitDepth::Eight);
-
-        let mut writer = encoder.write_header().unwrap();
-
-        writer.write_image_data(&img).unwrap(); // Save
-
-        /* Save the letters position */
-        let letters_tex_serialized = serde_json::to_string(&letters_tex).unwrap();
-
-        let mut file = File::create("letters.json").unwrap();
-        write!(file, "{}", letters_tex_serialized).unwrap();
-    }
-}

src/core/al-ui/Cargo.toml

@@ -11,7 +11,9 @@ js-sys = "0.3.47"
 wasm-bindgen-futures = "0.4.20"
 cgmath = "*"
 itertools-num = "0.1.3"
-healpix = { package = "cdshealpix", git = 'https://github.com/cds-astro/cds-healpix-rust', branch = 'master' }
+#healpix = { package = "cdshealpix", git = 'https://github.com/cds-astro/cds-healpix-rust', branch = 'master' }
+cdshealpix = { path = "../../../cds-healpix-rust" }
+
 serde = { version = "^1.0.59", features = ["derive"] }
 serde_json = "1.0"
 serde-wasm-bindgen = "0.4"

src/core/src/async_task.rs

@@ -6,11 +6,13 @@
 use al_task_exec::Executor;
 pub type TaskExecutor = Executor<TaskType, TaskResult>;
 
-pub use crate::renderable::catalog::Source;
+use crate::math::lonlat::LonLat;
+use crate::math::lonlat::LonLatT;
+
 pub enum TaskResult {
     TableParsed {
         name: String,
-        sources: Box<[Source]>,
+        sources: Box<[LonLatT<f32>]>,
     },
     /*TileSentToGPU {
         tile: Tile,
@@ -55,6 +57,7 @@ where
 }
 
 use serde::de::DeserializeOwned;
+
 use std::pin::Pin;
 use std::task::{Context, Poll};
 impl<T> Stream for ParseTableTask<T>
@@ -93,19 +96,25 @@ where
 /*use rand::rngs::StdRng;
 use rand::Rng;
 use rand::SeedableRng;*/
-pub struct BuildCatalogIndex {
-    pub sources: Vec<Source>,
+pub struct BuildCatalogIndex<T>
+where
+    T: LonLat<f32> + Clone,
+{
+    pub sources: Vec<T>,
     num_sorted_sources: usize,
     i: usize,
     j: usize,
     merging: bool,
-    new_sorted_sources: Vec<Source>,
+    new_sorted_sources: Vec<T>,
     ready: bool,
     chunk_size: usize,
     prev_num_sorted_sources: usize,
 }
-impl BuildCatalogIndex {
-    pub fn new(sources: Vec<Source>) -> Self {
+impl<T> BuildCatalogIndex<T>
+where
+    T: LonLat<f32> + Clone,
+{
+    pub fn new(sources: Vec<T>) -> Self {
         let num_sorted_sources = 0;
         let merging = false;
         let new_sorted_sources = vec![];
@@ -130,7 +139,12 @@ impl BuildCatalogIndex {
 const CHUNK_OF_SOURCES_TO_SORT: usize = 1000;
 const CHUNK_OF_SORTED_SOURCES_TO_MERGE: usize = 20000;
 use crate::Abort;
-impl Stream for BuildCatalogIndex {
+impl<T> Unpin for BuildCatalogIndex<T> where T: LonLat<f32> + Clone {}
+
+impl<T> Stream for BuildCatalogIndex<T>
+where
+    T: LonLat<f32> + Clone,
+{
     type Item = ();
 
     /// Attempt to resolve the next item in the stream.
@@ -149,11 +163,16 @@ impl Stream for BuildCatalogIndex {
                 //let mut rng = StdRng::seed_from_u64(0);
                 // Get the chunk to sort
                 (&mut self.sources[a..b]).sort_unstable_by(|s1, s2| {
-                    let (s1_lon, s1_lat) = s1.lonlat();
-                    let (s2_lon, s2_lat) = s2.lonlat();
+                    let s1_lonlat = s1.lonlat();
+                    let s2_lonlat = s2.lonlat();
 
-                    let idx1 = cdshealpix::nested::hash(7, s1_lon as f64, s1_lat as f64);
-                    let idx2 = cdshealpix::nested::hash(7, s2_lon as f64, s2_lat as f64);
+                    let (s1_lon, s1_lat) =
+                        (s1_lonlat.lon().to_radians(), s1_lonlat.lat().to_radians());
+                    let (s2_lon, s2_lat) =
+                        (s2_lonlat.lon().to_radians(), s2_lonlat.lat().to_radians());
+
+                    let idx1 = healpix::nested::hash(7, s1_lon as f64, s1_lat as f64);
+                    let idx2 = healpix::nested::hash(7, s2_lon as f64, s2_lat as f64);
 
                     let ordering = idx1.partial_cmp(&idx2).unwrap_abort();
                     match ordering {
@@ -197,11 +216,16 @@ impl Stream for BuildCatalogIndex {
                     } else {
                         let s1 = &self.sources[self.j];
                         let s2 = &self.sources[self.i];
-                        let (s1_lon, s1_lat) = s1.lonlat();
-                        let (s2_lon, s2_lat) = s2.lonlat();
+                        let s1_lonlat = s1.lonlat();
+                        let s2_lonlat = s2.lonlat();
 
-                        let p1 = cdshealpix::nested::hash(7, s1_lon as f64, s1_lat as f64);
-                        let p2 = cdshealpix::nested::hash(7, s2_lon as f64, s2_lat as f64);
+                        let (s1_lon, s1_lat) =
+                            (s1_lonlat.lon().to_radians(), s1_lonlat.lat().to_radians());
+                        let (s2_lon, s2_lat) =
+                            (s2_lonlat.lon().to_radians(), s2_lonlat.lat().to_radians());
+
+                        let p1 = healpix::nested::hash(7, s1_lon as f64, s1_lat as f64);
+                        let p2 = healpix::nested::hash(7, s2_lon as f64, s2_lat as f64);
                         if p1 <= p2 {
                             let v = self.sources[self.j].clone();
                             self.j += 1;
@@ -260,29 +284,29 @@ where
         texture: &Texture,
         image: I,
         texture_array: Rc<Texture2DArray>,
-        conf: &HiPSConfig,
+        cfg: &HiPSConfig,
     ) -> ImageTile2GpuTask<I> {
         // Index of the texture in the total set of textures
         let texture_idx = texture.idx();
         // Index of the slice of textures
-        let num_textures_by_slice = conf.num_textures_by_slice();
+        let num_textures_by_slice = cfg.num_textures_by_slice();
         let idx_slice = texture_idx / num_textures_by_slice;
         // Index of the texture in its slice
         let idx_in_slice = texture_idx % num_textures_by_slice;
 
         // Index of the column of the texture in its slice
-        let num_textures_by_side_slice = conf.num_textures_by_side_slice();
+        let num_textures_by_side_slice = cfg.num_textures_by_side_slice();
         let idx_col_in_slice = idx_in_slice / num_textures_by_side_slice;
         // Index of the row of the texture in its slice
         let idx_row_in_slice = idx_in_slice % num_textures_by_side_slice;
 
         // Row and column indexes of the tile in its texture
-        let (idx_col_in_tex, idx_row_in_tex) = cell.get_offset_in_texture_cell(conf);
+        let (idx_col_in_tex, idx_row_in_tex) = cell.get_offset_in_texture_cell(cfg.delta_depth());
 
         // The size of the global texture containing the tiles
-        let texture_size = conf.get_texture_size();
+        let texture_size = cfg.get_texture_size();
         // The size of a tile in its texture
-        let tile_size = conf.get_tile_size();
+        let tile_size = cfg.get_tile_size();
 
         // Offset in the slice in pixels
         let offset = Vector3::new(
@@ -303,4 +327,4 @@ where
             .tex_sub_image_3d(&self.texture_array, &self.offset)?;
         Ok(true)
     }
-}
+}

src/core/src/camera/fov.rs

@@ -1,13 +1,20 @@
-use cgmath::{Vector2, Vector4, Matrix4};
+use cgmath::{Matrix4, Vector2};
 
-use crate::math::projection::coo_space::{XYNDC, XYZWWorld, XYZWModel};
-use crate::math::spherical::FieldOfViewType;
+use crate::math::projection::coo_space::{XYZWModel, XYZWWorld, XYNDC};
+
+use crate::math::sph_geom::region::{Intersection, PoleContained, Region};
+use crate::math::{projection::Projection, sph_geom::bbox::BoundingBox};
+use crate::LonLatT;
+use cgmath::Vector3;
+
+use crate::ProjectionType;
+use std::iter;
 
 fn ndc_to_world(
     ndc_coo: &[XYNDC],
     ndc_to_clip: &Vector2<f64>,
     clip_zoom_factor: f64,
-    projection: &ProjectionType
+    projection: &ProjectionType,
 ) -> Option<Vec<XYZWWorld>> {
     // Deproject the FOV from ndc to the world space
     let mut world_coo = Vec::with_capacity(ndc_coo.len());
@@ -48,30 +55,28 @@ fn linspace(a: f64, b: f64, num: usize) -> Vec<f64> {
     res
 }
 
-const NUM_VERTICES_WIDTH: usize = 4;
-const NUM_VERTICES_HEIGHT: usize = 4;
+const NUM_VERTICES_WIDTH: usize = 3;
+const NUM_VERTICES_HEIGHT: usize = 3;
 const NUM_VERTICES: usize = 4 + 2 * NUM_VERTICES_WIDTH + 2 * NUM_VERTICES_HEIGHT;
 // This struct belongs to the CameraViewPort
-pub struct FieldOfViewVertices {
-    ndc_coo: Vec<XYNDC>,
-    world_coo: Option<Vec<XYZWWorld>>,
-    model_coo: Option<Vec<XYZWModel>>,
+pub struct FieldOfView {
+    // Vertices
+    ndc_vertices: Vec<XYNDC>,
+    world_vertices: Option<Vec<XYZWWorld>>,
+    model_vertices: Option<Vec<XYZWModel>>,
 
-    // Meridians and parallels contained
-    // in the field of view
-    great_circles: FieldOfViewType,
-    //moc: [Option<HEALPixCoverage>; al_api::coo_system::NUM_COOSYSTEM],
-    //depth: u8,
+    reg: Region,
 }
 
-use crate::ProjectionType;
-impl FieldOfViewVertices {
+impl FieldOfView {
     pub fn new(
+        // ndc to clip parameters
         ndc_to_clip: &Vector2<f64>,
         clip_zoom_factor: f64,
-        mat: &Matrix4<f64>,
-        center: &Vector4<f64>,
-        projection: &ProjectionType
+        // rotation
+        rotation_mat: &Matrix4<f64>,
+        // projection
+        projection: &ProjectionType,
     ) -> Self {
         let mut x_ndc = linspace(-1., 1., NUM_VERTICES_WIDTH + 2);
 
@@ -88,83 +93,143 @@ impl FieldOfViewVertices {
         y_ndc.extend(linspace(1., -1., NUM_VERTICES_HEIGHT + 2));
         y_ndc.pop();
 
-        let mut ndc_coo = Vec::with_capacity(NUM_VERTICES);
+        let mut ndc_vertices = Vec::with_capacity(NUM_VERTICES);
         for idx_vertex in 0..NUM_VERTICES {
-            ndc_coo.push(Vector2::new(x_ndc[idx_vertex], y_ndc[idx_vertex]));
+            ndc_vertices.push(Vector2::new(x_ndc[idx_vertex], y_ndc[idx_vertex]));
         }
 
-        let world_coo = ndc_to_world(&ndc_coo, ndc_to_clip, clip_zoom_factor, projection);
-        let model_coo = world_coo
+        let world_vertices = ndc_to_world(&ndc_vertices, ndc_to_clip, clip_zoom_factor, projection);
+        let model_vertices = world_vertices
             .as_ref()
-            .map(|world_coo| world_to_model(world_coo, mat));
+            .map(|world_vertex| world_to_model(world_vertex, rotation_mat));
 
-        let great_circles = if let Some(vertices) = &model_coo {
-            FieldOfViewType::new_polygon(vertices, center)
+        let reg = if let Some(vertices) = &model_vertices {
+            Region::from_vertices(vertices, &rotation_mat.z)
         } else {
-            FieldOfViewType::Allsky
+            Region::AllSky
         };
 
-        FieldOfViewVertices {
-            ndc_coo,
-            world_coo,
-            model_coo,
-            great_circles,
+        // Allsky case
+        FieldOfView {
+            ndc_vertices,
+            world_vertices,
+            model_vertices,
+
+            reg,
         }
     }
 
-    pub fn set_fov(
+    // Update the vertices
+    pub fn set_aperture(
         &mut self,
         ndc_to_clip: &Vector2<f64>,
         clip_zoom_factor: f64,
-        w2m: &Matrix4<f64>,
-        center: &Vector4<f64>,
-        projection: &ProjectionType
+        rotate_mat: &Matrix4<f64>,
+        projection: &ProjectionType,
     ) {
-        self.world_coo = ndc_to_world(&self.ndc_coo, ndc_to_clip, clip_zoom_factor, projection);
-        self.set_rotation(w2m, center);
+        self.world_vertices = ndc_to_world(
+            &self.ndc_vertices,
+            ndc_to_clip,
+            clip_zoom_factor,
+            projection,
+        );
+        self.set_rotation(rotate_mat);
     }
 
-    pub fn set_rotation(
-        &mut self,
-        w2m: &Matrix4<f64>,
-        center: &Vector4<f64>,
-    ) {
-        if let Some(world_coo) = &self.world_coo {
-            self.model_coo = Some(world_to_model(world_coo, w2m));
+    pub fn set_rotation(&mut self, rotate_mat: &Matrix4<f64>) {
+        if let Some(world_vertices) = &self.world_vertices {
+            self.model_vertices = Some(world_to_model(world_vertices, rotate_mat));
         } else {
-            self.model_coo = None;
+            self.model_vertices = None;
         }
 
-        self.set_great_circles(center);
-    }
-
-    fn set_great_circles(&mut self, center: &Vector4<f64>) {
-        if let Some(vertices) = &self.model_coo {
-            self.great_circles = FieldOfViewType::new_polygon(vertices, center);
+        if let Some(vertices) = &self.model_vertices {
+            self.reg = Region::from_vertices(vertices, &rotate_mat.z);
         } else {
-            self.great_circles = FieldOfViewType::Allsky;
+            self.reg = Region::AllSky;
         }
     }
 
-    /*pub fn get_depth(&self) -> u8 {
-        self.depth
-    }*/
+    // Interface over the region object
+    pub fn contains(&self, lonlat: &LonLatT<f64>) -> bool {
+        self.reg.contains(lonlat)
+    }
+
+    pub fn intersects_parallel(&self, lat: f64) -> Intersection {
+        self.reg.intersects_parallel(lat)
+    }
+
+    pub fn intersects_meridian(&self, lon: f64) -> Intersection {
+        self.reg.intersects_meridian(lon)
+    }
+
+    pub fn intersects_great_circle(&self, n: &Vector3<f64>) -> Intersection {
+        self.reg.intersects_great_circle(n)
+    }
+
+    pub fn intersects_great_circle_arc(
+        &self,
+        lonlat1: &LonLatT<f64>,
+        lonlat2: &LonLatT<f64>,
+    ) -> Intersection {
+        self.reg.intersects_great_circle_arc(lonlat1, lonlat2)
+    }
+
+    // Accessors
+    pub fn get_bounding_box(&self) -> &BoundingBox {
+        match &self.reg {
+            Region::AllSky => &crate::math::sph_geom::bbox::ALLSKY_BBOX,
+            Region::Polygon { bbox, .. } => bbox,
+        }
+    }
 
     pub fn get_vertices(&self) -> Option<&Vec<XYZWModel>> {
-        self.model_coo.as_ref()
+        self.model_vertices.as_ref()
     }
 
-    pub fn get_bounding_box(&self) -> &BoundingBox {
-        self.great_circles.get_bounding_box()
+    pub fn is_intersecting_zero_meridian(&self) -> bool {
+        match &self.reg {
+            Region::AllSky => true,
+            Region::Polygon {
+                is_intersecting_zero_meridian,
+                ..
+            } => *is_intersecting_zero_meridian,
+        }
+    }
+
+    pub fn is_allsky(&self) -> bool {
+        matches!(self.reg, Region::AllSky)
     }
 
     pub fn contains_pole(&self) -> bool {
-        self.great_circles.contains_pole()
+        match &self.reg {
+            Region::AllSky => true,
+            Region::Polygon { poles, .. } => *poles != PoleContained::None,
+        }
     }
 
-    pub fn _type(&self) -> &FieldOfViewType {
-        &self.great_circles
+    pub fn contains_north_pole(&self) -> bool {
+        match &self.reg {
+            Region::AllSky => true,
+            Region::Polygon { poles, .. } => {
+                *poles == PoleContained::North || *poles == PoleContained::Both
+            }
+        }
+    }
+
+    pub fn contains_south_pole(&self) -> bool {
+        match &self.reg {
+            Region::AllSky => true,
+            Region::Polygon { poles, .. } => {
+                *poles == PoleContained::South || *poles == PoleContained::Both
+            }
+        }
+    }
+
+    pub fn contains_both_poles(&self) -> bool {
+        match &self.reg {
+            Region::AllSky => true,
+            Region::Polygon { poles, .. } => *poles == PoleContained::Both,
+        }
     }
 }
-use crate::math::{projection::Projection, spherical::BoundingBox};
-use std::iter;