Make layer order editable via drag and drop

[MichaelBuessemeyer]

This PR makes the color layer settings sortable via drag. It adds a grabbing menu icon left to the enable/disable switch. Users can use this handle to adjust the order of the color layers which will affect the rendering output in case the cover mode is active. Afaik there is no difference for the additive blending mode.
The handle is only shown if there is more than one color layer.

URL of deployed dev instance (used for testing):

• https://___.webknossos.xyz

Steps to test:

Test 1:

• open a dataset with only one color layer (e.g. l4_sample in view mode or with a tracing)
• There should not be a handle next to the enable/disable switch of the color layer

Test 2:

• Open an annotation of a dataset with multiple color layers
• Give different colors to the color layers
• Turn on cover mode
• Reposition the color layers. It should be possible to see the changes of the repositioning by observing the changes in color due to the color layer having different configured colors.
• Reload the annotation
• The order of the layers should have persisted and rendering should still work and look as expected.

Issues:

• fixes Layer ordering for blend modes #7100

TODOs:

• Persist layer order settings
• Consider making segmentation layer not movable in the first version as there is currently no use case 🤔

Wanted Feedback:

• Currently, I called the field that saves the order of the color layers in the dataset configuration layerOrder. This is not as precise as it could be, because the variable only includes color layer names. Thus maybe colorLayerOrder would be more accurate and more understandable. But on the other hand, we might decide to also make the segmentation layer sortable and then the name would no longer be correct. I talked to Norman and his opinion is that the segmentation layer should not be sortable in the current state, as there is no real use-case right now for it and the segmentation layer will always be rendered on top; no matter whether one of the upper layers defines the pixel as covered by selecting cover blend mode or not. Therefore the current version does not include the segmentation layers being draggable / sortable. @philippotto what do you is the best name to keep for the field? In long term layerOrder might be smarter but more confusing right now and colorLayerOrder would be good at the moment, but bad once segmentation layers are also sortable which might come in the future.
• Update: I now renamed the field to colorLayerOrder

Important Note

In case anyone comes across this pr while developing the pr that makes segmentation layers sortable: There is already a working version at commit 4817a49

Bugs:

• rendering first segmentation layer and then color layer is broken 💔

---

(Please delete unneeded items, merge only when none are left open)

• Updated changelog

[philippotto]

nice stuff! DND works very nicely 👍

I left some comments. The biggest one is with regard to the shader recompilation which I would like to avoid as much as possible.

And another thought: maybe the reordering UI should be disabled when the layer mode is additive because it won't make a difference in that case? Otherwise, I imagine this to be a bit misleading..

[philippotto]

Is this ever written to?

[MichaelBuessemeyer]

Oh right, I missed that. This was designed to catch cases where the user drops the color layer at the same location to avoid shader recompilation. I now added a line that keep a copy of the previous layer order 👍 .

[MichaelBuessemeyer]

@philippotto I think I addressed everything and the layer rendering is now only enabled when the cover blend mode Is turned on.

[MichaelBuessemeyer]

Oh right, I missed that. This was designed to catch cases where the user drops the color layer at the same location to avoid shader recompilation. I now added a line that keep a copy of the previous layer order 👍 .

[philippotto]

excellent 👍 just check my one suggestion before merging :)