@searpent/react-image-annotate 2.0.3 → 2.0.4

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/{MainLayout → src/MainLayout}/styles.js

@@ -1,4 +1,5 @@
-import { grey } from "@mui/material/colors";
+import { grey } from "@mui/material/colors"
+
 export default {
   container: {
     display: "flex",
@@ -14,12 +15,12 @@ export default {
       left: 0,
       right: 0,
       top: 0,
-      bottom: 0
-    }
+      bottom: 0,
+    },
   },
   headerTitle: {
     fontWeight: "bold",
     color: grey[700],
-    paddingLeft: 16
-  }
-};
+    paddingLeft: 16,
+  },
+}

package/src/MainLayout/types.js

@@ -0,0 +1,164 @@
+// @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 Metadata = {
+  key: string,
+  value: string
+}
+
+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,
+  metadata?: Array<Metadata>
+}
+
+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 |}
+  | {| type: "UPDATE_REGIONS", imageId: string, regions: Arrat < Region >}
+  | {| type: "IMAGES_CHANGED", updatedAt: Date |}

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/MetadataEditorSidebarBox/index.js

@@ -0,0 +1,98 @@
+// @flow
+
+import React, { memo } from "react"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import DescriptionIcon from "@mui/icons-material/Description"
+import { styled } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { grey } from "@mui/material/colors"
+
+type MetadataItemProps = {
+  name: string,
+  value: string,
+  imageIndex: number,
+  onChange: ({ name: string, value: String, imageIndex: number }) => void
+}
+
+const MetadataItemDiv = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  marginBottom: "1rem",
+  "& > label": {
+    fontSize: "1rem",
+    marginBottom: ".5rem",
+    textTransform: "capitalize"
+  }
+}))
+
+const MetadataItem = ({ name, value, imageIndex, onChange }: MetadataItemProps) => {
+  const handleChange = e => {
+    e.preventDefault()
+    const { name, value } = e.target
+    onChange({
+      name,
+      value,
+      imageIndex
+    })
+  }
+
+  return (
+    <MetadataItemDiv>
+      <label for={name}>{name}</label>
+      <input type="text" value={value} name={name} onChange={handleChange} />
+    </MetadataItemDiv>
+  )
+}
+
+const MetadataList = ({ title, metadata, imageIndex, onMetadataChange }) => (
+  <div>
+    <h2>{title}</h2>
+    {
+      metadata.map(({ key, value }) => (
+        <MetadataItem name={key} value={value} imageIndex={imageIndex} onChange={onMetadataChange} />
+      ))
+    }
+  </div>
+)
+
+const theme = createTheme()
+const DivContainer = styled("div")(({ theme }) => ({
+  paddingLeft: 16,
+  paddingRight: 16,
+  fontSize: 12,
+  "& h1": { fontSize: 18 },
+  "& h2": { fontSize: 14 },
+  "& h3": { fontSize: 12 },
+  "& h4": { fontSize: 12 },
+  "& h5": { fontSize: 12 },
+  "& h6": { fontSize: 12 },
+  "& p": { fontSize: 12 },
+  "& a": {},
+  "& img": { width: "100%" },
+}))
+
+export const MetadataEditorSidebarBox = ({ state, onMetadataChange }) => {
+
+
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Metadata"
+        icon={<DescriptionIcon style={{ color: grey[700] }} />}
+        expandedByDefault={true}
+      >
+        <DivContainer>
+          <MetadataList title="Global" metadata={state.metadata} onMetadataChange={onMetadataChange} />
+          {
+            state?.images[state.selectedImage]?.metadata && (
+              <MetadataList title="Local" metadata={state.images[state.selectedImage].metadata} imageIndex={state.selectedImage} onMetadataChange={onMetadataChange} />
+            )
+          }
+
+        </DivContainer>
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+export default memo(MetadataEditorSidebarBox)

package/src/PageSelector/index.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from "classnames"
+require('./page-selector.css').toString();
+
+function PageThumbnail({ src, isActive, onClick, pageNumber }) {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className={classnames('page-thumbnail', {
+        'page-thumbnail-is-active': isActive
+      })}
+      onClick={onClick}
+    >
+      <img src={src} alt="" />
+      {
+        (pageNumber !== undefined) && (
+          <div className="page-number-wrapper">
+            <span className="page-number">{pageNumber}</span>
+          </div>
+        )
+      }
+
+    </div >
+  );
+}
+
+function PagesSelector({ pages, onPageClick, onRecalc, onSave, recalcActive, saveActive }) {
+  return (
+    <div className="page-selector">
+      <div className="bottom-buttons">
+        <button onClick={onRecalc} disabled={!recalcActive}>Recalc</button>
+        <button onClick={onSave} disabled={!saveActive}>Save</button>
+      </div>
+      <div className="pages">
+        {pages.map((page, idx) => (
+          <PageThumbnail
+            key={page.id}
+            src={page.src}
+            isActive={page.isActive}
+            onClick={() => onPageClick(idx)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+PagesSelector.propTypes = {
+  pages: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      src: PropTypes.string.isRequired,
+      isActive: PropTypes.string.isRequired,
+      pageNumber: PropTypes.string
+    })
+  ).isRequired,
+  onPageClick: PropTypes.func,
+  onRecalc: PropTypes.func,
+  onSave: PropTypes.func,
+  recalcActive: PropTypes.bool,
+  saveActive: PropTypes.bool,
+  pageNumber: PropTypes.string
+};
+
+PagesSelector.defaultProps = {
+  onPageClick: () => { },
+  onRecalc: () => { },
+  onSave: () => { },
+  recalcActive: false,
+  saveActive: false,
+  pageNumber: undefined
+};
+
+export default PagesSelector;

package/src/PageSelector/page-selector.css

@@ -0,0 +1,69 @@
+.page-selector {
+  height: 100vh;
+  overflow-y: scroll;
+  width: 10%;
+}
+
+.pages {
+  list-style: none;
+  padding: 1rem;
+}
+
+.page-thumbnail {
+  margin-bottom: 1rem;
+  border-radius: .25rem !important;
+  overflow: hidden;
+  filter: grayscale(1);
+  transition: transform .2s;
+  opacity: .5;
+}
+
+.page-thumbnail:hover {
+  box-shadow: 0 0 2rem 0 #8898aa !important;
+  filter: grayscale(0);
+  cursor: pointer;
+  opacity: 1;
+}
+
+.page-thumbnail-is-active {
+  filter: grayscale(0);
+  opacity: 1;
+}
+
+.page-thumbnail img {
+  width: 100%;
+}
+
+.bottom-buttons {
+  background: linear-gradient(#8898aa, rgba(255, 255, 255, 0));
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  z-index: 100;
+}
+
+.bottom-buttons button {
+  margin-bottom: 1rem;
+  width: 100%;
+}
+
+.page-number-wrapper {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 10%;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(rgba(255, 255, 255, 0), #8898aa);
+  padding: .5rem 0;
+}
+
+.page-number {
+  font-size: 1.5rem;
+  font-weight: 800;
+}