Widen default ArcRendering 1px->2px

GMOD · Sep 5, 2024 · 5f4b45f · 5f4b45f
1 parent 2e225ae
commit 5f4b45f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 18 deletions.
diff --git a/plugins/arc/src/ArcRenderer/ArcRendering.tsx b/plugins/arc/src/ArcRenderer/ArcRendering.tsx
@@ -14,15 +14,17 @@ function Arc({
   region,
   bpPerPx,
   config,
-  onFeatureClick,
+  height: displayHeight,
   feature,
+  onFeatureClick,
 }: {
   selectedFeatureId?: string
   region: Region
   config: AnyConfigurationModel
-  onFeatureClick: (event: React.MouseEvent, featureId: string) => void
   bpPerPx: number
+  height: number
   feature: Feature
+  onFeatureClick: (event: React.MouseEvent, featureId: string) => void
 }) {
   const [isMouseOvered, setIsMouseOvered] = useState(false)
   const [left, right] = bpSpanPx(
@@ -32,15 +34,17 @@ function Arc({
     bpPerPx,
   )
   const featureId = feature.id()
-  let stroke = readConfObject(config, 'color', { feature })
-  let textStroke = 'black'
-  if (selectedFeatureId && String(selectedFeatureId) === String(feature.id())) {
-    stroke = textStroke = 'red'
-  }
+  const selected =
+    selectedFeatureId && String(selectedFeatureId) === String(feature.id())
+  const stroke = selected ? 'red' : readConfObject(config, 'color', { feature })
+  const textStroke = selected ? 'red' : 'black'
   const label = readConfObject(config, 'label', { feature })
   const caption = readConfObject(config, 'caption', { feature })
-  const strokeWidth = readConfObject(config, 'thickness', { feature }) || 1
-  const height = readConfObject(config, 'height', { feature }) || 100
+  const strokeWidth = readConfObject(config, 'thickness', { feature }) || 2
+  const height = Math.min(
+    readConfObject(config, 'height', { feature }) || 100,
+    displayHeight,
+  )
   const ref = React.createRef<SVGPathElement>()
 
   // formula: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves
@@ -110,7 +114,6 @@ function describeArc(
 ) {
   const start = polarToCartesian(x, y, radius, endAngle)
   const end = polarToCartesian(x, y, radius, startAngle)
-
   const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'
 
   return [
@@ -152,14 +155,13 @@ function SemiCircles({
   )
 
   const featureId = feature.id()
-  let stroke = readConfObject(config, 'color', { feature })
-  let textStroke = 'black'
-  if (selectedFeatureId && String(selectedFeatureId) === String(feature.id())) {
-    stroke = textStroke = 'red'
-  }
+  const selected =
+    selectedFeatureId && String(selectedFeatureId) === String(feature.id())
+  const stroke = selected ? 'red' : readConfObject(config, 'color', { feature })
+  const textStroke = selected ? 'red' : 'black'
   const label = readConfObject(config, 'label', { feature })
   const caption = readConfObject(config, 'caption', { feature })
-  const strokeWidth = readConfObject(config, 'thickness', { feature }) || 1
+  const strokeWidth = readConfObject(config, 'thickness', { feature }) || 2
   const ref = React.createRef<SVGPathElement>()
   const textYCoord = (right - left) / 2
 
@@ -247,6 +249,7 @@ const ArcRendering = observer(function ({
         ) : (
           <Arc
             key={f.id()}
+            height={height}
             config={config}
             region={region}
             bpPerPx={bpPerPx}

diff --git a/plugins/arc/src/ArcRenderer/__snapshots__/ArcRendering.test.tsx.snap b/plugins/arc/src/ArcRenderer/__snapshots__/ArcRendering.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`one feature 1`] = `
         pointer-events="stroke"
         stroke="#000000"
         stroke-opacity="1"
-        stroke-width="1"
+        stroke-width="2"
       />
       <text
         stroke="white"
@@ -53,7 +53,7 @@ exports[`one semicircle 1`] = `
         pointer-events="stroke"
         stroke="#000000"
         stroke-opacity="1"
-        stroke-width="1"
+        stroke-width="2"
       />
       <text
         stroke="white"