Synchronize scrolling in the web version

[pravic]

Hello,

First of all, thanks for this interesting and very useful tool. It will be really helpful for newcomers and those who want to refresh his knowledge of modern C++ standards.

Just a suggestion of a tiny UX improvement: it'd be nice to synchronize code output in the web page when scrolling. Right now you have to scroll both panels manually to compare output side by side.

Optionally, may be something similar to diff view with slightly colored lines (of course, a full diff highlighting, like in github, isn't needed).

[andreasfertig]

Hello pravic,

thank you!

I think it is hard to scroll both. Sometimes the transformed code is more than the original one. For example, if you play with templates and instantiate a lot of them the right side has way more content than the left. If you know a way to do that I welcome a PR.

Initially I had such a diff view in mind. I still do. Its just that my web development skills are, well low. CodeMirror does offer a diff plugin, so it is possible I think. PRs welcome applies here as well :-)

[pravic]

Sometimes the transformed code is more than the original one.

That's the point :) It's called "Synchronized scrolling", a very popular feature in some code editors and in almost all diff viewers.

But yes, I think it is related to the diff feature itself which might be implemented in some JS component already. Who knows.

[nishanthkarthik]

@andreasfertig Can I pick this up?

[andreasfertig]

Hello @nishanthkarthik,

that would be great!

Andreas

[nishanthkarthik]

@andreasfertig The merge view supports what we need. However, both editor instances are tied to a single div. Ideally, we should be able to control when we show the diff (say, when we get a response back from the server).

Is this behavior okay?

• When the user inputs code into the left pane for the first time, the diff view is off and the right pane is empty
• When the user compiles the code, the diff view is shown with the modified lines, highlighted
• When the user starts modifying the left pane again, the diff lines are not highlighted until the next time he clicks on compile

The alternative is to leave the highlighted lines on all the time, but I don't think that would be an intuitive experience. As the user modifies the left pane after compiling, both views are not in sync and a diff is no longer necessary.

What do you think?

[andreasfertig]

Hello @nishanthkarthik,

your approach sounds good to me. Don't worry about the div. It is the way it is for no specific reason.

On thought, it maybe nice, if a user can turn the diff view off.

Andreas

[nishanthkarthik]

I'm using MergeView to extract out an instance of CodeMirror.

function initMergeView() {
  return CodeMirror.MergeView(document.getElementById('merge-view'), {
    lineNumbers: true,
    origLeft: null,
    value: '',
    orig: '',
    mode: 'text/x-c++src',
    connect: 'align',
    allowEditingOriginals: false,
    showDifferences: false,
    collapseIdentical: false
  });
}

var cppMergeView = initMergeView();
var cppEditor = cppMergeView.editor();

initMergeView has to be called each time the code changes, judging from the sample use here. There is no direct member to manually edit the right pane's content. The only way is to reinitialize the MergeView every time.

Do you think we can go ahead with this trade-off or switch to a different diff view?

[nishanthkarthik]

The merge view leaves a lot to be desired. It internally uses diff-match-patch

[andreasfertig]

Hello @nishanthkarthik,

thanks for your work. I think it looks ok. One question I have is, how does it look in a bigger examples with multiple diffs? Can the colors of each block be defined? A real big example might be #101 or #188. There might be other examples in the test folder with lambdas which are also interesting. My fear is, that we end up with two yellow colored editors.

Another interesting case is something like this:

void Func(int x = 3) {}

int main()
{
  Func();
}

There we have an inline diff.

Andreas

[nishanthkarthik]

Changing color is purely CSS. I think that should be okay.

I'll try out the large examples and post screenshots here.

I am also gonna try using monaco's diff view without using npm. The diff view will be similar to VS Code.

[andreasfertig]

Hello,

this issue has been open for quite a while now. I still believe that the diff is not easy to compare. I'll close the issue in a couple of days if nobody objects and shows some progress.

Andreas