fix 26 channel color offset

2025-12-25 20:34:50 -08:00 · 2025-08-28 17:48:48 +02:00
22 changed files with 337 additions and 447 deletions
--- a/examples/al-cat-galaxy-shape.html
+++ b/examples/al-cat-galaxy-shape.html
@@ -26,17 +26,8 @@
        limit: 1000,
        //orderBy: 'nb_ref',
        onClick: 'showTable',
-        onlyFootprints: false,
-        color: (s) => {
-          let coo = A.coo();
-          coo.parse(s.data['RAJ2000'] + ' ' + s.data['DEJ2000'])
-
-          let a = (0.1 * Math.pow(10, +s.data.logD25)) / 60;
-          let b = (1.0 / Math.pow(10, +s.data.logR25)) * a
-
-          return `rgb(${s.data["logR25"]*255.0}, ${s.data["logR25"]*255.0}, 255)`
-        },
-        hoverColor: 'red',
+        color: 'yellow',
+        hoverColor: 'blue',
        shape: (s) => {
          let coo = A.coo();
          coo.parse(s.data['RAJ2000'] + ' ' + s.data['DEJ2000'])
--- a/examples/al-cat-proper-motion.html
+++ b/examples/al-cat-proper-motion.html
@@ -31,21 +31,15 @@
        hoverColor: 'yellow',
        selectionColor: 'white',
        // Footprint associated to sources
-        color: (s) => {
-          // discard drawing a vector for big pm
-          let totalPmSquared = s.data.pmra*s.data.pmra + s.data.pmdec*s.data.pmdec;
-          if (totalPmSquared > 6) {
-            return;
-          }
-
-          return rainbowColorMap((totalPmSquared - 2.5) / 2)
-        },
        shape: (s) => {
          // discard drawing a vector for big pm
          let totalPmSquared = s.data.pmra*s.data.pmra + s.data.pmdec*s.data.pmdec;
          if (totalPmSquared > 6) {
            return;
          }
+
+          let color = rainbowColorMap((totalPmSquared - 2.5) / 2)
+
          // Compute the mean of pm over the catalog sources
          if (!pmraMean || !pmdecMean) {
            pmraMean = 0, pmdecMean = 0;
@@ -68,24 +62,13 @@
            s.dec,
            s.ra + dra,
            s.dec + ddec,
+            {color}
          )
        }
-      },
-      () => {
-        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));
--- a/src/core/src/app.rs
+++ b/src/core/src/app.rs
@@ -844,12 +844,12 @@ impl App {
            );*/
            moc.draw(camera, projection, shaders)?;

-            /*gl.blend_func_separate(
+            gl.blend_func_separate(
                WebGl2RenderingContext::SRC_ALPHA,
                WebGl2RenderingContext::ONE,
                WebGl2RenderingContext::ONE,
                WebGl2RenderingContext::ONE,
-            );*/
+            );
            grid.draw(camera, projection, shaders)?;
            //        Ok(())
            //    },
