@nowline/renderer 0.8.6 → 0.10.0

package/src/svg/markers.ts

@@ -0,0 +1,178 @@
+// The marker layer: anchors, milestones and the cut lines they drop through the
+// chart body, with the diamonds and labels that sit in the marker row.
+
+import type { PositionedAnchor, PositionedMilestone, Theme } from '@nowline/layout';
+import { ACCENT_DASH_PATTERN } from '@nowline/layout';
+import type { FontFamilies } from './render.js';
+import { escText, num, tag, textTag } from './xml.js';
+
+export function renderAnchor(a: PositionedAnchor, palette: Theme, fonts: FontFamilies): string {
+    const size = a.radius;
+    const cx = a.center.x;
+    const cy = a.center.y;
+    const fill = palette.anchorDiamond.fill;
+    const stroke = palette.anchorDiamond.stroke;
+    const diamond = tag('path', {
+        d: `M${num(cx)} ${num(cy - size)} L${num(cx + size)} ${num(cy)} L${num(cx)} ${num(cy + size)} L${num(cx - size)} ${num(cy)} Z`,
+        fill,
+        stroke,
+        'stroke-width': 1.25,
+    });
+    const labelColor = palette.anchorDiamond.label;
+    // For left-flipped labels, anchor the text at its RIGHT edge using
+    // `text-anchor: end`. The layout's `labelBox.width` is intentionally
+    // pessimistic (0.58 em/char) so positioning by the box's left edge
+    // would leave a visible gap between the actual text right edge and
+    // the diamond. End-anchoring lets the browser size the glyph run
+    // exactly and put the rightmost glyph 6 px from the diamond — same
+    // rhythm the right-side labels already get from start-anchoring at
+    // `diamondRight + 6`.
+    const labelX = a.labelSide === 'left' ? a.labelBox.x + a.labelBox.width : a.labelBox.x;
+    const labelAttrs: Record<string, string | number | null | undefined> = {
+        x: num(labelX),
+        y: num(cy + 4),
+        'font-family': fonts.sans,
+        'font-size': 10,
+        fill: labelColor,
+    };
+    if (a.labelSide === 'left') labelAttrs['text-anchor'] = 'end';
+    const label = a.title ? textTag(labelAttrs, a.title) : '';
+    return tag(
+        'g',
+        { 'data-layer': 'anchor', 'data-id': a.id ?? null },
+        hiddenDateTitle(a.hiddenDate) + diamond + label,
+    );
+}
+
+export function renderAnchorCutLine(a: PositionedAnchor, palette: Theme): string {
+    const stroke = palette.anchorDiamond.cutLine;
+    return tag('line', {
+        x1: num(a.center.x),
+        y1: num(a.center.y + a.radius + 1),
+        x2: num(a.center.x),
+        y2: num(a.cutBottomY),
+        stroke,
+        'stroke-width': 1,
+        'stroke-dasharray': '1 3',
+    });
+}
+
+export function renderMilestone(
+    m: PositionedMilestone,
+    palette: Theme,
+    fonts: FontFamilies,
+): string {
+    const cx = m.center.x;
+    const cy = m.center.y;
+    const r = m.radius;
+    const overrun = palette.milestoneDiamond.cutLineOverrun;
+    const diamond = (x: number, fill: string): string =>
+        tag('path', {
+            d: `M${num(x)} ${num(cy - r)} L${num(x + r)} ${num(cy)} L${num(x)} ${num(cy + r)} L${num(x - r)} ${num(cy)} Z`,
+            fill,
+            stroke: fill,
+            'stroke-width': 1,
+        });
+    // An overrun dated milestone paints its diamond in the overrun colour
+    // (specs/rendering.md, Milestones). When it slipped, that diamond marks
+    // the missed date and a dotted span runs on to a second diamond, in the
+    // normal colour, where it lands; the label sits there. When it did not
+    // slip (the two diamonds would meet), the label is red too.
+    const slipX = m.slip?.x;
+    let flag: string;
+    if (slipX !== undefined) {
+        flag =
+            diamond(cx, overrun) +
+            tag('path', {
+                d: `M${num(cx + r)} ${num(cy)} H${num(slipX - r)}`,
+                fill: 'none',
+                stroke: overrun,
+                'stroke-width': 1.1,
+                'stroke-dasharray': '3 3',
+                'stroke-linecap': 'round',
+            }) +
+            diamond(slipX, palette.milestoneDiamond.fill);
+    } else {
+        flag = diamond(cx, m.isOverrun ? overrun : palette.milestoneDiamond.fill);
+    }
+    const labelColor =
+        m.isOverrun && slipX === undefined ? overrun : palette.milestoneDiamond.label;
+    // See renderAnchor — left-flipped labels use `text-anchor: end` so
+    // the visual right edge sits at `diamondLeft - 6`, matching the
+    // 6 px rhythm of right-side labels.
+    const labelX = m.labelSide === 'left' ? m.labelBox.x + m.labelBox.width : m.labelBox.x;
+    const labelAttrs: Record<string, string | number | null | undefined> = {
+        x: num(labelX),
+        y: num(cy + 4),
+        'font-family': fonts.sans,
+        'font-size': 10,
+        'font-weight': 600,
+        fill: labelColor,
+    };
+    if (m.labelSide === 'left') labelAttrs['text-anchor'] = 'end';
+    const label = m.title ? textTag(labelAttrs, m.title) : '';
+    return tag(
+        'g',
+        { 'data-layer': 'milestone', 'data-id': m.id ?? null },
+        hiddenDateTitle(m.hiddenDate) + flag + label,
+    );
+}
+
+/**
+ * A marker dated on a day the axis hides sits at the next working day's
+ * x, so its own date rides along as a native tooltip, the way
+ * `renderInlineDatePin` titles its glyph (specs/working-calendar.md
+ * §7.4). Empty for a working-day date.
+ */
+function hiddenDateTitle(hiddenDate: string | undefined): string {
+    return hiddenDate === undefined ? '' : `<title>${escText(hiddenDate)}</title>`;
+}
+
+export function renderMilestoneCutLine(
+    m: PositionedMilestone,
+    idPrefix: string,
+    palette: Theme,
+): string {
+    // A slipped milestone's cut line drops from where it lands, in the
+    // normal colour; one that overran without slipping keeps the red line.
+    const cutX = m.slip?.x ?? m.center.x;
+    const stroke =
+        m.isOverrun && m.slip === undefined
+            ? palette.milestoneDiamond.cutLineOverrun
+            : palette.milestoneDiamond.cutLineNormal;
+    const parts: string[] = [];
+    // A milestone on a wave boundary draws no cut line: the boundary
+    // already marks that instant (specs/waves.md §9.2).
+    if (!m.onWaveBoundary) {
+        parts.push(
+            tag('line', {
+                x1: num(cutX),
+                y1: num(m.center.y + m.radius + 1),
+                x2: num(cutX),
+                y2: num(m.cutBottomY),
+                stroke,
+                'stroke-width': 2,
+                'stroke-dasharray': ACCENT_DASH_PATTERN,
+                'stroke-linecap': 'round',
+            }),
+        );
+    }
+    if (m.slackArrows && m.slackArrows.length > 0) {
+        // Only a floating milestone draws slack arrows, in ink; a dated one
+        // slips instead.
+        for (const arrow of m.slackArrows) {
+            parts.push(
+                tag('path', {
+                    d: `M${num(arrow.x)} ${num(arrow.y)} H${num(m.center.x - 6)}`,
+                    fill: 'none',
+                    stroke: palette.milestoneDiamond.slack,
+                    'stroke-width': 1.1,
+                    'stroke-dasharray': '3 3',
+                    'stroke-linecap': 'round',
+                    'marker-end': `url(#${idPrefix}-arrow-dark)`,
+                }),
+            );
+        }
+    }
+    return parts.join('');
+}

