@abidibo/react-cam-roi 0.2.1 → 0.2.3

package/dist/Components/RoiEditor/Polyline.js

@@ -0,0 +1,75 @@
+import * as fabric from 'fabric';
+import { v4 as uuidv4 } from 'uuid';
+import Dispatcher from '../../Utils/Dispatcher';
+const addPoint = (event, canvas, color, points, setPoints, lines, setLines) => {
+    const pointer = canvas.getScenePoint(event.e);
+    const newPoint = { x: pointer.x, y: pointer.y };
+    const newPolylinePoints = [...points, newPoint];
+    setPoints(newPolylinePoints);
+    if (newPolylinePoints.length > 0) {
+        const line = new fabric.Line([
+            newPolylinePoints[newPolylinePoints.length - 1].x,
+            newPolylinePoints[newPolylinePoints.length - 1].y,
+            pointer.x,
+            pointer.y,
+        ], {
+            stroke: color,
+            strokeWidth: 2,
+            strokeUniform: true,
+            selectable: false,
+            hasControls: false,
+        });
+        canvas.add(line);
+        setLines([...lines, line]);
+    }
+};
+export const handleMouseDownPolyline = (event, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines) => {
+    setIsDrawing(true);
+    addPoint(event, canvas, activeColor, points, setPoints, lines, setLines);
+};
+export const handleMouseMovePolyline = (event, canvas, isDrawing, lines) => {
+    if (isDrawing && lines.length > 0) {
+        const pointer = canvas.getScenePoint(event.e);
+        lines[lines.length - 1].set({ x2: pointer.x, y2: pointer.y });
+        canvas.renderAll();
+    }
+};
+export const handleDoubleClickPolyline = (editorId, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines) => {
+    if (points.length > 2) {
+        const id = uuidv4();
+        const polyline = new fabric.Polyline(points, {
+            fill: 'transparent',
+            stroke: activeColor,
+            strokeWidth: 2,
+            selectable: false,
+            hasControls: true,
+            lockRotation: false,
+            id,
+        });
+        canvas.add(polyline);
+        Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "polyline" /* ToolEnum.Polyline */, shape: polyline });
+        setPoints([]);
+        for (const line of lines) {
+            canvas.remove(line); // Remove temporary lines
+        }
+        setLines([]);
+        setIsDrawing(false);
+    }
+};
+export const copyPolyline = (editorId, canvas, polyline) => {
+    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);
+    Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "polyline" /* ToolEnum.Polyline */, shape: copy });
+    return copy;
+};

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

@@ -0,0 +1,21 @@
+import * as fabric from 'fabric';
+import { FabricEvent, Shape } 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: (editorId: string, canvas: fabric.Canvas, setIsDrawing: (v: boolean) => void, shape: Shape, setShape: (v: Shape | null) => void) => void;
+export declare const copyRectangle: (editorId: string, canvas: fabric.Canvas, rectangle: fabric.Rect) => 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

@@ -0,0 +1,73 @@
+import * as fabric from 'fabric';
+import { v4 as uuidv4 } from 'uuid';
+import Dispatcher from '../../Utils/Dispatcher';
+export const handleMouseDownRect = (event, canvas, activeColor, setOriginX, setOriginY, setShape, setIsDrawing) => {
+    const pointer = canvas.getScenePoint(event.e);
+    setOriginX(pointer.x);
+    setOriginY(pointer.y);
+    const id = uuidv4();
+    const newRectangle = new fabric.Rect({
+        left: pointer.x,
+        top: pointer.y,
+        originX: 'left',
+        originY: 'top',
+        width: 0,
+        height: 0,
+        fill: 'transparent',
+        stroke: activeColor,
+        strokeWidth: 2,
+        strokeUniform: true,
+        selectable: false,
+        hasControls: true,
+        hoverCursor: 'default',
+        id,
+    });
+    canvas.add(newRectangle);
+    setShape(newRectangle);
+    setIsDrawing(true);
+};
+export const handleMouseMoveRect = (event, canvas, originX, originY, shape, isDrawing) => {
+    if (isDrawing && shape) {
+        const pointer = canvas.getScenePoint(event.e);
+        shape.set({
+            width: Math.abs(originX - pointer.x),
+            height: Math.abs(originY - pointer.y),
+        });
+        if (originX > pointer.x) {
+            shape.set({ left: pointer.x });
+        }
+        if (originY > pointer.y) {
+            shape.set({ top: pointer.y });
+        }
+        canvas.renderAll();
+    }
+};
+export const handleMouseUpRect = (editorId, canvas, setIsDrawing, shape, setShape) => {
+    setIsDrawing(false);
+    shape.setCoords();
+    Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id: shape.id, type: "rect" /* ToolEnum.Rectangle */, shape });
+    setShape(null);
+    canvas.defaultCursor = 'default';
+};
+export const copyRectangle = (editorId, canvas, rectangle) => {
+    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);
+    Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "rect" /* ToolEnum.Rectangle */, shape: copy });
+    return copy;
+};

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

