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

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

@@ -1 +1,1027 @@
-import{fabric as t}from"../../../../../shared/utils/fabricjs/index.js";import{drawPoint as e,drawText as i,drawLine as o,defaultLineStyle as n}from"../useDraw.js";import{useBirthProcessCumputedPoint as r}from"../useCumputedPoint.js";import{bus as a}from"../useEvent.js";import{useShadow as l}from"../useShadow.js";import{useCommon as s}from"../useCommon.js";import"vue";import{getIndex as c}from"../../utils/index.js";import{filter as d,cloneDeep as u,omit as f,flatten as h,isNumber as g,pick as m}from"lodash-es";import{format as p}from"date-fns";import{OTHER_MENU as v}from"../../constants/index.js";import"@vueuse/shared";import"naive-ui";import"./useTop.js";import"@vueuse/core";import"../../../../../shared/utils/index.js";const x=d(v,(t=>"add"!==t.type));function y(d,v,y,k,C,w,X,b,E){const{computedX:A,getXValue:L}=r(v),{getEqualXTypes:j,handleAddPrevent:P,isGridLimit:S,getPointEventProps:z}=s(d,y,v),{createShadowLines:I}=l(),{canvasWidth:M,other:T,yCellHeight:H,xCellWidth:O,endX:$,originX:B,originY:W,endY:Y,markHeight:D,event:_,topGridYCellHeight:V,extracorporealCirculationHeight:G}=v,K=new Map,R=u(T);let q=[],F=null;function J(){var o;if(!(null==(o=null==R?void 0:R.horizontal)?void 0:o.length))return;const n="horizontal";K.set(n,[]);const{horizontal:r}=R;let a=W+H/2;r.forEach(((o,r)=>{const{title:l,type:s,pointAttr:c={},textStyle:d={},data:u,showIcon:f=!0}=o;let h=null;u.forEach(((o,u)=>{const{time:g,value:m}=o,p=A(g);if(!ot(p))return;const v=[],x=f&&e(s,{...c,left:p,top:a});x&&v.push(x);const y=f?p+x.width/2+2:p,k=i([y,a],{value:m,...d,originX:"left"});v.push(k);const C=new t.Group(v,{lockMovementY:!0,objectCaching:!1,hasControls:!1,hasBorders:!1,hoverCursor:"pointer",...z()});Object.assign(C,{originLeft:p,iconHalfWidth:x?x.width/2:0,origin:{type:"other",key:n,dataIndex:r,index:u,data:o,title:l},limitX:{x1:B,x2:$-C.width}}),h&&(C.limitX.x1=h.left,h.limitX.x2=C.left,C.prevPoint=h,h.nextPoint=C),h=C,tt(C),K.get(n).push(C)})),a+=H})),d.value.add(...K.get(n))}function N(){var t;if(!(null==(t=null==R?void 0:R.vertical)?void 0:t.length))return;const i="vertical";K.set(i,[]);const{vertical:o}=R;o.forEach(((t,o)=>{const{show:n=!0,marginTop:r=0,textStyle:a={},data:l,time:s}=t,c=A(s);if(!n||!ot(c))return;const{lineHeight:d=H}=a;let u=W+r+d/2;l.forEach(((t,n)=>{const r=e(String(t.value),{...a,lockMovementY:!0,left:c,originX:"left",top:u,origin:{type:"other",key:i,dataIndex:o,index:n,data:t},...z()});u+=d,tt(r),K.get(i).push(r)}));const f=K.get(i).filter((t=>t.origin.dataIndex===o)),h=Math.max(...f.map((t=>t.width))),g=c>$-h;f.forEach(((t,e,i)=>{t.siblingPoints=i.filter((e=>e.origin.index!==t.origin.index)),t.maxTextWidth=h,g&&t.set("originX","right")}))})),d.value.add(...K.get(i))}function Q(t,e="add"){const{dataIndex:i,data:o,index:n,key:r,dataKey:a,time:l}=t,s=R[r],d=["mark","extracorporealCirculation"].includes(r)?s.dataList[i]:s[i];switch(e){case"remove":d.data.splice(n,1);break;case"change":if("mark"===r){d.list.splice(n,1);const t=s.dataList.find((t=>t.time===l));t?t.list.push(o):(s.dataList.push({time:l,list:[o]}),s.dataList.sort(((t,e)=>Date.parse(t.time)-Date.parse(e.time))))}else"extracorporealCirculation"===r?d[a]=o:d.data[n]=o;break;default:{const t=Array.isArray(o)?o[0].time:o.time,e=c(t,d.data),i=Array.isArray(o)?o:[o];d.data.splice(e,0,...i);break}}U(t)}function U(t){var e;const{key:i}=t;switch(null==(e=d.value)||e.remove(...K.get(i)),K.delete(i),i){case"horizontal":J();break;case"vertical":N();break;case"mark":Z();break;case"extracorporealCirculation":rt()}}function Z(){if(!D)return;const{title:t,titleStyle:o,pointAttr:n,dataList:r}=R.mark||{};if(!(null==r?void 0:r.length))return;const a="mark";K.set(a,[]);const l=i([B-5,Y+D/2],{value:t,...o,originX:"right"});d.value.add(l);const s=Y+D+G,c=Y+G;let u=0;const f={};r.forEach(((t,i)=>{const{time:o,list:r=[]}=t,l=A(o);if(!ot(l))return;let h=c+1;r.forEach(((t,o)=>{var r;const{style:g}=t,m=e((null==g?void 0:g.type)||"circleAndText",{...(null==g?void 0:g.pointAttr)||n,...t.text?{text:t.text}:{},left:l,top:c+10,origin:{data:t,key:"mark",type:"other",dataIndex:i,index:o}}),p=m.height;u&&l-u<=O&&(null==(r=f[`x_${u}`])||r.forEach((([t,e])=>{h+p>=s&&(h=Y-1),t<e&&h>=t&&h<e&&(h=e),t>e&&h>e&&h<=t&&(h=e)})));const{topObj:v,startTop:x,oldStartTop:y}=function(t,e){const i={};let o;if(t>Y){const r=t+e;i.y2=t+e/2,r>=s?n(Y-1):(o=t,t=r)}else n(t);function n(n){o=n,i.y2=n-e/2;t=n-e}return{topObj:i,startTop:t,oldStartTop:o}}(h,p);h=x,f[`x_${l}`]||(f[`x_${l}`]=[]),f[`x_${l}`].push([y,h]),m.set("top",v.y2),K.get(a).push(m),tt(m),d.value.add(m)})),u=l})),function(t){const e=t=>{var e,i;return null==(i=null==(e=t.origin)?void 0:e.data)?void 0:i.isStart},i=t.find((t=>e(t))),o=t.find((t=>!e(t)&&t.left>i.left)),n=t.filter((t=>!e(t)));t.forEach((t=>{const r={x1:B,x2:$};e(t)?(r.x2=o.left,t.otherPoints=n):(r.x1=i.left,t.startPoint=i),t.limitX=r}))}(K.get(a))}function tt(t){if(_.hovered&&(t.on("mouseover",(()=>{et(t)})),t.on("mouseout",(()=>{k.show=!1}))),t.lockMovementX&&t.lockMovementY)return;const{key:e}=t.origin,i=["mark","horizontal"].includes(e),o=["mark","vertical"].includes(e),n=["mark","extracorporealCirculation"].includes(e),r="extracorporealCirculation"===e;t.on("moving",(()=>{t.moving=!0,i?function(t){const e=t.origin.key,i="horizontal"===e;t.setCoords(),t.left<t.limitX.x1&&t.set("left",t.limitX.x1+(i?1:0));t.left>t.limitX.x2&&t.set("left",t.limitX.x2+(i?-1:0));if("mark"===e){t.top<W&&t.set("top",W);const e=Y+G+D-t.height/2;t.top>e&&t.set("top",e)}i&&(t.originLeft=t.left+t.iconHalfWidth)}(t):r?function(t){t.setCoords();const{left:e,limitX:i}=t,o=p(new Date,"yyyy-MM-dd HH:mm"),n=A(o);i.isCurrentTime&&i.x2<n&&n>0&&n<M&&(i.x2=n);e<i.x1&&t.set({x1:i.x1,x2:i.x1});e>i.x2&&t.set({x1:i.x2,x2:i.x2});it(t,"left"),it(t,"right")}(t):(w(t),function(t){const e=t.left+t.maxTextWidth>$?"right":"left";t.setCoords().set({originX:e}),t.siblingPoints.forEach((i=>i.setCoords().set({originX:e,left:t.left})))}(t)),_.hovered&&et(t)})),t.on("mouseup",(r=>{var a;if(k.show=!1,1===r.button){if(!t.moving)return;t.moving=!1,i&&function(t){var e,i;if("mark"===t.origin.key){if((null==(i=null==(e=t.origin)?void 0:e.data)?void 0:i.isStart)&&t.otherPoints)t.otherPoints.forEach((e=>{e.limitX.x1=t.left}));else{const e=t.startPoint.otherPoints.map((t=>t.left)),i=Math.min(...e);t.startPoint.limitX.x2=i}return}t.prevPoint&&(t.prevPoint.limitX.x2=t.left);t.nextPoint&&(t.nextPoint.limitX.x1=t.left)}(t);const e=L(null!=(a=t.originLeft)?a:t.left),r={...t.origin,...o?{time:e}:{data:{...t.origin.data,time:e}}};d.value.discardActiveObject(),y("change",r),n&&Q(r,"change")}3===r.button&&["horizontal","vertical"].includes(e)&&(C.point={x:t.left,y:t.top},C.show=!0,C.target=t,C.list=x.map((t=>({...t,renderItem:()=>t.label,_type:"other"}))))}))}function et(t){k.isTarget=!0,k.show=!0;const{key:e,data:i={}}=t.origin||{};let o=i.value;const n="extracorporealCirculation"===e||"mark"===e;k.point={x:t.left,y:n?t.top:t.top+V/2};const r=!t.origin.isMenu&&t.originLeft?t.originLeft:t.left,a=L(r);k.list=[`时间 ${a.slice(-5)}`],n&&("mark"===e&&(o=i.name),k.list.unshift(o+" ")),k.sourceData=[{type:"other",key:e,time:a,value:o}]}function it(t,e){const{shadowObjs:i,params:o}=t[`${e}ShadowBox`]||{};if(!i||!o)return;i.forEach((t=>d.value.remove(t)));o["left"===e?1:0]=t.left;const n=nt(...o);t[`${e}ShadowBox`]={shadowObjs:n,params:o}}function ot(t){return t>=B&&t<=$}function nt(...e){const[i,o,r,a]=e,{mode:l,style:s}=a,c=f(s,["angle","space"]),u=[[i,Y],[o,Y],[o,r],[i,r]],h=new t.Polygon(u.map((t=>({x:t[0],y:t[1]}))),{...n,...c,stroke:"transparent",..."slash"===l?{fill:"transparent"}:{}}),g=[];return["slash"].includes(l)&&g.push(...I(u,s.angle,s.space,c)),d.value.add(h,...g),K.get("extracorporealCirculation").push(h,...g),[h,...g]}function rt(){if(!G)return;const{dataList:e,ascendAortaStyle:i,extracorporealCirculationStyle:o}=R.extracorporealCirculation||{};if(!(null==e?void 0:e.length))return;const n="extracorporealCirculation";K.set(n,[]);const r=Y+G;let a,l;function s(t){return t&&t>B&&t<M}function c(t){return void 0===t||""===t}e.forEach(((u,f)=>{const h=function(t){const{extracorporealCirculationStart:e,closeAscendAorta:i,openAscendAorta:o,extracorporealCirculationEnd:n}=t;let r,a,l,s;return e&&(r=A(e.time)),i&&(a=A(i.time)),o&&(l=A(o.time)),n&&(s=A(n.time)),[r,a,l,s]}(u);if(-1===h.findIndex((t=>t>0&&t<M)))return;let g;h.forEach(((m,v)=>{if(c(m))return;const x=h[v+1],y=h[v-1];if(s(m)||s(x)){const k=s(m)?m:B,C=s(x)?x:c(x)?null:$,w=s(y)?y:B,X={};if(v<h.length-1&&C&&(X.params=[k,C,r,[0,2].includes(v)?o:i],X.shadowObjs=nt(...X.params)),s(m)){const i=function(t){switch(t){case 0:return"extracorporealCirculationStart";case 1:return"closeAscendAorta";case 2:return"openAscendAorta";case 3:return"extracorporealCirculationEnd"}}(v),o=p(new Date,"yyyy-MM-dd HH:mm"),c=A(o),x=m<c&&s(c)?c:m,y=function(e,i){const o=new t.Line(e,{...i,stroke:"transparent",strokeWidth:5,hasControls:!1,hasBorders:!1,hoverCursor:"e-resize",lockMovementY:!0,originX:"center"});return tt(o),d.value.add(o),K.get("extracorporealCirculation").push(o),o}([m,Y,m,r],{origin:{dataIndex:f,dataKey:i,key:n,data:u[i],type:"other"},limitX:{x1:0===v?null!=a?a:B:w,x2:C||x,isCurrentTime:!C&&f===e.length-1},...[1,2,3].includes(v)?{leftShadowBox:g}:{},...[0,1,2].includes(v)?{rightShadowBox:X}:{}});v===h.length-1&&(a=m,l=y),0===v&&l&&(l.limitX.x2=k)}g=X}}))}))}function at(t){const{code:e}=t;F&&(e.includes("Enter")||e.includes("Esc"))&&(e.includes("Esc")&&(F.text=""),F.exitEditing(),d.value.discardActiveObject(F))}return function(){if(!(null==T?void 0:T.longLine)||!T.longLine.time)return;const{time:t,style:e}=T.longLine,i=A(t),n=o([i,0,i,Y],e);d.value.add(n)}(),function(){var t;if(!(null==(t=null==R?void 0:R.horizontal)?void 0:t.length))return;q=[];const{horizontal:i}=R,o=B-5;let n=W+H/2;i.forEach(((t,i)=>{const{title:r,titleStyle:a={},defaultAddValue:l,data:s=[]}=t,c=r&&e(r,{...a,originX:"right",left:o,top:n,origin:{defaultAddValue:l,dataIndex:i,type:"other",key:"horizontal",title:r,isMenu:!0},originLeft:o,originTop:n});var u;q.push({type:"other",title:r,key:"horizontal",dataIndex:i,dataList:s.map((t=>A(t.time))),y1:n-c.height/2,y2:n+c.height/2}),(u=c).on("moving",(()=>{u.set("originX","center"),S(u)?et(u):k.show=!1})),u.on("mouseup:before",(t=>{if(k.show=!1,0===t.e.button&&S(u))if(j(K.get("horizontal"),u.left,"key",O).includes(u.origin.key))P("repeat"),console.log("重复节点");else{const t={data:{time:L(u.left),value:u.origin.defaultAddValue},...u.origin};y("add",f(t,["isMenu"])),Q(t)}!function(t){t.setCoords().set({originX:"right",left:t.originLeft,top:t.originTop})}(u)})),d.value.add(c),n+=H}))}(),J(),N(),Z(),rt(),a.on((()=>{const t="horizontal",e=X(K.get(t));e.length>0?b((()=>{const i=function(t){const e=t.reduce(((t,e)=>{const{dataIndex:i}=e.origin;return t[i]=t[i]?t[i].concat(e.origin):[e.origin],t}),{});return h(Object.keys(e).map((t=>{const i=e[t];return R.horizontal[t].data.splice(i[0].index,i.length),i})))}(e);U({key:t}),y("remove",i)})):E()})),_.evented&&(window.addEventListener("keydown",at,!0),d.value.on("mouse:up",(e=>{var i,o,n,r;if(1===e.button){const{target:a,pointer:l={}}=e,{x:s=0,y:c=0}=l;if(!S({left:s,top:c}))return;if(!(null==q?void 0:q.length)||F)return;if(a&&"horizontal"!==(null==(i=a.origin)?void 0:i.key))return;let u="";if(a){if(a.moving)return;u=null==(r=null==(n=null==(o=a.origin)?void 0:o.data)?void 0:n.value)?void 0:r.toString()}const f=q.find((({y1:t,y2:e})=>c>=t&&c<=e));g(null==f?void 0:f.dataIndex)&&(F=new t.Textbox(u,{left:s,top:c,width:100,height:100,fontSize:18,objectCaching:!1,hasControls:!1,borderColor:"#000",editingBorderColor:"#000",backgroundColor:"#fff",fontFamily:"微软雅黑"}),F.otherListPointHeightRangeItem={...f,left:s,target:a},d.value.add(F),d.value.setActiveObject(F),F.enterEditing(),u&&F.setSelectionEnd(u.length))}})),d.value.on("selection:cleared",(({deselected:t})=>{var e;if(null==t?void 0:t.find((t=>t.otherListPointHeightRangeItem))){let{text:t}=F;const{otherListPointHeightRangeItem:i}=F;if(t=t.replace(/^\s+|\s+$/g,""),d.value.remove(F),F=null,!t)return;const{left:o,target:n}=i;if(n){if(t==(null==(e=n.origin)?void 0:e.data.value))return;const i={...n.origin,data:{...n.origin.data,value:t}};y("change",i),Q(i,"change")}else{const e={...m(i,["title","type","key","dataIndex"]),data:{time:L(o),value:t}};y("add",e),Q(e)}}}))),{clickMenu:function({item:t,target:e}){if(!e)return;const{type:i,_type:o}=t,n={...e.origin,type:o};y(i,n),"remove"===i&&Q(n,i)},handleKeydown:at}}export{y as useOther};
+import { fabric } from '../../../../../shared/utils/fabricjs/index.js';
+import { drawPoint, drawText, drawLine, defaultLineStyle } from '../useDraw.js';
+import { useBirthProcessCumputedPoint } from '../useCumputedPoint.js';
+import { bus } from '../useEvent.js';
+import { useShadow } from '../useShadow.js';
+import { useCommon } from '../useCommon.js';
+import 'vue';
+import { getIndex } from '../../utils/index.js';
+import { filter, cloneDeep, omit, flatten, isNumber, pick } from 'lodash-es';
+import { format } from 'date-fns';
+import { OTHER_MENU } from '../../constants/index.js';
+import '@vueuse/shared';
+import 'naive-ui';
+import './useTop.js';
+import '@vueuse/core';
+import '../../../../../shared/utils/index.js';
+
+const NEW_OTHER_MENU = filter(OTHER_MENU, (o) => o.type !== "add");
+function useOther(canvas, propItems, emits, pointTipProps, pointMenuProps, moveLimit, getContainPoints, showDialog, removeCurrentSelection) {
+  const {
+    computedX,
+    getXValue
+  } = useBirthProcessCumputedPoint(propItems);
+  const {
+    getEqualXTypes,
+    handleAddPrevent,
+    isGridLimit,
+    getPointEventProps
+  } = useCommon(canvas, emits, propItems);
+  const {
+    createShadowLines
+  } = useShadow();
+  const {
+    canvasWidth,
+    other,
+    yCellHeight,
+    xCellWidth,
+    endX,
+    originX,
+    originY,
+    endY,
+    markHeight,
+    event,
+    topGridYCellHeight,
+    extracorporealCirculationHeight
+  } = propItems;
+  const gridPointsMap = /* @__PURE__ */ new Map();
+  const otherValue = cloneDeep(other);
+  let otherListPointHeightRange = [];
+  let inputObj = null;
+  function drawHorizontal() {
+    var _a;
+    if (!((_a = otherValue == null ? void 0 : otherValue.horizontal) == null ? void 0 : _a.length))
+      return;
+    const key = "horizontal";
+    gridPointsMap.set(key, []);
+    const {
+      horizontal
+    } = otherValue;
+    let y = originY + yCellHeight / 2;
+    horizontal.forEach((horizontalItem, dataIndex) => {
+      const {
+        title,
+        type,
+        pointAttr = {},
+        textStyle = {},
+        data,
+        showIcon = true
+      } = horizontalItem;
+      let prevPoint = null;
+      data.forEach((item, index) => {
+        const {
+          time,
+          value
+        } = item;
+        const x = computedX(time);
+        if (!isLimitX(x))
+          return;
+        const groups = [];
+        const icon = showIcon && drawPoint(type, {
+          ...pointAttr,
+          left: x,
+          top: y
+        });
+        icon && groups.push(icon);
+        const textLeft = showIcon ? x + icon.width / 2 + 2 : x;
+        const text = drawText([textLeft, y], {
+          value,
+          ...textStyle,
+          originX: "left"
+        });
+        groups.push(text);
+        const group = new fabric.Group(groups, {
+          lockMovementY: true,
+          objectCaching: false,
+          hasControls: false,
+          hasBorders: false,
+          hoverCursor: "pointer",
+          ...getPointEventProps()
+        });
+        Object.assign(group, {
+          originLeft: x,
+          iconHalfWidth: icon ? icon.width / 2 : 0,
+          origin: {
+            type: "other",
+            key,
+            dataIndex,
+            index,
+            data: item,
+            title
+          },
+          limitX: {
+            x1: originX,
+            x2: endX - group.width
+          }
+        });
+        if (prevPoint) {
+          group.limitX.x1 = prevPoint.left;
+          prevPoint.limitX.x2 = group.left;
+          group.prevPoint = prevPoint;
+          prevPoint.nextPoint = group;
+        }
+        prevPoint = group;
+        setPointEvent(group);
+        gridPointsMap.get(key).push(group);
+      });
+      y += yCellHeight;
+    });
+    canvas.value.add(...gridPointsMap.get(key));
+  }
+  function drawTitle() {
+    var _a;
+    if (!((_a = otherValue == null ? void 0 : otherValue.horizontal) == null ? void 0 : _a.length))
+      return;
+    otherListPointHeightRange = [];
+    const {
+      horizontal
+    } = otherValue;
+    const titleLeft = originX - 5;
+    let y = originY + yCellHeight / 2;
+    horizontal.forEach((horizontalItem, dataIndex) => {
+      const {
+        title: _title,
+        titleStyle = {},
+        defaultAddValue,
+        data = []
+      } = horizontalItem;
+      const title = _title && drawPoint(_title, {
+        ...titleStyle,
+        originX: "right",
+        left: titleLeft,
+        top: y,
+        origin: {
+          defaultAddValue,
+          dataIndex,
+          type: "other",
+          key: "horizontal",
+          title: _title,
+          isMenu: true
+        },
+        originLeft: titleLeft,
+        originTop: y
+      });
+      otherListPointHeightRange.push({
+        type: "other",
+        title: _title,
+        key: "horizontal",
+        dataIndex,
+        dataList: data.map((v) => computedX(v.time)),
+        y1: y - title.height / 2,
+        y2: y + title.height / 2
+      });
+      setTitleEvent(title);
+      canvas.value.add(title);
+      y += yCellHeight;
+    });
+  }
+  function setTitleEvent(point) {
+    point.on("moving", () => {
+      point.set("originX", "center");
+      if (isGridLimit(point)) {
+        setPopup(point);
+      } else {
+        pointTipProps.show = false;
+      }
+    });
+    point.on("mouseup:before", (event2) => {
+      pointTipProps.show = false;
+      if (event2.e.button === 0) {
+        if (isGridLimit(point)) {
+          const isRepeat = getEqualXTypes(gridPointsMap.get("horizontal"), point.left, "key", xCellWidth).includes(point.origin.key);
+          if (isRepeat) {
+            handleAddPrevent("repeat");
+            console.log("\u91CD\u590D\u8282\u70B9");
+          } else {
+            const params = {
+              data: {
+                time: getXValue(point.left),
+                value: point.origin.defaultAddValue
+              },
+              ...point.origin
+            };
+            emits("add", omit(params, ["isMenu"]));
+            updateData(params);
+          }
+        }
+      }
+      setRestore(point);
+    });
+  }
+  function setRestore(point) {
+    point.setCoords().set({
+      originX: "right",
+      left: point.originLeft,
+      top: point.originTop
+    });
+  }
+  function drawVertical() {
+    var _a;
+    if (!((_a = otherValue == null ? void 0 : otherValue.vertical) == null ? void 0 : _a.length))
+      return;
+    const key = "vertical";
+    gridPointsMap.set(key, []);
+    const {
+      vertical
+    } = otherValue;
+    vertical.forEach((verticalItem, dataIndex) => {
+      const {
+        show = true,
+        marginTop = 0,
+        textStyle = {},
+        data,
+        time
+      } = verticalItem;
+      const x = computedX(time);
+      if (!show || !isLimitX(x))
+        return;
+      const {
+        lineHeight = yCellHeight
+      } = textStyle;
+      let y = originY + marginTop + lineHeight / 2;
+      data.forEach((item, index) => {
+        const text = drawPoint(String(item.value), {
+          ...textStyle,
+          lockMovementY: true,
+          left: x,
+          originX: "left",
+          top: y,
+          origin: {
+            type: "other",
+            key,
+            dataIndex,
+            index,
+            data: item
+          },
+          ...getPointEventProps()
+        });
+        y += lineHeight;
+        setPointEvent(text);
+        gridPointsMap.get(key).push(text);
+      });
+      const textItemPoints = gridPointsMap.get(key).filter((point) => point.origin.dataIndex === dataIndex);
+      const maxTextWidth = Math.max(...textItemPoints.map((point) => point.width));
+      const isOverstep = x > endX - maxTextWidth;
+      textItemPoints.forEach((point, _, arr) => {
+        point.siblingPoints = arr.filter((_point) => _point.origin.index !== point.origin.index);
+        point.maxTextWidth = maxTextWidth;
+        if (isOverstep)
+          point.set("originX", "right");
+      });
+    });
+    canvas.value.add(...gridPointsMap.get(key));
+  }
+  function clickMenu({
+    item,
+    target
+  }) {
+    if (!target)
+      return;
+    const {
+      type,
+      _type
+    } = item;
+    const params = {
+      ...target.origin,
+      type: _type
+    };
+    emits(type, params);
+    if (type === "remove") {
+      updateData(params, type);
+    }
+  }
+  function updateData(params, mode = "add") {
+    const {
+      dataIndex,
+      data,
+      index,
+      key,
+      dataKey,
+      time
+    } = params;
+    const obj = otherValue[key];
+    const item = !["mark", "extracorporealCirculation"].includes(key) ? obj[dataIndex] : obj.dataList[dataIndex];
+    switch (mode) {
+      case "remove":
+        item.data.splice(index, 1);
+        break;
+      case "change":
+        if (key === "mark") {
+          item.list.splice(index, 1);
+          const newItem = obj.dataList.find((_item) => _item.time === time);
+          if (newItem) {
+            newItem.list.push(data);
+          } else {
+            obj.dataList.push({
+              time,
+              list: [data]
+            });
+            obj.dataList.sort((a, b) => {
+              return Date.parse(a.time) - Date.parse(b.time);
+            });
+          }
+        } else if (key === "extracorporealCirculation") {
+          item[dataKey] = data;
+        } else {
+          item.data[index] = data;
+        }
+        break;
+      default: {
+        const time2 = Array.isArray(data) ? data[0].time : data.time;
+        const index2 = getIndex(time2, item.data);
+        const newData = Array.isArray(data) ? data : [data];
+        item.data.splice(index2, 0, ...newData);
+        break;
+      }
+    }
+    redrawPoints(params);
+  }
+  function redrawPoints(params) {
+    var _a;
+    const {
+      key
+    } = params;
+    (_a = canvas.value) == null ? void 0 : _a.remove(...gridPointsMap.get(key));
+    gridPointsMap.delete(key);
+    switch (key) {
+      case "horizontal":
+        drawHorizontal();
+        break;
+      case "vertical":
+        drawVertical();
+        break;
+      case "mark":
+        drawMark();
+        break;
+      case "extracorporealCirculation":
+        drawExtracorporealCirculation();
+    }
+  }
+  function drawMark() {
+    if (!markHeight)
+      return;
+    const {
+      title,
+      titleStyle,
+      pointAttr,
+      dataList
+    } = otherValue.mark || {};
+    if (!(dataList == null ? void 0 : dataList.length))
+      return;
+    const key = "mark";
+    gridPointsMap.set(key, []);
+    const titleObj = drawText([originX - 5, endY + markHeight / 2], {
+      value: title,
+      ...titleStyle,
+      originX: "right"
+    });
+    canvas.value.add(titleObj);
+    const limitY = endY + markHeight + extracorporealCirculationHeight;
+    const _endY = endY + extracorporealCirculationHeight;
+    let prevLeft = 0;
+    const pointerObj = {};
+    dataList.forEach((markItem, dataIndex) => {
+      const {
+        time,
+        list = []
+      } = markItem;
+      const x = computedX(time);
+      if (!isLimitX(x))
+        return;
+      let startTop = _endY + 1;
+      list.forEach((item, index) => {
+        var _a;
+        const {
+          style
+        } = item;
+        const point = drawPoint((style == null ? void 0 : style.type) || "circleAndText", {
+          ...(style == null ? void 0 : style.pointAttr) || pointAttr,
+          ...item.text ? {
+            text: item.text
+          } : {},
+          left: x,
+          top: _endY + 10,
+          origin: {
+            data: item,
+            key: "mark",
+            type: "other",
+            dataIndex,
+            index
+          }
+        });
+        const pointHeight = point.height;
+        if (prevLeft && x - prevLeft <= xCellWidth) {
+          (_a = pointerObj[`x_${prevLeft}`]) == null ? void 0 : _a.forEach(([y1, y2]) => {
+            if (startTop + pointHeight >= limitY) {
+              startTop = endY - 1;
+            }
+            if (y1 < y2 && startTop >= y1 && startTop < y2) {
+              startTop = y2;
+            }
+            if (y1 > y2 && startTop > y2 && startTop <= y1) {
+              startTop = y2;
+            }
+          });
+        }
+        const {
+          topObj,
+          startTop: _startTop,
+          oldStartTop
+        } = computedTop(startTop, pointHeight);
+        startTop = _startTop;
+        if (!pointerObj[`x_${x}`])
+          pointerObj[`x_${x}`] = [];
+        pointerObj[`x_${x}`].push([oldStartTop, startTop]);
+        point.set("top", topObj.y2);
+        gridPointsMap.get(key).push(point);
+        setPointEvent(point);
+        canvas.value.add(point);
+      });
+      prevLeft = x;
+    });
+    function computedTop(startTop, lineHeight) {
+      const topObj = {};
+      let oldStartTop;
+      if (startTop > endY) {
+        const _top = startTop + lineHeight;
+        topObj.y2 = startTop + lineHeight / 2;
+        if (_top >= limitY) {
+          setTopY(endY - 1);
+        } else {
+          oldStartTop = startTop;
+          startTop = _top;
+        }
+      } else {
+        setTopY(startTop);
+      }
+      function setTopY(base) {
+        oldStartTop = base;
+        topObj.y2 = base - lineHeight / 2;
+        const _y = base - lineHeight;
+        startTop = _y;
+      }
+      return {
+        topObj,
+        startTop,
+        oldStartTop
+      };
+    }
+    addProps(gridPointsMap.get(key));
+  }
+  function addProps(__arr) {
+    const isStart = (point) => {
+      var _a, _b;
+      return (_b = (_a = point.origin) == null ? void 0 : _a.data) == null ? void 0 : _b.isStart;
+    };
+    const startPoint = __arr.find((point) => isStart(point));
+    const firstPoint = __arr.find((point) => !isStart(point) && point.left > startPoint.left);
+    const otherPoints = __arr.filter((point) => !isStart(point));
+    __arr.forEach((point) => {
+      const limitX = {
+        x1: originX,
+        x2: endX
+      };
+      if (isStart(point)) {
+        limitX.x2 = firstPoint.left;
+        point.otherPoints = otherPoints;
+      } else {
+        limitX.x1 = startPoint.left;
+        point.startPoint = startPoint;
+      }
+      point.limitX = limitX;
+    });
+  }
+  function setPointEvent(point) {
+    if (event.hovered) {
+      point.on("mouseover", () => {
+        setPopup(point);
+      });
+      point.on("mouseout", () => {
+        pointTipProps.show = false;
+      });
+    }
+    if (point.lockMovementX && point.lockMovementY)
+      return;
+    const {
+      key
+    } = point.origin;
+    const isMarkOrHorizontal = ["mark", "horizontal"].includes(key);
+    const isMarkOrVertical = ["mark", "vertical"].includes(key);
+    const isisExtracorporealCirculationOrMark = ["mark", "extracorporealCirculation"].includes(key);
+    const isExtracorporealCirculation = key === "extracorporealCirculation";
+    point.on("moving", () => {
+      point.moving = true;
+      if (isMarkOrHorizontal) {
+        markMoveLimit(point);
+      } else if (isExtracorporealCirculation) {
+        extracorporealCirculationMoveLimit(point);
+      } else {
+        moveLimit(point);
+        updateSiblingPoints(point);
+      }
+      event.hovered && setPopup(point);
+    });
+    point.on("mouseup", (event2) => {
+      var _a;
+      pointTipProps.show = false;
+      if (event2.button === 1) {
+        if (!point.moving)
+          return;
+        point.moving = false;
+        if (isMarkOrHorizontal)
+          updateLimitX(point);
+        const time = getXValue((_a = point.originLeft) != null ? _a : point.left);
+        const params = {
+          ...point.origin,
+          ...isMarkOrVertical ? {
+            time
+          } : {
+            data: {
+              ...point.origin.data,
+              time
+            }
+          }
+        };
+        canvas.value.discardActiveObject();
+        emits("change", params);
+        if (isisExtracorporealCirculationOrMark)
+          updateData(params, "change");
+      }
+      if (event2.button === 3 && ["horizontal", "vertical"].includes(key)) {
+        pointMenuProps.point = {
+          x: point.left,
+          y: point.top
+        };
+        pointMenuProps.show = true;
+        pointMenuProps.target = point;
+        pointMenuProps.list = NEW_OTHER_MENU.map((item) => {
+          return {
+            ...item,
+            renderItem: () => item.label,
+            _type: "other"
+          };
+        });
+      }
+    });
+  }
+  function setPopup(point) {
+    pointTipProps.isTarget = true;
+    pointTipProps.show = true;
+    const {
+      key,
+      data = {}
+    } = point.origin || {};
+    let value = data.value;
+    const isExtracorporealCirculation = key === "extracorporealCirculation";
+    const isExtracorporealCirculationOrMark = isExtracorporealCirculation || key === "mark";
+    pointTipProps.point = {
+      x: point.left,
+      y: isExtracorporealCirculationOrMark ? point.top : point.top + topGridYCellHeight / 2
+    };
+    const x = !point.origin.isMenu && point.originLeft ? point.originLeft : point.left;
+    const time = getXValue(x);
+    pointTipProps.list = [`\u65F6\u95F4 ${time.slice(-5)}`];
+    if (isExtracorporealCirculationOrMark) {
+      if (key === "mark") {
+        value = data.name;
+      }
+      pointTipProps.list.unshift(value + " ");
+    }
+    pointTipProps.sourceData = [{
+      type: "other",
+      key,
+      time,
+      value
+    }];
+  }
+  function updateShadowBox(optLine, direction) {
+    const {
+      shadowObjs,
+      params
+    } = optLine[`${direction}ShadowBox`] || {};
+    if (!shadowObjs || !params)
+      return;
+    shadowObjs.forEach((obj) => canvas.value.remove(obj));
+    const idx = direction === "left" ? 1 : 0;
+    params[idx] = optLine.left;
+    const _shadowObjs = drawShadowBox(...params);
+    optLine[`${direction}ShadowBox`] = {
+      shadowObjs: _shadowObjs,
+      params
+    };
+  }
+  function extracorporealCirculationMoveLimit(point) {
+    point.setCoords();
+    const {
+      left,
+      limitX
+    } = point;
+    const currentTime = format(new Date(), "yyyy-MM-dd HH:mm");
+    const currentTimeX = computedX(currentTime);
+    if (limitX.isCurrentTime && limitX.x2 < currentTimeX && currentTimeX > 0 && currentTimeX < canvasWidth) {
+      limitX.x2 = currentTimeX;
+    }
+    if (left < limitX.x1) {
+      point.set({
+        x1: limitX.x1,
+        x2: limitX.x1
+      });
+    }
+    if (left > limitX.x2) {
+      point.set({
+        x1: limitX.x2,
+        x2: limitX.x2
+      });
+    }
+    updateShadowBox(point, "left");
+    updateShadowBox(point, "right");
+  }
+  function markMoveLimit(point) {
+    const key = point.origin.key;
+    const isHorizontal = key === "horizontal";
+    point.setCoords();
+    if (point.left < point.limitX.x1) {
+      point.set("left", point.limitX.x1 + (isHorizontal ? 1 : 0));
+    }
+    if (point.left > point.limitX.x2) {
+      point.set("left", point.limitX.x2 + (isHorizontal ? -1 : 0));
+    }
+    if (key === "mark") {
+      if (point.top < originY) {
+        point.set("top", originY);
+      }
+      const limitY = endY + extracorporealCirculationHeight + markHeight - point.height / 2;
+      if (point.top > limitY) {
+        point.set("top", limitY);
+      }
+    }
+    if (isHorizontal)
+      point.originLeft = point.left + point.iconHalfWidth;
+  }
+  function updateSiblingPoints(point) {
+    const isOverstep = point.left + point.maxTextWidth > endX;
+    const originX2 = isOverstep ? "right" : "left";
+    point.setCoords().set({
+      originX: originX2
+    });
+    point.siblingPoints.forEach((_point) => _point.setCoords().set({
+      originX: originX2,
+      left: point.left
+    }));
+  }
+  function updateLimitX(point) {
+    var _a, _b;
+    if (point.origin.key === "mark") {
+      const isStart = (_b = (_a = point.origin) == null ? void 0 : _a.data) == null ? void 0 : _b.isStart;
+      if (isStart && point.otherPoints) {
+        point.otherPoints.forEach((_point) => {
+          _point.limitX.x1 = point.left;
+        });
+      } else {
+        const otherPointsLeft = point.startPoint.otherPoints.map((_point) => _point.left);
+        const minLeft = Math.min(...otherPointsLeft);
+        point.startPoint.limitX.x2 = minLeft;
+      }
+      return;
+    }
+    if (point.prevPoint)
+      point.prevPoint.limitX.x2 = point.left;
+    if (point.nextPoint)
+      point.nextPoint.limitX.x1 = point.left;
+  }
+  function isLimitX(x) {
+    return x >= originX && x <= endX;
+  }
+  function handleEvent() {
+    bus.on(() => {
+      const key = "horizontal";
+      const containPoints = getContainPoints(gridPointsMap.get(key));
+      if (containPoints.length > 0) {
+        showDialog(() => {
+          const params = doDeletePoints(containPoints);
+          redrawPoints({
+            key
+          });
+          emits("remove", params);
+        });
+      } else {
+        removeCurrentSelection();
+      }
+    });
+  }
+  function doDeletePoints(points) {
+    const result = points.reduce((res, currentPoint) => {
+      const {
+        dataIndex
+      } = currentPoint.origin;
+      res[dataIndex] = res[dataIndex] ? res[dataIndex].concat(currentPoint.origin) : [currentPoint.origin];
+      return res;
+    }, {});
+    return flatten(Object.keys(result).map((dataIndex) => {
+      const datas = result[dataIndex];
+      otherValue["horizontal"][dataIndex].data.splice(datas[0].index, datas.length);
+      return datas;
+    }));
+  }
+  function drawLongLine() {
+    if (!(other == null ? void 0 : other.longLine) || !other.longLine.time)
+      return;
+    const {
+      time,
+      style
+    } = other.longLine;
+    const x = computedX(time);
+    const line = drawLine([x, 0, x, endY], style);
+    canvas.value.add(line);
+  }
+  function getExtracorporealCirculationX(item) {
+    const {
+      extracorporealCirculationStart,
+      closeAscendAorta,
+      openAscendAorta,
+      extracorporealCirculationEnd
+    } = item;
+    let x1, x2, x3, x4;
+    if (extracorporealCirculationStart) {
+      x1 = computedX(extracorporealCirculationStart.time);
+    }
+    if (closeAscendAorta) {
+      x2 = computedX(closeAscendAorta.time);
+    }
+    if (openAscendAorta) {
+      x3 = computedX(openAscendAorta.time);
+    }
+    if (extracorporealCirculationEnd) {
+      x4 = computedX(extracorporealCirculationEnd.time);
+    }
+    return [x1, x2, x3, x4];
+  }
+  function drawShadowBox(...arg) {
+    const [x1, x2, y2, __style] = arg;
+    const {
+      mode,
+      style
+    } = __style;
+    const _style = omit(style, ["angle", "space"]);
+    const points = [[x1, endY], [x2, endY], [x2, y2], [x1, y2]];
+    const polygon = new fabric.Polygon(points.map((v) => ({
+      x: v[0],
+      y: v[1]
+    })), {
+      ...defaultLineStyle,
+      ..._style,
+      stroke: "transparent",
+      ...mode === "slash" ? {
+        fill: "transparent"
+      } : {}
+    });
+    const shadowLines = [];
+    if (["slash"].includes(mode)) {
+      shadowLines.push(...createShadowLines(points, style.angle, style.space, _style));
+    }
+    canvas.value.add(polygon, ...shadowLines);
+    gridPointsMap.get("extracorporealCirculation").push(...[polygon, ...shadowLines]);
+    return [polygon, ...shadowLines];
+  }
+  function drawOptLine(coordinate, props) {
+    const optLine = new fabric.Line(coordinate, {
+      ...props,
+      stroke: "transparent",
+      strokeWidth: 5,
+      hasControls: false,
+      hasBorders: false,
+      hoverCursor: "e-resize",
+      lockMovementY: true,
+      originX: "center"
+    });
+    setPointEvent(optLine);
+    canvas.value.add(optLine);
+    gridPointsMap.get("extracorporealCirculation").push(optLine);
+    return optLine;
+  }
+  function drawExtracorporealCirculation() {
+    if (!extracorporealCirculationHeight)
+      return;
+    const {
+      dataList,
+      ascendAortaStyle,
+      extracorporealCirculationStyle
+    } = otherValue.extracorporealCirculation || {};
+    if (!(dataList == null ? void 0 : dataList.length))
+      return;
+    const key = "extracorporealCirculation";
+    gridPointsMap.set(key, []);
+    const y2 = endY + extracorporealCirculationHeight;
+    let prevEndX;
+    let prevLine;
+    dataList.forEach((item, index) => {
+      const xList = getExtracorporealCirculationX(item);
+      const idx = xList.findIndex((x) => x > 0 && x < canvasWidth);
+      if (idx === -1)
+        return;
+      let prevShadowBox;
+      xList.forEach((x, i) => {
+        if (isInvalid(x))
+          return;
+        const nextX = xList[i + 1];
+        const prevX = xList[i - 1];
+        if (isValid(x) || isValid(nextX)) {
+          const x1 = isValid(x) ? x : originX;
+          const x2 = isValid(nextX) ? nextX : isInvalid(nextX) ? null : endX;
+          const prevX1 = isValid(prevX) ? prevX : originX;
+          const shadowBox = {};
+          if (i < xList.length - 1 && x2) {
+            shadowBox.params = [x1, x2, y2, [0, 2].includes(i) ? extracorporealCirculationStyle : ascendAortaStyle];
+            shadowBox.shadowObjs = drawShadowBox(...shadowBox.params);
+          }
+          if (isValid(x)) {
+            const dataKey = getKey(i);
+            const currentTime = format(new Date(), "yyyy-MM-dd HH:mm");
+            const currentTimeX = computedX(currentTime);
+            const limitX2 = x < currentTimeX && isValid(currentTimeX) ? currentTimeX : x;
+            const optLine = drawOptLine([x, endY, x, y2], {
+              origin: {
+                dataIndex: index,
+                dataKey,
+                key,
+                data: item[dataKey],
+                type: "other"
+              },
+              limitX: {
+                x1: i === 0 ? prevEndX != null ? prevEndX : originX : prevX1,
+                x2: x2 || limitX2,
+                isCurrentTime: !x2 && index === dataList.length - 1
+              },
+              ...[1, 2, 3].includes(i) ? {
+                leftShadowBox: prevShadowBox
+              } : {},
+              ...[0, 1, 2].includes(i) ? {
+                rightShadowBox: shadowBox
+              } : {}
+            });
+            if (i === xList.length - 1) {
+              prevEndX = x;
+              prevLine = optLine;
+            }
+            if (i === 0 && prevLine) {
+              prevLine.limitX.x2 = x1;
+            }
+          }
+          prevShadowBox = shadowBox;
+        }
+      });
+    });
+    function isValid(x) {
+      return x && x > originX && x < canvasWidth;
+    }
+    function isInvalid(x) {
+      return typeof x === "undefined" || x === "";
+    }
+    function getKey(i) {
+      switch (i) {
+        case 0:
+          return "extracorporealCirculationStart";
+        case 1:
+          return "closeAscendAorta";
+        case 2:
+          return "openAscendAorta";
+        case 3:
+          return "extracorporealCirculationEnd";
+      }
+    }
+  }
+  function handleKeydown(evt) {
+    const {
+      code
+    } = evt;
+    if (!inputObj || !code.includes("Enter") && !code.includes("Esc"))
+      return;
+    if (code.includes("Esc")) {
+      inputObj.text = "";
+    }
+    inputObj.exitEditing();
+    canvas.value.discardActiveObject(inputObj);
+  }
+  function setCanvasEvent() {
+    if (!event.evented)
+      return;
+    window.addEventListener("keydown", handleKeydown, true);
+    canvas.value.on("mouse:up", (event2) => {
+      var _a, _b, _c, _d;
+      if (event2.button === 1) {
+        const {
+          target,
+          pointer = {}
+        } = event2;
+        const {
+          x = 0,
+          y = 0
+        } = pointer;
+        if (!isGridLimit({
+          left: x,
+          top: y
+        }))
+          return;
+        if (!(otherListPointHeightRange == null ? void 0 : otherListPointHeightRange.length) || inputObj)
+          return;
+        if (target && ((_a = target.origin) == null ? void 0 : _a.key) !== "horizontal")
+          return;
+        let content = "";
+        if (target) {
+          if (target.moving)
+            return;
+          content = (_d = (_c = (_b = target.origin) == null ? void 0 : _b.data) == null ? void 0 : _c.value) == null ? void 0 : _d.toString();
+        }
+        const item = otherListPointHeightRange.find(({
+          y1,
+          y2
+        }) => y >= y1 && y <= y2);
+        if (isNumber(item == null ? void 0 : item.dataIndex)) {
+          inputObj = new fabric.Textbox(content, {
+            left: x,
+            top: y,
+            width: 100,
+            height: 100,
+            fontSize: 18,
+            objectCaching: false,
+            hasControls: false,
+            borderColor: "#000",
+            editingBorderColor: "#000",
+            backgroundColor: "#fff",
+            fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1"
+          });
+          inputObj.otherListPointHeightRangeItem = {
+            ...item,
+            left: x,
+            target
+          };
+          canvas.value.add(inputObj);
+          canvas.value.setActiveObject(inputObj);
+          inputObj.enterEditing();
+          if (content) {
+            inputObj.setSelectionEnd(content.length);
+          }
+        }
+      }
+    });
+    canvas.value.on("selection:cleared", ({
+      deselected
+    }) => {
+      var _a;
+      if (deselected == null ? void 0 : deselected.find((obj) => obj.otherListPointHeightRangeItem)) {
+        let {
+          text
+        } = inputObj;
+        const {
+          otherListPointHeightRangeItem
+        } = inputObj;
+        text = text.replace(/^\s+|\s+$/g, "");
+        canvas.value.remove(inputObj);
+        inputObj = null;
+        if (!text)
+          return;
+        const {
+          left,
+          target
+        } = otherListPointHeightRangeItem;
+        if (target) {
+          if (text == ((_a = target.origin) == null ? void 0 : _a.data.value))
+            return;
+          const params = {
+            ...target.origin,
+            data: {
+              ...target.origin.data,
+              value: text
+            }
+          };
+          emits("change", params);
+          updateData(params, "change");
+        } else {
+          const params = {
+            ...pick(otherListPointHeightRangeItem, ["title", "type", "key", "dataIndex"]),
+            data: {
+              time: getXValue(left),
+              value: text
+            }
+          };
+          emits("add", params);
+          updateData(params);
+        }
+      }
+    });
+  }
+  drawLongLine();
+  drawTitle();
+  drawHorizontal();
+  drawVertical();
+  drawMark();
+  drawExtracorporealCirculation();
+  handleEvent();
+  setCanvasEvent();
+  return {
+    clickMenu,
+    handleKeydown
+  };
+}
+
+export { useOther };