@abidibo/react-cam-roi 0.10.0 → 0.12.0

package/README.md

@@ -332,6 +332,7 @@ type UiContextType = {
   primaryColor: string // primary color for internal components
   primaryFgColor: string // text color above primary bg for internal components
   Typography: React.FC<TypographyProps> // component used to surround text
+  Tooltip: React.FC<TooltipProps> // component used to show tooltips
   Modal: React.FC<ModalProps> // modal dialog component (it displays metadata forms)
   IconButton: React.FC<IconButtonProps> // wrapper for icon buttons
   DeleteIcon: React.FC<DeleteIconProps> // delete icon
@@ -352,6 +353,7 @@ type UiContextType = {
     cannotDrawMorePolygons: string
     cannotDrawMorePolylines: string
     cannotDrawMoreRectangles: string
+    fullImage: string
     id: string
     invalidSubmission: string
     mainParametersMetadata: string
@@ -382,6 +384,7 @@ type UiContextType = {
     roisToBeDrawn: string
     role: string
     save: string
+    selection: string
     shapeParametersMetadata: string
     shapesOfRoleShouldBeEqualToThreshold: string // with {role} and {threshold} placeholders
     shapesOfRoleShouldBeGreaterThanThreshold: string // with {role} and {threshold} placeholders
@@ -457,6 +460,17 @@ type TypographyProps = {
 }
 ```
 
+#### Tooltip
+
+##### Interface
+
+```ts
+type TooltipProps = {
+  children?: React.ReactNode
+  title: string
+}
+```
+
 #### IconButton
 
 ##### Interface
@@ -801,7 +815,7 @@ After cloning the repository and install dependencies (`yarn install`), you can
 
 In order to start developing just run the storybook, then make changes to code and the storybook will be updated.
 
-In order to test the library in onother local react project you can:
+In order to test the library in another local react project you can:
 
 ```bash
 cd react-cam-roi

package/dist/index.cjs.js

@@ -487,6 +487,11 @@ var TextField = function (_a) {
     return (jsxRuntime.jsxs("div", { className: css('text-field-wrapper', styles$8, themeMode), style: { width: fullWidth ? '100%' : 'auto' }, children: [label && (jsxRuntime.jsx("label", { className: "".concat(css('text-field-label', styles$8, themeMode), " ").concat(error ? css('text-field-label-error', styles$8, null) : ''), children: jsxRuntime.jsxs(Typography, { children: [label, required && ' *'] }) })), jsxRuntime.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 && (jsxRuntime.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 jsxRuntime.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;
@@ -525,6 +530,7 @@ var DefaultUiContext = {
     primaryColor: '#1976d2',
     primaryFgColor: '#fff',
     Typography: Typography,
+    Tooltip: Tooltip,
     IconButton: IconButton,
     Modal: Modal,
     DeleteIcon: DeleteIcon,
@@ -546,6 +552,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',
@@ -561,10 +568,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}',
@@ -575,6 +582,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}',
@@ -586,10 +594,11 @@ var DefaultUiContext = {
 };
 var UiContext = React.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,
@@ -813,12 +822,13 @@ var handleDoubleClickPolygon = function (editorId, canvas, activeColor, setIsDra
     }
 };
 var renderFullImagePolygon = function (editorId, canvas, activeColor, imageSize) {
+    var OFFSET = 5;
     var id = v4();
     var points = [
-        { x: 1, y: 1 },
-        { x: imageSize.width - 1, y: 0 },
-        { x: imageSize.width - 1, y: imageSize.height - 1 },
-        { x: 0, y: imageSize.height - 1 },
+        { x: OFFSET, y: OFFSET },
+        { x: imageSize.width - OFFSET, y: OFFSET },
+        { x: imageSize.width - OFFSET, y: imageSize.height - OFFSET },
+        { x: OFFSET, y: imageSize.height - OFFSET },
     ];
     var polygon = new oo(points, {
         fill: 'transparent',
@@ -1549,11 +1559,17 @@ var ParametersModalForm = function (_a) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[p.codename] = p.value, _a)));
     }, {});
+    // if not in modal we save at every field change
+    React.useEffect(function () {
+        if (noModal) {
+            handleSubmit();
+        }
+    }, [fields]);
     var handleSubmit = function () {
         if (shapeType && name === '') {
             setErrors({ name: strings.requiredField });
         }
-        else if (validateParametersForm(parameters, fields, setErrors, strings)) {
+        else if (!noModal || validateParametersForm(parameters, fields, setErrors, strings)) {
             var data_1 = __spreadArray([], parameters.map(function (p) { return ({ codename: p.codename, value: fields[p.codename] }); }), true);
             if (shapeType) {
                 onSubmit(data_1, { name: name, role: role });
@@ -1695,7 +1711,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 = React.useContext(UiContext), IconButton = _c.IconButton, themeMode = _c.themeMode, primaryColor = _c.primaryColor, Typography = _c.Typography, strings = _c.strings;
+    var _c = React.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); }; };
@@ -1709,7 +1725,7 @@ var Toolbar = function (_a) {
     var handleRenderFullImagePolygon = function () {
         renderFullImagePolygon(editorId, canvasRef.current, activeColor, imageSize);
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: css('toolbar', styles$1, themeMode), children: enableRois(configuration) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: jsxRuntime.jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }), (!hideForbiddenTools || pointEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("point" /* ToolEnum.Point */), disabled: !pointEnabled, children: jsxRuntime.jsx(PointIcon, { color: iconColor("point" /* ToolEnum.Point */) }) })), (!hideForbiddenTools || polylineEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: jsxRuntime.jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) })), (!hideForbiddenTools || polygonEnabled) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: jsxRuntime.jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) }), jsxRuntime.jsx(IconButton, { onClick: handleRenderFullImagePolygon, disabled: !polygonEnabled, children: jsxRuntime.jsx(FullRoiIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) })] })), (!hideForbiddenTools || rectangleEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("rect" /* ToolEnum.Rectangle */), disabled: !rectangleEnabled, children: jsxRuntime.jsx(RectangleIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) })), jsxRuntime.jsx(ColorPicker, { style: { marginLeft: 'auto', marginRight: '.5rem' } })] })) }), enableRois(configuration) && (jsxRuntime.jsx("div", { className: css('toolbar-helper', styles$1, themeMode), children: jsxRuntime.jsxs(Typography, { children: [strings[activeTool], ": ", strings["".concat(activeTool, "HelpText")]] }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: css('toolbar', styles$1, themeMode), children: enableRois(configuration) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { title: strings.selection, children: jsxRuntime.jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: jsxRuntime.jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }) }), (!hideForbiddenTools || pointEnabled) && (jsxRuntime.jsx(Tooltip, { title: strings.point, children: jsxRuntime.jsx(IconButton, { onClick: setTool("point" /* ToolEnum.Point */), disabled: !pointEnabled, children: jsxRuntime.jsx(PointIcon, { color: iconColor("point" /* ToolEnum.Point */) }) }) })), (!hideForbiddenTools || polylineEnabled) && (jsxRuntime.jsx(Tooltip, { title: strings.polyline, children: jsxRuntime.jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: jsxRuntime.jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) }) })), (!hideForbiddenTools || polygonEnabled) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { title: strings.polygon, children: jsxRuntime.jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: jsxRuntime.jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) }) }), jsxRuntime.jsx(Tooltip, { title: strings.fullImage, children: jsxRuntime.jsx(IconButton, { onClick: handleRenderFullImagePolygon, disabled: !polygonEnabled, children: jsxRuntime.jsx(FullRoiIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) }) })] })), (!hideForbiddenTools || rectangleEnabled) && (jsxRuntime.jsx(Tooltip, { title: strings.rect, children: jsxRuntime.jsx(IconButton, { onClick: setTool("rect" /* ToolEnum.Rectangle */), disabled: !rectangleEnabled, children: jsxRuntime.jsx(RectangleIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) }) })), jsxRuntime.jsx(ColorPicker, { style: { marginLeft: 'auto', marginRight: '.5rem' } })] })) }), enableRois(configuration) && (jsxRuntime.jsx("div", { className: css('toolbar-helper', styles$1, themeMode), children: jsxRuntime.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--"};
@@ -1724,7 +1740,7 @@ var TopBar = function () {
         setMetadata(__assign(__assign({}, metadata), { parameters: data }));
         setForm({ isOpen: false });
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: css('top-bar', styles, themeMode), children: [enableMainMetadata(configuration) && !((_a = configuration.options) === null || _a === void 0 ? void 0 : _a.viewMainParameters) && (jsxRuntime.jsxs(Button, { onClick: function () { return setForm({ isOpen: true }); }, children: [jsxRuntime.jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] })), jsxRuntime.jsxs(Button, { primary: true, onClick: onSubmit, children: [jsxRuntime.jsx(SaveIcon, { color: primaryFgColor }), " ", strings.save] }), form.isOpen && (jsxRuntime.jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata }))] }), enableMainMetadata(configuration) && ((_b = configuration.options) === null || _b === void 0 ? void 0 : _b.viewMainParameters) && (jsxRuntime.jsxs("div", { className: css('main-parameters-view', styles, themeMode), children: [jsxRuntime.jsx("div", { className: css('main-parameters-button', styles, themeMode), children: jsxRuntime.jsxs(Button, { onClick: function () { return setForm({ isOpen: true }); }, children: [jsxRuntime.jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] }) }), jsxRuntime.jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata, readOnly: true, noModal: true })] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: css('top-bar', styles, themeMode), children: [enableMainMetadata(configuration) && !((_a = configuration.options) === null || _a === void 0 ? void 0 : _a.viewMainParameters) && (jsxRuntime.jsxs(Button, { onClick: function () { return setForm({ isOpen: true }); }, children: [jsxRuntime.jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] })), jsxRuntime.jsxs(Button, { primary: true, onClick: onSubmit, children: [jsxRuntime.jsx(SaveIcon, { color: primaryFgColor }), " ", strings.save] }), form.isOpen && (jsxRuntime.jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata }))] }), enableMainMetadata(configuration) && ((_b = configuration.options) === null || _b === void 0 ? void 0 : _b.viewMainParameters) && (jsxRuntime.jsx("div", { className: css('main-parameters-view', styles, themeMode), children: jsxRuntime.jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata, noModal: true }) }))] }));
 };
 
 // https://github.com/n-mazaheri/image-editor