Don't have the Structure Tree fill up the entire screen

For those lucky enough to have screens with a high enough resolution to
display
a chosen civilisation's tree in its entirety, the Structure Tree page
now
determines the minimum space necessary to do so, and sizes itself
accordingly.
(e.g. The page no longer scales to fill the entire screen.)

For those on lower resolution screens, the page now takes up slightly
less space
vertically.

This was SVN commit r23813.

binaries/data/mods/public/gui/reference/structree/Sections/Trainer/TrainerSection.js

@@ -59,6 +59,11 @@ class TrainerSection
 		for (let handler of this.widthChangedHandlers)
 			handler(this.width, !this.TrainerSection.hidden);
 	}
+
+	isVisible()
+	{
+		return !this.TrainerSection.hidden;
+	}
 }
 
 TrainerSection.prototype.Caption =

binaries/data/mods/public/gui/reference/structree/Sections/Tree/TreeSection.js

@@ -10,6 +10,9 @@ class TreeSection
 		this.PhaseIdents = new PhaseIdentManager(this.page);
 
 		this.rightMargin = this.TreeSection.size.right;
+		this.vMargin = this.TreeSection.size.top + -this.TreeSection.size.bottom;
+		this.width = 0;
+		this.height = 0;
 
 		this.structureBoxes = [];
 		for (let boxIdx in this.Structures.children)
@@ -34,6 +37,9 @@ class TreeSection
 
 		// Position phase idents
 		this.PhaseIdents.draw(phaseList, civCode, runningWidths, this.Structures.size.left);
+
+		this.width = this.Structures.size.left + Math.max(...runningWidths) + EntityBox.prototype.HMargin;
+		this.height = this.constructor.getPositionOffset(phaseList.length, this.page.TemplateParser);
 	}
 
 	drawPhaseIcon(phaseIcon, phaseIndex, civCode)

binaries/data/mods/public/gui/reference/structree/StructreePage.js

@@ -12,6 +12,8 @@ class StructreePage extends ReferencePage
 		this.structureBoxes = [];
 		this.trainerBoxes = [];
 
+		this.StructreePage = Engine.GetGUIObjectByName("structreePage");
+		this.Background = Engine.GetGUIObjectByName("background");
 		this.CivEmblem = Engine.GetGUIObjectByName("civEmblem");
 		this.CivName = Engine.GetGUIObjectByName("civName");
 		this.CivHistory = Engine.GetGUIObjectByName("civHistory");
@@ -30,6 +32,9 @@ class StructreePage extends ReferencePage
 		let civInfoButton = new CivInfoButton(this);
 		let closeButton = new CloseButton(this);
 		Engine.SetGlobalHotkey("structree", "Press", this.closePage.bind(this));
+
+		this.StructreePage.onWindowResized = this.updatePageWidth.bind(this);
+		this.width = 0;
 	}
 
 	closePage()
@@ -48,6 +53,31 @@ class StructreePage extends ReferencePage
 		let templateLists = this.TemplateLister.getTemplateLists(this.activeCiv);
 		this.TreeSection.draw(templateLists.structures, this.activeCiv);
 		this.TrainerSection.draw(templateLists.units, this.activeCiv);
+
+		this.width = this.TreeSection.width + -this.TreeSection.rightMargin;
+		if (this.TrainerSection.isVisible())
+			this.width += this.TrainerSection.width + this.SectionGap;
+		this.updatePageWidth();
+		this.updatePageHeight();
+	}
+
+	updatePageHeight()
+	{
+		let y = (this.TreeSection.height + this.TreeSection.vMargin) / 2;
+		let pageSize = this.StructreePage.size;
+		pageSize.top = -y;
+		pageSize.bottom = y;
+		this.StructreePage.size = pageSize;
+	}
+
+	updatePageWidth()
+	{
+		let screenSize = this.Background.getComputedSize();
+		let pageSize = this.StructreePage.size;
+		let x = Math.min(this.width, screenSize.right - this.BorderMargin * 2) / 2;
+		pageSize.left = -x;
+		pageSize.right = x;
+		this.StructreePage.size = pageSize;
 	}
 }
 
@@ -56,3 +86,7 @@ StructreePage.prototype.CloseButtonTooltip =
 
 // Gap between the `TreeSection` and `TrainerSection` gui objects (when the latter is visible)
 StructreePage.prototype.SectionGap = 12;
+
+// Margin around the edge of the structree on lower resolutions,
+// preventing the UI from being clipped by the edges of the screen.
+StructreePage.prototype.BorderMargin = 16;

binaries/data/mods/public/gui/reference/structree/structree.xml

@@ -13,9 +13,9 @@
 	<script directory="gui/reference/structree/Sections/Tree/"/>
 
 	<!-- Add a translucent black background to fade out the menu page -->
-	<object type="image" sprite="BackgroundTranslucent"/>
+	<object name="background" type="image" sprite="BackgroundTranslucent"/>
 
-	<object type="image" style="ModernDialog" size="16 24 100%-16 100%-24">
+	<object name="structreePage" type="image" style="ModernDialog" size="50%-480 50%-360 50%+480 50%+360">
 		<object style="TitleText" type="text" size="50%-128 -18 50%+128 14">
 			<translatableAttribute id="caption">Structure Tree</translatableAttribute>
 		</object>