@abidibo/react-cam-roi 0.12.1 → 0.13.1

package/README.md

@@ -1,11 +1,11 @@
 # React Cam ROI
 
 This is a react component which lets you draw regions of interest (ROI) over images, manage metadata and import/export everything.  
-Metadata are dynamic information that can be attached to the whole image and/or to each ROI. The number of drawable ROIs can also be configured.
+Metadata are dynamic information that can be attached as a whole and/or to each ROI. The number and type of drawable ROIs can also be configured.
 
 ![Screenshot](./react-cam-roi-s.png)
 
-It provides one component: `RoiEditor` and one provider: `UiProvider`. The editor lets you draw regions of interest over a given image (url). Each ROI can have dynamic metadata attached.
+It provides one component: `RoiEditor` and one provider: `UiProvider`. The editor lets you add metadata and draw regions of interest over a given image (url).
 
 Export and import functionality is also provided.
 

package/dist/index.cjs.js

@@ -115,7 +115,17 @@ var formatString = function (str, placeholders) {
     return str;
 };
 var abs2Perc = function (value, ref) { return Math.round((value / ref) * 100 * 100) / 100; };
-var perc2Abs = function (value, ref) { return Math.round(ref * value * 100 / 100) / 100; };
+var perc2Abs = function (value, ref) { return Math.round((ref * value * 100) / 100) / 100; };
+var defaultTo = function (dft) { return function (value) { return value !== null && value !== void 0 ? value : dft; }; };
+var compose = function () {
+    var fns = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        fns[_i] = arguments[_i];
+    }
+    return function (x) {
+        return fns.reduceRight(function (y, f) { return f(y); }, x);
+    };
+};
 
 var styles$e = {"bool-field":"BoolField-module_bool-field__-Qg7I","bool-field-light":"BoolField-module_bool-field-light__CHITs","bool-field-dark":"BoolField-module_bool-field-dark__gy9uQ","bool-field-error":"BoolField-module_bool-field-error__qJV-E","bool-field-label":"BoolField-module_bool-field-label__LZbjy","bool-field-label-error":"BoolField-module_bool-field-label-error__gBzdk","bool-field-helper-text":"BoolField-module_bool-field-helper-text__fH8fC","bool-field-helper-text-error":"BoolField-module_bool-field-helper-text-error__McdWn"};
 
@@ -571,6 +581,7 @@ var DefaultUiContext = {
         pointer: 'Selection',
         pointerHelpText: 'click a shape to select it',
         rect: 'Rectangle',
+        rectangle: 'Rectangle',
         rectHelpText: 'click and drag to draw the rectangle',
         requiredField: 'This field is required',
         roiMultiplicityEqRule: 'a number of "{role}" ({type}) equal to {threshold}',
@@ -1461,7 +1472,7 @@ var RoisInfo = function () {
     var _d = useEditorContext(), configuration = _d.configuration, presetName = _d.presetName, setPresetName = _d.setPresetName, presetDescription = _d.presetDescription, setPresetDescription = _d.setPresetDescription;
     if (!((_a = configuration.rois) === null || _a === void 0 ? void 0 : _a.length))
         return null;
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { style: { marginBottom: '1rem' }, children: jsxRuntime.jsx(TextField, { required: true, value: presetName, onChange: setPresetName, label: strings.presetName, fullWidth: true }) }), jsxRuntime.jsx("div", { style: { marginBottom: '1rem' }, children: jsxRuntime.jsx(TextField, { value: presetDescription, onChange: setPresetDescription, label: strings.presetDescription, fullWidth: true }) }), ((_b = configuration.options) === null || _b === void 0 ? void 0 : _b.description) && jsxRuntime.jsx(Typography, { children: configuration.options.description }), jsxRuntime.jsxs(Typography, { component: "div", children: [strings.roisToBeDrawn, ":"] }), jsxRuntime.jsx("ul", { children: configuration.rois.map(function (r) {
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { style: { marginBottom: '1rem' }, children: jsxRuntime.jsx(TextField, { required: true, value: presetName, onChange: compose(setPresetName, defaultTo('')), label: strings.presetName, fullWidth: true }) }), jsxRuntime.jsx("div", { style: { marginBottom: '1rem' }, children: jsxRuntime.jsx(TextField, { value: presetDescription, onChange: compose(setPresetDescription, defaultTo('')), label: strings.presetDescription, fullWidth: true }) }), ((_b = configuration.options) === null || _b === void 0 ? void 0 : _b.description) && jsxRuntime.jsx(Typography, { children: configuration.options.description }), jsxRuntime.jsxs(Typography, { component: "div", children: [strings.roisToBeDrawn, ":"] }), jsxRuntime.jsx("ul", { children: configuration.rois.map(function (r) {
                     var _a, _b;
                     var rule;
                     var data = {
@@ -1579,7 +1590,7 @@ var ParametersModalForm = function (_a) {
             }
         }
     };
-    var form = (jsxRuntime.jsxs("div", { className: css('form', styles$4, null), children: [shapeType && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextField, { required: true, label: strings.name, type: "text", value: name, onChange: setName, error: !!errors.name, helperText: errors.name, readOnly: readOnly }), jsxRuntime.jsx(RoleField, { required: true, value: role, onChange: setRole, error: !!errors.role, helperText: errors.role, shapeType: shapeType, readOnly: readOnly, disabled: readOnly })] })), parameters.map(function (parameter) {
+    var form = (jsxRuntime.jsxs("div", { className: css('form', styles$4, null), children: [shapeType && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextField, { required: true, label: strings.name, type: "text", value: name, onChange: compose(setName, defaultTo('')), error: !!errors.name, helperText: errors.name, readOnly: readOnly }), jsxRuntime.jsx(RoleField, { required: true, value: role, onChange: compose(setRole, defaultTo('')), error: !!errors.role, helperText: errors.role, shapeType: shapeType, readOnly: readOnly, disabled: readOnly })] })), parameters.map(function (parameter) {
                 switch (parameter.type) {
                     case 'string':
                         return (jsxRuntime.jsx(ParameterField, { value: String((readOnly ? readonlyFields : fields)[parameter.codename]), onChange: setField(parameter.codename), parameter: parameter, errors: errors, readOnly: readOnly }, parameter.codename));
@@ -1723,6 +1734,8 @@ var Toolbar = function (_a) {
     var rectangleEnabled = configuration.rois.find(function (r) { return r.type === "rect" /* ToolEnum.Rectangle */; }) &&
         canDrawShape(configuration, "rect" /* ToolEnum.Rectangle */, shapes);
     var handleRenderFullImagePolygon = function () {
+        if (!canvasRef.current)
+            return;
         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(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")]] }) }))] }));