ov-orbit

src/ov-orbit.js

A STILL OF demo/orbit.html

Attributes

Properties

READ-ONLY PROPERTIES

report

Events

None.

Using it

import 'overscan'
import 'overscan/overscan.css'

<ov-orbit
  id="doc-orbit"
  label="MARS"
  body="3390"
  extent="12000"
  style="--ov-orbit-size:220px"
>
</ov-orbit>
<script type="module">
  customElements.whenDefined('ov-orbit').then(() => {
    const path = [];
    for (let i = 0; i
  < 40; i++) {
      const v = -0.6 + 4.5 * i / 39, r = 6380 / (1 + 0.45 * Math.cos(v));
      path.push({ x: r * Math.cos(v + 0.3), y: r * Math.sin(v + 0.3), t: i * 90, sigma: 40 + i * i * 0.5 });
    }
    document.getElementById('doc-orbit').prediction = { path, horizon: 'SOI exit' };
  });
</script>

import { OvOrbit } from 'overscan/react'

<OvOrbit
  id="doc-orbit"
  label="MARS"
  body="3390"
  extent="12000"
  prediction={data}
/>

import { OvOrbit } from 'overscan/vue'

<OvOrbit
  id="doc-orbit"
  label="MARS"
  body="3390"
  extent="12000"
  :prediction="data"
/>

import OvOrbit from 'overscan/svelte/OvOrbit.svelte'

<OvOrbit
  id="doc-orbit"
  label="MARS"
  body="3390"
  extent="12000"
  prediction={data}
/>

The CSS is a separate import in every framework. A single element can be imported on its own instead of the whole kit: import 'overscan/src/ov-chart.js'

A reading is set as a PROPERTY, never an attribute. An attribute is a string, so an array cannot survive one and a null arrives as the word "null", which the protocol would read as a value rather than a dropout.

Every ov: event is bound with addEventListener. The colon has no declarative spelling in Svelte 5, where the on: directive is gone and "onov:commit" is not an identifier, nor in JSX. Vue can bind it.

The wrapper applies attributes ITSELF and hands the framework nothing but a ref. All three frameworks set a prop as a property when the name exists on the element, and this kit has 77 getter-only properties across 43 elements. Assigning one throws, and in React it does not degrade: the whole tree fails to render. 13 elements have a getter-only name that is also a real attribute (at, bearing, digits, duration, floor, fov, fresh, hold, lat, lon, period, pitch, range, ring, rings, span, step, sweep, sweeps, traces, value), which are the ones a reader would naturally pass in markup.