@searpent/react-image-annotate 2.0.76 → 2.0.78

package/Editor/index.js

@@ -0,0 +1,93 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { createReactEditorJS } from 'react-editor-js';
+import blocksToArticle from '../utils/blocks-to-article';
+import { EDITOR_JS_TOOLS } from './tools';
+import ReadOnly from './readOnly';
+var ReactEditorJS = createReactEditorJS();
+
+function Editor(_ref) {
+  var _ref$blocks = _ref.blocks,
+      blocks = _ref$blocks === void 0 ? [] : _ref$blocks,
+      onChange = _ref.onChange,
+      imageIndex = _ref.imageIndex,
+      selectedFrame = _ref.selectedFrame;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      editMode = _useState2[0],
+      setEditMode = _useState2[1];
+
+  var handleChange =
+  /*#__PURE__*/
+  function () {
+    var _ref2 = _asyncToGenerator(
+    /*#__PURE__*/
+    _regeneratorRuntime.mark(function _callee(instance) {
+      var data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return instance.saver.save();
+
+            case 2:
+              data = _context.sent;
+              onChange({
+                imageIndex: imageIndex,
+                data: data
+              });
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var toggleEditMode = function toggleEditMode() {
+    setEditMode(function (prev) {
+      return !prev;
+    });
+  };
+
+  if (blocks.length < 1) {
+    return React.createElement("div", {
+      className: "instructions"
+    }, React.createElement("h1", null, "Click article to display text."));
+  }
+
+  return React.createElement("div", null, React.createElement("div", {
+    className: "show-metadata-wrapper"
+  }, React.createElement("label", {
+    className: "switch mr-2"
+  }, React.createElement("input", {
+    id: "show-metadata",
+    type: "checkbox",
+    value: editMode,
+    onChange: toggleEditMode
+  }), React.createElement("span", {
+    className: "slider round"
+  })), React.createElement("label", null, "Edit mode")), !editMode ? React.createElement(ReadOnly, {
+    article: blocksToArticle(blocks)
+  }) : React.createElement(ReactEditorJS, {
+    defaultValue: {
+      blocks: blocks
+    },
+    tools: EDITOR_JS_TOOLS,
+    onChange: handleChange,
+    enableReInitialize: true,
+    key: selectedFrame
+  }));
+}
+
+export default Editor;

package/Editor/readOnly.js

@@ -0,0 +1,123 @@
+import React from 'react';
+
+function ReadOnly(_ref) {
+  var article = _ref.article;
+  return React.createElement("div", null, React.createElement("h1", {
+    className: "ro-title",
+    dangerouslySetInnerHTML: {
+      __html: article.title
+    }
+  }), React.createElement("h2", {
+    className: "ro-subtitle",
+    dangerouslySetInnerHTML: {
+      __html: article.subtitle
+    }
+  }), React.createElement("p", {
+    className: "ro-text",
+    dangerouslySetInnerHTML: {
+      __html: article.text
+    }
+  }), React.createElement("p", {
+    className: "ro-author",
+    dangerouslySetInnerHTML: {
+      __html: article.author
+    }
+  }), React.createElement("p", {
+    className: "ro-about-author",
+    dangerouslySetInnerHTML: {
+      __html: article.about_author
+    }
+  }), React.createElement("p", {
+    className: "ro-appendix",
+    dangerouslySetInnerHTML: {
+      __html: article.appendix
+    }
+  }), React.createElement("p", {
+    className: "ro-photo-author",
+    dangerouslySetInnerHTML: {
+      __html: article.photo_author
+    }
+  }), React.createElement("p", {
+    className: "ro-photo-caption",
+    dangerouslySetInnerHTML: {
+      __html: article.photo_caption
+    }
+  }), React.createElement("p", {
+    className: "ro-advertisment",
+    dangerouslySetInnerHTML: {
+      __html: article.advertisement
+    }
+  }), React.createElement("p", {
+    className: "ro-other-graphics",
+    dangerouslySetInnerHTML: {
+      __html: article.other_graphics
+    }
+  }), React.createElement("p", {
+    className: "ro-unknown",
+    dangerouslySetInnerHTML: {
+      __html: article.unknown
+    }
+  }), React.createElement("p", {
+    className: "ro-table",
+    dangerouslySetInnerHTML: {
+      __html: article.table
+    }
+  }), React.createElement("p", {
+    className: "ro-section",
+    dangerouslySetInnerHTML: {
+      __html: article.section
+    }
+  }), React.createElement("p", {
+    className: "ro-continuation_ref",
+    dangerouslySetInnerHTML: {
+      __html: article.continuation_ref
+    }
+  }), React.createElement("p", {
+    className: "ro-cover_clip",
+    dangerouslySetInnerHTML: {
+      __html: article.cover_clip
+    }
+  }), React.createElement("p", {
+    className: "ro-page_id",
+    dangerouslySetInnerHTML: {
+      __html: article.page_id
+    }
+  }), React.createElement("p", {
+    className: "ro-continuation_mark",
+    dangerouslySetInnerHTML: {
+      __html: article.continuation_mark
+    }
+  }), React.createElement("p", {
+    className: "ro-follow_up_mark",
+    dangerouslySetInnerHTML: {
+      __html: article.follow_up_mark
+    }
+  }), React.createElement("p", {
+    className: "ro-article_termination_mark",
+    dangerouslySetInnerHTML: {
+      __html: article.article_termination_mark
+    }
+  }), React.createElement("p", {
+    className: "ro-page_splitting_stripe",
+    dangerouslySetInnerHTML: {
+      __html: article.page_splitting_stripe
+    }
+  }), React.createElement("p", {
+    className: "ro-column_id_stripe",
+    dangerouslySetInnerHTML: {
+      __html: article.column_id_stripe
+    }
+  }), React.createElement("p", {
+    className: "ro-prev_page_reference",
+    dangerouslySetInnerHTML: {
+      __html: article.prev_page_reference
+    }
+  }), React.createElement("p", {
+    className: "ro-section_subcategory",
+    dangerouslySetInnerHTML: {
+      __html: article.section_subcategory
+    }
+  }));
+}
+
+export default ReadOnly;

package/{src/Editor → Editor}/tools.js

@@ -1,6 +1,5 @@
 // tools.js
 import Annotation from './annotation-plugin/annotation';
-
-export const EDITOR_JS_TOOLS = {
+export var EDITOR_JS_TOOLS = {
   annotation: Annotation
-}
+};

package/Errorer/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ErrorIcon from '@mui/icons-material/Error';
+import './errorer.css';
+
+function Errorer() {
+  return React.createElement("div", {
+    className: "errorer"
+  }, React.createElement(ErrorIcon, null));
+}
+
+export default Errorer;

package/FullImageSegmentationAnnotator/index.js

@@ -0,0 +1,7 @@
+import React from "react";
+import Annotator from "../Annotator";
+export default (function (props) {
+  return React.createElement(Annotator, Object.assign({}, props, {
+    fullImageSegmentationMode: true
+  }));
+});

package/GroupSelectorSidebarBox/index.js

@@ -0,0 +1,63 @@
+import React, { memo } from "react";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import CollectionsIcon from "@mui/icons-material/Collections";
+import { grey } from "@mui/material/colors";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import uuidToHash from '../utils/uuid-to-hash';
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return {
+    img: {
+      width: 40,
+      height: 40,
+      borderRadius: 8
+    }
+  };
+});
+export var GroupSelectorSidebarBox = function GroupSelectorSidebarBox(_ref) {
+  var title = _ref.title,
+      subtitle = _ref.subtitle,
+      groups = _ref.groups,
+      onSelect = _ref.onSelect,
+      selectedGroupId = _ref.selectedGroupId;
+  var classes = useStyles();
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: title || '',
+    subTitle: subtitle || '',
+    icon: React.createElement(CollectionsIcon, {
+      style: {
+        color: grey[700]
+      }
+    })
+  }, React.createElement(List, null, groups.map(function (_ref2, i) {
+    var id = _ref2.id,
+        groupTitle = _ref2.title,
+        groupSubtitle = _ref2.subtitle,
+        color = _ref2.color;
+    return React.createElement(ListItem, {
+      button: true,
+      onClick: function onClick() {
+        return onSelect(id);
+      },
+      dense: true,
+      key: id,
+      style: {
+        backgroundColor: id === selectedGroupId ? '#bbdefb' : null
+      }
+    }, React.createElement(ListItemText, {
+      primary: React.createElement("strong", {
+        style: {
+          color: color
+        }
+      }, uuidToHash(groupTitle)),
+      secondary: groupSubtitle
+    }));
+  }))));
+};
+export default GroupSelectorSidebarBox;

