Merge pull request #13335 from gagahpangeran/wiki-article

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

@@ -0,0 +1,65 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using Markdig.Parsers;
+using Markdig.Syntax;
+using Markdig.Syntax.Inlines;
+using NUnit.Framework;
+using osu.Framework.Allocation;
+using osu.Game.Graphics.Containers.Markdown;
+using osu.Game.Overlays;
+using osu.Game.Overlays.Wiki;
+
+namespace osu.Game.Tests.Visual.Online
+{
+    public class TestSceneWikiSidebar : OsuTestScene
+    {
+        [Cached]
+        private readonly OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Orange);
+
+        [Cached]
+        private readonly OverlayScrollContainer scrollContainer = new OverlayScrollContainer();
+
+        private WikiSidebar sidebar;
+
+        [SetUp]
+        public void SetUp() => Schedule(() => Child = sidebar = new WikiSidebar());
+
+        [Test]
+        public void TestNoContent()
+        {
+            AddStep("No Content", () => { });
+        }
+
+        [Test]
+        public void TestOnlyMainTitle()
+        {
+            AddStep("Add TOC", () =>
+            {
+                for (var i = 0; i < 10; i++)
+                    addTitle($"This is a very long title {i + 1}");
+            });
+        }
+
+        [Test]
+        public void TestWithSubtitle()
+        {
+            AddStep("Add TOC", () =>
+            {
+                for (var i = 0; i < 10; i++)
+                    addTitle($"This is a very long title {i + 1}", i % 4 != 0);
+            });
+        }
+
+        private void addTitle(string text, bool subtitle = false)
+        {
+            var headingBlock = new HeadingBlock(new HeadingBlockParser())
+            {
+                Inline = new ContainerInline().AppendChild(new LiteralInline(text)),
+                Level = subtitle ? 3 : 2,
+            };
+            var heading = new OsuMarkdownHeading(headingBlock);
+            sidebar.AddEntry(headingBlock, heading);
+        }
+    }
+}

osu.Game/Overlays/OnlineOverlay.cs

@@ -1,6 +1,7 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Graphics.UserInterface;
@@ -13,7 +14,9 @@ namespace osu.Game.Overlays
     {
         protected override Container<Drawable> Content => content;
 
+        [Cached]
         protected readonly OverlayScrollContainer ScrollFlow;
+
         protected readonly LoadingLayer Loading;
         private readonly Container content;
 

osu.Game/Overlays/Wiki/WikiArticlePage.cs

@@ -0,0 +1,80 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System;
+using Markdig.Syntax;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Game.Overlays.Wiki.Markdown;
+
+namespace osu.Game.Overlays.Wiki
+{
+    public class WikiArticlePage : CompositeDrawable
+    {
+        public Container SidebarContainer { get; }
+
+        public WikiArticlePage(string currentPath, string markdown)
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+
+            WikiSidebar sidebar;
+
+            InternalChild = new GridContainer
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                RowDimensions = new[]
+                {
+                    new Dimension(GridSizeMode.AutoSize),
+                },
+                ColumnDimensions = new[]
+                {
+                    new Dimension(GridSizeMode.AutoSize),
+                    new Dimension(),
+                },
+                Content = new[]
+                {
+                    new Drawable[]
+                    {
+                        SidebarContainer = new Container
+                        {
+                            AutoSizeAxes = Axes.X,
+                            Child = sidebar = new WikiSidebar(),
+                        },
+                        new ArticleMarkdownContainer
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            CurrentPath = currentPath,
+                            Text = markdown,
+                            DocumentMargin = new MarginPadding(0),
+                            DocumentPadding = new MarginPadding
+                            {
+                                Vertical = 20,
+                                Left = 30,
+                                Right = 50,
+                            },
+                            OnAddHeading = sidebar.AddEntry,
+                        }
+                    },
+                },
+            };
+        }
+
+        private class ArticleMarkdownContainer : WikiMarkdownContainer
+        {
+            public Action<HeadingBlock, MarkdownHeading> OnAddHeading;
+
+            protected override MarkdownHeading CreateHeading(HeadingBlock headingBlock)
+            {
+                var heading = base.CreateHeading(headingBlock);
+
+                OnAddHeading(headingBlock, heading);
+
+                return heading;
+            }
+        }
+    }
+}

osu.Game/Overlays/Wiki/WikiSidebar.cs

@@ -0,0 +1,66 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using Markdig.Syntax;
+using Markdig.Syntax.Inlines;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Overlays.Wiki
+{
+    public class WikiSidebar : OverlaySidebar
+    {
+        private WikiTableOfContents tableOfContents;
+
+        protected override Drawable CreateContent() => new FillFlowContainer
+        {
+            Direction = FillDirection.Vertical,
+            RelativeSizeAxes = Axes.X,
+            AutoSizeAxes = Axes.Y,
+            Children = new Drawable[]
+            {
+                new OsuSpriteText
+                {
+                    Text = "CONTENTS",
+                    Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
+                    Margin = new MarginPadding { Bottom = 5 },
+                },
+                tableOfContents = new WikiTableOfContents(),
+            },
+        };
+
+        public void AddEntry(HeadingBlock headingBlock, MarkdownHeading heading)
+        {
+            switch (headingBlock.Level)
+            {
+                case 2:
+                case 3:
+                    tableOfContents.AddEntry(getTitle(headingBlock.Inline), heading, headingBlock.Level == 3);
+                    break;
+            }
+        }
+
+        private string getTitle(ContainerInline containerInline)
+        {
+            foreach (var inline in containerInline)
+            {
+                switch (inline)
+                {
+                    case LiteralInline literalInline:
+                        return literalInline.Content.ToString();
+
+                    case LinkInline linkInline:
+                        if (!linkInline.IsImage)
+                            return getTitle(linkInline);
+
+                        break;
+                }
+            }
+
+            return string.Empty;
+        }
+    }
+}

