Merge pull request #91 from GuoXiCheng/dev-c

update MarkMap

src/MarkMap.vue

@@ -4,7 +4,111 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { Transformer } from 'markmap-lib';
+import { Markmap, loadCSS, loadJS } from 'markmap-view';
+import { Toolbar } from 'markmap-toolbar';
+
+let markmapInstance: Markmap | null = null;
+
+const props = defineProps({
+    markdown: String
+})
+
+
+onMounted(() => {
+    const markmapFormat = convertMarkdown(props.markdown);
+    localStorage.setItem('markmap-state-raw', JSON.stringify(markmapFormat));
+    createOrUpdateMarkmap(markmapFormat);
+    addToolbar(markmapInstance);
+});
+
+const createOrUpdateMarkmap = (markmapFormat) => {
+    if (markmapInstance) {
+        markmapInstance.destroy();
+    }
+
+    markmapInstance = Markmap.create('#markmap', undefined, markmapFormat);
+}
+
+const convertMarkdown = (markdown) => {
+    const transformer = new Transformer();
+    const { root, features } = transformer.transform(markdown);
+
+    const assets = transformer.getAssets();
+
+    if (assets.styles) loadCSS(assets.styles);
+    if (assets.scripts) loadJS(assets.scripts, { getMarkmap: () => (window as any).markmap });
+
+    return root;
+}
+
+const addToolbar = (markmap) => {
+    Toolbar.defaultItems = [{
+        content: createElementImg('Docker'),
+        title: 'Docker',
+        onClick: () => {
+            const markmapRaw = localStorage.getItem('markmap-state-raw') as string;
+            createOrUpdateMarkmap(JSON.parse(markmapRaw).children[3].children[0]);
+        }
+    }, {
+        content: createElementImg('React'),
+        title: 'React',
+        onClick: () => {
+            const markmapRaw = localStorage.getItem('markmap-state-raw') as string;
+            createOrUpdateMarkmap(JSON.parse(markmapRaw).children[1].children[1]);
+        }
+    }, {
+        content: createElementImg('NodeJS'),
+        title: 'NodeJS',
+        onClick: () => {
+            const markmapRaw = localStorage.getItem('markmap-state-raw') as string;
+            createOrUpdateMarkmap(JSON.parse(markmapRaw).children[2].children[0]);
+        }
+    }, {
+        content: createElementImg('JavaScript'),
+        title: 'JavaScript',
+        onClick: () => {
+            const markmapRaw = localStorage.getItem('markmap-state-raw') as string;
+            createOrUpdateMarkmap(JSON.parse(markmapRaw).children[0]);
+        }
+    }, {
+        content: createElementImg('Vue'),
+        title: 'Vue',
+        onClick: () => {
+            const markmapRaw = localStorage.getItem('markmap-state-raw') as string;
+            createOrUpdateMarkmap(JSON.parse(markmapRaw).children[1].children[0]);
+        }
+    }, {
+        content: createElementImg('All'),
+        title: 'All',
+        onClick: () => {
+            const markmapRaw = localStorage.getItem('markmap-state-raw') as string;
+            createOrUpdateMarkmap(JSON.parse(markmapRaw));
+        }
+    }];
+
+    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);
+}
+
+const createElementImg = (filename) => {
+    const img = document.createElement('img');
+    img.src = `/images/svg/${filename}.svg`;
+    img.style.width = '1.5rem';
+    img.style.height = '1.5rem';
+    img.style.cursor = 'pointer';
+    return img;
+}
+</script>
+
+<!-- <script>
 import { onMounted } from 'vue';
 import { Transformer } from 'markmap-lib';
 import { Markmap, loadCSS, loadJS } from 'markmap-view';
@@ -100,4 +204,4 @@ export default {
         }
     }
 };
-</script>
+</script> -->