fix: converted react image annotate to use react-hotkeys, fixed double

hotkeys

Author: seveibar

package.json

@@ -12,6 +12,7 @@
     "material-survey": "^1.0.34",
     "moment": "^2.23.0",
     "react-full-screen": "^0.2.4",
+    "react-hotkeys": "^2.0.0",
     "react-json-view": "^1.19.1",
     "react-markdown": "^4.0.6",
     "react-monaco-editor": "^0.25.1",
@@ -68,7 +69,7 @@
     "babel-loader": "^8.0.5",
     "babel-preset-react-app": "^7.0.0",
     "gh-pages": "^2.0.1",
-    "prettier": "^2.0.4",
+    "prettier": "^2.0.5",
     "raw.macro": "^0.3.0",
     "react-github-btn": "^1.1.1",
     "react-scripts": "^2.1.8"

src/Annotator/index.js

@@ -17,6 +17,7 @@ import generalReducer from "./reducers/general-reducer.js"
 import imageReducer from "./reducers/image-reducer.js"
 import videoReducer from "./reducers/video-reducer.js"
 import historyHandler from "./reducers/history-handler.js"
+import ShortcutsManager from "../ShortcutsManager"
 
 import useEventCallback from "use-event-callback"
 import makeImmutable, { without } from "seamless-immutable"
@@ -131,13 +132,15 @@ export const Annotator = ({
 
   return (
     <SettingsProvider>
-      <MainLayout
-        RegionEditLabel={RegionEditLabel}
-        alwaysShowNextButton={Boolean(onNextImage)}
-        alwaysShowPrevButton={Boolean(onPrevImage)}
-        state={state}
-        dispatch={dispatch}
-      />
+      <ShortcutsManager dispatch={dispatch}>
+        <MainLayout
+          RegionEditLabel={RegionEditLabel}
+          alwaysShowNextButton={Boolean(onNextImage)}
+          alwaysShowPrevButton={Boolean(onPrevImage)}
+          state={state}
+          dispatch={dispatch}
+        />
+      </ShortcutsManager>
     </SettingsProvider>
   )
 }

src/Annotator/index.story.js

@@ -7,6 +7,8 @@ import { action as actionAddon } from "@storybook/addon-actions"
 import exampleImage from "../ImageCanvas/seves_desk.story.jpg"
 import bikeImg1 from "./bike-pic.png"
 import bikeImg2 from "./bike-pic2.png"
+import { HotKeys } from "react-hotkeys"
+import { defaultKeyMap } from "../ShortcutsManager"
 
 import Annotator from "./"
 
@@ -562,3 +564,44 @@ storiesOf("Annotator", module)
       />
     )
   })
+  .add("Two on sample page w/ hotkeys", () => {
+    console.log({ defaultKeyMap })
+    return (
+      <HotKeys keyMap={defaultKeyMap}>
+        <div>
+          <Annotator
+            onExit={actionAddon("onExit")}
+            middlewares={[
+              (store) => (next) => (action) => {
+                actionAddon(action.type)(action)
+                return next(action)
+              },
+            ]}
+            images={[
+              {
+                src: exampleImage,
+                name: "Seve's Desk",
+                regions: testRegions,
+              },
+            ]}
+          />
+          <Annotator
+            onExit={actionAddon("onExit")}
+            middlewares={[
+              (store) => (next) => (action) => {
+                actionAddon(action.type)(action)
+                return next(action)
+              },
+            ]}
+            images={[
+              {
+                src: exampleImage,
+                name: "Seve's Desk",
+                regions: testRegions,
+              },
+            ]}
+          />
+        </div>
+      </HotKeys>
+    )
+  })

src/DemoSite/index.story.js

@@ -7,4 +7,5 @@ import { action } from "@storybook/addon-actions"
 
 import DemoSite from "./"
 
-storiesOf("DemoSite", module).add("Basic", () => <DemoSite />)
+storiesOf("DemoSite", module)
+  .add("Basic", () => <DemoSite />)

src/ShortcutsManager/index.js

@@ -0,0 +1,118 @@
+import React, { useMemo } from "react"
+import { HotKeys } from "react-hotkeys"
+
+export const defaultHotkeys = [
+  {
+    id: "select_tool",
+    description: "Switch to the Select Tool",
+    binding: "escape",
+  },
+  {
+    id: "zoom_tool",
+    description: "Select the Zoom Tool",
+    binding: "z",
+  },
+  {
+    id: "create_point",
+    description: "Create a point",
+  },
+  {
+    id: "pan_tool",
+    description: "Select the Pan Tool",
+  },
+  {
+    id: "create_polygon",
+    description: "Create a Polygon",
+  },
+  {
+    id: "create_pixel",
+    description: "Create a Pixel Mask",
+  },
+  {
+    id: "save_and_previous_sample",
+    description: "Save and go to previous sample",
+  },
+  {
+    id: "save_and_next_sample",
+    description: "Save and go to next sample",
+  },
+  {
+    id: "save_and_exit_sample",
+    description: "Save and exit current sample",
+  },
+  {
+    id: "exit_sample",
+    description: "Exit sample without saving",
+  },
+]
+export const defaultKeyMap = {}
+for (const { id, binding } of defaultHotkeys) defaultKeyMap[id] = binding
+
+export default ({ children, dispatch }) => {
+  const handlers = useMemo(
+    () => ({
+      select_tool: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "select-tool",
+        })
+      },
+      zoom_tool: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "zoom",
+        })
+      },
+      create_point: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-point",
+        })
+      },
+      pan_tool: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "pan",
+        })
+      },
+      create_polygon: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-polygon",
+        })
+      },
+      create_pixel: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-pixel",
+        })
+      },
+      save_and_previous_sample: () => {
+        dispatch({
+          type: "HEADER_BUTTON_CLICKED",
+          buttonName: "Prev",
+        })
+      },
+      save_and_next_sample: () => {
+        dispatch({
+          type: "HEADER_BUTTON_CLICKED",
+          buttonName: "Next",
+        })
+      },
+      save_and_exit_sample: () => {
+        dispatch({
+          type: "HEADER_BUTTON_CLICKED",
+          buttonName: "Save",
+        })
+      },
+      // TODO
+      // exit_sample: () => {
+      //   dispatch({
+      //     type: "",
+      //   })
+      // }
+    }),
+    [dispatch]
+  )
+  return <HotKeys handlers={handlers}>{children}</HotKeys>
+}

src/Sidebar/index.js

@@ -105,7 +105,7 @@ export const Sidebar = ({
         />
       )}
       <History history={history} onRestoreHistory={() => onRestoreHistory()} />
-      <Shortcuts onShortcutActionDispatched={onShortcutActionDispatched} />
+      {/* <Shortcuts onShortcutActionDispatched={onShortcutActionDispatched} /> */}
     </div>
   )
 }