fix issue #234

src/js/ColorCfg.js

@@ -36,7 +36,7 @@
 
         // Colormap config options
         this.colormap = (options && options.colormap) || "native";
-        this.colormap = formatColormap(this.colormap);
+        this.colormap = this.colormap.toLowerCase();
 
         this.stretch = (options && options.stretch) || "linear";
         this.stretch = this.stretch.toLowerCase();
@@ -102,8 +102,7 @@
     }
     
     ColorCfg.prototype.setOptions = function(options) {
-        if (options.colormap)
+        this.setColormap(options.colormap, options)
-            this.setColormap(options.colormap, options)
 
         this.setCuts(options.minCut, options.maxCut)
 
@@ -207,43 +206,20 @@
         return this.additiveBlending;
     };
 
-    var formatColormap = function(colormap) {
-        /// colormap
-        // Make it case insensitive
-        colormap = colormap.toLowerCase();
-        /*if (!ColorCfg.COLORMAPS.includes(colormap)) {
-            console.warn("The colormap \'" + colormap + "\' is not supported. You should use one of the following: " + ColorCfg.COLORMAPS + "\n\'grayscale\' has been chosen by default.")
-            // If the user specify a colormap that is not supported,
-            // then set it to grayscale
-            colormap = "grayscale";
-        }*/
-
-        return colormap;
-    }
-
     // @api
     // Optional arguments, 
