@searpent/react-image-annotate 2.0.77 → 2.0.79

package/Shortcuts/index.js

@@ -0,0 +1,133 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import { setIn } from "seamless-immutable";
+import ShortcutField from "./ShortcutField";
+var 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 (function (_ref) {
+  var onShortcutActionDispatched = _ref.onShortcutActionDispatched;
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      shortcuts = _useState2[0],
+      setShortcuts = _useState2[1]; // useLocalStorage
+
+
+  useEffect(function () {
+    var newShortcuts = _objectSpread({}, shortcuts);
+
+    for (var _i = 0, _Object$keys = Object.keys(defaultShortcuts); _i < _Object$keys.length; _i++) {
+      var actionId = _Object$keys[_i];
+
+      if (!newShortcuts[actionId]) {
+        newShortcuts[actionId] = defaultShortcuts[actionId];
+      }
+    }
+
+    setShortcuts(newShortcuts);
+  }, []);
+
+  var onChangeShortcut = function onChangeShortcut(actionId, keyName) {
+    setShortcuts(setIn(shortcuts, [actionId, "key"], keyName));
+  };
+
+  useEffect(function () {
+    var handleKeyPress = function handleKeyPress(e) {
+      for (var actionId in shortcuts) {
+        var shortcut = shortcuts[actionId];
+
+        if (!shortcut || !shortcut.key) {
+          continue;
+        }
+
+        if (e.key === shortcut.key) {
+          onShortcutActionDispatched(_objectSpread({}, shortcut.action, {
+            selectedTool: actionId
+          }));
+        }
+      }
+    };
+
+    window.addEventListener("keypress", handleKeyPress);
+    return function () {
+      window.removeEventListener("keypress", handleKeyPress);
+      document.activeElement.blur();
+    };
+  }, [shortcuts]);
+  return React.createElement(SidebarBoxContainer, {
+    title: "Shortcuts"
+  }, Object.keys(shortcuts).map(function (actionId, index) {
+    if (!shortcuts[actionId]) return null;
+    return React.createElement(ShortcutField, {
+      key: actionId,
+      actionId: actionId,
+      actionName: shortcuts[actionId].name,
+      keyName: shortcuts[actionId].key || "",
+      onChangeShortcut: onChangeShortcut
+    });
+  }).filter(Boolean));
+});

package/ShortcutsManager/index.js

@@ -0,0 +1,155 @@
+import React, { useMemo } from "react";
+import { HotKeys } from "react-hotkeys";
+export var 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 var defaultKeyMap = {};
+
+for (var _i = 0, _defaultHotkeys = defaultHotkeys; _i < _defaultHotkeys.length; _i++) {
+  var _ref4 = _defaultHotkeys[_i];
+  var id = _ref4.id;
+  var binding = _ref4.binding;
+  defaultKeyMap[id] = binding;
+}
+
+export var useDispatchHotkeyHandlers = function useDispatchHotkeyHandlers(_ref2) {
+  var dispatch = _ref2.dispatch;
+  var handlers = useMemo(function () {
+    return {
+      select_tool: function select_tool() {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "select"
+        });
+      },
+      zoom_tool: function zoom_tool() {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "zoom"
+        });
+      },
+      create_point: function create_point() {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-point"
+        });
+      },
+      create_bounding_box: function create_bounding_box() {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-box"
+        });
+      },
+      pan_tool: function pan_tool() {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "pan"
+        });
+      },
+      create_polygon: function create_polygon() {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-polygon"
+        });
+      },
+      create_pixel: function create_pixel() {
+        dispatch({
+          type: "SELECT_TOOL",
+          selectedTool: "create-pixel"
+        });
+      },
+      save_and_previous_sample: function save_and_previous_sample() {
+        dispatch({
+          type: "HEADER_BUTTON_CLICKED",
+          buttonName: "Prev"
+        });
+      },
+      save_and_next_sample: function save_and_next_sample() {
+        dispatch({
+          type: "HEADER_BUTTON_CLICKED",
+          buttonName: "Next"
+        });
+      },
+      save_and_exit_sample: function save_and_exit_sample() {
+        dispatch({
+          type: "HEADER_BUTTON_CLICKED",
+          buttonName: "Save"
+        });
+      },
+      delete_region: function delete_region() {
+        dispatch({
+          type: "DELETE_SELECTED_REGION"
+        });
+      },
+      undo: function undo() {
+        dispatch({
+          type: "RESTORE_HISTORY"
+        });
+      } // TODO
+      // exit_sample: () => {
+      //   dispatch({
+      //     type: "",
+      //   })
+      // }
+
+    };
+  }, [dispatch]);
+  return handlers;
+};
+export default (function (_ref3) {
+  var children = _ref3.children,
+      dispatch = _ref3.dispatch;
+  var handlers = useDispatchHotkeyHandlers({
+    dispatch: dispatch
+  });
+  return React.createElement(HotKeys, {
+    allowChanges: true,
+    handlers: handlers
+  }, children);
+});

