cnhis-design-vue 3.3.1-beta.7 → 3.3.1-release.4

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

@@ -1 +1,221 @@
-import{fabric as e}from"../../../../../shared/utils/fabricjs/index.js";import{useThrottleFn as t}from"@vueuse/core";import{range as r}from"lodash-es";import{useDetailEvent as o}from"./hooks/useDetailEvent.js";import{defaultStyle as i,drawLine as n}from"../useDraw.js";import{useGrid as s}from"../useGrid.js";import{useElectrocardiogramCumputedPoint as a}from"../useCumputedPoint.js";import"../useEvent.js";import"../useShadow.js";import"../useCommon.js";import"vue";import"date-fns";import{ECG as l}from"../../constants/index.js";import"@vueuse/shared";import"naive-ui";import"../surgicalAnesthesia/useTop.js";import"../surgicalAnesthesia/useOther.js";import"../../../../../shared/utils/index.js";function u(u,d,c){const{computedX:m,computedY:h}=a(d),{borderStyle:f,originX:L,originY:g,xCellWidth:p,yCellHeight:E,canvasWidth:x,canvasHeight:M,dataList:C,columnNumber:v,gridYNumber:N,gridXNumber:y,rowNumber:b,lineStyle:S,titleStyle:j,config:A,calibrationLineHeight:w}=d,R=new Set,U=new Set;function X(e=[]){return~~(e.length/v)*(A.mainXCellValue/l.DEFAULTMAINXCELLVALUE)}function B(t=0){C.forEach(((r,o)=>{if(o===C.length-1&&arguments.length)return;const{x:i,y:n,rowIdx:s}=r.origin,a=X(r.data),u=r.data.reduce(((e,r,i)=>{const s=o<l.MAXLINENUMBER-1&&i>=t&&i<=t+a||o===l.MAXLINENUMBER-1?[{x:m(e.length+1),y:h(-+r)+n}]:[];return e.concat(s)}),[]),f=new e.Polyline(u,{...S,fill:"transparent",strokeWidth:1,left:i,hasControls:!1,hasBorders:!1,hoverCursor:"default",lockMovementX:!0,lockMovementY:!0,objectCaching:!0,evented:!0,selectable:!0});if(k(f,{...d.config,...d,lineStartIndex:t,points:r.data,scale:4,showScaleText:!0,showNumberText:!0,detailRadius:370,beforeEvent:()=>c.value&&Promise.reject()}),f.startIdx=t,o<C.length-1?R.add(f):U.add(f),arguments.length)return;I({x:i,y:n},S);const L=new e.Text(String(r.title),{...j,left:i+(4===v?p:p/2),top:n,originX:"left",originY:"bottom"});U.add(L)}));const r=arguments.length?[...R]:[...R,...U];u.value.add(...r)}function k(e,t){o(e,t)}function I({x:t,y:r},o){const n=t-p,s=p/l.SMALLCELLNUMBER,a=new e.Polyline([{x:n,y:r},{x:n+s,y:r},{x:n+s,y:r-w},{x:n+3*s,y:r-w},{x:n+3*s,y:r},{x:n+4*s,y:r}],{...o,fill:"transparent",strokeWidth:1,left:n,...i});U.add(a)}s(u,{...d,gridXNumber:y*l.SMALLCELLNUMBER,gridYNumber:N*l.SMALLCELLNUMBER,xCellWidth:p/l.SMALLCELLNUMBER,yCellHeight:E/l.SMALLCELLNUMBER,grid:{...d.grid,subXCell:l.SMALLCELLNUMBER,subYCell:l.SMALLCELLNUMBER}}),function(){const{strokeWidth:t}=f,r=new e.Rect({...f,width:x-t,height:M-t,left:L,top:g,fill:"transparent"});u.value.add(r)}(),function(){const e=x/v,t=[];r(v).forEach((r=>{if(r+1>=v)return;const o=(r+1)*e,i=n([o,0,o,M],{stroke:"#000"});t.push(i)})),u.value.add(...t)}(),B();return{updatePolyline:t((t=>{const r=X(C[C.length-1].data);if(r===C[0].data.length)return;const o=C[C.length-1].data.length,i=t/100*o-r/2,n=i+r>o?o-r:Math.max(0,i);e.util.requestAnimFrame((()=>{if(R.size){const[e]=[...R];if(e.startIdx===n)return;[...R].forEach((e=>u.value.remove(e))),R.clear()}B(n)}))}),150)}}export{u as useElectrocardiogram};
+import { fabric } from '../../../../../shared/utils/fabricjs/index.js';
+import { useThrottleFn } from '@vueuse/core';
+import { range } from 'lodash-es';
+import { useDetailEvent } from './hooks/useDetailEvent.js';
+import { defaultStyle, drawLine } from '../useDraw.js';
+import { useGrid } from '../useGrid.js';
+import { useElectrocardiogramCumputedPoint } from '../useCumputedPoint.js';
+import '../useEvent.js';
+import '../useShadow.js';
+import '../useCommon.js';
+import 'vue';
+import 'date-fns';
+import { ECG } from '../../constants/index.js';
+import '@vueuse/shared';
+import 'naive-ui';
+import '../surgicalAnesthesia/useTop.js';
+import '../surgicalAnesthesia/useOther.js';
+import '../../../../../shared/utils/index.js';
+
+function useElectrocardiogram(canvas, propItems, flag) {
+  const {
+    computedX,
+    computedY
+  } = useElectrocardiogramCumputedPoint(propItems);
+  const {
+    borderStyle,
+    originX,
+    originY,
+    xCellWidth,
+    yCellHeight,
+    canvasWidth,
+    canvasHeight,
+    dataList,
+    columnNumber,
+    gridYNumber,
+    gridXNumber,
+    rowNumber,
+    lineStyle,
+    titleStyle,
+    config,
+    calibrationLineHeight
+  } = propItems;
+  const gridPoints = /* @__PURE__ */ new Set();
+  const fixedPointsCache = /* @__PURE__ */ new Set();
+  useGrid(canvas, {
+    ...propItems,
+    gridXNumber: gridXNumber * ECG.SMALLCELLNUMBER,
+    gridYNumber: gridYNumber * ECG.SMALLCELLNUMBER,
+    xCellWidth: xCellWidth / ECG.SMALLCELLNUMBER,
+    yCellHeight: yCellHeight / ECG.SMALLCELLNUMBER,
+    grid: {
+      ...propItems.grid,
+      subXCell: ECG.SMALLCELLNUMBER,
+      subYCell: ECG.SMALLCELLNUMBER
+    }
+  });
+  init();
+  function init() {
+    drawBorder();
+    drawDivider();
+    drawPolyLine();
+  }
+  function getShowLength(list = []) {
+    const showLength = ~~(list.length / columnNumber);
+    return showLength * (config.mainXCellValue / ECG.DEFAULTMAINXCELLVALUE);
+  }
+  function drawPolyLine(startIdx = 0) {
+    dataList.forEach((lineItem, idx) => {
+      if (idx === dataList.length - 1 && arguments.length)
+        return;
+      const {
+        x,
+        y,
+        rowIdx
+      } = lineItem.origin;
+      const showLength = getShowLength(lineItem.data);
+      const points = lineItem.data.reduce((res, value, _idx) => {
+        const _res = idx < ECG.MAXLINENUMBER - 1 && _idx >= startIdx && _idx <= startIdx + showLength || idx === ECG.MAXLINENUMBER - 1 ? [{
+          x: computedX(res.length + 1),
+          y: computedY(-+value) + y
+        }] : [];
+        return res.concat(_res);
+      }, []);
+      const polyline = new fabric.Polyline(points, {
+        ...lineStyle,
+        fill: "transparent",
+        strokeWidth: 1,
+        left: x,
+        hasControls: false,
+        hasBorders: false,
+        hoverCursor: "default",
+        lockMovementX: true,
+        lockMovementY: true,
+        objectCaching: true,
+        evented: true,
+        selectable: true
+      });
+      bindPointEvent(polyline, {
+        ...propItems.config,
+        ...propItems,
+        lineStartIndex: startIdx,
+        points: lineItem.data,
+        scale: 4,
+        showScaleText: true,
+        showNumberText: true,
+        detailRadius: 370,
+        beforeEvent: () => flag.value && Promise.reject()
+      });
+      polyline.startIdx = startIdx;
+      if (idx < dataList.length - 1) {
+        gridPoints.add(polyline);
+      } else {
+        fixedPointsCache.add(polyline);
+      }
+      if (arguments.length)
+        return;
+      drawCalibrationLine({
+        x,
+        y
+      }, lineStyle);
+      const title = new fabric.Text(String(lineItem.title), {
+        ...titleStyle,
+        left: x + (columnNumber === 4 ? xCellWidth : xCellWidth / 2),
+        top: y,
+        originX: "left",
+        originY: "bottom"
+      });
+      fixedPointsCache.add(title);
+    });
+    const renderObjects = arguments.length ? [...gridPoints] : [...gridPoints, ...fixedPointsCache];
+    canvas.value.add(...renderObjects);
+  }
+  function bindPointEvent(polyline, options) {
+    useDetailEvent(polyline, options);
+  }
+  function drawCalibrationLine({
+    x,
+    y
+  }, lineStyle2) {
+    const originX2 = x - xCellWidth;
+    const minCellWidth = xCellWidth / ECG.SMALLCELLNUMBER;
+    const line = new fabric.Polyline([{
+      x: originX2,
+      y
+    }, {
+      x: originX2 + minCellWidth,
+      y
+    }, {
+      x: originX2 + minCellWidth,
+      y: y - calibrationLineHeight
+    }, {
+      x: originX2 + minCellWidth * 3,
+      y: y - calibrationLineHeight
+    }, {
+      x: originX2 + minCellWidth * 3,
+      y
+    }, {
+      x: originX2 + minCellWidth * 4,
+      y
+    }], {
+      ...lineStyle2,
+      fill: "transparent",
+      strokeWidth: 1,
+      left: originX2,
+      ...defaultStyle
+    });
+    fixedPointsCache.add(line);
+  }
+  function drawDivider() {
+    const columnWidth = canvasWidth / columnNumber;
+    const lines = [];
+    range(columnNumber).forEach((idx) => {
+      if (idx + 1 >= columnNumber)
+        return;
+      const x = (idx + 1) * columnWidth;
+      const line = drawLine([x, 0, x, canvasHeight], {
+        stroke: "#000"
+      });
+      lines.push(line);
+    });
+    canvas.value.add(...lines);
+  }
+  const updatePolyline = useThrottleFn((value) => {
+    const showLength = getShowLength(dataList[dataList.length - 1].data);
+    if (showLength === dataList[0].data.length)
+      return;
+    const totalLength = dataList[dataList.length - 1].data.length;
+    const centerIdx = value / 100 * totalLength;
+    const _startIdx = centerIdx - showLength / 2;
+    const startIdx = _startIdx + showLength > totalLength ? totalLength - showLength : Math.max(0, _startIdx);
+    fabric.util.requestAnimFrame(() => {
+      if (gridPoints.size) {
+        const [firstPoint] = [...gridPoints];
+        if (firstPoint.startIdx === startIdx)
+          return;
+        [...gridPoints].forEach((point) => canvas.value.remove(point));
+        gridPoints.clear();
+      }
+      drawPolyLine(startIdx);
+    });
+  }, 150);
+  function drawBorder() {
+    const {
+      strokeWidth
+    } = borderStyle;
+    const border = new fabric.Rect({
+      ...borderStyle,
+      width: canvasWidth - strokeWidth,
+      height: canvasHeight - strokeWidth,
+      left: originX,
+      top: originY,
+      fill: "transparent"
+    });
+    canvas.value.add(border);
+  }
+  return {
+    updatePolyline
+  };
+}
+
+export { useElectrocardiogram };

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

