@abidibo/react-cam-roi 0.11.0 → 0.12.0

package/dist/index.esm.js

@@ -485,6 +485,11 @@ var TextField = function (_a) {
     return (jsxs("div", { className: css('text-field-wrapper', styles$8, themeMode), style: { width: fullWidth ? '100%' : 'auto' }, children: [label && (jsx("label", { className: "".concat(css('text-field-label', styles$8, themeMode), " ").concat(error ? css('text-field-label-error', styles$8, null) : ''), children: jsxs(Typography, { children: [label, required && ' *'] }) })), jsx("input", { type: type, className: "".concat(css('text-field', styles$8, themeMode), " ").concat(error ? css('text-field-error', styles$8, null) : ''), onChange: handleChange, value: value, readOnly: readOnly, disabled: disabled }), helperText && (jsx(Typography, { component: 'div', className: "".concat(css('text-field-helper-text', styles$8, themeMode), " ").concat(error ? css('text-field-helper-text-error', styles$8, null) : ''), children: helperText }))] }));
 };
 
+var Tooltip = function (_a) {
+    var title = _a.title, children = _a.children;
+    return jsx("div", { title: title, children: children });
+};
+
 var Typography = function (_a) {
     var children = _a.children, _b = _a.style, style = _b === void 0 ? {} : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.component, component = _d === void 0 ? 'span' : _d;
     var Tag = component;
@@ -523,6 +528,7 @@ var DefaultUiContext = {
     primaryColor: '#1976d2',
     primaryFgColor: '#fff',
     Typography: Typography,
+    Tooltip: Tooltip,
     IconButton: IconButton,
     Modal: Modal,
     DeleteIcon: DeleteIcon,
@@ -544,6 +550,7 @@ var DefaultUiContext = {
         cannotDrawMorePolygons: 'You cannot draw more polygons',
         cannotDrawMorePolylines: 'You cannot draw more polylines',
         cannotDrawMoreRectangles: 'You cannot draw more rectangles',
+        fullImage: 'Full image',
         id: 'ID',
         invalidSubmission: 'Invalid submission',
         mainParametersMetadata: 'Main parameters',
@@ -559,10 +566,10 @@ var DefaultUiContext = {
         polylineHelpText: 'click to draw all the polyline points, double click on the last point to stop drawing',
         presetDescription: 'Preset description',
         presetName: 'Image preset',
-        rect: 'Rectangle',
-        rectHelpText: 'click and drag to draw the rectangle',
         pointer: 'Selection',
         pointerHelpText: 'click a shape to select it',
+        rect: 'Rectangle',
+        rectHelpText: 'click and drag to draw the rectangle',
         requiredField: 'This field is required',
         roiMultiplicityEqRule: 'a number of "{role}" ({type}) equal to {threshold}',
         roiMultiplicityGtRule: 'a number of "{role}" ({type}) greater than {threshold}',
@@ -573,6 +580,7 @@ var DefaultUiContext = {
         roisToBeDrawn: 'ROIs to be drawn',
         role: 'Role',
         save: 'Save',
+        selection: 'Selection',
         shapeParametersMetadata: 'Shape parameters',
         shapesOfRoleShouldBeEqualToThreshold: 'Shapes of role {role} should be equal to {threshold}',
         shapesOfRoleShouldBeGreaterThanThreshold: 'Shapes of role {role} should be greater than {threshold}',
@@ -584,10 +592,11 @@ var DefaultUiContext = {
 };
 var UiContext = createContext(DefaultUiContext); // eslint-disable-line
 var UiProvider = function (_a) {
-    var children = _a.children, enableLogs = _a.enableLogs, themeMode = _a.themeMode, primaryColor = _a.primaryColor, primaryFgColor = _a.primaryFgColor, Typography = _a.Typography, Modal = _a.Modal, IconButton = _a.IconButton, DeleteIcon = _a.DeleteIcon, EditIcon = _a.EditIcon, CopyIcon = _a.CopyIcon, AnnotateIcon = _a.AnnotateIcon, SaveIcon = _a.SaveIcon, CloseIcon = _a.CloseIcon, TextField = _a.TextField, NumberField = _a.NumberField, BoolField = _a.BoolField, EnumField = _a.EnumField, Button = _a.Button, pickerColors = _a.pickerColors, notify = _a.notify, strings = _a.strings;
+    var children = _a.children, enableLogs = _a.enableLogs, themeMode = _a.themeMode, primaryColor = _a.primaryColor, primaryFgColor = _a.primaryFgColor, Typography = _a.Typography, Tooltip = _a.Tooltip, Modal = _a.Modal, IconButton = _a.IconButton, DeleteIcon = _a.DeleteIcon, EditIcon = _a.EditIcon, CopyIcon = _a.CopyIcon, AnnotateIcon = _a.AnnotateIcon, SaveIcon = _a.SaveIcon, CloseIcon = _a.CloseIcon, TextField = _a.TextField, NumberField = _a.NumberField, BoolField = _a.BoolField, EnumField = _a.EnumField, Button = _a.Button, pickerColors = _a.pickerColors, notify = _a.notify, strings = _a.strings;
     var ctx = {
         enableLogs: enableLogs !== null && enableLogs !== void 0 ? enableLogs : DefaultUiContext.enableLogs,
         Typography: Typography !== null && Typography !== void 0 ? Typography : DefaultUiContext.Typography,
+        Tooltip: Tooltip !== null && Tooltip !== void 0 ? Tooltip : DefaultUiContext.Tooltip,
         Modal: Modal !== null && Modal !== void 0 ? Modal : DefaultUiContext.Modal,
         IconButton: IconButton !== null && IconButton !== void 0 ? IconButton : DefaultUiContext.IconButton,
         DeleteIcon: DeleteIcon !== null && DeleteIcon !== void 0 ? DeleteIcon : DefaultUiContext.DeleteIcon,
@@ -1700,7 +1709,7 @@ var styles$1 = {"toolbar":"Toolbar-module_toolbar__ywNcv","toolbar-light":"Toolb
 var Toolbar = function (_a) {
     var _b;
     var canvasRef = _a.canvasRef, imageSize = _a.imageSize;
-    var _c = useContext(UiContext), IconButton = _c.IconButton, themeMode = _c.themeMode, primaryColor = _c.primaryColor, Typography = _c.Typography, strings = _c.strings;
+    var _c = useContext(UiContext), IconButton = _c.IconButton, themeMode = _c.themeMode, primaryColor = _c.primaryColor, Typography = _c.Typography, strings = _c.strings, Tooltip = _c.Tooltip;
     var _d = useEditorContext(), activeTool = _d.activeTool, setActiveTool = _d.setActiveTool, configuration = _d.configuration, shapes = _d.shapes, editorId = _d.editorId, activeColor = _d.activeColor;
     var iconColor = function (tool) { return (tool === activeTool ? primaryColor : themeMode === 'light' ? 'black' : 'white'); };
     var setTool = function (tool) { return function () { return setActiveTool(tool); }; };
@@ -1714,7 +1723,7 @@ var Toolbar = function (_a) {
     var handleRenderFullImagePolygon = function () {
         renderFullImagePolygon(editorId, canvasRef.current, activeColor, imageSize);
     };
-    return (jsxs(Fragment, { children: [jsx("div", { className: css('toolbar', styles$1, themeMode), children: enableRois(configuration) && (jsxs(Fragment, { children: [jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }), (!hideForbiddenTools || pointEnabled) && (jsx(IconButton, { onClick: setTool("point" /* ToolEnum.Point */), disabled: !pointEnabled, children: jsx(PointIcon, { color: iconColor("point" /* ToolEnum.Point */) }) })), (!hideForbiddenTools || polylineEnabled) && (jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) })), (!hideForbiddenTools || polygonEnabled) && (jsxs(Fragment, { children: [jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) }), jsx(IconButton, { onClick: handleRenderFullImagePolygon, disabled: !polygonEnabled, children: jsx(FullRoiIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) })] })), (!hideForbiddenTools || rectangleEnabled) && (jsx(IconButton, { onClick: setTool("rect" /* ToolEnum.Rectangle */), disabled: !rectangleEnabled, children: jsx(RectangleIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) })), jsx(ColorPicker, { style: { marginLeft: 'auto', marginRight: '.5rem' } })] })) }), enableRois(configuration) && (jsx("div", { className: css('toolbar-helper', styles$1, themeMode), children: jsxs(Typography, { children: [strings[activeTool], ": ", strings["".concat(activeTool, "HelpText")]] }) }))] }));
+    return (jsxs(Fragment, { children: [jsx("div", { className: css('toolbar', styles$1, themeMode), children: enableRois(configuration) && (jsxs(Fragment, { children: [jsx(Tooltip, { title: strings.selection, children: jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }) }), (!hideForbiddenTools || pointEnabled) && (jsx(Tooltip, { title: strings.point, children: jsx(IconButton, { onClick: setTool("point" /* ToolEnum.Point */), disabled: !pointEnabled, children: jsx(PointIcon, { color: iconColor("point" /* ToolEnum.Point */) }) }) })), (!hideForbiddenTools || polylineEnabled) && (jsx(Tooltip, { title: strings.polyline, children: jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) }) })), (!hideForbiddenTools || polygonEnabled) && (jsxs(Fragment, { children: [jsx(Tooltip, { title: strings.polygon, children: jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) }) }), jsx(Tooltip, { title: strings.fullImage, children: jsx(IconButton, { onClick: handleRenderFullImagePolygon, disabled: !polygonEnabled, children: jsx(FullRoiIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) }) })] })), (!hideForbiddenTools || rectangleEnabled) && (jsx(Tooltip, { title: strings.rect, children: jsx(IconButton, { onClick: setTool("rect" /* ToolEnum.Rectangle */), disabled: !rectangleEnabled, children: jsx(RectangleIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) }) })), jsx(ColorPicker, { style: { marginLeft: 'auto', marginRight: '.5rem' } })] })) }), enableRois(configuration) && (jsx("div", { className: css('toolbar-helper', styles$1, themeMode), children: jsxs(Typography, { children: [strings[activeTool], ": ", strings["".concat(activeTool, "HelpText")]] }) }))] }));
 };
 
 var styles = {"top-bar":"TopBar-module_top-bar__9oCUR","main-parameters-view":"TopBar-module_main-parameters-view__f-0SX","main-parameters-view-light":"TopBar-module_main-parameters-view-light__o-dbi","main-parameters-view-dark":"TopBar-module_main-parameters-view-dark__FnEnj","main-parameters-button":"TopBar-module_main-parameters-button__9JX--"};