@searpent/react-image-annotate 2.0.5 → 2.0.8

package/SidebarBoxContainer/index.js

@@ -0,0 +1,93 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, memo } from "react";
+import Paper from "@mui/material/Paper";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import ExpandIcon from "@mui/icons-material/ExpandMore";
+import IconButton from "@mui/material/IconButton";
+import Collapse from "@mui/material/Collapse";
+import { grey } from "@mui/material/colors";
+import classnames from "classnames";
+import useEventCallback from "use-event-callback";
+import SidebarBox from "react-material-workspace-layout/SidebarBox";
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return {
+    container: {
+      margin: 8
+    },
+    header: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      padding: 8,
+      paddingLeft: 16,
+      paddingRight: 16
+    },
+    title: {
+      fontSize: 14,
+      fontWeight: "bold",
+      flexGrow: 1,
+      paddingLeft: 8,
+      color: grey[800],
+      "& span": {
+        color: grey[600],
+        fontSize: 12
+      }
+    },
+    expandButton: {
+      padding: 0,
+      width: 30,
+      height: 30,
+      "& .icon": {
+        marginTop: -6,
+        width: 20,
+        height: 20,
+        transition: "500ms transform",
+        "&.expanded": {
+          transform: "rotate(180deg)"
+        }
+      }
+    },
+    expandedContent: {
+      maxHeight: 300,
+      overflowY: "auto",
+      "&.noScroll": {
+        overflowY: "visible",
+        overflow: "visible"
+      }
+    }
+  };
+});
+export var SidebarBoxContainer = function SidebarBoxContainer(_ref) {
+  var icon = _ref.icon,
+      title = _ref.title,
+      subTitle = _ref.subTitle,
+      children = _ref.children,
+      _ref$noScroll = _ref.noScroll,
+      noScroll = _ref$noScroll === void 0 ? false : _ref$noScroll,
+      _ref$expandedByDefaul = _ref.expandedByDefault,
+      expandedByDefault = _ref$expandedByDefaul === void 0 ? false : _ref$expandedByDefaul;
+  var classes = useStyles();
+  var content = React.createElement("div", {
+    className: classnames(classes.expandedContent, noScroll && "noScroll")
+  }, children);
+
+  var _useState = useState(expandedByDefault),
+      _useState2 = _slicedToArray(_useState, 2),
+      expanded = _useState2[0],
+      changeExpanded = _useState2[1];
+
+  var toggleExpanded = useEventCallback(function () {
+    return changeExpanded(!expanded);
+  });
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBox, {
+    icon: icon,
+    title: title
+  }, children));
+};
+export default memo(SidebarBoxContainer, function (prev, next) {
+  return prev.title === next.title && prev.children === next.children;
+});

package/SmallToolButton/index.js

@@ -0,0 +1,42 @@
+import React, { createContext, useContext, memo } from "react";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import { blue } from "@mui/material/colors";
+export var SelectedTool = createContext();
+export var SmallToolButton = function SmallToolButton(_ref) {
+  var id = _ref.id,
+      name = _ref.name,
+      icon = _ref.icon,
+      selected = _ref.selected,
+      togglable = _ref.togglable,
+      _ref$alwaysShowing = _ref.alwaysShowing,
+      alwaysShowing = _ref$alwaysShowing === void 0 ? false : _ref$alwaysShowing;
+
+  var _useContext = useContext(SelectedTool),
+      enabledTools = _useContext.enabledTools,
+      selectedTool = _useContext.selectedTool,
+      onClickTool = _useContext.onClickTool;
+
+  if (!enabledTools.includes(id) && !alwaysShowing) return null;
+  selected = selected || selectedTool === id;
+  return React.createElement(Tooltip, {
+    placement: "right",
+    title: name
+  }, React.createElement("div", null, React.createElement(IconButton, {
+    disabled: !togglable ? selected : undefined,
+    "aria-label": name,
+    onClick: function onClick() {
+      return onClickTool(id);
+    },
+    size: "small",
+    style: {
+      width: 50,
+      height: 50,
+      margin: 1,
+      color: selected ? blue[500] : undefined
+    }
+  }, icon)));
+};
+export default memo(SmallToolButton, function (prevProps, nextProps) {
+  return prevProps.togglable === nextProps.togglable && prevProps.selected === nextProps.selected && prevProps.name === nextProps.name && prevProps.id === nextProps.id;
+});

