Support selectionLineWidth option for shapes and catalogs

src/js/A.js

@@ -105,7 +105,7 @@ A.aladin = function (divSelector, options) {
         const theme = storedPreference || (systemPrefersDark ? "dark" : "light");
         return theme;
     }
-    
+
     let theme;
     if (options && options.mode) {
         let mode = options.mode.toLowerCase();
@@ -421,7 +421,7 @@ A.coo = function (longitude, latitude, prec) {
  *
  * @param {Circle[]|Polyline[]|Ellipse[]|Vector[]} shapes - an array of A.polygon objects
  * @param {Source} [source] - a A.source object associated with the footprint
- * 
+ *
  * @returns {Footprint} Returns a new Footprint object
  */
 A.footprint = function(shapes, source) {
@@ -618,6 +618,7 @@ A.catalogFromURL = function (url, options, successCallback, errorCallback, usePr
                 fp.setColor(c.color);
                 fp.setHoverColor(c.hoverColor);
                 fp.setSelectionColor(c.selectionColor);
+                fp.setSelectionLineWidth(c.selectionLineWidth);
 
                 return fp;
             })

src/js/Catalog.js

@@ -55,6 +55,7 @@ If a function is given, user can return Image, HTMLImageCanvas, HTMLImageElement
 * @property {string} [decField] - The ID or name of the field holding Declination (dec).
 * @property {function} [filter] - The filtering function for sources.
 * @property {string} [selectionColor="#00ff00"] - The color to apply to selected sources in the catalog.
+* @property {string} [selectionLineWidth] - The line width to apply to selected source footprints in the catalog (i.e. can be used by custom shape function).
 * @property {string} [hoverColor=color] - The color to apply to sources in the catalog when they are hovered.
 * @property {boolean} [displayLabel=false] - Whether to display labels for sources.
 * @property {string} [labelColumn] - The name of the column to be used for the label.
@@ -113,6 +114,7 @@ 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.selectionLineWidth = options.selectionLineWidth || undefined;
         this.hoverColor = options.hoverColor || undefined;
 
         // when footprints are associated to source, do we need to draw the point source as well ?
@@ -492,6 +494,7 @@ export let Catalog = (function () {
      * @param {Object} [options] - shape options
      * @param {string} [options.color] - the color of the shape
      * @param {string} [options.selectionColor] - the color of the shape when selected
+     * @param {string} [selectionLineWidth] - The line width to apply to selected source footprints in the catalog.
      * @param {number} [options.sourceSize] - size of the shape
      * @param {string} [options.hoverColor=options.color] - the color to apply to sources in the catalog when they are hovered.
      * @param {string|Function|HTMLImageCanvas|HTMLImageElement} [options.shape="square"] - the type of the shape. Can be square, rhomb, plus, cross, triangle, circle.
@@ -502,6 +505,7 @@ export let Catalog = (function () {
         options = options || {};
         this.color = options.color || this.color || Color.getNextColor();
         this.selectionColor = options.selectionColor || this.selectionColor || Color.getNextColor();
+        this.selectionLineWidth = options.selectionLineWidth || this.selectionLineWidth;
         this.hoverColor = options.hoverColor || this.hoverColor || undefined;
         this.sourceSize = options.sourceSize || this.sourceSize || 6;
         this.shape = options.shape || this.shape || "square";
@@ -562,7 +566,7 @@ export let Catalog = (function () {
         this.reportChange();
     };
 
-    
+
 
     /**
      * Add sources to the catalog
@@ -631,11 +635,12 @@ export let Catalog = (function () {
                                 let hoverColor = this.hoverColor || color;
 
                                 for (var shape of shapes) {
-                                    // Set the same color of the shape than the catalog. 
+                                    // 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);
+                                    shape.setSelectionLineWidth(this.selectionLineWidth);
                                 }
 
                                 let footprint;
@@ -787,9 +792,9 @@ export let Catalog = (function () {
      * Get one source by its index in the catalog
      *
      * @memberof Catalog
-     * 
+     *
      * @param {number} idx - the index of the source in the catalog sources
-     * 
+     *
      * @returns {Source} - the source at the index
      */
     Catalog.prototype.getSource = function (idx) {
@@ -813,7 +818,7 @@ export let Catalog = (function () {
      * Set the color of the catalog
      *
      * @memberof Catalog
-     * 
+     *
      * @param {String} - the new color
      */
     Catalog.prototype.setColor = function (color) {
@@ -825,7 +830,7 @@ export let Catalog = (function () {
      * Set the color of selected sources
      *
      * @memberof Catalog
-     * 
+     *
      * @param {String} - the new color
      */
     Catalog.prototype.setSelectionColor = function (color) {
@@ -833,11 +838,23 @@ export let Catalog = (function () {
         this.updateShape();
     };
 
+     /**
+     * Set the selectionLineWidth which can be used by the shape draw function for selected catalog elements.
+     *
+     * @memberof Catalog
+     *
+     * @param {String} - the new selection line width
+     */
+    Catalog.prototype.setSelectionLineWidth = function (selectionLineWidth) {
+        this.selectionLineWidth = selectionLineWidth;
+        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) {
@@ -863,7 +880,7 @@ export let Catalog = (function () {
      * Set the color of hovered sources
      *
      * @memberof Catalog
-     * 
+     *
      * @param {String} - the new color
      */
     Catalog.prototype.setHoverColor = function (color) {
@@ -875,7 +892,7 @@ export let Catalog = (function () {
      * Set the size of the catalog sources
      *
      * @memberof Catalog
-     * 
+     *
      * @param {number} - the new size
      */
     Catalog.prototype.setSourceSize = function (sourceSize) {
@@ -888,7 +905,7 @@ export let Catalog = (function () {
      * Set the shape of the catalog sources
      *
      * @memberof Catalog
-     * 
+     *
      * @param {string|Function|HTMLImageCanvas|HTMLImageElement} [shape="square"] - the type of the shape. Can be square, rhomb, plus, cross, triangle, circle.
      * A callback function can also be called that return an HTMLImageElement in function of the source object. A canvas or an image can also be given.
      */
@@ -901,7 +918,7 @@ export let Catalog = (function () {
      * Get the size of the catalog sources
      *
      * @memberof Catalog
-     * 
+     *
      * @returns {number} - the size of the sources
      */
     Catalog.prototype.getSourceSize = function () {
@@ -912,7 +929,7 @@ export let Catalog = (function () {
      * Remove a specific source from the catalog
      *
      * @memberof Catalog
-     * 
+     *
      * @param {Source} - the source to remove
      */
     Catalog.prototype.remove = function (source) {
@@ -993,7 +1010,7 @@ export let Catalog = (function () {
 
         this.sources.forEach((s, idx) => {
             let drawn = false;
-            
+
             if (xy[2 * idx] && xy[2 * idx + 1]) {
                 if (self.filterFn) {
                     if(!self.filterFn(s)) {
@@ -1097,7 +1114,7 @@ export let Catalog = (function () {
                 let color = s.color || this.color;
 
                 let cacheCanvas = this.getCacheCanvas(shape, color, size)
-                
+
                 ctx.drawImage(
                     cacheCanvas,
                     s.x - cacheCanvas.width / 2,

src/js/Footprint.js

@@ -51,6 +51,7 @@ export let Footprint= (function() {
         this.shapes = [].concat(shapes);
 
         this.isShowing = true;
+    	this.isSelected = false;
         this.isHovered = false;
 
         this.overlay = null;
@@ -71,7 +72,7 @@ export let Footprint= (function() {
     /*Footprint.prototype.setCatalog = function(catalog) {
         if (this.source) {
             this.source.setCatalog(catalog);
-        
+
         }
     };*/
 
@@ -94,10 +95,12 @@ export let Footprint= (function() {
     };
 
     Footprint.prototype.select = function() {
+    	this.isSelected = true;
         this.shapes.forEach((shape) => shape.select())
     };
 
     Footprint.prototype.deselect = function() {
+    	this.isSelected = false;
         this.shapes.forEach((shape) => shape.deselect())
     };
 
@@ -137,6 +140,14 @@ export let Footprint= (function() {
         this.shapes.forEach((shape) => shape.setLineWidth(lineWidth))
     };
 
+    Footprint.prototype.getSelectionLineWidth = function() {
+        return this.shapes && this.shapes[0].getSelectionLineWidth();
+    };
+
+    Footprint.prototype.setSelectionLineWidth = function(selectionLineWidth) {
+        this.shapes.forEach((shape) => shape.setSelectionLineWidth(selectionLineWidth))
+    };
+
     Footprint.prototype.setColor = function(color) {
         if(!color) {
             return;

src/js/Overlay.js

@@ -48,7 +48,7 @@ import { Color } from './Color';
 
 export let GraphicOverlay = (function() {
     /**
-     * Represents an overlay containing Footprints, whether it is 
+     * Represents an overlay containing Footprints, whether it is
      *
      * @class
      * @constructs GraphicOverlay
@@ -124,10 +124,10 @@ export let GraphicOverlay = (function() {
 
     /**
      * Parse a STCS string and returns a list of footprints (only circles, polygons and ellipses given in ICRS or FK5J2000 frame are handled).
-     * For visualization purposes, the difference between FK5J2000 and ICRS system is not noticeable. Therefore one can be interpreted as the other. 
+     * For visualization purposes, the difference between FK5J2000 and ICRS system is not noticeable. Therefore one can be interpreted as the other.
      *
      * @memberof GraphicOverlay
-     * 
+     *
      * @returns {Circle[]|Polyline[]|Ellipse[]} The list of mixed circles, polygons and ellipses
      */
     GraphicOverlay.parseSTCS = function(stcs, options) {
@@ -216,8 +216,8 @@ export let GraphicOverlay = (function() {
      * Add an array (or single) shapes (i.e. Footprint, Circle, Polyline, Ellipse, Vector, ...)
      *
      * @memberof GraphicOverlay
-     * 
+     *
-     * @param {Footprint[]|Circle[]|Polyline[]|Ellipse[]|Vector[]} overlaysToAdd - a list (or single) shapes to add to the overlay 
+     * @param {Footprint[]|Circle[]|Polyline[]|Ellipse[]|Vector[]} overlaysToAdd - a list (or single) shapes to add to the overlay
      */
     GraphicOverlay.prototype.addFootprints = function(overlaysToAdd) {
         overlaysToAdd = [].concat(overlaysToAdd)
@@ -250,9 +250,9 @@ export let GraphicOverlay = (function() {
      * Returns a shape by an index
      *
      * @memberof GraphicOverlay
-     * 
+     *
      * @param {number} idx - The index of the shape to retrieve
-     * 
+     *
      * @returns {Footprint|Circle|Polyline|Ellipse|Vector} The shape
      */
     GraphicOverlay.prototype.getFootprint = function(idx) {
@@ -327,10 +327,10 @@ export let GraphicOverlay = (function() {
      * Increase the brightness of a color by a percentage
      *
      * @memberof GraphicOverlay
-     * 
+     *
      * @param {string} hex - The color given in hexadecimal e.g. '#ffa0bb'
      * @param {number} percent - The percentage to increase the brightness of
-     * 
+     *
      * @returns {string} The new color given as an hexadecimal string
      */
     GraphicOverlay.increaseBrightness = function(hex, percent){
@@ -356,7 +356,7 @@ export let GraphicOverlay = (function() {
      * Set the color of the shapes inside the overlay
      *
      * @memberof GraphicOverlay
-     * 
+     *
      * @param {string} color - the new color in hexadecimal e.g. '#ff00ff'
      */
     GraphicOverlay.prototype.setColor = function(color) {
@@ -368,7 +368,7 @@ export let GraphicOverlay = (function() {
      * Set the line width of the shapes inside the overlay
      *
      * @memberof GraphicOverlay
-     * 
+     *
      * @param {number} lineWidth - the new line width in pixels
      */
     GraphicOverlay.prototype.setLineWidth = function(lineWidth) {
@@ -380,7 +380,7 @@ export let GraphicOverlay = (function() {
      * Set the dash line property
      *
      * @memberof GraphicOverlay
-     * 
+     *
      * @param {Array.<number>} [lineDash=[]] - See the segments property {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash#segments| here}
      */
     GraphicOverlay.prototype.setLineDash = function(lineDash) {

src/js/View.js

@@ -397,7 +397,7 @@ export let View = (function () {
 
         var computedWidth = Math.floor(parseFloat(this.aladinDiv.getBoundingClientRect().width)) || 1.0;
         var computedHeight = Math.floor(parseFloat(this.aladinDiv.getBoundingClientRect().height)) || 1.0;
-        
+
         this.width = Math.max(computedWidth, 1);
         this.height = Math.max(computedHeight, 1); // this prevents many problems when div size is equal to 0
 
@@ -673,7 +673,7 @@ export let View = (function () {
         var handleSelect = function(xy, tolerance) {
             tolerance = tolerance || 5;
             var objs = view.closestObjects(xy.x, xy.y, tolerance);
-            
+
             view.unselectObjects();
 
             if (objs) {
@@ -717,7 +717,7 @@ export let View = (function () {
                 view.selectObjects(objs);
 
                 view.lastClickedObject = objs;
-                
+
             } else {
                 // If there is a past clicked object
                 if (view.lastClickedObject) {
@@ -779,7 +779,7 @@ export let View = (function () {
                     })
                 }
 
-                longTouchTimer = setTimeout(() => {onlongtouch(e); view.dragging = false;}, longTouchDuration); 
+                longTouchTimer = setTimeout(() => {onlongtouch(e); view.dragging = false;}, longTouchDuration);
                 touchStartTime = Date.now();
 
             }
@@ -851,7 +851,7 @@ export let View = (function () {
         });
 
         Utils.on(document, "mouseup touchend", function(e) {
-            var wasDragging = view.realDragging === true;            
+            var wasDragging = view.realDragging === true;
 
             if (view.dragging) { // if we were dragging, reset to default cursor
                 if(view.mode === View.PAN) {
@@ -933,10 +933,10 @@ export let View = (function () {
                 if (e.type === "touchend") {
                     if (view.mode === View.SELECT) {
                         view.selector.dispatch('mouseup', {coo: xymouse})
-                        
+
                         return;
                     }
-                } 
+                }
             }
 
             if (view.rightClick) {
@@ -1165,13 +1165,13 @@ export let View = (function () {
                         if (typeof objHoveredFunction === 'function' && (!lastHoveredObject || !lastHoveredObject.includes(o))) {
                             var ret = objHoveredFunction(o, xymouse);
                         }
-    
+
                         if (o.isFootprint()) {
                             if (typeof footprintHoveredFunction === 'function' && (!lastHoveredObject || !lastHoveredObject.includes(o))) {
                                 var ret = footprintHoveredFunction(o, xymouse);
                             }
                         }
-    
+
                         if (!lastHoveredObject || !lastHoveredObject.includes(o)) {
                             o.hover();
                         }
@@ -1211,7 +1211,7 @@ export let View = (function () {
                             }
                         }
                     }
-                    
+
                     lastHoveredObject = null;
                 }
 
@@ -1286,7 +1286,7 @@ export let View = (function () {
             if (typeof onWheelTriggeredFunction === 'function') {
                 onWheelTriggeredFunction(e)
             } else {
-                // Default Aladin Lite zooming                
+                // Default Aladin Lite zooming
                 const normalizedDelta = e.deltaY && normalizeWheel(e) || e.detail || (-e.wheelDelta);
                 // Accumulate the normalized delta
                 // We do not zoom because we cannot rely on "wheel" event
@@ -1326,7 +1326,7 @@ export let View = (function () {
                     break;
                 default:
                     break;
-                
+
             }
         });
     };
@@ -1588,14 +1588,14 @@ export let View = (function () {
         if (this.manualSelection) {
             return;
         }
-        
+
         // unselect the previous selection
         this.unselectObjects();
-        
+
         if (Array.isArray(selection)) {
             this.selection = selection;
         } else {
-            // select the new 
+            // select the new
             this.selection = Selector.getObjects(selection, this);
         }
 
@@ -1612,7 +1612,7 @@ export let View = (function () {
                     let cat = obj.getCatalog();
 
                     // trigger the non action clicked if it does not show the table
-                    // table show is handled below 
+                    // table show is handled below
                     if (obj.actionClicked) {
                         if (!cat || !cat.onClick || cat.onClick !== "showTable") {
                             obj.actionClicked()
@@ -1642,13 +1642,13 @@ export let View = (function () {
                         } else {
                             source = o;
                         }
-    
+
                         return source;
                     });
 
                     let tableColor = catalog.color;
                     if (catalog.colorFn) {
-                        tableColor = "white" 
+                        tableColor = "white"
                     }
 
                     let table = {
@@ -1658,7 +1658,7 @@ export let View = (function () {
                         'fields': catalog.fields,
                         'showCallback': ObsCore.SHOW_CALLBACKS(this.aladin)
                     };
-    
+
                     return table;
                 })
 
@@ -1994,7 +1994,7 @@ export let View = (function () {
         }
 
         this.projection = ProjectionEnum[projName];
-        
+
         // Change the projection here
         this.wasm.setProjection(projName);
         this.updateZoomState()
@@ -2235,8 +2235,12 @@ export let View = (function () {
 
         footprints.forEach((footprint) => {
             const originLineWidth = footprint.getLineWidth();
-            let spreadedLineWidth = (originLineWidth || 1) + 3;
+            let drawingLineWidth = originLineWidth;
-            
+            if (footprint.isSelected && footprint.getSelectionLineWidth()) {
+                drawingLineWidth = footprint.getSelectionLineWidth();
+            }
+            let spreadedLineWidth = (drawingLineWidth || 1) + 3;
+
             footprint.setLineWidth(spreadedLineWidth);
             if (footprint.isShowing && footprint.isInStroke(ctx, this, x * window.devicePixelRatio, y * window.devicePixelRatio)) {
                 closests.push(footprint);
@@ -2272,8 +2276,12 @@ export let View = (function () {
                     if (s.isFootprint() && !s.tooSmallFootprint) {
                         let footprint = s.footprint;
                         const originLineWidth = footprint.getLineWidth();
-                        let spreadedLineWidth = (originLineWidth || 1) + 3;
+                        let drawingLineWidth = originLineWidth;
-                        
+                        if (footprint.isSelected && footprint.getSelectionLineWidth()) {
+                            drawingLineWidth = footprint.getSelectionLineWidth();
+                        }
+                        let spreadedLineWidth = (drawingLineWidth || 1) + 3;
+
                         footprint.setLineWidth(spreadedLineWidth);
                         if (footprint.isShowing && footprint.isInStroke(ctx, this, x * window.devicePixelRatio, y * window.devicePixelRatio)) {
                             closests.push(s);

src/js/shapes/Circle.js

@@ -52,6 +52,7 @@ export let Circle = (function() {
         this.fillColor = options['fillColor'] || undefined;
         this.lineWidth = options["lineWidth"] || undefined;
         this.selectionColor = options["selectionColor"] || '#00ff00';
+        this.selectionLineWidth = options["selectionLineWidth"] || undefined;
         this.hoverColor = options["hoverColor"] || undefined;
         this.opacity    = options['opacity']   || 1;
 
@@ -112,6 +113,20 @@ export let Circle = (function() {
         return this.lineWidth;
     };
 
+    Circle.prototype.setSelectionLineWidth = function(selectionLineWidth) {
+        if (this.selectionLineWidth == selectionLineWidth) {
+            return;
+        }
+        this.selectionLineWidth = selectionLineWidth;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
+    Circle.prototype.getSelectionLineWidth = function() {
+        return this.selectionLineWidth;
+    };
+
     Circle.prototype.setOverlay = function(overlay) {
         this.overlay = overlay;
     };
@@ -162,6 +177,7 @@ export let Circle = (function() {
         }
         this.isHovered = true;
         this.setLineWidth(this.getLineWidth() + 2)
+        this.setSelectionLineWidth(this.getSelectionLineWidth() + 2)
         if (this.overlay) {
             this.overlay.reportChange();
         }
@@ -173,6 +189,7 @@ export let Circle = (function() {
         }
         this.isHovered = false;
         this.setLineWidth(this.getLineWidth() - 2)
+        this.setSelectionLineWidth(this.getSelectionLineWidth() - 2)
 
         if (this.overlay) {
             this.overlay.reportChange();
@@ -203,10 +220,19 @@ export let Circle = (function() {
             return false;
         }
 
+        // Decide which line width to use.
+        if (!this.lineWidth) {
+            this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
+        }
+        let drawingLineWidth = this.lineWidth;
+        if (this.isSelected && this.selectionLineWidth) {
+            drawingLineWidth = this.selectionLineWidth;
+        }
+
         noSmallCheck = noSmallCheck===true || false;
         if (!noSmallCheck) {
             const px_per_deg = view.width / view.fov;
-            this.isTooSmall = this.radiusDegrees * 2 * px_per_deg < this.lineWidth;
+            this.isTooSmall = this.radiusDegrees * 2 * px_per_deg < drawingLineWidth;
             if (this.isTooSmall) {
                 return false;
             }
@@ -302,11 +328,7 @@ export let Circle = (function() {
             ctx.strokeStyle = baseColor;
         }
 
-        if (!this.lineWidth) {
+        ctx.lineWidth = drawingLineWidth;
-            this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
-        }
-
-        ctx.lineWidth = this.lineWidth;
         ctx.globalAlpha = this.opacity;
         ctx.beginPath();
         ctx.arc(this.center.x, this.center.y, this.radius, 0, 2*Math.PI, false);
@@ -336,7 +358,7 @@ export let Circle = (function() {
         }
 
         // compute the absolute distance between the middle of the bbox
-        // and the center of the circle 
+        // and the center of the circle
         const circleDistance = {
             x: Math.abs(centerXyview[0] - (x + w/2)),
             y: Math.abs(centerXyview[1] - (y + h/2))

src/js/shapes/Ellipse.js

@@ -23,11 +23,11 @@
 
 /******************************************************************************
  * Aladin Lite project
- * 
+ *
  * File Ellipse
- * 
+ *
  * Author: Matthieu Baumann[CDS]
- * 
+ *
  *****************************************************************************/
 
 import { Utils } from "./../Utils";
@@ -54,6 +54,7 @@ export let Ellipse = (function() {
         this.color = options['color'] || undefined;
         this.fillColor = options['fillColor'] || undefined;
         this.lineWidth = options["lineWidth"] || undefined;
+        this.selectionLineWidth = options["selectionLineWidth"] || undefined;
         this.selectionColor = options["selectionColor"] || '#00ff00';
         this.hoverColor = options["hoverColor"] || undefined;
         this.opacity   = options['opacity']   || 1;
@@ -66,7 +67,7 @@ export let Ellipse = (function() {
         this.setAxisLength(a, b);
         this.setRotation(theta);
     	this.overlay = null;
-    	
+
     	this.isShowing = true;
         this.isSelected = false;
         this.isHovered = false;
@@ -120,6 +121,20 @@ export let Ellipse = (function() {
         this.overlay = overlay;
     };
 
+    Ellipse.prototype.setSelectionLineWidth = function(selectionLineWidth) {
+        if (this.selectionLineWidth == selectionLineWidth) {
+            return;
+        }
+        this.selectionLineWidth = selectionLineWidth;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
+    Ellipse.prototype.getSelectionLineWidth = function() {
+        return this.selectionLineWidth;
+    };
+
     Ellipse.prototype.show = function() {
         if (this.isShowing) {
             return;
@@ -129,7 +144,7 @@ export let Ellipse = (function() {
             this.overlay.reportChange();
         }
     };
-    
+
     Ellipse.prototype.hide = function() {
         if (! this.isShowing) {
             return;
@@ -139,7 +154,7 @@ export let Ellipse = (function() {
             this.overlay.reportChange();
         }
     };
-    
+
     Ellipse.prototype.select = function() {
         if (this.isSelected) {
             return;
@@ -167,6 +182,7 @@ export let Ellipse = (function() {
         }
         this.isHovered = true;
         this.setLineWidth(this.getLineWidth() + 2)
+        this.setSelectionLineWidth(this.getSelectionLineWidth() + 2)
         if (this.overlay) {
             this.overlay.reportChange();
         }
@@ -178,6 +194,7 @@ export let Ellipse = (function() {
         }
         this.isHovered = false;
         this.setLineWidth(this.getLineWidth() - 2)
+        this.setSelectionLineWidth(this.getSelectionLineWidth() - 2)
         if (this.overlay) {
             this.overlay.reportChange();
         }
@@ -221,10 +238,19 @@ export let Ellipse = (function() {
             return false;
         }
 
+        // Decide which line width to use.
+        if (!this.lineWidth) {
+            this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
+        }
+        let drawingLineWidth = this.lineWidth;
+        if (this.isSelected && this.selectionLineWidth) {
+            drawingLineWidth = this.selectionLineWidth;
+        }
+
         const px_per_deg = view.width / view.fov;
         noSmallCheck = noSmallCheck===true || false;
         if (!noSmallCheck) {
-            this.isTooSmall = this.b * 2 * px_per_deg < this.lineWidth;
+            this.isTooSmall = this.b * 2 * px_per_deg < drawingLineWidth;
             if (this.isTooSmall) {
                 return false;
             }
@@ -250,7 +276,7 @@ export let Ellipse = (function() {
         // 3. normalize this vector
         let toNorthVec = [toNorthScreen[0] - originScreen[0], toNorthScreen[1] - originScreen[1]];
         let norm = Math.sqrt(toNorthVec[0]*toNorthVec[0] + toNorthVec[1]*toNorthVec[1]);
-        
+
         toNorthVec = [toNorthVec[0] / norm, toNorthVec[1] / norm];
         let toWestVec = [1.0, 0.0];
 
@@ -287,11 +313,7 @@ export let Ellipse = (function() {
             ctx.strokeStyle = baseColor;
         }
 
-        if (!this.lineWidth) {
+        ctx.lineWidth = drawingLineWidth;
-            this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
-        }
-
-        ctx.lineWidth = this.lineWidth;
         ctx.globalAlpha = this.opacity;
         ctx.beginPath();
 
@@ -353,7 +375,7 @@ export let Ellipse = (function() {
         }
 
         // compute the absolute distance between the middle of the bbox
-        // and the center of the circle 
+        // and the center of the circle
         const circleDistance = {
             x: Math.abs(centerXyview[0] - (x + w/2)),
             y: Math.abs(centerXyview[1] - (y + h/2))
@@ -371,6 +393,6 @@ export let Ellipse = (function() {
         const cornerDistanceSquared = dx*dx + dy*dy;
         return (cornerDistanceSquared <= (this.aPixels*this.aPixels));
     };
-    
+
     return Ellipse;
 })();

src/js/shapes/Polyline.js

@@ -45,7 +45,8 @@ import { ProjectionEnum } from "../ProjectionEnum.js";
 * @property {string} [color] - The color of the shape
 * @property {string} [fill=false] - Fill the shape with fillColor
 * @property {string} [fillColor] - A filling color for the shape
-* @property {number} [lineWidth=3] - The line width in pixels
+* @property {number} [lineWidth=2] - The line width in pixels (inherited from overlay if any where it defaults to 3)
+* @property {number} [selectionLineWidth=lineWidth] - The line width in pixels when the shape is selected
 * @property {number} [opacity=1] - The opacity, between 0 (totally transparent) and 1 (totally opaque)
 * @property {string} [selectionColor='#00ff00'] - A selection color
 * @property {string} [hoverColor] -  A hovered color
@@ -75,7 +76,7 @@ export let Polyline = (function() {
      * @param {Array.<number[]>} raDecArray - right-ascension/declination 2-tuple array describing the polyline's vertices in degrees
      * @param {ShapeOptions} options - Configuration options for the polyline. Additional properties:
      * @param {boolean} [options.closed=false] - Close the polyline, default to false.
-     * 
+     *
      * @returns {Polyline} - The polyline shape object
      */
     let Polyline = function(raDecArray, options) {
@@ -85,6 +86,7 @@ export let Polyline = (function() {
         this.fillColor = options['fillColor'] || undefined;
         this.opacity   = options['opacity']   || undefined;
         this.lineWidth = options["lineWidth"] || undefined;
+        this.selectionLineWidth = options["selectionLineWidth"] || undefined;
         this.selectionColor = options["selectionColor"] || '#00ff00';
         this.hoverColor = options["hoverColor"] || undefined;
 
@@ -151,6 +153,7 @@ export let Polyline = (function() {
         }
         this.isHovered = true;
         this.setLineWidth(this.getLineWidth() + 2)
+        this.setSelectionLineWidth(this.getSelectionLineWidth() + 2)
         if (this.overlay) {
             this.overlay.reportChange();
         }
@@ -162,6 +165,7 @@ export let Polyline = (function() {
         }
         this.isHovered = false;
         this.setLineWidth(this.getLineWidth() - 2)
+        this.setSelectionLineWidth(this.getSelectionLineWidth() - 2)
         if (this.overlay) {
             this.overlay.reportChange();
         }
@@ -182,6 +186,21 @@ export let Polyline = (function() {
         }
     };
 
+    Polyline.prototype.getSelectionLineWidth = function() {
+        return this.selectionLineWidth;
+    };
+
+    Polyline.prototype.setSelectionLineWidth = function(selectionLineWidth) {
+        if (this.selectionLineWidth == selectionLineWidth) {
+            return;
+        }
+
+        this.selectionLineWidth = selectionLineWidth;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
     Polyline.prototype.setColor = function(color) {
         if (!color || this.color == color) {
             return;
@@ -239,9 +258,14 @@ export let Polyline = (function() {
             baseColor = '#ff0000';
         }
 
+        // Decide which line width to use.
         if (!this.lineWidth) {
             this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
         }
+        var drawingLineWidth = this.lineWidth;
+        if (this.isSelected && this.selectionLineWidth) {
+            drawingLineWidth = this.selectionLineWidth;
+        }
 
         if (this.isSelected) {
             if(this.selectionColor) {
@@ -293,7 +317,7 @@ export let Polyline = (function() {
 
         // do not draw neither if the polygone does not lie inside lineWidth
         if (!noSmallCheck) {
-            this.isTooSmall = (xmax - xmin) < this.lineWidth && (ymax - ymin) < this.lineWidth;
+            this.isTooSmall = (xmax - xmin) < drawingLineWidth && (ymax - ymin) < drawingLineWidth;
 
             if (this.isTooSmall) {
                 return false;
@@ -374,7 +398,7 @@ export let Polyline = (function() {
         let v1 = this.closed ? 0 : 1;
 
         ctx.globalAlpha = this.opacity;
-        ctx.lineWidth = this.lineWidth;
+        ctx.lineWidth = drawingLineWidth;
         ctx.beginPath();
 
         for (var k = 0; k < nSegment; k++) {
@@ -449,7 +473,7 @@ export let Polyline = (function() {
             if (v1 && v2) {
                 const line = {x1: v1.x, y1: v1.y, x2: v2.x, y2: v2.y};                                   // new segment
                 _drawLine(line, ctx);
-    
+
                 if (ctx.isPointInStroke(x, y)) {                    // x,y is on line?
                     return true;
                 }
@@ -494,7 +518,6 @@ export let Polyline = (function() {
         }
 
         if (this.closed && poly.length === this.raDecArray.length) {
-            console.log("closed poly")
             const corners = [
                 { x,  y },
                 { x: x + w, y },
@@ -583,7 +606,7 @@ export let Polyline = (function() {
         let right =  Polyline.segmentsIntersect({x: x1, y: y1}, {x: x2, y: y2}, {x: rw, y: 0}, {x: rw, y: rh});
         let top =    Polyline.segmentsIntersect({x: x1, y: y1}, {x: x2, y: y2}, {x: 0, y: 0}, {x: rw, y: 0});
         let bottom = Polyline.segmentsIntersect({x: x1, y: y1}, {x: x2, y: y2}, {x: 0, y: rh}, {x: rw, y: rh});
-    
+
         // if ANY of the above are true, the line
         // has hit the rectangle
         if (left || right || top || bottom) {

src/js/shapes/Vector.js

@@ -22,13 +22,13 @@
 
 /******************************************************************************
  * Aladin Lite project
- * 
+ *
  * Class Vector
- * 
+ *
  * A vector is a graphical overlay connecting 2 points with end or begin arrows on it
- * 
+ *
  * Author: Matthieu Baumann[CDS]
- * 
+ *
  *****************************************************************************/
 import { Polyline } from "./Polyline.js";
 import { Utils } from '../Utils';
@@ -38,7 +38,7 @@ import { Ellipse } from "./Ellipse.js";
 export let Vector = (function() {
     /**
      * Represents an vector.
-     * 
+     *
      * A vector is a graphical overlay connecting 2 sky positions with end or begin arrows on it
      *
      * @class
@@ -49,7 +49,7 @@ export let Vector = (function() {
      * @param {number} dec2 - Declination (Dec) coordinate of the center in degrees.
      * @param {ShapeOptions} options - Options for configuring the vector. Additional properties:
      * @param {boolean} [options.arrow=false] - Add an arrow pointing from (ra1, dec1) to (ra2, dec2)
-     * 
+     *
      * @returns {Vector} - The vector shape object
      */
     let Vector = function(ra1, dec1, ra2, dec2, options) {
@@ -57,6 +57,7 @@ export let Vector = (function() {
         this.color     = options['color']     || undefined;
         this.opacity   = options['opacity']   || undefined;
         this.lineWidth = options['lineWidth'] || undefined;
+        this.selectionLineWidth = options["selectionLineWidth"] || undefined;
         this.selectionColor = options["selectionColor"] || '#00ff00';
         this.hoverColor = options["hoverColor"] || undefined;
         this.arrow = options["arrow"] === undefined ? false : options["arrow"];
@@ -81,16 +82,19 @@ export let Vector = (function() {
         isFootprint: Polyline.prototype.isFootprint,
         show: Polyline.prototype.show,
         hide: Polyline.prototype.hide,
-        
+
         select: Polyline.prototype.select,
         deselect: Polyline.prototype.deselect,
-        
+
         hover: Polyline.prototype.hover,
         unhover: Polyline.prototype.unhover,
-        
+
         getLineWidth: Polyline.prototype.getLineWidth,
         setLineWidth: Polyline.prototype.setLineWidth,
 
+        getSelectionLineWidth: Polyline.prototype.getSelectionLineWidth,
+        setSelectionLineWidth: Polyline.prototype.setSelectionLineWidth,
+
         setColor: Polyline.prototype.setColor,
         setSelectionColor: Polyline.prototype.setSelectionColor,
         setHoverColor: Polyline.prototype.setHoverColor,
@@ -105,7 +109,7 @@ export let Vector = (function() {
             const v2 = view.aladin.world2pix(this.ra2, this.dec2);
             if (!v2)
                 return false;
-            
+
             const xmin = Math.min(v1[0], v2[0]);
             const xmax = Math.max(v1[0], v2[0]);
             const ymin = Math.min(v1[1], v2[1]);
@@ -120,6 +124,10 @@ export let Vector = (function() {
             if (!this.lineWidth) {
                 this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
             }
+            let drawingLineWidth = this.lineWidth;
+            if (this.isSelected && this.selectionLineWidth) {
+                drawingLineWidth = this.selectionLineWidth;
+            }
 
             // too small
             if(!noSmallCheck) {
@@ -137,7 +145,7 @@ export let Vector = (function() {
                 ctx.strokeStyle = baseColor;
             }
 
-            ctx.lineWidth = this.lineWidth;
+            ctx.lineWidth = drawingLineWidth;
             ctx.globalAlpha = this.opacity;
 
             ctx.beginPath();
@@ -147,7 +155,7 @@ export let Vector = (function() {
             if (this.arrow) {
                 // draw the arrow
                 var angle, x, y, xh, yh;
-                var arrowRad = this.lineWidth * 3;
+                var arrowRad = drawingLineWidth * 3;
 
                 angle = Math.atan2(v2[1] - v1[1], v2[0] - v1[0])
                 xh = v2[0];
@@ -192,7 +200,7 @@ export let Vector = (function() {
 
             xy1 = {x: xy1[0], y: xy1[1]};
             xy2 = {x: xy2[0], y: xy2[1]};
-    
+
             // Check if line segment intersects with the bounding box
             if (Polyline.segmentIntersectsBox(xy1, xy2, x, y, w, h)) {
                 return true;