@@ -1 +1,241 @@
-import{reactive as e,computed as a,unref as t,watch as u,toRefs as l}from"vue";import{defaultBorderStyle as r,defaultLineStyle as i,defaultTextStyle as n}from"../useDraw.js";import"../../../../../shared/utils/fabricjs/index.js";import"date-fns";import{cloneDeep as o,isNumber as s,last as d}from"lodash-es";import"../useEvent.js";import"../useShadow.js";import"../useCommon.js";import{ECG as m}from"../../constants/index.js";import"@vueuse/shared";import"naive-ui";import"../surgicalAnesthesia/useTop.js";import"@vueuse/core";import"../surgicalAnesthesia/useOther.js";import"../../../../../shared/utils/index.js";import{useElectrocardiogram as v}from"./useElectrocardiogram.js";import{useMeasureInstrument as c}from"./useMeasureInstrument.js";function g(g,h,p,f,N,b){const M=e({updatePolyline:null,useMeasureRuler:null,useCaliper:null,useCaliperRuler:null,useRectRuler:null}),y=a((()=>h.data.width)),R=a((()=>h.data.height)),C=a((()=>{const{dataList:e=[],config:a={}}=h.data,t=o(e),u=t.find((e=>a.lastDataKey&&e.key===a.lastDataKey));return u?[...t,u]:t})),x=a((()=>(y.value-0)/j.value)),L=a((()=>(R.value-0)/S.value)),j=a((()=>{var e,a,t;const{config:u,grid:l}=h.data;if(s(l.gridXNumber))return l.gridXNumber;const r=(null!=(t=null==(a=null==(e=d(C.value))?void 0:e.data)?void 0:a.length)?t:0)/u.hz;return Math.ceil(r/u.mainXCellValue)})),S=a((()=>{const{config:e,grid:a}=h.data;if(s(a.gridYNumber))return a.gridYNumber;const t=C.value.length;return Math.ceil(w.value*t*2/e.mainYCellValue)})),w=a((()=>{var e;const{config:a}=h.data,t=null==(e=d(C.value))?void 0:e.data,u=Math.max(...t)-Math.min(...t);return"uv"===a.valueUnit?.001*u:"v"===a.valueUnit?1e3*u:u})),E=a((()=>{var e;return(null==(e=h.data.grid)?void 0:e.event)||{selectable:!0,evented:!0}})),X=a((()=>{const{mode:e="2-6"}=h.data,[a,t]=e.split("-").map((e=>+e));return{columnNumber:a,rowNumber:t}})),Y=a((()=>{const{rowNumber:e}=X.value,a=C.value.length;return Math.round(S.value/(e+(a===m.MAXLINENUMBER?1:0)))})),I=a((()=>{const{width:e,config:a,grid:t}=h.data,{columnNumber:u,rowNumber:l}=X.value,r=e/u,i=C.value.length,n=Math.ceil(Y.value/2),o=function(){const{valueUnit:e,mainYCellValue:t}=a,l=C.value[0].data,r=o(Math.max(...l));if(2!==u)return r;const i=C.value[6].data,n=o(Math.max(...i));return Math.max(r,n);function o(a){return("uv"===e?.001*a:"v"===e?1e3*a:a)/t*L.value}}(),s=L.value*n,d=1===u||s<o?L.value*Math.ceil(o/L.value):s,v=x.value;return C.value.map(((e,a)=>{const t=m.MAXLINENUMBER===i&&a===i-1?l:a%l;return{...e,origin:{x:(m.MAXLINENUMBER===i&&a===i-1?0:Math.floor(a/l))*r+v,y:t*(L.value*Y.value)+d,rowIdx:t}}}))})),U=a((()=>{var e;const{calibrationLineGridYNumber:a,mainYCellValue:t}=(null==(e=h.data)?void 0:e.config)||{};return a?L.value*a:t?L.value/t:L.value})),A=e({canvasWidth:h.data.width,canvasHeight:h.data.height,borderStyle:{...r,...h.data.borderStyle},lineStyle:{...i,...h.data.lineStyle},titleStyle:{...n,...h.data.titleStyle},measureLineStyle:{...i,...h.data.measureLineStyle},measureTextStyle:{...n,...h.data.measureTextStyle},grid:h.data.grid,originX:0,endX:y.value,originY:0,endY:R.value,xCellWidth:x.value,yCellHeight:L.value,gridXNumber:j.value,gridYNumber:S.value,event:E.value,dataList:I.value,columnNumber:t(X).columnNumber,rowNumber:t(X).rowNumber,config:h.data.config,calibrationLineHeight:t(U)});return u((()=>g.value),(e=>{e&&function(){const{useMeasureRuler:e,flag:a,useCaliper:t,useCaliperRuler:u,useRectRuler:l}=c(g,A),{updatePolyline:r}=v(g,A,a);M.useMeasureRuler=e,M.useCaliper=t,M.useCaliperRuler=u,M.updatePolyline=r,M.useRectRuler=l}()}),{immediate:!0}),{propItems:A,...l(M),getGridInfo:function(){return{cellWidth:x.value,cellHeight:L.value,smallCellNumber:m.SMALLCELLNUMBER}}}}export{g as useElectrocardiogramChart};
+import { reactive, computed, unref, 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 '../useEvent.js';
+import '../useShadow.js';
+import '../useCommon.js';
+import { ECG } from '../../constants/index.js';
+import '@vueuse/shared';
+import 'naive-ui';
+import '../surgicalAnesthesia/useTop.js';
+import '@vueuse/core';
+import '../surgicalAnesthesia/useOther.js';
+import '../../../../../shared/utils/index.js';
+import { useElectrocardiogram } from './useElectrocardiogram.js';
+import { useMeasureInstrument } from './useMeasureInstrument.js';
+
+function useElectrocardiogramChart(canvas, props, emits, canvasRef, pointTipProps, pointMenuProps) {
+  const exposeMethods = reactive({
+    updatePolyline: null,
+    useMeasureRuler: null,
+    useCaliper: null,
+    useCaliperRuler: null,
+    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;
+    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 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
+        }
+      };
+    });
+    function getFirstRowLineMaxHeight() {
+      const {
+        valueUnit,
+        mainYCellValue
+      } = config;
+      const data1 = __dataList.value[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);
+      function computedY(value) {
+        const currentMV = valueUnit === "uv" ? value * 1e-3 : valueUnit === "v" ? value * 1e3 : value;
+        return currentMV / mainYCellValue * yCellHeight.value;
+      }
+    }
+  });
+  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
+    },
+    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)
+  });
+  function getGridInfo() {
+    return {
+      cellWidth: xCellWidth.value,
+      cellHeight: yCellHeight.value,
+      smallCellNumber: ECG.SMALLCELLNUMBER
+    };
+  }
+  watch(() => canvas.value, (value) => {
+    if (value)
+      init();
+  }, {
+    immediate: true
+  });
+  function init() {
+    const {
+      useMeasureRuler: _useMeasureRuler,
+      flag,
+      useCaliper: _useCaliper,
+      useCaliperRuler: _useCaliperRuler,
+      useRectRuler: _useRectRuler
+    } = useMeasureInstrument(canvas, propItems);
+    const {
+      updatePolyline: _updatePolyline
+    } = useElectrocardiogram(canvas, propItems, flag);
+    exposeMethods.useMeasureRuler = _useMeasureRuler;
+    exposeMethods.useCaliper = _useCaliper;
+    exposeMethods.useCaliperRuler = _useCaliperRuler;
+    exposeMethods.updatePolyline = _updatePolyline;
+    exposeMethods.useRectRuler = _useRectRuler;
+  }
+  return {
+    propItems,
+    ...toRefs(exposeMethods),
+    getGridInfo
+  };
+}
+
+export { useElectrocardiogramChart };