Window widget 2 (#552)

* Use ww and wl on one range slider

* Redo preset selection for new bar

* Change range slider values when window is edited by render interaction

* Change functions should respect lock state

* Locks can be selected to persist for the current scan, experiment, or project

* Use a custom range slider for dragging the middle

* Use colored locks with letters as lock icon

* Flip RAS Axial

web_client/src/components/CustomRangeSlider.vue

@@ -0,0 +1,68 @@
+<script lang="ts">
+import { VRangeSlider } from 'vuetify/lib';
+
+export default VRangeSlider.extend({
+  methods: {
+    // override
+    onSliderMouseDown(e) {
+      if (e.target.classList.contains('v-slider__track-fill')) {
+        this._middleDragStart = this.parseMouseMove(e);
+      } else {
+        this._middleDragStart = null;
+      }
+      VRangeSlider.options.methods.onSliderMouseDown.call(this, e);
+    },
+    // override
+    onSliderClick() {
+      // do nothing on click
+    },
+    // override
+    onMouseMove(e) {
+      const value = this.parseMouseMove(e);
+      if (e.type === 'mousemove') {
+        this.thumbPressed = true;
+      }
+      if (this._middleDragStart != null) {
+        const delta = value - this._middleDragStart;
+        this.applyRangeDelta(delta);
+      } else {
+        if (this.activeThumb === null) {
+          this.activeThumb = this.getIndexOfClosestValue(
+            this.internalValue,
+            value,
+          );
+        }
+        this.setInternalValue(value);
+      }
+    },
+    // override
+    applyRangeDelta(delta) {
+      // this.oldValue is from VRangeSlider::onSliderMouseDown
+      let [low, high] = this.oldValue;
+      // assumption: min <= low < high <= max
+      if (low + delta < this.min) {
+        high -= low - this.min;
+        low = this.min;
+      } else if (high + delta > this.max) {
+        low += this.max - high;
+        high = this.max;
+      } else {
+        low += delta;
+        high += delta;
+      }
+      this.internalValue = [low, high];
+    },
+  },
+});
+</script>
+
+<style scoped>
+.v-slider--horizontal .v-slider__track-container {
+  height: 5px;
+  display: flex;
+  align-items: center;
+}
+.v-slider__track-fill:hover {
+  cursor: grab;
+}
+</style>

web_client/src/components/VtkViewer.vue

@@ -158,7 +158,7 @@ export default {
       representationProperty.setColorLevel(this.currentWindowLevel);
       representationProperty.onModified(
         (property) => {
-          if (!this.windowLocked) {
+          if (!this.windowLocked.lock) {
             this.setCurrentWindowWidth(property.getColorWindow());
             this.setCurrentWindowLevel(property.getColorLevel());
           } else {