cnhis-design-vue 3.1.33-beta.0 → 3.1.33-beta.10

package/es/components/fabric-chart/src/hooks/useBirthProcess.js

@@ -0,0 +1,419 @@
+import { reactive, onMounted, nextTick } from 'vue';
+import { useBirthProcessCumputedPoint } from './useCumputedPoint.js';
+import useGrid from './useGrid.js';
+import { drawLine, drawPoint, drawText, defaultTextStyle, defaultRectStyle } from './useDraw.js';
+import { fabric } from '../utils/index.js';
+import { getIndex, isEffectiveNode } from '../utils/utils.js';
+import useCommmon from './useCommon.js';
+import { cloneDeep } from 'lodash-es';
+
+function useBirthProcess(canvas, propItems, emits) {
+  const { cumputedX, cumputedY, getXValue, getYValue } = useBirthProcessCumputedPoint(propItems);
+  const { getEqualXTypes } = useCommmon(canvas);
+  const {
+    xAxis,
+    grid,
+    originX,
+    originY,
+    xCellWidth,
+    endY,
+    startTime,
+    leftAddAreaWidth,
+    leftScales,
+    rightScales,
+    yCellHeight,
+    endX,
+    scaleValues,
+    canvasWidth,
+    borderStyle,
+    rightAddAreaWidth,
+    event,
+    originYCervix
+  } = propItems;
+  const pointTipProps = reactive({
+    show: false,
+    point: { x: 0, y: 0 },
+    list: []
+  });
+  const pointMenuProps = reactive({
+    show: false,
+    point: { x: 0, y: 0 },
+    list: [],
+    target: null
+  });
+  const yScaleValue = cloneDeep(scaleValues);
+  const gridPoints = /* @__PURE__ */ new Set();
+  useGrid(canvas, propItems, true);
+  function drawPolyLine() {
+    yScaleValue.forEach((item, dataIndex) => {
+      var _a;
+      const pointList = [];
+      const lineList = [];
+      (_a = item.data) == null ? void 0 : _a.forEach((v, index) => {
+        const points = getPointer(v, item);
+        drawPointLine(points, v, index);
+      });
+      Promise.all(pointList).then((res) => {
+        const lineListFilter = lineList.filter((v) => v);
+        let prevPoint = null;
+        res = res.filter((v) => {
+          if (v && prevPoint) {
+            prevPoint.nextPoint = v;
+            v.prevPoint = prevPoint;
+          }
+          prevPoint = v || prevPoint;
+          v == null ? void 0 : v.bringToFront();
+          return v;
+        });
+        canvas.value.add(...lineListFilter, ...res);
+        res.forEach((v) => {
+          v == null ? void 0 : v.bringToFront();
+        });
+      });
+      function drawPointLine(points, v, index) {
+        let point;
+        let line;
+        const { pointAttr = {}, lineAttr = {}, title = "", key, type: pointType = "circle" } = item;
+        const nextV = item.data[index + 1];
+        const nextPoint = getPointer(nextV, item);
+        if (points && nextPoint && !v.breakpoint) {
+          line = drawLine([...points, ...nextPoint], {
+            ...lineAttr
+          });
+        } else if (points && !nextPoint && !v.breakpoint) {
+          const nextLinePoint = getPointer(nextV, item);
+          line = nextLinePoint ? drawLine([...points, ...nextLinePoint], {
+            ...lineAttr
+          }) : null;
+        }
+        const previousLine = lineList[index - 1];
+        const pointAttrNew = {
+          origin: {
+            data: v,
+            title,
+            key: key || "",
+            dataIndex,
+            index
+          },
+          leftLine: previousLine,
+          rightLine: line,
+          ...pointAttr,
+          ...propItems.event
+        };
+        if (previousLine) {
+          point = drawPoint(pointType, {
+            left: previousLine.get("x2"),
+            top: previousLine.get("y2"),
+            ...pointAttrNew
+          });
+        } else {
+          if (points) {
+            pointAttrNew.leftLine = null;
+            point = drawPoint(pointType, {
+              left: points[0],
+              top: points[1],
+              ...pointAttrNew
+            });
+          }
+        }
+        lineList.push(line);
+        if (point) {
+          setPointEvent(point);
+          pointList.push(point);
+          gridPoints.add(point);
+        }
+      }
+    });
+  }
+  function setPointEvent(point) {
+    if (event.hovered) {
+      point.on("mouseover", () => {
+        setPopup(point);
+      });
+      point.on("mouseout", () => {
+        pointTipProps.show = false;
+      });
+    }
+    point.on("moving", () => {
+      moveLimit(point);
+      updateLine(point);
+      event.hovered && setPopup(point);
+    });
+    point.on("mouseup", (event2) => {
+      pointTipProps.show = false;
+      if (event2.button === 1) {
+        const { key } = point.origin;
+        const params = {
+          ...point.origin,
+          data: {
+            ...point.origin.data,
+            time: getXValue(point.left),
+            value: getYValue(key, point.top)
+          }
+        };
+        canvas.value.discardActiveObject();
+        emits("change", params);
+        updateData(params, "change");
+      }
+    });
+  }
+  function updateData(params, mode = "add") {
+    const { dataIndex, data, index, key } = params;
+    const item = yScaleValue.find((v) => v.key === key);
+    switch (mode) {
+      case "delete":
+        item.data.splice(index, 0);
+        break;
+      case "change":
+        item.data[index] = data;
+        break;
+      default: {
+        const index2 = getIndex(data.time, item.data);
+        console.log("index :>> ", index2);
+        item.data.splice(index2, 0, data);
+        break;
+      }
+    }
+    redrawPoints();
+  }
+  function getRemovePoints(points) {
+    const removePoints = [];
+    points.forEach((point) => {
+      point && removePoints.push(point);
+      (point == null ? void 0 : point.leftLine) && removePoints.push(point == null ? void 0 : point.leftLine);
+      (point == null ? void 0 : point.rightLine) && removePoints.push(point == null ? void 0 : point.rightLine);
+    });
+    return removePoints;
+  }
+  function redrawPoints() {
+    var _a;
+    gridPoints.size && ((_a = canvas.value) == null ? void 0 : _a.remove(...getRemovePoints([...gridPoints])));
+    gridPoints.clear();
+    drawPolyLine();
+  }
+  function updateLine(point) {
+    var _a, _b;
+    (_a = point.leftLine) == null ? void 0 : _a.setCoords().set({ x2: point.left, y2: point.top });
+    (_b = point.rightLine) == null ? void 0 : _b.setCoords().set({ x1: point.left, y1: point.top });
+  }
+  function moveLimit(point) {
+    const limitLeft = point.prevPoint ? point.prevPoint.left : originX;
+    const limitRight = point.nextPoint ? point.nextPoint.left : endX;
+    point.setCoords();
+    ["cervix", "fetalPresentation"].includes(point.origin.key) && point.top < originYCervix && point.set("top", originYCervix);
+    point.top < originY && point.set("top", originY);
+    point.top > endY && point.set("top", endY);
+    point.left < limitLeft && point.set("left", limitLeft);
+    point.left > limitRight && point.set("left", limitRight);
+  }
+  function setPopup(point) {
+    const { title, key } = point.origin;
+    pointTipProps.point = {
+      x: point.left,
+      y: point.top
+    };
+    pointTipProps.list = [`${title} ${getYValue(key, point.top)}`, `\u65F6\u95F4 ${getXValue(point.left).slice(-5)}`];
+    pointTipProps.show = true;
+  }
+  function getPointer(v, item) {
+    if (isEffectiveNode(v) && isLimit(v.time)) {
+      const x = cumputedX(v.time);
+      const y = cumputedY(item.key, item.range, v.value);
+      return [x, y < originY ? originY : y > endY ? endY : y];
+    }
+  }
+  function isLimit(time) {
+    const maxMinute = startTime + 24 * 60 * 60 * 1e3;
+    const getTime = new Date(time).getTime();
+    return getTime >= startTime && getTime <= maxMinute;
+  }
+  function setCanvasEvent() {
+    if (!propItems.event.evented)
+      return;
+    canvas.value.on("mouse:up", (event2) => {
+      if (event2.button === 3) {
+        const { x = 0, y = 0 } = event2.pointer || {};
+        if (x >= originX && x <= endX && y >= originY && y <= endY) {
+          pointMenuProps.point = { x, y };
+          pointMenuProps.show = true;
+          if (!event2.target) {
+            pointMenuProps.target = null;
+            pointMenuProps.list = ["\u65B0\u589E\u8282\u70B9"];
+            yScaleValue.forEach((item) => {
+              if (!getEqualXTypes(x, "key").includes(item.key)) {
+                if (["cervix", "fetalPresentation"].includes(item.key) && y < originYCervix)
+                  return;
+                pointMenuProps.list.push(getPointMenuList(item, event2.pointer));
+              }
+            });
+            if (pointMenuProps.list.length === 1) {
+              pointMenuProps.show = false;
+              console.log("\u5F53\u524D\u65F6\u95F4\u6BB5\u5185\u65E0\u53EF\u65B0\u589E\u8282\u70B9");
+            }
+          } else {
+            pointMenuProps.target = event2.target;
+            pointMenuProps.list = ["\u5220\u9664\u8282\u70B9"];
+            yScaleValue.forEach((item) => {
+              if (getEqualXTypes(x, "key").includes(item.key)) {
+                pointMenuProps.list.push({
+                  ...getPointMenuList(item, event2.pointer),
+                  mode: "delete",
+                  index: event2.target.origin.index
+                });
+              }
+            });
+          }
+        }
+      }
+    });
+    function getPointMenuList(item, pointer) {
+      const dataIndex = yScaleValue.findIndex((_item) => _item.key === item.key);
+      return {
+        renderItem: () => item.title,
+        origin: {
+          title: item.title,
+          unit: item.unit,
+          dataIndex,
+          key: item.key
+        },
+        pointer
+      };
+    }
+  }
+  function clickMenu({ item, target }) {
+    console.log("item :>> ", item);
+    const params = {
+      data: {
+        time: getXValue(item.pointer.x),
+        value: getYValue(item.origin.key, item.pointer.y)
+      },
+      ...item.origin
+    };
+    if (item.mode === "delete") {
+      emits("delete", params);
+      updateData(params, "delete");
+    } else {
+      emits("add", params);
+      updateData(params);
+    }
+  }
+  function drawXScale() {
+    const { show, startTime: startTime2, range = [0, 23], position = "top", style } = xAxis.time;
+    const { show: processTimeShow, range: processTimeRange = [0, 23], style: processTimeStyle } = xAxis.processTime;
+    if (show || processTimeShow) {
+      const timeList = [];
+      const processTimeList = [];
+      const timeTextList = [];
+      const processTimeTextList = [];
+      const left = originX + xCellWidth / 2;
+      for (let i = 0; i < grid.mainXCell; i++) {
+        if (show) {
+          const currentTime = i === 0 ? +startTime2.slice(11, 13) : getCurrentTime(timeList.at(-1), range);
+          timeList.push(currentTime);
+          const top = position == "top" ? originY - 15 : endY + 15;
+          timeTextList.push(
+            drawText([left + i * xCellWidth, top], {
+              value: String(currentTime),
+              ...defaultTextStyle,
+              ...style || {}
+            })
+          );
+        }
+        if (processTimeShow) {
+          const currentProcessTime = i === 0 ? processTimeRange[0] : processTimeList.at(-1) + 1;
+          processTimeList.push(currentProcessTime);
+          const top = position == "top" ? endY + 15 : originY - 15;
+          processTimeTextList.push(
+            drawText([left + i * xCellWidth, top], {
+              value: String(currentProcessTime),
+              ...defaultTextStyle,
+              ...processTimeStyle || {}
+            })
+          );
+        }
+      }
+      const group = new fabric.Group([...timeTextList, ...processTimeTextList], {
+        evented: false,
+        selectable: false
+      });
+      canvas.value.add(group);
+      canvas.value.sendToBack(group);
+    }
+  }
+  function getCurrentTime(lastTime, range) {
+    return lastTime + 1 > range[1] ? range[0] : lastTime + 1;
+  }
+  function drawYScale() {
+    let baseLeft = leftAddAreaWidth;
+    [...leftScales, ...rightScales].forEach((item, index) => {
+      const { range, spaceValue, width, title, titleStyle, layout } = item;
+      const textList = [];
+      if (layout === "right")
+        baseLeft = endX;
+      const left = baseLeft + width / 2;
+      const list = getScaleNumberList(range, spaceValue);
+      list.forEach((num, i) => {
+        const top = i === 0 ? endY - 8 : endY - i * yCellHeight;
+        textList.push(
+          drawText([left, top], {
+            value: String(num),
+            ...defaultTextStyle
+          })
+        );
+      });
+      const border = new fabric.Rect({
+        ...defaultRectStyle,
+        width,
+        height: endY,
+        left,
+        top: endY / 2
+      });
+      const titleText = originY > 0 ? drawText([left, originY - yCellHeight / 2], {
+        value: String(title),
+        ...defaultTextStyle,
+        ...titleStyle
+      }) : null;
+      const group = new fabric.Group([...textList, border, ...titleText ? [titleText] : []], {
+        evented: false,
+        selectable: false
+      });
+      canvas.value.add(group);
+      baseLeft += width;
+    });
+  }
+  function getScaleNumberList(range, spaceValue) {
+    const list = [];
+    const [min, max] = range;
+    for (let i = min; spaceValue > 0 ? i <= max : i >= max; i += spaceValue) {
+      list.push(i);
+    }
+    return list;
+  }
+  function drawBorder() {
+    const border = new fabric.Rect({
+      ...borderStyle,
+      width: canvasWidth - leftAddAreaWidth - rightAddAreaWidth,
+      height: endY,
+      left: leftAddAreaWidth,
+      top: 0,
+      fill: "transparent"
+    });
+    canvas.value.add(border);
+  }
+  onMounted(() => {
+    nextTick(() => {
+      drawYScale();
+      drawXScale();
+      drawBorder();
+      drawPolyLine();
+      setCanvasEvent();
+    });
+  });
+  return {
+    pointTipProps,
+    pointMenuProps,
+    clickMenu
+  };
+}
+
+export { useBirthProcess };

