@searpent/react-image-annotate 2.0.41 → 2.0.43

package/Annotator/index.js

@@ -77,7 +77,8 @@ export var Annotator = function Annotator(_ref) {
       onRecalc = _ref.onRecalc,
       onSave = _ref.onSave,
       albumMetadata = _ref.albumMetadata,
-      metadataConfigs = _ref.metadataConfigs;
+      metadataConfigs = _ref.metadataConfigs,
+      lockedImages = _ref.lockedImages;
 
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex(function (img) {
@@ -172,7 +173,8 @@ export var Annotator = function Annotator(_ref) {
               return onSave({
                 images: state.images,
                 albumMetadata: state.albumMetadata,
-                createdAt: createdAt
+                createdAt: createdAt,
+                selectedImage: state === null || state === void 0 ? void 0 : state.selectedImage
               });
 
             case 5:
@@ -274,7 +276,8 @@ export var Annotator = function Annotator(_ref) {
     saveActive: recalcActive,
     recalcActive: saveActive,
     onMetadataChange: handleMetadataChange,
-    onAddGroup: handleAddGroup
+    onAddGroup: handleAddGroup,
+    lockedImages: lockedImages
   }));
 };
 export default Annotator;

package/Locker/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import LockIcon from '@mui/icons-material/Lock';
+import './locker.css';
+
+function Locker() {
+  return React.createElement("div", {
+    className: "locker"
+  }, React.createElement(LockIcon, null));
+}
+
+export default Locker;

package/Locker/locker.css

@@ -0,0 +1,21 @@
+.locker {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: .75;
+  animation: skeleton-loading 1s linear infinite alternate;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}

package/MainLayout/index.js

@@ -36,7 +36,8 @@ import Editor from "../Editor";
 import regionsToBlocks from '../utils/regions-to-blocks';
 import PageSelector from "../PageSelector";
 import regionsGroups from '../utils/regions-groups';
-import RightSidebarItemsWrapper from './RightSidebarItemsWrapper'; // import Fullscreen from "../Fullscreen"
+import RightSidebarItemsWrapper from './RightSidebarItemsWrapper';
+import Locker from '../Locker'; // import Fullscreen from "../Fullscreen"
 
 var emptyArr = [];
 var theme = createTheme();
@@ -84,7 +85,7 @@ var EditorWrapper = styled("div")(function (_ref4) {
   };
 });
 export var MainLayout = function MainLayout(_ref5) {
-  var _state$images$state$s, _state$images$state$s2;
+  var _state$images$state$s, _state$images$state$s2, _state$images$state$s3;
 
   var state = _ref5.state,
       dispatch = _ref5.dispatch,
@@ -129,7 +130,8 @@ export var MainLayout = function MainLayout(_ref5) {
       _ref5$saveActive = _ref5.saveActive,
       saveActive = _ref5$saveActive === void 0 ? false : _ref5$saveActive,
       onMetadataChange = _ref5.onMetadataChange,
-      onAddGroup = _ref5.onAddGroup;
+      onAddGroup = _ref5.onAddGroup,
+      lockedImages = _ref5.lockedImages;
   var classes = useStyles();
   var settings = useSettings();
   var fullScreenHandle = useFullScreenHandle();
@@ -296,7 +298,7 @@ export var MainLayout = function MainLayout(_ref5) {
     var _i$metadata, _i$metadata$find;
 
     return {
-      id: "".concat(idx),
+      id: "".concat(i.id),
       src: i.src,
       isActive: idx === state.selectedImage,
       pageNumber: (i === null || i === void 0 ? void 0 : (_i$metadata = i.metadata) === null || _i$metadata === void 0 ? void 0 : (_i$metadata$find = _i$metadata.find(function (md) {
@@ -313,6 +315,7 @@ export var MainLayout = function MainLayout(_ref5) {
     });
   };
 
+  var isSelectedImageLocked = lockedImages.includes(state === null || state === void 0 ? void 0 : (_state$images$state$s3 = state.images[state.selectedImage]) === null || _state$images$state$s3 === void 0 ? void 0 : _state$images$state$s3.id);
   return React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement(FullScreenContainer, null, React.createElement(FullScreen, {
@@ -338,6 +341,7 @@ export var MainLayout = function MainLayout(_ref5) {
     }
   }, showPageSelector && React.createElement(PageSelector, {
     pages: pages,
+    lockedImages: lockedImages,
     onPageClick: handlePageClick,
     onRecalc: onRecalc,
     onSave: onSave,
@@ -427,7 +431,7 @@ export var MainLayout = function MainLayout(_ref5) {
     }].filter(Boolean).filter(function (a) {
       return a.alwaysShowing || state.enabledTools.includes(a.name);
     }),
-    rightSidebarItems: [React.createElement(RightSidebarItemsWrapper, null, [debugModeOn && React.createElement(DebugBox, {
+    rightSidebarItems: [React.createElement(RightSidebarItemsWrapper, null, [isSelectedImageLocked && React.createElement(Locker, null), debugModeOn && React.createElement(DebugBox, {
       state: debugModeOn,
       lastAction: state.lastAction,
       key: "debug-box"
@@ -490,7 +494,7 @@ export var MainLayout = function MainLayout(_ref5) {
       onAddGroup: onAddGroup,
       key: "groups-editor"
     })].filter(Boolean))]
-  }, canvas)), showEditor && React.createElement(EditorWrapper, {
+  }, isSelectedImageLocked && React.createElement(Locker, null), canvas)), showEditor && !isSelectedImageLocked && React.createElement(EditorWrapper, {
     id: "editor-wrapper"
   }, React.createElement(Editor, {
     id: "editor",

package/PageSelector/index.js

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import classnames from "classnames";
 import './page-selector.css';
+import Locker from '../Locker';
 
 function PageThumbnail(_ref) {
   var _metadata$find, _metadata$find$call;
@@ -14,7 +15,8 @@ function PageThumbnail(_ref) {
       imageIndex = _ref.imageIndex,
       onMetadataChange = _ref.onMetadataChange,
       _ref$metadataConfigs = _ref.metadataConfigs,
-      metadataConfigs = _ref$metadataConfigs === void 0 ? [] : _ref$metadataConfigs;
+      metadataConfigs = _ref$metadataConfigs === void 0 ? [] : _ref$metadataConfigs,
+      isLocked = _ref.isLocked;
 
   var handleChange = function handleChange(e) {
     e.preventDefault();
@@ -35,10 +37,11 @@ function PageThumbnail(_ref) {
     role: "button",
     tabIndex: 0,
     className: classnames('ps-page-thumbnail', {
-      'ps-page-thumbnail-is-active': isActive
+      'ps-page-thumbnail-is-active': isActive,
+      'ps-page-thumbnail-disabled': isLocked
     }),
     onClick: onClick
-  }, React.createElement("div", {
+  }, isLocked && React.createElement(Locker, null), React.createElement("div", {
     className: "ps-page-thumbnail-image-wrapper"
   }, React.createElement("img", {
     src: src,
@@ -88,7 +91,9 @@ function PageSelector(_ref3) {
       recalcActive = _ref3.recalcActive,
       saveActive = _ref3.saveActive,
       onMetadataChange = _ref3.onMetadataChange,
-      metadataConfigs = _ref3.metadataConfigs;
+      metadataConfigs = _ref3.metadataConfigs,
+      _ref3$lockedImages = _ref3.lockedImages,
+      lockedImages = _ref3$lockedImages === void 0 ? [] : _ref3$lockedImages;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -129,6 +134,7 @@ function PageSelector(_ref3) {
   }, pages.map(function (page, idx) {
     return React.createElement(PageThumbnail, {
       key: "".concat(page.id),
+      isLocked: lockedImages.includes(page.id),
       src: page.src,
       isActive: page.isActive,
       onClick: function onClick() {

package/PageSelector/page-selector.css

@@ -49,6 +49,10 @@
   opacity: 1;
 }
 
+.ps-page-thumbnail-disabled {
+  pointer-events: none;
+}
+
 .ps-page-thumbnail-image-wrapper {
   width: 100px;
   height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.41",
+  "version": "2.0.43",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",
@@ -59,7 +59,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/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/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",