prefer drawing the hover color over the selection color

examples/al-catalog-hips.html

@@ -11,7 +11,7 @@
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});
-        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showPopup', name: 'Simbad'});
+        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {hoverColor: 'yellow', onClick: 'showPopup', name: 'Simbad'});
         aladin.addCatalog(hips);
     });
 </script>

examples/al-footprints.html

@@ -15,7 +15,7 @@
         var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
         aladin.addOverlay(overlay);
         overlay.addFootprints([
-            A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]]),
+            A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]], {hoverColor: 'green'}),
             A.polygon([[83.62807, 22.06330], [83.58397, 22.02280], [83.62792, 22.02258]]),
             A.polygon([[8.62807, 220.06330], [83.58397, 10.02280], [150.62792, 87.02258]])
         ]);

examples/al-moc-sdss9.html

@@ -12,7 +12,7 @@
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/Mellinger/color'});
-        var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 3, fill: true}, (moc) => {
+        var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 3, perimeter: true}, (moc) => {
             // moc is ready
             console.log(moc.contains(205.9019247, +2.4492764));
             console.log(moc.contains(-205.9019247, +2.4492764));

examples/al-obscore.html

@@ -12,11 +12,11 @@
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'NGC 1367', fov: 360, samp: false, projection: 'AIT', fullScreen: true, showContextMenu: true});
 
-        A.catalogFromURL('https://raw.githubusercontent.com/VisIVOLab/SKA-Discovery-Service-Mockup/main/ObsCore/ObsCore_003.xml', {onClick: 'showTable'}, (catalog) => {
+        A.catalogFromURL('https://raw.githubusercontent.com/VisIVOLab/SKA-Discovery-Service-Mockup/main/ObsCore/ObsCore_003.xml', {onClick: 'showTable', hoverColor: 'purple'}, (catalog) => {
             aladin.addCatalog(catalog)
         });
 
-        aladin.addCatalog(A.catalogFromVizieR("B/assocdata/obscore", "0 +0", 20, {limit: 1000}))
+        aladin.addCatalog(A.catalogFromVizieR("B/assocdata/obscore", "0 +0", 20, {limit: 1000, hoverColor: 'cyan'}))
     });
 </script>
 </body>

examples/al-stcs-footprints.html

@@ -14,7 +14,7 @@
         let aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'Sgr a*', fov: 0.5, showContextMenu: true});
         // This table contains a s_region column containing stcs expressed regions
         // that are automatically parsed
-        aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/alma-footprints.xml', {name: 'ALMA footprints', onClick: 'showTable'}));
+        aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/alma-footprints.xml', {name: 'ALMA footprints', onClick: 'showTable', hoverColor: 'lightgreen'}));
     });
 </script>
 </body>

src/js/Aladin.js

@@ -134,6 +134,38 @@ import { CooFrame } from './gui/Input/CooFrame';
  * @property {boolean} [pixelateCanvas=true] - Whether to pixelate the canvas.
  */
 
