hide the popup when its associated Source is out of fov

examples/al-mars-features.html

@@ -55,7 +55,7 @@
 
         aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/mars-features.xml', {name: "Mars features", raField: 'Longitude', decField: 'Latitude', shape: drawFunction, onClick: 'showTable'}));
 
-        aladin.getBaseImageLayer().setColormap('yiorbr')
+        aladin.getBaseImageLayer().setColormap('ylorbr')
         aladin.gotoRaDec(226.1433542, 18.6308694);
 
     });

src/js/Catalog.js

@@ -514,6 +514,7 @@ export let Catalog = (function () {
             this.shape instanceof HTMLCanvasElement
         ) {
             this.sourceSize = this.shape.width;
+            this._shapeIsImageOrCanvas = true;
         }
 
         this.selectSize = this.sourceSize + 2;
@@ -886,6 +887,7 @@ export let Catalog = (function () {
         if (!this.isShowing) {
             return;
         }
+
         // tracé simple
         ctx.strokeStyle = this.color;
 
@@ -896,7 +898,6 @@ export let Catalog = (function () {
             ctx.save();
         }
 
-
         const drawnSources = this.drawSources(ctx, width, height);
 
         if (this._shapeIsFunction) {
@@ -926,12 +927,13 @@ export let Catalog = (function () {
             s.x = xy[2 * idx];
             s.y = xy[2 * idx + 1];
 
-            self.drawSource(s, ctx, width, height);
-            inside.push(s);
+            return self.drawSource(s, ctx, width, height)
         };
 
         let self = this;
         this.sources.forEach(function (s, idx) {
+            let drawn = false;
+            
             if (xy[2 * idx] && xy[2 * idx + 1]) {
                 if (self.filterFn) {
                     if(!self.filterFn(s)) {
@@ -939,10 +941,29 @@ export let Catalog = (function () {
                     } else {
                         s.show()
 
-                        drawSource(s, idx)
+                        drawn = drawSource(s, idx)
                     }
                 } else {
-                    drawSource(s, idx)
+                    drawn = drawSource(s, idx)
+                }
+            }
+
+            if (drawn) {
+                inside.push(s)
+            }
+
+            if (s.popup) {
+                let popup = s.popup;
+                // Update the position of the popup
+                if (drawn) {
+                    popup.setPosition(s.x, s.y)
+                }
+
+                // Hide/Show the popup if the popup is currently shown
+                if (popup.isShown && drawn) {
+                    popup.domEl.style.display = "block";
+                } else if (popup.isShown && !drawn) {
+                    popup.domEl.style.display = "none";
                 }
             }
         });
@@ -962,7 +983,16 @@ export let Catalog = (function () {
         if (s.x <= width && s.x >= 0 && s.y <= height && s.y >= 0) {
             if (this._shapeOperatesOnCtx) {
                 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;
+                ctx.drawImage(
+                    canvas,
+                    s.x - canvas.width / 2,
+                    s.y - canvas.height / 2
+                );
             } else if (s.image) {
+                // Per source image/canvas
                 ctx.drawImage(
                     s.image,
                     s.x - s.image.width / 2,
@@ -999,11 +1029,6 @@ export let Catalog = (function () {
                 );
             }
 
-            // has associated popup ?
-            if (s.popup) {
-                s.popup.setPosition(s.x, s.y);
-            }
-
             return true;
         }
 

src/js/Popup.js

@@ -66,7 +66,7 @@ export let Popup = (function() {
 
     Popup.prototype.setText = function(text) {
         this.domEl.querySelector('.aladin-popupText').innerHTML = text || '';
-        if (!this.isShown) {
+        if (this.domEl.style.display !== 'block') {
             // offsetWidth and offsetHeight are gettable
             // only if the dom element is displayed
             // so we display it and hide it just after

src/js/View.js

@@ -659,8 +659,6 @@ export let View = (function () {
             } else {
                 // If there is a past clicked object
                 if (view.lastClickedObject) {
-                    view.aladin.popup.hide();
-
                     // TODO: do we need to keep that triggering ?
                     var objClickedFunction = view.aladin.callbacksByEventName['objectClicked'];
                     (typeof objClickedFunction === 'function') && objClickedFunction(null, xy);
@@ -2043,9 +2041,6 @@ export let View = (function () {
         setTimeout(function () { self.refreshProgressiveCats(); }, 1000);
         // Apply position changed callback after the move
         self.throttledPositionChanged(false);
-
-        // hide the popup if it is open
-        this.aladin.hidePopup();
     };
 
     View.prototype.makeUniqLayerName = function (name) {