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

package/es/components/drag-layout/style/index.css

@@ -1,175 +1 @@
-.drag-layout-container {
-  width: 100%;
-  height: 100%;
-  flex: 1;
-  overflow: hidden;
-  overflow-y: auto;
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  border: 1px solid #d2d9e8;
-  text-align: left;
-}
-.drag-layout-container .min-height {
-  height: calc(100% - 60px);
-  overflow: hidden;
-  overflow-y: auto;
-}
-.drag-layout-container .min-height li {
-  list-style: none;
-}
-.drag-layout-container .border-box {
-  position: absolute;
-  top: 0;
-  left: 30%;
-  border-left: 1px solid #d2d9e8;
-  height: 100%;
-}
-.drag-layout-container .text-area {
-  width: 30%;
-  height: 100%;
-  overflow-y: auto;
-  padding: 0 !important;
-}
-.drag-layout-container .text-area .info-header {
-  display: flex;
-  height: 50px;
-  line-height: 50px;
-  padding: 0 10px;
-  margin-bottom: 10px;
-  color: #2e2e2e;
-  font-size: 18px;
-  font-weight: bold;
-  background: #e6eaef;
-}
-.drag-layout-container .text-area .text-draggable {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 0 12px 12px;
-  box-sizing: border-box;
-  align-content: flex-start;
-}
-.drag-layout-container .text-area .text-draggable li {
-  width: 49%;
-  text-align: center;
-}
-.drag-layout-container .form-area {
-  position: relative;
-  width: 70%;
-  height: 100%;
-  overflow-y: auto;
-  padding: 4px;
-  box-sizing: border-box;
-}
-.drag-layout-container .form-area::-webkit-scrollbar {
-  width: 5px;
-}
-.drag-layout-container .form-area .info-header {
-  height: 50px;
-  margin-bottom: 10px;
-  background: unset;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-.drag-layout-container .form-area .combination-col {
-  border: 1px solid #cdc5d3;
-  margin-bottom: 10px;
-}
-.dragForm-select-drop {
-  z-index: 2001;
-}
-.DragFormRightItem {
-  position: relative;
-}
-.DragFormRightItem .is-edit-class {
-  background-color: #f5f5f5 !important;
-  border-color: #d9d9d9 !important;
-}
-.DragFormRightItem .combination-item {
-  padding: 0px 8px 8px;
-}
-.DragFormRightItem .combination-item > div {
-  line-height: 35px;
-}
-.DragFormRightItem .combination-item > div:hover > .form-btn {
-  display: flex;
-}
-.DragFormRightItem .form-btn {
-  display: none;
-  align-items: center;
-  position: absolute;
-  top: -1px;
-  right: 0px;
-  height: 100%;
-  white-space: nowrap;
-}
-.DragFormRightItem .form-btn .quick-reply {
-  display: inline-block;
-  border: 1px dashed #cdc5d3;
-  font-size: 12px;
-  height: 22px;
-  line-height: 1.499;
-}
-.DragFormRightItem .form-btn:deep(.n-input),
-.DragFormRightItem .form-btn:deep(.n-select) {
-  margin-left: 5px;
-}
-.DragFormRightItem .form-btn:deep(.n-select) {
-  top: -3px;
-}
-.DragFormRightItem .right-content {
-  border: 1px dashed #cdc5d3;
-  background: #fdfdfd;
-  height: 35px;
-  line-height: 35px;
-  padding: 0 10px;
-  position: relative;
-  margin-bottom: 10px;
-  cursor: pointer;
-}
-.DragFormRightItem .right-content:hover .form-btn {
-  display: flex;
-}
-.DragFormRightItem .blue-border {
-  border: 1px solid #5585f5 !important;
-}
-.DragFormRightItem .item-opacity {
-  opacity: 0.5;
-}
-.DragFormRightItem .red {
-  color: red;
-}
-.DragFormLeftItem .left-content {
-  width: 100%;
-  margin-bottom: 16px;
-  overflow: hidden;
-  cursor: pointer;
-  color: #2e2e2e;
-}
-.DragFormLeftItem .left-content .style-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 60px;
-  padding: 0 8px;
-  box-sizing: border-box;
-  margin-bottom: 8px;
-  background: #f3f5f8;
-}
-.DragFormLeftItem .left-content .style-box-input {
-  width: 85%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer !important;
-}
-.DragFormLeftItem .left-content .style-box input[type='radio'][disabled],
-.DragFormLeftItem .left-content .style-box input[type='checkbox'][disabled],
-.DragFormLeftItem .left-content .style-box input[type='radio'].disabled,
-.DragFormLeftItem .left-content .style-box input[type='checkbox'].disabled {
-  cursor: pointer !important;
-}
+.drag-layout-container{border:1px solid #d2d9e8;display:flex;flex:1;height:100%;justify-content:flex-start;overflow:hidden;overflow-y:auto;position:relative;text-align:left;width:100%}.drag-layout-container .min-height{height:calc(100% - 60px);overflow:hidden;overflow-y:auto}.drag-layout-container .min-height li{list-style:none}.drag-layout-container .border-box{border-left:1px solid #d2d9e8;height:100%;left:30%;position:absolute;top:0}.drag-layout-container .text-area{height:100%;overflow-y:auto;padding:0!important;width:30%}.drag-layout-container .text-area .info-header{background:#e6eaef;color:#2e2e2e;display:flex;font-size:18px;font-weight:700;height:50px;line-height:50px;margin-bottom:10px;padding:0 10px}.drag-layout-container .text-area .text-draggable{align-content:flex-start;align-items:flex-start;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 12px 12px}.drag-layout-container .text-area .text-draggable li{text-align:center;width:49%}.drag-layout-container .form-area{box-sizing:border-box;height:100%;overflow-y:auto;padding:4px;position:relative;width:70%}.drag-layout-container .form-area::-webkit-scrollbar{width:5px}.drag-layout-container .form-area .info-header{align-items:center;background:unset;display:flex;height:50px;justify-content:flex-end;margin-bottom:10px}.drag-layout-container .form-area .combination-col{border:1px solid #cdc5d3;margin-bottom:10px}.dragForm-select-drop{z-index:2001}.DragFormRightItem{position:relative}.DragFormRightItem .is-edit-class{background-color:#f5f5f5!important;border-color:#d9d9d9!important}.DragFormRightItem .combination-item{padding:0 8px 8px}.DragFormRightItem .combination-item>div{line-height:35px}.DragFormRightItem .combination-item>div:hover>.form-btn{display:flex}.DragFormRightItem .form-btn{align-items:center;display:none;height:100%;position:absolute;right:0;top:-1px;white-space:nowrap}.DragFormRightItem .form-btn .quick-reply{border:1px dashed #cdc5d3;display:inline-block;font-size:12px;height:22px;line-height:1.499}.DragFormRightItem .form-btn:deep(.n-input),.DragFormRightItem .form-btn:deep(.n-select){margin-left:5px}.DragFormRightItem .form-btn:deep(.n-select){top:-3px}.DragFormRightItem .right-content{background:#fdfdfd;border:1px dashed #cdc5d3;cursor:pointer;height:35px;line-height:35px;margin-bottom:10px;padding:0 10px;position:relative}.DragFormRightItem .right-content:hover .form-btn{display:flex}.DragFormRightItem .blue-border{border:1px solid #5585f5!important}.DragFormRightItem .item-opacity{opacity:.5}.DragFormRightItem .red{color:red}.DragFormLeftItem .left-content{color:#2e2e2e;cursor:pointer;margin-bottom:16px;overflow:hidden;width:100%}.DragFormLeftItem .left-content .style-box{align-items:center;background:#f3f5f8;box-sizing:border-box;display:flex;height:60px;justify-content:center;margin-bottom:8px;padding:0 8px;width:100%}.DragFormLeftItem .left-content .style-box-input{cursor:pointer!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:85%}.DragFormLeftItem .left-content .style-box input[type=checkbox].disabled,.DragFormLeftItem .left-content .style-box input[type=checkbox][disabled],.DragFormLeftItem .left-content .style-box input[type=radio].disabled,.DragFormLeftItem .left-content .style-box input[type=radio][disabled]{cursor:pointer!important}

package/es/components/editor/index.js

@@ -1,10 +1 @@
-import { COMPONENT_NAMESPACE } from '../../shared/global/variable.js';
-import { safeComponentRegister } from '../../shared/utils/index.js';
-import script from './src/Editor.js';
-
-const Editor = script;
-Editor.install = function(app) {
-  safeComponentRegister(app, Editor, COMPONENT_NAMESPACE + "Editor");
-};
-
-export { Editor as default };
+export { default } from './index2.js';

package/es/components/editor/index2.js

@@ -0,0 +1,10 @@
+import { COMPONENT_NAMESPACE } from '../../shared/global/variable2.js';
+import { safeComponentRegister } from '../../shared/utils/index2.js';
+import script from './src/Editor.js';
+
+const Editor = script;
+Editor.install = function(app) {
+  safeComponentRegister(app, Editor, COMPONENT_NAMESPACE + "Editor");
+};
+
+export { Editor as default };

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

@@ -14,7 +14,7 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
         data: import("./src/interface").IData;
         addRenderItem?: Function | undefined;
     };
