react-image-annotate-master-custom 0.0.1

package/DemoSite/Editor.js

@@ -0,0 +1,194 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from "react";
+import Button from "@mui/material/Button";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import Select from "react-select";
+import Code from "react-syntax-highlighter";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import MonacoEditor from "react-monaco-editor";
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return {
+    editBar: {
+      padding: 10,
+      borderBottom: "1px solid #ccc",
+      backgroundColor: "#f8f8f8",
+      display: "flex",
+      alignItems: "center",
+      "& .button": {
+        margin: 5
+      }
+    },
+    select: {
+      width: 240,
+      fontSize: 14
+    },
+    contentArea: {
+      padding: 10
+    },
+    specificationArea: {
+      padding: 10
+    }
+  };
+});
+
+var loadSavedInput = function loadSavedInput() {
+  try {
+    return JSON.parse(window.localStorage.getItem("customInput") || "{}");
+  } catch (e) {
+    return {};
+  }
+};
+
+export var examples = {
+  "Simple Bounding Box": function SimpleBoundingBox() {
+    return {
+      taskDescription: "Annotate each image according to this _markdown_ specification.",
+      // regionTagList: [],
+      // regionClsList: ["hotdog"],
+      regionTagList: ["has-bun"],
+      regionClsList: ["hotdog", "not-hotdog"],
+      enabledTools: ["select", "create-box"],
+      // showTags: true,
+      images: [{
+        src: "https://images.unsplash.com/photo-1496905583330-eb54c7e5915a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
+        name: "hot-dogs-1"
+      }, {
+        src: "https://www.bianchi.com/wp-content/uploads/2019/07/YPB17I555K.jpg",
+        name: "bianchi-oltre-xr4"
+      }],
+      allowComments: true
+    };
+  },
+  "Simple Segmentation": function SimpleSegmentation() {
+    return {
+      taskDescription: "Annotate each image according to this _markdown_ specification.",
+      regionClsList: ["car", "truck"],
+      enabledTools: ["select", "create-polygon"],
+      images: [{
+        src: "https://images.unsplash.com/photo-1561518776-e76a5e48f731?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80",
+        name: "car-image-1"
+      }]
+    };
+  },
+  Custom: function Custom() {
+    return loadSavedInput();
+  }
+};
+
+var Editor = function Editor(_ref) {
+  var onOpenAnnotator = _ref.onOpenAnnotator,
+      lastOutput = _ref.lastOutput;
+  var c = useStyles();
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentError = _useState2[0],
+      changeCurrentError = _useState2[1];
+
+  var _useState3 = useState(window.localStorage.getItem("customInput") ? "Custom" : "Simple Bounding Box"),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedExample = _useState4[0],
+      changeSelectedExample = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      outputDialogOpen = _useState6[0],
+      changeOutputOpen = _useState6[1];
+
+  var _useState7 = useState(JSON.stringify(examples[selectedExample](), null, "  ")),
+      _useState8 = _slicedToArray(_useState7, 2),
+      currentJSONValue = _useState8[0],
+      changeCurrentJSONValue = _useState8[1];
+
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement("div", null, React.createElement("div", {
+    className: c.editBar
+  }, React.createElement("h3", null, "React Image Annotate"), React.createElement("div", {
+    style: {
+      flexGrow: 1
+    }
+  }), React.createElement("div", null, React.createElement("div", {
+    style: {
+      display: "inline-flex"
+    }
+  }, React.createElement(Select, {
+    className: c.select,
+    value: {
+      label: selectedExample,
+      value: selectedExample
+    },
+    options: Object.keys(examples).map(function (s) {
+      return {
+        label: s,
+        value: s
+      };
+    }),
+    onChange: function onChange(selectedOption) {
+      changeSelectedExample(selectedOption.value);
+      changeCurrentJSONValue(JSON.stringify(selectedOption.value === "Custom" ? loadSavedInput() : examples[selectedOption.value](), null, "  "));
+    }
+  })), React.createElement(Button, {
+    className: "button",
+    disabled: !lastOutput,
+    onClick: function onClick() {
+      return changeOutputOpen(true);
+    }
+  }, "View Output"), React.createElement(Button, {
+    className: "button",
+    variant: "outlined",
+    disabled: Boolean(currentError),
+    onClick: function onClick() {
+      onOpenAnnotator(selectedExample === "Custom" ? loadSavedInput() : examples[selectedExample]);
+    }
+  }, "Open Annotator"))), React.createElement("div", {
+    className: c.contentArea,
+    style: currentError ? {
+      border: "2px solid #f00"
+    } : {
+      border: "2px solid #fff"
+    }
+  }, React.createElement("div", null, React.createElement(MonacoEditor, {
+    value: currentJSONValue,
+    language: "javascript",
+    onChange: function onChange(code) {
+      try {
+        window.localStorage.setItem("customInput", JSON.stringify(JSON.parse(code)));
+        changeCurrentError(null);
+      } catch (e) {
+        changeCurrentError(e.toString());
+      }
+
+      changeCurrentJSONValue(code);
+    },
+    width: "100%",
+    height: "550px"
+  }))), React.createElement("div", {
+    className: c.specificationArea
+  }, React.createElement("h2", null, "React Image Annotate Format"), React.createElement(Code, {
+    language: "javascript"
+  }, "\n{\n  taskDescription?: string, // markdown\n  regionTagList?: Array<string>,\n  regionClsList?: Array<string>,\n  imageTagList?: Array<string>,\n  imageClsList?: Array<string>,\n  // all tools are enabled by default\n  enabledTools?: Array< \"select\" | \"create-point\" | \"create-box\" | \"create-polygon\" | \"create-line\">,\n  selectedImage?: string, // initial selected image\n  images: Array<{\n    src: string,\n    thumbnailSrc?: string, // use this if you are using high-res images\n    name: string,\n    regions?: Array<{\n      id: string | number,\n      cls?: string,\n      color?: string,\n      tags?: Array<string>,\n\n      // Point\n      type: \"point\",\n      x: number, // [0-1] % of image width\n      y: number, // [0-1] % of image height\n\n      // Bounding Box\n      type: \"box\",\n      x: number, // [0-1] % of image width\n      y: number, // [0-1] % of image height\n      w: number, // [0-1] % of image width\n      h: number, // [0-1] % of image height\n\n      // Polygon\n      type: \"polygon\",\n      open?: boolean, // should last and first points be connected, default: true\n      points: Array<[number, number]> // [0-1] % of image width/height\n    }>\n  }>,\n}\n")), React.createElement(Dialog, {
+    fullScreen: true,
+    open: outputDialogOpen
+  }, React.createElement(DialogTitle, null, "React Image Annotate Output"), React.createElement(DialogContent, {
+    style: {
+      minWidth: 400
+    }
+  }, React.createElement(MonacoEditor, {
+    value: JSON.stringify(lastOutput, null, "  "),
+    language: "javascript",
+    width: "100%",
+    height: "550px"
+  })), React.createElement(DialogActions, null, React.createElement(Button, {
+    onClick: function onClick() {
+      return changeOutputOpen(false);
+    }
+  }, "Close")))));
+};
+
+export default Editor;

