react-image-annotate-master-custom 0.0.1
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/index.js +164 -0
- package/Annotator/reducers/combine-reducers.js +14 -0
- package/Annotator/reducers/convert-expanding-line-to-polygon.js +73 -0
- package/Annotator/reducers/fix-twisted.js +4 -0
- package/Annotator/reducers/general-reducer.js +1073 -0
- package/Annotator/reducers/get-active-image.js +27 -0
- package/Annotator/reducers/get-implied-video-regions.js +180 -0
- package/Annotator/reducers/history-handler.js +38 -0
- package/Annotator/reducers/image-reducer.js +20 -0
- package/Annotator/reducers/video-reducer.js +88 -0
- package/ClassSelectionMenu/index.js +135 -0
- package/Crosshairs/index.js +53 -0
- package/DebugSidebarBox/index.js +20 -0
- package/DemoSite/Editor.js +194 -0
- package/DemoSite/ErrorBoundaryDialog.js +64 -0
- package/DemoSite/index.js +69 -0
- package/FullImageSegmentationAnnotator/index.js +7 -0
- package/HighlightBox/index.js +105 -0
- package/HistorySidebarBox/index.js +71 -0
- package/ImageCanvas/index.js +428 -0
- package/ImageCanvas/region-tools.js +165 -0
- package/ImageCanvas/styles.js +31 -0
- package/ImageCanvas/use-mouse.js +180 -0
- package/ImageCanvas/use-project-box.js +27 -0
- package/ImageCanvas/use-wasd-mode.js +62 -0
- package/ImageMask/index.js +133 -0
- package/ImageMask/load-image.js +25 -0
- package/ImageSelectorSidebarBox/index.js +60 -0
- package/KeyframeTimeline/get-time-string.js +27 -0
- package/KeyframeTimeline/index.js +233 -0
- package/KeyframesSelectorSidebarBox/index.js +93 -0
- package/LandingPage/index.js +159 -0
- package/MainLayout/icon-dictionary.js +104 -0
- package/MainLayout/index.js +359 -0
- package/MainLayout/styles.js +25 -0
- package/MainLayout/types.js +0 -0
- package/MainLayout/use-implied-video-regions.js +13 -0
- package/PointDistances/index.js +73 -0
- package/PreventScrollToParents/index.js +51 -0
- package/README.md +101 -0
- package/RegionLabel/index.js +197 -0
- package/RegionLabel/styles.js +48 -0
- package/RegionSelectAndTransformBoxes/index.js +166 -0
- package/RegionSelectorSidebarBox/index.js +248 -0
- package/RegionSelectorSidebarBox/styles.js +53 -0
- package/RegionShapes/index.js +275 -0
- package/RegionTags/index.js +138 -0
- package/SettingsDialog/index.js +52 -0
- package/SettingsProvider/index.js +53 -0
- package/Shortcuts/ShortcutField.js +46 -0
- package/Shortcuts/index.js +133 -0
- package/ShortcutsManager/index.js +155 -0
- package/Sidebar/index.js +69 -0
- package/SidebarBoxContainer/index.js +93 -0
- package/SmallToolButton/index.js +42 -0
- package/TagsSidebarBox/index.js +105 -0
- package/TaskDescriptionSidebarBox/index.js +58 -0
- package/Theme/index.js +30 -0
- package/VideoOrImageCanvasBackground/index.js +151 -0
- package/colors.js +14 -0
- package/hooks/use-event-callback.js +10 -0
- package/hooks/use-exclude-pattern.js +24 -0
- package/hooks/use-load-image.js +26 -0
- package/hooks/use-window-size.js +46 -0
- package/hooks/xpattern.js +1 -0
- package/index.js +3 -0
- package/lib.js +3 -0
- package/package.json +91 -0
- package/stories.js +5 -0
- package/utils/get-from-local-storage.js +7 -0
- package/utils/get-hotkey-help-text.js +9 -0
- package/utils/get-landmarks-with-transform.js +40 -0
- package/utils/set-in-local-storage.js +3 -0
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
+
import React, { useEffect, useReducer } from "react";
|
|
4
|
+
import makeImmutable, { without } from "seamless-immutable";
|
|
5
|
+
import MainLayout from "../MainLayout";
|
|
6
|
+
import SettingsProvider from "../SettingsProvider";
|
|
7
|
+
import combineReducers from "./reducers/combine-reducers.js";
|
|
8
|
+
import generalReducer from "./reducers/general-reducer.js";
|
|
9
|
+
import getFromLocalStorage from "../utils/get-from-local-storage";
|
|
10
|
+
import historyHandler from "./reducers/history-handler.js";
|
|
11
|
+
import imageReducer from "./reducers/image-reducer.js";
|
|
12
|
+
import useEventCallback from "use-event-callback";
|
|
13
|
+
import videoReducer from "./reducers/video-reducer.js";
|
|
14
|
+
export var Annotator = function Annotator(_ref) {
|
|
15
|
+
var images = _ref.images,
|
|
16
|
+
allowedArea = _ref.allowedArea,
|
|
17
|
+
_ref$selectedImage = _ref.selectedImage,
|
|
18
|
+
selectedImage = _ref$selectedImage === void 0 ? images && images.length > 0 ? 0 : undefined : _ref$selectedImage,
|
|
19
|
+
showPointDistances = _ref.showPointDistances,
|
|
20
|
+
pointDistancePrecision = _ref.pointDistancePrecision,
|
|
21
|
+
_ref$showTags = _ref.showTags,
|
|
22
|
+
showTags = _ref$showTags === void 0 ? getFromLocalStorage("showTags", true) : _ref$showTags,
|
|
23
|
+
_ref$enabledTools = _ref.enabledTools,
|
|
24
|
+
enabledTools = _ref$enabledTools === void 0 ? ["select", "create-point", "create-box", "create-polygon", "create-line", "create-expanding-line", "show-mask"] : _ref$enabledTools,
|
|
25
|
+
_ref$selectedTool = _ref.selectedTool,
|
|
26
|
+
selectedTool = _ref$selectedTool === void 0 ? "select" : _ref$selectedTool,
|
|
27
|
+
_ref$regionTagList = _ref.regionTagList,
|
|
28
|
+
regionTagList = _ref$regionTagList === void 0 ? [] : _ref$regionTagList,
|
|
29
|
+
_ref$regionClsList = _ref.regionClsList,
|
|
30
|
+
regionClsList = _ref$regionClsList === void 0 ? [] : _ref$regionClsList,
|
|
31
|
+
_ref$imageTagList = _ref.imageTagList,
|
|
32
|
+
imageTagList = _ref$imageTagList === void 0 ? [] : _ref$imageTagList,
|
|
33
|
+
_ref$imageClsList = _ref.imageClsList,
|
|
34
|
+
imageClsList = _ref$imageClsList === void 0 ? [] : _ref$imageClsList,
|
|
35
|
+
_ref$keyframes = _ref.keyframes,
|
|
36
|
+
keyframes = _ref$keyframes === void 0 ? {} : _ref$keyframes,
|
|
37
|
+
_ref$taskDescription = _ref.taskDescription,
|
|
38
|
+
taskDescription = _ref$taskDescription === void 0 ? "" : _ref$taskDescription,
|
|
39
|
+
_ref$fullImageSegment = _ref.fullImageSegmentationMode,
|
|
40
|
+
fullImageSegmentationMode = _ref$fullImageSegment === void 0 ? false : _ref$fullImageSegment,
|
|
41
|
+
RegionEditLabel = _ref.RegionEditLabel,
|
|
42
|
+
videoSrc = _ref.videoSrc,
|
|
43
|
+
_ref$videoTime = _ref.videoTime,
|
|
44
|
+
videoTime = _ref$videoTime === void 0 ? 0 : _ref$videoTime,
|
|
45
|
+
videoName = _ref.videoName,
|
|
46
|
+
onExit = _ref.onExit,
|
|
47
|
+
onNextImage = _ref.onNextImage,
|
|
48
|
+
onPrevImage = _ref.onPrevImage,
|
|
49
|
+
keypointDefinitions = _ref.keypointDefinitions,
|
|
50
|
+
_ref$autoSegmentation = _ref.autoSegmentationOptions,
|
|
51
|
+
autoSegmentationOptions = _ref$autoSegmentation === void 0 ? {
|
|
52
|
+
type: "autoseg"
|
|
53
|
+
} : _ref$autoSegmentation,
|
|
54
|
+
hideHeader = _ref.hideHeader,
|
|
55
|
+
hideHeaderText = _ref.hideHeaderText,
|
|
56
|
+
hideNext = _ref.hideNext,
|
|
57
|
+
hidePrev = _ref.hidePrev,
|
|
58
|
+
hideClone = _ref.hideClone,
|
|
59
|
+
hideRegionLabel = _ref.hideRegionLabel,
|
|
60
|
+
hideSettings = _ref.hideSettings,
|
|
61
|
+
hideFullScreen = _ref.hideFullScreen,
|
|
62
|
+
hideSave = _ref.hideSave,
|
|
63
|
+
hideRightSidebar = _ref.hideRightSidebar,
|
|
64
|
+
hideLeftSidebar = _ref.hideLeftSidebar,
|
|
65
|
+
allowComments = _ref.allowComments,
|
|
66
|
+
onCreateAnno = _ref.onCreateAnno,
|
|
67
|
+
onClickAnno = _ref.onClickAnno;
|
|
68
|
+
|
|
69
|
+
if (typeof selectedImage === "string") {
|
|
70
|
+
selectedImage = (images || []).findIndex(function (img) {
|
|
71
|
+
return img.src === selectedImage;
|
|
72
|
+
});
|
|
73
|
+
if (selectedImage === -1) selectedImage = undefined;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
var annotationType = images ? "image" : "video";
|
|
77
|
+
|
|
78
|
+
var _useReducer = useReducer(historyHandler(combineReducers(annotationType === "image" ? imageReducer : videoReducer, generalReducer)), makeImmutable(_objectSpread({
|
|
79
|
+
annotationType: annotationType,
|
|
80
|
+
showTags: showTags,
|
|
81
|
+
allowedArea: allowedArea,
|
|
82
|
+
showPointDistances: showPointDistances,
|
|
83
|
+
pointDistancePrecision: pointDistancePrecision,
|
|
84
|
+
selectedTool: selectedTool,
|
|
85
|
+
fullImageSegmentationMode: fullImageSegmentationMode,
|
|
86
|
+
autoSegmentationOptions: autoSegmentationOptions,
|
|
87
|
+
mode: null,
|
|
88
|
+
taskDescription: taskDescription,
|
|
89
|
+
showMask: true,
|
|
90
|
+
labelImages: imageClsList.length > 0 || imageTagList.length > 0,
|
|
91
|
+
regionClsList: regionClsList,
|
|
92
|
+
regionTagList: regionTagList,
|
|
93
|
+
imageClsList: imageClsList,
|
|
94
|
+
imageTagList: imageTagList,
|
|
95
|
+
currentVideoTime: videoTime,
|
|
96
|
+
enabledTools: enabledTools,
|
|
97
|
+
history: [],
|
|
98
|
+
videoName: videoName,
|
|
99
|
+
keypointDefinitions: keypointDefinitions,
|
|
100
|
+
allowComments: allowComments,
|
|
101
|
+
onCreateAnno: onCreateAnno,
|
|
102
|
+
onClickAnno: onClickAnno
|
|
103
|
+
}, annotationType === "image" ? {
|
|
104
|
+
selectedImage: selectedImage,
|
|
105
|
+
images: images,
|
|
106
|
+
selectedImageFrameTime: images && images.length > 0 ? images[0].frameTime : undefined
|
|
107
|
+
} : {
|
|
108
|
+
videoSrc: videoSrc,
|
|
109
|
+
keyframes: keyframes
|
|
110
|
+
}))),
|
|
111
|
+
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
112
|
+
state = _useReducer2[0],
|
|
113
|
+
dispatchToReducer = _useReducer2[1];
|
|
114
|
+
|
|
115
|
+
var dispatch = useEventCallback(function (action) {
|
|
116
|
+
if (action.type === "HEADER_BUTTON_CLICKED") {
|
|
117
|
+
if (["Exit", "Done", "Save", "Complete"].includes(action.buttonName)) {
|
|
118
|
+
return onExit(without(state, "history"));
|
|
119
|
+
} else if (action.buttonName === "Next" && onNextImage) {
|
|
120
|
+
return onNextImage(without(state, "history"));
|
|
121
|
+
} else if (action.buttonName === "Prev" && onPrevImage) {
|
|
122
|
+
return onPrevImage(without(state, "history"));
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
dispatchToReducer(action);
|
|
127
|
+
});
|
|
128
|
+
var onRegionClassAdded = useEventCallback(function (cls) {
|
|
129
|
+
dispatchToReducer({
|
|
130
|
+
type: "ON_CLS_ADDED",
|
|
131
|
+
cls: cls
|
|
132
|
+
});
|
|
133
|
+
});
|
|
134
|
+
useEffect(function () {
|
|
135
|
+
if (selectedImage === undefined) return;
|
|
136
|
+
dispatchToReducer({
|
|
137
|
+
type: "SELECT_IMAGE",
|
|
138
|
+
imageIndex: selectedImage,
|
|
139
|
+
image: state.images[selectedImage]
|
|
140
|
+
});
|
|
141
|
+
}, [selectedImage, state.images]);
|
|
142
|
+
if (!images && !videoSrc) return 'Missing required prop "images" or "videoSrc"';
|
|
143
|
+
return React.createElement(SettingsProvider, null, React.createElement(MainLayout, {
|
|
144
|
+
RegionEditLabel: RegionEditLabel,
|
|
145
|
+
alwaysShowNextButton: Boolean(onNextImage),
|
|
146
|
+
alwaysShowPrevButton: Boolean(onPrevImage),
|
|
147
|
+
state: state,
|
|
148
|
+
dispatch: dispatch,
|
|
149
|
+
onRegionClassAdded: onRegionClassAdded,
|
|
150
|
+
hideHeader: hideHeader,
|
|
151
|
+
hideHeaderText: hideHeaderText,
|
|
152
|
+
hideNext: hideNext,
|
|
153
|
+
hidePrev: hidePrev,
|
|
154
|
+
hideClone: hideClone,
|
|
155
|
+
hideRegionLabel: hideRegionLabel,
|
|
156
|
+
hideSettings: hideSettings,
|
|
157
|
+
hideFullScreen: hideFullScreen,
|
|
158
|
+
hideSave: hideSave,
|
|
159
|
+
hideRightSidebar: hideRightSidebar //customize
|
|
160
|
+
,
|
|
161
|
+
hideLeftSidebar: hideLeftSidebar
|
|
162
|
+
}));
|
|
163
|
+
};
|
|
164
|
+
export default Annotator;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export default (function () {
|
|
2
|
+
for (var _len = arguments.length, reducers = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
3
|
+
reducers[_key] = arguments[_key];
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
return function (state, action) {
|
|
7
|
+
for (var _i = 0, _reducers = reducers; _i < _reducers.length; _i++) {
|
|
8
|
+
var reducer = _reducers[_i];
|
|
9
|
+
state = reducer(state, action);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
return state;
|
|
13
|
+
};
|
|
14
|
+
});
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
+
|
|
4
|
+
function clamp(num, min, max) {
|
|
5
|
+
return num <= min ? min : num >= max ? max : num;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export default (function (expandingLine) {
|
|
9
|
+
var expandingWidth = expandingLine.expandingWidth || 0.005;
|
|
10
|
+
var pointPairs = expandingLine.points.map(function (_ref, i) {
|
|
11
|
+
var x = _ref.x,
|
|
12
|
+
y = _ref.y,
|
|
13
|
+
angle = _ref.angle,
|
|
14
|
+
width = _ref.width;
|
|
15
|
+
|
|
16
|
+
if (!angle) {
|
|
17
|
+
var n = expandingLine.points[clamp(i + 1, 0, expandingLine.points.length - 1)];
|
|
18
|
+
var p = expandingLine.points[clamp(i - 1, 0, expandingLine.points.length - 1)];
|
|
19
|
+
angle = Math.atan2(p.x - n.x, p.y - n.y) + Math.PI / 2;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
var dx = Math.sin(angle) * (width || expandingWidth) / 2;
|
|
23
|
+
var dy = Math.cos(angle) * (width || expandingWidth) / 2;
|
|
24
|
+
return [{
|
|
25
|
+
x: x + dx,
|
|
26
|
+
y: y + dy
|
|
27
|
+
}, {
|
|
28
|
+
x: x - dx,
|
|
29
|
+
y: y - dy
|
|
30
|
+
}];
|
|
31
|
+
});
|
|
32
|
+
var firstSection = pointPairs.map(function (_ref2) {
|
|
33
|
+
var _ref3 = _slicedToArray(_ref2, 2),
|
|
34
|
+
p1 = _ref3[0],
|
|
35
|
+
p2 = _ref3[1];
|
|
36
|
+
|
|
37
|
+
return p1;
|
|
38
|
+
});
|
|
39
|
+
var secondSection = pointPairs.map(function (_ref4) {
|
|
40
|
+
var _ref5 = _slicedToArray(_ref4, 2),
|
|
41
|
+
p1 = _ref5[0],
|
|
42
|
+
p2 = _ref5[1];
|
|
43
|
+
|
|
44
|
+
return p2;
|
|
45
|
+
}).asMutable();
|
|
46
|
+
secondSection.reverse();
|
|
47
|
+
var newPoints = firstSection.concat(secondSection).map(function (_ref6) {
|
|
48
|
+
var x = _ref6.x,
|
|
49
|
+
y = _ref6.y;
|
|
50
|
+
return [x, y];
|
|
51
|
+
});
|
|
52
|
+
return _objectSpread({}, expandingLine, {
|
|
53
|
+
type: "polygon",
|
|
54
|
+
open: false,
|
|
55
|
+
points: newPoints,
|
|
56
|
+
unfinished: undefined,
|
|
57
|
+
candidatePoint: undefined // let { expandingWidth = 0.005, points } = region
|
|
58
|
+
// expandingWidth = points.slice(-1)[0].width || expandingWidth
|
|
59
|
+
// const lastPoint = points.slice(-1)[0]
|
|
60
|
+
// return (
|
|
61
|
+
// <>
|
|
62
|
+
// <polygon
|
|
63
|
+
// points={
|
|
64
|
+
// .map((p) => `${p.x * iw} ${p.y * ih}`)
|
|
65
|
+
// .join(" ")}
|
|
66
|
+
// return {
|
|
67
|
+
// ...expandingLine,
|
|
68
|
+
// unfinished: undefined,
|
|
69
|
+
// candidatePoint: undefined,
|
|
70
|
+
// }
|
|
71
|
+
|
|
72
|
+
});
|
|
73
|
+
});
|