@abidibo/react-cam-roi 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/README.md +279 -16
  2. package/dist/Components/Modal/Modal.module.css +85 -0
  3. package/dist/Components/Modal/index.d.ts +9 -0
  4. package/dist/Components/Modal/index.js +16 -0
  5. package/dist/Components/RoiEditor/Canvas.js +2 -4
  6. package/dist/Components/RoiEditor/Hooks.d.ts +3 -4
  7. package/dist/Components/RoiEditor/Hooks.js +64 -16
  8. package/dist/Components/RoiEditor/ParametersModalForm.d.ts +5 -0
  9. package/dist/Components/RoiEditor/ParametersModalForm.js +8 -0
  10. package/dist/Components/RoiEditor/Polygon.d.ts +3 -2
  11. package/dist/Components/RoiEditor/Polygon.js +18 -0
  12. package/dist/Components/RoiEditor/Polyline.d.ts +12 -1
  13. package/dist/Components/RoiEditor/Polyline.js +18 -0
  14. package/dist/Components/RoiEditor/Rectangle.d.ts +17 -1
  15. package/dist/Components/RoiEditor/Rectangle.js +23 -1
  16. package/dist/Components/RoiEditor/ShapesList.d.ts +2 -0
  17. package/dist/Components/RoiEditor/ShapesList.js +34 -0
  18. package/dist/Components/RoiEditor/ShapesList.module.css +36 -0
  19. package/dist/Components/RoiEditor/Toolbar.js +10 -6
  20. package/dist/Components/RoiEditor/Toolbar.module.css +28 -0
  21. package/dist/Components/RoiEditor/Types.d.ts +47 -1
  22. package/dist/Components/RoiEditor/Types.js +15 -1
  23. package/dist/Components/RoiEditor/Utils.d.ts +5 -0
  24. package/dist/Components/RoiEditor/Utils.js +37 -0
  25. package/dist/Components/RoiEditor/index.d.ts +2 -0
  26. package/dist/Components/RoiEditor/index.js +4 -5
  27. package/dist/Components/Typography/index.d.ts +3 -0
  28. package/dist/Components/Typography/index.js +3 -2
  29. package/dist/Icons/AnnotateIcon.d.ts +6 -0
  30. package/dist/Icons/AnnotateIcon.js +5 -0
  31. package/dist/Icons/CloseIcon.d.ts +6 -0
  32. package/dist/Icons/CloseIcon.js +5 -0
  33. package/dist/Icons/CopyIcon.d.ts +6 -0
  34. package/dist/Icons/CopyIcon.js +5 -0
  35. package/dist/Providers/EditorProvider.d.ts +3 -2
  36. package/dist/Providers/EditorProvider.js +2 -2
  37. package/dist/Providers/UiProvider.d.ts +21 -2
  38. package/dist/Providers/UiProvider.js +26 -2
  39. package/dist/index.d.ts +2 -1
  40. package/dist/index.js +2 -1
  41. package/package.json +7 -3
  42. package/dist/Components/RoiEditor/Metadata.d.ts +0 -2
  43. package/dist/Components/RoiEditor/Metadata.js +0 -31
  44. package/dist/Components/RoiEditor/Metadata.module.css +0 -34
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ const AnnotateIcon = ({ color = 'black', style = {} }) => {
3
+ 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" }) }));
4
+ };
5
+ export default AnnotateIcon;
@@ -0,0 +1,6 @@
1
+ type CloseIconProps = {
2
+ color?: string;
3
+ style?: React.CSSProperties;
4
+ };
5
+ declare const CloseIcon: React.FC<CloseIconProps>;
6
+ export default CloseIcon;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ const CloseIcon = ({ color = 'black', style = {} }) => {
3
+ 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" }) }));
4
+ };
5
+ export default CloseIcon;
@@ -0,0 +1,6 @@
1
+ type CopyIconProps = {
2
+ color?: string;
3
+ style?: React.CSSProperties;
4
+ };
5
+ declare const CopyIcon: React.FC<CopyIconProps>;
6
+ export default CopyIcon;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ const CopyIcon = ({ color = 'black', style = {} }) => {
3
+ 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" }) }));
4
+ };
5
+ export default CopyIcon;
@@ -1,5 +1,5 @@
1
1
  import { PropsWithChildren } from 'react';
