@searpent/react-image-annotate 2.3.3 → 2.3.5

package/MainLayout/icon-dictionary.js

@@ -11,92 +11,125 @@ var faStyle = {
 };
 export var iconDictionary = {
   select: function select() {
-    return React.createElement(FontAwesomeIcon, {
-      style: faStyle,
-      size: "xs",
-      fixedWidth: true,
-      icon: faMousePointer
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(FontAwesomeIcon, {
+        style: faStyle,
+        size: "xs",
+        fixedWidth: true,
+        icon: faMousePointer
+      })
+    );
   },
   pan: function pan() {
-    return React.createElement(FontAwesomeIcon, {
-      style: faStyle,
-      size: "xs",
-      fixedWidth: true,
-      icon: faHandPaper
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(FontAwesomeIcon, {
+        style: faStyle,
+        size: "xs",
+        fixedWidth: true,
+        icon: faHandPaper
+      })
+    );
   },
   zoom: function zoom() {
-    return React.createElement(FontAwesomeIcon, {
-      style: faStyle,
-      size: "xs",
-      fixedWidth: true,
-      icon: faSearch
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(FontAwesomeIcon, {
+        style: faStyle,
+        size: "xs",
+        fixedWidth: true,
+        icon: faSearch
+      })
+    );
   },
   "show-tags": function showTags() {
-    return React.createElement(FontAwesomeIcon, {
-      style: faStyle,
-      size: "xs",
-      fixedWidth: true,
-      icon: faTag
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(FontAwesomeIcon, {
+        style: faStyle,
+        size: "xs",
+        fixedWidth: true,
+        icon: faTag
+      })
+    );
   },
   "create-point": function createPoint() {
-    return React.createElement(FontAwesomeIcon, {
-      style: faStyle,
-      size: "xs",
-      fixedWidth: true,
-      icon: faCrosshairs
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(FontAwesomeIcon, {
+        style: faStyle,
+        size: "xs",
+        fixedWidth: true,
+        icon: faCrosshairs
+      })
+    );
   },
   "create-box": function createBox() {
-    return React.createElement(FontAwesomeIcon, {
-      style: faStyle,
-      size: "xs",
-      fixedWidth: true,
-      icon: faVectorSquare
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(FontAwesomeIcon, {
+        style: faStyle,
+        size: "xs",
+        fixedWidth: true,
+        icon: faVectorSquare
+      })
+    );
   },
   "create-polygon": function createPolygon() {
-    return React.createElement(FontAwesomeIcon, {
-      style: faStyle,
-      size: "xs",
-      fixedWidth: true,
-      icon: faDrawPolygon
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(FontAwesomeIcon, {
+        style: faStyle,
+        size: "xs",
+        fixedWidth: true,
+        icon: faDrawPolygon
+      })
+    );
   },
   "create-expanding-line": function createExpandingLine() {
-    return React.createElement(FontAwesomeIcon, {
-      style: faStyle,
-      size: "xs",
-      fixedWidth: true,
-      icon: faGripLines
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(FontAwesomeIcon, {
+        style: faStyle,
+        size: "xs",
+        fixedWidth: true,
+        icon: faGripLines
+      })
+    );
   },
   "create-line": function createLine() {
-    return React.createElement(FontAwesomeIcon, {
-      style: faStyle,
-      size: "xs",
-      fixedWidth: true,
-      icon: faChartLine
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(FontAwesomeIcon, {
+        style: faStyle,
+        size: "xs",
+        fixedWidth: true,
+        icon: faChartLine
+      })
+    );
   },
   "show-mask": function showMask() {
-    return React.createElement(FontAwesomeIcon, {
-      style: faStyle,
-      size: "xs",
-      fixedWidth: true,
-      icon: faMask
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(FontAwesomeIcon, {
+        style: faStyle,
+        size: "xs",
+        fixedWidth: true,
+        icon: faMask
+      })
+    );
   },
   "modify-allowed-area": function modifyAllowedArea() {
-    return React.createElement(FontAwesomeIcon, {
-      style: faStyle,
-      size: "xs",
-      fixedWidth: true,
-      icon: faEdit
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(FontAwesomeIcon, {
+        style: faStyle,
+        size: "xs",
+        fixedWidth: true,
+        icon: faEdit
+      })
+    );
   },
   "create-keypoints": AccessibilityNewIcon,
   window: FullscreenIcon

package/MainLayout/index.js

@@ -53,9 +53,12 @@ var HotkeyDiv = withHotKeys(function (_ref) {
       divRef = _ref.divRef,
       props = _objectWithoutProperties(_ref, ["hotKeys", "children", "divRef"]);
 
-  return React.createElement("div", Object.assign({}, _objectSpread({}, hotKeys, props), {
-    ref: divRef
-  }), children);
+  return (
+    /*#__PURE__*/
+    React.createElement("div", Object.assign({}, _objectSpread({}, hotKeys, props), {
+      ref: divRef
+    }), children)
+  );
 });
 var FullScreenContainer = styled("div")(function (_ref2) {
   var theme = _ref2.theme;
@@ -130,7 +133,8 @@ export var MainLayout = function MainLayout(_ref5) {
       saveActive = _ref5$saveActive === void 0 ? false : _ref5$saveActive,
       onMetadataChange = _ref5.onMetadataChange,
       onAddGroup = _ref5.onAddGroup,
-      onRecalcClick = _ref5.onRecalcClick;
+      onRecalcClick = _ref5.onRecalcClick,
+      updatedBy = _ref5.updatedBy;
   var classes = useStyles();
   var settings = useSettings();
   var fullScreenHandle = useFullScreenHandle();
@@ -201,7 +205,9 @@ export var MainLayout = function MainLayout(_ref5) {
   var allowedGroups = useMemo(function () {
     return regionsGroups(state.images[state.selectedImage].regions);
   }, [state.images, state.selectedImage]);
-  var canvas = React.createElement(ImageCanvas, Object.assign({}, settings, {
+  var canvas =
+  /*#__PURE__*/
+  React.createElement(ImageCanvas, Object.assign({}, settings, {
     showCrosshairs: settings.showCrosshairs && !["select", "pan", "zoom"].includes(state.selectedTool),
     key: state.selectedImage,
     showMask: state.showMask,
@@ -330,199 +336,253 @@ export var MainLayout = function MainLayout(_ref5) {
   var selectedFrame = ((_state$images$state$s4 = state.images[state.selectedImage]) === null || _state$images$state$s4 === void 0 ? void 0 : (_state$images$state$s5 = _state$images$state$s4.regions.find(function (i) {
     return i.highlighted === true;
   })) === null || _state$images$state$s5 === void 0 ? void 0 : _state$images$state$s5.id) || '';
-  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");
+  return (
+    /*#__PURE__*/
+    React.createElement(ThemeProvider, {
+      theme: theme
+    },
+    /*#__PURE__*/
+    React.createElement(FullScreenContainer, null,
+    /*#__PURE__*/
+    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(PageSelector, {
-    pages: pages,
-    onPageClick: handlePageClick,
-    onMetadataChange: onMetadataChange,
-    metadataConfigs: state.metadataConfigs || [],
-    onRecalcClick: onRecalcClick
-  }), React.createElement(WorkspaceWrapper, null, React.createElement(Workspace, {
-    style: {
-      width: "auto"
     },
-    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: !state.enabledTools ? [] : [{
-      name: "select",
-      helperText: "Select" + getHotkeyHelpText("select_tool"),
-      alwaysShowing: false
-    }, {
-      name: "pan",
-      helperText: "Drag/Pan (right or middle click)" + getHotkeyHelpText("pan_tool"),
-      alwaysShowing: false
-    }, {
-      name: "zoom",
-      helperText: "Zoom In/Out (scroll)" + getHotkeyHelpText("zoom_tool"),
-      alwaysShowing: false
-    }, {
-      name: "show-tags",
-      helperText: "Show / Hide Tags",
-      alwaysShowing: false
-    }, {
-      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: false,
-      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: [React.createElement(RightSidebarItemsWrapper, null, [isSelectedImageLocked && React.createElement(Locker, null), debugModeOn && React.createElement(DebugBox, {
-      state: debugModeOn,
-      lastAction: state.lastAction,
-      key: "debug-box"
-    }), state.taskDescription && React.createElement(TaskDescription, {
-      description: state.taskDescription,
-      key: "task-description"
-    }), state.help && React.createElement(Help, {
-      help: state.help,
-      key: "help"
-    }), state.regionClsList && React.createElement(ClassSelectionMenu, {
-      selectedCls: state.selectedCls,
-      regionClsList: state.regionClsList,
-      onSelectCls: action("SELECT_CLASSIFICATION", "cls"),
-      key: "class-selection-menu"
-    }), state.labelImages && React.createElement(TagsSidebarBox, {
-      currentImage: activeImage,
-      imageClsList: state.imageClsList,
-      imageTagList: state.imageTagList,
-      onChangeImage: action("CHANGE_IMAGE", "delta"),
-      expandedByDefault: true,
-      key: "tags-sidebar-box"
-    }),, // (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"),
-      onDeleteAllRegions: action("DELETE_ALL_REGIONS"),
-      onChangeRegion: action("CHANGE_REGION", "region"),
-      key: "region-selector"
-    }), state.keyframes && React.createElement(KeyframesSelector, {
-      onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
-      onDeleteKeyframe: action("DELETE_KEYFRAME", "time"),
-      onDeleteAllKeyframes: action("DELETE_ALL_KEYFRAMES"),
-      onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
-      currentTime: state.currentVideoTime,
-      duration: state.videoDuration,
-      keyframes: state.keyframes,
-      key: "key-frame-selector"
-    }), !hideHistory && React.createElement(HistorySidebarBox, {
-      history: state.history,
-      onRestoreHistory: action("RESTORE_HISTORY"),
-      key: "history-sidebar"
-    }), React.createElement(MetadataEditor, {
-      state: state,
+    /*#__PURE__*/
+    React.createElement(HotkeyDiv, {
+      tabIndex: -1,
+      divRef: innerContainerRef,
+      onMouseDown: refocusOnMouseEvent,
+      onMouseOver: refocusOnMouseEvent,
+      allowChanges: true,
+      handlers: hotkeyHandlers,
+      className: classnames(classes.container, state.fullScreen && "Fullscreen")
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'row'
+      }
+    }, showPageSelector &&
+    /*#__PURE__*/
+    React.createElement(PageSelector, {
+      pages: pages,
+      onPageClick: handlePageClick,
       onMetadataChange: onMetadataChange,
-      key: "metadata-editor"
-    }), React.createElement(GroupsEditor, {
-      groups: allowedGroups,
-      onAddGroup: onAddGroup,
-      key: "groups-editor"
-    })].filter(Boolean))]
-  }, isSelectedImageLocked && React.createElement(Locker, null), canvas)), showEditor && !isSelectedImageLocked && React.createElement(EditorWrapper, {
-    id: "editor-wrapper"
-  }, React.createElement(Editor, {
-    id: "editor",
-    blocks: blocks,
-    imageIndex: state.selectedImage,
-    key: "".concat(state.selectedImage, "#").concat(selectedGroupId),
-    selectedFrame: selectedFrame,
-    onChange: handleEditorChange
-  }))), React.createElement(SettingsDialog, {
-    open: state.settingsOpen,
-    onClose: function onClose() {
-      return dispatch({
-        type: "HEADER_BUTTON_CLICKED",
-        buttonName: "Settings"
-      });
-    }
-  })))));
+      metadataConfigs: state.metadataConfigs || [],
+      onRecalcClick: onRecalcClick,
+      updatedBy: updatedBy
+    }),
+    /*#__PURE__*/
+    React.createElement(WorkspaceWrapper, null,
+    /*#__PURE__*/
+    React.createElement(Workspace, {
+      style: {
+        width: "auto"
+      },
+      allowFullscreen: true,
+      iconDictionary: iconDictionary,
+      hideHeader: hideHeader,
+      hideHeaderText: hideHeaderText,
+      headerLeftSide: [state.annotationType === "video" ?
+      /*#__PURE__*/
+      React.createElement(KeyframeTimeline, {
+        currentTime: state.currentVideoTime,
+        duration: state.videoDuration,
+        onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
+        keyframes: state.keyframes
+      }) : activeImage ?
+      /*#__PURE__*/
+      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: !state.enabledTools ? [] : [{
+        name: "select",
+        helperText: "Select" + getHotkeyHelpText("select_tool"),
+        alwaysShowing: false
+      }, {
+        name: "pan",
+        helperText: "Drag/Pan (right or middle click)" + getHotkeyHelpText("pan_tool"),
+        alwaysShowing: false
+      }, {
+        name: "zoom",
+        helperText: "Zoom In/Out (scroll)" + getHotkeyHelpText("zoom_tool"),
+        alwaysShowing: false
+      }, {
+        name: "show-tags",
+        helperText: "Show / Hide Tags",
+        alwaysShowing: false
+      }, {
+        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: false,
+        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: [
+      /*#__PURE__*/
+      React.createElement(RightSidebarItemsWrapper, null, [isSelectedImageLocked &&
+      /*#__PURE__*/
+      React.createElement(Locker, null), debugModeOn &&
+      /*#__PURE__*/
+      React.createElement(DebugBox, {
+        state: debugModeOn,
+        lastAction: state.lastAction,
+        key: "debug-box"
+      }), state.taskDescription &&
+      /*#__PURE__*/
+      React.createElement(TaskDescription, {
+        description: state.taskDescription,
+        key: "task-description"
+      }), state.help &&
+      /*#__PURE__*/
+      React.createElement(Help, {
+        help: state.help,
+        key: "help"
+      }), state.regionClsList &&
+      /*#__PURE__*/
+      React.createElement(ClassSelectionMenu, {
+        selectedCls: state.selectedCls,
+        regionClsList: state.regionClsList,
+        onSelectCls: action("SELECT_CLASSIFICATION", "cls"),
+        key: "class-selection-menu"
+      }), state.labelImages &&
+      /*#__PURE__*/
+      React.createElement(TagsSidebarBox, {
+        currentImage: activeImage,
+        imageClsList: state.imageClsList,
+        imageTagList: state.imageTagList,
+        onChangeImage: action("CHANGE_IMAGE", "delta"),
+        expandedByDefault: true,
+        key: "tags-sidebar-box"
+      }),,
+      /*#__PURE__*/
+      // (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"),
+        onDeleteAllRegions: action("DELETE_ALL_REGIONS"),
+        onChangeRegion: action("CHANGE_REGION", "region"),
+        key: "region-selector"
+      }), state.keyframes &&
+      /*#__PURE__*/
+      React.createElement(KeyframesSelector, {
+        onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
+        onDeleteKeyframe: action("DELETE_KEYFRAME", "time"),
+        onDeleteAllKeyframes: action("DELETE_ALL_KEYFRAMES"),
+        onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
+        currentTime: state.currentVideoTime,
+        duration: state.videoDuration,
+        keyframes: state.keyframes,
+        key: "key-frame-selector"
+      }), !hideHistory &&
+      /*#__PURE__*/
+      React.createElement(HistorySidebarBox, {
+        history: state.history,
+        onRestoreHistory: action("RESTORE_HISTORY"),
+        key: "history-sidebar"
+      }),
+      /*#__PURE__*/
+      React.createElement(MetadataEditor, {
+        state: state,
+        onMetadataChange: onMetadataChange,
+        key: "metadata-editor"
+      }),
+      /*#__PURE__*/
+      React.createElement(GroupsEditor, {
+        groups: allowedGroups,
+        onAddGroup: onAddGroup,
+        key: "groups-editor"
+      })].filter(Boolean))]
+    }, isSelectedImageLocked &&
+    /*#__PURE__*/
+    React.createElement(Locker, null), canvas)), showEditor && !isSelectedImageLocked &&
+    /*#__PURE__*/
+    React.createElement(EditorWrapper, {
+      id: "editor-wrapper"
+    },
+    /*#__PURE__*/
+    React.createElement(Editor, {
+      id: "editor",
+      blocks: blocks,
+      imageIndex: state.selectedImage,
+      key: "".concat(state.selectedImage, "#").concat(selectedGroupId),
+      selectedFrame: selectedFrame,
+      onChange: handleEditorChange
+    }))),
+    /*#__PURE__*/
+    React.createElement(SettingsDialog, {
+      open: state.settingsOpen,
+      onClose: function onClose() {
+        return dispatch({
+          type: "HEADER_BUTTON_CLICKED",
+          buttonName: "Settings"
+        });
+      }
+    })))))
+  );
 };
 export default MainLayout;