@searpent/react-image-annotate 2.0.3 → 2.0.6

package/MainLayout/index.js

@@ -17,6 +17,7 @@ import RegionSelector from "../RegionSelectorSidebarBox";
 import SettingsDialog from "../SettingsDialog";
 import TagsSidebarBox from "../TagsSidebarBox";
 import TaskDescription from "../TaskDescriptionSidebarBox";
+import MetadataEditor from "../MetadataEditorSidebarBox";
 import Workspace from "react-material-workspace-layout/Workspace";
 import classnames from "classnames";
 import getActiveImage from "../Annotator/reducers/get-active-image";
@@ -28,7 +29,10 @@ import useEventCallback from "use-event-callback";
 import useImpliedVideoRegions from "./use-implied-video-regions";
 import useKey from "use-key-hook";
 import { useSettings } from "../SettingsProvider";
-import { withHotKeys } from "react-hotkeys"; // import Fullscreen from "../Fullscreen"
+import { withHotKeys } from "react-hotkeys";
+import Editor from "../Editor";
+import regionsToBlocks from '../utils/regions-to-blocks';
+import PagesSelector from "../PageSelector"; // import Fullscreen from "../Fullscreen"
 
 var emptyArr = [];
 var theme = createTheme();
@@ -56,37 +60,62 @@ var FullScreenContainer = styled("div")(function (_ref2) {
     }
   };
 });
