frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Full event passing between debug window and main window

This commit is contained in:
Nick O'Leary 2016-10-27 08:48:32 +01:00
parent 79da8e5a37
commit f460283fa1
5 changed files with 81 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
editor/sass/style.scss
View File

@ -119,3 +119,7 @@ pre code {
background-color: transparent;
border: 0;
}
.hide {
display: none;
}

41
nodes/core/core/58-debug.html
View File

@ -102,8 +102,7 @@
onpaletteadd: function() {
var options = {
messageMouseOver: function(sourceId) {
//msg.style.borderRightColor = "#999";
messageMouseEnter: function(sourceId) {
if (sourceId) {
var n = RED.nodes.node(sourceId);
if (n) {
@ -113,8 +112,7 @@
RED.view.redraw();
}
},
messageMouseOut: function(sourceId) {
//msg.style.borderRightColor = "";
messageMouseLeave: function(sourceId) {
if (sourceId) {
var n = RED.nodes.node(sourceId);
if (n) {
@ -159,14 +157,25 @@
this.refreshMessageList = function() {
RED.debug.refreshMessageList(RED.workspaces.active());
if (subWindow) {
try {
subWindow.postMessage({event:"workspaceChange",activeWorkspace:RED.workspaces.active()},"*")
} catch(err) {
console.log(err);
}
}
}
this.handleDebugMessage = function(t,o) {
o.sourceNode = RED.nodes.node(o.id) || RED.nodes.node(o.z);
var sourceNode = RED.nodes.node(o.id) || RED.nodes.node(o.z);
if (sourceNode) {
o._source = {id:sourceNode.id,z:sourceNode.z};
}
RED.debug.handleDebugMessage(o);
if (subWindow) {
try {
subWindow.postMessage(o,"*")
subWindow.postMessage({event:"message",msg:o},"*")
} catch(err) {
console.log(err);
}
@ -178,12 +187,32 @@
$("#debug-tab-open").click(function(e) {
e.preventDefault();
subWindow = window.open(document.location.toString().replace(/#.*$/,"")+"debug/view/view.html","nodeREDDebugView","menubar=no,location=no,toolbar=no,chrome,height=500,width=600");
/*
* Message format:
*
*
*/
});
this.handleWindowMessage = function(evt) {
var msg = evt.data;
if (msg.event === "mouseEnter") {
options.messageMouseEnter(msg.id);
} else if (msg.event === "mouseLeave") {
options.messageMouseLeave(msg.id);
} else if (msg.event === "mouseClick") {
options.messageSourceClick(msg.id);
} else if (msg.event === "clear") {
options.clear();
}
}
window.addEventListener('message',this.handleWindowMessage);
},
onpaletteremove: function() {
RED.comms.unsubscribe("debug",this.handleDebugMessage);
RED.sidebar.removeTab("debug");
RED.events.off("workspace:change", this.refreshMessageList);
window.removeEventListener("message",this.handleWindowMessage);
delete RED._debug;
},
oneditprepare: function() {

32
nodes/core/core/lib/debug/debug-utils.js
View File

@ -1,4 +1,6 @@
if (!RED) {
var RED = {}
}
RED.debug = (function() {
var config;
var messageList;
@ -11,8 +13,8 @@ RED.debug = (function() {
var activeWorkspace;
/**
* messageMouseOver
* messageMouseOut
* messageMouseEnter
* messageMouseLeave
* messageSourceClick
* clear
*
@ -41,13 +43,17 @@ RED.debug = (function() {
var filterDialog = $('<div class="debug-filter-box hide">'+
'<div class="debug-filter-row">'+
'<span class="button-group">'+
'<a class="sidebar-header-button-toggle selected" id="debug-tab-filter-all" href="#"><span data-i18n="node-red:debug.sidebar.filterAll"></span></a>'+
'<a class="sidebar-header-button-toggle" id="debug-tab-filter-current" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent"></span></a> '+
'<a class="sidebar-header-button-toggle selected" id="debug-tab-filter-all" href="#"><span data-i18n="node-red:debug.sidebar.filterAll">all flows</span></a>'+
'<a class="sidebar-header-button-toggle" id="debug-tab-filter-current" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent">current flow</span></a> '+
'</span>'+
'</div>'+
'</div>').appendTo(content);
content.i18n();
try {
content.i18n();
} catch(err) {
console.log("TODO: i18n library support");
}
filterDialog.find('#debug-tab-filter-all').on("click",function(e) {
@ -337,18 +343,18 @@ RED.debug = (function() {
function handleDebugMessage(o) {
var msg = document.createElement("div");
var sourceNode = o.sourceNode;
var sourceNode = o._source;
msg.onmouseover = function() {
msg.onmouseenter = function() {
msg.style.borderRightColor = "#999";
if (o.sourceNode) {
config.messageMouseOver(o.sourceNode.id);
if (o._source) {
config.messageMouseEnter(o._source.id);
}
};
msg.onmouseout = function() {
msg.onmouseleave = function() {
msg.style.borderRightColor = "";
if (o.sourceNode) {
config.messageMouseOut(o.sourceNode.id);
if (o._source) {
config.messageMouseLeave(o._source.id);
}
};
var name = sanitize(((o.name?o.name:o.id)||"").toString());

118
nodes/core/core/lib/debug/debug.js
View File

@ -1,102 +1,28 @@
var RED = {};
$(function() {
$("#debug-tab-clear").click(function() {
$(".debug-message").remove();
// messageCount = 0;
// RED.nodes.eachNode(function(node) {
// node.highlighted = false;
// node.dirty = true;
// });
// RED.view.redraw();
});
function getTimestamp() {
var d = new Date();
return d.toLocaleString();
}
function sanitize(m) {
return m.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
var options = {
messageMouseEnter: function(sourceId) {
window.opener.postMessage({event:"mouseEnter",id:sourceId},'*');
},
messageMouseLeave: function(sourceId) {
window.opener.postMessage({event:"mouseLeave",id:sourceId},'*');
},
messageSourceClick: function(sourceId) {
window.opener.postMessage({event:"mouseClick",id:sourceId},'*');
},
clear: function() {
window.opener.postMessage({event:"clear"},'*');
}
}
var uiComponents = RED.debug.init(options);
$(".debug-window").append(uiComponents.content);
window.addEventListener('message',function(evt) {
console.log(evt.data);
var o = evt.data;
var msg = document.createElement("div");
//var sourceNode = RED.nodes.node(o.id) || RED.nodes.node(o.z);
// msg.onmouseover = function() {
// msg.style.borderRightColor = "#999";
// var n = RED.nodes.node(o.id) || RED.nodes.node(o.z);
// if (n) {
// n.highlighted = true;
// n.dirty = true;
// }
// RED.view.redraw();
// };
// msg.onmouseout = function() {
// msg.style.borderRightColor = "";
// var n = RED.nodes.node(o.id) || RED.nodes.node(o.z);
// if (n) {
// n.highlighted = false;
// n.dirty = true;
// }
// RED.view.redraw();
// };
// msg.onclick = function() {
// var node = RED.nodes.node(o.id) || RED.nodes.node(o.z);
// if (node) {
// RED.workspaces.show(node.z);
// }
//
// };
//console.log(o);
var name = sanitize(((o.name?o.name:o.id)||"").toString());
var topic = sanitize((o.topic||"").toString());
var property = sanitize(o.property?o.property:'');
var payload = sanitize((o.msg||"").toString());
var format = sanitize((o.format||"").toString());
msg.className = 'debug-message'+(o.level?(' debug-message-level-'+o.level):'');
msg.innerHTML = '<span class="debug-message-date">'+
getTimestamp()+'</span>'+
(name?'<span class="debug-message-name">'+name:'')+
'</span>';
// NOTE: relying on function error to have a "type" that all other msgs don't
if (o.hasOwnProperty("type") && (o.type === "function")) {
var errorLvlType = 'error';
var errorLvl = 20;
if (o.hasOwnProperty("level") && o.level === 30) {
errorLvl = 30;
errorLvlType = 'warn';
}
msg.className = 'debug-message debug-message-level-' + errorLvl;
msg.innerHTML += '<span class="debug-message-topic">function : (' + errorLvlType + ')</span>';
} else {
msg.innerHTML += '<span class="debug-message-topic">'+
(o.topic?topic+' : ':'')+
(o.property?'msg.'+property:'msg')+" : "+format+
'</span>';
if (evt.data.event === "message") {
RED.debug.handleDebugMessage(evt.data.msg);
} else if (evt.data.event === "workspaceChange") {
RED.debug.refreshMessageList(evt.data.activeWorkspace);
}
if (format === 'Object' || /^array/.test(format) || format === 'boolean' || format === 'number' ) {
payload = JSON.parse(payload);
} else if (format === 'null') {
payload = null;
} else if (format === 'undefined') {
payload = undefined;
} else if (/^buffer/.test(format)) {
var buffer = payload;
payload = [];
for (var c = 0; c < buffer.length; c += 2) {
payload.push(parseInt(buffer.substr(c, 2), 16));
}
}
var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
RED.debug.buildMessageElement(payload,true,format).appendTo(el);
$("#debug-content").append(msg);
$("#debug-content").scrollTop($("#debug-content")[0].scrollHeight);
},false);
});

9
nodes/core/core/lib/debug/view.html
View File

@ -6,15 +6,8 @@
<title>Node-RED Debug Tools</title>
</head>
<body class="debug-window">
<div class="sidebar-header">
<span class="button-group">
<a class="sidebar-header-button-toggle selected" id="debug-tab-filter-all" href="#"><span data-i18n="node-red:debug.sidebar.filterAll">all flows</span></a><a class="sidebar-header-button-toggle" id="debug-tab-filter-current" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent">current flow</span></a>
</span>
<span class="button-group"><a id="debug-tab-open" title="open in new window" class="sidebar-header-button" href="#"><i class="fa fa-desktop"></i></a></span>
<span class="button-group"><a id="debug-tab-clear" title="clear log" class="sidebar-header-button" href="#"><i class="fa fa-trash"></i></a></span></div>
<div class="debug-content"></div>
</body>
<script src="../../vendor/vendor-jquery.js"></script>
<script src="debug.js"></script>
<script src="debug-utils.js"></script>
<script src="debug.js"></script>
</html>