@searpent/react-image-annotate 2.0.3 → 2.0.4

package/MainLayout/index.js

@@ -1,366 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import { FullScreen, useFullScreenHandle } from "react-full-screen";
-import React, { useCallback, useRef } from "react";
-import { makeStyles } from "@mui/styles";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import { styled } from "@mui/material/styles";
-import ClassSelectionMenu from "../ClassSelectionMenu";
-import DebugBox from "../DebugSidebarBox";
-import HistorySidebarBox from "../HistorySidebarBox";
-import ImageCanvas from "../ImageCanvas";
-import ImageSelector from "../ImageSelectorSidebarBox";
-import GroupSelector from "../GroupSelectorSidebarBox";
-import KeyframeTimeline from "../KeyframeTimeline";
-import KeyframesSelector from "../KeyframesSelectorSidebarBox";
-import RegionSelector from "../RegionSelectorSidebarBox";
-import SettingsDialog from "../SettingsDialog";
-import TagsSidebarBox from "../TagsSidebarBox";
-import TaskDescription from "../TaskDescriptionSidebarBox";
-import Workspace from "react-material-workspace-layout/Workspace";
-import classnames from "classnames";
-import getActiveImage from "../Annotator/reducers/get-active-image";
-import getHotkeyHelpText from "../utils/get-hotkey-help-text";
-import iconDictionary from "./icon-dictionary";
-import styles from "./styles";
-import { useDispatchHotkeyHandlers } from "../ShortcutsManager";
-import useEventCallback from "use-event-callback";
-import useImpliedVideoRegions from "./use-implied-video-regions";
-import useKey from "use-key-hook";
-import { useSettings } from "../SettingsProvider";
-import { withHotKeys } from "react-hotkeys"; // import Fullscreen from "../Fullscreen"
-
-var emptyArr = [];
-var theme = createTheme();
-var useStyles = makeStyles(function (theme) {
-  return styles;
-});
-var HotkeyDiv = withHotKeys(function (_ref) {
-  var hotKeys = _ref.hotKeys,
-      children = _ref.children,
-      divRef = _ref.divRef,
-      props = _objectWithoutProperties(_ref, ["hotKeys", "children", "divRef"]);
-
-  return React.createElement("div", Object.assign({}, _objectSpread({}, hotKeys, props), {
-    ref: divRef
-  }), children);
-});
-var FullScreenContainer = styled("div")(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    width: "100%",
-    height: "100%",
-    "& .fullscreen": {
-      width: "100%",
-      height: "100%"
-    }
-  };
-});
-export var MainLayout = function MainLayout(_ref3) {
-  var state = _ref3.state,
-      dispatch = _ref3.dispatch,
-      _ref3$alwaysShowNextB = _ref3.alwaysShowNextButton,
-      alwaysShowNextButton = _ref3$alwaysShowNextB === void 0 ? false : _ref3$alwaysShowNextB,
-      _ref3$alwaysShowPrevB = _ref3.alwaysShowPrevButton,
-      alwaysShowPrevButton = _ref3$alwaysShowPrevB === void 0 ? false : _ref3$alwaysShowPrevB,
-      RegionEditLabel = _ref3.RegionEditLabel,
-      onRegionClassAdded = _ref3.onRegionClassAdded,
-      hideHeader = _ref3.hideHeader,
-      hideHeaderText = _ref3.hideHeaderText,
-      _ref3$hideNext = _ref3.hideNext,
-      hideNext = _ref3$hideNext === void 0 ? false : _ref3$hideNext,
-      _ref3$hidePrev = _ref3.hidePrev,
-      hidePrev = _ref3$hidePrev === void 0 ? false : _ref3$hidePrev,
-      _ref3$hideClone = _ref3.hideClone,
-      hideClone = _ref3$hideClone === void 0 ? false : _ref3$hideClone,
-      _ref3$hideSettings = _ref3.hideSettings,
-      hideSettings = _ref3$hideSettings === void 0 ? false : _ref3$hideSettings,
-      _ref3$hideFullScreen = _ref3.hideFullScreen,
-      hideFullScreen = _ref3$hideFullScreen === void 0 ? false : _ref3$hideFullScreen,
-      _ref3$hideSave = _ref3.hideSave,
-      hideSave = _ref3$hideSave === void 0 ? false : _ref3$hideSave,
-      _ref3$groups = _ref3.groups,
-      groups = _ref3$groups === void 0 ? [] : _ref3$groups,
-      _ref3$onGroupSelect = _ref3.onGroupSelect,
-      onGroupSelect = _ref3$onGroupSelect === void 0 ? function () {} : _ref3$onGroupSelect,
-      _ref3$selectedGroupId = _ref3.selectedGroupId,
-      selectedGroupId = _ref3$selectedGroupId === void 0 ? null : _ref3$selectedGroupId,
-      _ref3$hideHistory = _ref3.hideHistory,
-      hideHistory = _ref3$hideHistory === void 0 ? false : _ref3$hideHistory;
-  var classes = useStyles();
-  var settings = useSettings();
-  var fullScreenHandle = useFullScreenHandle();
-  var memoizedActionFns = useRef({});
-
-  var action = function action(type) {
-    for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      params[_key - 1] = arguments[_key];
-    }
-
-    var fnKey = "".concat(type, "(").concat(params.join(","), ")");
-    if (memoizedActionFns.current[fnKey]) return memoizedActionFns.current[fnKey];
-
-    var fn = function fn() {
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
-      }
-
-      return params.length > 0 ? dispatch(_objectSpread({
-        type: type
-      }, params.reduce(function (acc, p, i) {
-        return acc[p] = args[i], acc;
-      }, {}))) : dispatch(_objectSpread({
-        type: type
-      }, args[0]));
-    };
-
-    memoizedActionFns.current[fnKey] = fn;
-    return fn;
-  };
-
-  var _getActiveImage = getActiveImage(state),
-      currentImageIndex = _getActiveImage.currentImageIndex,
-      activeImage = _getActiveImage.activeImage;
-
-  var nextImage;
-
-  if (currentImageIndex !== null) {
-    nextImage = state.images[currentImageIndex + 1];
-  }
-
-  useKey(function () {
-    return dispatch({
-      type: "CANCEL"
-    });
-  }, {
-    detectKeys: [27]
-  });
-  var isAVideoFrame = activeImage && activeImage.frameTime !== undefined;
-  var innerContainerRef = useRef();
-  var hotkeyHandlers = useDispatchHotkeyHandlers({
-    dispatch: dispatch
-  });
-  var impliedVideoRegions = useImpliedVideoRegions(state);
-  var refocusOnMouseEvent = useCallback(function (e) {
-    if (!innerContainerRef.current) return;
-    if (innerContainerRef.current.contains(document.activeElement)) return;
-
-    if (innerContainerRef.current.contains(e.target)) {
-      innerContainerRef.current.focus();
-      e.target.focus();
-    }
-  }, []);
-  var canvas = React.createElement(ImageCanvas, Object.assign({}, settings, {
-    showCrosshairs: settings.showCrosshairs && !["select", "pan", "zoom"].includes(state.selectedTool),
-    key: state.selectedImage,
-    showMask: state.showMask,
-    fullImageSegmentationMode: state.fullImageSegmentationMode,
-    autoSegmentationOptions: state.autoSegmentationOptions,
-    showTags: state.showTags,
-    allowedArea: state.allowedArea,
-    modifyingAllowedArea: state.selectedTool === "modify-allowed-area",
-    regionClsList: state.regionClsList,
-    regionTagList: state.regionTagList,
-    regions: state.annotationType === "image" ? activeImage.regions || [] : impliedVideoRegions,
-    realSize: activeImage ? activeImage.realSize : undefined,
-    videoPlaying: state.videoPlaying,
-    imageSrc: state.annotationType === "image" ? activeImage.src : null,
-    videoSrc: state.annotationType === "video" ? state.videoSrc : null,
-    pointDistancePrecision: state.pointDistancePrecision,
-    createWithPrimary: state.selectedTool.includes("create"),
-    dragWithPrimary: state.selectedTool === "pan",
-    zoomWithPrimary: state.selectedTool === "zoom",
-    showPointDistances: state.showPointDistances,
-    videoTime: state.annotationType === "image" ? state.selectedImageFrameTime : state.currentVideoTime,
-    keypointDefinitions: state.keypointDefinitions,
-    onMouseMove: action("MOUSE_MOVE"),
-    onMouseDown: action("MOUSE_DOWN"),
-    onMouseUp: action("MOUSE_UP"),
-    onChangeRegion: action("CHANGE_REGION", "region"),
-    onBeginRegionEdit: action("OPEN_REGION_EDITOR", "region"),
-    onCloseRegionEdit: action("CLOSE_REGION_EDITOR", "region"),
-    onDeleteRegion: action("DELETE_REGION", "region"),
-    onBeginBoxTransform: action("BEGIN_BOX_TRANSFORM", "box", "directions"),
-    onBeginMovePolygonPoint: action("BEGIN_MOVE_POLYGON_POINT", "polygon", "pointIndex"),
-    onBeginMoveKeypoint: action("BEGIN_MOVE_KEYPOINT", "region", "keypointId"),
-    onAddPolygonPoint: action("ADD_POLYGON_POINT", "polygon", "point", "pointIndex"),
-    onSelectRegion: action("SELECT_REGION", "region"),
-    onBeginMovePoint: action("BEGIN_MOVE_POINT", "point"),
-    onImageLoaded: action("IMAGE_LOADED", "image"),
-    RegionEditLabel: RegionEditLabel,
-    onImageOrVideoLoaded: action("IMAGE_OR_VIDEO_LOADED", "metadata"),
-    onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
-    onChangeVideoPlaying: action("CHANGE_VIDEO_PLAYING", "isPlaying"),
-    onRegionClassAdded: onRegionClassAdded,
-    allowComments: state.allowComments
-  }));
-  var onClickIconSidebarItem = useEventCallback(function (item) {
-    dispatch({
-      type: "SELECT_TOOL",
-      selectedTool: item.name
-    });
-  });
-  var onClickHeaderItem = useEventCallback(function (item) {
-    if (item.name === "Fullscreen") {
-      fullScreenHandle.enter();
-    } else if (item.name === "Window") {
-      fullScreenHandle.exit();
-    }
-
-    dispatch({
-      type: "HEADER_BUTTON_CLICKED",
-      buttonName: item.name
-    });
-  });
-  var debugModeOn = Boolean(window.localStorage.$ANNOTATE_DEBUG_MODE && state);
-  var nextImageHasRegions = !nextImage || nextImage.regions && nextImage.regions.length > 0;
-  return React.createElement(ThemeProvider, {
-    theme: theme
-  }, React.createElement(FullScreenContainer, null, React.createElement(FullScreen, {
-    handle: fullScreenHandle,
-    onChange: function onChange(open) {
-      if (!open) {
-        fullScreenHandle.exit();
-        action("HEADER_BUTTON_CLICKED", "buttonName")("Window");
-      }
-    }
-  }, React.createElement(HotkeyDiv, {
-    tabIndex: -1,
-    divRef: innerContainerRef,
-    onMouseDown: refocusOnMouseEvent,
-    onMouseOver: refocusOnMouseEvent,
-    allowChanges: true,
-    handlers: hotkeyHandlers,
-    className: classnames(classes.container, state.fullScreen && "Fullscreen")
-  }, React.createElement(Workspace, {
-    allowFullscreen: true,
-    iconDictionary: iconDictionary,
-    hideHeader: hideHeader,
-    hideHeaderText: hideHeaderText,
-    headerLeftSide: [state.annotationType === "video" ? React.createElement(KeyframeTimeline, {
-      currentTime: state.currentVideoTime,
-      duration: state.videoDuration,
-      onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
-      keyframes: state.keyframes
-    }) : activeImage ? React.createElement("div", {
-      className: classes.headerTitle
-    }, activeImage.name) : null].filter(Boolean),
-    headerItems: [!hidePrev && {
-      name: "Prev"
-    }, !hideNext && {
-      name: "Next"
-    }, state.annotationType !== "video" ? null : !state.videoPlaying ? {
-      name: "Play"
-    } : {
-      name: "Pause"
-    }, !hideClone && !nextImageHasRegions && activeImage.regions && {
-      name: "Clone"
-    }, !hideSettings && {
-      name: "Settings"
-    }, !hideFullScreen && (state.fullScreen ? {
-      name: "Window"
-    } : {
-      name: "Fullscreen"
-    }), !hideSave && {
-      name: "Save"
-    }].filter(Boolean),
-    onClickHeaderItem: onClickHeaderItem,
-    onClickIconSidebarItem: onClickIconSidebarItem,
-    selectedTools: [state.selectedTool, state.showTags && "show-tags", state.showMask && "show-mask"].filter(Boolean),
-    iconSidebarItems: [{
-      name: "select",
-      helperText: "Select" + getHotkeyHelpText("select_tool"),
-      alwaysShowing: true
-    }, {
-      name: "pan",
-      helperText: "Drag/Pan (right or middle click)" + getHotkeyHelpText("pan_tool"),
-      alwaysShowing: true
-    }, {
-      name: "zoom",
-      helperText: "Zoom In/Out (scroll)" + getHotkeyHelpText("zoom_tool"),
-      alwaysShowing: true
-    }, {
-      name: "show-tags",
-      helperText: "Show / Hide Tags",
-      alwaysShowing: true
-    }, {
-      name: "create-point",
-      helperText: "Add Point" + getHotkeyHelpText("create_point")
-    }, {
-      name: "create-box",
-      helperText: "Add Bounding Box" + getHotkeyHelpText("create_bounding_box")
-    }, {
-      name: "create-polygon",
-      helperText: "Add Polygon" + getHotkeyHelpText("create_polygon")
-    }, {
-      name: "create-line",
-      helperText: "Add Line"
-    }, {
-      name: "create-expanding-line",
-      helperText: "Add Expanding Line"
-    }, {
-      name: "create-keypoints",
-      helperText: "Add Keypoints (Pose)"
-    }, state.fullImageSegmentationMode && {
-      name: "show-mask",
-      alwaysShowing: true,
-      helperText: "Show / Hide Mask"
-    }, {
-      name: "modify-allowed-area",
-      helperText: "Modify Allowed Area"
-    }].filter(Boolean).filter(function (a) {
-      return a.alwaysShowing || state.enabledTools.includes(a.name);
-    }),
-    rightSidebarItems: [debugModeOn && React.createElement(DebugBox, {
-      state: debugModeOn,
-      lastAction: state.lastAction
-    }), state.taskDescription && React.createElement(TaskDescription, {
-      description: state.taskDescription
-    }), state.regionClsList && React.createElement(ClassSelectionMenu, {
-      selectedCls: state.selectedCls,
-      regionClsList: state.regionClsList,
-      onSelectCls: action("SELECT_CLASSIFICATION", "cls")
-    }), state.labelImages && React.createElement(TagsSidebarBox, {
-      currentImage: activeImage,
-      imageClsList: state.imageClsList,
-      imageTagList: state.imageTagList,
-      onChangeImage: action("CHANGE_IMAGE", "delta"),
-      expandedByDefault: true
-    }), // (state.images?.length || 0) > 1 && (
-    //   <ImageSelector
-    //     onSelect={action("SELECT_REGION", "region")}
-    //     images={state.images}
-    //   />
-    // ),
-    groups && React.createElement(GroupSelector, {
-      title: "Articles",
-      groups: groups,
-      selectedGroupId: selectedGroupId,
-      onSelect: onGroupSelect
-    }), React.createElement(RegionSelector, {
-      regions: activeImage ? activeImage.regions : emptyArr,
-      onSelectRegion: action("SELECT_REGION", "region"),
-      onDeleteRegion: action("DELETE_REGION", "region"),
-      onChangeRegion: action("CHANGE_REGION", "region")
-    }), state.keyframes && React.createElement(KeyframesSelector, {
-      onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
-      onDeleteKeyframe: action("DELETE_KEYFRAME", "time"),
-      onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
-      currentTime: state.currentVideoTime,
-      duration: state.videoDuration,
-      keyframes: state.keyframes
-    }), !hideHistory && React.createElement(HistorySidebarBox, {
-      history: state.history,
-      onRestoreHistory: action("RESTORE_HISTORY")
-    })].filter(Boolean)
-  }, canvas), React.createElement(SettingsDialog, {
-    open: state.settingsOpen,
-    onClose: function onClose() {
-      return dispatch({
-        type: "HEADER_BUTTON_CLICKED",
-        buttonName: "Settings"
-      });
-    }
-  })))));
-};
-export default MainLayout;

