Added modified version of RmlUi's ElementSVG that reduces the image dimensions to avoid unnecessarily large baked SVG textures

CMakeLists.txt

@@ -22,7 +22,7 @@ set(BUILD_SHARED_LIBS OFF)
 SET(LUNASVG_BUILD_EXAMPLES OFF CACHE BOOL "" FORCE)
 add_subdirectory(${CMAKE_SOURCE_DIR}/lib/lunasvg)
 # set(BUILD_SHARED_LIBS "${BUILD_SHARED_LIBS_SAVED}")
-SET(ENABLE_SVG_PLUGIN ON CACHE BOOL "" FORCE)
+SET(ENABLE_SVG_PLUGIN OFF CACHE BOOL "" FORCE)
 add_subdirectory(${CMAKE_SOURCE_DIR}/lib/RmlUi)
 add_subdirectory(${CMAKE_SOURCE_DIR}/lib/nativefiledialog-extended)
 
@@ -135,6 +135,8 @@ set (SOURCES
     ${CMAKE_SOURCE_DIR}/src/ui/FontEngineScaled/FontFamily.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/FontEngineScaled/FontProvider.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/FontEngineScaled/FreeTypeInterface.cpp
+
+    ${CMAKE_SOURCE_DIR}/src/ui/ScaledSVG/ElementScaledSVG.cpp
     
     ${CMAKE_SOURCE_DIR}/rsp/aspMain.cpp
     ${CMAKE_SOURCE_DIR}/rsp/njpgdspMain.cpp

src/ui/FontEngineScaled/FontEngineInterfaceScaled.h

@@ -1,5 +1,5 @@
 /*
- * This source file is modified from a part, the HTML/CSS Interface Middleware
+ * This source file is modified from a part of RmlUi, the HTML/CSS Interface Middleware
  *
  * For the latest information, see http://github.com/mikke89/RmlUi
  *

src/ui/ScaledSVG/ElementScaledSVG.cpp

@@ -0,0 +1,216 @@
+/*
+ * This source file is modified from a part of RmlUi, the HTML/CSS Interface Middleware
+ *
+ * For the latest information, see http://github.com/mikke89/RmlUi
+ *
+ * Copyright (c) 2008-2010 CodePoint Ltd, Shift Technology Ltd
+ * Copyright (c) 2019-2023 The RmlUi Team, and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+#include "ElementScaledSVG.h"
+#include "../FontEngineScaled/FontTypes.h"
+#include "RmlUi/Core/ComputedValues.h"
+#include "RmlUi/Core/Core.h"
+#include "RmlUi/Core/ElementDocument.h"
+#include "RmlUi/Core/FileInterface.h"
+#include "RmlUi/Core/GeometryUtilities.h"
+#include "RmlUi/Core/Math.h"
+#include "RmlUi/Core/PropertyIdSet.h"
+#include "RmlUi/Core/RenderInterface.h"
+#include "RmlUi/Core/SystemInterface.h"
+#include <cmath>
+#include <lunasvg.h>
+#include <string.h>
+
+namespace RecompRml {
+
+using namespace Rml;
+
+ElementScaledSVG::ElementScaledSVG(const String& tag) : Element(tag) {}
+
+ElementScaledSVG::~ElementScaledSVG() {}
+
+bool ElementScaledSVG::GetIntrinsicDimensions(Vector2f& dimensions, float& ratio)
+{
+	if (source_dirty)
+		LoadSource();
+
+	dimensions = intrinsic_dimensions;
+
+	if (HasAttribute("width"))
+	{
+		dimensions.x = GetAttribute<float>("width", -1);
+	}
+	if (HasAttribute("height"))
+	{
+		dimensions.y = GetAttribute<float>("height", -1);
+	}
+
+	if (dimensions.y > 0)
+		ratio = dimensions.x / dimensions.y;
+
+	return true;
+}
+
+void ElementScaledSVG::OnRender()
+{
+	if (svg_document)
+	{
+		if (geometry_dirty)
+			GenerateGeometry();
+
+		UpdateTexture();
+		geometry.Render(GetAbsoluteOffset(BoxArea::Content));
+	}
+}
+
+void ElementScaledSVG::OnResize()
+{
+	geometry_dirty = true;
+	texture_dirty = true;
+}
+
+void ElementScaledSVG::OnAttributeChange(const ElementAttributes& changed_attributes)
+{
+	Element::OnAttributeChange(changed_attributes);
+
+	if (changed_attributes.count("src"))
+	{
+		source_dirty = true;
+		DirtyLayout();
+	}
+
+	if (changed_attributes.find("width") != changed_attributes.end() || changed_attributes.find("height") != changed_attributes.end())
+	{
+		DirtyLayout();
+	}
+}
+
+void ElementScaledSVG::OnPropertyChange(const PropertyIdSet& changed_properties)
+{
+	Element::OnPropertyChange(changed_properties);
+
+	if (changed_properties.Contains(PropertyId::ImageColor) || changed_properties.Contains(PropertyId::Opacity))
+	{
+		geometry_dirty = true;
+	}
+}
+
+void ElementScaledSVG::GenerateGeometry()
+{
+	geometry.Release(true);
+
+	Vector<Vertex>& vertices = geometry.GetVertices();
+	Vector<int>& indices = geometry.GetIndices();
+
+	vertices.resize(4);
+	indices.resize(6);
+
+	Vector2f texcoords[2] = {
+		{0.0f, 0.0f},
+		{1.0f, 1.0f},
+	};
+
+	const ComputedValues& computed = GetComputedValues();
+
+	const float opacity = computed.opacity();
+	Colourb quad_colour = computed.image_color();
+	quad_colour.alpha = (byte)(opacity * (float)quad_colour.alpha);
+
+	const Vector2f render_dimensions_f = GetBox().GetSize(BoxArea::Content).Round();
+	render_dimensions.x = int(render_dimensions_f.x) / RecompRml::global_font_scale;
+	render_dimensions.y = int(render_dimensions_f.y) / RecompRml::global_font_scale;
+
+	GeometryUtilities::GenerateQuad(&vertices[0], &indices[0], Vector2f(0, 0), render_dimensions_f, quad_colour, texcoords[0], texcoords[1]);
+
+	geometry_dirty = false;
+}
+
+bool ElementScaledSVG::LoadSource()
+{
+	source_dirty = false;
+	texture_dirty = true;
+	intrinsic_dimensions = Vector2f{};
+	geometry.SetTexture(nullptr);
+	svg_document.reset();
+
+	const String attribute_src = GetAttribute<String>("src", "");
+
+	if (attribute_src.empty())
+		return false;
+
+	String path = attribute_src;
+	String directory;
+
+	if (ElementDocument* document = GetOwnerDocument())
+	{
+		const String document_source_url = StringUtilities::Replace(document->GetSourceURL(), '|', ':');
+		GetSystemInterface()->JoinPath(path, document_source_url, attribute_src);
+		GetSystemInterface()->JoinPath(directory, document_source_url, "");
+	}
+
+	String svg_data;
+
+	if (path.empty() || !GetFileInterface()->LoadFile(path, svg_data))
+	{
+		Log::Message(Rml::Log::Type::LT_WARNING, "Could not load SVG file %s", path.c_str());
+		return false;
+	}
+
+	// We use a reset-release approach here in case clients use a non-std unique_ptr (lunasvg uses std::unique_ptr)
+	svg_document.reset(lunasvg::Document::loadFromData(svg_data).release());
+
+	if (!svg_document)
+	{
+		Log::Message(Rml::Log::Type::LT_WARNING, "Could not load SVG data from file %s", path.c_str());
+		return false;
+	}
+
+	intrinsic_dimensions.x = Math::Max(float(svg_document->width()), 1.0f);
+	intrinsic_dimensions.y = Math::Max(float(svg_document->height()), 1.0f);
+
+	return true;
+}
+
+void ElementScaledSVG::UpdateTexture()
+{
+	if (!svg_document || !texture_dirty)
+		return;
+
+	// Callback for generating texture.
+	auto p_callback = [this](RenderInterface* render_interface, const String& /*name*/, TextureHandle& out_handle, Vector2i& out_dimensions) -> bool {
+		RMLUI_ASSERT(svg_document);
+		lunasvg::Bitmap bitmap = svg_document->renderToBitmap(render_dimensions.x, render_dimensions.y);
+		if (!bitmap.valid() || !bitmap.data())
+			return false;
+		if (!render_interface->GenerateTexture(out_handle, reinterpret_cast<const Rml::byte*>(bitmap.data()), render_dimensions))
+			return false;
+		out_dimensions = render_dimensions;
+		return true;
+	};
+
+	texture.Set("svg", p_callback);
+	geometry.SetTexture(&texture);
+	texture_dirty = false;
+}
+
+} // namespace Rml

