@abidibo/react-cam-roi 0.0.11 → 0.0.13

package/README.md

@@ -52,7 +52,7 @@ The `RoiEditor` props and the `Output` interface used both in import and export:
 ``` ts 
 export type RoiEditorProps = {
   // id of this editor instance, should be unique
-  id: string
+  editorId: string
   // the url of the image we want to annotate
   imageUrl: string
   // configuration object
@@ -103,6 +103,8 @@ export interface OutputParameter {
 export interface OutputRoi {
   parameters: OutputParameter[]
   type: ShapeType
+  name: string
+  role: string
   shape: OutputShapeRect | OutputShapePolyline | OutputShapePolygon
 }
 export interface Output {
@@ -165,7 +167,7 @@ export type ConfigurationParameter = {
 
 // Configuration of ROIs
 export type RoiConfiguration = {
-  role: string // for our use case
+  role: string // let's say the category of the roi
   type: Omit<ShapeType, 'pointer'> // shape type
   multiplicity: { // how many ROIs of this type can be drawn
     operator: OperatorEnum
@@ -210,7 +212,7 @@ export const configuration: Configuration = {
   ],
   rois: [
     {
-      role: 'invasion_area', // analytics role, do not show in interface
+      role: 'invasion_area', // analytics role
       type: ToolEnum.Polygon,
       multiplicity: {
         // how many rois of this type can/should be created
@@ -255,7 +257,7 @@ import { UiProvider, RoiEditor } from 'react-cam-roi'
 
 const MyView: React.FC = () => {
   return (
-    <UiProvider themeMode={'dark'} IconButton={IconButton} primaryColor={'#1976d2'} enableLogs>
+    <UiProvider themeMode={'dark'} IconButton={IconButton} primaryColor={'#1976d2'} primaryFgColor={'#fff'} enableLogs>
       <RoiEditor imageUrl={'whatever'} />
     </UiProvider>
   )
@@ -272,6 +274,7 @@ type UiContextType = {
   enableLogs: boolean // enable console logs
   themeMode: 'light' | 'dark' // themeMode for internal components
   primaryColor: string // primary color for internal components
+  primaryFgColor: string // text color above primary bg for internal components
   Typography: React.FC<TypographyProps> // component used to surround text
   Modal: React.FC<ModalProps> // modal dialog component (it displays metadata forms)
   IconButton: React.FC<IconButtonProps> // wrapper for icon buttons
@@ -297,16 +300,27 @@ type UiContextType = {
     mainParametersMetadata: string
     missingRequiredValuesInMainParameters: string
     missingRequiredValuesInShapeParameters: string // with {id} placeholder
+    mainParametersMetadata: strings
+    roiMultiplicityEqRule: string // with {role}, {type} and {threshold} placeholder
+    roiMultiplicityGtRule: string // with {role}, {type} and {threshold} placeholder
+    roiMultiplicityGteRule: string // with {role}, {type} and {threshold} placeholder
+    roiMultiplicityLtRule: string // with {role}, {type} and {threshold} placeholder
+    roiMultiplicityLteRule: string // with {role}, {type} and {threshold} placeholder
+    roiMultiplicityNoRule: string // with {role}, {type}
+    name: string
     polygon: string
     polygonHelpText: string
     polyline: string
     polylineHelpText: string
-    rect: string
-    rectHelpText: string
     pointer: string
     pointerHelpText: string
+    rect: string
+    rectHelpText: string
     requiredField: string
+    roisToBeDrawn: string
+    role: string
     save: string
+    shapeParametersMetadata: string
     shapesOfTypeShouldBeEqualToThreshold: string // with {type} and {threshold} placeholders
     shapesOfTypeShouldBeGreaterThanThreshold: string // with {type} and {threshold} placeholders
     shapesOfTypeShouldBeGreaterThanOrEqualToThreshold: string // with {type} and {threshold} placeholders
@@ -650,11 +664,17 @@ There are components that cannot be overridden. But still you can use classes to
 - `react-cam-roi-editor-wrapper-light`
 - `react-cam-roi-editor-wrapper-dark`
 
-#### Toolbar
+#### Header
+
+- `react-cam-roi-header`
+- `react-cam-roi-header-light`
+- `react-cam-roi-header-dark`
 
-- `react-cam-roi-toolbar-info`
-- `react-cam-roi-toolbar-info-light`
-- `react-cam-roi-toolbar-info-dark`
+- `react-cam-roi-header-info`
+- `react-cam-roi-header-info-light`
+- `react-cam-roi-header-info-dark`
+
+#### Toolbar
 
 - `react-cam-roi-toolbar`
 - `react-cam-roi-toolbar-light`
@@ -675,6 +695,12 @@ There are components that cannot be overridden. But still you can use classes to
 - `react-cam-roi-shapes-table`
 - `react-cam-roi-shapes-table-light`
 - `react-cam-roi-shapes-table-dark`
+- `react-cam-roi-shapes-row-selected-light`
+- `react-cam-roi-shapes-row-selected-dark`
+- `react-cam-roi-shapes-row-even-light`
+- `react-cam-roi-shapes-row-even-dark`
+- `react-cam-roi-shapes-row-odd-light`
+- `react-cam-roi-shapes-row-odd-dark`
 
 #### Colorpicker button
 

package/dist/Components/Button/Button.module.css

@@ -1,18 +1,20 @@
 .button {
+  align-items: center;
   border: none;
   border-radius: 4px;
   color: black;
   padding: .5rem 1rem;
   text-align: center;
   text-decoration: none;
-  display: inline-block;
+  display: flex;
   font-size: 16px;
+  gap: .5rem;
   margin: 4px 2px;
   cursor: pointer;
 }
 
 .button-light {
-  background-color: #d7d7d7;
+  background-color: #c7c7c7;
   color: black;
 }
 

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

@@ -1,10 +1,10 @@
 import { FieldProps } from '../../Types';
-export type EnumOption = {
-    value: string | number;
+export type EnumOption<T> = {
+    value: T;
     label: string;
 };
-declare const EnumField: ({ onChange, value, label, helperText, error, options, disabled, required, multiple }: Omit<FieldProps<string | number | (string | number)[]>, "readOnly"> & {
-    options: EnumOption[];
+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/RoiEditor/Canvas.js

@@ -5,7 +5,7 @@ import { useEditorContext } from '../../Providers/EditorProvider';
 import { UiContext } from '../../Providers/UiProvider';
 import { initCanvasData, useDispatcherEvents, useTool } from './Hooks';
 const Canvas = ({ canvasSize, initialData }) => {
-    const { metadata, setMetadata, addShapes, id } = useEditorContext();
+    const { metadata, setMetadata, addShapes, editorId } = useEditorContext();
     const { enableLogs } = useContext(UiContext);
     const [initialized, setInitialized] = useState(false);
     const canvasRef = useRef(null);
@@ -13,7 +13,7 @@ const Canvas = ({ canvasSize, initialData }) => {
     useDispatcherEvents(canvasRef.current);
     useEffect(() => {
         if (canvasSize.width !== 0 && canvasSize.height !== 0 && !initialized) {
-            canvasRef.current = new fabric.Canvas('react-cam-roi-canvas');
+            canvasRef.current = new fabric.Canvas(`react-cam-roi-canvas-${editorId}`);
             canvasRef.current.setDimensions({ width: canvasSize.width, height: canvasSize.height });
             initCanvasData(canvasRef, addShapes, metadata, setMetadata, initialData, enableLogs);
             setInitialized(true);
@@ -23,6 +23,6 @@ const Canvas = ({ canvasSize, initialData }) => {
             (_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-${id}`, style: { width: `${canvasSize.width}px`, height: `${canvasSize.height}px` } }));
