diff --git a/platform/features/plot/src/MCTChart.js b/platform/features/plot/src/MCTChart.js index b8350e9171..2ca51b2309 100644 --- a/platform/features/plot/src/MCTChart.js +++ b/platform/features/plot/src/MCTChart.js @@ -155,6 +155,16 @@ define( } } + // Switch from WebGL to plain 2D if context is lost + function fallbackFromWebGL() { + element.html(TEMPLATE); + canvas = element.find("canvas")[0]; + chart = getChart([Canvas2DChart], canvas); + if (chart) { + doDraw(scope.draw); + } + } + // Try to initialize a chart. chart = getChart([GLChart, Canvas2DChart], canvas); @@ -164,6 +174,11 @@ define( return; } + // WebGL is a bit of a special case; it may work, then fail + // later for various reasons, so we need to listen for this + // and fall back to plain canvas drawing when it occurs. + canvas.addEventListener("webglcontextlost", fallbackFromWebGL); + // Check for resize, on a timer activeInterval = $interval(drawIfResized, 1000); @@ -192,4 +207,4 @@ define( return MCTChart; } -); \ No newline at end of file +); diff --git a/platform/features/plot/test/MCTChartSpec.js b/platform/features/plot/test/MCTChartSpec.js index 93be797114..9c60b034a6 100644 --- a/platform/features/plot/test/MCTChartSpec.js +++ b/platform/features/plot/test/MCTChartSpec.js @@ -36,6 +36,7 @@ define( mockElement, mockCanvas, mockGL, + mockC2d, mockPromise, mctChart; @@ -47,13 +48,14 @@ define( mockScope = jasmine.createSpyObj("$scope", ["$watchCollection", "$on"]); mockElement = - jasmine.createSpyObj("element", ["find"]); + jasmine.createSpyObj("element", ["find", "html"]); mockInterval.cancel = jasmine.createSpy("cancelInterval"); mockPromise = jasmine.createSpyObj("promise", ["then"]); // mct-chart uses GLChart, so it needs WebGL API - mockCanvas = jasmine.createSpyObj("canvas", [ "getContext" ]); + mockCanvas = + jasmine.createSpyObj("canvas", [ "getContext", "addEventListener" ]); mockGL = jasmine.createSpyObj( "gl", [ @@ -81,6 +83,7 @@ define( "drawArrays" ] ); + mockC2d = jasmine.createSpyObj('c2d', ['clearRect']); mockGL.ARRAY_BUFFER = "ARRAY_BUFFER"; mockGL.DYNAMIC_DRAW = "DYNAMIC_DRAW"; mockGL.TRIANGLE_FAN = "TRIANGLE_FAN"; @@ -93,7 +96,9 @@ define( }); mockElement.find.andReturn([mockCanvas]); - mockCanvas.getContext.andReturn(mockGL); + mockCanvas.getContext.andCallFake(function (type) { + return { webgl: mockGL, '2d': mockC2d }[type]; + }); mockInterval.andReturn(mockPromise); mctChart = new MCTChart(mockInterval, mockLog); @@ -169,6 +174,15 @@ define( expect(mockLog.warn).toHaveBeenCalled(); }); + it("falls back to Canvas 2d API if WebGL context is lost", function () { + mctChart.link(mockScope, mockElement); + expect(mockCanvas.addEventListener) + .toHaveBeenCalledWith("webglcontextlost", jasmine.any(Function)); + expect(mockCanvas.getContext).not.toHaveBeenCalledWith('2d'); + mockCanvas.addEventListener.mostRecentCall.args[1](); + expect(mockCanvas.getContext).toHaveBeenCalledWith('2d'); + }); + it("logs nothing in nominal situations (WebGL available)", function () { // Complement the previous test mctChart.link(mockScope, mockElement); @@ -197,4 +211,4 @@ define( }); } -); \ No newline at end of file +);