refactor(drawing-tools): revert non-scaling-size (#6689)

`vector-effect: non-scaling-size` isn't implemented in browsers, so this reverts it back to `non-scaling-stroke` in drag handles, point marks, and transcription lines.
zooniverse · Feb 13, 2025 · 0ba440e · 0ba440e
1 parent 031f718
commit 0ba440e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/packages/lib-classifier/src/plugins/drawingTools/components/DragHandle/DragHandle.js b/packages/lib-classifier/src/plugins/drawingTools/components/DragHandle/DragHandle.js
@@ -34,8 +34,8 @@ const DragHandle = forwardRef(function DragHandle(
 
   return (
     <g ref={ref} transform={transform} data-testid={testid} >
-      <StyledCircle r={radius} {...styleProps} vectorEffect={'non-scaling-size'} />
-      <StyledCircle r={2 * radius} fill='transparent' stroke='transparent' vectorEffect={'non-scaling-size'} />
+      <StyledCircle r={radius} {...styleProps} vectorEffect={'non-scaling-stroke'} />
+      <StyledCircle r={2 * radius} fill='transparent' stroke='transparent' vectorEffect={'non-scaling-stroke'} />
     </g>
   )
 })

diff --git a/packages/lib-classifier/src/plugins/drawingTools/components/Point/Point.js b/packages/lib-classifier/src/plugins/drawingTools/components/Point/Point.js
@@ -34,33 +34,33 @@ function Point({ active = false, children, mark = {DEFAULT_MARK}, onFinish, scal
         x2='0'
         y2={-1 * selectedRadius}
         strokeWidth={crosshairWidth}
-        vectorEffect={'non-scaling-size'}
+        vectorEffect={'non-scaling-stroke'}
       />
       <line
         x1={-1 * crosshairSpace * selectedRadius}
         y1='0'
         x2={-1 * selectedRadius}
         y2='0'
         strokeWidth={crosshairWidth}
-        vectorEffect={'non-scaling-size'}
+        vectorEffect={'non-scaling-stroke'}
       />
       <line
         x1='0'
         y1={crosshairSpace * selectedRadius}
         x2='0'
         y2={selectedRadius}
         strokeWidth={crosshairWidth}
-        vectorEffect={'non-scaling-size'}
+        vectorEffect={'non-scaling-stroke'}
       />
       <line
         x1={crosshairSpace * selectedRadius}
         y1='0'
         x2={selectedRadius}
         y2='0'
         strokeWidth={crosshairWidth}
-        vectorEffect={'non-scaling-size'}
+        vectorEffect={'non-scaling-stroke'}
       />
-      <circle r={active ? selectedRadius : radius} vectorEffect={'non-scaling-size'} />
+      <circle r={active ? selectedRadius : radius} vectorEffect={'non-scaling-stroke'} />
     </g>
   )
 }

diff --git a/...al/components/TranscriptionLine/components/TranscriptionLineMark/TranscriptionLineMark.js b/...al/components/TranscriptionLine/components/TranscriptionLineMark/TranscriptionLineMark.js
@@ -10,7 +10,7 @@ const Circle = ({ fill, r, transform, ...props }) => (
       fill={fill}
       r={r}
       stroke='currentColor'
-      vectorEffect={'non-scaling-size'}
+      vectorEffect={'non-scaling-stroke'}
       {...props}
     />
   </g>