From 378a587717d419ffb242fa730c05de100902b277 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Sep 2023 11:11:31 -0400
Subject: [PATCH 01/18] feat(tools): added annotation tool enum

This supports the creation of a useAnnotationToolStore() composable.
---
 src/components/AnnotationsModule.vue    | 10 ++-
 src/components/MeasurementsToolList.vue | 13 ++--
 src/store/tools/crop.ts                 |  6 ++
 src/store/tools/index.ts                | 94 ++++++++++++-------------
 src/store/tools/types.ts                | 32 +++++++--
 src/store/tools/useAnnotationTool.ts    |  3 +-
 6 files changed, 95 insertions(+), 63 deletions(-)

diff --git a/src/components/AnnotationsModule.vue b/src/components/AnnotationsModule.vue
index 907d3e5ed..0ec626076 100644
--- a/src/components/AnnotationsModule.vue
+++ b/src/components/AnnotationsModule.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
+import { AnnotationToolType } from '@/src/store/tools/types';
 import MeasurementsToolList from './MeasurementsToolList.vue';
 import LabelmapList from './LabelmapList.vue';
 import ToolControls from './ToolControls.vue';
-import { usePolygonStore } from '../store/tools/polygons';
-import { useRectangleStore } from '../store/tools/rectangles';
-import { useRulerStore } from '../store/tools/rulers';
 import MeasurementRulerDetails from './MeasurementRulerDetails.vue';
 
 const tools = [
   {
-    store: useRulerStore(),
+    type: AnnotationToolType.Ruler,
     icon: 'mdi-ruler',
     details: MeasurementRulerDetails,
   },
   {
-    store: useRectangleStore(),
+    type: AnnotationToolType.Rectangle,
     icon: 'mdi-vector-square',
   },
   {
-    store: usePolygonStore(),
+    type: AnnotationToolType.Polygon,
     icon: 'mdi-pentagon-outline',
   },
 ];
diff --git a/src/components/MeasurementsToolList.vue b/src/components/MeasurementsToolList.vue
index 5e7d28cca..d4c3249d6 100644
--- a/src/components/MeasurementsToolList.vue
+++ b/src/components/MeasurementsToolList.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
 import { nonNullable } from '@/src/utils/index';
+import { AnnotationToolType } from '@/src/store/tools/types';
+import { useAnnotationToolStore } from '@/src/store/tools';
 import MeasurementToolDetails from './MeasurementToolDetails.vue';
 import { useMultiSelection } from '../composables/useMultiSelection';
 import { AnnotationTool } from '../types/annotation-tool';
 
 type AnnotationToolConfig = {
-  store: AnnotationToolStore;
+  type: AnnotationToolType;
   icon: string;
   details?: typeof MeasurementToolDetails;
 };
