@abidibo/react-cam-roi 0.0.7 → 0.0.8

package/dist/Icons/AnnotateIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnnotateIcon = ({ color = 'black', style = {} }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "M280-280h84l240-238-86-86-238 238v86Zm352-266 42-44q6-6 6-14t-6-14l-56-56q-6-6-14-6t-14 6l-44 42 86 86ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h168q13-36 43.5-58t68.5-22q38 0 68.5 22t43.5 58h168q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm280-590q13 0 21.5-8.5T510-820q0-13-8.5-21.5T480-850q-13 0-21.5 8.5T450-820q0 13 8.5 21.5T480-790ZM200-200v-560 560Z" }) }));
+};
+export default AnnotateIcon;

package/dist/Icons/CloseIcon.d.ts

@@ -0,0 +1,6 @@
+type CloseIconProps = {
+    color?: string;
+    style?: React.CSSProperties;
+};
+declare const CloseIcon: React.FC<CloseIconProps>;
+export default CloseIcon;

package/dist/Icons/CloseIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const CloseIcon = ({ color = 'black', style = {} }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", style: style, children: _jsx("path", { fill: color, d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" }) }));
+};
+export default CloseIcon;

package/dist/Icons/CopyIcon.d.ts

@@ -0,0 +1,6 @@
+type CopyIconProps = {
+    color?: string;
+    style?: React.CSSProperties;
+};
+declare const CopyIcon: React.FC<CopyIconProps>;
+export default CopyIcon;

package/dist/Icons/CopyIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const CopyIcon = ({ color = 'black', style = {} }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", width: "24px", viewBox: "0 -960 960 960", style: style, children: _jsx("path", { fill: color, d: "M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" }) }));
+};
+export default CopyIcon;

package/dist/Providers/EditorProvider.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { Shape, Shapes, ShapeType, ToolEnum } from '../Components/RoiEditor/Types';
+import { Configuration, Shape, Shapes, ShapeType, ToolEnum } from '../Components/RoiEditor/Types';
 type EditorContextType = {
     activeTool: ToolEnum;
     setActiveTool: (tool: ToolEnum) => void;
@@ -8,8 +8,9 @@ type EditorContextType = {
     shapes: Shapes;
     addShape: (id: string, type: ShapeType, shape: Shape) => void;
     removeShape: (id: string) => void;
+    configuration: Configuration;
 };
 export declare const EditorContext: import("react").Context<EditorContextType | undefined>;
 export declare function useEditorContext(): EditorContextType;
-declare const EditorProvider: ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
+declare const EditorProvider: ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, configuration, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
 export default EditorProvider;

package/dist/Providers/EditorProvider.js

@@ -8,7 +8,7 @@ export function useEditorContext() {
     }
     return context;
 }
-const EditorProvider = ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, }) => {
-    return (_jsx(EditorContext.Provider, { value: { activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape }, children: children }));
+const EditorProvider = ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, configuration, }) => {
+    return (_jsx(EditorContext.Provider, { value: { activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, configuration }, children: children }));
 };
 export default EditorProvider;

package/dist/Providers/UiProvider.d.ts

@@ -4,6 +4,11 @@ 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';
 type UiContextType = {
     children?: React.ReactNode;
     enableLogs: boolean;
@@ -11,21 +16,35 @@ 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;
+    CloseIcon: typeof CloseIcon;
     pickerColors: string[];
+    notify: INotify;
     strings: {
+        cannotDrawMorePolygons: string;
+        cannotDrawMorePolylines: string;
+        cannotDrawMoreRectangles: string;
         id: string;
-        rectangle: string;
+        mainParametersMetadata: string;
         polygon: string;
+        polygonHelpText: string;
         polyline: string;
+        polylineHelpText: string;
+        rect: string;
+        rectHelpText: string;
+        pointer: string;
+        pointerHelpText: 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, CloseIcon, 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,60 @@ 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';
 export const DefaultUiContext = {
     enableLogs: true,
     themeMode: 'light',
     primaryColor: '#1976d2',
     Typography,
     IconButton,
+    Modal,
     DeleteIcon,
     EditIcon,
     SelectIcon,
+    CopyIcon,
+    AnnotateIcon,
+    CloseIcon,
     pickerColors: ['#ffffff', '#000000', '#ff9900', '#0099ff'],
+    notify,
     strings: {
+        cannotDrawMorePolygons: 'You cannot draw more polygons',
+        cannotDrawMorePolylines: 'You cannot draw more polylines',
+        cannotDrawMoreRectangles: 'You cannot draw more rectangles',
         id: 'ID',
+        mainParametersMetadata: 'Main 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',
         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, CloseIcon, 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,
+        CloseIcon: CloseIcon !== null && CloseIcon !== void 0 ? CloseIcon : DefaultUiContext.CloseIcon,
         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/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.8",
   "description": "A react component for drawing ROI over images and managing metadata",
   "repository": {
     "type": "git",
@@ -47,14 +47,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",
@@ -63,5 +63,9 @@
   "dependencies": {
     "fabric": "^6.5.4",
     "uuidv4": "^6.2.13"
+  },
+  "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;
-}