@searpent/react-image-annotate 2.0.0

package/src/VideoOrImageCanvasBackground/index.js

@@ -0,0 +1,170 @@
+// @flow weak
+
+import React, { useRef, useEffect, useMemo, useState } from "react"
+import { styled } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import useEventCallback from "use-event-callback"
+import { useSettings } from "../SettingsProvider"
+
+const theme = createTheme()
+const Video = styled("video")(({ theme }) => ({
+  zIndex: 0,
+  position: "absolute",
+}))
+
+const StyledImage = styled("img")(({ theme }) => ({
+  zIndex: 0,
+  position: "absolute",
+}))
+
+const Error = styled("div")(({ theme }) => ({
+  zIndex: 0,
+  position: "absolute",
+  left: 0,
+  right: 0,
+  bottom: 0,
+  top: 0,
+  backgroundColor: "rgba(255,0,0,0.2)",
+  color: "#ff0000",
+  fontWeight: "bold",
+  whiteSpace: "pre-wrap",
+  padding: 50,
+}))
+
+export default ({
+  imagePosition,
+  mouseEvents,
+  videoTime,
+  videoSrc,
+  imageSrc,
+  onLoad,
+  useCrossOrigin = false,
+  videoPlaying,
+  onChangeVideoTime,
+  onChangeVideoPlaying,
+}) => {
+  const settings = useSettings()
+  const videoRef = useRef()
+  const imageRef = useRef()
+  const [error, setError] = useState()
+
+  useEffect(() => {
+    if (!videoPlaying && videoRef.current) {
+      videoRef.current.currentTime = (videoTime || 0) / 1000
+    }
+  }, [videoTime])
+
+  useEffect(() => {
+    let renderLoopRunning = false
+    if (videoRef.current) {
+      if (videoPlaying) {
+        videoRef.current.play()
+        renderLoopRunning = true
+        if (settings.videoPlaybackSpeed) {
+          videoRef.current.playbackRate = parseFloat(
+            settings.videoPlaybackSpeed
+          )
+        }
+      } else {
+        videoRef.current.pause()
+      }
+    }
+
+    function checkForNewFrame() {
+      if (!renderLoopRunning) return
+      if (!videoRef.current) return
+      const newVideoTime = Math.floor(videoRef.current.currentTime * 1000)
+      if (videoTime !== newVideoTime) {
+        onChangeVideoTime(newVideoTime)
+      }
+      if (videoRef.current.paused) {
+        renderLoopRunning = false
+        onChangeVideoPlaying(false)
+      }
+      requestAnimationFrame(checkForNewFrame)
+    }
+    checkForNewFrame()
+
+    return () => {
+      renderLoopRunning = false
+    }
+  }, [videoPlaying])
+
+  const onLoadedVideoMetadata = useEventCallback((event) => {
+    const videoElm = event.currentTarget
+    videoElm.currentTime = (videoTime || 0) / 1000
+    if (onLoad)
+      onLoad({
+        naturalWidth: videoElm.videoWidth,
+        naturalHeight: videoElm.videoHeight,
+        videoElm: videoElm,
+        duration: videoElm.duration,
+      })
+  })
+  const onImageLoaded = useEventCallback((event) => {
+    const imageElm = event.currentTarget
+    if (onLoad)
+      onLoad({
+        naturalWidth: imageElm.naturalWidth,
+        naturalHeight: imageElm.naturalHeight,
+        imageElm,
+      })
+  })
+  const onImageError = useEventCallback((event) => {
+    setError(
+      `Could not load image\n\nMake sure your image works by visiting ${
+        imageSrc || videoSrc
+      } in a web browser. If that URL works, the server hosting the URL may be not allowing you to access the image from your current domain. Adjust server settings to enable the image to be viewed.${
+        !useCrossOrigin
+          ? ""
+          : `\n\nYour image may be blocked because it's not being sent with CORs headers. To do pixel segmentation, browser web security requires CORs headers in order for the algorithm to read the pixel data from the image. CORs headers are easy to add if you're using an S3 bucket or own the server hosting your images.`
+      }\n\n If you need a hand, reach out to the community at universaldatatool.slack.com`
+    )
+  })
+
+  const stylePosition = useMemo(() => {
+    let width = imagePosition.bottomRight.x - imagePosition.topLeft.x
+    let height = imagePosition.bottomRight.y - imagePosition.topLeft.y
+    return {
+      imageRendering: "pixelated",
+      left: imagePosition.topLeft.x,
+      top: imagePosition.topLeft.y,
+      width: isNaN(width) ? 0 : width,
+      height: isNaN(height) ? 0 : height,
+    }
+  }, [
+    imagePosition.topLeft.x,
+    imagePosition.topLeft.y,
+    imagePosition.bottomRight.x,
+    imagePosition.bottomRight.y,
+  ])
+
+  if (!videoSrc && !imageSrc)
+    return <Error>No imageSrc or videoSrc provided</Error>
+
+  if (error) return <Error>{error}</Error>
+
+  return (
+    <ThemeProvider theme={theme}>
+      {imageSrc && videoTime === undefined ? (
+        <StyledImage
+          {...mouseEvents}
+          src={imageSrc}
+          ref={imageRef}
+          style={stylePosition}
+          onLoad={onImageLoaded}
+          onError={onImageError}
+          crossOrigin={useCrossOrigin ? "anonymous" : undefined}
+        />
+      ) : (
+        <Video
+          {...mouseEvents}
+          ref={videoRef}
+          style={stylePosition}
+          onLoadedMetadata={onLoadedVideoMetadata}
+          src={videoSrc || imageSrc}
+        />
+      )}
+    </ThemeProvider>
+  )
+}

