Fixed rendering issue where changes were skipped. Upgraded to work with jquery 1.9.0.

This commit is contained in:
Jamie Peabody
2013-02-03 21:00:30 +00:00
parent 2d0faa2b74
commit eaf41856fa
9 changed files with 84 additions and 330 deletions

View File

@@ -366,7 +366,7 @@ jQuery.extend(Mgly.mergely.prototype, {
var content_height = h;
var 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').css({ 'height': content_height + '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 + 'px', 'height': h + 'px' });
@@ -384,7 +384,8 @@ jQuery.extend(Mgly.mergely.prototype, {
mode: 'text/plain',
readOnly: false,
lineWrapping: false,
lineNumbers: true
lineNumbers: true,
gutters: ['merge', 'CodeMirror-linenumbers']
}
this.lhs_cmsettings = {};
this.rhs_cmsettings = {};
@@ -562,14 +563,12 @@ jQuery.extend(Mgly.mergely.prototype, {
}
else {
// homebrew
var style = 'width:1em;height:1em;background-color:#888;cursor:pointer;text-align:center;color:#eee;border:1px solid: #222;margin-right:5px;';
var style = 'width:1em;height:1em;background-color:#888;cursor:pointer;text-align:center;color:#eee;border:1px solid: #222;margin-right:5px;border-radius:3px;';
merge_lhs_button = '<div style="' + style + '" title="Merge left">&lt;</div>';
merge_rhs_button = '<div style="' + style + '" title="Merge right">&gt;</div>';
}
this.merge_rhs_button = jQuery(merge_rhs_button);
this.merge_lhs_button = jQuery(merge_lhs_button);
if (this.merge_rhs_button.corner) this.merge_rhs_button.corner('3px');
if (this.merge_lhs_button.corner) this.merge_lhs_button.corner('3px');
// create the textarea and canvas elements
jQuery(this.element).append(jQuery('<div class="mergely-margin" style="height: ' + height + '"><canvas id="' + this.id + '-lhs-margin" width="8px" height="' + height + '"></canvas></div>'));
@@ -590,58 +589,6 @@ jQuery.extend(Mgly.mergely.prototype, {
// resize only after bind
this.settings.resize();
// merge
var self = this;
var ed = {lhs:this.editor[this.id + '-lhs'], rhs:this.editor[this.id + '-rhs']};
jQuery('.merge-button').live('click', function(ev){
console.log('lhs hover over', ev, this);
// side of mouseenter
var side = 'rhs';
var oside = 'lhs';
var parent = jQuery(this).parents('#' + self.id + '-editor-lhs');
if (parent.length) {
side = 'lhs';
oside = 'rhs';
}
var pos = ed[side].coordsChar({x:ev.pageX, y:ev.pageY});
console.log('pos', side, pos);
// get the change id
var cid = null;
var info = ed[side].lineInfo(pos.line);
jQuery.each(info.bgClass.split(' '), function(i, clazz) {
console.log('clazz', i, clazz);
if (clazz.indexOf('cid-') == 0) {
cid = parseInt(clazz.split('-')[1]);
return false;
}
});
var change = self.changes[cid];
console.log('change', change);
var line = {lhs: ed['lhs'].lineInfo(change['lhs-line-to']), rhs: ed['rhs'].lineInfo(change['rhs-line-to'])};
var text = ed[side].getRange(
{ 'line': change[side + '-line-from'], 'ch': 0 },
{ 'line': change[side + '-line-to'], 'ch': line[side].text.length });
if (change['op'] == 'c') {
ed[oside].replaceRange( text,
{ 'line': change[oside + '-line-from'], 'ch': 0 },
{ 'line': change[oside + '-line-to'], 'ch': line[oside].text.length });
}
else {// 'a' or 'd'
var from = parseInt(change[oside + '-line-from']);
var to = parseInt(change[oside + '-line-to']);
for (var i = to; i >= from; --i) {
ed[oside].removeLine(i);
}
}
//reset
ed['lhs'].setValue(ed['lhs'].getValue());
ed['rhs'].setValue(ed['rhs'].getValue());
return false;
});
},
_scrolling: function(editor_name) {
@@ -896,8 +843,20 @@ jQuery.extend(Mgly.mergely.prototype, {
cl = clazz + 'lhs end';
led.setLineClass(change['lhs-line-to'], null, cl);
}
if (change['op'] == 'd') {
if (change['op'] == 'a') {
var cl = clazz + 'rhs start';
red.setLineClass(change['rhs-line-from'], null, cl);
if (change['rhs-line-from'] == change['rhs-line-to']) {
cl += ' end';
red.setLineClass(change['rhs-line-to'], null, cl);
}
else {
cl = clazz + 'rhs end';
red.setLineClass(change['rhs-line-to'], null, cl);
}
}
else if (change['op'] == 'd') {
// apply delete to cross-out
var from = change['lhs-line-from'];
var to = change['lhs-line-to'];
@@ -909,17 +868,17 @@ jQuery.extend(Mgly.mergely.prototype, {
}
else if (change['op'] == 'c') {
// apply LCS changes to each line
for (var j = change['lhs-line-from'], k = change['rhs-line-from'], i = 0;
for (var j = change['lhs-line-from'], k = change['rhs-line-from'], p = 0;
((j >= 0) && (j <= change['lhs-line-to'])) || ((k >= 0) && (k <= change['rhs-line-to']));
++j, ++k) {
if (k + i > change['rhs-line-to']) {
if (k + p > change['rhs-line-to']) {
// lhs continues past rhs, mark lhs as deleted
var lhs_line = led.getLine( j );
var func = led.markText({line:j, ch:0}, {line:j, ch:lhs_line.length}, 'mergely ch d lhs');
self.change_funcs.push(func);
continue;
}
if (j + i > change['lhs-line-to']) {
if (j + p > change['lhs-line-to']) {
// rhs continues past lhs, mark rhs as added
var rhs_line = red.getLine( k );
var func = led.markText({line:k, ch:0}, {line:k, ch:lhs_line.length}, 'mergely ch a rhs');
@@ -998,9 +957,9 @@ jQuery.extend(Mgly.mergely.prototype, {
}
// for each line in-between the changed lines, from and to, apply 'bg' class
for (var i = change['lhs-line-from'] + 1; i < change['lhs-line-to']; ++i) {
for (var j = change['lhs-line-from'] + 1; j < change['lhs-line-to']; ++j) {
var cl = clazz + 'lhs';
led.setLineClass(i, null, cl);
led.setLineClass(j, null, cl);
}
// add widgets
@@ -1081,6 +1040,56 @@ jQuery.extend(Mgly.mergely.prototype, {
}
}
});
var ed = {lhs:this.editor[this.id + '-lhs'], rhs:this.editor[this.id + '-rhs']};
jQuery('.merge-button').on('click', function(ev){
// side of mouseenter
var side = 'rhs';
var oside = 'lhs';
var parent = jQuery(this).parents('#' + self.id + '-editor-lhs');
if (parent.length) {
side = 'lhs';
oside = 'rhs';
}
var pos = ed[side].coordsChar({x:ev.pageX, y:ev.pageY});
console.log('pos', side, pos);
// get the change id
var cid = null;
var info = ed[side].lineInfo(pos.line);
jQuery.each(info.bgClass.split(' '), function(i, clazz) {
console.log('clazz', i, clazz);
if (clazz.indexOf('cid-') == 0) {
cid = parseInt(clazz.split('-')[1]);
return false;
}
});
var change = self.changes[cid];
console.log('change', change);
var line = {lhs: ed['lhs'].lineInfo(change['lhs-line-to']), rhs: ed['rhs'].lineInfo(change['rhs-line-to'])};
var text = ed[side].getRange(
{ 'line': change[side + '-line-from'], 'ch': 0 },
{ 'line': change[side + '-line-to'], 'ch': line[side].text.length });
if (change['op'] == 'c') {
ed[oside].replaceRange( text,
{ 'line': change[oside + '-line-from'], 'ch': 0 },
{ 'line': change[oside + '-line-to'], 'ch': line[oside].text.length });
}
else {// 'a' or 'd'
var from = parseInt(change[oside + '-line-from']);
var to = parseInt(change[oside + '-line-to']);
for (var i = to; i >= from; --i) {
ed[oside].removeLine(i);
}
}
//reset
ed['lhs'].setValue(ed['lhs'].getValue());
ed['rhs'].setValue(ed['rhs'].getValue());
return false;
});
},
_draw_diff: function(editor_name1, editor_name2, changes) {
var visible_page_height = jQuery(this.editor[editor_name1].getScrollerElement()).height();