@zumer/orbit 1.3.0 → 1.4.3

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