@leafer-editor/worker 1.1.0 → 1.1.1

package/dist/worker.js

@@ -433,7 +433,7 @@ var LeaferUI = (function (exports) {
     const M$9 = MatrixHelper;
 
     const { toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3 } = MatrixHelper;
-    const { sin: sin$4, cos: cos$4, abs: abs$5, sqrt: sqrt$2, atan2: atan2$2, min: min$1, PI: PI$3 } = Math;
+    const { sin: sin$4, cos: cos$4, abs: abs$6, sqrt: sqrt$2, atan2: atan2$2, min: min$1, PI: PI$3 } = Math;
     const PointHelper = {
         defaultPoint: getPointData(),
         tempPoint: {},
@@ -522,8 +522,8 @@ var LeaferUI = (function (exports) {
             return getDistanceFrom(t.x, t.y, point.x, point.y);
         },
         getDistanceFrom(x1, y1, x2, y2) {
-            const x = abs$5(x2 - x1);
-            const y = abs$5(y2 - y1);
+            const x = abs$6(x2 - x1);
+            const y = abs$6(y2 - y1);
             return sqrt$2(x * x + y * y);
         },
         getMinDistanceFrom(x1, y1, x2, y2, x3, y3) {
@@ -1377,7 +1377,7 @@ var LeaferUI = (function (exports) {
     }
     const D$6 = Debug;
 
-    const debug$g = Debug.get('RunTime');
+    const debug$h = Debug.get('RunTime');
     const Run = {
         currentId: 0,
         currentName: '',
@@ -1395,7 +1395,7 @@ var LeaferUI = (function (exports) {
             const time = R.idMap[id], name = R.nameMap[id];
             const duration = microsecond ? (performance.now() - time) / 1000 : Date.now() - time;
             R.idMap[id] = R.nameMap[id] = R.nameToIdMap[name] = undefined;
-            debug$g.log(name, duration, 'ms');
+            debug$h.log(name, duration, 'ms');
         },
         endOfName(name, microsecond) {
             const id = R.nameToIdMap[name];
@@ -1409,18 +1409,18 @@ var LeaferUI = (function (exports) {
         console.error('need plugin: @leafer-in/' + name);
     }
 
-    const debug$f = Debug.get('UICreator');
+    const debug$g = Debug.get('UICreator');
     const UICreator = {
         list: {},
         register(UI) {
             const { __tag: tag } = UI.prototype;
             if (list$3[tag])
-                debug$f.repeat(tag);
+                debug$g.repeat(tag);
             list$3[tag] = UI;
         },
         get(tag, data, x, y, width, height) {
             if (!list$3[tag])
-                debug$f.error('not register ' + tag);
+                debug$g.error('not register ' + tag);
             const ui = new list$3[tag](data);
             if (x !== undefined) {
                 ui.x = x;
@@ -1436,7 +1436,7 @@ var LeaferUI = (function (exports) {
     };
     const { list: list$3 } = UICreator;
 
-    const debug$e = Debug.get('EventCreator');
+    const debug$f = Debug.get('EventCreator');
     const EventCreator = {
         nameList: {},
         register(Event) {
@@ -1444,7 +1444,7 @@ var LeaferUI = (function (exports) {
             Object.keys(Event).forEach(key => {
                 name = Event[key];
                 if (typeof name === 'string')
-                    nameList[name] && debug$e.repeat(name), nameList[name] = Event;
+                    nameList[name] && debug$f.repeat(name), nameList[name] = Event;
             });
         },
         changeName(oldName, newName) {
@@ -1516,17 +1516,19 @@ var LeaferUI = (function (exports) {
             assign(t, defaultData);
             return t;
         },
-        assign(t, merge) {
+        assign(t, merge, exclude) {
             let value;
             Object.keys(merge).forEach(key => {
-                var _a;
+                var _a, _b;
                 value = merge[key];
-                if ((value === null || value === void 0 ? void 0 : value.constructor) === Object) {
-                    (((_a = t[key]) === null || _a === void 0 ? void 0 : _a.constructor) === Object) ? assign(t[key], merge[key]) : t[key] = merge[key];
-                }
-                else {
-                    t[key] = merge[key];
+                if ((value === null || value === void 0 ? void 0 : value.constructor) === Object && ((_a = t[key]) === null || _a === void 0 ? void 0 : _a.constructor) === Object)
+                    return assign(t[key], merge[key], exclude && exclude[key]);
+                if (exclude && (key in exclude)) {
+                    if (((_b = exclude[key]) === null || _b === void 0 ? void 0 : _b.constructor) === Object)
+                        assign(t[key] = {}, merge[key], exclude[key]);
+                    return;
                 }
+                t[key] = merge[key];
             });
         },
         copyAttrs(t, from, include) {
@@ -2330,7 +2332,7 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil$1, abs: abs$4, PI: PI$2, sqrt: sqrt$1, pow } = Math;
+    const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil$1, abs: abs$5, PI: PI$2, sqrt: sqrt$1, pow } = Math;
     const { setPoint: setPoint$4, addPoint: addPoint$2 } = TwoPointBoundsHelper;
     const { set, toNumberPoints: toNumberPoints$1 } = PointHelper;
     const { M: M$8, L: L$9, C: C$8, Q: Q$7, Z: Z$7 } = PathCommandMap;
@@ -2403,7 +2405,7 @@ var LeaferUI = (function (exports) {
             let totalRadian = endRadian - startRadian;
             if (totalRadian < 0)
                 totalRadian += PI2;
-            if (totalRadian === PI$2 || (abs$4(BAx + BAy) < 1.e-12) || (abs$4(CBx + CBy) < 1.e-12)) {
+            if (totalRadian === PI$2 || (abs$5(BAx + BAy) < 1.e-12) || (abs$5(CBx + CBy) < 1.e-12)) {
                 if (data)
                     data.push(L$9, x1, y1);
                 if (setPointBounds) {
@@ -2445,7 +2447,7 @@ var LeaferUI = (function (exports) {
                 totalRadian -= PI2;
             if (anticlockwise)
                 totalRadian -= PI2;
-            const parts = ceil$1(abs$4(totalRadian / PI_2));
+            const parts = ceil$1(abs$5(totalRadian / PI_2));
             const partRadian = totalRadian / parts;
             const partRadian4Sin = sin$3(partRadian / 4);
             const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$3(partRadian / 2);
@@ -2598,7 +2600,7 @@ var LeaferUI = (function (exports) {
     const { M: M$7, m, L: L$8, l, H, h, V, v, C: C$7, c, S, s, Q: Q$6, q, T, t, A, a, Z: Z$6, z, N: N$5, D: D$5, X: X$5, G: G$5, F: F$6, O: O$6, P: P$5, U: U$5 } = PathCommandMap;
     const { rect: rect$3, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
     const { ellipticalArc } = EllipseHelper;
-    const debug$d = Debug.get('PathConvert');
+    const debug$e = Debug.get('PathConvert');
     const setEndPoint$1 = {};
     const PathConvert = {
         current: { dot: 0 },
@@ -2839,7 +2841,7 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$d.error(`command: ${command} [index:${i}]`, old);
+                        debug$e.error(`command: ${command} [index:${i}]`, old);
                         return data;
                 }
                 lastCommand = command;
@@ -2886,7 +2888,7 @@ var LeaferUI = (function (exports) {
 
     const { M: M$6, L: L$7, C: C$6, Q: Q$5, Z: Z$5, N: N$4, D: D$4, X: X$4, G: G$4, F: F$5, O: O$5, P: P$4, U: U$4 } = PathCommandMap;
     const { getMinDistanceFrom, getRadianFrom } = PointHelper;
-    const { tan, min, abs: abs$3 } = Math;
+    const { tan, min, abs: abs$4 } = Math;
     const startPoint = {};
     const PathCommandDataHelper = {
         beginPath(data) {
@@ -2949,7 +2951,7 @@ var LeaferUI = (function (exports) {
         arcTo(data, x1, y1, x2, y2, radius, lastX, lastY) {
             if (lastX !== undefined) {
                 const maxRadius = tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2) * (getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2) / 2);
-                data.push(U$4, x1, y1, x2, y2, min(radius, abs$3(maxRadius)));
+                data.push(U$4, x1, y1, x2, y2, min(radius, abs$4(maxRadius)));
             }
             else {
                 data.push(U$4, x1, y1, x2, y2, radius);
@@ -3064,7 +3066,7 @@ var LeaferUI = (function (exports) {
     }
 
     const { M: M$5, L: L$6, C: C$5, Q: Q$4, Z: Z$4, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$4, P: P$3, U: U$3 } = PathCommandMap;
-    const debug$c = Debug.get('PathDrawer');
+    const debug$d = Debug.get('PathDrawer');
     const PathDrawer = {
         drawPathByData(drawer, data) {
             if (!data)
@@ -3127,7 +3129,7 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$c.error(`command: ${command} [index:${i}]`, data);
+                        debug$d.error(`command: ${command} [index:${i}]`, data);
                         return;
                 }
             }
@@ -3137,7 +3139,7 @@ var LeaferUI = (function (exports) {
     const { M: M$4, L: L$5, C: C$4, Q: Q$3, Z: Z$3, N: N$2, D: D$2, X: X$2, G: G$2, F: F$3, O: O$3, P: P$2, U: U$2 } = PathCommandMap;
     const { toTwoPointBounds, toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc, ellipse: ellipse$1 } = BezierHelper;
     const { addPointBounds, copy: copy$b, addPoint: addPoint$1, setPoint: setPoint$3, addBounds, toBounds: toBounds$3 } = TwoPointBoundsHelper;
-    const debug$b = Debug.get('PathBounds');
+    const debug$c = Debug.get('PathBounds');
     let radius, radiusX, radiusY;
     const tempPointBounds = {};
     const setPointBounds = {};
@@ -3245,7 +3247,7 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$b.error(`command: ${command} [index:${i}]`, data);
+                        debug$c.error(`command: ${command} [index:${i}]`, data);
                         return;
                 }
             }
@@ -3361,7 +3363,7 @@ var LeaferUI = (function (exports) {
     const F$2 = FileHelper;
     F$2.opacityTypes.forEach(type => F$2.upperCaseTypeMap[type] = type.toUpperCase());
 
-    const debug$a = Debug.get('TaskProcessor');
+    const debug$b = Debug.get('TaskProcessor');
     class TaskItem {
         constructor(task) {
             this.parallel = true;
@@ -3376,7 +3378,7 @@ var LeaferUI = (function (exports) {
                         yield this.task();
                 }
                 catch (error) {
-                    debug$a.error(error);
+                    debug$b.error(error);
                 }
             });
         }
@@ -3894,6 +3896,8 @@ var LeaferUI = (function (exports) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
                 this.__setAttr(key, value) && (this.__layout.opacityChanged || this.__layout.opacityChange());
+                if (this.mask)
+                    checkMask(this);
             }
         }));
     }
@@ -3910,9 +3914,20 @@ var LeaferUI = (function (exports) {
                         this.__runAnimation('in');
                 }
                 doVisible(this, key, value, oldValue);
+                if (this.mask)
+                    checkMask(this);
             }
         }));
     }
+    function checkMask(leaf) {
+        const { parent } = leaf;
+        if (parent) {
+            const { __hasMask } = parent;
+            parent.__updateMask();
+            if (__hasMask !== parent.__hasMask)
+                parent.forceUpdate();
+        }
+    }
     function doVisible(leaf, key, value, oldValue) {
         if (leaf.__setAttr(key, value)) {
             leaf.__layout.opacityChanged || leaf.__layout.opacityChange();
@@ -4050,7 +4065,7 @@ var LeaferUI = (function (exports) {
         defineKey(data, key, property);
     }
 
-    const debug$9 = new Debug('rewrite');
+    const debug$a = new Debug('rewrite');
     const list$2 = [];
     const excludeNames = ['destroy', 'constructor'];
     function rewrite(method) {
@@ -4067,7 +4082,7 @@ var LeaferUI = (function (exports) {
         if (list$2.length) {
             list$2.forEach(item => {
                 if (error)
-                    debug$9.error(item.name, '需在Class上装饰@rewriteAble()');
+                    debug$a.error(item.name, '需在Class上装饰@rewriteAble()');
                 item.run();
             });
             list$2.length = 0;
@@ -4975,13 +4990,13 @@ var LeaferUI = (function (exports) {
     const LeafEventer = { on, on_, off, off_, once, emit: emit$2, emitEvent: emitEvent$1, hasEvent, destroyEventer: destroy };
 
     const { isFinite } = Number;
-    const debug$8 = Debug.get('setAttr');
+    const debug$9 = Debug.get('setAttr');
     const LeafDataProxy = {
         __setAttr(name, newValue, checkFiniteNumber) {
             if (this.leaferIsCreated) {
                 const oldValue = this.__.__getInput(name);
                 if (checkFiniteNumber && !isFinite(newValue) && newValue !== undefined) {
-                    debug$8.warn(this.innerName, name, newValue);
+                    debug$9.warn(this.innerName, name, newValue);
                     newValue = undefined;
                 }
                 if (typeof newValue === 'object' || oldValue !== newValue) {
@@ -5437,8 +5452,8 @@ var LeaferUI = (function (exports) {
             canvas.clearRect(r.x, r.y, r.width, r.height);
             canvas.restore();
         }
-        __updateMask(value) {
-            this.__hasMask = value ? true : this.children.some(item => item.__.mask);
+        __updateMask(_value) {
+            this.__hasMask = this.children.some(item => item.__.mask && item.__.visible && item.__.opacity);
         }
         __renderMask(_canvas, _options) { }
         __getNowWorld(options) {
@@ -5678,9 +5693,10 @@ var LeaferUI = (function (exports) {
         useModule(LeafRender)
     ], exports.Leaf);
 
-    const { setListWithFn } = BoundsHelper;
+    const { setListWithFn: setListWithFn$1 } = BoundsHelper;
     const { sort } = BranchHelper;
     const { localBoxBounds, localStrokeBounds, localRenderBounds, maskLocalBoxBounds, maskLocalStrokeBounds, maskLocalRenderBounds } = LeafBoundsHelper;
+    const debug$8 = new Debug('Branch');
     exports.Branch = class Branch extends exports.Leaf {
         __updateStrokeSpread() {
             const { children } = this;
@@ -5699,13 +5715,13 @@ var LeaferUI = (function (exports) {
             return 0;
         }
         __updateBoxBounds() {
-            setListWithFn(this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds);
+            setListWithFn$1(this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds);
         }
         __updateStrokeBounds() {
-            setListWithFn(this.__layout.strokeBounds, this.children, this.__hasMask ? maskLocalStrokeBounds : localStrokeBounds);
+            setListWithFn$1(this.__layout.strokeBounds, this.children, this.__hasMask ? maskLocalStrokeBounds : localStrokeBounds);
         }
         __updateRenderBounds() {
-            setListWithFn(this.__layout.renderBounds, this.children, this.__hasMask ? maskLocalRenderBounds : localRenderBounds);
+            setListWithFn$1(this.__layout.renderBounds, this.children, this.__hasMask ? maskLocalRenderBounds : localRenderBounds);
         }
         __updateSortChildren() {
             let affectSort;
@@ -5721,8 +5737,8 @@ var LeaferUI = (function (exports) {
             }
         }
         add(child, index) {
-            if (child === this)
-                return;
+            if (child === this || child.destroyed)
+                return debug$8.warn('add self or destroyed');
             const noIndex = index === undefined;
             if (!child.__) {
                 if (child instanceof Array)
@@ -5736,8 +5752,9 @@ var LeaferUI = (function (exports) {
             noIndex ? this.children.push(child) : this.children.splice(index, 0, child);
             if (child.isBranch)
                 this.__.__childBranchNumber = (this.__.__childBranchNumber || 0) + 1;
-            child.__layout.boxChanged || child.__layout.boxChange();
-            child.__layout.matrixChanged || child.__layout.matrixChange();
+            const childLayout = child.__layout;
+            childLayout.boxChanged || childLayout.boxChange();
+            childLayout.matrixChanged || childLayout.matrixChange();
             if (child.__bubbleMap)
                 child.__emitLifeEvent(ChildEvent.ADD);
             if (this.leafer) {
@@ -5975,7 +5992,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.1.0";
+    const version = "1.1.1";
 
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() { return true; }
@@ -6213,7 +6230,7 @@ var LeaferUI = (function (exports) {
         });
     }
 
-    const { worldBounds } = LeafBoundsHelper;
+    const { worldBounds: worldBounds$1 } = LeafBoundsHelper;
     const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
     class LayoutBlockData {
         constructor(list) {
@@ -6225,7 +6242,7 @@ var LeaferUI = (function (exports) {
             this.updatedList = list;
         }
         setBefore() {
-            this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
+            this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds$1);
         }
         setAfter() {
             const { list } = this.updatedList;
@@ -6233,7 +6250,7 @@ var LeaferUI = (function (exports) {
                 this.afterBounds.set(bigBounds);
             }
             else {
-                this.afterBounds.setListWithFn(list, worldBounds);
+                this.afterBounds.setListWithFn(list, worldBounds$1);
             }
             this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
         }
@@ -6420,25 +6437,25 @@ var LeaferUI = (function (exports) {
             if (userConfig)
                 this.config = DataHelper.default(userConfig, this.config);
             this.__listenEvents();
-            this.__requestRender();
         }
         start() {
             this.running = true;
+            this.update(false);
         }
         stop() {
             this.running = false;
         }
-        update() {
-            this.changed = true;
+        update(change = true) {
+            if (!this.changed)
+                this.changed = change;
+            this.__requestRender();
         }
         requestLayout() {
             this.target.emit(LayoutEvent.REQUEST);
         }
         render(callback) {
-            if (!(this.running && this.canvas.view)) {
-                this.changed = true;
-                return;
-            }
+            if (!(this.running && this.canvas.view))
+                return this.update();
             const { target } = this;
             this.times = 0;
             this.totalBounds = new Bounds();
@@ -6572,16 +6589,17 @@ var LeaferUI = (function (exports) {
             }
         }
         __requestRender() {
-            const startTime = Date.now();
+            if (this.requestTime)
+                return;
+            const requestTime = this.requestTime = Date.now();
             Platform.requestRender(() => {
-                this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - startTime)));
+                this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
+                this.requestTime = 0;
                 if (this.running) {
                     if (this.changed && this.canvas.view)
                         this.render();
                     this.target.emit(RenderEvent.NEXT);
                 }
-                if (this.target)
-                    this.__requestRender();
             });
         }
         __onResize(e) {
@@ -6597,7 +6615,7 @@ var LeaferUI = (function (exports) {
                 }
             }
             this.addBlock(new Bounds(0, 0, 1, 1));
-            this.changed = true;
+            this.update();
         }
         __onLayoutEnd(event) {
             if (event.data)
@@ -7005,7 +7023,7 @@ var LeaferUI = (function (exports) {
                 return true;
             return t.fill && this.__hasStroke;
         }
-        get __clipAfterFill() { return (this.cornerRadius || this.__pathInputed); }
+        get __clipAfterFill() { const t = this; return (t.cornerRadius || t.innerShadow || t.__pathInputed); }
         get __autoWidth() { return !this._width; }
         get __autoHeight() { return !this._height; }
         get __autoSide() { return !this._width || !this._height; }
@@ -7119,7 +7137,7 @@ var LeaferUI = (function (exports) {
 
     class BoxData extends GroupData {
         get __boxStroke() { return !this.__pathInputed; }
-        get __drawAfterFill() { return this.overflow === 'hide' && this.__clipAfterFill && this.__leaf.children.length; }
+        get __drawAfterFill() { const t = this; return (t.overflow === 'hide' && (t.__clipAfterFill || t.innerShadow) && t.__leaf.children.length); }
         get __clipAfterFill() { return this.__leaf.isOverflow || super.__clipAfterFill; }
     }
 
@@ -7779,20 +7797,10 @@ var LeaferUI = (function (exports) {
         constructor(userConfig, data) {
             super(data);
             this.config = {
-                type: 'design',
                 start: true,
                 hittable: true,
                 smooth: true,
-                lazySpeard: 100,
-                zoom: {
-                    min: 0.01,
-                    max: 256
-                },
-                move: {
-                    holdSpaceKey: true,
-                    holdMiddleKey: true,
-                    autoDistance: 2
-                }
+                lazySpeard: 100
             };
             this.leafs = 0;
             this.__eventIds = [];
@@ -7809,23 +7817,27 @@ var LeaferUI = (function (exports) {
         init(userConfig, parentApp) {
             if (this.canvas)
                 return;
-            this.__setLeafer(this);
-            if (userConfig)
-                DataHelper.assign(this.config, userConfig);
             let start;
             const { config } = this;
-            this.initType(config.type);
+            this.__setLeafer(this);
+            if (parentApp) {
+                this.parentApp = parentApp;
+                this.__bindApp(parentApp);
+                start = parentApp.running;
+            }
+            if (userConfig) {
+                this.parent = parentApp;
+                this.initType(userConfig.type);
+                this.parent = undefined;
+                DataHelper.assign(config, userConfig);
+            }
             const canvas = this.canvas = Creator.canvas(config);
             this.__controllers.push(this.renderer = Creator.renderer(this, canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
             if (this.isApp)
                 this.__setApp();
             this.__checkAutoLayout(config, parentApp);
             this.view = canvas.view;
-            if (parentApp) {
-                this.__bindApp(parentApp);
-                start = parentApp.running;
-            }
-            else {
+            if (!parentApp) {
                 this.selector = Creator.selector(this);
                 this.interaction = Creator.interaction(this, canvas, this.selector, config);
                 if (this.interaction) {
@@ -7882,7 +7894,11 @@ var LeaferUI = (function (exports) {
         forceRender(bounds) {
             this.renderer.addBlock(bounds ? new Bounds(bounds) : this.canvas.bounds);
             if (this.viewReady)
-                this.renderer.update();
+                this.renderer.render();
+        }
+        requestRender(change = false) {
+            if (this.renderer)
+                this.renderer.update(change);
         }
         updateCursor(cursor) {
             const i = this.interaction;
@@ -7990,8 +8006,10 @@ var LeaferUI = (function (exports) {
                 const { imageReady } = this;
                 if (imageReady && !this.viewCompleted)
                     this.__checkViewCompleted();
-                if (!imageReady)
+                if (!imageReady) {
                     this.viewCompleted = false;
+                    this.requestRender();
+                }
             }
         }
         __checkViewCompleted(emit = true) {
@@ -8049,6 +8067,7 @@ var LeaferUI = (function (exports) {
             }
             else
                 list.push(item);
+            this.requestRender();
         }
         zoom(_zoomType, _padding, _fixedScale) {
             return needPlugin('view');
@@ -8102,7 +8121,7 @@ var LeaferUI = (function (exports) {
                             this.canvasManager.destroy();
                         }
                         this.canvas.destroy();
-                        this.config.view = this.view = null;
+                        this.config.view = this.view = this.parentApp = null;
                         if (this.userConfig)
                             this.userConfig.view = null;
                         super.destroy();
@@ -8829,9 +8848,9 @@ var LeaferUI = (function (exports) {
                 if (ground)
                     this.ground = this.addLeafer(ground);
                 if (tree || editor)
-                    this.tree = this.addLeafer(tree);
+                    this.tree = this.addLeafer(tree || { type: userConfig.type || 'design' });
                 if (sky || editor)
-                    this.sky = this.addLeafer(sky || { type: 'draw', usePartRender: false });
+                    this.sky = this.addLeafer(sky);
                 if (editor)
                     this.sky.add(this.editor = Creator.editor(editor));
             }
@@ -9185,184 +9204,7 @@ var LeaferUI = (function (exports) {
         registerUIEvent()
     ], exports.KeyEvent);
 
-    function addInteractionWindow(leafer) {
-        if (leafer.isApp)
-            return;
-        leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, (e) => {
-            leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
-        }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
-            const { zoomLayer } = leafer;
-            const changeScale = leafer.getValidScale(e.scale);
-            if (changeScale !== 1) {
-                PointHelper.scaleOf(zoomLayer, e, changeScale);
-                zoomLayer.scale = zoomLayer.__.scaleX * changeScale;
-            }
-        }));
-    }
-
-    function document$1(leafer) {
-        addInteractionWindow(leafer);
-        const { move, zoom } = leafer.config;
-        move.scroll = 'limit';
-        zoom.min = 1;
-    }
-
-    function block(leafer) {
-        const { config } = leafer;
-        (config.wheel || (config.wheel = {})).preventDefault = false;
-        (config.touch || (config.touch = {})).preventDefault = 'auto';
-    }
-
-    const debug$3 = Debug.get('LeaferTypeCreator');
-    const LeaferTypeCreator = {
-        list: {},
-        register(name, fn) {
-            list$1[name] && debug$3.repeat(name);
-            list$1[name] = fn;
-        },
-        run(name, leafer) {
-            const fn = list$1[name];
-            fn && fn(leafer);
-        }
-    };
-    const { list: list$1, register } = LeaferTypeCreator;
-    register('design', addInteractionWindow);
-    register('document', document$1);
-    register('block', block);
-
-    const leafer = exports.Leafer.prototype;
-    leafer.initType = function (type) {
-        LeaferTypeCreator.run(type, this);
-    };
-    leafer.getValidMove = function (moveX, moveY) {
-        const { scroll, disabled } = this.app.config.move;
-        if (scroll) {
-            Math.abs(moveX) > Math.abs(moveY) ? moveY = 0 : moveX = 0;
-            if (scroll === 'limit') {
-                const { x, y, width, height } = new Bounds(this.__world).addPoint(this.zoomLayer);
-                const right = x + width - this.width, bottom = y + height - this.height;
-                if (x >= 0 && right <= 0)
-                    moveX = 0;
-                else if (moveX > 0) {
-                    if (x + moveX > 0)
-                        moveX = -x;
-                }
-                else if (moveX < 0 && right + moveX < 0)
-                    moveX = -right;
-                if (y >= 0 && bottom <= 0)
-                    moveY = 0;
-                else if (moveY > 0) {
-                    if (y + moveY > 0)
-                        moveY = -y;
-                }
-                else if (moveY < 0 && bottom + moveY < 0)
-                    moveY = -bottom;
-            }
-        }
-        return { x: disabled ? 0 : moveX, y: disabled ? 0 : moveY };
-    };
-    leafer.getValidScale = function (changeScale) {
-        const { scaleX } = this.zoomLayer.__, { min, max, disabled } = this.app.config.zoom, absScale = Math.abs(scaleX * changeScale);
-        if (absScale < min)
-            changeScale = min / scaleX;
-        else if (absScale > max)
-            changeScale = max / scaleX;
-        return disabled ? 1 : changeScale;
-    };
-
-    class Transformer {
-        get transforming() { return !!(this.moveData || this.zoomData || this.rotateData); }
-        constructor(interaction) {
-            this.interaction = interaction;
-        }
-        move(data) {
-            const { interaction } = this;
-            if (!data.moveType)
-                data.moveType = 'move';
-            if (!this.moveData) {
-                const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
-                data.path = path;
-                this.moveData = Object.assign(Object.assign({}, data), { moveX: 0, moveY: 0 });
-                interaction.cancelHover();
-                interaction.emit(exports.MoveEvent.START, this.moveData);
-            }
-            data.path = this.moveData.path;
-            interaction.emit(exports.MoveEvent.BEFORE_MOVE, data);
-            interaction.emit(exports.MoveEvent.MOVE, data);
-            this.transformEndWait();
-        }
-        zoom(data) {
-            const { interaction } = this;
-            if (!this.zoomData) {
-                const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
-                data.path = path;
-                this.zoomData = Object.assign(Object.assign({}, data), { scale: 1 });
-                interaction.cancelHover();
-                interaction.emit(exports.ZoomEvent.START, this.zoomData);
-            }
-            data.path = this.zoomData.path;
-            interaction.emit(exports.ZoomEvent.BEFORE_ZOOM, data);
-            interaction.emit(exports.ZoomEvent.ZOOM, data);
-            this.transformEndWait();
-        }
-        rotate(data) {
-            const { interaction } = this;
-            if (!this.rotateData) {
-                const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
-                data.path = path;
-                this.rotateData = Object.assign(Object.assign({}, data), { rotation: 0 });
-                interaction.cancelHover();
-                interaction.emit(exports.RotateEvent.START, this.rotateData);
-            }
-            data.path = this.rotateData.path;
-            interaction.emit(exports.RotateEvent.BEFORE_ROTATE, data);
-            interaction.emit(exports.RotateEvent.ROTATE, data);
-            this.transformEndWait();
-        }
-        transformEndWait() {
-            clearTimeout(this.transformTimer);
-            this.transformTimer = setTimeout(() => {
-                this.transformEnd();
-            }, this.interaction.config.pointer.transformTime);
-        }
-        transformEnd() {
-            this.moveEnd();
-            this.zoomEnd();
-            this.rotateEnd();
-        }
-        moveEnd() {
-            if (this.moveData) {
-                this.interaction.emit(exports.MoveEvent.END, this.moveData);
-                this.moveData = null;
-            }
-        }
-        zoomEnd() {
-            if (this.zoomData) {
-                this.interaction.emit(exports.ZoomEvent.END, this.zoomData);
-                this.zoomData = null;
-            }
-        }
-        rotateEnd() {
-            if (this.rotateData) {
-                this.interaction.emit(exports.RotateEvent.END, this.rotateData);
-                this.rotateData = null;
-            }
-        }
-        destroy() {
-            this.zoomData = this.moveData = this.rotateData = null;
-        }
-    }
-
     const InteractionHelper = {
-        getMoveEventData(center, move, event) {
-            return Object.assign(Object.assign({}, event), { x: center.x, y: center.y, moveX: move.x, moveY: move.y });
-        },
-        getRotateEventData(center, angle, event) {
-            return Object.assign(Object.assign({}, event), { x: center.x, y: center.y, rotation: angle });
-        },
-        getZoomEventData(center, scale, event) {
-            return Object.assign(Object.assign({}, event), { x: center.x, y: center.y, scale });
-        },
         getDragEventData(startPoint, lastPoint, event) {
             return Object.assign(Object.assign({}, event), { x: event.x, y: event.y, moveX: event.x - lastPoint.x, moveY: event.y - lastPoint.y, totalX: event.x - startPoint.x, totalY: event.y - startPoint.y });
         },
@@ -9371,18 +9213,14 @@ var LeaferUI = (function (exports) {
                 data });
         },
         getSwipeDirection(angle) {
-            if (angle < -45 && angle > -135) {
+            if (angle < -45 && angle > -135)
                 return exports.SwipeEvent.UP;
-            }
-            else if (angle > 45 && angle < 135) {
+            else if (angle > 45 && angle < 135)
                 return exports.SwipeEvent.DOWN;
-            }
-            else if (angle <= 45 && angle >= -45) {
+            else if (angle <= 45 && angle >= -45)
                 return exports.SwipeEvent.RIGHT;
-            }
-            else {
+            else
                 return exports.SwipeEvent.LEFT;
-            }
         },
         getSwipeEventData(startPoint, lastDragData, event) {
             return Object.assign(Object.assign({}, event), { moveX: lastDragData.moveX, moveY: lastDragData.moveY, totalX: event.x - startPoint.x, totalY: event.y - startPoint.y, type: I.getSwipeDirection(PointHelper.getAngle(startPoint, event)) });
@@ -9455,9 +9293,8 @@ var LeaferUI = (function (exports) {
                     interaction.emit(exports.MoveEvent.START, this.dragData);
                 }
             }
-            if (!this.moving) {
+            if (!this.moving)
                 this.dragStart(data, canDrag);
-            }
             this.drag(data);
         }
         dragStart(data, canDrag) {
@@ -9535,16 +9372,9 @@ var LeaferUI = (function (exports) {
         dragEnd(data, speed) {
             if (!this.dragging && !this.moving)
                 return;
-            const { moveX, moveY } = this.dragData;
-            if (this.interaction.config.move.dragAnimate && this.canAnimate && this.moving && (Math.abs(moveX) > 1 || Math.abs(moveY) > 1)) {
-                data = Object.assign({}, data);
-                speed = (speed || (data.pointerType === 'touch' ? 2 : 1)) * 0.9;
-                PointHelper.move(data, moveX * speed, moveY * speed);
-                this.drag(data);
-                this.animate(() => { this.dragEnd(data, 1); });
-            }
-            else
-                this.dragEndReal(data);
+            if (this.checkDragEndAnimate(data, speed))
+                return;
+            this.dragEndReal(data);
         }
         dragEndReal(data) {
             const { interaction, downData, dragData } = this;
@@ -9571,12 +9401,6 @@ var LeaferUI = (function (exports) {
             this.dragReset();
             this.animate(null, 'off');
         }
-        animate(func, off) {
-            const animateWait = func || this.animateWait;
-            if (animateWait)
-                this.interaction.target.nextRender(animateWait, null, off);
-            this.animateWait = func;
-        }
         swipe(data, downData, dragData, endDragData) {
             const { interaction } = this;
             if (PointHelper.getDistance(downData, data) > interaction.config.pointer.swipeDistance) {
@@ -9593,45 +9417,17 @@ var LeaferUI = (function (exports) {
         dragReset() {
             exports.DragEvent.list = exports.DragEvent.data = this.draggableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
         }
-        checkDragOut(data) {
-            const { interaction } = this;
-            this.autoMoveCancel();
-            if (this.dragging && !interaction.shrinkCanvasBounds.hitPoint(data))
-                this.autoMoveOnDragOut(data);
-        }
-        autoMoveOnDragOut(data) {
-            const { interaction, downData, canDragOut } = this;
-            const { autoDistance, dragOut } = interaction.config.move;
-            if (!dragOut || !canDragOut || !autoDistance)
-                return;
-            const bounds = interaction.shrinkCanvasBounds;
-            const { x, y } = bounds;
-            const right = BoundsHelper.maxX(bounds);
-            const bottom = BoundsHelper.maxY(bounds);
-            const moveX = data.x < x ? autoDistance : (right < data.x ? -autoDistance : 0);
-            const moveY = data.y < y ? autoDistance : (bottom < data.y ? -autoDistance : 0);
-            let totalX = 0, totalY = 0;
-            this.autoMoveTimer = setInterval(() => {
-                totalX += moveX;
-                totalY += moveY;
-                PointHelper.move(downData, moveX, moveY);
-                PointHelper.move(this.dragData, moveX, moveY);
-                interaction.move(Object.assign(Object.assign({}, data), { moveX, moveY, totalX, totalY, moveType: 'drag' }));
-                interaction.pointerMoveReal(data);
-            }, 10);
-        }
-        autoMoveCancel() {
-            if (this.autoMoveTimer) {
-                clearInterval(this.autoMoveTimer);
-                this.autoMoveTimer = 0;
-            }
-        }
+        checkDragEndAnimate(_data, _speed) { return false; }
+        animate(_func, _off) { }
+        checkDragOut(_data) { }
+        autoMoveOnDragOut(_data) { }
+        autoMoveCancel() { }
         destroy() {
             this.dragReset();
         }
     }
 
-    const debug$2 = Debug.get('emit');
+    const debug$3 = Debug.get('emit');
     function emit$1(type, data, path, excludePath) {
         if (!path && !data.path)
             return;
@@ -9661,7 +9457,7 @@ var LeaferUI = (function (exports) {
             }
         }
         catch (e) {
-            debug$2.error(e);
+            debug$3.error(e);
         }
     }
     const allowTypes = ['move', 'zoom', 'rotate', 'key'];
@@ -9695,28 +9491,12 @@ var LeaferUI = (function (exports) {
         return excludePath && excludePath.has(leaf);
     }
 
-    const MultiTouchHelper = {
-        getData(list) {
-            const a = list[0];
-            const b = list[1];
-            const lastCenter = PointHelper.getCenter(a.from, b.from);
-            const center = PointHelper.getCenter(a.to, b.to);
-            const move = { x: center.x - lastCenter.x, y: center.y - lastCenter.y };
-            const lastDistance = PointHelper.getDistance(a.from, b.from);
-            const distance = PointHelper.getDistance(a.to, b.to);
-            const scale = distance / lastDistance;
-            const angle = PointHelper.getRotation(a.from, b.from, a.to, b.to);
-            return { move, scale, angle, center };
-        }
-    };
-
     const config$1 = {
         wheel: {
             zoomSpeed: 0.5,
             moveSpeed: 0.5,
             rotateSpeed: 0.5,
             delta: { x: 80 / 4, y: 8.0 },
-            preventDefault: true
         },
         pointer: {
             hitRadius: 5,
@@ -9727,17 +9507,18 @@ var LeaferUI = (function (exports) {
             dragHover: true,
             dragDistance: 2,
             swipeDistance: 20,
-            preventDefaultMenu: true
         },
         touch: {
-            preventDefault: true
+            preventDefault: 'auto'
         },
         multiTouch: {},
+        move: { autoDistance: 2 },
+        zoom: {},
         cursor: true,
         keyEvent: true
     };
 
-    const { pathHasEventType, getMoveEventData, getZoomEventData, getRotateEventData, pathCanDrag, pathHasOutside } = InteractionHelper;
+    const { pathHasEventType, pathCanDrag, pathHasOutside } = InteractionHelper;
     class InteractionBase {
         get dragging() { return this.dragger.dragging; }
         get transforming() { return this.transformer.transforming; }
@@ -9759,7 +9540,7 @@ var LeaferUI = (function (exports) {
             this.canvas = canvas;
             this.selector = selector;
             this.defaultPath = new LeafList(target);
-            this.transformer = new Transformer(this);
+            this.createTransformer();
             this.dragger = new Dragger(this);
             if (userConfig)
                 this.config = DataHelper.default(userConfig, this.config);
@@ -9860,14 +9641,6 @@ var LeaferUI = (function (exports) {
             data.isCancel = true;
             this.pointerUp(data);
         }
-        multiTouch(data, list) {
-            if (this.config.multiTouch.disabled)
-                return;
-            const { move, angle, scale, center } = MultiTouchHelper.getData(list);
-            this.rotate(getRotateEventData(center, angle, data));
-            this.zoom(getZoomEventData(center, scale, data));
-            this.move(getMoveEventData(center, move, data));
-        }
         menu(data) {
             this.findPath(data);
             this.emit(exports.PointerEvent.MENU, data);
@@ -9881,18 +9654,13 @@ var LeaferUI = (function (exports) {
                 this.waitRightTap = this.waitMenuTap = false;
             }
         }
-        move(data) {
-            this.transformer.move(data);
-        }
-        zoom(data) {
-            this.transformer.zoom(data);
-        }
-        rotate(data) {
-            this.transformer.rotate(data);
-        }
-        transformEnd() {
-            this.transformer.transformEnd();
-        }
+        createTransformer() { }
+        move(_data) { }
+        zoom(_data) { }
+        rotate(_data) { }
+        transformEnd() { }
+        wheel(_data) { }
+        multiTouch(_data, _list) { }
         keyDown(data) {
             if (!this.config.keyEvent)
                 return;
@@ -10130,8 +9898,9 @@ var LeaferUI = (function (exports) {
             this.longPressed = false;
         }
         __onResize() {
+            const { dragOut } = this.m;
             this.shrinkCanvasBounds = new Bounds(this.canvas.bounds);
-            this.shrinkCanvasBounds.spread(-2);
+            this.shrinkCanvasBounds.spread(-(typeof dragOut === 'number' ? dragOut : 2));
         }
         __listenEvents() {
             const { target } = this;
@@ -10151,7 +9920,8 @@ var LeaferUI = (function (exports) {
                 this.stop();
                 this.__removeListenEvents();
                 this.dragger.destroy();
-                this.transformer.destroy();
+                if (this.transformer)
+                    this.transformer.destroy();
                 this.downData = this.overPath = this.enterPath = null;
             }
         }
@@ -10877,13 +10647,13 @@ var LeaferUI = (function (exports) {
     }
 
     const { get: get$1, scale: scale$2, copy: copy$4 } = MatrixHelper;
-    const { ceil, abs: abs$2 } = Math;
+    const { ceil, abs: abs$3 } = Math;
     function createPattern(ui, paint, pixelRatio) {
         let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
         const id = scaleX + '-' + scaleY + '-' + pixelRatio;
         if (paint.patternId !== id && !ui.destroyed) {
-            scaleX = abs$2(scaleX);
-            scaleY = abs$2(scaleY);
+            scaleX = abs$3(scaleX);
+            scaleY = abs$3(scaleY);
             const { image, data } = paint;
             let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, repeat } = data;
             if (sx) {
@@ -10939,7 +10709,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { abs: abs$1 } = Math;
+    const { abs: abs$2 } = Math;
     function checkImage(ui, canvas, paint, allowPaint) {
         const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
         const { pixelRatio } = canvas;
@@ -10951,8 +10721,8 @@ var LeaferUI = (function (exports) {
             if (allowPaint) {
                 if (!data.repeat) {
                     let { width, height } = data;
-                    width *= abs$1(scaleX) * pixelRatio;
-                    height *= abs$1(scaleY) * pixelRatio;
+                    width *= abs$2(scaleX) * pixelRatio;
+                    height *= abs$2(scaleY) * pixelRatio;
                     if (data.scaleX) {
                         width *= data.scaleX;
                         height *= data.scaleY;
@@ -11431,15 +11201,15 @@ var LeaferUI = (function (exports) {
     const { Letter, Single, Before, After, Symbol, Break } = CharType;
     let word, row, wordWidth, rowWidth, realWidth;
     let char, charWidth, startCharSize, charSize, charType, lastCharType, langBreak, afterBreak, paraStart;
-    let textDrawData, rows = [], bounds$1, findMaxWidth;
+    let textDrawData, rows = [], bounds$3, findMaxWidth;
     function createRows(drawData, content, style) {
         textDrawData = drawData;
         rows = drawData.rows;
-        bounds$1 = drawData.bounds;
-        findMaxWidth = !bounds$1.width && !style.autoSizeAlign;
+        bounds$3 = drawData.bounds;
+        findMaxWidth = !bounds$3.width && !style.autoSizeAlign;
         const { __letterSpacing, paraIndent, textCase } = style;
         const { canvas } = Platform;
-        const { width, height } = bounds$1;
+        const { width, height } = bounds$3;
         const charMode = width || height || __letterSpacing || (textCase !== 'none');
         if (charMode) {
             const wrap = style.textWrap !== 'none';
@@ -11553,7 +11323,7 @@ var LeaferUI = (function (exports) {
             startCharSize = 0;
         }
         row.width = rowWidth;
-        if (bounds$1.width)
+        if (bounds$3.width)
             trimRight(row);
         else if (findMaxWidth)
             setMaxWidth();
@@ -11990,7 +11760,7 @@ var LeaferUI = (function (exports) {
     }
 
     const canvas = LeaferCanvasBase.prototype;
-    const debug$1 = Debug.get('@leafer-ui/export');
+    const debug$2 = Debug.get('@leafer-ui/export');
     canvas.export = function (filename, options) {
         const { quality, blob } = FileHelper.getExportOptions(options);
         if (filename.includes('.'))
@@ -12005,7 +11775,7 @@ var LeaferUI = (function (exports) {
             Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
                 resolve(blob);
             }).catch((e) => {
-                debug$1.error(e);
+                debug$2.error(e);
                 resolve(null);
             });
         });
@@ -12018,7 +11788,7 @@ var LeaferUI = (function (exports) {
             Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
                 resolve(true);
             }).catch((e) => {
-                debug$1.error(e);
+                debug$2.error(e);
                 resolve(false);
             });
         });
@@ -12308,9 +12078,12 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    const matrix = MatrixHelper.get();
-    const { abs } = Math;
+    const { abs: abs$1 } = Math;
     const { copy: copy$2, scale: scale$1 } = MatrixHelper;
+    const { setListWithFn } = BoundsHelper;
+    const { worldBounds } = LeafBoundsHelper;
+    const matrix = getMatrixData();
+    const bounds$2 = getBoundsData();
     class Stroker extends exports.UI {
         constructor() {
             super();
@@ -12321,6 +12094,17 @@ var LeaferUI = (function (exports) {
         setTarget(target, style) {
             this.set(style);
             this.target = target;
+            this.update();
+        }
+        update() {
+            const { list } = this;
+            if (list.length) {
+                setListWithFn(bounds$2, list, worldBounds);
+                this.set(bounds$2);
+            }
+            else {
+                this.width = this.height = 1;
+            }
         }
         __draw(canvas, options) {
             const { list } = this;
@@ -12330,8 +12114,8 @@ var LeaferUI = (function (exports) {
                 for (let i = 0; i < list.length; i++) {
                     leaf = list[i];
                     const { worldTransform, worldRenderBounds } = leaf;
-                    if (bounds && bounds.hit(worldRenderBounds, options.matrix)) {
-                        const aScaleX = abs(worldTransform.scaleX), aScaleY = abs(worldTransform.scaleY);
+                    if (!bounds || bounds.hit(worldRenderBounds, options.matrix)) {
+                        const aScaleX = abs$1(worldTransform.scaleX), aScaleY = abs$1(worldTransform.scaleY);
                         if (aScaleX !== aScaleY) {
                             copy$2(matrix, worldTransform);
                             scale$1(matrix, 1 / aScaleX, 1 / aScaleY);
@@ -12348,7 +12132,7 @@ var LeaferUI = (function (exports) {
                                 leaf.__drawPath(canvas);
                             else
                                 leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
-                            data.strokeWidth = strokeWidth / abs(worldTransform.scaleX);
+                            data.strokeWidth = strokeWidth / abs$1(worldTransform.scaleX);
                         }
                         if (stroke)
                             typeof stroke === 'string' ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas);
@@ -12370,7 +12154,6 @@ var LeaferUI = (function (exports) {
     function onTarget$1(stroker) {
         const value = stroker.target;
         stroker.list = value ? (value instanceof Array ? value : [value]) : [];
-        stroker.forceUpdate();
     }
 
     class SelectArea extends exports.Group {
@@ -12455,8 +12238,8 @@ var LeaferUI = (function (exports) {
             }
         }
         update() {
-            if (this.targetStroker.target)
-                this.targetStroker.forceUpdate();
+            this.hoverStroker.update();
+            this.targetStroker.update();
         }
         onPointerMove(e) {
             const { app, editor } = this;
@@ -13274,11 +13057,11 @@ ${filterStyle}
         skewable: true
     };
 
-    const bounds = new Bounds();
+    const bounds$1 = new Bounds();
     function simulate(editor) {
         const { simulateTarget, list } = editor;
         const { zoomLayer } = list[0].leafer.zoomLayer;
-        simulateTarget.safeChange(() => simulateTarget.reset(bounds.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page')).get()));
+        simulateTarget.safeChange(() => simulateTarget.reset(bounds$1.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page')).get()));
         zoomLayer.add(simulateTarget);
     }
 
@@ -13374,7 +13157,7 @@ ${filterStyle}
         }
     };
 
-    const debug = Debug.get('EditToolCreator');
+    const debug$1 = Debug.get('EditToolCreator');
     function registerEditTool() {
         return (target) => {
             EditToolCreator.register(target);
@@ -13385,14 +13168,14 @@ ${filterStyle}
         list: {},
         register(EditTool) {
             const { tag } = EditTool.prototype;
-            list[tag] && debug.repeat(tag);
-            list[tag] = EditTool;
+            list$1[tag] && debug$1.repeat(tag);
+            list$1[tag] = EditTool;
         },
         get(tag, editor) {
-            return new list[tag](editor);
+            return new list$1[tag](editor);
         }
     };
-    const { list } = EditToolCreator;
+    const { list: list$1 } = EditToolCreator;
 
     class InnerEditorEvent extends EditorEvent {
         constructor(type, data) {
@@ -14109,6 +13892,349 @@ ${filterStyle}
         });
     };
 
+    function addViewport(leafer, mergeConfig, custom) {
+        addViewportConfig(leafer.parentApp ? leafer.parentApp : leafer, mergeConfig);
+        if (leafer.isApp || custom)
+            return;
+        leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, (e) => {
+            leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
+        }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
+            const { zoomLayer } = leafer;
+            const changeScale = leafer.getValidScale(e.scale);
+            if (changeScale !== 1) {
+                PointHelper.scaleOf(zoomLayer, e, changeScale);
+                zoomLayer.scale = zoomLayer.__.scaleX * changeScale;
+            }
+        }));
+    }
+    function addViewportConfig(leafer, mergeConfig) {
+        if (mergeConfig)
+            DataHelper.assign(leafer.config, mergeConfig);
+        DataHelper.assign(leafer.config, {
+            wheel: { preventDefault: true },
+            touch: { preventDefault: true },
+            pointer: { preventDefaultMenu: true }
+        }, leafer.userConfig);
+    }
+
+    function custom(leafer) {
+        addViewport(leafer, null, true);
+    }
+
+    function design(leafer) {
+        addViewport(leafer, {
+            zoom: {
+                min: 0.01,
+                max: 256
+            },
+            move: {
+                holdSpaceKey: true,
+                holdMiddleKey: true,
+            }
+        });
+    }
+
+    function document$1(leafer) {
+        addViewport(leafer, {
+            zoom: { min: 1 },
+            move: { scroll: 'limit' }
+        });
+    }
+
+    const debug = Debug.get('LeaferTypeCreator');
+    const LeaferTypeCreator = {
+        list: {},
+        register(name, fn) {
+            list[name] && debug.repeat(name);
+            list[name] = fn;
+        },
+        run(name, leafer) {
+            const fn = list[name];
+            fn && fn(leafer);
+        }
+    };
+    const { list, register } = LeaferTypeCreator;
+    register('viewport', addViewport);
+    register('custom', custom);
+    register('design', design);
+    register('document', document$1);
+
+    const MultiTouchHelper = {
+        getData(list) {
+            const a = list[0], b = list[1];
+            const lastCenter = PointHelper.getCenter(a.from, b.from);
+            const center = PointHelper.getCenter(a.to, b.to);
+            const move = { x: center.x - lastCenter.x, y: center.y - lastCenter.y };
+            const lastDistance = PointHelper.getDistance(a.from, b.from);
+            const distance = PointHelper.getDistance(a.to, b.to);
+            const scale = distance / lastDistance;
+            const rotation = PointHelper.getRotation(a.from, b.from, a.to, b.to);
+            return { move, scale, rotation, center };
+        }
+    };
+
+    const WheelEventHelper = {
+        getMove(event, config) {
+            let { moveSpeed } = config;
+            let { deltaX, deltaY } = event;
+            if (event.shiftKey && !deltaX) {
+                deltaX = deltaY;
+                deltaY = 0;
+            }
+            if (deltaX > 50)
+                deltaX = Math.max(50, deltaX / 3);
+            if (deltaY > 50)
+                deltaY = Math.max(50, deltaY / 3);
+            return { x: -deltaX * moveSpeed * 2, y: -deltaY * moveSpeed * 2 };
+        },
+        getScale(event, config) {
+            let zoom;
+            let scale = 1;
+            let { zoomMode, zoomSpeed } = config;
+            const delta = event.deltaY || event.deltaX;
+            if (zoomMode) {
+                zoom = (zoomMode === 'mouse') ? true : (!event.deltaX && (Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta));
+                if (event.shiftKey || event.metaKey || event.ctrlKey)
+                    zoom = true;
+            }
+            else {
+                zoom = !event.shiftKey && (event.metaKey || event.ctrlKey);
+            }
+            if (zoom) {
+                zoomSpeed = MathHelper.within(zoomSpeed, 0, 1);
+                const min = event.deltaY ? config.delta.y : config.delta.x;
+                scale = 1 - delta / (min * 4) * zoomSpeed;
+                if (scale < 0.5)
+                    scale = 0.5;
+                if (scale >= 1.5)
+                    scale = 1.5;
+            }
+            return scale;
+        }
+    };
+
+    class Transformer {
+        get transforming() { return !!(this.moveData || this.zoomData || this.rotateData); }
+        constructor(interaction) {
+            this.interaction = interaction;
+        }
+        move(data) {
+            const { interaction } = this;
+            if (!data.moveType)
+                data.moveType = 'move';
+            if (!this.moveData) {
+                this.setPath(data);
+                this.moveData = Object.assign(Object.assign({}, data), { moveX: 0, moveY: 0 });
+                interaction.emit(exports.MoveEvent.START, this.moveData);
+            }
+            data.path = this.moveData.path;
+            interaction.emit(exports.MoveEvent.BEFORE_MOVE, data);
+            interaction.emit(exports.MoveEvent.MOVE, data);
+            this.transformEndWait();
+        }
+        zoom(data) {
+            const { interaction } = this;
+            if (!this.zoomData) {
+                this.setPath(data);
+                this.zoomData = Object.assign(Object.assign({}, data), { scale: 1 });
+                interaction.emit(exports.ZoomEvent.START, this.zoomData);
+            }
+            data.path = this.zoomData.path;
+            interaction.emit(exports.ZoomEvent.BEFORE_ZOOM, data);
+            interaction.emit(exports.ZoomEvent.ZOOM, data);
+            this.transformEndWait();
+        }
+        rotate(data) {
+            const { interaction } = this;
+            if (!this.rotateData) {
+                this.setPath(data);
+                this.rotateData = Object.assign(Object.assign({}, data), { rotation: 0 });
+                interaction.emit(exports.RotateEvent.START, this.rotateData);
+            }
+            data.path = this.rotateData.path;
+            interaction.emit(exports.RotateEvent.BEFORE_ROTATE, data);
+            interaction.emit(exports.RotateEvent.ROTATE, data);
+            this.transformEndWait();
+        }
+        setPath(data) {
+            const { interaction } = this;
+            const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
+            data.path = path;
+            interaction.cancelHover();
+        }
+        transformEndWait() {
+            clearTimeout(this.transformTimer);
+            this.transformTimer = setTimeout(() => {
+                this.transformEnd();
+            }, this.interaction.p.transformTime);
+        }
+        transformEnd() {
+            const { interaction, moveData, zoomData, rotateData } = this;
+            if (moveData)
+                interaction.emit(exports.MoveEvent.END, moveData);
+            if (zoomData)
+                interaction.emit(exports.ZoomEvent.END, zoomData);
+            if (rotateData)
+                interaction.emit(exports.RotateEvent.END, rotateData);
+            this.reset();
+        }
+        reset() {
+            this.zoomData = this.moveData = this.rotateData = null;
+        }
+        destroy() {
+            this.reset();
+        }
+    }
+
+    const leafer = exports.Leafer.prototype;
+    const bounds = new Bounds();
+    leafer.initType = function (type) {
+        LeaferTypeCreator.run(type, this);
+    };
+    leafer.getValidMove = function (moveX, moveY) {
+        const { scroll, disabled } = this.app.config.move;
+        if (scroll) {
+            const type = scroll === true ? '' : scroll;
+            if (type.includes('x'))
+                moveX = moveX || moveY, moveY = 0;
+            else if (type.includes('y'))
+                moveY = moveY || moveX, moveX = 0;
+            else
+                Math.abs(moveX) > Math.abs(moveY) ? moveY = 0 : moveX = 0;
+            if (type.includes('limit')) {
+                const { x, y, width, height } = bounds.set(this.__world).addPoint(this.zoomLayer);
+                const right = x + width - this.width, bottom = y + height - this.height;
+                if (x >= 0 && right <= 0)
+                    moveX = 0;
+                else if (moveX > 0) {
+                    if (x + moveX > 0)
+                        moveX = -x;
+                }
+                else if (moveX < 0 && right + moveX < 0)
+                    moveX = -right;
+                if (y >= 0 && bottom <= 0)
+                    moveY = 0;
+                else if (moveY > 0) {
+                    if (y + moveY > 0)
+                        moveY = -y;
+                }
+                else if (moveY < 0 && bottom + moveY < 0)
+                    moveY = -bottom;
+            }
+        }
+        return { x: disabled ? 0 : moveX, y: disabled ? 0 : moveY };
+    };
+    leafer.getValidScale = function (changeScale) {
+        const { scaleX } = this.zoomLayer.__, { min, max, disabled } = this.app.config.zoom, absScale = Math.abs(scaleX * changeScale);
+        if (min && absScale < min)
+            changeScale = min / scaleX;
+        else if (max && absScale > max)
+            changeScale = max / scaleX;
+        return disabled ? 1 : MathHelper.float(changeScale);
+    };
+
+    function getMoveEventData(move, event) {
+        return Object.assign(Object.assign({}, event), { moveX: move.x, moveY: move.y });
+    }
+    function getRotateEventData(rotation, event) {
+        return Object.assign(Object.assign({}, event), { rotation });
+    }
+    function getZoomEventData(scale, event) {
+        return Object.assign(Object.assign({}, event), { scale });
+    }
+    const interaction = InteractionBase.prototype;
+    interaction.createTransformer = function () {
+        this.transformer = new Transformer(this);
+    };
+    interaction.move = function (data) {
+        this.transformer.move(data);
+    };
+    interaction.zoom = function (data) {
+        this.transformer.zoom(data);
+    };
+    interaction.rotate = function (data) {
+        this.transformer.rotate(data);
+    };
+    interaction.transformEnd = function () {
+        this.transformer.transformEnd();
+    };
+    interaction.wheel = function (data) {
+        const { wheel } = this.config;
+        if (wheel.disabled)
+            return;
+        const scale = wheel.getScale ? wheel.getScale(data, wheel) : WheelEventHelper.getScale(data, wheel);
+        scale !== 1 ? this.zoom(getZoomEventData(scale, data)) : this.move(getMoveEventData(wheel.getMove ? wheel.getMove(data, wheel) : WheelEventHelper.getMove(data, wheel), data));
+    };
+    interaction.multiTouch = function (data, list) {
+        if (this.config.multiTouch.disabled)
+            return;
+        const { move, rotation, scale, center } = MultiTouchHelper.getData(list);
+        Object.assign(data, center);
+        this.rotate(getRotateEventData(rotation, data));
+        this.zoom(getZoomEventData(scale, data));
+        this.move(getMoveEventData(move, data));
+    };
+
+    const dragger = Dragger.prototype;
+    const { abs } = Math;
+    dragger.checkDragEndAnimate = function (data, speed) {
+        const { moveX, moveY } = this.dragData;
+        const absMoveX = abs(moveX), absMoveY = abs(moveY), minMove = speed ? 1 : 0.1;
+        const dragAnimate = this.interaction.m.dragAnimate && this.canAnimate && this.moving && (absMoveX > minMove || absMoveY > minMove);
+        if (dragAnimate) {
+            const inertia = data.pointerType === 'touch' ? 3 : 1, maxMove = 70;
+            speed = speed ? 0.95 : inertia;
+            if (absMoveX * speed > maxMove)
+                speed = maxMove / absMoveX;
+            else if (absMoveY * speed > maxMove)
+                speed = maxMove / absMoveY;
+            data = Object.assign({}, data);
+            PointHelper.move(data, moveX * speed, moveY * speed);
+            this.drag(data);
+            this.animate(() => { this.dragEnd(data, 1); });
+        }
+        return dragAnimate;
+    };
+    dragger.animate = function (func, off) {
+        const animateWait = func || this.animateWait;
+        if (animateWait)
+            this.interaction.target.nextRender(animateWait, null, off);
+        this.animateWait = func;
+    };
+    dragger.checkDragOut = function (data) {
+        const { interaction } = this;
+        this.autoMoveCancel();
+        if (this.dragging && !interaction.shrinkCanvasBounds.hitPoint(data))
+            this.autoMoveOnDragOut(data);
+    };
+    dragger.autoMoveOnDragOut = function (data) {
+        const { interaction, downData, canDragOut } = this;
+        const { autoDistance, dragOut } = interaction.m;
+        if (!dragOut || !canDragOut || !autoDistance)
+            return;
+        const bounds = interaction.shrinkCanvasBounds;
+        const { x, y } = bounds;
+        const right = BoundsHelper.maxX(bounds);
+        const bottom = BoundsHelper.maxY(bounds);
+        const moveX = data.x < x ? autoDistance : (right < data.x ? -autoDistance : 0);
+        const moveY = data.y < y ? autoDistance : (bottom < data.y ? -autoDistance : 0);
+        let totalX = 0, totalY = 0;
+        this.autoMoveTimer = setInterval(() => {
+            totalX += moveX;
+            totalY += moveY;
+            PointHelper.move(downData, moveX, moveY);
+            PointHelper.move(this.dragData, moveX, moveY);
+            interaction.move(Object.assign(Object.assign({}, data), { moveX, moveY, totalX, totalY, moveType: 'drag' }));
+            interaction.pointerMoveReal(data);
+        }, 10);
+    };
+    dragger.autoMoveCancel = function () {
+        if (this.autoMoveTimer) {
+            clearInterval(this.autoMoveTimer);
+            this.autoMoveTimer = 0;
+        }
+    };
+
     function getZoomScale(scaleX, type) {
         let scale = 1;
         const out = type === 'out', absScale = Math.abs(scaleX);
@@ -14138,7 +14264,7 @@ ${filterStyle}
 
     exports.Leafer.prototype.zoom = function (zoomType, padding, fixed) {
         const { zoomLayer } = this;
-        const limitBounds = this.canvas.bounds.clone().shrink(padding ? padding : 30), bounds = new Bounds();
+        const limitBounds = this.canvas.bounds.clone().shrink(padding !== undefined ? padding : 30), bounds = new Bounds();
         const center = { x: limitBounds.x + limitBounds.width / 2, y: limitBounds.y + limitBounds.height / 2 };
         let changeScale;
         const { scaleX } = this.__;
@@ -14850,6 +14976,7 @@ ${filterStyle}
     exports.Cursor = Cursor;
     exports.DataHelper = DataHelper;
     exports.Debug = Debug;
+    exports.Dragger = Dragger;
     exports.EditBox = EditBox;
     exports.EditDataHelper = EditDataHelper;
     exports.EditPoint = EditPoint;
@@ -14959,6 +15086,7 @@ ${filterStyle}
     exports.TaskProcessor = TaskProcessor;
     exports.TextConvert = TextConvert;
     exports.TextData = TextData;
+    exports.Transformer = Transformer;
     exports.Transition = Transition;
     exports.TwoPointBoundsHelper = TwoPointBoundsHelper;
     exports.UIBounds = UIBounds;
@@ -14970,7 +15098,9 @@ ${filterStyle}
     exports.WaitHelper = WaitHelper;
     exports.WatchEvent = WatchEvent;
     exports.Watcher = Watcher;
-    exports.addInteractionWindow = addInteractionWindow;
+    exports.WheelEventHelper = WheelEventHelper;
+    exports.addViewport = addViewport;
+    exports.addViewportConfig = addViewportConfig;
     exports.affectRenderBoundsType = affectRenderBoundsType;
     exports.affectStrokeBoundsType = affectStrokeBoundsType;
     exports.arrowType = arrowType;