fix: polygon nested interaction issues

- Prevent hover handles on existing polygons while placing new one
- Allow right-click to remove points when placing inside other annotations
- Clear stale activeState on all widgets when placing polygon loses focus
- Add hasFocus check to RulerWidget (used by RectangleWidget)

Author: PaulHax

src/components/tools/AnnotationInfo.vue

@@ -4,9 +4,8 @@ import { useElementSize } from '@vueuse/core';
 import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { OverlayInfo } from '@/src/composables/annotationTool';
 
-// These seem to work ¯\_(ツ)_/¯
 const TOOLTIP_PADDING_X = 30;
-const TOOLTIP_PADDING_Y = 10;
+const TOOLTIP_PADDING_Y = 16;
 
 const props = defineProps<{
   info: OverlayInfo;
@@ -78,6 +77,7 @@ const offset = computed(() => {
   background: rgba(255, 255, 255, 0.9) !important;
   padding-left: 0;
   padding-right: 0;
+  pointer-events: none;
 }
 
 .tooltip-text {

src/components/tools/polygon/PolygonTool.vue

@@ -239,55 +239,36 @@ export default defineComponent({
     const { contextMenu, openContextMenu: baseOpenContextMenu } =
       useContextMenu();
 
-    // Check if any rectangle is actively being placed
     const rectangleStore = useRectangleStore();
-    const isAnyRectanglePlacing = () => {
-      return rectangleStore.tools.some(
+    const shouldSuppressInteraction = (id: ToolID) => {
+      const rectanglePlacing = rectangleStore.tools.some(
         (tool) => tool.placing && tool.firstPoint && tool.secondPoint
       );
-    };
-
-    // Suppress context menu for non-placing polygons when actively placing
-    // or when a rectangle is actively being placed
-    const openContextMenu = (id: ToolID, event: any) => {
-      if (isAnyRectanglePlacing()) {
-        return;
-      }
+      if (rectanglePlacing) return true;
       if (placingTool.id.value && id !== placingTool.id.value) {
         const placingToolData = activeToolStore.toolByID[placingTool.id.value];
-        if (placingToolData?.points?.length > 0) {
-          return;
-        }
+        if (placingToolData?.points?.length > 0) return true;
       }
-      baseOpenContextMenu(id, event);
+      return false;
+    };
+
+    const openContextMenu = (id: ToolID, event: any) => {
+      if (!shouldSuppressInteraction(id)) baseOpenContextMenu(id, event);
     };
 
     const currentTools = useCurrentTools(
       activeToolStore,
       viewAxis,
-      // only show this view's placing tool
-      computed(() => {
-        if (placingTool.id.value) return [placingTool.id.value];
-        return [];
-      })
+      computed(() => (placingTool.id.value ? [placingTool.id.value] : []))
     );
 
     const { onHover: baseOnHover, overlayInfo } = useHover(currentTools, slice);
 
-    // Suppress hover for non-placing polygons when actively placing (has points)
-    // or when a rectangle is actively being placed
     const onHover = (id: ToolID, event: any) => {
-      if (isAnyRectanglePlacing()) {
+      if (shouldSuppressInteraction(id)) {
         baseOnHover(id, { ...event, hovering: false });
         return;
       }
-      if (placingTool.id.value && id !== placingTool.id.value) {
-        const placingToolData = activeToolStore.toolByID[placingTool.id.value];
-        if (placingToolData?.points?.length > 0) {
-          baseOnHover(id, { ...event, hovering: false });
-          return;
-        }
-      }
       baseOnHover(id, event);
     };
 

src/vtk/PolygonWidget/behavior.ts

@@ -23,6 +23,11 @@ const DOUBLE_CLICK_SLIP_DISTANCE_MAX_SQUARED =
 export default function widgetBehavior(publicAPI: any, model: any) {
   model.classHierarchy.push('vtkPolygonWidgetBehavior');
 
+  const anotherWidgetHasFocus = () =>
+    model._widgetManager
+      .getWidgets()
+      .some((w: any) => w !== publicAPI && w.hasFocus());
+
   const setDragging = (isDragging: boolean) => {
     model._dragging = isDragging;
     publicAPI.invokeDraggingEvent({
@@ -246,12 +251,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     // So we can rely on getSelections() to be up to date now
     overUnselectedHandle = false;
 
-    // Don't emit hover events if another widget has focus (e.g., is placing)
-    const widgets = model._widgetManager.getWidgets();
-    const anotherWidgetHasFocus = widgets.some(
-      (w: any) => w !== publicAPI && w.hasFocus()
-    );
-    if (anotherWidgetHasFocus) {
+    if (anotherWidgetHasFocus()) {
       publicAPI.invokeHoverEvent({
         ...event,
         hovering: false,
@@ -431,12 +431,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       return macro.VOID;
     }
 
-    // If another widget has focus (e.g., is placing), don't show context menu
-    const widgets = model._widgetManager.getWidgets();
-    const anotherWidgetHasFocus = widgets.some(
-      (w: any) => w !== publicAPI && w.hasFocus()
-    );
-    if (anotherWidgetHasFocus) {
+    if (anotherWidgetHasFocus()) {
       return macro.VOID;
     }
 
@@ -480,6 +475,11 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     model.hasFocus = false;
     if (hadFocus) {
       model._widgetManager.releaseFocus();
+      // Deactivate all widgets so stale activeStates don't persist
+      // (user may right-click again without moving mouse)
+      model._widgetManager
+        .getWidgets()
+        .forEach((w: any) => w.deactivateAllHandles());
     }
     model._widgetManager.enablePicking();
   };

src/vtk/RulerWidget/behavior.ts

@@ -16,6 +16,11 @@ export function shouldIgnoreEvent(e: any) {
 export default function widgetBehavior(publicAPI: any, model: any) {
   model.classHierarchy.push('vtkRulerWidgetProp');
 
+  const anotherWidgetHasFocus = () =>
+    model._widgetManager
+      .getWidgets()
+      .some((w: any) => w !== publicAPI && w.hasFocus());
+
   model.interactionState = InteractionState.Select;
   let draggingState: any = null;
 
@@ -184,9 +189,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       return macro.EVENT_ABORT;
     }
 
-    // Don't emit hover events if another widget has focus (e.g., is placing)
-    const activeWidget = model._widgetManager.getActiveWidget();
-    if (activeWidget && activeWidget !== publicAPI) {
+    if (anotherWidgetHasFocus()) {
       publicAPI.invokeHoverEvent({
         ...eventData,
         hovering: false,
@@ -231,9 +234,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       return macro.VOID;
     }
 
-    // If another widget has focus (e.g., is placing), don't show context menu
-    const activeWidget = model._widgetManager.getActiveWidget();
-    if (activeWidget && activeWidget !== publicAPI) {
+    if (anotherWidgetHasFocus()) {
       return macro.VOID;
     }