@searpent/react-image-annotate 2.0.1 → 2.0.2

package/Annotator/reducers/get-active-image.js

@@ -0,0 +1,27 @@
+import { getIn } from "seamless-immutable";
+export default (function (state) {
+  var currentImageIndex = null,
+      pathToActiveImage,
+      activeImage;
+
+  if (state.annotationType === "image") {
+    currentImageIndex = state.selectedImage;
+
+    if (currentImageIndex === -1) {
+      currentImageIndex = null;
+      activeImage = null;
+    } else {
+      pathToActiveImage = ["images", currentImageIndex];
+      activeImage = getIn(state, pathToActiveImage);
+    }
+  } else if (state.annotationType === "video") {
+    pathToActiveImage = ["keyframes", state.currentVideoTime || 0];
+    activeImage = getIn(state, pathToActiveImage) || null;
+  }
+
+  return {
+    currentImageIndex: currentImageIndex,
+    pathToActiveImage: pathToActiveImage,
+    activeImage: activeImage
+  };
+});

package/Annotator/reducers/get-implied-video-regions.js

@@ -0,0 +1,180 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+var emptyArr = [];
+export default (function (keyframes, time) {
+  if (keyframes[time || 0]) {
+    return keyframes[time || 0].regions;
+  } // Get surrounding video keyframes
+
+
+  var keyframeTimes = Object.keys(keyframes).map(function (a) {
+    return parseInt(a);
+  }).filter(function (a) {
+    return !isNaN(a);
+  });
+  if (keyframeTimes.length === 0) return emptyArr;
+  keyframeTimes.sort(function (a, b) {
+    return a - b;
+  });
+  var nextKeyframeTimeIndex = keyframeTimes.findIndex(function (kt) {
+    return kt >= time;
+  });
+
+  if (nextKeyframeTimeIndex === -1) {
+    return keyframes[keyframeTimes[keyframeTimes.length - 1]].regions || emptyArr;
+  } else if (nextKeyframeTimeIndex === 0) {
+    return emptyArr;
+  }
+
+  var t1 = keyframeTimes[nextKeyframeTimeIndex - 1];
+  var prevKeyframe = keyframes[t1];
+  var t2 = keyframeTimes[nextKeyframeTimeIndex];
+  var nextKeyframe = keyframes[t2];
+  var prevRegionMap = {},
+      nextRegionMap = {};
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    for (var _iterator = prevKeyframe.regions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var region = _step.value;
+      prevRegionMap[region.id] = region;
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+
+  var _iteratorNormalCompletion2 = true;
+  var _didIteratorError2 = false;
+  var _iteratorError2 = undefined;
+
+  try {
+    for (var _iterator2 = nextKeyframe.regions[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+      var _region = _step2.value;
+      nextRegionMap[_region.id] = _region;
+    }
+  } catch (err) {
+    _didIteratorError2 = true;
+    _iteratorError2 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+        _iterator2.return();
+      }
+    } finally {
+      if (_didIteratorError2) {
+        throw _iteratorError2;
+      }
+    }
+  }
+
+  var impliedRegions = []; // Weighted time coefficients for linear transition
+
+  var w1 = (t2 - time) / (t2 - t1);
+  var w2 = 1 - w1;
+
+  var _loop = function _loop(regionId) {
+    var _ref = [prevRegionMap[regionId], nextRegionMap[regionId]],
+        prev = _ref[0],
+        next = _ref[1];
+
+    if (!next) {
+      impliedRegions.push(_objectSpread({}, prev, {
+        highlighted: false,
+        editingLabels: false
+      }));
+      return "continue";
+    }
+
+    switch (prev.type) {
+      case "point":
+        {
+          impliedRegions.push(_objectSpread({}, prev, {
+            highlighted: false,
+            editingLabels: false,
+            x: prev.x * w1 + next.x * w2,
+            y: prev.y * w1 + next.y * w2
+          }));
+          break;
+        }
+
+      case "box":
+        {
+          impliedRegions.push(_objectSpread({}, prev, {
+            highlighted: false,
+            editingLabels: false,
+            x: prev.x * w1 + next.x * w2,
+            y: prev.y * w1 + next.y * w2,
+            w: prev.w * w1 + next.w * w2,
+            h: prev.h * w1 + next.h * w2
+          }));
+          break;
+        }
+
+      case "polygon":
+        {
+          if (next.points.length === prev.points.length) {
+            impliedRegions.push(_objectSpread({}, prev, {
+              highlighted: false,
+              editingLabels: false,
+              points: prev.points.map(function (pp, i) {
+                return [pp[0] * w1 + next.points[i][0] * w2, pp[1] * w1 + next.points[i][1] * w2];
+              })
+            }));
+          } else {
+            impliedRegions.push(prev);
+          }
+
+          break;
+        }
+
+      case "keypoints":
+        {
+          var newPoints = {};
+
+          for (var _i = 0, _Object$entries = Object.entries(prev.points); _i < _Object$entries.length; _i++) {
+            var _ref4 = _Object$entries[_i];
+
+            var _ref3 = _slicedToArray(_ref4, 2);
+
+            var pointId = _ref3[0];
+            var prevPoint = _ref3[1];
+            newPoints[pointId] = {
+              x: prevPoint.x * w1 + next.points[pointId].x * w2,
+              y: prevPoint.y * w1 + next.points[pointId].y * w2
+            };
+          }
+
+          impliedRegions.push(_objectSpread({}, prev, {
+            highlighted: false,
+            editingLabels: false,
+            points: newPoints
+          }));
+          break;
+        }
+
+      default:
+        break;
+    }
+  };
+
+  for (var regionId in prevRegionMap) {
+    var _ret = _loop(regionId);
+
+    if (_ret === "continue") continue;
+  }
+
+  return impliedRegions;
+});

