Merge pull request #427 from Kitware/switch-to-toolid

refactor: drop tool-specific ID types

src/components/AnnotationsModule.vue

@@ -5,7 +5,6 @@ import ToolControls from './ToolControls.vue';
 import { usePolygonStore } from '../store/tools/polygons';
 import { useRectangleStore } from '../store/tools/rectangles';
 import { useRulerStore } from '../store/tools/rulers';
-import { AnnotationToolStore } from '../store/tools/useAnnotationTool';
 import MeasurementRulerDetails from './MeasurementRulerDetails.vue';
 
 const tools = [
@@ -15,11 +14,11 @@ const tools = [
     details: MeasurementRulerDetails,
   },
   {
-    store: useRectangleStore() as unknown as AnnotationToolStore<string>,
+    store: useRectangleStore(),
     icon: 'mdi-vector-square',
   },
   {
-    store: usePolygonStore() as unknown as AnnotationToolStore<string>,
+    store: usePolygonStore(),
     icon: 'mdi-pentagon-outline',
   },
 ];

src/components/LabelControls.vue

@@ -1,5 +1,4 @@
-<script setup lang="ts" generic="ToolID extends string">
-/* global ToolID:readonly */
+<script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
 import { LabelsStore } from '@/src/store/tools/useLabels';
 import type { AnnotationTool } from '@/src/types/annotation-tool';
@@ -8,7 +7,7 @@ import CloseableDialog from '@/src/components/CloseableDialog.vue';
 import LabelEditor from './LabelEditor.vue';
 
 const props = defineProps<{
-  labelsStore: LabelsStore<AnnotationTool<ToolID>>;
+  labelsStore: LabelsStore<AnnotationTool>;
 }>();
 
 const labels = computed(() => Object.entries(props.labelsStore.labels));

src/components/LabelEditor.vue

@@ -1,13 +1,12 @@
-<script setup lang="ts" generic="ToolID extends string">
-/* global ToolID:readonly */
+<script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { LabelsStore } from '@/src/store/tools/useLabels';
 import type { AnnotationTool } from '../types/annotation-tool';
 import { standardizeColor } from '../utils';
 
 const props = defineProps<{
   label: string;
-  labelsStore: LabelsStore<AnnotationTool<ToolID>>;
+  labelsStore: LabelsStore<AnnotationTool>;
 }>();
 
 const label = computed(() => props.labelsStore.labels[props.label]);

src/components/MeasurementRulerDetails.vue

@@ -3,7 +3,7 @@ import { useRulerStore } from '@/src/store/tools/rulers';
 import { AnnotationTool } from '../types/annotation-tool';
 
 defineProps<{
-  tool: AnnotationTool<string> & { axis: string };
+  tool: AnnotationTool & { axis: string };
 }>();
 
 const toolStore = useRulerStore();

src/components/MeasurementToolDetails.vue

@@ -2,7 +2,7 @@
 import { AnnotationTool } from '../types/annotation-tool';
 
 defineProps<{
-  tool: AnnotationTool<string> & { axis: string };
+  tool: AnnotationTool & { axis: string };
 }>();
 </script>
 

src/components/MeasurementsToolList.vue

@@ -9,7 +9,7 @@ import { useMultiSelection } from '../composables/useMultiSelection';
 import { AnnotationTool } from '../types/annotation-tool';
 
 type AnnotationToolConfig = {
-  store: AnnotationToolStore<string>;
+  store: AnnotationToolStore;
   icon: string;
   details?: typeof MeasurementToolDetails;
 };
