@abidibo/react-cam-roi 0.2.3 → 0.2.5

package/dist/{Components → types/Components}/RoiEditor/Canvas.d.ts

@@ -1,3 +1,4 @@
+import * as fabric from 'fabric';
 import { Output } from './Types';
 type CanvasProps = {
     canvasSize: {
@@ -9,6 +10,7 @@ type CanvasProps = {
         height: number;
     };
     initialData?: Output;
+    canvasRef: React.MutableRefObject<fabric.Canvas | null>;
 };
 declare const Canvas: React.FC<CanvasProps>;
 export default Canvas;

package/dist/{Components → types/Components}/RoiEditor/Types.d.ts

@@ -79,6 +79,11 @@ export type Metadata = {
     }[];
 };
 export type OutputShapeRect = {
+    angle: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
     top: number;
     left: number;
     width: number;
@@ -86,6 +91,11 @@ export type OutputShapeRect = {
     color: string;
 };
 export type OutputShapePolyline = {
+    angle: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
     points: {
         x: number;
         y: number;
@@ -95,6 +105,11 @@ export type OutputShapePolyline = {
     color: string;
 };
 export type OutputShapePolygon = {
+    angle: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
     points: {
         x: number;
         y: number;
@@ -103,6 +118,24 @@ export type OutputShapePolygon = {
     left: number;
     color: string;
 };
+export type OutputRectCoords = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+};
+export type OutputPolylineCoords = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+};
+export type OutputPolygonCoords = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+};
 export interface OutputParameter {
     codename: string;
     value: number | string | boolean | string[] | number[] | null;
@@ -114,6 +147,7 @@ export interface OutputRoi {
     role: string;
     id: string;
     shape: OutputShapeRect | OutputShapePolyline | OutputShapePolygon;
+    coords: OutputRectCoords | OutputPolylineCoords | OutputPolygonCoords;
 }
 export interface Output {
     parameters: OutputParameter[];

package/dist/{Components → types/Components}/RoiEditor/Utils.d.ts

@@ -1,3 +1,4 @@
+import * as fabric from 'fabric';
 import { Configuration, ConfigurationParameter, INotify, Metadata, Shape, Shapes, ShapeType, ToolEnum } from './Types';
 export declare const notify: INotify;
 export declare const enableRois: (configuration: Configuration) => boolean;
@@ -9,6 +10,11 @@ export declare const fabricShapeToOutputShape: (shape: Shape, type: ShapeType, i
     width: number;
     height: number;
 }) => {
+    angle: fabric.TDegree;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
     top: number;
     left: number;
     width: number;
@@ -20,6 +26,24 @@ export declare const fabricShapeToOutputShape: (shape: Shape, type: ShapeType, i
     top: number;
     left: number;
     color: string;
+    angle: fabric.TDegree;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
     width?: undefined;
     height?: undefined;
 };
+export declare function getAbsoluteRectData(rect: fabric.Rect): {
+    x: number;
+    y: number;
+}[];
+export declare const fabricShapeToOutputCoords: (shape: Shape, type: ShapeType, imageSize: {
+    width: number;
+    height: number;
+}) => {
+    points: {
+        x: number;
+        y: number;
+    }[];
+};

package/dist/{Providers → types/Providers}/EditorProvider.d.ts

@@ -7,6 +7,7 @@ type EditorContextType = {
     activeColor: string;
     setActiveColor: (color: string) => void;
     shapes: Shapes;
+    setShapes: (shapes: Shapes) => void;
     addShape: (id: string, type: ShapeType, shape: Shape) => void;
     addShapes: (shapes: {
         id: string;
@@ -22,5 +23,5 @@ type EditorContextType = {
 };
 export declare const EditorContext: import("react").Context<EditorContextType | undefined>;
 export declare function useEditorContext(): EditorContextType;
-declare const EditorProvider: ({ children, editorId, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
+declare const EditorProvider: ({ children, editorId, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, setShapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
 export default EditorProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abidibo/react-cam-roi",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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;