-    emits: (event: "select" | "change" | "add", ...args: any[]) => void;
+    emits: (event: "change" | "add" | "select", ...args: any[]) => void;
     select: import("vue").Ref<any>;
     canvasRef: any;
     canvas: import("vue").Ref<any>;
@@ -187,7 +187,7 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
         show: boolean;
         list: unknown[];
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change" | "add")[], "select" | "change" | "add", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "add" | "select")[], "change" | "add" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: null;
         required: true;

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

@@ -1,10 +1 @@
-import { COMPONENT_NAMESPACE } from '../../shared/global/variable.js';
-import { safeComponentRegister } from '../../shared/utils/index.js';
-import script from './src/FabricChart.js';
-
-const FabricChart = script;
-FabricChart.install = function(app) {
-  safeComponentRegister(app, FabricChart, COMPONENT_NAMESPACE + "FabricChart");
-};
-
-export { FabricChart as default };
+export { default } from './index2.js';

package/es/components/fabric-chart/index2.js

@@ -0,0 +1,10 @@
+import { COMPONENT_NAMESPACE } from '../../shared/global/variable2.js';
+import { safeComponentRegister } from '../../shared/utils/index2.js';
+import script from './src/FabricChart.js';
+
+const FabricChart = script;
+FabricChart.install = function(app) {
+  safeComponentRegister(app, FabricChart, COMPONENT_NAMESPACE + "FabricChart");
+};
+
+export { FabricChart as default };

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

