@searpent/react-image-annotate 2.0.2 → 2.0.5

package/src/RegionSelectorSidebarBox/index.js

@@ -0,0 +1,216 @@
+// @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"
+
+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,
+}) => {
+  return (
+    <RowLayout
+      header={false}
+      highlighted={highlighted}
+      onClick={() => onSelectRegion(r)}
+      order={`#${index + 1}`}
+      classification={<Chip text={cls || ""} color={color || "#ddd"} />}
+      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": {},
+  },
+}

package/src/RegionShapes/index.js

@@ -0,0 +1,254 @@
+// @flow
+
+import React, { memo } from "react"
+import colorAlpha from "color-alpha"
+import useColors from '../hooks/use-colors';
+
+
+function clamp(num, min, max) {
+  return num <= min ? min : num >= max ? max : num
+}
+
+const RegionComponents = {
+  point: memo(({ region, iw, ih }) => (
+    <g transform={`translate(${region.x * iw} ${region.y * ih})`}>
+      <path
+        d={"M0 8L8 0L0 -8L-8 0Z"}
+        strokeWidth={2}
+        stroke={region.color}
+        fill="transparent"
+      />
+    </g>
+  )),
+  line: memo(({ region, iw, ih }) => (
+    <g transform={`translate(${region.x1 * iw} ${region.y1 * ih})`}>
+      <line
+        strokeWidth={2}
+        x1={0}
+        y1={0}
+        x2={(region.x2 - region.x1) * iw}
+        y2={(region.y2 - region.y1) * ih}
+        stroke={colorAlpha(region.color, 0.75)}
+        fill={colorAlpha(region.color, 0.25)}
+      />
+    </g>
+  )),
+  box: memo(({ region, iw, ih }) => {
+    const { clsColor, groupColor } = useColors();
+
+    if (region.groupId !== undefined) {
+      return <g transform={`translate(${region.x * iw} ${region.y * ih})`}>
+        <rect
+          strokeWidth={(region.groupHighlighted) ? 3 : 0}
+          x={0}
+          y={0}
+          width={Math.max(region.w * iw, 0)}
+          height={Math.max(region.h * ih, 0)}
+          stroke={colorAlpha(clsColor(region.cls), 0.85)}
+          fill={(region.groupHighlighted) ? colorAlpha(groupColor(region.groupId), 0.5) : colorAlpha(groupColor(region.groupId), 0.25)}
+        />
+      </g>
+    } else {
+      return <g transform={`translate(${region.x * iw} ${region.y * ih})`}>
+        <rect
+          strokeWidth={2}
+          x={0}
+          y={0}
+          width={Math.max(region.w * iw, 0)}
+          height={Math.max(region.h * ih, 0)}
+          stroke={colorAlpha(clsColor(region.cls), 0.85)}
+          fill={colorAlpha(clsColor(region.cls), 0.25)}
+        />
+      </g>
+    }
+  }
+  ),
+  polygon: memo(({ region, iw, ih, fullSegmentationMode }) => {
+    const Component = region.open ? "polyline" : "polygon"
+    const alphaBase = fullSegmentationMode ? 0.5 : 1
+    return (
+      <Component
+        points={region.points
+          .map(([x, y]) => [x * iw, y * ih])
+          .map((a) => a.join(" "))
+          .join(" ")}
+        strokeWidth={2}
+        stroke={colorAlpha(region.color, 0.75)}
+        fill={colorAlpha(region.color, 0.25)}
+      />
+    )
+  }),
+  keypoints: ({ region, iw, ih, keypointDefinitions }) => {
+    const { points, keypointsDefinitionId } = region
+    if (!keypointDefinitions[keypointsDefinitionId]) {
+      throw new Error(
+        `No definition for keypoint configuration "${keypointsDefinitionId}"`
+      )
+    }
+    const { landmarks, connections } =
+      keypointDefinitions[keypointsDefinitionId]
+    return (
+      <g>
+        {Object.entries(points).map(([keypointId, { x, y }], i) => (
+          <g key={i} transform={`translate(${x * iw} ${y * ih})`}>
+            <path
+              d={"M0 8L8 0L0 -8L-8 0Z"}
+              strokeWidth={2}
+              stroke={landmarks[keypointId].color}
+              fill="transparent"
+            />
+          </g>
+        ))}
+        {connections.map(([kp1Id, kp2Id]) => {
+          const kp1 = points[kp1Id]
+          const kp2 = points[kp2Id]
+          const midPoint = { x: (kp1.x + kp2.x) / 2, y: (kp1.y + kp2.y) / 2 }
+
+          return (
+            <g key={`${kp1.x},${kp1.y}.${kp2.x},${kp2.y}`}>
+              <line
+                x1={kp1.x * iw}
+                y1={kp1.y * ih}
+                x2={midPoint.x * iw}
+                y2={midPoint.y * ih}
+                strokeWidth={2}
+                stroke={landmarks[kp1Id].color}
+              />
+              <line
+                x1={kp2.x * iw}
+                y1={kp2.y * ih}
+                x2={midPoint.x * iw}
+                y2={midPoint.y * ih}
+                strokeWidth={2}
+                stroke={landmarks[kp2Id].color}
+              />
+            </g>
+          )
+        })}
+      </g>
+    )
+  },
+  "expanding-line": memo(({ region, iw, ih }) => {
+    let { expandingWidth = 0.005, points } = region
+    expandingWidth = points.slice(-1)[0].width || expandingWidth
+    const pointPairs = points.map(({ x, y, angle, width }, i) => {
+      if (!angle) {
+        const n = points[clamp(i + 1, 0, points.length - 1)]
+        const p = points[clamp(i - 1, 0, points.length - 1)]
+        angle = Math.atan2(p.x - n.x, p.y - n.y) + Math.PI / 2
+      }
+      const dx = (Math.sin(angle) * (width || expandingWidth)) / 2
+      const dy = (Math.cos(angle) * (width || expandingWidth)) / 2
+      return [
+        { x: x + dx, y: y + dy },
+        { x: x - dx, y: y - dy },
+      ]
+    })
+    const firstSection = pointPairs.map(([p1, p2]) => p1)
+    const secondSection = pointPairs.map(([p1, p2]) => p2).asMutable()
+    secondSection.reverse()
+    const lastPoint = points.slice(-1)[0]
+    return (
+      <>
+        <polygon
+          points={firstSection
+            .concat(region.candidatePoint ? [region.candidatePoint] : [])
+            .concat(secondSection)
+            .map((p) => `${p.x * iw} ${p.y * ih}`)
+            .join(" ")}
+          strokeWidth={2}
+          stroke={colorAlpha(region.color, 0.75)}
+          fill={colorAlpha(region.color, 0.25)}
+        />
+        {points.map(({ x, y, angle }, i) => (
+          <g
+            key={i}
+            transform={`translate(${x * iw} ${y * ih}) rotate(${(-(angle || 0) * 180) / Math.PI
+              })`}
+          >
+            <g>
+              <rect
+                x={-5}
+                y={-5}
+                width={10}
+                height={10}
+                strokeWidth={2}
+                stroke={colorAlpha(region.color, 0.75)}
+                fill={colorAlpha(region.color, 0.25)}
+              />
+            </g>
+          </g>
+        ))}
+        <rect
+          x={lastPoint.x * iw - 8}
+          y={lastPoint.y * ih - 8}
+          width={16}
+          height={16}
+          strokeWidth={4}
+          stroke={colorAlpha(region.color, 0.5)}
+          fill={"transparent"}
+        />
+      </>
+    )
+  }),
+  pixel: () => null,
+}
+
+export const WrappedRegionList = memo(
+  ({ regions, keypointDefinitions, iw, ih, fullSegmentationMode }) => {
+    return regions
+      .filter((r) => r.visible !== false)
+      .map((r) => {
+        const Component = RegionComponents[r.type]
+        return (
+          <Component
+            key={r.regionId}
+            region={r}
+            iw={iw}
+            ih={ih}
+            keypointDefinitions={keypointDefinitions}
+            fullSegmentationMode={fullSegmentationMode}
+          />
+        )
+      })
+  },
+  (n, p) => n.regions === p.regions && n.iw === p.iw && n.ih === p.ih
+)
+
+export const RegionShapes = ({
+  mat,
+  imagePosition,
+  regions = [],
+  keypointDefinitions,
+  fullSegmentationMode,
+}) => {
+  const iw = imagePosition.bottomRight.x - imagePosition.topLeft.x
+  const ih = imagePosition.bottomRight.y - imagePosition.topLeft.y
+  if (isNaN(iw) || isNaN(ih)) return null
+  return (
+    <svg
+      width={iw}
+      height={ih}
+      style={{
+        position: "absolute",
+        zIndex: 2,
+        left: imagePosition.topLeft.x,
+        top: imagePosition.topLeft.y,
+        pointerEvents: "none",
+        width: iw,
+        height: ih,
+      }}
+    >
+      <WrappedRegionList
+        key="wrapped-region-list"
+        regions={regions}
+        iw={iw}
+        ih={ih}
+        keypointDefinitions={keypointDefinitions}
+        fullSegmentationMode={fullSegmentationMode}
+      />
+    </svg>
+  )
+}
+
+export default RegionShapes

