cnhis-design-vue 3.1.37-beta.1 → 3.1.37

package/es/components/fabric-chart/index.d.ts

@@ -1,7 +1,7 @@
 import { SFCWithInstall } from '../../../es/shared/types';
 declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
-    mode: {
-        type: import("vue").PropType<import("./src/interface").IMode>;
+    type: {
+        type: import("vue").PropType<import("./src/interface").IType>;
         default: string;
     };
     data: {
@@ -13,8 +13,8 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
     };
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-        mode: {
-            type: import("vue").PropType<import("./src/interface").IMode>;
+        type: {
+            type: import("vue").PropType<import("./src/interface").IType>;
             default: string;
         };
         data: {
@@ -27,10 +27,10 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
     }>> & {
         onChange?: ((...args: any[]) => any) | undefined;
         onSelect?: ((...args: any[]) => any) | undefined;
-        onDelete?: ((...args: any[]) => any) | undefined;
         onAdd?: ((...args: any[]) => any) | undefined;
+        onRemove?: ((...args: any[]) => any) | undefined;
     }>>;
-    emits: (event: "delete" | "change" | "add" | "select", ...args: any[]) => void;
+    emits: (event: "change" | "add" | "remove" | "select", ...args: any[]) => void;
     isTemperature: import("vue").ComputedRef<boolean>;
     canvasRef: any;
     canvas: import("vue").Ref<any>;
@@ -55,6 +55,29 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
         target: any;
     };
     clickMenu: import("vue").Ref<any>;
+    init: () => {
+        propItems: any;
+        redrawPoints: import("vue").Ref<any>;
+        select: import("vue").Ref<any>;
+        pointTipProps: {
+            show: boolean;
+            point: {
+                x: number;
+                y: number;
+            };
+            list: string[];
+        };
+        pointMenuProps: {
+            show: boolean;
+            point: {
+                x: number;
+                y: number;
+            };
+            list: any[];
+            target: any;
+        };
+        clickMenu: import("vue").Ref<any>;
+    };
     PopupTip: import("vue").DefineComponent<{
         show: {
             type: BooleanConstructor;
@@ -159,9 +182,9 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
         show: boolean;
         list: unknown[];
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "change" | "add" | "select")[], "delete" | "change" | "add" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    mode: {
-        type: import("vue").PropType<import("./src/interface").IMode>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "add" | "remove" | "select")[], "remove" | "change" | "add" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: import("vue").PropType<import("./src/interface").IType>;
         default: string;
     };
     data: {
@@ -174,9 +197,9 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onSelect?: ((...args: any[]) => any) | undefined;
-    onDelete?: ((...args: any[]) => any) | undefined;
     onAdd?: ((...args: any[]) => any) | undefined;
+    onRemove?: ((...args: any[]) => any) | undefined;
 }, {
-    mode: import("./src/interface").IMode;
+    type: import("./src/interface").IType;
 }>>;
 export default FabricChart;

package/es/components/fabric-chart/src/FabricChart.vue.d.ts

@@ -1,9 +1,9 @@
 import { PropType } from 'vue';
-import { IMode } from './interface';
+import { IType } from './interface';
 import { AnyObject } from '../../../../es/shared/types';
 declare const _default: import("vue").DefineComponent<{
-    mode: {
-        type: PropType<IMode>;
+    type: {
+        type: PropType<IType>;
         default: string;
     };
     data: {
@@ -15,8 +15,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-        mode: {
-            type: PropType<IMode>;
+        type: {
+            type: PropType<IType>;
             default: string;
         };
         data: {
@@ -29,10 +29,10 @@ declare const _default: import("vue").DefineComponent<{
     }>> & {
         onChange?: ((...args: any[]) => any) | undefined;
         onSelect?: ((...args: any[]) => any) | undefined;
-        onDelete?: ((...args: any[]) => any) | undefined;
         onAdd?: ((...args: any[]) => any) | undefined;
+        onRemove?: ((...args: any[]) => any) | undefined;
     }>>;
-    emits: (event: "delete" | "change" | "add" | "select", ...args: any[]) => void;
+    emits: (event: "change" | "add" | "remove" | "select", ...args: any[]) => void;
     isTemperature: import("vue").ComputedRef<boolean>;
     canvasRef: any;
     canvas: import("vue").Ref<any>;
@@ -57,6 +57,29 @@ declare const _default: import("vue").DefineComponent<{
         target: any;
     };
     clickMenu: import("vue").Ref<any>;
+    init: () => {
+        propItems: any;
+        redrawPoints: import("vue").Ref<any>;
+        select: import("vue").Ref<any>;
+        pointTipProps: {
+            show: boolean;
+            point: {
+                x: number;
+                y: number;
+            };
+            list: string[];
+        };
+        pointMenuProps: {
+            show: boolean;
+            point: {
+                x: number;
+                y: number;
+            };
+            list: any[];
+            target: any;
+        };
+        clickMenu: import("vue").Ref<any>;
+    };
     PopupTip: import("vue").DefineComponent<{
         show: {
             type: BooleanConstructor;
@@ -161,9 +184,9 @@ declare const _default: import("vue").DefineComponent<{
         show: boolean;
         list: unknown[];
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "change" | "add" | "select")[], "delete" | "change" | "add" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    mode: {
-        type: PropType<IMode>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "add" | "remove" | "select")[], "remove" | "change" | "add" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<IType>;
         default: string;
     };
     data: {
@@ -176,9 +199,9 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onSelect?: ((...args: any[]) => any) | undefined;
-    onDelete?: ((...args: any[]) => any) | undefined;
     onAdd?: ((...args: any[]) => any) | undefined;
+    onRemove?: ((...args: any[]) => any) | undefined;
 }, {
-    mode: IMode;
+    type: IType;
 }>;
 export default _default;

package/es/components/fabric-chart/src/FabricChart.vue.js

@@ -3,32 +3,32 @@ import { fabric } from './utils/index.js';
 import PopupTip from './components/PopupTip.vue.js';
 import PopupMenu from './components/PopupMenu.js';
 import useTemperatureChart from './hooks/useTemperatureChart.js';
+import useBirthProcessChart from './hooks/useBirthProcessChart.js';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "FabricChart",
   props: {
-    mode: { type: String, default: "temperature" },
+    type: { type: String, default: "temperature" },
     data: { type: Object, required: true },
     addRenderItem: { type: Function }
   },
   emits: [
     "change",
     "add",
-    "delete",
+    "remove",
     "select"
   ],
   setup(__props, { expose, emit: emits }) {
     const props = __props;
-    computed(() => props.mode === "temperature");
+    const isTemperature = computed(() => props.type === "temperature");
     const canvasRef = ref(null);
     const canvas = ref();
-    const { propItems, redrawPoints, select, pointTipProps, pointMenuProps, clickMenu } = useTemperatureChart(
-      canvas,
-      props,
-      emits,
-      canvasRef
-    );
+    const { propItems, redrawPoints, select, pointTipProps, pointMenuProps, clickMenu } = init();
+    function init() {
+      const params = [canvas, props, emits, canvasRef];
+      return isTemperature.value ? useTemperatureChart(...params) : useBirthProcessChart(...params);
+    }
     onMounted(() => {
       canvas.value = new fabric.Canvas(canvasRef.value, {
         width: propItems.canvasWidth,

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

@@ -1,24 +1,7 @@
 import { Ref } from 'vue';
 import { fabric } from '../utils';
 import { AnyObject } from '../../../../../es/shared/types';
-export declare function useBirthProcess(canvas: Ref<fabric.Canvas>, propItems: AnyObject, emits: any): {
-    pointTipProps: {
-        show: boolean;
-        point: {
-            x: number;
-            y: number;
-        };
-        list: string[];
-    };
-    pointMenuProps: {
-        show: boolean;
-        point: {
-            x: number;
-            y: number;
-        };
-        list: any[];
-        target: any;
-    };
+export declare function useBirthProcess(canvas: Ref<fabric.Canvas>, propItems: AnyObject, emits: any, pointTipProps: any, pointMenuProps: any, commonFunc: AnyObject): {
     clickMenu: ({ item, target }: {
         item: any;
         target: any;

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

@@ -1,15 +1,13 @@
-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 { drawLine, drawPoint, defaultTextStyle, drawText, defaultRectStyle } from './useDraw.js';
 import { fabric } from '../utils/index.js';
 import { getIndex, isEffectiveNode } from '../utils/utils.js';
-import { useCommon } from './useCommon.js';
 import { cloneDeep } from 'lodash-es';
 
-function useBirthProcess(canvas, propItems, emits) {
+function useBirthProcess(canvas, propItems, emits, pointTipProps, pointMenuProps, commonFunc) {
   const { cumputedX, cumputedY, getXValue, getYValue } = useBirthProcessCumputedPoint(propItems);
-  const { getEqualXTypes } = useCommon(canvas);
+  const { getEqualXTypes, repeatTip } = commonFunc;
   const {
     xAxis,
     grid,
@@ -30,20 +28,18 @@ function useBirthProcess(canvas, propItems, emits) {
     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);
+  init();
+  function init() {
+    drawYScale();
+    drawXScale();
+    drawBorder();
+    drawPolyLine();
+    setCanvasEvent();
+    drawIcons();
+  }
   function drawPolyLine() {
     yScaleValue.forEach((item, dataIndex) => {
       var _a;
@@ -161,8 +157,8 @@ function useBirthProcess(canvas, propItems, emits) {
     const { dataIndex, data, index, key } = params;
     const item = yScaleValue.find((v) => v.key === key);
     switch (mode) {
-      case "delete":
-        item.data.splice(index, 0);
+      case "remove":
+        item.data.splice(index, 1);
         break;
       case "change":
         item.data[index] = data;
@@ -240,7 +236,7 @@ function useBirthProcess(canvas, propItems, emits) {
             pointMenuProps.target = null;
             pointMenuProps.list = ["\u65B0\u589E\u8282\u70B9"];
             yScaleValue.forEach((item) => {
-              if (!getEqualXTypes(x, "key").includes(item.key)) {
+              if (!getEqualXTypes(x, "key", xCellWidth).includes(item.key)) {
                 if (["cervix", "fetalPresentation"].includes(item.key) && y < originYCervix)
                   return;
                 pointMenuProps.list.push(getPointMenuList(item, event2.pointer));
@@ -248,17 +244,19 @@ function useBirthProcess(canvas, propItems, emits) {
             });
             if (pointMenuProps.list.length === 1) {
               pointMenuProps.show = false;
+              repeatTip();
               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)) {
+            canvas.value.forEachObject((obj) => {
+              if (obj.origin && obj.left === event2.target.left && obj.top === event2.target.top) {
                 pointMenuProps.list.push({
-                  ...getPointMenuList(item, event2.pointer),
-                  mode: "delete",
-                  index: event2.target.origin.index
+                  renderItem: () => obj.origin.title,
+                  origin: { ...obj.origin },
+                  mode: "remove",
+                  pointer: event2.pointer
                 });
               }
             });
@@ -283,20 +281,120 @@ function useBirthProcess(canvas, propItems, emits) {
   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");
+    if (item.mode === "remove") {
+      emits("remove", params);
+      updateData(params, "remove");
     } else {
+      Object.assign(params, {
+        data: {
+          time: getXValue(item.pointer.x),
+          value: getYValue(item.origin.key, item.pointer.y)
+        }
+      });
       emits("add", params);
       updateData(params);
     }
   }
+  function drawIcons() {
+    const leftX = leftAddAreaWidth / 2;
+    const rightX = canvasWidth - rightAddAreaWidth / 2;
+    _drawIcons(leftScales, leftX);
+    _drawIcons(rightScales, rightX);
+    function _drawIcons(scales, left) {
+      if (!scales.length)
+        return;
+      let topY = originY;
+      const objs = [];
+      scales.forEach((item) => {
+        const title = item.title.split("").join("\n");
+        const dataIndex = scaleValues.findIndex((_item) => _item.key === item.key);
+        const text = new fabric.Text(String(title), {
+          ...defaultTextStyle,
+          ...item.titleStyle || {},
+          originY: "top",
+          left,
+          top: topY,
+          lineHeight: 1
+        });
+        const icon = drawPoint(item.type, {
+          left,
+          top: topY + text.height + 3,
+          ...item.pointAttr,
+          originY: "top",
+          origin: {
+            title: item.title,
+            unit: item.unit,
+            type: item.type,
+            dataIndex,
+            key: item.key,
+            isMenu: true
+          },
+          originLeft: left,
+          originTop: topY + text.height + 3,
+          ...propItems.event
+        });
+        topY += text.height + icon.height + 15;
+        setIconEvent(icon);
+        objs.push(text, icon);
+      });
+      setVerticalCenter(objs);
+      canvas.value.add(...objs);
+    }
+    function setVerticalCenter(objs) {
+      const lastobj = objs.at(-1);
+      const wrapHalf = (endY - originY) / 2;
+      const contentHalf = (lastobj.height + lastobj.top - originY) / 2;
+      objs.forEach((obj) => {
+        const top = obj.top + wrapHalf - contentHalf;
+        obj.set({
+          top,
+          originTop: top
+        });
+      });
+    }
+  }
+  function setIconEvent(point) {
+    point.on("moving", () => {
+      point.set("originY", "center");
+      if (isLimit2(point)) {
+        moveLimit(point);
+        setPopup(point);
+      } else {
+        pointTipProps.show = false;
+      }
+    });
+    point.on("mouseup:before", (event2) => {
+      pointTipProps.show = false;
+      if (event2.e.button === 0) {
+        if (isLimit2(point)) {
+          const isRepeat = getEqualXTypes(point.left, "key", xCellWidth).includes(point.origin.key);
+          if (isRepeat) {
+            repeatTip();
+          } else {
+            const params = {
+              data: {
+                time: getXValue(point.left),
+                value: getYValue(point.origin.key, point.top)
+              },
+              ...point.origin
+            };
+            emits("add", params);
+            updateData(params);
+          }
+        }
+      }
+      setRestore(point);
+    });
+    function isLimit2(point2) {
+      const { left, top } = point2;
+      return left >= originX && left <= endX && top >= originY && top <= endY;
+    }
+  }
+  function setRestore(point) {
+    point.setCoords().set({ originY: "top", left: point.originLeft, top: point.originTop });
+  }
   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;
@@ -400,18 +498,7 @@ function useBirthProcess(canvas, propItems, emits) {
     });
     canvas.value.add(border);
   }
-  onMounted(() => {
-    nextTick(() => {
-      drawYScale();
-      drawXScale();
-      drawBorder();
-      drawPolyLine();
-      setCanvasEvent();
-    });
-  });
   return {
-    pointTipProps,
-    pointMenuProps,
     clickMenu
   };
 }

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

@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+export default function useBirthProcessChart(canvas: Ref<fabric.Canvas>, props: any, emits: any, canvasRef: Ref<any>): {
+    propItems: any;
+    redrawPoints: Ref<any>;
+    select: Ref<any>;
+    pointTipProps: {
+        show: boolean;
+        point: {
+            x: number;
+            y: number;
+        };
+        list: string[];
+    };
+    pointMenuProps: {
+        show: boolean;
+        point: {
+            x: number;
+            y: number;
+        };
+        list: any[];
+        target: any;
+    };
+    clickMenu: Ref<any>;
+};

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

@@ -0,0 +1,151 @@
+import { ref, reactive, computed, onMounted, nextTick } from 'vue';
+import { defaultBorderStyle } from './useDraw.js';
+import '../utils/index.js';
+import './useShadow.js';
+import 'lodash-es';
+import { useEvent, useCanvasEvent } from './useEvent.js';
+import { useBirthProcess } from './useBirthProcess.js';
+import { useCommon } from './useCommon.js';
+
+function useBirthProcessChart(canvas, props, emits, canvasRef) {
+  const select = ref();
+  const redrawPoints = ref();
+  const clickMenu = ref();
+  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 leftScales = computed(() => props.data.scaleValues.filter((item) => item.layout === "left"));
+  const rightScales = computed(() => props.data.scaleValues.filter((item) => item.layout === "right"));
+  const leftAddAreaWidth = 30;
+  const rightAddAreaWidth = computed(() => {
+    var _a;
+    return !((_a = rightScales.value) == null ? void 0 : _a.length) ? 0 : 30;
+  });
+  const originX = computed(() => {
+    var _a;
+    const leftScalesWidth = (_a = leftScales.value) == null ? void 0 : _a.reduce((width, item) => {
+      width += item.width;
+      return width;
+    }, 0);
+    return leftAddAreaWidth + leftScalesWidth;
+  });
+  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 - rightAddAreaWidth.value - rightScalesWidth;
+  });
+  const gridXNumber = computed(() => props.data.grid.mainXCell);
+  const gridYNumber = computed(() => props.data.grid.mainYCell);
+  const xCellWidth = computed(() => {
+    return (endX.value - originX.value) / gridXNumber.value;
+  });
+  const yCellHeight = computed(() => {
+    const { xAxis, height } = props.data;
+    const xAxisNumber = Object.values(xAxis).reduce((num, item) => {
+      if (item.show)
+        num++;
+      return num;
+    }, 0);
+    return height / (gridYNumber.value + xAxisNumber);
+  });
+  const originY = computed(() => yCellHeight.value);
+  const originYCervix = computed(() => {
+    const { scaleValues } = props.data;
+    const cervixItem = scaleValues.find((item) => item.key === "cervix");
+    const [, max] = (cervixItem == null ? void 0 : cervixItem.range) || [0, 10];
+    const spaceValue = (cervixItem == null ? void 0 : cervixItem.spaceValue) || 1;
+    return endY.value - max * spaceValue * yCellHeight.value;
+  });
+  const endY = computed(() => {
+    const { height } = props.data;
+    return height - yCellHeight.value;
+  });
+  const startTime = computed(() => new Date(props.data.xAxis.time.startTime).getTime());
+  const timeXCell = computed(() => 1 * 60 * 60 * 1e3 / xCellWidth.value);
+  const cervixYCell = computed(() => {
+    const { scaleValues } = props.data;
+    const cervixItem = scaleValues.find((item) => item.key === "cervix");
+    return ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1) / yCellHeight.value;
+  });
+  const FHRYCell = computed(() => {
+    const { scaleValues } = props.data;
+    const cervixItem = scaleValues.find((item) => item.key === "FHR");
+    return ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 10) / yCellHeight.value;
+  });
+  const fetalPresentationYCell = computed(() => {
+    const { scaleValues } = props.data;
+    const cervixItem = scaleValues.find((item) => item.key === "fetalPresentation");
+    return ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1) / yCellHeight.value;
+  });
+  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,
+    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,
+    leftAddAreaWidth,
+    rightAddAreaWidth: rightAddAreaWidth.value,
+    startTime: startTime.value,
+    timeXCell: timeXCell.value,
+    cervixYCell: cervixYCell.value,
+    FHRYCell: FHRYCell.value,
+    fetalPresentationYCell: fetalPresentationYCell.value,
+    scaleValues: props.data.scaleValues,
+    event: event.value,
+    originYCervix: originYCervix.value
+  });
+  const commonFunc = useCommon(canvas);
+  onMounted(() => {
+    nextTick(() => {
+      const { clickMenu: _clickMenu } = useBirthProcess(
+        canvas,
+        propItems,
+        emits,
+        pointTipProps,
+        pointMenuProps,
+        commonFunc
+      );
+      clickMenu.value = _clickMenu;
+      useEvent(canvasRef.value);
+      const { select: _select } = useCanvasEvent(canvas, propItems, emits);
+      select.value = _select;
+    });
+  });
+  return {
+    propItems,
+    redrawPoints,
+    select,
+    pointTipProps,
+    pointMenuProps,
+    clickMenu
+  };
+}
+
+export { useBirthProcessChart as default };

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

@@ -2,7 +2,7 @@ import { Ref } from 'vue';
 import { fabric } from '../utils';
 import { IPropItems } from '../interface';
 import { AnyObject } from '../../../../../es/shared/types';
-export declare function useCenter(canvas: Ref<fabric.Canvas>, propItems: IPropItems, emits: any, cumputedX: Function, cumputedY: Function, getXValue: Function, getYValue: Function, addRenderItem: Function | undefined, pointTipProps: any, pointMenuProps: any, useCommon: AnyObject): {
+export declare function useCenter(canvas: Ref<fabric.Canvas>, propItems: IPropItems, emits: any, cumputedX: Function, cumputedY: Function, getXValue: Function, getYValue: Function, addRenderItem: Function | undefined, pointTipProps: any, pointMenuProps: any, commonFunc: AnyObject): {
     pointTipProps: any;
     pointMenuProps: any;
     clickMenu: ({ item, target }: {