@searpent/react-image-annotate 2.0.0 → 2.0.3

package/{src/RegionSelectorSidebarBox → RegionSelectorSidebarBox}/styles.js

@@ -1,5 +1,4 @@
-import { grey, blue, orange, purple } from "@mui/material/colors"
-
+import { grey, blue, orange, purple } from "@mui/material/colors";
 export default {
   container: {
     fontSize: 11,
@@ -8,7 +7,7 @@ export default {
     "& .icon": {
       marginTop: 4,
       width: 16,
-      height: 16,
+      height: 16
     },
     "& .icon2": {
       opacity: 0.5,
@@ -17,23 +16,23 @@ export default {
       transition: "200ms opacity",
       "&:hover": {
         cursor: "pointer",
-        opacity: 1,
-      },
-    },
+        opacity: 1
+      }
+    }
   },
   row: {
     padding: 4,
     cursor: "pointer",
     "&.header:hover": {
-      backgroundColor: "#fff",
+      backgroundColor: "#fff"
     },
     "&.highlighted": {
-      backgroundColor: blue[100],
+      backgroundColor: blue[100]
     },
     "&:hover": {
       backgroundColor: blue[50],
-      color: grey[800],
-    },
+      color: grey[800]
+    }
   },
   chip: {
     display: "flex",
@@ -47,8 +46,8 @@ export default {
       borderRadius: 5,
       width: 10,
       height: 10,
-      marginRight: 4,
+      marginRight: 4
     },
-    "& .text": {},
-  },
-}
+    "& .text": {}
+  }
+};

package/RegionShapes/index.js

