react-image-annotate-master-custom 0.0.1

package/KeyframeTimeline/index.js

@@ -0,0 +1,233 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { useMemo, useState, useEffect } from "react";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import range from "lodash/range";
+import * as colors from "@mui/material/colors";
+import useMeasure from "react-use-measure";
+import useEventCallback from "use-event-callback";
+import { useRafState } from "react-use";
+import getTimeString from "./get-time-string";
+var theme = createTheme();
+var Container = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    position: "relative",
+    display: "flex",
+    flexGrow: 1,
+    minWidth: 240,
+    height: 64,
+    marginLeft: 16,
+    marginRight: 16
+  };
+});
+var Tick = styled("div")(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    position: "absolute",
+    width: 2,
+    marginLeft: -1,
+    height: "100%",
+    backgroundColor: colors.grey[300],
+    bottom: 0
+  };
+});
+var TickText = styled("div")(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    position: "absolute",
+    userSelect: "none",
+    fontSize: 10,
+    color: colors.grey[600],
+    fontWeight: "bold",
+    bottom: 0
+  };
+});
+var PositionCursor = styled("div")(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    position: "absolute",
+    bottom: "calc(50% + 6px)",
+    fontSize: 10,
+    fontWeight: "bold",
+    color: "#fff",
+    display: "grid",
+    placeItems: "center",
+    width: 48,
+    marginLeft: -24,
+    borderRadius: 2,
+    height: 24,
+    backgroundColor: colors.blue[500],
+    userSelect: "none",
+    fontVariantNumeric: "tabular-nums",
+    "&::before": {
+      position: "absolute",
+      bottom: -6,
+      left: 24 - 8,
+      content: '""',
+      width: 0,
+      height: 0,
+      borderTop: "8px solid ".concat(colors.blue[500]),
+      borderLeft: "8px solid transparent",
+      borderRight: "8px solid transparent"
+    }
+  };
+});
+var KeyframeMarker = styled("div")(function (_ref5) {
+  var _ref6;
+
+  var theme = _ref5.theme;
+  return _ref6 = {
+    position: "absolute",
+    bottom: 8,
+    cursor: "pointer",
+    opacity: 0.75,
+    fontSize: 10,
+    fontWeight: "bold",
+    color: "#fff",
+    display: "grid",
+    placeItems: "center",
+    width: 16,
+    marginLeft: 0,
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 2,
+    height: 12
+  }, _defineProperty(_ref6, "marginLeft", -8), _defineProperty(_ref6, "backgroundColor", colors.red[500]), _defineProperty(_ref6, "userSelect", "none"), _defineProperty(_ref6, "fontVariantNumeric", "tabular-nums"), _defineProperty(_ref6, "&::before", {
+    position: "absolute",
+    bottom: -8,
+    left: 0,
+    content: '""',
+    width: 0,
+    height: 0,
+    borderTop: "8px solid ".concat(colors.red[500]),
+    borderLeft: "8px solid transparent",
+    borderRight: "8px solid transparent"
+  }), _ref6;
+});
+var min = 60000;
+var displayIntervalPairs = [[50, 250], [100, 500], [250, 1000], [1000, 5000], [5000, 30000], [10000, min], [30000, min * 2], [min, min * 5], [min * 5, min * 30], [min * 10, min * 60], [min * 30, min * 60 * 3], [min * 60, min * 60 * 5]];
+
+var getMajorInterval = function getMajorInterval(duration) {
+  for (var _i = 0, _displayIntervalPairs = displayIntervalPairs; _i < _displayIntervalPairs.length; _i++) {
+    var _ref9 = _displayIntervalPairs[_i];
+
+    var _ref8 = _slicedToArray(_ref9, 2);
+
+    var minor = _ref8[0];
+    var major = _ref8[1];
+
+    if (duration / major < 6 && duration / major > 2) {
+      return [minor, major];
+    }
+  }
+
+  return [duration / 4, duration];
+};
+
+export default (function (_ref10) {
+  var _ref10$currentTime = _ref10.currentTime,
+      currentTime = _ref10$currentTime === void 0 ? 0 : _ref10$currentTime,
+      duration = _ref10.duration,
+      onChangeCurrentTime = _ref10.onChangeCurrentTime,
+      keyframes = _ref10.keyframes;
+
+  var _useMeasure = useMeasure(),
+      _useMeasure2 = _slicedToArray(_useMeasure, 2),
+      ref = _useMeasure2[0],
+      bounds = _useMeasure2[1];
+
+  var _useState = useState(currentTime),
+      _useState2 = _slicedToArray(_useState, 2),
+      instantCurrentTime = _useState2[0],
+      changeInstantCurrentTime = _useState2[1];
+
+  var _useRafState = useRafState(false),
+      _useRafState2 = _slicedToArray(_useRafState, 2),
+      draggingTime = _useRafState2[0],
+      changeDraggingTime = _useRafState2[1];
+
+  var keyframeTimes = Object.keys(keyframes || {}).map(function (t) {
+    return parseInt(t);
+  }).filter(function (t) {
+    return !isNaN(t);
+  }).sort(function (a, b) {
+    return a - b;
+  });
+  useEffect(function () {
+    if (currentTime !== instantCurrentTime) {
+      changeInstantCurrentTime(currentTime);
+    }
+  }, [currentTime]);
+
+  var _useMemo = useMemo(function () {
+    return getMajorInterval(duration);
+  }, [duration]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      minorInterval = _useMemo2[0],
+      majorInterval = _useMemo2[1];
+
+  var onMouseMove = useEventCallback(function (e) {
+    if (draggingTime) {
+      var px = (e.clientX - bounds.left) / bounds.width;
+      changeInstantCurrentTime(Math.min(duration, Math.max(0, Math.floor(px * duration))));
+    }
+  });
+  var onMouseUp = useEventCallback(function (e) {
+    changeDraggingTime(false);
+    var px = (e.clientX - bounds.left) / bounds.width;
+    var newTime = Math.min(duration, Math.max(0, Math.floor(px * duration)));
+    changeInstantCurrentTime(newTime);
+    onChangeCurrentTime(newTime);
+  }); // TODO skeleton
+
+  if (!duration) return null;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(Container, {
+    onMouseMove: onMouseMove,
+    onMouseUp: onMouseUp,
+    ref: ref
+  }, range(0, duration, majorInterval).map(function (a) {
+    return React.createElement(React.Fragment, null, React.createElement(Tick, {
+      key: a,
+      style: {
+        left: a / duration * bounds.width,
+        height: "50%"
+      }
+    }), React.createElement(TickText, {
+      style: {
+        left: a / duration * bounds.width + 8,
+        bottom: "calc(50% - 12px)"
+      }
+    }, getTimeString(a)));
+  }), range(0, duration, minorInterval).filter(function (a) {
+    return !Number.isInteger(a / majorInterval);
+  }).map(function (a) {
+    return React.createElement(Tick, {
+      key: a,
+      style: {
+        left: a / duration * bounds.width,
+        height: "25%"
+      }
+    });
+  }), keyframeTimes.map(function (kt) {
+    return React.createElement(KeyframeMarker, {
+      onClick: function onClick() {
+        return onChangeCurrentTime(kt);
+      },
+      key: kt,
+      style: {
+        left: kt / duration * bounds.width
+      }
+    });
+  }), React.createElement(PositionCursor, {
+    onMouseDown: function onMouseDown(e) {
+      return changeDraggingTime(true);
+    },
+    style: {
+      cursor: draggingTime ? "grabbing" : "grab",
+      left: instantCurrentTime / duration * bounds.width
+    }
+  }, getTimeString(instantCurrentTime))));
+});