package/es/components/fabric-chart/src/hooks/useCenter.d.ts

@@ -1,7 +1,6 @@
 import { Ref } from 'vue';
 import { fabric } from '../utils';
 import { IPropItems } from '../interface';
-import { IPointType } from '../interface';
 export declare function useCenter(canvas: Ref<fabric.Canvas>, propItems: IPropItems, emits: any, cumputedX: Function, cumputedY: Function, getXValue: Function, getYValue: Function, addRenderItem: Function | undefined): {
     pointTipProps: {
         show: boolean;
@@ -25,7 +24,6 @@ export declare function useCenter(canvas: Ref<fabric.Canvas>, propItems: IPropIt
         target: any;
     }) => void;
     setPopup: (point: any) => void;
-    getEqualXTypes: (pointX: number) => IPointType[];
     isAddPoint: (x: number) => boolean;
     updateData: (params: any, mode?: string) => void;
     redrawPoints: () => void;

package/es/components/fabric-chart/src/hooks/useCenter.js

@@ -4,35 +4,13 @@ import { drawLine, defaultStyle, drawPoint, drawText, drawArrow } from './useDra
 import useGrid from './useGrid.js';
 import { useShadow } from './useShadow.js';
 import { TEMPERATURE_MENU, PAIN_MENU, OVERLAP } from './constant.js';
+import useCommmon from './useCommon.js';
 import { cloneDeep } from 'lodash-es';
+import { getPointArr, isEffectiveNode, getIndex, deleteProperty } from '../utils/utils.js';
 
-function isEffectiveNode(node) {
-  return (node == null ? void 0 : node.time) && ((node == null ? void 0 : node.value) || (node == null ? void 0 : node.value) === 0);
-}
-function getPointArr(arr) {
-  let _arr = [];
-  return arr.reduce((pre, cur, index) => {
-    var _a, _b;
-    _arr.push([cur.left, cur.top]);
-    if (((_b = (_a = cur.origin) == null ? void 0 : _a.data) == null ? void 0 : _b.breakpoint) || arr.length - 1 === index) {
-      pre.push(_arr);
-      _arr = [];
-    }
-    return pre;
-  }, []);
-}
-function deleteProperty(data, list) {
-  list.map((v) => v.type).forEach((key) => {
-    if (Reflect.has(data, key))
-      Reflect.deleteProperty(data, key);
-  });
-}
-function getIndex(time, list) {
-  const index = list.findIndex((v) => new Date(v.time).getTime() > new Date(time).getTime());
-  return !~index ? list.length : index;
-}
 function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, getYValue, addRenderItem) {
   useGrid(canvas, propItems);
+  const { getEqualXTypes } = useCommmon(canvas);
   const {
     left,
     xScaleList,
@@ -156,7 +134,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
           pointMenuProps.point = { x, y };
           pointMenuProps.show = true;
           const { type } = ((_a = event2.target) == null ? void 0 : _a.origin) || {};
-          if (event2.target && (type === "temperature" || type === "pain")) {
+          if (event2.target && ["temperature", "pain"].includes(type)) {
             if (type === "temperature") {
               pointMenuProps.list = [...TEMPERATURE_MENU];
             }
@@ -194,16 +172,6 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
       }
     });
   }
