@zumer/orbit 1.3.0 → 1.4.4

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.
Files changed (6) hide show
  1. package/README.md +4 -0
  2. package/dist/orbit.css +5 -3
  3. package/dist/orbit.js +383 -434
  4. package/dist/orbit.min.css +1 -1
  5. package/dist/orbit.min.js +63 -64
  6. package/package.json +1 -1
package/dist/orbit.js CHANGED
@@ -1,35 +1,277 @@
1
1
 
2
2
  /*
3
3
  * orbit
4
- * v.1.3.0
4
+ * v.1.4.4
5
5
  * Author Juan Martin Muda - Zumerlab
6
6
  * License MIT
7
7
  **/
8
+
8
9
  (() => {
10
+ // src/js/orbit-base.js
11
+ var OrbitBase = class extends HTMLElement {
12
+ constructor() {
13
+ super();
14
+ this.commonProperties = {
15
+ orbitRadius: 0,
16
+ arcHeight: 0,
17
+ realRadius: 0,
18
+ arcAngle: 0,
19
+ shape: "none",
20
+ arcHeightPercentage: 0,
21
+ orbitNumber: 1,
22
+ size: 1,
23
+ strokeWidth: 1
24
+ };
25
+ }
26
+ getCommonAttributes(element) {
27
+ const orbitRadius = parseFloat(getComputedStyle(element).getPropertyValue("r") || 0);
28
+ const orbitNumber = parseFloat(getComputedStyle(element).getPropertyValue("--o-orbit-number") || 1);
29
+ const size = parseFloat(getComputedStyle(element).getPropertyValue("--o-size-ratio") || 1);
30
+ const strokeWidth = parseFloat(getComputedStyle(element).getPropertyValue("--o-stroke-width") || 1);
31
+ const shape = element.getAttribute("shape") || "none";
32
+ const arcHeight = orbitRadius / orbitNumber * size - strokeWidth + 0.3;
33
+ const arcHeightPercentage = arcHeight / 2 * 100 / orbitRadius / 2;
34
+ let innerOuter = 0;
35
+ if (element.classList.contains("outer-orbit")) {
36
+ innerOuter = arcHeightPercentage;
37
+ } else if (element.classList.contains("quarter-outer-orbit")) {
38
+ innerOuter = arcHeightPercentage * -0.5;
39
+ } else if (element.classList.contains("inner-orbit")) {
40
+ innerOuter = arcHeightPercentage * -1;
41
+ } else if (element.classList.contains("quarter-inner-orbit")) {
42
+ innerOuter = arcHeightPercentage * 0.5;
43
+ }
44
+ const realRadius = 50 + innerOuter;
45
+ return {
46
+ orbitRadius,
47
+ arcHeight,
48
+ realRadius,
49
+ arcAngle: 0,
50
+ // Se sobrescribe en cada componente
51
+ shape,
52
+ arcHeightPercentage,
53
+ orbitNumber,
54
+ size,
55
+ strokeWidth
56
+ };
57
+ }
58
+ getProgressAngle(maxAngle, value, maxValue = 100) {
59
+ return value / maxValue * maxAngle;
60
+ }
61
+ getControlPoint(x, y, x1, y1, direction = "clockwise") {
62
+ const xm = (x + x1) / 2;
63
+ const ym = (y + y1) / 2;
64
+ const dx = x1 - x;
65
+ const dy = y1 - y;
66
+ if (direction === "clockwise") {
67
+ return {
68
+ xc: xm + dy * 0.4,
69
+ yc: ym - dx * 0.4
70
+ };
71
+ }
72
+ return {
73
+ xc: xm - dy * 0.4,
74
+ yc: ym + dx * 0.4
75
+ };
76
+ }
77
+ arcPoint(radius, angle, radiusAdjustment = 0, angleOffsetDegrees = 0) {
78
+ const adjustedRadius = radius + radiusAdjustment;
79
+ const adjustedAngle = angle + angleOffsetDegrees * Math.PI / 180;
80
+ return {
81
+ x: 50 + adjustedRadius * Math.cos(adjustedAngle),
82
+ y: 50 + adjustedRadius * Math.sin(adjustedAngle)
83
+ };
84
+ }
85
+ calculateCommonArcParameters(arcAngle, radius, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight, gap = 0) {
86
+ const offset = Math.PI / 2;
87
+ const fangle = arcAngle * Math.PI / 180;
88
+ const bigRadius = radius + arcHeightPercentage;
89
+ const smallRadius = radius - arcHeightPercentage !== 0 ? radius - arcHeightPercentage : radius;
90
+ const bigGap = (gap + strokeWidth * 1.25) / orbitNumber / bigRadius;
91
+ const smallGap = (gap + strokeWidth * 1.25) / orbitNumber / smallRadius;
92
+ const upperAngleStart = bigGap - offset;
93
+ const upperAngleEnd = fangle - bigGap - offset;
94
+ const innerAngleStart = smallGap - offset;
95
+ const innerAngleEnd = fangle - smallGap - offset;
96
+ const upperArcStart = this.arcPoint(bigRadius, upperAngleStart);
97
+ const upperArcEnd = this.arcPoint(bigRadius, upperAngleEnd);
98
+ const innerArcStart = this.arcPoint(smallRadius, innerAngleStart);
99
+ const innerArcEnd = this.arcPoint(smallRadius, innerAngleEnd);
100
+ const largeArcFlag = arcAngle <= 180 ? 0 : 1;
101
+ return {
102
+ upperArcStart,
103
+ upperArcEnd,
104
+ innerArcStart,
105
+ innerArcEnd,
106
+ largeArcFlag,
107
+ bigRadius,
108
+ smallRadius,
109
+ radius,
110
+ upperAngleStart,
111
+ upperAngleEnd,
112
+ innerAngleStart,
113
+ innerAngleEnd
114
+ };
115
+ }
116
+ generatePathData(shape, params, arcHeight, orbitNumber) {
117
+ let d = "";
118
+ switch (shape) {
119
+ case "rounded":
120
+ d = this.generateRoundedPath(params, arcHeight, orbitNumber);
121
+ break;
122
+ case "circle":
123
+ case "circle-a":
124
+ case "bullet":
125
+ d = this.generateCirclePath(params, shape);
126
+ break;
127
+ case "circle-b":
128
+ d = this.generateCircleBPath(params, arcHeight, orbitNumber);
129
+ break;
130
+ case "arrow":
131
+ d = this.generateArrowPath(params, orbitNumber);
132
+ break;
133
+ case "backslash":
134
+ case "slash":
135
+ d = this.generateSlashPath(params, shape, orbitNumber);
136
+ break;
137
+ case "zigzag":
138
+ d = this.generateZigzagPath(params, arcHeight, orbitNumber);
139
+ break;
140
+ default:
141
+ d = this.generateDefaultPath(params);
142
+ }
143
+ return d;
144
+ }
145
+ generateRoundedPath(params, arcHeight, orbitNumber) {
146
+ const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag } = params;
147
+ const curve = arcHeight < 10 ? 5 : arcHeight < 5 ? 2.5 : 10;
148
+ const newUpperStart = this.arcPoint(bigRadius, params.upperAngleStart, 0, curve / orbitNumber);
149
+ const newUpperEnd = this.arcPoint(bigRadius, params.upperAngleEnd, 0, -curve / orbitNumber);
150
+ const newInnerStart = this.arcPoint(smallRadius, params.innerAngleStart, 0, curve / orbitNumber);
151
+ const newInnerEnd = this.arcPoint(smallRadius, params.innerAngleEnd, 0, -curve / orbitNumber);
152
+ const upperPointStart = this.arcPoint(bigRadius, params.upperAngleStart, -(curve / 2) / orbitNumber, 0);
153
+ const upperPointEnd = this.arcPoint(bigRadius, params.upperAngleEnd, -(curve / 2) / orbitNumber, 0);
154
+ const innerPointStart = this.arcPoint(smallRadius, params.innerAngleStart, curve / 2 / orbitNumber, 0);
155
+ const innerPointEnd = this.arcPoint(smallRadius, params.innerAngleEnd, curve / 2 / orbitNumber, 0);
156
+ const Q = this.getControlPoint(newUpperEnd.x, newUpperEnd.y, upperPointEnd.x, upperPointEnd.y);
157
+ const Q1 = this.getControlPoint(innerPointEnd.x, innerPointEnd.y, newInnerEnd.x, newInnerEnd.y);
158
+ const Q2 = this.getControlPoint(newInnerStart.x, newInnerStart.y, innerPointStart.x, innerPointStart.y);
159
+ const Q3 = this.getControlPoint(upperPointStart.x, upperPointStart.y, newUpperStart.x, newUpperStart.y);
160
+ let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
161
+ d += `Q ${Q.xc}, ${Q.yc} ${upperPointEnd.x} ${upperPointEnd.y} `;
162
+ d += `L ${upperPointEnd.x} ${upperPointEnd.y}`;
163
+ d += `L ${innerPointEnd.x} ${innerPointEnd.y}`;
164
+ d += `Q ${Q1.xc}, ${Q1.yc} ${newInnerEnd.x} ${newInnerEnd.y} `;
165
+ d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
166
+ d += `Q ${Q2.xc}, ${Q2.yc} ${innerPointStart.x} ${innerPointStart.y} `;
167
+ d += `L ${innerPointStart.x} ${innerPointStart.y}`;
168
+ d += `L ${upperPointStart.x} ${upperPointStart.y}`;
169
+ d += ` Q ${Q3.xc}, ${Q3.yc} ${newUpperStart.x} ${newUpperStart.y} `;
170
+ d += ` Z`;
171
+ return d;
172
+ }
173
+ // Dentro de la clase OrbitCommon en orbit-common.js
174
+ generateCirclePath(params, shape) {
175
+ const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag } = params;
176
+ let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
177
+ d += ` A 1,1 0 0 1 ${innerArcEnd.x},${innerArcEnd.y} `;
178
+ d += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x},${innerArcStart.y}`;
179
+ d += ` A 1,1 0 0 ${shape === "circle" || shape === "circle-a" ? 1 : 0} ${upperArcStart.x},${upperArcStart.y} `;
180
+ d += ` Z`;
181
+ return d;
182
+ }
183
+ generateCircleBPath(params, arcHeight, orbitNumber) {
184
+ const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius, largeArcFlag } = params;
185
+ const segment = arcHeight * 1.36;
186
+ const newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, segment / orbitNumber);
187
+ const newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, -segment / orbitNumber);
188
+ const newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, segment / orbitNumber);
189
+ const newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, -segment / orbitNumber);
190
+ let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
191
+ d += ` A 1,1 0 0 1 ${newInnerEnd.x},${newInnerEnd.y} `;
192
+ d += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
193
+ d += ` A 1,1 0 0 1 ${newUpperStart.x},${newUpperStart.y} `;
194
+ d += ` Z`;
195
+ return d;
196
+ }
197
+ generateArrowPath(params, orbitNumber) {
198
+ const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag, radius } = params;
199
+ const middleEnd = this.arcPoint(radius, params.upperAngleEnd, 0, 24 / orbitNumber / 2);
200
+ const middleStart = this.arcPoint(radius, params.upperAngleStart, 0, 24 / orbitNumber / 2);
201
+ let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
202
+ d += `L ${middleEnd.x} ${middleEnd.y}`;
203
+ d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
204
+ d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
205
+ d += `L ${middleStart.x} ${middleStart.y}`;
206
+ d += `Z`;
207
+ return d;
208
+ }
209
+ generateSlashPath(params, shape, orbitNumber) {
210
+ const { upperAngleStart, upperAngleEnd, innerAngleStart, innerAngleEnd, bigRadius, smallRadius, largeArcFlag } = params;
211
+ const newUpperStart = this.arcPoint(bigRadius, upperAngleStart, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
212
+ const newUpperEnd = this.arcPoint(bigRadius, upperAngleEnd, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
213
+ const newInnerStart = this.arcPoint(smallRadius, innerAngleStart, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
214
+ const newInnerEnd = this.arcPoint(smallRadius, innerAngleEnd, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
215
+ let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
216
+ d += `L ${newInnerEnd.x} ${newInnerEnd.y}`;
217
+ d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x}, ${newInnerStart.y}`;
218
+ d += `Z`;
219
+ return d;
220
+ }
221
+ generateZigzagPath(params, arcHeight, orbitNumber) {
222
+ const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag, radius } = params;
223
+ const s2 = this.arcPoint(radius, params.upperAngleStart, -arcHeight / orbitNumber / 2, 3);
224
+ const s3 = this.arcPoint(radius, params.upperAngleStart, 0 / orbitNumber / 2, 0);
225
+ const s4 = this.arcPoint(radius, params.upperAngleStart, arcHeight / orbitNumber / 2, 3);
226
+ const e2 = this.arcPoint(radius, params.innerAngleEnd, arcHeight / orbitNumber / 2, 3);
227
+ const e3 = this.arcPoint(radius, params.innerAngleEnd, 0 / orbitNumber / 2, 0);
228
+ const e4 = this.arcPoint(radius, params.innerAngleEnd, -arcHeight / orbitNumber / 2, 3);
229
+ let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
230
+ d += `L ${e2.x} ${e2.y}`;
231
+ d += `L ${e3.x} ${e3.y}`;
232
+ d += `L ${e4.x} ${e4.y}`;
233
+ d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
234
+ d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
235
+ d += `L ${s2.x} ${s2.y}`;
236
+ d += `L ${s3.x} ${s3.y}`;
237
+ d += `L ${s4.x} ${s4.y}`;
238
+ d += `Z`;
239
+ return d;
240
+ }
241
+ generateDefaultPath(params) {
242
+ const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag } = params;
243
+ let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
244
+ d += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
245
+ d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
246
+ d += `Z`;
247
+ return d;
248
+ }
249
+ };
250
+
9
251
  // src/js/orbit-progress.js
