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

package/Annotator/reducers/general-reducer.js

@@ -502,7 +502,7 @@ export default (function (state, action) {
 
     case "MOUSE_DOWN":
       {
-        var _getIn$regions;
+        var _getIn$regions, _getIn$regions2;
 
         if (!activeImage) return state;
         var _x = action.x,
@@ -763,14 +763,17 @@ export default (function (state, action) {
 
           default:
             break;
-        }
+        } // customize create only one annotation
+
 
-        if ( // customize create only one annotation
-        (_getIn$regions = getIn(state, pathToActiveImage).regions[getIn(state, pathToActiveImage).regions.length - 1]) === null || _getIn$regions === void 0 ? void 0 : _getIn$regions.isNew) {
+        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/HighlightBox/index.js

@@ -14,26 +14,26 @@ var useStyles = makeStyles(function (theme) {
         strokeDashoffset: 100
       }
     },
-    highlightBox: {
+    highlightLight: {
       zIndex: 2,
       transition: "opacity 500ms",
       "&.highlighted": {
-        zIndex: 3,
+        zIndex: 1,
         filter: "invert(40%) sepia(50%) saturate(1928%) hue-rotate(350deg) brightness(94%) contrast(89%)" //customize
 
       },
       "&:not(.highlighted)": {
         opacity: 0
       },
-      "&:not(.highlighted):hover": {
-        opacity: 0.6
-      },
+      // "&:not(.highlighted):hover": {
+      //   opacity: 0.6,
+      // },
       "& path": {
         vectorEffect: "non-scaling-stroke",
         strokeWidth: 2,
         stroke: "#FFF",
         fill: "none",
-        strokeDasharray: 5,
+        strokeDasharray: "none",
         animationName: "$borderDance",
         animationDuration: "4s",
         animationTimingFunction: "linear",
@@ -68,12 +68,34 @@ export var HighlightBox = function HighlightBox(_ref) {
     height: pbox.h + 10
   };
   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: 3
+  } : {
+    left: pbox.x - 5,
+    top: pbox.y - 5,
+    width: pbox.w + 10,
+    height: pbox.h + 10
+  };
+  var styleCoordsVertical = r.type === "point" ? {
+    left: pbox.x + pbox.w - 15,
+    width: 20,
+    height: 60000000
+  } : {
+    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");
   return React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement("svg", Object.assign({
-    key: r.id,
-    id: r.id,
-    className: classnames(classes.highlightBox, {
+    key: "".concat(r.id, "-box"),
+    id: "".concat(r.id, "-box"),
+    className: classnames(classes.highlightLight, {
       highlighted: r.highlighted
     })
   }, mouseEvents, !zoomWithPrimary && !dragWithPrimary ? {
@@ -99,7 +121,70 @@ export var HighlightBox = function HighlightBox(_ref) {
       position: "absolute"
     }, styleCoords)
   }), React.createElement("path", {
-    d: pathD
+    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
+    }, {
+      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, !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"
+    }, styleCoordsVertical)
+  }), React.createElement("path", {
+    d: pathDVertical
   })));
 };
 export default HighlightBox;

package/ImageCanvas/index.js

@@ -22,6 +22,7 @@ import VideoOrImageCanvasBackground from "../VideoOrImageCanvasBackground";
 import useEventCallback from "use-event-callback";
 import RegionShapes from "../RegionShapes";
 import useWasdMode from "./use-wasd-mode";
+import { useSettings } from "../SettingsProvider";
 var theme = createTheme();
 var useStyles = makeStyles(function (theme) {
   return styles;
@@ -137,6 +138,7 @@ export var ImageCanvas = function ImageCanvas(_ref2) {
 
   var maskImages = useRef({});
   var windowSize = useWindowSize();
+  var settings = useSettings();
   var getLatestMat = useEventCallback(function () {
     return mat;
   });
@@ -303,7 +305,13 @@ export var ImageCanvas = function ImageCanvas(_ref2) {
       position: "relative",
       overflow: "hidden",
       cursor: createWithPrimary ? "crosshair" : dragging ? "grabbing" : dragWithPrimary ? "grab" : zoomWithPrimary ? mat.a < 1 ? "zoom-out" : "zoom-in" : undefined
-    }
+    } // onMouseLeave={()=> {
+    //   settings.changeSetting("showCrosshairs" , false)
+    // }}
+    // onMouseEnter={()=> {
+    //   settings.changeSetting("showCrosshairs", true)
+    // }}
+
   }, showCrosshairs && React.createElement(Crosshairs, {
     key: "crossHairs",
     mousePosition: mousePosition

package/package.json

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