From bf12e85c70bdd96aa04a5a49a038fa6c37babec7 Mon Sep 17 00:00:00 2001 From: Matthieu Baumann Date: Fri, 14 Feb 2025 09:55:10 +0100 Subject: [PATCH] fix #228, complete the api doc to help the user understand the edge, fill and perimeter booleans --- examples/al-gw.html | 8 ++++---- examples/al-moc-json.html | 2 +- examples/al-moc-sdss9.html | 2 +- src/core/al-api/src/moc.rs | 2 +- src/js/MOC.js | 25 +++++++++++++------------ 5 files changed, 20 insertions(+), 19 deletions(-) diff --git a/examples/al-gw.html b/examples/al-gw.html index bebdabf1..617a92f3 100644 --- a/examples/al-gw.html +++ b/examples/al-gw.html @@ -14,10 +14,10 @@ A.init.then(() => { aladin = A.aladin('#aladin-lite-div', {survey: "data/hips/CDS_P_DSS2_color", showReticle: true, showSurveyStackControl: true, showOverlayStackControl: false, projection: "TAN", target: '15 16 57.636 -60 55 7.49', showProjectionControl: true, realFullscreen: true, showZoomControl: true, showSimbadPointerControl: true, showShareControl: true, showContextMenu: true, showCooGridControl: true, fullScreen: true, showCooGrid: true, fov: 180, log: false}); - var moc_0_99 = A.MOCFromURL("./data/gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.0, lineWidth: 10, fill: false, perimeter: true}); - var moc_0_95 = A.MOCFromURL("./data/gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true}); - var moc_0_5 = A.MOCFromURL("./data/gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true}); - var moc_0_2 = A.MOCFromURL("./data/gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true}); + var moc_0_99 = A.MOCFromURL("./data/gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.7, lineWidth: 10, fill: false, perimeter: true}); + var moc_0_95 = A.MOCFromURL("./data/gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.3, lineWidth: 3, fill: false, perimeter: true}); + var moc_0_5 = A.MOCFromURL("./data/gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 0.2, lineWidth: 3, fill: true, perimeter: true}); + var moc_0_2 = A.MOCFromURL("./data/gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 0.1, lineWidth: 3}); aladin.addMOC(moc_0_99); aladin.addMOC(moc_0_95); diff --git a/examples/al-moc-json.html b/examples/al-moc-json.html index c7d2d6a2..dece85da 100644 --- a/examples/al-moc-json.html +++ b/examples/al-moc-json.html @@ -24,7 +24,7 @@ //var json = {"3":[517], //"4":[2065, 2067]}; - var moc = A.MOCFromJSON(json, {opacity: 0.25, color: 'magenta', lineWidth: 1, adaptativeDisplay: false}); + var moc = A.MOCFromJSON(json, {opacity: 0.5, color: 'magenta', lineWidth: 1, adaptativeDisplay: false}); aladin.addMOC(moc); }); diff --git a/examples/al-moc-sdss9.html b/examples/al-moc-sdss9.html index 0c96d336..c49d6288 100644 --- a/examples/al-moc-sdss9.html +++ b/examples/al-moc-sdss9.html @@ -20,7 +20,7 @@ console.log(moc.serialize("json")) }); - var moc10 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=11&fmt=fits', {color: '#ffffff', perimeter: true, fillColor: '#aabbcc', opacity: 0.3, lineWidth: 3}); + var moc10 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=11&fmt=fits', {color: '#ffffff', perimeter: true, fill:true, fillColor: '#aabbcc', opacity: 0.3, lineWidth: 3}); var moc9 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=4&fmt=fits', {color: '#00ff00', opacity: 0.5, lineWidth: 3, perimeter: true}); aladin.addMOC(moc11); diff --git a/src/core/al-api/src/moc.rs b/src/core/al-api/src/moc.rs index 5992ffac..e5673696 100644 --- a/src/core/al-api/src/moc.rs +++ b/src/core/al-api/src/moc.rs @@ -42,7 +42,7 @@ impl MOC { } }; - let color = parse_color(hex_color, 1.0); + let color = parse_color(hex_color, opacity); let fill_color = parse_color(fill_color, opacity); Self { diff --git a/src/js/MOC.js b/src/js/MOC.js index fda717a3..c4fc55e1 100644 --- a/src/js/MOC.js +++ b/src/js/MOC.js @@ -20,13 +20,14 @@ import { ALEvent } from "./events/ALEvent.js"; * @description Options for configuring a MOC (Multi-Order-Coverage). * * @property {string} [name="MOC"] - The name of the catalog. -* @property {string} [color] - The color of the MOC HEALPix cell edges. -* @property {string} [fillColor] - A filling color of the MOC HEALPix cells. -* @property {string} [fill=false] - Fill the MOC with `options.fillColor` -* @property {string} [edge=true] - Draw the edges of the HEALPix cells with `options.color`. +* @property {string} [color] - The color of the MOC HEALPix cell edges. Is used only if `perimeter` is true or `edge` is true +* @property {string} [fillColor] - The filling of the MOC. +* @property {string} [fill=false] - Draw the filled MOC with `options.fillColor`. +* @property {Boolean} [perimeter=false] - Draw the perimeter of the MOC only with `options.color`. +* @property {string} [edge=!fill && !perimeter] - Draw the edges of the HEALPix cells with `options.color`. + The HEALPix cell edges compositing the MOC will be drawn if `fill` and `perimeter` are false * @property {number} [lineWidth=3] - The line width in pixels -* @property {Boolean} [perimeter=false] - A filling color of the MOC HEALPix cells. -* @property {number} [opacity=1.0] - The opacity of the MOC +* @property {number} [opacity=1.0] - The opacity of the colors */ export let MOC = (function() { @@ -59,7 +60,11 @@ export let MOC = (function() { this.perimeter = false; } - this.opacity = options.opacity || 1; + if (options && options.opacity !== undefined) { + this.opacity = options.opacity; + } else { + this.opacity = 1.0; + } if (options && options.fill) { this.fill = true; @@ -67,17 +72,13 @@ export let MOC = (function() { this.fill = false; } - if (options && options.opacity) { - this.fill = true; - } - if (options && options.edge) { this.edge = true; } else { this.edge = false; } - if (!this.fill && !this.perimeter && options && !options.edge) { + if (!this.fill && !this.perimeter && !this.edge) { this.edge = true; }