@searpent/react-image-annotate 2.0.75 → 2.0.77

package/src/RegionSelectAndTransformBoxes/index.js

@@ -0,0 +1,236 @@
+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: 10,
+  backgroundColor: "#454545",
+  border: "2px solid black",
+  borderRadius: "50%",
+  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

package/src/RegionSelectorSidebarBox/index.js

@@ -0,0 +1,220 @@
+// @flow
+
+import React, { Fragment, useState, memo } from "react"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import { makeStyles } from "@mui/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { styled } from "@mui/material/styles"
+import { grey } from "@mui/material/colors"
+import RegionIcon from "@mui/icons-material/PictureInPicture"
+import Grid from "@mui/material/Grid"
+import ReorderIcon from "@mui/icons-material/SwapVert"
+import PieChartIcon from "@mui/icons-material/PieChart"
+import TrashIcon from "@mui/icons-material/Delete"
+import LockIcon from "@mui/icons-material/Lock"
+import UnlockIcon from "@mui/icons-material/LockOpen"
+import VisibleIcon from "@mui/icons-material/Visibility"
+import VisibleOffIcon from "@mui/icons-material/VisibilityOff"
+import styles from "./styles"
+import classnames from "classnames"
+import isEqual from "lodash/isEqual"
+import useColors from "../hooks/use-colors"
+
+const theme = createTheme()
+const useStyles = makeStyles((theme) => styles)
+
+const HeaderSep = styled("div")(({ theme }) => ({
+  borderTop: `1px solid ${grey[200]}`,
+  marginTop: 2,
+  marginBottom: 2,
+}))
+
+const Chip = ({ color, text }) => {
+  const classes = useStyles()
+  return (
+    <span className={classes.chip}>
+      <div className="color" style={{ backgroundColor: color }} />
+      <div className="text">{text}</div>
+    </span>
+  )
+}
+
+const RowLayout = ({
+  header,
+  highlighted,
+  order,
+  classification,
+  area,
+  tags,
+  trash,
+  lock,
+  visible,
+  onClick,
+}) => {
+  const classes = useStyles()
+  const [mouseOver, changeMouseOver] = useState(false)
+  return (
+    <div
+      onClick={onClick}
+      onMouseEnter={() => changeMouseOver(true)}
+      onMouseLeave={() => changeMouseOver(false)}
+      className={classnames(classes.row, { header, highlighted })}
+    >
+      <Grid container alignItems="center">
+        <Grid item xs={2}>
+          <div style={{ textAlign: "right", paddingRight: 10 }}>{order}</div>
+        </Grid>
+        <Grid item xs={5}>
+          {classification}
+        </Grid>
+        <Grid item xs={2}>
+          <div style={{ textAlign: "right", paddingRight: 6 }}>{area}</div>
+        </Grid>
+        <Grid item xs={1}>
+          {trash}
+        </Grid>
+        <Grid item xs={1}>
+          {lock}
+        </Grid>
+        <Grid item xs={1}>
+          {visible}
+        </Grid>
+      </Grid>
+    </div>
+  )
+}
+
+const RowHeader = () => {
+  return (
+    <RowLayout
+      header
+      highlighted={false}
+      order={<ReorderIcon className="icon" />}
+      classification={<div style={{ paddingLeft: 10 }}>Class</div>}
+      area={<PieChartIcon className="icon" />}
+      trash={<TrashIcon className="icon" />}
+      lock={<LockIcon className="icon" />}
+      visible={<VisibleIcon className="icon" />}
+    />
+  )
+}
+
+const MemoRowHeader = memo(RowHeader)
+
+const Row = ({
+  region: r,
+  highlighted,
+  onSelectRegion,
+  onDeleteRegion,
+  onChangeRegion,
+  visible,
+  locked,
+  color,
+  cls,
+  index,
+}) => {
+  const { groupColor } = useColors()
+  const gc = groupColor(r.groupId)
+
+  return (
+    <RowLayout
+      header={false}
+      highlighted={highlighted}
+      onClick={() => onSelectRegion(r)}
+      order={`#${index + 1}`}
+      classification={<Chip text={cls || ""} color={color || gc || "lime"} />}
+      area=""
+      trash={<TrashIcon onClick={() => onDeleteRegion(r)} className="icon2" />}
+      lock={
+        r.locked ? (
+          <LockIcon
+            onClick={() => onChangeRegion({ ...r, locked: false })}
+            className="icon2"
+          />
+        ) : (
+          <UnlockIcon
+            onClick={() => onChangeRegion({ ...r, locked: true })}
+            className="icon2"
+          />
+        )
+      }
+      visible={
+        r.visible || r.visible === undefined ? (
+          <VisibleIcon
+            onClick={() => onChangeRegion({ ...r, visible: false })}
+            className="icon2"
+          />
+        ) : (
+          <VisibleOffIcon
+            onClick={() => onChangeRegion({ ...r, visible: true })}
+            className="icon2"
+          />
+        )
+      }
+    />
+  )
+}
+
+const MemoRow = memo(
+  Row,
+  (prevProps, nextProps) =>
+    prevProps.highlighted === nextProps.highlighted &&
+    prevProps.visible === nextProps.visible &&
+    prevProps.locked === nextProps.locked &&
+    prevProps.id === nextProps.id &&
+    prevProps.index === nextProps.index &&
+    prevProps.cls === nextProps.cls &&
+    prevProps.color === nextProps.color
+)
+
+const emptyArr = []
+
+export const RegionSelectorSidebarBox = ({
+  regions = emptyArr,
+  onDeleteRegion,
+  onChangeRegion,
+  onSelectRegion,
+}) => {
+  const classes = useStyles()
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarBoxContainer
+        title="Regions"
+        subTitle=""
+        icon={<RegionIcon style={{ color: grey[700] }} />}
+        expandedByDefault
+      >
+        <div className={classes.container}>
+          <MemoRowHeader />
+          <HeaderSep />
+          {regions.map((r, i) => (
+            <MemoRow
+              key={r.id}
+              {...r}
+              region={r}
+              index={i}
+              onSelectRegion={onSelectRegion}
+              onDeleteRegion={onDeleteRegion}
+              onChangeRegion={onChangeRegion}
+            />
+          ))}
+        </div>
+      </SidebarBoxContainer>
+    </ThemeProvider>
+  )
+}
+
+const mapUsedRegionProperties = (r) => [
+  r.id,
+  r.color,
+  r.locked,
+  r.visible,
+  r.highlighted,
+]
+
+export default memo(RegionSelectorSidebarBox, (prevProps, nextProps) =>
+  isEqual(
+    (prevProps.regions || emptyArr).map(mapUsedRegionProperties),
+    (nextProps.regions || emptyArr).map(mapUsedRegionProperties)
+  )
+)

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