10
- var OrbitProgress = class extends HTMLElement {
252
+ var OrbitProgress = class extends OrbitBase {
11
253
  constructor() {
12
254
  super();
13
255
  this.attachShadow({ mode: "open" });
14
256
  this.shadowRoot.innerHTML = `
15
257
  <style>
16
258
  :host {
17
- --o-fill: var(--o-gray-light);
18
- --o-stroke: var(--o-fill);
19
- --o-stroke-width: 1;
20
- --o-back-fill: transparent;
21
- --o-back-stroke: none;
22
- --o-back-stroke-width: 1;
23
- }
24
- :host(:hover){
25
- --o-fill: var(--o-gray-light);
26
- --o-stroke: var(--o-fill);
27
- --o-stroke-width: 1;
28
- --o-back-fill: transparent;
29
- --o-back-stroke: none;
30
- --o-back-stroke-width: 1;
31
- }
32
- svg {
259
+ --o-fill: var(--o-gray-light);
260
+ --o-stroke: var(--o-fill);
261
+ --o-stroke-width: 1;
262
+ --o-back-fill: transparent;
263
+ --o-back-stroke: none;
264
+ --o-back-stroke-width: 1;
265
+ }
266
+ :host(:hover) {
267
+ --o-fill: var(--o-gray-light);
268
+ --o-stroke: var(--o-fill);
269
+ --o-stroke-width: 1;
270
+ --o-back-fill: transparent;
271
+ --o-back-stroke: none;
272
+ --o-back-stroke-width: 1;
273
+ }
274
+ svg {
33
275
  width: 100%;
34
276
  height: 100%;
35
277
  overflow: visible;
@@ -59,11 +301,12 @@
59
301
  }
60
302
  connectedCallback() {
61
303
  this.update();
304
+ this.setupObserver();
305
+ }
306
+ setupObserver() {
62
307
  this.observer = new MutationObserver((mutations) => {
63
308
  this.observer.disconnect();
64
- mutations.forEach((mutation) => {
65
- this.update();
66
- });
309
+ mutations.forEach(() => this.update());
67
310
  this.observer.observe(this, { attributes: true, childList: true });
68
311
  });
69
312
  this.observer.observe(this, { attributes: true, childList: true });
@@ -79,174 +322,34 @@
79
322
  arc.setAttribute("d", d);
80
323
  }
81
324
  getAttributes() {
82
- const orbitRadius = parseFloat(getComputedStyle(this).getPropertyValue("r") || 0);
83
- let orbitNumber = parseFloat(getComputedStyle(this).getPropertyValue("--o-orbit-number"));
84
- let size = parseFloat(getComputedStyle(this).getPropertyValue("--o-size-ratio"));
325
+ const common = super.getCommonAttributes(this);
85
326
  const range = parseFloat(getComputedStyle(this).getPropertyValue("--o-range") || 360);
86
327
  const progress = parseFloat(getComputedStyle(this).getPropertyValue("--o-progress") || this.getAttribute("value") || 0);
87
- const shape = this.getAttribute("shape") || "none";
88
- const strokeWidth = parseFloat(getComputedStyle(this).getPropertyValue("--o-stroke-width"));
89
- const arcHeight = orbitRadius / orbitNumber * size - strokeWidth + 0.3;
90
- const arcHeightPercentage = arcHeight / 2 * 100 / orbitRadius / 2;
91
- const maxAngle = range;
92
328
  const maxValue = parseFloat(this.getAttribute("max")) || 100;
93
- let innerOuter;
94
- if (this.classList.contains("outer-orbit")) {
95
- innerOuter = arcHeightPercentage;
96
- } else if (this.classList.contains("quarter-outer-orbit")) {
97
- innerOuter = arcHeightPercentage * -0.5;
98
- } else if (this.classList.contains("inner-orbit")) {
99
- innerOuter = arcHeightPercentage * -1;
100
- } else if (this.classList.contains("quarter-inner-orbit")) {
101
- innerOuter = arcHeightPercentage * 0.5;
102
- } else {
103
- innerOuter = 0;
104
- }
105
- const realRadius = 50 + innerOuter;
106
329
  return {
107
- orbitRadius,
330
+ ...common,
331
+ range,
108
332
  progress,
109
- strokeWidth,
110
- realRadius,
111
- maxAngle,
112
- maxValue,
113
- shape,
114
- arcHeightPercentage,
115
- orbitNumber,
116
- arcHeight
333
+ maxValue
117
334
  };
118
335
  }
119
336
  getProgressAngle(full) {
120
- const { maxAngle, progress, maxValue } = this.getAttributes();
121
- return full ? (maxValue - 1e-5) / maxValue * maxAngle : progress / maxValue * maxAngle;
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
- };
337
+ const { range, progress, maxValue } = this.getAttributes();
338
+ return full ? (maxValue - 1e-5) / maxValue * range : progress / maxValue * range;
145
339
  }
146
340
  calculateArcParameters(full) {
341
+ const { shape, realRadius, arcHeightPercentage, orbitNumber, strokeWidth, arcHeight } = this.getAttributes();
147
342
  const arcAngle = this.getProgressAngle(full);
148
- const { realRadius, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight } = this.getAttributes();
149
- const radius = realRadius;
150
- let largeArcFlag, d;
151
- let offset = Math.PI / 2;
152
- let stroke = strokeWidth;
153
- let fangle = arcAngle * Math.PI / 180;
154
- let bigRadius = radius + arcHeightPercentage;
155
- let smallRadius = radius - arcHeightPercentage !== 0 ? radius - arcHeightPercentage : radius;
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);
166
- largeArcFlag = arcAngle <= 180 ? 0 : 1;
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
- }
343
+ const params = super.calculateCommonArcParameters(
344
+ arcAngle,
345
+ realRadius,
346
+ arcHeightPercentage,
347
+ orbitNumber,
348
+ shape,
349
+ strokeWidth,
350
+ arcHeight
351
+ );
352
+ const d = super.generatePathData(shape, params, arcHeight, orbitNumber);
250
353
  return { d };
251
354
  }
252
355
  };
@@ -254,53 +357,52 @@
254
357
  // src/js/orbit-arc.js
255
358
  var template = document.createElement("template");
256
359
  template.innerHTML = `
257
- <style>
258
- :host {
259
- --o-fill: var(--o-gray-light);
260
- --o-stroke: var(--o-fill);
261
- --o-stroke-width: 1;
262
- --o-color: currentcolor;
263
- }
264
- :host(:hover){
265
- --o-fill: var(--o-gray-light);
266
- --o-stroke: var(--o-fill);
267
- --o-stroke-width: 1;
268
- --o-color: currentcolor;
269
- }
270
- svg {
271
- width: 100%;
272
- height: 100%;
273
- overflow: visible;
274
- pointer-events: none;
275
- }
276
- svg * {
277
- pointer-events: visiblePainted;
278
- }
279
- #orbitShape {
280
- fill: var(--o-fill);
281
- stroke: var(--o-stroke);
282
- stroke-width: var(--o-stroke-width);
283
- transition: fill 0.25s, stroke 0.25s;
284
-
285
- }
286
- text {
287
- fill: var(--o-color);
288
- }
289
- #orbitPath {
290
- fill: transparent;
291
- stroke: none;
292
- stroke-width: 0;
293
- }
294
- </style>
295
- <svg viewBox="0 0 100 100">
296
- <path id="orbitShape" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
297
- <path id="orbitPath" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke" ></path>
298
- <text>
299
- <textPath href="#orbitPath" alignment-baseline="middle"></textPath>
300
- </text>
301
- </svg>
302
- `;
303
- var OrbitArc = class extends HTMLElement {
360
+ <style>
361
+ :host {
362
+ --o-fill: var(--o-gray-light);
363
+ --o-stroke: var(--o-fill);
364
+ --o-stroke-width: 1;
365
+ --o-color: currentcolor;
366
+ }
367
+ :host(:hover) {
368
+ --o-fill: var(--o-gray-light);
369
+ --o-stroke: var(--o-fill);
370
+ --o-stroke-width: 1;
371
+ --o-color: currentcolor;
372
+ }
373
+ svg {
374
+ width: 100%;
375
+ height: 100%;
376
+ overflow: visible;
377
+ pointer-events: none;
378
+ }
379
+ svg * {
380
+ pointer-events: visiblePainted;
381
+ }
382
+ #orbitShape {
383
+ fill: var(--o-fill);
384
+ stroke: var(--o-stroke);
385
+ stroke-width: var(--o-stroke-width);
386
+ transition: fill 0.25s, stroke 0.25s;
387
+ }
388
+ text {
389
+ fill: var(--o-color);
390
+ }
391
+ #orbitPath {
392
+ fill: transparent;
393
+ stroke: none;
394
+ stroke-width: 0;
395
+ }
396
+ </style>
397
+ <svg viewBox="0 0 100 100">
398
+ <path id="orbitShape" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
399
+ <path id="orbitPath" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
400
+ <text>
401
+ <textPath href="#orbitPath" alignment-baseline="middle"></textPath>
402
+ </text>
403
+ </svg>
404
+ `;
405
+ var OrbitArc = class extends OrbitBase {
304
406
  constructor() {
305
407
  super();
306
408
  this.attachShadow({ mode: "open" });
@@ -308,11 +410,16 @@
308
410
  }
309
411
  connectedCallback() {
310
412
  this.update();
413
+ this.setupObservers();
414
+ }
415
+ disconnectedCallback() {
416
+ this.observer?.disconnect();
417
+ this.textObserver?.disconnect();
418
+ }
419
+ setupObservers() {
311
420
  this.observer = new MutationObserver((mutations) => {
312
421
  this.observer.disconnect();
313
- mutations.forEach((mutation) => {
314
- this.update();
315
- });
422
+ mutations.forEach(() => this.update());
316
423
  this.observer.observe(this, { attributes: true, childList: true });
317
424
  });
318
425
  this.observer.observe(this, { attributes: true, childList: true });
@@ -322,10 +429,6 @@
322
429
  });
323
430
  this.textObserver.observe(this, { characterData: true, subtree: true });
324
431
  }
