at least current can control background

dist/Counter.js

@@ -13,83 +13,13 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 };
 class CounterView extends doric.ViewHolder {
     build(root) {
-        root.addChild(doric.vlayout([
+        root.backgroundColor = doric.Color.BLUE;
-            doric.text({
-                textSize: 40,
-                layoutConfig: {
-                    alignment: doric.Gravity.Center,
-                    widthSpec: doric.LayoutSpec.FIT,
-                    heightSpec: doric.LayoutSpec.FIT,
-                },
-            }).also(it => { this.number = it; }),
-            doric.text({
-                text: "点击计数",
-                textSize: 20,
-                border: {
-                    width: 1,
-                    color: doric.Color.parse('#000000'),
-                },
-                corners: 5,
-                layoutConfig: {
-                    alignment: doric.Gravity.Center,
-                    widthSpec: doric.LayoutSpec.FIT,
-                    heightSpec: doric.LayoutSpec.FIT,
-                },
-                padding: {
-                    left: 10,
-                    right: 10,
-                    top: 10,
-                    bottom: 10,
-                },
-                shadow: {
-                    color: doric.Color.parse("#00ff00"),
-                    opacity: 0.5,
-                    radius: 20,
-                    offsetX: 10,
-                    offsetY: 10,
-                }
-            }).also(it => { this.counter = it; }),
-        ]).also(it => {
-            it.width = 200;
-            it.height = 200;
-            it.space = 20;
-            it.gravity = doric.Gravity.Center;
-            it.layoutConfig = {
-                alignment: doric.Gravity.Center
-            };
-            it.border = {
-                width: 1,
-                color: doric.Color.parse("#000000"),
-            };
-            it.shadow = {
-                color: doric.Color.parse("#ffff00"),
-                opacity: 0.5,
-                radius: 20,
-                offsetX: 10,
-                offsetY: 10,
-            };
-            it.corners = 20;
-            it.backgroundColor = doric.Color.parse('#ff00ff');
-        }));
-        root.addChild((new doric.Image).also(iv => {
-            iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png";
-            iv.layoutConfig = {
-                widthSpec: doric.LayoutSpec.FIT,
-                heightSpec: doric.LayoutSpec.FIT,
-            };
-        }));
     }
 }
 class CounterVM extends doric.ViewModel {
     onAttached(s, vh) {
-        vh.counter.onClick = () => {
-            this.updateState(state => {
-                state.count++;
-            });
-        };
     }
     onBind(s, vh) {
-        vh.number.text = `${s.count}`;
     }
 }
 let MyPage = class MyPage extends doric.VMPanel {

dist/index.js

@@ -3532,7 +3532,7 @@ return __module.exports;
 },this,[{exports:{}}])]);
 /**--------Lib--------*/
     
