@abidibo/react-cam-roi 0.0.12 → 0.0.13

package/dist/Components/RoiEditor/RoisInfo.js

@@ -0,0 +1,43 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { useEditorContext } from '../../Providers/EditorProvider';
+import { UiContext } from '../../Providers/UiProvider';
+import { OperatorEnum } from './Types';
+import { formatString, humanize } from '../../Utils';
+const RoisInfo = () => {
+    var _a;
+    const { strings, Typography } = useContext(UiContext);
+    const { configuration } = useEditorContext();
+    if (!((_a = configuration.rois) === null || _a === void 0 ? void 0 : _a.length))
+        return null;
+    return (_jsxs("div", { children: [_jsxs(Typography, { component: "div", children: [strings.roisToBeDrawn, ":"] }), _jsx("ul", { children: configuration.rois.map(r => {
+                    var _a, _b;
+                    let rule;
+                    const data = {
+                        role: humanize(r.role),
+                        type: r.type,
+                        threshold: (_a = r.multiplicity) === null || _a === void 0 ? void 0 : _a.threshold,
+                    };
+                    switch ((_b = r.multiplicity) === null || _b === void 0 ? void 0 : _b.operator) {
+                        case OperatorEnum.Eq:
+                            rule = formatString(strings.roiMultiplicityEqRule, data);
+                            break;
+                        case OperatorEnum.Lt:
+                            rule = formatString(strings.roiMultiplicityLtRule, data);
+                            break;
+                        case OperatorEnum.Lte:
+                            rule = formatString(strings.roiMultiplicityLteRule, data);
+                            break;
+                        case OperatorEnum.Gt:
+                            rule = formatString(strings.roiMultiplicityGtRule, data);
+                            break;
+                        case OperatorEnum.Gte:
+                            rule = formatString(strings.roiMultiplicityGteRule, data);
+                            break;
+                        default:
+                            rule = formatString(strings.roiMultiplicityNoRule, data);
+                    }
+                    return (_jsx("li", { children: rule }, r.role));
+                }) })] }));
+};
+export default RoisInfo;

package/dist/Components/RoiEditor/ShapesList.js

@@ -2,46 +2,76 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useContext, useEffect, useState } from 'react';
 import { useEditorContext } from '../../Providers/EditorProvider';
 import { UiContext } from '../../Providers/UiProvider';
-import { css } from '../../Utils';
+import { css, humanize } from '../../Utils';
 import Dispatcher from '../../Utils/Dispatcher';
 import ParametersModalForm from './ParametersModalForm';
 import styles from './ShapesList.module.css';
 const ShapesList = () => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { strings, Typography, IconButton, DeleteIcon, AnnotateIcon, SelectIcon, CopyIcon, themeMode } = useContext(UiContext);
-    const { shapes, removeShape, configuration, metadata, setMetadata } = useEditorContext();
+    const { shapes, removeShape, configuration, metadata, setMetadata, addShape, editorId } = useEditorContext();
     const [selected, setSelected] = useState([]);
-    const [form, setForm] = useState({ isOpen: false, shapeId: '' });
+    const [form, setForm] = useState({
+        isOpen: false,
+        shapeId: '',
+        type: null,
+        shape: null,
+    });
+    // open metadata form immediately after drawing the shape
+    useEffect(() => {
+        const openForm = (_, { id, type, shape }) => {
+            setForm({ isOpen: true, shapeId: id, type, shape });
+        };
+        Dispatcher.register(`canvas:${editorId}:shapeAdded`, openForm);
+        return () => {
+            Dispatcher.unregister(`canvas:${editorId}:shapeAdded`, openForm);
+        };
+    }, [editorId]);
     useEffect(() => {
         const setSelectedShapes = (_, event) => { var _a; return setSelected((_a = event === null || event === void 0 ? void 0 : event.map((s) => s.id)) !== null && _a !== void 0 ? _a : []); };
-        Dispatcher.register('canvas:shapeSelected', setSelectedShapes);
+        Dispatcher.register(`canvas:${editorId}:shapeSelected`, setSelectedShapes);
         return () => {
-            Dispatcher.unregister('canvas:shapeSelected', setSelectedShapes);
+            Dispatcher.unregister(`canvas:${editorId}:shapeSelected`, setSelectedShapes);
         };
-    }, [shapes]);
-    const handleCopyShape = (id) => () => {
-        Dispatcher.emit('canvas:copyShape', id);
+    }, [shapes, editorId]);
+    const handleCopyShape = (id) => (evt) => {
+        evt.stopPropagation();
+        Dispatcher.emit(`canvas:${editorId}:copyShape`, id);
     };
     const handleRemoveShape = (id) => () => {
-        Dispatcher.emit('canvas:removeShape', id);
+        Dispatcher.emit(`canvas:${editorId}:removeShape`, id);
         removeShape(id);
     };
     const handleSelectShape = (id) => () => {
-        Dispatcher.emit('canvas:selectShape', id);
+        Dispatcher.emit(`canvas:${editorId}:selectShape`, id);
     };
     const handleEditShapeMetadata = (id) => () => {
-        setForm({ isOpen: true, shapeId: id });
+        setForm({ isOpen: true, shapeId: id, type: null, shape: null });
+    };
+    const handleSubmitMetadata = (shapeId) => (data, properties) => {
+        // if in creation mode, add the shape
+        if (form.type !== null) {
+            addShape(shapeId, form.type, form.shape);
+        }
+        setMetadata(Object.assign(Object.assign({}, metadata), { rois: [...metadata.rois.filter((r) => r.id !== shapeId), Object.assign({ id: shapeId, parameters: data }, properties)] }));
+        setForm({ isOpen: false, shapeId: '', type: null, shape: null });
     };
