@abidibo/react-cam-roi 0.14.1 → 0.14.3

package/dist/index.esm.js

@@ -120,9 +120,13 @@ 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 defaultTo = function (dft) { return function (value) { return value !== null && value !== void 0 ? value : dft; }; };
+var abs2Perc = function (value, ref) { return Math.round((value / ref) * 100 * 10000) / 10000; };
+var perc2Abs = function (value, ref) { return Math.round((ref / 100) * value * 10000) / 10000; };
+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++) {
@@ -202,7 +206,7 @@ var NumberField = function (_a) {
     var onChange = _a.onChange, value = _a.value, label = _a.label, required = _a.required, helperText = _a.helperText, error = _a.error;
     var _b = useContext(UiContext), themeMode = _b.themeMode, Typography = _b.Typography;
     var handleChange = function (e) {
-        onChange(parseFloat(e.target.value));
+        onChange(e.target.value === '' ? null : parseFloat(e.target.value));
     };
     return (jsxs("div", { className: css('number-field-wrapper', styles$9, themeMode), children: [jsx("label", { className: "".concat(css('number-field-label', styles$9, themeMode), " ").concat(error ? css('number-field-label-error', styles$9, null) : ''), children: jsxs(Typography, { children: [label, required && ' *'] }) }), jsx("input", { type: 'number', className: "".concat(css('number-field', styles$9, themeMode), " ").concat(error ? css('number-field-error', styles$9, null) : ''), onChange: handleChange, value: value !== null && value !== void 0 ? value : '' }), helperText && (jsx(Typography, { component: 'div', className: "".concat(css('number-field-helper-text', styles$9, themeMode), " ").concat(error ? css('number-field-helper-text-error', styles$9, null) : ''), children: helperText }))] }));
 };
@@ -282,11 +286,14 @@ var canDrawShape = function (configuration, shapeType, shapes, notify, message)
     }
     return false;
 };
