add doc for the different shapes

examples/al-cat-proper-motion.html

@@ -12,7 +12,7 @@
       // Start up Aladin Lite
       aladin = A.aladin('#aladin-lite-div', {
         target: "LMC",
-        fov: 2,
+        fov: 10,
         showContextMenu: true,
         fullScreen: true,
         showSimbadPointerControl: true,
@@ -27,47 +27,47 @@
       //aladin.addCatalog(A.catalogFromVizieR('J/A+A/663/A107/table5', 'LMC', 5, {
 
       const pmCat = A.catalogFromURL('./data/proper_motion.xml', {
-          onClick: 'showTable',
-          name: 'mean pm over HPX cells around LMC from GaiaDR2',
-          hoverColor: 'yellow',
-          // Footprint associated to sources
-          shape: (s) => {
-            // compute the mean of pm over the catalog sources
-            if (!pmraMean || !pmdecMean) {
-              pmraMean = 0, pmdecMean = 0;
-              for (var s of pmCat.getSources()) {
-                pmraMean += +s.data.pmra;
-                pmdecMean += +s.data.pmdec;
-              }
-
-              const numSources = pmCat.getSources().length;
-
-              pmraMean /= numSources
-              pmdecMean /= numSources
+        onClick: 'showTable',
+        name: 'mean pm over HPX cells around LMC from GaiaDR2',
+        hoverColor: 'yellow',
+        selectionColor: 'white',
+        // Footprint associated to sources
+        shape: (s) => {
+          // Compute the mean of pm over the catalog sources
+          if (!pmraMean || !pmdecMean) {
+            pmraMean = 0, pmdecMean = 0;
+            for (var s of pmCat.getSources()) {
+              pmraMean += +s.data.pmra;
+              pmdecMean += +s.data.pmdec;
             }
 
-            let dra = +s.data.pmra - pmraMean;
-            let ddec = +s.data.pmdec - pmdecMean;
+            const numSources = pmCat.getSources().length;
 
-            let mag = Math.sqrt(dra * dra + ddec * ddec);
-            // discard drawing a vector for big pm
-            if (mag > 1) {
-              return;
-            }
+            pmraMean /= numSources
+            pmdecMean /= numSources
+          }
 
-            let color = rainbowColorMap(mag * 2)
+          let dra = +s.data.pmra - pmraMean;
+          let ddec = +s.data.pmdec - pmdecMean;
 
-            return A.line(
-              s.ra,
-              s.dec,
-              s.ra + dra,
-              s.dec + ddec,
-              null,
-              {lineWidth: 3, arrow: true, color}
-            )
+          let mag = Math.sqrt(dra * dra + ddec * ddec);
+          // discard drawing a vector for big pm
+          if (mag > 1) {
+            return;
           }
-        },
-      );
+
+          let color = rainbowColorMap(mag * 2)
+
+          return A.vector(
+            s.ra,
+            s.dec,
+            s.ra + dra,
+            s.dec + ddec,
+            null,
+            {lineWidth: 3, color}
+          )
+        }
+      });
       aladin.addCatalog(pmCat);
   });
 

src/core/src/app.rs

@@ -821,6 +821,10 @@ impl App {
         }
     }
 