package/KeyframesSelectorSidebarBox/index.js

@@ -0,0 +1,93 @@
+import React from "react";
+import AddLocationIcon from "@mui/icons-material/AddLocation";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import * as colors from "@mui/material/colors";
+import getTimeString from "../KeyframeTimeline/get-time-string.js";
+import TrashIcon from "@mui/icons-material/Delete";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+var theme = createTheme();
+var KeyframeRow = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    padding: 8,
+    fontSize: 14,
+    color: colors.grey[700],
+    "&.current": {
+      backgroundColor: colors.blue[100]
+    },
+    "&:hover": {
+      backgroundColor: colors.grey[100]
+    },
+    "& .time": {
+      flexGrow: 1,
+      fontWeight: "bold",
+      "& .regionCount": {
+        marginLeft: 8,
+        fontWeight: "normal",
+        color: colors.grey[500]
+      }
+    },
+    "& .trash": {
+      "& .icon": {
+        fontSize: 18,
+        color: colors.grey[600],
+        transition: "transform 80ms",
+        "&:hover": {
+          color: colors.grey[800],
+          transform: "scale(1.25,1.25)"
+        }
+      }
+    }
+  };
+});
+
+var KeyframesSelectorSidebarBox = function KeyframesSelectorSidebarBox(_ref2) {
+  var currentVideoTime = _ref2.currentVideoTime,
+      keyframes = _ref2.keyframes,
+      onChangeVideoTime = _ref2.onChangeVideoTime,
+      onDeleteKeyframe = _ref2.onDeleteKeyframe;
+  var keyframeTimes = Object.keys(keyframes).map(function (t) {
+    return parseInt(t);
+  });
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "Keyframes",
+    subTitle: "",
+    icon: React.createElement(AddLocationIcon, {
+      style: {
+        color: colors.grey[700]
+      }
+    }),
+    expandedByDefault: true
+  }, keyframeTimes.map(function (t) {
+    var _keyframes$t;
+
+    return React.createElement(KeyframeRow, {
+      fullWidth: true,
+      key: t,
+      className: currentVideoTime === t ? "current" : "",
+      onClick: function onClick() {
+        return onChangeVideoTime(t);
+      }
+    }, React.createElement("div", {
+      className: "time"
+    }, getTimeString(t, 2), React.createElement("span", {
+      className: "regionCount"
+    }, "(", (((_keyframes$t = keyframes[t]) === null || _keyframes$t === void 0 ? void 0 : _keyframes$t.regions) || []).length, ")")), React.createElement("div", {
+      className: "trash"
+    }, React.createElement(TrashIcon, {
+      onClick: function onClick(e) {
+        onDeleteKeyframe(t);
+        e.stopPropagation();
+      },
+      className: "icon"
+    })));
+  })));
+};
+
+export default KeyframesSelectorSidebarBox;

