@searpent/react-image-annotate 2.0.5 → 2.0.6

package/src/Annotator/reducers/get-active-image.js

@@ -1,21 +0,0 @@
-import { getIn } from "seamless-immutable"
-
-export default (state) => {
-  let currentImageIndex = null,
-    pathToActiveImage,
-    activeImage
-  if (state.annotationType === "image") {
-    currentImageIndex = state.selectedImage
-    if (currentImageIndex === -1) {
-      currentImageIndex = null
-      activeImage = null
-    } else {
-      pathToActiveImage = ["images", currentImageIndex]
-      activeImage = getIn(state, pathToActiveImage)
-    }
-  } else if (state.annotationType === "video") {
-    pathToActiveImage = ["keyframes", state.currentVideoTime || 0]
-    activeImage = getIn(state, pathToActiveImage) || null
-  }
-  return { currentImageIndex, pathToActiveImage, activeImage }
-}

package/src/Annotator/reducers/get-implied-video-regions.js

@@ -1,115 +0,0 @@
-// @flow
-
-import type { Region } from "../../ImageCanvas/region-tools.js"
-
-const emptyArr = []
-
-export default (
-  keyframes: { [string | number]: { regions: Array<Region> } },
-  time: number
-) => {
-  if (keyframes[time || 0]) {
-    return keyframes[time || 0].regions
-  }
-  // Get surrounding video keyframes
-  const keyframeTimes = Object.keys(keyframes)
-    .map((a) => parseInt(a))
-    .filter((a) => !isNaN(a))
-  if (keyframeTimes.length === 0) return emptyArr
-  keyframeTimes.sort((a, b) => a - b)
-  let nextKeyframeTimeIndex = keyframeTimes.findIndex((kt) => kt >= time)
-  if (nextKeyframeTimeIndex === -1) {
-    return (
-      keyframes[keyframeTimes[keyframeTimes.length - 1]].regions || emptyArr
-    )
-  } else if (nextKeyframeTimeIndex === 0) {
-    return emptyArr
-  }
-
-  const t1 = keyframeTimes[nextKeyframeTimeIndex - 1]
-  const prevKeyframe = keyframes[t1]
-  const t2 = keyframeTimes[nextKeyframeTimeIndex]
-  const nextKeyframe = keyframes[t2]
-
-  const [prevRegionMap, nextRegionMap] = [{}, {}]
-  for (const region of prevKeyframe.regions) prevRegionMap[region.id] = region
-  for (const region of nextKeyframe.regions) nextRegionMap[region.id] = region
-
-  const impliedRegions = []
-
-  // Weighted time coefficients for linear transition
-  const w1 = (t2 - time) / (t2 - t1)
-  const w2 = 1 - w1
-
-  for (const regionId in prevRegionMap) {
-    const [prev, next] = [prevRegionMap[regionId], nextRegionMap[regionId]]
-    if (!next) {
-      impliedRegions.push({
-        ...prev,
-        highlighted: false,
-        editingLabels: false,
-      })
-      continue
-    }
-    switch (prev.type) {
-      case "point": {
-        impliedRegions.push({
-          ...prev,
-          highlighted: false,
-          editingLabels: false,
-          x: prev.x * w1 + next.x * w2,
-          y: prev.y * w1 + next.y * w2,
-        })
-        break
-      }
-      case "box": {
-        impliedRegions.push({
-          ...prev,
-          highlighted: false,
-          editingLabels: false,
-          x: prev.x * w1 + next.x * w2,
-          y: prev.y * w1 + next.y * w2,
-          w: prev.w * w1 + next.w * w2,
-          h: prev.h * w1 + next.h * w2,
-        })
-        break
-      }
-      case "polygon": {
-        if (next.points.length === prev.points.length) {
-          impliedRegions.push({
-            ...prev,
-            highlighted: false,
-            editingLabels: false,
-            points: prev.points.map((pp, i) => [
-              pp[0] * w1 + next.points[i][0] * w2,
-              pp[1] * w1 + next.points[i][1] * w2,
-            ]),
-          })
-        } else {
-          impliedRegions.push(prev)
-        }
-        break
-      }
-      case "keypoints": {
-        const newPoints = {}
-        for (const [pointId, prevPoint] of Object.entries(prev.points)) {
-          newPoints[pointId] = {
-            x: prevPoint.x * w1 + next.points[pointId].x * w2,
-            y: prevPoint.y * w1 + next.points[pointId].y * w2,
-          }
-        }
-        impliedRegions.push({
-          ...prev,
-          highlighted: false,
-          editingLabels: false,
-          points: newPoints,
-        })
-        break
-      }
-      default:
-        break
-    }
-  }
-
-  return impliedRegions
-}

