@diagrammo/dgmo 0.2.8 → 0.2.9

package/dist/index.cjs

@@ -218,6 +218,7 @@ function measureIndent(line3) {
 function parseSequenceDgmo(content) {
   const result = {
     title: null,
+    titleLineNumber: null,
     participants: [],
     messages: [],
     elements: [],
@@ -321,6 +322,7 @@ function parseSequenceDgmo(content) {
         }
         if (key === "title") {
           result.title = value;
+          result.titleLineNumber = lineNumber;
           continue;
         }
         result.options[key] = value;
@@ -989,6 +991,7 @@ function parseFlowchart(content, palette) {
       }
       if (key === "title") {
         result.title = value;
+        result.titleLineNumber = lineNumber;
         continue;
       }
       if (key === "direction") {
@@ -2425,7 +2428,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
   const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
   const offsetY = (height - scaledH) / 2;
-  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).style("background", palette.bg).style("font-family", FONT_FAMILY);
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "fc-arrow").attr("viewBox", `0 0 ${ARROWHEAD_W} ${ARROWHEAD_H}`).attr("refX", ARROWHEAD_W).attr("refY", ARROWHEAD_H / 2).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`).attr("fill", palette.textMuted);
   const edgeColors = /* @__PURE__ */ new Set();
@@ -2438,7 +2441,17 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
   }
   const mainG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
   if (graph.title) {
-    mainG.append("text").attr("x", diagramW / 2).attr("y", TITLE_FONT_SIZE).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", "bold").attr("class", "fc-title").text(graph.title);
+    const titleEl = mainG.append("text").attr("x", diagramW / 2).attr("y", TITLE_FONT_SIZE).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", "bold").attr("class", "fc-title chart-title").style("cursor", onClickItem && graph.titleLineNumber ? "pointer" : "default").text(graph.title);
+    if (graph.titleLineNumber) {
+      titleEl.attr("data-line-number", graph.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(graph.titleLineNumber)).on("mouseenter", function() {
+          d3Selection.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection.select(this).attr("opacity", 1);
+        });
+      }
+    }
   }
   const contentG = mainG.append("g").attr("transform", `translate(0, ${titleOffset})`);
   for (const group of layout.groups) {
@@ -2472,7 +2485,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
     }
   }
   for (const node of layout.nodes) {
-    const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "fc-node").attr("data-line-number", String(node.lineNumber));
+    const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "fc-node").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
     if (onClickItem) {
       nodeG.style("cursor", "pointer").on("click", () => {
         onClickItem(node.lineNumber);
@@ -3164,7 +3177,10 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     `0,0 ${ARROWHEAD_SIZE},${ARROWHEAD_SIZE / 2} 0,${ARROWHEAD_SIZE}`
   ).attr("fill", "none").attr("stroke", palette.text).attr("stroke-width", 1.2);
   if (title) {
-    svg.append("text").attr("x", svgWidth / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", 20).attr("font-weight", "bold").text(title);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", svgWidth / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", 20).attr("font-weight", "bold").text(title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+    }
   }
   for (const group of groups) {
     if (group.participantIds.length === 0) continue;
@@ -3754,6 +3770,7 @@ function parseChart(content, palette) {
     }
     if (key === "title") {
       result.title = value;
+      result.titleLineNumber = lineNumber;
       continue;
     }
     if (key === "xlabel") {
@@ -3895,6 +3912,7 @@ function parseEChart(content, palette) {
     }
     if (key === "title") {
       result.title = value;
+      result.titleLineNumber = lineNumber;
       continue;
     }
     if (key === "series") {
@@ -5256,6 +5274,7 @@ function parseD3(content, palette) {
   const result = {
     type: null,
     title: null,
+    titleLineNumber: null,
     orientation: "horizontal",
     periods: [],
     data: [],
@@ -5517,6 +5536,7 @@ function parseD3(content, palette) {
       }
       if (key === "title") {
         result.title = line3.substring(colonIndex + 1).trim();
+        result.titleLineNumber = lineNumber;
         if (result.type === "quadrant") {
           result.quadrantTitleLineNumber = lineNumber;
         }
@@ -5879,7 +5899,17 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem, expor
   const g = svg.append("g").attr("transform", `translate(${SLOPE_MARGIN.left},${SLOPE_MARGIN.top})`);
   const tooltip = createTooltip(container, palette, isDark);
   if (title) {
-    svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+          d3Selection3.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection3.select(this).attr("opacity", 1);
+        });
+      }
+    }
   }
   for (const period of periods) {
     const x = xScale(period);
@@ -6088,7 +6118,17 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
   const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
   if (title) {
-    svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+          d3Selection3.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection3.select(this).attr("opacity", 1);
+        });
+      }
+    }
   }
   const neighbors = /* @__PURE__ */ new Map();
   for (const node of nodes) neighbors.set(node, /* @__PURE__ */ new Set());
@@ -6640,7 +6680,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
       const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
       if (title) {
-        svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
+        const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+        if (parsed.titleLineNumber) {
+          titleEl.attr("data-line-number", parsed.titleLineNumber);
+          if (onClickItem) {
+            titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+              d3Selection3.select(this).attr("opacity", 0.7);
+            }).on("mouseleave", function() {
+              d3Selection3.select(this).attr("opacity", 1);
+            });
+          }
+        }
       }
       renderEras(
         g,
@@ -6734,7 +6784,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
       const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
       if (title) {
-        svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
+        const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+        if (parsed.titleLineNumber) {
+          titleEl.attr("data-line-number", parsed.titleLineNumber);
+          if (onClickItem) {
+            titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+              d3Selection3.select(this).attr("opacity", 0.7);
+            }).on("mouseleave", function() {
+              d3Selection3.select(this).attr("opacity", 1);
+            });
+          }
+        }
       }
       renderEras(
         g,
@@ -6857,7 +6917,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
     if (title) {
-      svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
+      const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+      if (parsed.titleLineNumber) {
+        titleEl.attr("data-line-number", parsed.titleLineNumber);
+        if (onClickItem) {
+          titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+            d3Selection3.select(this).attr("opacity", 0.7);
+          }).on("mouseleave", function() {
+            d3Selection3.select(this).attr("opacity", 1);
+          });
+        }
+      }
     }
     renderEras(
       g,
@@ -7002,7 +7072,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
     if (title) {
-      svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
+      const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+      if (parsed.titleLineNumber) {
+        titleEl.attr("data-line-number", parsed.titleLineNumber);
+        if (onClickItem) {
+          titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+            d3Selection3.select(this).attr("opacity", 0.7);
+          }).on("mouseleave", function() {
+            d3Selection3.select(this).attr("opacity", 1);
+          });
+        }
+      }
     }
     renderEras(
       g,
@@ -7153,7 +7233,17 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem, expor
   const rotateFn = getRotateFn(cloudOptions.rotate);
   const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   if (title) {
-    svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+          d3Selection3.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection3.select(this).attr("opacity", 1);
+        });
+      }
+    }
   }
   const g = svg.append("g").attr(
     "transform",
@@ -7203,7 +7293,10 @@ function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
     const rotateFn = getRotateFn(cloudOptions.rotate);
     const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     if (title) {
-      svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
+      const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
+      if (parsed.titleLineNumber) {
+        titleEl.attr("data-line-number", parsed.titleLineNumber);
+      }
     }
     const g = svg.append("g").attr(
       "transform",
@@ -7413,7 +7506,17 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const tooltip = createTooltip(container, palette, isDark);
   if (title) {
-    svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+          d3Selection3.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection3.select(this).attr("opacity", 1);
+        });
+      }
+    }
   }
   const defs = svg.append("defs");
   const pad = 20;
@@ -7591,10 +7694,13 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const tooltip = createTooltip(container, palette, isDark);
   if (title) {
-    const titleText = svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style(
+    const titleText = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style(
       "cursor",
       onClickItem && quadrantTitleLineNumber ? "pointer" : "default"
     ).text(title);
+    if (quadrantTitleLineNumber) {
+      titleText.attr("data-line-number", quadrantTitleLineNumber);
+    }
     if (onClickItem && quadrantTitleLineNumber) {
       titleText.on("click", () => onClickItem(quadrantTitleLineNumber)).on("mouseenter", function() {
         d3Selection3.select(this).attr("opacity", 0.7);