@xterm/addon-webgl 0.20.0-beta.2 → 0.20.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xterm/addon-webgl",
-  "version": "0.20.0-beta.2",
+  "version": "0.20.0-beta.4",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
@@ -23,8 +23,8 @@
     "prepublishOnly": "npm run package",
     "start": "node ../../demo/start"
   },
-  "commit": "937deb9f4ba0dbfb8d99eb0ea75cffdd2ecabc06",
+  "commit": "7fee40ddcd4fbec5cdbd8fb7851d77803ea65b82",
   "peerDependencies": {
-    "@xterm/xterm": "^6.1.0-beta.2"
+    "@xterm/xterm": "^6.1.0-beta.4"
   }
 }

package/src/CustomGlyphs.ts

@@ -3,6 +3,8 @@
  * @license MIT
  */
 
+/* eslint-disable @typescript-eslint/naming-convention */
+
 import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 
 interface IBlockVector {
@@ -219,8 +221,106 @@ export const symbolsForLegacyComputingDefinitions: { [index: string]: DrawFuncti
   '\u{1FB38}': sextant(0b111011), // BLOCK SEXTANT-12456
   '\u{1FB39}': sextant(0b111100), // BLOCK SEXTANT-3456 (lower two thirds block)
   '\u{1FB3A}': sextant(0b111101), // BLOCK SEXTANT-13456
-  '\u{1FB3B}': sextant(0b111110)  // BLOCK SEXTANT-23456
+  '\u{1FB3B}': sextant(0b111110),  // BLOCK SEXTANT-23456
   // Pattern 63 (0x3F = 0b111111) = full block, skipped (exists as U+2588)
+
+  // Smooth mosaic terminal graphic characters (0x1FB3C-0x1FB6F)
+  // These are triangular/diagonal shapes. "X BLOCK DIAGONAL A TO B" means the X region is filled,
+  // with a diagonal edge from point A to point B.
+  // Reference points: upper/lower = y (0/1), left/right = x (0/1), centre = x=0.5
+  // Vertical uses sextant grid: upper-middle = y=1/3, lower-middle = y=2/3
+
+  // LOWER LEFT BLOCK variants (1FB3C-1FB40) - filled region in lower-left
+  '\u{1FB3C}': () => `M0,${2/3} L0,1 L0.5,1 Z`,           // LOWER LEFT BLOCK DIAGONAL LOWER MIDDLE LEFT TO LOWER CENTRE
+  '\u{1FB3D}': () => `M0,${2/3} L0,1 L1,1 Z`,             // LOWER LEFT BLOCK DIAGONAL LOWER MIDDLE LEFT TO LOWER RIGHT
+  '\u{1FB3E}': () => `M0,${1/3} L0,1 L0.5,1 Z`,           // LOWER LEFT BLOCK DIAGONAL UPPER MIDDLE LEFT TO LOWER CENTRE
+  '\u{1FB3F}': () => `M0,${1/3} L0,1 L1,1 Z`,             // LOWER LEFT BLOCK DIAGONAL UPPER MIDDLE LEFT TO LOWER RIGHT
+  '\u{1FB40}': () => 'M0,0 L0,1 L0.5,1 Z',                // LOWER LEFT BLOCK DIAGONAL UPPER LEFT TO LOWER CENTRE
+
+  // LOWER RIGHT BLOCK variants (1FB41-1FB4B) - filled region in lower-right
+  '\u{1FB41}': () => `M0,${1/3} L0.5,0 L1,0 L1,1 L0,1 Z`, // LOWER RIGHT BLOCK DIAGONAL UPPER MIDDLE LEFT TO UPPER CENTRE
+  '\u{1FB42}': () => `M0,${1/3} L1,0 L1,1 L0,1 Z`,        // LOWER RIGHT BLOCK DIAGONAL UPPER MIDDLE LEFT TO UPPER RIGHT
+  '\u{1FB43}': () => `M0,${2/3} L0.5,0 L1,0 L1,1 L0,1 Z`, // LOWER RIGHT BLOCK DIAGONAL LOWER MIDDLE LEFT TO UPPER CENTRE
+  '\u{1FB44}': () => `M0,${2/3} L1,0 L1,1 L0,1 Z`,        // LOWER RIGHT BLOCK DIAGONAL LOWER MIDDLE LEFT TO UPPER RIGHT
+  '\u{1FB45}': () => 'M0,1 L0.5,0 L1,0 L1,1 Z',           // LOWER RIGHT BLOCK DIAGONAL LOWER LEFT TO UPPER CENTRE
+  '\u{1FB46}': () => `M0,${2/3} L1,${1/3} L1,1 L0,1 Z`,   // LOWER RIGHT BLOCK DIAGONAL LOWER MIDDLE LEFT TO UPPER MIDDLE RIGHT
+  '\u{1FB47}': () => `M0.5,1 L1,${2/3} L1,1 Z`,           // LOWER RIGHT BLOCK DIAGONAL LOWER CENTRE TO LOWER MIDDLE RIGHT
+  '\u{1FB48}': () => `M0,1 L1,${2/3} L1,1 Z`,             // LOWER RIGHT BLOCK DIAGONAL LOWER LEFT TO LOWER MIDDLE RIGHT
+  '\u{1FB49}': () => `M0.5,1 L1,${1/3} L1,1 Z`,           // LOWER RIGHT BLOCK DIAGONAL LOWER CENTRE TO UPPER MIDDLE RIGHT
+  '\u{1FB4A}': () => `M0,1 L1,${1/3} L1,1 Z`,             // LOWER RIGHT BLOCK DIAGONAL LOWER LEFT TO UPPER MIDDLE RIGHT
+  '\u{1FB4B}': () => 'M0.5,1 L1,0 L1,1 Z',                // LOWER RIGHT BLOCK DIAGONAL LOWER CENTRE TO UPPER RIGHT
+
+  // LOWER LEFT BLOCK variants continued (1FB4C-1FB51) - large fills with upper-right cut
+  '\u{1FB4C}': () => `M0.5,0 L0,0 L0,1 L1,1 L1,${1/3} Z`, // LOWER LEFT BLOCK DIAGONAL UPPER CENTRE TO UPPER MIDDLE RIGHT
+  '\u{1FB4D}': () => `M0,0 L0,1 L1,1 L1,${1/3} Z`,        // LOWER LEFT BLOCK DIAGONAL UPPER LEFT TO UPPER MIDDLE RIGHT
+  '\u{1FB4E}': () => `M0.5,0 L0,0 L0,1 L1,1 L1,${2/3} Z`, // LOWER LEFT BLOCK DIAGONAL UPPER CENTRE TO LOWER MIDDLE RIGHT
+  '\u{1FB4F}': () => `M0,0 L0,1 L1,1 L1,${2/3} Z`,        // LOWER LEFT BLOCK DIAGONAL UPPER LEFT TO LOWER MIDDLE RIGHT
+  '\u{1FB50}': () => 'M0.5,0 L0,0 L0,1 L1,1 Z',           // LOWER LEFT BLOCK DIAGONAL UPPER CENTRE TO LOWER RIGHT
+  '\u{1FB51}': () => `M0,${1/3} L0,1 L1,1 L1,${2/3} Z`,   // LOWER LEFT BLOCK DIAGONAL UPPER MIDDLE LEFT TO LOWER MIDDLE RIGHT
+
+  // UPPER RIGHT BLOCK variants (1FB52-1FB56) - large fills with lower-left cut
+  '\u{1FB52}': () => `M0,${2/3} L0.5,1 L1,1 L1,0 L0,0 Z`, // UPPER RIGHT BLOCK DIAGONAL LOWER MIDDLE LEFT TO LOWER CENTRE
+  '\u{1FB53}': () => `M0,${2/3} L1,1 L1,0 L0,0 Z`,        // UPPER RIGHT BLOCK DIAGONAL LOWER MIDDLE LEFT TO LOWER RIGHT
+  '\u{1FB54}': () => `M0,${1/3} L0.5,1 L1,1 L1,0 L0,0 Z`, // UPPER RIGHT BLOCK DIAGONAL UPPER MIDDLE LEFT TO LOWER CENTRE
+  '\u{1FB55}': () => `M0,${1/3} L1,1 L1,0 L0,0 Z`,        // UPPER RIGHT BLOCK DIAGONAL UPPER MIDDLE LEFT TO LOWER RIGHT
+  '\u{1FB56}': () => 'M0,0 L0.5,1 L1,1 L1,0 Z',           // UPPER RIGHT BLOCK DIAGONAL UPPER LEFT TO LOWER CENTRE
+
+  // UPPER LEFT BLOCK variants (1FB57-1FB61) - small to large fills in upper-left
+  '\u{1FB57}': () => `M0,${1/3} L0,0 L0.5,0 Z`,           // UPPER LEFT BLOCK DIAGONAL UPPER MIDDLE LEFT TO UPPER CENTRE
+  '\u{1FB58}': () => `M0,${1/3} L0,0 L1,0 Z`,             // UPPER LEFT BLOCK DIAGONAL UPPER MIDDLE LEFT TO UPPER RIGHT
+  '\u{1FB59}': () => `M0,${2/3} L0,0 L0.5,0 Z`,           // UPPER LEFT BLOCK DIAGONAL LOWER MIDDLE LEFT TO UPPER CENTRE
+  '\u{1FB5A}': () => `M0,${2/3} L0,0 L1,0 Z`,             // UPPER LEFT BLOCK DIAGONAL LOWER MIDDLE LEFT TO UPPER RIGHT
+  '\u{1FB5B}': () => 'M0,1 L0,0 L0.5,0 Z',                // UPPER LEFT BLOCK DIAGONAL LOWER LEFT TO UPPER CENTRE
+  '\u{1FB5C}': () => `M0,${2/3} L0,0 L1,0 L1,${1/3} Z`,   // UPPER LEFT BLOCK DIAGONAL LOWER MIDDLE LEFT TO UPPER MIDDLE RIGHT
+  '\u{1FB5D}': () => `M0.5,1 L0,1 L0,0 L1,0 L1,${2/3} Z`, // UPPER LEFT BLOCK DIAGONAL LOWER CENTRE TO LOWER MIDDLE RIGHT
+  '\u{1FB5E}': () => `M0,1 L0,0 L1,0 L1,${2/3} Z`,        // UPPER LEFT BLOCK DIAGONAL LOWER LEFT TO LOWER MIDDLE RIGHT
+  '\u{1FB5F}': () => `M0.5,1 L0,1 L0,0 L1,0 L1,${1/3} Z`, // UPPER LEFT BLOCK DIAGONAL LOWER CENTRE TO UPPER MIDDLE RIGHT
+  '\u{1FB60}': () => `M0,1 L0,0 L1,0 L1,${1/3} Z`,        // UPPER LEFT BLOCK DIAGONAL LOWER LEFT TO UPPER MIDDLE RIGHT
+  '\u{1FB61}': () => 'M0.5,1 L0,1 L0,0 L1,0 Z',           // UPPER LEFT BLOCK DIAGONAL LOWER CENTRE TO UPPER RIGHT
+
+  // UPPER RIGHT BLOCK variants continued (1FB62-1FB67) - small to medium fills in upper-right
+  '\u{1FB62}': () => `M0.5,0 L1,0 L1,${1/3} Z`,           // UPPER RIGHT BLOCK DIAGONAL UPPER CENTRE TO UPPER MIDDLE RIGHT
+  '\u{1FB63}': () => `M0,0 L1,0 L1,${1/3} Z`,             // UPPER RIGHT BLOCK DIAGONAL UPPER LEFT TO UPPER MIDDLE RIGHT
+  '\u{1FB64}': () => `M0.5,0 L1,0 L1,${2/3} Z`,           // UPPER RIGHT BLOCK DIAGONAL UPPER CENTRE TO LOWER MIDDLE RIGHT
+  '\u{1FB65}': () => `M0,0 L1,0 L1,${2/3} Z`,             // UPPER RIGHT BLOCK DIAGONAL UPPER LEFT TO LOWER MIDDLE RIGHT
+  '\u{1FB66}': () => 'M0.5,0 L1,0 L1,1 Z',                // UPPER RIGHT BLOCK DIAGONAL UPPER CENTRE TO LOWER RIGHT
+  '\u{1FB67}': () => `M0,${1/3} L1,${2/3} L1,0 L0,0 Z`,   // UPPER RIGHT BLOCK DIAGONAL UPPER MIDDLE LEFT TO LOWER MIDDLE RIGHT
+
+  // Triangular blocks (1FB68-1FB6F)
+  // Three-quarter blocks: full block minus one triangular quarter pointing to center
+  '\u{1FB68}': () => 'M0,0 L1,0 L1,1 L0,1 L0.5,0.5 Z',    // UPPER AND RIGHT AND LOWER TRIANGULAR THREE QUARTERS BLOCK (missing left)
+  '\u{1FB69}': () => 'M0,0 L0.5,0.5 L1,0 L1,1 L0,1 Z',    // LEFT AND LOWER AND RIGHT TRIANGULAR THREE QUARTERS BLOCK (missing upper)
+  '\u{1FB6A}': () => 'M0,0 L1,0 L0.5,0.5 L1,1 L0,1 Z',    // UPPER AND LEFT AND LOWER TRIANGULAR THREE QUARTERS BLOCK (missing right)
+  '\u{1FB6B}': () => 'M0,0 L1,0 L1,1 L0.5,0.5 L0,1 Z',    // LEFT AND UPPER AND RIGHT TRIANGULAR THREE QUARTERS BLOCK (missing lower)
+  '\u{1FB6C}': () => 'M0,0 L0.5,0.5 L0,1 Z',              // LEFT TRIANGULAR ONE QUARTER BLOCK
+  '\u{1FB6D}': () => 'M0,0 L1,0 L0.5,0.5 Z',              // UPPER TRIANGULAR ONE QUARTER BLOCK
+  '\u{1FB6E}': () => 'M1,0 L1,1 L0.5,0.5 Z',              // RIGHT TRIANGULAR ONE QUARTER BLOCK
+  '\u{1FB6F}': () => 'M0,1 L1,1 L0.5,0.5 Z'               // LOWER TRIANGULAR ONE QUARTER BLOCK
+};
+
+/**
+ * Rectangular shade characters - these use medium shade pattern with region bounds.
+ * Pattern is a checkerboard that shifts 1px each row (same as medium shade).
+ * Region is defined as [x, y, width, height] in 0-1 normalized coordinates.
+ */
+export const rectangularShadeDefinitions: { [index: string]: [number, number, number, number] | undefined } = {
+  '\u{1FB8C}': [0, 0, 0.5, 1],   // LEFT HALF MEDIUM SHADE
+  '\u{1FB8D}': [0.5, 0, 0.5, 1], // RIGHT HALF MEDIUM SHADE
+  '\u{1FB8E}': [0, 0, 1, 0.5],   // UPPER HALF MEDIUM SHADE
+  '\u{1FB8F}': [0, 0.5, 1, 0.5], // LOWER HALF MEDIUM SHADE
+  '\u{1FB90}': [0, 0, 1, 1]      // INVERSE MEDIUM SHADE
+};
+
+/**
+ * Block + inverse shade combo characters.
+ * Each entry: [solidRegion, shadeRegion] where regions are [x, y, w, h] in 0-1 coords.
+ * Shade region uses inverse medium shade pattern.
+ */
+export const blockShadeComboDefinitions: { [index: string]: [[number, number, number, number], [number, number, number, number]] | undefined } = {
+  '\u{1FB91}': [[0, 0, 1, 0.5], [0, 0.5, 1, 0.5]],     // UPPER HALF BLOCK AND LOWER HALF INVERSE MEDIUM SHADE
+  '\u{1FB92}': [[0, 0.5, 1, 0.5], [0, 0, 1, 0.5]],     // UPPER HALF INVERSE MEDIUM SHADE AND LOWER HALF BLOCK
+  // 1FB93 is reserved
+  '\u{1FB94}': [[0.5, 0, 0.5, 1], [0, 0, 0.5, 1]]      // LEFT HALF INVERSE MEDIUM SHADE AND RIGHT HALF BLOCK
 };
 
 type PatternDefinition = number[][];
@@ -523,7 +623,19 @@ export function tryDrawCustomChar(
 
   const symbolsForLegacyComputingDefinition = symbolsForLegacyComputingDefinitions[c];
   if (symbolsForLegacyComputingDefinition) {
-    drawSextantChar(ctx, symbolsForLegacyComputingDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight);
+    drawPathDefinitionCharacter(ctx, symbolsForLegacyComputingDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight);
+    return true;
+  }
+
+  const rectangularShadeDefinition = rectangularShadeDefinitions[c];
+  if (rectangularShadeDefinition) {
+    drawRectangularShadeChar(ctx, rectangularShadeDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight, c === '\u{1FB90}');
+    return true;
+  }
+
+  const blockShadeComboDefinition = blockShadeComboDefinitions[c];
+  if (blockShadeComboDefinition) {
+    drawBlockShadeComboChar(ctx, blockShadeComboDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight);
     return true;
   }
 
@@ -569,7 +681,7 @@ function drawBlockVectorChar(
   }
 }
 
-function drawSextantChar(
+function drawPathDefinitionCharacter(
   ctx: CanvasRenderingContext2D,
   charDefinition: DrawFunctionDefinition,
   xOffset: number,
@@ -664,6 +776,81 @@ function drawPatternChar(
   ctx.fillRect(xOffset, yOffset, deviceCellWidth, deviceCellHeight);
 }
 
+/**
+ * Draws rectangular shade characters - medium shade pattern clipped to a region.
+ * Uses a checkerboard pattern that shifts 1px each row (same as medium shade U+2592).
+ */
+function drawRectangularShadeChar(
+  ctx: CanvasRenderingContext2D,
+  region: [number, number, number, number],
+  xOffset: number,
+  yOffset: number,
+  deviceCellWidth: number,
+  deviceCellHeight: number,
+  isInverse: boolean
+): void {
+  const [rx, ry, rw, rh] = region;
+  const regionX = Math.round(xOffset + rx * deviceCellWidth);
+  const regionY = Math.round(yOffset + ry * deviceCellHeight);
+  const regionW = Math.round(rw * deviceCellWidth);
+  const regionH = Math.round(rh * deviceCellHeight);
+
+  // For inverse medium shade, we use the opposite pattern (fill where medium shade doesn't)
+  // Medium shade pattern: fills at (x+y) % 2 === 0, so inverse fills at (x+y) % 2 === 1
+  const patternOffset = isInverse ? 1 : 0;
+
+  for (let py = 0; py < regionH; py++) {
+    // Calculate the absolute y position for pattern calculation
+    const absY = regionY + py - yOffset;
+    for (let px = 0; px < regionW; px++) {
+      const absX = regionX + px - xOffset;
+      // Checkerboard pattern: fill if (x + y) % 2 matches the offset
+      if (((absX + absY) % 2) === patternOffset) {
+        ctx.fillRect(regionX + px, regionY + py, 1, 1);
+      }
+    }
+  }
+}
+
+/**
+ * Draws block + inverse shade combo characters.
+ * Fills the solid region completely, then draws inverse medium shade in the shade region.
+ */
+function drawBlockShadeComboChar(
+  ctx: CanvasRenderingContext2D,
+  regions: [[number, number, number, number], [number, number, number, number]],
+  xOffset: number,
+  yOffset: number,
+  deviceCellWidth: number,
+  deviceCellHeight: number
+): void {
+  const [solidRegion, shadeRegion] = regions;
+
+  // Draw solid block region
+  const solidX = Math.round(xOffset + solidRegion[0] * deviceCellWidth);
+  const solidY = Math.round(yOffset + solidRegion[1] * deviceCellHeight);
+  const solidW = Math.round(solidRegion[2] * deviceCellWidth);
+  const solidH = Math.round(solidRegion[3] * deviceCellHeight);
+  ctx.fillRect(solidX, solidY, solidW, solidH);
+
+  // Draw inverse medium shade region
+  const shadeX = Math.round(xOffset + shadeRegion[0] * deviceCellWidth);
+  const shadeY = Math.round(yOffset + shadeRegion[1] * deviceCellHeight);
+  const shadeW = Math.round(shadeRegion[2] * deviceCellWidth);
+  const shadeH = Math.round(shadeRegion[3] * deviceCellHeight);
+
+  for (let py = 0; py < shadeH; py++) {
+    const absY = shadeY + py - yOffset;
+    for (let px = 0; px < shadeW; px++) {
+      const absX = shadeX + px - xOffset;
+      // Inverse checkerboard: fill at (x + y) % 2 === 1
+      if (((absX + absY) % 2) === 1) {
+        ctx.fillRect(shadeX + px, shadeY + py, 1, 1);
+      }
+    }
+  }
+}
+
 /**
  * Draws the following box drawing characters by mapping a subset of SVG d attribute instructions to
  * canvas draw calls.