Merge pull request #88 from GuoXiCheng/dev-c

update MarkMap
GuoXiCheng · Jun 25, 2024 · e3e04bc · e3e04bc
2 parents 80e110c + f701341
commit e3e04bc
Showing 1 changed file with 72 additions and 17 deletions.
diff --git a/src/MarkMap.vue b/src/MarkMap.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="container">
         <svg id="markmap" style="width: 100%; height: 90vh"></svg>
     </div>
 </template>
@@ -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',
@@ -18,32 +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);
 
-            for (const item of document.getElementsByTagName('circle')) {
-                item.addEventListener('click', () => {
-                    localStorage.setItem(hashedRoot, JSON.stringify(markmap.state.data));
-                });
-            }
+            return markmapInstance;
+        }
+
+        onMounted(() => {
+            const markmap = createOrUpdateMarkmap();
+            addToolbar(markmap);
         });
 
         // 简单的哈希函数
@@ -66,6 +67,60 @@ export default {
                 }
             }
         }
+
+        // 添加Toolbar
+        function addToolbar(markmap) {
+            const js = createElementDiv('JS');
+            const all = createElementDiv('All');
+            const react = createElementDiv('React');
+            const vue = createElementDiv('Vue');
+            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);
+            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);
+        }
+
+        function createElementDiv(title) {
+            const div = document.createElement('div');
+            div.innerHTML = title;
+            div.setAttribute('style', 'cursor: pointer;');
+            return div;
+        }
     }
 };
 </script>