package/MainLayout/use-implied-video-regions.js

@@ -1,13 +0,0 @@
-import { useMemo } from "react";
-import getImpliedVideoRegions from "../Annotator/reducers/get-implied-video-regions.js";
-var emptyArr = [];
-export default (function (state) {
-  if (state.annotationType !== "video") return emptyArr;
-  var keyframes = state.keyframes,
-      _state$currentVideoTi = state.currentVideoTime,
-      currentVideoTime = _state$currentVideoTi === void 0 ? 0 : _state$currentVideoTi; // TODO memoize
-
-  return useMemo(function () {
-    return getImpliedVideoRegions(keyframes, currentVideoTime);
-  }, [keyframes, currentVideoTime]);
-});

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;

package/RegionLabel/index.js

@@ -1,191 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
-import React, { useRef, memo } from "react";
-import Paper from "@mui/material/Paper";
-import { makeStyles } from "@mui/styles";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import styles from "./styles";
-import classnames from "classnames";
-import IconButton from "@mui/material/IconButton";
-import Button from "@mui/material/Button";
-import TrashIcon from "@mui/icons-material/Delete";
-import CheckIcon from "@mui/icons-material/Check";
-import TextField from "@mui/material/TextField";
-import Select from "react-select";
-import CreatableSelect from "react-select/creatable";
-import { asMutable } from "seamless-immutable";
-var theme = createTheme();
-var useStyles = makeStyles(function (theme) {
-  return styles;
-});
-export var RegionLabel = function RegionLabel(_ref) {
-  var region = _ref.region,
-      editing = _ref.editing,
-      allowedClasses = _ref.allowedClasses,
-      allowedTags = _ref.allowedTags,
-      onDelete = _ref.onDelete,
-      _onChange = _ref.onChange,
-      onClose = _ref.onClose,
-      onOpen = _ref.onOpen,
-      onRegionClassAdded = _ref.onRegionClassAdded,
-      allowComments = _ref.allowComments;
-  var classes = useStyles();
-  var commentInputRef = useRef(null);
-
-  var onCommentInputClick = function onCommentInputClick(_) {
-    // The TextField wraps the <input> tag with two divs
-    var commentInput = commentInputRef.current.children[0].children[0];
-    if (commentInput) return commentInput.focus();
-  };
-
-  return React.createElement(ThemeProvider, {
-    theme: theme
-  }, React.createElement(Paper, {
-    onClick: function onClick() {
-      return !editing ? onOpen(region) : null;
-    },
-    className: classnames(classes.regionInfo, {
-      highlighted: region.highlighted
-    })
-  }, !editing ? React.createElement("div", null, region.cls && React.createElement("div", {
-    className: "name"
-  }, React.createElement("div", {
-    className: "circle",
-    style: {
-      backgroundColor: region.color
-    }
-  }), region.cls), region.tags && React.createElement("div", {
-    className: "tags"
-  }, region.tags.map(function (t) {
-    return React.createElement("div", {
-      key: t,
-      className: "tag"
-    }, t);
-  }))) : React.createElement("div", {
-    style: {
-      width: 200
-    }
-  }, React.createElement("div", {
-    style: {
-      display: "flex",
-      flexDirection: "row"
-    }
-  }, React.createElement("div", {
-    style: {
-      display: "flex",
-      backgroundColor: region.color || "#888",
-      color: "#fff",
-      padding: 4,
-      paddingLeft: 8,
-      paddingRight: 8,
-      borderRadius: 4,
-      fontWeight: "bold",
-      textShadow: "0px 0px 5px rgba(0,0,0,0.4)"
-    }
-  }, region.type), React.createElement("div", {
-    style: {
-      flexGrow: 1
-    }
-  }), React.createElement(IconButton, {
-    onClick: function onClick() {
-      return onDelete(region);
-    },
-    tabIndex: -1,
-    style: {
-      width: 22,
-      height: 22
-    },
-    size: "small",
-    variant: "outlined"
-  }, React.createElement(TrashIcon, {
-    style: {
-      marginTop: -8,
-      width: 16,
-      height: 16
-    }
-  }))), (allowedClasses || []).length > 0 && React.createElement("div", {
-    style: {
-      marginTop: 6
-    }
-  }, React.createElement(CreatableSelect, {
-    placeholder: "Classification",
-    onChange: function onChange(o, actionMeta) {
-      if (actionMeta.action == "create-option") {
-        onRegionClassAdded(o.value);
-      }
-
-      return _onChange(_objectSpread({}, region, {
-        cls: o.value
-      }));
-    },
-    value: region.cls ? {
-      label: region.cls,
-      value: region.cls
-    } : null,
-    options: asMutable(allowedClasses.map(function (c) {
-      return {
-        value: c,
-        label: c
-      };
-    }))
-  })), (allowedTags || []).length > 0 && React.createElement("div", {
-    style: {
-      marginTop: 4
-    }
-  }, React.createElement(Select, {
-    onChange: function onChange(newTags) {
-      return _onChange(_objectSpread({}, region, {
-        tags: newTags.map(function (t) {
-          return t.value;
-        })
-      }));
-    },
-    placeholder: "Tags",
-    value: (region.tags || []).map(function (c) {
-      return {
-        label: c,
-        value: c
-      };
-    }),
-    isMulti: true,
-    options: asMutable(allowedTags.map(function (c) {
-      return {
-        value: c,
-        label: c
-      };
-    }))
-  })), allowComments && React.createElement(TextField, {
-    InputProps: {
-      className: classes.commentBox
-    },
-    fullWidth: true,
-    multiline: true,
-    rows: 3,
-    ref: commentInputRef,
-    onClick: onCommentInputClick,
-    value: region.comment || "",
-    onChange: function onChange(event) {
-      return _onChange(_objectSpread({}, region, {
-        comment: event.target.value
-      }));
-    }
-  }), onClose && React.createElement("div", {
-    style: {
-      marginTop: 4,
-      display: "flex"
-    }
-  }, React.createElement("div", {
-    style: {
-      flexGrow: 1
-    }
-  }), React.createElement(Button, {
-    onClick: function onClick() {
-      return onClose(region);
-    },
-    size: "small",
-    variant: "contained",
-    color: "primary"
-  }, React.createElement(CheckIcon, null))))));
-};
-export default memo(RegionLabel, function (prevProps, nextProps) {
-  return prevProps.editing === nextProps.editing && prevProps.region === nextProps.region;
-});