diff --git a/Gruntfile.js b/Gruntfile.js index 979b38051..a168d7ce4 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -192,6 +192,7 @@ module.exports = function(grunt) { "packages/node_modules/@node-red/editor-client/src/js/ui/library.js", "packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js", "packages/node_modules/@node-red/editor-client/src/js/ui/search.js", + "packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js", "packages/node_modules/@node-red/editor-client/src/js/ui/actionList.js", "packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js", "packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js", diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/actions.js b/packages/node_modules/@node-red/editor-client/src/js/ui/actions.js index 2273ae9ab..5bd9ea034 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/actions.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/actions.js @@ -21,6 +21,34 @@ RED.actions = (function() { function getAction(name) { return actions[name].handler; } + function getActionLabel(name) { + let def = actions[name] + if (!def) { + return '' + } + if (!def.label) { + var options = def.options; + var key = options ? options.label : undefined; + if (!key) { + key = "action-list." +name.replace(/^.*:/,""); + } + var label = RED._(key); + if (label === key) { + // no translation. convert `name` to description + label = name.replace(/(^.+:([a-z]))|(-([a-z]))/g, function() { + if (arguments[5] === 0) { + return arguments[2].toUpperCase(); + } else { + return " "+arguments[4].toUpperCase(); + } + }); + } + def.label = label; + } + return def.label + } + + function invokeAction() { var args = Array.prototype.slice.call(arguments); var name = args.shift(); @@ -31,7 +59,7 @@ RED.actions = (function() { } function listActions() { var result = []; - var missing = []; + Object.keys(actions).forEach(function(action) { var def = actions[action]; var shortcut = RED.keyboard.getShortcut(action); @@ -42,28 +70,8 @@ RED.actions = (function() { isUser = !!RED.keyboard.getUserShortcut(action); } if (!def.label) { - var name = action; - var options = def.options; - var key = options ? options.label : undefined; - if (!key) { - key = "action-list." +name.replace(/^.*:/,""); - } - var label = RED._(key); - if (label === key) { - // no translation. convert `name` to description - label = name.replace(/(^.+:([a-z]))|(-([a-z]))/g, function() { - if (arguments[5] === 0) { - return arguments[2].toUpperCase(); - } else { - return " "+arguments[4].toUpperCase(); - } - }); - missing.push(key); - } - def.label = label; + def.label = getActionLabel(action) } - //console.log("; missing:", missing); - result.push({ id:action, scope:shortcut?shortcut.scope:undefined, @@ -79,6 +87,7 @@ RED.actions = (function() { add: addAction, remove: removeAction, get: getAction, + getLabel: getActionLabel, invoke: invokeAction, list: listActions } 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 417189b33..6327f5268 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 @@ -16,6 +16,7 @@ RED.menu = (function() { var menuItems = {}; + let menuItemCount = 0 function createMenuItem(opt) { var item; @@ -59,15 +60,16 @@ RED.menu = (function() { item = $('
  • '); } else { item = $('
  • '); - + if (!opt.id) { + opt.id = 'red-ui-menu-item-'+(menuItemCount++) + } if (opt.group) { item.addClass("red-ui-menu-group-"+opt.group); - } var linkContent = ''; if (opt.toggle) { - linkContent += ''; - linkContent += ''; + linkContent += ''; + linkContent += ''; } if (opt.icon !== undefined) { @@ -77,12 +79,15 @@ RED.menu = (function() { linkContent += ' '; } } - + let label = opt.label + if (!opt.label && typeof opt.onselect === 'string') { + label = RED.actions.getLabel(opt.onselect) + } if (opt.sublabel) { - linkContent += ''+opt.label+''+ + linkContent += ''+label+''+ ''+opt.sublabel+'' } else { - linkContent += ''+opt.label+'' + linkContent += ''+label+'' } linkContent += ''; @@ -126,10 +131,21 @@ RED.menu = (function() { }); } if (opt.options) { - item.addClass("red-ui-menu-dropdown-submenu pull-left"); + item.addClass("red-ui-menu-dropdown-submenu"+(opt.direction!=='right'?" pull-left":"")); var submenu = $('').appendTo(item); for (var i=0;i",{class:"red-ui-menu red-ui-menu-dropdown pull-right"}); - + if (options.direction) { + topMenu.addClass("red-ui-menu-dropdown-direction-"+options.direction) + } if (options.id) { topMenu.attr({id:options.id+"-submenu"}); var menuParent = $("#"+options.id); @@ -175,6 +193,15 @@ RED.menu = (function() { var lastAddedSeparator = false; for (var i=0;i 0); + const hasMultipleSelection = hasSelection && selection.nodes.length > 1; + const hasLinks = selection.links && selection.links.length > 0; + const isSingleLink = !hasSelection && hasLinks && selection.links.length === 1 + const isMultipleLinks = !hasSelection && hasLinks && selection.links.length > 1 + const canDelete = hasSelection || hasLinks + const isGroup = hasSelection && selection.nodes.length === 1 && selection.nodes[0].type === 'group' + + const canRemoveFromGroup = hasSelection && !!selection.nodes[0].g + + + const menuItems = [ + { onselect: 'core:show-action-list', onpostselect: function() {} }, + { + label: 'Insert', + options: [ + { + label: 'Node', + onselect: function() { + RED.view.showQuickAddDialog({ + position: [ options.x - offset.left, options.y - offset.top ], + touchTrigger: true, + splice: isSingleLink?selection.links[0]:undefined, + // spliceMultiple: isMultipleLinks + }) + } + }, + { + label: 'Junction', + onselect: 'core:split-wires-with-junctions', + disabled: hasSelection || !hasLinks + }, + { + label: 'Link Nodes', + onselect: 'core:split-wire-with-link-nodes', + disabled: hasSelection || !hasLinks + } + ] + + + + } + ] + // menuItems.push( + // { + // label: (isSingleLink || isMultipleLinks)?'Insert into wire...':'Add node...', + // onselect: function() { + // RED.view.showQuickAddDialog({ + // position: [ options.x - offset.left, options.y - offset.top ], + // touchTrigger: true, + // splice: isSingleLink?selection.links[0]:undefined, + // spliceMultiple: isMultipleLinks + // }) + // } + // }, + // ) + // if (hasLinks && !hasSelection) { + // menuItems.push({ onselect: 'core:split-wires-with-junctions', label: 'Insert junction'}) + // } + menuItems.push( + null, + { onselect: 'core:undo', disabled: RED.history.list().length === 0 }, + { onselect: 'core:redo', disabled: RED.history.listRedo().length === 0 }, + null, + { onselect: 'core:cut-selection-to-internal-clipboard', label: RED._("keyboard.cutNode"), disabled: !hasSelection}, + { onselect: 'core:copy-selection-to-internal-clipboard', label: RED._("keyboard.copyNode"), disabled: !hasSelection }, + { onselect: 'core:paste-from-internal-clipboard', label: RED._("keyboard.pasteNode"), disabled: !RED.view.clipboard() }, + { onselect: 'core:delete-selection', disabled: !canDelete }, + { onselect: 'core:show-export-dialog', label: RED._("menu.label.export") }, + { onselect: 'core:select-all-nodes' } + ) + + if (hasSelection) { + menuItems.push( + null, + isGroup ? + { onselect: 'core:ungroup-selection', disabled: !isGroup } + : { onselect: 'core:group-selection', disabled: !hasSelection } + ) + if (canRemoveFromGroup) { + menuItems.push({ onselect: 'core:remove-selection-from-group', label: RED._("menu.label.groupRemoveSelection") }) + } + + } + const offset = $("#red-ui-workspace-chart").offset() + menu = RED.menu.init({ + direction: 'right', + onpreselect: function() { + disposeMenu() + }, + onpostselect: function() { + RED.view.focus() + }, + options: menuItems + }); + + menu.attr("id","red-ui-workspace-context-menu"); + menu.css({ + position: "absolute" + }) + menu.appendTo("body"); + + // TODO: prevent the menu from overflowing the window. + + var top = options.y + var left = options.x + + if (top+menu.height()-$(document).scrollTop() > $(window).height()) { + top -= (top+menu.height())-$(window).height() + 22; + } + if (left+menu.width()-$(document).scrollLeft() > $(window).width()) { + left -= (left+menu.width())-$(window).width() + 18; + } + menu.css({ + top: top+"px", + left: left+"px" + }) + $(".red-ui-menu.red-ui-menu-dropdown").hide(); + $(document).on("mousedown.red-ui-workspace-context-menu", function(evt) { + if (menu && menu[0].contains(evt.target)) { + return + } + disposeMenu() + }); + menu.show(); + + // menu.show({ + // target: $('#red-ui-main-container'), + // x: options.x, + // y: options.y + // }) + + + } + + return { + show: show + } +})() diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js index 0fc633071..fc5b8e99e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js @@ -104,7 +104,9 @@ RED.typeSearch = (function() { var index = Math.max(0,selected); if (index < children.length) { var n = $(children[index]).find(".red-ui-editableList-item-content").data('data'); - typesUsed[n.type] = Date.now(); + if (!/^_action_:/.test(n.type)) { + typesUsed[n.type] = Date.now(); + } if (n.def.outputs === 0) { confirm(n); } else { @@ -173,6 +175,8 @@ RED.typeSearch = (function() { var nodeDiv = $('
    ',{class:"red-ui-search-result-node"}).appendTo(div); if (object.type === "junction") { nodeDiv.addClass("red-ui-palette-icon-junction"); + } else if (/^_action_:/.test(object.type)) { + nodeDiv.addClass("red-ui-palette-icon-junction") } else { var colour = RED.utils.getNodeColor(object.type,def); nodeDiv.css('backgroundColor',colour); @@ -182,11 +186,14 @@ RED.typeSearch = (function() { var iconContainer = $('
    ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, false); - if (object.type !== "junction" && def.inputs > 0) { - $('
    ',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv); - } - if (object.type !== "junction" && def.outputs > 0) { - $('
    ',{class:"red-ui-search-result-node-port red-ui-search-result-node-output"}).appendTo(nodeDiv); + + if (!/^_action_:/.test(object.type) && object.type !== "junction") { + if (def.inputs > 0) { + $('
    ',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv); + } + if (def.outputs > 0) { + $('
    ',{class:"red-ui-search-result-node-port red-ui-search-result-node-output"}).appendTo(nodeDiv); + } } var contentDiv = $('
    ',{class:"red-ui-search-result-description"}).appendTo(div); @@ -207,7 +214,9 @@ RED.typeSearch = (function() { } function confirm(def) { hide(); - typesUsed[def.type] = Date.now(); + if (!/^_action_:/.test(def.type)) { + typesUsed[def.type] = Date.now(); + } addCallback(def.type); } @@ -316,6 +325,7 @@ RED.typeSearch = (function() { function applyFilter(filter,type,def) { return !filter || ( + (!filter.spliceMultiple) && (!filter.type || type === filter.type) && (!filter.input || type === 'junction' || def.inputs > 0) && (!filter.output || type === 'junction' || def.outputs > 0) @@ -330,6 +340,13 @@ RED.typeSearch = (function() { 'inject','debug','function','change','switch','junction' ].filter(function(t) { return applyFilter(opts.filter,t,RED.nodes.getType(t)); }); + // if (opts.filter && opts.filter.input && opts.filter.output && !opts.filter.type) { + // if (opts.filter.spliceMultiple) { + // common.push('_action_:core:split-wires-with-junctions') + // } + // common.push('_action_:core:split-wire-with-link-nodes') + // } + var recentlyUsed = Object.keys(typesUsed); recentlyUsed.sort(function(a,b) { return typesUsed[b]-typesUsed[a]; @@ -354,6 +371,8 @@ RED.typeSearch = (function() { var itemDef = RED.nodes.getType(common[i]); if (common[i] === 'junction') { itemDef = { inputs:1, outputs: 1, label: 'junction', type: 'junction'} + } else if (/^_action_:/.test(common[i]) ) { + itemDef = { inputs:1, outputs: 1, label: common[i], type: common[i]} } if (itemDef) { item = { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js index c3ea0ddd1..2c4cdca6b 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js @@ -1032,6 +1032,8 @@ RED.utils = (function() { return "font-awesome/fa-circle-o" } else if (def.category === 'config') { return RED.settings.apiRootUrl+"icons/node-red/cog.svg" + } else if ((node && /^_action_:/.test(node.type)) || /^_action_:/.test(def.type)) { + return "font-awesome/fa-cogs" } else if (node && node.type === 'tab') { return "red-ui-icons/red-ui-icons-flow" // return RED.settings.apiRootUrl+"images/subflow_tab.svg" diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js index 699e5f222..888fb4d7f 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js @@ -336,17 +336,17 @@ RED.view.tools = (function() { } - function addNode() { - var selection = RED.view.selection(); - if (selection.nodes && selection.nodes.length === 1 && selection.nodes[0].outputs > 0) { - var selectedNode = selection.nodes[0]; - RED.view.showQuickAddDialog([ - selectedNode.x + selectedNode.w + 50,selectedNode.y - ]) - } else { - RED.view.showQuickAddDialog(); - } - } + // function addNode() { + // var selection = RED.view.selection(); + // if (selection.nodes && selection.nodes.length === 1 && selection.nodes[0].outputs > 0) { + // var selectedNode = selection.nodes[0]; + // RED.view.showQuickAddDialog([ + // selectedNode.x + selectedNode.w + 50,selectedNode.y + // ]) + // } else { + // RED.view.showQuickAddDialog(); + // } + // } function gotoNearestNode(direction) { @@ -815,6 +815,9 @@ RED.view.tools = (function() { */ function splitWiresWithLinkNodes(wires) { let wiresToSplit = wires || RED.view.selection().links; + if (!wiresToSplit) { + return + } if (!Array.isArray(wiresToSplit)) { wiresToSplit = [wiresToSplit]; } @@ -1047,6 +1050,135 @@ RED.view.tools = (function() { } } + function addJunctionsToWires(wires) { + let wiresToSplit = wires || RED.view.selection().links; + if (!wiresToSplit) { + return + } + if (!Array.isArray(wiresToSplit)) { + wiresToSplit = [wiresToSplit]; + } + if (wiresToSplit.length === 0) { + return; + } + + var removedLinks = new Set() + var addedLinks = [] + var addedJunctions = [] + + var groupedLinks = {} + wiresToSplit.forEach(function(l) { + var sourceId = l.source.id+":"+l.sourcePort + groupedLinks[sourceId] = groupedLinks[sourceId] || [] + groupedLinks[sourceId].push(l) + + groupedLinks[l.target.id] = groupedLinks[l.target.id] || [] + groupedLinks[l.target.id].push(l) + }); + var linkGroups = Object.keys(groupedLinks) + linkGroups.sort(function(A,B) { + return groupedLinks[B].length - groupedLinks[A].length + }) + linkGroups.forEach(function(gid) { + var links = groupedLinks[gid] + var junction = { + _def: {defaults:{}}, + type: 'junction', + z: RED.workspaces.active(), + id: RED.nodes.id(), + x: 0, + y: 0, + w: 0, h: 0, + outputs: 1, + inputs: 1, + dirty: true + } + links = links.filter(function(l) { return !removedLinks.has(l) }) + if (links.length === 0) { + return + } + let pointCount = 0 + links.forEach(function(l) { + if (l._sliceLocation) { + junction.x += l._sliceLocation.x + junction.y += l._sliceLocation.y + delete l._sliceLocation + pointCount++ + } else { + junction.x += l.source.x + l.source.w/2 + l.target.x - l.target.w/2 + junction.y += l.source.y + l.target.y + pointCount += 2 + } + }) + junction.x = Math.round(junction.x/pointCount) + junction.y = Math.round(junction.y/pointCount) + if (RED.view.snapGrid) { + let gridSize = RED.view.gridSize() + junction.x = (gridSize*Math.round(junction.x/gridSize)); + junction.y = (gridSize*Math.round(junction.y/gridSize)); + } + + var nodeGroups = new Set() + + RED.nodes.addJunction(junction) + addedJunctions.push(junction) + let newLink + if (gid === links[0].source.id+":"+links[0].sourcePort) { + newLink = { + source: links[0].source, + sourcePort: links[0].sourcePort, + target: junction + } + } else { + newLink = { + source: junction, + sourcePort: 0, + target: links[0].target + } + } + addedLinks.push(newLink) + RED.nodes.addLink(newLink) + links.forEach(function(l) { + removedLinks.add(l) + RED.nodes.removeLink(l) + let newLink + if (gid === l.target.id) { + newLink = { + source: l.source, + sourcePort: l.sourcePort, + target: junction + } + } else { + newLink = { + source: junction, + sourcePort: 0, + target: l.target + } + } + addedLinks.push(newLink) + RED.nodes.addLink(newLink) + nodeGroups.add(l.source.g || "__NONE__") + nodeGroups.add(l.target.g || "__NONE__") + }) + if (nodeGroups.size === 1) { + var group = nodeGroups.values().next().value + if (group !== "__NONE__") { + RED.group.addToGroup(RED.nodes.group(group), junction) + } + } + }) + if (addedJunctions.length > 0) { + RED.history.push({ + t: 'add', + links: addedLinks, + junctions: addedJunctions, + removedLinks: Array.from(removedLinks) + }) + RED.nodes.dirty(true) + } + RED.view.redraw(true); + } + return { init: function() { RED.actions.add("core:show-selected-node-labels", function() { setSelectedNodeLabelState(true); }) @@ -1109,6 +1241,7 @@ RED.view.tools = (function() { RED.actions.add("core:wire-node-to-multiple", function() { wireNodeToMultiple() }) RED.actions.add("core:split-wire-with-link-nodes", function () { splitWiresWithLinkNodes() }); + RED.actions.add("core:split-wires-with-junctions", function () { addJunctionsToWires() }); RED.actions.add("core:generate-node-names", generateNodeNames ) 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 5ac9525ff..9f28d7191 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 @@ -206,7 +206,15 @@ RED.view = (function() { function init() { chart = $("#red-ui-workspace-chart"); - + chart.on('contextmenu', function(evt) { + evt.preventDefault() + evt.stopPropagation() + RED.contextMenu.show({ + x:evt.clientX-5, + y:evt.clientY-5 + }) + return false + }) outer = d3.select("#red-ui-workspace-chart") .append("svg:svg") .attr("width", space_width) @@ -992,7 +1000,10 @@ RED.view = (function() { scroll_position = [chart.scrollLeft(),chart.scrollTop()]; return; } - if (!mousedown_node && !mousedown_link && !mousedown_group) { + if (d3.event.button === 2) { + return + } + if (!mousedown_node && !mousedown_link && !mousedown_group && !d3.event.shiftKey) { selectedLinks.clear(); updateSelection(); } @@ -1046,6 +1057,7 @@ RED.view = (function() { options = options || {}; var point = options.position || lastClickPosition; var spliceLink = options.splice; + var spliceMultipleLinks = options.spliceMultiple var targetGroup = options.group; var touchTrigger = options.touchTrigger; @@ -1058,6 +1070,10 @@ RED.view = (function() { var ox = point[0]; var oy = point[1]; + const offset = $("#red-ui-workspace-chart").offset() + var clientX = ox + offset.left + var clientY = oy + offset.top + if (RED.settings.get("editor").view['view-snap-grid']) { // eventLayer.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','red') point[0] = Math.round(point[0] / gridSize) * gridSize; @@ -1109,8 +1125,12 @@ RED.view = (function() { } hideDragLines(); } - if (spliceLink) { - filter = {input:true, output:true} + if (spliceLink || spliceMultipleLinks) { + filter = { + input:true, + output:true, + spliceMultiple: spliceMultipleLinks + } } var rebuildQuickAddLink = function() { @@ -1135,8 +1155,8 @@ RED.view = (function() { var lastAddedWidth; RED.typeSearch.show({ - x:d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]), - y:d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]), + x:clientX-mainPos.left-node_width/2 - (ox-point[0]), + y:clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]), disableFocus: touchTrigger, filter: filter, move: function(dx,dy) { @@ -1164,7 +1184,7 @@ RED.view = (function() { hideDragLines(); redraw(); }, - add: function(type,keepAdding) { + add: function(type, keepAdding) { if (touchTrigger) { keepAdding = false; resetMouseVars(); @@ -1172,7 +1192,13 @@ RED.view = (function() { var nn; var historyEvent; - if (type === 'junction') { + if (/^_action_:/.test(type)) { + const actionName = type.substring(9) + quickAddActive = false; + ghostNode.remove(); + RED.actions.invoke(actionName) + return + } else if (type === 'junction') { nn = { _def: {defaults:{}}, type: 'junction', @@ -1844,8 +1870,20 @@ RED.view = (function() { } } }) - - + activeLinks.forEach(function(link) { + if (!link.selected) { + var sourceY = link.source.y + var targetY = link.target.y + var sourceX = link.source.x+(link.source.w/2) + 10 + var targetX = link.target.x-(link.target.w/2) - 10 + if ( + sourceX > x && sourceX < x2 && sourceY > y && sourceY < y2 && + targetX > x && targetX < x2 && targetY > y && targetY < y2 + ) { + selectedLinks.add(link); + } + } + }) // var selectionChanged = false; // do { @@ -1893,114 +1931,118 @@ RED.view = (function() { slicePath = null; RED.view.redraw(true); } else if (mouse_mode == RED.state.SLICING_JUNCTION) { - var removedLinks = new Set() - var addedLinks = [] - var addedJunctions = [] - - var groupedLinks = {} - selectedLinks.forEach(function(l) { - var sourceId = l.source.id+":"+l.sourcePort - groupedLinks[sourceId] = groupedLinks[sourceId] || [] - groupedLinks[sourceId].push(l) - - groupedLinks[l.target.id] = groupedLinks[l.target.id] || [] - groupedLinks[l.target.id].push(l) - }); - var linkGroups = Object.keys(groupedLinks) - linkGroups.sort(function(A,B) { - return groupedLinks[B].length - groupedLinks[A].length - }) - linkGroups.forEach(function(gid) { - var links = groupedLinks[gid] - var junction = { - _def: {defaults:{}}, - type: 'junction', - z: RED.workspaces.active(), - id: RED.nodes.id(), - x: 0, - y: 0, - w: 0, h: 0, - outputs: 1, - inputs: 1, - dirty: true - } - links = links.filter(function(l) { return !removedLinks.has(l) }) - if (links.length === 0) { - return - } - links.forEach(function(l) { - junction.x += l._sliceLocation.x - junction.y += l._sliceLocation.y - }) - junction.x = Math.round(junction.x/links.length) - junction.y = Math.round(junction.y/links.length) - if (snapGrid) { - junction.x = (gridSize*Math.round(junction.x/gridSize)); - junction.y = (gridSize*Math.round(junction.y/gridSize)); - } - - var nodeGroups = new Set() - - RED.nodes.addJunction(junction) - addedJunctions.push(junction) - let newLink - if (gid === links[0].source.id+":"+links[0].sourcePort) { - newLink = { - source: links[0].source, - sourcePort: links[0].sourcePort, - target: junction - } - } else { - newLink = { - source: junction, - sourcePort: 0, - target: links[0].target - } - } - addedLinks.push(newLink) - RED.nodes.addLink(newLink) - links.forEach(function(l) { - removedLinks.add(l) - RED.nodes.removeLink(l) - let newLink - if (gid === l.target.id) { - newLink = { - source: l.source, - sourcePort: l.sourcePort, - target: junction - } - } else { - newLink = { - source: junction, - sourcePort: 0, - target: l.target - } - } - addedLinks.push(newLink) - RED.nodes.addLink(newLink) - nodeGroups.add(l.source.g || "__NONE__") - nodeGroups.add(l.target.g || "__NONE__") - }) - if (nodeGroups.size === 1) { - var group = nodeGroups.values().next().value - if (group !== "__NONE__") { - RED.group.addToGroup(RED.nodes.group(group), junction) - } - } - }) + RED.actions.invoke("core:split-wires-with-junctions") slicePath.remove(); slicePath = null; - if (addedJunctions.length > 0) { - RED.history.push({ - t: 'add', - links: addedLinks, - junctions: addedJunctions, - removedLinks: Array.from(removedLinks) - }) - RED.nodes.dirty(true) - } - RED.view.redraw(true); + // var removedLinks = new Set() + // var addedLinks = [] + // var addedJunctions = [] + // + // var groupedLinks = {} + // selectedLinks.forEach(function(l) { + // var sourceId = l.source.id+":"+l.sourcePort + // groupedLinks[sourceId] = groupedLinks[sourceId] || [] + // groupedLinks[sourceId].push(l) + // + // groupedLinks[l.target.id] = groupedLinks[l.target.id] || [] + // groupedLinks[l.target.id].push(l) + // }); + // var linkGroups = Object.keys(groupedLinks) + // linkGroups.sort(function(A,B) { + // return groupedLinks[B].length - groupedLinks[A].length + // }) + // linkGroups.forEach(function(gid) { + // var links = groupedLinks[gid] + // var junction = { + // _def: {defaults:{}}, + // type: 'junction', + // z: RED.workspaces.active(), + // id: RED.nodes.id(), + // x: 0, + // y: 0, + // w: 0, h: 0, + // outputs: 1, + // inputs: 1, + // dirty: true + // } + // links = links.filter(function(l) { return !removedLinks.has(l) }) + // if (links.length === 0) { + // return + // } + // links.forEach(function(l) { + // junction.x += l._sliceLocation.x + // junction.y += l._sliceLocation.y + // }) + // junction.x = Math.round(junction.x/links.length) + // junction.y = Math.round(junction.y/links.length) + // if (snapGrid) { + // junction.x = (gridSize*Math.round(junction.x/gridSize)); + // junction.y = (gridSize*Math.round(junction.y/gridSize)); + // } + // + // var nodeGroups = new Set() + // + // RED.nodes.addJunction(junction) + // addedJunctions.push(junction) + // let newLink + // if (gid === links[0].source.id+":"+links[0].sourcePort) { + // newLink = { + // source: links[0].source, + // sourcePort: links[0].sourcePort, + // target: junction + // } + // } else { + // newLink = { + // source: junction, + // sourcePort: 0, + // target: links[0].target + // } + // } + // addedLinks.push(newLink) + // RED.nodes.addLink(newLink) + // links.forEach(function(l) { + // removedLinks.add(l) + // RED.nodes.removeLink(l) + // let newLink + // if (gid === l.target.id) { + // newLink = { + // source: l.source, + // sourcePort: l.sourcePort, + // target: junction + // } + // } else { + // newLink = { + // source: junction, + // sourcePort: 0, + // target: l.target + // } + // } + // addedLinks.push(newLink) + // RED.nodes.addLink(newLink) + // nodeGroups.add(l.source.g || "__NONE__") + // nodeGroups.add(l.target.g || "__NONE__") + // }) + // if (nodeGroups.size === 1) { + // var group = nodeGroups.values().next().value + // if (group !== "__NONE__") { + // RED.group.addToGroup(RED.nodes.group(group), junction) + // } + // } + // }) + // slicePath.remove(); + // slicePath = null; + // + // if (addedJunctions.length > 0) { + // RED.history.push({ + // t: 'add', + // links: addedLinks, + // junctions: addedJunctions, + // removedLinks: Array.from(removedLinks) + // }) + // RED.nodes.dirty(true) + // } + // RED.view.redraw(true); } if (mouse_mode == RED.state.MOVING_ACTIVE) { if (movingSet.length() > 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 98ab3bd3b..4104fd83e 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 @@ -46,7 +46,7 @@ & > li > a, & > li > a:focus { display: block; - padding: 4px 12px 4px 32px; + padding: 4px 20px 4px 12px; clear: both; font-weight: normal; line-height: 20px; @@ -54,7 +54,10 @@ white-space: normal !important; outline: none; } - + & > li.pull-left > a, + & > li.pull-left > a:focus { + padding: 4px 12px 4px 32px; + } & > .active > a, & > .active > a:hover, & > .active > a:focus { @@ -145,8 +148,8 @@ position: relative; & > .red-ui-menu-dropdown { top: 0; - left: 100%; - margin-top: -6px; + left: calc(100% - 5px); + margin-top: 0; margin-left: -1px; } &.open > .red-ui-menu-dropdown, @@ -175,10 +178,10 @@ } } -.red-ui-menu-dropdown-submenu>a:after { +.red-ui-menu-dropdown-submenu.pull-left>a:after { display: none; } -.red-ui-menu-dropdown-submenu>a:before { +.red-ui-menu-dropdown-submenu.pull-left>a:before { display: block; float: left; width: 0; @@ -192,7 +195,25 @@ border-width: 5px 5px 5px 0; content: " "; } - +.red-ui-menu-dropdown-direction-right { + .red-ui-menu-dropdown-submenu>a:after { + display: none; + } + .red-ui-menu-dropdown-submenu>a:before { + display: block; + float: right; + width: 0; + height: 0; + margin-top: 5px; + margin-right: -15px; + /* Caret Arrow */ + border-color: transparent; + border-left-color: $menuCaret; + border-style: solid; + border-width: 5px 0 5px 5px; + content: " "; + } +} .red-ui-menu-dropdown-submenu.disabled > a:before { border-right-color: $menuCaret; }