@@ -1,14 +1,14 @@
 import { defineComponent, ref, computed, reactive, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, createElementVNode, unref, createBlock, mergeProps, createCommentVNode } from 'vue';
 import { fabric } from './utils/index.js';
-import { defaultBorderStyle } from './hooks/useDraw.js';
-import { useCumputedPoint } from './hooks/useCumputedPoint.js';
-import { useTop } from './hooks/useTop.js';
-import { useLeft } from './hooks/useLeft.js';
-import { useRight } from './hooks/useRight.js';
-import { useCenter } from './hooks/useCenter.js';
-import { useBottom } from './hooks/useBottom.js';
-import { useOther } from './hooks/useOther.js';
-import { useEvent, useCanvasEvent } from './hooks/useEvent.js';
+import { defaultBorderStyle } from './hooks/useDraw2.js';
+import { useCumputedPoint } from './hooks/useCumputedPoint2.js';
+import { useTop } from './hooks/useTop2.js';
+import { useLeft } from './hooks/useLeft2.js';
+import { useRight } from './hooks/useRight2.js';
+import { useCenter } from './hooks/useCenter2.js';
+import { useBottom } from './hooks/useBottom2.js';
+import { useOther } from './hooks/useOther2.js';
+import { useEvent, useCanvasEvent } from './hooks/useEvent2.js';
 import PopupTip from './components/PopupTip.js';
 import PopupMenu from './components/PopupMenu.js';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';

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

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
         data: IData;
         addRenderItem?: Function | undefined;
     };
