@searpent/react-image-annotate 2.0.65 → 2.0.67

package/Editor/annotation-plugin/annotation.js

@@ -55,7 +55,8 @@ function () {
       block: this.api.styles.block,
       settingsButton: this.api.styles.settingsButton,
       settingsButtonActive: this.api.styles.settingsButtonActive,
-      wrapper: 'ce-header'
+      wrapper: 'ce-header',
+      backgroundColor: (data === null || data === void 0 ? void 0 : data.highlighted) && (data === null || data === void 0 ? void 0 : data.clsColor) ? data.clsColor : undefined
     };
     /**
      * Tool's settings passed from Editor
@@ -273,8 +274,8 @@ function () {
        */
       var tag = document.createElement(this.currentLabel.tag);
 
-      if (this.currentLabel.backgroundColor) {
-        tag.style.backgroundColor = this.currentLabel.backgroundColor;
+      if (this._CSS.backgroundColor) {
+        tag.style.backgroundColor = this._CSS.backgroundColor;
       }
       /**
        * Add text to block
@@ -505,60 +506,73 @@ function () {
       var availableLabels = [{
         labelName: 'title',
         tag: 'h1',
-        name: 'title' // backgroundColor: '#d0fffe'
-
+        name: 'title',
+        backgroundColor: '#ffcccc'
       }, {
         labelName: 'subtitle',
         tag: 'h2',
-        name: 'subtitle'
+        name: 'subtitle',
+        backgroundColor: '#ffccff'
       }, {
         labelName: 'text',
         tag: 'p',
-        name: 'text'
+        name: 'text',
+        backgroundColor: '#14deef'
       }, {
         labelName: 'author',
         tag: 'i',
-        name: 'author'
+        name: 'author',
+        backgroundColor: '#00bb00'
       }, {
         labelName: 'appendix',
         tag: 'p',
-        name: 'appendix'
+        name: 'appendix',
+        backgroundColor: '#dcfcec'
       }, {
         labelName: 'photo_author',
         tag: 'p',
-        name: 'photo_author'
+        name: 'photo_author',
+        backgroundColor: '#bb0000'
       }, {
         labelName: 'photo_caption',
         tag: 'p',
-        name: 'photo_caption'
+        name: 'photo_caption',
+        backgroundColor: '#ccffff'
       }, {
         labelName: 'advertisement',
         tag: 'p',
-        name: 'advertisement'
+        name: 'advertisement',
+        backgroundColor: '#ffeccc'
       }, {
         labelName: 'other_graphics',
         tag: 'p',
-        name: 'other_graphics'
+        name: 'other_graphics',
+        backgroundColor: '#ff5400'
       }, {
         labelName: 'unknown',
         tag: 's',
-        name: 'unknown'
+        name: 'unknown',
+        backgroundColor: '#cccccc'
       }, {
         labelName: 'about_author',
         tag: 'p',
-        name: 'about_author'
+        name: 'about_author',
+        backgroundColor: '#ecffec'
       }, {
         labelName: 'image',
         tag: 'p',
-        name: 'image'
+        name: 'image',
+        backgroundColor: '#ffffcc'
       }, {
         labelName: 'interview',
         tag: 'p',
-        name: 'interview'
+        name: 'interview',
+        backgroundColor: '#23b20f'
       }, {
         labelName: 'table',
         tag: 'p',
-        name: 'table'
+        name: 'table',
+        backgroundColor: '#0000bb'
       }];
       return this._settings.labels ? availableLabels.filter(function (l) {
         return _this5._settings.labels.includes(l.labelName);

package/Editor/index.js

@@ -12,7 +12,8 @@ function Editor(_ref) {
   var _ref$blocks = _ref.blocks,
       blocks = _ref$blocks === void 0 ? [] : _ref$blocks,
       onChange = _ref.onChange,
-      imageIndex = _ref.imageIndex;
+      imageIndex = _ref.imageIndex,
+      selectedFrame = _ref.selectedFrame;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -84,7 +85,8 @@ function Editor(_ref) {
     },
     tools: EDITOR_JS_TOOLS,
     onChange: handleChange,
-    enableReInitialize: true
+    enableReInitialize: true,
+    key: selectedFrame
   }));
 }
 

package/MainLayout/index.js

@@ -39,7 +39,8 @@ import regionsGroups from '../utils/regions-groups';
 import RightSidebarItemsWrapper from './RightSidebarItemsWrapper';
 import Locker from '../Locker';
 import { reacalcActionsEnum } from "../utils/saveable-actions-enum";
-import intersection from "lodash/intersection"; // import Fullscreen from "../Fullscreen"
+import intersection from "lodash/intersection";
+import useColors from '../hooks/use-colors'; // import Fullscreen from "../Fullscreen"
 
 var emptyArr = [];
 var theme = createTheme();
@@ -87,7 +88,7 @@ var EditorWrapper = styled("div")(function (_ref4) {
   };
 });
 export var MainLayout = function MainLayout(_ref5) {
-  var _state$images$state$s, _state$images$state$s2, _state$images$state$s3;
+  var _state$images$state$s, _state$images$state$s2, _state$images$state$s3, _state$images$state$s4, _state$images$state$s5;
 
   var state = _ref5.state,
       dispatch = _ref5.dispatch,
@@ -133,6 +134,10 @@ export var MainLayout = function MainLayout(_ref5) {
   var classes = useStyles();
   var settings = useSettings();
   var fullScreenHandle = useFullScreenHandle();
+
+  var _useColors = useColors(),
+      clsColor = _useColors.clsColor;
+
   var memoizedActionFns = useRef({});
 
   var action = function action(type) {
@@ -268,7 +273,7 @@ export var MainLayout = function MainLayout(_ref5) {
   var extractionEngineRegions = (((_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : _state$images$state$s2.regions) || []).filter(function (r) {
     return r.cls !== 'metadata';
   });
-  var editorBlocks = regionsToBlocks(extractionEngineRegions);
+  var editorBlocks = regionsToBlocks(extractionEngineRegions, clsColor);
   var blocks = editorBlocks.filter(function (i) {
     var _i$data;
 
@@ -317,6 +322,9 @@ export var MainLayout = function MainLayout(_ref5) {
   };
 
   var isSelectedImageLocked = ((_state$images$state$s3 = state.images[state.selectedImage]) === null || _state$images$state$s3 === void 0 ? void 0 : _state$images$state$s3.lockedUntil) ? true : false;
+  var selectedFrame = ((_state$images$state$s4 = state.images[state.selectedImage]) === null || _state$images$state$s4 === void 0 ? void 0 : (_state$images$state$s5 = _state$images$state$s4.regions.find(function (i) {
+    return i.highlighted === true;
+  })) === null || _state$images$state$s5 === void 0 ? void 0 : _state$images$state$s5.id) || '';
   return React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement(FullScreenContainer, null, React.createElement(FullScreen, {
@@ -498,6 +506,7 @@ export var MainLayout = function MainLayout(_ref5) {
     blocks: blocks,
     imageIndex: state.selectedImage,
     key: "".concat(state.selectedImage, "#").concat(selectedGroupId),
+    selectedFrame: selectedFrame,
     onChange: handleEditorChange
   }))), React.createElement(SettingsDialog, {
     open: state.settingsOpen,

package/package.json

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

package/utils/regions-groups.js

@@ -6,6 +6,8 @@ function regionsGroups(regions) {
   }
 
   var groups = regions.reduce(function (acc, curr) {
+    var _curr$text;
+
     var groupId = curr.groupId;
 
     if (acc.some(function (e) {
@@ -16,7 +18,7 @@ function regionsGroups(regions) {
 
     acc.push({
       id: groupId,
-      label: curr.text.substring(0, MAX_GROUP_LENGTH)
+      label: (curr === null || curr === void 0 ? void 0 : (_curr$text = curr.text) === null || _curr$text === void 0 ? void 0 : _curr$text.substring(0, MAX_GROUP_LENGTH)) || groupId
     });
     return acc;
   }, []);

package/utils/regions-to-blocks.js

@@ -1,4 +1,4 @@
-function regionsToBlocks(regions) {
+function regionsToBlocks(regions, clsColor) {
   return regions.map(function (r) {
     return {
       id: r.id,
@@ -7,7 +7,9 @@ function regionsToBlocks(regions) {
         text: r.text || '',
         labelName: r.cls,
         groupColor: r.groupColor,
-        groupId: r.groupId
+        groupId: r.groupId,
+        clsColor: clsColor(r.cls),
+        highlighted: r.highlighted
       }
     };
   });