async parsing + tex caching

2026-08-26 02:06:10 +02:00
parent e18875a752
commit 3946541f87
32 changed files with 2730 additions and 489 deletions
@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Shapes
 import QtQuick.Layouts
 import Quickshell
 import ZShell.Config
@@ -12,57 +13,69 @@ CustomClippingRect {
 	required property string language
 	required property string code
 	property bool copied: false
-	property color codeColor: Colors.palette.m3onSurfaceVariant
-	property color codeBackgroundColor: Colors.palette.m3surfaceContainerLow
+	property color codeBackgroundColor: Colors.palette.m3surfaceContainerHigh
 	property color codeHeaderColor: Colors.palette.m3outline
-	property color codeAccentColor: Colors.palette.m3primary

 	// Highlighter spans for the current code; refreshed when the code or
-	// its language changes.
+	// its language changes. Highlighting runs off the GUI thread; the
+	// token drops results that arrive after the code already changed.
 	property var codeSpans: []
+	property int highlightToken: 0

 	function refresh() {
-		codeSpans = CodeHighlighter.highlight(root.code, root.language);
+		const token = ++root.highlightToken;
+		codeSpans = [];
+		CodeHighlighter.highlight(root.code, root.language, root, token);
+	}
+
+	function onHighlightSpans(token, spans) {
+		if (token !== root.highlightToken)
+			return;
+		codeSpans = spans;
 	}

 	function roleColor(kind) {
+		var s = CodeColors.active;
 		switch (kind) {
 		case "comment":
-			return Colors.palette.m3outline;
+			return s.comment;
 		case "string":
-			return Colors.palette.m3tertiary;
+			return s.string;
 		case "string.key":
-			return Colors.palette.m3secondary;
+			return s.stringKey;
 		case "number":
 		case "constant":
-			return Colors.palette.m3tertiaryFixed;
+			return s.number;
 		case "keyword":
-			return root.codeAccentColor;
+			return s.keyword;
 		case "type":
-			return Colors.palette.m3secondary;
+			return s.type;
 		case "function":
+			return s.functions;
 		case "method":
-			return Colors.palette.m3onSurface;
+			return s.method ?? s.functions;
 		case "macro":
+			return s.macro;
 		case "preproc":
-			return Colors.palette.m3secondaryContainer;
+			return s.preproc ?? s.macro;
 		case "operator":
+			return s.operator ?? s.normal;
 		case "property":
-			return root.codeColor;
+			return s.property ?? s.normal;
 		case "label":
+			return s.label;
 		case "attribute":
-			return Colors.palette.m3tertiaryFixedDim;
+			return s.attribute ?? s.label;
 		default:
-			return root.codeColor;
+			return s.normal;
 		}
 	}

-	function escapeHtml(text) {
+	function escapeHtml(text): string {
 		return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 	}

-	// Wraps the code in <font color> tags following the highlighter spans.
-	function highlightedHtml(code, spans) {
+	function highlightedHtml(code, spans): string {
 		let out;
 		if (!spans.length) {
 			out = escapeHtml(code);
@@ -79,37 +92,17 @@ CustomClippingRect {
 			if (pos < code.length)
 				out += escapeHtml(code.slice(pos));
 		}
-		// RichText collapses HTML whitespace: break newlines, and protect
-		// line-leading indentation with nbsp (internal spaces stay normal
-		// so long lines can still wrap).
-		return out
-			.replace(/(^|\n)[ \t]+/g, ws => ws.replace(/[ \t]/g, "&nbsp;"))
-			.replace(/\n/g, "<br>");
+		return out.replace(/(^|\n)[ \t]+/g, ws => ws.replace(/[ \t]/g, "&nbsp;")).replace(/\n/g, "<br>");
 	}

 	implicitWidth: headerRow.implicitWidth + headerRow.anchors.leftMargin + headerRow.anchors.rightMargin
-	implicitHeight: headerRow.anchors.topMargin + headerRow.implicitHeight + codeText.implicitHeight + codeText.anchors.margins * 2
+	implicitHeight: headerRow.anchors.topMargin + headerRow.implicitHeight + codeRect.implicitHeight + codeRect.anchors.margins + codeRect.anchors.topMargin
 	color: root.codeBackgroundColor
 	radius: Tokens.rounding.medium

 	onLanguageChanged: refresh()
 	onCodeChanged: refresh()

-	CustomText {
-		id: codeText
-
-		anchors.left: parent.left
-		anchors.top: headerRow.bottom
-		anchors.right: parent.right
-		anchors.margins: Tokens.padding.small
-		color: root.codeColor
-		font.family: Config.appearance.font.family.mono
-		font.pointSize: Tokens.font.size.small
-		textFormat: Text.RichText
-		text: root.highlightedHtml(root.code, root.codeSpans)
-		wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-	}
-
 	RowLayout {
 		id: headerRow

@@ -121,11 +114,74 @@ CustomClippingRect {
 		anchors.rightMargin: Tokens.padding.small
 		spacing: Tokens.spacing.small

+		Item {
+			id: iconItem
+
+			readonly property string iconPath: CodeIcons.path(root.language)
+
+			Layout.fillHeight: true
+			implicitWidth: height
+
+			Shape {
+				id: shape
+
+				anchors.centerIn: parent
+				visible: iconItem.iconPath !== ""
+				preferredRendererType: Shape.CurveRenderer
+				scale: Math.min(langText.implicitHeight / height, langText.implicitHeight / width)
+
+				ShapePath {
+					strokeColor: "transparent"
+					fillColor: Colors.palette.m3tertiary
+					fillRule: ShapePath.WindingFill
+
+					PathSvg {
+						path: iconItem.iconPath
+					}
+				}
+			}
+
+			Shape {
+				id: fallbackShape
+
+				anchors.centerIn: parent
+				anchors.verticalCenterOffset: -1
+				visible: iconItem.iconPath === ""
+				preferredRendererType: Shape.CurveRenderer
+				scale: Math.min(langText.implicitHeight / height, langText.implicitHeight / width)
+
+				ShapePath {
+					strokeColor: Colors.palette.m3tertiary
+					strokeWidth: 16
+					capStyle: ShapePath.RoundCap
+					joinStyle: ShapePath.RoundJoin
+					fillColor: "transparent"
+
+					PathSvg {
+						path: "M 40 64 L 112 128 L 40 192"
+					}
+				}
+
+				ShapePath {
+					strokeColor: Colors.palette.m3tertiary
+					strokeWidth: 16
+					capStyle: ShapePath.RoundCap
+					fillColor: "transparent"
+
+					PathSvg {
+						path: "M 120 192 L 216 192"
+					}
+				}
+			}
+		}
+
 		CustomText {
+			id: langText
+
 			Layout.alignment: Qt.AlignVCenter
 			color: root.codeHeaderColor
 			font.pointSize: Tokens.font.size.small
-			text: root.language
+			text: CodeIcons.name(root.language)
 			visible: root.language.length > 0
 		}

@@ -137,6 +193,7 @@ CustomClippingRect {
 			icon: root.copied ? "check" : "content_copy"
 			inactiveColor: "transparent"
 			inactiveOnColor: root.codeHeaderColor
+			label.animate: true
 			type: IconButton.Text

 			onClicked: {
@@ -154,4 +211,40 @@ CustomClippingRect {
 			}
 		}
 	}
+
+	CustomRect {
+		id: codeRect
+
+		anchors.left: parent.left
+		anchors.top: headerRow.bottom
+		anchors.right: parent.right
+		anchors.bottom: parent.bottom
+		anchors.topMargin: Tokens.padding.small
+		radius: root.radius - anchors.margins
+		anchors.margins: Tokens.padding.extraSmall
+		implicitWidth: codeText.implicitWidth + codeFlick.anchors.margins * 2
+		implicitHeight: codeText.implicitHeight + codeFlick.anchors.margins * 2
+		color: CodeColors.active.bg
+
+		Flickable {
+			id: codeFlick
+
+			anchors.fill: parent
+			anchors.margins: Tokens.padding.small
+
+			CustomScrollBar.horizontal: CustomScrollBar {
+				flickable: codeFlick
+			}
+			TextAreaBase.flickable: TextAreaBase {
+				id: codeText
+
+				color: CodeColors.active.normal
+				font.family: Config.appearance.font.family.mono
+				font.pointSize: Tokens.font.size.small
+				textFormat: Text.RichText
+				text: root.highlightedHtml(root.code, root.codeSpans)
+				readOnly: true
+			}
+		}
+	}
 }