react-visual-annotator
Version:
Powerful React image and video annotation tool for machine learning, computer vision, and AI training data creation. Features rotatable bounding boxes, polygons, keypoints, segmentation with TypeScript support and Material-UI components.
1,505 lines • 1.31 MB
JavaScript
import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
import * as React from "react";
import React__default, { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, createContext, useContext, memo, forwardRef, createElement as createElement$1, Fragment, Component, PureComponent, useReducer } from "react";
import { createTheme, styled, ThemeProvider, useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import * as muiColors from "@mui/material/colors";
import { grey, blue } from "@mui/material/colors";
import ExpandIcon from "@mui/icons-material/ExpandMore";
import IconButton from "@mui/material/IconButton";
import Collapse from "@mui/material/Collapse";
import Typography from "@mui/material/Typography";
import BallotIcon from "@mui/icons-material/Ballot";
import capitalize$4 from "lodash/capitalize";
import HistoryIcon from "@mui/icons-material/History";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
import UndoIcon from "@mui/icons-material/Undo";
import moment from "moment";
import isEqual$1 from "lodash/isEqual";
import { __unsafe_useEmotionCache, keyframes, jsx as jsx$1, css as css$3 } from "@emotion/react";
import Paper from "@mui/material/Paper";
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 { createPortal } from "react-dom";
import LockIcon from "@mui/icons-material/Lock";
import Tooltip from "@mui/material/Tooltip";
import range from "lodash/range";
import AddLocationIcon from "@mui/icons-material/AddLocation";
import RegionIcon from "@mui/icons-material/PictureInPicture";
import Grid from "@mui/material/Grid";
import ReorderIcon from "@mui/icons-material/SwapVert";
import UnlockIcon from "@mui/icons-material/LockOpen";
import VisibleIcon from "@mui/icons-material/Visibility";
import VisibleOffIcon from "@mui/icons-material/VisibilityOff";
import StyleIcon from "@mui/icons-material/Style";
import DescriptionIcon from "@mui/icons-material/Description";
import { cloneDeep } from "lodash";
import BackIcon from "@mui/icons-material/KeyboardArrowLeft";
import NextIcon from "@mui/icons-material/KeyboardArrowRight";
import PlayIcon from "@mui/icons-material/PlayArrow";
import PauseIcon from "@mui/icons-material/Pause";
import SettingsIcon from "@mui/icons-material/Settings";
import HelpIcon from "@mui/icons-material/Help";
import ExitIcon from "@mui/icons-material/ExitToApp";
import QueuePlayNextIcon from "@mui/icons-material/QueuePlayNext";
import HotkeysIcon from "@mui/icons-material/Keyboard";
import { colors as colors$2 } from "@mui/material";
import ButtonBase from "@mui/material/ButtonBase";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select$1 from "@mui/material/Select";
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : {};
function getDefaultExportFromCjs$1(x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
}
function getAugmentedNamespace(n) {
if (n.__esModule)
return n;
var f = n.default;
if (typeof f == "function") {
var a = function a2() {
if (this instanceof a2) {
return Reflect.construct(f, arguments, this.constructor);
}
return f.apply(this, arguments);
};
a.prototype = f.prototype;
} else
a = {};
Object.defineProperty(a, "__esModule", { value: true });
Object.keys(n).forEach(function(k) {
var d2 = Object.getOwnPropertyDescriptor(n, k);
Object.defineProperty(a, k, d2.get ? d2 : {
enumerable: true,
get: function() {
return n[k];
}
});
});
return a;
}
var seamlessImmutable_development = { exports: {} };
(function(module, exports) {
(function() {
function immutableInit(config2) {
var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element");
var REACT_ELEMENT_TYPE_FALLBACK = 60103;
var globalConfig = {
use_static: false
};
if (isObject2(config2)) {
if (config2.use_static !== void 0) {
globalConfig.use_static = Boolean(config2.use_static);
}
}
function isObject2(data) {
return typeof data === "object" && !Array.isArray(data) && data !== null;
}
function instantiateEmptyObject(obj) {
var prototype = Object.getPrototypeOf(obj);
if (!prototype) {
return {};
} else {
return Object.create(prototype);
}
}
function addPropertyTo(target, methodName, value) {
Object.defineProperty(target, methodName, {
enumerable: false,
configurable: false,
writable: false,
value
});
}
function banProperty(target, methodName) {
addPropertyTo(target, methodName, function() {
throw new ImmutableError("The " + methodName + " method cannot be invoked on an Immutable data structure.");
});
}
var immutabilityTag = "__immutable_invariants_hold";
function addImmutabilityTag(target) {
addPropertyTo(target, immutabilityTag, true);
}
function isImmutable(target) {
if (typeof target === "object") {
return target === null || Boolean(
Object.getOwnPropertyDescriptor(target, immutabilityTag)
);
} else {
return true;
}
}
function isEqual2(a, b) {
return a === b || a !== a && b !== b;
}
function isMergableObject(target) {
return target !== null && typeof target === "object" && !Array.isArray(target) && !(target instanceof Date);
}
var mutatingObjectMethods = [
"setPrototypeOf"
];
var nonMutatingObjectMethods = [
"keys"
];
var mutatingArrayMethods = mutatingObjectMethods.concat([
"push",
"pop",
"sort",
"splice",
"shift",
"unshift",
"reverse"
]);
var nonMutatingArrayMethods = nonMutatingObjectMethods.concat([
"map",
"filter",
"slice",
"concat",
"reduce",
"reduceRight"
]);
var mutatingDateMethods = mutatingObjectMethods.concat([
"setDate",
"setFullYear",
"setHours",
"setMilliseconds",
"setMinutes",
"setMonth",
"setSeconds",
"setTime",
"setUTCDate",
"setUTCFullYear",
"setUTCHours",
"setUTCMilliseconds",
"setUTCMinutes",
"setUTCMonth",
"setUTCSeconds",
"setYear"
]);
function ImmutableError(message) {
this.name = "MyError";
this.message = message;
this.stack = new Error().stack;
}
ImmutableError.prototype = new Error();
ImmutableError.prototype.constructor = Error;
function makeImmutable(obj, bannedMethods) {
addImmutabilityTag(obj);
{
for (var index2 in bannedMethods) {
if (bannedMethods.hasOwnProperty(index2)) {
banProperty(obj, bannedMethods[index2]);
}
}
Object.freeze(obj);
}
return obj;
}
function makeMethodReturnImmutable(obj, methodName) {
var currentMethod = obj[methodName];
addPropertyTo(obj, methodName, function() {
return Immutable22(currentMethod.apply(obj, arguments));
});
}
function arraySet(idx, value, config22) {
var deep = config22 && config22.deep;
if (idx in this) {
if (deep && this[idx] !== value && isMergableObject(value) && isMergableObject(this[idx])) {
value = Immutable22.merge(this[idx], value, { deep: true, mode: "replace" });
}
if (isEqual2(this[idx], value)) {
return this;
}
}
var mutable = asMutableArray.call(this);
mutable[idx] = Immutable22(value);
return makeImmutableArray(mutable);
}
var immutableEmptyArray = Immutable22([]);
function arraySetIn(pth, value, config22) {
var head = pth[0];
if (pth.length === 1) {
return arraySet.call(this, head, value, config22);
} else {
var tail = pth.slice(1);
var thisHead = this[head];
var newValue;
if (typeof thisHead === "object" && thisHead !== null) {
newValue = Immutable22.setIn(thisHead, tail, value);
} else {
var nextHead = tail[0];
if (nextHead !== "" && isFinite(nextHead)) {
newValue = arraySetIn.call(immutableEmptyArray, tail, value);
} else {
newValue = objectSetIn.call(immutableEmptyObject, tail, value);
}
}
if (head in this && thisHead === newValue) {
return this;
}
var mutable = asMutableArray.call(this);
mutable[head] = newValue;
return makeImmutableArray(mutable);
}
}
function makeImmutableArray(array) {
for (var index2 in nonMutatingArrayMethods) {
if (nonMutatingArrayMethods.hasOwnProperty(index2)) {
var methodName = nonMutatingArrayMethods[index2];
makeMethodReturnImmutable(array, methodName);
}
}
if (!globalConfig.use_static) {
addPropertyTo(array, "flatMap", flatMap);
addPropertyTo(array, "asObject", asObject);
addPropertyTo(array, "asMutable", asMutableArray);
addPropertyTo(array, "set", arraySet);
addPropertyTo(array, "setIn", arraySetIn);
addPropertyTo(array, "update", update);
addPropertyTo(array, "updateIn", updateIn);
addPropertyTo(array, "getIn", getIn);
}
for (var i = 0, length = array.length; i < length; i++) {
array[i] = Immutable22(array[i]);
}
return makeImmutable(array, mutatingArrayMethods);
}
function makeImmutableDate(date) {
if (!globalConfig.use_static) {
addPropertyTo(date, "asMutable", asMutableDate);
}
return makeImmutable(date, mutatingDateMethods);
}
function asMutableDate() {
return new Date(this.getTime());
}
function flatMap(iterator) {
if (arguments.length === 0) {
return this;
}
var result = [], length = this.length, index2;
for (index2 = 0; index2 < length; index2++) {
var iteratorResult = iterator(this[index2], index2, this);
if (Array.isArray(iteratorResult)) {
result.push.apply(result, iteratorResult);
} else {
result.push(iteratorResult);
}
}
return makeImmutableArray(result);
}
function without2(remove) {
if (typeof remove === "undefined" && arguments.length === 0) {
return this;
}
if (typeof remove !== "function") {
var keysToRemoveArray = Array.isArray(remove) ? remove.slice() : Array.prototype.slice.call(arguments);
keysToRemoveArray.forEach(function(el, idx, arr) {
if (typeof el === "number") {
arr[idx] = el.toString();
}
});
remove = function(val, key22) {
return keysToRemoveArray.indexOf(key22) !== -1;
};
}
var result = instantiateEmptyObject(this);
for (var key2 in this) {
if (this.hasOwnProperty(key2) && remove(this[key2], key2) === false) {
result[key2] = this[key2];
}
}
return makeImmutableObject(result);
}
function asMutableArray(opts) {
var result = [], i, length;
if (opts && opts.deep) {
for (i = 0, length = this.length; i < length; i++) {
result.push(asDeepMutable(this[i]));
}
} else {
for (i = 0, length = this.length; i < length; i++) {
result.push(this[i]);
}
}
return result;
}
function asObject(iterator) {
if (typeof iterator !== "function") {
iterator = function(value2) {
return value2;
};
}
var result = {}, length = this.length, index2;
for (index2 = 0; index2 < length; index2++) {
var pair = iterator(this[index2], index2, this), key2 = pair[0], value = pair[1];
result[key2] = value;
}
return makeImmutableObject(result);
}
function asDeepMutable(obj) {
if (!obj || typeof obj !== "object" || !Object.getOwnPropertyDescriptor(obj, immutabilityTag) || obj instanceof Date) {
return obj;
}
return Immutable22.asMutable(obj, { deep: true });
}
function quickCopy(src, dest) {
for (var key2 in src) {
if (Object.getOwnPropertyDescriptor(src, key2)) {
dest[key2] = src[key2];
}
}
return dest;
}
function merge2(other, config22) {
if (arguments.length === 0) {
return this;
}
if (other === null || typeof other !== "object") {
throw new TypeError("Immutable#merge can only be invoked with objects or arrays, not " + JSON.stringify(other));
}
var receivedArray = Array.isArray(other), deep = config22 && config22.deep, mode = config22 && config22.mode || "merge", merger = config22 && config22.merger, result;
function addToResult(currentObj, otherObj, key22) {
var immutableValue = Immutable22(otherObj[key22]);
var mergerResult = merger && merger(currentObj[key22], immutableValue, config22);
var currentValue = currentObj[key22];
if (result !== void 0 || mergerResult !== void 0 || !currentObj.hasOwnProperty(key22) || !isEqual2(immutableValue, currentValue)) {
var newValue;
if (mergerResult !== void 0) {
newValue = mergerResult;
} else if (deep && isMergableObject(currentValue) && isMergableObject(immutableValue)) {
newValue = Immutable22.merge(currentValue, immutableValue, config22);
} else {
newValue = immutableValue;
}
if (!isEqual2(currentValue, newValue) || !currentObj.hasOwnProperty(key22)) {
if (result === void 0) {
result = quickCopy(currentObj, instantiateEmptyObject(currentObj));
}
result[key22] = newValue;
}
}
}
function clearDroppedKeys(currentObj, otherObj) {
for (var key22 in currentObj) {
if (!otherObj.hasOwnProperty(key22)) {
if (result === void 0) {
result = quickCopy(currentObj, instantiateEmptyObject(currentObj));
}
delete result[key22];
}
}
}
var key2;
if (!receivedArray) {
for (key2 in other) {
if (Object.getOwnPropertyDescriptor(other, key2)) {
addToResult(this, other, key2);
}
}
if (mode === "replace") {
clearDroppedKeys(this, other);
}
} else {
for (var index2 = 0, length = other.length; index2 < length; index2++) {
var otherFromArray = other[index2];
for (key2 in otherFromArray) {
if (otherFromArray.hasOwnProperty(key2)) {
addToResult(result !== void 0 ? result : this, otherFromArray, key2);
}
}
}
}
if (result === void 0) {
return this;
} else {
return makeImmutableObject(result);
}
}
function objectReplace(value, config22) {
var deep = config22 && config22.deep;
if (arguments.length === 0) {
return this;
}
if (value === null || typeof value !== "object") {
throw new TypeError("Immutable#replace can only be invoked with objects or arrays, not " + JSON.stringify(value));
}
return Immutable22.merge(this, value, { deep, mode: "replace" });
}
var immutableEmptyObject = Immutable22({});
function objectSetIn(path2, value, config22) {
if (!Array.isArray(path2) || path2.length === 0) {
throw new TypeError('The first argument to Immutable#setIn must be an array containing at least one "key" string.');
}
var head = path2[0];
if (path2.length === 1) {
return objectSet.call(this, head, value, config22);
}
var tail = path2.slice(1);
var newValue;
var thisHead = this[head];
if (this.hasOwnProperty(head) && typeof thisHead === "object" && thisHead !== null) {
newValue = Immutable22.setIn(thisHead, tail, value);
} else {
newValue = objectSetIn.call(immutableEmptyObject, tail, value);
}
if (this.hasOwnProperty(head) && thisHead === newValue) {
return this;
}
var mutable = quickCopy(this, instantiateEmptyObject(this));
mutable[head] = newValue;
return makeImmutableObject(mutable);
}
function objectSet(property, value, config22) {
var deep = config22 && config22.deep;
if (this.hasOwnProperty(property)) {
if (deep && this[property] !== value && isMergableObject(value) && isMergableObject(this[property])) {
value = Immutable22.merge(this[property], value, { deep: true, mode: "replace" });
}
if (isEqual2(this[property], value)) {
return this;
}
}
var mutable = quickCopy(this, instantiateEmptyObject(this));
mutable[property] = Immutable22(value);
return makeImmutableObject(mutable);
}
function update(property, updater) {
var restArgs = Array.prototype.slice.call(arguments, 2);
var initialVal = this[property];
return Immutable22.set(this, property, updater.apply(initialVal, [initialVal].concat(restArgs)));
}
function getInPath(obj, path2) {
for (var i = 0, l = path2.length; obj != null && i < l; i++) {
obj = obj[path2[i]];
}
return i && i == l ? obj : void 0;
}
function updateIn(path2, updater) {
var restArgs = Array.prototype.slice.call(arguments, 2);
var initialVal = getInPath(this, path2);
return Immutable22.setIn(this, path2, updater.apply(initialVal, [initialVal].concat(restArgs)));
}
function getIn(path2, defaultValue) {
var value = getInPath(this, path2);
return value === void 0 ? defaultValue : value;
}
function asMutableObject(opts) {
var result = instantiateEmptyObject(this), key2;
if (opts && opts.deep) {
for (key2 in this) {
if (this.hasOwnProperty(key2)) {
result[key2] = asDeepMutable(this[key2]);
}
}
} else {
for (key2 in this) {
if (this.hasOwnProperty(key2)) {
result[key2] = this[key2];
}
}
}
return result;
}
function instantiatePlainObject() {
return {};
}
function makeImmutableObject(obj) {
if (!globalConfig.use_static) {
addPropertyTo(obj, "merge", merge2);
addPropertyTo(obj, "replace", objectReplace);
addPropertyTo(obj, "without", without2);
addPropertyTo(obj, "asMutable", asMutableObject);
addPropertyTo(obj, "set", objectSet);
addPropertyTo(obj, "setIn", objectSetIn);
addPropertyTo(obj, "update", update);
addPropertyTo(obj, "updateIn", updateIn);
addPropertyTo(obj, "getIn", getIn);
}
return makeImmutable(obj, mutatingObjectMethods);
}
function isReactElement(obj) {
return typeof obj === "object" && obj !== null && (obj.$$typeof === REACT_ELEMENT_TYPE_FALLBACK || obj.$$typeof === REACT_ELEMENT_TYPE);
}
function isFileObject(obj) {
return typeof File !== "undefined" && obj instanceof File;
}
function isBlobObject(obj) {
return typeof Blob !== "undefined" && obj instanceof Blob;
}
function isPromise(obj) {
return typeof obj === "object" && typeof obj.then === "function";
}
function isError(obj) {
return obj instanceof Error;
}
function Immutable22(obj, options2, stackRemaining) {
if (isImmutable(obj) || isReactElement(obj) || isFileObject(obj) || isBlobObject(obj) || isError(obj)) {
return obj;
} else if (isPromise(obj)) {
return obj.then(Immutable22);
} else if (Array.isArray(obj)) {
return makeImmutableArray(obj.slice());
} else if (obj instanceof Date) {
return makeImmutableDate(new Date(obj.getTime()));
} else {
var prototype = options2 && options2.prototype;
var instantiateEmptyObject2 = !prototype || prototype === Object.prototype ? instantiatePlainObject : function() {
return Object.create(prototype);
};
var clone = instantiateEmptyObject2();
{
if (stackRemaining == null) {
stackRemaining = 64;
}
if (stackRemaining <= 0) {
throw new ImmutableError("Attempt to construct Immutable from a deeply nested object was detected. Have you tried to wrap an object with circular references (e.g. React element)? See https://github.com/rtfeldman/seamless-immutable/wiki/Deeply-nested-object-was-detected for details.");
}
stackRemaining -= 1;
}
for (var key2 in obj) {
if (Object.getOwnPropertyDescriptor(obj, key2)) {
clone[key2] = Immutable22(obj[key2], void 0, stackRemaining);
}
}
return makeImmutableObject(clone);
}
}
function toStatic(fn) {
function staticWrapper() {
var args = [].slice.call(arguments);
var self2 = args.shift();
return fn.apply(self2, args);
}
return staticWrapper;
}
function toStaticObjectOrArray(fnObject, fnArray) {
function staticWrapper() {
var args = [].slice.call(arguments);
var self2 = args.shift();
if (Array.isArray(self2)) {
return fnArray.apply(self2, args);
} else {
return fnObject.apply(self2, args);
}
}
return staticWrapper;
}
function toStaticObjectOrDateOrArray(fnObject, fnArray, fnDate) {
function staticWrapper() {
var args = [].slice.call(arguments);
var self2 = args.shift();
if (Array.isArray(self2)) {
return fnArray.apply(self2, args);
} else if (self2 instanceof Date) {
return fnDate.apply(self2, args);
} else {
return fnObject.apply(self2, args);
}
}
return staticWrapper;
}
Immutable22.from = Immutable22;
Immutable22.isImmutable = isImmutable;
Immutable22.ImmutableError = ImmutableError;
Immutable22.merge = toStatic(merge2);
Immutable22.replace = toStatic(objectReplace);
Immutable22.without = toStatic(without2);
Immutable22.asMutable = toStaticObjectOrDateOrArray(asMutableObject, asMutableArray, asMutableDate);
Immutable22.set = toStaticObjectOrArray(objectSet, arraySet);
Immutable22.setIn = toStaticObjectOrArray(objectSetIn, arraySetIn);
Immutable22.update = toStatic(update);
Immutable22.updateIn = toStatic(updateIn);
Immutable22.getIn = toStatic(getIn);
Immutable22.flatMap = toStatic(flatMap);
Immutable22.asObject = toStatic(asObject);
if (!globalConfig.use_static) {
Immutable22.static = immutableInit({
use_static: true
});
}
Object.freeze(Immutable22);
return Immutable22;
}
var Immutable2 = immutableInit();
{
module.exports = Immutable2;
}
})();
})(seamlessImmutable_development);
var seamlessImmutable_developmentExports = seamlessImmutable_development.exports;
const Immutable = /* @__PURE__ */ getDefaultExportFromCjs$1(seamlessImmutable_developmentExports);
var key = {
fullscreenEnabled: 0,
fullscreenElement: 1,
requestFullscreen: 2,
exitFullscreen: 3,
fullscreenchange: 4,
fullscreenerror: 5,
fullscreen: 6
};
var webkit = [
"webkitFullscreenEnabled",
"webkitFullscreenElement",
"webkitRequestFullscreen",
"webkitExitFullscreen",
"webkitfullscreenchange",
"webkitfullscreenerror",
"-webkit-full-screen"
];
var moz = [
"mozFullScreenEnabled",
"mozFullScreenElement",
"mozRequestFullScreen",
"mozCancelFullScreen",
"mozfullscreenchange",
"mozfullscreenerror",
"-moz-full-screen"
];
var ms = [
"msFullscreenEnabled",
"msFullscreenElement",
"msRequestFullscreen",
"msExitFullscreen",
"MSFullscreenChange",
"MSFullscreenError",
"-ms-fullscreen"
];
var document$3 = typeof window !== "undefined" && typeof window.document !== "undefined" ? window.document : {};
var vendor = "fullscreenEnabled" in document$3 && Object.keys(key) || webkit[0] in document$3 && webkit || moz[0] in document$3 && moz || ms[0] in document$3 && ms || [];
var fscreen = {
requestFullscreen: function(element2) {
return element2[vendor[key.requestFullscreen]]();
},
requestFullscreenFunction: function(element2) {
return element2[vendor[key.requestFullscreen]];
},
get exitFullscreen() {
return document$3[vendor[key.exitFullscreen]].bind(document$3);
},
get fullscreenPseudoClass() {
return ":" + vendor[key.fullscreen];
},
addEventListener: function(type, handler, options2) {
return document$3.addEventListener(vendor[key[type]], handler, options2);
},
removeEventListener: function(type, handler, options2) {
return document$3.removeEventListener(vendor[key[type]], handler, options2);
},
get fullscreenEnabled() {
return Boolean(document$3[vendor[key.fullscreenEnabled]]);
},
set fullscreenEnabled(val) {
},
get fullscreenElement() {
return document$3[vendor[key.fullscreenElement]];
},
set fullscreenElement(val) {
},
get onfullscreenchange() {
return document$3[("on" + vendor[key.fullscreenchange]).toLowerCase()];
},
set onfullscreenchange(handler) {
return document$3[("on" + vendor[key.fullscreenchange]).toLowerCase()] = handler;
},
get onfullscreenerror() {
return document$3[("on" + vendor[key.fullscreenerror]).toLowerCase()];
},
set onfullscreenerror(handler) {
return document$3[("on" + vendor[key.fullscreenerror]).toLowerCase()] = handler;
}
};
function useFullScreenHandle() {
var _useState = useState(false), active = _useState[0], setActive = _useState[1];
var node2 = useRef(null);
useEffect(function() {
var handleChange = function handleChange2() {
setActive(fscreen.fullscreenElement === node2.current);
};
fscreen.addEventListener("fullscreenchange", handleChange);
return function() {
return fscreen.removeEventListener("fullscreenchange", handleChange);
};
}, []);
var enter = useCallback(function() {
if (fscreen.fullscreenElement) {
return fscreen.exitFullscreen().then(function() {
return fscreen.requestFullscreen(node2.current);
});
} else if (node2.current) {
return fscreen.requestFullscreen(node2.current);
}
}, []);
var exit2 = useCallback(function() {
if (fscreen.fullscreenElement === node2.current) {
return fscreen.exitFullscreen();
}
return Promise.resolve();
}, []);
return useMemo(function() {
return {
active,
enter,
exit: exit2,
node: node2
};
}, [active, enter, exit2]);
}
var FullScreen = function FullScreen2(_ref3) {
var handle = _ref3.handle, onChange3 = _ref3.onChange, children = _ref3.children, className = _ref3.className;
var classNames2 = [];
if (className) {
classNames2.push(className);
}
classNames2.push("fullscreen");
if (handle.active) {
classNames2.push("fullscreen-enabled");
}
useEffect(function() {
if (onChange3) {
onChange3(handle.active, handle);
}
}, [handle.active]);
return React__default.createElement("div", {
className: classNames2.join(" "),
ref: handle.node,
style: handle.active ? {
height: "100%",
width: "100%"
} : void 0
}, children);
};
const useEventCallback = (fn) => {
let ref = useRef(fn);
useLayoutEffect(() => {
ref.current = fn;
});
return useMemo(() => (...args) => {
const { current } = ref;
return current(...args);
}, []);
};
const IconDictionaryContext = createContext({});
const emptyObj = {};
const useIconDictionary = () => useContext(IconDictionaryContext) || emptyObj;
var classnames$2 = { exports: {} };
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
(function(module) {
(function() {
var hasOwn2 = {}.hasOwnProperty;
function classNames2() {
var classes = "";
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (arg) {
classes = appendClass(classes, parseValue(arg));
}
}
return classes;
}
function parseValue(arg) {
if (typeof arg === "string" || typeof arg === "number") {
return arg;
}
if (typeof arg !== "object") {
return "";
}
if (Array.isArray(arg)) {
return classNames2.apply(null, arg);
}
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
return arg.toString();
}
var classes = "";
for (var key2 in arg) {
if (hasOwn2.call(arg, key2) && arg[key2]) {
classes = appendClass(classes, key2);
}
}
return classes;
}
function appendClass(value, newClass) {
if (!newClass) {
return value;
}
if (value) {
return value + " " + newClass;
}
return value + newClass;
}
if (module.exports) {
classNames2.default = classNames2;
module.exports = classNames2;
} else {
window.classNames = classNames2;
}
})();
})(classnames$2);
var classnamesExports = classnames$2.exports;
const classnames$1 = /* @__PURE__ */ getDefaultExportFromCjs$1(classnamesExports);
const theme$l = createTheme();
const ContainerDiv = styled("div")(() => ({
borderBottom: `2px solid ${grey[400]}`,
"&:firstChild": { borderTop: `1px solid ${grey[400]}` }
}));
const HeaderDiv = styled("div")(() => ({
display: "flex",
flexDirection: "row",
alignItems: "center",
padding: 4,
paddingLeft: 16,
paddingRight: 12,
"& .iconContainer": {
color: grey[600],
display: "flex",
alignItems: "center",
justifyContent: "center",
"& .MuiSvgIcon-root": {
width: 16,
height: 16
}
}
}));
const ContentDiv = styled("div")(() => ({
maxHeight: 200,
overflowY: "auto",
"&.noScroll": {
overflowY: "visible",
overflow: "visible"
}
}));
const TitleTypography = styled(Typography)(() => ({
fontSize: 11,
flexGrow: 1,
fontWeight: 800,
paddingLeft: 8,
color: grey[800],
"& span": {
color: grey[600],
fontSize: 11
}
}));
const getExpandedFromLocalStorage = (title) => {
try {
return JSON.parse(
window.localStorage[`__REACT_WORKSPACE_SIDEBAR_EXPANDED_${title}`]
);
} catch (e) {
return false;
}
};
const setExpandedInLocalStorage = (title, expanded) => {
window.localStorage[`__REACT_WORKSPACE_SIDEBAR_EXPANDED_${title}`] = JSON.stringify(expanded);
};
const SidebarBox = ({
icon: icon3,
title,
subTitle,
children,
noScroll = false,
expandedByDefault
}) => {
const content2 = /* @__PURE__ */ jsx(ContentDiv, { className: classnames$1(noScroll && "noScroll"), children });
const [expanded, changeExpandedState] = useState(
expandedByDefault === void 0 ? getExpandedFromLocalStorage(title) : expandedByDefault
);
const changeExpanded = useCallback(
(expanded2) => {
changeExpandedState(expanded2);
setExpandedInLocalStorage(title, expanded2);
},
[changeExpandedState, title]
);
const toggleExpanded = useEventCallback(() => changeExpanded(!expanded));
const customIconMapping = useIconDictionary();
const TitleIcon = customIconMapping[title.toLowerCase()];
return /* @__PURE__ */ jsx(ThemeProvider, { theme: theme$l, children: /* @__PURE__ */ jsxs(ContainerDiv, { children: [
/* @__PURE__ */ jsxs(HeaderDiv, { children: [
/* @__PURE__ */ jsx("div", { className: "iconContainer", children: icon3 || /* @__PURE__ */ jsx(TitleIcon, {}) }),
/* @__PURE__ */ jsxs(TitleTypography, { children: [
title,
" ",
/* @__PURE__ */ jsx("span", { children: subTitle })
] }),
/* @__PURE__ */ jsx(
IconButton,
{
onClick: toggleExpanded,
sx: {
padding: 0,
width: 30,
height: 30,
"& .icon": {
width: 20,
height: 20,
transition: "500ms transform",
"&.expanded": {
transform: "rotate(180deg)"
}
}
},
children: /* @__PURE__ */ jsx(
ExpandIcon,
{
className: classnames$1("icon", expanded && "expanded")
}
)
}
)
] }),
noScroll ? expanded ? content2 : null : /* @__PURE__ */ jsx(Collapse, { in: expanded, children: /* @__PURE__ */ jsx(
"div",
{
className: "panel",
style: { display: "block", overflow: "hidden", height: 200 },
children: content2
}
) })
] }) });
};
memo(
SidebarBox,
(prev, next) => prev.title === next.title && prev.children === next.children
);
const theme$k = createTheme();
const SidebarBoxContainer = ({
icon: icon3,
title,
children
}) => {
return /* @__PURE__ */ jsx(ThemeProvider, { theme: theme$k, children: /* @__PURE__ */ jsx(SidebarBox, { icon: icon3, title, children }) });
};
const SidebarBoxContainer$1 = memo(
SidebarBoxContainer,
(prev, next) => prev.title === next.title && prev.children === next.children
);
const colors$1 = [
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]
];
const transparency = 2281701376;
function reverseParseColor(rrggbb) {
rrggbb = rrggbb.replace("#", "");
const bbggrr = rrggbb.substr(4, 2) + rrggbb.substr(2, 2) + rrggbb.substr(0, 2);
return parseInt(bbggrr, 16);
}
colors$1.map(
(c2) => (reverseParseColor(c2) | transparency) >>> 0
);
const theme$j = createTheme();
const LabelContainer = styled("div")(() => ({
display: "flex",
paddingTop: 4,
paddingBottom: 4,
paddingLeft: 16,
paddingRight: 16,
alignItems: "center",
cursor: "pointer",
opacity: 0.7,
backgroundColor: "#fff",
"&:hover": {
opacity: 1
},
"&.selected": {
opacity: 1,
fontWeight: "bold"
}
}));
const Circle = styled("div")(() => ({
width: 12,
height: 12,
borderRadius: 12,
marginRight: 8
}));
const Label = styled("div")(() => ({
fontSize: 11
}));
const DashSep = styled("div")(() => ({
flexGrow: 1,
borderBottom: `2px dotted ${muiColors.grey[300]}`,
marginLeft: 8,
marginRight: 8
}));
const Number$1 = styled("div")(() => ({
fontSize: 11,
textAlign: "center",
minWidth: 14,
paddingTop: 2,
paddingBottom: 2,
fontWeight: "bold",
color: muiColors.grey[700]
}));
const getRegionValue = (item) => {
return typeof item === "string" ? item : item.id;
};
const ClassSelectionMenu = ({
selectedCls,
regionClsList,
onSelectCls
}) => {
useEffect(() => {
const keyMapping = {};
for (let i = 0; i < 9 && i < regionClsList.length; i++) {
keyMapping[i + 1] = () => {
const item = regionClsList[i];
onSelectCls(getRegionValue(item));
};
}
const onKeyDown = (e) => {
if (keyMapping[e.key]) {
keyMapping[e.key]();
e.preventDefault();
e.stopPropagation();
}
};
window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown);
}, [regionClsList, selectedCls]);
return /* @__PURE__ */ jsx(ThemeProvider, { theme: theme$j, children: /* @__PURE__ */ jsxs(
SidebarBoxContainer$1,
{
title: "Classifications",
icon: /* @__PURE__ */ jsx(BallotIcon, { style: { color: muiColors.grey[700] } }),
expandedByDefault: true,
children: [
regionClsList.map((item, index2) => /* @__PURE__ */ jsxs(
LabelContainer,
{
className: classnames$1({
selected: getRegionValue(item) === selectedCls
}),
onClick: () => onSelectCls(getRegionValue(item)),
children: [
/* @__PURE__ */ jsx(
Circle,
{
style: { backgroundColor: colors$1[index2 % colors$1.length] }
}
),
/* @__PURE__ */ jsx(
Label,
{
className: classnames$1({
selected: getRegionValue(item) === selectedCls
}),
children: capitalize$4(typeof item === "string" ? item : item.label)
}
),
/* @__PURE__ */ jsx(DashSep, {}),
/* @__PURE__ */ jsx(
Number$1,
{
className: classnames$1({
selected: getRegionValue(item) === selectedCls
}),
children: index2 < 9 ? `Key [${index2 + 1}]` : ""
}
)
]
},
typeof item === "object" ? item.id : item
)),
/* @__PURE__ */ jsx(Box, { pb: 2 })
]
}
) });
};
const ClassSelectionMenu$1 = ClassSelectionMenu;
const DebugSidebarBox = ({
state,
lastAction
}) => {
const image2 = state.annotationType === "image" && state.selectedImage ? (state.images || [])[state.selectedImage] : null;
const region = image2 ? (image2.regions || []).filter((r) => r.highlighted) : null;
return /* @__PURE__ */ jsx(SidebarBoxContainer$1, { title: "Debug", icon: /* @__PURE__ */ jsx("span", {}), expandedByDefault: true, children: /* @__PURE__ */ jsxs("div", { style: { padding: 4 }, children: [
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("b", { children: "region" }),
":"
] }),
/* @__PURE__ */ jsx("pre", { children: JSON.stringify(region, null, " ") }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("b", { children: "lastAction" }),
":"
] }),
/* @__PURE__ */ jsx("pre", { children: JSON.stringify(lastAction, null, " ") }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("b", { children: "mode" }),
":"
] }),
/* @__PURE__ */ jsx("pre", { children: JSON.stringify(state.mode, null, " ") }),
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("b", { children: "frame:" }) }),
/* @__PURE__ */ jsx("pre", { children: "selectedImageFrameTime" in state ? JSON.stringify(state.selectedImageFrameTime, null, " ") : null })
] }) });
};
const DebugBox = DebugSidebarBox;
const objectFromEntries = !Object.fromEntries ? (entries) => {
if (!entries || !entries[Symbol.iterator]) {
throw new Error("Object.fromEntries() requires a single iterable argument");
}
const o = {};
Object.keys(entries).forEach((key2) => {
const [k, v] = entries[key2];
o[k] = v;
});
return o;
} : Object.fromEntries;
function objectKeys(o) {
return Object.keys(o);
}
function getDefaultExportFromCjs(x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
}
var browser = { exports: {} };
var process = browser.exports = {};
var cachedSetTimeout;
var cachedClearTimeout;
function defaultSetTimout() {
throw new Error("setTimeout has not been defined");
}
function defaultClearTimeout() {
throw new Error("clearTimeout has not been defined");
}
(function() {
try {
if (typeof setTimeout === "function") {
cachedSetTimeout = setTimeout;
} else {
cachedSetTimeout = defaultSetTimout;
}
} catch (e) {
cachedSetTimeout = defaultSetTimout;
}
try {
if (typeof clearTimeout === "function") {
cachedClearTimeout = clearTimeout;
} else {
cachedClearTimeout = defaultClearTimeout;
}
} catch (e) {
cachedClearTimeout = defaultClearTimeout;
}
})();
function runTimeout(fun) {
if (cachedSetTimeout === setTimeout) {
return setTimeout(fun, 0);
}
if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
cachedSetTimeout = setTimeout;
return setTimeout(fun, 0);
}
try {
return cachedSetTimeout(fun, 0);
} catch (e) {
try {
return cachedSetTimeout.call(null, fun, 0);
} catch (e2) {
return cachedSetTimeout.call(this, fun, 0);
}
}
}
function runClearTimeout(marker) {
if (cachedClearTimeout === clearTimeout) {
return clearTimeout(marker);
}
if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
cachedClearTimeout = clearTimeout;
return clearTimeout(marker);
}
try {
return cachedClearTimeout(marker);
} catch (e) {
try {
return cachedClearTimeout.call(null, marker);
} catch (e2) {
return cachedClearTimeout.call(this, marker);
}
}
}
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
if (!draining || !currentQueue) {
return;
}
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = runTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while (len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
runClearTimeout(timeout);
}
process.nextTick = function(fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
runTimeout(drainQueue);
}
};
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function() {
this.fun.apply(null, this.array);
};
process.title = "browser";
process.browser = true;
process.env = {};
process.argv = [];
process.version = "";
process.versions = {};
function noop$6() {
}
process.on = noop$6;
process.addListener = noop$6;
process.once = noop$6;
process.off = noop$6;
process.removeListener = noop$6;
process.removeAllListeners = noop$6;
process.emit = noop$6;
process.prependListener = noop$6;
process.prependOnceListener = noop$6;
process.listeners = function(name2) {
return [];
};
process.binding = function(name2) {
throw new Error("process.binding is not supported");
};
process.cwd = function() {
return "/";
};
process.chdir = function(dir) {
throw new Error("process.chdir is not supported");
};
process.umask = function() {
return 0;
};
var browserExports = browser.exports;
const process$1 = /* @__PURE__ */ getDefaultExportFromCjs(browserExports);
function assert(condition, msg) {
if (!condition) {
throw new Error(msg);
}
}
function typeGuard(_value, isMatched) {
return isMatched;
}
const classnames = (args) => {
const len = args.length;
let i = 0;
let cls = "";
for (; i < len; i++) {
const arg = args[i];
if (arg == null)
continue;
let toAdd;
switch (typeof arg) {
case "boolean":
break;
case "object": {
if (Array.isArray(arg)) {
toAdd = classnames(arg);
} else {
assert(!typeGuard(arg, false));
if (process$1.env.NODE_ENV !== "production" && arg.styles !== void 0 && arg.name !== void 0) {
console.error("You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.");
}
toAdd = "";
for (const k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += " ");
toAdd += k;
}
}
}
break;
}
default: {
toAdd = arg;
}
}
if (toAdd) {
cls && (cls += " ");
cls += toAdd;
}
}
return cls;
};
function murmur2(str) {
var h = 0;
var k, i = 0, len = str.length;
for (; len >= 4; ++i, len -= 4) {
k = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
k = /* Math.imul(k, m): */
(k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
k ^= /* k >>> r: */
k >>> 24;
h = /* Math.imul(k, m): */
(k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ /* Math.imul(h, m): */
(h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
}
switch (len) {
case 3:
h ^= (str.charCodeAt(i + 2) & 255) << 16;
case 2:
h ^= (str.charCodeAt(i + 1) & 255) << 8;
case 1:
h ^= str.charCodeAt(i) & 255;
h = /* Math.imul(h, m): */
(h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
}
h ^= h >>> 13;
h = /* Math.imul(h, m): */
(h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
return ((h ^ h >>> 15) >>> 0).toString(36);
}
var unitlessKeys = {
animationIterationCount: 1,
aspectRatio: 1,
borderImageOutset: 1,
borderImageSlice: 1,
borderImageWidth: 1,
boxFlex: 1,
boxFlexGroup: 1,
boxOrdinalGroup: 1,
columnCount: 1,
columns: 1,
flex: 1,
flexGrow: 1,
flexPositive: 1,
flexShrink: 1,
flexNegative: 1,
flexOrder: 1,
gridRow: 1,
gridRowEnd: 1,
gridRowSpan: 1,
gridRowStart: 1,
gridColumn: 1,
gridColumnEnd: 1,
gridColumnSpan: 1,
gridColumnStart: 1,
msGridRow: 1,
msGridRowSpan: 1,
msGridColumn: 1,
msGridColumnSpan: 1,
fontWeight: 1,
lineHeight: 1,
opacity: 1,
order: 1,
orphans: 1,
tabSize: 1,
widows: 1,
zIndex: 1,
zoom: 1,
WebkitLineClamp: 1,
// SVG-related properties
fillOpacity: 1,
floodOpacity: 1,
stopOpacity: 1,
strokeDasharray: 1,
strokeDashoffset: 1,
strokeMiterlimit: 1,
strokeOpacity: 1,
strokeWidth: 1
};
function memoize(fn) {
var cache = /* @__PURE__ */ Object.create(null);
return function(arg) {
if (cache[arg] === void 0)
cache[arg] = fn(arg);
return cache[arg];
};
}
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
You can read more about this here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`;
var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
var hyphenateRegex = /[A-Z]|^ms/g;
var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
var isCustomProperty = function isCustomProperty2(property) {
return property.charCodeAt(1) === 45;
};
var isProcessableValue = function isProcessableValue2(value) {
return value != null && typeof value !== "boolean";
};
var processStyleName = /* @__PURE__ */ memoize(function(styleName) {
return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
});
var processStyleValue = function processStyleValue2(key2, value) {
switch (key2) {
case "animation":
case "animationName": {
if (typeof value === "string") {
return value.replace(animationRegex, function(match, p1, p2) {
cursor = {
name: p1,
styles: p2,
next: cursor
};
return p1;
});
}
}
}
if (unitlessKeys[key2] !== 1 && !isCustomProper