@abidibo/react-cam-roi 0.0.7 → 0.0.10

package/dist/Components/BoolField/BoolField.module.css

@@ -0,0 +1,60 @@
+/*
+.bool-field-wrapper {
+  margin-bottom: 2rem;
+}
+.bool-field-wrapper-light {
+}
+.bool-field-wrapper-dark {
+}
+*/
+
+.bool-field {
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  padding: 0.5rem;
+}
+.bool-field:focus-visible {
+  outline: none;
+  border: 1px solid #1976d2;
+}
+.bool-field-light {
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #ccc;
+}
+.bool-field-dark {
+  background-color: #333;
+  border: 1px solid #666;
+  color: #fff;
+}
+.bool-field-error {
+  border: 1px solid #d32f2f;
+}
+.bool-field-label {
+  font-weight: bold;
+  display: block;
+  margin: 0 0 1rem 0;
+}
+/*
+.text-fiel-label-light {
+}
+.bool-field-label-dark {
+}
+*/
+.bool-field-label-error {
+  color: #d32f2f;
+}
+.bool-field-helper-text {
+  font-style: italic;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+}
+/*
+.bool-field-helper-text-light {
+}
+.bool-field-helper-text-dark {
+}
+*/
+.bool-field-helper-text-error {
+  color: #d32f2f;
+}

package/dist/Components/BoolField/index.d.ts

@@ -0,0 +1,5 @@
+import { FieldProps } from "../../Types";
+declare const BoolField: React.FC<Omit<FieldProps<boolean>, 'onChange'> & {
+    onChange: (value: boolean) => void;
+}>;
+export default BoolField;

package/dist/Components/BoolField/index.js

@@ -0,0 +1,13 @@
+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/Button.module.css

