react-image-annotate-master-custom 0.0.3 → 0.0.6

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

@@ -18,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
 
       },
@@ -69,8 +69,8 @@ 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,
+    top: pbox.y + pbox.h / 2,
+    width: 60000,
     height: 3
   } : {
     left: pbox.x - 5,
@@ -79,78 +79,27 @@ export var HighlightBox = function HighlightBox(_ref) {
     height: pbox.h + 10
   };
   var styleCoordsVertical = r.type === "point" ? {
-    left: pbox.x + pbox.w - 15,
-    width: 20,
-    height: 60000000
+    left: pbox.x + pbox.w / 2,
+    width: 2,
+    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, "-box"),
-    id: "".concat(r.id, "-box"),
-    className: classnames(classes.highlightLight, {
-      highlighted: r.highlighted
-    })
-  }, mouseEvents, !zoomWithPrimary && !dragWithPrimary ? {
-    onMouseDown: function onMouseDown(e) {
-      if (!r.locked && r.type === "point" && r.highlighted && e.button === 0) {
-        return onBeginMovePoint(r);
-      }
-
-      if (e.button === 0 && !createWithPrimary) {
-        return onSelectRegion(r);
-      }
-
-      onSelectRegion(r); //mouseEvents.onMouseDown(e)
-    }
-  } : {}, {
-    style: _objectSpread({}, r.highlighted ? {
-      pointerEvents: r.type !== "point" ? "none" : undefined,
-      cursor: "grab"
-    } : {
-      cursor: !(zoomWithPrimary || dragWithPrimary || createWithPrimary) ? "pointer" : undefined,
-      pointerEvents: zoomWithPrimary || dragWithPrimary || createWithPrimary && !r.highlighted ? "none" : undefined
-    }, {
-      position: "absolute"
-    }, styleCoords)
-  }), React.createElement("path", {
-    d: pathD,
-    style: {
-      strokeDasharray: 5
-    }
-  })), React.createElement("svg", Object.assign({
     key: "".concat(r.id, "-horizontal"),
     id: "".concat(r.id, "-horizontal"),
     className: classnames(classes.highlightLight, {
       highlighted: r.highlighted
     })
-  }, mouseEvents, !zoomWithPrimary && !dragWithPrimary ? {
-    onMouseDown: function onMouseDown(e) {
-      if (!r.locked && r.type === "point" && r.highlighted && e.button === 0) {
-        return onBeginMovePoint(r);
-      }
-
-      if (e.button === 0 && !createWithPrimary) {
-        return onSelectRegion(r);
-      }
-
-      onSelectRegion(r); //mouseEvents.onMouseDown(e)
-    }
-  } : {}, {
-    style: _objectSpread({}, r.highlighted ? {
-      pointerEvents: r.type !== "point" ? "none" : undefined,
-      cursor: "grab"
-    } : {
-      cursor: !(zoomWithPrimary || dragWithPrimary || createWithPrimary) ? "pointer" : undefined,
-      pointerEvents: zoomWithPrimary || dragWithPrimary || createWithPrimary && !r.highlighted ? "none" : undefined
-    }, {
+  }, mouseEvents, {
+    style: _objectSpread({
       position: "absolute"
     }, styleCoordsHorizontal)
   }), React.createElement("path", {
@@ -161,6 +110,18 @@ export var HighlightBox = function HighlightBox(_ref) {
     className: classnames(classes.highlightLight, {
       highlighted: r.highlighted
     })
+  }, mouseEvents, {
+    style: _objectSpread({
+      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
+    })
   }, mouseEvents, !zoomWithPrimary && !dragWithPrimary ? {
     onMouseDown: function onMouseDown(e) {
       if (!r.locked && r.type === "point" && r.highlighted && e.button === 0) {
@@ -171,20 +132,24 @@ 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
     }, {
       position: "absolute"
-    }, styleCoordsVertical)
+    }, styleCoords)
   }), React.createElement("path", {
-    d: pathDVertical
+    d: pathD,
+    style: {
+      strokeDasharray: 5
+    }
   })));
 };
 export default HighlightBox;

package/package.json

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