+    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/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,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import { useEditorContext } from '../../Providers/EditorProvider';
+import { UiContext } from '../../Providers/UiProvider';
+import { css } from '../../Utils';
+import styles from './Header.module.css';
+import ParametersModalForm from './ParametersModalForm';
+import { enableMainMetadata } from './Utils';
+import RoisInfo from './RoisInfo';
+const Header = () => {
+    var _a;
+    const { themeMode, Typography, Button, strings, SaveIcon, primaryFgColor, AnnotateIcon } = useContext(UiContext);
+    const { configuration, onSubmit, metadata, setMetadata } = useEditorContext();
+    const [form, setForm] = useState({ isOpen: false });
+    const iconColor = themeMode === 'light' ? 'black' : 'white';
+    const handleSubmitMetadata = (data) => {
+        setMetadata(Object.assign(Object.assign({}, metadata), { parameters: data }));
+        setForm({ isOpen: false });
+    };
+    return (_jsxs("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, {})] }), _jsxs("div", { className: styles.headerButtons, children: [enableMainMetadata(configuration) && (_jsxs(Button, { onClick: () => setForm({ isOpen: true }), children: [_jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] })), _jsxs(Button, { primary: true, onClick: onSubmit, children: [_jsx(SaveIcon, { color: primaryFgColor }), " ", strings.save] })] }), form.isOpen && (_jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: () => setForm({ isOpen: false }), onSubmit: handleSubmitMetadata }))] }));
+};
+export default Header;

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

@@ -0,0 +1,32 @@
+.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;
+}
+
+.headerButtons {
+  display: flex;
+  align-items: center;
+  gap: .5rem
+}

package/dist/Components/RoiEditor/Hooks.js

@@ -108,7 +108,7 @@ export const initCanvasData = (canvasRef, addShapes, metadata, setMetadata, init
                     (_c = canvasRef.current) === null || _c === void 0 ? void 0 : _c.add(shape);
                     break;
             }
-            m.push({ id, parameters: r.parameters });
+            m.push({ id, parameters: r.parameters, name: r.name, role: r.role });
             s.push({ id, type: r.type, shape });
         });
         addShapes(s);
