@design-parity/report-html 0.1.10 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/overlay.d.ts +50 -0
- package/dist/overlay.d.ts.map +1 -0
- package/dist/overlay.js +180 -0
- package/dist/overlay.js.map +1 -0
- package/dist/render.d.ts.map +1 -1
- package/dist/render.js +75 -9
- package/dist/render.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Annotation overlays for the report's panels.
|
|
3
|
+
*
|
|
4
|
+
* Design tools (Figma Dev Mode, Zeplin, browser DevTools) surface fine spec
|
|
5
|
+
* detail as *toggleable layers* drawn over the artwork, in the artwork's own
|
|
6
|
+
* coordinate space. This builds the same as an inline `<svg>` per panel, driven
|
|
7
|
+
* by the panel's {@link SemanticTree} (the candidate's render semantics, or the
|
|
8
|
+
* reference's captured layout):
|
|
9
|
+
*
|
|
10
|
+
* - **box model** — each element's bounding box, its `W×H`, and (when the node
|
|
11
|
+
* carries them) its corner radius and padding, the latter shaded like a
|
|
12
|
+
* DevTools padding ring. Boxes/sizes come from bounds, captured on both sides;
|
|
13
|
+
* radius/padding render when present (a hand-authored or token-rich candidate
|
|
14
|
+
* node has them; the daemon's geometry and the reference's geometry-only
|
|
15
|
+
* capture don't yet, so they degrade to box + size).
|
|
16
|
+
* - **typography** — per text node, a callout with `family · size · weight`
|
|
17
|
+
* (line-height when present) and the resolved text colour. Candidate-side
|
|
18
|
+
* today; the reference capture is geometry-only.
|
|
19
|
+
* - **layout** — elements the structural layout diff flagged as shifted/resized,
|
|
20
|
+
* highlighted with their position/size drift read out. Driven by the verdict's
|
|
21
|
+
* `layout` findings, matched to a node by label.
|
|
22
|
+
*
|
|
23
|
+
* The SVG's `viewBox` is the tree's own frame (`root.bounds` — candidate device
|
|
24
|
+
* pixels, reference dp), so when it's stretched over the panel image both scale
|
|
25
|
+
* together and annotations stay pinned with no pixel-density maths. Label text
|
|
26
|
+
* and stroke widths are sized as a fraction of the frame width so they read the
|
|
27
|
+
* same whether the frame is ~1080px (candidate) or ~411dp (reference). Output is
|
|
28
|
+
* deterministic — coordinates are rounded, order follows the tree.
|
|
29
|
+
*/
|
|
30
|
+
import type { SemanticTree } from "@design-parity/core";
|
|
31
|
+
/**
|
|
32
|
+
* One matched-element geometry delta from the structural layout diff — the
|
|
33
|
+
* `detail` of a `layout` finding (`reference − candidate`, in the reference's
|
|
34
|
+
* dp space). Shown numerically; sign convention follows the finding.
|
|
35
|
+
*/
|
|
36
|
+
export interface LayoutDelta {
|
|
37
|
+
label: string;
|
|
38
|
+
dx: number;
|
|
39
|
+
dy: number;
|
|
40
|
+
dw: number;
|
|
41
|
+
dh: number;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Build the annotation `<svg>` for a panel from its semantic tree, or `""` when
|
|
45
|
+
* there's nothing to draw. Layers are hidden by default (CSS) and toggled by the
|
|
46
|
+
* report's controls. `deltas` are the structural layout diff's per-element
|
|
47
|
+
* geometry findings — matched to a node by label, they drive the layout layer.
|
|
48
|
+
*/
|
|
49
|
+
export declare function annotationSvg(tree: SemanticTree | undefined, deltas?: readonly LayoutDelta[]): string;
|
|
50
|
+
//# sourceMappingURL=overlay.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,KAAK,EAGV,YAAY,EAEb,MAAM,qBAAqB,CAAC;AAkI7B;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAwBD;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,YAAY,GAAG,SAAS,EAC9B,MAAM,CAAC,EAAE,SAAS,WAAW,EAAE,GAC9B,MAAM,CA0CR"}
|
package/dist/overlay.js
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import { escapeHtml } from "./html.js";
|
|
2
|
+
/** Round to 1dp for compact, stable SVG coordinates. */
|
|
3
|
+
function r(n) {
|
|
4
|
+
return Math.round(n * 10) / 10;
|
|
5
|
+
}
|
|
6
|
+
/** First value of a string-keyed token map, regardless of its key. */
|
|
7
|
+
function first(map) {
|
|
8
|
+
if (!map)
|
|
9
|
+
return undefined;
|
|
10
|
+
for (const k of Object.keys(map))
|
|
11
|
+
return map[k];
|
|
12
|
+
return undefined;
|
|
13
|
+
}
|
|
14
|
+
/** Flatten a tree to its bounded nodes, carrying type/colour/padding/radius. */
|
|
15
|
+
function flatten(tree) {
|
|
16
|
+
const out = [];
|
|
17
|
+
const visit = (n) => {
|
|
18
|
+
if (n.bounds) {
|
|
19
|
+
const typography = first(n.tokens?.typography);
|
|
20
|
+
// The daemon records foreground before background, so the first colour is
|
|
21
|
+
// the text's own (insertion order is preserved).
|
|
22
|
+
const colors = n.tokens?.colors ? Object.values(n.tokens.colors) : [];
|
|
23
|
+
const padding = n.tokens?.spacing?.["padding"];
|
|
24
|
+
const radius = first(n.tokens?.radius);
|
|
25
|
+
out.push({
|
|
26
|
+
...(n.label !== undefined ? { label: n.label } : {}),
|
|
27
|
+
...(n.role ? { role: n.role } : {}),
|
|
28
|
+
bounds: n.bounds,
|
|
29
|
+
...(typography ? { typography } : {}),
|
|
30
|
+
...(colors[0] ? { color: colors[0] } : {}),
|
|
31
|
+
...(typeof padding === "number" ? { padding } : {}),
|
|
32
|
+
...(typeof radius === "number" ? { radius } : {}),
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
for (const c of n.children ?? [])
|
|
36
|
+
visit(c);
|
|
37
|
+
};
|
|
38
|
+
visit(tree.root);
|
|
39
|
+
return out;
|
|
40
|
+
}
|
|
41
|
+
/** Bounding box over a set of placed elements (frame fallback). */
|
|
42
|
+
function bbox(nodes) {
|
|
43
|
+
if (nodes.length === 0)
|
|
44
|
+
return undefined;
|
|
45
|
+
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
46
|
+
for (const n of nodes) {
|
|
47
|
+
minX = Math.min(minX, n.bounds.x);
|
|
48
|
+
minY = Math.min(minY, n.bounds.y);
|
|
49
|
+
maxX = Math.max(maxX, n.bounds.x + n.bounds.width);
|
|
50
|
+
maxY = Math.max(maxY, n.bounds.y + n.bounds.height);
|
|
51
|
+
}
|
|
52
|
+
return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
|
|
53
|
+
}
|
|
54
|
+
/** A small labelled tag (rounded rect + monospace text) at `(x, y)`. */
|
|
55
|
+
function tag(x, y, text, u, fill, ink) {
|
|
56
|
+
const fs = 2.6 * u;
|
|
57
|
+
const pad = 0.7 * u;
|
|
58
|
+
const w = text.length * fs * 0.62 + pad * 2;
|
|
59
|
+
const h = fs + pad * 2;
|
|
60
|
+
return (`<g transform="translate(${r(x)},${r(y)})">` +
|
|
61
|
+
`<rect width="${r(w)}" height="${r(h)}" rx="${r(0.5 * u)}" fill="${fill}" fill-opacity="0.92"/>` +
|
|
62
|
+
`<text x="${r(pad)}" y="${r(pad + fs * 0.82)}" font-size="${r(fs)}" font-family="ui-monospace,SFMono-Regular,Menlo,monospace" fill="${ink}">${escapeHtml(text)}</text>` +
|
|
63
|
+
`</g>`);
|
|
64
|
+
}
|
|
65
|
+
/** Box + radius + padding + dimension tag for one element (the box-model layer). */
|
|
66
|
+
function boxMark(n, u) {
|
|
67
|
+
const { x, y, width, height } = n.bounds;
|
|
68
|
+
const stroke = 0.3 * u;
|
|
69
|
+
const rx = n.radius !== undefined ? Math.min(n.radius, width / 2, height / 2) : 0;
|
|
70
|
+
const box = `<rect x="${r(x)}" y="${r(y)}" width="${r(width)}" height="${r(height)}" rx="${r(rx)}" fill="none" stroke="#7db4e8" stroke-width="${r(stroke)}"/>`;
|
|
71
|
+
// Padding ring: shade the inset between the border box and the content box
|
|
72
|
+
// (DevTools-style green), when the node declares uniform padding.
|
|
73
|
+
let pad = "";
|
|
74
|
+
if (n.padding !== undefined && n.padding > 0 && width > 2 * n.padding && height > 2 * n.padding) {
|
|
75
|
+
const p = n.padding;
|
|
76
|
+
pad =
|
|
77
|
+
`<path fill="#3ddc84" fill-opacity="0.18" fill-rule="evenodd" d="` +
|
|
78
|
+
`M${r(x)},${r(y)} H${r(x + width)} V${r(y + height)} H${r(x)} Z ` +
|
|
79
|
+
`M${r(x + p)},${r(y + p)} H${r(x + width - p)} V${r(y + height - p)} H${r(x + p)} Z" />`;
|
|
80
|
+
}
|
|
81
|
+
const detail = [`${Math.round(width)}×${Math.round(height)}`];
|
|
82
|
+
if (n.radius !== undefined)
|
|
83
|
+
detail.push(`r${+n.radius}`);
|
|
84
|
+
if (n.padding !== undefined)
|
|
85
|
+
detail.push(`p${+n.padding}`);
|
|
86
|
+
return `<g class="anno-box">${pad}${box}${tag(x, y, detail.join(" "), u, "#16283a", "#cfe6ff")}</g>`;
|
|
87
|
+
}
|
|
88
|
+
/** Typography callout for one text node (the "typography" layer). */
|
|
89
|
+
function typographyMark(n, u) {
|
|
90
|
+
const t = n.typography;
|
|
91
|
+
const parts = [];
|
|
92
|
+
if (t.fontFamily)
|
|
93
|
+
parts.push(t.fontFamily);
|
|
94
|
+
if (t.fontSize !== undefined)
|
|
95
|
+
parts.push(`${+t.fontSize}sp`);
|
|
96
|
+
if (t.fontWeight !== undefined)
|
|
97
|
+
parts.push(String(t.fontWeight));
|
|
98
|
+
if (t.lineHeight !== undefined)
|
|
99
|
+
parts.push(`lh ${+t.lineHeight}`);
|
|
100
|
+
const label = parts.join(" · ");
|
|
101
|
+
if (!label && !n.color)
|
|
102
|
+
return "";
|
|
103
|
+
const { x, y } = n.bounds;
|
|
104
|
+
const fs = 2.6 * u;
|
|
105
|
+
const swatch = n.color
|
|
106
|
+
? `<rect x="${r(x)}" y="${r(y - fs * 1.7)}" width="${r(fs * 1.4)}" height="${r(fs * 1.4)}" rx="${r(0.4 * u)}" fill="${escapeHtml(n.color)}" stroke="#000" stroke-width="${r(0.15 * u)}"/>`
|
|
107
|
+
: "";
|
|
108
|
+
const textX = n.color ? x + fs * 1.9 : x;
|
|
109
|
+
return (`<g class="anno-type">` + swatch + (label ? tag(textX, y - fs * 1.85, label, u, "#241a33", "#e6d8ff") : "") + `</g>`);
|
|
110
|
+
}
|
|
111
|
+
/** `+8` / `-8` / `0` — a signed delta for the readout. */
|
|
112
|
+
function signed(n) {
|
|
113
|
+
return n > 0 ? `+${n}` : `${n}`;
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Highlight + readout for an element the layout diff flagged as shifted/resized.
|
|
117
|
+
* The box is the element's own bounds on this panel; the tag (placed below, so
|
|
118
|
+
* it clears the box-model tag at top-left) carries the numeric drift.
|
|
119
|
+
*/
|
|
120
|
+
function layoutMark(n, d, u) {
|
|
121
|
+
const { x, y, width, height } = n.bounds;
|
|
122
|
+
const stroke = 0.45 * u;
|
|
123
|
+
const text = `Δpos ${signed(d.dx)},${signed(d.dy)} · Δsize ${signed(d.dw)},${signed(d.dh)}`;
|
|
124
|
+
return (`<g class="anno-delta">` +
|
|
125
|
+
`<rect x="${r(x)}" y="${r(y)}" width="${r(width)}" height="${r(height)}" fill="#e8a23a" fill-opacity="0.12" stroke="#e8a23a" stroke-width="${r(stroke)}"/>` +
|
|
126
|
+
tag(x, y + height, text, u, "#3a2a10", "#ffd98a") +
|
|
127
|
+
`</g>`);
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* Build the annotation `<svg>` for a panel from its semantic tree, or `""` when
|
|
131
|
+
* there's nothing to draw. Layers are hidden by default (CSS) and toggled by the
|
|
132
|
+
* report's controls. `deltas` are the structural layout diff's per-element
|
|
133
|
+
* geometry findings — matched to a node by label, they drive the layout layer.
|
|
134
|
+
*/
|
|
135
|
+
export function annotationSvg(tree, deltas) {
|
|
136
|
+
if (!tree)
|
|
137
|
+
return "";
|
|
138
|
+
const nodes = flatten(tree);
|
|
139
|
+
if (nodes.length === 0)
|
|
140
|
+
return "";
|
|
141
|
+
const frame = tree.root.bounds ?? bbox(nodes);
|
|
142
|
+
if (!frame || frame.width <= 0 || frame.height <= 0)
|
|
143
|
+
return "";
|
|
144
|
+
const u = frame.width / 100;
|
|
145
|
+
const boxes = nodes
|
|
146
|
+
.filter((n) => n.label !== undefined || n.role)
|
|
147
|
+
.map((n) => boxMark(n, u))
|
|
148
|
+
.join("");
|
|
149
|
+
const typography = nodes
|
|
150
|
+
.filter((n) => n.typography)
|
|
151
|
+
.map((n) => typographyMark(n, u))
|
|
152
|
+
.join("");
|
|
153
|
+
// Layout deltas: match each finding to the first node with the same label and
|
|
154
|
+
// highlight it (the element's own box on this panel, with the numeric drift).
|
|
155
|
+
let layout = "";
|
|
156
|
+
if (deltas && deltas.length > 0) {
|
|
157
|
+
const byLabel = new Map();
|
|
158
|
+
for (const n of nodes) {
|
|
159
|
+
if (n.label === undefined)
|
|
160
|
+
continue;
|
|
161
|
+
const k = n.label.trim().toLowerCase();
|
|
162
|
+
if (!byLabel.has(k))
|
|
163
|
+
byLabel.set(k, n);
|
|
164
|
+
}
|
|
165
|
+
layout = deltas
|
|
166
|
+
.map((d) => {
|
|
167
|
+
const n = byLabel.get(d.label.trim().toLowerCase());
|
|
168
|
+
return n ? layoutMark(n, d, u) : "";
|
|
169
|
+
})
|
|
170
|
+
.join("");
|
|
171
|
+
}
|
|
172
|
+
if (!boxes && !typography && !layout)
|
|
173
|
+
return "";
|
|
174
|
+
return (`<svg class="anno" viewBox="${r(frame.x)} ${r(frame.y)} ${r(frame.width)} ${r(frame.height)}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">` +
|
|
175
|
+
`<g data-layer="spacing">${boxes}</g>` +
|
|
176
|
+
`<g data-layer="typography">${typography}</g>` +
|
|
177
|
+
`<g data-layer="layout">${layout}</g>` +
|
|
178
|
+
`</svg>`);
|
|
179
|
+
}
|
|
180
|
+
//# sourceMappingURL=overlay.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"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"}
|
package/dist/render.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,YAAY,CAAC;AAuXzD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAsE3D"}
|
package/dist/render.js
CHANGED
|
@@ -14,6 +14,7 @@ import { resolve } from "node:path";
|
|
|
14
14
|
import { cwd } from "node:process";
|
|
15
15
|
import { groupFindings, tokenDelta } from "./findings.js";
|
|
16
16
|
import { escapeHtml, pngDataUri } from "./html.js";
|
|
17
|
+
import { annotationSvg } from "./overlay.js";
|
|
17
18
|
import { pairVariants } from "./variants.js";
|
|
18
19
|
const STATUS_LABEL = {
|
|
19
20
|
pass: "Pass",
|
|
@@ -114,16 +115,52 @@ function matrixMarkup(rendered) {
|
|
|
114
115
|
</table>
|
|
115
116
|
</section>`;
|
|
116
117
|
}
|
|
117
|
-
function panelMarkup(panel, role) {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
118
|
+
function panelMarkup(panel, role, tree, deltas) {
|
|
119
|
+
let inner;
|
|
120
|
+
if (panel.src) {
|
|
121
|
+
const img = `<img class="panel-img" data-role="${role}" src="${panel.src}" alt="${escapeHtml(panel.label)}" />`;
|
|
122
|
+
// When the panel has a semantic tree, overlay its annotation layers. The
|
|
123
|
+
// image defines the box; the SVG is stretched over it (see .panel-figure).
|
|
124
|
+
const anno = annotationSvg(tree, deltas);
|
|
125
|
+
inner = anno ? `<div class="panel-figure">${img}${anno}</div>` : img;
|
|
126
|
+
}
|
|
127
|
+
else {
|
|
128
|
+
inner = `<div class="panel-empty">no image</div>`;
|
|
129
|
+
}
|
|
121
130
|
return `<figure class="panel" data-role="${role}">
|
|
122
131
|
<figcaption>${escapeHtml(panel.label)}</figcaption>
|
|
123
132
|
<div class="panel-body">${inner}</div>
|
|
124
133
|
</figure>`;
|
|
125
134
|
}
|
|
126
|
-
|
|
135
|
+
/** Toggle bar for the per-panel annotation layers (box model, typography, layout). */
|
|
136
|
+
function annotationControls(hasLayout) {
|
|
137
|
+
const layoutToggle = hasLayout
|
|
138
|
+
? `\n <label class="anno-toggle"><input type="checkbox" data-anno-layer="layout" /> Layout deltas</label>`
|
|
139
|
+
: "";
|
|
140
|
+
return `<div class="anno-controls">
|
|
141
|
+
<span class="anno-controls-label">Annotations</span>
|
|
142
|
+
<label class="anno-toggle"><input type="checkbox" data-anno-layer="spacing" /> Box model (size · padding · radius)</label>
|
|
143
|
+
<label class="anno-toggle"><input type="checkbox" data-anno-layer="typography" /> Typography</label>${layoutToggle}
|
|
144
|
+
</div>`;
|
|
145
|
+
}
|
|
146
|
+
/** The structural layout diff's per-element geometry findings, for the layout layer. */
|
|
147
|
+
function layoutDeltas(verdict) {
|
|
148
|
+
const out = [];
|
|
149
|
+
for (const f of verdict.findings) {
|
|
150
|
+
if (f.kind !== "layout" || !f.detail)
|
|
151
|
+
continue;
|
|
152
|
+
const { label, dx, dy, dw, dh } = f.detail;
|
|
153
|
+
if (typeof label === "string" &&
|
|
154
|
+
typeof dx === "number" &&
|
|
155
|
+
typeof dy === "number" &&
|
|
156
|
+
typeof dw === "number" &&
|
|
157
|
+
typeof dh === "number") {
|
|
158
|
+
out.push({ label, dx, dy, dw, dh });
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
return out;
|
|
162
|
+
}
|
|
163
|
+
function variantMarkup(variant, index, refSrc, candSrc, diffSrc, refTree, candTree, deltas) {
|
|
127
164
|
const meta = [variant.state, variant.theme, variant.size]
|
|
128
165
|
.filter(Boolean)
|
|
129
166
|
.map((v) => `<span class="chip">${escapeHtml(String(v))}</span>`)
|
|
@@ -152,8 +189,8 @@ function variantMarkup(variant, index, refSrc, candSrc, diffSrc) {
|
|
|
152
189
|
<div class="variant-meta">${meta}</div>
|
|
153
190
|
</header>
|
|
154
191
|
<div class="triptych">
|
|
155
|
-
${panelMarkup(ref, "reference")}
|
|
156
|
-
${panelMarkup(cand, "candidate")}
|
|
192
|
+
${panelMarkup(ref, "reference", refTree, deltas)}
|
|
193
|
+
${panelMarkup(cand, "candidate", candTree, deltas)}
|
|
157
194
|
${panelMarkup(diff, "diff")}
|
|
158
195
|
</div>
|
|
159
196
|
${overlay}
|
|
@@ -240,6 +277,14 @@ th.matrix-row{text-align:left;white-space:nowrap;background:#13131a;font-family:
|
|
|
240
277
|
.panel-body{display:flex;align-items:center;justify-content:center;min-height:64px;padding:10px}
|
|
241
278
|
.panel-img{max-width:100%;height:auto;image-rendering:pixelated}
|
|
242
279
|
.panel-empty{color:#666;font-size:12px;padding:20px}
|
|
280
|
+
.panel-figure{position:relative;display:inline-block;line-height:0;max-width:100%}
|
|
281
|
+
.panel-figure .panel-img{display:block}
|
|
282
|
+
.anno{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
|
|
283
|
+
.anno g[data-layer]{display:none}
|
|
284
|
+
.anno g[data-layer].on{display:inline}
|
|
285
|
+
.anno-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 14px;border:1px solid #26262f;border-radius:10px;background:#15151c}
|
|
286
|
+
.anno-controls-label{color:#9a9ab0;text-transform:uppercase;font-size:11px;letter-spacing:.05em}
|
|
287
|
+
.anno-toggle{display:flex;align-items:center;gap:6px;color:#c9c9dd;font-size:13px;cursor:pointer}
|
|
243
288
|
.overlay{margin-top:14px}
|
|
244
289
|
.overlay-stack{position:relative;display:inline-block;border:1px solid #26262f;border-radius:8px;overflow:hidden;background:#0c0c11}
|
|
245
290
|
.overlay-stack img{display:block;max-width:100%}
|
|
@@ -276,6 +321,18 @@ const SCRIPT = `(function(){
|
|
|
276
321
|
apply();
|
|
277
322
|
})(sliders[i]);
|
|
278
323
|
}
|
|
324
|
+
var toggles=document.querySelectorAll('input[data-anno-layer]');
|
|
325
|
+
for(var j=0;j<toggles.length;j++){
|
|
326
|
+
(function(box){
|
|
327
|
+
var layer=box.getAttribute('data-anno-layer');
|
|
328
|
+
function apply(){
|
|
329
|
+
var gs=document.querySelectorAll('.anno g[data-layer="'+layer+'"]');
|
|
330
|
+
for(var k=0;k<gs.length;k++){ gs[k].classList[box.checked?'add':'remove']('on'); }
|
|
331
|
+
}
|
|
332
|
+
box.addEventListener('change',apply);
|
|
333
|
+
apply();
|
|
334
|
+
})(toggles[j]);
|
|
335
|
+
}
|
|
279
336
|
})();`;
|
|
280
337
|
/**
|
|
281
338
|
* Render a parity run as one self-contained HTML document string.
|
|
@@ -298,12 +355,21 @@ export function renderHtmlReport(input) {
|
|
|
298
355
|
const diffSrc = diff ? pngDataUri(diff.png) : undefined;
|
|
299
356
|
return { variant, index, refSrc, candSrc, diffSrc };
|
|
300
357
|
});
|
|
358
|
+
// One semantic tree per side for the whole component (geometry is theme-
|
|
359
|
+
// invariant), reused across every variant's candidate/reference panel.
|
|
360
|
+
const candTree = candidate.semantics;
|
|
361
|
+
const refTree = reference.layout;
|
|
362
|
+
const deltas = layoutDeltas(verdict);
|
|
301
363
|
const detailsHtml = rendered
|
|
302
|
-
.map((r) => variantMarkup(r.variant, r.index, r.refSrc, r.candSrc, r.diffSrc))
|
|
364
|
+
.map((r) => variantMarkup(r.variant, r.index, r.refSrc, r.candSrc, r.diffSrc, refTree, candTree, deltas))
|
|
303
365
|
.join("\n");
|
|
304
366
|
const hasVariants = rendered.length > 0;
|
|
367
|
+
// Show the annotation toggles only when at least one panel can draw them.
|
|
368
|
+
const hasAnnotations = !!annotationSvg(candTree, deltas) || !!annotationSvg(refTree, deltas);
|
|
369
|
+
const controls = hasVariants && hasAnnotations ? annotationControls(deltas.length > 0) : "";
|
|
305
370
|
const variantsSection = hasVariants
|
|
306
|
-
? `${
|
|
371
|
+
? `${controls}
|
|
372
|
+
${matrixMarkup(rendered)}
|
|
307
373
|
<h2 class="section-title">Variant detail</h2>
|
|
308
374
|
${detailsHtml}`
|
|
309
375
|
: `<section class="variant"><p class="panel-empty">No images for this verdict — findings only.</p></section>`;
|
package/dist/render.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render.js","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"render.js","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@design-parity/report-html",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "Self-contained HTML comparison page per parity run: reference | candidate | diff side by side with the verdict findings, inlined to one offline .html file (data-URI PNGs + inline CSS/JS, no external assets).",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"test": "vitest run"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@design-parity/core": "^0.1.
|
|
23
|
+
"@design-parity/core": "^0.1.11"
|
|
24
24
|
},
|
|
25
25
|
"repository": {
|
|
26
26
|
"type": "git",
|