package/src/svg/nowline.ts

@@ -0,0 +1,152 @@
+// The now-line layer: the vertical line marking the current date and the pill
+// at its top that carries the date label.
+
+import type { PositionedNowline, Theme } from '@nowline/layout';
+import {
+    NOW_PILL_CORNER_RADIUS_PX,
+    NOW_PILL_HEIGHT_PX,
+    NOW_PILL_LABEL_BASELINE_OFFSET_PX,
+    NOW_PILL_LABEL_FONT_SIZE_PX,
+    NOW_PILL_LABEL_INSET_X_PX,
+    NOWLINE_STROKE_WIDTH_PX,
+} from '@nowline/layout';
+import type { FontFamilies } from './render.js';
+import { num, tag, textTag } from './xml.js';
+
+export function renderNowline(
+    n: PositionedNowline | null,
+    palette: Theme,
+    fonts: FontFamilies,
+): string {
+    if (!n) return '';
+    const color = palette.nowline.stroke;
+    const labelTextColor = palette.nowline.labelText;
+    // Line drops from `topY` (just below the pill / top of date headers)
+    // through the headers into the chart, ending at `bottomY`.
+    const line = tag('line', {
+        x1: num(n.x),
+        y1: num(n.topY),
+        x2: num(n.x),
+        y2: num(n.bottomY),
+        stroke: color,
+        'stroke-width': NOWLINE_STROKE_WIDTH_PX,
+    });
+    // Pill — sits above the date headers at `pillTopY`. Three modes
+    // (decided by layout in `buildNowline`):
+    //   - center      → rounded rect centered on the line, label `middle`
+    //   - flag-right  → squared LEFT, rounded RIGHT, line at left edge,
+    //                   label `start` past the line
+    //   - flag-left   → rounded LEFT, squared RIGHT, line at right edge,
+    //                   label `end` before the line
+    // The squared edge IS the line; the rounded edge points into the
+    // chart, so the pill always hugs the line and never overflows.
+    const pillBg = renderNowPillBg(n, color);
+    const label = renderNowPillLabel(n, labelTextColor, fonts);
+    return tag('g', { 'data-layer': 'nowline' }, line + pillBg + label);
+}
+
+/**
+ * X coordinate of the pill's squared edge in flag modes. SVG strokes
+ * are centered on their geometry, so a 2.25 px line at `n.x` actually
+ * paints from `n.x - 1.125` to `n.x + 1.125`. To make the pill's
+ * squared edge line up with the OUTER edge of the line stroke (so
+ * the line and the pill share a single continuous edge instead of
+ * the line peeking past the pill by half-stroke), we offset by
+ * `NOWLINE_STROKE_WIDTH_PX / 2` on the side the line is on.
+ *
+ *   flag-right: line on the LEFT  → squared edge at n.x - half-stroke
+ *   flag-left:  line on the RIGHT → squared edge at n.x + half-stroke
+ *
+ * Center mode doesn't apply — the line passes through the pill's
+ * vertical center, so a half-stroke offset would make things worse.
+ */
+function squaredEdgeX(n: PositionedNowline): number {
+    const halfStroke = NOWLINE_STROKE_WIDTH_PX / 2;
+    if (n.pillMode === 'flag-right') return n.x - halfStroke;
+    if (n.pillMode === 'flag-left') return n.x + halfStroke;
+    return n.x;
+}
+
+function renderNowPillBg(n: PositionedNowline, color: string): string {
+    const top = n.pillTopY;
+    const bottom = n.pillTopY + NOW_PILL_HEIGHT_PX;
+    const r = NOW_PILL_CORNER_RADIUS_PX;
+    // Pill width comes from the layout (`n.pillWidth`) — locale-aware,
+    // floored at `NOW_PILL_WIDTH_PX` so en-US output stays byte-stable
+    // and longer locale strings (e.g. fr `'maint.'`) grow the pill
+    // instead of clipping. See `buildNowline` in `@nowline/layout`.
+    const width = n.pillWidth;
+    if (n.pillMode === 'center') {
+        return tag('rect', {
+            x: num(n.x - width / 2),
+            y: num(top),
+            width: num(width),
+            height: num(NOW_PILL_HEIGHT_PX),
+            rx: r,
+            ry: r,
+            fill: color,
+        });
+    }
+    const edgeX = squaredEdgeX(n);
+    if (n.pillMode === 'flag-right') {
+        // Squared LEFT edge aligns with line's left outer stroke edge,
+        // rounded corners on the RIGHT.
+        const right = edgeX + width;
+        const d = [
+            `M ${num(edgeX)} ${num(top)}`,
+            `L ${num(right - r)} ${num(top)}`,
+            `A ${r} ${r} 0 0 1 ${num(right)} ${num(top + r)}`,
+            `L ${num(right)} ${num(bottom - r)}`,
+            `A ${r} ${r} 0 0 1 ${num(right - r)} ${num(bottom)}`,
+            `L ${num(edgeX)} ${num(bottom)}`,
+            'Z',
+        ].join(' ');
+        return tag('path', { d, fill: color });
+    }
+    // flag-left: squared RIGHT edge aligns with line's right outer
+    // stroke edge, rounded corners on the LEFT.
+    const left = edgeX - width;
+    const d = [
+        `M ${num(edgeX)} ${num(top)}`,
+        `L ${num(left + r)} ${num(top)}`,
+        `A ${r} ${r} 0 0 0 ${num(left)} ${num(top + r)}`,
+        `L ${num(left)} ${num(bottom - r)}`,
+        `A ${r} ${r} 0 0 0 ${num(left + r)} ${num(bottom)}`,
+        `L ${num(edgeX)} ${num(bottom)}`,
+        'Z',
+    ].join(' ');
+    return tag('path', { d, fill: color });
+}
+
+function renderNowPillLabel(
+    n: PositionedNowline,
+    labelTextColor: string,
+    fonts: FontFamilies,
+): string {
+    const baselineY = n.pillTopY + NOW_PILL_LABEL_BASELINE_OFFSET_PX;
+    const edgeX = squaredEdgeX(n);
+    let labelX: number;
+    let textAnchor: 'start' | 'middle' | 'end';
+    if (n.pillMode === 'center') {
+        labelX = n.x;
+        textAnchor = 'middle';
+    } else if (n.pillMode === 'flag-right') {
+        labelX = edgeX + NOW_PILL_LABEL_INSET_X_PX;
+        textAnchor = 'start';
+    } else {
+        labelX = edgeX - NOW_PILL_LABEL_INSET_X_PX;
+        textAnchor = 'end';
+    }
+    return textTag(
+        {
+            x: num(labelX),
+            y: num(baselineY),
+            'font-family': fonts.sans,
+            'font-size': NOW_PILL_LABEL_FONT_SIZE_PX,
+            'font-weight': 700,
+            fill: labelTextColor,
+            'text-anchor': textAnchor,
+        },
+        n.label,
+    );
+}

