How to make a Qt interactive text editing widget

Question

I want to develop an application with two main widgets one is a text editor and the other one is for graphic viewer.

The basic idea is to let the user hover over any block of code in the text area and the associated part of the drawing gets selected or highlighted.

For the graphic widget, after some research it seems QGraphicsScene fits the requirements the most, but I'm not sure what widget to use for the text editor such that it gives me a signal when hovering over any block of code (and also send a string parameter "id" of the block).

The reverse action is required too, so when the user choose to inspect element in the graphics view the text view is scrolled to view the associate block of code and highlight it (like in Google Chrome "Inspect Element" feature).

Answer 1

To highlight text when an object is hovered in scene you have to reimplement QGraphicsScene and QGraphicsItem (which one you going to use) to inform mainwindow to find and highlight text. Here is sample code to highlight text when an object hovered in scene I used QGraphicsPixmapItem:

---

Graphic scene

 class GraphicScene : public QGraphicsScene
{
    Q_OBJECT
public:
    GraphicScene();

    void EmitItemHoverd(QString name)
    {
      emit SignalItemHovered(name);
    }


signals:
    void SignalItemHovered(QString);
};

---

GraphicsItem :

#include "GraphicScene.h"

class GraphicItem : public QGraphicsPixmapItem
{
    QString itemName;
    GraphicScene * scene;
public:
    GraphicItem(GraphicScene *s, QString name);//name you can set from editor

    void hoverEnterEvent(QGraphicsSceneHoverEvent *event);

};
GraphicItem::GraphicItem(GraphicScene *s, QString name)
{
    scene = s;
    itemName = name;
    this->setAcceptHoverEvents(true);
}

void GraphicItem::hoverEnterEvent(QGraphicsSceneHoverEvent *event)
{
    scene->EmitItemHoverd(itemName);
}

---

in MainWindow constructor connect

connect(scene,SIGNAL(SignalItemHovered(QString)),this,SLOT(OnItemHovered(QString)));

Here is slot:

void MainWindow::OnItemHovered(QString name)
{
   ui->textEdit->find(name);
  QTextCursor tc = ui->textEdit->textCursor();
  tc.select(QTextCursor::WordUnderCursor);    
  ui->textEdit->find("}");
  QTextCursor tc1 = ui->textEdit->textCursor();
  tc1.select(QTextCursor::WordUnderCursor);
  int pos2 = tc1.selectionStart();

  tc.setPosition(pos2,QTextCursor::KeepAnchor);
  ui->textEdit->setTextCursor(tc);
}

and logic to draw:

    GraphicItem * item = new GraphicItem(scene,"Circle");

    QPixmap  map(50,50);
    QPainter * painter= new QPainter(&map);
    painter->setBrush(QBrush(Qt::red,Qt::SolidPattern));
    painter->drawEllipse(20,20,15,15);
    item->setPixmap(map);

    scene->addItem(item);
    ui->graphicsView->update();
    delete painter;

NOTE: Using public EmitItemHoverd may be an issue here I used just for sake of explaining the logic you can make it protected with required changes.

Yeah I knew its half of answer but opposite logic can be implimented based on above

Answer 2

You can use QTextEdit::cursorForPosition and QTextCursor::position to convert mouse coordinates to position in the text. You can determine the hovered code block using this position.

You can select arbitrary code block in the text edit as described in this answer.

QGraphicsScene seems to be a good choice, as it contains all the functionality you may need.

Answer 3

I would attempt this entirely in QML. I would make the text editor a list of text areas (possibly creating a new QML item for desired formatting). Each item in the list is effectively a newly created QML item itself (suitable to be dumped into a .qml file and referenced in a higher item). At this point, you can inject each of those items into the QML view on the left, only adding mouse handlers to fire when hovering or clicking in the area.

So, the left side is a QML scene that is managed and updated by a controller who takes raw text from an item list on the right and tries to parse it out as a new QML type. It should work, according to the theory in my head, and it would reduce a significant amount of complexity (especially in mapping a mouse point directly into a body of text).