@abidibo/react-cam-roi 0.0.10 → 0.0.11

package/README.md

@@ -51,10 +51,15 @@ 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
   // the url of the image we want to annotate
   imageUrl: string
+  // configuration object
   configuration: Configuration
+  // callback called when exporting data
   onSubmit: (data: Output) => void
+  // initial imported data
   initialData?: Output
 }
 

package/dist/Components/RoiEditor/Canvas.js

@@ -2,10 +2,10 @@ 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 { initCanvasData, useDispatcherEvents, useTool } from './Hooks';
 import { UiContext } from '../../Providers/UiProvider';
+import { initCanvasData, useDispatcherEvents, useTool } from './Hooks';
 const Canvas = ({ canvasSize, initialData }) => {
-    const { metadata, setMetadata, addShapes } = useEditorContext();
+    const { metadata, setMetadata, addShapes, id } = useEditorContext();
     const { enableLogs } = useContext(UiContext);
     const [initialized, setInitialized] = useState(false);
     const canvasRef = useRef(null);
@@ -17,12 +17,12 @@ const Canvas = ({ canvasSize, initialData }) => {
             canvasRef.current.setDimensions({ width: canvasSize.width, height: canvasSize.height });
             initCanvasData(canvasRef, addShapes, metadata, setMetadata, initialData, enableLogs);
             setInitialized(true);
-            return () => {
-                var _a;
-                (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
-            };
         }
+        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", style: { width: `${canvasSize.width}px`, height: `${canvasSize.height}px` } }));
+    return (_jsx("canvas", { id: `react-cam-roi-canvas-${id}`, style: { width: `${canvasSize.width}px`, height: `${canvasSize.height}px` } }));
 };
 export default Canvas;

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

@@ -4,6 +4,7 @@ export type RoiEditorProps = {
     configuration: Configuration;
     onSubmit: (data: Output) => void;
     initialData?: Output;
+    id: string;
 };
 declare const RoiEditor: React.FC<RoiEditorProps>;
 export default RoiEditor;

package/dist/Components/RoiEditor/index.js

@@ -11,7 +11,7 @@ import ShapesList from './ShapesList';
 import Toolbar from './Toolbar';
 import { fabricShapeToOutputShape, validate } from './Utils';
 // https://github.com/n-mazaheri/image-editor
-const RoiEditor = ({ imageUrl, configuration, onSubmit, initialData }) => {
+const RoiEditor = ({ imageUrl, configuration, onSubmit, initialData, id }) => {
     var _a, _b, _c;
     const { themeMode, enableLogs, pickerColors, strings, notify } = useContext(UiContext);
     const { imageSize, canvasSize, wrapperRef, isReady } = useCanvasSize(imageUrl);
@@ -65,7 +65,7 @@ const RoiEditor = ({ imageUrl, configuration, onSubmit, initialData }) => {
     if (!isReady) {
         return _jsx(Loader, {});
     }
-    return (_jsx(EditorProvider, { hideForbiddenTools: (_c = (_b = configuration.options) === null || _b === void 0 ? void 0 : _b.hideForbiddenTools) !== null && _c !== void 0 ? _c : false, activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, shapes: shapes, addShape: addShape, addShapes: addShapes, removeShape: removeShape, configuration: configuration, metadata: metadata, setMetadata: setMetadata, onSubmit: handleSubmit, children: _jsxs("div", { style: { maxWidth: '100%', width: `${imageSize.width}px` }, ref: wrapperRef, children: [_jsx(Toolbar, {}), _jsx("div", { className: css('canvasWrapper', styles, themeMode), style: {
+    return (_jsx(EditorProvider, { id: id, hideForbiddenTools: (_c = (_b = configuration.options) === null || _b === void 0 ? void 0 : _b.hideForbiddenTools) !== null && _c !== void 0 ? _c : false, activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, shapes: shapes, addShape: addShape, addShapes: addShapes, removeShape: removeShape, configuration: configuration, metadata: metadata, setMetadata: setMetadata, onSubmit: handleSubmit, children: _jsxs("div", { style: { maxWidth: '100%', width: `${imageSize.width}px` }, ref: wrapperRef, children: [_jsx(Toolbar, {}), _jsx("div", { className: css('canvasWrapper', styles, themeMode), style: {
                         width: `${canvasSize.width}px`,
                         height: `${canvasSize.height}px`,
                         backgroundImage: `url(${imageUrl})`,

package/dist/Providers/EditorProvider.d.ts

@@ -18,8 +18,9 @@ type EditorContextType = {
     metadata: Metadata;
     setMetadata: (data: Metadata) => void;
     onSubmit: () => void;
+    id: string;
 };
 export declare const EditorContext: import("react").Context<EditorContextType | undefined>;
 export declare function useEditorContext(): EditorContextType;
-declare const EditorProvider: ({ children, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
+declare const EditorProvider: ({ children, id, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }: PropsWithChildren<EditorContextType>) => import("react/jsx-runtime").JSX.Element;
 export default EditorProvider;

package/dist/Providers/EditorProvider.js

@@ -8,8 +8,9 @@ export function useEditorContext() {
     }
     return context;
 }
-const EditorProvider = ({ children, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }) => {
+const EditorProvider = ({ children, id, hideForbiddenTools, activeTool, setActiveTool, activeColor, setActiveColor, shapes, addShape, addShapes, removeShape, configuration, metadata, setMetadata, onSubmit, }) => {
     return (_jsx(EditorContext.Provider, { value: {
+            id,
             hideForbiddenTools,
             activeTool,
             setActiveTool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abidibo/react-cam-roi",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "A react component for drawing ROI over images and managing metadata",
   "repository": {
     "type": "git",