@diagrammo/dgmo 0.2.8 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/chart.ts

@@ -23,6 +23,7 @@ export interface ChartDataPoint {
 export interface ParsedChart {
   type: ChartType;
   title?: string;
+  titleLineNumber?: number;
   series?: string;
   xlabel?: string;
   ylabel?: string;
@@ -120,6 +121,7 @@ export function parseChart(
 
     if (key === 'title') {
       result.title = value;
+      result.titleLineNumber = lineNumber;
       continue;
     }
 

package/src/d3.ts

@@ -139,6 +139,7 @@ export interface D3ExportDimensions {
 export interface ParsedD3 {
   type: D3ChartType | null;
   title: string | null;
+  titleLineNumber: number | null;
   orientation: 'horizontal' | 'vertical';
   periods: string[];
   data: D3DataItem[];
@@ -265,6 +266,7 @@ export function parseD3(content: string, palette?: PaletteColors): ParsedD3 {
   const result: ParsedD3 = {
     type: null,
     title: null,
+    titleLineNumber: null,
     orientation: 'horizontal',
     periods: [],
     data: [],
@@ -609,6 +611,7 @@ export function parseD3(content: string, palette?: PaletteColors): ParsedD3 {
 
       if (key === 'title') {
         result.title = line.substring(colonIndex + 1).trim();
+        result.titleLineNumber = lineNumber;
         if (result.type === 'quadrant') {
           result.quadrantTitleLineNumber = lineNumber;
         }
@@ -1120,15 +1123,27 @@ export function renderSlopeChart(
 
   // Title
   if (title) {
-    svg
+    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 () { d3Selection.select(this).attr('opacity', 0.7); })
+          .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+      }
+    }
   }
 
   // Period column headers
@@ -1501,15 +1516,27 @@ export function renderArcDiagram(
 
   // Title
   if (title) {
-    svg
+    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 () { d3Selection.select(this).attr('opacity', 0.7); })
+          .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+      }
+    }
   }
 
   // Build adjacency map for hover interactions
@@ -2745,15 +2772,27 @@ export function renderTimeline(
         .attr('transform', `translate(${margin.left},${margin.top})`);
 
       if (title) {
-        svg
+        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 () { d3Selection.select(this).attr('opacity', 0.7); })
+              .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+          }
+        }
       }
 
       renderEras(
@@ -2936,15 +2975,27 @@ export function renderTimeline(
         .attr('transform', `translate(${margin.left},${margin.top})`);
 
       if (title) {
-        svg
+        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 () { d3Selection.select(this).attr('opacity', 0.7); })
+              .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+          }
+        }
       }
 
       renderEras(
@@ -3188,15 +3239,27 @@ export function renderTimeline(
       .attr('transform', `translate(${margin.left},${margin.top})`);
 
     if (title) {
-      svg
+      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 () { d3Selection.select(this).attr('opacity', 0.7); })
+            .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+        }
+      }
     }
 
     renderEras(
@@ -3472,15 +3535,27 @@ export function renderTimeline(
       .attr('transform', `translate(${margin.left},${margin.top})`);
 
     if (title) {
-      svg
+      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 () { d3Selection.select(this).attr('opacity', 0.7); })
+            .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+        }
+      }
     }
 
     renderEras(
@@ -3767,15 +3842,27 @@ export function renderWordCloud(
     .style('background', bgColor);
 
   if (title) {
-    svg
+    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 () { d3Selection.select(this).attr('opacity', 0.7); })
+          .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+      }
+    }
   }
 
   const g = svg
@@ -3872,8 +3959,9 @@ function renderWordCloudAsync(
       .style('background', bgColor);
 
     if (title) {
-      svg
+      const titleEl = svg
         .append('text')
+        .attr('class', 'chart-title')
         .attr('x', width / 2)
         .attr('y', 30)
         .attr('text-anchor', 'middle')
@@ -3881,6 +3969,10 @@ function renderWordCloudAsync(
         .attr('font-size', '20px')
         .attr('font-weight', '700')
         .text(title);
+
+      if (parsed.titleLineNumber) {
+        titleEl.attr('data-line-number', parsed.titleLineNumber);
+      }
     }
 
     const g = svg
@@ -4217,15 +4309,27 @@ export function renderVenn(
 
   // Title
   if (title) {
-    svg
+    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 () { d3Selection.select(this).attr('opacity', 0.7); })
+          .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+      }
+    }
   }
 
   // ── Clip-path definitions ──
