frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

[groups] Improve styling of group selection/highlight

This commit is contained in:
Nick O'Leary 2020-03-23 14:51:18 +00:00
parent 20a8059758
commit f61c137ea3
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 68 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -286,6 +286,7 @@ RED.palette = (function() {
var spliceTimer;
var groupTimer;
var activeGroup;
var hoverGroup;
var paletteWidth;
var paletteTop;
$(d).draggable({
@ -297,11 +298,21 @@ RED.palette = (function() {
start: function() {
paletteWidth = $("#red-ui-palette").width();
paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
activeGroup = null;
hoverGroup = null;
activeGroup = RED.view.getActiveGroup();
if (activeGroup) {
document.getElementById(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");
}
if (activeGroup) {
document.getElementById(activeGroup.id).classList.remove("red-ui-flow-group-active-hovered");
}
if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null; }
if (groupTimer) { clearTimeout(groupTimer); groupTimer = null; }
},
@ -313,12 +324,16 @@ RED.palette = (function() {
if (!groupTimer) {
groupTimer = setTimeout(function() {
var group = RED.view.getGroupAtPoint(mouseX,mouseY);
if (group !== activeGroup) {
// TODO: needs to be a CSS style on the group
d3.selectAll(".red-ui-flow-group-body").style("stroke-dasharray", function(d) { return (d === group)?"10 4":"none"})
activeGroup = group;
if (activeGroup) {
$(ui.helper).data('group',activeGroup);
if (group !== hoverGroup) {
if (hoverGroup) {
document.getElementById(hoverGroup.id).classList.remove("red-ui-flow-group-hovered");
}
if (group) {
document.getElementById(group.id).classList.add("red-ui-flow-group-hovered");
}
hoverGroup = group;
if (hoverGroup) {
$(ui.helper).data('group',hoverGroup);
} else {
$(ui.helper).removeData('group');
}

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

@ -4064,60 +4064,19 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
.attr("class", "red-ui-flow-group")
groupEnter.each(function(d,i) {
var g = d3.select(this);
g.attr("id",d.id);
// g.append('path').classed("red-ui-flow-group-handle red-ui-flow-group-handle-0",true).style({
// "fill":"white",
// "stroke": "#ff7f0e",
// "stroke-width": 2
// }).attr("d","m -5 6 v -2 q 0 -9 9 -9 h 2 v 11 z")
//
// g.append('path').classed("red-ui-flow-group-handle red-ui-flow-group-handle-1",true).style({
// "fill": "white",
// "stroke": "#ff7f0e",
// "stroke-width": 2
// }).attr("d","m -6 -5 h 2 q 9 0 9 9 v 2 h -11 z")
//
// g.append('path').classed("red-ui-flow-group-handle red-ui-flow-group-handle-2",true).style({
// "fill": "white",
// "stroke": "#ff7f0e",
// "stroke-width": 2
// }).attr("d","m 5 -6 v 2 q 0 9 -9 9 h -2 v -11 z")
//
// g.append('path').classed("red-ui-flow-group-handle red-ui-flow-group-handle-3",true).style({
// "fill": "white",
// "stroke": "#ff7f0e",
// "stroke-width": 2
// }).attr("d","m 6 5 h -2 q -9 0 -9 -9 v -2 h 11 z")
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",true)
.attr('rx',0.5).attr('ry',0.5).style({
"fill":"none",
"stroke": "#ff7f0e",
"pointer-events": "stroke",
"stroke-opacity": 0,
"stroke-width": 12
})
g.append('rect').classed("red-ui-flow-group-outline-select",true)
.attr('rx',0.5).attr('ry',0.5)
.attr('rx',1).attr('ry',1)
.attr("x",-4)
.attr("y",-4)
.style({
"fill":"none",
"stroke": "#ff7f0e",
"pointer-events": "stroke",
"stroke-opacity": 0,
"stroke-width": 4
})
.attr("y",-4);
g.append('rect').classed("red-ui-flow-group-body",true)
.attr('rx',1).attr('ry',1).style({
"pointer-events": "none",
"fill":d.fill||"none",
"fill-opacity": 1,
"stroke": d.stroke||"none",
"stroke-width": 2
})
g.on("mousedown",groupMouseDown).on("mouseup",groupMouseUp)
g.append('svg:text').attr("class","red-ui-flow-group-label").text(d.name);
@ -4152,7 +4111,8 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
d.w = maxX - minX;
d.h = maxY - minY;
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")
.attr("width",d.w)
.attr("height",d.h)
@ -4161,8 +4121,8 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
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||d.hovered)?"10 4":"none")
.style("stroke-opacity",(d.selected)?0.8:0)
.style("stroke-dasharray", (d.active)?"10 4":"none")
g.selectAll(".red-ui-flow-group-body")
@ -4571,6 +4531,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
return result;
},
getGroupAtPoint: getGroupAt,
getActiveGroup: function() { return activeGroup },
reveal: function(id) {
if (RED.nodes.workspace(id) || RED.nodes.subflow(id)) {
RED.workspaces.show(id);

37
packages/node_modules/@node-red/editor-client/src/sass/flow.scss vendored
View File

@ -71,6 +71,43 @@
}
}
.red-ui-flow-group {
&.red-ui-flow-group-hovered {
.red-ui-flow-group-outline-select {
stroke-opacity: 0.8 !important;
stroke-dasharray: 10 4 !important;
}
}
&.red-ui-flow-group-active-hovered:not(.red-ui-flow-group-hovered) {
.red-ui-flow-group-outline-select {
stroke: $link-link-color;
}
}
}
.red-ui-flow-group-outline {
fill: none;
stroke: $node-selected-color;
stroke-opacity: 0;
stroke-width: 12;
pointer-events: stroke;
}
.red-ui-flow-group-outline-select {
fill: none;
stroke: $node-selected-color;
pointer-events: stroke;
stroke-opacity: 0;
stroke-width: 3;
}
.red-ui-flow-group-body {
pointer-events: none;
fill-opacity: 1;
stroke-width: 2;
}
.red-ui-flow-group-label {}
.red-ui-flow-node-unknown {
stroke-dasharray:10,4;
stroke: $node-border-unknown;