@abidibo/react-cam-roi 0.0.7 → 0.0.10

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

@@ -1,3 +1,15 @@
+.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;
@@ -11,3 +23,31 @@
 .toolbar-dark {
   background-color: #333;
 }
+
+.toolbar-helper {
+  padding: .5rem;
+}
+
+.toolbar-helper-light {
+  background-color: #f7f7f7;;
+  color: #000;
+}
+
+.toolbar-helper-dark {
+  background-color: #222;
+  color: #fff;
+}
+
+.toolbar-spacer {
+  height: 20px;
+  margin: 0 .5rem;
+  width: 1px;
+}
+
+.toolbar-spacer-light {
+  background-color: #ccc;
+}
+
+.toolbar-spacer-dark {
+  background-color: #555;
+}

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

@@ -3,7 +3,7 @@ export declare const enum ToolEnum {
     Pointer = "pointer",
     Polyline = "polyline",
     Polygon = "polygon",
-    Rectangle = "rectangle"
+    Rectangle = "rect"
 }
 export type ShapeType = ToolEnum.Polyline | ToolEnum.Polygon | ToolEnum.Rectangle;
 export type Shape = (fabric.Rect | fabric.Polygon | fabric.Polyline) & {
@@ -17,3 +17,99 @@ export type FabricEvent = fabric.TPointerEventInfo<fabric.TPointerEvent>;
 export type FabricSelectionEvent = Partial<fabric.TEvent> & {
     selected: fabric.Object[];
 };
+export type IAddShape = (id: string, type: ShapeType, shape: Shape) => void;
+export declare enum DataTypeEnum {
+    Integer = "int",
+    Float = "float",
+    String = "string",
+    Boolean = "bool"
+}
+export declare enum OperatorEnum {
+    Lt = "lt",
+    Lte = "lte",
+    Gt = "gt",
+    Gte = "gte",
+    Eq = "eq"
+}
+export type ConfigurationParameter = {
+    codename: string;
+    label: string;
+    description: string;
+    unit: string;
+    type: DataTypeEnum;
+    options: {
+        value: number | string;
+        label: string;
+    }[];
+    multiple?: boolean;
+    required: boolean;
+    value: number | string | boolean | string[] | number[] | null;
+};
+export type RoiConfiguration = {
+    role: string;
+    type: Omit<ShapeType, 'pointer'>;
+    multiplicity: {
+        operator: OperatorEnum;
+        threshold: number;
+    };
+    parameters: ConfigurationParameter[];
+};
+export type Configuration = {
+    parameters: ConfigurationParameter[];
+    rois: RoiConfiguration[];
+    options?: {
+        hideForbiddenTools?: boolean;
+        description?: string;
+    };
+};
+export interface INotify {
+    info: (message: string) => void;
+    warn: (message: string) => void;
+    error: (message: string) => void;
+    success: (message: string) => void;
+}
+export type Metadata = {
+    parameters: OutputParameter[];
+    rois: {
+        id: string;
+        parameters: OutputParameter[];
+    }[];
+};
+export type OutputShapeRect = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    color: string;
+};
+export type OutputShapePolyline = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+    top: number;
+    left: number;
+    color: string;
+};
+export type OutputShapePolygon = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+    top: number;
+    left: number;
+    color: string;
+};
+export interface OutputParameter {
+    codename: string;
+    value: number | string | boolean | string[] | number[] | null;
+}
+export interface OutputRoi {
+    parameters: OutputParameter[];
+    type: ShapeType;
+    shape: OutputShapeRect | OutputShapePolyline | OutputShapePolygon;
+}
+export interface Output {
+    parameters: OutputParameter[];
+    rois: OutputRoi[];
+}

package/dist/Components/RoiEditor/Types.js

