@searpent/react-image-annotate 2.0.2 → 2.0.5

package/src/PointDistances/index.js

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

package/src/PreventScrollToParents/index.js

@@ -0,0 +1,48 @@
+// @flow
+
+import React, { useState } from "react"
+import { RemoveScroll } from "react-remove-scroll"
+import { styled } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import useEventCallback from "use-event-callback"
+
+const theme = createTheme()
+const Container = styled("div")(({ theme }) => ({
+  "& > div": {
+    width: "100%",
+    height: "100%",
+  },
+}))
+
+export const PreventScrollToParents = ({ children, ...otherProps }) => {
+  const [mouseOver, changeMouseOver] = useState(false)
+  const onMouseMove = useEventCallback((e) => {
+    if (!mouseOver) changeMouseOver(true)
+    if (otherProps.onMouseMove) {
+      otherProps.onMouseMove(e)
+    }
+  })
+  const onMouseLeave = useEventCallback((e) => {
+    setTimeout(() => {
+      if (mouseOver) {
+        changeMouseOver(false)
+      }
+    }, 100)
+  })
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Container
+        {...otherProps}
+        onMouseMove={onMouseMove}
+        onMouseLeave={onMouseLeave}
+      >
+        <RemoveScroll enabled={mouseOver} removeScrollBar={false}>
+          {children}
+        </RemoveScroll>
+      </Container>
+    </ThemeProvider>
+  )
+}
+
+export default PreventScrollToParents

package/src/PreventScrollToParents/index.story.js

@@ -0,0 +1,23 @@
+// @flow
+
+import React from "react"
+
+import { storiesOf } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+
+import RemoveScrollOnChildren from "./"
+
+storiesOf("RemoveScrollOnChildren", module).add("Basic", () => (
+  <div style={{ width: "100vh", textAlign: "center", height: "200vh" }}>
+    <RemoveScrollOnChildren>
+      <div
+        style={{
+          display: "inline-block",
+          width: 100,
+          height: 100,
+          backgroundColor: "red",
+        }}
+      />
+    </RemoveScrollOnChildren>
+  </div>
+))

package/src/RegionLabel/index.js

