leafer-draw 1.0.0-rc.9 → 1.0.0

package/dist/web.esm.js

@@ -1,21 +1,41 @@
-import { Debug, LeaferCanvasBase, Platform, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, Creator, LeaferImage, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, LeafLevelList, LayoutEvent, Run, ImageManager, AnimateEvent, BoundsHelper, MatrixHelper, ImageEvent, PointHelper, Direction4, TwoPointBoundsHelper, TaskProcessor, Matrix } from '@leafer/core';
+import { Debug, LeaferCanvasBase, Platform, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, Creator, LeaferImage, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, LeafLevelList, LayoutEvent, Run, ImageManager, AnimateEvent, BoundsHelper, MatrixHelper, AlignHelper, ImageEvent, AroundHelper, PointHelper, Direction4, TwoPointBoundsHelper, TaskProcessor, Matrix } from '@leafer/core';
 export * from '@leafer/core';
 export { LeaferImage } from '@leafer/core';
-import { ColorConvert, Export, Group, TextConvert, Paint, PaintImage as PaintImage$1, PaintGradient as PaintGradient$1, Effect } from '@leafer-ui/draw';
+import { PaintImage, ColorConvert, PaintGradient, Export, Group, TextConvert, Paint, Effect } from '@leafer-ui/draw';
 export * from '@leafer-ui/draw';
 
-const debug$2 = Debug.get('LeaferCanvas');
+const debug$3 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
+    set zIndex(zIndex) {
+        const { style } = this.view;
+        style.zIndex = zIndex;
+        this.setAbsolute(this.view);
+    }
+    set childIndex(index) {
+        const { view, parentView } = this;
+        if (view && parentView) {
+            const beforeNode = parentView.children[index];
+            if (beforeNode) {
+                this.setAbsolute(beforeNode);
+                parentView.insertBefore(view, beforeNode);
+            }
+            else {
+                parentView.appendChild(beforeNode);
+            }
+        }
+    }
     init() {
         const { view } = this.config;
         view ? this.__createViewFrom(view) : this.__createView();
         const { style } = this.view;
         style.display || (style.display = 'block');
         this.parentView = this.view.parentElement;
-        if (this.parentView)
-            this.parentView.style.userSelect = 'none';
+        if (this.parentView) {
+            const pStyle = this.parentView.style;
+            pStyle.webkitUserSelect = pStyle.userSelect = 'none';
+        }
         if (Platform.syncDomFont && !this.parentView) {
-            this.view.style.display = 'none';
+            style.display = 'none';
             document.body.appendChild(this.view);
         }
         this.__createContext();
@@ -48,19 +68,22 @@ class LeaferCanvas extends LeaferCanvasBase {
                 this.__createView();
                 const view = this.view;
                 if (parent.hasChildNodes()) {
-                    const { style } = view;
-                    style.position = 'absolute';
-                    style.top = style.left = '0px';
+                    this.setAbsolute(view);
                     parent.style.position || (parent.style.position = 'relative');
                 }
                 parent.appendChild(view);
             }
         }
         else {
-            debug$2.error(`no id: ${inputView}`);
+            debug$3.error(`no id: ${inputView}`);
             this.__createView();
         }
     }
