frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

[groups] Draw group selection above all other groups

Browse Source
This commit is contained in:
Nick O'Leary 2020-04-01 14:10:35 +01:00
parent 04da13eaf9
commit 5da89892b4
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 49 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/node_modules/@node-red/editor-client/src/js/ui/palette.js vendored
View File

@ -301,17 +301,17 @@ RED.palette = (function() {
hoverGroup = null; hoverGroup = null;
activeGroup = RED.view.getActiveGroup(); activeGroup = RED.view.getActiveGroup();
if (activeGroup) { 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(); RED.view.focus();
}, },
stop: function() { stop: function() {
d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false); d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
if (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 (activeGroup) { 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 (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null; }
if (groupTimer) { clearTimeout(groupTimer); groupTimer = 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(); mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop();
if (!groupTimer) { if (!groupTimer) {
groupTimer = setTimeout(function() { groupTimer = setTimeout(function() {
mouseX /= RED.view.scale();
mouseY /= RED.view.scale();
var group = RED.view.getGroupAtPoint(mouseX,mouseY); var group = RED.view.getGroupAtPoint(mouseX,mouseY);
if (group !== hoverGroup) { if (group !== hoverGroup) {
if (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) { 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; hoverGroup = group;
if (hoverGroup) { if (hoverGroup) {

61
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -22,9 +22,10 @@
* |- <rect>.red-ui-workspace-chart-background * |- <rect>.red-ui-workspace-chart-background
* |- <g>.red-ui-workspace-chart-grid "gridLayer" * |- <g>.red-ui-workspace-chart-grid "gridLayer"
* |- <g> "groupLayer" * |- <g> "groupLayer"
* |- <g> "groupSelectLayer"
* |- <g> "linkLayer" * |- <g> "linkLayer"
* |- <g> "dragGroupLayer" * |- <g> "dragGroupLayer"
* \- <g> "nodeLayer" * |- <g> "nodeLayer"
*/ */
RED.view = (function() { RED.view = (function() {
@ -110,6 +111,7 @@ RED.view = (function() {
var gridLayer; var gridLayer;
var linkLayer; var linkLayer;
var dragGroupLayer; var dragGroupLayer;
var groupSelectLayer;
var nodeLayer; var nodeLayer;
var groupLayer; var groupLayer;
var drag_lines; var drag_lines;
@ -265,9 +267,11 @@ RED.view = (function() {
updateGrid(); updateGrid();
groupLayer = eventLayer.append("g"); groupLayer = eventLayer.append("g");
groupSelectLayer = eventLayer.append("g");
linkLayer = eventLayer.append("g"); linkLayer = eventLayer.append("g");
dragGroupLayer = eventLayer.append("g"); dragGroupLayer = eventLayer.append("g");
nodeLayer = eventLayer.append("g"); nodeLayer = eventLayer.append("g");
drag_lines = []; drag_lines = [];
RED.events.on("workspace:change",function(event) { RED.events.on("workspace:change",function(event) {
@ -3891,11 +3895,6 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
gg = dirtyGroups[gg].g; 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 }); var group = groupLayer.selectAll(".red-ui-flow-group").data(activeGroups,function(d) { return d.id });
group.exit().remove(); group.exit().each(function(d,i) {
var groupEnter = group.enter().insert("svg:g") document.getElementById("group_select_"+d.id).remove()
.attr("class", "red-ui-flow-group") }).remove();
var groupEnter = group.enter().insert("svg:g").attr("class", "red-ui-flow-group")
var addedGroups = false; var addedGroups = false;
groupEnter.each(function(d,i) { groupEnter.each(function(d,i) {
addedGroups = true; addedGroups = true;
var g = d3.select(this); var g = d3.select(this);
g.attr("id",d.id); 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('rx',1).attr('ry',1)
.attr("x",-4) .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) g.append('rect').classed("red-ui-flow-group-body",true)
.attr('rx',1).attr('ry',1).style({ .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+")") g.attr("transform","translate("+d.x+","+d.y+")")
.classed("red-ui-flow-group-hovered",d.hovered);
g.selectAll(".red-ui-flow-group-outline") g.selectAll(".red-ui-flow-group-outline")
.attr("width",d.w) .attr("width",d.w)
.attr("height",d.h) .attr("height",d.h)
g.selectAll(".red-ui-flow-group-outline-select")
.attr("width",d.w+8) var selectGroup = document.getElementById("group_select_"+d.id);
.attr("height",d.h+8) selectGroup.setAttribute("transform","translate("+d.x+","+d.y+")");
.style("stroke-opacity",(d.selected)?0.8:0) if (d.hovered) {
.style("stroke-dasharray", (d.active)?"10 4":"none") 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") g.selectAll(".red-ui-flow-group-body")
@ -4250,7 +4274,6 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
} }
}) })
} else { } else {
// JOINING - unselect any selected links // JOINING - unselect any selected links
linkLayer.selectAll(".red-ui-flow-link-selected").data( linkLayer.selectAll(".red-ui-flow-link-selected").data(