Merge pull request #711 from aws-lumberyard-dev/michabr/lyshine_viewport_fixes

UI Editor Viewport fixes

Gems/LyShine/Assets/Editor/Icons/Viewport/Canvas_Background.tif.assetinfo

@@ -0,0 +1,69 @@
+<ObjectStream version="3">
+	<Class name="TextureSettings" version="1" type="{980132FF-C450-425D-8AE0-BD96A8486177}">
+		<Class name="AZ::Uuid" field="PresetID" value="{83003128-F63E-422B-AEC2-68F0A947225F}" type="{E152C105-A133-4D03-BBF8-3D4B2FBA3E2A}"/>
+		<Class name="unsigned int" field="SizeReduceLevel" value="0" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+		<Class name="bool" field="EngineReduce" value="true" type="{A0CA880C-AFE4-43CB-926C-59AC48496112}"/>
+		<Class name="bool" field="EnableMipmap" value="true" type="{A0CA880C-AFE4-43CB-926C-59AC48496112}"/>
+		<Class name="bool" field="MaintainAlphaCoverage" value="false" type="{A0CA880C-AFE4-43CB-926C-59AC48496112}"/>
+		<Class name="AZStd::vector" field="MipMapAlphaAdjustments" type="{3349AACD-BE04-50BC-9478-528BF2ACFD55}">
+			<Class name="unsigned int" field="element" value="50" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+			<Class name="unsigned int" field="element" value="50" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+			<Class name="unsigned int" field="element" value="50" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+			<Class name="unsigned int" field="element" value="50" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+			<Class name="unsigned int" field="element" value="50" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+			<Class name="unsigned int" field="element" value="50" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+		</Class>
+		<Class name="unsigned int" field="MipMapGenEval" value="0" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+		<Class name="ImageProcessingAtom::MipGenType" field="MipMapGenType" value="1" type="{8524F650-1417-44DA-BBB0-C707A7A1A709}"/>
+		<Class name="AZStd::map" field="PlatformSpecificOverrides" type="{74E4843B-0924-583D-8C6E-A37B09BD51FE}">
+			<Class name="AZStd::pair" field="element" type="{CAC4E67F-D626-5452-A057-ACB57D53F549}">
+				<Class name="AZStd::string" field="value1" value="es3" type="{03AAAB3F-5C47-5A66-9EBC-D5FA4DB353C9}"/>
+				<Class name="DataPatch" field="value2" type="{BFF7A3F5-9014-4000-92C7-9B2BC7913DA9}">
+					<Class name="AZ::Uuid" field="m_targetClassId" value="{980132FF-C450-425D-8AE0-BD96A8486177}" type="{E152C105-A133-4D03-BBF8-3D4B2FBA3E2A}"/>
+					<Class name="unsigned int" field="m_targetClassVersion" value="1" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+					<Class name="AZStd::unordered_map" field="m_patch" type="{CEA836FC-77E0-5E46-BD0F-2E5A39D845E9}"/>
+				</Class>
+			</Class>
+			<Class name="AZStd::pair" field="element" type="{CAC4E67F-D626-5452-A057-ACB57D53F549}">
+				<Class name="AZStd::string" field="value1" value="ios" type="{03AAAB3F-5C47-5A66-9EBC-D5FA4DB353C9}"/>
+				<Class name="DataPatch" field="value2" type="{BFF7A3F5-9014-4000-92C7-9B2BC7913DA9}">
+					<Class name="AZ::Uuid" field="m_targetClassId" value="{980132FF-C450-425D-8AE0-BD96A8486177}" type="{E152C105-A133-4D03-BBF8-3D4B2FBA3E2A}"/>
+					<Class name="unsigned int" field="m_targetClassVersion" value="1" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+					<Class name="AZStd::unordered_map" field="m_patch" type="{CEA836FC-77E0-5E46-BD0F-2E5A39D845E9}">
+						<Class name="AZStd::pair" field="element" type="{FED51EB4-F646-51FF-9646-9852CF90F353}">
+							<Class name="AddressType" field="value1" value="AZStd::map({74E4843B-0924-583D-8C6E-A37B09BD51FE})::PlatformSpecificOverrides·0/AZStd::pair({CAC4E67F-D626-5452-A057-ACB57D53F549})#0·0/" version="1" type="{90752F2D-CBD3-4EE9-9CDD-447E797C8408}"/>
+							<Class name="any" field="value2" type="{03924488-C7F4-4D6D-948B-ABC2D1AE2FD3}"/>
+						</Class>
+					</Class>
+				</Class>
+			</Class>
+			<Class name="AZStd::pair" field="element" type="{CAC4E67F-D626-5452-A057-ACB57D53F549}">
+				<Class name="AZStd::string" field="value1" value="osx_gl" type="{03AAAB3F-5C47-5A66-9EBC-D5FA4DB353C9}"/>
+				<Class name="DataPatch" field="value2" type="{BFF7A3F5-9014-4000-92C7-9B2BC7913DA9}">
+					<Class name="AZ::Uuid" field="m_targetClassId" value="{980132FF-C450-425D-8AE0-BD96A8486177}" type="{E152C105-A133-4D03-BBF8-3D4B2FBA3E2A}"/>
+					<Class name="unsigned int" field="m_targetClassVersion" value="1" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+					<Class name="AZStd::unordered_map" field="m_patch" type="{CEA836FC-77E0-5E46-BD0F-2E5A39D845E9}">
+						<Class name="AZStd::pair" field="element" type="{FED51EB4-F646-51FF-9646-9852CF90F353}">
+							<Class name="AddressType" field="value1" value="AZStd::map({74E4843B-0924-583D-8C6E-A37B09BD51FE})::PlatformSpecificOverrides·0/AZStd::pair({CAC4E67F-D626-5452-A057-ACB57D53F549})#1·0/" version="1" type="{90752F2D-CBD3-4EE9-9CDD-447E797C8408}"/>
+							<Class name="any" field="value2" type="{03924488-C7F4-4D6D-948B-ABC2D1AE2FD3}"/>
+						</Class>
+						<Class name="AZStd::pair" field="element" type="{FED51EB4-F646-51FF-9646-9852CF90F353}">
+							<Class name="AddressType" field="value1" value="AZStd::map({74E4843B-0924-583D-8C6E-A37B09BD51FE})::PlatformSpecificOverrides·0/AZStd::pair({CAC4E67F-D626-5452-A057-ACB57D53F549})#0·0/" version="1" type="{90752F2D-CBD3-4EE9-9CDD-447E797C8408}"/>
+							<Class name="any" field="value2" type="{03924488-C7F4-4D6D-948B-ABC2D1AE2FD3}"/>
+						</Class>
+					</Class>
+				</Class>
+			</Class>
+			<Class name="AZStd::pair" field="element" type="{CAC4E67F-D626-5452-A057-ACB57D53F549}">
+				<Class name="AZStd::string" field="value1" value="pc" type="{03AAAB3F-5C47-5A66-9EBC-D5FA4DB353C9}"/>
+				<Class name="DataPatch" field="value2" type="{BFF7A3F5-9014-4000-92C7-9B2BC7913DA9}">
+					<Class name="AZ::Uuid" field="m_targetClassId" value="{980132FF-C450-425D-8AE0-BD96A8486177}" type="{E152C105-A133-4D03-BBF8-3D4B2FBA3E2A}"/>
+					<Class name="unsigned int" field="m_targetClassVersion" value="1" type="{43DA906B-7DEF-4CA8-9790-854106D3F983}"/>
+					<Class name="AZStd::unordered_map" field="m_patch" type="{CEA836FC-77E0-5E46-BD0F-2E5A39D845E9}"/>
+				</Class>
+			</Class>
+		</Class>
+		<Class name="AZStd::string" field="OverridingPlatform" value="" type="{03AAAB3F-5C47-5A66-9EBC-D5FA4DB353C9}"/>
+	</Class>
+</ObjectStream>
+

