Skip to content

Commit ca3e864

Browse files
seveibarseveibar
authored
feat: Merge pull request #185 from HenryLiangzy/master
Migrate to Material UI v5
2 parents 05e6f9e + 1884a55 commit ca3e864

File tree

43 files changed

+1947
-1698
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1947
-1698
lines changed

Diff for: ‎package.json

+13-8
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
11
{
22
"name": "react-image-annotate",
3-
"version": "1.8.0",
3+
"version": "2.0.0",
44
"dependencies": {
5+
"@emotion/react": "^11.7.0",
6+
"@emotion/styled": "^11.6.0",
57
"@fortawesome/fontawesome-svg-core": "^1.2.12",
68
"@fortawesome/free-solid-svg-icons": "^5.6.3",
79
"@fortawesome/react-fontawesome": "^0.1.3",
8-
"@material-ui/core": "^4.6.0",
9-
"@material-ui/icons": "^4.9.1",
10+
"@mui/icons-material": "^5.2.1",
11+
"@mui/material": "^5.2.3",
12+
"@mui/styles": "^5.2.3",
1013
"@semantic-release/git": "^9.0.0",
1114
"autoseg": "^0.0.12",
1215
"clamp": "^1.0.1",
1316
"color-alpha": "^1.0.4",
1417
"get-image-data": "^3.0.1",
15-
"material-survey": "^1.0.34",
18+
"material-survey": "^2.1.0",
1619
"mmgc1-cpp": "^1.0.50",
1720
"moment": "^2.23.0",
21+
"react": "^17.0.2",
22+
"react-dom": "^17.0.2",
1823
"react-full-screen": "^0.3.1",
1924
"react-hotkeys": "^2.0.0",
2025
"react-json-view": "^1.19.1",
2126
"react-markdown": "^4.0.6",
22-
"react-material-workspace-layout": "^1.0.9",
27+
"react-material-workspace-layout": "^1.0.10",
2328
"react-monaco-editor": "^0.25.1",
2429
"react-remove-scroll": "^2.0.4",
2530
"react-select": "^3.0.8",
@@ -35,8 +40,8 @@
3540
"use-key-hook": "^1.3.0"
3641
},
3742
"peerDependencies": {
38-
"react": "^16.8.0",
39-
"react-dom": "^16.8.0"
43+
"react": "^17.0.0",
44+
"react-dom": "^17.0.0"
4045
},
4146
"homepage": "/react-image-annotate",
4247
"repository": {
@@ -77,7 +82,7 @@
7782
"babel-loader": "^8.0.5",
7883
"babel-preset-react-app": "^7.0.0",
7984
"gh-pages": "^2.0.1",
80-
"prettier": "^2.1.1",
85+
"prettier": "^2.5.1",
8186
"raw.macro": "^0.3.0",
8287
"react-github-btn": "^1.1.1",
8388
"react-scripts": "^3.4.1"

Diff for: ‎src/Annotator/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ type Props = {
5454
hideClone?: boolean,
5555
hideSettings?: boolean,
5656
hideFullScreen?: boolean,
57-
hideSave?: boolean
57+
hideSave?: boolean,
5858
}
5959

6060
export const Annotator = ({

Diff for: ‎src/Annotator/index.story.js

+5-10
Original file line numberDiff line numberDiff line change
@@ -183,14 +183,12 @@ storiesOf("Annotator", module)
183183
showTags={false}
184184
images={[
185185
{
186-
src:
187-
"https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
186+
src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
188187
name: "Bounding Box Test",
189188
regions: [],
190189
},
191190
{
192-
src:
193-
"https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame001.png",
191+
src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame001.png",
194192
name: "Bounding Box Test",
195193
regions: [],
196194
},
@@ -207,8 +205,7 @@ storiesOf("Annotator", module)
207205
allowedArea={{ x: 0, y: 0.6, w: 0.3, h: 0.3 }}
208206
images={[
209207
{
210-
src:
211-
"https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
208+
src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
212209
name: "Bounding Box Test",
213210
regions: [],
214211
},
@@ -440,14 +437,12 @@ storiesOf("Annotator", module)
440437
]}
441438
images={[
442439
{
443-
src:
444-
"https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
440+
src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
445441
frameTime: 0,
446442
name: "Frame 1",
447443
},
448444
{
449-
src:
450-
"https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
445+
src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
451446
frameTime: 4500,
452447
name: "Frame 2",
453448
},

Diff for: ‎src/Annotator/reducers/combine-reducers.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
export default (...reducers) => (state, action) => {
2-
for (const reducer of reducers) {
3-
state = reducer(state, action)
1+
export default (...reducers) =>
2+
(state, action) => {
3+
for (const reducer of reducers) {
4+
state = reducer(state, action)
5+
}
6+
return state
47
}
5-
return state
6-
}

Diff for: ‎src/Annotator/reducers/general-reducer.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,8 @@ export default (state: MainLayoutState, action: Action) => {
4444
state = setIn(state, ["lastAction"], action)
4545
}
4646

47-
const { currentImageIndex, pathToActiveImage, activeImage } = getActiveImage(
48-
state
49-
)
47+
const { currentImageIndex, pathToActiveImage, activeImage } =
48+
getActiveImage(state)
5049

5150
const getRegionIndex = (region) => {
5251
const regionId =
@@ -634,9 +633,8 @@ export default (state: MainLayoutState, action: Action) => {
634633
}
635634
case "create-keypoints": {
636635
state = saveToHistory(state, "Create Keypoints")
637-
const [
638-
[keypointsDefinitionId, { landmarks, connections }],
639-
] = (Object.entries(state.keypointDefinitions): any)
636+
const [[keypointsDefinitionId, { landmarks, connections }]] =
637+
(Object.entries(state.keypointDefinitions): any)
640638

641639
newRegion = {
642640
type: "keypoints",

Diff for: ‎src/Annotator/reducers/image-reducer.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@ import { setIn } from "seamless-immutable"
88
import getActiveImage from "./get-active-image"
99

1010
export default (state: MainLayoutImageAnnotationState, action: Action) => {
11-
const { currentImageIndex, pathToActiveImage, activeImage } = getActiveImage(
12-
state
13-
)
11+
const { currentImageIndex, pathToActiveImage, activeImage } =
12+
getActiveImage(state)
1413

1514
switch (action.type) {
1615
case "IMAGE_OR_VIDEO_LOADED": {

Diff for: ‎src/ClassSelectionMenu/index.js

+43-37
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React, { useEffect } from "react"
2-
import { styled } from "@material-ui/core/styles"
3-
import Box from "@material-ui/core/Box"
4-
import * as muiColors from "@material-ui/core/colors"
2+
import { styled } from "@mui/material/styles"
3+
import { createTheme, ThemeProvider } from "@mui/material/styles"
4+
import Box from "@mui/material/Box"
5+
import * as muiColors from "@mui/material/colors"
56
import SidebarBoxContainer from "../SidebarBoxContainer"
67
import colors from "../colors"
7-
import BallotIcon from "@material-ui/icons/Ballot"
8+
import BallotIcon from "@mui/icons-material/Ballot"
89
import capitalize from "lodash/capitalize"
910
import classnames from "classnames"
1011

11-
const LabelContainer = styled("div")({
12+
const theme = createTheme()
13+
const LabelContainer = styled("div")(({ theme }) => ({
1214
display: "flex",
1315
paddingTop: 4,
1416
paddingBottom: 4,
@@ -25,31 +27,31 @@ const LabelContainer = styled("div")({
2527
opacity: 1,
2628
fontWeight: "bold",
2729
},
28-
})
29-
const Circle = styled("div")({
30+
}))
31+
const Circle = styled("div")(({ theme }) => ({
3032
width: 12,
3133
height: 12,
3234
borderRadius: 12,
3335
marginRight: 8,
34-
})
35-
const Label = styled("div")({
36+
}))
37+
const Label = styled("div")(({ theme }) => ({
3638
fontSize: 11,
37-
})
38-
const DashSep = styled("div")({
39+
}))
40+
const DashSep = styled("div")(({ theme }) => ({
3941
flexGrow: 1,
4042
borderBottom: `2px dotted ${muiColors.grey[300]}`,
4143
marginLeft: 8,
4244
marginRight: 8,
43-
})
44-
const Number = styled("div")({
45+
}))
46+
const Number = styled("div")(({ theme }) => ({
4547
fontSize: 11,
4648
textAlign: "center",
4749
minWidth: 14,
4850
paddingTop: 2,
4951
paddingBottom: 2,
5052
fontWeight: "bold",
5153
color: muiColors.grey[700],
52-
})
54+
}))
5355

5456
export const ClassSelectionMenu = ({
5557
selectedCls,
@@ -73,29 +75,33 @@ export const ClassSelectionMenu = ({
7375
}, [regionClsList, selectedCls])
7476

7577
return (
76-
<SidebarBoxContainer
77-
title="Classifications"
78-
subTitle=""
79-
icon={<BallotIcon style={{ color: muiColors.grey[700] }} />}
80-
expandedByDefault
81-
>
82-
{regionClsList.map((label, index) => (
83-
<LabelContainer
84-
className={classnames({ selected: label === selectedCls })}
85-
onClick={() => onSelectCls(label)}
86-
>
87-
<Circle style={{ backgroundColor: colors[index % colors.length] }} />
88-
<Label className={classnames({ selected: label === selectedCls })}>
89-
{capitalize(label)}
90-
</Label>
91-
<DashSep />
92-
<Number className={classnames({ selected: label === selectedCls })}>
93-
{index < 9 ? `Key [${index + 1}]` : ""}
94-
</Number>
95-
</LabelContainer>
96-
))}
97-
<Box pb={2} />
98-
</SidebarBoxContainer>
78+
<ThemeProvider theme={theme}>
79+
<SidebarBoxContainer
80+
title="Classifications"
81+
subTitle=""
82+
icon={<BallotIcon style={{ color: muiColors.grey[700] }} />}
83+
expandedByDefault
84+
>
85+
{regionClsList.map((label, index) => (
86+
<LabelContainer
87+
className={classnames({ selected: label === selectedCls })}
88+
onClick={() => onSelectCls(label)}
89+
>
90+
<Circle
91+
style={{ backgroundColor: colors[index % colors.length] }}
92+
/>
93+
<Label className={classnames({ selected: label === selectedCls })}>
94+
{capitalize(label)}
95+
</Label>
96+
<DashSep />
97+
<Number className={classnames({ selected: label === selectedCls })}>
98+
{index < 9 ? `Key [${index + 1}]` : ""}
99+
</Number>
100+
</LabelContainer>
101+
))}
102+
<Box pb={2} />
103+
</SidebarBoxContainer>
104+
</ThemeProvider>
99105
)
100106
}
101107

0 commit comments

Comments
 (0)