@@ -0,0 +1,27 @@
+.button {
+  border: none;
+  border-radius: 4px;
+  color: black;
+  padding: .5rem 1rem;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
+
+.button-light {
+  background-color: #d7d7d7;
+  color: black;
+}
+
+.button-dark {
+  background-color: #383838;
+  color: white;
+}
+
+.button-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/dist/Components/Button/index.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+export type ButtonProps = {
+    onClick: (event: React.MouseEvent) => void;
+    primary?: boolean;
+    disabled?: boolean;
+};
+declare const Button: ({ onClick, primary, disabled, children }: PropsWithChildren<ButtonProps>) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/Components/Button/index.js

@@ -0,0 +1,15 @@
+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/EnumField.module.css

@@ -0,0 +1,61 @@
+/*
+.enum-field-wrapper {
+  margin-bottom: 2rem;
+}
+.enum-field-wrapper-light {
+}
+.enum-field-wrapper-dark {
+}
+*/
+
+.enum-field {
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  width: 100%;
+}
+.enum-field:focus-visible {
+  outline: none;
+  border: 1px solid #1976d2;
+}
+.enum-field-light {
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #ccc;
+}
+.enum-field-dark {
+  background-color: #333;
+  border: 1px solid #666;
+  color: #fff;
+}
+.enum-field-error {
+  border: 1px solid #d32f2f;
+}
+.enum-field-label {
+  font-weight: bold;
+  display: block;
+  margin: 0 0 1rem 0;
+}
+/*
+.text-fiel-label-light {
+}
+.enum-field-label-dark {
+}
+*/
+.enum-field-label-error {
+  color: #d32f2f;
+}
+.enum-field-helper-text {
+  font-style: italic;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+}
+/*
+.enum-field-helper-text-light {
+}
+.enum-field-helper-text-dark {
+}
+*/
+.enum-field-helper-text-error {
+  color: #d32f2f;
+}

package/dist/Components/EnumField/index.d.ts

@@ -0,0 +1,10 @@
+import { FieldProps } from '../../Types';
+export type EnumOption = {
+    value: string | number;
+    label: string;
+};
+declare const EnumField: ({ onChange, value, label, helperText, error, options, disabled, required, multiple }: Omit<FieldProps<string | number | (string | number)[]>, "readOnly"> & {
+    options: EnumOption[];
+    multiple?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default EnumField;

package/dist/Components/EnumField/index.js

@@ -0,0 +1,16 @@
+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/IconButton.module.css

@@ -1,4 +1,4 @@
-.iconButton {
+.icon-button {
   display: inline-block;
   border-radius: 50%;
   line-height: 0;
@@ -6,10 +6,15 @@
   cursor: pointer;
 }
 
-.iconButton-light:hover {
+.icon-button-light:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-.iconButton-dark:hover {
+.icon-button-dark:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
+
+.icon-button-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/dist/Components/IconButton/index.d.ts

@@ -1,5 +1,6 @@
 export type IconButtonProps = {
     children?: React.ReactNode;
+    disabled?: boolean;
     onClick?: (event: React.MouseEvent) => void;
 };
 declare const IconButton: React.FC<IconButtonProps>;

package/dist/Components/IconButton/index.js

@@ -1,10 +1,10 @@
 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';
-import { UiContext } from '../../Providers/UiProvider';
-const IconButton = ({ children, onClick }) => {
+const IconButton = ({ children, disabled, onClick }) => {
     const { themeMode } = useContext(UiContext);
-    return (_jsx("div", { className: css('iconButton', styles, themeMode), onClick: onClick, children: children }));
+    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/Modal/Modal.module.css

@@ -0,0 +1,92 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9000;
+}
+
+.modal-overlay-light {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.modal-overlay-dark {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.modal {
+  max-width: 80%;
+  max-height: 80%;
+  overflow: auto;
+  padding: 20px;
+  border-radius: 5px;
+}
+
+.modal:focus-visible {
+  outline: none;
+}
+
+.modal-light {
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  color: #000;
+}
+
+.modal-dark {
+  background-color: #333;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+.modal-xs {
+  width: 400px;
+}
+
+.modal-sm {
+  width: 600px;
+}
+
+.modal-md {
+  width: 800px;
+}
+
+.modal-lg {
+  width: 1000px;
+}
+
+.modal-xl {
+  width: 1200px;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.modal-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin: 0;
+}
+
+.modal-title-light {
+  color: #000;
+}
+
+.modal-title-dark {
+  color: #fff;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+  gap: .5rem;
+}
+

package/dist/Components/Modal/index.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+export type ModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    maxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    onSubmit?: () => void;
+};
+declare const Modal: React.FC<PropsWithChildren<ModalProps>>;
+export default Modal;

package/dist/Components/Modal/index.js

@@ -0,0 +1,16 @@
+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/NumberField.module.css

@@ -0,0 +1,60 @@
+/*
+.number-field-wrapper {
+}
+.number-field-wrapper-light {
+}
+.number-field-wrapper-dark {
+}
+*/
+
+.number-field {
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  width: 100%;
+}
+.number-field:focus-visible {
+  outline: none;
+  border: 1px solid #1976d2;
+}
+.number-field-light {
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #ccc;
+}
+.number-field-dark {
+  background-color: #333;
+  border: 1px solid #666;
+  color: #fff;
+}
+.number-field-error {
+  border: 1px solid #d32f2f;
+}
+.number-field-label {
+  font-weight: bold;
+  display: block;
+  margin: 0 0 1rem 0;
+}
+/*
+.text-fiel-label-light {
+}
+.number-field-label-dark {
+}
+*/
+.number-field-label-error {
+  color: #d32f2f;
+}
+.number-field-helper-text {
+  font-style: italic;
+  font-size: 0.9rem;
+  padding-top: 0.5rem;
+}
+/*
+.number-field-helper-text-light {
+}
+.number-field-helper-text-dark {
+}
+*/
+.number-field-helper-text-error {
+  color: #d32f2f;
+}

package/dist/Components/NumberField/index.d.ts

@@ -0,0 +1,3 @@
+import { FieldProps } from '../../Types';
+declare const NumberField: React.FC<FieldProps<number | null>>;
+export default NumberField;

package/dist/Components/NumberField/index.js

@@ -0,0 +1,13 @@
+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.d.ts

@@ -1,8 +1,10 @@
+import { Output } from './Types';
 type CanvasProps = {
     canvasSize: {
         width: number;
         height: number;
     };
+    initialData?: Output;
 };
 declare const Canvas: React.FC<CanvasProps>;
 export default Canvas;

package/dist/Components/RoiEditor/Canvas.js

@@ -1,18 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
 import * as fabric from 'fabric';
+import { useRef, useEffect, useState, useContext } from 'react';
 import { useEditorContext } from '../../Providers/EditorProvider';
-import { useDispatcherEvents, useTool } from './Hooks';
-const Canvas = ({ canvasSize }) => {
-    const { activeTool, setActiveTool, activeColor, addShape } = useEditorContext();
+import { initCanvasData, useDispatcherEvents, useTool } from './Hooks';
+import { UiContext } from '../../Providers/UiProvider';
+const Canvas = ({ canvasSize, initialData }) => {
+    const { metadata, setMetadata, addShapes } = useEditorContext();
+    const { enableLogs } = useContext(UiContext);
+    const [initialized, setInitialized] = useState(false);
     const canvasRef = useRef(null);
-    useTool(activeTool, activeColor, addShape, canvasRef.current);
-    useDispatcherEvents(canvasRef.current, setActiveTool);
+    useTool(canvasRef.current);
+    useDispatcherEvents(canvasRef.current);
     useEffect(() => {
-        canvasRef.current = new fabric.Canvas('react-cam-roi-canvas');
-        canvasRef.current.setDimensions({ width: canvasSize.width, height: canvasSize.height });
-        return () => { var _a; (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.dispose(); };
-    }, [canvasSize.width, canvasSize.height]);
-    return _jsx("canvas", { id: "react-cam-roi-canvas", style: { width: `${canvasSize.width}px`, height: `${canvasSize.height}px` } });
+        if (canvasSize.width !== 0 && canvasSize.height !== 0 && !initialized) {
+            canvasRef.current = new fabric.Canvas('react-cam-roi-canvas');
+            canvasRef.current.setDimensions({ width: canvasSize.width, height: canvasSize.height });
+            initCanvasData(canvasRef, 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", style: { width: `${canvasSize.width}px`, height: `${canvasSize.height}px` } }));
 };
 export default Canvas;

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

@@ -1,5 +1,5 @@
 import * as fabric from 'fabric';
-import { Shape, ShapeType, ToolEnum } from './Types';
+import { Metadata, Output, OutputParameter, Shape, ShapeType } from './Types';
 export declare const useImageSize: (imageUrl: string) => {
     imageSize: {
         width: number;
@@ -16,8 +16,20 @@ export declare const useCanvasSize: (imageUrl: string) => {
         width: number;
         height: number;
     };
-    wrapperRef: import("react").RefObject<HTMLDivElement | null>;
+    wrapperRef: import("react").RefObject<HTMLDivElement>;
     isReady: boolean;
 };
-export declare const useTool: (tool: ToolEnum, activeColor: string, addShape: (id: string, type: ShapeType, shape: Shape) => void, canvas: fabric.Canvas | null) => void;
-export declare const useDispatcherEvents: (canvas: fabric.Canvas | null, setActiveTool: (tool: ToolEnum) => void) => void;
+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>>>;
+};