mirror of
https://github.com/Ellpeck/MLEM.git
synced 2024-11-22 04:53:29 +01:00
various tooltip features and improvements
This commit is contained in:
parent
556be37523
commit
e2635bf9b6
4 changed files with 72 additions and 9 deletions
|
@ -15,6 +15,11 @@ Jump to version:
|
||||||
|
|
||||||
## 6.3.2 (In Development)
|
## 6.3.2 (In Development)
|
||||||
|
|
||||||
|
### MLEM.Ui
|
||||||
|
Additions
|
||||||
|
- Added the ability to set the anchor that should be used when a tooltip attaches to an element or the mouse
|
||||||
|
- Added the ability to display tooltips using the auto-nav style even when using the mouse
|
||||||
|
|
||||||
## 6.3.1
|
## 6.3.1
|
||||||
|
|
||||||
No code changes
|
No code changes
|
||||||
|
|
|
@ -77,7 +77,8 @@ namespace Demos {
|
||||||
this.activeDemo = demo.Value.Item2.Invoke(this);
|
this.activeDemo = demo.Value.Item2.Invoke(this);
|
||||||
this.activeDemo.LoadContent();
|
this.activeDemo.LoadContent();
|
||||||
},
|
},
|
||||||
PositionOffset = new Vector2(0, 1)
|
PositionOffset = new Vector2(0, 1),
|
||||||
|
Tooltip = {DisplayInAutoNavMode = true}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,11 @@
|
||||||
using System;
|
using System;
|
||||||
using System.Collections.Generic;
|
using System.Collections.Generic;
|
||||||
|
using System.Drawing;
|
||||||
using Microsoft.Xna.Framework;
|
using Microsoft.Xna.Framework;
|
||||||
using MLEM.Input;
|
using MLEM.Input;
|
||||||
using MLEM.Ui.Style;
|
using MLEM.Ui.Style;
|
||||||
|
using Color = Microsoft.Xna.Framework.Color;
|
||||||
|
using RectangleF = MLEM.Misc.RectangleF;
|
||||||
#if FNA
|
#if FNA
|
||||||
using MLEM.Extensions;
|
using MLEM.Extensions;
|
||||||
#endif
|
#endif
|
||||||
|
@ -23,14 +26,26 @@ namespace MLEM.Ui.Elements {
|
||||||
public readonly List<Paragraph> Paragraphs = new List<Paragraph>();
|
public readonly List<Paragraph> Paragraphs = new List<Paragraph>();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The offset that this tooltip's top left corner should have from the mouse position
|
/// The offset that this tooltip should have from the mouse position
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public StyleProp<Vector2> MouseOffset;
|
public StyleProp<Vector2> MouseOffset;
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The offset that this tooltip's top center coordinate should have from the bottom center of the element snapped to when <see cref="DisplayInAutoNavMode"/> is true.
|
/// The offset that this tooltip should have from the element snapped to when <see cref="DisplayInAutoNavMode"/> is true.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public StyleProp<Vector2> AutoNavOffset;
|
public StyleProp<Vector2> AutoNavOffset;
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
/// The anchor that should be used when this tooltip is displayed using the mouse. The <see cref="MouseOffset"/> will be applied.
|
||||||
|
/// </summary>
|
||||||
|
public StyleProp<Anchor> MouseAnchor;
|
||||||
|
/// <summary>
|
||||||
|
/// The anchor that should be used when this tooltip is displayed using auto-nav mode. The <see cref="AutoNavOffset"/> will be applied.
|
||||||
|
/// </summary>
|
||||||
|
public StyleProp<Anchor> AutoNavAnchor;
|
||||||
|
/// <summary>
|
||||||
|
/// If this is <see langword="true"/>, and the mouse is used, the tooltip will attach to the hovered element in a static position using the <see cref="AutoNavOffset"/> and <see cref="AutoNavAnchor"/> properties, rather than following the mouse cursor exactly.
|
||||||
|
/// </summary>
|
||||||
|
public StyleProp<bool> UseAutoNavBehaviorForMouse;
|
||||||
|
/// <summary>
|
||||||
/// The amount of time that the mouse has to be over an element before it appears
|
/// The amount of time that the mouse has to be over an element before it appears
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public StyleProp<TimeSpan> Delay;
|
public StyleProp<TimeSpan> Delay;
|
||||||
|
@ -79,6 +94,7 @@ namespace MLEM.Ui.Elements {
|
||||||
/// The position that this tooltip should be following (or snapped to) instead of the <see cref="InputHandler.ViewportMousePosition"/>.
|
/// The position that this tooltip should be following (or snapped to) instead of the <see cref="InputHandler.ViewportMousePosition"/>.
|
||||||
/// If this value is unset, <see cref="InputHandler.ViewportMousePosition"/> will be used as the snap position.
|
/// If this value is unset, <see cref="InputHandler.ViewportMousePosition"/> will be used as the snap position.
|
||||||
/// Note that <see cref="MouseOffset"/> is still applied with this value set.
|
/// Note that <see cref="MouseOffset"/> is still applied with this value set.
|
||||||
|
/// Note that, if <see cref="UseAutoNavBehaviorForMouse"/> is <see langword="true"/>, this value is ignored.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public virtual Vector2? SnapPosition { get; set; }
|
public virtual Vector2? SnapPosition { get; set; }
|
||||||
|
|
||||||
|
@ -151,6 +167,9 @@ namespace MLEM.Ui.Elements {
|
||||||
this.Texture = this.Texture.OrStyle(style.TooltipBackground);
|
this.Texture = this.Texture.OrStyle(style.TooltipBackground);
|
||||||
this.MouseOffset = this.MouseOffset.OrStyle(style.TooltipOffset);
|
this.MouseOffset = this.MouseOffset.OrStyle(style.TooltipOffset);
|
||||||
this.AutoNavOffset = this.AutoNavOffset.OrStyle(style.TooltipAutoNavOffset);
|
this.AutoNavOffset = this.AutoNavOffset.OrStyle(style.TooltipAutoNavOffset);
|
||||||
|
this.MouseAnchor = this.MouseAnchor.OrStyle(style.TooltipMouseAnchor);
|
||||||
|
this.AutoNavAnchor = this.AutoNavAnchor.OrStyle(style.TooltipAutoNavAnchor);
|
||||||
|
this.UseAutoNavBehaviorForMouse = this.UseAutoNavBehaviorForMouse.OrStyle(style.TooltipUseAutoNavBehaviorForMouse);
|
||||||
this.Delay = this.Delay.OrStyle(style.TooltipDelay);
|
this.Delay = this.Delay.OrStyle(style.TooltipDelay);
|
||||||
this.ParagraphTextColor = this.ParagraphTextColor.OrStyle(style.TooltipTextColor);
|
this.ParagraphTextColor = this.ParagraphTextColor.OrStyle(style.TooltipTextColor);
|
||||||
this.ParagraphTextScale = this.ParagraphTextScale.OrStyle(style.TextScale);
|
this.ParagraphTextScale = this.ParagraphTextScale.OrStyle(style.TextScale);
|
||||||
|
@ -201,11 +220,10 @@ namespace MLEM.Ui.Elements {
|
||||||
public void SnapPositionToMouse() {
|
public void SnapPositionToMouse() {
|
||||||
Vector2 snapPosition;
|
Vector2 snapPosition;
|
||||||
if (this.snapElement != null) {
|
if (this.snapElement != null) {
|
||||||
// center our snap position below the snap element
|
snapPosition = this.GetSnapOffset(this.AutoNavAnchor, this.snapElement.DisplayArea, this.AutoNavOffset);
|
||||||
snapPosition = new Vector2(this.snapElement.DisplayArea.Center.X, this.snapElement.DisplayArea.Bottom) + this.AutoNavOffset;
|
|
||||||
snapPosition.X -= this.DisplayArea.Width / 2F;
|
|
||||||
} else {
|
} else {
|
||||||
snapPosition = (this.SnapPosition ?? this.Input.ViewportMousePosition.ToVector2()) + this.MouseOffset.Value;
|
var mouseBounds = new RectangleF(this.SnapPosition ?? this.Input.ViewportMousePosition.ToVector2(), Vector2.Zero);
|
||||||
|
snapPosition = this.GetSnapOffset(this.MouseAnchor, mouseBounds, this.MouseOffset);
|
||||||
}
|
}
|
||||||
|
|
||||||
var viewport = this.System.Viewport;
|
var viewport = this.System.Viewport;
|
||||||
|
@ -255,8 +273,19 @@ namespace MLEM.Ui.Elements {
|
||||||
/// </summary>
|
/// </summary>
|
||||||
/// <param name="elementToHover">The element that should automatically cause the tooltip to appear and disappear when hovered and not hovered, respectively</param>
|
/// <param name="elementToHover">The element that should automatically cause the tooltip to appear and disappear when hovered and not hovered, respectively</param>
|
||||||
public void AddToElement(Element elementToHover) {
|
public void AddToElement(Element elementToHover) {
|
||||||
elementToHover.OnMouseEnter += e => this.Display(e.System, $"{e.GetType().Name}Tooltip");
|
// mouse controls
|
||||||
elementToHover.OnMouseExit += e => this.Remove();
|
elementToHover.OnMouseEnter += e => {
|
||||||
|
if (this.UseAutoNavBehaviorForMouse)
|
||||||
|
this.snapElement = e;
|
||||||
|
this.Display(e.System, $"{e.GetType().Name}Tooltip");
|
||||||
|
};
|
||||||
|
elementToHover.OnMouseExit += e => {
|
||||||
|
this.Remove();
|
||||||
|
if (this.UseAutoNavBehaviorForMouse)
|
||||||
|
this.snapElement = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// auto-nav controls
|
||||||
elementToHover.OnSelected += e => {
|
elementToHover.OnSelected += e => {
|
||||||
if (this.DisplayInAutoNavMode && e.Controls.IsAutoNavMode) {
|
if (this.DisplayInAutoNavMode && e.Controls.IsAutoNavMode) {
|
||||||
this.snapElement = e;
|
this.snapElement = e;
|
||||||
|
@ -312,5 +341,30 @@ namespace MLEM.Ui.Elements {
|
||||||
paragraph.AutoAdjustWidth = true;
|
paragraph.AutoAdjustWidth = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private Vector2 GetSnapOffset(Anchor anchor, RectangleF snapBounds, Vector2 offset) {
|
||||||
|
switch (anchor) {
|
||||||
|
case Anchor.TopLeft:
|
||||||
|
return snapBounds.Location - this.DisplayArea.Size - offset;
|
||||||
|
case Anchor.TopCenter:
|
||||||
|
return new Vector2(snapBounds.Center.X - this.DisplayArea.Width / 2F, snapBounds.Top - this.DisplayArea.Height) - offset;
|
||||||
|
case Anchor.TopRight:
|
||||||
|
return new Vector2(snapBounds.Right + offset.X, snapBounds.Top - this.DisplayArea.Height - offset.Y);
|
||||||
|
case Anchor.CenterLeft:
|
||||||
|
return new Vector2(snapBounds.X - this.DisplayArea.Width - offset.X, snapBounds.Center.Y - this.DisplayArea.Height / 2 + offset.Y);
|
||||||
|
case Anchor.Center:
|
||||||
|
return snapBounds.Center - this.DisplayArea.Size / 2 + offset;
|
||||||
|
case Anchor.CenterRight:
|
||||||
|
return new Vector2(snapBounds.Right, snapBounds.Center.Y - this.DisplayArea.Height / 2) + offset;
|
||||||
|
case Anchor.BottomLeft:
|
||||||
|
return new Vector2(snapBounds.X - this.DisplayArea.Width - offset.X, snapBounds.Bottom + offset.Y);
|
||||||
|
case Anchor.BottomCenter:
|
||||||
|
return new Vector2(snapBounds.Center.X - this.DisplayArea.Width / 2F, snapBounds.Bottom) + offset;
|
||||||
|
case Anchor.BottomRight:
|
||||||
|
return snapBounds.Location + snapBounds.Size + offset;
|
||||||
|
default:
|
||||||
|
throw new NotSupportedException($"Tooltip anchors don't support the {anchor} value");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -166,6 +166,9 @@ namespace MLEM.Ui.Style {
|
||||||
/// The offset of the <see cref="Tooltip"/> element's top center coordinate from the bottom center of the element snapped to when <see cref="Tooltip.DisplayInAutoNavMode"/> is true.
|
/// The offset of the <see cref="Tooltip"/> element's top center coordinate from the bottom center of the element snapped to when <see cref="Tooltip.DisplayInAutoNavMode"/> is true.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public Vector2 TooltipAutoNavOffset = new Vector2(0, 8);
|
public Vector2 TooltipAutoNavOffset = new Vector2(0, 8);
|
||||||
|
public Anchor TooltipAutoNavAnchor = Anchor.BottomCenter;
|
||||||
|
public Anchor TooltipMouseAnchor = Anchor.BottomRight;
|
||||||
|
public bool TooltipUseAutoNavBehaviorForMouse;
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The color that the text of a <see cref="Tooltip"/> should have
|
/// The color that the text of a <see cref="Tooltip"/> should have
|
||||||
/// </summary>
|
/// </summary>
|
||||||
|
|
Loading…
Reference in a new issue