react-image-annotate-master-custom 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Annotator/reducers/general-reducer.js +3 -0
- package/HighlightBox/index.js +60 -10
- package/ImageCanvas/index.js +9 -1
- package/package.json +90 -90
|
@@ -769,8 +769,11 @@ export default (function (state, action) {
|
|
|
769
769
|
if (((_getIn$regions = getIn(state, pathToActiveImage).regions) === null || _getIn$regions === void 0 ? void 0 : _getIn$regions.length) > 0 && ((_getIn$regions2 = getIn(state, pathToActiveImage).regions[getIn(state, pathToActiveImage).regions.length - 1]) === null || _getIn$regions2 === void 0 ? void 0 : _getIn$regions2.isNew)) {
|
|
770
770
|
var _regions = _toConsumableArray(getIn(state, pathToActiveImage).regions || []);
|
|
771
771
|
|
|
772
|
+
console.log(state, "state");
|
|
773
|
+
console.log(getIn(state, pathToActiveImage), "pathToActiveImage");
|
|
772
774
|
return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), _regions);
|
|
773
775
|
} else {
|
|
776
|
+
console.log(3333333333333);
|
|
774
777
|
state.onCreateAnno(newRegion); // customize
|
|
775
778
|
|
|
776
779
|
var _regions2 = _toConsumableArray(getIn(state, pathToActiveImage).regions || []).map(function (r) {
|
package/HighlightBox/index.js
CHANGED
|
@@ -3,6 +3,7 @@ import React from "react";
|
|
|
3
3
|
import classnames from "classnames";
|
|
4
4
|
import { makeStyles } from "@mui/styles";
|
|
5
5
|
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
|
6
|
+
import zIndex from "@mui/material/styles/zIndex";
|
|
6
7
|
var theme = createTheme();
|
|
7
8
|
var useStyles = makeStyles(function (theme) {
|
|
8
9
|
return {
|
|
@@ -14,26 +15,26 @@ var useStyles = makeStyles(function (theme) {
|
|
|
14
15
|
strokeDashoffset: 100
|
|
15
16
|
}
|
|
16
17
|
},
|
|
17
|
-
|
|
18
|
+
highlightLight: {
|
|
18
19
|
zIndex: 2,
|
|
19
20
|
transition: "opacity 500ms",
|
|
20
21
|
"&.highlighted": {
|
|
21
|
-
zIndex:
|
|
22
|
+
zIndex: 1,
|
|
22
23
|
filter: "invert(40%) sepia(50%) saturate(1928%) hue-rotate(350deg) brightness(94%) contrast(89%)" //customize
|
|
23
24
|
|
|
24
25
|
},
|
|
25
26
|
"&:not(.highlighted)": {
|
|
26
27
|
opacity: 0
|
|
27
28
|
},
|
|
28
|
-
"&:not(.highlighted):hover": {
|
|
29
|
-
|
|
30
|
-
},
|
|
29
|
+
// "&:not(.highlighted):hover": {
|
|
30
|
+
// opacity: 0.6,
|
|
31
|
+
// },
|
|
31
32
|
"& path": {
|
|
32
33
|
vectorEffect: "non-scaling-stroke",
|
|
33
34
|
strokeWidth: 2,
|
|
34
35
|
stroke: "#FFF",
|
|
35
36
|
fill: "none",
|
|
36
|
-
strokeDasharray:
|
|
37
|
+
strokeDasharray: "none",
|
|
37
38
|
animationName: "$borderDance",
|
|
38
39
|
animationDuration: "4s",
|
|
39
40
|
animationTimingFunction: "linear",
|
|
@@ -68,12 +69,36 @@ export var HighlightBox = function HighlightBox(_ref) {
|
|
|
68
69
|
height: pbox.h + 10
|
|
69
70
|
};
|
|
70
71
|
var pathD = r.type === "point" ? "M5,5 L".concat(styleCoords.width - 5, " 5L").concat(styleCoords.width - 5, " ").concat(styleCoords.height - 5, "L5 ").concat(styleCoords.height - 5, "Z") : "M5,5 L".concat(pbox.w + 5, ",5 L").concat(pbox.w + 5, ",").concat(pbox.h + 5, " L5,").concat(pbox.h + 5, " Z");
|
|
72
|
+
var styleCoordsHorizontal = r.type === "point" ? {
|
|
73
|
+
top: pbox.y + pbox.h - 12,
|
|
74
|
+
width: 600000000,
|
|
75
|
+
height: 2,
|
|
76
|
+
zIndex: 1
|
|
77
|
+
} : {
|
|
78
|
+
left: pbox.x - 5,
|
|
79
|
+
top: pbox.y - 5,
|
|
80
|
+
width: pbox.w + 10,
|
|
81
|
+
height: pbox.h + 10
|
|
82
|
+
};
|
|
83
|
+
var styleCoordsVertical = r.type === "point" ? {
|
|
84
|
+
left: pbox.x + pbox.w - 15,
|
|
85
|
+
width: 2,
|
|
86
|
+
height: 60000000,
|
|
87
|
+
zIndex: 1
|
|
88
|
+
} : {
|
|
89
|
+
left: pbox.x - 5,
|
|
90
|
+
top: pbox.y - 5,
|
|
91
|
+
width: pbox.w + 10,
|
|
92
|
+
height: pbox.h + 10
|
|
93
|
+
};
|
|
94
|
+
var pathDHorizontal = r.type === "point" ? "M1,2 H".concat(styleCoordsHorizontal.width - 5, " Z") : "M5,5 L".concat(pbox.w + 5, ",5 L").concat(pbox.w + 5, ",").concat(pbox.h + 5, " L5,").concat(pbox.h + 5, " Z");
|
|
95
|
+
var pathDVertical = r.type === "point" ? "M1,1 V".concat(styleCoordsVertical.height - 5, " Z") : "M5,5 L".concat(pbox.w + 5, ",5 L").concat(pbox.w + 5, ",").concat(pbox.h + 5, " L5,").concat(pbox.h + 5, " Z");
|
|
71
96
|
return React.createElement(ThemeProvider, {
|
|
72
97
|
theme: theme
|
|
73
98
|
}, React.createElement("svg", Object.assign({
|
|
74
|
-
key: r.id,
|
|
75
|
-
id: r.id,
|
|
76
|
-
className: classnames(classes.
|
|
99
|
+
key: "".concat(r.id),
|
|
100
|
+
id: "".concat(r.id),
|
|
101
|
+
className: classnames(classes.highlightLight, {
|
|
77
102
|
highlighted: r.highlighted
|
|
78
103
|
})
|
|
79
104
|
}, mouseEvents, !zoomWithPrimary && !dragWithPrimary ? {
|
|
@@ -99,7 +124,32 @@ export var HighlightBox = function HighlightBox(_ref) {
|
|
|
99
124
|
position: "absolute"
|
|
100
125
|
}, styleCoords)
|
|
101
126
|
}), React.createElement("path", {
|
|
102
|
-
d: pathD
|
|
127
|
+
d: pathD,
|
|
128
|
+
style: {
|
|
129
|
+
strokeDasharray: 5
|
|
130
|
+
}
|
|
131
|
+
})), React.createElement("svg", {
|
|
132
|
+
key: "".concat(r.id, "-horizontal"),
|
|
133
|
+
id: "".concat(r.id, "-horizontal"),
|
|
134
|
+
className: classnames(classes.highlightLight, {
|
|
135
|
+
highlighted: r.highlighted
|
|
136
|
+
}),
|
|
137
|
+
style: _objectSpread({
|
|
138
|
+
position: "absolute"
|
|
139
|
+
}, styleCoordsHorizontal)
|
|
140
|
+
}, React.createElement("path", {
|
|
141
|
+
d: pathDHorizontal
|
|
142
|
+
})), React.createElement("svg", {
|
|
143
|
+
key: "".concat(r.id, "-vertical"),
|
|
144
|
+
id: "".concat(r.id, "-vertical"),
|
|
145
|
+
className: classnames(classes.highlightLight, {
|
|
146
|
+
highlighted: r.highlighted
|
|
147
|
+
}),
|
|
148
|
+
style: _objectSpread({
|
|
149
|
+
position: "absolute"
|
|
150
|
+
}, styleCoordsVertical)
|
|
151
|
+
}, React.createElement("path", {
|
|
152
|
+
d: pathDVertical
|
|
103
153
|
})));
|
|
104
154
|
};
|
|
105
155
|
export default HighlightBox;
|
package/ImageCanvas/index.js
CHANGED
|
@@ -22,6 +22,7 @@ import VideoOrImageCanvasBackground from "../VideoOrImageCanvasBackground";
|
|
|
22
22
|
import useEventCallback from "use-event-callback";
|
|
23
23
|
import RegionShapes from "../RegionShapes";
|
|
24
24
|
import useWasdMode from "./use-wasd-mode";
|
|
25
|
+
import { useSettings } from "../SettingsProvider";
|
|
25
26
|
var theme = createTheme();
|
|
26
27
|
var useStyles = makeStyles(function (theme) {
|
|
27
28
|
return styles;
|
|
@@ -137,6 +138,7 @@ export var ImageCanvas = function ImageCanvas(_ref2) {
|
|
|
137
138
|
|
|
138
139
|
var maskImages = useRef({});
|
|
139
140
|
var windowSize = useWindowSize();
|
|
141
|
+
var settings = useSettings();
|
|
140
142
|
var getLatestMat = useEventCallback(function () {
|
|
141
143
|
return mat;
|
|
142
144
|
});
|
|
@@ -303,7 +305,13 @@ export var ImageCanvas = function ImageCanvas(_ref2) {
|
|
|
303
305
|
position: "relative",
|
|
304
306
|
overflow: "hidden",
|
|
305
307
|
cursor: createWithPrimary ? "crosshair" : dragging ? "grabbing" : dragWithPrimary ? "grab" : zoomWithPrimary ? mat.a < 1 ? "zoom-out" : "zoom-in" : undefined
|
|
306
|
-
}
|
|
308
|
+
} // onMouseLeave={()=> {
|
|
309
|
+
// settings.changeSetting("showCrosshairs" , false)
|
|
310
|
+
// }}
|
|
311
|
+
// onMouseEnter={()=> {
|
|
312
|
+
// settings.changeSetting("showCrosshairs", true)
|
|
313
|
+
// }}
|
|
314
|
+
|
|
307
315
|
}, showCrosshairs && React.createElement(Crosshairs, {
|
|
308
316
|
key: "crossHairs",
|
|
309
317
|
mousePosition: mousePosition
|
package/package.json
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
2
|
+
"name": "react-image-annotate-master-custom",
|
|
3
|
+
"version": "0.0.4",
|
|
4
|
+
"dependencies": {
|
|
5
|
+
"@fortawesome/fontawesome-svg-core": "^1.2.12",
|
|
6
|
+
"@fortawesome/free-solid-svg-icons": "^5.6.3",
|
|
7
|
+
"@fortawesome/react-fontawesome": "^0.1.3",
|
|
8
|
+
"@mui/icons-material": "^5.2.1",
|
|
9
|
+
"@mui/material": "^5.2.3",
|
|
10
|
+
"@mui/styles": "^5.2.3",
|
|
11
|
+
"@semantic-release/git": "^9.0.0",
|
|
12
|
+
"autoseg": "^0.0.12",
|
|
13
|
+
"clamp": "^1.0.1",
|
|
14
|
+
"color-alpha": "^1.0.4",
|
|
15
|
+
"get-image-data": "^3.0.1",
|
|
16
|
+
"material-survey": "^2.1.0",
|
|
17
|
+
"mmgc1-cpp": "^1.0.50",
|
|
18
|
+
"moment": "^2.23.0",
|
|
19
|
+
"react": "^17.0.2",
|
|
20
|
+
"react-dom": "^17.0.2",
|
|
21
|
+
"react-full-screen": "^0.3.1",
|
|
22
|
+
"react-hotkeys": "^2.0.0",
|
|
23
|
+
"react-json-view": "^1.19.1",
|
|
24
|
+
"react-markdown": "^4.0.6",
|
|
25
|
+
"react-material-workspace-layout": "^1.0.10",
|
|
26
|
+
"react-monaco-editor": "^0.25.1",
|
|
27
|
+
"react-remove-scroll": "^2.0.4",
|
|
28
|
+
"react-select": "^3.0.8",
|
|
29
|
+
"react-syntax-highlighter": "^12.2.1",
|
|
30
|
+
"react-use": "^13.27.0",
|
|
31
|
+
"react-use-measure": "^2.0.0",
|
|
32
|
+
"seamless-immutable": "^7.1.4",
|
|
33
|
+
"shallow-equal": "^1.2.1",
|
|
34
|
+
"storybook": "^5.3.14",
|
|
35
|
+
"styled-components": "^5.2.1",
|
|
36
|
+
"transformation-matrix-js": "^2.7.6",
|
|
37
|
+
"use-event-callback": "^0.1.0",
|
|
38
|
+
"use-key-hook": "^1.3.0"
|
|
39
|
+
},
|
|
40
|
+
"peerDependencies": {
|
|
41
|
+
"react": "^17.0.0",
|
|
42
|
+
"react-dom": "^17.0.0"
|
|
43
|
+
},
|
|
44
|
+
"homepage": "https://github.com/Novus-Solutions/react-image-annotate-master-custom.git",
|
|
45
|
+
"repository": {
|
|
46
|
+
"type": "git",
|
|
47
|
+
"url": "https://github.com/Novus-Solutions/react-image-annotate-master-custom.git"
|
|
48
|
+
},
|
|
49
|
+
"scripts": {
|
|
50
|
+
"start": "react-scripts start",
|
|
51
|
+
"test": "react-scripts test",
|
|
52
|
+
"eject": "react-scripts eject",
|
|
53
|
+
"storybook": "start-storybook -p 9090 -s public",
|
|
54
|
+
"build": "npm run build:babel && cp ./package.json ./dist/package.json && cp ./README.md ./dist/README.md",
|
|
55
|
+
"dist": "npm run build && cd dist && npm publish",
|
|
56
|
+
"build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js",
|
|
57
|
+
"build-storybook": "build-storybook",
|
|
58
|
+
"build:gh-pages": "CI=false react-scripts build && mkdir build/demo && cp build/index.html build/demo/index.html",
|
|
59
|
+
"gh-pages": "npm run build:gh-pages && gh-pages -d build",
|
|
60
|
+
"prettier": "prettier --write \"src/**/*.js\"",
|
|
61
|
+
"prettier:test": "prettier --check \"src/**/*.js\""
|
|
62
|
+
},
|
|
63
|
+
"eslintConfig": {
|
|
64
|
+
"extends": "react-app"
|
|
65
|
+
},
|
|
66
|
+
"browserslist": [
|
|
67
|
+
">0.2%",
|
|
68
|
+
"not dead",
|
|
69
|
+
"not ie <= 11",
|
|
70
|
+
"not op_mini all"
|
|
71
|
+
],
|
|
72
|
+
"devDependencies": {
|
|
73
|
+
"@babel/cli": "^7.2.3",
|
|
74
|
+
"@babel/core": "^7.2.2",
|
|
75
|
+
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
|
|
76
|
+
"@storybook/addon-actions": "^5.3.14",
|
|
77
|
+
"@storybook/addon-links": "^5.3.14",
|
|
78
|
+
"@storybook/addons": "^5.3.14",
|
|
79
|
+
"@storybook/react": "^5.3.14",
|
|
80
|
+
"babel-loader": "^8.0.5",
|
|
81
|
+
"babel-preset-react-app": "^7.0.0",
|
|
82
|
+
"gh-pages": "^2.0.1",
|
|
83
|
+
"prettier": "^2.5.1",
|
|
84
|
+
"raw.macro": "^0.3.0",
|
|
85
|
+
"react-github-btn": "^1.1.1",
|
|
86
|
+
"react-scripts": "^3.4.1"
|
|
87
|
+
},
|
|
88
|
+
"prettier": {
|
|
89
|
+
"semi": false
|
|
90
|
+
}
|
|
91
|
+
}
|