@@ -23,7 +24,8 @@ const props = defineProps<{
 const { currentImageID, currentImageMetadata } = useCurrentImage();
 
 // Filter and add axis for specific annotation type
-const getTools = (toolStore: AnnotationToolStore) => {
+const getTools = (type: AnnotationToolType) => {
+  const toolStore = useAnnotationToolStore(type);
   return toolStore.finishedTools
     .filter((tool) => tool.imageID === currentImageID.value)
     .map((tool) => {
@@ -44,8 +46,9 @@ const getTools = (toolStore: AnnotationToolStore) => {
 // Flatten all tool types and add actions
 const tools = computed(() => {
   return props.tools.flatMap(
-    ({ store, icon, details = MeasurementToolDetails }) => {
-      const toolsWithAxis = getTools(store);
+    ({ type, icon, details = MeasurementToolDetails }) => {
+      const store = useAnnotationToolStore(type);
+      const toolsWithAxis = getTools(type);
       return toolsWithAxis.map((tool) => ({
         ...tool,
         icon,
diff --git a/src/store/tools/crop.ts b/src/store/tools/crop.ts
index 81a181ec1..231fc631d 100644
--- a/src/store/tools/crop.ts
+++ b/src/store/tools/crop.ts
@@ -1,6 +1,7 @@
 import { getImageSpatialExtent } from '@/src/composables/useCurrentImage';
 import { LPSAxis } from '@/src/types/lps';
 import { getAxisBounds } from '@/src/utils/lps';
+import { NOOP } from '@/src/constants';
 import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
 import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
 import { computed, reactive, readonly, unref } from 'vue';
@@ -135,6 +136,9 @@ export const useCropStore = defineStore('crop', () => {
     });
   }
 
+  const activateTool = () => true;
+  const deactivateTool = NOOP;
+
   return {
     croppingByImageID: readonly(state.croppingByImageID),
     getComputedVTKPlanes,
@@ -143,5 +147,7 @@ export const useCropStore = defineStore('crop', () => {
     resetCropping,
     serialize,
     deserialize,
+    activateTool,
+    deactivateTool,
   };
 });
diff --git a/src/store/tools/index.ts b/src/store/tools/index.ts
index 142f7dd2b..0caa9cd7a 100644
--- a/src/store/tools/index.ts
+++ b/src/store/tools/index.ts
@@ -1,36 +1,45 @@
 import { Manifest, StateFile } from '@/src/io/state-file/schema';
+import { Maybe } from '@/src/types';
+import type { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { defineStore } from 'pinia';
 import { useCropStore } from './crop';
 import { useCrosshairsToolStore } from './crosshairs';
 import { usePaintToolStore } from './paint';
 import { useRulerStore } from './rulers';
 import { useRectangleStore } from './rectangles';
-import { Tools } from './types';
+import { AnnotationToolType, IToolStore, Tools } from './types';
 import { usePolygonStore } from './polygons';
 
 interface State {
   currentTool: Tools;
 }
 
-export interface IToolStore {
-  activateTool: () => boolean;
-  deactivateTool: () => void;
-}
+// TODO move these types out
+export const AnnotationToolStoreMap: Record<
+  AnnotationToolType,
+  () => AnnotationToolStore
+> = {
+  [AnnotationToolType.Polygon]: usePolygonStore,
+  [AnnotationToolType.Rectangle]: useRectangleStore,
+  [AnnotationToolType.Ruler]: useRulerStore,
+} as const;
 
-function getStore(tool: Tools): IToolStore | null {
-  if (tool === Tools.Ruler) {
-    return useRulerStore();
-  }
-  if (tool === Tools.Rectangle) {
-    return useRectangleStore();
-  }
-  if (tool === Tools.Paint) {
-    return usePaintToolStore();
-  }
-  if (tool === Tools.Crosshairs) {
-    return useCrosshairsToolStore();
-  }
-  return null;
+export const ToolStoreMap: Record<Tools, Maybe<() => IToolStore>> = {
+  [Tools.Pan]: null,
+  [Tools.WindowLevel]: null,
+  [Tools.Zoom]: null,
+  [Tools.Select]: null,
+  [Tools.Crop]: useCropStore,
+  [Tools.Crosshairs]: useCrosshairsToolStore,
+  [Tools.Paint]: usePaintToolStore,
+  ...AnnotationToolStoreMap,
+} as const;
+
+export function useAnnotationToolStore(
+  type: AnnotationToolType
+): AnnotationToolStore {
+  const useStore = AnnotationToolStoreMap[type];
+  return useStore();
 }
 
 /**
@@ -39,17 +48,19 @@ function getStore(tool: Tools): IToolStore | null {
  * store setup() will be activated.
  */
 function setupTool(tool: Tools) {
-  const store = getStore(tool);
+  const useStore = ToolStoreMap[tool];
+  const store = useStore?.();
   if (store) {
-    return store.activateTool();
+    return store.activateTool?.();
   }
   return true;
 }
 
 function teardownTool(tool: Tools) {
-  const store = getStore(tool);
+  const useStore = ToolStoreMap[tool];
+  const store = useStore?.();
   if (store) {
-    store.deactivateTool();
+    store.deactivateTool?.();
   }
 }
 
@@ -67,19 +78,13 @@ export const useToolStore = defineStore('tool', {
     },
     serialize(state: StateFile) {
       const { tools } = state.manifest;
-      const rulerStore = useRulerStore();
-      const rectangleStore = useRectangleStore();
-      const polygonStore = usePolygonStore();
-      const crosshairsStore = useCrosshairsToolStore();
-      const paintStore = usePaintToolStore();
-      const cropStore = useCropStore();
 
-      rulerStore.serialize(state);
-      rectangleStore.serialize(state);
-      polygonStore.serialize(state);
-      crosshairsStore.serialize(state);
-      paintStore.serialize(state);
-      cropStore.serialize(state);
+      Object.values(ToolStoreMap)
+        .map((useStore) => useStore?.())
+        .filter((store): store is IToolStore => !!store)
+        .forEach((store) => {
+          store.serialize?.(state);
+        });
 
       tools.current = this.currentTool;
     },
@@ -89,19 +94,14 @@ export const useToolStore = defineStore('tool', {
       dataIDMap: Record<string, string>
     ) {
       const { tools } = manifest;
-      const rulerStore = useRulerStore();
-      const rectangleStore = useRectangleStore();
-      const polygonStore = usePolygonStore();
-      const crosshairsStore = useCrosshairsToolStore();
-      const paintStore = usePaintToolStore();
-      const cropStore = useCropStore();
 
-      rulerStore.deserialize(manifest, dataIDMap);
-      rectangleStore.deserialize(manifest, dataIDMap);
-      polygonStore.deserialize(manifest, dataIDMap);
-      crosshairsStore.deserialize(manifest);
-      paintStore.deserialize(manifest, labelmapIDMap);
-      cropStore.deserialize(manifest, dataIDMap);
+      Object.values(ToolStoreMap)
+        .map((useStore) => useStore?.())
+        .filter((store): store is IToolStore => !!store)
+        .forEach((store) => {
+          store.deserialize?.(manifest, dataIDMap);
+        });
+
       this.currentTool = tools.current;
     },
   },
diff --git a/src/store/tools/types.ts b/src/store/tools/types.ts
index f73e6e8d3..77153faa2 100644
--- a/src/store/tools/types.ts
+++ b/src/store/tools/types.ts
@@ -1,12 +1,36 @@
+import type { Manifest, StateFile } from '@/src/io/state-file/schema';
+import { Store } from 'pinia';
+
+export enum AnnotationToolType {
+  Rectangle = 'Rectangle',
+  Ruler = 'Ruler',
+  Polygon = 'Polygon',
+}
+
 export enum Tools {
   WindowLevel = 'WindowLevel',
   Pan = 'Pan',
   Zoom = 'Zoom',
-  Ruler = 'Ruler',
+  Crop = 'Crop',
   Paint = 'Paint',
-  Rectangle = 'Rectangle',
+  Select = 'Select',
   Crosshairs = 'Crosshairs',
-  Crop = 'Crop',
+  Rectangle = 'Rectangle',
+  Ruler = 'Ruler',
   Polygon = 'Polygon',
-  Select = 'Select',
 }
+
+interface IActivatableTool {
+  activateTool: () => boolean;
+  deactivateTool: () => void;
+}
+
+interface ISerializableTool {
+  serialize: (state: StateFile) => void;
+  deserialize: (manifest: Manifest, dataIDMap: Record<string, string>) => void;
+}
+
+export interface IToolStore
+  extends Partial<IActivatableTool>,
+    Partial<ISerializableTool>,
+    Store {}
diff --git a/src/store/tools/useAnnotationTool.ts b/src/store/tools/useAnnotationTool.ts
index 84b66eb5f..b8894b18f 100644
--- a/src/store/tools/useAnnotationTool.ts
+++ b/src/store/tools/useAnnotationTool.ts
@@ -1,6 +1,7 @@
 import { Ref, UnwrapNestedRefs, computed, ref, watch } from 'vue';
 import { Store, StoreActions, StoreGetters, StoreState } from 'pinia';
 
+import type { IToolStore } from '@/src/store/tools/types';
 import { Maybe, PartialWithRequired } from '@/src/types';
 import {
   STROKE_WIDTH_ANNOTATION_TOOL_DEFAULT,
@@ -237,4 +238,4 @@ export type AnnotationToolStore<
 > = StoreState<UseAnnotationToolWithID> &
   StoreActions<UseAnnotationToolWithID> &
   UnwrapNestedRefs<StoreGetters<UseAnnotationToolWithID>> & // adds computed props like tools
-  Store; // adds Pinia plugins;
+  IToolStore; // adds Pinia plugins;

From 035094c5552d564fd63a957bba8679170841354f Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Sep 2023 13:16:29 -0400
Subject: [PATCH 02/18] fix(widget): reset interactions on delete

---
 src/components/tools/polygon/PolygonWidget2D.vue     | 2 +-
 src/components/tools/rectangle/RectangleWidget2D.vue | 2 +-
 src/components/tools/ruler/RulerWidget2D.vue         | 2 +-
 src/vtk/PolygonWidget/behavior.ts                    | 4 ++++
 src/vtk/RulerWidget/behavior.ts                      | 4 ++++
 5 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index 7de1bb3f6..039d2ddc7 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -95,8 +95,8 @@ export default defineComponent({
       if (!widget.value) {
         return;
       }
+      // widgetManager calls widget.delete()
       widgetManager.value.removeWidget(widget.value);
-      widget.value.delete();
       widgetFactory.delete();
     });
 
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index b509a21fb..cde22902d 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -101,8 +101,8 @@ export default defineComponent({
       if (!widget.value) {
         return;
       }
+      // widgetManager calls widget.delete()
       widgetManager.value.removeWidget(widget.value);
-      widget.value.delete();
       widgetFactory.delete();
     });
 
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index 8ba83f4ae..c580388af 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -98,8 +98,8 @@ export default defineComponent({
       if (!widget.value) {
         return;
       }
+      // widgetManager calls widget.delete()
       widgetManager.value.removeWidget(widget.value);
-      widget.value.delete();
       widgetFactory.delete();
     });
 
diff --git a/src/vtk/PolygonWidget/behavior.ts b/src/vtk/PolygonWidget/behavior.ts
index 8ed8ffe80..280c5c6df 100644
--- a/src/vtk/PolygonWidget/behavior.ts
+++ b/src/vtk/PolygonWidget/behavior.ts
@@ -429,4 +429,8 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     model.hasFocus = false;
     model._widgetManager.enablePicking();
   };
+
+  publicAPI.delete = macro.chain(() => {
+    publicAPI.resetInteractions();
+  }, publicAPI.delete);
 }
diff --git a/src/vtk/RulerWidget/behavior.ts b/src/vtk/RulerWidget/behavior.ts
index 28392d9fa..d9404728d 100644
--- a/src/vtk/RulerWidget/behavior.ts
+++ b/src/vtk/RulerWidget/behavior.ts
@@ -218,4 +218,8 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   publicAPI.loseFocus = () => {
     throw new Error('loseFocus is not implemented');
   };
+
+  publicAPI.delete = macro.chain(() => {
+    publicAPI.resetInteractions();
+  }, publicAPI.delete);
 }

From 85c3a9040f93424ca4e50d851dd851a7d909d1e4 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Sep 2023 13:19:28 -0400
Subject: [PATCH 03/18] feat(BoundingRectangle): padding prop

---
 src/components/tools/BoundingRectangle.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
index 7f93eb950..f27d16b34 100644
--- a/src/components/tools/BoundingRectangle.vue
+++ b/src/components/tools/BoundingRectangle.vue
@@ -9,10 +9,18 @@ import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import type { Bounds, Vector3 } from '@kitware/vtk.js/types';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 
-const props = defineProps<{
-  points: Array<Vector3>;
-  viewId: string;
-}>();
+const DEFAULT_PADDING = 2;
+
+const props = withDefaults(
+  defineProps<{
+    points: Array<Vector3>;
+    viewId: string;
+    padding?: number;
+  }>(),
+  {
+    padding: DEFAULT_PADDING,
+  }
+);
 
 const viewStore = useViewStore();
 const viewProxy = computed(
@@ -43,6 +51,8 @@ const updateRectangle = () => {
     .forEach(([x, y]) => {
       vtkBoundingBox.addPoint(screenBounds, x, y, 0);
     });
+
+  vtkBoundingBox.inflate(screenBounds, props.padding);
   const [x, y] = vtkBoundingBox.getMinPoint(screenBounds);
   const [maxX, maxY] = vtkBoundingBox.getMaxPoint(screenBounds);
   // Plus 2 to account for the stroke width

From 9071dde4593f12d740241a9907e21f2139911c29 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Sep 2023 13:54:27 -0400
Subject: [PATCH 04/18] feat(ruler): add selection support

---
 src/components/MeasurementsToolList.vue       | 50 +++++++----
 src/components/tools/ruler/RulerTool.vue      | 36 ++++++--
 src/components/tools/ruler/RulerWidget2D.vue  | 17 ++--
 src/composables/annotationTool.ts             |  7 +-
 src/composables/useMultipleToolSelection.ts   | 65 ++++++++++++++
 src/shims-vtk.d.ts                            |  5 --
 src/store/tools/toolSelection.ts              | 75 ++++++++++++++++
 src/store/tools/types.ts                      | 10 +++
 src/vtk/RulerWidget/behavior.ts               |  4 +
 src/vtk/RulerWidget/index.js                  |  7 +-
 src/vtk/RulerWidget/state.ts                  |  1 +
 .../ToolWidgetUtils/annotationToolMixins.ts   | 88 +++++++++++++++++++
 src/vtk/ToolWidgetUtils/utils.ts              |  8 +-
 13 files changed, 330 insertions(+), 43 deletions(-)
 create mode 100644 src/composables/useMultipleToolSelection.ts
 create mode 100644 src/store/tools/toolSelection.ts
 create mode 100644 src/vtk/ToolWidgetUtils/annotationToolMixins.ts

diff --git a/src/components/MeasurementsToolList.vue b/src/components/MeasurementsToolList.vue
index d4c3249d6..d4f5424b0 100644
--- a/src/components/MeasurementsToolList.vue
+++ b/src/components/MeasurementsToolList.vue
@@ -5,8 +5,11 @@ import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReferenc
 import { nonNullable } from '@/src/utils/index';
 import { AnnotationToolType } from '@/src/store/tools/types';
 import { useAnnotationToolStore } from '@/src/store/tools';
+import {
+  useMultipleToolSelection,
+  MultipleSelectionState,
+} from '@/src/composables/useMultipleToolSelection';
 import MeasurementToolDetails from './MeasurementToolDetails.vue';
-import { useMultiSelection } from '../composables/useMultiSelection';
 import { AnnotationTool } from '../types/annotation-tool';
 
 type AnnotationToolConfig = {
@@ -50,7 +53,9 @@ const tools = computed(() => {
       const store = useAnnotationToolStore(type);
       const toolsWithAxis = getTools(type);
       return toolsWithAxis.map((tool) => ({
-        ...tool,
+        id: tool.id,
+        type,
+        toolData: tool,
         icon,
         details,
         remove: () => store.removeTool(tool.id),
@@ -69,10 +74,16 @@ const tools = computed(() => {
 
 // --- selection and batch actions  --- //
 
-const toolIds = computed(() => tools.value.map((tool) => tool.id));
+const { selectAll, deselectAll, selected, selectionState } =
+  useMultipleToolSelection(tools);
 
-const { selected, selectedAll, selectedSome, toggleSelectAll } =
-  useMultiSelection(toolIds);
+const toggleSelectAll = (shouldSelectAll: boolean) => {
+  if (shouldSelectAll) {
+    selectAll();
+  } else {
+    deselectAll();
+  }
+};
 
 const forEachSelectedTool = (
   callback: (tool: (typeof tools.value)[number]) => void
@@ -93,7 +104,7 @@ const allHidden = computed(() => {
   return selected.value
     .map((id) => tools.value.find((tool) => id === tool.id))
     .filter(nonNullable)
-    .every((tool) => tool.hidden);
+    .every((tool) => tool.toolData.hidden);
 });
 
 function toggleGlobalHidden() {
@@ -108,10 +119,11 @@ function toggleGlobalHidden() {
   <v-row no-gutters justify="space-between" align="center" class="mb-1">
     <v-col class="d-flex">
       <v-checkbox
-        :indeterminate="selectedSome && !selectedAll"
+        class="ml-3"
+        :indeterminate="selectionState === MultipleSelectionState.Some"
         label="Select All"
-        v-model="selectedAll"
-        @click.stop="toggleSelectAll"
+        :model-value="selectionState === MultipleSelectionState.All"
+        @update:model-value="toggleSelectAll"
         density="compact"
         hide-details
       />
@@ -126,7 +138,7 @@ function toggleGlobalHidden() {
       <v-btn
         icon
         variant="text"
-        :disabled="!selectedSome"
+        :disabled="selectionState === MultipleSelectionState.None"
         @click.stop="toggleGlobalHidden"
       >
         <v-icon v-if="allHidden">mdi-eye-off</v-icon>
@@ -138,11 +150,15 @@ function toggleGlobalHidden() {
       <v-btn
         icon
         variant="text"
-        :disabled="!selectedSome"
+        :disabled="selectionState === MultipleSelectionState.None"
         @click.stop="removeAll"
       >
         <v-icon>mdi-delete</v-icon>
-        <v-tooltip :disabled="!selectedSome" location="top" activator="parent">
+        <v-tooltip
+          :disabled="selectionState === MultipleSelectionState.None"
+          location="top"
+          activator="parent"
+        >
           Delete selected
         </v-tooltip>
       </v-btn>
@@ -166,10 +182,10 @@ function toggleGlobalHidden() {
 
         <div
           class="color-dot flex-shrink-0 mr-2"
-          :style="{ backgroundColor: tool.color }"
+          :style="{ backgroundColor: tool.toolData.color }"
         />
         <v-list-item-title v-bind="$attrs">
-          {{ tool.labelName }}
+          {{ tool.toolData.labelName }}
         </v-list-item-title>
 
         <span class="ml-auto flex-shrink-0">
@@ -180,10 +196,10 @@ function toggleGlobalHidden() {
             </v-tooltip>
           </v-btn>
           <v-btn icon variant="text" @click="tool.toggleHidden()">
-            <v-icon v-if="tool.hidden">mdi-eye-off</v-icon>
+            <v-icon v-if="tool.toolData.hidden">mdi-eye-off</v-icon>
             <v-icon v-else>mdi-eye</v-icon>
             <v-tooltip location="top" activator="parent">{{
-              tool.hidden ? 'Show' : 'Hide'
+              tool.toolData.hidden ? 'Show' : 'Hide'
             }}</v-tooltip>
           </v-btn>
           <v-btn icon variant="text" @click="tool.remove()">
@@ -195,7 +211,7 @@ function toggleGlobalHidden() {
 
       <v-row class="mt-4">
         <v-list-item-subtitle class="w-100">
-          <component :is="tool.details" :tool="tool" />
+          <component :is="tool.details" :tool="tool.toolData" />
         </v-list-item-subtitle>
       </v-row>
     </v-container>
diff --git a/src/components/tools/ruler/RulerTool.vue b/src/components/tools/ruler/RulerTool.vue
index 7823c650f..4c855296f 100644
--- a/src/components/tools/ruler/RulerTool.vue
+++ b/src/components/tools/ruler/RulerTool.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="overlay-no-events">
     <svg class="overlay-no-events">
-      <bounding-rectangle :points="points" :view-id="viewId" />
+      <bounding-rectangle :points="visiblePoints" :view-id="viewId" />
       <ruler-widget-2D
         v-for="ruler in rulers"
         :key="ruler.id"
-        :ruler-id="ruler.id"
+        :tool-id="ruler.id"
         :is-placing="ruler.id === placingRulerID"
         :current-slice="currentSlice"
         :view-id="viewId"
@@ -13,6 +13,7 @@
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(ruler.id, $event)"
         @placed="onRulerPlaced"
+        @select="onSelect(ruler.id, $event)"
         @widgetHover="onHover(ruler.id, $event)"
       />
     </svg>
@@ -32,7 +33,11 @@ import {
 } from 'vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
-import { Tools } from '@/src/store/tools/types';
+import {
+  Tools,
+  AnnotationToolType,
+  ToolSelectEvent,
+} from '@/src/store/tools/types';
 import { useRulerStore } from '@/src/store/tools/rulers';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import RulerWidget2D from '@/src/components/tools/ruler/RulerWidget2D.vue';
@@ -49,6 +54,11 @@ import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
 import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
+import {
+  useToolSelectionStore,
+  updateToolSelectionFromEvent,
+} from '@/src/store/tools/toolSelection';
+import { ToolID } from '@/src/types/annotation-tool';
 
 export default defineComponent({
   name: 'RulerTool',
@@ -130,6 +140,14 @@ export default defineComponent({
       }
     };
 
+    // --- selection handling --- //
+
+    const selectionStore = useToolSelectionStore();
+
+    const onSelect = (id: ToolID, event: ToolSelectEvent) => {
+      updateToolSelectionFromEvent(id, event, AnnotationToolType.Ruler);
+    };
+
     // --- //
 
     const { contextMenu, openContextMenu } = useContextMenu();
@@ -148,10 +166,11 @@ export default defineComponent({
 
     const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
 
-    const points = computed(() => {
-      if (!overlayInfo.value.visible) return [];
-      const tool = rulerStore.toolByID[overlayInfo.value.toolID];
-      return [tool.firstPoint, tool.secondPoint];
+    const visiblePoints = computed(() => {
+      return currentTools.value
+        .filter((tool) => tool.slice === currentSlice.value)
+        .filter((tool) => selectionStore.isSelected(tool.id))
+        .flatMap((tool) => [tool.firstPoint, tool.secondPoint]);
     });
 
     return {
@@ -162,8 +181,9 @@ export default defineComponent({
       openContextMenu,
       rulerStore,
       onHover,
+      onSelect,
       overlayInfo,
-      points,
+      visiblePoints,
     };
   },
 });
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index c580388af..5ff9f9844 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -33,12 +33,13 @@ import {
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
+import { ToolSelectEvent } from '@/src/store/tools/types';
 
 export default defineComponent({
   name: 'RulerWidget2D',
-  emits: ['placed', 'contextmenu', 'widgetHover'],
+  emits: ['placed', 'contextmenu', 'widgetHover', 'select'],
   props: {
-    rulerId: {
+    toolId: {
       type: String as unknown as PropType<ToolID>,
       required: true,
     },
@@ -68,7 +69,7 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const {
-      rulerId,
+      toolId,
       viewId,
       widgetManager,
       viewDirection,
@@ -77,12 +78,12 @@ export default defineComponent({
     } = toRefs(props);
 
     const rulerStore = useRulerStore();
-    const ruler = computed(() => rulerStore.rulerByID[rulerId.value]);
+    const ruler = computed(() => rulerStore.rulerByID[toolId.value]);
     const { currentImageID, currentImageMetadata } = useCurrentImage();
     const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
     const widgetFactory = vtkRulerWidget.newInstance({
-      id: rulerId.value,
+      id: toolId.value,
       store: rulerStore,
       isPlaced: !isPlacing.value,
     });
@@ -131,6 +132,12 @@ export default defineComponent({
 
     useHoverEvent(emit, widget);
 
+    // --- selection handling --- //
+
+    onVTKEvent(widget, 'onSelectEvent', (event: ToolSelectEvent) => {
+      emit('select', event);
+    });
+
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index a2a6e5795..f75ea3be5 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -42,15 +42,16 @@ const doesToolFrameMatchViewAxis = <Tool extends AnnotationTool>(
   return !!toolAxis && toolAxis.axis === viewAxis.value;
 };
 
-export const useCurrentTools = (
-  toolStore: AnnotationToolStore,
+export const useCurrentTools = <S extends AnnotationToolStore>(
+  toolStore: S,
   viewAxis: Ref<LPSAxis>
 ) =>
   computed(() => {
     const { currentImageID } = useCurrentImage();
     const curImageID = currentImageID.value;
 
-    return toolStore.tools.filter((tool) => {
+    type ToolType = S['tools'][number];
+    return (toolStore.tools as Array<ToolType>).filter((tool) => {
       // only show tools for the current image,
       // current view axis and not hidden
       return (
diff --git a/src/composables/useMultipleToolSelection.ts b/src/composables/useMultipleToolSelection.ts
new file mode 100644
index 000000000..d04a92b63
--- /dev/null
+++ b/src/composables/useMultipleToolSelection.ts
@@ -0,0 +1,65 @@
+import {
+  ToolSelection,
+  useToolSelectionStore,
+} from '@/src/store/tools/toolSelection';
+import { AnnotationToolType } from '@/src/store/tools/types';
+import { ToolID } from '@/src/types/annotation-tool';
+import { MaybeRef, computed, unref } from 'vue';
+
+export enum MultipleSelectionState {
+  None,
+  Some,
+  All,
+}
+
+export const useMultipleToolSelection = (
+  collection: MaybeRef<ToolSelection[]>
+) => {
+  const store = useToolSelectionStore();
+
+  const idToType = computed(() =>
+    unref(collection).reduce(
+      (acc, { id, type }) => ({ ...acc, [id]: type }),
+      {} as Record<ToolID, AnnotationToolType>
+    )
+  );
+
+  const selected = computed<ToolID[]>({
+    get: () => store.selection.map(({ id }) => id),
+    set: (newSelection) => {
+      store.clearSelection();
+      newSelection.forEach((id) => {
+        store.addSelection(id, idToType.value[id]);
+      });
+    },
+  });
+
+  const selectionState = computed<MultipleSelectionState>(() => {
+    const coll = unref(collection);
+    const { length } = unref(coll).filter((tool) => store.isSelected(tool.id));
+    if (length === 0) {
+      return MultipleSelectionState.None;
+    }
+    if (length === coll.length) {
+      return MultipleSelectionState.All;
+    }
+    return MultipleSelectionState.Some;
+  });
+
+  const selectAll = () => {
+    unref(collection).forEach((tool) => store.addSelection(tool.id, tool.type));
+  };
+
+  const deselectAll = () => {
+    // technically correct solution is collection.forEach(remove),
+    // but this will suffice (and is faster).
+    store.clearSelection();
+  };
+
+  return {
+    selectAll,
+    deselectAll,
+    selected,
+    selectionState,
+  };
+};
diff --git a/src/shims-vtk.d.ts b/src/shims-vtk.d.ts
index 25e94e209..ce2ecbbf7 100644
--- a/src/shims-vtk.d.ts
+++ b/src/shims-vtk.d.ts
@@ -7,11 +7,6 @@ declare module '@kitware/vtk.js/vtk' {
   export default vtk;
 }
 
-declare module '@kitware/vtk.js/interfaces-additions' {
-  import { EVENT_ABORT, VOID } from '@kitware/vtk.js/macros';
-  export type EventHandler = (...any: args[]) => EVENT_ABORT | VOID | void;
-}
-
 declare module '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator/Presets' {
   export default any;
 }
diff --git a/src/store/tools/toolSelection.ts b/src/store/tools/toolSelection.ts
new file mode 100644
index 000000000..dc900e26b
--- /dev/null
+++ b/src/store/tools/toolSelection.ts
@@ -0,0 +1,75 @@
+import { AnnotationToolType, ToolSelectEvent } from '@/src/store/tools/types';
+import { ToolID } from '@/src/types/annotation-tool';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+export interface ToolSelection {
+  id: ToolID;
+  type: AnnotationToolType;
+}
+export const useToolSelectionStore = defineStore('tool-selection', () => {
+  type Selections = Record<ToolID, AnnotationToolType>;
+  const selectionMap = ref<Selections>(Object.create(null));
+
+  function addSelection(id: ToolID, type: AnnotationToolType) {
+    if (id in selectionMap.value) return;
+    selectionMap.value[id] = type;
+  }
+
+  function clearSelection() {
+    selectionMap.value = Object.create(null);
+  }
+
+  function removeSelection(id: ToolID) {
+    if (!(id in selectionMap.value)) return;
+    delete selectionMap.value[id];
+  }
+
+  function toggleSelection(id: ToolID, type: AnnotationToolType) {
+    if (id in selectionMap.value) {
+      removeSelection(id);
+    } else {
+      addSelection(id, type);
+    }
+  }
+
+  function isSelected(id: ToolID) {
+    return id in selectionMap.value;
+  }
+
+  const selection = computed<ToolSelection[]>(() => {
+    return Object.entries(selectionMap.value).map(([id, type]) => ({
+      id: id as ToolID,
+      type,
+    }));
+  });
+
+  return {
+    addSelection,
+    clearSelection,
+    removeSelection,
+    toggleSelection,
+    isSelected,
+    selection,
+  };
+});
+
+export const updateToolSelectionFromEvent = (
+  toolID: ToolID,
+  event: ToolSelectEvent,
+  type: AnnotationToolType
+) => {
+  const store = useToolSelectionStore();
+  if (event.updateBehavior === 'deselectOthers') {
+    store.clearSelection();
+  }
+  if (event.selected) {
+    if (event.updateBehavior === 'preserve') {
+      store.toggleSelection(toolID, type);
+    } else {
+      store.addSelection(toolID, type);
+    }
+  } else if (event.updateBehavior === 'single') {
+    store.removeSelection(toolID);
+  }
+};
diff --git a/src/store/tools/types.ts b/src/store/tools/types.ts
index 77153faa2..153f35c5e 100644
--- a/src/store/tools/types.ts
+++ b/src/store/tools/types.ts
@@ -34,3 +34,13 @@ export interface IToolStore
   extends Partial<IActivatableTool>,
     Partial<ISerializableTool>,
     Store {}
+
+export type ToolSelectEvent = {
+  // should the emitting tool be selected
+  selected: boolean;
+  // update behavior
+  // deselect: clear current selection
+  // preserve: preserve current selection
+  // single: set current selection to be just this tool
+  updateBehavior: 'deselectOthers' | 'preserve' | 'single';
+};
diff --git a/src/vtk/RulerWidget/behavior.ts b/src/vtk/RulerWidget/behavior.ts
index d9404728d..efa5d8c5f 100644
--- a/src/vtk/RulerWidget/behavior.ts
+++ b/src/vtk/RulerWidget/behavior.ts
@@ -1,3 +1,5 @@
+import { SelectableRepresentationLabel } from '@/src/vtk/RulerWidget/state';
+import { applySelectionAPIMixin } from '@/src/vtk/ToolWidgetUtils/annotationToolMixins';
 import macro from '@kitware/vtk.js/macro';
 import type { Vector3 } from '@kitware/vtk.js/types';
 
@@ -222,4 +224,6 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   publicAPI.delete = macro.chain(() => {
     publicAPI.resetInteractions();
   }, publicAPI.delete);
+
+  applySelectionAPIMixin(publicAPI, model, [SelectableRepresentationLabel]);
 }
diff --git a/src/vtk/RulerWidget/index.js b/src/vtk/RulerWidget/index.js
index 2da4766da..b2ef6c3d9 100644
--- a/src/vtk/RulerWidget/index.js
+++ b/src/vtk/RulerWidget/index.js
@@ -7,7 +7,10 @@ import { Behavior } from '@kitware/vtk.js/Widgets/Representations/WidgetRepresen
 import vtkLineGlyphRepresentation from '@/src/vtk/LineGlyphRepresentation';
 
 import widgetBehavior from './behavior';
-import stateGenerator, { PointsLabel } from './state';
+import stateGenerator, {
+  PointsLabel,
+  SelectableRepresentationLabel,
+} from './state';
 
 export { InteractionState } from './behavior';
 
@@ -30,7 +33,7 @@ function vtkRulerWidget(publicAPI, model) {
     },
     {
       builder: vtkLineGlyphRepresentation,
-      labels: [PointsLabel],
+      labels: [PointsLabel, SelectableRepresentationLabel],
       initialValues: {
         scaleInPixels: true,
         lineThickness: 0.25, // smaller than .5 default to prioritize picking handles
diff --git a/src/vtk/RulerWidget/state.ts b/src/vtk/RulerWidget/state.ts
index 6ecb2f44d..b2e83fd9c 100644
--- a/src/vtk/RulerWidget/state.ts
+++ b/src/vtk/RulerWidget/state.ts
@@ -6,6 +6,7 @@ import createPointState from '../ToolWidgetUtils/pointState';
 import { watchState } from '../ToolWidgetUtils/utils';
 
 export const PointsLabel = 'points';
+export const SelectableRepresentationLabel = 'selectable';
 
 function vtkRulerWidgetState(publicAPI: any, model: any) {
   const firstPoint = createPointState({
diff --git a/src/vtk/ToolWidgetUtils/annotationToolMixins.ts b/src/vtk/ToolWidgetUtils/annotationToolMixins.ts
new file mode 100644
index 000000000..a0f8737ac
--- /dev/null
+++ b/src/vtk/ToolWidgetUtils/annotationToolMixins.ts
@@ -0,0 +1,88 @@
+import { ToolSelectEvent } from '@/src/store/tools/types';
+import {
+  event as registerEvent,
+  VOID,
+  EVENT_ABORT,
+} from '@kitware/vtk.js/macros';
+import vtkProp from '@kitware/vtk.js/Rendering/Core/Prop';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import vtkWidgetRepresentation from '@kitware/vtk.js/Widgets/Representations/WidgetRepresentation';
+
+interface Model {
+  representations: vtkWidgetRepresentation[];
+  _widgetManager: vtkWidgetManager;
+}
+
+interface PublicAPI {
+  getSelectableRepresentations(): vtkWidgetRepresentation[];
+  getSelectableProps(): vtkProp[];
+  detectSelection(ev: any): void;
+  // toolID is filled in by event consumer
+  invokeSelectEvent(ev: ToolSelectEvent): void;
+  [other: string]: any;
+}
+
+export function applySelectionAPIMixin(
+  publicAPI: PublicAPI,
+  model: Model,
+  selectableRepresentationLabels: string[]
+) {
+  const originalAPI = { ...publicAPI };
+  const selectableRepresentationLabelsSet = new Set(
+    selectableRepresentationLabels
+  );
+
+  registerEvent(publicAPI, model, 'SelectEvent');
+
+  publicAPI.getSelectableRepresentations = () => {
+    return model.representations.filter((rep) =>
+      rep
+        .getLabels()
+        .some((label) => selectableRepresentationLabelsSet.has(label))
+    );
+  };
+
+  publicAPI.getSelectableProps = () => {
+    return publicAPI
+      .getSelectableRepresentations()
+      .flatMap((rep: vtkWidgetRepresentation) => rep.getActors());
+  };
+
+  publicAPI.detectSelection = (ev: any) => {
+    const props = new Set(publicAPI.getSelectableProps());
+    const selected = model._widgetManager
+      .getSelections()
+      .map((sel) => sel.getProperties().prop)
+      .filter((prop): prop is vtkProp => !!prop)
+      .some((prop) => props.has(prop));
+
+    publicAPI.invokeSelectEvent({
+      selected,
+      updateBehavior: ev.shiftKey ? 'preserve' : 'single',
+    });
+  };
+
+  publicAPI.handleLeftButtonPress = (ev: any) => {
+    if (originalAPI.handleLeftButtonPress(ev) === EVENT_ABORT) {
+      publicAPI.invokeSelectEvent({
+        selected: false,
+        updateBehavior: 'deselectOthers',
+      });
+      return EVENT_ABORT;
+    }
+    publicAPI.detectSelection(ev);
+    return VOID;
+  };
+
+  publicAPI.handleRightButtonPress = (ev: any) => {
+    if (originalAPI.handleRightButtonPress(ev) === EVENT_ABORT) {
+      publicAPI.invokeSelectEvent({
+        selected: true,
+        updateBehavior: 'deselectOthers',
+      });
+      return EVENT_ABORT;
+    }
+    publicAPI.detectSelection(ev);
+    return VOID;
+  };
+}
diff --git a/src/vtk/ToolWidgetUtils/utils.ts b/src/vtk/ToolWidgetUtils/utils.ts
index 60fdc55f8..f29da3d08 100644
--- a/src/vtk/ToolWidgetUtils/utils.ts
+++ b/src/vtk/ToolWidgetUtils/utils.ts
@@ -1,3 +1,4 @@
+import { VTKEventHandler } from '@/src/composables/onVTKEvent';
 import { Maybe } from '@/src/types';
 import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
@@ -50,9 +51,10 @@ export type WidgetAction = {
 export interface vtkAnnotationToolWidget extends vtkAbstractWidget {
   setManipulator(manipulator: vtkPlaneManipulator): boolean;
   getManipulator(): vtkPlaneManipulator;
-  onRightClickEvent(cb: (eventData: any) => void): vtkSubscription;
-  onPlacedEvent(cb: (eventData: any) => void): vtkSubscription;
-  onHoverEvent(cb: (eventData: any) => void): vtkSubscription;
+  onRightClickEvent(cb: VTKEventHandler): vtkSubscription;
+  onPlacedEvent(cb: VTKEventHandler): vtkSubscription;
+  onHoverEvent(cb: VTKEventHandler): vtkSubscription;
+  onSelectEvent(cb: VTKEventHandler): vtkSubscription;
   resetInteractions(): void;
 }
 

From 59ab8eadc87794d1510b3de14cf3c6f9744fa62c Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Sep 2023 15:14:32 -0400
Subject: [PATCH 05/18] feat(tools): manage selection across images

Also added: deleting a tool will remove it from the global selection.
---
 src/components/MeasurementsToolList.vue | 67 ++++++++++++++++++++++---
 src/store/tools/useAnnotationTool.ts    |  4 ++
 2 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/src/components/MeasurementsToolList.vue b/src/components/MeasurementsToolList.vue
index d4f5424b0..555995482 100644
--- a/src/components/MeasurementsToolList.vue
+++ b/src/components/MeasurementsToolList.vue
@@ -9,6 +9,7 @@ import {
   useMultipleToolSelection,
   MultipleSelectionState,
 } from '@/src/composables/useMultipleToolSelection';
+import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import MeasurementToolDetails from './MeasurementToolDetails.vue';
 import { AnnotationTool } from '../types/annotation-tool';
 
@@ -74,8 +75,14 @@ const tools = computed(() => {
 
 // --- selection and batch actions  --- //
 
-const { selectAll, deselectAll, selected, selectionState } =
-  useMultipleToolSelection(tools);
+const selectionStore = useToolSelectionStore();
+
+const {
+  selectAll,
+  deselectAll,
+  selected,
+  selectionState: visibleSelectionState,
+} = useMultipleToolSelection(tools);
 
 const toggleSelectAll = (shouldSelectAll: boolean) => {
   if (shouldSelectAll) {
@@ -88,14 +95,15 @@ const toggleSelectAll = (shouldSelectAll: boolean) => {
 const forEachSelectedTool = (
   callback: (tool: (typeof tools.value)[number]) => void
 ) =>
-  selected.value
-    .map((id) => tools.value.find((tool) => id === tool.id))
-    .filter(nonNullable)
+  tools.value
+    .filter((tool) => selectionStore.isSelected(tool.id))
     .forEach(callback);
 
 function removeAll() {
-  forEachSelectedTool((tool) => tool.remove());
-  selected.value = [];
+  selectionStore.selection.forEach((sel) => {
+    const store = useAnnotationToolStore(sel.type);
+    store.removeTool(sel.id);
+  });
 }
 
 // If all selected tools are already hidden, it should be "show".
@@ -113,6 +121,30 @@ function toggleGlobalHidden() {
     tool.updateTool({ hidden });
   });
 }
+
+// info about selection that spans multiple images
+const selectedIDsFromOtherImages = computed(() => {
+  const visibleSelection = new Set(tools.value.map((tool) => tool.id));
+  return selectionStore.selection
+    .filter((sel) => !visibleSelection.has(sel.id))
+    .map((sel) => sel.id);
+});
+
+function deselectAllFromOtherImages() {
+  selectedIDsFromOtherImages.value.forEach((id) => {
+    selectionStore.removeSelection(id);
+  });
+}
+
+// augments the visible selection with the selection from other images
+const selectionState = computed(() => {
+  const sizeOfOtherSelection = selectedIDsFromOtherImages.value.length;
+  if (visibleSelectionState.value !== MultipleSelectionState.None)
+    return visibleSelectionState.value;
+  return sizeOfOtherSelection
+    ? MultipleSelectionState.Some
+    : MultipleSelectionState.None;
+});
 </script>
 
 <template>
@@ -165,6 +197,27 @@ function toggleGlobalHidden() {
     </v-col>
   </v-row>
 
+  <v-list-item v-if="selectedIDsFromOtherImages.length">
+    <v-container>
+      <v-row class="d-flex align-center main-row">
+        <v-checkbox
+          class="no-grow mr-4"
+          density="compact"
+          hide-details
+          :model-value="true"
+          @click.stop="deselectAllFromOtherImages"
+        />
+        <v-list-item-title class="d-flex align-center">
+          <v-icon size="small" color="warning" class="mr-2">
+            mdi-alert-circle-outline
+          </v-icon>
+          {{ selectedIDsFromOtherImages.length }}
+          selected annotation(s) on other images
+        </v-list-item-title>
+      </v-row></v-container
+    >
+  </v-list-item>
+
   <v-list-item v-for="tool in tools" :key="tool.id">
     <v-container>
       <v-row class="d-flex align-center main-row">
diff --git a/src/store/tools/useAnnotationTool.ts b/src/store/tools/useAnnotationTool.ts
index b8894b18f..fa5c6b0d9 100644
--- a/src/store/tools/useAnnotationTool.ts
+++ b/src/store/tools/useAnnotationTool.ts
@@ -16,6 +16,7 @@ import { LPSAxisDir } from '@/src/types/lps';
 import { AnnotationTool, ToolID } from '@/src/types/annotation-tool';
 import { findImageID, getDataID } from '@/src/store/datasets';
 import { useIdStore } from '@/src/store/id';
+import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import useViewSliceStore from '../view-configs/slicing';
 import { useLabels, Labels } from './useLabels';
 
@@ -108,6 +109,9 @@ export const useAnnotationTool = <
 
     removeFromArray(toolIDs.value, id);
     delete toolByID.value[id];
+
+    const selectionStore = useToolSelectionStore();
+    selectionStore.removeSelection(id);
   }
 
   function updateTool(id: ToolID, patch: ToolPatch) {

From 35d61e0506d22e1c560548148736c99daba144c1 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Sep 2023 15:16:56 -0400
Subject: [PATCH 06/18] feat(rectangle): make selectable

---
 .../tools/rectangle/RectangleTool.vue         | 36 ++++++++++++++-----
 .../tools/rectangle/RectangleWidget2D.vue     |  9 ++++-
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/components/tools/rectangle/RectangleTool.vue b/src/components/tools/rectangle/RectangleTool.vue
index bbba4a1ef..ad0464438 100644
--- a/src/components/tools/rectangle/RectangleTool.vue
+++ b/src/components/tools/rectangle/RectangleTool.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="overlay-no-events">
     <svg class="overlay-no-events">
-      <bounding-rectangle :points="points" :view-id="viewId" />
+      <bounding-rectangle :points="visiblePoints" :view-id="viewId" />
       <rectangle-widget-2D
         v-for="tool in tools"
         :key="tool.id"
@@ -13,6 +13,7 @@
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(tool.id, $event)"
         @placed="onToolPlaced"
+        @select="onSelect(tool.id, $event)"
         @widgetHover="onHover(tool.id, $event)"
       />
     </svg>
@@ -33,7 +34,11 @@ import {
 import { storeToRefs } from 'pinia';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
-import { Tools } from '@/src/store/tools/types';
+import {
+  Tools,
+  AnnotationToolType,
+  ToolSelectEvent,
+} from '@/src/store/tools/types';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { LPSAxisDir } from '@/src/types/lps';
@@ -48,6 +53,11 @@ import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
 import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
+import {
+  useToolSelectionStore,
+  updateToolSelectionFromEvent,
+} from '@/src/store/tools/toolSelection';
+import { ToolID } from '@/src/types/annotation-tool';
 import RectangleWidget2D from './RectangleWidget2D.vue';
 
 const useActiveToolStore = useRectangleStore;
@@ -133,7 +143,15 @@ export default defineComponent({
       }
     };
 
-    // ---  //
+    // --- selection handling --- //
+
+    const selectionStore = useToolSelectionStore();
+
+    const onSelect = (id: ToolID, event: ToolSelectEvent) => {
+      updateToolSelectionFromEvent(id, event, AnnotationToolType.Ruler);
+    };
+
+    // --- //
 
     const { contextMenu, openContextMenu } = useContextMenu();
 
@@ -141,10 +159,11 @@ export default defineComponent({
 
     const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
 
-    const points = computed(() => {
-      if (!overlayInfo.value.visible) return [];
-      const tool = activeToolStore.toolByID[overlayInfo.value.toolID];
-      return [tool.firstPoint, tool.secondPoint];
+    const visiblePoints = computed(() => {
+      return currentTools.value
+        .filter((tool) => tool.slice === currentSlice.value)
+        .filter((tool) => selectionStore.isSelected(tool.id))
+        .flatMap((tool) => [tool.firstPoint, tool.secondPoint]);
     });
 
     return {
@@ -155,8 +174,9 @@ export default defineComponent({
       openContextMenu,
       activeToolStore,
       onHover,
+      onSelect,
       overlayInfo,
-      points,
+      visiblePoints,
     };
   },
 });
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index cde22902d..8f8422f49 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -33,6 +33,7 @@ import {
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
+import { ToolSelectEvent } from '@/src/store/tools/types';
 
 const useStore = useRectangleStore;
 const vtkWidgetFactory = vtkRectangleWidget;
@@ -41,7 +42,7 @@ const SVG2DComponent = RectangleSVG2D;
 
 export default defineComponent({
   name: 'RectangleWidget2D',
-  emits: ['placed', 'contextmenu', 'widgetHover'],
+  emits: ['placed', 'contextmenu', 'widgetHover', 'select'],
   props: {
     toolId: {
       type: String as unknown as PropType<ToolID>,
@@ -132,6 +133,12 @@ export default defineComponent({
 
     useHoverEvent(emit, widget);
 
+    // --- selection handling --- //
+
+    onVTKEvent(widget, 'onSelectEvent', (event: ToolSelectEvent) => {
+      emit('select', event);
+    });
+
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);

From 9355215d71bbba99b843eeb1c7869643275eda85 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Sep 2023 15:17:16 -0400
Subject: [PATCH 07/18] feat(polygon): make selectable

---
 src/components/tools/polygon/PolygonTool.vue  | 34 +++++++++++++++----
 .../tools/polygon/PolygonWidget2D.vue         |  9 ++++-
 src/vtk/PolygonWidget/behavior.ts             |  4 +++
 src/vtk/PolygonWidget/index.js                |  8 +++--
 src/vtk/PolygonWidget/state.ts                |  1 +
 5 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index 190940fa3..37075604c 100644
--- a/src/components/tools/polygon/PolygonTool.vue
+++ b/src/components/tools/polygon/PolygonTool.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="overlay-no-events">
     <svg class="overlay-no-events">
-      <bounding-rectangle :points="points" :view-id="viewId" />
+      <bounding-rectangle :points="visiblePoints" :view-id="viewId" />
       <polygon-widget-2D
         v-for="tool in tools"
         :key="tool.id"
@@ -13,6 +13,7 @@
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(tool.id, $event)"
         @placed="onToolPlaced"
+        @select="onSelect(tool.id, $event)"
         @widgetHover="onHover(tool.id, $event)"
       />
     </svg>
@@ -33,7 +34,11 @@ import {
 import { storeToRefs } from 'pinia';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
-import { Tools } from '@/src/store/tools/types';
+import {
+  AnnotationToolType,
+  Tools,
+  ToolSelectEvent,
+} from '@/src/store/tools/types';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { LPSAxisDir } from '@/src/types/lps';
@@ -48,6 +53,11 @@ import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
 import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
+import { ToolID } from '@/src/types/annotation-tool';
+import {
+  updateToolSelectionFromEvent,
+  useToolSelectionStore,
+} from '@/src/store/tools/toolSelection';
 import PolygonWidget2D from './PolygonWidget2D.vue';
 
 const useActiveToolStore = usePolygonStore;
@@ -133,6 +143,14 @@ export default defineComponent({
       }
     };
 
+    // --- selection handling --- //
+
+    const selectionStore = useToolSelectionStore();
+
+    const onSelect = (id: ToolID, event: ToolSelectEvent) => {
+      updateToolSelectionFromEvent(id, event, AnnotationToolType.Ruler);
+    };
+
     // ---  //
 
     const { contextMenu, openContextMenu } = useContextMenu();
@@ -141,10 +159,11 @@ export default defineComponent({
 
     const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
 
-    const points = computed(() => {
-      if (!overlayInfo.value.visible) return [];
-      const tool = activeToolStore.toolByID[overlayInfo.value.toolID];
-      return tool.points;
+    const visiblePoints = computed(() => {
+      return currentTools.value
+        .filter((tool) => tool.slice === currentSlice.value)
+        .filter((tool) => selectionStore.isSelected(tool.id))
+        .flatMap((tool) => tool.points);
     });
 
     return {
@@ -155,8 +174,9 @@ export default defineComponent({
       openContextMenu,
       activeToolStore,
       onHover,
+      onSelect,
       overlayInfo,
-      points,
+      visiblePoints,
     };
   },
 });
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index 039d2ddc7..7521629a2 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -32,11 +32,12 @@ import {
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
+import { ToolSelectEvent } from '@/src/store/tools/types';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
   name: 'PolygonWidget2D',
-  emits: ['placed', 'contextmenu', 'widgetHover'],
+  emits: ['placed', 'contextmenu', 'widgetHover', 'select'],
   props: {
     toolId: {
       type: String as unknown as PropType<ToolID>,
@@ -115,6 +116,12 @@ export default defineComponent({
 
     useHoverEvent(emit, widget);
 
+    // --- selection handling --- //
+
+    onVTKEvent(widget, 'onSelectEvent', (event: ToolSelectEvent) => {
+      emit('select', event);
+    });
+
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);
diff --git a/src/vtk/PolygonWidget/behavior.ts b/src/vtk/PolygonWidget/behavior.ts
index 280c5c6df..d7b573c2d 100644
--- a/src/vtk/PolygonWidget/behavior.ts
+++ b/src/vtk/PolygonWidget/behavior.ts
@@ -3,6 +3,8 @@ import macro from '@kitware/vtk.js/macros';
 import { Vector3 } from '@kitware/vtk.js/types';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 
+import { applySelectionAPIMixin } from '@/src/vtk/ToolWidgetUtils/annotationToolMixins';
+import { SelectableRepresentationLabel } from '@/src/vtk/PolygonWidget/state';
 import { WidgetAction } from '../ToolWidgetUtils/utils';
 
 type Position3d = { x: number; y: number; z: number };
@@ -433,4 +435,6 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   publicAPI.delete = macro.chain(() => {
     publicAPI.resetInteractions();
   }, publicAPI.delete);
+
+  applySelectionAPIMixin(publicAPI, model, [SelectableRepresentationLabel]);
 }
diff --git a/src/vtk/PolygonWidget/index.js b/src/vtk/PolygonWidget/index.js
index e6eb9ab51..b08b41cd6 100644
--- a/src/vtk/PolygonWidget/index.js
+++ b/src/vtk/PolygonWidget/index.js
@@ -6,7 +6,11 @@ import { Behavior } from '@kitware/vtk.js/Widgets/Representations/WidgetRepresen
 import vtkLineGlyphRepresentation from '@/src/vtk/LineGlyphRepresentation';
 
 import widgetBehavior from './behavior';
-import stateGenerator, { HandlesLabel, MoveHandleLabel } from './state';
+import stateGenerator, {
+  HandlesLabel,
+  MoveHandleLabel,
+  SelectableRepresentationLabel,
+} from './state';
 
 // ----------------------------------------------------------------------------
 // Factory
@@ -27,7 +31,7 @@ function vtkPolygonWidget(publicAPI, model) {
     },
     {
       builder: vtkLineGlyphRepresentation,
-      labels: [HandlesLabel],
+      labels: [HandlesLabel, SelectableRepresentationLabel],
       initialValues: {
         scaleInPixels: true,
         lineThickness: 0.25, // smaller than .5 default to prioritize picking handles
diff --git a/src/vtk/PolygonWidget/state.ts b/src/vtk/PolygonWidget/state.ts
index a580fce10..8b284c2ea 100644
--- a/src/vtk/PolygonWidget/state.ts
+++ b/src/vtk/PolygonWidget/state.ts
@@ -10,6 +10,7 @@ import { watchState } from '../ToolWidgetUtils/utils';
 
 export const MoveHandleLabel = 'moveHandle';
 export const HandlesLabel = 'handles';
+export const SelectableRepresentationLabel = 'selectable';
 
 const PIXEL_SIZE = 20;
 

From 8e2e10817af4b93ddd8bbcd0451f08c7ec2a8829 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Sep 2023 17:41:50 -0400
Subject: [PATCH 08/18] feat(onVTKEvent): add priority option

---
 src/composables/onVTKEvent.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/composables/onVTKEvent.ts b/src/composables/onVTKEvent.ts
index 684c87823..1d08a0a7a 100644
--- a/src/composables/onVTKEvent.ts
+++ b/src/composables/onVTKEvent.ts
@@ -3,12 +3,19 @@ import { vtkObject, vtkSubscription } from '@kitware/vtk.js/interfaces';
 import { MaybeRef, computed, onBeforeUnmount, unref, watch } from 'vue';
 
 export type VTKEventHandler = (ev?: any) => any;
-export type VTKEventListener = (handler: VTKEventHandler) => vtkSubscription;
+export type VTKEventListener = (
+  handler: VTKEventHandler,
+  priority?: number
+) => vtkSubscription;
+export type OnVTKEventOptions = {
+  priority?: number;
+};
 
 export function onVTKEvent<T extends vtkObject, K extends keyof T>(
   vtkObj: MaybeRef<Maybe<T>>,
   eventHookName: T[K] extends VTKEventListener ? K : never,
-  callback: VTKEventHandler
+  callback: VTKEventHandler,
+  options?: OnVTKEventOptions
 ) {
   const listenerRef = computed(() => {
     const obj = unref(vtkObj);
@@ -26,7 +33,7 @@ export function onVTKEvent<T extends vtkObject, K extends keyof T>(
     (listener) => {
       stop();
       if (listener) {
-        subscription = listener(callback);
+        subscription = listener(callback, options?.priority ?? 0);
       }
     },
     { immediate: true }

From 72815bb3c3c0cacc26f8fd7d7f0ebf1f418e99ed Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Sep 2023 12:03:13 -0400
Subject: [PATCH 09/18] feat(tools): widgets use tool id and type

Update types to access tool ID and type.

Types in ToolWidgetUtils have been moved to types/annotation-tool.
---
 .../tools/AnnotationContextMenu.vue           |  7 +++-
 .../tools/polygon/PolygonWidget2D.vue         |  1 -
 .../tools/rectangle/RectangleWidget2D.vue     |  1 -
 src/components/tools/ruler/RulerWidget2D.vue  |  1 -
 src/composables/annotationTool.ts             | 11 +++--
 src/types/annotation-tool.ts                  |  7 ----
 src/vtk/PolygonWidget/behavior.ts             |  2 +-
 src/vtk/PolygonWidget/index.d.ts              | 12 +++---
 src/vtk/PolygonWidget/state.ts                | 14 ++++---
 src/vtk/RectangleWidget/index.d.ts            |  4 +-
 src/vtk/RectangleWidget/index.js              | 14 +++----
 src/vtk/RulerWidget/index.d.ts                | 12 +++---
 src/vtk/RulerWidget/state.ts                  | 12 +++---
 .../ToolWidgetUtils/annotationWidgetState.ts  | 21 ++++++++++
 src/vtk/ToolWidgetUtils/types.ts              | 42 +++++++++++++++++++
 src/vtk/ToolWidgetUtils/utils.ts              | 26 ------------
 16 files changed, 107 insertions(+), 80 deletions(-)
 create mode 100644 src/vtk/ToolWidgetUtils/annotationWidgetState.ts
 create mode 100644 src/vtk/ToolWidgetUtils/types.ts

diff --git a/src/components/tools/AnnotationContextMenu.vue b/src/components/tools/AnnotationContextMenu.vue
index 6879c5104..402fad3c7 100644
--- a/src/components/tools/AnnotationContextMenu.vue
+++ b/src/components/tools/AnnotationContextMenu.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, shallowReactive } from 'vue';
 import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
-import { ContextMenuEvent, ToolID } from '@/src/types/annotation-tool';
-import { WidgetAction } from '@/src/vtk/ToolWidgetUtils/utils';
+import {
+  ContextMenuEvent,
+  WidgetAction,
+} from '@/src/vtk/ToolWidgetUtils/types';
+import { ToolID } from '@/src/types/annotation-tool';
 
 const props = defineProps<{
   toolStore: AnnotationToolStore;
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index 7521629a2..fe5c6d39b 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -84,7 +84,6 @@ export default defineComponent({
 
     const widgetFactory = vtkWidgetFactory.newInstance({
       id: toolId.value,
-      store: toolStore,
     });
     const widget = ref<WidgetView | null>(null);
 
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index 8f8422f49..34e16b636 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -89,7 +89,6 @@ export default defineComponent({
 
     const widgetFactory = vtkWidgetFactory.newInstance({
       id: toolId.value,
-      store: toolStore,
       isPlaced: !isPlacing.value,
     });
     const widget = ref<WidgetView | null>(null);
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index 5ff9f9844..319777e94 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -84,7 +84,6 @@ export default defineComponent({
 
     const widgetFactory = vtkRulerWidget.newInstance({
       id: toolId.value,
-      store: rulerStore,
       isPlaced: !isPlacing.value,
     });
     const widget = ref<vtkRulerViewWidget | null>(null);
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index f75ea3be5..72f2c7cd6 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -2,7 +2,6 @@ import { Ref, UnwrapRef, computed, readonly, ref, watch } from 'vue';
 import { Vector2 } from '@kitware/vtk.js/types';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
-import { vtkAnnotationToolWidget } from '@/src/vtk/ToolWidgetUtils/utils';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { Maybe } from '@/src/types';
 import { useToolStore } from '@/src/store/tools';
@@ -10,16 +9,16 @@ 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,
-  ToolID,
-} from '@/src/types/annotation-tool';
+import { AnnotationTool, 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';
 import { usePopperState } from '@/src/composables/usePopperState';
 import { onViewProxyMounted } from '@/src/composables/useViewProxy';
+import {
+  ContextMenuEvent,
+  vtkAnnotationToolWidget,
+} from '@/src/vtk/ToolWidgetUtils/types';
 
 const SHOW_OVERLAY_DELAY = 250; // milliseconds
 
diff --git a/src/types/annotation-tool.ts b/src/types/annotation-tool.ts
index c905238cc..aad4e18e0 100644
--- a/src/types/annotation-tool.ts
+++ b/src/types/annotation-tool.ts
@@ -1,6 +1,4 @@
-import type { Vector2 } from '@kitware/vtk.js/types';
 import { FrameOfReference } from '../utils/frameOfReference';
-import { WidgetAction } from '../vtk/ToolWidgetUtils/utils';
 
 export type ToolID = string & { __type: 'ToolID' };
 
@@ -31,8 +29,3 @@ export type AnnotationTool = {
 
   hidden?: boolean;
 };
-
-export type ContextMenuEvent = {
-  displayXY: Vector2;
-  widgetActions: Array<WidgetAction>;
-};
diff --git a/src/vtk/PolygonWidget/behavior.ts b/src/vtk/PolygonWidget/behavior.ts
index d7b573c2d..4647a9e87 100644
--- a/src/vtk/PolygonWidget/behavior.ts
+++ b/src/vtk/PolygonWidget/behavior.ts
@@ -5,7 +5,7 @@ import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 
 import { applySelectionAPIMixin } from '@/src/vtk/ToolWidgetUtils/annotationToolMixins';
 import { SelectableRepresentationLabel } from '@/src/vtk/PolygonWidget/state';
-import { WidgetAction } from '../ToolWidgetUtils/utils';
+import { WidgetAction } from '@/src/vtk/ToolWidgetUtils/types';
 
 type Position3d = { x: number; y: number; z: number };
 type vtkMouseEvent = {
diff --git a/src/vtk/PolygonWidget/index.d.ts b/src/vtk/PolygonWidget/index.d.ts
index c22231ff8..e91832340 100644
--- a/src/vtk/PolygonWidget/index.d.ts
+++ b/src/vtk/PolygonWidget/index.d.ts
@@ -7,12 +7,14 @@ import { usePolygonStore } from '@/src/store/tools/polygons';
 import {
   vtkAnnotationToolWidget,
   vtkAnnotationWidgetPointState,
-} from '../ToolWidgetUtils/utils';
+  vtkAnnotationWidgetState,
+} from '@/src/vtk/ToolWidgetUtils/types';
+import { IAnnotationToolWidgetInitialValues } from '@/src/types/annotation-tool';
 
 export interface vtkPolygonWidgetPointState
   extends vtkAnnotationWidgetPointState {}
 
-export interface vtkPolygonWidgetState extends vtkWidgetState {
+export interface vtkPolygonWidgetState extends vtkAnnotationWidgetState {
   getMoveHandle(): any;
   clearHandles(): void;
   getPlacing(): boolean;
@@ -25,10 +27,8 @@ export interface vtkPolygonViewWidget extends vtkAnnotationToolWidget {
   getWidgetState(): vtkPolygonWidgetState;
 }
 
-export interface IPolygonWidgetInitialValues {
-  id: string;
-  store: ReturnType<typeof usePolygonStore>;
-}
+export interface IPolygonWidgetInitialValues
+  extends IAnnotationToolWidgetInitialValues {}
 
 export interface vtkPolygonWidget extends vtkAbstractWidgetFactory {
   getLength(): number;
diff --git a/src/vtk/PolygonWidget/state.ts b/src/vtk/PolygonWidget/state.ts
index 8b284c2ea..d1773ae38 100644
--- a/src/vtk/PolygonWidget/state.ts
+++ b/src/vtk/PolygonWidget/state.ts
@@ -4,7 +4,9 @@ import bounds from '@kitware/vtk.js/Widgets/Core/StateBuilder/boundsMixin';
 import visibleMixin from '@kitware/vtk.js/Widgets/Core/StateBuilder/visibleMixin';
 import scale1Mixin from '@kitware/vtk.js/Widgets/Core/StateBuilder/scale1Mixin';
 import { Vector3 } from '@kitware/vtk.js/types';
-
+import vtkAnnotationWidgetState from '@/src/vtk/ToolWidgetUtils/annotationWidgetState';
+import { Polygon } from '@/src/types/polygon';
+import { AnnotationToolType } from '@/src/store/tools/types';
 import createPointState from '../ToolWidgetUtils/pointState';
 import { watchState } from '../ToolWidgetUtils/utils';
 
@@ -26,13 +28,13 @@ function vtkPolygonWidgetState(publicAPI: any, model: any) {
   model.classHierarchy.push('vtkPolygonWidgetState');
   model.moveHandle = createPointState({
     id: model.id,
-    store: model._store,
+    store: publicAPI.getStore(),
     key: 'movePoint',
     visible: true,
   });
   watchState(publicAPI, model.moveHandle, () => publicAPI.modified());
 
-  const getTool = () => model._store.toolByID[model.id];
+  const getTool = () => publicAPI.getStore().toolByID[model.id] as Polygon;
 
   model.handles = [];
 
@@ -122,6 +124,7 @@ function vtkPolygonWidgetState(publicAPI: any, model: any) {
 }
 
 const defaultValues = (initialValues: any) => ({
+  toolType: AnnotationToolType.Polygon,
   ...initialValues,
 });
 
@@ -131,12 +134,11 @@ function _createPolygonWidgetState(
   initialValues: any
 ) {
   Object.assign(model, defaultValues(initialValues));
-  vtkWidgetState.extend(publicAPI, model, initialValues);
+  vtkAnnotationWidgetState.extend(publicAPI, model, initialValues);
   bounds.extend(publicAPI, model);
 
-  macro.get(publicAPI, model, ['id', 'handles', 'moveHandle', 'finishable']);
+  macro.get(publicAPI, model, ['handles', 'moveHandle', 'finishable']);
   macro.setGet(publicAPI, model, ['finishable']);
-  macro.moveToProtected(publicAPI, model, ['store']);
 
   vtkPolygonWidgetState(publicAPI, model);
 }
diff --git a/src/vtk/RectangleWidget/index.d.ts b/src/vtk/RectangleWidget/index.d.ts
index 3b6f3fc79..4e4a59e2e 100644
--- a/src/vtk/RectangleWidget/index.d.ts
+++ b/src/vtk/RectangleWidget/index.d.ts
@@ -20,9 +20,7 @@ export interface vtkRectangleWidgetState extends vtkRulerWidgetState {}
 export interface vtkRectangleViewWidget extends vtkRulerViewWidget {}
 
 export interface IRectangleWidgetInitialValues
-  extends IRulerWidgetInitialValues {
-  store: ReturnType<typeof useRectangleStore>;
-}
+  extends IRulerWidgetInitialValues {}
 
 export interface vtkRectangleWidget extends vtkRulerWidget {}
 
diff --git a/src/vtk/RectangleWidget/index.js b/src/vtk/RectangleWidget/index.js
index 737ae6d5d..3ab57fc3e 100644
--- a/src/vtk/RectangleWidget/index.js
+++ b/src/vtk/RectangleWidget/index.js
@@ -1,5 +1,6 @@
 import macro from '@kitware/vtk.js/macro';
 
+import { AnnotationToolType } from '@/src/store/tools/types';
 import vtkRulerWidget from '../RulerWidget';
 import vtkRectangleLineRepresentation from './RectangleLineRepresentation';
 
@@ -34,15 +35,10 @@ const DEFAULT_VALUES = {};
 export function extend(publicAPI, model, initialValues = {}) {
   Object.assign(model, DEFAULT_VALUES, initialValues);
 
-  const { store: toolStore, ...rest } = initialValues;
-
-  const rulerStore = {
-    ...toolStore,
-    rulerByID: toolStore.toolByID,
-    updateRuler: toolStore.updateTool,
-  };
-
-  vtkRulerWidget.extend(publicAPI, model, { store: rulerStore, ...rest });
+  vtkRulerWidget.extend(publicAPI, model, {
+    ...initialValues,
+    toolType: AnnotationToolType.Rectangle,
+  });
 
   vtkRectangleWidget(publicAPI, model);
 }
diff --git a/src/vtk/RulerWidget/index.d.ts b/src/vtk/RulerWidget/index.d.ts
index 7d41ccd8b..7ecd171f5 100644
--- a/src/vtk/RulerWidget/index.d.ts
+++ b/src/vtk/RulerWidget/index.d.ts
@@ -6,16 +6,19 @@ import { InteractionState } from './behavior';
 import { useRulerStore } from '@/src/store/tools/rulers';
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
 import {
+  IAnnotationToolWidgetInitialValues,
   vtkAnnotationToolWidget,
   vtkAnnotationWidgetPointState,
-} from '../ToolWidgetUtils/utils';
+  vtkAnnotationWidgetState,
+} from '@/src/vtk/ToolWidgetUtils/types';
+import { AnnotationToolType } from '@/src/store/tools/types';
 
 export { InteractionState } from './behavior';
 
 export interface vtkRulerWidgetPointState
   extends vtkAnnotationWidgetPointState {}
 
-export interface vtkRulerWidgetState extends vtkWidgetState {
+export interface vtkRulerWidgetState extends vtkAnnotationWidgetState {
   setIsPlaced(isPlaced: boolean): boolean;
   getIsPlaced(): boolean;
   getFirstPoint(): vtkRulerWidgetPointState;
@@ -28,9 +31,8 @@ export interface vtkRulerViewWidget extends vtkAnnotationToolWidget {
   getWidgetState(): vtkRulerWidgetState;
 }
 
-export interface IRulerWidgetInitialValues {
-  id: string;
-  store: ReturnType<typeof useRulerStore>;
+export interface IRulerWidgetInitialValues
+  extends IAnnotationToolWidgetInitialValues {
   isPlaced: boolean;
 }
 
diff --git a/src/vtk/RulerWidget/state.ts b/src/vtk/RulerWidget/state.ts
index b2e83fd9c..dbd68c1f5 100644
--- a/src/vtk/RulerWidget/state.ts
+++ b/src/vtk/RulerWidget/state.ts
@@ -1,6 +1,7 @@
 import macro from '@kitware/vtk.js/macros';
-import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
 import bounds from '@kitware/vtk.js/Widgets/Core/StateBuilder/boundsMixin';
+import vtkAnnotationWidgetState from '@/src/vtk/ToolWidgetUtils/annotationWidgetState';
+import { AnnotationToolType } from '@/src/store/tools/types';
 
 import createPointState from '../ToolWidgetUtils/pointState';
 import { watchState } from '../ToolWidgetUtils/utils';
@@ -11,13 +12,13 @@ export const SelectableRepresentationLabel = 'selectable';
 function vtkRulerWidgetState(publicAPI: any, model: any) {
   const firstPoint = createPointState({
     id: model.id,
-    store: model._store,
+    store: publicAPI.getStore(),
     key: 'firstPoint',
     visible: true,
   });
   const secondPoint = createPointState({
     id: model.id,
-    store: model._store,
+    store: publicAPI.getStore(),
     key: 'secondPoint',
     visible: true,
   });
@@ -34,6 +35,7 @@ function vtkRulerWidgetState(publicAPI: any, model: any) {
 }
 
 const defaultValues = (initialValues: any) => ({
+  toolType: AnnotationToolType.Ruler,
   isPlaced: false,
   ...initialValues,
 });
@@ -44,12 +46,10 @@ function _createRulerWidgetState(
   initialValues: any
 ) {
   Object.assign(model, defaultValues(initialValues));
-  vtkWidgetState.extend(publicAPI, model, initialValues);
+  vtkAnnotationWidgetState.extend(publicAPI, model, initialValues);
   bounds.extend(publicAPI, model);
 
-  macro.get(publicAPI, model, ['id']);
   macro.setGet(publicAPI, model, ['isPlaced']);
-  macro.moveToProtected(publicAPI, model, ['store']);
 
   vtkRulerWidgetState(publicAPI, model);
 }
diff --git a/src/vtk/ToolWidgetUtils/annotationWidgetState.ts b/src/vtk/ToolWidgetUtils/annotationWidgetState.ts
new file mode 100644
index 000000000..19c10051b
--- /dev/null
+++ b/src/vtk/ToolWidgetUtils/annotationWidgetState.ts
@@ -0,0 +1,21 @@
+import { useAnnotationToolStore } from '@/src/store/tools';
+import { IAnnotationToolWidgetInitialValues } from '@/src/vtk/ToolWidgetUtils/types';
+import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
+import macro from '@kitware/vtk.js/macros';
+
+function extend(
+  publicAPI: any,
+  model: any,
+  initialValues: IAnnotationToolWidgetInitialValues
+) {
+  vtkWidgetState.extend(publicAPI, model, initialValues);
+  macro.get(publicAPI, model, ['id', 'toolType']);
+
+  publicAPI.getStore = () => useAnnotationToolStore(model.toolType);
+}
+
+export declare const vtkAnnotationWidgetState: {
+  extend: typeof extend;
+};
+
+export default { extend };
diff --git a/src/vtk/ToolWidgetUtils/types.ts b/src/vtk/ToolWidgetUtils/types.ts
new file mode 100644
index 000000000..6ff4b3e6b
--- /dev/null
+++ b/src/vtk/ToolWidgetUtils/types.ts
@@ -0,0 +1,42 @@
+import { VTKEventHandler } from '@/src/composables/onVTKEvent';
+import { AnnotationToolType } from '@/src/store/tools/types';
+import { ToolID } from '@/src/types/annotation-tool';
+import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
+import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
+import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
+import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import { Vector2, Vector3 } from '@kitware/vtk.js/types';
+
+export type WidgetAction = {
+  name: string;
+  func: () => void;
+};
+
+export type ContextMenuEvent = {
+  displayXY: Vector2;
+  widgetActions: Array<WidgetAction>;
+};
+
+export interface vtkAnnotationWidgetPointState extends vtkWidgetState {
+  getVisible(): boolean;
+  getOrigin(): Vector3 | null;
+}
+
+export interface vtkAnnotationWidgetState extends vtkWidgetState {
+  getId(): ToolID;
+  getToolType(): AnnotationToolType;
+}
+
+export interface IAnnotationToolWidgetInitialValues {
+  id: ToolID;
+}
+
+export interface vtkAnnotationToolWidget extends vtkAbstractWidget {
+  setManipulator(manipulator: vtkPlaneManipulator): boolean;
+  getManipulator(): vtkPlaneManipulator;
+  onRightClickEvent(cb: VTKEventHandler): vtkSubscription;
+  onPlacedEvent(cb: VTKEventHandler): vtkSubscription;
+  onHoverEvent(cb: VTKEventHandler): vtkSubscription;
+  resetInteractions(): void;
+  getWidgetState(): vtkAnnotationWidgetState;
+}
diff --git a/src/vtk/ToolWidgetUtils/utils.ts b/src/vtk/ToolWidgetUtils/utils.ts
index f29da3d08..af41b2acf 100644
--- a/src/vtk/ToolWidgetUtils/utils.ts
+++ b/src/vtk/ToolWidgetUtils/utils.ts
@@ -1,10 +1,4 @@
-import { VTKEventHandler } from '@/src/composables/onVTKEvent';
 import { Maybe } from '@/src/types';
-import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
-import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
-import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
-import { vtkSubscription } from '@kitware/vtk.js/interfaces';
-import { Vector3 } from '@kitware/vtk.js/types';
 import { Store } from 'pinia';
 
 export function watchStore<T>(
@@ -42,23 +36,3 @@ export function watchState(
     originalDelete();
   };
 }
-
-export type WidgetAction = {
-  name: string;
-  func: () => void;
-};
-
-export interface vtkAnnotationToolWidget extends vtkAbstractWidget {
-  setManipulator(manipulator: vtkPlaneManipulator): boolean;
-  getManipulator(): vtkPlaneManipulator;
-  onRightClickEvent(cb: VTKEventHandler): vtkSubscription;
-  onPlacedEvent(cb: VTKEventHandler): vtkSubscription;
-  onHoverEvent(cb: VTKEventHandler): vtkSubscription;
-  onSelectEvent(cb: VTKEventHandler): vtkSubscription;
-  resetInteractions(): void;
-}
-
-export interface vtkAnnotationWidgetPointState extends vtkWidgetState {
-  getVisible(): boolean;
-  getOrigin(): Vector3 | null;
-}

From 4404124f6e1df6aab182c82a5ea51d966ec4c5ce Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Sep 2023 13:39:41 -0400
Subject: [PATCH 10/18] feat(SelectTool): selection management

---
 src/components/VtkTwoView.vue                 |  3 +
 src/components/tools/SelectTool.vue           | 55 ++++++++++++
 src/components/tools/polygon/PolygonTool.vue  | 23 +----
 .../tools/polygon/PolygonWidget2D.vue         |  9 +-
 .../tools/rectangle/RectangleTool.vue         | 23 +----
 .../tools/rectangle/RectangleWidget2D.vue     |  9 +-
 src/components/tools/ruler/RulerTool.vue      | 23 +----
 src/components/tools/ruler/RulerWidget2D.vue  |  9 +-
 src/shims-vtk.d.ts                            |  4 +
 src/store/tools/toolSelection.ts              | 22 +----
 src/store/tools/types.ts                      | 10 ---
 src/vtk/PolygonWidget/behavior.ts             |  4 -
 src/vtk/PolygonWidget/index.js                |  8 +-
 src/vtk/PolygonWidget/state.ts                |  1 -
 src/vtk/RulerWidget/behavior.ts               |  4 -
 src/vtk/RulerWidget/index.js                  |  7 +-
 src/vtk/RulerWidget/state.ts                  |  1 -
 .../ToolWidgetUtils/annotationToolMixins.ts   | 88 -------------------
 18 files changed, 79 insertions(+), 224 deletions(-)
 create mode 100644 src/components/tools/SelectTool.vue
 delete mode 100644 src/vtk/ToolWidgetUtils/annotationToolMixins.ts

diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 97974cc94..8582039ee 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -41,6 +41,7 @@
         <zoom-tool :view-id="viewID" />
         <slice-scroll-tool :view-id="viewID" />
         <window-level-tool :view-id="viewID" />
+        <select-tool :view-id="viewID" :widget-manager="widgetManager" />
         <ruler-tool
           :view-id="viewID"
           :widget-manager="widgetManager"
@@ -194,6 +195,7 @@ import { Mode as LookupTableProxyMode } from '@kitware/vtk.js/Proxy/Core/LookupT
 import { manageVTKSubscription } from '@/src/composables/manageVTKSubscription';
 import SliceSlider from '@/src/components/SliceSlider.vue';
 import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
+import SelectTool from '@/src/components/tools/SelectTool.vue';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useOrientationLabels } from '../composables/useOrientationLabels';
 import { getLPSAxisFromDir } from '../utils/lps';
@@ -266,6 +268,7 @@ export default defineComponent({
     PaintTool,
     CrosshairsTool,
     CropTool,
+    SelectTool,
   },
   setup(props) {
     const windowingStore = useWindowingStore();
diff --git a/src/components/tools/SelectTool.vue b/src/components/tools/SelectTool.vue
new file mode 100644
index 000000000..4b12cc0cd
--- /dev/null
+++ b/src/components/tools/SelectTool.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { useViewStore } from '@/src/store/views';
+import { computed, toRefs } from 'vue';
+import { WIDGET_PRIORITY } from '@kitware/vtk.js/Widgets/Core/AbstractWidget/Constants';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
+import { vtkAnnotationToolWidget } from '@/src/vtk/ToolWidgetUtils/types';
+
+const props = defineProps<{
+  viewId: string;
+  widgetManager: vtkWidgetManager;
+}>();
+
+const { viewId, widgetManager } = toRefs(props);
+
+const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
+const interactor = computed(() => viewProxy.value?.getInteractor());
+const selectionStore = useToolSelectionStore();
+
+onVTKEvent(
+  interactor,
+  'onLeftButtonPress',
+  (event: any) => {
+    const withModifiers = !!(event.shiftKey || event.controlKey);
+    const selectedData = widgetManager.value.getSelectedData();
+    if ('widget' in selectedData) {
+      // clicked in empty space.
+      const widget = selectedData.widget as vtkAnnotationToolWidget;
+      const widgetState = widget.getWidgetState();
+      const id = widgetState.getId();
+      const type = widgetState.getToolType();
+      // preserve if we've used shift or ctrl
+      if (withModifiers) {
+        selectionStore.toggleSelection(id, type);
+      } else {
+        selectionStore.clearSelection();
+        selectionStore.addSelection(id, type);
+      }
+    } else if (!withModifiers) {
+      // if no modifiers, then deselect
+      selectionStore.clearSelection();
+    }
+  },
+  {
+    priority: WIDGET_PRIORITY + 1,
+  }
+);
+
+const render = () => {};
+</script>
+
+<template>
+  <render />
+</template>
diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index 37075604c..c4e39737a 100644
--- a/src/components/tools/polygon/PolygonTool.vue
+++ b/src/components/tools/polygon/PolygonTool.vue
@@ -13,7 +13,6 @@
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(tool.id, $event)"
         @placed="onToolPlaced"
-        @select="onSelect(tool.id, $event)"
         @widgetHover="onHover(tool.id, $event)"
       />
     </svg>
@@ -34,11 +33,7 @@ import {
 import { storeToRefs } from 'pinia';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
-import {
-  AnnotationToolType,
-  Tools,
-  ToolSelectEvent,
-} from '@/src/store/tools/types';
+import { Tools } from '@/src/store/tools/types';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { LPSAxisDir } from '@/src/types/lps';
@@ -53,11 +48,7 @@ import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
 import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
-import { ToolID } from '@/src/types/annotation-tool';
-import {
-  updateToolSelectionFromEvent,
-  useToolSelectionStore,
-} from '@/src/store/tools/toolSelection';
+import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import PolygonWidget2D from './PolygonWidget2D.vue';
 
 const useActiveToolStore = usePolygonStore;
@@ -143,14 +134,6 @@ export default defineComponent({
       }
     };
 
-    // --- selection handling --- //
-
-    const selectionStore = useToolSelectionStore();
-
-    const onSelect = (id: ToolID, event: ToolSelectEvent) => {
-      updateToolSelectionFromEvent(id, event, AnnotationToolType.Ruler);
-    };
-
     // ---  //
 
     const { contextMenu, openContextMenu } = useContextMenu();
@@ -159,6 +142,7 @@ export default defineComponent({
 
     const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
 
+    const selectionStore = useToolSelectionStore();
     const visiblePoints = computed(() => {
       return currentTools.value
         .filter((tool) => tool.slice === currentSlice.value)
@@ -174,7 +158,6 @@ export default defineComponent({
       openContextMenu,
       activeToolStore,
       onHover,
-      onSelect,
       overlayInfo,
       visiblePoints,
     };
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index fe5c6d39b..c524d11ef 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -32,12 +32,11 @@ import {
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
-import { ToolSelectEvent } from '@/src/store/tools/types';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
   name: 'PolygonWidget2D',
-  emits: ['placed', 'contextmenu', 'widgetHover', 'select'],
+  emits: ['placed', 'contextmenu', 'widgetHover'],
   props: {
     toolId: {
       type: String as unknown as PropType<ToolID>,
@@ -115,12 +114,6 @@ export default defineComponent({
 
     useHoverEvent(emit, widget);
 
-    // --- selection handling --- //
-
-    onVTKEvent(widget, 'onSelectEvent', (event: ToolSelectEvent) => {
-      emit('select', event);
-    });
-
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);
diff --git a/src/components/tools/rectangle/RectangleTool.vue b/src/components/tools/rectangle/RectangleTool.vue
index ad0464438..15fac2a1b 100644
--- a/src/components/tools/rectangle/RectangleTool.vue
+++ b/src/components/tools/rectangle/RectangleTool.vue
@@ -13,7 +13,6 @@
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(tool.id, $event)"
         @placed="onToolPlaced"
-        @select="onSelect(tool.id, $event)"
         @widgetHover="onHover(tool.id, $event)"
       />
     </svg>
@@ -34,11 +33,7 @@ import {
 import { storeToRefs } from 'pinia';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
-import {
-  Tools,
-  AnnotationToolType,
-  ToolSelectEvent,
-} from '@/src/store/tools/types';
+import { Tools } from '@/src/store/tools/types';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { LPSAxisDir } from '@/src/types/lps';
@@ -53,11 +48,7 @@ import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
 import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
-import {
-  useToolSelectionStore,
-  updateToolSelectionFromEvent,
-} from '@/src/store/tools/toolSelection';
-import { ToolID } from '@/src/types/annotation-tool';
+import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import RectangleWidget2D from './RectangleWidget2D.vue';
 
 const useActiveToolStore = useRectangleStore;
@@ -143,14 +134,6 @@ export default defineComponent({
       }
     };
 
-    // --- selection handling --- //
-
-    const selectionStore = useToolSelectionStore();
-
-    const onSelect = (id: ToolID, event: ToolSelectEvent) => {
-      updateToolSelectionFromEvent(id, event, AnnotationToolType.Ruler);
-    };
-
     // --- //
 
     const { contextMenu, openContextMenu } = useContextMenu();
@@ -159,6 +142,7 @@ export default defineComponent({
 
     const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
 
+    const selectionStore = useToolSelectionStore();
     const visiblePoints = computed(() => {
       return currentTools.value
         .filter((tool) => tool.slice === currentSlice.value)
@@ -174,7 +158,6 @@ export default defineComponent({
       openContextMenu,
       activeToolStore,
       onHover,
-      onSelect,
       overlayInfo,
       visiblePoints,
     };
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index 34e16b636..741a7be77 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -33,7 +33,6 @@ import {
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
-import { ToolSelectEvent } from '@/src/store/tools/types';
 
 const useStore = useRectangleStore;
 const vtkWidgetFactory = vtkRectangleWidget;
@@ -42,7 +41,7 @@ const SVG2DComponent = RectangleSVG2D;
 
 export default defineComponent({
   name: 'RectangleWidget2D',
-  emits: ['placed', 'contextmenu', 'widgetHover', 'select'],
+  emits: ['placed', 'contextmenu', 'widgetHover'],
   props: {
     toolId: {
       type: String as unknown as PropType<ToolID>,
@@ -132,12 +131,6 @@ export default defineComponent({
 
     useHoverEvent(emit, widget);
 
-    // --- selection handling --- //
-
-    onVTKEvent(widget, 'onSelectEvent', (event: ToolSelectEvent) => {
-      emit('select', event);
-    });
-
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);
diff --git a/src/components/tools/ruler/RulerTool.vue b/src/components/tools/ruler/RulerTool.vue
index 4c855296f..063d59171 100644
--- a/src/components/tools/ruler/RulerTool.vue
+++ b/src/components/tools/ruler/RulerTool.vue
@@ -13,7 +13,6 @@
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(ruler.id, $event)"
         @placed="onRulerPlaced"
-        @select="onSelect(ruler.id, $event)"
         @widgetHover="onHover(ruler.id, $event)"
       />
     </svg>
@@ -33,11 +32,7 @@ import {
 } from 'vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
-import {
-  Tools,
-  AnnotationToolType,
-  ToolSelectEvent,
-} from '@/src/store/tools/types';
+import { Tools } from '@/src/store/tools/types';
 import { useRulerStore } from '@/src/store/tools/rulers';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import RulerWidget2D from '@/src/components/tools/ruler/RulerWidget2D.vue';
@@ -54,11 +49,7 @@ import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
 import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
-import {
-  useToolSelectionStore,
-  updateToolSelectionFromEvent,
-} from '@/src/store/tools/toolSelection';
-import { ToolID } from '@/src/types/annotation-tool';
+import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 
 export default defineComponent({
   name: 'RulerTool',
@@ -140,14 +131,6 @@ export default defineComponent({
       }
     };
 
-    // --- selection handling --- //
-
-    const selectionStore = useToolSelectionStore();
-
-    const onSelect = (id: ToolID, event: ToolSelectEvent) => {
-      updateToolSelectionFromEvent(id, event, AnnotationToolType.Ruler);
-    };
-
     // --- //
 
     const { contextMenu, openContextMenu } = useContextMenu();
@@ -166,6 +149,7 @@ export default defineComponent({
 
     const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
 
+    const selectionStore = useToolSelectionStore();
     const visiblePoints = computed(() => {
       return currentTools.value
         .filter((tool) => tool.slice === currentSlice.value)
@@ -181,7 +165,6 @@ export default defineComponent({
       openContextMenu,
       rulerStore,
       onHover,
-      onSelect,
       overlayInfo,
       visiblePoints,
     };
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index 319777e94..c6456f57e 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -33,11 +33,10 @@ import {
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
-import { ToolSelectEvent } from '@/src/store/tools/types';
 
 export default defineComponent({
   name: 'RulerWidget2D',
-  emits: ['placed', 'contextmenu', 'widgetHover', 'select'],
+  emits: ['placed', 'contextmenu', 'widgetHover'],
   props: {
     toolId: {
       type: String as unknown as PropType<ToolID>,
@@ -131,12 +130,6 @@ export default defineComponent({
 
     useHoverEvent(emit, widget);
 
-    // --- selection handling --- //
-
-    onVTKEvent(widget, 'onSelectEvent', (event: ToolSelectEvent) => {
-      emit('select', event);
-    });
-
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);
diff --git a/src/shims-vtk.d.ts b/src/shims-vtk.d.ts
index ce2ecbbf7..01d9fb028 100644
--- a/src/shims-vtk.d.ts
+++ b/src/shims-vtk.d.ts
@@ -290,3 +290,7 @@ declare module '@kitware/vtk.js/Widgets/Widgets3D/ImageCroppingWidget' {
   };
   export default vtkImageCroppingWidget;
 }
+
+declare module '@kitware/vtk.js/Widgets/Core/AbstractWidget/Constants' {
+  export declare const WIDGET_PRIORITY: number;
+}
diff --git a/src/store/tools/toolSelection.ts b/src/store/tools/toolSelection.ts
index dc900e26b..9dd66c9f1 100644
--- a/src/store/tools/toolSelection.ts
+++ b/src/store/tools/toolSelection.ts
@@ -1,4 +1,4 @@
-import { AnnotationToolType, ToolSelectEvent } from '@/src/store/tools/types';
+import { AnnotationToolType } from '@/src/store/tools/types';
 import { ToolID } from '@/src/types/annotation-tool';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
@@ -53,23 +53,3 @@ export const useToolSelectionStore = defineStore('tool-selection', () => {
     selection,
   };
 });
-
-export const updateToolSelectionFromEvent = (
-  toolID: ToolID,
-  event: ToolSelectEvent,
-  type: AnnotationToolType
-) => {
-  const store = useToolSelectionStore();
-  if (event.updateBehavior === 'deselectOthers') {
-    store.clearSelection();
-  }
-  if (event.selected) {
-    if (event.updateBehavior === 'preserve') {
-      store.toggleSelection(toolID, type);
-    } else {
-      store.addSelection(toolID, type);
-    }
-  } else if (event.updateBehavior === 'single') {
-    store.removeSelection(toolID);
-  }
-};
diff --git a/src/store/tools/types.ts b/src/store/tools/types.ts
index 153f35c5e..77153faa2 100644
--- a/src/store/tools/types.ts
+++ b/src/store/tools/types.ts
@@ -34,13 +34,3 @@ export interface IToolStore
   extends Partial<IActivatableTool>,
     Partial<ISerializableTool>,
     Store {}
-
-export type ToolSelectEvent = {
-  // should the emitting tool be selected
-  selected: boolean;
-  // update behavior
-  // deselect: clear current selection
-  // preserve: preserve current selection
-  // single: set current selection to be just this tool
-  updateBehavior: 'deselectOthers' | 'preserve' | 'single';
-};
diff --git a/src/vtk/PolygonWidget/behavior.ts b/src/vtk/PolygonWidget/behavior.ts
index 4647a9e87..4432b979b 100644
--- a/src/vtk/PolygonWidget/behavior.ts
+++ b/src/vtk/PolygonWidget/behavior.ts
@@ -3,8 +3,6 @@ import macro from '@kitware/vtk.js/macros';
 import { Vector3 } from '@kitware/vtk.js/types';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 
-import { applySelectionAPIMixin } from '@/src/vtk/ToolWidgetUtils/annotationToolMixins';
-import { SelectableRepresentationLabel } from '@/src/vtk/PolygonWidget/state';
 import { WidgetAction } from '@/src/vtk/ToolWidgetUtils/types';
 
 type Position3d = { x: number; y: number; z: number };
@@ -435,6 +433,4 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   publicAPI.delete = macro.chain(() => {
     publicAPI.resetInteractions();
   }, publicAPI.delete);
-
-  applySelectionAPIMixin(publicAPI, model, [SelectableRepresentationLabel]);
 }
diff --git a/src/vtk/PolygonWidget/index.js b/src/vtk/PolygonWidget/index.js
index b08b41cd6..e6eb9ab51 100644
--- a/src/vtk/PolygonWidget/index.js
+++ b/src/vtk/PolygonWidget/index.js
@@ -6,11 +6,7 @@ import { Behavior } from '@kitware/vtk.js/Widgets/Representations/WidgetRepresen
 import vtkLineGlyphRepresentation from '@/src/vtk/LineGlyphRepresentation';
 
 import widgetBehavior from './behavior';
-import stateGenerator, {
-  HandlesLabel,
-  MoveHandleLabel,
-  SelectableRepresentationLabel,
-} from './state';
+import stateGenerator, { HandlesLabel, MoveHandleLabel } from './state';
 
 // ----------------------------------------------------------------------------
 // Factory
@@ -31,7 +27,7 @@ function vtkPolygonWidget(publicAPI, model) {
     },
     {
       builder: vtkLineGlyphRepresentation,
-      labels: [HandlesLabel, SelectableRepresentationLabel],
+      labels: [HandlesLabel],
       initialValues: {
         scaleInPixels: true,
         lineThickness: 0.25, // smaller than .5 default to prioritize picking handles
diff --git a/src/vtk/PolygonWidget/state.ts b/src/vtk/PolygonWidget/state.ts
index d1773ae38..57aa9a3f2 100644
--- a/src/vtk/PolygonWidget/state.ts
+++ b/src/vtk/PolygonWidget/state.ts
@@ -12,7 +12,6 @@ import { watchState } from '../ToolWidgetUtils/utils';
 
 export const MoveHandleLabel = 'moveHandle';
 export const HandlesLabel = 'handles';
-export const SelectableRepresentationLabel = 'selectable';
 
 const PIXEL_SIZE = 20;
 
diff --git a/src/vtk/RulerWidget/behavior.ts b/src/vtk/RulerWidget/behavior.ts
index efa5d8c5f..d9404728d 100644
--- a/src/vtk/RulerWidget/behavior.ts
+++ b/src/vtk/RulerWidget/behavior.ts
@@ -1,5 +1,3 @@
-import { SelectableRepresentationLabel } from '@/src/vtk/RulerWidget/state';
-import { applySelectionAPIMixin } from '@/src/vtk/ToolWidgetUtils/annotationToolMixins';
 import macro from '@kitware/vtk.js/macro';
 import type { Vector3 } from '@kitware/vtk.js/types';
 
@@ -224,6 +222,4 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   publicAPI.delete = macro.chain(() => {
     publicAPI.resetInteractions();
   }, publicAPI.delete);
-
-  applySelectionAPIMixin(publicAPI, model, [SelectableRepresentationLabel]);
 }
diff --git a/src/vtk/RulerWidget/index.js b/src/vtk/RulerWidget/index.js
index b2ef6c3d9..2da4766da 100644
--- a/src/vtk/RulerWidget/index.js
+++ b/src/vtk/RulerWidget/index.js
@@ -7,10 +7,7 @@ import { Behavior } from '@kitware/vtk.js/Widgets/Representations/WidgetRepresen
 import vtkLineGlyphRepresentation from '@/src/vtk/LineGlyphRepresentation';
 
 import widgetBehavior from './behavior';
-import stateGenerator, {
-  PointsLabel,
-  SelectableRepresentationLabel,
-} from './state';
+import stateGenerator, { PointsLabel } from './state';
 
 export { InteractionState } from './behavior';
 
@@ -33,7 +30,7 @@ function vtkRulerWidget(publicAPI, model) {
     },
     {
       builder: vtkLineGlyphRepresentation,
-      labels: [PointsLabel, SelectableRepresentationLabel],
+      labels: [PointsLabel],
       initialValues: {
         scaleInPixels: true,
         lineThickness: 0.25, // smaller than .5 default to prioritize picking handles
diff --git a/src/vtk/RulerWidget/state.ts b/src/vtk/RulerWidget/state.ts
index dbd68c1f5..421d1c590 100644
--- a/src/vtk/RulerWidget/state.ts
+++ b/src/vtk/RulerWidget/state.ts
@@ -7,7 +7,6 @@ import createPointState from '../ToolWidgetUtils/pointState';
 import { watchState } from '../ToolWidgetUtils/utils';
 
 export const PointsLabel = 'points';
-export const SelectableRepresentationLabel = 'selectable';
 
 function vtkRulerWidgetState(publicAPI: any, model: any) {
   const firstPoint = createPointState({
diff --git a/src/vtk/ToolWidgetUtils/annotationToolMixins.ts b/src/vtk/ToolWidgetUtils/annotationToolMixins.ts
deleted file mode 100644
index a0f8737ac..000000000
--- a/src/vtk/ToolWidgetUtils/annotationToolMixins.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { ToolSelectEvent } from '@/src/store/tools/types';
-import {
-  event as registerEvent,
-  VOID,
-  EVENT_ABORT,
-} from '@kitware/vtk.js/macros';
-import vtkProp from '@kitware/vtk.js/Rendering/Core/Prop';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
-import vtkWidgetRepresentation from '@kitware/vtk.js/Widgets/Representations/WidgetRepresentation';
-
-interface Model {
-  representations: vtkWidgetRepresentation[];
-  _widgetManager: vtkWidgetManager;
-}
-
-interface PublicAPI {
-  getSelectableRepresentations(): vtkWidgetRepresentation[];
-  getSelectableProps(): vtkProp[];
-  detectSelection(ev: any): void;
-  // toolID is filled in by event consumer
-  invokeSelectEvent(ev: ToolSelectEvent): void;
-  [other: string]: any;
-}
-
-export function applySelectionAPIMixin(
-  publicAPI: PublicAPI,
-  model: Model,
-  selectableRepresentationLabels: string[]
-) {
-  const originalAPI = { ...publicAPI };
-  const selectableRepresentationLabelsSet = new Set(
-    selectableRepresentationLabels
-  );
-
-  registerEvent(publicAPI, model, 'SelectEvent');
-
-  publicAPI.getSelectableRepresentations = () => {
-    return model.representations.filter((rep) =>
-      rep
-        .getLabels()
-        .some((label) => selectableRepresentationLabelsSet.has(label))
-    );
-  };
-
-  publicAPI.getSelectableProps = () => {
-    return publicAPI
-      .getSelectableRepresentations()
-      .flatMap((rep: vtkWidgetRepresentation) => rep.getActors());
-  };
-
-  publicAPI.detectSelection = (ev: any) => {
-    const props = new Set(publicAPI.getSelectableProps());
-    const selected = model._widgetManager
-      .getSelections()
-      .map((sel) => sel.getProperties().prop)
-      .filter((prop): prop is vtkProp => !!prop)
-      .some((prop) => props.has(prop));
-
-    publicAPI.invokeSelectEvent({
-      selected,
-      updateBehavior: ev.shiftKey ? 'preserve' : 'single',
-    });
-  };
-
-  publicAPI.handleLeftButtonPress = (ev: any) => {
-    if (originalAPI.handleLeftButtonPress(ev) === EVENT_ABORT) {
-      publicAPI.invokeSelectEvent({
-        selected: false,
-        updateBehavior: 'deselectOthers',
-      });
-      return EVENT_ABORT;
-    }
-    publicAPI.detectSelection(ev);
-    return VOID;
-  };
-
-  publicAPI.handleRightButtonPress = (ev: any) => {
-    if (originalAPI.handleRightButtonPress(ev) === EVENT_ABORT) {
-      publicAPI.invokeSelectEvent({
-        selected: true,
-        updateBehavior: 'deselectOthers',
-      });
-      return EVENT_ABORT;
-    }
-    publicAPI.detectSelection(ev);
-    return VOID;
-  };
-}

From 9d12b479840bcd71d418deea5805ab213cd69328 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 28 Sep 2023 19:53:14 -0400
Subject: [PATCH 11/18] feat(AnnotationTool): de-select when hiding

---
 src/store/tools/useAnnotationTool.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/store/tools/useAnnotationTool.ts b/src/store/tools/useAnnotationTool.ts
index fa5c6b0d9..b5b36b686 100644
--- a/src/store/tools/useAnnotationTool.ts
+++ b/src/store/tools/useAnnotationTool.ts
@@ -118,6 +118,12 @@ export const useAnnotationTool = <
     if (!(id in toolByID.value)) return;
 
     toolByID.value[id] = { ...toolByID.value[id], ...patch, id };
+
+    // de-select whenever hiding a tool
+    if (patch.hidden) {
+      const selectionStore = useToolSelectionStore();
+      selectionStore.removeSelection(id);
+    }
   }
 
   // updates props controlled by labels

From b131ee9fac2523811f10fbb2155cf51c8ef8d464 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 28 Sep 2023 19:54:59 -0400
Subject: [PATCH 12/18] fix(rectangle,ruler): guard against empty tool

---
 src/components/tools/rectangle/RectangleWidget2D.vue | 4 ++--
 src/components/tools/ruler/RulerWidget2D.vue         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index 741a7be77..bae22c549 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -181,10 +181,10 @@ export default defineComponent({
     return {
       tool,
       firstPoint: computed(() => {
-        return visibleStates.firstPoint ? tool.value.firstPoint : undefined;
+        return visibleStates.firstPoint ? tool.value?.firstPoint : undefined;
       }),
       secondPoint: computed(() => {
-        return visibleStates.secondPoint ? tool.value.secondPoint : undefined;
+        return visibleStates.secondPoint ? tool.value?.secondPoint : undefined;
       }),
     };
   },
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index c6456f57e..58b7bbba1 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -180,10 +180,10 @@ export default defineComponent({
     return {
       ruler,
       firstPoint: computed(() => {
-        return visibleStates.firstPoint ? ruler.value.firstPoint : undefined;
+        return visibleStates.firstPoint ? ruler.value?.firstPoint : undefined;
       }),
       secondPoint: computed(() => {
-        return visibleStates.secondPoint ? ruler.value.secondPoint : undefined;
+        return visibleStates.secondPoint ? ruler.value?.secondPoint : undefined;
       }),
       length: computed(() => rulerStore.lengthByID[ruler.value.id]),
     };

From 2e61b00c33a29b8ee7f22b533b83f3d373236d58 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Fri, 6 Oct 2023 12:15:43 -0400
Subject: [PATCH 13/18] refactor(tools): enforce annotation tool typing

Add a helper function, defineAnnotationToolStore, to typecheck
annotation store APIs.

Rename serialize/deserialize to serializeTools/deserializeTools in
useAnnotationTool to avoid type conflicts with ISerializableTool.
---
 src/store/tools/index.ts               |  2 +-
 src/store/tools/polygons.ts            | 25 ++++---------
 src/store/tools/rectangles.ts          | 24 ++++---------
 src/store/tools/rulers.ts              | 20 ++++-------
 src/store/tools/types.ts               |  4 +--
 src/store/tools/useAnnotationTool.ts   | 50 ++++++++++++--------------
 src/utils/defineAnnotationToolStore.ts | 18 ++++++++++
 7 files changed, 64 insertions(+), 79 deletions(-)
 create mode 100644 src/utils/defineAnnotationToolStore.ts

diff --git a/src/store/tools/index.ts b/src/store/tools/index.ts
index 0caa9cd7a..1ee395be9 100644
--- a/src/store/tools/index.ts
+++ b/src/store/tools/index.ts
@@ -50,7 +50,7 @@ export function useAnnotationToolStore(
 function setupTool(tool: Tools) {
   const useStore = ToolStoreMap[tool];
   const store = useStore?.();
-  if (store) {
+  if (store?.activateTool) {
     return store.activateTool?.();
   }
   return true;
diff --git a/src/store/tools/polygons.ts b/src/store/tools/polygons.ts
index 320618baa..45fdb61ed 100644
--- a/src/store/tools/polygons.ts
+++ b/src/store/tools/polygons.ts
@@ -1,9 +1,8 @@
-import { defineStore } from 'pinia';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import { POLYGON_LABEL_DEFAULTS } from '@/src/config';
 import { Manifest, StateFile } from '@/src/io/state-file/schema';
 import { ToolID } from '@/src/types/annotation-tool';
-
+import { defineAnnotationToolStore } from '@/src/utils/defineAnnotationToolStore';
 import { useAnnotationTool } from './useAnnotationTool';
 
 const toolDefaults = () => ({
@@ -12,14 +11,8 @@ const toolDefaults = () => ({
   name: 'Polygon',
 });
 
-export const usePolygonStore = defineStore('polygon', () => {
-  type _This = ReturnType<typeof usePolygonStore>;
-
-  const {
-    serialize: serializeTool,
-    deserialize: deserializeTool,
-    ...toolStoreProps
-  } = useAnnotationTool({
+export const usePolygonStore = defineAnnotationToolStore('polygon', () => {
+  const toolAPI = useAnnotationTool({
     toolDefaults,
     initialLabels: POLYGON_LABEL_DEFAULTS,
   });
@@ -27,19 +20,15 @@ export const usePolygonStore = defineStore('polygon', () => {
   // --- serialization --- //
 
   function serialize(state: StateFile) {
-    state.manifest.tools.polygons = serializeTool();
+    state.manifest.tools.polygons = toolAPI.serializeTools();
   }
 
-  function deserialize(
-    this: _This,
-    manifest: Manifest,
-    dataIDMap: Record<string, string>
-  ) {
-    deserializeTool.call(this, manifest.tools.polygons, dataIDMap);
+  function deserialize(manifest: Manifest, dataIDMap: Record<string, string>) {
+    toolAPI.deserializeTools(manifest.tools.polygons, dataIDMap);
   }
 
   return {
-    ...toolStoreProps,
+    ...toolAPI,
     serialize,
     deserialize,
   };
diff --git a/src/store/tools/rectangles.ts b/src/store/tools/rectangles.ts
index f043dbf8a..353e40e50 100644
--- a/src/store/tools/rectangles.ts
+++ b/src/store/tools/rectangles.ts
@@ -1,4 +1,4 @@
-import { defineStore } from 'pinia';
+import { defineAnnotationToolStore } from '@/src/utils/defineAnnotationToolStore';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import { Manifest, StateFile } from '@/src/io/state-file/schema';
 import { RECTANGLE_LABEL_DEFAULTS } from '@/src/config';
@@ -18,14 +18,8 @@ const newLabelDefault = {
   fillColor: 'transparent',
 };
 
-export const useRectangleStore = defineStore('rectangles', () => {
-  type _This = ReturnType<typeof useRectangleStore>;
-
-  const {
-    serialize: serializeTool,
-    deserialize: deserializeTool,
-    ...toolStoreProps
-  } = useAnnotationTool({
+export const useRectangleStore = defineAnnotationToolStore('rectangles', () => {
+  const toolAPI = useAnnotationTool({
     toolDefaults: rectangleDefaults,
     initialLabels: RECTANGLE_LABEL_DEFAULTS,
     newLabelDefault,
@@ -34,19 +28,15 @@ export const useRectangleStore = defineStore('rectangles', () => {
   // --- serialization --- //
 
   function serialize(state: StateFile) {
-    state.manifest.tools.rectangles = serializeTool();
+    state.manifest.tools.rectangles = toolAPI.serializeTools();
   }
 
-  function deserialize(
-    this: _This,
-    manifest: Manifest,
-    dataIDMap: Record<string, string>
-  ) {
-    deserializeTool.call(this, manifest.tools.rectangles, dataIDMap);
+  function deserialize(manifest: Manifest, dataIDMap: Record<string, string>) {
+    toolAPI.deserializeTools(manifest.tools.rectangles, dataIDMap);
   }
 
   return {
-    ...toolStoreProps,
+    ...toolAPI,
     serialize,
     deserialize,
   };
diff --git a/src/store/tools/rulers.ts b/src/store/tools/rulers.ts
index 7da2b78cd..20b44e777 100644
--- a/src/store/tools/rulers.ts
+++ b/src/store/tools/rulers.ts
@@ -1,5 +1,5 @@
 import { computed } from 'vue';
-import { defineStore } from 'pinia';
+import { defineAnnotationToolStore } from '@/src/utils/defineAnnotationToolStore';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import { distance2BetweenPoints } from '@kitware/vtk.js/Common/Core/Math';
 
@@ -15,9 +15,7 @@ const rulerDefaults = () => ({
   name: 'Ruler',
 });
 
-export const useRulerStore = defineStore('ruler', () => {
-  type _This = ReturnType<typeof useRulerStore>;
-
+export const useRulerStore = defineAnnotationToolStore('ruler', () => {
   const annotationTool = useAnnotationTool({
     toolDefaults: rulerDefaults,
     initialLabels: RULER_LABEL_DEFAULTS,
@@ -32,8 +30,8 @@ export const useRulerStore = defineStore('ruler', () => {
     updateTool: updateRuler,
     removeTool: removeRuler,
     jumpToTool: jumpToRuler,
-    serialize: serializeTool,
-    deserialize: deserializeTool,
+    serializeTools,
+    deserializeTools,
   } = annotationTool;
 
   const lengthByID = computed<Record<string, number>>(() => {
@@ -49,15 +47,11 @@ export const useRulerStore = defineStore('ruler', () => {
   // --- serialization --- //
 
   function serialize(state: StateFile) {
-    state.manifest.tools.rulers = serializeTool();
+    state.manifest.tools.rulers = serializeTools();
   }
 
-  function deserialize(
-    this: _This,
-    manifest: Manifest,
-    dataIDMap: Record<string, string>
-  ) {
-    deserializeTool.call(this, manifest.tools.rulers, dataIDMap);
+  function deserialize(manifest: Manifest, dataIDMap: Record<string, string>) {
+    deserializeTools(manifest.tools.rulers, dataIDMap);
   }
 
   return {
diff --git a/src/store/tools/types.ts b/src/store/tools/types.ts
index 77153faa2..b2db6a05d 100644
--- a/src/store/tools/types.ts
+++ b/src/store/tools/types.ts
@@ -20,12 +20,12 @@ export enum Tools {
   Polygon = 'Polygon',
 }
 
-interface IActivatableTool {
+export interface IActivatableTool {
   activateTool: () => boolean;
   deactivateTool: () => void;
 }
 
-interface ISerializableTool {
+export interface ISerializableTool {
   serialize: (state: StateFile) => void;
   deserialize: (manifest: Manifest, dataIDMap: Record<string, string>) => void;
 }
diff --git a/src/store/tools/useAnnotationTool.ts b/src/store/tools/useAnnotationTool.ts
index b5b36b686..cccdef734 100644
--- a/src/store/tools/useAnnotationTool.ts
+++ b/src/store/tools/useAnnotationTool.ts
@@ -1,7 +1,6 @@
 import { Ref, UnwrapNestedRefs, computed, ref, watch } from 'vue';
-import { Store, StoreActions, StoreGetters, StoreState } from 'pinia';
+import { StoreActions, StoreGetters, StoreState } from 'pinia';
 
-import type { IToolStore } from '@/src/store/tools/types';
 import { Maybe, PartialWithRequired } from '@/src/types';
 import {
   STROKE_WIDTH_ANNOTATION_TOOL_DEFAULT,
@@ -17,6 +16,7 @@ import { AnnotationTool, ToolID } from '@/src/types/annotation-tool';
 import { findImageID, getDataID } from '@/src/store/datasets';
 import { useIdStore } from '@/src/store/id';
 import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
+import type { IToolStore } from '@/src/store/tools/types';
 import useViewSliceStore from '../view-configs/slicing';
 import { useLabels, Labels } from './useLabels';
 
@@ -64,8 +64,9 @@ export const useAnnotationTool = <
     return toolIDs.value.map((id) => byID[id]);
   });
 
+  type FinishedTool = Tool & { placing: true };
   const finishedTools = computed(() =>
-    tools.value.filter((tool) => !tool.placing)
+    tools.value.filter((tool): tool is FinishedTool => !tool.placing)
   );
 
   const labels = useLabels({
@@ -84,7 +85,7 @@ export const useAnnotationTool = <
     return { labelName: '' };
   }
 
-  function addTool(this: Store, tool: ToolPatch): ToolID {
+  function addTool(tool: ToolPatch): ToolID {
     const id = useIdStore().nextId() as ToolID;
     if (id in toolByID.value) {
       throw new Error('Cannot add tool with conflicting ID');
@@ -164,10 +165,7 @@ export const useAnnotationTool = <
     });
   }
 
-  const activateTool = () => true;
-  const deactivateTool = () => {};
-
-  const serialize = () => {
+  const serializeTools = () => {
     const toolsSerialized = toolIDs.value
       .map((toolID) => toolByID.value[toolID])
       .filter((tool) => !tool.placing)
@@ -187,8 +185,7 @@ export const useAnnotationTool = <
     tools: PartialWithRequired<Tool, 'imageID'>[];
     labels: Labels<Tool>;
   };
-  function deserialize(
-    this: Store,
+  function deserializeTools(
     serialized: Maybe<Serialized>,
     dataIDMap: Record<string, string>
   ) {
@@ -213,7 +210,7 @@ export const useAnnotationTool = <
             label: (label && labelIDMap[label]) || '',
           } as ToolPatch)
       )
-      .forEach((tool) => addTool.call(this, tool));
+      .forEach((tool) => addTool(tool));
   }
 
   return {
@@ -226,26 +223,23 @@ export const useAnnotationTool = <
     removeTool,
     updateTool,
     jumpToTool,
-    activateTool,
-    deactivateTool,
-    serialize,
-    deserialize,
+    serializeTools,
+    deserializeTools,
   };
 };
 
-type ToolFactory = (...args: any) => AnnotationTool;
-type UseAnnotationTool = ReturnType<
-  typeof useAnnotationTool<ToolFactory, unknown>
->;
+type ToolFactory<T extends AnnotationTool> = (...args: any[]) => T;
 
-type UseAnnotationToolNoSerialize = Omit<
-  UseAnnotationTool,
-  'serialize' | 'deserialize'
+export type AnnotationToolAPI<T extends AnnotationTool> = ReturnType<
+  typeof useAnnotationTool<ToolFactory<T>, any>
 >;
 
-export type AnnotationToolStore<
-  UseAnnotationToolWithID = UseAnnotationToolNoSerialize
-> = StoreState<UseAnnotationToolWithID> &
-  StoreActions<UseAnnotationToolWithID> &
-  UnwrapNestedRefs<StoreGetters<UseAnnotationToolWithID>> & // adds computed props like tools
-  IToolStore; // adds Pinia plugins;
+type UseAnnotationToolBasedStore<T extends AnnotationTool> = StoreState<
+  AnnotationToolAPI<T>
+> &
+  StoreActions<AnnotationToolAPI<T>> &
+  UnwrapNestedRefs<StoreGetters<AnnotationToolAPI<T>>>;
+
+export interface AnnotationToolStore<T extends AnnotationTool = AnnotationTool>
+  extends UseAnnotationToolBasedStore<T>,
+    IToolStore {}
diff --git a/src/utils/defineAnnotationToolStore.ts b/src/utils/defineAnnotationToolStore.ts
new file mode 100644
index 000000000..9eb45c8dc
--- /dev/null
+++ b/src/utils/defineAnnotationToolStore.ts
@@ -0,0 +1,18 @@
+import { AnnotationToolAPI } from '@/src/store/tools/useAnnotationTool';
+import { AnnotationTool } from '@/src/types/annotation-tool';
+import { defineStore } from 'pinia';
+
+/**
+ * Type helper for enforcing the typing for annotation tool stores.
+ *
+ * Requires setup store usage rather than template usage.
+ * @param name
+ * @param setup
+ * @returns
+ */
+export function defineAnnotationToolStore<
+  T extends AnnotationTool,
+  S extends AnnotationToolAPI<T>
+>(name: string, setup: () => S) {
+  return defineStore(name, setup);
+}

From a3fb5d1f81d898380565eec35deffbadb333e2be Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Fri, 6 Oct 2023 16:11:26 -0400
Subject: [PATCH 14/18] feat: getPoints API and draw selection rectangle

Annotation tools must implement a getPoints() method in order to draw a
selection box for them.
---
 src/components/VtkTwoView.vue                 | 28 +++++++++++++++++++
 src/components/tools/BoundingRectangle.vue    |  8 ++++--
 src/components/tools/polygon/PolygonTool.vue  | 13 ---------
 .../tools/rectangle/RectangleTool.vue         | 13 ---------
 src/components/tools/ruler/RulerTool.vue      | 13 ---------
 src/composables/annotationTool.ts             |  2 +-
 src/store/tools/polygons.ts                   |  6 ++++
 src/store/tools/rectangles.ts                 |  6 ++++
 src/store/tools/rulers.ts                     |  7 +++++
 src/store/tools/useAnnotationTool.ts          |  8 ++++--
 10 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 8582039ee..97e9ce0ce 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -37,6 +37,9 @@
         />
       </div>
       <div class="overlay-no-events tool-layer" ref="toolContainer">
+        <svg class="overlay-no-events">
+          <bounding-rectangle :points="selectionPoints" :view-id="viewID" />
+        </svg>
         <pan-tool :view-id="viewID" />
         <zoom-tool :view-id="viewID" />
         <slice-scroll-tool :view-id="viewID" />
@@ -196,6 +199,10 @@ import { manageVTKSubscription } from '@/src/composables/manageVTKSubscription';
 import SliceSlider from '@/src/components/SliceSlider.vue';
 import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
 import SelectTool from '@/src/components/tools/SelectTool.vue';
+import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
+import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
+import { useAnnotationToolStore } from '@/src/store/tools';
+import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useOrientationLabels } from '../composables/useOrientationLabels';
 import { getLPSAxisFromDir } from '../utils/lps';
@@ -258,6 +265,7 @@ export default defineComponent({
   components: {
     SliceSlider,
     ViewOverlayGrid,
+    BoundingRectangle,
     WindowLevelTool,
     SliceScrollTool,
     PanTool,
@@ -743,6 +751,25 @@ export default defineComponent({
       { immediate: true, deep: true }
     );
 
+    // --- selection points --- //
+
+    const selectionStore = useToolSelectionStore();
+    const selectionPoints = computed(() => {
+      return selectionStore.selection
+        .map((sel) => {
+          const store = useAnnotationToolStore(sel.type);
+          return { store, tool: store.toolByID[sel.id] };
+        })
+        .filter(
+          ({ tool }) =>
+            tool.slice === currentSlice.value &&
+            doesToolFrameMatchViewAxis(viewAxis, tool)
+        )
+        .flatMap(({ store, tool }) => store.getPoints(tool.id));
+    });
+
+    // --- //
+
     return {
       vtkContainerRef,
       toolContainer,
@@ -765,6 +792,7 @@ export default defineComponent({
         resizeToFit.value = true;
       },
       hover,
+      selectionPoints,
     };
   },
 });
diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
index f27d16b34..7ffe0781f 100644
--- a/src/components/tools/BoundingRectangle.vue
+++ b/src/components/tools/BoundingRectangle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch, toRefs } from 'vue';
+import { computed, ref, watch, toRefs, toRaw } from 'vue';
 import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
@@ -42,7 +42,7 @@ const updateRectangle = () => {
   const viewRenderer = viewProxy.value.getRenderer();
 
   const screenBounds = [...vtkBoundingBox.INIT_BOUNDS] as Bounds;
-  props.points
+  toRaw(props.points)
     .map((point) => {
       const point2D = worldToSVG(point, viewRenderer);
       return point2D;
@@ -69,7 +69,9 @@ const updateRectangle = () => {
 const { points } = toRefs(props);
 watch(points, updateRectangle, { immediate: true, deep: true });
 
-onVTKEvent(viewProxy, 'onModified', updateRectangle);
+const camera = computed(() => viewProxy.value.getCamera());
+
+onVTKEvent(camera, 'onModified', updateRectangle);
 </script>
 
 <template>
diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index c4e39737a..117247609 100644
--- a/src/components/tools/polygon/PolygonTool.vue
+++ b/src/components/tools/polygon/PolygonTool.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="overlay-no-events">
     <svg class="overlay-no-events">
-      <bounding-rectangle :points="visiblePoints" :view-id="viewId" />
       <polygon-widget-2D
         v-for="tool in tools"
         :key="tool.id"
@@ -46,9 +45,7 @@ import {
 } from '@/src/composables/annotationTool';
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
-import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
-import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import PolygonWidget2D from './PolygonWidget2D.vue';
 
 const useActiveToolStore = usePolygonStore;
@@ -78,7 +75,6 @@ export default defineComponent({
     PolygonWidget2D,
     AnnotationContextMenu,
     AnnotationInfo,
-    BoundingRectangle,
   },
   setup(props) {
     const { viewDirection, currentSlice } = toRefs(props);
@@ -142,14 +138,6 @@ export default defineComponent({
 
     const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
 
-    const selectionStore = useToolSelectionStore();
-    const visiblePoints = computed(() => {
-      return currentTools.value
-        .filter((tool) => tool.slice === currentSlice.value)
-        .filter((tool) => selectionStore.isSelected(tool.id))
-        .flatMap((tool) => tool.points);
-    });
-
     return {
       tools: currentTools,
       placingToolID: placingTool.id,
@@ -159,7 +147,6 @@ export default defineComponent({
       activeToolStore,
       onHover,
       overlayInfo,
-      visiblePoints,
     };
   },
 });
diff --git a/src/components/tools/rectangle/RectangleTool.vue b/src/components/tools/rectangle/RectangleTool.vue
index 15fac2a1b..ca624fe13 100644
--- a/src/components/tools/rectangle/RectangleTool.vue
+++ b/src/components/tools/rectangle/RectangleTool.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="overlay-no-events">
     <svg class="overlay-no-events">
-      <bounding-rectangle :points="visiblePoints" :view-id="viewId" />
       <rectangle-widget-2D
         v-for="tool in tools"
         :key="tool.id"
@@ -46,9 +45,7 @@ import {
 } from '@/src/composables/annotationTool';
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
-import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
-import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import RectangleWidget2D from './RectangleWidget2D.vue';
 
 const useActiveToolStore = useRectangleStore;
@@ -78,7 +75,6 @@ export default defineComponent({
     RectangleWidget2D,
     AnnotationContextMenu,
     AnnotationInfo,
-    BoundingRectangle,
   },
   setup(props) {
     const { viewDirection, currentSlice } = toRefs(props);
@@ -142,14 +138,6 @@ export default defineComponent({
 
     const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
 
-    const selectionStore = useToolSelectionStore();
-    const visiblePoints = computed(() => {
-      return currentTools.value
-        .filter((tool) => tool.slice === currentSlice.value)
-        .filter((tool) => selectionStore.isSelected(tool.id))
-        .flatMap((tool) => [tool.firstPoint, tool.secondPoint]);
-    });
-
     return {
       tools: currentTools,
       placingToolID: placingTool.id,
@@ -159,7 +147,6 @@ export default defineComponent({
       activeToolStore,
       onHover,
       overlayInfo,
-      visiblePoints,
     };
   },
 });
diff --git a/src/components/tools/ruler/RulerTool.vue b/src/components/tools/ruler/RulerTool.vue
index 063d59171..b25e0f494 100644
--- a/src/components/tools/ruler/RulerTool.vue
+++ b/src/components/tools/ruler/RulerTool.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="overlay-no-events">
     <svg class="overlay-no-events">
-      <bounding-rectangle :points="visiblePoints" :view-id="viewId" />
       <ruler-widget-2D
         v-for="ruler in rulers"
         :key="ruler.id"
@@ -47,9 +46,7 @@ import {
 } from '@/src/composables/annotationTool';
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
-import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
-import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 
 export default defineComponent({
   name: 'RulerTool',
@@ -75,7 +72,6 @@ export default defineComponent({
     RulerWidget2D,
     AnnotationContextMenu,
     AnnotationInfo,
-    BoundingRectangle,
   },
   setup(props) {
     const { viewDirection, currentSlice } = toRefs(props);
@@ -149,14 +145,6 @@ export default defineComponent({
 
     const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
 
-    const selectionStore = useToolSelectionStore();
-    const visiblePoints = computed(() => {
-      return currentTools.value
-        .filter((tool) => tool.slice === currentSlice.value)
-        .filter((tool) => selectionStore.isSelected(tool.id))
-        .flatMap((tool) => [tool.firstPoint, tool.secondPoint]);
-    });
-
     return {
       rulers: currentRulers,
       placingRulerID: placingTool.id,
@@ -166,7 +154,6 @@ export default defineComponent({
       rulerStore,
       onHover,
       overlayInfo,
-      visiblePoints,
     };
   },
 });
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 72f2c7cd6..6afa9487a 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -24,7 +24,7 @@ const SHOW_OVERLAY_DELAY = 250; // milliseconds
 
 // does the tools's frame of reference match
 // the view's axis
-const doesToolFrameMatchViewAxis = <Tool extends AnnotationTool>(
+export const doesToolFrameMatchViewAxis = <Tool extends AnnotationTool>(
   viewAxis: Ref<LPSAxis>,
   tool: Partial<Tool>
 ) => {
diff --git a/src/store/tools/polygons.ts b/src/store/tools/polygons.ts
index 45fdb61ed..57bab556c 100644
--- a/src/store/tools/polygons.ts
+++ b/src/store/tools/polygons.ts
@@ -17,6 +17,11 @@ export const usePolygonStore = defineAnnotationToolStore('polygon', () => {
     initialLabels: POLYGON_LABEL_DEFAULTS,
   });
 
+  function getPoints(id: ToolID) {
+    const tool = toolAPI.toolByID.value[id];
+    return tool.points;
+  }
+
   // --- serialization --- //
 
   function serialize(state: StateFile) {
@@ -29,6 +34,7 @@ export const usePolygonStore = defineAnnotationToolStore('polygon', () => {
 
   return {
     ...toolAPI,
+    getPoints,
     serialize,
     deserialize,
   };
diff --git a/src/store/tools/rectangles.ts b/src/store/tools/rectangles.ts
index 353e40e50..adbb98a9d 100644
--- a/src/store/tools/rectangles.ts
+++ b/src/store/tools/rectangles.ts
@@ -25,6 +25,11 @@ export const useRectangleStore = defineAnnotationToolStore('rectangles', () => {
     newLabelDefault,
   });
 
+  function getPoints(id: ToolID) {
+    const tool = toolAPI.toolByID.value[id];
+    return [tool.firstPoint, tool.secondPoint];
+  }
+
   // --- serialization --- //
 
   function serialize(state: StateFile) {
@@ -37,6 +42,7 @@ export const useRectangleStore = defineAnnotationToolStore('rectangles', () => {
 
   return {
     ...toolAPI,
+    getPoints,
     serialize,
     deserialize,
   };
diff --git a/src/store/tools/rulers.ts b/src/store/tools/rulers.ts
index 20b44e777..f12a82cc4 100644
--- a/src/store/tools/rulers.ts
+++ b/src/store/tools/rulers.ts
@@ -2,6 +2,7 @@ import { computed } from 'vue';
 import { defineAnnotationToolStore } from '@/src/utils/defineAnnotationToolStore';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import { distance2BetweenPoints } from '@kitware/vtk.js/Common/Core/Math';
+import { ToolID } from '@/src/types/annotation-tool';
 
 import { RULER_LABEL_DEFAULTS } from '@/src/config';
 import { Manifest, StateFile } from '@/src/io/state-file/schema';
@@ -44,6 +45,11 @@ export const useRulerStore = defineAnnotationToolStore('ruler', () => {
     }, {});
   });
 
+  function getPoints(id: ToolID) {
+    const tool = annotationTool.toolByID.value[id];
+    return [tool.firstPoint, tool.secondPoint];
+  }
+
   // --- serialization --- //
 
   function serialize(state: StateFile) {
@@ -64,6 +70,7 @@ export const useRulerStore = defineAnnotationToolStore('ruler', () => {
     updateRuler,
     removeRuler,
     jumpToRuler,
+    getPoints,
     serialize,
     deserialize,
   };
diff --git a/src/store/tools/useAnnotationTool.ts b/src/store/tools/useAnnotationTool.ts
index cccdef734..56f858f57 100644
--- a/src/store/tools/useAnnotationTool.ts
+++ b/src/store/tools/useAnnotationTool.ts
@@ -1,7 +1,7 @@
 import { Ref, UnwrapNestedRefs, computed, ref, watch } from 'vue';
 import { StoreActions, StoreGetters, StoreState } from 'pinia';
-
-import { Maybe, PartialWithRequired } from '@/src/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
+import type { Maybe, PartialWithRequired } from '@/src/types';
 import {
   STROKE_WIDTH_ANNOTATION_TOOL_DEFAULT,
   TOOL_COLORS,
@@ -232,7 +232,9 @@ type ToolFactory<T extends AnnotationTool> = (...args: any[]) => T;
 
 export type AnnotationToolAPI<T extends AnnotationTool> = ReturnType<
   typeof useAnnotationTool<ToolFactory<T>, any>
->;
+> & {
+  getPoints(id: ToolID): Vector3[];
+};
 
 type UseAnnotationToolBasedStore<T extends AnnotationTool> = StoreState<
   AnnotationToolAPI<T>

From 5f9efdb52c1cfdc40ea6a376d12fc58bd8ddb0aa Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Fri, 6 Oct 2023 16:51:35 -0400
Subject: [PATCH 15/18] feat(polygon): add point menu option

---
 src/vtk/PolygonWidget/behavior.ts | 45 ++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/vtk/PolygonWidget/behavior.ts b/src/vtk/PolygonWidget/behavior.ts
index 4432b979b..3591a2130 100644
--- a/src/vtk/PolygonWidget/behavior.ts
+++ b/src/vtk/PolygonWidget/behavior.ts
@@ -167,6 +167,10 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       return macro.VOID;
     }
 
+    if (checkOverSegment()) {
+      return macro.VOID;
+    }
+
     const manipulator =
       model.activeState?.getManipulator?.() ?? model.manipulator;
     if (model.widgetState.getPlacing() && manipulator) {
@@ -193,21 +197,6 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       return macro.EVENT_ABORT;
     }
 
-    if (checkOverSegment()) {
-      // insert point
-      const insertIndex = model.activeState.getIndex() + 1;
-      const newHandle = model.widgetState.addHandle({ insertIndex });
-      const coords = getWorldCoords(event);
-      if (!coords) throw new Error('No world coords');
-      newHandle.setOrigin(coords);
-      // enable dragging immediately
-      publicAPI.activateHandle({
-        selectedState: newHandle,
-        representation: model.representations[0].getActors()[0], // first actor is GlyphMapper for handles
-      });
-      overUnselectedHandle = true;
-    }
-
     if (model.activeState?.getActive() && model.pickable && model.dragable) {
       model._isDragging = true;
       model._apiSpecificRenderWindow.setCursor('grabbing');
@@ -361,14 +350,32 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   // Right press: Remove last handle / Pop context menu
   // --------------------------------------------------------------------------
 
-  const makeWidgetActions = () => {
+  const makeWidgetActions = (eventData: any) => {
     const widgetActions: Array<WidgetAction> = [];
 
     const { activeState } = model;
 
     const overSegment = checkOverSegment();
-    // if hovering on handle and we will still have at least 2 points after removing handle
-    if (!overSegment && model.widgetState.getHandles().length > 2) {
+
+    if (overSegment) {
+      // Allow inserting ponts when over a segment
+      widgetActions.push({
+        name: 'Add Point',
+        func: () => {
+          const insertIndex = activeState.getIndex() + 1;
+          const newHandle = model.widgetState.addHandle({ insertIndex });
+          const coords = getWorldCoords(eventData);
+          if (!coords) throw new Error('No world coords');
+          newHandle.setOrigin(coords);
+          // enable dragging immediately
+          publicAPI.activateHandle({
+            selectedState: newHandle,
+            representation: model.representations[0].getActors()[0], // first actor is GlyphMapper for handles
+          });
+        },
+      });
+    } else if (!overSegment && model.widgetState.getHandles().length > 2) {
+      // if hovering on handle and we will still have at least 2 points after removing handle
       widgetActions.push({
         name: 'Delete Point',
         func: () => {
@@ -392,7 +399,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
 
     const eventWithWidgetAction = {
       ...eventData,
-      widgetActions: makeWidgetActions(),
+      widgetActions: makeWidgetActions(eventData),
     };
 
     publicAPI.invokeRightClickEvent(eventWithWidgetAction);

From 079db73d832d3b0221fc1545c7e9f3977ae9a3d5 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 9 Oct 2023 13:29:05 -0400
Subject: [PATCH 16/18] fix(BoundingRectangle): update on resize

---
 src/components/tools/BoundingRectangle.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
index 7ffe0781f..ccdae15f5 100644
--- a/src/components/tools/BoundingRectangle.vue
+++ b/src/components/tools/BoundingRectangle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref, watch, toRefs, toRaw } from 'vue';
-import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
+import { computed, ref, watch, toRefs, toRaw, inject } from 'vue';
+import { ANNOTATION_TOOL_HANDLE_RADIUS, ToolContainer } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import { nonNullable } from '@/src/utils/index';
@@ -8,6 +8,7 @@ import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import type { Bounds, Vector3 } from '@kitware/vtk.js/types';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { useResizeObserver } from '@/src/composables/useResizeObserver';
 
 const DEFAULT_PADDING = 2;
 
@@ -70,8 +71,12 @@ const { points } = toRefs(props);
 watch(points, updateRectangle, { immediate: true, deep: true });
 
 const camera = computed(() => viewProxy.value.getCamera());
-
 onVTKEvent(camera, 'onModified', updateRectangle);
+
+const containerEl = inject(ToolContainer)!;
+useResizeObserver(containerEl, () => {
+  updateRectangle();
+});
 </script>
 
 <template>

From afb12896e866b6c16e99e79b10f4697910864716 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 9 Oct 2023 13:31:57 -0400
Subject: [PATCH 17/18] feat(selection): clear when switching datasets

---
 src/components/MeasurementsToolList.vue | 53 +------------------------
 src/store/tools/toolSelection.ts        | 11 ++++-
 2 files changed, 11 insertions(+), 53 deletions(-)

diff --git a/src/components/MeasurementsToolList.vue b/src/components/MeasurementsToolList.vue
index 555995482..17986e8a1 100644
--- a/src/components/MeasurementsToolList.vue
+++ b/src/components/MeasurementsToolList.vue
@@ -77,12 +77,8 @@ const tools = computed(() => {
 
 const selectionStore = useToolSelectionStore();
 
-const {
-  selectAll,
-  deselectAll,
-  selected,
-  selectionState: visibleSelectionState,
-} = useMultipleToolSelection(tools);
+const { selectAll, deselectAll, selected, selectionState } =
+  useMultipleToolSelection(tools);
 
 const toggleSelectAll = (shouldSelectAll: boolean) => {
   if (shouldSelectAll) {
@@ -121,30 +117,6 @@ function toggleGlobalHidden() {
     tool.updateTool({ hidden });
   });
 }
-
-// info about selection that spans multiple images
-const selectedIDsFromOtherImages = computed(() => {
-  const visibleSelection = new Set(tools.value.map((tool) => tool.id));
-  return selectionStore.selection
-    .filter((sel) => !visibleSelection.has(sel.id))
-    .map((sel) => sel.id);
-});
-
-function deselectAllFromOtherImages() {
-  selectedIDsFromOtherImages.value.forEach((id) => {
-    selectionStore.removeSelection(id);
-  });
-}
-
-// augments the visible selection with the selection from other images
-const selectionState = computed(() => {
-  const sizeOfOtherSelection = selectedIDsFromOtherImages.value.length;
-  if (visibleSelectionState.value !== MultipleSelectionState.None)
-    return visibleSelectionState.value;
-  return sizeOfOtherSelection
-    ? MultipleSelectionState.Some
-    : MultipleSelectionState.None;
-});
 </script>
 
 <template>
@@ -197,27 +169,6 @@ const selectionState = computed(() => {
     </v-col>
   </v-row>
 
-  <v-list-item v-if="selectedIDsFromOtherImages.length">
-    <v-container>
-      <v-row class="d-flex align-center main-row">
-        <v-checkbox
-          class="no-grow mr-4"
-          density="compact"
-          hide-details
-          :model-value="true"
-          @click.stop="deselectAllFromOtherImages"
-        />
-        <v-list-item-title class="d-flex align-center">
-          <v-icon size="small" color="warning" class="mr-2">
-            mdi-alert-circle-outline
-          </v-icon>
-          {{ selectedIDsFromOtherImages.length }}
-          selected annotation(s) on other images
-        </v-list-item-title>
-      </v-row></v-container
-    >
-  </v-list-item>
-
   <v-list-item v-for="tool in tools" :key="tool.id">
     <v-container>
       <v-row class="d-flex align-center main-row">
diff --git a/src/store/tools/toolSelection.ts b/src/store/tools/toolSelection.ts
index 9dd66c9f1..761957f2c 100644
--- a/src/store/tools/toolSelection.ts
+++ b/src/store/tools/toolSelection.ts
@@ -1,7 +1,8 @@
 import { AnnotationToolType } from '@/src/store/tools/types';
 import { ToolID } from '@/src/types/annotation-tool';
-import { defineStore } from 'pinia';
-import { computed, ref } from 'vue';
+import { defineStore, storeToRefs } from 'pinia';
+import { computed, ref, watch } from 'vue';
+import { useDatasetStore } from '@/src/store/datasets';
 
 export interface ToolSelection {
   id: ToolID;
@@ -44,6 +45,12 @@ export const useToolSelectionStore = defineStore('tool-selection', () => {
     }));
   });
 
+  const { primarySelection } = storeToRefs(useDatasetStore());
+
+  watch(primarySelection, () => {
+    clearSelection();
+  });
+
   return {
     addSelection,
     clearSelection,

From a50892dcceeb890f8ad7f4a529d72ff34c28ba24 Mon Sep 17 00:00:00 2001
From: Forrest Li <floryst@users.noreply.github.com>
Date: Mon, 9 Oct 2023 13:34:24 -0400
Subject: [PATCH 18/18] doc(SelectTool): explain WIDGET_PRIORITY usage

Co-authored-by: Paul Elliott <paul.elliott@kitware.com>
---
 src/components/tools/SelectTool.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/tools/SelectTool.vue b/src/components/tools/SelectTool.vue
index 4b12cc0cd..22b55c18b 100644
--- a/src/components/tools/SelectTool.vue
+++ b/src/components/tools/SelectTool.vue
@@ -43,6 +43,7 @@ onVTKEvent(
     }
   },
   {
+    // capture all events by calling handler before widgets
     priority: WIDGET_PRIORITY + 1,
   }
 );