1 (function(root, factory) {
2 if (typeof define === 'function' && define.amd) {
4 } else if (typeof exports === 'object') {
5 module.exports = factory(require());
7 root.AceDiff = factory(root);
12 var Range = require('ace/range').Range;
18 EDITOR_RIGHT: 'right',
22 SVG_NS: 'http://www.w3.org/2000/svg',
23 DIFF_GRANULARITY_SPECIFIC: 'specific',
24 DIFF_GRANULARITY_BROAD: 'broad'
28 function AceDiff(options) {
31 extend(true, this.options, {
34 diffGranularity: C.DIFF_GRANULARITY_BROAD,
35 lockScrolling: false, // not implemented yet
40 id: 'acediff-left-editor',
48 id: 'acediff-right-editor',
56 gutterID: 'acediff-gutter',
58 connector: 'acediff-connector',
59 newCodeConnectorLink: 'acediff-new-code-connector-copy',
60 newCodeConnectorLinkContent: '→',
61 deletedCodeConnectorLink: 'acediff-deleted-code-connector-copy',
62 deletedCodeConnectorLinkContent: '←',
63 copyRightContainer: 'acediff-copy-right',
64 copyLeftContainer: 'acediff-copy-left'
69 // instantiate the editors in an internal data structure that will store a little info about the diffs and
73 ace: ace.edit(this.options.left.id),
78 ace: ace.edit(this.options.right.id),
85 addEventHandlers(this);
87 this.lineHeight = this.editors.left.ace.renderer.lineHeight; // assumption: both editors have same line heights
90 this.editors.left.ace.getSession().setMode(getMode(this, C.EDITOR_LEFT));
91 this.editors.right.ace.getSession().setMode(getMode(this, C.EDITOR_RIGHT));
92 this.editors.left.ace.setReadOnly(!this.options.left.editable);
93 this.editors.right.ace.setReadOnly(!this.options.right.editable);
94 this.editors.left.ace.setTheme(getTheme(this, C.EDITOR_LEFT));
95 this.editors.right.ace.setTheme(getTheme(this, C.EDITOR_RIGHT));
97 createCopyContainers(this);
100 // if the data is being supplied by an option, set the editor values now
101 if (this.options.left.content) {
102 this.editors.left.ace.setValue(this.options.left.content, -1);
104 if (this.options.right.content) {
105 this.editors.right.ace.setValue(this.options.right.content, -1);
108 // store the visible height of the editors (assumed the same)
109 this.editors.editorHeight = getEditorHeight(this);
116 AceDiff.prototype = {
118 // allows on-the-fly changes to the AceDiff instance settings
119 setOptions: function(options) {
120 extend(true, this.options, options);
124 getNumDiffs: function() {
125 return this.diffs.length;
128 // exposes the Ace editors in case the dev needs it
129 getEditors: function() {
131 left: this.editors.left.ace,
132 right: this.editors.right.ace
136 // our main diffing function. I actually don't think this needs to exposed: it's called automatically,
137 // but just to be safe, it's included
139 var dmp = new diff_match_patch();
140 var val1 = this.editors.left.ace.getSession().getValue();
141 var val2 = this.editors.right.ace.getSession().getValue();
142 var diff = dmp.diff_main(val2, val1);
143 dmp.diff_cleanupSemantic(diff);
145 this.editors.left.lineLengths = getLineLengths(this.editors.left);
146 this.editors.right.lineLengths = getLineLengths(this.editors.right);
148 // parse the raw diff into something a little more palatable
155 diff.forEach(function(chunk) {
156 var chunkType = chunk[0];
159 // oddly, occasionally the algorithm returns a diff with no changes made
160 if (text.length === 0) {
163 if (chunkType === C.DIFF_EQUAL) {
164 offset.left += text.length;
165 offset.right += text.length;
166 } else if (chunkType === C.DIFF_DELETE) {
167 diffs.push(computeDiff(this, C.DIFF_DELETE, offset.left, offset.right, text));
168 offset.right += text.length;
170 } else if (chunkType === C.DIFF_INSERT) {
171 diffs.push(computeDiff(this, C.DIFF_INSERT, offset.left, offset.right, text));
172 offset.left += text.length;
176 // simplify our computed diffs; this groups together multiple diffs on subsequent lines
177 this.diffs = simplifyDiffs(this, diffs);
179 // if we're dealing with too many diffs, fail silently
180 if (this.diffs.length > this.options.maxDiffs) {
188 destroy: function() {
190 // destroy the two editors
191 var leftValue = this.editors.left.ace.getValue();
192 this.editors.left.ace.destroy();
193 var oldDiv = this.editors.left.ace.container;
194 var newDiv = oldDiv.cloneNode(false);
195 newDiv.textContent = leftValue;
196 oldDiv.parentNode.replaceChild(newDiv, oldDiv);
198 var rightValue = this.editors.right.ace.getValue();
199 this.editors.right.ace.destroy();
200 oldDiv = this.editors.right.ace.container;
201 newDiv = oldDiv.cloneNode(false);
202 newDiv.textContent = rightValue;
203 oldDiv.parentNode.replaceChild(newDiv, oldDiv);
205 document.getElementById(this.options.classes.gutterID).innerHTML = '';
210 function getMode(acediff, editor) {
211 var mode = acediff.options.mode;
212 if (editor === C.EDITOR_LEFT && acediff.options.left.mode !== null) {
213 mode = acediff.options.left.mode;
215 if (editor === C.EDITOR_RIGHT && acediff.options.right.mode !== null) {
216 mode = acediff.options.right.mode;
222 function getTheme(acediff, editor) {
223 var theme = acediff.options.theme;
224 if (editor === C.EDITOR_LEFT && acediff.options.left.theme !== null) {
225 theme = acediff.options.left.theme;
227 if (editor === C.EDITOR_RIGHT && acediff.options.right.theme !== null) {
228 theme = acediff.options.right.theme;
234 function addEventHandlers(acediff) {
235 var leftLastScrollTime = new Date().getTime(),
236 rightLastScrollTime = new Date().getTime(),
239 acediff.editors.left.ace.getSession().on('changeScrollTop', function(scroll) {
240 now = new Date().getTime();
241 if (rightLastScrollTime + 50 < now) {
242 updateGap(acediff, 'left', scroll);
246 acediff.editors.right.ace.getSession().on('changeScrollTop', function(scroll) {
247 now = new Date().getTime();
248 if (leftLastScrollTime + 50 < now) {
249 updateGap(acediff, 'right', scroll);
253 var diff = acediff.diff.bind(acediff);
254 acediff.editors.left.ace.on('change', diff);
255 acediff.editors.right.ace.on('change', diff);
257 if (acediff.options.left.copyLinkEnabled) {
258 on('#' + acediff.options.classes.gutterID, 'click', '.' + acediff.options.classes.newCodeConnectorLink, function(e) {
259 copy(acediff, e, C.LTR);
262 if (acediff.options.right.copyLinkEnabled) {
263 on('#' + acediff.options.classes.gutterID, 'click', '.' + acediff.options.classes.deletedCodeConnectorLink, function(e) {
264 copy(acediff, e, C.RTL);
268 var onResize = debounce(function() {
269 acediff.editors.availableHeight = document.getElementById(acediff.options.left.id).offsetHeight;
271 // TODO this should re-init gutter
275 window.addEventListener('resize', onResize);
279 function copy(acediff, e, dir) {
280 var diffIndex = parseInt(e.target.getAttribute('data-diff-index'), 10);
281 var diff = acediff.diffs[diffIndex];
282 var sourceEditor, targetEditor;
284 var startLine, endLine, targetStartLine, targetEndLine;
286 sourceEditor = acediff.editors.left;
287 targetEditor = acediff.editors.right;
288 startLine = diff.leftStartLine;
289 endLine = diff.leftEndLine;
290 targetStartLine = diff.rightStartLine;
291 targetEndLine = diff.rightEndLine;
293 sourceEditor = acediff.editors.right;
294 targetEditor = acediff.editors.left;
295 startLine = diff.rightStartLine;
296 endLine = diff.rightEndLine;
297 targetStartLine = diff.leftStartLine;
298 targetEndLine = diff.leftEndLine;
301 var contentToInsert = '';
302 for (var i=startLine; i<endLine; i++) {
303 contentToInsert += getLine(sourceEditor, i) + '\n';
306 var startContent = '';
307 for (var i=0; i<targetStartLine; i++) {
308 startContent += getLine(targetEditor, i) + '\n';
312 var totalLines = targetEditor.ace.getSession().getLength();
313 for (var i=targetEndLine; i<totalLines; i++) {
314 endContent += getLine(targetEditor, i);
315 if (i<totalLines-1) {
320 endContent = endContent.replace(/\s*$/, '');
322 // keep track of the scroll height
323 var h = targetEditor.ace.getSession().getScrollTop();
324 targetEditor.ace.getSession().setValue(startContent + contentToInsert + endContent);
325 targetEditor.ace.getSession().setScrollTop(parseInt(h));
331 function getLineLengths(editor) {
332 var lines = editor.ace.getSession().doc.getAllLines();
333 var lineLengths = [];
334 lines.forEach(function(line) {
335 lineLengths.push(line.length + 1); // +1 for the newline char
341 // shows a diff in one of the two editors.
342 function showDiff(acediff, editor, startLine, endLine, className) {
343 var editor = acediff.editors[editor];
345 if (endLine < startLine) { // can this occur? Just in case.
349 var classNames = className + ' ' + ((endLine > startLine) ? 'lines' : 'targetOnly');
350 endLine--; // because endLine is always + 1
352 // to get Ace to highlight the full row we just set the start and end chars to 0 and 1
353 editor.markers.push(editor.ace.session.addMarker(new Range(startLine, 0, endLine, 1), classNames, 'fullLine'));
357 // called onscroll. Updates the gap to ensure the connectors are all lining up
358 function updateGap(acediff, editor, scroll) {
363 // reposition the copy containers containing all the arrows
364 positionCopyContainers(acediff);
368 function clearDiffs(acediff) {
369 acediff.editors.left.markers.forEach(function(marker) {
370 this.editors.left.ace.getSession().removeMarker(marker);
372 acediff.editors.right.markers.forEach(function(marker) {
373 this.editors.right.ace.getSession().removeMarker(marker);
378 function addConnector(acediff, leftStartLine, leftEndLine, rightStartLine, rightEndLine) {
379 var leftScrollTop = acediff.editors.left.ace.getSession().getScrollTop();
380 var rightScrollTop = acediff.editors.right.ace.getSession().getScrollTop();
382 // All connectors, regardless of ltr or rtl have the same point system, even if p1 === p3 or p2 === p4
387 acediff.connectorYOffset = 1;
390 var p1_y = (leftStartLine * acediff.lineHeight) - leftScrollTop;
391 var p2_x = acediff.gutterWidth + 1;
392 var p2_y = rightStartLine * acediff.lineHeight - rightScrollTop;
394 var p3_y = (leftEndLine * acediff.lineHeight) - leftScrollTop + acediff.connectorYOffset;
395 var p4_x = acediff.gutterWidth + 1;
396 var p4_y = (rightEndLine * acediff.lineHeight) - rightScrollTop + acediff.connectorYOffset;
397 var curve1 = getCurve(p1_x, p1_y, p2_x, p2_y);
398 var curve2 = getCurve(p4_x, p4_y, p3_x, p3_y);
400 var verticalLine1 = 'L' + p2_x + ',' + p2_y + ' ' + p4_x + ',' + p4_y;
401 var verticalLine2 = 'L' + p3_x + ',' + p3_y + ' ' + p1_x + ',' + p1_y;
402 var d = curve1 + ' ' + verticalLine1 + ' ' + curve2 + ' ' + verticalLine2;
404 var el = document.createElementNS(C.SVG_NS, 'path');
405 el.setAttribute('d', d);
406 el.setAttribute('class', acediff.options.classes.connector);
407 acediff.gutterSVG.appendChild(el);
411 function addCopyArrows(acediff, info, diffIndex) {
412 if (info.leftEndLine > info.leftStartLine && acediff.options.left.copyLinkEnabled) {
413 var arrow = createArrow({
414 className: acediff.options.classes.newCodeConnectorLink,
415 topOffset: info.leftStartLine * acediff.lineHeight,
416 tooltip: 'Copy to right',
417 diffIndex: diffIndex,
418 arrowContent: acediff.options.classes.newCodeConnectorLinkContent
420 acediff.copyRightContainer.appendChild(arrow);
423 if (info.rightEndLine > info.rightStartLine && acediff.options.right.copyLinkEnabled) {
424 var arrow = createArrow({
425 className: acediff.options.classes.deletedCodeConnectorLink,
426 topOffset: info.rightStartLine * acediff.lineHeight,
427 tooltip: 'Copy to left',
428 diffIndex: diffIndex,
429 arrowContent: acediff.options.classes.deletedCodeConnectorLinkContent
431 acediff.copyLeftContainer.appendChild(arrow);
436 function positionCopyContainers(acediff) {
437 var leftTopOffset = acediff.editors.left.ace.getSession().getScrollTop();
438 var rightTopOffset = acediff.editors.right.ace.getSession().getScrollTop();
440 acediff.copyRightContainer.style.cssText = 'top: ' + (-leftTopOffset) + 'px';
441 acediff.copyLeftContainer.style.cssText = 'top: ' + (-rightTopOffset) + 'px';
446 * This method takes the raw diffing info from the Google lib and returns a nice clean object of the following
455 * Ultimately, that's all the info we need to highlight the appropriate lines in the left + right editor, add the
456 * SVG connectors, and include the appropriate <<, >> arrows.
458 * Note: leftEndLine and rightEndLine are always the start of the NEXT line, so for a single line diff, there will
459 * be 1 separating the startLine and endLine values. So if leftStartLine === leftEndLine or rightStartLine ===
460 * rightEndLine, it means that new content from the other editor is being inserted and a single 1px line will be
463 function computeDiff(acediff, diffType, offsetLeft, offsetRight, diffText) {
466 // this was added in to hack around an oddity with the Google lib. Sometimes it would include a newline
467 // as the first char for a diff, other times not - and it would change when you were typing on-the-fly. This
468 // is used to level things out so the diffs don't appear to shift around
469 var newContentStartsWithNewline = /^\n/.test(diffText);
471 if (diffType === C.DIFF_INSERT) {
473 // pretty confident this returns the right stuff for the left editor: start & end line & char
474 var info = getSingleDiffInfo(acediff.editors.left, offsetLeft, diffText);
476 // this is the ACTUAL undoctored current line in the other editor. It's always right. Doesn't mean it's
477 // going to be used as the start line for the diff though.
478 var currentLineOtherEditor = getLineForCharPosition(acediff.editors.right, offsetRight);
479 var numCharsOnLineOtherEditor = getCharsOnLine(acediff.editors.right, currentLineOtherEditor);
480 var numCharsOnLeftEditorStartLine = getCharsOnLine(acediff.editors.left, info.startLine);
481 var numCharsOnLine = getCharsOnLine(acediff.editors.left, info.startLine);
483 // this is necessary because if a new diff starts on the FIRST char of the left editor, the diff can comes
484 // back from google as being on the last char of the previous line so we need to bump it up one
485 var rightStartLine = currentLineOtherEditor;
486 if (numCharsOnLine === 0 && newContentStartsWithNewline) {
487 newContentStartsWithNewline = false;
489 if (info.startChar === 0 && isLastChar(acediff.editors.right, offsetRight, newContentStartsWithNewline)) {
490 rightStartLine = currentLineOtherEditor + 1;
493 var sameLineInsert = info.startLine === info.endLine;
495 // whether or not this diff is a plain INSERT into the other editor, or overwrites a line take a little work to
496 // figure out. This feels like the hardest part of the entire script.
500 // dense, but this accommodates two scenarios:
501 // 1. where a completely fresh new line is being inserted in left editor, we want the line on right to stay a 1px line
502 // 2. where a new character is inserted at the start of a newline on the left but the line contains other stuff,
503 // we DO want to make it a full line
504 (info.startChar > 0 || (sameLineInsert && diffText.length < numCharsOnLeftEditorStartLine)) &&
506 // if the right editor line was empty, it's ALWAYS a single line insert [not an OR above?]
507 numCharsOnLineOtherEditor > 0 &&
509 // if the text being inserted starts mid-line
510 (info.startChar < numCharsOnLeftEditorStartLine)) {
515 leftStartLine: info.startLine,
516 leftEndLine: info.endLine + 1,
517 rightStartLine: rightStartLine,
518 rightEndLine: rightStartLine + numRows
522 var info = getSingleDiffInfo(acediff.editors.right, offsetRight, diffText);
524 var currentLineOtherEditor = getLineForCharPosition(acediff.editors.left, offsetLeft);
525 var numCharsOnLineOtherEditor = getCharsOnLine(acediff.editors.left, currentLineOtherEditor);
526 var numCharsOnRightEditorStartLine = getCharsOnLine(acediff.editors.right, info.startLine);
527 var numCharsOnLine = getCharsOnLine(acediff.editors.right, info.startLine);
529 // this is necessary because if a new diff starts on the FIRST char of the left editor, the diff can comes
530 // back from google as being on the last char of the previous line so we need to bump it up one
531 var leftStartLine = currentLineOtherEditor;
532 if (numCharsOnLine === 0 && newContentStartsWithNewline) {
533 newContentStartsWithNewline = false;
535 if (info.startChar === 0 && isLastChar(acediff.editors.left, offsetLeft, newContentStartsWithNewline)) {
536 leftStartLine = currentLineOtherEditor + 1;
539 var sameLineInsert = info.startLine === info.endLine;
543 // dense, but this accommodates two scenarios:
544 // 1. where a completely fresh new line is being inserted in left editor, we want the line on right to stay a 1px line
545 // 2. where a new character is inserted at the start of a newline on the left but the line contains other stuff,
546 // we DO want to make it a full line
547 (info.startChar > 0 || (sameLineInsert && diffText.length < numCharsOnRightEditorStartLine)) &&
549 // if the right editor line was empty, it's ALWAYS a single line insert [not an OR above?]
550 numCharsOnLineOtherEditor > 0 &&
552 // if the text being inserted starts mid-line
553 (info.startChar < numCharsOnRightEditorStartLine)) {
558 leftStartLine: leftStartLine,
559 leftEndLine: leftStartLine + numRows,
560 rightStartLine: info.startLine,
561 rightEndLine: info.endLine + 1
569 // helper to return the startline, endline, startChar and endChar for a diff in a particular editor. Pretty
571 function getSingleDiffInfo(editor, offset, diffString) {
578 var endCharNum = offset + diffString.length;
579 var runningTotal = 0;
580 var startLineSet = false,
583 editor.lineLengths.forEach(function(lineLength, lineIndex) {
584 runningTotal += lineLength;
586 if (!startLineSet && offset < runningTotal) {
587 info.startLine = lineIndex;
588 info.startChar = offset - runningTotal + lineLength;
592 if (!endLineSet && endCharNum <= runningTotal) {
593 info.endLine = lineIndex;
594 info.endChar = endCharNum - runningTotal + lineLength;
599 // if the start char is the final char on the line, it's a newline & we ignore it
600 if (info.startChar > 0 && getCharsOnLine(editor, info.startLine) === info.startChar) {
605 // if the end char is the first char on the line, we don't want to highlight that extra line
606 if (info.endChar === 0) {
610 var endsWithNewline = /\n$/.test(diffString);
611 if (info.startChar > 0 && endsWithNewline) {
619 // note that this and everything else in this script uses 0-indexed row numbers
620 function getCharsOnLine(editor, line) {
621 return getLine(editor, line).length;
625 function getLine(editor, line) {
626 return editor.ace.getSession().doc.getLine(line);
630 function getLineForCharPosition(editor, offsetChars) {
631 var lines = editor.ace.getSession().doc.getAllLines(),
635 for (var i=0; i<lines.length; i++) {
636 runningTotal += lines[i].length + 1; // +1 needed for newline char
637 if (offsetChars <= runningTotal) {
646 function isLastChar(editor, char, startsWithNewline) {
647 var lines = editor.ace.getSession().doc.getAllLines(),
651 for (var i=0; i<lines.length; i++) {
652 runningTotal += lines[i].length + 1; // +1 needed for newline char
653 var comparison = runningTotal;
654 if (startsWithNewline) {
658 if (char === comparison) {
667 function createArrow(info) {
668 var el = document.createElement('div');
670 'class': info.className,
671 'style': 'top:' + info.topOffset + 'px',
673 'data-diff-index': info.diffIndex
675 for (var key in props) {
676 el.setAttribute(key, props[key]);
678 el.innerHTML = info.arrowContent;
683 function createGutter(acediff) {
684 acediff.gutterHeight = document.getElementById(acediff.options.classes.gutterID).clientHeight;
685 acediff.gutterWidth = document.getElementById(acediff.options.classes.gutterID).clientWidth;
687 var leftHeight = getTotalHeight(acediff, C.EDITOR_LEFT);
688 var rightHeight = getTotalHeight(acediff, C.EDITOR_RIGHT);
689 var height = Math.max(leftHeight, rightHeight, acediff.gutterHeight);
691 acediff.gutterSVG = document.createElementNS(C.SVG_NS, 'svg');
692 acediff.gutterSVG.setAttribute('width', acediff.gutterWidth);
693 acediff.gutterSVG.setAttribute('height', height);
695 document.getElementById(acediff.options.classes.gutterID).appendChild(acediff.gutterSVG);
698 // acediff.editors.left.ace.getSession().getLength() * acediff.lineHeight
699 function getTotalHeight(acediff, editor) {
700 var ed = (editor === C.EDITOR_LEFT) ? acediff.editors.left : acediff.editors.right;
701 return ed.ace.getSession().getLength() * acediff.lineHeight;
704 // creates two contains for positioning the copy left + copy right arrows
705 function createCopyContainers(acediff) {
706 acediff.copyRightContainer = document.createElement('div');
707 acediff.copyRightContainer.setAttribute('class', acediff.options.classes.copyRightContainer);
708 acediff.copyLeftContainer = document.createElement('div');
709 acediff.copyLeftContainer.setAttribute('class', acediff.options.classes.copyLeftContainer);
711 document.getElementById(acediff.options.classes.gutterID).appendChild(acediff.copyRightContainer);
712 document.getElementById(acediff.options.classes.gutterID).appendChild(acediff.copyLeftContainer);
716 function clearGutter(acediff) {
717 //gutter.innerHTML = '';
719 var gutterEl = document.getElementById(acediff.options.classes.gutterID);
721 gutterEl.removeChild(acediff.gutterSVG);
725 createGutter(acediff);
729 function clearArrows(acediff) {
730 acediff.copyLeftContainer.innerHTML = '';
731 acediff.copyRightContainer.innerHTML = '';
736 * This combines multiple rows where, say, line 1 => line 1, line 2 => line 2, line 3-4 => line 3. That could be
737 * reduced to a single connector line 1=4 => line 1-3
739 function simplifyDiffs(acediff, diffs) {
740 var groupedDiffs = [];
742 function compare(val) {
743 return (acediff.options.diffGranularity === C.DIFF_GRANULARITY_SPECIFIC) ? val < 1 : val <= 1;
746 diffs.forEach(function(diff, index) {
748 groupedDiffs.push(diff);
752 // loop through all grouped diffs. If this new diff lies between an existing one, we'll just add to it, rather
753 // than create a new one
754 var isGrouped = false;
755 for (var i=0; i<groupedDiffs.length; i++) {
756 if (compare(Math.abs(diff.leftStartLine - groupedDiffs[i].leftEndLine)) &&
757 compare(Math.abs(diff.rightStartLine - groupedDiffs[i].rightEndLine))) {
759 // update the existing grouped diff to expand its horizons to include this new diff start + end lines
760 groupedDiffs[i].leftStartLine = Math.min(diff.leftStartLine, groupedDiffs[i].leftStartLine);
761 groupedDiffs[i].rightStartLine = Math.min(diff.rightStartLine, groupedDiffs[i].rightStartLine);
762 groupedDiffs[i].leftEndLine = Math.max(diff.leftEndLine, groupedDiffs[i].leftEndLine);
763 groupedDiffs[i].rightEndLine = Math.max(diff.rightEndLine, groupedDiffs[i].rightEndLine);
770 groupedDiffs.push(diff);
774 // clear out any single line diffs (i.e. single line on both editors)
776 groupedDiffs.forEach(function(diff) {
777 if (diff.leftStartLine === diff.leftEndLine && diff.rightStartLine === diff.rightEndLine) {
780 fullDiffs.push(diff);
787 function decorate(acediff) {
788 clearGutter(acediff);
789 clearArrows(acediff);
791 acediff.diffs.forEach(function(info, diffIndex) {
792 if (this.options.showDiffs) {
793 showDiff(this, C.EDITOR_LEFT, info.leftStartLine, info.leftEndLine, this.options.classes.diff);
794 showDiff(this, C.EDITOR_RIGHT, info.rightStartLine, info.rightEndLine, this.options.classes.diff);
796 if (this.options.showConnectors) {
797 addConnector(this, info.leftStartLine, info.leftEndLine, info.rightStartLine, info.rightEndLine);
799 addCopyArrows(this, info, diffIndex);
806 var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {},
808 length = arguments.length,
810 toString = Object.prototype.toString,
811 hasOwn = Object.prototype.hasOwnProperty,
813 "[object Boolean]": "boolean",
814 "[object Number]": "number",
815 "[object String]": "string",
816 "[object Function]": "function",
817 "[object Array]": "array",
818 "[object Date]": "date",
819 "[object RegExp]": "regexp",
820 "[object Object]": "object"
824 isFunction: function(obj) {
825 return jQuery.type(obj) === "function";
827 isArray: Array.isArray ||
829 return jQuery.type(obj) === "array";
831 isWindow: function(obj) {
832 return obj !== null && obj === obj.window;
834 isNumeric: function(obj) {
835 return !isNaN(parseFloat(obj)) && isFinite(obj);
837 type: function(obj) {
838 return obj === null ? String(obj) : class2type[toString.call(obj)] || "object";
840 isPlainObject: function(obj) {
841 if (!obj || jQuery.type(obj) !== "object" || obj.nodeType) {
845 if (obj.constructor && !hasOwn.call(obj, "constructor") && !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) {
853 return key === undefined || hasOwn.call(obj, key);
856 if (typeof target === "boolean") {
858 target = arguments[1] || {};
861 if (typeof target !== "object" && !jQuery.isFunction(target)) {
868 for (i; i < length; i++) {
869 if ((options = arguments[i]) !== null) {
870 for (name in options) {
872 copy = options[name];
873 if (target === copy) {
876 if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
879 clone = src && jQuery.isArray(src) ? src : [];
881 clone = src && jQuery.isPlainObject(src) ? src : {};
883 // WARNING: RECURSION
884 target[name] = extend(deep, clone, copy);
885 } else if (copy !== undefined) {
896 function getScrollingInfo(acediff, dir) {
897 return (dir == C.EDITOR_LEFT) ? acediff.editors.left.ace.getSession().getScrollTop() : acediff.editors.right.ace.getSession().getScrollTop();
901 function getEditorHeight(acediff) {
902 //editorHeight: document.getElementById(acediff.options.left.id).clientHeight
903 return document.getElementById(acediff.options.left.id).offsetHeight;
906 // generates a Bezier curve in SVG format
907 function getCurve(startX, startY, endX, endY) {
908 var w = endX - startX;
909 var halfWidth = startX + (w / 2);
911 // position it at the initial x,y coords
912 var curve = 'M ' + startX + ' ' + startY +
914 // now create the curve. This is of the form "C M,N O,P Q,R" where C is a directive for SVG ("curveto"),
915 // M,N are the first curve control point, O,P the second control point and Q,R are the final coords
916 ' C ' + halfWidth + ',' + startY + ' ' + halfWidth + ',' + endY + ' ' + endX + ',' + endY;
922 function on(elSelector, eventName, selector, fn) {
923 var element = (elSelector === 'document') ? document : document.querySelector(elSelector);
925 element.addEventListener(eventName, function(event) {
926 var possibleTargets = element.querySelectorAll(selector);
927 var target = event.target;
929 for (var i = 0, l = possibleTargets.length; i < l; i++) {
931 var p = possibleTargets[i];
933 while(el && el !== element) {
935 return fn.call(p, event);
944 function debounce(func, wait, immediate) {
947 var context = this, args = arguments;
948 var later = function() {
950 if (!immediate) func.apply(context, args);
952 var callNow = immediate && !timeout;
953 clearTimeout(timeout);
954 timeout = setTimeout(later, wait);
955 if (callNow) func.apply(context, args);