@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.
Files changed (60) hide show
  1. package/Annotator/examplePhotos.js +30 -30
  2. package/Annotator/examplePhotos_repr.js +28 -28
  3. package/Annotator/index.js +69 -32
  4. package/Annotator/index.story_bugdemo_15_1.js +895 -773
  5. package/Annotator/index.story_repr.js +1048 -933
  6. package/Annotator/reducers/convert-expanding-line-to-polygon.js +15 -16
  7. package/ClassSelectionMenu/index.js +55 -35
  8. package/Crosshairs/index.js +30 -23
  9. package/DebugSidebarBox/index.js +40 -9
  10. package/DemoSite/Editor.js +124 -79
  11. package/DemoSite/ErrorBoundaryDialog.js +19 -6
  12. package/DemoSite/index.js +26 -17
  13. package/Editor/index.js +70 -36
  14. package/Editor/index_bugdemo_15_1.js +68 -35
  15. package/Editor/readOnly.js +178 -127
  16. package/Errorer/index.js +8 -3
  17. package/FullImageSegmentationAnnotator/index.js +6 -3
  18. package/GroupSelectorSidebarBox/index.js +48 -32
  19. package/GroupsEditorSidebarBox/index.js +75 -40
  20. package/HelpSidebarBox/index.js +24 -13
  21. package/HighlightBox/index.js +37 -30
  22. package/HistorySidebarBox/index.js +51 -29
  23. package/ImageCanvas/index.js +165 -130
  24. package/ImageMask/index.js +9 -6
  25. package/ImageSelectorSidebarBox/index.js +44 -26
  26. package/KeyframeTimeline/index.js +65 -45
  27. package/KeyframesSelectorSidebarBox/index.js +76 -54
  28. package/LandingPage/index.js +76 -38
  29. package/Locker/index.js +8 -3
  30. package/MainLayout/RightSidebarItemsWrapper.js +7 -4
  31. package/MainLayout/icon-dictionary.js +99 -66
  32. package/MainLayout/index.js +256 -196
  33. package/MainLayout/index_bugdemo_15_1.js +253 -195
  34. package/MetadataEditorSidebarBox/index.js +152 -102
  35. package/MetadataEditorSidebarBox/index_14_01_25.js +152 -102
  36. package/MetadataEditorSidebarBox/index_repr.js +183 -128
  37. package/PageSelector/UpdatedBySemaphore.js +54 -0
  38. package/PageSelector/index.js +172 -96
  39. package/PageSelector/page-selector.css +126 -2
  40. package/PointDistances/index.js +45 -33
  41. package/PreventScrollToParents/index.js +16 -9
  42. package/RegionLabel/index.js +217 -165
  43. package/RegionSelectAndTransformBoxes/index.js +131 -105
  44. package/RegionSelectorSidebarBox/index.js +243 -165
  45. package/RegionShapes/index.js +213 -153
  46. package/RegionTags/index.js +83 -69
  47. package/SettingsDialog/index.js +50 -37
  48. package/SettingsProvider/index.js +8 -5
  49. package/Shortcuts/ShortcutField.js +21 -14
  50. package/Shortcuts/index.js +18 -12
  51. package/ShortcutsManager/index.js +7 -4
  52. package/Sidebar/index.js +46 -29
  53. package/SidebarBoxContainer/index.js +14 -7
  54. package/SmallToolButton/index.js +23 -16
  55. package/TagsSidebarBox/index.js +41 -28
  56. package/TaskDescriptionSidebarBox/index.js +24 -13
  57. package/Theme/index.js +8 -3
  58. package/VideoOrImageCanvasBackground/index.js +30 -17
  59. package/package.json +1 -1
  60. package/utils/spellcheck-nspell.js +2 -2
