@leafer-draw/miniapp 1.0.1 → 1.0.3

package/dist/miniapp.esm.js

@@ -1,4 +1,4 @@
-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, 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, 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';
@@ -43,6 +43,8 @@ class LeaferCanvas extends LeaferCanvasBase {
         const size = { width: width || view.width, height: height || view.height, pixelRatio };
         this.resize(size);
         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);
@@ -110,119 +112,120 @@ 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.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 {
@@ -363,9 +366,13 @@ function updateBounds(boundsList) {
     });
 }
 function updateChange(updateList) {
+    let layout;
     updateList.list.forEach(leaf => {
-        if (leaf.__layout.opacityChanged)
+        layout = leaf.__layout;
+        if (layout.opacityChanged)
             updateAllWorldOpacity(leaf);
+        if (layout.stateStyleChanged)
+            setTimeout(() => layout.stateStyleChanged && leaf.updateState());
         leaf.__updateChange();
     });
 }
@@ -731,7 +738,6 @@ class Renderer {
         Platform.requestRender(() => {
             this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - startTime)));
             if (this.running) {
-                this.target.emit(AnimateEvent.FRAME);
                 if (this.changed && this.canvas.view)
                     this.render();
                 this.target.emit(RenderEvent.NEXT);
@@ -1156,16 +1162,21 @@ 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) {
     let { width, height } = image;
     if (paint.padding)
         box = tempBox.set(box).shrink(paint.padding);
+    if (paint.mode === 'strench')
+        paint.mode = 'stretch';
     const { opacity, mode, align, offset, scale, size, rotation, repeat } = paint;
     const sameBox = box.width === width && box.height === height;
     const data = { mode };
@@ -1179,13 +1190,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 };
@@ -1197,7 +1205,7 @@ function getPatternData(paint, box, image) {
     if (offset)
         x += offset.x, y += offset.y;
     switch (mode) {
-        case 'strench':
+        case 'stretch':
             if (!sameBox)
                 width = box.width, height = box.height;
             break;
@@ -1224,7 +1232,7 @@ function getPatternData(paint, box, image) {
             translate(data.transform, box.x, box.y);
         }
     }
-    if (scaleX && mode !== 'strench') {
+    if (scaleX && mode !== 'stretch') {
         data.scaleX = scaleX;
         data.scaleY = scaleY;
     }
@@ -1328,7 +1336,7 @@ const { get: get$1, scale, copy: copy$1 } = MatrixHelper;
 const { ceil, abs: abs$1 } = Math;
 function createPattern(ui, paint, pixelRatio) {
     let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
-    const id = scaleX + '-' + scaleY;
+    const id = scaleX + '-' + scaleY + '-' + pixelRatio;
     if (paint.patternId !== id && !ui.destroyed) {
         scaleX = abs$1(scaleX);
         scaleY = abs$1(scaleY);
@@ -1422,7 +1430,8 @@ 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 && !Export.running)) {
+    const { pixelRatio } = canvas;
+    if (!paint.data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
         return false;
     }
     else {
@@ -1430,8 +1439,8 @@ function checkImage(ui, canvas, paint, allowPaint) {
         if (allowPaint) {
             if (!data.repeat) {
                 let { width, height } = data;
-                width *= abs(scaleX) * canvas.pixelRatio;
-                height *= abs(scaleY) * canvas.pixelRatio;
+                width *= abs(scaleX) * pixelRatio;
+                height *= abs(scaleY) * pixelRatio;
                 if (data.scaleX) {
                     width *= data.scaleX;
                     height *= data.scaleY;
@@ -1456,15 +1465,15 @@ function checkImage(ui, canvas, paint, allowPaint) {
             return true;
         }
         else {
-            if (!paint.style || Export.running) {
-                createPattern(ui, paint, canvas.pixelRatio);
+            if (!paint.style || paint.sync || Export.running) {
+                createPattern(ui, paint, pixelRatio);
             }
             else {
                 if (!paint.patternTask) {
                     paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
                         paint.patternTask = null;
                         if (canvas.bounds.hit(ui.__nowWorld))
-                            createPattern(ui, paint, canvas.pixelRatio);
+                            createPattern(ui, paint, pixelRatio);
                         ui.forceUpdate('surface');
                     }), 300);
                 }
@@ -1528,14 +1537,16 @@ function linearGradient(paint, box) {
     return data;
 }
 function applyStops(gradient, stops, opacity) {
-    let stop;
-    for (let i = 0, len = stops.length; i < len; i++) {
-        stop = stops[i];
-        if (typeof stop === 'string') {
-            gradient.addColorStop(i / (len - 1), ColorConvert.string(stop, opacity));
-        }
-        else {
-            gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity));
+    if (stops) {
+        let stop;
+        for (let i = 0, len = stops.length; i < len; i++) {
+            stop = stops[i];
+            if (typeof stop === 'string') {
+                gradient.addColorStop(i / (len - 1), ColorConvert.string(stop, opacity));
+            }
+            else {
+                gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity));
+            }
         }
     }
 }
@@ -2291,10 +2302,15 @@ const TextConvertModule = {
 };
 
 function string(color, opacity) {
-    if (typeof color === 'string')
-        return color;
+    const doOpacity = typeof opacity === 'number' && opacity !== 1;
+    if (typeof color === 'string') {
+        if (doOpacity && ColorConvert.object)
+            color = ColorConvert.object(color);
+        else
+            return color;
+    }
     let a = color.a === undefined ? 1 : color.a;
-    if (opacity)
+    if (doOpacity)
         a *= opacity;
     const rgb = color.r + ',' + color.g + ',' + color.b;
     return a === 1 ? 'rgb(' + rgb + ')' : 'rgba(' + rgb + ',' + a + ')';
@@ -2326,6 +2342,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) => {
@@ -2335,19 +2352,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 (fileType === 'json') {
+                isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
+                return over({ data: isDownload ? true : leaf.toJSON(options.json) });
             }
-            if (filename === 'svg') {
-                return over({ data: leaf.toSVG() });
-            }
-            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) {
@@ -2356,14 +2367,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();
@@ -2397,9 +2402,17 @@ 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;
@@ -2503,7 +2516,8 @@ Object.assign(Effect, EffectModule);
 Object.assign(Export, ExportModule);
 
 try {
-    useCanvas('wx', wx);
+    if (wx)
+        useCanvas('miniapp', wx);
 }
 catch (_a) { }