@searpent/react-image-annotate 2.0.0 → 2.0.3

package/src/MainLayout/index.story.js

@@ -1,240 +0,0 @@
-// @flow
-
-import React from "react"
-
-import { storiesOf } from "@storybook/react"
-import { action } from "@storybook/addon-actions"
-import { testRegions } from "../ImageCanvas/index.story"
-
-import exampleImage from "../ImageCanvas/seves_desk.story.jpg"
-import moment from "moment"
-
-import MainLayout from "./"
-
-storiesOf("MainLayout", module)
-  .add("Basic", () => (
-    <MainLayout
-      state={{
-        showTags: true,
-        selectedImage: exampleImage,
-        selectedTool: "select",
-        taskDescription: "## Example Task Description\n\nPlease work hard.",
-        labelImages: true,
-        imageClsList: ["alpha image", "beta image", "charlie image"],
-        imageTagList: ["tag1", "tag2", "tag3"],
-        regionClsList: ["alpha region", "beta region", "charlie region"],
-        regionTagList: ["tag1", "tag2", "tag3"],
-        images: [
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-            regions: testRegions,
-          },
-          {
-            src: "https://loremflickr.com/100/100/cars?lock=1",
-            name: "Frame 0036",
-          },
-          {
-            src: "https://loremflickr.com/100/100/cars?lock=2",
-            name: "Frame 0037",
-          },
-          {
-            src: "https://loremflickr.com/100/100/cars?lock=3",
-            name: "Frame 0038",
-          },
-        ],
-        mode: null,
-        enabledTools: ["create-point", "create-polygon", "modify-allowed-area"],
-        history: [{ name: "Reset Stuff", state: null, time: moment() }],
-      }}
-      dispatch={(a) => action(a.type)(a)}
-    />
-  ))
-  .add("Completing a Polygon", () => (
-    <MainLayout
-      state={{
-        showTags: false,
-        selectedImage: exampleImage,
-        selectedTool: "create-polygon",
-        taskDescription: "",
-        mode: {
-          mode: "DRAW_POLYGON",
-          regionId: "p1",
-        },
-        images: [
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-            regions: [
-              {
-                type: "polygon",
-                points: [
-                  [0.25, 0.25],
-                  [0.25, 0.5],
-                  [0.5, 0.5],
-                ],
-                highlighted: true,
-                open: true,
-                color: "#00f",
-                id: "p1",
-              },
-            ],
-          },
-        ],
-        enabledTools: [],
-        history: [],
-      }}
-      dispatch={(a) => action(a.type)(a)}
-    />
-  ))
-  .add("Region Overlap Clicking", () => (
-    <MainLayout
-      state={{
-        showTags: false,
-        selectedImage: exampleImage,
-        selectedTool: "create-box",
-        taskDescription: "",
-        showTags: true,
-        mode: {
-          mode: "DRAW_POLYGON",
-          regionId: "p1",
-        },
-        images: [
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-            regions: [
-              {
-                type: "box",
-                cls: "Pants",
-                x: 0.25,
-                y: 0.25,
-                w: 0.5,
-                h: 0.5,
-                color: "#00f",
-                id: "p1",
-              },
-              {
-                type: "box",
-                cls: "Shirt",
-                x: 0.8,
-                y: 0.25,
-                w: 0.1,
-                h: 0.1,
-                highlighted: true,
-                color: "#00f",
-                id: "p1",
-              },
-            ],
-          },
-        ],
-        clsList: [],
-        tagList: [],
-        enabledTools: [],
-        history: [],
-      }}
-      dispatch={(a) => !a.type.includes("MOUSE_MOVE") && action(a.type)(a)}
-    />
-  ))
-  .add("Point Distances", () => (
-    <MainLayout
-      state={{
-        showTags: false,
-        showPointDistances: true,
-        selectedImage: exampleImage,
-        selectedTool: "create-point",
-        taskDescription: "",
-        showTags: true,
-        mode: null,
-        images: [
-          {
-            src: exampleImage,
-            name: "Point Distance Check",
-            regions: [
-              {
-                type: "point",
-                cls: "P",
-                x: 0.25,
-                y: 0.25,
-                color: "#f00",
-                id: "p1",
-              },
-              {
-                type: "point",
-                cls: "P",
-                x: 0.5,
-                y: 0.25,
-                color: "#0f0",
-                id: "p2",
-              },
-              {
-                type: "point",
-                cls: "P",
-                x: 0.5,
-                y: 0.5,
-                color: "#00f",
-                id: "p3",
-              },
-            ],
-          },
-        ],
-        clsList: [],
-        tagList: [],
-        enabledTools: [],
-        history: [],
-      }}
-      dispatch={(a) => !a.type.includes("MOUSE_MOVE") && action(a.type)(a)}
-    />
-  ))
-  .add("Point distances real units", () => (
-    <MainLayout
-      state={{
-        showTags: false,
-        showPointDistances: true,
-        pointDistancePrecision: 2,
-        selectedImage: exampleImage,
-        selectedTool: "create-point",
-        taskDescription: "",
-        showTags: true,
-        mode: null,
-        images: [
-          {
-            src: exampleImage,
-            name: "Point Distance Check",
-            realSize: { w: 200, h: 1000, unitName: "cm" },
-            regions: [
-              {
-                type: "point",
-                cls: "P",
-                x: 0.25,
-                y: 0.25,
-                color: "#f00",
-                id: "p1",
-              },
-              {
-                type: "point",
-                cls: "P",
-                x: 0.5,
-                y: 0.25,
-                color: "#0f0",
-                id: "p2",
-              },
-              {
-                type: "point",
-                cls: "P",
-                x: 0.5,
-                y: 0.5,
-                color: "#00f",
-                id: "p3",
-              },
-            ],
-          },
-        ],
-        clsList: [],
-        tagList: [],
-        enabledTools: [],
-        history: [],
-      }}
-      dispatch={(a) => !a.type.includes("MOUSE_MOVE") && action(a.type)(a)}
-    />
-  ))

