VolView/src/components/ProcessTypeSelector.vue at 58f56b95348fbbb1effa8fb28bc5940dc43fb213 · PaulHax/VolView · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<template>
  <v-row no-gutters align="center" justify="center" class="mb-4">
    <v-item-group
      v-model="activeProcessType"
      mandatory
      selected-class="selected"
      class="d-flex align-center justify-center"
    >
      <v-item
        :value="ProcessType.FillBetween"
        v-slot="{ selectedClass, toggle }"
      >
        <v-btn
          variant="tonal"
          rounded="8"
          stacked
          :class="['process-button', 'mx-2', selectedClass]"
          @click.stop="toggle"
        >
          <v-icon>mdi-layers-triple</v-icon>
          <span class="text-caption">Fill Between</span>
        </v-btn>
      </v-item>
      <v-item
        :value="ProcessType.GaussianSmooth"
        v-slot="{ selectedClass, toggle }"
      >
        <v-btn
          variant="tonal"
          rounded="8"
          stacked
          :class="['process-button', 'mx-2', selectedClass]"
          @click.stop="toggle"
        >
          <v-icon>mdi-blur</v-icon>
          <span class="text-caption">Smooth</span>
        </v-btn>
      </v-item>
    </v-item-group>
  </v-row>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {
  ProcessType,
  usePaintProcessStore,
} from '@/src/store/tools/paintProcess';

const processStore = usePaintProcessStore();

const activeProcessType = computed({
  get: () => processStore.activeProcessType,
  set: (type) => {
    processStore.setActiveProcessType(type);
  },
});
</script>

<style scoped>
.selected {
  background-color: rgb(var(--v-theme-selection-bg-color));
  border-color: rgb(var(--v-theme-selection-border-color));
}

.process-button {
  min-height: 56px;
  min-width: 110px;
  height: 56px;
  width: 110px;
}
</style>