Gems/LyShine/Code/Editor/EditorWindow.cpp

@@ -1451,7 +1451,6 @@ void EditorWindow::OnEditorNotifyEvent(EEditorNotifyEvent ev)
     {
         // change skin
         RefreshEditorMenu();
-        m_viewport->UpdateViewportBackground();
         break;
     }
     case eNotify_OnUpdateViewports:

Gems/LyShine/Code/Editor/QtHelpers.cpp

@@ -13,6 +13,8 @@
 
 #include "EditorCommon.h"
 
+#include <QtGui/private/qhighdpiscaling_p.h>
+
 namespace QtHelpers
 {
     AZ::Vector2 QPointFToVector2(const QPointF& point)
@@ -34,4 +36,18 @@ namespace QtHelpers
         return inWidget;
     }
 
+    float GetHighDpiScaleFactor(const QWidget& widget)
+    {
+        float dpiScale = QHighDpiScaling::factor(widget.windowHandle()->screen());
+        return dpiScale;
+    }
+
+    QSize GetDpiScaledViewportSize(const QWidget& widget)
+    {
+        float dpiScale = GetHighDpiScaleFactor(widget);
+        float width = ceilf(widget.size().width() * dpiScale);
+        float height = ceilf(widget.size().height() * dpiScale);
+        return QSize(width, height);        
+    }
+
 }   // namespace QtHelpers

Gems/LyShine/Code/Editor/QtHelpers.h

@@ -21,4 +21,8 @@ namespace QtHelpers
 
     bool IsGlobalPosInWidget(const QWidget* widget, const QPoint& pos);
 
+    float GetHighDpiScaleFactor(const QWidget& widget);
+
+    QSize GetDpiScaledViewportSize(const QWidget& widget);
+
 }   // namespace QtHelpers

