markmap-view 0.18.0 → 0.18.3

package/dist/browser/index.js

@@ -978,6 +978,7 @@
         if (isMacintosh ? e.metaKey : e.ctrlKey) recursive = !recursive;
         this.toggleNode(d, recursive);
       };
+      this.ensureView = this.ensureVisible;
       this.svg = svg.datum ? svg : d32.select(svg);
       this.styleNode = this.svg.append("style");
       this.zoom = d32.zoom().filter((event) => {
@@ -1099,7 +1100,7 @@
         const node = fnode.data;
         node.state.rect = {
           x: fnode.y,
-          y: fnode.x,
+          y: fnode.x - fnode.xSize / 2,
           width: fnode.ySize - spacingHorizontal,
           height: fnode.xSize
         };
@@ -1166,25 +1167,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(
@@ -1215,7 +1213,11 @@
       );
       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 pathOrigin = [
+        originRect.x + originRect.width,
+        originRect.y + originRect.height
+      ];
+      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", linkShape({ source: pathOrigin, target: pathOrigin })).attr("stroke-width", 0);
       const mmPathMerge = mmPathEnter.merge(mmPath);
       this.svg.style(
         "--markmap-max-width",
@@ -1223,53 +1225,51 @@
       );
       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();
+      const targetRect = origin.state.rect;
       mmGEnter.attr(
         "transform",
-        (d) => `translate(${originRect.x + originRect.width - d.state.rect.width},${originRect.y + originRect.height / 2 - d.state.rect.height})`
+        (d) => `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 = targetRect.x + targetRect.width - d.state.rect.width;
+        const targetY = targetRect.y + targetRect.height - d.state.rect.height;
+        return `translate(${targetX},${targetY})`;
+      }).remove();
       this.transition(mmGMerge).attr(
         "transform",
-        (d) => `translate(${d.state.rect.x},${d.state.rect.y - d.state.rect.height / 2})`
+        (d) => `translate(${d.state.rect.x},${d.state.rect.y})`
+      );
+      const mmLineExit = mmGExit.selectAll(
+        childSelector("line")
       );
-      this.transition(mmLineExit).attr("x1", (d) => d.state.rect.width).attr("x2", (d) => d.state.rect.width);
+      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 / 2
+      const pathTarget = [
+        targetRect.x + targetRect.width,
+        targetRect.y + targetRect.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", 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;
         const source = [
           origSource.state.rect.x + origSource.state.rect.width,
-          origSource.state.rect.y + origSource.state.rect.height / 2
+          origSource.state.rect.y + origSource.state.rect.height
         ];
         const target = [
           origTarget.state.rect.x,
-          origTarget.state.rect.y + origTarget.state.rect.height / 2
+          origTarget.state.rect.y + origTarget.state.rect.height
         ];
         return linkShape({ source, target });
       });
@@ -1315,7 +1315,7 @@
     /**
      * Pan the content to make the provided node visible in the viewport.
      */
-    async ensureView(node, padding) {
+    async ensureVisible(node, padding) {
       var _a;
       const itemData = (_a = this.findElement(node)) == null ? void 0 : _a.data;
       if (!itemData) return;
@@ -1327,8 +1327,8 @@
         itemData.state.rect.x + itemData.state.rect.width + 2
       ].map((x) => x * transform.k + transform.x);
       const [top, bottom] = [
-        itemData.state.rect.y - itemData.state.rect.height / 2,
-        itemData.state.rect.y + itemData.state.rect.height / 2
+        itemData.state.rect.y,
+        itemData.state.rect.y + itemData.state.rect.height
       ].map((y) => y * transform.k + transform.y);
       const pd = {
         left: 0,
@@ -1346,6 +1346,31 @@
         return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
       }
     }
+    async centerNode(node, padding) {
+      var _a;
+      const itemData = (_a = this.findElement(node)) == null ? void 0 : _a.data;
+      if (!itemData) return;
+      const svgNode = this.svg.node();
+      const relRect = svgNode.getBoundingClientRect();
+      const transform = d32.zoomTransform(svgNode);
+      const x = (itemData.state.rect.x + itemData.state.rect.width / 2) * transform.k + transform.x;
+      const y = (itemData.state.rect.y + itemData.state.rect.height / 2) * transform.k + transform.y;
+      const pd = {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        ...padding
+      };
+      const cx = (pd.left + relRect.width - pd.right) / 2;
+      const cy = (pd.top + relRect.height - pd.bottom) / 2;
+      const dx = (cx - x) / transform.k;
+      const dy = (cy - y) / transform.k;
+      if (dx || dy) {
+        const newTransform = transform.translate(dx, dy);
+        return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
+      }
+    }
     /**
      * Scale content with it pinned at the center of the viewport.
      */