@searpent/react-image-annotate 2.0.0

package/src/MainLayout/index.story.js

@@ -0,0 +1,240 @@
+// @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/styles.js

@@ -0,0 +1,26 @@
+import { grey } from "@mui/material/colors"
+
+export default {
+  container: {
+    display: "flex",
+    flexGrow: 1,
+    flexDirection: "column",
+    height: "100%",
+    maxHeight: "100vh",
+    backgroundColor: "#fff",
+    overflow: "hidden",
+    "&.fullscreen": {
+      position: "absolute",
+      zIndex: 99999,
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+    },
+  },
+  headerTitle: {
+    fontWeight: "bold",
+    color: grey[700],
+    paddingLeft: 16,
+  },
+}

package/src/MainLayout/types.js

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

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

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

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

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