@evergis/charts 2.0.63 → 2.0.64

package/dist/charts.cjs.development.js

@@ -1987,7 +1987,7 @@ const barChartClassNames = /*#__PURE__*/_extends({
   barChartGridLineY: 'barChartGridLineY',
   barChartSelection: 'barChartSelection'
 }, tooltipClassnames, labelClassnames, barChartLinesClassNames);
-const SvgWrapper$4 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: ", ";\n  user-select: ", ";\n  cursor: ", ";\n  \n  line {\n    stroke-width: 1px;\n    shape-rendering: crispEdges;\n  }\n  \n  .", ",\n    .", " {\n    stroke: rgba(48, 69, 79, 0.06);\n  }\n  \n  .", " {\n  }\n  \n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n  \n  .", " {\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n  \n  .", " {\n    shape-rendering: auto;\n  }\n  \n  .", " {\n    fill-opacity: 0.24;\n  }\n  \n  .", " {\n    position: absolute;\n    top: 0;\n    width: 0;\n    background: rgba(0, 170, 255, 0.06);\n    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;\n    pointer-events: none;\n  }\n"])), _ref => {
+const SvgWrapper$4 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: ", ";\n  user-select: ", ";\n  cursor: ", ";\n  width: ", ";\n  \n  line {\n    stroke-width: 1px;\n    shape-rendering: crispEdges;\n  }\n  \n  .", ",\n    .", " {\n    stroke: rgba(48, 69, 79, 0.06);\n  }\n  \n  .", " {\n  }\n  \n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n  \n  .", " {\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n  \n  .", " {\n    shape-rendering: auto;\n  }\n  \n  .", " {\n    fill-opacity: 0.24;\n  }\n  \n  .", " {\n    position: absolute;\n    top: 0;\n    width: 0;\n    background: rgba(0, 170, 255, 0.06);\n    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;\n    pointer-events: none;\n  }\n"])), _ref => {
   let {
     selectable
   } = _ref;
@@ -2002,6 +2002,11 @@ const SvgWrapper$4 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$a ||
     selectable
   } = _ref3;
   return selectable && "crosshair";
+}, _ref4 => {
+  let {
+    selectable
+  } = _ref4;
+  return selectable && "auto";
 }, barChartClassNames.barChartGridLineX, barChartClassNames.barChartGridLineY, barChartClassNames.barChartMouseRect, barChartClassNames.barChartMouseRect, barChartClassNames.barChartLinesGlobal, barChartClassNames.barChartLine, barChartClassNames.barChartArea, barChartClassNames.barChartSelection);
 const TooltipStyles$1 = /*#__PURE__*/styled.createGlobalStyle(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", " {\n    z-index: 1;\n    transition: all linear 144ms;\n\n    .", " {\n      margin-bottom: 4px;\n      :last-of-type {\n        margin-bottom: 0;\n      }\n    }\n  }\n"])), barChartClassNames.barChartMouseTooltip, barChartClassNames.barChartTooltipItem);
 
@@ -2054,7 +2059,7 @@ const useSelection = (node, props) => {
       }
     }
   }, [node]);
-  const onMouseMove = React.useCallback(e => {
+  const onMouseLeave = React.useCallback(e => {
     if (drawing.current && node) {
       if (node.offsetLeft > e.pageX) {
         const nodeWidth = node.firstChild.getBoundingClientRect().width;
@@ -2062,11 +2067,16 @@ const useSelection = (node, props) => {
         selection.style.width = startX.current + "px";
         selection.style.marginLeft = "-" + startX.current + "px";
       }
+
+      if (node.offsetLeft + node.offsetWidth < e.pageX) {
+        const nodeWidth = node.firstChild.getBoundingClientRect().width;
+        selection.style.left = startX.current + "px";
+        selection.style.width = nodeWidth - startX.current + "px";
+        selection.style.marginLeft = "0px";
+      }
     }
   }, [node]);
-  const onStopDrawing = React.useCallback(e => {
-    e.stopPropagation();
-
+  const onStopDrawing = React.useCallback(() => {
     if (node) {
       const nodeWidth = node.firstChild.getBoundingClientRect().width;
       const selectionMinX = selection.offsetLeft >= 0 ? selection.offsetLeft <= nodeWidth ? selection.offsetLeft : nodeWidth : 0;
@@ -2098,9 +2108,10 @@ const useSelection = (node, props) => {
       node.addEventListener("touchstart", onStartDrawing);
       node.addEventListener("mousemove", onDraw);
       node.addEventListener("touchmove", onDraw);
-      document.addEventListener("mousemove", onMouseMove);
+      node.addEventListener("mouseleave", onMouseLeave);
+      node.addEventListener("mouseup", onStopDrawing);
+      node.addEventListener("touchend", onStopDrawing);
       document.addEventListener("mouseup", onStopDrawing);
-      document.addEventListener("touchend", onStopDrawing);
     }
 
     return () => {
@@ -2108,9 +2119,10 @@ const useSelection = (node, props) => {
       node == null ? void 0 : node.removeEventListener("touchstart", onStartDrawing);
       node == null ? void 0 : node.removeEventListener("mousemove", onDraw);
       node == null ? void 0 : node.removeEventListener("touchmove", onDraw);
-      document.removeEventListener("mousemove", onMouseMove);
+      node == null ? void 0 : node.removeEventListener("mouseleave", onMouseLeave);
+      node == null ? void 0 : node.removeEventListener("mouseup", onStopDrawing);
+      node == null ? void 0 : node.removeEventListener("touchend", onStopDrawing);
       document.removeEventListener("mouseup", onStopDrawing);
-      document.removeEventListener("touchend", onStopDrawing);
     };
   }, [node]);
 };