-var validateParametersForm = function (parameters, fields, setErrors, strings) {
+var validateParametersForm = function (parameters, fields, setErrors, resetErrors) {
+    resetErrors();
     var err = {};
     parameters.forEach(function (p) {
-        if (p.required && isEmpty(fields[p.codename])) {
-            err[p.codename] = strings.requiredField;
+        if (p.required &&
+            (isEmpty(fields[p.codename]) ||
+                isNil(fields[p.codename]))) {
+            err[p.codename] = 'requiredField';
         }
     });
     if (Object.keys(err).length > 0) {
@@ -304,6 +311,9 @@ var isEmpty = function (v) {
     }
     return v === null || v === undefined;
 };
+var isNil = function (v) {
+    return v === null || v === undefined;
+};
 var validate$1 = function (configuration, presetName, shapes, metadata, strings) {
     var errors = [];
     // check presetName
@@ -365,9 +375,9 @@ var validate$1 = function (configuration, presetName, shapes, metadata, strings)
     });
     // check rois metadata
     Object.keys(shapes).forEach(function (shapeId) {
-        var _a, _b;
-        var type = shapes[shapeId].type;
-        var confParameters = (_b = (_a = configuration.rois.find(function (r) { return r.type === type; })) === null || _a === void 0 ? void 0 : _a.parameters) !== null && _b !== void 0 ? _b : [];
+        var _a, _b, _c;
+        var role = (_a = metadata.rois.find(function (r) { return r.id === shapeId; })) === null || _a === void 0 ? void 0 : _a.role;
+        var confParameters = (_c = (_b = configuration.rois.find(function (r) { return r.role === role; })) === null || _b === void 0 ? void 0 : _b.parameters) !== null && _c !== void 0 ? _c : [];
         confParameters.forEach(function (p) {
             var _a, _b;
             if (p.required &&
@@ -378,7 +388,7 @@ var validate$1 = function (configuration, presetName, shapes, metadata, strings)
     });
     return [errors.length === 0, errors];
 };
-var fabricShapeToOutputShape = function (shape, type, imageSize) {
+var fabricShapeToOutputShape = function (shape, type, canvasSize) {
     switch (type) {
         case "rect" /* ToolEnum.Rectangle */:
             return {
@@ -387,10 +397,10 @@ var fabricShapeToOutputShape = function (shape, type, imageSize) {
                 scaleY: shape.scaleY,
                 skewX: shape.skewX,
                 skewY: shape.skewY,
-                top: abs2Perc(shape.top, imageSize.height),
-                left: abs2Perc(shape.left, imageSize.width),
-                width: abs2Perc(shape.width, imageSize.width),
-                height: abs2Perc(shape.height, imageSize.height),
+                top: abs2Perc(shape.top, canvasSize.height),
+                left: abs2Perc(shape.left, canvasSize.width),
+                width: abs2Perc(shape.width, canvasSize.width),
+                height: abs2Perc(shape.height, canvasSize.height),
                 color: shape.stroke,
             };
         case "point" /* ToolEnum.Point */:
@@ -400,8 +410,8 @@ var fabricShapeToOutputShape = function (shape, type, imageSize) {
                 scaleY: shape.scaleY,
                 skewX: shape.skewX,
                 skewY: shape.skewY,
-                top: abs2Perc(shape.top, imageSize.height),
-                left: abs2Perc(shape.left, imageSize.width),
+                top: abs2Perc(shape.top, canvasSize.height),
+                left: abs2Perc(shape.left, canvasSize.width),
                 color: shape.stroke,
             };
         case "polygon" /* ToolEnum.Polygon */:
@@ -410,12 +420,12 @@ var fabricShapeToOutputShape = function (shape, type, imageSize) {
                 points: shape.get('points').map(function (_a) {
                     var x = _a.x, y = _a.y;
                     return ({
-                        x: abs2Perc(x, imageSize.width),
-                        y: abs2Perc(y, imageSize.height),
+                        x: abs2Perc(x, canvasSize.width),
+                        y: abs2Perc(y, canvasSize.height),
                     });
                 }),
-                top: abs2Perc(shape.top, imageSize.height),
-                left: abs2Perc(shape.left, imageSize.width),
+                top: abs2Perc(shape.top, canvasSize.height),
+                left: abs2Perc(shape.left, canvasSize.width),
                 color: shape.stroke,
                 angle: shape.angle,
                 scaleX: shape.scaleX,
@@ -461,22 +471,22 @@ function getAbsolutePoints(shape) {
         return { x: transformedPoint.x, y: transformedPoint.y };
     });
 }
-var fabricShapeToOutputCoords = function (shape, type, imageSize) {
+var fabricShapeToOutputCoords = function (shape, type, canvasSize) {
     switch (type) {
         case "rect" /* ToolEnum.Rectangle */:
             return {
                 points: getAbsoluteRectData(shape).map(function (_a) {
                     var x = _a.x, y = _a.y;
                     return ({
-                        x: abs2Perc(x, imageSize.width),
-                        y: abs2Perc(y, imageSize.height),
+                        x: abs2Perc(x, canvasSize.width),
+                        y: abs2Perc(y, canvasSize.height),
                     });
                 }),
             };
         case "point" /* ToolEnum.Point */:
             return {
-                x: abs2Perc(shape.left, imageSize.width),
-                y: abs2Perc(shape.top, imageSize.height),
+                x: abs2Perc(shape.left, canvasSize.width),
+                y: abs2Perc(shape.top, canvasSize.height),
             };
         case "polygon" /* ToolEnum.Polygon */:
         case "polyline" /* ToolEnum.Polyline */:
@@ -484,8 +494,8 @@ var fabricShapeToOutputCoords = function (shape, type, imageSize) {
                 points: getAbsolutePoints(shape).map(function (_a) {
                     var x = _a.x, y = _a.y;
                     return ({
-                        x: abs2Perc(x, imageSize.width),
-                        y: abs2Perc(y, imageSize.height),
+                        x: abs2Perc(x, canvasSize.width),
+                        y: abs2Perc(y, canvasSize.height),
                     });
                 }),
             };
@@ -639,13 +649,6 @@ var UiProvider = function (_a) {
     return jsx(UiContext.Provider, { value: ctx, children: children });
 };
 
-var styles$7 = {"loader":"Loader-module_loader__6JyG7","spin":"Loader-module_spin__ZcV1b","loader-light":"Loader-module_loader-light__WlXKM","loader-dark":"Loader-module_loader-dark__mW1w5"};
-
-var Loader = function () {
-    var themeMode = useContext(UiContext).themeMode;
-    return jsx("div", { className: css('loader', styles$7, themeMode) });
-};
-
 /**
  * Event Dispatcher
  *
@@ -716,6 +719,13 @@ var Dispatcher = {
     }
 };
 
+var styles$7 = {"loader":"Loader-module_loader__6JyG7","spin":"Loader-module_spin__ZcV1b","loader-light":"Loader-module_loader-light__WlXKM","loader-dark":"Loader-module_loader-dark__mW1w5"};
+
+var Loader = function () {
+    var themeMode = useContext(UiContext).themeMode;
+    return jsx("div", { className: css('loader', styles$7, themeMode) });
+};
+
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
@@ -780,6 +790,52 @@ function v4(options, buf, offset) {
   return stringify(rnds);
 }
 
+var handleMouseDownPoint = function (event, editorId, canvas, activeColor, setOriginX, setOriginY) {
+    var pointer = canvas.getScenePoint(event.e);
+    setOriginX(pointer.x);
+    setOriginY(pointer.y);
+    var id = v4();
+    var newCircle = new Gn({
+        left: pointer.x,
+        top: pointer.y,
+        originX: 'center',
+        originY: 'center',
+        radius: 6,
+        fill: 'transparent',
+        stroke: activeColor,
+        strokeWidth: 2,
+        strokeUniform: true,
+        selectable: false,
+        hasControls: false,
+        hoverCursor: 'default',
+        id: id,
+    });
+    canvas.add(newCircle);
+    Dispatcher.emit("canvas:".concat(editorId, ":shapeAdded"), { id: id, type: "point" /* ToolEnum.Point */, shape: newCircle });
+    canvas.defaultCursor = 'default';
+};
+var copyPoint = function (editorId, canvas, point) {
+    var id = v4();
+    var copy = new Gn({
+        left: point.left + 10,
+        top: point.top + 10,
+        originX: 'center',
+        originY: 'center',
+        radius: 6,
+        fill: 'transparent',
+        stroke: point.stroke,
+        strokeWidth: point.strokeWidth,
+        strokeUniform: true,
+        selectable: false,
+        hasControls: false,
+        hoverCursor: 'default',
+        id: id,
+    });
+    canvas.add(copy);
+    Dispatcher.emit("canvas:".concat(editorId, ":shapeAdded"), { id: id, type: "point" /* ToolEnum.Point */, shape: copy });
+    return copy;
+};
+
 var addPoint$1 = function (event, canvas, color, points, setPoints, lines, setLines) {
     var pointer = canvas.getScenePoint(event.e);
     var newPoint = { x: pointer.x, y: pointer.y };
@@ -1027,52 +1083,6 @@ var copyRectangle = function (editorId, canvas, rectangle) {
     return copy;
 };
 
-var handleMouseDownPoint = function (event, editorId, canvas, activeColor, setOriginX, setOriginY) {
-    var pointer = canvas.getScenePoint(event.e);
-    setOriginX(pointer.x);
-    setOriginY(pointer.y);
-    var id = v4();
-    var newCircle = new Gn({
-        left: pointer.x,
-        top: pointer.y,
-        originX: 'center',
-        originY: 'center',
-        radius: 6,
-        fill: 'transparent',
-        stroke: activeColor,
-        strokeWidth: 2,
-        strokeUniform: true,
-        selectable: false,
-        hasControls: false,
-        hoverCursor: 'default',
-        id: id,
-    });
-    canvas.add(newCircle);
-    Dispatcher.emit("canvas:".concat(editorId, ":shapeAdded"), { id: id, type: "point" /* ToolEnum.Point */, shape: newCircle });
-    canvas.defaultCursor = 'default';
-};
-var copyPoint = function (editorId, canvas, point) {
-    var id = v4();
-    var copy = new Gn({
-        left: point.left + 10,
-        top: point.top + 10,
-        originX: 'center',
-        originY: 'center',
-        radius: 6,
-        fill: 'transparent',
-        stroke: point.stroke,
-        strokeWidth: point.strokeWidth,
-        strokeUniform: true,
-        selectable: false,
-        hasControls: false,
-        hoverCursor: 'default',
-        id: id,
-    });
-    canvas.add(copy);
-    Dispatcher.emit("canvas:".concat(editorId, ":shapeAdded"), { id: id, type: "point" /* ToolEnum.Point */, shape: copy });
-    return copy;
-};
-
 var useImageSize = function (imageUrl) {
     var _a = useState({ width: 0, height: 0 }), imageSize = _a[0], setImageSize = _a[1];
     useEffect(function () {
@@ -1112,7 +1122,7 @@ var useCanvasSize = function (imageUrl) {
     }, [imageSize, wrapperRef.current]); // eslint-disable-line
     return { imageSize: imageSize, canvasSize: canvasSize, wrapperRef: wrapperRef, isReady: isReady };
 };
-var initCanvasData = function (canvasRef, imageSize, addShapes, metadata, setMetadata, initialData, enableLogs) {
+var initCanvasData = function (canvasRef, canvasSize, addShapes, metadata, setMetadata, initialData, enableLogs) {
     log('info', enableLogs !== null && enableLogs !== void 0 ? enableLogs : false, 'Loading initial shapes data', initialData, canvasRef.current);
     if (initialData === null || initialData === void 0 ? void 0 : initialData.rois) {
         var m_1 = [];
@@ -1130,8 +1140,8 @@ var initCanvasData = function (canvasRef, imageSize, addShapes, metadata, setMet
                         scaleY: r.shape.scaleY || 1,
                         skewX: r.shape.skewX || 0,
                         skewY: r.shape.skewY || 0,
-                        left: perc2Abs(r.shape.left, imageSize.width),
-                        top: perc2Abs(r.shape.top, imageSize.height),
+                        left: perc2Abs(r.shape.left, canvasSize.width),
+                        top: perc2Abs(r.shape.top, canvasSize.height),
                         originX: 'center',
                         originY: 'center',
                         radius: 6,
@@ -1153,12 +1163,12 @@ var initCanvasData = function (canvasRef, imageSize, addShapes, metadata, setMet
                         scaleY: r.shape.scaleY || 1,
                         skewX: r.shape.skewX || 0,
                         skewY: r.shape.skewY || 0,
-                        left: perc2Abs(r.shape.left, imageSize.width),
-                        top: perc2Abs(r.shape.top, imageSize.height),
+                        left: perc2Abs(r.shape.left, canvasSize.width),
+                        top: perc2Abs(r.shape.top, canvasSize.height),
                         originX: 'left',
                         originY: 'top',
-                        width: perc2Abs(r.shape.width, imageSize.width),
-                        height: perc2Abs(r.shape.height, imageSize.height),
+                        width: perc2Abs(r.shape.width, canvasSize.width),
+                        height: perc2Abs(r.shape.height, canvasSize.height),
                         fill: 'transparent',
                         stroke: r.shape.color,
                         strokeWidth: 2,
@@ -1174,8 +1184,8 @@ var initCanvasData = function (canvasRef, imageSize, addShapes, metadata, setMet
                     shape = new oo(r.shape.points.map(function (_a) {
                         var x = _a.x, y = _a.y;
                         return ({
-                            x: perc2Abs(x, imageSize.width),
-                            y: perc2Abs(y, imageSize.height),
+                            x: perc2Abs(x, canvasSize.width),
+                            y: perc2Abs(y, canvasSize.height),
                         });
                     }), {
                         angle: r.shape.angle || 0,
@@ -1183,8 +1193,8 @@ var initCanvasData = function (canvasRef, imageSize, addShapes, metadata, setMet
                         scaleY: r.shape.scaleY || 1,
                         skewX: r.shape.skewX || 0,
                         skewY: r.shape.skewY || 0,
-                        top: perc2Abs(r.shape.top, imageSize.height),
-                        left: perc2Abs(r.shape.left, imageSize.width),
+                        top: perc2Abs(r.shape.top, canvasSize.height),
+                        left: perc2Abs(r.shape.left, canvasSize.width),
                         fill: 'transparent',
                         stroke: r.shape.color,
                         strokeWidth: 2,
@@ -1201,8 +1211,8 @@ var initCanvasData = function (canvasRef, imageSize, addShapes, metadata, setMet
                     shape = new no(r.shape.points.map(function (_a) {
                         var x = _a.x, y = _a.y;
                         return ({
-                            x: perc2Abs(x, imageSize.width),
-                            y: perc2Abs(y, imageSize.height),
+                            x: perc2Abs(x, canvasSize.width),
+                            y: perc2Abs(y, canvasSize.height),
                         });
                     }), {
                         angle: r.shape.angle || 0,
@@ -1210,8 +1220,8 @@ var initCanvasData = function (canvasRef, imageSize, addShapes, metadata, setMet
                         scaleY: r.shape.scaleY || 1,
                         skewX: r.shape.skewX || 0,
                         skewY: r.shape.skewY || 0,
-                        top: perc2Abs(r.shape.top, imageSize.height),
-                        left: perc2Abs(r.shape.left, imageSize.width),
+                        top: perc2Abs(r.shape.top, canvasSize.height),
+                        left: perc2Abs(r.shape.left, canvasSize.width),
                         fill: 'transparent',
                         stroke: r.shape.color,
                         strokeWidth: 2,
@@ -1439,17 +1449,29 @@ var useParametersForm = function (parameters) {
             setFields(__assign(__assign({}, fields), (_a = {}, _a[key] = value, _a)));
         };
     };
+    var resetErrors = function () {
+        setErrors({});
+    };
+    var reset = function () {
+        setFields(parameters.reduce(function (acc, p) {
+            var _a;
+            return (__assign(__assign({}, acc), (_a = {}, _a[p.codename] = p.value, _a)));
+        }, {}));
+        setErrors({});
+    };
     return {
         fields: fields,
         setField: setField,
         setFields: setFields,
         errors: errors,
         setErrors: setErrors,
+        resetErrors: resetErrors,
+        reset: reset,
     };
 };
 
 var Canvas = function (_a) {
-    var canvasRef = _a.canvasRef, canvasSize = _a.canvasSize, imageSize = _a.imageSize, initialData = _a.initialData;
+    var canvasRef = _a.canvasRef, canvasSize = _a.canvasSize; _a.imageSize; var initialData = _a.initialData;
     var _b = useEditorContext(), metadata = _b.metadata, setMetadata = _b.setMetadata, addShapes = _b.addShapes, editorId = _b.editorId;
     var enableLogs = useContext(UiContext).enableLogs;
     var _c = useState(false), initialized = _c[0], setInitialized = _c[1];
@@ -1459,12 +1481,14 @@ var Canvas = function (_a) {
         if (canvasSize.width !== 0 && canvasSize.height !== 0 && !initialized) {
             canvasRef.current = new xn("react-cam-roi-canvas-".concat(editorId));
             canvasRef.current.setDimensions({ width: canvasSize.width, height: canvasSize.height });
-            initCanvasData(canvasRef, imageSize, addShapes, metadata, setMetadata, initialData, enableLogs);
+            initCanvasData(canvasRef, canvasSize, addShapes, metadata, setMetadata, initialData, enableLogs);
             setInitialized(true);
         }
         return function () {
             var _a;
-            (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
+            if (initialized) {
+                (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
+            }
         };
     }, [canvasSize.width, canvasSize.height]); // eslint-disable-line
     return (jsx("canvas", { id: "react-cam-roi-canvas-".concat(editorId), style: { width: "".concat(canvasSize.width, "px"), height: "".concat(canvasSize.height, "px") } }));
@@ -1532,7 +1556,7 @@ var RoleField = function (_a) {
         }
     });
     useEffect(function () {
-        if (required) {
+        if (required && !value) {
             onChange(options[0]);
         }
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -1567,11 +1591,11 @@ var ParameterField = function (_a) {
 var styles$4 = {"form":"ParametersModalForm-module_form__WXebJ","fieldset":"ParametersModalForm-module_fieldset__V-ywT","legend":"ParametersModalForm-module_legend__F6CPv","legend-light":"ParametersModalForm-module_legend-light__X9tWX","legend-dark":"ParametersModalForm-module_legend-dark__isTas"};
 
 var ParametersModalForm = function (_a) {
-    var title = _a.title, onClose = _a.onClose, parameters = _a.parameters, data = _a.data, onSubmit = _a.onSubmit, shapeType = _a.shapeType, shapeName = _a.shapeName, shapeRole = _a.shapeRole, noModal = _a.noModal, readOnly = _a.readOnly;
+    var title = _a.title, onClose = _a.onClose, parameters = _a.parameters, rolesParameters = _a.rolesParameters, data = _a.data, onSubmit = _a.onSubmit, shapeType = _a.shapeType, shapeName = _a.shapeName, shapeRole = _a.shapeRole, noModal = _a.noModal, readOnly = _a.readOnly;
     var _b = useContext(UiContext), Modal = _b.Modal, TextField = _b.TextField, strings = _b.strings, themeMode = _b.themeMode, Typography = _b.Typography;
     var _c = useState(shapeName !== null && shapeName !== void 0 ? shapeName : ''), name = _c[0], setName = _c[1];
     var _d = useState(shapeRole !== null && shapeRole !== void 0 ? shapeRole : ''), role = _d[0], setRole = _d[1];
-    var _e = useParametersForm(data), fields = _e.fields, setField = _e.setField, errors = _e.errors, setErrors = _e.setErrors;
+    var _e = useParametersForm(data), fields = _e.fields, setField = _e.setField, errors = _e.errors, setErrors = _e.setErrors, resetErrors = _e.resetErrors, reset = _e.reset;
     var readonlyFields = data.reduce(function (acc, p) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[p.codename] = p.value, _a)));
@@ -1582,12 +1606,25 @@ var ParametersModalForm = function (_a) {
             handleSubmit();
         }
     }, [fields]);
+    var currentParameters = shapeType
+        ? defaultTo([])(rolesParameters === null || rolesParameters === void 0 ? void 0 : rolesParameters[role])
+        : defaultTo([])(parameters);
+    // add a listener in order for general save to call validate
+    useEffect(function () {
+        var validate = function () {
+            validateParametersForm(currentParameters, fields, setErrors, resetErrors);
+        };
+        Dispatcher.register('editor:save', validate);
+        return function () {
+            Dispatcher.unregister('editor:save', validate);
+        };
+    }, [currentParameters, fields, setErrors, resetErrors]);
     var handleSubmit = function () {
         if (shapeType && name === '') {
             setErrors({ name: strings.requiredField });
         }
-        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);
+        else if (noModal || validateParametersForm(currentParameters, fields, setErrors, resetErrors)) {
+            var data_1 = __spreadArray([], currentParameters.map(function (p) { return ({ codename: p.codename, value: fields[p.codename] }); }), true);
             if (shapeType) {
                 onSubmit(data_1, { name: name, role: role });
             }
@@ -1597,7 +1634,7 @@ var ParametersModalForm = function (_a) {
         }
     };
     // group parameters by fieldset
-    var groupedParameters = parameters.reduce(function (acc, p) {
+    var groupedParameters = currentParameters.reduce(function (acc, p) {
         if (acc[p.fieldSet || '']) {
             acc[p.fieldSet || ''].push(p);
         }
@@ -1606,7 +1643,7 @@ var ParametersModalForm = function (_a) {
         }
         return acc;
     }, {});
-    var form = (jsxs("div", { className: css('form', styles$4, null), children: [shapeType && (jsxs(Fragment, { children: [jsx(TextField, { required: true, label: strings.name, type: "text", value: name, onChange: compose(setName, defaultTo('')), error: !!errors.name, helperText: errors.name, readOnly: readOnly }), jsx(RoleField, { required: true, value: role, onChange: compose(setRole, defaultTo('')), error: !!errors.role, helperText: errors.role, shapeType: shapeType, readOnly: readOnly, disabled: readOnly })] })), Object.keys(groupedParameters)
+    var form = (jsxs("div", { className: css('form', styles$4, null), children: [shapeType && (jsxs(Fragment, { children: [jsx(TextField, { required: true, label: strings.name, type: "text", value: name, onChange: compose(setName, defaultTo('')), error: !!errors.name, helperText: errors.name, readOnly: readOnly }), jsx(RoleField, { required: true, value: role, onChange: compose(reset, setRole, defaultTo('')), error: !!errors.role, helperText: errors.role, shapeType: shapeType, readOnly: readOnly, disabled: readOnly })] })), Object.keys(groupedParameters)
                 .sort()
                 .map(function (fieldSet) { return (jsxs("div", { className: css('fieldset', styles$4, themeMode), children: [fieldSet && (jsx(Typography, { component: "div", className: css('legend', styles$4, themeMode), children: fieldSet })), groupedParameters[fieldSet].map(function (parameter) {
                         switch (parameter.type) {
@@ -1614,7 +1651,9 @@ var ParametersModalForm = function (_a) {
                                 return (jsx(ParameterField, { value: String((readOnly ? readonlyFields : fields)[parameter.codename]), onChange: setField(parameter.codename), parameter: parameter, errors: errors, readOnly: readOnly }, parameter.codename));
                             case 'int':
                             case 'float':
-                                return (jsx(ParameterField, { value: (readOnly ? readonlyFields : fields)[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors, readOnly: readOnly }, parameter.codename));
+                                return (jsx(ParameterField, { value: (readOnly ? readonlyFields : fields)[parameter.codename] === ''
+                                        ? null
+                                        : (readOnly ? readonlyFields : fields)[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors, readOnly: readOnly }, parameter.codename));
                             case 'bool':
                                 return (jsx(ParameterField, { value: (readOnly ? readonlyFields : fields)[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors, readOnly: readOnly }, parameter.codename));
                             default:
@@ -1627,16 +1666,16 @@ var ParametersModalForm = function (_a) {
 var styles$3 = {"shapes-table":"ShapesList-module_shapes-table__sx5Xp","shapes-table-light":"ShapesList-module_shapes-table-light__TbtKn","shapes-table-dark":"ShapesList-module_shapes-table-dark__siyhV","shapes-row-selected-light":"ShapesList-module_shapes-row-selected-light__-0gaE","shapes-row-selected-dark":"ShapesList-module_shapes-row-selected-dark__bGR3a","shapes-row-even-light":"ShapesList-module_shapes-row-even-light__2eUZX","shapes-row-even-dark":"ShapesList-module_shapes-row-even-dark__eyECv","shapes-row-odd-light":"ShapesList-module_shapes-row-odd-light__vZzPj","shapes-row-odd-dark":"ShapesList-module_shapes-row-odd-dark__TWGAu","shapesTableName":"ShapesList-module_shapesTableName__9Q6i1","shapesTableColor":"ShapesList-module_shapesTableColor__Iyd33"};
 
 var ShapesList = function () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var _l = useContext(UiContext), strings = _l.strings, Typography = _l.Typography, IconButton = _l.IconButton, DeleteIcon = _l.DeleteIcon, AnnotateIcon = _l.AnnotateIcon, CopyIcon = _l.CopyIcon, themeMode = _l.themeMode;
-    var _m = useEditorContext(), shapes = _m.shapes, removeShape = _m.removeShape, configuration = _m.configuration, metadata = _m.metadata, setMetadata = _m.setMetadata, addShape = _m.addShape, editorId = _m.editorId;
-    var _o = useState([]), selected = _o[0], setSelected = _o[1];
-    var _p = useState({
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _j = useContext(UiContext), strings = _j.strings, Typography = _j.Typography, IconButton = _j.IconButton, DeleteIcon = _j.DeleteIcon, AnnotateIcon = _j.AnnotateIcon, CopyIcon = _j.CopyIcon, themeMode = _j.themeMode;
+    var _k = useEditorContext(), shapes = _k.shapes, removeShape = _k.removeShape, configuration = _k.configuration, metadata = _k.metadata, setMetadata = _k.setMetadata, addShape = _k.addShape, editorId = _k.editorId;
+    var _l = useState([]), selected = _l[0], setSelected = _l[1];
+    var _m = useState({
         isOpen: false,
         shapeId: '',
         type: null,
         shape: null,
-    }), form = _p[0], setForm = _p[1];
+    }), form = _m[0], setForm = _m[1];
     // open metadata form immediately after drawing the shape
     useEffect(function () {
         var openForm = function (_, _a) {
@@ -1693,7 +1732,12 @@ var ShapesList = function () {
                                     : idx % 2 === 0
                                         ? css('shapes-row-even', styles$3, themeMode)
                                         : css('shapes-row-odd', styles$3, themeMode), children: [jsx("td", { children: jsxs("div", { className: styles$3.shapesTableName, children: [jsx("div", { className: styles$3.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: (_a = configuration.rois.find(function (r) { return r.role === (m === null || m === void 0 ? void 0 : m.role); })) === null || _a === void 0 ? void 0 : _a.label }) }), jsx("td", { children: jsx(Typography, { children: strings[shapes[id].type] }) }), jsxs("td", { children: [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(function (roi) { return roi.id === form.shapeId; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '', shapeRole: (_d = (_c = metadata.rois.find(function (roi) { return roi.id === form.shapeId; })) === null || _c === void 0 ? void 0 : _c.role) !== null && _d !== void 0 ? _d : '', shapeId: form.shapeId, parameters: (_f = (_e = configuration.rois.find(function (roi) { return 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(function (roi) { return roi.id === form.shapeId; })) === null || _g === void 0 ? void 0 : _g.parameters) !== null && _h !== void 0 ? _h : (_j = configuration.rois.find(function (roi) { return 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) }))] }));
+                        }) })] }), form.isOpen && (jsx(ParametersModalForm, { shapeType: form.type || shapes[form.shapeId].type, shapeName: (_b = (_a = metadata.rois.find(function (roi) { return roi.id === form.shapeId; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '', shapeRole: (_d = (_c = metadata.rois.find(function (roi) { return roi.id === form.shapeId; })) === null || _c === void 0 ? void 0 : _c.role) !== null && _d !== void 0 ? _d : '', shapeId: form.shapeId, rolesParameters: configuration.rois
+                    .filter(function (roi) { return roi.type === (form.type || shapes[form.shapeId].type); })
+                    .reduce(function (acc, p) {
+                    var _a;
+                    return (__assign(__assign({}, acc), (_a = {}, _a[p.role] = p.parameters, _a)));
+                }, {}), data: (_h = (_f = (_e = metadata.rois.find(function (roi) { return roi.id === form.shapeId; })) === null || _e === void 0 ? void 0 : _e.parameters) !== null && _f !== void 0 ? _f : (_g = configuration.rois.find(function (roi) { return roi.type === (form.type || shapes[form.shapeId].type); })) === null || _g === void 0 ? void 0 : _g.parameters) !== null && _h !== void 0 ? _h : [], title: strings.shapeParametersMetadata, onClose: handleCloseMetadataForm, onSubmit: handleSubmitMetadata(form.shapeId) }))] }));
 };
 
 var FullRoiIcon = function (_a) {
@@ -1739,7 +1783,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 canvasRef = _a.canvasRef, canvasSize = _a.canvasSize;
     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'); };
@@ -1754,7 +1798,7 @@ var Toolbar = function (_a) {
     var handleRenderFullImagePolygon = function () {
         if (!canvasRef.current)
             return;
-        renderFullImagePolygon(editorId, canvasRef.current, activeColor, imageSize);
+        renderFullImagePolygon(editorId, canvasRef.current, activeColor, canvasSize);
     };
     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")]] }) }))] }));
 };
@@ -1832,12 +1876,12 @@ var RoiEditor = function (_a) {
                     role: (_g = (_f = metadata.rois.find(function (r) { return r.id === shapeId; })) === null || _f === void 0 ? void 0 : _f.role) !== null && _g !== void 0 ? _g : '',
                     type: shapes[shapeId].type,
                     id: shapeId,
-                    shape: fabricShapeToOutputShape(shapes[shapeId].shape, shapes[shapeId].type, imageSize),
-                    coords: fabricShapeToOutputCoords(shapes[shapeId].shape, shapes[shapeId].shape.type, imageSize),
+                    shape: fabricShapeToOutputShape(shapes[shapeId].shape, shapes[shapeId].type, canvasSize),
+                    coords: fabricShapeToOutputCoords(shapes[shapeId].shape, shapes[shapeId].shape.type, canvasSize),
                 });
             }),
         };
-    }, [imageSize.width, imageSize.height, canvasRef]);
+    }, [canvasSize.width, canvasSize.height, canvasRef]);
     useEffect(function () {
         // do not run on first update
         if (firstUpdate.current < 3) {
@@ -1850,6 +1894,7 @@ var RoiEditor = function (_a) {
         }
     }, [metadata, shapes, onUpdate, prepareOutput]);
     var handleSubmit = useCallback(function () {
+        Dispatcher.emit('editor:save');
         var _a = validate$1(configuration, presetName, shapes, metadata, strings), isValid = _a[0], errors = _a[1];
         if (isValid) {
             onSubmit(prepareOutput(metadata, shapes, presetName, presetDescription));
@@ -1863,11 +1908,13 @@ var RoiEditor = function (_a) {
     }, [onSubmit, configuration, shapes, metadata, prepareOutput, strings, notify, presetName, presetDescription]);
     log('info', enableLogs, 'react-cam-roi', 'active tool', activeTool);
     log('info', enableLogs, 'react-cam-roi', 'canvas size', canvasSize);
+    log('info', enableLogs, 'react-cam-roi', 'image size', imageSize);
     log('info', enableLogs, 'react-cam-roi', 'metadata', metadata);
+    log('info', enableLogs, 'react-cam-roi', 'shapes', shapes);
     if (!isReady) {
         return jsx(Loader, {});
     }
-    return (jsx(EditorProvider, { editorId: editorId, hideForbiddenTools: (_f = (_e = configuration.options) === null || _e === void 0 ? void 0 : _e.hideForbiddenTools) !== null && _f !== void 0 ? _f : false, activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, presetName: presetName, setPresetName: setPresetName, presetDescription: presetDescription, setPresetDescription: setPresetDescription, shapes: shapes, setShapes: setShapes, addShape: addShape, addShapes: addShapes, removeShape: removeShape, configuration: configuration, metadata: metadata, setMetadata: setMetadata, onSubmit: handleSubmit, children: jsxs("div", { style: { maxWidth: '100%', width: "".concat(imageSize.width, "px") }, ref: wrapperRef, children: [jsx(TopBar, {}), configuration.rois && configuration.rois.length > 0 && (jsxs(Fragment, { children: [(slots === null || slots === void 0 ? void 0 : slots.roiAbove) && slots.roiAbove, jsxs("div", { className: css('rois-wrapper', styles$5, themeMode), children: [jsx(Header, {}), jsx(Toolbar, { canvasRef: canvasRef, imageSize: imageSize }), jsx("div", { className: css('canvas-wrapper', styles$5, themeMode), style: {
+    return (jsx(EditorProvider, { editorId: editorId, hideForbiddenTools: (_f = (_e = configuration.options) === null || _e === void 0 ? void 0 : _e.hideForbiddenTools) !== null && _f !== void 0 ? _f : false, activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, presetName: presetName, setPresetName: setPresetName, presetDescription: presetDescription, setPresetDescription: setPresetDescription, shapes: shapes, setShapes: setShapes, addShape: addShape, addShapes: addShapes, removeShape: removeShape, configuration: configuration, metadata: metadata, setMetadata: setMetadata, onSubmit: handleSubmit, children: jsxs("div", { style: { maxWidth: '100%', width: "".concat(imageSize.width, "px") }, ref: wrapperRef, children: [jsx(TopBar, {}), configuration.rois && configuration.rois.length > 0 && (jsxs(Fragment, { children: [(slots === null || slots === void 0 ? void 0 : slots.roiAbove) && slots.roiAbove, jsxs("div", { className: css('rois-wrapper', styles$5, themeMode), children: [jsx(Header, {}), jsx(Toolbar, { canvasRef: canvasRef, canvasSize: canvasSize }), jsx("div", { className: css('canvas-wrapper', styles$5, themeMode), style: {
                                         width: "".concat(canvasSize.width, "px"),
                                         height: "".concat(canvasSize.height, "px"),
                                         backgroundImage: "url(".concat(imageUrl, ")"),