From 294af052ae313e1dabd3c9ac098b2ee32b155e66 Mon Sep 17 00:00:00 2001 From: Ellpeck Date: Thu, 23 Nov 2023 22:16:31 +0100 Subject: [PATCH] Added SetWidthBasedOnAspect and SetHeightBasedOnAspect to images --- CHANGELOG.md | 1 + Demos/Content/Markdown.md | 6 ++++- MLEM.Ui/Elements/Image.cs | 46 +++++++++++++++++++++++++++++++++---- MLEM.Ui/Parsers/UiParser.cs | 4 ++-- 4 files changed, 50 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fdae5cc..24f1d6e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,7 @@ Fixes ### MLEM.Ui Additions - Added UiControls.NavType, which stores the most recently used type of ui navigation +- Added SetWidthBasedOnAspect and SetHeightBasedOnAspect to images Improvements - Allow scrolling panels to contain other scrolling panels diff --git a/Demos/Content/Markdown.md b/Demos/Content/Markdown.md index 76b495b..56d64b1 100644 --- a/Demos/Content/Markdown.md +++ b/Demos/Content/Markdown.md @@ -12,12 +12,16 @@ Strikethrough with ~~two tildes~~. [I'm an inline-style link](https://www.google.com) +Logo: ![](https://raw.githubusercontent.com/Ellpeck/MLEM/main/Media/Logo.png) +Wide logo: +![](https://raw.githubusercontent.com/Ellpeck/MLEM/main/Media/Banner.png) + Some `inline code` right here ```js function codeBlock() { } -``` \ No newline at end of file +``` diff --git a/MLEM.Ui/Elements/Image.cs b/MLEM.Ui/Elements/Image.cs index 00be592..f53f64b 100644 --- a/MLEM.Ui/Elements/Image.cs +++ b/MLEM.Ui/Elements/Image.cs @@ -69,11 +69,40 @@ namespace MLEM.Ui.Elements { /// Note that increased rotation does not increase this component's size, even if the rotated texture would go out of bounds of this component. /// public float ImageRotation; + /// + /// Whether this image's width should automatically be calculated based on this image's calculated height in relation to its 's aspect ratio. + /// Note that, if this is , the value will still be applied to this image's width. + /// + public bool SetWidthBasedOnAspect { + get => this.setWidthBasedOnAspect; + set { + if (this.setWidthBasedOnAspect != value) { + this.setWidthBasedOnAspect = value; + this.SetAreaDirty(); + } + } + } + /// + /// Whether this image's height should automatically be calculated based on this image's calculated width in relation to its 's aspect ratio. + /// This behavior is useful if an image should take up a certain width, but the aspect ratio of its texture can vary and the image should not take up more height than is necessary. + /// Note that, if this is , the value will still be applied to this image's height. + /// + public bool SetHeightBasedOnAspect { + get => this.setHeightBasedOnAspect; + set { + if (this.setHeightBasedOnAspect != value) { + this.setHeightBasedOnAspect = value; + this.SetAreaDirty(); + } + } + } /// public override bool IsHidden => base.IsHidden || this.Texture == null; private bool scaleToImage; + private bool setWidthBasedOnAspect; + private bool setHeightBasedOnAspect; private TextureRegion explicitlySetTexture; private TextureRegion displayedTexture; @@ -86,7 +115,7 @@ namespace MLEM.Ui.Elements { /// Whether this image's size should be based on the texture's size public Image(Anchor anchor, Vector2 size, TextureRegion texture, bool scaleToImage = false) : base(anchor, size) { this.Texture = texture; - this.scaleToImage = scaleToImage; + this.ScaleToImage = scaleToImage; this.CanBeSelected = false; this.CanBeMoused = false; } @@ -95,14 +124,23 @@ namespace MLEM.Ui.Elements { public Image(Anchor anchor, Vector2 size, TextureCallback getTextureCallback, bool scaleToImage = false) : base(anchor, size) { this.GetTextureCallback = getTextureCallback; this.Texture = getTextureCallback(this); - this.scaleToImage = scaleToImage; + this.ScaleToImage = scaleToImage; this.CanBeSelected = false; this.CanBeMoused = false; } /// protected override Vector2 CalcActualSize(RectangleF parentArea) { - return this.Texture != null && this.scaleToImage ? this.Texture.Size.ToVector2() * this.Scale : base.CalcActualSize(parentArea); + var ret = base.CalcActualSize(parentArea); + if (this.Texture != null) { + if (this.ScaleToImage) + ret = this.Texture.Size.ToVector2() * this.Scale; + if (this.SetWidthBasedOnAspect) + ret.X = ret.Y * this.Texture.Width / this.Texture.Height + this.ScaledAutoSizeAddedAbsolute.X; + if (this.SetHeightBasedOnAspect) + ret.Y = ret.X * this.Texture.Height / this.Texture.Width + this.ScaledAutoSizeAddedAbsolute.Y; + } + return ret; } /// @@ -134,7 +172,7 @@ namespace MLEM.Ui.Elements { return; var nullChanged = this.displayedTexture == null != (newTexture == null); this.displayedTexture = newTexture; - if (nullChanged || this.scaleToImage) + if (nullChanged || this.ScaleToImage || this.SetWidthBasedOnAspect || this.SetHeightBasedOnAspect) this.SetAreaDirty(); } diff --git a/MLEM.Ui/Parsers/UiParser.cs b/MLEM.Ui/Parsers/UiParser.cs index b1c3b50..db4d76d 100644 --- a/MLEM.Ui/Parsers/UiParser.cs +++ b/MLEM.Ui/Parsers/UiParser.cs @@ -10,7 +10,6 @@ using MLEM.Ui.Style; #if NETSTANDARD2_0_OR_GREATER || NET6_0_OR_GREATER using System.Net.Http; - #else using System.Net; #endif @@ -146,7 +145,8 @@ namespace MLEM.Ui.Parsers { throw new NullReferenceException("A UI parser requires a GraphicsDevice for parsing images"); TextureRegion image = null; - return new Image(Anchor.AutoLeft, new Vector2(1, -1), _ => image) { + return new Image(Anchor.AutoLeft, Vector2.One, _ => image) { + SetHeightBasedOnAspect = true, OnAddedToUi = e => { if (image == null) LoadImageAsync();