fix(simulation): align vertical box drawing (#37137)

packages/simulation/src/frontend/png.ts

@@ -90,6 +90,8 @@ function drawBlockElement(context: SKRSContext2D, char: string, x: number, y: nu
   if (char === "█") context.fillRect(x, y, width, CellHeight)
   else if (char === "▀") context.fillRect(x, y, width, CellHeight / 2)
   else if (char === "▄") context.fillRect(x, y + CellHeight / 2, width, CellHeight / 2)
+  else if (char === "┃") context.fillRect(x + CellWidth / 2 - 1, y, 2, CellHeight)
+  else if (char === "╹") context.fillRect(x + CellWidth / 2 - 1, y, 2, CellHeight / 2)
   else return false
   return true
 }

packages/simulation/test/png.test.ts

@@ -59,3 +59,45 @@ test("fills adjacent block elements without glyph gaps", async () => {
     Array.from({ length: image.width }, () => [0, 0, 0, 255]).flat(),
   )
 })
+
+test("draws heavy vertical box elements on cell boundaries", async () => {
+  const image = SimulationPng.screenshotFrame({
+    cols: 1,
+    rows: 2,
+    cursor: [0, 0],
+    lines: [
+      {
+        spans: [
+          {
+            text: "┃",
+            width: 1,
+            fg: RGBA.fromInts(255, 255, 255),
+            bg: RGBA.fromInts(0, 0, 0),
+            attributes: 0,
+          },
+        ],
+      },
+      {
+        spans: [
+          {
+            text: "╹",
+            width: 1,
+            fg: RGBA.fromInts(255, 255, 255),
+            bg: RGBA.fromInts(0, 0, 0),
+            attributes: 0,
+          },
+        ],
+      },
+    ],
+  })
+  const canvas = createCanvas(image.width, image.height)
+  const context = canvas.getContext("2d")
+  context.drawImage(await loadImage(image.data), 0, 0)
+
+  expect([...context.getImageData(4, 0, 2, 30).data]).toEqual(
+    Array.from({ length: 60 }, () => [255, 255, 255, 255]).flat(),
+  )
+  expect([...context.getImageData(4, 30, 2, 10).data]).toEqual(
+    Array.from({ length: 20 }, () => [0, 0, 0, 255]).flat(),
+  )
+})