@@ -0,0 +1,5 @@
+.canvas-wrapper {
+  background-size: contain;
+  background-repeat: no-repeat;
+  position: relative;
+}

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

@@ -0,0 +1,2 @@
+declare const RoisInfo: () => import("react/jsx-runtime").JSX.Element | null;
+export default RoisInfo;

package/dist/Components/RoiEditor/RoisInfo.js

@@ -0,0 +1,43 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { useEditorContext } from '../../Providers/EditorProvider';
+import { UiContext } from '../../Providers/UiProvider';
+import { formatString } from '../../Utils';
+import { OperatorEnum } from './Types';
+const RoisInfo = () => {
+    var _a;
+    const { strings, Typography } = useContext(UiContext);
+    const { configuration } = useEditorContext();
+    if (!((_a = configuration.rois) === null || _a === void 0 ? void 0 : _a.length))
+        return null;
+    return (_jsxs("div", { children: [_jsxs(Typography, { component: "div", children: [strings.roisToBeDrawn, ":"] }), _jsx("ul", { children: configuration.rois.map((r) => {
+                    var _a, _b;
+                    let rule;
+                    const data = {
+                        role: r.label,
+                        type: r.type,
+                        threshold: (_a = r.multiplicity) === null || _a === void 0 ? void 0 : _a.threshold,
+                    };
+                    switch ((_b = r.multiplicity) === null || _b === void 0 ? void 0 : _b.operator) {
+                        case OperatorEnum.Eq:
+                            rule = formatString(strings.roiMultiplicityEqRule, data);
+                            break;
+                        case OperatorEnum.Lt:
+                            rule = formatString(strings.roiMultiplicityLtRule, data);
+                            break;
+                        case OperatorEnum.Lte:
+                            rule = formatString(strings.roiMultiplicityLteRule, data);
+                            break;
+                        case OperatorEnum.Gt:
+                            rule = formatString(strings.roiMultiplicityGtRule, data);
+                            break;
+                        case OperatorEnum.Gte:
+                            rule = formatString(strings.roiMultiplicityGteRule, data);
+                            break;
+                        default:
+                            rule = formatString(strings.roiMultiplicityNoRule, data);
+                    }
+                    return (_jsx("li", { children: _jsx(Typography, { children: rule }) }, r.role));
+                }) })] }));
+};
+export default RoisInfo;

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,77 @@
+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, _g, _h, _j, _k;
+    const { strings, Typography, IconButton, DeleteIcon, AnnotateIcon, CopyIcon, themeMode } = useContext(UiContext);
+    const { shapes, removeShape, configuration, metadata, setMetadata, addShape, editorId } = useEditorContext();
+    const [selected, setSelected] = useState([]);
+    const [form, setForm] = useState({
+        isOpen: false,
+        shapeId: '',
+        type: null,
+        shape: null,
+    });
+    // open metadata form immediately after drawing the shape
+    useEffect(() => {
+        const openForm = (_, { id, type, shape }) => {
+            setForm({ isOpen: true, shapeId: id, type, shape });
+        };
+        Dispatcher.register(`canvas:${editorId}:shapeAdded`, openForm);
+        return () => {
+            Dispatcher.unregister(`canvas:${editorId}:shapeAdded`, openForm);
+        };
+    }, [editorId]);
+    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:${editorId}:shapeSelected`, setSelectedShapes);
+        return () => {
+            Dispatcher.unregister(`canvas:${editorId}:shapeSelected`, setSelectedShapes);
+        };
+    }, [shapes, editorId]);
+    const handleCopyShape = (id) => (evt) => {
+        evt.stopPropagation();
+        Dispatcher.emit(`canvas:${editorId}:copyShape`, id);
+    };
+    const handleRemoveShape = (id) => () => {
+        Dispatcher.emit(`canvas:${editorId}:removeShape`, id);
+        removeShape(id);
+    };
+    const handleSelectShape = (id) => () => {
+        Dispatcher.emit(`canvas:${editorId}:selectShape`, id);
+    };
+    const handleEditShapeMetadata = (id) => () => {
+        setForm({ isOpen: true, shapeId: id, type: null, shape: null });
+    };
+    const handleSubmitMetadata = (shapeId) => (data, properties) => {
+        // if in creation mode, add the shape
+        if (form.type !== null) {
+            addShape(shapeId, form.type, form.shape);
+        }
+        setMetadata(Object.assign(Object.assign({}, metadata), { rois: [...metadata.rois.filter((r) => r.id !== shapeId), Object.assign({ id: shapeId, parameters: data }, properties)] }));
+        setForm({ isOpen: false, shapeId: '', type: null, shape: null });
+    };
+    const handleCloseMetadataForm = () => {
+        // if in creation mode do not add shape and delete shape from canvas
+        if (form.type !== null) {
+            Dispatcher.emit(`canvas:${editorId}:removeShape`, form.shapeId);
+        }
+        setForm({ isOpen: false, shapeId: '', type: null, shape: null });
+    };
+    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.name }) }), _jsx("th", { children: _jsx(Typography, { style: { fontWeight: 'bold' }, children: strings.role }) }), _jsx("th", { children: _jsx(Typography, { style: { fontWeight: 'bold' }, children: strings.type }) }), _jsx("th", {})] }) })), _jsx("tbody", { children: Object.keys(shapes).map((id, idx) => {
+                            var _a;
+                            const m = metadata.rois.find((roi) => roi.id === id);
+                            return (_jsxs("tr", { onClick: handleSelectShape(id), className: selected.indexOf(id) > -1
+                                    ? css('shapes-row-selected', styles, themeMode)
+                                    : idx % 2 === 0
+                                        ? css('shapes-row-even', styles, themeMode)
+                                        : css('shapes-row-odd', styles, themeMode), children: [_jsx("td", { children: _jsxs("div", { className: styles.shapesTableName, children: [_jsx("div", { className: styles.shapesTableColor, style: { backgroundColor: shapes[id].shape.stroke } }), _jsx(Typography, { children: m === null || m === void 0 ? void 0 : m.name })] }) }), _jsx("td", { children: _jsx(Typography, { children: (_a = configuration.rois.find(r => r.role === (m === null || m === void 0 ? void 0 : m.role))) === null || _a === void 0 ? void 0 : _a.label }) }), _jsx("td", { children: _jsx(Typography, { children: strings[shapes[id].type] }) }), _jsxs("td", { children: [_jsx(IconButton, { onClick: handleCopyShape(id), children: _jsx(CopyIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleEditShapeMetadata(id), children: _jsx(AnnotateIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleRemoveShape(id), children: _jsx(DeleteIcon, { color: iconColor }) })] })] }, id));
+                        }) })] }), form.isOpen && (_jsx(ParametersModalForm, { shapeType: form.type || shapes[form.shapeId].type, shapeName: (_b = (_a = metadata.rois.find((roi) => roi.id === form.shapeId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '', shapeRole: (_d = (_c = metadata.rois.find((roi) => roi.id === form.shapeId)) === null || _c === void 0 ? void 0 : _c.role) !== null && _d !== void 0 ? _d : '', shapeId: form.shapeId, parameters: (_f = (_e = configuration.rois.find((roi) => roi.type === (form.type || shapes[form.shapeId].type))) === null || _e === void 0 ? void 0 : _e.parameters) !== null && _f !== void 0 ? _f : [], data: (_k = (_h = (_g = metadata.rois.find((roi) => roi.id === form.shapeId)) === null || _g === void 0 ? void 0 : _g.parameters) !== null && _h !== void 0 ? _h : (_j = configuration.rois.find((roi) => roi.type === (form.type || shapes[form.shapeId].type))) === null || _j === void 0 ? void 0 : _j.parameters) !== null && _k !== void 0 ? _k : [], title: strings.shapeParametersMetadata, onClose: handleCloseMetadataForm, onSubmit: handleSubmitMetadata(form.shapeId) }))] }));
+};
+export default ShapesList;

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

@@ -0,0 +1,71 @@
+.shapes-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.shapes-table tr {
+  cursor: pointer;
+}
+
+.shapes-table th {
+  padding: .8rem .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;
+}
+
+.shapes-row-even-light {
+  background-color: #f7f7f7;
+}
+
+.shapes-row-even-dark {
+  background-color: #444;
+}
+
+.shapes-row-odd-light {
+  background-color: #f0f0f0;
+}
+
+.shapes-row-odd-dark {
+  background-color: #555;
+}
+
+.shapesTableName {
+  display: flex;
+  align-items: center;
+}
+
+.shapesTableColor {
+  border: 1px solid #000;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-right: .5rem;
+}

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

@@ -0,0 +1,2 @@
+declare const Toolbar: () => import("react/jsx-runtime").JSX.Element;
+export default Toolbar;

package/dist/Components/RoiEditor/Toolbar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import PointerIcon from '../../Icons/PointerIcon';
+import PolygonIcon from '../../Icons/PolygonIcon';
+import PolylineIcon from '../../Icons/PolylineIcon';
+import RectangleIcon from '../../Icons/RectangleIcon';
+import { useEditorContext } from '../../Providers/EditorProvider';
+import { UiContext } from '../../Providers/UiProvider';
+import { css } from '../../Utils';
+import ColorPicker from './ColorPicker';
+import styles from './Toolbar.module.css';
+import { canDrawShape, enableRois } from './Utils';
+const Toolbar = () => {
+    var _a;
+    const { IconButton, themeMode, primaryColor, Typography, strings } = useContext(UiContext);
+    const { activeTool, setActiveTool, configuration, shapes } = useEditorContext();
+    const iconColor = (tool) => (tool === activeTool ? primaryColor : themeMode === 'light' ? 'black' : 'white');
+    const setTool = (tool) => () => setActiveTool(tool);
+    const hideForbiddenTools = (_a = configuration.options) === null || _a === void 0 ? void 0 : _a.hideForbiddenTools;
+    const polylineEnabled = configuration.rois.find((r) => r.type === "polyline" /* ToolEnum.Polyline */) &&
+        canDrawShape(configuration, "polyline" /* ToolEnum.Polyline */, shapes);
+    const polygonEnabled = configuration.rois.find((r) => r.type === "polygon" /* ToolEnum.Polygon */) && canDrawShape(configuration, "polygon" /* ToolEnum.Polygon */, shapes);
+    const rectangleEnabled = configuration.rois.find((r) => r.type === "rect" /* ToolEnum.Rectangle */) &&
+        canDrawShape(configuration, "rect" /* ToolEnum.Rectangle */, shapes);
+    return (_jsxs(_Fragment, { children: [_jsx("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) && (_jsx("div", { className: css('toolbar-helper', styles, themeMode), children: _jsxs(Typography, { children: [strings[activeTool], ": ", strings[`${activeTool}HelpText`]] }) }))] }));
+};
+export default Toolbar;

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

@@ -0,0 +1,41 @@
+.toolbar {
+  align-items: center;
+  display: flex;
+  padding: .5rem;
+}
+
+.toolbar-light {
+  background-color: #eee;;
+}
+
+.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/TopBar.d.ts

@@ -0,0 +1,2 @@
+declare const TopBar: () => import("react/jsx-runtime").JSX.Element;
+export default TopBar;

package/dist/Components/RoiEditor/TopBar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import { useEditorContext } from '../../Providers/EditorProvider';
+import { UiContext } from '../../Providers/UiProvider';
+import { css } from '../../Utils';
+import { enableMainMetadata } from './Utils';
+import SaveIcon from '../../Icons/SaveIcon';
+import ParametersModalForm from './ParametersModalForm';
+import styles from './TopBar.module.css';
+const TopBar = () => {
+    const { themeMode, AnnotateIcon, Button, primaryFgColor, strings } = useContext(UiContext);
+    const { configuration, onSubmit, metadata, setMetadata } = useEditorContext();
+    const [form, setForm] = useState({ isOpen: false });
+    const iconColor = themeMode === 'light' ? 'black' : 'white';
+    const handleSubmitMetadata = (data) => {
+        setMetadata(Object.assign(Object.assign({}, metadata), { parameters: data }));
+        setForm({ isOpen: false });
+    };
+    return (_jsxs("div", { className: css('top-bar', styles, themeMode), children: [enableMainMetadata(configuration) && (_jsxs(Button, { onClick: () => setForm({ isOpen: true }), children: [_jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] })), _jsxs(Button, { primary: true, onClick: onSubmit, children: [_jsx(SaveIcon, { color: primaryFgColor }), " ", strings.save] }), form.isOpen && (_jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: () => setForm({ isOpen: false }), onSubmit: handleSubmitMetadata }))] }));
+};
+export default TopBar;

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

@@ -0,0 +1,7 @@
+.top-bar {
+  align-items: center;
+  display: flex;
+  gap: .5rem;
+  justify-content: flex-end;
+  margin-bottom: .5rem;
+}

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

@@ -0,0 +1,128 @@
+import * as fabric from 'fabric';
+export declare const enum ToolEnum {
+    Pointer = "pointer",
+    Polyline = "polyline",
+    Polygon = "polygon",
+    Rectangle = "rect"
+}
+export type ShapeType = ToolEnum.Polyline | ToolEnum.Polygon | ToolEnum.Rectangle;
+export type Shape = (fabric.Rect | fabric.Polygon | fabric.Polyline) & {
+    id?: string;
+};
+export type Shapes = Record<string, {
+    type: ShapeType;
+    shape: Shape;
+}>;
+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;
+    label: 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[];
+        name: string;
+        role: string;
+    }[];
+};
+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;
+    name: string;
+    role: string;
+    id: string;
+    shape: OutputShapeRect | OutputShapePolyline | OutputShapePolygon;
+}
+export interface Output {
+    parameters: OutputParameter[];
+    rois: OutputRoi[];
+}
+export declare enum UpdateEventType {
+    AddRoi = "AddRoi",
+    RemoveRoi = "RemoveRoi",
+    UpdateRoi = "UpdateRoi",
+    UpdateRoiParameters = "UpdateRoiParameters",
+    UpdateMainParameters = "UpdateMainParameters"
+}

package/dist/Components/RoiEditor/Types.js

@@ -0,0 +1,23 @@
+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 = {}));
+export var UpdateEventType;
+(function (UpdateEventType) {
+    UpdateEventType["AddRoi"] = "AddRoi";
+    UpdateEventType["RemoveRoi"] = "RemoveRoi";
+    UpdateEventType["UpdateRoi"] = "UpdateRoi";
+    UpdateEventType["UpdateRoiParameters"] = "UpdateRoiParameters";
+    UpdateEventType["UpdateMainParameters"] = "UpdateMainParameters";
+})(UpdateEventType || (UpdateEventType = {}));

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

@@ -0,0 +1,25 @@
+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, imageSize: {
+    width: number;
+    height: number;
+}) => {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    color: string;
+    points?: undefined;
+} | {
+    points: any;
+    top: number;
+    left: number;
+    color: string;
+    width?: undefined;
+    height?: undefined;
+};