@searpent/react-image-annotate 2.0.4 → 2.0.7

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

@@ -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,98 +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,
-  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

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