Engine: Add CSS support for the UI Kit #673

engine/includes/editor/viewport/viewport.h

@@ -42,6 +42,7 @@ class ENGINE_EXPORT Viewport : public QWidget {
     void setLiveUpdate(bool update);
 
     void setGameView(bool enabled);
+    void setSceneView(bool enabled);
 
     void setGridEnabled(bool enabled);
     void setGizmoEnabled(bool enabled);

engine/includes/resources/text.h

@@ -7,7 +7,7 @@ class ENGINE_EXPORT Text : public Resource {
     A_REGISTER(Text, Resource, Resources)
 
     A_PROPERTIES(
-        A_PROPERTY(int, size,  Text::size, Text::setSize)
+        A_PROPERTY(int, size, Text::size, Text::setSize)
     )
 
     A_METHODS(

engine/src/components/textrender.cpp

@@ -38,7 +38,11 @@ TextRender::TextRender() :
 
     Material *material = Engine::loadResource<Material>(".embedded/DefaultFont.shader");
     if(material) {
-        m_materials.push_back(material->createInstance());
+        MaterialInstance *instance = material->createInstance();
+        float fontWeight = 0.5f;
+        instance->setFloat("weight", &fontWeight);
+
+        m_materials.push_back(instance);
     }
 }
 

engine/src/editor/viewport/viewport.cpp

@@ -486,9 +486,7 @@ void Viewport::init() {
         PipelineTask *lastLayer = pipelineContext->renderTasks().back();
 
         if(!m_gameView) {
-            for(auto it : pipelineContext->renderTasks()) {
-                it->setProperty("sceneView", true);
-            }
+            setSceneView(true);
 
             m_gridRender = new GridRender;
             m_gridRender->setInput(0, lastLayer->output(0));
@@ -667,6 +665,14 @@ void Viewport::setGameView(bool enabled) {
     m_gameView = enabled;
 }
 
+void Viewport::setSceneView(bool enabled) {
+    PipelineContext *pipelineContext = m_renderSystem->pipelineContext();
+
+    for(auto it : pipelineContext->renderTasks()) {
+        it->setProperty("sceneView", enabled);
+    }
+}
+
 void Viewport::setGridEnabled(bool enabled) {
     m_gridRender->setEnabled(enabled);
 }

engine/src/gizmos.cpp

@@ -113,7 +113,7 @@ void Gizmos::drawBox(const Vector3 &center, const Vector3 &size, const Vector4 &
     Vector3 min(center - size * 0.5f);
     Vector3 max(center + size * 0.5f);
 
-    Mesh mesh;
+    static Mesh mesh;
     mesh.setVertices({
         Vector3(min.x, min.y, min.z),
         Vector3(max.x, min.y, min.z),
@@ -144,7 +144,7 @@ void Gizmos::drawIcon(const Vector3 &center, const Vector2 &size, const string &
     Matrix4 model(center, Quaternion(), Vector3(size, size.x));
     Matrix4 q = model * Matrix4(Camera::current()->transform()->quaternion().toMatrix());
 
-    Mesh mesh;
+    static Mesh mesh;
     mesh.setIndices({0, 1, 2, 0, 2, 3});
     mesh.setVertices({Vector3(-0.5f,-0.5f, 0.0f),
                       Vector3(-0.5f, 0.5f, 0.0f),
@@ -175,7 +175,7 @@ void Gizmos::drawIcon(const Vector3 &center, const Vector2 &size, const string &
     Draws a \a mesh with a specified \a color and \a transform.
 */
 void Gizmos::drawMesh(Mesh &mesh, const Vector4 &color, const Matrix4 &transform) {
-    Mesh m;
+    static Mesh m;
     m.setVertices(mesh.vertices());
     m.setIndices(mesh.indices());
     m.setNormals(mesh.normals());
@@ -230,7 +230,7 @@ void Gizmos::drawSphere(const Vector3 &center, float radius, const Vector4 &colo
         }
     }
 
-    Mesh mesh;
+    static Mesh mesh;
     mesh.setVertices(vertices);
     mesh.setIndices(indices);
     mesh.setColors(Vector4Vector(mesh.vertices().size(), color));
@@ -243,7 +243,7 @@ void Gizmos::drawSphere(const Vector3 &center, float radius, const Vector4 &colo
     Parameter \a transform can be used to move, rotate and scale this arc.
 */
 void Gizmos::drawSolidArc(const Vector3 &center, float radius, float start, float angle, const Vector4 &color, const Matrix4 &transform) {
-    Mesh mesh;
+    static Mesh mesh;
     mesh.setVertices(Mathf::pointsArc(Quaternion(), radius, start, angle, 180, true));
     size_t size = mesh.vertices().size();
 
@@ -270,7 +270,7 @@ void Gizmos::drawSolidArc(const Vector3 &center, float radius, float start, floa
     Parameter \a transform can be used to move, rotate and scale this structure.
 */
 void Gizmos::drawLines(const Vector3Vector &points, const IndexVector &indices, const Vector4 &color, const Matrix4 &transform) {
-    Mesh mesh;
+    static Mesh mesh;
     mesh.setVertices(points);
     mesh.setIndices(indices);
     mesh.setColors(Vector4Vector(points.size(), color));
@@ -283,7 +283,7 @@ void Gizmos::drawLines(const Vector3Vector &points, const IndexVector &indices,
     Parameter \a transform can be used to move, rotate and scale this arc.
 */
 void Gizmos::drawArc(const Vector3 &center, float radius, float start, float angle, const Vector4 &color, const Matrix4 &transform) {
-    Mesh mesh;
+    static Mesh mesh;
     mesh.setVertices(Mathf::pointsArc(Quaternion(), radius, start, angle, 180));
     size_t size = mesh.vertices().size();
 
@@ -318,7 +318,7 @@ void Gizmos::drawRectangle(const Vector3 &center, const Vector2 &size, const Vec
     Vector2 min(Vector2(center.x, center.y) - size * 0.5f);
     Vector2 max(Vector2(center.x, center.y) + size * 0.5f);
 
-    Mesh mesh;
+    static Mesh mesh;
     mesh.setVertices({
         Vector3(min.x, min.y, center.z),
         Vector3(max.x, min.y, center.z),
@@ -340,7 +340,7 @@ void Gizmos::drawWireBox(const Vector3 &center, const Vector3 &size, const Vecto
     Vector3 min(center - size * 0.5f);
     Vector3 max(center + size * 0.5f);
 
-    Mesh mesh;
+    static Mesh mesh;
     mesh.setVertices({
         Vector3(min.x, min.y, min.z),
         Vector3(max.x, min.y, min.z),
@@ -364,7 +364,7 @@ void Gizmos::drawWireBox(const Vector3 &center, const Vector3 &size, const Vecto
     Parameter \a transform can be used to move, rotate and scale this mesh.
 */
 void Gizmos::drawWireMesh(Mesh &mesh, const Vector4 &color, const Matrix4 &transform) {
-    Mesh m;
+    static Mesh m;
     m.setVertices(mesh.vertices());
     m.setIndices(mesh.indices());
     m.setColors(Vector4Vector(m.vertices().size(), color));

engine/src/resources/text.cpp

@@ -2,8 +2,6 @@
 
 #include <variant.h>
 
-#include <log.h>
-
 namespace {
     const char *gData = "Data";
 }
@@ -57,7 +55,7 @@ void Text::setSize(uint32_t size) {
     m_data.resize(size);
 }
 /*!
-    Returns text content as a tring.
+    Returns text content as string.
 */
 string Text::text() {
     return string(reinterpret_cast<char *>(m_data.data()), size());

modules/editor/grapheditor/editor/graph/graphcontroller.cpp

@@ -87,7 +87,8 @@ void GraphController::update() {
             rect->setPosition(Vector3(m_rubberOrigin, 0.0f));
             rect->setSize(Vector2());
         }
-    } else if((Input::isMouseButtonUp(Input::MOUSE_LEFT) && m_view->isCreationLink()) || Input::isMouseButtonUp(Input::MOUSE_RIGHT)) {
+    } else if(Input::isMouseButtonUp(Input::MOUSE_RIGHT) ||
+              (Input::isMouseButtonUp(Input::MOUSE_LEFT) && m_view->isCreationLink())) {
         m_view->showMenu();
     }
 

modules/editor/grapheditor/editor/graph/graphwidgets/nodewidget.cpp

@@ -57,8 +57,6 @@ void NodeWidget::setGraphNode(GraphNode *node) {
     if(m_title) {
         m_title->setColor(m_node->color());
         if(m_node->isState()) {
-            rectTransform()->layout()->setMargins(0.0f, 10.0f, 10.0f, 0.0f);
-
             RectTransform *rect = m_title->rectTransform();
             rect->setMargin(Vector4(10.0f));
         }
@@ -194,7 +192,7 @@ void NodeWidget::update() {
                 if(m_hovered != hover) {
                     m_hovered = hover;
 
-                    Vector4 color(m_frameColor);
+                    Vector4 color(m_backgroundColor);
                     if(m_hovered) {
                         color.x = CLAMP(color.x + 0.25f, 0.0f, 1.0f);
                         color.y = CLAMP(color.y + 0.25f, 0.0f, 1.0f);
@@ -228,23 +226,22 @@ void NodeWidget::composeComponent() {
 
     Layout *layout = new Layout;
     layout->setSpacing(2.0f);
-    layout->setMargins(0.0f, 0.0f, 0.0f, corners().x);
     rectTransform()->setLayout(layout);
 
     Actor *title = Engine::composeActor(gFrame, "Title", actor());
     if(title) {
         m_title = static_cast<Frame *>(title->component(gFrame));
         if(m_title) {
-            RectTransform *rect = m_title->rectTransform();
-            rect->setAnchors(Vector2(0.0f, 1.0f), Vector2(1.0f, 1.0f));
-            rect->setSize(Vector2(0, row));
-            rect->setPivot(Vector2(0.0f, 1.0f));
+            RectTransform *titleRect = m_title->rectTransform();
+            layout->addTransform(titleRect);
 
-            layout->addTransform(rect);
+            titleRect->setSize(Vector2(0, row));
+            titleRect->setPivot(Vector2(0.0f, 1.0f));
+            titleRect->setAnchors(Vector2(0.0f, 1.0f), Vector2(1.0f, 1.0f));
 
             Vector4 corn(corners());
-            corn.x = corn.y = 0.0f;
-            corn.w = corn.z;
+            corn.x = corn.y;
+            corn.w = corn.z = 0.0f;
             m_title->setCorners(corn);
             m_title->setBorderColor(Vector4());
 
@@ -261,13 +258,13 @@ void NodeWidget::composeComponent() {
 
             m_previewBtn->setSprite(Engine::loadResource<Sprite>(".embedded/ui.png"));
             m_previewBtn->setItem("Arrow");
-            RectTransform *t = m_previewBtn->rectTransform();
-            if(t) {
-                t->setSize(Vector2(16.0f, 8.0f));
-                t->setMargin(Vector4(0.0f, 10.0f, 0.0f, 10.0f));
-                t->setAnchors(Vector2(1.0f, 0.5f), Vector2(1.0f, 0.5f));
-                t->setPivot(Vector2(1.0f, 0.5f));
-                t->setRotation(Vector3(0.0f, 0.0f, 90.0f));
+            RectTransform *previewRect = m_previewBtn->rectTransform();
+            if(previewRect) {
+                previewRect->setSize(Vector2(16.0f, 8.0f));
+                previewRect->setMargin(Vector4(0.0f, 10.0f, 0.0f, 10.0f));
+                previewRect->setAnchors(Vector2(1.0f, 0.5f), Vector2(1.0f, 0.5f));
+                previewRect->setPivot(Vector2(1.0f, 0.5f));
+                previewRect->setRotation(Vector3(0.0f, 0.0f, 90.0f));
             }
         }
     }
@@ -276,28 +273,31 @@ void NodeWidget::composeComponent() {
 void NodeWidget::composePort(NodePort &port) {
     Actor *portActor = Engine::composeActor(gPortWidget, port.m_name.c_str(), actor());
     if(portActor) {
+
         PortWidget *portWidget = static_cast<PortWidget *>(portActor->component(gPortWidget));
         if(portWidget) {
-            RectTransform *r = portWidget->rectTransform();
-            r->setSize(Vector2(0, row));
+            RectTransform *portRect = portWidget->rectTransform();
+            portRect->setSize(Vector2(0, row));
             portWidget->setNodePort(&port);
+
             Layout *layout = rectTransform()->layout();
             if(layout) {
                 if(port.m_call) {
                     if(m_callLayout) {
                         if(port.m_out) {
-                            m_callLayout->insertTransform(-1, r);
+                            m_callLayout->insertTransform(-1, portRect);
                         } else {
-                            m_callLayout->insertTransform(0, r);
+                            m_callLayout->insertTransform(0, portRect);
                         }
                     } else {
                         m_callLayout = new Layout;
                         m_callLayout->setDirection(Layout::Horizontal);
-                        m_callLayout->addTransform(r);
+                        m_callLayout->addTransform(portRect);
                         layout->addLayout(m_callLayout);
                     }
                 } else {
-                    layout->addTransform(r);
+                    layout->addTransform(portRect);
+                    portRect->setAnchors(Vector2(0.0f, 1.0f), Vector2(1.0f, 1.0f));
                 }
             }
             connect(portWidget, _SIGNAL(pressed(int)), this, _SIGNAL(portPressed(int)));

modules/editor/grapheditor/editor/graph/graphwidgets/portwidget.cpp

@@ -53,6 +53,7 @@ void PortWidget::setNodePort(NodePort *port) {
     if(m_knob) {
         float knobSize = rect->size().y - 6.0f;
         RectTransform *knobRect = m_knob->rectTransform();
+        knobRect->setBorder(0.0f);
         knobRect->setSize(Vector2(port->m_call ? knobSize + 4 : knobSize, knobSize));
         knobRect->setAnchors(Vector2(m_port->m_out ? 1.0f : 0.0f, 0.5f), Vector2(m_port->m_out ? 1.0f : 0.0f, 0.5f));
 
@@ -62,7 +63,6 @@ void PortWidget::setNodePort(NodePort *port) {
             m_knob->setCorners(Vector4(knobSize * 0.5f));
         }
         m_knob->setColor(m_port->m_color);
-        m_knob->setBorderWidth(0.0f);
     }
 
     // Create editor (only for inputs)

modules/uikit/includes/components/abstractbutton.h

@@ -7,7 +7,7 @@ class Image;
 class Frame;
 class Label;
 
-class ENGINE_EXPORT AbstractButton : public Widget {
+class UIKIT_EXPORT AbstractButton : public Widget {
     A_REGISTER(AbstractButton, Widget, General)
 
     A_PROPERTIES(

modules/uikit/includes/components/button.h

@@ -3,7 +3,7 @@
 
 #include "abstractbutton.h"
 
-class ENGINE_EXPORT Button : public AbstractButton {
+class UIKIT_EXPORT Button : public AbstractButton {
     A_REGISTER(Button, AbstractButton, Components/UI)
 
     A_NOPROPERTIES()

modules/uikit/includes/components/floatinput.h

@@ -6,7 +6,7 @@
 class TextInput;
 class Button;
 
-class ENGINE_EXPORT FloatInput : public Widget {
+class UIKIT_EXPORT FloatInput : public Widget {
     A_REGISTER(FloatInput, Widget, Components/UI)
 
     A_NOPROPERTIES()

modules/uikit/includes/components/frame.h

@@ -6,12 +6,11 @@
 class Mesh;
 class MaterialInstance;
 
-class ENGINE_EXPORT Frame : public Widget {
+class UIKIT_EXPORT Frame : public Widget {
     A_REGISTER(Frame, Widget, Components/UI)
 
     A_PROPERTIES(
         A_PROPERTY(Vector4, corners, Frame::corners, Frame::setCorners),
-        A_PROPERTY(float, borderWidth, Frame::borderWidth, Frame::setBorderWidth),
         A_PROPERTYEX(Vector4, color, Frame::color, Frame::setColor, "editor=Color"),
         A_PROPERTYEX(Vector4, topColor, Frame::topColor, Frame::setTopColor, "editor=Color"),
         A_PROPERTYEX(Vector4, rightColor, Frame::rightColor, Frame::setRightColor, "editor=Color"),
@@ -27,9 +26,6 @@ class ENGINE_EXPORT Frame : public Widget {
     Vector4 corners() const;
     void setCorners(Vector4 corners);
 
-    float borderWidth() const;
-    void setBorderWidth(float width);
-
     Vector4 color() const;
     void setColor(const Vector4 color);
 
@@ -52,9 +48,11 @@ class ENGINE_EXPORT Frame : public Widget {
 
     void draw(CommandBuffer &buffer) override;
 
+    void applyStyle() override;
+
 protected:
-    Vector4 m_cornerRadius;
-    Vector4 m_frameColor;
+    Vector4 m_borderRadius;
+    Vector4 m_backgroundColor;
     Vector4 m_topColor;
     Vector4 m_rightColor;
     Vector4 m_bottomColor;
@@ -66,8 +64,6 @@ class ENGINE_EXPORT Frame : public Widget {
 
     MaterialInstance *m_material;
 
-    float m_borderWidth;
-
 };
 
 #endif // FRAME_H

modules/uikit/includes/components/image.h

@@ -10,7 +10,7 @@ class Mesh;
 class Texture;
 class MaterialInstance;
 
-class ENGINE_EXPORT Image : public Widget {
+class UIKIT_EXPORT Image : public Widget {
     A_REGISTER(Image, Widget, Components/UI)
 
     A_PROPERTIES(