cnhis-design-vue 3.4.0-release.3 → 3.4.0-release.7

package/es/components/fabric-chart/src/hooks/electrocardiogram/useElectrocardiogramChart.js

@@ -1,8 +1,9 @@
-import { reactive, computed, unref, watch, toRefs } from 'vue';
+import { reactive, watch, toRefs } from 'vue';
 import { defaultBorderStyle, defaultLineStyle, defaultTextStyle } from '../useDraw.js';
 import '../../../../../shared/utils/fabricjs/index.js';
 import 'date-fns';
-import { cloneDeep, isNumber, last } from 'lodash-es';
+import { getRoundNumber } from '../../utils/index.js';
+import { cloneDeep, last, isNumber } from 'lodash-es';
 import '../useEvent.js';
 import '../useShadow.js';
 import '../useCommon.js';
@@ -25,142 +26,105 @@ function useElectrocardiogramChart(canvas, props, emits, canvasRef, pointTipProp
     useRectRuler: null
   });
   const originX = 0, originY = 0;
-  const endX = computed(() => props.data.width);
-  const endY = computed(() => props.data.height);
-  const __dataList = computed(() => {
-    const { dataList: dataList2 = [], config = {} } = props.data;
-    const __dataList2 = cloneDeep(dataList2);
-    const matchItem = __dataList2.find((item) => config.lastDataKey && item.key === config.lastDataKey);
-    if (matchItem) {
-      return [...__dataList2, matchItem];
-    }
-    return __dataList2;
-  });
-  const xCellWidth = computed(() => {
-    return (endX.value - originX) / gridXNumber.value;
-  });
-  const yCellHeight = computed(() => {
-    return (endY.value - originY) / gridYNumber.value;
-  });
-  const gridXNumber = computed(() => {
-    var _a, _b, _c;
-    const { config, grid } = props.data;
-    if (isNumber(grid.gridXNumber))
-      return grid.gridXNumber;
-    const totalLength = (_c = (_b = (_a = last(__dataList.value)) == null ? void 0 : _a.data) == null ? void 0 : _b.length) != null ? _c : 0;
+  function buildDerived() {
+    var _a, _b, _c, _d, _e, _f;
+    const endX = props.data.width;
+    const endY = props.data.height;
+    const { dataList = [], config = {} } = props.data;
+    const list = cloneDeep(dataList);
+    const matchItem = list.find((item) => config.lastDataKey && item.key === config.lastDataKey);
+    const __dataList = matchItem ? [...list, matchItem] : list;
+    const maxLineNumber = list.length + 1;
+    const { grid } = props.data;
+    const totalLength = (_c = (_b = (_a = last(__dataList)) == null ? void 0 : _a.data) == null ? void 0 : _b.length) != null ? _c : 0;
     const totalSeconds = totalLength / config.hz;
-    return Math.ceil(totalSeconds / config.mainXCellValue);
-  });
-  const gridYNumber = computed(() => {
-    const { config, grid } = props.data;
-    if (isNumber(grid.gridYNumber))
-      return grid.gridYNumber;
-    const totalLineLength = __dataList.value.length;
-    return Math.ceil(totalValueMV.value * totalLineLength * 2 / config.mainYCellValue);
-  });
-  const totalValueMV = computed(() => {
-    var _a;
-    const { config } = props.data;
-    const totalData = (_a = last(__dataList.value)) == null ? void 0 : _a.data;
+    const gridXNumber = isNumber(grid.gridXNumber) ? grid.gridXNumber : Math.ceil(totalSeconds / config.mainXCellValue);
+    const totalData = ((_d = last(__dataList)) == null ? void 0 : _d.data) || [];
     const maxValue = Math.max(...totalData);
     const minValue = Math.min(...totalData);
     const totalValue = maxValue - minValue;
-    return config.valueUnit === "uv" ? totalValue * 1e-3 : config.valueUnit === "v" ? totalValue * 1e3 : totalValue;
-  });
-  const event = computed(() => {
-    var _a;
-    return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true };
-  });
-  const layoutInfo = computed(() => {
-    const { mode = "2-6" } = props.data;
-    const [columnNumber, rowNumber] = mode.split("-").map((n) => +n);
-    return {
-      columnNumber,
-      rowNumber
-    };
-  });
-  const rowSpace = computed(() => {
-    const { rowNumber } = layoutInfo.value;
-    const totalLineLength = __dataList.value.length;
-    return Math.round(gridYNumber.value / (rowNumber + (totalLineLength === ECG.MAXLINENUMBER ? 1 : 0)));
-  });
-  const dataList = computed(() => {
-    const { width, config, grid } = props.data;
-    const { columnNumber, rowNumber } = layoutInfo.value;
-    const columnWidth = width / columnNumber;
-    const dataListLen = __dataList.value.length;
-    const baseYCellNumber = Math.ceil(rowSpace.value / 2);
-    const firstRowLineMaxHeight = getFirstRowLineMaxHeight();
-    const _baseY = yCellHeight.value * baseYCellNumber;
-    const baseY = columnNumber === 1 || _baseY < firstRowLineMaxHeight ? yCellHeight.value * Math.ceil(firstRowLineMaxHeight / yCellHeight.value) : _baseY;
-    const baseX = xCellWidth.value;
-    return __dataList.value.map((item, idx) => {
-      const itemRowIdx = ECG.MAXLINENUMBER === dataListLen && idx === dataListLen - 1 ? rowNumber : idx % rowNumber;
-      const itemColumnIdx = ECG.MAXLINENUMBER === dataListLen && idx === dataListLen - 1 ? 0 : Math.floor(idx / rowNumber);
-      return {
-        ...item,
-        origin: {
-          x: itemColumnIdx * columnWidth + baseX,
-          y: itemRowIdx * (yCellHeight.value * rowSpace.value) + baseY,
-          rowIdx: itemRowIdx,
-          limitX: columnWidth - baseX
-        }
-      };
-    });
+    const totalValueMV = config.valueUnit === "uv" ? totalValue * 1e-3 : config.valueUnit === "v" ? totalValue * 1e3 : totalValue;
+    const totalLineLength = __dataList.length;
+    const gridYNumber = isNumber(grid.gridYNumber) ? grid.gridYNumber : Math.ceil(totalValueMV * totalLineLength * 2 / config.mainYCellValue);
+    const xCellWidth = (endX - originX) / gridXNumber;
+    const yCellHeight = (endY - originY) / gridYNumber;
+    const event = ((_e = props.data.grid) == null ? void 0 : _e.event) || { selectable: true, evented: true };
+    const columnNumber = +(props.data.columnNumber || 2);
+    const rowNumber = Math.ceil(list.length / columnNumber);
+    const dataRowNumber = rowNumber + (totalLineLength === maxLineNumber ? 1 : 0);
+    const rowSpace = props.data.isFullyCovered ? getRoundNumber((gridYNumber - 2) / dataRowNumber, 100) : ~~(gridYNumber / dataRowNumber);
+    const columnWidth = props.data.width / columnNumber;
+    const baseYCellNumber = Math.ceil(rowSpace / 2);
     function getFirstRowLineMaxHeight() {
-      const { valueUnit, mainYCellValue } = config;
-      const data1 = __dataList.value[0].data;
+      const { valueUnit, mainYCellValue: mainYCellValue2 } = config;
+      const data1 = __dataList[0].data;
       const data1Max = Math.max(...data1);
       const data1MaxHeight = computedY(data1Max);
       if (columnNumber !== 2) {
         return data1MaxHeight;
       }
-      const data7 = __dataList.value[6].data;
-      const data7Max = Math.max(...data7);
-      const data7MaxHeight = computedY(data7Max);
-      return Math.max(data1MaxHeight, data7MaxHeight);
+      const halfIndexData = __dataList[rowNumber].data;
+      const halfIndexDataMax = Math.max(...halfIndexData);
+      const halfIndexDataMaxHeight = computedY(halfIndexDataMax);
+      return Math.max(data1MaxHeight, halfIndexDataMaxHeight);
       function computedY(value) {
         const currentMV = valueUnit === "uv" ? value * 1e-3 : valueUnit === "v" ? value * 1e3 : value;
-        return currentMV / mainYCellValue * yCellHeight.value;
+        return currentMV / mainYCellValue2 * yCellHeight;
       }
     }
-  });
-  const calibrationLineHeight = computed(() => {
-    var _a;
-    const { calibrationLineGridYNumber, mainYCellValue } = ((_a = props.data) == null ? void 0 : _a.config) || {};
-    if (calibrationLineGridYNumber)
-      return yCellHeight.value * calibrationLineGridYNumber;
-    return mainYCellValue ? yCellHeight.value / mainYCellValue : yCellHeight.value;
-  });
-  const propItems = reactive({
-    canvasWidth: props.data.width,
-    canvasHeight: props.data.height,
-    borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
-    lineStyle: { ...defaultLineStyle, ...props.data.lineStyle },
-    titleStyle: { ...defaultTextStyle, ...props.data.titleStyle },
-    titleOffset: props.data.titleOffset,
-    measureLineStyle: { ...defaultLineStyle, ...props.data.measureLineStyle },
-    measureTextStyle: { ...defaultTextStyle, ...props.data.measureTextStyle },
-    grid: props.data.grid,
-    originX,
-    endX: endX.value,
-    originY,
-    endY: endY.value,
-    xCellWidth: xCellWidth.value,
-    yCellHeight: yCellHeight.value,
-    gridXNumber: gridXNumber.value,
-    gridYNumber: gridYNumber.value,
-    event: event.value,
-    dataList: dataList.value,
-    columnNumber: unref(layoutInfo).columnNumber,
-    rowNumber: unref(layoutInfo).rowNumber,
-    config: props.data.config,
-    calibrationLineHeight: unref(calibrationLineHeight)
-  });
+    const firstRowLineMaxHeight = getFirstRowLineMaxHeight();
+    const _baseY = yCellHeight * baseYCellNumber;
+    const baseYNumber = props.data.isFullyCovered ? getRoundNumber(firstRowLineMaxHeight / yCellHeight, 100) : Math.ceil(firstRowLineMaxHeight / yCellHeight);
+    const baseY = columnNumber === 1 || _baseY < firstRowLineMaxHeight ? yCellHeight * baseYNumber : _baseY;
+    const baseX = xCellWidth;
+    const derivedDataList = __dataList.map((item, idx) => {
+      const isLastLine = maxLineNumber === totalLineLength && idx === totalLineLength - 1;
+      const itemRowIdx = isLastLine ? rowNumber : idx % rowNumber;
+      const itemColumnIdx = isLastLine ? 0 : ~~(idx / rowNumber);
+      return {
+        ...item,
+        origin: {
+          x: itemColumnIdx * columnWidth + baseX,
+          y: itemRowIdx * (yCellHeight * rowSpace) + baseY,
+          rowIdx: itemRowIdx,
+          limitX: columnWidth - baseX
+        }
+      };
+    });
+    const { calibrationLineGridYNumber, mainYCellValue } = ((_f = props.data) == null ? void 0 : _f.config) || {};
+    const calibrationLineHeight = calibrationLineGridYNumber ? yCellHeight * calibrationLineGridYNumber : mainYCellValue ? yCellHeight / mainYCellValue : yCellHeight;
+    return {
+      canvasWidth: props.data.width,
+      canvasHeight: props.data.height,
+      borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
+      lineStyle: { ...defaultLineStyle, ...props.data.lineStyle },
+      titleStyle: { ...defaultTextStyle, ...props.data.titleStyle },
+      titleOffset: props.data.titleOffset,
+      measureLineStyle: { ...defaultLineStyle, ...props.data.measureLineStyle },
+      measureTextStyle: { ...defaultTextStyle, ...props.data.measureTextStyle },
+      grid: props.data.grid,
+      originX,
+      endX,
+      originY,
+      endY,
+      xCellWidth,
+      yCellHeight,
+      gridXNumber,
+      gridYNumber,
+      event,
+      dataList: derivedDataList,
+      columnNumber,
+      rowNumber,
+      config: props.data.config,
+      calibrationLineHeight,
+      maxLineNumber
+    };
+  }
+  const propItems = reactive(buildDerived());
   function getGridInfo() {
     return {
-      cellWidth: xCellWidth.value,
-      cellHeight: yCellHeight.value,
+      cellWidth: propItems.xCellWidth,
+      cellHeight: propItems.yCellHeight,
       smallCellNumber: ECG.SMALLCELLNUMBER
     };
   }

