Fix polygon interaction bugs

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

@@ -92,6 +92,7 @@ import { Tools } from '@/src/store/tools/types';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import { LPSAxisDir } from '@/src/types/lps';
 import { usePolygonStore } from '@/src/store/tools/polygons';
+import { useRectangleStore } from '@/src/store/tools/rectangles';
 import {
   useContextMenu,
   useCurrentTools,
@@ -235,19 +236,41 @@ export default defineComponent({
 
     // ---  //
 
-    const { contextMenu, openContextMenu } = useContextMenu();
+    const { contextMenu, openContextMenu: baseOpenContextMenu } =
+      useContextMenu();
+
+    const rectangleStore = useRectangleStore();
+    const shouldSuppressInteraction = (id: ToolID) => {
+      const rectanglePlacing = rectangleStore.tools.some(
+        (tool) => tool.placing && tool.firstPoint && tool.secondPoint
+      );
+      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 true;
+      }
+      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, overlayInfo } = useHover(currentTools, slice);
+    const { onHover: baseOnHover, overlayInfo } = useHover(currentTools, slice);
+
+    const onHover = (id: ToolID, event: any) => {
+      if (shouldSuppressInteraction(id)) {
+        baseOnHover(id, { ...event, hovering: false });
+        return;
+      }
+      baseOnHover(id, event);
+    };
 
     const mergePossible = computed(
       () => activeToolStore.mergeableTools.length >= 1

src/components/tools/polygon/PolygonWidget2D.vue

@@ -101,8 +101,17 @@ export default defineComponent({
     onVTKEvent(widget, 'onDraggingEvent', (eventData: any) => {
       dragging.value = eventData.dragging;
     });
+    const anotherToolPlacing = computed(() =>
+      toolStore.tools.some(
+        (t) => t.placing && t.id !== toolId.value && t.points.length > 0
+      )
+    );
     const showHandles = computed(() => {
-      return lastHoverEventData.value?.hovering && !dragging.value;
+      return (
+        lastHoverEventData.value?.hovering &&
+        !dragging.value &&
+        !anotherToolPlacing.value
+      );
     });
     watchEffect(() => {
       if (!lastHoverEventData.value) return;

src/components/tools/rectangle/RectangleTool.vue

@@ -28,6 +28,7 @@ import { Tools } from '@/src/store/tools/types';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import { LPSAxisDir } from '@/src/types/lps';
 import { useRectangleStore } from '@/src/store/tools/rectangles';
+import { usePolygonStore } from '@/src/store/tools/polygons';
 import {
   useCurrentTools,
   useContextMenu,
@@ -39,6 +40,7 @@ import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
 import { Maybe } from '@/src/types';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { ToolID } from '@/src/types/annotation-tool';
 import { watchImmediate } from '@vueuse/core';
 import RectangleWidget2D from './RectangleWidget2D.vue';
 
@@ -121,7 +123,8 @@ export default defineComponent({
 
     // --- //
 
-    const { contextMenu, openContextMenu } = useContextMenu();
+    const { contextMenu, openContextMenu: baseOpenContextMenu } =
+      useContextMenu();
 
     const currentTools = useCurrentTools(
       activeToolStore,
@@ -133,7 +136,31 @@ export default defineComponent({
       })
     );
 
-    const { onHover, overlayInfo } = useHover(currentTools, slice);
+    const { onHover: baseOnHover, overlayInfo } = useHover(currentTools, slice);
+
+    // Check if any polygon is actively being placed (has points)
+    const polygonStore = usePolygonStore();
+    const isAnyPolygonPlacing = () => {
+      return polygonStore.tools.some(
+        (tool) => tool.placing && tool.points.length > 0
+      );
+    };
+
+    // Suppress hover/context menu when a polygon is actively being placed
+    const onHover = (id: ToolID, event: any) => {
+      if (isAnyPolygonPlacing()) {
+        baseOnHover(id, { ...event, hovering: false });
+        return;
+      }
+      baseOnHover(id, event);
+    };
+
+    const openContextMenu = (id: ToolID, event: any) => {
+      if (isAnyPolygonPlacing()) {
+        return;
+      }
+      baseOpenContextMenu(id, event);
+    };
 
     return {
       tools: currentTools,

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({
@@ -192,8 +197,6 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     if (model.widgetState.getPlacing() && manipulator) {
       // Dropping first point?
       if (model.widgetState.getHandles().length === 0) {
-        // update variables used by updateActiveStateHandle
-        model.activeState = model.widgetState.getMoveHandle();
         model._widgetManager.grabFocus(publicAPI);
       }
       updateActiveStateHandle(event);
@@ -248,8 +251,12 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     // So we can rely on getSelections() to be up to date now
     overUnselectedHandle = false;
 
-    if (model.hasFocus) {
-      model._widgetManager.disablePicking();
+    if (anotherWidgetHasFocus()) {
+      publicAPI.invokeHoverEvent({
+        ...event,
+        hovering: false,
+      });
+      return macro.VOID;
     }
 
     publicAPI.invokeHoverEvent({
@@ -336,7 +343,6 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       (model.hasFocus && !model.activeState) ||
       (model.activeState && !model.activeState.getActive())
     ) {
-      // update if mouse hovered over handle/activeState for next onDown
       model._widgetManager.enablePicking();
       model._interactor.render();
     }
@@ -415,13 +421,18 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   };
 
   publicAPI.handleRightButtonPress = (eventData: any) => {
+    // When placing, handle right-click regardless of what widget manager picked
+    if (model.widgetState.getPlacing()) {
+      removeLastHandle();
+      return macro.EVENT_ABORT;
+    }
+
     if (!model.activeState) {
       return macro.VOID;
     }
 
-    if (model.widgetState.getPlacing()) {
-      removeLastHandle();
-      return macro.EVENT_ABORT;
+    if (anotherWidgetHasFocus()) {
+      return macro.VOID;
     }
 
     const eventWithWidgetAction = {
@@ -451,7 +462,8 @@ export default function widgetBehavior(publicAPI: any, model: any) {
 
   // Called after we are finished/placed.
   publicAPI.loseFocus = () => {
-    if (model.hasFocus) {
+    const hadFocus = model.hasFocus;
+    if (hadFocus) {
       model._interactor.cancelAnimation(publicAPI);
       publicAPI.invokeEndInteractionEvent();
     }
@@ -461,6 +473,14 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     model.widgetState.getMoveHandle().setOrigin(null);
     model.activeState = null;
     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,6 +189,14 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       return macro.EVENT_ABORT;
     }
 
+    if (anotherWidgetHasFocus()) {
+      publicAPI.invokeHoverEvent({
+        ...eventData,
+        hovering: false,
+      });
+      return macro.VOID;
+    }
+
     publicAPI.invokeHoverEvent({
       ...eventData,
       hovering: !!model.activeState || checkOverFill(),
@@ -220,6 +233,11 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     ) {
       return macro.VOID;
     }
+
+    if (anotherWidgetHasFocus()) {
+      return macro.VOID;
+    }
+
     publicAPI.invokeRightClickEvent(eventData);
     return macro.EVENT_ABORT;
   };