@abidibo/react-cam-roi 0.3.0 → 0.5.0

package/dist/index.esm.js

@@ -317,6 +317,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 {
@@ -384,6 +395,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 {
@@ -513,6 +529,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',
@@ -522,6 +539,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',
@@ -934,6 +953,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: activeColor,
+        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: point.fill,
+        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 = useState({ width: 0, height: 0 }), imageSize = _a[0], setImageSize = _a[1];
     useEffect(function () {
@@ -979,11 +1044,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: r.shape.color,
+                        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,
@@ -1006,7 +1094,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) {
@@ -1033,7 +1121,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) {
@@ -1059,7 +1147,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 });
@@ -1084,7 +1172,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 = useCallback(function () { return setShapes(__assign({}, shapes)); }, [shapes]);
+    var handleRefreshShapes = useCallback(function () { return setShapes(__assign({}, shapes)); }, [shapes]); // eslint-disable-line
     // Handler for selection cleared event to reset selected shapes state
     var handleSelectionCleared = useCallback(function () {
         Dispatcher.emit("canvas:".concat(editorId, ":shapeSelected"), null);
@@ -1111,6 +1199,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;
@@ -1211,6 +1304,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;
@@ -1344,27 +1444,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 = 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);
         }
     });
@@ -1546,6 +1637,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 (jsxs("svg", { style: style, width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("circle", { cx: "9.5", cy: "15.5", r: "4.5", fill: color }), 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 = useContext(UiContext), IconButton = _b.IconButton, themeMode = _b.themeMode, primaryColor = _b.primaryColor, Typography = _b.Typography, strings = _b.strings;
@@ -1553,12 +1649,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 (jsxs(Fragment, { children: [jsx("div", { className: css('toolbar', styles$1, themeMode), children: enableRois(configuration) && (jsxs(Fragment, { children: [jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }), (!hideForbiddenTools || polylineEnabled) && (jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) })), (!hideForbiddenTools || polygonEnabled) && (jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) })), (!hideForbiddenTools || rectangleEnabled) && (jsx(IconButton, { onClick: setTool("rect" /* ToolEnum.Rectangle */), disabled: !rectangleEnabled, children: jsx(RectangleIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) })), jsx(ColorPicker, { style: { marginLeft: 'auto', marginRight: '.5rem' } })] })) }), enableRois(configuration) && (jsx("div", { className: css('toolbar-helper', styles$1, themeMode), children: jsxs(Typography, { children: [strings[activeTool], ": ", strings["".concat(activeTool, "HelpText")]] }) }))] }));
+    return (jsxs(Fragment, { children: [jsx("div", { className: css('toolbar', styles$1, themeMode), children: enableRois(configuration) && (jsxs(Fragment, { children: [jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }), (!hideForbiddenTools || pointEnabled) && (jsx(IconButton, { onClick: setTool("point" /* ToolEnum.Point */), disabled: !pointEnabled, children: jsx(PointIcon, { color: iconColor("point" /* ToolEnum.Point */) }) })), (!hideForbiddenTools || polylineEnabled) && (jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) })), (!hideForbiddenTools || polygonEnabled) && (jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) })), (!hideForbiddenTools || rectangleEnabled) && (jsx(IconButton, { onClick: setTool("rect" /* ToolEnum.Rectangle */), disabled: !rectangleEnabled, children: jsx(RectangleIcon, { color: iconColor("rect" /* ToolEnum.Rectangle */) }) })), jsx(ColorPicker, { style: { marginLeft: 'auto', marginRight: '.5rem' } })] })) }), enableRois(configuration) && (jsx("div", { className: css('toolbar-helper', styles$1, themeMode), children: 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--"};
@@ -1571,12 +1669,9 @@ var TopBar = function () {
     var iconColor = themeMode === 'light' ? 'black' : 'white';
     var handleSubmitMetadata = function (data) {
         setMetadata(__assign(__assign({}, metadata), { parameters: data }));
-        console.log('SAVE', {
-            parameters: data,
-        }); // eslint-disable-line
         setForm({ isOpen: false });
     };
-    return (jsxs(Fragment, { children: [jsxs("div", { className: css('top-bar', styles, themeMode), children: [enableMainMetadata(configuration) && !((_a = configuration.options) === null || _a === void 0 ? void 0 : _a.viewMainParameters) && (jsxs(Button, { onClick: function () { return 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: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata }))] }), ((_b = configuration.options) === null || _b === void 0 ? void 0 : _b.viewMainParameters) && (jsxs("div", { className: css('main-parameters-view', styles, themeMode), children: [jsx("div", { className: css('main-parameters-button', styles, themeMode), children: jsxs(Button, { onClick: function () { return setForm({ isOpen: true }); }, children: [jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] }) }), jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata, readOnly: true, noModal: true })] }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: css('top-bar', styles, themeMode), children: [enableMainMetadata(configuration) && !((_a = configuration.options) === null || _a === void 0 ? void 0 : _a.viewMainParameters) && (jsxs(Button, { onClick: function () { return 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: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata }))] }), enableMainMetadata(configuration) && ((_b = configuration.options) === null || _b === void 0 ? void 0 : _b.viewMainParameters) && (jsxs("div", { className: css('main-parameters-view', styles, themeMode), children: [jsx("div", { className: css('main-parameters-button', styles, themeMode), children: jsxs(Button, { onClick: function () { return setForm({ isOpen: true }); }, children: [jsx(AnnotateIcon, { color: iconColor }), " ", strings.mainParametersMetadata] }) }), jsx(ParametersModalForm, { parameters: configuration.parameters, data: metadata.parameters, title: strings.mainParametersMetadata, onClose: function () { return setForm({ isOpen: false }); }, onSubmit: handleSubmitMetadata, readOnly: true, noModal: true })] }))] }));
 };
 
 // https://github.com/n-mazaheri/image-editor
@@ -1633,7 +1728,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),
                 });
             }),