@easyv/charts 1.10.7 → 1.10.9

package/lib/components/CartesianChart.js

@@ -261,15 +261,20 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }, [tickName, JSON.stringify(originData)]);
   var showTooltip = !!(tooltipData && tooltipData.length && (auto || manual));
   var isVertical = axisX.direction === "vertical";
-  var indicatorWidth = indicator.width * (control ? axisX.controlStep : axisX.step) / 100;
-  var position = axisX.scaler(tickName) - indicatorWidth / 2;
+  var axisStep = control ? axisX.controlStep : axisX.step;
+  var safeAxisStep = Number.isFinite(axisStep) ? axisStep : 0;
+  var indicatorWidth = indicator.width * safeAxisStep / 100;
+  var safeIndicatorWidth = Number.isFinite(indicatorWidth) ? indicatorWidth : 0;
+  var tickPos = axisX.scaler(tickName);
+  var safeTickPos = Number.isFinite(tickPos) ? tickPos : 0;
+  var position = safeTickPos - safeIndicatorWidth / 2;
   var indicatorAttr = isVertical ? {
     width: chartWidth,
-    height: indicatorWidth,
+    height: safeIndicatorWidth,
     y: position
   } : {
     height: yLineRange,
-    width: indicatorWidth,
+    width: safeIndicatorWidth,
     x: position
   };
   var onInteraction = (0, _react.useCallback)(function (e, type) {
@@ -353,15 +358,18 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     if (controlEl.current) {
       controlEl.current.style.transform = "translate(".concat(cBarX, "px,0)");
       //计算出当前位移的百分比
-      var percent = cBarX / (cWidth - cBarWidth);
-      percent = isNaN(percent) ? 1 : percent;
-      var translateX = -(controlEnd + start / cPercent - chartWidth) * percent;
+      var slideRange = cWidth - cBarWidth;
+      var percent = slideRange > 0 ? cBarX / slideRange : 0;
+      if (!Number.isFinite(percent)) percent = 0;
+      var safeCPercent = cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
+      var span = controlEnd + start / safeCPercent - chartWidth;
+      var translateX = Number.isFinite(span) ? -span * percent : 0;
       curControlPercent.current = percent;
-      setClipX(-translateX);
+      setClipX(Number.isFinite(-translateX) ? -translateX : 0);
       var _isVertical = axisX.direction === "vertical";
       var coreOffset = _isVertical ? marginRight : isIOS ? marginLeft : 0;
       seriesEl.current.style.transform = "translate(".concat(translateX + coreOffset, "px,").concat(marginTop, "px)");
-      axisElList.current[2].style.transform = "translate(".concat(translateX, "px,", 0, "px)");
+      axisElList.current[2] && (axisElList.current[2].style.transform = "translate(".concat(translateX, "px,", 0, "px)"));
     }
   }, [controlInfo]);
   //控制条轮播动画
@@ -457,6 +465,11 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   });
   var bodyWidth = isVertical ? xLineRange + 100 + marginRight + marginLeft : xLineRange,
     bodyHeight = isVertical ? yLineRange : yLineRange + marginTop + marginBottom;