package/src/MainLayout/types.js

@@ -1,156 +0,0 @@
-// @flow
-
-import type {
-  Region,
-  Polygon,
-  Box,
-  Point,
-  KeypointsDefinition,
-  Keypoints,
-  KeypointDefinition,
-} from "../ImageCanvas/region-tools.js"
-
-import type { Node } from "react"
-
-export type ToolEnum =
-  | "select"
-  | "pan"
-  | "zoom"
-  | "create-point"
-  | "create-box"
-  | "create-polygon"
-  | "create-pixel"
-  | "create-expanding-line"
-  | "create-keypoints"
-
-export type Image = {
-  src: string,
-  thumbnailSrc?: string,
-  name: string,
-  regions?: Array<Region>,
-  pixelSize?: { w: number, h: number },
-  realSize?: { w: number, h: number, unitName: string },
-  frameTime?: number,
-}
-
-export type Mode =
-  | null
-  | {| mode: "DRAW_POLYGON", regionId: string |}
-  | {| mode: "MOVE_POLYGON_POINT", regionId: string, pointIndex: number |}
-  | {|
-      mode: "RESIZE_BOX",
-      editLabelEditorAfter?: boolean,
-      regionId: string,
-      freedom: [number, number],
-      original: { x: number, y: number, w: number, h: number },
-      isNew?: boolean,
-    |}
-  | {| mode: "MOVE_REGION" |}
-  | {| mode: "MOVE_KEYPOINT", regionId: string, keypointId: string |}
-  | {|
-      mode: "RESIZE_KEYPOINTS",
-      landmarks: {
-        [string]: KeypointDefinition,
-      },
-      centerX: number,
-      centerY: number,
-      regionId: string,
-      isNew: boolean,
-    |}
-
-export type MainLayoutStateBase = {|
-  annotationType: "video" | "image",
-  mouseDownAt?: ?{ x: number, y: number },
-  fullScreen?: boolean,
-  settingsOpen?: boolean,
-  minRegionSize?: number,
-  showTags: boolean,
-  showMask: boolean,
-  showPointDistances?: boolean,
-  pointDistancePrecision?: number,
-  selectedTool: ToolEnum,
-  selectedCls?: string,
-  mode: Mode,
-  taskDescription: string,
-  allowedArea?: { x: number, y: number, w: number, h: number },
-  regionClsList?: Array<string>,
-  regionTagList?: Array<string>,
-  imageClsList?: Array<string>,
-  imageTagList?: Array<string>,
-  enabledTools: Array<string>,
-  history: Array<{ time: Date, state: MainLayoutState, name: string }>,
-  keypointDefinitions: KeypointsDefinition,
-|}
-
-export type MainLayoutImageAnnotationState = {|
-  ...MainLayoutStateBase,
-  annotationType: "image",
-
-  selectedImage?: string,
-  images: Array<Image>,
-  labelImages?: boolean,
-
-  // If the selectedImage corresponds to a frame of a video
-  selectedImageFrameTime?: number,
-|}
-
-export type MainLayoutVideoAnnotationState = {|
-  ...MainLayoutStateBase,
-  annotationType: "video",
-
-  videoSrc: string,
-  currentVideoTime: number,
-  videoName?: string,
-  videoPlaying: boolean,
-  videoDuration?: number,
-  keyframes: {
-    [time: number]: {|
-      time: number,
-      regions: Array<Region>,
-    |},
-  },
-  pixelSize?: { w: number, h: number },
-  realSize?: { w: number, h: number, unitName: string },
-|}
-
-export type MainLayoutState =
-  | MainLayoutImageAnnotationState
-  | MainLayoutVideoAnnotationState
-
-export type Action =
-  | {| type: "@@INIT" |}
-  | {| type: "SELECT_IMAGE", image: Image, imageIndex: number |}
-  | {|
-      type: "IMAGE_OR_VIDEO_LOADED",
-      metadata: {
-        naturalWidth: number,
-        naturalHeight: number,
-        duration?: number,
-      },
-    |}
-  | {| type: "CHANGE_REGION", region: Region |}
-  | {| type: "RESTORE_HISTORY" |}
-  | {| type: "CLOSE_POLYGON", polygon: Polygon |}
-  | {| type: "SELECT_REGION", region: Region |}
-  | {| type: "BEGIN_MOVE_POINT", point: Point |}
-  | {| type: "BEGIN_BOX_TRANSFORM", box: Box, directions: [number, number] |}
-  | {| type: "BEGIN_MOVE_POLYGON_POINT", polygon: Polygon, pointIndex: number |}
-  | {| type: "BEGIN_MOVE_KEYPOINT", region: Keypoints, keypointId: string |}
-  | {|
-      type: "ADD_POLYGON_POINT",
-      polygon: Polygon,
-      point: { x: number, y: number },
-      pointIndex: number,
-    |}
-  | {| type: "MOUSE_MOVE", x: number, y: number |}
-  | {| type: "MOUSE_DOWN", x: number, y: number |}
-  | {| type: "MOUSE_UP", x: number, y: number |}
-  | {| type: "CHANGE_REGION", region: Region |}
-  | {| type: "OPEN_REGION_EDITOR", region: Region |}
-  | {| type: "CLOSE_REGION_EDITOR", region: Region |}
-  | {| type: "DELETE_REGION", region: Region |}
-  | {| type: "DELETE_SELECTED_REGION" |}
-  | {| type: "HEADER_BUTTON_CLICKED", buttonName: string |}
-  | {| type: "SELECT_TOOL", selectedTool: ToolEnum |}
-  | {| type: "CANCEL" |}
-  | {| type: "SELECT_CLASSIFICATION", cls: string |}

