@zumer/orbit 1.2.2 → 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 -337
  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.2.2
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,89 +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
332
+ maxValue
116
333
  };
117
334
  }
118
335
  getProgressAngle(full) {
119
- const { maxAngle, progress, maxValue } = this.getAttributes();
120
- return full ? (maxValue - 1e-5) / maxValue * maxAngle : progress / maxValue * maxAngle;
336
+ const { range, progress, maxValue } = this.getAttributes();
337
+ return full ? (maxValue - 1e-5) / maxValue * range : progress / maxValue * range;
121
338
  }
122
339
  calculateArcParameters(full) {
340
+ const { shape, realRadius, arcHeightPercentage, orbitNumber, strokeWidth, arcHeight } = this.getAttributes();
123
341
  const arcAngle = this.getProgressAngle(full);
124
- const { realRadius, arcHeightPercentage, orbitNumber, shape, strokeWidth } = this.getAttributes();
125
- const radius = realRadius;
126
- let startX, startY, endX, endY, largeArcFlag, startX1, startY1, endX1, endY1, dShape, pointX, pointX1, pointY, pointY1;
127
- let offset = Math.PI / 2;
128
- let stroke = strokeWidth;
129
- let fangle = arcAngle * Math.PI / 180;
130
- let bigRadius = radius + arcHeightPercentage;
131
- let smallRadius = radius - arcHeightPercentage !== 0 ? radius - arcHeightPercentage : radius;
132
- let bigGap = stroke * 2 / orbitNumber / 2 / bigRadius;
133
- let smallGap = stroke * 2 / orbitNumber / 2 / smallRadius;
134
- let startAngle = bigGap - offset;
135
- let endAngle = fangle - bigGap - offset;
136
- let startAngle1 = smallGap - offset;
137
- let endAngle1 = fangle - smallGap - offset;
138
- startX = 50 + bigRadius * Math.cos(startAngle);
139
- startY = 50 + bigRadius * Math.sin(startAngle);
140
- endX = 50 + bigRadius * Math.cos(endAngle);
141
- endY = 50 + bigRadius * Math.sin(endAngle);
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);
150
- largeArcFlag = arcAngle <= 180 ? 0 : 1;
151
- let d = `M ${startX},${startY} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${endX},${endY}`;
152
- if (shape === "arrow")
153
- d += `L ${(pointX + pointX1) / 2} ${(pointY + pointY1) / 2} `;
154
- if (shape === "circle" || shape === "bullet")
155
- d += `A ${arcHeightPercentage}, ${arcHeightPercentage} 0 0 1 ${endX1},${endY1} `;
156
- d += `L ${endX1} ${endY1}`;
157
- d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${startX1},${startY1}`;
158
- if (shape === "circle")
159
- d += `A ${arcHeightPercentage}, ${arcHeightPercentage} 0 0 1 ${startX},${startY} `;
160
- if (shape === "bullet")
161
- d += `A ${arcHeightPercentage}, ${arcHeightPercentage} 0 0 0 ${startX},${startY} `;
162
- if (shape === "arrow")
163
- d += `L ${startX1 + 3} ${(startY + startY1) / 2} `;
164
- d += `Z`;
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);
165
352
  return { d };
166
353
  }
167
354
  };
@@ -169,53 +356,52 @@
169
356
  // src/js/orbit-arc.js
170
357
  var template = document.createElement("template");
171
358
  template.innerHTML = `