+  var controlTooltipSpan = function () {
+    var p = cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
+    var s = axisX.controlEnd + axisX.start / p - chartWidth;
+    return Number.isFinite(s) ? s : 0;
+  }();
   var hasDuplicateX = function hasDuplicateX(data) {
     var xValues = new Set();
     var _iterator = _createForOfIteratorHelper(data),
@@ -607,19 +620,21 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }, /*#__PURE__*/_react["default"].createElement("rect", {
     x: clipX,
     y: -marginTop,
-    width: xLineRange,
+    width: bodyWidth,
     height: yLineRange + marginTop,
     fill: "transparent"
   }))), /*#__PURE__*/_react["default"].createElement("g", {
     clipPath: "url(#chart-clip-".concat(id, ")")
   }, /*#__PURE__*/_react["default"].createElement("g", null, control && zIndex == "bottom" && ctlIndicatorList.map(function (item, index) {
-    var x = axisX.scaler(item.tick);
+    var xRaw = axisX.scaler(item.tick);
+    var x = Number.isFinite(xRaw) ? xRaw : 0;
+    var iw = safeIndicatorWidth;
     return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
       key: index
     }, indicator, {
       height: yLineRange,
-      width: indicatorWidth,
-      x: x - indicatorWidth / 2,
+      width: iw,
+      x: x - iw / 2,
       isControlChart: !!control,
       xName: item.tick,
       setCtlTip: setCtlTip,
@@ -669,13 +684,15 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       isControlChart: !!control
     }));
   }), /*#__PURE__*/_react["default"].createElement("g", null, control && zIndex != "bottom" && ctlIndicatorList.map(function (item, index) {
-    var x = axisX.scaler(item.tick);
+    var xRaw = axisX.scaler(item.tick);
+    var x = Number.isFinite(xRaw) ? xRaw : 0;
+    var iw = safeIndicatorWidth;
     return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
       key: index
     }, indicator, {
       height: yLineRange,
-      width: indicatorWidth,
-      x: x - indicatorWidth / 2,
+      width: iw,
+      x: x - iw / 2,
       isControlChart: !!control,
       xName: item.tick,
       setCtlTip: setCtlTip,
@@ -686,7 +703,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     isVertical: isVertical
   }, tooltip, {
     data: controlChartTooltipData,
-    x: ctlX - marginLeft - (axisX.controlEnd + axisX.start / cPercent - chartWidth) * curControlPercent.current,
+    x: (Number.isFinite(ctlX) ? ctlX : 0) - marginLeft - controlTooltipSpan * curControlPercent.current,
     marginLeft: marginLeft,
     marginTop: marginTop,
     tickName: ctlXName,

package/lib/components/Legend.js

@@ -289,28 +289,28 @@ var getPosition = function getPosition(position, alignment) {
   switch (position) {
     case "top":
       return {
-        left: alignment == "left" ? -5 : alignment == "center" ? "50%" : "",
-        right: alignment == "right" ? -10 : "",
+        left: alignment == "left" ? 0 : alignment == "center" ? "50%" : "",
+        right: alignment == "right" ? 0 : "",
         top: 5,
         transform: "translate3d(calc(".concat(alignment == "center" ? "-50%" : "0px", " + ").concat(x, "px), ").concat(y, "px, 0px)")
       };
     case "right":
       return {
         top: "50%",
-        right: -10,
+        right: 0,
         transform: "translate3d(".concat(x, "px, calc(-50% + ").concat(y, "px), 0px)")
       };
     case "left":
       return {
         top: "50%",
-        left: -5,
+        left: 0,
         transform: "translate3d(".concat(x, "px, calc(-50% + ").concat(y, "px), 0px)")
       };
     default:
       // bottom
       return {
-        left: alignment == "left" ? -5 : alignment == "center" ? "50%" : "",
-        right: alignment == "right" ? -10 : "",
+        left: alignment == "left" ? 0 : alignment == "center" ? "50%" : "",
+        right: alignment == "right" ? 0 : "",
         bottom: 5,
         transform: "translate3d(calc(".concat(alignment == "center" ? "-50%" : "0px", " + ").concat(x, "px), ").concat(y, "px, 0px)")
       };

package/lib/components/Line.js

@@ -77,8 +77,8 @@ var Area = function Area(_ref) {
       opacity: Areaopacity
     },
     stroke: "none",
-    fill: 'url(#' + id + ')'
-  }), /*#__PURE__*/_react["default"].createElement("defs", null, type && type == 'pattern' ? /*#__PURE__*/_react["default"].createElement("pattern", {
+    fill: "url(#" + id + ")"
+  }), /*#__PURE__*/_react["default"].createElement("defs", null, type && type == "pattern" ? /*#__PURE__*/_react["default"].createElement("pattern", {
     id: id,
     patternUnits: "userSpaceOnUse",
     width: patternW,
@@ -132,7 +132,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     return getLineData(sortData, connectNulls);
   }, [sortData, connectNulls]);
   var lineGen = (0, _react.useMemo)(function () {
-    var isVertical = direction === 'vertical';
+    var isVertical = direction === "vertical";
     var lineGen = (isVertical ? (0, _d3v.line)().y(function (_ref9) {
       var x = _ref9.data.x;
       return xScaler(x);
@@ -164,9 +164,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       pointerEvents: "none"
     },
     fill: "none",
-    strokeDasharray: lineType === 'dash' ? '3 3' : null,
+    strokeDasharray: lineType === "dash" ? "3 3" : null,
     strokeWidth: lineWidth
-  }), type == 'area' && /*#__PURE__*/_react["default"].createElement(Area, {
+  }), type == "area" && /*#__PURE__*/_react["default"].createElement(Area, {
     data: _data,
     config: _objectSpread(_objectSpread({}, area), {}, {
       curve: curve,

package/lib/hooks/useAxes.js

@@ -310,7 +310,7 @@ var _default = exports["default"] = function _default(_ref) {
           end: end,
           clipAxisRange: clipAxisRange,
           lengthWithoutPaddingOuter: lengthWithoutPaddingOuter,
-          step: [lengthWithoutPaddingOuter / clipAxisAllTicks[0].length, lengthWithoutPaddingOuter / clipAxisAllTicks[1].length],
+          step: [clipAxisAllTicks[0].length > 0 ? lengthWithoutPaddingOuter / clipAxisAllTicks[0].length : 0, clipAxisAllTicks[1].length > 0 ? lengthWithoutPaddingOuter / clipAxisAllTicks[1].length : 0],
           allTicks: clipAxisAllTicks,
           ticks: clipAxisTicks,
           clipValue: clipValue
@@ -372,14 +372,19 @@ var _default = exports["default"] = function _default(_ref) {
         //     }
         //   }
         // }
-        var _step2 = _lengthWithoutPaddingOuter / allTicks.length;
+        var tickLen = allTicks.length;
+        var _step2 = tickLen > 0 ? _lengthWithoutPaddingOuter / tickLen : 0;
         var controlCfg = {
           controlStep: 0,
           controlDragScaler: null
         };
         if (isC) {
-          controlCfg.controlStep = _step2 / cPercent;
-          controlCfg.controlDragScaler = scaler.copy().range([_start / cPercent, _end / cPercent]);
+          if (tickLen > 0 && cPercent > 0) {
+            controlCfg.controlStep = _step2 / cPercent;
+            controlCfg.controlDragScaler = scaler.copy().range([_start / cPercent, _end / cPercent]);
+          } else {
+            controlCfg.controlDragScaler = scaler.copy();
+          }
           var _getChartsConfig3 = getChartsConfig(orientation, cWidth, height, paddingOuter),
             start_ = _getChartsConfig3.start,
             end_ = _getChartsConfig3.end,
@@ -390,7 +395,7 @@ var _default = exports["default"] = function _default(_ref) {
           scaler = scales[type]().domain(newDomain).range(_range);
           scaler.type = type;
           var controlOuter = len - outer;
-          _step2 = controlOuter / allTicks.length;
+          _step2 = tickLen > 0 ? controlOuter / tickLen : 0;
         }
         tmp.set(axisType, _objectSpread(_objectSpread(_objectSpread({}, item), {}, {
           count: _count,

package/lib/hooks/useCarouselAxisX.js

@@ -17,11 +17,11 @@ var initialState = {
   flag: false // 首次加载标识：true-首次加载不执行动画，false-可执行轮播
 };
 
-/**
- * x轴滚动逻辑
- * @param {Object} axis x轴配置项
- * @param {Object} config x轴轮播动画的配置项
- * @returns {Map} 返回更新后的x轴配置（ticks/scaler/range 变更）
+/**
+ * x轴滚动逻辑
+ * @param {Object} axis x轴配置项
+ * @param {Object} config x轴轮播动画的配置项
+ * @returns {Map} 返回更新后的x轴配置（ticks/scaler/range 变更）
  */
 var _default = exports["default"] = function _default(axis, config, isHover, controlInfo, active) {
   var show = config.show,
@@ -40,11 +40,11 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
     lengthWithoutPaddingOuter = axis.lengthWithoutPaddingOuter;
   var tickLength = ticks.length;
   var tickCount = isC ? allTicks.length : count;
-  var scale = isC ? cPercent : 1;
+  var scale = isC && cPercent > 0 ? cPercent : 1;
   var _start = start / scale;
   var _end = end / scale;
   var canCarousel = (0, _react.useMemo)(function () {
-    return show && active && tickLength > tickCount;
+    return show && active && tickCount > 0 && tickLength > tickCount;
   }, [show, active, tickLength, tickCount]);
   var _useState = (0, _react.useState)({
       scaler: scaler,
@@ -120,7 +120,7 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
 
   // 初始化：仅在基础条件变化时设置初始索引
   (0, _react.useEffect)(function () {
-    if (show && tickLength > tickCount) {
+    if (show && tickCount > 0 && tickLength > tickCount) {
       setStatus({
         currentIndex: 0,
         flag: true
@@ -137,10 +137,11 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
 
     // 执行条件：显示、非hover暂停、激活、有足够的轮播项
     var canRun = canCarousel && !(latest.hover && hoverRef.current);
-    if (currentIndex !== null && canRun) {
+    if (currentIndex !== null && canRun && latest.tickCount > 0) {
       if (flag) {
         // 首次加载：仅初始化视图，不执行动画
         var _step = latest.lengthWithoutPaddingOuter / latest.tickCount;
+        if (!Number.isFinite(_step)) return;
         var _ticks = latest.allTicks.slice(currentIndex, latest.tickCount);
         setState({
           step: _step,
@@ -168,6 +169,7 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
         // 非首次加载：执行动画 + 后续逻辑
         if (!ready) return;
         var _step2 = latest.lengthWithoutPaddingOuter / latest.tickCount;
+        if (!Number.isFinite(_step2)) return;
         animation = (0, _popmotion.animate)({
           from: 0,
           to: -1,
@@ -278,7 +280,7 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
     setReady(true);
     setStatus(function () {
       // 与初始化 effect 保持一致：只要满足条件就从 0 开始重新初始化
-      if (show && active && tickLength > tickCount) {
+      if (show && active && tickCount > 0 && tickLength > tickCount) {
         return {
           currentIndex: 0,
           flag: true
@@ -294,12 +296,12 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
     controlEnd: _end
   });
 };
-/**
- * 获取指定索引范围的ticks（支持循环）
- * @param {Array} ticks 所有ticks
- * @param {number} currentIndex 当前起始索引
- * @param {number} length 需要的长度
- * @returns {Array} 目标ticks数组
+/**
+ * 获取指定索引范围的ticks（支持循环）
+ * @param {Array} ticks 所有ticks
+ * @param {number} currentIndex 当前起始索引
+ * @param {number} length 需要的长度
+ * @returns {Array} 目标ticks数组
  */
 var getTicks = function getTicks(ticks, currentIndex, length) {
   var _currentIndex = +currentIndex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.10.7",
+  "version": "1.10.9",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -55,4 +55,4 @@
       "commit": true
     }
   }
-}
+}

package/src/components/CartesianChart.js

@@ -252,14 +252,20 @@ const Chart = memo(
 
     const isVertical = axisX.direction === "vertical";
 
-    const indicatorWidth =
-      (indicator.width * (control ? axisX.controlStep : axisX.step)) / 100;
-    const position = axisX.scaler(tickName) - indicatorWidth / 2;
+    const axisStep = control ? axisX.controlStep : axisX.step;
+    const safeAxisStep = Number.isFinite(axisStep) ? axisStep : 0;
+    const indicatorWidth = (indicator.width * safeAxisStep) / 100;
+    const safeIndicatorWidth = Number.isFinite(indicatorWidth)
+      ? indicatorWidth
+      : 0;
+    const tickPos = axisX.scaler(tickName);
+    const safeTickPos = Number.isFinite(tickPos) ? tickPos : 0;
+    const position = safeTickPos - safeIndicatorWidth / 2;
     const indicatorAttr = isVertical
-      ? { width: chartWidth, height: indicatorWidth, y: position }
+      ? { width: chartWidth, height: safeIndicatorWidth, y: position }
       : {
           height: yLineRange,
-          width: indicatorWidth,
+          width: safeIndicatorWidth,
           x: position,
         };
 
@@ -341,18 +347,22 @@ const Chart = memo(
       if (controlEl.current) {
         controlEl.current.style.transform = `translate(${cBarX}px,0)`;
         //计算出当前位移的百分比
-        let percent = cBarX / (cWidth - cBarWidth);
-        percent = isNaN(percent) ? 1 : percent;
-        const translateX =
-          -(controlEnd + start / cPercent - chartWidth) * percent;
+        const slideRange = cWidth - cBarWidth;
+        let percent = slideRange > 0 ? cBarX / slideRange : 0;
+        if (!Number.isFinite(percent)) percent = 0;
+        const safeCPercent =
+          cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
+        const span = controlEnd + start / safeCPercent - chartWidth;
+        const translateX = Number.isFinite(span) ? -span * percent : 0;
         curControlPercent.current = percent;
-        setClipX(-translateX);
+        setClipX(Number.isFinite(-translateX) ? -translateX : 0);
         const isVertical = axisX.direction === "vertical";
         const coreOffset = isVertical ? marginRight : isIOS ? marginLeft : 0;
         seriesEl.current.style.transform = `translate(${
           translateX + coreOffset
         }px,${marginTop}px)`;
-        axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
+        axisElList.current[2] &&
+          (axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`);
       }
     }, [controlInfo]);
     //控制条轮播动画
@@ -465,6 +475,11 @@ const Chart = memo(
       bodyHeight = isVertical
         ? yLineRange
         : yLineRange + marginTop + marginBottom;
+    const controlTooltipSpan = (() => {
+      const p = cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
+      const s = axisX.controlEnd + axisX.start / p - chartWidth;
+      return Number.isFinite(s) ? s : 0;
+    })();
     const hasDuplicateX = (data) => {
       const xValues = new Set();
       for (const item of data) {
@@ -609,7 +624,7 @@ const Chart = memo(
                   <rect
                     x={clipX}
                     y={-marginTop}
-                    width={xLineRange}
+                    width={bodyWidth}
                     height={yLineRange + marginTop}
                     fill="transparent"
                   />
@@ -624,15 +639,17 @@ const Chart = memo(
                   {control &&
                     zIndex == "bottom" &&
                     ctlIndicatorList.map((item, index) => {
-                      const x = axisX.scaler(item.tick);
+                      const xRaw = axisX.scaler(item.tick);
+                      const x = Number.isFinite(xRaw) ? xRaw : 0;
+                      const iw = safeIndicatorWidth;
                       return (
                         <Indicator
                           key={index}
                           {...indicator}
                           {...{
                             height: yLineRange,
-                            width: indicatorWidth,
-                            x: x - indicatorWidth / 2,
+                            width: iw,
+                            x: x - iw / 2,
                           }}
                           isControlChart={!!control}
                           xName={item.tick}
@@ -695,15 +712,17 @@ const Chart = memo(
                   {control &&
                     zIndex != "bottom" &&
                     ctlIndicatorList.map((item, index) => {
-                      const x = axisX.scaler(item.tick);
+                      const xRaw = axisX.scaler(item.tick);
+                      const x = Number.isFinite(xRaw) ? xRaw : 0;
+                      const iw = safeIndicatorWidth;
                       return (
                         <Indicator
                           key={index}
                           {...indicator}
                           {...{
                             height: yLineRange,
-                            width: indicatorWidth,
-                            x: x - indicatorWidth / 2,
+                            width: iw,
+                            x: x - iw / 2,
                           }}
                           isControlChart={!!control}
                           xName={item.tick}
@@ -723,10 +742,9 @@ const Chart = memo(
                 {...tooltip}
                 data={controlChartTooltipData}
                 x={
-                  ctlX -
+                  (Number.isFinite(ctlX) ? ctlX : 0) -
                   marginLeft -
-                  (axisX.controlEnd + axisX.start / cPercent - chartWidth) *
-                    curControlPercent.current
+                  controlTooltipSpan * curControlPercent.current
                 }
                 marginLeft={marginLeft}
                 marginTop={marginTop}

package/src/components/Legend.js

@@ -94,7 +94,7 @@ export default memo(
         filterData && interactive && filterData(fieldName || name);
         pieClick && pieClick(e);
       },
-      [interactive, filterData, pieClick]
+      [interactive, filterData, pieClick],
     );
 
     if (judge == 0) {
@@ -123,10 +123,10 @@ export default memo(
           getCanvasTextWidth(
             getValueStr(item),
             valueFont.letterSpacing || 0,
-            `${valueFont.fontSize || 12}px ${valueFont.fontFamily || "Arial"}`
-          )
-        )
-      )
+            `${valueFont.fontSize || 12}px ${valueFont.fontFamily || "Arial"}`,
+          ),
+        ),
+      ),
     );
     const percentMaxWidth = Math.max(
       ..._series.map((item) => {
@@ -139,10 +139,10 @@ export default memo(
             percentFont.letterSpacing || 0,
             `${percentFont.fontSize || 12}px ${
               percentFont.fontFamily || "Arial"
-            }`
-          )
+            }`,
+          ),
         );
-      })
+      }),
     );
     const nameMaxWidth = config.name?.maxWidth || 80;
 
@@ -157,10 +157,10 @@ export default memo(
                 ? "flex-start"
                 : "flex-end"
               : alignment.split(" ")[0] == "left"
-              ? "flex-start"
-              : alignment.split(" ")[0] == "center"
-              ? "center"
-              : "flex-end",
+                ? "flex-start"
+                : alignment.split(" ")[0] == "center"
+                  ? "center"
+                  : "flex-end",
           flexDirection: "column",
           position: "absolute",
           ...getPosition(position, _alignment, x, y),
@@ -179,10 +179,10 @@ export default memo(
                 ? "flex-start"
                 : "flex-end"
               : alignment.split(" ")[0] == "left"
-              ? "flex-start"
-              : alignment.split(" ")[0] == "center"
-              ? "center"
-              : "flex-end",
+                ? "flex-start"
+                : alignment.split(" ")[0] == "center"
+                  ? "center"
+                  : "flex-end",
           flexDirection: "column",
           position: "absolute",
           ...getPosition(position, _alignment, x, y),
@@ -280,8 +280,8 @@ export default memo(
                   alignment.split(" ")[0] == "left"
                     ? "flex-start"
                     : alignment.split(" ")[0] == "center"
-                    ? "center"
-                    : "flex-end",
+                      ? "center"
+                      : "flex-end",
                 marginBottom: "0px",
                 gap: `${gridRowGap}px  ${gridColumnGap}px`,
                 marginBottom: gridRowGap + "px",
@@ -337,7 +337,7 @@ export default memo(
                                       name.substring(0, 5)
                                   : "",
                                 font.letterSpacing,
-                                `${font.fontSize}px ${font.fontFamily}`
+                                `${font.fontSize}px ${font.fontFamily}`,
                               ),
                             }}
                             speed={speed}
@@ -349,19 +349,19 @@ export default memo(
                 }
               })}
             </ul>
-          )
+          ),
         )}
       </div>
     );
-  }
+  },
 );
 
 const getPosition = (position, alignment, x = 0, y = 0) => {
   switch (position) {
     case "top":
       return {
-        left: alignment == "left" ? -5 : alignment == "center" ? "50%" : "",
-        right: alignment == "right" ? -10 : "",
+        left: alignment == "left" ? 0 : alignment == "center" ? "50%" : "",
+        right: alignment == "right" ? 0 : "",
         top: 5,
         transform: `translate3d(calc(${
           alignment == "center" ? "-50%" : "0px"
@@ -370,19 +370,19 @@ const getPosition = (position, alignment, x = 0, y = 0) => {
     case "right":
       return {
         top: "50%",
-        right: -10,
+        right: 0,
         transform: `translate3d(${x}px, calc(-50% + ${y}px), 0px)`,
       };
     case "left":
       return {
         top: "50%",
-        left: -5,
+        left: 0,
         transform: `translate3d(${x}px, calc(-50% + ${y}px), 0px)`,
       };
     default: // bottom
       return {
-        left: alignment == "left" ? -5 : alignment == "center" ? "50%" : "",
-        right: alignment == "right" ? -10 : "",
+        left: alignment == "left" ? 0 : alignment == "center" ? "50%" : "",
+        right: alignment == "right" ? 0 : "",
         bottom: 5,
         transform: `translate3d(calc(${
           alignment == "center" ? "-50%" : "0px"