@searpent/react-image-annotate 2.0.1 → 2.0.2

package/src/RegionShapes/index.js

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

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

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

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

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

@@ -1,129 +0,0 @@
-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>
-  )
-}