+    pub(crate) fn draw_grid_labels(&mut self) -> Result<(), JsValue> {
+        self.grid.draw_labels(&self.camera)
+    }
+
     pub(crate) fn draw(&mut self, force_render: bool) -> Result<(), JsValue> {
         /*let scene_redraw = self.rendering | force_render;
         let mut ui = self.ui.lock();

src/core/src/grid/mod.rs

@@ -2,6 +2,7 @@ pub mod label;
 pub mod meridian;
 pub mod parallel;
 
+use crate::grid::parallel::Parallel;
 use crate::math::projection::coo_space::XYScreen;
 use crate::Abort;
 
@@ -31,6 +32,9 @@ pub struct ProjetedGrid {
     fmt: angle::SerializeFmt,
 
     line_style: line::Style,
+
+    meridians: Vec<Meridian>,
+    parallels: Vec<Parallel>,
 }
 
 use crate::shader::ShaderManager;
@@ -40,6 +44,8 @@ use crate::renderable::line::RasterizedLineRenderer;
 use crate::renderable::text::TextRenderManager;
 use web_sys::HtmlElement;
 
+use self::meridian::Meridian;
+
 impl ProjetedGrid {
     pub fn new(aladin_div: &HtmlElement) -> Result<ProjetedGrid, JsValue> {
         let text_renderer = TextRenderManager::new(aladin_div)?;
@@ -56,6 +62,8 @@ impl ProjetedGrid {
         let line_style = line::Style::None;
         let fmt = angle::SerializeFmt::DMS;
         let thickness = 2.0;
+        let meridians = Vec::new();
+        let parallels = Vec::new();
 
         let grid = ProjetedGrid {
             color,
@@ -66,6 +74,8 @@ impl ProjetedGrid {
             thickness,
 
             text_renderer,
+            meridians,
+            parallels,
             fmt,
         };
         // Initialize the vertices & labels
@@ -147,7 +157,7 @@ impl ProjetedGrid {
         let step_line_px = max_dim_px * 0.2;
 
         // update meridians
-        let meridians = {
+        self.meridians = {
             // Select the good step with a binary search
             let step_lon_precised =
                 (bbox.get_lon_size() as f64) * step_line_px / (camera.get_width() as f64);
@@ -173,7 +183,7 @@ impl ProjetedGrid {
             meridians
         };
 
-        let parallels = {
+        self.parallels = {
             let step_lat_precised =
                 (bbox.get_lat_size() as f64) * step_line_px / (camera.get_height() as f64);
             let step_lat = select_fixed_step(step_lat_precised);
@@ -196,11 +206,12 @@ impl ProjetedGrid {
         };
 
         // update the line buffers
-        let paths = meridians
+        let paths = self
+            .meridians
             .iter()
             .map(|meridian| meridian.get_lines_vertices())
             .chain(
-                parallels
+                self.parallels
                     .iter()
                     .map(|parallel| parallel.get_lines_vertices()),
             )
@@ -213,12 +224,16 @@ impl ProjetedGrid {
         let m = camera.get_screen_size().magnitude();
         rasterizer.add_stroke_paths(paths, self.thickness, &self.color, &self.line_style);
 
-        // update labels
-        if self.show_labels {
-            let labels = meridians
+        Ok(())
+    }
+
+    pub fn draw_labels(&mut self, camera: &CameraViewPort) -> Result<(), JsValue> {
+        if self.enabled && self.show_labels {
+            let labels = self
+                .meridians
                 .iter()
                 .filter_map(|m| m.get_label())
-                .chain(parallels.iter().filter_map(|p| p.get_label()));
+                .chain(self.parallels.iter().filter_map(|p| p.get_label()));
 
             let dpi = camera.get_dpi();
             self.text_renderer.begin();

src/core/src/lib.rs

@@ -927,6 +927,11 @@ impl WebClient {
         self.app.is_rendering()
     }
 
+    #[wasm_bindgen(js_name = drawGridLabels)]
+    pub fn draw_grid_labels(&mut self) -> Result<(), JsValue> {
+        self.app.draw_grid_labels()
+    }
+
     #[wasm_bindgen(js_name = parseVOTable)]
     pub fn parse_votable(&mut self, s: &str) -> Result<JsValue, JsValue> {
         /*let votable: VOTableWrapper<votable::impls::mem::InMemTableDataRows> =

src/core/src/renderable/text.rs

@@ -82,27 +82,10 @@ impl TextRenderManager {
 
         Ok(())
     }
-
-    pub fn draw(
-        &mut self,
-        _camera: &CameraViewPort,
-        _color: &ColorRGBA,
-        _scale: f32,
-    ) -> Result<(), JsValue> {
-        Ok(())
-    }
 }
 
 impl Renderer for TextRenderManager {
     fn begin(&mut self) {
-        self.ctx = self
-            .canvas
-            .get_context("2d")
-            .unwrap_abort()
-            .unwrap_abort()
-            .dyn_into::<web_sys::CanvasRenderingContext2d>()
-            .unwrap_abort();
-
         //self.clear_text_canvas();
         // Clear the Aladin Lite 2d canvas
         // This canvas is where catalogs, grid labels, Hpx grid are drawn

src/css/aladin.css

@@ -54,18 +54,6 @@
     padding-top: 58.45%; /* aspect ratio of the background image */
 }
 
-.aladin-col {
-    float: left;
-    width: 45.00%;
-    margin-right: 5.0%;
-}
-  /* Clear floats after the columns */
-.aladin-row:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
 .aladin-clipboard::before {
     content: ' 📋';
     cursor:pointer;