@leafer-draw/miniapp 1.0.0 → 1.0.2

package/dist/miniapp.esm.js

@@ -1,4 +1,4 @@
-import { LeaferCanvasBase, Platform, canvasPatch, DataHelper, canvasSizeAttrs, ResizeEvent, Creator, LeaferImage, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, AnimateEvent, BoundsHelper, MatrixHelper, AlignHelper, ImageEvent, AroundHelper, PointHelper, Direction4, TwoPointBoundsHelper, TaskProcessor, Matrix } from '@leafer/core';
+import { LeaferCanvasBase, Platform, canvasPatch, DataHelper, canvasSizeAttrs, ResizeEvent, Creator, LeaferImage, defineKey, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, Bounds, LeafBoundsHelper, Debug, LeafLevelList, LayoutEvent, Run, ImageManager, AnimateEvent, BoundsHelper, MatrixHelper, MathHelper, AlignHelper, ImageEvent, AroundHelper, PointHelper, Direction4, TwoPointBoundsHelper, TaskProcessor, Matrix } from '@leafer/core';
 export * from '@leafer/core';
 export { LeaferImage } from '@leafer/core';
 import { PaintImage, ColorConvert, PaintGradient, Export, Group, TextConvert, Paint, Effect } from '@leafer-ui/draw';