package/GroupsEditorSidebarBox/index.js

@@ -0,0 +1,138 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { memo, useState } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import FilterNoneIcon from '@mui/icons-material/FilterNone';
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
+import uuidToHash from "../utils/uuid-to-hash";
+var theme = createTheme();
+var GroupItemDiv = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: "flex",
+    flexDirection: "column",
+    marginBottom: "1rem",
+    "& > label": {
+      fontSize: "1rem",
+      marginBottom: ".5rem",
+      textTransform: "capitalize"
+    }
+  };
+});
+
+var GroupItem = function GroupItem(_ref2) {
+  var group = _ref2.group;
+  return React.createElement(GroupItemDiv, null, uuidToHash(group.id));
+};
+
+var GroupList = function GroupList(_ref3) {
+  var groups = _ref3.groups;
+  return React.createElement("div", null, React.createElement("h2", null, "Groups"), groups.map(function (g, idx) {
+    return React.createElement(GroupItem, {
+      key: "".concat(g, "-").concat(idx),
+      group: g
+    });
+  }));
+};
+
+var AddGroupFormDiv = styled("div")(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    display: "flex",
+    flexDirection: "row"
+  };
+});
+
+var AddGroupFrom = function AddGroupFrom(_ref5) {
+  var onAddGroup = _ref5.onAddGroup;
+
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var handleChange = function handleChange(e) {
+    setValue(e.target.value);
+  };
+
+  var handleSubmit = function handleSubmit(e) {
+    e.preventDefault();
+    onAddGroup(value);
+    setValue('');
+  };
+
+  return React.createElement(AddGroupFormDiv, null, React.createElement("form", {
+    onSubmit: handleSubmit,
+    style: {
+      display: "flex",
+      paddingRight: "6px"
+    }
+  }, React.createElement("input", {
+    type: "text",
+    value: value,
+    name: "new-group",
+    placeholder: "New group name",
+    onChange: handleChange,
+    style: {
+      marginRight: "1rem"
+    }
+  }), React.createElement("input", {
+    type: "submit",
+    value: "Create group"
+  })));
+};
+
+var DivContainer = styled("div")(function (_ref6) {
+  var theme = _ref6.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 GroupsEditorSidebarBox = function GroupsEditorSidebarBox(_ref7) {
+  var groups = _ref7.groups,
+      onAddGroup = _ref7.onAddGroup;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "Groups",
+    icon: React.createElement(FilterNoneIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: true
+  }, React.createElement(DivContainer, null, React.createElement("h2", null, "Add new group"), React.createElement(AddGroupFrom, {
+    onAddGroup: onAddGroup
+  }), React.createElement(GroupList, {
+    groups: groups
+  }))));
+};
+export default memo(GroupsEditorSidebarBox);