package/src/MainLayout/use-implied-video-regions.js

@@ -1,17 +0,0 @@
-// @flow
-
-import { useMemo } from "react"
-import type { MainLayoutVideoAnnotationState } from "../Annotator/types"
-import getImpliedVideoRegions from "../Annotator/reducers/get-implied-video-regions.js"
-
-const emptyArr = []
-
-export default (state: MainLayoutVideoAnnotationState) => {
-  if (state.annotationType !== "video") return emptyArr
-  const { keyframes, currentVideoTime = 0 } = state
-  // TODO memoize
-  return useMemo(
-    () => getImpliedVideoRegions(keyframes, currentVideoTime),
-    [keyframes, currentVideoTime]
-  )
-}

package/src/PointDistances/index.js

@@ -1,90 +0,0 @@
-// @flow weak
-
-import React, { Fragment } from "react"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-
-const theme = createTheme()
-const Svg = styled("svg")(({ theme }) => ({
-  pointerEvents: "none",
-  position: "absolute",
-  zIndex: 1,
-  left: 0,
-  top: 0,
-  width: "100%",
-  height: "100%",
-  "& text": {
-    fill: "#fff",
-  },
-  "& path": {
-    vectorEffect: "non-scaling-stroke",
-    strokeWidth: 2,
-    opacity: 0.5,
-    stroke: "#FFF",
-    fill: "none",
-    strokeDasharray: 5,
-    animationDuration: "4s",
-    animationTimingFunction: "linear",
-    animationIterationCount: "infinite",
-    animationPlayState: "running",
-  },
-}))
-
-export const PointDistances = ({
-  projectRegionBox,
-  regions,
-  pointDistancePrecision,
-  realSize,
-}) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <Svg>
-        {regions
-          .filter((r1) => r1.type === "point")
-          .flatMap((r1, i1) =>
-            regions
-              .filter((r2, i2) => i2 > i1)
-              .filter((r2) => r2.type === "point")
-              .map((r2) => {
-                const pr1 = projectRegionBox(r1)
-                const pr2 = projectRegionBox(r2)
-                const prm = {
-                  x: (pr1.x + pr1.w / 2 + pr2.x + pr2.w / 2) / 2,
-                  y: (pr1.y + pr1.h / 2 + pr2.y + pr2.h / 2) / 2,
-                }
-                let displayDistance
-                if (realSize) {
-                  const { w, h, unitName } = realSize
-                  displayDistance =
-                    Math.sqrt(
-                      Math.pow(r1.x * w - r2.x * w, 2) +
-                        Math.pow(r1.y * h - r2.y * h, 2)
-                    ).toFixed(pointDistancePrecision) + unitName
-                } else {
-                  displayDistance =
-                    (
-                      Math.sqrt(
-                        Math.pow(r1.x - r2.x, 2) + Math.pow(r1.y - r2.y, 2)
-                      ) * 100
-                    ).toFixed(pointDistancePrecision) + "%"
-                }
-                return (
-                  <Fragment>
-                    <path
-                      d={`M${pr1.x + pr1.w / 2},${pr1.y + pr1.h / 2} L${
-                        pr2.x + pr2.w / 2
-                      },${pr2.y + pr2.h / 2}`}
-                    />
-                    <text x={prm.x} y={prm.y}>
-                      {displayDistance}
-                    </text>
-                  </Fragment>
-                )
-              })
-          )}
-      </Svg>
-    </ThemeProvider>
-  )
-}
-
-export default PointDistances