package/TagsSidebarBox/index.js

@@ -0,0 +1,105 @@
+import React, { useMemo, memo } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import StyleIcon from "@mui/icons-material/Style";
+import { grey } from "@mui/material/colors";
+import Select from "react-select";
+import useEventCallback from "use-event-callback";
+import { asMutable } from "seamless-immutable";
+var emptyArr = [];
+
+var noop = function noop() {
+  return null;
+};
+
+export var TagsSidebarBox = function TagsSidebarBox(_ref) {
+  var currentImage = _ref.currentImage,
+      _ref$imageClsList = _ref.imageClsList,
+      imageClsList = _ref$imageClsList === void 0 ? emptyArr : _ref$imageClsList,
+      _ref$imageTagList = _ref.imageTagList,
+      imageTagList = _ref$imageTagList === void 0 ? emptyArr : _ref$imageTagList,
+      _ref$onChangeImage = _ref.onChangeImage,
+      onChangeImage = _ref$onChangeImage === void 0 ? noop : _ref$onChangeImage;
+
+  var _ref2 = currentImage || {},
+      _ref2$tags = _ref2.tags,
+      tags = _ref2$tags === void 0 ? [] : _ref2$tags,
+      _ref2$cls = _ref2.cls,
+      cls = _ref2$cls === void 0 ? null : _ref2$cls;
+
+  var onChangeClassification = useEventCallback(function (o) {
+    return onChangeImage({
+      cls: o.value
+    });
+  });
+  var onChangeTags = useEventCallback(function (o) {
+    return onChangeImage({
+      tags: o.map(function (a) {
+        return a.value;
+      })
+    });
+  });
+  var selectValue = useMemo(function () {
+    return cls ? {
+      value: cls,
+      label: cls
+    } : null;
+  }, [cls]);
+  var memoImgClsList = useMemo(function () {
+    return asMutable(imageClsList.map(function (c) {
+      return {
+        value: c,
+        label: c
+      };
+    }));
+  }, [imageClsList]);
+  var memoImgTagList = useMemo(function () {
+    return asMutable(imageTagList.map(function (c) {
+      return {
+        value: c,
+        label: c
+      };
+    }));
+  }, [imageTagList]);
+  var memoCurrentTags = useMemo(function () {
+    return tags.map(function (r) {
+      return {
+        value: r,
+        label: r
+      };
+    });
+  }, [tags]);
+  if (!currentImage) return null;
+  return React.createElement(SidebarBoxContainer, {
+    title: "Image Tags",
+    expandedByDefault: true,
+    noScroll: true,
+    icon: React.createElement(StyleIcon, {
+      style: {
+        color: grey[700]
+      }
+    })
+  }, imageClsList.length > 0 && React.createElement("div", {
+    style: {
+      padding: 8
+    }
+  }, React.createElement(Select, {
+    placeholder: "Image Classification",
+    onChange: onChangeClassification,
+    value: selectValue,
+    options: memoImgClsList
+  })), imageTagList.length > 0 && React.createElement("div", {
+    style: {
+      padding: 8,
+      paddingTop: 0
+    }
+  }, React.createElement(Select, {
+    isMulti: true,
+    placeholder: "Image Tags",
+    onChange: onChangeTags,
+    value: memoCurrentTags,
+    options: memoImgTagList
+  })));
+};
+export default memo(TagsSidebarBox, function (prevProps, nextProps) {
+  return prevProps.currentImage.cls === nextProps.currentImage.cls && prevProps.currentImage.tags === nextProps.currentImage.tags && prevProps.imageClsList === nextProps.imageClsList && prevProps.imageTagList === nextProps.imageTagList;
+});

