@zumer/orbit 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +120 -159
- package/dist/orbit.css +72 -0
- package/dist/orbit.js +7 -2
- package/dist/orbit.min.css +1 -1
- package/dist/orbit.min.js +4 -4
- package/dist/orbit.mjs +7 -2
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,233 +1,194 @@
|
|
|
1
1
|
# Orbit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Orbit arranges HTML elements around a center. Use it to build radial menus, charts, gauges and other circular interfaces.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
<a href="https://zumerlab.github.io/orbit-docs" target="_blank"><strong>🚀 Live showcase & docs</strong></a>
|
|
5
|
+
CSS controls geometry and appearance. A small JavaScript runtime updates the layout and draws arcs when elements, styles or values change. Orbit works with plain HTML, React, Vue and Svelte.
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
[Examples and documentation](https://zumerlab.github.io/orbit-docs/) · [npm](https://www.npmjs.com/package/@zumer/orbit)
|
|
9
8
|
|
|
10
|
-
|
|
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>
|
|
13
|
-
</p>
|
|
9
|
+
## Install
|
|
14
10
|
|
|
15
|
-
|
|
11
|
+
```sh
|
|
12
|
+
npm install @zumer/orbit
|
|
13
|
+
```
|
|
16
14
|
|
|
17
|
-
|
|
15
|
+
Import the stylesheet and runtime in your app's client entrypoint:
|
|
18
16
|
|
|
19
|
-
|
|
17
|
+
```js
|
|
18
|
+
import '@zumer/orbit/style'
|
|
19
|
+
import '@zumer/orbit'
|
|
20
|
+
```
|
|
20
21
|
|
|
21
|
-
|
|
22
|
+
For a plain HTML page, load the files from a CDN as shown below.
|
|
22
23
|
|
|
23
|
-
##
|
|
24
|
+
## A progress ring
|
|
24
25
|
|
|
25
|
-
|
|
26
|
+
Save this as `index.html` and open it in a browser. It loads Orbit from the CDN and draws a ring at 72%.
|
|
26
27
|
|
|
27
28
|
```html
|
|
28
|
-
|
|
29
|
-
<
|
|
29
|
+
<!doctype html>
|
|
30
|
+
<html lang="en">
|
|
31
|
+
<head>
|
|
32
|
+
<meta charset="utf-8">
|
|
33
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
34
|
+
<title>Orbit progress ring</title>
|
|
35
|
+
<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@1.5.0/dist/orbit.min.css">
|
|
36
|
+
<script defer src="https://unpkg.com/@zumer/orbit@1.5.0/dist/orbit.min.js"></script>
|
|
37
|
+
<style>
|
|
38
|
+
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
|
|
39
|
+
.gauge.bigbang { width: 240px; height: 240px; }
|
|
40
|
+
.gauge > .gravity-spot { --o-force: 400px; }
|
|
41
|
+
.gauge o-progress { --o-fill: #3da9fc; --o-back-fill: #1d3749; --o-stroke: none; }
|
|
42
|
+
</style>
|
|
43
|
+
</head>
|
|
44
|
+
<body>
|
|
45
|
+
<div class="gauge bigbang">
|
|
46
|
+
<div class="gravity-spot">
|
|
47
|
+
<div class="orbit-6">
|
|
48
|
+
<o-progress value="72" shape="rounded" role="progressbar"
|
|
49
|
+
aria-label="Upload progress" aria-valuenow="72"
|
|
50
|
+
aria-valuemin="0" aria-valuemax="100"></o-progress>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
|
30
56
|
```
|
|
31
57
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
npm install @zumer/orbit
|
|
36
|
-
```
|
|
58
|
+
Change the `value` attribute to update the ring. Keep any labels or ARIA values you add in sync with it:
|
|
37
59
|
|
|
38
60
|
```js
|
|
39
|
-
|
|
40
|
-
|
|
61
|
+
const progress = document.querySelector('o-progress')
|
|
62
|
+
progress.setAttribute('value', '40')
|
|
63
|
+
progress.setAttribute('aria-valuenow', '40')
|
|
41
64
|
```
|
|
42
65
|
|
|
43
|
-
The
|
|
44
|
-
|
|
45
|
-
The module also exports `Orbit`, `OrbitArc`, `OrbitProgress` and `registerOrbit`:
|
|
66
|
+
The runtime redraws the ring automatically. A value of `0` leaves only the background; `100` fills the orbit's range.
|
|
46
67
|
|
|
47
|
-
|
|
48
|
-
import { Orbit } from '@zumer/orbit'
|
|
68
|
+
## How layouts fit together
|
|
49
69
|
|
|
50
|
-
|
|
51
|
-
const stopResizing = Orbit.resize('#instrument-panel')
|
|
52
|
-
// Later: stopResizing()
|
|
70
|
+
A `.bigbang` container holds a `.gravity-spot`, which defines the center. Rings inside it position the content. In the example above, `.orbit-6` sets the ring's radius and `<o-progress>` draws on it.
|
|
53
71
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
72
|
+
| Element | Purpose |
|
|
73
|
+
| --- | --- |
|
|
74
|
+
| `.bigbang` | Container that centers the layout. |
|
|
75
|
+
| `.gravity-spot` | Layout origin; holds rings and defines their scale with `--o-force`. |
|
|
76
|
+
| `.orbit` / `.orbit-N` | Ring with an automatic index or an explicit level, such as `.orbit-6`. |
|
|
77
|
+
| `.satellite` | Positions an item on a ring. |
|
|
78
|
+
| `.capsule` | Wraps content inside a satellite. |
|
|
79
|
+
| `.vector` | Places a tick or marker on a ring. |
|
|
80
|
+
| `.side` | Places content along the straight line between adjacent ring positions. |
|
|
81
|
+
| `<o-arc>` | Draws a segment. Sibling arcs stack in HTML order. |
|
|
82
|
+
| `<o-progress>` | Draws a progress value over a background arc. |
|
|
57
83
|
|
|
58
|
-
|
|
84
|
+
Put rings directly inside `.gravity-spot`, not inside other rings. Use `.capsule` for elements inside a satellite, or a nested `.gravity-spot` for another radial layout. `.orbit-0` places content at the center.
|
|
59
85
|
|
|
60
|
-
|
|
86
|
+
Set `--o-range` to control the angular span and `--o-from` to rotate it. Classes such as `range-270`, `from-180` and `fit-range` provide common settings. The [element reference](https://zumerlab.github.io/orbit-docs/elements/orbit/) covers sizing, spacing and nesting.
|
|
61
87
|
|
|
62
|
-
|
|
88
|
+
Arcs and progress elements use `value` relative to `max`, which defaults to `100`, and support circular rings. Add `interactive` when you need their SVG shapes to receive pointer events; they are decorative by default. Supply the keyboard behavior and accessible labels for any controls you build.
|
|
63
89
|
|
|
64
|
-
|
|
90
|
+
Progress rings draw filled bands by default. For a stroked line, use `variant="stroke"` and set `--o-stroke` and `--o-back-stroke` instead of the fill colors.
|
|
65
91
|
|
|
66
|
-
|
|
92
|
+
### Depth layers
|
|
67
93
|
|
|
68
|
-
|
|
94
|
+
Add `depth` to a `.gravity-spot` to stack its rings in 3D. Each direct child ring (or a nested `.bigbang`) is a layer: `data-depth="1"` moves it one step back, and `.layer-front` marks the active layer at depth 0. Layers keep their apparent size, because the scale compensates for the perspective, and they animate when their depth changes.
|
|
69
95
|
|
|
70
96
|
```html
|
|
71
|
-
<div class="
|
|
72
|
-
<div class="
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
97
|
+
<div class="gravity-spot depth" style="--o-depth-grow: .42">
|
|
98
|
+
<div class="orbit-4 layer-front"><o-progress value="82"></o-progress></div>
|
|
99
|
+
<div class="orbit-4" data-depth="1"><o-progress value="40"></o-progress></div>
|
|
100
|
+
<div class="orbit-4" data-depth="2"><o-progress value="65"></o-progress></div>
|
|
77
101
|
</div>
|
|
78
102
|
```
|
|
79
103
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
|
87
|
-
|
|
88
|
-
|
|
|
89
|
-
| `.gravity-spot` | Center of the radial layout; holds rings |
|
|
90
|
-
| `.orbit` / `.orbit-N` | Automatically numbered rings, or an explicit nonnegative integer ring level (1 = innermost) |
|
|
91
|
-
| `.satellite` | Item placed on a ring (dot, label, icon) |
|
|
92
|
-
| `<o-arc>` | Arc segment (donut slice, gauge needle, menu sector); `value` 0–100, `shape` e.g. `arrow`, `circle-a` |
|
|
93
|
-
| `<o-progress>` | Simple progress ring |
|
|
94
|
-
| `.vector` | Tick/marker on a ring |
|
|
95
|
-
| `.side` | Stretch content along arc |
|
|
96
|
-
| `.capsule` | Wrapper for content inside satellite; required when satellite holds more than plain text |
|
|
104
|
+
| Property | Default | Purpose |
|
|
105
|
+
| --- | --- | --- |
|
|
106
|
+
| `--o-z` | `depth × step` | Position on the z axis in unitless pixels; negative values are farther away. Set it on a ring to override `data-depth`. |
|
|
107
|
+
| `--o-depth-step` | `-110` | Distance between depth steps. |
|
|
108
|
+
| `--o-perspective` | `900` | Perspective in unitless pixels. |
|
|
109
|
+
| `--o-depth-grow` | `0` | Extra size per step back; `.42` gives 1×, 1.42×, 1.84×. |
|
|
110
|
+
| `--o-depth-compensate` | `1` | Set to `0` to let farther layers look smaller. |
|
|
111
|
+
| `--o-back-opacity` | `1` | Opacity of layers behind the front one. |
|
|
112
|
+
| `--o-depth-duration` / `--o-depth-easing` | `.8s` / `cubic-bezier(.2,.8,.2,1)` | Depth transition. Disabled with `prefers-reduced-motion`. |
|
|
97
113
|
|
|
98
|
-
|
|
114
|
+
`data-depth` accepts 0 to 8. Rings outside `.depth` are not transformed.
|
|
99
115
|
|
|
100
|
-
|
|
101
|
-
- `.gravity-spot` → direct children: `.orbit`, `.orbit-N`, or `.gravity-spot` only
|
|
102
|
-
- `.satellite` → direct children: `.capsule` or `.gravity-spot` (for nesting) only
|
|
103
|
-
- `.orbit` / `.orbit-N` → do not nest other orbits; orbits live inside gravity-spot
|
|
104
|
-
- `o-arc` and `o-progress` → only work in circular orbits; they are hidden in elliptical shapes
|
|
116
|
+
## In an app
|
|
105
117
|
|
|
106
|
-
|
|
118
|
+
Orbit observes added, removed and reordered elements, style and attribute changes, and container resizes. Updates are grouped into the next animation frame.
|
|
107
119
|
|
|
108
|
-
|
|
120
|
+
Importing the package during server rendering is safe. Include it in the browser entrypoint too, so it can register the custom elements and observe the rendered layout. The module exports `Orbit`, `OrbitArc`, `OrbitProgress` and `registerOrbit`; registration happens on import, and repeated calls to `registerOrbit()` are safe.
|
|
109
121
|
|
|
110
|
-
Use
|
|
122
|
+
Use `Orbit.refresh()` when you need an immediate update, or after changes Orbit cannot observe, such as editing stylesheet rules through CSSOM or changing an external control used by a CSS selector:
|
|
111
123
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
## Themes
|
|
124
|
+
```js
|
|
125
|
+
import { Orbit } from '@zumer/orbit'
|
|
115
126
|
|
|
116
|
-
|
|
127
|
+
const panel = document.querySelector('#instrument-panel')
|
|
128
|
+
Orbit.refresh(panel)
|
|
129
|
+
```
|
|
117
130
|
|
|
118
|
-
|
|
119
|
-
|-------|-------|-------------|
|
|
120
|
-
| **Default** | *(none)* | Transparent borders, gray fills, satellites use `currentColor` |
|
|
121
|
-
| **Cyan** | `theme-cyan` | Cyan satellite borders, cyan vectors/sides, light cyan fills for `o-arc` and `o-progress` |
|
|
122
|
-
| **Developer** | `dev-orbit` | Dashed red borders on orbits and satellites to visualize structure while debugging |
|
|
131
|
+
`refresh()` accepts an element, document or shadow root. With no argument, it refreshes the document. The CDN script exposes the same API as `window.Orbit`.
|
|
123
132
|
|
|
124
|
-
|
|
125
|
-
<!-- Default (no class) -->
|
|
126
|
-
<div class="bigbang">...</div>
|
|
133
|
+
To scale a layout with its container's width, call `Orbit.resize()` after that container mounts:
|
|
127
134
|
|
|
128
|
-
|
|
129
|
-
|
|
135
|
+
```js
|
|
136
|
+
const stopResizing = Orbit.resize('#instrument-panel')
|
|
130
137
|
|
|
131
|
-
|
|
132
|
-
<div class="bigbang dev-orbit">...</div>
|
|
138
|
+
// Call stopResizing() when the component unmounts.
|
|
133
139
|
```
|
|
134
140
|
|
|
135
|
-
|
|
141
|
+
`resize()` accepts a selector or an element. It uses a 500px base scale and returns a function that disconnects its observer.
|
|
142
|
+
|
|
143
|
+
For shadow DOM, include the stylesheet inside each shadow root. An `<o-arc>` or `<o-progress>` registers its layout there automatically. If the shadow tree contains only CSS elements, register it with `Orbit.refresh(shadowRoot)`. Open and closed roots are supported.
|
|
136
144
|
|
|
137
|
-
|
|
145
|
+
Use the documented CSS properties for overrides. The runtime manages `data-orbit-ring`, `--o-layout-*` and `--o-arc-start` internally.
|
|
138
146
|
|
|
139
|
-
##
|
|
147
|
+
## Browser support and debugging
|
|
140
148
|
|
|
141
|
-
Orbit
|
|
149
|
+
Orbit needs CSS trigonometric functions (`sin` and `cos`). Without JavaScript, a CSS fallback can position simple elements on up to 24 ring levels, with up to 60 children per type; it also requires `:has()` and `:nth-child(... of ...)`. The JavaScript runtime supports larger layouts. `<o-arc>` and `<o-progress>` always need JavaScript.
|
|
142
150
|
|
|
143
|
-
Add
|
|
151
|
+
Add `dev-orbit` to a container to show ring boundaries and invalid nesting. Add `theme-cyan` for the built-in cyan colors; both classes can be combined:
|
|
144
152
|
|
|
145
153
|
```html
|
|
146
|
-
<div class="bigbang dev-orbit">
|
|
147
|
-
<div class="gravity-spot">
|
|
148
|
-
...
|
|
149
|
-
</div>
|
|
150
|
-
</div>
|
|
154
|
+
<div class="bigbang theme-cyan dev-orbit">...</div>
|
|
151
155
|
```
|
|
152
156
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
## Building and testing
|
|
156
|
-
|
|
157
|
-
```sh
|
|
158
|
-
npm ci
|
|
159
|
-
npx playwright install chromium
|
|
160
|
-
npm test
|
|
161
|
-
npm run build
|
|
162
|
-
```
|
|
157
|
+
The [visual aids guide](https://zumerlab.github.io/orbit-docs/tools/support/) explains the structural checks.
|
|
163
158
|
|
|
164
|
-
|
|
159
|
+
## Examples and components
|
|
165
160
|
|
|
166
|
-
|
|
161
|
+
Browse [gauges](https://zumerlab.github.io/orbit-docs/examples/gauges/), [charts](https://zumerlab.github.io/orbit-docs/examples/charts/), [radial menus](https://zumerlab.github.io/orbit-docs/examples/piemenu/), [knobs](https://zumerlab.github.io/orbit-docs/examples/knobs/) and [watch faces](https://zumerlab.github.io/orbit-docs/examples/watches/).
|
|
167
162
|
|
|
168
|
-
|
|
163
|
+
[Orbit Kit](https://zumerlab.com/orbit-kit) provides ready-made gauges, clocks, knobs and menus built on Orbit. Use the base library when you want to compose the layout yourself.
|
|
169
164
|
|
|
170
|
-
##
|
|
165
|
+
## Work on Orbit
|
|
171
166
|
|
|
172
|
-
|
|
167
|
+
From a local checkout:
|
|
173
168
|
|
|
174
169
|
```sh
|
|
170
|
+
npm ci
|
|
175
171
|
npm run demo
|
|
176
172
|
```
|
|
177
173
|
|
|
178
|
-
Open
|
|
179
|
-
|
|
180
|
-
Browse examples on the [Orbit docs site](https://zumerlab.github.io/orbit-docs):
|
|
181
|
-
|
|
182
|
-
| Example | Link |
|
|
183
|
-
|---------|------|
|
|
184
|
-
| Circular timer | [circular_time](https://zumerlab.github.io/orbit-docs/examples/circular_time/) |
|
|
185
|
-
| Progress bars | [progress](https://zumerlab.github.io/orbit-docs/examples/progress/) |
|
|
186
|
-
| Charts (donut, pie, sunburst) | [charts](https://zumerlab.github.io/orbit-docs/examples/charts/) |
|
|
187
|
-
| Gauges (180°, 240°, fuel) | [gauges](https://zumerlab.github.io/orbit-docs/examples/gauges/) |
|
|
188
|
-
| Knobs | [knobs](https://zumerlab.github.io/orbit-docs/examples/knobs/) |
|
|
189
|
-
| Pie menus | [piemenu](https://zumerlab.github.io/orbit-docs/examples/piemenu/) |
|
|
190
|
-
| Watch faces | [watches](https://zumerlab.github.io/orbit-docs/examples/watches/) |
|
|
191
|
-
| Chemical structures | [chemical_structures](https://zumerlab.github.io/orbit-docs/examples/chemical_structures/) |
|
|
192
|
-
| Calendars & time planners | [calendar](https://zumerlab.github.io/orbit-docs/examples/calendar/) |
|
|
193
|
-
| Mandalas | [mandalas](https://zumerlab.github.io/orbit-docs/examples/mandalas/) |
|
|
194
|
-
| Dashboard | [dashboard](https://zumerlab.github.io/orbit-docs/examples/dashboard/) |
|
|
195
|
-
| Abstract orbital map | [abstract_map](https://zumerlab.github.io/orbit-docs/examples/abstract_map/) |
|
|
174
|
+
Open <http://127.0.0.1:5174>. The demo command compiles the source and serves the playground with that local build. Use `PORT=5175 npm run demo` to choose another port.
|
|
196
175
|
|
|
197
|
-
|
|
176
|
+
To run the tests:
|
|
198
177
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
- **IoT / Smart home:** thermostats, energy rings, scenes
|
|
204
|
-
- **Ops / monitoring:** status rings, uptime gauges
|
|
205
|
-
- **Fitness / health:** activity rings (Move, Exercise, Stand)
|
|
206
|
-
- **Controls:** knobs, radial menus, compass
|
|
207
|
-
|
|
208
|
-
---
|
|
209
|
-
|
|
210
|
-
## Using Orbit with AI / LLMs
|
|
211
|
-
|
|
212
|
-
Orbit's radial model is unlike the box-flow layouts most models were trained on,
|
|
213
|
-
so an assistant generating Orbit markup from scratch will struggle. Give it the
|
|
214
|
-
reference first — these files are written for that purpose:
|
|
178
|
+
```sh
|
|
179
|
+
npx playwright install chromium firefox webkit
|
|
180
|
+
BROWSERS=chromium,firefox,webkit npm test
|
|
181
|
+
```
|
|
215
182
|
|
|
216
|
-
|
|
217
|
-
- **[llms-full.txt](https://zumerlab.github.io/orbit-docs/llms-full.txt)** — complete reference: every class, custom property, web component, and copy-paste pattern.
|
|
183
|
+
The tests cover package contents, server imports, browser layouts and shadow DOM. `npm test` uses Chromium by default. Run `npm run test:package`, `npm run test:browser` or `npm run test:shadow` for an individual suite.
|
|
218
184
|
|
|
219
|
-
|
|
220
|
-
asking the model to build a radial UI.
|
|
185
|
+
`npm run compile` writes the CSS and JavaScript files to `dist/`. `npm run build` also creates the npm tarball.
|
|
221
186
|
|
|
222
|
-
##
|
|
187
|
+
## Contributing and reference
|
|
223
188
|
|
|
224
|
-
|
|
225
|
-
- [Full documentation](https://zumerlab.github.io/orbit-docs) — elements, tools, advanced examples
|
|
226
|
-
- [Contributing](CONTRIBUTING.md)
|
|
227
|
-
- [GitHub Discussions](https://github.com/zumerlab/orbit/discussions)
|
|
228
|
-
- [Telegram](https://t.me/ZumlyCommunity)
|
|
189
|
+
Report bugs in [Issues](https://github.com/zumerlab/orbit/issues), or share examples and ask questions in [Discussions](https://github.com/zumerlab/orbit/discussions). See [CONTRIBUTING.md](CONTRIBUTING.md) for contribution details. There is also a [Telegram group](https://t.me/ZumlyCommunity).
|
|
229
190
|
|
|
230
|
-
|
|
191
|
+
For coding assistants, [llms.txt](https://zumerlab.github.io/orbit-docs/llms.txt) has a short reference and [llms-full.txt](https://zumerlab.github.io/orbit-docs/llms-full.txt) has the full class and property reference. Include the relevant sections when asking an assistant to generate Orbit markup.
|
|
231
192
|
|
|
232
193
|
## License
|
|
233
194
|
|
package/dist/orbit.css
CHANGED
|
@@ -1283,6 +1283,78 @@ o-progress {
|
|
|
1283
1283
|
rotate: calc(var(--o-angle-composite));
|
|
1284
1284
|
}
|
|
1285
1285
|
|
|
1286
|
+
/* Depth layers
|
|
1287
|
+
Add .depth to the element that holds the layers (usually .gravity-spot).
|
|
1288
|
+
Each layer is a direct child: a ring or a nested .bigbang / .gravity-spot.
|
|
1289
|
+
--o-z is unitless pixels (negative = farther). By default it is derived
|
|
1290
|
+
from data-depth, and the scale compensates the perspective so a layer
|
|
1291
|
+
keeps its apparent size: scale = (perspective - z) / perspective.
|
|
1292
|
+
--o-depth-grow enlarges each step back (.42 = 1×, 1.42×, 1.84×…) so no two
|
|
1293
|
+
layers share a radius. */
|
|
1294
|
+
.depth {
|
|
1295
|
+
--o-perspective: 900;
|
|
1296
|
+
--o-depth-step: -110;
|
|
1297
|
+
perspective: calc(var(--o-perspective) * 1px);
|
|
1298
|
+
transform-style: preserve-3d;
|
|
1299
|
+
}
|
|
1300
|
+
|
|
1301
|
+
.depth > :is(:is(.orbit, [data-orbit-ring], .orbit-0, .orbit-1, .orbit-2, .orbit-3, .orbit-4, .orbit-5, .orbit-6, .orbit-7, .orbit-8, .orbit-9, .orbit-10, .orbit-11, .orbit-12, .orbit-13, .orbit-14, .orbit-15, .orbit-16, .orbit-17, .orbit-18, .orbit-19, .orbit-20, .orbit-21, .orbit-22, .orbit-23, .orbit-24), [data-depth], .layer-front):not(.satellite, .side, .vector, o-arc, o-progress) {
|
|
1302
|
+
--o-z: calc(var(--o-depth, 0) * var(--o-depth-step));
|
|
1303
|
+
transform: translateZ(calc(var(--o-z) * 1px)) scale(calc((1 + var(--o-depth-grow, 0) * var(--o-depth, 0)) * (1 - var(--o-depth-compensate, 1) * var(--o-z) / var(--o-perspective))));
|
|
1304
|
+
transform-style: preserve-3d;
|
|
1305
|
+
transition: transform var(--o-depth-duration, 0.8s) var(--o-depth-easing, cubic-bezier(0.2, 0.8, 0.2, 1)), opacity var(--o-depth-duration, 0.8s) var(--o-depth-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
[data-depth="0"] {
|
|
1309
|
+
--o-depth: 0;
|
|
1310
|
+
}
|
|
1311
|
+
|
|
1312
|
+
[data-depth="1"] {
|
|
1313
|
+
--o-depth: 1;
|
|
1314
|
+
}
|
|
1315
|
+
|
|
1316
|
+
[data-depth="2"] {
|
|
1317
|
+
--o-depth: 2;
|
|
1318
|
+
}
|
|
1319
|
+
|
|
1320
|
+
[data-depth="3"] {
|
|
1321
|
+
--o-depth: 3;
|
|
1322
|
+
}
|
|
1323
|
+
|
|
1324
|
+
[data-depth="4"] {
|
|
1325
|
+
--o-depth: 4;
|
|
1326
|
+
}
|
|
1327
|
+
|
|
1328
|
+
[data-depth="5"] {
|
|
1329
|
+
--o-depth: 5;
|
|
1330
|
+
}
|
|
1331
|
+
|
|
1332
|
+
[data-depth="6"] {
|
|
1333
|
+
--o-depth: 6;
|
|
1334
|
+
}
|
|
1335
|
+
|
|
1336
|
+
[data-depth="7"] {
|
|
1337
|
+
--o-depth: 7;
|
|
1338
|
+
}
|
|
1339
|
+
|
|
1340
|
+
[data-depth="8"] {
|
|
1341
|
+
--o-depth: 8;
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1344
|
+
/* The active layer: the one that is read and used. */
|
|
1345
|
+
.layer-front {
|
|
1346
|
+
--o-depth: 0;
|
|
1347
|
+
}
|
|
1348
|
+
|
|
1349
|
+
.depth > [data-depth]:not([data-depth="0"], .layer-front) {
|
|
1350
|
+
opacity: var(--o-back-opacity, 1);
|
|
1351
|
+
}
|
|
1352
|
+
|
|
1353
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1354
|
+
.depth > :is(:is(.orbit, [data-orbit-ring], .orbit-0, .orbit-1, .orbit-2, .orbit-3, .orbit-4, .orbit-5, .orbit-6, .orbit-7, .orbit-8, .orbit-9, .orbit-10, .orbit-11, .orbit-12, .orbit-13, .orbit-14, .orbit-15, .orbit-16, .orbit-17, .orbit-18, .orbit-19, .orbit-20, .orbit-21, .orbit-22, .orbit-23, .orbit-24), [data-depth], .layer-front):not(.satellite, .side, .vector, o-arc, o-progress) {
|
|
1355
|
+
transition: none;
|
|
1356
|
+
}
|
|
1357
|
+
}
|
|
1286
1358
|
/* radial elements alignment utilities */
|
|
1287
1359
|
.at-top-left {
|
|
1288
1360
|
align-items: flex-start !important;
|
package/dist/orbit.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* orbit
|
|
3
|
-
* v.1.
|
|
3
|
+
* v.1.6.0
|
|
4
4
|
* Author Juan Martin Muda - Zumerlab
|
|
5
5
|
* License MIT
|
|
6
6
|
*/
|
|
@@ -655,8 +655,13 @@
|
|
|
655
655
|
*/
|
|
656
656
|
calculateStrokeArc(attrs, full) {
|
|
657
657
|
const { realRadius } = attrs;
|
|
658
|
-
const arcAngle = Math.max(0, Math.min(this.getProgressAngle(attrs, full),
|
|
658
|
+
const arcAngle = Math.max(0, Math.min(this.getProgressAngle(attrs, full), 360));
|
|
659
659
|
if (!(arcAngle > 0) || !(attrs.orbitRadius > 0)) return "";
|
|
660
|
+
if (arcAngle >= 359.9) {
|
|
661
|
+
const top = 50 - realRadius;
|
|
662
|
+
const bottom = 50 + realRadius;
|
|
663
|
+
return `M 50,${top} A ${realRadius},${realRadius} 0 1 1 50,${bottom} A ${realRadius},${realRadius} 0 1 1 50,${top}`;
|
|
664
|
+
}
|
|
660
665
|
const a0 = -90 * (Math.PI / 180);
|
|
661
666
|
const a1 = (-90 + arcAngle) * (Math.PI / 180);
|
|
662
667
|
const x0 = 50 + realRadius * Math.cos(a0);
|