ludash/dist/js/flow.978f3057.js

"use strict";(self["webpackChunkludash"]=self["webpackChunkludash"]||[]).push([[239],{8859:function(e,t,n){n.r(t),n.d(t,{default:function(){return X}});n(7658);var o=n(3396),i=n(4870);function s(e,t=5){return Math.round(e/t)*t}function r(e,t){const n=t.querySelector("svg");if(n.isSameNode(e.target)||n.contains(e.target))return{x:e.offsetX,y:e.offsetY};const o=t.getBoundingClientRect(),i=e.target.getBoundingClientRect();return{x:i.left-o.left+e.offsetX,y:i.top-o.top+e.offsetY}}function a(e,t){const n=e.findIndex(t);return{index:n,result:e[n]}}function c(e,t,n){switch(e){case"left":return{cx:t.x,cy:t.y+n.height/2};case"top":return{cx:t.x+n.width/2,cy:t.y};case"right":return{cx:t.x+n.width,cy:t.y+n.height/2};case"bottom":return{cx:t.x+n.width/2,cy:t.y+n.height}}}function l(e,t){return JSON.stringify(e)===JSON.stringify(t)}function u(e,t){const n=(0,i.iH)(e.pos),s=(0,i.iH)(e.size),r=(0,o.Fl)((()=>e.id===e.curNodeId)),a=(0,o.Fl)((()=>({x:e.pos.x,y:e.pos.y,width:e.size.width,height:e.size.height}))),l=(0,o.Fl)((()=>{const t=8;return{x:e.pos.x-t,y:e.pos.y-t,width:e.size.width+2*t,height:e.size.height+2*t}})),u=(0,o.Fl)((()=>{const t=e.size.width/2;return{cx:e.pos.x+t,cy:e.pos.y+t,r:t}})),d=(0,o.Fl)((()=>{const t=8,n=e.size.width/2;return{cx:e.pos.x+n,cy:e.pos.y+n,r:n+t}})),p=(0,o.Fl)((()=>{const{x:t,y:n}=e.pos,{width:o,height:i}=e.size;return{points:[[t,n+i/2].join(","),[t+o/2,n].join(","),[t+o,n+i/2].join(","),[t+o/2,n+i].join(",")].join(" ")}})),h=(0,o.Fl)((()=>{const t=8,{x:n,y:o}=e.pos,{width:i,height:s}=e.size;return{points:[[n-t,o+s/2].join(","),[n+i/2,o-t].join(","),[n+i+t,o+s/2].join(","),[n+i/2,o+s+t].join(",")].join(" ")}})),v=(0,o.Fl)((()=>[{pos:"top",...c("top",e.pos,e.size)},{pos:"right",...c("right",e.pos,e.size)},{pos:"bottom",...c("bottom",e.pos,e.size)},{pos:"left",...c("left",e.pos,e.size)}]));function g(n){t("startDrag",{id:e.id,event:n,innerPos:{x:n.offsetX-e.pos.x,y:n.offsetY-e.pos.y}})}function w(n,o){n.stopPropagation(),t("startLine",{id:e.id,point:o})}function f(n){e.startPoint?.targetId!==e.id&&t("endLine",{point:n,id:e.id})}function y(){t("cancelEndLine")}return{nodePos:n,nodeSize:s,isFocus:r,rectAttr:a,outlineRectAttr:l,circleAttr:u,outlineCircleAttr:d,pointsAttr:v,rhombicAttr:p,outlineRhombicAttr:h,handleMousedown:g,startLine:w,pointMouseEnter:f,pointMouseLeave:y}}const d=["id"],p=["onMouseenter","onMouseleave","onMousedown"];var h={__name:"svgRect",props:["pos","size","startPoint","id","curNodeId","isDragging"],emits:["startDrag","startLine","endLine","cancelEndLine"],setup(e,{emit:t}){const n=e,{nodePos:s,nodeSize:r,innerPos:a,isFocus:c,rectAttr:l,outlineRectAttr:h,pointsAttr:v,handleMousedown:g,startLine:w,pointMouseEnter:f,pointMouseLeave:y}=u(n,t);return(t,n)=>((0,o.wg)(),(0,o.iD)("g",{id:e.id,class:"node-wrap",onMousedown:n[0]||(n[0]=(...e)=>(0,i.SU)(g)&&(0,i.SU)(g)(...e))},[(0,o._)("rect",(0,o.dG)({class:"node-outline"},(0,i.SU)(h),{class:{focus:(0,i.SU)(c)}}),null,16),(0,o._)("rect",(0,o.dG)({class:"node"},(0,i.SU)(l)),null,16),((0,o.wg)(!0),(0,o.iD)(o.HY,null,(0,o.Ko)((0,i.SU)(v),(e=>((0,o.wg)(),(0,o.iD)("circle",(0,o.dG)(e,{key:e.pos,class:["point",{focus:(0,i.SU)(c)}],onMouseenter:t=>(0,i.SU)(f)(e),onMouseleave:t=>(0,i.SU)(y)(e),onMousedown:t=>(0,i.SU)(w)(t,e)}),null,16,p)))),128))],40,d))}},v=n(89);const g=(0,v.Z)(h,[["__scopeId","data-v-0cd1910e"]]);var w=g;const f=["id"],y=["onMouseenter","onMouseleave","onMousedown"];var x={__name:"svgCircle",props:["pos","size","startPoint","id","curNodeId","isDragging"],emits:["startDrag","startLine","endLine","cancelEndLine"],setup(e,{emit:t}){const n=e,{nodePos:s,nodeSize:r,innerPos:a,isFocus:c,circleAttr:l,outlineCircleAttr:d,pointsAttr:p,handleMousedown:h,startLine:v,pointMouseEnter:g,pointMouseLeave:w}=u(n,t);return(t,n)=>((0,o.wg)(),(0,o.iD)("g",{id:e.id,class:"node-wrap",onMousedown:n[0]||(n[0]=(...e)=>(0,i.SU)(h)&&(0,i.SU)(h)(...e))},[(0,o._)("circle",(0,o.dG)({class:"node-outline"},(0,i.SU)(d),{class:{focus:(0,i.SU)(c)}}),null,16),(0,o._)("circle",(0,o.dG)({class:"node"},(0,i.SU)(l)),null,16),((0,o.wg)(!0),(0,o.iD)(o.HY,null,(0,o.Ko)((0,i.SU)(p),(e=>((0,o.wg)(),(0,o.iD)("circle",(0,o.dG)(e,{key:e.pos,class:["point",{focus:(0,i.SU)(c)}],onMouseenter:t=>(0,i.SU)(g)(e),onMouseleave:t=>(0,i.SU)(w)(e),onMousedown:t=>(0,i.SU)(v)(t,e)}),null,16,y)))),128))],40,f))}};const m=(0,v.Z)(x,[["__scopeId","data-v-20a9ec70"]]);var S=m;const z=["id"],_=["onMouseenter","onMouseleave","onMousedown"];var M={__name:"svgRhombic",props:["pos","size","startPoint","id","curNodeId","isDragging"],emits:["startDrag","startLine","endLine","cancelEndLine"],setup(e,{emit:t}){const n=e,{nodePos:s,nodeSize:r,innerPos:a,isFocus:c,rhombicAttr:l,outlineRhombicAttr:d,pointsAttr:p,handleMousedown:h,startLine:v,pointMouseEnter:g,pointMouseLeave:w}=u(n,t);return(t,n)=>((0,o.wg)(),(0,o.iD)("g",{id:e.id,class:"node-wrap",onMousedown:n[0]||(n[0]=(...e)=>(0,i.SU)(h)&&(0,i.SU)(h)(...e))},[(0,o._)("polygon",(0,o.dG)({class:"node-outline"},(0,i.SU)(d),{class:{focus:(0,i.SU)(c)}}),null,16),(0,o._)("polygon",(0,o.dG)({class:"node"},(0,i.SU)(l)),null,16),((0,o.wg)(!0),(0,o.iD)(o.HY,null,(0,o.Ko)((0,i.SU)(p),(e=>((0,o.wg)(),(0,o.iD)("circle",(0,o.dG)(e,{key:e.pos,class:["point",{focus:(0,i.SU)(c)}],onMouseenter:t=>(0,i.SU)(g)(e),onMouseleave:t=>(0,i.SU)(w)(e),onMousedown:t=>(0,i.SU)(v)(t,e)}),null,16,_)))),128))],40,z))}};const L=(0,v.Z)(M,[["__scopeId","data-v-75ab3e14"]]);var k=L;const U=e=>((0,o.dD)("data-v-d6f0f884"),e=e(),(0,o.Cn)(),e),D={class:"lines-wrap"},b=U((()=>(0,o._)("marker",{id:"markerArrow",markerUnits:"strokeWidth",markerWidth:"5",markerHeight:"4",refX:"6",refY:"2",orient:"auto"},[(0,o._)("path",{d:"M 0 0 L 5 2 L 0 4 z",class:"trangle"})],-1)));var I={__name:"svgLines",props:["nodes","lines"],setup(e){const t=e;function n(e,t){const n=20;switch(e){case"left":return{cx:t.cx-n,cy:t.cy};case"top":return{cx:t.cx,cy:t.cy-n};case"right":return{cx:t.cx+n,cy:t.cy};case"bottom":return{cx:t.cx,cy:t.cy+n};default:break}}function i(e,t){const{point:n,node:o,pos:i}=e,{point:s,node:r,pos:a}=t;return[n,{cx:n.cx,cy:s.cy},s]}const s=(0,o.Fl)((()=>t.lines.map((e=>{const{targetId:o,pos:s}=e.start,{targetId:r,pos:a}=e.end,l=t.nodes.find((e=>e.id===o)),u=t.nodes.find((e=>e.id===r)),d=c(s,l.pos,l.size),p=c(a,u.pos,u.size),h=n(s,d),v=n(a,p),g=i({node:l,pos:s,point:h},{node:u,pos:a,point:v});return{id:`${o}-${s}-${r}-${a}`,d:[`M${d.cx} ${d.cy}`,...g.map((e=>`L${e.cx} ${e.cy}`)),`L${p.cx} ${p.cy}`].join(" ")}}))));return(e,t)=>((0,o.wg)(),(0,o.iD)("g",D,[b,((0,o.wg)(!0),(0,o.iD)(o.HY,null,(0,o.Ko)(s.value,(e=>((0,o.wg)(),(0,o.iD)("path",(0,o.dG)({key:e.id},e,{class:"line","marker-end":"url(#markerArrow)"}),null,16)))),128))]))}};const N=(0,v.Z)(I,[["__scopeId","data-v-d6f0f884"]]);var P=N,E={__name:"helpLine",props:["lines","curNode","wrapSize"],setup(e){const t=e,n=(0,o.Fl)((()=>t.curNode?[c("top",t.curNode.pos,t.curNode.size),c("right",t.curNode.pos,t.curNode.size),c("left",t.curNode.pos,t.curNode.size),c("bottom",t.curNode.pos,t.curNode.size)]:[])),i=(0,o.Fl)((()=>{let e={matched:!1,attr:null};return t.lines.forEach((o=>{e.matched||n.value.forEach((n=>{n.cx===o.cx&&!1===e.matched&&(e.matched=!0,e.attr={x1:n.cx,y1:0,x2:n.cx,y2:t.wrapSize.height}),n.cy===o.cy&&!1===e.matched&&(e.matched=!0,e.attr={x1:0,y1:n.cy,x2:t.wrapSize.width,y2:n.cy})}))})),e}));return(e,t)=>((0,o.wg)(),(0,o.iD)("g",null,[i.value.matched?((0,o.wg)(),(0,o.iD)("line",(0,o.dG)({key:0},i.value.attr,{class:"dash-line"}),null,16)):(0,o.kq)("",!0)]))}};const F=(0,v.Z)(E,[["__scopeId","data-v-10f32b17"]]);var A=F;const H={class:"svg-bar"},j={class:"item"},G={class:"item"},C={class:"item"};var R={__name:"bar",emits:["createRect","createNode"],setup(e,{emit:t}){function n(e,n){t("createNode",e,n)}return(e,t)=>((0,o.wg)(),(0,o.iD)("div",H,[(0,o._)("div",j,[(0,o._)("div",{class:"rect",onMousedown:t[0]||(t[0]=e=>n(e,{type:"rect"}))},null,32)]),(0,o._)("div",G,[(0,o._)("div",{class:"circle",onMousedown:t[1]||(t[1]=e=>n(e,{type:"circle"}))},null,32)]),(0,o._)("div",C,[(0,o._)("div",{class:"rhombic",onMousedown:t[2]||(t[2]=e=>n(e,{type:"rhombic"}))},null,32)])]))}};const $=(0,v.Z)(R,[["__scopeId","data-v-05e463a8"]]);var Y=$;const Z=["width","height"],W={name:"Flow"};var q=Object.assign(W,{setup(e){const t=(0,i.iH)(null);(0,i.iH)(null);let n=(0,i.iH)({x:0,y:0});const u=(0,i.qj)({width:0,height:0}),d=(0,i.iH)(0),p=(0,i.iH)({}),h=(0,i.iH)(!1),v=(0,i.iH)(null),g=(0,i.iH)(null),f=(0,i.qj)([{start:{targetId:1,pos:"right"},end:{targetId:2,pos:"left"}},{start:{targetId:2,pos:"right"},end:{targetId:3,pos:"left"}}]),y=(0,i.iH)([{id:1,pos:{x:200,y:200},type:"rect",size:{width:100,height:100}},{id:2,type:"rhombic",pos:{x:350,y:210},size:{width:120,height:80}},{id:3,pos:{x:550,y:220},type:"circle",size:{width:60,height:60}}]),x=(0,o.Fl)((()=>{const e=[];return y.value.forEach((t=>{t.id!==d.value&&e.push(c("left",t.pos,t.size),c("top",t.pos,t.size),c("right",t.pos,t.size),c("bottom",t.pos,t.size))})),e})),m=(0,o.Fl)((()=>0!==d.value?y.value.find((e=>e.id===d.value)):null));function z(e){return{circle:S,rect:w,rhombic:k}[e]??w}const _=(0,o.Fl)((()=>v.value?{x1:v.value?.cx,y1:v.value?.cy,x2:g.value?.cx??n.value.x,y2:g.value?.cy??n.value.y}:{}));function M({id:e,event:o,innerPos:i}){h.value=!0,d.value=e,p.value={innerPos:i},v.value=null,g.value=null,n.value=r(o,t.value);const{index:s,result:c}=a(y.value,(t=>t.id===e));y.value.splice(s,1),y.value.push(c)}function L(e,t){switch(t.type){case"rect":t.width=100,t.height=100;break;case"circle":t.width=60,t.height=60;break;case"rhombic":t.width=120,t.height=80;break}const o={id:y.value.length+1,type:t.type,pos:{x:n.value.x-t.width/2,y:n.value.y-t.height/2},size:{width:t.width,height:t.height}};y.value.push(o),h.value=!0,d.value=o.id,p.value={innerPos:{x:t.width/2,y:t.height/2}}}function U({id:e,point:t}){d.value=e,h.value=!1,v.value={targetId:e,...t}}function D({id:e,point:t}){v.value&&(g.value={targetId:e,...t})}function b(){v.value&&(g.value=null)}function I(e){n.value=r(e,t.value),m.value&&h.value&&(m.value.pos={x:s(n.value.x-p.value.innerPos.x),y:s(n.value.y-p.value.innerPos.y)})}function N(){if(h.value=!1,v.value&&g.value){const e={start:{targetId:v.value.targetId,pos:v.value.pos},end:{targetId:g.value.targetId,pos:g.value.pos}},t=f.find((t=>l(t,e)));t||f.push(e)}v.value=null,g.value=null}function E(){u.width=t.value.offsetWidth-1,u.height=t.value.offsetHeight-1}function F(){d.value=0}function H(e){e.stopPropagation()}return window.addEventListener("mouseup",N),window.addEventListener("resize",E),window.addEventListener("click",F),(0,o.bv)((()=>{E()})),(0,o.Jd)((()=>{window.removeEventListener("mouseup",N),window.removeEventListener("resize",E),window.removeEventListener("click",F)})),(e,n)=>((0,o.wg)(),(0,o.iD)("div",{ref_key:"wrapRef",ref:t,class:"svg-wrap",onMousemove:I},[(0,o.Wm)(Y,{onCreateNode:L}),((0,o.wg)(),(0,o.iD)("svg",{version:"1.1",baseProfile:"full",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","xmlns:ev":"http://www.w3.org/2001/xml-events",width:u.width,height:u.height},[(0,o.Wm)(A,{lines:x.value,curNode:m.value,wrapSize:u},null,8,["lines","curNode","wrapSize"]),(0,o.Wm)(P,{lines:f,nodes:y.value},null,8,["lines","nodes"]),((0,o.wg)(!0),(0,o.iD)(o.HY,null,(0,o.Ko)(y.value,(e=>((0,o.wg)(),(0,o.j4)((0,o.LL)(z(e.type)),(0,o.dG)({key:e.id},e,{isDragging:h.value,curNodeId:d.value,startPoint:v.value,onClick:H,onStartLine:U,onEndLine:D,onCancelEndLine:b,onStartDrag:M}),null,16,["isDragging","curNodeId","startPoint"])))),128)),v.value?((0,o.wg)(),(0,o.iD)("line",(0,o.dG)({key:0},_.value,{class:"dash-line"}),null,16)):(0,o.kq)("",!0)],8,Z))],544))}});const K=(0,v.Z)(q,[["__scopeId","data-v-a4a0e4da"]]);var X=K}}]);
//# sourceMappingURL=flow.978f3057.js.map