@searpent/react-image-annotate 2.0.19 → 2.0.20

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

@@ -1,27 +1,15 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import classnames from "classnames";
-import './page-selector.css'; // {
-//               showMetadata && (
-//                 <div className="page-thumbnail__metadata">
-//                   <h5>Metadata</h5>
-//                   {
-//                     page?.metadata?.map(({ key, value }) => (
-//                       <div key={key}>
-//                         <label htmlFor={key}>{key}</label>
-//                         <input id={key} type="text" value={value} onChange={(e) => onMetadataChange({ name: key, value: e.target.value, imageIndex: idx })} />
-//                       </div>
-//                     ))
-//                   }
-//                 </div>
-//               )
-//             }
+import './page-selector.css';
 
 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,
@@ -29,15 +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: "",
     className: "page-thumbnail-image"
   }), React.createElement("div", {
     className: "page-number-wrapper"
-  }, pageNumber !== undefined && 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) {
@@ -92,7 +114,9 @@ function PageSelector(_ref2) {
       isActive: page.isActive,
       onClick: function onClick() {
         return onPageClick(idx);
-      }
+      },
+      metadata: page.metadata,
+      showMetadata: showMetadata
     });
   })));
 }

package/PageSelector/page-selector.css

@@ -1,13 +1,10 @@
 .page-selector {
   height: 100vh;
   overflow-y: scroll;
-  width: 240px;
   transition: width .5s;
 }
 
-.page-selector--opened {
-  width: 520px;
-}
+.page-selector--opened {}
 
 .pages {
   list-style: none;
@@ -15,24 +12,28 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
+  box-sizing: border-box;
+  padding: 16px;
 }
 
 .page-thumbnail {
   height: 140px;
   width: 100px;
   margin-bottom: 1rem;
-  border-radius: .25rem !important;
+  border-radius: 8px !important;
   overflow: hidden;
   filter: grayscale(1);
   transition: transform .2s;
   transition: width .2s;
   opacity: .75;
   overflow: hidden;
-  border: 1px solid #8898aa;
+  background: linear-gradient(rgba(255, 255, 255, 0), #8898aa);
+  display: flex;
+  flex-direction: row;
 }
 
 .page-selector--opened .page-thumbnail {
-  width: 240px;
+  width: 320px;
 }
 
 .page-thumbnail:hover {
@@ -48,13 +49,43 @@
   opacity: 1;
 }
 
+.page-thumbnail-image-wrapper {
+  width: 100px;
+  height: 100%;
+}
+
 .page-thumbnail-image {
-  width: 100%;
+  width: 100px;
   height: 100%;
-  object-fit: cover;
+  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 {
   padding: 1rem;
 }
@@ -204,16 +235,4 @@ input:checked+.slider:before {
 
 .mr-2 {
   margin-right: 1rem;
-}
-
-.thumbnail-metadata {
-  background-color: #2dce89;
-  overflow-y: scroll;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  row-gap: .5rem;
-}
-
-.thumbnail-metadata label {
-  font-size: 12px;
 }

package/package.json

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