@searpent/react-image-annotate 2.3.3 → 2.3.5
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/examplePhotos.js +30 -30
- package/Annotator/examplePhotos_repr.js +28 -28
- package/Annotator/index.js +69 -32
- package/Annotator/index.story_bugdemo_15_1.js +895 -773
- package/Annotator/index.story_repr.js +1048 -933
- package/Annotator/reducers/convert-expanding-line-to-polygon.js +15 -16
- package/ClassSelectionMenu/index.js +55 -35
- package/Crosshairs/index.js +30 -23
- package/DebugSidebarBox/index.js +40 -9
- package/DemoSite/Editor.js +124 -79
- package/DemoSite/ErrorBoundaryDialog.js +19 -6
- package/DemoSite/index.js +26 -17
- package/Editor/index.js +70 -36
- package/Editor/index_bugdemo_15_1.js +68 -35
- package/Editor/readOnly.js +178 -127
- package/Errorer/index.js +8 -3
- package/FullImageSegmentationAnnotator/index.js +6 -3
- package/GroupSelectorSidebarBox/index.js +48 -32
- package/GroupsEditorSidebarBox/index.js +75 -40
- package/HelpSidebarBox/index.js +24 -13
- package/HighlightBox/index.js +37 -30
- package/HistorySidebarBox/index.js +51 -29
- package/ImageCanvas/index.js +165 -130
- package/ImageMask/index.js +9 -6
- package/ImageSelectorSidebarBox/index.js +44 -26
- package/KeyframeTimeline/index.js +65 -45
- package/KeyframesSelectorSidebarBox/index.js +76 -54
- package/LandingPage/index.js +76 -38
- package/Locker/index.js +8 -3
- package/MainLayout/RightSidebarItemsWrapper.js +7 -4
- package/MainLayout/icon-dictionary.js +99 -66
- package/MainLayout/index.js +256 -196
- package/MainLayout/index_bugdemo_15_1.js +253 -195
- package/MetadataEditorSidebarBox/index.js +152 -102
- package/MetadataEditorSidebarBox/index_14_01_25.js +152 -102
- package/MetadataEditorSidebarBox/index_repr.js +183 -128
- package/PageSelector/UpdatedBySemaphore.js +54 -0
- package/PageSelector/index.js +172 -96
- package/PageSelector/page-selector.css +126 -2
- package/PointDistances/index.js +45 -33
- package/PreventScrollToParents/index.js +16 -9
- package/RegionLabel/index.js +217 -165
- package/RegionSelectAndTransformBoxes/index.js +131 -105
- package/RegionSelectorSidebarBox/index.js +243 -165
- package/RegionShapes/index.js +213 -153
- package/RegionTags/index.js +83 -69
- package/SettingsDialog/index.js +50 -37
- package/SettingsProvider/index.js +8 -5
- package/Shortcuts/ShortcutField.js +21 -14
- package/Shortcuts/index.js +18 -12
- package/ShortcutsManager/index.js +7 -4
- package/Sidebar/index.js +46 -29
- package/SidebarBoxContainer/index.js +14 -7
- package/SmallToolButton/index.js +23 -16
- package/TagsSidebarBox/index.js +41 -28
- package/TaskDescriptionSidebarBox/index.js +24 -13
- package/Theme/index.js +8 -3
- package/VideoOrImageCanvasBackground/index.js +30 -17
- package/package.json +1 -1
- package/utils/spellcheck-nspell.js +2 -2
|
@@ -63,57 +63,84 @@ var MetadataItem = function MetadataItem(_ref2) {
|
|
|
63
63
|
});
|
|
64
64
|
};
|
|
65
65
|
|
|
66
|
-
return
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
66
|
+
return (
|
|
67
|
+
/*#__PURE__*/
|
|
68
|
+
React.createElement(MetadataItemDiv, null,
|
|
69
|
+
/*#__PURE__*/
|
|
70
|
+
React.createElement("label", {
|
|
71
|
+
"for": name
|
|
72
|
+
}, name),
|
|
73
|
+
/*#__PURE__*/
|
|
74
|
+
React.createElement("div", {
|
|
75
|
+
style: {
|
|
76
|
+
width: "50%"
|
|
77
|
+
}
|
|
78
|
+
}, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true &&
|
|
79
|
+
/*#__PURE__*/
|
|
80
|
+
React.createElement(React.Fragment, null,
|
|
81
|
+
/*#__PURE__*/
|
|
82
|
+
React.createElement("input", {
|
|
83
|
+
type: "text",
|
|
84
|
+
value: allowUncontrolledForDebug ? value : value !== null && value !== void 0 ? value : "",
|
|
85
|
+
name: name,
|
|
86
|
+
onChange: handleChange,
|
|
87
|
+
id: name,
|
|
88
|
+
list: "".concat(name, "-list"),
|
|
89
|
+
style: {
|
|
90
|
+
width: "100%"
|
|
91
|
+
}
|
|
92
|
+
}),
|
|
93
|
+
/*#__PURE__*/
|
|
94
|
+
React.createElement("datalist", {
|
|
95
|
+
id: "".concat(name, "-list")
|
|
96
|
+
}, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio = metadataConfig.options) === null || _metadataConfig$optio === void 0 ? void 0 : _metadataConfig$optio.map(function (opt) {
|
|
97
|
+
if (opt.value && opt.label) {
|
|
98
|
+
return (
|
|
99
|
+
/*#__PURE__*/
|
|
100
|
+
React.createElement("option", {
|
|
101
|
+
key: opt.value,
|
|
102
|
+
value: opt.value
|
|
103
|
+
}, opt.label)
|
|
104
|
+
);
|
|
105
|
+
}
|
|
91
106
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
107
|
+
return (
|
|
108
|
+
/*#__PURE__*/
|
|
109
|
+
React.createElement("option", {
|
|
110
|
+
key: opt,
|
|
111
|
+
value: opt
|
|
112
|
+
})
|
|
113
|
+
);
|
|
114
|
+
}))), (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) === true &&
|
|
115
|
+
/*#__PURE__*/
|
|
116
|
+
React.createElement("select", {
|
|
117
|
+
name: name,
|
|
118
|
+
id: name,
|
|
119
|
+
value: value || '',
|
|
120
|
+
onChange: handleChange,
|
|
121
|
+
style: {
|
|
122
|
+
width: '100%'
|
|
123
|
+
}
|
|
124
|
+
}, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio2 = metadataConfig.options) === null || _metadataConfig$optio2 === void 0 ? void 0 : _metadataConfig$optio2.map(function (opt) {
|
|
125
|
+
if (opt.value && opt.label) {
|
|
126
|
+
return (
|
|
127
|
+
/*#__PURE__*/
|
|
128
|
+
React.createElement("option", {
|
|
129
|
+
key: opt.value,
|
|
130
|
+
value: opt.value
|
|
131
|
+
}, opt.label)
|
|
132
|
+
);
|
|
133
|
+
}
|
|
111
134
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
135
|
+
return (
|
|
136
|
+
/*#__PURE__*/
|
|
137
|
+
React.createElement("option", {
|
|
138
|
+
key: opt,
|
|
139
|
+
value: opt
|
|
140
|
+
})
|
|
141
|
+
);
|
|
142
|
+
}))))
|
|
143
|
+
);
|
|
117
144
|
};
|
|
118
145
|
|
|
119
146
|
var MetadataList = function MetadataList(_ref3) {
|
|
@@ -124,40 +151,51 @@ var MetadataList = function MetadataList(_ref3) {
|
|
|
124
151
|
_ref3$metadataConfigs = _ref3.metadataConfigs,
|
|
125
152
|
metadataConfigs = _ref3$metadataConfigs === void 0 ? [] : _ref3$metadataConfigs,
|
|
126
153
|
groupId = _ref3.groupId;
|
|
127
|
-
return
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
154
|
+
return (
|
|
155
|
+
/*#__PURE__*/
|
|
156
|
+
React.createElement("div", null,
|
|
157
|
+
/*#__PURE__*/
|
|
158
|
+
React.createElement("h2", null, title), metadata && metadata.map(function (_ref4) {
|
|
159
|
+
var key = _ref4.key,
|
|
160
|
+
value = _ref4.value,
|
|
161
|
+
metadataId = _ref4.metadataId;
|
|
131
162
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
163
|
+
// In Storybook hang repro mode, deliberately remove React keys so React is
|
|
164
|
+
// more likely to reuse the same DOM <input> across article switches.
|
|
165
|
+
if (isStorybookHangReproModeEnabled()) {
|
|
166
|
+
return (
|
|
167
|
+
/*#__PURE__*/
|
|
168
|
+
React.createElement(MetadataItem, {
|
|
169
|
+
name: key,
|
|
170
|
+
value: value,
|
|
171
|
+
imageIndex: imageIndex,
|
|
172
|
+
metadataId: metadataId,
|
|
173
|
+
groupId: groupId,
|
|
174
|
+
onChange: onMetadataChange,
|
|
175
|
+
metadataConfig: metadataConfigs.find(function (i) {
|
|
176
|
+
return i.key === key;
|
|
177
|
+
})
|
|
178
|
+
})
|
|
179
|
+
);
|
|
180
|
+
}
|
|
147
181
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
182
|
+
return (
|
|
183
|
+
/*#__PURE__*/
|
|
184
|
+
React.createElement(MetadataItem, {
|
|
185
|
+
key: "".concat(groupId, "-").concat(key),
|
|
186
|
+
name: key,
|
|
187
|
+
value: value,
|
|
188
|
+
imageIndex: imageIndex,
|
|
189
|
+
metadataId: metadataId,
|
|
190
|
+
groupId: groupId,
|
|
191
|
+
onChange: onMetadataChange,
|
|
192
|
+
metadataConfig: metadataConfigs.find(function (i) {
|
|
193
|
+
return i.key === key;
|
|
194
|
+
})
|
|
195
|
+
})
|
|
196
|
+
);
|
|
197
|
+
}))
|
|
198
|
+
);
|
|
161
199
|
};
|
|
162
200
|
|
|
163
201
|
var theme = createTheme();
|
|
@@ -217,55 +255,72 @@ export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
|
|
|
217
255
|
}
|
|
218
256
|
}
|
|
219
257
|
|
|
220
|
-
return
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
258
|
+
return (
|
|
259
|
+
/*#__PURE__*/
|
|
260
|
+
React.createElement(ThemeProvider, {
|
|
261
|
+
theme: theme
|
|
262
|
+
},
|
|
263
|
+
/*#__PURE__*/
|
|
264
|
+
React.createElement(SidebarBoxContainer, {
|
|
265
|
+
title: "Metadata",
|
|
266
|
+
icon:
|
|
267
|
+
/*#__PURE__*/
|
|
268
|
+
React.createElement(DescriptionIcon, {
|
|
269
|
+
style: {
|
|
270
|
+
color: grey[700]
|
|
271
|
+
}
|
|
272
|
+
}),
|
|
273
|
+
expandedByDefault: true
|
|
274
|
+
},
|
|
275
|
+
/*#__PURE__*/
|
|
276
|
+
React.createElement(DivContainer, {
|
|
225
277
|
style: {
|
|
226
|
-
|
|
278
|
+
height: "600px"
|
|
227
279
|
}
|
|
280
|
+
}, articleMetadata.length > 0 && (isStorybookHangReproModeEnabled() ?
|
|
281
|
+
/*#__PURE__*/
|
|
282
|
+
React.createElement(MetadataList, {
|
|
283
|
+
title: "Article",
|
|
284
|
+
metadata: articleMetadata,
|
|
285
|
+
imageIndex: state.selectedImage,
|
|
286
|
+
groupId: selectedGroupId,
|
|
287
|
+
onMetadataChange: onMetadataChange,
|
|
288
|
+
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
289
|
+
return mfc.level === 'photo_metadata-engine';
|
|
290
|
+
})
|
|
291
|
+
}) :
|
|
292
|
+
/*#__PURE__*/
|
|
293
|
+
React.createElement(MetadataList, {
|
|
294
|
+
key: "article-".concat(selectedGroupId),
|
|
295
|
+
title: "Article",
|
|
296
|
+
metadata: articleMetadata,
|
|
297
|
+
imageIndex: state.selectedImage,
|
|
298
|
+
groupId: selectedGroupId,
|
|
299
|
+
onMetadataChange: onMetadataChange,
|
|
300
|
+
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
301
|
+
return mfc.level === 'photo_metadata-engine';
|
|
302
|
+
})
|
|
303
|
+
})), selectedPhotoMetadata &&
|
|
304
|
+
/*#__PURE__*/
|
|
305
|
+
React.createElement(MetadataList, {
|
|
306
|
+
title: "Page",
|
|
307
|
+
metadata: selectedPhotoMetadata,
|
|
308
|
+
imageIndex: state.selectedImage,
|
|
309
|
+
onMetadataChange: onMetadataChange,
|
|
310
|
+
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
311
|
+
return mfc.level === 'photo';
|
|
312
|
+
})
|
|
228
313
|
}),
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
241
|
-
return mfc.level === 'photo_metadata-engine';
|
|
242
|
-
})
|
|
243
|
-
}) : React.createElement(MetadataList, {
|
|
244
|
-
key: "article-".concat(selectedGroupId),
|
|
245
|
-
title: "Article",
|
|
246
|
-
metadata: articleMetadata,
|
|
247
|
-
imageIndex: state.selectedImage,
|
|
248
|
-
groupId: selectedGroupId,
|
|
249
|
-
onMetadataChange: onMetadataChange,
|
|
250
|
-
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
251
|
-
return mfc.level === 'photo_metadata-engine';
|
|
252
|
-
})
|
|
253
|
-
})), selectedPhotoMetadata && React.createElement(MetadataList, {
|
|
254
|
-
title: "Page",
|
|
255
|
-
metadata: selectedPhotoMetadata,
|
|
256
|
-
imageIndex: state.selectedImage,
|
|
257
|
-
onMetadataChange: onMetadataChange,
|
|
258
|
-
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
259
|
-
return mfc.level === 'photo';
|
|
260
|
-
})
|
|
261
|
-
}), React.createElement(MetadataList, {
|
|
262
|
-
title: "Issue",
|
|
263
|
-
metadata: state.albumMetadata,
|
|
264
|
-
onMetadataChange: onMetadataChange,
|
|
265
|
-
id: "metadata-album",
|
|
266
|
-
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
267
|
-
return mfc.level === 'album';
|
|
268
|
-
})
|
|
269
|
-
}))));
|
|
314
|
+
/*#__PURE__*/
|
|
315
|
+
React.createElement(MetadataList, {
|
|
316
|
+
title: "Issue",
|
|
317
|
+
metadata: state.albumMetadata,
|
|
318
|
+
onMetadataChange: onMetadataChange,
|
|
319
|
+
id: "metadata-album",
|
|
320
|
+
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
321
|
+
return mfc.level === 'album';
|
|
322
|
+
})
|
|
323
|
+
}))))
|
|
324
|
+
);
|
|
270
325
|
};
|
|
271
326
|
export default memo(MetadataEditorSidebarBox);
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import classnames from "classnames";
|
|
3
|
+
export function isUpdatedByAggregator(updatedBy) {
|
|
4
|
+
if (updatedBy == null) return false;
|
|
5
|
+
return String(updatedBy).trim() === "AGGREGATOR";
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Case-level “UPDATED BY” indicator for the page strip (left panel).
|
|
9
|
+
* Red (left) / green (right) discs, left-aligned with the page-strip switch column; “Ready” after them.
|
|
10
|
+
* Green lit only when value is exactly AGGREGATOR.
|
|
11
|
+
* `selectionKey` should change per selected page so the control remounts when paging.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
export default function UpdatedBySemaphore(_ref) {
|
|
15
|
+
var updatedBy = _ref.updatedBy,
|
|
16
|
+
selectionKey = _ref.selectionKey;
|
|
17
|
+
var green = isUpdatedByAggregator(updatedBy);
|
|
18
|
+
var source = updatedBy == null || updatedBy === "" ? "—" : String(updatedBy);
|
|
19
|
+
return (
|
|
20
|
+
/*#__PURE__*/
|
|
21
|
+
React.createElement("div", {
|
|
22
|
+
key: selectionKey,
|
|
23
|
+
className: "ps-updated-by-semaphore",
|
|
24
|
+
title: "Case last updated by: ".concat(source, ". Green disc: AGGREGATOR \u2014 OK to start manual edits. Red disc: other source \u2014 review before editing."),
|
|
25
|
+
role: "img",
|
|
26
|
+
"aria-label": green ? "OK to start manual edits (AGGREGATOR)" : "Review before manual edits (not AGGREGATOR)"
|
|
27
|
+
},
|
|
28
|
+
/*#__PURE__*/
|
|
29
|
+
React.createElement("span", {
|
|
30
|
+
className: "ps-semaphore-toggle-column",
|
|
31
|
+
"aria-hidden": true
|
|
32
|
+
},
|
|
33
|
+
/*#__PURE__*/
|
|
34
|
+
React.createElement("span", {
|
|
35
|
+
className: "ps-semaphore-lamps"
|
|
36
|
+
},
|
|
37
|
+
/*#__PURE__*/
|
|
38
|
+
React.createElement("span", {
|
|
39
|
+
className: classnames("ps-semaphore-lamp", "ps-semaphore-red", {
|
|
40
|
+
"ps-semaphore-lit": !green
|
|
41
|
+
})
|
|
42
|
+
}),
|
|
43
|
+
/*#__PURE__*/
|
|
44
|
+
React.createElement("span", {
|
|
45
|
+
className: classnames("ps-semaphore-lamp", "ps-semaphore-green", {
|
|
46
|
+
"ps-semaphore-lit": green
|
|
47
|
+
})
|
|
48
|
+
}))),
|
|
49
|
+
/*#__PURE__*/
|
|
50
|
+
React.createElement("span", {
|
|
51
|
+
className: "ps-top-bar-label ps-updated-by-semaphore__label"
|
|
52
|
+
}, "Ready"))
|
|
53
|
+
);
|
|
54
|
+
}
|