@searpent/react-image-annotate 2.0.5 → 2.0.8

package/PageSelector/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import classnames from "classnames";
+
+require('./page-selector.css').toString();
+
+function PageThumbnail(_ref) {
+  var src = _ref.src,
+      isActive = _ref.isActive,
+      onClick = _ref.onClick,
+      pageNumber = _ref.pageNumber;
+  return React.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    className: classnames('page-thumbnail', {
+      'page-thumbnail-is-active': isActive
+    }),
+    onClick: onClick
+  }, React.createElement("img", {
+    src: src,
+    alt: ""
+  }), pageNumber !== undefined && React.createElement("div", {
+    className: "page-number-wrapper"
+  }, React.createElement("span", {
+    className: "page-number"
+  }, pageNumber)));
+}
+
+function PagesSelector(_ref2) {
+  var pages = _ref2.pages,
+      onPageClick = _ref2.onPageClick,
+      onRecalc = _ref2.onRecalc,
+      onSave = _ref2.onSave,
+      recalcActive = _ref2.recalcActive,
+      saveActive = _ref2.saveActive;
+  return React.createElement("div", {
+    className: "page-selector"
+  }, React.createElement("div", {
+    className: "bottom-buttons"
+  }, React.createElement("button", {
+    onClick: onRecalc,
+    disabled: !recalcActive,
+    className: "info"
+  }, "Recalc"), React.createElement("button", {
+    onClick: onSave,
+    disabled: !saveActive,
+    className: "success"
+  }, "Save")), React.createElement("div", {
+    className: "pages"
+  }, pages.map(function (page, idx) {
+    return React.createElement(PageThumbnail, {
+      key: page.id,
+      src: page.src,
+      isActive: page.isActive,
+      onClick: function onClick() {
+        return onPageClick(idx);
+      }
+    });
+  })));
+}
+
+PagesSelector.defaultProps = {
+  onPageClick: function onPageClick() {},
+  onRecalc: function onRecalc() {},
+  onSave: function onSave() {},
+  recalcActive: false,
+  saveActive: false,
+  pageNumber: undefined
+};
+export default PagesSelector;

package/{src/PageSelector → PageSelector}/page-selector.css

@@ -50,6 +50,24 @@
   width: 100%;
 }
 
+.bottom-buttons button.info {
+  background-color: transparent;
+  border-radius: 0.5rem;
+  background-image: linear-gradient(310deg, #627594, #a8b8d8);
+  color: white;
+  border: none;
+  padding: 0.5rem 0;
+}
+
+.bottom-buttons button.success {
+  color: white;
+  background-image: linear-gradient(310deg, #2dce89, #2dcecc);
+  border-radius: 0.5rem;
+  border: none;
+  padding: 0.5rem 0;
+}
+
+
 .page-number-wrapper {
   position: absolute;
   bottom: 0;

package/PointDistances/index.js

@@ -0,0 +1,73 @@
+import React, { Fragment } from "react";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+var theme = createTheme();
+var Svg = styled("svg")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    pointerEvents: "none",
+    position: "absolute",
+    zIndex: 1,
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    "& text": {
+      fill: "#fff"
+    },
+    "& path": {
+      vectorEffect: "non-scaling-stroke",
+      strokeWidth: 2,
+      opacity: 0.5,
+      stroke: "#FFF",
+      fill: "none",
+      strokeDasharray: 5,
+      animationDuration: "4s",
+      animationTimingFunction: "linear",
+      animationIterationCount: "infinite",
+      animationPlayState: "running"
+    }
+  };
+});
+export var PointDistances = function PointDistances(_ref2) {
+  var projectRegionBox = _ref2.projectRegionBox,
+      regions = _ref2.regions,
+      pointDistancePrecision = _ref2.pointDistancePrecision,
+      realSize = _ref2.realSize;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(Svg, null, regions.filter(function (r1) {
+    return r1.type === "point";
+  }).flatMap(function (r1, i1) {
+    return regions.filter(function (r2, i2) {
+      return i2 > i1;
+    }).filter(function (r2) {
+      return r2.type === "point";
+    }).map(function (r2) {
+      var pr1 = projectRegionBox(r1);
+      var pr2 = projectRegionBox(r2);
+      var prm = {
+        x: (pr1.x + pr1.w / 2 + pr2.x + pr2.w / 2) / 2,
+        y: (pr1.y + pr1.h / 2 + pr2.y + pr2.h / 2) / 2
+      };
+      var displayDistance;
+
+      if (realSize) {
+        var w = realSize.w,
+            h = realSize.h,
+            unitName = realSize.unitName;
+        displayDistance = Math.sqrt(Math.pow(r1.x * w - r2.x * w, 2) + Math.pow(r1.y * h - r2.y * h, 2)).toFixed(pointDistancePrecision) + unitName;
+      } else {
+        displayDistance = (Math.sqrt(Math.pow(r1.x - r2.x, 2) + Math.pow(r1.y - r2.y, 2)) * 100).toFixed(pointDistancePrecision) + "%";
+      }
+
+      return React.createElement(Fragment, null, React.createElement("path", {
+        d: "M".concat(pr1.x + pr1.w / 2, ",").concat(pr1.y + pr1.h / 2, " L").concat(pr2.x + pr2.w / 2, ",").concat(pr2.y + pr2.h / 2)
+      }), React.createElement("text", {
+        x: prm.x,
+        y: prm.y
+      }, displayDistance));
+    });
+  })));
+};
+export default PointDistances;

