update vnode and hlayout

src/DoricRegistry.ts

@@ -4,6 +4,7 @@ import { DoricViewNodeClass } from "./shader/DoricViewNode"
 import { DoricStackNode } from "./shader/DoricStackNode"
 import { DoricVLayoutNode } from './shader/DoricVLayoutNode'
 import { DoricHLayoutNode } from './shader/DoricHLayoutNode'
+import { DoricTextNode } from "./shader/DoricTextNode"
 
 const bundles: Map<string, string> = new Map
 
@@ -40,4 +41,5 @@ registerPlugin('shader', ShaderPlugin)
 
 registerViewNode('Stack', DoricStackNode)
 registerViewNode('VLayout', DoricVLayoutNode)
-registerViewNode('HLayout', DoricHLayoutNode)
+registerViewNode('HLayout', DoricHLayoutNode)
+registerViewNode('Text', DoricTextNode)

src/shader/DoricTextNode.ts

@@ -0,0 +1,29 @@
+import { DoricViewNode, FrameSize, toPixelString, toRGBAString } from "./DoricViewNode";
+
+export class DoricTextNode extends DoricViewNode {
+
+    build(): HTMLElement {
+        return document.createElement('p')
+    }
+
+    measureContentSize(targetSize: FrameSize) {
+        return targetSize
+    }
+    blendProps(v: HTMLParagraphElement, propName: string, prop: any) {
+        switch (propName) {
+            case 'text':
+                v.innerText = prop
+                break
+            case 'textSize':
+                v.style.fontSize = toPixelString(prop)
+                break
+            case 'textColor':
+                v.style.color = toRGBAString(prop)
+                break
+            default:
+                super.blendProps(v, propName, prop)
+                break
+        }
+    }
+
+}

src/shader/DoricVLayoutNode.ts

@@ -113,7 +113,7 @@ export class DoricVLayoutNode extends DoricGroupViewNode {
                 yStart += e.layoutConfig.margin.top
             }
             e.y = yStart - this.paddingTop
-            yStart += e.width + this.space
+            yStart += e.height + this.space
             if (e.layoutConfig.margin?.bottom !== undefined) {
                 yStart += e.layoutConfig.margin.bottom
             }

src/shader/DoricViewNode.ts

@@ -29,11 +29,11 @@ export type FrameSize = {
     width: number,
     height: number,
 }
-function toPixelString(v: number) {
+export function toPixelString(v: number) {
     return `${v}px`
 }
 
-function toRGBAString(color: number) {
+export function toRGBAString(color: number) {
     let strs = []
     for (let i = 0; i < 32; i += 8) {