@searpent/react-image-annotate 2.0.5 → 2.0.6

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

package/src/KeyframeTimeline/index.js

@@ -1,223 +0,0 @@
-// @flow weak
-
-import React, { useMemo, useState, useEffect } from "react"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import range from "lodash/range"
-import * as colors from "@mui/material/colors"
-import useMeasure from "react-use-measure"
-import useEventCallback from "use-event-callback"
-import { useRafState } from "react-use"
-import getTimeString from "./get-time-string"
-
-const theme = createTheme()
-
-const Container = styled("div")(({ theme }) => ({
-  position: "relative",
-  display: "flex",
-  flexGrow: 1,
-  minWidth: 240,
-  height: 64,
-  marginLeft: 16,
-  marginRight: 16,
-}))
-
-const Tick = styled("div")(({ theme }) => ({
-  position: "absolute",
-  width: 2,
-  marginLeft: -1,
-  height: "100%",
-  backgroundColor: colors.grey[300],
-  bottom: 0,
-}))
-const TickText = styled("div")(({ theme }) => ({
-  position: "absolute",
-  userSelect: "none",
-  fontSize: 10,
-  color: colors.grey[600],
-  fontWeight: "bold",
-  bottom: 0,
-}))
-
-const PositionCursor = styled("div")(({ theme }) => ({
-  position: "absolute",
-  bottom: "calc(50% + 6px)",
-  fontSize: 10,
-  fontWeight: "bold",
-  color: "#fff",
-  display: "grid",
-  placeItems: "center",
-  width: 48,
-  marginLeft: -24,
-  borderRadius: 2,
-  height: 24,
-  backgroundColor: colors.blue[500],
-  userSelect: "none",
-  fontVariantNumeric: "tabular-nums",
-
-  "&::before": {
-    position: "absolute",
-    bottom: -6,
-    left: 24 - 8,
-    content: '""',
-    width: 0,
-    height: 0,
-    borderTop: `8px solid ${colors.blue[500]}`,
-    borderLeft: "8px solid transparent",
-    borderRight: "8px solid transparent",
-  },
-}))
-
-const KeyframeMarker = styled("div")(({ theme }) => ({
-  position: "absolute",
-  bottom: 8,
-  cursor: "pointer",
-  opacity: 0.75,
-  fontSize: 10,
-  fontWeight: "bold",
-  color: "#fff",
-  display: "grid",
-  placeItems: "center",
-  width: 16,
-  marginLeft: 0,
-  borderTopLeftRadius: 2,
-  borderTopRightRadius: 2,
-  height: 12,
-  marginLeft: -8,
-  backgroundColor: colors.red[500],
-  userSelect: "none",
-  fontVariantNumeric: "tabular-nums",
-
-  "&::before": {
-    position: "absolute",
-    bottom: -8,
-    left: 0,
-    content: '""',
-    width: 0,
-    height: 0,
-    borderTop: `8px solid ${colors.red[500]}`,
-    borderLeft: "8px solid transparent",
-    borderRight: "8px solid transparent",
-  },
-}))
-
-const min = 60000
-const displayIntervalPairs = [
-  [50, 250],
-  [100, 500],
-  [250, 1000],
-  [1000, 5000],
-  [5000, 30000],
-  [10000, min],
-  [30000, min * 2],
-  [min, min * 5],
-  [min * 5, min * 30],
-  [min * 10, min * 60],
-  [min * 30, min * 60 * 3],
-  [min * 60, min * 60 * 5],
-]
-
-const getMajorInterval = (duration) => {
-  for (const [minor, major] of displayIntervalPairs) {
-    if (duration / major < 6 && duration / major > 2) {
-      return [minor, major]
-    }
-  }
-  return [duration / 4, duration]
-}
-
-export default ({
-  currentTime = 0,
-  duration,
-  onChangeCurrentTime,
-  keyframes,
-}) => {
-  const [ref, bounds] = useMeasure()
-  const [instantCurrentTime, changeInstantCurrentTime] = useState(currentTime)
-  const [draggingTime, changeDraggingTime] = useRafState(false)
-  const keyframeTimes = Object.keys(keyframes || {})
-    .map((t) => parseInt(t))
-    .filter((t) => !isNaN(t))
-    .sort((a, b) => a - b)
-
-  useEffect(() => {
-    if (currentTime !== instantCurrentTime) {
-      changeInstantCurrentTime(currentTime)
-    }
-  }, [currentTime])
-
-  const [minorInterval, majorInterval] = useMemo(
-    () => getMajorInterval(duration),
-    [duration]
-  )
-
-  const onMouseMove = useEventCallback((e) => {
-    if (draggingTime) {
-      const px = (e.clientX - bounds.left) / bounds.width
-      changeInstantCurrentTime(
-        Math.min(duration, Math.max(0, Math.floor(px * duration)))
-      )
-    }
-  })
-
-  const onMouseUp = useEventCallback((e) => {
-    changeDraggingTime(false)
-    const px = (e.clientX - bounds.left) / bounds.width
-    const newTime = Math.min(duration, Math.max(0, Math.floor(px * duration)))
-    changeInstantCurrentTime(newTime)
-    onChangeCurrentTime(newTime)
-  })
-
-  // TODO skeleton
-  if (!duration) return null
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Container onMouseMove={onMouseMove} onMouseUp={onMouseUp} ref={ref}>
-        {range(0, duration, majorInterval).map((a) => (
-          <>
-            <Tick
-              key={a}
-              style={{ left: (a / duration) * bounds.width, height: "50%" }}
-            />
-            <TickText
-              style={{
-                left: (a / duration) * bounds.width + 8,
-                bottom: "calc(50% - 12px)",
-              }}
-            >
-              {getTimeString(a)}
-            </TickText>
-          </>
-        ))}
-        {range(0, duration, minorInterval)
-          .filter((a) => !Number.isInteger(a / majorInterval))
-          .map((a) => (
-            <Tick
-              key={a}
-              style={{
-                left: (a / duration) * bounds.width,
-                height: "25%",
-              }}
-            />
-          ))}
-        {keyframeTimes.map((kt) => (
-          <KeyframeMarker
-            onClick={() => onChangeCurrentTime(kt)}
-            key={kt}
-            style={{ left: (kt / duration) * bounds.width }}
-          />
-        ))}
-        <PositionCursor
-          onMouseDown={(e) => changeDraggingTime(true)}
-          style={{
-            cursor: draggingTime ? "grabbing" : "grab",
-            left: (instantCurrentTime / duration) * bounds.width,
-          }}
-        >
-          {getTimeString(instantCurrentTime)}
-        </PositionCursor>
-      </Container>
-    </ThemeProvider>
-  )
-}