package/PreventScrollToParents/index.js

@@ -0,0 +1,51 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import React, { useState } from "react";
+import { RemoveScroll } from "react-remove-scroll";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import useEventCallback from "use-event-callback";
+var theme = createTheme();
+var Container = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    "& > div": {
+      width: "100%",
+      height: "100%"
+    }
+  };
+});
+export var PreventScrollToParents = function PreventScrollToParents(_ref2) {
+  var children = _ref2.children,
+      otherProps = _objectWithoutProperties(_ref2, ["children"]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      mouseOver = _useState2[0],
+      changeMouseOver = _useState2[1];
+
+  var onMouseMove = useEventCallback(function (e) {
+    if (!mouseOver) changeMouseOver(true);
+
+    if (otherProps.onMouseMove) {
+      otherProps.onMouseMove(e);
+    }
+  });
+  var onMouseLeave = useEventCallback(function (e) {
+    setTimeout(function () {
+      if (mouseOver) {
+        changeMouseOver(false);
+      }
+    }, 100);
+  });
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(Container, Object.assign({}, otherProps, {
+    onMouseMove: onMouseMove,
+    onMouseLeave: onMouseLeave
+  }), React.createElement(RemoveScroll, {
+    enabled: mouseOver,
+    removeScrollBar: false
+  }, children)));
+};
+export default PreventScrollToParents;

package/RegionLabel/index.js

