Feat: add line numbers to code editors (#5474)

* feat: add line number view for code editor * determine width of linenumbers a bit better * make it a binding to set the leftPadding for the lineNumbers --------- Co-authored-by: Joris Goosen <joris@jorisgoosen.nl>
jasp-stats · Sep 30, 2024 · 5b9d433 · 5b9d433
1 parent f77408c
commit 5b9d433
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/Modules/jaspJags b/Modules/jaspJags
diff --git a/QMLComponents/components/JASP/Controls/JAGSTextArea.qml b/QMLComponents/components/JASP/Controls/JAGSTextArea.qml
@@ -5,4 +5,5 @@ import JASP				1.0
 TextArea
 {
 	textType: JASP.TextTypeJAGSmodel
+	showLineNumber: true
 }
diff --git a/QMLComponents/components/JASP/Controls/TextArea.qml b/QMLComponents/components/JASP/Controls/TextArea.qml
@@ -29,6 +29,7 @@ TextAreaBase
 	property var	undoModel
 	property bool	useTabAsSpaces		: true
 	property var	nextTabItem
+	property bool   showLineNumber      : false
 
 	Component.onCompleted: control.editingFinished.connect(editingFinished)
 
@@ -86,16 +87,62 @@ TextAreaBase
 			boundsBehavior: Flickable.StopAtBounds
 			anchors.fill:	parent
 
+			Rectangle
+			{
+				id:					lineNumbersRect
+				anchors.top:		parent.top
+				anchors.left:		parent.left
+				anchors.topMargin:	jaspTheme.contentMargin
+				anchors.leftMargin:	2
+				visible:			textArea.showLineNumber
+				width:				lineNumbersRect.visible ? lineNumbers.width : 0
+				height:				Math.max(flickableRectangle.height, control.contentHeight) + 10
+				color:				"transparent"
+
+				FontMetrics
+				{
+					font:			jaspTheme.fontCode
+					id:				lineNumberWidthDeterminer
+				}
+
+				ListView
+				{
+					id:				lineNumbers
+					width:			lineNumberWidthDeterminer.advanceWidth(control.lineCount) + jaspTheme.itemPadding
+					height:			parent.height
+					model:			control.lineCount
+					delegate:		Text 
+					{
+						text:					"<i>%1</i>".arg(index + 1)
+						font:					jaspTheme.fontCode
+						color:					jaspTheme.grayDarker
+						height:					control.contentHeight / control.lineCount
+						anchors.right:			parent.right
+						anchors.rightMargin:	jaspTheme.itemPadding / 2
+					}
+				}
+
+				Rectangle
+				{
+					id:             separator
+					anchors.top:    parent.top
+					anchors.left:   parent.right
+					width:          2 * preferencesModel.uiScale
+					height:         Math.max(flickableRectangle.height, control.contentHeight) + 10
+					color:          jaspTheme.borderColor
+				}
+			}
+
 			QTC.TextArea.flickable: QTC.TextArea
 			{
 				id:					control
 				selectByMouse:		true
 				selectedTextColor:	jaspTheme.white
 				selectionColor:		jaspTheme.itemSelectedColor
-
 				font:				textArea.textType === JASP.TextTypeDefault || textArea.textType === JASP.TextTypeSource ? jaspTheme.font : jaspTheme.fontCode
 				color:				textArea.enabled ? jaspTheme.textEnabled : jaspTheme.textDisabled
-
+				leftPadding:		!textArea.showLineNumber ? 0 : lineNumbers.width + 2 * jaspTheme.contentMargin
+
 				Component.onCompleted:
 				{
 					if (textArea.nextTabItem)