From bf0165e5f93db23dd76660e679f07135714c770f Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Fri, 8 Sep 2023 18:50:54 -0400
Subject: [PATCH] feat(ruler): separate out placing ruler

A dedicated placing tool avoids mixing placing logic with regular tool
logic.
---
 .../tools/ruler/PlacingRulerWidget2D.vue      | 163 ++++++++++++++++++
 src/components/tools/ruler/RulerSVG2D.vue     |   5 +-
 src/components/tools/ruler/RulerTool.vue      | 141 ++++-----------
 src/components/tools/ruler/RulerWidget2D.vue  | 106 ++++--------
 src/components/tools/ruler/common.ts          |  38 ++++
 src/composables/annotationTool.ts             |   3 +-
 src/composables/useCurrentFrameOfReference.ts |  32 ++++
 src/composables/useViewWidget.ts              |  25 +++
 src/vtk/RulerWidget/behavior.ts               |   5 +
 src/vtk/RulerWidget/index.d.ts                |   7 +-
 src/vtk/RulerWidget/index.js                  |   8 +-
 src/vtk/RulerWidget/standaloneState.js        |  33 ++++
 .../RulerWidget/{state.ts => storeState.ts}   |   7 +-
 src/vtk/ToolWidgetUtils/common.ts             |   2 +
 src/vtk/ToolWidgetUtils/pointState.js         |  23 +--
 src/vtk/ToolWidgetUtils/utils.ts              |  24 +++
 16 files changed, 405 insertions(+), 217 deletions(-)
 create mode 100644 src/components/tools/ruler/PlacingRulerWidget2D.vue
 create mode 100644 src/components/tools/ruler/common.ts
 create mode 100644 src/composables/useCurrentFrameOfReference.ts
 create mode 100644 src/composables/useViewWidget.ts
 create mode 100644 src/vtk/RulerWidget/standaloneState.js
 rename src/vtk/RulerWidget/{state.ts => storeState.ts} (90%)
 create mode 100644 src/vtk/ToolWidgetUtils/common.ts

