@searpent/react-image-annotate 2.0.77 → 2.0.78

package/src/FullImageSegmentationAnnotator/index.story.js

@@ -1,177 +0,0 @@
-// @flow
-
-import React from "react"
-
-import { storiesOf } from "@storybook/react"
-import { action } from "@storybook/addon-actions"
-import orange from "./orange.story.png"
-import hard1 from "./hard1.story.jpg"
-import hard2 from "./hard2.story.jpg"
-import hard3 from "./hard3.story.jpg"
-
-import FullImageSegmentationAnnotator from "./"
-
-storiesOf("FullImageSegmentationAnnotator.Basic", module)
-  .add("Orange 2 Class", () => (
-    <div style={{ width: "95vw", height: "95vh" }}>
-      <FullImageSegmentationAnnotator
-        images={[
-          {
-            name: "Seve's Desk",
-            // src:
-            //   "https://a.allegroimg.com/s128/113a6e/09d2c0ed4f278610e555c95b1d50/Rama-BIANCHI-OLTRE-XR4-DISC-carbon-Vision-ACR-51cm-Dedykowany-a-do-kolarstwo-szosowe",
-            // src: "https://i.imgur.com/Dv5lkQZ.png",
-            src: orange,
-            regions: [
-              [1, 40, 280],
-              [1, 10, 10],
-              [1, 240, 300],
-            ]
-              .map(([cls, y, x], i) => ({
-                cls: ["fg", "bg"][cls],
-                color: "hsl(162,100%,50%)",
-                editingLabels: false,
-                highlighted: false,
-                id: "a" + i,
-                type: "point",
-                x: x / 320,
-                y: y / 249,
-              }))
-              .concat([
-                {
-                  cls: "fg",
-                  color: "hsl(162,100%,50%)",
-                  editingLabels: false,
-                  highlighted: false,
-                  id: "bb",
-                  type: "box",
-                  x: 0.3,
-                  y: 0.25,
-                  w: 0.35,
-                  h: 0.38,
-                },
-              ]),
-          },
-        ]}
-        regionClsList={["bg", "fg"]}
-        onExit={action("onExit")}
-      />
-    </div>
-  ))
-  .add("S3 CORS domain", () => (
-    <div style={{ width: "95vw", height: "95vh" }}>
-      <FullImageSegmentationAnnotator
-        images={[
-          {
-            name: "Seve's Desk",
-            src: "https://s3.amazonaws.com/datasets.workaround.online/faces/010041.jpg",
-            regions: [
-              [0, 100, 125],
-              [0, 100, 150],
-              [1, 40, 280],
-              [1, 10, 10],
-              [1, 240, 300],
-            ].map(([cls, y, x], i) => ({
-              cls: ["fg", "bg"][cls],
-              color: "hsl(162,100%,50%)",
-              editingLabels: false,
-              highlighted: false,
-              id: "a" + i,
-              type: "point",
-              x: x / 320,
-              y: y / 249,
-            })),
-          },
-        ]}
-        regionClsList={["bg", "fg"]}
-        onExit={action("onExit")}
-      />
-    </div>
-  ))
-  .add("Orange 3 Class", () => (
-    <div style={{ width: "95vw", height: "95vh" }}>
-      <FullImageSegmentationAnnotator
-        images={[
-          {
-            name: "Seve's Desk",
-            src: orange,
-            regions: [
-              [0, 100, 125],
-              [0, 100, 150],
-              [1, 40, 280],
-              [1, 10, 10],
-              [1, 240, 300],
-            ].map(([cls, y, x], i) => ({
-              cls: ["orange", "bg", "hand"][cls],
-              color: "hsl(162,100%,50%)",
-              editingLabels: false,
-              highlighted: false,
-              id: "a" + i,
-              type: "point",
-              x: x / 320,
-              y: y / 249,
-            })),
-          },
-        ]}
-        regionClsList={["bg", "orange", "hand"]}
-        onExit={action("onExit")}
-      />
-    </div>
-  ))
-  .add("Hard 1, 8 Class, Simple Mode", () => (
-    <div style={{ width: "95vw", height: "95vh" }}>
-      <FullImageSegmentationAnnotator
-        images={[
-          {
-            name: "Hard",
-            src: hard1,
-          },
-        ]}
-        regionClsList={["bg", "1", "2", "3", "4", "5", "6", "7", "8"]}
-        onExit={action("onExit")}
-        autoSegmentationOptions={{ type: "simple" }}
-      />
-    </div>
-  ))
-  .add("Hard 1, 8 Class", () => (
-    <div style={{ width: "95vw", height: "95vh" }}>
-      <FullImageSegmentationAnnotator
-        images={[
-          {
-            name: "Hard",
-            src: hard1,
-          },
-        ]}
-        regionClsList={["1", "2", "3", "4", "5", "6", "7", "8"]}
-        onExit={action("onExit")}
-      />
-    </div>
-  ))
-  .add("Hard 2, 8 Class", () => (
-    <div style={{ width: "95vw", height: "95vh" }}>
-      <FullImageSegmentationAnnotator
-        images={[
-          {
-            name: "Really Hard",
-            src: hard2,
-          },
-        ]}
-        regionClsList={["1", "2", "3", "4", "5", "6", "7", "8"]}
-        onExit={action("onExit")}
-      />
-    </div>
-  ))
-  .add("Hard 3, 8 Class", () => (
-    <div style={{ width: "95vw", height: "95vh" }}>
-      <FullImageSegmentationAnnotator
-        images={[
-          {
-            name: "Extremely Hard",
-            src: hard3,
-          },
-        ]}
-        regionClsList={["1", "2", "3", "4", "5", "6", "7", "8"]}
-        onExit={action("onExit")}
-      />
-    </div>
-  ))

