@searpent/react-image-annotate 2.0.74 → 2.0.76

package/MetadataEditorSidebarBox/index.js

@@ -1,231 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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;