@easyv/charts 1.9.23 → 1.9.24

package/lib/components/Control.js

@@ -29,7 +29,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     height = _props$props$control.height,
     color = _props$props$control.color,
     gap = _props$props$control.gap,
-    dragColor = _props$props$control.drag.color,
+    _props$props$control$ = _props$props$control.drag,
+    dragColor = _props$props$control$.color,
+    enableStretch = _props$props$control$.enableStretch,
     left = _props$props$control.margin.left,
     _props$props$controlI = _props$props.controlInfo,
     cWidth = _props$props$controlI.cWidth,
@@ -60,13 +62,14 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     width: 12,
     height: height,
     padding: "0 5px",
-    cursor: "col-resize",
+    cursor: enableStretch ? "col-resize" : "auto",
     background: "rgb(2, 176, 249)",
     WebkitBackgroundClip: "content-box"
   };
 
   //左手柄的鼠标按下逻辑
   var leftDown = function leftDown() {
+    if (!enableStretch) return;
     var transform = ref.current.style.transform;
     var initX = 0;
     var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
@@ -95,6 +98,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   };
   //左手手柄的移动端适配
   var leftTouchStart = function leftTouchStart(e) {
+    if (!enableStretch) return;
     var transform = ref.current.style.transform;
     var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
     var initX = 0;
@@ -174,6 +178,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   };
   //右手柄的鼠标按下逻辑
   var rightDown = function rightDown() {
+    if (!enableStretch) return;
     var transform = ref.current.style.transform;
     var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
     var move = function move(e) {
@@ -199,6 +204,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   };
   //右手手柄的移动端适配
   var rightTouchStart = function rightTouchStart(e) {
+    if (!enableStretch) return;
     var transform = ref.current.style.transform;
     var startX = e.touches[0].clientX;
     var currentX = 0;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@easyv/charts",
-  "version": "1.9.23",
+  "version": "1.9.24",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
     "make": "babel src -d lib --extensions .ts,.tsx,.js,.jsx && cp -r src/css lib",
+    "watch": "cp -r src/css lib && babel --watch src -d lib --extensions .ts,.tsx,.js,.jsx",
     "prepare": "husky install"
   },
   "keywords": [],
@@ -54,4 +55,4 @@
       "commit": true
     }
   }
-}
+}

package/src/components/CartesianChart.js

@@ -348,9 +348,8 @@ const Chart = memo(
         setClipX(-translateX);
         const isVertical = axisX.direction === "vertical";
         const coreOffset = isVertical ? marginRight : isIOS ? marginLeft : 0;
-        seriesEl.current.style.transform = `translate(${
-          translateX + coreOffset
-        }px,${marginTop}px)`;
+        seriesEl.current.style.transform = `translate(${translateX + coreOffset
+          }px,${marginTop}px)`;
         axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
       }
     }, [controlInfo]);
@@ -459,8 +458,8 @@ const Chart = memo(
     const controlChartTooltipData =
       ctlXName && originData.filter((d) => d.x === ctlXName);
     const bodyWidth = isVertical
-        ? xLineRange + 100 + marginRight + marginLeft
-        : xLineRange,
+      ? xLineRange + 100 + marginRight + marginLeft
+      : xLineRange,
       bodyHeight = isVertical
         ? yLineRange
         : yLineRange + marginTop + marginBottom;
@@ -725,7 +724,7 @@ const Chart = memo(
                   ctlX -
                   marginLeft -
                   (axisX.controlEnd + axisX.start / cPercent - chartWidth) *
-                    curControlPercent.current
+                  curControlPercent.current
                 }
                 marginLeft={marginLeft}
                 marginTop={marginTop}

package/src/components/Control.jsx

@@ -13,7 +13,7 @@ export default memo(
           height,
           color,
           gap,
-          drag: { color: dragColor },
+          drag: { color: dragColor, enableStretch },
           margin: { left },
         },
         controlInfo: { cWidth, cBarWidth },
@@ -46,17 +46,19 @@ export default memo(
       width: 12,
       height,
       padding: "0 5px",
-      cursor: "col-resize",
+      cursor: enableStretch ? "col-resize" : "auto",
       background: "rgb(2, 176, 249)",
-      WebkitBackgroundClip: "content-box",
+      WebkitBackgroundClip: "content-box"
     };
 
     //左手柄的鼠标按下逻辑
     const leftDown = () => {
+      if (!enableStretch) return;
+
       const transform = ref.current.style.transform;
       let initX = 0;
       let rawTranslateX = parseFloat(
-        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       const rightX = rawTranslateX + cBarWidth;
       const move = (e) => {
@@ -86,9 +88,11 @@ export default memo(
     };
     //左手手柄的移动端适配
     const leftTouchStart = (e) => {
+      if (!enableStretch) return;
+
       const transform = ref.current.style.transform;
       let rawTranslateX = parseFloat(
-        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       let initX = 0;
       const rightX = rawTranslateX + cBarWidth;
@@ -127,7 +131,7 @@ export default memo(
       const transform = ref.current.style.transform;
       let movementX = 0;
       let rawTranslateX = parseFloat(
-        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       const mouseMoveHandle = (e) => {
         //当前位移的距离
@@ -150,7 +154,7 @@ export default memo(
       let currentX = 0;
       let movementX = 0;
       let rawTranslateX = parseFloat(
-        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       const mouseMoveHandle = (e) => {
         e.preventDefault();
@@ -172,9 +176,11 @@ export default memo(
     };
     //右手柄的鼠标按下逻辑
     const rightDown = () => {
+      if (!enableStretch) return;
+
       const transform = ref.current.style.transform;
       let rawTranslateX = parseFloat(
-        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       const move = (e) => {
         const { movementX: ex } = e;
@@ -199,12 +205,14 @@ export default memo(
     };
     //右手手柄的移动端适配
     const rightTouchStart = (e) => {
+      if (!enableStretch) return;
+
       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
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       const move = (e) => {
         e.preventDefault();
@@ -229,6 +237,7 @@ export default memo(
       document.addEventListener("touchmove", move, { passive: false });
       document.addEventListener("touchend", up);
     };
+
     return (
       <div
         style={{
@@ -265,6 +274,7 @@ export default memo(
             );
           })}
         </svg>
+
         {/* 控制条 */}
         <div ref={ref} style={barStyle}>
           <div
@@ -286,5 +296,5 @@ export default memo(
         </div>
       </div>
     );
-  })
+  }),
 );