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 = $('
Debugger is disabled
').appendTo(debuggerView); @@ -67,31 +81,122 @@ RED.debug = (function() { ''+ ''+ '
').appendTo(dbgrPanel); - var dbgrContent = $('
',{style:"padding: 10px;"}).appendTo(dbgrPanel); - var breakpointPanel = $('
',{style:"position:relative;"}).appendTo(dbgrContent); - $("").html("Breakpoints").appendTo(breakpointPanel); - var buttonGroup = $('
').css({position:"absolute", right: 0,top:0}).appendTo(breakpointPanel); - $('') - .click(function(evt) { - breakpointList.editableList('addItem',{}); - }) - .appendTo(buttonGroup); + /************ Breakpoints ************/ - - - var breakpointList = $("
    ").css({height: "200px"}).appendTo(breakpointPanel).editableList({ - addButton: false - }); - - var filterDialog = $('
    '+ - '
    '+ - ''+ - ''+ - ' '+ - ''+ + var breakpointPanel = $('
    '+ + '
    '+ + ''+ + 'Breakpoints'+ + ''+ '
    '+ - '
    ').appendTo(content); + '
    ').appendTo(dbgrPanel); + + + + var breakPointContent = $('
    ',{class:"palette-content debug-dbgr-breakpoints"}).appendTo(breakpointPanel); + + // var buttonGroup = $('
    ').css({position:"absolute", right: 0,top:0}).appendTo(breakPointContent); + // $('') + // .click(function(evt) { + // breakpointList.editableList('addItem',{}); + // }) + // .appendTo(buttonGroup); + + var emptyItem = {}; + + breakpointList = $("
      ").css({height: "200px"}).appendTo(breakPointContent).editableList({ + addButton: false, + addItem: function(container,i,breakpoint) { + if (breakpoint === emptyItem) { + $('
      ',{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 = $('