cnhis-design-vue 3.1.33-beta.6 → 3.1.33-beta.7

package/README.md

@@ -1,123 +1,123 @@
-# 安装
-
-```shell
-npm i cnhis-design-vue@[版本号]
-# or
-yarn add cnhis-design-vue@[版本号] #推荐
-```
-
-## 1.全局引入
-
-```typescript
-// main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-import 'cnhis-design-vue/es/packages/index.css';
-import cui from 'cnhis-design-vue';
-
-const app = createApp(App);
-app.use(cui).mount('#app');
-```
-
-## 2. 按需引入
-
-组件现在支持了自动按需引入, 但是样式文件需要额外的处理
-
-### 2.1 样式处理方式 1(按需引入样式)
-
-```shell
-# 安装自动导入样式的插件
-npm i -d vite-plugin-style-import
-```
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-import { createStyleImportPlugin } from 'vite-plugin-style-import';
-
-export default defineConfig({
-  plugins: [
-    // ...otherPlugins
-    createStyleImportPlugin({
-      libs: [
-        {
-          libraryName: 'cnhis-design-vue',
-          esModule: true,
-          ensureStyleFile: true,
-          resolveStyle: name => {
-            return `cnhis-design-vue/es/components/${ name.slice(2) }/style/index.css`;
-          }
-        }
-      ]
-    })
-  ]
-});
-```
-
-### 2.2 样式处理方式 2(全局引入样式)
-
-```typescript
-// main.ts
-import 'cnhis-design-vue/es/components/index.css';
-```
-
-## 3. 注意
-
-由于 vxe-table 目前的引入方式是由组件 install 触发的,所以如果需要使用 c-grid/c-big-table 组件,需要全局注册二者任意一个
-
-```typescript
-// main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-
-import { CGrid } from 'cnhis-design-vue';
-// 或者
-import { CBigTable } from 'cnhis-design-vue';
-
-const app = createApp(App);
-app.use(CGrid);
-// 或者
-app.use(CBigTable);
-app.mount('#app');
-```
-
-## 4.FAQ
-
-### 4.1 项目打包后样式丢失
-
-> 处理方法, 将 cnhis-design-vue 从 vendor 包中移除
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  rollupOptions: {
-    // ..otherOptions
-    output: {
-      dir: './dist',
-      manualChunks(id: string) {
-        if (id.includes('node_modules') && !id.includes('cnhis-design-vue')) {
-          return 'vendor';
-        }
-      }
-    }
-  }
-});
-```
-
-### 4.2 找不到文件
-
-> 由于组件库输出文件类型由 js 修改成了 mjs, 如果配置了 resolve 属性的项目, 需要将 mjs 文件类型添加至 extensions 中
-
-```javascript
-// vite.config.ts
-const config = {
-  // ...otherOptions
-  resolve: {
-    // ...otherOptions
-    // 如果没有配置, 则不用考虑
-    extensions: ['.js', '.ts', '.vue', '.json', '.mjs']
-  }
-};
-```
+# 安装
+
+```shell
+npm i cnhis-design-vue@[版本号]
+# or
+yarn add cnhis-design-vue@[版本号] #推荐
+```
+
+## 1.全局引入
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import 'cnhis-design-vue/es/packages/index.css';
+import cui from 'cnhis-design-vue';
+
+const app = createApp(App);
+app.use(cui).mount('#app');
+```
+
+## 2. 按需引入
+
+组件现在支持了自动按需引入, 但是样式文件需要额外的处理
+
+### 2.1 样式处理方式 1(按需引入样式)
+
+```shell
+# 安装自动导入样式的插件
+npm i -d vite-plugin-style-import
+```
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { createStyleImportPlugin } from 'vite-plugin-style-import';
+
+export default defineConfig({
+  plugins: [
+    // ...otherPlugins
+    createStyleImportPlugin({
+      libs: [
+        {
+          libraryName: 'cnhis-design-vue',
+          esModule: true,
+          ensureStyleFile: true,
+          resolveStyle: name => {
+            return `cnhis-design-vue/es/components/${ name.slice(2) }/style/index.css`;
+          }
+        }
+      ]
+    })
+  ]
+});
+```
+
+### 2.2 样式处理方式 2(全局引入样式)
+
+```typescript
+// main.ts
+import 'cnhis-design-vue/es/components/index.css';
+```
+
+## 3. 注意
+
+由于 vxe-table 目前的引入方式是由组件 install 触发的,所以如果需要使用 c-grid/c-big-table 组件,需要全局注册二者任意一个
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+
+import { CGrid } from 'cnhis-design-vue';
+// 或者
+import { CBigTable } from 'cnhis-design-vue';
+
+const app = createApp(App);
+app.use(CGrid);
+// 或者
+app.use(CBigTable);
+app.mount('#app');
+```
+
+## 4.FAQ
+
+### 4.1 项目打包后样式丢失
+
+> 处理方法, 将 cnhis-design-vue 从 vendor 包中移除
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  rollupOptions: {
+    // ..otherOptions
+    output: {
+      dir: './dist',
+      manualChunks(id: string) {
+        if (id.includes('node_modules') && !id.includes('cnhis-design-vue')) {
+          return 'vendor';
+        }
+      }
+    }
+  }
+});
+```
+
+### 4.2 找不到文件
+
+> 由于组件库输出文件类型由 js 修改成了 mjs, 如果配置了 resolve 属性的项目, 需要将 mjs 文件类型添加至 extensions 中
+
+```javascript
+// vite.config.ts
+const config = {
+  // ...otherOptions
+  resolve: {
+    // ...otherOptions
+    // 如果没有配置, 则不用考虑
+    extensions: ['.js', '.ts', '.vue', '.json', '.mjs']
+  }
+};
+```