package/src/colors.js

@@ -0,0 +1,32 @@
+// @flow
+
+import * as muiColors from "@mui/material/colors"
+
+export const colors = [
+  muiColors.red[500],
+  muiColors.blue[500],
+  muiColors.green[500],
+  muiColors.orange[800],
+  muiColors.brown[500],
+  muiColors.lightGreen[700],
+  muiColors.pink[500],
+  muiColors.purple[500],
+  muiColors.indigo[500],
+  muiColors.teal[500],
+  muiColors.lime[500],
+  muiColors.blueGrey[500],
+]
+
+const transparency = 0x88000000
+
+function reverseParseColor(rrggbb) {
+  rrggbb = rrggbb.replace("#", "")
+  const bbggrr = rrggbb.substr(4, 2) + rrggbb.substr(2, 2) + rrggbb.substr(0, 2)
+  return parseInt(bbggrr, 16)
+}
+
+export const colorInts: Array<number> = colors.map(
+  (c) => (reverseParseColor(c) | transparency) >>> 0
+)
+
+export default colors

package/src/hooks/use-event-callback.js

@@ -0,0 +1,11 @@
+// @flow
+
+import { useRef, useCallback, useLayoutEffect, useEffect } from "react"
+
+export default (fn) => {
+  let ref = useRef()
+  useLayoutEffect(() => {
+    ref.current = fn
+  })
+  return useCallback((...args) => (0, ref.current)(...args), [])
+}

package/src/hooks/use-exclude-pattern.js

@@ -0,0 +1,27 @@
+// @flow weak
+
+import { useRef } from "react"
+import excludePatternSrc from "./xpattern.js"
+
+export default () => {
+  const excludePattern = useRef(null)
+  if (excludePattern.current === null) {
+    excludePattern.current = {
+      image: new Image(),
+      pattern: null,
+    }
+    const canvas = document.createElement("canvas")
+    canvas.width = 100
+    canvas.height = 100
+    const context = canvas.getContext("2d")
+
+    excludePattern.current.image.onload = () => {
+      excludePattern.current.pattern = context.createPattern(
+        excludePattern.current.image,
+        "repeat"
+      )
+    }
+    excludePattern.current.image.src = excludePatternSrc
+  }
+  return excludePattern.current.pattern
+}