package/DemoSite/ErrorBoundaryDialog.js

@@ -0,0 +1,64 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import React, { Component } from "react";
+import Dialog from "@mui/material/Dialog";
+import Button from "@mui/material/Button";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+
+var ErrorBoundaryDialog =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(ErrorBoundaryDialog, _Component);
+
+  function ErrorBoundaryDialog() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    _classCallCheck(this, ErrorBoundaryDialog);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ErrorBoundaryDialog)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this.state = {
+      hasError: false,
+      err: ""
+    };
+    return _this;
+  }
+
+  _createClass(ErrorBoundaryDialog, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(err, info) {
+      this.setState({
+        hasError: true,
+        err: err.toString() + "\n\n" + info.componentStack
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        return React.createElement(Dialog, {
+          open: this.state.hasError,
+          onClose: this.props.onClose
+        }, React.createElement(DialogTitle, null, "Error Loading Annotator"), React.createElement(DialogContent, null, React.createElement("pre", null, this.state.err)), React.createElement(DialogActions, null, React.createElement(Button, {
+          onClick: this.props.onClose
+        }, "Close")));
+      }
+
+      return this.props.children;
+    }
+  }]);
+
+  return ErrorBoundaryDialog;
+}(Component);
+
+export { ErrorBoundaryDialog as default };

package/DemoSite/index.js

@@ -0,0 +1,69 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import Editor, { examples } from "./Editor";
+import Annotator from "../Annotator";
+import ErrorBoundaryDialog from "./ErrorBoundaryDialog.js";
+export default (function () {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      annotatorOpen = _useState2[0],
+      changeAnnotatorOpen = _useState2[1];
+
+  var _useState3 = useState(examples["Custom"]()),
+      _useState4 = _slicedToArray(_useState3, 2),
+      annotatorProps = _useState4[0],
+      changeAnnotatorProps = _useState4[1];
+
+  var _useState5 = useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      lastOutput = _useState6[0],
+      changeLastOutput = _useState6[1];
+
+  return React.createElement("div", null, annotatorOpen ? React.createElement(ErrorBoundaryDialog, {
+    onClose: function onClose() {
+      changeAnnotatorOpen(false);
+    }
+  }, React.createElement("button", {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      var element = document.getElementById("delete-region-7725661632635865");
+
+      if (element) {
+        var clickEvent = document.createEvent("MouseEvents");
+        clickEvent.initEvent("click", true, true);
+        element.dispatchEvent(clickEvent);
+      }
+    }
+  }, "click"), React.createElement(Annotator //customize
+  , Object.assign({}, annotatorProps, {
+    onCreateAnno: function onCreateAnno(anno) {
+      console.log("Annotator created: ", anno);
+    },
+    onClickAnno: function onClickAnno(anno) {
+      console.log("Annotator click: ", anno);
+    },
+    onExit: function onExit(output) {
+      var checkOutside = false;
+      output.images[0].regions.forEach(function (r) {
+        if (r.x <= 0 || r.x >= 1 || r.y <= 0 || r.y >= 1.0) {
+          checkOutside = true;
+        }
+      });
+
+      if (checkOutside) {
+        alert("Create defect box inside image");
+      } else {
+        changeLastOutput(output.images[0].regions);
+      }
+
+      console.log(output.images[0].regions);
+    }
+  }))) : React.createElement(Editor, {
+    lastOutput: lastOutput,
+    onOpenAnnotator: function onOpenAnnotator(props) {
+      changeAnnotatorProps(props);
+      changeAnnotatorOpen(true);
+    }
+  }));
+});

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/HighlightBox/index.js

@@ -0,0 +1,105 @@
+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,
+        filter: "invert(40%) sepia(50%) saturate(1928%) hue-rotate(350deg) brightness(94%) contrast(89%)" //customize
+
+      },
+      "&:not(.highlighted)": {
+        opacity: 0
+      },
+      "&:not(.highlighted):hover": {
+        opacity: 0.6
+      },
+      "& path": {
+        vectorEffect: "non-scaling-stroke",
+        strokeWidth: 2,
+        stroke: "#FFF",
+        fill: "none",
+        strokeDasharray: 5,
+        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,
+    id: 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(r);
+      }
+
+      onSelectRegion(r); //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];
+  }));
+});