@abidibo/react-cam-roi 0.0.7 → 0.0.10

package/dist/Components/RoiEditor/Hooks.js

@@ -1,8 +1,14 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+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 { handleDoubleClickPolygon, handleMouseDownPolygon, handleMouseMovePolygon } from './Polygon';
-import { handleDoubleClickPolyline, handleMouseDownPolyline, handleMouseMovePolyline } from './Polyline';
-import { handleMouseDownRect, handleMouseMoveRect, handleMouseUpRect } from './Rectangle';
+import { copyPolygon, handleDoubleClickPolygon, handleMouseDownPolygon, handleMouseMovePolygon } from './Polygon';
+import { copyPolyline, handleDoubleClickPolyline, handleMouseDownPolyline, handleMouseMovePolyline } from './Polyline';
+import { copyRectangle, handleMouseDownRect, handleMouseMoveRect, handleMouseUpRect } from './Rectangle';
+import { canDrawShape } from './Utils';
 export const useImageSize = (imageUrl) => {
     const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
     useEffect(() => {
@@ -37,17 +43,81 @@ 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 useTool = (tool, activeColor, addShape, canvas) => {
+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);
     const [isDrawing, setIsDrawing] = useState(false);
     const [shape, setShape] = useState(null);
     const [originX, setOriginX] = useState(0);
@@ -68,7 +138,7 @@ export const useTool = (tool, activeColor, addShape, canvas) => {
         if (!canvas) {
             return;
         }
-        if (tool === "pointer" /* ToolEnum.Pointer */) {
+        if (activeTool === "pointer" /* ToolEnum.Pointer */) {
             // enable selection
             canvas.selection = true;
             canvas.getObjects().forEach((object) => {
@@ -84,14 +154,20 @@ export const useTool = (tool, activeColor, addShape, canvas) => {
             canvas.renderAll();
         }
         const handleMouseDown = (event) => {
-            switch (tool) {
-                case "rectangle" /* ToolEnum.Rectangle */:
+            switch (activeTool) {
+                case "rect" /* ToolEnum.Rectangle */:
+                    if (!canDrawShape(configuration, "rect" /* ToolEnum.Rectangle */, shapes, notify, strings.cannotDrawMoreRectangles))
+                        return;
                     handleMouseDownRect(event, canvas, activeColor, setOriginX, setOriginY, setShape, setIsDrawing);
                     break;
                 case "polygon" /* ToolEnum.Polygon */:
+                    if (!canDrawShape(configuration, "polygon" /* ToolEnum.Polygon */, shapes, notify, strings.cannotDrawMorePolygons))
+                        return;
                     handleMouseDownPolygon(event, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines);
                     break;
                 case "polyline" /* ToolEnum.Polyline */:
+                    if (!canDrawShape(configuration, "polyline" /* ToolEnum.Polyline */, shapes, notify, strings.cannotDrawMorePolylines))
+                        return;
                     handleMouseDownPolyline(event, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines);
                     break;
                 default:
@@ -99,8 +175,8 @@ export const useTool = (tool, activeColor, addShape, canvas) => {
             }
         };
         const handleMouseMove = (event) => {
-            switch (tool) {
-                case "rectangle" /* ToolEnum.Rectangle */:
+            switch (activeTool) {
+                case "rect" /* ToolEnum.Rectangle */:
                     handleMouseMoveRect(event, canvas, originX, originY, shape, isDrawing);
                     break;
                 case "polygon" /* ToolEnum.Polygon */:
@@ -114,8 +190,8 @@ export const useTool = (tool, activeColor, addShape, canvas) => {
             }
         };
         const handleMouseUp = () => {
-            switch (tool) {
-                case "rectangle" /* ToolEnum.Rectangle */:
+            switch (activeTool) {
+                case "rect" /* ToolEnum.Rectangle */:
                     handleMouseUpRect(canvas, setIsDrawing, shape, setShape, addShape);
                     break;
                 default:
@@ -123,7 +199,7 @@ export const useTool = (tool, activeColor, addShape, canvas) => {
             }
         };
         const handleDoubleClick = () => {
-            switch (tool) {
+            switch (activeTool) {
                 case "polygon" /* ToolEnum.Polygon */:
                     handleDoubleClickPolygon(canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines, addShape);
                     break;
@@ -151,7 +227,7 @@ export const useTool = (tool, activeColor, addShape, canvas) => {
             canvas.off('selection:cleared', handleSelectionCleared);
         };
     }, [
-        tool,
+        activeTool,
         activeColor,
         isDrawing,
         shape,
@@ -164,9 +240,15 @@ export const useTool = (tool, activeColor, addShape, canvas) => {
         addShape,
         handleObjectSelected,
         handleSelectionCleared,
+        configuration,
+        notify,
+        strings,
+        shapes,
     ]);
 };
-export const useDispatcherEvents = (canvas, setActiveTool) => {
+export const useDispatcherEvents = (canvas) => {
+    const { configuration, shapes, addShape, setActiveTool } = useEditorContext();
+    const { notify, strings } = useContext(UiContext);
     useEffect(() => {
         const removeShape = (_, id) => {
             const obj = canvas === null || canvas === void 0 ? void 0 : canvas.getObjects().find((s) => s.id === id);
@@ -174,6 +256,35 @@ export const useDispatcherEvents = (canvas, setActiveTool) => {
                 canvas === null || canvas === void 0 ? void 0 : canvas.remove(obj);
             }
         };
+        const copyShape = (_, id) => {
+            const obj = canvas === null || canvas === void 0 ? void 0 : canvas.getObjects().find((s) => s.id === id);
+            let copy;
+            switch (obj === null || obj === void 0 ? void 0 : obj.type) {
+                case "polygon" /* ToolEnum.Polygon */:
+                    if (!canDrawShape(configuration, "polygon" /* ToolEnum.Polygon */, shapes, notify, strings.cannotDrawMorePolygons))
+                        return;
+                    copy = copyPolygon(canvas, obj, addShape);
+                    // @ts-expect-error id exists but his stupid ts does not know
+                    Dispatcher.emit('canvas:selectShape', copy.id);
+                    break;
+                case "polyline" /* ToolEnum.Polyline */:
+                    if (!canDrawShape(configuration, "polyline" /* ToolEnum.Polyline */, shapes, notify, strings.cannotDrawMorePolylines))
+                        return;
+                    copy = copyPolyline(canvas, obj, addShape);
+                    // @ts-expect-error id exists but his stupid ts does not know
+                    Dispatcher.emit('canvas:selectShape', copy.id);
+                    break;
+                case "rect" /* ToolEnum.Rectangle */:
+                    if (!canDrawShape(configuration, "rect" /* ToolEnum.Rectangle */, shapes, notify, strings.cannotDrawMoreRectangles))
+                        return;
+                    copy = copyRectangle(canvas, obj, addShape);
+                    // @ts-expect-error id exists but his stupid ts does not know
+                    Dispatcher.emit('canvas:selectShape', copy.id);
+                    break;
+                default:
+                    break;
+            }
+        };
         const selectShape = (_, id) => {
             const obj = canvas === null || canvas === void 0 ? void 0 : canvas.getObjects().find((s) => s.id === id);
             if (obj) {
@@ -184,10 +295,26 @@ export const useDispatcherEvents = (canvas, setActiveTool) => {
             }
         };
         Dispatcher.register('canvas:removeShape', removeShape);
+        Dispatcher.register('canvas:copyShape', copyShape);
         Dispatcher.register('canvas:selectShape', selectShape);
         return () => {
             Dispatcher.unregister('canvas:removeShape', removeShape);
+            Dispatcher.unregister('canvas:copyShape', copyShape);
             Dispatcher.unregister('canvas:selectShape', selectShape);
         };
-    }, [setActiveTool, 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/Polygon.d.ts

@@ -1,5 +1,5 @@
 import * as fabric from 'fabric';
-import { FabricEvent, ShapeType } from './Types';
+import { FabricEvent, IAddShape } from './Types';
 export declare const handleMouseDownPolygon: (event: FabricEvent, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
     x: number;
     y: number;
@@ -14,4 +14,5 @@ export declare const handleDoubleClickPolygon: (canvas: fabric.Canvas, activeCol
 }[], setPoints: (v: {
     x: number;
     y: number;
-}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void, addShape: (id: string, type: ShapeType, shape: fabric.Polygon) => void) => void;
+}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void, addShape: IAddShape) => void;
+export declare const copyPolygon: (canvas: fabric.Canvas, polygon: fabric.Polygon, addShape: IAddShape) => fabric.Polygon;

package/dist/Components/RoiEditor/Polygon.js

@@ -56,3 +56,21 @@ export const handleDoubleClickPolygon = (canvas, activeColor, setIsDrawing, poin
         setIsDrawing(false);
     }
 };
+export const copyPolygon = (canvas, polygon, addShape) => {
+    const id = uuidv4();
+    const copy = new fabric.Polygon(polygon.points, {
+        top: polygon.top + 10,
+        left: polygon.left + 10,
+        fill: 'transparent',
+        stroke: polygon.stroke,
+        strokeWidth: polygon.strokeWidth,
+        selectable: false,
+        hasControls: true,
+        hoverCursor: 'default',
+        // @ts-expect-error id is not included in types but the property is added and it works
+        id,
+    });
+    canvas.add(copy);
+    addShape(id, "polygon" /* ToolEnum.Polygon */, copy);
+    return copy;
+};

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

@@ -1,5 +1,5 @@
 import * as fabric from 'fabric';
-import { FabricEvent, ShapeType } from './Types';
+import { FabricEvent, IAddShape, ShapeType } from './Types';
 export declare const handleMouseDownPolyline: (event: FabricEvent, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
     x: number;
     y: number;
@@ -15,3 +15,14 @@ export declare const handleDoubleClickPolyline: (canvas: fabric.Canvas, activeCo
     x: number;
     y: number;
 }[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void, addShape: (id: string, type: ShapeType, shape: fabric.Polyline) => void) => void;
+export declare const copyPolyline: (canvas: fabric.Canvas, polyline: fabric.Polyline, addShape: IAddShape) => fabric.Polyline<{
+    top: number;
+    left: number;
+    fill: string;
+    stroke: string | fabric.TFiller | null;
+    strokeWidth: number;
+    selectable: false;
+    hasControls: true;
+    hoverCursor: string;
+    id: string;
+}, fabric.SerializedPolylineProps, fabric.ObjectEvents>;

package/dist/Components/RoiEditor/Polyline.js

@@ -37,6 +37,7 @@ export const handleDoubleClickPolyline = (canvas, activeColor, setIsDrawing, poi
     if (points.length > 2) {
         const id = uuidv4();
         const polyline = new fabric.Polyline(points, {
+            fill: 'transparent',
             stroke: activeColor,
             strokeWidth: 2,
             selectable: false,
@@ -54,3 +55,20 @@ export const handleDoubleClickPolyline = (canvas, activeColor, setIsDrawing, poi
         setIsDrawing(false);
     }
 };
+export const copyPolyline = (canvas, polyline, addShape) => {
+    const id = uuidv4();
+    const copy = new fabric.Polyline(polyline.points, {
+        top: polyline.top + 10,
+        left: polyline.left + 10,
+        fill: 'transparent',
+        stroke: polyline.stroke,
+        strokeWidth: polyline.strokeWidth,
+        selectable: false,
+        hasControls: true,
+        hoverCursor: 'default',
+        id,
+    });
+    canvas.add(copy);
+    addShape(id, "polyline" /* ToolEnum.Polyline */, copy);
+    return copy;
+};

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

@@ -1,5 +1,21 @@
 import * as fabric from 'fabric';
-import { FabricEvent, Shape, ShapeType } from './Types';
+import { FabricEvent, IAddShape, Shape, ShapeType } from './Types';
 export declare const handleMouseDownRect: (event: FabricEvent, canvas: fabric.Canvas, activeColor: string, setOriginX: (v: number) => void, setOriginY: (v: number) => void, setShape: (v: Shape) => void, setIsDrawing: (v: boolean) => void) => void;
 export declare const handleMouseMoveRect: (event: FabricEvent, canvas: fabric.Canvas, originX: number, originY: number, shape: Shape, isDrawing: boolean) => void;
 export declare const handleMouseUpRect: (canvas: fabric.Canvas, setIsDrawing: (v: boolean) => void, shape: Shape, setShape: (v: Shape | null) => void, addShape: (id: string, type: ShapeType, shape: Shape) => void) => void;
+export declare const copyRectangle: (canvas: fabric.Canvas, rectangle: fabric.Rect, addShape: IAddShape) => fabric.Rect<{
+    left: number;
+    top: number;
+    originX: "left";
+    originY: "top";
+    width: number;
+    height: number;
+    fill: string;
+    stroke: string | fabric.TFiller | null;
+    strokeWidth: number;
+    strokeUniform: true;
+    selectable: false;
+    hasControls: true;
+    hoverCursor: string;
+    id: string;
+}, fabric.SerializedRectProps, fabric.ObjectEvents>;

package/dist/Components/RoiEditor/Rectangle.js

@@ -44,7 +44,29 @@ export const handleMouseMoveRect = (event, canvas, originX, originY, shape, isDr
 export const handleMouseUpRect = (canvas, setIsDrawing, shape, setShape, addShape) => {
     setIsDrawing(false);
     shape.setCoords();
-    addShape(shape.id, "rectangle" /* ToolEnum.Rectangle */, shape);
+    addShape(shape.id, "rect" /* ToolEnum.Rectangle */, shape);
     setShape(null);
     canvas.defaultCursor = 'default';
 };
+export const copyRectangle = (canvas, rectangle, addShape) => {
+    const id = uuidv4();
+    const copy = new fabric.Rect({
+        left: rectangle.left + 10,
+        top: rectangle.top + 10,
+        originX: 'left',
+        originY: 'top',
+        width: rectangle.width,
+        height: rectangle.height,
+        fill: 'transparent',
+        stroke: rectangle.stroke,
+        strokeWidth: rectangle.strokeWidth,
+        strokeUniform: true,
+        selectable: false,
+        hasControls: true,
+        hoverCursor: 'default',
+        id,
+    });
+    canvas.add(copy);
+    addShape(id, "rect" /* ToolEnum.Rectangle */, copy);
+    return copy;
+};

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

@@ -0,0 +1,2 @@
+declare const ShapesList: React.FC;
+export default ShapesList;

package/dist/Components/RoiEditor/ShapesList.js

@@ -0,0 +1,47 @@
+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 = () => {
+    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);
+        return () => {
+            Dispatcher.unregister('canvas:shapeSelected', setSelectedShapes);
+        };
+    }, [shapes]);
+    const handleCopyShape = (id) => () => {
+        Dispatcher.emit('canvas:copyShape', id);
+    };
+    const handleRemoveShape = (id) => () => {
+        Dispatcher.emit('canvas:removeShape', id);
+        removeShape(id);
+    };
+    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(_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/ShapesList.module.css

@@ -0,0 +1,36 @@
+.shapes-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.shapes-table th {
+  padding: .8rem .3rem .3rem;
+  text-align: left;
+}
+
+.shapes-table td {
+  padding: 0 .3rem;
+}
+
+.shapes-table tr td:last-child,
+.shapes-table tr th:last-child {
+  text-align: right;
+}
+
+.shapes-table-light {
+  background-color: #eee;
+  color: #000;
+}
+
+.shapes-table-dark {
+  background-color: #333;
+  color: #fff;
+}
+
+.shapes-row-selected-light {
+  background-color: #ccc;
+}
+
+.shapes-row-selected-dark {
+  background-color: #666;
+}

package/dist/Components/RoiEditor/Toolbar.js

@@ -1,19 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import AnnotateIcon from '../../Icons/AnnotateIcon';
 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';
-import styles from './Toolbar.module.css';
 import ColorPicker from './ColorPicker';
+import ParametersModalForm from './ParametersModalForm';
+import styles from './Toolbar.module.css';
+import { enableMainMetadata, enableRois } from './Utils';
 const Toolbar = () => {
-    const { IconButton, themeMode, primaryColor } = useContext(UiContext);
-    const { activeTool, setActiveTool } = useEditorContext();
+    var _a, _b;
+    const { IconButton, themeMode, primaryColor, Typography, strings } = useContext(UiContext);
+    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("div", { className: css('toolbar', styles, themeMode), 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("rectangle" /* ToolEnum.Rectangle */), children: _jsx(RectangleIcon, { color: iconColor("rectangle" /* ToolEnum.Rectangle */) }) }), _jsx(ColorPicker, { style: { marginLeft: 'auto' } })] }));
+    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;