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
GitHub
commit
0682c346ea
@ -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
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user