add layoutconfig

src/plugins/ShaderPlugin.ts

@@ -4,5 +4,6 @@ import { DVModel } from "../shader/DoricViewNode";
 export class ShaderPlugin extends DoricPlugin {
     render(ret: DVModel) {
         this.context.rootNode.blend(ret.props)
+        this.context.rootNode.layout()
     }
 }

src/shader/DoricStackViewNode.ts

@@ -1,10 +1,11 @@
-import { DoricGroupViewNode, DVModel } from "./DoricViewNode";
+import { DoricGroupViewNode, LayoutSpec, FrameSize, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM } from "./DoricViewNode";
 
 export class DoricStackViewNode extends DoricGroupViewNode {
 
     build() {
         return document.createElement('div')
     }
+
     blend(props: { [index: string]: any }) {
         super.blend(props)
         this.childNodes.forEach(e => {
@@ -12,4 +13,85 @@ export class DoricStackViewNode extends DoricGroupViewNode {
         })
     }
 
+    measureContentSize(targetSize: { width: number, height: number }) {
+        let width = this.frameWidth
+        let height = this.frameHeight
+        let contentSize = { width: 0, height: 0 }
+        let limitSize = {
+            width: targetSize.width - this.paddingLeft - this.paddingRight,
+            height: targetSize.height - this.paddingTop - this.paddingBottom,
+        }
+        if (this.layoutConfig.widthSpec === LayoutSpec.WRAP_CONTENT
+            || this.layoutConfig.heightSpec === LayoutSpec.WRAP_CONTENT) {
+            contentSize = this.childNodes.reduce((prev, current) => {
+                const size = current.measureContentSize(limitSize)
+                return {
+                    width: Math.max(prev.width, size.width),
+                    height: Math.max(prev.height, size.height),
+                }
+            }, contentSize)
+        }
+        switch (this.layoutConfig.widthSpec) {
+            case LayoutSpec.AT_MOST:
+                width = targetSize.width
+                break
+            case LayoutSpec.WRAP_CONTENT:
+                width = contentSize.width
+                break
+            default:
+                break
+        }
+        switch (this.layoutConfig.heightSpec) {
+            case LayoutSpec.AT_MOST:
+                height = targetSize.height
+                break
+            case LayoutSpec.WRAP_CONTENT:
+                height = contentSize.height
+                break
+            default:
+                break
+        }
+        return { width, height }
+    }
+
+    layoutSelf(targetSize: FrameSize) {
+        const { width, height } = this.measureContentSize(targetSize)
+        this.width = width
+        this.height = height
+        const limitSize = {
+            width: width - this.paddingLeft - this.paddingRight,
+            height: height - this.paddingTop - this.paddingBottom,
+        }
+        this.childNodes.forEach(e => {
+            e.layoutSelf(limitSize)
+            let gravity = e.layoutConfig?.alignment || 0
+            if ((gravity & LEFT) === LEFT) {
+                e.x = 0
+            } else if ((gravity & RIGHT) === RIGHT) {
+                e.x = width - e.width + this.paddingLeft - this.paddingRight
+            } else if ((gravity & CENTER_X) === CENTER_X) {
+                e.x = width / 2 - e.width / 2 - this.paddingLeft
+            } else {
+                if (e.layoutConfig.margin?.left) {
+                    e.x = e.layoutConfig.margin?.left
+                } else if (e.layoutConfig.margin?.right) {
+                    e.x = width - e.width + this.paddingLeft - this.paddingRight - e.layoutConfig.margin?.right
+                }
+            }
+
+            if ((gravity & TOP) === TOP) {
+                e.y = 0
+            } else if ((gravity & BOTTOM) === BOTTOM) {
+                e.y = height - e.height + this.paddingTop - this.paddingBottom
+            } else if ((gravity & CENTER_Y) === CENTER_Y) {
+                e.y = height / 2 - e.height / 2 - this.paddingTop
+            } else {
+                if (e.layoutConfig.margin?.top) {
+                    e.y = e.layoutConfig.margin?.top
+                } else if (e.layoutConfig.margin?.bottom) {
+                    e.y = height - e.height + this.paddingTop - this.paddingBottom - e.layoutConfig.margin?.bottom
+                }
+            }
+        })
+    }
 }

src/shader/DoricViewNode.ts

@@ -1,12 +1,34 @@
 import { DoricContext } from "../DoricContext";
 import { acquireViewNode } from "../DoricRegistry";
 
-enum LayoutSpec {
+export enum LayoutSpec {
     EXACTLY = 0,
     WRAP_CONTENT = 1,
     AT_MOST = 2,
 }
 
+const SPECIFIED = 1
+const START = 1 << 1
+const END = 1 << 2
+
+const SHIFT_X = 0
+const SHIFT_Y = 4
+
+export const LEFT = (START | SPECIFIED) << SHIFT_X
+export const RIGHT = (END | SPECIFIED) << SHIFT_X
+
+export const TOP = (START | SPECIFIED) << SHIFT_Y
+export const BOTTOM = (END | SPECIFIED) << SHIFT_Y
+
+export const CENTER_X = SPECIFIED << SHIFT_X
+export const CENTER_Y = SPECIFIED << SHIFT_Y
+
+export const CENTER = CENTER_X | CENTER_Y
+
+export type FrameSize = {
+    width: number,
+    height: number,
+}
 function toPixelString(v: number) {
     return `${v}px`
 }
@@ -116,9 +138,6 @@ export abstract class DoricViewNode {
         for (let key in props) {
             this.blendProps(this.view, key, props[key])
         }
-
-        this.width = this.frameWidth
-        this.height = this.frameHeight
         if (this.border) {
             this.view.style.borderStyle = "solid"
             this.view.style.borderWidth = toPixelString(this.border.width)
@@ -134,6 +153,15 @@ export abstract class DoricViewNode {
         this.y = this.offsetY
     }
 
+    layout() {
+        this.layoutSelf({ width: this.frameWidth, height: this.frameHeight })
+    }
+
+    layoutSelf(targetSize: FrameSize) {
+        this.width = targetSize.width
+        this.height = targetSize.height
+    }
+
     blendProps(v: HTMLElement, propName: string, prop: any) {
         switch (propName) {
             case "border":
@@ -169,19 +197,28 @@ export abstract class DoricViewNode {
     set width(v: number) {
         this.view.style.width = toPixelString(v - this.paddingLeft - this.paddingRight - this.borderWidth * 2)
     }
-
+    get width() {
+        return this.view.offsetWidth
+    }
     set height(v: number) {
         this.view.style.height = toPixelString(v - this.paddingTop - this.paddingBottom - this.borderWidth * 2)
     }
-
+    get height() {
+        return this.view.offsetHeight
+    }
     set x(v: number) {
         this.view.style.left = toPixelString(v + (this.superNode?.paddingLeft || 0))
     }
-
+    get x() {
+        return this.view.offsetLeft
+    }
     set y(v: number) {
-        this.view.style.top = toPixelString(v + (this.superNode?.paddingBottom || 0))
+        this.view.style.top = toPixelString(v + (this.superNode?.paddingTop || 0))
     }
 
+    get y() {
+        return this.view.offsetTop
+    }
     set backgroundColor(v: number) {
         this.view.style.backgroundColor = toRGBAString(v)
     }
@@ -196,6 +233,8 @@ export abstract class DoricViewNode {
         ret.viewType = type
         return ret
     }
+
+    abstract measureContentSize(targetSize: FrameSize): FrameSize
 }