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