From 11e12e1f907f620fed4aeac493ef092596390d7b Mon Sep 17 00:00:00 2001
From: Ivan Donchenko <130827740+moarsoarse@users.noreply.github.com>
Date: Fri, 31 May 2024 12:09:23 +0000
Subject: [PATCH] ParentCell title longer than its width fixed

(cherry picked from commit 31fa538d8def130e145c9dc087ad32aeb93eb762)
---
 src/js/structurizr-diagram.js | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/js/structurizr-diagram.js b/src/js/structurizr-diagram.js
index 009912d..3a1fce0 100644
--- a/src/js/structurizr-diagram.js
+++ b/src/js/structurizr-diagram.js
@@ -3684,7 +3684,9 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
                 padding = { top: 20, right: 20, bottom: 50, left: 20 };
             }
 
+            let metaDataWidth=0;
             if (metadataText && metadataText.length > 0) {
+                metaDataWidth = calculateWidth(metadataText, fontSize);
                 padding.bottom = padding.bottom + fontSize + fontSize + metaDataFontSizeDifference;
             } else {
                 padding.bottom = padding.bottom + fontSize;
@@ -3717,17 +3719,30 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
                 bottom: padding.bottom,
                 left: padding.left
             };
+            
+            //find the width of title, i.e. icon+name/metadata
+            const iconWidth = parentCell._computedStyle.icon ? parentCell.attr('.structurizrIcon')['width'] : 0;
+            const nameWidth =  calculateWidth(parentCell.attr('.structurizrName').text,fontSize);
+            const titleWidth = Math.max(nameWidth, metaDataWidth) + iconWidth;
+            const childrenWidth = maxX - minX;
+
+            let newWidth=padding.left + padding.right;
+            if (titleWidth > childrenWidth) {
+                //position so that children are centered
+                newWidth += titleWidth;
+                minX = minX - (titleWidth - childrenWidth)/2
+            } else {
+                newWidth+= childrenWidth;
+            }
 
-            var newWidth = maxX - minX + padding.left + padding.right;
             var newHeight = maxY - minY + padding.top + padding.bottom;
             var newX = minX - padding.left;
             var newY = minY - padding.top;
 
             var margin = 15;
             var refX = (margin / newWidth);
-
-            if (parentCell._computedStyle.icon !== undefined) {
-                var iconWidth = parentCell.attr('.structurizrIcon')['width'];
+            
+            if (iconWidth > 0) {
                 var iconHeight = parentCell.attr('.structurizrIcon')['height'];
                 parentCell.attr({
                     '.structurizrIcon': {