@@ -0,0 +1,205 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import React, { useRef, memo } from "react";
+import Paper from "@mui/material/Paper";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import styles from "./styles";
+import classnames from "classnames";
+import IconButton from "@mui/material/IconButton";
+import Button from "@mui/material/Button";
+import TrashIcon from "@mui/icons-material/Delete";
+import CheckIcon from "@mui/icons-material/Check";
+import TextField from "@mui/material/TextField";
+import Select from "react-select";
+import CreatableSelect from "react-select/creatable";
+import { asMutable } from "seamless-immutable";
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return styles;
+});
+export var RegionLabel = function RegionLabel(_ref) {
+  var region = _ref.region,
+      editing = _ref.editing,
+      allowedClasses = _ref.allowedClasses,
+      allowedTags = _ref.allowedTags,
+      onDelete = _ref.onDelete,
+      _onChange = _ref.onChange,
+      onClose = _ref.onClose,
+      onOpen = _ref.onOpen,
+      onRegionClassAdded = _ref.onRegionClassAdded,
+      allowComments = _ref.allowComments,
+      hideNotEditingLabel = _ref.hideNotEditingLabel,
+      allowedGroups = _ref.allowedGroups;
+  var classes = useStyles();
+  var commentInputRef = useRef(null);
+
+  var onCommentInputClick = function onCommentInputClick(_) {
+    // The TextField wraps the <input> tag with two divs
+    var commentInput = commentInputRef.current.children[0].children[0];
+    if (commentInput) return commentInput.focus();
+  };
+
+  if (hideNotEditingLabel && !editing) return null;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(Paper, {
+    onClick: function onClick() {
+      return !editing ? onOpen(region) : null;
+    },
+    className: classnames(classes.regionInfo, {
+      highlighted: region.highlighted
+    })
+  }, !editing ? React.createElement("div", null, region.cls && React.createElement("div", {
+    className: "name"
+  }, React.createElement("div", {
+    className: "circle",
+    style: {
+      backgroundColor: region.color
+    }
+  }), region.cls), region.tags && React.createElement("div", {
+    className: "tags"
+  }, region.tags.map(function (t) {
+    return React.createElement("div", {
+      key: t,
+      className: "tag"
+    }, t);
+  }))) : React.createElement("div", {
+    style: {
+      width: 200
+    }
+  }, React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "row"
+    }
+  }, React.createElement("div", {
+    style: {
+      display: "flex",
+      backgroundColor: region.color || "#888",
+      color: "#fff",
+      padding: 4,
+      paddingLeft: 8,
+      paddingRight: 8,
+      borderRadius: 4,
+      fontWeight: "bold",
+      textShadow: "0px 0px 5px rgba(0,0,0,0.4)"
+    }
+  }, region.type), React.createElement("div", {
+    style: {
+      flexGrow: 1
+    }
+  }), React.createElement(IconButton, {
+    onClick: function onClick() {
+      return onDelete(region);
+    },
+    tabIndex: -1,
+    style: {
+      width: 22,
+      height: 22
+    },
+    size: "small",
+    variant: "outlined"
+  }, React.createElement(TrashIcon, {
+    style: {
+      marginTop: -8,
+      width: 16,
+      height: 16
+    }
+  }))), (allowedClasses || []).length > 0 && React.createElement("div", {
+    style: {
+      marginTop: 6
+    }
+  }, React.createElement(CreatableSelect, {
+    placeholder: "Classification",
+    onChange: function onChange(o, actionMeta) {
+      if (actionMeta.action == "create-option") {
+        onRegionClassAdded(o.value);
+      }
+
+      return _onChange(_objectSpread({}, region, {
+        cls: o.value
+      }));
+    },
+    value: region.cls ? {
+      label: region.cls,
+      value: region.cls
+    } : null,
+    options: asMutable(allowedClasses.map(function (c) {
+      return {
+        value: c,
+        label: c
+      };
+    }))
+  })), (allowedGroups || []).length > 0 && React.createElement(Select, {
+    onChange: function onChange(newGroup) {
+      return _onChange(_objectSpread({}, region, {
+        groupId: newGroup.value
+      }));
+    },
+    placeholder: "Group",
+    value: allowedGroups.filter(function (g) {
+      return g.value === region.groupId;
+    }),
+    options: allowedGroups
+  }), (allowedTags || []).length > 0 && React.createElement("div", {
+    style: {
+      marginTop: 4
+    }
+  }, React.createElement(Select, {
+    onChange: function onChange(newTags) {
+      return _onChange(_objectSpread({}, region, {
+        tags: newTags.map(function (t) {
+          return t.value;
+        })
+      }));
+    },
+    placeholder: "Tags",
+    value: (region.tags || []).map(function (c) {
+      return {
+        label: c,
+        value: c
+      };
+    }),
+    isMulti: true,
+    options: asMutable(allowedTags.map(function (c) {
+      return {
+        value: c,
+        label: c
+      };
+    }))
+  })), allowComments && React.createElement(TextField, {
+    InputProps: {
+      className: classes.commentBox
+    },
+    fullWidth: true,
+    multiline: true,
+    rows: 3,
+    ref: commentInputRef,
+    onClick: onCommentInputClick,
+    value: region.comment || "",
+    onChange: function onChange(event) {
+      return _onChange(_objectSpread({}, region, {
+        comment: event.target.value
+      }));
+    }
+  }), onClose && React.createElement("div", {
+    style: {
+      marginTop: 4,
+      display: "flex"
+    }
+  }, React.createElement("div", {
+    style: {
+      flexGrow: 1
+    }
+  }), React.createElement(Button, {
+    onClick: function onClick() {
+      return onClose(region);
+    },
+    size: "small",
+    variant: "contained",
+    color: "primary"
+  }, React.createElement(CheckIcon, null))))));
+};
+export default memo(RegionLabel, function (prevProps, nextProps) {
+  return prevProps.editing === nextProps.editing && prevProps.region === nextProps.region;
+});

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