package/Annotator/reducers/history-handler.js

@@ -0,0 +1,38 @@
+import { setIn, updateIn, asMutable, without } from "seamless-immutable";
+import moment from "moment";
+var typesToSaveWithHistory = {
+  BEGIN_BOX_TRANSFORM: "Transform/Move Box",
+  BEGIN_MOVE_POINT: "Move Point",
+  DELETE_REGION: "Delete Region"
+};
+export var saveToHistory = function saveToHistory(state, name) {
+  return updateIn(state, ["history"], function (h) {
+    return [{
+      time: moment().toDate(),
+      state: without(state, "history"),
+      name: name
+    }].concat((h || []).slice(0, 9));
+  });
+};
+export default (function (reducer) {
+  return function (state, action) {
+    var prevState = state;
+    var nextState = reducer(state, action);
+
+    if (action.type === "RESTORE_HISTORY") {
+      if (state.history.length > 0) {
+        return setIn(nextState.history[0].state, ["history"], nextState.history.slice(1));
+      }
+    } else {
+      if (prevState !== nextState && Object.keys(typesToSaveWithHistory).includes(action.type)) {
+        return setIn(nextState, ["history"], [{
+          time: moment().toDate(),
+          state: without(prevState, "history"),
+          name: typesToSaveWithHistory[action.type] || action.type
+        }].concat(nextState.history || []).slice(0, 9));
+      }
+    }
+
+    return nextState;
+  };
+});

package/Annotator/reducers/image-reducer.js

@@ -0,0 +1,20 @@
+import { setIn } from "seamless-immutable";
+import getActiveImage from "./get-active-image";
+export default (function (state, action) {
+  var _getActiveImage = getActiveImage(state),
+      currentImageIndex = _getActiveImage.currentImageIndex,
+      pathToActiveImage = _getActiveImage.pathToActiveImage,
+      activeImage = _getActiveImage.activeImage;
+
+  switch (action.type) {
+    case "IMAGE_OR_VIDEO_LOADED":
+      {
+        return setIn(state, ["images", currentImageIndex, "pixelSize"], {
+          w: action.metadata.naturalWidth,
+          h: action.metadata.naturalHeight
+        });
+      }
+  }
+
+  return state;
+});

package/Annotator/reducers/video-reducer.js

