fix for uncontrolled resizing

Author: seveibar

src/Annotator/index.js

@@ -17,7 +17,6 @@ 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"
@@ -132,15 +131,13 @@ export const Annotator = ({
 
   return (
     <SettingsProvider>
-      <ShortcutsManager dispatch={dispatch}>
-        <MainLayout
-          RegionEditLabel={RegionEditLabel}
-          alwaysShowNextButton={Boolean(onNextImage)}
-          alwaysShowPrevButton={Boolean(onPrevImage)}
-          state={state}
-          dispatch={dispatch}
-        />
-      </ShortcutsManager>
+      <MainLayout
+        RegionEditLabel={RegionEditLabel}
+        alwaysShowNextButton={Boolean(onNextImage)}
+        alwaysShowPrevButton={Boolean(onPrevImage)}
+        state={state}
+        dispatch={dispatch}
+      />
     </SettingsProvider>
   )
 }

src/Annotator/index.story.js

@@ -50,6 +50,43 @@ storiesOf("Annotator", module)
       ]}
     />
   ))
+  .add("Fixed Size Container", () => (
+    <div style={{ width: 500, height: 500 }}>
+      <Annotator
+        onExit={actionAddon("onExit")}
+        middlewares={[
+          (store) => (next) => (action) => {
+            actionAddon(action.type)(action)
+            return next(action)
+          },
+        ]}
+        labelImages
+        regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
+        regionTagList={["tag1", "tag2", "tag3"]}
+        imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
+        imageTagList={["tag1", "tag2", "tag3"]}
+        images={[
+          {
+            src: exampleImage,
+            name: "Seve's Desk",
+            regions: testRegions,
+          },
+          {
+            src: "https://loremflickr.com/100/100/cars?lock=1",
+            name: "Frame 0036",
+          },
+          {
+            src: "https://loremflickr.com/100/100/cars?lock=2",
+            name: "Frame 0037",
+          },
+          {
+            src: "https://loremflickr.com/100/100/cars?lock=3",
+            name: "Frame 0038",
+          },
+        ]}
+      />
+    </div>
+  ))
   .add("Shrunk Annotator (Test Fullscreen)", () => (
     <div style={{ padding: 100 }}>
       <Annotator
@@ -565,7 +602,6 @@ storiesOf("Annotator", module)
     )
   })
   .add("Two on sample page w/ hotkeys", () => {
-    console.log({ defaultKeyMap })
     return (
       <HotKeys keyMap={defaultKeyMap}>
         <div>

src/MainLayout/index.js

@@ -17,9 +17,17 @@ import SettingsDialog from "../SettingsDialog"
 import Fullscreen from "../Fullscreen"
 import getActiveImage from "../Annotator/reducers/get-active-image"
 import useImpliedVideoRegions from "./use-implied-video-regions"
+import { useDispatchHotkeyHandlers } from "../ShortcutsManager"
+import { withHotKeys } from "react-hotkeys"
 
 const useStyles = makeStyles(styles)
 
+const HotkeyDiv = withHotKeys(({ hotKeys, children, divRef, ...props }) => (
+  <div {...{ ...hotKeys, ...props }} ref={divRef}>
+    {children}
+  </div>
+))
+
 type Props = {
   state: MainLayoutState,
   RegionEditLabel?: Node,
@@ -69,6 +77,7 @@ export default ({
 
   const isAVideoFrame = activeImage && activeImage.frameTime !== undefined
   const innerContainerRef = useRef()
+  const hotkeyHandlers = useDispatchHotkeyHandlers({ dispatch })
 
   let impliedVideoRegions = useImpliedVideoRegions(state)
 
@@ -81,15 +90,17 @@ export default ({
         }
       }}
     >
-      <div
-        ref={innerContainerRef}
+      <HotkeyDiv
         tabIndex={-1}
-        onMouseOver={(e) => {
+        divRef={innerContainerRef}
+        onMouseDown={(e) => {
           if (innerContainerRef.current) innerContainerRef.current.focus()
         }}
-        onMouseDown={(e) => {
+        onMouseOver={(e) => {
           if (innerContainerRef.current) innerContainerRef.current.focus()
         }}
+        allowChanges
+        handlers={hotkeyHandlers}
         className={classnames(
           classes.container,
           state.fullScreen && "Fullscreen"
@@ -242,7 +253,7 @@ export default ({
             })
           }
         />
-      </div>
+      </HotkeyDiv>
     </Fullscreen>
   )
 }

src/ShortcutsManager/index.js

@@ -16,9 +16,15 @@ export const defaultHotkeys = [
     id: "create_point",
     description: "Create a point",
   },
+  {
+    id: "create_bounding_box",
+    description: "Create a bounding box",
+    binding: "b",
+  },
   {
     id: "pan_tool",
     description: "Select the Pan Tool",
+    binding: "p",
   },
   {
     id: "create_polygon",
@@ -31,10 +37,12 @@ export const defaultHotkeys = [
   {
     id: "save_and_previous_sample",
     description: "Save and go to previous sample",
+    binding: "a",
   },
   {
     id: "save_and_next_sample",
     description: "Save and go to next sample",
+    binding: "d",
   },
   {
     id: "save_and_exit_sample",
@@ -48,7 +56,7 @@ export const defaultHotkeys = [
 export const defaultKeyMap = {}
 for (const { id, binding } of defaultHotkeys) defaultKeyMap[id] = binding
 
-export default ({ children, dispatch }) => {
+export const useDispatchHotkeyHandlers = ({ dispatch }) => {
   const handlers = useMemo(
     () => ({
       select_tool: () => {
@@ -69,6 +77,12 @@ export default ({ children, dispatch }) => {
           selectedTool: "create-point",
         })
       },
+      create_bounding_box: () => {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-box",
+        })
+      },
       pan_tool: () => {
         dispatch({
           type: "SELECT_TOOL",
@@ -114,6 +128,11 @@ export default ({ children, dispatch }) => {
     }),
     [dispatch]
   )
+  return handlers
+}
+
+export default ({ children, dispatch }) => {
+  const handlers = useDispatchHotkeyHandlers({ dispatch })
   return (
     <HotKeys allowChanges handlers={handlers}>
       {children}