package/src/GroupSelectorSidebarBox/index.js

@@ -1,48 +0,0 @@
-// @flow
-
-import React, { memo } from "react"
-import { makeStyles } from "@mui/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import SidebarBoxContainer from "../SidebarBoxContainer"
-import CollectionsIcon from "@mui/icons-material/Collections"
-import { grey } from "@mui/material/colors"
-import List from "@mui/material/List"
-import ListItem from "@mui/material/ListItem"
-import ListItemText from "@mui/material/ListItemText"
-import uuidToHash from '../utils/uuid-to-hash';
-
-const theme = createTheme()
-const useStyles = makeStyles((theme) => ({
-  img: { width: 40, height: 40, borderRadius: 8 },
-}))
-
-export const GroupSelectorSidebarBox = ({ title, subtitle, groups, onSelect, selectedGroupId }) => {
-  const classes = useStyles()
-  return (
-    <ThemeProvider theme={theme}>
-      <SidebarBoxContainer
-        title={title || ''}
-        subTitle={subtitle || ''}
-        icon={<CollectionsIcon style={{ color: grey[700] }} />}
-      >
-        <List>
-          {groups.map(({ id, title: groupTitle, subtitle: groupSubtitle, color }, i) => (
-            <ListItem button onClick={() => onSelect(id)} dense key={id} style={{
-              backgroundColor: id === selectedGroupId ? '#bbdefb' : null
-            }}>
-              <ListItemText
-                primary={<strong style={{
-                  color
-                }}>{uuidToHash(groupTitle)}</strong>}
-                secondary={groupSubtitle}
-              />
-            </ListItem>
-          ))}
-        </List>
-
-      </SidebarBoxContainer>
-    </ThemeProvider>
-  )
-}
-
-export default GroupSelectorSidebarBox

package/src/GroupsEditorSidebarBox/index.js

@@ -1,108 +0,0 @@
-// @flow
-
-import React, { memo, useState } from "react"
-import SidebarBoxContainer from "../SidebarBoxContainer"
-import FilterNoneIcon from '@mui/icons-material/FilterNone';
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import { grey } from "@mui/material/colors"
-import uuidToHash from "../utils/uuid-to-hash";
-
-const theme = createTheme()
-
-const GroupItemDiv = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  marginBottom: "1rem",
-  "& > label": {
-    fontSize: "1rem",
-    marginBottom: ".5rem",
-    textTransform: "capitalize"
-  }
-}))
-
-const GroupItem = ({ group }) => {
-  return (
-    <GroupItemDiv>
-      {uuidToHash(group.id)}
-    </GroupItemDiv>
-  )
-}
-
-const GroupList = ({ groups }) => (
-  <div>
-    <h2>Groups</h2>
-    {
-      groups.map((g, idx) => <GroupItem key={`${g}-${idx}`} group={g} />)
-    }
-  </div>
-)
-
-const AddGroupFormDiv = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "row",
-}))
-
-const AddGroupFrom = ({ onAddGroup }) => {
-  const [value, setValue] = useState("");
-
-  const handleChange = (e) => {
-    setValue(e.target.value)
-  }
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onAddGroup(value);
-    setValue('')
-  }
-
-  return (
-    <AddGroupFormDiv>
-      <form onSubmit={handleSubmit} style={{
-        display: "flex",
-        paddingRight: "6px",
-      }}>
-        <input type="text" value={value} name="new-group" placeholder="New group name" onChange={handleChange} style={{
-          marginRight: "1rem",
-        }} />
-        <input type="submit" value="Create group" />
-      </form >
-    </AddGroupFormDiv>
-  )
-}
-
-
-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 GroupsEditorSidebarBox = ({ groups, onAddGroup }) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <SidebarBoxContainer
-        title="Groups"
-        icon={<FilterNoneIcon style={{ color: grey[700] }} />}
-        expandedByDefault={true}
-      >
-        <DivContainer>
-          <h2>Add new group</h2>
-          <AddGroupFrom onAddGroup={onAddGroup} />
-          <GroupList groups={groups} />
-        </DivContainer>
-      </SidebarBoxContainer>
-    </ThemeProvider>
-  )
-}
-
-export default memo(GroupsEditorSidebarBox)