-    emits: (event: "select" | "change" | "add", ...args: any[]) => void;
+    emits: (event: "change" | "add" | "select", ...args: any[]) => void;
     select: import("vue").Ref<any>;
     canvasRef: any;
     canvas: import("vue").Ref<any>;
@@ -188,7 +188,7 @@ declare const _default: import("vue").DefineComponent<{
         show: boolean;
         list: unknown[];
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change" | "add")[], "select" | "change" | "add", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "add" | "select")[], "change" | "add" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: null;
         required: true;

package/es/components/fabric-chart/src/components/PopupMenu.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, createVNode, Teleport, withDirectives, vShow } from 'vue';
 import { NSpace, NInputNumber } from 'naive-ui';
-import useStyle from './useStyle.js';
+import useStyle from './useStyle2.js';
 import { onClickOutside } from '@vueuse/core';
 
 var PopupMenu = defineComponent({

package/es/components/fabric-chart/src/components/PopupTip.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, Teleport, withDirectives, createElementVNode, normalizeStyle, unref, createElementBlock, Fragment, renderList, toDisplayString, vShow } from 'vue';
-import useStyle from './useStyle.js';
+import useStyle from './useStyle2.js';
 import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/es/components/fabric-chart/src/components/useStyle.js

@@ -1,36 +1 @@
-import { computed } from 'vue';
-
-function useStyle(props) {
-  const { canvasWidth, canvasHeight } = props.propItems;
-  const pointStyle = computed(() => {
-    const { x, y } = props.point;
-    const marginLeft = 15;
-    const marginTop = -15;
-    const style = {
-      top: "",
-      bottom: "",
-      left: "",
-      right: "",
-      "transform-origin": ""
-    };
-    const height = 200;
-    if (canvasWidth - (x + marginLeft) < height) {
-      style.right = canvasWidth - x + marginLeft + "px";
-      style["transform-origin"] = "right";
-    } else {
-      style.left = x + marginLeft + "px";
-      style["transform-origin"] = "left";
-    }
-    if (canvasHeight - (y + marginTop) < height) {
-      style.bottom = canvasHeight - y + marginTop + "px";
-      style["transform-origin"] += " bottom";
-    } else {
-      style.top = y + marginTop + "px";
-      style["transform-origin"] += " top";
-    }
-    return style;
-  });
-  return pointStyle;
-}
-
-export { useStyle as default };
+export { default } from './useStyle2.js';

package/es/components/fabric-chart/src/components/useStyle2.js

@@ -0,0 +1,36 @@
+import { computed } from 'vue';
+
+function useStyle(props) {
+  const { canvasWidth, canvasHeight } = props.propItems;
+  const pointStyle = computed(() => {
+    const { x, y } = props.point;
+    const marginLeft = 15;
+    const marginTop = -15;
+    const style = {
+      top: "",
+      bottom: "",
+      left: "",
+      right: "",
+      "transform-origin": ""
+    };
+    const height = 200;
+    if (canvasWidth - (x + marginLeft) < height) {
+      style.right = canvasWidth - x + marginLeft + "px";
+      style["transform-origin"] = "right";
+    } else {
+      style.left = x + marginLeft + "px";
+      style["transform-origin"] = "left";
+    }
+    if (canvasHeight - (y + marginTop) < height) {
+      style.bottom = canvasHeight - y + marginTop + "px";
+      style["transform-origin"] += " bottom";
+    } else {
+      style.top = y + marginTop + "px";
+      style["transform-origin"] += " top";
+    }
+    return style;
+  });
+  return pointStyle;
+}
+
+export { useStyle as default };

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

@@ -1,36 +1 @@
-const TEMPERATURE_MENU = [
-  {
-    label: "\u5347\u6E29",
-    value: true,
-    type: "rise"
-  },
-  {
-    label: "\u836F\u7269\u964D\u6E29",
-    value: void 0,
-    type: "drugReduce"
-  },
-  {
-    label: "\u7269\u7406\u964D\u6E29",
-    value: void 0,
-    type: "physicsReduce"
-  },
-  {
-    label: "\u4E0D\u5347",
-    value: false,
-    type: "noRise"
-  }
-];
-const PAIN_MENU = [
-  {
-    label: "\u836F\u7269\u964D\u75DB",
-    value: void 0,
-    type: "drugReduce"
-  },
-  {
-    label: "\u7269\u7406\u964D\u75DB",
-    value: void 0,
-    type: "physicsReduce"
-  }
-];
-
-export { PAIN_MENU, TEMPERATURE_MENU };
+export { PAIN_MENU, TEMPERATURE_MENU } from './constant2.js';

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

@@ -0,0 +1,36 @@
+const TEMPERATURE_MENU = [
+  {
+    label: "\u5347\u6E29",
+    value: true,
+    type: "rise"
+  },
+  {
+    label: "\u836F\u7269\u964D\u6E29",
+    value: void 0,
+    type: "drugReduce"
+  },
+  {
+    label: "\u7269\u7406\u964D\u6E29",
+    value: void 0,
+    type: "physicsReduce"
+  },
+  {
+    label: "\u4E0D\u5347",
+    value: false,
+    type: "noRise"
+  }
+];
+const PAIN_MENU = [
+  {
+    label: "\u836F\u7269\u964D\u75DB",
+    value: void 0,
+    type: "drugReduce"
+  },
+  {
+    label: "\u7269\u7406\u964D\u75DB",
+    value: void 0,
+    type: "physicsReduce"
+  }
+];
+
+export { PAIN_MENU, TEMPERATURE_MENU };

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

@@ -1,9 +1,9 @@
-export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawLine, drawPoint, drawTextGroup } from './useDraw.js';
-export { useCumputedPoint } from './useCumputedPoint.js';
-export { useTop } from './useTop.js';
-export { useLeft } from './useLeft.js';
-export { useRight } from './useRight.js';
-export { useCenter } from './useCenter.js';
-export { useBottom } from './useBottom.js';
-export { useOther } from './useOther.js';
-export { useCanvasEvent, useEvent } from './useEvent.js';
+export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawArrow, drawLine, drawPoint, drawText, drawTextGroup } from './useDraw2.js';
+export { useCumputedPoint } from './useCumputedPoint2.js';
+export { useTop } from './useTop2.js';
+export { useLeft } from './useLeft2.js';
+export { useRight } from './useRight2.js';
+export { useCenter } from './useCenter2.js';
+export { useBottom } from './useBottom2.js';
+export { useOther } from './useOther2.js';
+export { useCanvasEvent, useEvent } from './useEvent2.js';

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

