smithkit 0.1.0 → 0.2.0

package/dist/lib/scales/SmithScales.js

@@ -1,8 +1,9 @@
 import { select, format } from 'd3';
-import { radialScales } from './radialScales.js';
+import { RadialScaleDefinitions } from './RadialScaleDefinitions.js';
+import { SvgExporter } from '../svg/SvgExporter.js';
 /** Independent parameter scales. Connect update() to a chart's cursor events. */
 export class SmithScales {
-    scales = radialScales();
+    scales = RadialScaleDefinitions.create();
     container = select(document.createElement('div'))
         .attr('class', 'radial-scales')
         .style('display', 'grid')
@@ -24,7 +25,8 @@ export class SmithScales {
         .style('width', '100%')
         .style('height', 'auto');
     constructor() {
-        this.axes
+        const labels = this.axes.append('g').attr('data-role', 'labels').attr('pointer-events', 'none');
+        labels
             .append('text')
             .attr('x', this.start)
             .attr('y', 12)
@@ -32,7 +34,7 @@ export class SmithScales {
             .attr('font-size', 12)
             .attr('fill', '#334155')
             .text((scale) => scale.title);
-        this.axes
+        labels
             .append('text')
             .attr('class', 'scale-value')
             .attr('x', this.start)
@@ -55,12 +57,18 @@ export class SmithScales {
         const length = this.length;
         this.axes.each(function (scale) {
             const ticks = select(this)
-                .selectAll('g')
+                .selectAll('g.scale-tick')
                 .data(scale.values)
                 .join('g')
+                .attr('class', 'scale-tick')
                 .attr('transform', (value) => `translate(${start + length * scale.position(value)},36)`);
             ticks.append('line').attr('y2', 5).attr('stroke', '#64748b').attr('stroke-width', 1);
-            ticks
+            select(this)
+                .select('[data-role=labels]')
+                .selectAll('g')
+                .data(scale.values)
+                .join('g')
+                .attr('transform', (value) => `translate(${start + length * scale.position(value)},36)`)
                 .append('text')
                 .attr('y', 17)
                 .attr('font-size', 10)
@@ -79,6 +87,7 @@ export class SmithScales {
             .attr('fill', '#dc2626')
             .attr('stroke', 'white')
             .attr('stroke-width', 1);
+        labels.raise();
         this.axes.append('title').text((scale) => scale.description ?? scale.title);
     }
     draw(target) {
@@ -119,6 +128,11 @@ export class SmithScales {
                 .attr('visibility', null);
         });
     }
+    /** Export all mounted scales in their current layout as a standalone SVG. */
+    toSvg() {
+        this.assertAlive();
+        return SvgExporter.scales(this.container.node(), this.axes.nodes());
+    }
     destroy() {
         if (this.destroyed) {
             return;

package/dist/lib/svg/LabelLayout.d.ts

@@ -0,0 +1,17 @@
+/** Responsive label placement measured in the default view, independent of user zoom. */
+export declare class LabelLayout {
+    private readonly viewport;
+    private readonly container;
+    private readonly baseView;
+    private width;
+    private height;
+    private readonly resizedFonts;
+    constructor(viewport: SVGSVGElement, container: SVGGElement, baseView: {
+        x: number;
+        y: number;
+        k: number;
+    });
+    update(force?: boolean): void;
+    private static transformBox;
+    private static overlaps;
+}

package/dist/lib/svg/LabelLayout.js

@@ -0,0 +1,145 @@
+/** Responsive label placement measured in the default view, independent of user zoom. */
+export class LabelLayout {
+    viewport;
+    container;
+    baseView;
+    width = 0;
+    height = 0;
+    resizedFonts = new Map();
+    constructor(viewport, container, baseView) {
+        this.viewport = viewport;
+        this.container = container;
+        this.baseView = baseView;
+    }
+    update(force = false) {
+        const viewport = this.viewport.getBoundingClientRect();
+        if (!this.viewport.isConnected || viewport.width <= 0 || viewport.height <= 0) {
+            return;
+        }
+        if (!force && viewport.width === this.width && viewport.height === this.height) {
+            return;
+        }
+        this.width = viewport.width;
+        this.height = viewport.height;
+        const rootMatrix = this.viewport.getScreenCTM();
+        const containerMatrix = this.container.getScreenCTM();
+        if (!rootMatrix || !containerMatrix) {
+            return;
+        }
+        const reference = rootMatrix.translate(this.baseView.x, this.baseView.y).scale(this.baseView.k);
+        const normalize = reference.multiply(containerMatrix.inverse());
+        // Peripheral rulers retain their complete, fixed-scale lettering. Only grid
+        // labels participate in thinning and minimum-font-size adjustments.
+        const labels = [...this.container.querySelectorAll('text')].filter((label) => !label.closest('[data-label-layer=peripheral-scales]'));
+        const view = this.viewport.ownerDocument.defaultView;
+        // Restore only properties owned by this layout before measuring the base styling.
+        for (const label of labels) {
+            if (label.hasAttribute('data-label-hidden')) {
+                label.removeAttribute('visibility');
+                label.removeAttribute('data-label-hidden');
+            }
+            const previousFont = this.resizedFonts.get(label);
+            if (previousFont !== undefined) {
+                if (previousFont) {
+                    label.style.fontSize = previousFont;
+                }
+                else {
+                    label.style.removeProperty('font-size');
+                }
+            }
+        }
+        this.resizedFonts.clear();
+        const styles = new Map();
+        const style = (element) => {
+            let result = styles.get(element);
+            if (!result) {
+                result = view.getComputedStyle(element);
+                styles.set(element, result);
+            }
+            return result;
+        };
+        const candidates = labels.flatMap((label, order) => {
+            for (let parent = label; parent; parent = parent.parentElement) {
+                const computed = style(parent);
+                if (computed.display === 'none' ||
+                    computed.visibility === 'hidden' ||
+                    Number(computed.opacity) === 0) {
+                    return [];
+                }
+                if (parent === this.viewport) {
+                    break;
+                }
+            }
+            const screenMatrix = label.getScreenCTM();
+            const matrix = screenMatrix ? normalize.multiply(screenMatrix) : null;
+            const scale = matrix ? Math.hypot(matrix.a, matrix.b) : 0;
+            if (scale <= 0) {
+                return [];
+            }
+            return [
+                {
+                    label,
+                    order,
+                    scale,
+                    matrix: matrix,
+                    baseSize: parseFloat(style(label).fontSize),
+                    priority: Number(label.dataset.labelPriority ?? 0),
+                },
+            ];
+        });
+        // Batch font changes before reading bounds to avoid alternating layout reads/writes.
+        for (const { label, scale, baseSize } of candidates) {
+            if (Number.isFinite(baseSize) && baseSize * scale < 9) {
+                this.resizedFonts.set(label, label.style.fontSize);
+                label.style.fontSize = `${9 / scale}px`;
+            }
+        }
+        const measured = candidates.map((entry) => ({
+            ...entry,
+            box: LabelLayout.transformBox(entry.label.getBBox(), entry.matrix),
+        }));
+        measured.sort((a, b) => b.priority - a.priority || a.order - b.order);
+        const occupied = [];
+        const hidden = [];
+        for (const { label, box } of measured) {
+            const outside = box.right <= box.left ||
+                box.bottom <= box.top ||
+                box.left < viewport.left + 1 ||
+                box.right > viewport.right - 1 ||
+                box.top < viewport.top + 1 ||
+                box.bottom > viewport.bottom - 1;
+            const collision = occupied.some((other) => LabelLayout.overlaps(box, other));
+            if (outside || collision) {
+                hidden.push(label);
+            }
+            else {
+                occupied.push(box);
+            }
+        }
+        for (const label of hidden) {
+            label.setAttribute('visibility', 'hidden');
+            label.setAttribute('data-label-hidden', 'true');
+        }
+    }
+    static transformBox(box, matrix) {
+        const points = [
+            new DOMPoint(box.x, box.y),
+            new DOMPoint(box.x + box.width, box.y),
+            new DOMPoint(box.x, box.y + box.height),
+            new DOMPoint(box.x + box.width, box.y + box.height),
+        ].map((point) => point.matrixTransform(matrix));
+        return {
+            left: Math.min(...points.map((point) => point.x)),
+            right: Math.max(...points.map((point) => point.x)),
+            top: Math.min(...points.map((point) => point.y)),
+            bottom: Math.max(...points.map((point) => point.y)),
+        };
+    }
+    static overlaps(a, b) {
+        const gap = 2;
+        return (a.left < b.right + gap &&
+            a.right + gap > b.left &&
+            a.top < b.bottom + gap &&
+            a.bottom + gap > b.top);
+    }
+}

package/dist/lib/{draw → svg}/SmithArc.d.ts

@@ -1,4 +1,4 @@
-import { Point } from '../shapes/Point.js';
+import { Point } from '../math/geometry.js';
 import { SmithShape } from './SmithShape.js';
 import { SmithDrawOptions } from './SmithDrawOptions.js';
 export declare class SmithArc extends SmithShape {

package/dist/lib/{draw → svg}/SmithCircle.d.ts

@@ -1,4 +1,4 @@
-import { Circle } from '../shapes/Circle.js';
+import { Circle } from '../math/geometry.js';
 import { SmithShape } from './SmithShape.js';
 import { SmithDrawOptions } from './SmithDrawOptions.js';
 export declare class SmithCircle extends SmithShape {

package/dist/lib/{draw → svg}/SmithLine.d.ts

@@ -1,4 +1,4 @@
-import { Point } from '../shapes/Point.js';
+import { Point } from '../math/geometry.js';
 import { SmithShape } from './SmithShape.js';
 import { SmithDrawOptions } from './SmithDrawOptions.js';
 export declare class SmithLine extends SmithShape {

package/dist/lib/{draw → svg}/SmithScaler.d.ts

@@ -1,8 +1,5 @@
 import * as d3 from 'd3';
-import { Circle } from '../shapes/Circle.js';
-import { Point } from '../shapes/Point.js';
-import { Line } from '../shapes/Line.js';
-import { Arc } from '../shapes/Arc.js';
+import type { Circle, Point, Line, Arc } from '../math/geometry.js';
 export declare class SmithScaler {
     readonly x: d3.ScaleLinear<number, number>;
     readonly y: d3.ScaleLinear<number, number>;

package/dist/lib/{draw → svg}/SmithText.d.ts

@@ -1,4 +1,4 @@
-import { Point } from '../shapes/Point.js';
+import { Point } from '../math/geometry.js';
 import { SmithShape } from './SmithShape.js';
 interface TextOptions {
     dx?: string;

package/dist/lib/svg/SvgExporter.d.ts

@@ -0,0 +1,14 @@
+/** Captures rendered SVG with presentation styles resolved in its source document. */
+export declare class SvgExporter {
+    private constructor();
+    private static readonly namespace;
+    private static readonly properties;
+    private static readonly nonInherited;
+    static chart(source: SVGElement): string;
+    /** Preserve the current CSS layout of separate scale SVGs in one SVG document. */
+    static scales(container: HTMLElement, axes: readonly SVGSVGElement[]): string;
+    private static bounds;
+    private static copy;
+    private static size;
+    private static serialize;
+}

package/dist/lib/svg/SvgExporter.js

@@ -0,0 +1,137 @@
+/** Captures rendered SVG with presentation styles resolved in its source document. */
+export class SvgExporter {
+    constructor() { }
+    static namespace = 'http://www.w3.org/2000/svg';
+    static properties = [
+        'color',
+        'display',
+        'visibility',
+        'opacity',
+        'fill',
+        'fill-opacity',
+        'fill-rule',
+        'stroke',
+        'stroke-width',
+        'stroke-opacity',
+        'stroke-dasharray',
+        'stroke-dashoffset',
+        'stroke-linecap',
+        'stroke-linejoin',
+        'stroke-miterlimit',
+        'vector-effect',
+        'paint-order',
+        'shape-rendering',
+        'text-rendering',
+        'font-family',
+        'font-size',
+        'font-style',
+        'font-weight',
+        'font-variant',
+        'font-stretch',
+        'letter-spacing',
+        'word-spacing',
+        'text-anchor',
+        'dominant-baseline',
+        'alignment-baseline',
+        'baseline-shift',
+        'text-decoration',
+        'white-space',
+    ];
+    static nonInherited = new Set([
+        'display',
+        'opacity',
+        'vector-effect',
+        'alignment-baseline',
+        'dominant-baseline',
+        'baseline-shift',
+        'text-decoration',
+    ]);
+    static chart(source) {
+        const bounds = SvgExporter.bounds(source);
+        const copy = SvgExporter.copy(source);
+        SvgExporter.size(copy, bounds.width, bounds.height);
+        return SvgExporter.serialize(copy);
+    }
+    /** Preserve the current CSS layout of separate scale SVGs in one SVG document. */
+    static scales(container, axes) {
+        const bounds = SvgExporter.bounds(container);
+        const root = container.ownerDocument.createElementNS(SvgExporter.namespace, 'svg');
+        root.setAttribute('viewBox', `0 0 ${bounds.width} ${bounds.height}`);
+        SvgExporter.size(root, bounds.width, bounds.height);
+        for (const axis of axes) {
+            const position = SvgExporter.bounds(axis);
+            const copy = SvgExporter.copy(axis);
+            copy.setAttribute('x', String(position.x - bounds.x));
+            copy.setAttribute('y', String(position.y - bounds.y));
+            SvgExporter.size(copy, position.width, position.height);
+            root.appendChild(copy);
+        }
+        return SvgExporter.serialize(root);
+    }
+    static bounds(element) {
+        const bounds = element.getBoundingClientRect();
+        if (!element.isConnected || bounds.width <= 0 || bounds.height <= 0) {
+            throw new Error('SVG export requires a mounted component with a visible, non-zero size.');
+        }
+        return bounds;
+    }
+    static copy(source) {
+        const copy = source.cloneNode(true);
+        const originals = [source, ...source.querySelectorAll('*')];
+        const copies = [copy, ...copy.querySelectorAll('*')];
+        const view = source.ownerDocument.defaultView;
+        const styles = new Map(originals.map((element) => [element, view.getComputedStyle(element)]));
+        originals.forEach((original, index) => {
+            const element = copies[index];
+            const style = styles.get(original);
+            const parentStyle = original.parentElement ? styles.get(original.parentElement) : undefined;
+            // Keep SVG geometry/transform attributes, but replace page-dependent CSS.
+            element.removeAttribute('style');
+            for (const property of SvgExporter.properties) {
+                const value = style.getPropertyValue(property);
+                element.removeAttribute(property);
+                // Resolve inherited values at their boundary instead of repeating every font and
+                // stroke property on thousands of descendants. CSS overrides may replace attributes.
+                if (value &&
+                    (SvgExporter.nonInherited.has(property) ||
+                        parentStyle?.getPropertyValue(property) !== value)) {
+                    element.style.setProperty(property, value);
+                }
+            }
+            // An exported image has no event handlers or interactive controls.
+            element.removeAttribute('tabindex');
+            if (original.getAttribute('data-role') === 'marker') {
+                // A static marker is an image, not an operable sample slider.
+                element.setAttribute('role', 'img');
+                element.setAttribute('aria-label', `${original.getAttribute('aria-label')}; ${original.getAttribute('aria-valuetext')}`);
+                for (const attribute of [
+                    'aria-valuemin',
+                    'aria-valuemax',
+                    'aria-valuenow',
+                    'aria-valuetext',
+                    'aria-orientation',
+                    'aria-description',
+                    'aria-disabled',
+                ]) {
+                    element.removeAttribute(attribute);
+                }
+            }
+            element.removeAttribute('class');
+            for (const attribute of [...element.attributes]) {
+                if (attribute.name.startsWith('on')) {
+                    element.removeAttribute(attribute.name);
+                }
+            }
+        });
+        return copy;
+    }
+    static size(svg, width, height) {
+        svg.setAttribute('width', String(width));
+        svg.setAttribute('height', String(height));
+        svg.style.setProperty('overflow', 'hidden');
+    }
+    static serialize(svg) {
+        svg.setAttribute('xmlns', SvgExporter.namespace);
+        return new XMLSerializer().serializeToString(svg);
+    }
+}

package/dist/lib/{draw → traces}/SmithData.d.ts

@@ -1,48 +1,33 @@
-import { SmithGroup } from './SmithGroup.js';
+import { SmithGroup } from '../svg/SmithGroup.js';
 import type { TraceStyle, MarkerSelectionStrategy } from '../measurements.js';
 import { SmithMarker } from './SmithMarker.js';
-import { SmithScaler } from './SmithScaler.js';
-import { TraceSamples, TraceSample } from '../samples.js';
-interface Marker {
-    marker: SmithMarker;
-    selectedPoint: TraceSample;
-    number: number;
-}
-interface Transform {
-    x: number;
-    y: number;
-    k: number;
-}
+import { SmithScaler } from '../svg/SmithScaler.js';
+import type { TraceSamples, TraceSample } from '../samples.js';
+import { type TraceTransform } from './TraceRenderer.js';
+/** Coordinates trace rendering, draggable markers, and deferred marker events. */
 export declare class SmithData {
-    private data;
     private color;
     private transform;
-    private fgContainer;
     private scaler;
     private markerDragHandler?;
     private markerContainer;
-    private style;
-    private viewportScale;
+    private readonly model;
+    private readonly renderer;
+    private readonly markers;
+    private readonly pendingEvents;
     private destroyed;
+    private viewportScale;
+    private name;
+    private selectHandler;
     private visible;
-    private pendingEvents;
-    private group;
-    private markersCount;
-    private markers;
     private handler;
-    constructor(data: TraceSamples, color: string, transform: Transform, fgContainer: SmithGroup, scaler: SmithScaler, markerDragHandler?: ((marker: SmithMarker, dragging: boolean) => void) | undefined, markerContainer?: SmithGroup, style?: Partial<TraceStyle>);
-    private drawTrace;
-    private renderPoints;
+    constructor(data: TraceSamples, color: string, transform: TraceTransform, container: SmithGroup, scaler: SmithScaler, markerDragHandler?: ((marker: SmithMarker, dragging: boolean) => void) | undefined, markerContainer?: SmithGroup, style?: Partial<TraceStyle>);
     setViewportScale(scale: number): void;
-    zoom(transform: Transform): void;
-    private zoomDataPoints;
-    private zoomAllMarkers;
+    zoom(transform: TraceTransform): void;
     addMarker(sampleIndex?: number): number;
     removeMarker(index: number): boolean;
     setMarkerSample(index: number, sampleIndex: number): boolean;
     setMarkerFrequency(index: number, frequencyHz: number): boolean;
-    private nearestFrequencyIndex;
-    private validateSampleIndex;
     get Samples(): TraceSamples;
     get SampleCount(): number;
     get Color(): string;
@@ -51,16 +36,20 @@ export declare class SmithData {
     setColor(color: string): void;
     get Style(): TraceStyle;
     setStyle(options: Partial<TraceStyle>): void;
-    private redraw;
     setVisible(visible: boolean): void;
-    private copySamples;
+    private moveMarker;
+    private updateReading;
+    setName(name: string): void;
+    setMarkerSelectHandler(handler: (marker: SmithMarker) => void): void;
     private notifyMarker;
     private cancelEvents;
     update(values: TraceSamples, strategy?: MarkerSelectionStrategy): void;
     destroy(): void;
-    getMarker(index: number): Marker | undefined;
-    get Markers(): Marker[];
+    get Markers(): {
+        number: number;
+        selectedPoint: TraceSample;
+        marker: SmithMarker;
+    }[];
     setMarkerMoveHandler(handler: (marker: number, data: TraceSample) => void): void;
-    private findClosestPointTo;
+    private assertAlive;
 }
-export {};