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 initial debugger panel to debug tab

Browse Source
This commit is contained in:
Nick O'Leary
2016-11-18 12:53:05 +00:00
parent 416d5190bc
commit 629c63e0c9
9 changed files with 182 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
editor/js/debugger.js Normal file
View File

@@ -0,0 +1,4 @@
RED.debugger = (function() {
})();

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

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

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

@@ -1570,6 +1570,29 @@ RED.view = (function() {
RED.touch.radialMenu.show(obj,pos,options);
resetMouseVars();
}
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)");
}
}
function redraw() {
vis.attr("transform","scale("+scaleFactor+")");
outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
@@ -1931,6 +1954,7 @@ RED.view = (function() {
//thisNode.selectAll(".node_icon_shade_border_right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)});
var inputPorts = thisNode.selectAll(".port_input");
var breakPointGroup;
if (d.inputs === 0 && !inputPorts.empty()) {
inputPorts.remove();
//nodeLabel.attr("x",30);
@@ -1943,6 +1967,8 @@ RED.view = (function() {
.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);
}
var numOutputs = d.outputs;
@@ -1959,15 +1985,17 @@ RED.view = (function() {
.on("mouseover",function(d,i) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 0) ));})
.on("mouseout",function(d,i) { var port = d3.select(this); port.classed("port_hovered",false);});
createBreakpoint(output_group,1);
d._ports.exit().remove();
if (d._ports) {
numOutputs = d.outputs || 1;
y = (d.h/2)-((numOutputs-1)/2)*13;
var x = d.w - 5;
d._ports.each(function(d,i) {
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)+")";});
d._ports.each(function(n,i) {
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)+")";});
});
}
thisNode.selectAll("text.node_label").text(function(d,i){

29
editor/sass/debug.scss
View File

@@ -31,6 +31,15 @@
right: 0px;
overflow-y: scroll;
}
.debug-dbgr-content {
top: 0px;
}
.debug-dbgr-content-disabled {
padding-top: 40px;
text-align: center;
background: #f3f3f3;
color: #999;
}
.debug-filter-box {
position:absolute;
top: 42px;
@@ -45,6 +54,18 @@
text-align: right;
}
.debug-debugger-box {
position:absolute;
top: 42px;
left: 0px;
right: 0px;
background: #f9f9f9;
padding: 10px;
border-bottom: 1px solid #ddd;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.debug-message {
border-bottom: 1px solid #eee;
border-left: 8px solid #eee;
@@ -182,3 +203,11 @@
.debug-message-buffer-string > .debug-message-array-rows {
display: none;
}
.debug-dbgr-content {
.red-ui-editableList {
}
.red-ui-editableList-container {
border-radius: 3px;
}
}

27
editor/sass/flow.scss
View File

@@ -120,13 +120,28 @@
fill: #ddd;
cursor: crosshair;
}
.port_breakpoint {
rect {
stroke: #fff;
stroke-width: 1;
fill: #666;
.port_highlight {
stroke: #6DA332;
stroke-width: 3;
fill: #fff;
pointer-events:none;
fill-opacity: 0.5;
}
}
.port_breakpoint_inactive {
rect {
fill: #ddd;
}
}
.port_breakpoint_active {
rect {
fill: #5386de;
}
}
.port_breakpoint_triggered {
rect {
fill: #f77d7d;
}
}
.node_error {

1
editor/sass/mixins.scss
View File

@@ -47,6 +47,7 @@
margin:0;
text-decoration: none;
cursor:pointer;
padding: 0;
&.disabled {
cursor: default;

2
editor/sass/sidebar.scss
View File

@@ -89,12 +89,14 @@
font-size: 13px;
line-height: 13px;
padding: 5px 8px;
min-width: 30px;
}
.sidebar-header-button-toggle {
@include workspace-button-toggle;
font-size: 13px;
line-height: 13px;
padding: 5px 8px;
min-width: 30px;
}
.sidebar-header-button:not(:first-child) {
border-left: none;