leafer-draw 1.5.2 → 1.6.0

package/dist/web.esm.js

@@ -423,7 +423,6 @@ function updateChange(updateList) {
 }
 
 const { worldBounds } = LeafBoundsHelper;
-const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
 class LayoutBlockData {
     constructor(list) {
         this.updatedBounds = new Bounds();
@@ -437,13 +436,7 @@ class LayoutBlockData {
         this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
     }
     setAfter() {
-        const { list } = this.updatedList;
-        if (list.some(leaf => leaf.noBounds)) {
-            this.afterBounds.set(bigBounds);
-        }
-        else {
-            this.afterBounds.setListWithFn(list, worldBounds);
-        }
+        this.afterBounds.setListWithFn(this.updatedList.list, worldBounds);
         this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
     }
     merge(data) {
@@ -645,6 +638,13 @@ class Renderer {
     requestLayout() {
         this.target.emit(LayoutEvent.REQUEST);
     }
+    checkRender() {
+        if (this.running) {
+            if (this.changed && this.canvas.view)
+                this.render();
+            this.target.emit(RenderEvent.NEXT);
+        }
+    }
     render(callback) {
         if (!(this.running && this.canvas.view))
             return this.update();
@@ -653,8 +653,6 @@ class Renderer {
         this.totalBounds = new Bounds();
         debug.log(target.innerName, '--->');
         try {
-            if (!target.isApp)
-                target.app.emit(RenderEvent.CHILD_START, target);
             this.emitRender(RenderEvent.START);
             this.renderOnce(callback);
             this.emitRender(RenderEvent.END, this.totalBounds);
@@ -722,20 +720,12 @@ class Renderer {
     }
     clipRender(block) {
         const t = Run.start('PartRender');
-        const { canvas } = this;
-        const bounds = block.getIntersect(canvas.bounds);
-        const includes = block.includes(this.target.__world);
-        const realBounds = new Bounds(bounds);
+        const { canvas } = this, bounds = block.getIntersect(canvas.bounds), realBounds = new Bounds(bounds);
         canvas.save();
-        if (includes && !Debug.showRepaint) {
-            canvas.clear();
-        }
-        else {
-            bounds.spread(10 + 1 / this.canvas.pixelRatio).ceil();
-            canvas.clearWorld(bounds, true);
-            canvas.clipWorld(bounds, true);
-        }
-        this.__render(bounds, includes, realBounds);
+        bounds.spread(Renderer.clipSpread).ceil();
+        canvas.clearWorld(bounds, true);
+        canvas.clipWorld(bounds, true);
+        this.__render(bounds, block.includes(this.target.__world), realBounds);
         canvas.restore();
         Run.end(t);
     }
@@ -749,23 +739,17 @@ class Renderer {
         Run.end(t);
     }
     __render(bounds, includes, realBounds) {
-        const options = bounds.includes(this.target.__world) ? { includes } : { bounds, includes };
+        const { canvas } = this, options = includes ? { includes } : { bounds, includes };
         if (this.needFill)
-            this.canvas.fillWorld(bounds, this.config.fill);
+            canvas.fillWorld(bounds, this.config.fill);
         if (Debug.showRepaint)
-            this.canvas.strokeWorld(bounds, 'red');
-        this.target.__render(this.canvas, options);
+            Debug.drawRepaint(canvas, bounds);
+        this.target.__render(canvas, options);
         this.renderBounds = realBounds = realBounds || bounds;
         this.renderOptions = options;
         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(realBounds);
-    }
-    renderHitView(_options) { }
-    renderBoundsView(_options) { }
+        canvas.updateRender(realBounds);
+    }
     addBlock(block) {
         if (!this.updateBlocks)
             this.updateBlocks = [];
@@ -781,17 +765,24 @@ class Renderer {
         }
     }
     __requestRender() {
+        const target = this.target;
+        if (target.parentApp)
+            return target.parentApp.renderer.update(false);
         if (this.requestTime)
             return;
         const requestTime = this.requestTime = Date.now();
         Platform.requestRender(() => {
             this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
             this.requestTime = 0;
-            if (this.running) {
-                if (this.changed && this.canvas.view)
-                    this.render();
-                this.target.emit(RenderEvent.NEXT);
+            if (target.isApp) {
+                target.emit(RenderEvent.CHILD_START, target);
+                target.children.forEach(leafer => {
+                    leafer.renderer.FPS = this.FPS;
+                    leafer.renderer.checkRender();
+                });
+                target.emit(RenderEvent.CHILD_END, target);
             }
+            this.checkRender();
         });
     }
     __onResize(e) {
@@ -849,6 +840,7 @@ class Renderer {
         }
     }
 }
+Renderer.clipSpread = 10;
 
 Object.assign(Creator, {
     watcher: (target, options) => new Watcher(target, options),
@@ -1211,9 +1203,11 @@ const tempBox = new Bounds();
 const tempPoint = {};
 const tempScaleData = {};
 function createData(leafPaint, image, paint, box) {
-    const { blendMode, sync } = paint;
+    const { blendMode, changeful, sync } = paint;
     if (blendMode)
         leafPaint.blendMode = blendMode;
+    if (changeful)
+        leafPaint.changeful = changeful;
     if (sync)
         leafPaint.sync = sync;
     leafPaint.data = getPatternData(paint, box, image);
@@ -1478,40 +1472,32 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 const { abs } = Math;
-function checkImage(ui, canvas, paint, allowPaint) {
+function checkImage(ui, canvas, paint, allowDraw) {
     const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
-    const { pixelRatio } = canvas;
-    if (!paint.data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
+    const { pixelRatio } = canvas, { data } = paint;
+    if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
         return false;
     }
     else {
-        const { data } = paint;
-        if (allowPaint) {
-            if (!data.repeat) {
-                let { width, height } = data;
-                width *= abs(scaleX) * pixelRatio;
-                height *= abs(scaleY) * pixelRatio;
-                if (data.scaleX) {
-                    width *= data.scaleX;
-                    height *= data.scaleY;
-                }
-                allowPaint = (width * height > Platform.image.maxCacheSize) || Export.running;
+        if (allowDraw) {
+            if (data.repeat) {
+                allowDraw = false;
             }
             else {
-                allowPaint = false;
+                if (!(paint.changeful || ResizeEvent.isResizing(ui) || Export.running)) {
+                    let { width, height } = data;
+                    width *= abs(scaleX) * pixelRatio;
+                    height *= abs(scaleY) * pixelRatio;
+                    if (data.scaleX) {
+                        width *= data.scaleX;
+                        height *= data.scaleY;
+                    }
+                    allowDraw = (width * height > Platform.image.maxCacheSize);
+                }
             }
         }
-        if (allowPaint) {
-            canvas.save();
-            ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
-            if (paint.blendMode)
-                canvas.blendMode = paint.blendMode;
-            if (data.opacity)
-                canvas.opacity *= data.opacity;
-            if (data.transform)
-                canvas.transform(data.transform);
-            canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
-            canvas.restore();
+        if (allowDraw) {
+            drawImage(ui, canvas, paint, data);
             return true;
         }
         else {
@@ -1532,13 +1518,26 @@ function checkImage(ui, canvas, paint, allowPaint) {
         }
     }
 }
+function drawImage(ui, canvas, paint, data) {
+    canvas.save();
+    ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
+    if (paint.blendMode)
+        canvas.blendMode = paint.blendMode;
+    if (data.opacity)
+        canvas.opacity *= data.opacity;
+    if (data.transform)
+        canvas.transform(data.transform);
+    canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
+    canvas.restore();
+}
 
 function recycleImage(attrName, data) {
     const paints = data['_' + attrName];
     if (paints instanceof Array) {
-        let image, recycleMap, input, url;
+        let paint, image, recycleMap, input, url;
         for (let i = 0, len = paints.length; i < len; i++) {
-            image = paints[i].image;
+            paint = paints[i];
+            image = paint.image;
             url = image && image.url;
             if (url) {
                 if (!recycleMap)
@@ -1553,8 +1552,6 @@ function recycleImage(attrName, data) {
                     }
                     image.unload(paints[i].loadId, !input.some((item) => item.url === url));
                 }
-                else
-                    paints[i].style = null;
             }
         }
         return recycleMap;
@@ -1733,7 +1730,7 @@ const { toOffsetOutBounds } = BoundsHelper;
 const offsetOutBounds = {};
 function innerShadow(ui, current, shape) {
     let copyBounds, spreadScale;
-    const { __nowWorld: nowWorld, __layout: __layout } = ui;
+    const { __nowWorld: nowWorld, __layout } = ui;
     const { innerShadow } = ui.__;
     const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
     const other = current.getSameCanvas();