@searpent/react-image-annotate 2.0.2 → 2.0.5

package/RegionSelectAndTransformBoxes/index.js

@@ -1,167 +0,0 @@
-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;

package/RegionSelectorSidebarBox/index.js

@@ -1,248 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { Fragment, useState, memo } from "react";
-import SidebarBoxContainer from "../SidebarBoxContainer";
-import { makeStyles } from "@mui/styles";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import { styled } from "@mui/material/styles";
-import { grey } from "@mui/material/colors";
-import RegionIcon from "@mui/icons-material/PictureInPicture";
-import Grid from "@mui/material/Grid";
-import ReorderIcon from "@mui/icons-material/SwapVert";
-import PieChartIcon from "@mui/icons-material/PieChart";
-import TrashIcon from "@mui/icons-material/Delete";
-import LockIcon from "@mui/icons-material/Lock";
-import UnlockIcon from "@mui/icons-material/LockOpen";
-import VisibleIcon from "@mui/icons-material/Visibility";
-import VisibleOffIcon from "@mui/icons-material/VisibilityOff";
-import styles from "./styles";
-import classnames from "classnames";
-import isEqual from "lodash/isEqual";
-var theme = createTheme();
-var useStyles = makeStyles(function (theme) {
-  return styles;
-});
-var HeaderSep = styled("div")(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    borderTop: "1px solid ".concat(grey[200]),
-    marginTop: 2,
-    marginBottom: 2
-  };
-});
-
-var Chip = function Chip(_ref2) {
-  var color = _ref2.color,
-      text = _ref2.text;
-  var classes = useStyles();
-  return React.createElement("span", {
-    className: classes.chip
-  }, React.createElement("div", {
-    className: "color",
-    style: {
-      backgroundColor: color
-    }
-  }), React.createElement("div", {
-    className: "text"
-  }, text));
-};
-
-var RowLayout = function RowLayout(_ref3) {
-  var header = _ref3.header,
-      highlighted = _ref3.highlighted,
-      order = _ref3.order,
-      classification = _ref3.classification,
-      area = _ref3.area,
-      tags = _ref3.tags,
-      trash = _ref3.trash,
-      lock = _ref3.lock,
-      visible = _ref3.visible,
-      onClick = _ref3.onClick;
-  var classes = useStyles();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      mouseOver = _useState2[0],
-      changeMouseOver = _useState2[1];
-
-  return React.createElement("div", {
-    onClick: onClick,
-    onMouseEnter: function onMouseEnter() {
-      return changeMouseOver(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return changeMouseOver(false);
-    },
-    className: classnames(classes.row, {
-      header: header,
-      highlighted: highlighted
-    })
-  }, React.createElement(Grid, {
-    container: true,
-    alignItems: "center"
-  }, React.createElement(Grid, {
-    item: true,
-    xs: 2
-  }, React.createElement("div", {
-    style: {
-      textAlign: "right",
-      paddingRight: 10
-    }
-  }, order)), React.createElement(Grid, {
-    item: true,
-    xs: 5
-  }, classification), React.createElement(Grid, {
-    item: true,
-    xs: 2
-  }, React.createElement("div", {
-    style: {
-      textAlign: "right",
-      paddingRight: 6
-    }
-  }, area)), React.createElement(Grid, {
-    item: true,
-    xs: 1
-  }, trash), React.createElement(Grid, {
-    item: true,
-    xs: 1
-  }, lock), React.createElement(Grid, {
-    item: true,
-    xs: 1
-  }, visible)));
-};
-
-var RowHeader = function RowHeader() {
-  return React.createElement(RowLayout, {
-    header: true,
-    highlighted: false,
-    order: React.createElement(ReorderIcon, {
-      className: "icon"
-    }),
-    classification: React.createElement("div", {
-      style: {
-        paddingLeft: 10
-      }
-    }, "Class"),
-    area: React.createElement(PieChartIcon, {
-      className: "icon"
-    }),
-    trash: React.createElement(TrashIcon, {
-      className: "icon"
-    }),
-    lock: React.createElement(LockIcon, {
-      className: "icon"
-    }),
-    visible: React.createElement(VisibleIcon, {
-      className: "icon"
-    })
-  });
-};
-
-var MemoRowHeader = memo(RowHeader);
-
-var Row = function Row(_ref4) {
-  var r = _ref4.region,
-      highlighted = _ref4.highlighted,
-      onSelectRegion = _ref4.onSelectRegion,
-      onDeleteRegion = _ref4.onDeleteRegion,
-      onChangeRegion = _ref4.onChangeRegion,
-      visible = _ref4.visible,
-      locked = _ref4.locked,
-      color = _ref4.color,
-      cls = _ref4.cls,
-      index = _ref4.index;
-  return React.createElement(RowLayout, {
-    header: false,
-    highlighted: highlighted,
-    onClick: function onClick() {
-      return onSelectRegion(r);
-    },
-    order: "#".concat(index + 1),
-    classification: React.createElement(Chip, {
-      text: cls || "",
-      color: color || "#ddd"
-    }),
-    area: "",
-    trash: React.createElement(TrashIcon, {
-      onClick: function onClick() {
-        return onDeleteRegion(r);
-      },
-      className: "icon2"
-    }),
-    lock: r.locked ? React.createElement(LockIcon, {
-      onClick: function onClick() {
-        return onChangeRegion(_objectSpread({}, r, {
-          locked: false
-        }));
-      },
-      className: "icon2"
-    }) : React.createElement(UnlockIcon, {
-      onClick: function onClick() {
-        return onChangeRegion(_objectSpread({}, r, {
-          locked: true
-        }));
-      },
-      className: "icon2"
-    }),
-    visible: r.visible || r.visible === undefined ? React.createElement(VisibleIcon, {
-      onClick: function onClick() {
-        return onChangeRegion(_objectSpread({}, r, {
-          visible: false
-        }));
-      },
-      className: "icon2"
-    }) : React.createElement(VisibleOffIcon, {
-      onClick: function onClick() {
-        return onChangeRegion(_objectSpread({}, r, {
-          visible: true
-        }));
-      },
-      className: "icon2"
-    })
-  });
-};
-
-var MemoRow = memo(Row, function (prevProps, nextProps) {
-  return prevProps.highlighted === nextProps.highlighted && prevProps.visible === nextProps.visible && prevProps.locked === nextProps.locked && prevProps.id === nextProps.id && prevProps.index === nextProps.index && prevProps.cls === nextProps.cls && prevProps.color === nextProps.color;
-});
-var emptyArr = [];
-export var RegionSelectorSidebarBox = function RegionSelectorSidebarBox(_ref5) {
-  var _ref5$regions = _ref5.regions,
-      regions = _ref5$regions === void 0 ? emptyArr : _ref5$regions,
-      onDeleteRegion = _ref5.onDeleteRegion,
-      onChangeRegion = _ref5.onChangeRegion,
-      onSelectRegion = _ref5.onSelectRegion;
-  var classes = useStyles();
-  return React.createElement(ThemeProvider, {
-    theme: theme
-  }, React.createElement(SidebarBoxContainer, {
-    title: "Regions",
-    subTitle: "",
-    icon: React.createElement(RegionIcon, {
-      style: {
-        color: grey[700]
-      }
-    }),
-    expandedByDefault: true
-  }, React.createElement("div", {
-    className: classes.container
-  }, React.createElement(MemoRowHeader, null), React.createElement(HeaderSep, null), regions.map(function (r, i) {
-    return React.createElement(MemoRow, Object.assign({
-      key: r.id
-    }, r, {
-      region: r,
-      index: i,
-      onSelectRegion: onSelectRegion,
-      onDeleteRegion: onDeleteRegion,
-      onChangeRegion: onChangeRegion
-    }));
-  }))));
-};
-
-var mapUsedRegionProperties = function mapUsedRegionProperties(r) {
-  return [r.id, r.color, r.locked, r.visible, r.highlighted];
-};
-
-export default memo(RegionSelectorSidebarBox, function (prevProps, nextProps) {
-  return isEqual((prevProps.regions || emptyArr).map(mapUsedRegionProperties), (nextProps.regions || emptyArr).map(mapUsedRegionProperties));
-});

package/RegionShapes/index.js

@@ -1,274 +0,0 @@
-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;