zxr-ui
Version:
okr align map, many-to-many relationship
2 lines (1 loc) • 7.81 kB
JavaScript
import e,{useState as t,useEffect as n,useRef as r}from"react";function i(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}var a,l,o;i("@keyframes turnX {\n 0% {\n transform: rotate(0deg);\n }\n\n 0% {\n transform: rotate(180deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"),function(e){e[e.UP=-1]="UP",e[e.DOWN=1]="DOWN",e[e.ROOT=0]="ROOT"}(a||(a={})),function(e){e[e.HIDE=0]="HIDE",e[e.OPEN=1]="OPEN"}(l||(l={})),function(e){e[e.OFFSET_L=40]="OFFSET_L",e[e.OFFSET_R=40]="OFFSET_R",e[e.OFFSET_TOP=20]="OFFSET_TOP",e[e.NODE_OFFSET_Y=30]="NODE_OFFSET_Y",e[e.NODE_OFFSET_X=100]="NODE_OFFSET_X",e[e.CR=8]="CR",e[e.NODE_WIDTH=340]="NODE_WIDTH",e[e.NODE_HEIGHT=124]="NODE_HEIGHT"}(o||(o={}));const d=require("../../images/loading.png"),u={position:"absolute",height:"1px",backgroundColor:"#c7c7d7"},s={display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",boxSizing:"border-box",background:"#ffffff",border:"1px solid #7f7f8e",borderRadius:"50%",textAlign:"center",fontSize:"12px",cursor:"pointer"},h={display:"block",width:"100%",height:"100%",transformOrigin:"center",animation:"turnX 1s linear infinite"},c={display:"inline-block",height:"1px",background:"#7f7f8e"},p={fontSize:"12px",display:"inline-block",transform:"scale(0.8)",transformOrigin:"50%",letterSpacing:"-1px"},f=r=>{const{info:i,style:l={},hideOrOpen:o,renderChild:f,fieldNames:m,circleWidth:g,width:O,height:k}=r,{uuid:D,rank:E,hideUp:U,hideDown:N}=i,[y,w]=t(!1),[T,I]=t(!1);let S=i[m.upLength],x=i[m.downLength];return n((()=>{w(!1),I(!1)}),[JSON.stringify(i)]),e.createElement("div",{key:D,style:l},f(i),E>-1&&0!==x?e.createElement("div",null,e.createElement("div",{style:{left:O,top:k/2,width:g,...u}}),e.createElement("div",{onClick:()=>{w(!0),o(i,a.DOWN)},style:{width:2*g,height:2*g,left:O+g,top:k/2-g,...s}},N?y?e.createElement("img",{style:h,src:d}):e.createElement("span",{style:p},x):e.createElement("span",{style:{width:g,...c}}))):null,E<1&&0!==S?e.createElement("div",null,e.createElement("div",{style:{left:-g,top:k/2,width:g,...u}}),e.createElement("div",{onClick:()=>{I(!0),o(i,a.UP)},style:{width:2*g,height:2*g,left:-3*g,top:k/2-g,...s}},U?T?e.createElement("img",{style:h,src:d}):e.createElement("span",{style:p},S):e.createElement("span",{style:{width:g,...c}}))):null)},m=i=>{const{data:l=[],renderChild:d,offset:u={},nodeStyle:s={},fieldNames:h={},fetchMoreData:c}=i,{left:p=o.OFFSET_L,top:m=o.OFFSET_TOP,right:g=o.OFFSET_R}=u,{offsetY:O=o.NODE_OFFSET_Y,offsetX:k=o.NODE_OFFSET_X,width:D=o.NODE_WIDTH,height:E=o.NODE_HEIGHT,circleWidth:U=o.CR}=s,N=D+k,y=E+2*U,w={id:"id",up:"up",down:"down",upLength:"upLength",downLength:"downLength",...h},T=r(1),[I,S]=t([]),[x,F]=t([]),_=r(1),b=r(m),[v,R]=t(0),[W,C]=t(0),[P,X]=t({}),[Y,H]=t([]),J=e=>{const{source:t,target:n,direction:r,initEdges:i}=e;if(r===a.ROOT)return;let l,o,d,u,s,h,c,p;r===a.UP?(l=t.leftX,o=t.leftY,d=n.rightX,u=n.rightY):(l=t.rightX,o=t.rightY,d=n.leftX,u=n.leftY),s=(l+d)/2,h=o,c=s,p=u;let f={d:`M${l},${o}C${s},${h},${c},${p},${d},${u}`,source:t,target:n,direction:r,visible:n.visible};i.push(f)},L=e=>{let t=[],n={},r=JSON.parse(JSON.stringify(e)),i=[];T.current=1,$(r,null,a.ROOT,n,null,null),M(r,null,a.ROOT,t,n,i,null),S(JSON.parse(JSON.stringify(r))),H(t),F(i),X(n),R(_.current*N+p+g),C(b.current)},$=(e,t,n,r,i,l)=>{b.current=m;for(let o=0;o<e.length;o++){let d=e[o];d.uuid=T.current,T.current++,d.id=d[w.id],n===a.ROOT?(i=d.id,l=d.uuid,d.rank=0,Reflect.set(r,d.uuid,{x:1,y:1,minRank:0})):n===a.UP?d.rank=t?.rank-1:n===a.DOWN&&(d.rank=t?.rank+1),d.rootID=i,d.parentID=t?t.id:null,d.rootUUID=l,d.parentUUID=t?t.uuid:null,d.visible=d.visible||!0,d.hideUp=d.hideUp||!1,d.hideDown=d.hideDown||!1;let u=d[w.up]?.length||0,s=d[w.down]?.length||0;r[l][d.rank]=r[l][d.rank]??{status:!1,num:0,startNum:0,reNum:0},r[l][d.rank].num=++r[l][d.rank].num,r[l].y=Math.max(r[l].y,r[l][d.rank].num),_.current=Math.max(r[l].x,_.current),u&&d.rank<1&&!d.hideUp?(r[l][d.rank-1]=r[l][d.rank-1]??{status:!1,num:0,startNum:0,reNum:0},r[l][d.rank-1].status||(r[l].x=r[l].x+1,r[l].minRank=d.rank-1,r[l][d.rank-1].status=!0),$(d[w.up],d,a.UP,r,l,l)):n===a.UP&&(d.hideUp=!0),s&&d.rank>-1&&!d.hideDown?(r[l][d.rank+1]=r[l][d.rank+1]??{status:!1,num:0,startNum:0,reNum:0},r[l][d.rank+1].status||(r[l].x=r[l].x+1,r[l][d.rank+1].status=!0),$(d[w.down],d,a.DOWN,r,i,l)):n===a.DOWN&&(d.hideDown=!0)}},M=(e,t,n,r,i,l,o,d)=>{let u=e.length;for(let d=0;d<u;d++){let u=e[d];if(n===a.ROOT){o=u.uuid,b.current=i[o].y*y+b.current+O;for(let e in i[u.uuid])i[u.uuid].hasOwnProperty(e)&&!isNaN(Number(e))&&(i[u.uuid][e].startNum=0)}let h=u[w.up]?.length||0,c=u[w.down]?.length||0;u.rankIndex=i[o][u.rank].startNum||0,i[o][u.rank].startNum++,u.left=(u.rank-i[o].minRank)*N+p,u.top=(i[o].y-i[o][u.rank].num)/2*y+u.rankIndex*y+b.current-i[o].y*y-O,0===(s=u).rank?(s.leftX=s.left-3*U,s.leftY=s.top+E/2,s.rightX=s.left+D+3*U,s.rightY=s.top+E/2):s.rank>0?(s.leftX=s.left,s.leftY=s.top+E/2,s.rightX=s.left+D+3*U,s.rightY=s.top+E/2):s.rank<0&&(s.leftX=s.left-3*U,s.leftY=s.top+E/2,s.rightX=s.left+D,s.rightY=s.top+E/2),J({source:t,target:u,direction:n,initEdges:r}),l.push(u),h&&u.rank<1&&!u.hideUp&&M(u[w.up],u,a.UP,r,i,l,o),c&&u.rank>-1&&!u.hideDown&&M(u[w.down],u,a.DOWN,r,i,l,o)}var s},z=(e,t,n,r)=>{for(let i=0;i<e.length;i++){let l=e[i];l.uuid=T.current,T.current++,l.id=l[w.id],l.rootID=t.rootID,l.parentID=t.id,l.rootUUID=t.rootUUID,l.parentUUID=t.uuid,l.visible=!0,l.hideUp=!0,l.hideDown=!0,n===a.UP?l.rank=t.rank-1:n===a.DOWN&&(l.rank=t.rank+1),r[l.rootUUID][l.rank]=r[l.rootUUID][l.rank]??{status:!1,num:0,reNum:0},r[l.rootUUID][l.rank].num=++r[l.rootUUID][l.rank].num,r[l.rootUUID].y=Math.max(r[l.rootUUID].y,r[l.rootUUID][l.rank].num),r[l.rootUUID][l.rank].status||(r[l.rootUUID].x=r[l.rootUUID].x+1,r[l.rootUUID][l.rank].status=!0,n===a.UP&&(r[l.rootUUID].minRank=l.rank)),_.current=Math.max(r[l.rootUUID].x,_.current)}},G=(e,t,n,r,i,l,o)=>{let d;for(let u=0;u<e.length;u++){if(d=e[u],d.uuid===t.uuid){n===a.DOWN?t.hideDown?t[w.down]&&t[w.down]?.length?(d.hideDown=!1,L(o)):c(t,n).then((e=>{e.data!==[]&&(z(e.data,t,n,i),d[w.down]=e.data,d.hideDown=!1,A(o,r,i,l))})):(d.hideDown=!0,L(o)):t.hideUp?t[w.up]&&t[w.up]?.length?(d.hideUp=!1,L(o)):c(t,n).then((e=>{e.data!==[]&&(z(e.data,t,n,i),d[w.up]=e.data,d.hideUp=!1,A(o,r,i,l))})):(d.hideUp=!0,L(o));break}n===a.DOWN?d[w.down]&&G(d[w.down],t,n,r,i,l,o):d[w.up]&&G(d[w.up],t,n,r,i,l,o)}},q=(e,t)=>{let n=JSON.parse(JSON.stringify(I)),r=JSON.parse(JSON.stringify(P));G(n,e,t,[],r,[],n)},A=(e,t,n,r)=>{b.current=m,M(e,null,a.ROOT,t,n,r,null),S(JSON.parse(JSON.stringify(e))),H(t),F(r),X(n),R(_.current*N+p+g),C(b.current)};return n((()=>{L(l)}),[l]),e.createElement("div",null,e.createElement("div",{style:{position:"relative",minHeight:W,minWidth:v}},x.map((t=>t.visible?e.createElement(f,{hideOrOpen:q,info:t,key:t.uuid,style:{left:t.left,top:t.top,width:D,height:E,position:"absolute",boxSizing:"border-box"},renderChild:d,width:D,height:E,circleWidth:U,fieldNames:w}):null)),e.createElement("svg",{width:v,height:W},Y.map(((t,n)=>e.createElement("path",{key:n,fill:"none",stroke:"#C7C7D7",strokeWidth:"1",d:t.d}))))))};i(".rank {\n display: flex;\n align-items: center;\n}\n");const g=t=>{let{level:n=-1,style:r={},size:i=18}=t;return n=Number(n),n<0?"--":e.createElement("div",{style:r,className:"rank"},e.createElement("img",{width:i,height:18,src:require(`./images/${n}.png`),style:{marginRight:8}}),e.createElement("span",{style:{color:"#7F7F8E"}},n,"分"))};export{m as DagreMap,g as Rank};