From 192b542fe4223f0fd0d7ecf3eb558bcc3084827c Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 7 Sep 2021 11:47:04 +0100 Subject: [PATCH] Add menu options for align tools and show shortcuts on menu --- .../editor-client/locales/en-US/editor.json | 21 +++++++++--- .../@node-red/editor-client/src/js/history.js | 8 +++++ .../@node-red/editor-client/src/js/red.js | 33 +++++++++++++++++-- .../editor-client/src/js/ui/common/menu.js | 26 ++++++++++++++- .../editor-client/src/js/ui/group.js | 5 +++ .../editor-client/src/js/ui/keyboard.js | 6 +++- .../@node-red/editor-client/src/js/ui/view.js | 9 +++++ .../editor-client/src/sass/dropdownMenu.scss | 14 +++++++- .../editor-client/src/sass/header.scss | 7 ++-- 9 files changed, 118 insertions(+), 11 deletions(-) diff --git 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 index 3f1e32588..adeae0c2d 100755 --- 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" diff --git a/packages/node_modules/@node-red/editor-client/src/js/history.js b/packages/node_modules/@node-red/editor-client/src/js/history.js index 338d955e1..21823ae26 100644 --- 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); } } diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index 1a7d9b08f..171e3124b 100644 --- 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(); diff --git 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 index 7ebe659c9..e8c678333 100644 --- 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 += ''; 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 = $(''+RED.keyboard.formatKey(shortcut.key, true)+'').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 = $(''+RED.keyboard.formatKey(shortcut.key, true)+'').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 } })(); 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 1c86eb631..6e4ff98f5 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 @@ -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() { diff --git 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 index 9e976e4fc..7a38a290d 100644 --- 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(); } }) } 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 afbf5f5f7..51f4428f6 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 @@ -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) { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss index bb91846bb..ca19afc73 100644 --- 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) { } } -} \ No newline at end of file +} diff --git a/packages/node_modules/@node-red/editor-client/src/sass/header.scss b/packages/node_modules/@node-red/editor-client/src/sass/header.scss index 4093e9bca..02528a446 100644 --- 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; }