172
- <style>
173
- :host {
174
- --o-fill: var(--o-gray-light);
175
- --o-stroke: var(--o-fill);
176
- --o-stroke-width: 1;
177
- --o-color: currentcolor;
178
- }
179
- :host(:hover){
180
- --o-fill: var(--o-gray-light);
181
- --o-stroke: var(--o-fill);
182
- --o-stroke-width: 1;
183
- --o-color: currentcolor;
184
- }
185
- svg {
186
- width: 100%;
187
- height: 100%;
188
- overflow: visible;
189
- pointer-events: none;
190
- }
191
- svg * {
192
- pointer-events: visiblePainted;
193
- }
194
- #orbitShape {
195
- fill: var(--o-fill);
196
- stroke: var(--o-stroke);
197
- stroke-width: var(--o-stroke-width);
198
- transition: fill 0.25s, stroke 0.25s;
199
-
200
- }
201
- text {
202
- fill: var(--o-color);
203
- }
204
- #orbitPath {
205
- fill: transparent;
206
- stroke: none;
207
- stroke-width: 0;
208
- }
209
- </style>
210
- <svg viewBox="0 0 100 100">
211
- <path id="orbitShape" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
212
- <path id="orbitPath" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke" ></path>
213
- <text>
214
- <textPath href="#orbitPath" alignment-baseline="middle"></textPath>
215
- </text>
216
- </svg>
217
- `;
218
- 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 {
219
405
  constructor() {
220
406
  super();
221
407
  this.attachShadow({ mode: "open" });
@@ -223,11 +409,16 @@
223
409
  }
224
410
  connectedCallback() {
225
411
  this.update();
412
+ this.setupObservers();
413
+ }
414
+ disconnectedCallback() {
415
+ this.observer?.disconnect();
416
+ this.textObserver?.disconnect();
417
+ }
418
+ setupObservers() {
226
419
  this.observer = new MutationObserver((mutations) => {
227
420
  this.observer.disconnect();
228
- mutations.forEach((mutation) => {
229
- this.update();
230
- });
421
+ mutations.forEach(() => this.update());
231
422
  this.observer.observe(this, { attributes: true, childList: true });
232
423
  });
233
424
  this.observer.observe(this, { attributes: true, childList: true });
@@ -237,10 +428,6 @@
237
428
  });
238
429
  this.textObserver.observe(this, { characterData: true, subtree: true });
239
430
  }
240
- disconnectedCallback() {
241
- this.observer.disconnect();
242
- this.textObserver.disconnect();
243
- }
244
431
  update() {
245
432
  const { length, fontSize, textAnchor, fitRange } = this.getAttributes();
246
433
  const orbitPath = this.shadowRoot.getElementById("orbitPath");
@@ -261,16 +448,15 @@
261
448
  textPath.setAttribute("startOffset", "100%");
262
449
  textPath.setAttribute("text-anchor", "end");
263
450
  }
264
- if (fitRange)
451
+ if (fitRange) {
265
452
  textPath.parentElement.setAttribute("textLength", orbitPath.getTotalLength());
266
- 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)))`;
267
455
  textPath.textContent = this.textContent;
268
456
  }
269
457
  getAttributes() {
270
- let rawAngle, arcAngle, orbitNumber, size, innerOuter;
271
- const strokeWidth = parseFloat(getComputedStyle(this).getPropertyValue("--o-stroke-width"));
272
- const orbitRadius = parseFloat(getComputedStyle(this).getPropertyValue("r") || 0);
273
- const shape = this.getAttribute("shape") || "none";
458
+ const common = super.getCommonAttributes(this);
459
+ let arcAngle;
274
460
  const flip = this.hasAttribute("flip") || this.classList.contains("flip");
275
461
  const fitRange = this.hasAttribute("fit-range") || this.classList.contains("fit-range") || false;
276
462
  const length = parseFloat(getComputedStyle(this).getPropertyValue("--o-force"));
@@ -278,214 +464,73 @@
278
464
  const fontSize = getComputedStyle(this).getPropertyValue("font-size") || getComputedStyle(this).getPropertyValue("--font-size");
279
465
  const range = parseFloat(getComputedStyle(this).getPropertyValue("--o-range") || 360);
280
466
  const value = parseFloat(this.getAttribute("value"));
467
+ const gap = parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));
281
468
  if (value) {
282
- arcAngle = this.getProgressAngle(range, value);
469
+ arcAngle = super.getProgressAngle(range, value);
283
470
  const prevElement = this.previousElementSibling;
284
471
  const stackOffset = prevElement ? parseFloat(getComputedStyle(prevElement).getPropertyValue("--o_stack")) : 0;
285
472
  this.style.setProperty("--o_stack", stackOffset + arcAngle);
286
- if (stackOffset >= 0 && flip)
473
+ if (stackOffset >= 0 && flip) {
287
474
  this.style.setProperty("--o-angle-composite", parseFloat(stackOffset) + "deg");
288
- if (stackOffset > 0 && !flip)
475
+ }
476
+ if (stackOffset > 0 && !flip) {
289
477
  this.style.setProperty("--o-angle-composite", parseFloat(stackOffset) + "deg");
478
+ }
290
479
  } else {
291
- rawAngle = getComputedStyle(this).getPropertyValue("--o-angle");
292
- arcAngle = calcularExpresionCSS(rawAngle);
293
- }
294
- orbitNumber = parseFloat(getComputedStyle(this).getPropertyValue("--o-orbit-number"));
295
- size = parseFloat(getComputedStyle(this).getPropertyValue("--o-size-ratio"));
296
- const arcHeight = orbitRadius / orbitNumber * size - strokeWidth + 0.3;
297
- const arcHeightPercentage = arcHeight / 2 * 100 / orbitRadius / 2;
298
- const gap = parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));
299
- if (this.classList.contains("outer-orbit")) {
300
- innerOuter = arcHeightPercentage;
301
- } else if (this.classList.contains("quarter-outer-orbit")) {
302
- innerOuter = arcHeightPercentage * -0.5;
303
- } else if (this.classList.contains("inner-orbit")) {
304
- innerOuter = arcHeightPercentage * -1;
305
- } else if (this.classList.contains("quarter-inner-orbit")) {
306
- innerOuter = arcHeightPercentage * 0.5;
307
- } else {
308
- innerOuter = 0;
480
+ const rawAngle = getComputedStyle(this).getPropertyValue("--o-angle");
481
+ arcAngle = this.calcularExpresionCSS(rawAngle);
309
482
  }
