@evergis/charts 2.0.64 → 2.0.65

package/dist/charts.cjs.development.js

@@ -2013,26 +2013,30 @@ const TooltipStyles$1 = /*#__PURE__*/styled.createGlobalStyle(_templateObject2$4
 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;
@@ -2041,47 +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 onMouseLeave = React.useCallback(e => {
-    if (drawing.current && node) {
+    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.style.left = startX.current + "px";
-        selection.style.width = nodeWidth - startX.current + "px";
-        selection.style.marginLeft = "0px";
+        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(() => {
-    if (node) {
+    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);
 
@@ -2090,20 +2094,15 @@ 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);