Add menu options for align tools and show shortcuts on menu

2025-03-01 10:36:34 +00:00 · 2021-09-07 11:47:04 +01:00
parent d2cdc67ec7
commit 192b542fe4
9 changed files with 118 additions and 11 deletions
--- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
@@ -116,7 +116,16 @@
            "groupSelection": "Group selection",
            "ungroupSelection": "Ungroup selection",
            "groupMergeSelection": "Merge selection",
-            "groupRemoveSelection": "Remove from group"
+            "groupRemoveSelection": "Remove from group",
+            "arrange":"Arrange",
+            "alignLeft":"Align to left",
+            "alignCenter":"Align to center",
+            "alignRight":"Align to right",
+            "alignTop":"Align to top",
+            "alignMiddle":"Align to middle",
+            "alignBottom":"Align to bottom",
+            "distributeHorizontally":"Distribute horizontally",
+            "distributeVertically":"Distribute vertically"
        }
    },
    "actions": {
@@ -450,8 +459,9 @@
        "unassigned": "Unassigned",
        "global": "global",
        "workspace": "workspace",
-        "selectAll": "Select all nodes",
-        "selectAllConnected": "Select all connected nodes",
+        "selectAll": "Select all",
+        "selectNone": "Select none",
+        "selectAllConnected": "Select connected",
        "addRemoveNode": "Add/remove node from selection",
        "editSelected": "Edit selected node",
        "deleteSelected": "Delete selected nodes or link",
@@ -464,7 +474,10 @@
        "copyNode": "Copy selected nodes",
        "cutNode": "Cut selected nodes",
        "pasteNode": "Paste nodes",
-        "undoChange": "Undo the last change performed",
+        "copyGroupStyle": "Copy group style",
+        "pasteGroupStyle": "Paste group style",
+        "undoChange": "Undo",
+        "redoChange": "Redo",
        "searchBox": "Open search box",
        "managePalette": "Manage palette",
        "actionList":"Action list"
--- a/packages/node_modules/@node-red/editor-client/src/js/history.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/history.js
@@ -658,6 +658,8 @@ RED.history = (function() {
        push: function(ev) {
            undoHistory.push(ev);
            redoHistory = [];
+            RED.menu.setDisabled("menu-item-edit-undo", false);
+            RED.menu.setDisabled("menu-item-edit-redo", true);
        },
        pop: function() {
            var ev = undoHistory.pop();
@@ -665,6 +667,8 @@ RED.history = (function() {
            if (rev) {
                redoHistory.push(rev);
            }
+            RED.menu.setDisabled("menu-item-edit-undo", undoHistory.length === 0);
+            RED.menu.setDisabled("menu-item-edit-redo", redoHistory.length === 0);
        },
        peek: function() {
            return undoHistory[undoHistory.length-1];
@@ -672,6 +676,8 @@ RED.history = (function() {
        clear: function() {
            undoHistory = [];
            redoHistory = [];
+            RED.menu.setDisabled("menu-item-edit-undo", true);
+            RED.menu.setDisabled("menu-item-edit-redo", true);
        },
        redo: function() {
            var ev = redoHistory.pop();
@@ -681,6 +687,8 @@ RED.history = (function() {
                    undoHistory.push(uev);
                }
            }
+            RED.menu.setDisabled("menu-item-edit-undo", undoHistory.length === 0);
+            RED.menu.setDisabled("menu-item-edit-redo", redoHistory.length === 0);
        }
    }

--- a/packages/node_modules/@node-red/editor-client/src/js/red.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/red.js
@@ -559,6 +559,22 @@ var RED = (function() {
                {id:"menu-item-projects-settings",label:RED._("menu.label.projects-settings"),disabled:false,onselect:"core:show-project-settings"}
            ]});
        }
+        menuOptions.push({id:"menu-item-edit-menu", label:"Edit", options: [
+            {id: "menu-item-edit-undo", label:RED._("keyboard.undoChange"), disabled: true, onselect: "core:undo"},
+            {id: "menu-item-edit-redo", label:RED._("keyboard.redoChange"), disabled: true, onselect: "core:redo"},
+            null,
+            {id: "menu-item-edit-cut", label:RED._("keyboard.cutNode"), onselect: "core:cut-selection-to-internal-clipboard"},
+            {id: "menu-item-edit-copy", label:RED._("keyboard.copyNode"), onselect: "core:copy-selection-to-internal-clipboard"},
+            {id: "menu-item-edit-paste", label:RED._("keyboard.pasteNode"), disabled: true, onselect: "core:paste-from-internal-clipboard"},
+            null,
+            {id: "menu-item-edit-copy-group-style", label:RED._("keyboard.copyGroupStyle"), onselect: "core:copy-group-style"},
+            {id: "menu-item-edit-paste-group-style", label:RED._("keyboard.pasteGroupStyle"), disabled: true, onselect: "core:paste-group-style"},
+            null,
+            {id: "menu-item-edit-select-all", label:RED._("keyboard.selectAll"), onselect: "core:select-all-nodes"},
+            {id: "menu-item-edit-select-connected", label:RED._("keyboard.selectAllConnected"), onselect: "core:select-connected-nodes"},
+            {id: "menu-item-edit-select-none", label:RED._("keyboard.selectNone"), onselect: "core:select-none"}
+        ]});
+
        menuOptions.push({id:"menu-item-view-menu",label:RED._("menu.label.view.view"),options:[
            {id:"menu-item-palette",label:RED._("menu.label.palette.show"),toggle:true,onselect:"core:toggle-palette", selected: true},
            {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true},
@@ -566,6 +582,20 @@ var RED = (function() {
            {id:"menu-item-action-list",label:RED._("keyboard.actionList"),onselect:"core:show-action-list"},
            null
        ]});
+
+        menuOptions.push({id:"menu-item-arrange-menu", label:RED._("menu.label.arrange"), options: [
+            {id: "menu-item-view-tools-align-left", label:RED._("menu.label.alignLeft"), onselect: "core:align-selection-to-left"},
+            {id: "menu-item-view-tools-align-center", label:RED._("menu.label.alignCenter"), onselect: "core:align-selection-to-center"},
+            {id: "menu-item-view-tools-align-right", label:RED._("menu.label.alignRight"), onselect: "core:align-selection-to-right"},
+            null,
+            {id: "menu-item-view-tools-align-top", label:RED._("menu.label.alignTop"), onselect: "core:align-selection-to-top"},
+            {id: "menu-item-view-tools-align-middle", label:RED._("menu.label.alignMiddle"), onselect: "core:align-selection-to-middle"},
+            {id: "menu-item-view-tools-align-bottom", label:RED._("menu.label.alignBottom"), onselect: "core:align-selection-to-bottom"},
+            null,
+            {id: "menu-item-view-tools-distribute-horizontally", label:RED._("menu.label.distributeHorizontally"), onselect: "core:distribute-selection-horizontally"},
+            {id: "menu-item-view-tools-distribute-veritcally", label:RED._("menu.label.distributeVertically"), onselect: "core:distribute-selection-vertically"}
+        ]});
+
        menuOptions.push(null);
        if (RED.settings.theme("menu.menu-item-import-library", true)) {
            menuOptions.push({id: "menu-item-import", label: RED._("menu.label.import"), onselect: "core:show-import-dialog"});
@@ -626,7 +656,6 @@ var RED = (function() {
        RED.user.init();
        RED.notifications.init();
        RED.library.init();
-        RED.keyboard.init();
        RED.palette.init();
        RED.eventLog.init();

@@ -655,7 +684,7 @@ var RED = (function() {

        RED.deploy.init(RED.settings.theme("deployButton",null));

-        buildMainMenu();
+        RED.keyboard.init(buildMainMenu);

        RED.nodes.init();
        RED.comms.connect();
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
@@ -88,6 +88,13 @@ RED.menu = (function() {
            linkContent += '</a>';

            var link = $(linkContent).appendTo(item);
+            opt.link = link;
+            if (typeof opt.onselect === 'string') {
+                var shortcut = RED.keyboard.getShortcut(opt.onselect);
+                if (shortcut && shortcut.key) {
+                    opt.shortcutSpan = $('<span class="red-ui-popover-key">'+RED.keyboard.formatKey(shortcut.key, true)+'</span>').appendTo(link);
+                }
+            }

            menuItems[opt.id] = opt;

@@ -276,6 +283,22 @@ RED.menu = (function() {
        }
    }

+    function refreshShortcuts() {
+        for (var id in menuItems) {
+            if (menuItems.hasOwnProperty(id)) {
+                var opt = menuItems[id];
+                if (typeof opt.onselect === "string" && opt.shortcutSpan) {
+                    opt.shortcutSpan.remove();
+                    delete opt.shortcutSpan;
+                    var shortcut = RED.keyboard.getShortcut(opt.onselect);
+                    if (shortcut && shortcut.key) {
+                        opt.shortcutSpan = $('<span class="red-ui-popover-key">'+RED.keyboard.formatKey(shortcut.key, true)+'</span>').appendTo(opt.link);
+                    }
+                }
+            }
+        }
+    }
+
    return {
        init: createMenu,
        setSelected: setSelected,
@@ -284,6 +307,7 @@ RED.menu = (function() {
        setDisabled: setDisabled,
        addItem: addItem,
        removeItem: removeItem,
-        setAction: setAction
+        setAction: setAction,
+        refreshShortcuts: refreshShortcuts
    }
 })();
--- 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
@@ -183,7 +183,9 @@ RED.group = (function() {
            var activateUngroup = false;
            var activateMerge = false;
            var activateRemove = false;
+            var singleGroupSelected = false;
            if (activateGroup) {
+                singleGroupSelected = selection.nodes.length === 1 && selection.nodes[0].type === 'group';
                selection.nodes.forEach(function (n) {
                    if (n.type === "group") {
                        activateUngroup = true;
@@ -200,6 +202,8 @@ RED.group = (function() {
            RED.menu.setDisabled("menu-item-group-ungroup", !activateUngroup);
            RED.menu.setDisabled("menu-item-group-merge", !activateMerge);
            RED.menu.setDisabled("menu-item-group-remove", !activateRemove);
+            RED.menu.setDisabled("menu-item-edit-copy-group-style", !singleGroupSelected);
+            RED.menu.setDisabled("menu-item-edit-paste-group-style", !activateUngroup);
        });

        RED.actions.add("core:group-selection", function() { groupSelection() })
@@ -252,6 +256,7 @@ RED.group = (function() {
        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"})
+            RED.menu.setDisabled("menu-item-edit-paste-group-style", false)
        }
    }
    function pasteGroupStyle() {
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js
@@ -131,7 +131,7 @@ RED.keyboard = (function() {
        return mergedKeymap;
    }

-    function init() {
+    function init(done) {
        // Migrate from pre-0.18
        migrateOldKeymap();

@@ -164,6 +164,7 @@ RED.keyboard = (function() {
                    }
                }
            }
+            done();
        });

        RED.userSettings.add({
@@ -174,6 +175,9 @@ RED.keyboard = (function() {
                setTimeout(function() {
                    $("#red-ui-settings-tab-keyboard-filter").trigger("focus");
                },200);
+            },
+            close: function() {
+                RED.menu.refreshShortcuts();
            }
        })
    }
--- 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
@@ -501,6 +501,14 @@ RED.view = (function() {
        RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
        RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection();deleteSelection();});
        RED.actions.add("core:paste-from-internal-clipboard",function(){importNodes(clipboard,{generateIds: true});});
+
+        RED.events.on("view:selection-changed", function(selection) {
+            var hasSelection = (selection.nodes && selection.nodes.length > 0);
+            RED.menu.setDisabled("menu-item-edit-cut",!hasSelection);
+            RED.menu.setDisabled("menu-item-edit-copy",!hasSelection);
+            RED.menu.setDisabled("menu-item-edit-select-connected",!hasSelection);
+        })
+
        RED.actions.add("core:delete-selection",deleteSelection);
        RED.actions.add("core:edit-selected-node",editSelection);
        RED.actions.add("core:go-to-selection",function() {
@@ -2332,6 +2340,7 @@ RED.view = (function() {
                }
            }
            clipboard = JSON.stringify(nns);
+            RED.menu.setDisabled("menu-item-edit-paste", false);
            if (nodeCount > 0) {
                RED.notify(RED._("clipboard.nodeCopied",{count:nodeCount}),{id:"clipboard"});
            } else if (groupCount > 0) {
--- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
@@ -68,6 +68,10 @@
    & > .disabled > a:hover,
    & > .disabled > a:focus {
        color: $menuDisabledColor;
+        .red-ui-popover-key {
+            color: $menuDisabledColor;
+            border-color: $menuDisabledColor;
+        }
    }

    & > .disabled > a:hover,
@@ -102,6 +106,14 @@
                display: none;
            }
        }
+        .red-ui-popover-key {
+            border: none;
+            padding: 0;
+            font-size: 13px;
+            float: right;
+            color: $menuColor;
+            border-color: $menuColor;
+        }
    }

 }
@@ -209,4 +221,4 @@ ul.red-ui-menu:not(.red-ui-menu-dropdown) {
        }
    }

-}
+}
--- a/packages/node_modules/@node-red/editor-client/src/sass/header.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
@@ -191,14 +191,17 @@
        margin-top: 0;
        li a {
            color: $header-menu-color;
-            padding: 3px 40px;
+            padding: 3px 10px 3px 40px;
            img {
                max-width: 100%;
                margin-right: 10px;
                padding: 4px;
                border: 3px solid transparent;
            }
-
+            .red-ui-popover-key {
+                color: $header-menu-color-disabled !important;
+                border-color: $header-menu-color-disabled !important;
+            }
            &.active img {
                border: 3px solid $header-menu-item-border-active;
            }