react-image-annotate-master-custom 0.0.4 → 0.0.8

package/Annotator/reducers/general-reducer.js

@@ -769,11 +769,8 @@ export default (function (state, action) {
         if (((_getIn$regions = getIn(state, pathToActiveImage).regions) === null || _getIn$regions === void 0 ? void 0 : _getIn$regions.length) > 0 && ((_getIn$regions2 = getIn(state, pathToActiveImage).regions[getIn(state, pathToActiveImage).regions.length - 1]) === null || _getIn$regions2 === void 0 ? void 0 : _getIn$regions2.isNew)) {
           var _regions = _toConsumableArray(getIn(state, pathToActiveImage).regions || []);
 
-          console.log(state, "state");
-          console.log(getIn(state, pathToActiveImage), "pathToActiveImage");
           return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), _regions);
         } else {
-          console.log(3333333333333);
           state.onCreateAnno(newRegion); // customize
 
           var _regions2 = _toConsumableArray(getIn(state, pathToActiveImage).regions || []).map(function (r) {

package/DemoSite/index.js

@@ -37,12 +37,8 @@ export default (function () {
     }
   }, "click"), React.createElement(Annotator //customize
   , Object.assign({}, annotatorProps, {
-    onCreateAnno: function onCreateAnno(anno) {
-      console.log("Annotator created: ", anno);
-    },
-    onClickAnno: function onClickAnno(anno) {
-      console.log("Annotator click: ", anno);
-    },
+    onCreateAnno: function onCreateAnno(anno) {},
+    onClickAnno: function onClickAnno(anno) {},
     onExit: function onExit(output) {
       var checkOutside = false;
       output.images[0].regions.forEach(function (r) {
@@ -56,8 +52,6 @@ export default (function () {
       } else {
         changeLastOutput(output.images[0].regions);
       }
-
-      console.log(output.images[0].regions);
     }
   }))) : React.createElement(Editor, {
     lastOutput: lastOutput,

package/HighlightBox/index.js

@@ -3,7 +3,6 @@ import React from "react";
 import classnames from "classnames";
 import { makeStyles } from "@mui/styles";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
-import zIndex from "@mui/material/styles/zIndex";
 var theme = createTheme();
 var useStyles = makeStyles(function (theme) {
   return {
@@ -19,7 +18,7 @@ var useStyles = makeStyles(function (theme) {
       zIndex: 2,
       transition: "opacity 500ms",
       "&.highlighted": {
-        zIndex: 1,
+        zIndex: 2,
         filter: "invert(40%) sepia(50%) saturate(1928%) hue-rotate(350deg) brightness(94%) contrast(89%)" //customize
 
       },
@@ -70,10 +69,9 @@ export var HighlightBox = function HighlightBox(_ref) {
   };
   var pathD = r.type === "point" ? "M5,5 L".concat(styleCoords.width - 5, " 5L").concat(styleCoords.width - 5, " ").concat(styleCoords.height - 5, "L5 ").concat(styleCoords.height - 5, "Z") : "M5,5 L".concat(pbox.w + 5, ",5 L").concat(pbox.w + 5, ",").concat(pbox.h + 5, " L5,").concat(pbox.h + 5, " Z");
   var styleCoordsHorizontal = r.type === "point" ? {
-    top: pbox.y + pbox.h - 12,
-    width: 600000000,
-    height: 2,
-    zIndex: 1
+    top: pbox.y + pbox.h / 2,
+    width: 60000,
+    height: 3
   } : {
     left: pbox.x - 5,
     top: pbox.y - 5,
@@ -81,23 +79,50 @@ export var HighlightBox = function HighlightBox(_ref) {
     height: pbox.h + 10
   };
   var styleCoordsVertical = r.type === "point" ? {
-    left: pbox.x + pbox.w - 15,
+    left: pbox.x + pbox.w / 2,
     width: 2,
-    height: 60000000,
-    zIndex: 1
+    height: 60000
   } : {
     left: pbox.x - 5,
     top: pbox.y - 5,
     width: pbox.w + 10,
     height: pbox.h + 10
   };
-  var pathDHorizontal = r.type === "point" ? "M1,2 H".concat(styleCoordsHorizontal.width - 5, " Z") : "M5,5 L".concat(pbox.w + 5, ",5 L").concat(pbox.w + 5, ",").concat(pbox.h + 5, " L5,").concat(pbox.h + 5, " Z");
-  var pathDVertical = r.type === "point" ? "M1,1 V".concat(styleCoordsVertical.height - 5, " Z") : "M5,5 L".concat(pbox.w + 5, ",5 L").concat(pbox.w + 5, ",").concat(pbox.h + 5, " L5,").concat(pbox.h + 5, " Z");
+  var pathDHorizontal = r.type === "point" ? "M1,2 H".concat(styleCoordsHorizontal.width, " Z") : "M5,5 L".concat(pbox.w + 5, ",5 L").concat(pbox.w + 5, ",").concat(pbox.h + 5, " L5,").concat(pbox.h + 5, " Z");
+  var pathDVertical = r.type === "point" ? "M1,1 V".concat(styleCoordsVertical.height, " Z") : "M5,5 L".concat(pbox.w + 5, ",5 L").concat(pbox.w + 5, ",").concat(pbox.h + 5, " L5,").concat(pbox.h + 5, " Z");
   return React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement("svg", Object.assign({
-    key: "".concat(r.id),
-    id: "".concat(r.id),
+    key: "".concat(r.id, "-horizontal"),
+    id: "".concat(r.id, "-horizontal"),
+    className: classnames(classes.highlightLight, {
+      highlighted: r.highlighted
+    })
+  }, mouseEvents, {
+    style: _objectSpread({}, r.highlighted && {
+      pointerEvents: r.type !== "point" ? "none" : undefined
+    }, {
+      position: "absolute"
+    }, styleCoordsHorizontal)
+  }), React.createElement("path", {
+    d: pathDHorizontal
+  })), React.createElement("svg", Object.assign({
+    key: "".concat(r.id, "-vertical"),
+    id: "".concat(r.id, "-vertical"),
+    className: classnames(classes.highlightLight, {
+      highlighted: r.highlighted
+    })
+  }, mouseEvents, {
+    style: _objectSpread({}, r.highlighted && {
+      pointerEvents: r.type !== "point" ? "none" : undefined
+    }, {
+      position: "absolute"
+    }, styleCoordsVertical)
+  }), React.createElement("path", {
+    d: pathDVertical
+  })), React.createElement("svg", Object.assign({
+    key: "".concat(r.id, "-box"),
+    id: "".concat(r.id, "-box"),
     className: classnames(classes.highlightLight, {
       highlighted: r.highlighted
     })
@@ -111,12 +136,13 @@ export var HighlightBox = function HighlightBox(_ref) {
         return onSelectRegion(r);
       }
 
-      onSelectRegion(r); //mouseEvents.onMouseDown(e)
+      onSelectRegion(r);
+      mouseEvents.onMouseDown(e);
     }
   } : {}, {
     style: _objectSpread({}, r.highlighted ? {
       pointerEvents: r.type !== "point" ? "none" : undefined,
-      cursor: "grab"
+      cursor: !r.locked && "grab"
     } : {
       cursor: !(zoomWithPrimary || dragWithPrimary || createWithPrimary) ? "pointer" : undefined,
       pointerEvents: zoomWithPrimary || dragWithPrimary || createWithPrimary && !r.highlighted ? "none" : undefined
@@ -128,28 +154,6 @@ export var HighlightBox = function HighlightBox(_ref) {
     style: {
       strokeDasharray: 5
     }
-  })), React.createElement("svg", {
-    key: "".concat(r.id, "-horizontal"),
-    id: "".concat(r.id, "-horizontal"),
-    className: classnames(classes.highlightLight, {
-      highlighted: r.highlighted
-    }),
-    style: _objectSpread({
-      position: "absolute"
-    }, styleCoordsHorizontal)
-  }, React.createElement("path", {
-    d: pathDHorizontal
-  })), React.createElement("svg", {
-    key: "".concat(r.id, "-vertical"),
-    id: "".concat(r.id, "-vertical"),
-    className: classnames(classes.highlightLight, {
-      highlighted: r.highlighted
-    }),
-    style: _objectSpread({
-      position: "absolute"
-    }, styleCoordsVertical)
-  }, React.createElement("path", {
-    d: pathDVertical
   })));
 };
 export default HighlightBox;

package/package.json

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