@zumer/orbit-kit 0.1.0 → 2.1.0

package/src/o-radar.js

@@ -1,145 +1,102 @@
+import { OrbitKitElement, define, injectStyleOnce, universe, finiteNumber, cssValue, fixed, normalizeRange, escapeHTML as e, withShared, FORMAT_ATTRS } from './base.js';
+
 /**
- * <o-radar> — radar / scope display.
- *
- * Built the idiomatic Orbit way: the range rings ARE orbits — each `.orbit-N`
- * is a concentric circle, so we just style its border instead of stacking
- * full-circle arcs. On top of that grid: radial cross-hair spokes (`.vector`),
- * a rotating sweep wedge with a bright leading edge, and glowing blips placed
- * on the orbit matching their distance and aimed with `--o-angle-composite`.
- *
- *   .bigbang > .gravity-spot
- *     ├── .orbit-{2..outer}  (styled border)        — range rings
- *     ├── .orbit-{outer} fit-range range-360 > .vector × spokes
- *     ├── .orbit-{outer} (rotating) > <o-arc> wedge — the sweep
- *     ├── .orbit-{level}  > .satellite (angled)     — one per blip
- *     └── .orbit-0 > .satellite.at-center           — hub + label
+ * <o-radar>: a scope with range rings, spokes, a rotating sweep and blips.
  *
- *   <o-radar rings="4" color="#22d3ee" spokes="8"
- *     targets='[{"angle":60,"dist":0.8},{"angle":200,"dist":0.45}]'></o-radar>
+ *   .orbit-12 ok-radar-grid           range rings (one element, any count)
+ *   .orbit-0  > .vector × spokes      rays from the center, one radius long
+ *   .orbit-12 o-radar-sweep           conic-gradient beam, rotating
+ *   .orbit-12 > .satellite × targets  blips: angle from --o-angle-composite,
+ *                                     distance from --o-alignment
  *
- * `angle` is degrees clockwise from North (top); `dist` is 0–1 from center.
+ * Target updates touch only the blip layers, so the sweep never restarts.
  */
