From d829983c6e8ff60b9ee1535232b78a5810fd310d Mon Sep 17 00:00:00 2001 From: ferhatb Date: Thu, 5 Mar 2020 09:55:36 -0800 Subject: [PATCH 1/6] Add context ellipse polyfill --- lib/web_ui/lib/src/engine/dom_renderer.dart | 20 +++++++++++++++++++ .../lib/src/engine/text/font_collection.dart | 6 ++++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/lib/web_ui/lib/src/engine/dom_renderer.dart b/lib/web_ui/lib/src/engine/dom_renderer.dart index dbabe49f4d189..8e2f585b83f20 100644 --- a/lib/web_ui/lib/src/engine/dom_renderer.dart +++ b/lib/web_ui/lib/src/engine/dom_renderer.dart @@ -489,6 +489,26 @@ flt-glass-pane * { } } + static bool _ellipseFeatureDetected; + + /// Draws CanvasElement ellipse with fallback. + static void ellipse(html.CanvasRenderingContext2D context, + double centerX, double centerY, double radiusX, double radiusY, + double rotation, double startAngle, double endAngle, bool antiClockwise) { + _ellipseFeatureDetected ??= js_util.getProperty(context, 'ellipse') != null; + if (_ellipseFeatureDetected) { + context.ellipse(centerX, centerY, radiusX, radiusY, + rotation, startAngle, endAngle, antiClockwise); + } else { + context.save(); + context.translate(centerX, centerY); + context.rotate(rotation); + context.scale(radiusX, radiusY); + context.arc(0, 0, 1, startAngle, endAngle, antiClockwise); + context.restore(); + } + } + /// The element corresponding to the only child of the root surface. html.Element get _rootApplicationElement { final html.Element lastElement = rootElement.children.last; diff --git a/lib/web_ui/lib/src/engine/text/font_collection.dart b/lib/web_ui/lib/src/engine/text/font_collection.dart index 52a3ec8125223..1d2ed9e647a8b 100644 --- a/lib/web_ui/lib/src/engine/text/font_collection.dart +++ b/lib/web_ui/lib/src/engine/text/font_collection.dart @@ -269,8 +269,10 @@ class _PolyfillFontManager extends FontManager { completer.complete(); } else { if (DateTime.now().difference(_fontLoadStart) > _fontLoadTimeout) { - completer.completeError( - Exception('Timed out trying to load font: $family')); + // Let application waiting for fonts continue with fallback. + completer.complete(); + // Throw unhandled exception for logging. + throw Exception('Timed out trying to load font: $family'); } else { Timer(_fontLoadRetryDuration, _watchWidth); } From 83ab055123561710c1d0e13d326a1dd2a9dd2dc6 Mon Sep 17 00:00:00 2001 From: ferhatb Date: Thu, 5 Mar 2020 09:59:19 -0800 Subject: [PATCH 2/6] Change call sites for ellipse --- lib/web_ui/lib/src/engine/canvas_pool.dart | 4 ++-- lib/web_ui/lib/src/engine/rrect_renderer.dart | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/web_ui/lib/src/engine/canvas_pool.dart b/lib/web_ui/lib/src/engine/canvas_pool.dart index fefcf14b13bfb..268fc35181b73 100644 --- a/lib/web_ui/lib/src/engine/canvas_pool.dart +++ b/lib/web_ui/lib/src/engine/canvas_pool.dart @@ -563,14 +563,14 @@ class _CanvasPool extends _SaveStackTracking { void drawOval(ui.Rect rect, ui.PaintingStyle style) { context.beginPath(); - context.ellipse(rect.center.dx, rect.center.dy, rect.width / 2, + DomRenderer.ellipse(context, rect.center.dx, rect.center.dy, rect.width / 2, rect.height / 2, 0, 0, 2.0 * math.pi, false); contextHandle.paint(style); } void drawCircle(ui.Offset c, double radius, ui.PaintingStyle style) { context.beginPath(); - context.ellipse(c.dx, c.dy, radius, radius, 0, 0, 2.0 * math.pi, false); + DomRenderer.ellipse(context, c.dx, c.dy, radius, radius, 0, 0, 2.0 * math.pi, false); contextHandle.paint(style); } diff --git a/lib/web_ui/lib/src/engine/rrect_renderer.dart b/lib/web_ui/lib/src/engine/rrect_renderer.dart index 628dfcf46d3dd..79e2377706042 100644 --- a/lib/web_ui/lib/src/engine/rrect_renderer.dart +++ b/lib/web_ui/lib/src/engine/rrect_renderer.dart @@ -196,7 +196,7 @@ class _RRectToCanvasRenderer extends _RRectRenderer { void ellipse(double centerX, double centerY, double radiusX, double radiusY, double rotation, double startAngle, double endAngle, bool antiClockwise) { - context.ellipse(centerX, centerY, radiusX, radiusY, rotation, startAngle, + DomRenderer.ellipse(context, centerX, centerY, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise); } } From 7a56903194711926de474216e78c5c31259fd885 Mon Sep 17 00:00:00 2001 From: ferhatb Date: Thu, 5 Mar 2020 11:37:47 -0800 Subject: [PATCH 3/6] Change CanvasPool call site for ellipse --- lib/web_ui/lib/src/engine/canvas_pool.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web_ui/lib/src/engine/canvas_pool.dart b/lib/web_ui/lib/src/engine/canvas_pool.dart index 268fc35181b73..9df8d14f9eb82 100644 --- a/lib/web_ui/lib/src/engine/canvas_pool.dart +++ b/lib/web_ui/lib/src/engine/canvas_pool.dart @@ -503,7 +503,7 @@ class _CanvasPool extends _SaveStackTracking { break; case PathCommandTypes.ellipse: final Ellipse ellipse = command; - ctx.ellipse( + DomRenderer.ellipse(ctx, ellipse.x, ellipse.y, ellipse.radiusX, From ba239c96983c428c8583bf878e46c7c7cad6a13e Mon Sep 17 00:00:00 2001 From: ferhatb Date: Thu, 5 Mar 2020 14:27:49 -0800 Subject: [PATCH 4/6] Switch fontloader polyfill font for ie11 --- lib/web_ui/lib/src/engine/text/font_collection.dart | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/web_ui/lib/src/engine/text/font_collection.dart b/lib/web_ui/lib/src/engine/text/font_collection.dart index 1d2ed9e647a8b..dbc003a5c710b 100644 --- a/lib/web_ui/lib/src/engine/text/font_collection.dart +++ b/lib/web_ui/lib/src/engine/text/font_collection.dart @@ -245,7 +245,8 @@ class _PolyfillFontManager extends FontManager { paragraph.style.position = 'absolute'; paragraph.style.visibility = 'hidden'; paragraph.style.fontSize = '72px'; - paragraph.style.fontFamily = 'sans-serif'; + paragraph.style.fontFamily = browserEngine == BrowserEngine.ie11 ? + 'Arial' : 'sans-serif'; if (descriptors['style'] != null) { paragraph.style.fontStyle = descriptors['style']; } From 4b336f72ccdcbfcb776b8e595245cef5554d3450 Mon Sep 17 00:00:00 2001 From: ferhatb Date: Thu, 5 Mar 2020 14:56:35 -0800 Subject: [PATCH 5/6] switch font for ie11 --- lib/web_ui/lib/src/engine/text/font_collection.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web_ui/lib/src/engine/text/font_collection.dart b/lib/web_ui/lib/src/engine/text/font_collection.dart index dbc003a5c710b..c15e60dc911de 100644 --- a/lib/web_ui/lib/src/engine/text/font_collection.dart +++ b/lib/web_ui/lib/src/engine/text/font_collection.dart @@ -246,7 +246,7 @@ class _PolyfillFontManager extends FontManager { paragraph.style.visibility = 'hidden'; paragraph.style.fontSize = '72px'; paragraph.style.fontFamily = browserEngine == BrowserEngine.ie11 ? - 'Arial' : 'sans-serif'; + 'Times New Roman' : 'sans-serif'; if (descriptors['style'] != null) { paragraph.style.fontStyle = descriptors['style']; } From 78dc4a850439fd9ccbac2235565eee5fd296c22e Mon Sep 17 00:00:00 2001 From: ferhatb Date: Thu, 5 Mar 2020 16:06:43 -0800 Subject: [PATCH 6/6] Fix fontfallback --- lib/web_ui/lib/src/engine/text/font_collection.dart | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/web_ui/lib/src/engine/text/font_collection.dart b/lib/web_ui/lib/src/engine/text/font_collection.dart index c15e60dc911de..95e8d4e684595 100644 --- a/lib/web_ui/lib/src/engine/text/font_collection.dart +++ b/lib/web_ui/lib/src/engine/text/font_collection.dart @@ -245,8 +245,9 @@ class _PolyfillFontManager extends FontManager { paragraph.style.position = 'absolute'; paragraph.style.visibility = 'hidden'; paragraph.style.fontSize = '72px'; - paragraph.style.fontFamily = browserEngine == BrowserEngine.ie11 ? - 'Times New Roman' : 'sans-serif'; + final String fallbackFontName = browserEngine == BrowserEngine.ie11 ? + 'Times New Roman' : 'sans-serif'; + paragraph.style.fontFamily = fallbackFontName; if (descriptors['style'] != null) { paragraph.style.fontStyle = descriptors['style']; } @@ -258,7 +259,7 @@ class _PolyfillFontManager extends FontManager { html.document.body.append(paragraph); final int sansSerifWidth = paragraph.offsetWidth; - paragraph.style.fontFamily = "'$family', sans-serif"; + paragraph.style.fontFamily = "'$family', $fallbackFontName"; final Completer completer = Completer();