package/TaskDescriptionSidebarBox/index.js

@@ -0,0 +1,58 @@
+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";
+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 TaskDescriptionSidebarBox = function TaskDescriptionSidebarBox(_ref2) {
+  var description = _ref2.description;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "Task Description",
+    icon: React.createElement(DescriptionIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: description && description !== "" ? false : true
+  }, React.createElement(MarkdownContainer, null, React.createElement(Markdown, {
+    source: description
+  }))));
+};
+export default memo(TaskDescriptionSidebarBox);

package/Theme/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { makeStyles } from "@mui/styles";
+var useStyles = makeStyles(function (theme) {
+  return {
+    container: {
+      fontFamily: '"Inter", sans-serif'
+    }
+  };
+});
+var theme = createTheme({
+  typography: {
+    fontFamily: '"Inter", "Roboto", sans-serif'
+  },
+  overrides: {
+    MuiButton: {
+      root: {
+        textTransform: "none"
+      }
+    }
+  }
+});
+export var Theme = function Theme(_ref) {
+  var children = _ref.children;
+  var classes = useStyles();
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement("div", null, children));
+};
+export default Theme;

package/VideoOrImageCanvasBackground/index.js

@@ -0,0 +1,151 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useEffect, useMemo, useState } from "react";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import useEventCallback from "use-event-callback";
+import { useSettings } from "../SettingsProvider";
+var theme = createTheme();
+var Video = styled("video")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    zIndex: 0,
+    position: "absolute"
+  };
+});
+var StyledImage = styled("img")(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    zIndex: 0,
+    position: "absolute"
+  };
+});
+var Error = styled("div")(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    zIndex: 0,
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    backgroundColor: "rgba(255,0,0,0.2)",
+    color: "#ff0000",
+    fontWeight: "bold",
+    whiteSpace: "pre-wrap",
+    padding: 50
+  };
+});
+export default (function (_ref4) {
+  var imagePosition = _ref4.imagePosition,
+      mouseEvents = _ref4.mouseEvents,
+      videoTime = _ref4.videoTime,
+      videoSrc = _ref4.videoSrc,
+      imageSrc = _ref4.imageSrc,
+      onLoad = _ref4.onLoad,
+      _ref4$useCrossOrigin = _ref4.useCrossOrigin,
+      useCrossOrigin = _ref4$useCrossOrigin === void 0 ? false : _ref4$useCrossOrigin,
+      videoPlaying = _ref4.videoPlaying,
+      onChangeVideoTime = _ref4.onChangeVideoTime,
+      onChangeVideoPlaying = _ref4.onChangeVideoPlaying;
+  var settings = useSettings();
+  var videoRef = useRef();
+  var imageRef = useRef();
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      error = _useState2[0],
+      setError = _useState2[1];
+
+  useEffect(function () {
+    if (!videoPlaying && videoRef.current) {
+      videoRef.current.currentTime = (videoTime || 0) / 1000;
+    }
+  }, [videoTime]);
+  useEffect(function () {
+    var renderLoopRunning = false;
+
+    if (videoRef.current) {
+      if (videoPlaying) {
+        videoRef.current.play();
+        renderLoopRunning = true;
+
+        if (settings.videoPlaybackSpeed) {
+          videoRef.current.playbackRate = parseFloat(settings.videoPlaybackSpeed);
+        }
+      } else {
+        videoRef.current.pause();
+      }
+    }
+
+    function checkForNewFrame() {
+      if (!renderLoopRunning) return;
+      if (!videoRef.current) return;
+      var newVideoTime = Math.floor(videoRef.current.currentTime * 1000);
+
+      if (videoTime !== newVideoTime) {
+        onChangeVideoTime(newVideoTime);
+      }
+
+      if (videoRef.current.paused) {
+        renderLoopRunning = false;
+        onChangeVideoPlaying(false);
+      }
+
+      requestAnimationFrame(checkForNewFrame);
+    }
+
+    checkForNewFrame();
+    return function () {
+      renderLoopRunning = false;
+    };
+  }, [videoPlaying]);
+  var onLoadedVideoMetadata = useEventCallback(function (event) {
+    var videoElm = event.currentTarget;
+    videoElm.currentTime = (videoTime || 0) / 1000;
+    if (onLoad) onLoad({
+      naturalWidth: videoElm.videoWidth,
+      naturalHeight: videoElm.videoHeight,
+      videoElm: videoElm,
+      duration: videoElm.duration
+    });
+  });
+  var onImageLoaded = useEventCallback(function (event) {
+    var imageElm = event.currentTarget;
+    if (onLoad) onLoad({
+      naturalWidth: imageElm.naturalWidth,
+      naturalHeight: imageElm.naturalHeight,
+      imageElm: imageElm
+    });
+  });
+  var onImageError = useEventCallback(function (event) {
+    setError("Could not load image\n\nMake sure your image works by visiting ".concat(imageSrc || videoSrc, " in a web browser. If that URL works, the server hosting the URL may be not allowing you to access the image from your current domain. Adjust server settings to enable the image to be viewed.").concat(!useCrossOrigin ? "" : "\n\nYour image may be blocked because it's not being sent with CORs headers. To do pixel segmentation, browser web security requires CORs headers in order for the algorithm to read the pixel data from the image. CORs headers are easy to add if you're using an S3 bucket or own the server hosting your images.", "\n\n If you need a hand, reach out to the community at universaldatatool.slack.com"));
+  });
+  var stylePosition = useMemo(function () {
+    var width = imagePosition.bottomRight.x - imagePosition.topLeft.x;
+    var height = imagePosition.bottomRight.y - imagePosition.topLeft.y;
+    return {
+      imageRendering: "pixelated",
+      left: imagePosition.topLeft.x,
+      top: imagePosition.topLeft.y,
+      width: isNaN(width) ? 0 : width,
+      height: isNaN(height) ? 0 : height
+    };
+  }, [imagePosition.topLeft.x, imagePosition.topLeft.y, imagePosition.bottomRight.x, imagePosition.bottomRight.y]);
+  if (!videoSrc && !imageSrc) return React.createElement(Error, null, "No imageSrc or videoSrc provided");
+  if (error) return React.createElement(Error, null, error);
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, imageSrc && videoTime === undefined ? React.createElement(StyledImage, Object.assign({}, mouseEvents, {
+    src: imageSrc,
+    ref: imageRef,
+    style: stylePosition,
+    onLoad: onImageLoaded,
+    onError: onImageError,
+    crossOrigin: useCrossOrigin ? "anonymous" : undefined
+  })) : React.createElement(Video, Object.assign({}, mouseEvents, {
+    ref: videoRef,
+    style: stylePosition,
+    onLoadedMetadata: onLoadedVideoMetadata,
+    src: videoSrc || imageSrc
+  })));
+});