-(function (axios, sandbox, doric) {
+(function (axios, sandbox) {
     'use strict';
 
     axios = axios && axios.hasOwnProperty('default') ? axios['default'] : axios;
@@ -3545,18 +3545,50 @@ return __module.exports;
 
     class ShaderPlugin extends DoricPlugin {
         render(ret) {
-            console.log('render', ret);
+            this.context.rootNode.blend(ret.props);
         }
     }
 
+    var LayoutSpec;
+    (function (LayoutSpec) {
+        LayoutSpec[LayoutSpec["EXACTLY"] = 0] = "EXACTLY";
+        LayoutSpec[LayoutSpec["WRAP_CONTENT"] = 1] = "WRAP_CONTENT";
+        LayoutSpec[LayoutSpec["AT_MOST"] = 2] = "AT_MOST";
+    })(LayoutSpec || (LayoutSpec = {}));
+    function parse(str) {
+        if (!str.startsWith("#")) {
+            throw new Error(`Parse color error with ${str}`);
+        }
+        const val = parseInt(str.substr(1), 16);
+        if (str.length === 7) {
+            return (val | 0xff000000);
+        }
+        else if (str.length === 9) {
+            return (val);
+        }
+        else {
+            throw new Error(`Parse color error with ${str}`);
+        }
+    }
+    function safeParse(str, defVal = 0) {
+        let color = defVal;
+        try {
+            color = parse(str);
+        }
+        catch (e) {
+        }
+        finally {
+            return color;
+        }
+    }
     class DoricViewNode {
         constructor(context) {
             this.viewId = "";
             this.viewType = "View";
             this.layoutConfig = {
-                widthSpec: doric.LayoutSpec.EXACTLY,
+                widthSpec: LayoutSpec.EXACTLY,
-                heightSpec: doric.LayoutSpec.EXACTLY,
+                heightSpec: LayoutSpec.EXACTLY,
-                alignment: new doric.Gravity,
+                alignment: 0,
                 weight: 0,
                 margin: {
                     left: 0,
@@ -3619,19 +3651,21 @@ return __module.exports;
             return 0;
         }
         set backgroundColor(v) {
-            const strs = [];
+            let strs = [];
             for (let i = 0; i < 32; i += 8) {
                 strs.push(((v >> i) & 0xff).toString(16));
             }
-            this.view.style.backgroundColor = "#" + strs.map(e => {
+            strs = strs.map(e => {
                 if (e.length === 1) {
                     return '0' + e;
                 }
                 return e;
-            }).reverse().join('');
+            }).reverse();
+            /// RGBA
+            this.view.style.backgroundColor = `#${strs[1]}${strs[2]}${strs[3]}${strs[0]}`;
         }
         get backgroundColor() {
-            return doric.Color.safeParse(this.view.style.backgroundColor).toModel();
+            return safeParse(this.view.style.backgroundColor);
         }
         static create(context, type) {
             const viewNodeClass = acquireViewNode(type);
@@ -3811,8 +3845,6 @@ return __module.exports;
     }
 
     class DoricStackViewNode extends DoricGroupViewNode {
-        blendSubNode(model) {
-        }
         build() {
             return document.createElement('div');
         }
@@ -3946,6 +3978,7 @@ ${content}
             this.pluginInstances = new Map;
             createContext(this.contextId, content);
             doricContexts.set(this.contextId, this);
+            this.rootNode = new DoricStackViewNode(this);
         }
         get panel() {
             var _a;
@@ -3976,8 +4009,8 @@ ${content}
             this.context = new DoricContext(content);
             const divElement = document.createElement('div');
             divElement.style.height = '100%';
-            divElement.style.backgroundColor = 'red';
             this.append(divElement);
+            this.context.rootNode.view = divElement;
             this.context.init({
                 width: divElement.offsetWidth,
                 height: divElement.offsetHeight,
@@ -3987,5 +4020,5 @@ ${content}
 
     window.customElements.define('doric-div', DoricElement);
 
-}(axios, doric, doric_lib));
+}(axios, doric));
 //# sourceMappingURL=index.js.map

src/DoricContext.ts

@@ -2,6 +2,7 @@ import { jsObtainContext, jsCallEntityMethod } from 'doric/src/runtime/sandbox'
 import { Panel } from 'doric'
 import { DoricPlugin } from "./DoricPlugin"
 import { createContext } from "./DoricDriver"
+import { DoricStackViewNode } from './shader/DoricStackViewNode'
 const doricContexts: Map<string, DoricContext> = new Map
 
 let __contextId__ = 0
@@ -16,9 +17,11 @@ export function getDoricContext(contextId: string) {
 export class DoricContext {
     contextId = getContextId()
     pluginInstances: Map<string, DoricPlugin> = new Map
+    rootNode: DoricStackViewNode
     constructor(content: string) {
         createContext(this.contextId, content)
         doricContexts.set(this.contextId, this)
+        this.rootNode = new DoricStackViewNode(this)
     }
 
     get panel() {

src/DoricElement.ts

@@ -20,8 +20,8 @@ export class DoricElement extends HTMLElement {
 
         const divElement = document.createElement('div')
         divElement.style.height = '100%'
-        divElement.style.backgroundColor = 'red';
         this.append(divElement)
+        this.context.rootNode.view = divElement
         this.context.init({
             width: divElement.offsetWidth,
             height: divElement.offsetHeight,

src/plugins/ShaderPlugin.ts

@@ -1,7 +1,8 @@
 import { DoricPlugin } from "../DoricPlugin";
+import { DVModel } from "../shader/DoricViewNode";
 
 export class ShaderPlugin extends DoricPlugin {
-    render(ret: any) {
+    render(ret: DVModel) {
-        console.log('render', ret)
+        this.context.rootNode.blend(ret.props)
     }
 }

src/shader/DoricStackViewNode.ts

@@ -1,8 +1,8 @@
-import { DoricGroupViewNode, DVModel } from "./DoricViewNode";
+import { DoricGroupViewNode } from "./DoricViewNode";
 
 export class DoricStackViewNode extends DoricGroupViewNode {
 
-    build(): HTMLElement {
+    build() {
         return document.createElement('div')
     }
 

src/shader/DoricViewNode.ts

@@ -1,7 +1,39 @@
 import { DoricContext } from "../DoricContext";
-import { LayoutConfig, LayoutSpec, Gravity, Color } from "doric"
 import { acquireViewNode } from "../DoricRegistry";
 
+enum LayoutSpec {
+    EXACTLY = 0,
+    WRAP_CONTENT = 1,
+    AT_MOST = 2,
+}
+
+function parse(str: string) {
+    if (!str.startsWith("#")) {
+        throw new Error(`Parse color error with ${str}`);
+    }
+    const val = parseInt(str.substr(1), 16);
+    if (str.length === 7) {
+        return (val | 0xff000000);
+    }
+    else if (str.length === 9) {
+        return (val);
+    }
+    else {
+        throw new Error(`Parse color error with ${str}`);
+    }
+}
+function safeParse(str: string, defVal = 0) {
+    let color = defVal;
+    try {
+        color = parse(str);
+    }
+    catch (e) {
+    }
+    finally {
+        return color;
+    }
+}
+
 export type DoricViewNodeClass = { new(...args: any[]): {} }
 
 export interface DVModel {
@@ -17,10 +49,10 @@ export abstract class DoricViewNode {
     viewType = "View"
     context: DoricContext
     superNode?: DoricSuperViewNode
-    layoutConfig: LayoutConfig = {
+    layoutConfig = {
         widthSpec: LayoutSpec.EXACTLY,
         heightSpec: LayoutSpec.EXACTLY,
-        alignment: new Gravity,
+        alignment: 0,
         weight: 0,
         margin: {
             left: 0,
@@ -62,7 +94,7 @@ export abstract class DoricViewNode {
                 this.backgroundColor = prop as number
                 break
             case 'layoutConfig':
-                const layoutConfig = prop as LayoutConfig
+                const layoutConfig = prop
                 for (let key in layoutConfig) {
                     Reflect.set(this.layoutConfig, key, Reflect.get(layoutConfig, key, layoutConfig))
                 }
@@ -95,21 +127,23 @@ export abstract class DoricViewNode {
     }
 
     set backgroundColor(v: number) {
-        const strs = []
+        let strs = []
         for (let i = 0; i < 32; i += 8) {
 
             strs.push(((v >> i) & 0xff).toString(16))
         }
-        this.view.style.backgroundColor = "#" + strs.map(e => {
+        strs = strs.map(e => {
             if (e.length === 1) {
                 return '0' + e
             }
             return e
-        }).reverse().join('')
+        }).reverse()
+        /// RGBA
+        this.view.style.backgroundColor = `#${strs[1]}${strs[2]}${strs[3]}${strs[0]}`
     }
 
     get backgroundColor() {
-        return Color.safeParse(this.view.style.backgroundColor).toModel()
+        return safeParse(this.view.style.backgroundColor)
     }
 
     static create(context: DoricContext, type: string) {