Skip to content

Commit 05e6f9e

Browse files
seveibarseveibar
authored
fix: Merge pull request #178 from josepdecid/master
Allow to hide any of the header buttons and update the Readme with the new options
2 parents 915beea + e49f4a8 commit 05e6f9e

File tree

3 files changed

+62
-39
lines changed

3 files changed

+62
-39
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,12 @@ All of the following properties can be defined on the Annotator...
7373
| `onExit` | `MainLayoutState => any` | Called when "Save" is called. | |
7474
| `RegionEditLabel` | `Node` | React Node overriding the form to update the region (see [`RegionLabel`](https://github.com/waoai/react-image-annotate/blob/master/src/RegionLabel/index.js)) | |
7575
| `allowComments` | `boolean` | Show a textarea to add comments on each annotation. | `false` |
76+
| `hidePrev` | `boolean` | Hide `Previous Image` button from the header bar. | `false` |
77+
| `hideNext` | `boolean` | Hide `Next Image` button from the header bar. | `false` |
78+
| `hideClone` | `boolean` | Hide `Clone` button from the header bar. | `false` |
79+
| `hideSettings` | `boolean` | Hide `Settings` button from the header bar. | `false` |
80+
| `hideFullScreen` | `boolean` | Hide `FullScreen/Window` button from the header bar. | `false` |
81+
| `hideSave` | `boolean` | Hide `Save` button from the header bar. | `false` |
7682

7783
## Developers
7884

‎src/Annotator/index.js‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
// @flow
22

3-
import React, { useReducer, useEffect } from "react"
4-
import type { Node } from "react"
5-
import MainLayout from "../MainLayout"
63
import type {
7-
ToolEnum,
4+
Action,
85
Image,
9-
Mode,
106
MainLayoutState,
11-
Action,
7+
Mode,
8+
ToolEnum,
129
} from "../MainLayout/types"
10+
import React, { useEffect, useReducer } from "react"
11+
import makeImmutable, { without } from "seamless-immutable"
12+
1313
import type { KeypointsDefinition } from "../ImageCanvas/region-tools"
14+
import MainLayout from "../MainLayout"
15+
import type { Node } from "react"
1416
import SettingsProvider from "../SettingsProvider"
15-
1617
import combineReducers from "./reducers/combine-reducers.js"
1718
import generalReducer from "./reducers/general-reducer.js"
18-
import imageReducer from "./reducers/image-reducer.js"
19-
import videoReducer from "./reducers/video-reducer.js"
19+
import getFromLocalStorage from "../utils/get-from-local-storage"
2020
import historyHandler from "./reducers/history-handler.js"
21-
21+
import imageReducer from "./reducers/image-reducer.js"
2222
import useEventCallback from "use-event-callback"
23-
import makeImmutable, { without } from "seamless-immutable"
24-
import getFromLocalStorage from "../utils/get-from-local-storage"
23+
import videoReducer from "./reducers/video-reducer.js"
2524

2625
type Props = {
2726
taskDescription?: string,
@@ -52,6 +51,10 @@ type Props = {
5251
hideHeaderText?: boolean,
5352
hideNext?: boolean,
5453
hidePrev?: boolean,
54+
hideClone?: boolean,
55+
hideSettings?: boolean,
56+
hideFullScreen?: boolean,
57+
hideSave?: boolean
5558
}
5659

5760
export const Annotator = ({
@@ -91,6 +94,10 @@ export const Annotator = ({
9194
hideHeaderText,
9295
hideNext,
9396
hidePrev,
97+
hideClone,
98+
hideSettings,
99+
hideFullScreen,
100+
hideSave,
94101
allowComments,
95102
}: Props) => {
96103
if (typeof selectedImage === "string") {
@@ -187,6 +194,10 @@ export const Annotator = ({
187194
hideHeaderText={hideHeaderText}
188195
hideNext={hideNext}
189196
hidePrev={hidePrev}
197+
hideClone={hideClone}
198+
hideSettings={hideSettings}
199+
hideFullScreen={hideFullScreen}
200+
hideSave={hideSave}
190201
/>
191202
</SettingsProvider>
192203
)

‎src/MainLayout/index.js‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,36 @@
11
// @flow
22

3-
import React, { useRef, useCallback } from "react"
4-
import type { Node } from "react"
3+
import type { Action, MainLayoutState } from "./types"
4+
import { FullScreen, useFullScreenHandle } from "react-full-screen"
5+
import React, { useCallback, useRef } from "react"
56
import { makeStyles, styled } from "@material-ui/core/styles"
7+
8+
import ClassSelectionMenu from "../ClassSelectionMenu"
9+
import DebugBox from "../DebugSidebarBox"
10+
import HistorySidebarBox from "../HistorySidebarBox"
611
import ImageCanvas from "../ImageCanvas"
7-
import styles from "./styles"
8-
import type { MainLayoutState, Action } from "./types"
9-
import useKey from "use-key-hook"
10-
import classnames from "classnames"
11-
import { useSettings } from "../SettingsProvider"
12-
import SettingsDialog from "../SettingsDialog"
13-
// import Fullscreen from "../Fullscreen"
14-
import { FullScreen, useFullScreenHandle } from "react-full-screen"
15-
import getActiveImage from "../Annotator/reducers/get-active-image"
16-
import useImpliedVideoRegions from "./use-implied-video-regions"
17-
import { useDispatchHotkeyHandlers } from "../ShortcutsManager"
18-
import { withHotKeys } from "react-hotkeys"
19-
import iconDictionary from "./icon-dictionary"
12+
import ImageSelector from "../ImageSelectorSidebarBox"
2013
import KeyframeTimeline from "../KeyframeTimeline"
21-
import Workspace from "react-material-workspace-layout/Workspace"
22-
import DebugBox from "../DebugSidebarBox"
23-
import TagsSidebarBox from "../TagsSidebarBox"
2414
import KeyframesSelector from "../KeyframesSelectorSidebarBox"
25-
import TaskDescription from "../TaskDescriptionSidebarBox"
15+
import type { Node } from "react"
2616
import RegionSelector from "../RegionSelectorSidebarBox"
27-
import ImageSelector from "../ImageSelectorSidebarBox"
28-
import HistorySidebarBox from "../HistorySidebarBox"
29-
import useEventCallback from "use-event-callback"
17+
import SettingsDialog from "../SettingsDialog"
18+
import TagsSidebarBox from "../TagsSidebarBox"
19+
import TaskDescription from "../TaskDescriptionSidebarBox"
20+
import Workspace from "react-material-workspace-layout/Workspace"
21+
import classnames from "classnames"
22+
import getActiveImage from "../Annotator/reducers/get-active-image"
3023
import getHotkeyHelpText from "../utils/get-hotkey-help-text"
31-
import ClassSelectionMenu from "../ClassSelectionMenu"
24+
import iconDictionary from "./icon-dictionary"
25+
import styles from "./styles"
26+
import { useDispatchHotkeyHandlers } from "../ShortcutsManager"
27+
import useEventCallback from "use-event-callback"
28+
import useImpliedVideoRegions from "./use-implied-video-regions"
29+
import useKey from "use-key-hook"
30+
import { useSettings } from "../SettingsProvider"
31+
import { withHotKeys } from "react-hotkeys"
32+
33+
// import Fullscreen from "../Fullscreen"
3234

3335
const emptyArr = []
3436
const useStyles = makeStyles(styles)
@@ -70,6 +72,10 @@ export const MainLayout = ({
7072
hideHeaderText,
7173
hideNext = false,
7274
hidePrev = false,
75+
hideClone = false,
76+
hideSettings = false,
77+
hideFullScreen = false,
78+
hideSave = false
7379
}: Props) => {
7480
const classes = useStyles()
7581
const settings = useSettings()
@@ -256,10 +262,10 @@ export const MainLayout = ({
256262
: !state.videoPlaying
257263
? { name: "Play" }
258264
: { name: "Pause" },
259-
!nextImageHasRegions && activeImage.regions && { name: "Clone" },
260-
{ name: "Settings" },
261-
state.fullScreen ? { name: "Window" } : { name: "Fullscreen" },
262-
{ name: "Save" },
265+
!hideClone && !nextImageHasRegions && activeImage.regions && { name: "Clone" },
266+
!hideSettings && { name: "Settings" },
267+
!hideFullScreen && (state.fullScreen ? { name: "Window" } : { name: "Fullscreen" }),
268+
!hideSave && { name: "Save" },
263269
].filter(Boolean)}
264270
onClickHeaderItem={onClickHeaderItem}
265271
onClickIconSidebarItem={onClickIconSidebarItem}

0 commit comments

Comments
 (0)