This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch gh-pages
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
The following commit(s) were added to refs/heads/gh-pages by this push:
new a84935d3 feat(editor): support sharing code with customized tool
options
a84935d3 is described below
commit a84935d376a5bd1b32abe19c00b3e52548245593
Author: plainheart <y...@all-my-life.cn>
AuthorDate: Tue May 10 16:37:49 2022 +0800
feat(editor): support sharing code with customized tool options
---
src/common/route.js | 23 ++++----------------
src/common/store.js | 15 ++++++++++++-
src/editor/Editor.vue | 22 +++++++------------
src/editor/Preview.vue | 53 ++++++++++++++++++++-------------------------
src/explore/ExampleCard.vue | 20 ++++++-----------
5 files changed, 56 insertions(+), 77 deletions(-)
diff --git a/src/common/route.js b/src/common/route.js
index 0dd04ca5..1da66ecb 100644
--- a/src/common/route.js
+++ b/src/common/route.js
@@ -1,24 +1,9 @@
export function getURL(params) {
- const searchUrlParts = [];
- for (let key in params) {
- if (params.hasOwnProperty(key)) {
- let part = key;
- if (params[key] != null) {
- part += '=' + params[key];
- }
- searchUrlParts.push(part);
- }
- }
- const searchUrl = searchUrlParts.join('&');
-
- return (
- location.protocol +
- '//' +
- location.hostname +
- (location.port ? ':' + location.port : '') +
- location.pathname +
- (searchUrl ? '?' + searchUrl : '')
+ const url = new URL(location.href);
+ Object.entries(params).forEach(([k, v]) =>
+ v == null ? url.searchParams.delete(k) : url.searchParams.set(k, v)
);
+ return url.toString();
}
export function gotoURL(params, pushHistory) {
diff --git a/src/common/store.js b/src/common/store.js
index 83f1f026..533e730b 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -16,7 +16,12 @@ export const store = {
darkMode: URL_PARAMS.theme === 'dark',
enableDecal: 'decal' in URL_PARAMS,
- renderer: URL_PARAMS.renderer || 'canvas',
+ renderer: (() => {
+ const renderer = URL_PARAMS.renderer && URL_PARAMS.renderer.toLowerCase();
+ return renderer && ['canvas', 'svg'].includes(renderer)
+ ? renderer
+ : 'canvas';
+ })(),
typeCheck:
getExampleConfig() &&
@@ -62,12 +67,16 @@ export function isGLExample() {
const LOCAL_EXAMPLE_CODE_STORE_KEY = 'echarts-examples-code';
+// for sharing URL
+export const CODE_CHANGED_FLAG = '__CODE_CHANGED__';
+
export function saveExampleCodeToLocal() {
localStorage.setItem(
LOCAL_EXAMPLE_CODE_STORE_KEY,
compressStr(
JSON.stringify({
code: store.sourceCode,
+ codeModified: store.initialCode !== store.sourceCode,
lang: store.typeCheck ? 'ts' : 'js'
})
)
@@ -92,6 +101,10 @@ export function loadExampleCode() {
const localCode = loadExampleCodeFromLocal();
if (localCode) {
clearLocalExampleCode();
+ // for sharing URL
+ if (localCode.codeModified) {
+ store.initialCode = CODE_CHANGED_FLAG;
+ }
return Promise.resolve(localCode.code);
}
return new Promise((resolve, reject) => {
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index 62230512..a14442e6 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -196,7 +196,8 @@ import {
store,
loadExampleCode,
parseSourceCode,
- getExampleConfig
+ getExampleConfig,
+ CODE_CHANGED_FLAG
} from '../common/store';
import { collectDeps, buildExampleCode } from '../../common/buildCode';
import { gotoURL } from '../common/route';
@@ -254,7 +255,10 @@ export default {
} else {
loadExampleCode().then((code) => {
// Only set the code in editor. editor will sync to the store.
- store.initialCode = this.initialCode = parseSourceCode(code);
+ this.initialCode = parseSourceCode(code);
+ if (store.initialCode !== CODE_CHANGED_FLAG) {
+ store.initialCode = this.initialCode;
+ }
});
window.addEventListener('mousemove', (e) => {
@@ -384,24 +388,14 @@ export default {
changeLang(lang) {
if ((URL_PARAMS.lang || 'js').toLowerCase() !== lang) {
if (!this.initialCode || store.sourceCode === this.initialCode) {
- gotoURL(
- Object.assign({}, URL_PARAMS, {
- lang
- })
- );
+ gotoURL({ lang });
} else {
this.$confirm(this.$t('editor.codeChangedConfirm'), '', {
confirmButtonText: this.$t('editor.confirmButtonText'),
cancelButtonText: this.$t('editor.cancelButtonText'),
type: 'warning'
})
- .then(() => {
- gotoURL(
- Object.assign({}, URL_PARAMS, {
- lang
- })
- );
- })
+ .then(() => gotoURL({ lang }))
.catch(() => {});
}
}
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index e7f5a081..ba27a918 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -145,7 +145,7 @@ import { compressStr } from '../common/helper';
import { createSandbox } from './sandbox';
import debounce from 'lodash/debounce';
import { download } from './downloadExample';
-import { gotoURL } from '../common/route';
+import { gotoURL, getURL } from '../common/route';
import { gt } from 'semver';
const example = getExampleConfig();
@@ -347,6 +347,15 @@ export default {
},
isNightlyVersion() {
return store.echartsVersion && store.echartsVersion.indexOf('dev') > -1;
+ },
+ toolOptions() {
+ const isCanvas = store.renderer === 'canvas';
+ return {
+ renderer: isCanvas ? null : store.renderer,
+ useDirtyRect: store.useDirtyRect && isCanvas ? 1 : null,
+ decal: store.enableDecal ? 1 : null,
+ theme: store.darkMode ? 'dark' : null
+ };
}
},
@@ -361,17 +370,12 @@ export default {
}
}
},
- 'shared.renderer'() {
- this.refresh();
- },
- 'shared.darkMode'() {
- this.refresh();
- },
- 'shared.enableDecal'() {
- this.refresh();
- },
- 'shared.useDirtyRect'() {
- this.refresh();
+ toolOptions: {
+ handler(n) {
+ this.refresh();
+ gotoURL(n, true);
+ },
+ deep: true
},
isNightlyVersion: {
handler(val) {
@@ -409,12 +413,13 @@ export default {
);
},
share() {
- let shareURL = new URL(location.href);
+ const params = {};
if (store.initialCode !== store.sourceCode) {
- shareURL.searchParams.set('code', compressStr(store.sourceCode));
+ params.code = compressStr(store.sourceCode);
}
+ const sharableURL = getURL(params);
navigator.clipboard
- .writeText(shareURL.toString())
+ .writeText(sharableURL)
.then(() => {
this.$message.closeAll();
this.$message({
@@ -426,7 +431,7 @@ export default {
// PENDING
.catch((e) => {
console.error('failed to write share url to the clipboard', e);
- window.open(shareURL, '_blank');
+ window.open(sharableURL, '_blank');
});
},
getOption() {
@@ -434,23 +439,11 @@ export default {
},
changeVersion() {
saveExampleCodeToLocal();
- setTimeout(() => {
- gotoURL(
- Object.assign({}, URL_PARAMS, {
- version: store.echartsVersion
- })
- );
- });
+ setTimeout(() => gotoURL({ version: store.echartsVersion }));
},
changeRandomSeed() {
updateRandomSeed();
- gotoURL(
- {
- ...URL_PARAMS,
- random: store.randomSeed
- },
- true
- );
+ gotoURL({ random: store.randomSeed }, true);
this.run();
},
// hasEditorError() {
diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index 97552eee..b2876a9f 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -28,7 +28,7 @@
>
</div>
<div>
- <div class="example-title">{{ title }}</div>
+ <div class="example-title" :title="title">{{ title }}</div>
<div class="example-subtitle" v-if="showSubtitle">{{ subtitle }}</div>
</div>
</div>
@@ -68,18 +68,12 @@ export default {
const example = this.example;
const hash = ['c=' + example.id];
const exampleTheme = this.exampleTheme;
- if (example.isGL) {
- hash.push('gl=1');
- }
- if (exampleTheme) {
- hash.push('theme=' + exampleTheme);
- }
- if ('local' in URL_PARAMS) {
- hash.push('local');
- }
- if ('useDirtyRect' in URL_PARAMS) {
- hash.push('useDirtyRect');
- }
+ example.isGL && hash.push('gl=1');
+ exampleTheme && hash.push('theme=' + exampleTheme);
+ 'local' in URL_PARAMS && hash.push('local=1');
+ 'debug' in URL_PARAMS && hash.push('debug=1');
+ 'useDirtyRect' in URL_PARAMS && hash.push('useDirtyRect=1');
+ URL_PARAMS.renderer && hash.push('renderer=' + URL_PARAMS.renderer);
return './editor.html?' + hash.join('&');
},
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
