@abidibo/react-cam-roi 0.0.7 → 0.0.8

package/dist/Components/RoiEditor/Hooks.js

@@ -1,8 +1,11 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useEditorContext } from '../../Providers/EditorProvider';
+import { UiContext } from '../../Providers/UiProvider';
 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(() => {
@@ -47,7 +50,9 @@ export const useCanvasSize = (imageUrl) => {
     }, [imageSize, wrapperRef.current]); // eslint-disable-line
     return { imageSize, canvasSize, wrapperRef, isReady };
 };
-export const useTool = (tool, activeColor, addShape, canvas) => {
+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 +73,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 +89,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 +110,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 +125,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 +134,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 +162,7 @@ export const useTool = (tool, activeColor, addShape, canvas) => {
             canvas.off('selection:cleared', handleSelectionCleared);
         };
     }, [
-        tool,
+        activeTool,
         activeColor,
         isDrawing,
         shape,
@@ -164,9 +175,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 +191,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 +230,12 @@ 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]);
 };

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

@@ -0,0 +1,5 @@
+export type ParametersModalFormProps = {
+    onClose: () => void;
+};
+declare const ParametersModalForm: React.FC<ParametersModalFormProps>;
+export default ParametersModalForm;

package/dist/Components/RoiEditor/ParametersModalForm.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { UiContext } from '../../Providers/UiProvider';
+const ParametersModalForm = ({ onClose }) => {
+    const { Modal, strings, Typography } = useContext(UiContext);
+    return (_jsx(Modal, { onClose: onClose, title: strings.mainParametersMetadata, isOpen: true, size: "lg", children: _jsx(Typography, { children: "Here comes the dynamic parameters form" }) }));
+};
+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,34 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 styles from './ShapesList.module.css';
+const ShapesList = () => {
+    const { strings, Typography, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, themeMode } = useContext(UiContext);
+    const { shapes, removeShape } = useEditorContext();
+    const [selected, setSelected] = useState([]);
+    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 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));
+                }) })] }));
+};
+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,5 +1,6 @@
-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';
@@ -7,13 +8,16 @@ import RectangleIcon from '../../Icons/RectangleIcon';
 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();
+    const { IconButton, themeMode, primaryColor, Typography, strings } = useContext(UiContext);
+    const { activeTool, setActiveTool, configuration } = useEditorContext();
+    const [form, setForm] = useState({ isOpen: false, data: [] });
     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' } })] }));
+    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: [] }) })] }));
 };
 export default Toolbar;

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

@@ -11,3 +11,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 0 1rem;
+  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,49 @@ 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 | boolean;
+        label: string;
+    }[];
+    required: boolean;
+    value: number | string | boolean | null;
+};
+export type RoiConfiguration = {
+    role: string;
+    type: Omit<ShapeType, 'pointer'>;
+    multiplicity: {
+        operator: OperatorEnum;
+        threshold: number;
+    };
+    parameters: ConfigurationParameter[];
+};
+export type Configuration = {
+    parameters: ConfigurationParameter[];
+    rois: RoiConfiguration[];
+};
+export interface INotify {
+    info: (message: string) => void;
+    warn: (message: string) => void;
+    error: (message: string) => void;
+    success: (message: string) => void;
+}

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,5 @@
+import { Configuration, INotify, Shapes, 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;

package/dist/Components/RoiEditor/Utils.js

@@ -0,0 +1,37 @@
+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;
+};

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

@@ -1,5 +1,7 @@
+import { Configuration } from './Types';
 export type RoiEditorProps = {
     imageUrl: string;
+    configuration: Configuration;
 };
 declare const RoiEditor: React.FC<RoiEditorProps>;
 export default RoiEditor;

package/dist/Components/RoiEditor/index.js

@@ -6,12 +6,11 @@ import { css, log } from '../../Utils';
 import { Loader } from '../Loader';
 import Canvas from './Canvas';
 import { useCanvasSize } from './Hooks';
-import Metadata from './Metadata';
+import ShapesList from './ShapesList';
 import styles from './RoiEditor.module.css';
 import Toolbar from './Toolbar';
-// https://medium.com/@na.mazaheri/dynamically-drawing-shapes-on-canvas-with-fabric-js-in-react-js-8b9c42791903
 // https://github.com/n-mazaheri/image-editor
-const RoiEditor = ({ imageUrl }) => {
+const RoiEditor = ({ imageUrl, configuration }) => {
     const { themeMode, enableLogs, pickerColors } = useContext(UiContext);
     const { imageSize, canvasSize, wrapperRef, isReady } = useCanvasSize(imageUrl);
     const [activeTool, setActiveTool] = useState("pointer" /* ToolEnum.Pointer */);
@@ -28,10 +27,10 @@ const RoiEditor = ({ imageUrl }) => {
     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, { activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, shapes: shapes, addShape: addShape, removeShape: removeShape, configuration: configuration, 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 }) }), _jsx(ShapesList, {})] }) }));
 };
 export default RoiEditor;

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

@@ -1,5 +1,8 @@
 export type TypographyProps = {
     children?: React.ReactNode;
+    className?: string;
+    variant?: any;
+    component?: any;
 };
 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, className = '', component = 'span' }) => {
+    const Tag = component;
+    return _jsx(Tag, { className: className, 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;