package/Sidebar/index.js

@@ -0,0 +1,69 @@
+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";
+var theme = createTheme();
+var Container = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {};
+});
+var emptyArr = [];
+export var Sidebar = function Sidebar(_ref2) {
+  var debug = _ref2.debug,
+      taskDescription = _ref2.taskDescription,
+      keyframes = _ref2.keyframes,
+      images = _ref2.images,
+      regions = _ref2.regions,
+      history = _ref2.history,
+      labelImages = _ref2.labelImages,
+      currentImage = _ref2.currentImage,
+      currentVideoTime = _ref2.currentVideoTime,
+      imageClsList = _ref2.imageClsList,
+      imageTagList = _ref2.imageTagList,
+      onChangeImage = _ref2.onChangeImage,
+      onSelectRegion = _ref2.onSelectRegion,
+      onSelectImage = _ref2.onSelectImage,
+      onChangeRegion = _ref2.onChangeRegion,
+      onDeleteRegion = _ref2.onDeleteRegion,
+      _onRestoreHistory = _ref2.onRestoreHistory,
+      onChangeVideoTime = _ref2.onChangeVideoTime,
+      onDeleteKeyframe = _ref2.onDeleteKeyframe,
+      onShortcutActionDispatched = _ref2.onShortcutActionDispatched;
+  if (!regions) regions = emptyArr;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(Container, null, debug && React.createElement(DebugBox, {
+    state: debug,
+    lastAction: debug.lastAction
+  }), taskDescription && (taskDescription || "").length > 1 && React.createElement(TaskDescription, {
+    description: taskDescription
+  }), labelImages && React.createElement(TagsSidebarBox, {
+    currentImage: currentImage,
+    imageClsList: imageClsList,
+    imageTagList: imageTagList,
+    onChangeImage: onChangeImage,
+    expandedByDefault: true
+  }), React.createElement(RegionSelector, {
+    regions: regions,
+    onSelectRegion: onSelectRegion,
+    onChangeRegion: onChangeRegion,
+    onDeleteRegion: onDeleteRegion
+  }), keyframes && React.createElement(KeyframesSelector, {
+    currentVideoTime: currentVideoTime,
+    keyframes: keyframes,
+    onChangeVideoTime: onChangeVideoTime,
+    onDeleteKeyframe: onDeleteKeyframe
+  }), React.createElement(History, {
+    history: history,
+    onRestoreHistory: function onRestoreHistory() {
+      return _onRestoreHistory();
+    }
+  })));
+};
+export default Sidebar;

package/SidebarBoxContainer/index.js

