merge.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. (function(mod) {
  2. if (typeof exports == "object" && typeof module == "object") // CommonJS
  3. mod(require("../../lib/codemirror"));
  4. else if (typeof define == "function" && define.amd) // AMD
  5. define(["../../lib/codemirror"], mod);
  6. else // Plain browser env
  7. mod(CodeMirror);
  8. })(function(CodeMirror) {
  9. "use strict";
  10. // declare global: diff_match_patch, DIFF_INSERT, DIFF_DELETE, DIFF_EQUAL
  11. var Pos = CodeMirror.Pos;
  12. var svgNS = "http://www.w3.org/2000/svg";
  13. function DiffView(mv, type) {
  14. this.mv = mv;
  15. this.type = type;
  16. this.classes = type == "left"
  17. ? {chunk: "CodeMirror-merge-l-chunk",
  18. start: "CodeMirror-merge-l-chunk-start",
  19. end: "CodeMirror-merge-l-chunk-end",
  20. insert: "CodeMirror-merge-l-inserted",
  21. del: "CodeMirror-merge-l-deleted",
  22. connect: "CodeMirror-merge-l-connect"}
  23. : {chunk: "CodeMirror-merge-r-chunk",
  24. start: "CodeMirror-merge-r-chunk-start",
  25. end: "CodeMirror-merge-r-chunk-end",
  26. insert: "CodeMirror-merge-r-inserted",
  27. del: "CodeMirror-merge-r-deleted",
  28. connect: "CodeMirror-merge-r-connect"};
  29. }
  30. DiffView.prototype = {
  31. constructor: DiffView,
  32. init: function(pane, orig, options) {
  33. this.edit = this.mv.edit;
  34. this.orig = CodeMirror(pane, copyObj({value: orig, readOnly: true}, copyObj(options)));
  35. this.diff = getDiff(asString(orig), asString(options.value));
  36. this.diffOutOfDate = false;
  37. this.showDifferences = options.showDifferences !== false;
  38. this.forceUpdate = registerUpdate(this);
  39. setScrollLock(this, true, false);
  40. registerScroll(this);
  41. },
  42. setShowDifferences: function(val) {
  43. val = val !== false;
  44. if (val != this.showDifferences) {
  45. this.showDifferences = val;
  46. this.forceUpdate("full");
  47. }
  48. }
  49. };
  50. function registerUpdate(dv) {
  51. var edit = {from: 0, to: 0, marked: []};
  52. var orig = {from: 0, to: 0, marked: []};
  53. var debounceChange;
  54. function update(mode) {
  55. if (mode == "full") {
  56. if (dv.svg) clear(dv.svg);
  57. clear(dv.copyButtons);
  58. clearMarks(dv.edit, edit.marked, dv.classes);
  59. clearMarks(dv.orig, orig.marked, dv.classes);
  60. edit.from = edit.to = orig.from = orig.to = 0;
  61. }
  62. if (dv.diffOutOfDate) {
  63. dv.diff = getDiff(dv.orig.getValue(), dv.edit.getValue());
  64. dv.diffOutOfDate = false;
  65. CodeMirror.signal(dv.edit, "updateDiff", dv.diff);
  66. }
  67. if (dv.showDifferences) {
  68. updateMarks(dv.edit, dv.diff, edit, DIFF_INSERT, dv.classes);
  69. updateMarks(dv.orig, dv.diff, orig, DIFF_DELETE, dv.classes);
  70. }
  71. drawConnectors(dv);
  72. }
  73. function set(slow) {
  74. clearTimeout(debounceChange);
  75. debounceChange = setTimeout(update, slow == true ? 250 : 100);
  76. }
  77. function change() {
  78. if (!dv.diffOutOfDate) {
  79. dv.diffOutOfDate = true;
  80. edit.from = edit.to = orig.from = orig.to = 0;
  81. }
  82. set(true);
  83. }
  84. dv.edit.on("change", change);
  85. dv.orig.on("change", change);
  86. dv.edit.on("markerAdded", set);
  87. dv.edit.on("markerCleared", set);
  88. dv.orig.on("markerAdded", set);
  89. dv.orig.on("markerCleared", set);
  90. dv.edit.on("viewportChange", set);
  91. dv.orig.on("viewportChange", set);
  92. update();
  93. return update;
  94. }
  95. function registerScroll(dv) {
  96. dv.edit.on("scroll", function() {
  97. syncScroll(dv, DIFF_INSERT) && drawConnectors(dv);
  98. });
  99. dv.orig.on("scroll", function() {
  100. syncScroll(dv, DIFF_DELETE) && drawConnectors(dv);
  101. });
  102. }
  103. function syncScroll(dv, type) {
  104. // Change handler will do a refresh after a timeout when diff is out of date
  105. if (dv.diffOutOfDate) return false;
  106. if (!dv.lockScroll) return true;
  107. var editor, other, now = +new Date;
  108. if (type == DIFF_INSERT) { editor = dv.edit; other = dv.orig; }
  109. else { editor = dv.orig; other = dv.edit; }
  110. // Don't take action if the position of this editor was recently set
  111. // (to prevent feedback loops)
  112. if (editor.state.scrollSetBy == dv && (editor.state.scrollSetAt || 0) + 50 > now) return false;
  113. var sInfo = editor.getScrollInfo(), halfScreen = .5 * sInfo.clientHeight, midY = sInfo.top + halfScreen;
  114. var mid = editor.lineAtHeight(midY, "local");
  115. var around = chunkBoundariesAround(dv.diff, mid, type == DIFF_INSERT);
  116. var off = getOffsets(editor, type == DIFF_INSERT ? around.edit : around.orig);
  117. var offOther = getOffsets(other, type == DIFF_INSERT ? around.orig : around.edit);
  118. var ratio = (midY - off.top) / (off.bot - off.top);
  119. var targetPos = (offOther.top - halfScreen) + ratio * (offOther.bot - offOther.top);
  120. var botDist, mix;
  121. // Some careful tweaking to make sure no space is left out of view
  122. // when scrolling to top or bottom.
  123. if (targetPos > sInfo.top && (mix = sInfo.top / halfScreen) < 1) {
  124. targetPos = targetPos * mix + sInfo.top * (1 - mix);
  125. } else if ((botDist = sInfo.height - sInfo.clientHeight - sInfo.top) < halfScreen) {
  126. var otherInfo = other.getScrollInfo();
  127. var botDistOther = otherInfo.height - otherInfo.clientHeight - targetPos;
  128. if (botDistOther > botDist && (mix = botDist / halfScreen) < 1)
  129. targetPos = targetPos * mix + (otherInfo.height - otherInfo.clientHeight - botDist) * (1 - mix);
  130. }
  131. other.scrollTo(sInfo.left, targetPos);
  132. other.state.scrollSetAt = now;
  133. other.state.scrollSetBy = dv;
  134. return true;
  135. }
  136. function getOffsets(editor, around) {
  137. var bot = around.after;
  138. if (bot == null) bot = editor.lastLine() + 1;
  139. return {top: editor.heightAtLine(around.before || 0, "local"),
  140. bot: editor.heightAtLine(bot, "local")};
  141. }
  142. function setScrollLock(dv, val, action) {
  143. dv.lockScroll = val;
  144. if (val && action != false) syncScroll(dv, DIFF_INSERT) && drawConnectors(dv);
  145. dv.lockButton.innerHTML = val ? "\u21db\u21da" : "\u21db&nbsp;&nbsp;\u21da";
  146. }
  147. // Updating the marks for editor content
  148. function clearMarks(editor, arr, classes) {
  149. for (var i = 0; i < arr.length; ++i) {
  150. var mark = arr[i];
  151. if (mark instanceof CodeMirror.TextMarker) {
  152. mark.clear();
  153. } else {
  154. editor.removeLineClass(mark, "background", classes.chunk);
  155. editor.removeLineClass(mark, "background", classes.start);
  156. editor.removeLineClass(mark, "background", classes.end);
  157. }
  158. }
  159. arr.length = 0;
  160. }
  161. // FIXME maybe add a margin around viewport to prevent too many updates
  162. function updateMarks(editor, diff, state, type, classes) {
  163. var vp = editor.getViewport();
  164. editor.operation(function() {
  165. if (state.from == state.to || vp.from - state.to > 20 || state.from - vp.to > 20) {
  166. clearMarks(editor, state.marked, classes);
  167. markChanges(editor, diff, type, state.marked, vp.from, vp.to, classes);
  168. state.from = vp.from; state.to = vp.to;
  169. } else {
  170. if (vp.from < state.from) {
  171. markChanges(editor, diff, type, state.marked, vp.from, state.from, classes);
  172. state.from = vp.from;
  173. }
  174. if (vp.to > state.to) {
  175. markChanges(editor, diff, type, state.marked, state.to, vp.to, classes);
  176. state.to = vp.to;
  177. }
  178. }
  179. });
  180. }
  181. function markChanges(editor, diff, type, marks, from, to, classes) {
  182. var pos = Pos(0, 0);
  183. var top = Pos(from, 0), bot = editor.clipPos(Pos(to - 1));
  184. var cls = type == DIFF_DELETE ? classes.del : classes.insert;
  185. function markChunk(start, end) {
  186. var bfrom = Math.max(from, start), bto = Math.min(to, end);
  187. for (var i = bfrom; i < bto; ++i) {
  188. var line = editor.addLineClass(i, "background", classes.chunk);
  189. if (i == start) editor.addLineClass(line, "background", classes.start);
  190. if (i == end - 1) editor.addLineClass(line, "background", classes.end);
  191. marks.push(line);
  192. }
  193. // When the chunk is empty, make sure a horizontal line shows up
  194. if (start == end && bfrom == end && bto == end) {
  195. if (bfrom)
  196. marks.push(editor.addLineClass(bfrom - 1, "background", classes.end));
  197. else
  198. marks.push(editor.addLineClass(bfrom, "background", classes.start));
  199. }
  200. }
  201. var chunkStart = 0;
  202. for (var i = 0; i < diff.length; ++i) {
  203. var part = diff[i], tp = part[0], str = part[1];
  204. if (tp == DIFF_EQUAL) {
  205. var cleanFrom = pos.line + (startOfLineClean(diff, i) ? 0 : 1);
  206. moveOver(pos, str);
  207. var cleanTo = pos.line + (endOfLineClean(diff, i) ? 1 : 0);
  208. if (cleanTo > cleanFrom) {
  209. if (i) markChunk(chunkStart, cleanFrom);
  210. chunkStart = cleanTo;
  211. }
  212. } else {
  213. if (tp == type) {
  214. var end = moveOver(pos, str, true);
  215. var a = posMax(top, pos), b = posMin(bot, end);
  216. if (!posEq(a, b))
  217. marks.push(editor.markText(a, b, {className: cls}));
  218. pos = end;
  219. }
  220. }
  221. }
  222. if (chunkStart <= pos.line) markChunk(chunkStart, pos.line + 1);
  223. }
  224. // Updating the gap between editor and original
  225. function drawConnectors(dv) {
  226. if (!dv.showDifferences) return;
  227. if (dv.svg) {
  228. clear(dv.svg);
  229. var w = dv.gap.offsetWidth;
  230. attrs(dv.svg, "width", w, "height", dv.gap.offsetHeight);
  231. }
  232. clear(dv.copyButtons);
  233. var flip = dv.type == "left";
  234. var vpEdit = dv.edit.getViewport(), vpOrig = dv.orig.getViewport();
  235. var sTopEdit = dv.edit.getScrollInfo().top, sTopOrig = dv.orig.getScrollInfo().top;
  236. iterateChunks(dv.diff, function(topOrig, botOrig, topEdit, botEdit) {
  237. if (topEdit > vpEdit.to || botEdit < vpEdit.from ||
  238. topOrig > vpOrig.to || botOrig < vpOrig.from)
  239. return;
  240. var topLpx = dv.orig.heightAtLine(topOrig, "local") - sTopOrig, top = topLpx;
  241. if (dv.svg) {
  242. var topRpx = dv.edit.heightAtLine(topEdit, "local") - sTopEdit;
  243. if (flip) { var tmp = topLpx; topLpx = topRpx; topRpx = tmp; }
  244. var botLpx = dv.orig.heightAtLine(botOrig, "local") - sTopOrig;
  245. var botRpx = dv.edit.heightAtLine(botEdit, "local") - sTopEdit;
  246. if (flip) { var tmp = botLpx; botLpx = botRpx; botRpx = tmp; }
  247. var curveTop = " C " + w/2 + " " + topRpx + " " + w/2 + " " + topLpx + " " + (w + 2) + " " + topLpx;
  248. var curveBot = " C " + w/2 + " " + botLpx + " " + w/2 + " " + botRpx + " -1 " + botRpx;
  249. attrs(dv.svg.appendChild(document.createElementNS(svgNS, "path")),
  250. "d", "M -1 " + topRpx + curveTop + " L " + (w + 2) + " " + botLpx + curveBot + " z",
  251. "class", dv.classes.connect);
  252. }
  253. var copy = dv.copyButtons.appendChild(elt("div", dv.type == "left" ? "\u21dd" : "\u21dc",
  254. "CodeMirror-merge-copy"));
  255. copy.title = "Revert chunk";
  256. copy.chunk = {topEdit: topEdit, botEdit: botEdit, topOrig: topOrig, botOrig: botOrig};
  257. copy.style.top = top + "px";
  258. });
  259. }
  260. function copyChunk(dv, chunk) {
  261. if (dv.diffOutOfDate) return;
  262. dv.edit.replaceRange(dv.orig.getRange(Pos(chunk.topOrig, 0), Pos(chunk.botOrig, 0)),
  263. Pos(chunk.topEdit, 0), Pos(chunk.botEdit, 0));
  264. }
  265. // Merge view, containing 0, 1, or 2 diff views.
  266. var MergeView = CodeMirror.MergeView = function(node, options) {
  267. if (!(this instanceof MergeView)) return new MergeView(node, options);
  268. var origLeft = options.origLeft, origRight = options.origRight == null ? options.orig : options.origRight;
  269. var hasLeft = origLeft != null, hasRight = origRight != null;
  270. var panes = 1 + (hasLeft ? 1 : 0) + (hasRight ? 1 : 0);
  271. var wrap = [], left = this.left = null, right = this.right = null;
  272. if (hasLeft) {
  273. left = this.left = new DiffView(this, "left");
  274. var leftPane = elt("div", null, "CodeMirror-merge-pane");
  275. wrap.push(leftPane);
  276. wrap.push(buildGap(left));
  277. }
  278. var editPane = elt("div", null, "CodeMirror-merge-pane");
  279. wrap.push(editPane);
  280. if (hasRight) {
  281. right = this.right = new DiffView(this, "right");
  282. wrap.push(buildGap(right));
  283. var rightPane = elt("div", null, "CodeMirror-merge-pane");
  284. wrap.push(rightPane);
  285. }
  286. (hasRight ? rightPane : editPane).className += " CodeMirror-merge-pane-rightmost";
  287. wrap.push(elt("div", null, null, "height: 0; clear: both;"));
  288. var wrapElt = this.wrap = node.appendChild(elt("div", wrap, "CodeMirror-merge CodeMirror-merge-" + panes + "pane"));
  289. this.edit = CodeMirror(editPane, copyObj(options));
  290. if (left) left.init(leftPane, origLeft, options);
  291. if (right) right.init(rightPane, origRight, options);
  292. var onResize = function() {
  293. if (left) drawConnectors(left);
  294. if (right) drawConnectors(right);
  295. };
  296. CodeMirror.on(window, "resize", onResize);
  297. var resizeInterval = setInterval(function() {
  298. for (var p = wrapElt.parentNode; p && p != document.body; p = p.parentNode) {}
  299. if (!p) { clearInterval(resizeInterval); CodeMirror.off(window, "resize", onResize); }
  300. }, 5000);
  301. };
  302. function buildGap(dv) {
  303. var lock = dv.lockButton = elt("div", null, "CodeMirror-merge-scrolllock");
  304. lock.title = "Toggle locked scrolling";
  305. var lockWrap = elt("div", [lock], "CodeMirror-merge-scrolllock-wrap");
  306. CodeMirror.on(lock, "click", function() { setScrollLock(dv, !dv.lockScroll); });
  307. dv.copyButtons = elt("div", null, "CodeMirror-merge-copybuttons-" + dv.type);
  308. CodeMirror.on(dv.copyButtons, "click", function(e) {
  309. var node = e.target || e.srcElement;
  310. if (node.chunk) copyChunk(dv, node.chunk);
  311. });
  312. var gapElts = [dv.copyButtons, lockWrap];
  313. var svg = document.createElementNS && document.createElementNS(svgNS, "svg");
  314. if (svg && !svg.createSVGRect) svg = null;
  315. dv.svg = svg;
  316. if (svg) gapElts.push(svg);
  317. return dv.gap = elt("div", gapElts, "CodeMirror-merge-gap");
  318. }
  319. MergeView.prototype = {
  320. constuctor: MergeView,
  321. editor: function() { return this.edit; },
  322. rightOriginal: function() { return this.right && this.right.orig; },
  323. leftOriginal: function() { return this.left && this.left.orig; },
  324. setShowDifferences: function(val) {
  325. if (this.right) this.right.setShowDifferences(val);
  326. if (this.left) this.left.setShowDifferences(val);
  327. },
  328. rightChunks: function() {
  329. return this.right && getChunks(this.right.diff);
  330. },
  331. leftChunks: function() {
  332. return this.left && getChunks(this.left.diff);
  333. }
  334. };
  335. function asString(obj) {
  336. if (typeof obj == "string") return obj;
  337. else return obj.getValue();
  338. }
  339. // Operations on diffs
  340. var dmp = new diff_match_patch();
  341. function getDiff(a, b) {
  342. var diff = dmp.diff_main(a, b);
  343. dmp.diff_cleanupSemantic(diff);
  344. // The library sometimes leaves in empty parts, which confuse the algorithm
  345. for (var i = 0; i < diff.length; ++i) {
  346. var part = diff[i];
  347. if (!part[1]) {
  348. diff.splice(i--, 1);
  349. } else if (i && diff[i - 1][0] == part[0]) {
  350. diff.splice(i--, 1);
  351. diff[i][1] += part[1];
  352. }
  353. }
  354. return diff;
  355. }
  356. function iterateChunks(diff, f) {
  357. var startEdit = 0, startOrig = 0;
  358. var edit = Pos(0, 0), orig = Pos(0, 0);
  359. for (var i = 0; i < diff.length; ++i) {
  360. var part = diff[i], tp = part[0];
  361. if (tp == DIFF_EQUAL) {
  362. var startOff = startOfLineClean(diff, i) ? 0 : 1;
  363. var cleanFromEdit = edit.line + startOff, cleanFromOrig = orig.line + startOff;
  364. moveOver(edit, part[1], null, orig);
  365. var endOff = endOfLineClean(diff, i) ? 1 : 0;
  366. var cleanToEdit = edit.line + endOff, cleanToOrig = orig.line + endOff;
  367. if (cleanToEdit > cleanFromEdit) {
  368. if (i) f(startOrig, cleanFromOrig, startEdit, cleanFromEdit);
  369. startEdit = cleanToEdit; startOrig = cleanToOrig;
  370. }
  371. } else {
  372. moveOver(tp == DIFF_INSERT ? edit : orig, part[1]);
  373. }
  374. }
  375. if (startEdit <= edit.line || startOrig <= orig.line)
  376. f(startOrig, orig.line + 1, startEdit, edit.line + 1);
  377. }
  378. function getChunks(diff) {
  379. var collect = [];
  380. iterateChunks(diff, function(topOrig, botOrig, topEdit, botEdit) {
  381. collect.push({origFrom: topOrig, origTo: botOrig,
  382. editFrom: topEdit, editTo: botEdit});
  383. });
  384. return collect;
  385. }
  386. function endOfLineClean(diff, i) {
  387. if (i == diff.length - 1) return true;
  388. var next = diff[i + 1][1];
  389. if (next.length == 1 || next.charCodeAt(0) != 10) return false;
  390. if (i == diff.length - 2) return true;
  391. next = diff[i + 2][1];
  392. return next.length > 1 && next.charCodeAt(0) == 10;
  393. }
  394. function startOfLineClean(diff, i) {
  395. if (i == 0) return true;
  396. var last = diff[i - 1][1];
  397. if (last.charCodeAt(last.length - 1) != 10) return false;
  398. if (i == 1) return true;
  399. last = diff[i - 2][1];
  400. return last.charCodeAt(last.length - 1) == 10;
  401. }
  402. function chunkBoundariesAround(diff, n, nInEdit) {
  403. var beforeE, afterE, beforeO, afterO;
  404. iterateChunks(diff, function(fromOrig, toOrig, fromEdit, toEdit) {
  405. var fromLocal = nInEdit ? fromEdit : fromOrig;
  406. var toLocal = nInEdit ? toEdit : toOrig;
  407. if (afterE == null) {
  408. if (fromLocal > n) { afterE = fromEdit; afterO = fromOrig; }
  409. else if (toLocal > n) { afterE = toEdit; afterO = toOrig; }
  410. }
  411. if (toLocal <= n) { beforeE = toEdit; beforeO = toOrig; }
  412. else if (fromLocal <= n) { beforeE = fromEdit; beforeO = fromOrig; }
  413. });
  414. return {edit: {before: beforeE, after: afterE}, orig: {before: beforeO, after: afterO}};
  415. }
  416. // General utilities
  417. function elt(tag, content, className, style) {
  418. var e = document.createElement(tag);
  419. if (className) e.className = className;
  420. if (style) e.style.cssText = style;
  421. if (typeof content == "string") e.appendChild(document.createTextNode(content));
  422. else if (content) for (var i = 0; i < content.length; ++i) e.appendChild(content[i]);
  423. return e;
  424. }
  425. function clear(node) {
  426. for (var count = node.childNodes.length; count > 0; --count)
  427. node.removeChild(node.firstChild);
  428. }
  429. function attrs(elt) {
  430. for (var i = 1; i < arguments.length; i += 2)
  431. elt.setAttribute(arguments[i], arguments[i+1]);
  432. }
  433. function copyObj(obj, target) {
  434. if (!target) target = {};
  435. for (var prop in obj) if (obj.hasOwnProperty(prop)) target[prop] = obj[prop];
  436. return target;
  437. }
  438. function moveOver(pos, str, copy, other) {
  439. var out = copy ? Pos(pos.line, pos.ch) : pos, at = 0;
  440. for (;;) {
  441. var nl = str.indexOf("\n", at);
  442. if (nl == -1) break;
  443. ++out.line;
  444. if (other) ++other.line;
  445. at = nl + 1;
  446. }
  447. out.ch = (at ? 0 : out.ch) + (str.length - at);
  448. if (other) other.ch = (at ? 0 : other.ch) + (str.length - at);
  449. return out;
  450. }
  451. function posMin(a, b) { return (a.line - b.line || a.ch - b.ch) < 0 ? a : b; }
  452. function posMax(a, b) { return (a.line - b.line || a.ch - b.ch) > 0 ? a : b; }
  453. function posEq(a, b) { return a.line == b.line && a.ch == b.ch; }
  454. });