@@ -710,34 +710,34 @@ var examplePhotos = [{
710
710
  },
711
711
  "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest n z února v Indii,\\n\\tpred proti v Pekingu.\"}]",
712
712
  "groupId": "6",
713
- "id": "346807506913198081" // {
714
- // "label": "photo_caption",
715
- // "score": 0.99,
716
- // "box": {
717
- // "X1": 0.80248857,
718
- // "X2": 0.95999366,
719
- // "Y1": 0.32127157,
720
- // "Y2": 0.34381694
721
- // },
722
- // "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest z února v Indii proti konání ZOH v Pekingu\"}]",
723
- // "groupId": "6",
724
- // "id": "346807506913198082"
725
- // },
726
- // {
727
- // "label": "author",
728
- // "score": 0.99,
729
- // "box": {
730
- // "X1": 0.9584186,
731
- // "X2": 0.9733816,
732
- // "Y1": 0.51628906,
733
- // "Y2": 0.53319806
734
- // },
735
- // "text": "[{\"label\":\"author\",\"text\":\"PUR\"}]",
736
- // "groupId": "6",
737
- // "id": "346807506913198083"
738
- // }
739
-
740
- }]
713
+ "id": "346807506913198081"
714
+ } // {
715
+ // "label": "photo_caption",
716
+ // "score": 0.99,
717
+ // "box": {
718
+ // "X1": 0.80248857,
719
+ // "X2": 0.95999366,
720
+ // "Y1": 0.32127157,
721
+ // "Y2": 0.34381694
722
+ // },
723
+ // "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest z února v Indii proti konání ZOH v Pekingu\"}]",
724
+ // "groupId": "6",
725
+ // "id": "346807506913198082"
726
+ // },
727
+ // {
728
+ // "label": "author",
729
+ // "score": 0.99,
730
+ // "box": {
731
+ // "X1": 0.9584186,
732
+ // "X2": 0.9733816,
733
+ // "Y1": 0.51628906,
734
+ // "Y2": 0.53319806
735
+ // },
736
+ // "text": "[{\"label\":\"author\",\"text\":\"PUR\"}]",
737
+ // "groupId": "6",
738
+ // "id": "346807506913198083"
739
+ // }
740
+ ]
741
741
  }, {
742
742
  "modelFamily": "metadata-engine",
743
743
  "name": "metadata-engine",
@@ -750,7 +750,7 @@ var examplePhotos = [{
750
750
  "Y1": 0,
751
751
  "Y2": 1
752
752
  },
753
- "text": "[{\"key\":\"articleType\",\"value\":\"news\"}, {\"key\":\"section\",\"value\":\"editorial\"}]",
753
+ "text": "[{\"key\":\"articleType\",\"value\":\"news\"}, {\"key\":\"previousArticleId\",\"value\":\"prev-article-1\"}, {\"key\":\"section\",\"value\":\"editorial\"}]",
754
754
  "groupId": "42ba09e0-b2f5-439d-bdae-201e7c37787b",
755
755
  "id": "aba453dd-f870-4510-ae40-a19eb52eb7d6"
756
756
  }, {
@@ -762,7 +762,7 @@ var examplePhotos = [{
762
762
  "Y1": 0,
763
763
  "Y2": 1
764
764
  },
765
- "text": "[{\"key\":\"articleType\",\"value\":\"ads\"}, {\"key\":\"section\",\"value\":\"last page\"}]",
765
+ "text": "[{\"key\":\"articleType\",\"value\":\"ads\"}, {\"key\":\"previousArticleId\",\"value\":\"prev-article-2\"}, {\"key\":\"section\",\"value\":\"last page\"}]",
766
766
  "groupId": "1",
767
767
  "id": "2615bf87-7247-4bde-a0f9-45413034a6a6"
768
768
  }]
@@ -710,34 +710,34 @@ var examplePhotos = [{
710
710
  },
711
711
  "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest n z února v Indii,\\n\\tpred proti v Pekingu.\"}]",
712
712
  "groupId": "6",
713
- "id": "346807506913198081" // {
714
- // "label": "photo_caption",
715
- // "score": 0.99,
716
- // "box": {
717
- // "X1": 0.80248857,
718
- // "X2": 0.95999366,
719
- // "Y1": 0.32127157,
720
- // "Y2": 0.34381694
721
- // },
722
- // "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest z února v Indii proti konání ZOH v Pekingu\"}]",
723
- // "groupId": "6",
724
- // "id": "346807506913198082"
725
- // },
726
- // {
727
- // "label": "author",
728
- // "score": 0.99,
729
- // "box": {
730
- // "X1": 0.9584186,
731
- // "X2": 0.9733816,
732
- // "Y1": 0.51628906,
733
- // "Y2": 0.53319806
734
- // },
735
- // "text": "[{\"label\":\"author\",\"text\":\"PUR\"}]",
736
- // "groupId": "6",
737
- // "id": "346807506913198083"
738
- // }
739
-
740
- }]
713
+ "id": "346807506913198081"
714
+ } // {
715
+ // "label": "photo_caption",
716
+ // "score": 0.99,
717
+ // "box": {
718
+ // "X1": 0.80248857,
719
+ // "X2": 0.95999366,
720
+ // "Y1": 0.32127157,
721
+ // "Y2": 0.34381694
722
+ // },
723
+ // "text": "[{\"label\":\"photo_caption\",\"text\":\"Protest z února v Indii proti konání ZOH v Pekingu\"}]",
724
+ // "groupId": "6",
725
+ // "id": "346807506913198082"
726
+ // },
727
+ // {
728
+ // "label": "author",
729
+ // "score": 0.99,
730
+ // "box": {
731
+ // "X1": 0.9584186,
732
+ // "X2": 0.9733816,
733
+ // "Y1": 0.51628906,
734
+ // "Y2": 0.53319806
735
+ // },
736
+ // "text": "[{\"label\":\"author\",\"text\":\"PUR\"}]",
737
+ // "groupId": "6",
738
+ // "id": "346807506913198083"
739
+ // }
740
+ ]
741
741
  }, {
742
742
  "modelFamily": "metadata-engine",
743
743
  "name": "metadata-engine",
@@ -84,7 +84,8 @@ export var Annotator = function Annotator(_ref) {
84
84
  _ref$save = _ref.save,
85
85
  save = _ref$save === void 0 ? function () {} : _ref$save,
86
86
  _ref$fetchImage = _ref.fetchImage,
87
- fetchImage = _ref$fetchImage === void 0 ? function () {} : _ref$fetchImage;
87
+ fetchImage = _ref$fetchImage === void 0 ? function () {} : _ref$fetchImage,
88
+ updatedBy = _ref.updatedBy;
88
89
 
89
90
  if (typeof selectedImage === "string") {
90
91
  selectedImage = (images || []).findIndex(function (img) {
@@ -213,7 +214,37 @@ export var Annotator = function Annotator(_ref) {
213
214
  });
214
215
  }
215
216
  }
216
- }, [state.previouslySelectedImage, state.selectedImage, state.images, state, save]); // handle save of image
217
+ }, [state.previouslySelectedImage, state.selectedImage, state.images, state, save]); // Automatically save image shortly after specific metadata fields change
218
+ // (ArticleType, PreviousArticleId), but debounce so we don't save on every keystroke.
219
+
220
+ useEffect(function () {
221
+ var _state$images;
222
+
223
+ var lastAction = state.lastAction;
224
+
225
+ if (!lastAction || lastAction.type !== "UPDATE_METADATA" || lastAction.name !== "articleType" && lastAction.name !== "previousArticleId" || isNaN(lastAction.imageIndex)) {
226
+ return;
227
+ }
228
+
229
+ var imageIndex = lastAction.imageIndex;
230
+ var image = (_state$images = state.images) === null || _state$images === void 0 ? void 0 : _state$images[imageIndex];
231
+ if (!image) return;
232
+ var timeoutId = setTimeout(function () {
233
+ var _state$images2;
234
+
235
+ var latestImage = (_state$images2 = state.images) === null || _state$images2 === void 0 ? void 0 : _state$images2[imageIndex];
236
+ if (!latestImage) return;
237
+ dispatchToReducer({
238
+ type: "SAVE_IMAGE",
239
+ image: _objectSpread({}, latestImage),
240
+ triggerRecalc: false,
241
+ toSaveMetadata: []
242
+ });
243
+ }, 800);
244
+ return function () {
245
+ clearTimeout(timeoutId);
246
+ };
247
+ }, [state.lastAction, state.images]); // handle save of image
217
248
 
