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/12/29 13:25:17 UTC
[incubator-echarts-examples] branch next updated: update full code
and option outline whenever chart is changed.
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 02f29da update full code and option outline whenever chart is changed.
02f29da is described below
commit 02f29da343135792a29da16411c29f68bf5547bb
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Dec 29 21:23:32 2020 +0800
update full code and option outline whenever chart is changed.
---
src/common/store.js | 7 +++++
src/editor/Editor.vue | 74 +++++++++++++++++++++++++++++++-------------------
src/editor/Preview.vue | 9 ++++--
3 files changed, 60 insertions(+), 30 deletions(-)
diff --git a/src/common/store.js b/src/common/store.js
index 9089dfc..ed12f3c 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -19,6 +19,8 @@ export const store = {
runCode: '',
sourceCode: '',
+ runHash: '',
+
isMobile: window.innerWidth < 600,
editorStatus: {
@@ -42,3 +44,8 @@ export function loadExampleCode() {
export function parseSourceCode(code) {
return code.replace(/\/\*[\w\W]*?\*\//, '').trim();
}
+
+let hashId = 123;
+export function updateRunHash() {
+ store.runHash = hashId++;
+}
\ No newline at end of file
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index c84eb92..c59b5af 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -160,6 +160,9 @@ export default {
},
updateFullCode() {
const option = this.$refs.preview.getOption();
+ if (!option) {
+ return;
+ }
const deps = collectDeps(option);
deps.push(store.renderer === 'svg' ? 'SVGRenderer' : 'CanvasRenderer');
this.fullCode = buildExampleCode(store.sourceCode, deps, {
@@ -171,6 +174,38 @@ export default {
theme: store.darkMode ? 'dark' : '',
ROOT_PATH: store.cdnRoot
});
+ },
+ updateOptionOutline() {
+ const option = Object.freeze(this.$refs.preview.getOption());
+ if (!option) {
+ return;
+ }
+ mount(
+ option,
+ this.$el.querySelector('#option-outline'),
+ {
+ getKeys(object, path) {
+ return Object.keys(object).filter(key => {
+ if (Array.isArray(object[key]) && !object[key].length) {
+ return false;
+ }
+ return true;
+ });
+ },
+ expandOnCreatedAndUpdated(path) {
+ return path.length === 0
+ || (path[0] === 'series' && path.length <= 1);
+ },
+ }
+ );
+ },
+ updateTabContent(tab) {
+ if (tab === 'full-code') {
+ this.updateFullCode();
+ }
+ else if (tab === 'full-option') {
+ this.updateOptionOutline();
+ }
}
},
@@ -181,35 +216,10 @@ export default {
this.updateFullCode();
},
'currentTab'(tab) {
- if (tab === 'full-code') {
- this.updateFullCode();
- }
- else if (tab === 'full-option') {
- mount(
- Object.freeze(this.$refs.preview.getOption()),
- this.$el.querySelector('#option-outline'),
- {
- getKeys(object, path) {
- return Object.keys(object).filter(key => {
- if (Array.isArray(object[key]) && !object[key].length) {
- return false;
- }
- return true;
- });
- },
- expandOnCreatedAndUpdated(path) {
- return path.length === 0
- || (path[0] === 'series' && path.length <= 1);
- },
- }
- );
- }
+ this.updateTabContent(tab);
},
- 'shared.darkMode'(enableTypeCheck) {
- this.updateFullCode();
- },
- 'shared.renderer'(enableTypeCheck) {
- this.updateFullCode();
+ 'shared.runHash'() {
+ this.updateTabContent(this.currentTab);
},
fullCodeConfig: {
deep: true,
@@ -340,6 +350,14 @@ $handler-width: 5px;
margin: 0 0 0 20px;
}
+ .el-switch {
+ margin-right: 10px;
+ }
+
+ .el-switch__label {
+ margin-left: 8px;
+ margin-top: -2px;
+ }
.el-switch__label * {
font-size: 12px;
}
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index 41d48e0..10b8d74 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -60,7 +60,7 @@
<script>
-import {store} from '../common/store';
+import {store, updateRunHash} from '../common/store';
import {SCRIPT_URLS, URL_PARAMS} from '../common/config';
import {loadScriptsAsync} from '../common/helper';
import {createSandbox} from './sandbox';
@@ -121,6 +121,7 @@ function log(text, type) {
function run() {
+
if (typeof echarts === 'undefined') {
return;
}
@@ -155,6 +156,10 @@ function run() {
break;
}
}
+
+ // Update run hash to let others known chart has been changed.
+ updateRunHash();
+
}
catch (e) {
log(this.$t('editor.errorInEditor'), 'error');
@@ -263,7 +268,7 @@ export default {
}
},
getOption() {
- return this.sandbox.getOption();
+ return this.sandbox && this.sandbox.getOption();
}
// hasEditorError() {
// const annotations = this.editor.getSession().getAnnotations();
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org