@searpent/react-image-annotate 2.0.3 → 2.0.4

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,48 @@
+// @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, clsColors, groupColors }) => {
+  const [state, changeState] = useState({
+    ...() => pullSettingsFromLocalStorage(),
+    clsColors,
+    groupColors,
+  })
+  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>
+  )
+}

package/src/ShortcutsManager/index.js

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

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

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

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