feat:add demo

dist/Counter.js

@@ -13,7 +13,27 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 };
 class CounterView extends doric.ViewHolder {
     build(root) {
-        root.backgroundColor = doric.Color.BLUE;
+        root.backgroundColor = doric.Color.YELLOW;
+        const child1 = new doric.Stack;
+        child1.width = 200;
+        child1.height = 100;
+        child1.top = 20
+        child1.left = 100
+        child1.backgroundColor = doric.Color.RED;
+        const grandson = new doric.Stack;
+        grandson.width = 100;
+        grandson.height = 100;
+        grandson.left = 20;
+        grandson.backgroundColor = doric.Color.BLUE.alpha(0.5);
+        child1.addChild(grandson);
+        const child2 = new doric.Stack;
+        child2.width = 200;
+        child2.height = 100;
+        child2.left = 0;
+        child2.top = 0;
+        child2.backgroundColor = doric.Color.GREEN;
+        root.addChild(child1);
+        root.addChild(child2);
     }
 }
 class CounterVM extends doric.ViewModel {

dist/index.js

@@ -3597,6 +3597,14 @@ return __module.exports;
                     bottom: 0
                 }
             };
+            this.padding = {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            };
+            this.frameWidth = 0;
+            this.frameHeight = 0;
             this.context = context;
         }
         init(superNode) {
@@ -3607,18 +3615,23 @@ return __module.exports;
             this.view = this.build();
         }
         blend(props) {
+            if (props.padding) {
+                this.padding = props.padding;
+            }
+            if (props.width !== undefined) {
+                this.frameWidth = props.width;
+            }
+            if (props.height !== undefined) {
+                this.frameHeight = props.height;
+            }
+            this.width = this.frameWidth - (this.padding.left || 0) - (this.padding.right || 0);
+            this.height = this.frameHeight - (this.padding.top || 0) - (this.padding.bottom || 0);
             for (let key in props) {
                 this.blendProps(this.view, key, props[key]);
             }
         }
         blendProps(v, propName, prop) {
             switch (propName) {
-                case 'width':
-                    this.width = prop;
-                    break;
-                case 'height':
-                    this.height = prop;
-                    break;
                 case 'backgroundColor':
                     this.backgroundColor = prop;
                     break;
@@ -3628,27 +3641,37 @@ return __module.exports;
                         Reflect.set(this.layoutConfig, key, Reflect.get(layoutConfig, key, layoutConfig));
                     }
                     break;
+                case 'x':
+                    this.x = prop;
+                    break;
+                case 'y':
+                    this.y = prop;
+                    break;
             }
         }
         set width(v) {
             this.view.style.width = `${v}px`;
         }
         get width() {
-            const ret = this.view.style.width.match(/([0-9]*)px/);
+            return this.view.offsetWidth;
-            if (ret && ret.length > 1) {
-                return parseInt(ret[1]);
-            }
-            return 0;
         }
         set height(v) {
-            this.view.style.width = `${v}px`;
+            this.view.style.height = `${v}px`;
         }
         get height() {
-            const ret = this.view.style.height.match(/([0-9]*)px/);
+            return this.view.offsetHeight;
-            if (ret && ret.length > 1) {
-                return parseInt(ret[1]);
         }
-            return 0;
+        set x(v) {
+            this.view.style.left = `${v}px`;
+        }
+        get x() {
+            return this.view.offsetLeft;
+        }
+        get y() {
+            return this.view.offsetTop;
+        }
+        set y(v) {
+            this.view.style.top = `${v}px`;
         }
         set backgroundColor(v) {
             let strs = [];
@@ -3835,9 +3858,8 @@ return __module.exports;
             this.childNodes = this.childNodes.slice(0, this.childViewIds.length);
         }
         blendSubNode(model) {
-            this.childNodes.filter(e => e.viewId === model.id).forEach(e => {
+            var _a;
-                e.blend(model.props);
+            (_a = this.getSubNodeById(model.id)) === null || _a === void 0 ? void 0 : _a.blend(model.props);
-            });
         }
         getSubNodeById(viewId) {
             return this.childNodes.filter(e => e.viewId === viewId)[0];
@@ -3848,6 +3870,12 @@ return __module.exports;
         build() {
             return document.createElement('div');
         }
+        blend(props) {
+            super.blend(props);
+            this.childNodes.forEach(e => {
+                e.view.style.position = "absolute";
+            });
+        }
     }
 
     const bundles = new Map;

src/shader/DoricStackViewNode.ts

@@ -1,9 +1,15 @@
-import { DoricGroupViewNode } from "./DoricViewNode";
+import { DoricGroupViewNode, DVModel } from "./DoricViewNode";
 
 export class DoricStackViewNode extends DoricGroupViewNode {
 
     build() {
         return document.createElement('div')
     }
+    blend(props: { [index: string]: any }) {
+        super.blend(props)
+        this.childNodes.forEach(e => {
+            e.view.style.position = "absolute"
+        })
+    }
 
 }

src/shader/DoricViewNode.ts

@@ -61,6 +61,15 @@ export abstract class DoricViewNode {
             bottom: 0
         }
     }
