[groups] Add copy/paste group style actions

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"
      }
 }

packages/node_modules/@node-red/editor-client/src/js/ui/group.js

@@ -39,7 +39,6 @@ RED.group = (function() {
         '<div class="form-row" style="padding-left: 100px;" id="node-input-row-style-fill">'+
             '<label style="width: 70px;margin-right: 10px "  for="node-input-style-fill" data-i18n="editor:common.label.fill"></label>'+
         '</div>'+
-
         '<div class="form-row">'+
             '<label for="node-input-style-label">Label</label>'+
             '<input type="checkbox" id="node-input-style-label"/>'+
@@ -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 = $("<div>",{
+            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);
         }