package/colors.js

@@ -0,0 +1,14 @@
+import * as muiColors from "@mui/material/colors";
+export var colors = [muiColors.red[500], muiColors.blue[500], muiColors.green[500], muiColors.orange[800], muiColors.brown[500], muiColors.lightGreen[700], muiColors.pink[500], muiColors.purple[500], muiColors.indigo[500], muiColors.teal[500], muiColors.lime[500], muiColors.blueGrey[500]];
+var transparency = 0x88000000;
+
+function reverseParseColor(rrggbb) {
+  rrggbb = rrggbb.replace("#", "");
+  var bbggrr = rrggbb.substr(4, 2) + rrggbb.substr(2, 2) + rrggbb.substr(0, 2);
+  return parseInt(bbggrr, 16);
+}
+
+export var colorInts = colors.map(function (c) {
+  return (reverseParseColor(c) | transparency) >>> 0;
+});
+export default colors;

package/hooks/use-colors.js

@@ -0,0 +1,101 @@
+import { useSettings } from "../SettingsProvider";
+
+function defaultClsColor(cls) {
+  switch (cls) {
+    case 'title':
+      return '#f70202';
+
+    case 'subtitle':
+      return "#ffb405";
+
+    case 'text':
+      return "#14deef";
+
+    case 'author':
+      return "#f8d51e";
+
+    case 'appendix':
+      return "#bfede2";
+
+    case 'photo_author':
+      return "#9a17bb";
+
+    case 'photo_caption':
+      return "#ff84f6";
+
+    case 'advertisement':
+      return "#ffb201";
+
+    case 'other_graphics':
+      return "#ff5400";
+
+    case 'unknown':
+      return "#bfede2";
+
+    case 'about_author':
+      return "#9a17bb";
+
+    case 'image':
+      return "#14deef";
+
+    case 'interview':
+      return "#23b20f";
+
+    case 'table':
+      return "#02b4ba";
+
+    default:
+      return "#02b4ba";
+  }
+}
+
+function defaultGroupColor(groupId) {
+  switch (groupId) {
+    case "0":
+      return "#FDDFDF";
+
+    case "1":
+      return "#FCF7DE";
+
+    case "2":
+      return "#DEFDE0";
+
+    case "3":
+      return "#DEF3FD";
+
+    case "4":
+      return "#F0DEFD";
+
+    default:
+      return "#F0DEFD";
+  }
+}
+
+var useColors = function useColors() {
+  var _useSettings = useSettings(),
+      clsColors = _useSettings.clsColors,
+      groupColors = _useSettings.groupColors;
+
+  var clsColor = function clsColor(cls) {
+    if (clsColors[cls]) {
+      return clsColors[cls];
+    }
+
+    return defaultClsColor(cls);
+  };
+
+  var groupColor = function groupColor(groupId) {
+    if (groupColors[groupId]) {
+      return groupColors[groupId];
+    }
+
+    return defaultGroupColor(groupId);
+  };
+
+  return {
+    clsColor: clsColor,
+    groupColor: groupColor
+  };
+};
+
+export default useColors;