325
- disconnectedCallback() {
326
- this.observer.disconnect();
327
- this.textObserver.disconnect();
328
- }
329
432
  update() {
330
433
  const { length, fontSize, textAnchor, fitRange } = this.getAttributes();
331
434
  const orbitPath = this.shadowRoot.getElementById("orbitPath");
@@ -346,16 +449,15 @@
346
449
  textPath.setAttribute("startOffset", "100%");
347
450
  textPath.setAttribute("text-anchor", "end");
348
451
  }
349
- if (fitRange)
452
+ if (fitRange) {
350
453
  textPath.parentElement.setAttribute("textLength", orbitPath.getTotalLength());
351
- text.style.fontSize = `calc(${fontSize} * (100 / (${length}) * (12 / var(--o-orbit-number) ))`;
454
+ }
455
+ text.style.fontSize = `calc(${fontSize} * (100 / (${length}) * (12 / var(--o-orbit-number)))`;
352
456
  textPath.textContent = this.textContent;
353
457
  }
354
458
  getAttributes() {
355
- let rawAngle, arcAngle, orbitNumber, size, innerOuter;
356
- const strokeWidth = parseFloat(getComputedStyle(this).getPropertyValue("--o-stroke-width"));
357
- const orbitRadius = parseFloat(getComputedStyle(this).getPropertyValue("r") || 0);
358
- const shape = this.getAttribute("shape") || "none";
459
+ const common = super.getCommonAttributes(this);
460
+ let arcAngle;
359
461
  const flip = this.hasAttribute("flip") || this.classList.contains("flip");
360
462
  const fitRange = this.hasAttribute("fit-range") || this.classList.contains("fit-range") || false;
361
463
  const length = parseFloat(getComputedStyle(this).getPropertyValue("--o-force"));
@@ -363,226 +465,73 @@
363
465
  const fontSize = getComputedStyle(this).getPropertyValue("font-size") || getComputedStyle(this).getPropertyValue("--font-size");
364
466
  const range = parseFloat(getComputedStyle(this).getPropertyValue("--o-range") || 360);
365
467
  const value = parseFloat(this.getAttribute("value"));
468
+ const gap = parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));
366
469
  if (value) {
367
- arcAngle = this.getProgressAngle(range, value);
470
+ arcAngle = super.getProgressAngle(range, value);
368
471
  const prevElement = this.previousElementSibling;
369
472
  const stackOffset = prevElement ? parseFloat(getComputedStyle(prevElement).getPropertyValue("--o_stack")) : 0;
370
473
  this.style.setProperty("--o_stack", stackOffset + arcAngle);
371
- if (stackOffset >= 0 && flip)
474
+ if (stackOffset >= 0 && flip) {
372
475
  this.style.setProperty("--o-angle-composite", parseFloat(stackOffset) + "deg");
373
- if (stackOffset > 0 && !flip)
476
+ }
477
+ if (stackOffset > 0 && !flip) {
374
478
  this.style.setProperty("--o-angle-composite", parseFloat(stackOffset) + "deg");
479
+ }
375
480
  } else {
376
- rawAngle = getComputedStyle(this).getPropertyValue("--o-angle");
377
- arcAngle = calcularExpresionCSS(rawAngle);
378
- }
379
- orbitNumber = parseFloat(getComputedStyle(this).getPropertyValue("--o-orbit-number"));
380
- size = parseFloat(getComputedStyle(this).getPropertyValue("--o-size-ratio"));
381
- const arcHeight = orbitRadius / orbitNumber * size - strokeWidth + 0.3;
382
- const arcHeightPercentage = arcHeight / 2 * 100 / orbitRadius / 2;
383
- const gap = parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));
384
- if (this.classList.contains("outer-orbit")) {
385
- innerOuter = arcHeightPercentage;
386
- } else if (this.classList.contains("quarter-outer-orbit")) {
387
- innerOuter = arcHeightPercentage * -0.5;
388
- } else if (this.classList.contains("inner-orbit")) {
389
- innerOuter = arcHeightPercentage * -1;
390
- } else if (this.classList.contains("quarter-inner-orbit")) {
391
- innerOuter = arcHeightPercentage * 0.5;
392
- } else {
393
- innerOuter = 0;
481
+ const rawAngle = getComputedStyle(this).getPropertyValue("--o-angle");
482
+ arcAngle = this.calcularExpresionCSS(rawAngle);
394
483
  }
