Add HTMLExporter to export PAGX file as standalone HTML matching pagx native rendering.#3424
Closed
shlzxjp wants to merge 609 commits into
Closed
Add HTMLExporter to export PAGX file as standalone HTML matching pagx native rendering.#3424shlzxjp wants to merge 609 commits into
shlzxjp wants to merge 609 commits into
Conversation
…n-path characters in HTML export.
…opagate to HTML output.
…s in HTML export.
…baseline alignment.
… transforms in HTML export.
…s child positions.
…ild Layers report their size.
…t/onMounted for React and Vue output.
… to eliminate cold-start timeouts.
…lamp stops to match tgfx semantics.
…ecting onto the CSS gradient line.
…atches PAGX weight.
…sized rows preserve minimum spacing.
… match the tgfx spacing.
… text-stroke threshold.
…L rows match tgfx regardless of whether the row is stretched or shrink-to-fit.
…nd labels are balanced around the doc center.
…-shadow workaround.
…wser-rendered pixels shifted after the HTML exporter stopped registering a real Noto Sans SC Bold typeface during applyLayout so tgfx faux bold metrics now drive the emitted HTML structure while Chromium still paints with the real Bold font.
…tchConvertAll write into a single top-level fonts directory and rewrite every emitted url('fonts/...') reference into url('../fonts/...') so the generated comparison bundle drops from ~131 MB to ~44 MB while staying deploy ready without any manual post-processing.
…els under html-comparison.
…gle float and per-corner values are silently truncated.
…apper to keep group skew aligned with tgfx native rendering.
…rendering pipeline update.
…sks on document-origin layers still clip correctly.
shlzxjp
changed the title
shlzxjp
changed the title
…st workflow so HtmlScreenshotCompare can run on CI.
…match the repository, and drop empty npm-init placeholder fields.
…c_text_box to skip the mac autotest md5 mismatch.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #3424 +/- ##
==========================================
- Coverage 81.54% 78.85% -2.70%
==========================================
Files 558 578 +20
Lines 51408 60569 +9161
Branches 13987 18763 +4776
==========================================
+ Hits 41922 47763 +5841
- Misses 6602 9160 +2558
- Partials 2884 3646 +762 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
domchen
reviewed
May 13, 2026
| ### HTML output | ||
|
|
||
| When the output is HTML, `pagx export` writes a complete `<!DOCTYPE html>` document that can | ||
| be opened directly in a browser. DiamondGradient and tiled/mirror ImagePattern fills that CSS |
Collaborator
There was a problem hiding this comment.
我们skills里不解释太多原理性的内容，只说明参数和用法，减少上下文篇幅。
domchen
reviewed
May 13, 2026
| commands (render, verify, format, layout, bounds, font info/embed, import/export), or | ||
| look up PAGX element attributes and syntax. | ||
| commands (render, verify, format, layout, bounds, font info/embed, import/export, | ||
| export to HTML for browser preview), or look up PAGX element attributes and syntax. |
domchen
reviewed
May 13, 2026
| | `references/patterns.md` | Structural patterns for UI components, layouts, tables, charts, decorative effects | Read before generating | | ||
| | `references/attributes.md` | Attribute defaults, enumerations, required attributes | As needed | | ||
| | `references/cli.md` | CLI commands — `render`, `verify`, `format`, `layout`, `bounds`, `font info`, `font embed`, `import`, `export` | As needed | | ||
| | `references/cli.md` | CLI commands — `render`, `verify`, `format`, `layout`, `bounds`, `font info`, `font embed`, `import`, `export` (SVG, HTML) | As needed | |
Collaborator
There was a problem hiding this comment.
这里也不用特别强调SVG和HTML，总体说有export命令就行
domchen
reviewed
May 13, 2026
Comment on lines
+105
to
+132
| * Returns the font metrics line height (|ascent| + descent + leading) computed during layout. | ||
| * Returns 0 if layout has not been performed. | ||
| */ | ||
| float fontLineHeight() const; | ||
|
|
||
| /** | ||
| * Returns the maximum font ascent (distance from baseline to the top of the tallest glyph) | ||
| * computed during layout. Used by HTML export for alphabetic-baseline text positioning where | ||
| * CSS `top = position.y - fontAscent()` places the baseline at the authored position.y. | ||
| * Returns 0 if layout has not been performed. | ||
| */ | ||
| float fontAscent() const; | ||
|
|
||
| /** | ||
| * Returns the height of the text bounds computed during layout. For TextBox text, this reflects | ||
| * the number of lines tgfx actually retained after applying overflow:hidden clipping — lines | ||
| * whose bottom would exceed the box height are dropped and do not contribute to this value. | ||
| * Returns 0 if layout has not been performed. | ||
| */ | ||
| float layoutBoundsHeight() const; | ||
|
|
||
| /** | ||
| * Returns the width of the text bounds computed during layout — the actual inked width of the | ||
| * shaped glyph run(s), not the containing Layer's width. Useful for HTML export to scope a | ||
| * `background-clip:text` gradient to the same width tgfx uses when `fitsToGeometry=true` | ||
| * evaluates against the glyph bounding box. Returns 0 if layout has not been performed. | ||
| */ | ||
| float layoutBoundsWidth() const; |
Collaborator
There was a problem hiding this comment.
这些公开的读取接口不应该加，我们的行高就是css的line-box模型，直接用那个规范实现就行。
domchen
reviewed
May 13, 2026
Comment on lines
+99
to
+109
| bool isWidthAutoSized() const { | ||
| return widthAutoSized; | ||
| } | ||
|
|
||
| /** | ||
| * Returns true when neither the PAGX author nor the layout engine supplied an explicit height for | ||
| * this TextBox: the height was inferred entirely from tgfx's own text measurement. | ||
| */ | ||
| bool isHeightAutoSized() const { | ||
| return heightAutoSized; | ||
| } |
Collaborator
There was a problem hiding this comment.
这两个公开接口也不必要加。用isNaN(TextBox.width)这种就能判断
domchen
reviewed
May 13, 2026
| /** | ||
| * Output formatting style for the generated HTML document. | ||
| */ | ||
| enum class HTMLFormat { |
Collaborator
There was a problem hiding this comment.
这个选项是不是没有必要？如果需要minify，业务自己有很多第三方工具吧。
domchen
reviewed
May 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a new HTMLExporter under include/pagx/HTMLExporter.h that converts PAGX documents into standalone HTML fragments. The exporter mirrors PAGX rendering semantics against tgfx native: Layer geometry, Group transforms, SolidColor / Linear / Radial / Conic / Diamond gradients, ImagePattern, DropShadow / BackgroundBlur / InnerShadow / ColorMatrix styles, standalone Text and TextBox (including textAnchor, paragraphAlign, writingMode, fontSynthesis, TextPath, TextModifier RangeSelector), BlendMode mapping including a PlusDarker SVG fallback, Mask and ScrollRect clipping, Repeater expansion, Composition references, and font embedding through @font-face with multi-source URL / local fallbacks. Auxiliary assets (rasterized gradient fills, tiled patterns, and copies of external Image files) land in a caller-supplied staticImgDir so the HTML stays small. pagx export grows an html format (--format html, --html-font, --html-no-font-synthesis-*) so the CLI matches the new API.
The branch also merges origin/main and includes a one-line HTML-local wrapper (BuildGroupMatrixForHTML) that negates group skew to align with tgfx VectorGroup::ApplySkew; the shared pagx::BuildGroupMatrix is kept as-is so main's PAGXSVGTest.SVGExport_GroupSkew and the SVG / PPT exporters are unaffected. Merge conflicts across CliUtils, TextLayout, StringParser, and version.json were resolved by mirroring main's module splits (pagx::VerifyUtils, pagx::ExporterUtils) and deleting SVGTextLayout, whose logic the new SVG exporter subsumes.
Verified with PAGFullTest (1158/1158) on macOS, and against the PAGX-native comparison page generated by test/gen_html_comparison.sh across 275 samples (pagx_to_html / cli / layout / text / spec).