@leafer/miniapp 2.1.11 → 2.2.1

package/dist/miniapp.module.js

@@ -735,7 +735,7 @@ const {float: float$5} = MathHelper;
 
 const {toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$4} = MatrixHelper;
 
-const {sin: sin$5, cos: cos$5, abs: abs$c, sqrt: sqrt$4, atan2: atan2$2, min: min$3, round: round$5} = Math;
+const {sin: sin$5, cos: cos$5, abs: abs$d, sqrt: sqrt$4, atan2: atan2$2, min: min$3, round: round$5} = Math;
 
 const PointHelper = {
     defaultPoint: getPointData(),
@@ -817,6 +817,11 @@ const PointHelper = {
     toOuterOf(t, matrix, to) {
         toOuterPoint$4(matrix, t, to);
     },
+    toVertical(t, rotation, verticalDistance, to) {
+        const r = rotation * OneRadian;
+        t.x += -Math.sin(r) * verticalDistance;
+        t.y += Math.cos(r) * verticalDistance;
+    },
     getCenter(t, to) {
         return {
             x: t.x + (to.x - t.x) / 2,
@@ -833,8 +838,8 @@ const PointHelper = {
         return getDistanceFrom(t.x, t.y, point.x, point.y);
     },
     getDistanceFrom(x1, y1, x2, y2) {
-        const x = abs$c(x2 - x1);
-        const y = abs$c(y2 - y1);
+        const x = abs$d(x2 - x1);
+        const y = abs$d(y2 - y1);
         return sqrt$4(x * x + y * y);
     },
     getMinDistanceFrom(x1, y1, x2, y2, x3, y3) {
@@ -1860,7 +1865,7 @@ function getNameList(name) {
 
 const D$7 = Debug;
 
-const debug$i = Debug.get("RunTime");
+const debug$j = Debug.get("RunTime");
 
 const Run = {
     currentId: 0,
@@ -1879,7 +1884,7 @@ const Run = {
         const time = R$1.idMap[id], name = R$1.nameMap[id];
         const duration = microsecond ? (performance.now() - time) / 1e3 : Date.now() - time;
         R$1.idMap[id] = R$1.nameMap[id] = R$1.nameToIdMap[name] = undefined;
-        debug$i.log(name, duration, "ms");
+        debug$j.log(name, duration, "ms");
     },
     endOfName(name, microsecond) {
         const id = R$1.nameToIdMap[name];
@@ -1915,18 +1920,18 @@ const Creator = {
     }
 };
 
-const debug$h = Debug.get("UICreator");
+const debug$i = Debug.get("UICreator");
 
 const UICreator = {
     list: {},
     register(UI) {
         const {__tag: tag} = UI.prototype;
-        if (list$3[tag]) debug$h.repeat(tag);
+        if (list$3[tag]) debug$i.repeat(tag);
         list$3[tag] = UI;
     },
     get(tag, data, x, y, width, height) {
         if (!list$3[tag]) {
-            debug$h.warn("not register " + tag);
+            debug$i.warn("not register " + tag);
             return undefined;
         }
         const ui = new list$3[tag](data);
@@ -1942,7 +1947,7 @@ const UICreator = {
 
 const {list: list$3} = UICreator;
 
-const debug$g = Debug.get("EventCreator");
+const debug$h = Debug.get("EventCreator");
 
 const EventCreator = {
     nameList: {},
@@ -1950,7 +1955,7 @@ const EventCreator = {
         let name;
         Object.keys(Event).forEach(key => {
             name = Event[key];
-            if (isString(name)) nameList[name] && debug$g.repeat(name), nameList[name] = Event;
+            if (isString(name)) nameList[name] && debug$h.repeat(name), nameList[name] = Event;
         });
     },
     changeName(oldName, newName) {
@@ -2702,7 +2707,7 @@ const RectHelper = {
     }
 };
 
-const {sin: sin$4, cos: cos$4, hypot: hypot$1, atan2: atan2$1, ceil: ceil$1, abs: abs$b, PI: PI$3, sqrt: sqrt$3, pow: pow$1} = Math;
+const {sin: sin$4, cos: cos$4, hypot: hypot$1, atan2: atan2$1, ceil: ceil$1, abs: abs$c, PI: PI$3, sqrt: sqrt$3, pow: pow$1} = Math;
 
 const {setPoint: setPoint$4, addPoint: addPoint$2} = TwoPointBoundsHelper;
 
@@ -2779,7 +2784,7 @@ const BezierHelper = {
         const lenCB = hypot$1(CBx, CBy);
         let totalRadian = endRadian - startRadian;
         if (totalRadian < 0) totalRadian += PI2;
-        if (lenBA < 1e-12 || lenCB < 1e-12 || totalRadian < 1e-12 || abs$b(totalRadian - PI$3) < 1e-12) {
+        if (lenBA < 1e-12 || lenCB < 1e-12 || totalRadian < 1e-12 || abs$c(totalRadian - PI$3) < 1e-12) {
             if (data) data.push(L$b, x1, y1);
             if (setPointBounds) {
                 setPoint$4(setPointBounds, fromX, fromY);
@@ -2812,7 +2817,7 @@ const BezierHelper = {
         let totalRadian = endRadian - startRadian;
         if (totalRadian < 0) totalRadian += PI2; else if (totalRadian > PI2) totalRadian -= PI2;
         if (anticlockwise) totalRadian -= PI2;
-        const parts = ceil$1(abs$b(totalRadian / PI_2));
+        const parts = ceil$1(abs$c(totalRadian / PI_2));
         const partRadian = totalRadian / parts;
         const partRadian4Sin = sin$4(partRadian / 4);
         const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$4(partRadian / 2);
@@ -2995,7 +3000,7 @@ const {rect: rect$3, roundRect: roundRect$2, arcTo: arcTo$4, arc: arc$3, ellipse
 
 const {ellipticalArc: ellipticalArc} = EllipseHelper;
 
-const debug$f = Debug.get("PathConvert");
+const debug$g = Debug.get("PathConvert");
 
 const setEndPoint$1 = {};
 
@@ -3262,7 +3267,7 @@ const PathConvert = {
                 break;
 
               default:
-                debug$f.error(`command: ${command} [index:${i}]`, old);
+                debug$g.error(`command: ${command} [index:${i}]`, old);
                 return data;
             }
             lastCommand = command;
@@ -3321,7 +3326,7 @@ const {M: M$9, L: L$9, C: C$7, Q: Q$5, Z: Z$7, N: N$4, D: D$5, X: X$4, G: G$4, F
 
 const {getMinDistanceFrom: getMinDistanceFrom, getRadianFrom: getRadianFrom} = PointHelper;
 
-const {tan: tan, min: min$2, abs: abs$a} = Math;
+const {tan: tan, min: min$2, abs: abs$b} = Math;
 
 const startPoint = {};
 
@@ -3381,7 +3386,7 @@ const PathCommandDataHelper = {
     arcTo(data, x1, y1, x2, y2, radius, lastX, lastY, fullRadius) {
         if (!isUndefined(lastX)) {
             const r = getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2) / (fullRadius ? 1 : 2);
-            radius = min$2(radius, min$2(r, r * abs$a(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
+            radius = min$2(radius, min$2(r, r * abs$b(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
         }
         data.push(U$4, x1, y1, x2, y2, radius);
     },
@@ -3496,7 +3501,7 @@ class PathCreator {
 
 const {M: M$8, L: L$8, C: C$6, Q: Q$4, Z: Z$6, N: N$3, D: D$4, X: X$3, G: G$3, F: F$4, O: O$4, P: P$3, U: U$3} = PathCommandMap;
 
-const debug$e = Debug.get("PathDrawer");
+const debug$f = Debug.get("PathDrawer");
 
 const PathDrawer = {
     drawPathByData(drawer, data) {
@@ -3572,7 +3577,7 @@ const PathDrawer = {
                 break;
 
               default:
-                debug$e.error(`command: ${command} [index:${i}]`, data);
+                debug$f.error(`command: ${command} [index:${i}]`, data);
                 return;
             }
         }
@@ -3586,7 +3591,7 @@ const {toTwoPointBounds: toTwoPointBounds, toTwoPointBoundsByQuadraticCurve: toT
 
 const {addPointBounds: addPointBounds, copy: copy$a, addPoint: addPoint$1, setPoint: setPoint$3, addBounds: addBounds, toBounds: toBounds$2} = TwoPointBoundsHelper;
 
-const debug$d = Debug.get("PathBounds");
+const debug$e = Debug.get("PathBounds");
 
 let radius, radiusX, radiusY;
 
@@ -3708,7 +3713,7 @@ const PathBounds = {
                 break;
 
               default:
-                debug$d.error(`command: ${command} [index:${i}]`, data);
+                debug$e.error(`command: ${command} [index:${i}]`, data);
                 return;
             }
         }
@@ -3863,7 +3868,7 @@ F$2.mineType = F$2.mimeType;
 
 F$2.alphaPixelTypes.forEach(type => F$2.upperCaseTypeMap[type] = type.toUpperCase());
 
-const debug$c = Debug.get("TaskProcessor");
+const debug$d = Debug.get("TaskProcessor");
 
 class TaskItem {
     constructor(task) {
@@ -3880,7 +3885,7 @@ class TaskItem {
                 if (this.canUse && !this.canUse()) return this.cancel();
                 if (this.task) yield this.task();
             } catch (error) {
-                debug$c.error(error);
+                debug$d.error(error);
             }
         });
     }
@@ -4101,7 +4106,7 @@ class TaskProcessor {
     }
 }
 
-const debug$b = Debug.get("Resource");
+const debug$c = Debug.get("Resource");
 
 const Resource = {
     tasker: new TaskProcessor,
@@ -4113,7 +4118,7 @@ const Resource = {
         return R.tasker.isComplete;
     },
     set(key, value) {
-        if (R.map[key]) debug$b.repeat(key);
+        if (R.map[key]) debug$c.repeat(key);
         R.map[key] = value;
     },
     get(key) {
@@ -4526,11 +4531,15 @@ function affectRenderBoundsType(defaultValue) {
 function surfaceType(defaultValue) {
     return decorateLeafAttr(defaultValue, key => attr({
         set(value) {
-            this.__setAttr(key, value) && (this.__layout.surfaceChanged || this.__layout.surfaceChange());
+            this.__setAttr(key, value) && doSurfaceType(this);
         }
     }));
 }
 
+function doSurfaceType(leaf) {
+    leaf.__layout.surfaceChanged || leaf.__layout.surfaceChange();
+}
+
 function dimType(defaultValue) {
     return decorateLeafAttr(defaultValue, key => attr({
         set(value) {
@@ -4596,12 +4605,12 @@ function sortType(defaultValue) {
     }));
 }
 
-function maskType(defaultValue) {
+function maskType(defaultValue, updateSelf) {
     return decorateLeafAttr(defaultValue, key => attr({
         set(value) {
             if (this.__setAttr(key, value)) {
                 this.__layout.boxChanged || this.__layout.boxChange();
-                this.waitParent(() => {
+                updateSelf ? this.__updateMask() : this.waitParent(() => {
                     this.parent.__updateMask(value);
                 });
             }
@@ -4719,7 +4728,7 @@ function defineDataProcessor(target, key, defaultValue) {
     defineKey(data, key, property);
 }
 
-const debug$a = new Debug("rewrite");
+const debug$b = new Debug("rewrite");
 
 const list$2 = [];
 
@@ -4745,7 +4754,7 @@ function rewriteAble() {
 function doRewrite(error) {
     if (list$2.length) {
         list$2.forEach(item => {
-            if (error) debug$a.error(item.name, "需在Class上装饰@rewriteAble()");
+            if (error) debug$b.error(item.name, "需在Class上装饰@rewriteAble()");
             item.run();
         });
         list$2.length = 0;
@@ -5160,12 +5169,12 @@ const BranchHelper = {
             w.height *= scaleY;
             w.scaleX *= scaleX;
             w.scaleY *= scaleY;
-            if (branch.isBranch) scale$4(branch, x, y, scaleX, scaleY, a, b);
+            if (branch.isBranch) scale$5(branch, x, y, scaleX, scaleY, a, b);
         }
     }
 };
 
-const {pushAllChildBranch: pushAllChildBranch$1, pushAllBranchStack: pushAllBranchStack, updateBoundsByBranchStack: updateBoundsByBranchStack, move: move$9, scale: scale$4} = BranchHelper;
+const {pushAllChildBranch: pushAllChildBranch$1, pushAllBranchStack: pushAllBranchStack, updateBoundsByBranchStack: updateBoundsByBranchStack, move: move$9, scale: scale$5} = BranchHelper;
 
 const WaitHelper = {
     run(wait) {
@@ -5991,14 +6000,14 @@ const LeafEventer = {
     destroyEventer: destroy
 };
 
-const debug$9 = Debug.get("setAttr");
+const debug$a = Debug.get("setAttr");
 
 const LeafDataProxy = {
     __setAttr(name, newValue, checkFiniteNumber) {
         if (this.leaferIsCreated) {
             const oldValue = this.__.__getInput(name);
             if (checkFiniteNumber && !isFinite$1(newValue) && !isUndefined(newValue)) {
-                debug$9.warn(this.innerName, name, newValue);
+                debug$a.warn(this.innerName, name, newValue);
                 newValue = undefined;
             }
             if (isObject(newValue) || oldValue !== newValue) {
@@ -6253,7 +6262,8 @@ const BranchRender = {
         if (this.__worldOpacity && hasSize(nowWorld)) {
             const data = this.__;
             if (data.__useDim) {
-                if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.bright && !options.topRendering) return options.topList.add(this); else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
+                if (data.bright && !options.topRendering) return options.topList.add(this);
+                if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
             }
             if (data.__single && !this.isBranchLeaf) {
                 if (data.eraser === "path") return this.__renderEraser(canvas, options);
@@ -6277,6 +6287,7 @@ const BranchRender = {
                 child = children[i];
                 excludeRenderBounds$1(child, options) || (child.__hasComplex ? LeafHelper.renderComplex(child, canvas, options) : child.__render(canvas, options));
             }
+            if (this.__hasMask === 0) this.__rerenderMask(canvas, options);
         }
     },
     __clip(canvas, options) {
@@ -6493,11 +6504,19 @@ let Leaf = class Leaf {
     updateLayout() {
         this.__layout.update();
     }
-    forceUpdate(attrName) {
-        if (isUndefined(attrName)) attrName = "width"; else if (attrName === "surface") attrName = "blendMode";
-        const value = this.__.__getInput(attrName);
-        this.__[attrName] = isUndefined(value) ? null : undefined;
-        this[attrName] = value;
+    forceUpdate(typeOrAttrName) {
+        let quick;
+        if (!typeOrAttrName || typeOrAttrName === "bounds") doBoundsType(this), quick = true; else if (typeOrAttrName === "surface") doSurfaceType(this), 
+        quick = true; else if (typeOrAttrName === "stroke") doStrokeType(this), quick = true;
+        if (quick) {
+            const {leafer: leafer} = this;
+            return leafer && leafer.watcher && leafer.watcher.__onAttrChange({
+                target: this
+            });
+        }
+        const value = this.__.__getInput(typeOrAttrName);
+        this.__[typeOrAttrName] = isUndefined(value) ? null : undefined;
+        this[typeOrAttrName] = value;
     }
     forceRender(_bounds, _sync) {
         this.forceUpdate("surface");
@@ -6516,7 +6535,8 @@ let Leaf = class Leaf {
         canvas.restore();
     }
     __updateMask(_value) {
-        this.__hasMask = this.children.some(item => item.__.mask && item.__.visible && item.__.opacity);
+        const hasMask = this.children.some(item => item.__.mask && item.__.visible && item.__.opacity);
+        this.__hasMask = this.__.maskskip ? hasMask && 0 : hasMask;
     }
     __getNowWorld(options) {
         if (options.matrix) {
@@ -6710,7 +6730,7 @@ const {sort: sort} = BranchHelper;
 
 const {localBoxBounds: localBoxBounds, localStrokeBounds: localStrokeBounds, localRenderBounds: localRenderBounds, maskLocalBoxBounds: maskLocalBoxBounds, maskLocalStrokeBounds: maskLocalStrokeBounds, maskLocalRenderBounds: maskLocalRenderBounds} = LeafBoundsHelper;
 
-const debug$8 = new Debug("Branch");
+const debug$9 = new Debug("Branch");
 
 let Branch = class Branch extends Leaf {
     __updateStrokeSpread() {
@@ -6752,7 +6772,7 @@ let Branch = class Branch extends Leaf {
         this.__layout.childrenSortChanged = false;
     }
     add(child, index) {
-        if (child === this || child.destroyed) return debug$8.warn("add self or destroyed");
+        if (child === this || child.destroyed) return debug$9.warn("add self or destroyed");
         const noIndex = isUndefined(index);
         if (!child.__) {
             if (isArray(child)) return child.forEach(item => {
@@ -6985,7 +7005,7 @@ class LeafLevelList {
     }
 }
 
-const version = "2.1.11";
+const version = "2.2.1";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() {
@@ -7427,7 +7447,7 @@ class LayoutBlockData {
 
 const {updateAllMatrix: updateAllMatrix$1, updateAllChange: updateAllChange} = LeafHelper;
 
-const debug$7 = Debug.get("Layouter");
+const debug$8 = Debug.get("Layouter");
 
 class Layouter {
     constructor(target, userConfig) {
@@ -7461,7 +7481,7 @@ class Layouter {
             this.layoutOnce();
             target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
         } catch (e) {
-            debug$7.error(e);
+            debug$8.error(e);
         }
         this.layoutedBlocks = null;
     }
@@ -7473,8 +7493,8 @@ class Layouter {
         }
     }
     layoutOnce() {
-        if (this.layouting) return debug$7.warn("layouting");
-        if (this.times > 3) return debug$7.warn("layout max times");
+        if (this.layouting) return debug$8.warn("layouting");
+        if (this.times > 3) return debug$8.warn("layout max times");
         this.times++;
         this.totalTimes++;
         this.layouting = true;
@@ -7567,7 +7587,7 @@ class Layouter {
     }
 }
 
-const debug$6 = Debug.get("Renderer");
+const debug$7 = Debug.get("Renderer");
 
 class Renderer {
     get needFill() {
@@ -7622,7 +7642,7 @@ class Renderer {
         const {target: target} = this;
         this.times = 0;
         this.totalBounds = new Bounds;
-        debug$6.log(target.innerName, "---\x3e");
+        debug$7.log(target.innerName, "---\x3e");
         try {
             this.emitRender(RenderEvent.START);
             this.renderOnce(callback);
@@ -7630,9 +7650,9 @@ class Renderer {
             ImageManager.clearRecycled();
         } catch (e) {
             this.rendering = false;
-            debug$6.error(e);
+            debug$7.error(e);
         }
-        debug$6.log("-------------|");
+        debug$7.log("-------------|");
     }
     renderAgain() {
         if (this.rendering) {
@@ -7642,8 +7662,8 @@ class Renderer {
         }
     }
     renderOnce(callback) {
-        if (this.rendering) return debug$6.warn("rendering");
-        if (this.times > 3) return debug$6.warn("render max times");
+        if (this.rendering) return debug$7.warn("rendering");
+        if (this.times > 3) return debug$7.warn("render max times");
         this.times++;
         this.totalTimes++;
         this.rendering = true;
@@ -7775,7 +7795,7 @@ class Renderer {
             if (updatedList) updatedList.list.some(leaf => {
                 empty = !leaf.__world.width || !leaf.__world.height;
                 if (empty) {
-                    if (!leaf.isLeafer) debug$6.tip(leaf.innerName, ": empty");
+                    if (!leaf.isLeafer) debug$7.tip(leaf.innerName, ": empty");
                     empty = !leaf.isBranch || leaf.isBranchLeaf;
                 }
                 return empty;
@@ -7862,7 +7882,7 @@ class Picker {
             for (let i = 0, len = list.length; i < len; i++) {
                 find = list[i];
                 if (ignoreHittable || LeafHelper.worldHittable(find)) {
-                    this.hitChild(find, point);
+                    this.hitChild(find, find.hitThrough ? this.point : point);
                     if (findList.length) {
                         if (find.isBranchLeaf && list.some(item => item !== find && LeafHelper.hasParent(item, find))) {
                             findList.reset();
@@ -7875,7 +7895,7 @@ class Picker {
         }
         if (bottomList) {
             for (let i = 0, len = bottomList.length; i < len; i++) {
-                this.hitChild(bottomList[i].target, this.point, bottomList[i].proxy);
+                this.hitChild(bottomList[i].target, this.point, undefined, bottomList[i].proxy);
                 if (findList.length) return findList.list[0];
             }
         }
@@ -7933,42 +7953,38 @@ class Picker {
     hitBranch(branch) {
         this.eachFind(branch.children, branch.__onlyHitMask);
     }
-    eachFind(children, hitMask) {
+    eachFind(children, onlyHitMask) {
         let child, hit, data;
         const {point: point} = this, len = children.length;
         for (let i = len - 1; i > -1; i--) {
             child = children[i], data = child.__;
-            if (!data.visible || hitMask && !data.mask) continue;
+            if (!data.visible || onlyHitMask && !data.mask) continue;
             hit = hitRadiusPoint$1(child.__world, data.hitRadius ? copyRadiusPoint$1(tempPoint$3, point, data.hitRadius) : point);
             if (child.isBranch) {
                 if (hit || child.__ignoreHitWorld) {
                     if (child.isBranchLeaf && data.__clipAfterFill && !child.__hitWorld(point, true)) continue;
                     if (child.topChildren) this.eachFind(child.topChildren, false);
                     this.eachFind(child.children, child.__onlyHitMask);
-                    if (child.isBranchLeaf) this.hitChild(child, point);
+                    if (child.isBranchLeaf) this.hitChild(child, point, onlyHitMask);
                 }
             } else {
-                if (hit) this.hitChild(child, point);
+                if (hit) this.hitChild(child, point, onlyHitMask);
             }
         }
     }
-    hitChild(child, point, proxy) {
+    hitChild(child, point, onlyHitMask, proxy) {
         if (this.exclude && this.exclude.has(child)) return;
-        if (child.__hitWorld(point)) {
-            const {parent: parent} = child;
-            if (parent && parent.__hasMask && !child.__.mask) {
-                let findMasks = [], item;
-                const {children: children} = parent;
-                for (let i = 0, len = children.length; i < len; i++) {
-                    item = children[i];
-                    if (item.__.mask) findMasks.push(item);
-                    if (item === child) {
-                        if (findMasks && !findMasks.every(value => value.__hitWorld(point))) return;
-                        break;
-                    }
-                }
+        if (child.__hitWorld(point, onlyHitMask && child.mask === "path" ? true : undefined)) {
+            const {parent: parent, mask: mask} = child;
+            if (parent && parent.__hasMask && mask && !(mask === "clipping" || mask === "clipping-path")) {
+                if (!parent.children.some(item => !item.mask && item.__hitWorld(point))) return;
+            }
+            const leaf = proxy || child, {hitThrough: hitThrough} = child, {findList: findList} = this;
+            if (hitThrough) {
+                const index = findList.list.findIndex(item => item[hitThrough] === child[hitThrough]);
+                if (index > 0) return findList.addAt(leaf, index);
             }
-            this.findList.add(proxy || child);
+            findList.add(leaf);
         }
     }
     clear() {
@@ -8139,7 +8155,7 @@ const emptyPaint = {
     originPaint: {}
 };
 
-const debug$5 = Debug.get("UIData");
+const debug$6 = Debug.get("UIData");
 
 class UIData extends LeafData {
     get scale() {
@@ -8189,14 +8205,14 @@ class UIData extends LeafData {
         if (value < 0) {
             this._width = -value;
             this.__leaf.scaleX *= -1;
-            debug$5.warn("width < 0, instead -scaleX ", this);
+            debug$6.warn("width < 0, instead -scaleX ", this);
         } else this._width = value;
     }
     setHeight(value) {
         if (value < 0) {
             this._height = -value;
             this.__leaf.scaleY *= -1;
-            debug$5.warn("height < 0, instead -scaleY", this);
+            debug$6.warn("height < 0, instead -scaleY", this);
         } else this._height = value;
     }
     setFill(value) {
@@ -8830,6 +8846,8 @@ __decorate([ dataType(false) ], UI.prototype, "editable", void 0);
 
 __decorate([ hitType(true) ], UI.prototype, "hittable", void 0);
 
+__decorate([ hitType() ], UI.prototype, "hitThrough", void 0);
+
 __decorate([ hitType("path") ], UI.prototype, "hitFill", void 0);
 
 __decorate([ strokeType("path") ], UI.prototype, "hitStroke", void 0);
@@ -8943,7 +8961,7 @@ Group = __decorate([ useModule(Branch), registerUI() ], Group);
 
 var Leafer_1;
 
-const debug$4 = Debug.get("Leafer");
+const debug$5 = Debug.get("Leafer");
 
 let Leafer = Leafer_1 = class Leafer extends Group {
     get __tag() {
@@ -9304,7 +9322,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                         ImageManager.clearRecycled();
                     }, 100);
                 } catch (e) {
-                    debug$4.error(e);
+                    debug$5.error(e);
                 }
             }
         };
@@ -9470,7 +9488,7 @@ __decorate([ affectRenderBoundsType("hide") ], Frame.prototype, "overflow", void
 
 Frame = __decorate([ registerUI() ], Frame);
 
-const {moveTo: moveTo$3, closePath: closePath$2, ellipse: ellipse$1} = PathCommandDataHelper, {tempPoint: tempPoint$2, set: set$1, rotate: rotate$4} = PointHelper, {abs: abs$9} = Math, tempCenter = {};
+const {moveTo: moveTo$3, closePath: closePath$2, ellipse: ellipse$1} = PathCommandDataHelper, {tempPoint: tempPoint$2, set: set$1, rotate: rotate$4} = PointHelper, {abs: abs$a} = Math, tempCenter = {};
 
 let Ellipse = class Ellipse extends UI {
     get __tag() {
@@ -9482,7 +9500,7 @@ let Ellipse = class Ellipse extends UI {
         const path = data.path = [];
         let open, hasAngle, closedAngle;
         if (startAngle || endAngle) hasAngle = true;
-        if (hasAngle) closedAngle = abs$9(endAngle - startAngle) === 360;
+        if (hasAngle) closedAngle = abs$a(endAngle - startAngle) === 360;
         if (innerRadius) {
             const drawInnerEllipse = innerRadius < 1 || closed;
             let outerStartAngle = startAngle, outerEndAngle = endAngle, outerAnticlockwise;
@@ -9788,7 +9806,7 @@ let Text = class Text extends UI {
         data.__font = `${italic ? "italic " : ""}${textCase === "small-caps" ? "small-caps " : ""}${fontWeight !== "normal" ? fontWeight + " " : ""}${fontSize || 12}px ${fontFamily || "caption"}`;
         stintSet$3(data, "__padding", padding && MathHelper.fourNumber(padding));
         stintSet$3(data, "__clipText", textOverflow !== "show" && !data.__autoSize);
-        stintSet$3(data, "__isCharMode", width || height || data.__letterSpacing || textCase !== "none");
+        stintSet$3(data, "__isCharMode", width || height || data.__letterSpacing || data.motionText || textCase !== "none");
         data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === "") ? data.placeholder : data.text, this.__);
     }
     __updateBoxBounds() {
@@ -9813,7 +9831,7 @@ let Text = class Text extends UI {
             this.__updateNaturalSize();
         } else super.__updateBoxBounds();
         if (italic) b.width += fontSize * .16;
-        DataHelper.stintSet(this, "isOverflow", !includes(b, contentBounds));
+        DataHelper.stintSet(this, "isOverflow", !includes(b, contentBounds) && !data.motionText);
         if (this.isOverflow) setList(data.__textBoxBounds = {}, [ b, contentBounds ]), layout.renderChanged = true; else data.__textBoxBounds = b;
     }
     __updateRenderSpread() {
@@ -10154,7 +10172,7 @@ class UIEvent extends Event {
     }
 }
 
-const {min: min$1, max: max$3, abs: abs$8} = Math, {float: float$3, sign: sign$2} = MathHelper, {minX: minX, maxX: maxX, minY: minY, maxY: maxY} = BoundsHelper;
+const {min: min$1, max: max$3, abs: abs$9} = Math, {float: float$3, sign: sign$2} = MathHelper, {minX: minX, maxX: maxX, minY: minY, maxY: maxY} = BoundsHelper;
 
 const tempContent = new Bounds, tempDragBounds = new Bounds;
 
@@ -10237,7 +10255,7 @@ const DragBoundsHelper = {
             bScale = originBottomScale && bSize > 0 ? 1 + bSize / (originBottomScale * tempContent.height) : 1;
             correctScaleY *= max$3(aScale, bScale);
             if (lockRatio) {
-                aScale = max$3(abs$8(correctScaleX), abs$8(correctScaleY));
+                aScale = max$3(abs$9(correctScaleX), abs$9(correctScaleY));
                 correctScaleX = sign$2(correctScaleX) * aScale;
                 correctScaleY = sign$2(correctScaleY) * aScale;
             }
@@ -10663,6 +10681,7 @@ class Dragger {
     }
     dragEnd(data) {
         if (!this.dragging && !this.moving) return;
+        setTimeout(() => this.interaction.pointerMove(data));
         if (this.checkDragEndAnimate(data)) return;
         this.dragEndReal(data);
     }
@@ -10720,7 +10739,7 @@ class Dragger {
     }
 }
 
-const debug$3 = Debug.get("emit");
+const debug$4 = Debug.get("emit");
 
 function emit$1(type, data, path, excludePath) {
     if (!path && !data.path) return;
@@ -10742,7 +10761,7 @@ function emit$1(type, data, path, excludePath) {
             if (emitEvent(leaf, type, data, false, excludePath)) return;
         }
     } catch (e) {
-        debug$3.error(e);
+        debug$4.error(e);
     }
 }
 
@@ -11416,8 +11435,10 @@ ui$5.__hit = function(inner, forceHitFill) {
     if (!needHitFillPath && !needHitStrokePath) return false;
     const radiusWidth = inner.radiusX * 2;
     let hitWidth = radiusWidth;
+    let {strokeAlign: strokeAlign} = data;
+    if (data.motionText) hitWidth += data.fontSize / 2, strokeAlign = "center";
     if (needHitStrokePath) {
-        switch (data.strokeAlign) {
+        switch (strokeAlign) {
           case "inside":
             hitWidth += strokeWidth * 2;
             if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth)) return true;
@@ -11451,9 +11472,9 @@ rect.__hitFill = box$3.__hitFill = function(inner) {
 };
 
 Text.prototype.__drawHitPath = function(canvas) {
-    const {__lineHeight: __lineHeight, fontSize: fontSize, __baseLine: __baseLine, __letterSpacing: __letterSpacing, __textDrawData: data} = this.__;
+    const data = this.__, {__lineHeight: __lineHeight, fontSize: fontSize, __baseLine: __baseLine, __letterSpacing: __letterSpacing, __textDrawData: drawData} = data;
     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));
+    if (data.motionText) this.__drawPathByData(canvas, data.__pathForMotionText); else if (__letterSpacing < 0) this.__drawPathByBox(canvas); else drawData.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
 };
 
 Group.prototype.pick = function(hitPoint, options) {
@@ -11640,7 +11661,8 @@ function fillPathOrText(ui, canvas, renderOptions) {
     ui.__.__font ? Paint.fillText(ui, canvas, renderOptions) : ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill();
 }
 
-function fillText(ui, canvas, _renderOptions) {
+function fillText(ui, canvas, renderOptions) {
+    if (ui.motionText) return Paint.fillMotionText(ui, canvas, renderOptions);
     const data = ui.__, {rows: rows, decorationY: decorationY} = data.__textDrawData;
     if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor;
     let row;
@@ -12032,7 +12054,7 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
         data.__naturalWidth = image.width / data.pixelRatio;
         data.__naturalHeight = image.height / data.pixelRatio;
         if (data.__autoSide) {
-            ui.forceUpdate("width");
+            ui.forceUpdate();
             LeafHelper.updateBounds(ui);
             ui.__layout.boundsChanged = true;
             if (ui.__proxyData) {
@@ -12259,9 +12281,9 @@ function layout$3(transform, box, x, y, scaleX, scaleY, rotation, skew) {
     translate(transform, box.x + x, box.y + y);
 }
 
-const {get: get$1, scale: scale$3, copy: copy$5} = MatrixHelper;
+const {get: get$1, scale: scale$4, copy: copy$5} = MatrixHelper;
 
-const {getFloorScale: getFloorScale} = MathHelper, {abs: abs$7} = Math;
+const {getFloorScale: getFloorScale} = MathHelper, {abs: abs$8} = Math;
 
 function createPatternTask(paint, ui, canvas, renderOptions) {
     if (!paint.patternTask) {
@@ -12286,15 +12308,15 @@ function createPattern(paint, ui, canvas, renderOptions) {
             width *= scaleX;
             height *= scaleY;
             if (gap && !brush) {
-                xGap = gap.x * scaleX / abs$7(data.scaleX || 1);
-                yGap = gap.y * scaleY / abs$7(data.scaleY || 1);
+                xGap = gap.x * scaleX / abs$8(data.scaleX || 1);
+                yGap = gap.y * scaleY / abs$8(data.scaleY || 1);
             }
             if (transform || scaleX !== 1 || scaleY !== 1) {
                 scaleX *= getFloorScale(width + (xGap || 0));
                 scaleY *= getFloorScale(height + (yGap || 0));
                 imageMatrix = get$1();
                 if (transform) copy$5(imageMatrix, transform);
-                scale$3(imageMatrix, 1 / scaleX, 1 / scaleY);
+                scale$4(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
             const imageCanvas = image.getCanvas(width, height, opacity, undefined, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
             if (brush) {
@@ -12531,7 +12553,7 @@ const PaintGradientModule = {
     getTransform: getTransform
 };
 
-const {copy: copy$4, move: move$6, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper, {max: max$2, abs: abs$6} = Math;
+const {copy: copy$4, move: move$6, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper, {max: max$2, abs: abs$7} = Math;
 
 const tempBounds$1 = {}, tempMatrix$1 = new Matrix;
 
@@ -12575,7 +12597,7 @@ function shadow$1(ui, current, shape) {
 function getShadowRenderSpread(_ui, shadow) {
     let top = 0, right = 0, bottom = 0, left = 0, x, y, spread, blur;
     shadow.forEach(item => {
-        x = item.x || 0, y = item.y || 0, blur = (item.blur || 0) * 1.5, spread = abs$6(item.spread || 0);
+        x = item.x || 0, y = item.y || 0, blur = (item.blur || 0) * 1.5, spread = abs$7(item.spread || 0);
         top = max$2(top, spread + blur - y);
         right = max$2(right, spread + blur + x);
         bottom = max$2(bottom, spread + blur + y);
@@ -13002,7 +13024,8 @@ const TextMode = 2;
 
 function layoutChar(drawData, style, width, _height) {
     const {rows: rows} = drawData;
-    const {textAlign: textAlign, paraIndent: paraIndent, __letterSpacing: __letterSpacing} = style;
+    const {textAlign: textAlign, paraIndent: paraIndent} = style;
+    const useLetter = style.__letterSpacing || style.motionText;
     const justifyLast = width && textAlign.includes("both");
     const justify = justifyLast || width && textAlign.includes("justify");
     const justifyLetter = justify && textAlign.includes("letter");
@@ -13015,8 +13038,8 @@ function layoutChar(drawData, style, width, _height) {
                 remainingWidth = width - row.width - indentWidth;
                 if (justifyLetter) addLetterWidth = remainingWidth / (row.words.reduce((total, item) => total + item.data.length, 0) - 1); else addWordWidth = wordsLength > 1 ? remainingWidth / (wordsLength - 1) : 0;
             }
-            mode = __letterSpacing || row.isOverflow || justifyLetter ? CharMode : addWordWidth ? WordMode : TextMode;
-            if (row.isOverflow && !__letterSpacing) row.textMode = true;
+            mode = useLetter || row.isOverflow || justifyLetter ? CharMode : addWordWidth ? WordMode : TextMode;
+            if (row.isOverflow && !useLetter) row.textMode = true;
             if (mode === TextMode) {
                 row.x += indentWidth;
                 toTextChar$1(row);
@@ -13217,6 +13240,7 @@ function getDrawData$1(content, style) {
     let width = style.__getInput("width") || 0;
     let height = style.__getInput("height") || 0;
     const {__padding: padding} = style;
+    if (style.motionText) width = height = 0;
     if (padding) {
         if (width) x = padding[left$3], width -= padding[right$3] + padding[left$3], !width && (width = .01); else if (!style.autoSizeAlign) x = padding[left$3];
         if (height) y = padding[top$2], height -= padding[top$2] + padding[bottom$2], !height && (height = .01); else if (!style.autoSizeAlign) y = padding[top$2];
@@ -13343,6 +13367,69 @@ EditorEvent.BEFORE_HOVER = "editor.before_hover";
 
 EditorEvent.HOVER = "editor.hover";
 
+const order = (a, b) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b);
+
+const reverseOrder = (a, b) => b.parent.children.indexOf(b) - a.parent.children.indexOf(a);
+
+const EditorHelper = {
+    group(list, element, userGroup) {
+        list.sort(reverseOrder);
+        const {app: app, parent: parent} = list[0];
+        let group;
+        if (userGroup && userGroup.add) {
+            group = userGroup;
+        } else {
+            group = new Group(userGroup);
+        }
+        parent.addAt(group, parent.children.indexOf(list[0]));
+        list.sort(order);
+        const matrx = new Matrix(element.worldTransform);
+        matrx.divideParent(parent.scrollWorldTransform);
+        group.setTransform(matrx);
+        group.editable = true;
+        group.hitChildren = false;
+        app.lockLayout();
+        list.forEach(child => child.dropTo(group));
+        app.unlockLayout();
+        return group;
+    },
+    ungroup(list) {
+        const {app: app} = list[0];
+        const ungroupList = [];
+        app.lockLayout();
+        list.forEach(leaf => {
+            if (leaf.isBranch) {
+                const {parent: parent, children: children} = leaf;
+                while (children.length) {
+                    ungroupList.push(children[0]);
+                    children[0].dropTo(parent, parent.children.indexOf(leaf));
+                }
+                if (leaf.isBranchLeaf) ungroupList.push(leaf); else leaf.remove();
+            } else {
+                ungroupList.push(leaf);
+            }
+        });
+        app.unlockLayout();
+        return ungroupList;
+    },
+    toTop(list) {
+        list.sort(order);
+        list.forEach(leaf => {
+            if (leaf.parent) leaf.parent.add(leaf);
+        });
+    },
+    toBottom(list) {
+        list.sort(reverseOrder);
+        list.forEach(leaf => {
+            if (leaf.parent) leaf.parent.addAt(leaf, 0);
+        });
+    },
+    mergeMaskConfig(_mergeConfig, _editor) {},
+    getSiblingMaskElements(_editor) {
+        return undefined;
+    }
+};
+
 function targetAttr(fn) {
     return (target, key) => {
         const privateKey = "_" + key;
@@ -13391,6 +13478,7 @@ function mergeConfigAttr() {
             get() {
                 const {config: config, element: element, dragPoint: dragPoint, editBox: editBox, editTool: editTool, innerEditor: innerEditor, app: app} = this, mergeConfig = Object.assign({}, config);
                 if (innerEditor) innerEditor.editConfig && Object.assign(mergeConfig, innerEditor.editConfig); else if (editTool) editTool.editConfig && Object.assign(mergeConfig, editTool.editConfig);
+                if (element && element.mask) EditorHelper.mergeMaskConfig(mergeConfig, this);
                 if (element && element.editConfig) {
                     let {editConfig: editConfig} = element;
                     if (editConfig.hover || editConfig.hoverStyle || editConfig.hoverPathType) {
@@ -13417,7 +13505,28 @@ function mergeConfigAttr() {
     };
 }
 
-const {abs: abs$5} = Math;
+function editToolMergeConfigAttr() {
+    return (target, key) => {
+        defineKey(target, key, {
+            get() {
+                const t = this;
+                const {config: config, userConfig: userConfig, configKeepKeys: configKeepKeys} = t, mergedConfig = config ? DataHelper.clone(config) : {};
+                if (configKeepKeys) {
+                    for (let key in userConfig) {
+                        if (!configKeepKeys.includes(key)) mergedConfig[key] = userConfig[key];
+                    }
+                }
+                if (t.preMergedConfig) t.preMergedConfig(mergedConfig);
+                if (configKeepKeys) configKeepKeys.forEach(key => {
+                    userConfig[key] && Object.assign(mergedConfig[key], userConfig[key]);
+                });
+                return t.mergedConfig = mergedConfig;
+            }
+        });
+    };
+}
+
+const {abs: abs$6} = Math;
 
 const {copy: copy$3} = MatrixHelper;
 
@@ -13460,7 +13569,7 @@ class Stroker extends UI {
                 leaf = list[i];
                 const {worldTransform: worldTransform, worldRenderBounds: worldRenderBounds} = leaf;
                 if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
-                    const aScaleX = abs$5(worldTransform.scaleX), aScaleY = abs$5(worldTransform.scaleY);
+                    const aScaleX = abs$6(worldTransform.scaleX), aScaleY = abs$6(worldTransform.scaleY);
                     copy$3(matrix$1, worldTransform);
                     matrix$1.half = strokeWidth % 2;
                     canvas.setWorld(matrix$1, options.matrix);
@@ -13615,7 +13724,11 @@ class EditSelect extends Group {
     }
     onSelect() {
         if (this.running) {
-            this.targetStroker.setTarget(this.editor.list);
+            const {editor: editor} = this;
+            let {list: list} = editor;
+            const maskList = EditorHelper.getSiblingMaskElements(editor);
+            if (maskList) list = maskList.concat(list);
+            this.targetStroker.setTarget(list);
             this.hoverStroker.target = null;
         }
     }
@@ -13787,13 +13900,13 @@ class EditSelect extends Group {
 
 const {topLeft: topLeft$1, top: top$1, topRight: topRight$1, right: right$2, bottomRight: bottomRight, bottom: bottom$1, bottomLeft: bottomLeft, left: left$2} = Direction9;
 
-const {toPoint: toPoint} = AroundHelper, {within: within$3, sign: sign$1} = MathHelper, {abs: abs$4} = Math;
+const {toPoint: toPoint} = AroundHelper, {within: within$3, sign: sign$1} = MathHelper, {abs: abs$5} = Math;
 
 const EditDataHelper = {
     getScaleData(target, startBounds, direction, totalMoveOrScale, lockRatio, around, flipable, scaleMode) {
         let align, origin = {}, scaleX = 1, scaleY = 1, lockScale;
         const {widthRange: widthRange, heightRange: heightRange, dragBounds: dragBounds, worldTransform: worldTransform, boxBounds: boxBounds} = target;
-        const {width: width, height: height} = startBounds, worldScaleX = abs$4(worldTransform.scaleX), worldScaleY = abs$4(worldTransform.scaleY);
+        const {width: width, height: height} = startBounds, worldScaleX = abs$5(worldTransform.scaleX), worldScaleY = abs$5(worldTransform.scaleY);
         const originChangedScaleX = target.scaleX / startBounds.scaleX;
         const originChangedScaleY = target.scaleY / startBounds.scaleY;
         const signX = sign$1(originChangedScaleX);
@@ -13873,7 +13986,7 @@ const EditDataHelper = {
                         break;
 
                       default:
-                        lockScale = Math.sqrt(abs$4(scaleX * scaleY));
+                        lockScale = Math.sqrt(abs$5(scaleX * scaleY));
                         scaleX = sign$1(scaleX) * lockScale;
                         scaleY = sign$1(scaleY) * lockScale;
                     }
@@ -13907,10 +14020,10 @@ const EditDataHelper = {
         }
         const minWidth = 1, minHeight = 1;
         const worldWidth = worldScaleX * boxBounds.width, worldHeight = worldScaleY * boxBounds.height;
-        if (useScaleX && abs$4(scaleX * worldWidth) < minWidth) scaleX = sign$1(scaleX) * minWidth / worldWidth;
-        if (useScaleY && abs$4(scaleY * worldHeight) < minHeight) scaleY = sign$1(scaleY) * minHeight / worldHeight;
+        if (useScaleX && abs$5(scaleX * worldWidth) < minWidth) scaleX = sign$1(scaleX) * minWidth / worldWidth;
+        if (useScaleY && abs$5(scaleY * worldHeight) < minHeight) scaleY = sign$1(scaleY) * minHeight / worldHeight;
         if (lockRatio && scaleX !== scaleY) {
-            lockScale = Math.min(abs$4(scaleX), abs$4(scaleY));
+            lockScale = Math.min(abs$5(scaleX), abs$5(scaleY));
             scaleX = sign$1(scaleX) * lockScale;
             scaleY = sign$1(scaleY) * lockScale;
         }
@@ -14132,6 +14245,8 @@ class EditPoint extends Box {
 
 const fourDirection = [ "top", "right", "bottom", "left" ], editConfig = undefined;
 
+const debug$3 = Debug.get("EditBox");
+
 class EditBox extends Group {
     get mergeConfig() {
         const {config: config} = this, {mergeConfig: mergeConfig, editBox: editBox} = this.editor;
@@ -14202,10 +14317,12 @@ class EditBox extends Group {
         this.resizeLines = [];
         this.dragStartData = {};
         this.__eventIds = [];
+        this.widgets = [];
         this.editor = editor;
         this.visible = false;
         this.create();
         this.__listenEvents();
+        this.createWidgets();
     }
     create() {
         let rotatePoint, resizeLine, resizePoint;
@@ -14241,7 +14358,7 @@ class EditBox extends Group {
         }
         this.listenPointEvents(circle, "rotate", 2);
         this.listenPointEvents(rect, "move", 8);
-        view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
+        view.add([ ...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints ]);
         this.add(view);
     }
     load() {
@@ -14254,6 +14371,7 @@ class EditBox extends Group {
         let resizeP;
         for (let i = 0; i < 8; i++) {
             resizeP = resizePoints[i];
+            if (resizeP.children.length) resizeP.clear();
             resizeP.set(this.getPointStyle(i % 2 ? middlePointsStyle[(i - 1) / 2 % middlePointsStyle.length] : pointsStyle[i / 2 % pointsStyle.length]));
             resizeP.rotation = (i - (i % 2 ? 1 : 0)) / 2 * 90;
             if (i % 2) resizeLines[(i - 1) / 2].set(Object.assign({
@@ -14279,6 +14397,7 @@ class EditBox extends Group {
         }
         if (single) DataHelper.stintSet(target.__world, "ignorePixelSnap", ignorePixelSnap);
         updateMoveCursor(this);
+        this.loadWidgets();
     }
     update() {
         const {editor: editor} = this;
@@ -14299,8 +14418,10 @@ class EditBox extends Group {
             width: width,
             height: height
         });
+        this.updateWidgets();
     }
     unload() {
+        this.unloadWidgets();
         this.visible = false;
         if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
     }
@@ -14313,6 +14434,7 @@ class EditBox extends Group {
             strokeBoxSpread && BoundsHelper.spread(bounds, [ strokeBoxSpread * Math.abs(scaleY), strokeBoxSpread * Math.abs(scaleX) ]);
         }
         if (spread) BoundsHelper.spread(bounds, spread);
+        this.rectBounds = bounds;
         editMask.visible = mask ? true : 0;
         if (!isUndefined(dimOthers) || !isUndefined(bright)) {
             editor.setDimOthers(dimOthers);
@@ -14324,7 +14446,7 @@ class EditBox extends Group {
         if (this.view.worldOpacity) {
             const {width: width, height: height} = bounds;
             const smallSize = isNumber(hideOnSmall) ? hideOnSmall : 10;
-            const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize);
+            const showPoints = this.showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize);
             let point = {}, rotateP, resizeP, resizeL;
             for (let i = 0; i < 8; i++) {
                 AroundHelper.toPoint(AroundHelper.directionData[i], bounds, point);
@@ -14618,13 +14740,38 @@ class EditBox extends Group {
     __removeListenEvents() {
         this.off_(this.__eventIds);
     }
+    static registerWidget(Widget) {
+        const {tag: tag} = Widget.prototype;
+        EditBox.WidgetList[tag] && debug$3.repeat(tag);
+        EditBox.WidgetList[tag] = Widget;
+    }
+    createWidgets() {
+        Object.values(EditBox.WidgetList).forEach(item => {
+            this.widgets.push(new item(this));
+        });
+    }
+    loadWidgets() {
+        this.widgets.forEach(item => item.onLoad());
+    }
+    updateWidgets() {
+        this.widgets.forEach(item => item.onUpdate());
+    }
+    unloadWidgets() {
+        this.widgets.forEach(item => item.onUnload());
+    }
+    destroyWidgets() {
+        this.widgets.forEach(item => item.onDestroy());
+    }
     destroy() {
         this.editor = null;
         this.__removeListenEvents();
+        this.destroyWidgets();
         super.destroy();
     }
 }
 
+EditBox.WidgetList = {};
+
 const bigBounds = {
     x: 0,
     y: 0,
@@ -14771,65 +14918,6 @@ function onHover(editor, oldValue) {
     }));
 }
 
-const order = (a, b) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b);
-
-const reverseOrder = (a, b) => b.parent.children.indexOf(b) - a.parent.children.indexOf(a);
-
-const EditorHelper = {
-    group(list, element, userGroup) {
-        list.sort(reverseOrder);
-        const {app: app, parent: parent} = list[0];
-        let group;
-        if (userGroup && userGroup.add) {
-            group = userGroup;
-        } else {
-            group = new Group(userGroup);
-        }
-        parent.addAt(group, parent.children.indexOf(list[0]));
-        list.sort(order);
-        const matrx = new Matrix(element.worldTransform);
-        matrx.divideParent(parent.scrollWorldTransform);
-        group.setTransform(matrx);
-        group.editable = true;
-        group.hitChildren = false;
-        app.lockLayout();
-        list.forEach(child => child.dropTo(group));
-        app.unlockLayout();
-        return group;
-    },
-    ungroup(list) {
-        const {app: app} = list[0];
-        const ungroupList = [];
-        app.lockLayout();
-        list.forEach(leaf => {
-            if (leaf.isBranch) {
-                const {parent: parent, children: children} = leaf;
-                while (children.length) {
-                    ungroupList.push(children[0]);
-                    children[0].dropTo(parent, parent.children.indexOf(leaf));
-                }
-                if (leaf.isBranchLeaf) ungroupList.push(leaf); else leaf.remove();
-            } else {
-                ungroupList.push(leaf);
-            }
-        });
-        app.unlockLayout();
-        return ungroupList;
-    },
-    toTop(list) {
-        list.sort(order);
-        list.forEach(leaf => {
-            if (leaf.parent) leaf.parent.add(leaf);
-        });
-    },
-    toBottom(list) {
-        list.sort(reverseOrder);
-        list.forEach(leaf => {
-            if (leaf.parent) leaf.parent.addAt(leaf, 0);
-        });
-    }
-};
-
 const debug$2 = Debug.get("EditToolCreator");
 
 function registerEditTool() {
@@ -15605,6 +15693,8 @@ __decorate([ targetAttr(onHover) ], Editor.prototype, "hoverTarget", void 0);
 
 Editor = __decorate([ useModule(TransformTool, [ "editBox", "editTool", "emitEvent" ]) ], Editor);
 
+const {abs: abs$4} = Math, {scale: scale$3} = PointHelper;
+
 class InnerEditor {
     static registerInnerEditor() {
         EditToolCreator.register(this);
@@ -15615,6 +15705,9 @@ class InnerEditor {
     get mode() {
         return "focus";
     }
+    get userConfig() {
+        return this.editBox.mergeConfig[this.tag] || {};
+    }
     get editBox() {
         return this._editBox || this.editor.editBox;
     }
@@ -15626,6 +15719,22 @@ class InnerEditor {
         this.editor = editor;
         this.create();
     }
+    getEditBoxPoint(editTargetPoint, change) {
+        const point = change ? editTargetPoint : {
+            x: editTargetPoint.x,
+            y: editTargetPoint.y
+        }, {scaleX: scaleX, scaleY: scaleY} = this.editTarget.worldTransform;
+        scale$3(point, abs$4(scaleX), abs$4(scaleY));
+        return point;
+    }
+    getEditTargetPoint(editBoxPoint, change) {
+        const point = change ? editBoxPoint : {
+            x: editBoxPoint.x,
+            y: editBoxPoint.y
+        }, {scaleX: scaleX, scaleY: scaleY} = this.editTarget.worldTransform;
+        scale$3(point, Math.abs(1 / scaleX), abs$4(1 / scaleY));
+        return point;
+    }
     onCreate() {}
     create() {
         this.view = new Group;
@@ -19111,7 +19220,7 @@ const HighCurveHelper = {
     },
     getMotionPathData(data) {
         let total = 0, distance, segments = [];
-        let i = 0, x = 0, y = 0, toX, toY, command;
+        let i = 0, x = 0, y = 0, toX, toY, command, closed;
         const len = data.length;
         while (i < len) {
             command = data[i];
@@ -19136,6 +19245,7 @@ const HighCurveHelper = {
                 break;
 
               case Z$1:
+                closed = true;
                 i += 1;
 
               default:
@@ -19147,13 +19257,16 @@ const HighCurveHelper = {
         return {
             total: total,
             segments: segments,
-            data: data
+            data: data,
+            closed: closed
         };
     },
-    getDistancePoint(distanceData, motionDistance, motionPrecision) {
-        const {segments: segments, data: data} = distanceData;
-        motionDistance = UnitConvert.number(motionDistance, distanceData.total);
-        let total = 0, distance, to = {};
+    getDistancePoint(distanceData, motionDistance, motionPrecision, offsetX) {
+        const {segments: segments, data: data, total: total} = distanceData;
+        motionDistance = UnitConvert.number(motionDistance, total);
+        if (offsetX) motionDistance += offsetX;
+        if (motionDistance > total) motionDistance = motionDistance % total;
+        let nowDistance = 0, distance, to = {};
         let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
         let x1, y1, x2, y2, t;
         const len = data.length;
@@ -19165,15 +19278,20 @@ const HighCurveHelper = {
                 toX = data[i + 1];
                 toY = data[i + 2];
                 distance = segments[index];
-                if (total + distance >= motionDistance || !distanceData.total) {
-                    if (!i) x = toX, y = toY;
-                    tempFrom.x = x;
-                    tempFrom.y = y;
+                if (nowDistance + distance >= motionDistance || !distanceData.total) {
                     to.x = toX;
                     to.y = toY;
-                    PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true);
-                    to.rotation = PointHelper.getAngle(tempFrom, to);
-                    return to;
+                    if (i) {
+                        tempFrom.x = x;
+                        tempFrom.y = y;
+                        PointHelper.getDistancePoint(tempFrom, to, motionDistance - nowDistance, true);
+                        to.rotation = PointHelper.getAngle(tempFrom, to);
+                        return to;
+                    } else {
+                        const nextPoint = HighCurveHelper.getDistancePoint(distanceData, motionPrecision, motionPrecision, offsetX);
+                        to.rotation = nextPoint.rotation;
+                        return to;
+                    }
                 }
                 x = toX;
                 y = toY;
@@ -19184,9 +19302,9 @@ const HighCurveHelper = {
                 toX = data[i + 5];
                 toY = data[i + 6];
                 distance = segments[index];
-                if (total + distance >= motionDistance) {
+                if (nowDistance + distance >= motionDistance) {
                     x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
-                    t = HighBezierHelper.getT(motionDistance - total, distance, x, y, x1, y1, x2, y2, toX, toY, motionPrecision);
+                    t = HighBezierHelper.getT(motionDistance - nowDistance, distance, x, y, x1, y1, x2, y2, toX, toY, motionPrecision);
                     BezierHelper.getPointAndSet(t, x, y, x1, y1, x2, y2, toX, toY, to);
                     to.rotation = HighBezierHelper.getRotation(t, x, y, x1, y1, x2, y2, toX, toY);
                     return to;
@@ -19203,7 +19321,7 @@ const HighCurveHelper = {
                 distance = 0;
             }
             index++;
-            total += distance;
+            nowDistance += distance;
         }
         return to;
     },
@@ -19302,26 +19420,57 @@ const {updateMatrix: updateMatrix, updateAllMatrix: updateAllMatrix} = LeafHelpe
 
 const {updateBounds: updateBounds} = BranchHelper;
 
+const {toVertical: toVertical} = PointHelper;
+
 UI.addAttr("motionPath", undefined, motionPathType);
 
 UI.addAttr("motionPrecision", 1, motionPathType);
 
 UI.addAttr("motion", undefined, motionPathType);
 
+UI.addAttr("motionVertical", "below", motionPathType);
+
 UI.addAttr("motionRotation", true, motionPathType);
 
+ui$2.getMotionPath = function() {
+    return getMotionPath(this);
+};
+
 ui$2.getMotionPathData = function() {
     return getMotionPathData(getMotionPath(this));
 };
 
-ui$2.getMotionPoint = function(motionDistance) {
-    const path = getMotionPath(this);
-    const data = getMotionPathData(path);
+ui$2.getMotionContentHeight = function() {
+    return this.__layout.boxBounds.height;
+};
+
+ui$2.getMotionPoint = function(motionDistance, motionVertical, pathElement, offsetX = 0, offsetY = 0) {
+    if (!pathElement) pathElement = getMotionPath(this);
+    const data = getMotionPathData(pathElement);
     if (!data.total) return {};
-    const point = HighCurveHelper.getDistancePoint(data, motionDistance, path.motionPrecision);
-    MatrixHelper.toOuterPoint(path.localTransform, point);
+    const point = HighCurveHelper.getDistancePoint(data, motionDistance, pathElement.motionPrecision, offsetX);
     const {motionRotation: motionRotation} = this;
-    if (motionRotation === false) delete point.rotation; else if (isNumber(motionRotation)) point.rotation += motionRotation;
+    if (isNumber(motionRotation)) point.rotation += motionRotation;
+    let verticalType, verticalOffset;
+    if (isObject(motionVertical)) verticalType = motionVertical.type, verticalOffset = motionVertical.offset; else if (isNumber(motionVertical)) verticalOffset = motionVertical; else verticalType = motionVertical;
+    if (verticalType !== "below" || offsetY) {
+        const {rotation: rotation} = point, height = this.getMotionContentHeight();
+        if (verticalOffset) offsetY += verticalType === "above" ? -verticalOffset : verticalOffset;
+        switch (verticalType) {
+          case "above":
+            toVertical(point, rotation, -height + offsetY);
+            break;
+
+          case "center":
+            toVertical(point, rotation, -height / 2 + offsetY);
+            break;
+
+          case "below":
+          default:
+            toVertical(point, rotation, offsetY);
+        }
+    }
+    MatrixHelper.toOuterPoint(pathElement.localTransform, point);
     return point;
 };
 
@@ -19353,7 +19502,11 @@ function updateMotion(leaf) {
         const data = getMotionPathData(leaf);
         if (data.total) leaf.__.__pathForRender = HighCurveHelper.getDistancePath(data, motion, leaf.motionPrecision);
     } else {
-        leaf.set(leaf.getMotionPoint(motion));
+        if (leaf.motionText) leaf.__updateMotionText(); else {
+            const point = leaf.getMotionPoint(motion);
+            if (leaf.motionRotation === false) delete point.rotation;
+            leaf.set(point);
+        }
         if (!leaf.__hasAutoLayout) {
             if (leaf.isBranch) updateAllMatrix(leaf), updateBounds(leaf, leaf); else updateMatrix(leaf);
         }
@@ -19375,7 +19528,8 @@ function getMotionPath(leaf) {
 function getMotionPathData(leaf) {
     const data = leaf.__;
     if (data.__pathForMotion) return data.__pathForMotion;
-    return data.__pathForMotion = HighCurveHelper.getMotionPathData(leaf.getPath(true, true));
+    const path = data.__pathForMotion = HighCurveHelper.getMotionPathData(leaf.getPath(true, true));
+    return path;
 }
 
 function stateType(defaultValue, styleName) {
@@ -19870,7 +20024,7 @@ let Robot = class Robot extends UI {
             const data = this.__;
             const width = nowFrame.width / data.pixelRatio;
             const height = nowFrame.height / data.pixelRatio;
-            if (data.width !== width || data.height !== height) this.forceUpdate("width");
+            if (data.width !== width || data.height !== height) this.forceUpdate();
             data.__naturalWidth = width;
             data.__naturalHeight = height;
         }
@@ -21067,4 +21221,4 @@ function isSame(a, b) {
 
 Plugin.add("corner");
 
-export { AlignHelper, Animate, AnimateEasing, AnimateEvent, AnimateList, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseBox, EllipseBoxData, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, Flow, FourNumberHelper, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image, ImageBox, ImageBoxData, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferFilm, LeaferImage, LeaferTypeCreator, LeaferVideo, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathBox, PathBoxData, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonBox, PolygonBoxData, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Robot, RobotData, RotateEvent, Run, ScrollBar, Scroller, SelectArea, Selector, Star, StarBox, StarBoxData, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TouchEvent, TransformTool, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite$1 as isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, motionPathType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, scrollType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$3 as tempBounds, tempMatrix$3 as tempMatrix, tempPoint$6 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Animate, AnimateEasing, AnimateEvent, AnimateList, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseBox, EllipseBoxData, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, Flow, FourNumberHelper, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image, ImageBox, ImageBoxData, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferFilm, LeaferImage, LeaferTypeCreator, LeaferVideo, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathBox, PathBoxData, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonBox, PolygonBoxData, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Robot, RobotData, RotateEvent, Run, ScrollBar, Scroller, SelectArea, Selector, Star, StarBox, StarBoxData, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TouchEvent, TransformTool, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, doSurfaceType, editToolMergeConfigAttr, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite$1 as isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, motionPathType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, scrollType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$3 as tempBounds, tempMatrix$3 as tempMatrix, tempPoint$6 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };