feat(viewer): add className to handle cursor style

lunit-io · Oct 26, 2022 · 4f13040 · 4f13040
1 parent 48b63fd
commit 4f13040
Show file tree

Hide file tree

Showing 21 changed files with 310 additions and 55 deletions.
diff --git a/libs/insight-viewer/src/Viewer/AnnotationDrawer/index.tsx b/libs/insight-viewer/src/Viewer/AnnotationDrawer/index.tsx
@@ -34,7 +34,7 @@ export function AnnotationDrawer({
     }
   }
 
-  const { annotation, editPoints, currentEditMode, setAnnotationEditMode } = useAnnotationPointsHandler({
+  const { annotation, editPoints, currentEditMode, setAnnotationEditMode, cursorStatus } = useAnnotationPointsHandler({
     isEditing,
     mode,
     lineHead,
@@ -77,13 +77,15 @@ export function AnnotationDrawer({
               lineHead={lineHead}
               selectedAnnotationLabel={selectedAnnotation ? selectedAnnotation.label ?? selectedAnnotation.id : null}
               setAnnotationEditMode={setAnnotationEditMode}
+              cursorStatus={cursorStatus}
             />
           )}
           {annotation.type === 'text' && (
             <TextDrawer
               annotation={annotation}
               isSelectedMode={isSelectedAnnotation}
               setAnnotationEditMode={setAnnotationEditMode}
+              cursorStatus={cursorStatus}
             />
           )}
           {editPoints && (
@@ -96,6 +98,7 @@ export function AnnotationDrawer({
                 isDrawing={isDrawing}
                 cx={editPoints[0]}
                 cy={editPoints[1]}
+                cursorStatus={cursorStatus}
               />
               <EditPointer
                 setEditMode={setAnnotationEditMode}
@@ -105,6 +108,7 @@ export function AnnotationDrawer({
                 isDrawing={isDrawing}
                 cx={editPoints[2]}
                 cy={editPoints[3]}
+                cursorStatus={cursorStatus}
               />
             </>
           )}

diff --git a/libs/insight-viewer/src/Viewer/CircleDrawer/CircleDrawer.types.ts b/libs/insight-viewer/src/Viewer/CircleDrawer/CircleDrawer.types.ts
@@ -1,7 +1,8 @@
-import { EditMode, CircleMeasurement } from '../../types'
+import type { EditMode, CircleMeasurement, CursorStatus } from '../../types'
 
 export interface CircleDrawerProps {
   isSelectedMode: boolean
   measurement: CircleMeasurement
   setMeasurementEditMode: (targetPoint: EditMode) => void
+  cursorStatus: CursorStatus
 }
diff --git a/libs/insight-viewer/src/Viewer/CircleDrawer/index.tsx b/libs/insight-viewer/src/Viewer/CircleDrawer/index.tsx
@@ -2,52 +2,58 @@ import React, { ReactElement } from 'react'
 import useCircleMeasurement from '../../hooks/useCircleMeasurement'
 
 import { svgWrapperStyle, textStyle } from '../Viewer.styles'
+
 import type { CircleDrawerProps } from './CircleDrawer.types'
 
 export function CircleDrawer({
   isSelectedMode,
   measurement,
   setMeasurementEditMode,
+  cursorStatus,
 }: CircleDrawerProps): ReactElement | null {
   const { centerPointOnCanvas, formattedValue, ref, drawingRadius, textBoxPoint, connectingLine, visibility } =
     useCircleMeasurement(measurement)
 
   const handleMoveOnMouseDown = () => setMeasurementEditMode('move')
   const handleTextMoveOnMouseDown = () => setMeasurementEditMode('textMove')
 
+  const cursorClassName = cursorStatus ?? 'pointer'
+
   return (
     <>
       <circle
+        className={`measurement-circle ${cursorClassName}`}
         style={svgWrapperStyle.outline}
         cx={centerPointOnCanvas[0]}
         cy={centerPointOnCanvas[1]}
         r={drawingRadius}
       />
       <circle
+        className={`measurement-circle ${cursorClassName}`}
         style={svgWrapperStyle[isSelectedMode ? 'select' : 'default']}
         cx={centerPointOnCanvas[0]}
         cy={centerPointOnCanvas[1]}
         r={drawingRadius}
       />
       <circle
+        className={`measurement-circle ${cursorClassName}`}
         onMouseDown={handleMoveOnMouseDown}
         style={{ ...svgWrapperStyle.extendsArea, cursor: isSelectedMode ? 'grab' : 'pointer' }}
         cx={centerPointOnCanvas[0]}
         cy={centerPointOnCanvas[1]}
         r={drawingRadius}
-        className="measurement-circle pointer drag"
       />
       <polyline style={{ ...svgWrapperStyle.dashLine, visibility }} points={connectingLine} />
       <text
         ref={ref}
+        className={`measurement-circle label ${cursorClassName}`}
         onMouseDown={handleTextMoveOnMouseDown}
         style={{
           ...textStyle[isSelectedMode ? 'select' : 'default'],
           visibility,
         }}
         x={textBoxPoint[0]}
         y={textBoxPoint[1]}
-        className="measurement-circle label pointer"
       >
         {formattedValue}
       </text>

diff --git a/libs/insight-viewer/src/Viewer/MeasurementDrawer/index.tsx b/libs/insight-viewer/src/Viewer/MeasurementDrawer/index.tsx
@@ -23,16 +23,18 @@ export function MeasurementDrawer({
 }: MeasurementDrawerProps): JSX.Element | null {
   const svgRef = useRef<SVGSVGElement>(null)
 
-  const { editPoints, measurement, currentEditMode, setMeasurementEditMode } = useMeasurementPointsHandler({
-    mode,
-    isEditing,
-    measurements,
-    svgElement: svgRef,
-    selectedMeasurement,
-    onSelectMeasurement,
-    hoveredMeasurement,
-    addMeasurement: onAdd,
-  })
+  const { editPoints, measurement, currentEditMode, setMeasurementEditMode, cursorStatus } =
+    useMeasurementPointsHandler({
+      mode,
+      isEditing,
+      measurements,
+      svgElement: svgRef,
+      selectedMeasurement,
+      onSelectMeasurement,
+      hoveredMeasurement,
+      addMeasurement: onAdd,
+    })
+
   const isSelectedMeasurement = isEditing && selectedMeasurement != null
   const isDrawing = !selectedMeasurement
 
@@ -45,13 +47,15 @@ export function MeasurementDrawer({
           isSelectedMode={isSelectedMeasurement}
           measurement={measurement}
           setMeasurementEditMode={setMeasurementEditMode}
+          cursorStatus={cursorStatus}
         />
       )}
       {measurement.type === 'circle' && (
         <CircleDrawer
           isSelectedMode={isSelectedMeasurement}
           measurement={measurement}
           setMeasurementEditMode={setMeasurementEditMode}
+          cursorStatus={cursorStatus}
         />
       )}
       {editPoints && (
@@ -64,6 +68,7 @@ export function MeasurementDrawer({
             isDrawing={isDrawing}
             cx={editPoints[0]}
             cy={editPoints[1]}
+            cursorStatus={cursorStatus}
           />
           <EditPointer
             setEditMode={setMeasurementEditMode}
@@ -73,6 +78,7 @@ export function MeasurementDrawer({
             isDrawing={isDrawing}
             cx={editPoints[2]}
             cy={editPoints[3]}
+            cursorStatus={cursorStatus}
           />
         </>
       )}

diff --git a/libs/insight-viewer/src/Viewer/PolylineDrawer/PolylineDrawer.types.ts b/libs/insight-viewer/src/Viewer/PolylineDrawer/PolylineDrawer.types.ts
@@ -1,4 +1,11 @@
-import { LineHeadMode, EditMode, PolygonAnnotation, FreeLineAnnotation, LineAnnotation } from '../../types'
+import type {
+  LineHeadMode,
+  EditMode,
+  PolygonAnnotation,
+  FreeLineAnnotation,
+  LineAnnotation,
+  CursorStatus,
+} from '../../types'
 
 export interface PolylineDrawerProps {
   annotation: PolygonAnnotation | FreeLineAnnotation | LineAnnotation
@@ -8,4 +15,5 @@ export interface PolylineDrawerProps {
   selectedAnnotationLabel: string | number | null
   setAnnotationEditMode: (mode: EditMode) => void
   isPolygonSelected: boolean
+  cursorStatus: CursorStatus
 }
diff --git a/libs/insight-viewer/src/Viewer/PolylineDrawer/index.tsx b/libs/insight-viewer/src/Viewer/PolylineDrawer/index.tsx
@@ -19,8 +19,9 @@ export function PolylineDrawer({
   isSelectedMode,
   selectedAnnotationLabel,
   showAnnotationLabel,
-  isPolygonSelected: polygonSelected,
+  isPolygonSelected,
   setAnnotationEditMode,
+  cursorStatus,
 }: PolylineDrawerProps): ReactElement {
   const { pixelToCanvas } = useOverlayContext()
 
@@ -48,8 +49,7 @@ export function PolylineDrawer({
   }
 
   const labelPosition = selectedAnnotationLabel ? polylabel([points.map(pixelToCanvas)]) : null
-  const isPolygonSelected = Boolean(polygonSelected)
-  const isDrawing = isPolygonSelected ? undefined : 'isDrawing'
+  const cursorClassName = cursorStatus ?? 'pointer'
 
   return (
     <g data-cy-annotation onMouseDown={() => setAnnotationEditMode('move')}>
@@ -59,30 +59,36 @@ export function PolylineDrawer({
           {lineHead === 'arrow' && (
             <>
               <PolylineElement
+                className={`annotation-polyline ${cursorClassName} `}
                 isPolygon={isPolygonSelected}
                 style={svgWrapperStyle.outline}
                 points={getArrowPoints()}
               />
               <PolylineElement
+                className={`annotation-polyline ${cursorClassName}`}
                 isPolygon={isPolygonSelected}
                 style={svgWrapperStyle[isSelectedMode ? 'select' : 'default']}
                 points={getArrowPoints()}
               />
             </>
           )}
           <PolylineElement
+            className={`annotation-polyline ${cursorClassName}`}
             isPolygon={isPolygonSelected}
-            className={`annotation-polyline pointer ${isDrawing}`}
             style={svgWrapperStyle[isSelectedMode ? 'select' : 'default']}
             points={polylinePoints}
           />
-          <PolylineElement isPolygon={isPolygonSelected} style={svgWrapperStyle.extendsArea} points={polylinePoints} />
-          className={`annotation-polyline pointer ${isDrawing}`}
+          <PolylineElement
+            className={`annotation-polyline ${cursorClassName}`}
+            isPolygon={isPolygonSelected}
+            style={svgWrapperStyle.extendsArea}
+            points={polylinePoints}
+          />
         </>
       )}
       {showAnnotationLabel && selectedAnnotationLabel && labelPosition && (
         <text
-          className={`annotation-polyline label pointer ${isDrawing}`}
+          className={`annotation-polyline label ${cursorClassName}`}
           style={{ ...textStyle.default }}
           x={labelPosition[0]}
           y={labelPosition[1]}

diff --git a/libs/insight-viewer/src/Viewer/RulerDrawer/RulerDrawer.types.ts b/libs/insight-viewer/src/Viewer/RulerDrawer/RulerDrawer.types.ts
@@ -1,7 +1,8 @@
-import { EditMode, RulerMeasurement } from '../../types'
+import type { CursorStatus, EditMode, RulerMeasurement } from '../../types'
 
 export interface RulerDrawerProps {
   isSelectedMode: boolean
   measurement: RulerMeasurement
   setMeasurementEditMode: (targetPoint: EditMode) => void
+  cursorStatus: CursorStatus
 }
diff --git a/libs/insight-viewer/src/Viewer/RulerDrawer/index.tsx b/libs/insight-viewer/src/Viewer/RulerDrawer/index.tsx
@@ -8,44 +8,45 @@ export function RulerDrawer({
   measurement,
   isSelectedMode,
   setMeasurementEditMode,
+  cursorStatus,
 }: RulerDrawerProps): ReactElement | null {
   const { rulerLine, ref, connectingLine, formattedValue, textBoxPoint, visibility } = useRulerMeasurement(measurement)
 
   const handleMoveOnMouseDown = () => setMeasurementEditMode('move')
   const handleTextMoveOnMouseDown = () => setMeasurementEditMode('textMove')
 
+  const cursorClassName = cursorStatus ?? 'pointer'
+
   return (
     <>
-      <polyline style={svgWrapperStyle.outline} points={rulerLine} />
-      <polyline data-cy-move style={svgWrapperStyle[isSelectedMode ? 'select' : 'default']} points={rulerLine} />
       <polyline
-        className="measurement-ruler pointer"
+        className={`measurement-ruler ${cursorClassName}`}
         onMouseDown={handleMoveOnMouseDown}
         style={svgWrapperStyle.outline}
         points={rulerLine}
       />
       <polyline
         data-cy-move
-        className="measurement-ruler pointer"
+        className={`measurement-ruler ${cursorClassName}`}
         onMouseDown={handleMoveOnMouseDown}
         style={{ ...svgWrapperStyle[isSelectedMode ? 'selectedExtendsArea' : 'extendsArea'] }}
         points={rulerLine}
       />
       <polyline
         data-cy-move
-        className="measurement-ruler pointer"
+        className={`measurement-ruler ${cursorClassName}`}
         style={svgWrapperStyle[isSelectedMode ? 'select' : 'default']}
         points={rulerLine}
       />
       <polyline
-        className="measurement-ruler pointer"
+        className={`measurement-ruler ${cursorClassName}`}
         style={{ ...svgWrapperStyle.dashLine, visibility }}
         points={connectingLine}
       />
 
       <text
         ref={ref}
-        className="measurement-ruler label pointer grab"
+        className={`measurement-ruler label ${cursorClassName}`}
         onMouseDown={handleTextMoveOnMouseDown}
         style={{ ...textStyle[isSelectedMode ? 'select' : 'default'], visibility }}
         x={textBoxPoint[0]}

diff --git a/libs/insight-viewer/src/Viewer/TextDrawer/TextDrawer.types.ts b/libs/insight-viewer/src/Viewer/TextDrawer/TextDrawer.types.ts
@@ -1,7 +1,8 @@
-import { EditMode, TextAnnotation } from '../../types'
+import type { CursorStatus, EditMode, TextAnnotation } from '../../types'
 
 export interface TextDrawerProps {
   annotation: TextAnnotation
   isSelectedMode: boolean
+  cursorStatus: CursorStatus
   setAnnotationEditMode: (mode: EditMode) => void
 }
diff --git a/libs/insight-viewer/src/Viewer/TextDrawer/index.tsx b/libs/insight-viewer/src/Viewer/TextDrawer/index.tsx
@@ -7,7 +7,11 @@ import { TEXT_PADDING } from '../../const'
 import type { TextDrawerProps } from './TextDrawer.types'
 export { Typing as TypingDrawer } from './Typing'
 
-export function TextDrawer({ annotation, setAnnotationEditMode }: TextDrawerProps): React.ReactElement | null {
+export function TextDrawer({
+  annotation,
+  setAnnotationEditMode,
+  cursorStatus,
+}: TextDrawerProps): React.ReactElement | null {
   const { pixelToCanvas } = useOverlayContext()
 
   const { points, label } = annotation
@@ -19,11 +23,13 @@ export function TextDrawer({ annotation, setAnnotationEditMode }: TextDrawerProp
   }
   const dimensions = [end[0] - start[0], end[1] - start[1]]
 
+  const cursorClassName = cursorStatus ?? 'pointer'
+
   return (
     <>
       {label && (
         <text
-          className="annotation-text label grab"
+          className={`annotation-text label ${cursorClassName}`}
           style={{
             ...textStyle.select,
             textAnchor: 'start',
@@ -44,7 +50,7 @@ export function TextDrawer({ annotation, setAnnotationEditMode }: TextDrawerProp
         </text>
       )}
       <rect
-        className="annotation-text box grab"
+        className={`annotation-text box ${cursorClassName}`}
         style={svgBoxStyle.select}
         x={start[0]}
         y={start[1]}

diff --git a/libs/insight-viewer/src/Viewer/TextViewer/index.tsx b/libs/insight-viewer/src/Viewer/TextViewer/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 
-import { TextViewerProps } from './TextViewer.types'
 import { textStyle, svgBoxStyle, TEXT_SIZE, LINE_HEIGHT } from '../Viewer.styles'
 import { useOverlayContext } from '../../contexts'
 import { TEXT_PADDING } from '../../const'
 
+import type { TextViewerProps } from './TextViewer.types'
+
 export function TextViewer({ annotation, hoveredAnnotation }: TextViewerProps): React.ReactElement {
   const { pixelToCanvas } = useOverlayContext()
   const isHoveredAnnotation = annotation === hoveredAnnotation
@@ -26,7 +27,7 @@ export function TextViewer({ annotation, hoveredAnnotation }: TextViewerProps):
       >
         {annotation.label.split('\n').map((line, index) => (
           <tspan
-            className="annotation-text label"
+            className="annotation-text label pointer"
             x={start[0] + TEXT_PADDING}
             y={start[1] + index * TEXT_SIZE * LINE_HEIGHT + TEXT_PADDING}
             key={index}