osu.Game/Overlays/Wiki/WikiTableOfContents.cs

@@ -0,0 +1,91 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System.Collections.Generic;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+
+namespace osu.Game.Overlays.Wiki
+{
+    public class WikiTableOfContents : CompositeDrawable
+    {
+        private readonly FillFlowContainer content;
+
+        private TableOfContentsEntry lastMainTitle;
+
+        private TableOfContentsEntry lastSubTitle;
+
+        public WikiTableOfContents()
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+            InternalChild = content = new FillFlowContainer
+            {
+                Direction = FillDirection.Vertical,
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+            };
+        }
+
+        public void AddEntry(string title, MarkdownHeading target, bool subtitle = false)
+        {
+            var entry = new TableOfContentsEntry(title, target, subtitle);
+
+            if (subtitle)
+            {
+                lastMainTitle.Margin = new MarginPadding(0);
+
+                if (lastSubTitle != null)
+                    lastSubTitle.Margin = new MarginPadding(0);
+
+                content.Add(lastSubTitle = entry.With(d => d.Margin = new MarginPadding { Bottom = 10 }));
+
+                return;
+            }
+
+            lastSubTitle = null;
+
+            content.Add(lastMainTitle = entry.With(d => d.Margin = new MarginPadding { Bottom = 5 }));
+        }
+
+        private class TableOfContentsEntry : OsuHoverContainer
+        {
+            private readonly MarkdownHeading target;
+
+            private readonly OsuTextFlowContainer textFlow;
+
+            public TableOfContentsEntry(string text, MarkdownHeading target, bool subtitle = false)
+            {
+                this.target = target;
+
+                RelativeSizeAxes = Axes.X;
+                AutoSizeAxes = Axes.Y;
+                Child = textFlow = new OsuTextFlowContainer(t =>
+                {
+                    t.Font = OsuFont.GetFont(size: subtitle ? 12 : 15);
+                }).With(f =>
+                {
+                    f.AddText(text);
+                    f.RelativeSizeAxes = Axes.X;
+                    f.AutoSizeAxes = Axes.Y;
+                    f.Margin = new MarginPadding { Bottom = 2 };
+                });
+                Padding = new MarginPadding { Left = subtitle ? 10 : 0 };
+            }
+
+            protected override IEnumerable<Drawable> EffectTargets => new Drawable[] { textFlow };
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider, OverlayScrollContainer scrollContainer)
+            {
+                IdleColour = colourProvider.Light2;
+                HoverColour = colourProvider.Light1;
+                Action = () => scrollContainer.ScrollTo(target);
+            }
+        }
+    }
+}

osu.Game/Overlays/WikiOverlay.cs

@@ -1,6 +1,7 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using System;
 using System.Linq;
 using System.Threading;
 using osu.Framework.Allocation;
@@ -10,7 +11,6 @@ using osu.Game.Online.API;
 using osu.Game.Online.API.Requests;
 using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Overlays.Wiki;
-using osu.Game.Overlays.Wiki.Markdown;
 
 namespace osu.Game.Overlays
 {
@@ -31,6 +31,8 @@ namespace osu.Game.Overlays
 
         private bool displayUpdateRequired = true;
 
+        private WikiArticlePage articlePage;
+
         public WikiOverlay()
             : base(OverlayColourScheme.Orange, false)
         {
@@ -82,6 +84,17 @@ namespace osu.Game.Overlays
             }, (cancellationToken = new CancellationTokenSource()).Token);
         }
 
+        protected override void UpdateAfterChildren()
+        {
+            base.UpdateAfterChildren();
+
+            if (articlePage != null)
+            {
+                articlePage.SidebarContainer.Height = DrawHeight;
+                articlePage.SidebarContainer.Y = Math.Clamp(ScrollFlow.Current - Header.DrawHeight, 0, Math.Max(ScrollFlow.ScrollContent.DrawHeight - DrawHeight - Header.DrawHeight, 0));
+            }
+        }
+
         private void onPathChanged(ValueChangedEvent<string> e)
         {
             cancellationToken?.Cancel();
@@ -115,39 +128,14 @@ namespace osu.Game.Overlays
             }
             else
             {
-                LoadDisplay(new WikiMarkdownContainer
+                LoadDisplay(articlePage = new WikiArticlePage($@"{api.WebsiteRootUrl}/wiki/{path.Value}/", response.Markdown));
-                {
-                    RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y,
-                    CurrentPath = $@"{api.WebsiteRootUrl}/wiki/{path.Value}/",
-                    Text = response.Markdown,
-                    DocumentMargin = new MarginPadding(0),
-                    DocumentPadding = new MarginPadding
-                    {
-                        Vertical = 20,
-                        Left = 30,
-                        Right = 50,
-                    },
-                });
             }
         }
 
         private void onFail()
         {
-            LoadDisplay(new WikiMarkdownContainer
+            LoadDisplay(articlePage = new WikiArticlePage($@"{api.WebsiteRootUrl}/wiki/",
-            {
+                $"Something went wrong when trying to fetch page \"{path.Value}\".\n\n[Return to the main page](Main_Page)."));
-                RelativeSizeAxes = Axes.X,
-                AutoSizeAxes = Axes.Y,
-                CurrentPath = $@"{api.WebsiteRootUrl}/wiki/",
-                Text = $"Something went wrong when trying to fetch page \"{path.Value}\".\n\n[Return to the main page](Main_Page).",
-                DocumentMargin = new MarginPadding(0),
-                DocumentPadding = new MarginPadding
-                {
-                    Vertical = 20,
-                    Left = 30,
-                    Right = 50,
-                },
-            });
         }
 
         private void showParentPage()