diff --git a/src/components/tools/ruler/PlacingRulerWidget2D.vue b/src/components/tools/ruler/PlacingRulerWidget2D.vue
new file mode 100644
index 000000000..91573abaf
--- /dev/null
+++ b/src/components/tools/ruler/PlacingRulerWidget2D.vue
@@ -0,0 +1,163 @@
+<script lang="ts">
+import vtkRulerWidget, {
+  InteractionState,
+  vtkRulerViewWidget,
+  vtkRulerWidgetState,
+} from '@/src/vtk/RulerWidget';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  PropType,
+  toRefs,
+  watch,
+  watchEffect,
+} from 'vue';
+import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
+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 RulerSVG2D from '@/src/components/tools/ruler/RulerSVG2D.vue';
+import createStandaloneState from '@/src/vtk/RulerWidget/standaloneState';
+import {
+  RulerInitState,
+  useSyncedRulerState,
+} from '@/src/components/tools/ruler/common';
+import { useViewWidget } from '@/src/composables/useViewWidget';
+
+export default defineComponent({
+  name: 'PlacingRulerWidget2D',
+  emits: ['placed'],
+  props: {
+    widgetManager: {
+      type: Object as PropType<vtkWidgetManager>,
+      required: true,
+    },
+    viewId: {
+      type: String,
+      required: true,
+    },
+    viewDirection: {
+      type: String as PropType<LPSAxisDir>,
+      required: true,
+    },
+    currentSlice: {
+      type: Number,
+      required: true,
+    },
+    color: String,
+  },
+  components: {
+    RulerSVG2D,
+  },
+  setup(props, { emit }) {
+    const { widgetManager, viewDirection, currentSlice } = toRefs(props);
+
+    const { currentImageID, currentImageMetadata } = useCurrentImage();
+
+    const widgetState = createStandaloneState() as vtkRulerWidgetState;
+    const widgetFactory = vtkRulerWidget.newInstance({
+      widgetState,
+    });
+
+    const syncedState = useSyncedRulerState(widgetFactory);
+    const widget = useViewWidget<vtkRulerViewWidget>(
+      widgetFactory,
+      widgetManager
+    );
+
+    onMounted(() => {
+      widget.value!.setInteractionState(InteractionState.PlacingFirst);
+    });
+
+    onUnmounted(() => {
+      widgetFactory.delete();
+    });
+
+    // --- reset on slice/image changes --- //
+
+    watch([currentSlice, currentImageID, widget], () => {
+      if (widget.value) {
+        widget.value.resetInteractions();
+        widget.value.setInteractionState(InteractionState.PlacingFirst);
+      }
+    });
+
+    // --- placed event --- //
+
+    onVTKEvent(widget, 'onPlacedEvent', () => {
+      const { firstPoint, secondPoint } = syncedState;
+      if (!firstPoint.origin || !secondPoint.origin)
+        throw new Error('Incomplete placing widget state');
+      const initState: RulerInitState = {
+        firstPoint: firstPoint.origin,
+        secondPoint: secondPoint.origin,
+      };
+      emit('placed', initState);
+
+      widget.value!.resetState();
+      widget.value!.setInteractionState(InteractionState.PlacingFirst);
+    });
+
+    // --- manipulator --- //
+
+    const manipulator = vtkPlaneManipulator.newInstance();
+
+    onMounted(() => {
+      if (!widget.value) {
+        return;
+      }
+      widget.value.setManipulator(manipulator);
+    });
+
+    watchEffect(() => {
+      updatePlaneManipulatorFor2DView(
+        manipulator,
+        viewDirection.value,
+        currentSlice.value,
+        currentImageMetadata.value
+      );
+    });
+
+    // --- visibility --- //
+
+    onMounted(() => {
+      if (!widget.value) {
+        return;
+      }
+      // hide handle visibility, but not picking visibility
+      widget.value.setHandleVisibility(false);
+      widgetManager.value.renderWidgets();
+    });
+
+    // --- //
+
+    return {
+      firstPoint: computed(() => {
+        return syncedState.firstPoint.visible
+          ? syncedState.firstPoint.origin
+          : null;
+      }),
+      secondPoint: computed(() => {
+        return syncedState.secondPoint.visible
+          ? syncedState.secondPoint.origin
+          : null;
+      }),
+      length: computed(() => syncedState.length),
+    };
+  },
+});
+</script>
+
+<template>
+  <RulerSVG2D
+    :view-id="viewId"
+    :point1="firstPoint"
+    :point2="secondPoint"
+    :length="length"
+    :color="color"
+  />
+</template>
diff --git a/src/components/tools/ruler/RulerSVG2D.vue b/src/components/tools/ruler/RulerSVG2D.vue
index a2bea6bff..b12bd30b9 100644
--- a/src/components/tools/ruler/RulerSVG2D.vue
+++ b/src/components/tools/ruler/RulerSVG2D.vue
@@ -65,6 +65,7 @@ import {
   watch,
   inject,
 } from 'vue';
