@searpent/react-image-annotate 2.0.46 → 2.0.48

package/Annotator/examplePhotos.js

@@ -686,55 +686,20 @@ var examplePhotos = [{
         "text": "[{\"label\":\"author\",\"text\":\"MET\"}]",
         "groupId": "5",
         "id": "346807506053365764"
-      }, {
-        "label": "title",
-        "score": 0.99,
-        "box": {
-          "X1": 0.7056229,
-          "X2": 0.9718065,
-          "Y1": 0.049599823,
-          "Y2": 0.18825386
-        },
-        "text": "[{\"label\":\"title\",\"text\":\"Za lidská práva! Vadí Čína i Katar\"}]",
-        "groupId": "6",
-        "id": "346807506909003776"
-      }, {
-        "label": "text",
-        "score": 0.99,
-        "box": {
-          "X1": 0.70483536,
-          "X2": 0.7946133,
-          "Y1": 0.1657085,
-          "Y2": 0.53319806
-        },
-        "text": "[{\"label\":\"text\",\"text\":\"\"}]",
-        "groupId": "6",
-        "id": "346807506909003777"
-      }, {
-        "label": "text",
-        "score": 0.99,
-        "box": {
-          "X1": 0.7985509,
-          "X2": 0.8875413,
-          "Y1": 0.33028972,
-          "Y2": 0.53432536
-        },
-        "text": "[{\"label\":\"text\",\"text\":\"\"}]",
-        "groupId": "6",
-        "id": "346807506909003778"
-      }, {
-        "label": "text",
-        "score": 0.99,
-        "box": {
-          "X1": 0.89147896,
-          "X2": 0.98046935,
-          "Y1": 0.33028972,
-          "Y2": 0.53432536
-        },
-        "text": "[{\"label\":\"text\",\"text\":\"\"}]",
-        "groupId": "6",
-        "id": "346807506913198080"
-      }, {
+      }, // {
+      //   "label": "title",
+      //   "score": 0.99,
+      //   "box": {
+      //     "X1": 0.7056229,
+      //     "X2": 0.9718065,
+      //     "Y1": 0.049599823,
+      //     "Y2": 0.18825386
+      //   },
+      //   "text": "[{\"label\":\"title\",\"text\":\"Za lidská práva! Vadí Čína i Katar\"}]",
+      //   "groupId": "6",
+      //   "id": "346807506909003776"
+      // },
+      {
         "label": "photo_caption",
         "score": 0.99,
         "box": {
@@ -743,33 +708,35 @@ var examplePhotos = [{
           "Y1": 0.25025365,
           "Y2": 0.3415624
         },
-        "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest z února v Indii proti konání ZOH v Pekingu\"}]",
-        "groupId": "6",
-        "id": "346807506913198081"
-      }, {
-        "label": "photo_caption",
-        "score": 0.99,
-        "box": {
-          "X1": 0.80248857,
-          "X2": 0.95999366,
-          "Y1": 0.32127157,
-          "Y2": 0.34381694
-        },
-        "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest z února v Indii proti konání ZOH v Pekingu\"}]",
-        "groupId": "6",
-        "id": "346807506913198082"
-      }, {
-        "label": "author",
-        "score": 0.99,
-        "box": {
-          "X1": 0.9584186,
-          "X2": 0.9733816,
-          "Y1": 0.51628906,
-          "Y2": 0.53319806
-        },
-        "text": "[{\"label\":\"author\",\"text\":\"PUR\"}]",
+        "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest n z února v Indii,\\n\\tpred proti v Pekingu.\"}]",
         "groupId": "6",
-        "id": "346807506913198083"
+        "id": "346807506913198081" // {
+        //   "label": "photo_caption",
+        //   "score": 0.99,
+        //   "box": {
+        //     "X1": 0.80248857,
+        //     "X2": 0.95999366,
+        //     "Y1": 0.32127157,
+        //     "Y2": 0.34381694
+        //   },
+        //   "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest z února v Indii proti konání ZOH v Pekingu\"}]",
+        //   "groupId": "6",
+        //   "id": "346807506913198082"
+        // },
+        // {
+        //   "label": "author",
+        //   "score": 0.99,
+        //   "box": {
+        //     "X1": 0.9584186,
+        //     "X2": 0.9733816,
+        //     "Y1": 0.51628906,
+        //     "Y2": 0.53319806
+        //   },
+        //   "text": "[{\"label\":\"author\",\"text\":\"PUR\"}]",
+        //   "groupId": "6",
+        //   "id": "346807506913198083"
+        // }
+
       }]
     }, {
       "modelFamily": "metadata-engine",

package/Annotator/index.js

@@ -76,6 +76,7 @@ export var Annotator = function Annotator(_ref) {
       groupColors = _ref.groupColors,
       onRecalc = _ref.onRecalc,
       onSave = _ref.onSave,
+      onSelectedImageChange = _ref.onSelectedImageChange,
       albumMetadata = _ref.albumMetadata,
       metadataConfigs = _ref.metadataConfigs,
       _ref$lockedImages = _ref.lockedImages,
@@ -254,9 +255,25 @@ export var Annotator = function Annotator(_ref) {
       type: "ADD_GROUP",
       group: group
     });
-  }; // trigger this on every BBox manipulation (there is currently no way to detect adding of new box!)
+  }; // trigger onSelectedImageChange() hook when image changed
 
 
+  useEffect(function () {
+    var _state$lastAction;
+
+    var createdAt = new Date();
+
+    if (typeof onSelectedImageChange === 'function' && ((_state$lastAction = state.lastAction) === null || _state$lastAction === void 0 ? void 0 : _state$lastAction.type) === 'SELECT_IMAGE' && (state === null || state === void 0 ? void 0 : state.selectedImage) !== state.previouslySelectedImage) {
+      onSelectedImageChange({
+        selectedImage: state === null || state === void 0 ? void 0 : state.selectedImage,
+        previouslySelectedImage: state.previouslySelectedImage,
+        images: state.images,
+        albumMetadata: state.albumMetadata,
+        createdAt: createdAt
+      });
+    }
+  }, [state.previouslySelectedImage, state.selectedImage, onSelectedImageChange, state.images, state.albumMetadata, state]); // trigger this on every BBox manipulation (there is currently no way to detect adding of new box!)
+
   useEffect(function () {
     if (!state.lastAction || !["BEGIN_BOX_TRANSFORM", "CHANGE_REGION", "DELETE_REGION", "DELETE_SELECTED_REGION", "UPDATE_METADATA", "SELECT_CLASSIFICATION"].includes(state.lastAction.type)) {
       return;

package/Annotator/reducers/general-reducer.js

@@ -114,6 +114,7 @@ export default (function (state, action) {
         src = _ref.src,
         frameTime = _ref.frameTime;
 
+    state = setIn(state, ["previouslySelectedImage"], state.selectedImage);
     return setIn(setIn(state, ["selectedImage"], index), ["selectedImageFrameTime"], frameTime);
   };
 

package/Editor/annotation-plugin/annotation.js

@@ -4,9 +4,26 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 /**
  * Build styles
  */
-import './annotation.css'; // Possible classes
+import './annotation.css';
+
+function whitespaceCharactersToHTML() {
+  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return str // new line whitespace
+  .replaceAll(/[ ]\n[ ]/gm, '&nbsp;<br>&nbsp;') // space both sides adds &nbsp;
+  .replaceAll(/\n[ ]/gm, '<br>&nbsp;') // space right side adds &nbsp;
+  .replaceAll(/[ ]\n/gm, '&nbsp;<br>') // space left side adds &nbsp;
+  .replaceAll(/\n/gm, '<br>') // no spaces
+  // tab whitespace
+  .replaceAll(/\t/gm, '&nbsp;&nbsp;&nbsp;&nbsp;'); // no spaces
+}
+
+function HTMLToWhitespaceCharacters() {
+  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return str.replaceAll(/((&nbsp;|\s){4})/gm, '\t').replaceAll('&nbsp;', ' ').replaceAll('<br>', '\n'); // new line whitespace
+} // Possible classes
 // ================
 
+
 var Annotation =
 /*#__PURE__*/
 function () {
@@ -92,7 +109,7 @@ function () {
         data = {};
       }
 
-      newData.text = data.text || '';
+      newData.text = whitespaceCharactersToHTML(data.text);
       newData.labelName = data.labelName || this.defaultLabel.labelName;
       return newData;
     }
@@ -234,7 +251,7 @@ function () {
     key: "save",
     value: function save(toolsContent) {
       return {
-        text: toolsContent.innerHTML,
+        text: HTMLToWhitespaceCharacters(toolsContent.innerHTML),
         labelName: this.currentLabel.labelName
       };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.46",
+  "version": "2.0.48",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",