leafer-ui 1.0.0-rc.5 → 1.0.0-rc.7

package/dist/web.esm.js

@@ -1,7 +1,7 @@
-import { LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, BoundsHelper, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, Platform, AnimateEvent, ResizeEvent, Creator, LeaferCanvasBase, Cursor, canvasSizeAttrs, canvasPatch, InteractionHelper, MathHelper, InteractionBase, LeaferImage, FileHelper, MatrixHelper, ImageEvent, PointHelper, TaskProcessor } from '@leafer/core';
+import { LeafList, DataHelper, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, Platform, AnimateEvent, ResizeEvent, BoundsHelper, Creator, LeaferCanvasBase, Cursor, canvasSizeAttrs, canvasPatch, InteractionHelper, MathHelper, InteractionBase, LeaferImage, FileHelper, MatrixHelper, ImageEvent, PointHelper, TaskProcessor } from '@leafer/core';
 export * from '@leafer/core';
 export { LeaferImage } from '@leafer/core';
-import { ColorConvert as ColorConvert$1, ImageManager as ImageManager$1, Paint, Effect, TextConvert as TextConvert$1, Export as Export$1 } from '@leafer-ui/core';
+import { ColorConvert as ColorConvert$1, ImageManager as ImageManager$1, Paint, Effect, TextConvert as TextConvert$1, Export as Export$2 } from '@leafer-ui/core';
 export * from '@leafer-ui/core';
 
 class Watcher {
@@ -10,7 +10,7 @@ class Watcher {
         if (this.hasRemove) {
             const updatedList = new LeafList();
             this.__updatedList.list.forEach(item => { if (item.leafer)
-                updatedList.push(item); });
+                updatedList.add(item); });
             return updatedList;
         }
         else {
@@ -45,7 +45,7 @@ class Watcher {
             this.target.emit(RenderEvent.REQUEST);
     }
     __onAttrChange(event) {
-        this.__updatedList.push(event.target);
+        this.__updatedList.add(event.target);
         this.update();
     }
     __onChildEvent(event) {
@@ -55,12 +55,12 @@ class Watcher {
         }
         else {
             this.hasRemove = true;
-            this.__updatedList.push(event.parent);
+            this.__updatedList.add(event.parent);
         }
         this.update();
     }
     __pushChild(child) {
-        this.__updatedList.push(child);
+        this.__updatedList.add(child);
         if (child.isBranch)
             this.__loopChildren(child);
     }
@@ -99,7 +99,7 @@ class Watcher {
     }
 }
 