@@ -1,85 +1 @@
-import { onMounted, nextTick } from 'vue';
-import { fabric } from '../utils/index.js';
-import { defaultBorderStyle, drawTextGroup, defaultTextStyle, defaultRectStyle, defaultStyle } from './useDraw.js';
-
-function useBottom(canvas, propItems) {
-  const {
-    xScaleList,
-    originX,
-    endX,
-    endY,
-    xCellWidth,
-    canvasWidth,
-    canvasHeight,
-    bottom,
-    breathingHeight,
-    iconsWidth
-  } = propItems;
-  function drawBottom() {
-    var _a, _b, _c;
-    if (!breathingHeight || !bottom) {
-      const bottomBorder = new fabric.Line([iconsWidth, endY - 1, endX, endY - 1], {
-        ...defaultBorderStyle
-      });
-      canvas.value.add(bottomBorder);
-      bottomBorder.sendToBack();
-      return false;
-    }
-    const height = breathingHeight;
-    const bottomBreathingList = ((_a = bottom.breathing) == null ? void 0 : _a.list) || [];
-    const list = [];
-    let flag = true;
-    xScaleList.forEach((item, index) => {
-      const left = originX + index * xCellWidth;
-      let text = "";
-      bottomBreathingList.forEach((v, i) => {
-        const time = new Date(v.time).getTime();
-        if (time >= item && time < +item + item.scaleCell)
-          text = v.value;
-      });
-      const style = flag ? {
-        top: -(height / 2 - 10)
-      } : {
-        top: height / 2 - 10
-      };
-      if (text)
-        flag = !flag;
-      const group2 = drawTextGroup({
-        width: xCellWidth,
-        height,
-        ...defaultRectStyle
-      }, Object.assign({}, {
-        text: String(text),
-        ...defaultTextStyle
-      }, text ? style : {}), {
-        left,
-        top: endY
-      });
-      list.push(group2);
-    });
-    const titleGroup = drawTextGroup({
-      width: endX,
-      height,
-      ...defaultRectStyle
-    }, {
-      text: String(((_b = bottom.breathing) == null ? void 0 : _b.title) + ((_c = bottom.breathing) == null ? void 0 : _c.unit)),
-      ...defaultTextStyle,
-      left: -((endX - originX) / 2)
-    }, {
-      left: 0,
-      top: endY
-    });
-    list.push(titleGroup);
-    const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
-    group && group.sendToBack();
-    group && canvas.value.add(group);
-  }
-  onMounted(() => {
-    nextTick(() => {
-      drawBottom();
-      canvas.value.renderAll();
-    });
-  });
-}
-
-export { useBottom };
+export { useBottom } from './useBottom2.js';

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

