@searpent/react-image-annotate 2.0.74 → 2.0.76

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,171 @@
+// @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 MetadataConfig = {
+  key: string,
+  level: string,
+  options: Array<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>,
+  lockedUntil?: string,
+}
+
+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: Array < 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,160 @@
+// @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,
+  metadataId?: string,
+  onChange: ({ name: string, value: String, imageIndex: number }) => void
+}
+
+const MetadataItemDiv = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  marginBottom: ".5em",
+  "& > label": {
+    fontSize: "1rem",
+    marginBottom: ".5em",
+    textTransform: "capitalize",
+    wordWrap: "break-word",
+  },
+  label: {
+    width: "50%",
+  },
+  select: {
+    width: "100%",
+  },
+}))
+
+const MetadataItem = ({ name, value, metadataId, imageIndex, groupId, onChange, metadataConfig = {} }: MetadataItemProps) => {
+  const handleChange = e => {
+    e.preventDefault()
+    const { name, value } = e.target
+    onChange({
+      name,
+      value,
+      imageIndex,
+      groupId,
+      metadataId
+    })
+  }
+
+  return (
+    <MetadataItemDiv>
+      <label for={name}>{name}</label>
+      <div style={{
+        width: "50%",
+      }}>
+        {
+          metadataConfig?.selectable !== true && (
+            <>
+              <input type="text" value={value} name={name} onChange={handleChange} id={name} list={`${name}-list`} style={{ width: "100%" }} />
+              <datalist id={`${name}-list`}>
+                {
+                  metadataConfig?.options?.map(opt => {
+                    if (opt.value && opt.label) {
+                      return <option key={opt.value} value={opt.value}>{opt.label}</option>
+                    }
+                    return <option key={opt} value={opt}></option>
+                  })
+                }
+              </datalist>
+            </>
+          )
+        }
+        {
+          metadataConfig?.selectable === true && (
+            <select name={name} id={name} onChange={handleChange} style={{ width: '100%' }}>
+              {
+                metadataConfig?.options?.map(opt => {
+                  if (opt.value && opt.label) {
+                    return <option key={opt.value} value={opt.value} selected={opt.value === value}>{opt.label}</option>
+                  }
+                  return <option key={opt} value={opt}></option>
+                })
+              }
+            </select>
+          )
+        }
+
+      </div>
+    </MetadataItemDiv>
+  )
+}
+
+const MetadataList = ({ title, metadata, imageIndex, onMetadataChange, metadataConfigs = [], groupId }) => (
+  <div>
+    <h2>{title}</h2>
+    {
+      metadata && metadata.map(({ key, value, metadataId }) => (
+        <MetadataItem name={key} value={value} imageIndex={imageIndex} metadataId={metadataId} groupId={groupId} onChange={onMetadataChange} metadataConfig={metadataConfigs.find(i => i.key === key)} />
+      ))
+    }
+  </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 }) => {
+  const metadataConfigs = state.metadataConfigs || [];
+  const selectedPhotoMetadata = state?.images[state.selectedImage]?.metadata;
+  let selectedGroupId = state?.images[state.selectedImage]?.regions?.find(r => r.highlighted === true)?.groupId;
+  let articleMetadata = []; // example: [{key: "previousArticleId", value "123-123-123-123-123"}]
+
+  if (selectedGroupId !== undefined) {
+    const articleMetadataRegion = state?.images[state.selectedImage].regions.find(r => r.cls === 'metadata' && `${r.groupId}` === selectedGroupId)
+    if (articleMetadataRegion) {
+      const metadata = JSON.parse(articleMetadataRegion.text)
+      articleMetadata = metadata
+    }
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Metadata"
+        icon={<DescriptionIcon style={{ color: grey[700] }} />}
+        expandedByDefault={true}
+      >
+        <DivContainer style={{
+          height: "600px",
+        }}>
+          {
+            articleMetadata.length > 0 && (
+              <MetadataList title="Article" metadata={articleMetadata} imageIndex={state.selectedImage} groupId={selectedGroupId} onMetadataChange={onMetadataChange} metadataConfigs={metadataConfigs.filter(mfc => mfc.level === 'photo_metadata-engine')} />
+            )
+          }
+          {
+            selectedPhotoMetadata && (
+              <MetadataList title="Page" metadata={selectedPhotoMetadata} imageIndex={state.selectedImage} onMetadataChange={onMetadataChange} metadataConfigs={metadataConfigs.filter(mfc => mfc.level === 'photo')} />
+            )
+          }
+          <MetadataList title="Issue" metadata={state.albumMetadata} onMetadataChange={onMetadataChange} id="metadata-album" metadataConfigs={metadataConfigs.filter(mfc => mfc.level === 'album')} />
+        </DivContainer>
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+export default memo(MetadataEditorSidebarBox)