feat:stack gravity and imagenode

dist/index.js

@@ -3759,7 +3759,7 @@ return __module.exports;
         configWidth() {
             switch (this.layoutConfig.widthSpec) {
                 case LayoutSpec.WRAP_CONTENT:
-                    this.view.style.width = "auto";
+                    this.view.style.width = "fit-content";
                     break;
                 case LayoutSpec.AT_MOST:
                     this.view.style.width = "100%";
@@ -3775,7 +3775,7 @@ return __module.exports;
         configHeight() {
             switch (this.layoutConfig.heightSpec) {
                 case LayoutSpec.WRAP_CONTENT:
-                    this.view.style.height = "auto";
+                    this.view.style.height = "fit-content";
                     break;
                 case LayoutSpec.AT_MOST:
                     this.view.style.height = "100%";
@@ -4060,6 +4060,25 @@ return __module.exports;
                 e.view.style.position = "absolute";
                 e.view.style.left = toPixelString(e.offsetX + this.paddingLeft);
                 e.view.style.top = toPixelString(e.offsetY + this.paddingTop);
+                const gravity = e.layoutConfig.alignment;
+                if ((gravity & LEFT) === LEFT) {
+                    e.view.style.left = toPixelString(0);
+                }
+                else if ((gravity & RIGHT) === RIGHT) {
+                    e.view.style.left = toPixelString(this.view.offsetWidth - e.view.offsetWidth);
+                }
+                else if ((gravity & CENTER_X) === CENTER_X) {
+                    e.view.style.left = toPixelString(this.view.offsetWidth / 2 - e.view.offsetWidth / 2);
+                }
+                if ((gravity & TOP) === TOP) {
+                    e.view.style.top = toPixelString(0);
+                }
+                else if ((gravity & BOTTOM) === BOTTOM) {
+                    e.view.style.top = toPixelString(this.view.offsetHeight - e.view.offsetHeight);
+                }
+                else if ((gravity & CENTER_Y) === CENTER_Y) {
+                    e.view.style.top = toPixelString(this.view.offsetHeight / 2 - e.view.offsetHeight / 2);
+                }
             });
         }
     }
@@ -4232,6 +4251,30 @@ return __module.exports;
         }
     }
 
+    class DoricImageNode extends DoricViewNode {
+        build() {
+            return document.createElement('img');
+        }
+        blendProps(v, propName, prop) {
+            switch (propName) {
+                case 'imageUrl':
+                    v.setAttribute('src', prop);
+                    break;
+                case 'imageBase64':
+                    v.setAttribute('src', prop);
+                    break;
+                case 'loadCallback':
+                    v.onload = () => {
+                        this.callJSResponse(prop);
+                    };
+                    break;
+                default:
+                    super.blendProps(v, propName, prop);
+                    break;
+            }
+        }
+    }
+
     const bundles = new Map;
     const plugins = new Map;
     const nodes = new Map;
@@ -4255,6 +4298,7 @@ return __module.exports;
     registerViewNode('VLayout', DoricVLayoutNode);
     registerViewNode('HLayout', DoricHLayoutNode);
     registerViewNode('Text', DoricTextNode);
+    registerViewNode('Image', DoricImageNode);
 
     let __scriptId__ = 0;
     function getScriptId() {

src/DoricRegistry.ts

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

src/shader/DoricImageNode.ts

@@ -0,0 +1,27 @@
+import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString, toRGBAString } from "./DoricViewNode";
+
+export class DoricImageNode extends DoricViewNode {
+    build(): HTMLElement {
+        return document.createElement('img')
+    }
+
+    blendProps(v: HTMLParagraphElement, propName: string, prop: any) {
+        switch (propName) {
+            case 'imageUrl':
+                v.setAttribute('src', prop)
+                break
+            case 'imageBase64':
+                v.setAttribute('src', prop)
+                break
+            case 'loadCallback':
+                v.onload = () => {
+                    this.callJSResponse(prop)
+                }
+                break
+            default:
+                super.blendProps(v, propName, prop)
+                break
+        }
+    }
+
+}

src/shader/DoricStackNode.ts

@@ -18,6 +18,21 @@ export class DoricStackNode extends DoricGroupViewNode {
             e.view.style.position = "absolute"
             e.view.style.left = toPixelString(e.offsetX + this.paddingLeft)
             e.view.style.top = toPixelString(e.offsetY + this.paddingTop)
+            const gravity = e.layoutConfig.alignment
+            if ((gravity & LEFT) === LEFT) {
+                e.view.style.left = toPixelString(0)
+            } else if ((gravity & RIGHT) === RIGHT) {
+                e.view.style.left = toPixelString(this.view.offsetWidth - e.view.offsetWidth)
+            } else if ((gravity & CENTER_X) === CENTER_X) {
+                e.view.style.left = toPixelString(this.view.offsetWidth / 2 - e.view.offsetWidth / 2)
+            }
+            if ((gravity & TOP) === TOP) {
+                e.view.style.top = toPixelString(0)
+            } else if ((gravity & BOTTOM) === BOTTOM) {
+                e.view.style.top = toPixelString(this.view.offsetHeight - e.view.offsetHeight)
+            } else if ((gravity & CENTER_Y) === CENTER_Y) {
+                e.view.style.top = toPixelString(this.view.offsetHeight / 2 - e.view.offsetHeight / 2)
+            }
         })
     }
 }

src/shader/DoricViewNode.ts

@@ -155,7 +155,7 @@ export abstract class DoricViewNode {
     configWidth() {
         switch (this.layoutConfig.widthSpec) {
             case LayoutSpec.WRAP_CONTENT:
-                this.view.style.width = "auto"
+                this.view.style.width = "fit-content"
                 break
 
             case LayoutSpec.AT_MOST:
@@ -173,7 +173,7 @@ export abstract class DoricViewNode {
     configHeight() {
         switch (this.layoutConfig.heightSpec) {
             case LayoutSpec.WRAP_CONTENT:
-                this.view.style.height = "auto"
+                this.view.style.height = "fit-content"
                 break
 
             case LayoutSpec.AT_MOST: