@searpent/react-image-annotate 2.0.18 → 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/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) {
@@ -44,11 +59,41 @@ 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);
+      }
+    });
   })));
 }
 

package/PageSelector/page-selector.css

@@ -1,35 +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;
-}
-
-.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%;
 }
 
 .page-thumbnail {
-  /* width: 300px; */
+  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 {
@@ -45,8 +48,11 @@
   opacity: 1;
 }
 
-.page-thumbnail img {
+.page-thumbnail-image {
   width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
 }
 
 .page-thumbnail__metadata {
@@ -198,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.18",
+  "version": "2.0.19",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",