package/hooks/use-event-callback.js

@@ -0,0 +1,10 @@
+import { useRef, useCallback, useLayoutEffect, useEffect } from "react";
+export default (function (fn) {
+  var ref = useRef();
+  useLayoutEffect(function () {
+    ref.current = fn;
+  });
+  return useCallback(function () {
+    return (0, ref.current).apply(void 0, arguments);
+  }, []);
+});

package/hooks/use-exclude-pattern.js

@@ -0,0 +1,24 @@
+import { useRef } from "react";
+import excludePatternSrc from "./xpattern.js";
+export default (function () {
+  var excludePattern = useRef(null);
+
+  if (excludePattern.current === null) {
+    excludePattern.current = {
+      image: new Image(),
+      pattern: null
+    };
+    var canvas = document.createElement("canvas");
+    canvas.width = 100;
+    canvas.height = 100;
+    var context = canvas.getContext("2d");
+
+    excludePattern.current.image.onload = function () {
+      excludePattern.current.pattern = context.createPattern(excludePattern.current.image, "repeat");
+    };
+
+    excludePattern.current.image.src = excludePatternSrc;
+  }
+
+  return excludePattern.current.pattern;
+});

package/hooks/use-load-image.js

@@ -0,0 +1,26 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useRef, useState } from "react";
+export default (function (imageSrc, onImageLoaded) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      imageLoaded = _useState2[0],
+      changeImageLoaded = _useState2[1];
+
+  var image = useRef(null);
+
+  if (image.current === null) {
+    image.current = new Image();
+
+    image.current.onload = function () {
+      changeImageLoaded(true);
+      if (onImageLoaded) onImageLoaded({
+        width: image.current.naturalWidth,
+        height: image.current.naturalHeight
+      });
+    };
+
+    image.current.src = imageSrc;
+  }
+
+  return [image.current, imageLoaded];
+});