@abidibo/react-cam-roi 0.4.0 → 0.6.0

package/README.md

@@ -65,14 +65,31 @@ export type RoiEditorProps = {
 
 export const enum ToolEnum {
   Pointer = 'pointer',
+  Point = 'point',
   Polyline = 'polyline',
   Polygon = 'polygon',
   Rectangle = 'rect',
 }
 
-export type ShapeType = ToolEnum.Polyline | ToolEnum.Polygon | ToolEnum.Rectangle
+export type ShapeType = ToolEnum.Polyline | ToolEnum.Polygon | ToolEnum.Rectangle | ToolEnum.Point
+
+export type OutputShapePoint = {
+  angle: number
+  scaleX: number
+  scaleY: number
+  skewX: number
+  skewY: number
+  top: number
+  left: number
+  color: string
+}
 
 export type OutputShapeRect = {
+  angle: number
+  scaleX: number
+  scaleY: number
+  skewX: number
+  skewY: number
   top: number
   left: number
   width: number
@@ -81,6 +98,11 @@ export type OutputShapeRect = {
 }
 
 export type OutputShapePolyline = {
+  angle: number
+  scaleX: number
+  scaleY: number
+  skewX: number
+  skewY: number
   points: { x: number; y: number }[]
   top: number
   left: number
@@ -88,12 +110,22 @@ export type OutputShapePolyline = {
 }
 
 export type OutputShapePolygon = {
+  angle: number
+  scaleX: number
+  scaleY: number
+  skewX: number
+  skewY: number
   points: { x: number; y: number }[]
   top: number
   left: number
   color: string
 }
 
+export type OutputPointCoords = {
+  x: number
+  y: number
+}
+
 export type OutputRectCoords = {
   points: { x: number; y: number }[]
 }
@@ -116,8 +148,8 @@ export interface OutputRoi {
   type: ShapeType
   name: string
   role: string
-  shape: OutputShapeRect | OutputShapePolyline | OutputShapePolygon // fabric obj coords
-  coords: OutputRectCoords | OutputPolylineCoords | OutputPolygonCoords // canvas coords
+  shape: OutputShapeRect | OutputShapePolyline | OutputShapePolygon | OutputShapePoint // fabric obj coords
+  coords: OutputRectCoords | OutputPolylineCoords | OutputPolygonCoords | OutputPointCoords // canvas coords
 }
 export interface Output {
   parameters: OutputParameter[]
@@ -305,6 +337,7 @@ type UiContextType = {
   notify: INotify // function used to display notifications
   strings: { // strings used here and there
     cancel: string
+    cannotDrawMorePoints: string
     cannotDrawMorePolygons: string
     cannotDrawMorePolylines: string
     cannotDrawMoreRectangles: string
@@ -321,6 +354,8 @@ type UiContextType = {
     roiMultiplicityLteRule: string // with {role}, {type} and {threshold} placeholder
     roiMultiplicityNoRule: string // with {role}, {type}
     name: string
+    point: string
+    pointHelpText: string
     polygon: string
     polygonHelpText: string
     polyline: string

package/dist/index.cjs.js

@@ -319,6 +319,17 @@ var fabricShapeToOutputShape = function (shape, type, imageSize) {
                 height: abs2Perc(shape.height, imageSize.height),
                 color: shape.stroke,
             };
+        case "point" /* ToolEnum.Point */:
+            return {
+                angle: shape.angle,
+                scaleX: shape.scaleX,
+                scaleY: shape.scaleY,
+                skewX: shape.skewX,
+                skewY: shape.skewY,
+                top: abs2Perc(shape.top, imageSize.height),
+                left: abs2Perc(shape.left, imageSize.width),
+                color: shape.stroke,
+            };
         case "polygon" /* ToolEnum.Polygon */:
         case "polyline" /* ToolEnum.Polyline */:
             return {
@@ -386,6 +397,11 @@ var fabricShapeToOutputCoords = function (shape, type, imageSize) {
                     });
                 })
             };
+        case "point" /* ToolEnum.Point */:
+            return {
+                x: abs2Perc(shape.left, imageSize.width),
+                y: abs2Perc(shape.top, imageSize.height),
+            };
         case "polygon" /* ToolEnum.Polygon */:
         case "polyline" /* ToolEnum.Polyline */:
             return {
@@ -515,6 +531,7 @@ var DefaultUiContext = {
     notify: notify,
     strings: {
         cancel: 'Cancel',
+        cannotDrawMorePoints: 'You cannot draw more points',
         cannotDrawMorePolygons: 'You cannot draw more polygons',
         cannotDrawMorePolylines: 'You cannot draw more polylines',
         cannotDrawMoreRectangles: 'You cannot draw more rectangles',
@@ -524,6 +541,8 @@ var DefaultUiContext = {
         missingRequiredValuesInMainParameters: 'Missing required values in main parameters',
         missingRequiredValuesInShapeParameters: 'Missing required values in shape {id} parameters',
         name: 'Name',
+        point: 'Point',
+        pointHelpText: 'click to draw the point',
         polygon: 'Polygon',
         polygonHelpText: 'click to draw all the polygon points, double click on the last point to close the polygon',
         polyline: 'Polyline',
@@ -936,6 +955,52 @@ var copyRectangle = function (editorId, canvas, rectangle) {
     return copy;
 };
 
+var handleMouseDownPoint = function (event, editorId, canvas, activeColor, setOriginX, setOriginY) {
+    var pointer = canvas.getScenePoint(event.e);
+    setOriginX(pointer.x);
+    setOriginY(pointer.y);
+    var id = v4();
+    var newCircle = new Gn({
+        left: pointer.x,
+        top: pointer.y,
+        originX: 'center',
+        originY: 'center',
+        radius: 6,
+        fill: 'transparent',
+        stroke: activeColor,
+        strokeWidth: 2,
+        strokeUniform: true,
+        selectable: false,
+        hasControls: false,
+        hoverCursor: 'default',
+        id: id,
+    });
+    canvas.add(newCircle);
+    Dispatcher.emit("canvas:".concat(editorId, ":shapeAdded"), { id: id, type: "point" /* ToolEnum.Point */, shape: newCircle });
+    canvas.defaultCursor = 'default';
+};
+var copyPoint = function (editorId, canvas, point) {
+    var id = v4();
+    var copy = new Gn({
+        left: point.left + 10,
+        top: point.top + 10,
+        originX: 'center',
+        originY: 'center',
+        radius: 6,
+        fill: 'transparent',
+        stroke: point.stroke,
+        strokeWidth: point.strokeWidth,
+        strokeUniform: true,
+        selectable: false,
+        hasControls: false,
+        hoverCursor: 'default',
+        id: id,
+    });
+    canvas.add(copy);
+    Dispatcher.emit("canvas:".concat(editorId, ":shapeAdded"), { id: id, type: "point" /* ToolEnum.Point */, shape: copy });
+    return copy;
+};
+
 var useImageSize = function (imageUrl) {
     var _a = React.useState({ width: 0, height: 0 }), imageSize = _a[0], setImageSize = _a[1];
     React.useEffect(function () {
@@ -981,11 +1046,34 @@ var initCanvasData = function (canvasRef, imageSize, addShapes, metadata, setMet
         var m_1 = [];
         var s_1 = [];
         initialData.rois.forEach(function (r) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             log('info', enableLogs !== null && enableLogs !== void 0 ? enableLogs : false, 'Loading initial shape', r);
             var id = r.id;
             var shape;
             switch (r.type) {
+                case "point" /* ToolEnum.Point */:
+                    shape = new Gn({
+                        angle: r.shape.angle || 0,
+                        scaleX: r.shape.scaleX || 1,
+                        scaleY: r.shape.scaleY || 1,
+                        skewX: r.shape.skewX || 0,
+                        skewY: r.shape.skewY || 0,
+                        left: perc2Abs(r.shape.left, imageSize.width),
+                        top: perc2Abs(r.shape.top, imageSize.height),
+                        originX: 'center',
+                        originY: 'center',
+                        radius: 6,
+                        fill: 'transparent',
+                        stroke: r.shape.color,
+                        strokeWidth: 2,
+                        strokeUniform: true,
+                        selectable: false,
+                        hasControls: false,
+                        hoverCursor: 'default',
+                        id: id,
+                    });
+                    (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.add(shape);
+                    break;
                 case "rect" /* ToolEnum.Rectangle */:
                     shape = new fr({
                         angle: r.shape.angle || 0,
@@ -1008,7 +1096,7 @@ var initCanvasData = function (canvasRef, imageSize, addShapes, metadata, setMet
                         hoverCursor: 'default',
                         id: id,
                     });
-                    (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.add(shape);
+                    (_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.add(shape);
                     break;
                 case "polygon" /* ToolEnum.Polygon */:
                     shape = new oo(r.shape.points.map(function (_a) {
@@ -1035,7 +1123,7 @@ var initCanvasData = function (canvasRef, imageSize, addShapes, metadata, setMet
                         // @ts-expect-error id is not included in types but the property is added and it works
                         id: id,
                     });
-                    (_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.add(shape);
+                    (_c = canvasRef.current) === null || _c === void 0 ? void 0 : _c.add(shape);
                     break;
                 case "polyline" /* ToolEnum.Polyline */:
                     shape = new no(r.shape.points.map(function (_a) {
@@ -1061,7 +1149,7 @@ var initCanvasData = function (canvasRef, imageSize, addShapes, metadata, setMet
                         hoverCursor: 'default',
                         id: id,
                     });
-                    (_c = canvasRef.current) === null || _c === void 0 ? void 0 : _c.add(shape);
+                    (_d = canvasRef.current) === null || _d === void 0 ? void 0 : _d.add(shape);
                     break;
             }
             m_1.push({ id: id, parameters: r.parameters, name: r.name, role: r.role });
@@ -1086,7 +1174,7 @@ var useTool = function (canvas) {
         var _a;
         Dispatcher.emit("canvas:".concat(editorId, ":shapeSelected"), (_a = event.selected) !== null && _a !== void 0 ? _a : null);
     }, [editorId]);
-    var handleRefreshShapes = React.useCallback(function () { return setShapes(__assign({}, shapes)); }, [shapes]);
+    var handleRefreshShapes = React.useCallback(function () { return setShapes(__assign({}, shapes)); }, [shapes]); // eslint-disable-line
     // Handler for selection cleared event to reset selected shapes state
     var handleSelectionCleared = React.useCallback(function () {
         Dispatcher.emit("canvas:".concat(editorId, ":shapeSelected"), null);
@@ -1113,6 +1201,11 @@ var useTool = function (canvas) {
         }
         var handleMouseDown = function (event) {
             switch (activeTool) {
+                case "point" /* ToolEnum.Point */:
+                    if (!canDrawShape(configuration, "point" /* ToolEnum.Point */, shapes, notify, strings.cannotDrawMorePoints))
+                        return;
+                    handleMouseDownPoint(event, editorId, canvas, activeColor, setOriginX, setOriginY);
+                    break;
                 case "rect" /* ToolEnum.Rectangle */:
                     if (!canDrawShape(configuration, "rect" /* ToolEnum.Rectangle */, shapes, notify, strings.cannotDrawMoreRectangles))
                         return;
@@ -1213,6 +1306,13 @@ var useDispatcherEvents = function (canvas) {
             var obj = canvas === null || canvas === void 0 ? void 0 : canvas.getObjects().find(function (s) { return s.id === id; });
             var copy;
             switch (obj === null || obj === void 0 ? void 0 : obj.type) {
+                case 'circle': // a ToolEnum.Point is drawed like a circle with fixed radius
+                    if (!canDrawShape(configuration, "point" /* ToolEnum.Point */, shapes, notify, strings.cannotDrawMorePoints))
+                        return;
+                    copy = copyPoint(editorId, canvas, obj);
+                    // @ts-expect-error id exists but his stupid ts does not know
+                    Dispatcher.emit("canvas:".concat(editorId, ":selectShape"), copy.id);
+                    break;
                 case "polygon" /* ToolEnum.Polygon */:
                     if (!canDrawShape(configuration, "polygon" /* ToolEnum.Polygon */, shapes, notify, strings.cannotDrawMorePolygons))
                         return;
@@ -1346,27 +1446,18 @@ var Header = function () {
 
 var styles$5 = {"canvas-wrapper":"RoiEditor-module_canvas-wrapper__q0gQg"};
 
-var isAllowed = function (role, multiplicity, metadata) {
-    switch (multiplicity.operator) {
-        case OperatorEnum.Eq:
-        case OperatorEnum.Lte:
-            return metadata.rois.filter(function (m) { return m.role === role; }).length < multiplicity.threshold;
-        case OperatorEnum.Lt:
-            return metadata.rois.filter(function (m) { return m.role === role; }).length < multiplicity.threshold - 1;
-        default:
-            return true;
-    }
-};
 var RoleField = function (_a) {
     var onChange = _a.onChange, value = _a.value, required = _a.required, shapeType = _a.shapeType, props = __rest(_a, ["onChange", "value", "required", "shapeType"]);
     var _b = React.useContext(UiContext), strings = _b.strings, EnumField = _b.EnumField;
-    var _c = useEditorContext(), configuration = _c.configuration, metadata = _c.metadata;
+    var configuration = useEditorContext().configuration /*, metadata*/;
     var options = [];
     var rois = configuration.rois || [];
     rois
         .filter(function (r) { return r.type === shapeType; })
         .forEach(function (r) {
-        if (!options.includes(r.role) && (!r.multiplicity || isAllowed(r.role, r.multiplicity, metadata))) {
+        // the following causes problems with initial data when all shapes are drawn, no roles appear in the edit dropdown
+        // if (!options.includes(r.role) && (!r.multiplicity || isAllowed(r.role, r.multiplicity!, metadata))) {
+        if (!options.includes(r.role)) {
             options.push(r.role);
         }
     });
@@ -1548,6 +1639,11 @@ var ColorPicker = function (_a) {
 
 var styles$1 = {"toolbar":"Toolbar-module_toolbar__ywNcv","toolbar-light":"Toolbar-module_toolbar-light__aJtaH","toolbar-dark":"Toolbar-module_toolbar-dark__9iO4U","toolbar-helper":"Toolbar-module_toolbar-helper__DBw3v","toolbar-helper-light":"Toolbar-module_toolbar-helper-light__Z4PLG","toolbar-helper-dark":"Toolbar-module_toolbar-helper-dark__AEXUy","toolbar-spacer":"Toolbar-module_toolbar-spacer__qPxmN","toolbar-spacer-light":"Toolbar-module_toolbar-spacer-light__2CNYP","toolbar-spacer-dark":"Toolbar-module_toolbar-spacer-dark__cW0Rj"};
 
+var PointIcon = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? 'black' : _b, _c = _a.style, style = _c === void 0 ? { height: '32px' } : _c;
+    return (jsxRuntime.jsxs("svg", { style: style, width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("circle", { cx: "9.5", cy: "15.5", r: "4.5", fill: color }), jsxRuntime.jsx("path", { d: "M19.5 0 L21.5 0 L21.5 3.5 L25 3.5 L25 5.5 L21.5 5.5 L21.5 9 L19.5 9 L19.5 5.5 L16 5.5 L16 3.5 L19.5 3.5 Z", stroke: color, "stroke-width": ".6", fill: color })] }));
+};
+
 var Toolbar = function () {
     var _a;
     var _b = React.useContext(UiContext), IconButton = _b.IconButton, themeMode = _b.themeMode, primaryColor = _b.primaryColor, Typography = _b.Typography, strings = _b.strings;
@@ -1555,12 +1651,14 @@ var Toolbar = function () {
     var iconColor = function (tool) { return (tool === activeTool ? primaryColor : themeMode === 'light' ? 'black' : 'white'); };
     var setTool = function (tool) { return function () { return setActiveTool(tool); }; };
     var hideForbiddenTools = (_a = configuration.options) === null || _a === void 0 ? void 0 : _a.hideForbiddenTools;
+    var pointEnabled = configuration.rois.find(function (r) { return r.type === "point" /* ToolEnum.Point */; }) &&
+        canDrawShape(configuration, "point" /* ToolEnum.Point */, shapes);
     var polylineEnabled = configuration.rois.find(function (r) { return r.type === "polyline" /* ToolEnum.Polyline */; }) &&
         canDrawShape(configuration, "polyline" /* ToolEnum.Polyline */, shapes);
     var polygonEnabled = configuration.rois.find(function (r) { return r.type === "polygon" /* ToolEnum.Polygon */; }) && canDrawShape(configuration, "polygon" /* ToolEnum.Polygon */, shapes);
     var rectangleEnabled = configuration.rois.find(function (r) { return r.type === "rect" /* ToolEnum.Rectangle */; }) &&
         canDrawShape(configuration, "rect" /* ToolEnum.Rectangle */, shapes);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: css('toolbar', styles$1, themeMode), children: enableRois(configuration) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: jsxRuntime.jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }), (!hideForbiddenTools || polylineEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: jsxRuntime.jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) })), (!hideForbiddenTools || polygonEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: jsxRuntime.jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) })), (!hideForbiddenTools || rectangleEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("rect" /* ToolEnum.Rectangle */), disabled: !rectangleEnabled, children: jsxRuntime.jsx(RectangleIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) })), jsxRuntime.jsx(ColorPicker, { style: { marginLeft: 'auto', marginRight: '.5rem' } })] })) }), enableRois(configuration) && (jsxRuntime.jsx("div", { className: css('toolbar-helper', styles$1, themeMode), children: jsxRuntime.jsxs(Typography, { children: [strings[activeTool], ": ", strings["".concat(activeTool, "HelpText")]] }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: css('toolbar', styles$1, themeMode), children: enableRois(configuration) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: jsxRuntime.jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }), (!hideForbiddenTools || pointEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("point" /* ToolEnum.Point */), disabled: !pointEnabled, children: jsxRuntime.jsx(PointIcon, { color: iconColor("point" /* ToolEnum.Point */) }) })), (!hideForbiddenTools || polylineEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: jsxRuntime.jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) })), (!hideForbiddenTools || polygonEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: jsxRuntime.jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) })), (!hideForbiddenTools || rectangleEnabled) && (jsxRuntime.jsx(IconButton, { onClick: setTool("rect" /* ToolEnum.Rectangle */), disabled: !rectangleEnabled, children: jsxRuntime.jsx(RectangleIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) })), jsxRuntime.jsx(ColorPicker, { style: { marginLeft: 'auto', marginRight: '.5rem' } })] })) }), enableRois(configuration) && (jsxRuntime.jsx("div", { className: css('toolbar-helper', styles$1, themeMode), children: jsxRuntime.jsxs(Typography, { children: [strings[activeTool], ": ", strings["".concat(activeTool, "HelpText")]] }) }))] }));
 };
 
 var styles = {"top-bar":"TopBar-module_top-bar__9oCUR","main-parameters-view":"TopBar-module_main-parameters-view__f-0SX","main-parameters-view-light":"TopBar-module_main-parameters-view-light__o-dbi","main-parameters-view-dark":"TopBar-module_main-parameters-view-dark__FnEnj","main-parameters-button":"TopBar-module_main-parameters-button__9JX--"};
@@ -1632,7 +1730,7 @@ var RoiEditor = function (_a) {
                     role: (_g = (_f = metadata.rois.find(function (r) { return r.id === shapeId; })) === null || _f === void 0 ? void 0 : _f.role) !== null && _g !== void 0 ? _g : '',
                     type: shapes[shapeId].type,
                     id: shapeId,
-                    shape: fabricShapeToOutputShape(shapes[shapeId].shape, shapes[shapeId].shape.type, imageSize),
+                    shape: fabricShapeToOutputShape(shapes[shapeId].shape, shapes[shapeId].type, imageSize),
                     coords: fabricShapeToOutputCoords(shapes[shapeId].shape, shapes[shapeId].shape.type, imageSize),
                 });
             }),