Add breakpoint editing to debugger

editor/js/ui/state.js

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

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");
+        var breakPointGroup = port.append("g").attr("class","port_breakpoint").classed("port_breakpoint_inactive",true);
-        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")
-        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);
+            .attr("x",2).attr("y",2)
-
+            .attr("rx",2).attr("ry",2)
-        switch(Math.floor(Math.random()*3)) {
+            .attr("width",6).attr("height",6);
-            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() {
@@ -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()) {
+                            } else if (d.inputs === 1) {
-                                var inputGroup = thisNode.append("g").attr("class","port_input");
+                                if  (inputPorts.empty()) {
-                                inputGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
+                                    var inputGroup = thisNode.append("g").attr("class","port_input");
-                                    .on("mousedown",function(d){portMouseDown(d,1,0);})
+                                    inputGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
-                                    .on("touchstart",function(d){portMouseDown(d,1,0);})
+                                        .on("mousedown",function(d){portMouseDown(d,1,0);})
-                                    .on("mouseup",function(d){portMouseUp(d,1,0);} )
+                                        .on("touchstart",function(d){portMouseDown(d,1,0);})
-                                    .on("touchend",function(d){portMouseUp(d,1,0);} )
+                                        .on("mouseup",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("touchend",function(d){portMouseUp(d,1,0);} )
-                                    .on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);})
+                                        .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){
+                            thisNode.selectAll("text.node_label")
-                                    var l = "";
+                                .text(function(d,i){ return RED.utils.getNodeLabel(d); })
-                                    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;
-                                })
                                 .attr("y", function(d){return (d.h/2)-1;})
                                 .attr("class",function(d){
                                     var s = "";

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

editor/sass/flow.scss

@@ -121,16 +121,16 @@
     cursor: crosshair;
 }
 .port_breakpoint {
+    pointer-events: none;
     rect {
-        stroke: #fff;
+        stroke: #666;
-        stroke-width: 1;
+        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;
     }
 }
 

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 = $('<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);
+        /************ Breakpoints ************/
-        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);
 
-
+        var breakpointPanel = $('<div class="palette-category">'+
-
+            '<div class="palette-header">'+
-        var breakpointList = $("<ol>").css({height: "200px"}).appendTo(breakpointPanel).editableList({
+                '<i class="fa fa-angle-down expanded"></i>'+
-            addButton: false
+                '<span>Breakpoints</span>'+
-        });
+                '<span id="debug-dbgr-breakpoint-count" class="config-node-filter-info"></span>'+
-
-        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);
+        '</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
     }
 })();