package/es/components/big-table/index.d.ts

@@ -678,7 +678,7 @@ declare const BigTable: SFCWithInstall<import("vue").DefineComponent<{
         align: string;
         visible: any;
         resizable: boolean;
-        width: string;
+        width: any;
         showOverflow: boolean;
         slots: {
             header: () => any[];

package/es/components/big-table/src/BigTable.vue.d.ts

@@ -677,7 +677,7 @@ declare const _default: import("vue").DefineComponent<{
         align: string;
         visible: any;
         resizable: boolean;
-        width: string;
+        width: any;
         showOverflow: boolean;
         slots: {
             header: () => any[];

package/es/components/big-table/src/BigTable.vue2.js

@@ -323,7 +323,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         isEdit = false,
         editConfig = {},
         rowConfig = {},
-        showSeq = true
+        showSeq = true,
+        seqWidth = 34
       } = map;
       if (isEdit) {
         Object.assign(state.editConfig, editConfig);
@@ -373,7 +374,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         align: "center",
         visible: showSeq,
         resizable: true,
-        width: "34",
+        width: seqWidth,
         showOverflow: true,
         slots: {
           header: () => {

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

@@ -228,6 +228,51 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
         onSelect?: ((...args: any[]) => any) | undefined;
         onAdd?: ((...args: any[]) => any) | undefined;
     }, {}>;
+    BirthProcessChart: import("vue").DefineComponent<{
+        data: {
+            type: import("vue").PropType<import("./src/interface").IBirthProcessData>;
+            required: true;
+        };
+    }, {
+        props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+            data: {
+                type: import("vue").PropType<import("./src/interface").IBirthProcessData>;
+                required: true;
+            };
+        }>> & {
+            onChange?: ((...args: any[]) => any) | undefined;
+            onSelect?: ((...args: any[]) => any) | undefined;
+            onAdd?: ((...args: any[]) => any) | undefined;
+            onDelete?: ((...args: any[]) => any) | undefined;
+        }>>;
+        emits: (event: "delete" | "change" | "add" | "select", ...args: any[]) => void;
+        leftScales: import("vue").ComputedRef<import("../../../es/shared/types").AnyObject[]>;
+        rightScales: import("vue").ComputedRef<import("../../../es/shared/types").AnyObject[]>;
+        leftAddAreaWidth: number;
+        rightAddAreaWidth: import("vue").ComputedRef<0 | 30>;
+        originX: import("vue").ComputedRef<number>;
+        endX: import("vue").ComputedRef<number>;
+        gridXNumber: import("vue").ComputedRef<any>;
+        gridYNumber: import("vue").ComputedRef<any>;
+        xCellWidth: import("vue").ComputedRef<number>;
+        yCellHeight: import("vue").ComputedRef<number>;
+        originY: import("vue").ComputedRef<number>;
+        endY: import("vue").ComputedRef<number>;
+        select: import("vue").Ref<any>;
+        canvasRef: any;
+        canvas: import("vue").Ref<any>;
+        propItems: any;
+    }, 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<{
+        data: {
+            type: import("vue").PropType<import("./src/interface").IBirthProcessData>;
+            required: true;
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        onSelect?: ((...args: any[]) => any) | undefined;
+        onAdd?: ((...args: any[]) => any) | undefined;
+        onDelete?: ((...args: any[]) => any) | undefined;
+    }, {}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     mode: {
         type: import("vue").PropType<import("./src/interface").IMode>;

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

@@ -19,8 +19,8 @@ declare const _default: import("vue").DefineComponent<{
         onDelete?: ((...args: any[]) => any) | undefined;
     }>>;
     emits: (event: "delete" | "change" | "add" | "select", ...args: any[]) => void;
-    leftScales: import("vue").ComputedRef<AnyObject | undefined>;
-    rightScales: import("vue").ComputedRef<AnyObject | undefined>;
+    leftScales: import("vue").ComputedRef<AnyObject[]>;
+    rightScales: import("vue").ComputedRef<AnyObject[]>;
     leftAddAreaWidth: number;
     rightAddAreaWidth: import("vue").ComputedRef<0 | 30>;
     originX: import("vue").ComputedRef<number>;

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

@@ -0,0 +1,118 @@
+import { defineComponent, computed, ref, reactive, onMounted, onBeforeUnmount, openBlock, createElementBlock } from 'vue';
+import { fabric } from './utils/index.js';
+import { defaultBorderStyle } from './hooks/useDraw.js';
+import './hooks/useShadow.js';
+import 'lodash-es';
+import '@vueuse/core';
+import { useBirthProcess } from './hooks/useBirthProcess.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BirthProcessChart",
+  props: {
+    data: { type: Object, required: true }
+  },
+  emits: [
+    "change",
+    "add",
+    "delete",
+    "select"
+  ],
+  setup(__props, { expose, emit: emits }) {
+    const props = __props;
+    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 endY = computed(() => {
+      const { height } = props.data;
+      return height - yCellHeight.value;
+    });
+    let select = ref();
+    const canvasRef = ref(null);
+    let canvas = ref();
+    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
+    });
+    useBirthProcess(canvas, propItems);
+    onMounted(() => {
+      canvas.value = new fabric.Canvas(canvasRef.value, {
+        width: propItems.canvasWidth,
+        height: propItems.canvasHeight,
+        backgroundColor: "#fff",
+        selection: false,
+        containerClass: "c-fabric-chart",
+        fireRightClick: true
+      });
+    });
+    onBeforeUnmount(() => {
+      canvas.value.clear();
+      canvas.value = null;
+    });
+    expose({
+      select,
+      canvas
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("canvas", {
+        ref_key: "canvasRef",
+        ref: canvasRef
+      }, null, 512);
+    };
+  }
+});
+var BirthProcessChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "BirthProcessChart.vue"]]);
+
+export { BirthProcessChart as default };

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