+/**
+ * @typedef {Object} CircleSelection
+ * @description Options for configuring the Aladin Lite instance.
+ *
+ * @property {number} x - x coordinate of the center's circle in pixels
+ * @property {number} y - y coordinate of the center's circle in pixels
+ * @property {number} r - radius of the circle in pixels
+ * @property {function} contains - function taking a {x, y} object telling if the vertex is contained or not
+ * @property {function} bbox - returns the bbox of the selection in pixels 
+ */
+
+/**
+ * @typedef {Object} RectSelection
+ * @description Options for configuring the Aladin Lite instance.
+ *
+ * @property {number} x - top left x coordinate of the rectangle in pixels
+ * @property {number} y - top left y coordinate of the rectangle in pixels
+ * @property {number} w - width of the selection in pixels
+ * @property {number} h - height of the selection in pixels
+ * @property {function} contains - function taking a {x, y} object telling if the vertex is contained in the selection or not
+ * @property {function} bbox - returns the bbox of the selection in pixels 
+ */
+
+/**
+ * @typedef {Object} PolygonSelection
+ * @description Options for configuring the Aladin Lite instance.
+ *
+ * @property {Object[]} vertices - vertices of the polygon selection in pixels. Each vertex has a x and y key in pixels.
+ * @property {function} contains - function taking a {x, y} object telling if the vertex is contained in the selection or not
+ * @property {function} bbox - returns the bbox of the selection in pixels 
+ */
+
 /**
  * @typedef {string} CooFrame
  * String with possible values: 'equatorial', 'ICRS', 'ICRSd', 'j2000', 'gal, 'galactic'
@@ -1525,8 +1557,12 @@ export let Aladin = (function () {
      * Enters selection mode
      *
      * @memberof Aladin
-     * @param {string} mode=rect - The mode of selection, can be either, 'rect', 'poly', or 'circle'
-     * @param {function} callback - A function called once the selection has been done
+     * @param {string} [mode='rect'] - The mode of selection, can be either, 'rect', 'poly', or 'circle'
+     * @param {function} [callback] - A function called once the selection has been done
+     * The callback accepts one parameter depending of the mode used: <br/>
+     * - If mode='circle' that parameter is of type {@link CircleSelection} <br/>
+     * - If mode='rect' that parameter is of type {@link RectSelection} <br/>
+     * - If mode='poly' that parameter is of type {@link PolygonSelection}
     *
     * @example
     * // Creates and add a MOC from the user polygonal selection

src/js/Catalog.js

@@ -62,6 +62,8 @@ export let Catalog = (function() {
     * @param {string} [options.raField] - The ID or name of the field holding Right Ascension (RA).
     * @param {string} [options.decField] - The ID or name of the field holding Declination (dec).
     * @param {function} [options.filter] - The filtering function for sources.
+    * @param {string} [options.selectionColor] - The color to apply to selected sources in the catalog.
+    * @param {string} [options.hoverColor] - The color to apply to sources in the catalog when they are hovered.
     * @param {boolean} [options.displayLabel=false] - Whether to display labels for sources.
     * @param {string} [options.labelColumn] - The name of the column to be used for the label.
     * @param {string} [options.labelColor] - The color of the source labels.
@@ -81,6 +83,8 @@ export let Catalog = (function() {
     *   raField: "ra",
     *   decField: "dec",
     *   filter: (source) => source.mag < 15,
+    *   selectionColor: "#00ff00",
+    *   hoverColor: "#ff00ff",
     *   displayLabel: true,
     *   labelColor: "#00ff00",
     *   labelFont: "12px Arial"
@@ -107,7 +111,8 @@ 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 || this.color;
         this.displayLabel = options.displayLabel || false;
         this.labelColor = options.labelColor || this.color;
         this.labelFont = options.labelFont || '10px sans-serif';
@@ -118,8 +123,6 @@ export let Catalog = (function() {
             }
         }
 
-    	this.selectionColor = '#00ff00';
-
         this.showFieldCallback = {}; // callbacks when the user clicks on a cell in the measurement table associated
         this.fields = undefined;
         this.uuid = Utils.uuidv4();
@@ -462,7 +465,7 @@ export let Catalog = (function() {
 
         this.cacheCanvas = Catalog.createShape(this.shape, this.color, this.sourceSize);
         this.cacheSelectCanvas = Catalog.createShape(this.shape, this.selectionColor, this.selectSize);
-        this.cacheHoverCanvas = Catalog.createShape(this.shape, this.hoverColor, this.sourceSize);
+        this.cacheHoverCanvas = Catalog.createShape(this.shape, this.hoverColor, this.selectSize);
 
         this.reportChange();
     };
@@ -507,6 +510,7 @@ export let Catalog = (function() {
     	    footprintsToAdd[k].setCatalog(this);
             footprintsToAdd[k].setColor(this.color);
             footprintsToAdd[k].setSelectionColor(this.selectionColor);
+            footprintsToAdd[k].setHoverColor(this.hoverColor);
     	}
         this.reportChange();
     };
@@ -732,6 +736,9 @@ export let Catalog = (function() {
             else if (s.marker && s.useMarkerDefaultIcon) {
                 ctx.drawImage(this.cacheMarkerCanvas, s.x-this.sourceSize/2, s.y-this.sourceSize/2);
             }
+            else if (s.isHovered) {
+                ctx.drawImage(this.cacheHoverCanvas, s.x-this.selectSize/2, s.y-this.selectSize/2);
+            }
             else if (s.isSelected) {
                 ctx.drawImage(this.cacheSelectCanvas, s.x-this.selectSize/2, s.y-this.selectSize/2);
             }

src/js/Circle.js

@@ -41,6 +41,8 @@ export let Circle = (function() {
         this.color     = options['color']     || undefined;
         this.fillColor = options['fillColor'] || undefined;
         this.lineWidth = options["lineWidth"] || 2;
+        this.selectionColor = options["selectionColor"] || '#00ff00';
+        this.hoverColor = options["hoverColor"] || undefined;
 
         // TODO : all graphic overlays should have an id
         this.id = 'circle-' + Utils.uuidv4();
@@ -51,7 +53,7 @@ export let Circle = (function() {
 
     	this.isShowing = true;
     	this.isSelected = false;
-        this.selectionColor = '#00ff00';
+        this.isHovered = false;
     };
 
     Circle.prototype.setColor = function(color) {
@@ -74,6 +76,16 @@ export let Circle = (function() {
         }
     };
 
+    Circle.prototype.setHoverColor = function(color) {
+        if (this.hoverColor == color) {
+            return;
+        }
+        this.hoverColor = color;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
     Circle.prototype.setLineWidth = function(lineWidth) {
         if (this.lineWidth == lineWidth) {
             return;
@@ -132,6 +144,26 @@ export let Circle = (function() {
         }
     };
 
+    Circle.prototype.hover = function() {
+        if (this.isHovered) {
+            return;
+        }
+        this.isHovered = true;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    }
+
+    Circle.prototype.unhover = function() {
+        if (! this.isHovered) {
+            return;
+        }
+        this.isHovered = false;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    }
+
     Circle.prototype.isFootprint = function() {
         return true;
     }
@@ -224,8 +256,9 @@ export let Circle = (function() {
             } else {
                 ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
             }
-        }
-        else {
+        } else if (this.isHovered) {
+            ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
+        } else {
             ctx.strokeStyle = baseColor;
         }
 

src/js/Ellipse.js

@@ -41,6 +41,8 @@ export let Ellipse = (function() {
         this.color = options['color'] || undefined;
         this.fillColor = options['fillColor'] || undefined;
         this.lineWidth = options["lineWidth"] || 2;
+        this.selectionColor = options["selectionColor"] || '#00ff00';
+        this.hoverColor = options["hoverColor"] || undefined;
 
         // TODO : all graphic overlays should have an id
         this.id = 'ellipse-' + Utils.uuidv4();
@@ -52,8 +54,7 @@ export let Ellipse = (function() {
     	
     	this.isShowing = true;
         this.isSelected = false;
-
-        this.selectionColor = '#00ff00';
+        this.isHovered = false;
     };
 
     Ellipse.prototype.setColor = function(color) {
@@ -76,6 +77,16 @@ export let Ellipse = (function() {
         }
     };
 
+    Ellipse.prototype.setHoverColor = function(color) {
+        if (this.hoverColor == color) {
+            return;
+        }
+        this.hoverColor = color;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
     Ellipse.prototype.setLineWidth = function(lineWidth) {
         if (this.lineWidth == lineWidth) {
             return;
@@ -135,6 +146,25 @@ export let Ellipse = (function() {
     };
 
 
+    Ellipse.prototype.hover = function() {
+        if (this.isHovered) {
+            return;
+        }
+        this.isHovered = true;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    }
+
+    Ellipse.prototype.unhover = function() {
+        if (! this.isHovered) {
+            return;
+        }
+        this.isHovered = false;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    }
     
     Ellipse.prototype.setCenter = function(centerRaDec) {
         this.centerRaDec = centerRaDec;
@@ -221,8 +251,9 @@ export let Ellipse = (function() {
             } else {
                 ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
             }
-        }
-        else {
+        } else if (this.isHovered) {
+            ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
+        } else {
             ctx.strokeStyle = baseColor;
         }
 

src/js/Footprint.js

@@ -46,6 +46,7 @@ export let Footprint= (function() {
         this.shapes = shapes;
 
         this.isShowing = true;
+        this.isHovered = false;
 
         this.overlay = null;
     };
@@ -82,6 +83,36 @@ export let Footprint= (function() {
         this.shapes.forEach((shape) => shape.deselect())
     };
 
+    Footprint.prototype.hover = function() {
+        if (this.isHovered) {
+            return;
+        }
+
+        this.isHovered = true;
+        this.shapes.forEach((shape) => shape.hover())
+
+        if (this.overlay) {
+            this.overlay.reportChange();
+        } else if (this.source && this.source.catalog) {
+            this.source.catalog.view && this.source.catalog.view.requestRedraw();
+        }
+    };
+
+    Footprint.prototype.unhover = function() {
+        if (!this.isHovered) {
+            return;
+        }
+
+        this.isHovered = false;
+        this.shapes.forEach((shape) => shape.unhover())
+
+        if (this.overlay) {
+            this.overlay.reportChange();
+        } else if (this.source && this.source.catalog) {
+            this.source.catalog.view && this.source.catalog.view.requestRedraw();
+        }
+    };
+
     Footprint.prototype.setLineWidth = function(lineWidth) {
         this.shapes.forEach((shape) => shape.setLineWidth(lineWidth))
     };
@@ -100,6 +131,10 @@ export let Footprint= (function() {
         this.shapes.forEach((shape) => shape.setSelectionColor(color))
     };
 
+    Footprint.prototype.setHoverColor = function(color) {
+        this.shapes.forEach((shape) => shape.setHoverColor(color))
+    };
+
     Footprint.prototype.isFootprint = function() {
         return true;
     }

src/js/Polyline.js

@@ -83,6 +83,8 @@ export let Polyline= (function() {
         this.fillColor = options['fillColor'] || undefined;
         this.opacity   = options['opacity']   || undefined;
         this.lineWidth = options["lineWidth"] || undefined;
+        this.selectionColor = options["selectionColor"] || '#00ff00';
+        this.hoverColor = options["hoverColor"] || undefined;
 
         if (options["closed"]) {
             this.closed = options["closed"];
@@ -98,8 +100,7 @@ export let Polyline= (function() {
 
     	this.isShowing = true;
     	this.isSelected = false;
-
-        this.selectionColor = '#00ff00';
+        this.isHovered = false;
     };
 
     Polyline.prototype.setOverlay = function(overlay) {
@@ -146,6 +147,26 @@ export let Polyline= (function() {
         }
     };
 
+    Polyline.prototype.hover = function() {
+        if (this.isHovered) {
+            return;
+        }
+        this.isHovered = true;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
+    Polyline.prototype.unhover = function() {
+        if (! this.isHovered) {
+            return;
+        }
+        this.isHovered = false;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
     Polyline.prototype.getLineWidth = function() {
         return this.lineWidth;
     };
@@ -181,6 +202,16 @@ export let Polyline= (function() {
         }
     };
 
+    Polyline.prototype.setHoverColor = function(color) {
+        if (this.hoverColor == color) {
+            return;
+        }
+        this.hoverColor = color;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
     Polyline.prototype.isFootprint = function() {
         // The polyline is a footprint if it describes a polygon (i.e. a closed polyline)
         return this.closed;
@@ -215,9 +246,10 @@ export let Polyline= (function() {
             } else {
                 ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
             }
-        }
-        else {
-            ctx.strokeStyle= baseColor;
+        } else if (this.isHovered) {
+            ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
+        } else {
+            ctx.strokeStyle = baseColor;
         }
 
         // 1. project the vertices into the screen

src/js/ProgressiveCat.js

@@ -65,6 +65,8 @@ export let ProgressiveCat = (function() {
         this.sourceSize = options.sourceSize || 6;
         this.selectSize = this.sourceSize + 2;
         this.selectionColor = '#00ff00'; // TODO: to be merged with Catalog
+        this.hoverColor = options.hoverColor || this.color;
+
 
         // allows for filtering of sources
         this.filterFn = options.filter || undefined; // TODO: do the same for catalog

src/js/Source.js

@@ -46,6 +46,7 @@ export let Source = (function() {
 
     	this.isShowing = true;
     	this.isSelected = false;
+        this.isHovered = false;
     };
 
     Source.prototype.setCatalog = function(catalog) {
@@ -96,6 +97,26 @@ export let Source = (function() {
         }
     };
 
+    Source.prototype.hover = function() {
+        if (this.isHovered) {
+            return;
+        }
+        this.isHovered = true;
+        if (this.catalog) {
+            this.catalog.reportChange();
+        }
+    }
+
+    Source.prototype.unhover = function() {
+        if (! this.isHovered) {
+            return;
+        }
+        this.isHovered = false;
+        if (this.catalog) {
+            this.catalog.reportChange();
+        }
+    }
+
     // function called when a source is clicked. Called by the View object
     Source.prototype.actionClicked = function(obj) {
         if (this.catalog && this.catalog.onClick) {

src/js/View.js

@@ -989,22 +989,32 @@ export let View = (function () {
                         }
                     }
 
+                    if (lastHoveredObject && o != lastHoveredObject) {
+                        lastHoveredObject.unhover();
+
+                        var objHoveredStopFunction = view.aladin.callbacksByEventName['objectHoveredStop'];
+
+                        if (typeof objHoveredStopFunction === 'function') {
+                            objHoveredStopFunction(lastHoveredObject, xymouse);
+                        }
+                    }
+
+                    if (o != lastHoveredObject) {
+                        o.hover();
+                    }
                     lastHoveredObject = o;
                 } else {
                     view.setCursor('default');
                     var objHoveredStopFunction = view.aladin.callbacksByEventName['objectHoveredStop'];
                     if (lastHoveredObject) {
-                        // Redraw the scene if the lastHoveredObject is a footprint (e.g. circle or polygon)
-                        //if (lastHoveredObject.isFootprint()) {
-                        //    view.requestRedraw();
-                        //}
-
                         if (typeof objHoveredStopFunction === 'function') {
                             // call callback function to notify we left the hovered object
                             var ret = objHoveredStopFunction(lastHoveredObject, xymouse);
                         }
-                    }
 
+                        lastHoveredObject.unhover();
+                    }
+                    
                     lastHoveredObject = null;
                 }