Only one active layer, fixes #1845

src/app/application.js

@@ -1233,7 +1233,7 @@ export class App {
    */
   zoom(step, cx, cy) {
     const layerGroup = this.#stage.getActiveLayerGroup();
-    const viewController = layerGroup.getActiveViewLayer().getViewController();
+    const viewController = layerGroup.getBaseViewLayer().getViewController();
     const k = viewController.getCurrentScrollPosition();
     const center = new Point3D(cx, cy, k);
     layerGroup.addScale(step, center);
@@ -1275,7 +1275,7 @@ export class App {
    */
   setDrawings(drawings, drawingsDetails, dataId) {
     const layerGroup = this.#stage.getActiveLayerGroup();
-    const viewLayer = layerGroup.getActiveViewLayer();
+    const viewLayer = layerGroup.getBaseViewLayer();
     const refDataId = viewLayer.getDataId();
     const viewController = viewLayer.getViewController();
 
@@ -1445,22 +1445,11 @@ export class App {
     // bind tool to active layer
     for (let i = 0; i < this.#stage.getNumberOfLayerGroups(); ++i) {
       const layerGroup = this.#stage.getLayerGroup(i);
-      // draw or view layer
-      const isDrawTool = tool === 'Draw' ||
-        tool === 'Livewire' ||
-        tool === 'Floodfill';
-      let layer;
-      if (isDrawTool &&
-        typeof layerGroup.getActiveDrawLayer() !== 'undefined') {
-        layer = layerGroup.getActiveDrawLayer();
-      } else {
-        layer = layerGroup.getActiveViewLayer();
-      }
+      const layer = layerGroup.getActiveLayer();
       if (typeof layer !== 'undefined') {
         this.#toolboxController.bindLayerGroup(layerGroup, layer);
       }
     }
-
     // set toolbox tool
     this.#toolboxController.setSelectedTool(tool);
   }

src/gui/layerGroup.js

@@ -149,18 +149,11 @@ export class LayerGroup {
   #offset = {x: 0, y: 0, z: 0};
 
   /**
-   * Active view layer index.
+   * Active layer index.
    *
    * @type {number}
    */
-  #activeViewLayerIndex = undefined;
-
-  /**
-   * Active draw layer index.
-   *
-   * @type {number}
-   */
-  #activeDrawLayerIndex = undefined;
+  #activeLayerIndex = undefined;
 
   /**
    * Listener handler.
@@ -480,18 +473,30 @@ export class LayerGroup {
     return count;
   }
 
+  /**
+   * Get the active image layer.
+   *
+   * @returns {ViewLayer|DrawLayer|undefined} The layer.
+   */
+  getActiveLayer() {
+    let layer;
+    if (typeof this.#activeLayerIndex !== 'undefined') {
+      layer = this.#layers[this.#activeLayerIndex];
+    }
+    return layer;
+  }
+
   /**
    * Get the active image layer.
    *
    * @returns {ViewLayer|undefined} The layer.
    */
   getActiveViewLayer() {
     let layer;
-    if (typeof this.#activeViewLayerIndex !== 'undefined') {
-      const tmpLayer = this.#layers[this.#activeViewLayerIndex];
-      if (tmpLayer instanceof ViewLayer) {
-        layer = tmpLayer;
-      }
+    const activeLayer = this.getActiveLayer();
+    if (typeof activeLayer !== 'undefined' &&
+      activeLayer instanceof ViewLayer) {
+      layer = activeLayer;
     }
     return layer;
   }
@@ -518,6 +523,24 @@ export class LayerGroup {
     return baseLayer;
   }
 
+  /**
+   * Get a view layer associated to a data id.
+   *
+   * @param {string} id The layer id.
+   * @returns {ViewLayer|undefined} The layer.
+   */
+  getViewLayerById(id) {
+    const callbackFn = function (layer) {
+      return layer.getId() === id;
+    };
+    const layers = this.getViewLayers(callbackFn);
+    let layer;
+    if (layers.length === 1) {
+      layer = layers[0];
+    }
+    return layer;
+  }
+
   /**
    * Get the view layers associated to a data id.
    *
@@ -571,110 +594,85 @@ export class LayerGroup {
    */
   getActiveDrawLayer() {
     let layer;
-    if (typeof this.#activeDrawLayerIndex !== 'undefined') {
-      const tmpLayer = this.#layers[this.#activeDrawLayerIndex];
-      if (tmpLayer instanceof DrawLayer) {
-        layer = tmpLayer;
-      }
+    const activeLayer = this.getActiveLayer();
+    if (typeof activeLayer !== 'undefined' &&
+      activeLayer instanceof DrawLayer) {
+      layer = activeLayer;
     }
     return layer;
   }
 
   /**
-   * Get the draw layers associated to a data id.
+   * Get a draw layer associated to a data id.
    *
-   * @param {string} dataId The data id.
-   * @returns {DrawLayer[]} The layers.
+   * @param {string} id The layer id.
+   * @returns {DrawLayer|undefined} The layer.
    */
-  getDrawLayersByDataId(dataId) {
+  getDrawLayerById(id) {
     const callbackFn = function (layer) {
-      return layer.getDataId() === dataId;
+      return layer.getId() === id;
     };
-    return this.getDrawLayers(callbackFn);
-  }
-
-  /**
-   * Set the active view layer.
-   *
-   * @param {number} index The index of the layer to set as active.
-   */
-  setActiveViewLayer(index) {
-    if (this.#layers[index] instanceof ViewLayer) {
-      this.#activeViewLayerIndex = index;
-      /**
-       * Active layer change event.
-       *
-       * @event LayerGroup#activelayerchange
-       * @type {object}
-       * @property {string} type The event type.
-       * @property {Array} value The changed value.
-       */
-      this.#fireEvent({
-        type: 'activelayerchange',
-        value: [this.#layers[index]]
-      });
-    } else {
-      logger.warn('No view layer to set as active with index: ' +
-        index);
+    const layers = this.getDrawLayers(callbackFn);
+    let layer;
+    if (layers.length === 1) {
+      layer = layers[0];
     }
+    return layer;
   }
 
   /**
-   * Set the active view layer with a data id.
+   * Get the draw layers associated to a data id.
    *
    * @param {string} dataId The data id.
+   * @returns {DrawLayer[]} The layers.
    */
-  setActiveViewLayerByDataId(dataId) {
-    let index;
-    for (let i = 0; i < this.#layers.length; ++i) {
-      if (this.#layers[i] instanceof ViewLayer &&
-        this.#layers[i].getDataId() === dataId) {
-        // stop at first one
-        index = i;
-        break;
-      }
-    }
-    if (typeof index !== 'undefined') {
-      this.setActiveViewLayer(index);
-    } else {
-      logger.warn('No view layer to set as active with dataId: ' +
-        dataId);
-    }
+  getDrawLayersByDataId(dataId) {
+    const callbackFn = function (layer) {
+      return layer.getDataId() === dataId;
+    };
+    return this.getDrawLayers(callbackFn);
   }
 
   /**
-   * Set the active draw layer.
+   * Set the active layer.
    *
-   * @param {number|undefined} index The index of the layer to set as active
-   *   or undefined to not set any.
+   * @param {number} index The index of the layer to set as active.
    */
-  setActiveDrawLayer(index) {
-    this.#activeDrawLayerIndex = index;
+  setActiveLayer(index) {
+    this.#activeLayerIndex = index;
+    /**
+     * Active layer change event.
+     *
+     * @event LayerGroup#activelayerchange
+     * @type {object}
+     * @property {string} type The event type.
+     * @property {Array} value The changed value.
+     */
     this.#fireEvent({
       type: 'activelayerchange',
       value: [this.#layers[index]]
     });
   }
 
   /**
-   * Set the active draw layer with a data id.
+   * Set the active layer with a data id.
    *
    * @param {string} dataId The data id.
    */
-  setActiveDrawLayerByDataId(dataId) {
+  setActiveLayerByDataId(dataId) {
     let index;
     for (let i = 0; i < this.#layers.length; ++i) {
-      if (this.#layers[i] instanceof DrawLayer &&
+      if (typeof this.#layers[i] !== 'undefined' &&
         this.#layers[i].getDataId() === dataId) {
         // stop at first one
         index = i;
         break;
       }
     }
     if (typeof index !== 'undefined') {
-      this.setActiveDrawLayer(index);
+      this.setActiveLayer(index);
     } else {
-      logger.warn('No draw layer to set as active with dataId: ' +
+      logger.warn('No layer to set as active with dataId: ' +
         dataId);
     }
   }
@@ -699,7 +697,7 @@ export class LayerGroup {
     // add layer
     this.#layers.push(layer);
     // mark it as active
-    this.setActiveViewLayer(viewLayerIndex);
+    this.setActiveLayer(viewLayerIndex);
     // bind view layer events
     this.#bindViewLayer(layer);
 
@@ -719,7 +717,7 @@ export class LayerGroup {
    */
   addDrawLayer() {
     // store active index
-    this.#activeDrawLayerIndex = this.#layers.length;
+    this.#activeLayerIndex = this.#layers.length;
     // create div
     const div = this.#getNextLayerDiv();
     // prepend to container
@@ -825,8 +823,7 @@ export class LayerGroup {
   empty() {
     this.#layers = [];
     // reset active indices
-    this.#activeViewLayerIndex = undefined;
-    this.#activeDrawLayerIndex = undefined;
+    this.#activeLayerIndex = undefined;
     // remove possible crosshair
     this.#removeCrosshairDiv();
     // clean container div
@@ -866,17 +863,15 @@ export class LayerGroup {
     if (index === -1) {
       throw new Error('Cannot find layer to remove');
     }
+    // update active index
+    if (this.#activeLayerIndex === index) {
+      this.#activeLayerIndex = undefined;
+    }
     // unbind and update active index
     if (layer instanceof ViewLayer) {
       this.#unbindViewLayer(layer);
-      if (this.#activeViewLayerIndex === index) {
-        this.#activeViewLayerIndex = undefined;
-      }
     } else {
       this.#unbindDrawLayer(layer);
-      if (this.#activeDrawLayerIndex === index) {
-        this.#activeDrawLayerIndex = undefined;
-      }
     }
     // reset in storage
     this.#layers[index] = undefined;
@@ -965,7 +960,7 @@ export class LayerGroup {
     // remove previous div
     this.removeTooltipDiv();
 
-    const viewLayer = this.getActiveViewLayer();
+    const viewLayer = this.getBaseViewLayer();
     const viewController = viewLayer.getViewController();
     const planePos = viewLayer.displayToPlanePos(point);
     const position = viewController.getPositionFromPlanePoint(planePos);

src/gui/stage.js

@@ -61,7 +61,8 @@ export class PositionBinder {
   getCallback = function (layerGroup) {
     return function (event) {
       const pointValues = event.value[1];
-      const vc = layerGroup.getActiveViewLayer().getViewController();
+      const vl = layerGroup.getBaseViewLayer();
+      const vc = vl.getViewController();
       // handle different number of dimensions
       const currentPos = vc.getCurrentPosition();
       const currentDims = currentPos.length();

src/io/state.js

@@ -84,8 +84,8 @@ export class State {
    */
   apply(app, data) {
     const layerGroup = app.getActiveLayerGroup();
-    const viewController =
-      layerGroup.getActiveViewLayer().getViewController();
+    const viewLayer = layerGroup.getBaseViewLayer();
+    const viewController = viewLayer.getViewController();
     // display
     const wl = new WindowLevel(data['window-center'], data['window-width']);
     viewController.setWindowLevel(wl);