Merge branch 'master' of github.com:waoai/react-image-annotate

Author: seveibar

package-lock.json

@@ -17,6 +17,7 @@
  "react-remove-scroll": "^2.0.4",
  "react-select": "^2.2.0",
  "react-syntax-highlighter": "^12.2.1",
+ "react-use": "^13.26.3",
  "seamless-immutable": "^7.1.4",
  "transformation-matrix-js": "^2.7.6",
  "use-key-hook": "^1.3.0"

package.json

@@ -337,7 +337,14 @@ storiesOf("Annotator", module)
  </div>
  ))
  .add("Annotator should not expand beyond parent", () => (
- <div style={{ width: "100vw", height: "100vh", padding: 100 }}>
+ <div
+ style={{
+ width: "100vw",
+ height: "100vh",
+ padding: 100,
+ boxSizing: "border-box"
+ }}
+ >
  <Annotator
  onExit={actionAddon("onExit")}
  showTags={false}
@@ -355,6 +362,5 @@ storiesOf("Annotator", module)
  }
  ]}
  />
- <div style={{ color: "red" }}>You shouldn't be able to see this</div>
  </div>
  ))

src/Annotator/index.story.js

@@ -285,15 +285,15 @@ export default (state: MainLayoutState, action: Action) => {
  xFree === 0
  ? ow
  : xFree === -1
-  ? ow + (ox - dx)
-  : Math.max(0, ow + (x - ox - ow))
+ ? ow + (ox - dx)
+ : Math.max(0, ow + (x - ox - ow))
  const dy = yFree === 0 ? oy : yFree === -1 ? Math.min(oy + oh, y) : oy
  const dh =
  yFree === 0
  ? oh
  : yFree === -1
-  ? oh + (oy - dy)
-  : Math.max(0, oh + (y - oy - oh))
+ ? oh + (oy - dy)
+ : Math.max(0, oh + (y - oy - oh))
 
  // determine if we should switch the freedom
  if (dw <= 0.001) {

src/Annotator/reducer.js

@@ -0,0 +1,9 @@
+// @flow
+
+import React from "react"
+import Fullscreen from "react-full-screen"
+
+export default props => {
+ if (!props.enabled) return props.children
+ return <Fullscreen {...props}>{props.children}</Fullscreen>
+}

src/Fullscreen/index.js

@@ -1,5 +1,11 @@
 // @flow
-import React, { Fragment, useRef, useState, useLayoutEffect } from "react"
+import React, {
+ Fragment,
+ useRef,
+ useState,
+ useLayoutEffect,
+ useEffect
+} from "react"
 import { Matrix } from "transformation-matrix-js"
 import getImageData from "get-image-data"
 import Crosshairs from "../Crosshairs"
@@ -21,6 +27,7 @@ import HighlightBox from "../HighlightBox"
 // import excludePatternSrc from "./xpattern.png"
 import excludePatternSrc from "./xpattern.js"
 import PreventScrollToParents from "../PreventScrollToParents"
+import useWindowSize from "../hooks/use-window-size.js"
 
 const useStyles = makeStyles(styles)
 
@@ -30,6 +37,14 @@ const boxCursorMap = [
  ["sw-resize", "s-resize", "se-resize"]
 ]
 
+const copyWithout = (obj, ...args) => {
+ const newObj = { ...obj }
+ for (const arg of args) {
+ delete newObj[arg]
+ }
+ return newObj
+}
+
 type Props = {
  regions: Array<Region>,
  imageSrc: string,
@@ -106,6 +121,11 @@ export default ({
  const prevMousePosition = useRef({ x: 0, y: 0 })
  const [mat, changeMat] = useState(getDefaultMat())
  const maskImages = useRef({})
+ const windowSize = useWindowSize()
+
+ useLayoutEffect(() => {
+ changeMat(mat.clone())
+ }, [windowSize])
 
  const innerMousePos = mat.applyToPoint(
  mousePosition.current.x,
@@ -720,7 +740,9 @@ export default ({
  left: 0,
  ...(displayOnTop ? { bottom: 0 } : { top: 0 })
  }}
- {...(!region.editingLabels ? mouseEvents : {})}
+ {...(!region.editingLabels
+ ? copyWithout(mouseEvents, "onMouseDown", "onMouseUp")
+ : {})}
  >
  <RegionLabel
  allowedClasses={regionClsList}

src/ImageCanvas/index.js

@@ -13,7 +13,7 @@ import useKey from "use-key-hook"
 import classnames from "classnames"
 import { useSettings } from "../SettingsProvider"
 import SettingsDialog from "../SettingsDialog"
-import Fullscreen from "react-full-screen"
+import Fullscreen from "../Fullscreen"
 
 const useStyles = makeStyles(styles)
 

src/MainLayout/index.js

@@ -5,7 +5,7 @@ export default {
  display: "flex",
  flexGrow: 1,
  flexDirection: "column",
- minHeight: "100%",
+ height: "100%",
  maxHeight: "100vh",
  backgroundColor: "#fff",
  overflow: "hidden",
@@ -22,7 +22,9 @@ export default {
  backgroundColor: grey[200],
  flexGrow: 1,
  display: "flex",
- flexDirection: "row"
+ flexDirection: "row",
+ height: "100%",
+ overflow: "hidden"
  },
  iconToolsContainer: { display: "flex" },
  imageCanvasContainer: {
@@ -38,11 +40,12 @@ export default {
  },
  sidebarContainer: {
  width: 300,
+ flexShrink: 0,
  overflowY: "auto",
  backgroundColor: grey[100],
  borderLeft: `1px solid ${grey[300]}`,
  zIndex: 9,
- maxHeight: "calc(100% - 68px)",
+ height: "100%",
  boxShadow: "0px 0px 5px rgba(0,0,0,0.1)"
  }
 }

src/MainLayout/styles.js

@@ -0,0 +1,46 @@
+// @flow
+
+import { useEffect } from "react"
+
+import { useRafState, useInterval } from "react-use"
+
+const useWindowSize = (initialWidth = Infinity, initialHeight = Infinity) => {
+ const isClient = typeof window !== "undefined"
+ const [state, setState] = useRafState({
+ width: isClient ? window.innerWidth : initialWidth,
+ height: isClient ? window.innerHeight : initialHeight
+ })
+
+ useEffect(() => {
+ if (!isClient) return
+ const handler = () => {
+ setState({
+ width: window.innerWidth,
+ height: window.innerHeight
+ })
+ }
+
+ window.addEventListener("resize", handler)
+
+ return () => {
+ window.removeEventListener("resize", handler)
+ }
+ }, [])
+
+ useInterval(() => {
+ if (!isClient) return
+ if (
+ window.innerWidth !== state.width ||
+ window.innerHeight !== state.height
+ ) {
+ setState({
+ width: window.innerWidth,
+ height: window.innerHeight
+ })
+ }
+ }, 100)
+
+ return state
+}
+
+export default useWindowSize