@searpent/react-image-annotate 2.0.75 → 2.0.76
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/.babelrc +6 -0
- package/.env +1 -0
- package/.flowconfig +2 -0
- package/.github/workflows/release-on-master.yml +32 -0
- package/.github/workflows/test.yml +16 -0
- package/.prettierrc +3 -0
- package/.releaserc.js +18 -0
- package/.storybook/addons.js +2 -0
- package/.storybook/config.js +16 -0
- package/LICENSE +21 -0
- package/package.json +1 -1
- package/public/favicon.ico +0 -0
- package/public/index.html +38 -0
- package/src/Annotator/bike-pic.png +0 -0
- package/src/Annotator/bike-pic2.png +0 -0
- package/src/Annotator/dab-keyframes.story.json +1 -0
- package/src/Annotator/exampleImages.js +48 -0
- package/src/Annotator/examplePhotos.js +7603 -0
- package/src/Annotator/index.js +380 -0
- package/src/Annotator/index.story.js +877 -0
- package/src/Annotator/poses.story.js +150 -0
- package/src/Annotator/reducers/combine-reducers.js +7 -0
- package/src/Annotator/reducers/convert-expanding-line-to-polygon.js +53 -0
- package/{Annotator → src/Annotator}/reducers/fix-twisted.js +5 -3
- package/src/Annotator/reducers/general-reducer.js +1228 -0
- package/src/Annotator/reducers/get-active-image.js +21 -0
- package/src/Annotator/reducers/get-implied-video-regions.js +115 -0
- package/src/Annotator/reducers/history-handler.js +60 -0
- package/src/Annotator/reducers/image-reducer.js +23 -0
- package/src/Annotator/reducers/video-reducer.js +85 -0
- package/src/Annotator/video.story.js +51 -0
- package/src/ClassSelectionMenu/index.js +112 -0
- package/src/Crosshairs/index.js +64 -0
- package/src/DebugSidebarBox/index.js +36 -0
- package/src/DemoSite/Editor.js +235 -0
- package/src/DemoSite/ErrorBoundaryDialog.js +34 -0
- package/src/DemoSite/index.js +41 -0
- package/src/DemoSite/index.story.js +10 -0
- package/src/DemoSite/simple-segmentation-example.json +572 -0
- package/src/Editor/annotation-plugin/annotation.js +536 -0
- package/src/Editor/index.js +50 -0
- package/src/Editor/readOnly.js +21 -0
- package/{Editor → src/Editor}/tools.js +3 -2
- package/src/Errorer/index.js +13 -0
- package/src/FullImageSegmentationAnnotator/hard1.story.jpg +0 -0
- package/src/FullImageSegmentationAnnotator/hard2.story.jpg +0 -0
- package/src/FullImageSegmentationAnnotator/hard3.story.jpg +0 -0
- package/src/FullImageSegmentationAnnotator/index.js +7 -0
- package/src/FullImageSegmentationAnnotator/index.story.js +177 -0
- package/src/FullImageSegmentationAnnotator/orange.story.png +0 -0
- package/src/GroupSelectorSidebarBox/index.js +48 -0
- package/src/GroupsEditorSidebarBox/index.js +108 -0
- package/src/HelpSidebarBox/index.js +43 -0
- package/src/HighlightBox/index.js +143 -0
- package/src/HistorySidebarBox/index.js +78 -0
- package/src/ImageCanvas/dancing-man.story.jpg +0 -0
- package/src/ImageCanvas/index.js +515 -0
- package/src/ImageCanvas/index.story.js +314 -0
- package/src/ImageCanvas/mouse_mask.story.png +0 -0
- package/src/ImageCanvas/region-tools.js +171 -0
- package/src/ImageCanvas/seves_desk.story.jpg +0 -0
- package/{ImageCanvas → src/ImageCanvas}/styles.js +8 -12
- package/src/ImageCanvas/use-mouse.js +168 -0
- package/src/ImageCanvas/use-project-box.js +23 -0
- package/src/ImageCanvas/use-wasd-mode.js +50 -0
- package/src/ImageMask/index.js +127 -0
- package/src/ImageMask/load-image.js +32 -0
- package/src/ImageSelectorSidebarBox/index.js +54 -0
- package/src/KeyframeTimeline/get-time-string.js +25 -0
- package/src/KeyframeTimeline/index.js +223 -0
- package/src/KeyframesSelectorSidebarBox/index.js +93 -0
- package/src/LandingPage/content.md +57 -0
- package/src/LandingPage/github-markdown.css +964 -0
- package/src/LandingPage/index.js +147 -0
- package/src/Locker/index.js +13 -0
- package/src/MainLayout/RightSidebarItemsWrapper.js +21 -0
- package/src/MainLayout/icon-dictionary.js +79 -0
- package/src/MainLayout/index.js +564 -0
- package/src/MainLayout/index.story.js +240 -0
- package/{MainLayout → src/MainLayout}/styles.js +7 -6
- package/src/MainLayout/types.js +171 -0
- package/src/MainLayout/use-implied-video-regions.js +17 -0
- package/src/MetadataEditorSidebarBox/index.js +160 -0
- package/src/PageSelector/index.js +159 -0
- package/src/PointDistances/index.js +90 -0
- package/src/PreventScrollToParents/index.js +48 -0
- package/src/PreventScrollToParents/index.story.js +23 -0
- package/src/RegionLabel/index.js +236 -0
- package/{RegionLabel → src/RegionLabel}/styles.js +15 -12
- package/src/RegionSelectAndTransformBoxes/index.js +236 -0
- package/src/RegionSelectorSidebarBox/index.js +220 -0
- package/{RegionSelectorSidebarBox → src/RegionSelectorSidebarBox}/styles.js +14 -13
- package/src/RegionShapes/index.js +254 -0
- package/src/RegionTags/index.js +136 -0
- package/src/SettingsDialog/index.js +58 -0
- package/src/SettingsProvider/index.js +57 -0
- package/src/Shortcuts/ShortcutField.js +44 -0
- package/src/Shortcuts/index.js +129 -0
- package/src/ShortcutsManager/index.js +162 -0
- package/src/Sidebar/index.js +117 -0
- package/src/SidebarBoxContainer/index.js +93 -0
- package/src/SmallToolButton/index.js +57 -0
- package/src/TagsSidebarBox/index.js +93 -0
- package/src/TaskDescriptionSidebarBox/index.js +43 -0
- package/src/Theme/index.js +36 -0
- package/src/VideoOrImageCanvasBackground/index.js +170 -0
- package/src/colors.js +32 -0
- package/src/hooks/use-colors.js +75 -0
- package/src/hooks/use-event-callback.js +11 -0
- package/src/hooks/use-exclude-pattern.js +27 -0
- package/src/hooks/use-load-image.js +21 -0
- package/src/hooks/use-window-size.js +46 -0
- package/{hooks → src/hooks}/xpattern.js +1 -1
- package/src/hooks/xpattern.png +0 -0
- package/src/index.js +18 -0
- package/src/lib.js +7 -0
- package/src/screenshot.png +0 -0
- package/src/site.css +5 -0
- package/src/stories.js +2 -0
- package/src/utils/blocks-to-article.js +61 -0
- package/{utils → src/utils}/blocks-to-article.test.js +8 -5
- package/{utils → src/utils}/default-locked-until.js +1 -2
- package/{utils → src/utils}/filter-only-unique.js +1 -1
- package/src/utils/get-from-local-storage.js +7 -0
- package/src/utils/get-hotkey-help-text.js +11 -0
- package/src/utils/get-landmarks-with-transform.js +23 -0
- package/src/utils/photosToImages.js +67 -0
- package/src/utils/regions-groups.js +19 -0
- package/src/utils/regions-to-blocks.js +16 -0
- package/src/utils/saveable-actions-enum.js +5 -0
- package/src/utils/set-in-local-storage.js +6 -0
- package/src/utils/sleep.js +3 -0
- package/src/utils/uuid-to-hash.js +5 -0
- package/Annotator/exampleImages.js +0 -41
- package/Annotator/examplePhotos.js +0 -6980
- package/Annotator/index.js +0 -417
- package/Annotator/reducers/combine-reducers.js +0 -14
- package/Annotator/reducers/convert-expanding-line-to-polygon.js +0 -73
- package/Annotator/reducers/general-reducer.js +0 -1430
- package/Annotator/reducers/get-active-image.js +0 -27
- package/Annotator/reducers/get-implied-video-regions.js +0 -180
- package/Annotator/reducers/history-handler.js +0 -38
- package/Annotator/reducers/image-reducer.js +0 -20
- package/Annotator/reducers/video-reducer.js +0 -88
- package/ClassSelectionMenu/index.js +0 -140
- package/Crosshairs/index.js +0 -53
- package/DebugSidebarBox/index.js +0 -20
- package/DemoSite/Editor.js +0 -194
- package/DemoSite/ErrorBoundaryDialog.js +0 -64
- package/DemoSite/index.js +0 -40
- package/Editor/annotation-plugin/annotation.js +0 -647
- package/Editor/index.js +0 -93
- package/Editor/readOnly.js +0 -73
- package/Errorer/index.js +0 -11
- package/FullImageSegmentationAnnotator/index.js +0 -7
- package/GroupSelectorSidebarBox/index.js +0 -63
- package/GroupsEditorSidebarBox/index.js +0 -138
- package/HelpSidebarBox/index.js +0 -58
- package/HighlightBox/index.js +0 -102
- package/HistorySidebarBox/index.js +0 -71
- package/ImageCanvas/index.js +0 -441
- package/ImageCanvas/region-tools.js +0 -165
- package/ImageCanvas/use-mouse.js +0 -180
- package/ImageCanvas/use-project-box.js +0 -27
- package/ImageCanvas/use-wasd-mode.js +0 -62
- package/ImageMask/index.js +0 -133
- package/ImageMask/load-image.js +0 -25
- package/ImageSelectorSidebarBox/index.js +0 -60
- package/KeyframeTimeline/get-time-string.js +0 -27
- package/KeyframeTimeline/index.js +0 -233
- package/KeyframesSelectorSidebarBox/index.js +0 -93
- package/LandingPage/index.js +0 -159
- package/Locker/index.js +0 -11
- package/MainLayout/RightSidebarItemsWrapper.js +0 -19
- package/MainLayout/icon-dictionary.js +0 -104
- package/MainLayout/index.js +0 -526
- package/MainLayout/types.js +0 -0
- package/MainLayout/use-implied-video-regions.js +0 -13
- package/MetadataEditorSidebarBox/index.js +0 -231
- package/PageSelector/index.js +0 -180
- package/PointDistances/index.js +0 -73
- package/PreventScrollToParents/index.js +0 -51
- package/RegionLabel/index.js +0 -232
- package/RegionSelectAndTransformBoxes/index.js +0 -169
- package/RegionSelectorSidebarBox/index.js +0 -254
- package/RegionShapes/index.js +0 -294
- package/RegionTags/index.js +0 -144
- package/SettingsDialog/index.js +0 -52
- package/SettingsProvider/index.js +0 -60
- package/Shortcuts/ShortcutField.js +0 -46
- package/Shortcuts/index.js +0 -133
- package/ShortcutsManager/index.js +0 -155
- package/Sidebar/index.js +0 -69
- package/SidebarBoxContainer/index.js +0 -93
- package/SmallToolButton/index.js +0 -42
- package/TagsSidebarBox/index.js +0 -105
- package/TaskDescriptionSidebarBox/index.js +0 -58
- package/Theme/index.js +0 -30
- package/VideoOrImageCanvasBackground/index.js +0 -151
- package/colors.js +0 -14
- package/hooks/use-colors.js +0 -97
- package/hooks/use-event-callback.js +0 -10
- package/hooks/use-exclude-pattern.js +0 -24
- package/hooks/use-load-image.js +0 -26
- package/hooks/use-window-size.js +0 -46
- package/index.js +0 -3
- package/lib.js +0 -3
- package/stories.js +0 -5
- package/utils/blocks-to-article.js +0 -60
- package/utils/get-from-local-storage.js +0 -7
- package/utils/get-hotkey-help-text.js +0 -9
- package/utils/get-landmarks-with-transform.js +0 -40
- package/utils/photosToImages.js +0 -85
- package/utils/regions-groups.js +0 -28
- package/utils/regions-to-blocks.js +0 -18
- package/utils/saveable-actions-enum.js +0 -3
- package/utils/set-in-local-storage.js +0 -3
- package/utils/sleep.js +0 -7
- package/utils/uuid-to-hash.js +0 -5
- /package/{Editor → src/Editor}/annotation-plugin/annotation.css +0 -0
- /package/{Errorer → src/Errorer}/errorer.css +0 -0
- /package/{Locker → src/Locker}/locker.css +0 -0
- /package/{PageSelector → src/PageSelector}/page-selector.css +0 -0
- /package/{utils → src/utils}/next-group-id.js +0 -0
package/ImageCanvas/use-mouse.js
DELETED
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
import { useRef } from "react";
|
|
2
|
-
import { Matrix } from "transformation-matrix-js";
|
|
3
|
-
|
|
4
|
-
var getDefaultMat = function getDefaultMat() {
|
|
5
|
-
return Matrix.from(1, 0, 0, 1, -10, -10);
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export default (function (_ref) {
|
|
9
|
-
var canvasEl = _ref.canvasEl,
|
|
10
|
-
changeMat = _ref.changeMat,
|
|
11
|
-
changeDragging = _ref.changeDragging,
|
|
12
|
-
zoomStart = _ref.zoomStart,
|
|
13
|
-
zoomEnd = _ref.zoomEnd,
|
|
14
|
-
changeZoomStart = _ref.changeZoomStart,
|
|
15
|
-
changeZoomEnd = _ref.changeZoomEnd,
|
|
16
|
-
layoutParams = _ref.layoutParams,
|
|
17
|
-
zoomWithPrimary = _ref.zoomWithPrimary,
|
|
18
|
-
dragWithPrimary = _ref.dragWithPrimary,
|
|
19
|
-
mat = _ref.mat,
|
|
20
|
-
_onMouseMove = _ref.onMouseMove,
|
|
21
|
-
_onMouseUp = _ref.onMouseUp,
|
|
22
|
-
_onMouseDown = _ref.onMouseDown,
|
|
23
|
-
dragging = _ref.dragging;
|
|
24
|
-
var mousePosition = useRef({
|
|
25
|
-
x: 0,
|
|
26
|
-
y: 0
|
|
27
|
-
});
|
|
28
|
-
var prevMousePosition = useRef({
|
|
29
|
-
x: 0,
|
|
30
|
-
y: 0
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
var zoomIn = function zoomIn(direction, point) {
|
|
34
|
-
var _ref2 = [point.x, point.y],
|
|
35
|
-
mx = _ref2[0],
|
|
36
|
-
my = _ref2[1];
|
|
37
|
-
var scale = typeof direction === "object" ? direction.to / mat.a : 1 + 0.2 * direction; // NOTE: We're mutating mat here
|
|
38
|
-
|
|
39
|
-
mat.translate(mx, my).scaleU(scale);
|
|
40
|
-
if (mat.a > 2) mat.scaleU(2 / mat.a);
|
|
41
|
-
if (mat.a < 0.05) mat.scaleU(0.05 / mat.a);
|
|
42
|
-
mat.translate(-mx, -my);
|
|
43
|
-
changeMat(mat.clone());
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
var mouseEvents = {
|
|
47
|
-
onMouseMove: function onMouseMove(e) {
|
|
48
|
-
var _canvasEl$current$get = canvasEl.current.getBoundingClientRect(),
|
|
49
|
-
left = _canvasEl$current$get.left,
|
|
50
|
-
top = _canvasEl$current$get.top;
|
|
51
|
-
|
|
52
|
-
prevMousePosition.current.x = mousePosition.current.x;
|
|
53
|
-
prevMousePosition.current.y = mousePosition.current.y;
|
|
54
|
-
mousePosition.current.x = e.clientX - left;
|
|
55
|
-
mousePosition.current.y = e.clientY - top;
|
|
56
|
-
var projMouse = mat.applyToPoint(mousePosition.current.x, mousePosition.current.y);
|
|
57
|
-
|
|
58
|
-
if (zoomWithPrimary && zoomStart) {
|
|
59
|
-
changeZoomEnd(projMouse);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
var _layoutParams$current = layoutParams.current,
|
|
63
|
-
iw = _layoutParams$current.iw,
|
|
64
|
-
ih = _layoutParams$current.ih;
|
|
65
|
-
|
|
66
|
-
_onMouseMove({
|
|
67
|
-
x: projMouse.x / iw,
|
|
68
|
-
y: projMouse.y / ih
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
if (dragging) {
|
|
72
|
-
mat.translate(prevMousePosition.current.x - mousePosition.current.x, prevMousePosition.current.y - mousePosition.current.y);
|
|
73
|
-
changeMat(mat.clone());
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
e.preventDefault();
|
|
77
|
-
},
|
|
78
|
-
onMouseDown: function onMouseDown(e) {
|
|
79
|
-
var specialEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
80
|
-
e.preventDefault();
|
|
81
|
-
if (e.button === 1 || e.button === 2 || e.button === 0 && dragWithPrimary) return changeDragging(true);
|
|
82
|
-
var projMouse = mat.applyToPoint(mousePosition.current.x, mousePosition.current.y);
|
|
83
|
-
|
|
84
|
-
if (zoomWithPrimary && e.button === 0) {
|
|
85
|
-
changeZoomStart(projMouse);
|
|
86
|
-
changeZoomEnd(projMouse);
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
if (e.button === 0) {
|
|
91
|
-
if (specialEvent.type === "resize-box") {// onResizeBox()
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
if (specialEvent.type === "move-region") {// onResizeBox()
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
var _layoutParams$current2 = layoutParams.current,
|
|
98
|
-
iw = _layoutParams$current2.iw,
|
|
99
|
-
ih = _layoutParams$current2.ih;
|
|
100
|
-
|
|
101
|
-
_onMouseDown({
|
|
102
|
-
x: projMouse.x / iw,
|
|
103
|
-
y: projMouse.y / ih
|
|
104
|
-
});
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
onMouseUp: function onMouseUp(e) {
|
|
108
|
-
e.preventDefault();
|
|
109
|
-
var projMouse = mat.applyToPoint(mousePosition.current.x, mousePosition.current.y);
|
|
110
|
-
|
|
111
|
-
if (zoomStart) {
|
|
112
|
-
var _zoomEnd = projMouse;
|
|
113
|
-
|
|
114
|
-
if (Math.abs(zoomStart.x - _zoomEnd.x) < 10 && Math.abs(zoomStart.y - _zoomEnd.y) < 10) {
|
|
115
|
-
if (mat.a < 1) {
|
|
116
|
-
zoomIn({
|
|
117
|
-
to: 1
|
|
118
|
-
}, mousePosition.current);
|
|
119
|
-
} else {
|
|
120
|
-
zoomIn({
|
|
121
|
-
to: 0.25
|
|
122
|
-
}, mousePosition.current);
|
|
123
|
-
}
|
|
124
|
-
} else {
|
|
125
|
-
var _layoutParams$current3 = layoutParams.current,
|
|
126
|
-
iw = _layoutParams$current3.iw,
|
|
127
|
-
ih = _layoutParams$current3.ih;
|
|
128
|
-
|
|
129
|
-
if (zoomStart.x > _zoomEnd.x) {
|
|
130
|
-
;
|
|
131
|
-
var _ref3 = [_zoomEnd.x, zoomStart.x];
|
|
132
|
-
zoomStart.x = _ref3[0];
|
|
133
|
-
_zoomEnd.x = _ref3[1];
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
if (zoomStart.y > _zoomEnd.y) {
|
|
137
|
-
;
|
|
138
|
-
var _ref4 = [_zoomEnd.y, zoomStart.y];
|
|
139
|
-
zoomStart.y = _ref4[0];
|
|
140
|
-
_zoomEnd.y = _ref4[1];
|
|
141
|
-
} // The region defined by zoomStart and zoomEnd should be the new transform
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
var scale = Math.min((_zoomEnd.x - zoomStart.x) / iw, (_zoomEnd.y - zoomStart.y) / ih);
|
|
145
|
-
if (scale < 0.05) scale = 0.05;
|
|
146
|
-
if (scale > 10) scale = 10;
|
|
147
|
-
var newMat = getDefaultMat().translate(zoomStart.x, zoomStart.y).scaleU(scale);
|
|
148
|
-
changeMat(newMat.clone());
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
changeZoomStart(null);
|
|
152
|
-
changeZoomEnd(null);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
if (e.button === 1 || e.button === 2 || e.button === 0 && dragWithPrimary) return changeDragging(false);
|
|
156
|
-
|
|
157
|
-
if (e.button === 0) {
|
|
158
|
-
var _layoutParams$current4 = layoutParams.current,
|
|
159
|
-
_iw = _layoutParams$current4.iw,
|
|
160
|
-
_ih = _layoutParams$current4.ih;
|
|
161
|
-
|
|
162
|
-
_onMouseUp({
|
|
163
|
-
x: projMouse.x / _iw,
|
|
164
|
-
y: projMouse.y / _ih
|
|
165
|
-
});
|
|
166
|
-
}
|
|
167
|
-
},
|
|
168
|
-
onWheel: function onWheel(e) {
|
|
169
|
-
var direction = e.deltaY > 0 ? 1 : e.deltaY < 0 ? -1 : 0;
|
|
170
|
-
zoomIn(direction, mousePosition.current); // e.preventDefault()
|
|
171
|
-
},
|
|
172
|
-
onContextMenu: function onContextMenu(e) {
|
|
173
|
-
e.preventDefault();
|
|
174
|
-
}
|
|
175
|
-
};
|
|
176
|
-
return {
|
|
177
|
-
mouseEvents: mouseEvents,
|
|
178
|
-
mousePosition: mousePosition
|
|
179
|
-
};
|
|
180
|
-
});
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
|
|
2
|
-
import useEventCallback from "use-event-callback";
|
|
3
|
-
import { getEnclosingBox } from "./region-tools.js";
|
|
4
|
-
export default (function (_ref) {
|
|
5
|
-
var layoutParams = _ref.layoutParams,
|
|
6
|
-
mat = _ref.mat;
|
|
7
|
-
return useEventCallback(function (r) {
|
|
8
|
-
var _layoutParams$current = layoutParams.current,
|
|
9
|
-
iw = _layoutParams$current.iw,
|
|
10
|
-
ih = _layoutParams$current.ih;
|
|
11
|
-
var bbox = getEnclosingBox(r);
|
|
12
|
-
var margin = r.type === "point" ? 15 : 2;
|
|
13
|
-
var cbox = {
|
|
14
|
-
x: bbox.x * iw - margin,
|
|
15
|
-
y: bbox.y * ih - margin,
|
|
16
|
-
w: bbox.w * iw + margin * 2,
|
|
17
|
-
h: bbox.h * ih + margin * 2
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
var pbox = _objectSpread({}, mat.clone().inverse().applyToPoint(cbox.x, cbox.y), {
|
|
21
|
-
w: cbox.w / mat.a,
|
|
22
|
-
h: cbox.h / mat.d
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
return pbox;
|
|
26
|
-
});
|
|
27
|
-
});
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
|
-
import { useEffect } from "react";
|
|
3
|
-
import { useSettings } from "../SettingsProvider";
|
|
4
|
-
export default (function (_ref) {
|
|
5
|
-
var getLatestMat = _ref.getLatestMat,
|
|
6
|
-
changeMat = _ref.changeMat;
|
|
7
|
-
|
|
8
|
-
var _useSettings = useSettings(),
|
|
9
|
-
wasdMode = _useSettings.wasdMode;
|
|
10
|
-
|
|
11
|
-
useEffect(function () {
|
|
12
|
-
if (!wasdMode) return;
|
|
13
|
-
var vel = 10;
|
|
14
|
-
var dirs = {
|
|
15
|
-
w: [0, -vel],
|
|
16
|
-
a: [-vel, 0],
|
|
17
|
-
s: [0, vel],
|
|
18
|
-
d: [vel, 0]
|
|
19
|
-
};
|
|
20
|
-
var keysDown = {};
|
|
21
|
-
var keys = Object.keys(dirs);
|
|
22
|
-
|
|
23
|
-
var keyDownListener = function keyDownListener(e) {
|
|
24
|
-
if (keys.includes(e.key)) {
|
|
25
|
-
keysDown[e.key] = true;
|
|
26
|
-
e.preventDefault();
|
|
27
|
-
e.stopPropagation();
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
var keyUpListener = function keyUpListener(e) {
|
|
32
|
-
if (keys.includes(e.key)) {
|
|
33
|
-
keysDown[e.key] = false;
|
|
34
|
-
e.preventDefault();
|
|
35
|
-
e.stopPropagation();
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
var interval = setInterval(function () {
|
|
40
|
-
var newMat = getLatestMat().clone();
|
|
41
|
-
var somethingChanged = false;
|
|
42
|
-
|
|
43
|
-
for (var key in keysDown) {
|
|
44
|
-
if (keysDown[key]) {
|
|
45
|
-
var _newMat;
|
|
46
|
-
|
|
47
|
-
newMat = (_newMat = newMat).translate.apply(_newMat, _toConsumableArray(dirs[key]));
|
|
48
|
-
somethingChanged = true;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
if (somethingChanged) changeMat(newMat);
|
|
53
|
-
}, 16);
|
|
54
|
-
window.addEventListener("keydown", keyDownListener);
|
|
55
|
-
window.addEventListener("keyup", keyUpListener);
|
|
56
|
-
return function () {
|
|
57
|
-
clearInterval(interval);
|
|
58
|
-
window.removeEventListener("keydown", keyDownListener);
|
|
59
|
-
window.removeEventListener("keyup", keyUpListener);
|
|
60
|
-
};
|
|
61
|
-
}, [wasdMode]);
|
|
62
|
-
});
|
package/ImageMask/index.js
DELETED
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
|
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
-
import React, { useState, useEffect, useMemo, useRef } from "react";
|
|
4
|
-
import { colorInts } from "../colors";
|
|
5
|
-
import { useDebounce } from "react-use";
|
|
6
|
-
import loadImage from "./load-image";
|
|
7
|
-
import autoseg from "autoseg/webworker";
|
|
8
|
-
|
|
9
|
-
function convertToUDTRegions(regions) {
|
|
10
|
-
return regions.map(function (r) {
|
|
11
|
-
switch (r.type) {
|
|
12
|
-
case "point":
|
|
13
|
-
{
|
|
14
|
-
return {
|
|
15
|
-
regionType: "point",
|
|
16
|
-
classification: r.cls,
|
|
17
|
-
x: r.x,
|
|
18
|
-
y: r.y
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
case "polygon":
|
|
23
|
-
{
|
|
24
|
-
return {
|
|
25
|
-
regionType: "polygon",
|
|
26
|
-
classification: r.cls,
|
|
27
|
-
points: r.points.map(function (_ref) {
|
|
28
|
-
var _ref2 = _slicedToArray(_ref, 2),
|
|
29
|
-
x = _ref2[0],
|
|
30
|
-
y = _ref2[1];
|
|
31
|
-
|
|
32
|
-
return {
|
|
33
|
-
x: x,
|
|
34
|
-
y: y
|
|
35
|
-
};
|
|
36
|
-
})
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
case "box":
|
|
41
|
-
{
|
|
42
|
-
return {
|
|
43
|
-
regionType: "bounding-box",
|
|
44
|
-
classification: r.cls,
|
|
45
|
-
centerX: r.x + r.w / 2,
|
|
46
|
-
centerY: r.y + r.h / 2,
|
|
47
|
-
width: r.w,
|
|
48
|
-
height: r.h
|
|
49
|
-
};
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
default:
|
|
53
|
-
{
|
|
54
|
-
return null;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}).filter(Boolean);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
export var ImageMask = function ImageMask(_ref3) {
|
|
61
|
-
var regions = _ref3.regions,
|
|
62
|
-
regionClsList = _ref3.regionClsList,
|
|
63
|
-
imageSrc = _ref3.imageSrc,
|
|
64
|
-
imagePosition = _ref3.imagePosition,
|
|
65
|
-
_ref3$zIndex = _ref3.zIndex,
|
|
66
|
-
zIndex = _ref3$zIndex === void 0 ? 1 : _ref3$zIndex,
|
|
67
|
-
_ref3$hide = _ref3.hide,
|
|
68
|
-
hide = _ref3$hide === void 0 ? false : _ref3$hide,
|
|
69
|
-
_ref3$autoSegmentatio = _ref3.autoSegmentationOptions,
|
|
70
|
-
autoSegmentationOptions = _ref3$autoSegmentatio === void 0 ? {
|
|
71
|
-
type: "simple"
|
|
72
|
-
} : _ref3$autoSegmentatio;
|
|
73
|
-
|
|
74
|
-
// if (!window.mmgc) window.mmgc = MMGC_INIT()
|
|
75
|
-
// const mmgc = window.mmgc
|
|
76
|
-
var _useState = useState(null),
|
|
77
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
78
|
-
canvasRef = _useState2[0],
|
|
79
|
-
setCanvasRef = _useState2[1];
|
|
80
|
-
|
|
81
|
-
var _useState3 = useState(),
|
|
82
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
83
|
-
sampleImageData = _useState4[0],
|
|
84
|
-
setSampleImageData = _useState4[1];
|
|
85
|
-
|
|
86
|
-
useEffect(function () {
|
|
87
|
-
if (!imageSrc) return;
|
|
88
|
-
loadImage(imageSrc).then(function (imageData) {
|
|
89
|
-
autoseg.setConfig(_objectSpread({
|
|
90
|
-
classNames: regionClsList
|
|
91
|
-
}, autoSegmentationOptions));
|
|
92
|
-
autoseg.loadImage(imageData);
|
|
93
|
-
setSampleImageData(imageData);
|
|
94
|
-
});
|
|
95
|
-
}, [imageSrc]);
|
|
96
|
-
useDebounce(function () {
|
|
97
|
-
if (hide) return;
|
|
98
|
-
if (!canvasRef) return;
|
|
99
|
-
if (!sampleImageData) return;
|
|
100
|
-
if (regions.filter(function (cp) {
|
|
101
|
-
return cp.cls;
|
|
102
|
-
}).length < 2) return;
|
|
103
|
-
var udtRegions = convertToUDTRegions(regions);
|
|
104
|
-
autoseg.getMask(udtRegions).then(function (maskImageData) {
|
|
105
|
-
var context = canvasRef.getContext("2d");
|
|
106
|
-
context.clearRect(0, 0, maskImageData.width, maskImageData.height);
|
|
107
|
-
context.putImageData(maskImageData, 0, 0);
|
|
108
|
-
});
|
|
109
|
-
}, 1000, [canvasRef, sampleImageData, regions, hide]);
|
|
110
|
-
var style = useMemo(function () {
|
|
111
|
-
var width = imagePosition.bottomRight.x - imagePosition.topLeft.x;
|
|
112
|
-
var height = imagePosition.bottomRight.y - imagePosition.topLeft.y;
|
|
113
|
-
return {
|
|
114
|
-
display: hide ? "none" : undefined,
|
|
115
|
-
imageRendering: "pixelated",
|
|
116
|
-
transform: "translateZ(0px)",
|
|
117
|
-
left: imagePosition.topLeft.x,
|
|
118
|
-
top: imagePosition.topLeft.y,
|
|
119
|
-
width: isNaN(width) ? 0 : width,
|
|
120
|
-
height: isNaN(height) ? 0 : height,
|
|
121
|
-
zIndex: zIndex,
|
|
122
|
-
position: "absolute",
|
|
123
|
-
pointerEvents: "none"
|
|
124
|
-
};
|
|
125
|
-
}, [imagePosition.topLeft.x, imagePosition.topLeft.y, imagePosition.bottomRight.x, imagePosition.bottomRight.y, zIndex, hide]);
|
|
126
|
-
return React.createElement("canvas", {
|
|
127
|
-
style: style,
|
|
128
|
-
width: sampleImageData ? sampleImageData.width : 0,
|
|
129
|
-
height: sampleImageData ? sampleImageData.height : 0,
|
|
130
|
-
ref: setCanvasRef
|
|
131
|
-
});
|
|
132
|
-
};
|
|
133
|
-
export default ImageMask;
|
package/ImageMask/load-image.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
export var loadImage = function loadImage(imageSrc) {
|
|
2
|
-
// Check if image is already loaded in a page element
|
|
3
|
-
var image = Array.from(document.getElementsByTagName("img")).find(function (img) {
|
|
4
|
-
return img.src === imageSrc;
|
|
5
|
-
});
|
|
6
|
-
var canvas = document.createElement("canvas");
|
|
7
|
-
var ctx = canvas.getContext("2d");
|
|
8
|
-
|
|
9
|
-
if (!image) {
|
|
10
|
-
image = new Image();
|
|
11
|
-
image.crossOrigin = "anonymous";
|
|
12
|
-
image.src = imageSrc;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
return new Promise(function (resolve, reject) {
|
|
16
|
-
image.onload = function () {
|
|
17
|
-
canvas.width = image.naturalWidth;
|
|
18
|
-
canvas.height = image.naturalHeight;
|
|
19
|
-
ctx.drawImage(image, 0, 0);
|
|
20
|
-
var imageData = ctx.getImageData(0, 0, image.naturalWidth, image.naturalHeight);
|
|
21
|
-
resolve(imageData);
|
|
22
|
-
};
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
export default loadImage;
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import React, { memo } from "react";
|
|
2
|
-
import { makeStyles } from "@mui/styles";
|
|
3
|
-
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
|
4
|
-
import SidebarBoxContainer from "../SidebarBoxContainer";
|
|
5
|
-
import CollectionsIcon from "@mui/icons-material/Collections";
|
|
6
|
-
import { grey } from "@mui/material/colors";
|
|
7
|
-
import List from "@mui/material/List";
|
|
8
|
-
import ListItem from "@mui/material/ListItem";
|
|
9
|
-
import ListItemText from "@mui/material/ListItemText";
|
|
10
|
-
import Avatar from "@mui/material/Avatar";
|
|
11
|
-
import isEqual from "lodash/isEqual";
|
|
12
|
-
var theme = createTheme();
|
|
13
|
-
var useStyles = makeStyles(function (theme) {
|
|
14
|
-
return {
|
|
15
|
-
img: {
|
|
16
|
-
width: 40,
|
|
17
|
-
height: 40,
|
|
18
|
-
borderRadius: 8
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
});
|
|
22
|
-
export var ImageSelectorSidebarBox = function ImageSelectorSidebarBox(_ref) {
|
|
23
|
-
var images = _ref.images,
|
|
24
|
-
onSelect = _ref.onSelect;
|
|
25
|
-
var classes = useStyles();
|
|
26
|
-
return React.createElement(ThemeProvider, {
|
|
27
|
-
theme: theme
|
|
28
|
-
}, React.createElement(SidebarBoxContainer, {
|
|
29
|
-
title: "Images",
|
|
30
|
-
subTitle: "(".concat(images.length, ")"),
|
|
31
|
-
icon: React.createElement(CollectionsIcon, {
|
|
32
|
-
style: {
|
|
33
|
-
color: grey[700]
|
|
34
|
-
}
|
|
35
|
-
})
|
|
36
|
-
}, React.createElement("div", null, React.createElement(List, null, images.map(function (img, i) {
|
|
37
|
-
return React.createElement(ListItem, {
|
|
38
|
-
button: true,
|
|
39
|
-
onClick: function onClick() {
|
|
40
|
-
return onSelect(img);
|
|
41
|
-
},
|
|
42
|
-
dense: true,
|
|
43
|
-
key: i
|
|
44
|
-
}, React.createElement("img", {
|
|
45
|
-
className: classes.img,
|
|
46
|
-
src: img.src
|
|
47
|
-
}), React.createElement(ListItemText, {
|
|
48
|
-
primary: img.name,
|
|
49
|
-
secondary: "".concat((img.regions || []).length, " Labels")
|
|
50
|
-
}));
|
|
51
|
-
})))));
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
var mapUsedImageProps = function mapUsedImageProps(a) {
|
|
55
|
-
return [a.name, (a.regions || []).length, a.src];
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export default memo(ImageSelectorSidebarBox, function (prevProps, nextProps) {
|
|
59
|
-
return isEqual(prevProps.images.map(mapUsedImageProps), nextProps.images.map(mapUsedImageProps));
|
|
60
|
-
});
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
var getTimeString = function getTimeString(ms) {
|
|
2
|
-
var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
|
|
3
|
-
|
|
4
|
-
if (ms < 1000) {
|
|
5
|
-
return ms + "ms";
|
|
6
|
-
} else {
|
|
7
|
-
var secs = ms / 1000;
|
|
8
|
-
|
|
9
|
-
if (secs < 60) {
|
|
10
|
-
if (Number.isInteger(secs)) {
|
|
11
|
-
return secs + "s";
|
|
12
|
-
} else {
|
|
13
|
-
return secs.toFixed(precision) + "s";
|
|
14
|
-
}
|
|
15
|
-
} else {
|
|
16
|
-
var mins = secs / 60;
|
|
17
|
-
|
|
18
|
-
if (Number.isInteger(mins)) {
|
|
19
|
-
return mins + "m";
|
|
20
|
-
} else {
|
|
21
|
-
return mins.toFixed(precision) + "m";
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export default getTimeString;
|