textmeasure

2026-08-05 13:57:07 -07:00 · 2023-02-25 21:09:04 -08:00
parent 037664a1c8
commit 472acd8d99
5 changed files with 54 additions and 2 deletions
@@ -8,6 +8,7 @@ import {v4 as uuidv4} from "uuid";
 import type {SessionDataType, WindowDataType, LineType, RemoteType, HistoryItem, RemoteInstanceType, RemotePtrType, CmdDataType, FeCmdPacketType, TermOptsType, RemoteStateType, ScreenDataType, ScreenWindowType, ScreenOptsType, LayoutType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, UIContextType, HistoryInfoType, HistoryQueryOpts, FeInputPacketType, TermWinSize, RemoteInputPacketType, FeStateType, ContextMenuOpts, RendererContext, RendererModel, PtyDataType, BookmarkType} from "./types";
 import {WSControl} from "./ws";
 import {ImageRendererModel} from "./imagerenderer";
+import {measureText} from "./textmeasure";

 var GlobalUser = "sawka";
 const DefaultCellWidth = 7.203125;
@@ -2752,6 +2753,8 @@ if ((window as any).GlobalModel == null) {
 GlobalModel = (window as any).GlobalModel;
 GlobalCommandRunner = (window as any).GlobalCommandRunner;

+window.measureText = measureText;
+
 export {Model, Session, Window, GlobalModel, GlobalCommandRunner, Cmd, Screen, ScreenWindow, riToRPtr, windowWidthToCols, windowHeightToRows, termWidthFromCols, termHeightFromRows, getPtyData, getRemotePtyData};


@@ -30,8 +30,6 @@

@soft-blue: #729fcf;

-
-
 .mono-font(@size: inherit, @weight: inherit) {
    font-family: 'JetBrains Mono', monospace;
    font-size: @size;
@@ -42,6 +40,10 @@ html, body, #main {
    background-color: #000;
 }

+body {
+    overflow: hidden;
+}
+
 body::-webkit-scrollbar {
    display: none;
 }
@@ -2006,3 +2008,17 @@ input[type=checkbox] {
        opacity: 1;
    }
 }
+
+#measure {
+    position: absolute;
+    z-index: -1;
+    top: -5000px;
+
+    .mono {
+        .mono-font();
+    }
+
+    .pre {
+        white-space: pre;
+    }
+}
@@ -0,0 +1,31 @@
+let canvasElem = document.createElement("canvas");
+
+function measureText(text : string, textOpts? : {pre? : boolean, mono? : boolean, fontSize? : number|string}) : {width : number, height : number} {
+    if (textOpts == null) {
+        textOpts = {};
+    }
+    let textElem = document.createElement("div");
+    if (textOpts.pre) {
+        textElem.classList.add("pre");
+    }
+    if (textOpts.mono) {
+        textElem.classList.add("mono");
+    }
+    if (textOpts.fontSize != null) {
+        if (typeof(textOpts.fontSize) == "number") {
+            textElem.style.fontSize = textOpts.fontSize + "px";
+        }
+        else {
+            textElem.style.fontSize = textOpts.fontSize;
+        }
+    }
+    textElem.innerText = text;
+    let measureDiv = document.getElementById("measure");
+    if (measureDiv == null) {
+        throw new Error("cannot measure text, no #measure div");
+    }
+    measureDiv.replaceChildren(textElem);
+    return {width: textElem.clientWidth, height: textElem.clientHeight};
+}
+
+export {measureText};
@@ -10,6 +10,7 @@
    <link rel="stylesheet" href="dist-dev/sh2.css" />
  </head>
  <body>
+    <div id="measure"></div>
    <div id="app"></div>
  </body>
 </html>
@@ -10,6 +10,7 @@
    <link rel="stylesheet" href="dist/sh2.css" />
  </head>
  <body>
+    <div id="measure"></div>
    <div id="app"></div>
  </body>
 </html>