@easyv/charts 1.5.21 → 1.5.22

package/lib/components/Control.js

@@ -103,6 +103,45 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
 
     document.addEventListener("mousemove", move);
     document.addEventListener("mouseup", up);
+  }; //左手手柄的移动端适配
+
+
+  var leftTouchStart = function leftTouchStart(e) {
+    var transform = ref.current.style.transform;
+    var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
+    var initX = 0;
+    var rightX = rawTranslateX + cBarWidth;
+    var startX = e.touches[0].clientX;
+    var currentX = 0;
+    var movementX = 0;
+
+    var move = function move(e) {
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX = currentX - startX;
+      startX = currentX;
+      initX = (0, _utils.mathR)(initX + movementX, [-rawTranslateX, rightX - rawTranslateX]);
+      setControlWidth(function (pre) {
+        var cWidth = pre.cWidth,
+            cBarWidth = pre.cBarWidth;
+        var nextBarWidth = (0, _utils.mathR)(cBarWidth - movementX, [1, rightX]);
+        return _objectSpread(_objectSpread({}, pre), {}, {
+          cBarWidth: nextBarWidth,
+          cPercent: nextBarWidth / cWidth,
+          cBarX: initX + rawTranslateX
+        });
+      });
+    };
+
+    var up = function up(e) {
+      document.removeEventListener("touchmove", move);
+      document.removeEventListener("touchend", up);
+    };
+
+    document.addEventListener("touchmove", move, {
+      passive: false
+    });
+    document.addEventListener("touchend", up);
   }; //滑块的鼠标按下操作
 
 
@@ -126,7 +165,36 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     document.addEventListener("mousemove", mouseMoveHandle);
     document.addEventListener("mouseup", mouseUpHandle);
     setWorking(true);
-  }; // //右手柄的鼠标按下逻辑
+  }; //移动端适配
+
+
+  var touchStart = function touchStart(e) {
+    var transform = ref.current.style.transform;
+    var startX = e.touches[0].clientX;
+    var currentX = 0;
+    var movementX = 0;
+    var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
+
+    var mouseMoveHandle = function mouseMoveHandle(e) {
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX += currentX - startX;
+      startX = currentX;
+      setX(movementX + rawTranslateX, true);
+    };
+
+    var mouseUpHandle = function mouseUpHandle(e) {
+      setWorking(false);
+      document.removeEventListener("touchmove", mouseMoveHandle);
+      document.removeEventListener("touchend", mouseUpHandle);
+    };
+
+    document.addEventListener("touchmove", mouseMoveHandle, {
+      passive: false
+    });
+    document.addEventListener("touchend", mouseUpHandle);
+    setWorking(true);
+  }; //右手柄的鼠标按下逻辑
 
 
   var rightDown = function rightDown() {
@@ -154,6 +222,42 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
 
     document.addEventListener("mousemove", move);
     document.addEventListener("mouseup", up);
+  }; //右手手柄的移动端适配
+
+
+  var rightTouchStart = function rightTouchStart(e) {
+    var transform = ref.current.style.transform;
+    var startX = e.touches[0].clientX;
+    var currentX = 0;
+    var movementX = 0;
+    var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
+
+    var move = function move(e) {
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX = currentX - startX;
+      startX = currentX;
+      setControlWidth(function (pre) {
+        var cWidth = pre.cWidth,
+            cBarWidth = pre.cBarWidth;
+        var maxWidth = cWidth - rawTranslateX;
+        var nextBarWidth = (0, _utils.mathR)(cBarWidth + movementX, [1, maxWidth]);
+        return _objectSpread(_objectSpread({}, pre), {}, {
+          cBarWidth: nextBarWidth,
+          cPercent: nextBarWidth / cWidth
+        });
+      });
+    };
+
+    var up = function up(e) {
+      document.removeEventListener("touchmove", move);
+      document.removeEventListener("touchend", up);
+    };
+
+    document.addEventListener("touchmove", move, {
+      passive: false
+    });
+    document.addEventListener("touchend", up);
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -188,16 +292,19 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     style: _objectSpread(_objectSpread({}, controllerStyle), {}, {
       transform: "translateX(-6px)"
     }),
-    onMouseDown: leftDown
+    onMouseDown: leftDown,
+    onTouchStart: leftTouchStart
   }), /*#__PURE__*/_react["default"].createElement("div", {
     style: dragStyle,
     onMouseDown: down,
+    onTouchStart: touchStart,
     ref: barRef
   }), /*#__PURE__*/_react["default"].createElement("div", {
     style: _objectSpread(_objectSpread({}, controllerStyle), {}, {
       transform: "translateX(6px)"
     }),
-    onMouseDown: rightDown
+    onMouseDown: rightDown,
+    onTouchStart: rightTouchStart
   })));
 }));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.5.21",
