final commit

examples/al-cat-galaxy-shape.html

@@ -26,6 +26,7 @@
         limit: 1000,
         //orderBy: 'nb_ref',
         onClick: 'showTable',
+        onlyFootprints: false,
         color: (s) => {
           let coo = A.coo();
           coo.parse(s.data['RAJ2000'] + ' ' + s.data['DEJ2000'])

examples/al-cat-proper-motion.html

@@ -70,10 +70,22 @@
             s.dec + ddec,
           )
         }
+      },
+      () => {
+        aladin.addCatalog(pmCat);
+
+        pmCat.select((s) => {
+          let totalPmSquared = s.data.pmra*s.data.pmra + s.data.pmdec*s.data.pmdec;
+          if (totalPmSquared > 6) {
+            return false;
+          }
+          return totalPmSquared < 3.0;
+        });
       });
-      aladin.addCatalog(pmCat);
   });
 
+  
+
   function rainbowColorMap(value) {
     // Ensure value is within range [0, 1]
     value = Math.max(0, Math.min(1, value));

src/js/A.js

@@ -573,6 +573,10 @@ A.catalogFromURL = function (url, options, successCallback, errorCallback, usePr
     const processVOTable = function (table) {
         let {sources, fields} = table;
         c.setFields(fields);
+        if (fields.s_region) {
+            // for ObsCore tables, show also the (ra, dec) as a source
+            c.onlyFootprints = false;
+        }
         c.addSources(sources);
 
         const s_regionFieldFound = Array.from(Object.keys(fields)).find((f) => f.toLowerCase() === 's_region');

src/js/Catalog.js

@@ -57,6 +57,7 @@ If a function is given, user can return Image, HTMLImageCanvas, HTMLImageElement
 * @property {string} [labelColumn] - The name of the column to be used for the label.
 * @property {string} [labelColor=color] - The color of the source labels.
 * @property {string} [labelFont="10px sans-serif"] - The font for the source labels.
+* @property {boolean} [onlyFootprints=true] - When shapes/footprints are associated to a source (through a shape function given), decide wheter to show the point source as well. Point source is hidden by default
 */
 
 export let Catalog = (function () {
@@ -111,6 +112,9 @@ export let Catalog = (function () {
         this.selectionColor = options.selectionColor || "#00ff00";
         this.hoverColor = options.hoverColor || undefined;
 
+        // when footprints are associated to source, do we need to draw the point source as well ?
+        this.onlyFootprints = options.onlyFootprints ?? true;
+
         this.displayLabel = options.displayLabel || false;
         this.labelColor = options.labelColor || undefined;
 
@@ -131,7 +135,6 @@ export let Catalog = (function () {
         this.sources = [];
         this.ra = [];
         this.dec = [];
-        this.footprints = [];
 
         // create this.cacheCanvas
         // cacheCanvas permet de ne créer le path de la source qu'une fois, et de le réutiliser (cf. http://simonsarris.com/blog/427-increasing-performance-by-caching-paths-on-canvas)
@@ -468,7 +471,6 @@ export let Catalog = (function () {
                 if (successCallback) {
                     successCallback({
                         sources,
-                        //footprints,
                         fields,
                     });
                 }
@@ -550,6 +552,7 @@ export let Catalog = (function () {
 
         // Create all the variant shaped canvas
         this.cacheCanvas = {}
+        this.computeFootprints(this.sources);
 
         this.reportChange();
     };
@@ -592,14 +595,12 @@ export let Catalog = (function () {
             this.dec.push(sources[k].dec);
         }
 
-        this.recomputeFootprints = true;
+        this.computeFootprints(this.sources);
 
         this.reportChange();
     };
 
     Catalog.prototype.computeFootprints = function (sources) {
-        let footprints = [];
-
         if ((this.shapeFn || this.colorFn || this.sourceSizeFn) && !this._shapeOperatesOnCtx) {
             for (let source of sources) {
                 if (this.shapeFn) {
@@ -633,13 +634,10 @@ export let Catalog = (function () {
                                 if (shapes.length == 1 && shapes[0] instanceof Footprint) {
                                     footprint = shapes[0];
                                 } else {
-                                    footprint = new Footprint(shapes, source);
+                                    footprint = new Footprint(shapes);
                                 }
 
-                                footprint.setCatalog(this);
-
-                                // store the footprints
-                                footprints.push(footprint);
+                                source.setFootprint(footprint)
                             }
                         }
                     } catch (e) {
@@ -676,8 +674,6 @@ export let Catalog = (function () {
                 }
             }
         }
-
-        return footprints;
     };
 
     Catalog.prototype.setFields = function (fields) {
@@ -749,17 +745,6 @@ export let Catalog = (function () {
         return this.sources;
     };
 
-    /**
-     * Get all the footprints
-     *
-     * @memberof Catalog
-     *
-     * @returns {Footprint[]} - an array of all the footprints in the catalog object
-     */
-    Catalog.prototype.getFootprints = function () {
-        return this.footprints;
-    };
-
     /**
      * Select all the source catalog
      *
@@ -840,6 +825,32 @@ export let Catalog = (function () {
         this.updateShape();
     };
 
+    /**
+     * Select sources of the catalog matching a given callback
+     *
+     * @memberof Catalog
+     * 
+     * @param {Function} filter - A filter callback to select sources of a catalog.
+     */
+    Catalog.prototype.select = function(filter) {
+        let selection = [];
+        if (typeof filter === "function") {
+            for ( var s of this.sources ) {
+                if (filter(s)) {
+                    selection.push(s)
+                }
+            }
+            this.view.selectObjects([selection]);
+        }
+
+        if (this.view && this.view.aladin.callbacksByEventName) {
+            var callback = this.view.aladin.callbacksByEventName['objectsSelected'] || this.view.aladin.callbacksByEventName['select'];
+            if (callback) {
+                callback([selection]);
+            }
+        }
+    }
+
     /**
      * Set the color of hovered sources
      *
@@ -908,7 +919,7 @@ export let Catalog = (function () {
         this.ra.splice(idx, 1);
         this.dec.splice(idx, 1);
 
-        this.recomputeFootprints = true;
+        this.computeFootprints(this.sources);
 
         this.reportChange();
     };
@@ -923,7 +934,6 @@ export let Catalog = (function () {
         this.sources = [];
         this.ra = [];
         this.dec = [];
-        this.footprints = [];
 
         this.reportChange();
     };
@@ -936,9 +946,6 @@ export let Catalog = (function () {
         // tracé simple
         ctx.strokeStyle = this.color;
 
-        // Draw the footprints first
-        this.drawFootprints(ctx);
-
         if (this.shapeFn) {
             ctx.save();
         }
@@ -961,6 +968,7 @@ export let Catalog = (function () {
 
     Catalog.prototype.drawSources = function (ctx, width, height) {
         let inside = [];
+        let self = this;
 
         if (!this.sources) {
             return;
@@ -975,8 +983,7 @@ export let Catalog = (function () {
             return self.drawSource(s, ctx, width, height)
         };
 
-        let self = this;
-        this.sources.forEach(function (s, idx) {
+        this.sources.forEach((s, idx) => {
             let drawn = false;
             
             if (xy[2 * idx] && xy[2 * idx + 1]) {
@@ -1021,8 +1028,13 @@ export let Catalog = (function () {
             return false;
         }
 
-        if (s.hasFootprint && !s.tooSmallFootprint) {
-            return false;
+        if (s.isFootprint()) {
+            s.footprint.draw(ctx, this.view)
+            s.tooSmallFootprint = s.footprint.isTooSmall();
+
+            if (!s.tooSmallFootprint && this.onlyFootprints) {
+                return true;
+            }
         }
 
         if (s.x <= width && s.x >= 0 && s.y <= height && s.y >= 0) {
@@ -1104,32 +1116,6 @@ export let Catalog = (function () {
         ctx.fillText(label, s.x, s.y);
     };
 
-    Catalog.prototype.drawFootprints = function (ctx) {
-        if (this.recomputeFootprints) {
-            this.footprints = this.computeFootprints(this.sources);
-            this.recomputeFootprints = false;
-        }
-
-        var f;
-        for (let k = 0; k < this.footprints.length; k++) {
-            f = this.footprints[k];
-            
-            if (this.filterFn && f.source) {
-                if(!this.filterFn(f.source)) {
-                    f.hide()
-                } else {
-                    f.show()
-
-                    f.draw(ctx, this.view);
-                    f.source.tooSmallFootprint = f.isTooSmall();
-                }
-            } else {
-                f.draw(ctx, this.view);
-                f.source.tooSmallFootprint = f.isTooSmall();
-            }
-        }
-    };
-
     // callback function to be called when the status of one of the sources has changed
     Catalog.prototype.reportChange = function () {
         this.view && this.view.requestRedraw();
@@ -1145,10 +1131,6 @@ export let Catalog = (function () {
             return;
         }
         this.isShowing = true;
-        // Dispatch to the footprints
-        if (this.footprints) {
-            this.footprints.forEach((f) => f.show());
-        }
 
         this.reportChange();
     };
@@ -1171,10 +1153,6 @@ export let Catalog = (function () {
         ) {
             this.view.popup.hide();
         }
-        // Dispatch to the footprints
-        if (this.footprints) {
-            this.footprints.forEach((f) => f.hide());
-        }
 
         this.reportChange();
     };

src/js/Footprint.js

@@ -37,14 +37,15 @@ import { Utils } from './Utils';
 
 export let Footprint= (function() {
     // constructor
-    let Footprint = function(shapes, source) {
+    //let Footprint = function(shapes, source) {
+    let Footprint = function(shapes) {
         // All graphics overlay have an id
         this.id = 'footprint-' + Utils.uuidv4();
 
-        this.source = source;
+        /*this.source = source;
         if (this.source) {
             this.source.hasFootprint = true;
-        }
+        }*/
 
         this.shapes = [].concat(shapes);
 
@@ -54,7 +55,7 @@ export let Footprint= (function() {
         this.overlay = null;
     };
 
-    Footprint.prototype.setSource = function(source) {
+    /*Footprint.prototype.setSource = function(source) {
         if (this.source) {
             this.source.hasFootprint = false;
         }
@@ -64,23 +65,14 @@ export let Footprint= (function() {
         if (this.source) {
             this.source.hasFootprint = true;
         }
-    }
+    }*/
 
-    Footprint.prototype.setCatalog = function(catalog) {
+    /*Footprint.prototype.setCatalog = function(catalog) {
         if (this.source) {
             this.source.setCatalog(catalog);
-            
-            /*for (var s of this.shapes) {
-                if (!s.color) {
-                    s.setColor(catalog.color);
-                }
-
-                // Selection and hover color are catalog options
-                s.setSelectionColor(catalog.selectionColor);
-                s.setHoverColor(catalog.hoverColor);
-            }*/
+        
         }
-    };
+    };*/
 
     Footprint.prototype.show = function() {
         if (this.isShowing) {
@@ -121,10 +113,10 @@ export let Footprint= (function() {
             return;
         }
 
-        let catalog = this.getCatalog();
+        /*let catalog = this.getCatalog();
         if (catalog) {
             catalog.view && catalog.view.requestRedraw();
-        }
+        }*/
     };
 
     Footprint.prototype.unhover = function() {
@@ -138,11 +130,6 @@ export let Footprint= (function() {
         if (this.overlay) {
             this.overlay.reportChange();
         }
-
-        let catalog = this.getCatalog();
-        if (catalog) {
-            catalog.view && catalog.view.requestRedraw();
-        }
     };
 
     Footprint.prototype.getLineWidth = function() {
@@ -190,7 +177,7 @@ export let Footprint= (function() {
         return hasBeenDrawn;
     };
 
-    Footprint.prototype.actionClicked = function() {
+    /*Footprint.prototype.actionClicked = function() {
         if (this.source) {
             this.source.actionClicked(this);
         }
@@ -202,7 +189,7 @@ export let Footprint= (function() {
         }
 
         this.shapes.forEach((shape) => shape.deselect())
-    };
+    };*/
 
     // If one shape is is stroke then the whole footprint is
     Footprint.prototype.isInStroke = function(ctx, view, x, y) {
@@ -213,16 +200,16 @@ export let Footprint= (function() {
         return this.shapes.every((shape) => shape.isTooSmall);
     };
 
-    Footprint.prototype.getCatalog = function() {
+    /*Footprint.prototype.getCatalog = function() {
         return this.source && this.source.catalog;
-    };
+    };*/
 
     Footprint.prototype.setOverlay = function(overlay) {
         this.overlay = overlay;
     };
 
     Footprint.prototype.intersectsBBox = function(x, y, w, h, view) {
-        if(this.source) {
+        /*if(this.source) {
             let s = this.source;
 
             if (!s.isShowing) {
@@ -250,7 +237,7 @@ export let Footprint= (function() {
             if (c.x >= x && c.x <= x + w && c.y >= y && c.y <= y + h) {
                 return true;
             }
-        }
+        }*/
         return this.shapes.some((shape) => shape.intersectsBBox(x, y, w, h, view));
     };
 

src/js/ProgressiveCat.js

@@ -66,6 +66,9 @@ export let ProgressiveCat = (function() {
         this.selectionColor = options.selectionColor || '#00ff00'; // TODO: to be merged with Catalog
         this.hoverColor = options.hoverColor || this.color;
 
+        // when footprints are associated to source, do we need to draw the point source as well ?
+        this.onlyFootprints = options.onlyFootprints ?? true;
+
 
         // allows for filtering of sources
         this.filterFn = options.filter || undefined; // TODO: do the same for catalog
@@ -75,7 +78,6 @@ export let ProgressiveCat = (function() {
 
         // we cache the list of sources in each healpix tile. Key of the cache is norder+'-'+npix
         this.sourcesCache = new Utils.LRUCache(256);
-        this.footprintsCache = new Utils.LRUCache(256);
 
         //added to allow hips catalogue to also use shape functions
         this.updateShape(options);
@@ -210,8 +212,8 @@ export let ProgressiveCat = (function() {
             newSource.setCatalog(instance);
         }
 
-        let footprints = instance.computeFootprints(sources);
-        return [sources, footprints];
+        instance.computeFootprints(sources);
+        return sources;
     };
 
     ProgressiveCat.prototype = {
@@ -266,9 +268,8 @@ export let ProgressiveCat = (function() {
                 url: self.rootUrl + '/' + 'Norder1/Allsky.tsv',
                 method: 'GET',
                 success: function(tsv) {
-                    let [sources, footprints] = getSources(self, tsv, self.fields);
+                    let sources = getSources(self, tsv, self.fields);
 
-                    self.order1Footprints = footprints;
                     self.order1Sources = sources;
 
                     if (self.order2Sources) {
@@ -286,9 +287,8 @@ export let ProgressiveCat = (function() {
                 url: self.rootUrl + '/' + 'Norder2/Allsky.tsv',
                 method: 'GET',
                 success: function(tsv) {
-                    let [sources, footprints] = getSources(self, tsv, self.fields);
+                    let sources = getSources(self, tsv, self.fields);
 
-                    self.order2Footprints = footprints;
                     self.order2Sources = sources;
 
                     if (self.order1Sources) {
@@ -320,9 +320,8 @@ export let ProgressiveCat = (function() {
 
                     self.fields = getFields(self, xml);
 
-                    let [sources, footprints] = getSources(self, xml.querySelectorAll('CSV').innerText, self.fields);
+                    let sources = getSources(self, xml.querySelectorAll('CSV').innerText, self.fields);
 
-                    self.order2Footprints = footprints
                     self.order2Sources = sources
 
                     if (self.order3Sources) {
@@ -344,8 +343,7 @@ export let ProgressiveCat = (function() {
                 method: 'GET',
                 success: function(text) {
                     let xml = ProgressiveCat.parser.parseFromString(text, "text/xml")
-                    let [sources, footprints] = getSources(self, xml.querySelectorAll('CSV').innerText, self.fields);
-                    self.order3Footprints = footprints
+                    let sources = getSources(self, xml.querySelectorAll('CSV').innerText, self.fields);
                     self.order3Sources = sources
 
                     if (self.order2Sources) {
@@ -414,18 +412,10 @@ export let ProgressiveCat = (function() {
                 }
             }
 
-            let key, sources, footprints;
+            let key, sources;
             this.tilesInView.forEach((tile) => {
                 key = tile[0] + '-' + tile[1];
                 sources = this.sourcesCache.get(key);
-                footprints = this.footprintsCache.get(key);
-
-                if (footprints) {
-                    footprints.forEach((f) => {
-                        f.draw(ctx, this.view)
-                        f.source.tooSmallFootprint = f.isTooSmall();
-                    });
-                }
 
                 if (sources) {
                     this.drawSources(sources, ctx, width, height);
@@ -503,33 +493,6 @@ export let ProgressiveCat = (function() {
             
             return ret;
         },
-
-        getFootprints: function() {
-            var ret = [];
-            if (this.order1Footprints) {
-                ret = ret.concat(this.order1Footprints);
-            }
-            if (this.order2Footprints) {
-                ret = ret.concat(this.order2Footprints);
-            }
-            if (this.order3Footprints) {
-                ret = ret.concat(this.order3Footprints);
-            }
-            if (this.tilesInView) {
-                var footprints, key, t;
-                for (var k=0; k < this.tilesInView.length; k++) {
-                    t = this.tilesInView[k];
-                    key = t[0] + '-' + t[1];
-                    footprints = this.footprintsCache.get(key);
-
-                    if (footprints) {
-                        ret = ret.concat(footprints);
-                    }
-                }
-            }
-            
-            return ret;
-        },
         
         deselectAll: function() {
             if (this.order1Sources) {
@@ -558,11 +521,6 @@ export let ProgressiveCat = (function() {
                 for (var k=0; k<sources.length; k++) {
                     sources[k].deselect();
                 }
-
-                var footprints = this.footprintsCache[key];
-                for (var k=0; k<footprints.length; k++) {
-                    footprints[k].deselect();
-                }
             }
         },
 
@@ -649,17 +607,15 @@ export let ProgressiveCat = (function() {
                             method: 'GET',
                             //dataType: 'jsonp',
                             success: function(tsv) {
-                                let [sources, footprints] = getSources(self, tsv, self.fields);
+                                let sources = getSources(self, tsv, self.fields);
 
                                 self.sourcesCache.set(key, sources);
-                                self.footprintsCache.set(key, footprints);
 
                                 self.view.requestRedraw();
                             },
                             error: function() {
                                 // on suppose qu'il s'agit d'une erreur 404
                                 self.sourcesCache.set(key, []);
-                                self.footprintsCache.set(key, []);
                             }
                         });
                     })(this, t[0], t[1]);

src/js/Selector.js

@@ -63,12 +63,6 @@ export class Selector {
         })
     }
 
-    setMode(mode) {
-        if (mode) {
-            
-        }
-    }
-
     start(mode, callback) {
         this.view.aladin.addStatusBarMessage({
             id: 'selector',
@@ -112,9 +106,9 @@ export class Selector {
             return;
         }
 
+        const bbox = selection.bbox();
         var objList = [];
         var cat, sources, s;
-        var overlayItems, f;
         var objListPerCatalog = [];
         if (view.catalogs) {
             for (var k = 0; k < view.catalogs.length; k++) {
@@ -124,28 +118,27 @@ export class Selector {
                     continue;
                 }
                 sources = cat.getSources();
+                
                 for (var l = 0; l < sources.length; l++) {
                     s = sources[l];
-                    if (!s.isShowing || !s.x || !s.y || s.tooSmallFootprint === false) {
+
+                    if (!s.isShowing || !s.x || !s.y) {
                         continue;
                     }
+
+                    // footprints
+                    if (s.isFootprint() && s.tooSmallFootprint === false) {
+                        if (s.footprint.intersectsBBox(bbox.x, bbox.y, bbox.w, bbox.h, view)) {
+                            objListPerCatalog.push(s);
+                        }
+
+                        continue;
+                    }
+
                     if (selection.contains(s)) {
                         objListPerCatalog.push(s);
                     }
                 }
-                // footprints
-                overlayItems = cat.getFootprints();
-
-                if (overlayItems) {
-                    const {x, y, w, h} = selection.bbox();
-                    for (var l = 0; l < overlayItems.length; l++) {
-                        f = overlayItems[l];
-
-                        if (f.intersectsBBox(x, y, w, h, view)) {
-                            objListPerCatalog.push(f);
-                        }
-                    }
-                }
 
                 if (objListPerCatalog.length > 0) {
                     objList.push(objListPerCatalog);
@@ -155,7 +148,6 @@ export class Selector {
         }
 
         if (view.overlays) {
-            const {x, y, w, h} = selection.bbox();
             for (var k = 0; k < view.overlays.length; k++) {
                 let overlay = view.overlays[k];
                 if (!overlay.isShowing) {
@@ -168,7 +160,7 @@ export class Selector {
                         continue;
                     }
 
-                    if (o.intersectsBBox(x, y, w, h, view)) {
+                    if (o.intersectsBBox(bbox.x, bbox.y, bbox.w, bbox.h, view)) {
                         objList.push([o]);
                     }
                 }

src/js/Source.js

@@ -49,6 +49,10 @@ export let Source = (function() {
         this.isHovered = false;
     };
 
+    Source.prototype.setFootprint = function(footprint) {
+        this.footprint = footprint;
+    }
+
     Source.prototype.setCatalog = function(catalog) {
         this.catalog = catalog;
     };
@@ -81,8 +85,13 @@ export let Source = (function() {
         if (this.isSelected) {
             return;
         }
+
         this.isSelected = true;
 
+        if (this.footprint) {
+            this.footprint.select();
+        }
+
         if (this.catalog) {
             this.catalog.reportChange();
         }
@@ -92,7 +101,13 @@ export let Source = (function() {
         if (! this.isSelected) {
             return;
         }
+
         this.isSelected = false;
+
+        if (this.footprint) {
+            this.footprint.deselect();
+        }
+
         if (this.catalog) {
             this.catalog.reportChange();
         }
@@ -102,7 +117,13 @@ export let Source = (function() {
         if (this.isHovered) {
             return;
         }
+
         this.isHovered = true;
+
+        if (this.footprint) {
+            this.footprint.hover();
+        }
+
         if (this.catalog) {
             this.catalog.reportChange();
         }
@@ -113,6 +134,11 @@ export let Source = (function() {
             return;
         }
         this.isHovered = false;
+
+        if (this.footprint) {
+            this.footprint.unhover();
+        }
+
         if (this.catalog) {
             this.catalog.reportChange();
         }
@@ -128,6 +154,10 @@ export let Source = (function() {
 
     Source.prototype.setColor = function(color) {
         this.color = color;
+
+        if (this.footprint) {
+            this.footprint.setColor(color);
+        }
     }
 
     Source.prototype.setSize = function(size) {
@@ -185,13 +215,17 @@ export let Source = (function() {
     };
 
     Source.prototype.isFootprint = function() {
-        return false;
+        return this.footprint !== undefined && this.footprint !== null;
     }
 
     Source.prototype.actionOtherObjectClicked = function() {
         if (this.catalog && this.catalog.onClick) {
             this.deselect();
         }
+
+        if (this.footprint) {
+            this.footprint.deselect()
+        }
     };
 
     return Source;

src/js/View.js

@@ -1141,6 +1141,7 @@ export let View = (function () {
                     view.setCursor('pointer');
 
                     for (let o of closests) {
+
                         if (typeof objHoveredFunction === 'function' && (!lastHoveredObject || !lastHoveredObject.includes(o))) {
                             var ret = objHoveredFunction(o, xymouse);
                         }
@@ -2206,7 +2207,7 @@ export let View = (function () {
                         continue;
                     }
 
-                    if (s.hasFootprint === true && s.tooSmallFootprint === false) {
+                    if (s.isFootprint() && cat.onlyFootprints && !s.tooSmallFootprint) {
                         continue;
                     }
 
@@ -2233,19 +2234,16 @@ export let View = (function () {
         let closests = [];
 
         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);
+            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;
     };
 
@@ -2269,48 +2267,50 @@ export let View = (function () {
         if (this.catalogs) {
             for (var k = 0; k < this.catalogs.length; k++) {
                 let catalog = this.catalogs[k];
-                let footprints = catalog.getFootprints();
 
-                closests = closests.concat(this.closestFootprints(footprints, ctx, x, y));
+                for (var s of catalog.getSources()) {
+                    if (s.isFootprint() && !s.tooSmallFootprint) {
+                        let footprint = s.footprint;
+                        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(s);
+                        }
+                        footprint.setLineWidth(originLineWidth);
+                    }
+                }
             }
         }
 
         if (!this.objLookup) {
-            //ctx.lineWidth = pastLineWidth;
             return null;
         }
 
-        //ctx.lineWidth = pastLineWidth;
-
         var dist = Number.POSITIVE_INFINITY;
         var closest = null;
-        //for (var r = 0; r <= maxRadius; r++) {
-            //closest = dist = null;
-            for (var dx = -maxRadius; dx <= maxRadius; dx++) {
-                if (!this.objLookup[x + dx]) {
-                    continue;
-                }
-                for (var dy = -maxRadius; dy <= maxRadius; dy++) {
-                    if (this.objLookup[x + dx][y + dy]) {
-                        var d = dx * dx + dy * dy;
-                        if (d < dist) {
-                            dist = d;
-                            closest = this.objLookup[x + dx][y + dy]
-                        } else if (d == dist) {
-                            closest.concat(this.objLookup[x + dx][y + dy])
-                        }
+
+        for (var dx = -maxRadius; dx <= maxRadius; dx++) {
+            if (!this.objLookup[x + dx]) {
+                continue;
+            }
+            for (var dy = -maxRadius; dy <= maxRadius; dy++) {
+                if (this.objLookup[x + dx][y + dy]) {
+                    var d = dx * dx + dy * dy;
+                    if (d < dist) {
+                        dist = d;
+                        closest = this.objLookup[x + dx][y + dy]
+                    } else if (d == dist) {
+                        closest.concat(this.objLookup[x + dx][y + dy])
                     }
                 }
             }
+        }
 
-            if (closest && closest.length > 0) {
-                closests = closests.concat(closest)
-            }
-
-            /*if (closest) {
-                closests = closests.concat(closest);
-            }*/
-        //}
+        if (closest && closest.length > 0) {
+            closests = closests.concat(closest)
+        }
 
         if (closests.length === 0)
             return null;

src/js/gui/Box/StackBox.js

@@ -83,6 +83,7 @@ export class OverlayStackBox extends Box {
                 sourceSize: 8,
                 color: "#318d80",
                 hoverColor: 'red',
+                onlyFootprints: false,
                 onClick: "showTable",
                 shape: (s) => {
                     let galaxy = ["Seyfert","Seyfert_1", "Seyfert_2","LSB_G","PartofG","RadioG","Gin","GinPair","HII_G","LensedG","BClG","BlueCompG","EmG","GinCl","GinGroup","StarburstG","LINER","AGN", "Galaxy", "GtowardsGroup", "GtowardsCl", "BrightestCG"].some((n) => s.data.main_type.indexOf(n) >= 0);

src/js/shapes/Ellipse.js

@@ -291,6 +291,7 @@ export let Ellipse = (function() {
         ctx.globalAlpha = this.opacity;
         ctx.beginPath();
 
+        this.aPixels = px_per_deg * this.a;
         ctx.ellipse(originScreen[0], originScreen[1], px_per_deg * this.a, px_per_deg * this.b, theta, 0, 2*Math.PI, false);
         if (!noStroke) {
             if (this.fillColor) {
@@ -344,9 +345,31 @@ export let Ellipse = (function() {
         return ctx.isPointInStroke(x, y);
     };
 
-    Ellipse.prototype.intersectsBBox = function(x, y, w, h) {
-        // todo
-        return false;
+    Ellipse.prototype.intersectsBBox = function(x, y, w, h, view) {
+        // TODO: currently the same as Circle where radius = a.
+        var centerXyview = view.aladin.world2pix(this.centerRaDec[0], this.centerRaDec[1]);
+        if (!centerXyview) {
+            return false;
+        }
+
+        // compute the absolute distance between the middle of the bbox
+        // and the center of the circle 
+        const circleDistance = {
+            x: Math.abs(centerXyview[0] - (x + w/2)),
+            y: Math.abs(centerXyview[1] - (y + h/2))
+        };
+
+        if (circleDistance.x > (w/2 + this.aPixels)) { return false; }
+        if (circleDistance.y > (h/2 + this.aPixels)) { return false; }
+
+        if (circleDistance.x <= (w/2)) { return true; }
+        if (circleDistance.y <= (h/2)) { return true; }
+
+        const dx = circleDistance.x - w/2;
+        const dy = circleDistance.y - h/2;
+
+        const cornerDistanceSquared = dx*dx + dy*dy;
+        return (cornerDistanceSquared <= (this.aPixels*this.aPixels));
     };
     
     return Ellipse;

src/js/shapes/Vector.js

@@ -175,8 +175,29 @@ export let Vector = (function() {
 
         isInStroke: Ellipse.prototype.isInStroke,
 
-        intersectsBBox: function(x, y, w, h) {
-            // todo
+        lineIntersectsBox: Polyline.prototype.lineIntersectsBox,
+
+
+        intersectsBBox: function(x, y, w, h, view) {
+            let p1 = [this.ra1, this.dec1];
+            let p2 = [this.ra2, this.dec2];
+
+            let xy1 = view.aladin.world2pix(p1[0], p1[1]);
+            let xy2 = view.aladin.world2pix(p2[0], p2[1]);
+
+            if (!xy1 || !xy2) {
+                return false;
+            }
+
+            xy1 = {x: xy1[0], y: xy1[1]};
+            xy2 = {x: xy2[0], y: xy2[1]};
+    
+            // Check if line segment intersects with the bounding box
+            if (this.lineIntersectsBox(xy1, xy2, x, y, w, h)) {
+                return true;
+            }
+
+            return false;
         },
     };