@evergis/charts 2.0.63 → 2.0.65

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,32 +2002,41 @@ 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);
 
 const useSelection = (node, props) => {
   const drawing = React.useRef(false);
   const startX = React.useRef(0);
-  const selection = document.createElement("div");
+  const selection = React.useRef();
   const onStartDrawing = React.useCallback(e => {
     const isTouch = Boolean(e.touches);
     e.stopPropagation();
 
-    if (node) {
-      var _e$touches$;
+    if (node && e.which !== 3) {
+      var _props$margin$bottom, _props$margin, _e$touches$;
 
+      selection.current = document.createElement("div");
+      selection.current.setAttribute("class", barChartClassNames.barChartSelection);
+      selection.current.setAttribute("style", "height: calc(100% - " + ((_props$margin$bottom = (_props$margin = props.margin) == null ? void 0 : _props$margin.bottom) != null ? _props$margin$bottom : 0) + "px)");
+      node.appendChild(selection.current);
       drawing.current = true;
       startX.current = isTouch ? ((_e$touches$ = e.touches[0]) == null ? void 0 : _e$touches$.pageX) - node.firstChild.getBoundingClientRect().left : e.offsetX;
-      selection.style.display = "block";
-      selection.style.width = "0px";
-      selection.style.left = startX.current + "px";
+      selection.current.style.display = "block";
+      selection.current.style.width = "0px";
+      selection.current.style.left = startX.current + "px";
     }
   }, [node]);
   const onDraw = React.useCallback(e => {
     const isTouch = Boolean(e.touches);
     e.stopPropagation();
 
-    if (node && drawing.current) {
+    if (node && drawing.current && selection.current) {
       var _e$touches$2;
 
       const nodeWidth = node.firstChild.getBoundingClientRect().width;
@@ -2036,42 +2045,47 @@ const useSelection = (node, props) => {
 
       if (offsetX >= 0) {
         if (newWidth > 0) {
-          selection.style.marginLeft = "0px";
-          selection.style.width = offsetX <= nodeWidth ? newWidth + "px" : nodeWidth - startX.current + "px";
+          selection.current.style.marginLeft = "0px";
+          selection.current.style.width = offsetX <= nodeWidth ? newWidth + "px" : nodeWidth - startX.current + "px";
         } else {
-          selection.style.right = nodeWidth - startX.current + "px";
-          selection.style.width = Math.abs(newWidth) + "px";
-          selection.style.marginLeft = newWidth + "px";
+          selection.current.style.right = nodeWidth - startX.current + "px";
+          selection.current.style.width = Math.abs(newWidth) + "px";
+          selection.current.style.marginLeft = newWidth + "px";
         }
       }
 
       if (isTouch) {
         if (node.offsetLeft > e.touches[0].pageX) {
-          selection.style.right = nodeWidth - startX.current + "px";
-          selection.style.width = startX.current + "px";
-          selection.style.marginLeft = "-" + startX.current + "px";
+          selection.current.style.right = nodeWidth - startX.current + "px";
+          selection.current.style.width = startX.current + "px";
+          selection.current.style.marginLeft = "-" + startX.current + "px";
         }
       }
     }
   }, [node]);
-  const onMouseMove = React.useCallback(e => {
-    if (drawing.current && node) {
+  const onMouseLeave = React.useCallback(e => {
+    if (drawing.current && node && selection.current) {
       if (node.offsetLeft > e.pageX) {
         const nodeWidth = node.firstChild.getBoundingClientRect().width;
-        selection.style.right = nodeWidth - startX.current + "px";
-        selection.style.width = startX.current + "px";
-        selection.style.marginLeft = "-" + startX.current + "px";
+        selection.current.style.right = nodeWidth - startX.current + "px";
+        selection.current.style.width = startX.current + "px";
+        selection.current.style.marginLeft = "-" + startX.current + "px";
+      }
+
+      if (node.offsetLeft + node.offsetWidth < e.pageX) {
+        const nodeWidth = node.firstChild.getBoundingClientRect().width;
+        selection.current.style.left = startX.current + "px";
+        selection.current.style.width = nodeWidth - startX.current + "px";
+        selection.current.style.marginLeft = "0px";
       }
     }
   }, [node]);
-  const onStopDrawing = React.useCallback(e => {
-    e.stopPropagation();
-
-    if (node) {
+  const onStopDrawing = React.useCallback(() => {
+    if (node && selection.current) {
       const nodeWidth = node.firstChild.getBoundingClientRect().width;
-      const selectionMinX = selection.offsetLeft >= 0 ? selection.offsetLeft <= nodeWidth ? selection.offsetLeft : nodeWidth : 0;
-      const selectionWidth = selection.getBoundingClientRect().right - selection.getBoundingClientRect().left;
-      const selectionMaxX = selection.offsetLeft + selectionWidth <= nodeWidth ? selection.offsetLeft + selectionWidth >= 0 ? selection.offsetLeft + selectionWidth : 0 : nodeWidth;
+      const selectionMinX = selection.current.offsetLeft >= 0 ? selection.current.offsetLeft <= nodeWidth ? selection.current.offsetLeft : nodeWidth : 0;
+      const selectionWidth = selection.current.getBoundingClientRect().right - selection.current.getBoundingClientRect().left;
+      const selectionMaxX = selection.current.offsetLeft + selectionWidth <= nodeWidth ? selection.current.offsetLeft + selectionWidth >= 0 ? selection.current.offsetLeft + selectionWidth : 0 : nodeWidth;
       const min = Math.round(selectionMinX);
       const max = Math.round(selectionMaxX);
 
@@ -2080,27 +2094,23 @@ const useSelection = (node, props) => {
       }
 
       drawing.current = false;
-      selection.style.display = "none";
+      node.removeChild(selection.current);
+      selection.current = undefined;
     }
   }, [node]);
   React.useEffect(() => {
     if (node) {
-      var _props$margin$bottom, _props$margin;
-
-      selection.setAttribute("class", barChartClassNames.barChartSelection);
-      selection.setAttribute("style", "height: calc(100% - " + ((_props$margin$bottom = (_props$margin = props.margin) == null ? void 0 : _props$margin.bottom) != null ? _props$margin$bottom : 0) + "px)");
-      selection.style.display = "none";
       node.childNodes.forEach(child => {
         child.style.userSelect = "none";
       });
-      node.appendChild(selection);
       node.addEventListener("mousedown", onStartDrawing);
       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 +2118,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]);
 };