@searpent/react-image-annotate 2.0.0

package/src/RegionSelectorSidebarBox/styles.js

@@ -0,0 +1,54 @@
+import { grey, blue, orange, purple } from "@mui/material/colors"
+
+export default {
+  container: {
+    fontSize: 11,
+    fontWeight: "bold",
+    color: grey[700],
+    "& .icon": {
+      marginTop: 4,
+      width: 16,
+      height: 16,
+    },
+    "& .icon2": {
+      opacity: 0.5,
+      width: 16,
+      height: 16,
+      transition: "200ms opacity",
+      "&:hover": {
+        cursor: "pointer",
+        opacity: 1,
+      },
+    },
+  },
+  row: {
+    padding: 4,
+    cursor: "pointer",
+    "&.header:hover": {
+      backgroundColor: "#fff",
+    },
+    "&.highlighted": {
+      backgroundColor: blue[100],
+    },
+    "&:hover": {
+      backgroundColor: blue[50],
+      color: grey[800],
+    },
+  },
+  chip: {
+    display: "flex",
+    flexDirection: "row",
+    padding: 2,
+    borderRadius: 2,
+    paddingLeft: 4,
+    paddingRight: 4,
+    alignItems: "center",
+    "& .color": {
+      borderRadius: 5,
+      width: 10,
+      height: 10,
+      marginRight: 4,
+    },
+    "& .text": {},
+  },
+}

package/src/RegionShapes/index.js

@@ -0,0 +1,236 @@
+// @flow
+
+import React, { memo } from "react"
+import colorAlpha from "color-alpha"
+
+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 }) => (
+    <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(region.color, 0.75)}
+        fill={colorAlpha(region.color, 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,130 @@
+// @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,
+}) => {
+  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}
+            />
+          </div>
+        </div>
+      )
+    })
+}
+
+export default RegionTags

package/src/SettingsDialog/index.js

