Merge pull request #421 from Kitware/simplify-tool-code

Simplify tool code

src/components/MeasurementsToolList.vue

@@ -24,10 +24,8 @@ const { currentImageID, currentImageMetadata } = useCurrentImage();
 
 // Filter and add axis for specific annotation type
 const getTools = (toolStore: AnnotationToolStore<string>) => {
-  const byID = toolStore.toolByID;
-  return toolStore.toolIDs
-    .map((id) => byID[id])
-    .filter((tool) => !tool.placing && tool.imageID === currentImageID.value)
+  return toolStore.finishedTools
+    .filter((tool) => tool.imageID === currentImageID.value)
     .map((tool) => {
       const { axis } = frameOfReferenceToImageSliceAndAxis(
         tool.frameOfReference,

src/components/tools/polygon/PolygonSVG2D.vue

@@ -37,6 +37,7 @@ import {
   watch,
   inject,
 } from 'vue';
+import { Maybe } from '@/src/types';
 
 const POINT_RADIUS = ANNOTATION_TOOL_HANDLE_RADIUS;
 const FINISHABLE_POINT_RADIUS = POINT_RADIUS + 6;
@@ -53,7 +54,7 @@ export default defineComponent({
       required: true,
     },
     movePoint: {
-      type: Array as unknown as PropType<Vector3>,
+      type: Array as unknown as PropType<Maybe<Vector3>>,
     },
     placing: {
       type: Boolean,

src/components/tools/polygon/PolygonTool.vue

@@ -27,33 +27,29 @@ import {
   defineComponent,
   onUnmounted,
   PropType,
-  ref,
   toRefs,
   watch,
 } from 'vue';
 import { storeToRefs } from 'pinia';
-import { vec3 } from 'gl-matrix';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
 import { Tools } from '@/src/store/tools/types';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
-import type { Vector3 } from '@kitware/vtk.js/types';
 import { LPSAxisDir } from '@/src/types/lps';
-import { FrameOfReference } from '@/src/utils/frameOfReference';
 import { usePolygonStore } from '@/src/store/tools/polygons';
-import { PolygonID } from '@/src/types/polygon';
 import {
   useContextMenu,
   useCurrentTools,
   useHover,
+  usePlacingAnnotationTool,
 } 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 { useFrameOfReference } from '@/src/composables/useFrameOfReference';
 import PolygonWidget2D from './PolygonWidget2D.vue';
 
-type ToolID = PolygonID;
 const useActiveToolStore = usePolygonStore;
 const toolType = Tools.Polygon;
 
@@ -93,97 +89,51 @@ export default defineComponent({
     const isToolActive = computed(() => toolStore.currentTool === toolType);
     const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
-    const placingToolID = ref<ToolID | null>(null);
-
     // --- active tool management --- //
 
-    watch(
-      placingToolID,
-      (id, prevId) => {
-        if (prevId != null) {
-          activeToolStore.updateTool(prevId, { placing: false });
-        }
-        if (id != null) {
-          activeToolStore.updateTool(id, { placing: true });
-        }
-      },
-      { immediate: true }
+    const frameOfReference = useFrameOfReference(
+      viewDirection,
+      currentSlice,
+      currentImageMetadata
+    );
+
+    const placingTool = usePlacingAnnotationTool(
+      activeToolStore,
+      computed(() => {
+        if (!currentImageID.value) return {};
+        return {
+          imageID: currentImageID.value,
+          frameOfReference: frameOfReference.value,
+          slice: currentSlice.value,
+          label: activeLabel.value,
+          ...(activeLabel.value && activeToolStore.labels[activeLabel.value]),
+        };
+      })
     );
 
     watch(
       [isToolActive, currentImageID] as const,
       ([active, imageID]) => {
-        if (placingToolID.value != null) {
-          activeToolStore.removeTool(placingToolID.value);
-          placingToolID.value = null;
-        }
+        placingTool.remove();
         if (active && imageID) {
-          placingToolID.value = activeToolStore.addTool({
-            imageID,
-            placing: true,
-          });
-        }
-      },
-      { immediate: true }
-    );
-
-    watch(
-      [activeLabel, placingToolID],
-      ([label, placingTool]) => {
-        if (placingTool != null) {
-          activeToolStore.updateTool(placingTool, {
-            label,
-            ...(label && activeToolStore.labels[label]),
-          });
+          placingTool.add();
         }
       },
       { immediate: true }
     );
 
     onUnmounted(() => {
-      if (placingToolID.value != null) {
-        activeToolStore.removeTool(placingToolID.value);
-        placingToolID.value = null;
-      }
+      placingTool.remove();
     });
 
     const onToolPlaced = () => {
       if (currentImageID.value) {
-        placingToolID.value = activeToolStore.addTool({
-          imageID: currentImageID.value,
-          placing: true,
-        });
+        placingTool.commit();
+        placingTool.add();
       }
     };
 
-    // --- updating active tool frame --- //
-
-    const getCurrentFrameOfReference = (): FrameOfReference => {
-      const { lpsOrientation, indexToWorld } = currentImageMetadata.value;
-      const planeNormal = lpsOrientation[viewDirection.value] as Vector3;
-      const lpsIdx = lpsOrientation[viewAxis.value];
-      const planeOrigin: Vector3 = [0, 0, 0];
-      planeOrigin[lpsIdx] = currentSlice.value;
-      // convert index pt to world pt
-      vec3.transformMat4(planeOrigin, planeOrigin, indexToWorld);
-      return {
-        planeNormal,
-        planeOrigin,
-      };
-    };
-    // update active tool's frame + slice, since the
-    // active tool is not finalized.
-    watch(
-      [currentSlice, placingToolID] as const,
-      ([slice, toolID]) => {
-        if (!toolID) return;
-        activeToolStore.updateTool(toolID, {
-          frameOfReference: getCurrentFrameOfReference(),
-          slice,
-        });
-      },
-      { immediate: true }
-    );
+    // ---  //
 
     const { contextMenu, openContextMenu } = useContextMenu();
 
@@ -199,7 +149,7 @@ export default defineComponent({
 
     return {
       tools: currentTools,
-      placingToolID,
+      placingToolID: placingTool.id,
       onToolPlaced,
       contextMenu,
       openContextMenu,

src/components/tools/polygon/PolygonWidget2D.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import {
+  reactive,
   computed,
   defineComponent,
   onMounted,
@@ -26,6 +27,8 @@ import { PolygonID as ToolID } from '@/src/types/polygon';
 import vtkWidgetFactory, {
   vtkPolygonViewWidget as WidgetView,
 } from '@/src/vtk/PolygonWidget';
+import { Maybe } from '@/src/types';
+import { Vector3 } from '@kitware/vtk.js/types';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
@@ -153,17 +156,22 @@ export default defineComponent({
       widgetManager.value.renderWidgets();
     });
 
-    // when movePoint/mouse changes, get finishable manually as its not in store
-    const finishable = ref(false);
-    const movePoint = computed(() => tool.value?.movePoint);
-    watch([movePoint], () => {
-      finishable.value =
-        !!widget.value && widget.value.getWidgetState().getFinishable();
+    // --- //
+
+    const editState = reactive({
+      movePoint: null as Maybe<Vector3>,
+      finishable: false,
+    });
+
+    const widgetState = widgetFactory.getWidgetState();
+    onVTKEvent(widgetState, 'onModified', () => {
+      editState.movePoint = widgetState.getMoveHandle().getOrigin();
+      editState.finishable = widgetState.getFinishable();
     });
 
     return {
       tool,
-      finishable,
+      editState,
     };
   },
 });
@@ -175,8 +183,8 @@ export default defineComponent({
     :view-id="viewId"
     :points="tool.points"
     :color="tool.color"
-    :move-point="tool.movePoint"
+    :move-point="editState.movePoint"
     :placing="tool.placing"
-    :finishable="finishable"
+    :finishable="editState.finishable"
   />
 </template>