',{class:"red-ui-search-result-node"}).appendTo(layoutButton);
+ var layoutDisp = $('
',{class:"red-ui-group-layout-picker-cell-text red-ui-group-layout-text-pos-"}).appendTo(layoutDispContainer);
+
+ var refreshDisplay = function() {
+ var val = layoutHiddenInput.val();
+ layoutDisp.removeClass().addClass("red-ui-group-layout-picker-cell-text red-ui-group-layout-text-pos-"+val)
+ }
+ layoutButton.on("click", function(e) {
+ var picker = $("
", {
+ class: "red-ui-group-layout-picker"
+ }).css({
+ width: "126px"
+ });
+
+ var row = null;
+
+ row = $("
").appendTo(picker);
+
+ for (var y=0;y<2;y++) { //red-ui-group-layout-text-pos
+ var yComponent= "ns"[y];
+ row = $("
").appendTo(picker);
+ for (var x=0;x<3;x++) {
+ var xComponent = ["w","","e"][x];
+ var val = yComponent+xComponent;
+ var button = $("
", { class:"red-ui-search-result-node","data-pos":val }).appendTo(row);
+ button.on("click", function (e) {
+ e.preventDefault();
+ layoutHiddenInput.val($(this).data("pos"));
+ layoutPanel.hide()
+ refreshDisplay();
+ });
+ $('
',{class:"red-ui-group-layout-picker-cell-text red-ui-group-layout-text-pos-"+val}).appendTo(button);
+
+
+ }
+ }
+ refreshDisplay();
+ var layoutPanel = RED.popover.panel(picker);
+ layoutPanel.show({
+ target: layoutButton
+ })
+ })
+
+ refreshDisplay();
+
+ return container;
+
+ }
+
+
return {
def: groupDef,
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 9ebd61c03..229da1f35 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
@@ -2040,9 +2040,7 @@ if (DEBUG_EVENTS) { console.warn("clearSelection", mouse_mode); }
}
var groups = activeGroups.filter(function(g) { return g.selected && !g.active });
while (groups.length > 0) {
- console.log("GROUPS",groups.slice())
var group = groups.shift();
- console.log("GROUP",group);
nodes.push(group);
groups = groups.concat(group.nodes.filter(function(n) { return n.type === "group" }))
}
@@ -2070,7 +2068,6 @@ if (DEBUG_EVENTS) { console.warn("clearSelection", mouse_mode); }
}
}
clipboard = JSON.stringify(nns);
-console.warn(nns);
RED.notify(RED._("clipboard.nodeCopied",{count:nns.length}),{id:"clipboard"});
}
}
@@ -4102,6 +4099,17 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
"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("x",-4)
+ .attr("y",-4)
+ .style({
+ "fill":"none",
+ "stroke": "#ff7f0e",
+ "pointer-events": "stroke",
+ "stroke-opacity": 0,
+ "stroke-width": 4
+ })
g.append('rect').classed("red-ui-flow-group-body",true)
.attr('rx',1).attr('ry',1).style({
@@ -4112,7 +4120,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
"stroke-width": 2
})
g.on("mousedown",groupMouseDown).on("mouseup",groupMouseUp)
-
+ g.append('svg:text').attr("class","red-ui-flow-group-label").text(d.name);
d.dirty = true;
});
@@ -4148,16 +4156,50 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
g.selectAll(".red-ui-flow-group-outline")
.attr("width",d.w)
.attr("height",d.h)
- .style("stroke-opacity",function(d) { if (d.selected) { return 0.8 } return 0});
+ // .style("stroke-opacity",d.selected?0.8:0);
+
+ 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")
+
g.selectAll(".red-ui-flow-group-body")
.attr("width",d.w)
.attr("height",d.h)
- .style("stroke",function(d) { /*if (d.selected) { return "#ff7f0e" } */return d.style.stroke || "none"})
- .style("stroke-opacity", function(d) { return d.style.hasOwnProperty('stroke-opacity') ? d.style['stroke-opacity'] : 1})
- .style("stroke-dasharray", function(d) { return (d.active||d.hovered)?"10 4":"none"})
- .style("fill", function(d) { return d.style.fill || "none"})
- .style("fill-opacity", function(d) { return d.style.hasOwnProperty('fill-opacity') ? d.style['fill-opacity'] : 1})
+ .style("stroke", d.style.stroke || "none")
+ .style("stroke-opacity", d.style.hasOwnProperty('stroke-opacity') ? d.style['stroke-opacity'] : 1)
+ .style("fill", d.style.fill || "none")
+ .style("fill-opacity", d.style.hasOwnProperty('fill-opacity') ? d.style['fill-opacity'] : 1)
+
+ var label = g.selectAll(".red-ui-flow-group-label");
+ label.classed("hide",!!!d.style.label)
+ if (d.style.label) {
+ var labelPos = d.style["label-position"] || "nw";
+ var labelX = 0;
+ var labelY = 0;
+
+ if (labelPos[0] === 'n') {
+ labelY = 0+15; // Allow for font-height
+ } else {
+ labelY = d.h - 5;
+ }
+ if (labelPos[1] === 'w') {
+ labelX = 5;
+ labelAnchor = "start"
+ } else if (labelPos[1] === 'e') {
+ labelX = d.w-5;
+ labelAnchor = "end"
+ } else {
+ labelX = d.w/2;
+ labelAnchor = "middle"
+ }
+ label.text(d.name)
+ .style("fill", d.style.hasOwnProperty('color')?d.style.color:"#999")
+ .attr("transform","translate("+labelX+","+labelY+")")
+ .attr("text-anchor",labelAnchor);
+ }
// g.selectAll(".red-ui-flow-group-handle-0")
// .style("opacity",function(d) { return d.selected?1:0})
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
index 1ef5fd295..e5d80cd72 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
@@ -410,6 +410,51 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
}
}
+
+.red-ui-group-layout-picker {
+ padding: 5px;
+ background: $primary-background;
+}
+.red-ui-group-layout-picker-cell-text {
+ position: absolute;
+ width: 14px;
+ height: 2px;
+ border-top: 2px solid $secondary-text-color;
+ border-bottom: 2px solid $secondary-text-color;
+ margin: 2px;
+
+ &.red-ui-group-layout-text-pos-nw { top: 0; left: 0; }
+ &.red-ui-group-layout-text-pos-n { top: 0; left: calc(50% - 9px); }
+ &.red-ui-group-layout-text-pos-ne { top: 0; right: 0; }
+ &.red-ui-group-layout-text-pos-sw { bottom: 0; left: 0; }
+ &.red-ui-group-layout-text-pos-s { bottom: 0; left: calc(50% - 9px); }
+ &.red-ui-group-layout-text-pos-se { bottom: 0; right: 0; }
+ &.red-ui-group-layout-text-pos- {
+ width: 100%;
+ height: 100%;
+ border-radius: 5px;
+ margin: 0;
+ background-color: #FFF;
+ background-size: 100% 100%;
+ background-position: 0 0, 50% 50%;
+ background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent);
+ border: none;
+ }
+}
+
+.red-ui-group-layout-picker button.red-ui-search-result-node {
+ float: none;
+ position: relative;
+ padding: 0;
+ margin: 5px;
+ width: 32px;
+ height: 27px;
+}
+
+button.red-ui-group-layout-picker-none {
+ width: 100%;
+}
+
.red-ui-color-picker {
input[type="text"] {
border-radius:0;
@@ -428,6 +473,11 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
}
background: $primary-background;
}
+.red-ui-editor-node-appearance-button {
+ .red-ui-search-result-node {
+ overflow: hidden
+ }
+}
.red-ui-color-picker-cell {
padding: 0;
border-style: solid;
@@ -436,7 +486,7 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
}
.red-ui-color-picker-swatch {
position: absolute;
- top:0;right:0;left:0;bottom:0;
+ top:-1px;right:-1px;left:-1px;bottom:-1px;
border-radius: 4px;
}