How to replace properly certain matches on QScintilla widget?

Question

I got this little mcve code:

import sys
import re

from PyQt5 import QtGui, QtWidgets, QtCore
from PyQt5.QtCore import Qt
from PyQt5.Qsci import QsciScintilla
from PyQt5 import Qsci


class FloatSlider(QtWidgets.QWidget):

    value_changed = QtCore.pyqtSignal(float)

    def __init__(self, value=0.0, parent=None):
        super().__init__(parent)

        self.slider = QtWidgets.QSlider(Qt.Horizontal)
        self.label = QtWidgets.QLabel()
        self.label.setAlignment(Qt.AlignCenter)

        self.adjust(value)

        layout = QtWidgets.QHBoxLayout()
        layout.addWidget(self.slider)
        layout.addWidget(self.label)

        self.slider.valueChanged.connect(self.on_value_changed)
        self.setLayout(layout)
        self.setWindowTitle("Adjust number")

    def adjust(self, value):
        width = 100  # TODO: Adjust it properly depending on input value
        self.slider.setRange(value - width, value + width)
        self.slider.setSingleStep(1)
        self.slider.setValue(value)
        self.label.setText(str(float(value)))

    def on_value_changed(self, value):
        # vmax, vmin = self.slider.minimum(), self.slider.maximum()
        # value = 2 * value / (vmax - vmin)
        self.label.setText(str(float(value)))
        self.value_changed.emit(value)


class SimpleEditor(QsciScintilla):

    def __init__(self, language=None, parent=None):
        super().__init__(parent)

        self.slider = FloatSlider(value=0.0)
        self.slider.value_changed.connect(self.float_value_changed)

        font = QtGui.QFont()
        font.setFamily('Courier')
        font.setFixedPitch(True)
        font.setPointSize(10)
        self.setFont(font)
        self.setMarginsFont(font)
        fontmetrics = QtGui.QFontMetrics(font)
        self.setMarginsFont(font)
        self.setMarginWidth(0, fontmetrics.width("00000") + 6)
        self.setMarginLineNumbers(0, True)
        self.setMarginsBackgroundColor(QtGui.QColor("#cccccc"))
        self.setBraceMatching(QsciScintilla.SloppyBraceMatch)
        self.setCaretLineVisible(True)
        self.setCaretLineBackgroundColor(QtGui.QColor("#E8E8FF"))

        if language:
            self.lexer = getattr(Qsci, 'QsciLexer' + language)()
            self.setLexer(self.lexer)

        self.SendScintilla(QsciScintilla.SCI_FOLDALL, True)
        self.setAutoCompletionThreshold(1)
        self.setAutoCompletionSource(QsciScintilla.AcsAPIs)
        self.setFolding(QsciScintilla.BoxedTreeFoldStyle)

        # Signals/Slots
        self.cursorPositionChanged.connect(self.on_cursor_position_changed)
        self.copyAvailable.connect(self.on_copy_available)
        self.indicatorClicked.connect(self.on_indicator_clicked)
        self.indicatorReleased.connect(self.on_indicator_released)
        self.linesChanged.connect(self.on_lines_changed)
        self.marginClicked.connect(self.on_margin_clicked)
        self.modificationAttempted.connect(self.on_modification_attempted)
        self.modificationChanged.connect(self.on_modification_changed)
        self.selectionChanged.connect(self.on_selection_changed)
        self.textChanged.connect(self.on_text_changed)
        self.userListActivated.connect(self.on_user_list_activated)

    def float_value_changed(self, v):
        print(v)

    def on_cursor_position_changed(self, line, index):
        text = self.text(line)
        for match in re.finditer('(?:^|(?<=\W))\d+(?:\.\d+)?(?=$|\W)', text):
            start, end = match.span()
            if start <= index <= end:
                pos = self.positionFromLineIndex(line, start)
                x = self.SendScintilla(
                    QsciScintilla.SCI_POINTXFROMPOSITION, 0, pos)
                y = self.SendScintilla(
                    QsciScintilla.SCI_POINTYFROMPOSITION, 0, pos)
                point = self.mapToGlobal(QtCore.QPoint(x, y))
                num = float(match.group())
                message = 'number: %s' % num

                self.slider.setWindowTitle('line: {0}'.format(line))
                self.slider.adjust(num)
                self.slider.move(point + QtCore.QPoint(0, 20))
                self.slider.show()

                break

    def on_copy_available(self, yes):
        print('-' * 80)
        print("on_copy_available")

    def on_indicator_clicked(self, line, index, state):
        print("on_indicator_clicked")

    def on_indicator_released(self, line, index, state):
        print("on_indicator_released")

    def on_lines_changed(self):
        print("on_lines_changed")

    def on_margin_clicked(self, margin, line, state):
        print("on_margin_clicked")

    def on_modification_attempted(self):
        print("on_modification_attempted")

    def on_modification_changed(self):
        print("on_modification_changed")

    def on_selection_changed(self):
        print("on_selection_changed")

    def on_text_changed(self):
        print("on_text_changed")

    def on_user_list_activated(self, id, text):
        print("on_user_list_activated")


