Merge pull request #13685 from gagahpangeran/wiki-image-block

Fix image overflow in wiki overlay

osu.Android.props

@@ -52,7 +52,7 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="ppy.osu.Game.Resources" Version="2021.618.0" />
-    <PackageReference Include="ppy.osu.Framework.Android" Version="2021.630.0" />
+    <PackageReference Include="ppy.osu.Framework.Android" Version="2021.702.0" />
   </ItemGroup>
   <ItemGroup Label="Transitive Dependencies">
     <!-- Realm needs to be directly referenced in all Xamarin projects, as it will not pull in its transitive dependencies otherwise. -->

osu.Game.Tests/Visual/Online/TestSceneWikiMarkdownContainer.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
+using System.Linq;
 using Markdig.Syntax.Inlines;
 using NUnit.Framework;
 using osu.Framework.Allocation;
@@ -9,6 +10,9 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Containers.Markdown;
 using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Testing;
+using osu.Framework.Utils;
 using osu.Game.Graphics.Containers.Markdown;
 using osu.Game.Overlays;
 using osu.Game.Overlays.Wiki.Markdown;
@@ -102,7 +106,7 @@ needs_cleanup: true
         {
             AddStep("Add absolute image", () =>
             {
-                markdownContainer.DocumentUrl = "https://dev.ppy.sh";
+                markdownContainer.CurrentPath = "https://dev.ppy.sh";
                 markdownContainer.Text = "![intro](/wiki/Interface/img/intro-screen.jpg)";
             });
         }
@@ -112,8 +116,7 @@ needs_cleanup: true
         {
             AddStep("Add relative image", () =>
             {
-                markdownContainer.DocumentUrl = "https://dev.ppy.sh";
+                markdownContainer.CurrentPath = "https://dev.ppy.sh/wiki/Interface/";
-                markdownContainer.CurrentPath = $"{API.WebsiteRootUrl}/wiki/Interface/";
                 markdownContainer.Text = "![intro](img/intro-screen.jpg)";
             });
         }
