From b5561211ddfbea3e02e8c6c30587357c3edf3fee Mon Sep 17 00:00:00 2001 From: Jamie Peabody Date: Sat, 1 Jan 2022 16:37:42 +0000 Subject: [PATCH] chore: removed scroll to first change and added example --- examples/app.js | 7 ++++++- examples/index.html | 3 +++ examples/simple.html | 4 ++-- src/diff-view.js | 49 ++++++++++++++++++++++---------------------- src/mergely.js | 16 ++++++++------- 5 files changed, 44 insertions(+), 35 deletions(-) diff --git a/examples/app.js b/examples/app.js index a759198..21ea38b 100644 --- a/examples/app.js +++ b/examples/app.js @@ -19,7 +19,7 @@ document.onreadystatechange = function () { return; } - new Mergely('#mergely', { + const doc = new Mergely('#mergely', { license: 'lgpl', ignorews: true, wrap_lines: true, @@ -38,4 +38,9 @@ document.onreadystatechange = function () { }, _debug: '' }); + + // On init, scroll to first diff + doc.once('updated', () => { + doc.scrollToDiff('next'); + }); }; diff --git a/examples/index.html b/examples/index.html index dc4a185..54b54ff 100644 --- a/examples/index.html +++ b/examples/index.html @@ -28,6 +28,9 @@ This example demonstrates the minimum amount of code required to use Mergely.
  • full-page.html
    • +
  • + scroll-to-first-change.html +
    • diff --git a/examples/simple.html b/examples/simple.html index 8cead5a..d477e71 100644 --- a/examples/simple.html +++ b/examples/simple.html @@ -7,8 +7,8 @@ This example demonstrates the minimum amount of code required to use Mergely. Mergely - Simple Example - - + + diff --git a/src/diff-view.js b/src/diff-view.js index 235d4f3..39e5cf6 100644 --- a/src/diff-view.js +++ b/src/diff-view.js @@ -45,10 +45,10 @@ TODO: For some reason ignore-whitespace will mark the "red" differently When wrap_lines is false, the CM editor grows, screwing up the layout Fix the overflow for the rendered diff view -Remove the jump to first diff (instead, make it example) Introduce an async render pipeline as it's currently blocking UI Merge button with multiple editors Delete gutter_height (and any unused values) +Fix performance issue where scroll-to-first-change seems to take a lot of time. */ const NOTICES = [ @@ -448,28 +448,31 @@ CodeMirrorDiffView.prototype.bind = function(el) { div.style.visibility = 'hidden'; } } + if (NOTICES.indexOf(this.settings.license) < 0) { - const noticeTypes = { - 'lgpl': 'GNU LGPL v3.0', - 'gpl': 'GNU GPL v3.0', - 'mpl': 'MPL 1.1' - }; - const notice = noticeTypes[this.settings.license]; - if (!notice) { - notice = noticeTypes.lgpl; - } - const editor = this._queryElement('.mergely-editor'); - const splash = htmlToElement(getSplash({ - notice, - left: (editor.offsetWidth - 300) / 2 - })); - editor.addEventListener('click', () => { - splash.style.visibility = 'hidden'; - splash.style.opacity = '0'; - splash.style.transition = `visibility 0s 100ms, opacity 100ms linear`; - setTimeout(() => splash.remove(), 110); + el.addEventListener('updated', () => { + const noticeTypes = { + 'lgpl': 'GNU LGPL v3.0', + 'gpl': 'GNU GPL v3.0', + 'mpl': 'MPL 1.1' + }; + const notice = noticeTypes[this.settings.license]; + if (!notice) { + notice = noticeTypes.lgpl; + } + const editor = this._queryElement('.mergely-editor'); + const splash = htmlToElement(getSplash({ + notice, + left: (editor.offsetWidth - 300) / 2 + })); + editor.addEventListener('click', () => { + splash.style.visibility = 'hidden'; + splash.style.opacity = '0'; + splash.style.transition = `visibility 0s 100ms, opacity 100ms linear`; + setTimeout(() => splash.remove(), 110); + }, { once: true }); + el.append(splash); }, { once: true }); - el.append(splash); } // check initialization @@ -521,7 +524,6 @@ CodeMirrorDiffView.prototype.bind = function(el) { this.editor.rhs.getDoc().setValue(value); }.bind(this)); } - // this._changing(); this.editor.lhs.on('change', (instance, ev) => { if (!this.settings.autoupdate) { @@ -835,9 +837,6 @@ CodeMirrorDiffView.prototype._renderChanges = function() { // go to first difference on start-up where values are provided in // settings. this._current_diff = 0; - if (this._initializing) { - this.scrollTo('lhs', this.changes[0]['lhs-line-from']); - } } this._markup_changes(this.changes); this.trace('change', 'markup time', Timer.stop()); diff --git a/src/mergely.js b/src/mergely.js index f50a881..c081ee2 100644 --- a/src/mergely.js +++ b/src/mergely.js @@ -6,7 +6,6 @@ class Mergely { CodeMirror }); this.el = element; - this._diffView.bind(element); const methods = [ 'clear', 'cm', @@ -33,6 +32,9 @@ class Mergely { this._listeners = []; this.addEventListener = element.addEventListener.bind(element); this.removeEventListener = element.removeEventListener.bind(element); + // Use `setImmediate` so that clients have opportunity to bind event + // handlers. + setImmediate(() => this._diffView.bind(element)); } unbind() { @@ -49,14 +51,14 @@ class Mergely { mergelyUnregister() { } - on(event, listener) { - this._listeners.push([ event, listener ]); - this.addEventListener(event, listener); + on(event, handler) { + this._listeners.push([ event, handler ]); + this.addEventListener(event, handler); } - once(event, listener) { - this._listeners.push([ event, listener ]); - this.addEventListener(event, listener, { once: true }); + once(event, handler) { + this._listeners.push([ event, handler ]); + this.addEventListener(event, handler, { once: true }); } /**