@searpent/react-image-annotate 2.3.3 → 2.3.5

package/PageSelector/index.js

@@ -4,6 +4,7 @@ import classnames from "classnames";
 import './page-selector.css';
 import Locker from '../Locker';
 import Errorer from '../Errorer';
+import UpdatedBySemaphore from './UpdatedBySemaphore';
 
 function PageThumbnail(_ref) {
   var _metadata$find, _metadata$find$call;
@@ -46,60 +47,93 @@ function PageThumbnail(_ref) {
   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 === 'pageNumber';
   })) === null || _metadata$find$call === void 0 ? void 0 : _metadata$find$call.value;
-  return React.createElement("div", {
-    role: "button",
-    tabIndex: 0,
-    className: classnames('ps-page-thumbnail', {
-      'ps-page-thumbnail-is-active': isActive
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      className: classnames('ps-page-thumbnail', {
+        'ps-page-thumbnail-is-active': isActive
+      }),
+      onClick: onClick
+    }, isLocked &&
+    /*#__PURE__*/
+    React.createElement(Locker, null), error &&
+    /*#__PURE__*/
+    React.createElement(Errorer, {
+      errorMessage: error.message
     }),
-    onClick: onClick
-  }, isLocked && React.createElement(Locker, null), error && React.createElement(Errorer, {
-    errorMessage: error.message
-  }), React.createElement("div", {
-    className: "ps-page-thumbnail-image-wrapper"
-  }, isRecalcReady && React.createElement("div", {
-    className: "ps-page-thumbnail-recalc-wrapper"
-  }, React.createElement("button", {
-    className: "recalc-button",
-    onClick: handleRecalcClick
-  }, "Extract")), React.createElement("img", {
-    src: src,
-    alt: "",
-    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: "ps-page-thumbnail-metadata-wrapper"
-  }, metadata.map(function (_ref2) {
-    var _metadataConfigs$find;
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "ps-page-thumbnail-image-wrapper"
+    }, isRecalcReady &&
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "ps-page-thumbnail-recalc-wrapper"
+    },
+    /*#__PURE__*/
+    React.createElement("button", {
+      className: "recalc-button",
+      onClick: handleRecalcClick
+    }, "Extract")),
+    /*#__PURE__*/
+    React.createElement("img", {
+      src: src,
+      alt: "",
+      className: "ps-page-thumbnail-image"
+    }),
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "page-number-wrapper"
+    }, pageNumber !== undefined && !showMetadata &&
+    /*#__PURE__*/
+    React.createElement("span", {
+      className: "page-number"
+    }, pageNumber))),
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "ps-page-thumbnail-metadata-wrapper"
+    }, metadata.map(function (_ref2) {
+      var _metadataConfigs$find;
 
-    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();
-      },
-      id: key,
-      list: "".concat(key, "-list")
-    }), React.createElement("datalist", {
-      id: "".concat(key, "-list")
-    }, (_metadataConfigs$find = metadataConfigs.find(function (mcf) {
-      return mcf.key === key;
-    })) === null || _metadataConfigs$find === void 0 ? void 0 : _metadataConfigs$find.options.map(function (opt) {
-      return React.createElement("option", {
-        key: opt,
-        value: opt
-      });
-    })));
-  })));
+      var key = _ref2.key,
+          value = _ref2.value;
+      return (
+        /*#__PURE__*/
+        React.createElement(React.Fragment, null,
+        /*#__PURE__*/
+        React.createElement("label", {
+          "for": key
+        }, key),
+        /*#__PURE__*/
+        React.createElement("input", {
+          type: "text",
+          value: value,
+          name: key,
+          onChange: handleChange,
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          },
+          id: key,
+          list: "".concat(key, "-list")
+        }),
+        /*#__PURE__*/
+        React.createElement("datalist", {
+          id: "".concat(key, "-list")
+        }, (_metadataConfigs$find = metadataConfigs.find(function (mcf) {
+          return mcf.key === key;
+        })) === null || _metadataConfigs$find === void 0 ? void 0 : _metadataConfigs$find.options.map(function (opt) {
+          return (
+            /*#__PURE__*/
+            React.createElement("option", {
+              key: opt,
+              value: opt
+            })
+          );
+        })))
+      );
+    })))
+  );
 }
 
 function isLocked(page) {
@@ -115,60 +149,102 @@ function isLocked(page) {
 }
 
 function PageSelector(_ref3) {
+  var _ref4, _ref5;
+
   var pages = _ref3.pages,
       onPageClick = _ref3.onPageClick,
       onMetadataChange = _ref3.onMetadataChange,
       metadataConfigs = _ref3.metadataConfigs,
-      onRecalcClick = _ref3.onRecalcClick;
+      onRecalcClick = _ref3.onRecalcClick,
+      updatedBy = _ref3.updatedBy;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       showMetadata = _useState2[0],
       setShowMetadata = _useState2[1];
 
-  return React.createElement("div", {
-    className: classnames('page-selector', {
-      'page-selector--opened': showMetadata
-    })
-  }, React.createElement("div", {
-    className: "top-buttons"
-  }, 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(PageThumbnail, {
-      key: "".concat(page.id),
-      isLocked: isLocked(page),
-      error: page.syncError,
-      src: page.src,
-      isActive: page.isActive,
-      onClick: function onClick() {
-        return onPageClick(idx);
-      },
-      metadata: page.metadata,
-      showMetadata: showMetadata,
-      imageIndex: idx,
-      imageId: page.id,
-      onMetadataChange: onMetadataChange,
-      metadataConfigs: metadataConfigs,
-      onRecalcClick: onRecalcClick,
-      isRecalcReady: page.isRecalcReady
-    });
-  })));
+  var activePage = pages.find(function (p) {
+    return p.isActive;
+  });
+  var selectionKey = (_ref4 = (_ref5 = activePage === null || activePage === void 0 ? void 0 : activePage.id) !== null && _ref5 !== void 0 ? _ref5 : activePage === null || activePage === void 0 ? void 0 : activePage.src) !== null && _ref4 !== void 0 ? _ref4 : String(pages.length);
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classnames('page-selector', {
+        'page-selector--opened': showMetadata
+      })
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "top-buttons"
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "page-selector-top-controls"
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "show-metadata-wrapper"
+    },
+    /*#__PURE__*/
+    React.createElement("label", {
+      className: "switch mr-2"
+    },
+    /*#__PURE__*/
+    React.createElement("input", {
+      id: "show-metadata",
+      type: "checkbox",
+      value: showMetadata,
+      onChange: function onChange() {
+        return setShowMetadata(function (prev) {
+          return !prev;
+        });
+      }
+    }),
+    /*#__PURE__*/
+    React.createElement("span", {
+      className: "slider round"
+    })),
+    /*#__PURE__*/
+    React.createElement("label", {
+      className: "ps-top-bar-label"
+    }, "Metadata")), updatedBy !== undefined && updatedBy !== null &&
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "ps-semaphore-below-metadata"
+    },
+    /*#__PURE__*/
+    React.createElement(UpdatedBySemaphore, {
+      updatedBy: updatedBy,
+      selectionKey: selectionKey
+    })))),
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "pages"
+    }, pages.map(function (page, idx) {
+      return (
+        /*#__PURE__*/
+        React.createElement(PageThumbnail, {
+          key: "".concat(page.id),
+          isLocked: isLocked(page),
+          error: page.syncError,
+          src: page.src,
+          isActive: page.isActive,
+          onClick: function onClick() {
+            return onPageClick(idx);
+          },
+          metadata: page.metadata,
+          showMetadata: showMetadata,
+          imageIndex: idx,
+          imageId: page.id,
+          onMetadataChange: onMetadataChange,
+          metadataConfigs: metadataConfigs,
+          onRecalcClick: onRecalcClick,
+          isRecalcReady: page.isRecalcReady
+        })
+      );
+    })))
+  );
 }
 
 PageSelector.defaultProps = {

package/PageSelector/page-selector.css

@@ -4,8 +4,6 @@
   transition: width .5s;
 }
 
