From 71db79ba53ea3090981fcc13afc975ae1da01be3 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 17 Nov 2022 12:55:57 +0000 Subject: [PATCH 1/2] More context menu options --- .../@node-red/editor-client/src/js/red.js | 12 +- .../editor-client/src/js/ui/contextMenu.js | 186 +++++++++++------- .../editor-client/src/js/ui/tab-help.js | 16 +- 3 files changed, 137 insertions(+), 77 deletions(-) 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 129c46799..114066d91 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 @@ -668,11 +668,6 @@ var RED = (function() { ]}); menuOptions.push({id:"menu-item-arrange-menu", label:RED._("menu.label.arrange"), options: [ - {id: "menu-item-view-tools-move-to-back", label:RED._("menu.label.moveToBack"), disabled: true, onselect: "core:move-selection-to-back"}, - {id: "menu-item-view-tools-move-to-front", label:RED._("menu.label.moveToFront"), disabled: true, onselect: "core:move-selection-to-front"}, - {id: "menu-item-view-tools-move-backwards", label:RED._("menu.label.moveBackwards"), disabled: true, onselect: "core:move-selection-backwards"}, - {id: "menu-item-view-tools-move-forwards", label:RED._("menu.label.moveForwards"), disabled: true, onselect: "core:move-selection-forwards"}, - null, {id: "menu-item-view-tools-align-left", label:RED._("menu.label.alignLeft"), disabled: true, onselect: "core:align-selection-to-left"}, {id: "menu-item-view-tools-align-center", label:RED._("menu.label.alignCenter"), disabled: true, onselect: "core:align-selection-to-center"}, {id: "menu-item-view-tools-align-right", label:RED._("menu.label.alignRight"), disabled: true, onselect: "core:align-selection-to-right"}, @@ -682,7 +677,12 @@ var RED = (function() { {id: "menu-item-view-tools-align-bottom", label:RED._("menu.label.alignBottom"), disabled: true, onselect: "core:align-selection-to-bottom"}, null, {id: "menu-item-view-tools-distribute-horizontally", label:RED._("menu.label.distributeHorizontally"), disabled: true, onselect: "core:distribute-selection-horizontally"}, - {id: "menu-item-view-tools-distribute-veritcally", label:RED._("menu.label.distributeVertically"), disabled: true, onselect: "core:distribute-selection-vertically"} + {id: "menu-item-view-tools-distribute-veritcally", label:RED._("menu.label.distributeVertically"), disabled: true, onselect: "core:distribute-selection-vertically"}, + null, + {id: "menu-item-view-tools-move-to-back", label:RED._("menu.label.moveToBack"), disabled: true, onselect: "core:move-selection-to-back"}, + {id: "menu-item-view-tools-move-to-front", label:RED._("menu.label.moveToFront"), disabled: true, onselect: "core:move-selection-to-front"}, + {id: "menu-item-view-tools-move-backwards", label:RED._("menu.label.moveBackwards"), disabled: true, onselect: "core:move-selection-backwards"}, + {id: "menu-item-view-tools-move-forwards", label:RED._("menu.label.moveForwards"), disabled: true, onselect: "core:move-selection-forwards"} ]}); menuOptions.push(null); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js index f1b95c324..ef69ea330 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js @@ -30,7 +30,8 @@ RED.contextMenu = (function () { const isGroup = hasSelection && selection.nodes.length === 1 && selection.nodes[0].type === 'group' const canEdit = !RED.workspaces.isActiveLocked() const canRemoveFromGroup = hasSelection && !!selection.nodes[0].g - + const isAllGroups = hasSelection && selection.nodes.filter(n => n.type !== 'group').length === 0 + const hasGroup = hasSelection && selection.nodes.filter(n => n.type === 'group' ).length > 0 const offset = $("#red-ui-workspace-chart").offset() let addX = options.x - offset.left + $("#red-ui-workspace-chart").scrollLeft() @@ -43,64 +44,121 @@ RED.contextMenu = (function () { } menuItems.push( - { onselect: 'core:show-action-list', onpostselect: function () { } }, + { onselect: 'core:show-action-list', onpostselect: function () { } } + ) + + const insertOptions = [] + menuItems.push({ label: RED._("contextMenu.insert"), options: insertOptions }) + insertOptions.push( { - label: RED._("contextMenu.insert"), - options: [ - { - label: RED._("contextMenu.node"), - onselect: function () { - RED.view.showQuickAddDialog({ - position: [addX, addY], - touchTrigger: true, - splice: isSingleLink ? selection.links[0] : undefined, - // spliceMultiple: isMultipleLinks - }) - }, - disabled: !canEdit - }, - (hasLinks) ? { // has least 1 wire selected - label: RED._("contextMenu.junction"), - onselect: 'core:split-wires-with-junctions', - disabled: !canEdit || !hasLinks - } : { - label: RED._("contextMenu.junction"), - onselect: function () { - const nn = { - _def: { defaults: {} }, - type: 'junction', - z: RED.workspaces.active(), - id: RED.nodes.id(), - x: addX, - y: addY, - w: 0, h: 0, - outputs: 1, - inputs: 1, - dirty: true - } - const historyEvent = { - dirty: RED.nodes.dirty(), - t: 'add', - junctions: [nn] - } - RED.nodes.addJunction(nn); - RED.history.push(historyEvent); - RED.nodes.dirty(true); - RED.view.select({nodes: [nn] }); - RED.view.redraw(true) - }, - disabled: !canEdit - }, - { - label: RED._("contextMenu.linkNodes"), - onselect: 'core:split-wire-with-link-nodes', - disabled: !canEdit || !hasLinks - } - ] - - - + label: RED._("contextMenu.node"), + onselect: function () { + RED.view.showQuickAddDialog({ + position: [addX, addY], + touchTrigger: true, + splice: isSingleLink ? selection.links[0] : undefined, + // spliceMultiple: isMultipleLinks + }) + }, + disabled: !canEdit }, + (hasLinks) ? { // has least 1 wire selected + label: RED._("contextMenu.junction"), + onselect: 'core:split-wires-with-junctions', + disabled: !canEdit || !hasLinks + } : { + label: RED._("contextMenu.junction"), + onselect: function () { + const nn = { + _def: { defaults: {} }, + type: 'junction', + z: RED.workspaces.active(), + id: RED.nodes.id(), + x: addX, + y: addY, + w: 0, h: 0, + outputs: 1, + inputs: 1, + dirty: true + } + const historyEvent = { + dirty: RED.nodes.dirty(), + t: 'add', + junctions: [nn] + } + RED.nodes.addJunction(nn); + RED.history.push(historyEvent); + RED.nodes.dirty(true); + RED.view.select({nodes: [nn] }); + RED.view.redraw(true) + }, + disabled: !canEdit + }, + { + label: RED._("contextMenu.linkNodes"), + onselect: 'core:split-wire-with-link-nodes', + disabled: !canEdit || !hasLinks + }, + null, + { onselect: 'core:show-import-dialog', label: RED._('common.label.import')}, + { onselect: 'core:show-examples-import-dialog', label: 'Import Example Flow' } + ) + if (hasSelection && canEdit) { + const nodeOptions = [] + if (!hasMultipleSelection && !isGroup) { + nodeOptions.push( + { onselect: 'core:show-node-help' }, + null + ) + } + nodeOptions.push( + { onselect: 'core:enable-selected-nodes' }, + { onselect: 'core:disable-selected-nodes' }, + null, + { onselect: 'core:show-selected-node-labels' }, + { onselect: 'core:hide-selected-node-labels' } + ) + menuItems.push({ + label: 'Node', + options: nodeOptions + }) + menuItems.push({ + label: 'Group', + options: [ + { onselect: 'core:group-selection' }, + { onselect: 'core:ungroup-selection', disabled: !hasGroup }, + null, + { onselect: 'core:copy-group-style', disabled: !hasGroup }, + { onselect: 'core:paste-group-style', disabled: !hasGroup} + ] + }) + if (canRemoveFromGroup) { + menuItems[menuItems.length - 1].options.push( + null, + { onselect: 'core:remove-selection-from-group', label: RED._("menu.label.groupRemoveSelection") } + ) + } + } + if (canEdit && hasMultipleSelection) { + menuItems.push({ + label: 'Arrange', + options: [ + { label:RED._("menu.label.alignLeft"), onselect: "core:align-selection-to-left"}, + { label:RED._("menu.label.alignCenter"), onselect: "core:align-selection-to-center"}, + { label:RED._("menu.label.alignRight"), onselect: "core:align-selection-to-right"}, + null, + { label:RED._("menu.label.alignTop"), onselect: "core:align-selection-to-top"}, + { label:RED._("menu.label.alignMiddle"), onselect: "core:align-selection-to-middle"}, + { label:RED._("menu.label.alignBottom"), onselect: "core:align-selection-to-bottom"}, + null, + { label:RED._("menu.label.distributeHorizontally"), onselect: "core:distribute-selection-horizontally"}, + { label:RED._("menu.label.distributeVertically"), onselect: "core:distribute-selection-vertically"} + ] + }) + } + + + menuItems.push( null, { onselect: 'core:undo', disabled: RED.history.list().length === 0 }, { onselect: 'core:redo', disabled: RED.history.listRedo().length === 0 }, @@ -109,22 +167,10 @@ RED.contextMenu = (function () { { onselect: 'core:copy-selection-to-internal-clipboard', label: RED._("keyboard.copyNode"), disabled: !hasSelection }, { onselect: 'core:paste-from-internal-clipboard', label: RED._("keyboard.pasteNode"), disabled: !canEdit || !RED.view.clipboard() }, { onselect: 'core:delete-selection', disabled: !canEdit || !canDelete }, + { onselect: 'core:delete-selection-and-reconnect', label: 'Delete and Reconnect', disabled: !canEdit || !canDelete }, { onselect: 'core:show-export-dialog', label: RED._("menu.label.export") }, { onselect: 'core:select-all-nodes' }, ) - - if (hasSelection && canEdit) { - menuItems.push( - null, - isGroup ? - { onselect: 'core:ungroup-selection', disabled: !canEdit || !isGroup } - : { onselect: 'core:group-selection', disabled: !canEdit || !hasSelection } - ) - if (canRemoveFromGroup && canEdit) { - menuItems.push({ onselect: 'core:remove-selection-from-group', label: RED._("menu.label.groupRemoveSelection") }) - } - - } } var direction = "right"; diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js index e5199b5bc..ebd3d4220 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js @@ -141,7 +141,8 @@ RED.sidebar.help = (function() { RED.events.on('registry:node-type-removed', queueRefresh); RED.events.on('subflows:change', refreshSubflow); - RED.actions.add("core:show-help-tab",show); + RED.actions.add("core:show-help-tab", show); + RED.actions.add("core:show-node-help", showNodeHelp) } @@ -338,6 +339,19 @@ RED.sidebar.help = (function() { resizeStack(); } + function showNodeHelp(node) { + if (!node) { + const selection = RED.view.selection() + if (selection.nodes && selection.nodes.length > 0) { + node = selection.nodes.find(n => n.type !== 'group' && n.type !== 'junction') + } + } + if (node) { + show(node.type, true) + } + } + + // TODO: DRY - projects.js function addTargetToExternalLinks(el) { $(el).find("a").each(function(el) { From 2d6e1d7089583501c95a773d576520e8c637f007 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Sat, 3 Dec 2022 21:29:27 +0000 Subject: [PATCH 2/2] NLS updates for context menu --- .../@node-red/editor-client/locales/en-US/editor.json | 2 ++ .../@node-red/editor-client/src/js/ui/contextMenu.js | 10 +++++----- 2 files changed, 7 insertions(+), 5 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 e74dbdbaa..6dcbd1d75 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 @@ -107,6 +107,7 @@ "displayStatus": "Show node status", "displayConfig": "Configuration nodes", "import": "Import", + "importExample": "Import Example Flow", "export": "Export", "search": "Search flows", "searchInput": "search your flows", @@ -503,6 +504,7 @@ "addRemoveNode": "Add/remove node from selection", "editSelected": "Edit selected node", "deleteSelected": "Delete selected nodes or link", + "deleteReconnect": "Delete and Reconnect", "importNode": "Import nodes", "exportNode": "Export nodes", "nudgeNode": "Move selected nodes (1px)", diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js index ef69ea330..57d5bbcf9 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js @@ -101,7 +101,7 @@ RED.contextMenu = (function () { }, null, { onselect: 'core:show-import-dialog', label: RED._('common.label.import')}, - { onselect: 'core:show-examples-import-dialog', label: 'Import Example Flow' } + { onselect: 'core:show-examples-import-dialog', label: RED._('menu.label.importExample') } ) if (hasSelection && canEdit) { const nodeOptions = [] @@ -119,11 +119,11 @@ RED.contextMenu = (function () { { onselect: 'core:hide-selected-node-labels' } ) menuItems.push({ - label: 'Node', + label: RED._('sidebar.info.node'), options: nodeOptions }) menuItems.push({ - label: 'Group', + label: RED._('sidebar.info.group'), options: [ { onselect: 'core:group-selection' }, { onselect: 'core:ungroup-selection', disabled: !hasGroup }, @@ -141,7 +141,7 @@ RED.contextMenu = (function () { } if (canEdit && hasMultipleSelection) { menuItems.push({ - label: 'Arrange', + label: RED._('menu.label.arrange'), options: [ { label:RED._("menu.label.alignLeft"), onselect: "core:align-selection-to-left"}, { label:RED._("menu.label.alignCenter"), onselect: "core:align-selection-to-center"}, @@ -167,7 +167,7 @@ RED.contextMenu = (function () { { onselect: 'core:copy-selection-to-internal-clipboard', label: RED._("keyboard.copyNode"), disabled: !hasSelection }, { onselect: 'core:paste-from-internal-clipboard', label: RED._("keyboard.pasteNode"), disabled: !canEdit || !RED.view.clipboard() }, { onselect: 'core:delete-selection', disabled: !canEdit || !canDelete }, - { onselect: 'core:delete-selection-and-reconnect', label: 'Delete and Reconnect', disabled: !canEdit || !canDelete }, + { onselect: 'core:delete-selection-and-reconnect', label: RED._('keyboard.deleteReconnect'), disabled: !canEdit || !canDelete }, { onselect: 'core:show-export-dialog', label: RED._("menu.label.export") }, { onselect: 'core:select-all-nodes' }, )