@@ -0,0 +1,222 @@
+// @flow
+
+import React, { useRef, memo } from "react"
+import Paper from "@mui/material/Paper"
+import { makeStyles } from "@mui/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import styles from "./styles"
+import classnames from "classnames"
+import type { Region } from "../ImageCanvas/region-tools.js"
+import IconButton from "@mui/material/IconButton"
+import Button from "@mui/material/Button"
+import TrashIcon from "@mui/icons-material/Delete"
+import CheckIcon from "@mui/icons-material/Check"
+import TextField from "@mui/material/TextField"
+import Select from "react-select"
+import CreatableSelect from "react-select/creatable"
+
+import { asMutable } from "seamless-immutable"
+
+const theme = createTheme()
+const useStyles = makeStyles((theme) => styles)
+
+type Props = {
+  region: Region,
+  editing?: boolean,
+  allowedClasses?: Array<string>,
+  allowedTags?: Array<string>,
+  allowedGroups?: Array<{ value: String, label: String }>,
+  cls?: string,
+  tags?: Array<string>,
+  onDelete: (Region) => null,
+  onChange: (Region) => null,
+  onClose: (Region) => null,
+  onOpen: (Region) => null,
+  onRegionClassAdded: () => {},
+  allowComments?: boolean,
+  hideNotEditingLabel?: boolean,
+}
+
+export const RegionLabel = ({
+  region,
+  editing,
+  allowedClasses,
+  allowedTags,
+  onDelete,
+  onChange,
+  onClose,
+  onOpen,
+  onRegionClassAdded,
+  allowComments,
+  hideNotEditingLabel,
+  allowedGroups,
+}: Props) => {
+  const classes = useStyles()
+  const commentInputRef = useRef(null)
+  const onCommentInputClick = (_) => {
+    // The TextField wraps the <input> tag with two divs
+    const commentInput = commentInputRef.current.children[0].children[0]
+
+    if (commentInput) return commentInput.focus()
+  }
+
+  if (hideNotEditingLabel && !editing) return null
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Paper
+        onClick={() => (!editing ? onOpen(region) : null)}
+        className={classnames(classes.regionInfo, {
+          highlighted: region.highlighted,
+        })}
+      >
+        {!editing ? (
+          <div>
+            {region.cls && (
+              <div className="name">
+                <div
+                  className="circle"
+                  style={{ backgroundColor: region.color }}
+                />
+                {region.cls}
+              </div>
+            )}
+            {region.tags && (
+              <div className="tags">
+                {region.tags.map((t) => (
+                  <div key={t} className="tag">
+                    {t}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div style={{ width: 200 }}>
+            <div style={{ display: "flex", flexDirection: "row" }}>
+              <div
+                style={{
+                  display: "flex",
+                  backgroundColor: region.color || "#888",
+                  color: "#fff",
+                  padding: 4,
+                  paddingLeft: 8,
+                  paddingRight: 8,
+                  borderRadius: 4,
+                  fontWeight: "bold",
+                  textShadow: "0px 0px 5px rgba(0,0,0,0.4)",
+                }}
+              >
+                {region.type}
+              </div>
+              <div style={{ flexGrow: 1 }} />
+              <IconButton
+                onClick={() => onDelete(region)}
+                tabIndex={-1}
+                style={{ width: 22, height: 22 }}
+                size="small"
+                variant="outlined"
+              >
+                <TrashIcon style={{ marginTop: -8, width: 16, height: 16 }} />
+              </IconButton>
+            </div>
+            {(allowedClasses || []).length > 0 && (
+              <div style={{ marginTop: 6 }}>
+                <CreatableSelect
+                  placeholder="Classification"
+                  onChange={(o, actionMeta) => {
+                    if (actionMeta.action == "create-option") {
+                      onRegionClassAdded(o.value)
+                    }
+                    return onChange({
+                      ...(region: any),
+                      cls: o.value,
+                    })
+                  }}
+                  value={
+                    region.cls ? { label: region.cls, value: region.cls } : null
+                  }
+                  options={asMutable(
+                    allowedClasses.map((c) => ({ value: c, label: c }))
+                  )}
+                />
+              </div>
+            )}
+            {(allowedGroups || []).length > 0 && (
+              <Select
+                onChange={(newGroup) => onChange({
+                  ...(region: any),
+                  groupId: newGroup.value,
+                })
+
+                }
+                placeholder="Group"
+                value={
+                  allowedGroups.filter(g => g.value === region.groupId)
+                }
+                options={allowedGroups}
+              />
+            )}
+            {(allowedTags || []).length > 0 && (
+              <div style={{ marginTop: 4 }}>
+                <Select
+                  onChange={(newTags) =>
+                    onChange({
+                      ...(region: any),
+                      tags: newTags.map((t) => t.value),
+                    })
+                  }
+                  placeholder="Tags"
+                  value={(region.tags || []).map((c) => ({
+                    label: c,
+                    value: c,
+                  }))}
+                  isMulti
+                  options={asMutable(
+                    allowedTags.map((c) => ({ value: c, label: c }))
+                  )}
+                />
+              </div>
+            )}
+            {allowComments && (
+              <TextField
+                InputProps={{
+                  className: classes.commentBox,
+                }}
+                fullWidth
+                multiline
+                rows={3}
+                ref={commentInputRef}
+                onClick={onCommentInputClick}
+                value={region.comment || ""}
+                onChange={(event) =>
+                  onChange({ ...(region: any), comment: event.target.value })
+                }
+              />
+            )}
+            {onClose && (
+              <div style={{ marginTop: 4, display: "flex" }}>
+                <div style={{ flexGrow: 1 }} />
+                <Button
+                  onClick={() => onClose(region)}
+                  size="small"
+                  variant="contained"
+                  color="primary"
+                >
+                  <CheckIcon />
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </Paper>
+    </ThemeProvider>
+  )
+}
+
+export default memo(
+  RegionLabel,
+  (prevProps, nextProps) =>
+    prevProps.editing === nextProps.editing &&
+    prevProps.region === nextProps.region
+)

package/{RegionLabel → src/RegionLabel}/styles.js

@@ -1,4 +1,7 @@
-import { grey } from "@mui/material/colors";
+// @flow
+
+import { grey } from "@mui/material/colors"
+
 export default {
   regionInfo: {
     fontSize: 12,
@@ -7,13 +10,13 @@ export default {
     opacity: 0.5,
     "&:hover": {
       opacity: 0.9,
-      cursor: "pointer"
+      cursor: "pointer",
     },
     "&.highlighted": {
       opacity: 0.9,
       "&:hover": {
-        opacity: 1
-      }
+        opacity: 1,
+      },
     },
     // pointerEvents: "none",
     fontWeight: 600,
@@ -28,8 +31,8 @@ export default {
         boxShadow: "0px 0px 2px rgba(0,0,0,0.4)",
         width: 10,
         height: 10,
-        borderRadius: 5
-      }
+        borderRadius: 5,
+      },
     },
     "& .tags": {
       "& .tag": {
@@ -37,12 +40,12 @@ export default {
         display: "inline-block",
         margin: 1,
         fontSize: 10,
-        textDecoration: "underline"
-      }
-    }
+        textDecoration: "underline",
+      },
+    },
   },
   commentBox: {
     fontWeight: 400,
-    fontSize: 13
-  }
-};
+    fontSize: 13,
+  },
+}

package/src/RegionSelectAndTransformBoxes/index.js

@@ -0,0 +1,234 @@
+import React, { Fragment, memo } from "react"
+import HighlightBox from "../HighlightBox"
+import { styled } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import PreventScrollToParents from "../PreventScrollToParents"
+import Tooltip from "@mui/material/Tooltip"
+
+const theme = createTheme()
+const TransformGrabber = styled("div")(({ theme }) => ({
+  width: 8,
+  height: 8,
+  zIndex: 2,
+  border: "2px solid #FFF",
+  position: "absolute",
+}))
+
+const boxCursorMap = [
+  ["nw-resize", "n-resize", "ne-resize"],
+  ["w-resize", "grab", "e-resize"],
+  ["sw-resize", "s-resize", "se-resize"],
+]
+
+const arePropsEqual = (prev, next) => {
+  return (
+    prev.region === next.region &&
+    prev.dragWithPrimary === next.dragWithPrimary &&
+    prev.createWithPrimary === next.createWithPrimary &&
+    prev.zoomWithPrimary === next.zoomWithPrimary &&
+    prev.mat === next.mat
+  )
+}
+
+export const RegionSelectAndTransformBox = memo(
+  ({
+    region: r,
+    mouseEvents,
+    projectRegionBox,
+    dragWithPrimary,
+    createWithPrimary,
+    zoomWithPrimary,
+    onBeginMovePoint,
+    onSelectRegion,
+    layoutParams,
+    fullImageSegmentationMode = false,
+    mat,
+    onBeginBoxTransform,
+    onBeginMovePolygonPoint,
+    onBeginMoveKeypoint,
+    onAddPolygonPoint,
+    showHighlightBox,
+  }) => {
+    const pbox = projectRegionBox(r)
+    const { iw, ih } = layoutParams.current
+    return (
+      <ThemeProvider theme={theme}>
+        <Fragment>
+          <PreventScrollToParents>
+            {showHighlightBox && r.type !== "polygon" && (
+              <HighlightBox
+                region={r}
+                mouseEvents={mouseEvents}
+                dragWithPrimary={dragWithPrimary}
+                createWithPrimary={createWithPrimary}
+                zoomWithPrimary={zoomWithPrimary}
+                onBeginMovePoint={onBeginMovePoint}
+                onSelectRegion={onSelectRegion}
+                pbox={pbox}
+              />
+            )}
+            {r.type === "box" &&
+              !dragWithPrimary &&
+              !zoomWithPrimary &&
+              !r.locked &&
+              r.highlighted &&
+              mat.a < 1.2 &&
+              [
+                [0, 0],
+                [0.5, 0],
+                [1, 0],
+                [1, 0.5],
+                [1, 1],
+                [0.5, 1],
+                [0, 1],
+                [0, 0.5],
+                [0.5, 0.5],
+              ].map(([px, py], i) => (
+                <TransformGrabber
+                  key={i}
+                  {...mouseEvents}
+                  onMouseDown={(e) => {
+                    if (e.button === 0)
+                      return onBeginBoxTransform(r, [px * 2 - 1, py * 2 - 1])
+                    mouseEvents.onMouseDown(e)
+                  }}
+                  style={{
+                    left: pbox.x - 4 - 2 + pbox.w * px,
+                    top: pbox.y - 4 - 2 + pbox.h * py,
+                    cursor: boxCursorMap[py * 2][px * 2],
+                    borderRadius: px === 0.5 && py === 0.5 ? 4 : undefined,
+                  }}
+                />
+              ))}
+            {r.type === "polygon" &&
+              !dragWithPrimary &&
+              !zoomWithPrimary &&
+              !r.locked &&
+              r.highlighted &&
+              r.points.map(([px, py], i) => {
+                const proj = mat
+                  .clone()
+                  .inverse()
+                  .applyToPoint(px * iw, py * ih)
+                return (
+                  <TransformGrabber
+                    key={i}
+                    {...mouseEvents}
+                    onMouseDown={(e) => {
+                      if (e.button === 0 && (!r.open || i === 0))
+                        return onBeginMovePolygonPoint(r, i)
+                      mouseEvents.onMouseDown(e)
+                    }}
+                    style={{
+                      cursor: !r.open
+                        ? "move"
+                        : i === 0
+                        ? "pointer"
+                        : undefined,
+                      zIndex: 10,
+                      pointerEvents:
+                        r.open && i === r.points.length - 1
+                          ? "none"
+                          : undefined,
+                      left: proj.x - 4,
+                      top: proj.y - 4,
+                    }}
+                  />
+                )
+              })}
+            {r.type === "polygon" &&
+              r.highlighted &&
+              !dragWithPrimary &&
+              !zoomWithPrimary &&
+              !r.locked &&
+              !r.open &&
+              r.points.length > 1 &&
+              r.points
+                .map((p1, i) => [p1, r.points[(i + 1) % r.points.length]])
+                .map(([p1, p2]) => [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2])
+                .map((pa, i) => {
+                  const proj = mat
+                    .clone()
+                    .inverse()
+                    .applyToPoint(pa[0] * iw, pa[1] * ih)
+                  return (
+                    <TransformGrabber
+                      key={i}
+                      {...mouseEvents}
+                      onMouseDown={(e) => {
+                        if (e.button === 0)
+                          return onAddPolygonPoint(r, pa, i + 1)
+                        mouseEvents.onMouseDown(e)
+                      }}
+                      style={{
+                        cursor: "copy",
+                        zIndex: 10,
+                        left: proj.x - 4,
+                        top: proj.y - 4,
+                        border: "2px dotted #fff",
+                        opacity: 0.5,
+                      }}
+                    />
+                  )
+                })}
+            {r.type === "keypoints" &&
+              !dragWithPrimary &&
+              !zoomWithPrimary &&
+              !r.locked &&
+              r.highlighted &&
+              Object.entries(r.points).map(
+                ([keypointId, { x: px, y: py }], i) => {
+                  const proj = mat
+                    .clone()
+                    .inverse()
+                    .applyToPoint(px * iw, py * ih)
+                  return (
+                    <Tooltip title={keypointId} key={i}>
+                      <TransformGrabber
+                        key={i}
+                        {...mouseEvents}
+                        onMouseDown={(e) => {
+                          if (e.button === 0 && (!r.open || i === 0))
+                            return onBeginMoveKeypoint(r, keypointId)
+                          mouseEvents.onMouseDown(e)
+                        }}
+                        style={{
+                          cursor: !r.open
+                            ? "move"
+                            : i === 0
+                            ? "pointer"
+                            : undefined,
+                          zIndex: 10,
+                          pointerEvents:
+                            r.open && i === r.points.length - 1
+                              ? "none"
+                              : undefined,
+                          left: proj.x - 4,
+                          top: proj.y - 4,
+                        }}
+                      />
+                    </Tooltip>
+                  )
+                }
+              )}
+          </PreventScrollToParents>
+        </Fragment>
+      </ThemeProvider>
+    )
+  },
+  arePropsEqual
+)
+
+export const RegionSelectAndTransformBoxes = memo(
+  (props) => {
+    return props.regions
+      .filter((r) => r.visible || r.visible === undefined)
+      .filter((r) => !r.locked)
+      .map((r, i) => {
+        return <RegionSelectAndTransformBox key={r.id} {...props} region={r} />
+      })
+  },
+  (n, p) => n.regions === p.regions && n.mat === p.mat
+)
+
+export default RegionSelectAndTransformBoxes