@@ -0,0 +1,274 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { memo } from "react";
+import colorAlpha from "color-alpha";
+
+function clamp(num, min, max) {
+  return num <= min ? min : num >= max ? max : num;
+}
+
+var RegionComponents = {
+  point: memo(function (_ref) {
+    var region = _ref.region,
+        iw = _ref.iw,
+        ih = _ref.ih;
+    return React.createElement("g", {
+      transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
+    }, React.createElement("path", {
+      d: "M0 8L8 0L0 -8L-8 0Z",
+      strokeWidth: 2,
+      stroke: region.color,
+      fill: "transparent"
+    }));
+  }),
+  line: memo(function (_ref2) {
+    var region = _ref2.region,
+        iw = _ref2.iw,
+        ih = _ref2.ih;
+    return React.createElement("g", {
+      transform: "translate(".concat(region.x1 * iw, " ").concat(region.y1 * ih, ")")
+    }, React.createElement("line", {
+      strokeWidth: 2,
+      x1: 0,
+      y1: 0,
+      x2: (region.x2 - region.x1) * iw,
+      y2: (region.y2 - region.y1) * ih,
+      stroke: colorAlpha(region.color, 0.75),
+      fill: colorAlpha(region.color, 0.25)
+    }));
+  }),
+  box: memo(function (_ref3) {
+    var region = _ref3.region,
+        iw = _ref3.iw,
+        ih = _ref3.ih;
+    return React.createElement("g", {
+      transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
+    }, React.createElement("rect", {
+      strokeWidth: 2,
+      x: 0,
+      y: 0,
+      width: Math.max(region.w * iw, 0),
+      height: Math.max(region.h * ih, 0),
+      stroke: colorAlpha(region.color, 0.75),
+      fill: colorAlpha(region.color, 0.25)
+    }));
+  }),
+  polygon: memo(function (_ref4) {
+    var region = _ref4.region,
+        iw = _ref4.iw,
+        ih = _ref4.ih,
+        fullSegmentationMode = _ref4.fullSegmentationMode;
+    var Component = region.open ? "polyline" : "polygon";
+    var alphaBase = fullSegmentationMode ? 0.5 : 1;
+    return React.createElement(Component, {
+      points: region.points.map(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+            x = _ref6[0],
+            y = _ref6[1];
+
+        return [x * iw, y * ih];
+      }).map(function (a) {
+        return a.join(" ");
+      }).join(" "),
+      strokeWidth: 2,
+      stroke: colorAlpha(region.color, 0.75),
+      fill: colorAlpha(region.color, 0.25)
+    });
+  }),
+  keypoints: function keypoints(_ref7) {
+    var region = _ref7.region,
+        iw = _ref7.iw,
+        ih = _ref7.ih,
+        keypointDefinitions = _ref7.keypointDefinitions;
+    var points = region.points,
+        keypointsDefinitionId = region.keypointsDefinitionId;
+
+    if (!keypointDefinitions[keypointsDefinitionId]) {
+      throw new Error("No definition for keypoint configuration \"".concat(keypointsDefinitionId, "\""));
+    }
+
+    var _keypointDefinitions$ = keypointDefinitions[keypointsDefinitionId],
+        landmarks = _keypointDefinitions$.landmarks,
+        connections = _keypointDefinitions$.connections;
+    return React.createElement("g", null, Object.entries(points).map(function (_ref8, i) {
+      var _ref9 = _slicedToArray(_ref8, 2),
+          keypointId = _ref9[0],
+          _ref9$ = _ref9[1],
+          x = _ref9$.x,
+          y = _ref9$.y;
+
+      return React.createElement("g", {
+        key: i,
+        transform: "translate(".concat(x * iw, " ").concat(y * ih, ")")
+      }, React.createElement("path", {
+        d: "M0 8L8 0L0 -8L-8 0Z",
+        strokeWidth: 2,
+        stroke: landmarks[keypointId].color,
+        fill: "transparent"
+      }));
+    }), connections.map(function (_ref10) {
+      var _ref11 = _slicedToArray(_ref10, 2),
+          kp1Id = _ref11[0],
+          kp2Id = _ref11[1];
+
+      var kp1 = points[kp1Id];
+      var kp2 = points[kp2Id];
+      var midPoint = {
+        x: (kp1.x + kp2.x) / 2,
+        y: (kp1.y + kp2.y) / 2
+      };
+      return React.createElement("g", {
+        key: "".concat(kp1.x, ",").concat(kp1.y, ".").concat(kp2.x, ",").concat(kp2.y)
+      }, React.createElement("line", {
+        x1: kp1.x * iw,
+        y1: kp1.y * ih,
+        x2: midPoint.x * iw,
+        y2: midPoint.y * ih,
+        strokeWidth: 2,
+        stroke: landmarks[kp1Id].color
+      }), React.createElement("line", {
+        x1: kp2.x * iw,
+        y1: kp2.y * ih,
+        x2: midPoint.x * iw,
+        y2: midPoint.y * ih,
+        strokeWidth: 2,
+        stroke: landmarks[kp2Id].color
+      }));
+    }));
+  },
+  "expanding-line": memo(function (_ref12) {
+    var region = _ref12.region,
+        iw = _ref12.iw,
+        ih = _ref12.ih;
+    var _region$expandingWidt = region.expandingWidth,
+        expandingWidth = _region$expandingWidt === void 0 ? 0.005 : _region$expandingWidt,
+        points = region.points;
+    expandingWidth = points.slice(-1)[0].width || expandingWidth;
+    var pointPairs = points.map(function (_ref13, i) {
+      var x = _ref13.x,
+          y = _ref13.y,
+          angle = _ref13.angle,
+          width = _ref13.width;
+
+      if (!angle) {
+        var n = points[clamp(i + 1, 0, points.length - 1)];
+        var p = points[clamp(i - 1, 0, 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 (_ref14) {
+      var _ref15 = _slicedToArray(_ref14, 2),
+          p1 = _ref15[0],
+          p2 = _ref15[1];
+
+      return p1;
+    });
+    var secondSection = pointPairs.map(function (_ref16) {
+      var _ref17 = _slicedToArray(_ref16, 2),
+          p1 = _ref17[0],
+          p2 = _ref17[1];
+
+      return p2;
+    }).asMutable();
+    secondSection.reverse();
+    var lastPoint = points.slice(-1)[0];
+    return React.createElement(React.Fragment, null, React.createElement("polygon", {
+      points: firstSection.concat(region.candidatePoint ? [region.candidatePoint] : []).concat(secondSection).map(function (p) {
+        return "".concat(p.x * iw, " ").concat(p.y * ih);
+      }).join(" "),
+      strokeWidth: 2,
+      stroke: colorAlpha(region.color, 0.75),
+      fill: colorAlpha(region.color, 0.25)
+    }), points.map(function (_ref18, i) {
+      var x = _ref18.x,
+          y = _ref18.y,
+          angle = _ref18.angle;
+      return React.createElement("g", {
+        key: i,
+        transform: "translate(".concat(x * iw, " ").concat(y * ih, ") rotate(").concat(-(angle || 0) * 180 / Math.PI, ")")
+      }, React.createElement("g", null, React.createElement("rect", {
+        x: -5,
+        y: -5,
+        width: 10,
+        height: 10,
+        strokeWidth: 2,
+        stroke: colorAlpha(region.color, 0.75),
+        fill: colorAlpha(region.color, 0.25)
+      })));
+    }), React.createElement("rect", {
+      x: lastPoint.x * iw - 8,
+      y: lastPoint.y * ih - 8,
+      width: 16,
+      height: 16,
+      strokeWidth: 4,
+      stroke: colorAlpha(region.color, 0.5),
+      fill: "transparent"
+    }));
+  }),
+  pixel: function pixel() {
+    return null;
+  }
+};
+export var WrappedRegionList = memo(function (_ref19) {
+  var regions = _ref19.regions,
+      keypointDefinitions = _ref19.keypointDefinitions,
+      iw = _ref19.iw,
+      ih = _ref19.ih,
+      fullSegmentationMode = _ref19.fullSegmentationMode;
+  return regions.filter(function (r) {
+    return r.visible !== false;
+  }).map(function (r) {
+    var Component = RegionComponents[r.type];
+    return React.createElement(Component, {
+      key: r.regionId,
+      region: r,
+      iw: iw,
+      ih: ih,
+      keypointDefinitions: keypointDefinitions,
+      fullSegmentationMode: fullSegmentationMode
+    });
+  });
+}, function (n, p) {
+  return n.regions === p.regions && n.iw === p.iw && n.ih === p.ih;
+});
+export var RegionShapes = function RegionShapes(_ref20) {
+  var mat = _ref20.mat,
+      imagePosition = _ref20.imagePosition,
+      _ref20$regions = _ref20.regions,
+      regions = _ref20$regions === void 0 ? [] : _ref20$regions,
+      keypointDefinitions = _ref20.keypointDefinitions,
+      fullSegmentationMode = _ref20.fullSegmentationMode;
+  var iw = imagePosition.bottomRight.x - imagePosition.topLeft.x;
+  var ih = imagePosition.bottomRight.y - imagePosition.topLeft.y;
+  if (isNaN(iw) || isNaN(ih)) return null;
+  return React.createElement("svg", {
+    width: iw,
+    height: ih,
+    style: {
+      position: "absolute",
+      zIndex: 2,
+      left: imagePosition.topLeft.x,
+      top: imagePosition.topLeft.y,
+      pointerEvents: "none",
+      width: iw,
+      height: ih
+    }
+  }, React.createElement(WrappedRegionList, {
+    key: "wrapped-region-list",
+    regions: regions,
+    iw: iw,
+    ih: ih,
+    keypointDefinitions: keypointDefinitions,
+    fullSegmentationMode: fullSegmentationMode
+  }));
+};
+export default RegionShapes;

package/RegionTags/index.js

@@ -0,0 +1,138 @@
+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;
+  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
+    })));
+  });
+};
+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,53 @@
+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;
+
+  var _useState = useState(function () {
+    return pullSettingsFromLocalStorage();
+  }),
+      _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;