@searpent/react-image-annotate 2.0.76 → 2.0.78

package/MetadataEditorSidebarBox/index.js

@@ -0,0 +1,231 @@
+import React, { memo } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import DescriptionIcon from "@mui/icons-material/Description";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
+var MetadataItemDiv = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: "flex",
+    flexDirection: "row",
+    marginBottom: ".5em",
+    "& > label": {
+      fontSize: "1rem",
+      marginBottom: ".5em",
+      textTransform: "capitalize",
+      wordWrap: "break-word"
+    },
+    label: {
+      width: "50%"
+    },
+    select: {
+      width: "100%"
+    }
+  };
+});
+
+var MetadataItem = function MetadataItem(_ref2) {
+  var _metadataConfig$optio, _metadataConfig$optio2;
+
+  var name = _ref2.name,
+      value = _ref2.value,
+      metadataId = _ref2.metadataId,
+      imageIndex = _ref2.imageIndex,
+      groupId = _ref2.groupId,
+      onChange = _ref2.onChange,
+      _ref2$metadataConfig = _ref2.metadataConfig,
+      metadataConfig = _ref2$metadataConfig === void 0 ? {} : _ref2$metadataConfig;
+
+  var handleChange = function handleChange(e) {
+    e.preventDefault();
+    var _e$target = e.target,
+        name = _e$target.name,
+        value = _e$target.value;
+    onChange({
+      name: name,
+      value: value,
+      imageIndex: imageIndex,
+      groupId: groupId,
+      metadataId: metadataId
+    });
+  };
+
+  return React.createElement(MetadataItemDiv, null, React.createElement("label", {
+    for: name
+  }, name), React.createElement("div", {
+    style: {
+      width: "50%"
+    }
+  }, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true && React.createElement(React.Fragment, null, React.createElement("input", {
+    type: "text",
+    value: value,
+    name: name,
+    onChange: handleChange,
+    id: name,
+    list: "".concat(name, "-list"),
+    style: {
+      width: "100%"
+    }
+  }), React.createElement("datalist", {
+    id: "".concat(name, "-list")
+  }, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio = metadataConfig.options) === null || _metadataConfig$optio === void 0 ? void 0 : _metadataConfig$optio.map(function (opt) {
+    if (opt.value && opt.label) {
+      return React.createElement("option", {
+        key: opt.value,
+        value: opt.value
+      }, opt.label);
+    }
+
+    return React.createElement("option", {
+      key: opt,
+      value: opt
+    });
+  }))), (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) === true && React.createElement("select", {
+    name: name,
+    id: name,
+    onChange: handleChange,
+    style: {
+      width: '100%'
+    }
+  }, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio2 = metadataConfig.options) === null || _metadataConfig$optio2 === void 0 ? void 0 : _metadataConfig$optio2.map(function (opt) {
+    if (opt.value && opt.label) {
+      return React.createElement("option", {
+        key: opt.value,
+        value: opt.value,
+        selected: opt.value === value
+      }, opt.label);
+    }
+
+    return React.createElement("option", {
+      key: opt,
+      value: opt
+    });
+  }))));
+};
+
+var MetadataList = function MetadataList(_ref3) {
+  var title = _ref3.title,
+      metadata = _ref3.metadata,
+      imageIndex = _ref3.imageIndex,
+      onMetadataChange = _ref3.onMetadataChange,
+      _ref3$metadataConfigs = _ref3.metadataConfigs,
+      metadataConfigs = _ref3$metadataConfigs === void 0 ? [] : _ref3$metadataConfigs,
+      groupId = _ref3.groupId;
+  return React.createElement("div", null, React.createElement("h2", null, title), metadata && metadata.map(function (_ref4) {
+    var key = _ref4.key,
+        value = _ref4.value,
+        metadataId = _ref4.metadataId;
+    return React.createElement(MetadataItem, {
+      name: key,
+      value: value,
+      imageIndex: imageIndex,
+      metadataId: metadataId,
+      groupId: groupId,
+      onChange: onMetadataChange,
+      metadataConfig: metadataConfigs.find(function (i) {
+        return i.key === key;
+      })
+    });
+  }));
+};
+
+var theme = createTheme();
+var DivContainer = styled("div")(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    paddingLeft: 16,
+    paddingRight: 16,
+    fontSize: 12,
+    "& h1": {
+      fontSize: 18
+    },
+    "& h2": {
+      fontSize: 14
+    },
+    "& h3": {
+      fontSize: 12
+    },
+    "& h4": {
+      fontSize: 12
+    },
+    "& h5": {
+      fontSize: 12
+    },
+    "& h6": {
+      fontSize: 12
+    },
+    "& p": {
+      fontSize: 12
+    },
+    "& a": {},
+    "& img": {
+      width: "100%"
+    }
+  };
+});
+export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
+  var _state$images$state$s, _state$images$state$s2, _state$images$state$s3, _state$images$state$s4;
+
+  var state = _ref6.state,
+      onMetadataChange = _ref6.onMetadataChange;
+  var metadataConfigs = state.metadataConfigs || [];
+  var selectedPhotoMetadata = state === null || state === void 0 ? void 0 : (_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.metadata;
+  var selectedGroupId = state === null || state === void 0 ? void 0 : (_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : (_state$images$state$s3 = _state$images$state$s2.regions) === null || _state$images$state$s3 === void 0 ? void 0 : (_state$images$state$s4 = _state$images$state$s3.find(function (r) {
+    return r.highlighted === true;
+  })) === null || _state$images$state$s4 === void 0 ? void 0 : _state$images$state$s4.groupId;
+  var articleMetadata = []; // example: [{key: "previousArticleId", value "123-123-123-123-123"}]
+
+  if (selectedGroupId !== undefined) {
+    var articleMetadataRegion = state === null || state === void 0 ? void 0 : state.images[state.selectedImage].regions.find(function (r) {
+      return r.cls === 'metadata' && "".concat(r.groupId) === selectedGroupId;
+    });
+
+    if (articleMetadataRegion) {
+      var metadata = JSON.parse(articleMetadataRegion.text);
+      articleMetadata = metadata;
+    }
+  }
+
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "Metadata",
+    icon: React.createElement(DescriptionIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: true
+  }, React.createElement(DivContainer, {
+    style: {
+      height: "600px"
+    }
+  }, articleMetadata.length > 0 && React.createElement(MetadataList, {
+    title: "Article",
+    metadata: articleMetadata,
+    imageIndex: state.selectedImage,
+    groupId: selectedGroupId,
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'photo_metadata-engine';
+    })
+  }), selectedPhotoMetadata && React.createElement(MetadataList, {
+    title: "Page",
+    metadata: selectedPhotoMetadata,
+    imageIndex: state.selectedImage,
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'photo';
+    })
+  }), React.createElement(MetadataList, {
+    title: "Issue",
+    metadata: state.albumMetadata,
+    onMetadataChange: onMetadataChange,
+    id: "metadata-album",
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'album';
+    })
+  }))));
+};
+export default memo(MetadataEditorSidebarBox);