package/src/PreventScrollToParents/index.js

@@ -1,48 +0,0 @@
-// @flow
-
-import React, { useState } from "react"
-import { RemoveScroll } from "react-remove-scroll"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import useEventCallback from "use-event-callback"
-
-const theme = createTheme()
-const Container = styled("div")(({ theme }) => ({
-  "& > div": {
-    width: "100%",
-    height: "100%",
-  },
-}))
-
-export const PreventScrollToParents = ({ children, ...otherProps }) => {
-  const [mouseOver, changeMouseOver] = useState(false)
-  const onMouseMove = useEventCallback((e) => {
-    if (!mouseOver) changeMouseOver(true)
-    if (otherProps.onMouseMove) {
-      otherProps.onMouseMove(e)
-    }
-  })
-  const onMouseLeave = useEventCallback((e) => {
-    setTimeout(() => {
-      if (mouseOver) {
-        changeMouseOver(false)
-      }
-    }, 100)
-  })
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Container
-        {...otherProps}
-        onMouseMove={onMouseMove}
-        onMouseLeave={onMouseLeave}
-      >
-        <RemoveScroll enabled={mouseOver} removeScrollBar={false}>
-          {children}
-        </RemoveScroll>
-      </Container>
-    </ThemeProvider>
-  )
-}
-
-export default PreventScrollToParents

package/src/PreventScrollToParents/index.story.js

@@ -1,23 +0,0 @@
-// @flow
-
-import React from "react"
-
-import { storiesOf } from "@storybook/react"
-import { action } from "@storybook/addon-actions"
-
-import RemoveScrollOnChildren from "./"
-
-storiesOf("RemoveScrollOnChildren", module).add("Basic", () => (
-  <div style={{ width: "100vh", textAlign: "center", height: "200vh" }}>
-    <RemoveScrollOnChildren>
-      <div
-        style={{
-          display: "inline-block",
-          width: 100,
-          height: 100,
-          backgroundColor: "red",
-        }}
-      />
-    </RemoveScrollOnChildren>
-  </div>
-))