diff --git a/src/components/tools/polygon/PlacingPolygonWidget2D.vue b/src/components/tools/polygon/PlacingPolygonWidget2D.vue
new file mode 100644
index 000000000..60b419442
--- /dev/null
+++ b/src/components/tools/polygon/PlacingPolygonWidget2D.vue
@@ -0,0 +1,152 @@
+<script lang="ts">
+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 vtkWidgetFactory, {
+  vtkPolygonViewWidget,
+  vtkPolygonWidgetState,
+} from '@/src/vtk/PolygonWidget';
+import createStandaloneState from '@/src/vtk/PolygonWidget/standaloneState';
+import { useViewWidget } from '@/src/composables/useViewWidget';
+import {
+  useSyncedPolygonState,
+  PolygonInitState,
+} from '@/src/components/tools/polygon/common';
+import SVG2DComponent from './PolygonSVG2D.vue';
+
+export default defineComponent({
+  name: 'PlacingPolygonWidget2D',
+  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: {
+    SVG2DComponent,
+  },
+  setup(props, { emit }) {
+    const { widgetManager, viewDirection, currentSlice } = toRefs(props);
+    const { currentImageID, currentImageMetadata } = useCurrentImage();
+
+    const widgetState = createStandaloneState() as vtkPolygonWidgetState;
+    const widgetFactory = vtkWidgetFactory.newInstance({
+      widgetState,
+    });
+
+    const syncedState = useSyncedPolygonState(widgetFactory);
+    const widget = useViewWidget<vtkPolygonViewWidget>(
+      widgetFactory,
+      widgetManager
+    );
+
+    onMounted(() => {
+      widgetState.setPlacing(true);
+    });
+
+    onUnmounted(() => {
+      widgetFactory.delete();
+    });
+
+    // --- reset on slice/image changes --- //
+
+    watch([currentSlice, currentImageID, widget], () => {
+      if (widget.value) {
+        widget.value.resetInteractions();
+        widget.value.getWidgetState().clearHandleList();
+      }
+    });
+
+    onVTKEvent(widget, 'onPlacedEvent', () => {
+      const initState: PolygonInitState = {
+        points: syncedState.points,
+      };
+      emit('placed', initState);
+
+      widget.value?.reset();
+      widgetState.setPlacing(true);
+    });
+
+    // --- 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();
+    });
+
+    // // 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?.getWidgetState().getFinishable();
+    // });
+
+    return {
+      state: syncedState,
+      finishable: computed(() => syncedState.finishable),
+    };
+  },
+});
+</script>
+
+<template>
+  <SVG2DComponent
+    :view-id="viewId"
+    :points="state.points"
+    :color="color"
+    :move-point="state.movePoint"
+    placing
+    :finishable="finishable"
+  />
+</template>
diff --git a/src/components/tools/polygon/PolygonSVG2D.vue b/src/components/tools/polygon/PolygonSVG2D.vue
index bcc5e6d82..4d5ffc87d 100644
--- a/src/components/tools/polygon/PolygonSVG2D.vue
+++ b/src/components/tools/polygon/PolygonSVG2D.vue
@@ -37,6 +37,7 @@ import {
   watch,
   inject,
 } from 'vue';
+import { Maybe } from '@/src/types';
 
 const POINT_RADIUS = 10;
 const FINISHABLE_POINT_RADIUS = 16;
@@ -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,
diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index 7284e495e..3a241fd37 100644
--- a/src/components/tools/polygon/PolygonTool.vue
+++ b/src/components/tools/polygon/PolygonTool.vue
@@ -5,12 +5,19 @@
         v-for="tool in tools"
         :key="tool.id"
         :tool-id="tool.id"
-        :is-placing="tool.id === placingToolID"
         :current-slice="currentSlice"
         :view-id="viewId"
         :view-direction="viewDirection"
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(tool.id, $event)"
+      />
+      <placing-polygon-widget-2D
+        v-if="isToolActive"
+        :current-slice="currentSlice"
+        :color="activeLabelColor"
+        :view-id="viewId"
+        :view-direction="viewDirection"
+        :widget-manager="widgetManager"
         @placed="onToolPlaced"
       />
     </svg>
@@ -19,35 +26,25 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onUnmounted,
-  PropType,
-  ref,
-  toRefs,
-  watch,
-} from 'vue';
+import { computed, defineComponent, PropType, toRefs } 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,
 } from '@/src/composables/annotationTool';
+import { useCurrentFrameOfReference } from '@/src/composables/useCurrentFrameOfReference';
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
+import PlacingPolygonWidget2D from '@/src/components/tools/polygon/PlacingPolygonWidget2D.vue';
+import { PolygonInitState } from '@/src/components/tools/polygon/common';
 import PolygonWidget2D from './PolygonWidget2D.vue';
 
-type ToolID = PolygonID;
 const useActiveToolStore = usePolygonStore;
 const toolType = Tools.Polygon;
 
