impl https://github.com/cds-astro/aladin-lite/issues/337

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### 3.8.0
 
+* [feat] Selected and hovered items (shapes, sources, ...) are rendered at last. <https://github.com/cds-astro/aladin-lite/issues/337>
 * [feat] Add selectionLineWidth option for shapes and catalogs. <https://github.com/cds-astro/aladin-lite/pull/354>
 * [fix] horizontal/vertical overlay lines appearing correctly <https://github.com/cds-astro/aladin-lite/issues/334>
 * [fix] layer opacity restored when switching from not visible to visible <https://github.com/cds-astro/aladin-lite/issues/332>

src/js/Catalog.js

@@ -1005,6 +1005,12 @@ export let Catalog = (function () {
             s.x = xy[2 * idx];
             s.y = xy[2 * idx + 1];
 
+            if (s.isHovered || s.isSelected) {
+                // These sources will be drawn on the top of the others so we mark it as drawn
+                // for the moment but will really draw them after all catalogs have been drawn
+                return true;
+            }
+
             return self.drawSource(s, ctx, width, height)
         };
 

src/js/Overlay.js

@@ -293,31 +293,12 @@ export let GraphicOverlay = (function() {
         ctx.lineWidth = this.lineWidth;
         ctx.setLineDash(this.lineDash);
 
-        // 1. Drawing polygons
-
-        // TODO: les overlay polygons devrait se tracer lui meme (methode draw)
-        //ctx.lineWidth = this.lineWidth;
-    	//ctx.beginPath();
-    	/*var xyviews = [];
-
-    	for (var k=0, len = this.overlays.length; k<len; k++) {
-    	    xyviews.push(this.drawFootprint(this.overlays[k], ctx, width, height));
-    	}*/
-        //ctx.stroke();
-
-    	// selection drawing
-        /*ctx.strokeStyle= Overlay.increaseBrightness(this.color, 50);
-        ctx.beginPath();
-        for (var k=0, len = this.overlays.length; k<len; k++) {
-            if (this.overlays[k].isSelected) {
-                this.drawFootprintSelected(ctx, xyviews[k]);
-            }
-        }
-    	ctx.stroke();*/
-
         // 2. Circle and polylines drawing
     	for (var k=0; k<this.overlayItems.length; k++) {
-    	    this.overlayItems[k].draw(ctx, this.view);
+            let item = this.overlayItems[k];
+            if (!item.isHovered && !item.isSelected) {
+                item.draw(ctx, this.view);
+            }
     	}
 
         ctx.restore();

src/js/Source.js

@@ -250,5 +250,11 @@ export let Source = (function() {
         }
     };
 
+    Source.prototype.draw = function(ctx, width, height) {
+        if (this.catalog) {
+            this.catalog.drawSource(this, ctx, width, height);
+        }
+    }
+
     return Source;
 })();

src/js/View.js

@@ -49,7 +49,7 @@ import { Image } from "./Image.js";
 import { Color } from "./Color.js";
 import { SpectraDisplayer } from "./SpectraDisplayer.js";
 import { DefaultActionsForContextMenu } from "./DefaultActionsForContextMenu.js";
-
+import { Source } from "./Source.js";
 export let View = (function () {
 
     /** Constructor */
@@ -991,7 +991,7 @@ export let View = (function () {
             }
         });
 
-        var lastHoveredObject; // save last object hovered by mouse
+        view.lastHoveredObject = null;
         var lastMouseMovePos = null;
         const pickColor = (xymouse) => {
             const layers = view.aladin.getStackLayers()
@@ -1162,26 +1162,26 @@ export let View = (function () {
 
                     for (let o of closests) {
 
-                        if (typeof objHoveredFunction === 'function' && (!lastHoveredObject || !lastHoveredObject.includes(o))) {
+                        if (typeof objHoveredFunction === 'function' && (!view.lastHoveredObject || !view.lastHoveredObject.includes(o))) {
                             var ret = objHoveredFunction(o, xymouse);
                         }
 
                         if (o.isFootprint()) {
-                            if (typeof footprintHoveredFunction === 'function' && (!lastHoveredObject || !lastHoveredObject.includes(o))) {
+                            if (typeof footprintHoveredFunction === 'function' && (!view.lastHoveredObject || !view.lastHoveredObject.includes(o))) {
                                 var ret = footprintHoveredFunction(o, xymouse);
                             }
                         }
 
-                        if (!lastHoveredObject || !lastHoveredObject.includes(o)) {
+                        if (!view.lastHoveredObject || !view.lastHoveredObject.includes(o)) {
                             o.hover();
                         }
                     }
 
                     // unhover the objects in lastHoveredObjects that are not in closest anymore
-                    if (lastHoveredObject) {
+                    if (view.lastHoveredObject) {
                         var objHoveredStopFunction = view.aladin.callbacksByEventName['objectHoveredStop'];
 
-                        for (let lho of lastHoveredObject) {
+                        for (let lho of view.lastHoveredObject) {
                             if (!closests.includes(lho)) {
                                 lho.unhover();
 
@@ -1191,19 +1191,19 @@ export let View = (function () {
                             }
                         }
                     }
-                    lastHoveredObject = closests;
+                    view.lastHoveredObject = closests;
                 } else {
                     view.setCursor('default');
-                    if (lastHoveredObject) {
+                    if (view.lastHoveredObject) {
                         var objHoveredStopFunction = view.aladin.callbacksByEventName['objectHoveredStop'];
 
                         /*if (typeof objHoveredStopFunction === 'function') {
                             // call callback function to notify we left the hovered object
-                            var ret = objHoveredStopFunction(lastHoveredObject, xymouse);
+                            var ret = objHoveredStopFunction(view.lastHoveredObject, xymouse);
                         }
 
-                        lastHoveredObject.unhover();*/
+                        view.lastHoveredObject.unhover();*/
-                        for (let lho of lastHoveredObject) {
+                        for (let lho of view.lastHoveredObject) {
                             lho.unhover();
 
                             if (typeof objHoveredStopFunction === 'function') {
@@ -1212,7 +1212,7 @@ export let View = (function () {
                         }
                     }
 
-                    lastHoveredObject = null;
+                    view.lastHoveredObject = null;
                 }
 
                 if (e.type === "mousemove") {
@@ -1444,6 +1444,7 @@ export let View = (function () {
                 cat.draw(ctx, this.width, this.height);
             }
         }
+
         // draw popup catalog
         if (this.catalogForPopup.isShowing && this.catalogForPopup.sources.length > 0) {
             if (!this.catalogCanvasCleared) {
@@ -1471,6 +1472,32 @@ export let View = (function () {
             }
         }
 
+        // Draw selected items (catalog sources, overlay, footprints, ...) afterwards
+        if (this.selection) {
+            this.selection.forEach((objList) => {
+                objList.forEach((o) => {
+                    if (o instanceof Source) {
+                        o.draw(ctx, this.width, this.height)
+                    } else {
+                        // Circle, Ellipse, Footprints, ...
+                        o.draw(ctx, this)
+                    }
+                })
+            });
+        }
+
+        // Draw hovered items afterwards
+        if (this.lastHoveredObject) {
+            this.lastHoveredObject.forEach((o) => {
+                if (o instanceof Source) {
+                    o.draw(ctx, this.width, this.height)
+                } else {
+                    // Circle, Ellipse, Footprints, ...
+                    o.draw(ctx, this)
+                }
+            })
+        }
+
         // Redraw HEALPix grid
         if (this.displayHpxGrid) {
             if (!this.catalogCanvasCleared) {