From 233510020c30eb259741899f013cc888d358397a Mon Sep 17 00:00:00 2001 From: drew08t Date: Mon, 30 Oct 2023 09:58:26 -0700 Subject: [PATCH] Update connection source and target scaling --- .../components/connections/ConnectionSVG.tsx | 11 +++- .../components/connections/Connections.tsx | 55 +++++++++++-------- 2 files changed, 40 insertions(+), 26 deletions(-) diff --git a/public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx b/public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx index ca40af12200..ae4ab93d633 100644 --- a/public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx +++ b/public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx @@ -116,7 +116,10 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => { const { source, target, info } = v; const sourceRect = source.div?.getBoundingClientRect(); const parent = source.div?.parentElement; - const parentRect = parent?.getBoundingClientRect(); + const transformRef = scene.transformComponentRef?.current; + + const parentRect = transformRef?.instance.contentComponent?.getBoundingClientRect(); + const transformScale = transformRef?.instance.transformState.scale ?? 1; if (!sourceRect || !parent || !parentRect) { return; @@ -127,8 +130,8 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => { // Convert from connection coords to DOM coords // TODO: Break this out into util function and add tests - const x1 = sourceHorizontalCenter + (info.source.x * sourceRect.width) / 2; - const y1 = sourceVerticalCenter - (info.source.y * sourceRect.height) / 2; + const x1 = (sourceHorizontalCenter + (info.source.x * sourceRect.width) / 2) / transformScale; + const y1 = (sourceVerticalCenter - (info.source.y * sourceRect.height) / 2) / transformScale; let x2; let y2; @@ -148,6 +151,8 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => { x2 = parentHorizontalCenter + (info.target.x * parentRect.width) / 2; y2 = parentVerticalCenter - (info.target.y * parentRect.height) / 2; } + x2 = x2 / transformScale; + y2 = y2 / transformScale; const isSelected = selectedConnection === v && scene.panel.context.instanceState.selectedConnection; diff --git a/public/app/plugins/panel/canvas/components/connections/Connections.tsx b/public/app/plugins/panel/canvas/components/connections/Connections.tsx index 07cf2b388b8..291327fc89f 100644 --- a/public/app/plugins/panel/canvas/components/connections/Connections.tsx +++ b/public/app/plugins/panel/canvas/components/connections/Connections.tsx @@ -143,12 +143,15 @@ export class Connections { return; } - const parentBoundingRect = this.scene.div.parentElement.getBoundingClientRect(); - const x = event.pageX - parentBoundingRect.x; - const y = event.pageY - parentBoundingRect.y; + const transformRef = this.scene.transformComponentRef?.current; - this.connectionLine.setAttribute('x2', `${x}`); - this.connectionLine.setAttribute('y2', `${y}`); + const parentBoundingRect = transformRef?.instance.contentComponent?.getBoundingClientRect(); + const transformScale = transformRef?.instance.transformState.scale ?? 1; + const x = event.pageX - parentBoundingRect!.x ?? 0; + const y = event.pageY - parentBoundingRect!.y ?? 0; + + this.connectionLine.setAttribute('x2', `${x / transformScale}`); + this.connectionLine.setAttribute('y2', `${y / transformScale}`); const connectionLineX1 = this.connectionLine.x1.baseVal.value; const connectionLineY1 = this.connectionLine.y1.baseVal.value; @@ -164,10 +167,13 @@ export class Connections { if (!event.buttons) { if (this.connectionSource && this.connectionSource.div && this.connectionSource.div.parentElement) { const sourceRect = this.connectionSource.div.getBoundingClientRect(); - const parentRect = this.connectionSource.div.parentElement.getBoundingClientRect(); + const transformRef = this.scene.transformComponentRef?.current; - const sourceVerticalCenter = sourceRect.top - parentRect.top + sourceRect.height / 2; - const sourceHorizontalCenter = sourceRect.left - parentRect.left + sourceRect.width / 2; + const parentRect = transformRef?.instance.contentComponent?.getBoundingClientRect(); + const transformScale = transformRef?.instance.transformState.scale ?? 1; + + const sourceVerticalCenter = (sourceRect.top - parentRect!.top) / transformScale + sourceRect.height / 2; + const sourceHorizontalCenter = (sourceRect.left - parentRect!.left) / transformScale + sourceRect.width / 2; // Convert from DOM coords to connection coords // TODO: Break this out into util function and add tests @@ -181,18 +187,18 @@ export class Connections { if (this.connectionTarget && this.connectionTarget.div) { const targetRect = this.connectionTarget.div.getBoundingClientRect(); - const targetVerticalCenter = targetRect.top - parentRect.top + targetRect.height / 2; - const targetHorizontalCenter = targetRect.left - parentRect.left + targetRect.width / 2; + const targetVerticalCenter = targetRect.top - parentRect!.top + targetRect.height / 2; + const targetHorizontalCenter = targetRect.left - parentRect!.left + targetRect.width / 2; targetX = (x - targetHorizontalCenter) / (targetRect.width / 2); targetY = (targetVerticalCenter - y) / (targetRect.height / 2); targetName = this.connectionTarget.options.name; } else { - const parentVerticalCenter = parentRect.height / 2; - const parentHorizontalCenter = parentRect.width / 2; + const parentVerticalCenter = parentRect!.height / 2; + const parentHorizontalCenter = parentRect!.width / 2; - targetX = (x - parentHorizontalCenter) / (parentRect.width / 2); - targetY = (parentVerticalCenter - y) / (parentRect.height / 2); + targetX = (x - parentHorizontalCenter) / (parentRect!.width / 2); + targetY = (parentVerticalCenter - y) / (parentRect!.height / 2); } const connection = { @@ -245,18 +251,21 @@ export class Connections { this.scene.selecto!.rootContainer!.style.cursor = 'crosshair'; if (this.connectionSVG && this.connectionLine && this.scene.div && this.scene.div.parentElement) { const connectionStartTargetBox = selectedTarget.getBoundingClientRect(); - const parentBoundingRect = this.scene.div.parentElement.getBoundingClientRect(); + const transformRef = this.scene.transformComponentRef?.current; - const x = connectionStartTargetBox.x - parentBoundingRect.x + CONNECTION_ANCHOR_HIGHLIGHT_OFFSET; - const y = connectionStartTargetBox.y - parentBoundingRect.y + CONNECTION_ANCHOR_HIGHLIGHT_OFFSET; + const parentBoundingRect = transformRef?.instance.contentComponent?.getBoundingClientRect(); + const transformScale = transformRef?.instance.transformState.scale ?? 1; - const mouseX = clientX - parentBoundingRect.x; - const mouseY = clientY - parentBoundingRect.y; + const x = connectionStartTargetBox.x - parentBoundingRect!.x + CONNECTION_ANCHOR_HIGHLIGHT_OFFSET; + const y = connectionStartTargetBox.y - parentBoundingRect!.y + CONNECTION_ANCHOR_HIGHLIGHT_OFFSET; - this.connectionLine.setAttribute('x1', `${x}`); - this.connectionLine.setAttribute('y1', `${y}`); - this.connectionLine.setAttribute('x2', `${mouseX}`); - this.connectionLine.setAttribute('y2', `${mouseY}`); + const mouseX = clientX - parentBoundingRect!.x; + const mouseY = clientY - parentBoundingRect!.y; + + this.connectionLine.setAttribute('x1', `${x / transformScale}`); + this.connectionLine.setAttribute('y1', `${y / transformScale}`); + this.connectionLine.setAttribute('x2', `${mouseX / transformScale}`); + this.connectionLine.setAttribute('y2', `${mouseY / transformScale}`); this.didConnectionLeaveHighlight = false; }