web: add DoricRereshableNode

doric-web/dist/index.js

@@ -4448,19 +4448,20 @@ var doric_web = (function (exports, axios, sandbox) {
             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);
-                        if (viewNode) {
+                        viewNode === null || viewNode === void 0 ? void 0 : viewNode.blend(ret.props);
-                            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();
             }
         }
     }
@@ -4559,7 +4560,6 @@ var doric_web = (function (exports, axios, sandbox) {
             }
             this.onBlending();
             this.layout();
-            this.onBlended();
         }
         onBlending() {
         }
@@ -4799,6 +4799,10 @@ var doric_web = (function (exports, axios, sandbox) {
             super.onBlending();
             this.configChildNode();
         }
+        onBlended() {
+            super.onBlended();
+            this.childNodes.forEach(e => e.onBlended());
+        }
         configChildNode() {
             this.childViewIds.forEach((childViewId, index) => {
                 const model = this.getSubModel(childViewId);
@@ -5279,8 +5283,10 @@ var doric_web = (function (exports, axios, sandbox) {
                 this.childNode = childNode;
             }
         }
-        layout() {
+        onBlended() {
-            super.layout();
+            var _a;
+            super.onBlended();
+            (_a = this.childNode) === null || _a === void 0 ? void 0 : _a.onBlended();
         }
     }
 
@@ -5541,10 +5547,8 @@ var doric_web = (function (exports, axios, sandbox) {
             }
         }
         blendSubNode(model) {
-            const viewNode = this.getSubNodeById(model.id);
+            var _a;
-            if (viewNode) {
+            (_a = this.getSubNodeById(model.id)) === null || _a === void 0 ? void 0 : _a.blend(model.props);
-                viewNode.blend(model.props);
-            }
         }
         getSubNodeById(viewId) {
             if (viewId === this.loadMoreViewId) {
@@ -5569,6 +5573,10 @@ var doric_web = (function (exports, axios, sandbox) {
             });
             return ret;
         }
+        onBlended() {
+            super.onBlended();
+            this.childNodes.forEach(e => e.onBlended());
+        }
     }
 
     class DoricDraggableNode extends DoricStackNode {
@@ -5637,31 +5645,151 @@ var doric_web = (function (exports, axios, sandbox) {
     }
 
     class DoricRefreshableNode extends DoricSuperNode {
-        blendSubNode(model) {
+        constructor() {
-        }
+            super(...arguments);
-        getSubNodeById(viewId) {
+            this.headerViewId = "";
-            return undefined;
+            this.contentViewId = "";
         }
         build() {
             const ret = document.createElement('div');
-            ret.style.overflow = "scroll";
+            ret.style.overflow = "hidden";
             const header = document.createElement('div');
             const content = document.createElement('div');
             header.style.width = "100%";
-            header.style.height = "200px";
+            header.style.height = "auto";
-            header.style.backgroundColor = "red";
             content.style.width = "100%";
             content.style.height = "100%";
-            content.style.backgroundColor = "blue";
             ret.appendChild(header);
             ret.appendChild(content);
-            ret.addEventListener("scroll", () => {
+            let touchStart = 0;
-                ret.scrollTop = 200;
+            ret.ontouchstart = (ev) => {
+                touchStart = ev.touches[0].pageY;
+            };
+            ret.ontouchmove = (ev) => {
+                ret.scrollTop = Math.max(0, header.offsetHeight - (ev.touches[0].pageY - touchStart));
+            };
+            ret.ontouchcancel = () => {
+                ret.scrollTo({
+                    top: header.offsetHeight,
+                    behavior: "smooth"
                 });
+            };
+            ret.ontouchend = () => {
+                ret.scrollTo({
+                    top: header.offsetHeight,
+                    behavior: "smooth"
+                });
+            };
+            window.requestAnimationFrame(() => {
+                ret.scrollTop = header.offsetHeight;
+            });
+            this.headerContainer = header;
+            this.contentContainer = content;
             return ret;
         }
+        blendProps(v, propName, prop) {
+            if (propName === 'content') {
+                this.contentViewId = prop;
+            }
+            else if (propName === 'header') {
+                this.headerViewId = prop;
+            }
+            else if (propName === 'onRefresh') {
+                this.onRefreshCallback = () => {
+                    this.callJSResponse(prop);
+                };
+            }
+            else {
+                super.blendProps(v, propName, prop);
+            }
+        }
+        blendSubNode(model) {
+            var _a;
+            (_a = this.getSubNodeById(model.id)) === null || _a === void 0 ? void 0 : _a.blend(model.props);
+        }
+        getSubNodeById(viewId) {
+            if (viewId === this.headerViewId) {
+                return this.headerNode;
+            }
+            else if (viewId === this.contentViewId) {
+                return this.contentNode;
+            }
+            return undefined;
+        }
+        onBlending() {
+            var _a, _b, _c, _d, _e, _f;
+            super.onBlending();
+            {
+                const headerModel = this.getSubModel(this.headerViewId);
+                if (headerModel) {
+                    if (this.headerNode) {
+                        if (this.headerNode.viewId !== this.headerViewId) {
+                            if (this.reusable && this.headerNode.viewType === headerModel.type) {
+                                this.headerNode.viewId = headerModel.id;
+                                this.headerNode.blend(headerModel.props);
+                            }
+                            else {
+                                (_a = this.headerContainer) === null || _a === void 0 ? void 0 : _a.removeChild(this.headerNode.view);
+                                const headerNode = DoricViewNode.create(this.context, headerModel.type);
+                                if (headerNode) {
+                                    headerNode.viewId = headerModel.id;
+                                    headerNode.init(this);
+                                    headerNode.blend(headerModel.props);
+                                    (_b = this.headerContainer) === null || _b === void 0 ? void 0 : _b.appendChild(headerNode.view);
+                                    this.headerNode = headerNode;
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        const headerNode = DoricViewNode.create(this.context, headerModel.type);
+                        if (headerNode) {
+                            headerNode.viewId = headerModel.id;
+                            headerNode.init(this);
+                            headerNode.blend(headerModel.props);
+                            (_c = this.headerContainer) === null || _c === void 0 ? void 0 : _c.appendChild(headerNode.view);
+                            this.headerNode = headerNode;
+                        }
+                    }
+                }
+            }
+            {
+                const contentModel = this.getSubModel(this.contentViewId);
+                if (contentModel) {
+                    if (this.contentNode) {
+                        if (this.contentNode.viewId !== this.contentViewId) {
+                            if (this.reusable && this.contentNode.viewType === contentModel.type) {
+                                this.contentNode.viewId = contentModel.id;
+                                this.contentNode.blend(contentModel.props);
+                            }
+                            else {
+                                (_d = this.contentContainer) === null || _d === void 0 ? void 0 : _d.removeChild(this.contentNode.view);
+                                const contentNode = DoricViewNode.create(this.context, contentModel.type);
+                                if (contentNode) {
+                                    contentNode.viewId = contentModel.id;
+                                    contentNode.init(this);
+                                    contentNode.blend(contentModel.props);
+                                    (_e = this.contentContainer) === null || _e === void 0 ? void 0 : _e.appendChild(contentNode.view);
+                                    this.contentNode = contentNode;
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        const contentNode = DoricViewNode.create(this.context, contentModel.type);
+                        if (contentNode) {
+                            contentNode.viewId = contentModel.id;
+                            contentNode.init(this);
+                            contentNode.blend(contentModel.props);
+                            (_f = this.contentContainer) === null || _f === void 0 ? void 0 : _f.appendChild(contentNode.view);
+                            this.contentNode = contentNode;
+                        }
+                    }
+                }
+            }
+        }
         onBlended() {
-            this.view.scrollTop = 200;
+            super.onBlended();
         }
     }
 

doric-web/src/plugins/ShaderPlugin.ts

@@ -6,17 +6,18 @@ export class ShaderPlugin extends DoricPlugin {
         if (this.context.rootNode.viewId?.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)
-                    if (viewNode) {
+                    viewNode?.blend(ret.props)
-                        viewNode.blend(ret.props)
+                    viewNode?.onBlended()
-                    }
                 }
             }
         } else {
             this.context.rootNode.viewId = ret.id
             this.context.rootNode.blend(ret.props)
+            this.context.rootNode.onBlended()
         }
     }
 }

doric-web/src/shader/DoricListNode.ts

@@ -78,10 +78,7 @@ export class DoricListNode extends DoricSuperNode {
         }
     }
     blendSubNode(model: DVModel) {
-        const viewNode = this.getSubNodeById(model.id)
+        this.getSubNodeById(model.id)?.blend(model.props)
-        if (viewNode) {
-            viewNode.blend(model.props)
-        }
     }
 
     getSubNodeById(viewId: string) {
@@ -109,4 +106,8 @@ export class DoricListNode extends DoricSuperNode {
         })
         return ret
     }
+    onBlended() {
+        super.onBlended()
+        this.childNodes.forEach(e => e.onBlended())
+    }
 }

doric-web/src/shader/DoricRefreshableNode.ts

@@ -1,32 +1,154 @@
-import { DoricSuperNode, DVModel } from "./DoricViewNode";
+import { DoricSuperNode, DoricViewNode, DVModel } from "./DoricViewNode";
 
 export class DoricRefreshableNode extends DoricSuperNode {
-    blendSubNode(model: DVModel) {
 
-    }
+    headerViewId = ""
+    headerNode?: DoricViewNode
 
-    getSubNodeById(viewId: string) {
+    contentViewId = ""
-        return undefined
+    contentNode?: DoricViewNode
-    }
+
+    onRefreshCallback?: Function
+
+    headerContainer?: HTMLDivElement
+
+    contentContainer?: HTMLDivElement
 
     build() {
         const ret = document.createElement('div')
-        ret.style.overflow = "scroll"
+        ret.style.overflow = "hidden"
         const header = document.createElement('div')
         const content = document.createElement('div')
         header.style.width = "100%"
-        header.style.height = "200px"
+        header.style.height = "auto"
-        header.style.backgroundColor = "red"
-
         content.style.width = "100%"
         content.style.height = "100%"
-        content.style.backgroundColor = "blue"
         ret.appendChild(header)
         ret.appendChild(content)
-        ret.addEventListener("scroll", () => {
+        let touchStart = 0
-            ret.scrollTop = 200
+        ret.ontouchstart = (ev) => {
+            touchStart = ev.touches[0].pageY
+        }
+        ret.ontouchmove = (ev) => {
+            ret.scrollTop = Math.max(0, header.offsetHeight - (ev.touches[0].pageY - touchStart))
+        }
+        ret.ontouchcancel = () => {
+            ret.scrollTo({
+                top: header.offsetHeight,
+                behavior: "smooth"
             })
+        }
+        ret.ontouchend = () => {
+            ret.scrollTo({
+                top: header.offsetHeight,
+                behavior: "smooth"
+            })
+        }
+        window.requestAnimationFrame(() => {
+            ret.scrollTop = header.offsetHeight
+        })
+        this.headerContainer = header
+        this.contentContainer = content
         return ret
     }
 
+    blendProps(v: HTMLElement, propName: string, prop: any) {
+        if (propName === 'content') {
+            this.contentViewId = prop
+        } else if (propName === 'header') {
+            this.headerViewId = prop
+        } else if (propName === 'onRefresh') {
+            this.onRefreshCallback = () => {
+                this.callJSResponse(prop)
+            }
+        } else {
+            super.blendProps(v, propName, prop)
+        }
+    }
+
+    blendSubNode(model: DVModel) {
+        this.getSubNodeById(model.id)?.blend(model.props)
+    }
+
+    getSubNodeById(viewId: string) {
+        if (viewId === this.headerViewId) {
+            return this.headerNode
+        } else if (viewId === this.contentViewId) {
+            return this.contentNode
+        }
+        return undefined
+    }
+
+    onBlending() {
+        super.onBlending()
+        {
+            const headerModel = this.getSubModel(this.headerViewId)
+            if (headerModel) {
+                if (this.headerNode) {
+                    if (this.headerNode.viewId !== this.headerViewId) {
+                        if (this.reusable && this.headerNode.viewType === headerModel.type) {
+                            this.headerNode.viewId = headerModel.id
+                            this.headerNode.blend(headerModel.props)
+                        } else {
+                            this.headerContainer?.removeChild(this.headerNode.view)
+                            const headerNode = DoricViewNode.create(this.context, headerModel.type)
+                            if (headerNode) {
+                                headerNode.viewId = headerModel.id
+                                headerNode.init(this)
+                                headerNode.blend(headerModel.props)
+                                this.headerContainer?.appendChild(headerNode.view)
+                                this.headerNode = headerNode
+                            }
+                        }
+                    }
+                } else {
+                    const headerNode = DoricViewNode.create(this.context, headerModel.type)
+                    if (headerNode) {
+                        headerNode.viewId = headerModel.id
+                        headerNode.init(this)
+                        headerNode.blend(headerModel.props)
+                        this.headerContainer?.appendChild(headerNode.view)
+                        this.headerNode = headerNode
+                    }
+                }
+            }
+        }
+        {
+            const contentModel = this.getSubModel(this.contentViewId)
+            if (contentModel) {
+                if (this.contentNode) {
+                    if (this.contentNode.viewId !== this.contentViewId) {
+                        if (this.reusable && this.contentNode.viewType === contentModel.type) {
+                            this.contentNode.viewId = contentModel.id
+                            this.contentNode.blend(contentModel.props)
+                        } else {
+                            this.contentContainer?.removeChild(this.contentNode.view)
+                            const contentNode = DoricViewNode.create(this.context, contentModel.type)
+                            if (contentNode) {
+                                contentNode.viewId = contentModel.id
+                                contentNode.init(this)
+                                contentNode.blend(contentModel.props)
+                                this.contentContainer?.appendChild(contentNode.view)
+                                this.contentNode = contentNode
+                            }
+                        }
+                    }
+                } else {
+                    const contentNode = DoricViewNode.create(this.context, contentModel.type)
+                    if (contentNode) {
+                        contentNode.viewId = contentModel.id
+                        contentNode.init(this)
+                        contentNode.blend(contentModel.props)
+                        this.contentContainer?.appendChild(contentNode.view)
+                        this.contentNode = contentNode
+                    }
+                }
+            }
+        }
+    }
+
+    onBlended() {
+        super.onBlended()
+    }
+
 }

doric-web/src/shader/DoricScrollerNode.ts

@@ -63,7 +63,8 @@ export class DoricScrollerNode extends DoricSuperNode {
         }
     }
 
-    layout() {
+    onBlended() {
-        super.layout()
+        super.onBlended()
+        this.childNode?.onBlended()
     }
 }

doric-web/src/shader/DoricViewNode.ts

@@ -403,10 +403,17 @@ export abstract class DoricGroupViewNode extends DoricSuperNode {
     blend(props: { [index: string]: any }) {
         super.blend(props)
     }
+
     onBlending() {
         super.onBlending()
         this.configChildNode()
     }
+
+    onBlended() {
+        super.onBlended()
+        this.childNodes.forEach(e => e.onBlended())
+    }
+
     configChildNode() {
         this.childViewIds.forEach((childViewId, index) => {
             const model = this.getSubModel(childViewId)