@searpent/react-image-annotate 2.1.2 → 2.3.0-cand-2
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 +29 -29
- package/Annotator/examplePhotos_repr.js +28 -28
- package/Annotator/index.js +21 -15
- package/Annotator/index.story_bugdemo_15_1.js +51 -46
- package/Annotator/index.story_repr.js +64 -51
- package/Annotator/reducers/combine-reducers.js +3 -18
- package/Annotator/reducers/convert-expanding-line-to-polygon.js +16 -15
- package/Annotator/reducers/get-implied-video-regions.js +30 -18
- package/ClassSelectionMenu/index.js +8 -8
- package/Crosshairs/index.js +2 -2
- package/DebugSidebarBox/index.js +4 -4
- package/DemoSite/Editor.js +15 -15
- package/DemoSite/ErrorBoundaryDialog.js +5 -3
- package/DemoSite/index.js +3 -3
- package/Editor/annotation-plugin/annotation.js +3 -1
- package/Editor/editor.css +0 -2
- package/Editor/index.js +23 -14
- package/Editor/index_bugdemo_15_1.js +17 -13
- package/Editor/readOnly.js +36 -28
- package/Errorer/index.js +2 -2
- package/FullImageSegmentationAnnotator/index.js +1 -1
- package/GroupSelectorSidebarBox/index.js +7 -7
- package/GroupsEditorSidebarBox/index.js +11 -11
- package/HelpSidebarBox/index.js +4 -4
- package/HighlightBox/index.js +3 -3
- package/HistorySidebarBox/index.js +8 -8
- package/ImageCanvas/index.js +16 -16
- package/ImageMask/index.js +1 -1
- package/ImageSelectorSidebarBox/index.js +7 -7
- package/KeyframeTimeline/index.js +14 -30
- package/KeyframesSelectorSidebarBox/index.js +8 -8
- package/LandingPage/index.js +12 -12
- package/Locker/index.js +2 -2
- package/MainLayout/RightSidebarItemsWrapper.js +1 -1
- package/MainLayout/icon-dictionary.js +11 -11
- package/MainLayout/index.js +25 -29
- package/MainLayout/index_bugdemo_15_1.js +23 -25
- package/MetadataEditorSidebarBox/index.js +18 -18
- package/MetadataEditorSidebarBox/index_14_01_25.js +18 -18
- package/MetadataEditorSidebarBox/index_repr.js +21 -21
- package/PageSelector/index.js +21 -21
- package/PointDistances/index.js +4 -4
- package/PreventScrollToParents/index.js +3 -3
- package/RegionLabel/index.js +24 -24
- package/RegionSelectAndTransformBoxes/index.js +8 -8
- package/RegionSelectorSidebarBox/index.js +33 -33
- package/RegionShapes/index.js +22 -22
- package/RegionTags/index.js +6 -6
- package/SettingsDialog/index.js +4 -4
- package/SettingsProvider/index.js +1 -1
- package/Shortcuts/ShortcutField.js +3 -3
- package/Shortcuts/index.js +2 -2
- package/ShortcutsManager/index.js +9 -9
- package/Sidebar/index.js +7 -7
- package/SidebarBoxContainer/index.js +3 -3
- package/SmallToolButton/index.js +2 -2
- package/TagsSidebarBox/index.js +6 -6
- package/TaskDescriptionSidebarBox/index.js +4 -4
- package/Theme/index.js +2 -2
- package/VideoOrImageCanvasBackground/index.js +5 -5
- package/package.json +11 -2
- package/utils/blocks-to-article.js +3 -3
- package/utils/get-landmarks-with-transform.js +15 -13
- package/utils/spellcheck-nspell.js +110 -66
package/MainLayout/index.js
CHANGED
|
@@ -53,7 +53,7 @@ var HotkeyDiv = withHotKeys(function (_ref) {
|
|
|
53
53
|
divRef = _ref.divRef,
|
|
54
54
|
props = _objectWithoutProperties(_ref, ["hotKeys", "children", "divRef"]);
|
|
55
55
|
|
|
56
|
-
return
|
|
56
|
+
return React.createElement("div", Object.assign({}, _objectSpread({}, hotKeys, props), {
|
|
57
57
|
ref: divRef
|
|
58
58
|
}), children);
|
|
59
59
|
});
|
|
@@ -201,7 +201,7 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
201
201
|
var allowedGroups = useMemo(function () {
|
|
202
202
|
return regionsGroups(state.images[state.selectedImage].regions);
|
|
203
203
|
}, [state.images, state.selectedImage]);
|
|
204
|
-
var canvas =
|
|
204
|
+
var canvas = React.createElement(ImageCanvas, Object.assign({}, settings, {
|
|
205
205
|
showCrosshairs: settings.showCrosshairs && !["select", "pan", "zoom"].includes(state.selectedTool),
|
|
206
206
|
key: state.selectedImage,
|
|
207
207
|
showMask: state.showMask,
|
|
@@ -278,10 +278,8 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
278
278
|
var extractionEngineRegions = (((_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : _state$images$state$s2.regions) || []).filter(function (r) {
|
|
279
279
|
return r.cls !== 'metadata';
|
|
280
280
|
});
|
|
281
|
-
var editorBlocks = regionsToBlocks(extractionEngineRegions, clsColor);
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
var blocks = selectedGroupId === null ? editorBlocks : editorBlocks.filter(function (i) {
|
|
281
|
+
var editorBlocks = regionsToBlocks(extractionEngineRegions, clsColor);
|
|
282
|
+
var blocks = editorBlocks.filter(function (i) {
|
|
285
283
|
var _i$data;
|
|
286
284
|
|
|
287
285
|
return (i === null || i === void 0 ? void 0 : (_i$data = i.data) === null || _i$data === void 0 ? void 0 : _i$data.groupId) === selectedGroupId;
|
|
@@ -332,9 +330,9 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
332
330
|
var selectedFrame = ((_state$images$state$s4 = state.images[state.selectedImage]) === null || _state$images$state$s4 === void 0 ? void 0 : (_state$images$state$s5 = _state$images$state$s4.regions.find(function (i) {
|
|
333
331
|
return i.highlighted === true;
|
|
334
332
|
})) === null || _state$images$state$s5 === void 0 ? void 0 : _state$images$state$s5.id) || '';
|
|
335
|
-
return
|
|
333
|
+
return React.createElement(ThemeProvider, {
|
|
336
334
|
theme: theme
|
|
337
|
-
},
|
|
335
|
+
}, React.createElement(FullScreenContainer, null, React.createElement(FullScreen, {
|
|
338
336
|
handle: fullScreenHandle,
|
|
339
337
|
onChange: function onChange(open) {
|
|
340
338
|
if (!open) {
|
|
@@ -342,7 +340,7 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
342
340
|
action("HEADER_BUTTON_CLICKED", "buttonName")("Window");
|
|
343
341
|
}
|
|
344
342
|
}
|
|
345
|
-
},
|
|
343
|
+
}, React.createElement(HotkeyDiv, {
|
|
346
344
|
tabIndex: -1,
|
|
347
345
|
divRef: innerContainerRef,
|
|
348
346
|
onMouseDown: refocusOnMouseEvent,
|
|
@@ -350,18 +348,18 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
350
348
|
allowChanges: true,
|
|
351
349
|
handlers: hotkeyHandlers,
|
|
352
350
|
className: classnames(classes.container, state.fullScreen && "Fullscreen")
|
|
353
|
-
},
|
|
351
|
+
}, React.createElement("div", {
|
|
354
352
|
style: {
|
|
355
353
|
display: 'flex',
|
|
356
354
|
flexDirection: 'row'
|
|
357
355
|
}
|
|
358
|
-
}, showPageSelector &&
|
|
356
|
+
}, showPageSelector && React.createElement(PageSelector, {
|
|
359
357
|
pages: pages,
|
|
360
358
|
onPageClick: handlePageClick,
|
|
361
359
|
onMetadataChange: onMetadataChange,
|
|
362
360
|
metadataConfigs: state.metadataConfigs || [],
|
|
363
361
|
onRecalcClick: onRecalcClick
|
|
364
|
-
}),
|
|
362
|
+
}), React.createElement(WorkspaceWrapper, null, React.createElement(Workspace, {
|
|
365
363
|
style: {
|
|
366
364
|
width: "auto"
|
|
367
365
|
},
|
|
@@ -369,12 +367,12 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
369
367
|
iconDictionary: iconDictionary,
|
|
370
368
|
hideHeader: hideHeader,
|
|
371
369
|
hideHeaderText: hideHeaderText,
|
|
372
|
-
headerLeftSide: [state.annotationType === "video" ?
|
|
370
|
+
headerLeftSide: [state.annotationType === "video" ? React.createElement(KeyframeTimeline, {
|
|
373
371
|
currentTime: state.currentVideoTime,
|
|
374
372
|
duration: state.videoDuration,
|
|
375
373
|
onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
|
|
376
374
|
keyframes: state.keyframes
|
|
377
|
-
}) : activeImage ?
|
|
375
|
+
}) : activeImage ? React.createElement("div", {
|
|
378
376
|
className: classes.headerTitle
|
|
379
377
|
}, activeImage.name) : null].filter(Boolean),
|
|
380
378
|
headerItems: [!hidePrev && {
|
|
@@ -443,31 +441,29 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
443
441
|
}].filter(Boolean).filter(function (a) {
|
|
444
442
|
return a.alwaysShowing || state.enabledTools.includes(a.name);
|
|
445
443
|
}),
|
|
446
|
-
rightSidebarItems: [
|
|
444
|
+
rightSidebarItems: [React.createElement(RightSidebarItemsWrapper, null, [isSelectedImageLocked && React.createElement(Locker, null), debugModeOn && React.createElement(DebugBox, {
|
|
447
445
|
state: debugModeOn,
|
|
448
446
|
lastAction: state.lastAction,
|
|
449
447
|
key: "debug-box"
|
|
450
|
-
}), state.taskDescription &&
|
|
448
|
+
}), state.taskDescription && React.createElement(TaskDescription, {
|
|
451
449
|
description: state.taskDescription,
|
|
452
450
|
key: "task-description"
|
|
453
|
-
}), state.help &&
|
|
451
|
+
}), state.help && React.createElement(Help, {
|
|
454
452
|
help: state.help,
|
|
455
453
|
key: "help"
|
|
456
|
-
}), state.regionClsList &&
|
|
454
|
+
}), state.regionClsList && React.createElement(ClassSelectionMenu, {
|
|
457
455
|
selectedCls: state.selectedCls,
|
|
458
456
|
regionClsList: state.regionClsList,
|
|
459
457
|
onSelectCls: action("SELECT_CLASSIFICATION", "cls"),
|
|
460
458
|
key: "class-selection-menu"
|
|
461
|
-
}), state.labelImages &&
|
|
459
|
+
}), state.labelImages && React.createElement(TagsSidebarBox, {
|
|
462
460
|
currentImage: activeImage,
|
|
463
461
|
imageClsList: state.imageClsList,
|
|
464
462
|
imageTagList: state.imageTagList,
|
|
465
463
|
onChangeImage: action("CHANGE_IMAGE", "delta"),
|
|
466
464
|
expandedByDefault: true,
|
|
467
465
|
key: "tags-sidebar-box"
|
|
468
|
-
}),,
|
|
469
|
-
/*#__PURE__*/
|
|
470
|
-
// (state.images?.length || 0) > 1 && (
|
|
466
|
+
}),, // (state.images?.length || 0) > 1 && (
|
|
471
467
|
// <ImageSelector
|
|
472
468
|
// onSelect={action("SELECT_REGION", "region")}
|
|
473
469
|
// images={state.images}
|
|
@@ -487,7 +483,7 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
487
483
|
onDeleteRegion: action("DELETE_REGION", "region"),
|
|
488
484
|
onChangeRegion: action("CHANGE_REGION", "region"),
|
|
489
485
|
key: "region-selector"
|
|
490
|
-
}), state.keyframes &&
|
|
486
|
+
}), state.keyframes && React.createElement(KeyframesSelector, {
|
|
491
487
|
onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
|
|
492
488
|
onDeleteKeyframe: action("DELETE_KEYFRAME", "time"),
|
|
493
489
|
onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
|
|
@@ -495,29 +491,29 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
495
491
|
duration: state.videoDuration,
|
|
496
492
|
keyframes: state.keyframes,
|
|
497
493
|
key: "key-frame-selector"
|
|
498
|
-
}), !hideHistory &&
|
|
494
|
+
}), !hideHistory && React.createElement(HistorySidebarBox, {
|
|
499
495
|
history: state.history,
|
|
500
496
|
onRestoreHistory: action("RESTORE_HISTORY"),
|
|
501
497
|
key: "history-sidebar"
|
|
502
|
-
}),
|
|
498
|
+
}), React.createElement(MetadataEditor, {
|
|
503
499
|
state: state,
|
|
504
500
|
onMetadataChange: onMetadataChange,
|
|
505
501
|
key: "metadata-editor"
|
|
506
|
-
}),
|
|
502
|
+
}), React.createElement(GroupsEditor, {
|
|
507
503
|
groups: allowedGroups,
|
|
508
504
|
onAddGroup: onAddGroup,
|
|
509
505
|
key: "groups-editor"
|
|
510
506
|
})].filter(Boolean))]
|
|
511
|
-
}, isSelectedImageLocked &&
|
|
507
|
+
}, isSelectedImageLocked && React.createElement(Locker, null), canvas)), showEditor && !isSelectedImageLocked && React.createElement(EditorWrapper, {
|
|
512
508
|
id: "editor-wrapper"
|
|
513
|
-
},
|
|
509
|
+
}, React.createElement(Editor, {
|
|
514
510
|
id: "editor",
|
|
515
511
|
blocks: blocks,
|
|
516
512
|
imageIndex: state.selectedImage,
|
|
517
513
|
key: "".concat(state.selectedImage, "#").concat(selectedGroupId),
|
|
518
514
|
selectedFrame: selectedFrame,
|
|
519
515
|
onChange: handleEditorChange
|
|
520
|
-
}))),
|
|
516
|
+
}))), React.createElement(SettingsDialog, {
|
|
521
517
|
open: state.settingsOpen,
|
|
522
518
|
onClose: function onClose() {
|
|
523
519
|
return dispatch({
|
|
@@ -53,7 +53,7 @@ var HotkeyDiv = withHotKeys(function (_ref) {
|
|
|
53
53
|
divRef = _ref.divRef,
|
|
54
54
|
props = _objectWithoutProperties(_ref, ["hotKeys", "children", "divRef"]);
|
|
55
55
|
|
|
56
|
-
return
|
|
56
|
+
return React.createElement("div", Object.assign({}, _objectSpread({}, hotKeys, props), {
|
|
57
57
|
ref: divRef
|
|
58
58
|
}), children);
|
|
59
59
|
});
|
|
@@ -201,7 +201,7 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
201
201
|
var allowedGroups = useMemo(function () {
|
|
202
202
|
return regionsGroups(state.images[state.selectedImage].regions);
|
|
203
203
|
}, [state.images, state.selectedImage]);
|
|
204
|
-
var canvas =
|
|
204
|
+
var canvas = React.createElement(ImageCanvas, Object.assign({}, settings, {
|
|
205
205
|
showCrosshairs: settings.showCrosshairs && !["select", "pan", "zoom"].includes(state.selectedTool),
|
|
206
206
|
key: state.selectedImage,
|
|
207
207
|
showMask: state.showMask,
|
|
@@ -388,9 +388,9 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
388
388
|
var selectedFrame = ((_state$images$state$s3 = state.images[state.selectedImage]) === null || _state$images$state$s3 === void 0 ? void 0 : (_state$images$state$s4 = _state$images$state$s3.regions.find(function (i) {
|
|
389
389
|
return i.highlighted === true;
|
|
390
390
|
})) === null || _state$images$state$s4 === void 0 ? void 0 : _state$images$state$s4.id) || '';
|
|
391
|
-
return
|
|
391
|
+
return React.createElement(ThemeProvider, {
|
|
392
392
|
theme: theme
|
|
393
|
-
},
|
|
393
|
+
}, React.createElement(FullScreenContainer, null, React.createElement(FullScreen, {
|
|
394
394
|
handle: fullScreenHandle,
|
|
395
395
|
onChange: function onChange(open) {
|
|
396
396
|
if (!open) {
|
|
@@ -398,7 +398,7 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
398
398
|
action("HEADER_BUTTON_CLICKED", "buttonName")("Window");
|
|
399
399
|
}
|
|
400
400
|
}
|
|
401
|
-
},
|
|
401
|
+
}, React.createElement(HotkeyDiv, {
|
|
402
402
|
tabIndex: -1,
|
|
403
403
|
divRef: innerContainerRef,
|
|
404
404
|
onMouseDown: refocusOnMouseEvent,
|
|
@@ -406,18 +406,18 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
406
406
|
allowChanges: true,
|
|
407
407
|
handlers: hotkeyHandlers,
|
|
408
408
|
className: classnames(classes.container, state.fullScreen && "Fullscreen")
|
|
409
|
-
},
|
|
409
|
+
}, React.createElement("div", {
|
|
410
410
|
style: {
|
|
411
411
|
display: 'flex',
|
|
412
412
|
flexDirection: 'row'
|
|
413
413
|
}
|
|
414
|
-
}, showPageSelector &&
|
|
414
|
+
}, showPageSelector && React.createElement(PageSelector, {
|
|
415
415
|
pages: pages,
|
|
416
416
|
onPageClick: handlePageClick,
|
|
417
417
|
onMetadataChange: onMetadataChange,
|
|
418
418
|
metadataConfigs: state.metadataConfigs || [],
|
|
419
419
|
onRecalcClick: onRecalcClick
|
|
420
|
-
}),
|
|
420
|
+
}), React.createElement(WorkspaceWrapper, null, React.createElement(Workspace, {
|
|
421
421
|
style: {
|
|
422
422
|
width: "auto"
|
|
423
423
|
},
|
|
@@ -425,12 +425,12 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
425
425
|
iconDictionary: iconDictionary,
|
|
426
426
|
hideHeader: hideHeader,
|
|
427
427
|
hideHeaderText: hideHeaderText,
|
|
428
|
-
headerLeftSide: [state.annotationType === "video" ?
|
|
428
|
+
headerLeftSide: [state.annotationType === "video" ? React.createElement(KeyframeTimeline, {
|
|
429
429
|
currentTime: state.currentVideoTime,
|
|
430
430
|
duration: state.videoDuration,
|
|
431
431
|
onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
|
|
432
432
|
keyframes: state.keyframes
|
|
433
|
-
}) : activeImage ?
|
|
433
|
+
}) : activeImage ? React.createElement("div", {
|
|
434
434
|
className: classes.headerTitle
|
|
435
435
|
}, activeImage.name) : null].filter(Boolean),
|
|
436
436
|
headerItems: [!hidePrev && {
|
|
@@ -499,31 +499,29 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
499
499
|
}].filter(Boolean).filter(function (a) {
|
|
500
500
|
return a.alwaysShowing || state.enabledTools.includes(a.name);
|
|
501
501
|
}),
|
|
502
|
-
rightSidebarItems: [
|
|
502
|
+
rightSidebarItems: [React.createElement(RightSidebarItemsWrapper, null, [isSelectedImageLocked && React.createElement(Locker, null), debugModeOn && React.createElement(DebugBox, {
|
|
503
503
|
state: debugModeOn,
|
|
504
504
|
lastAction: state.lastAction,
|
|
505
505
|
key: "debug-box"
|
|
506
|
-
}), state.taskDescription &&
|
|
506
|
+
}), state.taskDescription && React.createElement(TaskDescription, {
|
|
507
507
|
description: state.taskDescription,
|
|
508
508
|
key: "task-description"
|
|
509
|
-
}), state.help &&
|
|
509
|
+
}), state.help && React.createElement(Help, {
|
|
510
510
|
help: state.help,
|
|
511
511
|
key: "help"
|
|
512
|
-
}), state.regionClsList &&
|
|
512
|
+
}), state.regionClsList && React.createElement(ClassSelectionMenu, {
|
|
513
513
|
selectedCls: state.selectedCls,
|
|
514
514
|
regionClsList: state.regionClsList,
|
|
515
515
|
onSelectCls: action("SELECT_CLASSIFICATION", "cls"),
|
|
516
516
|
key: "class-selection-menu"
|
|
517
|
-
}), state.labelImages &&
|
|
517
|
+
}), state.labelImages && React.createElement(TagsSidebarBox, {
|
|
518
518
|
currentImage: activeImage,
|
|
519
519
|
imageClsList: state.imageClsList,
|
|
520
520
|
imageTagList: state.imageTagList,
|
|
521
521
|
onChangeImage: action("CHANGE_IMAGE", "delta"),
|
|
522
522
|
expandedByDefault: true,
|
|
523
523
|
key: "tags-sidebar-box"
|
|
524
|
-
}),,
|
|
525
|
-
/*#__PURE__*/
|
|
526
|
-
// (state.images?.length || 0) > 1 && (
|
|
524
|
+
}),, // (state.images?.length || 0) > 1 && (
|
|
527
525
|
// <ImageSelector
|
|
528
526
|
// onSelect={action("SELECT_REGION", "region")}
|
|
529
527
|
// images={state.images}
|
|
@@ -543,7 +541,7 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
543
541
|
onDeleteRegion: action("DELETE_REGION", "region"),
|
|
544
542
|
onChangeRegion: action("CHANGE_REGION", "region"),
|
|
545
543
|
key: "region-selector"
|
|
546
|
-
}), state.keyframes &&
|
|
544
|
+
}), state.keyframes && React.createElement(KeyframesSelector, {
|
|
547
545
|
onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
|
|
548
546
|
onDeleteKeyframe: action("DELETE_KEYFRAME", "time"),
|
|
549
547
|
onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
|
|
@@ -551,22 +549,22 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
551
549
|
duration: state.videoDuration,
|
|
552
550
|
keyframes: state.keyframes,
|
|
553
551
|
key: "key-frame-selector"
|
|
554
|
-
}), !hideHistory &&
|
|
552
|
+
}), !hideHistory && React.createElement(HistorySidebarBox, {
|
|
555
553
|
history: state.history,
|
|
556
554
|
onRestoreHistory: action("RESTORE_HISTORY"),
|
|
557
555
|
key: "history-sidebar"
|
|
558
|
-
}),
|
|
556
|
+
}), React.createElement(MetadataEditor, {
|
|
559
557
|
state: state,
|
|
560
558
|
onMetadataChange: onMetadataChange,
|
|
561
559
|
key: "metadata-editor"
|
|
562
|
-
}),
|
|
560
|
+
}), React.createElement(GroupsEditor, {
|
|
563
561
|
groups: allowedGroups,
|
|
564
562
|
onAddGroup: onAddGroup,
|
|
565
563
|
key: "groups-editor"
|
|
566
564
|
})].filter(Boolean))]
|
|
567
|
-
}, isSelectedImageLocked &&
|
|
565
|
+
}, isSelectedImageLocked && React.createElement(Locker, null), canvas)), showEditor && !isSelectedImageLocked && React.createElement(EditorWrapper, {
|
|
568
566
|
id: "editor-wrapper"
|
|
569
|
-
},
|
|
567
|
+
}, React.createElement(Editor, {
|
|
570
568
|
id: "editor",
|
|
571
569
|
blocks: blocks,
|
|
572
570
|
imageIndex: state.selectedImage,
|
|
@@ -575,7 +573,7 @@ export var MainLayout = function MainLayout(_ref5) {
|
|
|
575
573
|
onChange: handleEditorChange,
|
|
576
574
|
selectedGroupId: selectedGroupIdForBug,
|
|
577
575
|
originalSelectedGroupId: originalSelectedGroupId
|
|
578
|
-
}))),
|
|
576
|
+
}))), React.createElement(SettingsDialog, {
|
|
579
577
|
open: state.settingsOpen,
|
|
580
578
|
onClose: function onClose() {
|
|
581
579
|
return dispatch({
|
|
@@ -51,13 +51,13 @@ var MetadataItem = function MetadataItem(_ref2) {
|
|
|
51
51
|
});
|
|
52
52
|
};
|
|
53
53
|
|
|
54
|
-
return
|
|
54
|
+
return React.createElement(MetadataItemDiv, null, React.createElement("label", {
|
|
55
55
|
for: name
|
|
56
|
-
}, name),
|
|
56
|
+
}, name), React.createElement("div", {
|
|
57
57
|
style: {
|
|
58
58
|
width: "50%"
|
|
59
59
|
}
|
|
60
|
-
}, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true &&
|
|
60
|
+
}, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true && React.createElement(React.Fragment, null, React.createElement("input", {
|
|
61
61
|
type: "text",
|
|
62
62
|
value: value,
|
|
63
63
|
name: name,
|
|
@@ -67,21 +67,21 @@ var MetadataItem = function MetadataItem(_ref2) {
|
|
|
67
67
|
style: {
|
|
68
68
|
width: "100%"
|
|
69
69
|
}
|
|
70
|
-
}),
|
|
70
|
+
}), React.createElement("datalist", {
|
|
71
71
|
id: "".concat(name, "-list")
|
|
72
72
|
}, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio = metadataConfig.options) === null || _metadataConfig$optio === void 0 ? void 0 : _metadataConfig$optio.map(function (opt) {
|
|
73
73
|
if (opt.value && opt.label) {
|
|
74
|
-
return
|
|
74
|
+
return React.createElement("option", {
|
|
75
75
|
key: opt.value,
|
|
76
76
|
value: opt.value
|
|
77
77
|
}, opt.label);
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
return
|
|
80
|
+
return React.createElement("option", {
|
|
81
81
|
key: opt,
|
|
82
82
|
value: opt
|
|
83
83
|
});
|
|
84
|
-
}))), (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) === true &&
|
|
84
|
+
}))), (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) === true && React.createElement("select", {
|
|
85
85
|
name: name,
|
|
86
86
|
id: name,
|
|
87
87
|
onChange: handleChange,
|
|
@@ -90,14 +90,14 @@ var MetadataItem = function MetadataItem(_ref2) {
|
|
|
90
90
|
}
|
|
91
91
|
}, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio2 = metadataConfig.options) === null || _metadataConfig$optio2 === void 0 ? void 0 : _metadataConfig$optio2.map(function (opt) {
|
|
92
92
|
if (opt.value && opt.label) {
|
|
93
|
-
return
|
|
93
|
+
return React.createElement("option", {
|
|
94
94
|
key: opt.value,
|
|
95
95
|
value: opt.value,
|
|
96
96
|
selected: opt.value === value
|
|
97
97
|
}, opt.label);
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
return
|
|
100
|
+
return React.createElement("option", {
|
|
101
101
|
key: opt,
|
|
102
102
|
value: opt
|
|
103
103
|
});
|
|
@@ -112,11 +112,11 @@ var MetadataList = function MetadataList(_ref3) {
|
|
|
112
112
|
_ref3$metadataConfigs = _ref3.metadataConfigs,
|
|
113
113
|
metadataConfigs = _ref3$metadataConfigs === void 0 ? [] : _ref3$metadataConfigs,
|
|
114
114
|
groupId = _ref3.groupId;
|
|
115
|
-
return
|
|
115
|
+
return React.createElement("div", null, React.createElement("h2", null, title), metadata && metadata.map(function (_ref4) {
|
|
116
116
|
var key = _ref4.key,
|
|
117
117
|
value = _ref4.value,
|
|
118
118
|
metadataId = _ref4.metadataId;
|
|
119
|
-
return
|
|
119
|
+
return React.createElement(MetadataItem, {
|
|
120
120
|
name: key,
|
|
121
121
|
value: value,
|
|
122
122
|
imageIndex: imageIndex,
|
|
@@ -187,21 +187,21 @@ export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
|
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
189
|
|
|
190
|
-
return
|
|
190
|
+
return React.createElement(ThemeProvider, {
|
|
191
191
|
theme: theme
|
|
192
|
-
},
|
|
192
|
+
}, React.createElement(SidebarBoxContainer, {
|
|
193
193
|
title: "Metadata",
|
|
194
|
-
icon:
|
|
194
|
+
icon: React.createElement(DescriptionIcon, {
|
|
195
195
|
style: {
|
|
196
196
|
color: grey[700]
|
|
197
197
|
}
|
|
198
198
|
}),
|
|
199
199
|
expandedByDefault: true
|
|
200
|
-
},
|
|
200
|
+
}, React.createElement(DivContainer, {
|
|
201
201
|
style: {
|
|
202
202
|
height: "600px"
|
|
203
203
|
}
|
|
204
|
-
}, articleMetadata.length > 0 &&
|
|
204
|
+
}, articleMetadata.length > 0 && React.createElement(MetadataList, {
|
|
205
205
|
title: "Article",
|
|
206
206
|
metadata: articleMetadata,
|
|
207
207
|
imageIndex: state.selectedImage,
|
|
@@ -210,7 +210,7 @@ export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
|
|
|
210
210
|
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
211
211
|
return mfc.level === 'photo_metadata-engine';
|
|
212
212
|
})
|
|
213
|
-
}), selectedPhotoMetadata &&
|
|
213
|
+
}), selectedPhotoMetadata && React.createElement(MetadataList, {
|
|
214
214
|
title: "Page",
|
|
215
215
|
metadata: selectedPhotoMetadata,
|
|
216
216
|
imageIndex: state.selectedImage,
|
|
@@ -218,7 +218,7 @@ export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
|
|
|
218
218
|
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
219
219
|
return mfc.level === 'photo';
|
|
220
220
|
})
|
|
221
|
-
}),
|
|
221
|
+
}), React.createElement(MetadataList, {
|
|
222
222
|
title: "Issue",
|
|
223
223
|
metadata: state.albumMetadata,
|
|
224
224
|
onMetadataChange: onMetadataChange,
|
|
@@ -51,13 +51,13 @@ var MetadataItem = function MetadataItem(_ref2) {
|
|
|
51
51
|
});
|
|
52
52
|
};
|
|
53
53
|
|
|
54
|
-
return
|
|
54
|
+
return React.createElement(MetadataItemDiv, null, React.createElement("label", {
|
|
55
55
|
for: name
|
|
56
|
-
}, name),
|
|
56
|
+
}, name), React.createElement("div", {
|
|
57
57
|
style: {
|
|
58
58
|
width: "50%"
|
|
59
59
|
}
|
|
60
|
-
}, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true &&
|
|
60
|
+
}, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true && React.createElement(React.Fragment, null, React.createElement("input", {
|
|
61
61
|
type: "text",
|
|
62
62
|
value: value,
|
|
63
63
|
name: name,
|
|
@@ -67,21 +67,21 @@ var MetadataItem = function MetadataItem(_ref2) {
|
|
|
67
67
|
style: {
|
|
68
68
|
width: "100%"
|
|
69
69
|
}
|
|
70
|
-
}),
|
|
70
|
+
}), React.createElement("datalist", {
|
|
71
71
|
id: "".concat(name, "-list")
|
|
72
72
|
}, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio = metadataConfig.options) === null || _metadataConfig$optio === void 0 ? void 0 : _metadataConfig$optio.map(function (opt) {
|
|
73
73
|
if (opt.value && opt.label) {
|
|
74
|
-
return
|
|
74
|
+
return React.createElement("option", {
|
|
75
75
|
key: opt.value,
|
|
76
76
|
value: opt.value
|
|
77
77
|
}, opt.label);
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
return
|
|
80
|
+
return React.createElement("option", {
|
|
81
81
|
key: opt,
|
|
82
82
|
value: opt
|
|
83
83
|
});
|
|
84
|
-
}))), (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) === true &&
|
|
84
|
+
}))), (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) === true && React.createElement("select", {
|
|
85
85
|
name: name,
|
|
86
86
|
id: name,
|
|
87
87
|
value: value || '',
|
|
@@ -91,13 +91,13 @@ var MetadataItem = function MetadataItem(_ref2) {
|
|
|
91
91
|
}
|
|
92
92
|
}, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio2 = metadataConfig.options) === null || _metadataConfig$optio2 === void 0 ? void 0 : _metadataConfig$optio2.map(function (opt) {
|
|
93
93
|
if (opt.value && opt.label) {
|
|
94
|
-
return
|
|
94
|
+
return React.createElement("option", {
|
|
95
95
|
key: opt.value,
|
|
96
96
|
value: opt.value
|
|
97
97
|
}, opt.label);
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
return
|
|
100
|
+
return React.createElement("option", {
|
|
101
101
|
key: opt,
|
|
102
102
|
value: opt
|
|
103
103
|
});
|
|
@@ -112,11 +112,11 @@ var MetadataList = function MetadataList(_ref3) {
|
|
|
112
112
|
_ref3$metadataConfigs = _ref3.metadataConfigs,
|
|
113
113
|
metadataConfigs = _ref3$metadataConfigs === void 0 ? [] : _ref3$metadataConfigs,
|
|
114
114
|
groupId = _ref3.groupId;
|
|
115
|
-
return
|
|
115
|
+
return React.createElement("div", null, React.createElement("h2", null, title), metadata && metadata.map(function (_ref4) {
|
|
116
116
|
var key = _ref4.key,
|
|
117
117
|
value = _ref4.value,
|
|
118
118
|
metadataId = _ref4.metadataId;
|
|
119
|
-
return
|
|
119
|
+
return React.createElement(MetadataItem, {
|
|
120
120
|
name: key,
|
|
121
121
|
value: value,
|
|
122
122
|
imageIndex: imageIndex,
|
|
@@ -187,21 +187,21 @@ export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
|
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
189
|
|
|
190
|
-
return
|
|
190
|
+
return React.createElement(ThemeProvider, {
|
|
191
191
|
theme: theme
|
|
192
|
-
},
|
|
192
|
+
}, React.createElement(SidebarBoxContainer, {
|
|
193
193
|
title: "Metadata",
|
|
194
|
-
icon:
|
|
194
|
+
icon: React.createElement(DescriptionIcon, {
|
|
195
195
|
style: {
|
|
196
196
|
color: grey[700]
|
|
197
197
|
}
|
|
198
198
|
}),
|
|
199
199
|
expandedByDefault: true
|
|
200
|
-
},
|
|
200
|
+
}, React.createElement(DivContainer, {
|
|
201
201
|
style: {
|
|
202
202
|
height: "600px"
|
|
203
203
|
}
|
|
204
|
-
}, articleMetadata.length > 0 &&
|
|
204
|
+
}, articleMetadata.length > 0 && React.createElement(MetadataList, {
|
|
205
205
|
title: "Article",
|
|
206
206
|
metadata: articleMetadata,
|
|
207
207
|
imageIndex: state.selectedImage,
|
|
@@ -210,7 +210,7 @@ export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
|
|
|
210
210
|
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
211
211
|
return mfc.level === 'photo_metadata-engine';
|
|
212
212
|
})
|
|
213
|
-
}), selectedPhotoMetadata &&
|
|
213
|
+
}), selectedPhotoMetadata && React.createElement(MetadataList, {
|
|
214
214
|
title: "Page",
|
|
215
215
|
metadata: selectedPhotoMetadata,
|
|
216
216
|
imageIndex: state.selectedImage,
|
|
@@ -218,7 +218,7 @@ export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
|
|
|
218
218
|
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
219
219
|
return mfc.level === 'photo';
|
|
220
220
|
})
|
|
221
|
-
}),
|
|
221
|
+
}), React.createElement(MetadataList, {
|
|
222
222
|
title: "Issue",
|
|
223
223
|
metadata: state.albumMetadata,
|
|
224
224
|
onMetadataChange: onMetadataChange,
|