volview 4.0.0

package/src/components/ToolStrip.vue

@@ -0,0 +1,186 @@
+<template>
+  <item-group
+    mandatory
+    class="d-flex flex-column align-center"
+    :value="currentTool"
+    @change="setCurrentTool($event)"
+  >
+    <div class="my-1 tool-separator" />
+    <groupable-item
+      v-slot:default="{ active, toggle }"
+      :value="Tools.WindowLevel"
+    >
+      <tool-button
+        size="40"
+        icon="mdi-circle-half-full"
+        name="Window & Level"
+        :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
+        :disabled="noCurrentImage"
+        @click="toggle"
+      />
+    </groupable-item>
+    <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Pan">
+      <tool-button
+        size="40"
+        icon="mdi-cursor-move"
+        name="Pan"
+        :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
+        :disabled="noCurrentImage"
+        @click="toggle"
+      />
+    </groupable-item>
+    <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Zoom">
+      <tool-button
+        size="40"
+        icon="mdi-magnify-plus-outline"
+        name="Zoom"
+        :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
+        :disabled="noCurrentImage"
+        @click="toggle"
+      />
+    </groupable-item>
+    <groupable-item
+      v-slot:default="{ active, toggle }"
+      :value="Tools.Crosshairs"
+    >
+      <tool-button
+        size="40"
+        icon="mdi-crosshairs"
+        name="Crosshairs"
+        :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
+        :disabled="noCurrentImage"
+        @click="toggle"
+      />
+    </groupable-item>
+    <div class="my-1 tool-separator" />
+    <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Paint">
+      <v-menu
+        v-model="paintMenu"
+        offset-x
+        :close-on-content-click="false"
+        :disabled="!active"
+      >
+        <template v-slot:activator="{ attrs, on }">
+          <div>
+            <tool-button
+              size="40"
+              icon="mdi-brush"
+              name="Paint"
+              :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
+              :disabled="noCurrentImage"
+              @click.stop="toggle"
+              v-on="on"
+              v-bind="attrs"
+            >
+              <v-icon v-if="active" class="menu-more" size="18">
+                mdi-menu-right
+              </v-icon>
+            </tool-button>
+          </div>
+        </template>
+        <paint-controls />
+      </v-menu>
+    </groupable-item>
+    <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Ruler">
+      <tool-button
+        size="40"
+        icon="mdi-ruler"
+        name="Ruler"
+        :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
+        :disabled="noCurrentImage"
+        @click="toggle"
+      />
+    </groupable-item>
+    <div class="my-1 tool-separator" />
+    <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Crop">
+      <v-menu v-model="cropMenu" offset-x open-on-hover close-on-content-click>
+        <template v-slot:activator="{ attrs, on }">
+          <div>
+            <tool-button
+              size="40"
+              icon="mdi-crop"
+              name="Crop"
+              :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
+              :disabled="noCurrentImage"
+              @click.stop="toggle"
+              v-on="on"
+              v-bind="attrs"
+            >
+              <v-icon v-if="active" class="menu-more" size="18">
+                mdi-menu-right
+              </v-icon>
+            </tool-button>
+          </div>
+        </template>
+        <crop-controls />
+      </v-menu>
+    </groupable-item>
+  </item-group>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from '@vue/composition-api';
+import { onKeyDown } from '@vueuse/core';
+import { Tools } from '@/src/store/tools/types';
+import ToolButton from './ToolButton.vue';
+import ItemGroup from './ItemGroup.vue';
+import GroupableItem from './GroupableItem.vue';
+import { useDatasetStore } from '../store/datasets';
+import { useToolStore } from '../store/tools';
+import PaintControls from './PaintControls.vue';
+import CropControls from './tools/crop/CropControls.vue';
+
+export default defineComponent({
+  components: {
+    ToolButton,
+    ItemGroup,
+    GroupableItem,
+    PaintControls,
+    CropControls,
+  },
+  setup() {
+    const dataStore = useDatasetStore();
+    const toolStore = useToolStore();
+
+    const noCurrentImage = computed(() => !dataStore.primaryDataset);
+    const currentTool = computed(() => toolStore.currentTool);
+
+    const paintMenu = ref(false);
+    const cropMenu = ref(false);
+
+    onKeyDown('Escape', () => {
+      paintMenu.value = false;
+      cropMenu.value = false;
+    });
+
+    return {
+      currentTool,
+      setCurrentTool: toolStore.setCurrentTool,
+      noCurrentImage,
+      Tools,
+      paintMenu,
+      cropMenu,
+    };
+  },
+});
+</script>
+
+<style>
+.tool-btn-selected {
+  background-color: rgba(128, 128, 255, 0.7);
+}
+</style>
+
+<style scoped>
+.menu-more {
+  position: absolute;
+  right: -50%;
+}
+
+.tool-separator {
+  width: 75%;
+  height: 1px;
+  border: none;
+  border-top: 1px solid rgb(112, 112, 112);
+}
+</style>

