@easyv/charts 1.10.28 → 1.10.30

package/lib/components/CartesianChart.js

@@ -14,6 +14,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../hooks");
 var _context = require("../context");
+var _utils = require("../utils");
 var _ = require(".");
 var _excluded = ["Component", "yOrZ"],
   _excluded2 = ["Component", "yOrZ"];
@@ -327,7 +328,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var controlTimer = (0, _react.useRef)(); //控制条的动画计时器
   var ctlBarX = (0, _react.useRef)(0); //控制条的滑块偏移值
   var isWorking = (0, _react.useRef)(false); //控制条是否正在进行各种操作
-
+  var controlInfoRef = (0, _react.useRef)(controlInfo);
+  var axisXRef = (0, _react.useRef)(axisX);
+  controlInfoRef.current = controlInfo;
+  axisXRef.current = axisX;
   var range = function range(num, ignoreMax) {
     var _num = num;
     var min = 0;
@@ -344,9 +348,11 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     var moveLen = range(x);
     if (needSave) ctlBarX.current = moveLen;
     setControlInfo(function (pre) {
-      return _objectSpread(_objectSpread({}, pre), {}, {
+      var next = _objectSpread(_objectSpread({}, pre), {}, {
         cBarX: moveLen
       });
+      controlInfoRef.current = next;
+      return next;
     });
   };
   var setControlWidth = function setControlWidth(fn) {
@@ -355,9 +361,24 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       var x = pre.cBarX;
       var moveLen = range(x, ignoreMax);
       ctlBarX.current = moveLen;
-      return fn(pre);
+      var next = fn(pre);
+      controlInfoRef.current = next;
+      return next;
     });
   };
