From e3ab0aa9f9abcc0599ca72c8ef729e3993e317a7 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Sat, 9 Sep 2023 11:01:29 -0400
Subject: [PATCH] feat(polygon): separate out placing polygon

---
 .../tools/polygon/PlacingPolygonWidget2D.vue  | 152 ++++++++++++++++++
 src/components/tools/polygon/PolygonSVG2D.vue |   3 +-
 src/components/tools/polygon/PolygonTool.vue  | 140 +++++-----------
 .../tools/polygon/PolygonWidget2D.vue         |  76 +++------
 src/components/tools/polygon/common.ts        |  34 ++++
 .../tools/ruler/PlacingRulerWidget2D.vue      |   4 +-
 src/composables/annotationTool.ts             |   1 +
 src/vtk/PolygonWidget/behavior.ts             |  20 +--
 src/vtk/PolygonWidget/common.ts               |   2 +
 src/vtk/PolygonWidget/index.d.ts              |  12 +-
 src/vtk/PolygonWidget/index.js                |   5 +-
 src/vtk/PolygonWidget/standaloneState.js      |  35 ++++
 .../PolygonWidget/{state.ts => storeState.ts} |  18 ++-
 src/vtk/RulerWidget/behavior.ts               |   4 +-
 src/vtk/ToolWidgetUtils/common.ts             |   1 +
 15 files changed, 326 insertions(+), 181 deletions(-)
 create mode 100644 src/components/tools/polygon/PlacingPolygonWidget2D.vue
 create mode 100644 src/components/tools/polygon/common.ts
 create mode 100644 src/vtk/PolygonWidget/common.ts
 create mode 100644 src/vtk/PolygonWidget/standaloneState.js
 rename src/vtk/PolygonWidget/{state.ts => storeState.ts} (92%)

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/ruler/PlacingRulerWidget2D.vue b/src/components/tools/ruler/PlacingRulerWidget2D.vue
index 91573abaf..0ce8e354a 100644
--- a/src/components/tools/ruler/PlacingRulerWidget2D.vue
+++ b/src/components/tools/ruler/PlacingRulerWidget2D.vue
@@ -98,8 +98,8 @@ export default defineComponent({
       };
       emit('placed', initState);
 
-      widget.value!.resetState();
-      widget.value!.setInteractionState(InteractionState.PlacingFirst);
+      widget.value?.resetState();
+      widget.value?.setInteractionState(InteractionState.PlacingFirst);
     });
 
     // --- manipulator --- //
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 27e790c38..409ce58f9 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -31,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>
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/RulerWidget/behavior.ts b/src/vtk/RulerWidget/behavior.ts
index 1d2d14efb..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);
     }
@@ -99,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/ToolWidgetUtils/common.ts b/src/vtk/ToolWidgetUtils/common.ts
index 59a7a5261..9bbb06380 100644
--- a/src/vtk/ToolWidgetUtils/common.ts
+++ b/src/vtk/ToolWidgetUtils/common.ts
@@ -1,2 +1,3 @@
 export const HANDLE_PIXEL_SIZE = 20;
 export const POINTS_LABEL = 'points';
+export const MOVE_HANDLE_LABEL = 'moveHandle';