Apply same approach for rendering joined selection in webgl

Author: Tyriar

addons/addon-webgl/src/WebglRenderer.ts

@@ -422,19 +422,24 @@ export class WebglRenderer extends Disposable implements IRenderer {
         // ranges are produced, we know that they are valid for the characters
         // and attributes of our input.
         if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
-          isJoined = true;
           range = joinedRanges.shift()!;
 
-          // We already know the exact start and end column of the joined range,
-          // so we get the string and width representing it directly.
-          cell = new JoinedCellData(
-            cell,
-            line!.translateToString(true, range[0], range[1]),
-            range[1] - range[0]
-          );
-
-          // Skip over the cells occupied by this range in the loop
-          lastCharX = range[1] - 1;
+          // If the ligature's selection state is not consistent, don't join it. This helps the
+          // selection render correctly regardless whether they should be joined.
+          if (this._model.selection.isCellSelected(this._terminal, range[0], row) === this._model.selection.isCellSelected(this._terminal, range[1], row)) {
+            isJoined = true;
+
+            // We already know the exact start and end column of the joined range,
+            // so we get the string and width representing it directly.
+            cell = new JoinedCellData(
+              cell,
+              line!.translateToString(true, range[0], range[1]),
+              range[1] - range[0]
+            );
+
+            // Skip over the cells occupied by this range in the loop
+            lastCharX = range[1] - 1;
+          }
         }
 
         chars = cell.getChars();
@@ -507,15 +512,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
             j = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
             this._glyphRenderer.value!.updateCell(x, y, NULL_CELL_CODE, 0, 0, 0, NULL_CELL_CHAR, 0, 0);
             this._model.cells[j] = NULL_CELL_CODE;
-            // HACK: Generally we don't support multi-colored ligature backgrounds, however it's
-            // important here that we re-resolve the cell color since selections are regular
-            // background colors.
-            //
-            // This can result in bad aliasing since currently ligature glyphs drawn using a single
-            // texture. This is most noticable when the background colors across the ligature differ
-            // drastically. This could be improved in the future by sourcing from different glyphs
-            // for each cell when the foreground or background differ.
-            this._cellColorResolver.resolve(cell, x, row, this.dimensions.device.cell.width);
+            // Don't re-resolve the cell color since multi-colored ligature backgrounds are not
+            // supported
             this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._cellColorResolver.result.bg;
             this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._cellColorResolver.result.fg;
             this._model.cells[j + RENDER_MODEL_EXT_OFFSET] = this._cellColorResolver.result.ext;