@abidibo/react-cam-roi 0.14.0 → 0.14.2

package/dist/index.cjs.js

@@ -100,7 +100,15 @@ var log = function (level, enable) {
     return enable && console[level].apply(console, args);
 };
 var css = function (name, styles, themeMode) {
-    return "".concat(styles[name], " ").concat(styles["".concat(name, "-").concat(themeMode)], " react-cam-roi-").concat(name).concat(themeMode ? "react-cam-roi-".concat(name, "-").concat(themeMode) : '');
+    var parts = [];
+    if (styles[name])
+        parts.push(styles[name]);
+    if (styles["".concat(name, "-").concat(themeMode)])
+        parts.push(styles["".concat(name, "-").concat(themeMode)]);
+    parts.push("react-cam-roi-".concat(name));
+    if (themeMode)
+        parts.push("react-cam-roi-".concat(name, "-").concat(themeMode));
+    return parts.join(' ');
 };
 var humanize = function (str) {
     return str
@@ -1733,7 +1741,7 @@ var styles$1 = {"toolbar":"Toolbar-module_toolbar__ywNcv","toolbar-light":"Toolb
 
 var Toolbar = function (_a) {
     var _b;
-    var canvasRef = _a.canvasRef, imageSize = _a.imageSize;
+    var canvasRef = _a.canvasRef, canvasSize = _a.canvasSize;
     var _c = React.useContext(UiContext), IconButton = _c.IconButton, themeMode = _c.themeMode, primaryColor = _c.primaryColor, Typography = _c.Typography, strings = _c.strings, Tooltip = _c.Tooltip;
     var _d = useEditorContext(), activeTool = _d.activeTool, setActiveTool = _d.setActiveTool, configuration = _d.configuration, shapes = _d.shapes, editorId = _d.editorId, activeColor = _d.activeColor;
     var iconColor = function (tool) { return (tool === activeTool ? primaryColor : themeMode === 'light' ? 'black' : 'white'); };
@@ -1748,7 +1756,7 @@ var Toolbar = function (_a) {
     var handleRenderFullImagePolygon = function () {
         if (!canvasRef.current)
             return;
-        renderFullImagePolygon(editorId, canvasRef.current, activeColor, imageSize);
+        renderFullImagePolygon(editorId, canvasRef.current, activeColor, canvasSize);
     };
     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(Tooltip, { title: strings.selection, children: jsxRuntime.jsx(IconButton, { onClick: setTool("pointer" /* ToolEnum.Pointer */), children: jsxRuntime.jsx(PointerIcon, { color: iconColor("pointer" /* ToolEnum.Pointer */) }) }) }), (!hideForbiddenTools || pointEnabled) && (jsxRuntime.jsx(Tooltip, { title: strings.point, children: jsxRuntime.jsx(IconButton, { onClick: setTool("point" /* ToolEnum.Point */), disabled: !pointEnabled, children: jsxRuntime.jsx(PointIcon, { color: iconColor("point" /* ToolEnum.Point */) }) }) })), (!hideForbiddenTools || polylineEnabled) && (jsxRuntime.jsx(Tooltip, { title: strings.polyline, children: jsxRuntime.jsx(IconButton, { onClick: setTool("polyline" /* ToolEnum.Polyline */), disabled: !polylineEnabled, children: jsxRuntime.jsx(PolylineIcon, { color: iconColor("polyline" /* ToolEnum.Polyline */) }) }) })), (!hideForbiddenTools || polygonEnabled) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { title: strings.polygon, children: jsxRuntime.jsx(IconButton, { onClick: setTool("polygon" /* ToolEnum.Polygon */), disabled: !polygonEnabled, children: jsxRuntime.jsx(PolygonIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) }) }), jsxRuntime.jsx(Tooltip, { title: strings.fullImage, children: jsxRuntime.jsx(IconButton, { onClick: handleRenderFullImagePolygon, disabled: !polygonEnabled, children: jsxRuntime.jsx(FullRoiIcon, { color: iconColor("polygon" /* ToolEnum.Polygon */) }) }) })] })), (!hideForbiddenTools || rectangleEnabled) && (jsxRuntime.jsx(Tooltip, { title: strings.rect, children: 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")]] }) }))] }));
 };
@@ -1857,11 +1865,12 @@ var RoiEditor = function (_a) {
     }, [onSubmit, configuration, shapes, metadata, prepareOutput, strings, notify, presetName, presetDescription]);
     log('info', enableLogs, 'react-cam-roi', 'active tool', activeTool);
     log('info', enableLogs, 'react-cam-roi', 'canvas size', canvasSize);
+    log('info', enableLogs, 'react-cam-roi', 'image size', imageSize);
     log('info', enableLogs, 'react-cam-roi', 'metadata', metadata);
     if (!isReady) {
         return jsxRuntime.jsx(Loader, {});
     }
-    return (jsxRuntime.jsx(EditorProvider, { editorId: editorId, hideForbiddenTools: (_f = (_e = configuration.options) === null || _e === void 0 ? void 0 : _e.hideForbiddenTools) !== null && _f !== void 0 ? _f : false, activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, presetName: presetName, setPresetName: setPresetName, presetDescription: presetDescription, setPresetDescription: setPresetDescription, shapes: shapes, setShapes: setShapes, addShape: addShape, addShapes: addShapes, removeShape: removeShape, configuration: configuration, metadata: metadata, setMetadata: setMetadata, onSubmit: handleSubmit, children: jsxRuntime.jsxs("div", { style: { maxWidth: '100%', width: "".concat(imageSize.width, "px") }, ref: wrapperRef, children: [jsxRuntime.jsx(TopBar, {}), configuration.rois && configuration.rois.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(slots === null || slots === void 0 ? void 0 : slots.roiAbove) && slots.roiAbove, jsxRuntime.jsxs("div", { className: css('rois-wrapper', styles$5, themeMode), children: [jsxRuntime.jsx(Header, {}), jsxRuntime.jsx(Toolbar, { canvasRef: canvasRef, imageSize: imageSize }), jsxRuntime.jsx("div", { className: css('canvas-wrapper', styles$5, themeMode), style: {
+    return (jsxRuntime.jsx(EditorProvider, { editorId: editorId, hideForbiddenTools: (_f = (_e = configuration.options) === null || _e === void 0 ? void 0 : _e.hideForbiddenTools) !== null && _f !== void 0 ? _f : false, activeTool: activeTool, setActiveTool: setActiveTool, activeColor: activeColor, setActiveColor: setActiveColor, presetName: presetName, setPresetName: setPresetName, presetDescription: presetDescription, setPresetDescription: setPresetDescription, shapes: shapes, setShapes: setShapes, addShape: addShape, addShapes: addShapes, removeShape: removeShape, configuration: configuration, metadata: metadata, setMetadata: setMetadata, onSubmit: handleSubmit, children: jsxRuntime.jsxs("div", { style: { maxWidth: '100%', width: "".concat(imageSize.width, "px") }, ref: wrapperRef, children: [jsxRuntime.jsx(TopBar, {}), configuration.rois && configuration.rois.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(slots === null || slots === void 0 ? void 0 : slots.roiAbove) && slots.roiAbove, jsxRuntime.jsxs("div", { className: css('rois-wrapper', styles$5, themeMode), children: [jsxRuntime.jsx(Header, {}), jsxRuntime.jsx(Toolbar, { canvasRef: canvasRef, canvasSize: canvasSize }), jsxRuntime.jsx("div", { className: css('canvas-wrapper', styles$5, themeMode), style: {
                                         width: "".concat(canvasSize.width, "px"),
                                         height: "".concat(canvasSize.height, "px"),
                                         backgroundImage: "url(".concat(imageUrl, ")"),