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:
parent
79da8e5a37
commit
f460283fa1
@ -119,3 +119,7 @@ pre code {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
@ -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() {
|
||||
|
@ -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);
|
||||
|
||||
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());
|
||||
|
@ -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();
|
||||
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"},'*');
|
||||
}
|
||||
function sanitize(m) {
|
||||
return m.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
|
||||
}
|
||||
|
||||
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';
|
||||
if (evt.data.event === "message") {
|
||||
RED.debug.handleDebugMessage(evt.data.msg);
|
||||
} else if (evt.data.event === "workspaceChange") {
|
||||
RED.debug.refreshMessageList(evt.data.activeWorkspace);
|
||||
}
|
||||
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);
|
||||
});
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user