markmap-view 0.17.3-alpha.1 → 0.17.3-beta.3

package/dist/browser/index.js

@@ -103,28 +103,28 @@
     };
   }
   /*! @gera2ld/jsx-dom v2.2.2 | ISC License */
-  const VTYPE_ELEMENT$1 = 1;
-  const VTYPE_FUNCTION$1 = 2;
-  const SVG_NS$1 = "http://www.w3.org/2000/svg";
-  const XLINK_NS$1 = "http://www.w3.org/1999/xlink";
-  const NS_ATTRS$1 = {
-    show: XLINK_NS$1,
-    actuate: XLINK_NS$1,
-    href: XLINK_NS$1
+  const VTYPE_ELEMENT = 1;
+  const VTYPE_FUNCTION = 2;
+  const SVG_NS = "http://www.w3.org/2000/svg";
+  const XLINK_NS = "http://www.w3.org/1999/xlink";
+  const NS_ATTRS = {
+    show: XLINK_NS,
+    actuate: XLINK_NS,
+    href: XLINK_NS
   };
-  const isLeaf$1 = (c) => typeof c === "string" || typeof c === "number";
-  const isElement$1 = (c) => (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT$1;
-  const isRenderFunction$1 = (c) => (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION$1;
+  const isLeaf = (c) => typeof c === "string" || typeof c === "number";
+  const isElement = (c) => (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
+  const isRenderFunction = (c) => (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
   function h(type, props, ...children) {
     props = Object.assign({}, props, {
       children: children.length === 1 ? children[0] : children
     });
-    return jsx$1(type, props);
+    return jsx(type, props);
   }
-  function jsx$1(type, props) {
+  function jsx(type, props) {
     let vtype;
-    if (typeof type === "string") vtype = VTYPE_ELEMENT$1;
-    else if (typeof type === "function") vtype = VTYPE_FUNCTION$1;
+    if (typeof type === "string") vtype = VTYPE_ELEMENT;
+    else if (typeof type === "function") vtype = VTYPE_FUNCTION;
     else throw new Error("Invalid VNode type");
     return {
       vtype,
@@ -132,18 +132,18 @@
       props
     };
   }
-  function Fragment$1(props) {
+  function Fragment(props) {
     return props.children;
   }
-  const DEFAULT_ENV$1 = {
+  const DEFAULT_ENV = {
     isSvg: false
   };
-  function insertDom$1(parent, nodes) {
+  function insertDom(parent, nodes) {
     if (!Array.isArray(nodes)) nodes = [nodes];
     nodes = nodes.filter(Boolean);
     if (nodes.length) parent.append(...nodes);
   }
-  function mountAttributes$1(domElement, props, env) {
+  function mountAttributes(domElement, props, env) {
     for (const key in props) {
       if (key === "key" || key === "children" || key === "ref") continue;
       if (key === "dangerouslySetInnerHTML") {
@@ -154,22 +154,22 @@
       } else if (key.startsWith("on")) {
         domElement[key.toLowerCase()] = props[key];
       } else {
-        setDOMAttribute$1(domElement, key, props[key], env.isSvg);
+        setDOMAttribute(domElement, key, props[key], env.isSvg);
       }
     }
   }
-  const attrMap$1 = {
+  const attrMap = {
     className: "class",
     labelFor: "for"
   };
-  function setDOMAttribute$1(el, attr, value, isSVG) {
-    attr = attrMap$1[attr] || attr;
+  function setDOMAttribute(el, attr, value, isSVG) {
+    attr = attrMap[attr] || attr;
     if (value === true) {
       el.setAttribute(attr, "");
     } else if (value === false) {
       el.removeAttribute(attr);
     } else {
-      const namespace = isSVG ? NS_ATTRS$1[attr] : void 0;
+      const namespace = isSVG ? NS_ATTRS[attr] : void 0;
       if (namespace !== void 0) {
         el.setAttributeNS(namespace, attr, value);
       } else {
@@ -177,39 +177,39 @@
       }
     }
   }
-  function flatten$1(arr) {
+  function flatten(arr) {
     return arr.reduce((prev, item) => prev.concat(item), []);
   }
-  function mountChildren$1(children, env) {
-    return Array.isArray(children) ? flatten$1(children.map((child) => mountChildren$1(child, env))) : mount$1(children, env);
+  function mountChildren(children, env) {
+    return Array.isArray(children) ? flatten(children.map((child) => mountChildren(child, env))) : mount(children, env);
   }
-  function mount$1(vnode, env = DEFAULT_ENV$1) {
+  function mount(vnode, env = DEFAULT_ENV) {
     if (vnode == null || typeof vnode === "boolean") {
       return null;
     }
     if (vnode instanceof Node) {
       return vnode;
     }
-    if (isRenderFunction$1(vnode)) {
+    if (isRenderFunction(vnode)) {
       const {
         type,
         props
       } = vnode;
-      if (type === Fragment$1) {
+      if (type === Fragment) {
         const node = document.createDocumentFragment();
         if (props.children) {
-          const children = mountChildren$1(props.children, env);
-          insertDom$1(node, children);
+          const children = mountChildren(props.children, env);
+          insertDom(node, children);
         }
         return node;
       }
       const childVNode = type(props);
-      return mount$1(childVNode, env);
+      return mount(childVNode, env);
     }
-    if (isLeaf$1(vnode)) {
+    if (isLeaf(vnode)) {
       return document.createTextNode(`${vnode}`);
     }
-    if (isElement$1(vnode)) {
+    if (isElement(vnode)) {
       let node;
       const {
         type,
@@ -223,9 +223,9 @@
       if (!env.isSvg) {
         node = document.createElement(type);
       } else {
-        node = document.createElementNS(SVG_NS$1, type);
+        node = document.createElementNS(SVG_NS, type);
       }
-      mountAttributes$1(node, props, env);
+      mountAttributes(node, props, env);
       if (props.children) {
         let childEnv = env;
         if (env.isSvg && type === "foreignObject") {
@@ -233,8 +233,8 @@
             isSvg: false
           });
         }
-        const children = mountChildren$1(props.children, childEnv);
-        if (children != null) insertDom$1(node, children);
+        const children = mountChildren(props.children, childEnv);
+        if (children != null) insertDom(node, children);
       }
       const {
         ref
@@ -244,11 +244,11 @@
     }
     throw new Error("mount: Invalid Vnode!");
   }
-  function mountDom$1(vnode) {
-    return mount$1(vnode);
+  function mountDom(vnode) {
+    return mount(vnode);
   }
   function hm(...args) {
-    return mountDom$1(h(...args));
+    return mountDom(h(...args));
   }
   const memoizedPreloadJS = memoize((url) => {
     document.head.append(
@@ -406,144 +406,12 @@
     });
     return derivedOptions;
   }
-  /*! @gera2ld/jsx-dom v2.2.2 | ISC License */
-  const VTYPE_ELEMENT = 1;
-  const VTYPE_FUNCTION = 2;
-  const SVG_NS = "http://www.w3.org/2000/svg";
-  const XLINK_NS = "http://www.w3.org/1999/xlink";
-  const NS_ATTRS = {
-    show: XLINK_NS,
-    actuate: XLINK_NS,
-    href: XLINK_NS
-  };
-  const isLeaf = (c) => typeof c === "string" || typeof c === "number";
-  const isElement = (c) => (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
-  const isRenderFunction = (c) => (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
-  function jsx(type, props) {
-    let vtype;
-    if (typeof type === "string") vtype = VTYPE_ELEMENT;
-    else if (typeof type === "function") vtype = VTYPE_FUNCTION;
-    else throw new Error("Invalid VNode type");
-    return {
-      vtype,
-      type,
-      props
-    };
-  }
-  function Fragment(props) {
-    return props.children;
-  }
-  const DEFAULT_ENV = {
-    isSvg: false
-  };
-  function insertDom(parent, nodes) {
-    if (!Array.isArray(nodes)) nodes = [nodes];
-    nodes = nodes.filter(Boolean);
-    if (nodes.length) parent.append(...nodes);
-  }
-  function mountAttributes(domElement, props, env) {
-    for (const key in props) {
-      if (key === "key" || key === "children" || key === "ref") continue;
-      if (key === "dangerouslySetInnerHTML") {
-        domElement.innerHTML = props[key].__html;
-      } else if (key === "innerHTML" || key === "textContent" || key === "innerText" || key === "value" && ["textarea", "select"].includes(domElement.tagName)) {
-        const value = props[key];
-        if (value != null) domElement[key] = value;
-      } else if (key.startsWith("on")) {
-        domElement[key.toLowerCase()] = props[key];
-      } else {
-        setDOMAttribute(domElement, key, props[key], env.isSvg);
-      }
+  function simpleHash(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
     }
-  }
-  const attrMap = {
-    className: "class",
-    labelFor: "for"
-  };
-  function setDOMAttribute(el, attr, value, isSVG) {
-    attr = attrMap[attr] || attr;
-    if (value === true) {
-      el.setAttribute(attr, "");
-    } else if (value === false) {
-      el.removeAttribute(attr);
-    } else {
-      const namespace = isSVG ? NS_ATTRS[attr] : void 0;
-      if (namespace !== void 0) {
-        el.setAttributeNS(namespace, attr, value);
-      } else {
-        el.setAttribute(attr, value);
-      }
-    }
-  }
-  function flatten(arr) {
-    return arr.reduce((prev, item) => prev.concat(item), []);
-  }
-  function mountChildren(children, env) {
-    return Array.isArray(children) ? flatten(children.map((child) => mountChildren(child, env))) : mount(children, env);
-  }
-  function mount(vnode, env = DEFAULT_ENV) {
-    if (vnode == null || typeof vnode === "boolean") {
-      return null;
-    }
-    if (vnode instanceof Node) {
-      return vnode;
-    }
-    if (isRenderFunction(vnode)) {
-      const {
-        type,
-        props
-      } = vnode;
-      if (type === Fragment) {
-        const node = document.createDocumentFragment();
-        if (props.children) {
-          const children = mountChildren(props.children, env);
-          insertDom(node, children);
-        }
-        return node;
-      }
-      const childVNode = type(props);
-      return mount(childVNode, env);
-    }
-    if (isLeaf(vnode)) {
-      return document.createTextNode(`${vnode}`);
-    }
-    if (isElement(vnode)) {
-      let node;
-      const {
-        type,
-        props
-      } = vnode;
-      if (!env.isSvg && type === "svg") {
-        env = Object.assign({}, env, {
-          isSvg: true
-        });
-      }
-      if (!env.isSvg) {
-        node = document.createElement(type);
-      } else {
-        node = document.createElementNS(SVG_NS, type);
-      }
-      mountAttributes(node, props, env);
-      if (props.children) {
-        let childEnv = env;
-        if (env.isSvg && type === "foreignObject") {
-          childEnv = Object.assign({}, childEnv, {
-            isSvg: false
-          });
-        }
-        const children = mountChildren(props.children, childEnv);
-        if (children != null) insertDom(node, children);
-      }
-      const {
-        ref
-      } = props;
-      if (typeof ref === "function") ref(node);
-      return node;
-    }
-    throw new Error("mount: Invalid Vnode!");
-  }
-  function mountDom(vnode) {
-    return mount(vnode);
+    return (hash >>> 0).toString(36);
   }
   function count(node) {
     var sum = 0, children = node.children, i = children && children.length;
@@ -1122,11 +990,10 @@
       next: lastLows
     };
   };
-  const containerCSS = "/* used for pre-rendering to get the size of each node */\n.markmap-container {\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: -100px;\n  left: -100px;\n  overflow: hidden;\n}\n.markmap-container > .markmap-foreign {\n    display: inline-block;\n  }\n/* first-child for line wrapping, last-child for max-width detection */\n.markmap-container > .markmap-foreign > div:last-child,\n        \n        .markmap-container > .markmap-foreign > div:last-child :not(pre) {\n          white-space: nowrap;\n        }\n.markmap-container > .markmap-foreign > div:last-child code {\n          white-space: inherit;\n        }\n";
-  const css = ".markmap {\n  --markmap-max-width: none;\n  --markmap-a-color: #0097e6;\n  --markmap-a-hover-color: #00a8ff;\n  --markmap-code-bg: #f0f0f0;\n  --markmap-code-color: #555;\n  --markmap-highlight-bg: #ffeaa7;\n  --markmap-table-border: 1px solid currentColor;\n  --markmap-font: 300 16px/20px sans-serif;\n  --markmap-circle-open-bg: #fff;\n  --markmap-text-color: #333;\n\n  font: var(--markmap-font);\n  color: var(--markmap-text-color);\n}\n\n  .markmap-link {\n    fill: none;\n  }\n\n  .markmap-node > circle {\n      cursor: pointer;\n    }\n\n  .markmap-foreign {\n    display: inline-block;\n  }\n\n  .markmap-foreign p {\n      margin: 0;\n    }\n\n  .markmap-foreign a {\n      color: var(--markmap-a-color);\n    }\n\n  .markmap-foreign a:hover {\n        color: var(--markmap-a-hover-color);\n      }\n\n  .markmap-foreign code {\n      padding: 0.25em;\n      font-size: calc(1em - 2px);\n      color: var(--markmap-code-color);\n      background-color: var(--markmap-code-bg);\n      border-radius: 2px;\n    }\n\n  .markmap-foreign pre {\n      margin: 0;\n    }\n\n  .markmap-foreign pre > code {\n        display: block;\n      }\n\n  .markmap-foreign del {\n      text-decoration: line-through;\n    }\n\n  .markmap-foreign em {\n      font-style: italic;\n    }\n\n  .markmap-foreign strong {\n      font-weight: bold;\n    }\n\n  .markmap-foreign mark {\n      background: var(--markmap-highlight-bg);\n    }\n\n  .markmap-foreign table,\n    .markmap-foreign th,\n    .markmap-foreign td {\n      border-collapse: collapse;\n      border: var(--markmap-table-border);\n    }\n\n  .markmap-foreign img {\n      display: inline-block;\n    }\n\n  .markmap-foreign svg {\n      fill: currentColor;\n    }\n\n  .markmap-foreign-testing-max {\n    max-width: var(--markmap-max-width);\n  }\n\n  .markmap-foreign-testing-max img {\n      max-width: var(--markmap-max-width);\n      max-height: none;\n    }\n\n.markmap-dark .markmap {\n  --markmap-code-bg: #1a1b26;\n  --markmap-code-color: #ddd;\n  --markmap-circle-open-bg: #444;\n  --markmap-text-color: #eee;\n}\n";
+  const css = ".markmap {\n  --markmap-max-width: 9999px;\n  --markmap-a-color: #0097e6;\n  --markmap-a-hover-color: #00a8ff;\n  --markmap-code-bg: #f0f0f0;\n  --markmap-code-color: #555;\n  --markmap-highlight-bg: #ffeaa7;\n  --markmap-table-border: 1px solid currentColor;\n  --markmap-font: 300 16px/20px sans-serif;\n  --markmap-circle-open-bg: #fff;\n  --markmap-text-color: #333;\n\n  font: var(--markmap-font);\n  color: var(--markmap-text-color);\n}\n\n  .markmap-link {\n    fill: none;\n  }\n\n  .markmap-node > circle {\n      cursor: pointer;\n    }\n\n  .markmap-foreign {\n    display: inline-block;\n  }\n\n  .markmap-foreign p {\n      margin: 0;\n    }\n\n  .markmap-foreign a {\n      color: var(--markmap-a-color);\n    }\n\n  .markmap-foreign a:hover {\n        color: var(--markmap-a-hover-color);\n      }\n\n  .markmap-foreign code {\n      padding: 0.25em;\n      font-size: calc(1em - 2px);\n      color: var(--markmap-code-color);\n      background-color: var(--markmap-code-bg);\n      border-radius: 2px;\n    }\n\n  .markmap-foreign pre {\n      margin: 0;\n    }\n\n  .markmap-foreign pre > code {\n        display: block;\n      }\n\n  .markmap-foreign del {\n      text-decoration: line-through;\n    }\n\n  .markmap-foreign em {\n      font-style: italic;\n    }\n\n  .markmap-foreign strong {\n      font-weight: bold;\n    }\n\n  .markmap-foreign mark {\n      background: var(--markmap-highlight-bg);\n    }\n\n  .markmap-foreign table,\n    .markmap-foreign th,\n    .markmap-foreign td {\n      border-collapse: collapse;\n      border: var(--markmap-table-border);\n    }\n\n  .markmap-foreign img {\n      display: inline-block;\n    }\n\n  .markmap-foreign svg {\n      fill: currentColor;\n    }\n\n  .markmap-foreign > div {\n      width: var(--markmap-max-width);\n    }\n\n  .markmap-foreign > div > div {\n        display: inline-block;\n      }\n\n.markmap-dark .markmap {\n  --markmap-code-bg: #1a1b26;\n  --markmap-code-color: #ddd;\n  --markmap-circle-open-bg: #444;\n  --markmap-text-color: #eee;\n}\n";
   const globalCSS = css;
-  function linkWidth(nodeData) {
-    const data = nodeData.data;
+  const linkShape = d32.linkHorizontal();
+  function linkWidth(data) {
     return Math.max(4 - 2 * data.state.depth, 1.5);
   }
   function minBy(numbers, by) {
@@ -1141,7 +1008,6 @@
     constructor(svg, opts) {
       this.options = defaultOptions;
       this.revokers = [];
-      this.imgCache = {};
       this.handleZoom = (e) => {
         const { transform } = e;
         this.g.attr("transform", transform);
@@ -1158,7 +1024,7 @@
       this.handleClick = (e, d) => {
         let recursive = this.options.toggleRecursively;
         if (isMacintosh ? e.metaKey : e.ctrlKey) recursive = !recursive;
-        this.toggleNode(d.data, recursive);
+        this.toggleNode(d, recursive);
       };
       this.svg = svg.datum ? svg : d32.select(svg);
       this.styleNode = this.svg.append("style");
@@ -1171,13 +1037,14 @@
       this.setOptions(opts);
       this.state = {
         id: this.options.id || this.svg.attr("id") || getId(),
-        minX: 0,
-        maxX: 0,
-        minY: 0,
-        maxY: 0
+        rect: { x1: 0, y1: 0, x2: 0, y2: 0 }
       };
       this.g = this.svg.append("g");
-      this.debouncedRefresh = debounce(() => this.setData(), 200);
+      this.observer = new ResizeObserver(
+        debounce(() => {
+          this.renderData();
+        }, 100)
+      );
       this.revokers.push(
         refreshHook.tap(() => {
           this.setData();
@@ -1198,7 +1065,7 @@
       const style = this.getStyleContent();
       this.styleNode.text(style);
     }
-    toggleNode(data, recursive = false) {
+    async toggleNode(data, recursive = false) {
       var _a, _b;
       const fold = ((_a = data.payload) == null ? void 0 : _a.fold) ? 0 : 1;
       if (recursive) {
@@ -1215,47 +1082,34 @@
           fold: ((_b = data.payload) == null ? void 0 : _b.fold) ? 0 : 1
         };
       }
-      this.renderData(data);
+      await this.renderData(data);
     }
-    initializeData(node) {
+    _initializeData(node) {
       let nodeId = 0;
-      const { color, nodeMinHeight, maxWidth, initialExpandLevel } = this.options;
-      const { id } = this.state;
-      const container = mountDom(
-        /* @__PURE__ */ jsx("div", { className: `markmap-container markmap ${id}-g` })
-      );
-      const style = mountDom(
-        /* @__PURE__ */ jsx("style", { children: [this.getStyleContent(), containerCSS].join("\n") })
-      );
-      document.body.append(container, style);
-      const groupStyle = maxWidth ? `--markmap-max-width: ${maxWidth}px` : "";
+      const { color, initialExpandLevel } = this.options;
       let foldRecursively = 0;
       let depth = 0;
       walkTree(node, (item, next, parent) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         depth += 1;
         item.children = (_a = item.children) == null ? void 0 : _a.map((child) => ({ ...child }));
         nodeId += 1;
-        const group = mountDom(
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "markmap-foreign markmap-foreign-testing-max",
-              style: groupStyle,
-              children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: item.content } })
-            }
-          )
-        );
-        container.append(group);
         item.state = {
           ...item.state,
           depth,
           id: nodeId,
-          el: group.firstChild
+          rect: {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+          },
+          size: [0, 0]
         };
-        item.state.path = [(_b = parent == null ? void 0 : parent.state) == null ? void 0 : _b.path, item.state.id].filter(Boolean).join(".");
+        item.state.key = [(_b = parent == null ? void 0 : parent.state) == null ? void 0 : _b.id, item.state.id].filter(Boolean).join(".") + simpleHash(item.content);
+        item.state.path = [(_c = parent == null ? void 0 : parent.state) == null ? void 0 : _c.path, item.state.id].filter(Boolean).join(".");
         color(item);
-        const isFoldRecursively = ((_c = item.payload) == null ? void 0 : _c.fold) === 2;
+        const isFoldRecursively = ((_d = item.payload) == null ? void 0 : _d.fold) === 2;
         if (isFoldRecursively) {
           foldRecursively += 1;
         } else if (foldRecursively || initialExpandLevel >= 0 && item.state.depth >= initialExpandLevel) {
@@ -1265,48 +1119,50 @@
         if (isFoldRecursively) foldRecursively -= 1;
         depth -= 1;
       });
-      const nodes = Array.from(container.childNodes).map(
-        (group) => group.firstChild
-      );
-      this._checkImages(container);
-      nodes.forEach((node2) => {
+    }
+    _relayout() {
+      if (!this.state.data) return;
+      this.g.selectAll(childSelector("g")).selectAll(
+        childSelector("foreignObject")
+      ).each(function(d) {
         var _a;
-        (_a = node2.parentNode) == null ? void 0 : _a.append(node2.cloneNode(true));
+        const el = (_a = this.firstChild) == null ? void 0 : _a.firstChild;
+        const newSize = [el.scrollWidth, el.scrollHeight];
+        d.state.size = newSize;
       });
-      walkTree(node, (item, next, parent) => {
+      const { spacingHorizontal, paddingX, spacingVertical } = this.options;
+      const layout = flextree({}).children((d) => {
         var _a;
-        const state = item.state;
-        const rect = state.el.getBoundingClientRect();
-        item.content = state.el.innerHTML;
-        state.size = [
-          Math.ceil(rect.width) + 1,
-          Math.max(Math.ceil(rect.height), nodeMinHeight)
-        ];
-        state.key = [(_a = parent == null ? void 0 : parent.state) == null ? void 0 : _a.id, state.id].filter(Boolean).join(".") + // FIXME: find a way to check content hash
-        item.content;
-        next();
+        if (!((_a = d.payload) == null ? void 0 : _a.fold)) return d.children;
+      }).nodeSize((node) => {
+        const [width, height] = node.data.state.size;
+        return [height, width + (width ? paddingX * 2 : 0) + spacingHorizontal];
+      }).spacing((a, b) => {
+        return a.parent === b.parent ? spacingVertical : spacingVertical * 2;
       });
-      container.remove();
-      style.remove();
-    }
-    _checkImages(container) {
-      container.querySelectorAll("img").forEach((img) => {
-        if (img.width) return;
-        const size = this.imgCache[img.src];
-        if (size == null ? void 0 : size[0]) {
-          [img.width, img.height] = size;
-        } else if (!size) {
-          this._loadImage(img.src);
-        }
+      const tree = layout.hierarchy(this.state.data);
+      layout(tree);
+      const fnodes = tree.descendants();
+      fnodes.forEach((fnode) => {
+        const node = fnode.data;
+        node.state.rect = {
+          x: fnode.y,
+          y: fnode.x,
+          width: fnode.ySize - spacingHorizontal,
+          height: fnode.xSize
+        };
       });
-    }
-    _loadImage(src) {
-      this.imgCache[src] = [0, 0];
-      const img = new Image();
-      img.src = src;
-      img.onload = () => {
-        this.imgCache[src] = [img.naturalWidth, img.naturalHeight];
-        this.debouncedRefresh();
+      this.state.rect = {
+        x1: d32.min(fnodes, (fnode) => fnode.data.state.rect.x) || 0,
+        y1: d32.min(fnodes, (fnode) => fnode.data.state.rect.y) || 0,
+        x2: d32.max(
+          fnodes,
+          (fnode) => fnode.data.state.rect.x + fnode.data.state.rect.width
+        ) || 0,
+        y2: d32.max(
+          fnodes,
+          (fnode) => fnode.data.state.rect.y + fnode.data.state.rect.height
+        ) || 0
       };
     }
     setOptions(opts) {
@@ -1325,161 +1181,147 @@
         this.svg.on("wheel", null);
       }
     }
-    setData(data, opts) {
+    async setData(data, opts) {
       if (opts) this.setOptions(opts);
       if (data) this.state.data = data;
       if (!this.state.data) return;
-      this.initializeData(this.state.data);
+      this._initializeData(this.state.data);
       this.updateStyle();
-      this.renderData();
+      await this.renderData();
     }
-    renderData(originData) {
+    async renderData(originData) {
+      const { paddingX, autoFit, color, maxWidth } = this.options;
       if (!this.state.data) return;
-      const { spacingHorizontal, paddingX, spacingVertical, autoFit, color } = this.options;
-      const layout = flextree({}).children((d) => {
+      const nodes = [];
+      walkTree(this.state.data, (item, next) => {
         var _a;
-        if (!((_a = d.payload) == null ? void 0 : _a.fold)) return d.children;
-      }).nodeSize((node2) => {
-        const [width, height] = node2.data.state.size;
-        return [height, width + (width ? paddingX * 2 : 0) + spacingHorizontal];
-      }).spacing((a, b) => {
-        return a.parent === b.parent ? spacingVertical : spacingVertical * 2;
-      });
-      const tree = layout.hierarchy(this.state.data);
-      layout(tree);
-      const descendants = tree.descendants().reverse();
-      const links = tree.links();
-      const linkShape = d32.linkHorizontal();
-      const minX = d32.min(descendants, (d) => d.x - d.xSize / 2);
-      const maxX = d32.max(descendants, (d) => d.x + d.xSize / 2);
-      const minY = d32.min(descendants, (d) => d.y);
-      const maxY = d32.max(descendants, (d) => d.y + d.ySize - spacingHorizontal);
-      Object.assign(this.state, {
-        minX,
-        maxX,
-        minY,
-        maxY
+        if (!((_a = item.payload) == null ? void 0 : _a.fold)) next();
+        nodes.push(item);
       });
-      if (autoFit) this.fit();
-      const origin = originData && descendants.find((item) => item.data === originData) || tree;
-      const x0 = origin.data.state.x0 ?? origin.x;
-      const y0 = origin.data.state.y0 ?? origin.y;
-      const node = this.g.selectAll(childSelector("g")).data(descendants, (d) => d.data.state.key);
-      const nodeEnter = node.enter().append("g").attr("data-depth", (d) => d.data.state.depth).attr("data-path", (d) => d.data.state.path).attr(
-        "transform",
-        (d) => `translate(${y0 + origin.ySize - d.ySize},${x0 + origin.xSize / 2 - d.xSize})`
-      );
-      const nodeExit = this.transition(node.exit());
-      nodeExit.select("line").attr("x1", (d) => d.ySize - spacingHorizontal).attr("x2", (d) => d.ySize - spacingHorizontal);
-      nodeExit.select("foreignObject").style("opacity", 0);
-      nodeExit.attr(
-        "transform",
-        (d) => `translate(${origin.y + origin.ySize - d.ySize},${origin.x + origin.xSize / 2 - d.xSize})`
-      ).remove();
-      const nodeMerge = node.merge(nodeEnter).attr(
+      const origin = originData || this.state.data;
+      const originRect = origin.state.rect;
+      const mmG = this.g.selectAll(childSelector("g")).data(nodes, (d) => d.state.key);
+      const mmGEnter = mmG.enter().append("g").attr("data-depth", (d) => d.state.depth).attr("data-path", (d) => d.state.path);
+      const mmGExit = mmG.exit();
+      const mmGMerge = mmG.merge(mmGEnter).attr(
         "class",
         (d) => {
           var _a;
-          return ["markmap-node", ((_a = d.data.payload) == null ? void 0 : _a.fold) && "markmap-fold"].filter(Boolean).join(" ");
+          return ["markmap-node", ((_a = d.payload) == null ? void 0 : _a.fold) && "markmap-fold"].filter(Boolean).join(" ");
         }
       );
-      this.transition(nodeMerge).attr(
-        "transform",
-        (d) => `translate(${d.y},${d.x - d.xSize / 2})`
+      const mmLine = mmGMerge.selectAll(childSelector("line")).data(
+        (d) => [d],
+        (d) => d.state.key
       );
-      const line = nodeMerge.selectAll(
+      const mmLineEnter = mmLine.enter().append("line");
+      const mmLineExit = mmGExit.selectAll(
         childSelector("line")
-      ).data(
-        (d) => [d],
-        (d) => d.data.state.key
-      ).join(
-        (enter) => {
-          return enter.append("line").attr("x1", (d) => d.ySize - spacingHorizontal).attr("x2", (d) => d.ySize - spacingHorizontal);
-        },
-        (update) => update,
-        (exit) => exit.remove()
       );
-      this.transition(line).attr("x1", -1).attr("x2", (d) => d.ySize - spacingHorizontal + 2).attr("y1", (d) => d.xSize).attr("y2", (d) => d.xSize).attr("stroke", (d) => color(d.data)).attr("stroke-width", linkWidth);
-      const circle = nodeMerge.selectAll(
+      const mmLineMerge = mmLine.merge(mmLineEnter);
+      const mmCircle = mmGMerge.selectAll(
         childSelector("circle")
       ).data(
         (d) => {
           var _a;
-          return ((_a = d.data.children) == null ? void 0 : _a.length) ? [d] : [];
+          return ((_a = d.children) == null ? void 0 : _a.length) ? [d] : [];
         },
-        (d) => d.data.state.key
+        (d) => d.state.key
       ).join(
         (enter) => {
-          return enter.append("circle").attr("stroke-width", "1.5").attr("cx", (d) => d.ySize - spacingHorizontal).attr("cy", (d) => d.xSize).attr("r", 0).on("click", (e, d) => this.handleClick(e, d)).on("mousedown", stopPropagation);
+          return enter.append("circle").attr("stroke-width", "1.5").attr("r", 0).on("click", (e, d) => this.handleClick(e, d)).on("mousedown", stopPropagation);
         },
         (update) => update,
         (exit) => exit.remove()
       );
-      this.transition(circle).attr("r", 6).attr("cx", (d) => d.ySize - spacingHorizontal).attr("cy", (d) => d.xSize).attr("stroke", (d) => color(d.data)).attr(
+      const observer = this.observer;
+      const mmFo = mmGMerge.selectAll(childSelector("foreignObject")).data(
+        (d) => [d],
+        (d) => d.state.key
+      );
+      const mmFoEnter = mmFo.enter().append("foreignObject").attr("class", "markmap-foreign").attr("x", paddingX).attr("y", 0).style("opacity", 0).on("mousedown", stopPropagation).on("dblclick", stopPropagation);
+      mmFoEnter.append("xhtml:div").append("xhtml:div").html((d) => d.content).attr("xmlns", "http://www.w3.org/1999/xhtml");
+      mmFoEnter.each(function() {
+        var _a;
+        const el = (_a = this.firstChild) == null ? void 0 : _a.firstChild;
+        observer.observe(el);
+      });
+      const mmFoExit = mmGExit.selectAll(
+        childSelector("foreignObject")
+      );
+      mmFoExit.each(function() {
+        var _a;
+        const el = (_a = this.firstChild) == null ? void 0 : _a.firstChild;
+        observer.unobserve(el);
+      });
+      const mmFoMerge = mmFoEnter.merge(mmFo);
+      const links = nodes.flatMap(
+        (node) => {
+          var _a;
+          return ((_a = node.payload) == null ? void 0 : _a.fold) ? [] : node.children.map((child) => ({ source: node, target: child }));
+        }
+      );
+      const mmPath = this.g.selectAll(childSelector("path")).data(links, (d) => d.target.state.key);
+      const mmPathExit = mmPath.exit();
+      const mmPathEnter = mmPath.enter().insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.state.depth).attr("data-path", (d) => d.target.state.path);
+      const mmPathMerge = mmPathEnter.merge(mmPath);
+      this.svg.style(
+        "--markmap-max-width",
+        maxWidth ? `${maxWidth}px` : null
+      );
+      await new Promise(requestAnimationFrame);
+      this._relayout();
+      this.transition(mmGExit).attr("transform", (d) => {
+        const targetX = originRect.x + originRect.width - d.state.rect.width;
+        const targetY = originRect.y + originRect.height / 2 - d.state.rect.height;
+        return `translate(${targetX},${targetY})`;
+      }).remove();
+      mmGEnter.attr(
+        "transform",
+        (d) => `translate(${originRect.x + originRect.width - d.state.rect.width},${originRect.y + originRect.height / 2 - d.state.rect.height})`
+      );
+      this.transition(mmGMerge).attr(
+        "transform",
+        (d) => `translate(${d.state.rect.x},${d.state.rect.y - d.state.rect.height / 2})`
+      );
+      this.transition(mmLineExit).attr("x1", (d) => d.state.rect.width).attr("x2", (d) => d.state.rect.width);
+      mmLineEnter.attr("x1", (d) => d.state.rect.width).attr("x2", (d) => d.state.rect.width);
+      mmLineMerge.attr("y1", (d) => d.state.rect.height).attr("y2", (d) => d.state.rect.height).attr("stroke", (d) => color(d));
+      this.transition(mmLineMerge).attr("x1", -1).attr("x2", (d) => d.state.rect.width + 2).attr("stroke-width", linkWidth);
+      mmCircle.attr("cx", (d) => d.state.rect.width).attr("cy", (d) => d.state.rect.height).attr("stroke", (d) => color(d)).attr(
         "fill",
         (d) => {
           var _a;
-          return ((_a = d.data.payload) == null ? void 0 : _a.fold) && d.data.children ? color(d.data) : "var(--markmap-circle-open-bg)";
+          return ((_a = d.payload) == null ? void 0 : _a.fold) && d.children ? color(d) : "var(--markmap-circle-open-bg)";
         }
       );
-      const foreignObject = nodeMerge.selectAll(
-        childSelector("foreignObject")
-      ).data(
-        (d) => [d],
-        (d) => d.data.state.key
-      ).join(
-        (enter) => {
-          const fo = enter.append("foreignObject").attr("class", "markmap-foreign").attr("x", paddingX).attr("y", 0).style("opacity", 0).on("mousedown", stopPropagation).on("dblclick", stopPropagation);
-          fo.append("xhtml:div").select(function select2(d) {
-            const clone = d.data.state.el.cloneNode(true);
-            this.replaceWith(clone);
-            return clone;
-          }).attr("xmlns", "http://www.w3.org/1999/xhtml");
-          return fo;
-        },
-        (update) => update,
-        (exit) => exit.remove()
-      ).attr(
-        "width",
-        (d) => Math.max(0, d.ySize - spacingHorizontal - paddingX * 2)
-      ).attr("height", (d) => d.xSize);
-      this.transition(foreignObject).style("opacity", 1);
-      const path = this.g.selectAll(
-        childSelector("path")
-      ).data(links, (d) => d.target.data.state.key).join(
-        (enter) => {
-          const source = [
-            y0 + origin.ySize - spacingHorizontal,
-            x0 + origin.xSize / 2
-          ];
-          return enter.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.data.state.depth).attr("data-path", (d) => d.target.data.state.path).attr("d", linkShape({ source, target: source }));
-        },
-        (update) => update,
-        (exit) => {
-          const source = [
-            origin.y + origin.ySize - spacingHorizontal,
-            origin.x + origin.xSize / 2
-          ];
-          return this.transition(exit).attr("d", linkShape({ source, target: source })).remove();
-        }
+      this.transition(mmCircle).attr("r", 6);
+      this.transition(mmFoExit).style("opacity", 0);
+      mmFoMerge.attr("width", (d) => Math.max(0, d.state.rect.width - paddingX * 2)).attr("height", (d) => d.state.rect.height);
+      this.transition(mmFoMerge).style("opacity", 1);
+      const pathOrigin = [
+        originRect.x + originRect.width,
+        originRect.y + originRect.height / 2
+      ];
+      this.transition(mmPathExit).attr("d", linkShape({ source: pathOrigin, target: pathOrigin })).remove();
+      mmPathEnter.attr(
+        "d",
+        linkShape({ source: pathOrigin, target: pathOrigin })
       );
-      this.transition(path).attr("stroke", (d) => color(d.target.data)).attr("stroke-width", (d) => linkWidth(d.target)).attr("d", (d) => {
+      this.transition(mmPathMerge).attr("stroke", (d) => color(d.target)).attr("stroke-width", (d) => linkWidth(d.target)).attr("d", (d) => {
         const origSource = d.source;
         const origTarget = d.target;
         const source = [
-          origSource.y + origSource.ySize - spacingHorizontal,
-          origSource.x + origSource.xSize / 2
+          origSource.state.rect.x + origSource.state.rect.width,
+          origSource.state.rect.y + origSource.state.rect.height / 2
         ];
         const target = [
-          origTarget.y,
-          origTarget.x + origTarget.xSize / 2
+          origTarget.state.rect.x,
+          origTarget.state.rect.y + origTarget.state.rect.height / 2
         ];
         return linkShape({ source, target });
       });
-      descendants.forEach((d) => {
-        d.data.state.x0 = d.x;
-        d.data.state.y0 = d.y;
-      });
+      if (autoFit) this.fit();
     }
     transition(sel) {
       const { duration } = this.options;
@@ -1492,24 +1334,24 @@
       const svgNode = this.svg.node();
       const { width: offsetWidth, height: offsetHeight } = svgNode.getBoundingClientRect();
       const { fitRatio } = this.options;
-      const { minX, maxX, minY, maxY } = this.state;
-      const naturalWidth = maxY - minY;
-      const naturalHeight = maxX - minX;
+      const { x1, y1, x2, y2 } = this.state.rect;
+      const naturalWidth = x2 - x1;
+      const naturalHeight = y2 - y1;
       const scale = Math.min(
         offsetWidth / naturalWidth * fitRatio,
         offsetHeight / naturalHeight * fitRatio,
         maxScale
       );
       const initialZoom = d32.zoomIdentity.translate(
-        (offsetWidth - naturalWidth * scale) / 2 - minY * scale,
-        (offsetHeight - naturalHeight * scale) / 2 - minX * scale
+        (offsetWidth - naturalWidth * scale) / 2 - x1 * scale,
+        (offsetHeight - naturalHeight * scale) / 2 - y1 * scale
       ).scale(scale);
       return this.transition(this.svg).call(this.zoom.transform, initialZoom).end().catch(noop);
     }
     findElement(node) {
       let result;
       this.g.selectAll(childSelector("g")).each(function walk(d) {
-        if (d.data === node) {
+        if (d === node) {
           result = {
             data: d,
             g: this
@@ -1526,16 +1368,15 @@
       const itemData = (_a = this.findElement(node)) == null ? void 0 : _a.data;
       if (!itemData) return;
       const svgNode = this.svg.node();
-      const { spacingHorizontal } = this.options;
       const relRect = svgNode.getBoundingClientRect();
       const transform = d32.zoomTransform(svgNode);
       const [left, right] = [
-        itemData.y,
-        itemData.y + itemData.ySize - spacingHorizontal + 2
+        itemData.state.rect.x,
+        itemData.state.rect.x + itemData.state.rect.width + 2
       ].map((x) => x * transform.k + transform.x);
       const [top, bottom] = [
-        itemData.x - itemData.xSize / 2,
-        itemData.x + itemData.xSize / 2
+        itemData.state.rect.y - itemData.state.rect.height / 2,
+        itemData.state.rect.y + itemData.state.rect.height / 2
       ].map((y) => y * transform.k + transform.y);
       const pd = {
         left: 0,
@@ -1578,8 +1419,7 @@
     static create(svg, opts, data = null) {
       const mm = new Markmap(svg, opts);
       if (data) {
-        mm.setData(data);
-        requestAnimationFrame(() => {
+        mm.setData(data).then(() => {
           mm.fit();
         });
       }
@@ -1595,5 +1435,6 @@
   exports.loadCSS = loadCSS;
   exports.loadJS = loadJS;
   exports.refreshHook = refreshHook;
+  exports.simpleHash = simpleHash;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 })(this.markmap = this.markmap || {}, d3);