change way in set background color, compat with text node

doric-Qt/doric/resources/hlayout.qml

@@ -64,6 +64,12 @@ Rectangle {
 
     color: 'transparent'
 
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        color = backgroundColor
+    }
+
     MouseArea {
         anchors.fill: parent
         onClicked: {

doric-Qt/doric/resources/panel.qml

@@ -2,5 +2,9 @@ import QtQuick 2.12
 import QtQuick.Controls 2.5
 
 Rectangle {
+    property var backgroundColor
 
+    onBackgroundColorChanged: {
+        color = backgroundColor
+    }
 }

doric-Qt/doric/resources/stack.qml

@@ -60,6 +60,12 @@ Rectangle {
 
     color: 'transparent'
 
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        color = backgroundColor
+    }
+
     MouseArea {
         anchors.fill: parent
         onClicked: {

doric-Qt/doric/resources/text.qml

@@ -4,51 +4,46 @@ import QtQuick.Controls 2.5
 import "util.mjs" as Util
 import "gravity.mjs" as Gravity
 
-Rectangle {
+TextArea {
     property var wrapper
 
     property var uuid: Util.uuidv4()
-    property int childrenRectWidth: childrenRect.width
-    property int childrenRectHeight: childrenRect.width
-    color: 'transparent'
 
     property var tag: "Text"
 
+    readOnly: true
+
+    property int textAlignment: 0
+
+    background: Rectangle {
+        id: bg
+        color: 'transparent'
+    }
+
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        bg.color = backgroundColor
+    }
+
+    onTextAlignmentChanged: {
+        let gravity = Gravity.enumerate()
+        let result = this.textAlignment | gravity.CENTER_Y
+        console.log(tag, uuid + " onTextAlignmentChanged: " + this.textAlignment)
+        switch(result) {
+            case gravity.CENTER:
+                this.horizontalAlignment = TextInput.AlignHCenter
+                this.verticalAlignment = TextInput.AlignVCenter
+                break
+        }
+    }
+
     onWidthChanged: {
-        console.log(tag, uuid + " onWidthChanged: " + this.width)
+        bg.implicitWidth = width
     }
 
     onHeightChanged: {
-        console.log(tag, uuid + " onHeightChanged: " + this.height)
-    }
-
-    onChildrenRectChanged: {
-        console.log(tag, uuid + " onChildrenRectChanged: " + childrenRect)
-        this.childrenRectWidth = childrenRect.width
-        this.childrenRectHeight = childrenRect.height
-
-        if (this.width < this.childrenRectWidth) {
-            this.width = this.childrenRectWidth
-        }
-        if (this.height < this.childrenRectHeight) {
-            this.height = this.childrenRectHeight
-        }
-    }
-
-    Text {
-        property int textAlignment: 0
-
-        onTextAlignmentChanged: {
-            let gravity = Gravity.enumerate()
-            let result = this.textAlignment | gravity.CENTER_Y
-            console.log(tag, uuid + " onTextAlignmentChanged: " + this.textAlignment)
-            switch(result) {
-                case gravity.CENTER:
-                    this.anchors.horizontalCenter = parent.horizontalCenter
-                    this.anchors.verticalCenter = parent.verticalCenter
-                    break
-            }
-        }
+        bg.implicitHeight = height
     }
 
     MouseArea {

doric-Qt/doric/resources/vlayout.qml

@@ -64,6 +64,12 @@ Rectangle {
 
     color: 'transparent'
 
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        color = backgroundColor
+    }
+
     MouseArea {
         anchors.fill: parent
         onClicked: {

doric-Qt/doric/shader/DoricTextNode.cpp

@@ -19,16 +19,16 @@ QQuickItem *DoricTextNode::build() {
 
 void DoricTextNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
   if (name == "text") {
-    view->childItems().at(0)->setProperty("text", prop.toString());
+    view->setProperty("text", prop.toString());
   } else if (name == "textColor") {
     QString color = DoricUtils::doricColor(prop.toInt()).name();
-    view->childItems().at(0)->setProperty("color", color);
+    view->setProperty("color", color);
   } else if (name == "textSize") {
-    QFont font = view->childItems().at(0)->property("font").value<QFont>();
+    QFont font = view->property("font").value<QFont>();
     font.setPixelSize(prop.toInt());
-    view->childItems().at(0)->setProperty("font", QVariant(font));
+    view->setProperty("font", QVariant(font));
   } else if (name == "textAlignment") {
-    view->childItems().at(0)->setProperty("textAlignment", prop.toInt());
+    view->setProperty("textAlignment", prop.toInt());
   } else {
     DoricViewNode::blend(view, name, prop);
   }

doric-Qt/doric/shader/DoricViewNode.cpp

@@ -108,7 +108,7 @@ void DoricViewNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
     }
   } else if (name == "backgroundColor") {
     QString color = DoricUtils::doricColor(prop.toInt()).name();
-    view->setProperty("color", color);
+    view->setProperty("backgroundColor", color);
   } else if (name == "x") {
     view->setProperty("x", prop.toInt());
   } else if (name == "y") {