@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 15.3 kB
JavaScript
(function(R,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("../designer-canvas/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../designer-canvas/index.umd.js"],a):(R=typeof globalThis<"u"?globalThis:R||self,a(R["flow-canvas"]={},R.Vue,R.designerCanvas))})(this,function(R,a,it){"use strict";const st={modelValue:{type:Object,default:{}}};function at(){const w={aroundDirection:"none",left:2,right:2,top:2,bottom:2,x:0,y:0};function A(){const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("fill","none"),o.setAttribute("stroke","#4d53e8"),o.setAttribute("stroke-width","2"),o.setAttribute("class",""),o}function Y(){const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("fill","none"),o.setAttribute("stroke","#4d53e8"),o.setAttribute("stroke-width","2"),o.setAttribute("stroke-linecap","round"),o}function _(){const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("fill","none"),o.setAttribute("stroke","#4d53e8"),o.setAttribute("stroke-width","2"),o.setAttribute("stroke-linecap","round"),o}function P(o,t,s,r){const e=n=>{n.key==="Delete"&&(o.indexOf("^"),document.removeEventListener("keydown",e),t.remove())};s.addEventListener("mouseenter",()=>{s.setAttribute("stroke","#37d0ff"),r.setAttribute("stroke","#37d0ff"),s.setAttribute("stroke-width","3"),document.addEventListener("keydown",e)}),s.addEventListener("mouseleave",()=>{s.setAttribute("stroke","#4d53e8"),s.setAttribute("stroke-width","2"),r.setAttribute("stroke","#4d53e8"),document.removeEventListener("keydown",e)})}function S(o){let t=document.getElementById(o);if(t==null){const s=document.createElementNS("http://www.w3.org/2000/svg","svg"),r=A();s.appendChild(r);const e=Y();s.appendChild(e);const n=_();s.appendChild(n);const l=_();s.appendChild(l),t=document.createElement("div"),t.id=o,t.style.position="absolute",t.appendChild(s),P(o,t,r,e);const i=document.getElementById("svg-container");return i&&i.appendChild(t),t}return t}function b(o,t,s,r,e){const n={x:0,y:0};return o==="west"&&(t==="north_west"&&(s==="north"&&(n.x=0,n.y=0-e/2),s==="west"&&(n.x=0-r/2,n.y=0)),t==="north_east"&&(s==="north"&&(n.x=-100,n.y=0-e/2),s==="east"&&(n.x=-100,n.y=0-e/2)),t==="south_east"&&(s==="south"&&(n.x=-100,n.y=0+e/2),s==="east"&&(n.x=-100,n.y=0+e/2)),t==="south_west"&&(s==="south"&&(n.x=0,n.y=0+e/2),s==="west"&&(n.x=0-r/2,n.y=0))),o==="east"&&(t==="north_west"&&(s==="north"&&(n.x=-100,n.y=0-e/2),s==="west"&&(n.x=100,n.y=0-e/2)),t==="north_east"&&(s==="north"&&(n.x=0,n.y=0-e/2),s==="east"&&(n.x=0+r/2,n.y=0)),t==="south_east"&&(s==="south"&&(n.x=0,n.y=0+e/2),s==="east"&&(n.x=0+r/2,n.y=0)),t==="south_west"&&(s==="south"&&(n.x=100,n.y=0+e/2),s==="west"&&(n.x=100,n.y=0+e/2))),o==="north"&&(t==="north_west"&&(s==="north"&&(n.x=0,n.y=0-e/2),s==="west"&&(n.x=0-r/2,n.y=0)),t==="north_east"&&(s==="north"&&(n.x=0,n.y=0-e/2),s==="east"&&(n.x=0+r/2,n.y=0)),t==="south_east"&&(s==="south"&&(n.x=0+r/2,n.y=-100),s==="east"&&(n.x=0+r/2,n.y=-100)),t==="south_west"&&(s==="south"&&(n.x=0-r/2,n.y=-100),s==="west"&&(n.x=0-r/2,n.y=-100))),o==="south"&&(t==="north_west"&&(s==="north"&&(n.x=0-r/2,n.y=100),s==="west"&&(n.x=0-r/2,n.y=100)),t==="north_east"&&(s==="north"&&(n.x=0+r/2,n.y=100),s==="east"&&(n.x=0+r/2,n.y=100)),t==="south_east"&&(s==="south"&&(n.x=0,n.y=0+e/2),s==="east"&&(n.x=0+r/2,n.y=0)),t==="south_west"&&(s==="south"&&(n.x=0,n.y=e/2),s==="west"&&(n.x=0-r/2,n.y=0))),n}function h(o,t,s,r){const e={x:0,y:0};return o==="south"&&(t==="west"&&(e.x=-100,e.y=0-r/2),t==="east"&&(e.x=100,e.y=-100),t==="south"&&(e.x=0-s/2,e.y=100),(t==="north"||t==="center")&&(e.x=0,e.y=0-r/2)),o==="north"&&(t==="west"&&(e.x=-100,e.y=100),t==="east"&&(e.x=100,e.y=100),t==="north"&&(e.x=0-s/2,e.y=-100),(t==="south"||t==="center")&&(e.x=0,e.y=r/2)),o==="east"&&(t==="north"&&(e.y=-100,e.x=-100),t==="south"&&(e.y=100,e.x=-100),t==="east"&&(e.x=100,e.y=100),(t==="west"||t==="center")&&(e.x=0-s/2,e.y=0)),o==="west"&&(t==="north"&&(e.y=-100,e.x=100),t==="south"&&(e.y=100,e.x=100),t==="west"&&(e.x=-100,e.y=r/2),(t==="east"||t==="center")&&(e.x=s/2,e.y=0)),e}function k(o,t,s,r,e,n,l){const i=l==="south"||l==="east"?"portrait":"landscape",v=e,O=i==="landscape"?"east":"north",X=l==="center"?i==="landscape"?"west":"south":l,F=b(v,n,O,o,t),{x:c,y}=F,I=h(O,X,o,t),{x:u,y:d}=I;d<0&&(t+=Math.abs(d));const W=new Map([["default",0+c],["portrait",0+c],["landscape",0+c]]),m=new Map([["default",t+y],["portrait",t+y],["landscape",t+y]]);c<0&&(o+=Math.abs(c)),u>0&&(o+=u);const Q=new Map([["default",o+u],["portrait",o+u],["landscape",o+u]]),V=new Map([["default",0+d],["portrait",0+d],["landscape",0+d]]),T=r.left>w.left,N=r.bottom>w.bottom,G=T?0:N?o/2:W.get(i),H=N?t+r.bottom:T?t/2:m.get(i),U=Q.get(i),q=V.get(i);return[{x:G,y:H},{x:U,y:q},{x:u,y:d}]}function K(o,t,s,r,e,n,l){const i=l==="south"||l==="west"?"portrait":"landscape",v=e,O=i==="landscape"?"west":"north",X=l,F=b(v,n,O,o,t),{x:c,y}=F,I=h(O,X,o,t),{x:u,y:d}=I;d<0&&(t+=Math.abs(d)),c>0&&(o+=c),u<0&&(o+=Math.abs(u));const W=new Map([["default",o+c],["portrait",o+c],["landscape",o+c]]),m=new Map([["default",t+y],["portrait",t+y],["landscape",t+y]]),Q=new Map([["default",0+u],["portrait",0+u],["landscape",0+u]]),V=new Map([["default",0+d],["portrait",0+d],["landscape",0+d]]),T=r.right>w.right,N=r.bottom>w.bottom,G=T?o+r.right:N?o/2:W.get(i),H=N?t+r.bottom:T?t/2:m.get(i),U=Q.get(i),q=V.get(i);return[{x:G,y:H},{x:U,y:q},{x:u,y:d}]}function Z(o,t,s,r,e,n,l){const i=l==="north"||l==="east"?"portrait":"landscape",v=e,O=i==="landscape"?"east":"south",X=l,F=b(v,n,O,o,t),{x:c,y}=F,I=h(O,X,o,t),{x:u,y:d}=I,W=new Map([["default",0+c],["portrait",0+c],["landscape",0+c]]),m=new Map([["default",0+y],["portrait",0+y],["landscape",0+y]]);c<0&&(o+=Math.abs(c)),y<0&&(t+=Math.abs(y)),u>0&&(o+=u),d>0&&(t+=d);const Q=new Map([["default",o+u],["portrait",o+u],["landscape",o+u]]),V=new Map([["default",t+d],["portrait",t+d],["landscape",t+d]]),T=r.left>w.left,N=r.top>w.top,G=T?0:N?o/2:W.get(i),H=N?0:T?t/2:m.get(i),U=Q.get(i),q=V.get(i);return[{x:G,y:H},{x:U,y:q},{x:u,y:d}]}function D(o,t,s,r,e,n,l){const i=l==="north"||l==="west"?"portrait":"landscape",v=e,O=i==="landscape"?"west":"south",X=l,F=b(v,n,O,o,t),{x:c,y}=F,I=h(O,X,o,t),{x:u,y:d}=I;u<0&&(o+=Math.abs(u));const W=new Map([["default",o+c],["portrait",o+c],["landscape",o+c]]),m=new Map([["default",0+y],["portrait",0+y],["landscape",0+y]]);y<0&&(t+=Math.abs(y)),d>0&&(t+=d);const Q=new Map([["default",0+u],["portrait",0+u],["landscape",0+u]]),V=new Map([["default",t+d],["portrait",t+d],["landscape",t+d]]),T=r.right>w.right,N=r.top>w.top,G=T?o+r.right:N?o/2:W.get(i),H=N?0:T?t/2:m.get(i),U=Q.get(i),q=V.get(i);return[{x:G,y:H},{x:U,y:q},{x:u,y:d}]}const g=new Map([["north_east",k],["north_west",K],["south_east",Z],["south_west",D]]),$=new Map([["east",["north_west","south_west"]],["west",["north_east","south_east"]],["north",["south_west","south_east"]],["south",["north_west","north_east"]],["center",[]]]);function p(o,t){return o==="north_west"?{aroundDirection:"north_west",left:t.left,right:100,top:t.top,bottom:t.top}:o==="south_west"?{aroundDirection:"south_west",left:t.left,right:100,top:t.top,bottom:t.bottom}:t}function E(o,t){return o==="north_east"?{left:100,right:t.right,top:t.top,bottom:t.top}:o==="south_east"?{left:100,right:t.right,top:t.top,bottom:t.bottom}:t}function M(o,t){return o==="south_west"?{left:t.left,right:t.right,top:100,bottom:t.top}:o==="south_east"?{left:t.left,right:t.right,top:100,bottom:t.bottom}:t}function B(o,t){return o==="north_west"?{left:t.left,right:t.right,top:t.top,bottom:100}:o==="north_east"?{left:t.left,right:t.right,top:t.top,bottom:100}:t}function f(o,t){return t}const C=new Map([["east",p],["west",E],["north",M],["south",B],["center",f]]);function z(o,t,s,r){const e=t.x-o.x,n=t.y-o.y,l=e>=0?"east":"west",i=n>=0?"south":"north",v=`${i}_${l}`,X=($.get(s)||[]).includes(v),F=C.get(s),c=X?F(v,w):w,y=Math.abs(e),I=Math.abs(n),u=g.get(`${i}_${l}`),[d,W,m]=u(y,I,X,c,s,v,r),Q=l==="west"?m.x<0?Math.abs(m.x):0:m.x>0?m.x:0,V=c.left+c.right+y+Q,T=i==="north"?m.y<0?Math.abs(m.y):0:m.y>0?m.y:0,N=c.top+c.bottom+I+T,G=l==="east"?o.x-c.left:o.x+c.right-V,H=i==="south"?o.y-c.top:o.y+c.bottom-N,U=l==="east"?c.left:V-c.right,q=i==="north"?N-c.bottom:c.top,mt=l==="west"?m.x<0?Math.abs(m.x):0:m.x<0?V:V-m.x,xt=i==="north"?m.y<0?Math.abs(m.y):0:m.y<0?N:N-m.y;return{width:V,height:N,left:G,top:H,startPoinInBoundray:{x:U,y:q},firstControlPoint:d,secondControlPoint:W,endPoinInBoundray:{x:mt,y:xt}}}function j(o,t,s,r,e){o.style.position="absolute",o.style.alignItems="center",o.style.left=`${t}px`,o.style.top=`${s}px`,o.style.width=r+"px",o.style.height=e+"px"}function tt(o,t,s,r,e,n,l){const i=o.childNodes[0];i.setAttribute("width",String(t)),i.setAttribute("height",String(s)),o.appendChild(i);const v=i.childNodes[0],O=`${r.x} ${r.y}`,X=`${e.x} ${e.y}`,F=`${n.x} ${n.y}`,c=`${l.x} ${l.y}`,y="M ".concat(O).concat(" C ").concat(X).concat(","+F+",").concat(c);v.setAttribute("d",y),v.setAttribute("fill","none"),v.setAttribute("stroke","#4d53e8"),v.setAttribute("stroke-width","2"),v.setAttribute("class","")}function ot(o,t,s,r,e){const{width:n,height:l,left:i,top:v,startPoinInBoundray:O,firstControlPoint:X,secondControlPoint:F,endPoinInBoundray:c}=z(t,s,r,e);j(o,i,v,n,l),tt(o,n,l,O,X,F,c)}function nt(o,t,s,r,e){const n=S(o);ot(n,t,s,r,e)}function et(o){return Number(o.replace("px",""))}function rt(o){if(o!==null){const t=o.parentNode,s=et(t.style.left),r=et(t.style.top);return{x:s+o.offsetLeft+o.offsetWidth/2,y:r+o.offsetTop+o.offsetHeight/2}}return{x:0,y:0}}function pt(o,t){const s=document.getElementById(o),r=document.getElementById(t),e=rt(s),n=rt(r),l=e.x+2,i=e.y,v=n.x-2,O=n.y;return{startPoint:{x:l,y:i},endPoint:{x:v,y:O}}}function yt(o,t,s,r){const{startPoint:e,endPoint:n}=pt(o,t);nt(`${o}_${t}`,e,n,s,r)}return{connect:yt,drawing:nt}}function ct(L){const J=a.ref(),x=a.ref(0),w=a.ref(0),A=a.ref({x:0,y:0}),Y=a.ref(),{drawing:_}=L;function P(p){return Number(p.replace("px",""))}function S(p){return(p&&p.className&&p.className.split?p.className.split(" "):[]).includes("f-flow-ancher")}function b(p){switch((p?p.className.split(" "):[]).find(B=>B.startsWith("circle-"))||""){case"circle-left":return"west";case"circle-right":return"east";case"circle-top":return"north";case"circle-bottom":return"south";default:return"center"}}function h(p,E,M){const B=M.getBoundingClientRect();x.value=B.left,w.value=B.top,A.value={x:p,y:E},J.value=b(M)}function k(p){var j;const E=p.clientX-x.value,M=p.clientY-w.value,B=A.value.x+E,f=A.value.y+M,C=p.target,z=C&&typeof C.className=="string"&&S(C)?b(C):"center";_(`${(j=Y.value)==null?void 0:j.id}_curve_to`,{x:A.value.x,y:A.value.y},{x:B,y:f},J.value,z)}function K(p){const E=document.getElementById(p);E&&E.remove()}function Z(){document.addEventListener("mousemove",k)}function D(){document.removeEventListener("mousemove",k)}function g(p){Y.value=void 0,D()}function $(p,E){Y.value=document.getElementById(p);const M=Y.value.offsetParent,B=Y.value.getBoundingClientRect(),f=M.getBoundingClientRect(),C=P(M.style.left)+(B.left-f.left),z=P(M.style.top)+(B.top-f.top),j=C+B.width/2,tt=z+B.height/2;h(j,tt,Y.value),Z()}return{drawFrom:$,eraseDrawingLine:K,finishToDraw:g,getAncherPointPosition:b,isAncherPoint:S}}const lt={id:{type:String,default:""},type:{type:String,default:""},modelValue:{type:Object},x:{type:Number,default:0},y:{type:Number,default:0},connection:{type:Array,default:[]}},ft=a.defineComponent({name:"FFlowNodeItem",props:lt,emits:[],setup(L,J){const x=a.ref(L.id),w=a.ref(L.modelValue),A=a.ref(),Y=a.inject("use-drawing-bezier-composition"),{drawFrom:_,eraseDrawingLine:P,finishToDraw:S,getAncherPointPosition:b,isAncherPoint:h}=Y,k=a.inject("use-bezier-curve-composition"),{connect:K}=k,Z=a.inject("use-connections-composition"),{addConnection:D,getConnectionsOfNode:g}=Z;new Map(L.connection);const $=a.computed(()=>({left:`${L.x}px`,top:`${L.y}px`}));function p(f,C){if(h(f)&&h(C)){const z=b(f),j=b(C);K(f.id,C.id,z,j);const tt=f.id,ot=C.id,nt=tt.split(/(-left-point|-right-point|-top-point|-bottom-point)/,1)[0],et=ot.split(/(-left-point|-right-point|-top-point|-bottom-point)/,1)[0];D(nt,tt,et,ot)}}function E(f){var C;document.removeEventListener("mouseup",E),S(f),P(`${(C=A.value)==null?void 0:C.id}_curve_to`),p(A.value,f.target)}function M(f,C){A.value=document.getElementById(f),_(f,C),document.addEventListener("mouseup",E),C.stopPropagation()}a.watch([()=>L.x,()=>L.y],()=>{const f=g(x.value);f.length&&f.forEach(C=>{const z=document.getElementById(C.from),j=document.getElementById(C.to);z&&j&&p(z,j)})});const B=a.computed(()=>({"node-content":!0}));return()=>a.createVNode("div",{id:x.value,class:"br-node",style:$.value},[a.createVNode("div",{id:`${x.value}-left-point`,class:"f-flow-ancher circle-left",onMousedown:f=>M(`${x.value}-left-point`,f)},null),a.createVNode("div",{id:`${x.value}-top-point`,class:"f-flow-ancher circle-top",onMousedown:f=>M(`${x.value}-top-point`,f)},null),a.createVNode("div",{id:`${x.value}-content`,class:B.value,style:"min-width:200px;min-height:200px;"},[w.value&&a.createVNode(it.FDesignerCanvas,{modelValue:w.value,"onUpdate:modelValue":f=>w.value=f},null)]),a.createVNode("div",{id:`${x.value}-right-point`,class:"f-flow-ancher circle-right",onMousedown:f=>M(`${x.value}-right-point`,f)},null),a.createVNode("div",{id:`${x.value}-bottom-point`,class:"f-flow-ancher circle-bottom",onMousedown:f=>M(`${x.value}-bottom-point`,f)},null)])}});function ut(L){const J=new Map,x=new Map;function w(_,P){const S=x.get(_)||[];S.filter(h=>P.from===h.from&&P.to===h.to).length>0||(S.push(P),x.set(_,S))}function A(_,P,S,b){const h=new Set(J.get(P)||[]);h.add(b),J.set(P,[...h]);const k={from:P,to:b,type:"Curve"};w(_,k),w(S,k)}function Y(_){return x.get(_)||[]}return{addConnection:A,getConnectionsOfNode:Y}}const dt=a.defineComponent({name:"FFlowCanvas",props:st,emits:[],setup(L,J){const x=a.ref(),w=at(),A=ct(w),Y=ut();a.provide("use-bezier-curve-composition",w),a.provide("use-connections-composition",Y),a.provide("use-drawing-bezier-composition",A);const _=a.computed(()=>({transition:"transform 0.2s","background-color":"#F2F3F5",height:"100%",width:"100%",position:"relative"}));a.onMounted(()=>{x.value=L.modelValue});const P=a.ref(),S=a.ref(),b=a.ref(),h=a.ref(),k=a.ref();function K(g){const $=g.clientX-h.value,p=g.clientY-k.value;P.value&&P.value.position&&(P.value.position.x=S.value+$,P.value.position.y=b.value+p)}function Z(){document.removeEventListener("mousemove",K),document.removeEventListener("mouseup",Z),P.value=void 0,h.value=void 0,k.value=void 0}function D(g,$){P.value=g,S.value=g.position.x,b.value=g.position.y,h.value=$.clientX,k.value=$.clientY,document.addEventListener("mousemove",K),document.addEventListener("mouseup",Z)}return()=>a.createVNode("div",{class:"f-flow-canvas editorDiv flex-fill h-100"},[a.createVNode("div",{id:"svg-container",class:"f-struct-wrapper flex-fill",style:_.value},[x.value&&x.value.contents.map(g=>a.createVNode(ft,{modelValue:g.content[0],"onUpdate:modelValue":$=>g.content[0]=$,id:g.id,x:g.position.x,y:g.position.y,onMousedown:$=>D(g,$)},null))])])}});R.FFlowCanvas=dt,R.flowCanvasProps=st,Object.defineProperty(R,Symbol.toStringTag,{value:"Module"})});