+  var emitControlRangeChange = (0, _react.useCallback)(function () {
+    if (!control) return;
+    var visibleData = (0, _utils.getControlVisibleData)(originData, axisXRef.current, controlInfoRef.current, chartWidth);
+    var eventData = {
+      data: visibleData
+    };
+    triggerOnRelative("dataChange", eventData);
+    onEmit("dataChange", eventData);
+  }, [control, originData, chartWidth, triggerOnRelative, onEmit]);
+  (0, _react.useEffect)(function () {
+    if (!control) return;
+    emitControlRangeChange();
+  }, [control, chartWidth, height, JSON.stringify(originData), JSON.stringify(control), emitControlRangeChange]);
   //设置控制条是否正在进行拖拽/缩放操作
   var setWorking = function setWorking(bool) {
     isWorking.current = bool;
@@ -745,7 +766,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     actions: {
       setX: setControlTranslate,
       setWorking: setWorking,
-      setControlWidth: setControlWidth
+      setControlWidth: setControlWidth,
+      onControlChange: emitControlRangeChange
     },
     props: {
       control: control,

package/lib/components/Control.js

@@ -23,6 +23,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     setX = _props$actions.setX,
     setWorking = _props$actions.setWorking,
     setControlWidth = _props$actions.setControlWidth,
+    onControlChange = _props$actions.onControlChange,
     _props$props = props.props,
     _props$props$control = _props$props.control,
     thumbnail = _props$props$control.thumbnail,
@@ -92,6 +93,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     var _up = function up() {
       document.removeEventListener("mousemove", move);
       document.removeEventListener("mouseup", _up);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("mousemove", move);
     document.addEventListener("mouseup", _up);
@@ -126,6 +128,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     var _up2 = function up(e) {
       document.removeEventListener("touchmove", move);
       document.removeEventListener("touchend", _up2);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("touchmove", move, {
       passive: false
@@ -146,6 +149,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
       setWorking(false);
       document.removeEventListener("mousemove", mouseMoveHandle);
       document.removeEventListener("mouseup", _mouseUpHandle);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("mousemove", mouseMoveHandle);
     document.addEventListener("mouseup", _mouseUpHandle);
@@ -169,6 +173,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
       setWorking(false);
       document.removeEventListener("touchmove", mouseMoveHandle);
       document.removeEventListener("touchend", _mouseUpHandle2);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("touchmove", mouseMoveHandle, {
       passive: false
@@ -198,6 +203,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     var _up3 = function up() {
       document.removeEventListener("mousemove", move);
       document.removeEventListener("mouseup", _up3);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("mousemove", move);
     document.addEventListener("mouseup", _up3);
@@ -229,6 +235,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     var _up4 = function up(e) {
       document.removeEventListener("touchmove", move);
       document.removeEventListener("touchend", _up4);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("touchmove", move, {
       passive: false

package/lib/components/Legend.js

@@ -27,7 +27,7 @@ var defaultFont = {
   fontWeight: "normal"
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var _config$value, _config$percent, _config$value2, _config$value3, _config$name, _ref3;
+  var _ref2, _config$value, _config$percent, _config$value2, _config$value3, _config$name, _ref4;
   var series = _ref.series,
     height = _ref.height,
     data = _ref.data,
@@ -88,15 +88,30 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     scrollStep = _useState2[0],
-    setScrollStep = _useState2[1]; // 行高度
+    setScrollStep = _useState2[1]; // 每次滚动距离
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    loopContainerHeight = _useState4[0],
+    setLoopContainerHeight = _useState4[1]; // 按父高度推算的 loop 视口高度
 
-  // 初始化行高
+  // 根据父级 height 计算可见项数，视口高度 = N*行高 + (N-1)*间距（最后一项下方不留空）
   (0, _react.useEffect)(function () {
-    if (ref_container.current) {
-      var rowHeight = ref_container.current.querySelector("li").clientHeight + gridRowGap;
-      setScrollStep(rowHeight);
+    var _series$length;
+    if (!ref_container.current) return;
+    var li = ref_container.current.querySelector("li");
+    if (!li) return;
+    var itemHeight = li.offsetHeight;
+    var step = itemHeight + gridRowGap;
+    setScrollStep(step);
+    if (!loop.show || !height) {
+      setLoopContainerHeight(null);
+      return;
     }
-  }, [gridRowGap]);
+    var totalItems = (_series$length = series === null || series === void 0 ? void 0 : series.length) !== null && _series$length !== void 0 ? _series$length : 0;
+    var visibleCount = Math.min(totalItems, Math.max(1, Math.floor((height + gridRowGap) / step)));
+    setLoopContainerHeight(visibleCount * itemHeight + Math.max(0, visibleCount - 1) * gridRowGap);
+  }, [gridRowGap, loop.show, series, height]);
+  var loopHeight = loop.show ? (_ref2 = loopContainerHeight !== null && loopContainerHeight !== void 0 ? loopContainerHeight : height) !== null && _ref2 !== void 0 ? _ref2 : "auto" : "auto";
 
   // 启动自动滚动定时器
   (0, _react.useEffect)(function () {
@@ -155,8 +170,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   var valueSuffix = ((_config$value2 = config.value) === null || _config$value2 === void 0 || (_config$value2 = _config$value2.suffix) === null || _config$value2 === void 0 ? void 0 : _config$value2.text) || "";
   var valueSplitConfig = ((_config$value3 = config.value) === null || _config$value3 === void 0 ? void 0 : _config$value3.splitConfig) || {};
   var getValueStr = function getValueStr(item) {
-    var _ref2, _item$data$y, _item$data;
-    var valueStr = ((_ref2 = (_item$data$y = (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.y) !== null && _item$data$y !== void 0 ? _item$data$y : item.value) !== null && _ref2 !== void 0 ? _ref2 : "") + (valueSuffix || "");
+    var _ref3, _item$data$y, _item$data;
+    var valueStr = ((_ref3 = (_item$data$y = (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.y) !== null && _item$data$y !== void 0 ? _item$data$y : item.value) !== null && _ref3 !== void 0 ? _ref3 : "") + (valueSuffix || "");
     if (valueSplitConfig.show && valueSplitConfig.separator) {
       valueStr = valueStr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, valueSplitConfig.separator);
     }
@@ -213,13 +228,15 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   var isFixedWidth = isPieChart ? isPieFixedWidthGrid : LegendType == "FixedWidth";
   var isSideLegend = isPieAdaptive && isSidePlacement;
   var isTopBottomAdaptive = isPieAdaptive && isCenterTopOrBottom;
-  var fullWidth = (_ref3 = componentWidth !== null && componentWidth !== void 0 ? componentWidth : chartWidth) !== null && _ref3 !== void 0 ? _ref3 : 0;
+  var fullWidth = (_ref4 = componentWidth !== null && componentWidth !== void 0 ? componentWidth : chartWidth) !== null && _ref4 !== void 0 ? _ref4 : 0;
   // Adaptive+上下：组件总宽；Adaptive+左右：仅 maxWidth = 总宽 − 左右 chart.margin，宽度由内容撑开
   var pieLegendFullWidth = Math.max(0, fullWidth);
   var pieLegendInnerWidth = Math.max(0, fullWidth - marginLeft - marginRight);
   var sideLegendMaxWidth = isSideLegend ? pieLegendInnerWidth : 0;
   var fixedColumnsPerRow = Math.min(Math.max(1, Number(gridTemplateColumns) || 1), length);
   var isPieTopBottomFixedMultiCol = isPieChart && isFixedWidth && isCenterTopOrBottom && fixedColumnsPerRow > 1;
+  var columnsPerRow = Math.max(1, Number(gridTemplateColumns) || 1);
+  var totalRows = Math.ceil(length / columnsPerRow);
   var formatterExtra = _objectSpread(_objectSpread(_objectSpread({}, config), {}, {
     valueMaxWidth: valueMaxWidth,
     percentMaxWidth: percentMaxWidth,
@@ -284,13 +301,15 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       speed: speed
     })));
   };
+  var legendAlignContent = alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end";
   var stylePieOrAxis = formatter ? _objectSpread(_objectSpread({
     display: "flex",
-    alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
+    alignContent: loop.show ? "flex-start" : legendAlignContent,
     flexDirection: "column",
+    gap: loop.show ? "".concat(gridRowGap, "px") : undefined,
     position: "absolute"
   }, getPosition(position, _alignment, x, y)), {}, {
-    height: loop.show ? height : "auto",
+    height: loopHeight,
     overflowY: loop.show ? "scroll" : "auto"
   }) : _objectSpread(_objectSpread({
     width: "100%",
@@ -298,20 +317,22 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     boxSizing: "border-box",
     position: "absolute"
   }, getPosition(position, _alignment, x, y)), {}, {
-    height: loop.show ? height : "auto",
+    height: loopHeight,
     overflowY: loop.show ? "scroll" : "auto"
   });
   if (isPieAdaptive && isSideLegend) {
     // 左右侧图例：水平方向始终左对齐，图标落在同一条纵线上（与九宫格水平分量无关）
-    var pieAdaptiveWrapperStyle = _objectSpread(_objectSpread({
+    var pieAdaptiveWrapperStyle = _objectSpread(_objectSpread(_objectSpread({
       position: "absolute",
       display: "flex",
       flexDirection: "column",
       width: "max-content",
       maxWidth: sideLegendMaxWidth || undefined,
       alignItems: "flex-start"
-    }, getPosition(position, _alignment, x, y)), {}, {
-      height: loop.show ? height : "auto",
+    }, loop.show ? {
+      justifyContent: "flex-start"
+    } : {}), getPosition(position, _alignment, x, y)), {}, {
+      height: loopHeight,
       overflowY: loop.show ? "scroll" : "auto"
     });
     var pieAdaptiveListStyle = {
@@ -342,7 +363,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       maxWidth: pieLegendFullWidth || "100%",
       boxSizing: "border-box"
     }, getPosition(position, _alignment, x, y)), {}, {
-      height: loop.show ? height : "auto",
+      height: loopHeight,
       overflowY: loop.show ? "scroll" : "auto"
     });
     var topBottomListStyle = {
@@ -414,7 +435,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       position: "absolute",
       display: "flex"
     }, getPosition(position, _alignment, x, y)), {}, {
-      height: loop.show ? height : "auto",
+      height: loopHeight,
       overflowY: loop.show ? "scroll" : "auto"
     }),
     ref: ref_container
@@ -473,7 +494,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     className: "__easyv-legend-wrapper",
     style: stylePieOrAxis,
     ref: ref_container
-  }, formatter ? (0, _toConsumableArray2["default"])(Array(Math.ceil(series.length / gridTemplateColumns))).map(function (_, indexs) {
+  }, formatter ? (0, _toConsumableArray2["default"])(Array(totalRows)).map(function (_, indexs) {
     return /*#__PURE__*/_react["default"].createElement("ul", {
       key: indexs,
       style: {
@@ -481,10 +502,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         width: "fit-content",
         justifyContent: legendMainAlign,
         gap: "".concat(gridRowGap, "px  ").concat(gridColumnGap, "px"),
-        marginBottom: gridRowGap + "px"
+        margin: 0
       }
     }, _series.map(function (series, i) {
-      if (Math.floor(i / gridTemplateColumns) == indexs) {
+      if (Math.floor(i / columnsPerRow) == indexs) {
         var _series$config4;
         var type = series.type,
           name = series.name,

package/lib/components/PieChart.js

@@ -27,8 +27,8 @@ var _excluded = ["startAngle", "endAngle", "antiClockwise"],
   _excluded2 = ["padAngle", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle"],
   _excluded3 = ["formatter"],
   _excluded4 = ["startAngle", "endAngle"];
-/**
- * 饼环图
+/**
+ * 饼环图
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/lib/utils/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SvgBackground = void 0;
 exports.band = band;
-exports.sortPie = exports.seriesYOrZ = exports.reverseGradientStops = exports.resetStacks = exports.renderCanvasBackground = exports.reduceConfig = exports.mathR = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMultiColorStr = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.formatFont = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
+exports.sortPie = exports.seriesYOrZ = exports.reverseGradientStops = exports.resetStacks = exports.renderCanvasBackground = exports.reduceConfig = exports.mathR = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMultiColorStr = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getControlVisibleData = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.formatFont = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -910,4 +910,34 @@ var mathR = exports.mathR = function mathR(value, range) {
     min = _range[0],
     max = _range[1];
   return Math.max(min, Math.min(value, max));
+};
+
+/**
+ * 根据控制条位置计算当前图表视口内可见的原始数据
+ */
+var getControlVisibleData = exports.getControlVisibleData = function getControlVisibleData(originData, axisX, controlInfo, chartWidth) {
+  if (!(originData !== null && originData !== void 0 && originData.length) || !axisX || !controlInfo) return [];
+  var cBarX = controlInfo.cBarX,
+    cBarWidth = controlInfo.cBarWidth,
+    cWidth = controlInfo.cWidth,
+    cPercent = controlInfo.cPercent;
+  var controlEnd = axisX.controlEnd,
+    start = axisX.start,
+    scaler = axisX.scaler,
+    _axisX$step = axisX.step,
+    step = _axisX$step === void 0 ? 0 : _axisX$step;
+  var slideRange = cWidth - cBarWidth;
+  var percent = slideRange > 0 ? cBarX / slideRange : 0;
+  var safeCPercent = cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
+  var span = controlEnd + start / safeCPercent - chartWidth;
+  var translateX = Number.isFinite(span) ? -span * percent : 0;
+  var clipLeft = Number.isFinite(-translateX) ? -translateX : 0;
+  var clipRight = clipLeft + chartWidth;
+  var halfStep = Number.isFinite(step) ? step / 2 : 0;
+  return originData.filter(function (d) {
+    if ((d === null || d === void 0 ? void 0 : d.x) === undefined) return false;
+    var pos = scaler(d.x);
+    if (!Number.isFinite(pos)) return false;
+    return pos + halfStep >= clipLeft && pos - halfStep <= clipRight;
+  });
 };

package/package.json

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

package/src/components/CartesianChart.js

@@ -13,6 +13,7 @@ import React, {
 } from "react";
 import { useAxes, useTooltip, useCarouselAxisX, useAiData } from "../hooks";
 import { chartContext } from "../context";
+import { getControlVisibleData } from "../utils";
 import {
   ChartContainer,
   Legend,
@@ -313,6 +314,10 @@ const Chart = memo(
     const controlTimer = useRef(); //控制条的动画计时器
     const ctlBarX = useRef(0); //控制条的滑块偏移值
     const isWorking = useRef(false); //控制条是否正在进行各种操作
+    const controlInfoRef = useRef(controlInfo);
+    const axisXRef = useRef(axisX);
+    controlInfoRef.current = controlInfo;
+    axisXRef.current = axisX;
 
     const range = (num, ignoreMax) => {
       let _num = num;
@@ -330,10 +335,12 @@ const Chart = memo(
       const moveLen = range(x);
       if (needSave) ctlBarX.current = moveLen;
       setControlInfo((pre) => {
-        return {
+        const next = {
           ...pre,
           cBarX: moveLen,
         };
+        controlInfoRef.current = next;
+        return next;
       });
     };
     const setControlWidth = (fn, ignoreMax = false) => {
@@ -341,9 +348,34 @@ const Chart = memo(
         const x = pre.cBarX;
         const moveLen = range(x, ignoreMax);
         ctlBarX.current = moveLen;
-        return fn(pre);
+        const next = fn(pre);
+        controlInfoRef.current = next;
+        return next;
       });
     };
+    const emitControlRangeChange = useCallback(() => {
+      if (!control) return;
+      const visibleData = getControlVisibleData(
+        originData,
+        axisXRef.current,
+        controlInfoRef.current,
+        chartWidth,
+      );
+      const eventData = { data: visibleData };
+      triggerOnRelative("dataChange", eventData);
+      onEmit("dataChange", eventData);
+    }, [control, originData, chartWidth, triggerOnRelative, onEmit]);
+    useEffect(() => {
+      if (!control) return;
+      emitControlRangeChange();
+    }, [
+      control,
+      chartWidth,
+      height,
+      JSON.stringify(originData),
+      JSON.stringify(control),
+      emitControlRangeChange,
+    ]);
     //设置控制条是否正在进行拖拽/缩放操作
     const setWorking = (bool) => {
       isWorking.current = bool;
@@ -805,6 +837,7 @@ const Chart = memo(
               setX: setControlTranslate,
               setWorking,
               setControlWidth,
+              onControlChange: emitControlRangeChange,
             }}
             props={{
               control,

package/src/components/Control.jsx

@@ -6,7 +6,7 @@ import { mathR } from "../utils";
 export default memo(
   forwardRef((props, ref) => {
     const {
-      actions: { setX, setWorking, setControlWidth },
+      actions: { setX, setWorking, setControlWidth, onControlChange },
       props: {
         control: {
           thumbnail,
@@ -82,6 +82,7 @@ export default memo(
       const up = () => {
         document.removeEventListener("mousemove", move);
         document.removeEventListener("mouseup", up);
+        onControlChange?.();
       };
       document.addEventListener("mousemove", move);
       document.addEventListener("mouseup", up);
@@ -122,6 +123,7 @@ export default memo(
       const up = (e) => {
         document.removeEventListener("touchmove", move);
         document.removeEventListener("touchend", up);
+        onControlChange?.();
       };
       document.addEventListener("touchmove", move, { passive: false });
       document.addEventListener("touchend", up);
@@ -142,6 +144,7 @@ export default memo(
         setWorking(false);
         document.removeEventListener("mousemove", mouseMoveHandle);
         document.removeEventListener("mouseup", mouseUpHandle);
+        onControlChange?.();
       };
       document.addEventListener("mousemove", mouseMoveHandle);
       document.addEventListener("mouseup", mouseUpHandle);
@@ -167,6 +170,7 @@ export default memo(
         setWorking(false);
         document.removeEventListener("touchmove", mouseMoveHandle);
         document.removeEventListener("touchend", mouseUpHandle);
+        onControlChange?.();
       };
       document.addEventListener("touchmove", mouseMoveHandle, {
         passive: false,
@@ -199,6 +203,7 @@ export default memo(
       const up = () => {
         document.removeEventListener("mousemove", move);
         document.removeEventListener("mouseup", up);
+        onControlChange?.();
       };
       document.addEventListener("mousemove", move);
       document.addEventListener("mouseup", up);
@@ -233,6 +238,7 @@ export default memo(
       const up = (e) => {
         document.removeEventListener("touchmove", move);
         document.removeEventListener("touchend", up);
+        onControlChange?.();
       };
       document.addEventListener("touchmove", move, { passive: false });
       document.addEventListener("touchend", up);