@leafer-editor/worker 1.0.10 → 1.1.1

package/dist/worker.module.js

@@ -108,7 +108,7 @@ const MathHelper = {
         return rotation - oldRotation;
     },
     float(num, maxLength) {
-        const a = maxLength ? pow$1(10, maxLength) : 1000000000000;
+        const a = maxLength !== undefined ? pow$1(10, maxLength) : 1000000000000;
         num = round(num * a) / a;
         return num === -0 ? 0 : num;
     },
@@ -430,7 +430,7 @@ const MatrixHelper = {
 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: {},
@@ -519,8 +519,8 @@ const PointHelper = {
         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) {
@@ -1374,7 +1374,7 @@ function getNameList(name) {
 }
 const D$6 = Debug;
 
-const debug$g = Debug.get('RunTime');
+const debug$h = Debug.get('RunTime');
 const Run = {
     currentId: 0,
     currentName: '',
@@ -1392,7 +1392,7 @@ const Run = {
         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];
@@ -1406,18 +1406,18 @@ function needPlugin(name) {
     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;
@@ -1433,7 +1433,7 @@ const UICreator = {
 };
 const { list: list$3 } = UICreator;
 
-const debug$e = Debug.get('EventCreator');
+const debug$f = Debug.get('EventCreator');
 const EventCreator = {
     nameList: {},
     register(Event) {
@@ -1441,7 +1441,7 @@ const EventCreator = {
         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) {
@@ -1513,17 +1513,19 @@ const DataHelper = {
         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) {
@@ -2327,7 +2329,7 @@ const RectHelper = {
     }
 };
 
-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;
@@ -2400,7 +2402,7 @@ const BezierHelper = {
         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) {
@@ -2442,7 +2444,7 @@ const BezierHelper = {
             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);
@@ -2595,7 +2597,7 @@ const EllipseHelper = {
 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 },
@@ -2836,7 +2838,7 @@ const PathConvert = {
                     i += 6;
                     break;
                 default:
-                    debug$d.error(`command: ${command} [index:${i}]`, old);
+                    debug$e.error(`command: ${command} [index:${i}]`, old);
                     return data;
             }
             lastCommand = command;
@@ -2883,7 +2885,7 @@ const { current, pushData, copyData } = PathConvert;
 
 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) {
@@ -2946,7 +2948,7 @@ const PathCommandDataHelper = {
     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);
@@ -3061,7 +3063,7 @@ class PathCreator {
 }
 
 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)
@@ -3124,7 +3126,7 @@ const PathDrawer = {
                     i += 6;
                     break;
                 default:
-                    debug$c.error(`command: ${command} [index:${i}]`, data);
+                    debug$d.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3134,7 +3136,7 @@ const PathDrawer = {
 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 = {};
@@ -3242,7 +3244,7 @@ const PathBounds = {
                     i += 6;
                     break;
                 default:
-                    debug$b.error(`command: ${command} [index:${i}]`, data);
+                    debug$c.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3358,7 +3360,7 @@ const FileHelper = {
 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;
@@ -3373,7 +3375,7 @@ class TaskItem {
                     yield this.task();
             }
             catch (error) {
-                debug$a.error(error);
+                debug$b.error(error);
             }
         });
     }
@@ -3891,6 +3893,8 @@ function opacityType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
             this.__setAttr(key, value) && (this.__layout.opacityChanged || this.__layout.opacityChange());
+            if (this.mask)
+                checkMask(this);
         }
     }));
 }
@@ -3907,9 +3911,20 @@ function visibleType(defaultValue) {
                     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();
@@ -4047,7 +4062,7 @@ function defineDataProcessor(target, key, defaultValue) {
     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) {
@@ -4064,7 +4079,7 @@ function doRewrite(error) {
     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;
@@ -4165,20 +4180,17 @@ const LeafHelper = {
         }
         return true;
     },
-    moveWorld(t, x, y = 0, isInnerPoint) {
+    moveWorld(t, x, y = 0, isInnerPoint, transition) {
         const local = typeof x === 'object' ? Object.assign({}, x) : { x, y };
         isInnerPoint ? toOuterPoint$1(t.localTransform, local, local, true) : (t.parent && toInnerPoint$1(t.parent.worldTransform, local, local, true));
-        L$3.moveLocal(t, local.x, local.y);
+        L$3.moveLocal(t, local.x, local.y, transition);
     },
-    moveLocal(t, x, y = 0) {
-        if (typeof x === 'object') {
-            t.x += x.x;
-            t.y += x.y;
-        }
-        else {
-            t.x += x;
-            t.y += y;
-        }
+    moveLocal(t, x, y = 0, transition) {
+        if (typeof x === 'object')
+            y = x.y, x = x.x;
+        x += t.x;
+        y += t.y;
+        transition ? t.animate({ x, y }, transition) : (t.x = x, t.y = y);
     },
     zoomOfWorld(t, origin, scaleX, scaleY, resize) {
         L$3.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
@@ -4975,13 +4987,13 @@ const { on, on_, off, off_, once, emit: emit$2, emitEvent: emitEvent$1, hasEvent
 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 +5449,8 @@ let Leaf = class Leaf {
         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) {
@@ -5558,11 +5570,11 @@ let Leaf = class Leaf {
     transform(matrix, resize) {
         transform(this, matrix, resize);
     }
-    move(x, y) {
-        moveLocal(this, x, y);
+    move(x, y, transition) {
+        moveLocal(this, x, y, transition);
     }
-    moveInner(x, y) {
-        moveWorld(this, x, y, true);
+    moveInner(x, y, transition) {
+        moveWorld(this, x, y, true, transition);
     }
     scaleOf(origin, scaleX, scaleY, resize) {
         zoomOfLocal(this, getLocalOrigin(this, origin), scaleX, scaleY, resize);
@@ -5576,8 +5588,8 @@ let Leaf = class Leaf {
     transformWorld(worldTransform, resize) {
         transformWorld(this, worldTransform, resize);
     }
-    moveWorld(x, y) {
-        moveWorld(this, x, y);
+    moveWorld(x, y, transition) {
+        moveWorld(this, x, y, false, transition);
     }
     scaleOfWorld(worldOrigin, scaleX, scaleY, resize) {
         zoomOfWorld(this, worldOrigin, scaleX, scaleY, resize);
@@ -5678,9 +5690,10 @@ Leaf = __decorate([
     useModule(LeafRender)
 ], 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');
 let Branch = class Branch extends Leaf {
     __updateStrokeSpread() {
         const { children } = this;
@@ -5699,13 +5712,13 @@ let Branch = class Branch extends Leaf {
         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 +5734,8 @@ let Branch = class Branch extends Leaf {
         }
     }
     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 +5749,9 @@ let Branch = class Branch extends Leaf {
         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 +5989,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.10";
+const version = "1.1.1";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return true; }
@@ -6213,7 +6227,7 @@ function updateChange(updateList) {
     });
 }
 
-const { worldBounds } = LeafBoundsHelper;
+const { worldBounds: worldBounds$1 } = LeafBoundsHelper;
 const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
 class LayoutBlockData {
     constructor(list) {
@@ -6225,7 +6239,7 @@ class LayoutBlockData {
         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 +6247,7 @@ class LayoutBlockData {
             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 +6434,25 @@ class Renderer {
         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 +6586,17 @@ class Renderer {
         }
     }
     __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 +6612,7 @@ class Renderer {
             }
         }
         this.addBlock(new Bounds(0, 0, 1, 1));
-        this.changed = true;
+        this.update();
     }
     __onLayoutEnd(event) {
         if (event.data)
@@ -7005,7 +7020,7 @@ class UIData extends LeafData {
             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 +7134,7 @@ class GroupData extends UIData {
 
 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; }
 }
 
@@ -7405,11 +7420,15 @@ let UI = UI_1 = class UI extends Leaf {
         super(data);
     }
     reset(_data) { }
-    set(data, isTemp) {
-        if (isTemp) {
-            this.lockNormalStyle = true;
-            Object.assign(this, data);
-            this.lockNormalStyle = false;
+    set(data, transition) {
+        if (transition) {
+            if (transition === 'temp') {
+                this.lockNormalStyle = true;
+                Object.assign(this, data);
+                this.lockNormalStyle = false;
+            }
+            else
+                this.animate(data, transition);
         }
         else
             Object.assign(this, data);
@@ -7719,17 +7738,17 @@ let Group = class Group extends UI {
         if (!this.children)
             this.children = [];
     }
-    set(data, isTemp) {
+    set(data, transition) {
         if (data.children) {
             const { children } = data;
             delete data.children;
             this.children ? this.clear() : this.__setBranch();
-            super.set(data, isTemp);
+            super.set(data, transition);
             children.forEach(child => this.add(child));
             data.children = children;
         }
         else
-            super.set(data, isTemp);
+            super.set(data, transition);
     }
     toJSON(options) {
         const data = super.toJSON(options);
@@ -7775,20 +7794,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     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 = [];
@@ -7805,23 +7814,27 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     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) {
@@ -7842,8 +7855,8 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     }
     onInit() { }
     initType(_type) { }
-    set(data) {
-        this.waitInit(() => { super.set(data); });
+    set(data, transition) {
+        this.waitInit(() => { super.set(data, transition); });
     }
     start() {
         clearTimeout(this.__startTimer);
@@ -7878,7 +7891,11 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     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;
@@ -7986,8 +8003,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             const { imageReady } = this;
             if (imageReady && !this.viewCompleted)
                 this.__checkViewCompleted();
-            if (!imageReady)
+            if (!imageReady) {
                 this.viewCompleted = false;
+                this.requestRender();
+            }
         }
     }
     __checkViewCompleted(emit = true) {
@@ -8045,6 +8064,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         }
         else
             list.push(item);
+        this.requestRender();
     }
     zoom(_zoomType, _padding, _fixedScale) {
         return needPlugin('view');
@@ -8098,7 +8118,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                         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();
@@ -8825,9 +8845,9 @@ let App = class App extends Leafer {
             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));
         }
@@ -9032,10 +9052,8 @@ let DragEvent = class DragEvent extends PointerEvent {
         this.data = data;
     }
     static getValidMove(leaf, start, total) {
-        const { draggable, dragBounds, x, y } = leaf;
-        const move = leaf.getLocalPoint(total, null, true);
-        move.x += start.x - x;
-        move.y += start.y - y;
+        const { draggable, dragBounds } = leaf, move = leaf.getLocalPoint(total, null, true);
+        PointHelper.move(move, start.x - leaf.x, start.y - leaf.y);
         if (dragBounds)
             this.getMoveInDragBounds(leaf.__local, dragBounds === 'parent' ? leaf.parent.boxBounds : dragBounds, move, true);
         if (draggable === 'x')
@@ -9045,8 +9063,7 @@ let DragEvent = class DragEvent extends PointerEvent {
         return move;
     }
     static getMoveInDragBounds(childBox, dragBounds, move, change) {
-        const x = childBox.x + move.x, y = childBox.y + move.y;
-        const right = x + childBox.width, bottom = y + childBox.height;
+        const x = childBox.x + move.x, y = childBox.y + move.y, right = x + childBox.width, bottom = y + childBox.height;
         const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
         if (!change)
             move = Object.assign({}, move);
@@ -9098,9 +9115,7 @@ let DragEvent = class DragEvent extends PointerEvent {
         return this.getLocalMove(relative, true);
     }
     getPageBounds() {
-        const total = this.getPageTotal();
-        const start = this.getPagePoint();
-        const bounds = {};
+        const total = this.getPageTotal(), start = this.getPagePoint(), bounds = {};
         BoundsHelper.set(bounds, start.x - total.x, start.y - total.y, total.x, total.y);
         BoundsHelper.unsign(bounds);
         return bounds;
@@ -9186,184 +9201,7 @@ KeyEvent = __decorate([
     registerUIEvent()
 ], KeyEvent);
 
-function addInteractionWindow(leafer) {
-    if (leafer.isApp)
-        return;
-    leafer.__eventIds.push(leafer.on_(MoveEvent.BEFORE_MOVE, (e) => {
-        leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
-    }), leafer.on_(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 = 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(MoveEvent.START, this.moveData);
-        }
-        data.path = this.moveData.path;
-        interaction.emit(MoveEvent.BEFORE_MOVE, data);
-        interaction.emit(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(ZoomEvent.START, this.zoomData);
-        }
-        data.path = this.zoomData.path;
-        interaction.emit(ZoomEvent.BEFORE_ZOOM, data);
-        interaction.emit(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(RotateEvent.START, this.rotateData);
-        }
-        data.path = this.rotateData.path;
-        interaction.emit(RotateEvent.BEFORE_ROTATE, data);
-        interaction.emit(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(MoveEvent.END, this.moveData);
-            this.moveData = null;
-        }
-    }
-    zoomEnd() {
-        if (this.zoomData) {
-            this.interaction.emit(ZoomEvent.END, this.zoomData);
-            this.zoomData = null;
-        }
-    }
-    rotateEnd() {
-        if (this.rotateData) {
-            this.interaction.emit(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 });
     },
@@ -9372,18 +9210,14 @@ const InteractionHelper = {
             data });
     },
     getSwipeDirection(angle) {
-        if (angle < -45 && angle > -135) {
+        if (angle < -45 && angle > -135)
             return SwipeEvent.UP;
-        }
-        else if (angle > 45 && angle < 135) {
+        else if (angle > 45 && angle < 135)
             return SwipeEvent.DOWN;
-        }
-        else if (angle <= 45 && angle >= -45) {
+        else if (angle <= 45 && angle >= -45)
             return SwipeEvent.RIGHT;
-        }
-        else {
+        else
             return 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)) });
@@ -9456,9 +9290,8 @@ class Dragger {
                 interaction.emit(MoveEvent.START, this.dragData);
             }
         }
-        if (!this.moving) {
+        if (!this.moving)
             this.dragStart(data, canDrag);
-        }
         this.drag(data);
     }
     dragStart(data, canDrag) {
@@ -9536,16 +9369,9 @@ class Dragger {
     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;
@@ -9572,12 +9398,6 @@ class Dragger {
         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) {
@@ -9594,45 +9414,17 @@ class Dragger {
     dragReset() {
         DragEvent.list = 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;
@@ -9662,7 +9454,7 @@ function emit$1(type, data, path, excludePath) {
         }
     }
     catch (e) {
-        debug$2.error(e);
+        debug$3.error(e);
     }
 }
 const allowTypes = ['move', 'zoom', 'rotate', 'key'];
@@ -9696,28 +9488,12 @@ function exclude(leaf, excludePath) {
     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,
@@ -9728,17 +9504,18 @@ const config$1 = {
         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; }
@@ -9760,7 +9537,7 @@ class InteractionBase {
         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);
@@ -9861,14 +9638,6 @@ class InteractionBase {
         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(PointerEvent.MENU, data);
@@ -9882,18 +9651,13 @@ class InteractionBase {
             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;
@@ -10131,8 +9895,9 @@ class InteractionBase {
         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;
@@ -10152,7 +9917,8 @@ class InteractionBase {
             this.stop();
             this.__removeListenEvents();
             this.dragger.destroy();
-            this.transformer.destroy();
+            if (this.transformer)
+                this.transformer.destroy();
             this.downData = this.overPath = this.enterPath = null;
         }
     }
@@ -10488,6 +10254,8 @@ function stroke(stroke, ui, canvas) {
             case 'center':
                 canvas.setStroke(stroke, __strokeWidth, options);
                 canvas.stroke();
+                if (options.__useArrow)
+                    strokeArrow(ui, canvas);
                 break;
             case 'inside':
                 canvas.save();
@@ -10525,6 +10293,8 @@ function strokes(strokes, ui, canvas) {
             case 'center':
                 canvas.setStroke(undefined, __strokeWidth, options);
                 drawStrokesStyle(strokes, false, ui, canvas);
+                if (options.__useArrow)
+                    strokeArrow(ui, canvas);
                 break;
             case 'inside':
                 canvas.save();
@@ -10550,6 +10320,14 @@ function strokes(strokes, ui, canvas) {
         }
     }
 }
+function strokeArrow(ui, canvas) {
+    if (ui.__.dashPattern) {
+        canvas.beginPath();
+        ui.__drawPathByData(canvas, ui.__.__pathForArrow);
+        canvas.dashPattern = null;
+        canvas.stroke();
+    }
+}
 
 const { getSpread, getOuterOf, getByMove, getIntersectData } = BoundsHelper;
 function shape(ui, current, options) {
@@ -10866,13 +10644,13 @@ function ignoreRender(ui, value) {
 }
 
 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) {
@@ -10928,7 +10706,7 @@ function createPattern(ui, paint, pixelRatio) {
     }
 }
 
-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;
@@ -10940,8 +10718,8 @@ function checkImage(ui, canvas, paint, allowPaint) {
         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;
@@ -11420,15 +11198,15 @@ const { trimRight } = TextRowHelper;
 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';
@@ -11542,7 +11320,7 @@ function addRow() {
         startCharSize = 0;
     }
     row.width = rowWidth;
-    if (bounds$1.width)
+    if (bounds$3.width)
         trimRight(row);
     else if (findMaxWidth)
         setMaxWidth();
@@ -11979,7 +11757,7 @@ function checkLazy(leaf) {
 }
 
 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('.'))
@@ -11994,7 +11772,7 @@ canvas.toBlob = function (type, quality) {
         Platform.origin.canvasToBolb(this.view, type, quality).then((blob) => {
             resolve(blob);
         }).catch((e) => {
-            debug$1.error(e);
+            debug$2.error(e);
             resolve(null);
         });
     });
@@ -12007,7 +11785,7 @@ canvas.saveAs = function (filename, quality) {
         Platform.origin.canvasSaveAs(this.view, filename, quality).then(() => {
             resolve(true);
         }).catch((e) => {
-            debug$1.error(e);
+            debug$2.error(e);
             resolve(false);
         });
     });
@@ -12297,9 +12075,12 @@ function targetAttr(fn) {
     };
 }
 
-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 UI {
     constructor() {
         super();
@@ -12310,6 +12091,17 @@ class Stroker extends UI {
     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;
@@ -12319,8 +12111,8 @@ class Stroker extends UI {
             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);
@@ -12337,7 +12129,7 @@ class Stroker extends UI {
                             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);
@@ -12359,7 +12151,6 @@ __decorate([
 function onTarget$1(stroker) {
     const value = stroker.target;
     stroker.list = value ? (value instanceof Array ? value : [value]) : [];
-    stroker.forceUpdate();
 }
 
 class SelectArea extends Group {
@@ -12444,8 +12235,8 @@ class EditSelect extends Group {
         }
     }
     update() {
-        if (this.targetStroker.target)
-            this.targetStroker.forceUpdate();
+        this.hoverStroker.update();
+        this.targetStroker.update();
     }
     onPointerMove(e) {
         const { app, editor } = this;
@@ -13263,11 +13054,11 @@ const config = {
     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);
 }
 
@@ -13363,7 +13154,7 @@ const EditorHelper = {
     }
 };
 
-const debug = Debug.get('EditToolCreator');
+const debug$1 = Debug.get('EditToolCreator');
 function registerEditTool() {
     return (target) => {
         EditToolCreator.register(target);
@@ -13374,14 +13165,14 @@ const EditToolCreator = {
     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) {
@@ -14098,6 +13889,349 @@ UI.setEditInner = function (editorName) {
     });
 };
 
+function addViewport(leafer, mergeConfig, custom) {
+    addViewportConfig(leafer.parentApp ? leafer.parentApp : leafer, mergeConfig);
+    if (leafer.isApp || custom)
+        return;
+    leafer.__eventIds.push(leafer.on_(MoveEvent.BEFORE_MOVE, (e) => {
+        leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
+    }), leafer.on_(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(MoveEvent.START, this.moveData);
+        }
+        data.path = this.moveData.path;
+        interaction.emit(MoveEvent.BEFORE_MOVE, data);
+        interaction.emit(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(ZoomEvent.START, this.zoomData);
+        }
+        data.path = this.zoomData.path;
+        interaction.emit(ZoomEvent.BEFORE_ZOOM, data);
+        interaction.emit(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(RotateEvent.START, this.rotateData);
+        }
+        data.path = this.rotateData.path;
+        interaction.emit(RotateEvent.BEFORE_ROTATE, data);
+        interaction.emit(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(MoveEvent.END, moveData);
+        if (zoomData)
+            interaction.emit(ZoomEvent.END, zoomData);
+        if (rotateData)
+            interaction.emit(RotateEvent.END, rotateData);
+        this.reset();
+    }
+    reset() {
+        this.zoomData = this.moveData = this.rotateData = null;
+    }
+    destroy() {
+        this.reset();
+    }
+}
+
+const leafer = 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);
@@ -14127,7 +14261,7 @@ function getFixBounds(bounds, scaleBounds) {
 
 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.__;
@@ -14375,13 +14509,13 @@ const half = { x: -0.5 };
 const angle = { connect: half, offset: { x: -0.71, bevelJoin: 0.36, roundJoin: 0.22 }, path: [1, -3, -3, 2, 0, 0, 2, -3, 3] };
 const angleSide = { connect: half, offset: { x: -1.207, bevelJoin: 0.854, roundJoin: 0.707 }, path: [1, -3, -3, 2, 0, 0, 2, -1, 0] };
 const triangleLinePath = [1, -3, 0, 2, -3, -2, 2, 0, 0, 2, -3, 2, 2, -3, 0];
-const triangle = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1] };
+const triangle = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1], dashPath: [1, -2, 0, 2, -0.5, 0] };
 const arrowLinePath = [1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0];
-const arrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95] };
-const triangleFlip = { offset: half, path: [...triangle.path], };
+const arrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95], dashPath: [1, -3, 0, 2, -0.5, 0] };
+const triangleFlip = { offset: half, path: [...triangle.path], dashPath: [1, -2.5, 0, 2, -1, 0] };
 rotate(triangleFlip.path, 180, { x: -1.5, y: 0 });
 const circleLine = { connect: { x: -1.3 }, path: [1, 1.8, -0.1, 2, 1.8, 0, 26, 0, 0, 1.8, 0, 359, 0], };
-const circle = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0] };
+const circle = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0], dashPath: [1, -0.5, 0, 2, 0.5, 0] };
 const squareLine = { connect: { x: -1.3 }, path: [1, -1.4, 0, 2, -1.4, -1.4, 2, 1.4, -1.4, 2, 1.4, 1.4, 2, -1.4, 1.4, 2, -1.4, 0] };
 const square = { path: [...squareLine.path, 2, -1.4, -0.49, 2, 1, -0.49, 1, -1.4, 0.49, 2, 1, 0.49] };
 const diamondLine = DataHelper.clone(squareLine);
@@ -14403,12 +14537,14 @@ const arrows = {
     'diamond-line': diamondLine,
     mark,
 };
-function getArrowPath(ui, arrow, from, to, scale, connectOffset) {
+function getArrowPath(ui, arrow, from, to, scale, connectOffset, hasDashPattern) {
     const { strokeCap, strokeJoin } = ui.__;
-    const { offset, connect, path } = (typeof arrow === 'object' ? arrow : arrows[arrow]);
+    const { offset, connect, path, dashPath } = (typeof arrow === 'object' ? arrow : arrows[arrow]);
     let connectX = connect ? connect.x : 0;
     let offsetX = offset ? offset.x : 0;
     const data = [...path];
+    if (hasDashPattern && dashPath)
+        data.push(...dashPath);
     if (strokeCap !== 'none')
         connectX -= 0.5;
     if (offset) {
@@ -14432,7 +14568,7 @@ const last = {}, now = {};
 const PathArrowModule = {
     list: arrows,
     addArrows(ui, changeRenderPath) {
-        const { startArrow, endArrow, strokeWidth, __pathForRender: data } = ui.__;
+        const { startArrow, endArrow, strokeWidth, dashPattern, __pathForRender: data } = ui.__;
         let command, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== 'none';
         while (i < len) {
             command = data[i];
@@ -14491,17 +14627,20 @@ const PathArrowModule = {
             if (count === 2 && useStartArrow)
                 copy(second, command === L ? now : last);
             if (i === len) {
-                const p = ui.__.__pathForRender = changeRenderPath ? [...data] : data;
+                const path = ui.__.__pathForRender = changeRenderPath ? [...data] : data;
+                const pathForArrow = ui.__.__pathForArrow = [];
                 if (useStartArrow) {
-                    p.push(...getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint));
+                    const startArrowPath = getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint, !!dashPattern);
+                    dashPattern ? pathForArrow.push(...startArrowPath) : path.push(...startArrowPath);
                     if (connectPoint.x) {
                         getDistancePoint(first, second, -connectPoint.x, true);
-                        p[1] = second.x;
-                        p[2] = second.y;
+                        path[1] = second.x;
+                        path[2] = second.y;
                     }
                 }
                 if (endArrow && endArrow !== 'none') {
-                    p.push(...getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint));
+                    const endArrowPath = getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint, !!dashPattern);
+                    dashPattern ? pathForArrow.push(...endArrowPath) : path.push(...endArrowPath);
                     if (connectPoint.x) {
                         getDistancePoint(now, last, -connectPoint.x, true);
                         let index;
@@ -14520,7 +14659,7 @@ const PathArrowModule = {
                                 break;
                         }
                         if (index)
-                            setPoint(p, last, index);
+                            setPoint(path, last, index);
                     }
                 }
             }
@@ -14645,7 +14784,7 @@ let TextEditor = class TextEditor extends InnerEditor {
         style.position = 'fixed';
         style.transformOrigin = 'left top';
         style.boxSizing = 'border-box';
-        this.isHTMLText ? div.innerHTML = text.text : div.innerText = text.text;
+        this.isHTMLText ? div.innerHTML = String(text.text) : div.innerText = String(text.text);
         const { view } = editor.app;
         (this.inBody = view instanceof HTMLCanvasElement) ? document.body.appendChild(div) : view.appendChild(div);
         this.eventIds = [
@@ -14816,4 +14955,4 @@ HTMLText = __decorate([
     registerUI()
 ], HTMLText);
 
-export { AlignHelper, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Frame, FrameData, Group, GroupData, HTMLText, HTMLTextData, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TextEditor, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, addInteractionWindow, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isNull, layoutProcessor, maskType, naturalBoundsType, needPlugin, opacityType, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, sortType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Frame, FrameData, Group, GroupData, HTMLText, HTMLTextData, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TextEditor, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isNull, layoutProcessor, maskType, naturalBoundsType, needPlugin, opacityType, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, sortType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };