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

package/es/components/fabric-chart/src/hooks/surgicalAnesthesia/useTop.js

@@ -1 +1,847 @@
-import{fabric as e}from"../../../../../shared/utils/fabricjs/index.js";import{defaultStyle as t,drawText as n,defaultRectStyle as i,drawTextGroup as o,drawLine as r,drawPoint as l}from"../useDraw.js";import{useGrid as s}from"../useGrid.js";import{useBirthProcessCumputedPoint as c}from"../useCumputedPoint.js";import"../useEvent.js";import"../useShadow.js";import{drawScaleNumber as u}from"../useScaleColumn.js";import{useCommon as a}from"../useCommon.js";import"vue";import{getScaleNumberList as f}from"../../utils/index.js";import{filter as d,omit as h,has as p,isArray as m}from"lodash-es";import"date-fns";import{OTHER_MENU as g}from"../../constants/index.js";import"@vueuse/shared";import"naive-ui";import"@vueuse/core";import"./useOther.js";import"../../../../../shared/utils/index.js";const v=d(g,(e=>"add"!==e.type));function L(e,t,[n,i]){var o,r;let l=null;for(let s=0;s<e.length;s++){const c=e[s],{left:u,top:a,width:f,height:d}=c;if("tree"===t&&!(null==(o=c.children)?void 0:o.length)&&i>=a&&i<=a+d){l=c;break}if("treeMenu"===t&&n>=u&&n<=u+f&&i>=a&&i<=a+d){l=c;break}if(null==(r=c.children)?void 0:r.length){const e=L(c.children,t,[n,i]);if(e){l=e;break}}}return l?h(l,["uuid","left","top","width","height"]):null}function x(d,g,x,y,w){const{computedX:X,getXValue:C}=c(g),{originX:b,endX:Y,xCellWidth:k,originYXAxis:S,top:j,canvasWidth:M,borderStyle:$,treeData:G,xAxis:I,topGridYNumber:E,topGridOriginY:P,topGridYCellHeight:R,topGridEndY:T,event:z,extraMenuConfig:A,getTreeData:V,grid:D}=g,{getPointEventProps:B}=a(d,x,g);let N=V();const W=new Set;function F(){const{show:e=!0,range:t}=(null==j?void 0:j.scaleValue)||{};return e&&m(t)}function H(){!function e(t){t.forEach((t=>{var i;(null==(i=t.children)?void 0:i.length)?e(t.children):(function(e){if(!(null==e?void 0:e.data)||!Array.isArray(e.data))return;const{lineStyle:t}=j.dataStyle||{},n=e.top,i=n+R,o=i-R/2,l={y1:n,y2:i,halfY:o};let s=null;const c=h(e,["data","width","height","left","top"]);e.data.forEach(((n,i,u)=>{const a={...c,data:n,index:i},{time:f,continue:d}=n,[h,p]=f,m=h&&X(h),g=p&&X(p),v=q({...l,x:m},{isCustomIcon:!g&&!d,isContinue:!1,isLeft:!0}),L=q({...l,x:g},{isCustomIcon:!1,isContinue:!!d});let x,y;if((v||m<b)&&(L||g>Y)){const n=v?m:b,i=L?g:Y;x="wavy"===e.lineType?O([n,i,o],t):r([n,o,i,o],t),y=U({width:i-n-k,left:n+(i-n)/2,top:o,onlyRect:!0}),y.origin=a,x.centerLineRect=y}const w={startLine:v,centerLine:x,endLine:L};let C,S;!function(e,t,n){const{startLine:i,centerLine:o,endLine:r}=t,{startLine:l,endLine:s}=e||{};if(i){i.origin=n;const e={x1:b,x2:r?r.left:Y};s?(e.x1=s.left,s.limitX.x2=i.left,i.prevLine=s,s.nextLine=i):l&&(e.x1=l.left,l.limitX.x2=i.left,i.prevLine=l,l.nextLine=i),i.limitX=e,o&&(i.centerLine=o)}if(r){r.origin=n;const e={x1:i?i.left:b,x2:Y};r.limitX=e,o&&(r.centerLine=o)}o&&(o.origin=n);i&&r&&(i.nearLine=r,r.nearLine=i)}(s,w,a),s&&(C=_(u[i-1],s,o,a)),i===u.length-1&&(S=_(n,w,o,a)),s=w,x&&W.add(x),y&&W.add(y),v&&W.add(v),L&&W.add(L),C&&W.add(C),S&&W.add(S)}))}(t),function(e){if(F())return;const t=M-Y,{divider:i={},style:o}=(null==j?void 0:j.total)||{};if(i.show){const n=e.top+R,o=r([Y,n,Y+t,n],i.style);d.value.add(o)}if(!(null==e?void 0:e.total))return;const l=e.top+R/2,s=Y+t/2,c=n([s,l],{value:e.total,...o}),u=M-$.strokeWidth;s+c.width>u&&c.set({originX:"right",left:u});c&&d.value.add(c)}(t))}))}(N),W.size&&d.value.add(...W)}function O([n,i,o],r){const{stroke:l="#000"}=r||{},{subXCell:s=6}=D,c=k*s,u=R/2,a=c/2,f=o-u,d=o+u;if(n>i)return;let h=n,p=`M${h} ${o}`,m=0;for(;i-h>=c;)p+=` Q${h+a} ${m%2==0?f:d} ${h+c} ${o}`,h+=c,m++;i-h<c&&(p+=` L${i} ${o}`);const g=new e.Gradient({gradientUnits:"pencentage",coords:{x1:i,y1:0,x2:0,y2:0},colorStops:[{offset:0,color:l+"90"},{offset:.5,color:l+"50"},{offset:1,color:l+"20"}]}),v=new e.Path(p,{fill:g,objectCaching:!1,...r,...t});return v.pathPointer=[n,i,o],v.selfStyle=r,v}function _(e,t,n,i){let o;const{content:r}=e.value||{},{startLine:s,endLine:c,centerLine:u}=t;if(r&&(s||u||c)){const{textStyle:e}=j.dataStyle||{};o=l(r,{fontSize:12,...e,backgroundColor:"#fff",lockMovementX:!0,lockMovementY:!0});const u=Q(o,t,n);o&&(o.set(u),o.origin=i,J(o),s&&(s.text=o),c&&(c.text=o))}return o}function Q(e,t,n){var i,o,r;const l=e.width+1,{startLine:s,centerLine:c,endLine:u}=t,a={top:n,originX:"center",originY:"center"},f=null!=(r=null!=(o=null==c?void 0:c.x1)?o:null==(i=null==c?void 0:c.pathPointer)?void 0:i[0])?r:0;return c&&l<=c.width?a.left=f+c.width/2:u&&l<=u.limitX.x2-u.left?(a.originX="left",a.left=u.left+1):s&&!u&&l<=s.limitX.x2-s.left?(a.originX="left",a.left=s.left+(s.isCustomIcon?5:1)):s&&l<=s.left-s.limitX.x1?(a.originX="right",a.left=s.left-(s.isCustomIcon?5:1)):c?(a.originY="top",a.left=f+c.width/2,a.top=n+1,a.fontSize=10):s&&(a.originX="left",a.originY="top",a.fontSize=10,a.left=s.left,a.top=n+1),e.bringToFront(),a}function U(t){const{bindLine:n,width:i,left:o,top:r,props:l,onlyRect:s=!1}=t,c={originX:"center",originY:"center",hasControls:!1,hasBorders:!1,hoverCursor:"pointer",left:o,top:r},u=new e.Rect({width:i,height:R,fill:"transparent",...c});if(s)return u.set({lockMovementX:!0,lockMovementY:!0}),J(u),u;const a=new e.Group([n,u],{...c,...l,lockMovementY:!0});return J(a),a}function q(e,{isCustomIcon:t,isContinue:n,isLeft:i}){const{x:o,y1:s,y2:c,halfY:u}=e;if(!o||o<b||o>Y)return;const{lineStyle:a,customIcon:f={}}=j.dataStyle||{};let d;const h={left:o,top:u};d=t?l(f.type||"circle",{fill:a.stroke,...f.style,...h}):n?l(">",{fill:a.stroke,...h,fontSize:18}):r([o,s,o,u],a);const p=U({...h,width:k,bindLine:d,props:B()});return p.isLeft=i,p.isCustomIcon=t,p}function J(e){z.hovered&&(e.on("mouseover",(()=>{K(e,"hover")})),e.on("mouseout",(()=>{y.show=!1}))),e.lockMovementX&&e.lockMovementY||(e.on("moving",(()=>{!function(e){e.setCoords(),e.left<e.limitX.x1&&e.set("left",e.limitX.x1);e.left>e.limitX.x2&&e.set("left",e.limitX.x2)}(e),function(e){var t,n;if(e.centerLine){const i=e.isLeft?{x1:e.left}:{x2:e.left};if(p(e.centerLine,"pathPointer")){const{pathPointer:t,selfStyle:n}=e.centerLine;t[e.isLeft?0:1]=e.left,d.value.remove(e.centerLine);const{centerLineRect:i}=e.centerLine;e.centerLine=null;const o=O(t,n);o&&(i.bringToFront(),o.centerLineRect=i,e.centerLine=o,e.nearLine.centerLine=o,d.value.add(o))}else e.centerLine.setCoords().set(i);if(e.isLeft){const n=e.limitX.x2-e.left;null==(t=e.centerLine.centerLineRect)||t.setCoords().set({width:n-k,left:e.left+n/2})}else{const t=e.left-e.limitX.x1;null==(n=e.centerLine.centerLineRect)||n.setCoords().set({width:t-k,left:e.limitX.x1+t/2})}}if(e.text){const t=Q(e.text,{startLine:e.isLeft?e:e.nearLine,centerLine:e.centerLine,endLine:e.isLeft?e.nearLine:e},e.top);e.text.setCoords().set(t)}}(e),z.hovered&&K(e)})),e.on("mouseup",(t=>{if(1===t.button){!function(e){e.isLeft?(e.prevLine&&(e.prevLine.limitX.x2=e.left),e.nearLine&&(e.nearLine.limitX.x1=e.left)):(e.nextLine&&(e.nextLine.limitX.x1=e.left),e.nearLine&&(e.nearLine.limitX.x2=e.left))}(e);const t={type:"tree",...e.origin};x("change",h(t,["uuid"]))}})))}function K(e,t="moving"){var n,i,o;y.isTarget=!0,y.show=!0;const{data:r}=e.origin;y.point={x:e.left,y:e.top},y.marginTop=R/2;let[l="",s=""]=r.time||[];if("moving"===t){const t=C(e.left);e.isLeft?l=t:s=t,r.time=[l,s],e.text&&(e.text.origin.data.time=[l,s])}y.list=[`开始时间 ${l}`,`结束时间 ${s}`,`流速 ${(null==(n=r.value)?void 0:n.currentSpeed)||""}`,`浓度 ${(null==(i=r.value)?void 0:i.consistence)||""}`,`总量 ${(null==(o=r.value)?void 0:o.total)||""}`],y.sourceData=[{type:"tree",startTime:l,endTime:s,value:r.value}]}return s(d,{...g,gridYNumber:E,originY:P,yCellHeight:R,endY:T}),function(){var o;const{height:r,list:l,left:s,spaceValue:c,style:u,marginBottom:a}=I;if(!r)return;const f=[],h=S+(a?r-a:r/2),p=a?"bottom":"center";l.forEach(((e,t)=>{const i=s+t*k*c;f.push(n([i,h],{value:e.slice(11,16),originY:p,...u}))}));const m=f.length>0?new e.Group([...f],{...t,objectCaching:!1}):null;m&&d.value.add(m);const g=new e.Rect({width:M,height:r,left:0,top:S,...i,originX:"left",originY:"top",...$});if(d.value.add(g),!F()){const{title:e=(null==(o=window.getLanguageByCode)?void 0:o.call(window,"10010.1.234"))||"总量",style:t}=(null==j?void 0:j.total)||{},i=n([Y+(M-Y)/2,h],{value:e,originY:p,...t});d.value.add(i)}}(),function(){var n;const i=(null==(n=null==j?void 0:j.tree)?void 0:n.textStyle)||{},r=[];!function e(t){t.forEach((t=>{var n;const{width:l,height:s,left:c,top:u,title:a=""}=t,f={value:a,...i};(null==(n=t.children)?void 0:n.length)?(f.value=a.split("").join("\n"),e(t.children)):f.textAlign="left",r.push(o({width:l,height:s,...$},f,{left:c,top:u},!0))}))}(G);const l=r.length>0?new e.Group([...r],{...t,objectCaching:!1}):null;l&&d.value.add(l)}(),H(),function(){const{range:n,spaceValue:i=.5,spaceGridNumber:o=1,style:r,margin:l=5}=(null==j?void 0:j.scaleValue)||{};if(!F())return;const s=f(n,i),c=[];if(s.forEach(((e,t)=>{if(0===t||t===s.length-1)return;const n=T-t*R*o;Math.abs(n-P)<1||c.push(u(String(e),{style:r,position:"right"},Y+l,n))})),!c.length)return;const a=new e.Group(c,{objectCaching:!1,...t});d.value.add(a)}(),z.evented&&d.value.on("mouse:up",(e=>{3===e.button&&function(e){y.show=!1;const{x:t=0,y:n=0}=e.pointer||{};if(n>=P&&n<=T)if(t>=b&&t<=Y)if(e.target){const t=e.target;w.point={x:t.left,y:t.top},w.show=!0,w.target=t;const{treeMenuList:n=[]}=A;w.list=v.concat(n).map((e=>({...e,renderItem:()=>e.label,type:e.key||e.type,_type:"tree"})))}else{const e={type:"tree",treeItem:L(N,"tree",[t,n]),time:C(t)};x("right-click",e)}else{const e={type:"treeMenu",treeItem:L(G,"treeMenu",[t,n])};x("right-click",e)}}(e)})),{redrawLinePoints:function(){var e;W.size&&(null==(e=d.value)||e.remove(...W)),W.clear(),N=V(),H()},clickMenu:function({item:e,target:t}){var n;if(!t)return;const{type:i,_type:o}=e,r={...t.origin,type:o};if(v.map((e=>e.type)).includes(i)){if("remove"===i){const e=[...W].filter((e=>{var t;return(null==(t=e.origin)?void 0:t.uuid)===r.uuid}));e.length&&(d.value.remove(...e),e.forEach((e=>{W.delete(e)})))}x(i,h(r,["uuid"]))}else null==(n=A.click)||n.call(A,i,h(r,["uuid"]))}}}export{x as useTop};
+import { fabric } from '../../../../../shared/utils/fabricjs/index.js';
+import { defaultStyle, drawText, defaultRectStyle, drawTextGroup, drawLine, drawPoint } from '../useDraw.js';
+import { useGrid } from '../useGrid.js';
+import { useBirthProcessCumputedPoint } from '../useCumputedPoint.js';
+import '../useEvent.js';
+import '../useShadow.js';
+import { drawScaleNumber } from '../useScaleColumn.js';
+import { useCommon } from '../useCommon.js';
+import 'vue';
+import { getScaleNumberList } from '../../utils/index.js';
+import { filter, omit, has, isArray } from 'lodash-es';
+import 'date-fns';
+import { OTHER_MENU } from '../../constants/index.js';
+import '@vueuse/shared';
+import 'naive-ui';
+import '@vueuse/core';
+import './useOther.js';
+import '../../../../../shared/utils/index.js';
+
+const NEW_OTHER_MENU = filter(OTHER_MENU, (o) => o.type !== "add");
+function findTreeItem(tree, type, [x, y]) {
+  var _a, _b;
+  let item = null;
+  for (let i = 0; i < tree.length; i++) {
+    const _item = tree[i];
+    const {
+      left,
+      top,
+      width,
+      height
+    } = _item;
+    if (type === "tree") {
+      if (!((_a = _item.children) == null ? void 0 : _a.length) && y >= top && y <= top + height) {
+        item = _item;
+        break;
+      }
+    }
+    if (type === "treeMenu") {
+      if (x >= left && x <= left + width && y >= top && y <= top + height) {
+        item = _item;
+        break;
+      }
+    }
+    if ((_b = _item.children) == null ? void 0 : _b.length) {
+      const __item = findTreeItem(_item.children, type, [x, y]);
+      if (__item) {
+        item = __item;
+        break;
+      }
+    }
+  }
+  return item ? omit(item, ["uuid", "left", "top", "width", "height"]) : null;
+}
+function useTop(canvas, propItems, emits, pointTipProps, pointMenuProps) {
+  const {
+    computedX,
+    getXValue
+  } = useBirthProcessCumputedPoint(propItems);
+  const {
+    originX,
+    endX,
+    xCellWidth,
+    originYXAxis,
+    top,
+    canvasWidth,
+    borderStyle,
+    treeData,
+    xAxis,
+    topGridYNumber,
+    topGridOriginY,
+    topGridYCellHeight,
+    topGridEndY,
+    event,
+    extraMenuConfig,
+    getTreeData,
+    grid
+  } = propItems;
+  const {
+    getPointEventProps
+  } = useCommon(canvas, emits, propItems);
+  let originTreeData = getTreeData();
+  const gridPoints = /* @__PURE__ */ new Set();
+  function hasScale() {
+    const {
+      show = true,
+      range
+    } = (top == null ? void 0 : top.scaleValue) || {};
+    return show && isArray(range);
+  }
+  function drawScale() {
+    const {
+      range,
+      spaceValue = 0.5,
+      spaceGridNumber = 1,
+      style,
+      margin = 5
+    } = (top == null ? void 0 : top.scaleValue) || {};
+    if (!hasScale())
+      return;
+    const list = getScaleNumberList(range, spaceValue);
+    const textList = [];
+    list.forEach((num, i) => {
+      if (i === 0 || i === list.length - 1)
+        return;
+      const baseTop = topGridEndY - i * topGridYCellHeight * spaceGridNumber;
+      if (Math.abs(baseTop - topGridOriginY) < 1)
+        return;
+      textList.push(drawScaleNumber(String(num), {
+        style,
+        position: "right"
+      }, endX + margin, baseTop));
+    });
+    if (!textList.length)
+      return;
+    const group = new fabric.Group(textList, {
+      objectCaching: false,
+      ...defaultStyle
+    });
+    canvas.value.add(group);
+  }
+  function drawXAxis() {
+    var _a;
+    const {
+      height,
+      list,
+      left,
+      spaceValue,
+      style,
+      marginBottom
+    } = xAxis;
+    if (!height)
+      return;
+    const texts = [];
+    const y = originYXAxis + (marginBottom ? height - marginBottom : height / 2);
+    const currentOriginY = marginBottom ? "bottom" : "center";
+    list.forEach((str, index) => {
+      const x = left + index * xCellWidth * spaceValue;
+      texts.push(drawText([x, y], {
+        value: str.slice(11, 16),
+        originY: currentOriginY,
+        ...style
+      }));
+    });
+    const group = texts.length > 0 ? new fabric.Group([...texts], {
+      ...defaultStyle,
+      objectCaching: false
+    }) : null;
+    group && canvas.value.add(group);
+    const rect = new fabric.Rect({
+      width: canvasWidth,
+      height,
+      left: 0,
+      top: originYXAxis,
+      ...defaultRectStyle,
+      originX: "left",
+      originY: "top",
+      ...borderStyle
+    });
+    canvas.value.add(rect);
+    if (!hasScale()) {
+      const {
+        title = ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.234")) || "\u603B\u91CF",
+        style: style2
+      } = (top == null ? void 0 : top.total) || {};
+      const totalText = drawText([endX + (canvasWidth - endX) / 2, y], {
+        value: title,
+        originY: currentOriginY,
+        ...style2
+      });
+      canvas.value.add(totalText);
+    }
+  }
+  function drawTree() {
+    var _a;
+    const textStyle = ((_a = top == null ? void 0 : top.tree) == null ? void 0 : _a.textStyle) || {};
+    const textRectGroups = [];
+    doDrawTree(treeData);
+    const group = textRectGroups.length > 0 ? new fabric.Group([...textRectGroups], {
+      ...defaultStyle,
+      objectCaching: false
+    }) : null;
+    group && canvas.value.add(group);
+    function doDrawTree(treeData2) {
+      treeData2.forEach((item) => {
+        var _a2;
+        const {
+          width,
+          height,
+          left,
+          top: top2,
+          title = ""
+        } = item;
+        const fontStyle = {
+          value: title,
+          ...textStyle
+        };
+        if ((_a2 = item.children) == null ? void 0 : _a2.length) {
+          fontStyle.value = title.split("").join("\n");
+          doDrawTree(item.children);
+        } else {
+          fontStyle.textAlign = "left";
+        }
+        textRectGroups.push(drawTextGroup({
+          width,
+          height,
+          ...borderStyle
+        }, fontStyle, {
+          left,
+          top: top2
+        }, true));
+      });
+    }
+  }
+  function drawTreeLineData() {
+    doDrawTree(originTreeData);
+    gridPoints.size && canvas.value.add(...gridPoints);
+    function doDrawTree(treeData2) {
+      treeData2.forEach((item) => {
+        var _a;
+        if ((_a = item.children) == null ? void 0 : _a.length) {
+          doDrawTree(item.children);
+        } else {
+          drawLineData(item);
+          drawTotal(item);
+        }
+      });
+    }
+  }
+  function drawTotal(treeItem) {
+    if (hasScale())
+      return;
+    const totalWidth = canvasWidth - endX;
+    const {
+      divider = {},
+      style
+    } = (top == null ? void 0 : top.total) || {};
+    if (divider.show) {
+      const dividerY = treeItem.top + topGridYCellHeight;
+      const line = drawLine([endX, dividerY, endX + totalWidth, dividerY], divider.style);
+      canvas.value.add(line);
+    }
+    if (!(treeItem == null ? void 0 : treeItem.total))
+      return;
+    const y = treeItem.top + topGridYCellHeight / 2;
+    const x = endX + totalWidth / 2;
+    const text = drawText([x, y], {
+      value: treeItem.total,
+      ...style
+    });
+    const limitRight = canvasWidth - borderStyle.strokeWidth;
+    if (x + text.width > limitRight)
+      text.set({
+        originX: "right",
+        left: limitRight
+      });
+    text && canvas.value.add(text);
+  }
+  function drawLineData(treeItem) {
+    if (!(treeItem == null ? void 0 : treeItem.data) || !Array.isArray(treeItem.data))
+      return;
+    const {
+      lineStyle
+    } = top.dataStyle || {};
+    const y1 = treeItem.top;
+    const y2 = y1 + topGridYCellHeight;
+    const halfY = y2 - topGridYCellHeight / 2;
+    const coordinate = {
+      y1,
+      y2,
+      halfY
+    };
+    let prevPoint = null;
+    const otherProps = omit(treeItem, ["data", "width", "height", "left", "top"]);
+    treeItem.data.forEach((item, index, arr) => {
+      const _otherProps = {
+        ...otherProps,
+        data: item,
+        index
+      };
+      const {
+        time,
+        continue: isContinue
+      } = item;
+      const [startTime, endTime] = time;
+      const x1 = startTime && computedX(startTime);
+      const x2 = endTime && computedX(endTime);
+      const startLine = drawPointLine({
+        ...coordinate,
+        x: x1
+      }, {
+        isCustomIcon: !x2 && !isContinue,
+        isContinue: false,
+        isLeft: true
+      });
+      const endLine = drawPointLine({
+        ...coordinate,
+        x: x2
+      }, {
+        isCustomIcon: false,
+        isContinue: !!isContinue
+      });
+      let centerLine, centerLineRect;
+      if ((startLine || x1 < originX) && (endLine || x2 > endX)) {
+        const _x1 = startLine ? x1 : originX;
+        const _x2 = endLine ? x2 : endX;
+        centerLine = treeItem.lineType === "wavy" ? drawPath([_x1, _x2, halfY], lineStyle) : drawLine([_x1, halfY, _x2, halfY], lineStyle);
+        centerLineRect = drawClickableRange({
+          width: _x2 - _x1 - xCellWidth,
+          left: _x1 + (_x2 - _x1) / 2,
+          top: halfY,
+          onlyRect: true
+        });
+        centerLineRect.origin = _otherProps;
+        centerLine.centerLineRect = centerLineRect;
+      }
+      const currentPoint = {
+        startLine,
+        centerLine,
+        endLine
+      };
+      addProps(prevPoint, currentPoint, _otherProps);
+      let preText;
+      if (prevPoint) {
+        preText = drawLineText(arr[index - 1], prevPoint, halfY, _otherProps);
+      }
+      let lastText;
+      if (index === arr.length - 1) {
+        lastText = drawLineText(item, currentPoint, halfY, _otherProps);
+      }
+      prevPoint = currentPoint;
+      centerLine && gridPoints.add(centerLine);
+      centerLineRect && gridPoints.add(centerLineRect);
+      startLine && gridPoints.add(startLine);
+      endLine && gridPoints.add(endLine);
+      preText && gridPoints.add(preText);
+      lastText && gridPoints.add(lastText);
+    });
+  }
+  function addProps(prevPoint, currentPoint, otherProps) {
+    const {
+      startLine,
+      centerLine,
+      endLine
+    } = currentPoint;
+    const {
+      startLine: preStartLine,
+      endLine: preEndLine
+    } = prevPoint || {};
+    if (startLine) {
+      startLine.origin = otherProps;
+      const leftLimit = {
+        x1: originX,
+        x2: endLine ? endLine.left : endX
+      };
+      if (preEndLine) {
+        leftLimit.x1 = preEndLine.left;
+        preEndLine.limitX.x2 = startLine.left;
+        startLine.prevLine = preEndLine;
+        preEndLine.nextLine = startLine;
+      } else if (preStartLine) {
+        leftLimit.x1 = preStartLine.left;
+        preStartLine.limitX.x2 = startLine.left;
+        startLine.prevLine = preStartLine;
+        preStartLine.nextLine = startLine;
+      }
+      startLine.limitX = leftLimit;
+      centerLine && (startLine.centerLine = centerLine);
+    }
+    if (endLine) {
+      endLine.origin = otherProps;
+      const rightLimit = {
+        x1: startLine ? startLine.left : originX,
+        x2: endX
+      };
+      endLine.limitX = rightLimit;
+      centerLine && (endLine.centerLine = centerLine);
+    }
+    if (centerLine) {
+      centerLine.origin = otherProps;
+    }
+    if (startLine && endLine) {
+      startLine.nearLine = endLine;
+      endLine.nearLine = startLine;
+    }
+  }
+  function drawPath([x1, x2, y], style) {
+    const {
+      stroke = "#000"
+    } = style || {};
+    const {
+      subXCell = 6
+    } = grid;
+    const subWidth = xCellWidth * subXCell;
+    const halfHeight = topGridYCellHeight / 2;
+    const halfSubWidth = subWidth / 2;
+    const y1 = y - halfHeight;
+    const y2 = y + halfHeight;
+    if (x1 > x2)
+      return;
+    let start = x1;
+    let path = `M${start} ${y}`;
+    let i = 0;
+    while (x2 - start >= subWidth) {
+      path += ` Q${start + halfSubWidth} ${i % 2 === 0 ? y1 : y2} ${start + subWidth} ${y}`;
+      start += subWidth;
+      i++;
+    }
+    if (x2 - start < subWidth) {
+      path += ` L${x2} ${y}`;
+    }
+    const gradient = new fabric.Gradient({
+      gradientUnits: "pencentage",
+      coords: {
+        x1: x2,
+        y1: 0,
+        x2: 0,
+        y2: 0
+      },
+      colorStops: [{
+        offset: 0,
+        color: stroke + "90"
+      }, {
+        offset: 0.5,
+        color: stroke + "50"
+      }, {
+        offset: 1,
+        color: stroke + "20"
+      }]
+    });
+    const p = new fabric.Path(path, {
+      fill: gradient,
+      objectCaching: false,
+      ...style,
+      ...defaultStyle
+    });
+    p.pathPointer = [x1, x2, y];
+    p.selfStyle = style;
+    return p;
+  }
+  function drawLineText(item, __arrItem, _top, otherProps) {
+    let text;
+    const {
+      content
+    } = item.value || {};
+    const {
+      startLine,
+      endLine,
+      centerLine
+    } = __arrItem;
+    if (content && (startLine || centerLine || endLine)) {
+      const {
+        textStyle
+      } = top.dataStyle || {};
+      text = drawPoint(content, {
+        fontSize: 12,
+        ...textStyle,
+        backgroundColor: "#fff",
+        lockMovementX: true,
+        lockMovementY: true
+      });
+      const options = computeTextPosition(text, __arrItem, _top);
+      if (text) {
+        text.set(options);
+        text.origin = otherProps;
+        setPointEvent(text);
+        startLine && (startLine.text = text);
+        endLine && (endLine.text = text);
+      }
+    }
+    return text;
+  }
+  function computeTextPosition(textObj, __arrItem, _top) {
+    var _a, _b, _c;
+    const textWidth = textObj.width + 1;
+    const {
+      startLine,
+      centerLine,
+      endLine
+    } = __arrItem;
+    const options = {
+      top: _top,
+      originX: "center",
+      originY: "center"
+    };
+    const centerLineX1 = (_c = (_b = centerLine == null ? void 0 : centerLine.x1) != null ? _b : (_a = centerLine == null ? void 0 : centerLine.pathPointer) == null ? void 0 : _a[0]) != null ? _c : 0;
+    if (centerLine && textWidth <= centerLine.width) {
+      options.left = centerLineX1 + centerLine.width / 2;
+    } else if (endLine && textWidth <= endLine.limitX.x2 - endLine.left) {
+      options.originX = "left";
+      options.left = endLine.left + 1;
+    } else if (startLine && !endLine && textWidth <= startLine.limitX.x2 - startLine.left) {
+      options.originX = "left";
+      options.left = startLine.left + (startLine.isCustomIcon ? 5 : 1);
+    } else if (startLine && textWidth <= startLine.left - startLine.limitX.x1) {
+      options.originX = "right";
+      options.left = startLine.left - (startLine.isCustomIcon ? 5 : 1);
+    } else if (centerLine) {
+      options.originY = "top";
+      options.left = centerLineX1 + centerLine.width / 2;
+      options.top = _top + 1;
+      options.fontSize = 10;
+    } else if (startLine) {
+      options.originX = "left";
+      options.originY = "top";
+      options.fontSize = 10;
+      options.left = startLine.left;
+      options.top = _top + 1;
+    }
+    textObj.bringToFront();
+    return options;
+  }
+  function drawClickableRange(params) {
+    const {
+      bindLine,
+      width,
+      left,
+      top: top2,
+      props,
+      onlyRect = false
+    } = params;
+    const commonProps = {
+      originX: "center",
+      originY: "center",
+      hasControls: false,
+      hasBorders: false,
+      hoverCursor: "pointer",
+      left,
+      top: top2
+    };
+    const rectBg = new fabric.Rect({
+      width,
+      height: topGridYCellHeight,
+      fill: "transparent",
+      ...commonProps
+    });
+    if (onlyRect) {
+      rectBg.set({
+        lockMovementX: true,
+        lockMovementY: true
+      });
+      setPointEvent(rectBg);
+      return rectBg;
+    }
+    const line = new fabric.Group([bindLine, rectBg], {
+      ...commonProps,
+      ...props,
+      lockMovementY: true
+    });
+    setPointEvent(line);
+    return line;
+  }
+  function drawPointLine(coordinate, {
+    isCustomIcon,
+    isContinue,
+    isLeft
+  }) {
+    const {
+      x,
+      y1,
+      y2,
+      halfY
+    } = coordinate;
+    if (!x || x < originX || x > endX)
+      return;
+    const {
+      lineStyle,
+      customIcon = {}
+    } = top.dataStyle || {};
+    let pointLine;
+    const pointer = {
+      left: x,
+      top: halfY
+    };
+    if (isCustomIcon) {
+      pointLine = drawPoint(customIcon.type || "circle", {
+        fill: lineStyle.stroke,
+        ...customIcon.style,
+        ...pointer
+      });
+    } else if (isContinue) {
+      pointLine = drawPoint(">", {
+        fill: lineStyle.stroke,
+        ...pointer,
+        fontSize: 18
+      });
+    } else {
+      pointLine = drawLine([x, y1, x, halfY], lineStyle);
+    }
+    const line = drawClickableRange({
+      ...pointer,
+      width: xCellWidth,
+      bindLine: pointLine,
+      props: getPointEventProps()
+    });
+    line.isLeft = isLeft;
+    line.isCustomIcon = isCustomIcon;
+    return line;
+  }
+  function setPointEvent(point) {
+    if (event.hovered) {
+      point.on("mouseover", () => {
+        setPopup(point, "hover");
+      });
+      point.on("mouseout", () => {
+        pointTipProps.show = false;
+      });
+    }
+    if (point.lockMovementX && point.lockMovementY)
+      return;
+    point.on("moving", () => {
+      moveLimit(point);
+      updateLineAndText(point);
+      event.hovered && setPopup(point);
+    });
+    point.on("mouseup", (event2) => {
+      if (event2.button === 1) {
+        updateLimitX(point);
+        const params = {
+          type: "tree",
+          ...point.origin
+        };
+        emits("change", omit(params, ["uuid"]));
+      }
+    });
+  }
+  function setPopup(point, status = "moving") {
+    var _a, _b, _c;
+    pointTipProps.isTarget = true;
+    pointTipProps.show = true;
+    const {
+      data
+    } = point.origin;
+    pointTipProps.point = {
+      x: point.left,
+      y: point.top
+    };
+    pointTipProps.marginTop = topGridYCellHeight / 2;
+    let [startTime = "", endTime = ""] = data.time || [];
+    if (status === "moving") {
+      const value = getXValue(point.left);
+      if (point.isLeft) {
+        startTime = value;
+      } else {
+        endTime = value;
+      }
+      data.time = [startTime, endTime];
+      if (point.text) {
+        point.text.origin.data.time = [startTime, endTime];
+      }
+    }
+    pointTipProps.list = [`\u5F00\u59CB\u65F6\u95F4 ${startTime}`, `\u7ED3\u675F\u65F6\u95F4 ${endTime}`, `\u6D41\u901F ${((_a = data.value) == null ? void 0 : _a.currentSpeed) || ""}`, `\u6D53\u5EA6 ${((_b = data.value) == null ? void 0 : _b.consistence) || ""}`, `\u603B\u91CF ${((_c = data.value) == null ? void 0 : _c.total) || ""}`];
+    pointTipProps.sourceData = [{
+      type: "tree",
+      startTime,
+      endTime,
+      value: data.value
+    }];
+  }
+  function moveLimit(point) {
+    point.setCoords();
+    if (point.left < point.limitX.x1) {
+      point.set("left", point.limitX.x1);
+    }
+    if (point.left > point.limitX.x2) {
+      point.set("left", point.limitX.x2);
+    }
+  }
+  function updateLineAndText(point) {
+    var _a, _b;
+    if (point.centerLine) {
+      const options = point.isLeft ? {
+        x1: point.left
+      } : {
+        x2: point.left
+      };
+      if (has(point.centerLine, "pathPointer")) {
+        const {
+          pathPointer,
+          selfStyle
+        } = point.centerLine;
+        pathPointer[point.isLeft ? 0 : 1] = point.left;
+        canvas.value.remove(point.centerLine);
+        const {
+          centerLineRect
+        } = point.centerLine;
+        point.centerLine = null;
+        const c = drawPath(pathPointer, selfStyle);
+        if (c) {
+          centerLineRect.bringToFront();
+          c.centerLineRect = centerLineRect;
+          point.centerLine = c;
+          point.nearLine.centerLine = c;
+          canvas.value.add(c);
+        }
+      } else {
+        point.centerLine.setCoords().set(options);
+      }
+      if (point.isLeft) {
+        const width = point.limitX.x2 - point.left;
+        (_a = point.centerLine.centerLineRect) == null ? void 0 : _a.setCoords().set({
+          width: width - xCellWidth,
+          left: point.left + width / 2
+        });
+      } else {
+        const width = point.left - point.limitX.x1;
+        (_b = point.centerLine.centerLineRect) == null ? void 0 : _b.setCoords().set({
+          width: width - xCellWidth,
+          left: point.limitX.x1 + width / 2
+        });
+      }
+    }
+    if (point.text) {
+      const options = computeTextPosition(point.text, {
+        startLine: point.isLeft ? point : point.nearLine,
+        centerLine: point.centerLine,
+        endLine: point.isLeft ? point.nearLine : point
+      }, point.top);
+      point.text.setCoords().set(options);
+    }
+  }
+  function updateLimitX(point) {
+    if (point.isLeft) {
+      if (point.prevLine)
+        point.prevLine.limitX.x2 = point.left;
+      if (point.nearLine)
+        point.nearLine.limitX.x1 = point.left;
+    } else {
+      if (point.nextLine)
+        point.nextLine.limitX.x1 = point.left;
+      if (point.nearLine)
+        point.nearLine.limitX.x2 = point.left;
+    }
+  }
+  function redrawLinePoints() {
+    var _a;
+    gridPoints.size && ((_a = canvas.value) == null ? void 0 : _a.remove(...gridPoints));
+    gridPoints.clear();
+    originTreeData = getTreeData();
+    drawTreeLineData();
+  }
+  function setCanvasEvent() {
+    if (!event.evented)
+      return;
+    canvas.value.on("mouse:up", (event2) => {
+      if (event2.button === 3) {
+        handleRightClick(event2);
+      }
+    });
+  }
+  function handleRightClick(event2) {
+    pointTipProps.show = false;
+    const {
+      x = 0,
+      y = 0
+    } = event2.pointer || {};
+    if (y >= topGridOriginY && y <= topGridEndY) {
+      if (x >= originX && x <= endX) {
+        if (!event2.target) {
+          const params = {
+            type: "tree",
+            treeItem: findTreeItem(originTreeData, "tree", [x, y]),
+            time: getXValue(x)
+          };
+          emits("right-click", params);
+        } else {
+          const point = event2.target;
+          pointMenuProps.point = {
+            x: point.left,
+            y: point.top
+          };
+          pointMenuProps.show = true;
+          pointMenuProps.target = point;
+          const {
+            treeMenuList = []
+          } = extraMenuConfig;
+          pointMenuProps.list = NEW_OTHER_MENU.concat(treeMenuList).map((item) => {
+            return {
+              ...item,
+              renderItem: () => item.label,
+              type: item.key || item.type,
+              _type: "tree"
+            };
+          });
+        }
+      } else {
+        const params = {
+          type: "treeMenu",
+          treeItem: findTreeItem(treeData, "treeMenu", [x, y])
+        };
+        emits("right-click", params);
+      }
+    }
+  }
+  function clickMenu({
+    item,
+    target
+  }) {
+    var _a;
+    if (!target)
+      return;
+    const {
+      type,
+      _type
+    } = item;
+    const params = {
+      ...target.origin,
+      type: _type
+    };
+    if (NEW_OTHER_MENU.map((item2) => item2.type).includes(type)) {
+      if (type === "remove") {
+        const removeItemList = [...gridPoints].filter((p) => {
+          var _a2;
+          return ((_a2 = p.origin) == null ? void 0 : _a2.uuid) === params.uuid;
+        });
+        if (removeItemList.length) {
+          canvas.value.remove(...removeItemList);
+          removeItemList.forEach((o) => {
+            gridPoints.delete(o);
+          });
+        }
+      }
+      emits(type, omit(params, ["uuid"]));
+    } else {
+      (_a = extraMenuConfig.click) == null ? void 0 : _a.call(extraMenuConfig, type, omit(params, ["uuid"]));
+    }
+  }
+  useGrid(canvas, {
+    ...propItems,
+    ...{
+      gridYNumber: topGridYNumber,
+      originY: topGridOriginY,
+      yCellHeight: topGridYCellHeight,
+      endY: topGridEndY
+    }
+  });
+  drawXAxis();
+  drawTree();
+  drawTreeLineData();
+  drawScale();
+  setCanvasEvent();
+  return {
+    redrawLinePoints,
+    clickMenu
+  };
+}
+
+export { useTop };