@searpent/react-image-annotate 2.0.76 → 2.0.78

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,171 +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 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

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

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