package/LandingPage/index.js

@@ -0,0 +1,159 @@
+import React from "react";
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import * as colors from "@mui/material/colors";
+import Grid from "@mui/material/Grid";
+import Markdown from "react-markdown";
+import GitHubButton from "react-github-btn";
+import "./github-markdown.css";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { docco } from "react-syntax-highlighter/dist/cjs/languages/hljs/javascript";
+var contentMd = "# Features\r\n\r\n- Simple input/output format\r\n- Bounding Box, Point and Polygon Annotation\r\n- Zooming, Scaling, Panning\r\n- Multiple Images\r\n- Cursor Crosshair\r\n\r\n![Screenshot of Annotator](https://user-images.githubusercontent.com/1910070/51199716-83c72080-18c5-11e9-837c-c3a89c8caef4.png)\r\n\r\n# Usage\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install react-image-annotate\r\n```\r\n\r\n## Basic Example\r\n\r\n```javascript\r\nimport ReactImageAnnotate from \"react-image-annotate\"\r\n\r\nconst App = () => (\r\n  <ReactImageAnnotate\r\n    selectedImage=\"https://example.com/image1.png\"\r\n    taskDescription=\"# Draw region around each animal.\"\r\n    images={[{ src: \"https://example.com/image1.png\", name: \"Image 1\" }]}\r\n    regionClsList={[\"Dog\", \"Cat\"]}\r\n    enabledTools={[\"create-box\"]}\r\n  />\r\n)\r\n```\r\n\r\n# Props\r\n\r\nAll of the following properties can be defined on the `ReactImageAnnotate` component...\r\n\r\n| Prop                     | Type (\\* = required)                             | Description                                                                             | Default       |\r\n| ------------------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------- | ------------- |\r\n| `taskDescription`        | \\*`string`                                       | Markdown description for what to do in the image.                                       |               |\r\n| `allowedArea`            | `{ x: number, y: number, w: number, h: number }` | Area that is available for annotation.                                                  | Entire image. |\r\n| `regionTagList`          | `Array<string>`                                  | Allowed \"tags\" (mutually inclusive classifications) for regions.                        |               |\r\n| `regionClsList`          | `Array<string>`                                  | Allowed \"classes\" (mutually exclusive classifications) for regions.                     |               |\r\n| `imageTagList`           | `Array<string>`                                  | Allowed tags for entire image.                                                          |               |\r\n| `imageClsList`           | `Array<string>`                                  | Allowed classes for entire image.                                                       |               |\r\n| `enabledTools`           | `Array<string>`                                  | Tools allowed to be used. e.g. \"select\", \"create-point\", \"create-box\", \"create-polygon\" | Everything.   |\r\n| `showTags`               | `boolean`                                        | Show tags and allow tags on regions.                                                    | `true`        |\r\n| `selectedImage`          | `string`                                         | URL of initially selected image.                                                        |               |\r\n| `images`                 | `Array<Image>`                                   | Array of images to load into annotator                                                  |               |\r\n| `showPointDistances`     | `boolean`                                        | Show distances between points.                                                          | `false`       |\r\n| `pointDistancePrecision` | `number`                                         | Precision on displayed points (e.g. 3 => 0.123)                                         |               |\r\n| `onExit`                 | `MainLayoutState => any`                         | Called when \"Save\" is called.                                                           |               |\r\n\r\n# Sponsors\r\n\r\n[![wao.ai sponsorship image](https://s3.amazonaws.com/asset.workaround.online/sponsorship-banner-1.png)](https://wao.ai)\r\n";
+var theme = createTheme();
+var RootContainer = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  };
+});
+var ContentContainer = styled("div")(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: "100%",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    maxWidth: 1200
+  };
+});
+var Header = styled("div")(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    width: "100%",
+    display: "flex",
+    justifyContent: "center",
+    backgroundColor: colors.blue[600],
+    padding: 8,
+    boxSizing: "border-box"
+  };
+});
+var HeaderButton = styled(Button)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    color: "white",
+    margin: 8,
+    padding: 16,
+    paddingLeft: 24,
+    paddingRight: 24
+  };
+});
+var Hero = styled("div")(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    display: "flex",
+    justifyContent: "center",
+    width: "100%",
+    backgroundColor: colors.blue[500],
+    padding: 16,
+    color: "white",
+    boxSizing: "border-box"
+  };
+});
+var HeroMain = styled("div")(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    fontSize: 48,
+    fontWeight: "bold",
+    paddingTop: 64,
+    textShadow: "0px 1px 5px rgba(0,0,0,0.3)"
+  };
+});
+var HeroSub = styled("div")(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    paddingTop: 32,
+    lineHeight: 1.5,
+    fontSize: 24,
+    textShadow: "0px 1px 3px rgba(0,0,0,0.2)"
+  };
+});
+var HeroButtons = styled("div")(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    paddingTop: 32,
+    paddingBottom: 48
+  };
+});
+var Section = styled("div")(function (_ref9) {
+  var theme = _ref9.theme;
+  return {
+    display: "flex",
+    padding: 16,
+    paddingTop: 32,
+    flexDirection: "column"
+  };
+});
+
+var CodeBlock = function CodeBlock(_ref10) {
+  var language = _ref10.language,
+      value = _ref10.value;
+  return React.createElement(SyntaxHighlighter, {
+    language: language,
+    style: docco
+  }, value);
+};
+
+function flatten(text, child) {
+  return typeof child === "string" ? text + child : React.Children.toArray(child.props.children).reduce(flatten, text);
+}
+
+function HeadingRenderer(props) {
+  var children = React.Children.toArray(props.children);
+  var text = children.reduce(flatten, "");
+  var slug = text.toLowerCase().replace(/\W/g, "-");
+  return React.createElement("h" + props.level, {
+    id: slug
+  }, props.children);
+}
+
+var LandingPage = function LandingPage() {
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(RootContainer, null, React.createElement(Header, {
+    id: "about"
+  }, React.createElement(ContentContainer, {
+    style: {
+      flexDirection: "row",
+      flexGrow: 1
+    }
+  }, React.createElement(HeaderButton, {
+    href: "#features"
+  }, "Features"), React.createElement(HeaderButton, {
+    href: "#usage"
+  }, "Usage"), React.createElement(HeaderButton, {
+    href: "#props"
+  }, "Props"), React.createElement(HeaderButton, {
+    href: "./demo"
+  }, "Demo Playground"))), React.createElement(Hero, null, React.createElement(ContentContainer, null, React.createElement(HeroMain, null, "React Image Annotate"), React.createElement(HeroSub, null, "Powerful React component for image annotations with bounding boxes, tagging, classification, multiple images and polygon segmentation."), React.createElement(HeroButtons, null, React.createElement(GitHubButton, {
+    href: "https://github.com/waoai/react-image-annotate",
+    "data-size": "large",
+    "data-show-count": "true",
+    "aria-label": "Star waoai/react-image-annotate on GitHub"
+  }, "Star")))), React.createElement(ContentContainer, {
+    className: "markdown-body"
+  }, React.createElement(Section, {
+    className: "markdown-body"
+  }, React.createElement(Markdown, {
+    escapeHtml: false,
+    source: contentMd,
+    renderers: {
+      code: CodeBlock,
+      heading: HeadingRenderer
+    }
+  })))));
+};
+
+export default LandingPage;