+import { Maybe } from '@/src/types';
 
 type SVGPoint = {
   x: number;
@@ -73,8 +74,8 @@ type SVGPoint = {
 
 export default defineComponent({
   props: {
-    point1: Array as PropType<Array<number>>,
-    point2: Array as PropType<Array<number>>,
+    point1: Array as PropType<Maybe<Array<number>>>,
+    point2: Array as PropType<Maybe<Array<number>>>,
     color: String,
     length: Number,
     viewId: {
diff --git a/src/components/tools/ruler/RulerTool.vue b/src/components/tools/ruler/RulerTool.vue
index e3359dd9c..b3d1e8332 100644
--- a/src/components/tools/ruler/RulerTool.vue
+++ b/src/components/tools/ruler/RulerTool.vue
@@ -5,12 +5,19 @@
         v-for="ruler in rulers"
         :key="ruler.id"
         :ruler-id="ruler.id"
-        :is-placing="ruler.id === placingRulerID"
         :current-slice="currentSlice"
         :view-id="viewId"
         :view-direction="viewDirection"
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(ruler.id, $event)"
+      />
+      <placing-ruler-widget-2D
+        v-if="isToolActive"
+        :current-slice="currentSlice"
+        :color="activeLabelColor"
+        :view-id="viewId"
+        :view-direction="viewDirection"
+        :widget-manager="widgetManager"
         @placed="onRulerPlaced"
       />
     </svg>
@@ -19,32 +26,24 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onUnmounted,
-  PropType,
-  ref,
-  toRefs,
-  watch,
-} from 'vue';
+import { computed, defineComponent, PropType, toRefs } from 'vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
 import { Tools } from '@/src/store/tools/types';
 import { useRulerStore } from '@/src/store/tools/rulers';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import RulerWidget2D from '@/src/components/tools/ruler/RulerWidget2D.vue';
+import PlacingRulerWidget2D from '@/src/components/tools/ruler/PlacingRulerWidget2D.vue';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
-import type { Vector3 } from '@kitware/vtk.js/types';
 import { LPSAxisDir } from '@/src/types/lps';
 import { storeToRefs } from 'pinia';
-import { FrameOfReference } from '@/src/utils/frameOfReference';
-import { vec3 } from 'gl-matrix';
 import {
   useContextMenu,
   useCurrentTools,
 } from '@/src/composables/annotationTool';
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
+import { RulerInitState } from '@/src/components/tools/ruler/common';
+import { useCurrentFrameOfReference } from '@/src/composables/useCurrentFrameOfReference';
 
 export default defineComponent({
   name: 'RulerTool',
@@ -68,6 +67,7 @@ export default defineComponent({
   },
   components: {
     RulerWidget2D,
+    PlacingRulerWidget2D,
     AnnotationContextMenu,
   },
   setup(props) {
@@ -76,105 +76,31 @@ export default defineComponent({
     const rulerStore = useRulerStore();
     const { activeLabel } = storeToRefs(rulerStore);
 
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const { currentImageID } = useCurrentImage();
     const isToolActive = computed(() => toolStore.currentTool === Tools.Ruler);
     const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
-    const placingRulerID = ref<string | null>(null);
-
-    // --- active ruler management --- //
-
-    watch(
-      placingRulerID,
-      (id, prevId) => {
-        if (prevId != null) {
-          rulerStore.updateRuler(prevId, { placing: false });
-        }
-        if (id != null) {
-          rulerStore.updateRuler(id, { placing: true });
-        }
-      },
-      { immediate: true }
-    );
-
-    watch(
-      [isToolActive, currentImageID] as const,
-      ([active, imageID]) => {
-        if (placingRulerID.value != null) {
-          rulerStore.removeRuler(placingRulerID.value);
-          placingRulerID.value = null;
-        }
-        if (active && imageID) {
-          placingRulerID.value = rulerStore.addRuler({
-            imageID,
-            placing: true,
-          });
-        }
-      },
-      { immediate: true }
+    const currentFrameOfReference = useCurrentFrameOfReference(
+      viewDirection,
+      currentSlice
     );
 
-    watch(
-      [activeLabel, placingRulerID],
-      ([label, placingTool]) => {
-        if (placingTool != null) {
-          rulerStore.updateRuler(placingTool, {
-            label,
-            ...(label && rulerStore.labels[label]),
-          });
-        }
-      },
-      { immediate: true }
-    );
-
-    onUnmounted(() => {
-      if (placingRulerID.value != null) {
-        rulerStore.removeRuler(placingRulerID.value);
-        placingRulerID.value = null;
-      }
-    });
-
-    const onRulerPlaced = () => {
-      if (currentImageID.value) {
-        placingRulerID.value = rulerStore.addRuler({
-          imageID: currentImageID.value,
-          placing: true,
-        });
-      }
-    };
-
-    // --- updating active ruler frame --- //
-
-    // TODO useCurrentFrameOfReference(viewDirection)
-    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,
-      };
+    const onRulerPlaced = (initState: RulerInitState) => {
+      if (!currentImageID.value) return;
+      rulerStore.addRuler({
+        imageID: currentImageID.value,
+        frameOfReference: currentFrameOfReference.value,
+        slice: currentSlice.value,
+        label: activeLabel.value,
+        color: activeLabel.value
+          ? rulerStore.labels[activeLabel.value].color
+          : undefined,
+        firstPoint: initState.firstPoint,
+        secondPoint: initState.secondPoint,
+      });
     };
 
-    // update active ruler's frame + slice, since the
-    // active ruler is not finalized.
-    watch(
-      [currentSlice, placingRulerID] as const,
-      ([slice, rulerID]) => {
-        if (!rulerID) return;
-        rulerStore.updateRuler(rulerID, {
-          frameOfReference: getCurrentFrameOfReference(),
-          slice,
-        });
-      },
-      { immediate: true }
-    );
+    // --- right-click menu --- //
 
     const { contextMenu, openContextMenu } = useContextMenu();
 
@@ -192,7 +118,10 @@ export default defineComponent({
 
     return {
       rulers: currentRulers,
-      placingRulerID,
+      isToolActive,
+      activeLabelColor: computed(() => {
+        return activeLabel.value && rulerStore.labels[activeLabel.value].color;
+      }),
       onRulerPlaced,
       contextMenu,
       openContextMenu,
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index 0cb6a8d3c..fedbf5af5 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -1,8 +1,7 @@
 <script lang="ts">
 import vtkRulerWidget, {
-  InteractionState,
   vtkRulerViewWidget,
-  vtkRulerWidgetPointState,
+  vtkRulerWidgetState,
 } from '@/src/vtk/RulerWidget';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import {
@@ -11,8 +10,6 @@ import {
   onMounted,
   onUnmounted,
   PropType,
-  Ref,
-  ref,
   toRefs,
   watch,
   watchEffect,
@@ -22,14 +19,16 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { LPSAxisDir } from '@/src/types/lps';
 import { useRulerStore } from '@/src/store/tools/rulers';
-import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import RulerSVG2D from '@/src/components/tools/ruler/RulerSVG2D.vue';
-import { watchOnce } from '@vueuse/core';
 import { useRightClickContextMenu } from '@/src/composables/annotationTool';
+import createRulerWidgetState from '@/src/vtk/RulerWidget/storeState';
+import { useViewStore } from '@/src/store/views';
+import { useSyncedRulerState } from '@/src/components/tools/ruler/common';
+import { useViewWidget } from '@/src/composables/useViewWidget';
 
 export default defineComponent({
   name: 'RulerWidget2D',
-  emits: ['placed', 'contextmenu'],
+  emits: ['contextmenu'],
   props: {
     rulerId: {
       type: String,
@@ -51,70 +50,40 @@ export default defineComponent({
       type: Number,
       required: true,
     },
-    isPlacing: {
-      type: Boolean,
-      default: false,
-    },
   },
   components: {
     RulerSVG2D,
   },
   setup(props, { emit }) {
-    const { rulerId, widgetManager, viewDirection, currentSlice, isPlacing } =
+    const { rulerId, widgetManager, viewDirection, currentSlice, viewId } =
       toRefs(props);
 
     const rulerStore = useRulerStore();
     const ruler = computed(() => rulerStore.rulerByID[rulerId.value]);
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
-    const widgetFactory = vtkRulerWidget.newInstance({
+    const widgetState = createRulerWidgetState({
       id: rulerId.value,
       store: rulerStore,
-      isPlaced: !isPlacing.value,
+    }) as vtkRulerWidgetState;
+    const widgetFactory = vtkRulerWidget.newInstance({
+      widgetState,
     });
-    const widget = ref<vtkRulerViewWidget | null>(null);
+
+    const syncedState = useSyncedRulerState(widgetFactory);
+    const widget = useViewWidget<vtkRulerViewWidget>(
+      widgetFactory,
+      widgetManager
+    );
 
     onMounted(() => {
-      widget.value = widgetManager.value.addWidget(
-        widgetFactory
-      ) as vtkRulerViewWidget;
+      viewProxy.value?.renderLater();
     });
 
     onUnmounted(() => {
-      if (!widget.value) {
-        return;
-      }
-      widgetManager.value.removeWidget(widget.value);
-      widget.value.delete();
       widgetFactory.delete();
     });
 
-    watch(
-      [isPlacing, widget],
-      ([placing, widget_]) => {
-        if (placing && widget_) {
-          widget_.setInteractionState(InteractionState.PlacingFirst);
-        }
-      },
-      { immediate: true }
-    );
-
-    // --- reset on slice/image changes --- //
-
-    watch([currentSlice, currentImageID, widget], () => {
-      const isPlaced = widget.value?.getWidgetState().getIsPlaced();
-      if (widget.value && !isPlaced) {
-        widget.value.resetInteractions();
-        widget.value.setInteractionState(InteractionState.PlacingFirst);
-      }
-    });
-
-    // --- placed event --- //
-
-    onVTKEvent(widget, 'onPlacedEvent', () => {
-      emit('placed');
-    });
-
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);
@@ -130,6 +99,8 @@ export default defineComponent({
       widget.value.setManipulator(manipulator);
     });
 
+    const { currentImageMetadata } = useCurrentImage();
+
     watchEffect(() => {
       updatePlaneManipulatorFor2DView(
         manipulator,
@@ -160,40 +131,21 @@ export default defineComponent({
       widgetManager.value.renderWidgets();
     });
 
-    // --- handle pick visibility --- //
-
-    const usePointVisibility = (
-      pointState: Ref<vtkRulerWidgetPointState | undefined>
-    ) => {
-      const visible = ref(false);
-      const updateVisibility = () => {
-        if (!pointState.value) return;
-        visible.value = pointState.value.getVisible();
-      };
-
-      onVTKEvent(pointState, 'onModified', () => updateVisibility());
-
-      watchOnce(pointState, () => updateVisibility());
-
-      return visible;
-    };
-
-    const firstPointVisible = usePointVisibility(
-      computed(() => widget.value?.getWidgetState().getFirstPoint())
-    );
-    const secondPointVisible = usePointVisibility(
-      computed(() => widget.value?.getWidgetState().getSecondPoint())
-    );
+    // --- //
 
     return {
       ruler,
       firstPoint: computed(() => {
-        return firstPointVisible.value ? ruler.value.firstPoint : undefined;
+        return syncedState.firstPoint.visible
+          ? syncedState.firstPoint.origin
+          : null;
       }),
       secondPoint: computed(() => {
-        return secondPointVisible.value ? ruler.value.secondPoint : undefined;
+        return syncedState.secondPoint.visible
+          ? syncedState.secondPoint.origin
+          : null;
       }),
-      length: computed(() => rulerStore.lengthByID[ruler.value.id]),
+      length: computed(() => syncedState.length),
     };
   },
 });
diff --git a/src/components/tools/ruler/common.ts b/src/components/tools/ruler/common.ts
new file mode 100644
index 000000000..decf9f481
--- /dev/null
+++ b/src/components/tools/ruler/common.ts
@@ -0,0 +1,38 @@
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { Maybe } from '@/src/types';
+import vtkRulerWidget, { vtkRulerWidgetState } from '@/src/vtk/RulerWidget';
+import { Vector3 } from '@kitware/vtk.js/types';
+import { reactive } from 'vue';
+
+export interface RulerInitState {
+  firstPoint: Vector3;
+  secondPoint: Vector3;
+}
+
+export function useSyncedRulerState(widgetFactory: vtkRulerWidget) {
+  const widgetState = widgetFactory.getWidgetState() as vtkRulerWidgetState;
+  const syncedState = reactive({
+    firstPoint: {
+      visible: false,
+      origin: null as Maybe<Vector3>,
+    },
+    secondPoint: {
+      visible: false,
+      origin: null as Maybe<Vector3>,
+    },
+    length: 0,
+  });
+
+  const syncState = () => {
+    syncedState.firstPoint.visible = widgetState.getFirstPoint().getVisible();
+    syncedState.firstPoint.origin = widgetState.getFirstPoint().getOrigin();
+    syncedState.secondPoint.visible = widgetState.getSecondPoint().getVisible();
+    syncedState.secondPoint.origin = widgetState.getSecondPoint().getOrigin();
+    syncedState.length = widgetFactory.getLength();
+  };
+
+  onVTKEvent(widgetState, 'onModified', () => syncState());
+  syncState();
+
+  return syncedState;
+}
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 4eb3011e6..27e790c38 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -3,6 +3,7 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
 import { vtkAnnotationToolWidget } from '@/src/vtk/ToolWidgetUtils/utils';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { Maybe } from '@/src/types';
 import { LPSAxis } from '../types/lps';
 import { AnnotationTool, ContextMenuEvent } from '../types/annotation-tool';
 import { AnnotationToolStore } from '../store/tools/useAnnotationTool';
@@ -66,7 +67,7 @@ export const useContextMenu = <ToolID extends string>() => {
 
 export const useRightClickContextMenu = (
   emit: (event: 'contextmenu', ...args: any[]) => void,
-  widget: Ref<vtkAnnotationToolWidget | null>
+  widget: Ref<Maybe<vtkAnnotationToolWidget>>
 ) => {
   onVTKEvent(widget, 'onRightClickEvent', (eventData) => {
     const displayXY = getCSSCoordinatesFromEvent(eventData);
diff --git a/src/composables/useCurrentFrameOfReference.ts b/src/composables/useCurrentFrameOfReference.ts
new file mode 100644
index 000000000..84106d66d
--- /dev/null
+++ b/src/composables/useCurrentFrameOfReference.ts
@@ -0,0 +1,32 @@
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { LPSAxisDir } from '@/src/types/lps';
+import { FrameOfReference } from '@/src/utils/frameOfReference';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import { Vector3 } from '@kitware/vtk.js/types';
+import { vec3 } from 'gl-matrix';
+import { computed, unref } from 'vue';
+import type { ComputedRef, MaybeRef, Ref } from 'vue';
+
+export function useCurrentFrameOfReference(
+  viewDirection: MaybeRef<LPSAxisDir>,
+  currentSlice: Ref<number>
+): ComputedRef<FrameOfReference> {
+  const viewAxis = computed(() => getLPSAxisFromDir(unref(viewDirection)));
+  const { currentImageMetadata } = useCurrentImage();
+
+  return computed(() => {
+    const { lpsOrientation, indexToWorld } = currentImageMetadata.value;
+    const planeNormal = lpsOrientation[unref(viewDirection)] 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,
+    };
+  });
+}
diff --git a/src/composables/useViewWidget.ts b/src/composables/useViewWidget.ts
new file mode 100644
index 000000000..eb24b1fe7
--- /dev/null
+++ b/src/composables/useViewWidget.ts
@@ -0,0 +1,25 @@
+import { Maybe } from '@/src/types';
+import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
+import vtkAbstractWidgetFactory from '@kitware/vtk.js/Widgets/Core/AbstractWidgetFactory';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import { onMounted, onUnmounted, ref, unref } from 'vue';
+import type { Ref, MaybeRef, UnwrapRef } from 'vue';
+
+export function useViewWidget<T extends vtkAbstractWidget>(
+  factory: vtkAbstractWidgetFactory,
+  widgetManager: MaybeRef<vtkWidgetManager>
+) {
+  const widget = ref<Maybe<T>>(null);
+
+  onMounted(() => {
+    widget.value = unref(widgetManager).addWidget(factory) as UnwrapRef<T>;
+  });
+
+  onUnmounted(() => {
+    if (!widget.value) return;
+    unref(widgetManager).removeWidget(widget.value);
+    widget.value.delete();
+  });
+
+  return widget as Ref<Maybe<T>>;
+}
diff --git a/src/vtk/RulerWidget/behavior.ts b/src/vtk/RulerWidget/behavior.ts
index 029653142..1d2d14efb 100644
--- a/src/vtk/RulerWidget/behavior.ts
+++ b/src/vtk/RulerWidget/behavior.ts
@@ -55,6 +55,11 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     model._interactor.cancelAnimation(publicAPI, true);
   };
 
+  publicAPI.resetState = () => {
+    model.widgetState.getFirstPoint().setOrigin(null);
+    model.widgetState.getSecondPoint().setOrigin(null);
+  };
+
   /**
    * Places or drags a point.
    */
diff --git a/src/vtk/RulerWidget/index.d.ts b/src/vtk/RulerWidget/index.d.ts
index 3b058e3d4..ebefcc89a 100644
--- a/src/vtk/RulerWidget/index.d.ts
+++ b/src/vtk/RulerWidget/index.d.ts
@@ -6,11 +6,13 @@ import { InteractionState } from './behavior';
 import { useRulerStore } from '@/src/store/tools/rulers';
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
 import { vtkAnnotationToolWidget } from '../ToolWidgetUtils/utils';
+import { Nullable, Vector3 } from '@kitware/vtk.js/types';
 
 export { InteractionState } from './behavior';
 
 export interface vtkRulerWidgetPointState extends vtkWidgetState {
   getVisible(): boolean;
+  getOrigin(): Nullable<Vector3>;
 }
 
 export interface vtkRulerWidgetState extends vtkWidgetState {
@@ -24,12 +26,11 @@ export interface vtkRulerViewWidget extends vtkAnnotationToolWidget {
   setInteractionState(state: InteractionState): boolean;
   getInteractionState(): InteractionState;
   getWidgetState(): vtkRulerWidgetState;
+  resetState(): void;
 }
 
 export interface IRulerWidgetInitialValues {
-  id: string;
-  store: ReturnType<typeof useRulerStore>;
-  isPlaced: boolean;
+  widgetState?: vtkRulerWidgetState;
 }
 
 export interface vtkRulerWidget extends vtkAbstractWidgetFactory {
diff --git a/src/vtk/RulerWidget/index.js b/src/vtk/RulerWidget/index.js
index 1c7179c3a..b2a7896b4 100644
--- a/src/vtk/RulerWidget/index.js
+++ b/src/vtk/RulerWidget/index.js
@@ -4,8 +4,10 @@ import vtkPlanePointManipulator from '@kitware/vtk.js/Widgets/Manipulators/Plane
 import vtkSphereHandleRepresentation from '@kitware/vtk.js/Widgets/Representations/SphereHandleRepresentation';
 import { distance2BetweenPoints } from '@kitware/vtk.js/Common/Core/Math';
 
+import { POINTS_LABEL } from '@/src/vtk/ToolWidgetUtils/common';
+
 import widgetBehavior from './behavior';
-import stateGenerator, { PointsLabel } from './state';
+import stateGenerator from './standaloneState';
 
 export { InteractionState } from './behavior';
 
@@ -21,7 +23,7 @@ function vtkRulerWidget(publicAPI, model) {
   publicAPI.getRepresentationsForViewType = () => [
     {
       builder: vtkSphereHandleRepresentation,
-      labels: [PointsLabel],
+      labels: [POINTS_LABEL],
       initialValues: {
         scaleInPixels: true,
       },
@@ -51,9 +53,9 @@ export function extend(publicAPI, model, initialValues = {}) {
   Object.assign(model, DEFAULT_VALUES, initialValues);
 
   vtkAbstractWidgetFactory.extend(publicAPI, model, {
-    ...initialValues,
     behavior: widgetBehavior,
     widgetState: stateGenerator(initialValues),
+    ...initialValues,
   });
   macro.get(publicAPI, model, ['manipulator']);
 
diff --git a/src/vtk/RulerWidget/standaloneState.js b/src/vtk/RulerWidget/standaloneState.js
new file mode 100644
index 000000000..da986d6eb
--- /dev/null
+++ b/src/vtk/RulerWidget/standaloneState.js
@@ -0,0 +1,33 @@
+import vtkStateBuilder from '@kitware/vtk.js/Widgets/Core/StateBuilder';
+import {
+  HANDLE_PIXEL_SIZE,
+  POINTS_LABEL,
+} from '@/src/vtk/ToolWidgetUtils/common';
+
+export default function createState() {
+  return vtkStateBuilder
+    .createBuilder()
+    .addStateFromMixin({
+      name: 'firstPoint',
+      labels: [POINTS_LABEL],
+      mixins: ['visible', 'origin', 'scale1'],
+      initialValues: {
+        visible: false,
+        scale1: HANDLE_PIXEL_SIZE,
+      },
+    })
+    .addStateFromMixin({
+      name: 'secondPoint',
+      labels: [POINTS_LABEL],
+      mixins: ['visible', 'origin', 'scale1'],
+      initialValues: {
+        visible: false,
+        scale1: HANDLE_PIXEL_SIZE,
+      },
+    })
+    .addField({
+      name: 'isPlaced',
+      initialValue: false,
+    })
+    .build();
+}
diff --git a/src/vtk/RulerWidget/state.ts b/src/vtk/RulerWidget/storeState.ts
similarity index 90%
rename from src/vtk/RulerWidget/state.ts
rename to src/vtk/RulerWidget/storeState.ts
index 6ecb2f44d..739219551 100644
--- a/src/vtk/RulerWidget/state.ts
+++ b/src/vtk/RulerWidget/storeState.ts
@@ -2,11 +2,10 @@ import macro from '@kitware/vtk.js/macros';
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
 import bounds from '@kitware/vtk.js/Widgets/Core/StateBuilder/boundsMixin';
 
+import { POINTS_LABEL } from '@/src/vtk/ToolWidgetUtils/common';
 import createPointState from '../ToolWidgetUtils/pointState';
 import { watchState } from '../ToolWidgetUtils/utils';
 
-export const PointsLabel = 'points';
-
 function vtkRulerWidgetState(publicAPI: any, model: any) {
   const firstPoint = createPointState({
     id: model.id,
@@ -25,7 +24,7 @@ function vtkRulerWidgetState(publicAPI: any, model: any) {
   watchState(publicAPI, secondPoint, () => publicAPI.modified());
 
   model.labels = {
-    [PointsLabel]: [firstPoint, secondPoint],
+    [POINTS_LABEL]: [firstPoint, secondPoint],
   };
 
   publicAPI.getFirstPoint = () => firstPoint;
@@ -33,7 +32,6 @@ function vtkRulerWidgetState(publicAPI: any, model: any) {
 }
 
 const defaultValues = (initialValues: any) => ({
-  isPlaced: false,
   ...initialValues,
 });
 
@@ -47,7 +45,6 @@ function _createRulerWidgetState(
   bounds.extend(publicAPI, model);
 
   macro.get(publicAPI, model, ['id']);
-  macro.setGet(publicAPI, model, ['isPlaced']);
   macro.moveToProtected(publicAPI, model, ['store']);
 
   vtkRulerWidgetState(publicAPI, model);
diff --git a/src/vtk/ToolWidgetUtils/common.ts b/src/vtk/ToolWidgetUtils/common.ts
new file mode 100644
index 000000000..59a7a5261
--- /dev/null
+++ b/src/vtk/ToolWidgetUtils/common.ts
@@ -0,0 +1,2 @@
+export const HANDLE_PIXEL_SIZE = 20;
+export const POINTS_LABEL = 'points';
diff --git a/src/vtk/ToolWidgetUtils/pointState.js b/src/vtk/ToolWidgetUtils/pointState.js
index 4e369ab67..00c9d59b9 100644
--- a/src/vtk/ToolWidgetUtils/pointState.js
+++ b/src/vtk/ToolWidgetUtils/pointState.js
@@ -2,25 +2,8 @@ import macro from '@kitware/vtk.js/macros';
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
 import visibleMixin from '@kitware/vtk.js/Widgets/Core/StateBuilder/visibleMixin';
 import scale1Mixin from '@kitware/vtk.js/Widgets/Core/StateBuilder/scale1Mixin';
-
-const PIXEL_SIZE = 20;
-
-function watchStore(publicAPI, store, getter, cmp) {
-  let cached = getter();
-  const unsubscribe = store.$subscribe(() => {
-    const val = getter();
-    if (cmp ? cmp(cached, val) : cached !== val) {
-      cached = val;
-      publicAPI.modified();
-    }
-  });
-
-  const originalDelete = publicAPI.delete;
-  publicAPI.delete = () => {
-    unsubscribe();
-    originalDelete();
-  };
-}
+import { HANDLE_PIXEL_SIZE } from '@/src/vtk/ToolWidgetUtils/common';
+import { watchStore } from '@/src/vtk/ToolWidgetUtils/utils';
 
 function _createPointState(
   publicAPI,
@@ -34,7 +17,7 @@ function _createPointState(
   });
   vtkWidgetState.extend(publicAPI, model, {});
   visibleMixin.extend(publicAPI, model, { visible });
-  scale1Mixin.extend(publicAPI, model, { scale1: PIXEL_SIZE });
+  scale1Mixin.extend(publicAPI, model, { scale1: HANDLE_PIXEL_SIZE });
 
   const getTool = () => {
     return model._store.toolByID[model.id];
diff --git a/src/vtk/ToolWidgetUtils/utils.ts b/src/vtk/ToolWidgetUtils/utils.ts
index 2ec57fe44..e4d1ba325 100644
--- a/src/vtk/ToolWidgetUtils/utils.ts
+++ b/src/vtk/ToolWidgetUtils/utils.ts
@@ -1,6 +1,30 @@
+import { Maybe } from '@/src/types';
 import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import { Store } from 'pinia';
+
+export function watchStore<T>(
+  publicAPI: any,
+  store: Store,
+  getter: () => Maybe<T>,
+  cmp: (a: Maybe<T>, b: Maybe<T>) => boolean
+) {
+  let cached = getter();
+  const unsubscribe = store.$subscribe(() => {
+    const val = getter();
+    if (cmp ? cmp(cached, val) : cached !== val) {
+      cached = val;
+      publicAPI.modified();
+    }
+  });
+
+  const originalDelete = publicAPI.delete;
+  publicAPI.delete = () => {
+    unsubscribe();
+    originalDelete();
+  };
+}
 
 export function watchState(
   publicAPI: any,