Atmob-Flutter
/
ElectronicAssistant


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!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: auto;
          aspect-ratio: 1;
        }
    </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>
    <script src="https://cdn.reallyshort.cn/static/markmap/svg-png.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 = "";
    const branchColors = {};
    const colors = ["#F63F2F", "#F6A24B", "#F7D422", "#02BB7B", "#4869FF", "#7416E6"];

   

    async function mindMapSaveAsPngCreateFile() {
      const svgEl = document.querySelector("#markmap");
      const markmap = 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;
        },
        duration: 0, // 动画时长
        maxWidth: 400, // 节点最大宽度
      });

      const { root } = transformer.transform(description);
      markmap.setData(root);
      markmap.fit();

      const { minX, maxX, minY, maxY } = markmap.state;
      const naturalWidth = maxY - minY;
      const naturalHeight = maxX - minX;
      const ratio = naturalHeight / naturalWidth;
      svgEl.style.aspectRatio = naturalWidth / naturalHeight;

      markmap.setData(root);
      markmap.fit();
     
      await delay(300);
      
      const base64 = await svgToPng("#markmap", title, { scale: 3, format: "png", background: "white" });
      markmap.destroy();
      return base64;
    }

    function delay(time) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, time);
      });
    }

    // 导出
    dsBridge.registerAsyn("export", async (fileName,summary, responseCallback) => {
      if (fileName) {
        title = fileName;
      }
      if(summary){
        description = summary;
      }
      const bytes = await mindMapSaveAsPngCreateFile();
      responseCallback(bytes);
    });
</script>
</html>