@searpent/react-image-annotate 2.0.5 → 2.0.6

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 isEqual from "lodash/isEqual";
+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
+        }
+      }, groupTitle),
+      secondary: groupSubtitle
+    }));
+  }))));
+};
+export default GroupSelectorSidebarBox;

package/HighlightBox/index.js

@@ -0,0 +1,99 @@
+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": {
+        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,
+    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);
+      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];
+  }));
+});

package/ImageCanvas/index.js

@@ -0,0 +1,429 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useLayoutEffect, useEffect, useMemo } from "react";
+import { Matrix } from "transformation-matrix-js";
+import Crosshairs from "../Crosshairs";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import styles from "./styles";
+import PreventScrollToParents from "../PreventScrollToParents";
+import useWindowSize from "../hooks/use-window-size.js";
+import useMouse from "./use-mouse";
+import useProjectRegionBox from "./use-project-box";
+import useExcludePattern from "../hooks/use-exclude-pattern";
+import { useRafState } from "react-use";
+import PointDistances from "../PointDistances";
+import RegionTags from "../RegionTags";
+import RegionLabel from "../RegionLabel";
+import ImageMask from "../ImageMask";
+import RegionSelectAndTransformBoxes from "../RegionSelectAndTransformBoxes";
+import VideoOrImageCanvasBackground from "../VideoOrImageCanvasBackground";
+import useEventCallback from "use-event-callback";
+import RegionShapes from "../RegionShapes";
+import useWasdMode from "./use-wasd-mode";
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return styles;
+});
+
+var getDefaultMat = function getDefaultMat() {
+  var allowedArea = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      iw = _ref.iw,
+      ih = _ref.ih;
+
+  var mat = Matrix.from(1, 0, 0, 1, -10, -10);
+
+  if (allowedArea && iw) {
+    mat = mat.translate(allowedArea.x * iw, allowedArea.y * ih).scaleU(allowedArea.w + 0.05);
+  }
+
+  return mat;
+};
+
+export var ImageCanvas = function ImageCanvas(_ref2) {
+  var regions = _ref2.regions,
+      imageSrc = _ref2.imageSrc,
+      videoSrc = _ref2.videoSrc,
+      videoTime = _ref2.videoTime,
+      realSize = _ref2.realSize,
+      showTags = _ref2.showTags,
+      _ref2$onMouseMove = _ref2.onMouseMove,
+      onMouseMove = _ref2$onMouseMove === void 0 ? function (p) {
+    return null;
+  } : _ref2$onMouseMove,
+      _ref2$onMouseDown = _ref2.onMouseDown,
+      onMouseDown = _ref2$onMouseDown === void 0 ? function (p) {
+    return null;
+  } : _ref2$onMouseDown,
+      _ref2$onMouseUp = _ref2.onMouseUp,
+      onMouseUp = _ref2$onMouseUp === void 0 ? function (p) {
+    return null;
+  } : _ref2$onMouseUp,
+      _ref2$dragWithPrimary = _ref2.dragWithPrimary,
+      dragWithPrimary = _ref2$dragWithPrimary === void 0 ? false : _ref2$dragWithPrimary,
+      _ref2$zoomWithPrimary = _ref2.zoomWithPrimary,
+      zoomWithPrimary = _ref2$zoomWithPrimary === void 0 ? false : _ref2$zoomWithPrimary,
+      _ref2$createWithPrima = _ref2.createWithPrimary,
+      createWithPrimary = _ref2$createWithPrima === void 0 ? false : _ref2$createWithPrima,
+      _ref2$pointDistancePr = _ref2.pointDistancePrecision,
+      pointDistancePrecision = _ref2$pointDistancePr === void 0 ? 0 : _ref2$pointDistancePr,
+      regionClsList = _ref2.regionClsList,
+      regionTagList = _ref2.regionTagList,
+      showCrosshairs = _ref2.showCrosshairs,
+      _ref2$showHighlightBo = _ref2.showHighlightBox,
+      showHighlightBox = _ref2$showHighlightBo === void 0 ? true : _ref2$showHighlightBo,
+      showPointDistances = _ref2.showPointDistances,
+      allowedArea = _ref2.allowedArea,
+      _ref2$RegionEditLabel = _ref2.RegionEditLabel,
+      RegionEditLabel = _ref2$RegionEditLabel === void 0 ? null : _ref2$RegionEditLabel,
+      _ref2$videoPlaying = _ref2.videoPlaying,
+      videoPlaying = _ref2$videoPlaying === void 0 ? false : _ref2$videoPlaying,
+      _ref2$showMask = _ref2.showMask,
+      showMask = _ref2$showMask === void 0 ? true : _ref2$showMask,
+      fullImageSegmentationMode = _ref2.fullImageSegmentationMode,
+      autoSegmentationOptions = _ref2.autoSegmentationOptions,
+      onImageOrVideoLoaded = _ref2.onImageOrVideoLoaded,
+      onChangeRegion = _ref2.onChangeRegion,
+      onBeginRegionEdit = _ref2.onBeginRegionEdit,
+      onCloseRegionEdit = _ref2.onCloseRegionEdit,
+      onBeginBoxTransform = _ref2.onBeginBoxTransform,
+      onBeginMovePolygonPoint = _ref2.onBeginMovePolygonPoint,
+      onAddPolygonPoint = _ref2.onAddPolygonPoint,
+      onBeginMoveKeypoint = _ref2.onBeginMoveKeypoint,
+      onSelectRegion = _ref2.onSelectRegion,
+      onBeginMovePoint = _ref2.onBeginMovePoint,
+      onDeleteRegion = _ref2.onDeleteRegion,
+      onChangeVideoTime = _ref2.onChangeVideoTime,
+      onChangeVideoPlaying = _ref2.onChangeVideoPlaying,
+      onRegionClassAdded = _ref2.onRegionClassAdded,
+      _ref2$zoomOnAllowedAr = _ref2.zoomOnAllowedArea,
+      zoomOnAllowedArea = _ref2$zoomOnAllowedAr === void 0 ? true : _ref2$zoomOnAllowedAr,
+      _ref2$modifyingAllowe = _ref2.modifyingAllowedArea,
+      modifyingAllowedArea = _ref2$modifyingAllowe === void 0 ? false : _ref2$modifyingAllowe,
+      keypointDefinitions = _ref2.keypointDefinitions,
+      allowComments = _ref2.allowComments,
+      _ref2$hideNotEditingL = _ref2.hideNotEditingLabel,
+      hideNotEditingLabel = _ref2$hideNotEditingL === void 0 ? false : _ref2$hideNotEditingL,
+      allowedGroups = _ref2.allowedGroups;
+  var classes = useStyles();
+  var canvasEl = useRef(null);
+  var layoutParams = useRef({});
+
+  var _useRafState = useRafState(false),
+      _useRafState2 = _slicedToArray(_useRafState, 2),
+      dragging = _useRafState2[0],
+      changeDragging = _useRafState2[1];
+
+  var _useRafState3 = useRafState(0),
+      _useRafState4 = _slicedToArray(_useRafState3, 2),
+      maskImagesLoaded = _useRafState4[0],
+      changeMaskImagesLoaded = _useRafState4[1];
+
+  var _useRafState5 = useRafState(null),
+      _useRafState6 = _slicedToArray(_useRafState5, 2),
+      zoomStart = _useRafState6[0],
+      changeZoomStart = _useRafState6[1];
+
+  var _useRafState7 = useRafState(null),
+      _useRafState8 = _slicedToArray(_useRafState7, 2),
+      zoomEnd = _useRafState8[0],
+      changeZoomEnd = _useRafState8[1];
+
+  var _useRafState9 = useRafState(getDefaultMat()),
+      _useRafState10 = _slicedToArray(_useRafState9, 2),
+      mat = _useRafState10[0],
+      changeMat = _useRafState10[1];
+
+  var maskImages = useRef({});
+  var windowSize = useWindowSize();
+  var getLatestMat = useEventCallback(function () {
+    return mat;
+  });
+  useWasdMode({
+    getLatestMat: getLatestMat,
+    changeMat: changeMat
+  });
+
+  var _useMouse = useMouse({
+    canvasEl: canvasEl,
+    dragging: dragging,
+    mat: mat,
+    layoutParams: layoutParams,
+    changeMat: changeMat,
+    zoomStart: zoomStart,
+    zoomEnd: zoomEnd,
+    changeZoomStart: changeZoomStart,
+    changeZoomEnd: changeZoomEnd,
+    changeDragging: changeDragging,
+    zoomWithPrimary: zoomWithPrimary,
+    dragWithPrimary: dragWithPrimary,
+    onMouseMove: onMouseMove,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp
+  }),
+      mouseEvents = _useMouse.mouseEvents,
+      mousePosition = _useMouse.mousePosition;
+
+  useLayoutEffect(function () {
+    return changeMat(mat.clone());
+  }, [windowSize]);
+  var innerMousePos = mat.applyToPoint(mousePosition.current.x, mousePosition.current.y);
+  var projectRegionBox = useProjectRegionBox({
+    layoutParams: layoutParams,
+    mat: mat
+  });
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      imageDimensions = _useState2[0],
+      changeImageDimensions = _useState2[1];
+
+  var imageLoaded = Boolean(imageDimensions && imageDimensions.naturalWidth);
+  var onVideoOrImageLoaded = useEventCallback(function (_ref3) {
+    var naturalWidth = _ref3.naturalWidth,
+        naturalHeight = _ref3.naturalHeight,
+        duration = _ref3.duration;
+    var dims = {
+      naturalWidth: naturalWidth,
+      naturalHeight: naturalHeight,
+      duration: duration
+    };
+    if (onImageOrVideoLoaded) onImageOrVideoLoaded(dims);
+    changeImageDimensions(dims); // Redundant update to fix rerendering issues
+
+    setTimeout(function () {
+      return changeImageDimensions(dims);
+    }, 10);
+  });
+  var excludePattern = useExcludePattern();
+  var canvas = canvasEl.current;
+
+  if (canvas && imageLoaded) {
+    var clientWidth = canvas.clientWidth,
+        clientHeight = canvas.clientHeight;
+    var fitScale = Math.max(imageDimensions.naturalWidth / (clientWidth - 20), imageDimensions.naturalHeight / (clientHeight - 20));
+
+    var _iw = imageDimensions.naturalWidth / fitScale,
+        _ih = imageDimensions.naturalHeight / fitScale;
+
+    layoutParams.current = {
+      iw: _iw,
+      ih: _ih,
+      fitScale: fitScale,
+      canvasWidth: clientWidth,
+      canvasHeight: clientHeight
+    };
+  }
+
+  useEffect(function () {
+    if (!imageLoaded) return;
+    changeMat(getDefaultMat(zoomOnAllowedArea ? allowedArea : null, layoutParams.current)); // eslint-disable-next-line
+  }, [imageLoaded]);
+  useLayoutEffect(function () {
+    if (!imageDimensions) return;
+    var clientWidth = canvas.clientWidth,
+        clientHeight = canvas.clientHeight;
+    canvas.width = clientWidth;
+    canvas.height = clientHeight;
+    var context = canvas.getContext("2d");
+    context.save();
+    context.transform.apply(context, _toConsumableArray(mat.clone().inverse().toArray()));
+    var _layoutParams$current = layoutParams.current,
+        iw = _layoutParams$current.iw,
+        ih = _layoutParams$current.ih;
+
+    if (allowedArea) {
+      // Pattern to indicate the NOT allowed areas
+      var x = allowedArea.x,
+          y = allowedArea.y,
+          w = allowedArea.w,
+          h = allowedArea.h;
+      context.save();
+      context.globalAlpha = 1;
+      var outer = [[0, 0], [iw, 0], [iw, ih], [0, ih]];
+      var inner = [[x * iw, y * ih], [x * iw + w * iw, y * ih], [x * iw + w * iw, y * ih + h * ih], [x * iw, y * ih + h * ih]];
+      context.moveTo.apply(context, _toConsumableArray(outer[0]));
+      outer.forEach(function (p) {
+        return context.lineTo.apply(context, _toConsumableArray(p));
+      });
+      context.lineTo.apply(context, _toConsumableArray(outer[0]));
+      context.closePath();
+      inner.reverse();
+      context.moveTo.apply(context, _toConsumableArray(inner[0]));
+      inner.forEach(function (p) {
+        return context.lineTo.apply(context, _toConsumableArray(p));
+      });
+      context.lineTo.apply(context, _toConsumableArray(inner[0]));
+      context.fillStyle = excludePattern || "#f00";
+      context.fill();
+      context.restore();
+    }
+
+    context.restore();
+  });
+  var _layoutParams$current2 = layoutParams.current,
+      iw = _layoutParams$current2.iw,
+      ih = _layoutParams$current2.ih;
+  var zoomBox = !zoomStart || !zoomEnd ? null : _objectSpread({}, mat.clone().inverse().applyToPoint(zoomStart.x, zoomStart.y), {
+    w: (zoomEnd.x - zoomStart.x) / mat.a,
+    h: (zoomEnd.y - zoomStart.y) / mat.d
+  });
+
+  if (zoomBox) {
+    if (zoomBox.w < 0) {
+      zoomBox.x += zoomBox.w;
+      zoomBox.w *= -1;
+    }
+
+    if (zoomBox.h < 0) {
+      zoomBox.y += zoomBox.h;
+      zoomBox.h *= -1;
+    }
+  }
+
+  var imagePosition = {
+    topLeft: mat.clone().inverse().applyToPoint(0, 0),
+    bottomRight: mat.clone().inverse().applyToPoint(iw, ih)
+  };
+  var highlightedRegion = useMemo(function () {
+    var highlightedRegions = regions.filter(function (r) {
+      return r.highlighted;
+    });
+    if (highlightedRegions.length !== 1) return null;
+    return highlightedRegions[0];
+  }, [regions]);
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      maxHeight: "calc(100vh - 68px)",
+      position: "relative",
+      overflow: "hidden",
+      cursor: createWithPrimary ? "crosshair" : dragging ? "grabbing" : dragWithPrimary ? "grab" : zoomWithPrimary ? mat.a < 1 ? "zoom-out" : "zoom-in" : undefined
+    }
+  }, showCrosshairs && React.createElement(Crosshairs, {
+    key: "crossHairs",
+    mousePosition: mousePosition
+  }), imageLoaded && !dragging && React.createElement(RegionSelectAndTransformBoxes, {
+    key: "regionSelectAndTransformBoxes",
+    regions: !modifyingAllowedArea || !allowedArea ? regions : [{
+      type: "box",
+      id: "$$allowed_area",
+      cls: "allowed_area",
+      highlighted: true,
+      x: allowedArea.x,
+      y: allowedArea.y,
+      w: allowedArea.w,
+      h: allowedArea.h,
+      visible: true,
+      color: "#ff0"
+    }],
+    mouseEvents: mouseEvents,
+    projectRegionBox: projectRegionBox,
+    dragWithPrimary: dragWithPrimary,
+    createWithPrimary: createWithPrimary,
+    zoomWithPrimary: zoomWithPrimary,
+    onBeginMovePoint: onBeginMovePoint,
+    onSelectRegion: onSelectRegion,
+    layoutParams: layoutParams,
+    mat: mat,
+    onBeginBoxTransform: onBeginBoxTransform,
+    onBeginMovePolygonPoint: onBeginMovePolygonPoint,
+    onBeginMoveKeypoint: onBeginMoveKeypoint,
+    onAddPolygonPoint: onAddPolygonPoint,
+    showHighlightBox: showHighlightBox
+  }), imageLoaded && showTags && !dragging && React.createElement(PreventScrollToParents, {
+    key: "regionTags"
+  }, React.createElement(RegionTags, {
+    regions: regions,
+    projectRegionBox: projectRegionBox,
+    mouseEvents: mouseEvents,
+    regionClsList: regionClsList,
+    regionTagList: regionTagList,
+    onBeginRegionEdit: onBeginRegionEdit,
+    onChangeRegion: onChangeRegion,
+    onCloseRegionEdit: onCloseRegionEdit,
+    onDeleteRegion: onDeleteRegion,
+    layoutParams: layoutParams,
+    imageSrc: imageSrc,
+    RegionEditLabel: RegionEditLabel,
+    onRegionClassAdded: onRegionClassAdded,
+    allowComments: allowComments,
+    hideNotEditingLabel: hideNotEditingLabel,
+    allowedGroups: allowedGroups
+  })), !showTags && highlightedRegion && React.createElement("div", {
+    key: "topLeftTag",
+    className: classes.fixedRegionLabel
+  }, React.createElement(RegionLabel, {
+    disableClose: true,
+    allowedClasses: regionClsList,
+    allowedTags: regionTagList,
+    onChange: onChangeRegion,
+    onDelete: onDeleteRegion,
+    editing: true,
+    region: highlightedRegion,
+    imageSrc: imageSrc,
+    allowComments: allowComments
+  })), zoomWithPrimary && zoomBox !== null && React.createElement("div", {
+    key: "zoomBox",
+    style: {
+      position: "absolute",
+      zIndex: 1,
+      border: "1px solid #fff",
+      pointerEvents: "none",
+      left: zoomBox.x,
+      top: zoomBox.y,
+      width: zoomBox.w,
+      height: zoomBox.h
+    }
+  }), showPointDistances && React.createElement(PointDistances, {
+    key: "pointDistances",
+    regions: regions,
+    realSize: realSize,
+    projectRegionBox: projectRegionBox,
+    pointDistancePrecision: pointDistancePrecision
+  }), React.createElement(PreventScrollToParents, Object.assign({
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }, mouseEvents), React.createElement(React.Fragment, null, fullImageSegmentationMode && React.createElement(ImageMask, {
+    hide: !showMask,
+    autoSegmentationOptions: autoSegmentationOptions,
+    imagePosition: imagePosition,
+    regionClsList: regionClsList,
+    imageSrc: imageSrc,
+    regions: regions
+  }), React.createElement("canvas", {
+    style: {
+      opacity: 0.25
+    },
+    className: classes.canvas,
+    ref: canvasEl
+  }), React.createElement(RegionShapes, {
+    mat: mat,
+    keypointDefinitions: keypointDefinitions,
+    imagePosition: imagePosition,
+    regions: regions,
+    fullSegmentationMode: fullImageSegmentationMode
+  }), React.createElement(VideoOrImageCanvasBackground, {
+    videoPlaying: videoPlaying,
+    imagePosition: imagePosition,
+    mouseEvents: mouseEvents,
+    onLoad: onVideoOrImageLoaded,
+    videoTime: videoTime,
+    videoSrc: videoSrc,
+    imageSrc: imageSrc,
+    useCrossOrigin: fullImageSegmentationMode,
+    onChangeVideoTime: onChangeVideoTime,
+    onChangeVideoPlaying: onChangeVideoPlaying
+  }))), React.createElement("div", {
+    className: classes.zoomIndicator
+  }, (1 / mat.a * 100).toFixed(0), "%")));
+};
+export default ImageCanvas;