diff --git a/src/components/canvas/connections/BlockConnection.ts b/src/components/canvas/connections/BlockConnection.ts index 084165d..85aca54 100644 --- a/src/components/canvas/connections/BlockConnection.ts +++ b/src/components/canvas/connections/BlockConnection.ts @@ -322,7 +322,12 @@ export class BlockConnection extends withBatchedConnection(withHitTest(EventedCo } private renderLabelText() { - const labelInnerPadding = this.context.constants.connection.LABEL.INNER_PADDING; + 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`; @@ -338,8 +343,8 @@ export class BlockConnection extends withBatchedConnection(withHitTest(EventedCo this.geometry.y1, this.geometry.x2, this.geometry.y2, - measure.width + padding * 2 + labelInnerPadding * 2, - measure.height + labelInnerPadding * 2, + measure.width + padding * 2 + labelInnerLeftPadding + labelInnerRightPadding, + measure.height + labelInnerTopPadding + labelInnerBottomPadding, this.context.constants.system.GRID_SIZE ); @@ -360,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 - labelInnerPadding, y - labelInnerPadding, measure.width + 2 * labelInnerPadding, measure.height + 2 * labelInnerPadding); + 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 7a09f78..38800e4 100644 --- a/src/graphConfig.ts +++ b/src/graphConfig.ts @@ -116,7 +116,7 @@ export type TGraphConstants = { THRESHOLD_LINE_HIT: number; MIN_ZOOM_FOR_CONNECTION_ARROW_AND_LABEL: number; LABEL: { - INNER_PADDING: number; + INNER_PADDINGS: [number, number, number, number]; } }; @@ -156,7 +156,7 @@ export const initGraphConstants: TGraphConstants = { THRESHOLD_LINE_HIT: 8, MIN_ZOOM_FOR_CONNECTION_ARROW_AND_LABEL: 0.25, LABEL: { - INNER_PADDING: 0, + INNER_PADDINGS: [0, 0, 0, 0], } }, text: {