+    padding = {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+    }
+    frameWidth = 0
+    frameHeight = 0
+
     view!: HTMLElement
     constructor(context: DoricContext) {
         this.context = context
@@ -77,6 +86,17 @@ export abstract class DoricViewNode {
     abstract build(): HTMLElement
 
     blend(props: { [index: string]: any }) {
+        if (props.padding) {
+            this.padding = props.padding
+        }
+        if (props.width !== undefined) {
+            this.frameWidth = props.width
+        }
+        if (props.height !== undefined) {
+            this.frameHeight = props.height
+        }
+        this.width = this.frameWidth - (this.padding.left || 0) - (this.padding.right || 0)
+        this.height = this.frameHeight - (this.padding.top || 0) - (this.padding.bottom || 0)
         for (let key in props) {
             this.blendProps(this.view, key, props[key])
         }
@@ -84,12 +104,6 @@ export abstract class DoricViewNode {
 
     blendProps(v: HTMLElement, propName: string, prop: any) {
         switch (propName) {
-            case 'width':
-                this.width = prop as number
-                break
-            case 'height':
-                this.height = prop as number
-                break
             case 'backgroundColor':
                 this.backgroundColor = prop as number
                 break
@@ -99,6 +113,12 @@ export abstract class DoricViewNode {
                     Reflect.set(this.layoutConfig, key, Reflect.get(layoutConfig, key, layoutConfig))
                 }
                 break
+            case 'x':
+                this.x = prop as number
+                break
+            case 'y':
+                this.y = prop as number
+                break
         }
     }
 
@@ -107,23 +127,31 @@ export abstract class DoricViewNode {
     }
 
     get width() {
-        const ret = this.view.style.width.match(/([0-9]*)px/)
+        return this.view.offsetWidth
-        if (ret && ret.length > 1) {
-            return parseInt(ret[1])
-        }
-        return 0
     }
 
     set height(v: number) {
-        this.view.style.width = `${v}px`
+        this.view.style.height = `${v}px`
     }
 
     get height() {
-        const ret = this.view.style.height.match(/([0-9]*)px/)
+        return this.view.offsetHeight
-        if (ret && ret.length > 1) {
-            return parseInt(ret[1])
     }
-        return 0
+
+    set x(v: number) {
+        this.view.style.left = `${v}px`
+    }
+
+    get x() {
+        return this.view.offsetLeft
+    }
+
+    get y() {
+        return this.view.offsetTop
+    }
+
+    set y(v: number) {
+        this.view.style.top = `${v}px`
     }
 
     set backgroundColor(v: number) {
@@ -318,9 +346,7 @@ export abstract class DoricGroupViewNode extends DoricSuperViewNode {
     }
 
     blendSubNode(model: DVModel) {
-        this.childNodes.filter(e => e.viewId === model.id).forEach(e => {
+        this.getSubNodeById(model.id)?.blend(model.props)
-            e.blend(model.props)
-        })
     }
 
     getSubNodeById(viewId: string) {