@abidibo/react-cam-roi 0.2.3 → 0.2.5

package/dist/Components/RoiEditor/Hooks.js

@@ -1,328 +0,0 @@
-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.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/index.js

@@ -1,42 +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.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;
-};

package/dist/Components/RoiEditor/Polyline.js

@@ -1,75 +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 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.js

@@ -1,73 +0,0 @@
-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/RoisInfo.js

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