From 665980ac9fa1c919b0a18a111305780f9c10cbf7 Mon Sep 17 00:00:00 2001
From: Philipp Fromme <philipp.fromme@camunda.com>
Date: Fri, 3 May 2024 14:04:19 +0200
Subject: [PATCH] chore(context-pad): scale margin with canvas zoom

---
 lib/features/context-pad/ContextPad.js        | 11 +++-----
 .../features/context-pad/ContextPadSpec.js    | 27 ++++++++++++++++---
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/lib/features/context-pad/ContextPad.js b/lib/features/context-pad/ContextPad.js
index 76e9cb1c8..2d5ece217 100644
--- a/lib/features/context-pad/ContextPad.js
+++ b/lib/features/context-pad/ContextPad.js
@@ -45,7 +45,7 @@ import { isConnection } from '../../util/ModelUtil';
 var entrySelector = '.entry';
 
 var DEFAULT_PRIORITY = 1000;
-var CONTEXT_PAD_MARGIN = 12;
+var CONTEXT_PAD_MARGIN = 8;
 var HOVER_DELAY = 300;
 
 /**
@@ -554,7 +554,7 @@ ContextPad.prototype._getPosition = function(target) {
           y = lastWaypoint.y * viewbox.scale - viewbox.y * viewbox.scale;
 
     return {
-      left: x + CONTEXT_PAD_MARGIN,
+      left: x + CONTEXT_PAD_MARGIN * this._canvas.zoom(),
       top: y
     };
   }
@@ -565,12 +565,9 @@ ContextPad.prototype._getPosition = function(target) {
 
   var targetBounds = this._getTargetBounds(target);
 
-  var left = targetBounds.right - containerBounds.left + CONTEXT_PAD_MARGIN;
-  var top = targetBounds.top - containerBounds.top;
-
   return {
-    left,
-    top
+    left: targetBounds.right - containerBounds.left + CONTEXT_PAD_MARGIN * this._canvas.zoom(),
+    top: targetBounds.top - containerBounds.top
   };
 };
 
diff --git a/test/spec/features/context-pad/ContextPadSpec.js b/test/spec/features/context-pad/ContextPadSpec.js
index 867ea7640..2e3b72fd9 100755
--- a/test/spec/features/context-pad/ContextPadSpec.js
+++ b/test/spec/features/context-pad/ContextPadSpec.js
@@ -1299,6 +1299,27 @@ describe('features/context-pad', function() {
         var containerBounds = canvas.getContainer().getBoundingClientRect();
         var targetBounds = canvas.getGraphics(shape).getBoundingClientRect();
 
+        expect(position.left).be.closeTo(targetBounds.left + targetBounds.width + 8 - containerBounds.left, 1);
+        expect(position.top).be.closeTo(targetBounds.top - containerBounds.top, 1);
+      }));
+
+
+      it('shape (scaled)', inject(function(canvas, contextPad) {
+
+        // given
+        var shape = { id: 's1', width: 100, height: 100, x: 10, y: 10 };
+
+        canvas.addShape(shape);
+
+        canvas.zoom(1.5);
+
+        // when
+        var position = contextPad._getPosition(shape);
+
+        // then
+        var containerBounds = canvas.getContainer().getBoundingClientRect();
+        var targetBounds = canvas.getGraphics(shape).getBoundingClientRect();
+
         expect(position.left).be.closeTo(targetBounds.left + targetBounds.width + 12 - containerBounds.left, 1);
         expect(position.top).be.closeTo(targetBounds.top - containerBounds.top, 1);
       }));
@@ -1325,7 +1346,7 @@ describe('features/context-pad', function() {
         var containerBounds = canvas.getContainer().getBoundingClientRect();
         var targetBounds = canvas.getGraphics(connection).getBoundingClientRect();
 
-        expect(position.left).be.closeTo(targetBounds.left + targetBounds.width + 12 - containerBounds.left, 1);
+        expect(position.left).be.closeTo(targetBounds.left + targetBounds.width + 8 - containerBounds.left, 1);
         expect(position.top).be.closeTo(targetBounds.bottom - containerBounds.top, 1);
       }));
 
@@ -1349,7 +1370,7 @@ describe('features/context-pad', function() {
       var target1Bounds = canvas.getGraphics(shape1).getBoundingClientRect();
       var target2Bounds = canvas.getGraphics(shape2).getBoundingClientRect();
 
-      expect(position.left).be.closeTo(target2Bounds.left + target2Bounds.width + 12 - containerBounds.left, 1);
+      expect(position.left).be.closeTo(target2Bounds.left + target2Bounds.width + 8 - containerBounds.left, 1);
       expect(position.top).be.closeTo(target1Bounds.top - containerBounds.top, 1);
     }));
 
@@ -1370,7 +1391,7 @@ describe('features/context-pad', function() {
       var containerBounds = canvas.getContainer().getBoundingClientRect();
       var targetBounds = canvas.getGraphics(shape).getBoundingClientRect();
 
-      expect(position.left).be.closeTo(targetBounds.left + targetBounds.width + 12 - containerBounds.left, 1);
+      expect(position.left).be.closeTo(targetBounds.left + targetBounds.width + 8 - containerBounds.left, 1);
       expect(position.top).be.closeTo(targetBounds.top - containerBounds.top, 1);
     }));