From e6a552a52f021650086413ce842bcaa75fd72d43 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 15 Sep 2023 11:24:52 -0400
Subject: [PATCH] fix(BoundingRectangle): fit handle circles within rectangle

---
 src/components/tools/BoundingRectangle.vue    | 13 ++++++++-----
 src/components/tools/polygon/PolygonSVG2D.vue |  2 +-
 src/constants.ts                              |  2 ++
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
index ff809da18..64c722697 100644
--- a/src/components/tools/BoundingRectangle.vue
+++ b/src/components/tools/BoundingRectangle.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import { computed, ref, watch, toRefs } from 'vue';
+import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import { nonNullable } from '@/src/utils/index';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import { Bounds, Vector3 } from '@kitware/vtk.js/types';
-import { computed, ref, watch, toRefs } from 'vue';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 
 const props = defineProps<{
@@ -44,11 +45,13 @@ const updateRectangle = () => {
     });
   const [x, y] = vtkBoundingBox.getMinPoint(screenBounds);
   const [maxX, maxY] = vtkBoundingBox.getMaxPoint(screenBounds);
+  const handleRadius = ANNOTATION_TOOL_HANDLE_RADIUS / devicePixelRatio;
+  const handleDiameter = 2 * handleRadius;
   rectangle.value = {
-    x,
-    y,
-    width: maxX - x,
-    height: maxY - y,
+    x: x - handleRadius,
+    y: y - handleRadius,
+    width: maxX - x + handleDiameter,
+    height: maxY - y + handleDiameter,
   };
 };
 
diff --git a/src/components/tools/polygon/PolygonSVG2D.vue b/src/components/tools/polygon/PolygonSVG2D.vue
index bcc5e6d82..0b80ed199 100644
--- a/src/components/tools/polygon/PolygonSVG2D.vue
+++ b/src/components/tools/polygon/PolygonSVG2D.vue
@@ -1,6 +1,6 @@
 <template>
   <g>
-    <!-- radius is related to the vtkRectangleWidget scale, specified in state -->
+    <!-- radius should match constants.ANNOTATION_TOOL_HANDLE_RADIUS and should be related to vtkHandleWidget scale. -->
     <circle
       v-for="({ point: [x, y], radius }, index) in handlePoints"
       :key="index"
diff --git a/src/constants.ts b/src/constants.ts
index 7192ccd86..aa6f5a25e 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -45,3 +45,5 @@ export const Messages = {
       'Lost the WebGL context! Please reload the webpage. If the problem persists, you may need to restart your web browser.',
   },
 } as const;
+
+export const ANNOTATION_TOOL_HANDLE_RADIUS = 10; // pixels