@searpent/react-image-annotate 2.0.22 → 2.0.24

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

@@ -4,12 +4,31 @@ import classnames from "classnames";
 import './page-selector.css';
 
 function PageThumbnail(_ref) {
+  var _metadata$find, _metadata$find$call;
+
   var src = _ref.src,
       isActive = _ref.isActive,
       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
+    });
+  };
+
+  var pageNumber = metadata === null || metadata === void 0 ? void 0 : (_metadata$find = metadata.find) === null || _metadata$find === void 0 ? void 0 : (_metadata$find$call = _metadata$find.call(metadata, function (md) {
+    return md.key === 'page';
+  })) === null || _metadata$find$call === void 0 ? void 0 : _metadata$find$call.value;
   return React.createElement("div", {
     role: "button",
     tabIndex: 0,
@@ -29,47 +48,31 @@ function PageThumbnail(_ref) {
     className: "page-number"
   }, pageNumber))), React.createElement("div", {
     className: "ps-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"
+  }, 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,
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }));
   })));
 }
 
-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 +119,9 @@ function PageSelector(_ref2) {
         return onPageClick(idx);
       },
       metadata: page.metadata,
-      showMetadata: showMetadata
+      showMetadata: showMetadata,
+      imageIndex: page.id,
+      onMetadataChange: onMetadataChange
     });
   })));
 }

package/PageSelector/page-selector.css

@@ -69,19 +69,15 @@
   display: grid;
   grid-template-columns: 1fr 2fr;
   scrollbar-width: none;
+  row-gap: .5rem;
+  align-items: start;
+  justify-self: center;
 }
 
 .ps-page-thumbnail-metadata-wrapper::-webkit-scrollbar {
   display: none;
 }
 
-.page-selector--opened .ps-page-thumbnail-metadata-wrapper {
-  grid-template-columns: 1fr 1fr;
-  row-gap: .5rem;
-  align-items: start;
-  justify-self: center;
-}
-
 .ps-page-thumbnail-metadata-wrapper input {
   max-width: 120px;
 }

package/package.json

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