auto_tests/tests/fast_canvas_proxy.js

   1 /**
   2  * @fileoverview Tests for fastCanvasProxy, which drops superfluous segments.
   3  *
   4  * @author danvdk@gmail.com (Dan Vanderkam)
   5  */
   6
   7 import DygraphCanvasRenderer from '../../src/dygraph-canvas';
   8 import Proxy from './Proxy';
   9
  10 describe("fast-canvas-proxy", function() {
  11
  12 var fakeCanvasContext = {
  13   moveTo: function() {},
  14   lineTo: function() {},
  15   beginPath: function() {},
  16   closePath: function() {},
  17   fill: function() {},
  18   stroke: function() {}
  19 }
  20
  21 function extractMoveToAndLineToCalls(proxy) {
  22   var calls = proxy.calls__;
  23   var out = [];
  24   for (var i = 0; i < calls.length; i++) {
  25     var c = calls[i];
  26     if (c.name == 'moveTo' || c.name == 'lineTo') {
  27       out.push([c.name, c.args[0], c.args[1]]);
  28     }
  29   }
  30   return out;
  31 }
  32
  33 it('testExtraMoveTosElided', function() {
  34   var htx = new Proxy(fakeCanvasContext);
  35   var fastProxy = DygraphCanvasRenderer._fastCanvasProxy(htx);
  36
  37   fastProxy.moveTo(1, 1);
  38   fastProxy.lineTo(2, 1);
  39   fastProxy.moveTo(2, 1);
  40   fastProxy.lineTo(3, 1);
  41   fastProxy.moveTo(3, 1);
  42   fastProxy.stroke();
  43
  44   assert.deepEqual([['moveTo', 1, 1],
  45                 ['lineTo', 2, 1],
  46                 ['lineTo', 3, 1]], extractMoveToAndLineToCalls(htx));
  47 });
  48
  49 it('testConsecutiveMoveTosElided', function() {
  50   var htx = new Proxy(fakeCanvasContext);
  51   var fastProxy = DygraphCanvasRenderer._fastCanvasProxy(htx);
  52
  53   fastProxy.moveTo(1, 1);
  54   fastProxy.lineTo(2, 1);
  55   fastProxy.moveTo(3, 1);
  56   fastProxy.moveTo(3.1, 2);
  57   fastProxy.moveTo(3.2, 3);
  58   fastProxy.stroke();
  59
  60   assert.deepEqual([['moveTo', 1, 1],
  61                 ['lineTo', 2, 1],
  62                 ['moveTo', 3.2, 3]], extractMoveToAndLineToCalls(htx));
  63 });
  64
  65 it('testSuperfluousSegmentsElided', function() {
  66   var htx = new Proxy(fakeCanvasContext);
  67   var fastProxy = DygraphCanvasRenderer._fastCanvasProxy(htx);
  68
  69   fastProxy.moveTo(0.6, 1);
  70   fastProxy.lineTo(0.7, 2);
  71   fastProxy.lineTo(0.8, 3);
  72   fastProxy.lineTo(0.9, 4);
  73   fastProxy.lineTo(1.0, 5);  // max for Math.round(x) == 1
  74   fastProxy.lineTo(1.1, 3);
  75   fastProxy.lineTo(1.2, 0);  // min for Math.round(x) == 1
  76   fastProxy.lineTo(1.3, 1);
  77   fastProxy.lineTo(1.4, 2);
  78   fastProxy.moveTo(1.4, 2);
  79   fastProxy.lineTo(1.5, 2);  // rounding up to 2
  80   fastProxy.moveTo(1.5, 2);
  81   fastProxy.lineTo(1.6, 3);
  82   fastProxy.moveTo(1.6, 3);
  83   fastProxy.lineTo(1.7, 30);  // max for Math.round(x) == 2
  84   fastProxy.moveTo(1.7, 30);
  85   fastProxy.lineTo(1.8, -30);  // min for Math.round(x) == 2
  86   fastProxy.moveTo(1.8, -30);
  87   fastProxy.lineTo(1.9, 0);
  88   fastProxy.moveTo(3, 0);  // dodge the "don't touch the last pixel" rule.
  89   fastProxy.stroke();
  90
  91   assert.deepEqual([['moveTo', 0.6, 1],
  92                 ['lineTo', 1.0, 5],
  93                 ['lineTo', 1.2, 0],
  94                 ['lineTo', 1.7, 30],
  95                 ['lineTo', 1.8, -30],
  96                 ['moveTo', 3, 0]], extractMoveToAndLineToCalls(htx));
  97 });
  98
  99
 100 // For a more visual version of this test, see
 101 // https://gist.github.com/danvk/e98dbb24253c9b153696
 102 // The drawing commands in the following two tests are taken from there.
 103 it('should handle gaps on the left', function() {
 104   var htx = new Proxy(fakeCanvasContext);
 105   var fastProxy = DygraphCanvasRenderer._fastCanvasProxy(htx);
 106
 107   fastProxy.moveTo(0, 320);
 108   fastProxy.lineTo(0, 320);
 109   fastProxy.lineTo(53.21, 187);
 110   fastProxy.lineTo(53.23, 29);
 111   fastProxy.lineTo(53.41, 320);
 112   fastProxy.lineTo(54.15, 320);
 113   fastProxy.lineTo(475, 320);
 114   fastProxy.lineTo(475, 320);
 115   fastProxy.fill();
 116
 117   assert.deepEqual([
 118     ['moveTo', 0, 320],
 119     ['lineTo', 0, 320],
 120     ['lineTo', 53.21, 187],
 121     ['lineTo', 53.23, 29],
 122     ['lineTo', 53.41, 320],
 123     ['lineTo', 54.15, 320],
 124     ['lineTo', 475, 320],
 125     ['lineTo', 475, 320]
 126   ], extractMoveToAndLineToCalls(htx));
 127 });
 128
 129 it('should handle gaps on the right', function() {
 130   var htx = new Proxy(fakeCanvasContext);
 131   var fastProxy = DygraphCanvasRenderer._fastCanvasProxy(htx);
 132   fastProxy.moveTo(240.2, 320);
 133   fastProxy.lineTo(240.2, 320);
 134   fastProxy.lineTo(240.2, 174);
 135   fastProxy.lineTo(240.7, 145);
 136   fastProxy.lineTo(240.8, 320);
 137   fastProxy.lineTo(241.3, 29);
 138   fastProxy.lineTo(241.4, 320);
 139   fastProxy.lineTo(715.9, 320);
 140   fastProxy.lineTo(715.9, 320);
 141   fastProxy.fill();
 142
 143   assert.deepEqual([
 144     ['moveTo', 240.2, 320],
 145     ['lineTo', 240.2, 320],
 146     ['lineTo', 240.2, 174],
 147     ['lineTo', 240.7, 145],
 148     ['lineTo', 240.8, 320],
 149     ['lineTo', 241.3, 29],
 150     ['lineTo', 241.4, 320],
 151     ['lineTo', 715.9, 320],
 152     ['lineTo', 715.9, 320]
 153   ], extractMoveToAndLineToCalls(htx));
 154 });
 155
 156 });