@abidibo/react-cam-roi 0.2.2 → 0.2.3

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,29 @@
+.button {
+  align-items: center;
+  border: none;
+  border-radius: 4px;
+  color: black;
+  padding: .5rem 1rem;
+  text-align: center;
+  text-decoration: none;
+  display: flex;
+  font-size: 16px;
+  gap: .5rem;
+  margin: 4px 2px;
+  cursor: pointer;
+}
+
+.button-light {
+  background-color: #c7c7c7;
+  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<T> = {
+    value: T;
+    label: string;
+};
+declare const EnumField: <T extends string | number>({ onChange, value, label, helperText, error, options, disabled, required, multiple }: Omit<FieldProps<T | T[]>, "readOnly"> & {
+    options: EnumOption<T>[];
+    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

@@ -0,0 +1,20 @@
+.icon-button {
+  display: inline-block;
+  border-radius: 50%;
+  line-height: 0;
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+.icon-button-light:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.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

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

package/dist/Components/IconButton/index.js

@@ -0,0 +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';
+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/Loader.module.css

@@ -0,0 +1,25 @@
+.loader {
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
+.loader-light {
+  border: 10px solid #f3f3f3;
+  border-top: 10px solid #3498db;
+}
+
+.loader-dark {
+  border: 10px solid #333;
+  border-top: 10px solid #3498db;
+}
+
+ @keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+} 

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

@@ -0,0 +1 @@
+export declare const Loader: React.FC;

package/dist/Components/Loader/index.js

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

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

package/dist/Components/RoiEditor/Canvas.js

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

@@ -0,0 +1,5 @@
+type ColorPickerProps = {
+    style?: React.CSSProperties;
+};
+declare const ColorPicker: React.FC<ColorPickerProps>;
+export default ColorPicker;

package/dist/Components/RoiEditor/ColorPicker.js

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

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

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

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

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

package/dist/Components/RoiEditor/Header.js

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

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