-import { OrbitKitElement, define, injectStyleOnce } from './base.js';
-
 const RADAR_CSS = `
-@keyframes o-radar-sweep { to { transform: rotate(360deg); } }
-@keyframes o-radar-ping {
-  0%   { transform: scale(.5); opacity: 1; }
-  70%  { opacity: .45; }
-  100% { transform: scale(1.7); opacity: 0; }
+o-radar { --ok-font-size: 6cqmin; }
+@keyframes o-radar-sweep { to { rotate: 360deg; } }
+@keyframes o-radar-ping { 0% { scale: .5; opacity: 1; } 70% { opacity: .45; } 100% { scale: 1.7; opacity: 0; } }
+o-radar .ok-radar-grid {
+  --c: var(--ok-radar-color, #22d3ee);
+  background: repeating-radial-gradient(closest-side, transparent 0 calc(100% / var(--ok-radar-rings) - 1px),
+    color-mix(in srgb, var(--c) 22%, transparent) calc(100% / var(--ok-radar-rings) - 1px) calc(100% / var(--ok-radar-rings)));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
+}
+o-radar .ok-radar-spoke { background: color-mix(in srgb, var(--ok-radar-color, #22d3ee) 14%, transparent); height: 1px; }
+o-radar .o-radar-sweep {
+  --c: var(--ok-radar-color, #22d3ee);
+  background: conic-gradient(from 0deg, transparent 0deg,
+    color-mix(in srgb, var(--c) 5%, transparent) calc(var(--ok-radar-beam) / 2),
+    color-mix(in srgb, var(--c) 30%, transparent) calc(var(--ok-radar-beam) - 3deg),
+    color-mix(in srgb, var(--c) 85%, transparent) var(--ok-radar-beam), transparent var(--ok-radar-beam));
+  animation: o-radar-sweep var(--ok-radar-speed, var(--o-radar-speed, 4s)) linear infinite;
 }
-o-radar .o-radar-sweep { animation: o-radar-sweep var(--o-radar-speed, 4s) linear infinite; transform-origin: center; }
-o-radar .o-radar-blip { position: relative; border-radius: 50%; }
-o-radar .o-radar-blip::after {
-  content: ""; position: absolute; inset: -4px; border-radius: 50%;
-  border: 1px solid currentColor; animation: o-radar-ping 1.8s ease-out infinite;
+o-radar .ok-radar-target > .satellite { color: var(--ok-radar-color, #22d3ee); }
+o-radar .o-radar-blip {
+  position: relative; border-radius: 50%; width: max(5px, 3.5cqmin); aspect-ratio: 1;
+  background: currentColor; box-shadow: 0 0 10px currentColor;
 }
+o-radar .o-radar-blip::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; animation: o-radar-ping 1.8s ease-out infinite; }
+o-radar .ok-radar-center { display: flex; flex-direction: column; align-items: center; gap: .3em; color: var(--ok-radar-color, #22d3ee); }
+o-radar .ok-radar-center::before { content: ""; width: max(4px, 2.4cqmin); aspect-ratio: 1; border-radius: 50%; background: currentColor; }
+o-radar .ok-radar-label { font-weight: 800; white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { o-radar .o-radar-sweep, o-radar .o-radar-blip::after { animation: none; } }
 `;
 
 export class OrbitRadar extends OrbitKitElement {
   static get observedAttributes() {
-    return ['targets', 'rings', 'spokes', 'size', 'color', 'sweep', 'sweep-width', 'speed', 'label'];
+    return withShared(['targets', 'rings', 'spokes', 'size', 'color', 'accent', 'sweep', 'sweep-width', 'speed', 'label', 'min', 'max'], FORMAT_ATTRS);
   }
-
   readConfig() {
-    const targets = (this._json('targets', []) || []).map((t) => ({
-      angle: Number(t.angle) || 0,
-      dist: Math.min(1, Math.max(0, t.dist == null ? 0.5 : Number(t.dist))),
-      color: t.color || null
-    }));
+    // `dist` is read in min..max (0 to 1 by default): min at the center, max at the edge.
+    const r = normalizeRange({ min: this._num('min', 0), max: this._num('max', 1) });
+    const share = (d) => (r.span ? (d - r.min) / r.span : 0);
     return {
-      targets,
-      rings: Math.max(1, Math.round(this._num('rings', 4))),
-      spokes: Math.max(0, Math.round(this._num('spokes', 8))),
-      size: this._str('size', '240px'),
-      color: this._str('color', '#22d3ee'),
-      sweep: this._str('sweep', 'true') !== 'false',
-      sweepWidth: Math.min(300, Math.max(10, this._num('sweep-width', 110))),
-      speed: this._num('speed', 4),
-      label: this.hasAttribute('label') ? this.getAttribute('label') : null
+      min: r.min, max: r.max,
+      targets: this._array('targets').map((t) => {
+        const raw = Math.min(r.max, Math.max(r.min, finiteNumber(t.dist, r.min + r.span / 2)));
+        return { angle: ((finiteNumber(t.angle) % 360) + 360) % 360, raw, dist: share(raw), color: cssValue(t.color), label: t.label == null ? null : String(t.label) };
+      }),
+      rings: Math.max(1, Math.min(60, Math.round(this._num('rings', 4)))),
+      spokes: Math.max(0, Math.min(360, Math.round(this._num('spokes', 8)))), size: this._size('size', '240px'),
+      color: this._color('color', this._color('accent', null)), sweep: this._str('sweep', 'true') !== 'false',
+      sweepWidth: Math.min(300, Math.max(10, this._num('sweep-width', 110))), speed: Math.max(.01, this._num('speed', 4)), label: this.getAttribute('label')
     };
   }
-
-  structuralSignature(cfg) {
-    return JSON.stringify(cfg);
+  structuralSignature({ targets, speed, label, color, min, max, ...structure }) { return JSON.stringify(structure); }
+  _target(t) {
+    return `<div class="orbit-12 ok-radar-target"><div class="satellite" style="--o-angle-composite:${fixed(t.angle - 90)}deg;--o-alignment:calc(var(--o-radius) * ${fixed(1 - t.dist, 4)});${t.color ? `color:${e(t.color)}` : ''}"><div class="capsule o-radar-blip"></div></div></div>`;
   }
-
   build(cfg) {
-    injectStyleOnce('orbit-kit-radar', RADAR_CSS);
-
-    const C = cfg.color;
-    // Two orbit steps per ring so the grid breathes; outer ring hosts sweep/spokes.
-    const outer = cfg.rings * 2;
-
-    // Range rings — native orbit borders, outermost a touch brighter.
-    const rings = Array.from({ length: cfg.rings }, (_, i) => {
-      const orbit = (i + 1) * 2;
-      const alpha = 0.1 + (i / cfg.rings) * 0.22;
-      return `<div class="orbit-${orbit}" style="border:1px solid ${this._rgba(C, alpha)};"></div>`;
-    }).join('');
-
-    // Cross-hair spokes — radial vectors, evenly distributed.
-    const spokes = cfg.spokes
-      ? `<div class="orbit-${outer} fit-range range-360 from-0">
-           ${Array.from({ length: cfg.spokes }, () =>
-             `<div class="vector" style="background:${this._rgba(C, 0.14)};height:1px;"></div>`).join('')}
-         </div>`
-      : '';
-
-    // Sweep — a real rotating beam: a conic-gradient disc painted on the outer
-    // orbit circle, fading from a transparent tail to a crisp bright leading
-    // edge over `sweepWidth` degrees. Smooth, not a blocky fan of arcs.
-    const w = cfg.sweepWidth;
-    const beam = `conic-gradient(from 0deg,`
-      + ` ${this._rgba(C, 0)} 0deg,`
-      + ` ${this._rgba(C, 0.05)} ${(w * 0.5).toFixed(1)}deg,`
-      + ` ${this._rgba(C, 0.30)} ${(w - 3).toFixed(1)}deg,`
-      + ` ${this._rgba(C, 0.85)} ${w}deg,`
-      + ` transparent ${w}deg, transparent 360deg)`;
-    const sweep = cfg.sweep
-      ? `<div class="orbit-${outer} o-radar-sweep" style="--o-radar-speed:${cfg.speed}s;background:${beam};"></div>`
-      : '';
-
-    // Blips — each on the orbit matching its distance, aimed by angle.
-    const blips = cfg.targets.map((t) => {
-      const color = t.color || C;
-      const level = Math.min(outer, Math.max(1, Math.round(t.dist * outer)));
-      return `<div class="orbit-${level}">
-                <div class="satellite" style="--o-angle-composite:calc(${t.angle}deg - 90deg);color:${color};">
-                  <div class="capsule o-radar-blip" style="width:9px;height:9px;background:${color};box-shadow:0 0 10px ${color};"></div>
-                </div>
-              </div>`;
-    }).join('');
-
-    const center = `
-      <div class="orbit-0">
-        <div class="satellite at-center">
-          <div class="capsule" style="display:flex;flex-direction:column;align-items:center;gap:4px;">
-            <span style="width:6px;height:6px;border-radius:50%;background:${C};box-shadow:0 0 8px ${C};"></span>
-            ${cfg.label !== null ? `<span style="font-weight:800;font-size:.7em;letter-spacing:.15em;color:${C};">${cfg.label}</span>` : ''}
-          </div>
-        </div>
-      </div>`;
-
-    this.innerHTML = `
-      <div class="bigbang" style="width:${cfg.size};aspect-ratio:1;">
-        <div class="gravity-spot">
-          ${rings}
-          ${spokes}
-          ${sweep}
-          ${blips}
-          ${center}
-        </div>
-      </div>`;
+    const spokes = cfg.spokes ? `<div class="orbit-0">${'<div class="vector outer-orbit ok-radar-spoke" style="--o-size-ratio:12"></div>'.repeat(cfg.spokes)}</div>` : '';
+    const sweep = cfg.sweep ? '<div class="orbit-12 o-radar-sweep"></div>' : '';
+    this.innerHTML = universe(cfg.size, `
+      <div class="orbit-12 ok-radar-grid"></div>${spokes}${sweep}${cfg.targets.map((t) => this._target(t)).join('')}
+      <div class="orbit-0"><div class="satellite at-center"><div class="capsule ok-radar-center"><span class="ok-radar-label">${e(cfg.label ?? '')}</span></div></div></div>`,
+    { spot: `--ok-radar-rings:${cfg.rings};--ok-radar-beam:${cfg.sweepWidth}deg` });
+    this._scope = this.querySelector('.gravity-spot');
+    this._targets = [...this.querySelectorAll('.ok-radar-target')];
+    this._label = this.querySelector('.ok-radar-label');
+    this._sweep = this.querySelector('.o-radar-sweep');
   }
-
-  /** Convert #rrggbb (or pass-through) to rgba() at the given alpha. */
-  _rgba(color, alpha) {
-    const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
-    if (!m) return color;
-    const [r, g, b] = [m[1], m[2], m[3]].map((h) => parseInt(h, 16));
-    return `rgba(${r},${g},${b},${alpha.toFixed(3)})`;
+  sync(cfg) {
+    this._applyTheme({ '--ok-radar-color': cfg.color, '--ok-radar-speed': `${cfg.speed}s` });
+    // Reconcile only the target layers, keeping the animated sweep node alive.
+    while (this._targets.length > cfg.targets.length) this._targets.pop().remove();
+    while (this._targets.length < cfg.targets.length && this._scope?.insertAdjacentHTML) {
+      this._scope.insertAdjacentHTML('beforeend', this._target(cfg.targets[this._targets.length]));
+      this._targets.push(this._scope.lastElementChild);
+    }
+    this._targets.forEach((layer, i) => {
+      const t = cfg.targets[i];
+      const satellite = layer.querySelector('.satellite');
+      satellite.style.setProperty('--o-angle-composite', `${fixed(t.angle - 90)}deg`);
+      satellite.style.setProperty('--o-alignment', `calc(var(--o-radius) * ${fixed(1 - t.dist, 4)})`);
+      if (t.color) satellite.style.setProperty('color', t.color);
+      else satellite.style.removeProperty?.('color');
+    });
+    if (this._label) { this._label.textContent = cfg.label ?? ''; this._label.hidden = !cfg.label; }
+    this._describe([cfg.label || 'Radar', ...cfg.targets.map((t, i) => `${t.label ?? `Target ${i + 1}`}: ${t.angle} degrees, ${this._formatOptions() || this._formatter ? `distance ${this._formatText(t.raw, { min: cfg.min, max: cfg.max, kind: 'aria' })}` : `${Math.round(t.dist * 100)}% distance`}`)].join('; '));
   }
 }
-
+injectStyleOnce('orbit-kit-radar', RADAR_CSS);
 define('o-radar', OrbitRadar);