+    setAbsolute(view) {
+        const { style } = view;
+        style.position = 'absolute';
+        style.top = style.left = '0px';
+    }
     updateViewSize() {
         const { width, height, pixelRatio } = this;
         const { style } = this.view;
@@ -86,6 +109,10 @@ class LeaferCanvas extends LeaferCanvasBase {
                 this.resizeObserver.observe(parent);
                 this.checkAutoBounds(parent.getBoundingClientRect());
             }
+            else {
+                this.checkAutoBounds(this.view);
+                debug$3.warn('no parent');
+            }
         }
         catch (_a) {
             this.imitateResizeObserver();
@@ -163,9 +190,13 @@ function useCanvas(_canvasType, _power) {
         canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
         canvasToBolb: (canvas, type, quality) => new Promise((resolve) => canvas.toBlob(resolve, mineType(type), quality)),
         canvasSaveAs: (canvas, filename, quality) => {
+            const url = canvas.toDataURL(mineType(fileType(filename)), quality);
+            return Platform.origin.download(url, filename);
+        },
+        download(url, filename) {
             return new Promise((resolve) => {
                 let el = document.createElement('a');
-                el.href = canvas.toDataURL(mineType(fileType(filename)), quality);
+                el.href = url;
                 el.download = filename;
                 document.body.appendChild(el);
                 el.click();
@@ -176,16 +207,14 @@ function useCanvas(_canvasType, _power) {
         loadImage(src) {
             return new Promise((resolve, reject) => {
                 const img = new Image();
-                const { suffix, crossOrigin } = Platform.image;
+                const { crossOrigin } = Platform.image;
                 if (crossOrigin) {
                     img.setAttribute('crossOrigin', crossOrigin);
                     img.crossOrigin = crossOrigin;
                 }
                 img.onload = () => { resolve(img); };
                 img.onerror = (e) => { reject(e); };
-                if (!src.startsWith('data:') && !src.startsWith('blob:') && suffix)
-                    src += (src.includes("?") ? "&" : "?") + suffix;
-                img.src = src;
+                img.src = Platform.image.getRealURL(src);
             });
         }
     };
@@ -402,7 +431,7 @@ class LayoutBlockData {
 }
 
 const { updateAllMatrix, updateAllChange } = LeafHelper;
-const debug$1 = Debug.get('Layouter');
+const debug$2 = Debug.get('Layouter');
 class Layouter {
     constructor(target, userConfig) {
         this.totalTimes = 0;
@@ -437,7 +466,7 @@ class Layouter {
             target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
         }
         catch (e) {
-            debug$1.error(e);
+            debug$2.error(e);
         }
         this.layoutedBlocks = null;
     }
@@ -451,9 +480,9 @@ class Layouter {
     }
     layoutOnce() {
         if (this.layouting)
-            return debug$1.warn('layouting');
+            return debug$2.warn('layouting');
         if (this.times > 3)
-            return debug$1.warn('layout max times');
+            return debug$2.warn('layout max times');
         this.times++;
         this.totalTimes++;
         this.layouting = true;
@@ -519,9 +548,11 @@ class Layouter {
         updateAllChange(target);
     }
     addExtra(leaf) {
-        const block = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
-        block.updatedList.add(leaf);
-        block.beforeBounds.add(leaf.__world);
+        if (!this.__updatedList.has(leaf)) {
+            const { updatedList, beforeBounds } = this.extraBlock || (this.extraBlock = new LayoutBlockData([]));
+            updatedList.length ? beforeBounds.add(leaf.__world) : beforeBounds.set(leaf.__world);
+            updatedList.add(leaf);
+        }
     }
     createBlock(data) {
         return new LayoutBlockData(data);
@@ -555,7 +586,7 @@ class Layouter {
     }
 }
 
-const debug = Debug.get('Renderer');
+const debug$1 = Debug.get('Renderer');
 class Renderer {
     get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
     constructor(target, canvas, userConfig) {
@@ -593,7 +624,7 @@ class Renderer {
         const { target } = this;
         this.times = 0;
         this.totalBounds = new Bounds();
-        debug.log(target.innerName, '--->');
+        debug$1.log(target.innerName, '--->');
         try {
             this.emitRender(RenderEvent.START);
             this.renderOnce(callback);
@@ -602,9 +633,9 @@ class Renderer {
         }
         catch (e) {
             this.rendering = false;
-            debug.error(e);
+            debug$1.error(e);
         }
-        debug.log('-------------|');
+        debug$1.log('-------------|');
     }
     renderAgain() {
         if (this.rendering) {
@@ -616,9 +647,9 @@ class Renderer {
     }
     renderOnce(callback) {
         if (this.rendering)
-            return debug.warn('rendering');
+            return debug$1.warn('rendering');
         if (this.times > 3)
-            return debug.warn('render max times');
+            return debug$1.warn('render max times');
         this.times++;
         this.totalTimes++;
         this.rendering = true;
@@ -631,6 +662,10 @@ class Renderer {
         }
         else {
             this.requestLayout();
+            if (this.ignore) {
+                this.ignore = this.rendering = false;
+                return;
+            }
             this.emitRender(RenderEvent.BEFORE);
             if (this.config.usePartRender && this.totalTimes > 1) {
                 this.partRender();
@@ -651,7 +686,7 @@ class Renderer {
     partRender() {
         const { canvas, updateBlocks: list } = this;
         if (!list)
-            return debug.warn('PartRender: need update attr');
+            return debug$1.warn('PartRender: need update attr');
         this.mergeBlocks();
         list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
             this.clipRender(block); });
@@ -667,7 +702,7 @@ class Renderer {
             canvas.clear();
         }
         else {
-            bounds.spread(1 + 1 / this.canvas.pixelRatio).ceil();
+            bounds.spread(10 + 1 / this.canvas.pixelRatio).ceil();
             canvas.clearWorld(bounds, true);
             canvas.clipWorld(bounds, true);
         }
@@ -739,8 +774,11 @@ class Renderer {
             if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {
                 this.addBlock(this.canvas.bounds);
                 this.target.forceUpdate('surface');
+                return;
             }
         }
+        this.addBlock(new Bounds(0, 0, 1, 1));
+        this.changed = true;
     }
     __onLayoutEnd(event) {
         if (event.data)
@@ -751,7 +789,7 @@ class Renderer {
                         empty = (!leaf.__world.width || !leaf.__world.height);
                         if (empty) {
                             if (!leaf.isLeafer)
-                                debug.tip(leaf.innerName, ': empty');
+                                debug$1.tip(leaf.innerName, ': empty');
                             empty = (!leaf.isBranch || leaf.isBranchLeaf);
                         }
                         return empty;
@@ -778,9 +816,7 @@ class Renderer {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = null;
-            this.canvas = null;
-            this.config = null;
+            this.target = this.canvas = this.config = null;
         }
     }
 }
@@ -794,9 +830,6 @@ Object.assign(Creator, {
 });
 Platform.layout = Layouter.fullLayout;
 
-const PaintImage = {};
-const PaintGradient = {};
-
 function fillText(ui, canvas) {
     let row;
     const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
@@ -1016,7 +1049,7 @@ function shape(ui, current, options) {
     }
     else {
         const { renderShapeSpread: spread } = ui.__layout;
-        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX, spread * scaleY) : current.bounds, nowWorld);
+        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, scaleX === scaleY ? spread * scaleX : [spread * scaleY, spread * scaleX]) : current.bounds, nowWorld);
         fitMatrix = current.bounds.getFitMatrix(worldClipBounds);
         let { a: fitScaleX, d: fitScaleY } = fitMatrix;
         if (fitMatrix.a < 1) {
@@ -1081,7 +1114,7 @@ function getLeafPaint(attrName, paint, ui) {
         case 'angular':
             return PaintGradient.conicGradient(paint, boxBounds);
         default:
-            return paint.r ? { type: 'solid', style: ColorConvert.string(paint) } : undefined;
+            return paint.r !== undefined ? { type: 'solid', style: ColorConvert.string(paint) } : undefined;
     }
 }
 
@@ -1098,77 +1131,80 @@ const PaintModule = {
 };
 
 let origin = {};
-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;
-    const sw = box.width / (swap ? height : width);
-    const sh = box.height / (swap ? width : height);
-    const scale = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
-    const x = box.x + (box.width - width * scale) / 2;
-    const y = box.y + (box.height - height * scale) / 2;
-    translate$1(transform, x, y);
-    scaleHelper(transform, scale);
+const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate } = MatrixHelper;
+function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
+    const transform = get$3();
+    translate$1(transform, box.x + x, box.y + y);
+    scaleHelper(transform, scaleX, scaleY);
     if (rotation)
-        rotateOfOuter$2(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
-    data.scaleX = data.scaleY = scale;
+        rotateOfOuter$1(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
     data.transform = transform;
 }
 function clipMode(data, box, x, y, scaleX, scaleY, rotation) {
-    const transform = get$4();
-    translate$1(transform, box.x, box.y);
-    if (x || y)
-        translate$1(transform, x, y);
-    if (scaleX) {
+    const transform = get$3();
+    translate$1(transform, box.x + x, box.y + y);
+    if (scaleX)
         scaleHelper(transform, scaleX, scaleY);
-        data.scaleX = transform.a;
-        data.scaleY = transform.d;
-    }
     if (rotation)
         rotate(transform, rotation);
     data.transform = transform;
 }
-function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation) {
-    const transform = get$4();
+function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
+    const transform = get$3();
     if (rotation) {
-        rotate(transform, rotation);
-        switch (rotation) {
-            case 90:
-                translate$1(transform, height, 0);
-                break;
-            case 180:
-                translate$1(transform, width, height);
-                break;
-            case 270:
-                translate$1(transform, 0, width);
-                break;
+        if (align === 'center') {
+            rotateOfOuter$1(transform, { x: width / 2, y: height / 2 }, rotation);
+        }
+        else {
+            rotate(transform, rotation);
+            switch (rotation) {
+                case 90:
+                    translate$1(transform, height, 0);
+                    break;
+                case 180:
+                    translate$1(transform, width, height);
+                    break;
+                case 270:
+                    translate$1(transform, 0, width);
+                    break;
+            }
         }
     }
-    origin.x = box.x;
-    origin.y = box.y;
-    if (x || y)
-        origin.x += x, origin.y += y;
+    origin.x = box.x + x;
+    origin.y = box.y + y;
     translate$1(transform, origin.x, origin.y);
-    if (scaleX) {
-        scaleOfOuter$2(transform, origin, scaleX, scaleY);
-        data.scaleX = scaleX;
-        data.scaleY = scaleY;
-    }
+    if (scaleX)
+        scaleOfOuter$1(transform, origin, scaleX, scaleY);
     data.transform = transform;
 }
 
-const { get: get$3, translate } = MatrixHelper;
+const { get: get$2, translate } = MatrixHelper;
+const tempBox = new Bounds();
+const tempPoint = {};
 function createData(leafPaint, image, paint, box) {
-    let { width, height } = image;
-    const { opacity, mode, offset, scale, size, rotation, blendMode, repeat } = paint;
-    const sameBox = box.width === width && box.height === height;
+    const { blendMode } = paint;
     if (blendMode)
         leafPaint.blendMode = blendMode;
-    const data = leafPaint.data = { mode };
-    let x, y, scaleX, scaleY;
-    if (offset)
-        x = offset.x, y = offset.y;
-    if (size) {
+    leafPaint.data = getPatternData(paint, box, image);
+}
+function getPatternData(paint, box, image) {
+    let { width, height } = image;
+    if (paint.padding)
+        box = tempBox.set(box).shrink(paint.padding);
+    const { opacity, mode, align, offset, scale, size, rotation, repeat } = paint;
+    const sameBox = box.width === width && box.height === height;
+    const data = { mode };
+    const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
+    const swapWidth = swapSize ? height : width, swapHeight = swapSize ? width : height;
+    let x = 0, y = 0, scaleX, scaleY;
+    if (!mode || mode === 'cover' || mode === 'fit') {
+        if (!sameBox || rotation) {
+            const sw = box.width / swapWidth, sh = box.height / swapHeight;
+            scaleX = scaleY = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
+            x += (box.width - width * scaleX) / 2, y += (box.height - height * scaleY) / 2;
+        }
+    }
+    else if (size) {
         scaleX = (typeof size === 'number' ? size : size.width) / width;
         scaleY = (typeof size === 'number' ? size : size.height) / height;
     }
@@ -1176,30 +1212,46 @@ function createData(leafPaint, image, paint, box) {
         scaleX = typeof scale === 'number' ? scale : scale.x;
         scaleY = typeof scale === 'number' ? scale : scale.y;
     }
+    if (align) {
+        const imageBounds = { x, y, width: swapWidth, height: swapHeight };
+        if (scaleX)
+            imageBounds.width *= scaleX, imageBounds.height *= scaleY;
+        AlignHelper.toPoint(align, imageBounds, box, tempPoint, true);
+        x += tempPoint.x, y += tempPoint.y;
+    }
+    if (offset)
+        x += offset.x, y += offset.y;
     switch (mode) {
         case 'strench':
             if (!sameBox)
                 width = box.width, height = box.height;
-            if (box.x || box.y) {
-                data.transform = get$3();
-                translate(data.transform, box.x, box.y);
-            }
             break;
+        case 'normal':
         case 'clip':
-            if (offset || scaleX || rotation)
+            if (x || y || scaleX || rotation)
                 clipMode(data, box, x, y, scaleX, scaleY, rotation);
             break;
         case 'repeat':
             if (!sameBox || scaleX || rotation)
-                repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation);
+                repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align);
             if (!repeat)
                 data.repeat = 'repeat';
             break;
         case 'fit':
         case 'cover':
         default:
-            if (!sameBox || rotation)
-                fillOrFitMode(data, mode, box, width, height, rotation);
+            if (scaleX)
+                fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation);
+    }
+    if (!data.transform) {
+        if (box.x || box.y) {
+            data.transform = get$2();
+            translate(data.transform, box.x, box.y);
+        }
+    }
+    if (scaleX && mode !== 'strench') {
+        data.scaleX = scaleX;
+        data.scaleY = scaleY;
     }
     data.width = width;
     data.height = height;
@@ -1207,6 +1259,7 @@ function createData(leafPaint, image, paint, box) {
         data.opacity = opacity;
     if (repeat)
         data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat';
+    return data;
 }
 
 let cache, box = new Bounds();
@@ -1218,8 +1271,7 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
         leafPaint = cache.leafPaint;
     }
     else {
-        leafPaint = { type: paint.type };
-        leafPaint.image = image;
+        leafPaint = { type: paint.type, image };
         cache = image.use > 1 ? { leafPaint, paint, boxBounds: box.set(boxBounds) } : null;
     }
     if (firstUse || image.loading)
@@ -1236,16 +1288,22 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             onLoadError(ui, event, image.error);
     }
     else {
+        ignoreRender(ui, true);
         if (firstUse)
             onLoad(ui, event);
         leafPaint.loadId = image.load(() => {
+            ignoreRender(ui, false);
             if (!ui.destroyed) {
-                if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds))
+                if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
+                    if (image.hasOpacityPixel)
+                        ui.__layout.hitCanvasChanged = true;
                     ui.forceUpdate('surface');
+                }
                 onLoadSuccess(ui, event);
             }
             leafPaint.loadId = null;
         }, (error) => {
+            ignoreRender(ui, false);
             onLoadError(ui, event, error);
             leafPaint.loadId = null;
         });
@@ -1255,9 +1313,9 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
 function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
     if (attrName === 'fill' && !ui.__.__naturalWidth) {
         const data = ui.__;
-        data.__naturalWidth = image.width;
-        data.__naturalHeight = image.height;
-        if (data.__autoWidth || data.__autoHeight) {
+        data.__naturalWidth = image.width / data.pixelRatio;
+        data.__naturalHeight = image.height / data.pixelRatio;
+        if (data.__autoSide) {
             ui.forceUpdate('width');
             if (ui.__proxyData) {
                 ui.setProxyAttr('width', data.width);
@@ -1285,11 +1343,16 @@ function emit(ui, type, data) {
     if (ui.hasEvent(type))
         ui.emitEvent(new ImageEvent(type, data));
 }
+function ignoreRender(ui, value) {
+    const { leafer } = ui;
+    if (leafer && leafer.viewReady)
+        leafer.renderer.ignore = value;
+}
 
-const { get: get$2, scale, copy: copy$1 } = MatrixHelper;
-const { round, abs: abs$1 } = Math;
+const { get: get$1, scale, copy: copy$1 } = MatrixHelper;
+const { ceil, abs: abs$1 } = Math;
 function createPattern(ui, paint, pixelRatio) {
-    let { scaleX, scaleY } = ui.__world;
+    let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
     const id = scaleX + '-' + scaleY;
     if (paint.patternId !== id && !ui.destroyed) {
         scaleX = abs$1(scaleX);
@@ -1297,7 +1360,7 @@ function createPattern(ui, paint, pixelRatio) {
         const { image, data } = paint;
         let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, repeat } = data;
         if (sx) {
-            imageMatrix = get$2();
+            imageMatrix = get$1();
             copy$1(imageMatrix, transform);
             scale(imageMatrix, 1 / sx, 1 / sy);
             scaleX *= sx;
@@ -1332,13 +1395,13 @@ function createPattern(ui, paint, pixelRatio) {
         }
         if (transform || scaleX !== 1 || scaleY !== 1) {
             if (!imageMatrix) {
-                imageMatrix = get$2();
+                imageMatrix = get$1();
                 if (transform)
                     copy$1(imageMatrix, transform);
             }
             scale(imageMatrix, 1 / scaleX, 1 / scaleY);
         }
-        const canvas = image.getCanvas(width < 1 ? 1 : round(width), height < 1 ? 1 : round(height), opacity);
+        const canvas = image.getCanvas(ceil(width) || 1, ceil(height) || 1, opacity);
         const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint);
         paint.style = pattern;
         paint.patternId = id;
@@ -1383,7 +1446,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 const { abs } = Math;
 function checkImage(ui, canvas, paint, allowPaint) {
-    const { scaleX, scaleY } = ui.__world;
+    const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
     if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
         return false;
     }
@@ -1398,7 +1461,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
                     width *= data.scaleX;
                     height *= data.scaleY;
                 }
-                allowPaint = width * height > Platform.image.maxCacheSize;
+                allowPaint = (width * height > Platform.image.maxCacheSize) || Export.running;
             }
             else {
                 allowPaint = false;
@@ -1425,7 +1488,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
                 if (!paint.patternTask) {
                     paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
                         paint.patternTask = null;
-                        if (canvas.bounds.hit(ui.__world))
+                        if (canvas.bounds.hit(ui.__nowWorld))
                             createPattern(ui, paint, canvas.pixelRatio);
                         ui.forceUpdate('surface');
                     }), 300);
@@ -1465,22 +1528,24 @@ function recycleImage(attrName, data) {
 
 const PaintImageModule = {
     image,
+    checkImage,
+    createPattern,
+    recycleImage,
     createData,
+    getPatternData,
     fillOrFitMode,
     clipMode,
-    repeatMode,
-    createPattern,
-    checkImage,
-    recycleImage
+    repeatMode
 };
 
-const defaultFrom$2 = { x: 0.5, y: 0 };
-const defaultTo$2 = { x: 0.5, y: 1 };
+const { toPoint: toPoint$2 } = AroundHelper;
+const realFrom$2 = {};
+const realTo$2 = {};
 function linearGradient(paint, box) {
     let { from, to, type, blendMode, opacity } = paint;
-    from || (from = defaultFrom$2);
-    to || (to = defaultTo$2);
-    const style = Platform.canvas.createLinearGradient(box.x + from.x * box.width, box.y + from.y * box.height, box.x + to.x * box.width, box.y + to.y * box.height);
+    toPoint$2(from || 'top', box, realFrom$2);
+    toPoint$2(to || 'bottom', box, realTo$2);
+    const style = Platform.canvas.createLinearGradient(realFrom$2.x, realFrom$2.y, realTo$2.x, realTo$2.y);
     applyStops(style, paint.stops, opacity);
     const data = { type, style };
     if (blendMode)
@@ -1491,63 +1556,66 @@ function applyStops(gradient, stops, opacity) {
     let stop;
     for (let i = 0, len = stops.length; i < len; i++) {
         stop = stops[i];
-        gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity));
+        if (typeof stop === 'string') {
+            gradient.addColorStop(i / (len - 1), ColorConvert.string(stop, opacity));
+        }
+        else {
+            gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity));
+        }
     }
 }
 
-const { set: set$1, getAngle: getAngle$1, getDistance: getDistance$1 } = PointHelper;
-const { get: get$1, rotateOfOuter: rotateOfOuter$1, scaleOfOuter: scaleOfOuter$1 } = MatrixHelper;
-const defaultFrom$1 = { x: 0.5, y: 0.5 };
-const defaultTo$1 = { x: 0.5, y: 1 };
+const { getAngle, getDistance: getDistance$1 } = PointHelper;
+const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper;
+const { toPoint: toPoint$1 } = AroundHelper;
 const realFrom$1 = {};
 const realTo$1 = {};
 function radialGradient(paint, box) {
     let { from, to, type, opacity, blendMode, stretch } = paint;
-    from || (from = defaultFrom$1);
-    to || (to = defaultTo$1);
-    const { x, y, width, height } = box;
-    set$1(realFrom$1, x + from.x * width, y + from.y * height);
-    set$1(realTo$1, x + to.x * width, y + to.y * height);
-    let transform;
-    if (width !== height || stretch) {
-        transform = get$1();
-        scaleOfOuter$1(transform, realFrom$1, width / height * (stretch || 1), 1);
-        rotateOfOuter$1(transform, realFrom$1, getAngle$1(realFrom$1, realTo$1) + 90);
-    }
+    toPoint$1(from || 'center', box, realFrom$1);
+    toPoint$1(to || 'bottom', box, realTo$1);
     const style = Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$1(realFrom$1, realTo$1));
     applyStops(style, paint.stops, opacity);
-    const data = { type, style, transform };
+    const data = { type, style };
+    const transform = getTransform(box, realFrom$1, realTo$1, stretch, true);
+    if (transform)
+        data.transform = transform;
     if (blendMode)
         data.blendMode = blendMode;
     return data;
 }
+function getTransform(box, from, to, stretch, rotate90) {
+    let transform;
+    const { width, height } = box;
+    if (width !== height || stretch) {
+        const angle = getAngle(from, to);
+        transform = get();
+        if (rotate90) {
+            scaleOfOuter(transform, from, width / height * (stretch || 1), 1);
+            rotateOfOuter(transform, from, angle + 90);
+        }
+        else {
+            scaleOfOuter(transform, from, 1, width / height * (stretch || 1));
+            rotateOfOuter(transform, from, angle);
+        }
+    }
+    return transform;
+}
 
-const { set, getAngle, getDistance } = PointHelper;
-const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper;
-const defaultFrom = { x: 0.5, y: 0.5 };
-const defaultTo = { x: 0.5, y: 1 };
+const { getDistance } = PointHelper;
+const { toPoint } = AroundHelper;
 const realFrom = {};
 const realTo = {};
 function conicGradient(paint, box) {
     let { from, to, type, opacity, blendMode, stretch } = paint;
-    from || (from = defaultFrom);
-    to || (to = defaultTo);
-    const { x, y, width, height } = box;
-    set(realFrom, x + from.x * width, y + from.y * height);
-    set(realTo, x + to.x * width, y + to.y * height);
-    const transform = get();
-    const angle = getAngle(realFrom, realTo);
-    if (Platform.conicGradientRotate90) {
-        scaleOfOuter(transform, realFrom, width / height * (stretch || 1), 1);
-        rotateOfOuter(transform, realFrom, angle + 90);
-    }
-    else {
-        scaleOfOuter(transform, realFrom, 1, width / height * (stretch || 1));
-        rotateOfOuter(transform, realFrom, angle);
-    }
+    toPoint(from || 'center', box, realFrom);
+    toPoint(to || 'bottom', box, realTo);
     const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo));
     applyStops(style, paint.stops, opacity);
-    const data = { type, style, transform };
+    const data = { type, style };
+    const transform = getTransform(box, realFrom, realTo, stretch || 1, Platform.conicGradientRotate90);
+    if (transform)
+        data.transform = transform;
     if (blendMode)
         data.blendMode = blendMode;
     return data;
@@ -1556,7 +1624,8 @@ function conicGradient(paint, box) {
 const PaintGradientModule = {
     linearGradient,
     radialGradient,
-    conicGradient
+    conicGradient,
+    getTransform
 };
 
 const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = BoundsHelper;
@@ -1662,8 +1731,8 @@ function innerShadow(ui, current, shape) {
 
 function blur(ui, current, origin) {
     const { blur } = ui.__;
-    origin.setWorldBlur(blur * ui.__world.a);
-    origin.copyWorldToInner(current, ui.__world, ui.__layout.renderBounds);
+    origin.setWorldBlur(blur * ui.__nowWorld.a);
+    origin.copyWorldToInner(current, ui.__nowWorld, ui.__layout.renderBounds);
     origin.filter = 'none';
 }
 
@@ -1688,7 +1757,7 @@ Group.prototype.__renderMask = function (canvas, options) {
                 maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
                 maskCanvas = contentCanvas = null;
             }
-            if (child.__.maskType === 'path') {
+            if (child.__.mask === 'path') {
                 if (child.opacity < 1) {
                     currentMask = 'opacity-path';
                     maskOpacity = child.opacity;
@@ -1709,7 +1778,7 @@ Group.prototype.__renderMask = function (canvas, options) {
                     contentCanvas = getCanvas(canvas);
                 child.__render(maskCanvas, options);
             }
-            if (child.__.maskType !== 'clipping')
+            if (child.__.mask !== 'clipping')
                 continue;
         }
         if (excludeRenderBounds(child, options))
@@ -1904,7 +1973,8 @@ function createRows(drawData, content, style) {
                     if (breakAll) {
                         if (wordWidth)
                             addWord();
-                        addRow();
+                        if (rowWidth)
+                            addRow();
                     }
                     else {
                         if (!afterBreak)
@@ -1912,10 +1982,12 @@ function createRows(drawData, content, style) {
                         if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
                             if (wordWidth)
                                 addWord();
-                            addRow();
+                            if (rowWidth)
+                                addRow();
                         }
                         else {
-                            addRow();
+                            if (rowWidth)
+                                addRow();
                         }
                     }
                 }
@@ -2010,11 +2082,11 @@ function layoutChar(drawData, style, width, _height) {
                     if (mode === WordMode) {
                         wordChar = { char: '', x: charX };
                         charX = toWordChar(word.data, charX, wordChar);
-                        if (wordChar.char !== ' ')
+                        if (row.isOverflow || wordChar.char !== ' ')
                             row.data.push(wordChar);
                     }
                     else {
-                        charX = toChar(word.data, charX, row.data);
+                        charX = toChar(word.data, charX, row.data, row.isOverflow);
                     }
                     if (!row.paraEnd && addWordWidth) {
                         charX += addWordWidth;
@@ -2041,9 +2113,9 @@ function toWordChar(data, charX, wordChar) {
     });
     return charX;
 }
-function toChar(data, charX, rowData) {
+function toChar(data, charX, rowData, isOverflow) {
     data.forEach(char => {
-        if (char.char !== ' ') {
+        if (isOverflow || char.char !== ' ') {
             char.x = charX;
             rowData.push(char);
         }
@@ -2075,12 +2147,14 @@ function layoutText(drawData, style) {
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
         row.x = x;
-        switch (textAlign) {
-            case 'center':
-                row.x += (width - row.width) / 2;
-                break;
-            case 'right':
-                row.x += width - row.width;
+        if (row.width < width || (row.width > width && !__clipText)) {
+            switch (textAlign) {
+                case 'center':
+                    row.x += (width - row.width) / 2;
+                    break;
+                case 'right':
+                    row.x += width - row.width;
+            }
         }
         if (row.paraStart && paraSpacing && i > 0)
             starY += paraSpacing;
@@ -2116,16 +2190,20 @@ function layoutText(drawData, style) {
     bounds.height = realHeight;
 }
 
-function clipText(drawData, style) {
+function clipText(drawData, style, x, width) {
+    if (!width)
+        return;
     const { rows, overflow } = drawData;
     let { textOverflow } = style;
     rows.splice(overflow);
-    if (textOverflow !== 'hide') {
-        if (textOverflow === 'ellipsis')
+    if (textOverflow && textOverflow !== 'show') {
+        if (textOverflow === 'hide')
+            textOverflow = '';
+        else if (textOverflow === 'ellipsis')
             textOverflow = '...';
         let char, charRight;
-        const ellipsisWidth = Platform.canvas.measureText(textOverflow).width;
-        const right = style.x + style.width - ellipsisWidth;
+        const ellipsisWidth = textOverflow ? Platform.canvas.measureText(textOverflow).width : 0;
+        const right = x + width - ellipsisWidth;
         const list = style.textWrap === 'none' ? rows : [rows[overflow - 1]];
         list.forEach(row => {
             if (row.isOverflow && row.data) {
@@ -2201,7 +2279,7 @@ function getDrawData(content, style) {
     layoutText(drawData, style);
     layoutChar(drawData, style, width);
     if (drawData.overflow)
-        clipText(drawData, style);
+        clipText(drawData, style, x, width);
     if (textDecoration !== 'none')
         decorationText(drawData, style);
     return drawData;
@@ -2272,45 +2350,95 @@ function getTrimBounds(canvas) {
 const ExportModule = {
     export(leaf, filename, options) {
         this.running = true;
+        const fileType = FileHelper.fileType(filename);
+        options = FileHelper.getExportOptions(options);
         return addTask((success) => new Promise((resolve) => {
             const over = (result) => {
                 success(result);
                 resolve();
                 this.running = false;
             };
+            const { toURL } = Platform;
+            const { download } = Platform.origin;
+            if (filename === 'json') {
+                return over({ data: leaf.toJSON(options.json) });
+            }
+            else if (fileType === 'json') {
+                download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
+                return over({ data: true });
+            }
+            if (filename === 'svg') {
+                return over({ data: leaf.toSVG() });
+            }
+            else if (fileType === 'svg') {
+                download(toURL(leaf.toSVG(), 'svg'), filename);
+                return over({ data: true });
+            }
             const { leafer } = leaf;
             if (leafer) {
+                checkLazy(leaf);
                 leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
                     let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
-                    options = FileHelper.getExportOptions(options);
-                    const { scale, pixelRatio, slice, trim } = options;
+                    const { worldTransform, isLeafer, isFrame } = leaf;
+                    const { slice, trim, onCanvas } = options;
+                    let scale = options.scale || 1;
+                    let pixelRatio = options.pixelRatio || 1;
+                    const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
+                    const contextSettings = options.contextSettings || leafer.config.contextSettings;
+                    if (leaf.isApp) {
+                        scale *= pixelRatio;
+                        pixelRatio = leaf.app.pixelRatio;
+                    }
                     const screenshot = options.screenshot || leaf.isApp;
-                    const fill = options.fill === undefined ? ((leaf.isLeafer && screenshot) ? leaf.fill : '') : options.fill;
+                    const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
                     const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
                     if (screenshot) {
-                        renderBounds = screenshot === true ? (leaf.isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
+                        renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
                     }
                     else {
-                        const { localTransform, __world: world } = leaf;
-                        matrix.set(world).divide(localTransform).invert();
-                        scaleX = 1 / (world.scaleX / leaf.scaleX);
-                        scaleY = 1 / (world.scaleY / leaf.scaleY);
-                        renderBounds = leaf.getBounds('render', 'local');
-                    }
-                    let { x, y, width, height } = renderBounds;
-                    if (scale) {
-                        matrix.scale(scale);
-                        width *= scale, height *= scale;
-                        scaleX *= scale, scaleY *= scale;
+                        let relative = options.relative || (isLeafer ? 'inner' : 'local');
+                        scaleX = worldTransform.scaleX;
+                        scaleY = worldTransform.scaleY;
+                        switch (relative) {
+                            case 'inner':
+                                matrix.set(worldTransform);
+                                break;
+                            case 'local':
+                                matrix.set(worldTransform).divide(leaf.localTransform);
+                                scaleX /= leaf.scaleX;
+                                scaleY /= leaf.scaleY;
+                                break;
+                            case 'world':
+                                scaleX = 1;
+                                scaleY = 1;
+                                break;
+                            case 'page':
+                                relative = leaf.leafer;
+                            default:
+                                matrix.set(worldTransform).divide(leaf.getTransform(relative));
+                                const l = relative.worldTransform;
+                                scaleX /= scaleX / l.scaleX;
+                                scaleY /= scaleY / l.scaleY;
+                        }
+                        renderBounds = leaf.getBounds('render', relative);
                     }
-                    let canvas = Creator.canvas({ width, height, pixelRatio });
-                    const renderOptions = { matrix: matrix.translate(-x, -y).withScale(scaleX, scaleY) };
+                    const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
+                    let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
+                    const renderOptions = { matrix: matrix.scale(1 / scale).invert().translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
                     if (slice) {
                         leaf = leafer;
                         renderOptions.bounds = canvas.bounds;
                     }
                     canvas.save();
-                    leaf.__render(canvas, renderOptions);
+                    if (isFrame && fill !== undefined) {
+                        const oldFill = leaf.get('fill');
+                        leaf.fill = '';
+                        leaf.__render(canvas, renderOptions);
+                        leaf.fill = oldFill;
+                    }
+                    else {
+                        leaf.__render(canvas, renderOptions);
+                    }
                     canvas.restore();
                     if (trim) {
                         trimBounds = getTrimBounds(canvas);
@@ -2321,8 +2449,10 @@ const ExportModule = {
                     }
                     if (needFill)
                         canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
+                    if (onCanvas)
+                        onCanvas(canvas);
                     const data = filename === 'canvas' ? canvas : yield canvas.export(filename, options);
-                    over({ data, renderBounds, trimBounds });
+                    over({ data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
                 }));
             }
             else {
@@ -2339,12 +2469,56 @@ function addTask(task) {
         tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: false });
     });
 }
+function checkLazy(leaf) {
+    if (leaf.__.__needComputePaint)
+        leaf.__.__computePaint();
+    if (leaf.isBranch)
+        leaf.children.forEach(child => checkLazy(child));
+}
+
+const canvas = LeaferCanvasBase.prototype;
+const debug = Debug.get('@leafer-ui/export');
+canvas.export = function (filename, options) {
+    const { quality, blob } = FileHelper.getExportOptions(options);
+    if (filename.includes('.')) {
+        return this.saveAs(filename, quality);
+    }
+    else if (blob) {
+        return this.toBlob(filename, quality);
+    }
+    else {
+        return this.toDataURL(filename, quality);
+    }
+};
+canvas.toBlob = function (type, quality) {
+    return new Promise((resolve) => {
+        Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
+            resolve(blob);
+        }).catch((e) => {
+            debug.error(e);
+            resolve(null);
+        });
+    });
+};
+canvas.toDataURL = function (type, quality) {
+    return Platform.origin.canvasToDataURL(this.view, type, quality);
+};
+canvas.saveAs = function (filename, quality) {
+    return new Promise((resolve) => {
+        Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
+            resolve(true);
+        }).catch((e) => {
+            debug.error(e);
+            resolve(false);
+        });
+    });
+};
 
 Object.assign(TextConvert, TextConvertModule);
 Object.assign(ColorConvert, ColorConvertModule);
 Object.assign(Paint, PaintModule);
-Object.assign(PaintImage$1, PaintImageModule);
-Object.assign(PaintGradient$1, PaintGradientModule);
+Object.assign(PaintImage, PaintImageModule);
+Object.assign(PaintGradient, PaintGradientModule);
 Object.assign(Effect, EffectModule);
 Object.assign(Export, ExportModule);