@searpent/react-image-annotate 2.0.0

package/src/ImageCanvas/region-tools.js

@@ -0,0 +1,171 @@
+// @flow
+
+export type BaseRegion = {
+  id: string | number,
+  cls?: string,
+  locked?: boolean,
+  visible?: boolean,
+  color: string,
+  editingLabels?: boolean,
+  highlighted?: boolean,
+  tags?: Array<string>,
+}
+
+export type Point = {|
+  ...$Exact<BaseRegion>,
+  type: "point",
+  x: number,
+  y: number,
+|}
+
+export type PixelRegion =
+  | {|
+      ...$Exact<BaseRegion>,
+      type: "pixel",
+      sx: number,
+      sy: number,
+      w: number,
+      h: number,
+      src: string,
+    |}
+  | {|
+      ...$Exact<BaseRegion>,
+      type: "pixel",
+      points: Array<[number, number]>,
+    |}
+export type Box = {|
+  ...$Exact<BaseRegion>,
+  type: "box",
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+|}
+
+export type Polygon = {|
+  ...$Exact<BaseRegion>,
+  type: "polygon",
+  open?: boolean,
+  points: Array<[number, number]>,
+|}
+
+export type Line = {|
+  ...$Exact<BaseRegion>,
+  type: "line",
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+|}
+
+export type ExpandingLine = {|
+  ...$Exact<BaseRegion>,
+  type: "expanding-line",
+  points: Array<{ x: number, y: number, angle: number, width: number }>,
+|}
+
+export type KeypointDefinition = {|
+  label: string,
+  color: string,
+  defaultPosition: [number, number],
+|}
+
+export type KeypointId = string
+
+export type KeypointsDefinition = {|
+  [id: string]: {
+    connections: Array<[KeypointId, KeypointId]>,
+    landmarks: {
+      [KeypointId]: KeypointDefinition,
+    },
+  },
+|}
+
+export type Keypoints = {|
+  ...$Exact<BaseRegion>,
+  type: "keypoints",
+  keypointsDefinitionId: string,
+  points: {
+    [string]: { x: number, y: number },
+  },
+|}
+
+export type Region =
+  | Point
+  | PixelRegion
+  | Box
+  | Polygon
+  | ExpandingLine
+  | Keypoints
+
+export const getEnclosingBox = (region: Region) => {
+  switch (region.type) {
+    case "polygon": {
+      const box = {
+        x: Math.min(...region.points.map(([x, y]) => x)),
+        y: Math.min(...region.points.map(([x, y]) => y)),
+        w: 0,
+        h: 0,
+      }
+      box.w = Math.max(...region.points.map(([x, y]) => x)) - box.x
+      box.h = Math.max(...region.points.map(([x, y]) => y)) - box.y
+      return box
+    }
+    case "keypoints": {
+      const minX = Math.min(
+        ...Object.values(region.points).map(({ x, y }) => x)
+      )
+      const minY = Math.min(
+        ...Object.values(region.points).map(({ x, y }) => y)
+      )
+      const maxX = Math.max(
+        ...Object.values(region.points).map(({ x, y }) => x)
+      )
+      const maxY = Math.max(
+        ...Object.values(region.points).map(({ x, y }) => y)
+      )
+      return {
+        x: minX,
+        y: minY,
+        w: maxX - minX,
+        h: maxY - minY,
+      }
+    }
+    case "expanding-line": {
+      const box = {
+        x: Math.min(...region.points.map(({ x, y }) => x)),
+        y: Math.min(...region.points.map(({ x, y }) => y)),
+        w: 0,
+        h: 0,
+      }
+      box.w = Math.max(...region.points.map(({ x, y }) => x)) - box.x
+      box.h = Math.max(...region.points.map(({ x, y }) => y)) - box.y
+      return box
+    }
+    case "line": {
+      return { x: region.x1, y: region.y1, w: 0, h: 0 }
+    }
+    case "box": {
+      return { x: region.x, y: region.y, w: region.w, h: region.h }
+    }
+    case "point": {
+      return { x: region.x, y: region.y, w: 0, h: 0 }
+    }
+    default: {
+      return { x: 0, y: 0, w: 0, h: 0 }
+    }
+  }
+  throw new Error("unknown region")
+}
+
+export const moveRegion = (region: Region, x: number, y: number) => {
+  switch (region.type) {
+    case "point": {
+      return { ...region, x, y }
+    }
+    case "box": {
+      return { ...region, x: x - region.w / 2, y: y - region.h / 2 }
+    }
+  }
+  return region
+}