-    const handleSubmitMetadata = (shapeId) => (data) => {
-        setMetadata(Object.assign(Object.assign({}, metadata), { rois: [
-                ...metadata.rois.filter((r) => r.id !== shapeId),
-                { id: shapeId, parameters: data },
-            ] }));
-        setForm({ isOpen: false, shapeId: '' });
+    const handleCloseMetadataForm = () => {
+        // if in creation mode do not add shape and delete shape from canvas
+        if (form.type !== null) {
+            Dispatcher.emit(`canvas:${editorId}:removeShape`, form.shapeId);
+        }
+        setForm({ isOpen: false, shapeId: '', type: null, shape: null });
     };
     const iconColor = themeMode === 'light' ? 'black' : 'white';
-    return (_jsxs(_Fragment, { children: [_jsxs("table", { className: css('shapes-table', styles, themeMode), children: [Object.keys(shapes).length > 0 && (_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: _jsx(Typography, { style: { fontWeight: 'bold' }, children: strings.id }) }), _jsx("th", { children: _jsx(Typography, { style: { fontWeight: 'bold' }, children: strings.type }) }), _jsx("th", {})] }) })), _jsx("tbody", { children: Object.keys(shapes).map((id) => {
-                            return (_jsxs("tr", { className: selected.indexOf(id) > -1 ? css('shapes-row-selected', styles, themeMode) : '', children: [_jsx("td", { children: _jsx("div", { children: _jsx(Typography, { children: id.substring(0, 6) }) }) }), _jsx("td", { children: _jsx(Typography, { children: strings[shapes[id].type] }) }), _jsxs("td", { children: [_jsx(IconButton, { onClick: handleSelectShape(id), children: _jsx(SelectIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleCopyShape(id), children: _jsx(CopyIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleEditShapeMetadata(id), disabled: !configuration.rois.find((roi) => roi.type === shapes[id].type), children: _jsx(AnnotateIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleRemoveShape(id), children: _jsx(DeleteIcon, { color: iconColor }) })] })] }, id));
-                        }) })] }), form.isOpen && (_jsx(ParametersModalForm, { parameters: (_b = (_a = configuration.rois.find((roi) => roi.type === shapes[form.shapeId].type)) === null || _a === void 0 ? void 0 : _a.parameters) !== null && _b !== void 0 ? _b : [], data: (_f = (_d = (_c = metadata.rois.find((roi) => roi.id === form.shapeId)) === null || _c === void 0 ? void 0 : _c.parameters) !== null && _d !== void 0 ? _d : (_e = configuration.rois.find((roi) => roi.type === shapes[form.shapeId].type)) === null || _e === void 0 ? void 0 : _e.parameters) !== null && _f !== void 0 ? _f : [], title: strings.mainParametersMetadata, onClose: () => setForm({ isOpen: false, shapeId: '' }), onSubmit: handleSubmitMetadata(form.shapeId) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("table", { className: css('shapes-table', styles, themeMode), children: [Object.keys(shapes).length > 0 && (_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: _jsx(Typography, { style: { fontWeight: 'bold' }, children: strings.name }) }), _jsx("th", { children: _jsx(Typography, { style: { fontWeight: 'bold' }, children: strings.role }) }), _jsx("th", { children: _jsx(Typography, { style: { fontWeight: 'bold' }, children: strings.type }) }), _jsx("th", {})] }) })), _jsx("tbody", { children: Object.keys(shapes).map((id, idx) => {
+                            var _a;
+                            const m = metadata.rois.find((roi) => roi.id === id);
+                            return (_jsxs("tr", { onClick: handleSelectShape(id), className: selected.indexOf(id) > -1
+                                    ? css('shapes-row-selected', styles, themeMode)
+                                    : idx % 2 === 0
+                                        ? css('shapes-row-even', styles, themeMode)
+                                        : css('shapes-row-odd', styles, themeMode), children: [_jsx("td", { children: _jsxs("div", { className: styles.shapesTableName, children: [_jsx("div", { className: styles.shapesTableColor, style: { backgroundColor: shapes[id].shape.stroke } }), _jsx(Typography, { children: m === null || m === void 0 ? void 0 : m.name })] }) }), _jsx("td", { children: _jsx(Typography, { children: humanize((_a = m === null || m === void 0 ? void 0 : m.role) !== null && _a !== void 0 ? _a : '') }) }), _jsx("td", { children: _jsx(Typography, { children: strings[shapes[id].type] }) }), _jsxs("td", { children: [_jsx(IconButton, { onClick: handleSelectShape(id), children: _jsx(SelectIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleCopyShape(id), children: _jsx(CopyIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleEditShapeMetadata(id), children: _jsx(AnnotateIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleRemoveShape(id), children: _jsx(DeleteIcon, { color: iconColor }) })] })] }, id));
+                        }) })] }), form.isOpen && (_jsx(ParametersModalForm, { shapeType: form.type || shapes[form.shapeId].type, shapeName: (_b = (_a = metadata.rois.find((roi) => roi.id === form.shapeId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '', shapeRole: (_d = (_c = metadata.rois.find((roi) => roi.id === form.shapeId)) === null || _c === void 0 ? void 0 : _c.role) !== null && _d !== void 0 ? _d : '', parameters: (_f = (_e = configuration.rois.find((roi) => roi.type === (form.type || shapes[form.shapeId].type))) === null || _e === void 0 ? void 0 : _e.parameters) !== null && _f !== void 0 ? _f : [], data: (_k = (_h = (_g = metadata.rois.find((roi) => roi.id === form.shapeId)) === null || _g === void 0 ? void 0 : _g.parameters) !== null && _h !== void 0 ? _h : (_j = configuration.rois.find((roi) => roi.type === (form.type || shapes[form.shapeId].type))) === null || _j === void 0 ? void 0 : _j.parameters) !== null && _k !== void 0 ? _k : [], title: strings.shapeParametersMetadata, onClose: handleCloseMetadataForm, onSubmit: handleSubmitMetadata(form.shapeId) }))] }));
 };
 export default ShapesList;

