@zumer/orbit 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/orbit.css +2 -2
- package/dist/orbit.js +117 -36
- package/dist/orbit.min.js +4 -4
- package/package.json +1 -1
package/dist/orbit.css
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
3
|
* orbit
|
|
4
|
-
* v.1.2.
|
|
4
|
+
* v.1.2.2
|
|
5
5
|
* Author Juan Martin Muda - Zumerlab
|
|
6
6
|
* License MIT
|
|
7
7
|
**/
|
|
8
8
|
@charset "UTF-8";
|
|
9
9
|
|
|
10
|
-
/* ../../../../../var/folders/dl/jfswzzq96_7bqvgnhjs47_8w0000gp/T/tmp-
|
|
10
|
+
/* ../../../../../var/folders/dl/jfswzzq96_7bqvgnhjs47_8w0000gp/T/tmp-47800-54Zylx3us8n9/orbit/src/orbit.css */
|
|
11
11
|
.gravity-spot * {
|
|
12
12
|
box-sizing: border-box;
|
|
13
13
|
margin: 0;
|
package/dist/orbit.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
3
|
* orbit
|
|
4
|
-
* v.1.2.
|
|
4
|
+
* v.1.2.2
|
|
5
5
|
* Author Juan Martin Muda - Zumerlab
|
|
6
6
|
* License MIT
|
|
7
7
|
**/
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
stroke: var(--o-stroke);
|
|
197
197
|
stroke-width: var(--o-stroke-width);
|
|
198
198
|
transition: fill 0.25s, stroke 0.25s;
|
|
199
|
-
|
|
199
|
+
|
|
200
200
|
}
|
|
201
201
|
text {
|
|
202
202
|
fill: var(--o-color);
|
|
@@ -231,6 +231,15 @@
|
|
|
231
231
|
this.observer.observe(this, { attributes: true, childList: true });
|
|
232
232
|
});
|
|
233
233
|
this.observer.observe(this, { attributes: true, childList: true });
|
|
234
|
+
this.textObserver = new MutationObserver(() => {
|
|
235
|
+
const textPath = this.shadowRoot.querySelector("textPath");
|
|
236
|
+
textPath.textContent = this.textContent;
|
|
237
|
+
});
|
|
238
|
+
this.textObserver.observe(this, { characterData: true, subtree: true });
|
|
239
|
+
}
|
|
240
|
+
disconnectedCallback() {
|
|
241
|
+
this.observer.disconnect();
|
|
242
|
+
this.textObserver.disconnect();
|
|
234
243
|
}
|
|
235
244
|
update() {
|
|
236
245
|
const { length, fontSize, textAnchor, fitRange } = this.getAttributes();
|
|
@@ -323,48 +332,120 @@
|
|
|
323
332
|
const maxValue = parseFloat(this.getAttribute("max")) || 100;
|
|
324
333
|
return progress / maxValue * maxAngle;
|
|
325
334
|
}
|
|
335
|
+
getControlPoint(x, y, x1, y1, direction = "clockwise") {
|
|
336
|
+
let xm = (x + x1) / 2;
|
|
337
|
+
let ym = (y + y1) / 2;
|
|
338
|
+
let dx = x1 - x;
|
|
339
|
+
let dy = y1 - y;
|
|
340
|
+
let xc, yc;
|
|
341
|
+
if (direction === "clockwise") {
|
|
342
|
+
xc = xm + dy * 0.4;
|
|
343
|
+
yc = ym - dx * 0.4;
|
|
344
|
+
} else {
|
|
345
|
+
xc = xm - dy * 0.4;
|
|
346
|
+
yc = ym + dx * 0.4;
|
|
347
|
+
}
|
|
348
|
+
return { xc, yc };
|
|
349
|
+
}
|
|
326
350
|
calculateArcParameters() {
|
|
327
|
-
const { arcAngle, realRadius, gap, arcHeightPercentage, orbitNumber, shape, strokeWidth } = this.getAttributes();
|
|
351
|
+
const { arcAngle, realRadius, gap, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight } = this.getAttributes();
|
|
328
352
|
const radius = realRadius;
|
|
329
|
-
let
|
|
353
|
+
let largeArcFlag, dShape;
|
|
330
354
|
let offset = Math.PI / 2;
|
|
331
355
|
let stroke = strokeWidth;
|
|
332
356
|
let fangle = arcAngle * Math.PI / 180;
|
|
333
357
|
let bigRadius = radius + arcHeightPercentage;
|
|
334
358
|
let smallRadius = radius - arcHeightPercentage !== 0 ? radius - arcHeightPercentage : radius;
|
|
335
|
-
let bigGap = (gap
|
|
336
|
-
let smallGap = (gap
|
|
337
|
-
let
|
|
338
|
-
let
|
|
339
|
-
let
|
|
340
|
-
let
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
359
|
+
let bigGap = (gap + stroke * 1.25) / orbitNumber / bigRadius;
|
|
360
|
+
let smallGap = (gap + stroke * 1.25) / orbitNumber / smallRadius;
|
|
361
|
+
let upperAngleStart = bigGap - offset;
|
|
362
|
+
let upperAngleEnd = fangle - bigGap - offset;
|
|
363
|
+
let innerAngleStart = smallGap - offset;
|
|
364
|
+
let innerAngleEnd = fangle - smallGap - offset;
|
|
365
|
+
function arcPoint(radius2, angle, radiusAdjustment = 0, angleOffsetDegrees = 0) {
|
|
366
|
+
const adjustedRadius = radius2 + radiusAdjustment;
|
|
367
|
+
const adjustedAngle = angle + angleOffsetDegrees * Math.PI / 180;
|
|
368
|
+
return {
|
|
369
|
+
x: 50 + adjustedRadius * Math.cos(adjustedAngle),
|
|
370
|
+
y: 50 + adjustedRadius * Math.sin(adjustedAngle)
|
|
371
|
+
};
|
|
372
|
+
}
|
|
373
|
+
let upperArcStart = arcPoint(bigRadius, upperAngleStart);
|
|
374
|
+
let upperArcEnd = arcPoint(bigRadius, upperAngleEnd);
|
|
375
|
+
let innerArcStart = arcPoint(smallRadius, innerAngleStart);
|
|
376
|
+
let innerArcEnd = arcPoint(smallRadius, innerAngleEnd);
|
|
353
377
|
largeArcFlag = arcAngle <= 180 ? 0 : 1;
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
378
|
+
if (shape === "rounded") {
|
|
379
|
+
let curve = arcHeight < 10 ? 5 : arcHeight < 5 ? 2.5 : 10;
|
|
380
|
+
let newUpperStart = arcPoint(bigRadius, upperAngleStart, 0, curve / orbitNumber);
|
|
381
|
+
let newUpperEnd = arcPoint(bigRadius, upperAngleEnd, 0, -curve / orbitNumber);
|
|
382
|
+
let newInnerStart = arcPoint(smallRadius, innerAngleStart, 0, curve / orbitNumber);
|
|
383
|
+
let newInnerEnd = arcPoint(smallRadius, innerAngleEnd, 0, -curve / orbitNumber);
|
|
384
|
+
let upperPointStart = arcPoint(bigRadius, upperAngleStart, -(curve / 2) / orbitNumber, 0);
|
|
385
|
+
let upperPointEnd = arcPoint(bigRadius, upperAngleEnd, -(curve / 2) / orbitNumber, 0);
|
|
386
|
+
let innerPointStart = arcPoint(smallRadius, innerAngleStart, curve / 2 / orbitNumber, 0);
|
|
387
|
+
let innerPointEnd = arcPoint(smallRadius, innerAngleEnd, curve / 2 / orbitNumber, 0);
|
|
388
|
+
let Q = this.getControlPoint(newUpperEnd.x, newUpperEnd.y, upperPointEnd.x, upperPointEnd.y);
|
|
389
|
+
let Q1 = this.getControlPoint(innerPointEnd.x, innerPointEnd.y, newInnerEnd.x, newInnerEnd.y);
|
|
390
|
+
let Q2 = this.getControlPoint(newInnerStart.x, newInnerStart.y, innerPointStart.x, innerPointStart.y);
|
|
391
|
+
let Q3 = this.getControlPoint(upperPointStart.x, upperPointStart.y, newUpperStart.x, newUpperStart.y);
|
|
392
|
+
dShape = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
393
|
+
dShape += `Q ${Q.xc}, ${Q.yc} ${upperPointEnd.x} ${upperPointEnd.y} `;
|
|
394
|
+
dShape += `L ${upperPointEnd.x} ${upperPointEnd.y}`;
|
|
395
|
+
dShape += `L ${innerPointEnd.x} ${innerPointEnd.y}`;
|
|
396
|
+
dShape += `Q ${Q1.xc}, ${Q1.yc} ${newInnerEnd.x} ${newInnerEnd.y} `;
|
|
397
|
+
dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
|
|
398
|
+
dShape += `Q ${Q2.xc}, ${Q2.yc} ${innerPointStart.x} ${innerPointStart.y} `;
|
|
399
|
+
dShape += `L ${innerPointStart.x} ${innerPointStart.y}`;
|
|
400
|
+
dShape += `L ${upperPointStart.x} ${upperPointStart.y}`;
|
|
401
|
+
dShape += ` Q ${Q3.xc}, ${Q3.yc} ${newUpperStart.x} ${newUpperStart.y} `;
|
|
402
|
+
dShape += ` Z`;
|
|
403
|
+
} else if (shape === "circle" || shape === "bullet") {
|
|
404
|
+
dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
405
|
+
dShape += ` A 1,1 0 0 1 ${innerArcEnd.x},${innerArcEnd.y} `;
|
|
406
|
+
dShape += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x},${innerArcStart.y}`;
|
|
407
|
+
dShape += ` A 1,1 0 0 ${shape === "circle" ? 1 : 0} ${upperArcStart.x},${upperArcStart.y} `;
|
|
408
|
+
dShape += ` Z`;
|
|
409
|
+
} else if (shape === "circle1") {
|
|
410
|
+
let segment = arcHeight * 1.36;
|
|
411
|
+
let newUpperStart = arcPoint(bigRadius, upperAngleStart, 0, segment / orbitNumber);
|
|
412
|
+
let newUpperEnd = arcPoint(bigRadius, upperAngleEnd, 0, -(segment / orbitNumber));
|
|
413
|
+
let newInnerStart = arcPoint(smallRadius, innerAngleStart, 0, segment / orbitNumber);
|
|
414
|
+
let newInnerEnd = arcPoint(smallRadius, innerAngleEnd, 0, -(segment / orbitNumber));
|
|
415
|
+
dShape = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
416
|
+
dShape += ` A 1,1 0 0 1 ${newInnerEnd.x},${newInnerEnd.y} `;
|
|
417
|
+
dShape += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
|
|
418
|
+
dShape += ` A 1,1 0 0 1 ${newUpperStart.x},${newUpperStart.y} `;
|
|
419
|
+
dShape += ` Z`;
|
|
420
|
+
} else if (shape === "arrow") {
|
|
421
|
+
let middleEnd = arcPoint(radius, upperAngleEnd, 0, 24 / orbitNumber / 2);
|
|
422
|
+
let middleStart = arcPoint(radius, upperAngleStart, 0, 24 / orbitNumber / 2);
|
|
423
|
+
dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
424
|
+
dShape += `L ${middleEnd.x} ${middleEnd.y}`;
|
|
425
|
+
dShape += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
426
|
+
dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
427
|
+
dShape += `L ${middleStart.x} ${middleStart.y} `;
|
|
428
|
+
dShape += `Z`;
|
|
429
|
+
} else if (shape === "backslash" || shape === "slash") {
|
|
430
|
+
let newUpperStart = arcPoint(bigRadius, upperAngleStart, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
|
|
431
|
+
let newUpperEnd = arcPoint(bigRadius, upperAngleEnd, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
|
|
432
|
+
let newInnerStart = arcPoint(smallRadius, innerAngleStart, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
|
|
433
|
+
let newInnerEnd = arcPoint(smallRadius, innerAngleEnd, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
|
|
434
|
+
dShape = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
435
|
+
dShape += `L ${newInnerEnd.x} ${newInnerEnd.y}`;
|
|
436
|
+
dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x}, ${newInnerStart.y}`;
|
|
437
|
+
dShape += `Z`;
|
|
438
|
+
} else if (shape === "nr") {
|
|
439
|
+
dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
440
|
+
dShape += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
441
|
+
dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
442
|
+
dShape += `Z`;
|
|
443
|
+
} else {
|
|
444
|
+
dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
445
|
+
dShape += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
446
|
+
dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
447
|
+
dShape += `Z`;
|
|
448
|
+
}
|
|
368
449
|
return { dShape };
|
|
369
450
|
}
|
|
370
451
|
calculateTextArcParameters() {
|
package/dist/orbit.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(()=>{var
|
|
1
|
+
(()=>{var H=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
:host {
|
|
4
4
|
--o-fill: var(--o-gray-light);
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
<path class="progress-bg" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
|
|
43
43
|
<path class="progress-bar" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
|
|
44
44
|
</svg>
|
|
45
|
-
`}connectedCallback(){this.update(),this.observer=new MutationObserver(
|
|
45
|
+
`}connectedCallback(){this.update(),this.observer=new MutationObserver(r=>{this.observer.disconnect(),r.forEach(n=>{this.update()}),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0})}update(){let r=this.shadowRoot.querySelector(".progress-bg"),n=this.shadowRoot.querySelector(".progress-bar");this.updateArc(r,!0),this.updateArc(n,!1)}updateArc(r,n){let{d:h}=this.calculateArcParameters(n);r.setAttribute("d",h)}getAttributes(){let r=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),n=parseFloat(getComputedStyle(this).getPropertyValue("--o-orbit-number")),h=parseFloat(getComputedStyle(this).getPropertyValue("--o-size-ratio")),o=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),e=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),s=this.getAttribute("shape")||"none",d=parseFloat(getComputedStyle(this).getPropertyValue("--o-stroke-width")),c=(r/n*h-d+.3)/2*100/r/2,l=o,t=parseFloat(this.getAttribute("max"))||100,b;this.classList.contains("outer-orbit")?b=c:this.classList.contains("quarter-outer-orbit")?b=c*-.5:this.classList.contains("inner-orbit")?b=c*-1:this.classList.contains("quarter-inner-orbit")?b=c*.5:b=0;let A=50+b;return{orbitRadius:r,progress:e,strokeWidth:d,realRadius:A,maxAngle:l,maxValue:t,shape:s,arcHeightPercentage:c,orbitNumber:n}}getProgressAngle(r){let{maxAngle:n,progress:h,maxValue:o}=this.getAttributes();return r?(o-1e-5)/o*n:h/o*n}calculateArcParameters(r){let n=this.getProgressAngle(r),{realRadius:h,arcHeightPercentage:o,orbitNumber:e,shape:s,strokeWidth:d}=this.getAttributes(),g=h,c,l,t,b,A,C,a,i,v,O,E,M,k,F,u=Math.PI/2,w=d,R=n*Math.PI/180,y=g+o,f=g-o!==0?g-o:g,p=w*2/e/2/y,$=w*2/e/2/f,P=p-u,x=R-p-u,S=$-u,L=R-$-u;c=50+y*Math.cos(P),l=50+y*Math.sin(P),t=50+y*Math.cos(x),b=50+y*Math.sin(x),E=50+y*Math.cos(x+3*Math.PI/180),k=50+y*Math.sin(x+3*Math.PI/180),C=50+f*Math.cos(S),a=50+f*Math.sin(S),i=50+f*Math.cos(L),v=50+f*Math.sin(L),M=50+f*Math.cos(L+3*Math.PI/180),F=50+f*Math.sin(L+3*Math.PI/180),A=n<=180?0:1;let m=`M ${c},${l} A ${y},${y} 0 ${A} 1 ${t},${b}`;return s==="arrow"&&(m+=`L ${(E+M)/2} ${(k+F)/2} `),(s==="circle"||s==="bullet")&&(m+=`A ${o}, ${o} 0 0 1 ${i},${v} `),m+=`L ${i} ${v}`,m+=`A ${f},${f} 0 ${A} 0 ${C},${a}`,s==="circle"&&(m+=`A ${o}, ${o} 0 0 1 ${c},${l} `),s==="bullet"&&(m+=`A ${o}, ${o} 0 0 0 ${c},${l} `),s==="arrow"&&(m+=`L ${C+3} ${(l+a)/2} `),m+="Z",{d:m}}};var T=document.createElement("template");T.innerHTML=`
|
|
46
46
|
<style>
|
|
47
47
|
:host {
|
|
48
48
|
--o-fill: var(--o-gray-light);
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
stroke: var(--o-stroke);
|
|
71
71
|
stroke-width: var(--o-stroke-width);
|
|
72
72
|
transition: fill 0.25s, stroke 0.25s;
|
|
73
|
-
|
|
73
|
+
|
|
74
74
|
}
|
|
75
75
|
text {
|
|
76
76
|
fill: var(--o-color);
|
|
@@ -88,4 +88,4 @@
|
|
|
88
88
|
<textPath href="#orbitPath" alignment-baseline="middle"></textPath>
|
|
89
89
|
</text>
|
|
90
90
|
</svg>
|
|
91
|
-
`;var
|
|
91
|
+
`;var q=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(T.content.cloneNode(!0))}connectedCallback(){this.update(),this.observer=new MutationObserver(r=>{this.observer.disconnect(),r.forEach(n=>{this.update()}),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0}),this.textObserver=new MutationObserver(()=>{let r=this.shadowRoot.querySelector("textPath");r.textContent=this.textContent}),this.textObserver.observe(this,{characterData:!0,subtree:!0})}disconnectedCallback(){this.observer.disconnect(),this.textObserver.disconnect()}update(){let{length:r,fontSize:n,textAnchor:h,fitRange:o}=this.getAttributes(),e=this.shadowRoot.getElementById("orbitPath"),s=this.shadowRoot.getElementById("orbitShape"),d=this.shadowRoot.querySelector("text"),g=this.shadowRoot.querySelector("textPath"),{dShape:c}=this.calculateArcParameters(),{dPath:l}=this.calculateTextArcParameters();s.setAttribute("d",c),e.setAttribute("d",l),h==="start"?(g.setAttribute("startOffset","0%"),g.setAttribute("text-anchor","start")):h==="middle"?(g.setAttribute("startOffset","50%"),g.setAttribute("text-anchor","middle")):h==="end"&&(g.setAttribute("startOffset","100%"),g.setAttribute("text-anchor","end")),o&&g.parentElement.setAttribute("textLength",e.getTotalLength()),d.style.fontSize=`calc(${n} * (100 / (${r}) * (12 / var(--o-orbit-number) ))`,g.textContent=this.textContent}getAttributes(){let r,n,h,o,e,s=parseFloat(getComputedStyle(this).getPropertyValue("--o-stroke-width")),d=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),g=this.getAttribute("shape")||"none",c=this.hasAttribute("flip")||this.classList.contains("flip"),l=this.hasAttribute("fit-range")||this.classList.contains("fit-range")||!1,t=parseFloat(getComputedStyle(this).getPropertyValue("--o-force")),b=this.getAttribute("text-anchor")||"middle",A=getComputedStyle(this).getPropertyValue("font-size")||getComputedStyle(this).getPropertyValue("--font-size"),C=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),a=parseFloat(this.getAttribute("value"));if(a){n=this.getProgressAngle(C,a);let M=this.previousElementSibling,k=M?parseFloat(getComputedStyle(M).getPropertyValue("--o_stack")):0;this.style.setProperty("--o_stack",k+n),k>=0&&c&&this.style.setProperty("--o-angle-composite",parseFloat(k)+"deg"),k>0&&!c&&this.style.setProperty("--o-angle-composite",parseFloat(k)+"deg")}else r=getComputedStyle(this).getPropertyValue("--o-angle"),n=B(r);h=parseFloat(getComputedStyle(this).getPropertyValue("--o-orbit-number")),o=parseFloat(getComputedStyle(this).getPropertyValue("--o-size-ratio"));let i=d/h*o-s+.3,v=i/2*100/d/2,O=parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));this.classList.contains("outer-orbit")?e=v:this.classList.contains("quarter-outer-orbit")?e=v*-.5:this.classList.contains("inner-orbit")?e=v*-1:this.classList.contains("quarter-inner-orbit")?e=v*.5:e=0;let E=50+e;return{orbitRadius:d,arcHeight:i,realRadius:E,gap:O,arcAngle:n,shape:g,length:t,fontSize:A,flip:c,fitRange:l,textAnchor:b,arcHeightPercentage:v,innerOuter:e,orbitNumber:h,size:o,strokeWidth:s}}getProgressAngle(r,n){let h=n,o=parseFloat(this.getAttribute("max"))||100;return h/o*r}getControlPoint(r,n,h,o,e="clockwise"){let s=(r+h)/2,d=(n+o)/2,g=h-r,c=o-n,l,t;return e==="clockwise"?(l=s+c*.4,t=d-g*.4):(l=s-c*.4,t=d+g*.4),{xc:l,yc:t}}calculateArcParameters(){let{arcAngle:r,realRadius:n,gap:h,arcHeightPercentage:o,orbitNumber:e,shape:s,strokeWidth:d,arcHeight:g}=this.getAttributes(),c=n,l,t,b=Math.PI/2,A=d,C=r*Math.PI/180,a=c+o,i=c-o!==0?c-o:c,v=(h+A*1.25)/e/a,O=(h+A*1.25)/e/i,E=v-b,M=C-v-b,k=O-b,F=C-O-b;function u(p,$,P=0,x=0){let S=p+P,L=$+x*Math.PI/180;return{x:50+S*Math.cos(L),y:50+S*Math.sin(L)}}let w=u(a,E),R=u(a,M),y=u(i,k),f=u(i,F);if(l=r<=180?0:1,s==="rounded"){let p=g<10?5:g<5?2.5:10,$=u(a,E,0,p/e),P=u(a,M,0,-p/e),x=u(i,k,0,p/e),S=u(i,F,0,-p/e),L=u(a,E,-(p/2)/e,0),m=u(a,M,-(p/2)/e,0),V=u(i,k,p/2/e,0),z=u(i,F,p/2/e,0),X=this.getControlPoint(P.x,P.y,m.x,m.y),Y=this.getControlPoint(z.x,z.y,S.x,S.y),Q=this.getControlPoint(x.x,x.y,V.x,V.y),Z=this.getControlPoint(L.x,L.y,$.x,$.y);t=`M ${$.x},${$.y} A ${a},${a} 0 ${l} 1 ${P.x},${P.y}`,t+=`Q ${X.xc}, ${X.yc} ${m.x} ${m.y} `,t+=`L ${m.x} ${m.y}`,t+=`L ${z.x} ${z.y}`,t+=`Q ${Y.xc}, ${Y.yc} ${S.x} ${S.y} `,t+=`A ${i},${i} 0 ${l} 0 ${x.x},${x.y}`,t+=`Q ${Q.xc}, ${Q.yc} ${V.x} ${V.y} `,t+=`L ${V.x} ${V.y}`,t+=`L ${L.x} ${L.y}`,t+=` Q ${Z.xc}, ${Z.yc} ${$.x} ${$.y} `,t+=" Z"}else if(s==="circle"||s==="bullet")t=`M ${w.x},${w.y} A ${a},${a} 0 ${l} 1 ${R.x},${R.y}`,t+=` A 1,1 0 0 1 ${f.x},${f.y} `,t+=` A ${i},${i} 0 ${l} 0 ${y.x},${y.y}`,t+=` A 1,1 0 0 ${s==="circle"?1:0} ${w.x},${w.y} `,t+=" Z";else if(s==="circle1"){let p=g*1.36,$=u(a,E,0,p/e),P=u(a,M,0,-(p/e)),x=u(i,k,0,p/e),S=u(i,F,0,-(p/e));t=`M ${$.x},${$.y} A ${a},${a} 0 ${l} 1 ${P.x},${P.y}`,t+=` A 1,1 0 0 1 ${S.x},${S.y} `,t+=` A ${i},${i} 0 ${l} 0 ${x.x},${x.y}`,t+=` A 1,1 0 0 1 ${$.x},${$.y} `,t+=" Z"}else if(s==="arrow"){let p=u(c,M,0,24/e/2),$=u(c,E,0,24/e/2);t=`M ${w.x},${w.y} A ${a},${a} 0 ${l} 1 ${R.x},${R.y}`,t+=`L ${p.x} ${p.y}`,t+=`L ${f.x} ${f.y}`,t+=`A ${i},${i} 0 ${l} 0 ${y.x}, ${y.y}`,t+=`L ${$.x} ${$.y} `,t+="Z"}else if(s==="backslash"||s==="slash"){let p=u(a,E,0,s==="backslash"?0:24/e/2),$=u(a,M,0,s==="backslash"?0:24/e/2),P=u(i,k,0,s==="backslash"?24/e/2:0),x=u(i,F,0,s==="backslash"?24/e/2:0);t=`M ${p.x},${p.y} A ${a},${a} 0 ${l} 1 ${$.x},${$.y}`,t+=`L ${x.x} ${x.y}`,t+=`A ${i},${i} 0 ${l} 0 ${P.x}, ${P.y}`,t+="Z"}else s==="nr"?(t=`M ${w.x},${w.y} A ${a},${a} 0 ${l} 1 ${R.x},${R.y}`,t+=`L ${f.x} ${f.y}`,t+=`A ${i},${i} 0 ${l} 0 ${y.x}, ${y.y}`,t+="Z"):(t=`M ${w.x},${w.y} A ${a},${a} 0 ${l} 1 ${R.x},${R.y}`,t+=`L ${f.x} ${f.y}`,t+=`A ${i},${i} 0 ${l} 0 ${y.x}, ${y.y}`,t+="Z");return{dShape:t}}calculateTextArcParameters(){let{arcAngle:r,realRadius:n,gap:h,flip:o}=this.getAttributes(),e=n,s,d,g,c,l,t,b,A=h*.5;b=o?0:1,l=r<=180?0:1;let C=50+e*Math.cos((-90+A)*(Math.PI/180)),a=50+e*Math.sin((-90+A)*(Math.PI/180)),i=50+e*Math.cos((r-90-A)*Math.PI/180),v=50+e*Math.sin((r-90-A)*Math.PI/180);return o?(s=i,d=v,g=C,c=a):(s=C,d=a,g=i,c=v),t=`M ${s},${d} A ${e},${e} 0 ${l} ${b} ${g},${c}`,{dPath:t}}};function B(I){let r=I.match(/calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/);if(r){let n=parseFloat(r[1]),h=parseInt(r[2])-parseInt(r[3]);if(!isNaN(n)&&!isNaN(h)&&h!==0)return n/h}}var N={};N={resize:I=>{let r=document.querySelector(I);if(!r){console.error(`Not found: ${I}`);return}new ResizeObserver(h=>{for(let o of h){let{width:e}=o.contentRect,s=r.querySelectorAll(".gravity-spot");s?s.forEach(d=>{let g=getComputedStyle(d).getPropertyValue("--o-force"),c=e/500;d.style.setProperty("--o-force-ratio",`${c}`)}):console.error("No gravity-spot found")}}).observe(r)}};customElements.get("o-progress")||customElements.define("o-progress",H);customElements.get("o-arc")||customElements.define("o-arc",q);window.Orbit=N;})();
|