def show_requirements():
    print(sys.version)
    print(QtCore.QT_VERSION_STR)
    print(QtCore.PYQT_VERSION_STR)

if __name__ == "__main__":
    show_requirements()

    app = QtWidgets.QApplication(sys.argv)

    ex = QtWidgets.QWidget()
    hlayout = QtWidgets.QHBoxLayout()
    ed = SimpleEditor("JavaScript")

    hlayout.addWidget(ed)

    ed.setText("""#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main( void ) {

    vec2 st = ( gl_FragCoord.xy / resolution.xy );
    vec2 lefbot = step(vec2(0.1), st);
    float pct = lefbot.x*lefbot.y;
    vec2 rigtop = step(vec2(0.1), 1.-st);
    pct *= rigtop.x*rigtop.y;
    vec3 color = vec3(pct);

    gl_FragColor = vec4( color, 1.0 );""")

    ex.setLayout(hlayout)
    ex.show()
    ex.resize(800, 600)

    sys.exit(app.exec_())

There are several issues I don't know how to address:

My slider widget is changing the widget width every time I change values, I tried addStrecht(1) but it didn't work as I intended as there was too much empty space between widgets (ie: layout arrangement -> slider|strecht|label)
Once I type a numeric value on the QScintilla widget the FloatSlider widget will appear and that's definitely something I don't want. I'd like it to appear only when I press such numeric value with the left mouse button or any other combination (ie: ctrl+left_mouse)
I don't know how to replace properly the QScintilla text (regex match) on realtime. Ideally only the QScintilla matched text should be modified, for instance, I don't want to replace the whole text because the visual effect would be quite creepy

It didn't feel like opening 3 different questions for these little doubts was ok so I've decided to gather them in the same thread. Hopefully that's ok

The fact you call these "little doubts" leads me to suspect you are massively underestimating the complexity of this task. On the second bullet-point - you most definitely **do** want the slider to stay visible. If you try the [khan academy example](http://www.khanacademy.org/computer-programming/tree-generator/822944839), you'll note that the gizmo remains visible whilst you type. This is how all auto-completers, call-tips, and such like work. I don't want to discourage you, but it's going to take *a lot* of effort to get this working right - especially the keyboard handling. — ekhumoro, Sep 25 '16 at 15:33
@ekhumoro Definitely I'm not underestimating the creation of this cool widget :) . It involves several things: 1) creation of a good glsl parser, I'm having some troubles making work this [one](https://github.com/nicholasbishop/pyglsl_parser) and this [one](https://github.com/rougier/glsl-parser) 2) mastering the qscintilla widget possibilities (as you can see I'm far away of mastering it) 3) Creating proper widgets to handle 1/2/3d glsl types, I'll be creating similar pyqt widgets to the ones provided [here](http://editor.thebookofshaders.com/). In any case, one little problem each time :) — BPL, Sep 25 '16 at 15:47

score 1 · Answer 1 · answered Sep 25 '16 at 16:22

On the second bullet point: I think you should give up the idea of having a separate window/dialog for the slider. It should instead be a popup that stays on top of the editor until you click outside it or press escape (i.e. like a tooltip, or context menu).

To give you an idea of how this might look (but without attempting to solve any of the other potential issues), try something like this:

class FloatSlider(QtWidgets.QFrame):    
    value_changed = QtCore.pyqtSignal(float)

    def __init__(self, value=0.0):
        super().__init__()
        ...    
        self.setFrameShape(QtWidgets.QFrame.Box)
        self.setFrameShadow(QtWidgets.QFrame.Plain)
        self.setParent(None, QtCore.Qt.Popup)
        self.setFocusPolicy(QtCore.Qt.NoFocus)

    def adjust(self, value):
        ...
        self.slider.setFocus()

score 0 · Accepted Answer · answered Sep 27 '16 at 18:46

Use setFixedWidth to avoid either the slider or label changing width on every change
You shouldn't use on_cursor_position_changed event, instead just use mouseReleaseEvent
A good way to replace certain matches at certain position would be instead using setText using insertAt and SCI_DELETERANGE methods. For more information check QScintilla docs

How to replace properly certain matches on QScintilla widget?

2 Answers2