@searpent/react-image-annotate 2.0.4 → 2.0.7

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>
-  )
-}

package/src/ShortcutsManager/index.js

@@ -1,162 +0,0 @@
-import React, { useMemo } from "react"
-import { HotKeys } from "react-hotkeys"
-
-export const defaultHotkeys = [
-  {
-    id: "select_tool",
-    description: "Switch to the Select Tool",
-    binding: "escape",
-  },
-  {
-    id: "zoom_tool",
-    description: "Select the Zoom Tool",
-    binding: "z",
-  },
-  {
-    id: "create_point",
-    description: "Create a point",
-  },
-  {
-    id: "create_bounding_box",
-    description: "Create a bounding box",
-    binding: "b",
-  },
-  {
-    id: "pan_tool",
-    description: "Select the Pan Tool",
-    binding: "m",
-  },
-  {
-    id: "create_polygon",
-    description: "Create a Polygon",
-    binding: "p",
-  },
-  {
-    id: "create_pixel",
-    description: "Create a Pixel Mask",
-  },
-  {
-    id: "save_and_previous_sample",
-    description: "Save and go to previous sample",
-    binding: "ArrowLeft",
-  },
-  {
-    id: "save_and_next_sample",
-    description: "Save and go to next sample",
-    binding: "ArrowRight",
-  },
-  {
-    id: "save_and_exit_sample",
-    description: "Save and exit current sample",
-  },
-  {
-    id: "exit_sample",
-    description: "Exit sample without saving",
-  },
-  {
-    id: "delete_region",
-    description: "Delete selected region",
-    binding: "d",
-  },
-  {
-    id: "undo",
-    description: "Undo latest change",
-    binding: "Ctrl+z",
-  },
-]
-export const defaultKeyMap = {}
-for (const { id, binding } of defaultHotkeys) defaultKeyMap[id] = binding
-
-export const useDispatchHotkeyHandlers = ({ dispatch }) => {
-  const handlers = useMemo(
-    () => ({
-      select_tool: () => {
-        dispatch({
-          type: "SELECT_TOOL",
-          selectedTool: "select",
-        })
-      },
-      zoom_tool: () => {
-        dispatch({
-          type: "SELECT_TOOL",
-          selectedTool: "zoom",
-        })
-      },
-      create_point: () => {
-        dispatch({
-          type: "SELECT_TOOL",
-          selectedTool: "create-point",
-        })
-      },
-      create_bounding_box: () => {
-        dispatch({
-          type: "SELECT_TOOL",
-          selectedTool: "create-box",
-        })
-      },
-      pan_tool: () => {
-        dispatch({
-          type: "SELECT_TOOL",
-          selectedTool: "pan",
-        })
-      },
-      create_polygon: () => {
-        dispatch({
-          type: "SELECT_TOOL",
-          selectedTool: "create-polygon",
-        })
-      },
-      create_pixel: () => {
-        dispatch({
-          type: "SELECT_TOOL",
-          selectedTool: "create-pixel",
-        })
-      },
-      save_and_previous_sample: () => {
-        dispatch({
-          type: "HEADER_BUTTON_CLICKED",
-          buttonName: "Prev",
-        })
-      },
-      save_and_next_sample: () => {
-        dispatch({
-          type: "HEADER_BUTTON_CLICKED",
-          buttonName: "Next",
-        })
-      },
-      save_and_exit_sample: () => {
-        dispatch({
-          type: "HEADER_BUTTON_CLICKED",
-          buttonName: "Save",
-        })
-      },
-      delete_region: () => {
-        dispatch({
-          type: "DELETE_SELECTED_REGION",
-        })
-      },
-      undo: () => {
-        dispatch({
-          type: "RESTORE_HISTORY",
-        })
-      },
-      // TODO
-      // exit_sample: () => {
-      //   dispatch({
-      //     type: "",
-      //   })
-      // }
-    }),
-    [dispatch]
-  )
-  return handlers
-}
-
-export default ({ children, dispatch }) => {
-  const handlers = useDispatchHotkeyHandlers({ dispatch })
-  return (
-    <HotKeys allowChanges handlers={handlers}>
-      {children}
-    </HotKeys>
-  )
-}

package/src/Sidebar/index.js

