From 181dfb9922b0f86bbb175e2228909ec2ea0e15f8 Mon Sep 17 00:00:00 2001 From: Naveen Michaud-Agrawal Date: Wed, 30 May 2018 23:31:52 -0400 Subject: [PATCH 1/3] Configure text renderer's overflow behavior --- packages/datagrid/src/textrenderer.ts | 36 +++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/datagrid/src/textrenderer.ts b/packages/datagrid/src/textrenderer.ts index 8e8c68536..a4438d645 100644 --- a/packages/datagrid/src/textrenderer.ts +++ b/packages/datagrid/src/textrenderer.ts @@ -186,6 +186,7 @@ class TextRenderer extends CellRenderer { // Set up the text position variables. let textX: number; let textY: number; + let boxWidth: number; // Compute the Y position for the text. switch (vAlign) { @@ -205,13 +206,16 @@ class TextRenderer extends CellRenderer { // Compute the X position for the text. switch (hAlign) { case 'left': - textX = config.x + 2; + textX = config.x + 8; + boxWidth = config.width - 14; break; case 'center': textX = config.x + config.width / 2; + boxWidth = config.width; break; case 'right': - textX = config.x + config.width - 3; + textX = config.x + config.width - 8; + boxWidth = config.width - 14; break; default: throw 'unreachable'; @@ -224,6 +228,21 @@ class TextRenderer extends CellRenderer { gc.clip(); } + let elide = '\u2026'; + let textWidth = gc.measureText(text).width; + + // Compute elided text + while ((textWidth > boxWidth) && (text.length > 1)) { + if (text.length > 4 && textWidth >= 2 * boxWidth) { + // If text width is substantially bigger, take half the string + text = text.substr(0, (text.length / 2) + 1) + elide; + } else { + // Otherwise incrementally remove the last character + text = text.substr(0, text.length - 2) + elide; + } + textWidth = gc.measureText(text).width; + } + // Set the gc state. gc.font = font; gc.fillStyle = color; @@ -253,6 +272,12 @@ namespace TextRenderer { export type HorizontalAlignment = 'left' | 'center' | 'right'; + /** + * A type alias for the supported overflow modes. + */ + export + type Overflow = 'clip' | 'ellipsis'; + /** * An options object for initializing a text renderer. */ @@ -293,6 +318,13 @@ namespace TextRenderer { */ horizontalAlignment?: CellRenderer.ConfigOption; + /** + * The overflow behavior for text. + * + * The default is `'clip'`. + */ + overflow?: CellRenderer.ConfigOption | FormatFunc; + /** * The format function for the renderer. * From b167d4ec3522bc18b4f6b7123890fa99a89b3334 Mon Sep 17 00:00:00 2001 From: Naveen Michaud-Agrawal Date: Wed, 30 May 2018 23:31:52 -0400 Subject: [PATCH 2/3] Add configurability of cell text overflow behavior --- packages/datagrid/src/textrenderer.ts | 36 +++++++++++++++++---------- 1 file changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/datagrid/src/textrenderer.ts b/packages/datagrid/src/textrenderer.ts index a4438d645..f2a769970 100644 --- a/packages/datagrid/src/textrenderer.ts +++ b/packages/datagrid/src/textrenderer.ts @@ -31,6 +31,7 @@ class TextRenderer extends CellRenderer { this.backgroundColor = options.backgroundColor || ''; this.verticalAlignment = options.verticalAlignment || 'center'; this.horizontalAlignment = options.horizontalAlignment || 'left'; + this.overflow = options.overflow || 'ellipsis'; this.format = options.format || TextRenderer.formatGeneric(); } @@ -59,6 +60,11 @@ class TextRenderer extends CellRenderer { */ readonly horizontalAlignment: CellRenderer.ConfigOption; + /** + * The overflow behavior for the cell text. + */ + readonly overflow: CellRenderer.ConfigOption; + /** * The format function for the cell value. */ @@ -228,19 +234,23 @@ class TextRenderer extends CellRenderer { gc.clip(); } - let elide = '\u2026'; - let textWidth = gc.measureText(text).width; - - // Compute elided text - while ((textWidth > boxWidth) && (text.length > 1)) { - if (text.length > 4 && textWidth >= 2 * boxWidth) { - // If text width is substantially bigger, take half the string - text = text.substr(0, (text.length / 2) + 1) + elide; - } else { - // Otherwise incrementally remove the last character - text = text.substr(0, text.length - 2) + elide; + let overflow = CellRenderer.resolveOption(this.overflow, config); + + if (overflow === 'ellipsis') { + let elide = '\u2026'; + let textWidth = gc.measureText(text).width; + + // Compute elided text + while ((textWidth > boxWidth) && (text.length > 1)) { + if (text.length > 4 && textWidth >= 2 * boxWidth) { + // If text width is substantially bigger, take half the string + text = text.substr(0, (text.length / 2) + 1) + elide; + } else { + // Otherwise incrementally remove the last character + text = text.substr(0, text.length - 2) + elide; + } + textWidth = gc.measureText(text).width; } - textWidth = gc.measureText(text).width; } // Set the gc state. @@ -323,7 +333,7 @@ namespace TextRenderer { * * The default is `'clip'`. */ - overflow?: CellRenderer.ConfigOption | FormatFunc; + overflow?: CellRenderer.ConfigOption; /** * The format function for the renderer. From b10415f9c602c3ec1b0142fbeb4b8f5425d72df6 Mon Sep 17 00:00:00 2001 From: Naveen Michaud-Agrawal Date: Wed, 6 Jun 2018 21:38:58 -0400 Subject: [PATCH 3/3] Use clipping as the default overflow mode --- packages/datagrid/src/textrenderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/datagrid/src/textrenderer.ts b/packages/datagrid/src/textrenderer.ts index f2a769970..b2a3a788c 100644 --- a/packages/datagrid/src/textrenderer.ts +++ b/packages/datagrid/src/textrenderer.ts @@ -31,7 +31,7 @@ class TextRenderer extends CellRenderer { this.backgroundColor = options.backgroundColor || ''; this.verticalAlignment = options.verticalAlignment || 'center'; this.horizontalAlignment = options.horizontalAlignment || 'left'; - this.overflow = options.overflow || 'ellipsis'; + this.overflow = options.overflow || 'clip'; this.format = options.format || TextRenderer.formatGeneric(); }