From 9c5a8f7ef1510a5ab441c6a87e779f58371ffd8d Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 19 Aug 2024 20:21:42 +0530 Subject: [PATCH] fixed some label transform for htmlLabels false --- .../rendering-util/rendering-elements/shapes/dividedRect.ts | 2 +- .../rendering-elements/shapes/flippedTriangle.ts | 5 ++++- .../rendering-elements/shapes/halfRoundedRectangle.ts | 2 +- .../rendering-elements/shapes/linedCylinder.ts | 5 ++++- .../rendering-util/rendering-elements/shapes/multiRect.ts | 2 +- .../rendering-util/rendering-elements/shapes/slopedRect.ts | 2 +- .../src/rendering-util/rendering-elements/shapes/triangle.ts | 5 ++++- .../rendering-elements/shapes/waveEdgedRectangle.ts | 2 +- .../rendering-util/rendering-elements/shapes/windowPane.ts | 2 +- 9 files changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts index 69bb59237..18e0aad2e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts @@ -57,7 +57,7 @@ export const dividedRect = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${x + (node.padding ?? 0) / 2}, ${y + rectOffset + (node.padding ?? 0) / 2})` + `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${y + rectOffset + (node.padding ?? 0) / 2 - 4 * (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts index e40842097..6815801fc 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts @@ -53,7 +53,10 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise< updateNodeBounds(node, flippedTriangle); - label.attr('transform', `translate(${-bbox.width / 2}, ${-h / 2})`); + label.attr( + 'transform', + `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + 4 * (bbox.y - (bbox.top ?? 0))})` + ); node.intersect = function (point) { log.info('Triangle intersect', node, points, point); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts index 4ebf47bde..2b72a8357 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts @@ -52,7 +52,7 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => { polygon.attr('transform', `translate(${-w / 2 - h / 4}, ${-h / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - h / 4}, ${-h / 2 + (node.padding ?? 0)})` + `translate(${-w / 2 + (node.padding ?? 0) - h / 4 - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) - 4 * (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts index 2eb8f3536..7217243f2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts @@ -65,7 +65,10 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => { updateNodeBounds(node, cylinder); - label.attr('transform', `translate(${-bbox.width / 2}, ${h / 2 - bbox.height + outerOffset})`); + label.attr( + 'transform', + `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${h / 2 - bbox.height + outerOffset - 4 * (bbox.y - (bbox.top ?? 0))})` + ); node.intersect = function (point) { const pos = intersect.rect(node, point); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts index dbb96a242..231218f0e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts @@ -71,7 +71,7 @@ export const multiRect = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - rectOffset}, ${-(bbox.height / 2) + rectOffset})` + `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - 4 * (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, multiRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts index 2745f27cd..3e5d384dd 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts @@ -51,7 +51,7 @@ export const slopedRect = async (parent: SVGAElement, node: Node) => { polygon.attr('transform', `translate(0, ${h / 4})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0)}, ${-h / 4 + (node.padding ?? 0)})` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 4 + (node.padding ?? 0) - 4 * (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts index 46017523b..aacf0c41d 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts @@ -53,7 +53,10 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise { waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0)},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2})` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - 4 * (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts index 610c02177..1a41105fb 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts @@ -68,7 +68,7 @@ export const windowPane = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) + rectOffset / 2}, ${-(bbox.height / 2) + rectOffset / 2})` + `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset / 2 - 4 * (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, windowPane);