@@ -7,7 +7,8 @@ export * from '@leafer-ui/draw';
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return false; }
     init() {
-        let { view } = this.config;
+        const { config } = this;
+        let view = config.view || config.canvas;
         if (view) {
             if (typeof view === 'string') {
                 if (view[0] !== '#')
@@ -37,16 +38,20 @@ class LeaferCanvas extends LeaferCanvasBase {
         else {
             this.view = view.view || view;
         }
-        this.__createContext();
+        this.view.getContext ? this.__createContext() : this.unrealCanvas();
         const { width, height, pixelRatio } = this.config;
         const size = { width: width || view.width, height: height || view.height, pixelRatio };
         this.resize(size);
-        if (this.context.roundRect) {
-            this.roundRect = function (x, y, width, height, radius) {
-                this.context.roundRect(x, y, width, height, typeof radius === 'number' ? [radius] : radius);
-            };
+        if (this.context) {
+            if (this.viewSelect)
+                Platform.renderCanvas = this;
+            if (this.context.roundRect) {
+                this.roundRect = function (x, y, width, height, radius) {
+                    this.context.roundRect(x, y, width, height, typeof radius === 'number' ? [radius] : radius);
+                };
+            }
+            canvasPatch(this.context.__proto__);
         }
-        canvasPatch(this.context.__proto__);
     }
     __createView() {
         this.view = Platform.origin.createCanvas(1, 1);
@@ -64,10 +69,12 @@ class LeaferCanvas extends LeaferCanvasBase {
                     callback();
             });
     }
-    startAutoLayout(_autoBounds, listener) {
+    startAutoLayout(autoBounds, listener) {
         this.resizeListener = listener;
-        this.checkSize = this.checkSize.bind(this);
-        Platform.miniapp.onWindowResize(this.checkSize);
+        if (autoBounds) {
+            this.checkSize = this.checkSize.bind(this);
+            Platform.miniapp.onWindowResize(this.checkSize);
+        }
     }
     checkSize() {
         if (this.viewSelect) {
@@ -76,13 +83,8 @@ class LeaferCanvas extends LeaferCanvasBase {
                     const { width, height } = this.clientBounds;
                     const { pixelRatio } = this;
                     const size = { width, height, pixelRatio };
-                    if (!this.isSameSize(size)) {
-                        const oldSize = {};
-                        DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
-                        this.resize(size);
-                        if (this.width !== undefined)
-                            this.resizeListener(new ResizeEvent(size, oldSize));
-                    }
+                    if (!this.isSameSize(size))
+                        this.emitResize(size);
                 });
             }, 500);
         }
@@ -92,6 +94,16 @@ class LeaferCanvas extends LeaferCanvasBase {
         this.resizeListener = null;
         Platform.miniapp.offWindowResize(this.checkSize);
     }
+    unrealCanvas() {
+        this.unreal = true;
+    }
+    emitResize(size) {
+        const oldSize = {};
+        DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
+        this.resize(size);
+        if (this.width !== undefined)
+            this.resizeListener(new ResizeEvent(size, oldSize));
+    }
 }
 
 const { mineType, fileType } = FileHelper;
@@ -100,120 +112,121 @@ Object.assign(Creator, {
     image: (options) => new LeaferImage(options)
 });
 function useCanvas(_canvasType, app) {
-    if (!Platform.origin) {
-        Platform.origin = {
-            createCanvas: (width, height, _format) => app.createOffscreenCanvas({ type: '2d', width, height }),
-            canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
-            canvasToBolb: (canvas, type, quality) => canvas.toBuffer(type, { quality }),
-            canvasSaveAs: (canvas, filePath, quality) => {
-                let data = canvas.toDataURL(mineType(fileType(filePath)), quality);
-                data = data.substring(data.indexOf('64,') + 3);
-                return Platform.origin.download(data, filePath);
-            },
-            download(data, filePath) {
-                return new Promise((resolve, reject) => {
-                    let toAlbum;
-                    if (!filePath.includes('/')) {
-                        filePath = `${app.env.USER_DATA_PATH}/` + filePath;
-                        toAlbum = true;
-                    }
-                    const fs = app.getFileSystemManager();
-                    fs.writeFile({
-                        filePath,
-                        data,
-                        encoding: 'base64',
-                        success() {
-                            if (toAlbum) {
-                                Platform.miniapp.saveToAlbum(filePath).then(() => {
-                                    fs.unlink({ filePath });
-                                    resolve();
-                                });
-                            }
-                            else {
+    Platform.origin = {
+        createCanvas: (width, height, _format) => app.createOffscreenCanvas({ type: '2d', width, height }),
+        canvasToDataURL: (canvas, type, quality) => canvas.toDataURL(mineType(type), quality),
+        canvasToBolb: (canvas, type, quality) => canvas.toBuffer(type, { quality }),
+        canvasSaveAs: (canvas, filePath, quality) => {
+            let data = canvas.toDataURL(mineType(fileType(filePath)), quality);
+            data = data.substring(data.indexOf('64,') + 3);
+            return Platform.origin.download(data, filePath);
+        },
+        download(data, filePath) {
+            return new Promise((resolve, reject) => {
+                let toAlbum;
+                if (!filePath.includes('/')) {
+                    filePath = `${app.env.USER_DATA_PATH}/` + filePath;
+                    toAlbum = true;
+                }
+                const fs = app.getFileSystemManager();
+                fs.writeFile({
+                    filePath,
+                    data,
+                    encoding: 'base64',
+                    success() {
+                        if (toAlbum) {
+                            Platform.miniapp.saveToAlbum(filePath).then(() => {
+                                fs.unlink({ filePath });
                                 resolve();
-                            }
-                        },
-                        fail(error) {
-                            reject(error);
+                            });
                         }
-                    });
-                });
-            },
-            loadImage(src) {
-                return new Promise((resolve, reject) => {
-                    const img = Platform.canvas.view.createImage();
-                    img.onload = () => { resolve(img); };
-                    img.onerror = (error) => { reject(error); };
-                    img.src = Platform.image.getRealURL(src);
+                        else {
+                            resolve();
+                        }
+                    },
+                    fail(error) {
+                        reject(error);
+                    }
                 });
-            },
-            noRepeat: 'repeat-x'
-        };
-        Platform.miniapp = {
-            select(name) {
-                return app.createSelectorQuery().select(name);
-            },
-            getBounds(select) {
-                return new Promise((resolve) => {
-                    select.boundingClientRect().exec((res) => {
-                        const rect = res[1];
-                        resolve({ x: rect.top, y: rect.left, width: rect.width, height: rect.height });
-                    });
+            });
+        },
+        loadImage(src) {
+            return new Promise((resolve, reject) => {
+                const img = Platform.canvas.view.createImage();
+                img.onload = () => { resolve(img); };
+                img.onerror = (error) => { reject(error); };
+                img.src = Platform.image.getRealURL(src);
+            });
+        },
+        noRepeat: 'repeat-x'
+    };
+    Platform.miniapp = {
+        select(name) {
+            return app.createSelectorQuery().select(name);
+        },
+        getBounds(select) {
+            return new Promise((resolve) => {
+                select.boundingClientRect().exec((res) => {
+                    const rect = res[1];
+                    resolve({ x: rect.top, y: rect.left, width: rect.width, height: rect.height });
                 });
-            },
-            getSizeView(select) {
-                return new Promise((resolve) => {
-                    select.fields({ node: true, size: true }).exec((res) => {
-                        const data = res[0];
-                        resolve({ view: data.node, width: data.width, height: data.height });
-                    });
+            });
+        },
+        getSizeView(select) {
+            return new Promise((resolve) => {
+                select.fields({ node: true, size: true }).exec((res) => {
+                    const data = res[0];
+                    resolve({ view: data.node, width: data.width, height: data.height });
                 });
-            },
-            saveToAlbum(path) {
-                return new Promise((resolve) => {
-                    app.getSetting({
-                        success: (res) => {
-                            if (res.authSetting['scope.writePhotosAlbum']) {
-                                app.saveImageToPhotosAlbum({
-                                    filePath: path,
-                                    success() { resolve(true); }
-                                });
-                            }
-                            else {
-                                app.authorize({
-                                    scope: 'scope.writePhotosAlbum',
-                                    success: () => {
-                                        app.saveImageToPhotosAlbum({
-                                            filePath: path,
-                                            success() { resolve(true); }
-                                        });
-                                    },
-                                    fail: () => { }
-                                });
-                            }
+            });
+        },
+        saveToAlbum(path) {
+            return new Promise((resolve) => {
+                app.getSetting({
+                    success: (res) => {
+                        if (res.authSetting['scope.writePhotosAlbum']) {
+                            app.saveImageToPhotosAlbum({
+                                filePath: path,
+                                success() { resolve(true); }
+                            });
                         }
-                    });
+                        else {
+                            app.authorize({
+                                scope: 'scope.writePhotosAlbum',
+                                success: () => {
+                                    app.saveImageToPhotosAlbum({
+                                        filePath: path,
+                                        success() { resolve(true); }
+                                    });
+                                },
+                                fail: () => { }
+                            });
+                        }
+                    }
                 });
-            },
-            onWindowResize(fun) {
-                app.onWindowResize(fun);
-            },
-            offWindowResize(fun) {
-                app.offWindowResize(fun);
-            }
-        };
-        Platform.event = {
-            stopDefault(_origin) { },
-            stopNow(_origin) { },
-            stop(_origin) { }
-        };
-        Platform.canvas = Creator.canvas();
-        Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient;
-    }
+            });
+        },
+        onWindowResize(fun) {
+            app.onWindowResize(fun);
+        },
+        offWindowResize(fun) {
+            app.offWindowResize(fun);
+        }
+    };
+    Platform.event = {
+        stopDefault(_origin) { },
+        stopNow(_origin) { },
+        stop(_origin) { }
+    };
+    Platform.canvas = Creator.canvas();
+    Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient;
 }
 Platform.name = 'miniapp';
-Platform.requestRender = function (render) { Platform.canvas.view.requestAnimationFrame(render); };
-Platform.devicePixelRatio = wx.getSystemInfoSync().pixelRatio;
+Platform.requestRender = function (render) {
+    const { view } = (Platform.renderCanvas || Platform.canvas);
+    view.requestAnimationFrame ? view.requestAnimationFrame(render) : setTimeout(render, 16);
+};
+defineKey(Platform, 'devicePixelRatio', { get() { return Math.max(1, wx.getSystemInfoSync().pixelRatio); } });
 
 class Watcher {
     get childrenChanged() { return this.hasAdd || this.hasRemove || this.hasVisible; }
@@ -691,14 +704,14 @@ class Renderer {
         if (Debug.showRepaint)
             this.canvas.strokeWorld(bounds, 'red');
         this.target.__render(this.canvas, options);
-        this.renderBounds = realBounds || bounds;
+        this.renderBounds = realBounds = realBounds || bounds;
         this.renderOptions = options;
-        this.totalBounds.isEmpty() ? this.totalBounds = this.renderBounds : this.totalBounds.add(this.renderBounds);
+        this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
         if (Debug.showHitView)
             this.renderHitView(options);
         if (Debug.showBoundsView)
             this.renderBoundsView(options);
-        this.canvas.updateRender();
+        this.canvas.updateRender(realBounds);
     }
     renderHitView(_options) { }
     renderBoundsView(_options) { }
@@ -1146,10 +1159,13 @@ function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, al
 const { get: get$2, translate } = MatrixHelper;
 const tempBox = new Bounds();
 const tempPoint = {};
+const tempScaleData = {};
 function createData(leafPaint, image, paint, box) {
-    const { blendMode } = paint;
+    const { blendMode, sync } = paint;
     if (blendMode)
         leafPaint.blendMode = blendMode;
+    if (sync)
+        leafPaint.sync = sync;
     leafPaint.data = getPatternData(paint, box, image);
 }
 function getPatternData(paint, box, image) {
@@ -1169,13 +1185,10 @@ function getPatternData(paint, box, image) {
             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;
-    }
-    else if (scale) {
-        scaleX = typeof scale === 'number' ? scale : scale.x;
-        scaleY = typeof scale === 'number' ? scale : scale.y;
+    else if (scale || size) {
+        MathHelper.getScaleData(scale, size, image, tempScaleData);
+        scaleX = tempScaleData.scaleX;
+        scaleY = tempScaleData.scaleY;
     }
     if (align) {
         const imageBounds = { x, y, width: swapWidth, height: swapHeight };
@@ -1412,7 +1425,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 const { abs } = Math;
 function checkImage(ui, canvas, paint, allowPaint) {
     const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
-    if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
+    if (!paint.data || (paint.patternId === scaleX + '-' + scaleY && !Export.running)) {
         return false;
     }
     else {
@@ -1446,7 +1459,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
             return true;
         }
         else {
-            if (!paint.style || Export.running) {
+            if (!paint.style || paint.sync || Export.running) {
                 createPattern(ui, paint, canvas.pixelRatio);
             }
             else {
@@ -2316,6 +2329,7 @@ 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) => {
@@ -2325,19 +2339,13 @@ const ExportModule = {
             };
             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() });
+            if (fileType === 'json') {
+                isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
+                return over({ data: isDownload ? true : leaf.toJSON(options.json) });
             }
-            else if (fileType === 'svg') {
-                download(toURL(leaf.toSVG(), 'svg'), filename);
-                return over({ data: true });
+            if (fileType === 'svg') {
+                isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
+                return over({ data: isDownload ? true : leaf.toSVG() });
             }
             const { leafer } = leaf;
             if (leafer) {
@@ -2346,14 +2354,8 @@ const ExportModule = {
                     let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
                     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 = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
                     const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
@@ -2387,10 +2389,21 @@ const ExportModule = {
                         }
                         renderBounds = leaf.getBounds('render', relative);
                     }
-                    const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
+                    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 });
-                    const renderOptions = { matrix: matrix.scale(1 / scale).invert().translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
+                    let sliceLeaf;
                     if (slice) {
+                        sliceLeaf = leaf;
+                        sliceLeaf.__worldOpacity = 0;
                         leaf = leafer;
                         renderOptions.bounds = canvas.bounds;
                     }
@@ -2405,6 +2418,8 @@ const ExportModule = {
                         leaf.__render(canvas, renderOptions);
                     }
                     canvas.restore();
+                    if (sliceLeaf)
+                        sliceLeaf.__updateWorldOpacity();
                     if (trim) {
                         trimBounds = getTrimBounds(canvas);
                         const old = canvas, { width, height } = trimBounds;
@@ -2488,7 +2503,8 @@ Object.assign(Effect, EffectModule);
 Object.assign(Export, ExportModule);
 
 try {
-    useCanvas('wx', wx);
+    if (wx)
+        useCanvas('miniapp', wx);
 }
 catch (_a) { }