feat(docs): add resetAnnotation

lunit-io · Nov 1, 2022 · 400844d · 400844d
1 parent c6c66e1
commit 400844d
Showing 1 changed file with 31 additions and 11 deletions.
diff --git a/apps/insight-viewer-docs/containers/Annotation/Drawer/index.tsx b/apps/insight-viewer-docs/containers/Annotation/Drawer/index.tsx
@@ -8,9 +8,20 @@ import InsightViewer, {
   AnnotationOverlay,
   AnnotationMode,
   LineHeadMode,
+  Annotation,
 } from '@lunit/insight-viewer'
+import {
+  POLYGON_ANNOTATIONS,
+  LINE_ANNOTATIONS,
+  FREELINE_ANNOTATIONS,
+  TEXT_ANNOTATIONS,
+} from '@insight-viewer-library/fixtures'
 import useImageSelect from '../../../components/ImageSelect/useImageSelect'
 
+export type InitialAnnotations = {
+  [mode in AnnotationMode]: Annotation[]
+}
+
 const style = {
   display: 'flex',
   alignItems: 'center',
@@ -20,6 +31,15 @@ const style = {
 /** Mock svg Size */
 const DEFAULT_SIZE = { width: 700, height: 700 }
 
+const INITIAL_ANNOTATIONS: InitialAnnotations = {
+  line: LINE_ANNOTATIONS,
+  freeLine: FREELINE_ANNOTATIONS,
+  polygon: POLYGON_ANNOTATIONS,
+  text: TEXT_ANNOTATIONS,
+  // TODO: Changed the mock data when adding Circle mode
+  circle: POLYGON_ANNOTATIONS,
+}
+
 function AnnotationDrawerContainer(): JSX.Element {
   const [annotationMode, setAnnotationMode] = useState<AnnotationMode>('polygon')
   const [lineHeadMode, setLineHeadMode] = useState<LineHeadMode>('normal')
@@ -40,7 +60,10 @@ function AnnotationDrawerContainer(): JSX.Element {
     hoverAnnotation,
     selectAnnotation,
     removeAllAnnotation,
-  } = useAnnotation()
+    resetAnnotation,
+  } = useAnnotation({
+    initialAnnotation: INITIAL_ANNOTATIONS[annotationMode],
+  })
 
   const handleAnnotationModeClick = (mode: AnnotationMode) => {
     setAnnotationMode(mode)
@@ -74,7 +97,7 @@ function AnnotationDrawerContainer(): JSX.Element {
         <Stack direction="row">
           <p style={{ marginRight: '10px' }}>Select Annotation mode</p>
           <Radio value="polygon">Polygon</Radio>
-          <Radio value="line">line</Radio>
+          <Radio value="line">Line</Radio>
           <Radio value="freeLine">Free Line</Radio>
           <Radio value="text">Text</Radio>
           <Radio value="circle">Circle - Not implemented yet</Radio>
@@ -83,17 +106,14 @@ function AnnotationDrawerContainer(): JSX.Element {
       <RadioGroup onChange={handleLineHeadModeButtonChange} value={lineHeadMode}>
         <Stack direction="row">
           <p style={{ marginRight: '10px' }}>Select Line Head mode</p>
-          <Radio value="normal">normal</Radio>
-          <Radio value="arrow">arrow</Radio>
+          <Radio value="normal">Normal</Radio>
+          <Radio value="arrow">Arrow</Radio>
         </Stack>
       </RadioGroup>
-      <Button
-        data-cy-name="remove-button"
-        size="sm"
-        marginBottom="10px"
-        colorScheme="blue"
-        onClick={removeAllAnnotation}
-      >
+      <Button data-cy-name="remove-button" size="sm" mb={2} mr={3} colorScheme="blue" onClick={resetAnnotation}>
+        reset
+      </Button>
+      <Button data-cy-name="remove-button" size="sm" mb={2} colorScheme="blue" onClick={removeAllAnnotation}>
         remove all
       </Button>
       <Resizable style={style} defaultSize={DEFAULT_SIZE} className={`annotation ${annotationMode}`}>