react-image-annotate-master-custom 0.0.9 → 0.0.11

package/Annotator/index.js

@@ -112,6 +112,7 @@ export var Annotator = function Annotator(_ref) {
       state = _useReducer2[0],
       dispatchToReducer = _useReducer2[1];
 
+  console.log("🚀 ~ state:", state);
   var dispatch = useEventCallback(function (action) {
     if (action.type === "HEADER_BUTTON_CLICKED") {
       if (["Exit", "Done", "Save", "Complete"].includes(action.buttonName)) {

package/Annotator/reducers/general-reducer.js

@@ -262,6 +262,12 @@ export default (function (state, action) {
         });
       }
 
+    case "UNSELECTED_REGION":
+      {
+        state = unselectRegions(state);
+        return setIn(state, ["mode"], null);
+      }
+
     case "ADD_POLYGON_POINT":
       {
         var _polygon = action.polygon,

package/DemoSite/index.js

@@ -27,11 +27,11 @@ export default (function () {
   }, React.createElement("button", {
     onClick: function onClick(e) {
       e.stopPropagation();
-      var element = document.getElementById("delete-region-7725661632635865");
+      var element = document.getElementById("snag_canvas");
 
       if (element) {
         var clickEvent = document.createEvent("MouseEvents");
-        clickEvent.initEvent("click", true, true);
+        clickEvent.initEvent("mousedown", true, true);
         element.dispatchEvent(clickEvent);
       }
     }

package/HighlightBox/index.js

@@ -98,24 +98,7 @@ export var HighlightBox = function HighlightBox(_ref) {
     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);
-    }
-  } : {}, {
+  }, mouseEvents, {
     style: _objectSpread({}, r.highlighted && {
       pointerEvents: r.type !== "point" ? "none" : undefined
     }, {
@@ -129,24 +112,7 @@ export var HighlightBox = function HighlightBox(_ref) {
     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);
-    }
-  } : {}, {
+  }, mouseEvents, {
     style: _objectSpread({}, r.highlighted && {
       pointerEvents: r.type !== "point" ? "none" : undefined
     }, {
@@ -155,8 +121,8 @@ export var HighlightBox = function HighlightBox(_ref) {
   }), React.createElement("path", {
     d: pathDVertical
   })), React.createElement("svg", Object.assign({
-    key: "".concat(r.id, "-box"),
-    id: "".concat(r.id, "-box"),
+    key: "".concat(r.id),
+    id: "".concat(r.id),
     className: classnames(classes.highlightLight, {
       highlighted: r.highlighted
     })

package/MainLayout/index.js

@@ -147,7 +147,11 @@ export var MainLayout = function MainLayout(_ref3) {
       e.target.focus();
     }
   }, []);
-  var canvas = React.createElement(ImageCanvas, Object.assign({}, settings, {
+  var canvas = React.createElement(ImageCanvas, Object.assign({
+    onClick: function onClick() {
+      return console.log("3333");
+    }
+  }, settings, {
     showCrosshairs: settings.showCrosshairs && !["select", "pan", "zoom"].includes(state.selectedTool),
     key: state.selectedImage,
     showMask: state.showMask,
@@ -193,10 +197,14 @@ export var MainLayout = function MainLayout(_ref3) {
     allowComments: state.allowComments
   }));
   var onClickIconSidebarItem = useEventCallback(function (item) {
+    console.log(1111);
     dispatch({
       type: "SELECT_TOOL",
       selectedTool: item.name
     });
+    dispatch({
+      type: "UNSELECTED_REGION"
+    });
   });
   var onClickHeaderItem = useEventCallback(function (item) {
     if (item.name === "Fullscreen") {
@@ -346,7 +354,14 @@ export var MainLayout = function MainLayout(_ref3) {
       history: state.history,
       onRestoreHistory: action("RESTORE_HISTORY")
     })].filter(Boolean)
-  }, canvas), React.createElement(SettingsDialog, {
+  }, React.createElement("div", {
+    id: "snag_canvas",
+    onMouseDown: function onMouseDown() {
+      return dispatch({
+        type: "UNSELECTED_REGION"
+      });
+    }
+  }), canvas), React.createElement(SettingsDialog, {
     open: state.settingsOpen,
     onClose: function onClose() {
       return dispatch({

package/package.json

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