@@ -116,7 +116,7 @@ export const initCanvasData = (canvasRef, addShapes, metadata, setMetadata, init
     }
 };
 export const useTool = (canvas) => {
-    const { configuration, activeTool, activeColor, shapes, addShape } = useEditorContext();
+    const { editorId, configuration, activeTool, activeColor, shapes, addShape } = useEditorContext();
     const { notify, strings } = useContext(UiContext);
     const [isDrawing, setIsDrawing] = useState(false);
     const [shape, setShape] = useState(null);
@@ -128,12 +128,12 @@ export const useTool = (canvas) => {
     // Handler for object selected event to update style settings
     const handleObjectSelected = useCallback((event) => {
         var _a;
-        Dispatcher.emit('canvas:shapeSelected', (_a = event.selected) !== null && _a !== void 0 ? _a : null);
-    }, []);
+        Dispatcher.emit(`canvas:${editorId}:shapeSelected`, (_a = event.selected) !== null && _a !== void 0 ? _a : null);
+    }, [editorId]);
     // Handler for selection cleared event to reset selected shapes state
     const handleSelectionCleared = useCallback(() => {
-        Dispatcher.emit('canvas:shapeSelected', null);
-    }, []);
+        Dispatcher.emit(`canvas:${editorId}:shapeSelected`, null);
+    }, [editorId]);
     useEffect(() => {
         if (!canvas) {
             return;
@@ -150,7 +150,7 @@ export const useTool = (canvas) => {
             // disable selection
             canvas.selection = false;
             canvas.discardActiveObject();
-            Dispatcher.emit('canvas:shapeSelected', null);
+            Dispatcher.emit(`canvas:${editorId}:shapeSelected`, null);
             canvas.renderAll();
         }
         const handleMouseDown = (event) => {
@@ -192,7 +192,7 @@ export const useTool = (canvas) => {
         const handleMouseUp = () => {
             switch (activeTool) {
                 case "rect" /* ToolEnum.Rectangle */:
-                    handleMouseUpRect(canvas, setIsDrawing, shape, setShape, addShape);
+                    handleMouseUpRect(editorId, canvas, setIsDrawing, shape, setShape);
                     break;
                 default:
                     break;
@@ -201,10 +201,10 @@ export const useTool = (canvas) => {
         const handleDoubleClick = () => {
             switch (activeTool) {
                 case "polygon" /* ToolEnum.Polygon */:
-                    handleDoubleClickPolygon(canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines, addShape);
+                    handleDoubleClickPolygon(editorId, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines);
                     break;
                 case "polyline" /* ToolEnum.Polyline */:
-                    handleDoubleClickPolyline(canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines, addShape);
+                    handleDoubleClickPolyline(editorId, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines);
                     break;
                 default:
                     break;
@@ -244,10 +244,11 @@ export const useTool = (canvas) => {
         notify,
         strings,
         shapes,
+        editorId,
     ]);
 };
 export const useDispatcherEvents = (canvas) => {
-    const { configuration, shapes, addShape, setActiveTool } = useEditorContext();
+    const { configuration, shapes, addShape, setActiveTool, editorId } = useEditorContext();
     const { notify, strings } = useContext(UiContext);
     useEffect(() => {
         const removeShape = (_, id) => {
@@ -263,23 +264,23 @@ export const useDispatcherEvents = (canvas) => {
                 case "polygon" /* ToolEnum.Polygon */:
                     if (!canDrawShape(configuration, "polygon" /* ToolEnum.Polygon */, shapes, notify, strings.cannotDrawMorePolygons))
                         return;
-                    copy = copyPolygon(canvas, obj, addShape);
+                    copy = copyPolygon(editorId, canvas, obj);
                     // @ts-expect-error id exists but his stupid ts does not know
-                    Dispatcher.emit('canvas:selectShape', copy.id);
+                    Dispatcher.emit(`canvas:${editorId}:selectShape`, copy.id);
                     break;
                 case "polyline" /* ToolEnum.Polyline */:
                     if (!canDrawShape(configuration, "polyline" /* ToolEnum.Polyline */, shapes, notify, strings.cannotDrawMorePolylines))
                         return;
-                    copy = copyPolyline(canvas, obj, addShape);
+                    copy = copyPolyline(editorId, canvas, obj);
                     // @ts-expect-error id exists but his stupid ts does not know
-                    Dispatcher.emit('canvas:selectShape', copy.id);
+                    Dispatcher.emit(`canvas:${editorId}:selectShape`, copy.id);
                     break;
                 case "rect" /* ToolEnum.Rectangle */:
                     if (!canDrawShape(configuration, "rect" /* ToolEnum.Rectangle */, shapes, notify, strings.cannotDrawMoreRectangles))
                         return;
-                    copy = copyRectangle(canvas, obj, addShape);
+                    copy = copyRectangle(editorId, canvas, obj);
                     // @ts-expect-error id exists but his stupid ts does not know
-                    Dispatcher.emit('canvas:selectShape', copy.id);
+                    Dispatcher.emit(`canvas:${editorId}:selectShape`, copy.id);
                     break;
                 default:
                     break;
@@ -294,15 +295,15 @@ export const useDispatcherEvents = (canvas) => {
                 setActiveTool("pointer" /* ToolEnum.Pointer */);
             }
         };
-        Dispatcher.register('canvas:removeShape', removeShape);
-        Dispatcher.register('canvas:copyShape', copyShape);
-        Dispatcher.register('canvas:selectShape', selectShape);
+        Dispatcher.register(`canvas:${editorId}:removeShape`, removeShape);
+        Dispatcher.register(`canvas:${editorId}:copyShape`, copyShape);
+        Dispatcher.register(`canvas:${editorId}:selectShape`, selectShape);
         return () => {
-            Dispatcher.unregister('canvas:removeShape', removeShape);
-            Dispatcher.unregister('canvas:copyShape', copyShape);
-            Dispatcher.unregister('canvas:selectShape', selectShape);
+            Dispatcher.unregister(`canvas:${editorId}:removeShape`, removeShape);
+            Dispatcher.unregister(`canvas:${editorId}:copyShape`, copyShape);
+            Dispatcher.unregister(`canvas:${editorId}:selectShape`, selectShape);
         };
-    }, [setActiveTool, canvas, addShape, configuration, shapes, notify, strings]);
+    }, [setActiveTool, canvas, addShape, configuration, shapes, notify, strings, editorId]);
 };
 export const useParametersForm = (parameters) => {
     const [errors, setErrors] = useState({});

package/dist/Components/RoiEditor/ParametersModalForm/index.d.ts

@@ -1,10 +1,16 @@
-import { ConfigurationParameter, OutputParameter } from '../Types';
+import { ConfigurationParameter, OutputParameter, ShapeType } from '../Types';
 export type ParametersModalFormProps = {
     onClose: () => void;
     title: string;
     parameters: ConfigurationParameter[];
     data: OutputParameter[];
-    onSubmit: (data: OutputParameter[]) => void;
+    onSubmit: (data: OutputParameter[], properties?: {
+        name: string;
+        role: string;
+    }) => void;
+    shapeType?: ShapeType;
+    shapeName?: string;
+    shapeRole?: string;
 };
 declare const ParametersModalForm: React.FC<ParametersModalFormProps>;
 export default ParametersModalForm;

package/dist/Components/RoiEditor/ParametersModalForm/index.js

@@ -1,31 +1,40 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
 import { UiContext } from '../../../Providers/UiProvider';
 import { css } from '../../../Utils';
+import RoleField from '../../RoleField';
 import { useParametersForm } from '../Hooks';
 import ParameterField from '../ParameterField';
-import styles from './ParametersModalForm.module.css';
 import { validateParametersForm } from '../Utils';
-const ParametersModalForm = ({ title, onClose, parameters, data, onSubmit }) => {
-    const { Modal } = useContext(UiContext);
+import styles from './ParametersModalForm.module.css';
+const ParametersModalForm = ({ title, onClose, parameters, data, onSubmit, shapeType, shapeName, shapeRole, }) => {
+    const { Modal, TextField, strings } = useContext(UiContext);
+    const [name, setName] = useState(shapeName !== null && shapeName !== void 0 ? shapeName : '');
+    const [role, setRole] = useState(shapeRole !== null && shapeRole !== void 0 ? shapeRole : '');
     const { fields, setField, errors, setErrors } = useParametersForm(data);
     const handleSubmit = () => {
         if (validateParametersForm(parameters, fields, setErrors)) {
-            onSubmit([...parameters.map((p) => ({ codename: p.codename, value: fields[p.codename] }))]);
+            const data = [...parameters.map((p) => ({ codename: p.codename, value: fields[p.codename] }))];
+            if (shapeType) {
+                onSubmit(data, { name, role });
+            }
+            else {
+                onSubmit(data);
+            }
         }
     };
-    return (_jsx(Modal, { onClose: onClose, title: title, isOpen: true, maxWidth: "sm", onSubmit: handleSubmit, children: _jsx("div", { className: css('form', styles, null), children: parameters.map((parameter) => {
-                switch (parameter.type) {
-                    case 'string':
-                        return (_jsx(ParameterField, { value: String(fields[parameter.codename]), onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
-                    case 'int':
-                    case 'float':
-                        return (_jsx(ParameterField, { value: fields[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
-                    case 'bool':
-                        return (_jsx(ParameterField, { value: fields[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
-                    default:
-                        return null;
-                }
-            }) }) }));
+    return (_jsx(Modal, { onClose: onClose, title: title, isOpen: true, maxWidth: "sm", onSubmit: handleSubmit, children: _jsxs("div", { className: css('form', styles, null), children: [shapeType && (_jsxs(_Fragment, { children: [_jsx(TextField, { required: true, label: strings.name, type: "text", value: name, onChange: setName, error: !!errors.name, helperText: errors.name }), _jsx(RoleField, { required: true, value: role, onChange: setRole, error: !!errors.name, helperText: errors.name, shapeType: shapeType })] })), parameters.map((parameter) => {
+                    switch (parameter.type) {
+                        case 'string':
+                            return (_jsx(ParameterField, { value: String(fields[parameter.codename]), onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
+                        case 'int':
+                        case 'float':
+                            return (_jsx(ParameterField, { value: fields[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
+                        case 'bool':
+                            return (_jsx(ParameterField, { value: fields[parameter.codename], onChange: setField(parameter.codename), parameter: parameter, errors: errors }, parameter.codename));
+                        default:
+                            return null;
+                    }
+                })] }) }));
 };
 export default ParametersModalForm;

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

@@ -1,5 +1,5 @@
 import * as fabric from 'fabric';
-import { FabricEvent, IAddShape } from './Types';
+import { FabricEvent } from './Types';
 export declare const handleMouseDownPolygon: (event: FabricEvent, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
     x: number;
     y: number;
@@ -8,11 +8,11 @@ export declare const handleMouseDownPolygon: (event: FabricEvent, canvas: fabric
     y: number;
 }[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void) => void;
 export declare const handleMouseMovePolygon: (event: FabricEvent, canvas: fabric.Canvas, isDrawing: boolean, lines: fabric.Line[]) => void;
-export declare const handleDoubleClickPolygon: (canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
+export declare const handleDoubleClickPolygon: (editorId: string, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
     x: number;
     y: number;
 }[], setPoints: (v: {
     x: number;
     y: number;
-}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void, addShape: IAddShape) => void;
-export declare const copyPolygon: (canvas: fabric.Canvas, polygon: fabric.Polygon, addShape: IAddShape) => fabric.Polygon;
+}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void) => void;
+export declare const copyPolygon: (editorId: string, canvas: fabric.Canvas, polygon: fabric.Polygon) => fabric.Polygon;

package/dist/Components/RoiEditor/Polygon.js

@@ -1,5 +1,6 @@
 import * as fabric from 'fabric';
 import { v4 as uuidv4 } from 'uuid';
+import Dispatcher from '../../Utils/Dispatcher';
 const addPoint = (event, canvas, color, points, setPoints, lines, setLines) => {
     const pointer = canvas.getScenePoint(event.e);
     const newPoint = { x: pointer.x, y: pointer.y };
@@ -33,7 +34,7 @@ export const handleMouseMovePolygon = (event, canvas, isDrawing, lines) => {
         canvas.renderAll();
     }
 };
-export const handleDoubleClickPolygon = (canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines, addShape) => {
+export const handleDoubleClickPolygon = (editorId, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines) => {
     if (points.length > 2) {
         const id = uuidv4();
         const polygon = new fabric.Polygon(points, {
@@ -47,7 +48,7 @@ export const handleDoubleClickPolygon = (canvas, activeColor, setIsDrawing, poin
             id,
         });
         canvas.add(polygon);
-        addShape(polygon.id, "polygon" /* ToolEnum.Polygon */, polygon);
+        Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "polygon" /* ToolEnum.Polygon */, shape: polygon });
         setPoints([]);
         for (const line of lines) {
             canvas.remove(line); // Remove temporary lines
@@ -56,7 +57,7 @@ export const handleDoubleClickPolygon = (canvas, activeColor, setIsDrawing, poin
         setIsDrawing(false);
     }
 };
-export const copyPolygon = (canvas, polygon, addShape) => {
+export const copyPolygon = (editorId, canvas, polygon) => {
     const id = uuidv4();
     const copy = new fabric.Polygon(polygon.points, {
         top: polygon.top + 10,
@@ -71,6 +72,6 @@ export const copyPolygon = (canvas, polygon, addShape) => {
         id,
     });
     canvas.add(copy);
-    addShape(id, "polygon" /* ToolEnum.Polygon */, copy);
+    Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "polygon" /* ToolEnum.Polygon */, shape: copy });
     return copy;
 };

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

@@ -1,5 +1,5 @@
 import * as fabric from 'fabric';
-import { FabricEvent, IAddShape, ShapeType } from './Types';
+import { FabricEvent } from './Types';
 export declare const handleMouseDownPolyline: (event: FabricEvent, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
     x: number;
     y: number;
@@ -8,14 +8,14 @@ export declare const handleMouseDownPolyline: (event: FabricEvent, canvas: fabri
     y: number;
 }[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void) => void;
 export declare const handleMouseMovePolyline: (event: FabricEvent, canvas: fabric.Canvas, isDrawing: boolean, lines: fabric.Line[]) => void;
-export declare const handleDoubleClickPolyline: (canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
+export declare const handleDoubleClickPolyline: (editorId: string, canvas: fabric.Canvas, activeColor: string, setIsDrawing: (v: boolean) => void, points: {
     x: number;
     y: number;
 }[], setPoints: (v: {
     x: number;
     y: number;
-}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void, addShape: (id: string, type: ShapeType, shape: fabric.Polyline) => void) => void;
-export declare const copyPolyline: (canvas: fabric.Canvas, polyline: fabric.Polyline, addShape: IAddShape) => fabric.Polyline<{
+}[]) => void, lines: fabric.Line[], setLines: (v: fabric.Line[]) => void) => void;
+export declare const copyPolyline: (editorId: string, canvas: fabric.Canvas, polyline: fabric.Polyline) => fabric.Polyline<{
     top: number;
     left: number;
     fill: string;

package/dist/Components/RoiEditor/Polyline.js

@@ -1,5 +1,6 @@
 import * as fabric from 'fabric';
 import { v4 as uuidv4 } from 'uuid';
+import Dispatcher from '../../Utils/Dispatcher';
 const addPoint = (event, canvas, color, points, setPoints, lines, setLines) => {
     const pointer = canvas.getScenePoint(event.e);
     const newPoint = { x: pointer.x, y: pointer.y };
@@ -33,7 +34,7 @@ export const handleMouseMovePolyline = (event, canvas, isDrawing, lines) => {
         canvas.renderAll();
     }
 };
-export const handleDoubleClickPolyline = (canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines, addShape) => {
+export const handleDoubleClickPolyline = (editorId, canvas, activeColor, setIsDrawing, points, setPoints, lines, setLines) => {
     if (points.length > 2) {
         const id = uuidv4();
         const polyline = new fabric.Polyline(points, {
@@ -46,7 +47,7 @@ export const handleDoubleClickPolyline = (canvas, activeColor, setIsDrawing, poi
             id,
         });
         canvas.add(polyline);
-        addShape(id, "polyline" /* ToolEnum.Polyline */, polyline);
+        Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "polyline" /* ToolEnum.Polyline */, shape: polyline });
         setPoints([]);
         for (const line of lines) {
             canvas.remove(line); // Remove temporary lines
@@ -55,7 +56,7 @@ export const handleDoubleClickPolyline = (canvas, activeColor, setIsDrawing, poi
         setIsDrawing(false);
     }
 };
-export const copyPolyline = (canvas, polyline, addShape) => {
+export const copyPolyline = (editorId, canvas, polyline) => {
     const id = uuidv4();
     const copy = new fabric.Polyline(polyline.points, {
         top: polyline.top + 10,
@@ -69,6 +70,6 @@ export const copyPolyline = (canvas, polyline, addShape) => {
         id,
     });
     canvas.add(copy);
-    addShape(id, "polyline" /* ToolEnum.Polyline */, copy);
+    Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "polyline" /* ToolEnum.Polyline */, shape: copy });
     return copy;
 };

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

@@ -1,9 +1,9 @@
 import * as fabric from 'fabric';
-import { FabricEvent, IAddShape, Shape, ShapeType } from './Types';
+import { FabricEvent, Shape } from './Types';
 export declare const handleMouseDownRect: (event: FabricEvent, canvas: fabric.Canvas, activeColor: string, setOriginX: (v: number) => void, setOriginY: (v: number) => void, setShape: (v: Shape) => void, setIsDrawing: (v: boolean) => void) => void;
 export declare const handleMouseMoveRect: (event: FabricEvent, canvas: fabric.Canvas, originX: number, originY: number, shape: Shape, isDrawing: boolean) => void;
-export declare const handleMouseUpRect: (canvas: fabric.Canvas, setIsDrawing: (v: boolean) => void, shape: Shape, setShape: (v: Shape | null) => void, addShape: (id: string, type: ShapeType, shape: Shape) => void) => void;
-export declare const copyRectangle: (canvas: fabric.Canvas, rectangle: fabric.Rect, addShape: IAddShape) => fabric.Rect<{
+export declare const handleMouseUpRect: (editorId: string, canvas: fabric.Canvas, setIsDrawing: (v: boolean) => void, shape: Shape, setShape: (v: Shape | null) => void) => void;
+export declare const copyRectangle: (editorId: string, canvas: fabric.Canvas, rectangle: fabric.Rect) => fabric.Rect<{
     left: number;
     top: number;
     originX: "left";

package/dist/Components/RoiEditor/Rectangle.js

@@ -1,5 +1,6 @@
 import * as fabric from 'fabric';
 import { v4 as uuidv4 } from 'uuid';
+import Dispatcher from '../../Utils/Dispatcher';
 export const handleMouseDownRect = (event, canvas, activeColor, setOriginX, setOriginY, setShape, setIsDrawing) => {
     const pointer = canvas.getScenePoint(event.e);
     setOriginX(pointer.x);
@@ -41,14 +42,14 @@ export const handleMouseMoveRect = (event, canvas, originX, originY, shape, isDr
         canvas.renderAll();
     }
 };
-export const handleMouseUpRect = (canvas, setIsDrawing, shape, setShape, addShape) => {
+export const handleMouseUpRect = (editorId, canvas, setIsDrawing, shape, setShape) => {
     setIsDrawing(false);
     shape.setCoords();
-    addShape(shape.id, "rect" /* ToolEnum.Rectangle */, shape);
+    Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id: shape.id, type: "rect" /* ToolEnum.Rectangle */, shape });
     setShape(null);
     canvas.defaultCursor = 'default';
 };
-export const copyRectangle = (canvas, rectangle, addShape) => {
+export const copyRectangle = (editorId, canvas, rectangle) => {
     const id = uuidv4();
     const copy = new fabric.Rect({
         left: rectangle.left + 10,
@@ -67,6 +68,6 @@ export const copyRectangle = (canvas, rectangle, addShape) => {
         id,
     });
     canvas.add(copy);
-    addShape(id, "rect" /* ToolEnum.Rectangle */, copy);
+    Dispatcher.emit(`canvas:${editorId}:shapeAdded`, { id, type: "rect" /* ToolEnum.Rectangle */, shape: copy });
     return copy;
 };

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

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