package/dist/Components/RoiEditor/ShapesList.module.css

@@ -4,7 +4,7 @@
 }
 
 .shapes-table th {
-  padding: .8rem .3rem .3rem;
+  padding: .8rem .3rem;
   text-align: left;
 }
 
@@ -34,3 +34,34 @@
 .shapes-row-selected-dark {
   background-color: #666;
 }
+
+.shapes-row-even-light {
+  background-color: #f7f7f7;
+}
+
+.shapes-row-even-dark {
+  background-color: #444;
+}
+
+.shapes-row-odd-light {
+  background-color: #f0f0f0;
+}
+
+.shapes-row-odd-dark {
+  background-color: #555;
+}
+
+.shapesTableName {
+  display: flex;
+  align-items: center;
+}
+
+.shapesTableColor {
+  border: 1px solid #000;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-right: .5rem;
+}

package/dist/Components/RoiEditor/Toolbar.js

@@ -1,33 +1,25 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
-import AnnotateIcon from '../../Icons/AnnotateIcon';
+import { useContext } from 'react';
 import PointerIcon from '../../Icons/PointerIcon';
 import PolygonIcon from '../../Icons/PolygonIcon';
 import PolylineIcon from '../../Icons/PolylineIcon';
 import RectangleIcon from '../../Icons/RectangleIcon';
-import SaveIcon from '../../Icons/SaveIcon';
 import { useEditorContext } from '../../Providers/EditorProvider';
 import { UiContext } from '../../Providers/UiProvider';
 import { css } from '../../Utils';
 import ColorPicker from './ColorPicker';
-import ParametersModalForm from './ParametersModalForm';
 import styles from './Toolbar.module.css';