2
- import { Shape, Shapes, ShapeType, ToolEnum } from '../Components/RoiEditor/Types';
2
+ import { Configuration, Shape, Shapes, ShapeType, ToolEnum } from '../Components/RoiEditor/Types';
3
3
  type EditorContextType = {
4
4
  activeTool: ToolEnum;
5
5
  setActiveTool: (tool: ToolEnum) => void;
@@ -8,8 +8,9 @@ type EditorContextType = {
8
8
  shapes: Shapes;
9
9
  addShape: (id: string, type: ShapeType, shape: Shape) => void;
10
10
  removeShape: (id: string) => void;
11
+ configuration: Configuration;
11
12
  };
12
13
  export declare const EditorContext: import("react").Context<EditorContextType | undefined>;
13
14
  export declare function useEditorContext(): EditorContextType;
14
- declare const EditorProvider: ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
15
+ declare const EditorProvider: ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, configuration, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
15
16
  export default EditorProvider;
@@ -8,7 +8,7 @@ export function useEditorContext() {
8
8
  }
9
9
  return context;
10
10
  }
11
- const EditorProvider = ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, }) => {
12
- return (_jsx(EditorContext.Provider, { value: { activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape }, children: children }));
11
+ const EditorProvider = ({ children, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, configuration, }) => {
12
+ return (_jsx(EditorContext.Provider, { value: { activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, removeShape, configuration }, children: children }));
13
13
  };
14
14
  export default EditorProvider;
@@ -4,6 +4,11 @@ import IconButton from '../Components/IconButton';
4
4
  import DeleteIcon from '../Icons/DeleteIcon';
5
5
  import EditIcon from '../Icons/EditIcon';
6
6
  import SelectIcon from '../Icons/SelectIcon';
7
+ import { INotify } from '../Components/RoiEditor/Types';
8
+ import CopyIcon from '../Icons/CopyIcon';
9
+ import AnnotateIcon from '../Icons/AnnotateIcon';
10
+ import Modal from '../Components/Modal';
11
+ import CloseIcon from '../Icons/CloseIcon';
7
12
  type UiContextType = {
8
13
  children?: React.ReactNode;
9
14
  enableLogs: boolean;
@@ -11,21 +16,35 @@ type UiContextType = {
11
16
  primaryColor: string;
12
17
  Typography: typeof Typography;
13
18
  IconButton: typeof IconButton;
19
+ Modal: typeof Modal;
14
20
  DeleteIcon: typeof DeleteIcon;
15
21
  EditIcon: typeof EditIcon;
16
22
  SelectIcon: typeof SelectIcon;
23
+ CopyIcon: typeof CopyIcon;
24
+ AnnotateIcon: typeof AnnotateIcon;
25
+ CloseIcon: typeof CloseIcon;
17
26
  pickerColors: string[];
27
+ notify: INotify;
18
28
  strings: {
29
+ cannotDrawMorePolygons: string;
30
+ cannotDrawMorePolylines: string;
31
+ cannotDrawMoreRectangles: string;
19
32
  id: string;
20
- rectangle: string;
33
+ mainParametersMetadata: string;
21
34
  polygon: string;
35
+ polygonHelpText: string;
22
36
  polyline: string;
37
+ polylineHelpText: string;
38
+ rect: string;
39
+ rectHelpText: string;
40
+ pointer: string;
41
+ pointerHelpText: string;
23
42
  type: string;
24
43
  };
25
44
  };
26
45
  export declare const DefaultUiContext: UiContextType;
27
46
  export declare const UiContext: import("react").Context<UiContextType>;
28
- declare const UiProvider: ({ children, enableLogs, themeMode, primaryColor, Typography, IconButton, DeleteIcon, EditIcon, SelectIcon, pickerColors, strings, }: PropsWithChildren<Partial<Omit<UiContextType, "strings">> & {
47
+ declare const UiProvider: ({ children, enableLogs, themeMode, primaryColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, CloseIcon, pickerColors, notify, strings, }: PropsWithChildren<Partial<Omit<UiContextType, "strings">> & {
29
48
  strings?: Partial<UiContextType["strings"]>;
30
49
  }>) => import("react/jsx-runtime").JSX.Element;
31
50
  export default UiProvider;
@@ -5,36 +5,60 @@ import IconButton from '../Components/IconButton';
5
5
  import DeleteIcon from '../Icons/DeleteIcon';
6
6
  import EditIcon from '../Icons/EditIcon';
7
7
  import SelectIcon from '../Icons/SelectIcon';
8
+ import { notify } from '../Components/RoiEditor/Utils';
9
+ import CopyIcon from '../Icons/CopyIcon';
10
+ import AnnotateIcon from '../Icons/AnnotateIcon';
11
+ import Modal from '../Components/Modal';
12
+ import CloseIcon from '../Icons/CloseIcon';
8
13
  export const DefaultUiContext = {
9
14
  enableLogs: true,
10
15
  themeMode: 'light',
11
16
  primaryColor: '#1976d2',
12
17
  Typography,
13
18
  IconButton,
19
+ Modal,
14
20
  DeleteIcon,
15
21
  EditIcon,
16
22
  SelectIcon,
23
+ CopyIcon,
24
+ AnnotateIcon,
25
+ CloseIcon,
17
26
  pickerColors: ['#ffffff', '#000000', '#ff9900', '#0099ff'],
27
+ notify,
18
28
  strings: {
29
+ cannotDrawMorePolygons: 'You cannot draw more polygons',
30
+ cannotDrawMorePolylines: 'You cannot draw more polylines',
31
+ cannotDrawMoreRectangles: 'You cannot draw more rectangles',
19
32
  id: 'ID',
33
+ mainParametersMetadata: 'Main parameters',
20
34
  polygon: 'Polygon',
35
+ polygonHelpText: 'click to draw all the polygon points, double click on the last point to close the polygon',
21
36
  polyline: 'Polyline',
22
- rectangle: 'Rectangle',
37
+ polylineHelpText: 'click to draw all the polyline points, double click on the last point to stop drawing',
38
+ rect: 'Rectangle',
39
+ rectHelpText: 'click and drag to draw the rectangle',
40
+ pointer: 'Selection',
41
+ pointerHelpText: 'click a shape to select it',
23
42
  type: 'Type',
24
43
  },
25
44
  };
26
45
  export const UiContext = createContext(DefaultUiContext);
27
- const UiProvider = ({ children, enableLogs, themeMode, primaryColor, Typography, IconButton, DeleteIcon, EditIcon, SelectIcon, pickerColors, strings, }) => {
46
+ const UiProvider = ({ children, enableLogs, themeMode, primaryColor, Typography, Modal, IconButton, DeleteIcon, EditIcon, SelectIcon, CopyIcon, AnnotateIcon, CloseIcon, pickerColors, notify, strings, }) => {
28
47
  const ctx = {
29
48
  enableLogs: enableLogs !== null && enableLogs !== void 0 ? enableLogs : DefaultUiContext.enableLogs,
30
49
  Typography: Typography !== null && Typography !== void 0 ? Typography : DefaultUiContext.Typography,
50
+ Modal: Modal !== null && Modal !== void 0 ? Modal : DefaultUiContext.Modal,
31
51
  IconButton: IconButton !== null && IconButton !== void 0 ? IconButton : DefaultUiContext.IconButton,
32
52
  DeleteIcon: DeleteIcon !== null && DeleteIcon !== void 0 ? DeleteIcon : DefaultUiContext.DeleteIcon,
33
53
  EditIcon: EditIcon !== null && EditIcon !== void 0 ? EditIcon : DefaultUiContext.EditIcon,
34
54
  SelectIcon: SelectIcon !== null && SelectIcon !== void 0 ? SelectIcon : DefaultUiContext.SelectIcon,
55
+ CopyIcon: CopyIcon !== null && CopyIcon !== void 0 ? CopyIcon : DefaultUiContext.CopyIcon,
56
+ AnnotateIcon: AnnotateIcon !== null && AnnotateIcon !== void 0 ? AnnotateIcon : DefaultUiContext.AnnotateIcon,
57
+ CloseIcon: CloseIcon !== null && CloseIcon !== void 0 ? CloseIcon : DefaultUiContext.CloseIcon,
35
58
  themeMode: themeMode !== null && themeMode !== void 0 ? themeMode : DefaultUiContext.themeMode,
36
59
  primaryColor: primaryColor !== null && primaryColor !== void 0 ? primaryColor : DefaultUiContext.primaryColor,
37
60
  pickerColors: pickerColors !== null && pickerColors !== void 0 ? pickerColors : DefaultUiContext.pickerColors,
61
+ notify: notify !== null && notify !== void 0 ? notify : DefaultUiContext.notify,
38
62
  strings: strings ? Object.assign(Object.assign({}, DefaultUiContext.strings), strings) : DefaultUiContext.strings,
39
63
  };
40
64
  return _jsx(UiContext.Provider, { value: ctx, children: children });
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import RoiEditor from "./Components/RoiEditor";
2
2
  import UiProvider, { UiContext, DefaultUiContext } from "./Providers/UiProvider";
3
- export { RoiEditor, UiProvider, UiContext, DefaultUiContext };
3
+ import * as Types from "./Components/RoiEditor/Types";
4
+ export { RoiEditor, UiProvider, UiContext, DefaultUiContext, Types };
package/dist/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  import RoiEditor from "./Components/RoiEditor";
2
2
  import UiProvider, { UiContext, DefaultUiContext } from "./Providers/UiProvider";
3
- export { RoiEditor, UiProvider, UiContext, DefaultUiContext };
3
+ import * as Types from "./Components/RoiEditor/Types";
4
+ export { RoiEditor, UiProvider, UiContext, DefaultUiContext, Types };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abidibo/react-cam-roi",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "description": "A react component for drawing ROI over images and managing metadata",
5
5
  "repository": {
6
6
  "type": "git",
@@ -47,14 +47,14 @@
47
47
  "@storybook/react-vite": "^8.4.7",
48
48
  "@storybook/test": "^8.4.7",
49
49
  "@trivago/prettier-plugin-sort-imports": "^5.2.1",
50
- "@types/react": "^19.0.7",
50
+ "@types/react": "^18.0.0",
51
+ "@types/react-dom": "^18.0.0",
51
52
  "copyfiles": "^2.4.1",
52
53
  "eslint": "^9.18.0",
53
54
  "eslint-plugin-react-hooks": "^5.1.0",
54
55
  "eslint-plugin-react-refresh": "^0.4.18",
55
56
  "globals": "^15.14.0",
56
57
  "prettier": "^3.4.2",
57
- "react": "^19.0.0",
58
58
  "rimraf": "^6.0.1",
59
59
  "storybook": "^8.4.7",
60
60
  "typescript": "^5.7.3",
@@ -63,5 +63,9 @@
63
63
  "dependencies": {
64
64
  "fabric": "^6.5.4",
65
65
  "uuidv4": "^6.2.13"
66
+ },
67
+ "peerDependencies": {
68
+ "react": "^18.0.0",
69
+ "react-dom": "^18.0.0"
66
70
  }
67
71
  }
@@ -1,2 +0,0 @@
1
- declare const Metadata: React.FC;
2
- export default Metadata;
@@ -1,31 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useContext, useEffect, useState } from 'react';
3
- import { useEditorContext } from '../../Providers/EditorProvider';
4
- import { UiContext } from '../../Providers/UiProvider';
5
- import { css } from '../../Utils';
6
- import Dispatcher from '../../Utils/Dispatcher';
7
- import styles from './Metadata.module.css';
8
- const Metadata = () => {
9
- const { strings, Typography, IconButton, DeleteIcon, EditIcon, SelectIcon, themeMode } = useContext(UiContext);
10
- const { shapes, removeShape } = useEditorContext();
11
- const [selected, setSelected] = useState([]);
12
- useEffect(() => {
13
- 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 : []); };
14
- Dispatcher.register('canvas:shapeSelected', setSelectedShapes);
15
- return () => {
16
- Dispatcher.unregister('canvas:shapeSelected', setSelectedShapes);
17
- };
18
- }, [shapes]);
19
- const handleRemoveShape = (id) => () => {
20
- Dispatcher.emit('canvas:removeShape', id);
21
- removeShape(id);
22
- };
23
- const handleSelectShape = (id) => () => {
24
- Dispatcher.emit('canvas:selectShape', id);
25
- };
26
- const iconColor = themeMode === 'light' ? 'black' : 'white';
27
- 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) => {
28
- 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));
29
- }) })] }));
30
- };
31
- export default Metadata;
@@ -1,34 +0,0 @@
1
- .metadata-table {
2
- border-collapse: collapse;
3
- width: 100%;
4
- }
5
-
6
- .metadata-table th {
7
- padding: .8rem .3rem .3rem;
8
- text-align: left;
9
- }
10
-
11
- .metadata-table td {
12
- padding: 0 .3rem;
13
- }
14
-
15
- .metadata-table tr td:last-child,
16
- .metadata-table tr th:last-child {
17
- text-align: right;
18
- }
19
-
20
- .metadata-table-light {
21
- color: #000;
22
- }
23
-
24
- .metadata-table-dark {
25
- color: #fff;
26
- }
27
-
28
- .metadata-row-selected-light {
29
- background-color: #ccc;
30
- }
31
-
32
- .metadata-row-selected-dark {
33
- background-color: #666;
34
- }