Make layer order editable via drag and drop

frontend/javascripts/messages.tsx

@@ -76,7 +76,7 @@ export const settingsTooltips: Partial<Record<keyof RecommendedConfiguration, st
   zoom: "Zoom in or out in the data viewports",
   displayScalebars: "Show a scale in the lower-right corner of each viewport",
   blendMode:
-    "Set the blend mode for the dataset. The additive mode (default) adds the data values of all color layers. In cover mode, color layers are rendered on top of each other so that the data values of lower color layers are hidden by values of higher layers.",
+    "Set the blend mode for the dataset. The additive mode (default) adds the data values of all color layers. In cover mode, color layers are rendered on top of each other so that the data values of lower color layers are hidden by values of higher layers. Cover mode enables reordering of color layers.",
   renderWatermark: "Show a WEBKNOSSOS logo in the lower-left corner of each screenshot.",
   antialiasRendering: "Antialias rendering (can impact performance)",
 };

frontend/javascripts/oxalis/geometries/materials/plane_material_factory.ts

@@ -642,6 +642,7 @@ class PlaneMaterialFactory {
             colorLayerOrder.length !== oldLayerOrder.length ||
             colorLayerOrder.some((layerName, index) => layerName !== oldLayerOrder[index]);
           if (changedLayerOrder) {
+            oldLayerOrder = [...colorLayerOrder];
             this.recomputeShaders();
           }
           app.vent.emit("rerender");

frontend/javascripts/oxalis/model_initialization.ts

@@ -799,18 +799,19 @@ function ensureDatasetSettingsHasLayerOrder(
   const colorLayerNames = _.keys(datasetConfiguration.layers).filter((layerName) =>
     isColorLayer(dataset, layerName),
   );
+  const onlyExistingLayers =
+    datasetConfiguration?.colorLayerOrder?.filter(
+      (layerName) => colorLayerNames.indexOf(layerName) >= 0,
+    ) || [];
   if (
     datasetConfiguration.colorLayerOrder == null ||
-    datasetConfiguration.colorLayerOrder.length < colorLayerNames.length
+    onlyExistingLayers.length < colorLayerNames.length
   ) {
     return {
       ...datasetConfiguration,
       colorLayerOrder: colorLayerNames,
     };
   }
-  const onlyExistingLayers = datasetConfiguration.colorLayerOrder.filter(
-    (layerName) => colorLayerNames.indexOf(layerName) >= 0,
-  );
   return { ...datasetConfiguration, colorLayerOrder: onlyExistingLayers };
 }
 

frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.tsx

@@ -80,7 +80,7 @@ import {
 } from "oxalis/model/actions/settings_actions";
 import { userSettings } from "types/schemas/user_settings.schema";
 import type { Vector3, ControlMode } from "oxalis/constants";
-import Constants, { ControlModeEnum } from "oxalis/constants";
+import Constants, { BLEND_MODES, ControlModeEnum } from "oxalis/constants";
 import EditableTextLabel from "oxalis/view/components/editable_text_label";
 import LinkButton from "components/link_button";
 import { Model } from "oxalis/singletons";
@@ -381,7 +381,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     layerName: string,
     elementClass: string,
     layerSettings: DatasetLayerConfiguration,
-    draggingDisabled?: boolean,
+    draggingDisabled: boolean = true,
   ) => {
     const { tracing, dataset } = this.props;
     const { intensityRange } = layerSettings;
@@ -469,7 +469,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     const items = possibleItems.filter((el) => el);
     return (
       <div className="flex-container">
-        {draggingDisabled == null || draggingDisabled ? null : <DragHandle />}
+        {draggingDisabled ? null : <DragHandle />}
         {this.getEnableDisableLayerSwitch(isDisabled, onChange)}
         <div
           className="flex-item"
@@ -737,7 +737,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     layerName,
     layerConfiguration,
     isColorLayer,
-    draggingDisabled = undefined,
+    draggingDisabled = true,
   }: {
     layerName: string;
     layerConfiguration: DatasetLayerConfiguration | null | undefined;
@@ -1100,21 +1100,21 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
   };
 
   render() {
-    const { layers, colorLayerOrder } = this.props.datasetConfiguration;
+    const { layers, colorLayerOrder, blendMode } = this.props.datasetConfiguration;
     const LayerSettings = this.LayerSettings;
     const SortableLayerSettings = this.SortableLayerSettings;
 
     const segmentationLayerNames = Object.keys(layers).filter(
       (layerName) => !getIsColorLayer(this.props.dataset, layerName),
     );
+    const isSortingDisabled = colorLayerOrder.length < 2 || blendMode === BLEND_MODES.Additive;
     const colorLayerSettings = colorLayerOrder.map((layerName, index) => {
-      const isSortingDisabled = colorLayerOrder.length < 2;
       return (
         <SortableLayerSettings
           key={layerName}
           layerName={layerName}
           layerConfiguration={layers[layerName]}
-          isColorLayer={true}
+          isColorLayer
           index={index}
           disabled={isSortingDisabled}
           draggingDisabled={isSortingDisabled}