@@ -1 +1,15 @@
-export {};
+export var DataTypeEnum;
+(function (DataTypeEnum) {
+    DataTypeEnum["Integer"] = "int";
+    DataTypeEnum["Float"] = "float";
+    DataTypeEnum["String"] = "string";
+    DataTypeEnum["Boolean"] = "bool";
+})(DataTypeEnum || (DataTypeEnum = {}));
+export var OperatorEnum;
+(function (OperatorEnum) {
+    OperatorEnum["Lt"] = "lt";
+    OperatorEnum["Lte"] = "lte";
+    OperatorEnum["Gt"] = "gt";
+    OperatorEnum["Gte"] = "gte";
+    OperatorEnum["Eq"] = "eq";
+})(OperatorEnum || (OperatorEnum = {}));

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

@@ -0,0 +1,22 @@
+import { Configuration, ConfigurationParameter, INotify, Metadata, Shape, Shapes, ShapeType, ToolEnum } from './Types';
+export declare const notify: INotify;
+export declare const enableRois: (configuration: Configuration) => boolean;
+export declare const enableMainMetadata: (configuration: Configuration) => boolean;
+export declare const canDrawShape: (configuration: Configuration, shapeType: Omit<ToolEnum, ToolEnum.Pointer>, shapes: Shapes, notify: INotify, message: string) => boolean;
+export declare const validateParametersForm: (parameters: ConfigurationParameter[], fields: Record<string, unknown>, setErrors: (errors: Record<string, string>) => void) => boolean;
+export declare const validate: (configuration: Configuration, shapes: Shapes, metadata: Metadata, strings: Record<string, string>) => [boolean, string[]];
+export declare const fabricShapeToOutputShape: (shape: Shape, type: ShapeType) => {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    color: string;
+    points?: undefined;
+} | {
+    points: any;
+    top: number;
+    left: number;
+    color: string;
+    width?: undefined;
+    height?: undefined;
+};

package/dist/Components/RoiEditor/Utils.js

@@ -0,0 +1,143 @@
+import { OperatorEnum } from './Types';
+export const notify = {
+    info: (message) => alert(`Info: ${message}`),
+    warn: (message) => alert(`Warning: ${message}`),
+    error: (message) => alert(`Error: ${message}`),
+    success: (message) => alert(`Success: ${message}`),
+};
+export const enableRois = (configuration) => {
+    return configuration.rois.length > 0;
+};
+export const enableMainMetadata = (configuration) => {
+    return configuration.parameters.length > 0;
+};
+export const canDrawShape = (configuration, shapeType, shapes, notify, message) => {
+    const rule = configuration.rois.find((roi) => roi.type === shapeType);
+    // no rule
+    if (!rule || !rule.multiplicity || Object.keys(rule.multiplicity).length === 0) {
+        return true;
+    }
+    const currentShapeCount = Object.values(shapes).filter((s) => s.type === shapeType).length;
+    let res = true;
+    switch (rule.multiplicity.operator) {
+        case OperatorEnum.Eq:
+        case OperatorEnum.Lte:
+            res = currentShapeCount + 1 <= rule.multiplicity.threshold;
+            break;
+        case OperatorEnum.Lt:
+            res = currentShapeCount + 1 < rule.multiplicity.threshold;
+            break;
+        default:
+            return true;
+    }
+    if (!res && notify) {
+        notify.warn(message);
+    }
+    return res;
+};
+export const validateParametersForm = (parameters, fields, setErrors) => {
+    const err = {};
+    parameters.forEach((p) => {
+        if (p.required && isEmpty(fields[p.codename])) {
+            err[p.codename] = 'requiredField';
+        }
+    });
+    if (Object.keys(err).length > 0) {
+        setErrors(err);
+        return false;
+    }
+    return true;
+};
+const isEmpty = (v) => {
+    if (typeof v === 'string') {
+        return v.length === 0;
+    }
+    if (Array.isArray(v)) {
+        return v.length === 0;
+    }
+    return v === null || v === undefined;
+};
+export const validate = (configuration, shapes, metadata, strings) => {
+    const errors = [];
+    // check main parameters
+    if (configuration.parameters.length) {
+        if (metadata.parameters.find((p) => { var _a; return ((_a = configuration.parameters.find((p2) => p2.codename === p.codename)) === null || _a === void 0 ? void 0 : _a.required) && isEmpty(p.value); })) {
+            errors.push(strings.missingRequiredValuesInMainParameters);
+        }
+    }
+    // check rois number
+    configuration.rois.forEach((roi) => {
+        // check multiplicity
+        if (roi.multiplicity) {
+            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()));
+                    }
+                    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()));
+                    }
+                    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()));
+                    }
+                    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()));
+                    }
+                    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()));
+                    }
+            }
+        }
+    });
+    // check rois metadata
+    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)) {
+                errors.push(strings.missingRequiredValuesInShapeParameters.replace('{id}', shapeId));
+            }
+        });
+    });
+    return [errors.length === 0, errors];
+};
+export const fabricShapeToOutputShape = (shape, type) => {
+    switch (type) {
+        case "rect" /* ToolEnum.Rectangle */:
+            return {
+                top: shape.top,
+                left: shape.left,
+                width: shape.width,
+                height: shape.height,
+                color: shape.stroke
+            };
+        case "polygon" /* ToolEnum.Polygon */:
+        case "polyline" /* ToolEnum.Polyline */:
+            return {
+                points: shape.get('points'),
+                top: shape.top,
+                left: shape.left,
+                color: shape.stroke
+            };
+    }
+};

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

