Fix selection of footprints not associated with catalog sources

Targets #274

* fix: handleSelect now call selectObjects with not only the list of catalog sources but also with the footprints
* fix: View.closestFootprints: if no lineWidth was given to a footprint then it could happen that this method set it to 1px, erasing its previous undefined value
* Circle and Ellipse now behaves like PolyLine and Vector, if no linewidth is given, the one from its GraphicOverlay is taken.

codemeta.json

@@ -8,8 +8,8 @@
     "dateModified": "2023-01-31",
     "issueTracker": "https://github.com/cds-astro/aladin-lite/issues",
     "name": "Aladin Lite",
-    "version": "3.6.2",
-    "softwareVersion": "3.6.2",
+    "version": "3.6.4",
+    "softwareVersion": "3.6.4",
     "description": "An astronomical HiPS visualizer in the browser.",
     "identifier": "10.5281/zenodo.7638833",
     "applicationCategory": "Astronomy, Visualization",

examples/al-footprints.html

@@ -13,7 +13,7 @@
         // 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, lineDash: [2, 2]});
-        /*aladin.addOverlay(overlay);
+        aladin.addOverlay(overlay);
         overlay.addFootprints([
             A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]], {hoverColor: 'green'}),
             A.polygon([[83.62807, 22.06330], [83.58397, 22.02280], [83.62792, 22.02258]]),
@@ -21,7 +21,7 @@
         ]);
         overlay.add(A.circle(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
         overlay.add(A.vector(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
-        */
+        
         aladin.on("footprintClicked", (footprint, xyMouseCoords) => {
             console.log("footprint clicked catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
@@ -35,8 +35,8 @@
             console.log("Object hovered stopped: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
 
-        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 10, {onClick: 'showTable', selectionColor: "orange", hoverColor: 'red', limit: 10000});
-        aladin.addCatalog(cat);
+        //const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 10, {onClick: 'showTable', selectionColor: "orange", hoverColor: 'red', limit: 10000});
+        //aladin.addCatalog(cat);
     });
 </script>
 </body>

package.json

@@ -2,7 +2,7 @@
   "homepage": "https://aladin.u-strasbg.fr/",
   "name": "aladin-lite",
   "type": "module",
-  "version": "3.6.3",
+  "version": "3.6.4",
   "description": "An astronomical HiPS visualizer in the browser",
   "author": "Thomas Boch and Matthieu Baumann",
   "license": "GPL-3",

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.6.3"
+version = "3.6.4"
 authors = [ "baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr",]
 edition = "2018"
 
@@ -22,7 +22,7 @@ url-lite = "0.1.0"
 serde_json = "1.0.104"
 serde-wasm-bindgen = "0.5"
 enum_dispatch = "0.3.8"
-wasm-bindgen = "0.2.100"
+wasm-bindgen = "=0.2.92"
 wasm-streams = "0.3.0"
 async-channel = "1.8.0"
 mapproj = "0.3.0"
@@ -64,7 +64,7 @@ path = "./al-core"
 path = "./al-api"
 
 [dependencies.web-sys]
-version = "*"
+version = "0.3.56"
 features = [ "console", "CssStyleDeclaration", "Document", "Element", "HtmlCollection", "HtmlElement", "HtmlImageElement", "HtmlCanvasElement", "Blob", "ImageBitmap", "ImageData", "CanvasRenderingContext2d", "WebGlBuffer", "WebGlContextAttributes", "WebGlFramebuffer", "WebGlProgram", "WebGlShader", "WebGlUniformLocation", "WebGlTexture", "WebGlActiveInfo", "Headers", "Window", "Request", "RequestInit", "RequestMode", "Response", "XmlHttpRequest", "XmlHttpRequestResponseType", "PerformanceTiming", "Performance", "Url", "ReadableStream", "File", "FileList",]
 
 [dev-dependencies.image-decoder]

src/core/al-api/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "al-api"
-version = "0.1.0"
+version = "3.6.4"
 authors = ["baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr"]
 edition = "2018"
 

src/core/al-core/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "al-core"
-version = "0.1.0"
+version = "3.6.4"
 authors = ["baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr"]
 edition = "2018"
 
@@ -17,9 +17,7 @@ serde-wasm-bindgen = "0.4"
 wasm-streams = "0.3.0"
 futures = "0.3.25"
 colorgrad = "0.6.2"
-
-[dependencies.wasm-bindgen]
-version = "0.2.92"
+wasm-bindgen = "0.2.92"
 
 [dev-dependencies]
 fontdue = "0.7.2"
@@ -38,7 +36,7 @@ webgl2 = [
 ]
 
 [dependencies.web-sys]
-version = "0.3.77"
+version = "0.3.56"
 features = [
   'console',
   'CssStyleDeclaration',

src/core/src/downloader/request/allsky.rs

@@ -130,9 +130,9 @@ impl From<query::Allsky> for AllskyRequest {
                     Ok(allsky_tiles)
                 }
                 _ => {
-                    let opts = RequestInit::new();
-                    opts.set_method("GET");
-                    opts.set_mode(RequestMode::Cors);
+                    let mut opts = RequestInit::new();
+                    opts.method("GET");
+                    opts.mode(RequestMode::Cors);
                     let window = web_sys::window().unwrap_abort();
 
                     let request = web_sys::Request::new_with_str_and_init(&url_clone, &opts)?;

src/core/src/downloader/request/blank.rs

@@ -61,9 +61,9 @@ impl From<query::PixelMetadata> for PixelMetadataRequest {
         let request = match channel {
             ChannelType::R32F | ChannelType::R32I | ChannelType::R16I | ChannelType::R8UI => {
                 Request::new(async move {
-                    let opts = RequestInit::new();
-                    opts.set_method("GET");
-                    opts.set_mode(RequestMode::Cors);
+                    let mut opts = RequestInit::new();
+                    opts.method("GET");
+                    opts.mode(RequestMode::Cors);
 
                     let request =
                         web_sys::Request::new_with_str_and_init(&url_clone, &opts).unwrap_abort();

src/core/src/downloader/request/moc.rs

@@ -61,9 +61,9 @@ impl From<query::Moc> for MOCRequest {
 
         let window = web_sys::window().unwrap_abort();
         let request = Request::new(async move {
-            let opts = RequestInit::new();
-            opts.set_method("GET");
-            opts.set_mode(RequestMode::Cors);
+            let mut opts = RequestInit::new();
+            opts.method("GET");
+            opts.mode(RequestMode::Cors);
 
             let request = web_sys::Request::new_with_str_and_init(&url_clone, &opts).unwrap_abort();
             let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?;

src/core/src/downloader/request/tile.rs

@@ -142,9 +142,9 @@ impl From<query::Tile> for TileRequest {
             | ChannelType::R32I
             | ChannelType::R16I
             | ChannelType::R8UI => Request::new(async move {
-                let opts = RequestInit::new();
-                opts.set_method("GET");
-                opts.set_mode(RequestMode::Cors);
+                let mut opts = RequestInit::new();
+                opts.method("GET");
+                opts.mode(RequestMode::Cors);
 
                 let request =
                     web_sys::Request::new_with_str_and_init(&url_clone, &opts).unwrap_abort();

src/core/src/renderable/text.rs

@@ -95,7 +95,7 @@ impl Renderer for TextRenderManager {
         // reset the font and color
         self.ctx
             .set_font(&format!("{}px verdana, sans-serif", self.font_size));
-        self.ctx.set_fill_style_str(&self.color);
+        self.ctx.set_fill_style(&JsValue::from_str(&self.color));
     }
 
     fn end(&mut self) {}

src/js/A.js

@@ -1036,7 +1036,7 @@ A.init = (async () => {
         .createElement('canvas')
         .getContext('webgl2');
 
-    await init({});
+    await init();
     // Check for webgl2 support
     if (isWebGL2Supported) {
         Aladin.wasmLibs.core = module;

src/js/Catalog.js

@@ -613,7 +613,6 @@ export let Catalog = (function () {
                                 // Set the same color of the shape than the catalog. 
                                 // FIXME: the color/shape could be a parameter at the source level, allowing the user single catalogs handling different shapes
                                 shape.setColor(this.color)
-
                                 shape.setSelectionColor(this.selectionColor);
                                 shape.setHoverColor(this.hoverColor);
                             }

src/js/View.js

@@ -630,6 +630,7 @@ export let View = (function () {
                 var footprintClickedFunction = view.aladin.callbacksByEventName['footprintClicked'];
 
                 let objsByCats = {};
+                let footprints = [];
                 for (let o of objs) {
                     // classify the different objects by catalog
                     let cat = o.getCatalog && o.getCatalog();
@@ -647,12 +648,22 @@ export let View = (function () {
                         if (typeof footprintClickedFunction === 'function') {
                             footprintClickedFunction(o, xy);
                         }
+                        // If this footprint has a catalog then it will be selected from its source
+                        // so we will not add it
+                        if (!cat) {
+                            footprints.push(o);
+                        } 
                     }
                 }
 
-                // rewrite objs
+                // Rewrite objs
                 objs = Array.from(Object.values(objsByCats));
+                // Add the external footprints (i.e. which are not associated with catalog sources e.g. those from GraphicOverlay)
+                if (footprints.length > 0) {
+                    objs.push(footprints)
+                }
                 view.selectObjects(objs);
+
                 view.lastClickedObject = objs;
                 
             } else {
@@ -2160,26 +2171,21 @@ export let View = (function () {
         }
 
         let closests = [];
-        const fLineWidth = (footprints && footprints[0] && footprints[0].getLineWidth()) || 1;
-        let lw = fLineWidth + 3;
-        //for (var lw = startLw + 1; lw <= startLw + 3; lw++) {
-            footprints.forEach((footprint) => {
-                if (!footprint.source || !footprint.source.tooSmallFootprint) {
-                    // Hidden footprints are not considered
-                    //let originLineWidth = footprint.getLineWidth();
-    
-                    footprint.setLineWidth(lw);
-                    if (footprint.isShowing && footprint.isInStroke(ctx, this, x * window.devicePixelRatio, y * window.devicePixelRatio)) {
-                        closests.push(footprint);
-                    }
-                    footprint.setLineWidth(fLineWidth);
-                }
-            })
 
-        /*    if (closests.length > 0) {
-                break;
+        footprints.forEach((footprint) => {
+            if (!footprint.source || !footprint.source.tooSmallFootprint) {
+                const originLineWidth = footprint.getLineWidth();
+                let spreadedLineWidth = (originLineWidth || 1) + 3;
+
+                footprint.setLineWidth(spreadedLineWidth);
+                if (footprint.isShowing && footprint.isInStroke(ctx, this, x * window.devicePixelRatio, y * window.devicePixelRatio)) {
+                    closests.push(footprint);
+                }
+
+                footprint.setLineWidth(originLineWidth);
             }
-        }*/
+        })
+
 
         return closests;
     };
@@ -2191,13 +2197,11 @@ export let View = (function () {
         var canvas = this.catalogCanvas;
         var ctx = canvas.getContext("2d");
         // this makes footprint selection easier as the catch-zone is larger
-        //let pastLineWidth = ctx.lineWidth;
 
         let closests = [];
         if (this.overlays) {
             for (var k = 0; k < this.overlays.length; k++) {
                 overlay = this.overlays[k];
-
                 closests = closests.concat(this.closestFootprints(overlay.overlayItems, ctx, x, y));
             }
         }

src/js/shapes/Circle.js

@@ -48,7 +48,7 @@ export let Circle = (function() {
 
         this.color     = options['color']     || undefined;
         this.fillColor = options['fillColor'] || undefined;
-        this.lineWidth = options["lineWidth"] || 2;
+        this.lineWidth = options["lineWidth"] || undefined;
         this.selectionColor = options["selectionColor"] || '#00ff00';
         this.hoverColor = options["hoverColor"] || undefined;
         this.opacity    = options['opacity']   || 1;
@@ -297,6 +297,10 @@ export let Circle = (function() {
             ctx.strokeStyle = baseColor;
         }
 
+        if (!this.lineWidth) {
+            this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
+        }
+
         ctx.lineWidth = this.lineWidth;
         ctx.globalAlpha = this.opacity;
         ctx.beginPath();

src/js/shapes/Ellipse.js

@@ -51,7 +51,7 @@ export let Ellipse = (function() {
 
         this.color = options['color'] || undefined;
         this.fillColor = options['fillColor'] || undefined;
-        this.lineWidth = options["lineWidth"] || 2;
+        this.lineWidth = options["lineWidth"] || undefined;
         this.selectionColor = options["selectionColor"] || '#00ff00';
         this.hoverColor = options["hoverColor"] || undefined;
         this.opacity   = options['opacity']   || 1;
@@ -283,6 +283,10 @@ export let Ellipse = (function() {
             ctx.strokeStyle = baseColor;
         }
 
+        if (!this.lineWidth) {
+            this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
+        }
+
         ctx.lineWidth = this.lineWidth;
         ctx.globalAlpha = this.opacity;
         ctx.beginPath();