-.page-selector--opened {}
-
 .pages {
   list-style: none;
   display: flex;
@@ -105,6 +103,132 @@
   z-index: 100;
 }
 
+.page-selector-top-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  gap: 0.5rem;
+}
+
+/* Same typography as “Metadata” label (plain label next to switch) */
+.ps-top-bar-label {
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: inherit;
+  cursor: default;
+}
+
+.ps-semaphore-below-metadata {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  padding-top: 0.15rem;
+  padding-left: 0;
+  box-sizing: border-box;
+}
+
+/* Same slot as .switch (60px) + .mr-2 (1rem) — lines up with Metadata toggle row */
+.ps-semaphore-toggle-column {
+  width: 60px;
+  margin-right: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+/* Plain text + discs to the right — no box */
+.ps-updated-by-semaphore {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  box-shadow: none;
+  flex-shrink: 0;
+}
+
+.ps-updated-by-semaphore__label {
+  text-align: left;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.ps-semaphore-lamps {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+/* Same diameter as Metadata toggle knob (.slider:before: 26×26) */
+.ps-semaphore-lamp {
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
+  flex-shrink: 0;
+}
+
+/* Inactive: still a faint tint of the lamp’s hue */
+.ps-semaphore-lamp:not(.ps-semaphore-lit) {
+  opacity: 0.72;
+}
+
+.ps-semaphore-lamp.ps-semaphore-lit {
+  opacity: 1;
+  transform: scale(1.02);
+}
+
+/* Inactive red: soft rose / dusty red */
+.ps-semaphore-red {
+  background: linear-gradient(165deg, #f0d4d4 0%, #d9a8a8 45%, #c08080 100%);
+  border-color: rgba(180, 90, 90, 0.35);
+  box-shadow:
+    inset 0 2px 5px rgba(255, 255, 255, 0.35),
+    inset 0 -2px 6px rgba(160, 60, 60, 0.2);
+}
+
+.ps-semaphore-red.ps-semaphore-lit {
+  background: linear-gradient(180deg, #ff5252 0%, #d50000 55%, #b71c1c 100%);
+  border-color: rgba(255, 200, 200, 0.85);
+  box-shadow:
+    0 0 10px rgba(213, 0, 0, 0.88),
+    inset 0 -2px 5px rgba(0, 0, 0, 0.18);
+}
+
+/* Inactive green: soft mint / dusty green */
+.ps-semaphore-green {
+  background: linear-gradient(165deg, #dff2df 0%, #b8dcb8 45%, #92c592 100%);
+  border-color: rgba(80, 140, 80, 0.35);
+  box-shadow:
+    inset 0 2px 5px rgba(255, 255, 255, 0.4),
+    inset 0 -2px 6px rgba(60, 120, 60, 0.18);
+}
+
+.ps-semaphore-green.ps-semaphore-lit {
+  background: linear-gradient(180deg, #b9f6ca 0%, #00e676 40%, #00c853 100%);
+  border-color: rgba(200, 255, 220, 0.9);
+  box-shadow:
+    0 0 10px rgba(0, 200, 83, 0.88),
+    inset 0 -2px 5px rgba(0, 0, 0, 0.14);
+}
+
 .top-buttons button {
   margin-bottom: 1rem;
   width: 100%;

package/PointDistances/index.js

@@ -34,40 +34,52 @@ export var PointDistances = function PointDistances(_ref2) {
       regions = _ref2.regions,
       pointDistancePrecision = _ref2.pointDistancePrecision,
       realSize = _ref2.realSize;
-  return React.createElement(ThemeProvider, {
-    theme: theme
-  }, React.createElement(Svg, null, regions.filter(function (r1) {
-    return r1.type === "point";
-  }).flatMap(function (r1, i1) {
-    return regions.filter(function (r2, i2) {
-      return i2 > i1;
-    }).filter(function (r2) {
-      return r2.type === "point";
-    }).map(function (r2) {
-      var pr1 = projectRegionBox(r1);
-      var pr2 = projectRegionBox(r2);
-      var prm = {
-        x: (pr1.x + pr1.w / 2 + pr2.x + pr2.w / 2) / 2,
-        y: (pr1.y + pr1.h / 2 + pr2.y + pr2.h / 2) / 2
-      };
-      var displayDistance;
+  return (
+    /*#__PURE__*/
+    React.createElement(ThemeProvider, {
+      theme: theme
+    },
+    /*#__PURE__*/
+    React.createElement(Svg, null, regions.filter(function (r1) {
+      return r1.type === "point";
+    }).flatMap(function (r1, i1) {
+      return regions.filter(function (r2, i2) {
+        return i2 > i1;
+      }).filter(function (r2) {
+        return r2.type === "point";
+      }).map(function (r2) {
+        var pr1 = projectRegionBox(r1);
+        var pr2 = projectRegionBox(r2);
+        var prm = {
+          x: (pr1.x + pr1.w / 2 + pr2.x + pr2.w / 2) / 2,
+          y: (pr1.y + pr1.h / 2 + pr2.y + pr2.h / 2) / 2
+        };
+        var displayDistance;
 
-      if (realSize) {
-        var w = realSize.w,
-            h = realSize.h,
-            unitName = realSize.unitName;
-        displayDistance = Math.sqrt(Math.pow(r1.x * w - r2.x * w, 2) + Math.pow(r1.y * h - r2.y * h, 2)).toFixed(pointDistancePrecision) + unitName;
-      } else {
-        displayDistance = (Math.sqrt(Math.pow(r1.x - r2.x, 2) + Math.pow(r1.y - r2.y, 2)) * 100).toFixed(pointDistancePrecision) + "%";
-      }
+        if (realSize) {
+          var w = realSize.w,
+              h = realSize.h,
+              unitName = realSize.unitName;
+          displayDistance = Math.sqrt(Math.pow(r1.x * w - r2.x * w, 2) + Math.pow(r1.y * h - r2.y * h, 2)).toFixed(pointDistancePrecision) + unitName;
+        } else {
+          displayDistance = (Math.sqrt(Math.pow(r1.x - r2.x, 2) + Math.pow(r1.y - r2.y, 2)) * 100).toFixed(pointDistancePrecision) + "%";
+        }
 
-      return React.createElement(Fragment, null, React.createElement("path", {
-        d: "M".concat(pr1.x + pr1.w / 2, ",").concat(pr1.y + pr1.h / 2, " L").concat(pr2.x + pr2.w / 2, ",").concat(pr2.y + pr2.h / 2)
-      }), React.createElement("text", {
-        x: prm.x,
-        y: prm.y
-      }, displayDistance));
-    });
-  })));
+        return (
+          /*#__PURE__*/
+          React.createElement(Fragment, null,
+          /*#__PURE__*/
+          React.createElement("path", {
+            d: "M".concat(pr1.x + pr1.w / 2, ",").concat(pr1.y + pr1.h / 2, " L").concat(pr2.x + pr2.w / 2, ",").concat(pr2.y + pr2.h / 2)
+          }),
+          /*#__PURE__*/
+          React.createElement("text", {
+            x: prm.x,
+            y: prm.y
+          }, displayDistance))
+        );
+      });
+    })))
+  );
 };
 export default PointDistances;

package/PreventScrollToParents/index.js

@@ -38,14 +38,21 @@ export var PreventScrollToParents = function PreventScrollToParents(_ref2) {
       }
     }, 100);
   });
-  return React.createElement(ThemeProvider, {
-    theme: theme
-  }, React.createElement(Container, Object.assign({}, otherProps, {
-    onMouseMove: onMouseMove,
-    onMouseLeave: onMouseLeave
-  }), React.createElement(RemoveScroll, {
-    enabled: mouseOver,
-    removeScrollBar: false
-  }, children)));
+  return (
+    /*#__PURE__*/
+    React.createElement(ThemeProvider, {
+      theme: theme
+    },
+    /*#__PURE__*/
+    React.createElement(Container, Object.assign({}, otherProps, {
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }),
+    /*#__PURE__*/
+    React.createElement(RemoveScroll, {
+      enabled: mouseOver,
+      removeScrollBar: false
+    }, children)))
+  );
 };
 export default PreventScrollToParents;