@searpent/react-image-annotate 2.1.0 → 2.1.1

package/Annotator/examplePhotos.js

@@ -750,68 +750,8 @@ var examplePhotos = [{
           "Y1": 0,
           "Y2": 1
         },
-        "text": "[{\"key\":\"articleType\",\"value\":\"news\",\"metadataId\":\"articleType-0\"}, {\"key\":\"section\",\"value\":\"editorial\",\"metadataId\":\"section-0\"}]",
-        "groupId": "0",
-        "id": "metadata-0"
-      }, {
-        "label": "metadata",
-        "score": 1,
-        "box": {
-          "X1": 0,
-          "X2": 1,
-          "Y1": 0,
-          "Y2": 1
-        },
-        "text": "[{\"key\":\"articleType\",\"value\":\"news\",\"metadataId\":\"articleType-1\"}, {\"key\":\"section\",\"value\":\"editorial\",\"metadataId\":\"section-1\"}]",
-        "groupId": "1",
-        "id": "metadata-1"
-      }, {
-        "label": "metadata",
-        "score": 1,
-        "box": {
-          "X1": 0,
-          "X2": 1,
-          "Y1": 0,
-          "Y2": 1
-        },
-        "text": "[{\"key\":\"articleType\",\"value\":\"news\",\"metadataId\":\"articleType-2\"}, {\"key\":\"section\",\"value\":\"editorial\",\"metadataId\":\"section-2\"}]",
-        "groupId": "2",
-        "id": "metadata-2"
-      }, {
-        "label": "metadata",
-        "score": 1,
-        "box": {
-          "X1": 0,
-          "X2": 1,
-          "Y1": 0,
-          "Y2": 1
-        },
-        "text": "[{\"key\":\"articleType\",\"value\":\"news\",\"metadataId\":\"articleType-3\"}, {\"key\":\"section\",\"value\":\"editorial\",\"metadataId\":\"section-3\"}]",
-        "groupId": "3",
-        "id": "metadata-3"
-      }, {
-        "label": "metadata",
-        "score": 1,
-        "box": {
-          "X1": 0,
-          "X2": 1,
-          "Y1": 0,
-          "Y2": 1
-        },
-        "text": "[{\"key\":\"articleType\",\"value\":\"news\",\"metadataId\":\"articleType-4\"}, {\"key\":\"section\",\"value\":\"editorial\",\"metadataId\":\"section-4\"}]",
-        "groupId": "4",
-        "id": "metadata-4"
-      }, {
-        "label": "metadata",
-        "score": 1,
-        "box": {
-          "X1": 0,
-          "X2": 1,
-          "Y1": 0,
-          "Y2": 1
-        },
-        "text": "[{\"key\":\"articleType\",\"value\":\"news\",\"metadataId\":\"articleType-5\"}, {\"key\":\"section\",\"value\":\"editorial\",\"metadataId\":\"section-5\"}]",
-        "groupId": "5",
+        "text": "[{\"key\":\"articleType\",\"value\":\"news\"}, {\"key\":\"section\",\"value\":\"editorial\"}]",
+        "groupId": "42ba09e0-b2f5-439d-bdae-201e7c37787b",
         "id": "aba453dd-f870-4510-ae40-a19eb52eb7d6"
       }, {
         "label": "metadata",
@@ -822,21 +762,9 @@ var examplePhotos = [{
           "Y1": 0,
           "Y2": 1
         },
-        "text": "[{\"key\":\"articleType\",\"value\":\"ads\",\"metadataId\":\"articleType-6\"}, {\"key\":\"section\",\"value\":\"last page\",\"metadataId\":\"section-6\"}]",
-        "groupId": "6",
+        "text": "[{\"key\":\"articleType\",\"value\":\"ads\"}, {\"key\":\"section\",\"value\":\"last page\"}]",
+        "groupId": "1",
         "id": "2615bf87-7247-4bde-a0f9-45413034a6a6"
-      }, {
-        "label": "metadata",
-        "score": 1,
-        "box": {
-          "X1": 0,
-          "X2": 1,
-          "Y1": 0,
-          "Y2": 1
-        },
-        "text": "[{\"key\":\"articleType\",\"value\":\"news\",\"metadataId\":\"articleType-uuid\"}, {\"key\":\"section\",\"value\":\"editorial\",\"metadataId\":\"section-uuid\"}]",
-        "groupId": "42ba09e0-b2f5-439d-bdae-201e7c37787b",
-        "id": "metadata-uuid"
       }]
     }]
   },