package/src/HelpSidebarBox/index.js

@@ -1,43 +0,0 @@
-// @flow
-
-import React, { memo } from "react"
-import SidebarBoxContainer from "../SidebarBoxContainer"
-import HelpIcon from '@mui/icons-material/Help';
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import { grey } from "@mui/material/colors"
-import Markdown from "react-markdown"
-
-const theme = createTheme()
-const MarkdownContainer = 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 HelpSidebarBox = ({ help }) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <SidebarBoxContainer
-        title="Help"
-        icon={<HelpIcon style={{ color: grey[700] }} />}
-        expandedByDefault={help && help !== "" ? false : true}
-      >
-        <MarkdownContainer>
-          <Markdown source={help} />
-        </MarkdownContainer>
-      </SidebarBoxContainer>
-    </ThemeProvider>
-  )
-}
-
-export default memo(HelpSidebarBox)

package/src/HighlightBox/index.js

@@ -1,143 +0,0 @@
-// @flow
-
-import React from "react"
-import classnames from "classnames"
-import { makeStyles } from "@mui/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-
-const theme = createTheme()
-const useStyles = makeStyles((theme) => ({
-  "@keyframes borderDance": {
-    from: { strokeDashoffset: 0 },
-    to: { strokeDashoffset: 100 },
-  },
-  highlightBox: {
-    zIndex: 2,
-    transition: "opacity 500ms",
-    "&.highlighted": {
-      zIndex: 3,
-    },
-    "&:not(.highlighted)": {
-      opacity: 0,
-    },
-    "&:not(.highlighted):hover": {
-      opacity: 0.6,
-    },
-    "& path": {
-      // NOTE: attributes below commnted because resetting screen caused old frame to highlight
-      // vectorEffect: "non-scaling-stroke",
-      // strokeWidth: 2,
-      // stroke: "#FFF",
-      // strokeDasharray: 5,
-      fill: "none",
-      animationName: "$borderDance",
-      animationDuration: "4s",
-      animationTimingFunction: "linear",
-      animationIterationCount: "infinite",
-      animationPlayState: "running",
-    },
-  },
-}))
-
-export const HighlightBox = ({
-  mouseEvents,
-  dragWithPrimary,
-  zoomWithPrimary,
-  createWithPrimary,
-  onBeginMovePoint,
-  onSelectRegion,
-  region: r,
-  pbox,
-}: {
-  mouseEvents: any,
-  dragWithPrimary: boolean,
-  zoomWithPrimary: boolean,
-  createWithPrimary: boolean,
-  onBeginMovePoint: Function,
-  onSelectRegion: Function,
-  region: any,
-  pbox: { x: number, y: number, w: number, h: number },
-}) => {
-  const classes = useStyles()
-  if (!pbox.w || pbox.w === Infinity) return null
-  if (!pbox.h || pbox.h === Infinity) return null
-  if (r.unfinished) return null
-
-  const styleCoords =
-    r.type === "point"
-      ? {
-        left: pbox.x + pbox.w / 2 - 30,
-        top: pbox.y + pbox.h / 2 - 30,
-        width: 60,
-        height: 60,
-      }
-      : {
-        left: pbox.x - 5,
-        top: pbox.y - 5,
-        width: pbox.w + 10,
-        height: pbox.h + 10,
-      }
-
-  const pathD =
-    r.type === "point"
-      ? `M5,5 L${styleCoords.width - 5} 5L${styleCoords.width - 5} ${styleCoords.height - 5
-      }L5 ${styleCoords.height - 5}Z`
-      : `M5,5 L${pbox.w + 5},5 L${pbox.w + 5},${pbox.h + 5} L5,${pbox.h + 5} Z`
-
-  return (
-    <ThemeProvider theme={theme}>
-      <svg
-        key={r.id}
-        className={classnames(classes.highlightBox, {
-          highlighted: r.highlighted,
-        })}
-        {...mouseEvents}
-        {...(!zoomWithPrimary && !dragWithPrimary
-          ? {
-            onMouseDown: (e) => {
-              if (
-                !r.locked &&
-                r.type === "point" &&
-                r.highlighted &&
-                e.button === 0
-              ) {
-                return onBeginMovePoint(r)
-              }
-              if (e.button === 0 && !createWithPrimary)
-                return onSelectRegion({ ...r, ctrlKey: e.ctrlKey })
-              mouseEvents.onMouseDown(e)
-            },
-          }
-          : {})}
-        style={{
-          ...(r.highlighted
-            ? {
-              pointerEvents: r.type !== "point" ? "none" : undefined,
-              cursor: "grab",
-            }
-            : {
-              cursor: !(
-                zoomWithPrimary ||
-                dragWithPrimary ||
-                createWithPrimary
-              )
-                ? "pointer"
-                : undefined,
-              pointerEvents:
-                zoomWithPrimary ||
-                  dragWithPrimary ||
-                  (createWithPrimary && !r.highlighted)
-                  ? "none"
-                  : undefined,
-            }),
-          position: "absolute",
-          ...styleCoords,
-        }}
-      >
-        <path d={pathD} />
-      </svg>
-    </ThemeProvider>
-  )
-}
-
-export default HighlightBox

