Diff navigation

[jmls]

I was demoing ace-diff when a developer asked if there was any way of navigating the diffs. The example that was loaded had 2 one-line diffs in a 1000 line file - and having to scroll up and down to find it was rather challenging :)

Is there any way of going to "the next diff", or only showing the previous / next lines of code relative to a diff (ie in this case hiding 990 lines of identical code)

[JackuB]

Yup, was also thinking about collapsing unchanged parts (~like GitHub does it with PRs). I think that it will have 2 parts:

1. add a public API to scroll changes in view (with next/prev support)
2. add an optional UI layer on top with some basic navigation

[schweini]

I just added this to my so-called UI, and it works well:

function scrollToDiff(diffNum)
{
    console.log(differ.diffs);
    var diffs = differ.diffs;

    if ( diffs.length <= diffNum )
    {
        return;
    }
    var lrow = diffs[diffNum].leftStartLine;
    var rrow = diffs[diffNum].rightStartLine;
    
    if ( lrow > 5 )
    {
        lrow -= 5;
    }

    if ( rrow > 5 )
    {
        rrow -= 5;
    }

    differ.getEditors().left.scrollToLine( lrow );
    differ.getEditors().right.scrollToLine( rrow);
}

[moshfeu]

@schweini where did you put this function?
Did you add a ui for the navigation? If so, how the ui knows about the diffNum?

[schweini]

I just added it to a <button> which is in the same page as my two ACE editors and I didn't bother to actually scroll to any other diff than the first one, so I just always call it as `scrollToDiff(0)` i.e. "scroll to first diff on both editors".

…

On Thu, Nov 21, 2019, 1:00 AM Mosh Feu ***@***.***> wrote: @schweini <https://github.com/schweini> where did you put this function? Did you add a ui for the navigation? If so, how the ui knows about the diffNum? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#48?email_source=notifications&email_token=ABOF3L4OSI5GVPM7FB7RB33QUYWXJA5CNFSM4FIWNW42YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEZFZTI#issuecomment-556948685>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABOF3L3CI3XWDGDQDADCJ7LQUYWXJANCNFSM4FIWNW4Q> .

[knvpkishore]

Yup, was also thinking about collapsing unchanged parts (~like GitHub does it with PRs). I think that it will have 2 parts:

1. add a public API to scroll changes in view (with next/prev support)
2. add an optional UI layer on top with some basic navigation

Could you please suggest me which API need to use to scroll the changes with next & prev buttons.

[knvpkishore]

Yup, was also thinking about collapsing unchanged parts (~like GitHub does it with PRs). I think that it will have 2 parts:

1. add a public API to scroll changes in view (with next/prev support)
2. add an optional UI layer on top with some basic navigation

Could you please suggest me which API need to use to scroll the changes with next & prev buttons.
i am trying to use acediff.getNumDiffs() method, but its giving error as cannot read property length of undefined.

could someone please help me on this.

[moshfeu]

@knvpkishore here is a basic example using @schweini's code

https://codesandbox.io/s/ace-diff-navigate-diffs-ixmw8

[knvpkishore]

@knvpkishore here is a basic example using @schweini's code

https://codesandbox.io/s/ace-diff-navigate-diffs-ixmw8

Thanks much