package/src/svg/primitives.ts

@@ -0,0 +1,86 @@
+// Shared drawing primitives: the typography and stroke helpers every layer of
+// the SVG renderer draws with, plus the rectangle frame and the box
+// intersection the item, wave and non-working-band layers share. Nothing here
+// knows about a particular roadmap element.
+
+import type { BoundingBox, ResolvedStyle } from '@nowline/layout';
+import { CORNER_RADIUS_PX, TEXT_SIZE_PX } from '@nowline/layout';
+import type { FontFamilies } from './render.js';
+import { num, tag } from './xml.js';
+
+// `TEXT_SIZE_PX`, `CORNER_RADIUS_PX`, `FONT_STACK` come from
+// `@nowline/layout` (themes/shared) so a typography or radius change
+// flows from one place to both layout and renderer.
+//
+// `WEIGHT_NUM` lives here only because no DSL `weight` table exists in
+// shared yet. If/when it does, hoist this alongside `FONT_STACK`.
+const WEIGHT_NUM: Record<string, number> = {
+    thin: 100,
+    light: 300,
+    normal: 400,
+    bold: 700,
+};
+
+// `style.textSize` is `SizeBucket` which includes `'full'`; the shared
+// `TEXT_SIZE_PX` table only carries the size buckets (no `'full'` —
+// that's a corner-radius-only value). Widen the lookup so a stray
+// `'full'` falls through to the `?? 14` fallback instead of compiling.
+function textSizePx(bucket: ResolvedStyle['textSize']): number {
+    return (TEXT_SIZE_PX as Record<string, number>)[bucket] ?? 14;
+}
+
+export function fontAttrs(
+    style: ResolvedStyle,
+    fonts: FontFamilies,
+    overrideSize?: number,
+): Record<string, string | number> {
+    return {
+        'font-family': fonts[style.font],
+        'font-size': overrideSize ?? textSizePx(style.textSize),
+        'font-weight': WEIGHT_NUM[style.weight] ?? 400,
+        'font-style': style.italic ? 'italic' : 'normal',
+        fill: style.text,
+    };
+}
+
+function strokeDash(style: ResolvedStyle): string | undefined {
+    if (style.border === 'dashed') return '4 3';
+    if (style.border === 'dotted') return '1 3';
+    return undefined;
+}
+
+export function rectFrame(
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    style: ResolvedStyle,
+    extra: Record<string, string | number | undefined | null | boolean> = {},
+): string {
+    // The radius is a maximum: a frame narrower than two radii, such as a
+    // short bar drawn at its true width, rounds into a pill, then a line.
+    const rx = Math.min(CORNER_RADIUS_PX[style.cornerRadius] ?? 4, h / 2, w / 2);
+    return tag('rect', {
+        x: num(x),
+        y: num(y),
+        width: num(w),
+        height: num(h),
+        rx: num(rx),
+        ry: num(rx),
+        fill: style.bg === 'none' ? 'transparent' : style.bg,
+        stroke: style.fg,
+        'stroke-width': 1,
+        'stroke-dasharray': strokeDash(style) ?? null,
+        ...extra,
+    });
+}
+
+/** `a ∩ b`, or undefined when they do not overlap. */
+export function intersectBox(a: BoundingBox, b: BoundingBox): BoundingBox | undefined {
+    const x1 = Math.max(a.x, b.x);
+    const y1 = Math.max(a.y, b.y);
+    const x2 = Math.min(a.x + a.width, b.x + b.width);
+    const y2 = Math.min(a.y + a.height, b.y + b.height);
+    if (x2 <= x1 || y2 <= y1) return undefined;
+    return { x: x1, y: y1, width: x2 - x1, height: y2 - y1 };
+}