package/src/components/ViewOverlayGrid.vue

@@ -0,0 +1,84 @@
+<template>
+  <div :class="$style.gridRoot">
+    <div :class="[$style.top, $style.row]">
+      <div :class="[$style.left, $style.cell]">
+        <slot name="top-left" />
+      </div>
+      <div :class="[$style.center, $style.cell]">
+        <slot name="top-middle" />
+      </div>
+      <div :class="[$style.right, $style.cell]">
+        <slot name="top-right" />
+      </div>
+    </div>
+    <div :class="[$style.middle, $style.row]">
+      <div :class="[$style.left, $style.cell]">
+        <slot name="middle-left" />
+      </div>
+      <div :class="[$style.center, $style.cell]">
+        <slot name="middle-center" />
+      </div>
+      <div :class="[$style.right, $style.cell]">
+        <slot name="middle-right" />
+      </div>
+    </div>
+    <div :class="[$style.bottom, $style.row]">
+      <div :class="[$style.left, $style.cell]">
+        <slot name="bottom-left" />
+      </div>
+      <div :class="[$style.center, $style.cell]">
+        <slot name="bottom-center" />
+      </div>
+      <div :class="[$style.right, $style.cell]">
+        <slot name="bottom-right" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+.gridRoot {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.row {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.cell {
+  flex: 1;
+}
+
+.top,
+.left {
+  align-items: flex-start;
+}
+
+.center,
+.middle {
+  align-items: center;
+}
+
+.bottom,
+.right {
+  align-items: flex-end;
+}
+
+.left {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  text-align: right;
+}
+</style>

package/src/components/VolumePresets.vue

@@ -0,0 +1,165 @@
+<script lang="ts">
+import { computed, defineComponent, watch } from '@vue/composition-api';
+import { PresetNameList } from '@/src/vtk/ColorMaps';
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import ItemGroup from '@/src/components/ItemGroup.vue';
+import GroupableItem from '@/src/components/GroupableItem.vue';
+import { useCurrentImage } from '../composables/useCurrentImage';
+import { useViewConfigStore } from '../store/view-configs';
+import { getColorFunctionRangeFromPreset } from '../utils/vtk-helpers';
+import { useVolumeThumbnailing } from '../composables/useVolumeThumbnailing';
+
+const THUMBNAIL_SIZE = 80;
+const TARGET_VIEW_ID = '3D';
+
+export default defineComponent({
+  name: 'VolumePresets',
+  components: {
+    ItemGroup,
+    GroupableItem,
+  },
+  setup() {
+    const viewConfigStore = useViewConfigStore();
+
+    const { currentImageID, currentImageData } = useCurrentImage();
+
+    const volumeColorConfig = viewConfigStore.getComputedVolumeColorConfig(
+      TARGET_VIEW_ID,
+      currentImageID
+    );
+
+    watch(volumeColorConfig, () => {
+      const imageID = currentImageID.value;
+      if (imageID && !volumeColorConfig.value) {
+        // creates a default color config
+        viewConfigStore.updateVolumeColorConfig(TARGET_VIEW_ID, imageID, {});
+      }
+    });
+
+    const colorTransferFunctionRef = computed(
+      () => volumeColorConfig.value?.transferFunction
+    );
+
+    const { currentThumbnails } = useVolumeThumbnailing(THUMBNAIL_SIZE);
+
+    // --- selection and updates --- //
+
+    const selectedPreset = computed(
+      () => colorTransferFunctionRef.value?.preset || null
+    );
+    const hasCurrentImage = computed(() => !!currentImageData.value);
+
+    // the data range, if any
+    const imageDataRange = computed((): [number, number] => {
+      const image = currentImageData.value;
+      if (image) {
+        return image.getPointData().getScalars().getRange();
+      }
+      return [0, 1];
+    });
+    const effectiveMappingRange = computed(
+      () =>
+        getColorFunctionRangeFromPreset(selectedPreset.value || '') ||
+        imageDataRange.value
+    );
+
+    const selectPreset = (name: string) => {
+      if (!currentImageID.value) return;
+      viewConfigStore.setVolumeColorPreset(
+        TARGET_VIEW_ID,
+        currentImageID.value,
+        name
+      );
+    };
+
+    const rgbPoints = computed(
+      () =>
+        vtkColorMaps.getPresetByName(colorTransferFunctionRef.value!.preset)
+          ?.RGBPoints
+    );
+
+    const updateColorMappingRange = (range: [number, number]) => {
+      const { mappingRange } = colorTransferFunctionRef.value ?? {};
+      // guard against infinite loops
+      if (
+        currentImageID.value &&
+        mappingRange &&
+        (Math.abs(range[0] - mappingRange[0]) > 1e-6 ||
+          Math.abs(range[1] - mappingRange[1]) > 1e-6)
+      ) {
+        viewConfigStore.updateVolumeColorTransferFunction(
+          TARGET_VIEW_ID,
+          currentImageID.value,
+          {
+            mappingRange: range,
+          }
+        );
+      }
+    };
+
+    return {
+      thumbnails: currentThumbnails,
+      hasCurrentImage,
+      preset: selectedPreset,
+      fullMappingRange: effectiveMappingRange,
+      mappingRange: computed(
+        () => colorTransferFunctionRef.value!.mappingRange
+      ),
+      presetList: PresetNameList,
+      size: THUMBNAIL_SIZE,
+      rgbPoints,
+      selectPreset,
+      updateColorMappingRange,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="overflow-x-visible mx-2">
+    <item-group class="container" :value="preset" @change="selectPreset">
+      <v-row no-gutters justify="center">
+        <groupable-item
+          v-for="preset in presetList"
+          :key="preset"
+          v-slot="{ active, select }"
+          :value="preset"
+        >
+          <v-col
+            cols="4"
+            :class="{
+              'thumbnail-container': true,
+              blue: active,
+            }"
+            @click="select"
+          >
+            <v-img :src="thumbnails[preset] || ''" contain aspect-ratio="1">
+              <v-overlay
+                absolute
+                :value="true"
+                opacity="0.3"
+                class="thumbnail-overlay"
+              >
+                {{ preset.replace(/-/g, ' ') }}
+              </v-overlay>
+            </v-img>
+          </v-col>
+        </groupable-item>
+      </v-row>
+    </item-group>
+  </div>
+</template>
+
+<style scoped>
+.thumbnail-container {
+  cursor: pointer;
+  padding: 6px !important;
+}
+
+.thumbnail-overlay {
+  top: 70%;
+  height: 30%;
+  font-size: 0.75em;
+  text-align: center;
+}
+</style>

package/src/components/VolumeProperties.vue

@@ -0,0 +1,171 @@
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from '@vue/composition-api';
+import { useCurrentImage } from '../composables/useCurrentImage';
+import { useViewConfigStore } from '../store/view-configs';
+import { CVRConfig } from '../types/views';
+
+const TARGET_VIEW_ID = '3D';
+
+const LIGHTING_MODELS = {
+  standard: 'Standard',
+  hybrid: 'Hybrid',
+  lao: 'Ambient Occlusion',
+};
+
+export default defineComponent({
+  name: 'VolumeRendering',
+  setup() {
+    const viewConfigStore = useViewConfigStore();
+
+    const { currentImageID } = useCurrentImage();
+
+    const volumeColorConfig = viewConfigStore.getComputedVolumeColorConfig(
+      TARGET_VIEW_ID,
+      currentImageID
+    );
+
+    watch(volumeColorConfig, () => {
+      const imageID = currentImageID.value;
+      if (imageID && !volumeColorConfig.value) {
+        // creates a default color config
+        viewConfigStore.updateVolumeColorConfig(TARGET_VIEW_ID, imageID, {});
+      }
+    });
+
+    // --- CVR --- //
+
+    const cvrParams = computed(() => volumeColorConfig.value?.cvr);
+
+    const setCVRParam = (key: keyof CVRConfig, value: any) => {
+      if (!currentImageID.value) return;
+      viewConfigStore.updateVolumeCVRParameters(
+        TARGET_VIEW_ID,
+        currentImageID.value,
+        {
+          [key]: value,
+        }
+      );
+    };
+
+    const laoEnabled = computed(
+      () => !!cvrParams.value?.useLocalAmbientOcclusion
+    );
+    const vsbEnabled = computed(
+      () => !!cvrParams.value?.useVolumetricScatteringBlending
+    );
+
+    const lightingModel = ref(2); // LAO is default
+    const selectLightingMode = (buttonIdx: number) => {
+      if (buttonIdx === 0) {
+        setCVRParam('useVolumetricScatteringBlending', false);
+        setCVRParam('useLocalAmbientOcclusion', false);
+      } else if (buttonIdx === 1) {
+        setCVRParam('useVolumetricScatteringBlending', true);
+        setCVRParam('useLocalAmbientOcclusion', false);
+      } else if (buttonIdx === 2) {
+        setCVRParam('useVolumetricScatteringBlending', false);
+        setCVRParam('useLocalAmbientOcclusion', true);
+      }
+    };
+
+    return {
+      cvrParams,
+      laoEnabled,
+      vsbEnabled,
+      setCVRParam,
+      LIGHTING_MODELS,
+      selectLightingMode,
+      lightingModel,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="mx-2">
+    <div class="mt-4" ref="editorContainerRef">
+      <div ref="pwfEditorRef" />
+    </div>
+    <div v-if="!!cvrParams">
+      <v-slider
+        label="Ambient"
+        min="0"
+        max="1"
+        step="0.1"
+        dense
+        hide-details
+        thumb-label
+        :value="cvrParams.ambient"
+        @change="setCVRParam('ambient', $event)"
+      />
+      <v-slider
+        label="Diffuse"
+        min="0"
+        max="2"
+        step="0.1"
+        dense
+        hide-details
+        thumb-label
+        :value="cvrParams.diffuse"
+        @change="setCVRParam('diffuse', $event)"
+      />
+      <v-switch
+        label="Light follows camera"
+        dense
+        hide-details
+        :input-value="cvrParams.lightFollowsCamera"
+        @change="setCVRParam('lightFollowsCamera', !!$event)"
+      />
+      <v-divider class="my-8" />
+
+      <v-row class="my-4">
+        <v-btn-toggle
+          v-model="lightingModel"
+          @change="selectLightingMode"
+          mandatory
+        >
+          <v-btn v-for="model in Object.values(LIGHTING_MODELS)" :key="model">
+            {{ model }}
+          </v-btn>
+        </v-btn-toggle>
+      </v-row>
+
+      <v-slider
+        label="Scatter Blending"
+        min="0"
+        max="1"
+        step="0.05"
+        dense
+        hide-details
+        thumb-label
+        v-if="vsbEnabled"
+        :value="cvrParams.volumetricScatteringBlending"
+        @change="setCVRParam('volumetricScatteringBlending', $event)"
+      />
+      <v-slider
+        label="LAO Kernel Size"
+        min="2"
+        max="10"
+        step="1"
+        dense
+        hide-details
+        thumb-label
+        v-if="laoEnabled"
+        :value="cvrParams.laoKernelSize"
+        @change="setCVRParam('laoKernelSize', $event)"
+      />
+      <v-slider
+        label="LAO Kernel Radius"
+        :min="cvrParams.laoKernelSize * 2"
+        :max="cvrParams.laoKernelSize * 2 + 10"
+        step="1"
+        dense
+        hide-details
+        thumb-label
+        v-if="laoEnabled"
+        :value="cvrParams.laoKernelRadius"
+        @change="setCVRParam('laoKernelRadius', $event)"
+      />
+    </div>
+  </div>
+</template>