Merge pull request #406 from sedwards2009/qt6

Qt6 and upgraded NodeGui

main/package.json

@@ -16,10 +16,10 @@
     "test": "yarn run build-code && yarn node --experimental-vm-modules $(yarn bin jest)"
   },
   "dependencies": {
-    "@nodegui/nodegui": "0.57.3",
-    "nodegui-plugin-font-icon": "0.2.4",
-    "nodegui-plugin-rich-text-delegate": "0.2.1",
-    "nodegui-plugin-style-tweaker": "0.2.1"
+    "@nodegui/nodegui": "0.58.0-rc2",
+    "nodegui-plugin-font-icon": "0.3.1",
+    "nodegui-plugin-rich-text-delegate": "0.3.0",
+    "nodegui-plugin-style-tweaker": "0.3.1"
   },
   "devDependencies": {
     "@extraterm/extraterm-extension-api": "0.15.0",

main/src/Window.ts

@@ -84,6 +84,7 @@ export class Window implements Disposable {
   #tabBar: QTabBar = null;
   #contentStack: QStackedWidget = null;
   #lastConfigDpi = -1;
+  #lastConfigDpr = -1;
 
   #hamburgerMenuButton: QToolButton = null;
   #hamburgerMenu: QMenu = null;
@@ -588,7 +589,10 @@ export class Window implements Disposable {
     ];
 
     this.#lastConfigDpi = this.getDpi();
-    const terminalFontSizePx = Math.round(this.#pointsToPx(config.terminalFontSize, this.#lastConfigDpi));
+    this.#lastConfigDpr = this.getDpr();
+
+    const scaledFontSize = config.terminalFontSize * this.#lastConfigDpr;
+    const terminalFontSizePx = Math.round(this.#pointsToPx(scaledFontSize, this.#lastConfigDpi));
 
     const terminalVisualConfig: TerminalVisualConfig = {
       cursorStyle: config.cursorStyle,
@@ -602,6 +606,7 @@ export class Window implements Disposable {
       transparentBackground,
       useLigatures: config.terminalDisplayLigatures,
       ligatureMarker,
+      windowDpr: this.getDpr(),
       screenHeightHintPx: 1024, // FIXME
       screenWidthHintPx: 1024,  // FIXME
     };
@@ -618,6 +623,12 @@ export class Window implements Disposable {
     return screen.logicalDotsPerInch();
   }
 
+  getDpr(): number {
+    const window = this.#windowWidget;
+    const screen = window.isVisible() ? window.windowHandle().screen() : QApplication.primaryScreen();
+    return screen.devicePixelRatio();
+  }
+
   async #handleConfigChangeEvent(event: ConfigChangeEvent): Promise<void> {
     if (event.key !== GENERAL_CONFIG) {
       return;
@@ -715,7 +726,7 @@ export class Window implements Disposable {
     });
     this.#windowOpenState = WindowOpenState.Open;
 
-    if (this.getDpi() !== this.#lastConfigDpi) {
+    if (this.getDpi() !== this.#lastConfigDpi || this.getDpr() !== this.#lastConfigDpr) {
       this.#updateTerminalVisualConfig();
     }
     this.#moveOnScreen();

main/src/terminal/Terminal.ts

@@ -564,10 +564,11 @@ export class Terminal implements Tab, Disposable {
     const maxViewportWidth = maxViewportSize.width() + currentMargins.left + currentMargins.right;
     const maxContentWidth = maxViewportWidth - spacing - spacing - 2 * this.#uiStyle.getFrameMarginLeftRightPx();
 
-    const columns = Math.floor(maxContentWidth / metrics.widthPx);
-    const rows = Math.floor(maxContentHeight / metrics.heightPx);
+    const dpr = this.#topContents.devicePixelRatio();
+    const columns = Math.floor(maxContentWidth  / (metrics.widthPx / dpr));
+    const rows = Math.floor(maxContentHeight / (metrics.heightPx / dpr));
 
-    const vGap = maxContentHeight % metrics.heightPx;
+    const vGap = maxContentHeight % (metrics.heightPx / dpr);
     const topGap = Math.floor(vGap / 2);
     const bottomGap = vGap - topGap;
 

main/src/terminal/TerminalBlock.ts

@@ -291,22 +291,25 @@ export class TerminalBlock implements Block {
       materializedRows = dims.materializedRows;
       this.#columns = dims.cols;
     }
-    const newHeightPx = (materializedRows + this.#scrollback.length) * metrics.heightPx;
+    const dpr = this.#terminalVisualConfig.windowDpr;
+    const newHeightPx = (materializedRows + this.#scrollback.length) * metrics.heightPx / dpr;
     if (newHeightPx === this.#heightPx) {
       return;
     }
 
-    this.#widget.setMinimumSize(10 * metrics.widthPx, newHeightPx);
+    this.#widget.setMinimumSize(10 * metrics.widthPx / dpr, newHeightPx);
     this.#widget.setMaximumSize(16777215, newHeightPx);
     this.#heightPx = newHeightPx;
   }
 
   getCellWidthPx(): number {
-    return this.#fontMetrics.widthPx;
+    const dpr = this.#widget.devicePixelRatio();
+    return this.#fontMetrics.widthPx / dpr;
   }
 
   getCellHeightPx(): number {
-    return this.#fontMetrics.heightPx;
+    const dpr = this.#widget.devicePixelRatio();
+    return this.#fontMetrics.heightPx / dpr;
   }
 
   setEmulator(emulator: Term.Emulator): void {
@@ -340,20 +343,28 @@ export class TerminalBlock implements Block {
     this.#widget.update();
   }
 
+  #toRealPixels(logicalPx: number): number {
+    return this.#widget.devicePixelRatio() * logicalPx;
+  }
+
+  #toLogicalPixels(logicalPx: number): number {
+    return logicalPx / this.#widget.devicePixelRatio();
+  }
+
   #handlePaintEvent(event: QPaintEvent): void {
     const paintRect = event.rect();
 
     const metrics = this.#fontMetrics;
     const heightPx = metrics.heightPx;
 
-    const topRenderRow = Math.floor(paintRect.top() / heightPx);
-    const heightRows = Math.ceil(paintRect.height() / heightPx) + 1;
+    const topRenderRow = Math.floor(this.#toRealPixels(paintRect.top()) / heightPx);
+    const heightRows = Math.ceil(this.#toRealPixels(paintRect.height()) / heightPx) + 1;
 
     const painter = new QPainter(this.#widget);
     const cursorStyle = this.#terminalVisualConfig.cursorStyle;
 
     const bgRGBA = this.#terminalVisualConfig.palette[PALETTE_BG_INDEX];
-    painter.fillRect(paintRect.left(), paintRect.top(), paintRect.width(), paintRect.height(), RGBAToQColor(bgRGBA));
+    painter.fillRectF(paintRect.left(), paintRect.top(), paintRect.width(), paintRect.height(), RGBAToQColor(bgRGBA));
 
     // Render any lines from the scrollback
     const scrollbackLength = this.#scrollback.length;
@@ -388,8 +399,9 @@ export class TerminalBlock implements Block {
 
   #renderSelection(painter: QPainter, topRenderRow: number, heightRows: number): void {
     const metrics = this.#fontMetrics;
-    const heightPx = metrics.heightPx;
-    const widthPx = metrics.widthPx;
+    const dpr = this.#widget.devicePixelRatio();
+    const heightPx = metrics.heightPx / dpr;
+    const widthPx = metrics.widthPx / dpr;
 
     let selectionStart = this.#selectionStart;
     let selectionEnd = this.#selectionEnd;
@@ -416,15 +428,15 @@ export class TerminalBlock implements Block {
       if (i === selectionStart.y) {
         if (selectionStart.y === selectionEnd.y) {
           // Small selection contained within one row.
-          painter.fillRect(selectionStart.x*widthPx, selectionStart.y*heightPx,
+          painter.fillRectF(selectionStart.x*widthPx, selectionStart.y*heightPx,
             (selectionEnd.x - selectionStart.x) * widthPx, heightPx, selectionQColor);
         } else {
           // Top row of the selection.
           let rowLength = emulatorWidth;
           if (i < this.#scrollback.length) {
             rowLength = this.#scrollback[i].width;
           }
-          painter.fillRect(selectionStart.x*widthPx, selectionStart.y*heightPx,
+          painter.fillRectF(selectionStart.x*widthPx, selectionStart.y*heightPx,
             (rowLength - selectionStart.x) * widthPx, heightPx, selectionQColor);
         }
       } else {
@@ -434,10 +446,10 @@ export class TerminalBlock implements Block {
           if (i < this.#scrollback.length) {
             rowLength = this.#scrollback[i].width;
           }
-          painter.fillRect(0, i*heightPx, rowLength*widthPx, heightPx, selectionQColor);
+          painter.fillRectF(0, i*heightPx, rowLength*widthPx, heightPx, selectionQColor);
         } else {
           // The last row of a multi-row selection.
-          painter.fillRect(0, i*heightPx, selectionEnd.x*widthPx, heightPx, selectionQColor);
+          painter.fillRectF(0, i*heightPx, selectionEnd.x*widthPx, heightPx, selectionQColor);
         }
       }
     }
@@ -488,7 +500,9 @@ export class TerminalBlock implements Block {
       hoverLinkID = line.getLinkIDByURL(this.#hoveredURL, this.#hoveredGroup);
     }
 
-    let px = 0;
+    const dpr = this.#toRealPixels(1);
+
+    let xPx = 0;
     for (const column of normalizedCellIterator(line, normalizedCell)) {
       const codePoint = normalizedCell.codePoint;
       if (codePoint !== 0) {
@@ -521,10 +535,12 @@ export class TerminalBlock implements Block {
         } else {
           glyph = this.#fontAtlas.loadCodePoint(codePoint, style, fontIndex, fgRGBA, bgRGBA);
         }
-        painter.drawImage(px, y, qimage, glyph.xPixels + normalizedCell.segment * glyph.widthPx, glyph.yPixels,
-          glyph.widthPx, heightPx);
+        qimage.setDevicePixelRatio(dpr);
+        const sourceX = glyph.xPixels + normalizedCell.segment * glyph.widthPx;
+        const sourceY = glyph.yPixels;
+        painter.drawImageF(xPx / dpr, y / dpr, qimage, sourceX, sourceY, glyph.widthPx, heightPx);
       }
-      px += widthPx;
+      xPx += widthPx;
     }
   }
 
@@ -553,8 +569,8 @@ export class TerminalBlock implements Block {
     const dim = this.#emulator.getDimensions();
 
     const metrics= this.#fontMetrics;
-    const cellHeightPx = metrics.heightPx;
-    const cellWidthPx = metrics.widthPx;
+    const cellHeightPx = this.#toLogicalPixels(metrics.heightPx);
+    const cellWidthPx = this.#toLogicalPixels(metrics.widthPx);
 
     const xPx = dim.cursorX * cellWidthPx;
     const yPx = (dim.cursorY + this.#scrollback.length) * cellHeightPx;
@@ -568,8 +584,8 @@ export class TerminalBlock implements Block {
     }
 
     const metrics= this.#fontMetrics;
-    const cellHeightPx = metrics.heightPx;
-    const cellWidthPx = metrics.widthPx;
+    const cellHeightPx = this.#toLogicalPixels(metrics.heightPx);
+    const cellWidthPx = this.#toLogicalPixels(metrics.widthPx);
 
     const cursorColor = RGBAToQColor(this.#terminalVisualConfig.palette[PALETTE_CURSOR_INDEX]);
     const pen = new QPen();
@@ -585,25 +601,25 @@ export class TerminalBlock implements Block {
         if (line.getStyle(i) & STYLE_MASK_CURSOR) {
           switch (cursorStyle) {
             case CursorStyle.BLOCK_OUTLINE:
-              painter.drawRect(i * cellWidthPx + outlinePenWidthPx, y + outlinePenWidthPx,
+              painter.drawRectF(i * cellWidthPx + outlinePenWidthPx, y + outlinePenWidthPx,
                 cellWidthPx - 2 * outlinePenWidthPx, cellHeightPx - 2 * outlinePenWidthPx);
               break;
 
             case CursorStyle.UNDERLINE:
-              painter.fillRect(i * cellWidthPx, y + cellHeightPx-3, cellWidthPx, 3, cursorColor);
+              painter.fillRectF(i * cellWidthPx, y + cellHeightPx-3, cellWidthPx, 3, cursorColor);
               break;
 
             case CursorStyle.UNDERLINE_OUTLINE:
-              painter.drawRect(i * cellWidthPx + outlinePenWidthPx, y + cellHeightPx - 2*outlinePenWidthPx,
+              painter.drawRectF(i * cellWidthPx + outlinePenWidthPx, y + cellHeightPx - 2*outlinePenWidthPx,
                 cellWidthPx-outlinePenWidthPx, 2);
               break;
 
             case CursorStyle.BEAM:
-              painter.fillRect(i * cellWidthPx, y, 2, cellHeightPx, cursorColor);
+              painter.fillRectF(i * cellWidthPx, y, 2, cellHeightPx, cursorColor);
               break;
 
             case CursorStyle.BEAM_OUTLINE:
-              painter.drawRect(i * cellWidthPx + outlinePenWidthPx,
+              painter.drawRectF(i * cellWidthPx + outlinePenWidthPx,
                 y + outlinePenWidthPx, 2, cellHeightPx - outlinePenWidthPx);
               break;
 
@@ -692,19 +708,22 @@ export class TerminalBlock implements Block {
   }
 
   #pixelToRowColumnEdge(x: number, y: number): TerminalCoord {
-    const gridY = Math.floor(y / this.#fontMetrics.heightPx);
-    const gridX = Math.round(x / this.#fontMetrics.widthPx);
+    const dpr = this.#widget.devicePixelRatio();
+    const gridY = Math.floor(y / (this.#fontMetrics.heightPx / dpr));
+    const gridX = Math.round(x / (this.#fontMetrics.widthPx / dpr));
     return { x: gridX, y: gridY };
   }
 
   pixelPointToCell(x: number, y: number): TerminalCoord {
-    const gridY = Math.floor(y / this.#fontMetrics.heightPx);
-    const gridX = Math.floor(x / this.#fontMetrics.widthPx);
+    const dpr = this.#widget.devicePixelRatio();
+    const gridY = Math.floor(y / (this.#fontMetrics.heightPx / dpr));
+    const gridX = Math.floor(x / (this.#fontMetrics.widthPx / dpr));
     return { x: gridX, y: gridY };
   }
 
   rowToPixel(rowNumber: number): number {
-    return this.#fontMetrics.heightPx * rowNumber;
+    const dpr = this.#widget.devicePixelRatio();
+    return this.#fontMetrics.heightPx * rowNumber * dpr;
   }
 
   #handleMouseButtonRelease(event: QMouseEvent): void {

main/src/terminal/TerminalVisualConfig.ts

@@ -21,6 +21,7 @@ export interface TerminalVisualConfig {
   transparentBackground: boolean;
   useLigatures: boolean;
   ligatureMarker: LigatureMarker;
+  windowDpr: number;
 
   screenWidthHintPx: number;
   screenHeightHintPx: number;

package.json

@@ -28,9 +28,9 @@
     "esversion": 6
   },
   "resolutions": {
-    "@types/node": "16.4.0",
+    "@types/node": "18.11.18",
     "typescript": "4.7.4",
-    "@nodegui/nodegui": "0.57.3",
+    "@nodegui/nodegui": "0.58.0-rc2",
     "7zip-bin": "5.1.1"
   },
   "private": true,
@@ -69,9 +69,9 @@
     ]
   },
   "dependencies": {
-    "@nodegui/nodegui": "0.57.3",
-    "node-gyp": "^8.3.0",
-    "qode": "^0.1.0"
+    "@nodegui/nodegui": "0.58.0-rc2",
+    "@nodegui/qode": "18.12.1-rc1",
+    "node-gyp": "^8.3.0"
   },
   "devDependencies": {
     "@yarnpkg/parsers": "2.5.0-rc.7",

packages/extraterm-char-render-canvas/package.json

@@ -21,7 +21,7 @@
     "run": "false"
   },
   "dependencies": {
-    "@nodegui/nodegui": "0.57.3",
+    "@nodegui/nodegui": "0.58.0-rc2",
     "extraterm-char-cell-line": "1.0.0",
     "extraterm-color-utilities": "1.0.0",
     "extraterm-data-structures": "1.0.0",

packages/extraterm-char-render-canvas/src/font_atlas/FontAtlasBase.ts

@@ -1,7 +1,7 @@
 /**
  * Copyright 2021 Simon Edwards <[email protected]>
  */
-import { QColor, QFont, QFontMetrics, QFontWeight, QImage, QImageFormat, QPainter, QPainterPath, QPen } from "@nodegui/nodegui";
+import { QApplication, QColor, QFont, QFontMetrics, QFontWeight, QImage, QImageFormat, QPainter, QPainterPath, QPen } from "@nodegui/nodegui";
 
 import { StyleCode, STYLE_MASK_BOLD, STYLE_MASK_ITALIC, STYLE_MASK_STRIKETHROUGH, STYLE_MASK_UNDERLINE,
   STYLE_MASK_OVERLINE, STYLE_MASK_HYPERLINK, STYLE_MASK_HYPERLINK_HIGHLIGHT, UNDERLINE_STYLE_NORMAL,
@@ -102,7 +102,6 @@ export abstract class FontAtlasBase<CG extends CachedGlyph> {
     this._pageImageHeight = this._atlasHeightInCells * (this._metrics.heightPx + this._safetyPadding * 2);
 
     this._pageImage = new QImage(this._pageImageWidth, this._pageImageHeight, QImageFormat.RGB32);
-
     this._initializeSlots();
 
     this._painter = new QPainter(); //{alpha: this._transparentBackground});
@@ -195,6 +194,7 @@ export abstract class FontAtlasBase<CG extends CachedGlyph> {
       fgRGBA: number, bgRGBA: number, xPx: number, yPx: number, widthPx: number, widthInCells: number): CG {
 
     const painter = this._painter;
+    this._pageImage.setDevicePixelRatio(1);
 
     painter.begin(this._pageImage);
     painter.save();

packages/extraterm-extension-api/package.json

@@ -34,6 +34,6 @@
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@nodegui/nodegui": "0.57.3"
+    "@nodegui/nodegui": "0.58.0-rc2"
   }
 }

packages/extraterm-timeoutqt/package.json

@@ -12,7 +12,7 @@
     "url": "git://github.com/sedwards2009/extraterm.git"
   },
   "dependencies": {
-    "@nodegui/nodegui": "0.57.3"
+    "@nodegui/nodegui": "0.58.0-rc2"
   },
   "devDependencies": {
     "eslint": "8.13.0",

packages/qt-construct/package.json

@@ -19,10 +19,10 @@
     "lint-strict": "eslint --max-warnings 1 \"src/**/*.ts\""
   },
   "peerDependencies": {
-    "@nodegui/nodegui": "0.57.3"
+    "@nodegui/nodegui": "0.58.0-rc2"
   },
   "devDependencies": {
-    "@nodegui/nodegui": "0.57.3",
+    "@nodegui/nodegui": "0.58.0-rc2",
     "eslint": "8.13.0",
     "eslint-config-extraterm": "1.0.0",
     "eslint-plugin-unicorn": "42.0.0",