310
- const realRadius = 50 + innerOuter;
311
483
  return {
312
- orbitRadius,
313
- arcHeight,
314
- realRadius,
484
+ ...common,
315
485
  gap,
316
486
  arcAngle,
317
- shape,
318
- length,
319
- fontSize,
320
487
  flip,
321
488
  fitRange,
322
- textAnchor,
323
- arcHeightPercentage,
324
- innerOuter,
325
- orbitNumber,
326
- size,
327
- strokeWidth
489
+ length,
490
+ fontSize,
491
+ textAnchor
328
492
  };
329
493
  }
330
- getProgressAngle(maxAngle, value) {
331
- const progress = value;
332
- const maxValue = parseFloat(this.getAttribute("max")) || 100;
333
- return progress / maxValue * maxAngle;
334
- }
335
- getControlPoint(x, y, x1, y1, direction = "clockwise") {
336
- let xm = (x + x1) / 2;
337
- let ym = (y + y1) / 2;
338
- let dx = x1 - x;
339
- let dy = y1 - y;
340
- let xc, yc;
341
- if (direction === "clockwise") {
342
- xc = xm + dy * 0.4;
343
- yc = ym - dx * 0.4;
344
- } else {
345
- xc = xm - dy * 0.4;
346
- yc = ym + dx * 0.4;
347
- }
348
- return { xc, yc };
349
- }
350
494
  calculateArcParameters() {
351
- const { arcAngle, realRadius, gap, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight } = this.getAttributes();
352
- const radius = realRadius;
353
- let largeArcFlag, dShape;
354
- let offset = Math.PI / 2;
355
- let stroke = strokeWidth;
356
- let fangle = arcAngle * Math.PI / 180;
357
- let bigRadius = radius + arcHeightPercentage;
358
- let smallRadius = radius - arcHeightPercentage !== 0 ? radius - arcHeightPercentage : radius;
359
- let bigGap = (gap + stroke * 1.25) / orbitNumber / bigRadius;
360
- let smallGap = (gap + stroke * 1.25) / orbitNumber / smallRadius;
361
- let upperAngleStart = bigGap - offset;
362
- let upperAngleEnd = fangle - bigGap - offset;
363
- let innerAngleStart = smallGap - offset;
364
- let innerAngleEnd = fangle - smallGap - offset;
365
- function arcPoint(radius2, angle, radiusAdjustment = 0, angleOffsetDegrees = 0) {
366
- const adjustedRadius = radius2 + radiusAdjustment;
367
- const adjustedAngle = angle + angleOffsetDegrees * Math.PI / 180;
368
- return {
369
- x: 50 + adjustedRadius * Math.cos(adjustedAngle),
370
- y: 50 + adjustedRadius * Math.sin(adjustedAngle)
371
- };
372
- }
373
- let upperArcStart = arcPoint(bigRadius, upperAngleStart);
374
- let upperArcEnd = arcPoint(bigRadius, upperAngleEnd);
375
- let innerArcStart = arcPoint(smallRadius, innerAngleStart);
376
- let innerArcEnd = arcPoint(smallRadius, innerAngleEnd);
377
- largeArcFlag = arcAngle <= 180 ? 0 : 1;
378
- if (shape === "rounded") {
379
- let curve = arcHeight < 10 ? 5 : arcHeight < 5 ? 2.5 : 10;
380
- let newUpperStart = arcPoint(bigRadius, upperAngleStart, 0, curve / orbitNumber);
381
- let newUpperEnd = arcPoint(bigRadius, upperAngleEnd, 0, -curve / orbitNumber);
382
- let newInnerStart = arcPoint(smallRadius, innerAngleStart, 0, curve / orbitNumber);
383
- let newInnerEnd = arcPoint(smallRadius, innerAngleEnd, 0, -curve / orbitNumber);
384
- let upperPointStart = arcPoint(bigRadius, upperAngleStart, -(curve / 2) / orbitNumber, 0);
385
- let upperPointEnd = arcPoint(bigRadius, upperAngleEnd, -(curve / 2) / orbitNumber, 0);
386
- let innerPointStart = arcPoint(smallRadius, innerAngleStart, curve / 2 / orbitNumber, 0);
387
- let innerPointEnd = arcPoint(smallRadius, innerAngleEnd, curve / 2 / orbitNumber, 0);
388
- let Q = this.getControlPoint(newUpperEnd.x, newUpperEnd.y, upperPointEnd.x, upperPointEnd.y);
389
- let Q1 = this.getControlPoint(innerPointEnd.x, innerPointEnd.y, newInnerEnd.x, newInnerEnd.y);
390
- let Q2 = this.getControlPoint(newInnerStart.x, newInnerStart.y, innerPointStart.x, innerPointStart.y);
391
- let Q3 = this.getControlPoint(upperPointStart.x, upperPointStart.y, newUpperStart.x, newUpperStart.y);
392
- dShape = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
393
- dShape += `Q ${Q.xc}, ${Q.yc} ${upperPointEnd.x} ${upperPointEnd.y} `;
394
- dShape += `L ${upperPointEnd.x} ${upperPointEnd.y}`;
395
- dShape += `L ${innerPointEnd.x} ${innerPointEnd.y}`;
396
- dShape += `Q ${Q1.xc}, ${Q1.yc} ${newInnerEnd.x} ${newInnerEnd.y} `;
397
- dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
398
- dShape += `Q ${Q2.xc}, ${Q2.yc} ${innerPointStart.x} ${innerPointStart.y} `;
399
- dShape += `L ${innerPointStart.x} ${innerPointStart.y}`;
400
- dShape += `L ${upperPointStart.x} ${upperPointStart.y}`;
401
- dShape += ` Q ${Q3.xc}, ${Q3.yc} ${newUpperStart.x} ${newUpperStart.y} `;
402
- dShape += ` Z`;
403
- } else if (shape === "circle" || shape === "bullet") {
404
- dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
405
- dShape += ` A 1,1 0 0 1 ${innerArcEnd.x},${innerArcEnd.y} `;
406
- dShape += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x},${innerArcStart.y}`;
407
- dShape += ` A 1,1 0 0 ${shape === "circle" ? 1 : 0} ${upperArcStart.x},${upperArcStart.y} `;
408
- dShape += ` Z`;
409
- } else if (shape === "circle1") {
410
- let segment = arcHeight * 1.36;
411
- let newUpperStart = arcPoint(bigRadius, upperAngleStart, 0, segment / orbitNumber);
412
- let newUpperEnd = arcPoint(bigRadius, upperAngleEnd, 0, -(segment / orbitNumber));
413
- let newInnerStart = arcPoint(smallRadius, innerAngleStart, 0, segment / orbitNumber);
414
- let newInnerEnd = arcPoint(smallRadius, innerAngleEnd, 0, -(segment / orbitNumber));
415
- dShape = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
416
- dShape += ` A 1,1 0 0 1 ${newInnerEnd.x},${newInnerEnd.y} `;
417
- dShape += ` A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
418
- dShape += ` A 1,1 0 0 1 ${newUpperStart.x},${newUpperStart.y} `;
419
- dShape += ` Z`;
420
- } else if (shape === "arrow") {
421
- let middleEnd = arcPoint(radius, upperAngleEnd, 0, 24 / orbitNumber / 2);
422
- let middleStart = arcPoint(radius, upperAngleStart, 0, 24 / orbitNumber / 2);
423
- dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
424
- dShape += `L ${middleEnd.x} ${middleEnd.y}`;
425
- dShape += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
426
- dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
427
- dShape += `L ${middleStart.x} ${middleStart.y} `;
428
- dShape += `Z`;
429
- } else if (shape === "backslash" || shape === "slash") {
430
- let newUpperStart = arcPoint(bigRadius, upperAngleStart, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
431
- let newUpperEnd = arcPoint(bigRadius, upperAngleEnd, 0, shape === "backslash" ? 0 : 24 / orbitNumber / 2);
432
- let newInnerStart = arcPoint(smallRadius, innerAngleStart, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
433
- let newInnerEnd = arcPoint(smallRadius, innerAngleEnd, 0, shape === "backslash" ? 24 / orbitNumber / 2 : 0);
434
- dShape = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
435
- dShape += `L ${newInnerEnd.x} ${newInnerEnd.y}`;
436
- dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x}, ${newInnerStart.y}`;
437
- dShape += `Z`;
438
- } else if (shape === "nr") {
439
- dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
440
- dShape += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
441
- dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
442
- dShape += `Z`;
443
- } else {
444
- dShape = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
445
- dShape += `L ${innerArcEnd.x} ${innerArcEnd.y}`;
446
- dShape += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${innerArcStart.x}, ${innerArcStart.y}`;
447
- dShape += `Z`;
448
- }
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);
449
507
  return { dShape };
