volview 4.0.0 → 4.0.1

package/src/components/ToolStrip.vue

@@ -1,186 +0,0 @@
-<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

@@ -1,84 +0,0 @@
-<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

@@ -1,165 +0,0 @@
-<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

@@ -1,171 +0,0 @@
-<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>