MarkMap 工具栏：修复渲染问题与点击无效

javascript

2024-03-01 19:31:16

MarkMap Toolbar：修复渲染问题和无响应点击

问题

在使用 MarkMap 的静态 HTML 页面中，尽管 MarkMap 和默认工具栏均能正常渲染，但工具栏中的点击操作却无法触发相应动作，例如缩放、重新居中等。

原因

该问题可能源于 MarkMap 工具栏与 MarkMap 实例之间的连接问题，导致工具栏无法接收来自 MarkMap 实例的事件，从而使点击操作无效。

解决步骤

检查 DOM 结构： 确保 MarkMap 工具栏元素已被正确插入到包含 MarkMap 实例的元素中。
检查 JavaScript 代码： 确认 Toolbar.create(mm) 方法已正确调用，并且将 el 变量分配给工具栏元素。还应确保 el 元素的样式设置为 position: absolute，以便在 DOM 中正确定位。
确保库已加载： 确认 MarkMap 和 MarkMap 工具栏库已加载到页面中。
检查浏览器控制台： 检查浏览器控制台是否存在任何 JavaScript 错误。
更新库： 如果问题仍然存在，请尝试更新 MarkMap 和 MarkMap 工具栏库的版本。

代码示例

以下是如何在 JavaScript 代码中正确创建和附加 MarkMap 工具栏：

const { markmap } = window;
const { Toolbar } = markmap;

const container = document.getElementById('container');
const mm = document.getElementById('mm');

const { el } = Toolbar.create(mm);
el.style.position = 'absolute';
el.style.bottom = '0.5rem';
el.style.right = '0.5rem';

container.appendChild(el);

完整示例

将上述 JavaScript 代码添加到示例 HTML 页面中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <style>
      svg.markmap {
        width: 100%;
        height: 100vh;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  </head>
  <body>
    <div id="container">
      <div id="mm" class="markmap">
        <script type="text/template">
          ---
          markmap:
            maxWidth: 300
            colorFreezeLevel: 2
          ---

          # markmap

          ## Links

          - <https://markmap.js.org/>
          - [GitHub](https://github.com/markmap/markmap)

          ## Related

          - [coc-markmap](https://github.com/markmap/coc-markmap)
          - [gatsby-remark-markmap](https://github.com/markmap/gatsby-remark-markmap)

          ## Features
          - links
          - **inline**  ~~text~~ *styles*
          - multiline
            text
          - `inline code`
          - Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
          - This is a very very very very very very very very very very very very very very very very long line.
        </script>
        <script>
          const { markmap } = window;
          const { Toolbar } = markmap;

          const container = document.getElementById('container');
          const mm = document.getElementById('mm');

          const { el } = Toolbar.create(mm);
          el.style.position = 'absolute';
          el.style.bottom = '0.5rem';
          el.style.right = '0.5rem';

          container.appendChild(el);
        </script>
      </div>
    </div>
  </body>
</html>