@@ -0,0 +1,93 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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";
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return {
+    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 var SidebarBoxContainer = function SidebarBoxContainer(_ref) {
+  var icon = _ref.icon,
+      title = _ref.title,
+      subTitle = _ref.subTitle,
+      children = _ref.children,
+      _ref$noScroll = _ref.noScroll,
+      noScroll = _ref$noScroll === void 0 ? false : _ref$noScroll,
+      _ref$expandedByDefaul = _ref.expandedByDefault,
+      expandedByDefault = _ref$expandedByDefaul === void 0 ? false : _ref$expandedByDefaul;
+  var classes = useStyles();
+  var content = React.createElement("div", {
+    className: classnames(classes.expandedContent, noScroll && "noScroll")
+  }, children);
+
+  var _useState = useState(expandedByDefault),
+      _useState2 = _slicedToArray(_useState, 2),
+      expanded = _useState2[0],
+      changeExpanded = _useState2[1];
+
+  var toggleExpanded = useEventCallback(function () {
+    return changeExpanded(!expanded);
+  });
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBox, {
+    icon: icon,
+    title: title
+  }, children));
+};
+export default memo(SidebarBoxContainer, function (prev, next) {
+  return prev.title === next.title && prev.children === next.children;
+});

package/SmallToolButton/index.js

@@ -0,0 +1,42 @@
+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 var SelectedTool = createContext();
+export var SmallToolButton = function SmallToolButton(_ref) {
+  var id = _ref.id,
+      name = _ref.name,
+      icon = _ref.icon,
+      selected = _ref.selected,
+      togglable = _ref.togglable,
+      _ref$alwaysShowing = _ref.alwaysShowing,
+      alwaysShowing = _ref$alwaysShowing === void 0 ? false : _ref$alwaysShowing;
+
+  var _useContext = useContext(SelectedTool),
+      enabledTools = _useContext.enabledTools,
+      selectedTool = _useContext.selectedTool,
+      onClickTool = _useContext.onClickTool;
+
+  if (!enabledTools.includes(id) && !alwaysShowing) return null;
+  selected = selected || selectedTool === id;
+  return React.createElement(Tooltip, {
+    placement: "right",
+    title: name
+  }, React.createElement("div", null, React.createElement(IconButton, {
+    disabled: !togglable ? selected : undefined,
+    "aria-label": name,
+    onClick: function onClick() {
+      return onClickTool(id);
+    },
+    size: "small",
+    style: {
+      width: 50,
+      height: 50,
+      margin: 1,
+      color: selected ? blue[500] : undefined
+    }
+  }, icon)));
+};
+export default memo(SmallToolButton, function (prevProps, nextProps) {
+  return prevProps.togglable === nextProps.togglable && prevProps.selected === nextProps.selected && prevProps.name === nextProps.name && prevProps.id === nextProps.id;
+});

package/TagsSidebarBox/index.js

