@abidibo/react-cam-roi 0.0.8 → 0.0.10

package/dist/Components/EnumField/EnumField.module.css

@@ -0,0 +1,61 @@
+/*
+.enum-field-wrapper {
+  margin-bottom: 2rem;
+}
+.enum-field-wrapper-light {
+}
+.enum-field-wrapper-dark {
+}
+*/
+
+.enum-field {
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  width: 100%;
+}
+.enum-field:focus-visible {
+  outline: none;
+  border: 1px solid #1976d2;
+}
+.enum-field-light {
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #ccc;
+}
+.enum-field-dark {
+  background-color: #333;
+  border: 1px solid #666;
+  color: #fff;
+}
+.enum-field-error {
+  border: 1px solid #d32f2f;
+}
+.enum-field-label {
+  font-weight: bold;
+  display: block;
+  margin: 0 0 1rem 0;
+}
+/*
+.text-fiel-label-light {
+}
+.enum-field-label-dark {
+}
+*/
+.enum-field-label-error {
+  color: #d32f2f;
+}
+.enum-field-helper-text {
+  font-style: italic;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+}
+/*
+.enum-field-helper-text-light {
+}
+.enum-field-helper-text-dark {
+}
+*/
+.enum-field-helper-text-error {
+  color: #d32f2f;
+}

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