package/src/Annotator/reducers/history-handler.js

@@ -1,60 +0,0 @@
-// @flow
-
-import type { MainLayoutState, Action } from "../../MainLayout/types"
-import { setIn, updateIn, asMutable, without } from "seamless-immutable"
-import moment from "moment"
-
-const typesToSaveWithHistory = {
-  BEGIN_BOX_TRANSFORM: "Transform/Move Box",
-  BEGIN_MOVE_POINT: "Move Point",
-  DELETE_REGION: "Delete Region",
-}
-
-export const saveToHistory = (state: MainLayoutState, name: string) =>
-  updateIn(state, ["history"], (h) =>
-    [
-      {
-        time: moment().toDate(),
-        state: without(state, "history"),
-        name,
-      },
-    ].concat((h || []).slice(0, 9))
-  )
-
-export default (reducer) => {
-  return (state: MainLayoutState, action: Action) => {
-    const prevState = state
-    const nextState = reducer(state, action)
-
-    if (action.type === "RESTORE_HISTORY") {
-      if (state.history.length > 0) {
-        return setIn(
-          nextState.history[0].state,
-          ["history"],
-          nextState.history.slice(1)
-        )
-      }
-    } else {
-      if (
-        prevState !== nextState &&
-        Object.keys(typesToSaveWithHistory).includes(action.type)
-      ) {
-        return setIn(
-          nextState,
-          ["history"],
-          [
-            {
-              time: moment().toDate(),
-              state: without(prevState, "history"),
-              name: typesToSaveWithHistory[action.type] || action.type,
-            },
-          ]
-            .concat(nextState.history || [])
-            .slice(0, 9)
-        )
-      }
-    }
-
-    return nextState
-  }
-}

package/src/Annotator/reducers/image-reducer.js

@@ -1,23 +0,0 @@
-// @flow
-
-import type {
-  MainLayoutImageAnnotationState,
-  Action,
-} from "../../MainLayout/types"
-import { setIn } from "seamless-immutable"
-import getActiveImage from "./get-active-image"
-
-export default (state: MainLayoutImageAnnotationState, action: Action) => {
-  const { currentImageIndex, pathToActiveImage, activeImage } =
-    getActiveImage(state)
-
-  switch (action.type) {
-    case "IMAGE_OR_VIDEO_LOADED": {
-      return setIn(state, ["images", currentImageIndex, "pixelSize"], {
-        w: action.metadata.naturalWidth,
-        h: action.metadata.naturalHeight,
-      })
-    }
-  }
-  return state
-}

package/src/Annotator/reducers/video-reducer.js

@@ -1,85 +0,0 @@
-// @flow
-
-import type {
-  MainLayoutVideoAnnotationState,
-  Action,
-} from "../../MainLayout/types"
-import { setIn, without } from "seamless-immutable"
-import getImpliedVideoRegions from "./get-implied-video-regions"
-import { saveToHistory } from "./history-handler.js"
-
-export default (state: MainLayoutVideoAnnotationState, action: Action) => {
-  const copyImpliedRegions = () => {
-    return setIn(
-      saveToHistory(state, "Add Keyframe"),
-      ["keyframes", state.currentVideoTime || 0],
-      {
-        regions: getImpliedVideoRegions(
-          state.keyframes,
-          state.currentVideoTime
-        ),
-      }
-    )
-  }
-
-  switch (action.type) {
-    case "IMAGE_OR_VIDEO_LOADED": {
-      const { duration } = action.metadata
-      if (typeof duration === "number") {
-        return setIn(state, ["videoDuration"], duration * 1000)
-      }
-    }
-    case "HEADER_BUTTON_CLICKED": {
-      switch (action.buttonName.toLowerCase()) {
-        case "play":
-          return setIn(state, ["videoPlaying"], true)
-        case "pause":
-          return setIn(state, ["videoPlaying"], false)
-      }
-    }
-    case "CHANGE_VIDEO_TIME": {
-      return setIn(state, ["currentVideoTime"], action.newTime)
-    }
-    case "CHANGE_VIDEO_PLAYING": {
-      return setIn(state, ["videoPlaying"], action.isPlaying)
-    }
-    case "DELETE_KEYFRAME": {
-      return setIn(state, ["keyframes"], without(state.keyframes, action.time))
-    }
-    default:
-      break
-  }
-
-  // Before the user modifies regions, copy the interpolated regions over to a
-  // new keyframe
-  if (!state.keyframes[state.currentVideoTime]) {
-    switch (action.type) {
-      case "BEGIN_BOX_TRANSFORM":
-      case "BEGIN_MOVE_POINT":
-      case "BEGIN_MOVE_KEYPOINT":
-      case "BEGIN_MOVE_POLYGON_POINT":
-      case "ADD_POLYGON_POINT":
-      case "SELECT_REGION":
-      case "CHANGE_REGION":
-      case "DELETE_REGION":
-      case "OPEN_REGION_EDITOR":
-        return copyImpliedRegions()
-      case "MOUSE_DOWN": {
-        switch (state.selectedTool) {
-          case "create-point":
-          case "create-polygon":
-          case "create-box":
-          case "create-keypoints":
-            return copyImpliedRegions()
-          default:
-            break
-        }
-        break
-      }
-      default:
-        break
-    }
-  }
-
-  return state
-}