@@ -0,0 +1,88 @@
+import { setIn, without } from "seamless-immutable";
+import getImpliedVideoRegions from "./get-implied-video-regions";
+import { saveToHistory } from "./history-handler.js";
+export default (function (state, action) {
+  var copyImpliedRegions = function copyImpliedRegions() {
+    return setIn(saveToHistory(state, "Add Keyframe"), ["keyframes", state.currentVideoTime || 0], {
+      regions: getImpliedVideoRegions(state.keyframes, state.currentVideoTime)
+    });
+  };
+
+  switch (action.type) {
+    case "IMAGE_OR_VIDEO_LOADED":
+      {
+        var duration = action.metadata.duration;
+
+        if (typeof duration === "number") {
+          return setIn(state, ["videoDuration"], duration * 1000);
+        }
+      }
+
+    case "HEADER_BUTTON_CLICKED":
+      {
+        switch (action.buttonName.toLowerCase()) {
+          case "play":
+            return setIn(state, ["videoPlaying"], true);
+
+          case "pause":
+            return setIn(state, ["videoPlaying"], false);
+        }
+      }
+
+    case "CHANGE_VIDEO_TIME":
+      {
+        return setIn(state, ["currentVideoTime"], action.newTime);
+      }
+
+    case "CHANGE_VIDEO_PLAYING":
+      {
+        return setIn(state, ["videoPlaying"], action.isPlaying);
+      }
+
+    case "DELETE_KEYFRAME":
+      {
+        return setIn(state, ["keyframes"], without(state.keyframes, action.time));
+      }
+
+    default:
+      break;
+  } // Before the user modifies regions, copy the interpolated regions over to a
+  // new keyframe
+
+
+  if (!state.keyframes[state.currentVideoTime]) {
+    switch (action.type) {
+      case "BEGIN_BOX_TRANSFORM":
+      case "BEGIN_MOVE_POINT":
+      case "BEGIN_MOVE_KEYPOINT":
+      case "BEGIN_MOVE_POLYGON_POINT":
+      case "ADD_POLYGON_POINT":
+      case "SELECT_REGION":
+      case "CHANGE_REGION":
+      case "DELETE_REGION":
+      case "OPEN_REGION_EDITOR":
+        return copyImpliedRegions();
+
+      case "MOUSE_DOWN":
+        {
+          switch (state.selectedTool) {
+            case "create-point":
+            case "create-polygon":
+            case "create-box":
+            case "create-keypoints":
+              return copyImpliedRegions();
+
+            default:
+              break;
+          }
+
+          break;
+        }
+
+      default:
+        break;
+    }
+  }
+
+  return state;
+});

package/ClassSelectionMenu/index.js