package/src/RegionTags/index.js

@@ -0,0 +1,134 @@
+// @flow weak
+
+import React from "react"
+import Paper from "@mui/material/Paper"
+import DefaultRegionLabel from "../RegionLabel"
+import LockIcon from "@mui/icons-material/Lock"
+
+const copyWithout = (obj, ...args) => {
+  const newObj = { ...obj }
+  for (const arg of args) {
+    delete newObj[arg]
+  }
+  return newObj
+}
+
+export const RegionTags = ({
+  regions,
+  projectRegionBox,
+  mouseEvents,
+  regionClsList,
+  regionTagList,
+  onBeginRegionEdit,
+  onChangeRegion,
+  onCloseRegionEdit,
+  onDeleteRegion,
+  layoutParams,
+  imageSrc,
+  RegionEditLabel,
+  onRegionClassAdded,
+  allowComments,
+  hideNotEditingLabel,
+  allowedGroups
+}) => {
+  const RegionLabel =
+    RegionEditLabel != null ? RegionEditLabel : DefaultRegionLabel
+  return regions
+    .filter((r) => r.visible || r.visible === undefined)
+    .map((region) => {
+      const pbox = projectRegionBox(region)
+      const { iw, ih } = layoutParams.current
+      let margin = 8
+      if (region.highlighted && region.type === "box") margin += 6
+      const labelBoxHeight =
+        region.editingLabels && !region.locked ? 170 : region.tags ? 60 : 50
+      const displayOnTop = pbox.y > labelBoxHeight
+
+      const coords = displayOnTop
+        ? {
+          left: pbox.x,
+          top: pbox.y - margin / 2,
+        }
+        : { left: pbox.x, top: pbox.y + pbox.h + margin / 2 }
+      if (region.locked) {
+        return (
+          <div
+            key={region.id}
+            style={{
+              position: "absolute",
+              ...coords,
+              zIndex: 10 + (region.editingLabels ? 5 : 0),
+            }}
+          >
+            <Paper
+              style={{
+                position: "absolute",
+                left: 0,
+                ...(displayOnTop ? { bottom: 0 } : { top: 0 }),
+                zIndex: 10,
+                backgroundColor: "#fff",
+                borderRadius: 4,
+                padding: 2,
+                paddingBottom: 0,
+                opacity: 0.5,
+                pointerEvents: "none",
+              }}
+            >
+              <LockIcon style={{ width: 16, height: 16, color: "#333" }} />
+            </Paper>
+          </div>
+        )
+      }
+      return (
+        <div
+          key={region.id}
+          style={{
+            position: "absolute",
+            ...coords,
+            zIndex: 10 + (region.editingLabels ? 5 : 0),
+            width: 200,
+          }}
+          onMouseDown={(e) => e.preventDefault()}
+          onMouseUp={(e) => e.preventDefault()}
+          onMouseEnter={(e) => {
+            if (region.editingLabels) {
+              mouseEvents.onMouseUp(e)
+              e.button = 1
+              mouseEvents.onMouseUp(e)
+            }
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              zIndex: 20,
+              left: 0,
+              ...(displayOnTop ? { bottom: 0 } : { top: 0 }),
+            }}
+            {...(!region.editingLabels
+              ? copyWithout(mouseEvents, "onMouseDown", "onMouseUp")
+              : {})}
+          >
+            <RegionLabel
+              allowedClasses={regionClsList}
+              allowedTags={regionTagList}
+              onOpen={onBeginRegionEdit}
+              onChange={onChangeRegion}
+              onClose={onCloseRegionEdit}
+              onDelete={onDeleteRegion}
+              editing={region.editingLabels}
+              region={region}
+              regions={regions}
+              imageSrc={imageSrc}
+              onRegionClassAdded={onRegionClassAdded}
+              allowComments={allowComments}
+              hideNotEditingLabel={hideNotEditingLabel}
+              allowedGroups={allowedGroups}
+            />
+          </div>
+        </div>
+      )
+    })
+}
+
+export default RegionTags