@@ -4593,6 +4697,7 @@ export function renderQuadrant(
   if (title) {
     const titleText = svg
       .append('text')
+      .attr('class', 'chart-title')
       .attr('x', width / 2)
       .attr('y', 30)
       .attr('text-anchor', 'middle')
@@ -4605,6 +4710,10 @@ export function renderQuadrant(
       )
       .text(title);
 
+    if (quadrantTitleLineNumber) {
+      titleText.attr('data-line-number', quadrantTitleLineNumber);
+    }
+
     if (onClickItem && quadrantTitleLineNumber) {
       titleText
         .on('click', () => onClickItem(quadrantTitleLineNumber))

package/src/echarts.ts

@@ -54,6 +54,7 @@ export interface ParsedHeatmapRow {
 export interface ParsedEChart {
   type: EChartsChartType;
   title?: string;
+  titleLineNumber?: number;
   series?: string;
   seriesNames?: string[];
   seriesNameColors?: (string | undefined)[];
@@ -174,6 +175,7 @@ export function parseEChart(
 
     if (key === 'title') {
       result.title = value;
+      result.titleLineNumber = lineNumber;
       continue;
     }
 

package/src/graph/flowchart-parser.ts

@@ -436,6 +436,7 @@ export function parseFlowchart(
 
       if (key === 'title') {
         result.title = value;
+        result.titleLineNumber = lineNumber;
         continue;
       }
 

package/src/graph/flowchart-renderer.ts

@@ -257,7 +257,6 @@ export function renderFlowchart(
     .append('svg')
     .attr('width', width)
     .attr('height', height)
-    .style('background', palette.bg)
     .style('font-family', FONT_FAMILY);
 
   // Defs: arrowhead markers
@@ -305,7 +304,7 @@ export function renderFlowchart(
 
   // Title
   if (graph.title) {
-    mainG
+    const titleEl = mainG
       .append('text')
       .attr('x', diagramW / 2)
       .attr('y', TITLE_FONT_SIZE)
@@ -313,8 +312,19 @@ export function renderFlowchart(
       .attr('fill', palette.text)
       .attr('font-size', TITLE_FONT_SIZE)
       .attr('font-weight', 'bold')
-      .attr('class', 'fc-title')
+      .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); });
+      }
+    }
   }
 
   // Content group (offset by title)
@@ -425,7 +435,8 @@ export function renderFlowchart(
       .append('g')
       .attr('transform', `translate(${node.x}, ${node.y})`)
       .attr('class', 'fc-node')
-      .attr('data-line-number', String(node.lineNumber));
+      .attr('data-line-number', String(node.lineNumber))
+      .attr('data-node-id', node.id);
 
     if (onClickItem) {
       nodeG.style('cursor', 'pointer').on('click', () => {

package/src/graph/types.ts

@@ -36,6 +36,7 @@ export interface GraphGroup {
 export interface ParsedGraph {
   type: 'flowchart';
   title?: string;
+  titleLineNumber?: number;
   direction: GraphDirection;
   nodes: GraphNode[];
   edges: GraphEdge[];

package/src/sequence/parser.ts

@@ -133,6 +133,7 @@ export interface SequenceGroup {
  */
 export interface ParsedSequenceDgmo {
   title: string | null;
+  titleLineNumber: number | null;
   participants: SequenceParticipant[];
   messages: SequenceMessage[];
   elements: SequenceElement[];
@@ -227,6 +228,7 @@ function measureIndent(line: string): number {
 export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
   const result: ParsedSequenceDgmo = {
     title: null,
+    titleLineNumber: null,
     participants: [],
     messages: [],
     elements: [],
@@ -367,6 +369,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
 
       if (key === 'title') {
         result.title = value;
+        result.titleLineNumber = lineNumber;
         continue;
       }
 

package/src/sequence/renderer.ts

@@ -1229,8 +1229,9 @@ export function renderSequenceDiagram(
 
   // Render title
   if (title) {
-    svg
+    const titleEl = svg
       .append('text')
+      .attr('class', 'chart-title')
       .attr('x', svgWidth / 2)
       .attr('y', 30)
       .attr('text-anchor', 'middle')
@@ -1238,6 +1239,10 @@ export function renderSequenceDiagram(
       .attr('font-size', 20)
       .attr('font-weight', 'bold')
       .text(title);
+
+    if (parsed.titleLineNumber) {
+      titleEl.attr('data-line-number', parsed.titleLineNumber);
+    }
   }
 
   // Render group boxes (behind participant shapes)