-const { updateAllWorldMatrix: updateAllWorldMatrix$1, updateAllWorldOpacity } = LeafHelper;
+const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
 const { pushAllChildBranch, pushAllParent } = BranchHelper;
 function updateMatrix(updateList, levelList) {
     let layout;
@@ -107,14 +107,14 @@ function updateMatrix(updateList, levelList) {
         layout = leaf.__layout;
         if (levelList.without(leaf) && !layout.proxyZoom) {
             if (layout.matrixChanged) {
-                updateAllWorldMatrix$1(leaf);
-                levelList.push(leaf);
+                updateAllMatrix$1(leaf, true);
+                levelList.add(leaf);
                 if (leaf.isBranch)
                     pushAllChildBranch(leaf, levelList);
                 pushAllParent(leaf, levelList);
             }
             else if (layout.boundsChanged) {
-                levelList.push(leaf);
+                levelList.add(leaf);
                 if (leaf.isBranch)
                     leaf.__tempNumber = 0;
                 pushAllParent(leaf, levelList);
@@ -123,20 +123,21 @@ function updateMatrix(updateList, levelList) {
     });
 }
 function updateBounds(boundsList) {
-    let itemList, branch;
+    let list, branch, children;
     boundsList.sort(true);
     boundsList.levels.forEach(level => {
-        itemList = boundsList.levelMap[level];
-        for (let i = 0, len = itemList.length; i < len; i++) {
-            branch = itemList[i];
+        list = boundsList.levelMap[level];
+        for (let i = 0, len = list.length; i < len; i++) {
+            branch = list[i];
             if (branch.isBranch && branch.__tempNumber) {
-                for (let j = 0, jLen = branch.children.length; j < jLen; j++) {
-                    if (!branch.children[j].isBranch) {
-                        branch.children[j].__updateWorldBounds();
+                children = branch.children;
+                for (let j = 0, jLen = children.length; j < jLen; j++) {
+                    if (!children[j].isBranch) {
+                        updateOneBounds(children[j]);
                     }
                 }
             }
-            branch.__updateWorldBounds();
+            updateOneBounds(branch);
         }
     });
 }
@@ -149,7 +150,7 @@ function updateChange(updateList) {
 }
 
 const { worldBounds } = LeafBoundsHelper;
-const { setByListWithHandle } = BoundsHelper;
+const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
 class LayoutBlockData {
     constructor(list) {
         this.updatedBounds = new Bounds();
@@ -160,14 +161,20 @@ class LayoutBlockData {
         this.updatedList = list;
     }
     setBefore() {
-        setByListWithHandle(this.beforeBounds, this.updatedList.list, worldBounds);
+        this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
     }
     setAfter() {
-        setByListWithHandle(this.afterBounds, this.updatedList.list, worldBounds);
-        this.updatedBounds.setByList([this.beforeBounds, this.afterBounds]);
+        const { list } = this.updatedList;
+        if (list.some(leaf => leaf.noBounds)) {
+            this.afterBounds.set(bigBounds);
+        }
+        else {
+            this.afterBounds.setListWithFn(list, worldBounds);
+        }
+        this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
     }
     merge(data) {
-        this.updatedList.pushList(data.updatedList.list);
+        this.updatedList.addList(data.updatedList.list);
         this.beforeBounds.add(data.beforeBounds);
         this.afterBounds.add(data.afterBounds);
         this.updatedBounds.add(data.updatedBounds);
@@ -177,8 +184,7 @@ class LayoutBlockData {
     }
 }
 
-const { updateAllWorldMatrix, updateAllChange } = LeafHelper;
-const { pushAllBranchStack, updateWorldBoundsByBranchStack } = BranchHelper;
+const { updateAllMatrix, updateAllChange } = LeafHelper;
 const debug$2 = Debug.get('Layouter');
 class Layouter {
     constructor(target, userConfig) {
@@ -255,12 +261,15 @@ class Layouter {
         const { target, __updatedList: updateList } = this;
         const { BEFORE, LAYOUT, AFTER } = LayoutEvent;
         const blocks = this.getBlocks(updateList);
-        blocks.forEach(item => { item.setBefore(); });
+        blocks.forEach(item => item.setBefore());
         target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times));
+        this.extraBlock = null;
         updateList.sort();
         updateMatrix(updateList, this.__levelList);
         updateBounds(this.__levelList);
         updateChange(updateList);
+        if (this.extraBlock)
+            blocks.push(this.extraBlock);
         blocks.forEach(item => item.setAfter());
         target.emitEvent(new LayoutEvent(LAYOUT, blocks, this.times));
         target.emitEvent(new LayoutEvent(AFTER, blocks, this.times));
@@ -283,17 +292,20 @@ class Layouter {
         Run.end(t);
     }
     static fullLayout(target) {
-        updateAllWorldMatrix(target);
+        updateAllMatrix(target, true);
         if (target.isBranch) {
-            const branchStack = [target];
-            pushAllBranchStack(target, branchStack);
-            updateWorldBoundsByBranchStack(branchStack);
+            BranchHelper.updateBounds(target);
         }
         else {
-            target.__updateWorldBounds();
+            LeafHelper.updateBounds(target);
         }
         updateAllChange(target);
     }
+    addExtra(leaf) {
+        const block = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
+        block.updatedList.add(leaf);
+        block.beforeBounds.add(leaf.__world);
+    }
     createBlock(data) {
         return new LayoutBlockData(data);
     }
@@ -321,8 +333,7 @@ class Layouter {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = null;
-            this.config = null;
+            this.target = this.config = null;
         }
     }
 }
@@ -433,7 +444,7 @@ class Renderer {
         const { canvas } = this;
         const bounds = block.getIntersect(canvas.bounds);
         const includes = block.includes(this.target.__world);
-        const realBounds = new Bounds().copy(bounds);
+        const realBounds = new Bounds(bounds);
         canvas.save();
         if (includes && !Debug.showRepaint) {
             canvas.clear();
@@ -483,7 +494,7 @@ class Renderer {
         const { updateBlocks: list } = this;
         if (list) {
             const bounds = new Bounds();
-            bounds.setByList(list);
+            bounds.setList(list);
             list.length = 0;
             list.push(bounds);
         }
@@ -523,7 +534,7 @@ class Renderer {
                         empty = (!leaf.__world.width || !leaf.__world.height);
                         if (empty) {
                             if (!leaf.isLeafer)
-                                debug$1.warn(leaf.innerName, ': empty');
+                                debug$1.tip(leaf.innerName, ': empty');
                             empty = (!leaf.isBranch || leaf.isBranchLeaf);
                         }
                         return empty;
@@ -557,8 +568,16 @@ class Renderer {
     }
 }
 
+var AnswerType;
+(function (AnswerType) {
+    AnswerType[AnswerType["No"] = 0] = "No";
+    AnswerType[AnswerType["Yes"] = 1] = "Yes";
+    AnswerType[AnswerType["NoAndSkip"] = 2] = "NoAndSkip";
+    AnswerType[AnswerType["YesAndSkip"] = 3] = "YesAndSkip";
+})(AnswerType || (AnswerType = {}));
+
 const { hitRadiusPoint } = BoundsHelper;
-class FindPath {
+class Pather {
     constructor(target, selector) {
         this.target = target;
         this.selector = selector;
@@ -601,10 +620,10 @@ class FindPath {
     getPath(leaf) {
         const path = new LeafList();
         while (leaf) {
-            path.push(leaf);
+            path.add(leaf);
             leaf = leaf.parent;
         }
-        path.push(this.target);
+        path.add(this.target);
         return path;
     }
     getHitablePath(leaf) {
@@ -614,7 +633,7 @@ class FindPath {
             item = path.list[i];
             if (!item.__.hittable)
                 break;
-            hittablePath.unshift(item);
+            hittablePath.addAt(item, 0);
             if (!item.__.hitChildren)
                 break;
         }
@@ -633,7 +652,7 @@ class FindPath {
                 leaf = path.list[j];
                 if (nextPath && nextPath.has(leaf))
                     break;
-                throughPath.push(leaf);
+                throughPath.add(leaf);
             }
         }
         return throughPath;
@@ -675,120 +694,113 @@ class FindPath {
     }
 }
 
+const { Yes, NoAndSkip, YesAndSkip } = AnswerType;
 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, 1) : 0,
+            innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.innerIdMap[innerId] = leaf, 1) : 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();
     }
+    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);
+        }
+    }
     getByPoint(hitPoint, hitRadius, options) {
         if (Platform.name === 'node')
             this.target.emit(LayoutEvent.CHECK_UPDATE);
-        return this.findPath.getByPoint(hitPoint, hitRadius, options);
+        return this.pather.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);
-        }
-    }
-    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, result;
         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];
+            result = method(child, options);
+            if (result === Yes || result === YesAndSkip) {
+                if (list) {
+                    list.push(child);
+                }
+                else {
+                    this.findLeaf = child;
+                    return;
+                }
+            }
+            if (child.isBranch && result < NoAndSkip)
+                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() {
@@ -798,11 +810,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 = {};
         }
     }
 }
@@ -1024,7 +1035,7 @@ const WheelEventHelper = {
         let { zoomMode, zoomSpeed } = config;
         const delta = e.deltaY || e.deltaX;
         if (zoomMode) {
-            zoom = !e.deltaX && (Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta);
+            zoom = (zoomMode === 'mouse') ? true : (!e.deltaX && (Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta));
             if (e.shiftKey || e.metaKey || e.ctrlKey)
                 zoom = true;
         }
@@ -1335,8 +1346,8 @@ function useCanvas(_canvasType, _power) {
                 img.crossOrigin = 'anonymous';
                 img.onload = () => { resolve(img); };
                 img.onerror = (e) => { reject(e); };
-                if (!src.startsWith('data:') && Platform.imageSuffix)
-                    src += (src.includes("?") ? "&" : "?") + Platform.imageSuffix;
+                if (!src.startsWith('data:') && Platform.image.suffix)
+                    src += (src.includes("?") ? "&" : "?") + Platform.image.suffix;
                 img.src = src;
             });
         }