@@ -23,7 +23,7 @@ const props = defineProps<{
 const { currentImageID, currentImageMetadata } = useCurrentImage();
 
 // Filter and add axis for specific annotation type
-const getTools = (toolStore: AnnotationToolStore<string>) => {
+const getTools = (toolStore: AnnotationToolStore) => {
   return toolStore.finishedTools
     .filter((tool) => tool.imageID === currentImageID.value)
     .map((tool) => {
@@ -56,7 +56,7 @@ const tools = computed(() => {
           const toggled = !store.toolByID[tool.id].hidden;
           store.updateTool(tool.id, { hidden: toggled });
         },
-        updateTool: (patch: Partial<AnnotationTool<string>>) => {
+        updateTool: (patch: Partial<AnnotationTool>) => {
           store.updateTool(tool.id, patch);
         },
       }));

src/components/tools/AnnotationContextMenu.vue

@@ -1,12 +1,11 @@
-<script setup lang="ts" generic="ToolID extends string">
-/* global ToolID:readonly */
+<script setup lang="ts">
 import { computed, shallowReactive } from 'vue';
 import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
-import { ContextMenuEvent } from '@/src/types/annotation-tool';
+import { ContextMenuEvent, ToolID } from '@/src/types/annotation-tool';
 import { WidgetAction } from '@/src/vtk/ToolWidgetUtils/utils';
 
 const props = defineProps<{
-  toolStore: AnnotationToolStore<ToolID>;
+  toolStore: AnnotationToolStore;
 }>();
 
 const contextMenu = shallowReactive({

src/components/tools/AnnotationInfo.vue

@@ -1,5 +1,4 @@
-<script setup lang="ts" generic="ToolID extends string">
-/* global ToolID:readonly */
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useElementSize } from '@vueuse/core';
 import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
@@ -10,8 +9,8 @@ const TOOLTIP_PADDING_X = 30;
 const TOOLTIP_PADDING_Y = 20;
 
 const props = defineProps<{
-  info: OverlayInfo<ToolID>;
-  toolStore: AnnotationToolStore<ToolID>;
+  info: OverlayInfo;
+  toolStore: AnnotationToolStore;
 }>();
 
 const visible = computed(() => {

src/components/tools/polygon/PolygonWidget2D.vue

@@ -21,7 +21,6 @@ import {
   useWidgetVisibility,
 } from '@/src/composables/annotationTool';
 import { usePolygonStore as useStore } from '@/src/store/tools/polygons';
-import { PolygonID as ToolID } from '@/src/types/polygon';
 import vtkWidgetFactory, {
   vtkPolygonViewWidget as WidgetView,
 } from '@/src/vtk/PolygonWidget';
@@ -32,6 +31,7 @@ import {
   onViewProxyMounted,
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
+import { ToolID } from '@/src/types/annotation-tool';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({

src/components/tools/rectangle/RectangleWidget2D.vue

@@ -21,7 +21,6 @@ import vtkRectangleWidget, {
   InteractionState,
 } from '@/src/vtk/RectangleWidget';
 import RectangleSVG2D from '@/src/components/tools/rectangle/RectangleSVG2D.vue';
-import { RectangleID } from '@/src/types/rectangle';
 import {
   useRightClickContextMenu,
   useHoverEvent,
@@ -33,11 +32,11 @@ import {
   onViewProxyMounted,
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
+import { ToolID } from '@/src/types/annotation-tool';
 
 const useStore = useRectangleStore;
 const vtkWidgetFactory = vtkRectangleWidget;
 type WidgetView = vtkRectangleViewWidget;
-type ToolID = RectangleID;
 const SVG2DComponent = RectangleSVG2D;
 
 export default defineComponent({

src/components/tools/ruler/RulerWidget2D.vue

@@ -32,13 +32,14 @@ import {
   onViewProxyMounted,
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
+import { ToolID } from '@/src/types/annotation-tool';
 
 export default defineComponent({
   name: 'RulerWidget2D',
   emits: ['placed', 'contextmenu', 'widgetHover'],
   props: {
     rulerId: {
-      type: String,
+      type: String as unknown as PropType<ToolID>,
       required: true,
     },
     widgetManager: {

src/composables/annotationTool.ts

@@ -10,7 +10,11 @@ import { Tools } from '@/src/store/tools/types';
 import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { getCSSCoordinatesFromEvent } from '@/src//utils/vtk-helpers';
 import { LPSAxis } from '@/src/types/lps';
-import { AnnotationTool, ContextMenuEvent } from '@/src/types/annotation-tool';
+import {
+  AnnotationTool,
+  ContextMenuEvent,
+  ToolID,
+} from '@/src/types/annotation-tool';
 import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
 import { useViewStore } from '@/src/store/views';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
@@ -21,10 +25,7 @@ const SHOW_OVERLAY_DELAY = 250; // milliseconds
 
 // does the tools's frame of reference match
 // the view's axis
-const doesToolFrameMatchViewAxis = <
-  ToolID extends string,
-  Tool extends AnnotationTool<ToolID>
->(
+const doesToolFrameMatchViewAxis = <Tool extends AnnotationTool>(
   viewAxis: Ref<LPSAxis>,
   tool: Partial<Tool>
 ) => {
@@ -41,8 +42,8 @@ const doesToolFrameMatchViewAxis = <
   return !!toolAxis && toolAxis.axis === viewAxis.value;
 };
 
-export const useCurrentTools = <ToolID extends string>(
-  toolStore: AnnotationToolStore<ToolID>,
+export const useCurrentTools = (
+  toolStore: AnnotationToolStore,
   viewAxis: Ref<LPSAxis>
 ) =>
   computed(() => {
@@ -62,7 +63,7 @@ export const useCurrentTools = <ToolID extends string>(
 
 // --- Context Menu --- //
 
-export const useContextMenu = <ToolID extends string>() => {
+export const useContextMenu = () => {
   const contextMenu = ref<{
     open: (id: ToolID, e: ContextMenuEvent) => void;
   } | null>(null);
@@ -107,7 +108,7 @@ export const useHoverEvent = (
   });
 };
 
-export type OverlayInfo<ToolID> =
+export type OverlayInfo =
   | {
       visible: false;
     }
@@ -119,11 +120,11 @@ export type OverlayInfo<ToolID> =
 
 // Maintains list of tools' hover states.
 // If one tool hovered, overlayInfo.visible === true with toolID and displayXY.
-export const useHover = <ToolID extends string>(
-  tools: Ref<Array<AnnotationTool<ToolID>>>,
+export const useHover = (
+  tools: Ref<Array<AnnotationTool>>,
   currentSlice: Ref<number>
 ) => {
-  type Info = OverlayInfo<ToolID>;
+  type Info = OverlayInfo;
   const toolHoverState = ref({}) as Ref<Record<ToolID, Info>>;
 
   const toolsOnCurrentSlice = computed(() =>
@@ -190,9 +191,9 @@ export const useHover = <ToolID extends string>(
   return { overlayInfo: noInfoWithoutSelect, onHover };
 };
 
-export const usePlacingAnnotationTool = <ToolID extends string>(
-  store: AnnotationToolStore<ToolID>,
-  metadata: Ref<Partial<AnnotationTool<ToolID>>>
+export const usePlacingAnnotationTool = (
+  store: AnnotationToolStore,
+  metadata: Ref<Partial<AnnotationTool>>
 ) => {
   const id = ref<Maybe<ToolID>>(null);
 

src/io/state-file/schema.ts

@@ -6,7 +6,7 @@ import vtkPiecewiseFunctionProxy, {
   PiecewiseNode,
 } from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
 
-import type { AnnotationTool } from '@/src/types/annotation-tool';
+import type { AnnotationTool, ToolID } from '@/src/types/annotation-tool';
 import { Tools as ToolsEnum } from '@/src/store/tools/types';
 import { Ruler } from '@/src/types/ruler';
 import { Rectangle } from '@/src/types/rectangle';
@@ -254,12 +254,12 @@ const annotationTool = z.object({
   imageID: z.string(),
   frameOfReference: FrameOfReference,
   slice: z.number(),
-  id: z.string(),
+  id: z.string() as unknown as z.ZodType<ToolID>,
   name: z.string(),
   color: z.string(),
   label: z.string().optional(),
   labelName: z.string().optional(),
-}) satisfies z.ZodType<AnnotationTool<string>>;
+}) satisfies z.ZodType<AnnotationTool>;
 
 const makeToolEntry = <T extends z.ZodRawShape>(tool: z.ZodObject<T>) =>
   z.object({ tools: z.array(tool), labels: z.record(tool.partial()) });
@@ -272,14 +272,13 @@ const Ruler = annotationTool.extend({
 const Rulers = makeToolEntry(Ruler);
 
 const Rectangle = Ruler.extend({
-  id: z.string() as unknown as z.ZodType<Rectangle['id']>,
   fillColor: z.string().optional(),
 }) satisfies z.ZodType<Optional<Rectangle, 'fillColor'>>;
 
 const Rectangles = makeToolEntry(Rectangle);
 
 const Polygon = annotationTool.extend({
-  id: z.string() as unknown as z.ZodType<Polygon['id']>,
+  id: z.string() as unknown as z.ZodType<ToolID>,
   points: z.array(Vector3),
 }) satisfies z.ZodType<Omit<Polygon, 'movePoint'>>;
 

src/store/__tests__/rulers.spec.ts

@@ -6,6 +6,7 @@ import { setActivePinia, createPinia } from 'pinia';
 import { useRulerStore } from '@/src/store/tools/rulers';
 import { Ruler } from '@/src/types/ruler';
 import { RequiredWithPartial } from '@/src/types';
+import { ToolID } from '@/src/types/annotation-tool';
 
 chai.use(chaiSubset);
 
@@ -48,7 +49,7 @@ describe('Ruler store', () => {
     });
     expect(store.rulerByID[id]).to.have.property('imageID', '123');
 
-    store.updateRuler('fakeID', {
+    store.updateRuler('fakeID' as ToolID, {
       slice: 88,
     });
     expect(store.rulerByID).to.not.have.property('fakeID');

src/store/tools/polygons.ts

@@ -1,14 +1,14 @@
 import { defineStore } from 'pinia';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import { POLYGON_LABEL_DEFAULTS } from '@/src/config';
-import { PolygonID } from '@/src/types/polygon';
 import { Manifest, StateFile } from '@/src/io/state-file/schema';
+import { ToolID } from '@/src/types/annotation-tool';
 
 import { useAnnotationTool } from './useAnnotationTool';
 
 const toolDefaults = () => ({
   points: [] as Array<Vector3>,
-  id: '' as PolygonID,
+  id: '' as ToolID,
   name: 'Polygon',
 });
 

src/store/tools/rectangles.ts

@@ -2,14 +2,14 @@ import { defineStore } from 'pinia';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import { Manifest, StateFile } from '@/src/io/state-file/schema';
 import { RECTANGLE_LABEL_DEFAULTS } from '@/src/config';
-import { RectangleID } from '@/src/types/rectangle';
+import { ToolID } from '@/src/types/annotation-tool';
 
 import { useAnnotationTool } from './useAnnotationTool';
 
 const rectangleDefaults = () => ({
   firstPoint: [0, 0, 0] as Vector3,
   secondPoint: [0, 0, 0] as Vector3,
-  id: '' as RectangleID,
+  id: '' as ToolID,
   name: 'Rectangle',
   fillColor: 'transparent',
 });