@@ -1,117 +0,0 @@
-// @flow
-
-import React from "react"
-import { styled } from "@mui/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import TaskDescription from "../TaskDescriptionSidebarBox"
-import ImageSelector from "../ImageSelectorSidebarBox"
-import RegionSelector from "../RegionSelectorSidebarBox"
-import History from "../HistorySidebarBox"
-import DebugBox from "../DebugSidebarBox"
-import TagsSidebarBox from "../TagsSidebarBox"
-import KeyframesSelector from "../KeyframesSelectorSidebarBox"
-import type { Region } from "../ImageCanvas/region-tools.js"
-
-const theme = createTheme()
-const Container = styled("div")(({ theme }) => ({}))
-
-type Image = {
-  name: string,
-  src: string,
-  cls?: string,
-  tags?: Array<string>,
-  thumbnailSrc?: string,
-  regions?: Array<Region>,
-}
-
-type Props = {
-  debug: any,
-  taskDescription: string,
-  images?: Array<Image>,
-  regions: Array<Region>,
-  history: Array<{ state: Object, name: string, time: Date }>,
-
-  labelImages?: boolean,
-  currentImage?: Image,
-  imageClsList?: Array<string>,
-  imageTagList?: Array<string>,
-
-  onChangeImage: (Image) => any,
-  onSelectRegion: (Region) => any,
-  onSelectImage: (Image) => any,
-  onChangeRegion: (Region) => any,
-  onDeleteRegion: (Region) => any,
-  onRestoreHistory: () => any,
-  onShortcutActionDispatched: (action: any) => any,
-}
-
-const emptyArr = []
-
-export const Sidebar = ({
-  debug,
-  taskDescription,
-  keyframes,
-  images,
-  regions,
-  history,
-  labelImages,
-  currentImage,
-  currentVideoTime,
-  imageClsList,
-  imageTagList,
-  onChangeImage,
-  onSelectRegion,
-  onSelectImage,
-  onChangeRegion,
-  onDeleteRegion,
-  onRestoreHistory,
-  onChangeVideoTime,
-  onDeleteKeyframe,
-  onShortcutActionDispatched,
-}: Props) => {
-  if (!regions) regions = emptyArr
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Container>
-        {debug && <DebugBox state={debug} lastAction={debug.lastAction} />}
-        {taskDescription && (taskDescription || "").length > 1 && (
-          <TaskDescription description={taskDescription} />
-        )}
-        {labelImages && (
-          <TagsSidebarBox
-            currentImage={currentImage}
-            imageClsList={imageClsList}
-            imageTagList={imageTagList}
-            onChangeImage={onChangeImage}
-            expandedByDefault
-          />
-        )}
-        {/* {images && images.length > 1 && (
-        <ImageSelector onSelect={onSelectImage} images={images} />
-      )} */}
-        <RegionSelector
-          regions={regions}
-          onSelectRegion={onSelectRegion}
-          onChangeRegion={onChangeRegion}
-          onDeleteRegion={onDeleteRegion}
-        />
-        {keyframes && (
-          <KeyframesSelector
-            currentVideoTime={currentVideoTime}
-            keyframes={keyframes}
-            onChangeVideoTime={onChangeVideoTime}
-            onDeleteKeyframe={onDeleteKeyframe}
-          />
-        )}
-        <History
-          history={history}
-          onRestoreHistory={() => onRestoreHistory()}
-        />
-        {/* <Shortcuts onShortcutActionDispatched={onShortcutActionDispatched} /> */}
-      </Container>
-    </ThemeProvider>
-  )
-}
-
-export default Sidebar

package/src/SidebarBoxContainer/index.js

@@ -1,93 +0,0 @@
-// @flow
-
-import React, { useState, memo } from "react"
-import Paper from "@mui/material/Paper"
-import { makeStyles } from "@mui/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import ExpandIcon from "@mui/icons-material/ExpandMore"
-import IconButton from "@mui/material/IconButton"
-import Collapse from "@mui/material/Collapse"
-import { grey } from "@mui/material/colors"
-import classnames from "classnames"
-import useEventCallback from "use-event-callback"
-import SidebarBox from "react-material-workspace-layout/SidebarBox"
-
-const theme = createTheme()
-const useStyles = makeStyles((theme) => ({
-  container: { margin: 8 },
-  header: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 8,
-    paddingLeft: 16,
-    paddingRight: 16,
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: "bold",
-    flexGrow: 1,
-    paddingLeft: 8,
-    color: grey[800],
-    "& span": {
-      color: grey[600],
-      fontSize: 12,
-    },
-  },
-  expandButton: {
-    padding: 0,
-    width: 30,
-    height: 30,
-    "& .icon": {
-      marginTop: -6,
-      width: 20,
-      height: 20,
-      transition: "500ms transform",
-      "&.expanded": {
-        transform: "rotate(180deg)",
-      },
-    },
-  },
-  expandedContent: {
-    maxHeight: 300,
-    overflowY: "auto",
-    "&.noScroll": {
-      overflowY: "visible",
-      overflow: "visible",
-    },
-  },
-}))
-
-export const SidebarBoxContainer = ({
-  icon,
-  title,
-  subTitle,
-  children,
-  noScroll = false,
-  expandedByDefault = false,
-}) => {
-  const classes = useStyles()
-  const content = (
-    <div
-      className={classnames(classes.expandedContent, noScroll && "noScroll")}
-    >
-      {children}
-    </div>
-  )
-
-  const [expanded, changeExpanded] = useState(expandedByDefault)
-  const toggleExpanded = useEventCallback(() => changeExpanded(!expanded))
-
-  return (
-    <ThemeProvider theme={theme}>
-      <SidebarBox icon={icon} title={title}>
-        {children}
-      </SidebarBox>
-    </ThemeProvider>
-  )
-}
-
-export default memo(
-  SidebarBoxContainer,
-  (prev, next) => prev.title === next.title && prev.children === next.children
-)

