geekin-devtoys 0.2.12 → 0.2.14-t1

package/lib/GPie3D/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("vue"),te=require("../_plugin-vue_export-helper-BHFhmbuH.js"),oe={class:"g-pie3d-tooltip__default"},ne={class:"g-pie3d-tooltip__name"},ae={class:"g-pie3d-tooltip__value"},le=s.defineComponent({__name:"index",props:{data:{default:()=>[]},config:{default:()=>({})},animation:{type:Boolean,default:!0}},emits:["slice-click"],setup(F,{emit:U}){const x=F,J=U,V={alpha:55,depth:26,startAngle:0,colors:["#22d3ee","#3b82f6","#8b5cf6","#06b6d4","#0ea5e9","#a855f7","#14b8a6"],textColor:"#cbd5e1",radiusRatio:.55,hoverDistance:14,showLabel:!0,showPercent:!0,labelFontSize:12,opacity:.7,showAura:!0,glowColor:""},n={...V,...x.config},T=s.ref(null),g=s.ref(null);let k=null,w=0,S=0,C=1,d=0,h=0,u=0,v=0,m=[],B=x.animation?0:1,E=null,z=x.animation;const D=s.ref(-1),$=s.ref(!1),G=s.ref(0),H=s.ref(0),_=s.ref(null),N=s.ref(0),O=e=>e*Math.PI/180,j=(e,i=0,o=0)=>({x:d+i+u*Math.cos(e),y:h+o+v*Math.sin(e)}),q=(e,i=0,o=0)=>({x:d+i+u*Math.cos(e),y:h+o+v*Math.sin(e)+n.depth}),I=()=>{if(!g.value||!T.value)return;const e=T.value,i=g.value;C=window.devicePixelRatio||1,w=e.clientWidth,S=e.clientHeight,i.width=w*C,i.height=S*C,i.style.width=w+"px",i.style.height=S+"px",k=i.getContext("2d"),k&&k.setTransform(C,0,0,C,0,0),d=w/2,h=S/2-n.depth/2;const o=n.showLabel?60:10,c=Math.min(w,S-n.depth-o)/2*n.radiusRatio*1.6;u=Math.max(20,c),v=u*Math.cos(O(n.alpha)),K(),z?Q():L()},K=()=>{m=[];const e=x.data.reduce((o,c)=>o+(c.value||0),0);if(e<=0)return;let i=-Math.PI/2+O(n.startAngle);x.data.forEach((o,c)=>{const r=o.value/e,f=r*Math.PI*2;m.push({data:o,index:c,color:o.color||n.colors[c%n.colors.length],startA:i,endA:i+f,midA:i+f/2,percent:r,hover:!1}),i+=f})},Q=()=>{B=0;const e=800,i=performance.now(),o=c=>{const r=Math.min(1,(c-i)/e);B=1-Math.pow(1-r,3),L(),r<1?E=requestAnimationFrame(o):(z=!1,E=null)};E=requestAnimationFrame(o)},M=(e,i)=>{let o=e.replace("#","");o.length===3&&(o=o.split("").map(t=>t+t).join(""));const c=parseInt(o.slice(0,2),16),r=parseInt(o.slice(2,4),16),f=parseInt(o.slice(4,6),16);return`rgba(${c},${r},${f},${i})`},L=()=>{if(!k)return;const e=k;if(e.clearRect(0,0,w,S),!m.length)return;const i=m[0]?.startA??0,o=Math.PI*2*B,c=i+o,r=m.map(t=>{const a=t.startA,l=Math.min(t.endA,c),p=l>a,y=t.hover?Math.cos(t.midA)*n.hoverDistance:0,A=t.hover?Math.sin(t.midA)*n.hoverDistance:0;return{...t,startA:a,endA:l,valid:p,ox:y,oy:A}});if(n.showAura){const t=e.createRadialGradient(d,h+n.depth,u*.1,d,h+n.depth,u*1.5);t.addColorStop(0,"rgba(6,182,212,0.15)"),t.addColorStop(.4,"rgba(59,130,246,0.08)"),t.addColorStop(.8,"rgba(139,92,246,0.03)"),t.addColorStop(1,"rgba(0,0,0,0)"),e.beginPath(),e.ellipse(d,h+n.depth,u*1.5,v*.9,0,0,Math.PI*2),e.fillStyle=t,e.fill(),e.strokeStyle="rgba(56,189,248,0.08)",e.lineWidth=1;for(let a=3;a>=1;a--){const l=u*(.3+a*.25);e.beginPath(),e.ellipse(d,h+n.depth,l,l*(v/u),0,0,Math.PI*2),e.stroke()}}const f=Math.PI/120;for(const t of r){if(!t.valid)continue;let a=t.startA;const l=n.glowColor||t.color;for(;a<t.endA;){const p=Math.min(a+f,t.endA),y=(a+p)/2;if(Math.sin(y)>0){const A=j(a,t.ox,t.oy),P=j(p,t.ox,t.oy),b=q(p,t.ox,t.oy),W=q(a,t.ox,t.oy);e.fillStyle=M(l,n.opacity*.4),e.beginPath(),e.moveTo(A.x,A.y),e.lineTo(P.x,P.y),e.lineTo(b.x,b.y),e.lineTo(W.x,W.y),e.closePath(),e.fill(),e.strokeStyle=M(l,.7),e.lineWidth=.8,e.beginPath(),e.moveTo(W.x,W.y),e.lineTo(b.x,b.y),e.stroke()}a=p}}for(const t of r){if(!t.valid)continue;const a=[];Math.sin(t.startA)>.001&&a.push({a:t.startA}),Math.sin(t.endA)>.001&&a.push({a:t.endA});const l=n.glowColor||t.color;for(const p of a){const y={x:d+t.ox,y:h+t.oy},A={x:y.x,y:y.y+n.depth},P=j(p.a,t.ox,t.oy),b=q(p.a,t.ox,t.oy);e.fillStyle=M(l,n.opacity*.5),e.beginPath(),e.moveTo(y.x,y.y),e.lineTo(P.x,P.y),e.lineTo(b.x,b.y),e.lineTo(A.x,A.y),e.closePath(),e.fill(),e.strokeStyle=M(l,.8),e.lineWidth=.8,e.beginPath(),e.moveTo(P.x,P.y),e.lineTo(b.x,b.y),e.stroke()}}for(const t of r){if(!t.valid)continue;const a=n.glowColor||t.color;t.hover&&(e.save(),e.shadowColor=a,e.shadowBlur=12,e.beginPath(),e.moveTo(d+t.ox,h+t.oy),e.ellipse(d+t.ox,h+t.oy,u,v,0,t.startA,t.endA),e.closePath(),e.fillStyle=M(a,.08),e.fill(),e.restore()),e.beginPath(),e.moveTo(d+t.ox,h+t.oy),e.ellipse(d+t.ox,h+t.oy,u,v,0,t.startA,t.endA),e.closePath();const l=e.createRadialGradient(d+t.ox-u*.2,h+t.oy-v*.2,0,d+t.ox,h+t.oy,u*1.05);l.addColorStop(0,M(a,n.opacity*.95)),l.addColorStop(.6,M(a,n.opacity*.8)),l.addColorStop(1,M(a,n.opacity*.6)),e.fillStyle=l,e.fill(),e.strokeStyle=M(a,.95),e.lineWidth=t.hover?1.4:.8,e.stroke()}if(n.showLabel&&B>=.999){e.font=`${n.labelFontSize}px Arial, sans-serif`,e.fillStyle=n.textColor,e.strokeStyle="rgba(0,0,0,0.25)",e.lineWidth=1;for(const t of r){if(!t.valid)continue;const a={x:d+t.ox+u*1.02*Math.cos(t.midA),y:h+t.oy+v*1.02*Math.sin(t.midA)},l={x:d+t.ox+u*1.18*Math.cos(t.midA),y:h+t.oy+v*1.18*Math.sin(t.midA)},p=Math.cos(t.midA)>=0,y={x:l.x+(p?14:-14)};e.beginPath(),e.moveTo(a.x,a.y),e.lineTo(l.x,l.y),e.lineTo(y.x,l.y),e.stroke(),e.textAlign=p?"left":"right",e.textBaseline="middle";const A=n.showPercent?`${t.data.name} ${(t.percent*100).toFixed(1)}%`:`${t.data.name}`;e.fillText(A,y.x+(p?2:-2),l.y)}}},X=(e,i)=>{for(let o=0;o<m.length;o++){const c=m[o],r=c.hover?Math.cos(c.midA)*n.hoverDistance:0,f=c.hover?Math.sin(c.midA)*n.hoverDistance:0,t=(e-(d+r))/u,a=(i-(h+f))/v;if(t*t+a*a>1)continue;let l=Math.atan2((i-(h+f))/v,(e-(d+r))/u);for(;l<c.startA;)l+=Math.PI*2;for(;l>c.startA+Math.PI*2;)l-=Math.PI*2;if(l>=c.startA&&l<=c.endA)return o}return-1},Z=e=>{if(!g.value)return;const i=g.value.getBoundingClientRect(),o=e.clientX-i.left,c=e.clientY-i.top,r=X(o,c);if(r!==D.value&&(D.value=r,m.forEach((f,t)=>f.hover=t===r),L()),r>=0){const f=m[r];$.value=!0,_.value=f.data,N.value=f.percent;const t=T.value?.clientWidth||0,a=T.value?.clientHeight||0,l=Math.min(o+12,t-140),p=Math.min(c+12,a-60);G.value=Math.max(0,l),H.value=Math.max(0,p)}else $.value=!1,_.value=null},ee=()=>{D.value!==-1&&(D.value=-1,m.forEach(e=>e.hover=!1),L()),$.value=!1,_.value=null},Y=e=>{if(!g.value)return;const i=g.value.getBoundingClientRect(),o=X(e.clientX-i.left,e.clientY-i.top);o>=0&&J("slice-click",m[o].data,o)};return s.watch(()=>x.data,()=>{Object.assign(n,V,x.config),z=x.animation,I()},{deep:!0}),s.watch(()=>x.config,()=>{Object.assign(n,V,x.config),I()},{deep:!0}),s.onMounted(()=>{I(),window.addEventListener("resize",I),g.value?.addEventListener("click",Y)}),s.onUnmounted(()=>{window.removeEventListener("resize",I),g.value?.removeEventListener("click",Y),E&&cancelAnimationFrame(E)}),(e,i)=>(s.openBlock(),s.createElementBlock("div",{class:"g-pie3d-container",ref_key:"containerRef",ref:T},[s.createElementVNode("canvas",{ref_key:"canvasRef",ref:g,onMousemove:Z,onMouseleave:ee},null,544),$.value?(s.openBlock(),s.createElementBlock("div",{key:0,class:"g-pie3d-tooltip",style:s.normalizeStyle({left:`${G.value}px`,top:`${H.value}px`})},[s.renderSlot(e.$slots,"tooltip",{data:_.value,percent:N.value},()=>[s.createElementVNode("div",oe,[s.createElementVNode("p",ne,s.toDisplayString(_.value?.name),1),s.createElementVNode("p",ae,s.toDisplayString(_.value?.value)+" ("+s.toDisplayString((N.value*100).toFixed(1))+"%) ",1)])],!0)],4)):s.createCommentVNode("",!0)],512))}}),R=te._export_sfc(le,[["__scopeId","data-v-f18ddc7e"]]);R.install=F=>{F.component(R.name,R)};exports.GPie3D=R;exports.default=R;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("vue"),ut=require("../_plugin-vue_export-helper-BHFhmbuH.js"),pt={class:"g-pie3d-tooltip__default"},vt={class:"g-pie3d-tooltip__name"},gt={class:"g-pie3d-tooltip__value"},yt=260,mt=h.defineComponent({__name:"index",props:{data:{default:()=>[]},config:{default:()=>({})},animation:{type:Boolean,default:!0}},emits:["slice-click"],setup(z,{emit:nt}){const P=z,at=nt,V={alpha:55,depth:26,startAngle:0,colors:["#22d3ee","#3b82f6","#8b5cf6","#06b6d4","#0ea5e9","#a855f7","#14b8a6"],textColor:"#cbd5e1",radiusRatio:.55,hoverDistance:14,showLabel:!0,showPercent:!0,labelFontSize:12,opacity:.7,showAura:!0,glowColor:"",labelLineColor:"auto",labelLineWidth:1},a={...V,...P.config},R=h.ref(null),T=h.ref(null);let E=null,C=0,_=0,L=1,p=0,u=0,v=0,x=0,M=[],$=P.animation?0:1,Y=null,N=P.animation,k=null,X=0;const B=h.ref(-1),D=h.ref(!1),U=h.ref(0),J=h.ref(0),I=h.ref(null),q=h.ref(0),K=t=>t*Math.PI/180,O=(t,l=0,n=0)=>({x:p+l+v*Math.cos(t),y:u+n+x*Math.sin(t)}),j=(t,l=0,n=0)=>({x:p+l+v*Math.cos(t),y:u+n+x*Math.sin(t)+a.depth}),F=()=>{if(!T.value||!R.value)return;const t=R.value,l=T.value;L=window.devicePixelRatio||1,C=t.clientWidth,_=t.clientHeight,l.width=C*L,l.height=_*L,l.style.width=C+"px",l.style.height=_+"px",E=l.getContext("2d"),E&&E.setTransform(L,0,0,L,0,0),p=C/2,u=_/2-a.depth/2;const n=a.showLabel?60:10,s=Math.min(C,_-a.depth-n)/2*a.radiusRatio*1.6;v=Math.max(20,s),x=v*Math.cos(K(a.alpha)),lt(),N?st():G()},lt=()=>{M=[];const t=P.data.reduce((n,s)=>n+(s.value||0),0);if(t<=0)return;let l=-Math.PI/2+K(a.startAngle);P.data.forEach((n,s)=>{const i=n.value/t,d=i*Math.PI*2;M.push({data:n,index:s,color:n.color||a.colors[s%a.colors.length],startA:l,endA:l+d,midA:l+d/2,percent:i,hover:!1,hoverProgress:0}),l+=d})},st=()=>{$=0;const t=800,l=performance.now(),n=s=>{const i=Math.min(1,(s-l)/t);$=1-Math.pow(1-i,3),G(),i<1?Y=requestAnimationFrame(n):(N=!1,Y=null)};Y=requestAnimationFrame(n)},it=t=>1-Math.pow(1-t,3),Q=t=>{const l=X===0?16:t-X;X=t;const n=l/yt;let s=!1;for(const i of M){const d=i.hover?1:0;if(i.hoverProgress===d)continue;const e=d>i.hoverProgress?1:-1;i.hoverProgress+=e*n,(e>0&&i.hoverProgress>=d||e<0&&i.hoverProgress<=d)&&(i.hoverProgress=d),i.hoverProgress!==d&&(s=!0)}G(),s?k=requestAnimationFrame(Q):(k=null,X=0)},Z=()=>{k==null&&(X=0,k=requestAnimationFrame(Q))},S=(t,l)=>{let n=t.replace("#","");n.length===3&&(n=n.split("").map(e=>e+e).join(""));const s=parseInt(n.slice(0,2),16),i=parseInt(n.slice(2,4),16),d=parseInt(n.slice(4,6),16);return`rgba(${s},${i},${d},${l})`},G=()=>{if(!E)return;const t=E;if(t.clearRect(0,0,C,_),!M.length)return;const l=M[0]?.startA??0,n=Math.PI*2*$,s=l+n,i=M.map(e=>{const r=e.startA,f=Math.min(e.endA,s),y=f>r,g=it(Math.max(0,Math.min(1,e.hoverProgress))),w=Math.cos(e.midA)*a.hoverDistance*g,b=Math.sin(e.midA)*a.hoverDistance*g;return{...e,startA:r,endA:f,valid:y,ox:w,oy:b,hp:g}});if(a.showAura){const e=t.createRadialGradient(p,u+a.depth,v*.1,p,u+a.depth,v*1.5);e.addColorStop(0,"rgba(6,182,212,0.15)"),e.addColorStop(.4,"rgba(59,130,246,0.08)"),e.addColorStop(.8,"rgba(139,92,246,0.03)"),e.addColorStop(1,"rgba(0,0,0,0)"),t.beginPath(),t.ellipse(p,u+a.depth,v*1.5,x*.9,0,0,Math.PI*2),t.fillStyle=e,t.fill(),t.strokeStyle="rgba(56,189,248,0.08)",t.lineWidth=1;for(let r=3;r>=1;r--){const f=v*(.3+r*.25);t.beginPath(),t.ellipse(p,u+a.depth,f,f*(x/v),0,0,Math.PI*2),t.stroke()}}const d=Math.PI/120;for(const e of i){if(!e.valid)continue;let r=e.startA;const f=a.glowColor||e.color;for(;r<e.endA;){const y=Math.min(r+d,e.endA),g=(r+y)/2;if(Math.sin(g)>0){const w=O(r,e.ox,e.oy),b=O(y,e.ox,e.oy),o=j(y,e.ox,e.oy),m=j(r,e.ox,e.oy);t.fillStyle=S(f,a.opacity*.4),t.beginPath(),t.moveTo(w.x,w.y),t.lineTo(b.x,b.y),t.lineTo(o.x,o.y),t.lineTo(m.x,m.y),t.closePath(),t.fill(),t.strokeStyle=S(f,.7),t.lineWidth=.8,t.beginPath(),t.moveTo(m.x,m.y),t.lineTo(o.x,o.y),t.stroke()}r=y}}for(const e of i){if(!e.valid)continue;const r=[];Math.sin(e.startA)>.001&&r.push({a:e.startA}),Math.sin(e.endA)>.001&&r.push({a:e.endA});const f=a.glowColor||e.color;for(const y of r){const g={x:p+e.ox,y:u+e.oy},w={x:g.x,y:g.y+a.depth},b=O(y.a,e.ox,e.oy),o=j(y.a,e.ox,e.oy);t.fillStyle=S(f,a.opacity*.5),t.beginPath(),t.moveTo(g.x,g.y),t.lineTo(b.x,b.y),t.lineTo(o.x,o.y),t.lineTo(w.x,w.y),t.closePath(),t.fill(),t.strokeStyle=S(f,.8),t.lineWidth=.8,t.beginPath(),t.moveTo(b.x,b.y),t.lineTo(o.x,o.y),t.stroke()}}for(const e of i){if(!e.valid)continue;const r=a.glowColor||e.color;e.hp>.01&&(t.save(),t.shadowColor=r,t.shadowBlur=12*e.hp,t.beginPath(),t.moveTo(p+e.ox,u+e.oy),t.ellipse(p+e.ox,u+e.oy,v,x,0,e.startA,e.endA),t.closePath(),t.fillStyle=S(r,.08*e.hp),t.fill(),t.restore()),t.beginPath(),t.moveTo(p+e.ox,u+e.oy),t.ellipse(p+e.ox,u+e.oy,v,x,0,e.startA,e.endA),t.closePath();const f=t.createRadialGradient(p+e.ox-v*.2,u+e.oy-x*.2,0,p+e.ox,u+e.oy,v*1.05);f.addColorStop(0,S(r,a.opacity*.95)),f.addColorStop(.6,S(r,a.opacity*.8)),f.addColorStop(1,S(r,a.opacity*.6)),t.fillStyle=f,t.fill(),t.strokeStyle=S(r,.95),t.lineWidth=.8+.6*e.hp,t.stroke()}if(a.showLabel&&$>=.999){t.font=`${a.labelFontSize}px Arial, sans-serif`,t.textBaseline="middle";const e=[],r=[],f=a.labelFontSize+6,y=14,g=4;for(const o of i){if(!o.valid)continue;const m=Math.cos(o.midA)>=0,A=p+o.ox+v*1.02*Math.cos(o.midA),c=u+o.oy+x*1.02*Math.sin(o.midA),H=u+o.oy+x*1.18*Math.sin(o.midA),ht=a.showPercent?`${o.data.name} ${(o.percent*100).toFixed(1)}%`:`${o.data.name}`,dt=!a.labelLineColor||a.labelLineColor==="auto"?a.glowColor||o.color:a.labelLineColor,ft={slice:o,text:ht,isRight:m,anchorX:A,anchorY:c,targetY:H,y:H,color:dt};(m?r:e).push(ft)}const w=o=>{if(!o.length)return;o.sort((c,H)=>c.targetY-H.targetY);const m=g+a.labelFontSize/2,A=_-g-a.labelFontSize/2;for(let c=0;c<o.length;c++)c===0?o[c].y=Math.max(m,o[c].targetY):o[c].y=Math.max(o[c].targetY,o[c-1].y+f);if(o[o.length-1].y>A){o[o.length-1].y=A;for(let c=o.length-2;c>=0;c--)o[c].y>o[c+1].y-f&&(o[c].y=o[c+1].y-f)}for(let c=0;c<o.length;c++)o[c].y<m&&(o[c].y=m)};w(e),w(r),t.lineWidth=a.labelLineWidth;const b=[...e,...r];for(const o of b){const m=t.measureText(o.text).width;let A;if(o.isRight){const c=Math.min(Math.max(o.anchorX+6,o.anchorX+Math.abs(o.targetY-o.y)*.2+6),C-g-m-y);A=c+y,t.strokeStyle=o.color,t.beginPath(),t.moveTo(o.anchorX,o.anchorY),t.lineTo(c,o.y),t.lineTo(A,o.y),t.stroke(),t.fillStyle=a.textColor,t.textAlign="left",t.fillText(o.text,A+2,o.y)}else{const c=Math.max(Math.min(o.anchorX-6,o.anchorX-Math.abs(o.targetY-o.y)*.2-6),g+m+y);A=c-y,t.strokeStyle=o.color,t.beginPath(),t.moveTo(o.anchorX,o.anchorY),t.lineTo(c,o.y),t.lineTo(A,o.y),t.stroke(),t.fillStyle=a.textColor,t.textAlign="right",t.fillText(o.text,A-2,o.y)}}}},tt=(t,l)=>{for(let n=0;n<M.length;n++){const s=M[n],i=(t-p)/v,d=(l-u)/x;if(i*i+d*d>1)continue;let e=Math.atan2((l-u)/x,(t-p)/v);for(;e<s.startA;)e+=Math.PI*2;for(;e>s.startA+Math.PI*2;)e-=Math.PI*2;if(e>=s.startA&&e<=s.endA)return n}return-1},et=t=>{const l=T.value,n=l.getBoundingClientRect(),s=n.width/(l.clientWidth||n.width)||1,i=n.height/(l.clientHeight||n.height)||1;return{mx:(t.clientX-n.left)/s,my:(t.clientY-n.top)/i}},rt=t=>{if(!T.value)return;const{mx:l,my:n}=et(t),s=tt(l,n);if(s!==B.value&&(B.value=s,M.forEach((i,d)=>i.hover=d===s),Z()),s>=0){const i=M[s];D.value=!0,I.value=i.data,q.value=i.percent;const d=R.value?.clientWidth||0,e=R.value?.clientHeight||0,r=Math.min(l+12,d-140),f=Math.min(n+12,e-60);U.value=Math.max(0,r),J.value=Math.max(0,f)}else D.value=!1,I.value=null},ct=()=>{B.value!==-1&&(B.value=-1,M.forEach(t=>t.hover=!1),Z()),D.value=!1,I.value=null},ot=t=>{if(!T.value)return;const{mx:l,my:n}=et(t),s=tt(l,n);s>=0&&at("slice-click",M[s].data,s)};return h.watch(()=>P.data,()=>{Object.assign(a,V,P.config),N=P.animation,F()},{deep:!0}),h.watch(()=>P.config,()=>{Object.assign(a,V,P.config),F()},{deep:!0}),h.onMounted(()=>{F(),window.addEventListener("resize",F),T.value?.addEventListener("click",ot)}),h.onUnmounted(()=>{window.removeEventListener("resize",F),T.value?.removeEventListener("click",ot),Y&&cancelAnimationFrame(Y),k&&cancelAnimationFrame(k)}),(t,l)=>(h.openBlock(),h.createElementBlock("div",{class:"g-pie3d-container",ref_key:"containerRef",ref:R},[h.createElementVNode("canvas",{ref_key:"canvasRef",ref:T,onMousemove:rt,onMouseleave:ct},null,544),D.value?(h.openBlock(),h.createElementBlock("div",{key:0,class:"g-pie3d-tooltip",style:h.normalizeStyle({left:`${U.value}px`,top:`${J.value}px`})},[h.renderSlot(t.$slots,"tooltip",{data:I.value,percent:q.value},()=>[h.createElementVNode("div",pt,[h.createElementVNode("p",vt,h.toDisplayString(I.value?.name),1),h.createElementVNode("p",gt,h.toDisplayString(I.value?.value)+" ("+h.toDisplayString((q.value*100).toFixed(1))+"%) ",1)])],!0)],4)):h.createCommentVNode("",!0)],512))}}),W=ut._export_sfc(mt,[["__scopeId","data-v-16239a65"]]);W.install=z=>{z.component(W.name,W)};exports.GPie3D=W;exports.default=W;