+  "version": "1.5.22",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Control.jsx

@@ -64,6 +64,39 @@ export default memo(forwardRef((props, ref) => {
     document.addEventListener("mousemove",move);
     document.addEventListener("mouseup",up);
   }
+  //左手手柄的移动端适配
+  const leftTouchStart = (e)=>{
+    const transform = ref.current.style.transform;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    let initX = 0;
+    const rightX = rawTranslateX+cBarWidth;
+    let startX = e.touches[0].clientX;
+    let currentX = 0;
+    let movementX = 0;
+    const move = (e)=>{
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX = currentX - startX;
+      startX = currentX;
+      initX = mathR(initX+movementX,[-rawTranslateX, rightX-rawTranslateX]);
+      setControlWidth((pre)=>{
+        const { cWidth, cBarWidth } = pre;
+        const nextBarWidth = mathR(cBarWidth-movementX,[1,rightX]);
+        return {
+          ...pre,
+          cBarWidth:nextBarWidth,
+          cPercent:nextBarWidth/cWidth,
+          cBarX:initX+rawTranslateX
+        }
+      });
+    }
+    const up = (e) => {
+      document.removeEventListener("touchmove", move);
+      document.removeEventListener("touchend", up);
+    };
+    document.addEventListener("touchmove", move, {passive:false});
+    document.addEventListener("touchend", up);
+  }
   //滑块的鼠标按下操作
   const down=()=>{
     const transform = ref.current.style.transform;
@@ -83,7 +116,30 @@ export default memo(forwardRef((props, ref) => {
     document.addEventListener("mouseup", mouseUpHandle);
     setWorking(true);
   }
-  // //右手柄的鼠标按下逻辑
+  //移动端适配
+  const touchStart=(e)=>{
+    const transform = ref.current.style.transform;
+    let startX = e.touches[0].clientX;
+    let currentX = 0;
+    let movementX = 0;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    const mouseMoveHandle = (e)=>{
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX += currentX - startX;
+      startX = currentX;
+      setX(movementX + rawTranslateX, true);
+    }
+    const mouseUpHandle = (e) => {
+      setWorking(false);
+      document.removeEventListener("touchmove", mouseMoveHandle);
+      document.removeEventListener("touchend", mouseUpHandle);
+    };
+    document.addEventListener("touchmove", mouseMoveHandle, {passive:false});
+    document.addEventListener("touchend", mouseUpHandle);
+    setWorking(true);
+  }
+  //右手柄的鼠标按下逻辑
   const rightDown=()=>{
     const transform = ref.current.style.transform;
     let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
@@ -107,6 +163,36 @@ export default memo(forwardRef((props, ref) => {
     document.addEventListener("mousemove",move);
     document.addEventListener("mouseup",up);
   }
+  //右手手柄的移动端适配
+  const rightTouchStart = (e)=>{
+    const transform = ref.current.style.transform;
+    let startX = e.touches[0].clientX;
+    let currentX = 0;
+    let movementX = 0;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    const move = (e)=>{
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX = currentX - startX;
+      startX = currentX;
+      setControlWidth((pre)=>{
+        const { cWidth, cBarWidth } = pre;
+        const maxWidth = cWidth-rawTranslateX;
+        const nextBarWidth = mathR(cBarWidth+movementX,[1,maxWidth]);
+        return {
+          ...pre,
+          cBarWidth:nextBarWidth,
+          cPercent:nextBarWidth/cWidth
+        }
+      });
+    }
+    const up = (e) => {
+      document.removeEventListener("touchmove", move);
+      document.removeEventListener("touchend", up);
+    };
+    document.addEventListener("touchmove", move, {passive:false});
+    document.addEventListener("touchend", up);
+  }
   return (
     <div
       style={{
@@ -140,9 +226,9 @@ export default memo(forwardRef((props, ref) => {
       </svg>
       {/* 控制条 */}
       <div ref={ref} style={barStyle}>
-        <div style={{...controllerStyle,transform:"translateX(-6px)"}} onMouseDown={leftDown}></div>
-        <div style={dragStyle} onMouseDown={down} ref={barRef}></div>
-        <div style={{...controllerStyle,transform:`translateX(6px)`}} onMouseDown={rightDown}></div>
+        <div style={{...controllerStyle,transform:"translateX(-6px)"}} onMouseDown={leftDown} onTouchStart={leftTouchStart}></div>
+        <div style={dragStyle} onMouseDown={down} onTouchStart={touchStart} ref={barRef}></div>
+        <div style={{...controllerStyle,transform:`translateX(6px)`}} onMouseDown={rightDown} onTouchStart={rightTouchStart}></div>
       </div>
     </div>
   );