src/ui/ScaledSVG/ElementScaledSVG.h

@@ -0,0 +1,98 @@
+/*
+ * This source file is modified from a part of RmlUi, the HTML/CSS Interface Middleware
+ *
+ * For the latest information, see http://github.com/mikke89/RmlUi
+ *
+ * Copyright (c) 2008-2010 CodePoint Ltd, Shift Technology Ltd
+ * Copyright (c) 2019-2023 The RmlUi Team, and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+#ifndef RMLUI_SVG_ELEMENT_SCALEDSVG_H
+#define RMLUI_SVG_ELEMENT_SCALEDSVG_H
+
+#include "RmlUi/Core/Element.h"
+#include "RmlUi/Core/Geometry.h"
+#include "RmlUi/Core/Header.h"
+#include "RmlUi/Core/Texture.h"
+
+namespace lunasvg {
+class Document;
+}
+
+namespace RecompRml {
+
+using namespace Rml;
+
+class RMLUICORE_API ElementScaledSVG : public Element {
+public:
+	RMLUI_RTTI_DefineWithParent(ElementScaledSVG, Element)
+
+	ElementScaledSVG(const String& tag);
+	virtual ~ElementScaledSVG();
+
+	/// Returns the element's inherent size.
+	bool GetIntrinsicDimensions(Vector2f& dimensions, float& ratio) override;
+
+protected:
+	/// Renders the image.
+	void OnRender() override;
+
+	/// Regenerates the element's geometry.
+	void OnResize() override;
+
+	/// Checks for changes to the image's source or dimensions.
+	/// @param[in] changed_attributes A list of attributes changed on the element.
+	void OnAttributeChange(const ElementAttributes& changed_attributes) override;
+
+	/// Called when properties on the element are changed.
+	/// @param[in] changed_properties The properties changed on the element.
+	void OnPropertyChange(const PropertyIdSet& changed_properties) override;
+
+private:
+	// Generates the element's geometry.
+	void GenerateGeometry();
+	// Loads the SVG document specified by the 'src' attribute.
+	bool LoadSource();
+	// Update the texture when necessary.
+	void UpdateTexture();
+
+	bool source_dirty = false;
+	bool geometry_dirty = false;
+	bool texture_dirty = false;
+
+	// The texture this element is rendering from.
+	Texture texture;
+
+	// The image's intrinsic dimensions.
+	Vector2f intrinsic_dimensions;
+	// The element's size for rendering.
+	Vector2i render_dimensions;
+
+	// The geometry used to render this element.
+	Geometry geometry;
+
+	UniquePtr<lunasvg::Document> svg_document;
+};
+
+} // namespace Rml
+
+#endif

src/ui/ui_renderer.cpp

@@ -27,6 +27,8 @@
 #endif
 
 #include "FontEngineScaled/FontEngineInterfaceScaled.h"
+#include "FontEngineScaled/FontTypes.h"
+#include "ScaledSVG/ElementScaledSVG.h"
 
 #ifdef _WIN32
 #    define GET_SHADER_BLOB(name, format) \
@@ -146,7 +148,6 @@ class RmlRenderInterface_RT64 : public Rml::RenderInterface {
     RT64::RenderCommandList* list_ = nullptr;
     bool scissor_enabled_ = false;
     std::vector<std::unique_ptr<RT64::RenderBuffer>> stale_buffers_{};
-    int32_t ui_scale_ = 1;
 public:
     RmlRenderInterface_RT64(struct UIRenderContext* render_context) {
         render_context_ = render_context;
@@ -379,7 +380,11 @@ public:
 
         list_->setViewports(RT64::RenderViewport{ 0, 0, float(window_width_), float(window_height_) });
         if (scissor_enabled_) {
-            list_->setScissors(RT64::RenderRect{ scissor_x_ / ui_scale_, scissor_y_ / ui_scale_, (scissor_width_ + scissor_x_) / ui_scale_, (scissor_height_ + scissor_y_) / ui_scale_ });
+            list_->setScissors(RT64::RenderRect{
+                scissor_x_ / RecompRml::global_font_scale,
+                scissor_y_ / RecompRml::global_font_scale,
+                (scissor_width_ + scissor_x_) / RecompRml::global_font_scale,
+                (scissor_height_ + scissor_y_) / RecompRml::global_font_scale });
         }
         else {
             list_->setScissors(RT64::RenderRect{ 0, 0, window_width_, window_height_ });
@@ -576,9 +581,8 @@ public:
         mvp_ = projection_mtx_ * transform_;
     }
 
-    void start(RT64::RenderCommandList* list, uint32_t image_width, uint32_t image_height, int32_t ui_scale) {
+    void start(RT64::RenderCommandList* list, uint32_t image_width, uint32_t image_height) {
         list_ = list;
-        ui_scale_ = ui_scale;
 
         if (multisampling_.sampleCount > 1) {
             if (window_width_ != image_width || window_height_ != image_height) {
@@ -603,7 +607,7 @@ public:
         window_width_ = image_width;
         window_height_ = image_height;
 
-        projection_mtx_ = Rml::Matrix4f::ProjectOrtho(0.0f, float(image_width * ui_scale), float(image_height * ui_scale), 0.0f, -10000, 10000);
+        projection_mtx_ = Rml::Matrix4f::ProjectOrtho(0.0f, float(image_width * RecompRml::global_font_scale), float(image_height * RecompRml::global_font_scale), 0.0f, -10000, 10000);
         recalculate_mvp();
 
         // The following code assumes command lists aren't double buffered.
@@ -738,9 +742,9 @@ struct {
         std::unique_ptr<SystemInterface_SDL> system_interface;
         std::unique_ptr<RmlRenderInterface_RT64> render_interface;
         std::unique_ptr<Rml::FontEngineInterface> font_interface;
+        std::unique_ptr<Rml::ElementInstancer> svg_instancer;
         Rml::Context* context;
         recomp::UiEventListenerInstancer event_listener_instancer;
-        int32_t ui_scale = 4;
         std::mutex draw_mutex;
 
         void unload() {
@@ -896,6 +900,10 @@ void init_hook(RT64::RenderInterface* interface, RT64::RenderDevice* device) {
     Rml::SetFontEngineInterface(UIContext.rml.font_interface.get());
 
     Rml::Initialise();
+    
+    UIContext.rml.svg_instancer = std::make_unique<Rml::ElementInstancerGeneric<RecompRml::ElementScaledSVG>>();
+
+    Rml::Factory::RegisterElementInstancer("svg", UIContext.rml.svg_instancer.get());
 
     // Apply the hack to replace RmlUi's default color parser with one that conforms to HTML5 alpha parsing for SASS compatibility
     recomp::apply_color_hack();
@@ -903,7 +911,7 @@ void init_hook(RT64::RenderInterface* interface, RT64::RenderDevice* device) {
     int width, height;
     SDL_GetWindowSizeInPixels(window, &width, &height);
     
-    UIContext.rml.context = Rml::CreateContext("main", Rml::Vector2i(width * UIContext.rml.ui_scale, height * UIContext.rml.ui_scale));
+    UIContext.rml.context = Rml::CreateContext("main", Rml::Vector2i(width * RecompRml::global_font_scale, height * RecompRml::global_font_scale));
     UIContext.rml.make_bindings();
 
     Rml::Debugger::Initialise(UIContext.rml.context);
@@ -985,24 +993,24 @@ void draw_hook(RT64::RenderCommandList* command_list, RT64::RenderFramebuffer* s
         // Scale coordinates for mouse and window events based on the UI scale
         switch (cur_event.type) {
         case SDL_EventType::SDL_MOUSEMOTION:
-            cur_event.motion.x *= UIContext.rml.ui_scale;
+            cur_event.motion.x *= RecompRml::global_font_scale;
-            cur_event.motion.y *= UIContext.rml.ui_scale;
+            cur_event.motion.y *= RecompRml::global_font_scale;
-            cur_event.motion.xrel *= UIContext.rml.ui_scale;
+            cur_event.motion.xrel *= RecompRml::global_font_scale;
-            cur_event.motion.yrel *= UIContext.rml.ui_scale;
+            cur_event.motion.yrel *= RecompRml::global_font_scale;
             break;
         case SDL_EventType::SDL_MOUSEBUTTONDOWN:
         case SDL_EventType::SDL_MOUSEBUTTONUP:
-            cur_event.button.x *= UIContext.rml.ui_scale;
+            cur_event.button.x *= RecompRml::global_font_scale;
-            cur_event.button.y *= UIContext.rml.ui_scale;
+            cur_event.button.y *= RecompRml::global_font_scale;
             break;
         case SDL_EventType::SDL_MOUSEWHEEL:
-            cur_event.wheel.x *= UIContext.rml.ui_scale;
+            cur_event.wheel.x *= RecompRml::global_font_scale;
-            cur_event.wheel.y *= UIContext.rml.ui_scale;
+            cur_event.wheel.y *= RecompRml::global_font_scale;
             break;
         case SDL_EventType::SDL_WINDOWEVENT:
             if (cur_event.window.event == SDL_WINDOWEVENT_SIZE_CHANGED) {
-                cur_event.window.data1 *= UIContext.rml.ui_scale;
+                cur_event.window.data1 *= RecompRml::global_font_scale;
-                cur_event.window.data2 *= UIContext.rml.ui_scale;
+                cur_event.window.data2 *= RecompRml::global_font_scale;
             }
             break;
         }
@@ -1053,16 +1061,15 @@ void draw_hook(RT64::RenderCommandList* command_list, RT64::RenderFramebuffer* s
         int height = swap_chain_framebuffer->getHeight();
 
         // Scale the UI based on the window size with 1080 vertical resolution as the reference point.
-        UIContext.rml.context->SetDensityIndependentPixelRatio((height * UIContext.rml.ui_scale) / 1080.0f);
+        UIContext.rml.context->SetDensityIndependentPixelRatio((height * RecompRml::global_font_scale) / 1080.0f);
 
-        UIContext.rml.render_interface->start(command_list, width, height, UIContext.rml.ui_scale);
+        UIContext.rml.render_interface->start(command_list, width, height);
 
         static int prev_width = 0;
         static int prev_height = 0;
 
         if (prev_width != width || prev_height != height) {
-            printf("changed to %d by %d\n", width, height);
+            UIContext.rml.context->SetDimensions({ (int)(width * RecompRml::global_font_scale), (int)(height * RecompRml::global_font_scale) });
-            UIContext.rml.context->SetDimensions({ (int)(width * UIContext.rml.ui_scale), (int)(height * UIContext.rml.ui_scale) });
         }
         prev_width = width;
         prev_height = height;