@@ -0,0 +1,10 @@
+import { FieldProps } from '../../Types';
+export type EnumOption = {
+    value: string | number;
+    label: string;
+};
+declare const EnumField: ({ onChange, value, label, helperText, error, options, disabled, required, multiple }: Omit<FieldProps<string | number | (string | number)[]>, "readOnly"> & {
+    options: EnumOption[];
+    multiple?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default EnumField;

package/dist/Components/EnumField/index.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { UiContext } from '../../Providers/UiProvider';
+import { css } from '../../Utils';
+import styles from './EnumField.module.css';
+const EnumField = ({ onChange, value, label, helperText, error, options, disabled = false, required = false, multiple = false }) => {
+    const { themeMode, Typography } = useContext(UiContext);
+    const handleChange = (e) => {
+        const selectedValues = Array.from(e.target.selectedOptions, (option) => {
+            return isNaN(Number(option.value)) ? option.value : Number(option.value);
+        });
+        onChange(multiple ? selectedValues : selectedValues[0]);
+    };
+    return (_jsxs("div", { className: css('enum-field-wrapper', styles, themeMode), children: [_jsx("label", { className: `${css('enum-field-label', styles, themeMode)} ${error ? css('enum-field-label-error', styles, null) : ''}`, children: _jsxs(Typography, { children: [label, required && ' *'] }) }), _jsxs("select", { className: `${css('enum-field', styles, themeMode)} ${error ? css('enum-field-error', styles, null) : ''}`, onChange: handleChange, value: value, disabled: disabled, multiple: multiple, children: [!required && _jsx("option", { value: '' }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), helperText && (_jsx(Typography, { component: 'div', className: `${css('enum-field-helper-text', styles, themeMode)} ${error ? css('enum-field-helper-text-error', styles, null) : ''}`, children: helperText }))] }));
+};
+export default EnumField;

package/dist/Components/IconButton/IconButton.module.css

@@ -1,4 +1,4 @@
-.iconButton {
+.icon-button {
   display: inline-block;
   border-radius: 50%;
   line-height: 0;
@@ -6,10 +6,15 @@
   cursor: pointer;
 }
 
-.iconButton-light:hover {
+.icon-button-light:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-.iconButton-dark:hover {
+.icon-button-dark:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
+
+.icon-button-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

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

@@ -1,5 +1,6 @@
 export type IconButtonProps = {
     children?: React.ReactNode;
+    disabled?: boolean;
     onClick?: (event: React.MouseEvent) => void;
 };
 declare const IconButton: React.FC<IconButtonProps>;

package/dist/Components/IconButton/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
+import { UiContext } from '../../Providers/UiProvider';
 import { css } from '../../Utils';
 import styles from './IconButton.module.css';
-import { UiContext } from '../../Providers/UiProvider';
-const IconButton = ({ children, onClick }) => {
+const IconButton = ({ children, disabled, onClick }) => {
     const { themeMode } = useContext(UiContext);
-    return (_jsx("div", { className: css('iconButton', styles, themeMode), onClick: onClick, children: children }));
+    return (_jsx("div", { className: `${css('icon-button', styles, themeMode)} ${disabled ? css('icon-button-disabled', styles, themeMode) : ''}`, onClick: disabled ? undefined : onClick, children: children }));
 };
 export default IconButton;

package/dist/Components/Modal/Modal.module.css

@@ -83,3 +83,10 @@
   color: #fff;
 }
 
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+  gap: .5rem;
+}
+

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

@@ -3,7 +3,8 @@ export type ModalProps = {
     isOpen: boolean;
     onClose: () => void;
     title: string;
-    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    maxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    onSubmit?: () => void;
 };
 declare const Modal: React.FC<PropsWithChildren<ModalProps>>;
 export default Modal;

package/dist/Components/Modal/index.js

@@ -5,12 +5,12 @@ import CloseIcon from '../../Icons/CloseIcon';
 import { UiContext } from '../../Providers/UiProvider';
 import { css } from '../../Utils';
 import styles from './Modal.module.css';
-const Modal = ({ isOpen, onClose, children, title, size }) => {
-    const { themeMode, IconButton, Typography } = useContext(UiContext);
+const Modal = ({ isOpen, onClose, children, title, maxWidth, onSubmit }) => {
+    const { themeMode, IconButton, Typography, Button, strings } = useContext(UiContext);
     const iconColor = themeMode === 'light' ? 'black' : 'white';
     if (!isOpen) {
         return null;
     }
-    return createPortal(_jsx("div", { className: css('modal-overlay', styles, themeMode), children: _jsxs("div", { className: `${css('modal', styles, themeMode)} ${css(`modal-${size}`, styles, themeMode)}`, children: [_jsxs("div", { className: css('modal-header', styles, themeMode), children: [_jsx(Typography, { component: 'h6', className: css('modal-title', styles, themeMode), children: title }), _jsx(IconButton, { onClick: onClose, children: _jsx(CloseIcon, { color: iconColor }) })] }), children] }) }), document.body);
+    return createPortal(_jsx("div", { className: css('modal-overlay', styles, themeMode), children: _jsxs("div", { className: `${css('modal', styles, themeMode)} ${css(`modal-${maxWidth}`, styles, themeMode)}`, children: [_jsxs("div", { className: css('modal-header', styles, themeMode), children: [_jsx(Typography, { component: 'h6', className: css('modal-title', styles, themeMode), children: title }), _jsx(IconButton, { onClick: onClose, children: _jsx(CloseIcon, { color: iconColor }) })] }), children, _jsxs("div", { className: css('modal-footer', styles, themeMode), children: [_jsx(Button, { onClick: onClose, children: strings.cancel }), onSubmit && _jsx(Button, { primary: true, onClick: onSubmit, children: strings.save })] })] }) }), document.body);
 };
 export default Modal;

package/dist/Components/NumberField/NumberField.module.css

@@ -0,0 +1,60 @@
+/*
+.number-field-wrapper {
+}
+.number-field-wrapper-light {
+}
+.number-field-wrapper-dark {
+}
+*/
+
+.number-field {
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  width: 100%;
+}
+.number-field:focus-visible {
+  outline: none;
+  border: 1px solid #1976d2;
+}
+.number-field-light {
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #ccc;
+}
+.number-field-dark {
+  background-color: #333;
+  border: 1px solid #666;
+  color: #fff;
+}
+.number-field-error {
+  border: 1px solid #d32f2f;
+}
+.number-field-label {
+  font-weight: bold;
+  display: block;
+  margin: 0 0 1rem 0;
+}
+/*
+.text-fiel-label-light {
+}
+.number-field-label-dark {
+}
+*/
+.number-field-label-error {
+  color: #d32f2f;
+}
+.number-field-helper-text {
+  font-style: italic;
+  font-size: 0.9rem;
+  padding-top: 0.5rem;
+}
+/*
+.number-field-helper-text-light {
+}
+.number-field-helper-text-dark {
+}
+*/
+.number-field-helper-text-error {
+  color: #d32f2f;
+}

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

@@ -0,0 +1,3 @@
+import { FieldProps } from '../../Types';
+declare const NumberField: React.FC<FieldProps<number | null>>;
+export default NumberField;

package/dist/Components/NumberField/index.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { UiContext } from '../../Providers/UiProvider';
+import { css } from '../../Utils';
+import styles from './NumberField.module.css';
+const NumberField = ({ onChange, value, label, required, helperText, error }) => {
+    const { themeMode, Typography } = useContext(UiContext);
+    const handleChange = (e) => {
+        onChange(parseFloat(e.target.value));
+    };
+    return (_jsxs("div", { className: css('number-field-wrapper', styles, themeMode), children: [_jsx("label", { className: `${css('number-field-label', styles, themeMode)} ${error ? css('number-field-label-error', styles, null) : ''}`, children: _jsxs(Typography, { children: [label, required && ' *'] }) }), _jsx("input", { type: 'number', className: `${css('number-field', styles, themeMode)} ${error ? css('number-field-error', styles, null) : ''}`, onChange: handleChange, value: value !== null && value !== void 0 ? value : '' }), helperText && (_jsx(Typography, { component: 'div', className: `${css('number-field-helper-text', styles, themeMode)} ${error ? css('number-field-helper-text-error', styles, null) : ''}`, children: helperText }))] }));
+};
+export default NumberField;

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

@@ -1,8 +1,10 @@
+import { Output } from './Types';
 type CanvasProps = {
     canvasSize: {
         width: number;
         height: number;
     };
+    initialData?: Output;
 };
 declare const Canvas: React.FC<CanvasProps>;
 export default Canvas;

package/dist/Components/RoiEditor/Canvas.js

@@ -1,16 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
 import * as fabric from 'fabric';
-import { useDispatcherEvents, useTool } from './Hooks';
-const Canvas = ({ canvasSize }) => {
+import { useRef, useEffect, useState, useContext } from 'react';
+import { useEditorContext } from '../../Providers/EditorProvider';
+import { initCanvasData, useDispatcherEvents, useTool } from './Hooks';
+import { UiContext } from '../../Providers/UiProvider';
+const Canvas = ({ canvasSize, initialData }) => {
+    const { metadata, setMetadata, addShapes } = useEditorContext();
+    const { enableLogs } = useContext(UiContext);
+    const [initialized, setInitialized] = useState(false);
     const canvasRef = useRef(null);
     useTool(canvasRef.current);
     useDispatcherEvents(canvasRef.current);
     useEffect(() => {
-        canvasRef.current = new fabric.Canvas('react-cam-roi-canvas');
-        canvasRef.current.setDimensions({ width: canvasSize.width, height: canvasSize.height });
-        return () => { var _a; (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.dispose(); };
-    }, [canvasSize.width, canvasSize.height]);
-    return _jsx("canvas", { id: "react-cam-roi-canvas", style: { width: `${canvasSize.width}px`, height: `${canvasSize.height}px` } });
+        if (canvasSize.width !== 0 && canvasSize.height !== 0 && !initialized) {
+            canvasRef.current = new fabric.Canvas('react-cam-roi-canvas');
+            canvasRef.current.setDimensions({ width: canvasSize.width, height: canvasSize.height });
+            initCanvasData(canvasRef, addShapes, metadata, setMetadata, initialData, enableLogs);
+            setInitialized(true);
+            return () => {
+                var _a;
+                (_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", style: { width: `${canvasSize.width}px`, height: `${canvasSize.height}px` } }));
 };
 export default Canvas;

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

@@ -1,4 +1,5 @@
 import * as fabric from 'fabric';
+import { Metadata, Output, OutputParameter, Shape, ShapeType } from './Types';
 export declare const useImageSize: (imageUrl: string) => {
     imageSize: {
         width: number;
@@ -18,5 +19,17 @@ export declare const useCanvasSize: (imageUrl: string) => {
     wrapperRef: import("react").RefObject<HTMLDivElement>;
     isReady: boolean;
 };
+export declare const initCanvasData: (canvasRef: React.MutableRefObject<fabric.Canvas | null>, addShapes: (shapes: {
+    id: string;
+    type: ShapeType;
+    shape: Shape;
+}[]) => void, metadata: Metadata, setMetadata: (v: Metadata) => void, initialData?: Output, enableLogs?: boolean) => void;
 export declare const useTool: (canvas: fabric.Canvas | null) => void;
 export declare const useDispatcherEvents: (canvas: fabric.Canvas | null) => void;
+export declare const useParametersForm: (parameters: OutputParameter[]) => {
+    fields: Record<string, unknown>;
+    setField: <T>(key: string) => (value: T) => void;
+    setFields: import("react").Dispatch<import("react").SetStateAction<Record<string, unknown>>>;
+    errors: Record<string, string>;
+    setErrors: import("react").Dispatch<import("react").SetStateAction<Record<string, string>>>;
+};

package/dist/Components/RoiEditor/Hooks.js

@@ -1,6 +1,9 @@
+import * as fabric from 'fabric';
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import { useEditorContext } from '../../Providers/EditorProvider';
 import { UiContext } from '../../Providers/UiProvider';
+import { log } from '../../Utils';
 import Dispatcher from '../../Utils/Dispatcher';
 import { copyPolygon, handleDoubleClickPolygon, handleMouseDownPolygon, handleMouseMovePolygon } from './Polygon';
 import { copyPolyline, handleDoubleClickPolyline, handleMouseDownPolyline, handleMouseMovePolyline } from './Polyline';
@@ -40,16 +43,78 @@ export const useCanvasSize = (imageUrl) => {
             };
             if (imageSize.width > 0 && wrapperRef.current) {
                 update();
-                // observe ref for resizing event and in case update canvas dimensions
-                const resizeObserver = new ResizeObserver(() => {
-                    update();
-                });
-                resizeObserver.observe(wrapperRef.current);
             }
         }
     }, [imageSize, wrapperRef.current]); // eslint-disable-line
     return { imageSize, canvasSize, wrapperRef, isReady };
 };
+export const initCanvasData = (canvasRef, 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) {
+        const m = [];
+        const s = [];
+        initialData.rois.forEach((r) => {
+            var _a, _b, _c;
+            log('info', enableLogs !== null && enableLogs !== void 0 ? enableLogs : false, 'Loading initial shape', r);
+            const id = uuidv4();
+            let shape;
+            switch (r.type) {
+                case "rect" /* ToolEnum.Rectangle */:
+                    shape = new fabric.Rect({
+                        left: r.shape.left,
+                        top: r.shape.top,
+                        originX: 'left',
+                        originY: 'top',
+                        width: r.shape.width,
+                        height: r.shape.height,
+                        fill: 'transparent',
+                        stroke: r.shape.color,
+                        strokeWidth: 2,
+                        strokeUniform: true,
+                        selectable: false,
+                        hasControls: true,
+                        hoverCursor: 'default',
+                        id,
+                    });
+                    (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.add(shape);
+                    break;
+                case "polygon" /* ToolEnum.Polygon */:
+                    shape = new fabric.Polygon(r.shape.points, {
+                        top: r.shape.top + 10,
+                        left: r.shape.left + 10,
+                        fill: 'transparent',
+                        stroke: r.shape.color,
+                        strokeWidth: 2,
+                        selectable: false,
+                        hasControls: true,
+                        hoverCursor: 'default',
+                        // @ts-expect-error id is not included in types but the property is added and it works
+                        id,
+                    });
+                    (_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.add(shape);
+                    break;
+                case "polyline" /* ToolEnum.Polyline */:
+                    shape = new fabric.Polyline(r.shape.points, {
+                        top: r.shape.top + 10,
+                        left: r.shape.left + 10,
+                        fill: 'transparent',
+                        stroke: r.shape.color,
+                        strokeWidth: 2,
+                        selectable: false,
+                        hasControls: true,
+                        hoverCursor: 'default',
+                        id,
+                    });
+                    (_c = canvasRef.current) === null || _c === void 0 ? void 0 : _c.add(shape);
+                    break;
+            }
+            m.push({ id, parameters: r.parameters });
+            s.push({ id, type: r.type, shape });
+        });
+        addShapes(s);
+        setMetadata(Object.assign(Object.assign({}, metadata), { rois: m }));
+    }
+};
 export const useTool = (canvas) => {
     const { configuration, activeTool, activeColor, shapes, addShape } = useEditorContext();
     const { notify, strings } = useContext(UiContext);
@@ -239,3 +304,17 @@ export const useDispatcherEvents = (canvas) => {
         };
     }, [setActiveTool, canvas, addShape, configuration, shapes, notify, strings]);
 };
+export const useParametersForm = (parameters) => {
+    const [errors, setErrors] = useState({});
+    const [fields, setFields] = useState(parameters.reduce((acc, p) => (Object.assign(Object.assign({}, acc), { [p.codename]: p.value })), {}));
+    const setField = (key) => (value) => {
+        setFields(Object.assign(Object.assign({}, fields), { [key]: value }));
+    };
+    return {
+        fields,
+        setField,
+        setFields,
+        errors,
+        setErrors,
+    };
+};

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

@@ -0,0 +1,9 @@
+import { ConfigurationParameter } from './Types';
+export type ParameterFieldProps<T> = {
+    value: T;
+    onChange: (value: T) => void;
+    parameter: ConfigurationParameter;
+    errors: Record<string, string>;
+};
+declare const ParameterField: <T>({ value, onChange, parameter, errors }: ParameterFieldProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export default ParameterField;

package/dist/Components/RoiEditor/ParameterField.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { UiContext } from '../../Providers/UiProvider';
+const ParameterField = ({ value, onChange, parameter, errors }) => {
+    var _a, _b;
+    const { TextField, NumberField, BoolField, EnumField, strings } = useContext(UiContext);
+    const props = {
+        required: parameter.required,
+        label: `${parameter.label}${parameter.unit ? ` (${parameter.unit})` : ''}`,
+        error: !!errors[parameter.codename],
+        helperText: errors[parameter.codename]
+            ? strings[errors[parameter.codename]]
+            : parameter.description,
+    };
+    switch (parameter.type) {
+        case 'string':
+            return ((_a = parameter.options) === null || _a === void 0 ? void 0 : _a.length) ? (_jsx(EnumField, Object.assign({ value: value, onChange: (v) => onChange(v), options: parameter.options, multiple: parameter.multiple }, props))) : (_jsx(TextField, Object.assign({ type: "text", value: value, onChange: (v) => onChange(v) }, props)));
+        case 'int':
+        case 'float':
+            return ((_b = parameter.options) === null || _b === void 0 ? void 0 : _b.length) ? (_jsx(EnumField, Object.assign({ value: value, onChange: (v) => onChange(v), options: parameter.options, multiple: parameter.multiple }, props))) : (_jsx(NumberField, Object.assign({ value: value, onChange: (v) => onChange(v) }, props)));
+        case 'bool':
+            return _jsx(BoolField, Object.assign({ value: value, onChange: (v) => onChange(v) }, props));
+        default:
+            return null;
+    }
+};
+export default ParameterField;

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

@@ -0,0 +1,5 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

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

@@ -0,0 +1,10 @@
+import { ConfigurationParameter, OutputParameter } from '../Types';
+export type ParametersModalFormProps = {
+    onClose: () => void;
+    title: string;
+    parameters: ConfigurationParameter[];
+    data: OutputParameter[];
+    onSubmit: (data: OutputParameter[]) => void;
+};
+declare const ParametersModalForm: React.FC<ParametersModalFormProps>;
+export default ParametersModalForm;

package/dist/Components/RoiEditor/ParametersModalForm/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { UiContext } from '../../../Providers/UiProvider';
+import { css } from '../../../Utils';
+import { useParametersForm } from '../Hooks';
+import ParameterField from '../ParameterField';
+import styles from './ParametersModalForm.module.css';
+import { validateParametersForm } from '../Utils';
+const ParametersModalForm = ({ title, onClose, parameters, data, onSubmit }) => {
+    const { Modal } = useContext(UiContext);
+    const { fields, setField, errors, setErrors } = useParametersForm(data);
+    const handleSubmit = () => {
+        if (validateParametersForm(parameters, fields, setErrors)) {
+            onSubmit([...parameters.map((p) => ({ codename: p.codename, value: fields[p.codename] }))]);
+        }
+    };
+    return (_jsx(Modal, { onClose: onClose, title: title, isOpen: true, maxWidth: "sm", onSubmit: handleSubmit, children: _jsx("div", { className: css('form', styles, null), children: parameters.map((parameter) => {
+                switch (parameter.type) {
+                    case 'string':
+                        return (_jsx(ParameterField, { value: String(fields[parameter.codename]), onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
+                    case 'int':
+                    case 'float':
+                        return (_jsx(ParameterField, { value: fields[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
+                    case 'bool':
+                        return (_jsx(ParameterField, { value: fields[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
+                    default:
+                        return null;
+                }
+            }) }) }));
+};
+export default ParametersModalForm;

package/dist/Components/RoiEditor/ShapesList.js

@@ -1,14 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
 import { useEditorContext } from '../../Providers/EditorProvider';
 import { UiContext } from '../../Providers/UiProvider';
 import { css } from '../../Utils';
 import Dispatcher from '../../Utils/Dispatcher';
+import ParametersModalForm from './ParametersModalForm';
 import styles from './ShapesList.module.css';
 const ShapesList = () => {
-    const { strings, Typography, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, themeMode } = useContext(UiContext);
-    const { shapes, removeShape } = useEditorContext();
+    var _a, _b, _c, _d, _e, _f;
+    const { strings, Typography, IconButton, DeleteIcon, AnnotateIcon, SelectIcon, CopyIcon, themeMode } = useContext(UiContext);
+    const { shapes, removeShape, configuration, metadata, setMetadata } = useEditorContext();
     const [selected, setSelected] = useState([]);
+    const [form, setForm] = useState({ isOpen: false, shapeId: '' });
     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);
@@ -26,9 +29,19 @@ const ShapesList = () => {
     const handleSelectShape = (id) => () => {
         Dispatcher.emit('canvas:selectShape', id);
     };
+    const handleEditShapeMetadata = (id) => () => {
+        setForm({ isOpen: true, shapeId: id });
+    };
+    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 iconColor = themeMode === 'light' ? 'black' : 'white';
-    return (_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, { children: strings.id }) }), _jsx("th", { children: _jsx(Typography, { 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: handleRemoveShape(id), children: _jsx(EditIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleRemoveShape(id), children: _jsx(DeleteIcon, { color: iconColor }) })] })] }, id));
-                }) })] }));
+    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) }))] }));
 };
 export default ShapesList;