@@ -1,7 +1,4 @@
-// @flow
-
-import { grey } from "@mui/material/colors"
-
+import { grey } from "@mui/material/colors";
 export default {
   regionInfo: {
     fontSize: 12,
@@ -10,13 +7,13 @@ export default {
     opacity: 0.5,
     "&:hover": {
       opacity: 0.9,
-      cursor: "pointer",
+      cursor: "pointer"
     },
     "&.highlighted": {
       opacity: 0.9,
       "&:hover": {
-        opacity: 1,
-      },
+        opacity: 1
+      }
     },
     // pointerEvents: "none",
     fontWeight: 600,
@@ -31,8 +28,8 @@ export default {
         boxShadow: "0px 0px 2px rgba(0,0,0,0.4)",
         width: 10,
         height: 10,
-        borderRadius: 5,
-      },
+        borderRadius: 5
+      }
     },
     "& .tags": {
       "& .tag": {
@@ -40,12 +37,12 @@ export default {
         display: "inline-block",
         margin: 1,
         fontSize: 10,
-        textDecoration: "underline",
-      },
-    },
+        textDecoration: "underline"
+      }
+    }
   },
   commentBox: {
     fontWeight: 400,
-    fontSize: 13,
-  },
-}
+    fontSize: 13
+  }
+};

package/RegionSelectAndTransformBoxes/index.js

