[WIP] Add example: animate a line

CONTRIBUTING.md

@@ -109,11 +109,11 @@ See [`bench/README.md`](https://github.com/mapbox/mapbox-gl-js/blob/master/bench
   * Classes
   * Template strings
   * Computed and shorthand object properties
-* The following ES6 features are not to be used, in order to maintain support for Node 4.x, IE 11, and older mobile browsers. This may change in the future.
   * Default parameters
   * Rest parameters
-  * Spread (`...`) operator
   * Destructuring
+* The following ES6 features are not to be used, in order to maintain support for IE 11 and older mobile browsers. This may change in the future.
+  * Spread (`...`) operator (because it requires Object.assign)
   * Iterators and generators
   * "Library" features such as `Map`, `Set`, `array.find`, etc.
   * Modules

bench/benchmarks_view.js

@@ -12,58 +12,55 @@ const BenchmarksView = React.createClass({
 
     render: function() {
         return <div style={{width: 960, paddingBottom: window.innerHeight, margin: '0 auto'}}>
-            {this.renderSidebarBenchmarks()}
-            {this.renderBenchmarks()}
-        </div>;
-    },
-
-    renderSidebarBenchmarks: function() {
-        return <div style={{paddingTop: 40, width: 280, position: 'fixed'}} className='text-right'>
-            <h1 className="space-bottom">Benchmarks</h1>
-            <div className="space-bottom small">
-                {Object.keys(this.state.results).map(this.renderSidebarBenchmark)}
-            </div>
-            <a
+            <h1 className="space-bottom">
+                Benchmarks
+                <a
                     className={[
+                        'fr',
                         'icon',
                         'clipboard',
                         'button',
                         (this.getStatus() === 'ended' ? '' : 'disabled')
                     ].join(' ')}
                     data-clipboard-text={this.renderTextBenchmarks()}>
-                Copy Results
-            </a>
+                    Copy Results
+                </a>
+            </h1>
+            <table>
+                <thead>
+                <tr>
+                    <th>Benchmark</th>
+                    {this.versions().map((v) => <th key={v}>{v}</th>)}
+                </tr>
+                </thead>
+                <tbody>
+                    {Object.keys(this.state.results).map(this.renderBenchmark)}
+                </tbody>
+            </table>
         </div>;
     },
 
-    renderSidebarBenchmark: function(name) {
-        return <div
-                key={name}
-                className={[
-                    'space-bottom',
-                    this.getBenchmarkStatus(name) === 'waiting' ? 'quiet' : ''
-                ].join(' ')}>
-            <h3>{name}</h3>
-            {Object.keys(this.state.results[name]).map(this.renderSidebarBenchmarkVersion.bind(this, name))}
-        </div>;
+    renderBenchmark: function(name) {
+        return <tr key={name}>
+            <th><a href={`#${name}`} onClick={this.reload}>{name}</a></th>
+            {Object.keys(this.state.results[name]).map(this.renderBenchmarkVersion.bind(this, name))}
+        </tr>;
     },
 
-    renderSidebarBenchmarkVersion: function(name, version) {
+    renderBenchmarkVersion: function(name, version) {
         const results = this.state.results[name][version];
-        const that = this;
-
-        return <div
-                onClick={function() {
-                    that.scrollToBenchmark(name, version);
-                }}
-                style={{cursor: 'pointer'}}
+        return (
+            <td id={name + version}
                 key={version}
                 className={results.status === 'waiting' ? 'quiet' : ''}>
-            <strong>{version}:</strong> {results.message || '...'}
-        </div>;
+                {results.logs.map((log, index) => {
+                    return <div key={index} className={`pad1 dark fill-${log.color}`}>{log.message}</div>;
+                })}
+            </td>
+        );
     },
 
-    renderTextBenchmarks: function() {
+    versions: function() {
         const versions = [];
         for (const name in this.state.results) {
             for (const version in this.state.results[name]) {
@@ -72,7 +69,11 @@ const BenchmarksView = React.createClass({
                 }
             }
         }
+        return versions;
+    },
 
+    renderTextBenchmarks: function() {
+        const versions = this.versions();
         let output = `benchmark | ${versions.join(' | ')}\n---`;
         for (let i = 0; i < versions.length; i++) {
             output += ' | ---';
@@ -90,49 +91,6 @@ const BenchmarksView = React.createClass({
         return output;
     },
 
-    renderBenchmarks: function() {
-        return <div style={{width: 590, marginLeft: 320, marginBottom: 60}}>
-            {Object.keys(this.state.results).map(this.renderBenchmark)}
-        </div>;
-    },
-
-    renderBenchmark: function(name) {
-        return <div key={name}>
-            {Object.keys(this.state.results[name]).map(this.renderBenchmarkVersion.bind(this, name))}
-        </div>;
-    },
-
-    renderBenchmarkVersion: function(name, version) {
-        const results = this.state.results[name][version];
-        return (
-                <div
-                    style={{paddingTop: 40}}
-                    id={name + version}
-                    key={version}
-                    className={results.status === 'waiting' ? 'quiet' : ''}>
-
-                    <h2 className='space-bottom'>{name} on {version}</h2>
-                {results.logs.map((log, index) => {
-                    return <div key={index} className={`pad1 dark fill-${log.color}`}>{log.message}</div>;
-                })}
-            </div>
-        );
-    },
-
-    scrollToBenchmark: function(name, version) {
-        const duration = 300;
-        const startTime = (new Date()).getTime();
-        const startYOffset = window.pageYOffset;
-
-        requestAnimationFrame(function frame() {
-            const endYOffset = document.getElementById(name + version).offsetTop;
-            const time = (new Date()).getTime();
-            const yOffset = Math.min((time - startTime) / duration, 1) * (endYOffset - startYOffset) + startYOffset;
-            window.scrollTo(0, yOffset);
-            if (time < startTime + duration) requestAnimationFrame(frame);
-        });
-    },
-
     getInitialState: function() {
         const results = {};
 
@@ -156,7 +114,6 @@ const BenchmarksView = React.createClass({
 
         asyncSeries(Object.keys(that.state.results), (name, callback) => {
             asyncSeries(Object.keys(that.state.results[name]), (version, callback) => {
-                that.scrollToBenchmark(name, version);
                 that.runBenchmark(name, version, callback);
             }, callback);
         }, (err) => {
@@ -181,7 +138,6 @@ const BenchmarksView = React.createClass({
         }
 
         results.status = 'running';
-        this.scrollToBenchmark(name, version);
         log('dark', 'starting');
 
         setTimeout(() => {
@@ -223,6 +179,10 @@ const BenchmarksView = React.createClass({
         return reduceStatuses(Object.keys(this.state.results).map(function(name) {
             return this.getBenchmarkStatus(name);
         }, this));
+    },
+
+    reload() {
+        location.reload();
     }
 });
 

debug/canvas.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<canvas id="testCanvasID" width="200" height="100"
+style="border:10px solid blue;">
+Canvas not supported
+</canvas>
+<div id='map'></div>
+
+<script type="application/javascript">
+function drawToCanvas() {
+    var canvas = document.getElementById('testCanvasID');
+    if (canvas.getContext) {
+        var ctx = canvas.getContext('2d');
+
+        ctx.fillStyle = 'rgb(200, 0, 0)';
+        ctx.fillRect(10, 10, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 50);
+    }
+}
+</script>
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script>
+
+var canvasStyle = {
+    "version": 8,
+    "sources": {
+        "canvas": {
+            "type": "canvas",
+            "canvas": "testCanvasID",
+            "coordinates": [
+                [-122.51596391201019, 37.56238816766053],
+                [-122.51467645168304, 37.56410183312965],
+                [-122.51309394836426, 37.563391708549425],
+                [-122.51423120498657, 37.56161849366671]
+            ]
+        }
+    },
+    "layers": [{
+        "id": "background",
+        "type": "background",
+        "paint": {
+            "background-color": "rgb(4,7,14)"
+        }
+    }, {
+        "id": "canvas",
+        "type": "raster",
+        "source": "canvas"
+    }]
+};
+
+var map = new mapboxgl.Map({
+    container: 'map',
+    minZoom: 14,
+    zoom: 17,
+    center: [-122.514426, 37.562984],
+    bearing: -96,
+    style: canvasStyle,
+    hash: false
+});
+
+drawToCanvas();
+
+</script>
+</body>
+</html>