From 617e53cd1c528841504fd20ebce69aaef16e2367 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 4 Sep 2023 18:36:43 -0400
Subject: [PATCH 01/15] feat(annotationTool): add label info popover on polygon
 hover

---
 src/components/tools/AnnotationInfo.vue       | 46 +++++++++++
 src/components/tools/polygon/PolygonTool.vue  | 16 ++++
 .../tools/polygon/PolygonWidget2D.vue         | 17 ++--
 src/composables/annotationTool.ts             | 80 ++++++++++++++++++-
 src/vtk/PolygonWidget/behavior.ts             | 15 +++-
 src/vtk/ToolWidgetUtils/utils.ts              |  1 +
 6 files changed, 162 insertions(+), 13 deletions(-)
 create mode 100644 src/components/tools/AnnotationInfo.vue

diff --git a/src/components/tools/AnnotationInfo.vue b/src/components/tools/AnnotationInfo.vue
new file mode 100644
index 000000000..b7e2685dc
--- /dev/null
+++ b/src/components/tools/AnnotationInfo.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts" generic="ToolID extends string">
+/* global ToolID:readonly */
+import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
+import { OverlayInfo } from '@/src/composables/annotationTool';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  info: OverlayInfo<ToolID>;
+  toolStore: AnnotationToolStore<ToolID>;
+}>();
+
+const menu = computed(() => {
+  return props.info.visible;
+});
+
+const label = computed(() => {
+  if (!props.info.visible) return '';
+  return props.toolStore.toolByID[props.info.toolID].labelName;
+});
+</script>
+
+<template>
+  <v-menu
+    v-model="menu"
+    v-if="info.visible"
+    class="popover-no-events"
+    :style="{
+      left: `${info.displayXY[0]}px`,
+      top: `${info.displayXY[1]}px`,
+      pointerEvents: 'none',
+    }"
+  >
+    <v-list density="compact">
+      <v-list-item>
+        <v-list-item-title>{{ label }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<style>
+.popover-no-events > * {
+  pointer-events: none !important;
+  touch-action: none;
+}
+</style>
diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index 7284e495e..628cb53b4 100644
--- a/src/components/tools/polygon/PolygonTool.vue
+++ b/src/components/tools/polygon/PolygonTool.vue
@@ -12,9 +12,15 @@
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(tool.id, $event)"
         @placed="onToolPlaced"
+        @widgetHover="onHover(tool.id, $event)"
       />
     </svg>
     <annotation-context-menu ref="contextMenu" :tool-store="activeToolStore" />
+    <annotation-info
+      class="overlay-no-events"
+      :info="overlayInfo"
+      :tool-store="activeToolStore"
+    />
   </div>
 </template>
 
@@ -43,8 +49,10 @@ import { PolygonID } from '@/src/types/polygon';
 import {
   useContextMenu,
   useCurrentTools,
+  useHover,
 } from '@/src/composables/annotationTool';
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
+import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
 import PolygonWidget2D from './PolygonWidget2D.vue';
 
 type ToolID = PolygonID;
@@ -74,6 +82,7 @@ export default defineComponent({
   components: {
     PolygonWidget2D,
     AnnotationContextMenu,
+    AnnotationInfo,
   },
   setup(props) {
     const { viewDirection, currentSlice } = toRefs(props);
@@ -181,6 +190,11 @@ export default defineComponent({
 
     const currentTools = useCurrentTools(activeToolStore, viewAxis);
 
+    const { onHover, overlayInfo } = useHover<ToolID>(
+      currentTools,
+      currentSlice
+    );
+
     return {
       tools: currentTools,
       placingToolID,
@@ -188,6 +202,8 @@ export default defineComponent({
       contextMenu,
       openContextMenu,
       activeToolStore,
+      onHover,
+      overlayInfo,
     };
   },
 });
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index 9ebf50a68..debe669fd 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -17,7 +17,7 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { LPSAxisDir } from '@/src/types/lps';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { useRightClickContextMenu } from '@/src/composables/annotationTool';
+import { useHoverEvent, useRightClickContextMenu, } from '@/src/composables/annotationTool';
 import { usePolygonStore as useStore } from '@/src/store/tools/polygons';
 import { PolygonID as ToolID } from '@/src/types/polygon';
 import vtkWidgetFactory, {
@@ -27,7 +27,7 @@ import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
   name: 'PolygonWidget2D',
-  emits: ['placed', 'contextmenu'],
+  emits: ['placed', 'contextmenu', 'widgetHover'],
   props: {
     toolId: {
       type: String,
@@ -103,6 +103,8 @@ export default defineComponent({
       emit('placed');
     });
 
+    useHoverEvent(emit, widget);
+
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);
@@ -165,13 +167,6 @@ export default defineComponent({
 </script>
 
 <template>
-  <SVG2DComponent
-    v-show="currentSlice === tool.slice"
-    :view-id="viewId"
-    :points="tool.points"
-    :color="tool.color"
-    :move-point="tool.movePoint"
-    :placing="tool.placing"
-    :finishable="finishable"
-  />
+  <SVG2DComponent v-show="currentSlice === tool.slice" :view-id="viewId" :points="tool.points" :color="tool.color"
+    :move-point="tool.movePoint" :placing="tool.placing" :finishable="finishable" />
 </template>
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 4eb3011e6..465f9d629 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -1,4 +1,5 @@
-import { Ref, computed, ref } from 'vue';
+import { Ref, computed, 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';
@@ -78,3 +79,80 @@ export const useRightClickContextMenu = (
     }
   });
 };
+
+// --- Hover --- //
+
+export const useHoverEvent = (
+  emit: (event: 'widgetHover', ...args: any[]) => void,
+  widget: Ref<vtkAnnotationToolWidget | null>
+) => {
+  onVTKEvent(widget, 'onHoverEvent', (eventData: any) => {
+    const displayXY = getCSSCoordinatesFromEvent(eventData);
+    if (displayXY) {
+      emit('widgetHover', {
+        displayXY,
+        hovering: eventData.hovering,
+      });
+    }
+  });
+};
+
+export type OverlayInfo<ToolID> =
+  | {
+      visible: false;
+    }
+  | {
+      visible: true;
+      toolID: ToolID;
+      displayXY: Vector2;
+    };
+
+export const useHover = <ToolID extends string>(
+  tools: Ref<Array<AnnotationTool<ToolID>>>,
+  currentSlice: Ref<number>
+) => {
+  type Info = OverlayInfo<ToolID>;
+  const toolHoverState = ref({}) as Ref<Record<ToolID, Info>>;
+
+  const overlayInfo = computed(() => {
+    const visibleToolID = Object.keys(toolHoverState.value).find(
+      (toolID) => toolHoverState.value[toolID as ToolID].visible
+    ) as ToolID | undefined;
+
+    return visibleToolID
+      ? toolHoverState.value[visibleToolID]
+      : ({ visible: false } as Info);
+  });
+
+  const toolsOnCurrentSlice = computed(() =>
+    tools.value.filter((tool) => tool.slice === currentSlice.value)
+  );
+
+  watch(toolsOnCurrentSlice, () => {
+    // keep old hover states, default to false for new tools
+    toolHoverState.value = toolsOnCurrentSlice.value.reduce(
+      (toolsHovers, { id }) => {
+        const state = toolHoverState.value[id] ?? {
+          visible: false,
+        };
+        return Object.assign(toolsHovers, {
+          [id]: state,
+        });
+      },
+      {} as Record<ToolID, Info>
+    );
+  });
+
+  const onHover = (id: ToolID, event: any) => {
+    toolHoverState.value[id] = event.hovering
+      ? {
+          visible: true,
+          toolID: id,
+          displayXY: event.displayXY,
+        }
+      : {
+          visible: false,
+        };
+  };
+  return { overlayInfo, onHover };
+};
diff --git a/src/vtk/PolygonWidget/behavior.ts b/src/vtk/PolygonWidget/behavior.ts
index b82d31e9d..0fb385f5f 100644
--- a/src/vtk/PolygonWidget/behavior.ts
+++ b/src/vtk/PolygonWidget/behavior.ts
@@ -42,9 +42,11 @@ export default function widgetBehavior(publicAPI: any, model: any) {
 
   // support setting per-view widget manipulators
   macro.setGet(publicAPI, model, ['manipulator']);
-  // support forwarding events
+
+  // events to emit
   macro.event(publicAPI, model, 'RightClickEvent');
   macro.event(publicAPI, model, 'PlacedEvent');
+  macro.event(publicAPI, model, 'HoverEvent');
 
   publicAPI.resetInteractions = () => {
     model._interactor.cancelAnimation(publicAPI, true);
@@ -147,6 +149,12 @@ export default function widgetBehavior(publicAPI: any, model: any) {
 
   publicAPI.handleLeftButtonPress = (e: any) => {
     const activeWidget = model._widgetManager.getActiveWidget();
+
+    publicAPI.invokeHoverEvent({
+      ...e,
+      hovering: false,
+    });
+
     if (
       !model.manipulator ||
       ignoreKey(e) ||
@@ -234,6 +242,11 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       model._widgetManager.disablePicking();
     }
 
+    publicAPI.invokeHoverEvent({
+      ...callData,
+      hovering: !!model.activeState,
+    });
+
     return macro.VOID;
   };
 
diff --git a/src/vtk/ToolWidgetUtils/utils.ts b/src/vtk/ToolWidgetUtils/utils.ts
index 2ec57fe44..ebdd7b7d8 100644
--- a/src/vtk/ToolWidgetUtils/utils.ts
+++ b/src/vtk/ToolWidgetUtils/utils.ts
@@ -26,5 +26,6 @@ export interface vtkAnnotationToolWidget extends vtkAbstractWidget {
   getManipulator(): vtkPlaneManipulator;
   onRightClickEvent(cb: (eventData: any) => void): vtkSubscription;
   onPlacedEvent(cb: (eventData: any) => void): vtkSubscription;
+  onHoverEvent(cb: (eventData: any) => void): vtkSubscription;
   resetInteractions(): void;
 }

From 812eb828183836ab454df2a091135278c40fae83 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Tue, 5 Sep 2023 14:38:29 -0400
Subject: [PATCH 02/15] feat(PolygonWidget): check for hover from handles
 bounds

---
 src/vtk/PolygonWidget/behavior.ts | 62 ++++++++++++++++++++++++-------
 src/vtk/PolygonWidget/state.ts    | 31 ++++++++++++++--
 2 files changed, 75 insertions(+), 18 deletions(-)

diff --git a/src/vtk/PolygonWidget/behavior.ts b/src/vtk/PolygonWidget/behavior.ts
index 0fb385f5f..841ce8778 100644
--- a/src/vtk/PolygonWidget/behavior.ts
+++ b/src/vtk/PolygonWidget/behavior.ts
@@ -1,12 +1,15 @@
 import { distance2BetweenPoints } from '@kitware/vtk.js/Common/Core/Math';
+import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import macro from '@kitware/vtk.js/macros';
-import { Vector3 } from '@kitware/vtk.js/types';
+import { Bounds, Vector3 } from '@kitware/vtk.js/types';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 
 import { WidgetAction } from '../ToolWidgetUtils/utils';
 
 type Position3d = { x: number; y: number; z: number };
-type MouseEvent = {
+type vtkMouseEvent = {
   position: Position3d;
+  pokedRenderer: vtkRenderer;
 };
 
 const FINISHABLE_DISTANCE = 10;
@@ -18,7 +21,7 @@ const DOUBLE_CLICK_SLIP_DISTANCE_MAX_SQUARED =
   DOUBLE_CLICK_SLIP_DISTANCE_MAX ** 2;
 
 export default function widgetBehavior(publicAPI: any, model: any) {
-  model.classHierarchy.push('vtkPolygonWidgetProp');
+  model.classHierarchy.push('vtkPolygonWidgetBehavior');
   model._isDragging = false;
 
   // overUnselectedHandle is true if mouse is over handle that was created before a mouse move event.
@@ -147,17 +150,17 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   // Left press: Select handle to drag / Add new handle
   // --------------------------------------------------------------------------
 
-  publicAPI.handleLeftButtonPress = (e: any) => {
+  publicAPI.handleLeftButtonPress = (event: vtkMouseEvent) => {
     const activeWidget = model._widgetManager.getActiveWidget();
 
     publicAPI.invokeHoverEvent({
-      ...e,
+      ...event,
       hovering: false,
     });
 
     if (
       !model.manipulator ||
-      ignoreKey(e) ||
+      ignoreKey(event) ||
       // If hovering over another widget, don't consume event.
       (activeWidget && activeWidget !== publicAPI)
     ) {
@@ -173,7 +176,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
         model.activeState = model.widgetState.getMoveHandle();
         model._widgetManager.grabFocus(publicAPI);
       }
-      updateActiveStateHandle(e);
+      updateActiveStateHandle(event);
 
       if (model.widgetState.getFinishable()) {
         finishPlacing();
@@ -194,7 +197,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       // insert point
       const insertIndex = model.activeState.getIndex() + 1;
       const newHandle = model.widgetState.addHandle({ insertIndex });
-      const coords = getWorldCoords(e);
+      const coords = getWorldCoords(event);
       if (!coords) throw new Error('No world coords');
       newHandle.setOrigin(coords);
       // enable dragging immediately
@@ -221,14 +224,45 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   // Mouse move: Drag selected handle / Handle follow the mouse
   // --------------------------------------------------------------------------
 
-  publicAPI.handleMouseMove = (callData: any) => {
+  const checkInScreenBounds = (event: vtkMouseEvent) => {
+    const b = publicAPI.getBounds();
+    if (!vtkBoundingBox.isValid(b)) return false;
+
+    const corners = [] as Array<Vector3>;
+    vtkBoundingBox.getCorners(b, corners);
+
+    const screenBounds = [...vtkBoundingBox.INIT_BOUNDS] as Bounds;
+    corners.forEach((corner) => {
+      const pos = model._apiSpecificRenderWindow.worldToDisplay(
+        ...corner,
+        event.pokedRenderer
+      ) as Vector3;
+      vtkBoundingBox.addPoint(screenBounds, ...pos);
+    });
+
+    const pointerScreenPos = [
+      event.position.x,
+      event.position.y,
+      event.position.z,
+    ] as Vector3;
+
+    screenBounds[4] = -1;
+    screenBounds[5] = 1;
+    const isInside = vtkBoundingBox.containsPoint(
+      screenBounds,
+      ...pointerScreenPos
+    );
+    return isInside;
+  };
+
+  publicAPI.handleMouseMove = (event: vtkMouseEvent) => {
     if (
       model.pickable &&
       model.dragable &&
       model.activeState &&
-      !ignoreKey(callData)
+      !ignoreKey(event)
     ) {
-      if (updateActiveStateHandle(callData) === macro.EVENT_ABORT) {
+      if (updateActiveStateHandle(event) === macro.EVENT_ABORT) {
         return macro.EVENT_ABORT;
       }
     }
@@ -243,8 +277,8 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     }
 
     publicAPI.invokeHoverEvent({
-      ...callData,
-      hovering: !!model.activeState,
+      ...event,
+      hovering: checkInScreenBounds(event),
     });
 
     return macro.VOID;
@@ -258,7 +292,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   let lastReleaseTime = 0;
   let lastReleasePosition: Vector3 | undefined;
 
-  publicAPI.handleLeftButtonRelease = (event: MouseEvent) => {
+  publicAPI.handleLeftButtonRelease = (event: vtkMouseEvent) => {
     if (
       !model.activeState ||
       !model.activeState.getActive() ||
diff --git a/src/vtk/PolygonWidget/state.ts b/src/vtk/PolygonWidget/state.ts
index 7f91aba8a..27bae711b 100644
--- a/src/vtk/PolygonWidget/state.ts
+++ b/src/vtk/PolygonWidget/state.ts
@@ -1,9 +1,10 @@
 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 boundsMixin 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 { Bounds, Vector3 } from '@kitware/vtk.js/types';
+import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 
 import createPointState from '../ToolWidgetUtils/pointState';
 import { watchState } from '../ToolWidgetUtils/utils';
@@ -82,7 +83,6 @@ function vtkPolygonWidgetState(publicAPI: any, model: any) {
     model.labels[HandlesLabel] = [...model.handles];
 
     publicAPI.modified();
-
     return handlePublicAPI;
   };
 
@@ -109,6 +109,29 @@ function vtkPolygonWidgetState(publicAPI: any, model: any) {
     }
   };
 
+  const computeBounds = () => {
+    if (model.handles.length === 0) return undefined;
+
+    const bounds = vtkBoundingBox.reset([] as unknown as Bounds);
+    model.handles
+      .map((handle: any) => handle.getOrigin())
+      .forEach((point: Vector3) => {
+        vtkBoundingBox.addPoint(bounds, ...point);
+      });
+    return bounds;
+  };
+
+  let savedBounds: Bounds | undefined;
+  publicAPI.onModified(() => {
+    savedBounds = undefined;
+  });
+
+  publicAPI.getBounds = () => {
+    if (savedBounds) return savedBounds;
+    savedBounds = computeBounds();
+    return savedBounds;
+  };
+
   publicAPI.getPlacing = () => getTool().placing;
   publicAPI.setPlacing = (placing: boolean) => {
     getTool().placing = placing;
@@ -132,7 +155,7 @@ function _createPolygonWidgetState(
 ) {
   Object.assign(model, defaultValues(initialValues));
   vtkWidgetState.extend(publicAPI, model, initialValues);
-  bounds.extend(publicAPI, model);
+  boundsMixin.extend(publicAPI, model);
 
   macro.get(publicAPI, model, ['id', 'handles', 'moveHandle', 'finishable']);
   macro.setGet(publicAPI, model, ['finishable']);

From d15b65aa4bbf9219554cbadd74fe24504a2f8488 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Tue, 5 Sep 2023 15:57:45 -0400
Subject: [PATCH 03/15] feat(PolygonWidget): show bounding box upon hover

---
 src/components/tools/BoundingRectangle.vue   | 64 ++++++++++++++++++++
 src/components/tools/polygon/PolygonTool.vue | 16 +++--
 2 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 src/components/tools/BoundingRectangle.vue

diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
new file mode 100644
index 000000000..67248fa80
--- /dev/null
+++ b/src/components/tools/BoundingRectangle.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useViewStore } from '@/src/store/views';
+import { worldToSVG } from '@/src/utils/vtk-helpers';
+import { nonNullable } from '@/src/utils/index';
+import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
+import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+import { Bounds, Vector3 } from '@kitware/vtk.js/types';
+import { computed, ref, watch, toRefs } from 'vue';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+
+const props = defineProps<{
+  points: Array<Vector3>;
+  viewId: string;
+}>();
+
+const viewStore = useViewStore();
+const viewProxy = computed(
+  () => viewStore.getViewProxy<vtkLPSView2DProxy>(props.viewId)!
+);
+
+const visible = computed(() => {
+  return props.points.length > 0;
+});
+
+const rectangle = ref({
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+});
+
+const updateRectangle = () => {
+  const viewRenderer = viewProxy.value.getRenderer();
+
+  const screenBounds = [...vtkBoundingBox.INIT_BOUNDS] as Bounds;
+  props.points
+    .map((point) => {
+      const point2D = worldToSVG(point, viewRenderer);
+      return point2D;
+    })
+    .filter(nonNullable)
+    .forEach(([x, y]) => {
+      vtkBoundingBox.addPoint(screenBounds, x, y, 0);
+    });
+  const [x, y] = vtkBoundingBox.getMinPoint(screenBounds);
+  const [maxX, maxY] = vtkBoundingBox.getMaxPoint(screenBounds);
+  rectangle.value = {
+    x,
+    y,
+    width: maxX - x,
+    height: maxY - y,
+  };
+};
+
+const { points } = toRefs(props);
+watch([points], updateRectangle, { immediate: true, deep: true });
+
+onVTKEvent(viewProxy, 'onModified', updateRectangle)
+</script>
+
+<template>
+  <rect v-if="visible" :x="rectangle.x" :y="rectangle.y" :width="rectangle.width" :height="rectangle.height"
+    stroke-width="2" fill="transparent" stroke="lightgray" />
+</template>
diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index 628cb53b4..80b787cd3 100644
--- a/src/components/tools/polygon/PolygonTool.vue
+++ b/src/components/tools/polygon/PolygonTool.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="overlay-no-events">
     <svg class="overlay-no-events">
+      <bounding-rectangle :points="pointsToBound" :view-id="viewId" />
       <polygon-widget-2D
         v-for="tool in tools"
         :key="tool.id"
@@ -16,11 +17,7 @@
       />
     </svg>
     <annotation-context-menu ref="contextMenu" :tool-store="activeToolStore" />
-    <annotation-info
-      class="overlay-no-events"
-      :info="overlayInfo"
-      :tool-store="activeToolStore"
-    />
+    <annotation-info :info="overlayInfo" :tool-store="activeToolStore" />
   </div>
 </template>
 
@@ -53,6 +50,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 PolygonWidget2D from './PolygonWidget2D.vue';
 
 type ToolID = PolygonID;
@@ -83,6 +81,7 @@ export default defineComponent({
     PolygonWidget2D,
     AnnotationContextMenu,
     AnnotationInfo,
+    BoundingRectangle,
   },
   setup(props) {
     const { viewDirection, currentSlice } = toRefs(props);
@@ -195,6 +194,12 @@ export default defineComponent({
       currentSlice
     );
 
+    const pointsToBound = computed(() => {
+      if (!overlayInfo.value.visible) return [];
+      const tool = activeToolStore.toolByID[overlayInfo.value.toolID];
+      return tool.points;
+    });
+
     return {
       tools: currentTools,
       placingToolID,
@@ -204,6 +209,7 @@ export default defineComponent({
       activeToolStore,
       onHover,
       overlayInfo,
+      pointsToBound,
     };
   },
 });

From eb2ddbc4a656339159876276c821b08e83e837e1 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 14 Sep 2023 16:44:36 -0400
Subject: [PATCH 04/15] feat(polygon): hover on when cursor over line or handle

---
 src/vtk/PolygonWidget/behavior.ts | 36 ++-----------------------------
 1 file changed, 2 insertions(+), 34 deletions(-)

diff --git a/src/vtk/PolygonWidget/behavior.ts b/src/vtk/PolygonWidget/behavior.ts
index 841ce8778..467d3a5b4 100644
--- a/src/vtk/PolygonWidget/behavior.ts
+++ b/src/vtk/PolygonWidget/behavior.ts
@@ -1,7 +1,6 @@
 import { distance2BetweenPoints } from '@kitware/vtk.js/Common/Core/Math';
-import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import macro from '@kitware/vtk.js/macros';
-import { Bounds, Vector3 } from '@kitware/vtk.js/types';
+import { Vector3 } from '@kitware/vtk.js/types';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 
 import { WidgetAction } from '../ToolWidgetUtils/utils';
@@ -224,37 +223,6 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   // Mouse move: Drag selected handle / Handle follow the mouse
   // --------------------------------------------------------------------------
 
-  const checkInScreenBounds = (event: vtkMouseEvent) => {
-    const b = publicAPI.getBounds();
-    if (!vtkBoundingBox.isValid(b)) return false;
-
-    const corners = [] as Array<Vector3>;
-    vtkBoundingBox.getCorners(b, corners);
-
-    const screenBounds = [...vtkBoundingBox.INIT_BOUNDS] as Bounds;
-    corners.forEach((corner) => {
-      const pos = model._apiSpecificRenderWindow.worldToDisplay(
-        ...corner,
-        event.pokedRenderer
-      ) as Vector3;
-      vtkBoundingBox.addPoint(screenBounds, ...pos);
-    });
-
-    const pointerScreenPos = [
-      event.position.x,
-      event.position.y,
-      event.position.z,
-    ] as Vector3;
-
-    screenBounds[4] = -1;
-    screenBounds[5] = 1;
-    const isInside = vtkBoundingBox.containsPoint(
-      screenBounds,
-      ...pointerScreenPos
-    );
-    return isInside;
-  };
-
   publicAPI.handleMouseMove = (event: vtkMouseEvent) => {
     if (
       model.pickable &&
@@ -278,7 +246,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
 
     publicAPI.invokeHoverEvent({
       ...event,
-      hovering: checkInScreenBounds(event),
+      hovering: !!model.activeState,
     });
 
     return macro.VOID;

From 0f8e55f686f92b369b5583a0e85830385350ed38 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 14 Sep 2023 18:04:17 -0400
Subject: [PATCH 05/15] feat(annotationTool): debouce showing overlay in
 useHover

---
 src/components/tools/BoundingRectangle.vue    | 14 ++++--
 .../tools/polygon/PolygonWidget2D.vue         | 16 +++++--
 src/composables/annotationTool.ts             | 47 +++++++++++++++----
 3 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
index 67248fa80..ff809da18 100644
--- a/src/components/tools/BoundingRectangle.vue
+++ b/src/components/tools/BoundingRectangle.vue
@@ -55,10 +55,18 @@ const updateRectangle = () => {
 const { points } = toRefs(props);
 watch([points], updateRectangle, { immediate: true, deep: true });
 
-onVTKEvent(viewProxy, 'onModified', updateRectangle)
+onVTKEvent(viewProxy, 'onModified', updateRectangle);
 </script>
 
 <template>
-  <rect v-if="visible" :x="rectangle.x" :y="rectangle.y" :width="rectangle.width" :height="rectangle.height"
-    stroke-width="2" fill="transparent" stroke="lightgray" />
+  <rect
+    v-if="visible"
+    :x="rectangle.x"
+    :y="rectangle.y"
+    :width="rectangle.width"
+    :height="rectangle.height"
+    stroke-width="2"
+    fill="transparent"
+    stroke="lightgray"
+  />
 </template>
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index debe669fd..2c25670a2 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -17,7 +17,10 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { LPSAxisDir } from '@/src/types/lps';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { useHoverEvent, useRightClickContextMenu, } from '@/src/composables/annotationTool';
+import {
+  useHoverEvent,
+  useRightClickContextMenu,
+} from '@/src/composables/annotationTool';
 import { usePolygonStore as useStore } from '@/src/store/tools/polygons';
 import { PolygonID as ToolID } from '@/src/types/polygon';
 import vtkWidgetFactory, {
@@ -167,6 +170,13 @@ export default defineComponent({
 </script>
 
 <template>
-  <SVG2DComponent v-show="currentSlice === tool.slice" :view-id="viewId" :points="tool.points" :color="tool.color"
-    :move-point="tool.movePoint" :placing="tool.placing" :finishable="finishable" />
+  <SVG2DComponent
+    v-show="currentSlice === tool.slice"
+    :view-id="viewId"
+    :points="tool.points"
+    :color="tool.color"
+    :move-point="tool.movePoint"
+    :placing="tool.placing"
+    :finishable="finishable"
+  />
 </template>
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 465f9d629..884513578 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -1,4 +1,5 @@
 import { Ref, computed, ref, watch } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
 import { Vector2 } from '@kitware/vtk.js/types';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
@@ -9,6 +10,8 @@ import { AnnotationTool, ContextMenuEvent } from '../types/annotation-tool';
 import { AnnotationToolStore } from '../store/tools/useAnnotationTool';
 import { getCSSCoordinatesFromEvent } from '../utils/vtk-helpers';
 
+const SHOW_OVERLAY_DELAY = 500; // milliseconds
+
 // does the tools's frame of reference match
 // the view's axis
 const useDoesToolFrameMatchViewAxis = <
@@ -107,6 +110,8 @@ export type OverlayInfo<ToolID> =
       displayXY: Vector2;
     };
 
+// Maintains list of tools' hover states.
+// If one tool hovered, overlayInfo.visible === true with toolID and displayXY.
 export const useHover = <ToolID extends string>(
   tools: Ref<Array<AnnotationTool<ToolID>>>,
   currentSlice: Ref<number>
@@ -114,16 +119,6 @@ export const useHover = <ToolID extends string>(
   type Info = OverlayInfo<ToolID>;
   const toolHoverState = ref({}) as Ref<Record<ToolID, Info>>;
 
-  const overlayInfo = computed(() => {
-    const visibleToolID = Object.keys(toolHoverState.value).find(
-      (toolID) => toolHoverState.value[toolID as ToolID].visible
-    ) as ToolID | undefined;
-
-    return visibleToolID
-      ? toolHoverState.value[visibleToolID]
-      : ({ visible: false } as Info);
-  });
-
   const toolsOnCurrentSlice = computed(() =>
     tools.value.filter((tool) => tool.slice === currentSlice.value)
   );
@@ -154,5 +149,37 @@ export const useHover = <ToolID extends string>(
           visible: false,
         };
   };
+
+  // If hovering true, debounce showing overlay.
+  // Immediately hide overlay if hovering false.
+  const synchronousOverlayInfo = computed(() => {
+    const visibleToolID = Object.keys(toolHoverState.value).find(
+      (toolID) => toolHoverState.value[toolID as ToolID].visible
+    ) as ToolID | undefined;
+
+    return visibleToolID
+      ? toolHoverState.value[visibleToolID]
+      : ({ visible: false } as Info);
+  });
+
+  // Debounced output
+  const overlayInfo = ref(synchronousOverlayInfo.value) as Ref<Info>;
+
+  const debouncedOverlayInfo = useDebounceFn((info: Info) => {
+    // if we moved off the tool (syncOverlay.visible === false), don't show overlay
+    if (synchronousOverlayInfo.value.visible) overlayInfo.value = info;
+  }, SHOW_OVERLAY_DELAY);
+
+  watch(synchronousOverlayInfo, () => {
+    if (!synchronousOverlayInfo.value.visible)
+      overlayInfo.value = synchronousOverlayInfo.value;
+    else {
+      // Immediately set visible = false to hide overlay on mouse move, even if hovering true.
+      // Depends on widget sending hover events with every mouse move.
+      overlayInfo.value = { visible: false };
+      debouncedOverlayInfo({ ...synchronousOverlayInfo.value });
+    }
+  });
+
   return { overlayInfo, onHover };
 };

From e6a552a52f021650086413ce842bcaa75fd72d43 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 15 Sep 2023 11:24:52 -0400
Subject: [PATCH 06/15] fix(BoundingRectangle): fit handle circles within
 rectangle

---
 src/components/tools/BoundingRectangle.vue    | 13 ++++++++-----
 src/components/tools/polygon/PolygonSVG2D.vue |  2 +-
 src/constants.ts                              |  2 ++
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
index ff809da18..64c722697 100644
--- a/src/components/tools/BoundingRectangle.vue
+++ b/src/components/tools/BoundingRectangle.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import { computed, ref, watch, toRefs } from 'vue';
+import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import { nonNullable } from '@/src/utils/index';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import { Bounds, Vector3 } from '@kitware/vtk.js/types';
-import { computed, ref, watch, toRefs } from 'vue';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 
 const props = defineProps<{
@@ -44,11 +45,13 @@ const updateRectangle = () => {
     });
   const [x, y] = vtkBoundingBox.getMinPoint(screenBounds);
   const [maxX, maxY] = vtkBoundingBox.getMaxPoint(screenBounds);
+  const handleRadius = ANNOTATION_TOOL_HANDLE_RADIUS / devicePixelRatio;
+  const handleDiameter = 2 * handleRadius;
   rectangle.value = {
-    x,
-    y,
-    width: maxX - x,
-    height: maxY - y,
+    x: x - handleRadius,
+    y: y - handleRadius,
+    width: maxX - x + handleDiameter,
+    height: maxY - y + handleDiameter,
   };
 };
 
diff --git a/src/components/tools/polygon/PolygonSVG2D.vue b/src/components/tools/polygon/PolygonSVG2D.vue
index bcc5e6d82..0b80ed199 100644
--- a/src/components/tools/polygon/PolygonSVG2D.vue
+++ b/src/components/tools/polygon/PolygonSVG2D.vue
@@ -1,6 +1,6 @@
 <template>
   <g>
-    <!-- radius is related to the vtkRectangleWidget scale, specified in state -->
+    <!-- radius should match constants.ANNOTATION_TOOL_HANDLE_RADIUS and should be related to vtkHandleWidget scale. -->
     <circle
       v-for="({ point: [x, y], radius }, index) in handlePoints"
       :key="index"
diff --git a/src/constants.ts b/src/constants.ts
index 7192ccd86..aa6f5a25e 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -45,3 +45,5 @@ export const Messages = {
       'Lost the WebGL context! Please reload the webpage. If the problem persists, you may need to restart your web browser.',
   },
 } as const;
+
+export const ANNOTATION_TOOL_HANDLE_RADIUS = 10; // pixels

From 5727685783c9bb5c41301c2562c4ced4ca566505 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 15 Sep 2023 13:15:23 -0400
Subject: [PATCH 07/15] feat(ruler): add cursor hover popup

---
 src/components/tools/polygon/PolygonTool.vue | 11 +++------
 src/components/tools/ruler/RulerSVG2D.vue    |  2 +-
 src/components/tools/ruler/RulerTool.vue     | 19 ++++++++++++++
 src/components/tools/ruler/RulerWidget2D.vue |  9 +++++--
 src/vtk/RulerWidget/behavior.ts              | 26 +++++++++++++++++++-
 src/vtk/RulerWidget/index.js                 | 11 +++++++++
 6 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index 80b787cd3..89c8c4fd8 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="pointsToBound" :view-id="viewId" />
+      <bounding-rectangle :points="points" :view-id="viewId" />
       <polygon-widget-2D
         v-for="tool in tools"
         :key="tool.id"
@@ -189,12 +189,9 @@ export default defineComponent({
 
     const currentTools = useCurrentTools(activeToolStore, viewAxis);
 
-    const { onHover, overlayInfo } = useHover<ToolID>(
-      currentTools,
-      currentSlice
-    );
+    const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
 
-    const pointsToBound = computed(() => {
+    const points = computed(() => {
       if (!overlayInfo.value.visible) return [];
       const tool = activeToolStore.toolByID[overlayInfo.value.toolID];
       return tool.points;
@@ -209,7 +206,7 @@ export default defineComponent({
       activeToolStore,
       onHover,
       overlayInfo,
-      pointsToBound,
+      points,
     };
   },
 });
diff --git a/src/components/tools/ruler/RulerSVG2D.vue b/src/components/tools/ruler/RulerSVG2D.vue
index a2bea6bff..15033b9fa 100644
--- a/src/components/tools/ruler/RulerSVG2D.vue
+++ b/src/components/tools/ruler/RulerSVG2D.vue
@@ -9,7 +9,7 @@
       :stroke="color"
       stroke-width="1"
     />
-    <!-- radius is related to the vtkRulerWidget scale, specified in state -->
+    <!-- radius should match constants.ANNOTATION_TOOL_HANDLE_RADIUS and should be related to vtkHandleWidget scale. -->
     <circle
       v-if="first"
       :cx="first.x"
diff --git a/src/components/tools/ruler/RulerTool.vue b/src/components/tools/ruler/RulerTool.vue
index e3359dd9c..50f6a3e8c 100644
--- a/src/components/tools/ruler/RulerTool.vue
+++ b/src/components/tools/ruler/RulerTool.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="overlay-no-events">
     <svg class="overlay-no-events">
+      <bounding-rectangle :points="points" :view-id="viewId" />
       <ruler-widget-2D
         v-for="ruler in rulers"
         :key="ruler.id"
@@ -12,9 +13,11 @@
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(ruler.id, $event)"
         @placed="onRulerPlaced"
+        @widgetHover="onHover(ruler.id, $event)"
       />
     </svg>
     <annotation-context-menu ref="contextMenu" :tool-store="rulerStore" />
+    <annotation-info :info="overlayInfo" :tool-store="rulerStore" />
   </div>
 </template>
 
@@ -43,8 +46,11 @@ import { vec3 } from 'gl-matrix';
 import {
   useContextMenu,
   useCurrentTools,
+  useHover,
 } 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';
 
 export default defineComponent({
   name: 'RulerTool',
@@ -69,6 +75,8 @@ export default defineComponent({
   components: {
     RulerWidget2D,
     AnnotationContextMenu,
+    AnnotationInfo,
+    BoundingRectangle,
   },
   setup(props) {
     const { viewDirection, currentSlice } = toRefs(props);
@@ -190,6 +198,14 @@ 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];
+    });
+
     return {
       rulers: currentRulers,
       placingRulerID,
@@ -197,6 +213,9 @@ export default defineComponent({
       contextMenu,
       openContextMenu,
       rulerStore,
+      onHover,
+      overlayInfo,
+      points,
     };
   },
 });
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index 0cb6a8d3c..0dc542715 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -25,11 +25,14 @@ import { useRulerStore } from '@/src/store/tools/rulers';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import RulerSVG2D from '@/src/components/tools/ruler/RulerSVG2D.vue';
 import { watchOnce } from '@vueuse/core';
-import { useRightClickContextMenu } from '@/src/composables/annotationTool';
+import {
+  useRightClickContextMenu,
+  useHoverEvent,
+} from '@/src/composables/annotationTool';
 
 export default defineComponent({
   name: 'RulerWidget2D',
-  emits: ['placed', 'contextmenu'],
+  emits: ['placed', 'contextmenu', 'widgetHover'],
   props: {
     rulerId: {
       type: String,
@@ -115,6 +118,8 @@ export default defineComponent({
       emit('placed');
     });
 
+    useHoverEvent(emit, widget);
+
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);
diff --git a/src/vtk/RulerWidget/behavior.ts b/src/vtk/RulerWidget/behavior.ts
index 029653142..6cc30853a 100644
--- a/src/vtk/RulerWidget/behavior.ts
+++ b/src/vtk/RulerWidget/behavior.ts
@@ -24,6 +24,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   // support forwarding events
   macro.event(publicAPI, model, 'RightClickEvent');
   macro.event(publicAPI, model, 'PlacedEvent');
+  macro.event(publicAPI, model, 'HoverEvent');
 
   publicAPI.deactivateAllHandles = () => {
     model.widgetState.deactivate();
@@ -55,6 +56,15 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     model._interactor.cancelAnimation(publicAPI, true);
   };
 
+  // Check if mouse is over line segment between handles
+  const checkOverSegment = () => {
+    const selections = model._widgetManager.getSelections();
+    const overSegment =
+      selections[0]?.getProperties().prop ===
+      model.representations[1].getActors()[0]; // line representation is second representation
+    return overSegment;
+  };
+
   /**
    * Places or drags a point.
    */
@@ -105,7 +115,11 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     }
 
     // dragging
-    if (model.activeState?.getActive() && model.pickable) {
+    if (
+      model.activeState?.getActive() &&
+      model.pickable &&
+      !checkOverSegment()
+    ) {
       draggingState = model.activeState;
       publicAPI.setInteractionState(InteractionState.Dragging);
       model._apiSpecificRenderWindow.setCursor('grabbing');
@@ -121,6 +135,11 @@ export default function widgetBehavior(publicAPI: any, model: any) {
    * Moves a point around.
    */
   publicAPI.handleMouseMove = (eventData: any) => {
+    publicAPI.invokeHoverEvent({
+      ...eventData,
+      hovering: !!model.activeState,
+    });
+
     const worldCoords = model.manipulator.handleEvent(
       eventData,
       model._apiSpecificRenderWindow
@@ -148,6 +167,11 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       return macro.EVENT_ABORT;
     }
 
+    publicAPI.invokeHoverEvent({
+      ...eventData,
+      hovering: !!model.activeState,
+    });
+
     return macro.VOID;
   };
 
diff --git a/src/vtk/RulerWidget/index.js b/src/vtk/RulerWidget/index.js
index 1c7179c3a..2da4766da 100644
--- a/src/vtk/RulerWidget/index.js
+++ b/src/vtk/RulerWidget/index.js
@@ -3,6 +3,8 @@ import vtkAbstractWidgetFactory from '@kitware/vtk.js/Widgets/Core/AbstractWidge
 import vtkPlanePointManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import vtkSphereHandleRepresentation from '@kitware/vtk.js/Widgets/Representations/SphereHandleRepresentation';
 import { distance2BetweenPoints } from '@kitware/vtk.js/Common/Core/Math';
+import { Behavior } from '@kitware/vtk.js/Widgets/Representations/WidgetRepresentation/Constants';
+import vtkLineGlyphRepresentation from '@/src/vtk/LineGlyphRepresentation';
 
 import widgetBehavior from './behavior';
 import stateGenerator, { PointsLabel } from './state';
@@ -26,6 +28,15 @@ function vtkRulerWidget(publicAPI, model) {
         scaleInPixels: true,
       },
     },
+    {
+      builder: vtkLineGlyphRepresentation,
+      labels: [PointsLabel],
+      initialValues: {
+        scaleInPixels: true,
+        lineThickness: 0.25, // smaller than .5 default to prioritize picking handles
+        behavior: Behavior.HANDLE, // make pickable even if not visible
+      },
+    },
   ];
 
   publicAPI.getLength = () => {

From 43a8ff7d9a08c90b6e6a58547de95cd8a9b929f0 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 15 Sep 2023 17:03:26 -0400
Subject: [PATCH 08/15] feat(AnnotationInfo): use v-tooltip

Remove bounds changes to Polygon state.

Remove array for watch.
---
 src/components/tools/AnnotationInfo.vue    | 53 ++++++++++++++--------
 src/components/tools/BoundingRectangle.vue |  2 +-
 src/vtk/PolygonWidget/state.ts             | 30 ++----------
 3 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/src/components/tools/AnnotationInfo.vue b/src/components/tools/AnnotationInfo.vue
index b7e2685dc..16ed344d9 100644
--- a/src/components/tools/AnnotationInfo.vue
+++ b/src/components/tools/AnnotationInfo.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts" generic="ToolID extends string">
 /* global ToolID:readonly */
+import { computed, ref } from 'vue';
+import { useElementSize } from '@vueuse/core';
 import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { OverlayInfo } from '@/src/composables/annotationTool';
-import { computed } from 'vue';
+
+// These seem to work ¯\_(ツ)_/¯
+const TOOLTIP_PADDING_X = 30;
+const TOOLTIP_PADDING_Y = 20;
 
 const props = defineProps<{
   info: OverlayInfo<ToolID>;
   toolStore: AnnotationToolStore<ToolID>;
 }>();
 
-const menu = computed(() => {
+const visible = computed(() => {
   return props.info.visible;
 });
 
@@ -17,30 +22,42 @@ const label = computed(() => {
   if (!props.info.visible) return '';
   return props.toolStore.toolByID[props.info.toolID].labelName;
 });
+
+const tooltip = ref();
+const content = computed(() => {
+  return tooltip.value?.contentEl;
+});
+
+const { width, height } = useElementSize(content);
+const offset = computed(() => {
+  return {
+    // Tooltip location is above cursor and centered
+    // Don't know how to get ref to parent v-tooltip element, so adding fudge padding.
+    x: (width.value + TOOLTIP_PADDING_X) / 2,
+    y: height.value + TOOLTIP_PADDING_Y,
+  };
+});
 </script>
 
 <template>
-  <v-menu
-    v-model="menu"
+  <v-tooltip
+    ref="tooltip"
     v-if="info.visible"
-    class="popover-no-events"
+    v-model="visible"
     :style="{
-      left: `${info.displayXY[0]}px`,
-      top: `${info.displayXY[1]}px`,
-      pointerEvents: 'none',
+      left: `${info.displayXY[0] - offset.x}px`,
+      top: `${info.displayXY[1] - offset.y}px`,
+      zIndex: 500,
     }"
+    class="better-contrast"
   >
-    <v-list density="compact">
-      <v-list-item>
-        <v-list-item-title>{{ label }}</v-list-item-title>
-      </v-list-item>
-    </v-list>
-  </v-menu>
+    {{ label }}
+  </v-tooltip>
 </template>
 
-<style>
-.popover-no-events > * {
-  pointer-events: none !important;
-  touch-action: none;
+<style scoped>
+.better-contrast :deep(.v-overlay__content) {
+  opacity: 1 !important;
+  background: rgba(255, 255, 255, 0.9) !important;
 }
 </style>
diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
index 64c722697..ac53f72d0 100644
--- a/src/components/tools/BoundingRectangle.vue
+++ b/src/components/tools/BoundingRectangle.vue
@@ -56,7 +56,7 @@ const updateRectangle = () => {
 };
 
 const { points } = toRefs(props);
-watch([points], updateRectangle, { immediate: true, deep: true });
+watch(points, updateRectangle, { immediate: true, deep: true });
 
 onVTKEvent(viewProxy, 'onModified', updateRectangle);
 </script>
diff --git a/src/vtk/PolygonWidget/state.ts b/src/vtk/PolygonWidget/state.ts
index 27bae711b..a580fce10 100644
--- a/src/vtk/PolygonWidget/state.ts
+++ b/src/vtk/PolygonWidget/state.ts
@@ -1,10 +1,9 @@
 import macro from '@kitware/vtk.js/macros';
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
-import boundsMixin from '@kitware/vtk.js/Widgets/Core/StateBuilder/boundsMixin';
+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 { Bounds, Vector3 } from '@kitware/vtk.js/types';
-import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+import { Vector3 } from '@kitware/vtk.js/types';
 
 import createPointState from '../ToolWidgetUtils/pointState';
 import { watchState } from '../ToolWidgetUtils/utils';
@@ -109,29 +108,6 @@ function vtkPolygonWidgetState(publicAPI: any, model: any) {
     }
   };
 
-  const computeBounds = () => {
-    if (model.handles.length === 0) return undefined;
-
-    const bounds = vtkBoundingBox.reset([] as unknown as Bounds);
-    model.handles
-      .map((handle: any) => handle.getOrigin())
-      .forEach((point: Vector3) => {
-        vtkBoundingBox.addPoint(bounds, ...point);
-      });
-    return bounds;
-  };
-
-  let savedBounds: Bounds | undefined;
-  publicAPI.onModified(() => {
-    savedBounds = undefined;
-  });
-
-  publicAPI.getBounds = () => {
-    if (savedBounds) return savedBounds;
-    savedBounds = computeBounds();
-    return savedBounds;
-  };
-
   publicAPI.getPlacing = () => getTool().placing;
   publicAPI.setPlacing = (placing: boolean) => {
     getTool().placing = placing;
@@ -155,7 +131,7 @@ function _createPolygonWidgetState(
 ) {
   Object.assign(model, defaultValues(initialValues));
   vtkWidgetState.extend(publicAPI, model, initialValues);
-  boundsMixin.extend(publicAPI, model);
+  bounds.extend(publicAPI, model);
 
   macro.get(publicAPI, model, ['id', 'handles', 'moveHandle', 'finishable']);
   macro.setGet(publicAPI, model, ['finishable']);

From 7d23b658cfccb176ddb1a0c49aa657e1ae904e33 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 15 Sep 2023 17:16:18 -0400
Subject: [PATCH 09/15] fix(ruler): turn off hover when dragging

---
 src/composables/annotationTool.ts |  2 +-
 src/vtk/PolygonWidget/behavior.ts |  1 +
 src/vtk/RulerWidget/behavior.ts   | 10 +++++-----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 884513578..27c4d1792 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -10,7 +10,7 @@ import { AnnotationTool, ContextMenuEvent } from '../types/annotation-tool';
 import { AnnotationToolStore } from '../store/tools/useAnnotationTool';
 import { getCSSCoordinatesFromEvent } from '../utils/vtk-helpers';
 
-const SHOW_OVERLAY_DELAY = 500; // milliseconds
+const SHOW_OVERLAY_DELAY = 250; // milliseconds
 
 // does the tools's frame of reference match
 // the view's axis
diff --git a/src/vtk/PolygonWidget/behavior.ts b/src/vtk/PolygonWidget/behavior.ts
index 467d3a5b4..2e9c2d62f 100644
--- a/src/vtk/PolygonWidget/behavior.ts
+++ b/src/vtk/PolygonWidget/behavior.ts
@@ -152,6 +152,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   publicAPI.handleLeftButtonPress = (event: vtkMouseEvent) => {
     const activeWidget = model._widgetManager.getActiveWidget();
 
+    // turns off hover while dragging
     publicAPI.invokeHoverEvent({
       ...event,
       hovering: false,
diff --git a/src/vtk/RulerWidget/behavior.ts b/src/vtk/RulerWidget/behavior.ts
index 6cc30853a..b04c3914e 100644
--- a/src/vtk/RulerWidget/behavior.ts
+++ b/src/vtk/RulerWidget/behavior.ts
@@ -73,6 +73,11 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       return macro.VOID;
     }
 
+    publicAPI.invokeHoverEvent({
+      ...eventData,
+      hovering: false,
+    });
+
     // This ruler widget is passive, so if another widget
     // is active, we don't do anything.
     const activeWidget = model._widgetManager.getActiveWidget();
@@ -135,11 +140,6 @@ export default function widgetBehavior(publicAPI: any, model: any) {
    * Moves a point around.
    */
   publicAPI.handleMouseMove = (eventData: any) => {
-    publicAPI.invokeHoverEvent({
-      ...eventData,
-      hovering: !!model.activeState,
-    });
-
     const worldCoords = model.manipulator.handleEvent(
       eventData,
       model._apiSpecificRenderWindow

From f28a2570f00e7c63d5300e6d87443f392bdafb6e Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 15 Sep 2023 17:33:06 -0400
Subject: [PATCH 10/15] refactor(pointState): use ANNOTATION_TOOL_HANDLE_RADIUS
 everywhere

---
 src/components/tools/BoundingRectangle.vue    | 3 ++-
 src/components/tools/polygon/PolygonSVG2D.vue | 6 +++---
 src/vtk/RulerWidget/behavior.ts               | 1 +
 src/vtk/ToolWidgetUtils/pointState.js         | 3 ++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
index ac53f72d0..65d786a5e 100644
--- a/src/components/tools/BoundingRectangle.vue
+++ b/src/components/tools/BoundingRectangle.vue
@@ -45,7 +45,8 @@ const updateRectangle = () => {
     });
   const [x, y] = vtkBoundingBox.getMinPoint(screenBounds);
   const [maxX, maxY] = vtkBoundingBox.getMaxPoint(screenBounds);
-  const handleRadius = ANNOTATION_TOOL_HANDLE_RADIUS / devicePixelRatio;
+  // Plus 2 to account for the stroke width
+  const handleRadius = (ANNOTATION_TOOL_HANDLE_RADIUS + 2) / devicePixelRatio;
   const handleDiameter = 2 * handleRadius;
   rectangle.value = {
     x: x - handleRadius,
diff --git a/src/components/tools/polygon/PolygonSVG2D.vue b/src/components/tools/polygon/PolygonSVG2D.vue
index 0b80ed199..b2625321b 100644
--- a/src/components/tools/polygon/PolygonSVG2D.vue
+++ b/src/components/tools/polygon/PolygonSVG2D.vue
@@ -23,7 +23,7 @@
 <script lang="ts">
 import { useResizeObserver } from '@/src/composables/useResizeObserver';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { ToolContainer } from '@/src/constants';
+import { ANNOTATION_TOOL_HANDLE_RADIUS, ToolContainer } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
@@ -38,8 +38,8 @@ import {
   inject,
 } from 'vue';
 
-const POINT_RADIUS = 10;
-const FINISHABLE_POINT_RADIUS = 16;
+const POINT_RADIUS = ANNOTATION_TOOL_HANDLE_RADIUS;
+const FINISHABLE_POINT_RADIUS = POINT_RADIUS + 6;
 
 export default defineComponent({
   props: {
diff --git a/src/vtk/RulerWidget/behavior.ts b/src/vtk/RulerWidget/behavior.ts
index b04c3914e..28392d9fa 100644
--- a/src/vtk/RulerWidget/behavior.ts
+++ b/src/vtk/RulerWidget/behavior.ts
@@ -73,6 +73,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       return macro.VOID;
     }
 
+    // turns off hover while dragging
     publicAPI.invokeHoverEvent({
       ...eventData,
       hovering: false,
diff --git a/src/vtk/ToolWidgetUtils/pointState.js b/src/vtk/ToolWidgetUtils/pointState.js
index 4e369ab67..9c7ced295 100644
--- a/src/vtk/ToolWidgetUtils/pointState.js
+++ b/src/vtk/ToolWidgetUtils/pointState.js
@@ -2,8 +2,9 @@ import macro from '@kitware/vtk.js/macros';
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
 import visibleMixin from '@kitware/vtk.js/Widgets/Core/StateBuilder/visibleMixin';
 import scale1Mixin from '@kitware/vtk.js/Widgets/Core/StateBuilder/scale1Mixin';
+import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 
-const PIXEL_SIZE = 20;
+const PIXEL_SIZE = ANNOTATION_TOOL_HANDLE_RADIUS * 2;
 
 function watchStore(publicAPI, store, getter, cmp) {
   let cached = getter();

From 910a80d6409c03fd0f996412665c146ccc886ba7 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Sat, 16 Sep 2023 13:31:14 -0400
Subject: [PATCH 11/15] feat(rectangle): add vtk lines between corners

---
 .../RectangleLineRepresentation.js            | 76 +++++++++++++++++++
 src/vtk/RectangleWidget/index.js              | 10 +++
 2 files changed, 86 insertions(+)
 create mode 100644 src/vtk/RectangleWidget/RectangleLineRepresentation.js

diff --git a/src/vtk/RectangleWidget/RectangleLineRepresentation.js b/src/vtk/RectangleWidget/RectangleLineRepresentation.js
new file mode 100644
index 000000000..8c37939ff
--- /dev/null
+++ b/src/vtk/RectangleWidget/RectangleLineRepresentation.js
@@ -0,0 +1,76 @@
+import macro from '@kitware/vtk.js/macros';
+import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+import vtkStateBuilder from '@kitware/vtk.js/Widgets/Core/StateBuilder';
+import * as vtkMath from '@kitware/vtk.js/Common/Core/Math';
+import LineGlyphRepresentation from '../LineGlyphRepresentation';
+
+function vtkRectangleLineRepresentation(publicAPI, model) {
+  model.classHierarchy.push('vtkRectangleLineRepresentation');
+
+  const superGetRepresentationStates = publicAPI.getRepresentationStates;
+
+  const compositeState = vtkStateBuilder
+    .createBuilder()
+    .addDynamicMixinState({
+      labels: ['handles'],
+      mixins: ['origin', 'scale1'],
+      name: 'handle',
+    })
+    .build();
+
+  const cornerStates = Array.from({ length: 4 }, () =>
+    compositeState.addHandle()
+  );
+
+  publicAPI.getRepresentationStates = (input = model.inputData[0]) => {
+    // Map 2 handles to 4 corner states in 2D
+    const states = superGetRepresentationStates(input);
+    if (states.length === 0) {
+      return states;
+    }
+
+    const box = [...vtkBoundingBox.INIT_BOUNDS];
+    states.forEach((handle) => {
+      vtkBoundingBox.addPoint(box, ...handle.getOrigin());
+    });
+    const corners = vtkBoundingBox.getCorners(box, []);
+
+    // 8 corners on plane, remove duplicates
+    const corners2D = corners.reduce((outCorners, corner) => {
+      const duplicate = outCorners.some((outCorner) =>
+        vtkMath.areEquals(outCorner, corner)
+      );
+      if (!duplicate) {
+        outCorners.push(corner);
+      }
+      return outCorners;
+    }, []);
+
+    const scale = states[0].getScale1();
+    // reorder corners
+    const outStates = [0, 2, 3, 1]
+      // if in handles are equal, corners2D length is 1
+      .map((index) => Math.min(index, corners2D.length - 1))
+      .map((cornerIndex, index) => {
+        const state = cornerStates[index];
+        state.setOrigin(corners2D[cornerIndex]);
+        state.setScale1(scale);
+        return state;
+      });
+
+    return outStates;
+  };
+}
+
+export function extend(publicAPI, model, initialValues = {}) {
+  LineGlyphRepresentation.extend(publicAPI, model, initialValues);
+
+  vtkRectangleLineRepresentation(publicAPI, model);
+}
+
+export const newInstance = macro.newInstance(
+  extend,
+  'vtkRectangleLineRepresentation'
+);
+
+export default { newInstance, extend };
diff --git a/src/vtk/RectangleWidget/index.js b/src/vtk/RectangleWidget/index.js
index 3a043789c..d117bc954 100644
--- a/src/vtk/RectangleWidget/index.js
+++ b/src/vtk/RectangleWidget/index.js
@@ -1,14 +1,24 @@
 import macro from '@kitware/vtk.js/macro';
 
 import vtkRulerWidget from '../RulerWidget';
+import vtkRectangleLineRepresentation from './RectangleLineRepresentation';
 
 export { InteractionState } from '../RulerWidget/behavior';
+
 // ----------------------------------------------------------------------------
 // Factory
 // ----------------------------------------------------------------------------
 
 function vtkRectangleWidget(publicAPI, model) {
   model.classHierarchy.push('vtkRectangleWidget');
+
+  const superGetRepresentationsForViewType =
+    publicAPI.getRepresentationsForViewType;
+  publicAPI.getRepresentationsForViewType = () => {
+    const reps = superGetRepresentationsForViewType();
+    reps[1].builder = vtkRectangleLineRepresentation;
+    return reps;
+  };
 }
 
 // ----------------------------------------------------------------------------

From 59df16abbe853b38c61b64d5f92888daf5ce7c94 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Sat, 16 Sep 2023 13:48:53 -0400
Subject: [PATCH 12/15] feat(rectangle): add hover to rectangle tool

---
 src/components/tools/AnnotationInfo.vue       |  2 +-
 .../tools/rectangle/RectangleSVG2D.vue        |  2 +-
 .../tools/rectangle/RectangleTool.vue         | 19 ++++++++++++
 .../tools/rectangle/RectangleWidget2D.vue     |  9 ++++--
 src/components/tools/ruler/RulerTool.vue      |  2 +-
 .../RectangleLineRepresentation.js            | 29 +++++++++++++++----
 src/vtk/RectangleWidget/index.js              |  4 +++
 7 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/src/components/tools/AnnotationInfo.vue b/src/components/tools/AnnotationInfo.vue
index 16ed344d9..ca116eca6 100644
--- a/src/components/tools/AnnotationInfo.vue
+++ b/src/components/tools/AnnotationInfo.vue
@@ -47,7 +47,7 @@ const offset = computed(() => {
     :style="{
       left: `${info.displayXY[0] - offset.x}px`,
       top: `${info.displayXY[1] - offset.y}px`,
-      zIndex: 500,
+      zIndex: 500, // stay under context menu
     }"
     class="better-contrast"
   >
diff --git a/src/components/tools/rectangle/RectangleSVG2D.vue b/src/components/tools/rectangle/RectangleSVG2D.vue
index f7e3dddab..e15cc8636 100644
--- a/src/components/tools/rectangle/RectangleSVG2D.vue
+++ b/src/components/tools/rectangle/RectangleSVG2D.vue
@@ -9,7 +9,7 @@
       stroke-width="1"
       :fill="fillColor"
     />
-    <!-- radius is related to the vtkRectangleWidget scale, specified in state -->
+    <!-- radius should match constants.ANNOTATION_TOOL_HANDLE_RADIUS and should be related to vtkHandleWidget scale. -->
     <circle
       v-if="first"
       :cx="first.x"
diff --git a/src/components/tools/rectangle/RectangleTool.vue b/src/components/tools/rectangle/RectangleTool.vue
index 051e14de2..ba5cc1103 100644
--- a/src/components/tools/rectangle/RectangleTool.vue
+++ b/src/components/tools/rectangle/RectangleTool.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="overlay-no-events">
     <svg class="overlay-no-events">
+      <bounding-rectangle :points="points" :view-id="viewId" />
       <rectangle-widget-2D
         v-for="tool in tools"
         :key="tool.id"
@@ -12,8 +13,10 @@
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(tool.id, $event)"
         @placed="onToolPlaced"
+        @widgetHover="onHover(tool.id, $event)"
       />
     </svg>
+    <annotation-info :info="overlayInfo" :tool-store="activeToolStore" />
     <annotation-context-menu ref="contextMenu" :tool-store="activeToolStore" />
   </div>
 </template>
@@ -43,8 +46,11 @@ import { RectangleID } from '@/src/types/rectangle';
 import {
   useCurrentTools,
   useContextMenu,
+  useHover,
 } 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 RectangleWidget2D from './RectangleWidget2D.vue';
 
 type ToolID = RectangleID;
@@ -74,6 +80,8 @@ export default defineComponent({
   components: {
     RectangleWidget2D,
     AnnotationContextMenu,
+    AnnotationInfo,
+    BoundingRectangle,
   },
   setup(props) {
     const { viewDirection, currentSlice } = toRefs(props);
@@ -182,6 +190,14 @@ export default defineComponent({
 
     const currentTools = useCurrentTools(activeToolStore, viewAxis);
 
+    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];
+    });
+
     return {
       tools: currentTools,
       placingToolID,
@@ -189,6 +205,9 @@ export default defineComponent({
       contextMenu,
       openContextMenu,
       activeToolStore,
+      onHover,
+      overlayInfo,
+      points,
     };
   },
 });
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index e73c6277c..1fda66452 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -26,7 +26,10 @@ import RectangleSVG2D from '@/src/components/tools/rectangle/RectangleSVG2D.vue'
 import { vtkRulerWidgetPointState } from '@/src/vtk/RulerWidget';
 import { watchOnce } from '@vueuse/core';
 import { RectangleID } from '@/src/types/rectangle';
-import { useRightClickContextMenu } from '@/src/composables/annotationTool';
+import {
+  useRightClickContextMenu,
+  useHoverEvent,
+} from '@/src/composables/annotationTool';
 
 const useStore = useRectangleStore;
 const vtkWidgetFactory = vtkRectangleWidget;
@@ -37,7 +40,7 @@ const SVG2DComponent = RectangleSVG2D;
 
 export default defineComponent({
   name: 'RectangleWidget2D',
-  emits: ['placed', 'contextmenu'],
+  emits: ['placed', 'contextmenu', 'widgetHover'],
   props: {
     toolId: {
       type: String,
@@ -125,6 +128,8 @@ export default defineComponent({
       emit('placed');
     });
 
+    useHoverEvent(emit, widget);
+
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);
diff --git a/src/components/tools/ruler/RulerTool.vue b/src/components/tools/ruler/RulerTool.vue
index 50f6a3e8c..dddb1eeeb 100644
--- a/src/components/tools/ruler/RulerTool.vue
+++ b/src/components/tools/ruler/RulerTool.vue
@@ -16,8 +16,8 @@
         @widgetHover="onHover(ruler.id, $event)"
       />
     </svg>
-    <annotation-context-menu ref="contextMenu" :tool-store="rulerStore" />
     <annotation-info :info="overlayInfo" :tool-store="rulerStore" />
+    <annotation-context-menu ref="contextMenu" :tool-store="rulerStore" />
   </div>
 </template>
 
diff --git a/src/vtk/RectangleWidget/RectangleLineRepresentation.js b/src/vtk/RectangleWidget/RectangleLineRepresentation.js
index 8c37939ff..5b5086bc9 100644
--- a/src/vtk/RectangleWidget/RectangleLineRepresentation.js
+++ b/src/vtk/RectangleWidget/RectangleLineRepresentation.js
@@ -22,8 +22,16 @@ function vtkRectangleLineRepresentation(publicAPI, model) {
     compositeState.addHandle()
   );
 
+  // Save behavior model to access renderer
+  const superBehavior = model.widgetAPI.behavior;
+  let behaviorModel;
+  model.widgetAPI.behavior = (publicAPIy, bModel) => {
+    behaviorModel = bModel;
+    return superBehavior(publicAPIy, bModel);
+  };
+
   publicAPI.getRepresentationStates = (input = model.inputData[0]) => {
-    // Map 2 handles to 4 corner states in 2D
+    // Map 2 handles to 4 corner states in display space
     const states = superGetRepresentationStates(input);
     if (states.length === 0) {
       return states;
@@ -31,11 +39,15 @@ function vtkRectangleLineRepresentation(publicAPI, model) {
 
     const box = [...vtkBoundingBox.INIT_BOUNDS];
     states.forEach((handle) => {
-      vtkBoundingBox.addPoint(box, ...handle.getOrigin());
+      const displayPos = behaviorModel._apiSpecificRenderWindow.worldToDisplay(
+        ...handle.getOrigin(),
+        behaviorModel._renderer
+      );
+      vtkBoundingBox.addPoint(box, ...displayPos);
     });
     const corners = vtkBoundingBox.getCorners(box, []);
 
-    // 8 corners on plane, remove duplicates
+    // 8 corners on plane, remove duplicates to make 4 corners
     const corners2D = corners.reduce((outCorners, corner) => {
       const duplicate = outCorners.some((outCorner) =>
         vtkMath.areEquals(outCorner, corner)
@@ -47,13 +59,18 @@ function vtkRectangleLineRepresentation(publicAPI, model) {
     }, []);
 
     const scale = states[0].getScale1();
+
     // reorder corners
     const outStates = [0, 2, 3, 1]
       // if in handles are equal, corners2D length is 1
       .map((index) => Math.min(index, corners2D.length - 1))
-      .map((cornerIndex, index) => {
-        const state = cornerStates[index];
-        state.setOrigin(corners2D[cornerIndex]);
+      .map((cornerIndex, stateIndex) => {
+        const worldPos = behaviorModel._apiSpecificRenderWindow.displayToWorld(
+          ...corners2D[cornerIndex],
+          behaviorModel._renderer
+        );
+        const state = cornerStates[stateIndex];
+        state.setOrigin(worldPos);
         state.setScale1(scale);
         return state;
       });
diff --git a/src/vtk/RectangleWidget/index.js b/src/vtk/RectangleWidget/index.js
index d117bc954..737ae6d5d 100644
--- a/src/vtk/RectangleWidget/index.js
+++ b/src/vtk/RectangleWidget/index.js
@@ -17,6 +17,10 @@ function vtkRectangleWidget(publicAPI, model) {
   publicAPI.getRepresentationsForViewType = () => {
     const reps = superGetRepresentationsForViewType();
     reps[1].builder = vtkRectangleLineRepresentation;
+    reps[1].initialValues = {
+      ...reps[1].initialValues,
+      widgetAPI: model,
+    };
     return reps;
   };
 }

From bf6abb3d23bd63a4ed8f17f1c3157f288af049ed Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 18 Sep 2023 14:16:42 -0400
Subject: [PATCH 13/15] refactor(annotationTool): usePopperState to debouce
 hover overlay

---
 src/composables/annotationTool.ts | 28 +++++++++-------------------
 src/composables/usePopperState.ts | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+), 19 deletions(-)
 create mode 100644 src/composables/usePopperState.ts

diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 27c4d1792..c7193ab6e 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -1,5 +1,4 @@
 import { Ref, computed, ref, watch } from 'vue';
-import { useDebounceFn } from '@vueuse/core';
 import { Vector2 } from '@kitware/vtk.js/types';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
@@ -9,6 +8,7 @@ import { LPSAxis } from '../types/lps';
 import { AnnotationTool, ContextMenuEvent } from '../types/annotation-tool';
 import { AnnotationToolStore } from '../store/tools/useAnnotationTool';
 import { getCSSCoordinatesFromEvent } from '../utils/vtk-helpers';
+import { usePopperState } from './usePopperState';
 
 const SHOW_OVERLAY_DELAY = 250; // milliseconds
 
@@ -162,24 +162,14 @@ export const useHover = <ToolID extends string>(
       : ({ visible: false } as Info);
   });
 
-  // Debounced output
-  const overlayInfo = ref(synchronousOverlayInfo.value) as Ref<Info>;
-
-  const debouncedOverlayInfo = useDebounceFn((info: Info) => {
-    // if we moved off the tool (syncOverlay.visible === false), don't show overlay
-    if (synchronousOverlayInfo.value.visible) overlayInfo.value = info;
-  }, SHOW_OVERLAY_DELAY);
-
-  watch(synchronousOverlayInfo, () => {
-    if (!synchronousOverlayInfo.value.visible)
-      overlayInfo.value = synchronousOverlayInfo.value;
-    else {
-      // Immediately set visible = false to hide overlay on mouse move, even if hovering true.
-      // Depends on widget sending hover events with every mouse move.
-      overlayInfo.value = { visible: false };
-      debouncedOverlayInfo({ ...synchronousOverlayInfo.value });
-    }
-  });
+  const { isSet: showOverlay, reset: resetOverlay } =
+    usePopperState(SHOW_OVERLAY_DELAY);
+
+  watch(synchronousOverlayInfo, resetOverlay);
+
+  const overlayInfo = computed(() =>
+    showOverlay.value ? synchronousOverlayInfo.value : { visible: false }
+  );
 
   return { overlayInfo, onHover };
 };
diff --git a/src/composables/usePopperState.ts b/src/composables/usePopperState.ts
new file mode 100644
index 000000000..429007df0
--- /dev/null
+++ b/src/composables/usePopperState.ts
@@ -0,0 +1,18 @@
+import { useDebounceFn } from '@vueuse/core';
+import { ref } from 'vue';
+
+// reset: isSet = false immediately. After delay, isSet = true
+export const usePopperState = (delay: number) => {
+  const isSet = ref(true);
+
+  const delayedSet = useDebounceFn(() => {
+    isSet.value = true;
+  }, delay);
+
+  const reset = () => {
+    isSet.value = false;
+    delayedSet();
+  };
+
+  return { isSet, reset };
+};

From 5f97d5363faa7f694e5400eb336353f1b6d3b816 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 18 Sep 2023 15:12:51 -0400
Subject: [PATCH 14/15] feat(AnnotationContextMenu): display tool label

---
 .../tools/AnnotationContextMenu.vue           | 45 ++++++++++++++++++-
 src/composables/annotationTool.ts             |  4 +-
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/components/tools/AnnotationContextMenu.vue b/src/components/tools/AnnotationContextMenu.vue
index a876c2016..7d64edae9 100644
--- a/src/components/tools/AnnotationContextMenu.vue
+++ b/src/components/tools/AnnotationContextMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="ToolID extends string">
 /* global ToolID:readonly */
-import { shallowReactive } from 'vue';
+import { computed, shallowReactive } from 'vue';
 import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { ContextMenuEvent } from '@/src/types/annotation-tool';
 import { WidgetAction } from '@/src/vtk/ToolWidgetUtils/utils';
@@ -29,6 +29,10 @@ defineExpose({
   open,
 });
 
+const tool = computed(() => {
+  return props.toolStore.toolByID[contextMenu.forToolID];
+});
+
 const deleteToolFromContextMenu = () => {
   props.toolStore.removeTool(contextMenu.forToolID);
 };
@@ -52,20 +56,57 @@ const hideToolFromContextMenu = () => {
     close-on-content-click
   >
     <v-list density="compact">
+      <v-list-item>
+        <template v-slot:prepend>
+          <div
+            class="color-dot v-icon"
+            :style="{ backgroundColor: tool.color }"
+          />
+        </template>
+        <v-list-item-title class="v-list-item--disabled">
+          {{ tool.labelName }}
+        </v-list-item-title>
+      </v-list-item>
+
+      <!-- Separate informative items from interactive items -->
+      <v-divider></v-divider>
+
       <v-list-item @click="hideToolFromContextMenu">
+        <template v-slot:prepend>
+          <v-icon>mdi-eye</v-icon>
+        </template>
         <v-list-item-title>Hide</v-list-item-title>
       </v-list-item>
+
       <v-list-item @click="deleteToolFromContextMenu">
+        <template v-slot:prepend>
+          <v-icon>mdi-delete</v-icon>
+        </template>
         <v-list-item-title>Delete Annotation</v-list-item-title>
       </v-list-item>
-      <!-- Optional items below stable item for muscle memory  -->
+
+      <!-- Optional items below stable items for muscle memory  -->
       <v-list-item
         v-for="action in contextMenu.widgetActions"
         @click="action.func"
         :key="action.name"
       >
+        <template v-slot:prepend>
+          <v-icon></v-icon>
+        </template>
         <v-list-item-title>{{ action.name }}</v-list-item-title>
       </v-list-item>
     </v-list>
   </v-menu>
 </template>
+
+<style scoped>
+.color-dot {
+  /* display: inline-block; */
+  width: 24px;
+  height: 24px;
+  background: yellow;
+  border-radius: 16px;
+  opacity: 1 !important;
+}
+</style>
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index c7193ab6e..24ba80d53 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -168,7 +168,9 @@ export const useHover = <ToolID extends string>(
   watch(synchronousOverlayInfo, resetOverlay);
 
   const overlayInfo = computed(() =>
-    showOverlay.value ? synchronousOverlayInfo.value : { visible: false }
+    showOverlay.value
+      ? synchronousOverlayInfo.value
+      : ({ visible: false } as Info)
   );
 
   return { overlayInfo, onHover };

From 43be39a2e61e49a2b3b3238dc8b08a5e5a655098 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 18 Sep 2023 16:08:07 -0400
Subject: [PATCH 15/15] feat(ToolStrip): add select tool which enables hover
 popup

---
 src/components/ToolStrip.vue                  |  9 +++++++++
 .../tools/AnnotationContextMenu.vue           |  1 -
 src/composables/annotationTool.ts             | 19 ++++++++++++++-----
 src/store/tools/types.ts                      |  1 +
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/ToolStrip.vue b/src/components/ToolStrip.vue
index 73bfdba83..4d19e6d4b 100644
--- a/src/components/ToolStrip.vue
+++ b/src/components/ToolStrip.vue
@@ -48,6 +48,15 @@
       />
     </groupable-item>
     <div class="my-1 tool-separator" />
+    <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Select">
+      <tool-button
+        icon="mdi-cursor-default"
+        name="Select"
+        :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
+        :disabled="noCurrentImage"
+        @click="toggle"
+      />
+    </groupable-item>
     <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Paint">
       <menu-tool-button
         icon="mdi-brush"
diff --git a/src/components/tools/AnnotationContextMenu.vue b/src/components/tools/AnnotationContextMenu.vue
index 7d64edae9..c63f4b561 100644
--- a/src/components/tools/AnnotationContextMenu.vue
+++ b/src/components/tools/AnnotationContextMenu.vue
@@ -102,7 +102,6 @@ const hideToolFromContextMenu = () => {
 
 <style scoped>
 .color-dot {
-  /* display: inline-block; */
   width: 24px;
   height: 24px;
   background: yellow;
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 24ba80d53..3d672844b 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -4,10 +4,12 @@ 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 { LPSAxis } from '../types/lps';
-import { AnnotationTool, ContextMenuEvent } from '../types/annotation-tool';
-import { AnnotationToolStore } from '../store/tools/useAnnotationTool';
-import { getCSSCoordinatesFromEvent } from '../utils/vtk-helpers';
+import { useToolStore } from '@/src/store/tools';
+import { Tools } from '@/src/store/tools/types';
+import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
+import { getCSSCoordinatesFromEvent } from '@/src//utils/vtk-helpers';
+import { LPSAxis } from '@/src/types/lps';
+import { AnnotationTool, ContextMenuEvent } from '@/src/types/annotation-tool';
 import { usePopperState } from './usePopperState';
 
 const SHOW_OVERLAY_DELAY = 250; // milliseconds
@@ -173,5 +175,12 @@ export const useHover = <ToolID extends string>(
       : ({ visible: false } as Info)
   );
 
-  return { overlayInfo, onHover };
+  const toolStore = useToolStore();
+  const noInfoWithoutSelect = computed(() => {
+    if (toolStore.currentTool !== Tools.Select)
+      return { visible: false } as Info;
+    return overlayInfo.value;
+  });
+
+  return { overlayInfo: noInfoWithoutSelect, onHover };
 };
diff --git a/src/store/tools/types.ts b/src/store/tools/types.ts
index 6ab9b36d3..f73e6e8d3 100644
--- a/src/store/tools/types.ts
+++ b/src/store/tools/types.ts
@@ -8,4 +8,5 @@ export enum Tools {
   Crosshairs = 'Crosshairs',
   Crop = 'Crop',
   Polygon = 'Polygon',
+  Select = 'Select',
 }