react-image-annotate-master-custom 0.0.18 → 0.0.22

package/RegionLabel/index.js

@@ -1,4 +1,3 @@
-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";
@@ -23,7 +22,7 @@ export var RegionLabel = function RegionLabel(_ref) {
       allowedClasses = _ref.allowedClasses,
       allowedTags = _ref.allowedTags,
       onDelete = _ref.onDelete,
-      _onChange = _ref.onChange,
+      onChange = _ref.onChange,
       onClose = _ref.onClose,
       onOpen = _ref.onOpen,
       onRegionClassAdded = _ref.onRegionClassAdded,
@@ -39,158 +38,26 @@ export var RegionLabel = function RegionLabel(_ref) {
 
   return React.createElement(ThemeProvider, {
     theme: theme
-  }, React.createElement(Paper, {
-    onClick: function onClick() {
-      return !editing ? onOpen(region) : null;
-    },
+  }, region.cls && React.createElement(Paper // onClick={() => (!editing ? onOpen(region) : null)}
+  , {
     className: classnames(classes.regionInfo, {
-      highlighted: region.highlighted
+      highlighted: true // highlighted: region.highlighted,
+
     })
   }, React.createElement("div", {
     style: {
-      display: "".concat(!editing ? "unset" : "none")
+      display: "unset"
     }
   }, region.cls && React.createElement("div", {
     className: "name"
-  }, React.createElement("div", {
-    className: "circle",
-    style: {
-      backgroundColor: region.color
-    }
-  }), region.cls), region.tags && React.createElement("div", {
+  }, "#".concat(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,
-      display: "".concat(editing ? "unset" : "none")
-    }
-  }, 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",
-    id: "delete-region-".concat(region.id)
-  }, 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
-      };
-    }))
-  })), (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/RegionLabel/styles.js

@@ -6,8 +6,8 @@ export default {
     transition: "opacity 200ms",
     opacity: 0.5,
     "&:hover": {
-      opacity: 0.9,
-      cursor: "pointer"
+      opacity: 0.9 // cursor: "pointer",
+
     },
     "&.highlighted": {
       opacity: 0.9,

package/RegionShapes/index.js

@@ -1,7 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { memo } from "react";
 import colorAlpha from "color-alpha";
-import "./regionShape.css";
 
 function clamp(num, min, max) {
   return num <= min ? min : num >= max ? max : num;
@@ -13,7 +12,7 @@ var RegionComponents = {
     var region = _ref.region,
         iw = _ref.iw,
         ih = _ref.ih;
-    return React.createElement(React.Fragment, null, React.createElement("g", {
+    return React.createElement("g", {
       transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
     }, React.createElement("path", {
       d: "M 1.866 12.7018 C 4.234 9.7951 9.486 2.7501 9.486 -1.207 C 9.486 -6.0063 5.5922 -9.9 0.793 -9.9 S -7.9 -6.0063 -7.9 -1.207 c 0 3.9571 5.2973 11.0021 7.62 13.9088 c 0.5569 0.6927 1.5892 0.6927 2.1461 0 z M 0.793 -4.1047 A 2.8977 2.8977 90 1 1 0.793 1.6907 a 2.8977 2.8977 90 1 1 0 -5.7953 z",
@@ -24,7 +23,7 @@ var RegionComponents = {
       strokeWidth: 2,
       stroke: "#E45B21",
       fill: "#E45B21"
-    })));
+    }));
   }),
   line: memo(function (_ref2) {
     var region = _ref2.region,
@@ -246,42 +245,17 @@ export var WrappedRegionList = memo(function (_ref19) {
 }, function (n, p) {
   return n.regions === p.regions && n.iw === p.iw && n.ih === p.ih;
 });
-export var WrappedRegionListSid = memo(function (_ref20) {
-  var regions = _ref20.regions,
+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,
-      iw = _ref20.iw,
-      ih = _ref20.ih,
       fullSegmentationMode = _ref20.fullSegmentationMode;
-  return regions.filter(function (r) {
-    return r.visible !== false;
-  }).map(function (r) {
-    return React.createElement(React.Fragment, null, React.createElement("div", {
-      style: {
-        color: '#800020',
-        position: 'absolute',
-        zIndex: 1000,
-        left: r.x * iw + 18,
-        top: r.y * ih + 18,
-        fontSize: '13px',
-        fontWeight: 500
-      },
-      className: "noselect"
-    }, (r === null || r === void 0 ? void 0 : r.sid) && "#".concat(r === null || r === void 0 ? void 0 : r.sid)));
-  });
-}, function (n, p) {
-  return n.regions === p.regions && n.iw === p.iw && n.ih === p.ih;
-});
-export var RegionShapes = function RegionShapes(_ref21) {
-  var mat = _ref21.mat,
-      imagePosition = _ref21.imagePosition,
-      _ref21$regions = _ref21.regions,
-      regions = _ref21$regions === void 0 ? [] : _ref21$regions,
-      keypointDefinitions = _ref21.keypointDefinitions,
-      fullSegmentationMode = _ref21.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(React.Fragment, null, React.createElement("svg", {
+  return React.createElement("svg", {
     width: iw,
     height: ih,
     style: {
@@ -300,13 +274,6 @@ export var RegionShapes = function RegionShapes(_ref21) {
     ih: ih,
     keypointDefinitions: keypointDefinitions,
     fullSegmentationMode: fullSegmentationMode
-  })), React.createElement(WrappedRegionListSid, {
-    key: "wrapped-region-list-sid",
-    regions: regions,
-    iw: iw,
-    ih: ih,
-    keypointDefinitions: keypointDefinitions,
-    fullSegmentationMode: fullSegmentationMode
   }));
 };
 export default RegionShapes;

package/RegionTags/index.js

@@ -44,8 +44,9 @@ export var RegionTags = function RegionTags(_ref) {
         ih = _layoutParams$current.ih;
     var margin = 8;
     if (region.highlighted && region.type === "box") margin += 6;
-    var labelBoxHeight = region.editingLabels && !region.locked ? 300 : region.tags ? 60 : 50;
-    var displayOnTop = pbox.y > labelBoxHeight;
+    var labelBoxHeight = region.editingLabels && !region.locked ? 300 : region.tags ? 60 : 50; // const displayOnTop = pbox.y > labelBoxHeight
+
+    var displayOnTop = true;
     var coords = displayOnTop ? {
       left: pbox.x,
       top: pbox.y - margin / 2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-image-annotate-master-custom",
-  "version": "0.0.18",
+  "version": "0.0.22",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.12",
     "@fortawesome/free-solid-svg-icons": "^5.6.3",