package/Annotator/index.js

@@ -3,7 +3,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useEffect, useReducer, useRef } from "react";
+import React, { useCallback, useEffect, useReducer } from "react";
 import makeImmutable, { without } from "seamless-immutable";
 import intersection from "lodash/intersection";
 import MainLayout from "../MainLayout";
@@ -145,28 +145,6 @@ export var Annotator = function Annotator(_ref) {
   var dispatch = useEventCallback(function (action) {
     if (action.type === "HEADER_BUTTON_CLICKED") {
       if (["Exit", "Done", "Save", "Complete"].includes(action.buttonName)) {
-        var _state$images$state$s, _state$images$state$s2;
-
-        // Before exiting, save current image if there are unsaved changes
-        if (state.selectedImage !== undefined && ((_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : (_state$images$state$s2 = _state$images$state$s.saveableActions) === null || _state$images$state$s2 === void 0 ? void 0 : _state$images$state$s2.length) > 0) {
-          var _currentImage$saveabl;
-
-          var currentImage = state.images[state.selectedImage];
-          var triggerRecalc = intersection(reacalcActionsEnum, currentImage.saveableActions).length > 0;
-          var toSaveMetadata = [];
-
-          if ((_currentImage$saveabl = currentImage.saveableActions) === null || _currentImage$saveabl === void 0 ? void 0 : _currentImage$saveabl.includes("UPDATE_ALBUM_METADATA")) {
-            toSaveMetadata = state.albumMetadata;
-          }
-
-          dispatchToReducer({
-            type: "SAVE_IMAGE",
-            image: _objectSpread({}, currentImage),
-            triggerRecalc: triggerRecalc,
-            toSaveMetadata: toSaveMetadata
-          });
-        }
-
         return onExit(without(state, "history"));
       } else if (action.buttonName === "Next" && onNextImage) {
         return onNextImage(without(state, "history"));
@@ -299,77 +277,7 @@ export var Annotator = function Annotator(_ref) {
           toSaveMetadata = _state$toSaveImage.toSaveMetadata;
       saveHandler(image, triggerRecalc, toSaveMetadata);
     }
-  }, [save, state.toSaveImage]); // Auto-save article metadata changes after a delay (debounced)
-
-  var autoSaveTimeoutRef = useRef(null);
-  var stateRef = useRef(state); // Keep stateRef in sync with state
-
-  useEffect(function () {
-    stateRef.current = state;
-  }, [state]);
-  useEffect(function () {
-    var _state$lastAction, _state$lastAction2;
-
-    // Only trigger on UPDATE_METADATA actions for article metadata (with groupId)
-    if (((_state$lastAction = state.lastAction) === null || _state$lastAction === void 0 ? void 0 : _state$lastAction.type) === 'UPDATE_METADATA' && ((_state$lastAction2 = state.lastAction) === null || _state$lastAction2 === void 0 ? void 0 : _state$lastAction2.groupId)) {
-      var _state$lastAction3 = state.lastAction,
-          name = _state$lastAction3.name,
-          value = _state$lastAction3.value,
-          imageIndex = _state$lastAction3.imageIndex,
-          groupId = _state$lastAction3.groupId; // Log the change
-
-      if (name === 'articleType') {
-        console.log("\u23F1\uFE0F  [AUTO-SAVE] ArticleType changed to \"".concat(value, "\" for group ").concat(groupId, ". Auto-save will trigger in 1 second..."));
-      } else {
-        console.log("\u23F1\uFE0F  [AUTO-SAVE] ".concat(name, " changed to \"").concat(value, "\" for group ").concat(groupId, ". Auto-save will trigger in 1 second..."));
-      } // Clear any existing timeout
-
-
-      if (autoSaveTimeoutRef.current) {
-        clearTimeout(autoSaveTimeoutRef.current);
-        console.log("\u23F1\uFE0F  [AUTO-SAVE] Previous auto-save cancelled, restarting timer...");
-      }
-
-      if (imageIndex !== undefined) {
-        // Debounce: wait 1 second after last change before saving
-        autoSaveTimeoutRef.current = setTimeout(function () {
-          var _latestState$images, _imageToSave$saveable;
-
-          // Read latest state from ref
-          var latestState = stateRef.current;
-          var imageToSave = latestState === null || latestState === void 0 ? void 0 : (_latestState$images = latestState.images) === null || _latestState$images === void 0 ? void 0 : _latestState$images[imageIndex]; // Double-check that there are still unsaved changes and image exists
-
-          if (imageToSave === null || imageToSave === void 0 ? void 0 : (_imageToSave$saveable = imageToSave.saveableActions) === null || _imageToSave$saveable === void 0 ? void 0 : _imageToSave$saveable.includes("UPDATE_METADATA")) {
-            var _imageToSave$saveable2;
-
-            console.log("\uD83D\uDCBE [AUTO-SAVE] Triggering auto-save for image ".concat(imageToSave.id, " (group ").concat(groupId, ")..."));
-            var triggerRecalc = intersection(reacalcActionsEnum, imageToSave.saveableActions).length > 0;
-            var toSaveMetadata = [];
-
-            if ((_imageToSave$saveable2 = imageToSave.saveableActions) === null || _imageToSave$saveable2 === void 0 ? void 0 : _imageToSave$saveable2.includes("UPDATE_ALBUM_METADATA")) {
-              toSaveMetadata = latestState.albumMetadata || [];
-            }
-
-            dispatchToReducer({
-              type: "SAVE_IMAGE",
-              image: _objectSpread({}, imageToSave),
-              triggerRecalc: triggerRecalc,
-              toSaveMetadata: toSaveMetadata
-            });
-          } else {
-            console.log("\u26A0\uFE0F  [AUTO-SAVE] Skipping auto-save - no unsaved changes for image ".concat(imageIndex));
-          }
-        }, 1000); // 1 second delay
-      }
-    } // Cleanup timeout on unmount or when dependencies change
-
-
-    return function () {
-      if (autoSaveTimeoutRef.current) {
-        clearTimeout(autoSaveTimeoutRef.current);
-      }
-    };
-  }, [state.lastAction, dispatchToReducer]); // polling of images
+  }, [save, state.toSaveImage]); // polling of images
 
   useEffect(function () {
     if (state.toPollImages.length > 0) {

package/Annotator/reducers/general-reducer.js

@@ -1240,7 +1240,7 @@ export default (function (state, action) {
             value: value
           });
         } else {
-          var _state$images$_imageI4, _state$images$_imageI5;
+          var _state$images$_imageI3, _state$images$_imageI4;
 
           // update metadata of article
           if (_groupId2) {
@@ -1266,42 +1266,24 @@ export default (function (state, action) {
               return state;
             }
 
-            var oldValue = articleMetadata[toBeUpdatedMetadataIdx].value;
-            articleMetadata[toBeUpdatedMetadataIdx].value = value; // Add saveableAction to the correct image (using imageIndex from action, not selectedImage)
-            // This ensures the saveableAction is added to the image being modified, not the currently selected one
-
-            if (state.images[_imageIndex]) {
-              var _state$images$_imageI3;
-
-              var currentSaveableActions = ((_state$images$_imageI3 = state.images[_imageIndex]) === null || _state$images$_imageI3 === void 0 ? void 0 : _state$images$_imageI3.saveableActions) || [];
-              state = setIn(state, ["images", _imageIndex, "saveableActions"], [].concat(_toConsumableArray(currentSaveableActions), ["UPDATE_METADATA"]));
-            }
-
+            articleMetadata[toBeUpdatedMetadataIdx].value = value;
+            state = addSaveableAction(state, "UPDATE_METADATA");
             return setIn(state, ["images", _imageIndex, "regions", articleMetadataRegionIdx], _objectSpread({}, articleRegionToUpdate, {
               text: JSON.stringify(articleMetadata)
             }));
           } // update metadata of image
 
 
-          var _metadataIndex = (_state$images$_imageI4 = state.images[_imageIndex]) === null || _state$images$_imageI4 === void 0 ? void 0 : (_state$images$_imageI5 = _state$images$_imageI4.metadata) === null || _state$images$_imageI5 === void 0 ? void 0 : _state$images$_imageI5.findIndex(function (mt) {
+          var _metadataIndex = (_state$images$_imageI3 = state.images[_imageIndex]) === null || _state$images$_imageI3 === void 0 ? void 0 : (_state$images$_imageI4 = _state$images$_imageI3.metadata) === null || _state$images$_imageI4 === void 0 ? void 0 : _state$images$_imageI4.findIndex(function (mt) {
             return mt.key === name;
           });
 
           if (_metadataIndex < 0) {
             console.error("can't find photo metadata by key \"".concat(name, "\""));
             return state;
-          } // Add saveableAction to the correct image (using imageIndex from action, not selectedImage)
-          // This ensures the saveableAction is added to the image being modified, not the currently selected one
-
-
-          if (state.images[_imageIndex]) {
-            var _state$images$_imageI6;
-
-            var _currentSaveableActions = ((_state$images$_imageI6 = state.images[_imageIndex]) === null || _state$images$_imageI6 === void 0 ? void 0 : _state$images$_imageI6.saveableActions) || [];
-
-            state = setIn(state, ["images", _imageIndex, "saveableActions"], [].concat(_toConsumableArray(_currentSaveableActions), ["UPDATE_METADATA"]));
           }
 
+          state = addSaveableAction(state, "UPDATE_METADATA");
           return setIn(state, ["images", _imageIndex, "metadata", _metadataIndex], {
             key: name,
             value: value

package/Editor/editor.css

@@ -0,0 +1,30 @@
+.editor-toggle-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem; /* space between Spellcheck and Edit mode rows */
+}
+
+/* Smaller toggle size only for Editor switches */
+.editor-switch.switch {
+  width: 44px;
+  height: 24px;
+}
+
+.editor-switch .slider {
+  border-radius: 24px;
+}
+
+.editor-switch .slider:before {
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  border-radius: 50%;
+}
+
+.editor-switch input:checked + .slider:before {
+  transform: translateX(18px);
+}
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",
@@ -60,7 +60,7 @@
     "storybook": "start-storybook -p 9090 -s public",
     "build": "npm run build:babel && cp ./package.json ./dist/package.json && cp ./README.md ./dist/README.md",
     "dist": "npm run build && cd dist && npm publish",
-    "build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js && cp src/PageSelector/page-selector.css dist/PageSelector/ && cp src/Locker/locker.css dist/Locker/ && cp src/Errorer/errorer.css dist/Errorer/ && cp src/Editor/annotation-plugin/annotation.css dist/Editor/annotation-plugin",
+    "build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js && cp src/PageSelector/page-selector.css dist/PageSelector/ && cp src/Locker/locker.css dist/Locker/ && cp src/Errorer/errorer.css dist/Errorer/ && cp src/Editor/editor.css dist/Editor/ && cp src/Editor/annotation-plugin/annotation.css dist/Editor/annotation-plugin",
     "build-storybook": "build-storybook",
     "build:gh-pages": "CI=false react-scripts build && mkdir build/demo && cp build/index.html build/demo/index.html",
     "gh-pages": "npm run build:gh-pages && gh-pages -d build",