-export var MainLayout = function MainLayout(_ref3) {
-  var state = _ref3.state,
-      dispatch = _ref3.dispatch,
-      _ref3$alwaysShowNextB = _ref3.alwaysShowNextButton,
-      alwaysShowNextButton = _ref3$alwaysShowNextB === void 0 ? false : _ref3$alwaysShowNextB,
-      _ref3$alwaysShowPrevB = _ref3.alwaysShowPrevButton,
-      alwaysShowPrevButton = _ref3$alwaysShowPrevB === void 0 ? false : _ref3$alwaysShowPrevB,
-      RegionEditLabel = _ref3.RegionEditLabel,
-      onRegionClassAdded = _ref3.onRegionClassAdded,
-      hideHeader = _ref3.hideHeader,
-      hideHeaderText = _ref3.hideHeaderText,
-      _ref3$hideNext = _ref3.hideNext,
-      hideNext = _ref3$hideNext === void 0 ? false : _ref3$hideNext,
-      _ref3$hidePrev = _ref3.hidePrev,
-      hidePrev = _ref3$hidePrev === void 0 ? false : _ref3$hidePrev,
-      _ref3$hideClone = _ref3.hideClone,
-      hideClone = _ref3$hideClone === void 0 ? false : _ref3$hideClone,
-      _ref3$hideSettings = _ref3.hideSettings,
-      hideSettings = _ref3$hideSettings === void 0 ? false : _ref3$hideSettings,
-      _ref3$hideFullScreen = _ref3.hideFullScreen,
-      hideFullScreen = _ref3$hideFullScreen === void 0 ? false : _ref3$hideFullScreen,
-      _ref3$hideSave = _ref3.hideSave,
-      hideSave = _ref3$hideSave === void 0 ? false : _ref3$hideSave,
-      _ref3$groups = _ref3.groups,
-      groups = _ref3$groups === void 0 ? [] : _ref3$groups,
-      _ref3$onGroupSelect = _ref3.onGroupSelect,
-      onGroupSelect = _ref3$onGroupSelect === void 0 ? function () {} : _ref3$onGroupSelect,
-      _ref3$selectedGroupId = _ref3.selectedGroupId,
-      selectedGroupId = _ref3$selectedGroupId === void 0 ? null : _ref3$selectedGroupId,
-      _ref3$hideHistory = _ref3.hideHistory,
-      hideHistory = _ref3$hideHistory === void 0 ? false : _ref3$hideHistory;
+var EditorWrapper = styled("div")(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    width: "45%",
+    padding: "1rem",
+    paddingLeft: "2rem"
+  };
+});
+export var MainLayout = function MainLayout(_ref4) {
+  var _state$images$state$s, _state$images$state$s2;
+
+  var state = _ref4.state,
+      dispatch = _ref4.dispatch,
+      _ref4$alwaysShowNextB = _ref4.alwaysShowNextButton,
+      alwaysShowNextButton = _ref4$alwaysShowNextB === void 0 ? false : _ref4$alwaysShowNextB,
+      _ref4$alwaysShowPrevB = _ref4.alwaysShowPrevButton,
+      alwaysShowPrevButton = _ref4$alwaysShowPrevB === void 0 ? false : _ref4$alwaysShowPrevB,
+      RegionEditLabel = _ref4.RegionEditLabel,
+      onRegionClassAdded = _ref4.onRegionClassAdded,
+      hideHeader = _ref4.hideHeader,
+      hideHeaderText = _ref4.hideHeaderText,
+      _ref4$hideNext = _ref4.hideNext,
+      hideNext = _ref4$hideNext === void 0 ? false : _ref4$hideNext,
+      _ref4$hidePrev = _ref4.hidePrev,
+      hidePrev = _ref4$hidePrev === void 0 ? false : _ref4$hidePrev,
+      _ref4$hideClone = _ref4.hideClone,
+      hideClone = _ref4$hideClone === void 0 ? false : _ref4$hideClone,
+      _ref4$hideSettings = _ref4.hideSettings,
+      hideSettings = _ref4$hideSettings === void 0 ? false : _ref4$hideSettings,
+      _ref4$hideFullScreen = _ref4.hideFullScreen,
+      hideFullScreen = _ref4$hideFullScreen === void 0 ? false : _ref4$hideFullScreen,
+      _ref4$hideSave = _ref4.hideSave,
+      hideSave = _ref4$hideSave === void 0 ? false : _ref4$hideSave,
+      _ref4$groups = _ref4.groups,
+      groups = _ref4$groups === void 0 ? [] : _ref4$groups,
+      _ref4$onGroupSelect = _ref4.onGroupSelect,
+      onGroupSelect = _ref4$onGroupSelect === void 0 ? function () {} : _ref4$onGroupSelect,
+      _ref4$hideHistory = _ref4.hideHistory,
+      hideHistory = _ref4$hideHistory === void 0 ? false : _ref4$hideHistory,
+      _ref4$hideNotEditingL = _ref4.hideNotEditingLabel,
+      hideNotEditingLabel = _ref4$hideNotEditingL === void 0 ? false : _ref4$hideNotEditingL,
+      _ref4$showEditor = _ref4.showEditor,
+      showEditor = _ref4$showEditor === void 0 ? false : _ref4$showEditor,
+      _ref4$showPageSelecto = _ref4.showPageSelector,
+      showPageSelector = _ref4$showPageSelecto === void 0 ? false : _ref4$showPageSelecto,
+      _ref4$onRecalc = _ref4.onRecalc,
+      onRecalc = _ref4$onRecalc === void 0 ? function () {} : _ref4$onRecalc,
+      _ref4$onSave = _ref4.onSave,
+      onSave = _ref4$onSave === void 0 ? function () {} : _ref4$onSave,
+      _ref4$recalcActive = _ref4.recalcActive,
+      recalcActive = _ref4$recalcActive === void 0 ? false : _ref4$recalcActive,
+      _ref4$saveActive = _ref4.saveActive,
+      saveActive = _ref4$saveActive === void 0 ? false : _ref4$saveActive,
+      _ref4$allowedGroups = _ref4.allowedGroups,
+      allowedGroups = _ref4$allowedGroups === void 0 ? {} : _ref4$allowedGroups,
+      onMetadataChange = _ref4.onMetadataChange;
   var classes = useStyles();
   var settings = useSettings();
   var fullScreenHandle = useFullScreenHandle();
@@ -192,7 +221,9 @@ export var MainLayout = function MainLayout(_ref3) {
     onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
     onChangeVideoPlaying: action("CHANGE_VIDEO_PLAYING", "isPlaying"),
     onRegionClassAdded: onRegionClassAdded,
-    allowComments: state.allowComments
+    allowComments: state.allowComments,
+    hideNotEditingLabel: hideNotEditingLabel,
+    allowedGroups: allowedGroups
   }));
   var onClickIconSidebarItem = useEventCallback(function (item) {
     dispatch({
@@ -213,7 +244,53 @@ export var MainLayout = function MainLayout(_ref3) {
     });
   });
   var debugModeOn = Boolean(window.localStorage.$ANNOTATE_DEBUG_MODE && state);
-  var nextImageHasRegions = !nextImage || nextImage.regions && nextImage.regions.length > 0;
+  var nextImageHasRegions = !nextImage || nextImage.regions && nextImage.regions.length > 0; // Editor.js blocks
+
+  var selectedGroupId = ((_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.selectedGroupId) || null;
+  var editorBlocks = regionsToBlocks(((_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : _state$images$state$s2.regions) || []);
+  var blocks = editorBlocks.filter(function (i) {
+    var _i$data;
+
+    return (i === null || i === void 0 ? void 0 : (_i$data = i.data) === null || _i$data === void 0 ? void 0 : _i$data.groupId) === selectedGroupId;
+  });
+
+  var handleEditorChange = function handleEditorChange(_ref5) {
+    var imageIndex = _ref5.imageIndex,
+        data = _ref5.data;
+    var newRegions = data.blocks.map(function (i) {
+      return {
+        id: i.id,
+        cls: i.data.labelName,
+        text: i.data.text
+      };
+    });
+    dispatch({
+      type: "UPDATE_REGIONS",
+      regions: newRegions,
+      imageIndex: imageIndex
+    });
+  };
+
+  var pages = state.images.map(function (i, idx) {
+    var _i$metadata;
+
+    return {
+      id: idx,
+      src: i.src,
+      isActive: idx === state.selectedImage,
+      pageNumber: (i === null || i === void 0 ? void 0 : (_i$metadata = i.metadata) === null || _i$metadata === void 0 ? void 0 : _i$metadata.find(function (md) {
+        return md.key === "page";
+      }).value) || null
+    };
+  });
+
+  var handlePageClick = function handlePageClick(pageIndex) {
+    dispatch({
+      type: "SELECT_IMAGE",
+      imageIndex: pageIndex
+    });
+  };
+
   return React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement(FullScreenContainer, null, React.createElement(FullScreen, {
@@ -232,7 +309,19 @@ export var MainLayout = function MainLayout(_ref3) {
     allowChanges: true,
     handlers: hotkeyHandlers,
     className: classnames(classes.container, state.fullScreen && "Fullscreen")
-  }, React.createElement(Workspace, {
+  }, React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  }, showPageSelector && React.createElement(PagesSelector, {
+    pages: pages,
+    onPageClick: handlePageClick,
+    onRecalc: onRecalc,
+    onSave: onSave,
+    saveActive: saveActive,
+    recalcActive: recalcActive
+  }), React.createElement(Workspace, {
     allowFullscreen: true,
     iconDictionary: iconDictionary,
     hideHeader: hideHeader,
@@ -326,18 +415,21 @@ export var MainLayout = function MainLayout(_ref3) {
       imageTagList: state.imageTagList,
       onChangeImage: action("CHANGE_IMAGE", "delta"),
       expandedByDefault: true
-    }), // (state.images?.length || 0) > 1 && (
+    }),, // (state.images?.length || 0) > 1 && (
     //   <ImageSelector
     //     onSelect={action("SELECT_REGION", "region")}
     //     images={state.images}
     //   />
     // ),
-    groups && React.createElement(GroupSelector, {
-      title: "Articles",
-      groups: groups,
-      selectedGroupId: selectedGroupId,
-      onSelect: onGroupSelect
-    }), React.createElement(RegionSelector, {
+    // groups && (
+    //   <GroupSelector
+    //     title="Articles"
+    //     groups={groups}
+    //     selectedGroupId={selectedGroupId}
+    //     onSelect={onGroupSelect}
+    //   />
+    // )
+    React.createElement(RegionSelector, {
       regions: activeImage ? activeImage.regions : emptyArr,
       onSelectRegion: action("SELECT_REGION", "region"),
       onDeleteRegion: action("DELETE_REGION", "region"),
@@ -352,8 +444,19 @@ export var MainLayout = function MainLayout(_ref3) {
     }), !hideHistory && React.createElement(HistorySidebarBox, {
       history: state.history,
       onRestoreHistory: action("RESTORE_HISTORY")
+    }), React.createElement(MetadataEditor, {
+      state: state,
+      onMetadataChange: onMetadataChange
     })].filter(Boolean)
-  }, canvas), React.createElement(SettingsDialog, {
+  }, canvas), showEditor && React.createElement(EditorWrapper, {
+    id: "editor-wrapper"
+  }, React.createElement(Editor, {
+    id: "editor",
+    blocks: blocks,
+    imageIndex: state.selectedImage,
+    key: "".concat(state.selectedImage, "#").concat(selectedGroupId),
+    onChange: handleEditorChange
+  }))), React.createElement(SettingsDialog, {
     open: state.settingsOpen,
     onClose: function onClose() {
       return dispatch({

package/MetadataEditorSidebarBox/index.js

@@ -0,0 +1,126 @@
+import React, { memo } from "react";
+import SidebarBoxContainer from "../SidebarBoxContainer";
+import DescriptionIcon from "@mui/icons-material/Description";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
+var MetadataItemDiv = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: "flex",
+    flexDirection: "column",
+    marginBottom: "1rem",
+    "& > label": {
+      fontSize: "1rem",
+      marginBottom: ".5rem",
+      textTransform: "capitalize"
+    }
+  };
+});
+
+var MetadataItem = function MetadataItem(_ref2) {
+  var name = _ref2.name,
+      value = _ref2.value,
+      imageIndex = _ref2.imageIndex,
+      onChange = _ref2.onChange;
+
+  var handleChange = function handleChange(e) {
+    e.preventDefault();
+    var _e$target = e.target,
+        name = _e$target.name,
+        value = _e$target.value;
+    onChange({
+      name: name,
+      value: value,
+      imageIndex: imageIndex
+    });
+  };
+
+  return React.createElement(MetadataItemDiv, null, React.createElement("label", {
+    for: name
+  }, name), React.createElement("input", {
+    type: "text",
+    value: value,
+    name: name,
+    onChange: handleChange
+  }));
+};
+
+var MetadataList = function MetadataList(_ref3) {
+  var title = _ref3.title,
+      metadata = _ref3.metadata,
+      imageIndex = _ref3.imageIndex,
+      onMetadataChange = _ref3.onMetadataChange;
+  return React.createElement("div", null, React.createElement("h2", null, title), metadata.map(function (_ref4) {
+    var key = _ref4.key,
+        value = _ref4.value;
+    return React.createElement(MetadataItem, {
+      name: key,
+      value: value,
+      imageIndex: imageIndex,
+      onChange: onMetadataChange
+    });
+  }));
+};
+
+var theme = createTheme();
+var DivContainer = styled("div")(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    paddingLeft: 16,
+    paddingRight: 16,
+    fontSize: 12,
+    "& h1": {
+      fontSize: 18
+    },
+    "& h2": {
+      fontSize: 14
+    },
+    "& h3": {
+      fontSize: 12
+    },
+    "& h4": {
+      fontSize: 12
+    },
+    "& h5": {
+      fontSize: 12
+    },
+    "& h6": {
+      fontSize: 12
+    },
+    "& p": {
+      fontSize: 12
+    },
+    "& a": {},
+    "& img": {
+      width: "100%"
+    }
+  };
+});
+export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
+  var _state$images$state$s;
+
+  var state = _ref6.state,
+      onMetadataChange = _ref6.onMetadataChange;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(SidebarBoxContainer, {
+    title: "Metadata",
+    icon: React.createElement(DescriptionIcon, {
+      style: {
+        color: grey[700]
+      }
+    }),
+    expandedByDefault: true
+  }, React.createElement(DivContainer, null, React.createElement(MetadataList, {
+    title: "Global",
+    metadata: state.metadata,
+    onMetadataChange: onMetadataChange
+  }), (state === null || state === void 0 ? void 0 : (_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.metadata) && React.createElement(MetadataList, {
+    title: "Local",
+    metadata: state.images[state.selectedImage].metadata,
+    imageIndex: state.selectedImage,
+    onMetadataChange: onMetadataChange
+  }))));
+};
+export default memo(MetadataEditorSidebarBox);

package/PageSelector/index.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import classnames from "classnames";
+
+require('./page-selector.css').toString();
+
+function PageThumbnail(_ref) {
+  var src = _ref.src,
+      isActive = _ref.isActive,
+      onClick = _ref.onClick,
+      pageNumber = _ref.pageNumber;
+  return React.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    className: classnames('page-thumbnail', {
+      'page-thumbnail-is-active': isActive
+    }),
+    onClick: onClick
+  }, React.createElement("img", {
+    src: src,
+    alt: ""
+  }), pageNumber !== undefined && React.createElement("div", {
+    className: "page-number-wrapper"
+  }, React.createElement("span", {
+    className: "page-number"
+  }, pageNumber)));
+}
+
+function PagesSelector(_ref2) {
+  var pages = _ref2.pages,
+      onPageClick = _ref2.onPageClick,
+      onRecalc = _ref2.onRecalc,
+      onSave = _ref2.onSave,
+      recalcActive = _ref2.recalcActive,
+      saveActive = _ref2.saveActive;
+  return React.createElement("div", {
+    className: "page-selector"
+  }, React.createElement("div", {
+    className: "bottom-buttons"
+  }, React.createElement("button", {
+    onClick: onRecalc,
+    disabled: !recalcActive
+  }, "Recalc"), React.createElement("button", {
+    onClick: onSave,
+    disabled: !saveActive
+  }, "Save")), React.createElement("div", {
+    className: "pages"
+  }, pages.map(function (page, idx) {
+    return React.createElement(PageThumbnail, {
+      key: page.id,
+      src: page.src,
+      isActive: page.isActive,
+      onClick: function onClick() {
+        return onPageClick(idx);
+      }
+    });
+  })));
+}
+
+PagesSelector.defaultProps = {
+  onPageClick: function onPageClick() {},
+  onRecalc: function onRecalc() {},
+  onSave: function onSave() {},
+  recalcActive: false,
+  saveActive: false,
+  pageNumber: undefined
+};
+export default PagesSelector;

package/RegionLabel/index.js

@@ -27,7 +27,9 @@ export var RegionLabel = function RegionLabel(_ref) {
       onClose = _ref.onClose,
       onOpen = _ref.onOpen,
       onRegionClassAdded = _ref.onRegionClassAdded,
-      allowComments = _ref.allowComments;
+      allowComments = _ref.allowComments,
+      hideNotEditingLabel = _ref.hideNotEditingLabel,
+      allowedGroups = _ref.allowedGroups;
   var classes = useStyles();
   var commentInputRef = useRef(null);
 
@@ -37,6 +39,7 @@ export var RegionLabel = function RegionLabel(_ref) {
     if (commentInput) return commentInput.focus();
   };
 
+  if (hideNotEditingLabel && !editing) return null;
   return React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement(Paper, {
@@ -127,7 +130,18 @@ export var RegionLabel = function RegionLabel(_ref) {
         label: c
       };
     }))
-  })), (allowedTags || []).length > 0 && React.createElement("div", {
+  })), (allowedGroups || []).length > 0 && React.createElement(Select, {
+    onChange: function onChange(newGroup) {
+      return _onChange(_objectSpread({}, region, {
+        groupId: newGroup.value
+      }));
+    },
+    placeholder: "Group",
+    value: allowedGroups.filter(function (g) {
+      return g.value === region.groupId;
+    }),
+    options: allowedGroups
+  }), (allowedTags || []).length > 0 && React.createElement("div", {
     style: {
       marginTop: 4
     }

package/RegionShapes/index.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { memo } from "react";
 import colorAlpha from "color-alpha";
+import useColors from '../hooks/use-colors';
 
 function clamp(num, min, max) {
   return num <= min ? min : num >= max ? max : num;
@@ -40,17 +41,36 @@ var RegionComponents = {
     var region = _ref3.region,
         iw = _ref3.iw,
         ih = _ref3.ih;
-    return React.createElement("g", {
-      transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
-    }, React.createElement("rect", {
-      strokeWidth: 2,
-      x: 0,
-      y: 0,
-      width: Math.max(region.w * iw, 0),
-      height: Math.max(region.h * ih, 0),
-      stroke: colorAlpha(region.color, 0.75),
-      fill: colorAlpha(region.color, 0.25)
-    }));
+
+    var _useColors = useColors(),
+        clsColor = _useColors.clsColor,
+        groupColor = _useColors.groupColor;
+
+    if (region.groupId !== undefined) {
+      return React.createElement("g", {
+        transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
+      }, React.createElement("rect", {
+        strokeWidth: region.groupHighlighted ? 3 : 0,
+        x: 0,
+        y: 0,
+        width: Math.max(region.w * iw, 0),
+        height: Math.max(region.h * ih, 0),
+        stroke: colorAlpha(clsColor(region.cls), 0.85),
+        fill: region.groupHighlighted ? colorAlpha(groupColor(region.groupId), 0.5) : colorAlpha(groupColor(region.groupId), 0.25)
+      }));
+    } else {
+      return React.createElement("g", {
+        transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
+      }, React.createElement("rect", {
+        strokeWidth: 2,
+        x: 0,
+        y: 0,
+        width: Math.max(region.w * iw, 0),
+        height: Math.max(region.h * ih, 0),
+        stroke: colorAlpha(clsColor(region.cls), 0.85),
+        fill: colorAlpha(clsColor(region.cls), 0.25)
+      }));
+    }
   }),
   polygon: memo(function (_ref4) {
     var region = _ref4.region,

package/RegionTags/index.js

@@ -33,7 +33,9 @@ export var RegionTags = function RegionTags(_ref) {
       imageSrc = _ref.imageSrc,
       RegionEditLabel = _ref.RegionEditLabel,
       onRegionClassAdded = _ref.onRegionClassAdded,
-      allowComments = _ref.allowComments;
+      allowComments = _ref.allowComments,
+      hideNotEditingLabel = _ref.hideNotEditingLabel,
+      allowedGroups = _ref.allowedGroups;
   var RegionLabel = RegionEditLabel != null ? RegionEditLabel : DefaultRegionLabel;
   return regions.filter(function (r) {
     return r.visible || r.visible === undefined;
@@ -131,7 +133,9 @@ export var RegionTags = function RegionTags(_ref) {
       regions: regions,
       imageSrc: imageSrc,
       onRegionClassAdded: onRegionClassAdded,
-      allowComments: allowComments
+      allowComments: allowComments,
+      hideNotEditingLabel: hideNotEditingLabel,
+      allowedGroups: allowedGroups
     })));
   });
 };

package/SettingsProvider/index.js

@@ -30,11 +30,16 @@ export var useSettings = function useSettings() {
   return useContext(SettingsContext);
 };
 export var SettingsProvider = function SettingsProvider(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      clsColors = _ref.clsColors,
+      groupColors = _ref.groupColors;
 
-  var _useState = useState(function () {
+  var _useState = useState(_objectSpread({}, function () {
     return pullSettingsFromLocalStorage();
-  }),
+  }, {
+    clsColors: clsColors,
+    groupColors: groupColors
+  })),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
       changeState = _useState2[1];

package/hooks/use-colors.js

@@ -0,0 +1,101 @@
+import { useSettings } from "../SettingsProvider";
+
+function defaultClsColor(cls) {
+  switch (cls) {
+    case 'title':
+      return '#f70202';
+
+    case 'subtitle':
+      return "#ffb405";
+
+    case 'text':
+      return "#14deef";
+
+    case 'author':
+      return "#f8d51e";
+
+    case 'appendix':
+      return "#bfede2";
+
+    case 'photo_author':
+      return "#9a17bb";
+
+    case 'photo_caption':
+      return "#ff84f6";
+
+    case 'advertisement':
+      return "#ffb201";
+
+    case 'other_graphics':
+      return "#ff5400";
+
+    case 'unknown':
+      return "#bfede2";
+
+    case 'about_author':
+      return "#9a17bb";
+
+    case 'image':
+      return "#14deef";
+
+    case 'interview':
+      return "#23b20f";
+
+    case 'table':
+      return "#02b4ba";
+
+    default:
+      return "#02b4ba";
+  }
+}
+
+function defaultGroupColor(groupId) {
+  switch (groupId) {
+    case "0":
+      return "#FDDFDF";
+
+    case "1":
+      return "#FCF7DE";
+
+    case "2":
+      return "#DEFDE0";
+
+    case "3":
+      return "#DEF3FD";
+
+    case "4":
+      return "#F0DEFD";
+
+    default:
+      return "#F0DEFD";
+  }
+}
+
+var useColors = function useColors() {
+  var _useSettings = useSettings(),
+      clsColors = _useSettings.clsColors,
+      groupColors = _useSettings.groupColors;
+
+  var clsColor = function clsColor(cls) {
+    if (clsColors[cls]) {
+      return clsColors[cls];
+    }
+
+    return defaultClsColor(cls);
+  };
+
+  var groupColor = function groupColor(groupId) {
+    if (groupColors[groupId]) {
+      return groupColors[groupId];
+    }
+
+    return defaultGroupColor(groupId);
+  };
+
+  return {
+    clsColor: clsColor,
+    groupColor: groupColor
+  };
+};
+
+export default useColors;