Improve rendering of ascii drawing and block characters in SVG previews

Author: ku1ik

lib/asciinema/recordings/snapshot.ex

@@ -132,6 +132,12 @@ defmodule Asciinema.Recordings.Snapshot do
       Enum.member?(@powerline_triangles_range, cp)
   end
 
+  def block_or_powerline_triangle?(char) do
+    cp = char |> String.to_charlist() |> Enum.at(0)
+
+    Enum.member?(@block_elements_range, cp) || Enum.member?(@powerline_triangles_range, cp)
+  end
+
   @csi_init "\x1b["
   @sgr_reset "\x1b[0m"
 
@@ -253,7 +259,7 @@ defmodule Asciinema.Recordings.Snapshot do
     |> regroup(mode)
   end
 
-  def text_coords(snapshot) do
+  def fg_coords(snapshot) do
     snapshot
     |> regroup(:segments)
     |> Map.get(:lines)

lib/asciinema_web/controllers/recording/preview.svg.heex

@@ -1,14 +1,14 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
-  width={(@cols + 2) * 8.433333333}
-  height={(@rows + 1) * 14 * 1.333333}
+  width={w(@cols + 2)}
+  height={h(@rows + 1)}
   font-family={
     {:safe,
      @font_family ||
        "Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace, 'Powerline Symbols'"}
   }
-  font-size="14px"
+  font-size={"#{font_size()}px"}
 >
   <style>
     .br { font-weight: bold }
@@ -25,40 +25,39 @@
     ry={assigns[:ry] || 4}
   />
 
-  <svg
-    x={percent(1.0 * 100 / (@cols + 2))}
-    y={percent(0.5 * 100 / (@rows + 1))}
-    class="default-text-fill"
-  >
+  <svg x={x(1)} y={y(0.5)} class="default-text-fill">
     <g style="shape-rendering: optimizeSpeed">
-      <%= for %{y: y, segments: segments} <- bg_coords(@snapshot) do %>
+      <%= for %{y: y, segments: segments} <- @coords.bg do %>
         <rect
-          :for={segment <- segments}
-          x={percent(100 * segment.x / (@cols + 2))}
-          y={percent(100 * y / (@rows + 1))}
-          width={percent(100 * segment.width / (@cols + 2))}
-          height="19.7"
-          style={bg_style(segment.attrs, @theme)}
+          :for={%{x: x, width: width, attrs: attrs} <- segments}
+          x={x(x)}
+          y={y(y)}
+          width={w(width)}
+          height={h(1)}
+          style={bg_style(attrs, @theme)}
         />
       <% end %>
+
+      <%= for %{y: y, segments: segments} <- @coords.special_chars do %>
+        <%= for %{x: x, text: char, attrs: attrs} <- segments do %>
+          <.special_char char={char} x={x} y={y} attrs={attrs} theme={@theme} />
+        <% end %>
+      <% end %>
     </g>
 
     <text style={"fill: " <> @theme.fg}>
-      <tspan
-        :for={%{y: y, segments: segments} <- text_coords(@snapshot)}
-        y={percent(100 * y / (@rows + 1))}
-      >
+      <tspan :for={%{y: y, segments: segments} <- @coords.text} y={y(y)}>
         <tspan
-          :for={{segment, i} <- Enum.with_index(segments)}
+          :for={{%{x: x, text: text, attrs: attrs}, i} <- Enum.with_index(segments)}
           dy={
             if i == 0 do
               "1em"
             end
           }
-          x={percent(100 * segment.x / (@cols + 2))}
-          {text_extra_attrs(segment.attrs, @theme)}
+          x={x(x)}
+          {text_extra_attrs(attrs, @theme)}
         >
-          <%= html_escape(segment.text) %>
+          <%= html_escape(text) %>
         </tspan>
       </tspan>
     </text>