@@ -73,6 +70,7 @@ export default defineComponent({
   },
   components: {
     PolygonWidget2D,
+    PlacingPolygonWidget2D,
     AnnotationContextMenu,
   },
   setup(props) {
@@ -81,101 +79,30 @@ export default defineComponent({
     const activeToolStore = useActiveToolStore();
     const { activeLabel } = storeToRefs(activeToolStore);
 
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const { currentImageID } = useCurrentImage();
     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 currentFrameOfReference = useCurrentFrameOfReference(
+      viewDirection,
+      currentSlice
     );
 
-    watch(
-      [isToolActive, currentImageID] as const,
-      ([active, imageID]) => {
-        if (placingToolID.value != null) {
-          activeToolStore.removeTool(placingToolID.value);
-          placingToolID.value = null;
-        }
-        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]),
-          });
-        }
-      },
-      { immediate: true }
-    );
-
-    onUnmounted(() => {
-      if (placingToolID.value != null) {
-        activeToolStore.removeTool(placingToolID.value);
-        placingToolID.value = null;
-      }
-    });
-
-    const onToolPlaced = () => {
-      if (currentImageID.value) {
-        placingToolID.value = activeToolStore.addTool({
-          imageID: currentImageID.value,
-          placing: true,
-        });
-      }
+    const onToolPlaced = (initState: PolygonInitState) => {
+      if (!currentImageID.value) return;
+      activeToolStore.addTool({
+        imageID: currentImageID.value,
+        frameOfReference: currentFrameOfReference.value,
+        slice: currentSlice.value,
+        label: activeLabel.value,
+        color: activeLabel.value
+          ? activeToolStore.labels[activeLabel.value].color
+          : undefined,
+        points: initState.points,
+      });
     };
 
-    // --- 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 }
-    );
+    // --- right-click menu --- //
 
     const { contextMenu, openContextMenu } = useContextMenu();
 
