@ixfx/components 0.2.3 → 0.2.4

package/dist/plots/xy-axis.js

@@ -0,0 +1,307 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement, svg } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour } from './colour-map.js';
+import { PlotDataSeries } from './data.js';
+import { adaptiveRadius, hideTooltip, scaleValue, showTooltip } from './svg-utils.js';
+// --- Component ---
+let PlotXyAxis = class PlotXyAxis extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.drawStyle = `circles`;
+        this.ageStyle = `none`;
+        this.title = ``;
+        this.precise = false;
+        this.tooltips = true;
+        this.capacity = 100;
+        this.persistentScale = true;
+        this.paused = false;
+        this.clickPauses = false;
+        // --- Colour mapping ---
+        this.colorMode = `fixed`;
+        this.colorEasing = ``;
+        this.colorScale = ``;
+        /**
+         * Custom value-mapping fn (0..1 → 0..1). For xy-axis the input is the point's ageFraction
+         * (0 = oldest, 1 = newest). Ignored when color-easing is set.
+         */
+        this.colorValueMap = null;
+        this._width = 100;
+        this._height = 100;
+        this.#xSeries = new PlotDataSeries({ capacityLimit: 100, persistentScaling: true });
+        this.#ySeries = new PlotDataSeries({ capacityLimit: 100, persistentScaling: true });
+        /** Override to customize tooltip label. */
+        this.valueFormat = (x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`;
+        this.#lastPoints = [];
+        this.#lastClientX = null;
+        this.#lastClientY = null;
+        this.#onPointerMove = (e) => {
+            this.#lastClientX = e.clientX;
+            this.#lastClientY = e.clientY;
+            this.#updateTooltip(e.clientX, e.clientY);
+        };
+        this.#onPointerLeave = () => {
+            this.#lastClientX = null;
+            this.#lastClientY = null;
+            hideTooltip(this);
+        };
+        this.#onClick = (e) => {
+            if (this.clickPauses)
+                this.paused = !this.paused;
+            const rect = e.currentTarget.getBoundingClientRect();
+            const nearest = this.#findNearestPoint(e.clientX, e.clientY, this.#lastPoints, rect);
+            if (!nearest)
+                return;
+            this.dispatchEvent(new CustomEvent(`plot-datapoint-click`, {
+                detail: { x: nearest.xVal, y: nearest.yVal, index: nearest.index },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    #xSeries;
+    #ySeries;
+    add(x, y) {
+        this.#xSeries.add(x);
+        this.#ySeries.add(y);
+        if (this.paused)
+            return;
+        this.requestUpdate();
+        this.#updateTooltipAtLastPos();
+    }
+    setXY(xs, ys) {
+        this.#xSeries.set(xs);
+        this.#ySeries.set(ys);
+        if (this.paused)
+            return;
+        this.requestUpdate();
+        this.#updateTooltipAtLastPos();
+    }
+    clear() {
+        this.#xSeries.clear();
+        this.#ySeries.clear();
+        this.requestUpdate();
+    }
+    firstUpdated(_changed) {
+        this._width = this.clientWidth || 100;
+        this._height = this.clientHeight || 100;
+        const ro = new ResizeObserver((entries) => {
+            const e = entries[0];
+            this._width = e.contentRect.width;
+            this._height = e.contentRect.height;
+        });
+        ro.observe(this);
+    }
+    updated(changed) {
+        if (changed.has(`capacity`) || changed.has(`persistentScale`)) {
+            const opts = { capacityLimit: this.capacity, persistentScaling: this.persistentScale };
+            const oldX = [...this.#xSeries.values];
+            const oldY = [...this.#ySeries.values];
+            this.#xSeries = new PlotDataSeries(opts);
+            this.#ySeries = new PlotDataSeries(opts);
+            if (oldX.length > 0) {
+                this.#xSeries.set(oldX);
+                this.#ySeries.set(oldY);
+            }
+        }
+    }
+    #computePoints(padding, plotW, plotH) {
+        const xs = this.#xSeries.values;
+        const ys = this.#ySeries.values;
+        const n = Math.min(xs.length, ys.length);
+        if (n === 0)
+            return [];
+        const { min: xMin, max: xMax } = this.#xSeries.range;
+        const { min: yMin, max: yMax } = this.#ySeries.range;
+        return Array.from({ length: n }, (_, i) => ({
+            x: padding + scaleValue(xs[i], xMin, xMax) * plotW,
+            y: padding + (1 - scaleValue(ys[i], yMin, yMax)) * plotH,
+            xVal: xs[i],
+            yVal: ys[i],
+            index: i,
+            ageFraction: n > 1 ? i / (n - 1) : 1,
+        }));
+    }
+    /** Compute the final ColourResult for each xy point: base colour → age modification. */
+    #computeColours(points, baseColour) {
+        const config = {
+            mode: this.colorMode,
+            palette: parseColourScaleAttr(this.colorScale),
+            easingName: this.colorEasing,
+            valueMap: this.colorValueMap,
+        };
+        return points.map((p) => {
+            const base = computeColour(p.ageFraction, baseColour, config);
+            return applyAgeModification(base, p.ageFraction, this.ageStyle);
+        });
+    }
+    #findNearestPoint(clientX, clientY, points, rect) {
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+        let best = null;
+        let bestDist = Infinity;
+        for (const p of points) {
+            const dx = p.x - x;
+            const dy = p.y - y;
+            const d = dx * dx + dy * dy;
+            if (d < bestDist) {
+                bestDist = d;
+                best = p;
+            }
+        }
+        return best && Math.sqrt(bestDist) < 30 ? best : null;
+    }
+    #lastPoints;
+    #lastClientX;
+    #lastClientY;
+    #updateTooltip(clientX, clientY) {
+        if (!this.tooltips)
+            return;
+        const rect = this.getBoundingClientRect();
+        const nearest = this.#findNearestPoint(clientX, clientY, this.#lastPoints, rect);
+        if (!nearest) {
+            hideTooltip(this);
+            return;
+        }
+        showTooltip(this, clientX, clientY, this.valueFormat(nearest.xVal, nearest.yVal));
+    }
+    #updateTooltipAtLastPos() {
+        if (this.#lastClientX === null || this.#lastClientY === null)
+            return;
+        this.#updateTooltip(this.#lastClientX, this.#lastClientY);
+    }
+    #onPointerMove;
+    #onPointerLeave;
+    #onClick;
+    render() {
+        const w = this._width;
+        const h = this._height;
+        const padding = Math.min(6, Math.min(w, h) * 0.06);
+        const plotW = Math.max(1, w - padding * 2);
+        const plotH = Math.max(1, h - padding * 2);
+        const points = this.#computePoints(padding, plotW, plotH);
+        this.#lastPoints = points;
+        const baseColour = points.length > 0 ? readBaseColour(this) : ``;
+        const colours = this.#computeColours(points, baseColour);
+        const radius = adaptiveRadius(w, h, points.length);
+        const textColor = `var(--plot-text, var(--surface-2-text, #fff))`;
+        const dataContent = points.map((p, i) => {
+            const cr = colours[i];
+            const sizeFactor = this.ageStyle === `size` ? Math.max(0.2, p.ageFraction) : 1;
+            if (this.drawStyle === `circles`) {
+                const r = radius * sizeFactor;
+                return svg `<circle cx=${p.x} cy=${p.y} r=${r} fill=${cr.fill} opacity=${cr.opacity} />`;
+            }
+            const s = radius * 2 * sizeFactor;
+            return svg `<rect x=${p.x - s / 2} y=${p.y - s / 2} width=${s} height=${s} fill=${cr.fill} opacity=${cr.opacity} />`;
+        });
+        const titleContent = this.title
+            ? svg `<text
+          x=${padding + 2} y=${padding + 2}
+          class="overlay-text"
+          fill=${textColor}
+          style="opacity: 0.6"
+        >${this.title}</text>`
+            : svg ``;
+        const n = Math.min(this.#xSeries.values.length, this.#ySeries.values.length);
+        const latestX = n > 0 ? this.#xSeries.values[n - 1] : null;
+        const latestY = n > 0 ? this.#ySeries.values[n - 1] : null;
+        const preciseContent = this.precise && latestX !== null && latestY !== null
+            ? svg `<text
+          x=${w - padding - 2} y=${padding + 2}
+          class="overlay-text"
+          text-anchor="end"
+          fill=${textColor}
+          style="opacity: 0.8"
+        >${this.valueFormat(latestX, latestY)}</text>`
+            : svg ``;
+        return html `
+      <svg
+        width=${w} height=${h}
+        viewBox="0 0 ${w} ${h}"
+        xmlns="http://www.w3.org/2000/svg"
+        @pointermove=${this.#onPointerMove}
+        @pointerleave=${this.#onPointerLeave}
+        @click=${this.#onClick}
+      >
+        <rect width=${w} height=${h} fill="transparent" />
+        ${dataContent}
+        ${titleContent}
+        ${preciseContent}
+      </svg>
+    `;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-width: 40px;
+      min-height: 40px;
+    }
+
+    svg {
+      display: block;
+      cursor: crosshair;
+    }
+
+    .overlay-text {
+      font-family: var(--font-mono, ui-monospace, monospace);
+      font-size: 9px;
+      dominant-baseline: hanging;
+      pointer-events: none;
+    }
+  `; }
+};
+__decorate([
+    property({ attribute: `draw-style` })
+], PlotXyAxis.prototype, "drawStyle", void 0);
+__decorate([
+    property({ attribute: `age-style` })
+], PlotXyAxis.prototype, "ageStyle", void 0);
+__decorate([
+    property()
+], PlotXyAxis.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean })
+], PlotXyAxis.prototype, "precise", void 0);
+__decorate([
+    property({ type: Boolean })
+], PlotXyAxis.prototype, "tooltips", void 0);
+__decorate([
+    property({ type: Number })
+], PlotXyAxis.prototype, "capacity", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `persistent-scale` })
+], PlotXyAxis.prototype, "persistentScale", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PlotXyAxis.prototype, "paused", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `click-pauses` })
+], PlotXyAxis.prototype, "clickPauses", void 0);
+__decorate([
+    property({ attribute: `color-mode` })
+], PlotXyAxis.prototype, "colorMode", void 0);
+__decorate([
+    property({ attribute: `color-easing` })
+], PlotXyAxis.prototype, "colorEasing", void 0);
+__decorate([
+    property({ attribute: `color-scale` })
+], PlotXyAxis.prototype, "colorScale", void 0);
+__decorate([
+    state()
+], PlotXyAxis.prototype, "_width", void 0);
+__decorate([
+    state()
+], PlotXyAxis.prototype, "_height", void 0);
+PlotXyAxis = __decorate([
+    customElement(`ixfx-plot-xy-axis`)
+], PlotXyAxis);
+export { PlotXyAxis };
+//# sourceMappingURL=xy-axis.js.map

package/dist/plots/xy-axis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xy-axis.js","sourceRoot":"","sources":["../../src/plots/xy-axis.ts"],"names":[],"mappings":"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"}

package/dist/polar-pad/polar-pad.d.ts

@@ -0,0 +1,132 @@
+import type { PropertyValues } from 'lit';
+/**
+ * <ixfx-polar-pad> — circular pad for setting polar coordinates (angle + radius).
+ *
+ * The user clicks or drags within a circle to position a marker. The marker's
+ * position encodes an angle (degrees, 0 = right, clockwise) and a radius (0–1).
+ *
+ * Properties / attributes
+ *   angle          – current angle in degrees (0 = right, clockwise). Default: 0
+ *   radius         – current radius 0–1 where 1 = edge. Default: 0.5
+ *   rings          – number of concentric rings to draw (0 = none). Default: 0
+ *   rays           – number of evenly-spaced radial spokes to draw (0 = none). Default: 0
+ *   show-ray       – draw a line from the origin to the marker
+ *   show-origin    – draw a dot at the centre
+ *   hide-cursor    – hide cursor during drag and hover (default: false)
+ *   snap-value     – when set, marker snaps to nearest ring/spoke depending on what's displayed
+ *   disabled       – disable all interaction (default: false)
+ *
+ * Customisable CSS variables:
+ *
+ *   Pad background
+ *   --pad-background        – CSS `background` of the circular pad. Accepts any CSS background
+ *                             value: solid colour, conic-gradient(), radial-gradient(), etc.
+ *                             Dynamic CSS vars like --angle-deg / --radius-pct are available
+ *                             so the gradient can track the current marker position.
+ *                             Default: var(--surface-4)
+ *   --pad-border-color      – stroke of the outer circle (default: --surface-6)
+ *   --pad-border-width      – thickness of outer border (default: 1px)
+ *
+ *   Marker
+ *   --marker-size           – diameter of the draggable marker (default: 10cqb)
+ *   --marker-color          – fill colour of the marker (default: --accent)
+ *   --marker-opacity        – opacity of the marker (default: 1)
+ *   --marker-stroke         – stroke colour of the marker (default: none)
+ *   --marker-stroke-width   – stroke thickness of the marker (default: 0)
+ *
+ *   Origin dot (show-origin)
+ *   --origin-size           – diameter of the origin dot (default: 6cqb)
+ *   --origin-color          – fill colour of the origin dot (default: --accent)
+ *   --origin-opacity        – opacity of the origin dot (default: 1)
+ *
+ *   Ray line (show-ray)
+ *   --ray-color             – stroke colour (default: --surface-6)
+ *   --ray-width             – thickness (default: 2px)
+ *   --ray-opacity           – opacity (default: 1)
+ *   --ray-dash              – stroke-dasharray value e.g. "4 2" (default: none)
+ *
+ *   Concentric rings (rings > 0)
+ *   --ring-color            – stroke colour (default: --surface-6)
+ *   --ring-width            – thickness (default: 1px)
+ *   --ring-opacity          – opacity (default: 1)
+ *   --ring-dash             – stroke-dasharray e.g. "4 2" (default: none)
+ *
+ *   Radial spokes (rays > 0)
+ *   --spoke-color           – stroke colour (default: --surface-6)
+ *   --spoke-width           – thickness (default: 1px)
+ *   --spoke-opacity         – opacity (default: 1)
+ *   --spoke-dash            – stroke-dasharray e.g. "4 2" (default: none)
+ *
+ * CSS variables set on host for external dynamic styling:
+ *   --angle-deg             – current angle as unitless number in degrees
+ *   --angle-rad             – current angle as unitless number in radians
+ *   --radius-pct            – current radius as unitless number 0–100
+ *
+ * Events
+ *   input – CustomEvent<PolarPadInputDetail> { angle: number (deg), radius: number (0–1) }
+ *           bubbles + composed, fires continuously during drag
+ *   change – CustomEvent<PolarPadInputDetail> { angle: number (deg), radius: number (0–1) }
+ *           bubbles + composed, fires when drag ends
+ */
+import { html, LitElement } from 'lit';
+export declare class PolarPad extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Current angle in degrees. 0 = right, increases clockwise. */
+    angle: number;
+    /** Current radius 0–1. 0 = origin, 1 = edge. */
+    radius: number;
+    /** Number of concentric rings to display. 0 = none. */
+    rings: number;
+    /** Number of evenly-spaced radial spoke lines to display. 0 = none. */
+    rays: number;
+    /** Show a line from origin to the marker. */
+    showRay: boolean;
+    /** Show a dot at the origin (centre). */
+    showOrigin: boolean;
+    /** Hide cursor during drag and hover. */
+    hideCursor: boolean;
+    /** When set, marker snaps to nearest ring/spoke depending on what's displayed. */
+    snapValue: boolean;
+    /** Disable all interaction (pointer and keyboard). */
+    disabled: boolean;
+    /** Number of quantised stops for both angle and radius. Overridden by stops-angle/stops-radius if set. */
+    stops?: number;
+    /** Number of quantised stops for angle. If set, overrides the stops setting for angle. */
+    stopsAngle?: number;
+    /** Number of quantised stops for radius. If set, overrides the stops setting for radius. */
+    stopsRadius?: number;
+    private _dragging;
+    private _dragStartAngle;
+    private _dragStartRadius;
+    private _pressedKeys;
+    private _prevAngle;
+    private _prevRadius;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _updateFromPointer;
+    private _onKeyDown;
+    private _onKeyUp;
+    private _handleKeyboardMove;
+    private _setCssVars;
+    updated(_changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private _renderRings;
+    private _renderSpokes;
+    private _renderRay;
+    private _renderOrigin;
+    render(): ReturnType<typeof html>;
+    /** Stable per-instance uid for SVG clipPath IDs. */
+    private readonly _uid;
+}
+export type PolarPadInputDetail = {
+    readonly angle: number;
+    readonly radius: number;
+};
+export type PolarPadInputEvent = CustomEvent<PolarPadInputDetail>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-polar-pad': PolarPad;
+    }
+}
+//# sourceMappingURL=polar-pad.d.ts.map

package/dist/polar-pad/polar-pad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polar-pad.d.ts","sourceRoot":"","sources":["../../src/polar-pad/polar-pad.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,OAAO,EAAO,IAAI,EAAE,UAAU,EAAO,MAAM,KAAK,CAAC;AAwFjD,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAqIpB;IAEF,gEAAgE;IACpC,KAAK,SAAK;IAEtC,gDAAgD;IACpB,MAAM,SAAO;IAEzC,uDAAuD;IAC3B,KAAK,SAAK;IAEtC,uEAAuE;IAC3C,IAAI,SAAK;IAErC,6CAA6C;IACsB,OAAO,UAAS;IAEnF,yCAAyC;IAC6B,UAAU,UAAS;IAEzF,yCAAyC;IAC6B,UAAU,UAAS;IAEzF,kFAAkF;IACb,SAAS,UAAS;IAEvF,sDAAsD;IACV,QAAQ,UAAS;IAE7D,0GAA0G;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3C,0FAA0F;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IAE1E,4FAA4F;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IAE5E,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,WAAW,CAAK;IAMxB,OAAO,CAAC,cAAc,CAcpB;IAEF,OAAO,CAAC,cAAc,CAKpB;IAEF,OAAO,CAAC,YAAY,CAalB;IAEF,OAAO,CAAC,kBAAkB;IAuC1B,OAAO,CAAC,UAAU,CAOhB;IAEF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,mBAAmB,CA2DzB;IAMF,OAAO,CAAC,WAAW;IAMV,OAAO,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI;IAKvC,oBAAoB,IAAI,IAAI;IAUrC,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,aAAa;IAUZ,MAAM,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC;IA8C1C,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAA0C;CAChE;AAMD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,mBAAmB,CAAC,CAAC;AAElE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,QAAQ,CAAC;KAC5B;CACF"}