@@ -0,0 +1,105 @@
+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";
+var emptyArr = [];
+
+var noop = function noop() {
+  return null;
+};
+
+export var TagsSidebarBox = function TagsSidebarBox(_ref) {
+  var currentImage = _ref.currentImage,
+      _ref$imageClsList = _ref.imageClsList,
+      imageClsList = _ref$imageClsList === void 0 ? emptyArr : _ref$imageClsList,
+      _ref$imageTagList = _ref.imageTagList,
+      imageTagList = _ref$imageTagList === void 0 ? emptyArr : _ref$imageTagList,
+      _ref$onChangeImage = _ref.onChangeImage,
+      onChangeImage = _ref$onChangeImage === void 0 ? noop : _ref$onChangeImage;
+
+  var _ref2 = currentImage || {},
+      _ref2$tags = _ref2.tags,
+      tags = _ref2$tags === void 0 ? [] : _ref2$tags,
+      _ref2$cls = _ref2.cls,
+      cls = _ref2$cls === void 0 ? null : _ref2$cls;
+
+  var onChangeClassification = useEventCallback(function (o) {
+    return onChangeImage({
+      cls: o.value
+    });
+  });
+  var onChangeTags = useEventCallback(function (o) {
+    return onChangeImage({
+      tags: o.map(function (a) {
+        return a.value;
+      })
+    });
+  });
+  var selectValue = useMemo(function () {
+    return cls ? {
+      value: cls,
+      label: cls
+    } : null;
+  }, [cls]);
+  var memoImgClsList = useMemo(function () {
+    return asMutable(imageClsList.map(function (c) {
+      return {
+        value: c,
+        label: c
+      };
+    }));
+  }, [imageClsList]);
+  var memoImgTagList = useMemo(function () {
+    return asMutable(imageTagList.map(function (c) {
+      return {
+        value: c,
+        label: c
+      };
+    }));
+  }, [imageTagList]);
+  var memoCurrentTags = useMemo(function () {
+    return tags.map(function (r) {
+      return {
+        value: r,
+        label: r
+      };
+    });
+  }, [tags]);
+  if (!currentImage) return null;
+  return React.createElement(SidebarBoxContainer, {
+    title: "Image Tags",
+    expandedByDefault: true,
+    noScroll: true,
+    icon: React.createElement(StyleIcon, {
+      style: {
+        color: grey[700]
+      }
+    })
+  }, imageClsList.length > 0 && React.createElement("div", {
+    style: {
+      padding: 8
+    }
+  }, React.createElement(Select, {
+    placeholder: "Image Classification",
+    onChange: onChangeClassification,
+    value: selectValue,
+    options: memoImgClsList
+  })), imageTagList.length > 0 && React.createElement("div", {
+    style: {
+      padding: 8,
+      paddingTop: 0
+    }
+  }, React.createElement(Select, {
+    isMulti: true,
+    placeholder: "Image Tags",
+    onChange: onChangeTags,
+    value: memoCurrentTags,
+    options: memoImgTagList
+  })));
+};
+export default memo(TagsSidebarBox, function (prevProps, nextProps) {
+  return prevProps.currentImage.cls === nextProps.currentImage.cls && prevProps.currentImage.tags === nextProps.currentImage.tags && prevProps.imageClsList === nextProps.imageClsList && prevProps.imageTagList === nextProps.imageTagList;
+});

package/TaskDescriptionSidebarBox/index.js

@@ -0,0 +1,58 @@
+import React, { memo } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import DescriptionIcon from "@mui/icons-material/Description";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
+import Markdown from "react-markdown";
+var theme = createTheme();
+var MarkdownContainer = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    paddingLeft: 16,
+    paddingRight: 16,
+    fontSize: 12,
+    "& h1": {
+      fontSize: 18
+    },
+    "& h2": {
+      fontSize: 14
+    },
+    "& h3": {
+      fontSize: 12
+    },
+    "& h4": {
+      fontSize: 12
+    },
+    "& h5": {
+      fontSize: 12
+    },
+    "& h6": {
+      fontSize: 12
+    },
+    "& p": {
+      fontSize: 12
+    },
+    "& a": {},
+    "& img": {
+      width: "100%"
+    }
+  };
+});
+export var TaskDescriptionSidebarBox = function TaskDescriptionSidebarBox(_ref2) {
+  var description = _ref2.description;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "Task Description",
+    icon: React.createElement(DescriptionIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: description && description !== "" ? false : true
+  }, React.createElement(MarkdownContainer, null, React.createElement(Markdown, {
+    source: description
+  }))));
+};
+export default memo(TaskDescriptionSidebarBox);

package/Theme/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { makeStyles } from "@mui/styles";
+var useStyles = makeStyles(function (theme) {
+  return {
+    container: {
+      fontFamily: '"Inter", sans-serif'
+    }
+  };
+});
+var theme = createTheme({
+  typography: {
+    fontFamily: '"Inter", "Roboto", sans-serif'
+  },
+  overrides: {
+    MuiButton: {
+      root: {
+        textTransform: "none"
+      }
+    }
+  }
+});
+export var Theme = function Theme(_ref) {
+  var children = _ref.children;
+  var classes = useStyles();
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement("div", null, children));
+};
+export default Theme;