fix(annotation-tools): handle radius too small with devicePixelRatio

src/components/tools/BoundingRectangle.vue

@@ -57,7 +57,7 @@ const updateRectangle = () => {
   const [x, y] = vtkBoundingBox.getMinPoint(screenBounds);
   const [maxX, maxY] = vtkBoundingBox.getMaxPoint(screenBounds);
   // Plus 2 to account for the stroke width
-  const handleRadius = (ANNOTATION_TOOL_HANDLE_RADIUS + 2) / devicePixelRatio;
+  const handleRadius = ANNOTATION_TOOL_HANDLE_RADIUS + 2;
   const handleDiameter = 2 * handleRadius;
   rectangle.value = {
     x: x - handleRadius,

src/components/tools/crosshairs/CrosshairSVG2D.vue

@@ -109,7 +109,6 @@ export default defineComponent({
     });
 
     return {
-      devicePixelRatio,
       x: computed(() => position2D.value?.x),
       y: computed(() => position2D.value?.y),
     };

src/components/tools/polygon/PolygonSVG2D.vue

@@ -1,6 +1,5 @@
 <template>
   <g>
-    <!-- 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"
@@ -9,7 +8,7 @@
       :stroke="color"
       :stroke-width="strokeWidth"
       fill="transparent"
-      :r="radius / devicePixelRatio"
+      :r="radius"
     />
     <polyline
       :points="linePoints"

src/components/tools/rectangle/RectangleSVG2D.vue

@@ -9,15 +9,14 @@
       :stroke-width="strokeWidth"
       :fill="fillColor"
     />
-    <!-- radius should match constants.ANNOTATION_TOOL_HANDLE_RADIUS and should be related to vtkHandleWidget scale. -->
     <circle
       v-if="first"
       :cx="first.x"
       :cy="first.y"
       :stroke="color"
       :stroke-width="strokeWidth"
       fill="transparent"
-      :r="10 / devicePixelRatio"
+      :r="ANNOTATION_TOOL_HANDLE_RADIUS"
     />
     <circle
       v-if="second"
@@ -26,15 +25,15 @@
       :stroke="color"
       :stroke-width="strokeWidth"
       fill="transparent"
-      :r="10 / devicePixelRatio"
+      :r="ANNOTATION_TOOL_HANDLE_RADIUS"
     />
   </g>
 </template>
 
 <script lang="ts">
 import { useResizeObserver } from '@/src/composables/useResizeObserver';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { ToolContainer } from '@/src/constants';
+import { ToolContainer, ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
@@ -142,10 +141,10 @@ export default defineComponent({
     });
 
     return {
-      devicePixelRatio,
       first: firstPoint,
       second: secondPoint,
       rectangle,
+      ANNOTATION_TOOL_HANDLE_RADIUS,
     };
   },
 });

src/components/tools/ruler/RulerSVG2D.vue

@@ -9,15 +9,14 @@
       :stroke="color"
       :stroke-width="strokeWidth"
     />
-    <!-- radius should match constants.ANNOTATION_TOOL_HANDLE_RADIUS and should be related to vtkHandleWidget scale. -->
     <circle
       v-if="first"
       :cx="first.x"
       :cy="first.y"
       :stroke="color"
       :stroke-width="strokeWidth"
       fill="transparent"
-      :r="10 / devicePixelRatio"
+      :r="ANNOTATION_TOOL_HANDLE_RADIUS"
     />
     <circle
       v-if="second"
@@ -26,7 +25,7 @@
       :stroke="color"
       :stroke-width="strokeWidth"
       fill="transparent"
-      :r="10 / devicePixelRatio"
+      :r="ANNOTATION_TOOL_HANDLE_RADIUS"
       class="handle"
     />
     <text
@@ -50,7 +49,7 @@
 <script lang="ts">
 import { useResizeObserver } from '@/src/composables/useResizeObserver';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { ToolContainer } from '@/src/constants';
+import { ToolContainer, ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
@@ -167,13 +166,13 @@ export default defineComponent({
     });
 
     return {
-      devicePixelRatio,
       textdx: computed(() => textProperties.value?.dx ?? 0),
       textdy: computed(() => textProperties.value?.dy ?? 0),
       anchor: computed(() => textProperties.value?.anchor ?? 'start'),
       first: firstPoint,
       second: secondPoint,
       rulerLength: computed(() => length?.value?.toFixed(2) ?? ''),
+      ANNOTATION_TOOL_HANDLE_RADIUS,
     };
   },
 });

src/constants.ts

@@ -46,7 +46,9 @@ export const Messages = {
   },
 } as const;
 
-export const ANNOTATION_TOOL_HANDLE_RADIUS = 10; // pixels
+export const ANNOTATION_TOOL_HANDLE_RADIUS = 6; // CSS pixels
+export const PICKABLE_ANNOTATION_TOOL_HANDLE_RADIUS =
+  ANNOTATION_TOOL_HANDLE_RADIUS * 2;
 
 export const ACTIONS = [
   // set the current tool

src/vtk/ToolWidgetUtils/pointState.js

@@ -3,10 +3,10 @@ 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';
 import { watchStore } from '@/src/vtk/ToolWidgetUtils/utils';
-import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
+import { PICKABLE_ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 import { toRaw } from 'vue';
 
-const PIXEL_SIZE = ANNOTATION_TOOL_HANDLE_RADIUS * 2;
+const DIAMETER = PICKABLE_ANNOTATION_TOOL_HANDLE_RADIUS * 2;
 
 function _createPointState(
   publicAPI,
@@ -20,7 +20,7 @@ function _createPointState(
   });
   vtkWidgetState.extend(publicAPI, model, {});
   visibleMixin.extend(publicAPI, model, { visible });
-  scale1Mixin.extend(publicAPI, model, { scale1: PIXEL_SIZE });
+  scale1Mixin.extend(publicAPI, model, { scale1: DIAMETER });
 
   const getTool = () => {
     return model._store.toolByID[model.id];