web:Refreshable developing

doric-web/dist/index.js

@@ -4462,6 +4462,9 @@ var doric_web = (function (exports, axios, sandbox) {
     function toPixelString(v) {
         return `${v}px`;
     }
+    function pixelString2Number(v) {
+        return parseFloat(v.substring(0, v.indexOf("px")));
+    }
     function toRGBAString(color) {
         let strs = [];
         for (let i = 0; i < 32; i += 8) {
@@ -4736,13 +4739,13 @@ var doric_web = (function (exports, axios, sandbox) {
             this.backgroundColor = v;
         }
         getAlpha() {
-            return this.view.style.opacity;
+            return parseFloat(this.view.style.opacity);
         }
         setAlpha(v) {
             this.view.style.opacity = `${v}`;
         }
         getCorners() {
-            return this.view.style.borderRadius;
+            return parseFloat(this.view.style.borderRadius);
         }
         setCorners(v) {
             this.view.style.borderRadius = toPixelString(v);
@@ -4994,13 +4997,19 @@ var doric_web = (function (exports, axios, sandbox) {
         configSize() {
             if (this.layoutConfig.widthSpec === exports.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 === exports.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);
             }
@@ -5725,6 +5734,7 @@ var doric_web = (function (exports, axios, sandbox) {
             super(...arguments);
             this.headerViewId = "";
             this.contentViewId = "";
+            this.refreshable = true;
         }
         build() {
             const ret = document.createElement('div');
@@ -5742,22 +5752,39 @@ var doric_web = (function (exports, axios, sandbox) {
             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 = () => {
+                var _a, _b;
+                if (!this.refreshable) {
+                    return;
+                }
+                if (header.offsetHeight - ret.scrollTop >= (((_a = this.headerNode) === null || _a === void 0 ? void 0 : _a.getWidth()) || 0)) {
+                    this.setRefreshing(true);
+                    (_b = this.onRefreshCallback) === null || _b === void 0 ? void 0 : _b.call(this);
+                }
+                else {
+                    // To idel
+                    ret.scrollTo({
+                        top: header.offsetHeight,
+                        behavior: "smooth"
+                    });
+                }
             };
             ret.ontouchcancel = () => {
-                ret.scrollTo({
+                touchend();
-                    top: header.offsetHeight,
-                    behavior: "smooth"
-                });
             };
             ret.ontouchend = () => {
-                ret.scrollTo({
+                touchend();
-                    top: header.offsetHeight,
-                    behavior: "smooth"
-                });
             };
             window.requestAnimationFrame(() => {
                 ret.scrollTop = header.offsetHeight;
@@ -5889,7 +5916,10 @@ var doric_web = (function (exports, axios, sandbox) {
             }
         }
         setRefreshable(v) {
-            console.log("setRefreshable", v);
+            this.refreshable = v;
+            if (!v) {
+                this.setRefreshing(false);
+            }
         }
     }
 
@@ -6266,6 +6296,7 @@ ${content}
     exports.destroyContext = destroyContext;
     exports.injectGlobalObject = injectGlobalObject;
     exports.loadJS = loadJS;
+    exports.pixelString2Number = pixelString2Number;
     exports.registerJSBundle = registerJSBundle;
     exports.registerPlugin = registerPlugin;
     exports.registerViewNode = registerViewNode;

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({
+            touchend()
-                top: header.offsetHeight,
-                behavior: "smooth"
-            })
         }
         ret.ontouchend = () => {
-            ret.scrollTo({
+            touchend()
-                top: header.offsetHeight,
-                behavior: "smooth"
-            })
         }
         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) {