feat: improve markmap initialization with dynamic height calculation

Author: maxchang3

README.md

@@ -34,10 +34,6 @@ Use mindmap in VS Code's built-in Markdown preview with markmap, seamlessly supp
 ```markdown
 {% markmap %}
 ---
-style: |
-  #${id} {
-    height: 300px; /* Equivalent to {% markmap 300px %} */
-  }
 options:
   colorFreezeLevel: 2
 ---
@@ -51,10 +47,6 @@ options:
 ````markdown
 ```markmap
 ---
-style: |
-  #${id} {
-    height: 300px;
-  }
 options:
   colorFreezeLevel: 2
 ---
@@ -74,14 +66,15 @@ All frontmatter options are optional.
 - **`id`** : Used to define the ID of the `markmap-wrap` element.  
   - If not specified, an unique ID will be generated.
 
-- **`style`** : Used to define custom CSS styles for the mindmap.
-  - The `${id}` placeholder can be used in the style field. During rendering, it will be replaced with the actual ID of the `markmap-wrap`, ensuring each mindmap element on the page has unique styles and behaviors.
-  
+- **`style`**: Defines custom CSS styles for the mindmap.  
+  - You can use the `${id}` placeholder in the `style` field, which will be replaced with the actual `markmap-wrap` ID during rendering. This ensures that each mindmap element on the page has unique styles and behaviors.  
+    > In previous versions, manually setting the mindmap height was necessary. However, the current version automatically calculates the height based on the content, making manual adjustment unnecessary. You can still use the `style` field to customize other aspects, such as fonts, colors, and more.  
 - **`options`** : Correspond to the [`IMarkmapJSONOptions`](https://markmap.js.org/api/interfaces/markmap-view.IMarkmapJSONOptions.html) in the markmap project. For more details, please refer to [`jsonOptions`](https://markmap.js.org/docs/json-options#option-list).
 
 #### Tag Options
 
-You can also specify the height of the mindmap directly in the tag.
+You can also specify the height of the mindmap directly in the tag, by default it will be calculated based on the content.
+
 
 ```markdown
 {% markmap 300px %}

README.zh_CN.md

@@ -74,8 +74,9 @@ options:
 - **`id`**：用于定义 `markmap-wrap` 元素的 ID。  
   - 如果未指定，将生成一个唯一的 ID。
 
-- **`style`**：用于定义思维导图的自定义 CSS 样式。
-  - `${id}` 占位符可用于样式字段。在渲染时，它将被替换为 `markmap-wrap` 的实际 ID，确保页面上的每个思维导图元素具有唯一的样式和行为。
+- **`style`**：用于定义思维导图的自定义 CSS 样式。  
+  - 在 `style` 字段中可以使用占位符 `${id}`，渲染时会被替换为实际的 `markmap-wrap` ID，以确保页面上的每个思维导图元素拥有独特的样式和行为。  
+    > 在旧版本中，需要手动设置思维导图的高度。但在当前版本中，高度会根据内容自动计算，因此无需手动调整。不过，你仍然可以使用 `style` 字段自定义字体、颜色等其他样式。  
   
 - **`options`**：对应 markmap 项目中的 [`IMarkmapJSONOptions`](https://markmap.js.org/api/interfaces/markmap-view.IMarkmapJSONOptions.html)。有关更多详细信息，请参考 [`jsonOptions`](https://markmap.js.org/docs/json-options#option-list)。
 

src/preview/markmap-init.ts

@@ -4,13 +4,28 @@ import { debounce } from "radashi"
 
 const resize = {
   event: new Event('resize'),
-  observer: new ResizeObserver((entries) =>
-    entries.forEach((entry) => entry.target.dispatchEvent(resize.event))
-  ),
+  observer: new ResizeObserver((entries) => {
+    entries.forEach((entry) => {
+      entry.target.dispatchEvent(resize.event)
+    })
+  }),
+  listeners: new Map<Element, (event: Event) => void>(),
   observe: (el: Element, func: () => void) => {
-    resize.observer.observe(el)
-    el.addEventListener('resize', func)
+    if (!(el instanceof Element) || typeof func !== "function") return
+
+    if (!resize.listeners.has(el)) {
+      resize.listeners.set(el, func)
+      el.addEventListener("resize", func)
+      resize.observer.observe(el)
+    }
   },
+  destroyAll: () => {
+    resize.listeners.forEach((func, el) => {
+      el.removeEventListener("resize", func)
+      resize.observer.unobserve(el)
+    })
+    resize.listeners.clear()
+  }
 }
 
 const toolbar = (markmapInstance: Markmap) => {
@@ -19,7 +34,14 @@ const toolbar = (markmapInstance: Markmap) => {
   return toolbar.el
 }
 
-const init = () => {
+const updateMarkmapSize = (markmapInstance: Markmap) => {
+  const svg: SVGSVGElement = markmapInstance.svg.node()
+  const { y2: height } = markmapInstance.state.rect
+  svg.style.height = `${height}`
+  markmapInstance.fit()
+}
+
+const render = () => {
   document.querySelectorAll<HTMLElement>('.markmap-wrap').forEach((wrapper) => {
     if (wrapper.children.length < 2) return
     const [root, jsonOptions] = Array.from(wrapper.children, (el) => {
@@ -32,15 +54,17 @@ const init = () => {
     })
     if (!root || !jsonOptions) return
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-    const elements: Element[] = [svg]
+    wrapper.replaceChildren(svg)
     const markmapInstance = Markmap.create(svg, deriveOptions(jsonOptions), root)
-    if (wrapper.dataset?.toolbar !== 'false') elements.push(toolbar(markmapInstance))
-    wrapper.replaceChildren(...elements)
-    resize.observe(wrapper, debounce({ delay: 100 }, () => markmapInstance.fit()))
+    if (wrapper.dataset?.toolbar !== 'false') wrapper.appendChild(toolbar(markmapInstance))
+    resize.observe(wrapper, debounce({ delay: 100 }, () => updateMarkmapSize(markmapInstance)))
   })
 }
 
-window.addEventListener('vscode.markdown.updateContent', init)
+window.addEventListener('vscode.markdown.updateContent', () => {
+  resize.destroyAll()
+  render()
+})
 
-init()
+render()
 

src/preview/style.css

@@ -1,19 +1,55 @@
 .markmap-wrap {
   position: relative;
-  height: 500px;
   width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
 }
 
 .markmap-wrap>svg {
+  display: block;
   width: 100%;
-  height: 100%;
+  max-height: 100%;
+  height: auto;
+  min-height: 150px;
+  margin: 0;
+  padding: 0;
 }
 
 .mm-toolbar {
   position: absolute;
   right: .5em;
   bottom: .5em;
+  display: flex;
+  align-items: center;
+  border-width: 1px;
+  border-radius: .25rem;
+  border-style: solid;
+  padding: .25rem;
+  line-height: 1;
+}
+
+.mm-toolbar-item {
+  cursor: pointer;
+}
+
+.mm-toolbar-brand.active,
+.mm-toolbar-brand:hover,
+.mm-toolbar-item.active,
+.mm-toolbar-item:hover {
+  border-radius: 0.25rem;
+  --un-bg-opacity: 1;
+  background-color: rgb(228 228 231 / var(--un-bg-opacity));
+}
+.mm-toolbar-brand.active>*, .mm-toolbar-brand:hover>*, .mm-toolbar-item.active>*, .mm-toolbar-item:hover>* {
+  --un-text-opacity: 1;
+  color: rgb(39 39 42 / var(--un-text-opacity));
 }
+.mm-toolbar-brand.active, .mm-toolbar-item.active {
+  --un-bg-opacity: 1;
+  background-color: rgb(212 212 216 / var(--un-bg-opacity));
+}
+
 /**
   Override of the default markmap styles.
   https://github.com/markmap/markmap/blob/master/packages/markmap-view/src/style.css