@diagrammo/dgmo 0.2.8 → 0.2.9

package/dist/index.d.cts

@@ -171,6 +171,7 @@ interface ChartDataPoint {
 interface ParsedChart {
     type: ChartType;
     title?: string;
+    titleLineNumber?: number;
     series?: string;
     xlabel?: string;
     ylabel?: string;
@@ -235,6 +236,7 @@ interface ParsedHeatmapRow {
 interface ParsedEChart {
     type: EChartsChartType;
     title?: string;
+    titleLineNumber?: number;
     series?: string;
     seriesNames?: string[];
     seriesNameColors?: (string | undefined)[];
@@ -384,6 +386,7 @@ interface D3ExportDimensions {
 interface ParsedD3 {
     type: D3ChartType | null;
     title: string | null;
+    titleLineNumber: number | null;
     orientation: 'horizontal' | 'vertical';
     periods: string[];
     data: D3DataItem[];
@@ -565,6 +568,7 @@ interface SequenceGroup {
  */
 interface ParsedSequenceDgmo {
     title: string | null;
+    titleLineNumber: number | null;
     participants: SequenceParticipant[];
     messages: SequenceMessage[];
     elements: SequenceElement[];
@@ -661,6 +665,7 @@ interface GraphGroup {
 interface ParsedGraph {
     type: 'flowchart';
     title?: string;
+    titleLineNumber?: number;
     direction: GraphDirection;
     nodes: GraphNode[];
     edges: GraphEdge[];

package/dist/index.d.ts

@@ -171,6 +171,7 @@ interface ChartDataPoint {
 interface ParsedChart {
     type: ChartType;
     title?: string;
+    titleLineNumber?: number;
     series?: string;
     xlabel?: string;
     ylabel?: string;
@@ -235,6 +236,7 @@ interface ParsedHeatmapRow {
 interface ParsedEChart {
     type: EChartsChartType;
     title?: string;
+    titleLineNumber?: number;
     series?: string;
     seriesNames?: string[];
     seriesNameColors?: (string | undefined)[];
@@ -384,6 +386,7 @@ interface D3ExportDimensions {
 interface ParsedD3 {
     type: D3ChartType | null;
     title: string | null;
+    titleLineNumber: number | null;
     orientation: 'horizontal' | 'vertical';
     periods: string[];
     data: D3DataItem[];
@@ -565,6 +568,7 @@ interface SequenceGroup {
  */
 interface ParsedSequenceDgmo {
     title: string | null;
+    titleLineNumber: number | null;
     participants: SequenceParticipant[];
     messages: SequenceMessage[];
     elements: SequenceElement[];
@@ -661,6 +665,7 @@ interface GraphGroup {
 interface ParsedGraph {
     type: 'flowchart';
     title?: string;
+    titleLineNumber?: number;
     direction: GraphDirection;
     nodes: GraphNode[];
     edges: GraphEdge[];

package/dist/index.js

@@ -196,6 +196,7 @@ function measureIndent(line3) {
 function parseSequenceDgmo(content) {
   const result = {
     title: null,
+    titleLineNumber: null,
     participants: [],
     messages: [],
     elements: [],
@@ -299,6 +300,7 @@ function parseSequenceDgmo(content) {
         }
         if (key === "title") {
           result.title = value;
+          result.titleLineNumber = lineNumber;
           continue;
         }
         result.options[key] = value;
@@ -967,6 +969,7 @@ function parseFlowchart(content, palette) {
       }
       if (key === "title") {
         result.title = value;
+        result.titleLineNumber = lineNumber;
         continue;
       }
       if (key === "direction") {
@@ -2405,7 +2408,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();
@@ -2418,7 +2421,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) {
@@ -2452,7 +2465,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);
@@ -3143,7 +3156,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;
@@ -3662,6 +3678,7 @@ function parseChart(content, palette) {
     }
     if (key === "title") {
       result.title = value;
+      result.titleLineNumber = lineNumber;
       continue;
     }
     if (key === "xlabel") {
@@ -3803,6 +3820,7 @@ function parseEChart(content, palette) {
     }
     if (key === "title") {
       result.title = value;
+      result.titleLineNumber = lineNumber;
       continue;
     }
     if (key === "series") {
@@ -5164,6 +5182,7 @@ function parseD3(content, palette) {
   const result = {
     type: null,
     title: null,
+    titleLineNumber: null,
     orientation: "horizontal",
     periods: [],
     data: [],
@@ -5425,6 +5444,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;
         }
@@ -5787,7 +5807,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);
@@ -5996,7 +6026,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());
@@ -6548,7 +6588,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,
@@ -6642,7 +6692,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,
@@ -6765,7 +6825,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,
@@ -6910,7 +6980,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,
@@ -7061,7 +7141,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",
@@ -7111,7 +7201,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",
@@ -7321,7 +7414,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;
@@ -7499,10 +7602,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);