frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add breakpoint editing to debugger

Browse Source
This commit is contained in:
Nick O'Leary
2016-11-22 12:57:30 +00:00
parent 127b4f0226
commit 3ca64057c3
5 changed files with 286 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
editor/js/ui/state.js
View File

@@ -23,6 +23,5 @@ RED.state = {
EXPORT: 6,
IMPORT: 7,
IMPORT_DRAGGING: 8,
QUICK_JOINING: 9,
EDIT_BREAKPOINT: 10
QUICK_JOINING: 9
}

91
editor/js/ui/view.js
View File

@@ -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 = "";

27
editor/sass/debug.scss
View File

@@ -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;
}
}

10
editor/sass/flow.scss
View File

@@ -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;
}
}