| 12 |
- "use strict";(self["webpackChunkludash"]=self["webpackChunkludash"]||[]).push([[512],{3210:function(e,t,n){n.r(t),n.d(t,{default:function(){return K}});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 l(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 u(e,t){return JSON.stringify(e)===JSON.stringify(t)}function d(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}))),u=(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}})),d=(0,o.Fl)((()=>{const t=e.size.width/2;return{cx:e.pos.x+t,cy:e.pos.y+t,r:t}})),c=(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(" ")}})),v=(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(" ")}})),h=(0,o.Fl)((()=>[{pos:"top",...l("top",e.pos,e.size)},{pos:"right",...l("right",e.pos,e.size)},{pos:"bottom",...l("bottom",e.pos,e.size)},{pos:"left",...l("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:u,circleAttr:d,outlineCircleAttr:c,pointsAttr:h,rhombicAttr:p,outlineRhombicAttr:v,handleMousedown:g,startLine:w,pointMouseEnter:f,pointMouseLeave:y}}const c=["id"],p=["onMouseenter","onMouseleave","onMousedown"];var v={__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:l,rectAttr:u,outlineRectAttr:v,pointsAttr:h,handleMousedown:g,startLine:w,pointMouseEnter:f,pointMouseLeave:y}=d(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)(v),{class:{focus:(0,i.SU)(l)}}),null,16),(0,o._)("rect",(0,o.dG)({class:"node"},(0,i.SU)(u)),null,16),((0,o.wg)(!0),(0,o.iD)(o.HY,null,(0,o.Ko)((0,i.SU)(h),(e=>((0,o.wg)(),(0,o.iD)("circle",(0,o.dG)(e,{key:e.pos,class:["point",{focus:(0,i.SU)(l)}],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,c))}},h=n(89);const g=(0,h.Z)(v,[["__scopeId","data-v-7ba653a6"]]);var w=g;const f=["id"],y=["onMouseenter","onMouseleave","onMousedown"];var m={__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:l,circleAttr:u,outlineCircleAttr:c,pointsAttr:p,handleMousedown:v,startLine:h,pointMouseEnter:g,pointMouseLeave:w}=d(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)(v)&&(0,i.SU)(v)(...e))},[(0,o._)("circle",(0,o.dG)({class:"node-outline"},(0,i.SU)(c),{class:{focus:(0,i.SU)(l)}}),null,16),(0,o._)("circle",(0,o.dG)({class:"node"},(0,i.SU)(u)),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)(l)}],onMouseenter:t=>(0,i.SU)(g)(e),onMouseleave:t=>(0,i.SU)(w)(e),onMousedown:t=>(0,i.SU)(h)(t,e)}),null,16,y)))),128))],40,f))}};const x=(0,h.Z)(m,[["__scopeId","data-v-0cc3bd6f"]]);var S=x;const M=["id"],_=["onMouseenter","onMouseleave","onMousedown"];var L={__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:l,rhombicAttr:u,outlineRhombicAttr:c,pointsAttr:p,handleMousedown:v,startLine:h,pointMouseEnter:g,pointMouseLeave:w}=d(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)(v)&&(0,i.SU)(v)(...e))},[(0,o._)("polygon",(0,o.dG)({class:"node-outline"},(0,i.SU)(c),{class:{focus:(0,i.SU)(l)}}),null,16),(0,o._)("polygon",(0,o.dG)({class:"node"},(0,i.SU)(u)),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)(l)}],onMouseenter:t=>(0,i.SU)(g)(e),onMouseleave:t=>(0,i.SU)(w)(e),onMousedown:t=>(0,i.SU)(h)(t,e)}),null,16,_)))),128))],40,M))}};const U=(0,h.Z)(L,[["__scopeId","data-v-0e1d3359"]]);var z=U;const k=e=>((0,o.dD)("data-v-3e28ae0e"),e=e(),(0,o.Cn)(),e),D={class:"lines-wrap"},I=k((()=>(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 b={__name:"svgLines",props:["nodes","lines"],setup(e){const t=e,n=(0,o.Fl)((()=>t.lines.map((e=>{const{targetId:n,pos:o}=e.start,{targetId:i,pos:s}=e.end,r=t.nodes.find((e=>e.id===n)),a=t.nodes.find((e=>e.id===i)),u=l(s,a.pos,a.size),d=l(o,r.pos,r.size);return{id:`${n}-${o}-${i}-${s}`,x1:d.cx,y1:d.cy,x2:u.cx,y2:u.cy}}))));return(e,t)=>((0,o.wg)(),(0,o.iD)("g",D,[I,((0,o.wg)(!0),(0,o.iD)(o.HY,null,(0,o.Ko)(n.value,(e=>((0,o.wg)(),(0,o.iD)("line",(0,o.dG)({key:e.id},e,{class:"line","marker-end":"url(#markerArrow)"}),null,16)))),128))]))}};const P=(0,h.Z)(b,[["__scopeId","data-v-3e28ae0e"]]);var A=P;const H={class:"svg-bar"},E={class:"item"},F={class:"item"},j={class:"item"};var G={__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",E,[(0,o._)("div",{class:"rect",onMousedown:t[0]||(t[0]=e=>n(e,{type:"rect"}))},null,32)]),(0,o._)("div",F,[(0,o._)("div",{class:"circle",onMousedown:t[1]||(t[1]=e=>n(e,{type:"circle"}))},null,32)]),(0,o._)("div",j,[(0,o._)("div",{class:"rhombic",onMousedown:t[2]||(t[2]=e=>n(e,{type:"rhombic"}))},null,32)])]))}};const N=(0,h.Z)(G,[["__scopeId","data-v-5aa9e017"]]);var C=N;const R=["width","height"];var Y={__name:"index",setup(e){const t=(0,i.iH)(null);(0,i.iH)(null);let n=(0,i.iH)({x:0,y:0});const l=(0,i.qj)({width:0,height:0}),d=(0,i.iH)(0),c=(0,i.iH)({}),p=(0,i.iH)(!1),v=(0,i.iH)(null),h=(0,i.iH)(null),g=(0,i.qj)([{start:{targetId:1,pos:"right"},end:{targetId:2,pos:"left"}},{start:{targetId:2,pos:"right"},end:{targetId:3,pos:"left"}}]),f=(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}}]),y=(0,o.Fl)((()=>0!==d.value?f.value.find((e=>e.id===d.value)):null));function m(e){return{circle:S,rect:w,rhombic:z}[e]??w}const x=(0,o.Fl)((()=>v.value?{x1:v.value?.cx,y1:v.value?.cy,x2:h.value?.cx??n.value.x,y2:h.value?.cy??n.value.y}:{}));function M({id:e,event:o,innerPos:i}){p.value=!0,d.value=e,c.value={innerPos:i},v.value=null,h.value=null,n.value=r(o,t.value);const{index:s,result:l}=a(f.value,(t=>t.id===e));f.value.splice(s,1),f.value.push(l)}function _(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:f.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}};f.value.push(o),p.value=!0,d.value=o.id,c.value={innerPos:{x:t.width/2,y:t.height/2}}}function L({id:e,point:t}){d.value=e,p.value=!1,v.value={targetId:e,...t}}function U({id:e,point:t}){v.value&&(h.value={targetId:e,...t})}function k(){v.value&&(h.value=null)}function D(e){n.value=r(e,t.value),y.value&&p.value&&(y.value.pos={x:s(n.value.x-c.value.innerPos.x),y:s(n.value.y-c.value.innerPos.y)})}function I(){if(p.value=!1,v.value&&h.value){const e={start:{targetId:v.value.targetId,pos:v.value.pos},end:{targetId:h.value.targetId,pos:h.value.pos}},t=g.find((t=>u(t,e)));t||g.push(e)}v.value=null,h.value=null}function b(){l.width=t.value.offsetWidth-1,l.height=t.value.offsetHeight-1}function P(){d.value=0}function H(e){e.stopPropagation()}return window.addEventListener("mouseup",I),window.addEventListener("resize",b),window.addEventListener("click",P),(0,o.bv)((()=>{b()})),(0,o.Jd)((()=>{window.removeEventListener("mouseup",I),window.removeEventListener("resize",b),window.removeEventListener("click",P)})),(e,n)=>((0,o.wg)(),(0,o.iD)("div",{ref_key:"wrapRef",ref:t,class:"svg-wrap",onMousemove:D},[(0,o.Wm)(C,{onCreateNode:_}),((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:l.width,height:l.height},[(0,o.Wm)(A,{lines:g,nodes:f.value},null,8,["lines","nodes"]),((0,o.wg)(!0),(0,o.iD)(o.HY,null,(0,o.Ko)(f.value,(e=>((0,o.wg)(),(0,o.j4)((0,o.LL)(m(e.type)),(0,o.dG)({key:e.id},e,{isDragging:p.value,curNodeId:d.value,startPoint:v.value,onClick:H,onStartLine:L,onEndLine:U,onCancelEndLine:k,onStartDrag:M}),null,16,["isDragging","curNodeId","startPoint"])))),128)),v.value?((0,o.wg)(),(0,o.iD)("line",(0,o.dG)({key:0},x.value,{class:"dash-line"}),null,16)):(0,o.kq)("",!0)],8,R))],544))}};const Z=(0,h.Z)(Y,[["__scopeId","data-v-326d6733"]]);var K=Z}}]);
- //# sourceMappingURL=svg.861c7221.js.map
|
