[Ryan]

Ok guy.

Im trying to make a text editor with v-play and qml but i can not for the love of life find a solution to this problem.

I have created a very simple editor with line numbers (Im still figuring out all the sizing etc and getting the line height of the AppTextEdit text and the number item to the left). The problem is that no matter what options or properties i have tried to change and look up online i can’t change the spacing between lines (line height in css) or the spacing between each line. Can anyone help pleeeeeeez. Thank you

 

import Felgo 3.0
import QtQuick 2.6
import Qt.labs.controls 1.0

Item {
id: editorRoot

// property var linesModel
// property var myView
// property var listView: listView

property string fontFace: “Monospace”
property var cursor: Qt.IBeamCursor
property bool ctrl: false

property int fontSize: swt(2.4)

property var lineHeight: fontMetrics.lineSpacing

property alias font: textEdit.font
property alias text: textEdit.text
// property var lineNumbersWidth: fontMetrics.advanceWidth(” + (myView ? myView.lines() : “0”))
property var editorFont: editorRoot.fontSize + “pt \”” + editorRoot.fontFace + “\”” + “, monospace”
property var spaceWidth: 25
property var tabWidth: spaceWidth * 4

property real numbersColumnWidth: sw(5)

onEditorFontChanged: {
editorRoot.spaceWidth = fontMetrics.advanceWidth(‘ ‘);
}

FontMetrics {
id: fontMetrics
font.family: editorRoot.fontFace
font.pointSize: editorRoot.fontSize
}

anchors.fill: parent

Rectangle {
height: parent.height
anchors.right: parent.right
width: 1
color: “#ddd”
}

Column {
width: parent.width

Repeater {
model: editorRoot.height / editorRoot.lineHeight
delegate: Text {
id: text
width: numbersColumnWidth
height: editorRoot.lineHeight / 100 * 98
color: “#666”
font: textEdit.font
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
renderType: Text.NativeRendering
text: index + 1
}
}
}

Rectangle {
anchors {
fill: textEdit
leftMargin: -10
}
}

AppTextEdit {
id: textEdit

property int currentLine: text.substring(0, cursorPosition).split(/\r\n|\r|\n/).length – 1
textMargin: 30
font.pixelSize: {
wordSpacing:5
editorRoot.fontSize
}
wrapMode: Text.WordWrap
anchors {
fill: parent
topMargin: 2
leftMargin: numbersColumnWidth + 10
}
selectByKeyboard: true
selectByMouse: true
textFormat: Qt.PlainText
}

Column {
anchors.fill: parent

Repeater {
model: editorRoot.height / editorRoot.lineHeight

Rectangle {
color: index === textEdit.currentextEdittLine ? “blue” : “transparent”
height: editorRoot.lineHeigh
width: editorRoot.width
opacity: 0.2
}
}
}
}

[GüntherFelgo Team]

Hi Ryan!

The Text QML type provides a lineHeight property to read or set the line height of the text. For the TextEdit, this property is not available. However, it is possible to read the TextEdit::lineCount, which at least allows to calculate the lineHeight based on the height. You can use this for implementing the line numbers, e.g. like this:

import Felgo 3.0
import QtQuick 2.0

Item {
  id: editorRoot

  // line height and line count of text edit
  readonly property real lineHeight: (textEdit.implicitHeight - 2 * textEdit.textMargin) / textEdit.lineCount
  readonly property alias lineCount: textEdit.lineCount
  
  // ...

  Column {
    // start position of line numbers depends on text margin
    y: textEdit.textMargin
    width: parent.width

   // add line numbers based on line count and height
    Repeater {
      model: editorRoot.lineCount
      delegate: Text {
        id: text
        width: implicitWidth
        height: editorRoot.lineHeight
        color: "#666"
        font: textEdit.font
        text: index + 1
      }
    }
  }

  // ...

  AppTextEdit {
    id: textEdit

    property int currentLine: text.substring(0, cursorPosition).split(/\r\n|\r|\n/).length - 1
    textMargin: 30
    wrapMode: Text.WordWrap
    anchors {
      fill: parent
      topMargin: 2
      leftMargin: numbersColumnWidth + 10
    }
    selectByKeyboard: true
    selectByMouse: true
    textFormat: Qt.PlainText
    verticalAlignment: TextEdit.AlignTop
  }

 // ...
}

Hope this helps!

Best,
Günther