@abidibo/react-cam-roi 0.0.13 → 0.1.0

package/dist/Components/RoiEditor/ColorPicker.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { useEditorContext } from '../../Providers/EditorProvider';
-import { UiContext } from '../../Providers/UiProvider';
-import { css } from '../../Utils';
-import styles from './ColorPicker.module.css';
-const ColorPicker = ({ style }) => {
-    const { pickerColors, themeMode } = useContext(UiContext);
-    const { activeColor, setActiveColor } = useEditorContext();
-    return (_jsx("div", { style: style, className: styles.colorpickerWrapper, children: pickerColors.map((color) => (_jsx("div", { onClick: () => setActiveColor(color), className: `${css('colorpicker-button', styles, themeMode)} ${activeColor === color ? css('colorpicker-button-active', styles, themeMode) : ''}`, style: { backgroundColor: color } }, color))) }));
-};
-export default ColorPicker;

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

@@ -1,17 +0,0 @@
-.colorpickerWrapper {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: .2rem;
-}
-
-.colorpicker-button {
-  box-sizing: border-box;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.colorpicker-button-active {
-  border: 2px solid red;
-}

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

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

package/dist/Components/RoiEditor/Header.js

@@ -1,22 +0,0 @@
-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 styles from './Header.module.css';
-import ParametersModalForm from './ParametersModalForm';
-import { enableMainMetadata } from './Utils';
-import RoisInfo from './RoisInfo';
-const Header = () => {
-    var _a;
-    const { themeMode, Typography, Button, strings, SaveIcon, primaryFgColor, AnnotateIcon } = 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('header', styles, themeMode), children: [_jsxs("div", { className: css('header-info', styles, themeMode), children: [((_a = configuration.options) === null || _a === void 0 ? void 0 : _a.description) && _jsx(Typography, { children: configuration.options.description }), _jsx(RoisInfo, {})] }), _jsxs("div", { className: styles.headerButtons, 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 Header;

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

@@ -1,32 +0,0 @@
-.header {
-  align-items: flex-start;
-  display: flex;
-  justify-content: space-between;
-  padding: .5rem;
-}
-
-.header-light {
-  background-color: #ddd;;
-}
-
-.header-dark {
-  background-color: #222;
-}
-
-.header-info {
-  padding: .5rem;
-}
-.header-info-light {
-  background-color: #ddd;;
-  color: #000;
-}
-.header-info-dark {
-  background-color: #222;
-  color: #fff;
-}
-
-.headerButtons {
-  display: flex;
-  align-items: center;
-  gap: .5rem
-}

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

@@ -1,35 +0,0 @@
-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>, 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

@@ -1,321 +0,0 @@
-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 { 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) => {
-    const wrapperRef = useRef(null);
-    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, 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, 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

@@ -1,9 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,5 +0,0 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}

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

@@ -1,16 +0,0 @@
-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;
-};
-declare const ParametersModalForm: React.FC<ParametersModalFormProps>;
-export default ParametersModalForm;

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

@@ -1,40 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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