demo-954c7679.js 8.3 KB

1
  1. import{u as B,P as S,a as R,b as V,c as E,_ as T}from"./vue-flow-core-4fccd971.js";import{C as D,D as I,G as N,H as y,o as n,c as f,I as l,b as d,J as U,u as s,l as h,v as _,w as g,F as W,d as m,K as $,_ as J,r as H,t as K}from"./index-a422b2db.js";var u=(e=>(e.Lines="lines",e.Dots="dots",e))(u||{});const M=function({dimensions:e,size:t,color:i}){return I("path",{stroke:i,"stroke-width":t,d:`M${e[0]/2} 0 V${e[1]} M0 ${e[1]/2} H${e[0]}`})},x=function({radius:e,color:t}){return I("circle",{cx:e,cy:e,r:e,fill:t})};u.Lines+"",u.Dots+"";const X={[u.Dots]:"#81818a",[u.Lines]:"#eee"},Y=["id","x","y","width","height","patternTransform"],j={key:2,height:"100",width:"100"},q=["fill"],Q=["x","y","fill"],ee={name:"Background",compatConfig:{MODE:3}},te=D({...ee,props:{id:{},variant:{default:()=>u.Dots},gap:{default:20},size:{default:1},lineWidth:{default:1},patternColor:{},color:{},bgColor:{},height:{default:100},width:{default:100},x:{default:0},y:{default:0},offset:{default:2}},setup(e){const{id:t,viewport:i}=B(),r=N(()=>{const[o,z]=Array.isArray(e.gap)?e.gap:[e.gap,e.gap],w=[o*i.value.zoom||1,z*i.value.zoom||1],p=e.size*i.value.zoom,k=e.variant===u.Dots?[p/e.offset,p/e.offset]:[w[0]/e.offset,w[1]/e.offset];return{scaledGap:w,offset:k,size:p}}),c=y(()=>`pattern-${t}${e.id?`-${e.id}`:""}`),v=y(()=>e.color||e.patternColor||X[e.variant||u.Dots]);return(o,z)=>(n(),f("svg",{class:"vue-flow__background vue-flow__container",style:U({height:`${o.height>100?100:o.height}%`,width:`${o.width>100?100:o.width}%`})},[l(o.$slots,"pattern-container",{id:c.value},()=>[d("pattern",{id:c.value,x:s(i).x%r.value.scaledGap[0],y:s(i).y%r.value.scaledGap[1],width:r.value.scaledGap[0],height:r.value.scaledGap[1],patternTransform:`translate(-${r.value.offset[0]},-${r.value.offset[1]})`,patternUnits:"userSpaceOnUse"},[l(o.$slots,"pattern",{},()=>[o.variant===s(u).Lines?(n(),h(s(M),{key:0,size:o.lineWidth,color:v.value,dimensions:r.value.scaledGap},null,8,["size","color","dimensions"])):o.variant===s(u).Dots?(n(),h(s(x),{key:1,color:v.value,radius:r.value.size/o.offset},null,8,["color","radius"])):_("",!0),o.bgColor?(n(),f("svg",j,[d("rect",{width:"100%",height:"100%",fill:o.bgColor},null,8,q)])):_("",!0)])],8,Y)]),d("rect",{x:o.x,y:o.y,width:"100%",height:"100%",fill:`url(#${c.value})`},null,8,Q),l(o.$slots,"default",{id:c.value})],4))}}),oe={name:"ControlButton",compatConfig:{MODE:3}},ne=(e,t)=>{const i=e.__vccOpts||e;for(const[r,c]of t)i[r]=c;return i},se={class:"vue-flow__controls-button"};function ae(e,t,i,r,c,v){return n(),f("button",se,[l(e.$slots,"default")])}const b=ne(oe,[["render",ae]]),ie={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},le=d("path",{d:"M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"},null,-1),re=[le];function de(e,t){return n(),f("svg",ie,re)}const ce={render:de},ue={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 5"},fe=d("path",{d:"M0 0h32v4.2H0z"},null,-1),he=[fe];function ve(e,t){return n(),f("svg",ue,he)}const _e={render:ve},ge={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 30"},me=d("path",{d:"M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0 0 27.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94a.919.919 0 0 1-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"},null,-1),pe=[me];function we(e,t){return n(),f("svg",ge,pe)}const $e={render:we},ye={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 25 32"},ze=d("path",{d:"M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z"},null,-1),Ce=[ze];function be(e,t){return n(),f("svg",ye,Ce)}const ke={render:be},Ve={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 25 32"},He=d("path",{d:"M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047z"},null,-1),Be=[He];function De(e,t){return n(),f("svg",Ve,Be)}const Ie={render:De},Me={name:"Controls",compatConfig:{MODE:3}},xe=D({...Me,props:{showZoom:{type:Boolean,default:!0},showFitView:{type:Boolean,default:!0},showInteractive:{type:Boolean,default:!0},fitViewParams:{},position:{default:()=>S.BottomLeft}},emits:["zoomIn","zoomOut","fitView","interactionChange"],setup(e,{emit:t}){const{nodesDraggable:i,nodesConnectable:r,elementsSelectable:c,setInteractive:v,zoomIn:o,zoomOut:z,fitView:w,viewport:p,minZoom:k,maxZoom:O}=B(),C=y(()=>i.value||r.value||c.value),P=y(()=>p.value.zoom<=k.value),F=y(()=>p.value.zoom>=O.value);function Z(){o(),t("zoomIn")}function A(){z(),t("zoomOut")}function G(){w(e.fitViewParams),t("fitView")}function L(){v(!C.value),t("interactionChange",!C.value)}return(a,Ze)=>(n(),h(s(R),{class:"vue-flow__controls",position:a.position},{default:g(()=>[l(a.$slots,"top"),a.showZoom?(n(),f(W,{key:0},[l(a.$slots,"control-zoom-in",{},()=>[m(b,{class:"vue-flow__controls-zoomin",disabled:F.value,onClick:Z},{default:g(()=>[l(a.$slots,"icon-zoom-in",{},()=>[(n(),h($(s(ce))))])]),_:3},8,["disabled"])]),l(a.$slots,"control-zoom-out",{},()=>[m(b,{class:"vue-flow__controls-zoomout",disabled:P.value,onClick:A},{default:g(()=>[l(a.$slots,"icon-zoom-out",{},()=>[(n(),h($(s(_e))))])]),_:3},8,["disabled"])])],64)):_("",!0),a.showFitView?l(a.$slots,"control-fit-view",{key:1},()=>[m(b,{class:"vue-flow__controls-fitview",onClick:G},{default:g(()=>[l(a.$slots,"icon-fit-view",{},()=>[(n(),h($(s($e))))])]),_:3})]):_("",!0),a.showInteractive?l(a.$slots,"control-interactive",{key:2},()=>[a.showInteractive?(n(),h(b,{key:0,class:"vue-flow__controls-interactive",onClick:L},{default:g(()=>[C.value?l(a.$slots,"icon-unlock",{key:0},()=>[(n(),h($(s(Ie))))]):_("",!0),C.value?_("",!0):l(a.$slots,"icon-lock",{key:1},()=>[(n(),h($(s(ke))))])]),_:3})):_("",!0)]):_("",!0),l(a.$slots,"default")]),_:3},8,["position"]))}});const Oe={class:"custom-node icons"},Pe=["src"],Fe={__name:"demo",setup(e){V.Top,V.Bottom;const t=H([{data:{label:"开始",image:"/src/assets/img/f11.png"},id:"node_0",position:{x:245,y:317},type:"default",handles:[{id:"handle1",type:"default",position:"right"}]},{data:{label:"优化器",image:"/src/assets/img/f32.png"},id:"node_1",position:{x:435,y:317},type:"default",handles:[{id:"handle2",type:"default",position:"left"}]},{data:{label:"Rosenbank",image:"/src/assets/img/f33.png"},id:"node_2",position:{x:630,y:317}},{data:{label:"结束",image:"/src/assets/img/f12.png"},id:"node_3",position:{x:804,y:317},type:"default"},{data:{label:"输入1",image:"/src/assets/img/f21.png"},id:"node_4",position:{x:521,y:146},type:"default",draggable:!0,handle:[{id:"handle_4",position:"Bottom"}]},{data:{label:"输入2",image:"/src/assets/img/f21.png"},id:"node_5",position:{x:712,y:146},type:"default",sourceHandle:"Bottom"},{data:{label:"输出",image:"/src/assets/img/f22.png"},id:"node_6",position:{x:641,y:519},type:"default",sourceHandle:"Top"}]);H([{source:"handle1",target:"handle2"}]);const i=H([{id:"e1->2",source:"node_0",target:"node_1",type:"straight"},{id:"e2->3",source:"node_1",target:"node_2",type:"straight"},{id:"e3->4",source:"node_2",target:"node_3",type:"straight"},{id:"e4->5",source:"node_2",target:"node_4",type:"straight"},{id:"e5->6",source:"node_2",target:"node_5",type:"straight"},{id:"e6->7",source:"node_2",target:"node_6",type:"straight"}]);return(r,c)=>(n(),f("div",null,[m(s(T),{nodes:t.value,edges:i.value},{"node-default":g(v=>[m(s(E),{type:"source",position:s(V).Right},null,8,["position"]),d("div",Oe,[d("img",{src:v.data.image,alt:"节点图片"},null,8,Pe),d("span",null,K(v.data.label),1)])]),default:g(()=>[m(s(te),{gap:5,size:.5,patternColor:"#C60707 "}),m(s(xe))]),_:1},8,["nodes","edges"])]))}},Le=J(Fe,[["__scopeId","data-v-8eb346d8"]]);export{Le as default};