package/src/SmallToolButton/index.js

@@ -1,57 +0,0 @@
-// @flow
-
-import React, { createContext, useContext, memo } from "react"
-import IconButton from "@mui/material/IconButton"
-import Tooltip from "@mui/material/Tooltip"
-import { blue } from "@mui/material/colors"
-
-export const SelectedTool = createContext()
-
-export const SmallToolButton = ({
-  id,
-  name,
-  icon,
-  selected,
-  togglable,
-  alwaysShowing = false,
-}: {
-  id: string,
-  name: string,
-  icon: any,
-  alwaysShowing?: boolean,
-  selected?: boolean,
-  togglable?: boolean,
-}) => {
-  const { enabledTools, selectedTool, onClickTool } = useContext(SelectedTool)
-  if (!enabledTools.includes(id) && !alwaysShowing) return null
-  selected = selected || selectedTool === id
-  return (
-    <Tooltip placement="right" title={name}>
-      <div>
-        <IconButton
-          disabled={!togglable ? selected : undefined}
-          aria-label={name}
-          onClick={() => onClickTool(id)}
-          size="small"
-          style={{
-            width: 50,
-            height: 50,
-            margin: 1,
-            color: selected ? blue[500] : undefined,
-          }}
-        >
-          {icon}
-        </IconButton>
-      </div>
-    </Tooltip>
-  )
-}
-
-export default memo(
-  SmallToolButton,
-  (prevProps, nextProps) =>
-    prevProps.togglable === nextProps.togglable &&
-    prevProps.selected === nextProps.selected &&
-    prevProps.name === nextProps.name &&
-    prevProps.id === nextProps.id
-)

package/src/TagsSidebarBox/index.js

@@ -1,93 +0,0 @@
-// @flow
-
-import React, { useMemo, memo } from "react"
-import SidebarBoxContainer from "../SidebarBoxContainer"
-import StyleIcon from "@mui/icons-material/Style"
-import { grey } from "@mui/material/colors"
-import Select from "react-select"
-import useEventCallback from "use-event-callback"
-import { asMutable } from "seamless-immutable"
-
-type Props = {
-  tags: Array<string>,
-  currentImage: { cls?: string, tags?: Array<string> },
-  imageClsList?: Array<string>,
-  imageTagList?: Array<string>,
-  onChangeImage: (Array<string>) => any,
-}
-
-const emptyArr = []
-const noop = () => null
-
-export const TagsSidebarBox = ({
-  currentImage,
-  imageClsList = emptyArr,
-  imageTagList = emptyArr,
-  onChangeImage = noop,
-}: Props) => {
-  const { tags = [], cls = null } = currentImage || {}
-  const onChangeClassification = useEventCallback((o) =>
-    onChangeImage({ cls: o.value })
-  )
-  const onChangeTags = useEventCallback((o) =>
-    onChangeImage({ tags: o.map((a) => a.value) })
-  )
-  const selectValue = useMemo(
-    () => (cls ? { value: cls, label: cls } : null),
-    [cls]
-  )
-  const memoImgClsList = useMemo(
-    () => asMutable(imageClsList.map((c) => ({ value: c, label: c }))),
-    [imageClsList]
-  )
-  const memoImgTagList = useMemo(
-    () => asMutable(imageTagList.map((c) => ({ value: c, label: c }))),
-    [imageTagList]
-  )
-  const memoCurrentTags = useMemo(
-    () => tags.map((r) => ({ value: r, label: r })),
-    [tags]
-  )
-
-  if (!currentImage) return null
-
-  return (
-    <SidebarBoxContainer
-      title="Image Tags"
-      expandedByDefault
-      noScroll
-      icon={<StyleIcon style={{ color: grey[700] }} />}
-    >
-      {imageClsList.length > 0 && (
-        <div style={{ padding: 8 }}>
-          <Select
-            placeholder="Image Classification"
-            onChange={onChangeClassification}
-            value={selectValue}
-            options={memoImgClsList}
-          />
-        </div>
-      )}
-      {imageTagList.length > 0 && (
-        <div style={{ padding: 8, paddingTop: 0 }}>
-          <Select
-            isMulti
-            placeholder="Image Tags"
-            onChange={onChangeTags}
-            value={memoCurrentTags}
-            options={memoImgTagList}
-          />
-        </div>
-      )}
-    </SidebarBoxContainer>
-  )
-}
-
-export default memo(
-  TagsSidebarBox,
-  (prevProps, nextProps) =>
-    prevProps.currentImage.cls === nextProps.currentImage.cls &&
-    prevProps.currentImage.tags === nextProps.currentImage.tags &&
-    prevProps.imageClsList === nextProps.imageClsList &&
-    prevProps.imageTagList === nextProps.imageTagList
-)