From f61c137ea3e9438a276b92e5512bc8cc01d8d73a Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 23 Mar 2020 14:51:18 +0000 Subject: [PATCH] [groups] Improve styling of group selection/highlight --- .../editor-client/src/js/ui/palette.js | 29 +++++++--- .../@node-red/editor-client/src/js/ui/view.js | 57 +++---------------- .../editor-client/src/sass/flow.scss | 37 ++++++++++++ 3 files changed, 68 insertions(+), 55 deletions(-) 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 d0842a45f..bab8d94b9 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 @@ -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'); } 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 229da1f35..9f91cb960 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 @@ -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); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss index fa72c3f43..bde90801d 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss @@ -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;