-  function getEqualXTypes(pointX) {
-    const types = [];
-    const left2 = cumputedX(getXValue(pointX));
-    canvas.value.forEachObject((obj) => {
-      if (obj.origin && left2 === obj.left) {
-        types.push(obj.origin.type);
-      }
-    });
-    return [...new Set(types)];
-  }
   function drawOverlapPoint() {
     var _a;
     const pulseObj = yScaleValue.find((item) => item.type === "pulse");
@@ -680,7 +648,6 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     pointMenuProps,
     clickMenu,
     setPopup,
-    getEqualXTypes,
     isAddPoint,
     updateData,
     redrawPoints

package/es/components/fabric-chart/src/hooks/useCommon.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+export default function useCommmon(canvas: Ref<fabric.Canvas>): {
+    getEqualXTypes: (pointX: number, field?: string) => string[];
+};

package/es/components/fabric-chart/src/hooks/useCommon.js

@@ -0,0 +1,16 @@
+function useCommmon(canvas) {
+  function getEqualXTypes(pointX, field = "type") {
+    const types = [];
+    canvas.value.forEachObject((obj) => {
+      if (obj.origin && obj.left >= pointX - 3 && obj.left <= pointX + 3) {
+        types.push(obj.origin[field]);
+      }
+    });
+    return [...new Set(types)];
+  }
+  return {
+    getEqualXTypes
+  };
+}
+
+export { useCommmon as default };

package/es/components/fabric-chart/src/hooks/useCumputedPoint.d.ts

@@ -1,7 +1,14 @@
-import { IPropItems, IPointType } from '../interface';
-export declare function useCumputedPoint(propItems: IPropItems): {
+import { IPointType } from '../interface';
+import { AnyObject } from '../../../../../es/shared/types';
+export declare function useCumputedPoint(propItems: AnyObject): {
     cumputedX: (value: number | string, setAllCenter?: boolean) => any;
     cumputedY: (type: IPointType, scaleValueList: number[], value: number | string) => number;
     getXValue: (pointX: number) => string | undefined;
     getYValue: (type: IPointType, pointY: number) => number;
 };
+export declare function useBirthProcessCumputedPoint(propItems: AnyObject): {
+    cumputedX: (value: number | string) => any;
+    cumputedY: (key: string, range: [number, number], value: number | string) => number;
+    getXValue: (pointX: number) => string;
+    getYValue: (key: string, pointY: number) => number;
+};

package/es/components/fabric-chart/src/hooks/useCumputedPoint.js

@@ -56,5 +56,38 @@ function useCumputedPoint(propItems) {
     getYValue
   };
 }
+function useBirthProcessCumputedPoint(propItems) {
+  const { xAxis, originX, originY, xCellWidth, endY, timeXCell, startTime, scaleValues } = propItems;
+  function cumputedX(value) {
+    const time = new Date(value).getTime();
+    return (time - startTime) / timeXCell + originX;
+  }
+  function cumputedY(key, range, value) {
+    const [minValue] = range;
+    return endY - (+value - minValue) / propItems[`${key}YCell`];
+  }
+  function getXValue(pointX) {
+    const time = (pointX - originX) * timeXCell + startTime;
+    const d = new Date(time);
+    const month = `00${d.getMonth() + 1}`.slice(-2);
+    const day = `00${d.getDate()}`.slice(-2);
+    const hours = `00${d.getHours()}`.slice(-2);
+    const minutes = `00${d.getMinutes()}`.slice(-2);
+    const date = `${d.getFullYear()}-${month}-${day} ${hours}:${minutes}`;
+    return date;
+  }
+  function getYValue(key, pointY) {
+    const item = scaleValues.find((item2) => key === item2.key);
+    const [minValue] = (item == null ? void 0 : item.range) || [0];
+    const y = (endY - pointY) * propItems[`${key}YCell`] + minValue;
+    return Math.floor(y * 100) / 100;
+  }
+  return {
+    cumputedX,
+    cumputedY,
+    getXValue,
+    getYValue
+  };
+}
 
-export { useCumputedPoint };
+export { useBirthProcessCumputedPoint, useCumputedPoint };

package/es/components/fabric-chart/src/hooks/useGrid.d.ts

@@ -1,4 +1,4 @@
 import { Ref } from 'vue';
 import { fabric } from '../utils';
-import { IPropItems } from '../interface';
-export default function useGrid(canvas: Ref<fabric.Canvas>, propItems: IPropItems): void;
+import { AnyObject } from '../../../../../es/shared/types';
+export default function useGrid(canvas: Ref<fabric.Canvas>, propItems: AnyObject, isBirthProcess?: boolean): void;

package/es/components/fabric-chart/src/hooks/useGrid.js

@@ -2,36 +2,46 @@ import { onMounted, nextTick } from 'vue';
 import { fabric } from '../utils/index.js';
 import { drawLine, defaultBorderStyle } from './useDraw.js';
 
-function useGrid(canvas, propItems) {
-  var _a, _b;
+function useGrid(canvas, propItems, isBirthProcess = false) {
+  var _a, _b, _c, _d;
   const { gridYNumber, originY, grid, originX, endX, xCellWidth, yCellHeight, gridXNumber, endY } = propItems;
   const yList = [];
   const xList = [];
   const mainList = /* @__PURE__ */ new Set();
   for (let i = 0; i <= gridYNumber; i++) {
     const y = originY + parseInt(String(yCellHeight * (gridYNumber - i)));
-    const style = i % grid.subYCell === 0 ? ((_a = grid.mainLineStyle) == null ? void 0 : _a.x) || {} : grid.subLineStyle || {};
-    const line = drawLine([originX, y, endX, y], style);
-    if (i % grid.subYCell === 0) {
-      mainList.add(line);
-    } else {
+    if (isBirthProcess) {
+      const line = drawLine([originX, y, endX, y], { ...defaultBorderStyle, ...((_a = grid.mainLineStyle) == null ? void 0 : _a.x) || {} });
       yList.push(line);
+    } else {
+      const style = i % grid.subYCell === 0 ? ((_b = grid.mainLineStyle) == null ? void 0 : _b.x) || {} : grid.subLineStyle || {};
+      const line = drawLine([originX, y, endX, y], style);
+      if (i % grid.subYCell === 0) {
+        mainList.add(line);
+      } else {
+        yList.push(line);
+      }
     }
   }
   for (let i = 0; i <= gridXNumber; i++) {
     const x = originX + parseInt(String(xCellWidth * i));
-    let style = grid.subLineStyle || {};
-    if (i % grid.subSecondXCell === 0) {
-      style = grid.subSecondLineStyle || {};
-    }
-    if (i % grid.subXCell === 0) {
-      style = i !== 0 && i !== gridXNumber ? ((_b = grid.mainLineStyle) == null ? void 0 : _b.y) || {} : defaultBorderStyle;
-    }
-    const line = drawLine([x, originY, x, endY], style);
-    if (i % grid.subXCell === 0 && i !== 0 && i !== gridXNumber) {
-      mainList.add(line);
-    } else {
+    if (isBirthProcess) {
+      const line = drawLine([x, originY, x, endY], { ...defaultBorderStyle, ...((_c = grid.mainLineStyle) == null ? void 0 : _c.y) || {} });
       xList.push(line);
+    } else {
+      let style = grid.subLineStyle || {};
+      if (i % grid.subSecondXCell === 0) {
+        style = grid.subSecondLineStyle || {};
+      }
+      if (i % grid.subXCell === 0) {
+        style = i !== 0 && i !== gridXNumber ? ((_d = grid.mainLineStyle) == null ? void 0 : _d.y) || {} : defaultBorderStyle;
+      }
+      const line = drawLine([x, originY, x, endY], style);
+      if (i % grid.subXCell === 0 && i !== 0 && i !== gridXNumber) {
+        mainList.add(line);
+      } else {
+        xList.push(line);
+      }
     }
   }
   const group = new fabric.Group([...xList, ...yList, ...mainList], {

package/es/components/fabric-chart/src/hooks/useLeft.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
 import { fabric } from '../utils';
 import { IPropItems } from '../interface';
-export declare function useLeft(canvas: Ref<fabric.Canvas>, propItems: IPropItems, emits: any, setPopup: Function, pointTipProps: any, getXValue: Function, getYValue: Function, getEqualXTypes: Function, isAddPoint: Function, updateData: Function): {
+export declare function useLeft(canvas: Ref<fabric.Canvas>, propItems: IPropItems, emits: any, setPopup: Function, pointTipProps: any, cumputedX: Function, cumputedY: Function, getXValue: Function, getYValue: Function, isAddPoint: Function, updateData: Function): {
     drawScaleValue: (yScaleValueList: any[]) => void;
 };

package/es/components/fabric-chart/src/hooks/useLeft.js

@@ -1,8 +1,10 @@
 import { onMounted, nextTick } from 'vue';
 import { fabric } from '../utils/index.js';
 import { defaultBorderStyle, defaultTextStyle, defaultStyle, defaultRectStyle, drawPoint, drawTextGroup } from './useDraw.js';
+import useCommmon from './useCommon.js';
 
-function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, getYValue, getEqualXTypes, isAddPoint, updateData) {
+function useLeft(canvas, propItems, emits, setPopup, pointTipProps, cumputedX, cumputedY, getXValue, getYValue, isAddPoint, updateData) {
+  const { getEqualXTypes } = useCommmon(canvas);
   const {
     originY,
     endY,