-import { enableMainMetadata, enableRois } from './Utils';
+import { enableRois } from './Utils';
 const Toolbar = () => {
-    var _a, _b;
+    var _a;
     const { IconButton, themeMode, primaryColor, Typography, strings } = useContext(UiContext);
-    const { activeTool, setActiveTool, configuration, metadata, setMetadata, onSubmit } = useEditorContext();
-    const [form, setForm] = useState({ isOpen: false });
+    const { activeTool, setActiveTool, configuration } = useEditorContext();
     const iconColor = (tool) => (tool === activeTool ? primaryColor : themeMode === 'light' ? 'black' : 'white');
     const setTool = (tool) => () => setActiveTool(tool);
-    const handleSubmitMetadata = (data) => {
-        setMetadata(Object.assign(Object.assign({}, metadata), { parameters: data }));
-        setForm({ isOpen: false });
-    };
     const hideForbiddenTools = (_a = configuration.options) === null || _a === void 0 ? void 0 : _a.hideForbiddenTools;
     const polylineEnabled = configuration.rois.find((r) => r.type === "polyline" /* ToolEnum.Polyline */);
     const polygonEnabled = configuration.rois.find((r) => r.type === "polygon" /* ToolEnum.Polygon */);
     const rectangleEnabled = configuration.rois.find((r) => r.type === "rect" /* ToolEnum.Rectangle */);
-    return (_jsxs(_Fragment, { children: [((_b = configuration.options) === null || _b === void 0 ? void 0 : _b.description) && (_jsx("div", { className: css('toolbar-info', styles, themeMode), children: _jsx(Typography, { children: configuration.options.description }) })), _jsxs("div", { className: css('toolbar', styles, themeMode), children: [enableRois(configuration) && (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: _jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }), (!hideForbiddenTools || polylineEnabled) && (_jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: _jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) })), (!hideForbiddenTools || polygonEnabled) && (_jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: _jsx(PolygonIcon, { 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) && enableMainMetadata(configuration) && (_jsx("div", { className: css('toolbar-spacer', styles, themeMode) })), enableMainMetadata(configuration) && (_jsx(IconButton, { onClick: () => setForm({ isOpen: true }), children: _jsx(AnnotateIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) })), _jsx("div", { className: css('toolbar-spacer', styles, themeMode) }), _jsx(IconButton, { onClick: onSubmit, children: _jsx(SaveIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) })] }), enableRois(configuration) && (_jsx("div", { className: css('toolbar-helper', styles, themeMode), children: _jsxs(Typography, { children: [strings[activeTool], ": ", strings[`${activeTool}HelpText`]] }) })), form.isOpen && (_jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: () => setForm({ isOpen: false }), onSubmit: handleSubmitMetadata }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: css('toolbar', styles, themeMode), children: enableRois(configuration) && (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: _jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }), (!hideForbiddenTools || polylineEnabled) && (_jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: _jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) })), (!hideForbiddenTools || polygonEnabled) && (_jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: _jsx(PolygonIcon, { 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, themeMode), children: _jsxs(Typography, { children: [strings[activeTool], ": ", strings[`${activeTool}HelpText`]] }) }))] }));
 };
 export default Toolbar;

package/dist/Components/RoiEditor/Toolbar.module.css

