@searpent/react-image-annotate 2.0.5 → 2.0.6

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: 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,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/PageSelector/page-selector.css

@@ -1,69 +0,0 @@
-.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;
-}