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,