@@ -123,8 +126,7 @@ needs_cleanup: true
         {
             AddStep("Add paragraph with block image", () =>
             {
-                markdownContainer.DocumentUrl = "https://dev.ppy.sh";
+                markdownContainer.CurrentPath = "https://dev.ppy.sh/wiki/Interface/";
-                markdownContainer.CurrentPath = $"{API.WebsiteRootUrl}/wiki/Interface/";
                 markdownContainer.Text = @"Line before image
 
 ![play menu](img/play-menu.jpg ""Main Menu in osu!"")
@@ -138,7 +140,7 @@ Line after image";
         {
             AddStep("Add inline image", () =>
             {
-                markdownContainer.DocumentUrl = "https://dev.ppy.sh";
+                markdownContainer.CurrentPath = "https://dev.ppy.sh";
                 markdownContainer.Text = "![osu! mode icon](/wiki/shared/mode/osu.png) osu!";
             });
         }
@@ -148,7 +150,7 @@ Line after image";
         {
             AddStep("Add Table", () =>
             {
-                markdownContainer.DocumentUrl = "https://dev.ppy.sh";
+                markdownContainer.CurrentPath = "https://dev.ppy.sh";
                 markdownContainer.Text = @"
 | Image | Name | Effect |
 | :-: | :-: | :-- |
@@ -162,15 +164,33 @@ Line after image";
             });
         }
 
+        [Test]
+        public void TestWideImageNotExceedContainer()
+        {
+            AddStep("Add image", () =>
+            {
+                markdownContainer.CurrentPath = "https://dev.ppy.sh/wiki/osu!_Program_Files/";
+                markdownContainer.Text = "![](img/file_structure.jpg \"The file structure of osu!'s installation folder, on Windows and macOS\")";
+            });
+
+            AddUntilStep("Wait image to load", () => markdownContainer.ChildrenOfType<DelayedLoadWrapper>().First().DelayedLoadCompleted);
+
+            AddStep("Change container width", () =>
+            {
+                markdownContainer.Width = 0.5f;
+            });
+
+            AddAssert("Image not exceed container width", () =>
+            {
+                var spriteImage = markdownContainer.ChildrenOfType<Sprite>().First();
+                return Precision.DefinitelyBigger(markdownContainer.DrawWidth, spriteImage.DrawWidth);
+            });
+        }
+
         private class TestMarkdownContainer : WikiMarkdownContainer
         {
             public LinkInline Link;
 
-            public new string DocumentUrl
-            {
-                set => base.DocumentUrl = value;
-            }
-
             public override MarkdownTextFlowContainer CreateTextFlow() => new TestMarkdownTextFlowContainer
             {
                 UrlAdded = link => Link = link,

osu.Game/Overlays/Wiki/Markdown/WikiMarkdownImageBlock.cs

@@ -6,6 +6,7 @@ using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Sprites;
 using osuTK;
 
 namespace osu.Game.Overlays.Wiki.Markdown
@@ -32,11 +33,7 @@ namespace osu.Game.Overlays.Wiki.Markdown
         {
             Children = new Drawable[]
             {
-                new WikiMarkdownImage(linkInline)
+                new BlockMarkdownImage(linkInline),
-                {
-                    Anchor = Anchor.TopCentre,
-                    Origin = Anchor.TopCentre,
-                },
                 parentTextComponent.CreateSpriteText().With(t =>
                 {
                     t.Text = linkInline.Title;
@@ -45,5 +42,50 @@ namespace osu.Game.Overlays.Wiki.Markdown
                 }),
             };
         }
+
+        private class BlockMarkdownImage : WikiMarkdownImage
+        {
+            public BlockMarkdownImage(LinkInline linkInline)
+                : base(linkInline)
+            {
+                AutoSizeAxes = Axes.Y;
+                RelativeSizeAxes = Axes.X;
+            }
+
+            protected override ImageContainer CreateImageContainer(string url) => new BlockImageContainer(url);
+
+            private class BlockImageContainer : ImageContainer
+            {
+                public BlockImageContainer(string url)
+                    : base(url)
+                {
+                    AutoSizeAxes = Axes.Y;
+                    RelativeSizeAxes = Axes.X;
+                }
+
+                protected override Sprite CreateImageSprite() => new ImageSprite();
+
+                private class ImageSprite : Sprite
+                {
+                    public ImageSprite()
+                    {
+                        Anchor = Anchor.TopCentre;
+                        Origin = Anchor.TopCentre;
+                    }
+
+                    protected override void Update()
+                    {
+                        base.Update();
+
+                        if (Width > Parent.DrawWidth)
+                        {
+                            float ratio = Height / Width;
+                            Width = Parent.DrawWidth;
+                            Height = ratio * Width;
+                        }
+                    }
+                }
+            }
+        }
     }
 }

osu.Game/osu.Game.csproj

@@ -36,7 +36,7 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Realm" Version="10.2.1" />
-    <PackageReference Include="ppy.osu.Framework" Version="2021.630.0" />
+    <PackageReference Include="ppy.osu.Framework" Version="2021.702.0" />
     <PackageReference Include="ppy.osu.Game.Resources" Version="2021.618.0" />
     <PackageReference Include="Sentry" Version="3.6.0" />
     <PackageReference Include="SharpCompress" Version="0.28.3" />

osu.iOS.props

@@ -70,7 +70,7 @@
     <Reference Include="System.Net.Http" />
   </ItemGroup>
   <ItemGroup Label="Package References">
-    <PackageReference Include="ppy.osu.Framework.iOS" Version="2021.630.0" />
+    <PackageReference Include="ppy.osu.Framework.iOS" Version="2021.702.0" />
     <PackageReference Include="ppy.osu.Game.Resources" Version="2021.618.0" />
   </ItemGroup>
   <!-- See https://github.com/dotnet/runtime/issues/35988 (can be removed after Xamarin uses net5.0 / net6.0) -->
@@ -93,7 +93,7 @@
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="2.2.6" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite.Core" Version="2.2.6" />
     <PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
-    <PackageReference Include="ppy.osu.Framework" Version="2021.630.0" />
+    <PackageReference Include="ppy.osu.Framework" Version="2021.702.0" />
     <PackageReference Include="SharpCompress" Version="0.28.3" />
     <PackageReference Include="NUnit" Version="3.13.2" />
     <PackageReference Include="SharpRaven" Version="2.4.0" />