Atmob-Flutter
/
ElectronicAssistant


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>思维导图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      #markmap {
        display: flex;
        width: 100%;
        height: 100vh;
      }
    </style>


  <script src="https://cdn.reallyshort.cn/static/markmap/dsbridge.js"></script>
  <script src="https://cdn.reallyshort.cn/static/markmap/d3.js"></script>
  <script src="https://cdn.reallyshort.cn/static/markmap/markmap-lib.js"></script>
  <script src="https://cdn.reallyshort.cn/static/markmap/markmap-view.js"></script>

</head>

<body>
<svg id="markmap"></svg>
</body>

<script>
    const { markmap } = window;
    const { Transformer, Markmap, loadCSS, loadJS } = window.markmap;
    const transformer = new Transformer([]);
    const { scripts, styles } = transformer.getAssets();
    loadCSS(styles);
    loadJS(scripts, { getMarkmap: () => markmap });

    let mm;
    let index = 0;
    let title = "思维导图";
    let description = "";
    let mindmapRoot = null;
    const branchColors = {};
    const colors = ["#F63F2F", "#F6A24B", "#F7D422", "#02BB7B", "#4869FF", "#7416E6"];
    let svgEl = document.querySelector("#markmap");

    mm = Markmap.create(svgEl, {
      color: (node) => {
        const { depth, path, id } = node.state;
        // 根节点
        if (depth === 1) {
          return colors[0];
        }
        // 二级节点
        if (depth === 2) {
          if (!branchColors[path]) {
            branchColors[path] = {
              color: colors[index % colors.length],
              index: index,
            };
            index++;
          }
          return branchColors[path].color;
        }
        // 二级以下节点
        const rootPath = path.split(".")[1];
        return branchColors["1." + rootPath].color;
      },
      maxWidth: 400, // 节点最大宽度
    });

    function updateValue(value) {
      const { root } = transformer.transform(value);
      mindmapRoot = root;
      description = value;
      mm.setData(root);
      mm.fit();
    }


    // 注册更新数据的方法
    dsBridge.register("updateValue", function (value) {
      description = value;
      updateValue(value);
    });
</script>
</html>