From 5944fdb5dc1446d227344dec33407998472b7027 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 20 Jul 2022 10:40:20 +0100
Subject: [PATCH] Properly position quick-add dialog in all cases Fixes #3781

---
 .../editor-client/src/js/ui/contextMenu.js         | 14 +++++---------
 .../@node-red/editor-client/src/js/ui/view.js      |  7 +++++--
 2 files changed, 10 insertions(+), 11 deletions(-)

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 66ae2b943..8e1d0d19a 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
@@ -44,14 +44,10 @@ RED.contextMenu = (function () {
         const canRemoveFromGroup = hasSelection && !!selection.nodes[0].g
         const offset = $("#red-ui-workspace-chart").offset()
 
-        let addX = options.x - offset.left + $("#red-ui-workspace-chart").scrollLeft()
-        let addY = options.y - offset.top + $("#red-ui-workspace-chart").scrollTop()
-
-        if (RED.view.snapGrid) {
-            const gridSize = RED.view.gridSize()
-            addX = gridSize * Math.floor(addX / gridSize)
-            addY = gridSize * Math.floor(addY / gridSize)
-        }
+        // addX/addY must be the position in the workspace accounting for both scroll and scale
+        // The +5 is because we display the contextMenu -5,-5 to actual click position
+        let addX = (options.x + 5 - offset.left + $("#red-ui-workspace-chart").scrollLeft()) / RED.view.scale()
+        let addY = (options.y + 5 - offset.top + $("#red-ui-workspace-chart").scrollTop()) / RED.view.scale()
 
         const menuItems = [
             { onselect: 'core:show-action-list', onpostselect: function () { } },
@@ -144,7 +140,7 @@ RED.contextMenu = (function () {
             ($(window).width() -MENU_WIDTH)) {
             direction = "left";
         }
-        
+
         menu = RED.menu.init({
             direction: direction,
             onpreselect: function() {
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 8c7ea22a3..601c625ce 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
@@ -1071,12 +1071,15 @@ RED.view = (function() {
             RED.view.redraw();
         }
 
+        // `point` is the place in the workspace the mouse has clicked.
+        //  This takes into account scrolling and scaling of the workspace.
         var ox = point[0];
         var oy = point[1];
 
+        // Need to map that to browser location to position the pop-up
         const offset = $("#red-ui-workspace-chart").offset()
-        var clientX = ox + offset.left - $("#red-ui-workspace-chart").scrollLeft()
-        var clientY = oy + offset.top - $("#red-ui-workspace-chart").scrollTop()
+        var clientX = (ox * scaleFactor) + offset.left - $("#red-ui-workspace-chart").scrollLeft()
+        var clientY = (oy * scaleFactor) + offset.top - $("#red-ui-workspace-chart").scrollTop()
 
         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')