@abidibo/react-cam-roi 0.10.0 → 0.11.0

package/README.md

@@ -801,7 +801,7 @@ After cloning the repository and install dependencies (`yarn install`), you can
 
 In order to start developing just run the storybook, then make changes to code and the storybook will be updated.
 
-In order to test the library in onother local react project you can:
+In order to test the library in another local react project you can:
 
 ```bash
 cd react-cam-roi

package/dist/index.cjs.js

@@ -813,12 +813,13 @@ var handleDoubleClickPolygon = function (editorId, canvas, activeColor, setIsDra
     }
 };
 var renderFullImagePolygon = function (editorId, canvas, activeColor, imageSize) {
+    var OFFSET = 5;
     var id = v4();
     var points = [
-        { x: 1, y: 1 },
-        { x: imageSize.width - 1, y: 0 },
-        { x: imageSize.width - 1, y: imageSize.height - 1 },
-        { x: 0, y: imageSize.height - 1 },
+        { x: OFFSET, y: OFFSET },
+        { x: imageSize.width - OFFSET, y: OFFSET },
+        { x: imageSize.width - OFFSET, y: imageSize.height - OFFSET },
+        { x: OFFSET, y: imageSize.height - OFFSET },
     ];
     var polygon = new oo(points, {
         fill: 'transparent',
@@ -1549,11 +1550,17 @@ var ParametersModalForm = function (_a) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[p.codename] = p.value, _a)));
     }, {});
+    // if not in modal we save at every field change
+    React.useEffect(function () {
+        if (noModal) {
+            handleSubmit();
+        }
+    }, [fields]);
     var handleSubmit = function () {
         if (shapeType && name === '') {
             setErrors({ name: strings.requiredField });
         }
-        else if (validateParametersForm(parameters, fields, setErrors, strings)) {
+        else if (!noModal || validateParametersForm(parameters, fields, setErrors, strings)) {
             var data_1 = __spreadArray([], parameters.map(function (p) { return ({ codename: p.codename, value: fields[p.codename] }); }), true);
             if (shapeType) {
                 onSubmit(data_1, { name: name, role: role });
@@ -1724,7 +1731,7 @@ var TopBar = function () {
         setMetadata(__assign(__assign({}, metadata), { parameters: data }));
         setForm({ isOpen: false });
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: css('top-bar', styles, themeMode), children: [enableMainMetadata(configuration) && !((_a = configuration.options) === null || _a === void 0 ? void 0 : _a.viewMainParameters) && (jsxRuntime.jsxs(Button, { onClick: function () { return setForm({ isOpen: true }); }, children: [jsxRuntime.jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] })), jsxRuntime.jsxs(Button, { primary: true, onClick: onSubmit, children: [jsxRuntime.jsx(SaveIcon, { color: primaryFgColor }), " ", strings.save] }), form.isOpen && (jsxRuntime.jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata }))] }), enableMainMetadata(configuration) && ((_b = configuration.options) === null || _b === void 0 ? void 0 : _b.viewMainParameters) && (jsxRuntime.jsxs("div", { className: css('main-parameters-view', styles, themeMode), children: [jsxRuntime.jsx("div", { className: css('main-parameters-button', styles, themeMode), children: jsxRuntime.jsxs(Button, { onClick: function () { return setForm({ isOpen: true }); }, children: [jsxRuntime.jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] }) }), jsxRuntime.jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata, readOnly: true, noModal: true })] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: css('top-bar', styles, themeMode), children: [enableMainMetadata(configuration) && !((_a = configuration.options) === null || _a === void 0 ? void 0 : _a.viewMainParameters) && (jsxRuntime.jsxs(Button, { onClick: function () { return setForm({ isOpen: true }); }, children: [jsxRuntime.jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] })), jsxRuntime.jsxs(Button, { primary: true, onClick: onSubmit, children: [jsxRuntime.jsx(SaveIcon, { color: primaryFgColor }), " ", strings.save] }), form.isOpen && (jsxRuntime.jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata }))] }), enableMainMetadata(configuration) && ((_b = configuration.options) === null || _b === void 0 ? void 0 : _b.viewMainParameters) && (jsxRuntime.jsx("div", { className: css('main-parameters-view', styles, themeMode), children: jsxRuntime.jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata, noModal: true }) }))] }));
 };
 
 // https://github.com/n-mazaheri/image-editor