450
508
  }
451
509
  calculateTextArcParameters() {
452
510
  const { arcAngle, realRadius, gap, flip } = this.getAttributes();
453
- const radius = realRadius;
454
- let startX, startY, endX, endY, largeArcFlag, dPath, sweepFlag;
455
- let adjustedGap = gap * 0.5;
456
- sweepFlag = flip ? 0 : 1;
457
- largeArcFlag = arcAngle <= 180 ? 0 : 1;
458
- let coordX1 = 50 + radius * Math.cos((-90 + adjustedGap) * (Math.PI / 180));
459
- let coordY1 = 50 + radius * Math.sin((-90 + adjustedGap) * (Math.PI / 180));
460
- let coordX2 = 50 + radius * Math.cos((arcAngle - 90 - adjustedGap) * Math.PI / 180);
461
- let coordY2 = 50 + radius * Math.sin((arcAngle - 90 - adjustedGap) * Math.PI / 180);
462
- if (flip) {
463
- startX = coordX2;
464
- startY = coordY2;
465
- endX = coordX1;
466
- endY = coordY1;
467
- } else {
468
- startX = coordX1;
469
- startY = coordY1;
470
- endX = coordX2;
471
- endY = coordY2;
472
- }
473
- 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}`;
474
520
  return { dPath };
475
521
  }
476
- };
477
- function calcularExpresionCSS(cssExpression) {
478
- const match = cssExpression.match(
479
- /calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/
480
- );
481
- if (match) {
482
- const value = parseFloat(match[1]);
483
- const divisor = parseInt(match[2]) - parseInt(match[3]);
484
- if (!isNaN(value) && !isNaN(divisor) && divisor !== 0) {
485
- 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
+ }
486
530
  }
531
+ return 0;
487
532
  }
488
- }
533
+ };
489
534
 
490
535
  // src/js/orbit-resize.js
491
536
  var Orbit = {};