@@ -1,5 +1,9 @@
+import { Configuration, Output } from './Types';
 export type RoiEditorProps = {
     imageUrl: string;
+    configuration: Configuration;
+    onSubmit: (data: Output) => void;
+    initialData?: Output;
 };
 declare const RoiEditor: React.FC<RoiEditorProps>;
 export default RoiEditor;

package/dist/Components/RoiEditor/index.js

@@ -6,32 +6,69 @@ import { css, log } from '../../Utils';
 import { Loader } from '../Loader';
 import Canvas from './Canvas';
 import { useCanvasSize } from './Hooks';
-import Metadata from './Metadata';
 import styles from './RoiEditor.module.css';
+import ShapesList from './ShapesList';
 import Toolbar from './Toolbar';
-// https://medium.com/@na.mazaheri/dynamically-drawing-shapes-on-canvas-with-fabric-js-in-react-js-8b9c42791903
+import { fabricShapeToOutputShape, validate } from './Utils';
 // https://github.com/n-mazaheri/image-editor
-const RoiEditor = ({ imageUrl }) => {
-    const { themeMode, enableLogs, pickerColors } = useContext(UiContext);
+const RoiEditor = ({ imageUrl, configuration, onSubmit, initialData }) => {
+    var _a, _b, _c;
+    const { themeMode, enableLogs, pickerColors, strings, notify } = useContext(UiContext);
     const { imageSize, canvasSize, wrapperRef, isReady } = useCanvasSize(imageUrl);
     const [activeTool, setActiveTool] = useState("pointer" /* ToolEnum.Pointer */);
     const [activeColor, setActiveColor] = useState(pickerColors[0]);
+    const [metadata, setMetadata] = useState({
+        parameters: [
+            ...((_a = configuration.parameters.map((p) => {
+                const initial = initialData === null || initialData === void 0 ? void 0 : initialData.parameters.find((p) => p.codename === p.codename);
+                return {
+                    codename: p.codename,
+                    value: initial ? initial.value : p.value,
+                };
+            })) !== null && _a !== void 0 ? _a : []),
+        ],
+        rois: [],
+    });
     const [shapes, setShapes] = useState({});
     const addShape = useCallback((id, type, shape) => setShapes(Object.assign(Object.assign({}, shapes), { [id]: { type, shape } })), [shapes]);
+    const addShapes = useCallback((s) => setShapes(Object.assign(Object.assign({}, shapes), s.reduce((r, s) => (Object.assign(Object.assign({}, r), { [s.id]: s })), {}))), [shapes]);
     const removeShape = useCallback((id) => {
         const newShapes = Object.assign({}, shapes);
         delete newShapes[id];
         setShapes(newShapes);
-    }, [shapes]);
+        setMetadata(Object.assign(Object.assign({}, metadata), { rois: metadata.rois.filter((r) => r.id !== id) }));
+    }, [shapes, metadata]);
+    const handleSubmit = useCallback(() => {
+        var _a, _b;
+        const [isValid, errors] = validate(configuration, shapes, metadata, strings);
+        if (isValid) {
+            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;
+                    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 : [],
+                        type: shapes[shapeId].type,
+                        shape: fabricShapeToOutputShape(shapes[shapeId].shape, shapes[shapeId].shape.type),
+                    });
+                }),
+            });
+        }
+        else {
+            notify.error(strings.invalidSubmission + '\n' + errors.map((e) => `- ${e}`).join('\n'));
+        }
+    }, [onSubmit, configuration, shapes, metadata, strings, notify]);
     log('info', enableLogs, 'react-cam-roi', 'active tool', activeTool);
     log('info', enableLogs, 'react-cam-roi', 'canvas size', canvasSize);
