react-image-annotate-master-custom 0.0.24 → 0.0.26

package/HighlightBox/index.js

@@ -3,6 +3,33 @@ import React from "react";
 import classnames from "classnames";
 import { makeStyles } from "@mui/styles";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
+import colorAlpha from "color-alpha";
+
+var caculateFilterColor = function caculateFilterColor(regionColor) {
+  switch (regionColor) {
+    case "#adb5bd":
+      return "brightness(0) saturate(100%) invert(84%) sepia(2%) saturate(1428%) hue-rotate(171deg) brightness(89%) contrast(84%)";
+
+    case "#f1ea1e":
+      return "brightness(0) saturate(100%) invert(86%) sepia(71%) saturate(891%) hue-rotate(343deg) brightness(105%) contrast(89%)";
+
+    case "#f90":
+      return "brightness(0) saturate(100%) invert(75%) sepia(61%) saturate(4638%) hue-rotate(360deg) brightness(102%) contrast(106%)";
+
+    case "#4a86e8":
+      return "brightness(0) saturate(100%) invert(51%) sepia(28%) saturate(3560%) hue-rotate(198deg) brightness(92%) contrast(97%)";
+
+    case "#ff0000":
+      return "brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(7273%) hue-rotate(357deg) brightness(95%) contrast(114%)";
+
+    case "#00ff00":
+      return "brightness(0) saturate(100%) invert(78%) sepia(71%) saturate(6219%) hue-rotate(85deg) brightness(122%) contrast(121%)";
+
+    default:
+      return "invert(40%) sepia(50%) saturate(1928%) hue-rotate(350deg) brightness(94%) contrast(89%)";
+  }
+};
+
 var theme = createTheme();
 var useStyles = makeStyles(function (theme) {
   return {
@@ -15,12 +42,10 @@ var useStyles = makeStyles(function (theme) {
       }
     },
     highlightLight: {
-      zIndex: 2,
+      zIndex: 4,
       transition: "opacity 500ms",
-      "&.highlighted": {
-        zIndex: 2,
-        filter: "invert(40%) sepia(50%) saturate(1928%) hue-rotate(350deg) brightness(94%) contrast(89%)" //customize
-
+      "&.highlighted": {// zIndex: 2,
+        // filter:  "invert(40%) sepia(50%) saturate(1928%) hue-rotate(350deg) brightness(94%) contrast(89%)",
       },
       "&:not(.highlighted)": {
         opacity: 0
@@ -29,9 +54,9 @@ var useStyles = makeStyles(function (theme) {
       //   opacity: 0.6,
       // },
       "& path": {
-        vectorEffect: "non-scaling-stroke",
+        // vectorEffect: "non-scaling-stroke",
         strokeWidth: 2,
-        stroke: "#FFF",
+        // stroke: "#FFF",
         fill: "none",
         strokeDasharray: "none",
         animationName: "$borderDance",
@@ -105,7 +130,9 @@ export var HighlightBox = function HighlightBox(_ref) {
       position: "absolute"
     }, styleCoordsHorizontal)
   }), React.createElement("path", {
-    d: pathDHorizontal
+    d: pathDHorizontal,
+    stroke: colorAlpha((r === null || r === void 0 ? void 0 : r.color) || "#E45B21", 1),
+    fill: colorAlpha((r === null || r === void 0 ? void 0 : r.color) || "#E45B21", 1)
   })), React.createElement("svg", Object.assign({
     key: "".concat(r.id, "-vertical"),
     id: "".concat(r.id, "-vertical"),
@@ -119,7 +146,9 @@ export var HighlightBox = function HighlightBox(_ref) {
       position: "absolute"
     }, styleCoordsVertical)
   }), React.createElement("path", {
-    d: pathDVertical
+    d: pathDVertical,
+    stroke: colorAlpha((r === null || r === void 0 ? void 0 : r.color) || "#E45B21", 1),
+    fill: colorAlpha((r === null || r === void 0 ? void 0 : r.color) || "#E45B21", 1)
   })), React.createElement("svg", Object.assign({
     key: "".concat(r.id),
     id: "".concat(r.id),
@@ -153,7 +182,9 @@ export var HighlightBox = function HighlightBox(_ref) {
     d: pathD,
     style: {
       strokeDasharray: 5
-    }
+    },
+    stroke: colorAlpha((r === null || r === void 0 ? void 0 : r.color) || "#E45B21", 1),
+    fill: colorAlpha((r === null || r === void 0 ? void 0 : r.color) || "#E45B21", 1)
   })));
 };
 export default HighlightBox;

package/RegionShapes/index.js

@@ -18,11 +18,13 @@ var RegionComponents = {
       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",
       style: {
         position: "absolute",
-        zIndex: -1
+        zIndex: 1
       },
-      strokeWidth: 2,
-      stroke: "#E45B21",
-      fill: "#E45B21"
+      strokeWidth: 2 // stroke="#E45B21"
+      // fill="#E45B21"
+      ,
+      stroke: colorAlpha((region === null || region === void 0 ? void 0 : region.color) || "#E45B21", 1),
+      fill: colorAlpha((region === null || region === void 0 ? void 0 : region.color) || "#E45B21", 1)
     }));
   }),
   line: memo(function (_ref2) {

package/RegionTags/index.js

@@ -42,7 +42,7 @@ export var RegionTags = function RegionTags(_ref) {
     var _layoutParams$current = layoutParams.current,
         iw = _layoutParams$current.iw,
         ih = _layoutParams$current.ih;
-    var margin = 8;
+    var margin = 0;
     if (region.highlighted && region.type === "box") margin += 6;
     var labelBoxHeight = region.editingLabels && !region.locked ? 300 : region.tags ? 60 : 50; // const displayOnTop = pbox.y > labelBoxHeight
 

package/package.json

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