diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index 706b10570..19e257e79 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -301,17 +301,17 @@ RED.palette = (function() { hoverGroup = null; activeGroup = RED.view.getActiveGroup(); if (activeGroup) { - document.getElementById(activeGroup.id).classList.add("red-ui-flow-group-active-hovered"); + document.getElementById("group_select_"+activeGroup.id).classList.add("red-ui-flow-group-active-hovered"); } RED.view.focus(); }, stop: function() { d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false); if (hoverGroup) { - document.getElementById(hoverGroup.id).classList.remove("red-ui-flow-group-hovered"); + document.getElementById("group_select_"+hoverGroup.id).classList.remove("red-ui-flow-group-hovered"); } if (activeGroup) { - document.getElementById(activeGroup.id).classList.remove("red-ui-flow-group-active-hovered"); + document.getElementById("group_select_"+activeGroup.id).classList.remove("red-ui-flow-group-active-hovered"); } if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null; } if (groupTimer) { clearTimeout(groupTimer); groupTimer = null; } @@ -323,13 +323,15 @@ RED.palette = (function() { mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop(); if (!groupTimer) { groupTimer = setTimeout(function() { + mouseX /= RED.view.scale(); + mouseY /= RED.view.scale(); var group = RED.view.getGroupAtPoint(mouseX,mouseY); if (group !== hoverGroup) { if (hoverGroup) { - document.getElementById(hoverGroup.id).classList.remove("red-ui-flow-group-hovered"); + document.getElementById("group_select_"+hoverGroup.id).classList.remove("red-ui-flow-group-hovered"); } if (group) { - document.getElementById(group.id).classList.add("red-ui-flow-group-hovered"); + document.getElementById("group_select_"+group.id).classList.add("red-ui-flow-group-hovered"); } hoverGroup = group; if (hoverGroup) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index aa2d14e44..0f012e5c3 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -22,9 +22,10 @@ * |- .red-ui-workspace-chart-background * |- .red-ui-workspace-chart-grid "gridLayer" * |- "groupLayer" + * |- "groupSelectLayer" * |- "linkLayer" * |- "dragGroupLayer" - * \- "nodeLayer" + * |- "nodeLayer" */ RED.view = (function() { @@ -110,6 +111,7 @@ RED.view = (function() { var gridLayer; var linkLayer; var dragGroupLayer; + var groupSelectLayer; var nodeLayer; var groupLayer; var drag_lines; @@ -265,9 +267,11 @@ RED.view = (function() { updateGrid(); groupLayer = eventLayer.append("g"); + groupSelectLayer = eventLayer.append("g"); linkLayer = eventLayer.append("g"); dragGroupLayer = eventLayer.append("g"); nodeLayer = eventLayer.append("g"); + drag_lines = []; RED.events.on("workspace:change",function(event) { @@ -3891,11 +3895,6 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); } gg = dirtyGroups[gg].g; } } - // var group = dirtyGroups[d.g]; - // group.x = Math.min(group.x,d.x-d.w/2-25-((d._def.button && d._def.align!=="right")?20:0)); - // group.y = Math.min(group.y,d.y-d.h/2-25), - // group.w = Math.max(group.w, d.x+d.w/2+25+((d._def.button && d._def.align=="right")?20:0) - group.x), - // group.h = Math.max(group.h, d.y+d.h/2+25 - group.y) } } }); @@ -4116,21 +4115,34 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); } var group = groupLayer.selectAll(".red-ui-flow-group").data(activeGroups,function(d) { return d.id }); - group.exit().remove(); - var groupEnter = group.enter().insert("svg:g") - .attr("class", "red-ui-flow-group") + group.exit().each(function(d,i) { + document.getElementById("group_select_"+d.id).remove() + }).remove(); + var groupEnter = group.enter().insert("svg:g").attr("class", "red-ui-flow-group") + var addedGroups = false; groupEnter.each(function(d,i) { addedGroups = true; var g = d3.select(this); g.attr("id",d.id); - g.append('rect').classed("red-ui-flow-group-outline",true).attr('rx',0.5).attr('ry',0.5); - g.append('rect').classed("red-ui-flow-group-outline-select",true) + var selectGroup = groupSelectLayer.append('g').attr("class", "red-ui-flow-group").attr("id","group_select_"+d.id); + selectGroup.append('rect').classed("red-ui-flow-group-outline-select",true) .attr('rx',1).attr('ry',1) .attr("x",-4) - .attr("y",-4); + .attr("y",-4) + .style("stroke","rgba(255,255,255,0.8)") + .style("stroke-width",6) + + selectGroup.append('rect').classed("red-ui-flow-group-outline-select",true) + .attr('rx',1).attr('ry',1) + .attr("x",-4) + .attr("y",-4) + selectGroup.on("mousedown", function() {console.log("omd");groupMouseDown.call(g[0][0],d)}); + selectGroup.on("mouseup", function() {console.log("omu");groupMouseUp.call(g[0][0],d)}); + + g.append('rect').classed("red-ui-flow-group-outline",true).attr('rx',0.5).attr('ry',0.5); g.append('rect').classed("red-ui-flow-group-body",true) .attr('rx',1).attr('ry',1).style({ @@ -4197,16 +4209,28 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); } g.attr("transform","translate("+d.x+","+d.y+")") - .classed("red-ui-flow-group-hovered",d.hovered); g.selectAll(".red-ui-flow-group-outline") .attr("width",d.w) .attr("height",d.h) - g.selectAll(".red-ui-flow-group-outline-select") - .attr("width",d.w+8) - .attr("height",d.h+8) - .style("stroke-opacity",(d.selected)?0.8:0) - .style("stroke-dasharray", (d.active)?"10 4":"none") + + var selectGroup = document.getElementById("group_select_"+d.id); + selectGroup.setAttribute("transform","translate("+d.x+","+d.y+")"); + if (d.hovered) { + selectGroup.classList.add("red-ui-flow-group-hovered") + } else { + selectGroup.classList.remove("red-ui-flow-group-hovered") + } + var selectGroupRect = selectGroup.children[0]; + selectGroupRect.setAttribute("width",d.w+8) + selectGroupRect.setAttribute("height",d.h+8) + selectGroupRect.style.strokeOpacity = (d.selected)?0.8:0; + selectGroupRect.style.strokeDasharray = (d.active)?"10 4":""; + selectGroupRect = selectGroup.children[1]; + selectGroupRect.setAttribute("width",d.w+8) + selectGroupRect.setAttribute("height",d.h+8) + selectGroupRect.style.strokeOpacity = (d.selected)?0.8:0; + selectGroupRect.style.strokeDasharray = (d.active)?"10 4":""; g.selectAll(".red-ui-flow-group-body") @@ -4250,7 +4274,6 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); } } }) - } else { // JOINING - unselect any selected links linkLayer.selectAll(".red-ui-flow-link-selected").data(