@searpent/react-image-annotate 2.0.0 → 2.0.3

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/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": {
-      vectorEffect: "non-scaling-stroke",
-      strokeWidth: 2,
-      stroke: "#FFF",
-      fill: "none",
-      strokeDasharray: 5,
-      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)
-                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])
-  )
-)