package/src/KeyframesSelectorSidebarBox/index.js

@@ -1,93 +0,0 @@
-// @flow weak
-
-import React from "react"
-import AddLocationIcon from "@mui/icons-material/AddLocation"
-import SidebarBoxContainer from "../SidebarBoxContainer"
-import * as colors from "@mui/material/colors"
-import getTimeString from "../KeyframeTimeline/get-time-string.js"
-import TrashIcon from "@mui/icons-material/Delete"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-
-const theme = createTheme()
-const KeyframeRow = styled("div")(({ theme }) => ({
-  cursor: "pointer",
-  display: "flex",
-  alignItems: "center",
-  padding: 8,
-  fontSize: 14,
-  color: colors.grey[700],
-  "&.current": {
-    backgroundColor: colors.blue[100],
-  },
-  "&:hover": {
-    backgroundColor: colors.grey[100],
-  },
-  "& .time": {
-    flexGrow: 1,
-    fontWeight: "bold",
-    "& .regionCount": {
-      marginLeft: 8,
-      fontWeight: "normal",
-      color: colors.grey[500],
-    },
-  },
-  "& .trash": {
-    "& .icon": {
-      fontSize: 18,
-      color: colors.grey[600],
-      transition: "transform 80ms",
-      "&:hover": {
-        color: colors.grey[800],
-        transform: "scale(1.25,1.25)",
-      },
-    },
-  },
-}))
-
-const KeyframesSelectorSidebarBox = ({
-  currentVideoTime,
-  keyframes,
-  onChangeVideoTime,
-  onDeleteKeyframe,
-}) => {
-  const keyframeTimes = Object.keys(keyframes).map((t) => parseInt(t))
-
-  return (
-    <ThemeProvider theme={theme}>
-      <SidebarBoxContainer
-        title="Keyframes"
-        subTitle=""
-        icon={<AddLocationIcon style={{ color: colors.grey[700] }} />}
-        expandedByDefault
-      >
-        {keyframeTimes.map((t) => (
-          <KeyframeRow
-            fullWidth
-            key={t}
-            className={currentVideoTime === t ? "current" : ""}
-            onClick={() => onChangeVideoTime(t)}
-          >
-            <div className="time">
-              {getTimeString(t, 2)}
-              <span className="regionCount">
-                ({(keyframes[t]?.regions || []).length})
-              </span>
-            </div>
-            <div className="trash">
-              <TrashIcon
-                onClick={(e) => {
-                  onDeleteKeyframe(t)
-                  e.stopPropagation()
-                }}
-                className="icon"
-              />
-            </div>
-          </KeyframeRow>
-        ))}
-      </SidebarBoxContainer>
-    </ThemeProvider>
-  )
-}
-
-export default KeyframesSelectorSidebarBox

