You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/10/16 03:55:00 UTC
[incubator-echarts-examples] branch next updated: feat: add dirty
rect toggle
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-examples.git
The following commit(s) were added to refs/heads/next by this push:
new a338c95 feat: add dirty rect toggle
a338c95 is described below
commit a338c957692f0783f773aaebc61d9d32826f0356
Author: pissang <bm...@gmail.com>
AuthorDate: Fri Oct 16 11:54:41 2020 +0800
feat: add dirty rect toggle
---
public/data/candlestick-sh-2015.js | 4 --
src/common/i18n.js | 6 ++-
src/common/store.js | 1 +
src/dep/showDebugDirtyRect.js | 79 ++++++++++++++++++++++++++++++++++++++
src/editor/Preview.vue | 34 +++++++++++++---
src/editor/sandbox.js | 8 +++-
src/explore/ExampleCard.vue | 4 +-
tool/build-example.js | 3 +-
8 files changed, 124 insertions(+), 15 deletions(-)
diff --git a/public/data/candlestick-sh-2015.js b/public/data/candlestick-sh-2015.js
index 9473ba6..7dec204 100644
--- a/public/data/candlestick-sh-2015.js
+++ b/public/data/candlestick-sh-2015.js
@@ -74,10 +74,6 @@ var option = {
color: '#8392A5'
}
},
- handleStyle: {
- color: '#fff',
- borderColor: null
- },
brushSelect: true
}, {
type: 'inside'
diff --git a/src/common/i18n.js b/src/common/i18n.js
index 5711d07..1443958 100644
--- a/src/common/i18n.js
+++ b/src/common/i18n.js
@@ -6,7 +6,8 @@ export default {
chartOK: 'Chart has been generated successfully, ',
darkMode: 'Dark Mode',
- lightMode: 'Light Mode',
+ // lightMode: 'Light Mode',
+ useDirtyRect: 'Use Dirty Rect',
renderer: 'Renderer',
download: 'Download',
@@ -63,7 +64,8 @@ export default {
chartOK: '图表已生成, ',
darkMode: '深色模式',
- lightMode: '浅色模式',
+ useDirtyRect: '开启脏矩形优化',
+ // lightMode: '浅色模式',
renderer: '渲染模式',
download: '下载示例',
diff --git a/src/common/store.js b/src/common/store.js
index 8edfd03..784a4fe 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -11,6 +11,7 @@ export const store = {
renderer: URL_PARAMS.renderer || 'canvas',
typeCheck: URL_PARAMS.editor === 'monaco',
+ useDirtyRect: 'useDirtyRect' in URL_PARAMS,
code: '',
diff --git a/src/dep/showDebugDirtyRect.js b/src/dep/showDebugDirtyRect.js
new file mode 100644
index 0000000..ff06d35
--- /dev/null
+++ b/src/dep/showDebugDirtyRect.js
@@ -0,0 +1,79 @@
+var DebugRect = (function () {
+ function DebugRect(style) {
+ var dom = this.dom = document.createElement('div');
+ dom.className = 'ec-debug-dirty-rect';
+ style = Object.assign({}, style);
+ Object.assign(style, {
+ backgroundColor: 'rgba(0, 0, 255, 0.2)',
+ border: '1px solid #00f'
+ });
+ dom.style.cssText = "\nposition: absolute;\nopacity: 0;\ntransition: opacity 0.5s linear;\npointer-events: none;\n";
+ for (var key in style) {
+ if (style.hasOwnProperty(key)) {
+ dom.style[key] = style[key];
+ }
+ }
+ }
+ DebugRect.prototype.update = function (rect) {
+ var domStyle = this.dom.style;
+ domStyle.width = rect.width + 'px';
+ domStyle.height = rect.height + 'px';
+ domStyle.left = rect.x + 'px';
+ domStyle.top = rect.y + 'px';
+ };
+ DebugRect.prototype.hide = function () {
+ this.dom.style.opacity = '0';
+ };
+ DebugRect.prototype.show = function () {
+ var _this = this;
+ clearTimeout(this._hideTimeout);
+ this.dom.style.opacity = '1';
+ this._hideTimeout = setTimeout(function () {
+ _this.hide();
+ }, 2000);
+ };
+ return DebugRect;
+}());
+export default function (zr, opts) {
+ opts = opts || {};
+ var painter = zr.painter;
+ if (!painter.getLayers) {
+ throw new Error('Debug dirty rect can only been used on canvas renderer.');
+ }
+ if (painter.isSingleCanvas()) {
+ throw new Error('Debug dirty rect can only been used on zrender inited with container.');
+ }
+ var debugViewRoot = document.createElement('div');
+ debugViewRoot.style.cssText = "\nposition:absolute;\nleft:0;\ntop:0;\nright:0;\nbottom:0;\npointer-events:none;\n";
+ debugViewRoot.className = 'ec-debug-dirty-rect-container';
+ var debugRects = [];
+ var dom = zr.dom;
+ dom.appendChild(debugViewRoot);
+ var computedStyle = getComputedStyle(dom);
+ if (computedStyle.position === 'static') {
+ dom.style.position = 'relative';
+ }
+ zr.on('rendered', function () {
+ if (painter.getLayers) {
+ var idx_1 = 0;
+ painter.eachBuiltinLayer(function (layer) {
+ if (!layer.debugGetPaintRects) {
+ return;
+ }
+ var paintRects = layer.debugGetPaintRects();
+ for (var i = 0; i < paintRects.length; i++) {
+ if (!debugRects[idx_1]) {
+ debugRects[idx_1] = new DebugRect(opts.style);
+ debugViewRoot.appendChild(debugRects[idx_1].dom);
+ }
+ debugRects[idx_1].show();
+ debugRects[idx_1].update(paintRects[i]);
+ idx_1++;
+ }
+ });
+ for (var i = idx_1; i < debugRects.length; i++) {
+ debugRects[i].hide();
+ }
+ }
+ });
+}
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index 414ba96..e33c0e9 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -8,6 +8,7 @@
<div id="tool-panel">
<div class="left-panel">
<el-switch
+ class="dark-mode"
v-model="shared.darkMode"
active-color="#181432"
:active-text="$t('editor.darkMode')"
@@ -19,6 +20,13 @@
<el-radio-button label="svg"></el-radio-button>
<el-radio-button label="canvas"></el-radio-button>
</el-radio-group>
+
+ <el-switch
+ v-if="shared.renderer==='canvas'"
+ v-model="shared.useDirtyRect"
+ :active-text="$t('editor.useDirtyRect')"
+ :inactive-text="''">
+ </el-switch>
</div>
<button v-if="inEditor" class="download btn btn-sm" @click="downloadExample">{{ $t('editor.download') }}</button>
<a :href="editLink" target="_blank" v-else class="edit btn btn-sm">{{ $t('editor.edit') }}</a>
@@ -52,10 +60,11 @@ export function ensureECharts() {
return loadScriptsAsync([
SCRIPT_URLS.datGUIMinJS,
- URL_PARAMS.local
+ 'local' in URL_PARAMS
? SCRIPT_URLS.localEChartsMinJS : SCRIPT_URLS.echartsMinJS,
SCRIPT_URLS.echartsDir + '/dist/extension/dataTool.js',
SCRIPT_URLS.echartsDir + '/map/js/world.js',
+ SCRIPT_URLS.echartsDir + '/map/js/china.js',
SCRIPT_URLS.echartsStatMinJS,
...URL_PARAMS.gl ? [SCRIPT_URLS.echartsGLMinJS] : [],
...hasBmap ? [
@@ -163,7 +172,7 @@ export default {
},
watch: {
- "shared.runCode"(val) {
+ 'shared.runCode'(val) {
if (this.autoRun || !this.sandbox) {
if (!this.debouncedRun) {
// First run
@@ -174,10 +183,13 @@ export default {
}
}
},
- "shared.renderer"() {
+ 'shared.renderer'() {
+ this.refreshAll();
+ },
+ 'shared.darkMode'() {
this.refreshAll();
},
- "shared.darkMode"() {
+ 'shared.useDirtyRect'() {
this.refreshAll();
}
},
@@ -227,6 +239,18 @@ export default {
overflow: hidden;
padding: 10px;
+
+ .ec-debug-dirty-rect-container {
+ left: 10px!important;
+ top: 10px!important;
+ right: 10px!important;
+ bottom: 10px!important;
+
+ .ec-debug-dirty-rect {
+ background-color: rgba(255, 0, 0, 0.2)!important;
+ border: 1px solid red!important;
+ }
+ }
}
#tool-panel {
@@ -255,7 +279,7 @@ export default {
label {
margin-bottom: 0;
- font-size: 12px;
+ font-size: 10px;
}
.left-panel {
diff --git a/src/editor/sandbox.js b/src/editor/sandbox.js
index fc2790b..0821851 100644
--- a/src/editor/sandbox.js
+++ b/src/editor/sandbox.js
@@ -1,3 +1,5 @@
+import showDebugDirtyRect from '../dep/showDebugDirtyRect';
+
export function createSandbox(optionUpdated) {
let appEnv = {};
let gui;
@@ -74,8 +76,12 @@ export function createSandbox(optionUpdated) {
if (!chartInstance) {
chartInstance = echarts.init(el, store.darkMode ? 'dark' : '', {
- renderer: store.renderer
+ renderer: store.renderer,
+ useDirtyRect: store.useDirtyRect
});
+ if (store.useDirtyRect) {
+ showDebugDirtyRect(chartInstance.getZr());
+ }
_wrapOnMethods(chartInstance);
}
diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index 3731ec3..8b09278 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -32,8 +32,8 @@ export default {
if (exampleTheme) {
hash.push('theme=' + exampleTheme);
}
- if (URL_PARAMS.local) {
- hash.push('local=' + 1);
+ if ('local' in URL_PARAMS) {
+ hash.push('local');
}
return './editor.html?' + hash.join('&');
},
diff --git a/tool/build-example.js b/tool/build-example.js
index a547ad3..9ad14d5 100644
--- a/tool/build-example.js
+++ b/tool/build-example.js
@@ -212,7 +212,7 @@ async function takeScreenshot(browser, theme, rootDir, basename) {
try {
const difficulty = fmResult.data.difficulty != null ? fmResult.data.difficulty : 10;
- const category = fmResult.data.category.split(/,/g).map(a => a.trim()).filter(a => !!a);
+ const category = (fmResult.data.category || '').split(/,/g).map(a => a.trim()).filter(a => !!a);
if (!exampleList.find(item => item.id === basename)) { // Avoid add mulitple times when has multiple themes.
exampleList.push({
category: category,
@@ -225,6 +225,7 @@ async function takeScreenshot(browser, theme, rootDir, basename) {
}
}
catch (e) {
+ await browser.close();
throw new Error(e.toString());
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org