1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Merge pull request #3741 from Steve-Mcl/fix-context-menu

Fix context menu issues ready for v3 beta.5
This commit is contained in:
Nick O'Leary 2022-07-08 08:23:02 +01:00 committed by GitHub
commit 0682c346ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,4 +1,4 @@
RED.contextMenu = (function() { RED.contextMenu = (function () {
let menu; let menu;
function createMenu() { function createMenu() {
@ -15,10 +15,6 @@ RED.contextMenu = (function() {
// ], // ],
// width: 200, // width: 200,
// }) // })
} }
function disposeMenu() { function disposeMenu() {
@ -50,35 +46,35 @@ RED.contextMenu = (function() {
if (RED.view.snapGrid) { if (RED.view.snapGrid) {
const gridSize = RED.view.gridSize() const gridSize = RED.view.gridSize()
addX = gridSize*Math.floor(addX/gridSize) addX = gridSize * Math.floor(addX / gridSize)
addY = gridSize*Math.floor(addY/gridSize) addY = gridSize * Math.floor(addY / gridSize)
} }
const menuItems = [ const menuItems = [
{ onselect: 'core:show-action-list', onpostselect: function() {} }, { onselect: 'core:show-action-list', onpostselect: function () { } },
{ {
label: RED._("contextMenu.insert"), label: RED._("contextMenu.insert"),
options: [ options: [
{ {
label: RED._("contextMenu.node"), label: RED._("contextMenu.node"),
onselect: function() { onselect: function () {
RED.view.showQuickAddDialog({ RED.view.showQuickAddDialog({
position: [ addX, addY ], position: [addX, addY],
touchTrigger: true, touchTrigger: true,
splice: isSingleLink?selection.links[0]:undefined, splice: isSingleLink ? selection.links[0] : undefined,
// spliceMultiple: isMultipleLinks // spliceMultiple: isMultipleLinks
}) })
} }
}, },
( hasSelection || hasLinks ) ? { (hasSelection || hasLinks) ? {
label: RED._("contextMenu.junction"), label: RED._("contextMenu.junction"),
onselect: 'core:split-wires-with-junctions', onselect: 'core:split-wires-with-junctions',
disabled: !hasLinks disabled: !hasLinks
} : { } : {
label: RED._("contextMenu.junction"), label: RED._("contextMenu.junction"),
onselect: function() { onselect: function () {
const nn = { const nn = {
_def: {defaults:{}}, _def: { defaults: {} },
type: 'junction', type: 'junction',
z: RED.workspaces.active(), z: RED.workspaces.active(),
id: RED.nodes.id(), id: RED.nodes.id(),
@ -91,8 +87,8 @@ RED.contextMenu = (function() {
} }
const historyEvent = { const historyEvent = {
dirty: RED.nodes.dirty(), dirty: RED.nodes.dirty(),
t:'add', t: 'add',
junctions:[nn] junctions: [nn]
} }
RED.nodes.addJunction(nn); RED.nodes.addJunction(nn);
RED.history.push(historyEvent); RED.history.push(historyEvent);
@ -103,7 +99,7 @@ RED.contextMenu = (function() {
{ {
label: RED._("contextMenu.linkNodes"), label: RED._("contextMenu.linkNodes"),
onselect: 'core:split-wire-with-link-nodes', onselect: 'core:split-wire-with-link-nodes',
disabled: hasSelection || !hasLinks disabled: !hasLinks
} }
] ]
@ -111,28 +107,13 @@ RED.contextMenu = (function() {
} }
] ]
// 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( menuItems.push(
null, null,
{ onselect: 'core:undo', disabled: RED.history.list().length === 0 }, { onselect: 'core:undo', disabled: RED.history.list().length === 0 },
{ onselect: 'core:redo', disabled: RED.history.listRedo().length === 0 }, { onselect: 'core:redo', disabled: RED.history.listRedo().length === 0 },
null, null,
{ onselect: 'core:cut-selection-to-internal-clipboard', label: RED._("keyboard.cutNode"), disabled: !hasSelection}, { 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: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:paste-from-internal-clipboard', label: RED._("keyboard.pasteNode"), disabled: !RED.view.clipboard() },
{ onselect: 'core:delete-selection', disabled: !canDelete }, { onselect: 'core:delete-selection', disabled: !canDelete },
@ -154,16 +135,16 @@ RED.contextMenu = (function() {
} }
menu = RED.menu.init({ menu = RED.menu.init({
direction: 'right', direction: 'right',
onpreselect: function() { onpreselect: function () {
disposeMenu() disposeMenu()
}, },
onpostselect: function() { onpostselect: function () {
RED.view.focus() RED.view.focus()
}, },
options: menuItems options: menuItems
}); });
menu.attr("id","red-ui-workspace-context-menu"); menu.attr("id", "red-ui-workspace-context-menu");
menu.css({ menu.css({
position: "absolute" position: "absolute"
}) })
@ -174,34 +155,35 @@ RED.contextMenu = (function() {
var top = options.y var top = options.y
var left = options.x var left = options.x
if (top+menu.height()-$(document).scrollTop() > $(window).height()) { if (top + menu.height() - $(document).scrollTop() > $(window).height()) {
top -= (top+menu.height())-$(window).height() + 22; top -= (top + menu.height()) - $(window).height() + 22;
} }
if (left+menu.width()-$(document).scrollLeft() > $(window).width()) { if (left + menu.width() - $(document).scrollLeft() > $(window).width()) {
left -= (left+menu.width())-$(window).width() + 18; left -= (left + menu.width()) - $(window).width() + 18;
} }
menu.css({ menu.css({
top: top+"px", top: top + "px",
left: left+"px" left: left + "px"
}) })
$(".red-ui-menu.red-ui-menu-dropdown").hide(); $(".red-ui-menu.red-ui-menu-dropdown").hide();
$(document).on("mousedown.red-ui-workspace-context-menu", function(evt) { $(document).on("mousedown.red-ui-workspace-context-menu", function (evt) {
if (menu && menu[0].contains(evt.target)) { if (menu && menu[0].contains(evt.target)) {
return return
} }
disposeMenu() disposeMenu()
}); });
menu.show(); menu.show();
// set focus to first item so that pressing escape key closes the menu
// menu.show({ $("#red-ui-workspace-context-menu :first(ul) > a").trigger("focus")
// target: $('#red-ui-main-container'),
// x: options.x,
// y: options.y
// })
} }
// Allow escape key hook and other editor events to close context menu
RED.keyboard.add("red-ui-workspace-context-menu", "escape", function () { RED.contextMenu.hide() })
RED.events.on("editor:open", function () { RED.contextMenu.hide() });
RED.events.on("search:open", function () { RED.contextMenu.hide() });
RED.events.on("type-search:open", function () { RED.contextMenu.hide() });
RED.events.on("actionList:open", function () { RED.contextMenu.hide() });
RED.events.on("view:selection-changed", function () { RED.contextMenu.hide() });
return { return {
show: show, show: show,
hide: disposeMenu hide: disposeMenu