@searpent/react-image-annotate 2.0.17 → 2.0.19

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

@@ -66,7 +66,9 @@ var EditorWrapper = styled("div")(function (_ref3) {
   return {
     width: "45%",
     padding: "1rem",
-    paddingLeft: "2rem"
+    paddingLeft: "2rem",
+    height: "100vh",
+    overflowY: "scroll"
   };
 });
 export var MainLayout = function MainLayout(_ref4) {

package/PageSelector/index.js

@@ -1,7 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import classnames from "classnames";
-import './page-selector.css';
+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>
+//               )
+//             }
 
 function PageThumbnail(_ref) {
   var src = _ref.src,
@@ -17,12 +31,13 @@ function PageThumbnail(_ref) {
     onClick: onClick
   }, 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 && React.createElement("span", {
     className: "page-number"
-  }, pageNumber)));
+  }, pageNumber)), " */");
 }
 
 function PageSelector(_ref2) {
@@ -71,39 +86,14 @@ function PageSelector(_ref2) {
   })), React.createElement("label", null, "Metadata"))), React.createElement("div", {
     className: "pages"
   }, pages.map(function (page, idx) {
-    var _page$metadata;
-
-    return React.createElement("div", {
-      className: "page-thumbnail__wrapper"
-    }, React.createElement(PageThumbnail, {
+    return React.createElement(PageThumbnail, {
       key: "".concat(page.id),
       src: page.src,
       isActive: page.isActive,
       onClick: function onClick() {
         return onPageClick(idx);
       }
-    }), showMetadata && React.createElement("div", {
-      className: "page-thumbnail__metadata"
-    }, React.createElement("h5", null, "Metadata"), page === null || page === void 0 ? void 0 : (_page$metadata = page.metadata) === null || _page$metadata === void 0 ? void 0 : _page$metadata.map(function (_ref3) {
-      var key = _ref3.key,
-          value = _ref3.value;
-      return React.createElement("div", {
-        key: key
-      }, React.createElement("label", {
-        htmlFor: key
-      }, key), React.createElement("input", {
-        id: key,
-        type: "text",
-        value: value,
-        onChange: function onChange(e) {
-          return onMetadataChange({
-            name: key,
-            value: e.target.value,
-            imageIndex: idx
-          });
-        }
-      }));
-    })));
+    });
   })));
 }
 

package/PageSelector/page-selector.css

@@ -1,32 +1,38 @@
 .page-selector {
   height: 100vh;
   overflow-y: scroll;
-  max-width: 10%;
-  transition: max-width .5s;
+  width: 240px;
+  transition: width .5s;
 }
 
 .page-selector--opened {
-  max-width: 20%;
+  width: 520px;
 }
 
 .pages {
   list-style: none;
-  padding: 1rem;
-}
-
-.page-thumbnail__wrapper {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
 }
 
 .page-thumbnail {
+  height: 140px;
+  width: 100px;
   margin-bottom: 1rem;
   border-radius: .25rem !important;
   overflow: hidden;
   filter: grayscale(1);
   transition: transform .2s;
-  opacity: .5;
+  transition: width .2s;
+  opacity: .75;
+  overflow: hidden;
+  border: 1px solid #8898aa;
+}
+
+.page-selector--opened .page-thumbnail {
+  width: 240px;
 }
 
 .page-thumbnail:hover {
@@ -42,8 +48,11 @@
   opacity: 1;
 }
 
-.page-thumbnail img {
+.page-thumbnail-image {
   width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
 }
 
 .page-thumbnail__metadata {
@@ -195,4 +204,16 @@ 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.17",
+  "version": "2.0.19",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",