@@ -0,0 +1,58 @@
+// @flow
+
+import React from "react"
+import Dialog from "@mui/material/Dialog"
+import DialogTitle from "@mui/material/DialogTitle"
+import DialogContent from "@mui/material/DialogContent"
+import DialogActions from "@mui/material/DialogActions"
+import Button from "@mui/material/Button"
+import Survey from "material-survey/components/Survey"
+import { useSettings } from "../SettingsProvider"
+
+export const SettingsDialog = ({ open, onClose }) => {
+  const settings = useSettings()
+  return (
+    <Dialog open={open || false} onClose={onClose}>
+      <DialogTitle>Settings</DialogTitle>
+      <DialogContent style={{ minWidth: 400 }}>
+        <Survey
+          variant="flat"
+          noActions
+          defaultAnswers={settings}
+          onQuestionChange={(q, a, answers) => settings.changeSetting(q, a)}
+          form={{
+            questions: [
+              {
+                type: "boolean",
+                title: "Show Crosshairs",
+                name: "showCrosshairs",
+              },
+              {
+                type: "boolean",
+                title: "Show Highlight Box",
+                name: "showHighlightBox",
+              },
+              {
+                type: "boolean",
+                title: "WASD Mode",
+                name: "wasdMode",
+              },
+              {
+                type: "dropdown",
+                title: "Video Playback Speed",
+                name: "videoPlaybackSpeed",
+                defaultValue: "1x",
+                choices: ["0.25x", "0.5x", "1x", "2x"],
+              },
+            ],
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default SettingsDialog

package/src/SettingsProvider/index.js

@@ -0,0 +1,44 @@
+// @flow
+
+import React, { createContext, useContext, useState } from "react"
+
+const defaultSettings = {
+  showCrosshairs: false,
+  showHighlightBox: true,
+  wasdMode: true,
+}
+
+export const SettingsContext = createContext(defaultSettings)
+
+const pullSettingsFromLocalStorage = () => {
+  if (!window || !window.localStorage) return {}
+  let settings = {}
+  for (let i = 0; i < window.localStorage.length; i++) {
+    const key = window.localStorage.key(i)
+    if (key.startsWith("settings_")) {
+      try {
+        settings[key.replace("settings_", "")] = JSON.parse(
+          window.localStorage.getItem(key)
+        )
+      } catch (e) {}
+    }
+  }
+  return settings
+}
+
+export const useSettings = () => useContext(SettingsContext)
+
+export const SettingsProvider = ({ children }) => {
+  const [state, changeState] = useState(() => pullSettingsFromLocalStorage())
+  const changeSetting = (setting: string, value: any) => {
+    changeState({ ...state, [setting]: value })
+    window.localStorage.setItem(`settings_${setting}`, JSON.stringify(value))
+  }
+  return (
+    <SettingsContext.Provider value={{ ...state, changeSetting }}>
+      {children}
+    </SettingsContext.Provider>
+  )
+}
+
+export default SettingsProvider

package/src/Shortcuts/ShortcutField.js

@@ -0,0 +1,44 @@
+import React from "react"
+import TextField from "@mui/material/TextField"
+import { makeStyles } from "@mui/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+
+const theme = createTheme()
+const useStyles = makeStyles((theme) => ({
+  shortcutKeyFieldWrapper: {
+    paddingTop: 8,
+    display: "inline-flex",
+    width: "100%",
+  },
+  shortcutKeyText: {
+    lineHeight: 0,
+  },
+  shortcutTextfield: {
+    width: "100%",
+    boxSizing: "border-box",
+    textAlign: "center",
+  },
+}))
+
+const ShortcutField = ({ actionId, actionName, keyName, onChangeShortcut }) => {
+  const classes = useStyles()
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div className={classes.shortcutKeyFieldWrapper}>
+        <TextField
+          variant="outlined"
+          label={actionName}
+          className={classes.shortcutTextfield}
+          value={keyName}
+          onKeyPress={(e) => {
+            onChangeShortcut(actionId, e.key)
+            e.stopPropagation()
+          }}
+        />
+      </div>
+    </ThemeProvider>
+  )
+}
+
+export default ShortcutField

package/src/Shortcuts/index.js

@@ -0,0 +1,129 @@
+import React, { useState, useEffect } from "react"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import { setIn } from "seamless-immutable"
+import ShortcutField from "./ShortcutField"
+
+const defaultShortcuts = {
+  select: {
+    action: {
+      type: "SELECT_TOOL",
+    },
+    name: "Select Region",
+    key: "Escape",
+  },
+  zoom: {
+    action: {
+      type: "SELECT_TOOL",
+    },
+    name: "Zoom In/Out",
+    key: "z",
+  },
+  "create-point": {
+    action: {
+      type: "SELECT_TOOL",
+    },
+    name: "Create Point",
+  },
+  "create-box": {
+    action: {
+      type: "SELECT_TOOL",
+    },
+    name: "Add Bounding Box",
+    key: "b",
+  },
+  pan: {
+    action: {
+      type: "SELECT_TOOL",
+    },
+    name: "Pan",
+  },
+  "create-polygon": {
+    action: {
+      type: "SELECT_TOOL",
+    },
+    name: "Create Polygon",
+  },
+  "create-pixel": {
+    action: {
+      type: "SELECT_TOOL",
+    },
+    name: "Create Pixel",
+  },
+  "prev-image": {
+    action: {
+      type: "HEADER_BUTTON_CLICKED",
+      buttonName: "Prev",
+    },
+    name: "Previous Image",
+    key: "a",
+  },
+  "next-image": {
+    action: {
+      type: "HEADER_BUTTON_CLICKED",
+      buttonName: "Next",
+    },
+    name: "Next Image",
+    key: "d", //"ArrowRight"
+  },
+}
+
+export default ({ onShortcutActionDispatched }) => {
+  const [shortcuts, setShortcuts] = useState({}) // useLocalStorage
+
+  useEffect(() => {
+    const newShortcuts = { ...shortcuts }
+    for (const actionId of Object.keys(defaultShortcuts)) {
+      if (!newShortcuts[actionId]) {
+        newShortcuts[actionId] = defaultShortcuts[actionId]
+      }
+    }
+    setShortcuts(newShortcuts)
+  }, [])
+
+  const onChangeShortcut = (actionId, keyName) => {
+    setShortcuts(setIn(shortcuts, [actionId, "key"], keyName))
+  }
+
+  useEffect(() => {
+    const handleKeyPress = (e) => {
+      for (const actionId in shortcuts) {
+        const shortcut = shortcuts[actionId]
+        if (!shortcut || !shortcut.key) {
+          continue
+        }
+        if (e.key === shortcut.key) {
+          onShortcutActionDispatched({
+            ...shortcut.action,
+            selectedTool: actionId,
+          })
+        }
+      }
+    }
+
+    window.addEventListener("keypress", handleKeyPress)
+
+    return () => {
+      window.removeEventListener("keypress", handleKeyPress)
+      document.activeElement.blur()
+    }
+  }, [shortcuts])
+
+  return (
+    <SidebarBoxContainer title="Shortcuts">
+      {Object.keys(shortcuts)
+        .map((actionId, index) => {
+          if (!shortcuts[actionId]) return null
+          return (
+            <ShortcutField
+              key={actionId}
+              actionId={actionId}
+              actionName={shortcuts[actionId].name}
+              keyName={shortcuts[actionId].key || ""}
+              onChangeShortcut={onChangeShortcut}
+            />
+          )
+        })
+        .filter(Boolean)}
+    </SidebarBoxContainer>
+  )
+}