@zumer/orbit 1.4.8 → 1.4.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +113 -111
- package/dist/orbit.css +3 -3
- package/dist/orbit.js +61 -86
- package/dist/orbit.min.css +1 -1
- package/dist/orbit.min.js +4 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,170 +1,172 @@
|
|
|
1
|
+
# Orbit CSS Composer
|
|
1
2
|
|
|
2
|
-
|
|
3
|
-
<a href="http://zumerlab.github.io/orbit-docs">
|
|
4
|
-
<img src="https://raw.githubusercontent.com/zumerlab/orbit-docs/main/public/images/orbithero.gif" width="100%">
|
|
5
|
-
</a>
|
|
6
|
-
</p>
|
|
7
|
-
<p align="center">
|
|
8
|
-
<a href="https://zumerlab.github.io/orbit-docs" target="_blank"><b>📚 Docs</b></a> •
|
|
9
|
-
<a href="https://github.com/zumerlab/orbit/discussions" target="_blank"><b>💬 Github discussions</b></a> •
|
|
10
|
-
<a href="https://t.me/ZumlyCommunity" target="_blank"><b>🧑💻 Telegram group</b></a>
|
|
11
|
-
</p>
|
|
12
|
-
<p align="center">
|
|
13
|
-
<b>Use Orbit to create amazing radial UIs using CSS only!</b>
|
|
14
|
-
</p>
|
|
3
|
+
**Orbit** is a CSS framework for building radial UIs — gauges, donuts, knobs, pie menus, dashboards — with **CSS only**. No layout JavaScript. Works with plain HTML and any framework (React, Vue, Svelte).
|
|
15
4
|
|
|
16
5
|
<p align="center">
|
|
17
|
-
<a href="https://
|
|
6
|
+
<a href="https://zumerlab.github.io/orbit-docs" target="_blank"><strong>🚀 Live showcase & docs</strong></a>
|
|
7
|
+
|
|
18
8
|
</p>
|
|
19
9
|
|
|
20
10
|
<p align="center">
|
|
21
|
-
<a href="
|
|
22
|
-
|
|
11
|
+
<a href="https://www.npmjs.com/package/@zumer/orbit"><img src="https://img.shields.io/npm/v/@zumer/orbit" alt="npm"></a>
|
|
12
|
+
<a href="https://github.com/zumerlab/orbit/stargazers"><img src="https://img.shields.io/github/stars/zumerlab/orbit" alt="Stars"></a>
|
|
23
13
|
</p>
|
|
24
14
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
**Orbit** is a CSS framework designed for creating radial layouts. It offers simplicity, effectiveness, ease of use, and tremendous versatility for crafting compelling designs. It offers extensive customization options and supports nesting for building intricate designs tailored to your requirements.
|
|
15
|
+
---
|
|
28
16
|
|
|
29
17
|
## Why Orbit?
|
|
30
18
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
## Features
|
|
34
|
-
|
|
35
|
-
With **Orbit**, you can:
|
|
19
|
+
Radial UIs usually need JavaScript to compute angles, radii, and positions. **Orbit** handles all of that with CSS classes and a couple of Web Components. Drop in two files and start building.
|
|
36
20
|
|
|
37
|
-
|
|
38
|
-
- Easily compose simple or complex radial designs by combining **Orbit** elements.
|
|
39
|
-
- Use **Orbit** alongside other traditional CSS frameworks.
|
|
40
|
-
- Get started quickly with our detailed documentation, examples, and guides.
|
|
21
|
+
## Installation
|
|
41
22
|
|
|
42
|
-
|
|
23
|
+
**CDN (fastest):**
|
|
43
24
|
|
|
44
|
-
|
|
25
|
+
```html
|
|
26
|
+
<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
|
|
27
|
+
<script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js"></script>
|
|
28
|
+
```
|
|
45
29
|
|
|
46
|
-
|
|
30
|
+
**npm:**
|
|
47
31
|
|
|
48
|
-
|
|
32
|
+
```bash
|
|
33
|
+
npm install @zumer/orbit
|
|
34
|
+
```
|
|
49
35
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
- **Creative art and structures:** mandalas, sci-fi-inspired art, chemical structures
|
|
55
|
-
- **Interactive interfaces:** watch faces, dynamic controls for games or tools
|
|
36
|
+
```js
|
|
37
|
+
import '@zumer/orbit/style'
|
|
38
|
+
import '@zumer/orbit'
|
|
39
|
+
```
|
|
56
40
|
|
|
57
|
-
|
|
41
|
+
---
|
|
58
42
|
|
|
59
|
-
|
|
60
|
-
- **Center-focused:** the center often serves as a focal point.
|
|
61
|
-
- **Symmetry:** radial UIs frequently exhibit symmetry, fostering a sense of balance.
|
|
62
|
-
- **Angular relationships:** elements are positioned at specific angles relative to one another.
|
|
43
|
+
## Quick start
|
|
63
44
|
|
|
64
|
-
|
|
45
|
+
Minimal gauge in 10 lines:
|
|
65
46
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
-
|
|
47
|
+
```html
|
|
48
|
+
<div class="bigbang">
|
|
49
|
+
<div class="gravity-spot">
|
|
50
|
+
<div class="orbit-4">
|
|
51
|
+
<o-progress value="72"></o-progress>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
```
|
|
69
56
|
|
|
70
|
-
|
|
57
|
+
**Structure:** `bigbang` (container) → `gravity-spot` (center) → `orbit-N` (ring level) → `o-progress` or `o-arc` (the visual element).
|
|
71
58
|
|
|
72
|
-
|
|
59
|
+
---
|
|
73
60
|
|
|
74
|
-
|
|
61
|
+
## Core elements
|
|
75
62
|
|
|
76
|
-
|
|
63
|
+
| Element | Role |
|
|
64
|
+
|---------|------|
|
|
65
|
+
| `.bigbang` | Root container, sets viewport |
|
|
66
|
+
| `.gravity-spot` | Center of the radial layout; holds rings |
|
|
67
|
+
| `.orbit-1` … `.orbit-7` | Rings at different radii (1 = innermost) |
|
|
68
|
+
| `.satellite` | Item placed on a ring (dot, label, icon) |
|
|
69
|
+
| `<o-arc>` | Arc segment (donut slice, gauge needle, menu sector); `value` 0–100, `shape` e.g. `arrow`, `circle-a` |
|
|
70
|
+
| `<o-progress>` | Simple progress ring |
|
|
71
|
+
| `.vector` | Tick/marker on a ring |
|
|
72
|
+
| `.side` | Stretch content along arc |
|
|
73
|
+
| `.capsule` | Wrapper for content inside satellite; required when satellite holds more than plain text |
|
|
77
74
|
|
|
78
|
-
|
|
75
|
+
**Structure rules (avoid visual warnings):**
|
|
76
|
+
- `.bigbang` → direct children: `.gravity-spot` only
|
|
77
|
+
- `.gravity-spot` → direct children: `.orbit`, `.orbit-N`, or `.gravity-spot` only
|
|
78
|
+
- `.satellite` → direct children: `.capsule` or `.gravity-spot` (for nesting) only
|
|
79
|
+
- `.orbit` / `.orbit-N` → do not nest other orbits; orbits live inside gravity-spot
|
|
80
|
+
- `o-arc` and `o-progress` → only work in circular orbits; they are hidden in elliptical shapes
|
|
79
81
|
|
|
80
|
-
-
|
|
81
|
-
- Download the **JS file:** [orbit.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.js) or [orbit.min.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.js).
|
|
82
|
+
**Useful classes:** `range-180`, `range-270`, `range-360` (arc span); `from-180` (start angle); `fit-range` (distribute items); `shrink-50`, `gap-4` (spacing); `at-center` (place satellite in middle).
|
|
82
83
|
|
|
83
|
-
|
|
84
|
+
---
|
|
84
85
|
|
|
85
|
-
|
|
86
|
-
Uncompressed: [orbit.css](https://unpkg.com/@zumer/orbit@latest/dist/orbit.css)
|
|
87
|
-
Minified: [orbit.min.css](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.css)
|
|
86
|
+
## Themes
|
|
88
87
|
|
|
89
|
-
-
|
|
90
|
-
Uncompressed: [orbit.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.js)
|
|
91
|
-
Minified: [orbit.min.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.js)
|
|
88
|
+
Orbit includes built-in themes. Add the theme class to `.bigbang`:
|
|
92
89
|
|
|
93
|
-
|
|
90
|
+
| Theme | Class | Description |
|
|
91
|
+
|-------|-------|-------------|
|
|
92
|
+
| **Default** | *(none)* | Transparent borders, gray fills, satellites use `currentColor` |
|
|
93
|
+
| **Cyan** | `theme-cyan` | Cyan satellite borders, cyan vectors/sides, light cyan fills for `o-arc` and `o-progress` |
|
|
94
|
+
| **Developer** | `dev-orbit` | Dashed red borders on orbits and satellites to visualize structure while debugging |
|
|
94
95
|
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
|
|
96
|
+
```html
|
|
97
|
+
<!-- Default (no class) -->
|
|
98
|
+
<div class="bigbang">...</div>
|
|
98
99
|
|
|
99
|
-
|
|
100
|
+
<!-- Cyan theme -->
|
|
101
|
+
<div class="bigbang theme-cyan">...</div>
|
|
100
102
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
+
<!-- Developer mode for layout debugging -->
|
|
104
|
+
<div class="bigbang dev-orbit">...</div>
|
|
103
105
|
```
|
|
104
106
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
Include the files in your project as follows:
|
|
107
|
+
You can combine themes, e.g. `class="bigbang theme-cyan dev-orbit"`.
|
|
108
108
|
|
|
109
|
-
|
|
110
|
-
<head>
|
|
111
|
-
<link rel="stylesheet" href="path/to/orbit.css">
|
|
112
|
-
<script src="path/to/orbit.js"></script>
|
|
113
|
-
</head>
|
|
114
|
-
```
|
|
109
|
+
---
|
|
115
110
|
|
|
116
|
-
|
|
111
|
+
## Visual aids & development
|
|
117
112
|
|
|
118
|
-
|
|
119
|
-
<head>
|
|
120
|
-
<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
|
|
121
|
-
<script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js"></script>
|
|
122
|
-
</head>
|
|
123
|
-
```
|
|
113
|
+
Orbit provides **CSS visual warnings** to catch invalid structure. When rules are broken (e.g. wrong children in `gravity-spot` or `satellite`), Orbit shows a red dotted border, grays out content, and displays a ⚠️ icon.
|
|
124
114
|
|
|
125
|
-
|
|
115
|
+
Add **`class="dev-orbit"`** to your root container to enable **developer mode**: dashed red borders on `gravity-spot`, `orbit`, and `satellite` to visualize the layout structure. Useful for debugging.
|
|
126
116
|
|
|
127
117
|
```html
|
|
128
|
-
<div class="bigbang">
|
|
118
|
+
<div class="bigbang dev-orbit">
|
|
129
119
|
<div class="gravity-spot">
|
|
130
|
-
|
|
131
|
-
<o-arc shape="circle" class="shrink-50"></o-arc>
|
|
132
|
-
</div>
|
|
133
|
-
<div class="orbit-3 range-270 ">
|
|
134
|
-
<o-arc shape="circle" class="shrink-50"></o-arc>
|
|
135
|
-
</div>
|
|
120
|
+
...
|
|
136
121
|
</div>
|
|
137
122
|
</div>
|
|
138
123
|
```
|
|
139
124
|
|
|
125
|
+
Orbit also checks browser support for `:has()` and trigonometric CSS functions (`cos`, `sin`); unsupported browsers show an upgrade message. See [CSS visual aids](https://zumerlab.github.io/orbit-docs/tools/support) in the full docs.
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
140
129
|
## Examples
|
|
141
130
|
|
|
142
|
-
|
|
143
|
-
|
|
131
|
+
Browse examples on the [Orbit docs site](https://zumerlab.github.io/orbit-docs):
|
|
144
132
|
|
|
145
|
-
|
|
146
|
-
|
|
133
|
+
| Example | Link |
|
|
134
|
+
|---------|------|
|
|
135
|
+
| Circular timer | [circular_time](https://zumerlab.github.io/orbit-docs/examples/circular_time/) |
|
|
136
|
+
| Progress bars | [progress](https://zumerlab.github.io/orbit-docs/examples/progress/) |
|
|
137
|
+
| Charts (donut, pie, sunburst) | [charts](https://zumerlab.github.io/orbit-docs/examples/charts/) |
|
|
138
|
+
| Gauges (180°, 240°, fuel) | [gauges](https://zumerlab.github.io/orbit-docs/examples/gauges/) |
|
|
139
|
+
| Knobs | [knobs](https://zumerlab.github.io/orbit-docs/examples/knobs/) |
|
|
140
|
+
| Pie menus | [piemenu](https://zumerlab.github.io/orbit-docs/examples/piemenu/) |
|
|
141
|
+
| Watch faces | [watches](https://zumerlab.github.io/orbit-docs/examples/watches/) |
|
|
142
|
+
| Chemical structures | [chemical_structures](https://zumerlab.github.io/orbit-docs/examples/chemical_structures/) |
|
|
143
|
+
| Calendars & time planners | [calendar](https://zumerlab.github.io/orbit-docs/examples/calendar/) |
|
|
144
|
+
| Mandalas | [mandalas](https://zumerlab.github.io/orbit-docs/examples/mandalas/) |
|
|
145
|
+
| Dashboard | [dashboard](https://zumerlab.github.io/orbit-docs/examples/dashboard/) |
|
|
146
|
+
| Abstract orbital map | [abstract_map](https://zumerlab.github.io/orbit-docs/examples/abstract_map/) |
|
|
147
147
|
|
|
148
|
-
|
|
148
|
+
---
|
|
149
149
|
|
|
150
|
-
##
|
|
150
|
+
## Use cases
|
|
151
151
|
|
|
152
|
-
|
|
152
|
+
- **Dashboards:** gauges, status rings, KPIs
|
|
153
|
+
- **Automotive / HUD:** speedometers, tachometers, battery, temp
|
|
154
|
+
- **IoT / Smart home:** thermostats, energy rings, scenes
|
|
155
|
+
- **Ops / monitoring:** status rings, uptime gauges
|
|
156
|
+
- **Fitness / health:** activity rings (Move, Exercise, Stand)
|
|
157
|
+
- **Controls:** knobs, radial menus, compass
|
|
153
158
|
|
|
154
|
-
|
|
155
|
-
- [**GitHub discussions**](https://github.com/zumerlab/orbit/discussions): Engage with other contributors, ask questions, and share your experiences.
|
|
156
|
-
- [**Telegram group**](https://t.me/ZumlyCommunity): Join our Telegram group for real-time discussions and updates.
|
|
159
|
+
---
|
|
157
160
|
|
|
158
|
-
##
|
|
161
|
+
## Resources
|
|
159
162
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
+
- [Full documentation](https://zumerlab.github.io/orbit-docs) — elements, tools, advanced examples
|
|
164
|
+
- [Contributing](CONTRIBUTING.md)
|
|
165
|
+
- [GitHub Discussions](https://github.com/zumerlab/orbit/discussions)
|
|
166
|
+
- [Telegram](https://t.me/ZumlyCommunity)
|
|
163
167
|
|
|
164
|
-
|
|
165
|
-
<img src="https://contrib.rocks/image?repo=zumerlab/orbit" />
|
|
166
|
-
</a>
|
|
168
|
+
---
|
|
167
169
|
|
|
168
|
-
## License
|
|
170
|
+
## License
|
|
169
171
|
|
|
170
|
-
[MIT](
|
|
172
|
+
[MIT](LICENSE)
|
package/dist/orbit.css
CHANGED
|
@@ -1242,8 +1242,8 @@ body > .bigbang {
|
|
|
1242
1242
|
|
|
1243
1243
|
.orbit, [class*=orbit-] {
|
|
1244
1244
|
container-name: orbit;
|
|
1245
|
-
--o-base-diameter: (var(--o-initial-orbit, 0) + var(--o-orbit-number)) * (var(--o-force) * var(--o-force-ratio)) / (12 + var(--o-initial-orbit, 0));
|
|
1246
|
-
--o-prev-diameter: ((var(--o-initial-orbit, 0) + var(--o-orbit-number)) - 1) * (var(--o-force) * var(--o-force-ratio)) / (12 + var(--o-initial-orbit, 0));
|
|
1245
|
+
--o-base-diameter: calc((var(--o-initial-orbit, 0) + var(--o-orbit-number)) * (var(--o-force) * var(--o-force-ratio)) / (12 + var(--o-initial-orbit, 0)));
|
|
1246
|
+
--o-prev-diameter: calc(((var(--o-initial-orbit, 0) + var(--o-orbit-number)) - 1) * (var(--o-force) * var(--o-force-ratio)) / (12 + var(--o-initial-orbit, 0)));
|
|
1247
1247
|
--o-diameter: calc(var(--o-base-diameter) - ((var(--o-base-diameter) - var(--o-prev-diameter)) * var(--o-orbit-ratio, 0)));
|
|
1248
1248
|
--o-radius: calc(var(--o-diameter) / 2);
|
|
1249
1249
|
width: calc(var(--o-diameter) / var(--o-ellipse-x));
|
|
@@ -1394,7 +1394,7 @@ o-progress {
|
|
|
1394
1394
|
rotate: calc(var(--o-angle-composite));
|
|
1395
1395
|
}
|
|
1396
1396
|
|
|
1397
|
-
/* radial elements
|
|
1397
|
+
/* radial elements alignment utilities */
|
|
1398
1398
|
.at-top-left {
|
|
1399
1399
|
align-items: flex-start !important;
|
|
1400
1400
|
justify-content: flex-start !important;
|
package/dist/orbit.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* orbit
|
|
3
|
-
* v.1.4.
|
|
3
|
+
* v.1.4.10
|
|
4
4
|
* Author Juan Martin Muda - Zumerlab
|
|
5
5
|
* License MIT
|
|
6
6
|
*/
|
|
@@ -9,17 +9,6 @@
|
|
|
9
9
|
var OrbitBase = class extends HTMLElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super();
|
|
12
|
-
this.commonProperties = {
|
|
13
|
-
orbitRadius: 0,
|
|
14
|
-
arcHeight: 0,
|
|
15
|
-
realRadius: 0,
|
|
16
|
-
arcAngle: 0,
|
|
17
|
-
shape: "none",
|
|
18
|
-
arcHeightPercentage: 0,
|
|
19
|
-
orbitNumber: 1,
|
|
20
|
-
size: 1,
|
|
21
|
-
strokeWidth: 1
|
|
22
|
-
};
|
|
23
12
|
}
|
|
24
13
|
getCommonAttributes(element) {
|
|
25
14
|
const orbitRadius = parseFloat(getComputedStyle(element).getPropertyValue("r") || 0);
|
|
@@ -28,7 +17,7 @@
|
|
|
28
17
|
const strokeWidth = parseFloat(getComputedStyle(element).getPropertyValue("--o-stroke-width") || 1);
|
|
29
18
|
const shape = element.getAttribute("shape") || "none";
|
|
30
19
|
const arcHeight = orbitRadius / orbitNumber * size - strokeWidth + 0.3;
|
|
31
|
-
const arcHeightPercentage = arcHeight / 2 * 100 / orbitRadius / 2;
|
|
20
|
+
const arcHeightPercentage = orbitRadius > 0 ? arcHeight / 2 * 100 / orbitRadius / 2 : 0;
|
|
32
21
|
let innerOuter = 0;
|
|
33
22
|
if (element.classList.contains("outer-orbit")) {
|
|
34
23
|
innerOuter = arcHeightPercentage;
|
|
@@ -156,15 +145,11 @@
|
|
|
156
145
|
const Q2 = this.getControlPoint(newInnerStart.x, newInnerStart.y, innerPointStart.x, innerPointStart.y);
|
|
157
146
|
const Q3 = this.getControlPoint(upperPointStart.x, upperPointStart.y, newUpperStart.x, newUpperStart.y);
|
|
158
147
|
let d = `M ${newUpperStart.x},${newUpperStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${newUpperEnd.x},${newUpperEnd.y}`;
|
|
159
|
-
d += `Q ${Q.xc}
|
|
160
|
-
d += `
|
|
161
|
-
d += `L ${innerPointEnd.x} ${innerPointEnd.y}`;
|
|
162
|
-
d += `Q ${Q1.xc}, ${Q1.yc} ${newInnerEnd.x} ${newInnerEnd.y} `;
|
|
148
|
+
d += `Q ${Q.xc},${Q.yc} ${upperPointEnd.x},${upperPointEnd.y} L ${innerPointEnd.x},${innerPointEnd.y}`;
|
|
149
|
+
d += `Q ${Q1.xc},${Q1.yc} ${newInnerEnd.x},${newInnerEnd.y}`;
|
|
163
150
|
d += `A ${smallRadius},${smallRadius} 0 ${largeArcFlag} 0 ${newInnerStart.x},${newInnerStart.y}`;
|
|
164
|
-
d += `Q ${Q2.xc}
|
|
165
|
-
d += `
|
|
166
|
-
d += `L ${upperPointStart.x} ${upperPointStart.y}`;
|
|
167
|
-
d += ` Q ${Q3.xc}, ${Q3.yc} ${newUpperStart.x} ${newUpperStart.y} `;
|
|
151
|
+
d += `Q ${Q2.xc},${Q2.yc} ${innerPointStart.x},${innerPointStart.y} L ${upperPointStart.x},${upperPointStart.y}`;
|
|
152
|
+
d += ` Q ${Q3.xc},${Q3.yc} ${newUpperStart.x},${newUpperStart.y}`;
|
|
168
153
|
d += ` Z`;
|
|
169
154
|
return d;
|
|
170
155
|
}
|
|
@@ -218,12 +203,13 @@
|
|
|
218
203
|
}
|
|
219
204
|
generateZigzagPath(params, arcHeight, orbitNumber) {
|
|
220
205
|
const { upperArcStart, upperArcEnd, innerArcStart, innerArcEnd, bigRadius, smallRadius, largeArcFlag, radius } = params;
|
|
221
|
-
const
|
|
222
|
-
const
|
|
223
|
-
const
|
|
224
|
-
const
|
|
225
|
-
const
|
|
226
|
-
const
|
|
206
|
+
const h2 = arcHeight / orbitNumber / 2;
|
|
207
|
+
const s2 = this.arcPoint(radius, params.upperAngleStart, -h2, 3);
|
|
208
|
+
const s3 = this.arcPoint(radius, params.upperAngleStart, 0, 0);
|
|
209
|
+
const s4 = this.arcPoint(radius, params.upperAngleStart, h2, 3);
|
|
210
|
+
const e2 = this.arcPoint(radius, params.innerAngleEnd, h2, 3);
|
|
211
|
+
const e3 = this.arcPoint(radius, params.innerAngleEnd, 0, 0);
|
|
212
|
+
const e4 = this.arcPoint(radius, params.innerAngleEnd, -h2, 3);
|
|
227
213
|
let d = `M ${upperArcStart.x},${upperArcStart.y} A ${bigRadius},${bigRadius} 0 ${largeArcFlag} 1 ${upperArcEnd.x},${upperArcEnd.y}`;
|
|
228
214
|
d += `L ${e2.x} ${e2.y}`;
|
|
229
215
|
d += `L ${e3.x} ${e3.y}`;
|
|
@@ -310,14 +296,11 @@
|
|
|
310
296
|
this.observer.observe(this, { attributes: true, childList: true });
|
|
311
297
|
}
|
|
312
298
|
update() {
|
|
313
|
-
const
|
|
314
|
-
const
|
|
315
|
-
this.
|
|
316
|
-
this.
|
|
317
|
-
|
|
318
|
-
updateArc(arc, full) {
|
|
319
|
-
const { d } = this.calculateArcParameters(full);
|
|
320
|
-
arc.setAttribute("d", d);
|
|
299
|
+
const attrs = this.getAttributes();
|
|
300
|
+
const dBg = this.calculateArcParameters(attrs, true);
|
|
301
|
+
const dBar = this.calculateArcParameters(attrs, false);
|
|
302
|
+
this.shadowRoot.querySelector(".progress-bg").setAttribute("d", dBg);
|
|
303
|
+
this.shadowRoot.querySelector(".progress-bar").setAttribute("d", dBar);
|
|
321
304
|
}
|
|
322
305
|
getAttributes() {
|
|
323
306
|
const common = super.getCommonAttributes(this);
|
|
@@ -331,13 +314,13 @@
|
|
|
331
314
|
maxValue
|
|
332
315
|
};
|
|
333
316
|
}
|
|
334
|
-
getProgressAngle(full) {
|
|
335
|
-
const { range, progress, maxValue } =
|
|
317
|
+
getProgressAngle(attrs, full) {
|
|
318
|
+
const { range, progress, maxValue } = attrs;
|
|
336
319
|
return full ? (maxValue - 1e-5) / maxValue * range : progress / maxValue * range;
|
|
337
320
|
}
|
|
338
|
-
calculateArcParameters(full) {
|
|
339
|
-
const { shape, realRadius, arcHeightPercentage, orbitNumber, strokeWidth, arcHeight } =
|
|
340
|
-
const arcAngle = this.getProgressAngle(full);
|
|
321
|
+
calculateArcParameters(attrs, full) {
|
|
322
|
+
const { shape, realRadius, arcHeightPercentage, orbitNumber, strokeWidth, arcHeight } = attrs;
|
|
323
|
+
const arcAngle = this.getProgressAngle(attrs, full);
|
|
341
324
|
const params = super.calculateCommonArcParameters(
|
|
342
325
|
arcAngle,
|
|
343
326
|
realRadius,
|
|
@@ -347,8 +330,7 @@
|
|
|
347
330
|
strokeWidth,
|
|
348
331
|
arcHeight
|
|
349
332
|
);
|
|
350
|
-
|
|
351
|
-
return { d };
|
|
333
|
+
return super.generatePathData(shape, params, arcHeight, orbitNumber);
|
|
352
334
|
}
|
|
353
335
|
};
|
|
354
336
|
|
|
@@ -411,9 +393,8 @@
|
|
|
411
393
|
this.setupObservers();
|
|
412
394
|
}
|
|
413
395
|
disconnectedCallback() {
|
|
414
|
-
|
|
415
|
-
(
|
|
416
|
-
(_b = this.textObserver) == null ? void 0 : _b.disconnect();
|
|
396
|
+
if (this.observer) this.observer.disconnect();
|
|
397
|
+
if (this.textObserver) this.textObserver.disconnect();
|
|
417
398
|
}
|
|
418
399
|
setupObservers() {
|
|
419
400
|
this.observer = new MutationObserver((mutations) => {
|
|
@@ -429,15 +410,13 @@
|
|
|
429
410
|
this.textObserver.observe(this, { characterData: true, subtree: true });
|
|
430
411
|
}
|
|
431
412
|
update() {
|
|
432
|
-
const
|
|
433
|
-
const
|
|
434
|
-
const
|
|
435
|
-
const
|
|
413
|
+
const attrs = this.getAttributes();
|
|
414
|
+
const { length, fontSize, textAnchor, fitRange } = attrs;
|
|
415
|
+
const orbitPath = this.shadowRoot.querySelector("#orbitPath");
|
|
416
|
+
const orbitShape = this.shadowRoot.querySelector("#orbitShape");
|
|
436
417
|
const textPath = this.shadowRoot.querySelector("textPath");
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
orbitShape.setAttribute("d", dShape);
|
|
440
|
-
orbitPath.setAttribute("d", dPath);
|
|
418
|
+
orbitShape.setAttribute("d", this.calculateArcParameters(attrs).dShape);
|
|
419
|
+
orbitPath.setAttribute("d", this.calculateTextArcParameters(attrs).dPath);
|
|
441
420
|
if (textAnchor === "start") {
|
|
442
421
|
textPath.setAttribute("startOffset", "0%");
|
|
443
422
|
textPath.setAttribute("text-anchor", "start");
|
|
@@ -451,7 +430,7 @@
|
|
|
451
430
|
if (fitRange) {
|
|
452
431
|
textPath.parentElement.setAttribute("textLength", orbitPath.getTotalLength());
|
|
453
432
|
}
|
|
454
|
-
|
|
433
|
+
textPath.parentElement.style.fontSize = `calc(${fontSize} * (100 / (${length}) * (12 / var(--o-orbit-number)))`;
|
|
455
434
|
textPath.textContent = this.textContent;
|
|
456
435
|
}
|
|
457
436
|
getAttributes() {
|
|
@@ -459,12 +438,12 @@
|
|
|
459
438
|
let arcAngle;
|
|
460
439
|
const flip = this.hasAttribute("flip") || this.classList.contains("flip");
|
|
461
440
|
const fitRange = this.hasAttribute("fit-range") || this.classList.contains("fit-range") || false;
|
|
462
|
-
const length = parseFloat(getComputedStyle(this).getPropertyValue("--o-force"));
|
|
441
|
+
const length = parseFloat(getComputedStyle(this).getPropertyValue("--o-force")) || 100;
|
|
463
442
|
const textAnchor = this.getAttribute("text-anchor") || "middle";
|
|
464
443
|
const fontSize = getComputedStyle(this).getPropertyValue("font-size") || getComputedStyle(this).getPropertyValue("--font-size");
|
|
465
444
|
const range = parseFloat(getComputedStyle(this).getPropertyValue("--o-range") || 360);
|
|
466
445
|
const value = parseFloat(this.getAttribute("value"));
|
|
467
|
-
const gap = parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));
|
|
446
|
+
const gap = parseFloat(getComputedStyle(this).getPropertyValue("--o-gap")) || 1;
|
|
468
447
|
if (value) {
|
|
469
448
|
arcAngle = super.getProgressAngle(range, value);
|
|
470
449
|
const prevElement = this.previousElementSibling;
|
|
@@ -491,8 +470,8 @@
|
|
|
491
470
|
textAnchor
|
|
492
471
|
};
|
|
493
472
|
}
|
|
494
|
-
calculateArcParameters() {
|
|
495
|
-
const { arcAngle, realRadius, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight, gap } =
|
|
473
|
+
calculateArcParameters(attrs) {
|
|
474
|
+
const { arcAngle, realRadius, arcHeightPercentage, orbitNumber, shape, strokeWidth, arcHeight, gap } = attrs;
|
|
496
475
|
const params = super.calculateCommonArcParameters(
|
|
497
476
|
arcAngle,
|
|
498
477
|
realRadius,
|
|
@@ -506,8 +485,8 @@
|
|
|
506
485
|
const dShape = super.generatePathData(shape, params, arcHeight, orbitNumber);
|
|
507
486
|
return { dShape };
|
|
508
487
|
}
|
|
509
|
-
calculateTextArcParameters() {
|
|
510
|
-
const { arcAngle, realRadius, gap, flip } =
|
|
488
|
+
calculateTextArcParameters(attrs) {
|
|
489
|
+
const { arcAngle, realRadius, gap, flip } = attrs;
|
|
511
490
|
const adjustedGap = gap * 0.5;
|
|
512
491
|
const sweepFlag = flip ? 0 : 1;
|
|
513
492
|
const largeArcFlag = arcAngle <= 180 ? 0 : 1;
|
|
@@ -533,39 +512,35 @@
|
|
|
533
512
|
};
|
|
534
513
|
|
|
535
514
|
// src/js/orbit-resize.js
|
|
536
|
-
var Orbit = {
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
console.error(`Not found: ${parentElementSelector}`);
|
|
515
|
+
var Orbit = {
|
|
516
|
+
resize(parentElementSelector) {
|
|
517
|
+
const parent = document.querySelector(parentElementSelector);
|
|
518
|
+
if (!parent) {
|
|
519
|
+
console.error("Orbit.resize: element not found:", parentElementSelector);
|
|
542
520
|
return;
|
|
543
521
|
}
|
|
544
|
-
const
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
522
|
+
const applyRatio = (width) => {
|
|
523
|
+
parent.querySelectorAll(".gravity-spot").forEach((el) => {
|
|
524
|
+
el.style.setProperty("--o-force-ratio", String(width / 500));
|
|
525
|
+
});
|
|
526
|
+
};
|
|
527
|
+
let w = parent.offsetWidth || parent.getBoundingClientRect().width;
|
|
528
|
+
if (w > 0) applyRatio(w);
|
|
529
|
+
else requestAnimationFrame(() => {
|
|
530
|
+
w = parent.offsetWidth || parent.getBoundingClientRect().width;
|
|
531
|
+
if (w > 0) applyRatio(w);
|
|
532
|
+
});
|
|
533
|
+
const ro = new ResizeObserver((entries) => {
|
|
534
|
+
for (const e of entries) {
|
|
535
|
+
if (e.contentRect.width > 0) applyRatio(e.contentRect.width);
|
|
557
536
|
}
|
|
558
537
|
});
|
|
559
|
-
|
|
538
|
+
ro.observe(parent);
|
|
560
539
|
}
|
|
561
540
|
};
|
|
562
541
|
|
|
563
542
|
// src/orbit.js
|
|
564
|
-
if (!customElements.get("o-progress"))
|
|
565
|
-
|
|
566
|
-
}
|
|
567
|
-
if (!customElements.get("o-arc")) {
|
|
568
|
-
customElements.define("o-arc", OrbitArc);
|
|
569
|
-
}
|
|
543
|
+
if (!customElements.get("o-progress")) customElements.define("o-progress", OrbitProgress);
|
|
544
|
+
if (!customElements.get("o-arc")) customElements.define("o-arc", OrbitArc);
|
|
570
545
|
window.Orbit = Orbit;
|
|
571
546
|
})();
|