package/src/ImageCanvas/styles.js

@@ -0,0 +1,27 @@
+import { grey } from "@mui/material/colors"
+
+export default {
+  canvas: { width: "100%", height: "100%", position: "relative", zIndex: 1 },
+  zoomIndicator: {
+    position: "absolute",
+    bottom: 16,
+    right: 0,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    color: "#fff",
+    opacity: 0.5,
+    fontWeight: "bolder",
+    fontSize: 14,
+    padding: 4,
+  },
+  fixedRegionLabel: {
+    position: "absolute",
+    zIndex: 10,
+    top: 10,
+    left: 10,
+    opacity: 0.5,
+    transition: "opacity 500ms",
+    "&:hover": {
+      opacity: 1,
+    },
+  },
+}

package/src/ImageCanvas/use-mouse.js

@@ -0,0 +1,168 @@
+// @flow weak
+
+import { useRef } from "react"
+import { Matrix } from "transformation-matrix-js"
+
+const getDefaultMat = () => Matrix.from(1, 0, 0, 1, -10, -10)
+
+export default ({
+  canvasEl,
+  changeMat,
+  changeDragging,
+  zoomStart,
+  zoomEnd,
+  changeZoomStart,
+  changeZoomEnd,
+  layoutParams,
+  zoomWithPrimary,
+  dragWithPrimary,
+  mat,
+  onMouseMove,
+  onMouseUp,
+  onMouseDown,
+  dragging,
+}) => {
+  const mousePosition = useRef({ x: 0, y: 0 })
+  const prevMousePosition = useRef({ x: 0, y: 0 })
+
+  const zoomIn = (direction, point) => {
+    const [mx, my] = [point.x, point.y]
+    let scale =
+      typeof direction === "object" ? direction.to / mat.a : 1 + 0.2 * direction
+
+    // NOTE: We're mutating mat here
+    mat.translate(mx, my).scaleU(scale)
+    if (mat.a > 2) mat.scaleU(2 / mat.a)
+    if (mat.a < 0.05) mat.scaleU(0.05 / mat.a)
+    mat.translate(-mx, -my)
+
+    changeMat(mat.clone())
+  }
+
+  const mouseEvents = {
+    onMouseMove: (e) => {
+      const { left, top } = canvasEl.current.getBoundingClientRect()
+      prevMousePosition.current.x = mousePosition.current.x
+      prevMousePosition.current.y = mousePosition.current.y
+      mousePosition.current.x = e.clientX - left
+      mousePosition.current.y = e.clientY - top
+
+      const projMouse = mat.applyToPoint(
+        mousePosition.current.x,
+        mousePosition.current.y
+      )
+
+      if (zoomWithPrimary && zoomStart) {
+        changeZoomEnd(projMouse)
+      }
+
+      const { iw, ih } = layoutParams.current
+      onMouseMove({ x: projMouse.x / iw, y: projMouse.y / ih })
+
+      if (dragging) {
+        mat.translate(
+          prevMousePosition.current.x - mousePosition.current.x,
+          prevMousePosition.current.y - mousePosition.current.y
+        )
+
+        changeMat(mat.clone())
+      }
+      e.preventDefault()
+    },
+    onMouseDown: (e, specialEvent = {}) => {
+      e.preventDefault()
+
+      if (
+        e.button === 1 ||
+        e.button === 2 ||
+        (e.button === 0 && dragWithPrimary)
+      )
+        return changeDragging(true)
+
+      const projMouse = mat.applyToPoint(
+        mousePosition.current.x,
+        mousePosition.current.y
+      )
+      if (zoomWithPrimary && e.button === 0) {
+        changeZoomStart(projMouse)
+        changeZoomEnd(projMouse)
+        return
+      }
+      if (e.button === 0) {
+        if (specialEvent.type === "resize-box") {
+          // onResizeBox()
+        }
+        if (specialEvent.type === "move-region") {
+          // onResizeBox()
+        }
+        const { iw, ih } = layoutParams.current
+        onMouseDown({ x: projMouse.x / iw, y: projMouse.y / ih })
+      }
+    },
+    onMouseUp: (e) => {
+      e.preventDefault()
+      const projMouse = mat.applyToPoint(
+        mousePosition.current.x,
+        mousePosition.current.y
+      )
+      if (zoomStart) {
+        const zoomEnd = projMouse
+        if (
+          Math.abs(zoomStart.x - zoomEnd.x) < 10 &&
+          Math.abs(zoomStart.y - zoomEnd.y) < 10
+        ) {
+          if (mat.a < 1) {
+            zoomIn({ to: 1 }, mousePosition.current)
+          } else {
+            zoomIn({ to: 0.25 }, mousePosition.current)
+          }
+        } else {
+          const { iw, ih } = layoutParams.current
+
+          if (zoomStart.x > zoomEnd.x) {
+            ;[zoomStart.x, zoomEnd.x] = [zoomEnd.x, zoomStart.x]
+          }
+          if (zoomStart.y > zoomEnd.y) {
+            ;[zoomStart.y, zoomEnd.y] = [zoomEnd.y, zoomStart.y]
+          }
+
+          // The region defined by zoomStart and zoomEnd should be the new transform
+          let scale = Math.min(
+            (zoomEnd.x - zoomStart.x) / iw,
+            (zoomEnd.y - zoomStart.y) / ih
+          )
+          if (scale < 0.05) scale = 0.05
+          if (scale > 10) scale = 10
+
+          const newMat = getDefaultMat()
+            .translate(zoomStart.x, zoomStart.y)
+            .scaleU(scale)
+
+          changeMat(newMat.clone())
+        }
+
+        changeZoomStart(null)
+        changeZoomEnd(null)
+      }
+      if (
+        e.button === 1 ||
+        e.button === 2 ||
+        (e.button === 0 && dragWithPrimary)
+      )
+        return changeDragging(false)
+      if (e.button === 0) {
+        const { iw, ih } = layoutParams.current
+        onMouseUp({ x: projMouse.x / iw, y: projMouse.y / ih })
+      }
+    },
+    onWheel: (e) => {
+      const direction = e.deltaY > 0 ? 1 : e.deltaY < 0 ? -1 : 0
+      zoomIn(direction, mousePosition.current)
+      // e.preventDefault()
+    },
+    onContextMenu: (e) => {
+      e.preventDefault()
+    },
+  }
+  return { mouseEvents, mousePosition }
+}

