cnhis-design-vue 3.3.1-beta.9 → 3.3.1-release.5

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

@@ -1 +1,554 @@
-import{ref as e}from"vue";import{fabric as t}from"../../../../../shared/utils/fabricjs/index.js";import{drawLine as o,drawText as i}from"../useDraw.js";import{useElectrocardiogramCumputedPoint as r}from"../useCumputedPoint.js";import"../useEvent.js";import"../useShadow.js";import"../useCommon.js";import{isNumber as n}from"lodash-es";import"date-fns";import"../../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";function l(l,s){const{getXValue:u,getYValue:c}=r(s),{yCellHeight:a,xCellWidth:h,measureLineStyle:d,measureTextStyle:f}=s,p=e(!1),x={origin:{x:0,y:0},obj:null,rendering:!1,type:"line"},m={origin:{x:300,y:10},caliper:{width:4*h,height:60,rect:null},caliperRuler:{width:6*h,height:120,rect:null},rectRuler:{width:12*h,height:120,rect:null}};function g(){x.obj&&(l.value.remove(x.obj),x.obj.text&&l.value.remove(x.obj.text),x.obj=null)}function v(){p.value||(p.value=!0)}function y(e,o){L();const{width:r,height:n,rect:s}=m[e];if(s)return;let u;const{x:c,y:a}=o||m.origin,h=a+m.caliper.height,p=["caliper","rectRuler"].includes(e);m[e].rect=new t.Rect({left:c,top:a,width:r,height:n,strokeWidth:0,fill:"transparent",hasControls:!1,hasBorders:!1,hoverCursor:"move"});const x={...d,hasControls:!1,hasBorders:!1,hoverCursor:"e-resize",strokeWidth:2,__type:e,evented:!0,selectable:!0},g=new t.Line([c,a,c,a+n],{...x,lockMovementY:!0,originX:"center"}),v=new t.Line([c+r,a,c+r,a+n],{...x,lockMovementY:!0,originX:"center"}),y=new t.Line([c,h,c+r,h],{...x,lockMovementX:!0,evented:p,hoverCursor:p?"n-resize":"default",originY:"center"});let j=C({x1:y.x1,x2:y.x2}).millisecond;if("rectRuler"===e){const{millivolt:e,millisecond:o,bpm:i}=C({x1:c+r,x2:c,y1:a+n,y2:a});j=`测量幅度：${e}\n测试时间：${o}\n瞬时心率：${i}`,y.set({y1:a,y2:a}),u=new t.Line([c,a+n,c+r,a+n],{...x,lockMovementX:!0,evented:!0,hoverCursor:"n-resize",originY:"center"})}const w=i([c,("rectRuler"===e?u.top:y.top)+10],{value:j,...f,originX:"left",originY:"top",backgroundColor:"#fff"});g.rect=m[e].rect,v.rect=m[e].rect,y.rect=m[e].rect,u&&(u.rect=m[e].rect),Object.assign(m[e].rect,{leftLine:g,rightLine:v,horizontalLine:y,horizontalLine2:u,text:w}),function(e,t){e.on("moving",(()=>{const{leftLine:o,rightLine:i,horizontalLine:r,horizontalLine2:n,text:l}=e;null==o||o.setCoords().set({x1:e.left,y1:e.top,x2:e.left,y2:e.top+e.height}),null==i||i.setCoords().set({x1:e.left+e.width,y1:e.top,x2:e.left+e.width,y2:e.top+e.height});const s=["caliper","rectRuler"].includes(t)?e.top+e.height:e.top+e.height/2;l.setCoords().set({left:e.left,top:s+10}),"rectRuler"===t?(null==r||r.setCoords().set({x1:e.left,x2:e.left+e.width,y1:e.top,y2:e.top}),null==n||n.setCoords().set({x1:e.left,y1:s,x2:e.left+e.width,y2:s})):null==r||r.setCoords().set({x1:e.left,y1:s,x2:e.left+e.width,y2:s})})),e.on("mouseup",(t=>{var o;1===t.button&&(l.value.discardActiveObject(),e.leftLine.bringToFront(),e.rightLine.bringToFront(),e.horizontalLine.bringToFront(),null==(o=e.horizontalLine2)||o.bringToFront())}))}(m[e].rect,e),b(g,"left"),b(v,"right"),p&&b(y,"horizontal"),u&&b(u,"horizontal2");const z=[m[e].rect,g,v,y,u,w].filter((e=>!!e));l.value.add(...z)}function C({x1:e,x2:t,y1:o,y2:i}){const r=(1e3*u(Math.abs(t-e))).toFixed(3);return{millisecond:`${r}ms`,millivolt:`${n(o)&&n(i)?c(Math.abs(i-o)).toFixed(3):0}mv`,bpm:`${(6e4/+r).toFixed(3)}bpm`}}function b(e,t){e.on("moving",(()=>{const{rect:o}=e;if(!o)return;const{leftLine:i,rightLine:r,horizontalLine:n,horizontalLine2:l,text:s}=o;if(("horizontal"===t&&!l||"horizontal2"===t)&&(e.top<=o.top?e.setCoords().set({y1:o.top,y2:o.top}):e.setCoords().set({y1:e.top,y2:e.top}),o.setCoords().set({height:e.top-o.top}),null==i||i.setCoords().set({y2:e.top}),null==r||r.setCoords().set({y2:e.top}),s.setCoords().set({top:e.top+10}),!l))return;"horizontal"===t&&l&&(e.top>=l.top?e.setCoords().set({y1:l.top,y2:l.top}):e.setCoords().set({y1:e.top,y2:e.top}),o.setCoords().set({top:e.top,height:l.top-e.top}),null==i||i.setCoords().set({y1:e.top}),null==r||r.setCoords().set({y1:e.top}),s.setCoords().set({top:l.top+10})),"left"===t&&(e.left>=r.left?e.setCoords().set({x1:r.left,x2:r.left}):e.setCoords().set({x1:e.left,x2:e.left}),o.setCoords().set({left:e.left,width:r.left-e.left}),n.setCoords().set({x1:e.left}),null==l||l.setCoords().set({x1:e.left}),s.setCoords().set({left:e.left})),"right"===t&&(e.left<=i.left?e.setCoords().set({x1:i.left,x2:i.left}):e.setCoords().set({x1:e.left,x2:e.left}),o.setCoords().set({width:e.left-i.left}),n.setCoords().set({x2:e.left}),null==l||l.setCoords().set({x2:e.left}));const{millivolt:u,millisecond:c,bpm:a}=C({x1:n.x1,x2:n.x2,y1:i.y1,y2:i.y2}),h=l?`测量幅度：${u}\n测试时间：${c}\n瞬时心率：${a}`:c;s.set("text",h)}))}function L(){Object.values(m).forEach((e=>{const{rect:t}=e;t&&(l.value.remove(t),t.leftLine&&l.value.remove(t.leftLine),t.rightLine&&l.value.remove(t.rightLine),t.horizontalLine&&l.value.remove(t.horizontalLine),t.horizontalLine2&&l.value.remove(t.horizontalLine2),t.text&&l.value.remove(t.text),e.rect=null)})),g()}return l.value.on("mouse:down",(e=>{if(1===e.button&&p.value){const{x:t=0,y:o=0}=e.pointer||{};L(),x.rendering=!0,x.origin={x:t,y:o}}})),l.value.on("mouse:up",(e=>{const{button:t}=e;1===t&&p.value&&setTimeout((()=>{if(p.value=!1,x.rendering&&(x.rendering=!1),"rect"===x.type){const{width:e,height:t}=x.obj,o={x:Math.min(x.origin.x,x.origin.x+e),y:Math.min(x.origin.y,x.origin.y+t)+2};m.rectRuler.width=Math.abs(e),m.rectRuler.height=Math.abs(t),g(),y("rectRuler",o)}})),3===t&&L()})),l.value.on("mouse:move",(e=>{if(1===e.button&&p.value&&x.rendering){const{x:r=0,y:n=0}=e.pointer||{};if(g(),"line"===x.type){const{x:e,y:t}=x.origin;x.obj=o([e,t,r,n],d);const{millivolt:s,millisecond:u}=C({x1:e,x2:r,y1:t,y2:n}),c=i([r,n+2*a],{value:`${s}\n${u}`,...f});x.obj.text=c,l.value.add(x.obj,c)}else!function({x:e,y:o}){const{x:r,y:n}=x.origin;x.obj=new t.Rect({...d,objectCaching:!1,fill:"transparent",left:r,top:n,width:e-r,height:o-n,strokeWidth:2});const{millivolt:s,millisecond:u,bpm:c}=C({x1:r,x2:e,y1:n,y2:o}),a=i([r,o+10],{value:`测量幅度：${s}\n测试时间：${u}\n瞬时心率：${c}`,...f,originX:"left",originY:"top",backgroundColor:"#fff"});x.obj.text=a,l.value.add(x.obj,a)}({x:r,y:n})}})),{flag:p,useMeasureRuler:function(){v(),x.type="line"},useCaliper:function(){y("caliper")},useCaliperRuler:function(){y("caliperRuler")},useRectRuler:function(){v(),x.type="rect"}}}export{l as useMeasureInstrument};
+import { ref } from 'vue';
+import { fabric } from '../../../../../shared/utils/fabricjs/index.js';
+import { drawLine, drawText } from '../useDraw.js';
+import { useElectrocardiogramCumputedPoint } from '../useCumputedPoint.js';
+import '../useEvent.js';
+import '../useShadow.js';
+import '../useCommon.js';
+import { isNumber } from 'lodash-es';
+import 'date-fns';
+import '../../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';
+
+function useMeasureInstrument(canvas, propItems) {
+  const {
+    getXValue,
+    getYValue
+  } = useElectrocardiogramCumputedPoint(propItems);
+  const {
+    yCellHeight,
+    xCellWidth,
+    measureLineStyle,
+    measureTextStyle
+  } = propItems;
+  const flag = ref(false);
+  const ruler = {
+    origin: {
+      x: 0,
+      y: 0
+    },
+    obj: null,
+    rendering: false,
+    type: "line"
+  };
+  const caliperAndCaliperRuler = {
+    origin: {
+      x: 300,
+      y: 10
+    },
+    caliper: {
+      width: xCellWidth * 4,
+      height: 60,
+      rect: null
+    },
+    caliperRuler: {
+      width: xCellWidth * 6,
+      height: 120,
+      rect: null
+    },
+    rectRuler: {
+      width: xCellWidth * 12,
+      height: 120,
+      rect: null
+    }
+  };
+  setCanvasEvent();
+  function setCanvasEvent() {
+    canvas.value.on("mouse:down", (event) => {
+      if (event.button === 1 && flag.value) {
+        const {
+          x = 0,
+          y = 0
+        } = event.pointer || {};
+        removeMeasureInstrument();
+        ruler.rendering = true;
+        ruler.origin = {
+          x,
+          y
+        };
+      }
+    });
+    canvas.value.on("mouse:up", (event) => {
+      const {
+        button
+      } = event;
+      if (button === 1 && flag.value) {
+        setTimeout(() => {
+          flag.value = false;
+          if (ruler.rendering) {
+            ruler.rendering = false;
+          }
+          if (ruler.type === "rect") {
+            const {
+              width,
+              height
+            } = ruler.obj;
+            const origin = {
+              x: Math.min(ruler.origin.x, ruler.origin.x + width),
+              y: Math.min(ruler.origin.y, ruler.origin.y + height) + 2
+            };
+            caliperAndCaliperRuler.rectRuler.width = Math.abs(width);
+            caliperAndCaliperRuler.rectRuler.height = Math.abs(height);
+            removeRuler();
+            drawCaliperAndCaliperRuler("rectRuler", origin);
+          }
+        });
+      }
+      if (button === 3) {
+        removeMeasureInstrument();
+      }
+    });
+    canvas.value.on("mouse:move", (event) => {
+      if (event.button === 1 && flag.value && ruler.rendering) {
+        const {
+          x = 0,
+          y = 0
+        } = event.pointer || {};
+        removeRuler();
+        if (ruler.type === "line") {
+          const {
+            x: x1,
+            y: y1
+          } = ruler.origin;
+          ruler.obj = drawLine([x1, y1, x, y], measureLineStyle);
+          const {
+            millivolt,
+            millisecond
+          } = getTextContent({
+            x1,
+            x2: x,
+            y1,
+            y2: y
+          });
+          const text = drawText([x, y + yCellHeight * 2], {
+            value: `${millivolt}
+${millisecond}`,
+            ...measureTextStyle
+          });
+          ruler.obj.text = text;
+          canvas.value.add(ruler.obj, text);
+        } else {
+          drawRectRuler({
+            x,
+            y
+          });
+        }
+      }
+    });
+  }
+  function drawRectRuler({
+    x,
+    y
+  }) {
+    const {
+      x: x1,
+      y: y1
+    } = ruler.origin;
+    ruler.obj = new fabric.Rect({
+      ...measureLineStyle,
+      objectCaching: false,
+      fill: "transparent",
+      left: x1,
+      top: y1,
+      width: x - x1,
+      height: y - y1,
+      strokeWidth: 2
+    });
+    const {
+      millivolt,
+      millisecond,
+      bpm
+    } = getTextContent({
+      x1,
+      x2: x,
+      y1,
+      y2: y
+    });
+    const textValue = `\u6D4B\u91CF\u5E45\u5EA6\uFF1A${millivolt}
+\u6D4B\u8BD5\u65F6\u95F4\uFF1A${millisecond}
+\u77AC\u65F6\u5FC3\u7387\uFF1A${bpm}`;
+    const text = drawText([x1, y + 10], {
+      value: textValue,
+      ...measureTextStyle,
+      originX: "left",
+      originY: "top",
+      backgroundColor: "#fff"
+    });
+    ruler.obj.text = text;
+    canvas.value.add(ruler.obj, text);
+  }
+  function removeRuler() {
+    if (ruler.obj) {
+      canvas.value.remove(ruler.obj);
+      ruler.obj.text && canvas.value.remove(ruler.obj.text);
+      ruler.obj = null;
+    }
+  }
+  function toggleFlag() {
+    if (flag.value)
+      return;
+    flag.value = true;
+  }
+  function useMeasureRuler() {
+    toggleFlag();
+    ruler.type = "line";
+  }
+  function drawCaliperAndCaliperRuler(type, origin) {
+    removeMeasureInstrument();
+    const {
+      width,
+      height,
+      rect
+    } = caliperAndCaliperRuler[type];
+    if (rect)
+      return;
+    let horizontalLine2;
+    const {
+      x,
+      y
+    } = origin || caliperAndCaliperRuler.origin;
+    const horizontalY = y + caliperAndCaliperRuler["caliper"].height;
+    const hasHorizontalLine = ["caliper", "rectRuler"].includes(type);
+    caliperAndCaliperRuler[type].rect = new fabric.Rect({
+      left: x,
+      top: y,
+      width,
+      height,
+      strokeWidth: 0,
+      fill: "transparent",
+      hasControls: false,
+      hasBorders: false,
+      hoverCursor: "move"
+    });
+    const lineOption = {
+      ...measureLineStyle,
+      hasControls: false,
+      hasBorders: false,
+      hoverCursor: "e-resize",
+      strokeWidth: 2,
+      __type: type,
+      evented: true,
+      selectable: true
+    };
+    const leftLine = new fabric.Line([x, y, x, y + height], {
+      ...lineOption,
+      lockMovementY: true,
+      originX: "center"
+    });
+    const rightLine = new fabric.Line([x + width, y, x + width, y + height], {
+      ...lineOption,
+      lockMovementY: true,
+      originX: "center"
+    });
+    const horizontalLine = new fabric.Line([x, horizontalY, x + width, horizontalY], {
+      ...lineOption,
+      lockMovementX: true,
+      evented: hasHorizontalLine,
+      hoverCursor: hasHorizontalLine ? "n-resize" : "default",
+      originY: "center"
+    });
+    let textValue = getTextContent({
+      x1: horizontalLine.x1,
+      x2: horizontalLine.x2
+    }).millisecond;
+    if (type === "rectRuler") {
+      const {
+        millivolt,
+        millisecond,
+        bpm
+      } = getTextContent({
+        x1: x + width,
+        x2: x,
+        y1: y + height,
+        y2: y
+      });
+      textValue = `\u6D4B\u91CF\u5E45\u5EA6\uFF1A${millivolt}
+\u6D4B\u8BD5\u65F6\u95F4\uFF1A${millisecond}
+\u77AC\u65F6\u5FC3\u7387\uFF1A${bpm}`;
+      horizontalLine.set({
+        y1: y,
+        y2: y
+      });
+      horizontalLine2 = new fabric.Line([x, y + height, x + width, y + height], {
+        ...lineOption,
+        lockMovementX: true,
+        evented: true,
+        hoverCursor: "n-resize",
+        originY: "center"
+      });
+    }
+    const text = drawText([x, (type === "rectRuler" ? horizontalLine2.top : horizontalLine.top) + 10], {
+      value: textValue,
+      ...measureTextStyle,
+      originX: "left",
+      originY: "top",
+      backgroundColor: "#fff"
+    });
+    leftLine.rect = caliperAndCaliperRuler[type].rect;
+    rightLine.rect = caliperAndCaliperRuler[type].rect;
+    horizontalLine.rect = caliperAndCaliperRuler[type].rect;
+    if (horizontalLine2) {
+      horizontalLine2.rect = caliperAndCaliperRuler[type].rect;
+    }
+    Object.assign(caliperAndCaliperRuler[type].rect, {
+      leftLine,
+      rightLine,
+      horizontalLine,
+      horizontalLine2,
+      text
+    });
+    setRectEvent(caliperAndCaliperRuler[type].rect, type);
+    setLineEvent(leftLine, "left");
+    setLineEvent(rightLine, "right");
+    hasHorizontalLine && setLineEvent(horizontalLine, "horizontal");
+    horizontalLine2 && setLineEvent(horizontalLine2, "horizontal2");
+    const arr = [caliperAndCaliperRuler[type].rect, leftLine, rightLine, horizontalLine, horizontalLine2, text].filter((o) => !!o);
+    canvas.value.add(...arr);
+  }
+  function getTextContent({
+    x1,
+    x2,
+    y1,
+    y2
+  }) {
+    const millisecond = (getXValue(Math.abs(x2 - x1)) * 1e3).toFixed(3);
+    const millivolt = isNumber(y1) && isNumber(y2) ? getYValue(Math.abs(y2 - y1)).toFixed(3) : 0;
+    const bpm = (6e4 / +millisecond).toFixed(3);
+    return {
+      millisecond: `${millisecond}ms`,
+      millivolt: `${millivolt}mv`,
+      bpm: `${bpm}bpm`
+    };
+  }
+  function setRectEvent(rect, type) {
+    rect.on("moving", () => {
+      const {
+        leftLine,
+        rightLine,
+        horizontalLine,
+        horizontalLine2,
+        text
+      } = rect;
+      leftLine == null ? void 0 : leftLine.setCoords().set({
+        x1: rect.left,
+        y1: rect.top,
+        x2: rect.left,
+        y2: rect.top + rect.height
+      });
+      rightLine == null ? void 0 : rightLine.setCoords().set({
+        x1: rect.left + rect.width,
+        y1: rect.top,
+        x2: rect.left + rect.width,
+        y2: rect.top + rect.height
+      });
+      const horizontalY = ["caliper", "rectRuler"].includes(type) ? rect.top + rect.height : rect.top + rect.height / 2;
+      text.setCoords().set({
+        left: rect.left,
+        top: horizontalY + 10
+      });
+      if (type === "rectRuler") {
+        horizontalLine == null ? void 0 : horizontalLine.setCoords().set({
+          x1: rect.left,
+          x2: rect.left + rect.width,
+          y1: rect.top,
+          y2: rect.top
+        });
+        horizontalLine2 == null ? void 0 : horizontalLine2.setCoords().set({
+          x1: rect.left,
+          y1: horizontalY,
+          x2: rect.left + rect.width,
+          y2: horizontalY
+        });
+      } else {
+        horizontalLine == null ? void 0 : horizontalLine.setCoords().set({
+          x1: rect.left,
+          y1: horizontalY,
+          x2: rect.left + rect.width,
+          y2: horizontalY
+        });
+      }
+    });
+    rect.on("mouseup", (event) => {
+      var _a;
+      if (event.button === 1) {
+        canvas.value.discardActiveObject();
+        rect.leftLine.bringToFront();
+        rect.rightLine.bringToFront();
+        rect.horizontalLine.bringToFront();
+        (_a = rect.horizontalLine2) == null ? void 0 : _a.bringToFront();
+      }
+    });
+  }
+  function setLineEvent(line, direction) {
+    line.on("moving", () => {
+      const {
+        rect
+      } = line;
+      if (!rect)
+        return;
+      const {
+        leftLine,
+        rightLine,
+        horizontalLine,
+        horizontalLine2,
+        text
+      } = rect;
+      if (direction === "horizontal" && !horizontalLine2 || direction === "horizontal2") {
+        if (line.top <= rect.top) {
+          line.setCoords().set({
+            y1: rect.top,
+            y2: rect.top
+          });
+        } else {
+          line.setCoords().set({
+            y1: line.top,
+            y2: line.top
+          });
+        }
+        rect.setCoords().set({
+          height: line.top - rect.top
+        });
+        leftLine == null ? void 0 : leftLine.setCoords().set({
+          y2: line.top
+        });
+        rightLine == null ? void 0 : rightLine.setCoords().set({
+          y2: line.top
+        });
+        text.setCoords().set({
+          top: line.top + 10
+        });
+        if (!horizontalLine2)
+          return;
+      }
+      if (direction === "horizontal" && horizontalLine2) {
+        if (line.top >= horizontalLine2.top) {
+          line.setCoords().set({
+            y1: horizontalLine2.top,
+            y2: horizontalLine2.top
+          });
+        } else {
+          line.setCoords().set({
+            y1: line.top,
+            y2: line.top
+          });
+        }
+        rect.setCoords().set({
+          top: line.top,
+          height: horizontalLine2.top - line.top
+        });
+        leftLine == null ? void 0 : leftLine.setCoords().set({
+          y1: line.top
+        });
+        rightLine == null ? void 0 : rightLine.setCoords().set({
+          y1: line.top
+        });
+        text.setCoords().set({
+          top: horizontalLine2.top + 10
+        });
+      }
+      if (direction === "left") {
+        if (line.left >= rightLine.left) {
+          line.setCoords().set({
+            x1: rightLine.left,
+            x2: rightLine.left
+          });
+        } else {
+          line.setCoords().set({
+            x1: line.left,
+            x2: line.left
+          });
+        }
+        rect.setCoords().set({
+          left: line.left,
+          width: rightLine.left - line.left
+        });
+        horizontalLine.setCoords().set({
+          x1: line.left
+        });
+        horizontalLine2 == null ? void 0 : horizontalLine2.setCoords().set({
+          x1: line.left
+        });
+        text.setCoords().set({
+          left: line.left
+        });
+      }
+      if (direction === "right") {
+        if (line.left <= leftLine.left) {
+          line.setCoords().set({
+            x1: leftLine.left,
+            x2: leftLine.left
+          });
+        } else {
+          line.setCoords().set({
+            x1: line.left,
+            x2: line.left
+          });
+        }
+        rect.setCoords().set({
+          width: line.left - leftLine.left
+        });
+        horizontalLine.setCoords().set({
+          x2: line.left
+        });
+        horizontalLine2 == null ? void 0 : horizontalLine2.setCoords().set({
+          x2: line.left
+        });
+      }
+      const {
+        millivolt,
+        millisecond,
+        bpm
+      } = getTextContent({
+        x1: horizontalLine.x1,
+        x2: horizontalLine.x2,
+        y1: leftLine.y1,
+        y2: leftLine.y2
+      });
+      const textValue = horizontalLine2 ? `\u6D4B\u91CF\u5E45\u5EA6\uFF1A${millivolt}
+\u6D4B\u8BD5\u65F6\u95F4\uFF1A${millisecond}
+\u77AC\u65F6\u5FC3\u7387\uFF1A${bpm}` : millisecond;
+      text.set("text", textValue);
+    });
+  }
+  function removeMeasureInstrument() {
+    Object.values(caliperAndCaliperRuler).forEach((item) => {
+      const {
+        rect
+      } = item;
+      if (!rect)
+        return;
+      canvas.value.remove(rect);
+      rect.leftLine && canvas.value.remove(rect.leftLine);
+      rect.rightLine && canvas.value.remove(rect.rightLine);
+      rect.horizontalLine && canvas.value.remove(rect.horizontalLine);
+      rect.horizontalLine2 && canvas.value.remove(rect.horizontalLine2);
+      rect.text && canvas.value.remove(rect.text);
+      item.rect = null;
+    });
+    removeRuler();
+  }
+  function useCaliper() {
+    drawCaliperAndCaliperRuler("caliper");
+  }
+  function useCaliperRuler() {
+    drawCaliperAndCaliperRuler("caliperRuler");
+  }
+  function useRectRuler() {
+    toggleFlag();
+    ruler.type = "rect";
+  }
+  return {
+    flag,
+    useMeasureRuler,
+    useCaliper,
+    useCaliperRuler,
+    useRectRuler
+  };
+}
+
+export { useMeasureInstrument };

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