package/src/Annotator/video.story.js

@@ -1,51 +0,0 @@
-// @flow
-
-import React from "react"
-
-import { storiesOf } from "@storybook/react"
-import { action } from "@storybook/addon-actions"
-import Annotator from "./"
-
-storiesOf("Annotator(video)", module).add("Video Annotator", () => {
-  const props = {
-    regionClsList: ["valid", "invalid"],
-    enabledTools: ["select", "create-box", "create-polygon", "create-point"],
-    keyframes: {
-      0: {
-        regions: [
-          {
-            id: "910517662556203",
-            cls: "valid",
-            color: "#f44336",
-            type: "box",
-            x: 0.12195121951219515,
-            y: 0.28726287262872624,
-            w: 0.2606707317073171,
-            h: 0.4769647696476965,
-          },
-        ],
-      },
-      2656: {
-        regions: [
-          {
-            id: "910517662556203",
-            cls: "valid",
-            color: "#f44336",
-            type: "box",
-            x: 0.13109756097560976,
-            y: 0.08672086720867206,
-            w: 0.3445121951219512,
-            h: 0.7913279132791328,
-          },
-        ],
-      },
-    },
-    onExit: action("onExit"),
-    taskDescription: "",
-    videoName: "",
-    videoTime: 0,
-    videoSrc:
-      "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
-  }
-  return <Annotator {...props} />
-})

package/src/ClassSelectionMenu/index.js

@@ -1,108 +0,0 @@
-import React, { useEffect } from "react"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import Box from "@mui/material/Box"
-import * as muiColors from "@mui/material/colors"
-import SidebarBoxContainer from "../SidebarBoxContainer"
-import colors from "../colors"
-import BallotIcon from "@mui/icons-material/Ballot"
-import capitalize from "lodash/capitalize"
-import classnames from "classnames"
-
-const theme = createTheme()
-const LabelContainer = styled("div")(({ theme }) => ({
-  display: "flex",
-  paddingTop: 4,
-  paddingBottom: 4,
-  paddingLeft: 16,
-  paddingRight: 16,
-  alignItems: "center",
-  cursor: "pointer",
-  opacity: 0.7,
-  backgroundColor: "#fff",
-  "&:hover": {
-    opacity: 1,
-  },
-  "&.selected": {
-    opacity: 1,
-    fontWeight: "bold",
-  },
-}))
-const Circle = styled("div")(({ theme }) => ({
-  width: 12,
-  height: 12,
-  borderRadius: 12,
-  marginRight: 8,
-}))
-const Label = styled("div")(({ theme }) => ({
-  fontSize: 11,
-}))
-const DashSep = styled("div")(({ theme }) => ({
-  flexGrow: 1,
-  borderBottom: `2px dotted ${muiColors.grey[300]}`,
-  marginLeft: 8,
-  marginRight: 8,
-}))
-const Number = styled("div")(({ theme }) => ({
-  fontSize: 11,
-  textAlign: "center",
-  minWidth: 14,
-  paddingTop: 2,
-  paddingBottom: 2,
-  fontWeight: "bold",
-  color: muiColors.grey[700],
-}))
-
-export const ClassSelectionMenu = ({
-  selectedCls,
-  regionClsList,
-  onSelectCls,
-}) => {
-  useEffect(() => {
-    const keyMapping = {}
-    for (let i = 0; i < 9 && i < regionClsList.length; i++) {
-      keyMapping[i + 1] = () => onSelectCls(regionClsList[i])
-    }
-    const onKeyDown = (e) => {
-      if (keyMapping[e.key]) {
-        keyMapping[e.key]()
-        e.preventDefault()
-        e.stopPropagation()
-      }
-    }
-    window.addEventListener("keydown", onKeyDown)
-    return () => window.removeEventListener("keydown", onKeyDown)
-  }, [regionClsList, selectedCls])
-
-  return (
-    <ThemeProvider theme={theme}>
-      <SidebarBoxContainer
-        title="Classifications"
-        subTitle=""
-        icon={<BallotIcon style={{ color: muiColors.grey[700] }} />}
-        expandedByDefault
-      >
-        {regionClsList.map((label, index) => (
-          <LabelContainer
-            className={classnames({ selected: label === selectedCls })}
-            onClick={() => onSelectCls(label)}
-          >
-            <Circle
-              style={{ backgroundColor: colors[index % colors.length] }}
-            />
-            <Label className={classnames({ selected: label === selectedCls })}>
-              {capitalize(label)}
-            </Label>
-            <DashSep />
-            <Number className={classnames({ selected: label === selectedCls })}>
-              {index < 9 ? `Key [${index + 1}]` : ""}
-            </Number>
-          </LabelContainer>
-        ))}
-        <Box pb={2} />
-      </SidebarBoxContainer>
-    </ThemeProvider>
-  )
-}
-
-export default ClassSelectionMenu

