feat: doric-web text support maxLines

doric-demo/src/NavigatorDemo.ts

@@ -20,6 +20,7 @@ class NaivgatorDemo extends Panel {
                 'AnimatorDemo',
                 'Gobang',
                 'NotificationDemo',
+                'TextDemo',
                 'SwitchDemo',
                 'SliderDemo',
                 'NavbarDemo',

doric-demo/src/TextDemo.ts

@@ -61,7 +61,14 @@ class TextDemo extends Panel {
                         layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST).configHeight(LayoutSpec.JUST),
                     }),
                     text({
-                        text: "This is normal text",
+                        text: "This is normal text! This is normal text! This is normal text! This is normal text! This is normal text! This is normal text! ",
+                        maxLines: 2,
+                        backgroundColor: Color.LTGRAY,
+                        layoutConfig:layoutConfig().configWidth(LayoutSpec.JUST).configHeight(LayoutSpec.FIT),
+                        width:320,
+                        border:{"width":1, "color":Color.RED},
+                        margin:{left:15,right:17}
+
                     }),
                     hlayout([
                         text({

doric-web/dist/index.js

@@ -7157,6 +7157,10 @@ var doric_web = (function (exports, axios, sandbox) {
 	}
 
 	class DoricTextNode extends DoricViewNode {
+	    constructor() {
+	        super(...arguments);
+	        this.maxLines = 0;
+	    }
 	    build() {
 	        const div = document.createElement('div');
 	        div.style.display = "flex";
@@ -7218,11 +7222,63 @@ var doric_web = (function (exports, axios, sandbox) {
 	                        break;
 	                }
 	                break;
+	            case "maxLines":
+	                this.maxLines = prop;
+	                break;
 	            default:
 	                super.blendProps(v, propName, prop);
 	                break;
 	        }
 	    }
+	    layout() {
+	        super.layout();
+	        Promise.resolve().then(_ => {
+	            this.configSize();
+	        });
+	    }
+	    configSize() {
+	        if (this.maxLines > 0) {
+	            const currentHeight = this.view.offsetHeight;
+	            const computedStyle = window.getComputedStyle(this.view);
+	            const maxHeight = this.getLineHeight(computedStyle) * this.maxLines;
+	            if (currentHeight > maxHeight) {
+	                this.view.style.height = toPixelString(maxHeight);
+	                this.view.style.alignItems = "flex-start";
+	                this.view.style.overflow = 'hidden';
+	                this.view.textContent = this.getTruncationText(computedStyle, maxHeight);
+	            }
+	        }
+	    }
+	    getLineHeight(style) {
+	        const tempEle = document.createElement('div');
+	        tempEle.style.cssText = style.cssText;
+	        tempEle.textContent = 'Test';
+	        document.body.appendChild(tempEle);
+	        const lineHeight = tempEle.offsetHeight;
+	        document.body.removeChild(tempEle);
+	        return lineHeight;
+	    }
+	    getTruncationText(style, maxHeight) {
+	        const originalText = this.view.textContent;
+	        let start = 0, end = originalText.length;
+	        const tempEle = document.createElement('div');
+	        tempEle.style.cssText = style.cssText;
+	        tempEle.style.alignItems = "flex-start";
+	        tempEle.style.width = this.view.style.width;
+	        document.body.appendChild(tempEle);
+	        while (start <= end) {
+	            const mid = Math.floor((start + end) / 2);
+	            tempEle.textContent = originalText.slice(0, mid) + '...';
+	            if (tempEle.offsetHeight > maxHeight) {
+	                end = mid - 1;
+	            }
+	            else {
+	                start = mid + 1;
+	            }
+	        }
+	        document.body.removeChild(tempEle);
+	        return `${originalText.slice(0, end) + '...'}`;
+	    }
 	}
 
 	var ScaleType;
@@ -7644,10 +7700,23 @@ var doric_web = (function (exports, axios, sandbox) {
 	                break;
 	        }
 	    }
+	    reload() {
+	        this.reset();
+	        const ret = this.pureCallJSResponse("renderBunchedItems", 0, this.itemCount);
+	        ret.forEach(e => {
+	            const viewNode = DoricViewNode.create(this.context, e.type);
+	            viewNode.viewId = e.id;
+	            viewNode.init(this);
+	            viewNode.blend(e.props);
+	            this.view.appendChild(viewNode.view);
+	            return viewNode;
+	        });
+	    }
 	    reset() {
 	        while (this.view.lastElementChild) {
 	            this.view.removeChild(this.view.lastElementChild);
 	        }
+	        this.childNodes = [];
 	    }
 	    onBlending() {
 	        super.onBlending();

doric-web/src/shader/DoricTextNode.ts

@@ -2,6 +2,7 @@ import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelStr
 import { toRGBAString } from "../utils/color";
 
 export class DoricTextNode extends DoricViewNode {
+    maxLines = 0
     textElement!: HTMLElement
     build(): HTMLElement {
         const div = document.createElement('div')
@@ -61,10 +62,66 @@ export class DoricTextNode extends DoricViewNode {
                         break
                 }
                 break
+            case "maxLines":
+                this.maxLines = prop as number
+                break
             default:
                 super.blendProps(v, propName, prop)
                 break
         }
     }
 
+    layout() {
+        super.layout()
+        Promise.resolve().then(_ => {
+            this.configSize()
+        })
+    }
+
+    configSize() {
+        if (this.maxLines > 0) {
+            const currentHeight = this.view.offsetHeight
+            const computedStyle = window.getComputedStyle(this.view)
+            const maxHeight = this.getLineHeight(computedStyle) * this.maxLines
+            if (currentHeight > maxHeight) {
+                this.view.style.height = toPixelString(maxHeight)
+                this.view.style.alignItems = "flex-start"
+                this.view.style.overflow = 'hidden'
+                this.view.textContent = this.getTruncationText(computedStyle, maxHeight)
+            }
+        } 
+    }
+
+    getLineHeight(style:CSSStyleDeclaration) {
+        const tempEle = document.createElement('div')
+        tempEle.style.cssText = style.cssText
+        tempEle.textContent = 'Test'
+        document.body.appendChild(tempEle);
+        const lineHeight = tempEle.offsetHeight;
+        document.body.removeChild(tempEle);
+        return lineHeight;
+    }
+
+    getTruncationText(style:CSSStyleDeclaration, maxHeight:number) {
+        const originalText = this.view.textContent!
+        let start = 0, end = originalText.length
+
+        const tempEle = document.createElement('div')
+        tempEle.style.cssText = style.cssText
+        tempEle.style.alignItems = "flex-start"
+        tempEle.style.width = this.view.style.width
+        document.body.appendChild(tempEle);
+
+        while(start <= end) {
+            const mid = Math.floor((start + end) / 2)
+            tempEle.textContent = originalText.slice(0,mid) + '...'
+            if (tempEle.offsetHeight > maxHeight) {
+                end = mid - 1
+            } else {
+                start = mid + 1
+            }
+        }
+        document.body.removeChild(tempEle)
+        return `${originalText.slice(0, end) + '...'}`
+    }
 }