leafer-ui 1.0.0-rc.3 → 1.0.0-rc.5

package/dist/web.js

@@ -657,7 +657,7 @@ var LeaferUI = (function (exports) {
             B.copyAndSpread(n, t, spreadX, spreadY);
             return n;
         },
-        spread(t, spreadX, spreadY) {
+        spread(t, spreadX, spreadY = spreadX) {
             B.copyAndSpread(t, t, spreadX, spreadY);
         },
         ceil(t) {
@@ -798,8 +798,8 @@ var LeaferUI = (function (exports) {
         getFitMatrix(put) {
             return BoundsHelper.getFitMatrix(this, put);
         }
-        spread(size) {
-            BoundsHelper.spread(this, size);
+        spread(spreadX, spreadY) {
+            BoundsHelper.spread(this, spreadX, spreadY);
             return this;
         }
         ceil() {
@@ -1381,6 +1381,8 @@ var LeaferUI = (function (exports) {
     }
 
     const FileHelper = {
+        opacityTypes: ['png', 'webp', 'svg'],
+        upperCaseTypeMap: {},
         mineType(type) {
             if (!type || type.startsWith('image'))
                 return type;
@@ -1393,6 +1395,7 @@ var LeaferUI = (function (exports) {
             return l[l.length - 1];
         }
     };
+    FileHelper.opacityTypes.forEach(type => FileHelper.upperCaseTypeMap[type] = type.toUpperCase());
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -2333,7 +2336,7 @@ var LeaferUI = (function (exports) {
             const centerX = fromX + halfX + rotationCos * cx - rotationSin * cy;
             const centerY = fromY + halfY + rotationSin * cx + rotationCos * cy;
             const anticlockwise = totalRadian < 0 ? 1 : 0;
-            if (curveMode) {
+            if (curveMode || Platform.name === 'node') {
                 ellipse$5(data, centerX, centerY, radiusX, radiusY, rotation, startRadian / OneRadian, endRadian / OneRadian, anticlockwise);
             }
             else {
@@ -3260,6 +3263,23 @@ var LeaferUI = (function (exports) {
                 list.length = 0;
             }
         },
+        isPixel(config) {
+            return FileHelper.opacityTypes.some(item => I$1.isFormat(item, config));
+        },
+        isFormat(format, config) {
+            if (config.format === format)
+                return true;
+            const { url } = config;
+            if (url.startsWith('data:')) {
+                if (url.startsWith('data:' + FileHelper.mineType(format)))
+                    return true;
+            }
+            else {
+                if (url.includes('.' + format) || url.includes('.' + FileHelper.upperCaseTypeMap[format]))
+                    return true;
+            }
+            return false;
+        },
         destroy() {
             I$1.map = {};
         }
@@ -3275,17 +3295,7 @@ var LeaferUI = (function (exports) {
             this.waitComplete = [];
             this.innerId = create$1(IMAGE);
             this.config = config || { url: '' };
-            const { url } = config;
-            if (url.startsWith('data:')) {
-                if (url.startsWith('data:image/svg'))
-                    this.isSVG = true;
-            }
-            else {
-                if (url.includes('.svg'))
-                    this.isSVG = true;
-            }
-            if (this.config.format === 'svg')
-                this.isSVG = true;
+            this.isSVG = ImageManager.isFormat('svg', config);
         }
         load(onSuccess, onError) {
             if (!this.loading) {
@@ -3358,13 +3368,19 @@ var LeaferUI = (function (exports) {
         }
         stopDefault() {
             this.isStopDefault = true;
+            if (this.origin)
+                Platform.event.stopDefault(this.origin);
         }
         stopNow() {
             this.isStopNow = true;
             this.isStop = true;
+            if (this.origin)
+                Platform.event.stopNow(this.origin);
         }
         stop() {
             this.isStop = true;
+            if (this.origin)
+                Platform.event.stop(this.origin);
         }
     }
 
@@ -3426,20 +3442,6 @@ var LeaferUI = (function (exports) {
     }
     ResizeEvent.RESIZE = 'resize';
 
-    class TransformEvent extends Event {
-        constructor(type, params) {
-            super(type);
-            if (params)
-                Object.assign(this, params);
-        }
-    }
-    TransformEvent.START = 'transform.start';
-    TransformEvent.CHANGE = 'transform.change';
-    TransformEvent.END = 'transform.end';
-    TransformEvent.BEFORE_START = 'transform.before_start';
-    TransformEvent.BEFORE_CHANGE = 'transform.before_change';
-    TransformEvent.BEFORE_END = 'transform.before_end';
-
     class WatchEvent extends Event {
         constructor(type, data) {
             super(type);
@@ -3540,15 +3542,15 @@ var LeaferUI = (function (exports) {
             this.bubbles = true;
             Object.assign(this, params);
         }
-        getInner(target) {
-            if (!target)
-                target = this.current;
-            return target.getInnerPoint(this);
+        getInner(relative) {
+            if (!relative)
+                relative = this.current;
+            return relative.getInnerPoint(this);
         }
-        getLocal(target) {
-            if (!target)
-                target = this.current;
-            return target.getLocalPoint(this);
+        getLocal(relative) {
+            if (!relative)
+                relative = this.current;
+            return relative.getLocalPoint(this);
         }
         static changeName(oldName, newName) {
             EventCreator.changeName(oldName, newName);
@@ -3595,7 +3597,7 @@ var LeaferUI = (function (exports) {
             defineLeafAttr(target, key, defaultValue, {
                 set(value) {
                     this.__setAttr(key, value);
-                    this.__layout.positionChanged || this.__layout.positionChange();
+                    this.__layout.matrixChanged || this.__layout.matrixChange();
                 }
             });
         };
@@ -3627,7 +3629,7 @@ var LeaferUI = (function (exports) {
                     this.__setAttr(key, value);
                     this.__layout.boxChanged || this.__layout.boxChange();
                     if (this.__.around)
-                        this.__layout.positionChanged || this.__layout.positionChange();
+                        this.__layout.matrixChanged || this.__layout.matrixChange();
                 }
             });
         };
@@ -3863,29 +3865,36 @@ var LeaferUI = (function (exports) {
     exports.PointerEvent.DOUBLE_CLICK = 'double_click';
     exports.PointerEvent.LONG_PRESS = 'long_press';
     exports.PointerEvent.LONG_TAP = 'long_tap';
+    exports.PointerEvent.MENU = 'pointer.menu';
     exports.PointerEvent = __decorate([
         registerUIEvent()
     ], exports.PointerEvent);
 
     const move = {};
     exports.DragEvent = class DragEvent extends exports.PointerEvent {
-        getInnerMove(target, total) {
-            if (!target)
-                target = this.current;
+        static setList(data) {
+            this.list = data instanceof LeafList ? data : new LeafList(data);
+        }
+        static setData(data) {
+            this.data = data;
+        }
+        getInnerMove(relative, total) {
+            if (!relative)
+                relative = this.current;
             this.assignMove(total);
-            return target.getInnerPoint(move, null, true);
+            return relative.getInnerPoint(move, null, true);
         }
-        getLocalMove(target, total) {
-            if (!target)
-                target = this.current;
+        getLocalMove(relative, total) {
+            if (!relative)
+                relative = this.current;
             this.assignMove(total);
-            return target.getLocalPoint(move, null, true);
+            return relative.getLocalPoint(move, null, true);
         }
-        getInnerTotal(target) {
-            return this.getInnerMove(target, true);
+        getInnerTotal(relative) {
+            return this.getInnerMove(relative, true);
         }
-        getLocalTotal(target) {
-            return this.getLocalMove(target, true);
+        getLocalTotal(relative) {
+            return this.getLocalMove(relative, true);
         }
         assignMove(total) {
             move.x = total ? this.totalX : this.moveX;
@@ -3904,17 +3913,16 @@ var LeaferUI = (function (exports) {
         registerUIEvent()
     ], exports.DragEvent);
 
-    var DropEvent_1;
-    exports.DropEvent = DropEvent_1 = class DropEvent extends exports.PointerEvent {
+    exports.DropEvent = class DropEvent extends exports.PointerEvent {
         static setList(data) {
-            DropEvent_1.dragList = data instanceof LeafList ? data : new LeafList(data);
+            exports.DragEvent.setList(data);
         }
         static setData(data) {
-            this.dragData = data;
+            exports.DragEvent.setData(data);
         }
     };
     exports.DropEvent.DROP = 'drop';
-    exports.DropEvent = DropEvent_1 = __decorate([
+    exports.DropEvent = __decorate([
         registerUIEvent()
     ], exports.DropEvent);
 
@@ -4021,7 +4029,6 @@ var LeaferUI = (function (exports) {
             this.moveEnd();
             this.zoomEnd();
             this.rotateEnd();
-            this.transformMode = null;
         }
         moveEnd() {
             if (this.moveData) {
@@ -4046,7 +4053,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { copy: copy$5, translate: translate$2, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter } = MatrixHelper;
+    const { copy: copy$5, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter } = MatrixHelper;
     const matrix = {};
     const LeafHelper = {
         updateAllWorldMatrix(leaf) {
@@ -4089,63 +4096,41 @@ var LeaferUI = (function (exports) {
             return true;
         },
         moveWorld(t, x, y) {
-            t.__layout.checkUpdate();
             const local = { x, y };
             if (t.parent)
-                toInnerPoint$1(t.parent.__world, local, local, true);
+                toInnerPoint$1(t.parent.worldTransform, local, local, true);
             L.moveLocal(t, local.x, local.y);
         },
         moveLocal(t, x, y = 0) {
             t.x += x;
             t.y += y;
         },
-        zoomOfWorld(t, origin, scaleX, scaleY, moveLayer) {
-            t.__layout.checkUpdate();
-            const local = t.parent ? PointHelper.tempToInnerOf(origin, t.parent.__world) : origin;
-            this.zoomOfLocal(t, local, scaleX, scaleY, moveLayer);
+        zoomOfWorld(t, origin, scaleX, scaleY) {
+            this.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY);
         },
-        zoomOfLocal(t, origin, scaleX, scaleY = scaleX, moveLayer) {
+        zoomOfLocal(t, origin, scaleX, scaleY = scaleX) {
             copy$5(matrix, t.__local);
-            if (moveLayer)
-                translate$2(matrix, moveLayer.x, moveLayer.y);
             scaleOfOuter$3(matrix, origin, scaleX, scaleY);
-            if (!moveLayer)
-                moveLayer = t;
-            moveLayer.x += matrix.e - t.__local.e;
-            moveLayer.y += matrix.f - t.__local.f;
+            moveByMatrix(t, matrix);
             t.scaleX *= scaleX;
             t.scaleY *= scaleY;
         },
-        rotateOfWorld(t, origin, angle, moveLayer) {
-            t.__layout.checkUpdate();
-            const local = t.parent ? PointHelper.tempToInnerOf(origin, t.parent.__world) : origin;
-            this.rotateOfLocal(t, local, angle, moveLayer);
+        rotateOfWorld(t, origin, angle) {
+            this.rotateOfLocal(t, getTempLocal(t, origin), angle);
         },
-        rotateOfLocal(t, origin, angle, moveLayer) {
+        rotateOfLocal(t, origin, angle) {
             copy$5(matrix, t.__local);
-            if (moveLayer)
-                translate$2(matrix, moveLayer.x, moveLayer.y);
             rotateOfOuter$3(matrix, origin, angle);
-            if (!moveLayer)
-                moveLayer = t;
-            moveLayer.x += matrix.e - t.__local.e;
-            moveLayer.y += matrix.f - t.__local.f;
+            moveByMatrix(t, matrix);
             t.rotation = MathHelper.formatRotation(t.rotation + angle);
         },
-        skewOfWorld(t, origin, skewX, skewY, moveLayer) {
-            t.__layout.checkUpdate();
-            const local = t.parent ? PointHelper.tempToInnerOf(origin, t.parent.__world) : origin;
-            this.skewOfLocal(t, local, skewX, skewY, moveLayer);
+        skewOfWorld(t, origin, skewX, skewY) {
+            this.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY);
         },
-        skewOfLocal(t, origin, skewX, skewY, moveLayer) {
+        skewOfLocal(t, origin, skewX, skewY) {
             copy$5(matrix, t.__local);
-            if (moveLayer)
-                translate$2(matrix, moveLayer.x, moveLayer.y);
             skewOfOuter(matrix, origin, skewX, skewY);
-            if (!moveLayer)
-                moveLayer = t;
-            moveLayer.x = matrix.e - t.__local.e;
-            moveLayer.y = matrix.f - t.__local.f;
+            moveByMatrix(t, matrix);
             t.skewX = MathHelper.formatSkew(t.skewX + skewX);
             t.skewY = MathHelper.formatSkew(t.skewY + skewY);
         },
@@ -4159,6 +4144,14 @@ var LeaferUI = (function (exports) {
     };
     const L = LeafHelper;
     const { updateAllWorldMatrix: updateAllWorldMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L;
+    function moveByMatrix(t, matrix) {
+        t.x += matrix.e - t.__local.e;
+        t.y += matrix.f - t.__local.f;
+    }
+    function getTempLocal(t, world) {
+        t.__layout.checkUpdate();
+        return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
+    }
 
     const LeafBoundsHelper = {
         worldBounds(target) {
@@ -4320,7 +4313,8 @@ var LeaferUI = (function (exports) {
     };
     const I = InteractionHelper;
 
-    const { getDragEventData, getDropEventData, getSwipeEventData, filterPathByEventType } = InteractionHelper;
+    const emptyList = new LeafList();
+    const { getDragEventData, getDropEventData, getSwipeEventData } = InteractionHelper;
     class Dragger {
         constructor(interaction) {
             this.interaction = interaction;
@@ -4328,8 +4322,8 @@ var LeaferUI = (function (exports) {
         setDragData(data) {
             this.dragData = getDragEventData(data, data, data);
         }
-        getDragList() {
-            return this.dragging ? exports.DropEvent.dragList || this.dragList : null;
+        getList() {
+            return this.dragging ? (exports.DragEvent.list || this.interaction.selector.list || this.dragableList || emptyList) : emptyList;
         }
         checkDrag(data, canDrag) {
             const { interaction } = this;
@@ -4358,7 +4352,7 @@ var LeaferUI = (function (exports) {
                 interaction.emit(exports.MoveEvent.MOVE, this.dragData);
             }
             else if (this.dragging) {
-                this.dragDragableList();
+                this.realDrag();
                 interaction.emit(exports.DragEvent.BEFORE_DRAG, this.dragData);
                 interaction.emit(exports.DragEvent.DRAG, this.dragData);
             }
@@ -4369,9 +4363,6 @@ var LeaferUI = (function (exports) {
                 if (this.dragging) {
                     this.interaction.emit(exports.DragEvent.START, this.dragData);
                     this.getDragableList(this.dragData.path);
-                    this.dragList = filterPathByEventType(this.dragData.path, exports.DragEvent.DRAG);
-                    if (!this.dragList.length && this.dragableList)
-                        this.dragList.pushList(this.dragableList);
                 }
             }
         }
@@ -4380,16 +4371,17 @@ var LeaferUI = (function (exports) {
             for (let i = 0, len = path.length; i < len; i++) {
                 leaf = path.list[i];
                 if (leaf.__.draggable && leaf.__.hitSelf) {
-                    this.dragableList = [leaf];
+                    this.dragableList = new LeafList(leaf);
                     break;
                 }
             }
         }
-        dragDragableList() {
+        realDrag() {
             const { running } = this.interaction;
-            if (this.dragableList && running) {
+            const list = this.getList();
+            if (list.length && running) {
                 const { moveX, moveY } = this.dragData;
-                this.dragableList.forEach(leaf => {
+                list.forEach(leaf => {
                     LeafHelper.moveWorld(leaf, moveX, moveY);
                 });
             }
@@ -4446,20 +4438,14 @@ var LeaferUI = (function (exports) {
             }
         }
         drop(data) {
-            const dropData = getDropEventData(data, this.getDragList(), exports.DropEvent.dragData);
+            const dropData = getDropEventData(data, this.getList(), exports.DragEvent.data);
             dropData.path = this.dragEnterPath;
             this.interaction.emit(exports.DropEvent.DROP, dropData);
             this.interaction.emit(exports.DragEvent.LEAVE, data, this.dragEnterPath);
         }
         dragReset() {
-            exports.DropEvent.dragList = null;
-            this.dragList = null;
-            this.dragableList = null;
-            this.dragData = null;
-            this.dragOverPath = null;
-            this.dragEnterPath = null;
-            this.dragging = null;
-            this.moving = null;
+            exports.DragEvent.list = exports.DragEvent.data = this.dragableList = this.dragData = this.dragOverPath = this.dragEnterPath = null;
+            this.dragging = this.moving = false;
         }
         checkDragOut(data) {
             const { interaction } = this;
@@ -4594,7 +4580,8 @@ var LeaferUI = (function (exports) {
                     dragDistance: 2,
                     swipeDistance: 20,
                     ignoreMove: false
-                }
+                },
+                cursor: {}
             };
             this.tapCount = 0;
             this.downKeyMap = {};
@@ -4694,6 +4681,10 @@ var LeaferUI = (function (exports) {
             this.zoom(getZoomEventData$1(center, scale, data));
             this.move(getMoveEventData$1(center, move, data));
         }
+        menu(data) {
+            this.findPath(data);
+            this.emit(exports.PointerEvent.MENU, data);
+        }
         move(data) {
             this.transformer.move(data);
         }
@@ -4803,6 +4794,9 @@ var LeaferUI = (function (exports) {
             data.path = find.path;
             return find.path;
         }
+        isDrag(leaf) {
+            return this.dragger.getList().has(leaf);
+        }
         updateDownData(data) {
             if (!data)
                 data = this.downData;
@@ -4816,10 +4810,12 @@ var LeaferUI = (function (exports) {
                 data = this.hoverData;
             if (!data)
                 return;
-            this.findPath(data, { exclude: this.dragger.getDragList(), name: exports.PointerEvent.MOVE });
+            this.findPath(data, { exclude: this.dragger.getList(), name: exports.PointerEvent.MOVE });
             this.hoverData = data;
         }
         updateCursor(data) {
+            if (this.config.cursor.stop)
+                return;
             if (!data) {
                 this.updateHoverData();
                 data = this.hoverData;
@@ -4832,17 +4828,16 @@ var LeaferUI = (function (exports) {
             }
             else if (!data || this.dragger.dragging)
                 return;
-            const path = data.path;
             let leaf;
+            let cursor;
+            const { path } = data;
             for (let i = 0, len = path.length; i < len; i++) {
                 leaf = path.list[i];
-                if (leaf.cursor) {
-                    const { cursor } = leaf;
-                    this.setCursor(cursor === 'grab' ? (this.downData ? 'grabbing' : cursor) : cursor);
-                    return;
-                }
+                cursor = leaf.cursor;
+                if (cursor)
+                    break;
             }
-            this.setCursor('default');
+            this.setCursor(cursor);
         }
         setCursor(cursor) {
             this.cursor = cursor;
@@ -4935,7 +4930,7 @@ var LeaferUI = (function (exports) {
             this.renderBounds = this.strokeBounds = this.boxBounds = { x: 0, y: 0, width: 0, height: 0 };
             this.localRenderBounds = this.localStrokeBounds = leaf.__local;
             this.boxChange();
-            this.positionChange();
+            this.matrixChange();
         }
         checkUpdate(force) {
             const { leafer } = this.leaf;
@@ -5062,11 +5057,6 @@ var LeaferUI = (function (exports) {
             this.renderSpread || (this.renderSpread = 1);
             this.boundsChanged = true;
         }
-        positionChange() {
-            this.positionChanged = true;
-            this.matrixChanged = true;
-            this.localBoxChanged || this.localBoxChange();
-        }
         scaleChange() {
             this.scaleChanged = true;
             this._scaleOrRotationChange();
@@ -5078,6 +5068,9 @@ var LeaferUI = (function (exports) {
         }
         _scaleOrRotationChange() {
             this.affectScaleOrRotation = true;
+            this.matrixChange();
+        }
+        matrixChange() {
             this.matrixChanged = true;
             this.localBoxChanged || this.localBoxChange();
         }
@@ -5220,10 +5213,11 @@ var LeaferUI = (function (exports) {
     const LeafDataProxy = {
         __setAttr(name, newValue) {
             if (this.leafer && this.leafer.created) {
-                if (typeof newValue === 'object' || this.__.__getInput(name) !== newValue) {
+                const oldValue = this.__.__getInput(name);
+                if (typeof newValue === 'object' || oldValue !== newValue) {
                     this.__[name] = newValue;
                     const { CHANGE } = PropertyEvent;
-                    const event = new PropertyEvent(CHANGE, this, name, this.__.__get(name), newValue);
+                    const event = new PropertyEvent(CHANGE, this, name, oldValue, newValue);
                     if (this.hasEvent(CHANGE) && !this.isLeafer)
                         this.emitEvent(event);
                     this.leafer.emitEvent(event);
@@ -5314,17 +5308,17 @@ var LeaferUI = (function (exports) {
                     }
                 }
             }
-            if (layout.positionChanged) {
-                r.e = this.__.x;
-                r.f = this.__.y;
-                const { width, height, around } = this.__;
-                if (around && width && height) {
+            const { x, y, around } = this.__;
+            r.e = x;
+            r.f = y;
+            if (around) {
+                const { width, height } = this.__;
+                if (width && height) {
                     const origin = (around === 'center') ? defaultCenter : around;
                     const offsetX = width * origin.x, offsetY = height * origin.y;
                     r.e -= offsetX * r.a + offsetY * r.c;
                     r.f -= offsetX * r.b + offsetY * r.d;
                 }
-                layout.positionChanged = false;
             }
             this.__layout.matrixChanged = false;
         }
@@ -5419,7 +5413,7 @@ var LeaferUI = (function (exports) {
             data.__naturalWidth = layout.boxBounds.width;
             data.__naturalHeight = layout.boxBounds.height;
             if (this.around) {
-                layout.positionChanged = layout.matrixChanged = true;
+                layout.matrixChanged = true;
                 this.__updateWorldMatrix();
             }
         },
@@ -5460,7 +5454,7 @@ var LeaferUI = (function (exports) {
                     const tempCanvas = canvas.getSameCanvas(true);
                     this.__draw(tempCanvas, options);
                     const blendMode = this.__.isEraser ? 'destination-out' : this.__.blendMode;
-                    if (options.matrix || this.__hasMirror) {
+                    if (this.__hasMirror || options.matrix) {
                         canvas.copyWorldByReset(tempCanvas, null, null, blendMode);
                     }
                     else {
@@ -5529,7 +5523,12 @@ var LeaferUI = (function (exports) {
                     this.__renderBranch(tempCanvas, options);
                     canvas.opacity = this.__worldOpacity;
                     const blendMode = this.__.isEraser ? 'destination-out' : this.__.blendMode;
-                    options.matrix ? canvas.copyWorld(tempCanvas, null, null, blendMode) : canvas.copyWorld(tempCanvas, this.__world, this.__world, blendMode);
+                    if (this.__hasMirror || options.matrix) {
+                        canvas.copyWorld(tempCanvas, null, null, blendMode);
+                    }
+                    else {
+                        canvas.copyWorld(tempCanvas, this.__world, this.__world, blendMode);
+                    }
                     tempCanvas.recycle();
                 }
                 else {
@@ -5602,11 +5601,16 @@ var LeaferUI = (function (exports) {
         get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
         constructor(data) {
             this.innerId = create(LEAF);
+            this.reset(data);
+        }
+        reset(data) {
             this.__world = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0, scaleX: 1, scaleY: 1, rotation: 0, skewX: 0, skewY: 0 };
             this.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
             this.__worldOpacity = 1;
             this.__ = new this.__DataProcessor(this);
             this.__layout = new this.__LayoutProcessor(this);
+            if (this.__level)
+                this.resetCustom();
             if (data) {
                 if (data.children) {
                     this.set(data);
@@ -5616,6 +5620,10 @@ var LeaferUI = (function (exports) {
                 }
             }
         }
+        resetCustom() {
+            this.__hasMask = this.__hasEraser = null;
+            this.forceUpdate();
+        }
         waitParent(item) {
             this.parent ? item() : (this.__parentWait ? this.__parentWait.push(item) : this.__parentWait = [item]);
         }
@@ -5630,8 +5638,11 @@ var LeaferUI = (function (exports) {
                 if (leafer !== null)
                     leafer = this;
             }
+            if (this.leafer && !leafer)
+                this.leafer.leafs--;
             this.leafer = leafer;
             if (leafer) {
+                leafer.leafs++;
                 this.__level = this.parent ? this.parent.__level + 1 : 1;
                 if (this.__leaferWait)
                     WaitHelper.run(this.__leaferWait);
@@ -5654,7 +5665,7 @@ var LeaferUI = (function (exports) {
         __getAttr(_attrName) { return undefined; }
         forceUpdate(attrName) {
             if (attrName === undefined)
-                attrName = 'scaleX';
+                attrName = 'width';
             else if (attrName === 'surface')
                 attrName = 'blendMode';
             const value = this.__.__getInput(attrName);
@@ -5861,7 +5872,7 @@ var LeaferUI = (function (exports) {
             index === undefined ? this.children.push(child) : this.children.splice(index, 0, child);
             if (child.isBranch)
                 this.__.__childBranchNumber = (this.__.__childBranchNumber || 0) + 1;
-            child.__layout.boundsChanged || child.__layout.positionChange();
+            child.__layout.boundsChanged || child.__layout.matrixChange();
             if (child.__parentWait)
                 WaitHelper.run(child.__parentWait);
             if (this.leafer) {
@@ -6080,7 +6091,7 @@ var LeaferUI = (function (exports) {
         let layout;
         updateList.list.forEach(leaf => {
             layout = leaf.__layout;
-            if (levelList.without(leaf) && !layout.useZoomProxy) {
+            if (levelList.without(leaf) && !layout.proxyZoom) {
                 if (layout.matrixChanged) {
                     updateAllWorldMatrix$1(leaf);
                     levelList.push(leaf);
@@ -6399,8 +6410,7 @@ var LeaferUI = (function (exports) {
             const { canvas, updateBlocks: list } = this;
             if (!list)
                 return debug$4.warn('PartRender: need update attr');
-            if (list.some(block => block.includes(this.target.__world)))
-                this.mergeBlocks();
+            this.mergeBlocks();
             list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
                 this.clipRender(block); });
         }
@@ -6419,7 +6429,7 @@ var LeaferUI = (function (exports) {
                 canvas.clearWorld(bounds, true);
                 canvas.clipWorld(bounds, true);
             }
-            this.__render(bounds, realBounds);
+            this.__render(bounds, includes, realBounds);
             canvas.restore();
             Run.end(t);
         }
@@ -6428,12 +6438,12 @@ var LeaferUI = (function (exports) {
             const { canvas } = this;
             canvas.save();
             canvas.clear();
-            this.__render(canvas.bounds);
+            this.__render(canvas.bounds, true);
             canvas.restore();
             Run.end(t);
         }
-        __render(bounds, realBounds) {
-            const options = (bounds === null || bounds === void 0 ? void 0 : bounds.includes(this.target.__world)) ? {} : { bounds };
+        __render(bounds, includes, realBounds) {
+            const options = bounds.includes(this.target.__world) ? { includes } : { bounds, includes };
             if (this.needFill)
                 this.canvas.fillWorld(bounds, this.config.fill);
             if (Debug.showRepaint)
@@ -7037,6 +7047,7 @@ var LeaferUI = (function (exports) {
                 'pointerdown': this.onPointerDown,
                 'mousedown': this.onMouseDown,
                 'touchstart': this.onTouchStart,
+                'contextmenu': this.onContextMenu,
                 'wheel': this.onWheel,
                 'gesturestart': this.onGesturestart,
                 'gesturechange': this.onGesturechange,
@@ -7109,6 +7120,9 @@ var LeaferUI = (function (exports) {
         onKeyUp(e) {
             this.keyUp(KeyEventHelper.convert(e));
         }
+        onContextMenu(e) {
+            this.menu(PointerEventHelper.convert(e, this.getLocal(e)));
+        }
         onScroll() {
             this.canvas.updateClientBounds();
         }
@@ -7313,6 +7327,11 @@ var LeaferUI = (function (exports) {
                 });
             }
         };
+        Platform.event = {
+            stopDefault(origin) { origin.preventDefault(); },
+            stopNow(origin) { origin.stopImmediatePropagation(); },
+            stop(origin) { origin.stopPropagation(); }
+        };
         Platform.canvas = Creator.canvas();
         Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient;
     }
@@ -7349,7 +7368,7 @@ var LeaferUI = (function (exports) {
     function design(leafer) {
         if (leafer.isApp)
             return;
-        leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, (e) => { LeafHelper.moveWorld(leafer.moveLayer, e.moveX, e.moveY); }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
+        leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, (e) => { LeafHelper.moveWorld(leafer.zoomLayer, e.moveX, e.moveY); }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
             const { scaleX } = leafer.zoomLayer.__, { min, max } = leafer.config.zoom;
             let { scale } = e;
             if (scale * Math.abs(scaleX) < min)
@@ -7428,8 +7447,10 @@ var LeaferUI = (function (exports) {
             if (typeof value === 'string' || !value) {
                 if (this.__isFills) {
                     this.__removeInput('fill');
-                    Paint.recycleImage(this, 'fill');
+                    Paint.recycleImage('fill', this);
                     this.__isFills = false;
+                    if (this.__pixelFill)
+                        this.__pixelFill = false;
                 }
                 this._fill = value;
             }
@@ -7444,8 +7465,10 @@ var LeaferUI = (function (exports) {
             if (typeof value === 'string' || !value) {
                 if (this.__isStrokes) {
                     this.__removeInput('stroke');
-                    Paint.recycleImage(this, 'stroke');
+                    Paint.recycleImage('stroke', this);
                     this.__isStrokes = false;
+                    if (this.__pixelStroke)
+                        this.__pixelStroke = false;
                 }
                 this._stroke = value;
             }
@@ -7696,11 +7719,11 @@ var LeaferUI = (function (exports) {
             const { fill, stroke, __drawAfterFill } = this.__;
             this.__drawRenderPath(canvas);
             if (fill)
-                Paint.fill(this, canvas, fill);
+                Paint.fill(fill, this, canvas);
             if (__drawAfterFill)
                 this.__drawAfterFill(canvas, options);
             if (stroke)
-                Paint.stroke(this, canvas, stroke);
+                Paint.stroke(stroke, this, canvas, options);
         },
         __draw(canvas, options) {
             if (this.__.__complex) {
@@ -7712,40 +7735,40 @@ var LeaferUI = (function (exports) {
                     if (shadow)
                         Effect.shadow(this, canvas, shape, options);
                     if (fill)
-                        this.__.__isFills ? Paint.fills(this, canvas, fill) : Paint.fill(this, canvas, fill);
+                        this.__.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
                     if (__drawAfterFill)
                         this.__drawAfterFill(canvas, options);
                     if (innerShadow)
                         Effect.innerShadow(this, canvas, shape, options);
                     if (stroke)
-                        this.__.__isStrokes ? Paint.strokes(this, canvas, stroke) : Paint.stroke(this, canvas, stroke);
+                        this.__.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
                     if (shape.worldCanvas)
                         shape.worldCanvas.recycle();
                     shape.canvas.recycle();
                 }
                 else {
                     if (fill)
-                        this.__.__isFills ? Paint.fills(this, canvas, fill) : Paint.fill(this, canvas, fill);
+                        this.__.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
                     if (__drawAfterFill)
                         this.__drawAfterFill(canvas, options);
                     if (stroke)
-                        this.__.__isStrokes ? Paint.strokes(this, canvas, stroke) : Paint.stroke(this, canvas, stroke);
+                        this.__.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
                 }
             }
             else {
                 this.__drawFast(canvas, options);
             }
         },
-        __renderShape(canvas, options) {
+        __renderShape(canvas, renderOptions) {
             if (!this.__worldOpacity)
                 return;
-            canvas.setWorld(this.__world, options.matrix);
+            canvas.setWorld(this.__world, renderOptions.matrix);
             const { fill, stroke } = this.__;
             this.__drawRenderPath(canvas);
             if (fill)
-                Paint.fill(this, canvas, '#000000');
+                this.__.__pixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
             if (stroke)
-                Paint.stroke(this, canvas, '#000000');
+                this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas, renderOptions) : Paint.stroke('#000000', this, canvas, renderOptions);
         }
     };
 
@@ -7792,9 +7815,7 @@ var LeaferUI = (function (exports) {
             const { scaleX, scaleY } = this;
             return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX;
         }
-        constructor(data) {
-            super(data);
-        }
+        reset(_data) { }
         set(data) {
             Object.assign(this, data);
         }
@@ -7814,9 +7835,9 @@ var LeaferUI = (function (exports) {
             if (this.__.__input) {
                 const { fill, stroke } = this.__.__input;
                 if (fill)
-                    Paint.compute(this, 'fill');
+                    Paint.compute('fill', this);
                 if (stroke)
-                    Paint.compute(this, 'stroke');
+                    Paint.compute('stroke', this);
             }
         }
         __updateRenderPath() {
@@ -7933,7 +7954,7 @@ var LeaferUI = (function (exports) {
         hitType()
     ], exports.UI.prototype, "hitRadius", void 0);
     __decorate([
-        cursorType('default')
+        cursorType('')
     ], exports.UI.prototype, "cursor", void 0);
     __decorate([
         surfaceType()
@@ -7983,6 +8004,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         effectType()
     ], exports.UI.prototype, "grayscale", void 0);
+    __decorate([
+        rewrite(exports.Leaf.prototype.reset)
+    ], exports.UI.prototype, "reset", null);
     __decorate([
         rewrite(PathDrawer.drawPathByData)
     ], exports.UI.prototype, "__drawPathByData", null);
@@ -8020,8 +8044,12 @@ var LeaferUI = (function (exports) {
             if (data.children) {
                 const { children } = data;
                 delete data.children;
-                if (!this.children)
+                if (!this.children) {
                     this.__setBranch();
+                }
+                else {
+                    this.removeAll(true);
+                }
                 super.set(data);
                 let child;
                 children.forEach(childData => {
@@ -8222,8 +8250,10 @@ var LeaferUI = (function (exports) {
                         ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius);
                         moveTo$3(path, width, ry);
                     }
-                    ellipse(path, rx, ry, rx, ry, 0, 0, 360, true);
+                    ellipse(path, rx, ry, rx, ry, 0, 360, 0, true);
                 }
+                if (Platform.name === 'node')
+                    this.__.path = PathConvert.toCanvasData(path, true);
             }
             else {
                 if (startAngle || endAngle) {
@@ -8744,10 +8774,10 @@ var LeaferUI = (function (exports) {
         get __tag() { return 'Leafer'; }
         get isApp() { return false; }
         get app() { return this.parent || this; }
+        get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
         constructor(userConfig, data) {
             super(data);
             this.zoomLayer = this;
-            this.moveLayer = this;
             this.config = {
                 type: 'design',
                 start: true,
@@ -8763,6 +8793,7 @@ var LeaferUI = (function (exports) {
                     autoDistance: 2
                 }
             };
+            this.leafs = 0;
             this.__eventIds = [];
             this.__controllers = [];
             this.__readyWait = [];
@@ -8876,9 +8907,8 @@ var LeaferUI = (function (exports) {
             this.isLeafer = !!leafer;
             this.__level = 1;
         }
-        setZoomLayer(zoomLayer, moveLayer) {
+        setZoomLayer(zoomLayer) {
             this.zoomLayer = zoomLayer;
-            this.moveLayer = moveLayer || zoomLayer;
         }
         __checkAutoLayout(config) {
             if (!config.width || !config.height) {
@@ -9386,17 +9416,20 @@ var LeaferUI = (function (exports) {
                     createPattern(ui, paint, canvas.pixelRatio);
                 }
                 else {
-                    ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
-                        if (canvas.bounds.hit(ui.__world) && createPattern(ui, paint, canvas.pixelRatio))
-                            ui.forceUpdate('surface');
-                    }), 300);
+                    if (!paint.patternTask) {
+                        paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
+                            paint.patternTask = null;
+                            if (canvas.bounds.hit(ui.__world) && createPattern(ui, paint, canvas.pixelRatio))
+                                ui.forceUpdate('surface');
+                        }), 300);
+                    }
                 }
                 return false;
             }
         }
     }
 
-    function recycleImage(data, attrName) {
+    function recycleImage(attrName, data) {
         const paints = (attrName === 'fill' ? data._fill : data._stroke);
         if (paints instanceof Array) {
             let image, recycleMap, input, url;
@@ -9441,11 +9474,11 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    function fill(ui, canvas, fill) {
+    function fill(fill, ui, canvas) {
         canvas.fillStyle = fill;
         ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
     }
-    function fills(ui, canvas, fills) {
+    function fills(fills, ui, canvas) {
         let item;
         const { windingRule, __font } = ui.__;
         for (let i = 0, len = fills.length; i < len; i++) {
@@ -9476,32 +9509,37 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    function strokeText(ui, canvas, stroke) {
+    function strokeText(stroke, ui, canvas, renderOptions) {
         const { strokeAlign } = ui.__;
         const isStrokes = typeof stroke !== 'string';
         switch (strokeAlign) {
             case 'center':
                 canvas.setStroke(isStrokes ? undefined : stroke, ui.__.strokeWidth, ui.__);
-                isStrokes ? drawStrokesStyle(ui, stroke, canvas, true) : drawTextStroke(ui, canvas);
+                isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
                 break;
             case 'inside':
-                drawAlignStroke(ui, canvas, stroke, 'inside', isStrokes);
+                drawAlignStroke('inside', stroke, isStrokes, ui, canvas, renderOptions);
                 break;
             case 'outside':
-                drawAlignStroke(ui, canvas, stroke, 'outside', isStrokes);
+                drawAlignStroke('outside', stroke, isStrokes, ui, canvas, renderOptions);
                 break;
         }
     }
-    function drawAlignStroke(ui, canvas, stroke, align, isStrokes) {
+    function drawAlignStroke(align, stroke, isStrokes, ui, canvas, renderOptions) {
         const { strokeWidth, __font } = ui.__;
         const out = canvas.getSameCanvas(true);
         out.setStroke(isStrokes ? undefined : stroke, strokeWidth * 2, ui.__);
         out.font = __font;
-        isStrokes ? drawStrokesStyle(ui, stroke, out, true) : drawTextStroke(ui, out);
+        isStrokes ? drawStrokesStyle(stroke, true, ui, out) : drawTextStroke(ui, out);
         out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
         fillText(ui, out);
         out.blendMode = 'normal';
-        canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
+        if (ui.__hasMirror || renderOptions.matrix) {
+            canvas.copyWorldByReset(out);
+        }
+        else {
+            canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
+        }
         out.recycle();
     }
     function drawTextStroke(ui, canvas) {
@@ -9521,7 +9559,7 @@ var LeaferUI = (function (exports) {
                 canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
         }
     }
-    function drawStrokesStyle(ui, strokes, canvas, isText) {
+    function drawStrokesStyle(strokes, isText, ui, canvas) {
         let item;
         for (let i = 0, len = strokes.length; i < len; i++) {
             item = strokes[i];
@@ -9541,13 +9579,13 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    function stroke(ui, canvas, stroke) {
+    function stroke(stroke, ui, canvas, renderOptions) {
         const options = ui.__;
         const { strokeWidth, strokeAlign, __font } = options;
         if (!strokeWidth)
             return;
         if (__font) {
-            strokeText(ui, canvas, stroke);
+            strokeText(stroke, ui, canvas, renderOptions);
         }
         else {
             switch (strokeAlign) {
@@ -9569,31 +9607,36 @@ var LeaferUI = (function (exports) {
                     out.stroke();
                     options.windingRule ? out.clip(options.windingRule) : out.clip();
                     out.clearWorld(ui.__layout.renderBounds);
-                    canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
+                    if (ui.__hasMirror || renderOptions.matrix) {
+                        canvas.copyWorldByReset(out);
+                    }
+                    else {
+                        canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
+                    }
                     out.recycle();
                     break;
             }
         }
     }
-    function strokes(ui, canvas, strokes) {
+    function strokes(strokes, ui, canvas, renderOptions) {
         const options = ui.__;
         const { strokeWidth, strokeAlign, __font } = options;
         if (!strokeWidth)
             return;
         if (__font) {
-            strokeText(ui, canvas, strokes);
+            strokeText(strokes, ui, canvas, renderOptions);
         }
         else {
             switch (strokeAlign) {
                 case 'center':
                     canvas.setStroke(undefined, strokeWidth, options);
-                    drawStrokesStyle(ui, strokes, canvas);
+                    drawStrokesStyle(strokes, false, ui, canvas);
                     break;
                 case 'inside':
                     canvas.save();
                     canvas.setStroke(undefined, strokeWidth * 2, options);
                     options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
-                    drawStrokesStyle(ui, strokes, canvas);
+                    drawStrokesStyle(strokes, false, ui, canvas);
                     canvas.restore();
                     break;
                 case 'outside':
@@ -9601,10 +9644,15 @@ var LeaferUI = (function (exports) {
                     const out = canvas.getSameCanvas(true);
                     ui.__drawRenderPath(out);
                     out.setStroke(undefined, strokeWidth * 2, ui.__);
-                    drawStrokesStyle(ui, strokes, out);
+                    drawStrokesStyle(strokes, false, ui, out);
                     options.windingRule ? out.clip(options.windingRule) : out.clip();
                     out.clearWorld(renderBounds);
-                    canvas.copyWorldToInner(out, ui.__world, renderBounds);
+                    if (ui.__hasMirror || renderOptions.matrix) {
+                        canvas.copyWorldByReset(out);
+                    }
+                    else {
+                        canvas.copyWorldToInner(out, ui.__world, renderBounds);
+                    }
                     out.recycle();
                     break;
             }
@@ -9736,21 +9784,34 @@ var LeaferUI = (function (exports) {
     }
 
     let recycleMap;
-    function compute(ui, attrName) {
+    function compute(attrName, ui) {
         const value = [];
+        const data = ui.__;
         let item;
-        let paints = ui.__.__input[attrName];
+        let paints = data.__input[attrName];
         if (!(paints instanceof Array))
             paints = [paints];
-        recycleMap = recycleImage(ui.__, attrName);
+        recycleMap = recycleImage(attrName, data);
         for (let i = 0, len = paints.length; i < len; i++) {
-            item = getLeafPaint(ui, paints[i], attrName);
+            item = getLeafPaint(attrName, paints[i], ui);
             if (item)
                 value.push(item);
         }
-        ui.__['_' + attrName] = value.length ? value : undefined;
+        data['_' + attrName] = value.length ? value : undefined;
+        let isPixel;
+        if (paints.length === 1) {
+            const paint = paints[0];
+            if (paint.type === 'image')
+                isPixel = ImageManager.isPixel(paint);
+        }
+        if (attrName === 'fill') {
+            data.__pixelFill = isPixel;
+        }
+        else {
+            data.__pixelStroke = isPixel;
+        }
     }
-    function getLeafPaint(ui, paint, attrName) {
+    function getLeafPaint(attrName, paint, ui) {
         if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
             return undefined;
         const { boxBounds } = ui.__layout;
@@ -9788,7 +9849,7 @@ var LeaferUI = (function (exports) {
     const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = BoundsHelper;
     const tempBounds = {};
     const offsetOutBounds$1 = {};
-    function shadow(ui, current, shape, _options) {
+    function shadow(ui, current, shape, renderOptions) {
         let copyBounds, spreadScale;
         const { __world, __layout } = ui;
         const { shadow } = ui.__;
@@ -9810,7 +9871,7 @@ var LeaferUI = (function (exports) {
                 }
                 worldCanvas ? other.copyWorld(worldCanvas, __world, __world, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
             }
-            if (ui.__hasMirror) {
+            if (ui.__hasMirror || renderOptions.matrix) {
                 current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
             }
             else {
@@ -9850,7 +9911,7 @@ var LeaferUI = (function (exports) {
 
     const { toOffsetOutBounds } = BoundsHelper;
     const offsetOutBounds = {};
-    function innerShadow(ui, current, shape, _options) {
+    function innerShadow(ui, current, shape, renderOptions) {
         let copyBounds, spreadScale;
         const { __world, __layout: __layout } = ui;
         const { innerShadow } = ui.__;
@@ -9874,7 +9935,7 @@ var LeaferUI = (function (exports) {
                 copyBounds = bounds;
             }
             other.fillWorld(copyBounds, item.color, 'source-in');
-            if (ui.__hasMirror) {
+            if (ui.__hasMirror || renderOptions.matrix) {
                 current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
             }
             else {
@@ -10489,7 +10550,6 @@ var LeaferUI = (function (exports) {
     exports.TaskItem = TaskItem;
     exports.TaskProcessor = TaskProcessor;
     exports.TextConvert = TextConvert$1;
-    exports.TransformEvent = TransformEvent;
     exports.TwoPointBounds = TwoPointBounds;
     exports.TwoPointBoundsHelper = TwoPointBoundsHelper;
     exports.UIBounds = UIBounds;