@@ -1,15 +1,3 @@
-.toolbar-info {
-  padding: .5rem;
-}
-.toolbar-info-light {
-  background-color: #ddd;;
-  color: #000;
-}
-.toolbar-info-dark {
-  background-color: #222;
-  color: #fff;
-}
-
 .toolbar {
   align-items: center;
   display: flex;

package/dist/Components/RoiEditor/Types.d.ts

@@ -73,6 +73,8 @@ export type Metadata = {
     rois: {
         id: string;
         parameters: OutputParameter[];
+        name: string;
+        role: string;
     }[];
 };
 export type OutputShapeRect = {
@@ -107,6 +109,8 @@ export interface OutputParameter {
 export interface OutputRoi {
     parameters: OutputParameter[];
     type: ShapeType;
+    name: string;
+    role: string;
     shape: OutputShapeRect | OutputShapePolyline | OutputShapePolygon;
 }
 export interface Output {

package/dist/Components/RoiEditor/Utils.js

@@ -1,4 +1,5 @@
-import { OperatorEnum } from './Types';
+import { formatString } from '../../Utils';
+import { OperatorEnum, } from './Types';
 export const notify = {
     info: (message) => alert(`Info: ${message}`),
     warn: (message) => alert(`Warning: ${message}`),
@@ -72,49 +73,55 @@ export const validate = (configuration, shapes, metadata, strings) => {
             switch (roi.multiplicity.operator) {
                 case OperatorEnum.Eq:
                     if (Object.values(shapes).filter((s) => s.type === roi.type).length !== roi.multiplicity.threshold) {
-                        errors.push(strings.shapesOfTypeShouldBeEqualToThreshold
-                            .replace('{type}', String(roi.type))
-                            .replace('{threshold}', roi.multiplicity.threshold.toString()));
+                        errors.push(formatString(strings.shapesOfTypeShouldBeEqualToThreshold, {
+                            type: String(roi.type),
+                            threshold: roi.multiplicity.threshold,
+                        }));
                     }
                     break;
                 case OperatorEnum.Lt:
                     if (Object.values(shapes).filter((s) => s.type === roi.type).length >= roi.multiplicity.threshold) {
-                        errors.push(strings.shapesOfTypeShouldBeLessThanThreshold
-                            .replace('{type}', String(roi.type))
-                            .replace('{threshold}', roi.multiplicity.threshold.toString()));
+                        errors.push(formatString(strings.shapesOfTypeShouldBeLessThanThreshold, {
+                            type: String(roi.type),
+                            threshold: roi.multiplicity.threshold,
+                        }));
                     }
                     break;
                 case OperatorEnum.Lte:
                     if (Object.values(shapes).filter((s) => s.type === roi.type).length > roi.multiplicity.threshold) {
-                        errors.push(strings.shapesOfTypeShouldBeLessThanOrEqualToThreshold
-                            .replace('{type}', String(roi.type))
-                            .replace('{threshold}', roi.multiplicity.threshold.toString()));
+                        errors.push(formatString(strings.shapesOfTypeShouldBeLessThanOrEqualToThreshold, {
+                            type: String(roi.type),
+                            threshold: roi.multiplicity.threshold,
+                        }));
                     }
                     break;
                 case OperatorEnum.Gt:
                     if (Object.values(shapes).filter((s) => s.type === roi.type).length <= roi.multiplicity.threshold) {
-                        errors.push(strings.shapesOfTypeShouldBeGreaterThanThreshold
-                            .replace('{type}', String(roi.type))
-                            .replace('{threshold}', roi.multiplicity.threshold.toString()));
+                        errors.push(formatString(strings.shapesOfTypeShouldBeGreaterThanThreshold, {
+                            type: String(roi.type),
+                            threshold: roi.multiplicity.threshold,
+                        }));
                     }
                     break;
                 case OperatorEnum.Gte:
                     if (Object.values(shapes).filter((s) => s.type === roi.type).length < roi.multiplicity.threshold) {
-                        errors.push(strings.shapesOfTypeShouldBeGreaterThanOrEqualToThreshold
-                            .replace('{type}', String(roi.type))
-                            .replace('{threshold}', roi.multiplicity.threshold.toString()));
+                        errors.push(formatString(strings.shapesOfTypeShouldBeGreaterThanOrEqualToThreshold, {
+                            type: String(roi.type),
+                            threshold: roi.multiplicity.threshold,
+                        }));
                     }
             }
         }
     });
     // check rois metadata
-    Object.keys(shapes).forEach(shapeId => {
+    Object.keys(shapes).forEach((shapeId) => {
         var _a, _b;
         const type = shapes[shapeId].type;
         const confParameters = (_b = (_a = configuration.rois.find((r) => r.type === type)) === null || _a === void 0 ? void 0 : _a.parameters) !== null && _b !== void 0 ? _b : [];
         confParameters.forEach((p) => {
             var _a, _b;
-            if (p.required && isEmpty((_b = (_a = metadata.rois.find((r) => r.id === shapeId)) === null || _a === void 0 ? void 0 : _a.parameters.find((p) => p.codename === p.codename)) === null || _b === void 0 ? void 0 : _b.value)) {
+            if (p.required &&
+                isEmpty((_b = (_a = metadata.rois.find((r) => r.id === shapeId)) === null || _a === void 0 ? void 0 : _a.parameters.find((p) => p.codename === p.codename)) === null || _b === void 0 ? void 0 : _b.value)) {
                 errors.push(strings.missingRequiredValuesInShapeParameters.replace('{id}', shapeId));
             }
         });
@@ -129,7 +136,7 @@ export const fabricShapeToOutputShape = (shape, type) => {
                 left: shape.left,
                 width: shape.width,
                 height: shape.height,
-                color: shape.stroke
+                color: shape.stroke,
             };
         case "polygon" /* ToolEnum.Polygon */:
         case "polyline" /* ToolEnum.Polyline */:
@@ -137,7 +144,7 @@ export const fabricShapeToOutputShape = (shape, type) => {
                 points: shape.get('points'),
                 top: shape.top,
                 left: shape.left,
-                color: shape.stroke
+                color: shape.stroke,
             };
     }
 };

package/dist/Components/RoiEditor/index.d.ts

@@ -4,7 +4,7 @@ export type RoiEditorProps = {
     configuration: Configuration;
     onSubmit: (data: Output) => void;
     initialData?: Output;
-    id: string;
+    editorId: string;
 };
 declare const RoiEditor: React.FC<RoiEditorProps>;
 export default RoiEditor;

package/dist/Components/RoiEditor/index.js

@@ -10,8 +10,9 @@ import styles from './RoiEditor.module.css';
 import ShapesList from './ShapesList';
 import Toolbar from './Toolbar';
 import { fabricShapeToOutputShape, validate } from './Utils';
+import Header from './Header';
 // https://github.com/n-mazaheri/image-editor
-const RoiEditor = ({ imageUrl, configuration, onSubmit, initialData, id }) => {
+const RoiEditor = ({ imageUrl, configuration, onSubmit, initialData, editorId }) => {
     var _a, _b, _c;
     const { themeMode, enableLogs, pickerColors, strings, notify } = useContext(UiContext);
     const { imageSize, canvasSize, wrapperRef, isReady } = useCanvasSize(imageUrl);
@@ -38,6 +39,7 @@ const RoiEditor = ({ imageUrl, configuration, onSubmit, initialData, id }) => {
         setShapes(newShapes);
         setMetadata(Object.assign(Object.assign({}, metadata), { rois: metadata.rois.filter((r) => r.id !== id) }));
     }, [shapes, metadata]);
+    // TODO: go with percentage coordinates or pixel coordinates but relative to original image
     const handleSubmit = useCallback(() => {
         var _a, _b;
         const [isValid, errors] = validate(configuration, shapes, metadata, strings);
@@ -45,10 +47,12 @@ const RoiEditor = ({ imageUrl, configuration, onSubmit, initialData, id }) => {
             onSubmit({
                 parameters: (_b = (_a = metadata.parameters) === null || _a === void 0 ? void 0 : _a.map((p) => ({ codename: p.codename, value: p.value }))) !== null && _b !== void 0 ? _b : [],
                 rois: Object.keys(shapes).map((shapeId) => {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d, _e, _f, _g;
                     return ({
                         parameters: (_c = (_b = (_a = metadata.rois
                             .find((r) => r.id === shapeId)) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b.map((p) => ({ codename: p.codename, value: p.value }))) !== null && _c !== void 0 ? _c : [],
+                        name: (_e = (_d = metadata.rois.find((r) => r.id === shapeId)) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : '',
+                        role: (_g = (_f = metadata.rois.find((r) => r.id === shapeId)) === null || _f === void 0 ? void 0 : _f.role) !== null && _g !== void 0 ? _g : '',
                         type: shapes[shapeId].type,
                         shape: fabricShapeToOutputShape(shapes[shapeId].shape, shapes[shapeId].shape.type),
                     });
@@ -65,7 +69,7 @@ const RoiEditor = ({ imageUrl, configuration, onSubmit, initialData, id }) => {
     if (!isReady) {
         return _jsx(Loader, {});
     }
-    return (_jsx(EditorProvider, { id: id, hideForbiddenTools: (_c = (_b = configuration.options) === null || _b === void 0 ? void 0 : _b.hideForbiddenTools) !== null && _c !== void 0 ? _c : false, activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, shapes: shapes, addShape: addShape, addShapes: addShapes, removeShape: removeShape, configuration: configuration, metadata: metadata, setMetadata: setMetadata, onSubmit: handleSubmit, children: _jsxs("div", { style: { maxWidth: '100%', width: `${imageSize.width}px` }, ref: wrapperRef, children: [_jsx(Toolbar, {}), _jsx("div", { className: css('canvasWrapper', styles, themeMode), style: {
+    return (_jsx(EditorProvider, { editorId: editorId, hideForbiddenTools: (_c = (_b = configuration.options) === null || _b === void 0 ? void 0 : _b.hideForbiddenTools) !== null && _c !== void 0 ? _c : false, activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, shapes: shapes, addShape: addShape, addShapes: addShapes, removeShape: removeShape, configuration: configuration, metadata: metadata, setMetadata: setMetadata, onSubmit: handleSubmit, children: _jsxs("div", { style: { maxWidth: '100%', width: `${imageSize.width}px` }, ref: wrapperRef, children: [_jsx(Header, {}), _jsx(Toolbar, {}), _jsx("div", { className: css('canvasWrapper', styles, themeMode), style: {
                         width: `${canvasSize.width}px`,
                         height: `${canvasSize.height}px`,
                         backgroundImage: `url(${imageUrl})`,

package/dist/Components/RoleField.d.ts

@@ -0,0 +1,7 @@
+import { FieldProps } from '../Types';
+import { ShapeType } from './RoiEditor/Types';
+type RoleFieldProps = Omit<FieldProps<string>, 'readonly' | 'label'> & {
+    shapeType: ShapeType;
+};
+declare const RoleField: React.FC<RoleFieldProps>;
+export default RoleField;

package/dist/Components/RoleField.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect } from 'react';
+import { useEditorContext } from '../Providers/EditorProvider';
+import { UiContext } from '../Providers/UiProvider';
+import EnumField from './EnumField';
+import { humanize } from '../Utils';
+const RoleField = (_a) => {
+    var { onChange, value, required, shapeType } = _a, props = __rest(_a, ["onChange", "value", "required", "shapeType"]);
+    const { strings } = useContext(UiContext);
+    const { configuration } = useEditorContext();
+    const options = [];
+    (configuration.rois || []).filter(r => r.type === shapeType).forEach((r) => {
+        if (!options.includes(r.role)) {
+            options.push(r.role);
+        }
+    });
+    useEffect(() => {
+        if (required) {
+            onChange(options[0]);
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsx(EnumField, Object.assign({ required: required, label: strings.role, value: value, onChange: (value) => onChange(value), options: options.map((o) => ({ value: o, label: humanize(o) })) }, props)));
+};
+export default RoleField;

package/dist/Providers/EditorProvider.d.ts

@@ -18,9 +18,9 @@ type EditorContextType = {
     metadata: Metadata;
     setMetadata: (data: Metadata) => void;
     onSubmit: () => void;
-    id: string;
+    editorId: string;
 };
 export declare const EditorContext: import("react").Context<EditorContextType | undefined>;
 export declare function useEditorContext(): EditorContextType;
-declare const EditorProvider: ({ children, id, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
+declare const EditorProvider: ({ children, editorId, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
 export default EditorProvider;

package/dist/Providers/EditorProvider.js

@@ -8,9 +8,9 @@ export function useEditorContext() {
     }
     return context;
 }
-const EditorProvider = ({ children, id, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }) => {
+const EditorProvider = ({ children, editorId, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }) => {
     return (_jsx(EditorContext.Provider, { value: {
-            id,
+            editorId,
             hideForbiddenTools,
             activeTool,
             setActiveTool,

package/dist/Providers/UiProvider.d.ts

@@ -20,6 +20,7 @@ type UiContextType = {
     enableLogs: boolean;
     themeMode: 'light' | 'dark';
     primaryColor: string;
+    primaryFgColor: string;
     Typography: typeof Typography;
     IconButton: typeof IconButton;
     Modal: typeof Modal;
@@ -47,6 +48,13 @@ type UiContextType = {
         mainParametersMetadata: string;
         missingRequiredValuesInMainParameters: string;
         missingRequiredValuesInShapeParameters: string;
+        roiMultiplicityEqRule: string;
+        roiMultiplicityGtRule: string;
+        roiMultiplicityGteRule: string;
+        roiMultiplicityLtRule: string;
+        roiMultiplicityLteRule: string;
+        roiMultiplicityNoRule: string;
+        name: string;
         polygon: string;
         polygonHelpText: string;
         polyline: string;
@@ -55,8 +63,11 @@ type UiContextType = {
         rectHelpText: string;
         pointer: string;
         pointerHelpText: string;
+        roisToBeDrawn: string;
+        role: string;
         requiredField: string;
         save: string;
+        shapeParametersMetadata: string;
         shapesOfTypeShouldBeEqualToThreshold: string;
         shapesOfTypeShouldBeGreaterThanThreshold: string;
         shapesOfTypeShouldBeGreaterThanOrEqualToThreshold: string;
@@ -67,7 +78,7 @@ type UiContextType = {
 };
 export declare const DefaultUiContext: UiContextType;
 export declare const UiContext: import("react").Context<UiContextType>;
-declare const UiProvider: ({ children, enableLogs, themeMode, primaryColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, SaveIcon, CloseIcon, TextField, NumberField, BoolField, EnumField, Button, pickerColors, notify, strings, }: PropsWithChildren<Partial<Omit<UiContextType, "strings">> & {
+declare const UiProvider: ({ children, enableLogs, themeMode, primaryColor, primaryFgColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, SaveIcon, CloseIcon, TextField, NumberField, BoolField, EnumField, Button, pickerColors, notify, strings, }: PropsWithChildren<Partial<Omit<UiContextType, "strings">> & {
     strings?: Partial<UiContextType["strings"]>;
 }>) => import("react/jsx-runtime").JSX.Element;
 export default UiProvider;

package/dist/Providers/UiProvider.js

@@ -20,6 +20,7 @@ export const DefaultUiContext = {
     enableLogs: true,
     themeMode: 'light',
     primaryColor: '#1976d2',
+    primaryFgColor: '#fff',
     Typography,
     IconButton,
     Modal,
@@ -47,6 +48,7 @@ export const DefaultUiContext = {
         mainParametersMetadata: 'Main parameters',
         missingRequiredValuesInMainParameters: 'Missing required values in main parameters',
         missingRequiredValuesInShapeParameters: 'Missing required values in shape {id} parameters',
+        name: 'Name',
         polygon: 'Polygon',
         polygonHelpText: 'click to draw all the polygon points, double click on the last point to close the polygon',
         polyline: 'Polyline',
@@ -56,7 +58,16 @@ export const DefaultUiContext = {
         pointer: 'Selection',
         pointerHelpText: 'click a shape to select it',
         requiredField: 'This field is required',
+        roiMultiplicityEqRule: 'a number of {role} ({type}) equal to {threshold}',
+        roiMultiplicityGtRule: 'a number of {role} ({type}) greater than {threshold}',
+        roiMultiplicityGteRule: 'a number of {role} ({type}) greater than or equal to {threshold}',
+        roiMultiplicityLtRule: 'a number of {role} ({type}) less than {threshold}',
+        roiMultiplicityLteRule: 'a number of {role} ({type}) less than or equal to {threshold}',
+        roiMultiplicityNoRule: 'a number of {role} ({type})',
+        roisToBeDrawn: 'ROIs to be drawn',
+        role: 'Role',
         save: 'Save',
+        shapeParametersMetadata: 'Shape parameters',
         shapesOfTypeShouldBeEqualToThreshold: 'Shapes of type {type} should be equal to {threshold}',
         shapesOfTypeShouldBeGreaterThanThreshold: 'Shapes of type {type} should be greater than {threshold}',
         shapesOfTypeShouldBeGreaterThanOrEqualToThreshold: 'Shapes of type {type} should be greater than or equal to {threshold}',
@@ -66,7 +77,7 @@ export const DefaultUiContext = {
     },
 };
 export const UiContext = createContext(DefaultUiContext);
-const UiProvider = ({ children, enableLogs, themeMode, primaryColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, SaveIcon, CloseIcon, TextField, NumberField, BoolField, EnumField, Button, pickerColors, notify, strings, }) => {
+const UiProvider = ({ children, enableLogs, themeMode, primaryColor, primaryFgColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, SaveIcon, CloseIcon, TextField, NumberField, BoolField, EnumField, Button, pickerColors, notify, strings, }) => {
     const ctx = {
         enableLogs: enableLogs !== null && enableLogs !== void 0 ? enableLogs : DefaultUiContext.enableLogs,
         Typography: Typography !== null && Typography !== void 0 ? Typography : DefaultUiContext.Typography,
@@ -86,6 +97,7 @@ const UiProvider = ({ children, enableLogs, themeMode, primaryColor, Typography,
         Button: Button !== null && Button !== void 0 ? Button : DefaultUiContext.Button,
         themeMode: themeMode !== null && themeMode !== void 0 ? themeMode : DefaultUiContext.themeMode,
         primaryColor: primaryColor !== null && primaryColor !== void 0 ? primaryColor : DefaultUiContext.primaryColor,
+        primaryFgColor: primaryFgColor !== null && primaryFgColor !== void 0 ? primaryFgColor : DefaultUiContext.primaryFgColor,
         pickerColors: pickerColors !== null && pickerColors !== void 0 ? pickerColors : DefaultUiContext.pickerColors,
         notify: notify !== null && notify !== void 0 ? notify : DefaultUiContext.notify,
         strings: strings ? Object.assign(Object.assign({}, DefaultUiContext.strings), strings) : DefaultUiContext.strings,

package/dist/Utils/index.d.ts

@@ -1,2 +1,4 @@
 export declare const log: (level: "log" | "info" | "warn" | "error", enable: boolean, ...args: unknown[]) => false | void;
 export declare const css: (name: string, styles: Record<string, string>, themeMode: "light" | "dark" | null) => string;
+export declare const humanize: (str: string) => string;
+export declare const formatString: (str: string, placeholders: Record<string, string | number>) => string;

package/dist/Utils/index.js

@@ -1,2 +1,14 @@
 export const log = (level, enable, ...args) => enable && console[level](...args);
 export const css = (name, styles, themeMode) => `${styles[name]} ${styles[`${name}-${themeMode}`]} react-cam-roi-${name}${themeMode ? `react-cam-roi-${name}-${themeMode}` : ''}`;
+export const humanize = (str) => {
+    return str
+        .replace(/([A-Z])/g, ' $1')
+        .replace('_', ' ')
+        .replace(/^./, (str) => str.toUpperCase());
+};
+export const formatString = (str, placeholders) => {
+    Object.keys(placeholders).forEach((key) => {
+        str = str.replace(`{${key}}`, placeholders[key].toString());
+    });
+    return str;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abidibo/react-cam-roi",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "A react component for drawing ROI over images and managing metadata",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
     "copy-files": "copyfiles -u 1 src/**/*.module.css dist/",
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build -o docs"
   },
   "author": "abidibo",
   "license": "MIT",