@abidibo/react-cam-roi 0.0.7 → 0.0.10

package/dist/Providers/UiProvider.d.ts

@@ -4,6 +4,17 @@ import IconButton from '../Components/IconButton';
 import DeleteIcon from '../Icons/DeleteIcon';
 import EditIcon from '../Icons/EditIcon';
 import SelectIcon from '../Icons/SelectIcon';
+import { INotify } from '../Components/RoiEditor/Types';
+import CopyIcon from '../Icons/CopyIcon';
+import AnnotateIcon from '../Icons/AnnotateIcon';
+import Modal from '../Components/Modal';
+import CloseIcon from '../Icons/CloseIcon';
+import TextField from '../Components/TextField';
+import NumberField from '../Components/NumberField';
+import BoolField from '../Components/BoolField';
+import EnumField from '../Components/EnumField';
+import Button from '../Components/Button';
+import SaveIcon from '../Icons/SaveIcon';
 type UiContextType = {
     children?: React.ReactNode;
     enableLogs: boolean;
@@ -11,21 +22,52 @@ type UiContextType = {
     primaryColor: string;
     Typography: typeof Typography;
     IconButton: typeof IconButton;
+    Modal: typeof Modal;
     DeleteIcon: typeof DeleteIcon;
     EditIcon: typeof EditIcon;
     SelectIcon: typeof SelectIcon;
+    CopyIcon: typeof CopyIcon;
+    AnnotateIcon: typeof AnnotateIcon;
+    SaveIcon: typeof SaveIcon;
+    CloseIcon: typeof CloseIcon;
+    TextField: typeof TextField;
+    NumberField: typeof NumberField;
+    BoolField: typeof BoolField;
+    EnumField: typeof EnumField;
+    Button: typeof Button;
     pickerColors: string[];
+    notify: INotify;
     strings: {
+        cancel: string;
+        cannotDrawMorePolygons: string;
+        cannotDrawMorePolylines: string;
+        cannotDrawMoreRectangles: string;
         id: string;
-        rectangle: string;
+        invalidSubmission: string;
+        mainParametersMetadata: string;
+        missingRequiredValuesInMainParameters: string;
+        missingRequiredValuesInShapeParameters: string;
         polygon: string;
+        polygonHelpText: string;
         polyline: string;
+        polylineHelpText: string;
+        rect: string;
+        rectHelpText: string;
+        pointer: string;
+        pointerHelpText: string;
+        requiredField: string;
+        save: string;
+        shapesOfTypeShouldBeEqualToThreshold: string;
+        shapesOfTypeShouldBeGreaterThanThreshold: string;
+        shapesOfTypeShouldBeGreaterThanOrEqualToThreshold: string;
+        shapesOfTypeShouldBeLessThanThreshold: string;
+        shapesOfTypeShouldBeLessThanOrEqualToThreshold: string;
         type: string;
     };
 };
 export declare const DefaultUiContext: UiContextType;
 export declare const UiContext: import("react").Context<UiContextType>;
-declare const UiProvider: ({ children, enableLogs, themeMode, primaryColor, Typography, IconButton, DeleteIcon, EditIcon, SelectIcon, pickerColors, strings, }: PropsWithChildren<Partial<Omit<UiContextType, "strings">> & {
+declare const UiProvider: ({ children, enableLogs, themeMode, primaryColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, SaveIcon, CloseIcon, TextField, NumberField, BoolField, EnumField, Button, pickerColors, notify, strings, }: PropsWithChildren<Partial<Omit<UiContextType, "strings">> & {
     strings?: Partial<UiContextType["strings"]>;
 }>) => import("react/jsx-runtime").JSX.Element;
 export default UiProvider;

package/dist/Providers/UiProvider.js

@@ -5,36 +5,89 @@ import IconButton from '../Components/IconButton';
 import DeleteIcon from '../Icons/DeleteIcon';
 import EditIcon from '../Icons/EditIcon';
 import SelectIcon from '../Icons/SelectIcon';
+import { notify } from '../Components/RoiEditor/Utils';
+import CopyIcon from '../Icons/CopyIcon';
+import AnnotateIcon from '../Icons/AnnotateIcon';
+import Modal from '../Components/Modal';
+import CloseIcon from '../Icons/CloseIcon';
+import TextField from '../Components/TextField';
+import NumberField from '../Components/NumberField';
+import BoolField from '../Components/BoolField';
+import EnumField from '../Components/EnumField';
+import Button from '../Components/Button';
+import SaveIcon from '../Icons/SaveIcon';
 export const DefaultUiContext = {
     enableLogs: true,
     themeMode: 'light',
     primaryColor: '#1976d2',
     Typography,
     IconButton,
+    Modal,
     DeleteIcon,
     EditIcon,
     SelectIcon,
+    CopyIcon,
+    AnnotateIcon,
+    SaveIcon,
+    CloseIcon,
+    TextField,
+    NumberField,
+    BoolField,
+    EnumField,
+    Button,
     pickerColors: ['#ffffff', '#000000', '#ff9900', '#0099ff'],
+    notify,
     strings: {
+        cancel: 'Cancel',
+        cannotDrawMorePolygons: 'You cannot draw more polygons',
+        cannotDrawMorePolylines: 'You cannot draw more polylines',
+        cannotDrawMoreRectangles: 'You cannot draw more rectangles',
         id: 'ID',
+        invalidSubmission: 'Invalid submission',
+        mainParametersMetadata: 'Main parameters',
+        missingRequiredValuesInMainParameters: 'Missing required values in main parameters',
+        missingRequiredValuesInShapeParameters: 'Missing required values in shape {id} parameters',
         polygon: 'Polygon',
+        polygonHelpText: 'click to draw all the polygon points, double click on the last point to close the polygon',
         polyline: 'Polyline',
-        rectangle: 'Rectangle',
+        polylineHelpText: 'click to draw all the polyline points, double click on the last point to stop drawing',
+        rect: 'Rectangle',
+        rectHelpText: 'click and drag to draw the rectangle',
+        pointer: 'Selection',
+        pointerHelpText: 'click a shape to select it',
+        requiredField: 'This field is required',
+        save: 'Save',
+        shapesOfTypeShouldBeEqualToThreshold: 'Shapes of type {type} should be equal to {threshold}',
+        shapesOfTypeShouldBeGreaterThanThreshold: 'Shapes of type {type} should be greater than {threshold}',
+        shapesOfTypeShouldBeGreaterThanOrEqualToThreshold: 'Shapes of type {type} should be greater than or equal to {threshold}',
+        shapesOfTypeShouldBeLessThanThreshold: 'Shapes of type {type} should be less than {threshold}',
+        shapesOfTypeShouldBeLessThanOrEqualToThreshold: 'Shapes of type {type} should be less than or equal to {threshold}',
         type: 'Type',
     },
 };
 export const UiContext = createContext(DefaultUiContext);
-const UiProvider = ({ children, enableLogs, themeMode, primaryColor, Typography, IconButton, DeleteIcon, EditIcon, SelectIcon, pickerColors, strings, }) => {
+const UiProvider = ({ children, enableLogs, themeMode, primaryColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, SaveIcon, CloseIcon, TextField, NumberField, BoolField, EnumField, Button, pickerColors, notify, strings, }) => {
     const ctx = {
         enableLogs: enableLogs !== null && enableLogs !== void 0 ? enableLogs : DefaultUiContext.enableLogs,
         Typography: Typography !== null && Typography !== void 0 ? Typography : DefaultUiContext.Typography,
+        Modal: Modal !== null && Modal !== void 0 ? Modal : DefaultUiContext.Modal,
         IconButton: IconButton !== null && IconButton !== void 0 ? IconButton : DefaultUiContext.IconButton,
         DeleteIcon: DeleteIcon !== null && DeleteIcon !== void 0 ? DeleteIcon : DefaultUiContext.DeleteIcon,
         EditIcon: EditIcon !== null && EditIcon !== void 0 ? EditIcon : DefaultUiContext.EditIcon,
         SelectIcon: SelectIcon !== null && SelectIcon !== void 0 ? SelectIcon : DefaultUiContext.SelectIcon,
+        CopyIcon: CopyIcon !== null && CopyIcon !== void 0 ? CopyIcon : DefaultUiContext.CopyIcon,
+        AnnotateIcon: AnnotateIcon !== null && AnnotateIcon !== void 0 ? AnnotateIcon : DefaultUiContext.AnnotateIcon,
+        SaveIcon: SaveIcon !== null && SaveIcon !== void 0 ? SaveIcon : DefaultUiContext.SaveIcon,
+        CloseIcon: CloseIcon !== null && CloseIcon !== void 0 ? CloseIcon : DefaultUiContext.CloseIcon,
+        TextField: TextField !== null && TextField !== void 0 ? TextField : DefaultUiContext.TextField,
+        NumberField: NumberField !== null && NumberField !== void 0 ? NumberField : DefaultUiContext.NumberField,
+        BoolField: BoolField !== null && BoolField !== void 0 ? BoolField : DefaultUiContext.BoolField,
+        EnumField: EnumField !== null && EnumField !== void 0 ? EnumField : DefaultUiContext.EnumField,
+        Button: Button !== null && Button !== void 0 ? Button : DefaultUiContext.Button,
         themeMode: themeMode !== null && themeMode !== void 0 ? themeMode : DefaultUiContext.themeMode,
         primaryColor: primaryColor !== null && primaryColor !== void 0 ? primaryColor : DefaultUiContext.primaryColor,
         pickerColors: pickerColors !== null && pickerColors !== void 0 ? pickerColors : DefaultUiContext.pickerColors,
+        notify: notify !== null && notify !== void 0 ? notify : DefaultUiContext.notify,
         strings: strings ? Object.assign(Object.assign({}, DefaultUiContext.strings), strings) : DefaultUiContext.strings,
     };
     return _jsx(UiContext.Provider, { value: ctx, children: children });

package/dist/Types.d.ts

@@ -0,0 +1,10 @@
+export interface FieldProps<T> {
+    onChange: (value: T) => void;
+    value: T;
+    label: string;
+    helperText?: string;
+    error?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+}

package/dist/Types.js

@@ -0,0 +1 @@
+export {};

package/dist/Utils/index.d.ts

@@ -1,2 +1,2 @@
 export declare const log: (level: "log" | "info" | "warn" | "error", enable: boolean, ...args: unknown[]) => false | void;
-export declare const css: (name: string, styles: Record<string, string>, themeMode: "light" | "dark") => string;
+export declare const css: (name: string, styles: Record<string, string>, themeMode: "light" | "dark" | null) => string;

package/dist/Utils/index.js

@@ -1,2 +1,2 @@
 export const log = (level, enable, ...args) => enable && console[level](...args);
-export const css = (name, styles, themeMode) => `${styles[name]} ${styles[`${name}-${themeMode}`]} react-cam-roi-${name} react-cam-roi-${name}-${themeMode}`;
+export const css = (name, styles, themeMode) => `${styles[name]} ${styles[`${name}-${themeMode}`]} react-cam-roi-${name}${themeMode ? `react-cam-roi-${name}-${themeMode}` : ''}`;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 import RoiEditor from "./Components/RoiEditor";
 import UiProvider, { UiContext, DefaultUiContext } from "./Providers/UiProvider";
-export { RoiEditor, UiProvider, UiContext, DefaultUiContext };
+import * as Types from "./Components/RoiEditor/Types";
+export { RoiEditor, UiProvider, UiContext, DefaultUiContext, Types };

package/dist/index.js

@@ -1,3 +1,4 @@
 import RoiEditor from "./Components/RoiEditor";
 import UiProvider, { UiContext, DefaultUiContext } from "./Providers/UiProvider";
-export { RoiEditor, UiProvider, UiContext, DefaultUiContext };
+import * as Types from "./Components/RoiEditor/Types";
+export { RoiEditor, UiProvider, UiContext, DefaultUiContext, Types };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abidibo/react-cam-roi",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "description": "A react component for drawing ROI over images and managing metadata",
   "repository": {
     "type": "git",
@@ -37,7 +37,11 @@
   "license": "MIT",
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.3",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@eslint/js": "^9.18.0",
+    "@fontsource/roboto": "^5.1.1",
+    "@mui/material": "^6.4.3",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-onboarding": "^8.4.7",
@@ -47,14 +51,14 @@
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@trivago/prettier-plugin-sort-imports": "^5.2.1",
-    "@types/react": "^19.0.7",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "copyfiles": "^2.4.1",
     "eslint": "^9.18.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.18",
     "globals": "^15.14.0",
     "prettier": "^3.4.2",
-    "react": "^19.0.0",
     "rimraf": "^6.0.1",
     "storybook": "^8.4.7",
     "typescript": "^5.7.3",
@@ -62,6 +66,11 @@
   },
   "dependencies": {
     "fabric": "^6.5.4",
-    "uuidv4": "^6.2.13"
+    "uuidv4": "^6.2.13",
+    "vite": "^6.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

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

@@ -1,2 +0,0 @@
-declare const Metadata: React.FC;
-export default Metadata;

package/dist/Components/RoiEditor/Metadata.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useState } from 'react';
-import { useEditorContext } from '../../Providers/EditorProvider';
-import { UiContext } from '../../Providers/UiProvider';
-import { css } from '../../Utils';
-import Dispatcher from '../../Utils/Dispatcher';
-import styles from './Metadata.module.css';
-const Metadata = () => {
-    const { strings, Typography, IconButton, DeleteIcon, EditIcon, SelectIcon, themeMode } = useContext(UiContext);
-    const { shapes, removeShape } = useEditorContext();
-    const [selected, setSelected] = useState([]);
-    useEffect(() => {
-        const setSelectedShapes = (_, event) => { var _a; return setSelected((_a = event === null || event === void 0 ? void 0 : event.map((s) => s.id)) !== null && _a !== void 0 ? _a : []); };
-        Dispatcher.register('canvas:shapeSelected', setSelectedShapes);
-        return () => {
-            Dispatcher.unregister('canvas:shapeSelected', setSelectedShapes);
-        };
-    }, [shapes]);
-    const handleRemoveShape = (id) => () => {
-        Dispatcher.emit('canvas:removeShape', id);
-        removeShape(id);
-    };
-    const handleSelectShape = (id) => () => {
-        Dispatcher.emit('canvas:selectShape', id);
-    };
-    const iconColor = themeMode === 'light' ? 'black' : 'white';
-    return (_jsxs("table", { className: css('metadata-table', styles, themeMode), children: [Object.keys(shapes).length > 0 && (_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: _jsx(Typography, { children: strings.id }) }), _jsx("th", { children: _jsx(Typography, { children: strings.type }) }), _jsx("th", {})] }) })), _jsx("tbody", { children: Object.keys(shapes).map((id) => {
-                    return (_jsxs("tr", { className: selected.indexOf(id) > -1 ? css('metadata-row-selected', styles, themeMode) : '', children: [_jsx("td", { children: _jsx("div", { children: _jsx(Typography, { children: id.substring(0, 6) }) }) }), _jsx("td", { children: _jsx(Typography, { children: strings[shapes[id].type] }) }), _jsxs("td", { children: [_jsx(IconButton, { onClick: handleSelectShape(id), children: _jsx(SelectIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleRemoveShape(id), children: _jsx(EditIcon, { color: iconColor }) }), _jsx(IconButton, { onClick: handleRemoveShape(id), children: _jsx(DeleteIcon, { color: iconColor }) })] })] }, id));
-                }) })] }));
-};
-export default Metadata;

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

@@ -1,34 +0,0 @@
-.metadata-table {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.metadata-table th {
-  padding: .8rem .3rem .3rem;
-  text-align: left;
-}
-
-.metadata-table td {
-  padding: 0 .3rem;
-}
-
-.metadata-table tr td:last-child,
-.metadata-table tr th:last-child {
-  text-align: right;
-}
-
-.metadata-table-light {
-  color: #000;
-}
-
-.metadata-table-dark {
-  color: #fff;
-}
-
-.metadata-row-selected-light {
-  background-color: #ccc;
-}
-
-.metadata-row-selected-dark {
-  background-color: #666;
-}