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

No need to scale SVG circle radius by devicePixelRatio.
Kitware · Oct 9, 2023 · 50c81e1 · 50c81e1
1 parent 431e60b
commit 50c81e1
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 14 deletions.
diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
@@ -46,7 +46,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,

diff --git a/src/components/tools/crosshairs/CrosshairSVG2D.vue b/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),
     };

diff --git a/src/components/tools/polygon/PolygonSVG2D.vue b/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"

diff --git a/src/components/tools/rectangle/RectangleSVG2D.vue b/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,
     };
   },
 });

diff --git a/src/components/tools/ruler/RulerSVG2D.vue b/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,
     };
   },
 });