395
- const realRadius = 50 + innerOuter;
396
484
  return {
397
- orbitRadius,
398
- arcHeight,
399
- realRadius,
485
+ ...common,
400
486
  gap,
401
487
  arcAngle,
402
- shape,
403
- length,
404
- fontSize,
405
488
  flip,
406
489
  fitRange,
407
- textAnchor,
408
- arcHeightPercentage,
409
- innerOuter,
410
- orbitNumber,
411
- size,
412
- strokeWidth
413
- };
414
- }
415
- getProgressAngle(maxAngle, value) {
416
- const progress = value;
417
- const maxValue = parseFloat(this.getAttribute("max")) || 100;
418
- return progress / maxValue * maxAngle;
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)
490
+ length,
491
+ fontSize,
492
+ textAnchor
441
493
  };
442
494
  }
443
495
  calculateArcParameters() {
444
- const { arcAngle, realRadius, gap, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight } = this.getAttributes();
445
- const radius = realRadius;
446
- let largeArcFlag, dShape;
447
- let offset = Math.PI / 2;
448
- let stroke = strokeWidth;
449
- let fangle = arcAngle * Math.PI / 180;
450
- let bigRadius = radius + arcHeightPercentage;
451
- let smallRadius = radius - arcHeightPercentage !== 0 ? radius - arcHeightPercentage : radius;
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);
462
- largeArcFlag = arcAngle <= 180 ? 0 : 1;
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
- }
496
+ const { arcAngle, realRadius, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight, gap } = this.getAttributes();
497
+ const params = super.calculateCommonArcParameters(
498
+ arcAngle,
499
+ realRadius,
500
+ arcHeightPercentage,
501
+ orbitNumber,
502
+ shape,
503
+ strokeWidth,
504
+ arcHeight,
505
+ gap
506
+ );
507
+ const dShape = super.generatePathData(shape, params, arcHeight, orbitNumber);
546
508
  return { dShape };