package/dist/Components/RoiEditor/Toolbar.js

@@ -5,6 +5,7 @@ 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';
@@ -13,11 +14,20 @@ import ParametersModalForm from './ParametersModalForm';
 import styles from './Toolbar.module.css';
 import { enableMainMetadata, enableRois } from './Utils';
 const Toolbar = () => {
+    var _a, _b;
     const { IconButton, themeMode, primaryColor, Typography, strings } = useContext(UiContext);
-    const { activeTool, setActiveTool, configuration } = useEditorContext();
-    const [form, setForm] = useState({ isOpen: false, data: [] });
+    const { activeTool, setActiveTool, configuration, metadata, setMetadata, onSubmit } = useEditorContext();
+    const [form, setForm] = useState({ isOpen: false });
     const iconColor = (tool) => (tool === activeTool ? primaryColor : themeMode === 'light' ? 'black' : 'white');
     const setTool = (tool) => () => setActiveTool(tool);
-    return (_jsxs(_Fragment, { children: [_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 */) }) }), _jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), children: _jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) }), _jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), children: _jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) }), _jsx(IconButton, { onClick: setTool("rect" /* ToolEnum.Rectangle */), children: _jsx(RectangleIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) }), _jsx(ColorPicker, { style: { marginLeft: 'auto' } })] })), enableRois(configuration) && enableMainMetadata(configuration) && (_jsx("div", { className: css('toolbar-spacer', styles, themeMode) })), enableMainMetadata(configuration) && (_jsx(IconButton, { onClick: () => setForm({ isOpen: true, data: configuration.parameters }), children: _jsx(AnnotateIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) }))] }), _jsx("div", { className: css('toolbar-helper', styles, themeMode), children: _jsxs(Typography, { children: [strings[activeTool], ": ", strings[`${activeTool}HelpText`]] }) }), form.isOpen && _jsx(ParametersModalForm, { onClose: () => setForm({ isOpen: false, data: [] }) })] }));
+    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 }))] }));
 };
 export default Toolbar;