web: add DoricRereshableNode

doric-web/src/shader/DoricListNode.ts

@@ -78,10 +78,7 @@ export class DoricListNode extends DoricSuperNode {
         }
     }
     blendSubNode(model: DVModel) {
-        const viewNode = this.getSubNodeById(model.id)
-        if (viewNode) {
-            viewNode.blend(model.props)
-        }
+        this.getSubNodeById(model.id)?.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) {
-        return undefined
-    }
+    contentViewId = ""
+    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.backgroundColor = "red"
-
+        header.style.height = "auto"
         content.style.width = "100%"
         content.style.height = "100%"
-        content.style.backgroundColor = "blue"
         ret.appendChild(header)
         ret.appendChild(content)
-        ret.addEventListener("scroll", () => {
-            ret.scrollTop = 200
+        let touchStart = 0
+        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() {
-        super.layout()
+    onBlended() {
+        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)