feat: add connection label inner paddings

gravity-ui · Dec 2, 2024 · d432d0b · d432d0b
1 parent 5ce0fff
commit d432d0b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -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,