markmap-view 0.18.2 → 0.18.4-alpha.3

package/dist/browser/index.js

@@ -1001,7 +1001,8 @@
       this.revokers.push(
         refreshHook.tap(() => {
           this.setData();
-        })
+        }),
+        () => this.observer.disconnect()
       );
     }
     getStyleContent() {
@@ -1144,18 +1145,43 @@
     }
     async renderData(originData) {
       const { paddingX, autoFit, color, maxWidth } = this.options;
-      if (!this.state.data) return;
+      const rootNode = this.state.data;
+      if (!rootNode) return;
+      const nodeMap = {};
+      const parentMap = {};
       const nodes = [];
-      walkTree(this.state.data, (item, next) => {
+      walkTree(rootNode, (item, next, parent) => {
         var _a;
         if (!((_a = item.payload) == null ? void 0 : _a.fold)) next();
+        nodeMap[item.state.id] = item;
+        if (parent) parentMap[item.state.id] = parent.state.id;
         nodes.push(item);
       });
-      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 originMap = {};
+      const sourceRectMap = {};
+      const setOriginNode = (originNode) => {
+        if (!originNode || originMap[originNode.state.id]) return;
+        walkTree(originNode, (item, next) => {
+          originMap[item.state.id] = originNode.state.id;
+          next();
+        });
+      };
+      const getOriginSourceRect = (node) => {
+        const rect = sourceRectMap[originMap[node.state.id]];
+        return rect || rootNode.state.rect;
+      };
+      const getOriginTargetRect = (node) => (nodeMap[originMap[node.state.id]] || rootNode).state.rect;
+      sourceRectMap[rootNode.state.id] = rootNode.state.rect;
+      if (originData) setOriginNode(originData);
+      const mmG = this.g.selectAll(childSelector("g")).each((d) => {
+        sourceRectMap[d.state.id] = d.state.rect;
+      }).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).each((d) => {
+        setOriginNode(nodeMap[parentMap[d.state.id]]);
+      });
+      const mmGExit = mmG.exit().each((d) => {
+        setOriginNode(nodeMap[parentMap[d.state.id]]);
+      });
       const mmGMerge = mmG.merge(mmGEnter).attr(
         "class",
         (d) => {
@@ -1167,25 +1193,22 @@
         (d) => [d],
         (d) => d.state.key
       );
-      const mmLineEnter = mmLine.enter().append("line");
-      const mmLineExit = mmGExit.selectAll(
-        childSelector("line")
-      );
+      const mmLineEnter = mmLine.enter().append("line").attr("stroke", (d) => color(d)).attr("stroke-width", 0);
       const mmLineMerge = mmLine.merge(mmLineEnter);
-      const mmCircle = mmGMerge.selectAll(
-        childSelector("circle")
-      ).data(
+      const mmCircle = mmGMerge.selectAll(childSelector("circle")).data(
         (d) => {
           var _a;
           return ((_a = d.children) == null ? void 0 : _a.length) ? [d] : [];
         },
         (d) => d.state.key
-      ).join(
-        (enter) => {
-          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()
+      );
+      const mmCircleEnter = mmCircle.enter().append("circle").attr("stroke-width", 0).attr("r", 0).on("click", (e, d) => this.handleClick(e, d)).on("mousedown", stopPropagation);
+      const mmCircleMerge = mmCircleEnter.merge(mmCircle).attr("stroke", (d) => color(d)).attr(
+        "fill",
+        (d) => {
+          var _a;
+          return ((_a = d.payload) == null ? void 0 : _a.fold) && d.children ? color(d) : "var(--markmap-circle-open-bg)";
+        }
       );
       const observer = this.observer;
       const mmFo = mmGMerge.selectAll(childSelector("foreignObject")).data(
@@ -1216,7 +1239,14 @@
       );
       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 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).attr("d", (d) => {
+        const originRect = getOriginSourceRect(d.target);
+        const pathOrigin = [
+          originRect.x + originRect.width,
+          originRect.y + originRect.height
+        ];
+        return linkShape({ source: pathOrigin, target: pathOrigin });
+      }).attr("stroke-width", 0);
       const mmPathMerge = mmPathEnter.merge(mmPath);
       this.svg.style(
         "--markmap-max-width",
@@ -1224,43 +1254,44 @@
       );
       await new Promise(requestAnimationFrame);
       this._relayout();
+      mmGEnter.attr("transform", (d) => {
+        const originRect = getOriginSourceRect(d);
+        return `translate(${originRect.x + originRect.width - d.state.rect.width},${originRect.y + originRect.height - d.state.rect.height})`;
+      });
       this.transition(mmGExit).attr("transform", (d) => {
-        const targetX = originRect.x + originRect.width - d.state.rect.width;
-        const targetY = originRect.y + originRect.height - d.state.rect.height;
+        const targetRect = getOriginTargetRect(d);
+        const targetX = targetRect.x + targetRect.width - d.state.rect.width;
+        const targetY = targetRect.y + targetRect.height - 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 - d.state.rect.height})`
-      );
       this.transition(mmGMerge).attr(
         "transform",
         (d) => `translate(${d.state.rect.x},${d.state.rect.y})`
       );
-      this.transition(mmLineExit).attr("x1", (d) => d.state.rect.width).attr("x2", (d) => d.state.rect.width);
+      const mmLineExit = mmGExit.selectAll(
+        childSelector("line")
+      );
+      this.transition(mmLineExit).attr("x1", (d) => d.state.rect.width).attr("stroke-width", 0);
       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.payload) == null ? void 0 : _a.fold) && d.children ? color(d) : "var(--markmap-circle-open-bg)";
-        }
+      mmLineMerge.attr("y1", (d) => d.state.rect.height).attr("y2", (d) => d.state.rect.height);
+      this.transition(mmLineMerge).attr("x1", -1).attr("x2", (d) => d.state.rect.width + 2).attr("stroke", (d) => color(d)).attr("stroke-width", linkWidth);
+      const mmCircleExit = mmGExit.selectAll(
+        childSelector("circle")
       );
-      this.transition(mmCircle).attr("r", 6);
+      this.transition(mmCircleExit).attr("r", 0).attr("stroke-width", 0);
+      mmCircleMerge.attr("cx", (d) => d.state.rect.width).attr("cy", (d) => d.state.rect.height);
+      this.transition(mmCircleMerge).attr("r", 6).attr("stroke-width", "1.5");
       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
-      ];
-      this.transition(mmPathExit).attr("d", linkShape({ source: pathOrigin, target: pathOrigin })).remove();
-      mmPathEnter.attr(
-        "d",
-        linkShape({ source: pathOrigin, target: pathOrigin })
-      );
+      this.transition(mmPathExit).attr("d", (d) => {
+        const targetRect = getOriginTargetRect(d.target);
+        const pathTarget = [
+          targetRect.x + targetRect.width,
+          targetRect.y + targetRect.height
+        ];
+        return linkShape({ source: pathTarget, target: pathTarget });
+      }).attr("stroke-width", 0).remove();
       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;