@@ -183,7 +110,12 @@ export default defineComponent({
 
     return {
       tools: currentTools,
-      placingToolID,
+      isToolActive,
+      activeLabelColor: computed(() => {
+        return (
+          activeLabel.value && activeToolStore.labels[activeLabel.value].color
+        );
+      }),
       onToolPlaced,
       contextMenu,
       openContextMenu,
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index 9ebf50a68..c1168d452 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -6,8 +6,6 @@ import {
   onMounted,
   onUnmounted,
   PropType,
-  Ref,
-  ref,
   toRefs,
   watch,
   watchEffect,
@@ -16,21 +14,25 @@ import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManip
 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 { useRightClickContextMenu } from '@/src/composables/annotationTool';
 import { usePolygonStore as useStore } from '@/src/store/tools/polygons';
 import { PolygonID as ToolID } from '@/src/types/polygon';
 import vtkWidgetFactory, {
-  vtkPolygonViewWidget as WidgetView,
+  vtkPolygonViewWidget,
+  vtkPolygonWidgetState,
 } from '@/src/vtk/PolygonWidget';
+import { useViewStore } from '@/src/store/views';
+import createPolygonWidgetState from '@/src/vtk/PolygonWidget/storeState';
+import { useSyncedPolygonState } from '@/src/components/tools/polygon/common';
+import { useViewWidget } from '@/src/composables/useViewWidget';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
   name: 'PolygonWidget2D',
-  emits: ['placed', 'contextmenu'],
+  emits: ['contextmenu'],
   props: {
     toolId: {
-      type: String,
+      type: String as unknown as PropType<ToolID>,
       required: true,
     },
     widgetManager: {
@@ -49,60 +51,40 @@ export default defineComponent({
       type: Number,
       required: true,
     },
-    isPlacing: {
-      type: Boolean,
-      default: false,
-    },
   },
   components: {
     SVG2DComponent,
   },
   setup(props, { emit }) {
-    const {
-      toolId: stringToolId,
-      widgetManager,
-      viewDirection,
-      currentSlice,
-      isPlacing,
-    } = toRefs(props);
-    const toolId = ref(stringToolId.value) as Ref<ToolID>;
+    const { toolId, widgetManager, viewDirection, currentSlice, viewId } =
+      toRefs(props);
 
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
-    const widgetFactory = vtkWidgetFactory.newInstance({
+    const widgetState = createPolygonWidgetState({
       id: toolId.value,
       store: toolStore,
+    }) as vtkPolygonWidgetState;
+    const widgetFactory = vtkWidgetFactory.newInstance({
+      widgetState,
     });
-    const widget = ref<WidgetView | null>(null);
+
+    const syncedState = useSyncedPolygonState(widgetFactory);
+    const widget = useViewWidget<vtkPolygonViewWidget>(
+      widgetFactory,
+      widgetManager
+    );
 
     onMounted(() => {
-      widget.value = widgetManager.value.addWidget(widgetFactory) as WidgetView;
+      viewProxy.value?.renderLater();
     });
 
     onUnmounted(() => {
-      if (!widget.value) {
-        return;
-      }
-      widgetManager.value.removeWidget(widget.value);
-      widget.value.delete();
       widgetFactory.delete();
     });
 
-    // --- reset on slice/image changes --- //
-
-    watch([currentSlice, currentImageID, widget], () => {
-      if (widget.value && isPlacing.value) {
-        widget.value.resetInteractions();
-        widget.value.getWidgetState().clearHandles();
-      }
-    });
-
-    onVTKEvent(widget, 'onPlacedEvent', () => {
-      emit('placed');
-    });
-
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);
@@ -118,6 +100,8 @@ export default defineComponent({
       widget.value.setManipulator(manipulator);
     });
 
+    const { currentImageMetadata } = useCurrentImage();
+
     watchEffect(() => {
       updatePlaneManipulatorFor2DView(
         manipulator,
@@ -148,17 +132,9 @@ 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();
-    });
-
     return {
       tool,
-      finishable,
+      state: syncedState,
     };
   },
 });
@@ -172,6 +148,6 @@ export default defineComponent({
     :color="tool.color"
     :move-point="tool.movePoint"
     :placing="tool.placing"
-    :finishable="finishable"
+    :finishable="state.finishable"
   />
 </template>
diff --git a/src/components/tools/polygon/common.ts b/src/components/tools/polygon/common.ts
new file mode 100644
index 000000000..548dcf557
--- /dev/null
+++ b/src/components/tools/polygon/common.ts
@@ -0,0 +1,34 @@
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { Maybe } from '@/src/types';
+import vtkPolygonWidget, {
+  vtkPolygonWidgetState,
+} from '@/src/vtk/PolygonWidget';
+import { Vector3 } from '@kitware/vtk.js/types';
+import { shallowReactive } from 'vue';
+
+export interface PolygonInitState {
+  points: Vector3[];
+}
+
+export function useSyncedPolygonState(widgetFactory: vtkPolygonWidget) {
+  const syncedState = shallowReactive({
+    points: [] as Vector3[],
+    movePoint: null as Maybe<Vector3>,
+    finishable: false,
+  });
+
+  const widgetState = widgetFactory.getWidgetState() as vtkPolygonWidgetState;
+  const syncState = () => {
+    syncedState.points = widgetState
+      .getHandleList()
+      .map((handle) => handle.getOrigin())
+      .filter((pt): pt is Vector3 => !!pt);
+    syncedState.movePoint = widgetState.getMoveHandle().getOrigin();
+    syncedState.finishable = widgetState.getFinishable();
+  };
+
+  onVTKEvent(widgetState, 'onModified', () => syncState());
+  syncState();
+
+  return syncedState;
+}
diff --git a/src/components/tools/rectangle/PlacingRectangleWidget2D.vue b/src/components/tools/rectangle/PlacingRectangleWidget2D.vue
new file mode 100644
index 000000000..e15098d0c
--- /dev/null
+++ b/src/components/tools/rectangle/PlacingRectangleWidget2D.vue
@@ -0,0 +1,161 @@
+<script lang="ts">
+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 vtkRectangleWidget, {
+  vtkRectangleViewWidget,
+  InteractionState,
+  vtkRectangleWidgetState,
+} from '@/src/vtk/RectangleWidget';
+import RectangleSVG2D from '@/src/components/tools/rectangle/RectangleSVG2D.vue';
+// the rectangle widget is the same as the ruler widget
+import createStandaloneState from '@/src/vtk/RulerWidget/standaloneState';
+import { useSyncedRectangleState } from '@/src/components/tools/rectangle/common';
+import { useViewWidget } from '@/src/composables/useViewWidget';
+import type { RectangleInitState } from '@/src/components/tools/rectangle/common';
+
+const vtkWidgetFactory = vtkRectangleWidget;
+type WidgetView = vtkRectangleViewWidget;
+const SVG2DComponent = RectangleSVG2D;
+
+export default defineComponent({
+  name: 'RectangleWidget2D',
+  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,
+    fillColor: String,
+  },
+  components: {
+    SVG2DComponent,
+  },
+  setup(props, { emit }) {
+    const { widgetManager, viewDirection, currentSlice } = toRefs(props);
+
+    const { currentImageID, currentImageMetadata } = useCurrentImage();
+
+    const widgetState = createStandaloneState() as vtkRectangleWidgetState;
+    const widgetFactory = vtkWidgetFactory.newInstance({
+      widgetState,
+    });
+
+    const syncedState = useSyncedRectangleState(widgetFactory);
+    const widget = useViewWidget<WidgetView>(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: RectangleInitState = {
+        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;
+      }),
+    };
+  },
+});
+</script>
+
+<template>
+  <SVG2DComponent
+    :view-id="viewId"
+    :point1="firstPoint"
+    :point2="secondPoint"
+    :color="color"
+    :fill-color="fillColor"
+  />
+</template>
diff --git a/src/components/tools/rectangle/RectangleSVG2D.vue b/src/components/tools/rectangle/RectangleSVG2D.vue
index f7e3dddab..7e1d00e1e 100644
--- a/src/components/tools/rectangle/RectangleSVG2D.vue
+++ b/src/components/tools/rectangle/RectangleSVG2D.vue
@@ -49,6 +49,7 @@ import {
   watch,
   inject,
 } from 'vue';
+import { Maybe } from '@/src/types';
 
 type SVGPoint = {
   x: number;
@@ -57,8 +58,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,
     fillColor: String,
     viewId: {
diff --git a/src/components/tools/rectangle/RectangleTool.vue b/src/components/tools/rectangle/RectangleTool.vue
index 051e14de2..838db4783 100644
--- a/src/components/tools/rectangle/RectangleTool.vue
+++ b/src/components/tools/rectangle/RectangleTool.vue
@@ -5,12 +5,20 @@
         v-for="tool in tools"
         :key="tool.id"
         :tool-id="tool.id"
-        :is-placing="tool.id === placingToolID"
         :current-slice="currentSlice"
         :view-id="viewId"
         :view-direction="viewDirection"
         :widget-manager="widgetManager"
         @contextmenu="openContextMenu(tool.id, $event)"
+      />
+      <placing-rectangle-widget-2D
+        v-if="isToolActive"
+        :current-slice="currentSlice"
+        :color="activeLabelProps.color"
+        :fill-color="activeLabelProps.fillColor"
+        :view-id="viewId"
+        :view-direction="viewDirection"
+        :widget-manager="widgetManager"
         @placed="onToolPlaced"
       />
     </svg>
@@ -19,35 +27,25 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onUnmounted,
-  PropType,
-  ref,
-  toRefs,
-  watch,
-} from 'vue';
+import { computed, defineComponent, PropType, toRefs } 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 { useRectangleStore } from '@/src/store/tools/rectangles';
-import { RectangleID } from '@/src/types/rectangle';
 import {
   useCurrentTools,
   useContextMenu,
 } from '@/src/composables/annotationTool';
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
+import PlacingRectangleWidget2D from '@/src/components/tools/rectangle/PlacingRectangleWidget2D.vue';
+import { useCurrentFrameOfReference } from '@/src/composables/useCurrentFrameOfReference';
+import { RectangleInitState } from '@/src/components/tools/rectangle/common';
 import RectangleWidget2D from './RectangleWidget2D.vue';
 
-type ToolID = RectangleID;
 const useActiveToolStore = useRectangleStore;
 const toolType = Tools.Rectangle;
 
@@ -73,6 +71,7 @@ export default defineComponent({
   },
   components: {
     RectangleWidget2D,
+    PlacingRectangleWidget2D,
     AnnotationContextMenu,
   },
   setup(props) {
@@ -81,114 +80,49 @@ export default defineComponent({
     const activeToolStore = useActiveToolStore();
     const { activeLabel } = storeToRefs(activeToolStore);
 
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const { currentImageID } = useCurrentImage();
     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 }
-    );
-
-    watch(
-      [isToolActive, currentImageID] as const,
-      ([active, imageID]) => {
-        if (placingToolID.value != null) {
-          activeToolStore.removeTool(placingToolID.value);
-          placingToolID.value = null;
-        }
-        if (active && imageID) {
-          placingToolID.value = activeToolStore.addTool({
-            imageID,
-            placing: true,
-          });
-        }
-      },
-      { immediate: true }
+    const currentFrameOfReference = useCurrentFrameOfReference(
+      viewDirection,
+      currentSlice
     );
 
-    watch(
-      [activeLabel, placingToolID],
-      ([label, placingTool]) => {
-        if (placingTool != null) {
-          activeToolStore.updateTool(placingTool, {
-            label,
-            ...(label && activeToolStore.labels[label]),
-          });
-        }
-      },
-      { immediate: true }
-    );
-
-    onUnmounted(() => {
-      if (placingToolID.value != null) {
-        activeToolStore.removeTool(placingToolID.value);
-        placingToolID.value = null;
-      }
-    });
-
-    const onToolPlaced = () => {
-      if (currentImageID.value) {
-        placingToolID.value = activeToolStore.addTool({
-          imageID: currentImageID.value,
-          placing: true,
-        });
-      }
+    const onToolPlaced = (initState: RectangleInitState) => {
+      if (!currentImageID.value) return;
+      activeToolStore.addTool({
+        imageID: currentImageID.value,
+        frameOfReference: currentFrameOfReference.value,
+        slice: currentSlice.value,
+        label: activeLabel.value,
+        color: activeLabel.value
+          ? activeToolStore.labels[activeLabel.value].color
+          : undefined,
+        firstPoint: initState.firstPoint,
+        secondPoint: initState.secondPoint,
+      });
     };
 
-    // --- updating active tool 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,
-      };
-    };
-    // update active ruler's frame + slice, since the
-    // active ruler is not finalized.
-    watch(
-      [currentSlice, placingToolID] as const,
-      ([slice, toolID]) => {
-        if (!toolID) return;
-        activeToolStore.updateTool(toolID, {
-          frameOfReference: getCurrentFrameOfReference(),
-          slice,
-        });
-      },
-      { immediate: true }
-    );
+    // --- right-click menu --- //
 
     const { contextMenu, openContextMenu } = useContextMenu();
 
+    // --- //
+
     const currentTools = useCurrentTools(activeToolStore, viewAxis);
+    const activeLabelProps = computed(() => {
+      return activeLabel.value ? activeToolStore.labels[activeLabel.value] : {};
+    });
 
     return {
       tools: currentTools,
-      placingToolID,
+      isToolActive,
       onToolPlaced,
       contextMenu,
       openContextMenu,
       activeToolStore,
+      activeLabelProps,
     };
   },
 });
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index e73c6277c..e7a8b86a1 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -6,8 +6,6 @@ import {
   onMounted,
   onUnmounted,
   PropType,
-  Ref,
-  ref,
   toRefs,
   watch,
   watchEffect,
@@ -16,31 +14,30 @@ import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManip
 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 { useRectangleStore } from '@/src/store/tools/rectangles';
 import vtkRectangleWidget, {
   vtkRectangleViewWidget,
-  InteractionState,
+  vtkRectangleWidgetState,
 } from '@/src/vtk/RectangleWidget';
 import RectangleSVG2D from '@/src/components/tools/rectangle/RectangleSVG2D.vue';
-import { vtkRulerWidgetPointState } from '@/src/vtk/RulerWidget';
-import { watchOnce } from '@vueuse/core';
 import { RectangleID } from '@/src/types/rectangle';
 import { useRightClickContextMenu } from '@/src/composables/annotationTool';
+import createRulerWidgetState from '@/src/vtk/RulerWidget/storeState';
+import { useViewWidget } from '@/src/composables/useViewWidget';
+import { useViewStore } from '@/src/store/views';
 
 const useStore = useRectangleStore;
 const vtkWidgetFactory = vtkRectangleWidget;
 type WidgetView = vtkRectangleViewWidget;
-type vtkWidgetPointState = vtkRulerWidgetPointState;
 type ToolID = RectangleID;
 const SVG2DComponent = RectangleSVG2D;
 
 export default defineComponent({
   name: 'RectangleWidget2D',
-  emits: ['placed', 'contextmenu'],
+  emits: ['contextmenu'],
   props: {
     toolId: {
-      type: String,
+      type: String as unknown as PropType<ToolID>,
       required: true,
     },
     widgetManager: {
@@ -59,72 +56,38 @@ export default defineComponent({
       type: Number,
       required: true,
     },
-    isPlacing: {
-      type: Boolean,
-      default: false,
-    },
   },
   components: {
     SVG2DComponent,
   },
   setup(props, { emit }) {
-    const {
-      toolId: stringToolId,
-      widgetManager,
-      viewDirection,
-      currentSlice,
-      isPlacing,
-    } = toRefs(props);
-    const toolId = ref(stringToolId.value) as Ref<ToolID>;
+    const { toolId, viewId, widgetManager, viewDirection, currentSlice } =
+      toRefs(props);
 
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
-    const widgetFactory = vtkWidgetFactory.newInstance({
+    // the rectangle widget is the same as the ruler widget
+    const widgetState = createRulerWidgetState({
+      // TODO not kosher
       id: toolId.value,
       store: toolStore,
-      isPlaced: !isPlacing.value,
+    }) as vtkRectangleWidgetState;
+    const widgetFactory = vtkWidgetFactory.newInstance({
+      widgetState,
     });
-    const widget = ref<WidgetView | null>(null);
+
+    const widget = useViewWidget<WidgetView>(widgetFactory, widgetManager);
 
     onMounted(() => {
-      widget.value = widgetManager.value.addWidget(widgetFactory) as WidgetView;
+      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);
-      }
-    });
-
-    onVTKEvent(widget, 'onPlacedEvent', () => {
-      emit('placed');
-    });
-
     // --- right click handling --- //
 
     useRightClickContextMenu(emit, widget);
@@ -140,6 +103,8 @@ export default defineComponent({
       widget.value.setManipulator(manipulator);
     });
 
+    const { currentImageMetadata } = useCurrentImage();
+
     watchEffect(() => {
       updatePlaneManipulatorFor2DView(
         manipulator,
@@ -170,35 +135,8 @@ export default defineComponent({
       widgetManager.value.renderWidgets();
     });
 
-    // --- handle pick visibility --- //
-    const usePointVisibility = (
-      pointState: Ref<vtkWidgetPointState | 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 {
       tool,
-      firstPoint: computed(() => {
-        return firstPointVisible.value ? tool.value.firstPoint : undefined;
-      }),
-      secondPoint: computed(() => {
-        return secondPointVisible.value ? tool.value.secondPoint : undefined;
-      }),
     };
   },
 });
@@ -208,8 +146,8 @@ export default defineComponent({
   <SVG2DComponent
     v-show="currentSlice === tool.slice"
     :view-id="viewId"
-    :point1="firstPoint"
-    :point2="secondPoint"
+    :point1="tool.firstPoint"
+    :point2="tool.secondPoint"
     :color="tool.color"
     :fill-color="tool.fillColor"
   />
diff --git a/src/components/tools/rectangle/common.ts b/src/components/tools/rectangle/common.ts
new file mode 100644
index 000000000..4bb478893
--- /dev/null
+++ b/src/components/tools/rectangle/common.ts
@@ -0,0 +1,38 @@
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { Maybe } from '@/src/types';
+import vtkRectangleWidget, {
+  vtkRectangleWidgetState,
+} from '@/src/vtk/RectangleWidget';
+import { Vector3 } from '@kitware/vtk.js/types';
+import { reactive } from 'vue';
+
+export interface RectangleInitState {
+  firstPoint: Vector3;
+  secondPoint: Vector3;
+}
+
+export function useSyncedRectangleState(widgetFactory: vtkRectangleWidget) {
+  const widgetState = widgetFactory.getWidgetState() as vtkRectangleWidgetState;
+  const syncedState = reactive({
+    firstPoint: {
+      visible: false,
+      origin: null as Maybe<Vector3>,
+    },
+    secondPoint: {
+      visible: false,
+      origin: null as Maybe<Vector3>,
+    },
+  });
+
+  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();
+  };
+
+  onVTKEvent(widgetState, 'onModified', () => syncState());
+  syncState();
+
+  return syncedState;
+}
diff --git a/src/components/tools/ruler/PlacingRulerWidget2D.vue b/src/components/tools/ruler/PlacingRulerWidget2D.vue
new file mode 100644
index 000000000..0ce8e354a
--- /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..409ce58f9 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';
@@ -30,6 +31,7 @@ const useDoesToolFrameMatchViewAxis = <
   return !!toolAxis && toolAxis.axis === viewAxis.value;
 };
 
+// TODO move to viewDirection in case we need to be more specific in the future
 export const useCurrentTools = <ToolID extends string>(
   toolStore: AnnotationToolStore<ToolID>,
   viewAxis: Ref<LPSAxis>
@@ -66,7 +68,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/PolygonWidget/behavior.ts b/src/vtk/PolygonWidget/behavior.ts
index b82d31e9d..e998a4d89 100644
--- a/src/vtk/PolygonWidget/behavior.ts
+++ b/src/vtk/PolygonWidget/behavior.ts
@@ -60,11 +60,13 @@ export default function widgetBehavior(publicAPI: any, model: any) {
 
   const reset = () => {
     publicAPI.loseFocus();
-    model.widgetState.clearHandles();
+    model.widgetState.clearHandleList();
+    model.widgetState.setFinishable(false);
   };
+  publicAPI.reset = reset;
 
   const removeLastHandle = () => {
-    const handles = model.widgetState.getHandles();
+    const handles = model.widgetState.getHandleList();
     if (handles.length > 0) {
       model.widgetState.removeHandle(handles.length - 1);
       if (handles.length === 0) {
@@ -74,14 +76,13 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   };
 
   const finishPlacing = () => {
-    model.widgetState.setPlacing(false);
     publicAPI.loseFocus();
     // Tool Component listens for 'placed' event
     publicAPI.invokePlacedEvent();
   };
 
   function isFinishable() {
-    const handles = model.widgetState.getHandles();
+    const handles = model.widgetState.getHandleList();
     const moveHandle = model.widgetState.getMoveHandle();
 
     if (model.activeState === moveHandle && handles.length >= 3) {
@@ -131,7 +132,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       if (model.widgetState.getFinishable())
         // snap to first point
         model.activeState.setOrigin(
-          model.widgetState.getHandles()[0].getOrigin()
+          model.widgetState.getHandleList()[0].getOrigin()
         );
 
       publicAPI.invokeInteractionEvent();
@@ -160,7 +161,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       model.activeState?.getManipulator?.() ?? model.manipulator;
     if (model.widgetState.getPlacing() && manipulator) {
       // Dropping first point?
-      if (model.widgetState.getHandles().length === 0) {
+      if (model.widgetState.getHandleList().length === 0) {
         // For updateActiveStateHandle
         model.activeState = model.widgetState.getMoveHandle();
         model._widgetManager.grabFocus(publicAPI);
@@ -185,6 +186,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     if (checkOverSegment()) {
       // insert point
       const insertIndex = model.activeState.getIndex() + 1;
+      // TODO
       const newHandle = model.widgetState.addHandle({ insertIndex });
       const coords = getWorldCoords(e);
       if (!coords) throw new Error('No world coords');
@@ -286,7 +288,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
       model._apiSpecificRenderWindow.getComputedDevicePixelRatio();
 
     if (elapsed < DOUBLE_CLICK_TIMEOUT && distance < distanceThreshold) {
-      const handles = model.widgetState.getHandles();
+      const handles = model.widgetState.getHandleList();
       // Need 3 handles to finish.  Double click created 2 handles, 1 extra.
       if (handles.length >= 4) {
         removeLastHandle();
@@ -318,7 +320,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
     }
 
     if (model.widgetState.getPlacing() && key === 'Enter') {
-      if (model.widgetState.getHandles().length >= 3) {
+      if (model.widgetState.getHandleList().length >= 3) {
         finishPlacing();
       }
       return macro.EVENT_ABORT;
@@ -346,7 +348,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
 
     const overSegment = checkOverSegment();
     // if hovering on handle and we will still have at least 2 points after removing handle
-    if (!overSegment && model.widgetState.getHandles().length > 2) {
+    if (!overSegment && model.widgetState.getHandleList().length > 2) {
       widgetActions.push({
         name: 'Delete Point',
         func: () => {
diff --git a/src/vtk/PolygonWidget/common.ts b/src/vtk/PolygonWidget/common.ts
new file mode 100644
index 000000000..691acb823
--- /dev/null
+++ b/src/vtk/PolygonWidget/common.ts
@@ -0,0 +1,2 @@
+export const MoveHandleLabel = 'moveHandle';
+export const HandlesLabel = 'handles';
diff --git a/src/vtk/PolygonWidget/index.d.ts b/src/vtk/PolygonWidget/index.d.ts
index 1742c0d17..157787a82 100644
--- a/src/vtk/PolygonWidget/index.d.ts
+++ b/src/vtk/PolygonWidget/index.d.ts
@@ -5,14 +5,20 @@ import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManip
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
 import { usePolygonStore } from '@/src/store/tools/polygons';
 import { vtkAnnotationToolWidget } from '../ToolWidgetUtils/utils';
+import { Vector3 } from '@kitware/vtk.js/types';
 
 export interface vtkPolygonWidgetPointState extends vtkWidgetState {
   getVisible(): boolean;
+  getOrigin(): Vector3 | null;
+  getScale1(): number;
 }
 
 export interface vtkPolygonWidgetState extends vtkWidgetState {
-  getMoveHandle(): any;
+  getHandles(): vtkPolygonWidgetPointState[];
+  getHandleList(): vtkPolygonWidgetPointState[];
+  getMoveHandle(): vtkPolygonWidgetPointState;
   clearHandles(): void;
+  clearHandleList(): void;
   getPlacing(): boolean;
   setPlacing(is: boolean): void;
   getFinishable(): boolean;
@@ -21,11 +27,11 @@ export interface vtkPolygonWidgetState extends vtkWidgetState {
 
 export interface vtkPolygonViewWidget extends vtkAnnotationToolWidget {
   getWidgetState(): vtkPolygonWidgetState;
+  reset(): void;
 }
 
 export interface IPolygonWidgetInitialValues {
-  id: string;
-  store: ReturnType<typeof usePolygonStore>;
+  widgetState?: vtkPolygonWidgetState;
 }
 
 export interface vtkPolygonWidget extends vtkAbstractWidgetFactory {
diff --git a/src/vtk/PolygonWidget/index.js b/src/vtk/PolygonWidget/index.js
index e6eb9ab51..1e93d21d6 100644
--- a/src/vtk/PolygonWidget/index.js
+++ b/src/vtk/PolygonWidget/index.js
@@ -4,9 +4,10 @@ import vtkPlanePointManipulator from '@kitware/vtk.js/Widgets/Manipulators/Plane
 import vtkSphereHandleRepresentation from '@kitware/vtk.js/Widgets/Representations/SphereHandleRepresentation';
 import { Behavior } from '@kitware/vtk.js/Widgets/Representations/WidgetRepresentation/Constants';
 import vtkLineGlyphRepresentation from '@/src/vtk/LineGlyphRepresentation';
+import { HandlesLabel, MoveHandleLabel } from '@/src/vtk/PolygonWidget/common';
 
 import widgetBehavior from './behavior';
-import stateGenerator, { HandlesLabel, MoveHandleLabel } from './state';
+import stateGenerator from './standaloneState';
 
 // ----------------------------------------------------------------------------
 // Factory
@@ -50,9 +51,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/PolygonWidget/standaloneState.js b/src/vtk/PolygonWidget/standaloneState.js
new file mode 100644
index 000000000..beeb21259
--- /dev/null
+++ b/src/vtk/PolygonWidget/standaloneState.js
@@ -0,0 +1,35 @@
+import vtkStateBuilder from '@kitware/vtk.js/Widgets/Core/StateBuilder';
+import { HANDLE_PIXEL_SIZE } from '@/src/vtk/ToolWidgetUtils/common';
+import { HandlesLabel, MoveHandleLabel } from '@/src/vtk/PolygonWidget/common';
+
+export default function createState() {
+  return vtkStateBuilder
+    .createBuilder()
+    .addDynamicMixinState({
+      name: 'handle',
+      labels: [HandlesLabel],
+      mixins: ['visible', 'origin', 'scale1'],
+      initialValues: {
+        visible: true,
+        scale1: HANDLE_PIXEL_SIZE,
+      },
+    })
+    .addStateFromMixin({
+      name: 'moveHandle',
+      labels: [HandlesLabel, MoveHandleLabel],
+      mixins: ['visible', 'origin', 'scale1'],
+      initialValues: {
+        visible: true,
+        scale1: HANDLE_PIXEL_SIZE,
+      },
+    })
+    .addField({
+      name: 'finishable',
+      initialValue: false,
+    })
+    .addField({
+      name: 'placing',
+      initialValue: false,
+    })
+    .build();
+}
diff --git a/src/vtk/PolygonWidget/state.ts b/src/vtk/PolygonWidget/storeState.ts
similarity index 92%
rename from src/vtk/PolygonWidget/state.ts
rename to src/vtk/PolygonWidget/storeState.ts
index 7f91aba8a..2a9c56322 100644
--- a/src/vtk/PolygonWidget/state.ts
+++ b/src/vtk/PolygonWidget/storeState.ts
@@ -4,13 +4,12 @@ import bounds from '@kitware/vtk.js/Widgets/Core/StateBuilder/boundsMixin';
 import visibleMixin from '@kitware/vtk.js/Widgets/Core/StateBuilder/visibleMixin';
 import scale1Mixin from '@kitware/vtk.js/Widgets/Core/StateBuilder/scale1Mixin';
 import { Vector3 } from '@kitware/vtk.js/types';
+import { NOOP } from '@/src/constants';
+import { HandlesLabel, MoveHandleLabel } from '@/src/vtk/PolygonWidget/common';
 
 import createPointState from '../ToolWidgetUtils/pointState';
 import { watchState } from '../ToolWidgetUtils/utils';
 
-export const MoveHandleLabel = 'moveHandle';
-export const HandlesLabel = 'handles';
-
 const PIXEL_SIZE = 20;
 
 type VtkObjectModel = {
@@ -27,7 +26,7 @@ function vtkPolygonWidgetState(publicAPI: any, model: any) {
     id: model.id,
     store: model._store,
     key: 'movePoint',
-    visible: true,
+    visible: false,
   });
   watchState(publicAPI, model.moveHandle, () => publicAPI.modified());
 
@@ -109,10 +108,13 @@ function vtkPolygonWidgetState(publicAPI: any, model: any) {
     }
   };
 
-  publicAPI.getPlacing = () => getTool().placing;
-  publicAPI.setPlacing = (placing: boolean) => {
-    getTool().placing = placing;
-  };
+  // TODO
+  publicAPI.getPlacing = () => false;
+  publicAPI.setPlacing = NOOP;
+
+  // TODO match standaloneState API
+  publicAPI.getHandleList = publicAPI.getHandles;
+  publicAPI.clearHandleList = publicAPI.clearHandles;
 
   // Setup after deserialization
   getTool().points.forEach((point: Vector3) => {
diff --git a/src/vtk/RectangleWidget/index.d.ts b/src/vtk/RectangleWidget/index.d.ts
index 3b6f3fc79..c87de5895 100644
--- a/src/vtk/RectangleWidget/index.d.ts
+++ b/src/vtk/RectangleWidget/index.d.ts
@@ -8,6 +8,7 @@ import vtkRulerWidget, {
   IRulerWidgetInitialValues,
   vtkRulerViewWidget,
   vtkRulerWidgetPointState,
+  vtkRulerWidgetState,
 } from '../RulerWidget';
 
 export { InteractionState } from '../RulerWidget';
@@ -21,7 +22,7 @@ export interface vtkRectangleViewWidget extends vtkRulerViewWidget {}
 
 export interface IRectangleWidgetInitialValues
   extends IRulerWidgetInitialValues {
-  store: ReturnType<typeof useRectangleStore>;
+  widgetState: vtkRectangleWidgetState;
 }
 
 export interface vtkRectangleWidget extends vtkRulerWidget {}
diff --git a/src/vtk/RectangleWidget/index.js b/src/vtk/RectangleWidget/index.js
index 3a043789c..34d85619a 100644
--- a/src/vtk/RectangleWidget/index.js
+++ b/src/vtk/RectangleWidget/index.js
@@ -3,6 +3,7 @@ import macro from '@kitware/vtk.js/macro';
 import vtkRulerWidget from '../RulerWidget';
 
 export { InteractionState } from '../RulerWidget/behavior';
+
 // ----------------------------------------------------------------------------
 // Factory
 // ----------------------------------------------------------------------------
@@ -20,15 +21,7 @@ const DEFAULT_VALUES = {};
 export function extend(publicAPI, model, initialValues = {}) {
   Object.assign(model, DEFAULT_VALUES, initialValues);
 
-  const { store: toolStore, ...rest } = initialValues;
-
-  const rulerStore = {
-    ...toolStore,
-    rulerByID: toolStore.toolByID,
-    updateRuler: toolStore.updateTool,
-  };
-
-  vtkRulerWidget.extend(publicAPI, model, { store: rulerStore, ...rest });
+  vtkRulerWidget.extend(publicAPI, model, initialValues);
 
   vtkRectangleWidget(publicAPI, model);
 }
diff --git a/src/vtk/RulerWidget/behavior.ts b/src/vtk/RulerWidget/behavior.ts
index 029653142..7384d3293 100644
--- a/src/vtk/RulerWidget/behavior.ts
+++ b/src/vtk/RulerWidget/behavior.ts
@@ -44,7 +44,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
   publicAPI.setInteractionState = (state: InteractionState) => {
     const changed = originalSetInteractionState(state);
     if (changed && state === InteractionState.PlacingFirst) {
-      model.widgetState.setIsPlaced(false);
+      // model.widgetState.setIsPlaced(false);
       model.widgetState.getFirstPoint().setVisible(false);
       model.widgetState.getSecondPoint().setVisible(false);
     }
@@ -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.
    */
@@ -94,7 +99,7 @@ export default function widgetBehavior(publicAPI: any, model: any) {
 
     if (intState === InteractionState.PlacingSecond) {
       publicAPI.setSecondPoint(worldCoords);
-      model.widgetState.setIsPlaced(true);
+      // model.widgetState.setIsPlaced(true);
 
       publicAPI.setInteractionState(InteractionState.Select);
       publicAPI.invokeEndInteractionEvent();
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..4e18a526a
--- /dev/null
+++ b/src/vtk/RulerWidget/standaloneState.js
@@ -0,0 +1,29 @@
+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,
+      },
+    })
+    .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..9bbb06380
--- /dev/null
+++ b/src/vtk/ToolWidgetUtils/common.ts
@@ -0,0 +1,3 @@
+export const HANDLE_PIXEL_SIZE = 20;
+export const POINTS_LABEL = 'points';
+export const MOVE_HANDLE_LABEL = 'moveHandle';
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,