Annotation Tool Hover

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>

src/components/tools/BoundingRectangle.vue

@@ -0,0 +1,75 @@
+<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 { 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);
+  const handleRadius = ANNOTATION_TOOL_HANDLE_RADIUS / devicePixelRatio;
+  const handleDiameter = 2 * handleRadius;
+  rectangle.value = {
+    x: x - handleRadius,
+    y: y - handleRadius,
+    width: maxX - x + handleDiameter,
+    height: maxY - y + handleDiameter,
+  };
+};
+
+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>

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"

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"
@@ -12,9 +13,11 @@
         :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 :info="overlayInfo" :tool-store="activeToolStore" />
   </div>
 </template>
 
@@ -43,8 +46,11 @@ 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 BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import PolygonWidget2D from './PolygonWidget2D.vue';
 
 type ToolID = PolygonID;
@@ -74,6 +80,8 @@ export default defineComponent({
   components: {
     PolygonWidget2D,
     AnnotationContextMenu,
+    AnnotationInfo,
+    BoundingRectangle,
   },
   setup(props) {
     const { viewDirection, currentSlice } = toRefs(props);
@@ -181,13 +189,27 @@ export default defineComponent({
 
     const currentTools = useCurrentTools(activeToolStore, viewAxis);
 
+    const { onHover, overlayInfo } = useHover<ToolID>(
+      currentTools,
+      currentSlice
+    );
+
+    const pointsToBound = computed(() => {
+      if (!overlayInfo.value.visible) return [];
+      const tool = activeToolStore.toolByID[overlayInfo.value.toolID];
+      return tool.points;
+    });
+
     return {
       tools: currentTools,
       placingToolID,
       onToolPlaced,
       contextMenu,
       openContextMenu,
       activeToolStore,
+      onHover,
+      overlayInfo,
+      pointsToBound,
     };
   },
 });

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 { 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 +30,7 @@ import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
   name: 'PolygonWidget2D',
-  emits: ['placed', 'contextmenu'],
+  emits: ['placed', 'contextmenu', 'widgetHover'],
   props: {
     toolId: {
       type: String,
@@ -103,6 +106,8 @@ export default defineComponent({
       emit('placed');
     });
 
+    useHoverEvent(emit, widget);
+
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);

src/composables/annotationTool.ts

@@ -1,4 +1,6 @@
-import { Ref, computed, ref } from 'vue';
+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';
 import { vtkAnnotationToolWidget } from '@/src/vtk/ToolWidgetUtils/utils';
@@ -8,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 = <
@@ -78,3 +82,104 @@ 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;
+    };
+
+// 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>
+) => {
+  type Info = OverlayInfo<ToolID>;
+  const toolHoverState = ref({}) as Ref<Record<ToolID, 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,
+        };
+  };
+
+  // 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 };
+};

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