@@ -0,0 +1,85 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultBorderStyle, drawTextGroup, defaultTextStyle, defaultRectStyle, defaultStyle } from './useDraw2.js';
+
+function useBottom(canvas, propItems) {
+  const {
+    xScaleList,
+    originX,
+    endX,
+    endY,
+    xCellWidth,
+    canvasWidth,
+    canvasHeight,
+    bottom,
+    breathingHeight,
+    iconsWidth
+  } = propItems;
+  function drawBottom() {
+    var _a, _b, _c;
+    if (!breathingHeight || !bottom) {
+      const bottomBorder = new fabric.Line([iconsWidth, endY - 1, endX, endY - 1], {
+        ...defaultBorderStyle
+      });
+      canvas.value.add(bottomBorder);
+      bottomBorder.sendToBack();
+      return false;
+    }
+    const height = breathingHeight;
+    const bottomBreathingList = ((_a = bottom.breathing) == null ? void 0 : _a.list) || [];
+    const list = [];
+    let flag = true;
+    xScaleList.forEach((item, index) => {
+      const left = originX + index * xCellWidth;
+      let text = "";
+      bottomBreathingList.forEach((v, i) => {
+        const time = new Date(v.time).getTime();
+        if (time >= item && time < +item + item.scaleCell)
+          text = v.value;
+      });
+      const style = flag ? {
+        top: -(height / 2 - 10)
+      } : {
+        top: height / 2 - 10
+      };
+      if (text)
+        flag = !flag;
+      const group2 = drawTextGroup({
+        width: xCellWidth,
+        height,
+        ...defaultRectStyle
+      }, Object.assign({}, {
+        text: String(text),
+        ...defaultTextStyle
+      }, text ? style : {}), {
+        left,
+        top: endY
+      });
+      list.push(group2);
+    });
+    const titleGroup = drawTextGroup({
+      width: endX,
+      height,
+      ...defaultRectStyle
+    }, {
+      text: String(((_b = bottom.breathing) == null ? void 0 : _b.title) + ((_c = bottom.breathing) == null ? void 0 : _c.unit)),
+      ...defaultTextStyle,
+      left: -((endX - originX) / 2)
+    }, {
+      left: 0,
+      top: endY
+    });
+    list.push(titleGroup);
+    const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
+    group && group.sendToBack();
+    group && canvas.value.add(group);
+  }
+  onMounted(() => {
+    nextTick(() => {
+      drawBottom();
+      canvas.value.renderAll();
+    });
+  });
+}
+
+export { useBottom };