Atmob-Flutter
/
ElectronicAssistant


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							<!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="./dsbridge.js"></script>
    <script src="./d3.js"></script>
    <script src="./markmap-lib.js"></script>
    <script src="./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"];
    const 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;
      },
      //duration: 0, // 动画时长
      maxWidth: 400, // 节点最大宽度
    });

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

    function mindMapSaveAsHtmlCreateFile() {
      const root = JSON.stringify(mindmapRoot);
      let templateHtml = `<!DOCTYPE html><html><head><meta charset="UTF-8"/><meta name="viewport"content="width=device-width, initial-scale=1.0"/><meta http-equiv="X-UA-Compatible"content="ie=edge"/><title>${title}</title><style>*{margin:0;padding:0}#markmap{display:block;width:100vw;height:100vh}</style></head><body><svg id="markmap"><use xlink:href=""><title>${title}</title></use><desc>${description
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(
          />/g,
          "&lt;"
        )}</desc></svg><script src="https://cdn.jsdelivr.net/npm/d3"><\/script><script src="https://cdn.jsdelivr.net/npm/markmap-view"><\/script><script>const root=${root};const{Markmap,loadCSS,loadJS}=window.markmap;const maxWidth=400;const branchColors={};const colors=["#F63F2F","#F6A24B","#F7D422","#02BB7B","#4869FF","#7416E6"];const styles="div{padding-bottom:0.12em!important} a {text-decoration:none} foreignObject {overflow:visible} strong{color:#333; font-size:0.95em!important; font-weight:600!important;} .hide, .hide *{color:transparent!important} .hide {background-color:#FFFFEC} .hide img {opacity:0} img[alt=h-25]{height:25px} img[alt=h-50]{height:50px} img[alt=h-75]{height:75px} img[alt=h-100]{height:100px} img[alt=h-125]{height:125px} img[alt=h-150]{height:150px} img[alt=h-175]{height:175px} img[alt=h-200]{height:200px} blockquote {width:400px!important;  white-space: normal;  text-align:justify;  font-size:0.8em;  line-height:1em;  border:1px solid #aaa;  padding:10px;  border-radius:4px;} aside{font-size: 0.8em;  display: inline-block!important;  font-weight:normal; vertical-align: top} cite {font-style:inherit;  font-family:serif;  font-size:0.97em};";const options={duration:0,style:(id)=>styles,maxWidth:maxWidth,spacingVertical:8,paddingX:15,autoFit:true,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},};Markmap.create("#markmap",options,root);<\/script><\/body><\/html>`;
      const file = new File([templateHtml], `${title}.html`, {
        type: "text/plain;charset=utf-8",
      });

      return fileToBytes(file);
    }

    async function mindMapSaveAsSvgCreateFile() {
      const file = new File([createSVG(svgEl.innerHTML)], `${title}.svg`, {
        type: "text/plain;charset=utf-8",
      });

      return createSVG(svgEl.innerHTML);
    }
    function createSVG(html) {
      const boundingBox = getBBox(svgEl);
      html = html.replace(/<br>/g, "<br/>");
      html = html.replace(/\n/g, " ");
      html =
        '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg id="markmap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="' +
        svgEl.className["baseVal"] +
        '" style="width:100%; height:100%;" viewBox="' +
        boundingBox.x +
        " " +
        (boundingBox.y - 5) +
        " " +
        boundingBox.w +
        " " +
        (boundingBox.h + 30) +
        '">' +
        '<use xlink:href=""><title>' +
        title +
        "</title></use>" +
        "<desc>" +
        description.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&lt;") +
        "</desc>" +
        html.replace(/<title>.*<\/title>/, "") +
        "</svg>";
      return html;
    }

    async function fileToBytes(file) {
      const response = new Response(file);
      const arrayBuffer = await response.arrayBuffer();
      return new Uint8Array(arrayBuffer);
    }

    // 注册更新数据的方法
    dsBridge.register("updateValue", function (value) {
      description = value;
      updateValue(value);
    });
    // 导出
    dsBridge.registerAsyn("export", async (value, responseCallback) => {
      if (value) {
        title = value;
      }
      const bytes = await mindMapSaveAsSvgCreateFile();
      responseCallback(bytes);
    });
</script>
</html>