add -cases.html to test svg and canvas.

diablo820228 · Nov 4, 2017 · fb87c5f · fb87c5f
1 parent 43016af
commit fb87c5f
Show file tree

Hide file tree

Showing 168 changed files with 476 additions and 188 deletions.
diff --git a/dist/echarts.js b/dist/echarts.js
@@ -20920,22 +20920,32 @@ function ECharts(dom, theme, opts) {
      * @type {string}
      */
     this.id;
+
     /**
      * Group id
      * @type {string}
      */
     this.group;
+
     /**
      * @type {HTMLElement}
      * @private
      */
     this._dom = dom;
+
+    var defaultRenderer = 'canvas';
+    if (__DEV__) {
+        defaultRenderer = (
+            typeof window === void 0 ? global : window
+        ).__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer;
+    }
+
     /**
      * @type {module:zrender/ZRender}
      * @private
      */
     var zr = this._zr = init$1(dom, {
-        renderer: opts.renderer || 'canvas',
+        renderer: opts.renderer || defaultRenderer,
         devicePixelRatio: opts.devicePixelRatio,
         width: opts.width,
         height: opts.height

diff --git a/dist/echarts.js.map b/dist/echarts.js.map
diff --git a/src/echarts.js b/src/echarts.js
@@ -109,22 +109,32 @@ function ECharts(dom, theme, opts) {
      * @type {string}
      */
     this.id;
+
     /**
      * Group id
      * @type {string}
      */
     this.group;
+
     /**
      * @type {HTMLElement}
      * @private
      */
     this._dom = dom;
+
+    var defaultRenderer = 'canvas';
+    if (__DEV__) {
+        defaultRenderer = (
+            typeof window === void 0 ? global : window
+        ).__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer;
+    }
+
     /**
      * @type {module:zrender/ZRender}
      * @private
      */
     var zr = this._zr = zrender.init(dom, {
-        renderer: opts.renderer || 'canvas',
+        renderer: opts.renderer || defaultRenderer,
         devicePixelRatio: opts.devicePixelRatio,
         width: opts.width,
         height: opts.height

diff --git a/test/-cases.html b/test/-cases.html
@@ -0,0 +1,67 @@
+<!DOCTYPE>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>echarts cases</title>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <link rel="stylesheet" href="lib/reset.css">
+
+        <style>
+            .cases-list {
+                padding-top: 15px;
+                position: absolute;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                width: 230px;
+                overflow: auto;
+                font-size: 13px;
+            }
+            .cases-list ul {
+                padding-left: 32px;
+                list-style-type: decimal;
+            }
+            .renderer-selector {
+                padding-left: 20px;
+            }
+            .page-content {
+                margin-left: 235px;
+                height: 100%;
+                padding: 0;
+                position: relative;
+                border-left: 1px solid #333;
+            }
+            .page-content iframe {
+                padding: 0;
+                margin: 0;
+                border-width: 0;
+                overflow: visible;
+                visibility: visible;
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="cases-list">
+            <div class="renderer-selector">
+                <input type="radio" value="canvas" name="renderer" /> CANVAS &nbsp;&nbsp;
+                <input type="radio" value="svg" name="renderer" /> SVG
+            </div>
+            <ul></ul>
+        </div>
+
+        <div class="page-content">
+            <iframe frameborder="no" border="0" marginwidth="0" marginheight="0"
+                hspace="0" vspace="0">
+            </iframe>
+        </div>
+
+        <script src="-cases.js"></script>
+    </body>
+</html>
diff --git a/test/-cases.js b/test/-cases.js
@@ -0,0 +1,137 @@
+(function () {
+
+    var testHelper = window.testHelper;
+    var encodeHTML = testHelper.encodeHTML;
+    var resolve = testHelper.resolve;
+
+    var SELECTOR_CASES_LIST_CONTAINER = '.cases-list ul';
+    var SELECTOR_CASES_ITEM = 'li a';
+    var SELECTOR_CONTENT_IFRAME = '.page-content iframe';
+    var SELECTOR_RENDERER = '.renderer-selector input';
+
+    run();
+
+    function run() {
+        // Init list
+        $.ajax({
+            url: dir() + '/'
+        }).then(function (content) {
+            var pagePaths = fetchPagePaths(content);
+            render(pagePaths);
+        });
+
+        $(window).on('hashchange', function () {
+            reset();
+        });
+
+        $(SELECTOR_RENDERER).on('click', function (e) {
+            changeRenderer(e.target.value);
+        });
+
+        reset();
+    }
+
+    function reset() {
+        var pageURL = getCurrentPageURL();
+        resetRendererSelector(pageURL);
+        enterPage(pageURL, true); // Init page from hash if exists
+    }
+
+    function render(pagePaths) {
+        var html = [];
+
+        for (var i = 0; i < pagePaths.length; i++) {
+            var path = pagePaths[i];
+            html.push('<li><a href="' + encodeHTML(path) + '">' + encodeHTML(path) + '</a></li>');
+        }
+
+        var caseListContainer = $(SELECTOR_CASES_LIST_CONTAINER);
+
+        caseListContainer[0].innerHTML = html.join('');
+
+        caseListContainer.on('click', SELECTOR_CASES_ITEM, function (e) {
+            enterPage(makePageURL(
+                e.currentTarget.innerHTML, getCurrentRenderer()
+            ));
+            return false;
+        });
+    }
+
+    function getCurrentPageURL() {
+        return decodeURIComponent(
+            (location.hash || '').replace(/^#/, '')
+        );
+    }
+
+    function getCurrentRenderer(pagePath, renderer) {
+        var renderer;
+        $(SELECTOR_RENDERER).each(function (index, el) {
+            if (el.checked) {
+                renderer = el.value;
+            }
+        });
+        return renderer;
+    }
+
+    function changeRenderer(renderer) {
+        var pageURL = getCurrentPageURL();
+        if (pageURL) {
+            enterPage(replaceRendererOnPageURL(pageURL, renderer));
+        }
+    }
+
+    function makePageURL(pagePath, renderer) {
+        return pagePath + '?__ECHARTS__DEFAULT__RENDERER__=' + renderer;
+    }
+
+    function enterPage(pageURL, dontUpdateHash) {
+        if (!pageURL) {
+            return;
+        }
+        if (!dontUpdateHash) {
+            location.hash = '#' + encodeURIComponent(pageURL);
+        }
+        var contentIframe = $(SELECTOR_CONTENT_IFRAME);
+        contentIframe.attr('src', pageURL);
+    }
+
+    function dir() {
+        return location.origin + resolve(location.pathname, '..');
+    }
+
+    function fetchPagePaths(content) {
+        var pageList = [];
+
+        singleFetch(/"([^"]+\.html)\s*"/g);
+        singleFetch(/'([^']+\.html)\s*'/g);
+
+        function singleFetch(pattern) {
+            var result;
+            while ((result = pattern.exec(content)) != null) {
+                pageList.push(result[1]);
+            }
+        }
+
+        return pageList;
+    }
+
+    function resetRendererSelector(pageURL) {
+        var renderer = getRendererFromPageURL(pageURL) || 'canvas';
+
+        $(SELECTOR_RENDERER).each(function (index, el) {
+            el.checked = el.value === renderer;
+        });
+    }
+
+    function getRendererFromPageURL(pageURL) {
+        if (pageURL) {
+            var matchResult = pageURL.match(/[?&]__ECHARTS__DEFAULT__RENDERER__=(canvas|svg)(&|$)/);
+            return matchResult && matchResult[1];
+        }
+    }
+
+    function replaceRendererOnPageURL(pageURL, renderer) {
+        return pageURL.replace(/([?&]__ECHARTS__DEFAULT__RENDERER__=)([^&]*)(&|$)/, '$1' + renderer + '$3');
+    }
+
+})();
diff --git a/test/-primary-cases.html b/test/-primary-cases.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="lib/reset.css">
     </head>
     <body>
         <h1>Necessary cases for quick test.</h1>

diff --git a/test/area-large.html b/test/area-large.html
@@ -8,7 +8,7 @@
         <script src="lib/facePrint.js"></script>
         <script src="lib/testHelper.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="lib/reset.css">
     </head>
     <body>
         <style>

diff --git a/test/area.html b/test/area.html
@@ -24,9 +24,7 @@
                 // 'zrender/vml/vml'
             ], function (echarts) {
 
-                var chart = echarts.init(document.getElementById('main'), null, {
-                    renderer: 'canvas'
-                });
+                var chart = echarts.init(document.getElementById('main'));
 
                 var xAxisData = [];
                 var data1 = [];

diff --git a/test/area2.html b/test/area2.html
@@ -27,7 +27,7 @@
             ], function (echarts) {
 
                 var chart = echarts.init(document.getElementById('main'), null, {
-                    renderer: 'canvas'
+
                 });
 
                 var sampling = 'none';

diff --git a/test/axes.html b/test/axes.html
@@ -3,7 +3,7 @@
         <meta charset="utf-8">
         <script src="lib/esl.js"></script>
         <script src="lib/config.js"></script>
-        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="lib/reset.css">
     </head>
     <body>
         <style>
@@ -430,7 +430,7 @@
                 el.innerHTML = '<div class="ec"></div><label>' + encodeHTML(label) + '</label>';
                 containerEl.appendChild(el);
 
-                var chart = echarts.init(el.firstChild, null, {renderer: 'canvas'});
+                var chart = echarts.init(el.firstChild, null, { });
                 chart.setOption(zrUtil.merge(opt, getOption()));
             }
 

diff --git a/test/axis-boundaryGap.html b/test/axis-boundaryGap.html
@@ -7,7 +7,7 @@
         <script src="lib/jquery.min.js"></script>
         <script src="lib/facePrint.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="lib/reset.css">
     </head>
     <body>
         <style>

diff --git a/test/axis-extrema.html b/test/axis-extrema.html
@@ -6,7 +6,7 @@
         <script src="lib/jquery.min.js"></script>
         <script src="lib/facePrint.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="lib/reset.css">
     </head>
     <body>
         <style>

diff --git a/test/axis-lastLabel.html b/test/axis-lastLabel.html
@@ -5,7 +5,7 @@
         <script src="lib/config.js"></script>
         <script src="lib/facePrint.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="reset.css" />
+        <link rel="stylesheet" href="lib/reset.css" />
     </head>
     <body>
         <style>
@@ -56,7 +56,7 @@ <h1>xAxis: {showMinLabel: true, showMaxLabel: true}, yAxis: {showMaxLabel: false
             ], function (rainfallData, echarts) {
 
                 var chart = echarts.init(document.getElementById('chart-1'), null, {
-                    renderer: 'canvas'
+
                 });
 
                 chart.setOption({
@@ -126,7 +126,7 @@ <h1>xAxis: {showMinLabel: true, showMaxLabel: true}, yAxis: {showMaxLabel: false
             ], function (rainfallData, echarts) {
 
                 var chart = echarts.init(document.getElementById('chart0'), null, {
-                    renderer: 'canvas'
+
                 });
 
                 chart.setOption({
@@ -198,7 +198,7 @@ <h1>xAxis: {showMinLabel: true, showMaxLabel: true}, yAxis: {showMaxLabel: false
             ], function (rainfallData, echarts) {
 
                 var chart = echarts.init(document.getElementById('chart1'), null, {
-                    renderer: 'canvas'
+
                 });
 
                 chart.setOption({

diff --git a/test/axis.html b/test/axis.html
@@ -26,7 +26,7 @@
                 var graphic = echarts.graphic;
 
                 var chart = echarts.init(document.getElementById('main'), null, {
-                    renderer: 'canvas'
+
                 });
 
                 var xAxisData = [];