frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects 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
2 changed files with 49 additions and 24 deletions
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;
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) {

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
* |- <g>.red-ui-workspace-chart-grid "gridLayer"
* |- <g> "groupLayer"
* |- <g> "groupSelectLayer"
* |- <g> "linkLayer"
* |- <g> "dragGroupLayer"
* \- <g> "nodeLayer"
* |- <g> "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(