218
249
  useEffect(function () {
219
250
  if (state.toSaveImage !== null) {
@@ -383,35 +414,41 @@ export var Annotator = function Annotator(_ref) {
383
414
  recalcActive = _ref7[0],
384
415
  saveActive = _ref7[1];
385
416
 
386
- return React.createElement(SettingsProvider, {
387
- clsColors: clsColors,
388
- groupColors: groupColors
389
- }, React.createElement(MainLayout, {
390
- RegionEditLabel: RegionEditLabel,
391
- alwaysShowNextButton: Boolean(onNextImage),
392
- alwaysShowPrevButton: Boolean(onPrevImage),
393
- state: state,
394
- dispatch: dispatch,
395
- onRegionClassAdded: onRegionClassAdded,
396
- hideHeader: hideHeader,
397
- hideHeaderText: hideHeaderText,
398
- hideNext: hideNext,
399
- hidePrev: hidePrev,
400
- hideClone: hideClone,
401
- hideSettings: hideSettings,
402
- hideFullScreen: hideFullScreen,
403
- hideSave: hideSave,
404
- groups: groups,
405
- onGroupSelect: onGroupSelect,
406
- hideHistory: hideHistory,
407
- hideNotEditingLabel: hideNotEditingLabel,
408
- showEditor: showEditor,
409
- showPageSelector: showPageSelector,
410
- saveActive: recalcActive,
411
- recalcActive: saveActive,
412
- onMetadataChange: handleMetadataChange,
413
- onAddGroup: handleAddGroup,
414
- onRecalcClick: handleRecalcClicked
415
- }));
417
+ return (
418
+ /*#__PURE__*/
419
+ React.createElement(SettingsProvider, {
420
+ clsColors: clsColors,
421
+ groupColors: groupColors
422
+ },
423
+ /*#__PURE__*/
424
+ React.createElement(MainLayout, {
425
+ RegionEditLabel: RegionEditLabel,
426
+ alwaysShowNextButton: Boolean(onNextImage),
427
+ alwaysShowPrevButton: Boolean(onPrevImage),
428
+ state: state,
429
+ dispatch: dispatch,
430
+ onRegionClassAdded: onRegionClassAdded,
431
+ hideHeader: hideHeader,
432
+ hideHeaderText: hideHeaderText,
433
+ hideNext: hideNext,
434
+ hidePrev: hidePrev,
435
+ hideClone: hideClone,
436
+ hideSettings: hideSettings,
437
+ hideFullScreen: hideFullScreen,
438
+ hideSave: hideSave,
439
+ groups: groups,
440
+ onGroupSelect: onGroupSelect,
441
+ hideHistory: hideHistory,
442
+ hideNotEditingLabel: hideNotEditingLabel,
443
+ showEditor: showEditor,
444
+ showPageSelector: showPageSelector,
445
+ saveActive: recalcActive,
446
+ recalcActive: saveActive,
447
+ onMetadataChange: handleMetadataChange,
448
+ onAddGroup: handleAddGroup,
449
+ onRecalcClick: handleRecalcClicked,
450
+ updatedBy: updatedBy
451
+ }))
452
+ );
416
453
  };
417
454
  export default Annotator;