@@ -1352,8 +1363,7 @@ function useCanvas(_canvasType, _power) {
 Platform.name = 'web';
 Platform.isMobile = 'ontouchstart' in window;
 Platform.requestRender = function (render) { window.requestAnimationFrame(render); };
-Platform.devicePixelRatio = devicePixelRatio;
-Platform.realtimeLayout = true;
+Platform.devicePixelRatio = Math.max(1, devicePixelRatio);
 const { userAgent } = navigator;
 if (userAgent.indexOf("Firefox") > -1) {
     Platform.conicGradientRotate90 = true;
@@ -1374,7 +1384,7 @@ else if (userAgent.indexOf('Linux') > -1) {
     Platform.os = 'Linux';
 }
 
-const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper$1, rotate } = MatrixHelper;
+const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper, rotate } = MatrixHelper;
 function fillOrFitMode(data, mode, box, width, height, rotation) {
     const transform = get$4();
     const swap = rotation && rotation !== 180;
@@ -1384,7 +1394,7 @@ function fillOrFitMode(data, mode, box, width, height, rotation) {
     const x = box.x + (box.width - width * scale) / 2;
     const y = box.y + (box.height - height * scale) / 2;
     translate$1(transform, x, y);
-    scaleHelper$1(transform, scale);
+    scaleHelper(transform, scale);
     if (rotation)
         rotateOfOuter$2(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
     data.scaleX = data.scaleY = scale;
@@ -1396,7 +1406,7 @@ function clipMode(data, box, offset, scale, rotation) {
     if (offset)
         translate$1(transform, offset.x, offset.y);
     if (scale) {
-        typeof scale === 'number' ? scaleHelper$1(transform, scale) : scaleHelper$1(transform, scale.x, scale.y);
+        typeof scale === 'number' ? scaleHelper(transform, scale) : scaleHelper(transform, scale.x, scale.y);
         data.scaleX = transform.a;
         data.scaleY = transform.d;
     }
@@ -1509,6 +1519,10 @@ function hasNaturalSize(ui, attrName, image) {
         d.__naturalWidth = image.width;
         d.__naturalHeight = image.height;
         if (!d.__getInput('width') || !d.__getInput('height')) {
+            if (ui.__proxyData) {
+                ui.setProxyAttr('width', ui.__.width);
+                ui.setProxyAttr('height', ui.__.height);
+            }
             ui.forceUpdate('width');
             return false;
         }
@@ -1552,22 +1566,21 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const { get: get$2, scale: scaleHelper, copy: copy$1 } = MatrixHelper;
+const Export$1 = {};
+
+const { get: get$2, scale, copy: copy$1 } = MatrixHelper;
 function createPattern(ui, paint, pixelRatio) {
     let { scaleX, scaleY } = ui.__world;
     const id = scaleX + '-' + scaleY;
     if (paint.patternId !== id && !ui.destroyed) {
-        paint.patternId = id;
         scaleX = Math.abs(scaleX);
         scaleY = Math.abs(scaleY);
         const { image, data } = paint;
-        const maxWidth = image.isSVG ? 4096 : Math.min(image.width, 4096);
-        const maxHeight = image.isSVG ? 4096 : Math.min(image.height, 4096);
-        let scale, matrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data;
+        let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data;
         if (sx) {
-            matrix = get$2();
-            copy$1(matrix, transform);
-            scaleHelper(matrix, 1 / sx, 1 / sy);
+            imageMatrix = get$2();
+            copy$1(imageMatrix, transform);
+            scale(imageMatrix, 1 / sx, 1 / sy);
             scaleX *= sx;
             scaleY *= sy;
         }
@@ -1575,38 +1588,49 @@ function createPattern(ui, paint, pixelRatio) {
         scaleY *= pixelRatio;
         width *= scaleX;
         height *= scaleY;
-        if (width > maxWidth || height > maxHeight) {
-            scale = Math.max(width / maxWidth, height / maxHeight);
+        const size = width * height;
+        if (paint.data.mode !== 'repeat') {
+            if (size > Platform.image.maxCacheSize)
+                return false;
+        }
+        let maxSize = Platform.image.maxPatternSize;
+        if (!image.isSVG) {
+            const imageSize = image.width * image.height;
+            if (maxSize > imageSize)
+                maxSize = imageSize;
         }
-        if (scale) {
-            scaleX /= scale;
-            scaleY /= scale;
-            width /= scale;
-            height /= scale;
+        if (size > maxSize)
+            imageScale = Math.sqrt(size / maxSize);
+        if (imageScale) {
+            scaleX /= imageScale;
+            scaleY /= imageScale;
+            width /= imageScale;
+            height /= imageScale;
         }
         if (sx) {
             scaleX /= sx;
             scaleY /= sy;
         }
         if (transform || scaleX !== 1 || scaleY !== 1) {
-            if (!matrix) {
-                matrix = get$2();
+            if (!imageMatrix) {
+                imageMatrix = get$2();
                 if (transform)
-                    copy$1(matrix, transform);
+                    copy$1(imageMatrix, transform);
             }
-            scaleHelper(matrix, 1 / scaleX, 1 / scaleY);
+            scale(imageMatrix, 1 / scaleX, 1 / scaleY);
         }
-        const style = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity), mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'));
+        const pattern = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity), mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'));
         try {
             if (paint.transform)
                 paint.transform = null;
-            if (matrix)
-                style.setTransform ? style.setTransform(matrix) : paint.transform = matrix;
+            if (imageMatrix)
+                pattern.setTransform ? pattern.setTransform(imageMatrix) : paint.transform = imageMatrix;
         }
         catch (_a) {
-            paint.transform = matrix;
+            paint.transform = imageMatrix;
         }
-        paint.style = style;
+        paint.style = pattern;
+        paint.patternId = id;
         return true;
     }
     else {
@@ -1614,18 +1638,24 @@ function createPattern(ui, paint, pixelRatio) {
     }
 }
 
+const { abs } = Math;
 function checkImage(ui, canvas, paint, allowPaint) {
     const { scaleX, scaleY } = ui.__world;
     if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
         return false;
     }
     else {
+        const { data } = paint;
         if (allowPaint) {
-            if (paint.image.isSVG && paint.data.mode !== 'repeat') {
-                let { width, height } = paint.data;
-                width *= scaleX * canvas.pixelRatio;
-                height *= scaleY * canvas.pixelRatio;
-                allowPaint = width > 4096 || height > 4096;
+            if (data.mode !== 'repeat') {
+                let { width, height } = data;
+                width *= abs(scaleX) * canvas.pixelRatio;
+                height *= abs(scaleY) * canvas.pixelRatio;
+                if (data.scaleX) {
+                    width *= data.scaleX;
+                    height *= data.scaleY;
+                }
+                allowPaint = width * height > Platform.image.maxCacheSize;
             }
             else {
                 allowPaint = false;
@@ -1634,7 +1664,6 @@ function checkImage(ui, canvas, paint, allowPaint) {
         if (allowPaint) {
             canvas.save();
             canvas.clip();
-            const { data } = paint;
             if (paint.blendMode)
                 canvas.blendMode = paint.blendMode;
             if (data.opacity)
@@ -1646,15 +1675,16 @@ function checkImage(ui, canvas, paint, allowPaint) {
             return true;
         }
         else {
-            if (!paint.style) {
+            if (!paint.style || Export$1.running) {
                 createPattern(ui, paint, canvas.pixelRatio);
             }
             else {
                 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');
+                        if (canvas.bounds.hit(ui.__world))
+                            createPattern(ui, paint, canvas.pixelRatio);
+                        ui.forceUpdate('surface');
                     }), 300);
                 }
             }
@@ -1664,7 +1694,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
 }
 
 function recycleImage(attrName, data) {
-    const paints = (attrName === 'fill' ? data._fill : data._stroke);
+    const paints = data['_' + attrName];
     if (paints instanceof Array) {
         let image, recycleMap, input, url;
         for (let i = 0, len = paints.length; i < len; i++) {
@@ -1768,7 +1798,7 @@ function drawAlignStroke(align, stroke, isStrokes, ui, canvas, renderOptions) {
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
     fillText(ui, out);
     out.blendMode = 'normal';
-    if (ui.__hasMirror || renderOptions.matrix) {
+    if (ui.__worldFlipped || renderOptions.matrix) {
         canvas.copyWorldByReset(out);
     }
     else {
@@ -1841,7 +1871,7 @@ function stroke(stroke, ui, canvas, renderOptions) {
                 out.stroke();
                 options.windingRule ? out.clip(options.windingRule) : out.clip();
                 out.clearWorld(ui.__layout.renderBounds);
-                if (ui.__hasMirror || renderOptions.matrix) {
+                if (ui.__worldFlipped || renderOptions.matrix) {
                     canvas.copyWorldByReset(out);
                 }
                 else {
@@ -1881,7 +1911,7 @@ function strokes(strokes, ui, canvas, renderOptions) {
                 drawStrokesStyle(strokes, false, ui, out);
                 options.windingRule ? out.clip(options.windingRule) : out.clip();
                 out.clearWorld(renderBounds);
-                if (ui.__hasMirror || renderOptions.matrix) {
+                if (ui.__worldFlipped || renderOptions.matrix) {
                     canvas.copyWorldByReset(out);
                 }
                 else {
@@ -2105,7 +2135,7 @@ function shadow(ui, current, shape, renderOptions) {
             }
             worldCanvas ? other.copyWorld(worldCanvas, __world, __world, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
         }
-        if (ui.__hasMirror || renderOptions.matrix) {
+        if (ui.__worldFlipped || renderOptions.matrix) {
             current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
         }
         else {
@@ -2169,7 +2199,7 @@ function innerShadow(ui, current, shape, renderOptions) {
             copyBounds = bounds;
         }
         other.fillWorld(copyBounds, item.color, 'source-in');
-        if (ui.__hasMirror || renderOptions.matrix) {
+        if (ui.__worldFlipped || renderOptions.matrix) {
             current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
         }
         else {
@@ -2318,6 +2348,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;
@@ -2344,16 +2376,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) ;
@@ -2423,7 +2462,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;
@@ -2432,15 +2471,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;
@@ -2466,6 +2502,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;
@@ -2486,10 +2530,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;
     }
@@ -2538,39 +2582,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;
@@ -2591,7 +2654,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) {
@@ -2613,7 +2676,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;
@@ -2634,6 +2697,7 @@ const ColorConvert = {
 
 const Export = {
     export(leaf, filename, options) {
+        Export.running = true;
         return addTask((success) => new Promise((resolve) => {
             const { leafer } = leaf;
             if (leafer) {
@@ -2671,6 +2735,7 @@ const Export = {
                     }
                     success({ data });
                     resolve();
+                    Export.running = false;
                     if (unreal)
                         canvas.recycle();
                 }));
@@ -2678,6 +2743,7 @@ const Export = {
             else {
                 success({ data: false });
                 resolve();
+                Export.running = false;
             }
         }));
     }
@@ -2695,7 +2761,7 @@ Object.assign(Paint, UIPaint);
 Object.assign(Effect, UIEffect);
 Object.assign(TextConvert$1, TextConvert);
 Object.assign(ColorConvert$1, ColorConvert);
-Object.assign(Export$1, Export);
+Object.assign(Export$2, Export);
 
 useCanvas();