@@ -1,4 +1,5 @@
-import { grey, blue, orange, purple } from "@mui/material/colors";
+import { grey, blue, orange, purple } from "@mui/material/colors"
+
 export default {
   container: {
     fontSize: 11,
@@ -7,7 +8,7 @@ export default {
     "& .icon": {
       marginTop: 4,
       width: 16,
-      height: 16
+      height: 16,
     },
     "& .icon2": {
       opacity: 0.5,
@@ -16,23 +17,23 @@ export default {
       transition: "200ms opacity",
       "&:hover": {
         cursor: "pointer",
-        opacity: 1
-      }
-    }
+        opacity: 1,
+      },
+    },
   },
   row: {
     padding: 4,
     cursor: "pointer",
     "&.header:hover": {
-      backgroundColor: "#fff"
+      backgroundColor: "#fff",
     },
     "&.highlighted": {
-      backgroundColor: blue[100]
+      backgroundColor: blue[100],
     },
     "&:hover": {
       backgroundColor: blue[50],
-      color: grey[800]
-    }
+      color: grey[800],
+    },
   },
   chip: {
     display: "flex",
@@ -46,8 +47,8 @@ export default {
       borderRadius: 5,
       width: 10,
       height: 10,
-      marginRight: 4
+      marginRight: 4,
     },
-    "& .text": {}
-  }
-};
+    "& .text": {},
+  },
+}