package/MainLayout/icon-dictionary.js

@@ -0,0 +1,104 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowsAlt, faMousePointer, faExpandArrowsAlt, faGripLines, faTag, faPaintBrush, faCrosshairs, faDrawPolygon, faVectorSquare, faHandPaper, faSearch, faMask, faEdit, faChartLine } from "@fortawesome/free-solid-svg-icons";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
+var faStyle = {
+  marginTop: 4,
+  width: 16,
+  height: 16,
+  marginBottom: 4
+};
+export var iconDictionary = {
+  select: function select() {
+    return React.createElement(FontAwesomeIcon, {
+      style: faStyle,
+      size: "xs",
+      fixedWidth: true,
+      icon: faMousePointer
+    });
+  },
+  pan: function pan() {
+    return React.createElement(FontAwesomeIcon, {
+      style: faStyle,
+      size: "xs",
+      fixedWidth: true,
+      icon: faHandPaper
+    });
+  },
+  zoom: function zoom() {
+    return React.createElement(FontAwesomeIcon, {
+      style: faStyle,
+      size: "xs",
+      fixedWidth: true,
+      icon: faSearch
+    });
+  },
+  "show-tags": function showTags() {
+    return React.createElement(FontAwesomeIcon, {
+      style: faStyle,
+      size: "xs",
+      fixedWidth: true,
+      icon: faTag
+    });
+  },
+  "create-point": function createPoint() {
+    return React.createElement(FontAwesomeIcon, {
+      style: faStyle,
+      size: "xs",
+      fixedWidth: true,
+      icon: faCrosshairs
+    });
+  },
+  "create-box": function createBox() {
+    return React.createElement(FontAwesomeIcon, {
+      style: faStyle,
+      size: "xs",
+      fixedWidth: true,
+      icon: faVectorSquare
+    });
+  },
+  "create-polygon": function createPolygon() {
+    return React.createElement(FontAwesomeIcon, {
+      style: faStyle,
+      size: "xs",
+      fixedWidth: true,
+      icon: faDrawPolygon
+    });
+  },
+  "create-expanding-line": function createExpandingLine() {
+    return React.createElement(FontAwesomeIcon, {
+      style: faStyle,
+      size: "xs",
+      fixedWidth: true,
+      icon: faGripLines
+    });
+  },
+  "create-line": function createLine() {
+    return React.createElement(FontAwesomeIcon, {
+      style: faStyle,
+      size: "xs",
+      fixedWidth: true,
+      icon: faChartLine
+    });
+  },
+  "show-mask": function showMask() {
+    return React.createElement(FontAwesomeIcon, {
+      style: faStyle,
+      size: "xs",
+      fixedWidth: true,
+      icon: faMask
+    });
+  },
+  "modify-allowed-area": function modifyAllowedArea() {
+    return React.createElement(FontAwesomeIcon, {
+      style: faStyle,
+      size: "xs",
+      fixedWidth: true,
+      icon: faEdit
+    });
+  },
+  "create-keypoints": AccessibilityNewIcon,
+  window: FullscreenIcon
+};
+export default iconDictionary;