Skip to content

Commit

Permalink
Merge pull request #2289 from Textualize/svg-tweak
Browse files Browse the repository at this point in the history 
Svg tweak
  • Loading branch information
@willmcgugan
willmcgugan committed May 23, 2022
2 parents 58bfa48 + 2d44195 commit 9bfb619
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 9 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Expand Up @@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [12.4.3] - 2022-05-23

### Changed

- Further tweaks to SVG character matrix
- Added clip rect to SVG to prevent box characters overlapping bottom of terminal

## [12.4.2] - 2022-05-23

### Fixed
Expand Down
2 changes: 1 addition & 1 deletion pyproject.toml
View file
Expand Up @@ -2,7 +2,7 @@
name = "rich"
homepage = "https://github.com/willmcgugan/rich"
documentation = "https://rich.readthedocs.io/en/latest/"
version = "12.4.2"
version = "12.4.3"
description = "Render rich text, tables, progress bars, syntax highlighting, markdown and more to the terminal"
authors = ["Will McGugan <willmcgugan@gmail.com>"]
license = "MIT"
Expand Down
9 changes: 8 additions & 1 deletion rich/_export_format.py
View file
Expand Up @@ -56,8 +56,15 @@
{styles}
</style>
<defs>
<clipPath id="{unique_id}-clip-terminal">
<rect x="0" y="0" width="{terminal_width}" height="{terminal_height}" />
</clipPath>
</defs>
{chrome}
<g transform="translate({terminal_x}, {terminal_y})">
<g transform="translate({terminal_x}, {terminal_y})" clip-path="url(#{unique_id}-clip-terminal)">
{backgrounds}
<g class="{unique_id}-matrix">
{matrix}
Expand Down
14 changes: 8 additions & 6 deletions rich/console.py
View file
Expand Up @@ -2292,7 +2292,7 @@ def get_svg_style(style: Style) -> str:

padding_top = 40
padding_right = 8
padding_bottom = 12
padding_bottom = 8
padding_left = 8

padding_width = padding_left + padding_right
Expand Down Expand Up @@ -2380,9 +2380,9 @@ def stringify(value: object) -> str:
"rect",
fill=background,
x=x * char_width,
y=y * line_height,
width=char_width * text_length + 1,
height=line_height + 1,
y=y * line_height + 1.5,
width=char_width * text_length,
height=line_height + 0.25,
)
)

Expand Down Expand Up @@ -2416,7 +2416,7 @@ def stringify(value: object) -> str:
y=margin_top,
width=terminal_width,
height=terminal_height,
rx=12,
rx=8,
)

title_color = _theme.foreground_color.hex
Expand All @@ -2431,7 +2431,7 @@ def stringify(value: object) -> str:
y=margin_top + char_height + 6,
)
chrome += f"""
<g transform="translate(30,24)">
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
Expand All @@ -2443,6 +2443,8 @@ def stringify(value: object) -> str:
char_width=char_width,
char_height=char_height,
line_height=line_height,
terminal_width=char_width * width,
terminal_height=(y + 1) * line_height,
width=terminal_width + margin_width,
height=terminal_height + margin_height,
terminal_x=margin_left + padding_left,
Expand Down
2 changes: 1 addition & 1 deletion tests/test_console.py
View file
Expand Up @@ -494,7 +494,7 @@ def test_export_html_inline():
assert html == expected


EXPECTED_SVG = '<svg class="rich-terminal" viewBox="0 0 1238 78.4" xmlns="http://www.w3.org/2000/svg">\n <!-- Generated with Rich https://www.textualize.io -->\n <style>\n\n @font-face {\n font-family: "Fira Code";\n src: local("FiraCode-Regular"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");\n font-style: normal;\n font-weight: 400;\n }\n @font-face {\n font-family: "Fira Code";\n src: local("FiraCode-Bold"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");\n font-style: bold;\n font-weight: 700;\n }\n\n .terminal-614794459-matrix {\n font-family: Fira Code, monospace;\n font-size: 20px;\n line-height: 24.4px;\n font-variant-east-asian: full-width;\n }\n\n .terminal-614794459-title {\n font-size: 18px;\n font-weight: bold;\n font-family: arial;\n }\n\n .terminal-614794459-r1 { fill: #608ab1;font-weight: bold }\n.terminal-614794459-r2 { fill: #c5c8c6 }\n </style>\n <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="1236" height="76.4" rx="12"/><text class="terminal-614794459-title" fill="#c5c8c6" text-anchor="middle" x="618" y="27">Rich</text>\n <g transform="translate(30,24)">\n <circle cx="0" cy="0" r="7" fill="#ff5f57"/>\n <circle cx="22" cy="0" r="7" fill="#febc2e"/>\n <circle cx="44" cy="0" r="7" fill="#28c840"/>\n </g>\n \n <g transform="translate(9, 41)">\n <rect fill="#cc555a" x="0" y="0" width="37.6" height="25.4"/>\n <g class="terminal-614794459-matrix">\n <text class="terminal-614794459-r1" x="0" y="20" textLength="36.6">foo</text><text class="terminal-614794459-r2" x="48.8" y="20" textLength="61">Click</text><text class="terminal-614794459-r2" x="1220" y="20" textLength="12.2">\n</text>\n </g>\n </g>\n</svg>\n'
EXPECTED_SVG = '<svg class="rich-terminal" viewBox="0 0 1238 74.4" xmlns="http://www.w3.org/2000/svg">\n <!-- Generated with Rich https://www.textualize.io -->\n <style>\n\n @font-face {\n font-family: "Fira Code";\n src: local("FiraCode-Regular"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");\n font-style: normal;\n font-weight: 400;\n }\n @font-face {\n font-family: "Fira Code";\n src: local("FiraCode-Bold"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");\n font-style: bold;\n font-weight: 700;\n }\n\n .terminal-614794459-matrix {\n font-family: Fira Code, monospace;\n font-size: 20px;\n line-height: 24.4px;\n font-variant-east-asian: full-width;\n }\n\n .terminal-614794459-title {\n font-size: 18px;\n font-weight: bold;\n font-family: arial;\n }\n\n .terminal-614794459-r1 { fill: #608ab1;font-weight: bold }\n.terminal-614794459-r2 { fill: #c5c8c6 }\n </style>\n\n <defs>\n <clipPath id="terminal-614794459-clip-terminal">\n <rect x="0" y="0" width="1220.0" height="24.4" />\n </clipPath>\n </defs>\n\n <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="1236" height="72.4" rx="8"/><text class="terminal-614794459-title" fill="#c5c8c6" text-anchor="middle" x="618" y="27">Rich</text>\n <g transform="translate(26,22)">\n <circle cx="0" cy="0" r="7" fill="#ff5f57"/>\n <circle cx="22" cy="0" r="7" fill="#febc2e"/>\n <circle cx="44" cy="0" r="7" fill="#28c840"/>\n </g>\n \n <g transform="translate(9, 41)" clip-path="url(#terminal-614794459-clip-terminal)">\n <rect fill="#cc555a" x="0" y="1.5" width="36.6" height="24.65"/>\n <g class="terminal-614794459-matrix">\n <text class="terminal-614794459-r1" x="0" y="20" textLength="36.6">foo</text><text class="terminal-614794459-r2" x="48.8" y="20" textLength="61">Click</text><text class="terminal-614794459-r2" x="1220" y="20" textLength="12.2">\n</text>\n </g>\n </g>\n</svg>\n'


def test_export_svg():
Expand Down

0 comments on commit 9bfb619

Please sign in to comment.