1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

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

View File

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

View File

@ -102,8 +102,7 @@
onpaletteadd: function() { onpaletteadd: function() {
var options = { var options = {
messageMouseOver: function(sourceId) { messageMouseEnter: function(sourceId) {
//msg.style.borderRightColor = "#999";
if (sourceId) { if (sourceId) {
var n = RED.nodes.node(sourceId); var n = RED.nodes.node(sourceId);
if (n) { if (n) {
@ -113,8 +112,7 @@
RED.view.redraw(); RED.view.redraw();
} }
}, },
messageMouseOut: function(sourceId) { messageMouseLeave: function(sourceId) {
//msg.style.borderRightColor = "";
if (sourceId) { if (sourceId) {
var n = RED.nodes.node(sourceId); var n = RED.nodes.node(sourceId);
if (n) { if (n) {
@ -159,14 +157,25 @@
this.refreshMessageList = function() { this.refreshMessageList = function() {
RED.debug.refreshMessageList(RED.workspaces.active()); 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) { 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); RED.debug.handleDebugMessage(o);
if (subWindow) { if (subWindow) {
try { try {
subWindow.postMessage(o,"*") subWindow.postMessage({event:"message",msg:o},"*")
} catch(err) { } catch(err) {
console.log(err); console.log(err);
} }
@ -178,12 +187,32 @@
$("#debug-tab-open").click(function(e) { $("#debug-tab-open").click(function(e) {
e.preventDefault(); 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"); 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() { onpaletteremove: function() {
RED.comms.unsubscribe("debug",this.handleDebugMessage); RED.comms.unsubscribe("debug",this.handleDebugMessage);
RED.sidebar.removeTab("debug"); RED.sidebar.removeTab("debug");
RED.events.off("workspace:change", this.refreshMessageList); RED.events.off("workspace:change", this.refreshMessageList);
window.removeEventListener("message",this.handleWindowMessage);
delete RED._debug; delete RED._debug;
}, },
oneditprepare: function() { oneditprepare: function() {

View File

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

View File

@ -1,102 +1,28 @@
var RED = {};
$(function() { $(function() {
var options = {
$("#debug-tab-clear").click(function() { messageMouseEnter: function(sourceId) {
$(".debug-message").remove(); window.opener.postMessage({event:"mouseEnter",id:sourceId},'*');
// messageCount = 0; },
// RED.nodes.eachNode(function(node) { messageMouseLeave: function(sourceId) {
// node.highlighted = false; window.opener.postMessage({event:"mouseLeave",id:sourceId},'*');
// node.dirty = true; },
// }); messageSourceClick: function(sourceId) {
// RED.view.redraw(); window.opener.postMessage({event:"mouseClick",id:sourceId},'*');
}); },
clear: function() {
window.opener.postMessage({event:"clear"},'*');
function getTimestamp() {
var d = new Date();
return d.toLocaleString();
} }
function sanitize(m) {
return m.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
} }
var uiComponents = RED.debug.init(options);
$(".debug-window").append(uiComponents.content);
window.addEventListener('message',function(evt) { window.addEventListener('message',function(evt) {
console.log(evt.data); if (evt.data.event === "message") {
var o = evt.data; RED.debug.handleDebugMessage(evt.data.msg);
} else if (evt.data.event === "workspaceChange") {
var msg = document.createElement("div"); RED.debug.refreshMessageList(evt.data.activeWorkspace);
//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 (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); },false);
}); });

View File

@ -6,15 +6,8 @@
<title>Node-RED Debug Tools</title> <title>Node-RED Debug Tools</title>
</head> </head>
<body class="debug-window"> <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> </body>
<script src="../../vendor/vendor-jquery.js"></script> <script src="../../vendor/vendor-jquery.js"></script>
<script src="debug.js"></script>
<script src="debug-utils.js"></script> <script src="debug-utils.js"></script>
<script src="debug.js"></script>
</html> </html>