@searpent/react-image-annotate 2.0.0

package/src/FullImageSegmentationAnnotator/index.story.js

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

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

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