package/PageSelector/index.js

@@ -0,0 +1,180 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import classnames from "classnames";
+import './page-selector.css';
+import Locker from '../Locker';
+import Errorer from '../Errorer';
+
+function PageThumbnail(_ref) {
+  var _metadata$find, _metadata$find$call;
+
+  var src = _ref.src,
+      isActive = _ref.isActive,
+      onClick = _ref.onClick,
+      metadata = _ref.metadata,
+      showMetadata = _ref.showMetadata,
+      imageIndex = _ref.imageIndex,
+      imageId = _ref.imageId,
+      onMetadataChange = _ref.onMetadataChange,
+      _ref$metadataConfigs = _ref.metadataConfigs,
+      metadataConfigs = _ref$metadataConfigs === void 0 ? [] : _ref$metadataConfigs,
+      isLocked = _ref.isLocked,
+      error = _ref.error,
+      onRecalcClick = _ref.onRecalcClick,
+      _ref$isRecalcReady = _ref.isRecalcReady,
+      isRecalcReady = _ref$isRecalcReady === void 0 ? false : _ref$isRecalcReady;
+
+  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 handleRecalcClick = function handleRecalcClick(e) {
+    e.stopPropagation();
+    onRecalcClick({
+      imageId: imageId
+    });
+  };
+
+  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
+    }),
+    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;
+
+    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
+      });
+    })));
+  })));
+}
+
+function isLocked(page) {
+  var _Date$parse;
+
+  var lockedUntil = page.lockedUntil; // needs to be defined and greater than current time
+
+  if (((_Date$parse = Date.parse(lockedUntil)) === null || _Date$parse === void 0 ? void 0 : _Date$parse.valueOf()) > new Date().valueOf()) {
+    return true;
+  }
+
+  return false;
+}
+
+function PageSelector(_ref3) {
+  var pages = _ref3.pages,
+      onPageClick = _ref3.onPageClick,
+      onMetadataChange = _ref3.onMetadataChange,
+      metadataConfigs = _ref3.metadataConfigs,
+      onRecalcClick = _ref3.onRecalcClick;
+
+  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
+    });
+  })));
+}
+
+PageSelector.defaultProps = {
+  onPageClick: function onPageClick() {},
+  recalcActive: false,
+  saveActive: false,
+  pageNumber: undefined
+};
+export default PageSelector;

package/PointDistances/index.js

@@ -0,0 +1,73 @@
+import React, { Fragment } from "react";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+var theme = createTheme();
+var Svg = styled("svg")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    pointerEvents: "none",
+    position: "absolute",
+    zIndex: 1,
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    "& text": {
+      fill: "#fff"
+    },
+    "& path": {
+      vectorEffect: "non-scaling-stroke",
+      strokeWidth: 2,
+      opacity: 0.5,
+      stroke: "#FFF",
+      fill: "none",
+      strokeDasharray: 5,
+      animationDuration: "4s",
+      animationTimingFunction: "linear",
+      animationIterationCount: "infinite",
+      animationPlayState: "running"
+    }
+  };
+});
+export var PointDistances = function PointDistances(_ref2) {
+  var projectRegionBox = _ref2.projectRegionBox,
+      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;
+
+      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));
+    });
+  })));
+};
+export default PointDistances;

package/PreventScrollToParents/index.js

@@ -0,0 +1,51 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import React, { useState } from "react";
+import { RemoveScroll } from "react-remove-scroll";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import useEventCallback from "use-event-callback";
+var theme = createTheme();
+var Container = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    "& > div": {
+      width: "100%",
+      height: "100%"
+    }
+  };
+});
+export var PreventScrollToParents = function PreventScrollToParents(_ref2) {
+  var children = _ref2.children,
+      otherProps = _objectWithoutProperties(_ref2, ["children"]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      mouseOver = _useState2[0],
+      changeMouseOver = _useState2[1];
+
+  var onMouseMove = useEventCallback(function (e) {
+    if (!mouseOver) changeMouseOver(true);
+
+    if (otherProps.onMouseMove) {
+      otherProps.onMouseMove(e);
+    }
+  });
+  var onMouseLeave = useEventCallback(function (e) {
+    setTimeout(function () {
+      if (mouseOver) {
+        changeMouseOver(false);
+      }
+    }, 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)));
+};
+export default PreventScrollToParents;