@searpent/react-image-annotate 2.0.5 → 2.0.8

package/MainLayout/index.js

@@ -0,0 +1,469 @@
+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 MetadataEditor from "../MetadataEditorSidebarBox";
+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 Editor from "../Editor";
+import regionsToBlocks from '../utils/regions-to-blocks';
+import PagesSelector from "../PageSelector"; // 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%"
+    }
+  };
+});
+var EditorWrapper = styled("div")(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    width: "45%",
+    padding: "1rem",
+    paddingLeft: "2rem"
+  };
+});
+export var MainLayout = function MainLayout(_ref4) {
+  var _state$images$state$s, _state$images$state$s2;
+
+  var state = _ref4.state,
+      dispatch = _ref4.dispatch,
+      _ref4$alwaysShowNextB = _ref4.alwaysShowNextButton,
+      alwaysShowNextButton = _ref4$alwaysShowNextB === void 0 ? false : _ref4$alwaysShowNextB,
+      _ref4$alwaysShowPrevB = _ref4.alwaysShowPrevButton,
+      alwaysShowPrevButton = _ref4$alwaysShowPrevB === void 0 ? false : _ref4$alwaysShowPrevB,
+      RegionEditLabel = _ref4.RegionEditLabel,
+      onRegionClassAdded = _ref4.onRegionClassAdded,
+      hideHeader = _ref4.hideHeader,
+      hideHeaderText = _ref4.hideHeaderText,
+      _ref4$hideNext = _ref4.hideNext,
+      hideNext = _ref4$hideNext === void 0 ? false : _ref4$hideNext,
+      _ref4$hidePrev = _ref4.hidePrev,
+      hidePrev = _ref4$hidePrev === void 0 ? false : _ref4$hidePrev,
+      _ref4$hideClone = _ref4.hideClone,
+      hideClone = _ref4$hideClone === void 0 ? false : _ref4$hideClone,
+      _ref4$hideSettings = _ref4.hideSettings,
+      hideSettings = _ref4$hideSettings === void 0 ? false : _ref4$hideSettings,
+      _ref4$hideFullScreen = _ref4.hideFullScreen,
+      hideFullScreen = _ref4$hideFullScreen === void 0 ? false : _ref4$hideFullScreen,
+      _ref4$hideSave = _ref4.hideSave,
+      hideSave = _ref4$hideSave === void 0 ? false : _ref4$hideSave,
+      _ref4$groups = _ref4.groups,
+      groups = _ref4$groups === void 0 ? [] : _ref4$groups,
+      _ref4$onGroupSelect = _ref4.onGroupSelect,
+      onGroupSelect = _ref4$onGroupSelect === void 0 ? function () {} : _ref4$onGroupSelect,
+      _ref4$hideHistory = _ref4.hideHistory,
+      hideHistory = _ref4$hideHistory === void 0 ? false : _ref4$hideHistory,
+      _ref4$hideNotEditingL = _ref4.hideNotEditingLabel,
+      hideNotEditingLabel = _ref4$hideNotEditingL === void 0 ? false : _ref4$hideNotEditingL,
+      _ref4$showEditor = _ref4.showEditor,
+      showEditor = _ref4$showEditor === void 0 ? false : _ref4$showEditor,
+      _ref4$showPageSelecto = _ref4.showPageSelector,
+      showPageSelector = _ref4$showPageSelecto === void 0 ? false : _ref4$showPageSelecto,
+      _ref4$onRecalc = _ref4.onRecalc,
+      onRecalc = _ref4$onRecalc === void 0 ? function () {} : _ref4$onRecalc,
+      _ref4$onSave = _ref4.onSave,
+      onSave = _ref4$onSave === void 0 ? function () {} : _ref4$onSave,
+      _ref4$recalcActive = _ref4.recalcActive,
+      recalcActive = _ref4$recalcActive === void 0 ? false : _ref4$recalcActive,
+      _ref4$saveActive = _ref4.saveActive,
+      saveActive = _ref4$saveActive === void 0 ? false : _ref4$saveActive,
+      _ref4$allowedGroups = _ref4.allowedGroups,
+      allowedGroups = _ref4$allowedGroups === void 0 ? {} : _ref4$allowedGroups,
+      onMetadataChange = _ref4.onMetadataChange;
+  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,
+    hideNotEditingLabel: hideNotEditingLabel,
+    allowedGroups: allowedGroups
+  }));
+  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; // Editor.js blocks
+
+  var selectedGroupId = ((_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.selectedGroupId) || null;
+  var editorBlocks = regionsToBlocks(((_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : _state$images$state$s2.regions) || []);
+  var blocks = editorBlocks.filter(function (i) {
+    var _i$data;
+
+    return (i === null || i === void 0 ? void 0 : (_i$data = i.data) === null || _i$data === void 0 ? void 0 : _i$data.groupId) === selectedGroupId;
+  });
+
+  var handleEditorChange = function handleEditorChange(_ref5) {
+    var imageIndex = _ref5.imageIndex,
+        data = _ref5.data;
+    var newRegions = data.blocks.map(function (i) {
+      return {
+        id: i.id,
+        cls: i.data.labelName,
+        text: i.data.text
+      };
+    });
+    dispatch({
+      type: "UPDATE_REGIONS",
+      regions: newRegions,
+      imageIndex: imageIndex
+    });
+  };
+
+  var pages = state.images.map(function (i, idx) {
+    var _i$metadata;
+
+    return {
+      id: idx,
+      src: i.src,
+      isActive: idx === state.selectedImage,
+      pageNumber: (i === null || i === void 0 ? void 0 : (_i$metadata = i.metadata) === null || _i$metadata === void 0 ? void 0 : _i$metadata.find(function (md) {
+        return md.key === "page";
+      }).value) || null
+    };
+  });
+
+  var handlePageClick = function handlePageClick(pageIndex) {
+    dispatch({
+      type: "SELECT_IMAGE",
+      imageIndex: pageIndex
+    });
+  };
+
+  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("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  }, showPageSelector && React.createElement(PagesSelector, {
+    pages: pages,
+    onPageClick: handlePageClick,
+    onRecalc: onRecalc,
+    onSave: onSave,
+    saveActive: saveActive,
+    recalcActive: recalcActive
+  }), 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 && (
+    //   <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")
+    }), React.createElement(MetadataEditor, {
+      state: state,
+      onMetadataChange: onMetadataChange
+    })].filter(Boolean)
+  }, canvas), showEditor && React.createElement(EditorWrapper, {
+    id: "editor-wrapper"
+  }, React.createElement(Editor, {
+    id: "editor",
+    blocks: blocks,
+    imageIndex: state.selectedImage,
+    key: "".concat(state.selectedImage, "#").concat(selectedGroupId),
+    onChange: handleEditorChange
+  }))), React.createElement(SettingsDialog, {
+    open: state.settingsOpen,
+    onClose: function onClose() {
+      return dispatch({
+        type: "HEADER_BUTTON_CLICKED",
+        buttonName: "Settings"
+      });
+    }
+  })))));
+};
+export default MainLayout;

