@leafer-ui/node 1.0.0-rc.4 → 1.0.0-rc.6

package/dist/node.esm.js

@@ -1,9 +1,42 @@
-import { LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, BoundsHelper, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, Platform, AnimateEvent, ResizeEvent, Creator, LeaferCanvasBase, LeaferImage, InteractionBase, MatrixHelper, ImageEvent, PointHelper, MathHelper, TaskProcessor } from '@leafer/core';
+import { LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, BoundsHelper, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, Platform, AnimateEvent, ResizeEvent, Creator, LeaferCanvasBase, canvasPatch, LeaferImage, InteractionBase, FileHelper, MatrixHelper, ImageEvent, PointHelper, MathHelper, TaskProcessor } from '@leafer/core';
 export * from '@leafer/core';
 export { LeaferImage } from '@leafer/core';
-import { ColorConvert as ColorConvert$1, Paint, Effect, TextConvert as TextConvert$1, Export as Export$1 } from '@leafer-ui/core';
+import { writeFileSync } from 'fs';
+import { ColorConvert as ColorConvert$1, ImageManager as ImageManager$1, Paint, Effect, TextConvert as TextConvert$1, Export as Export$1 } from '@leafer-ui/core';
 export * from '@leafer-ui/core';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 class Watcher {
     get childrenChanged() { return this.hasAdd || this.hasRemove || this.hasVisible; }
     get updatedList() {
@@ -105,7 +138,7 @@ function updateMatrix(updateList, levelList) {
     let layout;
     updateList.list.forEach(leaf => {
         layout = leaf.__layout;
-        if (levelList.without(leaf) && !layout.useZoomProxy) {
+        if (levelList.without(leaf) && !layout.proxyZoom) {
             if (layout.matrixChanged) {
                 updateAllWorldMatrix$1(leaf);
                 levelList.push(leaf);
@@ -424,8 +457,7 @@ class Renderer {
         const { canvas, updateBlocks: list } = this;
         if (!list)
             return debug.warn('PartRender: need update attr');
-        if (list.some(block => block.includes(this.target.__world)))
-            this.mergeBlocks();
+        this.mergeBlocks();
         list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
             this.clipRender(block); });
     }
@@ -444,7 +476,7 @@ class Renderer {
             canvas.clearWorld(bounds, true);
             canvas.clipWorld(bounds, true);
         }
-        this.__render(bounds, realBounds);
+        this.__render(bounds, includes, realBounds);
         canvas.restore();
         Run.end(t);
     }
@@ -453,12 +485,12 @@ class Renderer {
         const { canvas } = this;
         canvas.save();
         canvas.clear();
-        this.__render(canvas.bounds);
+        this.__render(canvas.bounds, true);
         canvas.restore();
         Run.end(t);
     }
-    __render(bounds, realBounds) {
-        const options = (bounds === null || bounds === void 0 ? void 0 : bounds.includes(this.target.__world)) ? {} : { bounds };
+    __render(bounds, includes, realBounds) {
+        const options = bounds.includes(this.target.__world) ? { includes } : { bounds, includes };
         if (this.needFill)
             this.canvas.fillWorld(bounds, this.config.fill);
         if (Debug.showRepaint)
@@ -559,7 +591,7 @@ class Renderer {
 }
 
 const { hitRadiusPoint } = BoundsHelper;
-class FindPath {
+class Pather {
     constructor(target, selector) {
         this.target = target;
         this.selector = selector;
@@ -679,117 +711,108 @@ class FindPath {
 class Selector {
     constructor(target, userConfig) {
         this.config = {};
-        this.innerIdList = {};
-        this.idList = {};
-        this.classNameList = {};
-        this.tagNameList = {};
+        this.innerIdMap = {};
+        this.idMap = {};
+        this.methods = {
+            id: (leaf, name) => leaf.id === name ? this.idMap[name] = leaf : 0,
+            innerId: (leaf, innerId) => leaf.innerId === innerId ? this.innerIdMap[innerId] = leaf : 0,
+            className: (leaf, name) => leaf.className === name ? 1 : 0,
+            tag: (leaf, name) => leaf.__tag === name ? 1 : 0
+        };
         this.target = target;
         if (userConfig)
             this.config = DataHelper.default(userConfig, this.config);
-        this.findPath = new FindPath(target, this);
+        this.pather = new Pather(target, this);
         this.__listenEvents();
     }
     getByPoint(hitPoint, hitRadius, options) {
         if (Platform.name === 'node')
             this.target.emit(LayoutEvent.CHECK_UPDATE);
-        return this.findPath.getByPoint(hitPoint, hitRadius, options);
-    }
-    find(name, branch) {
-        if (typeof name === 'number') {
-            return this.getByInnerId(name, branch);
-        }
-        else if (name.startsWith('#')) {
-            return this.getById(name.substring(1), branch);
-        }
-        else if (name.startsWith('.')) {
-            return this.getByClassName(name.substring(1), branch);
-        }
-        else {
-            return this.getByTagName(name, branch);
+        return this.pather.getByPoint(hitPoint, hitRadius, options);
+    }
+    getBy(condition, branch, one, options) {
+        switch (typeof condition) {
+            case 'number':
+                const leaf = this.getByInnerId(condition, branch);
+                return one ? leaf : (leaf ? [leaf] : []);
+            case 'string':
+                switch (condition[0]) {
+                    case '#':
+                        const leaf = this.getById(condition.substring(1), branch);
+                        return one ? leaf : (leaf ? [leaf] : []);
+                    case '.':
+                        return this.getByMethod(this.methods.className, branch, one, condition.substring(1));
+                    default:
+                        return this.getByMethod(this.methods.tag, branch, one, condition);
+                }
+            case 'function':
+                return this.getByMethod(condition, branch, one, options);
         }
     }
-    getByInnerId(name, branch) {
-        let cache = this.innerIdList[name];
+    getByInnerId(innerId, branch) {
+        const cache = this.innerIdMap[innerId];
         if (cache)
             return cache;
-        if (!branch)
-            branch = this.target;
-        let find;
-        this.loopFind(branch, (leaf) => {
-            if (leaf.innerId === name) {
-                find = leaf;
-                this.innerIdList[name] = find;
-                return true;
-            }
-            else {
-                return false;
-            }
-        });
-        return find;
+        this.eachFind(this.toChildren(branch), this.methods.innerId, null, innerId);
+        return this.findLeaf;
     }
-    getById(name, branch) {
-        let cache = this.idList[name];
-        if (cache)
+    getById(id, branch) {
+        const cache = this.idMap[id];
+        if (cache && LeafHelper.hasParent(cache, branch || this.target))
             return cache;
-        if (!branch)
-            branch = this.target;
-        let find;
-        this.loopFind(branch, (leaf) => {
-            if (leaf.id === name) {
-                find = leaf;
-                this.idList[name] = find;
-                return true;
-            }
-            else {
-                return false;
-            }
-        });
-        return find;
-    }
-    getByClassName(name, branch) {
-        if (!branch)
-            branch = this.target;
-        let find = [];
-        this.loopFind(branch, (leaf) => {
-            if (leaf.className === name)
-                find.push(leaf);
-            return false;
-        });
-        return find;
-    }
-    getByTagName(name, branch) {
-        if (!branch)
-            branch = this.target;
-        let find = [];
-        this.loopFind(branch, (leaf) => {
-            if (leaf.__tag === name)
-                find.push(leaf);
-            return false;
-        });
-        return find;
+        this.eachFind(this.toChildren(branch), this.methods.id, null, id);
+        return this.findLeaf;
     }
-    loopFind(branch, find) {
-        if (find(branch))
-            return;
-        const { children } = branch;
+    getByClassName(className, branch) {
+        return this.getByMethod(this.methods.className, branch, false, className);
+    }
+    getByTag(tag, branch) {
+        return this.getByMethod(this.methods.tag, branch, false, tag);
+    }
+    getByMethod(method, branch, one, options) {
+        const list = one ? null : [];
+        this.eachFind(this.toChildren(branch), method, list, options);
+        return list || this.findLeaf;
+    }
+    eachFind(children, method, list, options) {
+        let child;
         for (let i = 0, len = children.length; i < len; i++) {
-            branch = children[i];
-            if (find(branch))
-                return;
-            if (branch.isBranch)
-                this.loopFind(branch, find);
+            child = children[i];
+            if (method(child, options)) {
+                if (list) {
+                    list.push(child);
+                }
+                else {
+                    this.findLeaf = child;
+                    return;
+                }
+            }
+            if (child.isBranch)
+                this.eachFind(child.children, method, list, options);
         }
     }
+    toChildren(branch) {
+        this.findLeaf = null;
+        return [branch || this.target];
+    }
     __onRemoveChild(event) {
-        const target = event.target;
-        if (this.idList[target.id])
-            this.idList[target.id] = null;
-        if (this.innerIdList[target.id])
-            this.innerIdList[target.innerId] = null;
+        const { id, innerId } = event.child;
+        if (this.idMap[id])
+            delete this.idMap[id];
+        if (this.innerIdMap[innerId])
+            delete this.innerIdMap[innerId];
+    }
+    __checkIdChange(event) {
+        if (event.attrName === 'id') {
+            const id = event.oldValue;
+            if (this.idMap[id])
+                delete this.idMap[id];
+        }
     }
     __listenEvents() {
         this.__eventIds = [
-            this.target.on_(ChildEvent.REMOVE, this.__onRemoveChild, this)
+            this.target.on_(ChildEvent.REMOVE, this.__onRemoveChild, this),
+            this.target.on_(PropertyEvent.CHANGE, this.__checkIdChange, this)
         ];
     }
     __removeListenEvents() {
@@ -799,11 +822,10 @@ class Selector {
     destroy() {
         if (this.__eventIds.length) {
             this.__removeListenEvents();
-            this.findPath.destroy();
-            this.innerIdList = {};
-            this.idList = {};
-            this.classNameList = {};
-            this.tagNameList = {};
+            this.pather.destroy();
+            this.findLeaf = null;
+            this.innerIdMap = {};
+            this.idMap = {};
         }
     }
 }
@@ -822,6 +844,10 @@ class LeaferCanvas extends LeaferCanvasBase {
         this.__createView();
         this.__createContext();
         this.resize(this.config);
+        if (Platform.roundRectPatch) {
+            this.context.__proto__.roundRect = null;
+            canvasPatch(this.context.__proto__);
+        }
     }
     __createView() {
         this.view = Platform.origin.createCanvas(1, 1);
@@ -834,6 +860,7 @@ class LeaferCanvas extends LeaferCanvasBase {
     }
 }
 
+const { mineType, fileType } = FileHelper;
 Object.assign(Creator, {
     canvas: (options, manager) => new LeaferCanvas(options, manager),
     image: (options) => new LeaferImage(options),
@@ -841,6 +868,7 @@ Object.assign(Creator, {
     interaction: (target, canvas, selector, options) => { return new InteractionBase(target, canvas, selector, options); }
 });
 function useCanvas(canvasType, power) {
+    Platform.canvasType = canvasType;
     if (!Platform.origin) {
         if (canvasType === 'skia') {
             const { Canvas, loadImage } = power;
@@ -851,7 +879,24 @@ function useCanvas(canvasType, power) {
                 canvasSaveAs: (canvas, filename, quality) => canvas.saveAs(filename, { quality }),
                 loadImage
             };
+            Platform.roundRectPatch = true;
         }
+        else if (canvasType === 'napi') {
+            const { Canvas, loadImage } = power;
+            Platform.origin = {
+                createCanvas: (width, height, format) => new Canvas(width, height, format),
+                canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
+                canvasToBolb: (canvas, type, quality) => __awaiter(this, void 0, void 0, function* () { return canvas.toBuffer(mineType(type), quality); }),
+                canvasSaveAs: (canvas, filename, quality) => __awaiter(this, void 0, void 0, function* () { return writeFileSync(filename, canvas.toBuffer(mineType(fileType(filename)), quality)); }),
+                loadImage
+            };
+        }
+        Platform.ellipseToCurve = true;
+        Platform.event = {
+            stopDefault(_origin) { },
+            stopNow(_origin) { },
+            stop(_origin) { }
+        };
         Platform.canvas = Creator.canvas();
     }
 }
@@ -1007,38 +1052,6 @@ function emit(type, data) {
         data.target.emitEvent(new ImageEvent(type, data));
 }
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const { get: get$2, scale: scaleHelper, copy: copy$1 } = MatrixHelper;
 function createPattern(ui, paint, pixelRatio) {
     let { scaleX, scaleY } = ui.__world;
@@ -1137,10 +1150,14 @@ function checkImage(ui, canvas, paint, allowPaint) {
                 createPattern(ui, paint, canvas.pixelRatio);
             }
             else {
-                ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
-                    if (canvas.bounds.hit(ui.__world) && createPattern(ui, paint, canvas.pixelRatio))
+                if (!paint.patternTask) {
+                    paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                        paint.patternTask = null;
+                        if (canvas.bounds.hit(ui.__world))
+                            createPattern(ui, paint, canvas.pixelRatio);
                         ui.forceUpdate('surface');
-                }), 300);
+                    }), 300);
+                }
             }
             return false;
         }
@@ -1504,17 +1521,30 @@ function conicGradient(paint, box) {
 let recycleMap;
 function compute(attrName, ui) {
     const value = [];
+    const data = ui.__;
     let item;
-    let paints = ui.__.__input[attrName];
+    let paints = data.__input[attrName];
     if (!(paints instanceof Array))
         paints = [paints];
-    recycleMap = recycleImage(attrName, ui.__);
+    recycleMap = recycleImage(attrName, data);
     for (let i = 0, len = paints.length; i < len; i++) {
         item = getLeafPaint(attrName, paints[i], ui);
         if (item)
             value.push(item);
     }
-    ui.__['_' + attrName] = value.length ? value : undefined;
+    data['_' + attrName] = value.length ? value : undefined;
+    let isPixel;
+    if (paints.length === 1) {
+        const paint = paints[0];
+        if (paint.type === 'image')
+            isPixel = ImageManager$1.isPixel(paint);
+    }
+    if (attrName === 'fill') {
+        data.__pixelFill = isPixel;
+    }
+    else {
+        data.__pixelStroke = isPixel;
+    }
 }
 function getLeafPaint(attrName, paint, ui) {
     if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
@@ -1789,6 +1819,8 @@ function createRows(drawData, content, style) {
     const { width, height } = bounds;
     const charMode = width || height || __letterSpacing || (textCase !== 'none');
     if (charMode) {
+        const wrap = style.textWrap !== 'none';
+        const breakAll = style.textWrap === 'break';
         paraStart = true;
         lastCharType = null;
         startCharSize = charWidth = charSize = wordWidth = rowWidth = 0;
@@ -1815,16 +1847,23 @@ function createRows(drawData, content, style) {
                 langBreak = (charType === Single && (lastCharType === Single || lastCharType === Letter)) || (lastCharType === Single && charType !== After);
                 afterBreak = ((charType === Before || charType === Single) && (lastCharType === Symbol || lastCharType === After));
                 realWidth = paraStart && paraIndent ? width - paraIndent : width;
-                if (width && rowWidth + wordWidth + charWidth > realWidth) {
-                    if (!afterBreak)
-                        afterBreak = charType === Letter && lastCharType == After;
-                    if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
+                if (wrap && (width && rowWidth + wordWidth + charWidth > realWidth)) {
+                    if (breakAll) {
                         if (wordWidth)
                             addWord();
                         addRow();
                     }
                     else {
-                        addRow();
+                        if (!afterBreak)
+                            afterBreak = charType === Letter && lastCharType == After;
+                        if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
+                            if (wordWidth)
+                                addWord();
+                            addRow();
+                        }
+                        else {
+                            addRow();
+                        }
                     }
                 }
                 if (char === ' ' && paraStart !== true && (rowWidth + wordWidth) === 0) ;
@@ -1894,7 +1933,7 @@ function addRow() {
 
 const CharMode = 0;
 const WordMode = 1;
-const RowMode = 2;
+const TextMode = 2;
 function layoutChar(drawData, style, width, _height) {
     const { rows } = drawData;
     const { textAlign, paraIndent, letterSpacing } = style;
@@ -1903,15 +1942,12 @@ function layoutChar(drawData, style, width, _height) {
         if (row.words) {
             indentWidth = paraIndent && row.paraStart ? paraIndent : 0;
             addWordWidth = (width && textAlign === 'justify' && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
-            mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : RowMode);
-            if (mode === RowMode) {
-                row.text = '';
+            mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : TextMode);
+            if (row.isOverflow && !letterSpacing)
+                row.textMode = true;
+            if (mode === TextMode) {
                 row.x += indentWidth;
-                row.words.forEach(word => {
-                    word.data.forEach(char => {
-                        row.text += char.char;
-                    });
-                });
+                toTextChar$1(row);
             }
             else {
                 row.x += indentWidth;
@@ -1937,6 +1973,14 @@ function layoutChar(drawData, style, width, _height) {
         }
     });
 }
+function toTextChar$1(row) {
+    row.text = '';
+    row.words.forEach(word => {
+        word.data.forEach(char => {
+            row.text += char.char;
+        });
+    });
+}
 function toWordChar(data, charX, wordChar) {
     data.forEach(char => {
         wordChar.char += char.char;
@@ -1957,10 +2001,10 @@ function toChar(data, charX, rowData) {
 
 function layoutText(drawData, style) {
     const { rows, bounds } = drawData;
-    const { __lineHeight, __baseLine, __letterSpacing, textAlign, verticalAlign, paraSpacing, textOverflow } = style;
+    const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing } = style;
     let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
     let starY = __baseLine;
-    if (textOverflow !== 'show' && realHeight > height) {
+    if (__clipText && realHeight > height) {
         realHeight = Math.max(height, __lineHeight);
         drawData.overflow = rows.length;
     }
@@ -2009,39 +2053,58 @@ function layoutText(drawData, style) {
             bounds.x = rowX;
         if (rowWidth > bounds.width)
             bounds.width = rowWidth;
+        if (__clipText && width && width < rowWidth) {
+            row.isOverflow = true;
+            if (!drawData.overflow)
+                drawData.overflow = rows.length;
+        }
     }
     bounds.y = y;
     bounds.height = realHeight;
 }
 
-function clipText(drawData, textOverflow) {
+function clipText(drawData, style) {
     const { rows, overflow } = drawData;
+    let { textOverflow } = style;
     rows.splice(overflow);
     if (textOverflow !== 'hide') {
         if (textOverflow === 'ellipsis')
             textOverflow = '...';
+        let char, charRight;
         const ellipsisWidth = Platform.canvas.measureText(textOverflow).width;
-        const row = rows[overflow - 1];
-        let char, end = row.data.length - 1, charRight;
-        const { x, width } = drawData.bounds;
-        const right = x + width - ellipsisWidth;
-        for (let i = end; i > -1; i--) {
-            char = row.data[i];
-            charRight = char.x + char.width;
-            if (i === end && charRight < right) {
-                break;
-            }
-            else if (charRight < right && char.char !== ' ') {
-                row.data.splice(i + 1);
-                row.width -= char.width;
-                break;
+        const right = style.x + style.width - ellipsisWidth;
+        const list = style.textWrap === 'none' ? rows : [rows[overflow - 1]];
+        list.forEach(row => {
+            if (row.isOverflow && row.data) {
+                let end = row.data.length - 1;
+                for (let i = end; i > -1; i--) {
+                    char = row.data[i];
+                    charRight = char.x + char.width;
+                    if (i === end && charRight < right) {
+                        break;
+                    }
+                    else if (charRight < right && char.char !== ' ') {
+                        row.data.splice(i + 1);
+                        row.width -= char.width;
+                        break;
+                    }
+                    row.width -= char.width;
+                }
+                row.width += ellipsisWidth;
+                row.data.push({ char: textOverflow, x: charRight });
+                if (row.textMode)
+                    toTextChar(row);
             }
-            row.width -= char.width;
-        }
-        row.width += ellipsisWidth;
-        row.data.push({ char: textOverflow, x: charRight });
+        });
     }
 }
+function toTextChar(row) {
+    row.text = '';
+    row.data.forEach(char => {
+        row.text += char.char;
+    });
+    row.data = null;
+}
 
 function decorationText(drawData, style) {
     const { fontSize } = style;
@@ -2062,7 +2125,7 @@ const TextConvert = {
         let x = 0, y = 0;
         let width = style.__getInput('width') || 0;
         let height = style.__getInput('height') || 0;
-        const { textDecoration, textOverflow, __font, padding } = style;
+        const { textDecoration, __font, padding } = style;
         if (padding) {
             const [top, right, bottom, left] = MathHelper.fourNumber(padding);
             if (width) {
@@ -2084,7 +2147,7 @@ const TextConvert = {
         layoutText(drawData, style);
         layoutChar(drawData, style, width);
         if (drawData.overflow)
-            clipText(drawData, textOverflow);
+            clipText(drawData, style);
         if (textDecoration !== 'none')
             decorationText(drawData, style);
         return drawData;