-    ColorCfg.prototype.setColormap = function(colormap = "native", options) {
+    ColorCfg.prototype.setColormap = function(colormap, options) {
-        if (colormap == null || colormap == undefined)
-            return;
-
         /// colormap
-        // Make it case insensitive
+        this.colormap = (colormap && colormap.toLowerCase()) || this.colormap;
-        let cmap = formatColormap(colormap);
 
         /// stretch
         let stretch = (options && options.stretch) || this.stretch || "linear";
-        stretch = stretch.toLowerCase();
+        this.stretch = stretch.toLowerCase()
 
         /// reversed
-        let reversed = false;
+        if (options && options.reversed !== undefined) {
-        if (options && options.reversed === true) {
+            this.reversed = options.reversed;
-            reversed = true;
         }
-
-        this.colormap = cmap;
-        this.stretch = stretch;
-        this.reversed = reversed;
     }
 
     // @api

src/js/HiPS.js

@@ -604,7 +604,8 @@ export let HiPS = (function () {
      *
      * @memberof HiPS
      *
-     * @param {string} [colormap="grayscale"] - The colormap label to use. See {@link https://matplotlib.org/stable/users/explain/colors/colormaps.html|here} for more info about colormaps.
+     * @param {string} [colormap] - The colormap label to use. See {@link https://matplotlib.org/stable/users/explain/colors/colormaps.html|here} for more info about colormaps. 
+     * If null or undefined, the colormap type is not changed.
      *      Possible values are:
      * <br>"blues"
      * <br>"cividis"
@@ -765,6 +766,12 @@ export let HiPS = (function () {
      */
     HiPS.prototype.setOptions = function(options) {
         this.colorCfg.setOptions(options);
+
+        // FIXME, change api of setColormap to take an option object having a name field
+        if (options.colormap == null || options.colormap == undefined) {
+            delete options.colormap;
+        }
+
         this.options = {...this.options, ...options};
 
         this._updateMetadata();

src/js/gui/Box/HiPSSettingsBox.js

@@ -49,7 +49,7 @@ import { Form } from "../Widgets/Form.js";
                     monochrome: true,
                     url: luminosityIconUrl
                 },
-                tooltip: {content: 'Luminosity sliders', position: {direction: 'bottom'}},
+                tooltip: {content: 'Contrast', position: {direction: 'bottom'}},
                 action: (e) => {
                     const content = Layout.vertical({
                         layout: [self.selector, self.luminositySettingsContent]
@@ -63,7 +63,7 @@ import { Form } from "../Widgets/Form.js";
                     monochrome: true,
                     url: opacityIconUrl
                 },
-                tooltip: {content: 'Opacity slider', position: {direction: 'bottom'}},
+                tooltip: {content: 'Opacity', position: {direction: 'bottom'}},
                 action: (e) => {
                     const content = Layout.vertical({layout: [self.selector, self.opacitySettingsContent]});
                     self.update({content})
@@ -86,7 +86,7 @@ import { Form } from "../Widgets/Form.js";
                     monochrome: true,
                     url: pixelHistIconUrl
                 },
-                tooltip: {content: 'Pixel cutouts', position: {direction: 'bottom'}},
+                tooltip: {content: 'Cutouts', position: {direction: 'bottom'}},
                 action: (e) => {
                     const content = Layout.vertical({layout: [self.selector, self.pixelSettingsContent]});
                     self.update({content})
@@ -236,15 +236,30 @@ import { Form } from "../Widgets/Form.js";
 
         let colorSettingsContent = new Form({
             subInputs: [{
-                label: 'colormap:',
+                    label: 'colormap:',
-                type: 'select',
+                    type: 'select',
-                name: 'cmap',
+                    name: 'cmap',
-                value: 'native',
+                    value: 'native',
-                options: aladin.getListOfColormaps(),
+                    options: aladin.getListOfColormaps(),
-                change: (e, cmapSelector) => {
+                    change: (e) => {
-                    self.options.layer.setColormap(e.target.value)
+                        self.options.layer.setColormap(e.target.value)
+                    },
                 },
-            }]
+                {
+                    label: 'reverse:',
+                    type: 'checkbox',
+                    name: 'reverse',
+                    cssStyle: {
+                        // so that it takes as much space as it can
+                        flex: "0 0 1",
+                    },
+                    checked: false,
+                    change: (e) => {
+                        let checked = colorSettingsContent.getInput("reverse").checked
+                        self.options.layer.setColormap(null, {reversed: checked})
+                    }
+                },
+            ]
         });
 
         super({
@@ -265,31 +280,37 @@ import { Form } from "../Widgets/Form.js";
         this.luminositySettingsContent = luminositySettingsContent;
     }
 
+    _update(layer) {
+        let colorCfg = layer.getColorCfg();
+        let stretch = colorCfg.stretch;
+        let colormap = colorCfg.getColormap();
+        let reversed = colorCfg.getReversed();
+
+        let [minCut, maxCut] = colorCfg.getCuts();
+        this.pixelSettingsContent.set('mincut', +minCut.toFixed(4))
+        this.pixelSettingsContent.set('maxcut', +maxCut.toFixed(4))
+        this.pixelSettingsContent.set('stretch', stretch)
+        let fmtInput = this.pixelSettingsContent.getInput('fmt')
+            
+        fmtInput.innerHTML = '';
+        for (const option of layer.formats) {
+            fmtInput.innerHTML += "<option>" + option + "</option>";
+        }
+        fmtInput.value = layer.imgFormat;
+            
+        this.colorSettingsContent.set('cmap', colormap);
+        this.colorSettingsContent.set('reverse', reversed);
+
+        this.opacitySettingsContent.set('opacity', layer.getOpacity());
+        this.luminositySettingsContent.set('brightness', colorCfg.getBrightness());
+        this.luminositySettingsContent.set('contrast', colorCfg.getContrast());
+        this.luminositySettingsContent.set('gamma', colorCfg.getGamma());
+        this.luminositySettingsContent.set('saturation', colorCfg.getSaturation());
+    }
+
     update(options) {
         if (options.layer) {
-            let hips = options.layer;
+            this._update(options.layer)
-            let colorCfg = hips.getColorCfg();
-            let stretch = colorCfg.stretch;
-            let colormap = colorCfg.getColormap();
-
-            let [minCut, maxCut] = colorCfg.getCuts();
-            this.pixelSettingsContent.set('mincut', +minCut.toFixed(4))
-            this.pixelSettingsContent.set('maxcut', +maxCut.toFixed(4))
-            this.pixelSettingsContent.set('stretch', stretch)
-            let fmtInput = this.pixelSettingsContent.getInput('fmt')
-
-            fmtInput.innerHTML = '';
-            for (const option of hips.formats) {
-                fmtInput.innerHTML += "<option>" + option + "</option>";
-            }
-            fmtInput.value = hips.imgFormat;
-
-            this.colorSettingsContent.set('cmap', colormap);
-            this.opacitySettingsContent.set('opacity', hips.getOpacity());
-            this.luminositySettingsContent.set('brightness', colorCfg.getBrightness());
-            this.luminositySettingsContent.set('contrast', colorCfg.getContrast());
-            this.luminositySettingsContent.set('gamma', colorCfg.getGamma());
-            this.luminositySettingsContent.set('saturation', colorCfg.getSaturation());
         }
 
         super.update(options)
@@ -300,28 +321,7 @@ import { Form } from "../Widgets/Form.js";
             const hips = e.detail.layer;
             let selectedLayer = this.options.layer;
             if (selectedLayer && hips.layer === selectedLayer.layer) {
-                let colorCfg = hips.getColorCfg();
+                this._update(hips)
-                let stretch = colorCfg.stretch;
-                let colormap = colorCfg.getColormap();
-    
-                let [minCut, maxCut] = colorCfg.getCuts();
-                this.pixelSettingsContent.set('mincut', +minCut.toFixed(4))
-                this.pixelSettingsContent.set('maxcut', +maxCut.toFixed(4))
-                this.pixelSettingsContent.set('stretch', stretch)
-                let fmtInput = this.pixelSettingsContent.getInput('fmt')
-    
-                fmtInput.innerHTML = '';
-                for (const option of hips.formats) {
-                    fmtInput.innerHTML += "<option>" + option + "</option>";
-                }
-                fmtInput.value = hips.imgFormat;
-    
-                this.colorSettingsContent.set('cmap', colormap);
-                this.opacitySettingsContent.set('opacity', hips.getOpacity());
-                this.luminositySettingsContent.set('brightness', colorCfg.getBrightness());
-                this.luminositySettingsContent.set('contrast', colorCfg.getContrast());
-                this.luminositySettingsContent.set('gamma', colorCfg.getGamma());
-                this.luminositySettingsContent.set('saturation', colorCfg.getSaturation());
             }
         });
 

src/js/gui/Widgets/Input.js

@@ -73,9 +73,11 @@ export class Input extends DOMElement {
 
             this.el.checked = this.options.checked;
 
-            if (this.options.click) {
+            // for checkbox widgets, we authorize calling the callback name click or change
+            let action = this.options.click || this.options.change;
+            if (action) {
                 this.el.removeEventListener('click', this.action);
-                this.action = this.options.click;
+                this.action = action;
 
                 this.el.addEventListener('click', this.action);
             }