package/src/ImageCanvas/use-project-box.js

@@ -0,0 +1,23 @@
+// @flow weak
+import useEventCallback from "use-event-callback"
+import { getEnclosingBox } from "./region-tools.js"
+
+export default ({ layoutParams, mat }) => {
+  return useEventCallback((r) => {
+    const { iw, ih } = layoutParams.current
+    const bbox = getEnclosingBox(r)
+    const margin = r.type === "point" ? 15 : 2
+    const cbox = {
+      x: bbox.x * iw - margin,
+      y: bbox.y * ih - margin,
+      w: bbox.w * iw + margin * 2,
+      h: bbox.h * ih + margin * 2,
+    }
+    const pbox = {
+      ...mat.clone().inverse().applyToPoint(cbox.x, cbox.y),
+      w: cbox.w / mat.a,
+      h: cbox.h / mat.d,
+    }
+    return pbox
+  })
+}

package/src/ImageCanvas/use-wasd-mode.js

@@ -0,0 +1,50 @@
+import { useEffect } from "react"
+import { useSettings } from "../SettingsProvider"
+
+export default ({ getLatestMat, changeMat }) => {
+  const { wasdMode } = useSettings()
+  useEffect(() => {
+    if (!wasdMode) return
+    const vel = 10
+    const dirs = {
+      w: [0, -vel],
+      a: [-vel, 0],
+      s: [0, vel],
+      d: [vel, 0],
+    }
+    const keysDown = {}
+    const keys = Object.keys(dirs)
+    const keyDownListener = (e) => {
+      if (keys.includes(e.key)) {
+        keysDown[e.key] = true
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+    const keyUpListener = (e) => {
+      if (keys.includes(e.key)) {
+        keysDown[e.key] = false
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+    const interval = setInterval(() => {
+      let newMat = getLatestMat().clone()
+      let somethingChanged = false
+      for (const key in keysDown) {
+        if (keysDown[key]) {
+          newMat = newMat.translate(...dirs[key])
+          somethingChanged = true
+        }
+      }
+      if (somethingChanged) changeMat(newMat)
+    }, 16)
+    window.addEventListener("keydown", keyDownListener)
+    window.addEventListener("keyup", keyUpListener)
+    return () => {
+      clearInterval(interval)
+      window.removeEventListener("keydown", keyDownListener)
+      window.removeEventListener("keyup", keyUpListener)
+    }
+  }, [wasdMode])
+}

package/src/ImageMask/index.js

@@ -0,0 +1,127 @@
+// @flow
+
+import React, { useState, useEffect, useMemo, useRef } from "react"
+import { colorInts } from "../colors"
+import { useDebounce } from "react-use"
+import loadImage from "./load-image"
+import autoseg from "autoseg/webworker"
+
+function convertToUDTRegions(regions) {
+  return regions
+    .map((r) => {
+      switch (r.type) {
+        case "point": {
+          return {
+            regionType: "point",
+            classification: r.cls,
+            x: r.x,
+            y: r.y,
+          }
+        }
+        case "polygon": {
+          return {
+            regionType: "polygon",
+            classification: r.cls,
+            points: r.points.map(([x, y]) => ({ x, y })),
+          }
+        }
+        case "box": {
+          return {
+            regionType: "bounding-box",
+            classification: r.cls,
+            centerX: r.x + r.w / 2,
+            centerY: r.y + r.h / 2,
+            width: r.w,
+            height: r.h,
+          }
+        }
+        default: {
+          return null
+        }
+      }
+    })
+    .filter(Boolean)
+}
+
+export const ImageMask = ({
+  regions,
+  regionClsList,
+  imageSrc,
+  imagePosition,
+  zIndex = 1,
+  hide = false,
+  autoSegmentationOptions = { type: "simple" },
+}) => {
+  // if (!window.mmgc) window.mmgc = MMGC_INIT()
+  // const mmgc = window.mmgc
+  const [canvasRef, setCanvasRef] = useState(null)
+
+  const [sampleImageData, setSampleImageData] = useState()
+
+  useEffect(() => {
+    if (!imageSrc) return
+
+    loadImage(imageSrc).then((imageData) => {
+      autoseg.setConfig({
+        classNames: regionClsList,
+        ...autoSegmentationOptions,
+      })
+      autoseg.loadImage(imageData)
+      setSampleImageData(imageData)
+    })
+  }, [imageSrc])
+
+  useDebounce(
+    () => {
+      if (hide) return
+      if (!canvasRef) return
+      if (!sampleImageData) return
+      if (regions.filter((cp) => cp.cls).length < 2) return
+
+      const udtRegions = convertToUDTRegions(regions)
+
+      autoseg.getMask(udtRegions).then((maskImageData) => {
+        const context = canvasRef.getContext("2d")
+        context.clearRect(0, 0, maskImageData.width, maskImageData.height)
+        context.putImageData(maskImageData, 0, 0)
+      })
+    },
+    1000,
+    [canvasRef, sampleImageData, regions, hide]
+  )
+
+  const style = useMemo(() => {
+    let width = imagePosition.bottomRight.x - imagePosition.topLeft.x
+    let height = imagePosition.bottomRight.y - imagePosition.topLeft.y
+    return {
+      display: hide ? "none" : undefined,
+      imageRendering: "pixelated",
+      transform: "translateZ(0px)",
+      left: imagePosition.topLeft.x,
+      top: imagePosition.topLeft.y,
+      width: isNaN(width) ? 0 : width,
+      height: isNaN(height) ? 0 : height,
+      zIndex,
+      position: "absolute",
+      pointerEvents: "none",
+    }
+  }, [
+    imagePosition.topLeft.x,
+    imagePosition.topLeft.y,
+    imagePosition.bottomRight.x,
+    imagePosition.bottomRight.y,
+    zIndex,
+    hide,
+  ])
+
+  return (
+    <canvas
+      style={style}
+      width={sampleImageData ? sampleImageData.width : 0}
+      height={sampleImageData ? sampleImageData.height : 0}
+      ref={setCanvasRef}
+    />
+  )
+}
+
+export default ImageMask

package/src/ImageMask/load-image.js

@@ -0,0 +1,32 @@
+export const loadImage = (imageSrc) => {
+  // Check if image is already loaded in a page element
+  let image = Array.from(document.getElementsByTagName("img")).find(
+    (img) => img.src === imageSrc
+  )
+
+  const canvas = document.createElement("canvas")
+  const ctx = canvas.getContext("2d")
+
+  if (!image) {
+    image = new Image()
+    image.crossOrigin = "anonymous"
+    image.src = imageSrc
+  }
+
+  return new Promise((resolve, reject) => {
+    image.onload = () => {
+      canvas.width = image.naturalWidth
+      canvas.height = image.naturalHeight
+      ctx.drawImage(image, 0, 0)
+      const imageData = ctx.getImageData(
+        0,
+        0,
+        image.naturalWidth,
+        image.naturalHeight
+      )
+      resolve(imageData)
+    }
+  })
+}
+
+export default loadImage

package/src/ImageSelectorSidebarBox/index.js

@@ -0,0 +1,54 @@
+// @flow
+
+import React, { memo } from "react"
+import { makeStyles } from "@mui/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import CollectionsIcon from "@mui/icons-material/Collections"
+import { grey } from "@mui/material/colors"
+import List from "@mui/material/List"
+import ListItem from "@mui/material/ListItem"
+import ListItemText from "@mui/material/ListItemText"
+import Avatar from "@mui/material/Avatar"
+import isEqual from "lodash/isEqual"
+
+const theme = createTheme()
+const useStyles = makeStyles((theme) => ({
+  img: { width: 40, height: 40, borderRadius: 8 },
+}))
+
+export const ImageSelectorSidebarBox = ({ images, onSelect }) => {
+  const classes = useStyles()
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Images"
+        subTitle={`(${images.length})`}
+        icon={<CollectionsIcon style={{ color: grey[700] }} />}
+      >
+        <div>
+          <List>
+            {images.map((img, i) => (
+              <ListItem button onClick={() => onSelect(img)} dense key={i}>
+                <img className={classes.img} src={img.src} />
+                <ListItemText
+                  primary={img.name}
+                  secondary={`${(img.regions || []).length} Labels`}
+                />
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+const mapUsedImageProps = (a) => [a.name, (a.regions || []).length, a.src]
+
+export default memo(ImageSelectorSidebarBox, (prevProps, nextProps) =>
+  isEqual(
+    prevProps.images.map(mapUsedImageProps),
+    nextProps.images.map(mapUsedImageProps)
+  )
+)

package/src/KeyframeTimeline/get-time-string.js

@@ -0,0 +1,25 @@
+// @flow
+
+const getTimeString = (ms, precision = 1) => {
+  if (ms < 1000) {
+    return ms + "ms"
+  } else {
+    const secs = ms / 1000
+    if (secs < 60) {
+      if (Number.isInteger(secs)) {
+        return secs + "s"
+      } else {
+        return secs.toFixed(precision) + "s"
+      }
+    } else {
+      const mins = secs / 60
+      if (Number.isInteger(mins)) {
+        return mins + "m"
+      } else {
+        return mins.toFixed(precision) + "m"
+      }
+    }
+  }
+}
+
+export default getTimeString