diff --git a/js/models/event_handler.js b/js/models/event_handler.js index 0406e99f..81fedda7 100644 --- a/js/models/event_handler.js +++ b/js/models/event_handler.js @@ -1,5 +1,5 @@ import MessageHandler from "./message_handler"; -import { Lock } from "../utils"; +import { divNumber, Lock } from "../utils"; export default class EventHandler { /** @@ -15,6 +15,23 @@ export default class EventHandler { this.messageHandler = new MessageHandler(aladin, model); } + /** + * Checks if the current div is the last active div. + * @returns {boolean} + */ + isLastDiv() { + let maxDiv = divNumber; + for (let i = maxDiv; i >= 0; i--) { + const alDiv = document.getElementById(`aladin-lite-div-${i}`); + if (!alDiv) continue; + if (alDiv.style.display !== "none") { + maxDiv = i; + break; + } + } + return parseInt(this.aladinDiv.id.split("-").pop()) === maxDiv; + } + /** * Subscribes to all the events needed for the Aladin Lite widget. */ @@ -42,7 +59,7 @@ export default class EventHandler { } jsTargetLock.lock(); const raDec = [position.ra, position.dec]; - this.model.set("_wcs", this.aladin.getViewWCS()); + if (this.isLastDiv()) this.model.set("_wcs", this.aladin.getViewWCS()); this.model.set("_target", `${raDec[0]} ${raDec[1]}`); this.model.save_changes(); }); @@ -69,13 +86,15 @@ export default class EventHandler { } jsFovLock.lock(); // fov MUST be cast into float in order to be sent to the model - this.model.set("_wcs", this.aladin.getViewWCS()); + if (this.isLastDiv()) { + this.model.set("_wcs", this.aladin.getViewWCS()); + const twoAxisFoV = this.aladin.getFov(); + this.model.set("_fov_xy", { + x: twoAxisFoV[0], + y: twoAxisFoV[1], + }); + } this.model.set("_fov", parseFloat(fov.toFixed(5))); - const twoAxisFoV = this.aladin.getFov(); - this.model.set("_fov_xy", { - x: twoAxisFoV[0], - y: twoAxisFoV[1], - }); this.model.save_changes(); }); @@ -93,7 +112,8 @@ export default class EventHandler { this.model.on("change:_height", () => { let height = this.model.get("_height"); this.aladinDiv.style.height = `${height}px`; - // Update WCS and FoV + // Update WCS and FoV only if this is the last div + if (!this.isLastDiv()) return; this.model.set("_wcs", this.aladin.getViewWCS()); const twoAxisFoV = this.aladin.getFov(); this.model.set("_fov_xy", { @@ -106,22 +126,26 @@ export default class EventHandler { /* Aladin callbacks */ this.aladin.on("cooFrameChanged", () => { + if (!this.isLastDiv()) return; this.model.set("_wcs", this.aladin.getViewWCS()); this.model.save_changes(); }); this.aladin.on("projectionChanged", () => { + if (!this.isLastDiv()) return; this.model.set("_wcs", this.aladin.getViewWCS()); this.model.save_changes(); }); this.aladin.on("layerChanged", (_, layerName, state) => { + if (!this.isLastDiv()) return; if (layerName !== "base" || state !== "ADDED") return; this.model.set("_wcs", this.aladin.getViewWCS()); this.model.save_changes(); }); this.aladin.on("resizeChanged", () => { + if (!this.isLastDiv()) return; this.model.set("_wcs", this.aladin.getViewWCS()); const twoAxisFoV = this.aladin.getFov(); this.model.set("_fov_xy", { @@ -163,6 +187,7 @@ export default class EventHandler { }); this.aladin.on("click", (clickContent) => { + console.log("Click", this.isLastDiv()); this.model.send({ event_type: "click", content: clickContent, diff --git a/js/models/message_handler.js b/js/models/message_handler.js index 28294c7e..76fd9a25 100644 --- a/js/models/message_handler.js +++ b/js/models/message_handler.js @@ -30,8 +30,6 @@ export default class MessageHandler { URL.revokeObjectURL(url); }); this.aladin.setOverlayImageLayer(image, options.name); - // this.model.set("_wcs", this.aladin.getViewWCS()); - // this.model.save_changes(); } handleAddCatalogFromURL(msg) { diff --git a/js/utils.js b/js/utils.js index 41cc3660..d2ac7295 100644 --- a/js/utils.js +++ b/js/utils.js @@ -41,4 +41,15 @@ class Lock { } } -export { snakeCaseToCamelCase, convertOptionNamesToCamelCase, Lock }; +let divNumber = -1; +function setDivNumber(num) { + divNumber = num; +} + +export { + snakeCaseToCamelCase, + convertOptionNamesToCamelCase, + Lock, + divNumber, + setDivNumber, +}; diff --git a/js/widget.js b/js/widget.js index 3be29317..778d1872 100644 --- a/js/widget.js +++ b/js/widget.js @@ -1,11 +1,15 @@ import "./widget.css"; import EventHandler from "./models/event_handler"; -import { snakeCaseToCamelCase } from "./utils"; +import { + divNumber, + getDivNumber, + setDivNumber, + snakeCaseToCamelCase, +} from "./utils"; import A from "./aladin_lite"; -let idxView = 0; - function initAladinLite(model, el) { + setDivNumber(divNumber + 1); let initOptions = {}; model.get("init_options").forEach((option_name) => { initOptions[snakeCaseToCamelCase(option_name)] = model.get(option_name); @@ -15,9 +19,8 @@ function initAladinLite(model, el) { aladinDiv.classList.add("aladin-widget"); aladinDiv.style.height = `${initOptions["height"]}px`; - aladinDiv.id = `aladin-lite-div-${idxView}`; + aladinDiv.id = `aladin-lite-div-${divNumber}`; let aladin = new A.aladin(aladinDiv, initOptions); - idxView += 1; // Set the target again after the initialization to be sure that the target is set // from icrs coordinates because of the use of gotoObject in the Aladin Lite API