@searpent/react-image-annotate 2.0.21 → 2.0.23

package/Annotator/index.js

@@ -229,7 +229,7 @@ export var Annotator = function Annotator(_ref2) {
 
 
   useEffect(function () {
-    if (!state.lastAction || !["BEGIN_BOX_TRANSFORM", "CHANGE_REGION", "DELETE_REGION"].includes(state.lastAction.type)) {
+    if (!state.lastAction || !["BEGIN_BOX_TRANSFORM", "CHANGE_REGION", "DELETE_REGION", "UPDATE_METADATA"].includes(state.lastAction.type)) {
       return;
     }
 

package/ImageCanvas/index.js

@@ -302,7 +302,6 @@ export var ImageCanvas = function ImageCanvas(_ref2) {
     style: {
       width: "100%",
       height: "100vh",
-      maxHeight: "calc(100vh - 68px)",
       position: "relative",
       overflow: "hidden",
       cursor: createWithPrimary ? "crosshair" : dragging ? "grabbing" : dragWithPrimary ? "grab" : zoomWithPrimary ? mat.a < 1 ? "zoom-out" : "zoom-in" : undefined

package/PageSelector/index.js

@@ -9,67 +9,63 @@ function PageThumbnail(_ref) {
       onClick = _ref.onClick,
       pageNumber = _ref.pageNumber,
       metadata = _ref.metadata,
-      showMetadata = _ref.showMetadata;
+      showMetadata = _ref.showMetadata,
+      imageIndex = _ref.imageIndex,
+      onMetadataChange = _ref.onMetadataChange;
+
+  var handleChange = function handleChange(e) {
+    e.preventDefault();
+    var _e$target = e.target,
+        name = _e$target.name,
+        value = _e$target.value;
+    onMetadataChange({
+      name: name,
+      value: value,
+      imageIndex: imageIndex
+    });
+  };
+
   return React.createElement("div", {
     role: "button",
     tabIndex: 0,
-    className: classnames('page-thumbnail', {
-      'page-thumbnail-is-active': isActive
+    className: classnames('ps-page-thumbnail', {
+      'ps-page-thumbnail-is-active': isActive
     }),
     onClick: onClick
   }, React.createElement("div", {
-    className: "page-thumbnail-image-wrapper"
+    className: "ps-page-thumbnail-image-wrapper"
   }, React.createElement("img", {
     src: src,
     alt: "",
-    className: "page-thumbnail-image"
+    className: "ps-page-thumbnail-image"
   }), React.createElement("div", {
     className: "page-number-wrapper"
   }, pageNumber !== undefined && !showMetadata && React.createElement("span", {
     className: "page-number"
   }, 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"
+    className: "ps-page-thumbnail-metadata-wrapper"
+  }, metadata.map(function (_ref2) {
+    var key = _ref2.key,
+        value = _ref2.value;
+    return React.createElement(React.Fragment, null, React.createElement("label", {
+      for: key
+    }, key), React.createElement("input", {
+      type: "text",
+      value: value,
+      name: key,
+      onChange: handleChange
+    }));
   })));
 }
 
-function PageSelector(_ref2) {
-  var pages = _ref2.pages,
-      onPageClick = _ref2.onPageClick,
-      onRecalc = _ref2.onRecalc,
-      onSave = _ref2.onSave,
-      recalcActive = _ref2.recalcActive,
-      saveActive = _ref2.saveActive,
-      onMetadataChange = _ref2.onMetadataChange;
+function PageSelector(_ref3) {
+  var pages = _ref3.pages,
+      onPageClick = _ref3.onPageClick,
+      onRecalc = _ref3.onRecalc,
+      onSave = _ref3.onSave,
+      recalcActive = _ref3.recalcActive,
+      saveActive = _ref3.saveActive,
+      onMetadataChange = _ref3.onMetadataChange;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -116,7 +112,9 @@ function PageSelector(_ref2) {
         return onPageClick(idx);
       },
       metadata: page.metadata,
-      showMetadata: showMetadata
+      showMetadata: showMetadata,
+      imageIndex: page.id,
+      onMetadataChange: onMetadataChange
     });
   })));
 }

package/PageSelector/page-selector.css

@@ -16,7 +16,7 @@
   padding: 16px;
 }
 
-.page-thumbnail {
+.ps-page-thumbnail {
   height: 140px;
   width: 100px;
   margin-bottom: 1rem;
@@ -32,11 +32,11 @@
   flex-direction: row;
 }
 
-.page-selector--opened .page-thumbnail {
+.page-selector--opened .ps-page-thumbnail {
   width: 320px;
 }
 
-.page-thumbnail:hover {
+.ps-page-thumbnail:hover {
   box-shadow: 0 0 2rem 0 #8898aa !important;
   filter: grayscale(0);
   transform: scale(1.015);
@@ -44,23 +44,24 @@
   opacity: 1;
 }
 
-.page-thumbnail-is-active {
+.ps-page-thumbnail-is-active {
   filter: grayscale(0);
   opacity: 1;
 }
 
-.page-thumbnail-image-wrapper {
+.ps-page-thumbnail-image-wrapper {
   width: 100px;
   height: 100%;
 }
 
-.page-thumbnail-image {
-  width: 100px !important;
-  object-fit: fill;
+.ps-page-thumbnail-image {
+  width: 100px;
+  height: 140px;
+  object-fit: cover;
   object-position: top;
 }
 
-.page-thumbnail-metadata-wrapper {
+.ps-page-thumbnail-metadata-wrapper {
   padding: 12px;
   font-size: 12px;
   width: 100%;
@@ -70,26 +71,26 @@
   scrollbar-width: none;
 }
 
-.page-thumbnail-metadata-wrapper::-webkit-scrollbar {
+.ps-page-thumbnail-metadata-wrapper::-webkit-scrollbar {
   display: none;
 }
 
-.page-selector--opened .page-thumbnail-metadata-wrapper {
+.page-selector--opened .ps-page-thumbnail-metadata-wrapper {
   grid-template-columns: 1fr 1fr;
   row-gap: .5rem;
   align-items: start;
   justify-self: center;
 }
 
-.page-thumbnail-metadata-wrapper input {
+.ps-page-thumbnail-metadata-wrapper input {
   max-width: 120px;
 }
 
-.page-thumbnail__metadata {
+.ps-page-thumbnail__metadata {
   padding: 1rem;
 }
 
-.page-thumbnail__metadata * {
+.ps-page-thumbnail__metadata * {
   display: block;
 }
 

package/package.json

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