From d432d0bd029bb88905329303e9708488b1aa6dc0 Mon Sep 17 00:00:00 2001
From: itwillwork <edgarnurullin@yandex-team.ru>
Date: Mon, 2 Dec 2024 16:54:11 +0300
Subject: [PATCH] feat: add connection label inner paddings

---
 src/components/canvas/connections/BlockConnection.ts | 7 ++++---
 src/graphConfig.ts                                   | 6 ++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/canvas/connections/BlockConnection.ts b/src/components/canvas/connections/BlockConnection.ts
index 446dadf..084165d 100644
--- a/src/components/canvas/connections/BlockConnection.ts
+++ b/src/components/canvas/connections/BlockConnection.ts
@@ -322,6 +322,7 @@ export class BlockConnection extends withBatchedConnection(withHitTest(EventedCo
   }
 
   private renderLabelText() {
+    const labelInnerPadding = this.context.constants.connection.LABEL.INNER_PADDING;
     const padding = this.context.constants.system.GRID_SIZE / 8;
     const fontSize = Math.max(14, getFontSize(9, this.context.camera.getCameraScale()));
     const font = `${fontSize}px sans-serif`;
@@ -337,8 +338,8 @@ export class BlockConnection extends withBatchedConnection(withHitTest(EventedCo
       this.geometry.y1,
       this.geometry.x2,
       this.geometry.y2,
-      measure.width + padding * 2,
-      measure.height,
+      measure.width + padding * 2 + labelInnerPadding * 2,
+      measure.height + labelInnerPadding * 2,
       this.context.constants.system.GRID_SIZE
     );
 
@@ -359,7 +360,7 @@ export class BlockConnection extends withBatchedConnection(withHitTest(EventedCo
     if (this.state.hovered) this.context.ctx.fillStyle = this.context.colors.connectionLabel.hoverBackground;
     if (this.state.selected) this.context.ctx.fillStyle = this.context.colors.connectionLabel.selectedBackground;
 
-    this.context.ctx.fillRect(x, y, measure.width, measure.height);
+    this.context.ctx.fillRect(x - labelInnerPadding, y - labelInnerPadding, measure.width + 2 * labelInnerPadding, measure.height + 2 * labelInnerPadding);
   }
 
   public renderArrow() {
diff --git a/src/graphConfig.ts b/src/graphConfig.ts
index 172f2fa..7a09f78 100644
--- a/src/graphConfig.ts
+++ b/src/graphConfig.ts
@@ -115,6 +115,9 @@ export type TGraphConstants = {
     DEFAULT_Z_INDEX: number;
     THRESHOLD_LINE_HIT: number;
     MIN_ZOOM_FOR_CONNECTION_ARROW_AND_LABEL: number;
+    LABEL: {
+      INNER_PADDING: number;
+    }
   };
 
   text: {
@@ -152,6 +155,9 @@ export const initGraphConstants: TGraphConstants = {
     DEFAULT_Z_INDEX: 0,
     THRESHOLD_LINE_HIT: 8,
     MIN_ZOOM_FOR_CONNECTION_ARROW_AND_LABEL: 0.25,
+    LABEL: {
+      INNER_PADDING: 0,
+    }
   },
   text: {
     BASE_FONT_SIZE: 24,