@searpent/react-image-annotate 2.0.76 → 2.0.78

package/src/RegionTags/index.js

@@ -1,136 +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,
-  onDeleteGroup,
-  layoutParams,
-  imageSrc,
-  RegionEditLabel,
-  onRegionClassAdded,
-  allowComments,
-  hideNotEditingLabel,
-  allowedGroups
-}) => {
-  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}
-              onDeleteGroup={onDeleteGroup}
-              editing={region.editingLabels}
-              region={region}
-              regions={regions}
-              imageSrc={imageSrc}
-              onRegionClassAdded={onRegionClassAdded}
-              allowComments={allowComments}
-              hideNotEditingLabel={hideNotEditingLabel}
-              allowedGroups={allowedGroups}
-            />
-          </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,57 +0,0 @@
-// @flow
-
-import React, { createContext, useContext, useState } from "react"
-
-const defaultSettings = {
-  showCrosshairs: false,
-  showHighlightBox: true,
-  wasdMode: true,
-}
-
-const DEFAULT_GROUP_COLORS = [
-  "#3853F1",
-  "#F6E54C",
-  "#39D33C",
-  "#CF24CF",
-  "#22E3ED",
-  "#EF3029",
-]
-
-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 = DEFAULT_GROUP_COLORS }) => {
-  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

@@ -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: "e",
-  },
-  {
-    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