You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
9.5 KiB
1 lines
9.5 KiB
import{d as R,i as Q,c as C,s as H,t as J,v as ot,x as at,y as it,z as st,o as m,b as g,n as Z,p as tt,A as rt,u as e,B as lt,C as ct,e as N,F as q,r as z,h as K,g as V,m as dt,k as ut,f as ht}from"./index-bVOhw2NF.js";function ft(s,n){const h=[],x=[],y=[],p=[];for(let v=0;v<s.length;v++){const t=s[v],S=s[(v+1)%s.length];if(v===0)h.push(`M${t.x},${t.y}`),p.push({x:t.x,y:t.y});else{const b=s[v-1];if(Math.sqrt((t.x-b.x)**2+(t.y-b.y)**2)<=n)h.push(`L${t.x},${t.y}`),p.push({x:t.x,y:t.y});else{const w=t.x-b.x,l=t.y-b.y,k=Math.sqrt(w**2+l**2),L=w/k,A=l/k,I=S.x-t.x,M=S.y-t.y,E=Math.sqrt(I**2+M**2),X=I/E,Y=M/E,r=t.x-n*L,f=t.y-n*A,u=t.x+n*X,c=t.y+n*Y;v!==s.length-1?(h.push(`L${r},${f}`),h.push(`Q${t.x},${t.y}`),p.push({x:r,y:f}),u&&c&&(h.push(`${u},${c}`),p.push({x:u,y:c})),x.push(`M${r},${f}`),x.push(`Q${t.x},${t.y}`),y.push(r,f,t.x,t.y),u&&c&&(x.push(`${u},${c}`),y.push(u,c))):(h.push(`L${t.x},${t.y}`),p.push({x:t.x,y:t.y}))}}}return{path:h.join(" "),cornerPath:x.join(" "),rectPath:p,cornerPathArr:y}}function vt(s,n){return n.backgroundColor&&(s.fill=n.backgroundColor||"none"),n.gradientColor&&s.fill!==n.gradientColor&&(s.fillGradient=n.gradientColor),n.borderColor&&(s.stroke=n.borderColor),n.borderWidth&&(s["stroke-width"]=n.borderWidth),n.strokeLineCap&&(s["stroke-linecap"]=n.strokeLineCap),n.borderStyle&&(n.borderStyle==="solid"&&(s["stroke-dash-array"]="0",s["stroke-dasharray"]="0"),n.borderStyle==="dashed"&&(s["stroke-dash-array"]=`${n.strokeDashWidth},${n.strokeDashSpace}`,s["stroke-dasharray"]=`${n.strokeDashWidth},${n.strokeDashSpace}`),n.borderStyle==="dotted"&&(s["stroke-dash-array"]=`${n.strokeDashWidth},${n.strokeDashSpace}`,s["stroke-dasharray"]=`${n.strokeDashWidth},${n.strokeDashSpace}`),n.borderStyle==="hidden"&&(s.stroke=s.fill)),n.strokeDashoffset&&(s["stroke-dashoffset"]=n.strokeDashoffset),s}const pt=R({__name:"DragPoint",props:{lineId:null,point:null,pointIndex:null,points:null},emits:["updatePoint","deletePoint","pointDragEnd"],setup(s,{emit:n}){const h=s,x=n,y=Q("canvasRef"),p=C(()=>y.value.getBoundingClientRect()),v=Q("scaleRatio"),t=H(null),S=H("transform: translate(0px, 0px)"),b=H("30px"),_=H(!1),w={x:0,y:0};function l(r){const f=Number.parseInt(b.value),u=`${r.x-f/2}`,c=`${r.y-f/2}`;S.value=`transform: translate(${u}px, ${c}px)`,w.x=u,w.y=c,_.value=!0}J(()=>h.point,r=>{l(r)},{immediate:!0});let k=!1;function L(r){const{clientX:f,clientY:u}=r,c=(f-p.value.left)/(v.value/100),P=(u-p.value.top)/(v.value/100);x("updatePoint",{x:c,y:P,index:h.pointIndex})}function A(r){r.preventDefault()}function I(r){L(r)}function M(r){if(t.value){if(t.value.removeEventListener("drag",L),t.value.removeEventListener("dragover",A),t.value.removeEventListener("drop",I),t.value.removeEventListener("dragend",M),L(r),k){const f=[0,45,90,180,270,360],u=h.points[h.pointIndex-1],c=h.points[h.pointIndex];if(u){const P=c.x-u.x,W=c.y-u.y;let $=Math.atan2(W,P)*180/Math.PI;$<0&&($+=360);let D=0;for(const d of f)(!D||Math.abs($-d)<Math.abs($-D))&&(D=d);const o=Math.sqrt(P*P+W*W),i=D*Math.PI/180;c.x=u.x+o*Math.cos(i),c.y=u.y+o*Math.sin(i);const a=r.target.closest(".line-container");x("updatePoint",{x:c.x+a.offsetLeft,y:c.y+a.offsetTop,index:h.pointIndex})}}x("pointDragEnd")}}function E(r){k=r.ctrlKey,t.value&&(t.value.addEventListener("drag",L),t.value.addEventListener("dragover",A),t.value.addEventListener("drop",I),t.value.addEventListener("dragend",M))}function X(){x("deletePoint",h.pointIndex)}function Y(r){var $,D;const f=r.target.closest(".line-container"),{clientX:u,clientY:c}=r,P=(u-p.value.left)/(v.value/100)-f.offsetLeft,W=(c-p.value.top)/(v.value/100)-f.offsetTop;P-Number(w.x)<=20&&W-Number(w.y)<=20?($=t.value)==null||$.classList.add("hover-on"):(D=t.value)==null||D.classList.remove("hover-on")}return ot(()=>{t.value&&(t.value.addEventListener("mousemove",Y,!0),t.value.addEventListener("dragstart",E),t.value.addEventListener("dblclick",X))}),at(()=>{t.value&&(t.value.removeEventListener("mousemove",Y,!0),t.value.removeEventListener("dragstart",E),t.value.removeEventListener("dblclick",X))}),(r,f)=>it((m(),g("div",{ref_key:"el",ref:t,draggable:"true",class:"circlePointOverlay",style:Z(S.value)},null,4)),[[st,_.value]])}}),mt=tt(pt,[["__scopeId","data-v-e464e085"]]),xt=["width","height","viewBox"],yt=["offset","stop-color"],gt=["d","data-id","stroke-width","stroke"],kt=["data-id","d","stroke-width"],Pt=["d","stroke-width","stroke"],$t=["x","y","width","height","data-id","fill","transform"],bt=["r","fill"],_t=["path","dur"],wt=["href","width","x","y"],Dt=["path","begin","dur"],Lt=R({__name:"Index",props:{points:null,element:null,areaSelected:null,animCondition:{default:()=>[]},datasets:{type:[String,Boolean]}},emits:["updatePoint","deletePoint","updateLeftTop","addPoint"],setup(s,{emit:n}){rt(o=>({"746da88b":e(D)}));const h=s,x=n,y=H(),p=H(),{points:v,element:t,areaSelected:S,animCondition:b,datasets:_}=lt(h),w=C(()=>({position:"absolute",top:`${t.value.top}px`,left:`${t.value.left}px`,zIndex:0})),l=C(()=>t.value.props.options),k=C(()=>{const{path:o,cornerPath:i,rectPath:a,cornerPathArr:d}=ft(v.value,l.value.radius);return{path:o,cornerPath:i,rectPath:a,cornerPathArr:d}});function L(o,i){return Math.sqrt((i.x-o.x)**2+(i.y-o.y)**2)}function A(o,i){return{x:(o.x+i.x)/2,y:(o.y+i.y)/2}}function I(o,i){return Math.atan2(i.y-o.y,i.x-o.x)*180/Math.PI}const M=C(()=>{if(!t.value.props.options["is2.5d"])return[];const i=k.value.rectPath,a=[];for(let d=0;d<i.length;d+=2){const B=i[d],T=i[d+1],F=L(B,T),j=A(B,T),G=I(B,T),O=F,U=l.value.backgroundWidth,et=j.x-O/2,nt=j.y-U/2;a.push({x:et,y:nt,width:O,height:U,rotate:G})}return a});function E(){const{options:o}=t.value.props;if(o.isAnimation){if(b.value.length>0){const i=b.value[0];switch(typeof i.variable){case"object":return _.value>=i.variable[0]&&_.value<=i.variable[1];case"number":return _.value===i.variable;case"boolean":return i.variable===_.value;case"string":return i.variable===_.value;default:return!1}}return!0}return!1}const X=C(()=>{if(t.value.props.options){const{options:o}=t.value.props,i=vt({},o),a={"animation-timing-function":"linear","animation-iteration-count":"infinite"},{borderColor:d,strokeDashWidth:B,strokeDashWidth2:T,strokeDashSpace:F,animationName:j,animationDuration:G,animationReverse:O,animationStyle:U}=t.value.props.options;return U!=="custom"&&(a.stroke=d,a.strokeDashoffset="",a.strokeDasharray=`${B},${F},${T}`,a.animationName=j||"es_animate_dash",a.animationDuration=G||"20s",a.animationDirection=O?"reverse":""),{...i,fill:"none",style:E()?a:{}}}return{}});function Y(o){y.value&&x("updatePoint",o,{lineLeft:y.value.offsetLeft,lineTop:y.value.offsetTop})}function r(o){y.value&&x("addPoint",o,{lineLeft:y.value.offsetLeft,lineTop:y.value.offsetTop})}function f(o){x("deletePoint",o)}function u(){}const c=H(!1);function P(o){o.stopPropagation(),c.value=!0}J(()=>t.value.selected,o=>{o?c.value=!0:c.value=!1}),ct(p,o=>{o.target.classList.contains("circlePointOverlay")||S.value&&t.value.selected||(c.value=!1)});const W=C(()=>t.value.props.options.gradientBg),$=`${new Date().getTime()-0}`,D=C(()=>{const o=t.value.props.options.dropShadow;if(!o)return"";const{x:i,y:a,blur:d,color:B}=o;return`drop-shadow(${i}px ${a}px ${d}px ${B})`});return(o,i)=>(m(),g("div",{ref_key:"line",ref:y,class:"line-container",style:Z(e(w))},[e(t)?(m(),g("svg",{key:0,width:`${e(t).width}px`,height:`${e(t).height}px`,viewBox:`0 0 ${e(t).width} ${e(t).height}`,style:{overflow:"visible"}},[N("defs",null,[N("linearGradient",{id:$,x1:"0%",y1:"0%",x2:"0%",y2:"100%"},[(m(!0),g(q,null,z(e(W),(a,d)=>(m(),g("stop",{key:d,offset:`${a.pst}%`,"stop-color":a.color},null,8,yt))),128))])]),e(t).props.options["is2.5d"]?V("",!0):(m(),g("path",{key:0,class:"es-line-bg",d:e(k).path,"data-id":e(t).id,"stroke-width":e(t).props.options.backgroundWidth,stroke:e(t).props.options.backgroundColor,fill:"none",onClick:K(P,["self"])},null,8,gt)),N("path",dt({ref_key:"path",ref:p,class:"es-line","data-id":e(t).id,d:e(k).path},e(X),{fill:"none","stroke-width":e(t).props.options.borderWidth,onClick:K(P,["self"]),onDblclick:r}),null,16,kt),e(l).showCorner?(m(),g("path",{key:1,class:"es-line-corner",d:e(k).cornerPath,"stroke-width":e(l).cornerWidth,stroke:e(l).cornerBack,fill:"transparent"},null,8,Pt)):V("",!0),(m(!0),g(q,null,z(e(M),(a,d)=>(m(),g("rect",{key:d,x:a.x,y:a.y,width:a.width,height:a.height,stroke:"none","data-id":e(t).id,fill:`url(#${$})`,transform:`rotate(${a.rotate}, ${a.x+a.width/2}, ${a.y+a.height/2})`,class:ut(["es-line-rect",{"es-line-shadow":e(t).props.options.enableShadow}]),onClick:K(P,["self"]),onDblclick:r},null,42,$t))),128)),e(l).animationStyle==="waterPoint"&&e(l).circlePointMoving&&e(l).isAnimation?(m(),g("circle",{key:2,cx:"0",cy:"0",r:e(l).circlePointWidth/2,fill:e(l).circlePointBackground},[N("animateMotion",{path:e(k).path,dur:e(l).animationDuration,repeatCount:"indefinite",fill:"remove",rotate:"auto"},null,8,_t)],8,bt)):V("",!0),e(l).animationStyle==="custom"&&e(l).animationImage&&e(l).isAnimation?(m(!0),g(q,{key:3},z(e(l).animationImgStyle.repeat,(a,d)=>(m(),g("image",{key:d,href:e(l).animationImage,width:e(l).animationImgStyle.width,height:66,x:e(l).animationImgStyle.x,y:e(l).animationImgStyle.y},[N("animateMotion",{path:e(k).path,begin:`${d*e(l).animationImgStyle.interval}s`,dur:e(l).animationDuration,repeatCount:"indefinite",fill:"remove",rotate:"auto"},null,8,Dt)],8,wt))),128)):V("",!0)],8,xt)):V("",!0),c.value?(m(!0),g(q,{key:1},z(e(v),(a,d)=>(m(),ht(mt,{key:d,point:a,points:e(v),"point-index":d,"line-id":e(t).id,onUpdatePoint:Y,onDeletePoint:f,onPointDragEnd:u},null,8,["point","points","point-index","line-id"]))),128)):V("",!0)],4))}}),St=tt(Lt,[["__scopeId","data-v-10145587"]]);export{St as default};
|