@searpent/react-image-annotate 2.0.5 → 2.0.8

package/RegionTags/index.js

@@ -0,0 +1,142 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import React from "react";
+import Paper from "@mui/material/Paper";
+import DefaultRegionLabel from "../RegionLabel";
+import LockIcon from "@mui/icons-material/Lock";
+
+var copyWithout = function copyWithout(obj) {
+  var newObj = _objectSpread({}, obj);
+
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+
+  for (var _i = 0, _args = args; _i < _args.length; _i++) {
+    var arg = _args[_i];
+    delete newObj[arg];
+  }
+
+  return newObj;
+};
+
+export var RegionTags = function RegionTags(_ref) {
+  var regions = _ref.regions,
+      projectRegionBox = _ref.projectRegionBox,
+      mouseEvents = _ref.mouseEvents,
+      regionClsList = _ref.regionClsList,
+      regionTagList = _ref.regionTagList,
+      onBeginRegionEdit = _ref.onBeginRegionEdit,
+      onChangeRegion = _ref.onChangeRegion,
+      onCloseRegionEdit = _ref.onCloseRegionEdit,
+      onDeleteRegion = _ref.onDeleteRegion,
+      layoutParams = _ref.layoutParams,
+      imageSrc = _ref.imageSrc,
+      RegionEditLabel = _ref.RegionEditLabel,
+      onRegionClassAdded = _ref.onRegionClassAdded,
+      allowComments = _ref.allowComments,
+      hideNotEditingLabel = _ref.hideNotEditingLabel,
+      allowedGroups = _ref.allowedGroups;
+  var RegionLabel = RegionEditLabel != null ? RegionEditLabel : DefaultRegionLabel;
+  return regions.filter(function (r) {
+    return r.visible || r.visible === undefined;
+  }).map(function (region) {
+    var pbox = projectRegionBox(region);
+    var _layoutParams$current = layoutParams.current,
+        iw = _layoutParams$current.iw,
+        ih = _layoutParams$current.ih;
+    var margin = 8;
+    if (region.highlighted && region.type === "box") margin += 6;
+    var labelBoxHeight = region.editingLabels && !region.locked ? 170 : region.tags ? 60 : 50;
+    var displayOnTop = pbox.y > labelBoxHeight;
+    var coords = displayOnTop ? {
+      left: pbox.x,
+      top: pbox.y - margin / 2
+    } : {
+      left: pbox.x,
+      top: pbox.y + pbox.h + margin / 2
+    };
+
+    if (region.locked) {
+      return React.createElement("div", {
+        key: region.id,
+        style: _objectSpread({
+          position: "absolute"
+        }, coords, {
+          zIndex: 10 + (region.editingLabels ? 5 : 0)
+        })
+      }, React.createElement(Paper, {
+        style: _objectSpread({
+          position: "absolute",
+          left: 0
+        }, displayOnTop ? {
+          bottom: 0
+        } : {
+          top: 0
+        }, {
+          zIndex: 10,
+          backgroundColor: "#fff",
+          borderRadius: 4,
+          padding: 2,
+          paddingBottom: 0,
+          opacity: 0.5,
+          pointerEvents: "none"
+        })
+      }, React.createElement(LockIcon, {
+        style: {
+          width: 16,
+          height: 16,
+          color: "#333"
+        }
+      })));
+    }
+
+    return React.createElement("div", {
+      key: region.id,
+      style: _objectSpread({
+        position: "absolute"
+      }, coords, {
+        zIndex: 10 + (region.editingLabels ? 5 : 0),
+        width: 200
+      }),
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
+      onMouseUp: function onMouseUp(e) {
+        return e.preventDefault();
+      },
+      onMouseEnter: function onMouseEnter(e) {
+        if (region.editingLabels) {
+          mouseEvents.onMouseUp(e);
+          e.button = 1;
+          mouseEvents.onMouseUp(e);
+        }
+      }
+    }, React.createElement("div", Object.assign({
+      style: _objectSpread({
+        position: "absolute",
+        zIndex: 20,
+        left: 0
+      }, displayOnTop ? {
+        bottom: 0
+      } : {
+        top: 0
+      })
+    }, !region.editingLabels ? copyWithout(mouseEvents, "onMouseDown", "onMouseUp") : {}), React.createElement(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,
+      hideNotEditingLabel: hideNotEditingLabel,
+      allowedGroups: allowedGroups
+    })));
+  });
+};
+export default RegionTags;