@@ -0,0 +1,135 @@
+import React, { useEffect } from "react";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import * as muiColors from "@mui/material/colors";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import colors from "../colors";
+import BallotIcon from "@mui/icons-material/Ballot";
+import capitalize from "lodash/capitalize";
+import classnames from "classnames";
+var theme = createTheme();
+var LabelContainer = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: "flex",
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingLeft: 16,
+    paddingRight: 16,
+    alignItems: "center",
+    cursor: "pointer",
+    opacity: 0.7,
+    backgroundColor: "#fff",
+    "&:hover": {
+      opacity: 1
+    },
+    "&.selected": {
+      opacity: 1,
+      fontWeight: "bold"
+    }
+  };
+});
+var Circle = styled("div")(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: 12,
+    height: 12,
+    borderRadius: 12,
+    marginRight: 8
+  };
+});
+var Label = styled("div")(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    fontSize: 11
+  };
+});
+var DashSep = styled("div")(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    flexGrow: 1,
+    borderBottom: "2px dotted ".concat(muiColors.grey[300]),
+    marginLeft: 8,
+    marginRight: 8
+  };
+});
+var Number = styled("div")(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    fontSize: 11,
+    textAlign: "center",
+    minWidth: 14,
+    paddingTop: 2,
+    paddingBottom: 2,
+    fontWeight: "bold",
+    color: muiColors.grey[700]
+  };
+});
+export var ClassSelectionMenu = function ClassSelectionMenu(_ref6) {
+  var selectedCls = _ref6.selectedCls,
+      regionClsList = _ref6.regionClsList,
+      onSelectCls = _ref6.onSelectCls;
+  useEffect(function () {
+    var keyMapping = {};
+
+    var _loop = function _loop(i) {
+      keyMapping[i + 1] = function () {
+        return onSelectCls(regionClsList[i]);
+      };
+    };
+
+    for (var i = 0; i < 9 && i < regionClsList.length; i++) {
+      _loop(i);
+    }
+
+    var onKeyDown = function onKeyDown(e) {
+      if (keyMapping[e.key]) {
+        keyMapping[e.key]();
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return function () {
+      return window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [regionClsList, selectedCls]);
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "Classifications",
+    subTitle: "",
+    icon: React.createElement(BallotIcon, {
+      style: {
+        color: muiColors.grey[700]
+      }
+    }),
+    expandedByDefault: true
+  }, regionClsList.map(function (label, index) {
+    return React.createElement(LabelContainer, {
+      className: classnames({
+        selected: label === selectedCls
+      }),
+      onClick: function onClick() {
+        return onSelectCls(label);
+      }
+    }, React.createElement(Circle, {
+      style: {
+        backgroundColor: colors[index % colors.length]
+      }
+    }), React.createElement(Label, {
+      className: classnames({
+        selected: label === selectedCls
+      })
+    }, capitalize(label)), React.createElement(DashSep, null), React.createElement(Number, {
+      className: classnames({
+        selected: label === selectedCls
+      })
+    }, index < 9 ? "Key [".concat(index + 1, "]") : ""));
+  }), React.createElement(Box, {
+    pb: 2
+  })));
+};
+export default ClassSelectionMenu;

package/Crosshairs/index.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { Fragment, useEffect, useState } from "react";
+export var Crosshairs = function Crosshairs(_ref) {
+  var mousePosition = _ref.mousePosition,
+      x = _ref.x,
+      y = _ref.y;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      forceRenderState = _useState2[0],
+      changeForceRenderState = _useState2[1];
+
+  if (mousePosition) {
+    x = mousePosition.current.x;
+    y = mousePosition.current.y;
+  }
+
+  useEffect(function () {
+    if (!mousePosition) return;
+    var interval = setInterval(function () {
+      if (x !== mousePosition.current.x || y !== mousePosition.current.y) {
+        changeForceRenderState([mousePosition.current.x, mousePosition.current.y]);
+      }
+    }, 10);
+    return function () {
+      return clearInterval(interval);
+    };
+  });
+  return React.createElement(Fragment, null, React.createElement("div", {
+    style: {
+      position: "absolute",
+      height: "100%",
+      width: 1,
+      zIndex: 10,
+      backgroundColor: "#f00",
+      left: x,
+      pointerEvents: "none",
+      top: 0
+    }
+  }), React.createElement("div", {
+    style: {
+      position: "absolute",
+      width: "100%",
+      zIndex: 10,
+      height: 1,
+      backgroundColor: "#f00",
+      top: y,
+      pointerEvents: "none",
+      left: 0
+    }
+  }));
+};
+export default Crosshairs;

package/DebugSidebarBox/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+export var DebugSidebarBox = function DebugSidebarBox(_ref) {
+  var state = _ref.state,
+      lastAction = _ref.lastAction;
+  var image = (state.images || [])[state.selectedImage];
+  var region = image ? (image.regions || []).filter(function (r) {
+    return r.highlighted;
+  }) : null;
+  return React.createElement(SidebarBoxContainer, {
+    title: "Debug",
+    icon: React.createElement("span", null),
+    expandedByDefault: true
+  }, React.createElement("div", {
+    style: {
+      padding: 4
+    }
+  }, React.createElement("div", null, React.createElement("b", null, "region"), ":"), React.createElement("pre", null, JSON.stringify(region, null, "  ")), React.createElement("div", null, React.createElement("b", null, "lastAction"), ":"), React.createElement("pre", null, JSON.stringify(lastAction, null, "  ")), React.createElement("div", null, React.createElement("b", null, "mode"), ":"), React.createElement("pre", null, JSON.stringify(state.mode, null, "  ")), React.createElement("div", null, React.createElement("b", null, "frame:")), React.createElement("pre", null, JSON.stringify(state.selectedImageFrameTime, null, "  "))));
+};
+export default DebugSidebarBox;