Style freehand lines with CSS

zooniverse · Jul 12, 2024 · e64bca0 · e64bca0
1 parent 3991222
commit e64bca0
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/...-classifier/src/plugins/drawingTools/experimental/components/FreehandLine/FreehandLine.js b/...-classifier/src/plugins/drawingTools/experimental/components/FreehandLine/FreehandLine.js
@@ -9,6 +9,10 @@ const GRAB_STROKE_WIDTH = 10
 const FINISHER_RADIUS = 4
 
 const StyledGroup = styled.g`
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+
   &:hover {
     cursor: pointer;
   }
@@ -118,10 +122,7 @@ function FreehandLine({ active, mark, onFinish, scale }) {
           <path // Main Path that's visible
             d={pointsToPath(pts)}
             fill='none'
-            strokeWidth={STROKE_WIDTH}
             strokeOpacity={1}
-            strokeLinecap='round'
-            strokeLinejoin='round'
             vectorEffect={'non-scaling-stroke'}
           />
           <title>{getHoverText()}</title>
@@ -140,7 +141,6 @@ function FreehandLine({ active, mark, onFinish, scale }) {
       <path // Clipped Path
         d={pointsToPath(mark.splicePathRender)}
         strokeDasharray='2 2'
-        strokeWidth={STROKE_WIDTH}
         opacity=".4"
         vectorEffect={'non-scaling-stroke'}
       />