@zumer/orbit 1.2.1 → 1.3.0
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 +249 -71
- 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.
|
|
4
|
+
* v.1.3.0
|
|
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-18419-3punuh5JJgqY/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.
|
|
4
|
+
* v.1.3.0
|
|
5
5
|
* Author Juan Martin Muda - Zumerlab
|
|
6
6
|
* License MIT
|
|
7
7
|
**/
|
|
@@ -112,56 +112,141 @@
|
|
|
112
112
|
maxValue,
|
|
113
113
|
shape,
|
|
114
114
|
arcHeightPercentage,
|
|
115
|
-
orbitNumber
|
|
115
|
+
orbitNumber,
|
|
116
|
+
arcHeight
|
|
116
117
|
};
|
|
117
118
|
}
|
|
118
119
|
getProgressAngle(full) {
|
|
119
120
|
const { maxAngle, progress, maxValue } = this.getAttributes();
|
|
120
121
|
return full ? (maxValue - 1e-5) / maxValue * maxAngle : progress / maxValue * maxAngle;
|
|
121
122
|
}
|
|
123
|
+
getControlPoint(x, y, x1, y1, direction = "clockwise") {
|
|
124
|
+
let xm = (x + x1) / 2;
|
|
125
|
+
let ym = (y + y1) / 2;
|
|
126
|
+
let dx = x1 - x;
|
|
127
|
+
let dy = y1 - y;
|
|
128
|
+
let xc, yc;
|
|
129
|
+
if (direction === "clockwise") {
|
|
130
|
+
xc = xm + dy * 0.4;
|
|
131
|
+
yc = ym - dx * 0.4;
|
|
132
|
+
} else {
|
|
133
|
+
xc = xm - dy * 0.4;
|
|
134
|
+
yc = ym + dx * 0.4;
|
|
135
|
+
}
|
|
136
|
+
return { xc, yc };
|
|
137
|
+
}
|
|
138
|
+
arcPoint(radius, angle, radiusAdjustment = 0, angleOffsetDegrees = 0) {
|
|
139
|
+
const adjustedRadius = radius + radiusAdjustment;
|
|
140
|
+
const adjustedAngle = angle + angleOffsetDegrees * Math.PI / 180;
|
|
141
|
+
return {
|
|
142
|
+
x: 50 + adjustedRadius * Math.cos(adjustedAngle),
|
|
143
|
+
y: 50 + adjustedRadius * Math.sin(adjustedAngle)
|
|
144
|
+
};
|
|
145
|
+
}
|
|
122
146
|
calculateArcParameters(full) {
|
|
123
147
|
const arcAngle = this.getProgressAngle(full);
|
|
124
|
-
const { realRadius, arcHeightPercentage, orbitNumber, shape, strokeWidth } = this.getAttributes();
|
|
148
|
+
const { realRadius, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight } = this.getAttributes();
|
|
125
149
|
const radius = realRadius;
|
|
126
|
-
let
|
|
150
|
+
let largeArcFlag, d;
|
|
127
151
|
let offset = Math.PI / 2;
|
|
128
152
|
let stroke = strokeWidth;
|
|
129
153
|
let fangle = arcAngle * Math.PI / 180;
|
|
130
154
|
let bigRadius = radius + arcHeightPercentage;
|
|
131
155
|
let smallRadius = radius - arcHeightPercentage !== 0 ? radius - arcHeightPercentage : radius;
|
|
132
|
-
let bigGap = stroke *
|
|
133
|
-
let smallGap = stroke *
|
|
134
|
-
let
|
|
135
|
-
let
|
|
136
|
-
let
|
|
137
|
-
let
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
pointX = 50 + bigRadius * Math.cos(endAngle + 3 * Math.PI / 180);
|
|
143
|
-
pointY = 50 + bigRadius * Math.sin(endAngle + 3 * Math.PI / 180);
|
|
144
|
-
startX1 = 50 + smallRadius * Math.cos(startAngle1);
|
|
145
|
-
startY1 = 50 + smallRadius * Math.sin(startAngle1);
|
|
146
|
-
endX1 = 50 + smallRadius * Math.cos(endAngle1);
|
|
147
|
-
endY1 = 50 + smallRadius * Math.sin(endAngle1);
|
|
148
|
-
pointX1 = 50 + smallRadius * Math.cos(endAngle1 + 3 * Math.PI / 180);
|
|
149
|
-
pointY1 = 50 + smallRadius * Math.sin(endAngle1 + 3 * Math.PI / 180);
|
|
156
|
+
let bigGap = stroke * 1.25 / orbitNumber / bigRadius;
|
|
157
|
+
let smallGap = stroke * 1.25 / orbitNumber / smallRadius;
|
|
158
|
+
let upperAngleStart = bigGap - offset;
|
|
159
|
+
let upperAngleEnd = fangle - bigGap - offset;
|
|
160
|
+
let innerAngleStart = smallGap - offset;
|
|
161
|
+
let innerAngleEnd = fangle - smallGap - offset;
|
|
162
|
+
let upperArcStart = this.arcPoint(bigRadius, upperAngleStart);
|
|
163
|
+
let upperArcEnd = this.arcPoint(bigRadius, upperAngleEnd);
|
|
164
|
+
let innerArcStart = this.arcPoint(smallRadius, innerAngleStart);
|
|
165
|
+
let innerArcEnd = this.arcPoint(smallRadius, innerAngleEnd);
|
|
150
166
|
largeArcFlag = arcAngle <= 180 ? 0 : 1;
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
167
|
+
if (shape === "rounded") {
|
|
168
|
+
let curve = arcHeight < 10 ? 5 : arcHeight < 5 ? 2.5 : 10;
|
|
169
|
+
let newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, curve / orbitNumber);
|
|
170
|
+
let newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, -curve / orbitNumber);
|
|
171
|
+
let newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, curve / orbitNumber);
|
|
172
|
+
let newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, -curve / orbitNumber);
|
|
173
|
+
let upperPointStart = this.arcPoint(bigRadius, upperAngleStart, -(curve / 2) / orbitNumber, 0);
|
|
174
|
+
let upperPointEnd = this.arcPoint(bigRadius, upperAngleEnd, -(curve / 2) / orbitNumber, 0);
|
|
175
|
+
let innerPointStart = this.arcPoint(smallRadius, innerAngleStart, curve / 2 / orbitNumber, 0);
|
|
176
|
+
let innerPointEnd = this.arcPoint(smallRadius, innerAngleEnd, curve / 2 / orbitNumber, 0);
|
|
177
|
+
let Q = this.getControlPoint(newUpperEnd.x, newUpperEnd.y, upperPointEnd.x, upperPointEnd.y);
|
|
178
|
+
let Q1 = this.getControlPoint(innerPointEnd.x, innerPointEnd.y, newInnerEnd.x, newInnerEnd.y);
|
|
179
|
+
let Q2 = this.getControlPoint(newInnerStart.x, newInnerStart.y, innerPointStart.x, innerPointStart.y);
|
|
180
|
+
let Q3 = this.getControlPoint(upperPointStart.x, upperPointStart.y, newUpperStart.x, newUpperStart.y);
|
|
181
|
+
d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
182
|
+
d += `Q ${Q.xc}, ${Q.yc} ${upperPointEnd.x} ${upperPointEnd.y} `;
|
|
183
|
+
d += `L ${upperPointEnd.x} ${upperPointEnd.y}`;
|
|
184
|
+
d += `L ${innerPointEnd.x} ${innerPointEnd.y}`;
|
|
185
|
+
d += `Q ${Q1.xc}, ${Q1.yc} ${newInnerEnd.x} ${newInnerEnd.y} `;
|
|
186
|
+
d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
|
|
187
|
+
d += `Q ${Q2.xc}, ${Q2.yc} ${innerPointStart.x} ${innerPointStart.y} `;
|
|
188
|
+
d += `L ${innerPointStart.x} ${innerPointStart.y}`;
|
|
189
|
+
d += `L ${upperPointStart.x} ${upperPointStart.y}`;
|
|
190
|
+
d += ` Q ${Q3.xc}, ${Q3.yc} ${newUpperStart.x} ${newUpperStart.y} `;
|
|
191
|
+
d += ` Z`;
|
|
192
|
+
} else if (shape === "circle" || shape === "circle-a" || shape === "bullet") {
|
|
193
|
+
d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
194
|
+
d += ` A 1,1 0 0 1 ${innerArcEnd.x},${innerArcEnd.y} `;
|
|
195
|
+
d += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x},${innerArcStart.y}`;
|
|
196
|
+
d += ` A 1,1 0 0 ${shape === "circle" || shape === "circle-a" ? 1 : 0} ${upperArcStart.x},${upperArcStart.y} `;
|
|
197
|
+
d += ` Z`;
|
|
198
|
+
} else if (shape === "circle-b") {
|
|
199
|
+
let segment = arcHeight * 1.36;
|
|
200
|
+
let newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, segment / orbitNumber);
|
|
201
|
+
let newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, -(segment / orbitNumber));
|
|
202
|
+
let newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, segment / orbitNumber);
|
|
203
|
+
let newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, -(segment / orbitNumber));
|
|
204
|
+
d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
205
|
+
d += ` A 1,1 0 0 1 ${newInnerEnd.x},${newInnerEnd.y} `;
|
|
206
|
+
d += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
|
|
207
|
+
d += ` A 1,1 0 0 1 ${newUpperStart.x},${newUpperStart.y} `;
|
|
208
|
+
d += ` Z`;
|
|
209
|
+
} else if (shape === "arrow") {
|
|
210
|
+
let middleEnd = this.arcPoint(radius, upperAngleEnd, 0, 24 / orbitNumber / 2);
|
|
211
|
+
let middleStart = this.arcPoint(radius, upperAngleStart, 0, 24 / orbitNumber / 2);
|
|
212
|
+
d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
213
|
+
d += `L ${middleEnd.x} ${middleEnd.y}`;
|
|
214
|
+
d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
215
|
+
d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
216
|
+
d += `L ${middleStart.x} ${middleStart.y} `;
|
|
217
|
+
d += `Z`;
|
|
218
|
+
} else if (shape === "backslash" || shape === "slash") {
|
|
219
|
+
let newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
|
|
220
|
+
let newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
|
|
221
|
+
let newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
|
|
222
|
+
let newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
|
|
223
|
+
d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
224
|
+
d += `L ${newInnerEnd.x} ${newInnerEnd.y}`;
|
|
225
|
+
d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x}, ${newInnerStart.y}`;
|
|
226
|
+
d += `Z`;
|
|
227
|
+
} else if (shape === "zigzag") {
|
|
228
|
+
let s2 = this.arcPoint(radius, upperAngleStart, -arcHeight / orbitNumber / 2, 3);
|
|
229
|
+
let s3 = this.arcPoint(radius, upperAngleStart, 0 / orbitNumber / 2, 0);
|
|
230
|
+
let s4 = this.arcPoint(radius, upperAngleStart, arcHeight / orbitNumber / 2, 3);
|
|
231
|
+
let e2 = this.arcPoint(radius, innerAngleEnd, arcHeight / orbitNumber / 2, 3);
|
|
232
|
+
let e3 = this.arcPoint(radius, innerAngleEnd, 0 / orbitNumber / 2, 0);
|
|
233
|
+
let e4 = this.arcPoint(radius, innerAngleEnd, -arcHeight / orbitNumber / 2, 3);
|
|
234
|
+
d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
235
|
+
d += `L ${e2.x} ${e2.y}`;
|
|
236
|
+
d += `L ${e3.x} ${e3.y}`;
|
|
237
|
+
d += `L ${e4.x} ${e4.y}`;
|
|
238
|
+
d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
239
|
+
d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
240
|
+
d += `L ${s2.x} ${s2.y}`;
|
|
241
|
+
d += `L ${s3.x} ${s3.y}`;
|
|
242
|
+
d += `L ${s4.x} ${s4.y}`;
|
|
243
|
+
d += `Z`;
|
|
244
|
+
} else {
|
|
245
|
+
d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
246
|
+
d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
247
|
+
d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
248
|
+
d += `Z`;
|
|
249
|
+
}
|
|
165
250
|
return { d };
|
|
166
251
|
}
|
|
167
252
|
};
|
|
@@ -196,7 +281,7 @@
|
|
|
196
281
|
stroke: var(--o-stroke);
|
|
197
282
|
stroke-width: var(--o-stroke-width);
|
|
198
283
|
transition: fill 0.25s, stroke 0.25s;
|
|
199
|
-
|
|
284
|
+
|
|
200
285
|
}
|
|
201
286
|
text {
|
|
202
287
|
fill: var(--o-color);
|
|
@@ -231,6 +316,15 @@
|
|
|
231
316
|
this.observer.observe(this, { attributes: true, childList: true });
|
|
232
317
|
});
|
|
233
318
|
this.observer.observe(this, { attributes: true, childList: true });
|
|
319
|
+
this.textObserver = new MutationObserver(() => {
|
|
320
|
+
const textPath = this.shadowRoot.querySelector("textPath");
|
|
321
|
+
textPath.textContent = this.textContent;
|
|
322
|
+
});
|
|
323
|
+
this.textObserver.observe(this, { characterData: true, subtree: true });
|
|
324
|
+
}
|
|
325
|
+
disconnectedCallback() {
|
|
326
|
+
this.observer.disconnect();
|
|
327
|
+
this.textObserver.disconnect();
|
|
234
328
|
}
|
|
235
329
|
update() {
|
|
236
330
|
const { length, fontSize, textAnchor, fitRange } = this.getAttributes();
|
|
@@ -323,48 +417,132 @@
|
|
|
323
417
|
const maxValue = parseFloat(this.getAttribute("max")) || 100;
|
|
324
418
|
return progress / maxValue * maxAngle;
|
|
325
419
|
}
|
|
420
|
+
getControlPoint(x, y, x1, y1, direction = "clockwise") {
|
|
421
|
+
let xm = (x + x1) / 2;
|
|
422
|
+
let ym = (y + y1) / 2;
|
|
423
|
+
let dx = x1 - x;
|
|
424
|
+
let dy = y1 - y;
|
|
425
|
+
let xc, yc;
|
|
426
|
+
if (direction === "clockwise") {
|
|
427
|
+
xc = xm + dy * 0.4;
|
|
428
|
+
yc = ym - dx * 0.4;
|
|
429
|
+
} else {
|
|
430
|
+
xc = xm - dy * 0.4;
|
|
431
|
+
yc = ym + dx * 0.4;
|
|
432
|
+
}
|
|
433
|
+
return { xc, yc };
|
|
434
|
+
}
|
|
435
|
+
arcPoint(radius, angle, radiusAdjustment = 0, angleOffsetDegrees = 0) {
|
|
436
|
+
const adjustedRadius = radius + radiusAdjustment;
|
|
437
|
+
const adjustedAngle = angle + angleOffsetDegrees * Math.PI / 180;
|
|
438
|
+
return {
|
|
439
|
+
x: 50 + adjustedRadius * Math.cos(adjustedAngle),
|
|
440
|
+
y: 50 + adjustedRadius * Math.sin(adjustedAngle)
|
|
441
|
+
};
|
|
442
|
+
}
|
|
326
443
|
calculateArcParameters() {
|
|
327
|
-
const { arcAngle, realRadius, gap, arcHeightPercentage, orbitNumber, shape, strokeWidth } = this.getAttributes();
|
|
444
|
+
const { arcAngle, realRadius, gap, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight } = this.getAttributes();
|
|
328
445
|
const radius = realRadius;
|
|
329
|
-
let
|
|
446
|
+
let largeArcFlag, dShape;
|
|
330
447
|
let offset = Math.PI / 2;
|
|
331
448
|
let stroke = strokeWidth;
|
|
332
449
|
let fangle = arcAngle * Math.PI / 180;
|
|
333
450
|
let bigRadius = radius + arcHeightPercentage;
|
|
334
451
|
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
|
-
pointX = 50 + bigRadius * Math.cos(endAngle + 3 * Math.PI / 180);
|
|
346
|
-
pointY = 50 + bigRadius * Math.sin(endAngle + 3 * Math.PI / 180);
|
|
347
|
-
startX1 = 50 + smallRadius * Math.cos(startAngle1);
|
|
348
|
-
startY1 = 50 + smallRadius * Math.sin(startAngle1);
|
|
349
|
-
endX1 = 50 + smallRadius * Math.cos(endAngle1);
|
|
350
|
-
endY1 = 50 + smallRadius * Math.sin(endAngle1);
|
|
351
|
-
pointX1 = 50 + smallRadius * Math.cos(endAngle1 + 3 * Math.PI / 180);
|
|
352
|
-
pointY1 = 50 + smallRadius * Math.sin(endAngle1 + 3 * Math.PI / 180);
|
|
452
|
+
let bigGap = (gap + stroke * 1.25) / orbitNumber / bigRadius;
|
|
453
|
+
let smallGap = (gap + stroke * 1.25) / orbitNumber / smallRadius;
|
|
454
|
+
let upperAngleStart = bigGap - offset;
|
|
455
|
+
let upperAngleEnd = fangle - bigGap - offset;
|
|
456
|
+
let innerAngleStart = smallGap - offset;
|
|
457
|
+
let innerAngleEnd = fangle - smallGap - offset;
|
|
458
|
+
let upperArcStart = this.arcPoint(bigRadius, upperAngleStart);
|
|
459
|
+
let upperArcEnd = this.arcPoint(bigRadius, upperAngleEnd);
|
|
460
|
+
let innerArcStart = this.arcPoint(smallRadius, innerAngleStart);
|
|
461
|
+
let innerArcEnd = this.arcPoint(smallRadius, innerAngleEnd);
|
|
353
462
|
largeArcFlag = arcAngle <= 180 ? 0 : 1;
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
463
|
+
if (shape === "rounded") {
|
|
464
|
+
let curve = arcHeight < 10 ? 5 : arcHeight < 5 ? 2.5 : 10;
|
|
465
|
+
let newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, curve / orbitNumber);
|
|
466
|
+
let newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, -curve / orbitNumber);
|
|
467
|
+
let newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, curve / orbitNumber);
|
|
468
|
+
let newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, -curve / orbitNumber);
|
|
469
|
+
let upperPointStart = this.arcPoint(bigRadius, upperAngleStart, -(curve / 2) / orbitNumber, 0);
|
|
470
|
+
let upperPointEnd = this.arcPoint(bigRadius, upperAngleEnd, -(curve / 2) / orbitNumber, 0);
|
|
471
|
+
let innerPointStart = this.arcPoint(smallRadius, innerAngleStart, curve / 2 / orbitNumber, 0);
|
|
472
|
+
let innerPointEnd = this.arcPoint(smallRadius, innerAngleEnd, curve / 2 / orbitNumber, 0);
|
|
473
|
+
let Q = this.getControlPoint(newUpperEnd.x, newUpperEnd.y, upperPointEnd.x, upperPointEnd.y);
|
|
474
|
+
let Q1 = this.getControlPoint(innerPointEnd.x, innerPointEnd.y, newInnerEnd.x, newInnerEnd.y);
|
|
475
|
+
let Q2 = this.getControlPoint(newInnerStart.x, newInnerStart.y, innerPointStart.x, innerPointStart.y);
|
|
476
|
+
let Q3 = this.getControlPoint(upperPointStart.x, upperPointStart.y, newUpperStart.x, newUpperStart.y);
|
|
477
|
+
dShape = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
478
|
+
dShape += `Q ${Q.xc}, ${Q.yc} ${upperPointEnd.x} ${upperPointEnd.y} `;
|
|
479
|
+
dShape += `L ${upperPointEnd.x} ${upperPointEnd.y}`;
|
|
480
|
+
dShape += `L ${innerPointEnd.x} ${innerPointEnd.y}`;
|
|
481
|
+
dShape += `Q ${Q1.xc}, ${Q1.yc} ${newInnerEnd.x} ${newInnerEnd.y} `;
|
|
482
|
+
dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
|
|
483
|
+
dShape += `Q ${Q2.xc}, ${Q2.yc} ${innerPointStart.x} ${innerPointStart.y} `;
|
|
484
|
+
dShape += `L ${innerPointStart.x} ${innerPointStart.y}`;
|
|
485
|
+
dShape += `L ${upperPointStart.x} ${upperPointStart.y}`;
|
|
486
|
+
dShape += ` Q ${Q3.xc}, ${Q3.yc} ${newUpperStart.x} ${newUpperStart.y} `;
|
|
487
|
+
dShape += ` Z`;
|
|
488
|
+
} else if (shape === "circle" || shape === "circle-a" || shape === "bullet") {
|
|
489
|
+
dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
490
|
+
dShape += ` A 1,1 0 0 1 ${innerArcEnd.x},${innerArcEnd.y} `;
|
|
491
|
+
dShape += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x},${innerArcStart.y}`;
|
|
492
|
+
dShape += ` A 1,1 0 0 ${shape === "circle" || shape === "circle-a" ? 1 : 0} ${upperArcStart.x},${upperArcStart.y} `;
|
|
493
|
+
dShape += ` Z`;
|
|
494
|
+
} else if (shape === "circle-b") {
|
|
495
|
+
let segment = arcHeight * 1.36;
|
|
496
|
+
let newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, segment / orbitNumber);
|
|
497
|
+
let newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, -(segment / orbitNumber));
|
|
498
|
+
let newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, segment / orbitNumber);
|
|
499
|
+
let newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, -(segment / orbitNumber));
|
|
500
|
+
dShape = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
501
|
+
dShape += ` A 1,1 0 0 1 ${newInnerEnd.x},${newInnerEnd.y} `;
|
|
502
|
+
dShape += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
|
|
503
|
+
dShape += ` A 1,1 0 0 1 ${newUpperStart.x},${newUpperStart.y} `;
|
|
504
|
+
dShape += ` Z`;
|
|
505
|
+
} else if (shape === "arrow") {
|
|
506
|
+
let middleEnd = this.arcPoint(radius, upperAngleEnd, 0, 24 / orbitNumber / 2);
|
|
507
|
+
let middleStart = this.arcPoint(radius, upperAngleStart, 0, 24 / orbitNumber / 2);
|
|
508
|
+
dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
509
|
+
dShape += `L ${middleEnd.x} ${middleEnd.y}`;
|
|
510
|
+
dShape += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
511
|
+
dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
512
|
+
dShape += `L ${middleStart.x} ${middleStart.y} `;
|
|
513
|
+
dShape += `Z`;
|
|
514
|
+
} else if (shape === "backslash" || shape === "slash") {
|
|
515
|
+
let newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
|
|
516
|
+
let newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
|
|
517
|
+
let newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
|
|
518
|
+
let newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
|
|
519
|
+
dShape = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
520
|
+
dShape += `L ${newInnerEnd.x} ${newInnerEnd.y}`;
|
|
521
|
+
dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x}, ${newInnerStart.y}`;
|
|
522
|
+
dShape += `Z`;
|
|
523
|
+
} else if (shape === "zigzag") {
|
|
524
|
+
let s2 = this.arcPoint(radius, upperAngleStart, -arcHeight / orbitNumber / 2, 3);
|
|
525
|
+
let s3 = this.arcPoint(radius, upperAngleStart, 0 / orbitNumber / 2, 0);
|
|
526
|
+
let s4 = this.arcPoint(radius, upperAngleStart, arcHeight / orbitNumber / 2, 3);
|
|
527
|
+
let e2 = this.arcPoint(radius, innerAngleEnd, arcHeight / orbitNumber / 2, 3);
|
|
528
|
+
let e3 = this.arcPoint(radius, innerAngleEnd, 0 / orbitNumber / 2, 0);
|
|
529
|
+
let e4 = this.arcPoint(radius, innerAngleEnd, -arcHeight / orbitNumber / 2, 3);
|
|
530
|
+
dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
531
|
+
dShape += `L ${e2.x} ${e2.y}`;
|
|
532
|
+
dShape += `L ${e3.x} ${e3.y}`;
|
|
533
|
+
dShape += `L ${e4.x} ${e4.y}`;
|
|
534
|
+
dShape += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
535
|
+
dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
536
|
+
dShape += `L ${s2.x} ${s2.y}`;
|
|
537
|
+
dShape += `L ${s3.x} ${s3.y}`;
|
|
538
|
+
dShape += `L ${s4.x} ${s4.y}`;
|
|
539
|
+
dShape += `Z`;
|
|
540
|
+
} else {
|
|
541
|
+
dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
542
|
+
dShape += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
|
|
543
|
+
dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
|
|
544
|
+
dShape += `Z`;
|
|
545
|
+
}
|
|
368
546
|
return { dShape };
|
|
369
547
|
}
|
|
370
548
|
calculateTextArcParameters() {
|
package/dist/orbit.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(()=>{var
|
|
1
|
+
(()=>{var U=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(i=>{this.observer.disconnect(),i.forEach(c=>{this.update()}),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0})}update(){let i=this.shadowRoot.querySelector(".progress-bg"),c=this.shadowRoot.querySelector(".progress-bar");this.updateArc(i,!0),this.updateArc(c,!1)}updateArc(i,c){let{d:g}=this.calculateArcParameters(c);i.setAttribute("d",g)}getAttributes(){let i=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),c=parseFloat(getComputedStyle(this).getPropertyValue("--o-orbit-number")),g=parseFloat(getComputedStyle(this).getPropertyValue("--o-size-ratio")),p=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),e=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),r=this.getAttribute("shape")||"none",y=parseFloat(getComputedStyle(this).getPropertyValue("--o-stroke-width")),$=i/c*g-y+.3,a=$/2*100/i/2,n=p,t=parseFloat(this.getAttribute("max"))||100,x;this.classList.contains("outer-orbit")?x=a:this.classList.contains("quarter-outer-orbit")?x=a*-.5:this.classList.contains("inner-orbit")?x=a*-1:this.classList.contains("quarter-inner-orbit")?x=a*.5:x=0;let E=50+x;return{orbitRadius:i,progress:e,strokeWidth:y,realRadius:E,maxAngle:n,maxValue:t,shape:r,arcHeightPercentage:a,orbitNumber:c,arcHeight:$}}getProgressAngle(i){let{maxAngle:c,progress:g,maxValue:p}=this.getAttributes();return i?(p-1e-5)/p*c:g/p*c}getControlPoint(i,c,g,p,e="clockwise"){let r=(i+g)/2,y=(c+p)/2,$=g-i,a=p-c,n,t;return e==="clockwise"?(n=r+a*.4,t=y-$*.4):(n=r-a*.4,t=y+$*.4),{xc:n,yc:t}}arcPoint(i,c,g=0,p=0){let e=i+g,r=c+p*Math.PI/180;return{x:50+e*Math.cos(r),y:50+e*Math.sin(r)}}calculateArcParameters(i){let c=this.getProgressAngle(i),{realRadius:g,arcHeightPercentage:p,orbitNumber:e,shape:r,strokeWidth:y,arcHeight:$}=this.getAttributes(),a=g,n,t,x=Math.PI/2,E=y,I=c*Math.PI/180,s=a+p,o=a-p!==0?a-p:a,M=E*1.25/e/s,V=E*1.25/e/o,P=M-x,S=I-M-x,A=V-x,m=I-V-x,b=this.arcPoint(s,P),v=this.arcPoint(s,S),w=this.arcPoint(o,A),k=this.arcPoint(o,m);if(n=c<=180?0:1,r==="rounded"){let l=$<10?5:$<5?2.5:10,h=this.arcPoint(s,P,0,l/e),u=this.arcPoint(s,S,0,-l/e),d=this.arcPoint(o,A,0,l/e),f=this.arcPoint(o,m,0,-l/e),L=this.arcPoint(s,P,-(l/2)/e,0),C=this.arcPoint(s,S,-(l/2)/e,0),R=this.arcPoint(o,A,l/2/e,0),F=this.arcPoint(o,m,l/2/e,0),z=this.getControlPoint(u.x,u.y,C.x,C.y),Q=this.getControlPoint(F.x,F.y,f.x,f.y),Z=this.getControlPoint(d.x,d.y,R.x,R.y),H=this.getControlPoint(L.x,L.y,h.x,h.y);t=`M ${h.x},${h.y} A ${s},${s} 0 ${n} 1 ${u.x},${u.y}`,t+=`Q ${z.xc}, ${z.yc} ${C.x} ${C.y} `,t+=`L ${C.x} ${C.y}`,t+=`L ${F.x} ${F.y}`,t+=`Q ${Q.xc}, ${Q.yc} ${f.x} ${f.y} `,t+=`A ${o},${o} 0 ${n} 0 ${d.x},${d.y}`,t+=`Q ${Z.xc}, ${Z.yc} ${R.x} ${R.y} `,t+=`L ${R.x} ${R.y}`,t+=`L ${L.x} ${L.y}`,t+=` Q ${H.xc}, ${H.yc} ${h.x} ${h.y} `,t+=" Z"}else if(r==="circle"||r==="circle-a"||r==="bullet")t=`M ${b.x},${b.y} A ${s},${s} 0 ${n} 1 ${v.x},${v.y}`,t+=` A 1,1 0 0 1 ${k.x},${k.y} `,t+=` A ${o},${o} 0 ${n} 0 ${w.x},${w.y}`,t+=` A 1,1 0 0 ${r==="circle"||r==="circle-a"?1:0} ${b.x},${b.y} `,t+=" Z";else if(r==="circle-b"){let l=$*1.36,h=this.arcPoint(s,P,0,l/e),u=this.arcPoint(s,S,0,-(l/e)),d=this.arcPoint(o,A,0,l/e),f=this.arcPoint(o,m,0,-(l/e));t=`M ${h.x},${h.y} A ${s},${s} 0 ${n} 1 ${u.x},${u.y}`,t+=` A 1,1 0 0 1 ${f.x},${f.y} `,t+=` A ${o},${o} 0 ${n} 0 ${d.x},${d.y}`,t+=` A 1,1 0 0 1 ${h.x},${h.y} `,t+=" Z"}else if(r==="arrow"){let l=this.arcPoint(a,S,0,24/e/2),h=this.arcPoint(a,P,0,24/e/2);t=`M ${b.x},${b.y} A ${s},${s} 0 ${n} 1 ${v.x},${v.y}`,t+=`L ${l.x} ${l.y}`,t+=`L ${k.x} ${k.y}`,t+=`A ${o},${o} 0 ${n} 0 ${w.x}, ${w.y}`,t+=`L ${h.x} ${h.y} `,t+="Z"}else if(r==="backslash"||r==="slash"){let l=this.arcPoint(s,P,0,r==="backslash"?0:24/e/2),h=this.arcPoint(s,S,0,r==="backslash"?0:24/e/2),u=this.arcPoint(o,A,0,r==="backslash"?24/e/2:0),d=this.arcPoint(o,m,0,r==="backslash"?24/e/2:0);t=`M ${l.x},${l.y} A ${s},${s} 0 ${n} 1 ${h.x},${h.y}`,t+=`L ${d.x} ${d.y}`,t+=`A ${o},${o} 0 ${n} 0 ${u.x}, ${u.y}`,t+="Z"}else if(r==="zigzag"){let l=this.arcPoint(a,P,-$/e/2,3),h=this.arcPoint(a,P,0/e/2,0),u=this.arcPoint(a,P,$/e/2,3),d=this.arcPoint(a,m,$/e/2,3),f=this.arcPoint(a,m,0/e/2,0),L=this.arcPoint(a,m,-$/e/2,3);t=`M ${b.x},${b.y} A ${s},${s} 0 ${n} 1 ${v.x},${v.y}`,t+=`L ${d.x} ${d.y}`,t+=`L ${f.x} ${f.y}`,t+=`L ${L.x} ${L.y}`,t+=`L ${k.x} ${k.y}`,t+=`A ${o},${o} 0 ${n} 0 ${w.x}, ${w.y}`,t+=`L ${l.x} ${l.y}`,t+=`L ${h.x} ${h.y}`,t+=`L ${u.x} ${u.y}`,t+="Z"}else t=`M ${b.x},${b.y} A ${s},${s} 0 ${n} 1 ${v.x},${v.y}`,t+=`L ${k.x} ${k.y}`,t+=`A ${o},${o} 0 ${n} 0 ${w.x}, ${w.y}`,t+="Z";return{d:t}}};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(i=>{this.observer.disconnect(),i.forEach(c=>{this.update()}),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0}),this.textObserver=new MutationObserver(()=>{let i=this.shadowRoot.querySelector("textPath");i.textContent=this.textContent}),this.textObserver.observe(this,{characterData:!0,subtree:!0})}disconnectedCallback(){this.observer.disconnect(),this.textObserver.disconnect()}update(){let{length:i,fontSize:c,textAnchor:g,fitRange:p}=this.getAttributes(),e=this.shadowRoot.getElementById("orbitPath"),r=this.shadowRoot.getElementById("orbitShape"),y=this.shadowRoot.querySelector("text"),$=this.shadowRoot.querySelector("textPath"),{dShape:a}=this.calculateArcParameters(),{dPath:n}=this.calculateTextArcParameters();r.setAttribute("d",a),e.setAttribute("d",n),g==="start"?($.setAttribute("startOffset","0%"),$.setAttribute("text-anchor","start")):g==="middle"?($.setAttribute("startOffset","50%"),$.setAttribute("text-anchor","middle")):g==="end"&&($.setAttribute("startOffset","100%"),$.setAttribute("text-anchor","end")),p&&$.parentElement.setAttribute("textLength",e.getTotalLength()),y.style.fontSize=`calc(${c} * (100 / (${i}) * (12 / var(--o-orbit-number) ))`,$.textContent=this.textContent}getAttributes(){let i,c,g,p,e,r=parseFloat(getComputedStyle(this).getPropertyValue("--o-stroke-width")),y=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),$=this.getAttribute("shape")||"none",a=this.hasAttribute("flip")||this.classList.contains("flip"),n=this.hasAttribute("fit-range")||this.classList.contains("fit-range")||!1,t=parseFloat(getComputedStyle(this).getPropertyValue("--o-force")),x=this.getAttribute("text-anchor")||"middle",E=getComputedStyle(this).getPropertyValue("font-size")||getComputedStyle(this).getPropertyValue("--font-size"),I=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),s=parseFloat(this.getAttribute("value"));if(s){c=this.getProgressAngle(I,s);let S=this.previousElementSibling,A=S?parseFloat(getComputedStyle(S).getPropertyValue("--o_stack")):0;this.style.setProperty("--o_stack",A+c),A>=0&&a&&this.style.setProperty("--o-angle-composite",parseFloat(A)+"deg"),A>0&&!a&&this.style.setProperty("--o-angle-composite",parseFloat(A)+"deg")}else i=getComputedStyle(this).getPropertyValue("--o-angle"),c=j(i);g=parseFloat(getComputedStyle(this).getPropertyValue("--o-orbit-number")),p=parseFloat(getComputedStyle(this).getPropertyValue("--o-size-ratio"));let o=y/g*p-r+.3,M=o/2*100/y/2,V=parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));this.classList.contains("outer-orbit")?e=M:this.classList.contains("quarter-outer-orbit")?e=M*-.5:this.classList.contains("inner-orbit")?e=M*-1:this.classList.contains("quarter-inner-orbit")?e=M*.5:e=0;let P=50+e;return{orbitRadius:y,arcHeight:o,realRadius:P,gap:V,arcAngle:c,shape:$,length:t,fontSize:E,flip:a,fitRange:n,textAnchor:x,arcHeightPercentage:M,innerOuter:e,orbitNumber:g,size:p,strokeWidth:r}}getProgressAngle(i,c){let g=c,p=parseFloat(this.getAttribute("max"))||100;return g/p*i}getControlPoint(i,c,g,p,e="clockwise"){let r=(i+g)/2,y=(c+p)/2,$=g-i,a=p-c,n,t;return e==="clockwise"?(n=r+a*.4,t=y-$*.4):(n=r-a*.4,t=y+$*.4),{xc:n,yc:t}}arcPoint(i,c,g=0,p=0){let e=i+g,r=c+p*Math.PI/180;return{x:50+e*Math.cos(r),y:50+e*Math.sin(r)}}calculateArcParameters(){let{arcAngle:i,realRadius:c,gap:g,arcHeightPercentage:p,orbitNumber:e,shape:r,strokeWidth:y,arcHeight:$}=this.getAttributes(),a=c,n,t,x=Math.PI/2,E=y,I=i*Math.PI/180,s=a+p,o=a-p!==0?a-p:a,M=(g+E*1.25)/e/s,V=(g+E*1.25)/e/o,P=M-x,S=I-M-x,A=V-x,m=I-V-x,b=this.arcPoint(s,P),v=this.arcPoint(s,S),w=this.arcPoint(o,A),k=this.arcPoint(o,m);if(n=i<=180?0:1,r==="rounded"){let l=$<10?5:$<5?2.5:10,h=this.arcPoint(s,P,0,l/e),u=this.arcPoint(s,S,0,-l/e),d=this.arcPoint(o,A,0,l/e),f=this.arcPoint(o,m,0,-l/e),L=this.arcPoint(s,P,-(l/2)/e,0),C=this.arcPoint(s,S,-(l/2)/e,0),R=this.arcPoint(o,A,l/2/e,0),F=this.arcPoint(o,m,l/2/e,0),z=this.getControlPoint(u.x,u.y,C.x,C.y),Q=this.getControlPoint(F.x,F.y,f.x,f.y),Z=this.getControlPoint(d.x,d.y,R.x,R.y),H=this.getControlPoint(L.x,L.y,h.x,h.y);t=`M ${h.x},${h.y} A ${s},${s} 0 ${n} 1 ${u.x},${u.y}`,t+=`Q ${z.xc}, ${z.yc} ${C.x} ${C.y} `,t+=`L ${C.x} ${C.y}`,t+=`L ${F.x} ${F.y}`,t+=`Q ${Q.xc}, ${Q.yc} ${f.x} ${f.y} `,t+=`A ${o},${o} 0 ${n} 0 ${d.x},${d.y}`,t+=`Q ${Z.xc}, ${Z.yc} ${R.x} ${R.y} `,t+=`L ${R.x} ${R.y}`,t+=`L ${L.x} ${L.y}`,t+=` Q ${H.xc}, ${H.yc} ${h.x} ${h.y} `,t+=" Z"}else if(r==="circle"||r==="circle-a"||r==="bullet")t=`M ${b.x},${b.y} A ${s},${s} 0 ${n} 1 ${v.x},${v.y}`,t+=` A 1,1 0 0 1 ${k.x},${k.y} `,t+=` A ${o},${o} 0 ${n} 0 ${w.x},${w.y}`,t+=` A 1,1 0 0 ${r==="circle"||r==="circle-a"?1:0} ${b.x},${b.y} `,t+=" Z";else if(r==="circle-b"){let l=$*1.36,h=this.arcPoint(s,P,0,l/e),u=this.arcPoint(s,S,0,-(l/e)),d=this.arcPoint(o,A,0,l/e),f=this.arcPoint(o,m,0,-(l/e));t=`M ${h.x},${h.y} A ${s},${s} 0 ${n} 1 ${u.x},${u.y}`,t+=` A 1,1 0 0 1 ${f.x},${f.y} `,t+=` A ${o},${o} 0 ${n} 0 ${d.x},${d.y}`,t+=` A 1,1 0 0 1 ${h.x},${h.y} `,t+=" Z"}else if(r==="arrow"){let l=this.arcPoint(a,S,0,24/e/2),h=this.arcPoint(a,P,0,24/e/2);t=`M ${b.x},${b.y} A ${s},${s} 0 ${n} 1 ${v.x},${v.y}`,t+=`L ${l.x} ${l.y}`,t+=`L ${k.x} ${k.y}`,t+=`A ${o},${o} 0 ${n} 0 ${w.x}, ${w.y}`,t+=`L ${h.x} ${h.y} `,t+="Z"}else if(r==="backslash"||r==="slash"){let l=this.arcPoint(s,P,0,r==="backslash"?0:24/e/2),h=this.arcPoint(s,S,0,r==="backslash"?0:24/e/2),u=this.arcPoint(o,A,0,r==="backslash"?24/e/2:0),d=this.arcPoint(o,m,0,r==="backslash"?24/e/2:0);t=`M ${l.x},${l.y} A ${s},${s} 0 ${n} 1 ${h.x},${h.y}`,t+=`L ${d.x} ${d.y}`,t+=`A ${o},${o} 0 ${n} 0 ${u.x}, ${u.y}`,t+="Z"}else if(r==="zigzag"){let l=this.arcPoint(a,P,-$/e/2,3),h=this.arcPoint(a,P,0/e/2,0),u=this.arcPoint(a,P,$/e/2,3),d=this.arcPoint(a,m,$/e/2,3),f=this.arcPoint(a,m,0/e/2,0),L=this.arcPoint(a,m,-$/e/2,3);t=`M ${b.x},${b.y} A ${s},${s} 0 ${n} 1 ${v.x},${v.y}`,t+=`L ${d.x} ${d.y}`,t+=`L ${f.x} ${f.y}`,t+=`L ${L.x} ${L.y}`,t+=`L ${k.x} ${k.y}`,t+=`A ${o},${o} 0 ${n} 0 ${w.x}, ${w.y}`,t+=`L ${l.x} ${l.y}`,t+=`L ${h.x} ${h.y}`,t+=`L ${u.x} ${u.y}`,t+="Z"}else t=`M ${b.x},${b.y} A ${s},${s} 0 ${n} 1 ${v.x},${v.y}`,t+=`L ${k.x} ${k.y}`,t+=`A ${o},${o} 0 ${n} 0 ${w.x}, ${w.y}`,t+="Z";return{dShape:t}}calculateTextArcParameters(){let{arcAngle:i,realRadius:c,gap:g,flip:p}=this.getAttributes(),e=c,r,y,$,a,n,t,x,E=g*.5;x=p?0:1,n=i<=180?0:1;let I=50+e*Math.cos((-90+E)*(Math.PI/180)),s=50+e*Math.sin((-90+E)*(Math.PI/180)),o=50+e*Math.cos((i-90-E)*Math.PI/180),M=50+e*Math.sin((i-90-E)*Math.PI/180);return p?(r=o,y=M,$=I,a=s):(r=I,y=s,$=o,a=M),t=`M ${r},${y} A ${e},${e} 0 ${n} ${x} ${$},${a}`,{dPath:t}}};function j(O){let i=O.match(/calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/);if(i){let c=parseFloat(i[1]),g=parseInt(i[2])-parseInt(i[3]);if(!isNaN(c)&&!isNaN(g)&&g!==0)return c/g}}var N={};N={resize:O=>{let i=document.querySelector(O);if(!i){console.error(`Not found: ${O}`);return}new ResizeObserver(g=>{for(let p of g){let{width:e}=p.contentRect,r=i.querySelectorAll(".gravity-spot");r?r.forEach(y=>{let $=getComputedStyle(y).getPropertyValue("--o-force"),a=e/500;y.style.setProperty("--o-force-ratio",`${a}`)}):console.error("No gravity-spot found")}}).observe(i)}};customElements.get("o-progress")||customElements.define("o-progress",U);customElements.get("o-arc")||customElements.define("o-arc",q);window.Orbit=N;})();
|