From e9e64b91978e968ab96212f8574d46ed57bd2627 Mon Sep 17 00:00:00 2001 From: Xicheng Guo Date: Tue, 25 Jun 2024 11:48:31 +0800 Subject: [PATCH 1/3] update MarkMap --- src/MarkMap.vue | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/MarkMap.vue b/src/MarkMap.vue index b780207..4fd74d2 100644 --- a/src/MarkMap.vue +++ b/src/MarkMap.vue @@ -1,5 +1,5 @@ @@ -8,6 +8,7 @@ import { onMounted } from 'vue'; import { Transformer } from 'markmap-lib'; import { Markmap, loadCSS, loadJS } from 'markmap-view'; +import { Toolbar } from 'markmap-toolbar'; export default { name: 'MarkMap', @@ -39,6 +40,8 @@ export default { const markmap = Markmap.create('#markmap', null, markmapState); + addToolbar(markmap); + for (const item of document.getElementsByTagName('circle')) { item.addEventListener('click', () => { localStorage.setItem(hashedRoot, JSON.stringify(markmap.state.data)); @@ -66,6 +69,26 @@ export default { } } } + + // 添加Toolbar + function addToolbar(markmap) { + const js = document.createElement('div'); + js.innerHTML = 'JS'; + js.setAttribute('style', 'cursor: pointer;'); + Toolbar.defaultItems = [{ + content: js, + onClick: () => { + + } + }]; + const toolbar = Toolbar.create(markmap); + toolbar.setBrand(false) + + toolbar.el.style.position = 'absolute'; + toolbar.el.style.bottom = '0.5rem'; + toolbar.el.style.right = '0.5rem'; + document.getElementById('container').appendChild(toolbar.el); + } } }; \ No newline at end of file From d28154cbd6e258a5851fde256af40885b09dc7e9 Mon Sep 17 00:00:00 2001 From: Xicheng Guo Date: Tue, 25 Jun 2024 16:03:15 +0800 Subject: [PATCH 2/3] update markmap --- src/MarkMap.vue | 72 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 54 insertions(+), 18 deletions(-) diff --git a/src/MarkMap.vue b/src/MarkMap.vue index 4fd74d2..d2343b3 100644 --- a/src/MarkMap.vue +++ b/src/MarkMap.vue @@ -19,34 +19,32 @@ export default { } }, setup(props) { - onMounted(() => { + + let markmapInstance = null; + function createOrUpdateMarkmap() { const transformer = new Transformer(); const { root, features } = transformer.transform(props.markdown); + + localStorage.setItem('markmap-state-raw', JSON.stringify(root)); + const assets = transformer.getAssets(); if (assets.styles) loadCSS(assets.styles); if (assets.scripts) loadJS(assets.scripts, { getMarkmap: () => window.markmap }); - const hashedRoot = "markmap-state-" + simpleHash(JSON.stringify(root)); - const savedState = localStorage.getItem(hashedRoot); - - let markmapState; - if (savedState == null) { // 当前思维导图没有保存过状态 - markmapState = root; - clearLocalStorageWithPrefix("markmap-state-"); - } else { // 当前思维导图保存过状态 - markmapState = JSON.parse(savedState); + if (markmapInstance) { + markmapInstance.destroy(); } - const markmap = Markmap.create('#markmap', null, markmapState); + const selected = localStorage.getItem('markmap-state-selected'); + markmapInstance = Markmap.create('#markmap', null, selected ? JSON.parse(selected) : root); - addToolbar(markmap); + return markmapInstance; + } - for (const item of document.getElementsByTagName('circle')) { - item.addEventListener('click', () => { - localStorage.setItem(hashedRoot, JSON.stringify(markmap.state.data)); - }); - } + onMounted(() => { + const markmap = createOrUpdateMarkmap(); + addToolbar(markmap); }); // 简单的哈希函数 @@ -75,10 +73,48 @@ export default { const js = document.createElement('div'); js.innerHTML = 'JS'; js.setAttribute('style', 'cursor: pointer;'); + + const all = document.createElement('div'); + all.innerHTML = 'All'; + all.setAttribute('style', 'cursor: pointer;'); + + const react = document.createElement('div'); + react.innerHTML = 'React'; + react.setAttribute('style', 'cursor: pointer;'); + + const vue = document.createElement('div'); + vue.innerHTML = 'Vue'; + vue.setAttribute('style', 'cursor: pointer;'); Toolbar.defaultItems = [{ content: js, + title: 'JavaScript', onClick: () => { - + const raw = JSON.parse(localStorage.getItem('markmap-state-raw')); + localStorage.setItem('markmap-state-selected', JSON.stringify(raw.children[0])); + createOrUpdateMarkmap(); + } + }, { + content: react, + title: 'React', + onClick: () => { + const raw = JSON.parse(localStorage.getItem('markmap-state-raw')); + localStorage.setItem('markmap-state-selected', JSON.stringify(raw.children[1].children[1])); + createOrUpdateMarkmap(); + } + }, { + content: vue, + title: 'Vue', + onClick: () => { + const raw = JSON.parse(localStorage.getItem('markmap-state-raw')); + localStorage.setItem('markmap-state-selected', JSON.stringify(raw.children[1].children[0])); + createOrUpdateMarkmap(); + } + }, { + content: all, + title: 'All', + onClick: () => { + localStorage.removeItem('markmap-state-selected'); + createOrUpdateMarkmap(); } }]; const toolbar = Toolbar.create(markmap); From f7013410da0aba9de4099c2cc91f1ddf895532d7 Mon Sep 17 00:00:00 2001 From: Xicheng Guo Date: Tue, 25 Jun 2024 16:39:10 +0800 Subject: [PATCH 3/3] update markmap --- src/MarkMap.vue | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/src/MarkMap.vue b/src/MarkMap.vue index d2343b3..e6047cd 100644 --- a/src/MarkMap.vue +++ b/src/MarkMap.vue @@ -70,21 +70,10 @@ export default { // 添加Toolbar function addToolbar(markmap) { - const js = document.createElement('div'); - js.innerHTML = 'JS'; - js.setAttribute('style', 'cursor: pointer;'); - - const all = document.createElement('div'); - all.innerHTML = 'All'; - all.setAttribute('style', 'cursor: pointer;'); - - const react = document.createElement('div'); - react.innerHTML = 'React'; - react.setAttribute('style', 'cursor: pointer;'); - - const vue = document.createElement('div'); - vue.innerHTML = 'Vue'; - vue.setAttribute('style', 'cursor: pointer;'); + const js = createElementDiv('JS'); + const all = createElementDiv('All'); + const react = createElementDiv('React'); + const vue = createElementDiv('Vue'); Toolbar.defaultItems = [{ content: js, title: 'JavaScript', @@ -125,6 +114,13 @@ export default { toolbar.el.style.right = '0.5rem'; document.getElementById('container').appendChild(toolbar.el); } + + function createElementDiv(title) { + const div = document.createElement('div'); + div.innerHTML = title; + div.setAttribute('style', 'cursor: pointer;'); + return div; + } } }; \ No newline at end of file