feat: add connection label inner paddings (#27)

* feat: add connection label inner paddings
gravity-ui · Dec 3, 2024 · a6791e0 · a6791e0
1 parent 5ce0fff
commit a6791e0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/components/canvas/connections/BlockConnection.ts b/src/components/canvas/connections/BlockConnection.ts
@@ -322,6 +322,12 @@ export class BlockConnection extends withBatchedConnection(withHitTest(EventedCo
   }
 
   private renderLabelText() {
+    const [
+      labelInnerTopPadding,
+      labelInnerRightPadding,
+      labelInnerBottomPadding,
+      labelInnerLeftPadding,
+    ] = this.context.constants.connection.LABEL.INNER_PADDINGS;
     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 +343,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 + labelInnerLeftPadding + labelInnerRightPadding,
+      measure.height + labelInnerTopPadding + labelInnerBottomPadding,
       this.context.constants.system.GRID_SIZE
     );
 
@@ -359,7 +365,12 @@ 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 - labelInnerLeftPadding,
+      y - labelInnerTopPadding,
+      measure.width + labelInnerLeftPadding + labelInnerRightPadding,
+      measure.height + labelInnerTopPadding + labelInnerBottomPadding,
+    );
   }
 
   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_PADDINGS: [number, number, number, 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_PADDINGS: [0, 0, 0, 0],
+    }
   },
   text: {
     BASE_FONT_SIZE: 24,