@zumer/orbit 1.4.10 → 1.4.11
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/README.md +12 -0
- package/dist/orbit.js +36 -24
- package/dist/orbit.min.js +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -158,6 +158,18 @@ Browse examples on the [Orbit docs site](https://zumerlab.github.io/orbit-docs):
|
|
|
158
158
|
|
|
159
159
|
---
|
|
160
160
|
|
|
161
|
+
## Using Orbit with AI / LLMs
|
|
162
|
+
|
|
163
|
+
Orbit's radial model is unlike the box-flow layouts most models were trained on,
|
|
164
|
+
so an assistant generating Orbit markup from scratch will struggle. Give it the
|
|
165
|
+
reference first — these files are written for that purpose:
|
|
166
|
+
|
|
167
|
+
- **[llms.txt](https://zumerlab.github.io/orbit-docs/llms.txt)** — concise overview, structure rules, quick recipes.
|
|
168
|
+
- **[llms-full.txt](https://zumerlab.github.io/orbit-docs/llms-full.txt)** — complete reference: every class, custom property, web component, and copy-paste pattern.
|
|
169
|
+
|
|
170
|
+
Paste the relevant one into your prompt (or your tool's context/rules) before
|
|
171
|
+
asking the model to build a radial UI.
|
|
172
|
+
|
|
161
173
|
## Resources
|
|
162
174
|
|
|
163
175
|
- [Full documentation](https://zumerlab.github.io/orbit-docs) — elements, tools, advanced examples
|
package/dist/orbit.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* orbit
|
|
3
|
-
* v.1.4.
|
|
3
|
+
* v.1.4.11
|
|
4
4
|
* Author Juan Martin Muda - Zumerlab
|
|
5
5
|
* License MIT
|
|
6
6
|
*/
|
|
@@ -84,13 +84,19 @@
|
|
|
84
84
|
const upperArcEnd = this.arcPoint(bigRadius, upperAngleEnd);
|
|
85
85
|
const innerArcStart = this.arcPoint(smallRadius, innerAngleStart);
|
|
86
86
|
const innerArcEnd = this.arcPoint(smallRadius, innerAngleEnd);
|
|
87
|
-
const
|
|
87
|
+
const upperSweep = upperAngleEnd - upperAngleStart;
|
|
88
|
+
const innerSweep = innerAngleEnd - innerAngleStart;
|
|
89
|
+
const largeArcFlagUpper = upperSweep > Math.PI ? 1 : 0;
|
|
90
|
+
const largeArcFlagInner = innerSweep > Math.PI ? 1 : 0;
|
|
88
91
|
return {
|
|
89
92
|
upperArcStart,
|
|
90
93
|
upperArcEnd,
|
|
91
94
|
innerArcStart,
|
|
92
95
|
innerArcEnd,
|
|
93
|
-
largeArcFlag,
|
|
96
|
+
largeArcFlag: largeArcFlagUpper,
|
|
97
|
+
// back-compat alias; prefer the two below
|
|
98
|
+
largeArcFlagUpper,
|
|
99
|
+
largeArcFlagInner,
|
|
94
100
|
bigRadius,
|
|
95
101
|
smallRadius,
|
|
96
102
|
radius,
|
|
@@ -130,8 +136,11 @@
|
|
|
130
136
|
return d;
|
|
131
137
|
}
|
|
132
138
|
generateRoundedPath(params, arcHeight, orbitNumber) {
|
|
133
|
-
const {
|
|
139
|
+
const { bigRadius, smallRadius } = params;
|
|
134
140
|
const curve = arcHeight < 10 ? 5 : arcHeight < 5 ? 2.5 : 10;
|
|
141
|
+
const capRad = curve / orbitNumber * Math.PI / 180;
|
|
142
|
+
const flagU = params.upperAngleEnd - params.upperAngleStart - 2 * capRad > Math.PI ? 1 : 0;
|
|
143
|
+
const flagI = params.innerAngleEnd - params.innerAngleStart - 2 * capRad > Math.PI ? 1 : 0;
|
|
135
144
|
const newUpperStart = this.arcPoint(bigRadius, params.upperAngleStart, 0, curve / orbitNumber);
|
|
136
145
|
const newUpperEnd = this.arcPoint(bigRadius, params.upperAngleEnd, 0, -curve / orbitNumber);
|
|
137
146
|
const newInnerStart = this.arcPoint(smallRadius, params.innerAngleStart, 0, curve / orbitNumber);
|
|
@@ -144,10 +153,10 @@
|
|
|
144
153
|
const Q1 = this.getControlPoint(innerPointEnd.x, innerPointEnd.y, newInnerEnd.x, newInnerEnd.y);
|
|
145
154
|
const Q2 = this.getControlPoint(newInnerStart.x, newInnerStart.y, innerPointStart.x, innerPointStart.y);
|
|
146
155
|
const Q3 = this.getControlPoint(upperPointStart.x, upperPointStart.y, newUpperStart.x, newUpperStart.y);
|
|
147
|
-
let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${
|
|
156
|
+
let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${flagU} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
148
157
|
d += `Q ${Q.xc},${Q.yc} ${upperPointEnd.x},${upperPointEnd.y} L ${innerPointEnd.x},${innerPointEnd.y}`;
|
|
149
158
|
d += `Q ${Q1.xc},${Q1.yc} ${newInnerEnd.x},${newInnerEnd.y}`;
|
|
150
|
-
d += `A ${smallRadius},${smallRadius} 0 ${
|
|
159
|
+
d += `A ${smallRadius},${smallRadius} 0 ${flagI} 0 ${newInnerStart.x},${newInnerStart.y}`;
|
|
151
160
|
d += `Q ${Q2.xc},${Q2.yc} ${innerPointStart.x},${innerPointStart.y} L ${upperPointStart.x},${upperPointStart.y}`;
|
|
152
161
|
d += ` Q ${Q3.xc},${Q3.yc} ${newUpperStart.x},${newUpperStart.y}`;
|
|
153
162
|
d += ` Z`;
|
|
@@ -155,54 +164,57 @@
|
|
|
155
164
|
}
|
|
156
165
|
// Dentro de la clase OrbitCommon en orbit-common.js
|
|
157
166
|
generateCirclePath(params, shape) {
|
|
158
|
-
const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius,
|
|
159
|
-
let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${
|
|
167
|
+
const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner } = params;
|
|
168
|
+
let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlagUpper} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
160
169
|
d += ` A 1,1 0 0 1 ${innerArcEnd.x},${innerArcEnd.y} `;
|
|
161
|
-
d += ` A ${smallRadius},${smallRadius} 0 ${
|
|
170
|
+
d += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${innerArcStart.x},${innerArcStart.y}`;
|
|
162
171
|
d += ` A 1,1 0 0 ${shape === "circle" || shape === "circle-a" ? 1 : 0} ${upperArcStart.x},${upperArcStart.y} `;
|
|
163
172
|
d += ` Z`;
|
|
164
173
|
return d;
|
|
165
174
|
}
|
|
166
175
|
generateCircleBPath(params, arcHeight, orbitNumber) {
|
|
167
|
-
const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius
|
|
176
|
+
const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius } = params;
|
|
168
177
|
const segment = arcHeight * 1.36;
|
|
178
|
+
const capRad = segment / orbitNumber * Math.PI / 180;
|
|
179
|
+
const flagU = upperAngleEnd - upperAngleStart - 2 * capRad > Math.PI ? 1 : 0;
|
|
180
|
+
const flagI = innerAngleEnd - innerAngleStart - 2 * capRad > Math.PI ? 1 : 0;
|
|
169
181
|
const newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, segment / orbitNumber);
|
|
170
182
|
const newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, -segment / orbitNumber);
|
|
171
183
|
const newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, segment / orbitNumber);
|
|
172
184
|
const newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, -segment / orbitNumber);
|
|
173
|
-
let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${
|
|
185
|
+
let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${flagU} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
174
186
|
d += ` A 1,1 0 0 1 ${newInnerEnd.x},${newInnerEnd.y} `;
|
|
175
|
-
d += ` A ${smallRadius},${smallRadius} 0 ${
|
|
187
|
+
d += ` A ${smallRadius},${smallRadius} 0 ${flagI} 0 ${newInnerStart.x},${newInnerStart.y}`;
|
|
176
188
|
d += ` A 1,1 0 0 1 ${newUpperStart.x},${newUpperStart.y} `;
|
|
177
189
|
d += ` Z`;
|
|
178
190
|
return d;
|
|
179
191
|
}
|
|
180
192
|
generateArrowPath(params, orbitNumber) {
|
|
181
|
-
const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius,
|
|
193
|
+
const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner, radius } = params;
|
|
182
194
|
const middleEnd = this.arcPoint(radius, params.upperAngleEnd, 0, 24 / orbitNumber / 2);
|
|
183
195
|
const middleStart = this.arcPoint(radius, params.upperAngleStart, 0, 24 / orbitNumber / 2);
|
|
184
|
-
let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${
|
|
196
|
+
let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlagUpper} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
185
197
|
d += `L ${middleEnd.x} ${middleEnd.y}`;
|
|
186
198
|
d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
187
|
-
d += `A ${smallRadius},${smallRadius} 0 ${
|
|
199
|
+
d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
188
200
|
d += `L ${middleStart.x} ${middleStart.y}`;
|
|
189
201
|
d += `Z`;
|
|
190
202
|
return d;
|
|
191
203
|
}
|
|
192
204
|
generateSlashPath(params, shape, orbitNumber) {
|
|
193
|
-
const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius,
|
|
205
|
+
const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner } = params;
|
|
194
206
|
const newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
|
|
195
207
|
const newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
|
|
196
208
|
const newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
|
|
197
209
|
const newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
|
|
198
|
-
let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${
|
|
210
|
+
let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlagUpper} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
199
211
|
d += `L ${newInnerEnd.x} ${newInnerEnd.y}`;
|
|
200
|
-
d += `A ${smallRadius},${smallRadius} 0 ${
|
|
212
|
+
d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${newInnerStart.x}, ${newInnerStart.y}`;
|
|
201
213
|
d += `Z`;
|
|
202
214
|
return d;
|
|
203
215
|
}
|
|
204
216
|
generateZigzagPath(params, arcHeight, orbitNumber) {
|
|
205
|
-
const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius,
|
|
217
|
+
const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner, radius } = params;
|
|
206
218
|
const h2 = arcHeight / orbitNumber / 2;
|
|
207
219
|
const s2 = this.arcPoint(radius, params.upperAngleStart, -h2, 3);
|
|
208
220
|
const s3 = this.arcPoint(radius, params.upperAngleStart, 0, 0);
|
|
@@ -210,12 +222,12 @@
|
|
|
210
222
|
const e2 = this.arcPoint(radius, params.innerAngleEnd, h2, 3);
|
|
211
223
|
const e3 = this.arcPoint(radius, params.innerAngleEnd, 0, 0);
|
|
212
224
|
const e4 = this.arcPoint(radius, params.innerAngleEnd, -h2, 3);
|
|
213
|
-
let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${
|
|
225
|
+
let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlagUpper} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
214
226
|
d += `L ${e2.x} ${e2.y}`;
|
|
215
227
|
d += `L ${e3.x} ${e3.y}`;
|
|
216
228
|
d += `L ${e4.x} ${e4.y}`;
|
|
217
229
|
d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
218
|
-
d += `A ${smallRadius},${smallRadius} 0 ${
|
|
230
|
+
d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
219
231
|
d += `L ${s2.x} ${s2.y}`;
|
|
220
232
|
d += `L ${s3.x} ${s3.y}`;
|
|
221
233
|
d += `L ${s4.x} ${s4.y}`;
|
|
@@ -223,10 +235,10 @@
|
|
|
223
235
|
return d;
|
|
224
236
|
}
|
|
225
237
|
generateDefaultPath(params) {
|
|
226
|
-
const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius,
|
|
227
|
-
let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${
|
|
238
|
+
const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlagUpper, largeArcFlagInner } = params;
|
|
239
|
+
let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlagUpper} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
228
240
|
d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
229
|
-
d += `A ${smallRadius},${smallRadius} 0 ${
|
|
241
|
+
d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlagInner} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
230
242
|
d += `Z`;
|
|
231
243
|
return d;
|
|
232
244
|
}
|
package/dist/orbit.min.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* orbit
|
|
3
|
-
* v.1.4.
|
|
3
|
+
* v.1.4.11
|
|
4
4
|
* Author Juan Martin Muda - Zumerlab
|
|
5
5
|
* License MIT
|
|
6
6
|
*/
|
|
7
|
-
(()=>{var
|
|
7
|
+
(()=>{var b=class extends HTMLElement{constructor(){super()}getCommonAttributes(t){let r=parseFloat(getComputedStyle(t).getPropertyValue("r")||0),e=parseFloat(getComputedStyle(t).getPropertyValue("--o-orbit-number")||1),s=parseFloat(getComputedStyle(t).getPropertyValue("--o-size-ratio")||1),n=parseFloat(getComputedStyle(t).getPropertyValue("--o-stroke-width")||1),o=t.getAttribute("shape")||"none",l=r/e*s-n+.3,a=r>0?l/2*100/r/2:0,i=0;t.classList.contains("outer-orbit")?i=a:t.classList.contains("quarter-outer-orbit")?i=a*-.5:t.classList.contains("inner-orbit")?i=a*-1:t.classList.contains("quarter-inner-orbit")&&(i=a*.5);let c=50+i;return{orbitRadius:r,arcHeight:l,realRadius:c,arcAngle:0,shape:o,arcHeightPercentage:a,orbitNumber:e,size:s,strokeWidth:n}}getProgressAngle(t,r,e=100){return r/e*t}getControlPoint(t,r,e,s,n="clockwise"){let o=(t+e)/2,l=(r+s)/2,a=e-t,i=s-r;return n==="clockwise"?{xc:o+i*.4,yc:l-a*.4}:{xc:o-i*.4,yc:l+a*.4}}arcPoint(t,r,e=0,s=0){let n=t+e,o=r+s*Math.PI/180;return{x:50+n*Math.cos(o),y:50+n*Math.sin(o)}}calculateCommonArcParameters(t,r,e,s,n,o,l,a=0){let i=Math.PI/2,c=t*Math.PI/180,h=r+e,g=r-e!==0?r-e:r,u=(a+o*1.25)/s/h,d=(a+o*1.25)/s/g,$=u-i,p=c-u-i,A=d-i,P=c-d-i,x=this.arcPoint(h,$),y=this.arcPoint(h,p),S=this.arcPoint(g,A),f=this.arcPoint(g,P),C=p-$,M=P-A,m=C>Math.PI?1:0,F=M>Math.PI?1:0;return{upperArcStart:x,upperArcEnd:y,innerArcStart:S,innerArcEnd:f,largeArcFlag:m,largeArcFlagUpper:m,largeArcFlagInner:F,bigRadius:h,smallRadius:g,radius:r,upperAngleStart:$,upperAngleEnd:p,innerAngleStart:A,innerAngleEnd:P}}generatePathData(t,r,e,s){let n="";switch(t){case"rounded":n=this.generateRoundedPath(r,e,s);break;case"circle":case"circle-a":case"bullet":n=this.generateCirclePath(r,t);break;case"circle-b":n=this.generateCircleBPath(r,e,s);break;case"arrow":n=this.generateArrowPath(r,s);break;case"backslash":case"slash":n=this.generateSlashPath(r,t,s);break;case"zigzag":n=this.generateZigzagPath(r,e,s);break;default:n=this.generateDefaultPath(r)}return n}generateRoundedPath(t,r,e){let{bigRadius:s,smallRadius:n}=t,o=r<10?5:r<5?2.5:10,l=o/e*Math.PI/180,a=t.upperAngleEnd-t.upperAngleStart-2*l>Math.PI?1:0,i=t.innerAngleEnd-t.innerAngleStart-2*l>Math.PI?1:0,c=this.arcPoint(s,t.upperAngleStart,0,o/e),h=this.arcPoint(s,t.upperAngleEnd,0,-o/e),g=this.arcPoint(n,t.innerAngleStart,0,o/e),u=this.arcPoint(n,t.innerAngleEnd,0,-o/e),d=this.arcPoint(s,t.upperAngleStart,-(o/2)/e,0),$=this.arcPoint(s,t.upperAngleEnd,-(o/2)/e,0),p=this.arcPoint(n,t.innerAngleStart,o/2/e,0),A=this.arcPoint(n,t.innerAngleEnd,o/2/e,0),P=this.getControlPoint(h.x,h.y,$.x,$.y),x=this.getControlPoint(A.x,A.y,u.x,u.y),y=this.getControlPoint(g.x,g.y,p.x,p.y),S=this.getControlPoint(d.x,d.y,c.x,c.y),f=`M ${c.x},${c.y} A ${s},${s} 0 ${a} 1 ${h.x},${h.y}`;return f+=`Q ${P.xc},${P.yc} ${$.x},${$.y} L ${A.x},${A.y}`,f+=`Q ${x.xc},${x.yc} ${u.x},${u.y}`,f+=`A ${n},${n} 0 ${i} 0 ${g.x},${g.y}`,f+=`Q ${y.xc},${y.yc} ${p.x},${p.y} L ${d.x},${d.y}`,f+=` Q ${S.xc},${S.yc} ${c.x},${c.y}`,f+=" Z",f}generateCirclePath(t,r){let{upperArcStart:e,upperArcEnd:s,innerArcStart:n,innerArcEnd:o,bigRadius:l,smallRadius:a,largeArcFlagUpper:i,largeArcFlagInner:c}=t,h=`M ${e.x},${e.y} A ${l},${l} 0 ${i} 1 ${s.x},${s.y}`;return h+=` A 1,1 0 0 1 ${o.x},${o.y} `,h+=` A ${a},${a} 0 ${c} 0 ${n.x},${n.y}`,h+=` A 1,1 0 0 ${r==="circle"||r==="circle-a"?1:0} ${e.x},${e.y} `,h+=" Z",h}generateCircleBPath(t,r,e){let{upperAngleStart:s,upperAngleEnd:n,innerAngleStart:o,innerAngleEnd:l,bigRadius:a,smallRadius:i}=t,c=r*1.36,h=c/e*Math.PI/180,g=n-s-2*h>Math.PI?1:0,u=l-o-2*h>Math.PI?1:0,d=this.arcPoint(a,s,0,c/e),$=this.arcPoint(a,n,0,-c/e),p=this.arcPoint(i,o,0,c/e),A=this.arcPoint(i,l,0,-c/e),P=`M ${d.x},${d.y} A ${a},${a} 0 ${g} 1 ${$.x},${$.y}`;return P+=` A 1,1 0 0 1 ${A.x},${A.y} `,P+=` A ${i},${i} 0 ${u} 0 ${p.x},${p.y}`,P+=` A 1,1 0 0 1 ${d.x},${d.y} `,P+=" Z",P}generateArrowPath(t,r){let{upperArcStart:e,upperArcEnd:s,innerArcStart:n,innerArcEnd:o,bigRadius:l,smallRadius:a,largeArcFlagUpper:i,largeArcFlagInner:c,radius:h}=t,g=this.arcPoint(h,t.upperAngleEnd,0,24/r/2),u=this.arcPoint(h,t.upperAngleStart,0,24/r/2),d=`M ${e.x},${e.y} A ${l},${l} 0 ${i} 1 ${s.x},${s.y}`;return d+=`L ${g.x} ${g.y}`,d+=`L ${o.x} ${o.y}`,d+=`A ${a},${a} 0 ${c} 0 ${n.x}, ${n.y}`,d+=`L ${u.x} ${u.y}`,d+="Z",d}generateSlashPath(t,r,e){let{upperAngleStart:s,upperAngleEnd:n,innerAngleStart:o,innerAngleEnd:l,bigRadius:a,smallRadius:i,largeArcFlagUpper:c,largeArcFlagInner:h}=t,g=this.arcPoint(a,s,0,r==="backslash"?0:24/e/2),u=this.arcPoint(a,n,0,r==="backslash"?0:24/e/2),d=this.arcPoint(i,o,0,r==="backslash"?24/e/2:0),$=this.arcPoint(i,l,0,r==="backslash"?24/e/2:0),p=`M ${g.x},${g.y} A ${a},${a} 0 ${c} 1 ${u.x},${u.y}`;return p+=`L ${$.x} ${$.y}`,p+=`A ${i},${i} 0 ${h} 0 ${d.x}, ${d.y}`,p+="Z",p}generateZigzagPath(t,r,e){let{upperArcStart:s,upperArcEnd:n,innerArcStart:o,innerArcEnd:l,bigRadius:a,smallRadius:i,largeArcFlagUpper:c,largeArcFlagInner:h,radius:g}=t,u=r/e/2,d=this.arcPoint(g,t.upperAngleStart,-u,3),$=this.arcPoint(g,t.upperAngleStart,0,0),p=this.arcPoint(g,t.upperAngleStart,u,3),A=this.arcPoint(g,t.innerAngleEnd,u,3),P=this.arcPoint(g,t.innerAngleEnd,0,0),x=this.arcPoint(g,t.innerAngleEnd,-u,3),y=`M ${s.x},${s.y} A ${a},${a} 0 ${c} 1 ${n.x},${n.y}`;return y+=`L ${A.x} ${A.y}`,y+=`L ${P.x} ${P.y}`,y+=`L ${x.x} ${x.y}`,y+=`L ${l.x} ${l.y}`,y+=`A ${i},${i} 0 ${h} 0 ${o.x}, ${o.y}`,y+=`L ${d.x} ${d.y}`,y+=`L ${$.x} ${$.y}`,y+=`L ${p.x} ${p.y}`,y+="Z",y}generateDefaultPath(t){let{upperArcStart:r,upperArcEnd:e,innerArcStart:s,innerArcEnd:n,bigRadius:o,smallRadius:l,largeArcFlagUpper:a,largeArcFlagInner:i}=t,c=`M ${r.x},${r.y} A ${o},${o} 0 ${a} 1 ${e.x},${e.y}`;return c+=`L ${n.x} ${n.y}`,c+=`A ${l},${l} 0 ${i} 0 ${s.x}, ${s.y}`,c+="Z",c}};var k=class extends b{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
8
8
|
<style>
|
|
9
9
|
:host {
|
|
10
10
|
--o-fill: var(--o-gray-light);
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
<path class="progress-bg" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
|
|
49
49
|
<path class="progress-bar" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
|
|
50
50
|
</svg>
|
|
51
|
-
`}connectedCallback(){this.update(),this.setupObserver()}setupObserver(){this.observer=new MutationObserver(t=>{this.observer.disconnect(),t.forEach(()=>this.update()),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0})}update(){let t=this.getAttributes(),r=this.calculateArcParameters(t,!0),e=this.calculateArcParameters(t,!1);this.shadowRoot.querySelector(".progress-bg").setAttribute("d",r),this.shadowRoot.querySelector(".progress-bar").setAttribute("d",e)}getAttributes(){let t=super.getCommonAttributes(this),r=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),e=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),
|
|
51
|
+
`}connectedCallback(){this.update(),this.setupObserver()}setupObserver(){this.observer=new MutationObserver(t=>{this.observer.disconnect(),t.forEach(()=>this.update()),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0})}update(){let t=this.getAttributes(),r=this.calculateArcParameters(t,!0),e=this.calculateArcParameters(t,!1);this.shadowRoot.querySelector(".progress-bg").setAttribute("d",r),this.shadowRoot.querySelector(".progress-bar").setAttribute("d",e)}getAttributes(){let t=super.getCommonAttributes(this),r=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),e=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),s=parseFloat(this.getAttribute("max"))||100;return{...t,range:r,progress:e,maxValue:s}}getProgressAngle(t,r){let{range:e,progress:s,maxValue:n}=t;return r?(n-1e-5)/n*e:s/n*e}calculateArcParameters(t,r){let{shape:e,realRadius:s,arcHeightPercentage:n,orbitNumber:o,strokeWidth:l,arcHeight:a}=t,i=this.getProgressAngle(t,r),c=super.calculateCommonArcParameters(i,s,n,o,e,l,a);return super.generatePathData(e,c,a,o)}};var E=document.createElement("template");E.innerHTML=`
|
|
52
52
|
<style>
|
|
53
53
|
:host {
|
|
54
54
|
--o-fill: var(--o-gray-light);
|
|
@@ -93,4 +93,4 @@
|
|
|
93
93
|
<textPath href="#orbitPath" alignment-baseline="middle"></textPath>
|
|
94
94
|
</text>
|
|
95
95
|
</svg>
|
|
96
|
-
`;var
|
|
96
|
+
`;var w=class extends b{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(E.content.cloneNode(!0))}connectedCallback(){this.update(),this.setupObservers()}disconnectedCallback(){this.observer&&this.observer.disconnect(),this.textObserver&&this.textObserver.disconnect()}setupObservers(){this.observer=new MutationObserver(t=>{this.observer.disconnect(),t.forEach(()=>this.update()),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0}),this.textObserver=new MutationObserver(()=>{let t=this.shadowRoot.querySelector("textPath");t.textContent=this.textContent}),this.textObserver.observe(this,{characterData:!0,subtree:!0})}update(){let t=this.getAttributes(),{length:r,fontSize:e,textAnchor:s,fitRange:n}=t,o=this.shadowRoot.querySelector("#orbitPath"),l=this.shadowRoot.querySelector("#orbitShape"),a=this.shadowRoot.querySelector("textPath");l.setAttribute("d",this.calculateArcParameters(t).dShape),o.setAttribute("d",this.calculateTextArcParameters(t).dPath),s==="start"?(a.setAttribute("startOffset","0%"),a.setAttribute("text-anchor","start")):s==="middle"?(a.setAttribute("startOffset","50%"),a.setAttribute("text-anchor","middle")):s==="end"&&(a.setAttribute("startOffset","100%"),a.setAttribute("text-anchor","end")),n&&a.parentElement.setAttribute("textLength",o.getTotalLength()),a.parentElement.style.fontSize=`calc(${e} * (100 / (${r}) * (12 / var(--o-orbit-number)))`,a.textContent=this.textContent}getAttributes(){let t=super.getCommonAttributes(this),r,e=this.hasAttribute("flip")||this.classList.contains("flip"),s=this.hasAttribute("fit-range")||this.classList.contains("fit-range")||!1,n=parseFloat(getComputedStyle(this).getPropertyValue("--o-force"))||100,o=this.getAttribute("text-anchor")||"middle",l=getComputedStyle(this).getPropertyValue("font-size")||getComputedStyle(this).getPropertyValue("--font-size"),a=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),i=parseFloat(this.getAttribute("value")),c=parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"))||1;if(i){r=super.getProgressAngle(a,i);let h=this.previousElementSibling,g=h?parseFloat(getComputedStyle(h).getPropertyValue("--o_stack")):0;this.style.setProperty("--o_stack",g+r),g>=0&&e&&this.style.setProperty("--o-angle-composite",parseFloat(g)+"deg"),g>0&&!e&&this.style.setProperty("--o-angle-composite",parseFloat(g)+"deg")}else{let h=getComputedStyle(this).getPropertyValue("--o-angle");r=this.calcularExpresionCSS(h)}return{...t,gap:c,arcAngle:r,flip:e,fitRange:s,length:n,fontSize:l,textAnchor:o}}calculateArcParameters(t){let{arcAngle:r,realRadius:e,arcHeightPercentage:s,orbitNumber:n,shape:o,strokeWidth:l,arcHeight:a,gap:i}=t,c=super.calculateCommonArcParameters(r,e,s,n,o,l,a,i);return{dShape:super.generatePathData(o,c,a,n)}}calculateTextArcParameters(t){let{arcAngle:r,realRadius:e,gap:s,flip:n}=t,o=s*.5,l=n?0:1,a=r<=180?0:1,i=50+e*Math.cos((-90+o)*(Math.PI/180)),c=50+e*Math.sin((-90+o)*(Math.PI/180)),h=50+e*Math.cos((r-90-o)*Math.PI/180),g=50+e*Math.sin((r-90-o)*Math.PI/180),[u,d,$,p]=n?[h,g,i,c]:[i,c,h,g];return{dPath:`M ${u},${d} A ${e},${e} 0 ${a} ${l} ${$},${p}`}}calcularExpresionCSS(t){let r=t.match(/calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/);if(r){let e=parseFloat(r[1]),s=parseInt(r[2])-parseInt(r[3]);if(!isNaN(e)&&!isNaN(s)&&s!==0)return e/s}return 0}};var R={resize(v){let t=document.querySelector(v);if(!t){console.error("Orbit.resize: element not found:",v);return}let r=n=>{t.querySelectorAll(".gravity-spot").forEach(o=>{o.style.setProperty("--o-force-ratio",String(n/500))})},e=t.offsetWidth||t.getBoundingClientRect().width;e>0?r(e):requestAnimationFrame(()=>{e=t.offsetWidth||t.getBoundingClientRect().width,e>0&&r(e)}),new ResizeObserver(n=>{for(let o of n)o.contentRect.width>0&&r(o.contentRect.width)}).observe(t)}};customElements.get("o-progress")||customElements.define("o-progress",k);customElements.get("o-arc")||customElements.define("o-arc",w);window.Orbit=R;})();
|