Gems/LyShine/Code/Editor/ViewportAnchor.cpp

@@ -14,10 +14,10 @@
 #include "EditorCommon.h"
 
 ViewportAnchor::ViewportAnchor()
-    : m_anchorWhole(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Anchor_Whole.tif"))
-    , m_anchorLeft(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Anchor_Left.tif"))
-    , m_anchorLeftTop(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Anchor_TopLeft.tif"))
-    , m_dottedLine(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/DottedLine.tif"))
+    : m_anchorWhole(new ViewportIcon("Editor/Icons/Viewport/Anchor_Whole.tif"))
+    , m_anchorLeft(new ViewportIcon("Editor/Icons/Viewport/Anchor_Left.tif"))
+    , m_anchorLeftTop(new ViewportIcon("Editor/Icons/Viewport/Anchor_TopLeft.tif"))
+    , m_dottedLine(new ViewportIcon("Editor/Icons/Viewport/DottedLine.tif"))
 {
 }
 

Gems/LyShine/Code/Editor/ViewportCanvasBackground.cpp

@@ -15,7 +15,7 @@
 #include "EditorCommon.h"
 
 ViewportCanvasBackground::ViewportCanvasBackground()
-    : m_canvasBackground(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Canvas_Background.tif"))
+    : m_canvasBackground(new ViewportIcon("Editor/Icons/Viewport/Canvas_Background.tif"))
 {
 }
 

Gems/LyShine/Code/Editor/ViewportHelpers.h

@@ -17,7 +17,6 @@ namespace ViewportHelpers
 {
     //-------------------------------------------------------------------------------
 
-    const AZ::Color backgroundColorLight(0.85f, 0.85f, 0.85f, 1.0f);
     const AZ::Color backgroundColorDark(0.133f, 0.137f, 0.149f, 1.0f);      // #222236, RGBA: 34, 35, 38, 255
     const AZ::Color selectedColor(1.000f, 1.000f, 1.000f, 1.0f);            // #FFFFFF, RGBA: 255, 255, 255, 255
     const AZ::Color unselectedColor(0.800f, 0.800f, 0.800f, 0.500f);        // #CCCCCC, RGBA: 204, 204, 204, 128

Gems/LyShine/Code/Editor/ViewportHighlight.cpp

@@ -14,8 +14,8 @@
 #include "EditorCommon.h"
 
 ViewportHighlight::ViewportHighlight()
-    : m_highlightIconSelected(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Border_Selected.tif"))
-    , m_highlightIconUnselected(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Border_Unselected.tif"))
+    : m_highlightIconSelected(new ViewportIcon("Editor/Icons/Viewport/Border_Selected.tif"))
+    , m_highlightIconUnselected(new ViewportIcon("Editor/Icons/Viewport/Border_Unselected.tif"))
 {
 }
 

Gems/LyShine/Code/Editor/ViewportIcon.cpp

@@ -17,6 +17,8 @@
 #include <Atom/RPI.Public/Image/StreamingImage.h>
 #include <Atom/RPI.Reflect/Image/StreamingImageAsset.h>
 
+float ViewportIcon::m_dpiScaleFactor = 1.0f;
+
 ViewportIcon::ViewportIcon(const char* textureFilename)
 {
     m_image = CDraw2d::LoadTexture(textureFilename);
@@ -31,7 +33,12 @@ AZ::Vector2 ViewportIcon::GetTextureSize() const
     if (m_image)
     {
         AZ::RHI::Size size = m_image->GetDescriptor().m_size;
-        return AZ::Vector2(size.m_width, size.m_height);
+        AZ::Vector2 scaledSize(size.m_width, size.m_height);
+        if (m_applyDpiScaleFactorToSize)
+        {
+            scaledSize *= m_dpiScaleFactor;
+        }
+        return scaledSize;
     }
 
     return AZ::Vector2(0.0f, 0.0f);
@@ -380,5 +387,6 @@ void ViewportIcon::DrawElementRectOutline(Draw2dHelper& draw2d, AZ::EntityId ent
     rightVec.NormalizeSafe();
     downVec.NormalizeSafe();
 
-    draw2d.DrawRectOutlineTextured(m_image, points, rightVec, downVec, color);
+    uint32_t lineThickness = aznumeric_cast<uint32_t>(GetTextureSize().GetY());
+    draw2d.DrawRectOutlineTextured(m_image, points, rightVec, downVec, color, lineThickness);
 }

Gems/LyShine/Code/Editor/ViewportIcon.h

@@ -49,6 +49,21 @@ public:
     // width of the border (but the texture can have alpha at edges to make it thinner).
     void DrawElementRectOutline(Draw2dHelper& draw2d, AZ::EntityId entityId, AZ::Color color);
 
+    // Set whether to apply high resolution dpi scaling to the icon size
+    void SetApplyDpiScaleFactorToSize(bool apply) { m_applyDpiScaleFactorToSize = apply; }
+
+    // Get whether to apply high resolution dpi scaling to the icon size
+    bool GetApplyDpiScaleFactorToSize() { return m_applyDpiScaleFactorToSize; }
+
+    // Set scale factor
+    static void SetDpiScaleFactor(float scale) { m_dpiScaleFactor = scale; }
+
+    // Get scale factor
+    static float GetDpiScaleFactor() { return m_dpiScaleFactor; }
+
 private:
     AZ::Data::Instance<AZ::RPI::Image> m_image;
+    bool m_applyDpiScaleFactorToSize = true;
+
+    static float m_dpiScaleFactor;
 };

Gems/LyShine/Code/Editor/ViewportInteraction.cpp

@@ -167,8 +167,8 @@ ViewportInteraction::ViewportInteraction(EditorWindow* editorWindow)
     : QObject()
     , m_editorWindow(editorWindow)
     , m_activeElementId()
-    , m_anchorWhole(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Anchor_Whole.tif"))
-    , m_pivotIcon(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Pivot.tif"))
+    , m_anchorWhole(new ViewportIcon("Editor/Icons/Viewport/Anchor_Whole.tif"))
+    , m_pivotIcon(new ViewportIcon("Editor/Icons/Viewport/Pivot.tif"))
     , m_interactionMode(PersistentGetInteractionMode())
     , m_interactionType(InteractionType::NONE)
     , m_coordinateSystem(PersistentGetCoordinateSystem())
@@ -186,13 +186,13 @@ ViewportInteraction::ViewportInteraction(EditorWindow* editorWindow)
     , m_startAnchors(UiTransform2dInterface::Anchors())
     , m_grabbedAnchors(ViewportHelpers::SelectedAnchors())
     , m_grabbedGizmoParts(ViewportHelpers::GizmoParts())
-    , m_lineTriangleX(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Transform_Gizmo_Line_Triangle_X.tif"))
-    , m_lineTriangleY(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Transform_Gizmo_Line_Triangle_Y.tif"))
-    , m_circle(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Transform_Gizmo_Circle.tif"))
-    , m_lineSquareX(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Transform_Gizmo_Line_Square_X.tif"))
-    , m_lineSquareY(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Transform_Gizmo_Line_Square_Y.tif"))
-    , m_centerSquare(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Transform_Gizmo_Center_Square.tif"))
-    , m_dottedLine(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/DottedLine.tif"))
+    , m_lineTriangleX(new ViewportIcon("Editor/Icons/Viewport/Transform_Gizmo_Line_Triangle_X.tif"))
+    , m_lineTriangleY(new ViewportIcon("Editor/Icons/Viewport/Transform_Gizmo_Line_Triangle_Y.tif"))
+    , m_circle(new ViewportIcon("Editor/Icons/Viewport/Transform_Gizmo_Circle.tif"))
+    , m_lineSquareX(new ViewportIcon("Editor/Icons/Viewport/Transform_Gizmo_Line_Square_X.tif"))
+    , m_lineSquareY(new ViewportIcon("Editor/Icons/Viewport/Transform_Gizmo_Line_Square_Y.tif"))
+    , m_centerSquare(new ViewportIcon("Editor/Icons/Viewport/Transform_Gizmo_Center_Square.tif"))
+    , m_dottedLine(new ViewportIcon("Editor/Icons/Viewport/DottedLine.tif"))
     , m_dragInteraction(nullptr)
     , m_expanderWatcher(new ViewportInteractionExpanderWatcher(this))
 {
@@ -908,8 +908,9 @@ void ViewportInteraction::GetScaleToFitTransformProps(const AZ::Vector2* newCanv
         EBUS_EVENT_ID_RESULT(canvasSize, m_editorWindow->GetCanvas(), UiCanvasBus, GetCanvasSize);
     }
 
-    const int viewportWidth = m_editorWindow->GetViewport()->size().width();
-    const int viewportHeight = m_editorWindow->GetViewport()->size().height();
+    QSize viewportSize = QtHelpers::GetDpiScaledViewportSize(*m_editorWindow->GetViewport());
+    const int viewportWidth = viewportSize.width();
+    const int viewportHeight = viewportSize.height();
 
     // We pad the edges of the viewport to allow the user to easily see the borders of
     // the canvas edges, which is especially helpful if there are anchors sitting on

Gems/LyShine/Code/Editor/ViewportPivot.cpp

@@ -15,7 +15,7 @@
 #include "ViewportPivot.h"
 
 ViewportPivot::ViewportPivot()
-    : m_pivot(new ViewportIcon("Plugins/UiCanvasEditor/CanvasIcons/Pivot.tif"))
+    : m_pivot(new ViewportIcon("Editor/Icons/Viewport/Pivot.tif"))
 {
 }
 

Gems/LyShine/Code/Editor/ViewportWidget.cpp

@@ -38,6 +38,7 @@
 
 #include <Atom/RPI.Public/Scene.h>
 #include <Atom/RPI.Public/RenderPipeline.h>
+#include <Atom/RPI.Public/Image/ImageSystemInterface.h>
 
 #define UICANVASEDITOR_SETTINGS_VIEWPORTWIDGET_DRAW_ELEMENT_BORDERS_KEY         "ViewportWidget::m_drawElementBordersFlags"
 #define UICANVASEDITOR_SETTINGS_VIEWPORTWIDGET_DRAW_ELEMENT_BORDERS_DEFAULT     ( ViewportWidget::DrawElementBorders_Unselected )
@@ -220,8 +221,6 @@ ViewportWidget::ViewportWidget(EditorWindow* parent)
 {
     setAcceptDrops(true);
 
-    UpdateViewportBackground();
-
     InitUiRenderer();
 
     SetupShortcuts();
@@ -299,19 +298,6 @@ void ViewportWidget::ToggleDrawElementBorders(uint32 flags)
     SetDrawElementBordersFlags(m_drawElementBordersFlags);
 }
 
-void ViewportWidget::UpdateViewportBackground()
-{
-    const QColor backgroundColor(ViewportHelpers::backgroundColorDark.GetR8(),
-        ViewportHelpers::backgroundColorDark.GetG8(),
-        ViewportHelpers::backgroundColorDark.GetB8(),
-        ViewportHelpers::backgroundColorDark.GetA8());
-
-    QPalette pal(palette());
-    pal.setColor(QPalette::Window, backgroundColor);
-    setPalette(pal);
-    setAutoFillBackground(true);
-}
-
 void ViewportWidget::ActiveCanvasChanged()
 {
     bool canvasLoaded = m_editorWindow->GetCanvas().IsValid();
@@ -519,6 +505,9 @@ void ViewportWidget::OnTick(float deltaTime, [[maybe_unused]] AZ::ScriptTimePoin
     gEnv->pRenderer->SetSrgbWrite(true);
 #endif
 
+    const float dpiScale = QtHelpers::GetHighDpiScaleFactor(*this);
+    ViewportIcon::SetDpiScaleFactor(dpiScale);
+
     // Set up to render a frame to this viewport's window
     GetViewportContext()->RenderTick();
 
@@ -554,7 +543,9 @@ void ViewportWidget::RefreshTick()
 void ViewportWidget::mousePressEvent(QMouseEvent* ev)
 {
     UiEditorMode editorMode = m_editorWindow->GetEditorMode();
-    QMouseEvent scaledEvent(ev->type(), WidgetToViewport(ev->localPos()), ev->button(), ev->buttons(), ev->modifiers());
+
+    QPointF scaledPosition = WidgetToViewport(ev->localPos());
+    QMouseEvent scaledEvent(ev->type(), scaledPosition, ev->button(), ev->buttons(), ev->modifiers());
     if (editorMode == UiEditorMode::Edit)
     {
         // in Edit mode just send input to ViewportInteraction
@@ -569,8 +560,7 @@ void ViewportWidget::mousePressEvent(QMouseEvent* ev)
             if (ev->button() == Qt::LeftButton)
             {
                 // Send event to this canvas
-                QPointF scaledPos = WidgetToViewport(ev->localPos());
-                const AZ::Vector2 viewportPosition(aznumeric_cast<float>(scaledPos.x()), aznumeric_cast<float>(scaledPos.y()));
+                const AZ::Vector2 viewportPosition(aznumeric_cast<float>(scaledPosition.x()), aznumeric_cast<float>(scaledPosition.y()));
                 const AzFramework::InputChannel::Snapshot inputSnapshot(AzFramework::InputDeviceMouse::Button::Left,
                                                                         AzFramework::InputDeviceMouse::Id,
                                                                         AzFramework::InputChannel::State::Began);
@@ -588,7 +578,9 @@ void ViewportWidget::mousePressEvent(QMouseEvent* ev)
 void ViewportWidget::mouseMoveEvent(QMouseEvent* ev)
 {
     UiEditorMode editorMode = m_editorWindow->GetEditorMode();
-    QMouseEvent scaledEvent(ev->type(), WidgetToViewport(ev->localPos()), ev->button(), ev->buttons(), ev->modifiers());
+
+    QPointF scaledPosition = WidgetToViewport(ev->localPos());
+    QMouseEvent scaledEvent(ev->type(), scaledPosition, ev->button(), ev->buttons(), ev->modifiers());
 
     if (editorMode == UiEditorMode::Edit)
     {
@@ -596,7 +588,8 @@ void ViewportWidget::mouseMoveEvent(QMouseEvent* ev)
         m_viewportInteraction->MouseMoveEvent(&scaledEvent,
             m_editorWindow->GetHierarchy()->selectedItems());
 
-        SetRulerCursorPositions(ev->globalPos());
+        QPointF screenPosition = WidgetToViewport(ev->screenPos());
+        SetRulerCursorPositions(screenPosition.toPoint());
     }
     else // if (editorMode == UiEditorMode::Preview)
     {
@@ -604,8 +597,7 @@ void ViewportWidget::mouseMoveEvent(QMouseEvent* ev)
         AZ::EntityId canvasEntityId = m_editorWindow->GetPreviewModeCanvas();
         if (canvasEntityId.IsValid())
         {
-            QPointF scaledPos = WidgetToViewport(ev->localPos());
-            const AZ::Vector2 viewportPosition(aznumeric_cast<float>(scaledPos.x()), aznumeric_cast<float>(scaledPos.y()));
+            const AZ::Vector2 viewportPosition(aznumeric_cast<float>(scaledPosition.x()), aznumeric_cast<float>(scaledPosition.y()));
             const AzFramework::InputChannelId& channelId = (ev->buttons() & Qt::LeftButton) ?
                                                             AzFramework::InputDeviceMouse::Button::Left :
                                                             AzFramework::InputDeviceMouse::SystemCursorPosition;
@@ -625,7 +617,9 @@ void ViewportWidget::mouseMoveEvent(QMouseEvent* ev)
 void ViewportWidget::mouseReleaseEvent(QMouseEvent* ev)
 {
     UiEditorMode editorMode = m_editorWindow->GetEditorMode();
-    QMouseEvent scaledEvent(ev->type(), WidgetToViewport(ev->localPos()), ev->button(), ev->buttons(), ev->modifiers());
+
+    QPointF scaledPosition = WidgetToViewport(ev->localPos());
+    QMouseEvent scaledEvent(ev->type(), scaledPosition, ev->button(), ev->buttons(), ev->modifiers());
     if (editorMode == UiEditorMode::Edit)
     {
         // in Edit mode just send input to ViewportInteraction
@@ -641,8 +635,7 @@ void ViewportWidget::mouseReleaseEvent(QMouseEvent* ev)
             if (ev->button() == Qt::LeftButton)
             {
                 // Send event to this canvas
-                QPointF scaledPos = WidgetToViewport(ev->localPos());
-                const AZ::Vector2 viewportPosition(aznumeric_cast<float>(scaledPos.x()), aznumeric_cast<float>(scaledPos.y()));
+                const AZ::Vector2 viewportPosition(aznumeric_cast<float>(scaledPosition.x()), aznumeric_cast<float>(scaledPosition.y()));
                 const AzFramework::InputChannel::Snapshot inputSnapshot(AzFramework::InputDeviceMouse::Button::Left,
                                                                         AzFramework::InputDeviceMouse::Id,
                                                                         AzFramework::InputChannel::State::Ended);
@@ -726,7 +719,7 @@ bool ViewportWidget::event(QEvent* ev)
         }
     }
     
-    bool result = QWidget::event(ev);
+    bool result = RenderViewportWidget::event(ev);
     return result;
 }
 
@@ -931,14 +924,16 @@ void ViewportWidget::RenderEditMode(float deltaTime)
     EBUS_EVENT_ID_RESULT(canvasSize, canvasEntityId, UiCanvasBus, GetCanvasSize);
 
     m_draw2d->SetSortKey(backgroundKey);
+
+    // Render a rectangle covering the entire editor viewport area
+    RenderViewportBackground();
+
+    // Render a checkerboard background covering the canvas area which represents transparency  
     m_viewportBackground->Draw(draw2d,
         canvasSize,
         m_viewportInteraction->GetCanvasToViewportScale(),
         m_viewportInteraction->GetCanvasToViewportTranslation());
 
-    AZ::Vector2 viewportSize(aznumeric_cast<float>(size().width()), aznumeric_cast<float>(size().height()));
-    viewportSize *= QHighDpiScaling::factor(windowHandle()->screen());
-
 #ifdef LYSHINE_ATOM_TODO
     // clear the stencil buffer before rendering each canvas - required for masking
     // NOTE: the FRT_CLEAR_IMMEDIATE is required since we will not be setting the render target
@@ -953,6 +948,8 @@ void ViewportWidget::RenderEditMode(float deltaTime)
     EBUS_EVENT_ID(canvasEntityId, UiEditorCanvasBus, UpdateCanvasInEditorViewport, deltaTime, false);
 
     // Render this canvas
+    QSize scaledViewportSize = QtHelpers::GetDpiScaledViewportSize(*this);
+    AZ::Vector2 viewportSize(scaledViewportSize.width(), scaledViewportSize.height());
     EBUS_EVENT_ID(canvasEntityId, UiEditorCanvasBus, RenderCanvasInEditorViewport, false, viewportSize);
 
     m_draw2d->SetSortKey(topLayerKey);
@@ -1050,6 +1047,9 @@ void ViewportWidget::RenderEditMode(float deltaTime)
 
 void ViewportWidget::RenderPreviewMode(float deltaTime)
 {
+    // sort keys for different layers
+    static const int64_t backgroundKey = -0x1000;
+
     AZ::EntityId canvasEntityId = m_editorWindow->GetPreviewModeCanvas();
 
     if (m_fontTextureHasChanged)
@@ -1072,10 +1072,10 @@ void ViewportWidget::RenderPreviewMode(float deltaTime)
 
     if (canvasEntityId.IsValid())
     {
-        // Get the canvas size
-        AZ::Vector2 viewportSize(aznumeric_cast<float>(size().width()), aznumeric_cast<float>(size().height()));
-        viewportSize *= QHighDpiScaling::factor(windowHandle()->screen());
+        QSize scaledViewportSize = QtHelpers::GetDpiScaledViewportSize(*this);
+        AZ::Vector2 viewportSize(scaledViewportSize.width(), scaledViewportSize.height());
 
+        // Get the canvas size
         AZ::Vector2 canvasSize = m_editorWindow->GetPreviewCanvasSize();
         if (canvasSize.GetX() == 0.0f && canvasSize.GetY() == 0.0f)
         {
@@ -1139,7 +1139,7 @@ void ViewportWidget::RenderPreviewMode(float deltaTime)
         canvasToViewportMatrix.SetTranslation(translation);
         EBUS_EVENT_ID(canvasEntityId, UiCanvasBus, SetCanvasToViewportMatrix, canvasToViewportMatrix);
 
-#ifdef LYSHINE_ATOM_TODO
+#ifdef LYSHINE_ATOM_TODO // mask support with Atom
         // clear the stencil buffer before rendering each canvas - required for masking
         // NOTE: the FRT_CLEAR_IMMEDIATE is required since we will not be setting the render target
         // We also clear the color to a mid grey so that we can see the bounds of the canvas
@@ -1147,16 +1147,18 @@ void ViewportWidget::RenderPreviewMode(float deltaTime)
         gEnv->pRenderer->ClearTargetsImmediately(FRT_CLEAR, viewportBackgroundColor);
 #endif
 
-#ifdef LYSHINE_ATOM_TODO
+        m_draw2d->SetSortKey(backgroundKey);
+
+        RenderViewportBackground();
+
         // Render a black rectangle covering the canvas area. This allows the canvas bounds to be visible when the canvas size is
         // not exactly the same as the viewport size
         AZ::Vector2 topLeftInViewportSpace = CanvasHelpers::GetViewportPoint(canvasEntityId, AZ::Vector2(0.0f, 0.0f));
         AZ::Vector2 bottomRightInViewportSpace = CanvasHelpers::GetViewportPoint(canvasEntityId, canvasSize);
         AZ::Vector2 sizeInViewportSpace = bottomRightInViewportSpace - topLeftInViewportSpace;
-        Draw2dHelper draw2d(m_draw2d.get())
-        int texId = gEnv->pRenderer->GetBlackTextureId();
-        draw2d.DrawImage(texId, topLeftInViewportSpace, sizeInViewportSpace);
-#endif
+        Draw2dHelper draw2d(m_draw2d.get());
+        auto image = AZ::RPI::ImageSystemInterface::Get()->GetSystemImage(AZ::RPI::SystemImage::Black);
+        draw2d.DrawImage(image, topLeftInViewportSpace, sizeInViewportSpace);
 
         // Render this canvas
         // NOTE: the displayBounds param is always false. If we wanted a debug option to display the bounds
@@ -1166,6 +1168,17 @@ void ViewportWidget::RenderPreviewMode(float deltaTime)
     }
 }
 
+void ViewportWidget::RenderViewportBackground()
+{
+    QSize viewportSize = QtHelpers::GetDpiScaledViewportSize(*this);
+    AZ::Color backgroundColor = ViewportHelpers::backgroundColorDark;
+    const AZ::Data::Instance<AZ::RPI::Image>& image = AZ::RPI::ImageSystemInterface::Get()->GetSystemImage(AZ::RPI::SystemImage::White);
+
+    Draw2dHelper draw2d(m_draw2d.get());
+    draw2d.SetImageColor(backgroundColor.GetAsVector3());
+    draw2d.DrawImage(image, AZ::Vector2(0.0f, 0.0f), AZ::Vector2(viewportSize.width(), viewportSize.height()));
+}
+
 void ViewportWidget::SetupShortcuts()
 {
     // Actions with shortcuts are created instead of direct shortcuts because the shortcut dispatcher only looks for matching actions

Gems/LyShine/Code/Editor/ViewportWidget.h

@@ -54,8 +54,6 @@ public: // member functions
     bool IsDrawingElementBorders(uint32 flags) const;
     void ToggleDrawElementBorders(uint32 flags);
 
-    void UpdateViewportBackground();
-
     void ActiveCanvasChanged();
     void EntityContextChanged();
 
@@ -154,6 +152,9 @@ private: // member functions
     //! Render the viewport when in preview mode
     void RenderPreviewMode(float deltaTime);
 
+    //! Fill the entire viewport area with a background color
+    void RenderViewportBackground();
+
     //! Create shortcuts for manipulating the viewport
     void SetupShortcuts();
 

Gems/LyShine/Code/Include/LyShine/Draw2d.h

@@ -131,16 +131,18 @@ public: // member functions
 
     //! Draw a rectangular outline with a texture
     //
-    //! \param image        The texture to be used for drawing the outline
-    //! \param points       The rect's vertices (top left, top right, bottom right, bottom left)
-    //! \param rightVec     Right vector. Specified because the rect's width/height could be 0 
-    //! \param downVec      Down vector. Specified because the rect's width/height could be 0
-    //! \param color        The color of the outline
+    //! \param image            The texture to be used for drawing the outline
+    //! \param points           The rect's vertices (top left, top right, bottom right, bottom left)
+    //! \param rightVec         Right vector. Specified because the rect's width/height could be 0 
+    //! \param downVec          Down vector. Specified because the rect's width/height could be 0
+    //! \param color            The color of the outline
+    //! \param lineThickness    The thickness in pixels of the outline. If 0, it will be based on image height
     void DrawRectOutlineTextured(AZ::Data::Instance<AZ::RPI::Image> image,
         UiTransformInterface::RectPoints points,
         AZ::Vector2 rightVec,
         AZ::Vector2 downVec,
-        AZ::Color color);
+        AZ::Color color,
+        uint32_t lineThickness = 0);
 
     //! Get the width and height (in pixels) that would be used to draw the given text string.
     //
@@ -439,11 +441,12 @@ public: // member functions
         UiTransformInterface::RectPoints points,
         AZ::Vector2 rightVec,
         AZ::Vector2 downVec,
-        AZ::Color color)
+        AZ::Color color,
+        uint32_t lineThickness = 0)
     {
         if (m_draw2d)
         {
-            m_draw2d->DrawRectOutlineTextured(image, points, rightVec, downVec, color);
+            m_draw2d->DrawRectOutlineTextured(image, points, rightVec, downVec, color, lineThickness);
         }
     }
 

Gems/LyShine/Code/Source/Draw2d.cpp

@@ -309,7 +309,8 @@ void CDraw2d::DrawRectOutlineTextured(AZ::Data::Instance<AZ::RPI::Image> image,
     UiTransformInterface::RectPoints points,
     AZ::Vector2 rightVec,
     AZ::Vector2 downVec,
-    AZ::Color color)
+    AZ::Color color,
+    uint32_t lineThickness)
 {
     // since the rect can be transformed we have to add the offsets by multiplying them
     // by unit vectors parallel with the edges of the rect. However, the rect could be
@@ -325,18 +326,22 @@ void CDraw2d::DrawRectOutlineTextured(AZ::Data::Instance<AZ::RPI::Image> image,
     float rectWidth = widthVec.GetLength();
     float rectHeight = heightVec.GetLength();
 
-    // the outline thickness will be based on the texture height
-    float textureHeight = image ? aznumeric_cast<float>(image->GetDescriptor().m_size.m_height) : 0.0f;
-    if (textureHeight <= 0.0f)
+    if (lineThickness == 0 && image)
     {
-        AZ_Assert(false, "Attempting to draw a textured rect outline with an image of zero height.");
-        return; // avoiding possible divide by zero later
+        lineThickness = image->GetDescriptor().m_size.m_height;
+    }
+
+    if (lineThickness == 0)
+    {
+        AZ_Assert(false, "Attempting to draw a rect outline with of zero thickness.");
+        return;
     }
 
     // the outline is centered on the element rect so half the outline is outside
     // the rect and half is inside the rect
-    float outerOffset = -textureHeight * 0.5f;
-    float innerOffset = textureHeight * 0.5f;
+    float offset = aznumeric_cast<float>(lineThickness);
+    float outerOffset = -offset * 0.5f;
+    float innerOffset = offset * 0.5f;
     float outerV = 0.0f;
     float innerV = 1.0f;
 
@@ -348,7 +353,7 @@ void CDraw2d::DrawRectOutlineTextured(AZ::Data::Instance<AZ::RPI::Image> image,
     {
         float oldInnerOffset = innerOffset;
         innerOffset = minDimension * 0.5f;
-        // note oldInnerOffset can't be zero because of early return if textureHeight is zero
+        // note oldInnerOffset can't be zero because of early return if lineThickness is zero
         innerV = 0.5f + 0.5f * innerOffset / oldInnerOffset;
     }