feat(viewer): modify connecting line in Circle viewer and drawer

lunit-io · Sep 27, 2022 · ac181c2 · ac181c2
1 parent 5908fe1
commit ac181c2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 18 deletions.
diff --git a/libs/insight-viewer/src/Viewer/CircleDrawer/index.tsx b/libs/insight-viewer/src/Viewer/CircleDrawer/index.tsx
@@ -1,14 +1,17 @@
 import React, { ReactElement } from 'react'
-
+import useTextBox from '../../hooks/useTextBox'
 import { useOverlayContext } from '../../contexts'
 
 import { getCircleEndPoint } from '../../utils/common/getCircleEndPoint'
 import { getCircleRadiusByCenter } from '../../utils/common/getCircleRadius'
 import { getCircleTextPosition } from '../../utils/common/getCircleTextPosition'
 import { getCircleConnectingLine } from '../../utils/common/getCircleConnectingLine'
 import { calculateCircleArea } from '../../utils/common/calculateCircleArea'
+import { modifyConnectingLine } from '../../utils/common/modifyConnectingLine'
+import { stringifyPoints } from '../../utils/common/stringifyPoints'
 
 import { svgWrapperStyle, textStyle } from '../Viewer.styles'
+import { HALF_OF_RULER_TEXT_BOX } from '../../const'
 
 import type { CircleDrawerProps } from './CircleDrawer.types'
 
@@ -18,6 +21,7 @@ export function CircleDrawer({
   setMeasurementEditMode,
 }: CircleDrawerProps): ReactElement | null {
   const { pixelToCanvas } = useOverlayContext()
+  const [textBox, ref] = useTextBox()
 
   const { centerPoint, radius, measuredValue, unit } = measurement
   const endPoint = getCircleEndPoint(centerPoint, radius)
@@ -30,12 +34,17 @@ export function CircleDrawer({
     ? pixelToCanvas(measurement.textPoint)
     : getCircleTextPosition(centerPointOnCanvas, drawingRadius)
 
-  const connectingLine = getCircleConnectingLine([centerPointOnCanvas, endPointOnCanvas], textPointOnCanvas)
-    .map((point) => `${point[0]}, ${point[1]}`)
-    .join(' ')
-
   const area = calculateCircleArea(measuredValue)
 
+  const textCenterModifier = textBox ? textBox.height / 2 - HALF_OF_RULER_TEXT_BOX : 0
+
+  const connectingLineToTextBoxCenter = getCircleConnectingLine(
+    [centerPointOnCanvas, endPointOnCanvas],
+    textPointOnCanvas
+  )
+  const connectingLineToTextBoxEdge = modifyConnectingLine({ textBox, connectingLineToTextBoxCenter })
+  const connectingLine = stringifyPoints(connectingLineToTextBoxEdge)
+
   return (
     <>
       <circle
@@ -59,18 +68,22 @@ export function CircleDrawer({
         cy={centerPointOnCanvas[1]}
         r={drawingRadius}
       />
+      <polyline style={svgWrapperStyle.dashLine} points={connectingLine} />
       <text
+        ref={ref}
         onMouseDown={() => setMeasurementEditMode('textMove')}
-        style={{ ...textStyle[isSelectedMode ? 'select' : 'default'] }}
+        style={{
+          ...textStyle[isSelectedMode ? 'select' : 'default'],
+          visibility: textBox !== null ? 'visible' : 'hidden',
+        }}
         x={textPointOnCanvas[0]}
-        y={textPointOnCanvas[1]}
+        y={textPointOnCanvas[1] + textCenterModifier}
       >
         {`Area = ${area.toLocaleString(undefined, {
           minimumFractionDigits: 1,
           maximumFractionDigits: 1,
         })}${unit}2`}
       </text>
-      <polyline style={svgWrapperStyle.dashLine} points={connectingLine} />
     </>
   )
 }
diff --git a/libs/insight-viewer/src/Viewer/CircleViewer/index.tsx b/libs/insight-viewer/src/Viewer/CircleViewer/index.tsx
@@ -1,18 +1,22 @@
 import React, { ReactElement } from 'react'
-
-import { textStyle, svgWrapperStyle } from '../Viewer.styles'
-
+import useTextBox from '../../hooks/useTextBox'
 import { useOverlayContext } from '../../contexts'
 
 import { calculateCircleArea } from '../../utils/common/calculateCircleArea'
 import { getCircleRadiusByCenter } from '../../utils/common/getCircleRadius'
 import { getCircleEndPoint } from '../../utils/common/getCircleEndPoint'
 import { getCircleConnectingLine } from '../../utils/common/getCircleConnectingLine'
 import { getCircleTextPosition } from '../../utils/common/getCircleTextPosition'
+import { modifyConnectingLine } from '../../utils/common/modifyConnectingLine'
+import { stringifyPoints } from '../../utils/common/stringifyPoints'
+
+import { textStyle, svgWrapperStyle } from '../Viewer.styles'
+import { HALF_OF_RULER_TEXT_BOX } from '../../const'
 
 import type { CircleViewerProps } from './CircleViewer.types'
 
 export function CircleViewer({ measurement, hoveredMeasurement }: CircleViewerProps): ReactElement {
+  const [textBox, ref] = useTextBox()
   const { pixelToCanvas } = useOverlayContext()
 
   const { centerPoint, radius, measuredValue, unit } = measurement
@@ -26,13 +30,17 @@ export function CircleViewer({ measurement, hoveredMeasurement }: CircleViewerPr
     ? pixelToCanvas(measurement.textPoint)
     : getCircleTextPosition(centerPointOnCanvas, drawingRadius)
 
-  const connectingLine = getCircleConnectingLine([centerPointOnCanvas, endPointOnCanvas], textPointOnCanvas)
-    .map((point) => `${point[0]}, ${point[1]}`)
-    .join(' ')
-
   const area = calculateCircleArea(measuredValue)
 
   const isHoveredMeasurement = measurement === hoveredMeasurement
+  const textCenterModifier = textBox ? textBox.height / 2 - HALF_OF_RULER_TEXT_BOX : 0
+
+  const connectingLineToTextBoxCenter = getCircleConnectingLine(
+    [centerPointOnCanvas, endPointOnCanvas],
+    textPointOnCanvas
+  )
+  const connectingLineToTextBoxEdge = modifyConnectingLine({ textBox, connectingLineToTextBoxCenter })
+  const connectingLine = stringifyPoints(connectingLineToTextBoxEdge)
 
   return (
     <>
@@ -63,17 +71,22 @@ export function CircleViewer({ measurement, hoveredMeasurement }: CircleViewerPr
         cy={centerPointOnCanvas[1]}
         r={drawingRadius}
       />
+
+      <polyline style={svgWrapperStyle.dashLine} points={connectingLine} />
       <text
-        style={{ ...textStyle[isHoveredMeasurement ? 'hover' : 'default'] }}
+        ref={ref}
+        style={{
+          ...textStyle[isHoveredMeasurement ? 'hover' : 'default'],
+          visibility: textBox !== null ? 'visible' : 'hidden',
+        }}
         x={textPointOnCanvas[0]}
-        y={textPointOnCanvas[1]}
+        y={textPointOnCanvas[1] + textCenterModifier}
       >
         {`Area = ${area.toLocaleString(undefined, {
           minimumFractionDigits: 1,
           maximumFractionDigits: 1,
         })}${unit}2`}
       </text>
-      <polyline style={svgWrapperStyle.dashLine} points={connectingLine} />
     </>
   )
 }