@@ -229,6 +229,51 @@ declare const _default: import("vue").DefineComponent<{
         onSelect?: ((...args: any[]) => any) | undefined;
         onAdd?: ((...args: any[]) => any) | undefined;
     }, {}>;
+    BirthProcessChart: import("vue").DefineComponent<{
+        data: {
+            type: PropType<import("./interface").IBirthProcessData>;
+            required: true;
+        };
+    }, {
+        props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+            data: {
+                type: PropType<import("./interface").IBirthProcessData>;
+                required: true;
+            };
+        }>> & {
+            onChange?: ((...args: any[]) => any) | undefined;
+            onSelect?: ((...args: any[]) => any) | undefined;
+            onAdd?: ((...args: any[]) => any) | undefined;
+            onDelete?: ((...args: any[]) => any) | undefined;
+        }>>;
+        emits: (event: "delete" | "change" | "add" | "select", ...args: any[]) => void;
+        leftScales: import("vue").ComputedRef<import("../../../shared/types").AnyObject[]>;
+        rightScales: import("vue").ComputedRef<import("../../../shared/types").AnyObject[]>;
+        leftAddAreaWidth: number;
+        rightAddAreaWidth: import("vue").ComputedRef<0 | 30>;
+        originX: import("vue").ComputedRef<number>;
+        endX: import("vue").ComputedRef<number>;
+        gridXNumber: import("vue").ComputedRef<any>;
+        gridYNumber: import("vue").ComputedRef<any>;
+        xCellWidth: import("vue").ComputedRef<number>;
+        yCellHeight: import("vue").ComputedRef<number>;
+        originY: import("vue").ComputedRef<number>;
+        endY: import("vue").ComputedRef<number>;
+        select: import("vue").Ref<any>;
+        canvasRef: any;
+        canvas: import("vue").Ref<any>;
+        propItems: any;
+    }, 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<{
+        data: {
+            type: PropType<import("./interface").IBirthProcessData>;
+            required: true;
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        onSelect?: ((...args: any[]) => any) | undefined;
+        onAdd?: ((...args: any[]) => any) | undefined;
+        onDelete?: ((...args: any[]) => any) | undefined;
+    }, {}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     mode: {
         type: PropType<IMode>;

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

@@ -1,5 +1,6 @@
-import { defineComponent, computed, ref, unref, openBlock, createBlock, mergeProps, createCommentVNode } from 'vue';
+import { defineComponent, computed, ref, unref, openBlock, createBlock, mergeProps } from 'vue';
 import TemperatureChart from './TemperatureChart.vue.js';
+import BirthProcessChart from './BirthProcessChart.vue.js';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -31,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         key: 0,
         ref_key: "fabricChartRef",
         ref: fabricChartRef
-      }, _ctx.$attrs), null, 16)) : createCommentVNode("v-if", true);
+      }, _ctx.$attrs), null, 16)) : (openBlock(), createBlock(BirthProcessChart, { key: 1 }));
     };
   }
 });

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