package/SettingsDialog/index.js

@@ -0,0 +1,52 @@
+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 var SettingsDialog = function SettingsDialog(_ref) {
+  var open = _ref.open,
+      onClose = _ref.onClose;
+  var settings = useSettings();
+  return React.createElement(Dialog, {
+    open: open || false,
+    onClose: onClose
+  }, React.createElement(DialogTitle, null, "Settings"), React.createElement(DialogContent, {
+    style: {
+      minWidth: 400
+    }
+  }, React.createElement(Survey, {
+    variant: "flat",
+    noActions: true,
+    defaultAnswers: settings,
+    onQuestionChange: function onQuestionChange(q, a, answers) {
+      return 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"]
+      }]
+    }
+  })), React.createElement(DialogActions, null, React.createElement(Button, {
+    onClick: onClose
+  }, "Close")));
+};
+export default SettingsDialog;

package/SettingsProvider/index.js

@@ -0,0 +1,58 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { createContext, useContext, useState } from "react";
+var defaultSettings = {
+  showCrosshairs: false,
+  showHighlightBox: true,
+  wasdMode: true
+};
+export var SettingsContext = createContext(defaultSettings);
+
+var pullSettingsFromLocalStorage = function pullSettingsFromLocalStorage() {
+  if (!window || !window.localStorage) return {};
+  var settings = {};
+
+  for (var i = 0; i < window.localStorage.length; i++) {
+    var 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 var useSettings = function useSettings() {
+  return useContext(SettingsContext);
+};
+export var SettingsProvider = function SettingsProvider(_ref) {
+  var children = _ref.children,
+      clsColors = _ref.clsColors,
+      groupColors = _ref.groupColors;
+
+  var _useState = useState(_objectSpread({}, function () {
+    return pullSettingsFromLocalStorage();
+  }, {
+    clsColors: clsColors,
+    groupColors: groupColors
+  })),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      changeState = _useState2[1];
+
+  var changeSetting = function changeSetting(setting, value) {
+    changeState(_objectSpread({}, state, _defineProperty({}, setting, value)));
+    window.localStorage.setItem("settings_".concat(setting), JSON.stringify(value));
+  };
+
+  return React.createElement(SettingsContext.Provider, {
+    value: _objectSpread({}, state, {
+      changeSetting: changeSetting
+    })
+  }, children);
+};
+export default SettingsProvider;

package/Shortcuts/ShortcutField.js

@@ -0,0 +1,46 @@
+import React from "react";
+import TextField from "@mui/material/TextField";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return {
+    shortcutKeyFieldWrapper: {
+      paddingTop: 8,
+      display: "inline-flex",
+      width: "100%"
+    },
+    shortcutKeyText: {
+      lineHeight: 0
+    },
+    shortcutTextfield: {
+      width: "100%",
+      boxSizing: "border-box",
+      textAlign: "center"
+    }
+  };
+});
+
+var ShortcutField = function ShortcutField(_ref) {
+  var actionId = _ref.actionId,
+      actionName = _ref.actionName,
+      keyName = _ref.keyName,
+      onChangeShortcut = _ref.onChangeShortcut;
+  var classes = useStyles();
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement("div", {
+    className: classes.shortcutKeyFieldWrapper
+  }, React.createElement(TextField, {
+    variant: "outlined",
+    label: actionName,
+    className: classes.shortcutTextfield,
+    value: keyName,
+    onKeyPress: function onKeyPress(e) {
+      onChangeShortcut(actionId, e.key);
+      e.stopPropagation();
+    }
+  })));
+};
+
+export default ShortcutField;

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: "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 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;