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: {