package/HelpSidebarBox/index.js

@@ -0,0 +1,58 @@
+import React, { memo } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import HelpIcon from '@mui/icons-material/Help';
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
+import Markdown from "react-markdown";
+var theme = createTheme();
+var MarkdownContainer = styled("div")(function (_ref) {
+  var theme = _ref.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 HelpSidebarBox = function HelpSidebarBox(_ref2) {
+  var help = _ref2.help;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "Help",
+    icon: React.createElement(HelpIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: help && help !== "" ? false : true
+  }, React.createElement(MarkdownContainer, null, React.createElement(Markdown, {
+    source: help
+  }))));
+};
+export default memo(HelpSidebarBox);

package/HighlightBox/index.js

@@ -0,0 +1,102 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import React from "react";
+import classnames from "classnames";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return {
+    "@keyframes borderDance": {
+      from: {
+        strokeDashoffset: 0
+      },
+      to: {
+        strokeDashoffset: 100
+      }
+    },
+    highlightBox: {
+      zIndex: 2,
+      transition: "opacity 500ms",
+      "&.highlighted": {
+        zIndex: 3
+      },
+      "&:not(.highlighted)": {
+        opacity: 0
+      },
+      "&:not(.highlighted):hover": {
+        opacity: 0.6
+      },
+      "& path": {
+        // NOTE: attributes below commnted because resetting screen caused old frame to highlight
+        // vectorEffect: "non-scaling-stroke",
+        // strokeWidth: 2,
+        // stroke: "#FFF",
+        // strokeDasharray: 5,
+        fill: "none",
+        animationName: "$borderDance",
+        animationDuration: "4s",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+        animationPlayState: "running"
+      }
+    }
+  };
+});
+export var HighlightBox = function HighlightBox(_ref) {
+  var mouseEvents = _ref.mouseEvents,
+      dragWithPrimary = _ref.dragWithPrimary,
+      zoomWithPrimary = _ref.zoomWithPrimary,
+      createWithPrimary = _ref.createWithPrimary,
+      onBeginMovePoint = _ref.onBeginMovePoint,
+      onSelectRegion = _ref.onSelectRegion,
+      r = _ref.region,
+      pbox = _ref.pbox;
+  var classes = useStyles();
+  if (!pbox.w || pbox.w === Infinity) return null;
+  if (!pbox.h || pbox.h === Infinity) return null;
+  if (r.unfinished) return null;
+  var styleCoords = r.type === "point" ? {
+    left: pbox.x + pbox.w / 2 - 30,
+    top: pbox.y + pbox.h / 2 - 30,
+    width: 60,
+    height: 60
+  } : {
+    left: pbox.x - 5,
+    top: pbox.y - 5,
+    width: pbox.w + 10,
+    height: pbox.h + 10
+  };
+  var pathD = r.type === "point" ? "M5,5 L".concat(styleCoords.width - 5, " 5L").concat(styleCoords.width - 5, " ").concat(styleCoords.height - 5, "L5 ").concat(styleCoords.height - 5, "Z") : "M5,5 L".concat(pbox.w + 5, ",5 L").concat(pbox.w + 5, ",").concat(pbox.h + 5, " L5,").concat(pbox.h + 5, " Z");
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement("svg", Object.assign({
+    key: r.id,
+    className: classnames(classes.highlightBox, {
+      highlighted: r.highlighted
+    })
+  }, mouseEvents, !zoomWithPrimary && !dragWithPrimary ? {
+    onMouseDown: function onMouseDown(e) {
+      if (!r.locked && r.type === "point" && r.highlighted && e.button === 0) {
+        return onBeginMovePoint(r);
+      }
+
+      if (e.button === 0 && !createWithPrimary) return onSelectRegion(_objectSpread({}, r, {
+        ctrlKey: e.ctrlKey
+      }));
+      mouseEvents.onMouseDown(e);
+    }
+  } : {}, {
+    style: _objectSpread({}, r.highlighted ? {
+      pointerEvents: r.type !== "point" ? "none" : undefined,
+      cursor: "grab"
+    } : {
+      cursor: !(zoomWithPrimary || dragWithPrimary || createWithPrimary) ? "pointer" : undefined,
+      pointerEvents: zoomWithPrimary || dragWithPrimary || createWithPrimary && !r.highlighted ? "none" : undefined
+    }, {
+      position: "absolute"
+    }, styleCoords)
+  }), React.createElement("path", {
+    d: pathD
+  })));
+};
+export default HighlightBox;

