diff --git a/packages/node_modules/@node-red/editor-client/src/js/keymap.json b/packages/node_modules/@node-red/editor-client/src/js/keymap.json index 5bd938e98..4a04788aa 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json +++ b/packages/node_modules/@node-red/editor-client/src/js/keymap.json @@ -63,6 +63,8 @@ "ctrl-shift-j": "core:show-previous-tab", "ctrl-shift-k": "core:show-next-tab", "ctrl-shift-g": "core:group-selection", - "ctrl-shift-u": "core:ungroup-selection" + "ctrl-shift-u": "core:ungroup-selection", + "ctrl-shift-c": "core:copy-group-style", + "ctrl-shift-v": "core:paste-group-style" } } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js index 804bea7a1..8754950a0 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js @@ -39,7 +39,6 @@ RED.group = (function() { '
'+ ''+ '
'+ - '
'+ ''+ ''+ @@ -90,6 +89,7 @@ RED.group = (function() { colorPalette.push('#'+((r<<16) + (g<<8) + b).toString(16).padStart(6,'0')); } + var defaultGroupStyle = {}; var groupDef = { defaults:{ @@ -173,6 +173,7 @@ RED.group = (function() { if (this.style["fill-opacity"] === "1") { delete this.style["fill-opacity"] } + this.resize = true; }, set:{ module: "node-red" @@ -192,9 +193,74 @@ RED.group = (function() { RED.actions.add("core:ungroup-selection", function() { ungroupSelection() }) RED.actions.add("core:merge-selection-to-group", function() { mergeSelection() }) RED.actions.add("core:remove-selection-from-group", function() { removeSelection() }) + RED.actions.add("core:copy-group-style", function() { copyGroupStyle() }); + RED.actions.add("core:paste-group-style", function() { pasteGroupStyle() }); $(_groupEditTemplate).appendTo("#red-ui-editor-node-configs"); + var groupStyleDiv = $("
",{ + class:"red-ui-flow-group-body", + style: "position: absolute; top: -1000px;" + }).appendTo(document.body); + var groupStyle = getComputedStyle(groupStyleDiv[0]); + defaultGroupStyle = { + stroke: convertColorToHex(groupStyle.stroke), + "stroke-opacity": groupStyle.strokeOpacity, + fill: convertColorToHex(groupStyle.fill), + "fill-opacity": groupStyle.fillOpacity + } + groupStyleDiv.remove(); + } + + function convertColorToHex(c) { + var m = /^rgb\((\d+), (\d+), (\d+)\)$/.exec(c); + if (m) { + return "#"+(((parseInt(m[1])<<16) + (parseInt(m[2])<<8) + parseInt(m[3])).toString(16).padStart(6,'0')) + } + return c; + } + + + var groupStyleClipboard; + + function copyGroupStyle() { + var selection = RED.view.selection(); + if (selection.nodes && selection.nodes.length === 1 && selection.nodes[0].type === 'group') { + groupStyleClipboard = JSON.parse(JSON.stringify(selection.nodes[0].style)); + RED.notify(RED._("clipboard.groupStyleCopied"),{id:"clipboard"}) + } + } + function pasteGroupStyle() { + if (groupStyleClipboard) { + var selection = RED.view.selection(); + if (selection.nodes) { + var historyEvent = { + t:'multi', + events:[], + dirty: RED.nodes.dirty() + } + selection.nodes.forEach(function(n) { + if (n.type === 'group') { + historyEvent.events.push({ + t: "edit", + node: n, + changes: { + style: JSON.parse(JSON.stringify(n.style)) + }, + dirty: RED.nodes.dirty() + }); + n.style = JSON.parse(JSON.stringify(groupStyleClipboard)); + n.dirty = true; + + } + }) + if (historyEvent.events.length > 0) { + RED.history.push(historyEvent); + RED.nodes.dirty(true); + RED.view.redraw(); + } + } + } } function groupSelection() { @@ -355,10 +421,7 @@ RED.group = (function() { id: RED.nodes.id(), type: 'group', nodes: [], - style: { - stroke: "#999", - fill: "none" - }, + style: JSON.parse(JSON.stringify(defaultGroupStyle)), x: Number.POSITIVE_INFINITY, y: Number.POSITIVE_INFINITY, w: 0, @@ -561,7 +624,6 @@ RED.group = (function() { function markDirty(group) { group.dirty = true; while(group) { - console.log("dirty",group.id) group.dirty = true; group = RED.nodes.group(group.g); }