mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Keep local/remote diff objects in sync as they expand
This commit is contained in:
Nick O'Leary
parent
5bdb9e972e
commit
eaf08a9971
@ -563,6 +563,7 @@ RED.diff = (function() {
|
||||
return div;
|
||||
}
|
||||
function createNodePropertiesTable(def,node,localNodeObj,remoteNodeObj) {
|
||||
var propertyElements = {};
|
||||
var localNode = localNodeObj.node;
|
||||
var remoteNode;
|
||||
if (remoteNodeObj) {
|
||||
@ -589,7 +590,7 @@ RED.diff = (function() {
|
||||
localCell.addClass("node-diff-node-unchanged");
|
||||
$('<span class="node-diff-status"></span>').appendTo(localCell);
|
||||
element = $('<span class="node-diff-element"></span>').appendTo(localCell);
|
||||
RED.utils.createObjectElement(localNode.id).appendTo(element);
|
||||
propertyElements['local.id'] = RED.utils.createObjectElement(localNode.id).appendTo(element);
|
||||
} else {
|
||||
localCell.addClass("node-diff-empty");
|
||||
}
|
||||
@ -599,7 +600,7 @@ RED.diff = (function() {
|
||||
if (remoteNode) {
|
||||
$('<span class="node-diff-status"></span>').appendTo(remoteCell);
|
||||
element = $('<span class="node-diff-element"></span>').appendTo(remoteCell);
|
||||
RED.utils.createObjectElement(remoteNode.id).appendTo(element);
|
||||
propertyElements['remote.id'] = RED.utils.createObjectElement(remoteNode.id).appendTo(element);
|
||||
} else {
|
||||
remoteCell.addClass("node-diff-empty");
|
||||
}
|
||||
@ -632,7 +633,17 @@ RED.diff = (function() {
|
||||
localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged"));
|
||||
$('<span class="node-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
|
||||
element = $('<span class="node-diff-element"></span>').appendTo(localCell);
|
||||
RED.utils.createObjectElement({x:localNode.x,y:localNode.y}).appendTo(element);
|
||||
propertyElements['local.position'] = RED.utils.createObjectElement({x:localNode.x,y:localNode.y},
|
||||
{
|
||||
path: "position",
|
||||
exposeApi: true,
|
||||
ontoggle: function(path,state) {
|
||||
if (propertyElements['remote.'+path]) {
|
||||
propertyElements['remote.'+path].prop('expand')(path,state)
|
||||
}
|
||||
}
|
||||
}
|
||||
).appendTo(element);
|
||||
} else {
|
||||
localCell.addClass("node-diff-empty");
|
||||
}
|
||||
@ -643,7 +654,17 @@ RED.diff = (function() {
|
||||
if (remoteNode) {
|
||||
$('<span class="node-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
|
||||
element = $('<span class="node-diff-element"></span>').appendTo(remoteCell);
|
||||
RED.utils.createObjectElement({x:remoteNode.x,y:remoteNode.y}).appendTo(element);
|
||||
propertyElements['remote.position'] = RED.utils.createObjectElement({x:remoteNode.x,y:remoteNode.y},
|
||||
{
|
||||
path: "position",
|
||||
exposeApi: true,
|
||||
ontoggle: function(path,state) {
|
||||
if (propertyElements['local.'+path]) {
|
||||
propertyElements['local.'+path].prop('expand')(path,state);
|
||||
}
|
||||
}
|
||||
}
|
||||
).appendTo(element);
|
||||
} else {
|
||||
remoteCell.addClass("node-diff-empty");
|
||||
}
|
||||
@ -748,7 +769,17 @@ RED.diff = (function() {
|
||||
$('<span class="node-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(localCell);
|
||||
}
|
||||
element = $('<span class="node-diff-element"></span>').appendTo(localCell);
|
||||
RED.utils.createObjectElement(localNode[d]).appendTo(element);
|
||||
propertyElements['local.'+d] = RED.utils.createObjectElement(localNode[d],
|
||||
{
|
||||
path: d,
|
||||
exposeApi: true,
|
||||
ontoggle: function(path,state) {
|
||||
if (propertyElements['remote.'+d]) {
|
||||
propertyElements['remote.'+d].prop('expand')(path,state)
|
||||
}
|
||||
}
|
||||
}
|
||||
).appendTo(element);
|
||||
} else {
|
||||
localCell.addClass("node-diff-empty");
|
||||
}
|
||||
@ -763,7 +794,17 @@ RED.diff = (function() {
|
||||
$('<span class="node-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(remoteCell);
|
||||
}
|
||||
element = $('<span class="node-diff-element"></span>').appendTo(remoteCell);
|
||||
RED.utils.createObjectElement(remoteNode[d]).appendTo(element);
|
||||
propertyElements['remote.'+d] = RED.utils.createObjectElement(remoteNode[d],
|
||||
{
|
||||
path: d,
|
||||
exposeApi: true,
|
||||
ontoggle: function(path,state) {
|
||||
if (propertyElements['local.'+d]) {
|
||||
propertyElements['local.'+d].prop('expand')(path,state)
|
||||
}
|
||||
}
|
||||
}
|
||||
).appendTo(element);
|
||||
} else {
|
||||
remoteCell.addClass("node-diff-empty");
|
||||
}
|
||||
@ -1009,6 +1050,7 @@ RED.diff = (function() {
|
||||
// console.log(conflicted);
|
||||
return diff;
|
||||
}
|
||||
|
||||
function showDiff(diff) {
|
||||
var localDiff = diff.localDiff;
|
||||
var remoteDiff = diff.remoteDiff;
|
||||
@ -1267,7 +1309,6 @@ RED.diff = (function() {
|
||||
RED.palette.refresh();
|
||||
RED.workspaces.refresh();
|
||||
RED.sidebar.config.refresh();
|
||||
|
||||
}
|
||||
return {
|
||||
init: init,
|
||||
|
||||
@ -50,24 +50,58 @@ RED.utils = (function() {
|
||||
}
|
||||
return result;
|
||||
}
|
||||
function makeExpandable(el,onexpand,expand) {
|
||||
function makeExpandable(el,onbuild,ontoggle,expand) {
|
||||
el.addClass("debug-message-expandable");
|
||||
el.prop('toggle',function() {
|
||||
return function(state) {
|
||||
var parent = el.parent();
|
||||
if (parent.hasClass('collapsed')) {
|
||||
if (state) {
|
||||
if (onbuild && !parent.hasClass('built')) {
|
||||
onbuild();
|
||||
parent.addClass('built');
|
||||
}
|
||||
parent.removeClass('collapsed');
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
if (!state) {
|
||||
parent.addClass('collapsed');
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
el.click(function(e) {
|
||||
var parent = $(this).parent();
|
||||
if (parent.hasClass('collapsed')) {
|
||||
if (onexpand && !parent.hasClass('built')) {
|
||||
onexpand();
|
||||
parent.addClass('built');
|
||||
var currentState = !parent.hasClass('collapsed');
|
||||
if ($(this).prop('toggle')(!currentState)) {
|
||||
if (ontoggle) {
|
||||
ontoggle(!currentState);
|
||||
}
|
||||
parent.removeClass('collapsed');
|
||||
} else {
|
||||
parent.addClass('collapsed');
|
||||
}
|
||||
// if (parent.hasClass('collapsed')) {
|
||||
// if (onbuild && !parent.hasClass('built')) {
|
||||
// onbuild();
|
||||
// parent.addClass('built');
|
||||
// }
|
||||
// if (ontoggle) {
|
||||
// ontoggle(true);
|
||||
// }
|
||||
// parent.removeClass('collapsed');
|
||||
// } else {
|
||||
// parent.addClass('collapsed');
|
||||
// if (ontoggle) {
|
||||
// ontoggle(false);
|
||||
// }
|
||||
// }
|
||||
e.preventDefault();
|
||||
});
|
||||
if (expand) {
|
||||
el.click();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var pinnedPaths = {};
|
||||
@ -189,10 +223,23 @@ RED.utils = (function() {
|
||||
}
|
||||
}
|
||||
|
||||
function buildMessageElement(obj,key,typeHint,hideKey,path,sourceId,rootPath,expandPaths) {
|
||||
function buildMessageElement(obj,options) {
|
||||
options = options || {};
|
||||
var key = options.key;
|
||||
var typeHint = options.typeHint;
|
||||
var hideKey = options.hideKey;
|
||||
var path = options.path;
|
||||
var sourceId = options.sourceId;
|
||||
var rootPath = options.rootPath;
|
||||
var expandPaths = options.expandPaths;
|
||||
var ontoggle = options.ontoggle;
|
||||
var exposeApi = options.exposeApi;
|
||||
|
||||
var subElements = {};
|
||||
var i;
|
||||
var e;
|
||||
var entryObj;
|
||||
var expandableHeader;
|
||||
var header;
|
||||
var headerHead;
|
||||
var value;
|
||||
@ -257,7 +304,7 @@ RED.utils = (function() {
|
||||
$('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html(typeHint||'string').appendTo(header);
|
||||
var row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
|
||||
$('<pre class="debug-message-type-string"></pre>').text(obj).appendTo(row);
|
||||
},checkExpanded(strippedKey,expandPaths));
|
||||
},function(state) {if (ontoggle) { ontoggle(path,state);}}, checkExpanded(strippedKey,expandPaths));
|
||||
}
|
||||
e = $('<span class="debug-message-type-string debug-message-object-header"></span>').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
|
||||
if (/^#[0-9a-f]{6}$/i.test(obj)) {
|
||||
@ -356,7 +403,20 @@ RED.utils = (function() {
|
||||
if (fullLength <= 10) {
|
||||
for (i=0;i<fullLength;i++) {
|
||||
row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(arrayRows);
|
||||
buildMessageElement(data[i],""+i,type==='buffer'?'hex':false,false,path+"["+i+"]",sourceId,rootPath,expandPaths).appendTo(row);
|
||||
subElements[path+"["+i+"]"] = buildMessageElement(
|
||||
data[i],
|
||||
{
|
||||
key: ""+i,
|
||||
typeHint: type==='buffer'?'hex':false,
|
||||
hideKey: false,
|
||||
path: path+"["+i+"]",
|
||||
sourceId: sourceId,
|
||||
rootPath: rootPath,
|
||||
expandPaths: expandPaths,
|
||||
ontoggle: ontoggle,
|
||||
exposeApi: exposeApi
|
||||
}
|
||||
).appendTo(row);
|
||||
}
|
||||
} else {
|
||||
for (i=0;i<fullLength;i+=10) {
|
||||
@ -371,17 +431,35 @@ RED.utils = (function() {
|
||||
return function() {
|
||||
for (var i=min;i<=max;i++) {
|
||||
var row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(parent);
|
||||
buildMessageElement(data[i],""+i,type==='buffer'?'hex':false,false,path+"["+i+"]",sourceId,rootPath,expandPaths).appendTo(row);
|
||||
subElements[path+"["+i+"]"] = buildMessageElement(
|
||||
data[i],
|
||||
{
|
||||
key: ""+i,
|
||||
typeHint: type==='buffer'?'hex':false,
|
||||
hideKey: false,
|
||||
path: path+"["+i+"]",
|
||||
sourceId: sourceId,
|
||||
rootPath: rootPath,
|
||||
expandPaths: expandPaths,
|
||||
ontoggle: ontoggle,
|
||||
exposeApi: exposeApi
|
||||
|
||||
}
|
||||
).appendTo(row);
|
||||
}
|
||||
}
|
||||
})(),checkExpanded(strippedKey,expandPaths,minRange,Math.min(fullLength-1,(minRange+9))));
|
||||
})(),
|
||||
(function() { var path = path+"["+i+"]"; return function(state) {if (ontoggle) { ontoggle(path,state);}}})(),
|
||||
checkExpanded(strippedKey,expandPaths,minRange,Math.min(fullLength-1,(minRange+9))));
|
||||
$('<span class="debug-message-object-key"></span>').html("["+minRange+" … "+Math.min(fullLength-1,(minRange+9))+"]").appendTo(header);
|
||||
}
|
||||
if (fullLength < originalLength) {
|
||||
$('<div class="debug-message-object-entry collapsed"><span class="debug-message-object-key">['+fullLength+' … '+originalLength+']</span></div>').appendTo(arrayRows);
|
||||
}
|
||||
}
|
||||
},checkExpanded(strippedKey,expandPaths));
|
||||
},
|
||||
function(state) {if (ontoggle) { ontoggle(path,state);}},
|
||||
checkExpanded(strippedKey,expandPaths));
|
||||
}
|
||||
} else if (typeof obj === 'object') {
|
||||
element.addClass('collapsed');
|
||||
@ -402,12 +480,28 @@ RED.utils = (function() {
|
||||
newPath += "[\""+keys[i].replace(/"/,"\\\"")+"\"]"
|
||||
}
|
||||
}
|
||||
buildMessageElement(obj[keys[i]],keys[i],false,false,newPath,sourceId,rootPath,expandPaths).appendTo(row);
|
||||
subElements[newPath] = buildMessageElement(
|
||||
obj[keys[i]],
|
||||
{
|
||||
key: keys[i],
|
||||
typeHint: false,
|
||||
hideKey: false,
|
||||
path: newPath,
|
||||
sourceId: sourceId,
|
||||
rootPath: rootPath,
|
||||
expandPaths: expandPaths,
|
||||
ontoggle: ontoggle,
|
||||
exposeApi: exposeApi
|
||||
|
||||
}
|
||||
).appendTo(row);
|
||||
}
|
||||
if (keys.length === 0) {
|
||||
$('<div class="debug-message-object-entry debug-message-type-meta collapsed"></div>').text("empty").appendTo(element);
|
||||
}
|
||||
},checkExpanded(strippedKey,expandPaths));
|
||||
},
|
||||
function(state) {if (ontoggle) { ontoggle(path,state);}},
|
||||
checkExpanded(strippedKey,expandPaths));
|
||||
}
|
||||
if (key) {
|
||||
$('<span class="debug-message-type-meta"></span>').html('object').appendTo(entryObj);
|
||||
@ -434,6 +528,15 @@ RED.utils = (function() {
|
||||
} else {
|
||||
$('<span class="debug-message-type-other"></span>').text(""+obj).appendTo(entryObj);
|
||||
}
|
||||
if (exposeApi) {
|
||||
element.prop('expand', function() { return function(targetPath, state) {
|
||||
if (path === targetPath) {
|
||||
header.prop('toggle')(state);
|
||||
} else if (subElements[targetPath]) {
|
||||
subElements[targetPath].prop('expand')(targetPath,state);
|
||||
}
|
||||
}});
|
||||
}
|
||||
return element;
|
||||
}
|
||||
|
||||
|
||||
@ -441,7 +441,14 @@ RED.debug = (function() {
|
||||
}
|
||||
var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
|
||||
var path = o.property||'';
|
||||
var debugMessage = RED.utils.createObjectElement(payload,/*true*/null,format,false,path,sourceNode&&sourceNode.id,path);
|
||||
var debugMessage = RED.utils.createObjectElement(payload, {
|
||||
key: /*true*/null,
|
||||
typeHint: format,
|
||||
hideKey: false,
|
||||
path: path,
|
||||
sourceId: sourceNode&&sourceNode.id,
|
||||
rootPath: path
|
||||
});
|
||||
// Do this in a separate step so the element functions aren't stripped
|
||||
debugMessage.appendTo(el);
|
||||
// NOTE: relying on function error to have a "type" that all other msgs don't
|
||||
|
||||
Loading…
Reference in New Issue
Block a user