package/lib/GPie3D/index.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as it, ref as b, watch as K, onMounted as st, onUnmounted as ct, createElementBlock as Q, openBlock as Z, createElementVNode as W, createCommentVNode as rt, normalizeStyle as dt, renderSlot as ht, toDisplayString as X } from "vue";
-import { _ as ut } from "../_plugin-vue_export-helper-CHgC5LLL.mjs";
-const pt = { class: "g-pie3d-tooltip__default" }, ft = { class: "g-pie3d-tooltip__name" }, vt = { class: "g-pie3d-tooltip__value" }, mt = /* @__PURE__ */ it({
+import { defineComponent as mt, ref as T, watch as lt, onMounted as xt, onUnmounted as Mt, createElementBlock as st, openBlock as it, createElementVNode as H, createCommentVNode as bt, normalizeStyle as At, renderSlot as Pt, toDisplayString as U } from "vue";
+import { _ as wt } from "../_plugin-vue_export-helper-CHgC5LLL.mjs";
+const St = { class: "g-pie3d-tooltip__default" }, Tt = { class: "g-pie3d-tooltip__name" }, Ct = { class: "g-pie3d-tooltip__value" }, _t = 260, kt = /* @__PURE__ */ mt({
   __name: "index",
   props: {
     data: { default: () => [] },
@@ -8,8 +8,8 @@ const pt = { class: "g-pie3d-tooltip__default" }, ft = { class: "g-pie3d-tooltip
     animation: { type: Boolean, default: !0 }
   },
   emits: ["slice-click"],
-  setup(F, { emit: tt }) {
-    const x = F, et = tt, z = {
+  setup(D, { emit: rt }) {
+    const A = D, ct = rt, O = {
       alpha: 55,
       depth: 26,
       startAngle: 0,
@@ -22,206 +22,262 @@ const pt = { class: "g-pie3d-tooltip__default" }, ft = { class: "g-pie3d-tooltip
       labelFontSize: 12,
       opacity: 0.7,
       showAura: !0,
-      glowColor: ""
-    }, n = { ...z, ...x.config }, T = b(null), y = b(null);
-    let C = null, P = 0, S = 0, k = 1, r = 0, d = 0, h = 0, f = 0, v = [], E = x.animation ? 0 : 1, I = null, j = x.animation;
-    const $ = b(-1), B = b(!1), q = b(0), N = b(0), _ = b(null), G = b(0), O = (t) => t * Math.PI / 180, H = (t, i = 0, o = 0) => ({
-      x: r + i + h * Math.cos(t),
-      y: d + o + f * Math.sin(t)
-    }), V = (t, i = 0, o = 0) => ({
-      x: r + i + h * Math.cos(t),
-      y: d + o + f * Math.sin(t) + n.depth
-    }), R = () => {
-      if (!y.value || !T.value) return;
-      const t = T.value, i = y.value;
-      k = window.devicePixelRatio || 1, P = t.clientWidth, S = t.clientHeight, i.width = P * k, i.height = S * k, i.style.width = P + "px", i.style.height = S + "px", C = i.getContext("2d"), C && C.setTransform(k, 0, 0, k, 0, 0), r = P / 2, d = S / 2 - n.depth / 2;
-      const o = n.showLabel ? 60 : 10, s = Math.min(P, S - n.depth - o) / 2 * n.radiusRatio * 1.6;
-      h = Math.max(20, s), f = h * Math.cos(O(n.alpha)), ot(), j ? nt() : D();
-    }, ot = () => {
-      v = [];
-      const t = x.data.reduce((o, s) => o + (s.value || 0), 0);
+      glowColor: "",
+      labelLineColor: "auto",
+      labelLineWidth: 1
+    }, a = { ...O, ...A.config }, R = T(null), S = T(null);
+    let L = null, C = 0, _ = 0, Y = 1, u = 0, f = 0, p = 0, m = 0, x = [], W = A.animation ? 0 : 1, X = null, q = A.animation, k = null, F = 0;
+    const $ = T(-1), z = T(!1), K = T(0), Q = T(0), I = T(null), N = T(0), Z = (t) => t * Math.PI / 180, V = (t, l = 0, n = 0) => ({
+      x: u + l + p * Math.cos(t),
+      y: f + n + m * Math.sin(t)
+    }), j = (t, l = 0, n = 0) => ({
+      x: u + l + p * Math.cos(t),
+      y: f + n + m * Math.sin(t) + a.depth
+    }), E = () => {
+      if (!S.value || !R.value) return;
+      const t = R.value, l = S.value;
+      Y = window.devicePixelRatio || 1, C = t.clientWidth, _ = t.clientHeight, l.width = C * Y, l.height = _ * Y, l.style.width = C + "px", l.style.height = _ + "px", L = l.getContext("2d"), L && L.setTransform(Y, 0, 0, Y, 0, 0), u = C / 2, f = _ / 2 - a.depth / 2;
+      const n = a.showLabel ? 60 : 10, s = Math.min(C, _ - a.depth - n) / 2 * a.radiusRatio * 1.6;
+      p = Math.max(20, s), m = p * Math.cos(Z(a.alpha)), ht(), q ? dt() : G();
+    }, ht = () => {
+      x = [];
+      const t = A.data.reduce((n, s) => n + (s.value || 0), 0);
       if (t <= 0) return;
-      let i = -Math.PI / 2 + O(n.startAngle);
-      x.data.forEach((o, s) => {
-        const c = o.value / t, u = c * Math.PI * 2;
-        v.push({
-          data: o,
+      let l = -Math.PI / 2 + Z(a.startAngle);
+      A.data.forEach((n, s) => {
+        const i = n.value / t, h = i * Math.PI * 2;
+        x.push({
+          data: n,
           index: s,
-          color: o.color || n.colors[s % n.colors.length],
-          startA: i,
-          endA: i + u,
-          midA: i + u / 2,
-          percent: c,
-          hover: !1
-        }), i += u;
+          color: n.color || a.colors[s % a.colors.length],
+          startA: l,
+          endA: l + h,
+          midA: l + h / 2,
+          percent: i,
+          hover: !1,
+          hoverProgress: 0
+        }), l += h;
       });
-    }, nt = () => {
-      E = 0;
-      const t = 800, i = performance.now(), o = (s) => {
-        const c = Math.min(1, (s - i) / t);
-        E = 1 - Math.pow(1 - c, 3), D(), c < 1 ? I = requestAnimationFrame(o) : (j = !1, I = null);
+    }, dt = () => {
+      W = 0;
+      const t = 800, l = performance.now(), n = (s) => {
+        const i = Math.min(1, (s - l) / t);
+        W = 1 - Math.pow(1 - i, 3), G(), i < 1 ? X = requestAnimationFrame(n) : (q = !1, X = null);
       };
-      I = requestAnimationFrame(o);
-    }, g = (t, i) => {
-      let o = t.replace("#", "");
-      o.length === 3 && (o = o.split("").map((e) => e + e).join(""));
-      const s = parseInt(o.slice(0, 2), 16), c = parseInt(o.slice(2, 4), 16), u = parseInt(o.slice(4, 6), 16);
-      return `rgba(${s},${c},${u},${i})`;
-    }, D = () => {
-      if (!C) return;
-      const t = C;
-      if (t.clearRect(0, 0, P, S), !v.length) return;
-      const i = v[0]?.startA ?? 0, o = Math.PI * 2 * E, s = i + o, c = v.map((e) => {
-        const a = e.startA, l = Math.min(e.endA, s), p = l > a, m = e.hover ? Math.cos(e.midA) * n.hoverDistance : 0, M = e.hover ? Math.sin(e.midA) * n.hoverDistance : 0;
-        return { ...e, startA: a, endA: l, valid: p, ox: m, oy: M };
+      X = requestAnimationFrame(n);
+    }, ft = (t) => 1 - Math.pow(1 - t, 3), tt = (t) => {
+      const l = F === 0 ? 16 : t - F;
+      F = t;
+      const n = l / _t;
+      let s = !1;
+      for (const i of x) {
+        const h = i.hover ? 1 : 0;
+        if (i.hoverProgress === h) continue;
+        const e = h > i.hoverProgress ? 1 : -1;
+        i.hoverProgress += e * n, (e > 0 && i.hoverProgress >= h || e < 0 && i.hoverProgress <= h) && (i.hoverProgress = h), i.hoverProgress !== h && (s = !0);
+      }
+      G(), s ? k = requestAnimationFrame(tt) : (k = null, F = 0);
+    }, et = () => {
+      k == null && (F = 0, k = requestAnimationFrame(tt));
+    }, w = (t, l) => {
+      let n = t.replace("#", "");
+      n.length === 3 && (n = n.split("").map((e) => e + e).join(""));
+      const s = parseInt(n.slice(0, 2), 16), i = parseInt(n.slice(2, 4), 16), h = parseInt(n.slice(4, 6), 16);
+      return `rgba(${s},${i},${h},${l})`;
+    }, G = () => {
+      if (!L) return;
+      const t = L;
+      if (t.clearRect(0, 0, C, _), !x.length) return;
+      const l = x[0]?.startA ?? 0, n = Math.PI * 2 * W, s = l + n, i = x.map((e) => {
+        const r = e.startA, d = Math.min(e.endA, s), g = d > r, v = ft(Math.max(0, Math.min(1, e.hoverProgress))), P = Math.cos(e.midA) * a.hoverDistance * v, M = Math.sin(e.midA) * a.hoverDistance * v;
+        return { ...e, startA: r, endA: d, valid: g, ox: P, oy: M, hp: v };
       });
-      if (n.showAura) {
+      if (a.showAura) {
         const e = t.createRadialGradient(
-          r,
-          d + n.depth,
-          h * 0.1,
-          r,
-          d + n.depth,
-          h * 1.5
+          u,
+          f + a.depth,
+          p * 0.1,
+          u,
+          f + a.depth,
+          p * 1.5
         );
-        e.addColorStop(0, "rgba(6,182,212,0.15)"), e.addColorStop(0.4, "rgba(59,130,246,0.08)"), e.addColorStop(0.8, "rgba(139,92,246,0.03)"), e.addColorStop(1, "rgba(0,0,0,0)"), t.beginPath(), t.ellipse(r, d + n.depth, h * 1.5, f * 0.9, 0, 0, Math.PI * 2), t.fillStyle = e, t.fill(), t.strokeStyle = "rgba(56,189,248,0.08)", t.lineWidth = 1;
-        for (let a = 3; a >= 1; a--) {
-          const l = h * (0.3 + a * 0.25);
-          t.beginPath(), t.ellipse(r, d + n.depth, l, l * (f / h), 0, 0, Math.PI * 2), t.stroke();
+        e.addColorStop(0, "rgba(6,182,212,0.15)"), e.addColorStop(0.4, "rgba(59,130,246,0.08)"), e.addColorStop(0.8, "rgba(139,92,246,0.03)"), e.addColorStop(1, "rgba(0,0,0,0)"), t.beginPath(), t.ellipse(u, f + a.depth, p * 1.5, m * 0.9, 0, 0, Math.PI * 2), t.fillStyle = e, t.fill(), t.strokeStyle = "rgba(56,189,248,0.08)", t.lineWidth = 1;
+        for (let r = 3; r >= 1; r--) {
+          const d = p * (0.3 + r * 0.25);
+          t.beginPath(), t.ellipse(u, f + a.depth, d, d * (m / p), 0, 0, Math.PI * 2), t.stroke();
         }
       }
-      const u = Math.PI / 120;
-      for (const e of c) {
+      const h = Math.PI / 120;
+      for (const e of i) {
         if (!e.valid) continue;
-        let a = e.startA;
-        const l = n.glowColor || e.color;
-        for (; a < e.endA; ) {
-          const p = Math.min(a + u, e.endA), m = (a + p) / 2;
-          if (Math.sin(m) > 0) {
-            const M = H(a, e.ox, e.oy), w = H(p, e.ox, e.oy), A = V(p, e.ox, e.oy), L = V(a, e.ox, e.oy);
-            t.fillStyle = g(l, n.opacity * 0.4), t.beginPath(), t.moveTo(M.x, M.y), t.lineTo(w.x, w.y), t.lineTo(A.x, A.y), t.lineTo(L.x, L.y), t.closePath(), t.fill(), t.strokeStyle = g(l, 0.7), t.lineWidth = 0.8, t.beginPath(), t.moveTo(L.x, L.y), t.lineTo(A.x, A.y), t.stroke();
+        let r = e.startA;
+        const d = a.glowColor || e.color;
+        for (; r < e.endA; ) {
+          const g = Math.min(r + h, e.endA), v = (r + g) / 2;
+          if (Math.sin(v) > 0) {
+            const P = V(r, e.ox, e.oy), M = V(g, e.ox, e.oy), o = j(g, e.ox, e.oy), y = j(r, e.ox, e.oy);
+            t.fillStyle = w(d, a.opacity * 0.4), t.beginPath(), t.moveTo(P.x, P.y), t.lineTo(M.x, M.y), t.lineTo(o.x, o.y), t.lineTo(y.x, y.y), t.closePath(), t.fill(), t.strokeStyle = w(d, 0.7), t.lineWidth = 0.8, t.beginPath(), t.moveTo(y.x, y.y), t.lineTo(o.x, o.y), t.stroke();
           }
-          a = p;
+          r = g;
         }
       }
-      for (const e of c) {
+      for (const e of i) {
         if (!e.valid) continue;
-        const a = [];
-        Math.sin(e.startA) > 1e-3 && a.push({ a: e.startA }), Math.sin(e.endA) > 1e-3 && a.push({ a: e.endA });
-        const l = n.glowColor || e.color;
-        for (const p of a) {
-          const m = { x: r + e.ox, y: d + e.oy }, M = { x: m.x, y: m.y + n.depth }, w = H(p.a, e.ox, e.oy), A = V(p.a, e.ox, e.oy);
-          t.fillStyle = g(l, n.opacity * 0.5), t.beginPath(), t.moveTo(m.x, m.y), t.lineTo(w.x, w.y), t.lineTo(A.x, A.y), t.lineTo(M.x, M.y), t.closePath(), t.fill(), t.strokeStyle = g(l, 0.8), t.lineWidth = 0.8, t.beginPath(), t.moveTo(w.x, w.y), t.lineTo(A.x, A.y), t.stroke();
+        const r = [];
+        Math.sin(e.startA) > 1e-3 && r.push({ a: e.startA }), Math.sin(e.endA) > 1e-3 && r.push({ a: e.endA });
+        const d = a.glowColor || e.color;
+        for (const g of r) {
+          const v = { x: u + e.ox, y: f + e.oy }, P = { x: v.x, y: v.y + a.depth }, M = V(g.a, e.ox, e.oy), o = j(g.a, e.ox, e.oy);
+          t.fillStyle = w(d, a.opacity * 0.5), t.beginPath(), t.moveTo(v.x, v.y), t.lineTo(M.x, M.y), t.lineTo(o.x, o.y), t.lineTo(P.x, P.y), t.closePath(), t.fill(), t.strokeStyle = w(d, 0.8), t.lineWidth = 0.8, t.beginPath(), t.moveTo(M.x, M.y), t.lineTo(o.x, o.y), t.stroke();
         }
       }
-      for (const e of c) {
+      for (const e of i) {
         if (!e.valid) continue;
-        const a = n.glowColor || e.color;
-        e.hover && (t.save(), t.shadowColor = a, t.shadowBlur = 12, t.beginPath(), t.moveTo(r + e.ox, d + e.oy), t.ellipse(r + e.ox, d + e.oy, h, f, 0, e.startA, e.endA), t.closePath(), t.fillStyle = g(a, 0.08), t.fill(), t.restore()), t.beginPath(), t.moveTo(r + e.ox, d + e.oy), t.ellipse(r + e.ox, d + e.oy, h, f, 0, e.startA, e.endA), t.closePath();
-        const l = t.createRadialGradient(
-          r + e.ox - h * 0.2,
-          d + e.oy - f * 0.2,
+        const r = a.glowColor || e.color;
+        e.hp > 0.01 && (t.save(), t.shadowColor = r, t.shadowBlur = 12 * e.hp, t.beginPath(), t.moveTo(u + e.ox, f + e.oy), t.ellipse(u + e.ox, f + e.oy, p, m, 0, e.startA, e.endA), t.closePath(), t.fillStyle = w(r, 0.08 * e.hp), t.fill(), t.restore()), t.beginPath(), t.moveTo(u + e.ox, f + e.oy), t.ellipse(u + e.ox, f + e.oy, p, m, 0, e.startA, e.endA), t.closePath();
+        const d = t.createRadialGradient(
+          u + e.ox - p * 0.2,
+          f + e.oy - m * 0.2,
           0,
-          r + e.ox,
-          d + e.oy,
-          h * 1.05
+          u + e.ox,
+          f + e.oy,
+          p * 1.05
         );
-        l.addColorStop(0, g(a, n.opacity * 0.95)), l.addColorStop(0.6, g(a, n.opacity * 0.8)), l.addColorStop(1, g(a, n.opacity * 0.6)), t.fillStyle = l, t.fill(), t.strokeStyle = g(a, 0.95), t.lineWidth = e.hover ? 1.4 : 0.8, t.stroke();
+        d.addColorStop(0, w(r, a.opacity * 0.95)), d.addColorStop(0.6, w(r, a.opacity * 0.8)), d.addColorStop(1, w(r, a.opacity * 0.6)), t.fillStyle = d, t.fill(), t.strokeStyle = w(r, 0.95), t.lineWidth = 0.8 + 0.6 * e.hp, t.stroke();
       }
-      if (n.showLabel && E >= 0.999) {
-        t.font = `${n.labelFontSize}px Arial, sans-serif`, t.fillStyle = n.textColor, t.strokeStyle = "rgba(0,0,0,0.25)", t.lineWidth = 1;
-        for (const e of c) {
-          if (!e.valid) continue;
-          const a = {
-            x: r + e.ox + h * 1.02 * Math.cos(e.midA),
-            y: d + e.oy + f * 1.02 * Math.sin(e.midA)
-          }, l = {
-            x: r + e.ox + h * 1.18 * Math.cos(e.midA),
-            y: d + e.oy + f * 1.18 * Math.sin(e.midA)
-          }, p = Math.cos(e.midA) >= 0, m = {
-            x: l.x + (p ? 14 : -14)
+      if (a.showLabel && W >= 0.999) {
+        t.font = `${a.labelFontSize}px Arial, sans-serif`, t.textBaseline = "middle";
+        const e = [], r = [], d = a.labelFontSize + 6, g = 14, v = 4;
+        for (const o of i) {
+          if (!o.valid) continue;
+          const y = Math.cos(o.midA) >= 0, b = u + o.ox + p * 1.02 * Math.cos(o.midA), c = f + o.oy + m * 1.02 * Math.sin(o.midA), B = f + o.oy + m * 1.18 * Math.sin(o.midA), vt = a.showPercent ? `${o.data.name} ${(o.percent * 100).toFixed(1)}%` : `${o.data.name}`, gt = !a.labelLineColor || a.labelLineColor === "auto" ? a.glowColor || o.color : a.labelLineColor, yt = {
+            slice: o,
+            text: vt,
+            isRight: y,
+            anchorX: b,
+            anchorY: c,
+            targetY: B,
+            y: B,
+            color: gt
           };
-          t.beginPath(), t.moveTo(a.x, a.y), t.lineTo(l.x, l.y), t.lineTo(m.x, l.y), t.stroke(), t.textAlign = p ? "left" : "right", t.textBaseline = "middle";
-          const M = n.showPercent ? `${e.data.name} ${(e.percent * 100).toFixed(1)}%` : `${e.data.name}`;
-          t.fillText(M, m.x + (p ? 2 : -2), l.y);
+          (y ? r : e).push(yt);
+        }
+        const P = (o) => {
+          if (!o.length) return;
+          o.sort((c, B) => c.targetY - B.targetY);
+          const y = v + a.labelFontSize / 2, b = _ - v - a.labelFontSize / 2;
+          for (let c = 0; c < o.length; c++)
+            c === 0 ? o[c].y = Math.max(y, o[c].targetY) : o[c].y = Math.max(o[c].targetY, o[c - 1].y + d);
+          if (o[o.length - 1].y > b) {
+            o[o.length - 1].y = b;
+            for (let c = o.length - 2; c >= 0; c--)
+              o[c].y > o[c + 1].y - d && (o[c].y = o[c + 1].y - d);
+          }
+          for (let c = 0; c < o.length; c++)
+            o[c].y < y && (o[c].y = y);
+        };
+        P(e), P(r), t.lineWidth = a.labelLineWidth;
+        const M = [...e, ...r];
+        for (const o of M) {
+          const y = t.measureText(o.text).width;
+          let b;
+          if (o.isRight) {
+            const c = Math.min(
+              Math.max(o.anchorX + 6, o.anchorX + Math.abs(o.targetY - o.y) * 0.2 + 6),
+              C - v - y - g
+            );
+            b = c + g, t.strokeStyle = o.color, t.beginPath(), t.moveTo(o.anchorX, o.anchorY), t.lineTo(c, o.y), t.lineTo(b, o.y), t.stroke(), t.fillStyle = a.textColor, t.textAlign = "left", t.fillText(o.text, b + 2, o.y);
+          } else {
+            const c = Math.max(
+              Math.min(o.anchorX - 6, o.anchorX - Math.abs(o.targetY - o.y) * 0.2 - 6),
+              v + y + g
+            );
+            b = c - g, t.strokeStyle = o.color, t.beginPath(), t.moveTo(o.anchorX, o.anchorY), t.lineTo(c, o.y), t.lineTo(b, o.y), t.stroke(), t.fillStyle = a.textColor, t.textAlign = "right", t.fillText(o.text, b - 2, o.y);
+          }
         }
       }
-    }, U = (t, i) => {
-      for (let o = 0; o < v.length; o++) {
-        const s = v[o], c = s.hover ? Math.cos(s.midA) * n.hoverDistance : 0, u = s.hover ? Math.sin(s.midA) * n.hoverDistance : 0, e = (t - (r + c)) / h, a = (i - (d + u)) / f;
-        if (e * e + a * a > 1) continue;
-        let l = Math.atan2((i - (d + u)) / f, (t - (r + c)) / h);
-        for (; l < s.startA; ) l += Math.PI * 2;
-        for (; l > s.startA + Math.PI * 2; ) l -= Math.PI * 2;
-        if (l >= s.startA && l <= s.endA) return o;
+    }, ot = (t, l) => {
+      for (let n = 0; n < x.length; n++) {
+        const s = x[n], i = (t - u) / p, h = (l - f) / m;
+        if (i * i + h * h > 1) continue;
+        let e = Math.atan2((l - f) / m, (t - u) / p);
+        for (; e < s.startA; ) e += Math.PI * 2;
+        for (; e > s.startA + Math.PI * 2; ) e -= Math.PI * 2;
+        if (e >= s.startA && e <= s.endA) return n;
       }
       return -1;
-    }, at = (t) => {
-      if (!y.value) return;
-      const i = y.value.getBoundingClientRect(), o = t.clientX - i.left, s = t.clientY - i.top, c = U(o, s);
-      if (c !== $.value && ($.value = c, v.forEach((u, e) => u.hover = e === c), D()), c >= 0) {
-        const u = v[c];
-        B.value = !0, _.value = u.data, G.value = u.percent;
-        const e = T.value?.clientWidth || 0, a = T.value?.clientHeight || 0, l = Math.min(o + 12, e - 140), p = Math.min(s + 12, a - 60);
-        q.value = Math.max(0, l), N.value = Math.max(0, p);
+    }, nt = (t) => {
+      const l = S.value, n = l.getBoundingClientRect(), s = n.width / (l.clientWidth || n.width) || 1, i = n.height / (l.clientHeight || n.height) || 1;
+      return {
+        mx: (t.clientX - n.left) / s,
+        my: (t.clientY - n.top) / i
+      };
+    }, ut = (t) => {
+      if (!S.value) return;
+      const { mx: l, my: n } = nt(t), s = ot(l, n);
+      if (s !== $.value && ($.value = s, x.forEach((i, h) => i.hover = h === s), et()), s >= 0) {
+        const i = x[s];
+        z.value = !0, I.value = i.data, N.value = i.percent;
+        const h = R.value?.clientWidth || 0, e = R.value?.clientHeight || 0, r = Math.min(l + 12, h - 140), d = Math.min(n + 12, e - 60);
+        K.value = Math.max(0, r), Q.value = Math.max(0, d);
       } else
-        B.value = !1, _.value = null;
-    }, lt = () => {
-      $.value !== -1 && ($.value = -1, v.forEach((t) => t.hover = !1), D()), B.value = !1, _.value = null;
-    }, J = (t) => {
-      if (!y.value) return;
-      const i = y.value.getBoundingClientRect(), o = U(t.clientX - i.left, t.clientY - i.top);
-      o >= 0 && et("slice-click", v[o].data, o);
+        z.value = !1, I.value = null;
+    }, pt = () => {
+      $.value !== -1 && ($.value = -1, x.forEach((t) => t.hover = !1), et()), z.value = !1, I.value = null;
+    }, at = (t) => {
+      if (!S.value) return;
+      const { mx: l, my: n } = nt(t), s = ot(l, n);
+      s >= 0 && ct("slice-click", x[s].data, s);
     };
-    return K(
-      () => x.data,
+    return lt(
+      () => A.data,
       () => {
-        Object.assign(n, z, x.config), j = x.animation, R();
+        Object.assign(a, O, A.config), q = A.animation, E();
       },
       { deep: !0 }
-    ), K(
-      () => x.config,
+    ), lt(
+      () => A.config,
       () => {
-        Object.assign(n, z, x.config), R();
+        Object.assign(a, O, A.config), E();
       },
       { deep: !0 }
-    ), st(() => {
-      R(), window.addEventListener("resize", R), y.value?.addEventListener("click", J);
-    }), ct(() => {
-      window.removeEventListener("resize", R), y.value?.removeEventListener("click", J), I && cancelAnimationFrame(I);
-    }), (t, i) => (Z(), Q("div", {
+    ), xt(() => {
+      E(), window.addEventListener("resize", E), S.value?.addEventListener("click", at);
+    }), Mt(() => {
+      window.removeEventListener("resize", E), S.value?.removeEventListener("click", at), X && cancelAnimationFrame(X), k && cancelAnimationFrame(k);
+    }), (t, l) => (it(), st("div", {
       class: "g-pie3d-container",
       ref_key: "containerRef",
-      ref: T
+      ref: R
     }, [
-      W("canvas", {
+      H("canvas", {
         ref_key: "canvasRef",
-        ref: y,
-        onMousemove: at,
-        onMouseleave: lt
+        ref: S,
+        onMousemove: ut,
+        onMouseleave: pt
       }, null, 544),
-      B.value ? (Z(), Q("div", {
+      z.value ? (it(), st("div", {
         key: 0,
         class: "g-pie3d-tooltip",
-        style: dt({ left: `${q.value}px`, top: `${N.value}px` })
+        style: At({ left: `${K.value}px`, top: `${Q.value}px` })
       }, [
-        ht(t.$slots, "tooltip", {
-          data: _.value,
-          percent: G.value
+        Pt(t.$slots, "tooltip", {
+          data: I.value,
+          percent: N.value
         }, () => [
-          W("div", pt, [
-            W("p", ft, X(_.value?.name), 1),
-            W("p", vt, X(_.value?.value) + " (" + X((G.value * 100).toFixed(1)) + "%) ", 1)
+          H("div", St, [
+            H("p", Tt, U(I.value?.name), 1),
+            H("p", Ct, U(I.value?.value) + " (" + U((N.value * 100).toFixed(1)) + "%) ", 1)
           ])
         ], !0)
-      ], 4)) : rt("", !0)
+      ], 4)) : bt("", !0)
     ], 512));
   }
-}), Y = /* @__PURE__ */ ut(mt, [["__scopeId", "data-v-f18ddc7e"]]);
-Y.install = (F) => {
-  F.component(Y.name, Y);
+}), J = /* @__PURE__ */ wt(kt, [["__scopeId", "data-v-16239a65"]]);
+J.install = (D) => {
+  D.component(J.name, J);
 };
 export {
-  Y as GPie3D,
-  Y as default
+  J as GPie3D,
+  J as default
 };

package/lib/GPie3D/style.css

@@ -0,0 +1 @@
+.g-pie3d-container[data-v-16239a65]{position:relative;width:100%;height:100%;overflow:hidden}canvas[data-v-16239a65]{display:block;width:100%;height:100%}.g-pie3d-tooltip[data-v-16239a65]{position:absolute;pointer-events:none;z-index:10;background:#0a121ed9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#e2e8f0;padding:8px 12px;border-radius:4px;font-size:12px;min-width:100px;box-shadow:0 4px 20px #22d3ee40;border:1px solid rgba(34,211,238,.5)}.g-pie3d-tooltip__default p[data-v-16239a65]{margin:0;line-height:1.5}.g-pie3d-tooltip__name[data-v-16239a65]{font-weight:600}

package/lib/components/GPie3D/index.d.ts

@@ -42,6 +42,14 @@ interface Props {
         showAura?: boolean;
         /** 描边/发光主色 (默认与扇区色一致, 留空则用扇区色高亮) */
         glowColor?: string;
+        /**
+         * 标签折线颜色
+         * - 留空 / 'auto': 使用扇区颜色
+         * - 字符串: 统一颜色, 例如 '#94a3b8' / 'rgba(0,0,0,0.4)'
+         */
+        labelLineColor?: string;
+        /** 标签折线宽度 (px), 默认 1 */
+        labelLineWidth?: number;
     };
     /**
      * @description 是否启用进入动画
@@ -103,6 +111,14 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
         showAura?: boolean;
         /** 描边/发光主色 (默认与扇区色一致, 留空则用扇区色高亮) */
         glowColor?: string;
+        /**
+         * 标签折线颜色
+         * - 留空 / 'auto': 使用扇区颜色
+         * - 字符串: 统一颜色, 例如 '#94a3b8' / 'rgba(0,0,0,0.4)'
+         */
+        labelLineColor?: string;
+        /** 标签折线宽度 (px), 默认 1 */
+        labelLineWidth?: number;
     };
     animation: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/lib/components/GProgress/index.d.ts

@@ -1,7 +1,8 @@
-import { default as GProgress } from './index';
-export default GProgress;
-export { GProgress };
- 0
+interface Props {
+    /**
+       * @description 数量
+       * @version 0.1.7
+       * @default 0
        */
     count?: number | string;
     /**

package/lib/components/GScreen/index.d.ts

@@ -1,7 +1,7 @@
-import { default as GScreen } from './index';
-export default GScreen;
-export { GScreen };
-
+import { Ref } from 'vue';
+interface Props {
+    /**
+       * @description 设计稿宽度
        * @version 0.1.8
        * @default 1920
        */

package/lib/components/GTable/index.d.ts

@@ -1,6 +1,7 @@
-interface Props {
-    /**
-       * @description 表格数据数组，默认为空数组
+import { default as GTable } from './index';
+export default GTable;
+export { GTable };
+
        * @version 0.1.5
        * @default []
        */

package/lib/index/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("../GCount/index.js"),o=require("../GDialog/index.js"),l=require("../GTable/index.js"),n=require("../GVideo/index.js"),r=require("../GBubble/index.js"),a=require("../GProgress/index.js"),d=require("../GScreen/index.js"),i=require("../GPluginVideo/index.js"),t={GCount:u.default,GDialog:o.default,GTable:l.default,GVideo:n.default,GBubble:r.default,GProgress:a.default,GScreen:d.default,GPluginVideo:i.default},c=s=>{Object.keys(t).forEach(G=>{const e=t[G];s.component(e.name,e)})},f={install:c};exports.GCount=u.default;exports.GDialog=o.default;exports.GTable=l.default;exports.GVideo=n.default;exports.GBubble=r.default;exports.GProgress=a.default;exports.GScreen=d.default;exports.GPluginVideo=i.default;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("../GCount/index.js"),o=require("../GDialog/index.js"),l=require("../GTable/index.js"),n=require("../GVideo/index.js"),r=require("../GBubble/index.js"),a=require("../GProgress/index.js"),i=require("../GScreen/index.js"),d=require("../GPluginVideo/index.js"),G=require("../GPie3D/index.js"),t={GCount:u.default,GDialog:o.default,GTable:l.default,GVideo:n.default,GBubble:r.default,GProgress:a.default,GScreen:i.default,GPluginVideo:d.default,GPie3D:G.default},f=s=>{Object.keys(t).forEach(c=>{const e=t[c];s.component(e.name,e)})},b={install:f};exports.GCount=u.default;exports.GDialog=o.default;exports.GTable=l.default;exports.GVideo=n.default;exports.GBubble=r.default;exports.GProgress=a.default;exports.GScreen=i.default;exports.GPluginVideo=d.default;exports.GPie3D=G.default;exports.default=b;

package/lib/index/index.mjs

@@ -1,34 +1,37 @@
 import t from "../GCount/index.mjs";
-import e from "../GDialog/index.mjs";
-import i from "../GTable/index.mjs";
+import i from "../GDialog/index.mjs";
+import e from "../GTable/index.mjs";
 import s from "../GVideo/index.mjs";
 import c from "../GBubble/index.mjs";
-import a from "../GProgress/index.mjs";
-import f from "../GScreen/index.mjs";
+import f from "../GProgress/index.mjs";
+import a from "../GScreen/index.mjs";
 import p from "../GPluginVideo/index.mjs";
+import G from "../GPie3D/index.mjs";
 const m = {
   GCount: t,
-  GDialog: e,
-  GTable: i,
+  GDialog: i,
+  GTable: e,
   GVideo: s,
   GBubble: c,
-  GProgress: a,
-  GScreen: f,
-  GPluginVideo: p
-}, G = (n) => {
-  Object.keys(m).forEach((r) => {
-    const o = m[r];
-    n.component(o.name, o);
+  GProgress: f,
+  GScreen: a,
+  GPluginVideo: p,
+  GPie3D: G
+}, l = (r) => {
+  Object.keys(m).forEach((n) => {
+    const o = m[n];
+    r.component(o.name, o);
   });
-}, x = { install: G };
+}, D = { install: l };
 export {
   c as GBubble,
   t as GCount,
-  e as GDialog,
+  i as GDialog,
+  G as GPie3D,
   p as GPluginVideo,
-  a as GProgress,
-  f as GScreen,
-  i as GTable,
+  f as GProgress,
+  a as GScreen,
+  e as GTable,
   s as GVideo,
-  x as default
+  D as default
 };

package/lib/index.d.ts

@@ -6,8 +6,9 @@ import { GBubble } from './components/GBubble';
 import { GProgress } from './components/GProgress';
 import { GScreen } from './components/GScreen';
 import { GPluginVideo } from './components/GPluginVideo';
+import { GPie3D } from './components/GPie3D';
 declare const _default: {
     install: (app: any) => void;
 };
 export default _default;
-export { GCount, GDialog, GTable, GVideo, GBubble, GProgress, GScreen, GPluginVideo };
+export { GCount, GDialog, GTable, GVideo, GBubble, GProgress, GScreen, GPluginVideo, GPie3D };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geekin-devtoys",
-  "version": "0.2.12",
+  "version": "0.2.14-t1",
   "author": "leon",
   "license": "MIT",
   "description": "geekin-devtoys组件库",

package/lib/assets/GPie3D.css

@@ -1 +0,0 @@
-.g-pie3d-container[data-v-f18ddc7e]{position:relative;width:100%;height:100%;overflow:hidden}canvas[data-v-f18ddc7e]{display:block;width:100%;height:100%}.g-pie3d-tooltip[data-v-f18ddc7e]{position:absolute;pointer-events:none;z-index:10;background:#0a121ed9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#e2e8f0;padding:8px 12px;border-radius:4px;font-size:12px;min-width:100px;box-shadow:0 4px 20px #22d3ee40;border:1px solid rgba(34,211,238,.5)}.g-pie3d-tooltip__default p[data-v-f18ddc7e]{margin:0;line-height:1.5}.g-pie3d-tooltip__name[data-v-f18ddc7e]{font-weight:600}