@searpent/react-image-annotate 2.0.0 → 2.0.3

package/src/ImageCanvas/region-tools.js

@@ -1,171 +0,0 @@
-// @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/use-mouse.js

@@ -1,168 +0,0 @@
-// @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

@@ -1,23 +0,0 @@
-// @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

@@ -1,50 +0,0 @@
-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

@@ -1,127 +0,0 @@
-// @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

@@ -1,32 +0,0 @@
-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

@@ -1,54 +0,0 @@
-// @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

@@ -1,25 +0,0 @@
-// @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