+    log('info', enableLogs, 'react-cam-roi', 'metadata', metadata);
     if (!isReady) {
         return _jsx(Loader, {});
     }
-    return (_jsx(EditorProvider, { activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, shapes: shapes, addShape: addShape, removeShape: removeShape, 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, { 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: {
                         width: `${canvasSize.width}px`,
                         height: `${canvasSize.height}px`,
                         backgroundImage: `url(${imageUrl})`,
-                    }, children: _jsx(Canvas, { canvasSize: canvasSize }) }), _jsx(Metadata, {})] }) }));
+                    }, children: _jsx(Canvas, { canvasSize: canvasSize, initialData: initialData }) }), _jsx(ShapesList, {})] }) }));
 };
 export default RoiEditor;

package/dist/Components/TextField/TextField.module.css

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

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

@@ -0,0 +1,6 @@
+import { FieldProps } from '../../Types';
+export interface TextFieldProps extends FieldProps<string> {
+    type?: 'text' | 'email' | 'password';
+}
+declare const TextField: React.FC<TextFieldProps>;
+export default TextField;

package/dist/Components/TextField/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 './TextField.module.css';
+const TextField = ({ onChange, type = 'text', value, label, helperText, error, required = false, readOnly = false, disabled = false, }) => {
+    const { themeMode, Typography } = useContext(UiContext);
+    const handleChange = (e) => {
+        onChange(e.target.value);
+    };
+    return (_jsxs("div", { className: css('text-field-wrapper', styles, themeMode), children: [_jsx("label", { className: `${css('text-field-label', styles, themeMode)} ${error ? css('text-field-label-error', styles, null) : ''}`, children: _jsxs(Typography, { children: [label, required && ' *'] }) }), _jsx("input", { type: type, className: `${css('text-field', styles, themeMode)} ${error ? css('text-field-error', styles, null) : ''}`, onChange: handleChange, value: value, readOnly: readOnly, disabled: disabled }), helperText && (_jsx(Typography, { component: 'div', className: `${css('text-field-helper-text', styles, themeMode)} ${error ? css('text-field-helper-text-error', styles, null) : ''}`, children: helperText }))] }));
+};
+export default TextField;

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

@@ -1,5 +1,9 @@
 export type TypographyProps = {
     children?: React.ReactNode;
+    className?: string;
+    variant?: any;
+    component?: any;
+    style?: React.CSSProperties;
 };
 declare const Typography: React.FC<TypographyProps>;
 export default Typography;

