@searpent/react-image-annotate 2.0.77 → 2.0.78

package/src/RegionSelectAndTransformBoxes/index.js

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

@@ -1,220 +0,0 @@
-// @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/src/RegionShapes/index.js

@@ -1,254 +0,0 @@
-// @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(clsColor(region.cls), 0.15) : colorAlpha(groupColor(region.groupId), 0.5)}
-        />
-      </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.85)}
-        />
-      </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.id}
-            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