From 199e84c77f15c2160d36cdb86ad901fe3dcb4af9 Mon Sep 17 00:00:00 2001 From: C-Bass Date: Thu, 25 Apr 2024 09:58:22 +0300 Subject: [PATCH] fix: correct positioning of color picker (#42) This fixes the positioning of the color picker so that it is still positioned correctly when the bpmn-js diagram is not in the top left. This also works when there are multiple bpmn-js diagrams on the same page, which is my personal use-case. Previously if you had multiple diagrams, the color picker popup would appear in the top left one no matter where the pad entry was clicked. Co-authored-by: Nico Rehwaldt --- colors/ColorContextPadProvider.js | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/colors/ColorContextPadProvider.js b/colors/ColorContextPadProvider.js index 76228e1..cda313a 100644 --- a/colors/ColorContextPadProvider.js +++ b/colors/ColorContextPadProvider.js @@ -34,7 +34,6 @@ ColorContextPadProvider.prototype.getMultiElementContextPadEntries = function(el ColorContextPadProvider.prototype._createPopupAction = function(elements) { - const canvas = this._canvas; const translate = this._translate; const contextPad = this._contextPad; const popupMenu = this._popupMenu; @@ -50,7 +49,7 @@ ColorContextPadProvider.prototype._createPopupAction = function(elements) { // get start popup draw start position var position = { - ...getStartPosition(canvas, contextPad, elements), + ...getStartPosition(contextPad, elements), cursor: { x: event.x, y: event.y @@ -69,23 +68,18 @@ ColorContextPadProvider.prototype._createPopupAction = function(elements) { // helpers ////////////////////// -function getStartPosition(canvas, contextPad, elements) { +function getStartPosition(contextPad, elements) { var Y_OFFSET = 5; - var diagramContainer = canvas.getContainer(), - pad = contextPad.getPad(elements).html; + var pad = contextPad.getPad(elements).html; - var diagramRect = diagramContainer.getBoundingClientRect(), - padRect = pad.getBoundingClientRect(); - - var top = padRect.top - diagramRect.top; - var left = padRect.left - diagramRect.left; + var padRect = pad.getBoundingClientRect(); var pos = { - x: left, - y: top + padRect.height + Y_OFFSET + x: padRect.left, + y: padRect.bottom + Y_OFFSET }; return pos; -} \ No newline at end of file +}