Merge pull request #3968 from node-red/context-menu-updates

Context menu updates

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)",

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);

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"),
+                    label: RED._("contextMenu.node"),
-                    options: [
+                    onselect: function () {
-                        {
+                        RED.view.showQuickAddDialog({
-                            label: RED._("contextMenu.node"),
+                            position: [addX, addY],
-                            onselect: function () {
+                            touchTrigger: true,
-                                RED.view.showQuickAddDialog({
+                            splice: isSingleLink ? selection.links[0] : undefined,
-                                    position: [addX, addY],
+                            // spliceMultiple: isMultipleLinks
-                                    touchTrigger: true,
+                        })
-                                    splice: isSingleLink ? selection.links[0] : undefined,
+                    },
-                                    // spliceMultiple: isMultipleLinks
+                    disabled: !canEdit
-                                })
-                            },
-                            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
-                        }
-                    ]
-
-
-
                 },
+                (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: RED._('menu.label.importExample') }
+            )
+            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: RED._('sidebar.info.node'),
+                    options: nodeOptions
+                })
+                menuItems.push({
+                    label: RED._('sidebar.info.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: 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"},
+                        { 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: RED._('keyboard.deleteReconnect'), 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";

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) {