@@ -1 +1,12 @@
-export{defaultBorderStyle,defaultLineStyle,defaultRectStyle,defaultStyle,defaultTextStyle,drawArrow,drawLine,drawPoint,drawText,drawTextAndIconGroup,drawTextGroup}from"./useDraw.js";export{useGrid}from"./useGrid.js";export{useBirthProcessCumputedPoint,useCumputedPoint,useElectrocardiogramCumputedPoint}from"./useCumputedPoint.js";export{bus,useCanvasEvent}from"./useEvent.js";export{useShadow}from"./useShadow.js";export{drawScaleLine,drawScaleNumber,getScaleInfo}from"./useScaleColumn.js";export{useCommon}from"./useCommon.js";export{useBirthProcessChart}from"./birthProcess/useBirthProcessChart.js";export{useTemperatureChart}from"./temperature/useTemperatureChart.js";export{useSurgicalAnesthesiaChart}from"./surgicalAnesthesia/useSurgicalAnesthesiaChart.js";export{useElectrocardiogramChart}from"./electrocardiogram/useElectrocardiogramChart.js";export{useNewBirthProcessChart}from"./newBirthProcess/useNewBirthProcessChart.js";
+export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawArrow, drawLine, drawPoint, drawText, drawTextAndIconGroup, drawTextGroup } from './useDraw.js';
+export { useGrid } from './useGrid.js';
+export { useBirthProcessCumputedPoint, useCumputedPoint, useElectrocardiogramCumputedPoint } from './useCumputedPoint.js';
+export { bus, useCanvasEvent } from './useEvent.js';
+export { useShadow } from './useShadow.js';
+export { drawScaleLine, drawScaleNumber, getScaleInfo } from './useScaleColumn.js';
+export { useCommon } from './useCommon.js';
+export { useBirthProcessChart } from './birthProcess/useBirthProcessChart.js';
+export { useTemperatureChart } from './temperature/useTemperatureChart.js';
+export { useSurgicalAnesthesiaChart } from './surgicalAnesthesia/useSurgicalAnesthesiaChart.js';
+export { useElectrocardiogramChart } from './electrocardiogram/useElectrocardiogramChart.js';
+export { useNewBirthProcessChart } from './newBirthProcess/useNewBirthProcessChart.js';