package/dist/Components/Typography/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const Typography = ({ children }) => {
-    return _jsx("span", { children: children });
+const Typography = ({ children, style = {}, className = '', component = 'span' }) => {
+    const Tag = component;
+    return _jsx(Tag, { className: className, style: style, children: children });
 };
 export default Typography;

package/dist/Icons/AnnotateIcon.d.ts

@@ -0,0 +1,6 @@
+type AnnotateIconProps = {
+    color?: string;
+    style?: React.CSSProperties;
+};
+declare const AnnotateIcon: React.FC<AnnotateIconProps>;
+export default AnnotateIcon;

package/dist/Icons/AnnotateIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnnotateIcon = ({ color = 'black', style = {} }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "M280-280h84l240-238-86-86-238 238v86Zm352-266 42-44q6-6 6-14t-6-14l-56-56q-6-6-14-6t-14 6l-44 42 86 86ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h168q13-36 43.5-58t68.5-22q38 0 68.5 22t43.5 58h168q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm280-590q13 0 21.5-8.5T510-820q0-13-8.5-21.5T480-850q-13 0-21.5 8.5T450-820q0 13 8.5 21.5T480-790ZM200-200v-560 560Z" }) }));
+};
+export default AnnotateIcon;

package/dist/Icons/CloseIcon.d.ts

@@ -0,0 +1,6 @@
+type CloseIconProps = {
+    color?: string;
+    style?: React.CSSProperties;
+};
+declare const CloseIcon: React.FC<CloseIconProps>;
+export default CloseIcon;

package/dist/Icons/CloseIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const CloseIcon = ({ color = 'black', style = {} }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" }) }));
+};
+export default CloseIcon;

package/dist/Icons/CopyIcon.d.ts

@@ -0,0 +1,6 @@
+type CopyIconProps = {
+    color?: string;
+    style?: React.CSSProperties;
+};
+declare const CopyIcon: React.FC<CopyIconProps>;
+export default CopyIcon;

package/dist/Icons/CopyIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const CopyIcon = ({ color = 'black', style = {} }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", width: "24px", viewBox: "0 -960 960 960", style: style, children: _jsx("path", { fill: color, d: "M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" }) }));
+};
+export default CopyIcon;

package/dist/Icons/SaveIcon.d.ts

@@ -0,0 +1,6 @@
+type SaveIconProps = {
+    color?: string;
+    style?: React.CSSProperties;
+};
+declare const SaveIcon: React.FC<SaveIconProps>;
+export default SaveIcon;

package/dist/Icons/SaveIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SaveIcon = ({ color = 'black', style = {} }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z" }) }));
+};
+export default SaveIcon;

package/dist/Providers/EditorProvider.d.ts

@@ -1,15 +1,25 @@
 import { PropsWithChildren } from 'react';
-import { Shape, Shapes, ShapeType, ToolEnum } from '../Components/RoiEditor/Types';
+import { Configuration, Metadata, Shape, Shapes, ShapeType, ToolEnum } from '../Components/RoiEditor/Types';
 type EditorContextType = {
+    hideForbiddenTools: boolean;
     activeTool: ToolEnum;
     setActiveTool: (tool: ToolEnum) => void;
     activeColor: string;
     setActiveColor: (color: string) => void;
     shapes: Shapes;
     addShape: (id: string, type: ShapeType, shape: Shape) => void;
+    addShapes: (shapes: {
+        id: string;
+        type: ShapeType;
+        shape: Shape;
+    }[]) => void;
     removeShape: (id: string) => void;
+    configuration: Configuration;
+    metadata: Metadata;
+    setMetadata: (data: Metadata) => void;
+    onSubmit: () => void;
 };
 export declare const EditorContext: import("react").Context<EditorContextType | undefined>;
 export declare function useEditorContext(): EditorContextType;
-declare const EditorProvider: ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
+declare const EditorProvider: ({ children, 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,7 +8,21 @@ export function useEditorContext() {
     }
     return context;
 }
-const EditorProvider = ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, }) => {
-    return (_jsx(EditorContext.Provider, { value: { activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape }, children: children }));
+const EditorProvider = ({ children, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }) => {
+    return (_jsx(EditorContext.Provider, { value: {
+            hideForbiddenTools,
+            activeTool,
+            setActiveTool,
+            activeColor,
+            setActiveColor,
+            shapes,
+            addShape,
+            addShapes,
+            removeShape,
+            configuration,
+            metadata,
+            setMetadata,
+            onSubmit,
+        }, children: children }));
 };
 export default EditorProvider;