web:add shader command

doric-web/dist/index.js

@@ -4442,30 +4442,6 @@ var doric_web = (function (exports, axios, sandbox) {
         }
     }
 
-    class ShaderPlugin extends DoricPlugin {
-        render(ret) {
-            var _a;
-            if (((_a = this.context.rootNode.viewId) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                if (this.context.rootNode.viewId === ret.id) {
-                    this.context.rootNode.blend(ret.props);
-                    this.context.rootNode.onBlended();
-                }
-                else {
-                    for (let map of this.context.headNodes.values()) {
-                        const viewNode = map.get(ret.id);
-                        viewNode === null || viewNode === void 0 ? void 0 : viewNode.blend(ret.props);
-                        viewNode === null || viewNode === void 0 ? void 0 : viewNode.onBlended();
-                    }
-                }
-            }
-            else {
-                this.context.rootNode.viewId = ret.id;
-                this.context.rootNode.blend(ret.props);
-                this.context.rootNode.onBlended();
-            }
-        }
-    }
-
     (function (LayoutSpec) {
         LayoutSpec[LayoutSpec["EXACTLY"] = 0] = "EXACTLY";
         LayoutSpec[LayoutSpec["WRAP_CONTENT"] = 1] = "WRAP_CONTENT";
@@ -4687,6 +4663,9 @@ var doric_web = (function (exports, axios, sandbox) {
                         this.view.style.boxShadow = "";
                     }
                     break;
+                case 'alpha':
+                    this.view.style.opacity = `${prop}`;
+                    break;
             }
         }
         set backgroundColor(v) {
@@ -4725,6 +4704,56 @@ var doric_web = (function (exports, axios, sandbox) {
             }
             return Reflect.apply(this.context.pureInvokeEntityMethod, this.context, argumentsList);
         }
+        /** ++++++++++call from doric ++++++++++*/
+        getWidth() {
+            return this.view.offsetWidth;
+        }
+        getHeight() {
+            return this.view.offsetHeight;
+        }
+        setWidth(v) {
+            this.view.style.width = toPixelString(v);
+        }
+        setHeight(v) {
+            this.view.style.height = toPixelString(v);
+        }
+        getX() {
+            return this.view.offsetLeft;
+        }
+        getY() {
+            return this.view.offsetTop;
+        }
+        setX(v) {
+            this.view.style.left = toPixelString(v);
+        }
+        setY(v) {
+            this.view.style.top = toPixelString(v);
+        }
+        getBackgroundColor() {
+            return this.view.style.backgroundColor;
+        }
+        setBackgroundColor(v) {
+            this.backgroundColor = v;
+        }
+        getAlpha() {
+            return this.view.style.opacity;
+        }
+        setAlpha(v) {
+            this.view.style.opacity = `${v}`;
+        }
+        getCorners() {
+            return this.view.style.borderRadius;
+        }
+        setCorners(v) {
+            this.view.style.borderRadius = toPixelString(v);
+        }
+        getLocationOnScreen() {
+            const rect = this.view.getClientRects()[0];
+            return {
+                x: rect.left,
+                y: rect.top,
+            };
+        }
     }
     class DoricSuperNode extends DoricViewNode {
         constructor() {
@@ -4902,6 +4931,53 @@ var doric_web = (function (exports, axios, sandbox) {
         }
     }
 
+    class ShaderPlugin extends DoricPlugin {
+        render(ret) {
+            var _a;
+            if (((_a = this.context.rootNode.viewId) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                const viewNode = this.context.targetViewNode(ret.id);
+                viewNode === null || viewNode === void 0 ? void 0 : viewNode.blend(ret.props);
+                viewNode === null || viewNode === void 0 ? void 0 : viewNode.onBlended();
+            }
+            else {
+                this.context.rootNode.viewId = ret.id;
+                this.context.rootNode.blend(ret.props);
+                this.context.rootNode.onBlended();
+            }
+        }
+        command(options) {
+            let viewNode = undefined;
+            for (let viewId of options.viewIds) {
+                if (!viewNode) {
+                    viewNode = this.context.targetViewNode(viewId);
+                }
+                else {
+                    if (viewNode instanceof DoricSuperNode) {
+                        viewNode = viewNode.getSubNodeById(viewId);
+                    }
+                }
+            }
+            if (!viewNode) {
+                return Promise.reject("Cannot find opposite view");
+            }
+            else {
+                const target = viewNode;
+                return new Promise((resolve, reject) => {
+                    try {
+                        const method = Reflect.get(target, options.name);
+                        if (!method) {
+                            reject(`"Cannot find plugin method in class:${target},method:${options.name}"`);
+                        }
+                        resolve(Reflect.apply(method, target, [options.args]));
+                    }
+                    catch (err) {
+                        reject(err);
+                    }
+                });
+            }
+        }
+    }
+
     class DoricStackNode extends DoricGroupViewNode {
         build() {
             const ret = document.createElement('div');
@@ -5656,7 +5732,10 @@ var doric_web = (function (exports, axios, sandbox) {
             const header = document.createElement('div');
             const content = document.createElement('div');
             header.style.width = "100%";
-            header.style.height = "auto";
+            header.style.height = "100%";
+            header.style.display = "flex";
+            header.style.alignItems = "flex-end";
+            header.style.justifyContent = "center";
             content.style.width = "100%";
             content.style.height = "100%";
             ret.appendChild(header);
@@ -5791,6 +5870,27 @@ var doric_web = (function (exports, axios, sandbox) {
         onBlended() {
             super.onBlended();
         }
+        setRefreshing(v) {
+            var _a;
+            if (!this.headerContainer || !this.headerNode) {
+                return;
+            }
+            if (v) {
+                this.view.scrollTo({
+                    top: this.headerContainer.offsetHeight - this.headerNode.getHeight(),
+                    behavior: "smooth"
+                });
+            }
+            else {
+                this.view.scrollTo({
+                    top: (_a = this.headerContainer) === null || _a === void 0 ? void 0 : _a.offsetHeight,
+                    behavior: "smooth"
+                });
+            }
+        }
+        setRefreshable(v) {
+            console.log("setRefreshable", v);
+        }
     }
 
     const bundles = new Map;
@@ -5980,6 +6080,16 @@ ${content}
             doricContexts.set(this.contextId, this);
             this.rootNode = new DoricStackNode(this);
         }
+        targetViewNode(viewId) {
+            if (this.rootNode.viewId === viewId) {
+                return this.rootNode;
+            }
+            for (let nodes of this.headNodes.values()) {
+                if (nodes.has(viewId)) {
+                    return nodes.get(viewId);
+                }
+            }
+        }
         get panel() {
             var _a;
             return (_a = sandbox.jsObtainContext(this.contextId)) === null || _a === void 0 ? void 0 : _a.entity;

doric-web/src/DoricContext.ts

@@ -27,6 +27,17 @@ export class DoricContext {
         this.rootNode = new DoricStackNode(this)
     }
 
+    targetViewNode(viewId: string) {
+        if (this.rootNode.viewId === viewId) {
+            return this.rootNode
+        }
+        for (let nodes of this.headNodes.values()) {
+            if (nodes.has(viewId)) {
+                return nodes.get(viewId)
+            }
+        }
+    }
+
     get panel() {
         return jsObtainContext(this.contextId)?.entity as Panel
     }
@@ -55,7 +66,6 @@ export class DoricContext {
         this.invokeEntityMethod("__onCreate__")
     }
 
-
     onDestroy() {
         this.invokeEntityMethod("__onDestroy__")
     }

doric-web/src/plugins/ShaderPlugin.ts

@@ -1,23 +1,49 @@
 import { DoricPlugin } from "../DoricPlugin";
-import { DVModel } from "../shader/DoricViewNode";
+import { DoricSuperNode, DoricViewNode, DVModel } from "../shader/DoricViewNode";
 
 export class ShaderPlugin extends DoricPlugin {
     render(ret: DVModel) {
         if (this.context.rootNode.viewId?.length > 0) {
-            if (this.context.rootNode.viewId === ret.id) {
+            const viewNode = this.context.targetViewNode(ret.id)
-                this.context.rootNode.blend(ret.props)
+            viewNode?.blend(ret.props)
-                this.context.rootNode.onBlended()
+            viewNode?.onBlended()
-            } else {
-                for (let map of this.context.headNodes.values()) {
-                    const viewNode = map.get(ret.id)
-                    viewNode?.blend(ret.props)
-                    viewNode?.onBlended()
-                }
-            }
         } else {
             this.context.rootNode.viewId = ret.id
             this.context.rootNode.blend(ret.props)
             this.context.rootNode.onBlended()
         }
     }
+
+    command(options: {
+        viewIds: string[],
+        args: any,
+        name: string
+    }) {
+        let viewNode: DoricViewNode | undefined = undefined
+        for (let viewId of options.viewIds) {
+            if (!viewNode) {
+                viewNode = this.context.targetViewNode(viewId)
+            } else {
+                if (viewNode instanceof DoricSuperNode) {
+                    viewNode = viewNode.getSubNodeById(viewId)
+                }
+            }
+        }
+        if (!viewNode) {
+            return Promise.reject("Cannot find opposite view")
+        } else {
+            const target = viewNode
+            return new Promise((resolve, reject) => {
+                try {
+                    const method = Reflect.get(target, options.name)
+                    if (!method) {
+                        reject(`"Cannot find plugin method in class:${target},method:${options.name}"`)
+                    }
+                    resolve(Reflect.apply(method, target, [options.args]))
+                } catch (err) {
+                    reject(err)
+                }
+            })
+        }
+    }
 }

doric-web/src/shader/DoricRefreshableNode.ts

@@ -20,7 +20,10 @@ export class DoricRefreshableNode extends DoricSuperNode {
         const header = document.createElement('div')
         const content = document.createElement('div')
         header.style.width = "100%"
-        header.style.height = "auto"
+        header.style.height = "100%"
+        header.style.display = "flex"
+        header.style.alignItems = "flex-end"
+        header.style.justifyContent = "center"
         content.style.width = "100%"
         content.style.height = "100%"
         ret.appendChild(header)
@@ -151,4 +154,24 @@ export class DoricRefreshableNode extends DoricSuperNode {
         super.onBlended()
     }
 
+    setRefreshing(v: boolean) {
+        if (!this.headerContainer || !this.headerNode) {
+            return
+        }
+        if (v) {
+            this.view.scrollTo({
+                top: this.headerContainer.offsetHeight - this.headerNode.getHeight(),
+                behavior: "smooth"
+            })
+        } else {
+            this.view.scrollTo({
+                top: this.headerContainer?.offsetHeight,
+                behavior: "smooth"
+            })
+        }
+    }
+
+    setRefreshable(v: boolean) {
+        console.log("setRefreshable", v)
+    }
 }

doric-web/src/shader/DoricViewNode.ts

@@ -99,7 +99,6 @@ export abstract class DoricViewNode {
 
     view!: HTMLElement
 
-
     constructor(context: DoricContext) {
         this.context = context
     }
@@ -146,7 +145,6 @@ export abstract class DoricViewNode {
     }
 
     onBlending() {
-
     }
 
     onBlended() {
@@ -282,6 +280,9 @@ export abstract class DoricViewNode {
                     this.view.style.boxShadow = ""
                 }
                 break
+            case 'alpha':
+                this.view.style.opacity = `${prop}`
+                break
         }
     }
 
@@ -325,6 +326,72 @@ export abstract class DoricViewNode {
         }
         return Reflect.apply(this.context.pureInvokeEntityMethod, this.context, argumentsList)
     }
+
+    /** ++++++++++call from doric ++++++++++*/
+    getWidth() {
+        return this.view.offsetWidth
+    }
+
+    getHeight() {
+        return this.view.offsetHeight
+    }
+
+    setWidth(v: number) {
+        this.view.style.width = toPixelString(v)
+    }
+
+    setHeight(v: number) {
+        this.view.style.height = toPixelString(v)
+    }
+
+    getX() {
+        return this.view.offsetLeft
+    }
+
+    getY() {
+        return this.view.offsetTop
+    }
+
+    setX(v: number) {
+        this.view.style.left = toPixelString(v)
+    }
+
+    setY(v: number) {
+        this.view.style.top = toPixelString(v)
+    }
+
+    getBackgroundColor() {
+        return this.view.style.backgroundColor
+    }
+
+    setBackgroundColor(v: number) {
+        this.backgroundColor = v
+    }
+
+    getAlpha() {
+        return this.view.style.opacity
+    }
+
+    setAlpha(v: number) {
+        this.view.style.opacity = `${v}`
+    }
+
+    getCorners() {
+        return this.view.style.borderRadius
+    }
+
+    setCorners(v: number) {
+        this.view.style.borderRadius = toPixelString(v)
+    }
+
+    getLocationOnScreen() {
+        const rect = this.view.getClientRects()[0]
+        return {
+            x: rect.left,
+            y: rect.top,
+        }
+    }
+    /** ----------call from doric ----------*/
 }