web:Refreshable developing

doric-web/src/shader/DoricRefreshableNode.ts

@@ -13,7 +13,7 @@ export class DoricRefreshableNode extends DoricSuperNode {
     headerContainer?: HTMLDivElement
 
     contentContainer?: HTMLDivElement
-
+    refreshable = true
     build() {
         const ret = document.createElement('div')
         ret.style.overflow = "hidden"
@@ -30,22 +30,37 @@ export class DoricRefreshableNode extends DoricSuperNode {
         ret.appendChild(content)
         let touchStart = 0
         ret.ontouchstart = (ev) => {
+            if (!this.refreshable) {
+                return
+            }
             touchStart = ev.touches[0].pageY
         }
         ret.ontouchmove = (ev) => {
-            ret.scrollTop = Math.max(0, header.offsetHeight - (ev.touches[0].pageY - touchStart))
+            if (!this.refreshable) {
+                return
+            }
+            ret.scrollTop = Math.max(0, header.offsetHeight - (ev.touches[0].pageY - touchStart) * 0.68)
+        }
+        const touchend = () => {
+            if (!this.refreshable) {
+                return
+            }
+            if (header.offsetHeight - ret.scrollTop >= (this.headerNode?.getWidth() || 0)) {
+                this.setRefreshing(true)
+                this.onRefreshCallback?.()
+            } else {
+                // To idel
+                ret.scrollTo({
+                    top: header.offsetHeight,
+                    behavior: "smooth"
+                })
+            }
         }
         ret.ontouchcancel = () => {
-            ret.scrollTo({
-                top: header.offsetHeight,
-                behavior: "smooth"
-            })
+            touchend()
         }
         ret.ontouchend = () => {
-            ret.scrollTo({
-                top: header.offsetHeight,
-                behavior: "smooth"
-            })
+            touchend()
         }
         window.requestAnimationFrame(() => {
             ret.scrollTop = header.offsetHeight
@@ -172,6 +187,9 @@ export class DoricRefreshableNode extends DoricSuperNode {
     }
 
     setRefreshable(v: boolean) {
-        console.log("setRefreshable", v)
+        this.refreshable = v
+        if (!v) {
+            this.setRefreshing(false)
+        }
     }
 }

doric-web/src/shader/DoricStackNode.ts

@@ -1,4 +1,4 @@
-import { DoricGroupViewNode, LayoutSpec, FrameSize, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString } from "./DoricViewNode";
+import { DoricGroupViewNode, LayoutSpec, FrameSize, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString, pixelString2Number } from "./DoricViewNode";
 
 export class DoricStackNode extends DoricGroupViewNode {
 
@@ -19,13 +19,19 @@ export class DoricStackNode extends DoricGroupViewNode {
     configSize() {
         if (this.layoutConfig.widthSpec === LayoutSpec.WRAP_CONTENT) {
             const width = this.childNodes.reduce((prev, current) => {
-                return Math.max(prev, current.view.offsetWidth)
+                const computedStyle = window.getComputedStyle(current.view)
+                return Math.max(prev, current.view.offsetWidth
+                    + pixelString2Number(computedStyle.marginLeft)
+                    + pixelString2Number(computedStyle.marginRight))
             }, 0)
             this.view.style.width = toPixelString(width)
         }
         if (this.layoutConfig.heightSpec === LayoutSpec.WRAP_CONTENT) {
             const height = this.childNodes.reduce((prev, current) => {
-                return Math.max(prev, current.view.offsetHeight)
+                const computedStyle = window.getComputedStyle(current.view)
+                return Math.max(prev, current.view.offsetHeight
+                    + pixelString2Number(computedStyle.marginTop)
+                    + pixelString2Number(computedStyle.marginBottom))
             }, 0)
             this.view.style.height = toPixelString(height)
         }

doric-web/src/shader/DoricViewNode.ts

@@ -33,6 +33,10 @@ export function toPixelString(v: number) {
     return `${v}px`
 }
 
+export function pixelString2Number(v: string) {
+    return parseFloat(v.substring(0, v.indexOf("px")))
+}
+
 export function toRGBAString(color: number) {
     let strs = []
     for (let i = 0; i < 32; i += 8) {
@@ -369,7 +373,7 @@ export abstract class DoricViewNode {
     }
 
     getAlpha() {
-        return this.view.style.opacity
+        return parseFloat(this.view.style.opacity)
     }
 
     setAlpha(v: number) {
@@ -377,7 +381,7 @@ export abstract class DoricViewNode {
     }
 
     getCorners() {
-        return this.view.style.borderRadius
+        return parseFloat(this.view.style.borderRadius)
     }
 
     setCorners(v: number) {