package/{src/MainLayout → MainLayout}/styles.js

@@ -1,5 +1,4 @@
-import { grey } from "@mui/material/colors"
-
+import { grey } from "@mui/material/colors";
 export default {
   container: {
     display: "flex",
@@ -15,12 +14,12 @@ export default {
       left: 0,
       right: 0,
       top: 0,
-      bottom: 0,
-    },
+      bottom: 0
+    }
   },
   headerTitle: {
     fontWeight: "bold",
     color: grey[700],
-    paddingLeft: 16,
-  },
-}
+    paddingLeft: 16
+  }
+};

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

@@ -0,0 +1,13 @@
+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/MetadataEditorSidebarBox/index.js

@@ -0,0 +1,126 @@
+import React, { memo } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import DescriptionIcon from "@mui/icons-material/Description";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
+var MetadataItemDiv = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: "flex",
+    flexDirection: "column",
+    marginBottom: "1rem",
+    "& > label": {
+      fontSize: "1rem",
+      marginBottom: ".5rem",
+      textTransform: "capitalize"
+    }
+  };
+});
+
+var MetadataItem = function MetadataItem(_ref2) {
+  var name = _ref2.name,
+      value = _ref2.value,
+      imageIndex = _ref2.imageIndex,
+      onChange = _ref2.onChange;
+
+  var handleChange = function handleChange(e) {
+    e.preventDefault();
+    var _e$target = e.target,
+        name = _e$target.name,
+        value = _e$target.value;
+    onChange({
+      name: name,
+      value: value,
+      imageIndex: imageIndex
+    });
+  };
+
+  return React.createElement(MetadataItemDiv, null, React.createElement("label", {
+    for: name
+  }, name), React.createElement("input", {
+    type: "text",
+    value: value,
+    name: name,
+    onChange: handleChange
+  }));
+};
+
+var MetadataList = function MetadataList(_ref3) {
+  var title = _ref3.title,
+      metadata = _ref3.metadata,
+      imageIndex = _ref3.imageIndex,
+      onMetadataChange = _ref3.onMetadataChange;
+  return React.createElement("div", null, React.createElement("h2", null, title), metadata.map(function (_ref4) {
+    var key = _ref4.key,
+        value = _ref4.value;
+    return React.createElement(MetadataItem, {
+      name: key,
+      value: value,
+      imageIndex: imageIndex,
+      onChange: onMetadataChange
+    });
+  }));
+};
+
+var theme = createTheme();
+var DivContainer = styled("div")(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    paddingLeft: 16,
+    paddingRight: 16,
+    fontSize: 12,
+    "& h1": {
+      fontSize: 18
+    },
+    "& h2": {
+      fontSize: 14
+    },
+    "& h3": {
+      fontSize: 12
+    },
+    "& h4": {
+      fontSize: 12
+    },
+    "& h5": {
+      fontSize: 12
+    },
+    "& h6": {
+      fontSize: 12
+    },
+    "& p": {
+      fontSize: 12
+    },
+    "& a": {},
+    "& img": {
+      width: "100%"
+    }
+  };
+});
+export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
+  var _state$images$state$s;
+
+  var state = _ref6.state,
+      onMetadataChange = _ref6.onMetadataChange;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "Metadata",
+    icon: React.createElement(DescriptionIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: true
+  }, React.createElement(DivContainer, null, React.createElement(MetadataList, {
+    title: "Global",
+    metadata: state.metadata,
+    onMetadataChange: onMetadataChange
+  }), (state === null || state === void 0 ? void 0 : (_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.metadata) && React.createElement(MetadataList, {
+    title: "Local",
+    metadata: state.images[state.selectedImage].metadata,
+    imageIndex: state.selectedImage,
+    onMetadataChange: onMetadataChange
+  }))));
+};
+export default memo(MetadataEditorSidebarBox);