leafer-draw 1.6.3 → 1.6.4

package/dist/web.js

@@ -493,19 +493,19 @@ var LeaferUI = (function (exports) {
         },
         tempToInnerOf(t, matrix) {
             const { tempPoint: temp } = P$5;
-            copy$b(temp, t);
+            copy$a(temp, t);
             toInnerPoint$2(matrix, temp, temp);
             return temp;
         },
         tempToOuterOf(t, matrix) {
             const { tempPoint: temp } = P$5;
-            copy$b(temp, t);
+            copy$a(temp, t);
             toOuterPoint$3(matrix, temp, temp);
             return temp;
         },
         tempToInnerRadiusPointOf(t, matrix) {
             const { tempRadiusPoint: temp } = P$5;
-            copy$b(temp, t);
+            copy$a(temp, t);
             P$5.toInnerRadiusPointOf(t, matrix, temp);
             return temp;
         },
@@ -578,7 +578,7 @@ var LeaferUI = (function (exports) {
         }
     };
     const P$5 = PointHelper;
-    const { getDistanceFrom, copy: copy$b, getAtan2 } = P$5;
+    const { getDistanceFrom, copy: copy$a, getAtan2 } = P$5;
 
     class Point {
         constructor(x, y) {
@@ -935,7 +935,7 @@ var LeaferUI = (function (exports) {
                 to = t;
             }
             else {
-                copy$a(to, t);
+                copy$9(to, t);
             }
             if (parent) {
                 to.offsetX = -(B.maxX(parent) - t.x);
@@ -1093,7 +1093,7 @@ var LeaferUI = (function (exports) {
                     if (first) {
                         first = false;
                         if (!addMode)
-                            copy$a(t, bounds);
+                            copy$9(t, bounds);
                     }
                     else {
                         add$1(t, bounds);
@@ -1174,7 +1174,7 @@ var LeaferUI = (function (exports) {
         }
     };
     const B = BoundsHelper;
-    const { add: add$1, copy: copy$a } = B;
+    const { add: add$1, copy: copy$9 } = B;
 
     class Bounds {
         get minX() { return BoundsHelper.minX(this); }
@@ -2069,7 +2069,7 @@ var LeaferUI = (function (exports) {
         contextMethod()
     ], Canvas.prototype, "strokeText", null);
 
-    const { copy: copy$9, multiplyParent: multiplyParent$3 } = MatrixHelper, { round: round$1 } = Math;
+    const { copy: copy$8, multiplyParent: multiplyParent$3 } = MatrixHelper, { round: round$1 } = Math;
     const minSize = { width: 1, height: 1, pixelRatio: 1 };
     const canvasSizeAttrs = ['width', 'height', 'pixelRatio'];
     class LeaferCanvasBase extends Canvas {
@@ -2272,16 +2272,19 @@ var LeaferUI = (function (exports) {
             if (blendMode)
                 this.blendMode = 'source-over';
         }
-        clearWorld(bounds, ceilPixel) {
-            this.setTempBounds(bounds, ceilPixel);
-            this.clearRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
-        }
         clipWorld(bounds, ceilPixel) {
             this.beginPath();
             this.setTempBounds(bounds, ceilPixel);
             this.rect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
             this.clip();
         }
+        clipUI(ruleData) {
+            ruleData.windingRule ? this.clip(ruleData.windingRule) : this.clip();
+        }
+        clearWorld(bounds, ceilPixel) {
+            this.setTempBounds(bounds, ceilPixel);
+            this.clearRect(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
+        }
         clear() {
             const { pixelRatio } = this;
             this.clearRect(0, 0, this.width * pixelRatio + 2, this.height * pixelRatio + 2);
@@ -2301,7 +2304,7 @@ var LeaferUI = (function (exports) {
             const { size, pixelSnap } = this, canvas = this.manager ? this.manager.get(size) : Creator.canvas(Object.assign({}, size));
             canvas.save();
             if (useSameWorldTransform)
-                copy$9(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
+                copy$8(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
             if (useSameSmooth)
                 canvas.smooth = this.smooth;
             canvas.pixelSnap !== pixelSnap && (canvas.pixelSnap = pixelSnap);
@@ -2680,7 +2683,7 @@ var LeaferUI = (function (exports) {
     };
 
     const { M: M$4, m, L: L$5, l, H, h, V, v, C: C$3, c, S, s, Q: Q$3, q, T, t, A, a, Z: Z$4, z, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$3, P: P$3, U: U$3 } = PathCommandMap;
-    const { rect: rect$3, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
+    const { rect: rect$2, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
     const { ellipticalArc } = EllipseHelper;
     const debug$c = Debug.get('PathConvert');
     const setEndPoint$1 = {};
@@ -2877,7 +2880,7 @@ var LeaferUI = (function (exports) {
                     case N$3:
                         x = old[i + 1];
                         y = old[i + 2];
-                        curveMode ? rect$3(data, x, y, old[i + 3], old[i + 4]) : copyData(data, old, i, 5);
+                        curveMode ? rect$2(data, x, y, old[i + 3], old[i + 4]) : copyData(data, old, i, 5);
                         i += 5;
                         break;
                     case D$3:
@@ -3053,7 +3056,7 @@ var LeaferUI = (function (exports) {
     };
     const { ellipse: ellipse$3, arc: arc$2 } = PathCommandDataHelper;
 
-    const { moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo, bezierCurveTo, closePath: closePath$3, beginPath, rect: rect$2, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$2, drawEllipse, drawArc, drawPoints: drawPoints$2 } = PathCommandDataHelper;
+    const { moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo, bezierCurveTo, closePath: closePath$3, beginPath, rect: rect$1, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$2, drawEllipse, drawArc, drawPoints: drawPoints$2 } = PathCommandDataHelper;
     class PathCreator {
         set path(value) { this.__path = value; }
         get path() { return this.__path; }
@@ -3100,7 +3103,7 @@ var LeaferUI = (function (exports) {
             return this;
         }
         rect(x, y, width, height) {
-            rect$2(this.__path, x, y, width, height);
+            rect$1(this.__path, x, y, width, height);
             this.paint();
             return this;
         }
@@ -3218,7 +3221,7 @@ var LeaferUI = (function (exports) {
 
     const { M: M$1, L: L$2, C, Q, Z: Z$1, N, D, X, G, F: F$1, O, P, U } = PathCommandMap;
     const { toTwoPointBounds, toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc, ellipse: ellipse$1 } = BezierHelper;
-    const { addPointBounds, copy: copy$8, addPoint, setPoint, addBounds, toBounds: toBounds$2 } = TwoPointBoundsHelper;
+    const { addPointBounds, copy: copy$7, addPoint, setPoint, addBounds, toBounds: toBounds$2 } = TwoPointBoundsHelper;
     const debug$a = Debug.get('PathBounds');
     let radius, radiusX, radiusY;
     const tempPointBounds = {};
@@ -3290,7 +3293,7 @@ var LeaferUI = (function (exports) {
                         break;
                     case G:
                         ellipse$1(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], data[i + 7], data[i + 8], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 9;
@@ -3306,7 +3309,7 @@ var LeaferUI = (function (exports) {
                         break;
                     case O:
                         arc(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 7;
@@ -3321,7 +3324,7 @@ var LeaferUI = (function (exports) {
                         break;
                     case U:
                         arcTo$1(null, x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], tempPointBounds, setEndPoint);
-                        i === 0 ? copy$8(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
+                        i === 0 ? copy$7(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                         x = setEndPoint.x;
                         y = setEndPoint.y;
                         i += 6;
@@ -4257,8 +4260,8 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    const { copy: copy$7, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
-    const matrix$1 = {}, { round } = Math;
+    const { copy: copy$6, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+    const matrix = {}, { round } = Math;
     const LeafHelper = {
         updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
             if (checkAutoLayout && leaf.__hasAutoLayout && leaf.__layout.matrixChanged)
@@ -4353,13 +4356,13 @@ var LeaferUI = (function (exports) {
                     transition = scaleY;
                 scaleY = scaleX;
             }
-            copy$7(matrix$1, o);
-            scaleOfOuter$2(matrix$1, origin, scaleX, scaleY);
+            copy$6(matrix, o);
+            scaleOfOuter$2(matrix, origin, scaleX, scaleY);
             if (t.origin || t.around) {
-                L.setTransform(t, matrix$1, resize, transition);
+                L.setTransform(t, matrix, resize, transition);
             }
             else {
-                const x = t.x + matrix$1.e - o.e, y = t.y + matrix$1.f - o.f;
+                const x = t.x + matrix.e - o.e, y = t.y + matrix.f - o.f;
                 if (transition && !resize)
                     t.animate({ x, y, scaleX: t.scaleX * scaleX, scaleY: t.scaleY * scaleY }, transition);
                 else
@@ -4371,32 +4374,32 @@ var LeaferUI = (function (exports) {
         },
         rotateOfLocal(t, origin, angle, transition) {
             const o = t.__localMatrix;
-            copy$7(matrix$1, o);
-            rotateOfOuter$2(matrix$1, origin, angle);
+            copy$6(matrix, o);
+            rotateOfOuter$2(matrix, origin, angle);
             if (t.origin || t.around)
-                L.setTransform(t, matrix$1, false, transition);
+                L.setTransform(t, matrix, false, transition);
             else
-                t.set({ x: t.x + matrix$1.e - o.e, y: t.y + matrix$1.f - o.f, rotation: MathHelper.formatRotation(t.rotation + angle) }, transition);
+                t.set({ x: t.x + matrix.e - o.e, y: t.y + matrix.f - o.f, rotation: MathHelper.formatRotation(t.rotation + angle) }, transition);
         },
         skewOfWorld(t, origin, skewX, skewY, resize, transition) {
             L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize, transition);
         },
         skewOfLocal(t, origin, skewX, skewY = 0, resize, transition) {
-            copy$7(matrix$1, t.__localMatrix);
-            skewOfOuter(matrix$1, origin, skewX, skewY);
-            L.setTransform(t, matrix$1, resize, transition);
+            copy$6(matrix, t.__localMatrix);
+            skewOfOuter(matrix, origin, skewX, skewY);
+            L.setTransform(t, matrix, resize, transition);
         },
         transformWorld(t, transform, resize, transition) {
-            copy$7(matrix$1, t.worldTransform);
-            multiplyParent$2(matrix$1, transform);
+            copy$6(matrix, t.worldTransform);
+            multiplyParent$2(matrix, transform);
             if (t.parent)
-                divideParent(matrix$1, t.parent.worldTransform);
-            L.setTransform(t, matrix$1, resize, transition);
+                divideParent(matrix, t.parent.worldTransform);
+            L.setTransform(t, matrix, resize, transition);
         },
         transform(t, transform, resize, transition) {
-            copy$7(matrix$1, t.localTransform);
-            multiplyParent$2(matrix$1, transform);
-            L.setTransform(t, matrix$1, resize, transition);
+            copy$6(matrix, t.localTransform);
+            multiplyParent$2(matrix, transform);
+            L.setTransform(t, matrix, resize, transition);
         },
         setTransform(t, transform, resize, transition) {
             const data = t.__, originPoint = data.origin && L.getInnerOrigin(t, data.origin);
@@ -4430,9 +4433,9 @@ var LeaferUI = (function (exports) {
             return innerOrigin;
         },
         getRelativeWorld(t, relative, temp) {
-            copy$7(matrix$1, t.worldTransform);
-            divideParent(matrix$1, relative.worldTransform);
-            return temp ? matrix$1 : Object.assign({}, matrix$1);
+            copy$6(matrix, t.worldTransform);
+            divideParent(matrix, relative.worldTransform);
+            return temp ? matrix : Object.assign({}, matrix);
         },
         drop(t, parent, index, resize) {
             t.setTransform(L.getRelativeWorld(t, parent, true), resize);
@@ -4571,7 +4574,7 @@ var LeaferUI = (function (exports) {
     };
 
     const { getRelativeWorld: getRelativeWorld$1, updateBounds: updateBounds$2 } = LeafHelper;
-    const { toOuterOf: toOuterOf$2, getPoints, copy: copy$6 } = BoundsHelper;
+    const { toOuterOf: toOuterOf$2, getPoints, copy: copy$5 } = BoundsHelper;
     const localContent = '_localContentBounds';
     const worldContent = '_worldContentBounds', worldBox = '_worldBoxBounds', worldStroke = '_worldStrokeBounds';
     class LeafLayout {
@@ -4731,7 +4734,7 @@ var LeaferUI = (function (exports) {
             }
             if (!layoutBounds)
                 layoutBounds = MatrixHelper.getLayout(matrix);
-            copy$6(layoutBounds, bounds);
+            copy$5(layoutBounds, bounds);
             PointHelper.copy(layoutBounds, point);
             if (unscale) {
                 const { scaleX, scaleY } = layoutBounds;
@@ -5285,7 +5288,7 @@ var LeaferUI = (function (exports) {
 
     const { updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2 } = LeafHelper;
     const { updateBounds: updateBounds$1 } = BranchHelper;
-    const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$5 } = BoundsHelper;
+    const { toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$4 } = BoundsHelper;
     const { toBounds: toBounds$1 } = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
@@ -5416,7 +5419,7 @@ var LeaferUI = (function (exports) {
         },
         __updateRenderBounds() {
             const layout = this.__layout;
-            layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$5(layout.renderBounds, layout.strokeBounds);
+            layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$4(layout.renderBounds, layout.strokeBounds);
         }
     };
 
@@ -5450,7 +5453,7 @@ var LeaferUI = (function (exports) {
             if (this.__worldOpacity) {
                 canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
                 this.__drawRenderPath(canvas);
-                this.windingRule ? canvas.clip(this.windingRule) : canvas.clip();
+                canvas.clipUI(this);
             }
         },
         __updateWorldOpacity() {
@@ -5521,7 +5524,7 @@ var LeaferUI = (function (exports) {
     const { LEAF, create } = IncrementId;
     const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
     const { toOuterOf } = BoundsHelper;
-    const { copy: copy$4, move } = PointHelper;
+    const { copy: copy$3, move } = PointHelper;
     const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
     exports.Leaf = class Leaf {
         get tag() { return this.__tag; }
@@ -5734,7 +5737,7 @@ var LeaferUI = (function (exports) {
             }
             else {
                 if (to)
-                    copy$4(to, world);
+                    copy$3(to, world);
             }
         }
         localToWorld(local, to, distance, relative) {
@@ -5743,7 +5746,7 @@ var LeaferUI = (function (exports) {
             }
             else {
                 if (to)
-                    copy$4(to, local);
+                    copy$3(to, local);
             }
         }
         worldToInner(world, to, distance, relative) {
@@ -6233,7 +6236,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.6.3";
+    const version = "1.6.4";
 
     const debug$4 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -7553,7 +7556,7 @@ var LeaferUI = (function (exports) {
         __drawAfterFill(canvas, options) {
             if (this.__.__clipAfterFill) {
                 canvas.save();
-                this.windingRule ? canvas.clip(this.windingRule) : canvas.clip();
+                canvas.clipUI();
                 this.__drawContent(canvas, options);
                 canvas.restore();
             }
@@ -8419,8 +8422,8 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Rect);
 
-    const { copy: copy$3, add, includes: includes$1 } = BoundsHelper;
-    const rect$1 = exports.Rect.prototype, group = exports.Group.prototype;
+    const { copy: copy$2, add, includes: includes$1 } = BoundsHelper;
+    const rect = exports.Rect.prototype, group = exports.Group.prototype;
     const childrenRenderBounds = {};
     exports.Box = class Box extends exports.Group {
         get __tag() { return 'Box'; }
@@ -8465,7 +8468,7 @@ var LeaferUI = (function (exports) {
             const { renderBounds } = this.__layout;
             if (this.children.length) {
                 super.__updateRenderBounds();
-                copy$3(childrenRenderBounds, renderBounds);
+                copy$2(childrenRenderBounds, renderBounds);
                 this.__updateRectRenderBounds();
                 isOverflow = !includes$1(renderBounds, childrenRenderBounds);
                 if (isOverflow && this.__.overflow !== 'hide')
@@ -8517,25 +8520,25 @@ var LeaferUI = (function (exports) {
         affectRenderBoundsType('show')
     ], exports.Box.prototype, "overflow", void 0);
     __decorate([
-        rewrite(rect$1.__updateStrokeSpread)
+        rewrite(rect.__updateStrokeSpread)
     ], exports.Box.prototype, "__updateStrokeSpread", null);
     __decorate([
-        rewrite(rect$1.__updateRenderSpread)
+        rewrite(rect.__updateRenderSpread)
     ], exports.Box.prototype, "__updateRectRenderSpread", null);
     __decorate([
-        rewrite(rect$1.__updateBoxBounds)
+        rewrite(rect.__updateBoxBounds)
     ], exports.Box.prototype, "__updateRectBoxBounds", null);
     __decorate([
-        rewrite(rect$1.__updateStrokeBounds)
+        rewrite(rect.__updateStrokeBounds)
     ], exports.Box.prototype, "__updateStrokeBounds", null);
     __decorate([
-        rewrite(rect$1.__updateRenderBounds)
+        rewrite(rect.__updateRenderBounds)
     ], exports.Box.prototype, "__updateRectRenderBounds", null);
     __decorate([
-        rewrite(rect$1.__updateChange)
+        rewrite(rect.__updateChange)
     ], exports.Box.prototype, "__updateRectChange", null);
     __decorate([
-        rewrite(rect$1.__render)
+        rewrite(rect.__render)
     ], exports.Box.prototype, "__renderRect", null);
     __decorate([
         rewrite(group.__render)
@@ -9038,6 +9041,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType('show')
     ], exports.Text.prototype, "textOverflow", void 0);
+    __decorate([
+        surfaceType(false)
+    ], exports.Text.prototype, "textEditing", void 0);
     exports.Text = __decorate([
         registerUI()
     ], exports.Text);
@@ -9169,531 +9175,6 @@ var LeaferUI = (function (exports) {
         ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
     }
 
-    let App = class App extends exports.Leafer {
-        get __tag() { return 'App'; }
-        get isApp() { return true; }
-        constructor(userConfig, data) {
-            super(userConfig, data);
-        }
-        init(userConfig, parentApp) {
-            super.init(userConfig, parentApp);
-            if (userConfig) {
-                const { ground, tree, sky, editor } = userConfig;
-                if (ground)
-                    this.ground = this.addLeafer(ground);
-                if (tree || editor)
-                    this.tree = this.addLeafer(tree || { type: userConfig.type || 'design' });
-                if (sky || editor)
-                    this.sky = this.addLeafer(sky);
-                if (editor)
-                    Creator.editor(editor, this);
-            }
-        }
-        __setApp() {
-            const { canvas } = this;
-            const { realCanvas, view } = this.config;
-            if (realCanvas || view === this.canvas.view || !canvas.parentView)
-                this.realCanvas = true;
-            else
-                canvas.unrealCanvas();
-            this.leafer = this;
-            this.watcher.disable();
-            this.layouter.disable();
-        }
-        __updateLocalBounds() {
-            this.forEach(leafer => leafer.updateLayout());
-            super.__updateLocalBounds();
-        }
-        start() {
-            super.start();
-            this.forEach(leafer => leafer.start());
-        }
-        stop() {
-            this.forEach(leafer => leafer.stop());
-            super.stop();
-        }
-        unlockLayout() {
-            super.unlockLayout();
-            this.forEach(leafer => leafer.unlockLayout());
-        }
-        lockLayout() {
-            super.lockLayout();
-            this.forEach(leafer => leafer.lockLayout());
-        }
-        forceRender(bounds, sync) {
-            this.forEach(leafer => leafer.forceRender(bounds, sync));
-        }
-        addLeafer(merge) {
-            const leafer = new exports.Leafer(merge);
-            this.add(leafer);
-            return leafer;
-        }
-        add(leafer, index) {
-            if (!leafer.view) {
-                if (this.realCanvas && !this.canvas.bounds) {
-                    setTimeout(() => this.add(leafer, index), 10);
-                    return;
-                }
-                leafer.init(this.__getChildConfig(leafer.userConfig), this);
-            }
-            super.add(leafer, index);
-            if (index !== undefined)
-                leafer.canvas.childIndex = index;
-            this.__listenChildEvents(leafer);
-        }
-        forEach(fn) {
-            this.children.forEach(fn);
-        }
-        __onCreated() {
-            this.created = this.children.every(child => child.created);
-        }
-        __onReady() {
-            if (this.children.every(child => child.ready))
-                super.__onReady();
-        }
-        __onViewReady() {
-            if (this.children.every(child => child.viewReady))
-                super.__onViewReady();
-        }
-        __onChildRenderEnd(e) {
-            this.renderer.addBlock(e.renderBounds);
-            if (this.viewReady)
-                this.renderer.update();
-        }
-        __render(canvas, options) {
-            if (canvas.context)
-                this.forEach(leafer => options.matrix ? leafer.__render(canvas, options) : canvas.copyWorld(leafer.canvas, options && options.bounds));
-        }
-        __onResize(event) {
-            this.forEach(leafer => leafer.resize(event));
-            super.__onResize(event);
-        }
-        updateLayout() {
-            this.forEach(leafer => leafer.updateLayout());
-        }
-        __getChildConfig(userConfig) {
-            const config = Object.assign({}, this.config);
-            config.hittable = config.realCanvas = undefined;
-            if (userConfig)
-                DataHelper.assign(config, userConfig);
-            if (this.autoLayout)
-                DataHelper.copyAttrs(config, this, canvasSizeAttrs);
-            config.view = this.realCanvas ? undefined : this.view;
-            config.fill = undefined;
-            return config;
-        }
-        __listenChildEvents(leafer) {
-            leafer.once([
-                [LayoutEvent.END, this.__onReady, this],
-                [RenderEvent.START, this.__onCreated, this],
-                [RenderEvent.END, this.__onViewReady, this]
-            ]);
-            if (this.realCanvas)
-                this.__eventIds.push(leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this));
-        }
-    };
-    App = __decorate([
-        registerUI()
-    ], App);
-
-    const downKeyMap = {};
-    const Keyboard = {
-        isHoldSpaceKey() {
-            return Keyboard.isHold('Space');
-        },
-        isHold(code) {
-            return downKeyMap[code];
-        },
-        setDownCode(code) {
-            if (!downKeyMap[code])
-                downKeyMap[code] = true;
-        },
-        setUpCode(code) {
-            downKeyMap[code] = false;
-        }
-    };
-
-    const PointerButton = {
-        LEFT: 1,
-        RIGHT: 2,
-        MIDDLE: 4,
-        defaultLeft(event) { if (!event.buttons)
-            event.buttons = 1; },
-        left(event) { return event.buttons === 1; },
-        right(event) { return event.buttons === 2; },
-        middle(event) { return event.buttons === 4; }
-    };
-
-    class UIEvent extends Event {
-        get spaceKey() { return Keyboard.isHoldSpaceKey(); }
-        get left() { return PointerButton.left(this); }
-        get right() { return PointerButton.right(this); }
-        get middle() { return PointerButton.middle(this); }
-        constructor(params) {
-            super(params.type);
-            this.bubbles = true;
-            Object.assign(this, params);
-        }
-        getBoxPoint(relative) {
-            return (relative || this.current).getBoxPoint(this);
-        }
-        getInnerPoint(relative) {
-            return (relative || this.current).getInnerPoint(this);
-        }
-        getLocalPoint(relative) {
-            return (relative || this.current).getLocalPoint(this);
-        }
-        getPagePoint() {
-            return this.current.getPagePoint(this);
-        }
-        getInner(relative) { return this.getInnerPoint(relative); }
-        getLocal(relative) { return this.getLocalPoint(relative); }
-        getPage() { return this.getPagePoint(); }
-        static changeName(oldName, newName) {
-            EventCreator.changeName(oldName, newName);
-        }
-    }
-
-    let PointerEvent$1 = class PointerEvent extends UIEvent {
-    };
-    PointerEvent$1.POINTER = 'pointer';
-    PointerEvent$1.BEFORE_DOWN = 'pointer.before_down';
-    PointerEvent$1.BEFORE_MOVE = 'pointer.before_move';
-    PointerEvent$1.BEFORE_UP = 'pointer.before_up';
-    PointerEvent$1.DOWN = 'pointer.down';
-    PointerEvent$1.MOVE = 'pointer.move';
-    PointerEvent$1.UP = 'pointer.up';
-    PointerEvent$1.OVER = 'pointer.over';
-    PointerEvent$1.OUT = 'pointer.out';
-    PointerEvent$1.ENTER = 'pointer.enter';
-    PointerEvent$1.LEAVE = 'pointer.leave';
-    PointerEvent$1.TAP = 'tap';
-    PointerEvent$1.DOUBLE_TAP = 'double_tap';
-    PointerEvent$1.CLICK = 'click';
-    PointerEvent$1.DOUBLE_CLICK = 'double_click';
-    PointerEvent$1.LONG_PRESS = 'long_press';
-    PointerEvent$1.LONG_TAP = 'long_tap';
-    PointerEvent$1.MENU = 'pointer.menu';
-    PointerEvent$1.MENU_TAP = 'pointer.menu_tap';
-    PointerEvent$1 = __decorate([
-        registerUIEvent()
-    ], PointerEvent$1);
-
-    const tempMove = {};
-    let DragEvent$1 = class DragEvent extends PointerEvent$1 {
-        static setList(data) {
-            this.list = data instanceof LeafList ? data : new LeafList(data);
-        }
-        static setData(data) {
-            this.data = data;
-        }
-        static getValidMove(leaf, start, total) {
-            const { draggable, dragBounds } = leaf, move = leaf.getLocalPoint(total, null, true);
-            PointHelper.move(move, start.x - leaf.x, start.y - leaf.y);
-            if (dragBounds)
-                this.getMoveInDragBounds(leaf.__localBoxBounds, dragBounds === 'parent' ? leaf.parent.boxBounds : dragBounds, move, true);
-            if (draggable === 'x')
-                move.y = 0;
-            if (draggable === 'y')
-                move.x = 0;
-            return move;
-        }
-        static getMoveInDragBounds(childBox, dragBounds, move, change) {
-            const x = childBox.x + move.x, y = childBox.y + move.y, right = x + childBox.width, bottom = y + childBox.height;
-            const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
-            if (!change)
-                move = Object.assign({}, move);
-            if (BoundsHelper.includes(childBox, dragBounds)) {
-                if (x > dragBounds.x)
-                    move.x += dragBounds.x - x;
-                else if (right < boundsRight)
-                    move.x += boundsRight - right;
-                if (y > dragBounds.y)
-                    move.y += dragBounds.y - y;
-                else if (bottom < boundsBottom)
-                    move.y += boundsBottom - bottom;
-            }
-            else {
-                if (x < dragBounds.x)
-                    move.x += dragBounds.x - x;
-                else if (right > boundsRight)
-                    move.x += boundsRight - right;
-                if (y < dragBounds.y)
-                    move.y += dragBounds.y - y;
-                else if (bottom > boundsBottom)
-                    move.y += boundsBottom - bottom;
-            }
-            return move;
-        }
-        getPageMove(total) {
-            this.assignMove(total);
-            return this.current.getPagePoint(tempMove, null, true);
-        }
-        getInnerMove(relative, total) {
-            if (!relative)
-                relative = this.current;
-            this.assignMove(total);
-            return relative.getInnerPoint(tempMove, null, true);
-        }
-        getLocalMove(relative, total) {
-            if (!relative)
-                relative = this.current;
-            this.assignMove(total);
-            return relative.getLocalPoint(tempMove, null, true);
-        }
-        getPageTotal() {
-            return this.getPageMove(true);
-        }
-        getInnerTotal(relative) {
-            return this.getInnerMove(relative, true);
-        }
-        getLocalTotal(relative) {
-            return this.getLocalMove(relative, true);
-        }
-        getPageBounds() {
-            const total = this.getPageTotal(), start = this.getPagePoint(), bounds = {};
-            BoundsHelper.set(bounds, start.x - total.x, start.y - total.y, total.x, total.y);
-            BoundsHelper.unsign(bounds);
-            return bounds;
-        }
-        assignMove(total) {
-            tempMove.x = total ? this.totalX : this.moveX;
-            tempMove.y = total ? this.totalY : this.moveY;
-        }
-    };
-    DragEvent$1.BEFORE_DRAG = 'drag.before_drag';
-    DragEvent$1.START = 'drag.start';
-    DragEvent$1.DRAG = 'drag';
-    DragEvent$1.END = 'drag.end';
-    DragEvent$1.OVER = 'drag.over';
-    DragEvent$1.OUT = 'drag.out';
-    DragEvent$1.ENTER = 'drag.enter';
-    DragEvent$1.LEAVE = 'drag.leave';
-    DragEvent$1 = __decorate([
-        registerUIEvent()
-    ], DragEvent$1);
-
-    let DropEvent = class DropEvent extends PointerEvent$1 {
-        static setList(data) {
-            DragEvent$1.setList(data);
-        }
-        static setData(data) {
-            DragEvent$1.setData(data);
-        }
-    };
-    DropEvent.DROP = 'drop';
-    DropEvent = __decorate([
-        registerUIEvent()
-    ], DropEvent);
-
-    let MoveEvent = class MoveEvent extends DragEvent$1 {
-    };
-    MoveEvent.BEFORE_MOVE = 'move.before_move';
-    MoveEvent.START = 'move.start';
-    MoveEvent.MOVE = 'move';
-    MoveEvent.END = 'move.end';
-    MoveEvent = __decorate([
-        registerUIEvent()
-    ], MoveEvent);
-
-    let RotateEvent = class RotateEvent extends PointerEvent$1 {
-    };
-    RotateEvent.BEFORE_ROTATE = 'rotate.before_rotate';
-    RotateEvent.START = 'rotate.start';
-    RotateEvent.ROTATE = 'rotate';
-    RotateEvent.END = 'rotate.end';
-    RotateEvent = __decorate([
-        registerUIEvent()
-    ], RotateEvent);
-
-    let SwipeEvent = class SwipeEvent extends DragEvent$1 {
-    };
-    SwipeEvent.SWIPE = 'swipe';
-    SwipeEvent.LEFT = 'swipe.left';
-    SwipeEvent.RIGHT = 'swipe.right';
-    SwipeEvent.UP = 'swipe.up';
-    SwipeEvent.DOWN = 'swipe.down';
-    SwipeEvent = __decorate([
-        registerUIEvent()
-    ], SwipeEvent);
-
-    let ZoomEvent = class ZoomEvent extends PointerEvent$1 {
-    };
-    ZoomEvent.BEFORE_ZOOM = 'zoom.before_zoom';
-    ZoomEvent.START = 'zoom.start';
-    ZoomEvent.ZOOM = 'zoom';
-    ZoomEvent.END = 'zoom.end';
-    ZoomEvent = __decorate([
-        registerUIEvent()
-    ], ZoomEvent);
-
-    let KeyEvent = class KeyEvent extends UIEvent {
-    };
-    KeyEvent.DOWN = 'key.down';
-    KeyEvent.HOLD = 'key.hold';
-    KeyEvent.UP = 'key.up';
-    KeyEvent = __decorate([
-        registerUIEvent()
-    ], KeyEvent);
-
-    new LeafList();
-
-    Debug.get('emit');
-
-    const { toInnerRadiusPointOf, copy: copy$2, setRadius } = PointHelper;
-    const inner = {};
-    const leaf = exports.Leaf.prototype;
-    leaf.__hitWorld = function (point) {
-        const data = this.__;
-        if (!data.hitSelf)
-            return false;
-        const world = this.__world, layout = this.__layout;
-        const isSmall = world.width < 10 && world.height < 10;
-        if (data.hitRadius) {
-            copy$2(inner, point), point = inner;
-            setRadius(point, data.hitRadius);
-        }
-        toInnerRadiusPointOf(point, world, inner);
-        if (data.hitBox || isSmall) {
-            if (BoundsHelper.hitRadiusPoint(layout.boxBounds, inner))
-                return true;
-            if (isSmall)
-                return false;
-        }
-        if (layout.hitCanvasChanged || !this.__hitCanvas) {
-            this.__updateHitCanvas();
-            if (!layout.boundsChanged)
-                layout.hitCanvasChanged = false;
-        }
-        return this.__hit(inner);
-    };
-    leaf.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitFill(inner, this.__.windingRule); };
-    leaf.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitStroke(inner, strokeWidth); };
-    leaf.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
-    leaf.__drawHitPath = function (canvas) { if (canvas)
-        this.__drawRenderPath(canvas); };
-
-    const matrix = new Matrix();
-    const ui$1 = exports.UI.prototype;
-    ui$1.__updateHitCanvas = function () {
-        if (this.__box)
-            this.__box.__updateHitCanvas();
-        const data = this.__, { hitCanvasManager } = this.leafer || this.parent.leafer;
-        const isHitPixelFill = (data.__isAlphaPixelFill || data.__isCanvas) && data.hitFill === 'pixel';
-        const isHitPixelStroke = data.__isAlphaPixelStroke && data.hitStroke === 'pixel';
-        const isHitPixel = isHitPixelFill || isHitPixelStroke;
-        if (!this.__hitCanvas)
-            this.__hitCanvas = isHitPixel ? hitCanvasManager.getPixelType(this, { contextSettings: { willReadFrequently: true } }) : hitCanvasManager.getPathType(this);
-        const h = this.__hitCanvas;
-        if (isHitPixel) {
-            const { renderBounds } = this.__layout;
-            const size = Platform.image.hitCanvasSize;
-            const scale = h.hitScale = tempBounds$1.set(0, 0, size, size).getFitMatrix(renderBounds).a;
-            const { x, y, width, height } = tempBounds$1.set(renderBounds).scale(scale);
-            h.resize({ width, height, pixelRatio: 1 });
-            h.clear();
-            ImageManager.patternLocked = true;
-            this.__renderShape(h, { matrix: matrix.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y) }, !isHitPixelFill, !isHitPixelStroke);
-            ImageManager.patternLocked = false;
-            h.resetTransform();
-            data.__isHitPixel = true;
-        }
-        else {
-            data.__isHitPixel && (data.__isHitPixel = false);
-        }
-        this.__drawHitPath(h);
-        h.setStrokeOptions(data);
-    };
-    ui$1.__hit = function (inner) {
-        if (this.__box && this.__box.__hit(inner))
-            return true;
-        const data = this.__;
-        if (data.__isHitPixel && this.__hitPixel(inner))
-            return true;
-        const { hitFill } = data;
-        const needHitFillPath = ((data.fill || data.__isCanvas) && (hitFill === 'path' || (hitFill === 'pixel' && !(data.__isAlphaPixelFill || data.__isCanvas)))) || hitFill === 'all';
-        if (needHitFillPath && this.__hitFill(inner))
-            return true;
-        const { hitStroke, __strokeWidth } = data;
-        const needHitStrokePath = (data.stroke && (hitStroke === 'path' || (hitStroke === 'pixel' && !data.__isAlphaPixelStroke))) || hitStroke === 'all';
-        if (!needHitFillPath && !needHitStrokePath)
-            return false;
-        const radiusWidth = inner.radiusX * 2;
-        let hitWidth = radiusWidth;
-        if (needHitStrokePath) {
-            switch (data.strokeAlign) {
-                case 'inside':
-                    hitWidth += __strokeWidth * 2;
-                    if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
-                        return true;
-                    hitWidth = radiusWidth;
-                    break;
-                case 'center':
-                    hitWidth += __strokeWidth;
-                    break;
-                case 'outside':
-                    hitWidth += __strokeWidth * 2;
-                    if (!needHitFillPath) {
-                        if (!this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
-                            return true;
-                        hitWidth = radiusWidth;
-                    }
-                    break;
-            }
-        }
-        return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
-    };
-
-    const ui = exports.UI.prototype, rect = exports.Rect.prototype, box$1 = exports.Box.prototype;
-    rect.__updateHitCanvas = box$1.__updateHitCanvas = function () {
-        if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
-            ui.__updateHitCanvas.call(this);
-        else if (this.__hitCanvas)
-            this.__hitCanvas = null;
-    };
-    rect.__hitFill = box$1.__hitFill = function (inner) {
-        return this.__hitCanvas ? ui.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
-    };
-
-    exports.Text.prototype.__drawHitPath = function (canvas) {
-        const { __lineHeight, fontSize, __baseLine, __letterSpacing, __textDrawData: data } = this.__;
-        canvas.beginPath();
-        if (__letterSpacing < 0)
-            this.__drawPathByBox(canvas);
-        else
-            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
-    };
-
-    function getSelector(ui) {
-        return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
-    }
-    exports.Group.prototype.pick = function (hitPoint, options) {
-        options || (options = emptyData);
-        this.updateLayout();
-        return getSelector(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this }));
-    };
-
-    const canvas = LeaferCanvasBase.prototype;
-    canvas.hitFill = function (point, fillRule) {
-        return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
-    };
-    canvas.hitStroke = function (point, strokeWidth) {
-        this.strokeWidth = strokeWidth;
-        return this.context.isPointInStroke(point.x, point.y);
-    };
-    canvas.hitPixel = function (radiusPoint, offset, scale = 1) {
-        let { x, y, radiusX, radiusY } = radiusPoint;
-        if (offset)
-            x -= offset.x, y -= offset.y;
-        tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
-        const { data } = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width || 1, tempBounds$1.height || 1);
-        for (let i = 0, len = data.length; i < len; i += 4) {
-            if (data[i + 3] > 0)
-                return true;
-        }
-        return data[3] > 0;
-    };
-
     function strokeText(stroke, ui, canvas) {
         switch (ui.__.strokeAlign) {
             case 'center':
@@ -9719,11 +9200,14 @@ var LeaferUI = (function (exports) {
         out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
         fillText(ui, out);
         out.blendMode = 'normal';
+        copyWorld(canvas, out, ui);
+        out.recycle(ui.__nowWorld);
+    }
+    function copyWorld(canvas, out, ui) {
         if (ui.__worldFlipped || Platform.fullImageShadow)
             canvas.copyWorldByReset(out, ui.__nowWorld);
         else
             canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-        out.recycle(ui.__nowWorld);
     }
     function drawTextStroke(ui, canvas) {
         let row, data = ui.__.__textDrawData;
@@ -9792,9 +9276,8 @@ var LeaferUI = (function (exports) {
             Paint.strokeArrow(stroke, ui, canvas);
     }
     function drawInside(stroke, ui, canvas) {
-        const data = ui.__;
         canvas.save();
-        data.windingRule ? canvas.clip(data.windingRule) : canvas.clip();
+        canvas.clipUI(ui);
         drawCenter(stroke, 2, ui, canvas);
         canvas.restore();
     }
@@ -9808,12 +9291,9 @@ var LeaferUI = (function (exports) {
             const out = canvas.getSameCanvas(true, true);
             ui.__drawRenderPath(out);
             drawCenter(stroke, 2, ui, out);
-            data.windingRule ? out.clip(data.windingRule) : out.clip();
+            out.clipUI(data);
             out.clearWorld(renderBounds);
-            if (ui.__worldFlipped || Platform.fullImageShadow)
-                canvas.copyWorldByReset(out, ui.__nowWorld);
-            else
-                canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
+            copyWorld(canvas, out, ui);
             out.recycle(ui.__nowWorld);
         }
     }
@@ -9869,9 +9349,7 @@ var LeaferUI = (function (exports) {
             paints = [paints];
         recycleMap = PaintImage.recycleImage(attrName, data);
         for (let i = 0, len = paints.length, item; i < len; i++) {
-            item = getLeafPaint(attrName, paints[i], ui);
-            if (item)
-                leafPaints.push(item);
+            (item = getLeafPaint(attrName, paints[i], ui)) && leafPaints.push(item);
         }
         data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
         if (leafPaints.length) {
@@ -9909,8 +9387,8 @@ var LeaferUI = (function (exports) {
                 data = PaintGradient.conicGradient(paint, boxBounds);
                 break;
             case 'solid':
-                const { type, blendMode, color, opacity } = paint;
-                data = { type, blendMode, style: ColorConvert.string(color, opacity) };
+                const { type, color, opacity } = paint;
+                data = { type, style: ColorConvert.string(color, opacity) };
                 break;
             default:
                 if (paint.r !== undefined)
@@ -10287,7 +9765,7 @@ var LeaferUI = (function (exports) {
     }
     function drawImage(ui, canvas, paint, data) {
         canvas.save();
-        ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
+        canvas.clipUI(ui);
         if (paint.blendMode)
             canvas.blendMode = paint.blendMode;
         if (data.opacity)
@@ -10452,12 +9930,10 @@ var LeaferUI = (function (exports) {
                 }
                 worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
             }
-            if (ui.__worldFlipped) {
+            if (ui.__worldFlipped)
                 current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-            }
-            else {
+            else
                 current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
-            }
             if (end && index < end)
                 other.clearWorld(copyBounds, true);
         });
@@ -10516,12 +9992,10 @@ var LeaferUI = (function (exports) {
                 copyBounds = bounds;
             }
             other.fillWorld(copyBounds, ColorConvert.string(item.color), 'source-in');
-            if (ui.__worldFlipped) {
+            if (ui.__worldFlipped)
                 current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-            }
-            else {
+            else
                 current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
-            }
             if (end && index < end)
                 other.clearWorld(copyBounds, true);
         });