@leafer-in/export 1.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Chao (Leafer) Wan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @leafer-in/export

package/dist/export.cjs

@@ -0,0 +1,224 @@
+'use strict';
+
+var draw = require('@leafer-ui/draw');
+
+/******************************************************************************
+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 { setPoint, addPoint, toBounds } = draw.TwoPointBoundsHelper;
+function getTrimBounds(canvas) {
+    const { width, height } = canvas.view;
+    const { data } = canvas.context.getImageData(0, 0, width, height);
+    let x, y, pointBounds, index = 0;
+    for (let i = 0; i < data.length; i += 4) {
+        if (data[i + 3] !== 0) {
+            x = index % width;
+            y = (index - x) / width;
+            pointBounds ? addPoint(pointBounds, x, y) : setPoint(pointBounds = {}, x, y);
+        }
+        index++;
+    }
+    const bounds = new draw.Bounds();
+    toBounds(pointBounds, bounds);
+    return bounds.scale(1 / canvas.pixelRatio).ceil();
+}
+
+const ExportModule = {
+    export(leaf, filename, options) {
+        this.running = true;
+        const fileType = draw.FileHelper.fileType(filename);
+        const isDownload = filename.includes('.');
+        options = draw.FileHelper.getExportOptions(options);
+        return addTask((success) => new Promise((resolve) => {
+            const over = (result) => {
+                success(result);
+                resolve();
+                this.running = false;
+            };
+            const { toURL } = draw.Platform;
+            const { download } = draw.Platform.origin;
+            if (fileType === 'json') {
+                isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
+                return over({ data: isDownload ? true : leaf.toJSON(options.json) });
+            }
+            if (fileType === 'svg') {
+                isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
+                return over({ data: isDownload ? true : leaf.toSVG() });
+            }
+            const { leafer } = leaf;
+            if (leafer) {
+                checkLazy(leaf);
+                leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
+                    let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
+                    const { worldTransform, isLeafer, isFrame } = leaf;
+                    const { slice, trim, onCanvas } = options;
+                    const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
+                    const contextSettings = options.contextSettings || leafer.config.contextSettings;
+                    const screenshot = options.screenshot || leaf.isApp;
+                    const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
+                    const needFill = draw.FileHelper.isOpaqueImage(filename) || fill, matrix = new draw.Matrix();
+                    if (screenshot) {
+                        renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
+                    }
+                    else {
+                        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);
+                    }
+                    const scaleData = { scaleX: 1, scaleY: 1 };
+                    draw.MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
+                    let pixelRatio = options.pixelRatio || 1;
+                    if (leaf.isApp) {
+                        scaleData.scaleX *= pixelRatio;
+                        scaleData.scaleY *= pixelRatio;
+                        pixelRatio = leaf.app.pixelRatio;
+                    }
+                    const { x, y, width, height } = new draw.Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+                    const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
+                    let canvas = draw.Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
+                    let sliceLeaf;
+                    if (slice) {
+                        sliceLeaf = leaf;
+                        sliceLeaf.__worldOpacity = 0;
+                        leaf = leafer;
+                        renderOptions.bounds = canvas.bounds;
+                    }
+                    canvas.save();
+                    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 (sliceLeaf)
+                        sliceLeaf.__updateWorldOpacity();
+                    if (trim) {
+                        trimBounds = getTrimBounds(canvas);
+                        const old = canvas, { width, height } = trimBounds;
+                        const config = { x: 0, y: 0, width, height, pixelRatio };
+                        canvas = draw.Creator.canvas(config);
+                        canvas.copyWorld(old, trimBounds, config);
+                    }
+                    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, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
+                }));
+            }
+            else {
+                over({ data: false });
+            }
+        }));
+    }
+};
+let tasker;
+function addTask(task) {
+    if (!tasker)
+        tasker = new draw.TaskProcessor();
+    return new Promise((resolve) => {
+        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 = draw.LeaferCanvasBase.prototype;
+const debug = draw.Debug.get('@leafer-in/export');
+canvas.export = function (filename, options) {
+    const { quality, blob } = draw.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) => {
+        draw.Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
+            resolve(blob);
+        }).catch((e) => {
+            debug.error(e);
+            resolve(null);
+        });
+    });
+};
+canvas.toDataURL = function (type, quality) {
+    return draw.Platform.origin.canvasToDataURL(this.view, type, quality);
+};
+canvas.saveAs = function (filename, quality) {
+    return new Promise((resolve) => {
+        draw.Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
+            resolve(true);
+        }).catch((e) => {
+            debug.error(e);
+            resolve(false);
+        });
+    });
+};
+
+Object.assign(draw.Export, ExportModule);
+draw.UI.prototype.export = function (filename, options) {
+    return draw.Export.export(this, filename, options);
+};

package/dist/export.esm.js

@@ -0,0 +1,222 @@
+import { Bounds, TwoPointBoundsHelper, FileHelper, TaskProcessor, Platform, Matrix, MathHelper, Creator, LeaferCanvasBase, Debug, Export, UI } from '@leafer-ui/draw';
+
+/******************************************************************************
+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 { setPoint, addPoint, toBounds } = TwoPointBoundsHelper;
+function getTrimBounds(canvas) {
+    const { width, height } = canvas.view;
+    const { data } = canvas.context.getImageData(0, 0, width, height);
+    let x, y, pointBounds, index = 0;
+    for (let i = 0; i < data.length; i += 4) {
+        if (data[i + 3] !== 0) {
+            x = index % width;
+            y = (index - x) / width;
+            pointBounds ? addPoint(pointBounds, x, y) : setPoint(pointBounds = {}, x, y);
+        }
+        index++;
+    }
+    const bounds = new Bounds();
+    toBounds(pointBounds, bounds);
+    return bounds.scale(1 / canvas.pixelRatio).ceil();
+}
+
+const ExportModule = {
+    export(leaf, filename, options) {
+        this.running = true;
+        const fileType = FileHelper.fileType(filename);
+        const isDownload = filename.includes('.');
+        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 (fileType === 'json') {
+                isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
+                return over({ data: isDownload ? true : leaf.toJSON(options.json) });
+            }
+            if (fileType === 'svg') {
+                isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
+                return over({ data: isDownload ? true : leaf.toSVG() });
+            }
+            const { leafer } = leaf;
+            if (leafer) {
+                checkLazy(leaf);
+                leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
+                    let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
+                    const { worldTransform, isLeafer, isFrame } = leaf;
+                    const { slice, trim, onCanvas } = options;
+                    const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
+                    const contextSettings = options.contextSettings || leafer.config.contextSettings;
+                    const screenshot = options.screenshot || leaf.isApp;
+                    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 ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
+                    }
+                    else {
+                        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);
+                    }
+                    const scaleData = { scaleX: 1, scaleY: 1 };
+                    MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
+                    let pixelRatio = options.pixelRatio || 1;
+                    if (leaf.isApp) {
+                        scaleData.scaleX *= pixelRatio;
+                        scaleData.scaleY *= pixelRatio;
+                        pixelRatio = leaf.app.pixelRatio;
+                    }
+                    const { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+                    const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
+                    let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
+                    let sliceLeaf;
+                    if (slice) {
+                        sliceLeaf = leaf;
+                        sliceLeaf.__worldOpacity = 0;
+                        leaf = leafer;
+                        renderOptions.bounds = canvas.bounds;
+                    }
+                    canvas.save();
+                    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 (sliceLeaf)
+                        sliceLeaf.__updateWorldOpacity();
+                    if (trim) {
+                        trimBounds = getTrimBounds(canvas);
+                        const old = canvas, { width, height } = trimBounds;
+                        const config = { x: 0, y: 0, width, height, pixelRatio };
+                        canvas = Creator.canvas(config);
+                        canvas.copyWorld(old, trimBounds, config);
+                    }
+                    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, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
+                }));
+            }
+            else {
+                over({ data: false });
+            }
+        }));
+    }
+};
+let tasker;
+function addTask(task) {
+    if (!tasker)
+        tasker = new TaskProcessor();
+    return new Promise((resolve) => {
+        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-in/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(Export, ExportModule);
+UI.prototype.export = function (filename, options) {
+    return Export.export(this, filename, options);
+};

package/dist/export.esm.min.js

@@ -0,0 +1 @@
+import{Bounds as e,TwoPointBoundsHelper as t,FileHelper as n,TaskProcessor as o,Platform as i,Matrix as s,MathHelper as a,Creator as r,LeaferCanvasBase as c,Debug as l,Export as d,UI as u}from"@leafer-ui/draw";function h(e,t,n,o){return new(n||(n=Promise))((function(i,s){function a(e){try{c(o.next(e))}catch(e){s(e)}}function r(e){try{c(o.throw(e))}catch(e){s(e)}}function c(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,r)}c((o=o.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const{setPoint:f,addPoint:p,toBounds:g}=t;const v={export(t,c,l){this.running=!0;const d=n.fileType(c),u=c.includes(".");return l=n.getExportOptions(l),function(e){w||(w=new o);return new Promise((t=>{w.add((()=>h(this,void 0,void 0,(function*(){return yield e(t)}))),{parallel:!1})}))}((o=>new Promise((v=>{const w=e=>{o(e),v(),this.running=!1},{toURL:m}=i,{download:y}=i.origin;if("json"===d)return u&&y(m(JSON.stringify(t.toJSON(l.json)),"text"),c),w({data:!!u||t.toJSON(l.json)});if("svg"===d)return u&&y(m(t.toSVG(),"svg"),c),w({data:!!u||t.toSVG()});const{leafer:_}=t;_?(x(t),_.waitViewCompleted((()=>h(this,void 0,void 0,(function*(){let o,i,d=1,u=1;const{worldTransform:h,isLeafer:v,isFrame:x}=t,{slice:m,trim:y,onCanvas:b}=l,S=void 0===l.smooth?_.config.smooth:l.smooth,R=l.contextSettings||_.config.contextSettings,B=l.screenshot||t.isApp,O=v&&B&&void 0===l.fill?t.fill:l.fill,P=n.isOpaqueImage(c)||O,X=new s;if(B)o=!0===B?v?_.canvas.bounds:t.worldRenderBounds:B;else{let e=l.relative||(v?"inner":"local");switch(d=h.scaleX,u=h.scaleY,e){case"inner":X.set(h);break;case"local":X.set(h).divide(t.localTransform),d/=t.scaleX,u/=t.scaleY;break;case"world":d=1,u=1;break;case"page":e=t.leafer;default:X.set(h).divide(t.getTransform(e));const n=e.worldTransform;d/=d/n.scaleX,u/=u/n.scaleY}o=t.getBounds("render",e)}const Y={scaleX:1,scaleY:1};a.getScaleData(l.scale,l.size,o,Y);let F=l.pixelRatio||1;t.isApp&&(Y.scaleX*=F,Y.scaleY*=F,F=t.app.pixelRatio);const{x:T,y:A,width:D,height:E}=new e(o).scale(Y.scaleX,Y.scaleY),L={matrix:X.scale(1/Y.scaleX,1/Y.scaleY).invert().translate(-T,-A).withScale(1/d*Y.scaleX,1/u*Y.scaleY)};let j,U=r.canvas({width:Math.round(D),height:Math.round(E),pixelRatio:F,smooth:S,contextSettings:R});if(m&&(j=t,j.__worldOpacity=0,t=_,L.bounds=U.bounds),U.save(),x&&void 0!==O){const e=t.get("fill");t.fill="",t.__render(U,L),t.fill=e}else t.__render(U,L);if(U.restore(),j&&j.__updateWorldOpacity(),y){i=function(t){const{width:n,height:o}=t.view,{data:i}=t.context.getImageData(0,0,n,o);let s,a,r,c=0;for(let e=0;e<i.length;e+=4)0!==i[e+3]&&(s=c%n,a=(c-s)/n,r?p(r,s,a):f(r={},s,a)),c++;const l=new e;return g(r,l),l.scale(1/t.pixelRatio).ceil()}(U);const t=U,{width:n,height:o}=i,s={x:0,y:0,width:n,height:o,pixelRatio:F};U=r.canvas(s),U.copyWorld(t,i,s)}P&&U.fillWorld(U.bounds,O||"#FFFFFF","destination-over"),b&&b(U);const W="canvas"===c?U:yield U.export(c,l);w({data:W,width:U.pixelWidth,height:U.pixelHeight,renderBounds:o,trimBounds:i})}))))):w({data:!1})}))))}};let w;function x(e){e.__.__needComputePaint&&e.__.__computePaint(),e.isBranch&&e.children.forEach((e=>x(e)))}const m=c.prototype,y=l.get("@leafer-in/export");m.export=function(e,t){const{quality:o,blob:i}=n.getExportOptions(t);return e.includes(".")?this.saveAs(e,o):i?this.toBlob(e,o):this.toDataURL(e,o)},m.toBlob=function(e,t){return new Promise((n=>{i.origin.canvasToBolb(this.view,e,t).then((e=>{n(e)})).catch((e=>{y.error(e),n(null)}))}))},m.toDataURL=function(e,t){return i.origin.canvasToDataURL(this.view,e,t)},m.saveAs=function(e,t){return new Promise((n=>{i.origin.canvasSaveAs(this.view,e,t).then((()=>{n(!0)})).catch((e=>{y.error(e),n(!1)}))}))},Object.assign(d,v),u.prototype.export=function(e,t){return d.export(this,e,t)};

package/dist/export.js

@@ -0,0 +1,225 @@
+(function (draw) {
+    'use strict';
+
+    /******************************************************************************
+    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 { setPoint, addPoint, toBounds } = draw.TwoPointBoundsHelper;
+    function getTrimBounds(canvas) {
+        const { width, height } = canvas.view;
+        const { data } = canvas.context.getImageData(0, 0, width, height);
+        let x, y, pointBounds, index = 0;
+        for (let i = 0; i < data.length; i += 4) {
+            if (data[i + 3] !== 0) {
+                x = index % width;
+                y = (index - x) / width;
+                pointBounds ? addPoint(pointBounds, x, y) : setPoint(pointBounds = {}, x, y);
+            }
+            index++;
+        }
+        const bounds = new draw.Bounds();
+        toBounds(pointBounds, bounds);
+        return bounds.scale(1 / canvas.pixelRatio).ceil();
+    }
+
+    const ExportModule = {
+        export(leaf, filename, options) {
+            this.running = true;
+            const fileType = draw.FileHelper.fileType(filename);
+            const isDownload = filename.includes('.');
+            options = draw.FileHelper.getExportOptions(options);
+            return addTask((success) => new Promise((resolve) => {
+                const over = (result) => {
+                    success(result);
+                    resolve();
+                    this.running = false;
+                };
+                const { toURL } = draw.Platform;
+                const { download } = draw.Platform.origin;
+                if (fileType === 'json') {
+                    isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
+                    return over({ data: isDownload ? true : leaf.toJSON(options.json) });
+                }
+                if (fileType === 'svg') {
+                    isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
+                    return over({ data: isDownload ? true : leaf.toSVG() });
+                }
+                const { leafer } = leaf;
+                if (leafer) {
+                    checkLazy(leaf);
+                    leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
+                        let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
+                        const { worldTransform, isLeafer, isFrame } = leaf;
+                        const { slice, trim, onCanvas } = options;
+                        const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
+                        const contextSettings = options.contextSettings || leafer.config.contextSettings;
+                        const screenshot = options.screenshot || leaf.isApp;
+                        const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
+                        const needFill = draw.FileHelper.isOpaqueImage(filename) || fill, matrix = new draw.Matrix();
+                        if (screenshot) {
+                            renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
+                        }
+                        else {
+                            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);
+                        }
+                        const scaleData = { scaleX: 1, scaleY: 1 };
+                        draw.MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
+                        let pixelRatio = options.pixelRatio || 1;
+                        if (leaf.isApp) {
+                            scaleData.scaleX *= pixelRatio;
+                            scaleData.scaleY *= pixelRatio;
+                            pixelRatio = leaf.app.pixelRatio;
+                        }
+                        const { x, y, width, height } = new draw.Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+                        const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
+                        let canvas = draw.Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
+                        let sliceLeaf;
+                        if (slice) {
+                            sliceLeaf = leaf;
+                            sliceLeaf.__worldOpacity = 0;
+                            leaf = leafer;
+                            renderOptions.bounds = canvas.bounds;
+                        }
+                        canvas.save();
+                        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 (sliceLeaf)
+                            sliceLeaf.__updateWorldOpacity();
+                        if (trim) {
+                            trimBounds = getTrimBounds(canvas);
+                            const old = canvas, { width, height } = trimBounds;
+                            const config = { x: 0, y: 0, width, height, pixelRatio };
+                            canvas = draw.Creator.canvas(config);
+                            canvas.copyWorld(old, trimBounds, config);
+                        }
+                        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, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
+                    }));
+                }
+                else {
+                    over({ data: false });
+                }
+            }));
+        }
+    };
+    let tasker;
+    function addTask(task) {
+        if (!tasker)
+            tasker = new draw.TaskProcessor();
+        return new Promise((resolve) => {
+            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 = draw.LeaferCanvasBase.prototype;
+    const debug = draw.Debug.get('@leafer-in/export');
+    canvas.export = function (filename, options) {
+        const { quality, blob } = draw.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) => {
+            draw.Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
+                resolve(blob);
+            }).catch((e) => {
+                debug.error(e);
+                resolve(null);
+            });
+        });
+    };
+    canvas.toDataURL = function (type, quality) {
+        return draw.Platform.origin.canvasToDataURL(this.view, type, quality);
+    };
+    canvas.saveAs = function (filename, quality) {
+        return new Promise((resolve) => {
+            draw.Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
+                resolve(true);
+            }).catch((e) => {
+                debug.error(e);
+                resolve(false);
+            });
+        });
+    };
+
+    Object.assign(draw.Export, ExportModule);
+    draw.UI.prototype.export = function (filename, options) {
+        return draw.Export.export(this, filename, options);
+    };
+
+})(LeaferUI);

package/dist/export.min.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("@leafer-ui/draw");function t(e,t,o,n){return new(o||(o=Promise))((function(i,r){function a(e){try{l(n.next(e))}catch(e){r(e)}}function s(e){try{l(n.throw(e))}catch(e){r(e)}}function l(e){var t;e.done?i(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,s)}l((n=n.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const{setPoint:o,addPoint:n,toBounds:i}=e.TwoPointBoundsHelper;const r={export(r,l,c){this.running=!0;const d=e.FileHelper.fileType(l),u=l.includes(".");return c=e.FileHelper.getExportOptions(c),function(o){a||(a=new e.TaskProcessor);return new Promise((e=>{a.add((()=>t(this,void 0,void 0,(function*(){return yield o(e)}))),{parallel:!1})}))}((a=>new Promise((f=>{const h=e=>{a(e),f(),this.running=!1},{toURL:p}=e.Platform,{download:g}=e.Platform.origin;if("json"===d)return u&&g(p(JSON.stringify(r.toJSON(c.json)),"text"),l),h({data:!!u||r.toJSON(c.json)});if("svg"===d)return u&&g(p(r.toSVG(),"svg"),l),h({data:!!u||r.toSVG()});const{leafer:v}=r;v?(s(r),v.waitViewCompleted((()=>t(this,void 0,void 0,(function*(){let t,a,s=1,d=1;const{worldTransform:u,isLeafer:f,isFrame:p}=r,{slice:g,trim:w,onCanvas:x}=c,m=void 0===c.smooth?v.config.smooth:c.smooth,y=c.contextSettings||v.config.contextSettings,P=c.screenshot||r.isApp,_=f&&P&&void 0===c.fill?r.fill:c.fill,b=e.FileHelper.isOpaqueImage(l)||_,B=new e.Matrix;if(P)t=!0===P?f?v.canvas.bounds:r.worldRenderBounds:P;else{let e=c.relative||(f?"inner":"local");switch(s=u.scaleX,d=u.scaleY,e){case"inner":B.set(u);break;case"local":B.set(u).divide(r.localTransform),s/=r.scaleX,d/=r.scaleY;break;case"world":s=1,d=1;break;case"page":e=r.leafer;default:B.set(u).divide(r.getTransform(e));const t=e.worldTransform;s/=s/t.scaleX,d/=d/t.scaleY}t=r.getBounds("render",e)}const S={scaleX:1,scaleY:1};e.MathHelper.getScaleData(c.scale,c.size,t,S);let F=c.pixelRatio||1;r.isApp&&(S.scaleX*=F,S.scaleY*=F,F=r.app.pixelRatio);const{x:R,y:O,width:T,height:X}=new e.Bounds(t).scale(S.scaleX,S.scaleY),Y={matrix:B.scale(1/S.scaleX,1/S.scaleY).invert().translate(-R,-O).withScale(1/s*S.scaleX,1/d*S.scaleY)};let E,H=e.Creator.canvas({width:Math.round(T),height:Math.round(X),pixelRatio:F,smooth:m,contextSettings:y});if(g&&(E=r,E.__worldOpacity=0,r=v,Y.bounds=H.bounds),H.save(),p&&void 0!==_){const e=r.get("fill");r.fill="",r.__render(H,Y),r.fill=e}else r.__render(H,Y);if(H.restore(),E&&E.__updateWorldOpacity(),w){a=function(t){const{width:r,height:a}=t.view,{data:s}=t.context.getImageData(0,0,r,a);let l,c,d,u=0;for(let e=0;e<s.length;e+=4)0!==s[e+3]&&(l=u%r,c=(u-l)/r,d?n(d,l,c):o(d={},l,c)),u++;const f=new e.Bounds;return i(d,f),f.scale(1/t.pixelRatio).ceil()}(H);const t=H,{width:r,height:s}=a,l={x:0,y:0,width:r,height:s,pixelRatio:F};H=e.Creator.canvas(l),H.copyWorld(t,a,l)}b&&H.fillWorld(H.bounds,_||"#FFFFFF","destination-over"),x&&x(H);const C="canvas"===l?H:yield H.export(l,c);h({data:C,width:H.pixelWidth,height:H.pixelHeight,renderBounds:t,trimBounds:a})}))))):h({data:!1})}))))}};let a;function s(e){e.__.__needComputePaint&&e.__.__computePaint(),e.isBranch&&e.children.forEach((e=>s(e)))}const l=e.LeaferCanvasBase.prototype,c=e.Debug.get("@leafer-in/export");l.export=function(t,o){const{quality:n,blob:i}=e.FileHelper.getExportOptions(o);return t.includes(".")?this.saveAs(t,n):i?this.toBlob(t,n):this.toDataURL(t,n)},l.toBlob=function(t,o){return new Promise((n=>{e.Platform.origin.canvasToBolb(this.view,t,o).then((e=>{n(e)})).catch((e=>{c.error(e),n(null)}))}))},l.toDataURL=function(t,o){return e.Platform.origin.canvasToDataURL(this.view,t,o)},l.saveAs=function(t,o){return new Promise((n=>{e.Platform.origin.canvasSaveAs(this.view,t,o).then((()=>{n(!0)})).catch((e=>{c.error(e),n(!1)}))}))},Object.assign(e.Export,r),e.UI.prototype.export=function(t,o){return e.Export.export(this,t,o)};

package/dist/export.min.js

@@ -0,0 +1 @@
+!function(e){"use strict";function t(e,t,o,n){return new(o||(o=Promise))((function(i,r){function a(e){try{l(n.next(e))}catch(e){r(e)}}function s(e){try{l(n.throw(e))}catch(e){r(e)}}function l(e){var t;e.done?i(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,s)}l((n=n.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const{setPoint:o,addPoint:n,toBounds:i}=e.TwoPointBoundsHelper;const r={export(r,l,c){this.running=!0;const d=e.FileHelper.fileType(l),u=l.includes(".");return c=e.FileHelper.getExportOptions(c),function(o){a||(a=new e.TaskProcessor);return new Promise((e=>{a.add((()=>t(this,void 0,void 0,(function*(){return yield o(e)}))),{parallel:!1})}))}((a=>new Promise((f=>{const h=e=>{a(e),f(),this.running=!1},{toURL:p}=e.Platform,{download:g}=e.Platform.origin;if("json"===d)return u&&g(p(JSON.stringify(r.toJSON(c.json)),"text"),l),h({data:!!u||r.toJSON(c.json)});if("svg"===d)return u&&g(p(r.toSVG(),"svg"),l),h({data:!!u||r.toSVG()});const{leafer:v}=r;v?(s(r),v.waitViewCompleted((()=>t(this,void 0,void 0,(function*(){let t,a,s=1,d=1;const{worldTransform:u,isLeafer:f,isFrame:p}=r,{slice:g,trim:w,onCanvas:x}=c,m=void 0===c.smooth?v.config.smooth:c.smooth,y=c.contextSettings||v.config.contextSettings,P=c.screenshot||r.isApp,_=f&&P&&void 0===c.fill?r.fill:c.fill,b=e.FileHelper.isOpaqueImage(l)||_,B=new e.Matrix;if(P)t=!0===P?f?v.canvas.bounds:r.worldRenderBounds:P;else{let e=c.relative||(f?"inner":"local");switch(s=u.scaleX,d=u.scaleY,e){case"inner":B.set(u);break;case"local":B.set(u).divide(r.localTransform),s/=r.scaleX,d/=r.scaleY;break;case"world":s=1,d=1;break;case"page":e=r.leafer;default:B.set(u).divide(r.getTransform(e));const t=e.worldTransform;s/=s/t.scaleX,d/=d/t.scaleY}t=r.getBounds("render",e)}const S={scaleX:1,scaleY:1};e.MathHelper.getScaleData(c.scale,c.size,t,S);let F=c.pixelRatio||1;r.isApp&&(S.scaleX*=F,S.scaleY*=F,F=r.app.pixelRatio);const{x:R,y:O,width:T,height:X}=new e.Bounds(t).scale(S.scaleX,S.scaleY),Y={matrix:B.scale(1/S.scaleX,1/S.scaleY).invert().translate(-R,-O).withScale(1/s*S.scaleX,1/d*S.scaleY)};let E,H=e.Creator.canvas({width:Math.round(T),height:Math.round(X),pixelRatio:F,smooth:m,contextSettings:y});if(g&&(E=r,E.__worldOpacity=0,r=v,Y.bounds=H.bounds),H.save(),p&&void 0!==_){const e=r.get("fill");r.fill="",r.__render(H,Y),r.fill=e}else r.__render(H,Y);if(H.restore(),E&&E.__updateWorldOpacity(),w){a=function(t){const{width:r,height:a}=t.view,{data:s}=t.context.getImageData(0,0,r,a);let l,c,d,u=0;for(let e=0;e<s.length;e+=4)0!==s[e+3]&&(l=u%r,c=(u-l)/r,d?n(d,l,c):o(d={},l,c)),u++;const f=new e.Bounds;return i(d,f),f.scale(1/t.pixelRatio).ceil()}(H);const t=H,{width:r,height:s}=a,l={x:0,y:0,width:r,height:s,pixelRatio:F};H=e.Creator.canvas(l),H.copyWorld(t,a,l)}b&&H.fillWorld(H.bounds,_||"#FFFFFF","destination-over"),x&&x(H);const L="canvas"===l?H:yield H.export(l,c);h({data:L,width:H.pixelWidth,height:H.pixelHeight,renderBounds:t,trimBounds:a})}))))):h({data:!1})}))))}};let a;function s(e){e.__.__needComputePaint&&e.__.__computePaint(),e.isBranch&&e.children.forEach((e=>s(e)))}const l=e.LeaferCanvasBase.prototype,c=e.Debug.get("@leafer-in/export");l.export=function(t,o){const{quality:n,blob:i}=e.FileHelper.getExportOptions(o);return t.includes(".")?this.saveAs(t,n):i?this.toBlob(t,n):this.toDataURL(t,n)},l.toBlob=function(t,o){return new Promise((n=>{e.Platform.origin.canvasToBolb(this.view,t,o).then((e=>{n(e)})).catch((e=>{c.error(e),n(null)}))}))},l.toDataURL=function(t,o){return e.Platform.origin.canvasToDataURL(this.view,t,o)},l.saveAs=function(t,o){return new Promise((n=>{e.Platform.origin.canvasSaveAs(this.view,t,o).then((()=>{n(!0)})).catch((e=>{c.error(e),n(!1)}))}))},Object.assign(e.Export,r),e.UI.prototype.export=function(t,o){return e.Export.export(this,t,o)}}(LeaferUI);

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@leafer-in/export",
+  "version": "1.3.0",
+  "description": "@leafer-in/export",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/export.esm.js",
+  "exports": {
+    "import": "./dist/export.esm.js",
+    "require": "./dist/export.cjs",
+    "types": "./types/index.d.ts"
+  },
+  "types": "types/index.d.ts",
+  "unpkg": "dist/export.js",
+  "jsdelivr": "dist/export.js",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/leafer-in.git"
+  },
+  "homepage": "https://github.com/leaferjs/leafer-in/tree/main/packages/export",
+  "bugs": "https://github.com/leaferjs/leafer-in/issues",
+  "keywords": [
+    "leafer export",
+    "leafer-export",
+    "leafer-in",
+    "export",
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "peerDependencies": {
+    "@leafer-ui/draw": "^1.3.0",
+    "@leafer-ui/interface": "^1.3.0",
+    "@leafer-in/interface": "^1.3.0"
+  }
+}

package/src/canvas.ts

@@ -0,0 +1,39 @@
+import { IExportOptions, IExportImageType, IExportFileType, IBlob } from '@leafer-ui/interface'
+import { LeaferCanvasBase, FileHelper, Platform, Debug } from '@leafer-ui/draw'
+
+
+const canvas = LeaferCanvasBase.prototype
+const debug = Debug.get('@leafer-in/export')
+
+canvas.export = function (filename: IExportFileType | string, options?: IExportOptions | number | boolean): string | Promise<any> {
+    const { quality, blob } = FileHelper.getExportOptions(options)
+    if (filename.includes('.')) return this.saveAs(filename, quality)
+    else if (blob) return this.toBlob(filename as IExportFileType, quality)
+    else return this.toDataURL(filename as IExportImageType, quality)
+}
+
+canvas.toBlob = function (type?: IExportFileType, quality?: number): Promise<IBlob> {
+    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?: IExportImageType, quality?: number): string | Promise<string> {
+    return Platform.origin.canvasToDataURL(this.view, type, quality)
+}
+
+canvas.saveAs = function (filename: string, quality?: number): Promise<boolean> {
+    return new Promise((resolve) => {
+        Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
+            resolve(true)
+        }).catch((e) => {
+            debug.error(e)
+            resolve(false)
+        })
+    })
+}

package/src/export.ts

@@ -0,0 +1,183 @@
+import { IExportModule, IExportOptions, IExportResult, IExportResultFunction, IUI, IExportFileType, IFunction, IRenderOptions, IBoundsData, IBounds, ILocationType, ILeaf } from '@leafer-ui/interface'
+import { Creator, Matrix, TaskProcessor, FileHelper, Bounds, Platform, MathHelper } from '@leafer-ui/draw'
+
+import { getTrimBounds } from './trim'
+
+
+export const ExportModule: IExportModule = {
+
+    export(leaf: IUI, filename: IExportFileType | string, options?: IExportOptions | number | boolean): Promise<IExportResult> {
+
+        this.running = true
+
+        const fileType = FileHelper.fileType(filename)
+        const isDownload = filename.includes('.')
+        options = FileHelper.getExportOptions(options)
+
+        return addTask((success: IExportResultFunction) =>
+
+            new Promise((resolve: IFunction) => {
+
+                const over = (result: IExportResult) => {
+                    success(result)
+                    resolve()
+                    this.running = false
+                }
+
+                const { toURL } = Platform
+                const { download } = Platform.origin
+
+
+                if (fileType === 'json') {
+                    isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename)
+                    return over({ data: isDownload ? true : leaf.toJSON(options.json) })
+                }
+
+                if (fileType === 'svg') {
+                    isDownload && download(toURL(leaf.toSVG(), 'svg'), filename)
+                    return over({ data: isDownload ? true : leaf.toSVG() })
+                }
+
+
+                const { leafer } = leaf
+                if (leafer) {
+
+                    checkLazy(leaf)
+
+                    leafer.waitViewCompleted(async () => {
+
+                        let renderBounds: IBoundsData, trimBounds: IBounds, scaleX = 1, scaleY = 1
+                        const { worldTransform, isLeafer, isFrame } = leaf
+                        const { slice, trim, onCanvas } = options
+                        const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth
+                        const contextSettings = options.contextSettings || leafer.config.contextSettings
+
+                        const screenshot = options.screenshot || leaf.isApp
+                        const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill // leafer use 
+                        const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix()
+
+                        // 获取元素大小
+                        if (screenshot) {
+                            renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot
+                        } else {
+                            let relative: ILocationType | ILeaf = 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)
+                        }
+
+
+                        // 缩放元素
+                        const scaleData = { scaleX: 1, scaleY: 1 }
+                        MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData)
+
+                        let pixelRatio = options.pixelRatio || 1
+                        if (leaf.isApp) {
+                            scaleData.scaleX *= pixelRatio // app 只能以自身的pixelRatio导出，需转移到scale上
+                            scaleData.scaleY *= pixelRatio
+                            pixelRatio = leaf.app.pixelRatio
+                        }
+
+
+                        // 导出元素
+                        const { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY)
+                        const renderOptions: IRenderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) }
+                        let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings })
+
+                        let sliceLeaf: IUI
+                        if (slice) {
+                            sliceLeaf = leaf
+                            sliceLeaf.__worldOpacity = 0 // hide slice
+
+                            leaf = leafer // render all in bounds
+                            renderOptions.bounds = canvas.bounds
+                        }
+
+
+                        canvas.save()
+
+                        if (isFrame && fill !== undefined) {
+                            const oldFill = leaf.get('fill')
+                            leaf.fill = ''
+                            leaf.__render(canvas, renderOptions)
+                            leaf.fill = oldFill as string
+                        } else {
+                            leaf.__render(canvas, renderOptions)
+                        }
+
+                        canvas.restore()
+
+
+                        if (sliceLeaf) sliceLeaf.__updateWorldOpacity() // show slice
+
+                        if (trim) {
+                            trimBounds = getTrimBounds(canvas)
+                            const old = canvas, { width, height } = trimBounds
+                            const config = { x: 0, y: 0, width, height, pixelRatio }
+
+                            canvas = Creator.canvas(config)
+                            canvas.copyWorld(old, trimBounds, config)
+                        }
+
+                        if (needFill) canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over')
+                        if (onCanvas) onCanvas(canvas)
+
+                        const data = filename === 'canvas' ? canvas : await canvas.export(filename, options)
+                        over({ data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds })
+
+                    })
+
+                } else {
+
+                    over({ data: false })
+
+                }
+
+            })
+
+        )
+
+    }
+
+}
+
+
+let tasker: TaskProcessor
+
+function addTask(task: IFunction): Promise<IExportResult> {
+    if (!tasker) tasker = new TaskProcessor()
+
+    return new Promise((resolve: IExportResultFunction) => {
+        tasker.add(async () => await task(resolve), { parallel: false })
+    })
+}
+
+
+function checkLazy(leaf: IUI): void {
+    if (leaf.__.__needComputePaint) leaf.__.__computePaint()
+    if (leaf.isBranch) leaf.children.forEach(child => checkLazy(child))
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+import { IExportFileType, IExportOptions, IExportResult } from '@leafer-ui/interface'
+import { Export, UI } from '@leafer-ui/draw'
+
+import { ExportModule } from './export'
+import './canvas'
+
+
+Object.assign(Export, ExportModule)
+
+UI.prototype.export = function (filename: IExportFileType | string, options?: IExportOptions | number | boolean): Promise<IExportResult> {
+    return Export.export(this, filename, options)
+}

package/src/trim.ts

@@ -0,0 +1,24 @@
+import { ITwoPointBoundsData, ILeaferCanvas, IBounds, ISizeData } from '@leafer-ui/interface'
+import { TwoPointBoundsHelper, Bounds } from '@leafer-ui/draw'
+
+
+const { setPoint, addPoint, toBounds } = TwoPointBoundsHelper
+
+export function getTrimBounds(canvas: ILeaferCanvas): IBounds {
+    const { width, height } = canvas.view as ISizeData
+    const { data } = canvas.context.getImageData(0, 0, width, height)
+    let x: number, y: number, pointBounds: ITwoPointBoundsData, index: number = 0
+
+    for (let i = 0; i < data.length; i += 4) {
+        if (data[i + 3] !== 0) {
+            x = index % width
+            y = (index - x) / width
+            pointBounds ? addPoint(pointBounds, x, y) : setPoint(pointBounds = {} as ITwoPointBoundsData, x, y)
+        }
+        index++
+    }
+
+    const bounds = new Bounds()
+    toBounds(pointBounds, bounds)
+    return bounds.scale(1 / canvas.pixelRatio).ceil()
+}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }