Merge pull request #123 from jongalloway/pillars-redesign

Redesign pillars layout with bold headers and vibrant title colors

Author: jongalloway

src/DiagramForge/Layout/DefaultLayoutEngine.Conceptual.cs

@@ -25,6 +25,7 @@ private delegate void ConceptualLayoutHandler(
             ["pyramid"] = LayoutPyramidDiagram,
             ["radial"] = LayoutRadialDiagram,
             ["snake"] = LayoutSnakeDiagram,
+            ["tablist"] = LayoutTabListDiagram,
             ["tree"] = LayoutTreeDiagram,
         }.ToFrozenDictionary(StringComparer.OrdinalIgnoreCase);
 

src/DiagramForge/Layout/DefaultLayoutEngine.Pillars.cs

@@ -26,12 +26,20 @@ private static void LayoutPillarsDiagram(
                 g => g.Key,
                 g => g.OrderBy(n => GetMetadataInt(n.Metadata, "pillars:segmentIndex")).ToList());
 
+        // ── Title font is 20% larger and bold ──────────────────────────────────
+        double titleFontSize = Math.Round(theme.FontSize * 1.2, 1);
+
         double titleOffset = !string.IsNullOrWhiteSpace(diagram.Title) ? theme.TitleFontSize + 8 : 0;
-        double maxTextWidth = diagram.Nodes.Values.Max(n =>
-            EnsureIconWidth(n, theme, EstimateTextWidth(n.Label.Text, n.Label.FontSize ?? theme.FontSize) + theme.NodePadding * 2.5));
-        double colWidth = Math.Max(minW + 24, maxTextWidth);
+        double maxSegTextWidth = diagram.Nodes.Values
+            .Where(n => n.Metadata.TryGetValue("pillars:kind", out var kind) && "segment".Equals(kind as string, StringComparison.Ordinal))
+            .Select(n => EnsureIconWidth(n, theme, EstimateTextWidth(n.Label.Text, n.Label.FontSize ?? theme.FontSize) + theme.NodePadding * 2.5))
+            .DefaultIfEmpty(0)
+            .Max();
+        double maxTitleTextWidth = titleNodes.Max(n =>
+            EnsureIconWidth(n, theme, EstimateTextWidth(n.Label.Text, titleFontSize) + theme.NodePadding * 2.5));
+        double colWidth = Math.Max(minW + 24, Math.Max(maxSegTextWidth, maxTitleTextWidth));
 
-        double titleH = titleNodes.Max(node => EnsureIconHeight(node, Math.Max(nodeH, (theme.FontSize * 1.15) + theme.NodePadding * 2.2)));
+        double titleH = titleNodes.Max(node => EnsureIconHeight(node, Math.Max(nodeH, (titleFontSize * 1.15) + theme.NodePadding * 2.2)));
         double segH = diagram.Nodes.Values
             .Where(n => n.Metadata.TryGetValue("pillars:kind", out var kind) && "segment".Equals(kind as string, StringComparison.Ordinal))
             .Select(node => EnsureIconHeight(node, nodeH))
@@ -57,19 +65,30 @@ private static void LayoutPillarsDiagram(
                 ? theme.NodeStrokePalette[i % theme.NodeStrokePalette.Count]
                 : ColorUtils.Darken(pillarFill, 0.18);
 
+            // ── Title: vibrant fill, contrast text, bolder border ──────────────
+            string titleFill = ColorUtils.Blend(ColorUtils.Vibrant(pillarFill, 2.0), pillarFill, 0.5);
+            string titleTextColor = ColorUtils.ChooseTextColor(titleFill);
+
             titleNode.Shape = Shape.RoundedRectangle;
             titleNode.Width = colWidth;
             titleNode.Height = titleH;
             titleNode.X = colX;
             titleNode.Y = curY;
-            titleNode.FillColor = pillarFill;
-            titleNode.StrokeColor = pillarStroke;
+            titleNode.FillColor = titleFill;
+            titleNode.StrokeColor = ColorUtils.Darken(titleFill, 0.20);
+            titleNode.Metadata["render:strokeWidth"] = theme.StrokeWidth * 2.5;
+            titleNode.Label.FontSize = titleFontSize;
+            titleNode.Label.FontWeight = "bold";
+            titleNode.Label.Color = titleTextColor;
+            // Disable the gradient on title nodes so the solid saturated fill shows
+            titleNode.Metadata["render:noGradient"] = true;
             SetLabelCenter(titleNode, colWidth / 2, titleH / 2);
             curY += titleH + segGap;
 
             if (segmentsByPillar.TryGetValue(pillarIdx, out var segments))
             {
                 string segFill = ColorUtils.Lighten(pillarFill, 0.25);
+                string segStroke = ColorUtils.Lighten(pillarStroke, 0.30);
 
                 foreach (var segNode in segments)
                 {
@@ -79,7 +98,7 @@ private static void LayoutPillarsDiagram(
                     segNode.X = colX;
                     segNode.Y = curY;
                     segNode.FillColor = segFill;
-                    segNode.StrokeColor = pillarStroke;
+                    segNode.StrokeColor = segStroke;
                     SetLabelCenter(segNode, colWidth / 2, segH / 2);
                     curY += segH + segGap;
                 }