diff --git a/editor/js/ui/state.js b/editor/js/ui/state.js index 51365d523..5ff9b47ad 100644 --- a/editor/js/ui/state.js +++ b/editor/js/ui/state.js @@ -23,6 +23,5 @@ RED.state = { EXPORT: 6, IMPORT: 7, IMPORT_DRAGGING: 8, - QUICK_JOINING: 9, - EDIT_BREAKPOINT: 10 + QUICK_JOINING: 9 } diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js index c62cfa116..6b6ab87e0 100644 --- a/editor/js/ui/view.js +++ b/editor/js/ui/view.js @@ -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 = ""; diff --git a/editor/sass/debug.scss b/editor/sass/debug.scss index 76bce7f05..647e856ef 100644 --- a/editor/sass/debug.scss +++ b/editor/sass/debug.scss @@ -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; } } diff --git a/editor/sass/flow.scss b/editor/sass/flow.scss index 1eb58dedc..afb8da1ae 100644 --- a/editor/sass/flow.scss +++ b/editor/sass/flow.scss @@ -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; } } diff --git a/nodes/core/core/lib/debug/debug-utils.js b/nodes/core/core/lib/debug/debug-utils.js index bc77f84f5..5965a7ad9 100644 --- a/nodes/core/core/lib/debug/debug-utils.js +++ b/nodes/core/core/lib/debug/debug-utils.js @@ -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 = $('
').appendTo(content); + var filterDialog = $(' ').appendTo(content); + + + debuggerView = $('').appendTo(content); var dbgrDisabled = $('