547
509
  }
548
510
  calculateTextArcParameters() {
549
511
  const { arcAngle, realRadius, gap, flip } = this.getAttributes();
550
- const radius = realRadius;
551
- let startX, startY, endX, endY, largeArcFlag, dPath, sweepFlag;
552
- let adjustedGap = gap * 0.5;
553
- sweepFlag = flip ? 0 : 1;
554
- largeArcFlag = arcAngle <= 180 ? 0 : 1;
555
- let coordX1 = 50 + radius * Math.cos((-90 + adjustedGap) * (Math.PI / 180));
556
- let coordY1 = 50 + radius * Math.sin((-90 + adjustedGap) * (Math.PI / 180));
557
- let coordX2 = 50 + radius * Math.cos((arcAngle - 90 - adjustedGap) * Math.PI / 180);
558
- let coordY2 = 50 + radius * Math.sin((arcAngle - 90 - adjustedGap) * Math.PI / 180);
559
- if (flip) {
560
- startX = coordX2;
561
- startY = coordY2;
562
- endX = coordX1;
563
- endY = coordY1;
564
- } else {
565
- startX = coordX1;
566
- startY = coordY1;
567
- endX = coordX2;
568
- endY = coordY2;
569
- }
570
- dPath = `M ${startX},${startY} A ${radius},${radius} 0 ${largeArcFlag} ${sweepFlag} ${endX},${endY}`;
512
+ const adjustedGap = gap * 0.5;
513
+ const sweepFlag = flip ? 0 : 1;
514
+ const largeArcFlag = arcAngle <= 180 ? 0 : 1;
515
+ let coordX1 = 50 + realRadius * Math.cos((-90 + adjustedGap) * (Math.PI / 180));
516
+ let coordY1 = 50 + realRadius * Math.sin((-90 + adjustedGap) * (Math.PI / 180));
517
+ let coordX2 = 50 + realRadius * Math.cos((arcAngle - 90 - adjustedGap) * Math.PI / 180);
518
+ let coordY2 = 50 + realRadius * Math.sin((arcAngle - 90 - adjustedGap) * Math.PI / 180);
519
+ const [startX, startY, endX, endY] = flip ? [coordX2, coordY2, coordX1, coordY1] : [coordX1, coordY1, coordX2, coordY2];
520
+ const dPath = `M ${startX},${startY} A ${realRadius},${realRadius} 0 ${largeArcFlag} ${sweepFlag} ${endX},${endY}`;
571
521
  return { dPath };
572
522
  }
573
- };
574
- function calcularExpresionCSS(cssExpression) {
575
- const match = cssExpression.match(
576
- /calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/
577
- );
578
- if (match) {
579
- const value = parseFloat(match[1]);
580
- const divisor = parseInt(match[2]) - parseInt(match[3]);
581
- if (!isNaN(value) && !isNaN(divisor) && divisor !== 0) {
582
- return value / divisor;
523
+ calcularExpresionCSS(cssExpression) {
524
+ const match = cssExpression.match(/calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/);
525
+ if (match) {
526
+ const value = parseFloat(match[1]);
527
+ const divisor = parseInt(match[2]) - parseInt(match[3]);
528
+ if (!isNaN(value) && !isNaN(divisor) && divisor !== 0) {
529
+ return value / divisor;
530
+ }
583
531
  }
532
+ return 0;
584
533
  }
585
- }
534
+ };
586
535
 
587
536
  // src/js/orbit-resize.js
588
537
  var Orbit = {};