mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add breakpoint editing to debugger
This commit is contained in:
Nick O'Leary
parent
127b4f0226
commit
3ca64057c3
@ -23,6 +23,5 @@ RED.state = {
|
||||
EXPORT: 6,
|
||||
IMPORT: 7,
|
||||
IMPORT_DRAGGING: 8,
|
||||
QUICK_JOINING: 9,
|
||||
EDIT_BREAKPOINT: 10
|
||||
QUICK_JOINING: 9
|
||||
}
|
||||
|
||||
@ -56,6 +56,7 @@ RED.view = (function() {
|
||||
lasso = null,
|
||||
showStatus = false,
|
||||
lastClickNode = null,
|
||||
lastClickPort = null,
|
||||
dblClickPrimed = null,
|
||||
clickTime = 0,
|
||||
clickElapsed = 0;
|
||||
@ -260,6 +261,10 @@ RED.view = (function() {
|
||||
|
||||
activeNodes = RED.nodes.filterNodes({z:activeWorkspace});
|
||||
|
||||
activeNodes.forEach(function(n) {
|
||||
n.dirty = true;
|
||||
});
|
||||
|
||||
activeLinks = RED.nodes.filterLinks({
|
||||
source:{z:activeWorkspace},
|
||||
target:{z:activeWorkspace}
|
||||
@ -1317,6 +1322,15 @@ RED.view = (function() {
|
||||
$(window).on('keyup',disableQuickJoinEventHandler);
|
||||
}
|
||||
}
|
||||
|
||||
var now = Date.now();
|
||||
clickElapsed = now-clickTime;
|
||||
clickTime = now;
|
||||
|
||||
dblClickPrimed = (lastClickNode === mousedown_node && lastClickPort === mousedown_port_index);
|
||||
lastClickNode = mousedown_node;
|
||||
lastClickPort = mousedown_port_index;
|
||||
|
||||
d3.event.stopPropagation();
|
||||
d3.event.preventDefault();
|
||||
}
|
||||
@ -1328,6 +1342,14 @@ RED.view = (function() {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (dblClickPrimed && mousedown_node == d && lastClickPort === portIndex && clickElapsed > 0 && clickElapsed < 750) {
|
||||
RED.debug.toggleBreakpoint(mousedown_node,portType,portIndex);
|
||||
redraw();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
document.body.style.cursor = "";
|
||||
if (mouse_mode == RED.state.JOINING || mouse_mode == RED.state.QUICK_JOINING) {
|
||||
if (typeof TouchEvent != "undefined" && d3.event instanceof TouchEvent) {
|
||||
@ -1573,24 +1595,11 @@ RED.view = (function() {
|
||||
|
||||
|
||||
function createBreakpoint(port,type) {
|
||||
var breakPointGroup = port.append("g").attr("class","port_breakpoint");
|
||||
breakPointGroup.append("rect").attr("class","port_highlight").attr("x",0).attr("y",0).attr("rx",1).attr("ry",1).attr("width",3).attr("height",14);
|
||||
breakPointGroup.append("rect").attr("class","port_highlight").attr("x",4).attr("y",0).attr("rx",1).attr("ry",1).attr("width",3).attr("height",14);
|
||||
|
||||
switch(Math.floor(Math.random()*3)) {
|
||||
case 0: breakPointGroup.classed("port_breakpoint_active",true); break;
|
||||
case 1: breakPointGroup.classed("port_breakpoint_inactive",true); break;
|
||||
case 2: breakPointGroup.classed("port_breakpoint_triggered",true); break;
|
||||
}
|
||||
|
||||
if (type === 0) {
|
||||
breakPointGroup.attr("transform","translate(-9,-2)");
|
||||
} else if (type === 1) {
|
||||
breakPointGroup.attr("transform","translate(12,-2)");
|
||||
}
|
||||
|
||||
|
||||
|
||||
var breakPointGroup = port.append("g").attr("class","port_breakpoint").classed("port_breakpoint_inactive",true);
|
||||
breakPointGroup.append("rect")
|
||||
.attr("x",2).attr("y",2)
|
||||
.attr("rx",2).attr("ry",2)
|
||||
.attr("width",6).attr("height",6);
|
||||
}
|
||||
|
||||
function redraw() {
|
||||
@ -1945,17 +1954,23 @@ RED.view = (function() {
|
||||
if (d.inputs === 0 && !inputPorts.empty()) {
|
||||
inputPorts.remove();
|
||||
//nodeLabel.attr("x",30);
|
||||
} else if (d.inputs === 1 && inputPorts.empty()) {
|
||||
var inputGroup = thisNode.append("g").attr("class","port_input");
|
||||
inputGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
|
||||
.on("mousedown",function(d){portMouseDown(d,1,0);})
|
||||
.on("touchstart",function(d){portMouseDown(d,1,0);})
|
||||
.on("mouseup",function(d){portMouseUp(d,1,0);} )
|
||||
.on("touchend",function(d){portMouseUp(d,1,0);} )
|
||||
.on("mouseover",function(d) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 1) ));})
|
||||
.on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);})
|
||||
} else if (d.inputs === 1) {
|
||||
if (inputPorts.empty()) {
|
||||
var inputGroup = thisNode.append("g").attr("class","port_input");
|
||||
inputGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
|
||||
.on("mousedown",function(d){portMouseDown(d,1,0);})
|
||||
.on("touchstart",function(d){portMouseDown(d,1,0);})
|
||||
.on("mouseup",function(d){portMouseUp(d,1,0);} )
|
||||
.on("touchend",function(d){portMouseUp(d,1,0);} )
|
||||
.on("mouseover",function(d) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 1) ));})
|
||||
.on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);})
|
||||
|
||||
createBreakpoint(inputGroup,0);
|
||||
createBreakpoint(inputGroup,0);
|
||||
} else {
|
||||
var breakpointState = RED.debug.checkBreakpoint(d,1,0);
|
||||
inputPorts.selectAll(".port_breakpoint").classed("port_breakpoint_active",breakpointState);
|
||||
inputPorts.selectAll(".port_breakpoint").classed("port_breakpoint_inactive",!breakpointState);
|
||||
}
|
||||
}
|
||||
|
||||
var numOutputs = d.outputs;
|
||||
@ -1983,22 +1998,14 @@ RED.view = (function() {
|
||||
var port = d3.select(this);
|
||||
//port.attr("y",(y+13*i)-5).attr("x",x);
|
||||
port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";});
|
||||
var breakpointState = RED.debug.checkBreakpoint(d,0,i);
|
||||
port.selectAll(".port_breakpoint").classed("port_breakpoint_active",breakpointState);
|
||||
port.selectAll(".port_breakpoint").classed("port_breakpoint_inactive",!breakpointState);
|
||||
|
||||
});
|
||||
}
|
||||
thisNode.selectAll("text.node_label").text(function(d,i){
|
||||
var l = "";
|
||||
if (d._def.label) {
|
||||
l = d._def.label;
|
||||
try {
|
||||
l = (typeof l === "function" ? l.call(d) : l)||"";
|
||||
l = RED.text.bidi.enforceTextDirectionWithUCC(l);
|
||||
} catch(err) {
|
||||
console.log("Definition error: "+d.type+".label",err);
|
||||
l = d.type;
|
||||
}
|
||||
}
|
||||
return l;
|
||||
})
|
||||
thisNode.selectAll("text.node_label")
|
||||
.text(function(d,i){ return RED.utils.getNodeLabel(d); })
|
||||
.attr("y", function(d){return (d.h/2)-1;})
|
||||
.attr("class",function(d){
|
||||
var s = "";
|
||||
|
||||
@ -203,11 +203,34 @@
|
||||
.debug-message-buffer-string > .debug-message-array-rows {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.debug-dbgr-breakpoints {
|
||||
background: #f9f9f9;
|
||||
padding: 0;
|
||||
}
|
||||
.debug-dbgr-content {
|
||||
.red-ui-editableList {
|
||||
background: none;
|
||||
input {
|
||||
vertical-align: middle;
|
||||
margin: 0 8px 0 4px;
|
||||
}
|
||||
li {
|
||||
padding: 0;
|
||||
}
|
||||
label {
|
||||
padding: 6px 2px;
|
||||
&:hover {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
margin: 0;
|
||||
}
|
||||
.red-ui-search-result-node-type {
|
||||
margin-left: 26px;
|
||||
}
|
||||
}
|
||||
.red-ui-editableList-container {
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -121,16 +121,16 @@
|
||||
cursor: crosshair;
|
||||
}
|
||||
.port_breakpoint {
|
||||
pointer-events: none;
|
||||
rect {
|
||||
stroke: #fff;
|
||||
stroke-width: 1;
|
||||
stroke: #666;
|
||||
stroke-width: 0;
|
||||
fill: #666;
|
||||
|
||||
}
|
||||
}
|
||||
.port_breakpoint_inactive {
|
||||
rect {
|
||||
fill: #ddd;
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
.port_breakpoint_active {
|
||||
@ -140,7 +140,7 @@
|
||||
}
|
||||
.port_breakpoint_triggered {
|
||||
rect {
|
||||
fill: #f77d7d;
|
||||
fill: #ff1010;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -28,6 +28,9 @@ RED.debug = (function() {
|
||||
var messagesByNode = {};
|
||||
var sbc;
|
||||
var activeWorkspace;
|
||||
var breakpointList;
|
||||
|
||||
var debuggerEnabled = false;
|
||||
|
||||
function init(_config) {
|
||||
config = _config;
|
||||
@ -55,6 +58,17 @@ RED.debug = (function() {
|
||||
sbc = messageList[0];
|
||||
messageTable = $('<div class="debug-content debug-content-table hide"/>').appendTo(content);
|
||||
|
||||
var filterDialog = $('<div class="debug-filter-box hide">'+
|
||||
'<div class="debug-filter-row">'+
|
||||
'<span class="button-group">'+
|
||||
'<button class="sidebar-header-button-toggle selected" id="debug-tab-filter-all"><span data-i18n="node-red:debug.sidebar.filterAll">all flows</span></button>'+
|
||||
'<button class="sidebar-header-button-toggle" id="debug-tab-filter-current"><span data-i18n="node-red:debug.sidebar.filterCurrent">current flow</span></button> '+
|
||||
'</span>'+
|
||||
'</div>'+
|
||||
'</div>').appendTo(content);
|
||||
|
||||
|
||||
|
||||
debuggerView = $('<div class="debug-content hide"/>').appendTo(content);
|
||||
|
||||
var dbgrDisabled = $('<div class="debug-content debug-dbgr-content debug-dbgr-content-disabled">Debugger is disabled</div>').appendTo(debuggerView);
|
||||
@ -67,31 +81,122 @@ RED.debug = (function() {
|
||||
'<button id="" class="sidebar-header-button"><i class="fa fa-step-forward"></i></button>'+
|
||||
'</span>'+
|
||||
'</div>').appendTo(dbgrPanel);
|
||||
var dbgrContent = $('<div>',{style:"padding: 10px;"}).appendTo(dbgrPanel);
|
||||
var breakpointPanel = $('<div>',{style:"position:relative;"}).appendTo(dbgrContent);
|
||||
|
||||
$("<label></label>").html("Breakpoints").appendTo(breakpointPanel);
|
||||
var buttonGroup = $('<div>').css({position:"absolute", right: 0,top:0}).appendTo(breakpointPanel);
|
||||
$('<button class="editor-button editor-button-small"><i class="fa fa-plus"></i> breakpoint</button>')
|
||||
.click(function(evt) {
|
||||
breakpointList.editableList('addItem',{});
|
||||
})
|
||||
.appendTo(buttonGroup);
|
||||
/************ Breakpoints ************/
|
||||
|
||||
|
||||
|
||||
var breakpointList = $("<ol>").css({height: "200px"}).appendTo(breakpointPanel).editableList({
|
||||
addButton: false
|
||||
});
|
||||
|
||||
var filterDialog = $('<div class="debug-filter-box hide">'+
|
||||
'<div class="debug-filter-row">'+
|
||||
'<span class="button-group">'+
|
||||
'<button class="sidebar-header-button-toggle selected" id="debug-tab-filter-all"><span data-i18n="node-red:debug.sidebar.filterAll">all flows</span></button>'+
|
||||
'<button class="sidebar-header-button-toggle" id="debug-tab-filter-current"><span data-i18n="node-red:debug.sidebar.filterCurrent">current flow</span></button> '+
|
||||
'</span>'+
|
||||
var breakpointPanel = $('<div class="palette-category">'+
|
||||
'<div class="palette-header">'+
|
||||
'<i class="fa fa-angle-down expanded"></i>'+
|
||||
'<span>Breakpoints</span>'+
|
||||
'<span id="debug-dbgr-breakpoint-count" class="config-node-filter-info"></span>'+
|
||||
'</div>'+
|
||||
'</div>').appendTo(content);
|
||||
'</div>').appendTo(dbgrPanel);
|
||||
|
||||
|
||||
|
||||
var breakPointContent = $('<div>',{class:"palette-content debug-dbgr-breakpoints"}).appendTo(breakpointPanel);
|
||||
|
||||
// var buttonGroup = $('<div>').css({position:"absolute", right: 0,top:0}).appendTo(breakPointContent);
|
||||
// $('<button class="editor-button editor-button-small"><i class="fa fa-plus"></i> breakpoint</button>')
|
||||
// .click(function(evt) {
|
||||
// breakpointList.editableList('addItem',{});
|
||||
// })
|
||||
// .appendTo(buttonGroup);
|
||||
|
||||
var emptyItem = {};
|
||||
|
||||
breakpointList = $("<ol>").css({height: "200px"}).appendTo(breakPointContent).editableList({
|
||||
addButton: false,
|
||||
addItem: function(container,i,breakpoint) {
|
||||
if (breakpoint === emptyItem) {
|
||||
$('<div>',{class:"red-ui-search-empty"}).html('Double click on a port to add a breakpoint').appendTo(container);
|
||||
return;
|
||||
}
|
||||
var currentCount = breakpointList.find('.debug-dbgr-breakpoint').length;
|
||||
if (currentCount === 0) {
|
||||
console.log("out with the old")
|
||||
breakpointList.editableList('removeItem',emptyItem);
|
||||
}
|
||||
var id = "breakpoint_"+breakpoint.key;
|
||||
var label = $('<label>',{for:id}).appendTo(container);
|
||||
var cb = $('<input class="debug-dbgr-breakpoint" id="'+id+'" type="checkbox" checked></input>').appendTo(label);
|
||||
|
||||
|
||||
$('<span>').html(RED.utils.getNodeLabel(breakpoint.node,breakpoint.node.id)).appendTo(label);
|
||||
|
||||
var workspace = RED.nodes.workspace(breakpoint.node.z);
|
||||
if (!workspace) {
|
||||
workspace = RED.nodes.subflow(breakpoint.node.z);
|
||||
workspace = "subflow:"+workspace.name;
|
||||
} else {
|
||||
workspace = "flow:"+workspace.label;
|
||||
}
|
||||
var flowMeta = $('<div>',{class:"red-ui-search-result-node-flow"}).appendTo(label);
|
||||
|
||||
$('<div>').html(workspace).appendTo(flowMeta);
|
||||
$('<div>').html((breakpoint.portType === 0?"output":"input")+" "+(breakpoint.portIndex+1)).appendTo(flowMeta);
|
||||
|
||||
|
||||
$('<div>',{class:"red-ui-search-result-node-type"}).html(breakpoint.node.type).appendTo(label);
|
||||
|
||||
//+" : "+breakpoint.portType+" : "+breakpoint.portIndex).appendTo(label);
|
||||
cb.on('change',function(evt) {
|
||||
if ($(this).is(":checked")) {
|
||||
delete breakpoint.disabled;
|
||||
} else {
|
||||
breakpoint.disabled = true;
|
||||
}
|
||||
breakpoint.node.dirty = true;
|
||||
RED.view.redraw();
|
||||
refreshBreakpointCount();
|
||||
});
|
||||
label.on('mouseenter',function() {
|
||||
config.messageMouseEnter(breakpoint.node.id);
|
||||
});
|
||||
label.on('mouseleave',function() {
|
||||
config.messageMouseLeave(breakpoint.node.id);
|
||||
});
|
||||
refreshBreakpointCount();
|
||||
console.log(breakpointList.editableList('length'));
|
||||
},
|
||||
removeItem: function(breakpoint) {
|
||||
refreshBreakpointCount();
|
||||
if (breakpoint !== emptyItem) {
|
||||
var currentCount = breakpointList.find('.debug-dbgr-breakpoint').length;
|
||||
if (currentCount === 0) {
|
||||
breakpointList.editableList('addItem',emptyItem);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
breakpointList.editableList('addItem',emptyItem);
|
||||
|
||||
|
||||
|
||||
/************ Something else ************/
|
||||
|
||||
$('<div class="palette-category">'+
|
||||
'<div class="palette-header">'+
|
||||
'<i class="fa fa-angle-down expanded"></i>'+
|
||||
'<span>Messages</span>'+
|
||||
'</div>'+
|
||||
'<div class="palette-content"></div>'+
|
||||
'</div>').appendTo(dbgrPanel);
|
||||
|
||||
/************ Something else ************/
|
||||
|
||||
$('<div class="palette-category">'+
|
||||
'<div class="palette-header">'+
|
||||
'<i class="fa fa-angle-down expanded"></i>'+
|
||||
'<span>Context</span>'+
|
||||
'</div>'+
|
||||
'<div class="palette-content"></div>'+
|
||||
'</div>').appendTo(dbgrPanel);
|
||||
|
||||
|
||||
/****************************************/
|
||||
|
||||
|
||||
try {
|
||||
content.i18n();
|
||||
@ -99,6 +204,18 @@ RED.debug = (function() {
|
||||
console.log("TODO: i18n library support");
|
||||
}
|
||||
|
||||
dbgrPanel.find(".palette-header").on('click', function(e) {
|
||||
var icon = $(this).find("i");
|
||||
var content = $(this).next();
|
||||
if (icon.hasClass("expanded")) {
|
||||
icon.removeClass("expanded");
|
||||
content.slideUp();
|
||||
} else {
|
||||
icon.addClass("expanded");
|
||||
content.slideDown();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
toolbar.find('#debug-tab-filter-all').on("click",function(e) {
|
||||
e.preventDefault();
|
||||
@ -179,15 +296,15 @@ RED.debug = (function() {
|
||||
i.removeClass('fa-toggle-off');
|
||||
dbgrPanel.show();
|
||||
dbgrDisabled.hide();
|
||||
RED.view.state(RED.state.EDIT_BREAKPOINT);
|
||||
|
||||
debuggerEnabled = true;
|
||||
} else {
|
||||
i.addClass('fa-toggle-off');
|
||||
i.removeClass('fa-toggle-on');
|
||||
dbgrPanel.hide();
|
||||
dbgrDisabled.show();
|
||||
RED.view.state(RED.state.DEFAULT);
|
||||
debuggerEnabled = false;
|
||||
}
|
||||
RED.view.redraw(true);
|
||||
})
|
||||
|
||||
|
||||
@ -356,9 +473,72 @@ RED.debug = (function() {
|
||||
messageList.scrollTop(sbc.scrollHeight);
|
||||
}
|
||||
}
|
||||
|
||||
var breakpoints = {};
|
||||
|
||||
function getBreakpointKey(node,portType,portIndex) {
|
||||
return (node.id+"_"+portType+"_"+portIndex).replace(/\./,"_");
|
||||
}
|
||||
function toggleBreakpoint(node,portType,portIndex) {
|
||||
if (!debuggerEnabled) {
|
||||
return false;
|
||||
}
|
||||
var key = getBreakpointKey(node,portType,portIndex);
|
||||
if (breakpoints.hasOwnProperty(key)) {
|
||||
node.dirty = true;
|
||||
if (breakpoints[key].disabled) {
|
||||
delete breakpoints[key].disabled;
|
||||
$("#breakpoint_"+key).prop('checked',true);
|
||||
refreshBreakpointCount();
|
||||
return true;
|
||||
} else {
|
||||
breakpointList.editableList('removeItem',breakpoints[key]);
|
||||
delete breakpoints[key];
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
breakpoints[key] = {
|
||||
key: key,
|
||||
node: node,
|
||||
portType: portType,
|
||||
portIndex: portIndex
|
||||
}
|
||||
breakpointList.editableList('addItem',breakpoints[key]);
|
||||
node.dirty = true;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
function checkBreakpoint(node,portType,portIndex) {
|
||||
var key = getBreakpointKey(node,portType,portIndex);
|
||||
return debuggerEnabled && breakpoints.hasOwnProperty(key) && !breakpoints[key].disabled;
|
||||
}
|
||||
function refreshBreakpointCount() {
|
||||
var total = 0;
|
||||
var checked = 0;
|
||||
breakpointList.find('.debug-dbgr-breakpoint').each(function() {
|
||||
total++;
|
||||
if ($(this).is(":checked")) {
|
||||
checked++;
|
||||
}
|
||||
});
|
||||
var label = "";
|
||||
if (total > 0) {
|
||||
if (total === checked) {
|
||||
label = total;
|
||||
} else {
|
||||
label = checked+"/"+total;
|
||||
}
|
||||
}
|
||||
$("#debug-dbgr-breakpoint-count").html(label);
|
||||
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
init: init,
|
||||
refreshMessageList:refreshMessageList,
|
||||
handleDebugMessage: handleDebugMessage
|
||||
handleDebugMessage: handleDebugMessage,
|
||||
toggleBreakpoint: toggleBreakpoint,
|
||||
checkBreakpoint: checkBreakpoint
|
||||
}
|
||||
})();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user