@searpent/react-image-annotate 2.0.18 → 2.0.20

package/Annotator/examplePhotos.js

@@ -786,10 +786,10 @@ var examplePhotos = [{
 }, {
   "id": "431fc636-d6d1-4e20-a35b-cc7a201c1833",
   "fullsize": {
-    "key": "https://www.gannett-cdn.com/presto/2022/01/12/NJDN/8088720b-446d-4693-be62-4dfdf1c3046f-DailyNewsSaturday.jpg?width=660&height=1253&fit=crop&format=pjpg&auto=webp"
+    "key": "https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
   },
   "thumbnail": {
-    "key": "https://www.gannett-cdn.com/presto/2022/01/12/NJDN/8088720b-446d-4693-be62-4dfdf1c3046f-DailyNewsSaturday.jpg?width=660&height=1253&fit=crop&format=pjpg&auto=webp"
+    "key": "https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
   },
   "modelResults": {
     "v1": [{

package/MainLayout/index.js

@@ -61,63 +61,72 @@ var FullScreenContainer = styled("div")(function (_ref2) {
     }
   };
 });
-var EditorWrapper = styled("div")(function (_ref3) {
+var WorkspaceWrapper = styled("div")(function (_ref3) {
   var theme = _ref3.theme;
   return {
-    width: "45%",
+    height: "100vh",
+    width: "auto",
+    backgroundColor: "red",
+    flex: 1
+  };
+});
+var EditorWrapper = styled("div")(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
     padding: "1rem",
     paddingLeft: "2rem",
     height: "100vh",
+    width: "30vw",
     overflowY: "scroll"
   };
 });
-export var MainLayout = function MainLayout(_ref4) {
+export var MainLayout = function MainLayout(_ref5) {
   var _state$images$state$s, _state$images$state$s2;
 
-  var state = _ref4.state,
-      dispatch = _ref4.dispatch,
-      _ref4$alwaysShowNextB = _ref4.alwaysShowNextButton,
-      alwaysShowNextButton = _ref4$alwaysShowNextB === void 0 ? false : _ref4$alwaysShowNextB,
-      _ref4$alwaysShowPrevB = _ref4.alwaysShowPrevButton,
-      alwaysShowPrevButton = _ref4$alwaysShowPrevB === void 0 ? false : _ref4$alwaysShowPrevB,
-      RegionEditLabel = _ref4.RegionEditLabel,
-      onRegionClassAdded = _ref4.onRegionClassAdded,
-      hideHeader = _ref4.hideHeader,
-      hideHeaderText = _ref4.hideHeaderText,
-      _ref4$hideNext = _ref4.hideNext,
-      hideNext = _ref4$hideNext === void 0 ? false : _ref4$hideNext,
-      _ref4$hidePrev = _ref4.hidePrev,
-      hidePrev = _ref4$hidePrev === void 0 ? false : _ref4$hidePrev,
-      _ref4$hideClone = _ref4.hideClone,
-      hideClone = _ref4$hideClone === void 0 ? false : _ref4$hideClone,
-      _ref4$hideSettings = _ref4.hideSettings,
-      hideSettings = _ref4$hideSettings === void 0 ? false : _ref4$hideSettings,
-      _ref4$hideFullScreen = _ref4.hideFullScreen,
-      hideFullScreen = _ref4$hideFullScreen === void 0 ? false : _ref4$hideFullScreen,
-      _ref4$hideSave = _ref4.hideSave,
-      hideSave = _ref4$hideSave === void 0 ? false : _ref4$hideSave,
-      _ref4$groups = _ref4.groups,
-      groups = _ref4$groups === void 0 ? [] : _ref4$groups,
-      _ref4$onGroupSelect = _ref4.onGroupSelect,
-      onGroupSelect = _ref4$onGroupSelect === void 0 ? function () {} : _ref4$onGroupSelect,
-      _ref4$hideHistory = _ref4.hideHistory,
-      hideHistory = _ref4$hideHistory === void 0 ? false : _ref4$hideHistory,
-      _ref4$hideNotEditingL = _ref4.hideNotEditingLabel,
-      hideNotEditingLabel = _ref4$hideNotEditingL === void 0 ? false : _ref4$hideNotEditingL,
-      _ref4$showEditor = _ref4.showEditor,
-      showEditor = _ref4$showEditor === void 0 ? false : _ref4$showEditor,
-      _ref4$showPageSelecto = _ref4.showPageSelector,
-      showPageSelector = _ref4$showPageSelecto === void 0 ? false : _ref4$showPageSelecto,
-      _ref4$onRecalc = _ref4.onRecalc,
-      onRecalc = _ref4$onRecalc === void 0 ? function () {} : _ref4$onRecalc,
-      _ref4$onSave = _ref4.onSave,
-      onSave = _ref4$onSave === void 0 ? function () {} : _ref4$onSave,
-      _ref4$recalcActive = _ref4.recalcActive,
-      recalcActive = _ref4$recalcActive === void 0 ? false : _ref4$recalcActive,
-      _ref4$saveActive = _ref4.saveActive,
-      saveActive = _ref4$saveActive === void 0 ? false : _ref4$saveActive,
-      onMetadataChange = _ref4.onMetadataChange,
-      onAddGroup = _ref4.onAddGroup;
+  var state = _ref5.state,
+      dispatch = _ref5.dispatch,
+      _ref5$alwaysShowNextB = _ref5.alwaysShowNextButton,
+      alwaysShowNextButton = _ref5$alwaysShowNextB === void 0 ? false : _ref5$alwaysShowNextB,
+      _ref5$alwaysShowPrevB = _ref5.alwaysShowPrevButton,
+      alwaysShowPrevButton = _ref5$alwaysShowPrevB === void 0 ? false : _ref5$alwaysShowPrevB,
+      RegionEditLabel = _ref5.RegionEditLabel,
+      onRegionClassAdded = _ref5.onRegionClassAdded,
+      hideHeader = _ref5.hideHeader,
+      hideHeaderText = _ref5.hideHeaderText,
+      _ref5$hideNext = _ref5.hideNext,
+      hideNext = _ref5$hideNext === void 0 ? false : _ref5$hideNext,
+      _ref5$hidePrev = _ref5.hidePrev,
+      hidePrev = _ref5$hidePrev === void 0 ? false : _ref5$hidePrev,
+      _ref5$hideClone = _ref5.hideClone,
+      hideClone = _ref5$hideClone === void 0 ? false : _ref5$hideClone,
+      _ref5$hideSettings = _ref5.hideSettings,
+      hideSettings = _ref5$hideSettings === void 0 ? false : _ref5$hideSettings,
+      _ref5$hideFullScreen = _ref5.hideFullScreen,
+      hideFullScreen = _ref5$hideFullScreen === void 0 ? false : _ref5$hideFullScreen,
+      _ref5$hideSave = _ref5.hideSave,
+      hideSave = _ref5$hideSave === void 0 ? false : _ref5$hideSave,
+      _ref5$groups = _ref5.groups,
+      groups = _ref5$groups === void 0 ? [] : _ref5$groups,
+      _ref5$onGroupSelect = _ref5.onGroupSelect,
+      onGroupSelect = _ref5$onGroupSelect === void 0 ? function () {} : _ref5$onGroupSelect,
+      _ref5$hideHistory = _ref5.hideHistory,
+      hideHistory = _ref5$hideHistory === void 0 ? false : _ref5$hideHistory,
+      _ref5$hideNotEditingL = _ref5.hideNotEditingLabel,
+      hideNotEditingLabel = _ref5$hideNotEditingL === void 0 ? false : _ref5$hideNotEditingL,
+      _ref5$showEditor = _ref5.showEditor,
+      showEditor = _ref5$showEditor === void 0 ? false : _ref5$showEditor,
+      _ref5$showPageSelecto = _ref5.showPageSelector,
+      showPageSelector = _ref5$showPageSelecto === void 0 ? false : _ref5$showPageSelecto,
+      _ref5$onRecalc = _ref5.onRecalc,
+      onRecalc = _ref5$onRecalc === void 0 ? function () {} : _ref5$onRecalc,
+      _ref5$onSave = _ref5.onSave,
+      onSave = _ref5$onSave === void 0 ? function () {} : _ref5$onSave,
+      _ref5$recalcActive = _ref5.recalcActive,
+      recalcActive = _ref5$recalcActive === void 0 ? false : _ref5$recalcActive,
+      _ref5$saveActive = _ref5.saveActive,
+      saveActive = _ref5$saveActive === void 0 ? false : _ref5$saveActive,
+      onMetadataChange = _ref5.onMetadataChange,
+      onAddGroup = _ref5.onAddGroup;
   var classes = useStyles();
   var settings = useSettings();
   var fullScreenHandle = useFullScreenHandle();
@@ -257,9 +266,9 @@ export var MainLayout = function MainLayout(_ref4) {
     return (i === null || i === void 0 ? void 0 : (_i$data = i.data) === null || _i$data === void 0 ? void 0 : _i$data.groupId) === selectedGroupId;
   });
 
-  var handleEditorChange = function handleEditorChange(_ref5) {
-    var imageIndex = _ref5.imageIndex,
-        data = _ref5.data;
+  var handleEditorChange = function handleEditorChange(_ref6) {
+    var imageIndex = _ref6.imageIndex,
+        data = _ref6.data;
     var newRegions = data.blocks.map(function (i) {
       return {
         id: i.id,
@@ -326,7 +335,10 @@ export var MainLayout = function MainLayout(_ref4) {
     saveActive: saveActive,
     recalcActive: recalcActive,
     onMetadataChange: onMetadataChange
-  }), React.createElement(Workspace, {
+  }), React.createElement(WorkspaceWrapper, null, React.createElement(Workspace, {
+    style: {
+      width: "auto"
+    },
     allowFullscreen: true,
     iconDictionary: iconDictionary,
     hideHeader: hideHeader,
@@ -465,7 +477,7 @@ export var MainLayout = function MainLayout(_ref4) {
       onAddGroup: onAddGroup,
       key: "groups-editor"
     })].filter(Boolean)
-  }, canvas), showEditor && React.createElement(EditorWrapper, {
+  }, canvas)), showEditor && React.createElement(EditorWrapper, {
     id: "editor-wrapper"
   }, React.createElement(Editor, {
     id: "editor",

package/PageSelector/index.js

@@ -7,7 +7,9 @@ function PageThumbnail(_ref) {
   var src = _ref.src,
       isActive = _ref.isActive,
       onClick = _ref.onClick,
-      pageNumber = _ref.pageNumber;
+      pageNumber = _ref.pageNumber,
+      metadata = _ref.metadata,
+      showMetadata = _ref.showMetadata;
   return React.createElement("div", {
     role: "button",
     tabIndex: 0,
@@ -15,14 +17,49 @@ function PageThumbnail(_ref) {
       'page-thumbnail-is-active': isActive
     }),
     onClick: onClick
+  }, React.createElement("div", {
+    className: "page-thumbnail-image-wrapper"
   }, React.createElement("img", {
     src: src,
-    alt: ""
-  }), pageNumber !== undefined && React.createElement("div", {
+    alt: "",
+    className: "page-thumbnail-image"
+  }), React.createElement("div", {
     className: "page-number-wrapper"
-  }, React.createElement("span", {
+  }, pageNumber !== undefined && !showMetadata && React.createElement("span", {
     className: "page-number"
-  }, pageNumber)));
+  }, pageNumber))), React.createElement("div", {
+    className: "page-thumbnail-metadata-wrapper"
+  }, React.createElement("label", {
+    htmlFor: true
+  }, "Page"), React.createElement("input", {
+    type: "text",
+    value: "2"
+  }), React.createElement("label", {
+    htmlFor: true
+  }, "Topic"), React.createElement("input", {
+    type: "text",
+    value: "012345678901234567890123456789"
+  }), React.createElement("label", {
+    htmlFor: true
+  }, "Mutation"), React.createElement("input", {
+    type: "text",
+    value: "2"
+  }), React.createElement("label", {
+    htmlFor: true
+  }, "Page"), React.createElement("input", {
+    type: "text",
+    value: "2"
+  }), React.createElement("label", {
+    htmlFor: true
+  }, "Topic"), React.createElement("input", {
+    type: "text",
+    value: "012345678901234567890123456789"
+  }), React.createElement("label", {
+    htmlFor: true
+  }, "Mutation"), React.createElement("input", {
+    type: "text",
+    value: "2"
+  })));
 }
 
 function PageSelector(_ref2) {
@@ -44,11 +81,43 @@ function PageSelector(_ref2) {
       'page-selector--opened': showMetadata
     })
   }, React.createElement("div", {
+    className: "top-buttons"
+  }, React.createElement("button", {
+    onClick: onRecalc,
+    disabled: !recalcActive,
+    className: "info"
+  }, "Recalc"), React.createElement("button", {
+    onClick: onSave,
+    disabled: !saveActive,
+    className: "success"
+  }, "Save"), React.createElement("div", {
+    className: "show-metadata-wrapper"
+  }, React.createElement("label", {
+    className: "switch mr-2"
+  }, React.createElement("input", {
+    id: "show-metadata",
+    type: "checkbox",
+    value: showMetadata,
+    onChange: function onChange() {
+      return setShowMetadata(function (prev) {
+        return !prev;
+      });
+    }
+  }), React.createElement("span", {
+    className: "slider round"
+  })), React.createElement("label", null, "Metadata"))), React.createElement("div", {
     className: "pages"
   }, pages.map(function (page, idx) {
-    return React.createElement("div", {
-      className: "page-thumbnail__wrapper"
-    }, "This is thumbnail ", page.id);
+    return React.createElement(PageThumbnail, {
+      key: "".concat(page.id),
+      src: page.src,
+      isActive: page.isActive,
+      onClick: function onClick() {
+        return onPageClick(idx);
+      },
+      metadata: page.metadata,
+      showMetadata: showMetadata
+    });
   })));
 }
 

package/PageSelector/page-selector.css

@@ -1,35 +1,39 @@
 .page-selector {
   height: 100vh;
   overflow-y: scroll;
-  /* max-width: 10%; */
-  transition: max-width .5s;
+  transition: width .5s;
 }
 
-.page-selector--opened {
-  /* max-width: 20%; */
-}
+.page-selector--opened {}
 
 .pages {
   list-style: none;
-}
-
-.page-thumbnail__wrapper {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: #2dce89;
-  /* width: 240px; */
-  width: 480px;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 16px;
 }
 
 .page-thumbnail {
-  /* width: 300px; */
+  height: 140px;
+  width: 100px;
   margin-bottom: 1rem;
-  border-radius: .25rem !important;
+  border-radius: 8px !important;
   overflow: hidden;
   filter: grayscale(1);
   transition: transform .2s;
-  opacity: .5;
+  transition: width .2s;
+  opacity: .75;
+  overflow: hidden;
+  background: linear-gradient(rgba(255, 255, 255, 0), #8898aa);
+  display: flex;
+  flex-direction: row;
+}
+
+.page-selector--opened .page-thumbnail {
+  width: 320px;
 }
 
 .page-thumbnail:hover {
@@ -45,8 +49,41 @@
   opacity: 1;
 }
 
-.page-thumbnail img {
+.page-thumbnail-image-wrapper {
+  width: 100px;
+  height: 100%;
+}
+
+.page-thumbnail-image {
+  width: 100px;
+  height: 100%;
+  object-fit: fill;
+  object-position: top;
+}
+
+.page-thumbnail-metadata-wrapper {
+  padding: 12px;
+  font-size: 12px;
   width: 100%;
+  overflow-y: scroll;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  scrollbar-width: none;
+}
+
+.page-thumbnail-metadata-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.page-selector--opened .page-thumbnail-metadata-wrapper {
+  grid-template-columns: 1fr 1fr;
+  row-gap: .5rem;
+  align-items: start;
+  justify-self: center;
+}
+
+.page-thumbnail-metadata-wrapper input {
+  max-width: 120px;
 }
 
 .page-thumbnail__metadata {

package/package.json

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