diff --git a/src/components/canvas/connections/BlockConnection.ts b/src/components/canvas/connections/BlockConnection.ts index 446dadf..85aca54 100644 --- 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 index 172f2fa..38800e4 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_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,