package/src/Crosshairs/index.js

@@ -1,64 +0,0 @@
-// @flow
-
-import React, { Fragment, useEffect, useState } from "react"
-
-export const Crosshairs = ({
-  mousePosition,
-  x,
-  y,
-}: {
-  mousePosition: { current: { x: number, y: number } },
-  x?: number,
-  y?: number,
-}) => {
-  const [forceRenderState, changeForceRenderState] = useState()
-
-  if (mousePosition) {
-    x = mousePosition.current.x
-    y = mousePosition.current.y
-  }
-
-  useEffect(() => {
-    if (!mousePosition) return
-    const interval = setInterval(() => {
-      if (x !== mousePosition.current.x || y !== mousePosition.current.y) {
-        changeForceRenderState([
-          mousePosition.current.x,
-          mousePosition.current.y,
-        ])
-      }
-    }, 10)
-    return () => clearInterval(interval)
-  })
-
-  return (
-    <Fragment>
-      <div
-        style={{
-          position: "absolute",
-          height: "100%",
-          width: 1,
-          zIndex: 10,
-          backgroundColor: "#f00",
-          left: x,
-          pointerEvents: "none",
-          top: 0,
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          width: "100%",
-          zIndex: 10,
-          height: 1,
-          backgroundColor: "#f00",
-          top: y,
-          pointerEvents: "none",
-          left: 0,
-        }}
-      />
-    </Fragment>
-  )
-}
-
-export default Crosshairs

package/src/DebugSidebarBox/index.js

@@ -1,36 +0,0 @@
-// @flow
-
-import React from "react"
-import SidebarBoxContainer from "../SidebarBoxContainer"
-
-export const DebugSidebarBox = ({ state, lastAction }: any) => {
-  const image = (state.images || [])[state.selectedImage]
-  const region = image
-    ? (image.regions || []).filter((r) => r.highlighted)
-    : null
-
-  return (
-    <SidebarBoxContainer title="Debug" icon={<span />} expandedByDefault>
-      <div style={{ padding: 4 }}>
-        <div>
-          <b>region</b>:
-        </div>
-        <pre>{JSON.stringify(region, null, "  ")}</pre>
-        <div>
-          <b>lastAction</b>:
-        </div>
-        <pre>{JSON.stringify(lastAction, null, "  ")}</pre>
-        <div>
-          <b>mode</b>:
-        </div>
-        <pre>{JSON.stringify(state.mode, null, "  ")}</pre>
-        <div>
-          <b>frame:</b>
-        </div>
-        <pre>{JSON.stringify(state.selectedImageFrameTime, null, "  ")}</pre>
-      </div>
-    </SidebarBoxContainer>
-  )
-}
-
-export default DebugSidebarBox