package/HistorySidebarBox/index.js

@@ -0,0 +1,71 @@
+import React, { setState, memo } from "react";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import HistoryIcon from "@mui/icons-material/History";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import IconButton from "@mui/material/IconButton";
+import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
+import UndoIcon from "@mui/icons-material/Undo";
+import moment from "moment";
+import { grey } from "@mui/material/colors";
+import isEqual from "lodash/isEqual";
+import Box from "@mui/material/Box";
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return {
+    emptyText: {
+      fontSize: 14,
+      fontWeight: "bold",
+      color: grey[500],
+      textAlign: "center",
+      padding: 20
+    }
+  };
+});
+var listItemTextStyle = {
+  paddingLeft: 16
+};
+export var HistorySidebarBox = function HistorySidebarBox(_ref) {
+  var history = _ref.history,
+      onRestoreHistory = _ref.onRestoreHistory;
+  var classes = useStyles();
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "History",
+    icon: React.createElement(HistoryIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: true
+  }, React.createElement(List, null, history.length === 0 && React.createElement("div", {
+    className: classes.emptyText
+  }, "No History Yet"), history.map(function (_ref2, i) {
+    var name = _ref2.name,
+        time = _ref2.time;
+    return React.createElement(ListItem, {
+      button: true,
+      dense: true,
+      key: i
+    }, React.createElement(ListItemText, {
+      style: listItemTextStyle,
+      primary: name,
+      secondary: moment(time).format("LT")
+    }), i === 0 && React.createElement(ListItemSecondaryAction, {
+      onClick: function onClick() {
+        return onRestoreHistory();
+      }
+    }, React.createElement(IconButton, null, React.createElement(UndoIcon, null))));
+  }))));
+};
+export default memo(HistorySidebarBox, function (prevProps, nextProps) {
+  return isEqual(prevProps.history.map(function (a) {
+    return [a.name, a.time];
+  }), nextProps.history.map(function (a) {
+    return [a.name, a.time];
+  }));
+});