@@ -1,5 +1,5 @@
 export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawArrow, drawLine, drawPoint, drawText, drawTextGroup } from './useDraw.js';
-export { useCumputedPoint } from './useCumputedPoint.js';
+export { useBirthProcessCumputedPoint, useCumputedPoint } from './useCumputedPoint.js';
 export { useTop } from './useTop.js';
 export { useLeft } from './useLeft.js';
 export { useRight } from './useRight.js';

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

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+import { AnyObject } from '../../../../../es/shared/types';
+export declare function useBirthProcess(canvas: Ref<fabric.Canvas>, propItems: AnyObject): void;

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

@@ -0,0 +1,123 @@
+import { onMounted, nextTick } from 'vue';
+import useGrid from './useGrid.js';
+import { drawText, defaultTextStyle, defaultRectStyle } from './useDraw.js';
+import { fabric } from '../utils/index.js';
+
+function useBirthProcess(canvas, propItems) {
+  useGrid(canvas, propItems, true);
+  function drawXScale() {
+    const { xAxis, grid, originX, originY, xCellWidth, endY } = propItems;
+    const { show, startTime, 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 ? +startTime.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() {
+    const { leftAddAreaWidth, leftScales, rightScales, originY, endY, yCellHeight, endX } = propItems;
+    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; i <= max; i += spaceValue) {
+      list.push(i);
+    }
+    return list;
+  }
+  function drawBorder() {
+    const { canvasWidth, borderStyle, endY, leftAddAreaWidth, rightAddAreaWidth } = propItems;
+    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();
+    });
+  });
+}
+
+export { useBirthProcess };