@abidibo/react-cam-roi 0.2.3 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abidibo/react-cam-roi",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A react component for drawing ROI over images and managing metadata",
   "repository": {
     "type": "git",
@@ -9,7 +9,9 @@
   "bugs": {
     "url": "https://github.com/abidibo/react-cam-roi/issues"
   },
-  "main": "dist/index.js",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
   "type": "module",
   "files": [
     "dist"
@@ -19,14 +21,17 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    }
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/types/index.d.ts",
+      "style": "./dist/index.esm.css"
+    },
+    "./dist/index.esm.css": "./dist/index.esm.css"
   },
   "scripts": {
     "clean": "rimraf dist",
     "prebuild": "npm run clean",
-    "build": "tsc",
+    "build": "rollup -c",
     "postbuild": "npm run copy-files",
     "copy-files": "copyfiles -u 1 src/**/*.module.css dist/",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -66,6 +71,9 @@
     "@eslint/js": "^9.18.0",
     "@fontsource/roboto": "^5.1.1",
     "@mui/material": "^6.4.3",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-essentials": "^8.4.7",
@@ -86,6 +94,9 @@
     "globals": "^15.14.0",
     "prettier": "^3.4.2",
     "rimraf": "^6.0.1",
+    "rollup": "^4.40.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.2",
     "storybook": "^8.4.7",
     "typescript": "^5.7.3",

package/dist/Components/BoolField/index.js

@@ -1,13 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { UiContext } from "../../Providers/UiProvider";
-import { css } from "../../Utils";
-import styles from './BoolField.module.css';
-const BoolField = ({ onChange, value, label, helperText, error, readOnly = false, disabled = false, required = false, }) => {
-    const { themeMode, Typography } = useContext(UiContext);
-    const handleChange = (e) => {
-        onChange(e.target.checked);
-    };
-    return (_jsxs("div", { className: css('bool-field-wrapper', styles, themeMode), children: [_jsx("label", { className: `${css('bool-field-label', styles, themeMode)} ${error ? css('bool-field-label-error', styles, null) : ''}`, children: _jsxs(Typography, { children: [label, required && ' *'] }) }), _jsx("input", { type: 'checkbox', className: `${css('bool-field', styles, themeMode)} ${error ? css('bool-field-error', styles, null) : ''}`, onChange: handleChange, checked: value, readOnly: readOnly, disabled: disabled }), helperText && (_jsx(Typography, { component: 'div', className: `${css('bool-field-helper-text', styles, themeMode)} ${error ? css('bool-field-helper-text-error', styles, null) : ''}`, children: helperText }))] }));
-};
-export default BoolField;

package/dist/Components/Button/index.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { UiContext } from '../../Providers/UiProvider';
-import { css } from '../../Utils';
-import styles from './Button.module.css';
-const Button = ({ onClick, primary, disabled, children }) => {
-    const { themeMode, primaryColor } = useContext(UiContext);
-    const style = {};
-    if (primary) {
-        style.backgroundColor = primaryColor;
-        style.color = 'white';
-    }
-    return (_jsx("button", { className: `${css('button', styles, themeMode)}${disabled ? ` ${css('button-disabled', styles, themeMode)}` : ''}`, style: style, onClick: onClick, disabled: disabled, children: children }));
-};
-export default Button;

package/dist/Components/EnumField/index.js

@@ -1,16 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { UiContext } from '../../Providers/UiProvider';
-import { css } from '../../Utils';
-import styles from './EnumField.module.css';
-const EnumField = ({ onChange, value, label, helperText, error, options, disabled = false, required = false, multiple = false }) => {
-    const { themeMode, Typography } = useContext(UiContext);
-    const handleChange = (e) => {
-        const selectedValues = Array.from(e.target.selectedOptions, (option) => {
-            return isNaN(Number(option.value)) ? option.value : Number(option.value);
-        });
-        onChange(multiple ? selectedValues : selectedValues[0]);
-    };
-    return (_jsxs("div", { className: css('enum-field-wrapper', styles, themeMode), children: [_jsx("label", { className: `${css('enum-field-label', styles, themeMode)} ${error ? css('enum-field-label-error', styles, null) : ''}`, children: _jsxs(Typography, { children: [label, required && ' *'] }) }), _jsxs("select", { className: `${css('enum-field', styles, themeMode)} ${error ? css('enum-field-error', styles, null) : ''}`, onChange: handleChange, value: value, disabled: disabled, multiple: multiple, children: [!required && _jsx("option", { value: '' }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), helperText && (_jsx(Typography, { component: 'div', className: `${css('enum-field-helper-text', styles, themeMode)} ${error ? css('enum-field-helper-text-error', styles, null) : ''}`, children: helperText }))] }));
-};
-export default EnumField;

package/dist/Components/IconButton/index.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { UiContext } from '../../Providers/UiProvider';
-import { css } from '../../Utils';
-import styles from './IconButton.module.css';
-const IconButton = ({ children, disabled, onClick }) => {
-    const { themeMode } = useContext(UiContext);
-    return (_jsx("div", { className: `${css('icon-button', styles, themeMode)} ${disabled ? css('icon-button-disabled', styles, themeMode) : ''}`, onClick: disabled ? undefined : onClick, children: children }));
-};
-export default IconButton;

package/dist/Components/Loader/index.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { UiContext } from '../../Providers/UiProvider';
-import styles from './Loader.module.css';
-import { css } from '../../Utils';
-export const Loader = () => {
-    const { themeMode } = useContext(UiContext);
-    return _jsx("div", { className: css('loader', styles, themeMode) });
-};

package/dist/Components/Modal/index.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createPortal } from 'react-dom';
-import { useContext } from 'react';
-import CloseIcon from '../../Icons/CloseIcon';
-import { UiContext } from '../../Providers/UiProvider';
-import { css } from '../../Utils';
-import styles from './Modal.module.css';
-const Modal = ({ isOpen, onClose, children, title, maxWidth, onSubmit }) => {
-    const { themeMode, IconButton, Typography, Button, strings } = useContext(UiContext);
-    const iconColor = themeMode === 'light' ? 'black' : 'white';
-    if (!isOpen) {
-        return null;
-    }
-    return createPortal(_jsx("div", { className: css('modal-overlay', styles, themeMode), children: _jsxs("div", { className: `${css('modal', styles, themeMode)} ${css(`modal-${maxWidth}`, styles, themeMode)}`, children: [_jsxs("div", { className: css('modal-header', styles, themeMode), children: [_jsx(Typography, { component: 'h6', className: css('modal-title', styles, themeMode), children: title }), _jsx(IconButton, { onClick: onClose, children: _jsx(CloseIcon, { color: iconColor }) })] }), children, _jsxs("div", { className: css('modal-footer', styles, themeMode), children: [_jsx(Button, { onClick: onClose, children: strings.cancel }), onSubmit && _jsx(Button, { primary: true, onClick: onSubmit, children: strings.save })] })] }) }), document.body);
-};
-export default Modal;

package/dist/Components/NumberField/index.js

@@ -1,13 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { UiContext } from '../../Providers/UiProvider';
-import { css } from '../../Utils';
-import styles from './NumberField.module.css';
-const NumberField = ({ onChange, value, label, required, helperText, error }) => {
-    const { themeMode, Typography } = useContext(UiContext);
-    const handleChange = (e) => {
-        onChange(parseFloat(e.target.value));
-    };
-    return (_jsxs("div", { className: css('number-field-wrapper', styles, themeMode), children: [_jsx("label", { className: `${css('number-field-label', styles, themeMode)} ${error ? css('number-field-label-error', styles, null) : ''}`, children: _jsxs(Typography, { children: [label, required && ' *'] }) }), _jsx("input", { type: 'number', className: `${css('number-field', styles, themeMode)} ${error ? css('number-field-error', styles, null) : ''}`, onChange: handleChange, value: value !== null && value !== void 0 ? value : '' }), helperText && (_jsx(Typography, { component: 'div', className: `${css('number-field-helper-text', styles, themeMode)} ${error ? css('number-field-helper-text-error', styles, null) : ''}`, children: helperText }))] }));
-};
-export default NumberField;

package/dist/Components/RoiEditor/Canvas.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as fabric from 'fabric';
-import { useRef, useEffect, useState, useContext } from 'react';
-import { useEditorContext } from '../../Providers/EditorProvider';
-import { UiContext } from '../../Providers/UiProvider';
-import { initCanvasData, useDispatcherEvents, useTool } from './Hooks';
-const Canvas = ({ canvasSize, imageSize, initialData }) => {
-    const { metadata, setMetadata, addShapes, editorId } = useEditorContext();
-    const { enableLogs } = useContext(UiContext);
-    const [initialized, setInitialized] = useState(false);
-    console.log('before canvas ref');
-    const canvasRef = useRef(null);
-    console.log('after canvas ref');
-    useTool(canvasRef.current);
-    useDispatcherEvents(canvasRef.current);
-    useEffect(() => {
-        if (canvasSize.width !== 0 && canvasSize.height !== 0 && !initialized) {
-            canvasRef.current = new fabric.Canvas(`react-cam-roi-canvas-${editorId}`);
-            canvasRef.current.setDimensions({ width: canvasSize.width, height: canvasSize.height });
-            initCanvasData(canvasRef, imageSize, addShapes, metadata, setMetadata, initialData, enableLogs);
-            setInitialized(true);
-        }
-        return () => {
-            var _a;
-            (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
-        };
-    }, [canvasSize.width, canvasSize.height]); // eslint-disable-line
-    return (_jsx("canvas", { id: `react-cam-roi-canvas-${editorId}`, style: { width: `${canvasSize.width}px`, height: `${canvasSize.height}px` } }));
-};
-export default Canvas;

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/Header.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } 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 './Header.module.css';
-import RoisInfo from './RoisInfo';
-const Header = () => {
-    var _a;
-    const { themeMode, Typography } = useContext(UiContext);
-    const { configuration } = useEditorContext();
-    return (_jsx("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, {})] }) }));
-};
-export default Header;

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;