@@ -0,0 +1,167 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { Fragment, memo } from "react";
+import HighlightBox from "../HighlightBox";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import PreventScrollToParents from "../PreventScrollToParents";
+import Tooltip from "@mui/material/Tooltip";
+var theme = createTheme();
+var TransformGrabber = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    width: 8,
+    height: 8,
+    zIndex: 2,
+    border: "2px solid #FFF",
+    position: "absolute"
+  };
+});
+var boxCursorMap = [["nw-resize", "n-resize", "ne-resize"], ["w-resize", "grab", "e-resize"], ["sw-resize", "s-resize", "se-resize"]];
+
+var arePropsEqual = function arePropsEqual(prev, next) {
+  return prev.region === next.region && prev.dragWithPrimary === next.dragWithPrimary && prev.createWithPrimary === next.createWithPrimary && prev.zoomWithPrimary === next.zoomWithPrimary && prev.mat === next.mat;
+};
+
+export var RegionSelectAndTransformBox = memo(function (_ref2) {
+  var r = _ref2.region,
+      mouseEvents = _ref2.mouseEvents,
+      projectRegionBox = _ref2.projectRegionBox,
+      dragWithPrimary = _ref2.dragWithPrimary,
+      createWithPrimary = _ref2.createWithPrimary,
+      zoomWithPrimary = _ref2.zoomWithPrimary,
+      onBeginMovePoint = _ref2.onBeginMovePoint,
+      onSelectRegion = _ref2.onSelectRegion,
+      layoutParams = _ref2.layoutParams,
+      _ref2$fullImageSegmen = _ref2.fullImageSegmentationMode,
+      fullImageSegmentationMode = _ref2$fullImageSegmen === void 0 ? false : _ref2$fullImageSegmen,
+      mat = _ref2.mat,
+      onBeginBoxTransform = _ref2.onBeginBoxTransform,
+      onBeginMovePolygonPoint = _ref2.onBeginMovePolygonPoint,
+      onBeginMoveKeypoint = _ref2.onBeginMoveKeypoint,
+      onAddPolygonPoint = _ref2.onAddPolygonPoint,
+      showHighlightBox = _ref2.showHighlightBox;
+  var pbox = projectRegionBox(r);
+  var _layoutParams$current = layoutParams.current,
+      iw = _layoutParams$current.iw,
+      ih = _layoutParams$current.ih;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(Fragment, null, React.createElement(PreventScrollToParents, null, showHighlightBox && r.type !== "polygon" && React.createElement(HighlightBox, {
+    region: r,
+    mouseEvents: mouseEvents,
+    dragWithPrimary: dragWithPrimary,
+    createWithPrimary: createWithPrimary,
+    zoomWithPrimary: zoomWithPrimary,
+    onBeginMovePoint: onBeginMovePoint,
+    onSelectRegion: onSelectRegion,
+    pbox: pbox
+  }), r.type === "box" && !dragWithPrimary && !zoomWithPrimary && !r.locked && r.highlighted && mat.a < 1.2 && [[0, 0], [0.5, 0], [1, 0], [1, 0.5], [1, 1], [0.5, 1], [0, 1], [0, 0.5], [0.5, 0.5]].map(function (_ref3, i) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        px = _ref4[0],
+        py = _ref4[1];
+
+    return React.createElement(TransformGrabber, Object.assign({
+      key: i
+    }, mouseEvents, {
+      onMouseDown: function onMouseDown(e) {
+        if (e.button === 0) return onBeginBoxTransform(r, [px * 2 - 1, py * 2 - 1]);
+        mouseEvents.onMouseDown(e);
+      },
+      style: {
+        left: pbox.x - 4 - 2 + pbox.w * px,
+        top: pbox.y - 4 - 2 + pbox.h * py,
+        cursor: boxCursorMap[py * 2][px * 2],
+        borderRadius: px === 0.5 && py === 0.5 ? 4 : undefined
+      }
+    }));
+  }), r.type === "polygon" && !dragWithPrimary && !zoomWithPrimary && !r.locked && r.highlighted && r.points.map(function (_ref5, i) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+        px = _ref6[0],
+        py = _ref6[1];
+
+    var proj = mat.clone().inverse().applyToPoint(px * iw, py * ih);
+    return React.createElement(TransformGrabber, Object.assign({
+      key: i
+    }, mouseEvents, {
+      onMouseDown: function onMouseDown(e) {
+        if (e.button === 0 && (!r.open || i === 0)) return onBeginMovePolygonPoint(r, i);
+        mouseEvents.onMouseDown(e);
+      },
+      style: {
+        cursor: !r.open ? "move" : i === 0 ? "pointer" : undefined,
+        zIndex: 10,
+        pointerEvents: r.open && i === r.points.length - 1 ? "none" : undefined,
+        left: proj.x - 4,
+        top: proj.y - 4
+      }
+    }));
+  }), r.type === "polygon" && r.highlighted && !dragWithPrimary && !zoomWithPrimary && !r.locked && !r.open && r.points.length > 1 && r.points.map(function (p1, i) {
+    return [p1, r.points[(i + 1) % r.points.length]];
+  }).map(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+        p1 = _ref8[0],
+        p2 = _ref8[1];
+
+    return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
+  }).map(function (pa, i) {
+    var proj = mat.clone().inverse().applyToPoint(pa[0] * iw, pa[1] * ih);
+    return React.createElement(TransformGrabber, Object.assign({
+      key: i
+    }, mouseEvents, {
+      onMouseDown: function onMouseDown(e) {
+        if (e.button === 0) return onAddPolygonPoint(r, pa, i + 1);
+        mouseEvents.onMouseDown(e);
+      },
+      style: {
+        cursor: "copy",
+        zIndex: 10,
+        left: proj.x - 4,
+        top: proj.y - 4,
+        border: "2px dotted #fff",
+        opacity: 0.5
+      }
+    }));
+  }), r.type === "keypoints" && !dragWithPrimary && !zoomWithPrimary && !r.locked && r.highlighted && Object.entries(r.points).map(function (_ref9, i) {
+    var _ref10 = _slicedToArray(_ref9, 2),
+        keypointId = _ref10[0],
+        _ref10$ = _ref10[1],
+        px = _ref10$.x,
+        py = _ref10$.y;
+
+    var proj = mat.clone().inverse().applyToPoint(px * iw, py * ih);
+    return React.createElement(Tooltip, {
+      title: keypointId,
+      key: i
+    }, React.createElement(TransformGrabber, Object.assign({
+      key: i
+    }, mouseEvents, {
+      onMouseDown: function onMouseDown(e) {
+        if (e.button === 0 && (!r.open || i === 0)) return onBeginMoveKeypoint(r, keypointId);
+        mouseEvents.onMouseDown(e);
+      },
+      style: {
+        cursor: !r.open ? "move" : i === 0 ? "pointer" : undefined,
+        zIndex: 10,
+        pointerEvents: r.open && i === r.points.length - 1 ? "none" : undefined,
+        left: proj.x - 4,
+        top: proj.y - 4
+      }
+    })));
+  }))));
+}, arePropsEqual);
+export var RegionSelectAndTransformBoxes = memo(function (props) {
+  return props.regions.filter(function (r) {
+    return r.visible || r.visible === undefined;
+  }).filter(function (r) {
+    return !r.locked;
+  }).map(function (r, i) {
+    return React.createElement(RegionSelectAndTransformBox, Object.assign({
+      key: r.id
+    }, props, {
+      region: r
+    }));
+  });
+}, function (n, p) {
+  return n.regions === p.regions && n.mat === p.mat;
+});
+export default RegionSelectAndTransformBoxes;