Merge pull request #589 from PaulHax/freehand

Freehand point dropping for Polygon Tool

src/components/tools/polygon/PolygonSVG2D.vue

@@ -9,6 +9,7 @@
       :stroke-width="strokeWidth"
       fill="transparent"
       :r="radius"
+      :visibility="index === 0 ? firstHandleVisibility : handleVisibility"
     />
     <polyline
       :points="linePoints"
@@ -24,14 +25,22 @@ import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
-import { PropType, defineComponent, toRefs, ref, watch, inject } from 'vue';
+import {
+  PropType,
+  defineComponent,
+  toRefs,
+  ref,
+  watch,
+  inject,
+  computed,
+} from 'vue';
 import { Maybe } from '@/src/types';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useResizeObserver } from '@vueuse/core';
 import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 
 const POINT_RADIUS = ANNOTATION_TOOL_HANDLE_RADIUS;
-const FINISHABLE_POINT_RADIUS = POINT_RADIUS + 6;
+const FINISHABLE_POINT_RADIUS = POINT_RADIUS;
 
 export default defineComponent({
   props: {
@@ -52,13 +61,32 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showHandles: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
-    const { points, movePoint, placing, finishable } = toRefs(props);
+    const { points, movePoint, placing, finishable, showHandles } =
+      toRefs(props);
 
     const view = inject(VtkViewContext);
     if (!view) throw new Error('No VtkView');
 
+    const finishPossible = computed(() => {
+      return points.value.length > 0 && placing.value && finishable.value;
+    });
+
+    const handleVisibility = computed(() => {
+      return showHandles.value ? 'visible' : 'hidden';
+    });
+    const firstHandleVisibility = computed(() => {
+      if (finishPossible.value) {
+        return 'visible';
+      }
+      return handleVisibility.value;
+    });
+
     type SVGPoint = { point: Vector2; radius: number };
     const handlePoints = ref<Array<SVGPoint>>([]);
     const linePoints = ref<string>('');
@@ -74,7 +102,7 @@ export default defineComponent({
       });
 
       // Indicate finishable
-      if (finishable.value && placing.value) {
+      if (finishPossible.value) {
         svgPoints[0].radius = FINISHABLE_POINT_RADIUS;
       }
 
@@ -117,6 +145,8 @@ export default defineComponent({
       devicePixelRatio,
       handlePoints,
       linePoints,
+      firstHandleVisibility,
+      handleVisibility,
     };
   },
 });

src/components/tools/polygon/PolygonWidget2D.vue

@@ -9,17 +9,18 @@ import {
   watchEffect,
   inject,
   onUnmounted,
+  ref,
 } from 'vue';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import { useImage } 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,
   useWidgetVisibility,
 } from '@/src/composables/annotationTool';
+import { getCSSCoordinatesFromEvent } from '@/src/utils/vtk-helpers';
 import { usePolygonStore as useStore } from '@/src/store/tools/polygons';
 import vtkWidgetFactory, {
   vtkPolygonViewWidget as WidgetView,
@@ -92,7 +93,27 @@ export default defineComponent({
       emit('placed');
     });
 
-    useHoverEvent(emit, widget);
+    const lastHoverEventData = ref<any>(null);
+    onVTKEvent(widget, 'onHoverEvent', (eventData: any) => {
+      lastHoverEventData.value = eventData;
+    });
+    const dragging = ref(false);
+    onVTKEvent(widget, 'onDraggingEvent', (eventData: any) => {
+      dragging.value = eventData.dragging;
+    });
+    const showHandles = computed(() => {
+      return lastHoverEventData.value?.hovering && !dragging.value;
+    });
+    watchEffect(() => {
+      if (!lastHoverEventData.value) return;
+      const displayXY = getCSSCoordinatesFromEvent(lastHoverEventData.value);
+      if (displayXY) {
+        emit('widgetHover', {
+          displayXY,
+          hovering: lastHoverEventData.value?.hovering && !dragging.value,
+        });
+      }
+    });
 
     // --- right click handling --- //
 
@@ -134,6 +155,7 @@ export default defineComponent({
       slice,
       tool,
       editState,
+      showHandles,
     };
   },
 });
@@ -148,5 +170,6 @@ export default defineComponent({
     :move-point="editState.movePoint"
     :placing="tool.placing"
     :finishable="editState.finishable"
+    :show-handles="showHandles"
   />
 </template>

src/utils/frameOfReference.ts

@@ -76,3 +76,15 @@ export function frameOfReferenceToImageSliceAndAxis(
 
   return { axis, slice };
 }
+
+export function getSmallestSpacing(
+  frame: FrameOfReference,
+  metadata: ImageMetadata
+): number {
+  const sliceAxis = frameOfReferenceToImageSliceAndAxis(frame, metadata);
+  if (!sliceAxis) return Math.min(...metadata.spacing); // off orthogonal
+  const axisIndex = metadata.lpsOrientation[sliceAxis.axis];
+  const spacing = [...metadata.spacing];
+  spacing.splice(axisIndex, 1);
+  return Math.min(...spacing);
+}