package/es/components/fabric-chart/src/hooks/electrocardiogram/useMeasureInstrument.js

@@ -6,6 +6,7 @@ import '../useEvent.js';
 import '../useShadow.js';
 import '../useCommon.js';
 import { isNumber } from 'lodash-es';
+import '../../utils/eventBus.js';
 import 'date-fns';
 import '../../constants/index.js';
 import '@vueuse/shared';

package/es/components/fabric-chart/src/hooks/newBirthProcess/useNewBirthProcessChart.js

@@ -1,4 +1,4 @@
-import { ref, computed, reactive, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { defaultBorderStyle } from '../useDraw.js';
 import '../../../../../shared/utils/fabricjs/index.js';
 import { format } from 'date-fns';
@@ -18,125 +18,77 @@ import { useNewBirthProcess } from './useNewBirthProcess.js';
 
 function useNewBirthProcessChart(canvas, props, emits, canvasRef, pointTipProps, pointMenuProps) {
   const redrawPoints = ref();
-  const leftScales = computed(
-    () => props.data.scaleValues.filter((item) => item.layout === "left" && item.show)
-  );
-  const rightScales = computed(
-    () => props.data.scaleValues.filter((item) => item.layout === "right" && item.show)
-  );
-  const originX = computed(
-    () => {
-      var _a;
-      return (_a = leftScales.value) == null ? void 0 : _a.reduce((width, item) => {
-        width += item.width;
-        return width;
-      }, 0);
-    }
-  );
-  const endX = computed(() => {
-    var _a;
-    const { width } = props.data;
-    const rightScalesWidth = (_a = rightScales.value) == null ? void 0 : _a.reduce((width2, item) => {
-      width2 += item.width;
-      return width2;
-    }, 0);
-    return width - (rightScalesWidth || 15);
-  });
-  const gridXNumber = computed(() => props.data.grid.mainXCell || 20);
-  const gridYNumber = computed(() => props.data.grid.mainYCell || 8);
-  const xCellWidth = computed(() => {
-    return (endX.value - originX.value) / gridXNumber.value;
-  });
-  const yCellHeight = computed(() => {
-    var _a;
+  function buildDerived() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const leftScales = props.data.scaleValues.filter((item) => item.layout === "left" && item.show);
+    const rightScales = props.data.scaleValues.filter((item) => item.layout === "right" && item.show);
+    const originX = leftScales == null ? void 0 : leftScales.reduce((width, item) => width + item.width, 0);
+    const rightScalesWidth = rightScales == null ? void 0 : rightScales.reduce((width, item) => width + item.width, 0);
+    const endX = props.data.width - (rightScalesWidth || 15);
+    const gridXNumber = props.data.grid.mainXCell || 20;
+    const gridYNumber = props.data.grid.mainYCell || 8;
+    const timeXAxisHeight = ((_b = (_a = leftScales.concat(rightScales)) == null ? void 0 : _a.length) != null ? _b : 0) > 0 ? 20 : 0;
     const { xAxis, height, other } = props.data;
-    const xAxisNumber = Object.values(xAxis).reduce((num, item) => {
-      if (item.show)
-        num++;
-      return num;
-    }, 0);
-    const hasAlertLine = ((_a = other == null ? void 0 : other.alertLineList.length) != null ? _a : 0) > 0;
-    return (height - timeXAxisHeight.value) / (gridYNumber.value + xAxisNumber + (hasAlertLine ? 1 : 0));
-  });
-  const originY = computed(() => {
-    var _a;
-    const { xAxis, other } = props.data;
-    const xAxisNumber = Object.values(xAxis).reduce((num, item) => {
-      if (item.show && item.position === "top")
-        num++;
-      return num;
-    }, 0);
-    const hasAlertLine = ((_a = other == null ? void 0 : other.alertLineList.length) != null ? _a : 0) > 0;
-    return yCellHeight.value * (xAxisNumber || hasAlertLine ? 1 : 0);
-  });
-  const endY = computed(() => {
-    const { xAxis, height } = props.data;
-    const xAxisNumber = Object.values(xAxis).reduce((num, item) => {
-      if (item.show && item.position === "bottom")
-        num++;
-      return num;
-    }, 0);
-    return height - yCellHeight.value * xAxisNumber - timeXAxisHeight.value;
-  });
-  const timeXAxisHeight = computed(() => {
-    const scalesList = leftScales.value.concat(rightScales.value);
-    return (scalesList == null ? void 0 : scalesList.length) > 0 ? 20 : 0;
-  });
-  const startTime = computed(() => getTime(props.data.xAxis.time.startTime));
-  const timeXCell = computed(() => {
+    const xAxisNumberAll = Object.values(xAxis).reduce((num, item) => item.show ? num + 1 : num, 0);
+    const hasAlertLine = ((_c = other == null ? void 0 : other.alertLineList.length) != null ? _c : 0) > 0;
+    const yCellHeight = (height - timeXAxisHeight) / (gridYNumber + xAxisNumberAll + (hasAlertLine ? 1 : 0));
+    const xAxisNumberTop = Object.values(xAxis).reduce(
+      (num, item) => item.show && item.position === "top" ? num + 1 : num,
+      0
+    );
+    const originY = yCellHeight * (xAxisNumberTop || hasAlertLine ? 1 : 0);
+    const xAxisNumberBottom = Object.values(xAxis).reduce(
+      (num, item) => item.show && item.position === "bottom" ? num + 1 : num,
+      0
+    );
+    const endY = height - yCellHeight * xAxisNumberBottom - timeXAxisHeight;
+    const xCellWidth = (endX - originX) / gridXNumber;
+    const startTime = getTime(props.data.xAxis.time.startTime);
     const { spaceValue, spaceGridNumber } = props.data.xAxis.time || {};
-    return spaceValue * 60 * 60 * 1e3 / (xCellWidth.value * spaceGridNumber);
-  });
-  const extraTimeXAxisList = computed(() => {
-    var _a, _b, _c;
-    const scalesTimeList = (_c = (_b = (_a = leftScales.value.concat(rightScales.value)) == null ? void 0 : _a[0]) == null ? void 0 : _b.data) == null ? void 0 : _c.map((item) => getTime(item.time));
+    const timeXCell = spaceValue * 60 * 60 * 1e3 / (xCellWidth * spaceGridNumber);
+    const scalesTimeList = ((_f = (_e = (_d = leftScales.concat(rightScales)) == null ? void 0 : _d[0]) == null ? void 0 : _e.data) == null ? void 0 : _f.map((item) => getTime(item.time))) || [];
     const min = Math.min(...scalesTimeList);
     let max = Math.min(Math.max(...scalesTimeList));
-    const timesXCell = timeXCell.value * xCellWidth.value;
-    const xCellTimeList = range(1, gridXNumber.value + 1).reduce(
-      (timeList, cur, next) => timeList.concat(startTime.value + cur * timesXCell),
-      [startTime.value]
+    const timesXCell = timeXCell * xCellWidth;
+    const xCellTimeList = range(1, gridXNumber + 1).reduce(
+      (timeList, cur) => timeList.concat(startTime + cur * timesXCell),
+      [startTime]
     );
-    max = Math.min(max, last(xCellTimeList));
+    max = Math.min(max, (_g = last(xCellTimeList)) != null ? _g : max);
     const startIndx = xCellTimeList.findIndex((time) => Math.abs(time - min) < timesXCell);
     const endIndx = xCellTimeList.findIndex((time) => Math.abs(time - max) < timesXCell) + 1;
-    return xCellTimeList.filter((time, idx) => idx >= startIndx && idx <= endIndx).map((time) => format(new Date(time), "yyyy-MM-dd HH:mm:ss"));
-  });
-  const cervixYCell = computed(() => {
-    const { scaleValues } = props.data;
-    const cervixItem = scaleValues.find((item) => item.key === "cervix");
-    return yCellHeight.value / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1);
-  });
-  const event = computed(() => {
-    var _a;
-    return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true, hovered: true };
-  });
-  const propItems = reactive({
-    canvasWidth: props.data.width,
-    canvasHeight: props.data.height,
-    borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle || {} },
-    selectionStyle: props.data.selectionStyle || {},
-    grid: props.data.grid,
-    other: props.data.other,
-    originX: originX.value,
-    endX: endX.value,
-    originY: originY.value,
-    endY: endY.value,
-    xCellWidth: xCellWidth.value,
-    yCellHeight: yCellHeight.value,
-    gridXNumber: gridXNumber.value,
-    gridYNumber: gridYNumber.value,
-    xAxis: props.data.xAxis,
-    leftScales: leftScales.value,
-    rightScales: rightScales.value,
-    startTime: startTime.value,
-    timeXCell: timeXCell.value,
-    cervixYCell: cervixYCell.value,
-    scaleValues: props.data.scaleValues,
-    timeXAxisHeight: timeXAxisHeight.value,
-    extraTimeXAxisList: extraTimeXAxisList.value,
-    event: event.value
-  });
+    const extraTimeXAxisList = xCellTimeList.filter((time, idx) => idx >= startIndx && idx <= endIndx).map((time) => format(new Date(time), "yyyy-MM-dd HH:mm:ss"));
+    const cervixItem = props.data.scaleValues.find((item) => item.key === "cervix");
+    const cervixYCell = yCellHeight / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1);
+    const event = ((_h = props.data.grid) == null ? void 0 : _h.event) || { selectable: true, evented: true, hovered: true };
+    return {
+      canvasWidth: props.data.width,
+      canvasHeight: props.data.height,
+      borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
+      selectionStyle: props.data.selectionStyle || {},
+      grid: props.data.grid,
+      other: props.data.other,
+      originX,
+      endX,
+      originY,
+      endY,
+      xCellWidth,
+      yCellHeight,
+      gridXNumber,
+      gridYNumber,
+      xAxis: props.data.xAxis,
+      leftScales,
+      rightScales,
+      startTime,
+      timeXCell,
+      cervixYCell,
+      scaleValues: props.data.scaleValues,
+      timeXAxisHeight,
+      extraTimeXAxisList,
+      event
+    };
+  }
+  const propItems = reactive(buildDerived());
   watch(
     () => canvas.value,
     (value) => {

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

@@ -1,12 +1,13 @@
 import { type Ref } from 'vue';
 import { fabric } from '../../../../../shared/utils/fabricjs';
 import { AnyObject } from '../../../../../shared/types';
-import { IObject, IPointTipProps, IPointMenuProps } from '../../../../../components/fabric-chart/src/interface';
+import { IObject, ICoordinateValue, IPointTipProps, IPointMenuProps, PopupMenuItem } from '../../../../../components/fabric-chart/src/interface';
 export declare function useCenter(canvas: Ref<fabric.Canvas>, propItems: AnyObject, emits: Function, pointTipProps: IPointTipProps, pointMenuProps: IPointMenuProps, isPopupTipRender: boolean): {
     redrawPoints: (ItemObj?: AnyObject) => void;
-    clickMenu: ({ item, target }: {
-        item: any;
+    clickMenu: ({ item, target, pointer }: {
+        item: PopupMenuItem;
         target: any;
+        pointer: ICoordinateValue;
     }) => void;
     moveLimit: (point: IObject, limitRight?: any) => void;
     setPopup: (point: any, status?: string) => void;

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

@@ -17,6 +17,7 @@ import './useTop.js';
 import './useOther.js';
 import '../../../../../shared/utils/index.js';
 import { useIntervalFn } from '@vueuse/core';
+import { singlePointAddEventBus } from '../../utils/eventBus.js';
 
 function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPopupTipRender) {
   const {
@@ -248,6 +249,21 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
     currentSelection && canvas.value.remove(currentSelection);
     currentSelection = null;
   }
+  function createChildrenMenuList(itemList2) {
+    return itemList2.map((item) => ({
+      key: item.key,
+      label: item.title,
+      mode: "add",
+      origin: {
+        title: item.title,
+        unit: item.unit,
+        type: item.bigType,
+        dataIndex: item.dataIndex,
+        key: item.key,
+        linkKey: item.linkKey
+      }
+    }));
+  }
   function handleRightClick(event2) {
     pointTipProps.show = false;
     const {
@@ -260,14 +276,8 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
         const {
           menuList = []
         } = extraMenuConfig;
-        pointMenuProps.list = filter(OTHER_MENU, (o) => o.type === "add").concat(menuList).map((item) => {
-          return {
-            ...item,
-            renderItem: () => item.label,
-            type: item.key || item.type,
-            pointer: event2.pointer
-          };
-        });
+        pointMenuProps.list = filter(OTHER_MENU, (o) => o.key === "add").concat(menuList);
+        pointMenuProps.list[0].children = createChildrenMenuList(itemList);
       } else {
         if (event2.target.__type !== "main")
           return;
@@ -276,22 +286,21 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
           x: point.left,
           y: point.top
         }, event2.target, []);
-        pointMenuProps.list = filter(OTHER_MENU, (o) => o.type !== "edit").map((item) => {
+        pointMenuProps.list = filter(OTHER_MENU, (o) => o.key !== "edit").map((item) => {
           return {
             ...item,
-            renderItem: () => item.label,
-            type: item.key || item.type,
-            pointer: {
-              x: point.left,
-              y: point.top
-            },
-            ...item.type === "add" ? {} : {
+            ...item.key !== "add" && {
               origin: {
                 ...point.origin
               }
             }
           };
         });
+        const newChildren = itemList.filter((item) => {
+          const key = item.linkKey || item.key;
+          return !getEqualXTypes(getGridPoints(), point.left, "key", xCellWidth).includes(key);
+        });
+        pointMenuProps.list[0].children = createChildrenMenuList(newChildren);
       }
     }
     function setPointMenuProps(point, target, list) {
@@ -305,32 +314,46 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
   }
   function clickMenu({
     item,
-    target
+    target,
+    pointer
   }) {
-    var _a;
+    var _a, _b, _c;
     const {
-      type,
+      key,
       origin,
-      pointer
+      mode
     } = item;
     const params = {
       ...origin
     };
-    if (!origin) {
-      Object.assign(params, {
-        data: {
-          time: getXValue(pointer.x)
-        },
-        type: null
-      });
-    }
-    if (filter(OTHER_MENU, (o) => o.type !== "edit").map((item2) => item2.type).includes(type)) {
-      if (type === "remove") {
+    if (key === "remove" || mode === "add") {
+      const eventName = key === "remove" ? "remove" : "add";
+      if (key === "remove") {
         updateData(params, "remove");
+      } else {
+        const pointKey = origin.linkKey || origin.key;
+        params.data = [{
+          time: getXValue(pointer.x),
+          value: getYValue(origin.type, pointer.y),
+          ...origin.linkKey && {
+            key: origin.key
+          }
+        }];
+        updateData({
+          ...params,
+          key: pointKey
+        }, "add");
+        const firstLeft = pointKey ? (_b = (_a = gridPointsMap.get(pointKey)) == null ? void 0 : _a[0]) == null ? void 0 : _b.left : void 0;
+        const minLeft = firstLeft != null ? firstLeft : pointer.x;
+        const limitRight = minLeft - xCellWidth;
+        singlePointAddEventBus.emit({
+          ...origin,
+          limitRight
+        });
       }
-      emits(type, params);
+      emits(eventName, params);
     } else {
-      (_a = extraMenuConfig.click) == null ? void 0 : _a.call(extraMenuConfig, type, params);
+      (_c = extraMenuConfig.click) == null ? void 0 : _c.call(extraMenuConfig, key, params);
     }
   }
   function drawCordonLine(item, scaleValue) {
@@ -524,7 +547,8 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
         const {
           type,
           selfKey,
-          dataIndex
+          dataIndex,
+          data: oldData
         } = point.origin;
         const params = {
           ...point.origin,
@@ -575,7 +599,8 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
         } else {
           emits("change", {
             ...omit(params, ["selfKey", "lineAttr"]),
-            key: selfKey
+            key: selfKey,
+            oldData
           });
           updateData(params, "change");
         }
@@ -813,7 +838,7 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
     });
   }
   function redrawPoints(ItemObj) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     batchAddPoints.size && ((_a = canvas.value) == null ? void 0 : _a.remove(...doRemovePoints([...batchAddPoints])));
     batchAddPoints.clear();
     batchAddDatas = [];
@@ -823,12 +848,13 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
         scaleValue
       } = ItemObj;
       const item = scaleValue.dataList[dataIndex];
-      (_b = canvas.value) == null ? void 0 : _b.remove(...doRemovePoints(gridPointsMap.get(item.key)));
+      const points = (_b = gridPointsMap.get(item.key)) != null ? _b : [];
+      (_c = canvas.value) == null ? void 0 : _c.remove(...doRemovePoints(points));
       gridPointsMap.delete(item.key);
       drawPolyLine(item, dataIndex, scaleValue);
     } else {
       yScaleValue = cloneDeep(scaleValues);
-      gridPointsMap.size && ((_c = canvas.value) == null ? void 0 : _c.remove(...doRemovePoints(getGridPoints())));
+      gridPointsMap.size && ((_d = canvas.value) == null ? void 0 : _d.remove(...doRemovePoints(getGridPoints())));
       gridPointsMap.clear();
       init();
     }