--- a/src/core/src/renderable/grid/mod.rs
+++ b/src/core/src/renderable/grid/mod.rs
@@ -198,15 +198,14 @@ impl ProjetedGrid {
        if self.enabled {
            let fov = camera.get_field_of_view();
            let bbox = fov.get_bounding_box();
-            //let max_dim_px = camera.get_width().max(camera.get_height()) as f64;
-            //let step_line_px = max_dim_px * 0.15;
-
-            let aspect = camera.get_aspect() as f64;
+            let max_dim_px = camera.get_width().max(camera.get_height()) as f64;
+            let step_line_px = max_dim_px * 0.2;

            // update meridians
            self.meridians = {
                // Select the good step with a binary search
-                let step_lon_precised = bbox.get_lon_size() * 0.15;
+                let step_lon_precised =
+                    bbox.get_lon_size() * step_line_px / (camera.get_width() as f64);
                let step_lon = select_fixed_step(step_lon_precised);

                let decimal_lon_prec = step_lon.to_degrees().log10().abs().ceil() as u8;
@@ -236,7 +235,8 @@ impl ProjetedGrid {
            };

            self.parallels = {
-                let step_lat_precised = aspect * bbox.get_lat_size() * 0.15;
+                let step_lat_precised =
+                    bbox.get_lat_size() * step_line_px / (camera.get_height() as f64);
                let step_lat = select_fixed_step(step_lat_precised);

                let decimal_lat_prec = step_lat.to_degrees().log10().abs().ceil() as u8;
@@ -349,7 +349,7 @@ const GRID_STEPS: &[f64] = &[
    0.08726647,
    0.17453293,
    0.34906585,
-    std::f64::consts::FRAC_PI_6,
+    std::f64::consts::FRAC_PI_4,
 ];

 fn select_fixed_step(fov: f64) -> f64 {
--- a/src/glsl/webgl2/line/base.frag
+++ b/src/glsl/webgl2/line/base.frag
@@ -1,25 +1,17 @@
 #version 300 es

-precision highp float;
-
+precision lowp float;
 out vec4 color;
-in vec2 l;
+in float l;

 uniform vec4 u_color;
-uniform float u_thickness;
-uniform float u_width;
-uniform float u_height;

 void main() {
-    if (l.x > 0.05) {
+    // Multiply vertex color with texture color (in linear space).
+    // Linear color is written and blended in Framebuffer and converted to sRGB later
+    if (l > 0.05) {
        discard;
    } else {
        color = u_color;
-
-        // distance from line to compute the anti-aliasing
-        float dist = abs((u_thickness + 2.0) * l.y);
-
-        float half_thickness = (u_thickness + 2.0) * 0.5;
-        color.a = color.a * (1.0 - smoothstep(half_thickness - 1.0, half_thickness, dist));
    }
 }
--- a/src/glsl/webgl2/line/inst_lonlat.vert
+++ b/src/glsl/webgl2/line/inst_lonlat.vert
@@ -11,7 +11,7 @@ uniform float u_width;
 uniform float u_height;
 uniform float u_thickness;

-out vec2 l;
+out float l;

 #include ../projection/projection.glsl;

@@ -27,6 +27,7 @@ void main() {
    vec2 p_b_clip = proj(p_b_w);

    vec2 da = p_a_clip - p_b_clip;
+    l = dot(da, da);

    vec2 p_a_ndc = p_a_clip / (ndc_to_clip * czf);
    vec2 p_b_ndc = p_b_clip / (ndc_to_clip * czf);
@@ -36,12 +37,6 @@ void main() {
    vec2 y_b = normalize(vec2(-x_b.y, x_b.x));

    float ndc2pix = 2.0 / u_width;
-
-    vec2 p_ndc_x = x_b * vertex.x;
-    vec2 p_ndc_y = (u_thickness + 2.0) * y_b * vertex.y * vec2(1.0, u_width/u_height) * ndc2pix;
-
-    vec2 p_ndc = p_a_ndc + p_ndc_x + p_ndc_y;
+    vec2 p_ndc = p_a_ndc + x_b * vertex.x + u_thickness * y_b * vertex.y * vec2(1.0, u_width/u_height) * ndc2pix;
    gl_Position = vec4(p_ndc, 0.f, 1.f);
-
-    l = vec2(dot(da, da), vertex.y);
 }
--- a/src/glsl/webgl2/line/inst_ndc.vert
+++ b/src/glsl/webgl2/line/inst_ndc.vert
@@ -4,7 +4,7 @@ layout (location = 0) in vec2 p_a;
 layout (location = 1) in vec2 p_b;
 layout (location = 2) in vec2 vertex;

-out vec2 l;
+out float l;

 uniform float u_width;
 uniform float u_height;
@@ -16,7 +16,6 @@ void main() {

    float ndc2pix = 2.0 / u_width;

-    vec2 p = p_a + x_b * vertex.x + (u_thickness + 2.0) * y_b * vertex.y * vec2(1.0, u_width/u_height) * ndc2pix;
+    vec2 p = p_a + x_b * vertex.x + u_thickness * y_b * vertex.y * vec2(1.0, u_width/u_height) * ndc2pix;
    gl_Position = vec4(p, 0.f, 1.f);
-    l = vec2(0.0, vertex.y);
 }
--- a/src/js/A.js
+++ b/src/js/A.js
@@ -573,10 +573,6 @@ 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');
--- a/src/js/Aladin.js
+++ b/src/js/Aladin.js
@@ -736,7 +736,7 @@ export let Aladin = (function () {
        gridOptions: {
            enabled: false,
            showLabels: true,
-            thickness: 1,
+            thickness: 2,
            labelSize: 15,
        },
        projection: "SIN",
--- a/src/js/Catalog.js
+++ b/src/js/Catalog.js
@@ -36,13 +36,13 @@ import A from "./A.js";
 import { Footprint } from "./Footprint.js";

 /**
-* Represents options for configuring a catalog.
-*
-* @typedef {Object} CatalogOptions
+ * Represents options for configuring a catalog.
+ *
+ * @typedef {Object} CatalogOptions
 * @property {string} url - The URL of the catalog.
 * @property {string} [name="catalog"] - The name of the catalog.
-* @property {string|Function} [color] - The color associated with the catalog. A function can be given similar to `shape`.
-* @property {number|Function} [sourceSize=8] - The size of the sources in the catalog. A function can be given similar to `shape`.
+* @property {string} [color] - The color associated with the catalog.
+* @property {number} [sourceSize=8] - The size of the sources in the catalog.
 * @property {string|Function|Image|HTMLCanvasElement|HTMLImageElement} [shape="square"] - The shape of the sources (can be, "square", "circle", "plus", "cross", "rhomb", "triangle").
 If a function is given, user can return Image, HTMLImageCanvas, HTMLImageElement or a string being in ["square", "circle", "plus", "cross", "rhomb", "triangle"]. This allows to define different shape for a specific catalog source.
 * @property {number} [limit] - The maximum number of sources to display.
@@ -57,7 +57,6 @@ 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 () {
@@ -96,10 +95,6 @@ export let Catalog = (function () {
        this.markerSize = options.sourceSize || 12;
        this.selectSize = this.sourceSize;
        this.shape = options.shape || "square";
-        if (typeof this.shape === "function") {
-            this.shapeFn = this.shape;
-            this.shape = "custom";
-        }
        this.maxNbSources = options.limit || undefined;
        this.onClick = options.onClick || undefined;
        this.readOnly = options.readOnly || false;
@@ -110,14 +105,10 @@ export let Catalog = (function () {
        // allows for filtering of sources
        this.filterFn = options.filter || undefined; // TODO: do the same for catalog
        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.hoverColor = options.hoverColor || this.color;

        this.displayLabel = options.displayLabel || false;
-        this.labelColor = options.labelColor || undefined;
-
+        this.labelColor = options.labelColor || this.color;
        this.labelFont = options.labelFont || "10px sans-serif";
        if (this.displayLabel) {
            this.labelColumn = options.labelColumn;
@@ -135,6 +126,7 @@ 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)
@@ -471,6 +463,7 @@ export let Catalog = (function () {
                if (successCallback) {
                    successCallback({
                        sources,
+                        //footprints,
                        fields,
                    });
                }
@@ -482,18 +475,6 @@ export let Catalog = (function () {
        );
    };

-    Catalog.prototype.getCacheCanvas = function(shape, color, size) {
-        const key = `${shape}_${size}_${color}`;
-        if (!(key in this.cacheCanvas)) {
-            this.cacheCanvas[key] = Catalog.createShape(
-                shape,
-                color,
-                size
-            )
-        }
-        return this.cacheCanvas[key];
-    };
-
    /**
     * Set the shape of the sources
     *
@@ -512,18 +493,16 @@ export let Catalog = (function () {
        options = options || {};
        this.color = options.color || this.color || Color.getNextColor();
        this.selectionColor = options.selectionColor || this.selectionColor || Color.getNextColor();
-        this.hoverColor = options.hoverColor || this.hoverColor || undefined;
+        this.hoverColor = options.hoverColor || this.hoverColor || this.color;
        this.sourceSize = options.sourceSize || this.sourceSize || 6;
        this.shape = options.shape || this.shape || "square";
-        if (typeof this.shape === "function") {
-            this.shapeFn = this.shape;
-            this.shape = "custom"
-        }
        this.onClick = options.onClick || this.onClick;

-        if (this.shapeFn) {
+        this._shapeIsFunction = false; // if true, the shape is a function drawing on the canvas
+        if (typeof this.shape === "function") {
+            this._shapeIsFunction = true;
            // A shape function that operates on the canvas gives the ctx and fov params
-            this._shapeOperatesOnCtx = this.shapeFn.length > 1;
+            this._shapeOperatesOnCtx = this.shape.length > 1;
            // do not need to compute any canvas

            // there is a possibility that the user gives a function returning shape objects such as
@@ -538,21 +517,31 @@ export let Catalog = (function () {
            this._shapeIsImageOrCanvas = true;
        }

-        if (typeof this.color === "function") {
-            this.colorFn = this.color;
-            this.color = "custom"
-        }
-
-        if (typeof this.sourceSize === "function") {
-            this.sourceSizeFn = this.sourceSize;
-            this.sourceSize = "custom";
-        } else {
-            this.selectSize = this.sourceSize + 2;
-        }
-
+        this.selectSize = this.sourceSize + 2;
        // Create all the variant shaped canvas
        this.cacheCanvas = {}
-        this.computeFootprints(this.sources);
+        this.cacheHoverCanvas = {}
+        this.cacheSelectCanvas = {}
+
+        for (var shape of Catalog.shapes) {
+            this.cacheCanvas[shape] = Catalog.createShape(
+                shape,
+                this.color,
+                this.sourceSize
+            )
+
+            this.cacheHoverCanvas[shape] = Catalog.createShape(
+                shape,
+                this.hoverColor,
+                this.selectSize
+            );
+
+            this.cacheSelectCanvas[shape] = Catalog.createShape(
+                shape,
+                this.selectionColor,
+                this.selectSize
+            );
+        }

        this.reportChange();
    };
@@ -595,85 +584,61 @@ export let Catalog = (function () {
            this.dec.push(sources[k].dec);
        }

-        this.computeFootprints(this.sources);
+        this.recomputeFootprints = true;

        this.reportChange();
    };

    Catalog.prototype.computeFootprints = function (sources) {
-        if ((this.shapeFn || this.colorFn || this.sourceSizeFn) && !this._shapeOperatesOnCtx) {
+        let footprints = [];
+
+        if (this._shapeIsFunction && !this._shapeOperatesOnCtx) {
            for (let source of sources) {
-                if (this.shapeFn) {
-                    try {
-                        let shapes = this.shapeFn(source);
-                        if (shapes) {
-                            shapes = [].concat(shapes);
+                try {
+                    let shapes = this.shape(source);
+                    if (shapes) {
+                        shapes = [].concat(shapes);

-                            // Result of the func is an image/canvas
-                            if (shapes.length == 1 && (shapes[0] instanceof Image || shapes[0] instanceof HTMLCanvasElement)) {
-                                source.setImage(shapes[0]);
-                            // Result of the func is shape label ('cross', 'plus', ...)
-                            } else if (shapes.length == 1 && typeof shapes[0] === "string") {
-                                // If not found, select the square canvas
-                                let shape = shapes[0] || "square";
-                                source.setShape(shape)
-                            // Result of the shape is a set of shapes or a footprint
-                            } else {
-                                let color = (this.colorFn && this.colorFn(source)) || this.color;
-                                let hoverColor = this.hoverColor || color;
-
-                                for (var shape of shapes) {
-                                    // 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(color)
-                                    shape.setSelectionColor(this.selectionColor);
-                                    shape.setHoverColor(hoverColor);
-                                }
-
-                                let footprint;
-                                if (shapes.length == 1 && shapes[0] instanceof Footprint) {
-                                    footprint = shapes[0];
-                                } else {
-                                    footprint = new Footprint(shapes);
-                                }
-
-                                source.setFootprint(footprint)
+                        // Result of the func is an image/canvas
+                        if (shapes.length == 1 && (shapes[0] instanceof Image || shapes[0] instanceof HTMLCanvasElement)) {
+                            source.setImage(shapes[0]);
+                        // Result of the func is shape label ('cross', 'plus', ...)
+                        } else if (shapes.length == 1 && typeof shapes[0] === "string") {
+                            // If not found, select the square canvas
+                            let shape = shapes[0] || "square";
+                            source.setShape(shape)
+                        // Result of the shape is a set of shapes or a footprint
+                        } else {
+                            for (var shape of shapes) {
+                                // 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);
                            }
-                        }
-                    } catch (e) {
-                        // do not create the footprint
-                        console.warn("Shape computation error");
-                        continue;
-                    }
-                }

-                if (this.colorFn) {
-                    try {
-                        let color = this.colorFn(source);
-                        if (color) {
-                            source.setColor(color);
-                        }
-                    } catch (e) {
-                        // do not create the footprint
-                        console.warn("Source color computation error");
-                        continue;
-                    }
-                }
+                            let footprint;
+                            if (shapes.length == 1 && shapes[0] instanceof Footprint) {
+                                footprint = shapes[0];
+                            } else {
+                                footprint = new Footprint(shapes, source);
+                            }

-                if (this.sourceSizeFn) {
-                    try {
-                        let size = this.sourceSizeFn(source);
-                        if (size) {
-                            source.setSize(size);
+                            footprint.setCatalog(this);
+
+                            // store the footprints
+                            footprints.push(footprint);
                        }
-                    } catch (e) {
-                        // do not create the footprint
-                        console.warn("Source size computation error");
-                        continue;
                    }
+                } catch (e) {
+                    // do not create the footprint
+                    console.warn("Return of shape function could not be interpreted as a footprint");
+                    continue;
                }
            }
        }
+
+        return footprints;
    };

    Catalog.prototype.setFields = function (fields) {
@@ -745,6 +710,17 @@ 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
     *
@@ -825,32 +801,6 @@ 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
     *
@@ -919,7 +869,7 @@ export let Catalog = (function () {
        this.ra.splice(idx, 1);
        this.dec.splice(idx, 1);

-        this.computeFootprints(this.sources);
+        this.recomputeFootprints = true;

        this.reportChange();
    };
@@ -934,6 +884,7 @@ export let Catalog = (function () {
        this.sources = [];
        this.ra = [];
        this.dec = [];
+        this.footprints = [];

        this.reportChange();
    };
@@ -946,21 +897,24 @@ export let Catalog = (function () {
        // tracé simple
        ctx.strokeStyle = this.color;

-        if (this.shapeFn) {
+        // Draw the footprints first
+        this.drawFootprints(ctx);
+
+        if (this._shapeIsFunction) {
            ctx.save();
        }

        const drawnSources = this.drawSources(ctx, width, height);

-        if (this.shapeFn) {
+        if (this._shapeIsFunction) {
            ctx.restore();
        }

        // Draw labels
        if (this.displayLabel) {
+            ctx.fillStyle = this.labelColor;
            ctx.font = this.labelFont;
            drawnSources.forEach((s) => {
-                ctx.fillStyle = this.labelColor || s.color || this.color;
                this.drawSourceLabel(s, ctx);
            });
        }
@@ -968,7 +922,6 @@ export let Catalog = (function () {

    Catalog.prototype.drawSources = function (ctx, width, height) {
        let inside = [];
-        let self = this;

        if (!this.sources) {
            return;
@@ -983,7 +936,8 @@ export let Catalog = (function () {
            return self.drawSource(s, ctx, width, height)
        };

-        this.sources.forEach((s, idx) => {
+        let self = this;
+        this.sources.forEach(function (s, idx) {
            let drawn = false;
            
            if (xy[2 * idx] && xy[2 * idx + 1]) {
@@ -1028,18 +982,13 @@ export let Catalog = (function () {
            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.hasFootprint && !s.tooSmallFootprint) {
+            return false;
        }

        if (s.x <= width && s.x >= 0 && s.y <= height && s.y >= 0) {
            if (this._shapeOperatesOnCtx) {
-                this.shapeFn(s, ctx, this.view.getViewParams());
+                this.shape(s, ctx, this.view.getViewParams());
            } else if (this._shapeIsImageOrCanvas) {
                // Global catalog shape set as an Image, an HTMLCanvasElement or HTMLImageElement
                let canvas = this.shape;
@@ -1062,34 +1011,23 @@ export let Catalog = (function () {
                    s.y - this.sourceSize / 2
                );
            } else if (s.isSelected) {
-                let selectSize = (s.size || this.sourceSize) + 2;
-                let shape = s.shape || this.shape || "square"
-                let color = this.selectionColor;
+                let cacheSelectCanvas = this.cacheSelectCanvas[s.shape || this.shape] || this.cacheSelectCanvas["square"];

-                let cacheSelectedCanvas = this.getCacheCanvas(shape, color, selectSize)
                ctx.drawImage(
-                    cacheSelectedCanvas,
-                    s.x - cacheSelectedCanvas.width / 2,
-                    s.y - cacheSelectedCanvas.height / 2
+                    cacheSelectCanvas,
+                    s.x - this.selectSize / 2,
+                    s.y - this.selectSize / 2
                );
            } else if (s.isHovered) {
-                let selectSize = (s.size || this.sourceSize) + 2;
-                let shape = s.shape || this.shape || "square"
-                let color = this.hoverColor || s.color || this.color;
+                let cacheHoverCanvas = this.cacheHoverCanvas[s.shape || this.shape] || this.cacheHoverCanvas["square"];

-                let cacheHoverCanvas = this.getCacheCanvas(shape, color, selectSize)
                ctx.drawImage(
                    cacheHoverCanvas,
-                    s.x - cacheHoverCanvas.width / 2,
-                    s.y - cacheHoverCanvas.height / 2
+                    s.x - this.selectSize / 2,
+                    s.y - this.selectSize / 2
                );
            } else {
-                let shape = s.shape || this.shape || "square"
-                let size = s.size || this.sourceSize;
-                let color = s.color || this.color;
-
-                let cacheCanvas = this.getCacheCanvas(shape, color, size)
-                
+                let cacheCanvas = this.cacheCanvas[s.shape || this.shape] || this.cacheCanvas["square"];
                ctx.drawImage(
                    cacheCanvas,
                    s.x - cacheCanvas.width / 2,
@@ -1116,6 +1054,32 @@ 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();
@@ -1131,6 +1095,10 @@ export let Catalog = (function () {
            return;
        }
        this.isShowing = true;
+        // Dispatch to the footprints
+        if (this.footprints) {
+            this.footprints.forEach((f) => f.show());
+        }

        this.reportChange();
    };
@@ -1153,6 +1121,10 @@ export let Catalog = (function () {
        ) {
            this.view.popup.hide();
        }
+        // Dispatch to the footprints
+        if (this.footprints) {
+            this.footprints.forEach((f) => f.hide());
+        }

        this.reportChange();
    };
--- a/src/js/DefaultActionsForContextMenu.js
+++ b/src/js/DefaultActionsForContextMenu.js
@@ -45,6 +45,7 @@ export let DefaultActionsForContextMenu = (function () {
        const a = aladinInstance;

        const selectObjects = (selection) => {
+            console.log(selection)
            a.view.selectObjects(selection);
        };
        return [
--- a/src/js/Footprint.js
+++ b/src/js/Footprint.js
@@ -37,15 +37,14 @@ import { Utils } from './Utils';

 export let Footprint= (function() {
    // constructor
-    //let Footprint = function(shapes, source) {
-    let Footprint = function(shapes) {
+    let Footprint = function(shapes, source) {
        // 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);

@@ -55,7 +54,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;
        }
@@ -65,14 +64,23 @@ 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) {
@@ -113,10 +121,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() {
@@ -130,6 +138,11 @@ 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() {
@@ -177,7 +190,7 @@ export let Footprint= (function() {
        return hasBeenDrawn;
    };

-    /*Footprint.prototype.actionClicked = function() {
+    Footprint.prototype.actionClicked = function() {
        if (this.source) {
            this.source.actionClicked(this);
        }
@@ -189,7 +202,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) {
@@ -200,16 +213,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) {
@@ -237,8 +250,8 @@ 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));
+        }
+        return false;
    };

    return Footprint;
--- a/src/js/MOC.js
+++ b/src/js/MOC.js
@@ -26,7 +26,7 @@ import { ALEvent } from "./events/ALEvent.js";
 * @property {Boolean} [perimeter=false] - Draw the perimeter of the MOC only with `options.color`.
 * @property {string} [edge=!fill && !perimeter] - Draw the edges of the HEALPix cells with `options.color`.
    The HEALPix cell edges compositing the MOC will be drawn if `fill` and `perimeter` are false
-* @property {number} [lineWidth=1] - The line width in pixels 
+* @property {number} [lineWidth=3] - The line width in pixels 
 * @property {number} [opacity=1.0] - The opacity of the colors
 */

@@ -93,7 +93,7 @@ export let MOC = (function() {
        }

        this.opacity = Math.max(0, Math.min(1, this.opacity)); // 0 <= this.opacity <= 1
-        this.lineWidth = options["lineWidth"] || 1;
+        this.lineWidth = options["lineWidth"] || 3;

        //this.proxyCalled = false; // this is a flag to check whether we already tried to load the MOC through the proxy

--- a/src/js/ProgressiveCat.js
+++ b/src/js/ProgressiveCat.js
@@ -66,9 +66,6 @@ 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
@@ -78,6 +75,7 @@ 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);
@@ -212,11 +210,12 @@ export let ProgressiveCat = (function() {
            newSource.setCatalog(instance);
        }

-        instance.computeFootprints(sources);
-        return sources;
+        let footprints = instance.computeFootprints(sources);
+        return [sources, footprints];
    };

    ProgressiveCat.prototype = {
+
        setView: function(view, idx) {
            var self = this;
            this.view = view;
@@ -268,8 +267,9 @@ export let ProgressiveCat = (function() {
                url: self.rootUrl + '/' + 'Norder1/Allsky.tsv',
                method: 'GET',
                success: function(tsv) {
-                    let sources = getSources(self, tsv, self.fields);
+                    let [sources, footprints] = getSources(self, tsv, self.fields);

+                    self.order1Footprints = footprints;
                    self.order1Sources = sources;

                    if (self.order2Sources) {
@@ -287,8 +287,9 @@ export let ProgressiveCat = (function() {
                url: self.rootUrl + '/' + 'Norder2/Allsky.tsv',
                method: 'GET',
                success: function(tsv) {
-                    let sources = getSources(self, tsv, self.fields);
+                    let [sources, footprints] = getSources(self, tsv, self.fields);

+                    self.order2Footprints = footprints;
                    self.order2Sources = sources;

                    if (self.order1Sources) {
@@ -320,8 +321,9 @@ export let ProgressiveCat = (function() {

                    self.fields = getFields(self, xml);

-                    let sources = getSources(self, xml.querySelectorAll('CSV').innerText, self.fields);
+                    let [sources, footprints] = getSources(self, xml.querySelectorAll('CSV').innerText, self.fields);

+                    self.order2Footprints = footprints
                    self.order2Sources = sources

                    if (self.order3Sources) {
@@ -343,7 +345,8 @@ export let ProgressiveCat = (function() {
                method: 'GET',
                success: function(text) {
                    let xml = ProgressiveCat.parser.parseFromString(text, "text/xml")
-                    let sources = getSources(self, xml.querySelectorAll('CSV').innerText, self.fields);
+                    let [sources, footprints] = getSources(self, xml.querySelectorAll('CSV').innerText, self.fields);
+                    self.order3Footprints = footprints
                    self.order3Sources = sources

                    if (self.order2Sources) {
@@ -367,7 +370,7 @@ export let ProgressiveCat = (function() {
                return;
            }

-            if (this.shapeFn) {
+            if (this._shapeIsFunction) {
                ctx.save();
            }

@@ -412,17 +415,25 @@ export let ProgressiveCat = (function() {
                }
            }

-            let key, sources;
+            let key, sources, footprints;
            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);
                }
            });

-            if (this.shapeFn) {
+            if (this._shapeIsFunction) {
                ctx.restore();
            }
        },
@@ -464,8 +475,6 @@ export let ProgressiveCat = (function() {
            });
        },

-        getCacheCanvas: Catalog.prototype.getCacheCanvas,
-
        drawSource: Catalog.prototype.drawSource,

        getSources: function() {
@@ -493,6 +502,33 @@ 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) {
@@ -521,6 +557,11 @@ 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();
+                }
            }
        },

@@ -607,15 +648,17 @@ export let ProgressiveCat = (function() {
                            method: 'GET',
                            //dataType: 'jsonp',
                            success: function(tsv) {
-                                let sources = getSources(self, tsv, self.fields);
+                                let [sources, footprints] = 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]);
--- a/src/js/Selector.js
+++ b/src/js/Selector.js
@@ -63,6 +63,12 @@ export class Selector {
        })
    }

+    setMode(mode) {
+        if (mode) {
+            
+        }
+    }
+
    start(mode, callback) {
        this.view.aladin.addStatusBarMessage({
            id: 'selector',
@@ -106,9 +112,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++) {
@@ -118,27 +124,26 @@ 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) {
+                    if (!s.isShowing || !s.x || !s.y || s.tooSmallFootprint === false) {
                        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);
@@ -148,6 +153,7 @@ 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) {
@@ -160,7 +166,7 @@ export class Selector {
                        continue;
                    }

-                    if (o.intersectsBBox(bbox.x, bbox.y, bbox.w, bbox.h, view)) {
+                    if (o.intersectsBBox(x, y, w, h, view)) {
                        objList.push([o]);
                    }
                }
--- a/src/js/Source.js
+++ b/src/js/Source.js
@@ -49,10 +49,6 @@ export let Source = (function() {
        this.isHovered = false;
    };

-    Source.prototype.setFootprint = function(footprint) {
-        this.footprint = footprint;
-    }
-
    Source.prototype.setCatalog = function(catalog) {
        this.catalog = catalog;
    };
@@ -85,13 +81,8 @@ export let Source = (function() {
        if (this.isSelected) {
            return;
        }
-
        this.isSelected = true;

-        if (this.footprint) {
-            this.footprint.select();
-        }
-
        if (this.catalog) {
            this.catalog.reportChange();
        }
@@ -101,13 +92,7 @@ export let Source = (function() {
        if (! this.isSelected) {
            return;
        }
-
        this.isSelected = false;
-
-        if (this.footprint) {
-            this.footprint.deselect();
-        }
-
        if (this.catalog) {
            this.catalog.reportChange();
        }
@@ -117,13 +102,7 @@ export let Source = (function() {
        if (this.isHovered) {
            return;
        }
-
        this.isHovered = true;
-
-        if (this.footprint) {
-            this.footprint.hover();
-        }
-
        if (this.catalog) {
            this.catalog.reportChange();
        }
@@ -134,11 +113,6 @@ export let Source = (function() {
            return;
        }
        this.isHovered = false;
-
-        if (this.footprint) {
-            this.footprint.unhover();
-        }
-
        if (this.catalog) {
            this.catalog.reportChange();
        }
@@ -152,18 +126,6 @@ export let Source = (function() {
        this.shape = shape;
    }

-    Source.prototype.setColor = function(color) {
-        this.color = color;
-
-        if (this.footprint) {
-            this.footprint.setColor(color);
-        }
-    }
-
-    Source.prototype.setSize = function(size) {
-        this.size = Math.max(size, 1.0);
-    }
-
    /**
     * Simulates a click on the source
     *
@@ -215,17 +177,13 @@ export let Source = (function() {
    };

    Source.prototype.isFootprint = function() {
-        return this.footprint !== undefined && this.footprint !== null;
+        return false;
    }

    Source.prototype.actionOtherObjectClicked = function() {
        if (this.catalog && this.catalog.onClick) {
            this.deselect();
        }
-
-        if (this.footprint) {
-            this.footprint.deselect()
-        }
    };

    return Source;
--- a/src/js/View.js
+++ b/src/js/View.js
@@ -1141,7 +1141,6 @@ 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);
                        }
@@ -1605,14 +1604,9 @@ export let View = (function () {
                        return source;
                    });

-                    let tableColor = catalog.color;
-                    if (catalog.colorFn) {
-                        tableColor = "white" 
-                    }
-
                    let table = {
                        'name': catalog.name,
-                        'color': tableColor,
+                        'color': catalog.color,
                        'rows': sources,
                        'fields': catalog.fields,
                        'showCallback': ObsCore.SHOW_CALLBACKS(this.aladin)
@@ -2207,7 +2201,7 @@ export let View = (function () {
                        continue;
                    }

-                    if (s.isFootprint() && cat.onlyFootprints && !s.tooSmallFootprint) {
+                    if (s.hasFootprint === true && s.tooSmallFootprint === false) {
                        continue;
                    }

@@ -2234,16 +2228,19 @@ export let View = (function () {
        let closests = [];

        footprints.forEach((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(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);
            }
-            footprint.setLineWidth(originLineWidth);
        })

+
        return closests;
    };

@@ -2267,50 +2264,48 @@ 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();

-                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);
-                    }
-                }
+                closests = closests.concat(this.closestFootprints(footprints, ctx, x, y));
            }
        }

        if (!this.objLookup) {
+            //ctx.lineWidth = pastLineWidth;
            return null;
        }

+        //ctx.lineWidth = pastLineWidth;
+
        var dist = Number.POSITIVE_INFINITY;
        var closest = 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 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])
+                        }
                    }
                }
            }
-        }

-        if (closest && closest.length > 0) {
-            closests = closests.concat(closest)
-        }
+            if (closest && closest.length > 0) {
+                closests = closests.concat(closest)
+            }
+
+            /*if (closest) {
+                closests = closests.concat(closest);
+            }*/
+        //}

        if (closests.length === 0)
            return null;
--- a/src/js/gui/Box/StackBox.js
+++ b/src/js/gui/Box/StackBox.js
@@ -83,7 +83,6 @@ 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);
@@ -305,6 +304,7 @@ export class OverlayStackBox extends Box {

                                    let moc = A.MOCFromURL(url, {
                                        name: file.name,
+                                        lineWidth: 3.0,
                                    });
                                    self.aladin.addMOC(moc);
                                },
@@ -347,6 +347,7 @@ export class OverlayStackBox extends Box {
                                                            { ra, dec, radius },
                                                            {
                                                                name: "cone",
+                                                                lineWidth: 3.0,
                                                            }
                                                        );
                                                        self.aladin.addMOC(moc);
@@ -417,6 +418,7 @@ export class OverlayStackBox extends Box {
                                                        },
                                                        {
                                                            name: "rect",
+                                                            lineWidth: 3.0,
                                                        }
                                                    );
                                                    self.aladin.addMOC(moc);
@@ -461,6 +463,7 @@ export class OverlayStackBox extends Box {
                                                        { ra, dec },
                                                        {
                                                            name: "poly",
+                                                            lineWidth: 3.0,
                                                        }
                                                    );
                                                    self.aladin.addMOC(moc);
@@ -1159,14 +1162,9 @@ export class OverlayStackBox extends Box {
        }

        // retrieve SVG icon, and apply the layer color
-        let color = overlay.color;
-        if (overlay.colorFn) {
-            color = "white"
-        }
-
        return new Icon({
            size: "small",
-            url: Icon.dataURLFromSVG({ svg, color }),
+            url: Icon.dataURLFromSVG({ svg, color: overlay.color }),
            tooltip,
        });
    }
--- a/src/js/shapes/Circle.js
+++ b/src/js/shapes/Circle.js
@@ -324,17 +324,10 @@ export let Circle = (function() {
    };

    // From StackOverflow: https://stackoverflow.com/questions/401847/circle-rectangle-collision-detection-intersection
-    Circle.prototype.intersectsBBox = function(x, y, w, h, view) {
-        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 
+    Circle.prototype.intersectsBBox = function(x, y, w, h) {
        const circleDistance = {
-            x: Math.abs(centerXyview[0] - (x + w/2)),
-            y: Math.abs(centerXyview[1] - (y + h/2))
+            x: Math.abs(this.center.x - x),
+            y: Math.abs(this.center.y - y)
        };

        if (circleDistance.x > (w/2 + this.radius)) { return false; }
--- a/src/js/shapes/Ellipse.js
+++ b/src/js/shapes/Ellipse.js
@@ -291,7 +291,6 @@ 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) {
@@ -345,31 +344,8 @@ export let Ellipse = (function() {
        return ctx.isPointInStroke(x, y);
    };

-    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));
+    Ellipse.prototype.intersectsBBox = function(x, y, w, h) {
+        // todo
    };
    
    return Ellipse;
--- a/src/js/shapes/Vector.js
+++ b/src/js/shapes/Vector.js
@@ -175,29 +175,8 @@ export let Vector = (function() {

        isInStroke: Ellipse.prototype.isInStroke,

-        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;
+        intersectsBBox: function(x, y, w, h) {
+            // todo
        },
    };

--- a/src/js/vo/samp.js
+++ b/src/js/vo/samp.js
@@ -72,7 +72,7 @@ export class SAMPConnector {
            var params = message["samp.params"];

            const {url, name} = params;
-            let moc = A.MOCFromURL(url, {name});
+            let moc = A.MOCFromURL(url, {name, lineWidth: 3});
            aladin.addMOC(moc);
        };