How to map a line to its rendered counterpart

Question

_{(I'm using C++ although this is an algorithmic question that might apply to whatever language)}

I'm writing a two panes text editor which has instructions on the left pane and the rendered forms on the right pane:

rectangle(10, 10, 100, 100);      |   ---------------
circle(50, 50, 10);               |   |             |
                                  |   |             |
                                  |   ---------------
                                  |     ______
                                  |    /      \
                                  |   |        |
                                  |    \______/

the problem I'm facing is this one: I'd like the user to be always able to see the form on the right of what he's changing on the left by scrolling the right pane to show the shape the user is editing on the left.

I wrote a parser for my simple instructions on the left but since a shape can have different dimensions I'm quite unsure how to implement the "scroll to the right shape" behavior.

For now I tried to store the line that generated the shape along with it:

struct Shape { // Base class
  int kind;
  int original_line; // The original line in the left pane for this shape
};

and then finding it at runtime when the user moves the caret on the left pane with a binary search among ALL of the shapes I have on the right pane.

This kinda sucks in terms of performances so I was wondering if there's a better approach (or even a standard one).