package/src/LandingPage/content.md

@@ -1,57 +0,0 @@
-# Features
-
-- Simple input/output format
-- Bounding Box, Point and Polygon Annotation
-- Zooming, Scaling, Panning
-- Multiple Images
-- Cursor Crosshair
-
-![Screenshot of Annotator](https://user-images.githubusercontent.com/1910070/51199716-83c72080-18c5-11e9-837c-c3a89c8caef4.png)
-
-# Usage
-
-## Installation
-
-```bash
-npm install react-image-annotate
-```
-
-## Basic Example
-
-```javascript
-import ReactImageAnnotate from "react-image-annotate"
-
-const App = () => (
-  <ReactImageAnnotate
-    selectedImage="https://example.com/image1.png"
-    taskDescription="# Draw region around each animal."
-    images={[{ src: "https://example.com/image1.png", name: "Image 1" }]}
-    regionClsList={["Dog", "Cat"]}
-    enabledTools={["create-box"]}
-  />
-)
-```
-
-# Props
-
-All of the following properties can be defined on the `ReactImageAnnotate` component...
-
-| Prop                     | Type (\* = required)                             | Description                                                                             | Default       |
-| ------------------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------- | ------------- |
-| `taskDescription`        | \*`string`                                       | Markdown description for what to do in the image.                                       |               |
-| `allowedArea`            | `{ x: number, y: number, w: number, h: number }` | Area that is available for annotation.                                                  | Entire image. |
-| `regionTagList`          | `Array<string>`                                  | Allowed "tags" (mutually inclusive classifications) for regions.                        |               |
-| `regionClsList`          | `Array<string>`                                  | Allowed "classes" (mutually exclusive classifications) for regions.                     |               |
-| `imageTagList`           | `Array<string>`                                  | Allowed tags for entire image.                                                          |               |
-| `imageClsList`           | `Array<string>`                                  | Allowed classes for entire image.                                                       |               |
-| `enabledTools`           | `Array<string>`                                  | Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon" | Everything.   |
-| `showTags`               | `boolean`                                        | Show tags and allow tags on regions.                                                    | `true`        |
-| `selectedImage`          | `string`                                         | URL of initially selected image.                                                        |               |
-| `images`                 | `Array<Image>`                                   | Array of images to load into annotator                                                  |               |
-| `showPointDistances`     | `boolean`                                        | Show distances between points.                                                          | `false`       |
-| `pointDistancePrecision` | `number`                                         | Precision on displayed points (e.g. 3 => 0.123)                                         |               |
-| `onExit`                 | `MainLayoutState => any`                         | Called when "Save" is called.                                                           |               |
-
-# Sponsors
-
-[![wao.ai sponsorship image](https://s3.amazonaws.com/asset.workaround.online/sponsorship-banner-1.png)](https://wao.ai)