add layoutconfig

dist/Counter.js

@@ -29,6 +29,9 @@ class CounterView extends doric.ViewHolder {
             width: 10,
             color: doric.Color.WHITE,
         }
+        grandson.layoutConfig = {
+            alignment: doric.Gravity.Center
+        }
         grandson.backgroundColor = doric.Color.BLUE.alpha(0.5);
         child1.addChild(grandson);
         const child2 = new doric.Stack;

dist/index.js

@@ -3546,6 +3546,7 @@ return __module.exports;
     class ShaderPlugin extends DoricPlugin {
         render(ret) {
             this.context.rootNode.blend(ret.props);
+            this.context.rootNode.layout();
         }
     }
 
@@ -3555,6 +3556,17 @@ return __module.exports;
         LayoutSpec[LayoutSpec["WRAP_CONTENT"] = 1] = "WRAP_CONTENT";
         LayoutSpec[LayoutSpec["AT_MOST"] = 2] = "AT_MOST";
     })(LayoutSpec || (LayoutSpec = {}));
+    const SPECIFIED = 1;
+    const START = 1 << 1;
+    const END = 1 << 2;
+    const SHIFT_X = 0;
+    const SHIFT_Y = 4;
+    const LEFT = (START | SPECIFIED) << SHIFT_X;
+    const RIGHT = (END | SPECIFIED) << SHIFT_X;
+    const TOP = (START | SPECIFIED) << SHIFT_Y;
+    const BOTTOM = (END | SPECIFIED) << SHIFT_Y;
+    const CENTER_X = SPECIFIED << SHIFT_X;
+    const CENTER_Y = SPECIFIED << SHIFT_Y;
     function toPixelString(v) {
         return `${v}px`;
     }
@@ -3627,8 +3639,6 @@ return __module.exports;
             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);
@@ -3643,6 +3653,13 @@ return __module.exports;
             this.x = this.offsetX;
             this.y = this.offsetY;
         }
+        layout() {
+            this.layoutSelf({ width: this.frameWidth, height: this.frameHeight });
+        }
+        layoutSelf(targetSize) {
+            this.width = targetSize.width;
+            this.height = targetSize.height;
+        }
         blendProps(v, propName, prop) {
             switch (propName) {
                 case "border":
@@ -3677,16 +3694,28 @@ return __module.exports;
         set width(v) {
             this.view.style.width = toPixelString(v - this.paddingLeft - this.paddingRight - this.borderWidth * 2);
         }
+        get width() {
+            return this.view.offsetWidth;
+        }
         set height(v) {
             this.view.style.height = toPixelString(v - this.paddingTop - this.paddingBottom - this.borderWidth * 2);
         }
+        get height() {
+            return this.view.offsetHeight;
+        }
         set x(v) {
             var _a;
             this.view.style.left = toPixelString(v + (((_a = this.superNode) === null || _a === void 0 ? void 0 : _a.paddingLeft) || 0));
         }
+        get x() {
+            return this.view.offsetLeft;
+        }
         set y(v) {
             var _a;
-            this.view.style.top = toPixelString(v + (((_a = this.superNode) === null || _a === void 0 ? void 0 : _a.paddingBottom) || 0));
+            this.view.style.top = toPixelString(v + (((_a = this.superNode) === null || _a === void 0 ? void 0 : _a.paddingTop) || 0));
+        }
+        get y() {
+            return this.view.offsetTop;
         }
         set backgroundColor(v) {
             this.view.style.backgroundColor = toRGBAString(v);
@@ -3877,6 +3906,90 @@ return __module.exports;
                 e.view.style.position = "absolute";
             });
         }
+        measureContentSize(targetSize) {
+            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;
+            }
+            switch (this.layoutConfig.heightSpec) {
+                case LayoutSpec.AT_MOST:
+                    height = targetSize.height;
+                    break;
+                case LayoutSpec.WRAP_CONTENT:
+                    height = contentSize.height;
+                    break;
+            }
+            return { width, height };
+        }
+        layoutSelf(targetSize) {
+            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 => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                e.layoutSelf(limitSize);
+                let gravity = ((_a = e.layoutConfig) === null || _a === void 0 ? void 0 : _a.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 ((_b = e.layoutConfig.margin) === null || _b === void 0 ? void 0 : _b.left) {
+                        e.x = (_c = e.layoutConfig.margin) === null || _c === void 0 ? void 0 : _c.left;
+                    }
+                    else if ((_d = e.layoutConfig.margin) === null || _d === void 0 ? void 0 : _d.right) {
+                        e.x = width - e.width + this.paddingLeft - this.paddingRight - ((_e = e.layoutConfig.margin) === null || _e === void 0 ? void 0 : _e.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 ((_f = e.layoutConfig.margin) === null || _f === void 0 ? void 0 : _f.top) {
+                        e.y = (_g = e.layoutConfig.margin) === null || _g === void 0 ? void 0 : _g.top;
+                    }
+                    else if ((_h = e.layoutConfig.margin) === null || _h === void 0 ? void 0 : _h.bottom) {
+                        e.y = height - e.height + this.paddingTop - this.paddingBottom - ((_j = e.layoutConfig.margin) === null || _j === void 0 ? void 0 : _j.bottom);
+                    }
+                }
+            });
+        }
     }
 
     const bundles = new Map;

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
 }