package/src/HistorySidebarBox/index.js

@@ -1,78 +0,0 @@
-// @flow
-
-import React, { setState, memo } from "react"
-import { makeStyles } from "@mui/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import SidebarBoxContainer from "../SidebarBoxContainer"
-import HistoryIcon from "@mui/icons-material/History"
-import List from "@mui/material/List"
-import ListItem from "@mui/material/ListItem"
-import ListItemText from "@mui/material/ListItemText"
-import IconButton from "@mui/material/IconButton"
-import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction"
-import UndoIcon from "@mui/icons-material/Undo"
-import moment from "moment"
-import { grey } from "@mui/material/colors"
-import isEqual from "lodash/isEqual"
-import Box from "@mui/material/Box"
-
-const theme = createTheme()
-const useStyles = makeStyles((theme) => ({
-  emptyText: {
-    fontSize: 14,
-    fontWeight: "bold",
-    color: grey[500],
-    textAlign: "center",
-    padding: 20,
-  },
-}))
-
-const listItemTextStyle = { paddingLeft: 16 }
-
-export const HistorySidebarBox = ({
-  history,
-  onRestoreHistory,
-}: {
-  history: Array<{ name: string, time: Date }>,
-}) => {
-  const classes = useStyles()
-
-  return (
-    <ThemeProvider theme={theme}>
-      <SidebarBoxContainer
-        title="History"
-        icon={<HistoryIcon style={{ color: grey[700] }} />}
-        expandedByDefault
-      >
-        <List>
-          {history.length === 0 && (
-            <div className={classes.emptyText}>No History Yet</div>
-          )}
-          {history.map(({ name, time }, i) => (
-            <ListItem button dense key={i}>
-              <ListItemText
-                style={listItemTextStyle}
-                primary={name}
-                secondary={moment(time).format("LT")}
-              />
-              {i === 0 && (
-                <ListItemSecondaryAction onClick={() => onRestoreHistory()}>
-                  <IconButton>
-                    <UndoIcon />
-                  </IconButton>
-                </ListItemSecondaryAction>
-              )}
-            </ListItem>
-          ))}
-        </List>
-      </SidebarBoxContainer>
-    </ThemeProvider>
-  )
-}
-
-export default memo(HistorySidebarBox, (prevProps, nextProps) =>
-  isEqual(
-    prevProps.history.map((a) => [a.name, a.time]),
-    nextProps.history.map((a) => [a.name, a.time])
-  )
-)