@searpent/react-image-annotate 2.0.5 → 2.0.8

package/Annotator/index.js

@@ -0,0 +1,268 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useReducer } from "react";
+import makeImmutable, { without } from "seamless-immutable";
+import MainLayout from "../MainLayout";
+import SettingsProvider from "../SettingsProvider";
+import combineReducers from "./reducers/combine-reducers.js";
+import generalReducer from "./reducers/general-reducer.js";
+import getFromLocalStorage from "../utils/get-from-local-storage";
+import historyHandler from "./reducers/history-handler.js";
+import imageReducer from "./reducers/image-reducer.js";
+import useEventCallback from "use-event-callback";
+import videoReducer from "./reducers/video-reducer.js";
+export var Annotator = function Annotator(_ref) {
+  var images = _ref.images,
+      allowedArea = _ref.allowedArea,
+      _ref$selectedImage = _ref.selectedImage,
+      selectedImage = _ref$selectedImage === void 0 ? images && images.length > 0 ? 0 : undefined : _ref$selectedImage,
+      showPointDistances = _ref.showPointDistances,
+      pointDistancePrecision = _ref.pointDistancePrecision,
+      _ref$showTags = _ref.showTags,
+      showTags = _ref$showTags === void 0 ? getFromLocalStorage("showTags", true) : _ref$showTags,
+      _ref$enabledTools = _ref.enabledTools,
+      enabledTools = _ref$enabledTools === void 0 ? ["select", "create-point", "create-box", "create-polygon", "create-line", "create-expanding-line", "show-mask"] : _ref$enabledTools,
+      _ref$selectedTool = _ref.selectedTool,
+      selectedTool = _ref$selectedTool === void 0 ? "select" : _ref$selectedTool,
+      _ref$regionTagList = _ref.regionTagList,
+      regionTagList = _ref$regionTagList === void 0 ? [] : _ref$regionTagList,
+      _ref$regionClsList = _ref.regionClsList,
+      regionClsList = _ref$regionClsList === void 0 ? [] : _ref$regionClsList,
+      _ref$imageTagList = _ref.imageTagList,
+      imageTagList = _ref$imageTagList === void 0 ? [] : _ref$imageTagList,
+      _ref$imageClsList = _ref.imageClsList,
+      imageClsList = _ref$imageClsList === void 0 ? [] : _ref$imageClsList,
+      _ref$keyframes = _ref.keyframes,
+      keyframes = _ref$keyframes === void 0 ? {} : _ref$keyframes,
+      _ref$taskDescription = _ref.taskDescription,
+      taskDescription = _ref$taskDescription === void 0 ? "" : _ref$taskDescription,
+      _ref$fullImageSegment = _ref.fullImageSegmentationMode,
+      fullImageSegmentationMode = _ref$fullImageSegment === void 0 ? false : _ref$fullImageSegment,
+      RegionEditLabel = _ref.RegionEditLabel,
+      videoSrc = _ref.videoSrc,
+      _ref$videoTime = _ref.videoTime,
+      videoTime = _ref$videoTime === void 0 ? 0 : _ref$videoTime,
+      videoName = _ref.videoName,
+      onExit = _ref.onExit,
+      onNextImage = _ref.onNextImage,
+      onPrevImage = _ref.onPrevImage,
+      keypointDefinitions = _ref.keypointDefinitions,
+      _ref$autoSegmentation = _ref.autoSegmentationOptions,
+      autoSegmentationOptions = _ref$autoSegmentation === void 0 ? {
+    type: "autoseg"
+  } : _ref$autoSegmentation,
+      hideHeader = _ref.hideHeader,
+      hideHeaderText = _ref.hideHeaderText,
+      hideNext = _ref.hideNext,
+      hidePrev = _ref.hidePrev,
+      hideClone = _ref.hideClone,
+      hideSettings = _ref.hideSettings,
+      hideFullScreen = _ref.hideFullScreen,
+      hideSave = _ref.hideSave,
+      allowComments = _ref.allowComments,
+      onImagesChange = _ref.onImagesChange,
+      groups = _ref.groups,
+      onGroupSelect = _ref.onGroupSelect,
+      hideHistory = _ref.hideHistory,
+      hideNotEditingLabel = _ref.hideNotEditingLabel,
+      showEditor = _ref.showEditor,
+      showPageSelector = _ref.showPageSelector,
+      clsColors = _ref.clsColors,
+      groupColors = _ref.groupColors,
+      onRecalc = _ref.onRecalc,
+      onSave = _ref.onSave,
+      allowedGroups = _ref.allowedGroups,
+      metadata = _ref.metadata;
+
+  if (typeof selectedImage === "string") {
+    selectedImage = (images || []).findIndex(function (img) {
+      return img.src === selectedImage;
+    });
+    if (selectedImage === -1) selectedImage = undefined;
+  }
+
+  var annotationType = images ? "image" : "video";
+
+  var _useReducer = useReducer(historyHandler(combineReducers(annotationType === "image" ? imageReducer : videoReducer, generalReducer)), makeImmutable(_objectSpread({
+    annotationType: annotationType,
+    showTags: showTags,
+    allowedArea: allowedArea,
+    showPointDistances: showPointDistances,
+    pointDistancePrecision: pointDistancePrecision,
+    selectedTool: selectedTool,
+    fullImageSegmentationMode: fullImageSegmentationMode,
+    autoSegmentationOptions: autoSegmentationOptions,
+    mode: null,
+    taskDescription: taskDescription,
+    showMask: true,
+    labelImages: imageClsList.length > 0 || imageTagList.length > 0,
+    regionClsList: regionClsList,
+    regionTagList: regionTagList,
+    imageClsList: imageClsList,
+    imageTagList: imageTagList,
+    currentVideoTime: videoTime,
+    enabledTools: enabledTools,
+    history: [],
+    videoName: videoName,
+    keypointDefinitions: keypointDefinitions,
+    allowComments: allowComments
+  }, annotationType === "image" ? {
+    selectedImage: selectedImage,
+    images: images,
+    selectedImageFrameTime: images && images.length > 0 ? images[0].frameTime : undefined
+  } : {
+    videoSrc: videoSrc,
+    keyframes: keyframes
+  }, {
+    imagesUpdatedAt: null,
+    imagesSavedAt: null,
+    metadata: metadata
+  }))),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatchToReducer = _useReducer2[1];
+
+  var dispatch = useEventCallback(function (action) {
+    if (action.type === "HEADER_BUTTON_CLICKED") {
+      if (["Exit", "Done", "Save", "Complete"].includes(action.buttonName)) {
+        return onExit(without(state, "history"));
+      } else if (action.buttonName === "Next" && onNextImage) {
+        return onNextImage(without(state, "history"));
+      } else if (action.buttonName === "Prev" && onPrevImage) {
+        return onPrevImage(without(state, "history"));
+      }
+    }
+
+    dispatchToReducer(action);
+  });
+  var onRegionClassAdded = useEventCallback(function (cls) {
+    dispatchToReducer({
+      type: "ON_CLS_ADDED",
+      cls: cls
+    });
+  });
+
+  var handleSaveClick =
+  /*#__PURE__*/
+  function () {
+    var _ref2 = _asyncToGenerator(
+    /*#__PURE__*/
+    _regeneratorRuntime.mark(function _callee(e) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+
+              if (!onSave) {
+                _context.next = 5;
+                break;
+              }
+
+              _context.next = 4;
+              return onSave(state.images);
+
+            case 4:
+              dispatchToReducer({
+                type: "IMAGES_SAVED",
+                savedAt: new Date()
+              });
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleSaveClick(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var handleRecalcClick = function handleRecalcClick(e) {
+    e.preventDefault();
+
+    if (onRecalc) {
+      onRecalc();
+    }
+  };
+
+  var handleMetadataChange = function handleMetadataChange(_ref3) {
+    var name = _ref3.name,
+        value = _ref3.value,
+        imageIndex = _ref3.imageIndex;
+    dispatchToReducer({
+      type: "UPDATE_METADATA",
+      name: name,
+      value: value,
+      imageIndex: imageIndex
+    });
+  }; // trigger this on every BBox manipulation (there is currently no way to detect adding of new box!)
+
+
+  useEffect(function () {
+    if (!state.lastAction || !["BEGIN_BOX_TRANSFORM", "CHANGE_REGION", "DELETE_REGION"].includes(state.lastAction.type)) {
+      return;
+    }
+
+    if (onImagesChange) {
+      onImagesChange(state.images);
+    }
+
+    dispatchToReducer({
+      type: "IMAGES_UPDATED",
+      updatedAt: new Date()
+    });
+  }, [onImagesChange, state.images, state.lastAction]);
+  useEffect(function () {
+    if (selectedImage === undefined) return;
+    dispatchToReducer({
+      type: "SELECT_IMAGE",
+      imageIndex: selectedImage,
+      image: state.images[selectedImage]
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onImagesChange, selectedImage]);
+  if (!images && !videoSrc) return 'Missing required prop "images" or "videoSrc"';
+
+  var _ref4 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
+      _ref5 = _slicedToArray(_ref4, 2),
+      recalcActive = _ref5[0],
+      saveActive = _ref5[1];
+
+  return React.createElement(SettingsProvider, {
+    clsColors: clsColors,
+    groupColors: groupColors
+  }, React.createElement(MainLayout, {
+    RegionEditLabel: RegionEditLabel,
+    alwaysShowNextButton: Boolean(onNextImage),
+    alwaysShowPrevButton: Boolean(onPrevImage),
+    state: state,
+    dispatch: dispatch,
+    onRegionClassAdded: onRegionClassAdded,
+    hideHeader: hideHeader,
+    hideHeaderText: hideHeaderText,
+    hideNext: hideNext,
+    hidePrev: hidePrev,
+    hideClone: hideClone,
+    hideSettings: hideSettings,
+    hideFullScreen: hideFullScreen,
+    hideSave: hideSave,
+    groups: groups,
+    onGroupSelect: onGroupSelect,
+    hideHistory: hideHistory,
+    hideNotEditingLabel: hideNotEditingLabel,
+    showEditor: showEditor,
+    showPageSelector: showPageSelector,
+    onRecalc: handleRecalcClick,
+    onSave: handleSaveClick,
+    saveActive: recalcActive,
+    recalcActive: saveActive,
+    allowedGroups: allowedGroups,
+    onMetadataChange: handleMetadataChange
+  }));
+};
+export default Annotator;

package/Annotator/reducers/combine-reducers.js

@@ -0,0 +1,14 @@
+export default (function () {
+  for (var _len = arguments.length, reducers = new Array(_len), _key = 0; _key < _len; _key++) {
+    reducers[_key] = arguments[_key];
+  }
+
+  return function (state, action) {
+    for (var _i = 0, _reducers = reducers; _i < _reducers.length; _i++) {
+      var reducer = _reducers[_i];
+      state = reducer(state, action);
+    }
+
+    return state;
+  };
+});

package/Annotator/reducers/convert-expanding-line-to-polygon.js

@@ -0,0 +1,73 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+function clamp(num, min, max) {
+  return num <= min ? min : num >= max ? max : num;
+}
+
+export default (function (expandingLine) {
+  var expandingWidth = expandingLine.expandingWidth || 0.005;
+  var pointPairs = expandingLine.points.map(function (_ref, i) {
+    var x = _ref.x,
+        y = _ref.y,
+        angle = _ref.angle,
+        width = _ref.width;
+
+    if (!angle) {
+      var n = expandingLine.points[clamp(i + 1, 0, expandingLine.points.length - 1)];
+      var p = expandingLine.points[clamp(i - 1, 0, expandingLine.points.length - 1)];
+      angle = Math.atan2(p.x - n.x, p.y - n.y) + Math.PI / 2;
+    }
+
+    var dx = Math.sin(angle) * (width || expandingWidth) / 2;
+    var dy = Math.cos(angle) * (width || expandingWidth) / 2;
+    return [{
+      x: x + dx,
+      y: y + dy
+    }, {
+      x: x - dx,
+      y: y - dy
+    }];
+  });
+  var firstSection = pointPairs.map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+        p1 = _ref3[0],
+        p2 = _ref3[1];
+
+    return p1;
+  });
+  var secondSection = pointPairs.map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        p1 = _ref5[0],
+        p2 = _ref5[1];
+
+    return p2;
+  }).asMutable();
+  secondSection.reverse();
+  var newPoints = firstSection.concat(secondSection).map(function (_ref6) {
+    var x = _ref6.x,
+        y = _ref6.y;
+    return [x, y];
+  });
+  return _objectSpread({}, expandingLine, {
+    type: "polygon",
+    open: false,
+    points: newPoints,
+    unfinished: undefined,
+    candidatePoint: undefined // let { expandingWidth = 0.005, points } = region
+    // expandingWidth = points.slice(-1)[0].width || expandingWidth
+    // const lastPoint = points.slice(-1)[0]
+    // return (
+    //   <>
+    //     <polygon
+    //       points={
+    //         .map((p) => `${p.x * iw} ${p.y * ih}`)
+    //         .join(" ")}
+    // return {
+    //   ...expandingLine,
+    //   unfinished: undefined,
+    //   candidatePoint: undefined,
+    // }
+
+  });
+});

package/{src/Annotator → Annotator}/reducers/fix-twisted.js

@@ -1,6 +1,4 @@
-// @flow
-
-export default (pointsWithAngles) => {
+export default (function (pointsWithAngles) {
   // Adjacent angles should not have an angular distance of more than Math.PI
-  return pointsWithAngles
-}
+  return pointsWithAngles;
+});