Skip to content

Commit 9abdc71

Browse files
seveibarseveibar
committed
started integration
1 parent c6ffff0 commit 9abdc71

File tree

10 files changed

+3807
-2435
lines changed

10 files changed

+3807
-2435
lines changed

‎.flowconfig

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[options]
2+
esproposal.optional_chaining=enable

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"react-hotkeys": "^2.0.0",
1919
"react-json-view": "^1.19.1",
2020
"react-markdown": "^4.0.6",
21+
"react-material-workspace-layout": "^0.1.6",
2122
"react-monaco-editor": "^0.25.1",
2223
"react-remove-scroll": "^2.0.4",
2324
"react-select": "^3.0.8",
@@ -66,6 +67,7 @@
6667
"devDependencies": {
6768
"@babel/cli": "^7.2.3",
6869
"@babel/core": "^7.2.2",
70+
"@babel/plugin-proposal-optional-chaining": "^7.10.4",
6971
"@storybook/addon-actions": "^5.3.14",
7072
"@storybook/addon-links": "^5.3.14",
7173
"@storybook/addons": "^5.3.14",
@@ -76,7 +78,7 @@
7678
"prettier": "^2.0.5",
7779
"raw.macro": "^0.3.0",
7880
"react-github-btn": "^1.1.1",
79-
"react-scripts": "^2.1.8"
81+
"react-scripts": "^3.4.1"
8082
},
8183
"prettier": {
8284
"semi": false

‎src/Annotator/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,6 @@ export const Annotator = ({
7979
onPrevImage,
8080
autoSegmentationOptions = { type: "autoseg" },
8181
}: Props) => {
82-
if (!images && !videoSrc)
83-
return 'Missing required prop "images" or "videoSrc"'
8482
const annotationType = images ? "image" : "video"
8583
const [state, dispatchToReducer] = useReducer(
8684
historyHandler(
@@ -152,6 +150,9 @@ export const Annotator = ({
152150
})
153151
}, [selectedImage])
154152

153+
if (!images && !videoSrc)
154+
return 'Missing required prop "images" or "videoSrc"'
155+
155156
return (
156157
<SettingsProvider>
157158
<MainLayout

‎src/ImageMask/index.story.js

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎src/MainLayout/icon-dictionary.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// @flow
2+
3+
export const iconDictionary = {}
4+
5+
export default iconDictionary

‎src/MainLayout/index.js

Lines changed: 188 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,16 @@ import getActiveImage from "../Annotator/reducers/get-active-image"
1919
import useImpliedVideoRegions from "./use-implied-video-regions"
2020
import { useDispatchHotkeyHandlers } from "../ShortcutsManager"
2121
import { withHotKeys } from "react-hotkeys"
22+
import iconDictionary from "./icon-dictionary"
23+
import KeyframeTimeline from "../KeyframeTimeline"
24+
import Workspace from "react-material-workspace-layout/Workspace"
25+
import DebugBox from "../DebugSidebarBox"
26+
import TagsSidebarBox from "../TagsSidebarBox"
27+
import KeyframesSelector from "../KeyframesSelectorSidebarBox"
28+
import TaskDescription from "../TaskDescriptionSidebarBox"
29+
import RegionSelector from "../RegionSelectorSidebarBox"
30+
import ImageSelector from "../ImageSelectorSidebarBox"
31+
import HistorySidebarBox from "../HistorySidebarBox"
2232

2333
const useStyles = makeStyles(styles)
2434

@@ -92,6 +102,183 @@ export const MainLayout = ({
92102
}
93103
}, [])
94104

105+
const canvas = (
106+
<ImageCanvas
107+
{...settings}
108+
key={state.selectedImage}
109+
showMask={state.showMask}
110+
fullImageSegmentationMode={state.fullImageSegmentationMode}
111+
autoSegmentationOptions={state.autoSegmentationOptions}
112+
showTags={state.showTags}
113+
allowedArea={state.allowedArea}
114+
regionClsList={state.regionClsList}
115+
regionTagList={state.regionTagList}
116+
regions={
117+
state.annotationType === "image"
118+
? activeImage.regions || []
119+
: impliedVideoRegions
120+
}
121+
realSize={activeImage ? activeImage.realSize : undefined}
122+
videoPlaying={state.videoPlaying}
123+
imageSrc={state.annotationType === "image" ? state.selectedImage : null}
124+
videoSrc={state.annotationType === "video" ? state.videoSrc : null}
125+
pointDistancePrecision={state.pointDistancePrecision}
126+
createWithPrimary={state.selectedTool.includes("create")}
127+
dragWithPrimary={state.selectedTool === "pan"}
128+
zoomWithPrimary={state.selectedTool === "zoom"}
129+
showPointDistances={state.showPointDistances}
130+
pointDistancePrecision={state.pointDistancePrecision}
131+
videoTime={
132+
state.annotationType === "image"
133+
? state.selectedImageFrameTime
134+
: state.currentVideoTime
135+
}
136+
onMouseMove={action("MOUSE_MOVE")}
137+
onMouseDown={action("MOUSE_DOWN")}
138+
onMouseUp={action("MOUSE_UP")}
139+
onChangeRegion={action("CHANGE_REGION", "region")}
140+
onBeginRegionEdit={action("OPEN_REGION_EDITOR", "region")}
141+
onCloseRegionEdit={action("CLOSE_REGION_EDITOR", "region")}
142+
onDeleteRegion={action("DELETE_REGION", "region")}
143+
onBeginBoxTransform={action("BEGIN_BOX_TRANSFORM", "box", "directions")}
144+
onBeginMovePolygonPoint={action(
145+
"BEGIN_MOVE_POLYGON_POINT",
146+
"polygon",
147+
"pointIndex"
148+
)}
149+
onAddPolygonPoint={action(
150+
"ADD_POLYGON_POINT",
151+
"polygon",
152+
"point",
153+
"pointIndex"
154+
)}
155+
onSelectRegion={action("SELECT_REGION", "region")}
156+
onBeginMovePoint={action("BEGIN_MOVE_POINT", "point")}
157+
onImageLoaded={action("IMAGE_LOADED", "image")}
158+
RegionEditLabel={RegionEditLabel}
159+
onImageOrVideoLoaded={action("IMAGE_OR_VIDEO_LOADED", "metadata")}
160+
onChangeVideoTime={action("CHANGE_VIDEO_TIME", "newTime")}
161+
onChangeVideoPlaying={action("CHANGE_VIDEO_PLAYING", "isPlaying")}
162+
onRegionClassAdded={onRegionClassAdded}
163+
/>
164+
)
165+
166+
const debugModeOn = Boolean(window.localStorage.$ANNOTATE_DEBUG_MODE && state)
167+
168+
return (
169+
<Workspace
170+
allowFullscreen
171+
iconDictionary={iconDictionary}
172+
headerLeftSide={[
173+
state.annotationType === "video" && (
174+
<KeyframeTimeline
175+
currentTime={state.currentVideoTime}
176+
duration={state.videoDuration}
177+
onChangeCurrentTime={action("CHANGE_VIDEO_TIME", "newTime")}
178+
keyframes={state.keyframes}
179+
/>
180+
),
181+
].filter(Boolean)}
182+
headerItems={[
183+
{ name: "Prev" },
184+
{ name: "Next" },
185+
state.annotationType !== "video"
186+
? null
187+
: !state.videoPlaying
188+
? { name: "Play" }
189+
: { name: "Pause" },
190+
{ name: "Settings" },
191+
{ name: "Fullscreen" },
192+
{ name: "Save" },
193+
].filter(Boolean)}
194+
onClickHeaderItem={console.log}
195+
onClickIconSidebarItem={console.log}
196+
iconSidebarItems={[
197+
{
198+
name: "select",
199+
toolTip: "Select",
200+
},
201+
{
202+
name: "pan",
203+
toolTip: "Drag/Pan",
204+
},
205+
{
206+
name: "zoom",
207+
toolTip: "Zoom In/Out",
208+
},
209+
{
210+
name: "show-tags",
211+
toolTip: "Show / Hide Tags",
212+
},
213+
{
214+
name: "create-point",
215+
toolTip: "Add Point",
216+
},
217+
{
218+
name: "create-box",
219+
toolTip: "Add Bounding Box",
220+
},
221+
{
222+
name: "create-polygon",
223+
toolTip: "Add Polygon",
224+
},
225+
{
226+
name: "create-expanding-line",
227+
toolTip: "Add Expanding Line",
228+
},
229+
{
230+
name: "show-mask",
231+
toolTip: "Show / Hide Mask",
232+
},
233+
]}
234+
rightSidebarItems={[
235+
debugModeOn && (
236+
<DebugBox state={debugModeOn} lastAction={state.lastAction} />
237+
),
238+
state.taskDescription && (
239+
<TaskDescription description={state.taskDescription} />
240+
),
241+
state.labelImages && (
242+
<TagsSidebarBox
243+
currentImage={activeImage}
244+
imageClsList={state.imageClsList}
245+
imageTagList={state.imageTagList}
246+
onChangeImage={action("CHANGE_IMAGE", "delta")}
247+
expandedByDefault
248+
/>
249+
),
250+
(state.images?.length || 0) > 1 && (
251+
<ImageSelector
252+
onSelect={action("SELECT_REGION", "region")}
253+
images={state.images}
254+
/>
255+
),
256+
<RegionSelector
257+
regions={activeImage ? activeImage.regions : null}
258+
onSelectRegion={action("SELECT_REGION", "region")}
259+
onDeleteRegion={action("DELETE_REGION", "region")}
260+
onChangeRegion={action("CHANGE_REGION", "region")}
261+
/>,
262+
state.keyframes && (
263+
<KeyframesSelector
264+
onChangeVideoTime={action("CHANGE_VIDEO_TIME", "newTime")}
265+
onDeleteKeyframe={action("DELETE_KEYFRAME", "time")}
266+
onChangeCurrentTime={action("CHANGE_VIDEO_TIME", "newTime")}
267+
currentTime={state.currentVideoTime}
268+
duration={state.videoDuration}
269+
keyframes={state.keyframes}
270+
/>
271+
),
272+
<HistorySidebarBox
273+
history={state.history}
274+
onRestoreHistory={action("RESTORE_HISTORY")}
275+
/>,
276+
].filter(Boolean)}
277+
>
278+
{canvas}
279+
</Workspace>
280+
)
281+
95282
return (
96283
<Fullscreen
97284
enabled={state.fullScreen}
@@ -153,82 +340,7 @@ export const MainLayout = ({
153340
{state.annotationType === "image" && !state.selectedImage ? (
154341
<div className={classes.noImageSelected}>No Image Selected</div>
155342
) : (
156-
<div style={{ height: "100%", width: "100%" }}>
157-
<ImageCanvas
158-
{...settings}
159-
key={state.selectedImage}
160-
showMask={state.showMask}
161-
fullImageSegmentationMode={state.fullImageSegmentationMode}
162-
autoSegmentationOptions={state.autoSegmentationOptions}
163-
showTags={state.showTags}
164-
allowedArea={state.allowedArea}
165-
regionClsList={state.regionClsList}
166-
regionTagList={state.regionTagList}
167-
regions={
168-
state.annotationType === "image"
169-
? activeImage.regions || []
170-
: impliedVideoRegions
171-
}
172-
realSize={activeImage ? activeImage.realSize : undefined}
173-
videoPlaying={state.videoPlaying}
174-
imageSrc={
175-
state.annotationType === "image"
176-
? state.selectedImage
177-
: null
178-
}
179-
videoSrc={
180-
state.annotationType === "video" ? state.videoSrc : null
181-
}
182-
pointDistancePrecision={state.pointDistancePrecision}
183-
createWithPrimary={state.selectedTool.includes("create")}
184-
dragWithPrimary={state.selectedTool === "pan"}
185-
zoomWithPrimary={state.selectedTool === "zoom"}
186-
showPointDistances={state.showPointDistances}
187-
pointDistancePrecision={state.pointDistancePrecision}
188-
videoTime={
189-
state.annotationType === "image"
190-
? state.selectedImageFrameTime
191-
: state.currentVideoTime
192-
}
193-
onMouseMove={action("MOUSE_MOVE")}
194-
onMouseDown={action("MOUSE_DOWN")}
195-
onMouseUp={action("MOUSE_UP")}
196-
onChangeRegion={action("CHANGE_REGION", "region")}
197-
onBeginRegionEdit={action("OPEN_REGION_EDITOR", "region")}
198-
onCloseRegionEdit={action("CLOSE_REGION_EDITOR", "region")}
199-
onDeleteRegion={action("DELETE_REGION", "region")}
200-
onBeginBoxTransform={action(
201-
"BEGIN_BOX_TRANSFORM",
202-
"box",
203-
"directions"
204-
)}
205-
onBeginMovePolygonPoint={action(
206-
"BEGIN_MOVE_POLYGON_POINT",
207-
"polygon",
208-
"pointIndex"
209-
)}
210-
onAddPolygonPoint={action(
211-
"ADD_POLYGON_POINT",
212-
"polygon",
213-
"point",
214-
"pointIndex"
215-
)}
216-
onSelectRegion={action("SELECT_REGION", "region")}
217-
onBeginMovePoint={action("BEGIN_MOVE_POINT", "point")}
218-
onImageLoaded={action("IMAGE_LOADED", "image")}
219-
RegionEditLabel={RegionEditLabel}
220-
onImageOrVideoLoaded={action(
221-
"IMAGE_OR_VIDEO_LOADED",
222-
"metadata"
223-
)}
224-
onChangeVideoTime={action("CHANGE_VIDEO_TIME", "newTime")}
225-
onChangeVideoPlaying={action(
226-
"CHANGE_VIDEO_PLAYING",
227-
"isPlaying"
228-
)}
229-
onRegionClassAdded={onRegionClassAdded}
230-
/>
231-
</div>
343+
<div style={{ height: "100%", width: "100%" }}>{canvas}</div>
232344
)}
233345
</div>
234346
<div className={classes.sidebarContainer}>

‎src/Sidebar/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import DebugBox from "../DebugSidebarBox"
1010
import TagsSidebarBox from "../TagsSidebarBox"
1111
import KeyframesSelector from "../KeyframesSelectorSidebarBox"
1212
import type { Region } from "../ImageCanvas/region-tools.js"
13-
import Shortcuts from "../Shortcuts"
1413

1514
const useStyles = makeStyles({})
1615

0 commit comments

Comments
 (0)