# Diff viewer `editor.DiffView` shows the changes between two texts, as Pierre's diffs and code review tools do: side by side or one over the other, with the words changed within lines highlighted, the unchanged lines between changes collapsed, and the new text editable where it shows. It is a [code editor](https://mygo.egoist.dev/docs/ui/code-editor.md) on each side, with the editor's highlighting, selections and commands, laid out and painted only where in view. ```go import "github.com/egoist/mygo/ui/editor" lang := editor.LanguageFor("main.go") before, after := editor.NewBuffer(original), editor.NewBuffer(edited) before.SetLanguage(lang) after.SetLanguage(lang) app.diff = &editor.DiffState{Old: before, New: after, Editable: true} // In the view: editor.DiffView(c, app.diff).Grow(1).FillWidth() ``` A `DiffState` is the viewer's state, kept across frames: the buffers it compares, its options, and what it keeps of its own, as the lines expanded and its scroll position. Zero options are the defaults, those of Pierre's diffs. The diff follows the buffers: an edit in either shows at once, the viewer diffing again only the lines around it. `New` can be the buffer of an editor too, as a file's, so that the diff shows its changes as they are typed. ## Layout * `Layout` shows the old text on the left and the new on the right, their lines aligned (`DiffSplit`), the two scrolling together; or the new text, with the lines deleted above where they were (`DiffUnified`). * `Inline` highlights what changed within changed lines: words, joining those one character apart so that a phrase reads as one change (`DiffInlineWordAlt`, the default), each word, from the first word to the last, characters, or nothing. * `Indicators` marks changed lines with bars at the gutter's edge, striped for deletions (`DiffBars`), with + and − before them (`DiffClassic`), or by their background alone. `NoBackground` leaves out the tints of changed lines, and `NoLineNumbers` the numbers. * `ContextLines` unchanged lines show around each change, 3 by default. The others collapse into separators of "N unmodified lines", whose buttons show `ExpansionLines` more at a click (100 by default), and all of them with Shift; `ExpandUnchanged`, `ExpandAll` and `CollapseAll` show or collapse them all. * `Wrap` wraps long lines, rows of each side keeping their partners aligned; `FitContent` makes the viewer as high as its lines, as the files of a review in a scroll view. * `Font`, `LineHeight`, `TabSize` and `Theme` are those of the code editor. Changes are tinted with the theme's `Added`, `Deleted` and `Modified` colors, mixed with the background in a perceptual color space so that they read alike in light and dark. Lines are compared as git's histogram diff compares them, with Myers' for what it cannot split, and changes slide to where git's indent heuristic puts them, so that a function added shows as that function rather than its last lines and the next one's first. Changed lines are paired with those most like them for highlighting words, rather than in order. ## Editing and review With `Editable`, the new side edits as the code editor does: typing, several carets, undo, finding and every command, the diff following each keystroke. Cmd+F8 and Shift+Cmd+F8 go to the next and previous changes (Alt+F5 and Shift+Alt+F5 elsewhere), and `GoToHunk` goes to one. * `HunkActions` shows Revert and Keep on the change under the pointer, or the caret's: Revert puts the old lines back in `New`, Keep makes the new lines `Old`'s, as an agent's changes are reviewed one at a time. `Revert` and `Accept` do the same from the app; `Hunks` lists the changes, and `Stats` counts the lines added and deleted. * `LineSelection` lets the numbers of lines be clicked, and dragged or Shift-clicked, to select lines, which `OnLineSelection` reports and `SelectedLines` and `SetSelectedLines` read and set, as a link to lines of a review does. * `OnGutterButton` shows a + on the gutter of the line under the pointer, as to comment on it, and is called with the line when it is clicked. * `Annotations` leave room under lines for what `RenderAnnotation` builds there, as the comments of a review, each as high as it asks; the other side of a split view leaves the room empty, so that the lines stay aligned. ```go app.diff.HunkActions = true app.diff.OnGutterButton = func(r editor.DiffLineRange) { app.comments = append(app.comments, comment{side: r.Side, line: r.End}) } app.diff.Annotations = app.diff.Annotations[:0] for i, cm := range app.comments { app.diff.Annotations = append(app.diff.Annotations, editor.DiffAnnotation{Side: cm.side, Line: cm.line, Height: 72, Key: i}) } app.diff.RenderAnnotation = func(c *ui.Context, a editor.DiffAnnotation) { app.commentView(c, a.Key.(int)) } ``` `ActiveSide` is the side that has the keyboard, or had it last: the new side until the old one of a split view has it. `Cursor` and `CursorPos` return the offset and the position of its newest caret, as the code editor's do, and `CurrentHunk` the change the caret is in, with `inside` true, or else the last before it, -1 before the first, as "2 of 5" counts them; `GoToHunk` moves that caret, so Next Change can step from it. `Run` runs a command in its editor as its key would, and `Find` opens its find bar on a query, as an app's menu items do where the menu takes the keys first: ```go if ui.Button(c, "Find").Clicked() { app.diff.Run(editor.Find) } i, inside := app.diff.CurrentHunk() n := len(app.diff.Hunks()) label := fmt.Sprintf("%d changes", n) // before the first if i >= 0 { label = fmt.Sprintf("%d of %d", i+1, n) } ui.Text(c, label) if ui.Button(c, "Next change").Clicked() { app.diff.GoToHunk(i + 1) } if inside && ui.Button(c, "Revert this change").Clicked() { app.diff.Revert(i) } ``` ## Styling `Theme` colors the diff as it does the [code editor](https://mygo.egoist.dev/docs/ui/code-editor.md#themes), changed lines included. The parts around the lines are the app's to build, as Pierre's diffs render them: `RenderSeparator`, `RenderHunkActions` and `RenderGutterButton` are given the element the viewer places and what the part shows and does, and the viewer's own looks are `DefaultSeparator`, `DefaultHunkActions` and `DefaultGutterButton`, which they can call. `RenderFindBar` and `RenderGoToLine` build the bars of the sides' editors, as the code editor's do. ```go app.diff.RenderSeparator = func(c *ui.Context, sep ui.Element, s *editor.DiffSeparator) { sep.Padding(4).Children(func() { if s.Lines == 0 { // a patch's hunk ui.Text(c, s.Header).Font("monospace") return } if ui.Button(c, fmt.Sprintf("Show %d hidden lines", s.Lines)).Clicked() { s.ExpandAll() } }) } app.diff.RenderHunkActions = func(c *ui.Context, bar ui.Element, a *editor.DiffHunkActions) { bar.Gap(4).Children(func() { if ui.Button(c, "Reject").Clicked() { a.Revert() } if ui.PrimaryButton(c, "Accept").Clicked() { a.Keep() } }) } ``` * A `DiffSeparator` spans the viewer, both sides of a split one, 32 DIPs high. It collapses `Lines` unchanged lines, which `ExpandUp`, `ExpandDown` and `ExpandAll` show, `Step` lines at a time; `First` and `Last` mark those before the first change and after the last, which expand one way. A patch's hunk has a separator of no lines, with its `Header`. * `DiffHunkActions` sit at the top right of the change under the pointer, or the caret's: `Index` and `Hunk` say which, and `Revert` and `Keep` act. * The gutter button is a button on the gutter of the line under the pointer, which calls `OnGutterButton` when clicked; its render function gives it a look and a label. ## Patches `editor.ParsePatch` reads the files a unified diff changes, as `git diff` and `diff -u` print them, with renames, modes and new and deleted files; `FilePatch.Apply` applies one to the old file's text. `SetPatch` shows a file's patch without the files, as a pull request's diff arrives: its hunks' lines, numbered as in the files, each hunk under its header. ```go files, err := editor.ParsePatch(output) // of git diff if err != nil { return err } for _, f := range files { d := &editor.DiffState{} d.SetPatch(f) app.files = append(app.files, d) } ``` ## Accessibility Assistive technology sees each side as a text field, "Old text" and "New text", the old one read only, with its text and selection. A separator is a group named by the lines it collapses, with buttons expanding them up, down or all; Revert and Keep are buttons, "Revert change" and "Keep change". These names, and what the viewer writes ("4 unmodified lines"), are in the window's language ([MyGo's own strings](https://mygo.egoist.dev/docs/i18n.md#mygos-own-strings)).