package/src/hooks/use-load-image.js

@@ -0,0 +1,21 @@
+// @flow weak
+
+import { useRef, useState } from "react"
+
+export default (imageSrc, onImageLoaded) => {
+  const [imageLoaded, changeImageLoaded] = useState(false)
+  const image = useRef(null)
+  if (image.current === null) {
+    image.current = new Image()
+    image.current.onload = () => {
+      changeImageLoaded(true)
+      if (onImageLoaded)
+        onImageLoaded({
+          width: image.current.naturalWidth,
+          height: image.current.naturalHeight,
+        })
+    }
+    image.current.src = imageSrc
+  }
+  return [image.current, imageLoaded]
+}

package/src/hooks/use-window-size.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

package/src/hooks/xpattern.js

@@ -0,0 +1 @@
+export default `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4wMSAxY5oG+lzgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAcSURBVAjXY/jPwPCfAQnA+TAGugLcAhhakRUAAK3lEe8m9qZhAAAAAElFTkSuQmCC`

package/src/index.js

@@ -0,0 +1,18 @@
+// @flow
+
+import React from "react"
+import ReactDOM from "react-dom"
+import Theme from "./Theme"
+import DemoSite from "./DemoSite"
+import LandingPage from "./LandingPage"
+import "./site.css"
+
+const Site = () => {
+  const path = window.location.pathname
+    .replace(/\/$/, "")
+    .split("/")
+    .slice(-1)[0]
+  return <Theme>{path === "demo" ? <DemoSite /> : <LandingPage />}</Theme>
+}
+
+ReactDOM.render(<Site />, document.getElementById("root"))

package/src/lib.js

@@ -0,0 +1,7 @@
+// @flow
+
+import Annotator from "./Annotator"
+
+export { Annotator }
+
+export default Annotator

package/src/site.css

@@ -0,0 +1,5 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}

package/src/stories.js

@@ -0,0 +1,2 @@
+const importAll = (r) => r.keys().map(r)
+importAll(require.context("./", true, /\.story\.js$/))

package/src/utils/get-from-local-storage.js

@@ -0,0 +1,7 @@
+export default (key, defaultValue) => {
+  try {
+    return JSON.parse(window.localStorage[`__REACT_IMAGE_ANNOTATE_${key}`])
+  } catch (e) {
+    return defaultValue
+  }
+}

package/src/utils/get-hotkey-help-text.js

@@ -0,0 +1,11 @@
+import { getApplicationKeyMap } from "react-hotkeys"
+
+export const getHotkeyHelpText = (commandName) => {
+  const firstSequence =
+    getApplicationKeyMap()[commandName]?.sequences?.[0]?.sequence
+
+  if (!firstSequence) return ""
+  return ` (${firstSequence})`
+}
+
+export default getHotkeyHelpText

package/src/utils/get-landmarks-with-transform.js

@@ -0,0 +1,23 @@
+// @flow
+import type { KeypointDefinition } from "../ImageCanvas/region-tools"
+
+type Parameters = {
+  center: { x: number, y: number },
+  scale: number,
+  landmarks: {
+    [string]: KeypointDefinition,
+  },
+}
+
+export default ({ center, scale, landmarks }: Parameters) => {
+  const points = {}
+  for (const [keypointId, { defaultPosition }] of (Object.entries(
+    landmarks
+  ): any)) {
+    points[keypointId] = {
+      x: defaultPosition[0] * scale + center.x,
+      y: defaultPosition[1] * scale + center.y,
+    }
+  }
+  return points
+}

package/src/utils/set-in-local-storage.js

@@ -0,0 +1,6 @@
+export default (key, val) => {
+  window.localStorage.setItem(
+    `__REACT_IMAGE_ANNOTATE_${key}`,
+    JSON.stringify(val)
+  )
+}