@abidibo/react-cam-roi 0.2.1 → 0.2.3

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

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

package/dist/Components/RoiEditor/Hooks.js

@@ -0,0 +1,328 @@
+import * as fabric from 'fabric';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useEditorContext } from '../../Providers/EditorProvider';
+import { UiContext } from '../../Providers/UiProvider';
+import { log, perc2Abs } from '../../Utils';
+import Dispatcher from '../../Utils/Dispatcher';
+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(() => {
+        const image = new Image();
+        image.src = imageUrl;
+        image.onload = () => {
+            setImageSize({ width: image.width, height: image.height });
+        };
+    }, [imageUrl]);
+    return { imageSize, isReady: imageSize.width > 0 };
+};
+export const useCanvasSize = (imageUrl) => {
+    console.log('before wrapper ref');
+    const wrapperRef = useRef(null);
+    console.log('after wrapper ref');
+    const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+    const { imageSize, isReady } = useImageSize(imageUrl);
+    useEffect(() => {
+        if (wrapperRef.current) {
+            const update = () => {
+                const availableWidth = wrapperRef.current.offsetWidth;
+                if (availableWidth < imageSize.width) {
+                    setCanvasSize({
+                        width: availableWidth,
+                        height: availableWidth * (imageSize.height / imageSize.width),
+                    });
+                }
+                else {
+                    setCanvasSize({
+                        width: imageSize.width,
+                        height: imageSize.height,
+                    });
+                }
+            };
+            if (imageSize.width > 0 && wrapperRef.current) {
+                update();
+            }
+        }
+    }, [imageSize, wrapperRef.current]); // eslint-disable-line
+    return { imageSize, canvasSize, wrapperRef, isReady };
+};
+export const initCanvasData = (canvasRef, imageSize, 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 = r.id;
+            let shape;
+            switch (r.type) {
+                case "rect" /* ToolEnum.Rectangle */:
+                    shape = new fabric.Rect({
+                        left: perc2Abs(r.shape.left, imageSize.width),
+                        top: perc2Abs(r.shape.top, imageSize.height),
+                        originX: 'left',
+                        originY: 'top',
+                        width: perc2Abs(r.shape.width, imageSize.width),
+                        height: perc2Abs(r.shape.height, imageSize.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.map(({ x, y }) => ({
+                        x: perc2Abs(x, imageSize.width),
+                        y: perc2Abs(y, imageSize.height),
+                    })), {
+                        top: perc2Abs(r.shape.top, imageSize.height),
+                        left: perc2Abs(r.shape.left, imageSize.width),
+                        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.map(({ x, y }) => ({
+                        x: perc2Abs(x, imageSize.width),
+                        y: perc2Abs(y, imageSize.height),
+                    })), {
+                        top: perc2Abs(r.shape.top, imageSize.height),
+                        left: perc2Abs(r.shape.left, imageSize.width),
+                        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, name: r.name, role: r.role });
+            s.push({ id, type: r.type, shape });
+        });
+        addShapes(s);
+        setMetadata(Object.assign(Object.assign({}, metadata), { rois: m }));
+    }
+};
+export const useTool = (canvas) => {
+    const { editorId, 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);
+    const [originY, setOriginY] = useState(0);
+    const [startPos] = useState({ x: 0, y: 0 });
+    const [points, setPoints] = useState([]);
+    const [lines, setLines] = useState([]);
+    // Handler for object selected event to update style settings
+    const handleObjectSelected = useCallback((event) => {
+        var _a;
+        Dispatcher.emit(`canvas:${editorId}:shapeSelected`, (_a = event.selected) !== null && _a !== void 0 ? _a : null);
+    }, [editorId]);
+    // Handler for selection cleared event to reset selected shapes state
+    const handleSelectionCleared = useCallback(() => {
+        Dispatcher.emit(`canvas:${editorId}:shapeSelected`, null);
+    }, [editorId]);
+    useEffect(() => {
+        if (!canvas) {
+            return;
+        }
+        if (activeTool === "pointer" /* ToolEnum.Pointer */) {
+            // enable selection
+            canvas.selection = true;
+            canvas.getObjects().forEach((object) => {
+                object.selectable = true;
+            });
+            canvas.renderAll();
+        }
+        else {
+            // disable selection
+            canvas.selection = false;
+            canvas.discardActiveObject();
+            Dispatcher.emit(`canvas:${editorId}:shapeSelected`, null);
+            canvas.renderAll();
+        }
+        const handleMouseDown = (event) => {
+            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:
+                    break;
+            }
+        };
+        const handleMouseMove = (event) => {
+            switch (activeTool) {
+                case "rect" /* ToolEnum.Rectangle */:
+                    handleMouseMoveRect(event, canvas, originX, originY, shape, isDrawing);
+                    break;
+                case "polygon" /* ToolEnum.Polygon */:
+                    handleMouseMovePolygon(event, canvas, isDrawing, lines);
+                    break;
+                case "polyline" /* ToolEnum.Polyline */:
+                    handleMouseMovePolyline(event, canvas, isDrawing, lines);
+                    break;
+                default:
+                    break;
+            }
+        };
+        const handleMouseUp = () => {
+            switch (activeTool) {
+                case "rect" /* ToolEnum.Rectangle */:
+                    handleMouseUpRect(editorId, canvas, setIsDrawing, shape, setShape);
+                    break;
+                default:
+                    break;
+            }
+        };
+        const handleDoubleClick = () => {
+            switch (activeTool) {
+                case "polygon" /* ToolEnum.Polygon */:
+                    handleDoubleClickPolygon(editorId, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines);
+                    break;
+                case "polyline" /* ToolEnum.Polyline */:
+                    handleDoubleClickPolyline(editorId, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines);
+                    break;
+                default:
+                    break;
+            }
+        };
+        canvas.on('mouse:down', handleMouseDown);
+        canvas.on('mouse:move', handleMouseMove);
+        canvas.on('mouse:up', handleMouseUp);
+        canvas.on('mouse:dblclick', handleDoubleClick);
+        canvas.on('selection:created', handleObjectSelected);
+        canvas.on('selection:updated', handleObjectSelected);
+        canvas.on('selection:cleared', handleSelectionCleared);
+        return () => {
+            canvas.off('mouse:down', handleMouseDown);
+            canvas.off('mouse:move', handleMouseMove);
+            canvas.off('mouse:up', handleMouseUp);
+            canvas.off('mouse:dblclick', handleDoubleClick);
+            canvas.off('selection:created', handleObjectSelected);
+            canvas.off('selection:updated', handleObjectSelected);
+            canvas.off('selection:cleared', handleSelectionCleared);
+        };
+    }, [
+        activeTool,
+        activeColor,
+        isDrawing,
+        shape,
+        originX,
+        originY,
+        startPos,
+        lines,
+        points,
+        canvas,
+        addShape,
+        handleObjectSelected,
+        handleSelectionCleared,
+        configuration,
+        notify,
+        strings,
+        shapes,
+        editorId,
+    ]);
+};
+export const useDispatcherEvents = (canvas) => {
+    const { configuration, shapes, addShape, setActiveTool, editorId } = 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);
+            if (obj) {
+                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(editorId, canvas, obj);
+                    // @ts-expect-error id exists but his stupid ts does not know
+                    Dispatcher.emit(`canvas:${editorId}:selectShape`, copy.id);
+                    break;
+                case "polyline" /* ToolEnum.Polyline */:
+                    if (!canDrawShape(configuration, "polyline" /* ToolEnum.Polyline */, shapes, notify, strings.cannotDrawMorePolylines))
+                        return;
+                    copy = copyPolyline(editorId, canvas, obj);
+                    // @ts-expect-error id exists but his stupid ts does not know
+                    Dispatcher.emit(`canvas:${editorId}:selectShape`, copy.id);
+                    break;
+                case "rect" /* ToolEnum.Rectangle */:
+                    if (!canDrawShape(configuration, "rect" /* ToolEnum.Rectangle */, shapes, notify, strings.cannotDrawMoreRectangles))
+                        return;
+                    copy = copyRectangle(editorId, canvas, obj);
+                    // @ts-expect-error id exists but his stupid ts does not know
+                    Dispatcher.emit(`canvas:${editorId}: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) {
+                canvas === null || canvas === void 0 ? void 0 : canvas.discardActiveObject();
+                canvas === null || canvas === void 0 ? void 0 : canvas.setActiveObject(obj);
+                canvas === null || canvas === void 0 ? void 0 : canvas.requestRenderAll();
+                setActiveTool("pointer" /* ToolEnum.Pointer */);
+            }
+        };
+        Dispatcher.register(`canvas:${editorId}:removeShape`, removeShape);
+        Dispatcher.register(`canvas:${editorId}:copyShape`, copyShape);
+        Dispatcher.register(`canvas:${editorId}:selectShape`, selectShape);
+        return () => {
+            Dispatcher.unregister(`canvas:${editorId}:removeShape`, removeShape);
+            Dispatcher.unregister(`canvas:${editorId}:copyShape`, copyShape);
+            Dispatcher.unregister(`canvas:${editorId}:selectShape`, selectShape);
+        };
+    }, [setActiveTool, canvas, addShape, configuration, shapes, notify, strings, editorId]);
+};
+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,17 @@
+import { ConfigurationParameter, OutputParameter, ShapeType } from '../Types';
+export type ParametersModalFormProps = {
+    onClose: () => void;
+    title: string;
+    parameters: ConfigurationParameter[];
+    data: OutputParameter[];
+    onSubmit: (data: OutputParameter[], properties?: {
+        name: string;
+        role: string;
+    }) => void;
+    shapeType?: ShapeType;
+    shapeName?: string;
+    shapeRole?: string;
+    shapeId?: string;
+};
+declare const ParametersModalForm: React.FC<ParametersModalFormProps>;
+export default ParametersModalForm;

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import { UiContext } from '../../../Providers/UiProvider';
+import { css } from '../../../Utils';
+import RoleField from '../../RoleField';
+import { useParametersForm } from '../Hooks';
+import ParameterField from '../ParameterField';
+import { validateParametersForm } from '../Utils';
+import styles from './ParametersModalForm.module.css';
+const ParametersModalForm = ({ title, onClose, parameters, data, onSubmit, shapeType, shapeName, shapeRole, }) => {
+    const { Modal, TextField, strings } = useContext(UiContext);
+    const [name, setName] = useState(shapeName !== null && shapeName !== void 0 ? shapeName : '');
+    const [role, setRole] = useState(shapeRole !== null && shapeRole !== void 0 ? shapeRole : '');
+    const { fields, setField, errors, setErrors } = useParametersForm(data);
+    const handleSubmit = () => {
+        if (validateParametersForm(parameters, fields, setErrors)) {
+            const data = [
+                ...parameters.map((p) => ({ codename: p.codename, value: fields[p.codename] })),
+            ];
+            if (shapeType) {
+                onSubmit(data, { name, role });
+            }
+            else {
+                onSubmit(data);
+            }
+        }
+    };
+    return (_jsx(Modal, { onClose: onClose, title: title, isOpen: true, maxWidth: "sm", onSubmit: handleSubmit, children: _jsxs("div", { className: css('form', styles, null), children: [shapeType && (_jsxs(_Fragment, { children: [_jsx(TextField, { required: true, label: strings.name, type: "text", value: name, onChange: setName, error: !!errors.name, helperText: errors.name }), _jsx(RoleField, { required: true, value: role, onChange: setRole, error: !!errors.name, helperText: errors.name, shapeType: shapeType })] })), 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

@@ -0,0 +1,18 @@
+import * as fabric from 'fabric';
+import { FabricEvent } from './Types';
+export declare const handleMouseDownPolygon: (event: FabricEvent, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
+    x: number;
+    y: number;
+}[], setPoints: (v: {
+    x: number;
+    y: number;
+}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void) => void;
+export declare const handleMouseMovePolygon: (event: FabricEvent, canvas: fabric.Canvas, isDrawing: boolean, lines: fabric.Line[]) => void;
+export declare const handleDoubleClickPolygon: (editorId: string, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
+    x: number;
+    y: number;
+}[], setPoints: (v: {
+    x: number;
+    y: number;
+}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void) => void;
+export declare const copyPolygon: (editorId: string, canvas: fabric.Canvas, polygon: fabric.Polygon) => fabric.Polygon;

package/dist/Components/RoiEditor/Polygon.js

@@ -0,0 +1,77 @@
+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 newPolygonPoints = [...points, newPoint];
+    setPoints(newPolygonPoints);
+    if (newPolygonPoints.length > 0) {
+        const line = new fabric.Line([
+            newPolygonPoints[newPolygonPoints.length - 1].x,
+            newPolygonPoints[newPolygonPoints.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 handleMouseDownPolygon = (event, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines) => {
+    setIsDrawing(true);
+    addPoint(event, canvas, activeColor, points, setPoints, lines, setLines);
+};
+export const handleMouseMovePolygon = (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 handleDoubleClickPolygon = (editorId, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines) => {
+    if (points.length > 2) {
+        const id = uuidv4();
+        const polygon = new fabric.Polygon(points, {
+            fill: 'transparent',
+            stroke: activeColor,
+            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,
+        });
+        canvas.add(polygon);
+        Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "polygon" /* ToolEnum.Polygon */, shape: polygon });
+        setPoints([]);
+        for (const line of lines) {
+            canvas.remove(line); // Remove temporary lines
+        }
+        setLines([]);
+        setIsDrawing(false);
+    }
+};
+export const copyPolygon = (editorId, canvas, polygon) => {
+    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);
+    Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "polygon" /* ToolEnum.Polygon */, shape: copy });
+    return copy;
+};

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

@@ -0,0 +1,28 @@
+import * as fabric from 'fabric';
+import { FabricEvent } from './Types';
+export declare const handleMouseDownPolyline: (event: FabricEvent, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
+    x: number;
+    y: number;
+}[], setPoints: (v: {
+    x: number;
+    y: number;
+}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void) => void;
+export declare const handleMouseMovePolyline: (event: FabricEvent, canvas: fabric.Canvas, isDrawing: boolean, lines: fabric.Line[]) => void;
+export declare const handleDoubleClickPolyline: (editorId: string, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
+    x: number;
+    y: number;
+}[], setPoints: (v: {
+    x: number;
+    y: number;
+}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void) => void;
+export declare const copyPolyline: (editorId: string, canvas: fabric.Canvas, polyline: fabric.Polyline) => 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>;