feat(docs): add shortkeys in drawing page

lunit-io · Nov 11, 2022 · e3f6145 · e3f6145
1 parent 825251d
commit e3f6145
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 7 deletions.
diff --git a/apps/insight-viewer-docs/containers/Annotation/Drawer/index.tsx b/apps/insight-viewer-docs/containers/Annotation/Drawer/index.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from 'react'
+import { ChangeEvent, useState, useEffect } from 'react'
 import { Box, Switch, Radio, RadioGroup, Stack, Button } from '@chakra-ui/react'
 import { Resizable } from 're-resizable'
 import InsightViewer, {
@@ -23,6 +23,7 @@ const DEFAULT_SIZE = { width: 700, height: 700 }
 function AnnotationDrawerContainer(): JSX.Element {
   const [annotationMode, setAnnotationMode] = useState<AnnotationMode>('polygon')
   const [lineHeadMode, setLineHeadMode] = useState<LineHeadMode>('normal')
+  const [isDrawing, setIsDrawing] = useState(true)
   const [isEditing, setIsEditing] = useState(false)
   const [isShowLabel, setIsShowLabel] = useState(false)
 
@@ -58,16 +59,40 @@ function AnnotationDrawerContainer(): JSX.Element {
     setIsShowLabel(event.target.checked)
   }
 
+  const handleDrawModeChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setIsDrawing(event.target.checked)
+  }
+
+  useEffect(() => {
+    function handleKeyDown({ code }: KeyboardEvent) {
+      if (code === 'KeyD') {
+        setIsDrawing((prev) => !prev)
+      }
+      if (code === 'KeyE') {
+        setIsEditing((prev) => !prev)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [setIsDrawing, setIsEditing])
+
   return (
     <Box data-cy-loaded={loadingState}>
       <Box>
         <ImageSelect />
       </Box>
       <Box>
-        edit mode <Switch data-cy-edit={isEditing} onChange={handleEditModeChange} isChecked={isEditing} />
+        Draw enabled (D) <Switch data-cy-edit={isDrawing} onChange={handleDrawModeChange} isChecked={isDrawing} />
+      </Box>
+      <Box>
+        Edit enabled (E) <Switch data-cy-edit={isEditing} onChange={handleEditModeChange} isChecked={isEditing} />
       </Box>
       <Box>
-        show label{' '}
+        Show label{' '}
         <Switch data-cy-show-label={isShowLabel} onChange={handleShowLabelModeChange} isChecked={isShowLabel} />
       </Box>
       <RadioGroup onChange={handleAnnotationModeClick} value={annotationMode}>
@@ -100,7 +125,7 @@ function AnnotationDrawerContainer(): JSX.Element {
         <InsightViewer image={image} viewport={viewport} onViewportChange={setViewport}>
           {loadingState === 'success' && (
             <AnnotationOverlay
-              isDrawing
+              isDrawing={isDrawing}
               isEditing={isEditing}
               width={700}
               height={700}

diff --git a/apps/insight-viewer-docs/containers/Measurement/Drawer/index.tsx b/apps/insight-viewer-docs/containers/Measurement/Drawer/index.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-unresolved */
-import React, { useState, ChangeEvent } from 'react'
+import React, { useState, ChangeEvent, useEffect } from 'react'
 import { Box, Switch, Radio, RadioGroup, Stack, Button } from '@chakra-ui/react'
 import { Resizable } from 're-resizable'
 import InsightViewer, {
@@ -23,6 +23,7 @@ const DEFAULT_SIZE = { width: 700, height: 700 }
 function MeasurementDrawerContainer(): JSX.Element {
   const [measurementMode, setMeasurementMode] = useState<MeasurementMode>('ruler')
   const [isEditing, setIsEditing] = useState(false)
+  const [isDrawing, setIsDrawing] = useState(true)
 
   const { ImageSelect, selected } = useImageSelect()
   const { loadingState, image } = useImage({
@@ -48,14 +49,37 @@ function MeasurementDrawerContainer(): JSX.Element {
   const handleEditModeChange = (event: ChangeEvent<HTMLInputElement>) => {
     setIsEditing(event.target.checked)
   }
+  const handleDrawModeChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setIsDrawing(event.target.checked)
+  }
+
+  useEffect(() => {
+    function handleKeyDown({ code }: KeyboardEvent) {
+      if (code === 'KeyD') {
+        setIsDrawing((prev) => !prev)
+      }
+      if (code === 'KeyE') {
+        setIsEditing((prev) => !prev)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [setIsDrawing, setIsEditing])
 
   return (
     <>
       <Box>
         <ImageSelect />
       </Box>
       <Box>
-        edit mode <Switch data-cy-edit={isEditing} onChange={handleEditModeChange} isChecked={isEditing} />
+        Draw enabled (D) <Switch data-cy-edit={isDrawing} onChange={handleDrawModeChange} isChecked={isDrawing} />
+      </Box>
+      <Box>
+        Edit enabled (E) <Switch data-cy-edit={isEditing} onChange={handleEditModeChange} isChecked={isEditing} />
       </Box>
       <RadioGroup onChange={handleMeasurementModeClick} value={measurementMode}>
         <Stack direction="row">
@@ -82,7 +106,7 @@ function MeasurementDrawerContainer(): JSX.Element {
                 onSelect={selectMeasurement}
                 onRemove={removeMeasurement}
                 isEditing={isEditing}
-                isDrawing
+                isDrawing={isDrawing}
                 mode={measurementMode}
                 // If no mode is defined, the default value is ruler.
               />