mirror of
https://github.com/wickedest/Mergely.git
synced 2026-04-09 10:48:40 +08:00
1507 lines
54 KiB
JavaScript
1507 lines
54 KiB
JavaScript
const Timer = require('./timer');
|
|
const diff = require('./diff');
|
|
const DiffParser = require('./diff-parser');
|
|
const LCS = require('./lcs');
|
|
|
|
/**
|
|
CHANGES:
|
|
|
|
BREAKING:
|
|
Added `.mergely-editor` to the DOM to scope all the CSS changes.
|
|
CSS now prefixes `.mergely-editor`.
|
|
Current active change gutter line number style changed from `.CodeMirror-linenumber` to `.CodeMirror-gutter-background`.
|
|
|
|
FEATURE:
|
|
Gutter click now scrolls to any line.
|
|
FIX:
|
|
Fixed issue where canvas markup was not rendered when `viewport` enabled.
|
|
*/
|
|
const MERGELY_ICON = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABuCAIAAABJObGsAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAfbCw8UOxvjZ6kDAAAAB3RJTUUH2wsPFQESa9FGmQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAFDBJREFUeNrtXQtQVFeavk2DvF/yZlUetg+EJIqPIvgIEo1xIxArcWqiMZWqsVK1Mbprand0NVuVrY1WnN2NW8ZNzWasqawmupPAqMRdFDdG81BGGYIjLKiooA4QQUF5N4/ezz7w9+He233PbRoaCX9R1Onbp/9z/u/8/3/+87wGi8UijZMryMPdFRg75OnuCtglmEtLS8tDK+FjkJUCAwMNBoO7q6ZOowLKurq68vLySitVVFRcu3atubm5tbVV6XyAY0BAQEhIyLRp05KSkmZaKTk5OSYmxt1CSAY3+sqSkpJjx47l5+eXlpYOkdXs2bOzs7NzcnJSU1PdJc4jOxpJMpvNhYWFGzdunDx58nCIA7ZgjiJQ0AiLNkJaCa93/Phx6GBBQQHzfQ7I09MTbtF7gCZMmICHgKZrgMChp6fHMRNwWLlyJfR01apV8LAjIOOwQwnJP/roo507d967d89enrCwMJPJFB4eHmYloOC4b0GdgeY9KzU2NlZVVTlmvmPHjjfffBOt8rhC2dfXd+jQoXfeeaempkalYIMhNjaW9RsRERFDLKuhoYH1WrW1taoSxcXFvffee2vXrvXwGK74b7igPHHixLZt2y5duiR7bjQa4+PjGYLDYXfwJAzT6urq3t5e2bdPPfXU+++///zzzw+HyK6Hsri4eOvWradPn5Y9R7ySnp6OIMbHx2c4JJFRZ2cngqpz584h0pJ9lZmZuXv37nnz5rm2RFdCCePasmXLF198IeMZGhqK2qekpIx8dI2alJWVoV2bmpoGiW0wrFmzZs+ePXAyrirLZVBeuHBh9erVQJN/6Ofnt2TJkvnz58OuRwQ6dYKlX7x48Ztvvmlvb+efA8cjR44sWLDAJaW4BsrPPvtsw4YNsCl64uXllZaWtnDhwpExZxFC9b7//vuioqLu7m56iOrt379/3bp1Q+c/VCjRTSPUgC+nJ+giMfbIyMhATOM+3OwSoqgzZ85gfIWa00M49127dg2xcx8SlOgu0Z5ffvklPfH19X355ZenTp3qbsQ06Pr167m5uR0dHfQkKysLtjWUoMJ5KG/cuIFhb3l5OT1BjP3KK68gJHY3UEKEqP7w4cOI8OlJcnJyfn5+YmKicwydhPLrr79GD8iPMRDlvPTSS6PHM4oQvGdeXh5iJnoCPUAEsnTpUie4OQMlcFyxYgXvvBEwLl++fNTOJDogiH/q1CmEn/QEHebJkyedQFM3lLBrRA+kj56envAyGEW4G5MhEUZl8Pg0RQLdRGyn19L1QYl+5umnnyb/6O/vD+c4adIkd0PhArpz5w5cZ1tbG/sIv3n+/HldvZCO7h/RA/prwhH6OGZwBEEQiAOh2EeICWH5gEmTdEC5fft2Pu6BXY8ZHBlBHAhFHyEsQmbxn4saOGKuV199lT6in3nuuefcLfuwUGFhId8Lffrpp4JjISEo4YOfeeYZGhci7lm7du3j2F+LEAA5dOgQRUgI786ePSsyTtc28Nra2tWrVxOOiMMRP45VHCXrpBEEhJjsIwRXTtOokjaUW7ZsIUYYF8I3P15xuBMEASEmhGUf2eSh5q80DLy4uBi6zfJgtA+vMfrH164ijNPRQ7BOHKoKL+d4tlhDK7du3UpYz549+6eDIwjCQmSWBgiAwnF+R7szTpw4QesKGE5lZGQ4yEyIswT+91lJss68Go1GDysZBkjiluCRDcNQs9mM8QZ8Ew1JUainldgSLhL8z5UVYAQmKBHcwAppe9xQGdTKHjdGEPny5cuMA6AAIA7WhewaOMRLTU2lda7Fixc/++yzDgRgqOE/E4OBgsEDSYKhEQYPfn5+EInNDDIE29vbMYhqamq6fft2XV1dfX09zz84ODg2NjYqKiomJgZpMIEjk0HAKoByGTcMau/fv3/r1i34uAcPHvDcUDSCx7i4uHArgRswxUMHgH711VfffvstS2N8XFJSYm9a0y6UiKfWr1/P0pB/8+bNst6GwcdUAAIwbQJ2wOXu3btKUFDjlJSUmTNnYoQLvcCv8BNIi7CjoqJCEqDo6GgIk5CQEBQUBG60yMFYATU0xtWrV2/evCnCDQ0zZ84ck8mEBGseVYzAee/evbSScfDgQT6+1oayq6trxowZtH4NrU5LS+MzMO0jAaACVVVV/FyRA4IAkZGRKKKyslIGtyCgixYtwn80MOSHBaD9AF9RUZFMB0UITZKZmYlIGRZD5iIjcIZpszQ0+sqVK6q7E9Sh3LNnz9tvv83SoaGhb731Fr/OxQwT2geFggfRRNDoE+A7JcXoG/Dg0v86yDYhbFLQk896R0xBAn995g5zw62uxludtVcflJ6y9A4qBe2BbgHCw5bhhZRN4m+a5zt5lk+0ySfG5BkY1tPW3Nt6v7P2WtuNkraq4t7OVhm3uXPnRkREqKIJpdm3bx+tWX7wwQeqsZEKlMAIRkTTaIhXn3jiCfqW+XW0f1lZ2ZkzZ+y2dnBk8FPLg2cvD5y12DsyAdEEfvmnzckdd+S2bPQPCVv08/DFryCnZMdhdT+423j6k7unftNZV+W42YBa+NLXIp97w/cvZtrLg0ZqKjry48lft/zft/QwKSlp4cKF9tBE55OXl8fScFAwAuWkkQqUhw8fxriQpeHs33jjDd4lQyVh1zdu3MjNze3Hwi/YL/5J/4TZPrHTvUJj8DdhYqx3RJwSlys7s5qLj3OFe0Qu+8XkV3d5BoVLImTpqzv6L7cP/YOlx6wCYsDEya/tDs9Y7+Elujfo/rncmt9uMd+7Q2hifAykWKgwqGSL5eOPP6bdCRhZIoaXV0BZwLFjxyidnp6uZAofTFNt0/7ui4npLwtWHRBTGloz9W8O+JvmC/6WQR+z+pcBM9Ov/NNf9na08N+ELshJ+Ktfe4VE6+AmSah5YNLCyn9c0V5zGR/R+yFUQCwJjZMt3AMEQEGKCYiUUMo1GY6voKCApcEO/liGI7QSHoD1uWh/cRwlqzdkicjlG1L+9Y/6cBygwKRFM3YcB6z9lfQJMG35bPrfH9WLIyPYUNJ7Z30nJbGPcFnwifBgSmMFFIQvIFL2EHIowYv2P8bHxyuH24ASnWZ/ururt11jsyRP6FLgGU1/+7uEN3/j4e3nhOT9aCYvic7660e19/KZvj0/bMlap1lJjzxDaOKm31LbIJzq6OhQQgkoAAhLs8V0DSh560YMqFo23yDdTXWSMAXOWvLk3vKwhT8biuSMYlf/Eo0xbdvvg55wZnVQRgHT0yKWvsbSxcXFra2t6LWVaPKA8ECpQ5mfn88S8A72oOTJ3KwjMPSOSuDd5VAI5pzyqwshqStdwg0UtqR/fheK0tzcrLoUAUCo5yCgiAZBiVER4m2WxnBNZJGou0l3jO0q8p2S7EJuQSkZcD4s3djYyLayy/IAENr5BqAAF//tIChFrFuyjhAo3a1HK0czGYyePtH9816ImpXbXJWwyGx8EJS80tqDEuEr22fPyI1a6XJCb84SMHDVTlwGi8zGbVAi/qTzMwhTHewPH5NaKVm7cpbgt2XJCLDQpijAxW8ptkHJb6QymUyqjOB0oZUYDBCaY0krLb39uzMApYPDLDw4PGi20U5lZSWlaZHIHvn5+bFpmJ7W+87V29x4u/6/97ZWnu9qqEGEHDLvhegXNkvOrr71tjXX5X/QUv5NZ32Vd/TU4CeXYVwkPoIcgFJoZosHB6AtW7bMEZSON/ZBK319fRmUfeYOSSehxrcObP3xf/6dhtIYBT+4dOph+dnpW3/vBI73z+dVf7yxu/nHAW5/BqZ4mPyrIsTwOirWIwQlDw4Pms3A+flXzT2StBqnF8q+rvaru3Lq8/copySaio4AUL04Nv3h6LV//hnhSNRefak2731drMjAxaHkQbNBSYvo7FycPUZwl8hAA0q9UN7+dHtzSYG9b++e/A9d3DrrrlXtWSdZ1Hf23Pvuv3RCKaSVAIe2FvF7M21QIgKgrJo7BjgoOyVxsljuffc7/kF0dDQfDyhnMx1T4+n/hJrTRy8r0ceuuqq+7i4noITNEVhKAjikagSaRL4SMRQGniyt6yygLq3s6+nig6eMjIyYmJi2tjYK0MwNt3RB2cTNfiYlJSUnJ2OUQtM2lr7e7vt/9o4S3SYp6Ct5iNihdaZ5/VrZ0tJCEakmlEaj0UmtlGzKHhwcjKgiKioqMjIyISGBPeztbNWlR3z8ABwnTZqEgV1KSgo95HVWG0oxX8lDZLFepcDS/VDyB4v1nVC19Am6GMlqGpROTExEe8CU2K0DtkzC8kicTcBRIEbBMAw80UjKDGJQ2gxcEEoeOhUo+XGhCC/JqYMBkJn8ET8rCqt0AsrQ0FBwM1qJr1uvPq0U1QkeIjmUQyLxuJrLCYHZ0rNMeEufDq0k78YaRoWbvm5HR9FK6oeSj35oklyYxIco2jl1aSUZhL3NdRaLjh3QfLejXCnjiYeIoFOBsqtLR0u6nvSphpZv0eN8yMA1dz3yEMmh5O/v0Q2lUwbO0yCTFI5IZEipH+7Vo5XighBEAI0myD3oEXpSWT7hCojWgM9pr5Q+Yd8v2bHfQd2mHq00ePR3g/wRYlWiygM0EsrW7VBEgi5J57koV26mVt0uYD+3Ret7PVAaPUV+yy5BYWk+jLNBSUvePT09mvfXDK6CS7udoXWjkqzbdBZKB/OV/NU8/D4BG5QYeFHawV0zQyIB0A0GPfGZVmaZorkkMw8OD5qtKvyqxXBBKSKPl/YAwVZ7z/7JC3g31YUtg6eXODdpwFc6WJCQgcODpg4lf0palWydht55b06P1IU36hBeM7PBU0fDCGolD446lMnJtmXlqqoqEaaSXnu0093zvbk+KBVKJ2senQ0jBCUPDg+aDYiYmBg6EAAdbmhoECtf59BTS4t1GbhM6diWCr5hPFytlYCFDBxw8Zc9DgIiOzub0vyqxVCgUeQfVKJyP4mHUwbODkOoZNDjKw2cr7TXg/Ow8HBJMihzcnJUf+OoeFcYuCo6Qty0kHK5gfOw8HBJMihTU1PpWsna2lqa1HSMjXhdrfm1wpchGLgTGQZl1oISgNAZRQAlu3ZULhgpLWJ6IcXUezePa7VSuwfXEwxpQQlAaAgks25JCaWgjdMEhEHvqHEASjZfqYBG393DHmpI8ZMj+rqdAV9pb5nMgXWrQMnfWlVdXa06sB80vapTK8m3Mg7sLAKVqMseJU4rMRamqV9+OsM5X6m6IAEoAAhLo8LKY4pyILy8vFau7N//iRiNX+cdwMKA6tq2XjobDLGt80x4f3//AWb6bsEj6CEb03Gem6RnjYGHMjo6Wjn1CygoaAVE/CqxOpTSYNU9d+6ccoIE8kMLGK/e9ofiq3q9bc3sZAN+Cw688GxtC9/S0Q8RoswTJ06kE6nQKVrCbL12QZwbrcJHRETIFrgAAn8LhNK6JdXDJqtWrQoLC2OBaF1dXVlZGX8Eim1mCwgImDdv3vnz5yVL35WdqwKTFhv9gjy8/Yze/vjv4ePv4eVt6enu6zFburssPWbrAYAHzT+cYFM1+C04sJbHf6TnzJnDNspf2ZkVuiBHZA607WZp191qyTqngAqzU5+oGxoGFWYnHa//2/qoFzZ5h0/xDAp/tBvL6AmHCN239PVarHV7VENr9Voqvmu7/kfJqpKRkZGMG5UFEGj/H8oCREJQwvR27NhBB/NOnz49a9YsvotAGWj56dOno7r19fUPL3+NP/HGR13xW3Cg865Im0ymmpoaMGy/WYo/cW5QZ4w62HlHxtDHxyc2NhZt88MPP0DNa3N3iXMDLVq0CDwZN/YEds1fEgtwVLeWG999913lU0RMBw8eZHvV4G5RUdk9OKzGAMVsNmvOffAE01u8eHFUVBS6HXY8XLJ6DGhBeHg4EroOkILb0qVLARwagz9sDvMEHLBKXdzwkxUrVsTFxVHDsOcXLlyAVrI0vj1w4IBq/64OJbJCsCNHjrCPiEvnzp1Lv2fVZXs0MAiFJBADuDu44AhIzZgxA0ygQWgAklwaGP8wbnBS8fHxrHOnjTeqMicmJqanp8OQ8RNITtwY4SO4ocGmTJkCbhgIOl5lQZXgc9LS0hB4gxvf50CTPv/8czpfs2/fPnsvBHD+aL3sQDs7Dw4llR2zAojs+Dpkg1TKg/FKbsoLBmQM2VY6hr69mwbYMWviBjSVdWPc4FvBkB2zZxEVz80FR+sl64UPFBihyE2bNik3CypvKVDyYWXLbntQJeJmjxXPUJybg7oxblQ3afAswcOHDz/88ENqgIKCAmcufGAETSSPCyVVjpbGNuXn59PhnMzMTGiog8waAfbu3buplUpLS69fv+5u6UaOICwdGQEIgMJxfg0o4YzXrFnD0jCQ3NxcNy77jCRBTAhLPgEgaF5Jr30nG7rv+fPn0+QSevYNGzaM7Quw0E3t37+fgjyEKBcvXtS8jF57BM3uYSfsUEBeXt7IvFrGLQTRICDhCMEhvsil/kKTEQsWLEAr0UcM7E+d0n2U4XEhiMZP4kBwwev8Red11q1bx9+khbG98q0lY4AgFD9tsW3bNvGL/HXc9Qsf/OKLL9LFqohmX3/99bF0seqdO3c++eQTWiDLyso6evSo+BX+49cm99PQr00ev8z7EbnhMm9G41fMq9L4iw/c+uIDRuOv45DR+Eti+smdL4lhNP7qIqLxF2qNmhdqEY2/5m385YOj7+WDROOvxHQxjb+o1ZU0/vpgF9P4S61dTD+FV63bFotHhoBIYWHhxo0baae2awlswRxFsFsTR5JGSCtVqaSkBHqKYS+tkTpNGF9lZ2dDB+3tQhkBcieURIhXysvLWb9RUVGBIKa5uZndOyOvrvWwdUhICIKqpKQk1mslJyfz52fcRaMCSlWyWO+deWglyer7QPwVAKONRi+Ujx0NV5D1E6T/BwkHUltwIapAAAAAAElFTkSuQmCC';
|
|
|
|
const NOTICES = [
|
|
'lgpl-separate-notice',
|
|
'gpl-separate-notice',
|
|
'mpl-separate-notice',
|
|
'commercial'
|
|
];
|
|
|
|
function CodeMirrorDiffView(el, options, { jQuery, CodeMirror }) {
|
|
CodeMirror.defineExtension('centerOnCursor', function() {
|
|
const coords = this.cursorCoords(null, 'local');
|
|
this.scrollTo(null,
|
|
(coords.top + coords.bottom) / 2 - (this.getScrollerElement().clientHeight / 2));
|
|
});
|
|
this.jQuery = jQuery;
|
|
this.CodeMirror = CodeMirror;
|
|
|
|
this.init(el, options);
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.init = function(el, options) {
|
|
const { jQuery } = this;
|
|
this.settings = {
|
|
autoupdate: true,
|
|
autoresize: true,
|
|
rhs_margin: 'right',
|
|
wrap_lines: false,
|
|
line_numbers: true,
|
|
lcs: true,
|
|
sidebar: true,
|
|
viewport: false,
|
|
ignorews: false,
|
|
ignorecase: false,
|
|
ignoreaccents: false,
|
|
fadein: 'fast',
|
|
resize_timeout: 500,
|
|
change_timeout: 150,
|
|
fgcolor: {a:'#4ba3fa',c:'#a3a3a3',d:'#ff7f7f', // color for differences (soft color)
|
|
ca:'#4b73ff',cc:'#434343',cd:'#ff4f4f'}, // color for currently active difference (bright color)
|
|
bgcolor: '#eee',
|
|
vpcolor: 'rgba(0, 0, 200, 0.5)',
|
|
license: 'lgpl',
|
|
width: 'auto',
|
|
height: 'auto',
|
|
cmsettings: {
|
|
styleSelectedText: true
|
|
},
|
|
lhs_cmsettings: {},
|
|
rhs_cmsettings: {},
|
|
lhs: function(setValue) { },
|
|
rhs: function(setValue) { },
|
|
loaded: function() { },
|
|
resize: function(init) {
|
|
const parent = jQuery(el).parent();
|
|
let w;
|
|
let h;
|
|
if (this.width == 'auto') {
|
|
w = parent.width();
|
|
}
|
|
else {
|
|
w = this.width;
|
|
}
|
|
if (this.height == 'auto') {
|
|
h = parent.height() - 2;
|
|
}
|
|
else {
|
|
h = this.height;
|
|
}
|
|
const content_width = w / 2.0 - 2 * 8 - 8;
|
|
const content_height = h;
|
|
const self = jQuery(el);
|
|
self.find('.mergely-column').css({ width: content_width + 'px' });
|
|
self.find('.mergely-column, .mergely-canvas, .mergely-margin, .mergely-column textarea, .CodeMirror-scroll, .cm-s-default').css({ height: content_height + 'px' });
|
|
self.find('.mergely-canvas').css({ height: content_height + 'px' });
|
|
self.find('.mergely-column textarea').css({ width: content_width + 'px' });
|
|
self.css({ width: w, height: h, clear: 'both' });
|
|
if (self.css('display') === 'none') {
|
|
if (this.fadein != false) {
|
|
self.fadeIn(this.fadein);
|
|
}
|
|
else {
|
|
self.show();
|
|
}
|
|
}
|
|
if (this.resized) this.resized();
|
|
},
|
|
_debug: '', //scroll,draw,calc,diff,markup,change,init
|
|
resized: function() { },
|
|
// user supplied options
|
|
...options
|
|
};
|
|
// save this element for faster queries
|
|
this.element = jQuery(el);
|
|
|
|
this.lhs_cmsettings = {
|
|
...this.settings.cmsettings,
|
|
...this.settings.lhs_cmsettings,
|
|
// these override any user-defined CodeMirror settings
|
|
lineWrapping: this.settings.wrap_lines,
|
|
lineNumbers: this.settings.line_numbers,
|
|
gutters: (this.settings.line_numbers && ['merge', 'CodeMirror-linenumbers']) || [],
|
|
};
|
|
this.rhs_cmsettings = {
|
|
...this.settings.cmsettings,
|
|
...this.settings.rhs_cmsettings,
|
|
// these override any user-defined CodeMirror settings
|
|
lineWrapping: this.settings.wrap_lines,
|
|
lineNumbers: this.settings.line_numbers,
|
|
gutters: (this.settings.line_numbers && ['merge', 'CodeMirror-linenumbers']) || [],
|
|
};
|
|
|
|
// bind if the element is destroyed
|
|
this.element.bind('destroyed', jQuery.proxy(this.teardown, this));
|
|
|
|
// save this instance in jQuery data, binding this view to the node
|
|
jQuery.data(el, 'mergely', this);
|
|
|
|
this._setOptions(options);
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.unbind = function() {
|
|
const { jQuery } = this;
|
|
if (this.changed_timeout != null) clearTimeout(this.changed_timeout);
|
|
this.editor[this.id + '-lhs'].toTextArea();
|
|
this.editor[this.id + '-rhs'].toTextArea();
|
|
jQuery(window).off('.mergely');
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.destroy = function() {
|
|
this.element.unbind('destroyed', this.teardown);
|
|
this.teardown();
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.teardown = function() {
|
|
this.unbind();
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.lhs = function(text) {
|
|
// invalidate existing changes and current position
|
|
this.changes = [];
|
|
delete this._current_diff;
|
|
this.editor[this.id + '-lhs'].setValue(text);
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.rhs = function(text) {
|
|
// invalidate existing changes and current position
|
|
this.changes = [];
|
|
delete this._current_diff;
|
|
this.editor[this.id + '-rhs'].setValue(text);
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.update = function() {
|
|
this._changing();
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.unmarkup = function() {
|
|
this._clear();
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.scrollToDiff = function(direction) {
|
|
if (!this.changes.length) return;
|
|
if (direction === 'next') {
|
|
if (this._current_diff == this.changes.length - 1) {
|
|
this._current_diff = 0;
|
|
} else {
|
|
this._current_diff = Math.min(++this._current_diff, this.changes.length - 1);
|
|
}
|
|
}
|
|
else if (direction === 'prev') {
|
|
if (this._current_diff == 0) {
|
|
this._current_diff = this.changes.length - 1;
|
|
} else {
|
|
this._current_diff = Math.max(--this._current_diff, 0);
|
|
}
|
|
}
|
|
this._scroll_to_change(this.changes[this._current_diff]);
|
|
this._changed();
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.mergeCurrentChange = function(side) {
|
|
if (!this.changes.length) return;
|
|
if (side == 'lhs' && !this.lhs_cmsettings.readOnly) {
|
|
this._merge_change(this.changes[this._current_diff], 'rhs', 'lhs');
|
|
}
|
|
else if (side == 'rhs' && !this.rhs_cmsettings.readOnly) {
|
|
this._merge_change(this.changes[this._current_diff], 'lhs', 'rhs');
|
|
}
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.scrollTo = function(side, num) {
|
|
const ed = this.editor[`${this.id}-${side}`];
|
|
ed.setCursor(num);
|
|
ed.centerOnCursor();
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._setOptions = function(opts) {
|
|
const { jQuery } = this;
|
|
this.settings = {
|
|
...this.settings,
|
|
...opts
|
|
};
|
|
if (this.settings.hasOwnProperty('rhs_margin')) {
|
|
// dynami259*-6+cally swap the margin
|
|
if (this.settings.rhs_margin == 'left') {
|
|
this.element.find('.mergely-margin:last-child').insertAfter(
|
|
this.element.find('.mergely-canvas'));
|
|
}
|
|
else {
|
|
const target = this.element.find('.mergely-margin').last();
|
|
target.appendTo(target.parent());
|
|
}
|
|
}
|
|
if (this.settings.hasOwnProperty('sidebar')) {
|
|
// dynamically enable sidebars
|
|
if (this.settings.sidebar) {
|
|
this.element.find('.mergely-margin').css({display: 'block'});
|
|
}
|
|
else {
|
|
this.element.find('.mergely-margin').css({display: 'none'});
|
|
}
|
|
}
|
|
// if options set after init
|
|
if (this.editor) {
|
|
const le = this.editor[`${this.id}-lhs`];
|
|
const re = this.editor[`${this.id}-rhs`];
|
|
if (this.settings.hasOwnProperty('wrap_lines')) {
|
|
le.setOption('lineWrapping', this.settings.wrap_lines);
|
|
re.setOption('lineWrapping', this.settings.wrap_lines);
|
|
}
|
|
if (this.settings.hasOwnProperty('line_numbers')) {
|
|
le.setOption('lineNumbers', this.settings.line_numbers);
|
|
re.setOption('lineNumbers', this.settings.line_numbers);
|
|
}
|
|
}
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.options = function(opts) {
|
|
if (opts) {
|
|
this._setOptions(opts);
|
|
if (this.settings.autoresize) this.resize();
|
|
if (this.settings.autoupdate) this.update();
|
|
}
|
|
else {
|
|
return this.settings;
|
|
}
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.swap = function() {
|
|
if (this.lhs_cmsettings.readOnly || this.rhs_cmsettings.readOnly) {
|
|
return;
|
|
}
|
|
const le = this.editor[`${this.id}-lhs`];
|
|
const re = this.editor[`${this.id}-rhs`];
|
|
re.setValue(le.getValue());
|
|
le.setValue(re.getValue());
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.merge = function(side) {
|
|
const le = this.editor[`${this.id}-lhs`];
|
|
const re = this.editor[`${this.id}-rhs`];
|
|
if (side == 'lhs' && !this.lhs_cmsettings.readOnly) {
|
|
le.setValue(re.getValue());
|
|
} else if (!this.rhs_cmsettings.readOnly) {
|
|
re.setValue(le.getValue());
|
|
}
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.summary = function() {
|
|
const le = this.editor[`${this.id}-lhs`];
|
|
const re = this.editor[`${this.id}-rhs`];
|
|
|
|
return {
|
|
numChanges: this.changes.length,
|
|
lhsLength: le.getValue().length,
|
|
rhsLength: re.getValue().length,
|
|
c: this.changes.filter(function (a) {
|
|
return a.op === 'c';
|
|
}).length,
|
|
a: this.changes.filter(function (a) {
|
|
return a.op === 'a';
|
|
}).length,
|
|
d: this.changes.filter(function (a) {
|
|
return a.op === 'd';
|
|
}).length
|
|
}
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.get = function(side) {
|
|
const ed = this.editor[`${this.id}-${side}`];
|
|
const value = ed.getValue();
|
|
if (value === undefined) {
|
|
return '';
|
|
}
|
|
return value;
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.clear = function(side) {
|
|
if (side == 'lhs' && this.lhs_cmsettings.readOnly) return;
|
|
if (side == 'rhs' && this.rhs_cmsettings.readOnly) return;
|
|
const ed = this.editor[`${this.id}-${side}`];
|
|
ed.setValue('');
|
|
delete this._current_diff;
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.cm = function(side) {
|
|
return this.editor[`${this.id}-${side}`];
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.search = function(side, query, direction) {
|
|
const editor = this.editor[`${this.id}-${side}`];
|
|
const searchDirection = (direction === 'prev')
|
|
? 'findPrevious' : 'findNext';
|
|
const start = { line: 0, ch: 0 };
|
|
if ((editor.getSelection().length == 0) || (this.prev_query[side] != query)) {
|
|
this.cursor[this.id] = editor.getSearchCursor(query, start, false);
|
|
this.prev_query[side] = query;
|
|
}
|
|
const cursor = this.cursor[this.id];
|
|
if (cursor[searchDirection]()) {
|
|
editor.setSelection(cursor.from(), cursor.to());
|
|
}
|
|
else {
|
|
cursor = editor.getSearchCursor(query, start, false);
|
|
}
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.resize = function() {
|
|
// recalculate line height as it may be zoomed
|
|
this.em_height = null;
|
|
this.settings.resize();
|
|
this._changing();
|
|
this._set_top_offset(this.id + '-lhs');
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.diff = function() {
|
|
const le = this.editor[`${this.id}-lhs`];
|
|
const re = this.editor[`${this.id}-rhs`];
|
|
const lhs = le.getValue();
|
|
const rhs = re.getValue();
|
|
const comparison = new diff(lhs, rhs, this.settings);
|
|
return comparison.normal_form();
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.bind = function(el) {
|
|
const { jQuery, CodeMirror } = this;
|
|
this.trace('init', 'bind');
|
|
this.element.hide();
|
|
this.id = jQuery(el).attr('id');
|
|
this.lhsId = `${this.id}-lhs`;
|
|
this.rhsId = `${this.id}-rhs`;
|
|
try {
|
|
// ensure the id is valid for jQuery
|
|
jQuery(`#${this.id}`);
|
|
} catch (ex) {
|
|
console.error(`jQuery failed to find mergely: #${this.id}`);
|
|
return;
|
|
}
|
|
this.changed_timeout = null;
|
|
this.chfns = {};
|
|
this.chfns[this.lhsId] = [];
|
|
this.chfns[this.rhsId] = [];
|
|
this.prev_query = [];
|
|
this.cursor = [];
|
|
this._skipscroll = {};
|
|
this.change_exp = new RegExp(/(\d+(?:,\d+)?)([acd])(\d+(?:,\d+)?)/);
|
|
if (jQuery.button !== undefined) {
|
|
//jquery ui
|
|
this.merge_lhs_button = document.createElement('button');
|
|
this.merge_lhs_button.title = 'Merge left';
|
|
this.merge_rhs_button = document.createElement('button');
|
|
this.merge_rhs_button.title = 'Merge right';
|
|
}
|
|
else {
|
|
// homebrew
|
|
const style = 'opacity:0.6;height:16px;background-color:#bfbfbf;cursor:pointer;text-align:center;color:#eee;border:1px solid #848484;margin-right:-15px;margin-top:-2px;';
|
|
const lhsTemplate = `<div style="${style}" class="merge-button" title="Merge left"><</div>`;
|
|
const rhsTemplate = `<div style="${style}" class="merge-button" title="Merge right">></div>`;
|
|
this.merge_lhs_button = htmlToElement(lhsTemplate);
|
|
this.merge_rhs_button = htmlToElement(rhsTemplate);
|
|
}
|
|
|
|
// create the textarea and canvas elements
|
|
const height = '10px';
|
|
const width = '10px';
|
|
|
|
this.element.get(0).className += ' mergely-editor';
|
|
const canvasLhs = htmlToElement(getMarginTemplate({
|
|
id: this.id,
|
|
side: 'lhs'
|
|
}));
|
|
const canvasRhs = htmlToElement(getMarginTemplate({
|
|
id: this.id,
|
|
side: 'rhs'
|
|
}));
|
|
const editorLhs = htmlToElement(getEditorTemplate({
|
|
id: this.id,
|
|
side: 'lhs'
|
|
}));
|
|
const editorRhs = htmlToElement(getEditorTemplate({
|
|
id: this.id,
|
|
side: 'rhs'
|
|
}));
|
|
const canvasMid = htmlToElement(getCenterCanvasTemplate({
|
|
id: this.id
|
|
}));
|
|
|
|
this.element.append(canvasLhs);
|
|
this.element.append(editorLhs);
|
|
this.element.append(canvasMid);
|
|
if (this.settings.rhs_margin == 'left') {
|
|
this.element.append(canvasRhs);
|
|
}
|
|
this.element.append(editorRhs);
|
|
if (this.settings.rhs_margin != 'left') {
|
|
this.element.append(canvasRhs);
|
|
}
|
|
if (!this.settings.sidebar) {
|
|
this.element.find('.mergely-margin').css({ display: 'none' });
|
|
}
|
|
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 splash = htmlToElement(getSplash({
|
|
icon: MERGELY_ICON,
|
|
notice,
|
|
left: (this.element.parent().width() - 300) / 2
|
|
}));
|
|
// FIXME: use editor
|
|
jQuery('body').one('click', function () {
|
|
splash.style.cssText += 'visibility: hidden; opacity: 0; transition: visibility 0s 100ms, opacity 100ms linear;';
|
|
setTimeout(() => splash.remove(), 110);
|
|
});
|
|
this.element.append(splash);
|
|
}
|
|
|
|
// check initialization
|
|
const lhstx = document.querySelector(`#${this.id}-lhs`);
|
|
const rhstx = document.querySelector(`#${this.id}-rhs`);
|
|
if (!lhstx) {
|
|
console.error('lhs textarea not defined - Mergely not initialized properly');
|
|
}
|
|
if (!rhstx) {
|
|
console.error('rhs textarea not defined - Mergely not initialized properly');
|
|
}
|
|
|
|
// get current diff border color from user-defined css
|
|
this.current_diff_color = jQuery('<div style="display:none" class="mergely current start" />')
|
|
.appendTo('body').css('border-top-color');
|
|
|
|
// codemirror
|
|
const cmstyles = [
|
|
'.CodeMirror { line-height: 18px; }'
|
|
];
|
|
if (this.settings.autoresize) {
|
|
cmstyles.push('.CodeMirror-scroll { height: 100%; overflow: auto; }');
|
|
}
|
|
const cmstyle = cmstyles.map(a => `#${this.id} ${a}`).join('\n');
|
|
const css = htmlToElement(`<style type="text/css">${cmstyle}</style>`);
|
|
document.head.appendChild(css);
|
|
|
|
// bind
|
|
this.trace('init', 'binding event listeners');
|
|
this.editor = [];
|
|
this.editor[this.lhsId] = CodeMirror.fromTextArea(lhstx, this.lhs_cmsettings);
|
|
this.editor[this.rhsId] = CodeMirror.fromTextArea(rhstx, this.rhs_cmsettings);
|
|
this.editor[this.lhsId].on('change', () => {
|
|
if (!this.settings.autoupdate) {
|
|
return;
|
|
}
|
|
this._changing();
|
|
});
|
|
this.editor[this.lhsId].on('scroll', () => {
|
|
this._scrolling({ side: 'lhs', id: this.lhsId });
|
|
});
|
|
this.editor[this.rhsId].on('change', () => {
|
|
if (!this.settings.autoupdate) {
|
|
return;
|
|
}
|
|
this._changing();
|
|
});
|
|
this.editor[this.rhsId].on('scroll', () => {
|
|
this._scrolling({ side: 'rhs', id: this.rhsId });
|
|
});
|
|
|
|
// resize
|
|
if (this.settings.autoresize) {
|
|
let resizeTimeout = null;
|
|
const resize = (init) => {
|
|
if (this.settings.resize) this.settings.resize(init);
|
|
this.resize();
|
|
this.editor[this.lhsId].refresh();
|
|
this.editor[this.rhsId].refresh();
|
|
};
|
|
jQuery(window).on('resize.mergely', () => {
|
|
if (resizeTimeout) {
|
|
clearTimeout(resizeTimeout);
|
|
}
|
|
resizeTimeout = setTimeout(resize, this.settings.resize_timeout);
|
|
});
|
|
resize(true);
|
|
}
|
|
|
|
// scrollToDiff() from gutter
|
|
function gutterClicked(side, line, ev) {
|
|
// The "Merge left/right" buttons are also located in the gutter.
|
|
// Don't interfere with them:
|
|
if (ev.target && (jQuery(ev.target).closest('.merge-button').length > 0)) {
|
|
return;
|
|
}
|
|
const ed = this.editor[`${this.id}-${side}`];
|
|
// See if the user clicked the line number of a difference:
|
|
let found = false;
|
|
for (let i = 0; i < this.changes.length; ++i) {
|
|
const change = this.changes[i];
|
|
const lf = change[`${side}-line-from`];
|
|
const lt = change[`${side}-line-to`];
|
|
if (line >= lf && line <= lt) {
|
|
found = true;
|
|
// clicked on a line within the change
|
|
this._current_diff = i;
|
|
break;
|
|
}
|
|
}
|
|
this.scrollTo(side, line);
|
|
if (found) {
|
|
// trigger refresh
|
|
this._changed();
|
|
}
|
|
}
|
|
|
|
this.editor[this.lhsId].on('gutterClick', (cm, n, gutterClass, ev) => {
|
|
gutterClicked.call(this, 'lhs', n, ev);
|
|
});
|
|
|
|
this.editor[this.rhsId].on('gutterClick', (cm, n, gutterClass, ev) => {
|
|
gutterClicked.call(this, 'rhs', n, ev);
|
|
});
|
|
|
|
// if `lhs` and `rhs` are passed in, this sets the values in each editor
|
|
// and kicks off the whole change pipeline.
|
|
if (this.settings.lhs) {
|
|
this.trace('init', 'setting lhs value');
|
|
this.settings.lhs(function setValue(value) {
|
|
this._initializing = true;
|
|
delete this._current_diff;
|
|
this.editor[this.lhsId].getDoc().setValue(value);
|
|
}.bind(this));
|
|
}
|
|
if (this.settings.rhs) {
|
|
this.trace('init', 'setting rhs value');
|
|
this.settings.rhs(function setValue(value) {
|
|
this._initializing = true;
|
|
delete this._current_diff;
|
|
this.editor[this.rhsId].getDoc().setValue(value);
|
|
}.bind(this));
|
|
}
|
|
this.element.one('updated', () => {
|
|
this._initializing = false;
|
|
if (this.settings.loaded) {
|
|
this.settings.loaded();
|
|
}
|
|
});
|
|
this.trace('init', 'bound');
|
|
this.editor[this.lhsId].focus();
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._scroll_to_change = function(change) {
|
|
if (!change) {
|
|
return;
|
|
}
|
|
const led = this.editor[this.lhsId];
|
|
const red = this.editor[this.rhsId];
|
|
// set cursors
|
|
const llf = Math.max(change['lhs-line-from'], 0);
|
|
const rlf = Math.max(change['rhs-line-from'], 0);
|
|
led.setCursor(llf, 0);
|
|
red.setCursor(rlf, 0);
|
|
if (change['lhs-line-to'] >= 0) {
|
|
led.scrollIntoView({ line: change['lhs-line-to'] });
|
|
}
|
|
led.focus();
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._scrolling = function({ side, id }) {
|
|
const { jQuery } = this;
|
|
if (this._skipscroll[id] === true) {
|
|
// scrolling one side causes the other to event - ignore it
|
|
this._skipscroll[id] = false;
|
|
return;
|
|
}
|
|
if (!this.changes) {
|
|
// pasting a wide line can trigger scroll before changes
|
|
// are calculated
|
|
return;
|
|
}
|
|
const scroller = jQuery(this.editor[id].getScrollerElement());
|
|
if (this.midway == undefined) {
|
|
this.midway = (scroller.height() / 2.0 + scroller.offset().top).toFixed(2);
|
|
}
|
|
// balance-line
|
|
const midline = this.editor[id].coordsChar({left:0, top:this.midway});
|
|
const top_to = scroller.scrollTop();
|
|
const left_to = scroller.scrollLeft();
|
|
|
|
this.trace('scroll', 'side', side);
|
|
this.trace('scroll', 'midway', this.midway);
|
|
this.trace('scroll', 'midline', midline);
|
|
this.trace('scroll', 'top_to', top_to);
|
|
this.trace('scroll', 'left_to', left_to);
|
|
|
|
for (const name in this.editor) {
|
|
if (!this.editor.hasOwnProperty(name) || id === name) {
|
|
// this is the same editor, and we want to scroll the other
|
|
continue;
|
|
}
|
|
const this_side = id.replace(this.id + '-', '');
|
|
const other_side = name.replace(this.id + '-', '');
|
|
|
|
// find the last change that is less than or within the midway point
|
|
// do not move the rhs until the lhs end point is >= the rhs end point.
|
|
let top_adjust = 0;
|
|
let last_change = null;
|
|
let force_scroll = false;
|
|
for (const change of this.changes) {
|
|
if ((midline.line >= change[this_side+'-line-from'])) {
|
|
last_change = change;
|
|
if (midline.line >= last_change[this_side+'-line-to']) {
|
|
if (!change.hasOwnProperty(this_side+'-y-start') ||
|
|
!change.hasOwnProperty(this_side+'-y-end') ||
|
|
!change.hasOwnProperty(other_side+'-y-start') ||
|
|
!change.hasOwnProperty(other_side+'-y-end')){
|
|
// change outside of viewport
|
|
force_scroll = true;
|
|
}
|
|
else {
|
|
top_adjust +=
|
|
(change[this_side+'-y-end'] - change[this_side+'-y-start']) -
|
|
(change[other_side+'-y-end'] - change[other_side+'-y-start']);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const vp = this.editor[name].getViewport();
|
|
let scroll = true;
|
|
if (last_change) {
|
|
this.trace('scroll', 'last change before midline', last_change);
|
|
if (midline.line >= vp.from && midline <= vp.to) {
|
|
scroll = false;
|
|
}
|
|
}
|
|
this.trace('scroll', 'scroll', scroll);
|
|
if (scroll || force_scroll) {
|
|
// scroll the other side
|
|
this.trace('scroll', 'scrolling other side', top_to - top_adjust);
|
|
this._skipscroll[name] = true;//disable next event
|
|
this.editor[name].scrollTo(left_to, top_to - top_adjust);
|
|
}
|
|
else {
|
|
this.trace('scroll', 'not scrolling other side');
|
|
}
|
|
|
|
if (this.settings.autoupdate) {
|
|
Timer.start();
|
|
this._calculate_offsets(this.changes);
|
|
this.trace('change', 'offsets time', Timer.stop());
|
|
this._markup_changes(this.changes);
|
|
this.trace('change', 'markup time', Timer.stop());
|
|
this._draw_diff(this.changes);
|
|
this.trace('change', 'draw time', Timer.stop());
|
|
}
|
|
this.trace('scroll', 'scrolled');
|
|
}
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._changing = function() {
|
|
this.trace('change', 'changing-timeout', this.changed_timeout);
|
|
if (this.changed_timeout != null) clearTimeout(this.changed_timeout);
|
|
this.changed_timeout = setTimeout(() => {
|
|
Timer.start();
|
|
this._changed();
|
|
this.trace('change', 'total time', Timer.stop());
|
|
}, this.settings.change_timeout);
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._changed = function() {
|
|
this._clear();
|
|
this._diff();
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._clear = function() {
|
|
const clearChanges = (id) => {
|
|
Timer.start();
|
|
const editor = this.editor[id];
|
|
editor.operation(() => {
|
|
const lineCount = editor.lineCount();
|
|
// FIXME: there is no need to call `removeLineClass` for every line
|
|
for (let i = 0; i < lineCount; ++i) {
|
|
editor.removeLineClass(i, 'background');
|
|
editor.removeLineClass(i, 'gutter');
|
|
}
|
|
for (const fn of this.chfns[id]) {
|
|
if (fn.lines.length) {
|
|
this.trace('change', 'clear text', fn.lines[0].text);
|
|
}
|
|
fn.clear();
|
|
}
|
|
editor.clearGutter('merge');
|
|
this.trace('change', 'clear time', Timer.stop());
|
|
});
|
|
};
|
|
clearChanges(this.lhsId);
|
|
clearChanges(this.rhsId);
|
|
|
|
const ex = this._draw_info();
|
|
const ctx_lhs = ex.clhs.get(0).getContext('2d');
|
|
const ctx_rhs = ex.crhs.get(0).getContext('2d');
|
|
const ctx = ex.dcanvas.getContext('2d');
|
|
|
|
ctx_lhs.beginPath();
|
|
ctx_lhs.fillStyle = this.settings.bgcolor;
|
|
ctx_lhs.strokeStyle = '#888';
|
|
ctx_lhs.fillRect(0, 0, 6.5, ex.visible_page_height);
|
|
ctx_lhs.strokeRect(0, 0, 6.5, ex.visible_page_height);
|
|
|
|
ctx_rhs.beginPath();
|
|
ctx_rhs.fillStyle = this.settings.bgcolor;
|
|
ctx_rhs.strokeStyle = '#888';
|
|
ctx_rhs.fillRect(0, 0, 6.5, ex.visible_page_height);
|
|
ctx_rhs.strokeRect(0, 0, 6.5, ex.visible_page_height);
|
|
|
|
ctx.beginPath();
|
|
ctx.fillStyle = '#fff';
|
|
ctx.fillRect(0, 0, this.draw_mid_width, ex.visible_page_height);
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._diff = function() {
|
|
const lhs = this.editor[this.lhsId].getValue();
|
|
const rhs = this.editor[this.rhsId].getValue();
|
|
Timer.start();
|
|
const comparison = new diff(lhs, rhs, this.settings);
|
|
this.trace('change', 'diff time', Timer.stop());
|
|
this.changes = DiffParser(comparison.normal_form());
|
|
this.trace('change', 'parse time', Timer.stop());
|
|
if (this._current_diff === undefined && this.changes.length) {
|
|
// go to first difference on start-up where values are provided in
|
|
// settings.
|
|
this._current_diff = 0;
|
|
if (this._initializing) {
|
|
this._scroll_to_change(this.changes[0]);
|
|
}
|
|
}
|
|
this.trace('change', 'scroll_to_change time', Timer.stop());
|
|
this._calculate_offsets(this.changes);
|
|
this.trace('change', 'offsets time', Timer.stop());
|
|
this._markup_changes(this.changes);
|
|
this.trace('change', 'markup time', Timer.stop());
|
|
this._draw_diff(this.changes);
|
|
this.trace('change', 'draw time', Timer.stop());
|
|
this.element.trigger('updated');
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._get_viewport_side = function(editor_name) {
|
|
return this.editor[editor_name].getViewport();
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._is_change_in_view = function(side, vp, change) {
|
|
return (change[`${side}-line-from`] >= vp.from && change[`${side}-line-from`] <= vp.to) ||
|
|
(change[`${side}-line-to`] >= vp.from && change[`${side}-line-to`] <= vp.to) ||
|
|
(vp.from >= change[`${side}-line-from`] && vp.to <= change[`${side}-line-to`]);
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._set_top_offset = function (editor_name1) {
|
|
// save the current scroll position of the editor
|
|
const saveY = this.editor[editor_name1].getScrollInfo().top;
|
|
// temporarily scroll to top
|
|
this.editor[editor_name1].scrollTo(null, 0);
|
|
|
|
// this is the distance from the top of the screen to the top of the
|
|
// content of the first codemirror editor
|
|
const topnode = this.element.find('.CodeMirror-measure').first();
|
|
const top_offset = topnode.offset().top - 4;
|
|
if (!top_offset) {
|
|
return false;
|
|
}
|
|
// restore editor's scroll position
|
|
this.editor[editor_name1].scrollTo(null, saveY);
|
|
|
|
this.draw_top_offset = 0.5 - top_offset;
|
|
return true;
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._calculate_offsets = function (changes) {
|
|
const { jQuery } = this;
|
|
const led = this.editor[this.lhsId];
|
|
const red = this.editor[this.rhsId];
|
|
|
|
if (this.em_height == null) {
|
|
if(!this._set_top_offset(this.lhsId)) return; //try again
|
|
this.em_height = led.defaultTextHeight();
|
|
if (!this.em_height) {
|
|
console.warn('Failed to calculate offsets, using 18 by default');
|
|
this.em_height = 18;
|
|
}
|
|
this.draw_lhs_min = 0.5;
|
|
this.draw_mid_width = jQuery('#' + this.lhsId + '-' + this.rhsId + '-canvas').width();
|
|
this.draw_rhs_max = this.draw_mid_width - 0.5; //24.5;
|
|
this.draw_lhs_width = 5;
|
|
this.draw_rhs_width = 5;
|
|
this.trace('calc', 'change offsets calculated', {
|
|
top_offset: this.draw_top_offset,
|
|
lhs_min: this.draw_lhs_min,
|
|
rhs_max: this.draw_rhs_max,
|
|
lhs_width: this.draw_lhs_width,
|
|
rhs_width: this.draw_rhs_width
|
|
});
|
|
}
|
|
const lhschc = led.charCoords({line: 0});
|
|
const rhschc = red.charCoords({line: 0});
|
|
const lhsvp = this._get_viewport_side(this.lhsId);
|
|
const rhsvp = this._get_viewport_side(this.rhsId);
|
|
|
|
for (const change of changes) {
|
|
if (this.settings.viewport &&
|
|
!this._is_change_in_view('lhs', lhsvp, change) &&
|
|
!this._is_change_in_view('rhs', rhsvp, change)) {
|
|
// if the change is outside the viewport, skip
|
|
delete change['lhs-y-start'];
|
|
delete change['lhs-y-end'];
|
|
delete change['rhs-y-start'];
|
|
delete change['rhs-y-end'];
|
|
continue;
|
|
}
|
|
const llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
|
|
const llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
|
|
const rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
|
|
const rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
|
|
|
|
let lhsStart;
|
|
let lhsEnd;
|
|
let rhsStart;
|
|
let rhsEnd;
|
|
const lineWrapping = led.getOption('lineWrapping')
|
|
|| red.getOption('lineWrapping');
|
|
if (lineWrapping) {
|
|
// If using line-wrapping, we must get the height of the line, but
|
|
// this is expensive to call.
|
|
lhsStart = led.cursorCoords({ line: llf, ch: 0 }, 'page');
|
|
lhsEnd = led.cursorCoords({ line: llt, ch: 0 }, 'page');
|
|
lhsEnd.bottom = lhsEnd.top + led.getLineHandle(llt).height;
|
|
rhsStart = red.cursorCoords({ line: rlf, ch: 0 }, 'page');
|
|
rhsEnd = red.cursorCoords({ line: rlt, ch: 0 }, 'page');
|
|
rhsEnd.bottom = rhsEnd.top + red.getLineHandle(rlt).height;
|
|
}
|
|
else {
|
|
// If not using line-wrapping, we can calculate the line position
|
|
lhsStart = {
|
|
top: lhschc.top + llf * this.em_height,
|
|
bottom: lhschc.bottom + llf * this.em_height + 2
|
|
};
|
|
lhsEnd = {
|
|
top: lhschc.top + llt * this.em_height,
|
|
bottom: lhschc.bottom + llt * this.em_height + 2
|
|
};
|
|
rhsStart = {
|
|
top: rhschc.top + rlf * this.em_height,
|
|
bottom: rhschc.bottom + rlf * this.em_height + 2
|
|
};
|
|
rhsEnd = {
|
|
top: rhschc.top + rlt * this.em_height,
|
|
bottom: rhschc.bottom + rlt * this.em_height + 2
|
|
};
|
|
}
|
|
|
|
if (change.op == 'a') {
|
|
// adds (right), normally start from the end of the lhs,
|
|
// except for the case when the start of the rhs is 0
|
|
if (rlf > 0) {
|
|
lhsStart.top = lhsStart.bottom;
|
|
lhsStart.bottom += this.em_height;
|
|
lhsEnd = lhsStart;
|
|
}
|
|
}
|
|
else if (change.op == 'd') {
|
|
// deletes (left) normally finish from the end of the rhs,
|
|
// except for the case when the start of the lhs is 0
|
|
if (llf > 0) {
|
|
rhsStart.top = rhsStart.bottom;
|
|
rhsStart.bottom += this.em_height;
|
|
rhsEnd = rhsStart;
|
|
}
|
|
}
|
|
change['lhs-y-start'] = this.draw_top_offset + lhsStart.top;
|
|
if (change.op == 'c' || change.op == 'd') {
|
|
change['lhs-y-end'] = this.draw_top_offset + lhsEnd.bottom;
|
|
}
|
|
else {
|
|
change['lhs-y-end'] = this.draw_top_offset + lhsEnd.top;
|
|
}
|
|
change['rhs-y-start'] = this.draw_top_offset + rhsStart.top;
|
|
if (change.op == 'c' || change.op == 'a') {
|
|
change['rhs-y-end'] = this.draw_top_offset + rhsEnd.bottom;
|
|
}
|
|
else {
|
|
change['rhs-y-end'] = this.draw_top_offset + rhsEnd.top;
|
|
}
|
|
this.trace('calc', 'change calculated', change);
|
|
}
|
|
return changes;
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._markup_changes = function (changes) {
|
|
const { jQuery } = this;
|
|
this.element.find('.merge-button').remove(); //clear
|
|
|
|
var self = this;
|
|
const led = this.editor[this.lhsId];
|
|
const red = this.editor[this.rhsId];
|
|
const current_diff = this._current_diff;
|
|
const lhsvp = this._get_viewport_side(this.lhsId);
|
|
const rhsvp = this._get_viewport_side(this.rhsId);
|
|
|
|
Timer.start();
|
|
led.operation(() => {
|
|
for (let i = 0; i < changes.length; ++i) {
|
|
const change = changes[i];
|
|
if (!this._is_change_in_view('lhs', lhsvp, change)) {
|
|
// if the change is outside the viewport, skip
|
|
continue;
|
|
}
|
|
|
|
const llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
|
|
const llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
|
|
const rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
|
|
|
|
const clazz = ['mergely', 'lhs', change.op, 'cid-' + i];
|
|
led.addLineClass(llf, 'background', 'start');
|
|
led.addLineClass(llt, 'background', 'end');
|
|
if (change['lhs-line-from'] < 0) {
|
|
clazz.push('empty');
|
|
}
|
|
|
|
if (current_diff === i) {
|
|
if (llf != llt) {
|
|
led.addLineClass(llf, 'background', 'current');
|
|
}
|
|
led.addLineClass(llt, 'background', 'current');
|
|
for (let j = llf; j <= llt; ++j) {
|
|
led.addLineClass(j, 'gutter', 'mergely current');
|
|
}
|
|
}
|
|
if (llf == 0 && llt == 0 && rlf == 0) {
|
|
led.addLineClass(llf, 'background', clazz.join(' '));
|
|
led.addLineClass(llf, 'background', 'first');
|
|
}
|
|
else {
|
|
// apply change for each line in-between the changed lines
|
|
for (let j = llf; j <= llt; ++j) {
|
|
led.addLineClass(j, 'background', clazz.join(' '));
|
|
led.addLineClass(j, 'background', clazz.join(' '));
|
|
}
|
|
}
|
|
|
|
if (!red.getOption('readOnly')) {
|
|
// add widgets to lhs, if rhs is not read only
|
|
const rhs_button = this.merge_rhs_button.cloneNode(true);
|
|
if (rhs_button.button) {
|
|
//jquery-ui support
|
|
rhs_button.button({icons: {primary: 'ui-icon-triangle-1-e'}, text: false});
|
|
}
|
|
rhs_button.id = `merge-rhs-${i}`;
|
|
led.setGutterMarker(llf, 'merge', rhs_button);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.trace('change', 'markup lhs-editor time', Timer.stop());
|
|
red.operation(() => {
|
|
for (let i = 0; i < changes.length; ++i) {
|
|
const change = changes[i];
|
|
if (!this._is_change_in_view('rhs', rhsvp, change)) {
|
|
// if the change is outside the viewport, skip
|
|
continue;
|
|
}
|
|
|
|
const llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
|
|
const rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
|
|
const rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
|
|
|
|
const clazz = ['mergely', 'rhs', change.op, 'cid-' + i];
|
|
red.addLineClass(rlf, 'background', 'start');
|
|
red.addLineClass(rlt, 'background', 'end');
|
|
if (change['rhs-line-from'] < 0) {
|
|
clazz.push('empty');
|
|
}
|
|
|
|
if (current_diff === i) {
|
|
if (rlf != rlt) {
|
|
red.addLineClass(rlf, 'background', 'current');
|
|
}
|
|
red.addLineClass(rlt, 'background', 'current');
|
|
for (let j = rlf; j <= rlt; ++j) {
|
|
red.addLineClass(j, 'gutter', 'mergely current');
|
|
}
|
|
}
|
|
if (rlf == 0 && rlt == 0 && llf == 0) {
|
|
red.addLineClass(rlf, 'background', clazz.join(' '));
|
|
red.addLineClass(rlf, 'background', 'first');
|
|
}
|
|
else {
|
|
// apply change for each line in-between the changed lines
|
|
for (let j = rlf; j <= rlt; ++j) {
|
|
red.addLineClass(j, 'background', clazz.join(' '));
|
|
red.addLineClass(j, 'background', clazz.join(' '));
|
|
}
|
|
}
|
|
|
|
if (!led.getOption('readOnly')) {
|
|
// add widgets to rhs, if lhs is not read only
|
|
const lhs_button = this.merge_lhs_button.cloneNode(true);
|
|
if (lhs_button.button) {
|
|
//jquery-ui support
|
|
lhs_button.button({icons: {primary: 'ui-icon-triangle-1-w'}, text: false});
|
|
}
|
|
// lhs_button.addClass('merge-button');
|
|
// lhs_button.attr('id', 'merge-lhs-' + i);
|
|
lhs_button.id = `merge-lhs-${i}`;
|
|
red.setGutterMarker(rlf, 'merge', lhs_button);
|
|
}
|
|
}
|
|
});
|
|
this.trace('change', 'markup rhs-editor time', Timer.stop());
|
|
|
|
// mark text deleted, LCS changes
|
|
const marktext = [];
|
|
for (let i = 0; this.settings.lcs && i < changes.length; ++i) {
|
|
const change = changes[i];
|
|
const llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
|
|
const llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
|
|
const rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
|
|
const rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
|
|
|
|
if (change.op == 'd') {
|
|
// apply delete to cross-out (left-hand side only)
|
|
const from = llf;
|
|
const to = llt;
|
|
|
|
if (this._is_change_in_view('lhs', lhsvp, change)) {
|
|
// the change is within the viewport
|
|
const to_ln = led.lineInfo(to);
|
|
if (to_ln) {
|
|
marktext.push([led, {line:from, ch:0}, {line:to, ch:to_ln.text.length}, {className: 'mergely ch d lhs'}]);
|
|
}
|
|
}
|
|
}
|
|
else if (change.op == 'c') {
|
|
// apply LCS changes to each line
|
|
for (let j = llf, k = rlf;
|
|
((j >= 0) && (j <= llt)) || ((k >= 0) && (k <= rlt));
|
|
++j, ++k) {
|
|
let lhs_line;
|
|
let rhs_line;
|
|
if (k > rlt) {
|
|
// lhs continues past rhs, mark lhs as deleted
|
|
lhs_line = led.getLine( j );
|
|
if (!lhs_line) {
|
|
continue;
|
|
}
|
|
marktext.push([led, {line:j, ch:0}, {line:j, ch:lhs_line.length}, {className: 'mergely ch d lhs'}]);
|
|
continue;
|
|
}
|
|
if (j > llt) {
|
|
// rhs continues past lhs, mark rhs as added
|
|
rhs_line = red.getLine( k );
|
|
if (!rhs_line) {
|
|
continue;
|
|
}
|
|
marktext.push([red, {line:k, ch:0}, {line:k, ch:rhs_line.length}, {className: 'mergely ch a rhs'}]);
|
|
continue;
|
|
}
|
|
lhs_line = led.getLine( j );
|
|
rhs_line = red.getLine( k );
|
|
const lcs = new LCS(lhs_line, rhs_line, {
|
|
ignoreaccents: !!this.settings.ignoreaccents,
|
|
ignorews: !!this.settings.ignorews
|
|
});
|
|
lcs.diff(
|
|
function added (from, to) {
|
|
if (self._is_change_in_view('rhs', rhsvp, change)) {
|
|
marktext.push([
|
|
red,
|
|
{ line: k, ch: from },
|
|
{ line: k, ch: to },
|
|
{ className: 'mergely ch a rhs' }
|
|
]);
|
|
}
|
|
},
|
|
function removed (from, to) {
|
|
if (self._is_change_in_view('lhs', lhsvp, change)) {
|
|
marktext.push([
|
|
led,
|
|
{ line: j, ch: from },
|
|
{ line: j, ch: to },
|
|
{ className: 'mergely ch d lhs' }
|
|
]);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
}
|
|
}
|
|
this.trace('change', 'LCS marktext time', Timer.stop());
|
|
|
|
// mark changes outside closure
|
|
led.operation(() => {
|
|
// apply lhs markup
|
|
for (let i = 0; i < marktext.length; ++i) {
|
|
const m = marktext[i];
|
|
if (m[0].doc.id != led.getDoc().id) continue;
|
|
this.chfns[`${this.id}-lhs`].push(m[0].markText(m[1], m[2], m[3]));
|
|
}
|
|
});
|
|
red.operation(() => {
|
|
// apply lhs markup
|
|
for (let i = 0; i < marktext.length; ++i) {
|
|
const m = marktext[i];
|
|
if (m[0].doc.id != red.getDoc().id) continue;
|
|
this.chfns[`${this.id}-rhs`].push(m[0].markText(m[1], m[2], m[3]));
|
|
}
|
|
});
|
|
|
|
this.trace('change', 'LCS markup time', Timer.stop());
|
|
|
|
// FIXME: this can be better
|
|
// merge buttons
|
|
const ed = {lhs:led, rhs:red};
|
|
this.element.find('.merge-button').on('click', (ev) => {
|
|
// side of mouseenter
|
|
let side = 'rhs';
|
|
let oside = 'lhs';
|
|
const parent = jQuery(ev.target).parents(`#${this.id}-editor-lhs`);
|
|
if (parent.length) {
|
|
side = 'lhs';
|
|
oside = 'rhs';
|
|
}
|
|
const pos = ed[side].coordsChar({
|
|
left: ev.pageX,
|
|
top: ev.pageY
|
|
});
|
|
|
|
// get the change id
|
|
let cid = null;
|
|
const info = ed[side].lineInfo(pos.line);
|
|
jQuery.each(info.bgClass.split(' '), function(i, clazz) {
|
|
if (clazz.indexOf('cid-') == 0) {
|
|
cid = parseInt(clazz.split('-')[1], 10);
|
|
return false;
|
|
}
|
|
});
|
|
const change = this.changes[cid];
|
|
this._merge_change(change, side, oside);
|
|
return false;
|
|
});
|
|
this.trace('change', 'markup buttons time', Timer.stop());
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._merge_change = function(change, side, oside) {
|
|
if (!change) {
|
|
return;
|
|
}
|
|
const { CodeMirror } = this;
|
|
const led = this.editor[this.lhsId];
|
|
const red = this.editor[this.rhsId];
|
|
const ed = { lhs: led, rhs: red };
|
|
const from = change[`${side}-line-from`];
|
|
const to = change[`${side}-line-to`];
|
|
const ofrom = change[`${oside}-line-from`];
|
|
const oto = change[`${oside}-line-to`];
|
|
const doc = ed[side].getDoc();
|
|
const odoc = ed[oside].getDoc();
|
|
const fromlen = from >= 0 ? doc.getLine(from).length + 1 : 0;
|
|
const tolen = to >= 0 ? doc.getLine(to).length + 1 : 0;
|
|
const otolen = oto >= 0 ? odoc.getLine(oto).length + 1 : 0;
|
|
const ofromlen = ofrom >= 0 ? odoc.getLine(ofrom).length + 1 : 0;
|
|
|
|
let text;
|
|
if (change.op === 'c') {
|
|
text = doc.getRange(CodeMirror.Pos(from, 0), CodeMirror.Pos(to, tolen));
|
|
odoc.replaceRange(text, CodeMirror.Pos(ofrom, 0), CodeMirror.Pos(oto, otolen));
|
|
} else if ((oside === 'lhs' && change.op === 'd') || (oside === 'rhs' && change.op === 'a')) {
|
|
if (from > 0) {
|
|
text = doc.getRange(CodeMirror.Pos(from, fromlen), CodeMirror.Pos(to, tolen));
|
|
ofrom += 1;
|
|
} else {
|
|
text = doc.getRange(CodeMirror.Pos(0, 0), CodeMirror.Pos(to + 1, 0));
|
|
}
|
|
odoc.replaceRange(text, CodeMirror.Pos(ofrom - 1, 0), CodeMirror.Pos(oto + 1, 0));
|
|
} else if ((oside === 'rhs' && change.op === 'd') || (oside === 'lhs' && change.op === 'a')) {
|
|
if (from > 0) {
|
|
fromlen = doc.getLine(from - 1).length + 1;
|
|
text = doc.getRange(CodeMirror.Pos(from - 1, fromlen), CodeMirror.Pos(to, tolen));
|
|
} else {
|
|
text = doc.getRange(CodeMirror.Pos(0, 0), CodeMirror.Pos(to + 1, 0));
|
|
}
|
|
if (ofrom < 0) {
|
|
ofrom = 0;
|
|
}
|
|
odoc.replaceRange(text, CodeMirror.Pos(ofrom, ofromlen));
|
|
}
|
|
this._scroll_to_change(change);
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._draw_info = function() {
|
|
const { jQuery } = this;
|
|
const visible_page_height = jQuery(this.editor[this.lhsId].getScrollerElement()).height() + 17; // fudged
|
|
const gutter_height = jQuery(this.editor[this.lhsId].getScrollerElement()).children(':first-child').height();
|
|
const dcanvas = document.getElementById(this.lhsId + '-' + this.rhsId + '-canvas');
|
|
if (dcanvas == undefined) throw 'Failed to find: ' + this.lhsId + '-' + this.rhsId + '-canvas';
|
|
const clhs = this.element.find('#' + this.id + '-lhs-margin');
|
|
const crhs = this.element.find('#' + this.id + '-rhs-margin');
|
|
return {
|
|
visible_page_height: visible_page_height,
|
|
gutter_height: gutter_height,
|
|
visible_page_ratio: (visible_page_height / gutter_height),
|
|
margin_ratio: (visible_page_height / gutter_height),
|
|
lhs_scroller: jQuery(this.editor[this.lhsId].getScrollerElement()),
|
|
rhs_scroller: jQuery(this.editor[this.rhsId].getScrollerElement()),
|
|
lhs_lines: this.editor[this.lhsId].lineCount(),
|
|
rhs_lines: this.editor[this.rhsId].lineCount(),
|
|
dcanvas: dcanvas,
|
|
clhs: clhs,
|
|
crhs: crhs,
|
|
lhs_xyoffset: jQuery(clhs).offset(),
|
|
rhs_xyoffset: jQuery(crhs).offset()
|
|
};
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype._draw_diff = function(changes) {
|
|
const { jQuery } = this;
|
|
const ex = this._draw_info();
|
|
const mcanvas_lhs = ex.clhs.get(0);
|
|
const mcanvas_rhs = ex.crhs.get(0);
|
|
const ctx = ex.dcanvas.getContext('2d');
|
|
const ctx_lhs = mcanvas_lhs.getContext('2d');
|
|
const ctx_rhs = mcanvas_rhs.getContext('2d');
|
|
|
|
this.trace('draw', 'visible_page_height', ex.visible_page_height);
|
|
this.trace('draw', 'gutter_height', ex.gutter_height);
|
|
this.trace('draw', 'visible_page_ratio', ex.visible_page_ratio);
|
|
this.trace('draw', 'lhs-scroller-top', ex.lhs_scroller.scrollTop());
|
|
this.trace('draw', 'rhs-scroller-top', ex.rhs_scroller.scrollTop());
|
|
|
|
jQuery.each(this.element.find('canvas'), function () {
|
|
jQuery(this).get(0).height = ex.visible_page_height;
|
|
});
|
|
|
|
ex.clhs.unbind('click');
|
|
ex.crhs.unbind('click');
|
|
|
|
ctx_lhs.beginPath();
|
|
ctx_lhs.fillStyle = this.settings.bgcolor;
|
|
ctx_lhs.strokeStyle = '#888';
|
|
ctx_lhs.fillRect(0, 0, 6.5, ex.visible_page_height);
|
|
ctx_lhs.strokeRect(0, 0, 6.5, ex.visible_page_height);
|
|
ctx_lhs.stroke();
|
|
|
|
ctx_rhs.beginPath();
|
|
ctx_rhs.fillStyle = this.settings.bgcolor;
|
|
ctx_rhs.strokeStyle = '#888';
|
|
ctx_rhs.fillRect(0, 0, 6.5, ex.visible_page_height);
|
|
ctx_rhs.strokeRect(0, 0, 6.5, ex.visible_page_height);
|
|
ctx_rhs.stroke();
|
|
|
|
const lhsvp = this._get_viewport_side(this.lhsId);
|
|
const rhsvp = this._get_viewport_side(this.rhsId);
|
|
|
|
for (let i = 0; i < changes.length; ++i) {
|
|
const change = changes[i];
|
|
if (!this._is_change_in_view('lhs', lhsvp, change) &&
|
|
!this._is_change_in_view('rhs', rhsvp, change)) {
|
|
// if the change is outside the viewport, skip
|
|
continue;
|
|
}
|
|
|
|
const fill = this.settings.fgcolor[change.op];
|
|
if (this._current_diff === i) {
|
|
fill = this.current_diff_color;
|
|
}
|
|
|
|
this.trace('draw', change);
|
|
// margin indicators
|
|
const lhs_y_start = ((change['lhs-y-start'] + ex.lhs_scroller.scrollTop()) * ex.visible_page_ratio);
|
|
const lhs_y_end = ((change['lhs-y-end'] + ex.lhs_scroller.scrollTop()) * ex.visible_page_ratio) + 1;
|
|
const rhs_y_start = ((change['rhs-y-start'] + ex.rhs_scroller.scrollTop()) * ex.visible_page_ratio);
|
|
const rhs_y_end = ((change['rhs-y-end'] + ex.rhs_scroller.scrollTop()) * ex.visible_page_ratio) + 1;
|
|
this.trace('draw', 'marker calculated', lhs_y_start, lhs_y_end, rhs_y_start, rhs_y_end);
|
|
|
|
ctx_lhs.beginPath();
|
|
ctx_lhs.fillStyle = fill;
|
|
ctx_lhs.strokeStyle = '#000';
|
|
ctx_lhs.lineWidth = 0.5;
|
|
ctx_lhs.fillRect(1.5, lhs_y_start, 4.5, Math.max(lhs_y_end - lhs_y_start, 5));
|
|
ctx_lhs.strokeRect(1.5, lhs_y_start, 4.5, Math.max(lhs_y_end - lhs_y_start, 5));
|
|
ctx_lhs.stroke();
|
|
|
|
ctx_rhs.beginPath();
|
|
ctx_rhs.fillStyle = fill;
|
|
ctx_rhs.strokeStyle = '#000';
|
|
ctx_rhs.lineWidth = 0.5;
|
|
ctx_rhs.fillRect(1.5, rhs_y_start, 4.5, Math.max(rhs_y_end - rhs_y_start, 5));
|
|
ctx_rhs.strokeRect(1.5, rhs_y_start, 4.5, Math.max(rhs_y_end - rhs_y_start, 5));
|
|
ctx_rhs.stroke();
|
|
|
|
lhs_y_start = change['lhs-y-start'];
|
|
lhs_y_end = change['lhs-y-end'];
|
|
rhs_y_start = change['rhs-y-start'];
|
|
rhs_y_end = change['rhs-y-end'];
|
|
|
|
const radius = 3;
|
|
|
|
// draw left box
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = fill;
|
|
ctx.lineWidth = (this._current_diff === i) ? 1.5 : 1;
|
|
|
|
const rectWidth = this.draw_lhs_width;
|
|
const rectHeight = lhs_y_end - lhs_y_start - 1;
|
|
const rectX = this.draw_lhs_min;
|
|
const rectY = lhs_y_start;
|
|
// top and top top-right corner
|
|
|
|
// draw left box
|
|
ctx.moveTo(rectX, rectY);
|
|
if (navigator.appName == 'Microsoft Internet Explorer') {
|
|
// IE arcs look awful
|
|
ctx.lineTo(this.draw_lhs_min + this.draw_lhs_width, lhs_y_start);
|
|
ctx.lineTo(this.draw_lhs_min + this.draw_lhs_width, lhs_y_end + 1);
|
|
ctx.lineTo(this.draw_lhs_min, lhs_y_end + 1);
|
|
}
|
|
else {
|
|
if (rectHeight <= 0) {
|
|
ctx.lineTo(rectX + rectWidth, rectY);
|
|
}
|
|
else {
|
|
ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + radius, radius);
|
|
ctx.arcTo(rectX + rectWidth, rectY + rectHeight, rectX + rectWidth - radius, rectY + rectHeight, radius);
|
|
}
|
|
// bottom line
|
|
ctx.lineTo(rectX, rectY + rectHeight);
|
|
}
|
|
ctx.stroke();
|
|
|
|
rectWidth = this.draw_rhs_width;
|
|
rectHeight = rhs_y_end - rhs_y_start - 1;
|
|
rectX = this.draw_rhs_max;
|
|
rectY = rhs_y_start;
|
|
|
|
// draw right box
|
|
ctx.moveTo(rectX, rectY);
|
|
if (navigator.appName == 'Microsoft Internet Explorer') {
|
|
ctx.lineTo(this.draw_rhs_max - this.draw_rhs_width, rhs_y_start);
|
|
ctx.lineTo(this.draw_rhs_max - this.draw_rhs_width, rhs_y_end + 1);
|
|
ctx.lineTo(this.draw_rhs_max, rhs_y_end + 1);
|
|
}
|
|
else {
|
|
if (rectHeight <= 0) {
|
|
ctx.lineTo(rectX - rectWidth, rectY);
|
|
}
|
|
else {
|
|
ctx.arcTo(rectX - rectWidth, rectY, rectX - rectWidth, rectY + radius, radius);
|
|
ctx.arcTo(rectX - rectWidth, rectY + rectHeight, rectX - radius, rectY + rectHeight, radius);
|
|
}
|
|
ctx.lineTo(rectX, rectY + rectHeight);
|
|
}
|
|
ctx.stroke();
|
|
|
|
// connect boxes
|
|
const cx = this.draw_lhs_min + this.draw_lhs_width;
|
|
const cy = lhs_y_start + (lhs_y_end + 1 - lhs_y_start) / 2.0;
|
|
const dx = this.draw_rhs_max - this.draw_rhs_width;
|
|
const dy = rhs_y_start + (rhs_y_end + 1 - rhs_y_start) / 2.0;
|
|
ctx.moveTo(cx, cy);
|
|
if (cy == dy) {
|
|
ctx.lineTo(dx, dy);
|
|
}
|
|
else {
|
|
// fancy!
|
|
ctx.bezierCurveTo(
|
|
cx + 12, cy - 3, // control-1 X,Y
|
|
dx - 12, dy - 3, // control-2 X,Y
|
|
dx, dy);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
// visible window feedback
|
|
ctx_lhs.fillStyle = this.settings.vpcolor;
|
|
ctx_rhs.fillStyle = this.settings.vpcolor;
|
|
|
|
const lto = ex.clhs.height() * ex.visible_page_ratio;
|
|
const lfrom = (ex.lhs_scroller.scrollTop() / ex.gutter_height) * ex.clhs.height();
|
|
const rto = ex.crhs.height() * ex.visible_page_ratio;
|
|
const rfrom = (ex.rhs_scroller.scrollTop() / ex.gutter_height) * ex.crhs.height();
|
|
this.trace('draw', 'cls.height', ex.clhs.height());
|
|
this.trace('draw', 'lhs_scroller.scrollTop()', ex.lhs_scroller.scrollTop());
|
|
this.trace('draw', 'gutter_height', ex.gutter_height);
|
|
this.trace('draw', 'visible_page_ratio', ex.visible_page_ratio);
|
|
this.trace('draw', 'lhs from', lfrom, 'lhs to', lto);
|
|
this.trace('draw', 'rhs from', rfrom, 'rhs to', rto);
|
|
|
|
ctx_lhs.fillRect(1.5, lfrom, 4.5, lto);
|
|
ctx_rhs.fillRect(1.5, rfrom, 4.5, rto);
|
|
|
|
ex.clhs.click(function (ev) {
|
|
const y = ev.pageY - ex.lhs_xyoffset.top - (lto / 2);
|
|
const sto = Math.max(0, (y / mcanvas_lhs.height) * ex.lhs_scroller.get(0).scrollHeight);
|
|
ex.lhs_scroller.scrollTop(sto);
|
|
});
|
|
ex.crhs.click(function (ev) {
|
|
const y = ev.pageY - ex.rhs_xyoffset.top - (rto / 2);
|
|
const sto = Math.max(0, (y / mcanvas_rhs.height) * ex.rhs_scroller.get(0).scrollHeight);
|
|
ex.rhs_scroller.scrollTop(sto);
|
|
});
|
|
};
|
|
|
|
CodeMirrorDiffView.prototype.trace = function(name) {
|
|
if(this.settings._debug.indexOf(name) >= 0) {
|
|
arguments[0] = name + ':';
|
|
console.log([].slice.apply(arguments));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {String} HTML representing a single element
|
|
* @return {Element}
|
|
*/
|
|
function htmlToElement(html) {
|
|
var template = document.createElement('template');
|
|
html = html.trim(); // Never return a text node of whitespace as the result
|
|
template.innerHTML = html;
|
|
return template.content.firstChild;
|
|
}
|
|
|
|
function getMarginTemplate({ id, side }) {
|
|
return `\
|
|
<div class="mergely-margin" width="10px">
|
|
<canvas id="${id}-${side}-margin" width="8px" height="10px"></canvas>
|
|
</div>;`;
|
|
}
|
|
|
|
function getEditorTemplate({ id, side }) {
|
|
return `\
|
|
<div style="position: relative;" id="${id}-editor-${side}" class="mergely-column">
|
|
<textarea id="${id}-${side}"></textarea>
|
|
</div>`;
|
|
}
|
|
|
|
function getCenterCanvasTemplate({ id }) {
|
|
return `\
|
|
<div class="mergely-canvas">
|
|
<canvas id="${id}-lhs-${id}-rhs-canvas" style="width:28px" width="28px">
|
|
</canvas>
|
|
</div>`;
|
|
}
|
|
|
|
function getSplash({ icon, notice, left }) {
|
|
return `\
|
|
<div
|
|
class="mergely-splash"
|
|
style="position: absolute; z-index: 100; background-color: #fff; border: 1px solid black; height: 70px; width: 300px; left: ${left}px; padding: 10px 10px 0 10px; font-family: arial; font-size: 11px;">
|
|
<p>
|
|
<img width="36" height="36" alt="mergely" src="${icon}" style="float:left;padding-right:10px;" />
|
|
This software is a Combined Work using Mergely and is covered by the
|
|
${notice} license. For the full license, see
|
|
<a target="_blank" href="http://www.mergely.com">http://www.mergely.com/license</a>.
|
|
</p>
|
|
</div>`;
|
|
}
|
|
|
|
module.exports = CodeMirrorDiffView;
|