@galacean/effects-core 2.10.0-alpha.2 → 2.10.0-alpha.4

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime core for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.10.0-alpha.2
+ * Version: v2.10.0-alpha.4
  */
 
 'use strict';
@@ -7056,6 +7056,11 @@ function _create_class(Constructor, protoProps, staticProps) {
     // OVERRIDE
     };
     /**
+   * Called when the owning item's sibling order changes.
+   */ _proto.onOrderInParentChanged = function onOrderInParentChanged() {
+    // OVERRIDE
+    };
+    /**
    * @internal
    */ _proto.enable = function enable() {
         if (this.item.composition) {
@@ -14013,6 +14018,7 @@ var seed$7 = 1;
             quat: new Quaternion(0, 0, 0, 1),
             scale: new Vector3(1, 1, 1)
         };
+        this.eventEmitter = new EventEmitter();
         this.name = "transform_" + seed$7++;
         if (props) {
             this.setTransform(props);
@@ -14025,6 +14031,12 @@ var seed$7 = 1;
         }
     }
     var _proto = Transform.prototype;
+    _proto.on = function on(eventName, listener, options) {
+        this.eventEmitter.on(eventName, listener, options);
+    };
+    _proto.off = function off(eventName, listener) {
+        this.eventEmitter.off(eventName, listener);
+    };
     /**
    * 父 transform 切换时的 hook。子类可重写以接管订阅 / 解算等逻辑
    * @param oldParent - 切换前的父 transform(若没有则为 null)
@@ -14443,6 +14455,7 @@ var seed$7 = 1;
         this.children.forEach(function(c) {
             c.worldMatrixDirty = true;
         });
+        this.eventEmitter.emit("changed", this);
     };
     /**
    * 转换右手坐标系左手螺旋对应的四元数到对应的旋转角
@@ -14461,14 +14474,16 @@ var seed$7 = 1;
                 return this.parent;
             },
             set: function set(transform) {
-                if (!transform || this.parent === transform || this === transform) {
+                if (this.parent === transform || this === transform) {
                     return;
                 }
                 var oldParent = this.parent;
                 if (this.parent) {
                     this.parent.removeChild(this);
                 }
-                transform.addChild(this);
+                if (transform) {
+                    transform.addChild(this);
+                }
                 this.parent = transform;
                 this.worldMatrixDirty = true;
                 this.onParentTransformChanged(oldParent, transform);
@@ -14651,7 +14666,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         return results;
     };
     _proto.setParent = function setParent(vfxItem) {
-        if (vfxItem === this && !vfxItem) {
+        if (vfxItem === this || this.parent === vfxItem) {
             return;
         }
         if (this.parent) {
@@ -15038,6 +15053,12 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
             child.onParentChanged();
         }
     };
+    _proto.onOrderInParentChanged = function onOrderInParentChanged() {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            component.onOrderInParentChanged();
+        }
+    };
     /**
    * @internal
    */ _proto.setRendererComponentOrder = function setRendererComponentOrder(renderOrder) {
@@ -15122,15 +15143,16 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    */ _proto.dispose = function dispose() {
         if (this.composition) {
             this.composition.destroyItem(this);
-            // component 调用 dispose() 会将自身从 this.components 数组删除，slice() 避免迭代错误
-            for(var _iterator = _create_for_of_iterator_helper_loose(this.components.slice()), _step; !(_step = _iterator()).done;){
-                var component = _step.value;
-                component.dispose();
-            }
-            this.components = [];
-            this._composition = null;
-            this.transform.setValid(false);
         }
+        // component.dispose() removes itself from this.components. Use a snapshot
+        // so Engine.root components are also disposed even without a Composition.
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.components.slice()), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            component.dispose();
+        }
+        this.components = [];
+        this._composition = null;
+        this.transform.setValid(false);
         this.resetChildrenParent();
         EffectsObject.prototype.dispose.call(this);
     };
@@ -15326,6 +15348,33 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
                 this.setRendererComponentOrder(value);
             }
         },
+        {
+            key: "orderInParent",
+            get: /** Zero-based sibling order within the parent item. */ function get() {
+                var _this_parent;
+                var _this_parent_children_indexOf;
+                return (_this_parent_children_indexOf = (_this_parent = this.parent) == null ? void 0 : _this_parent.children.indexOf(this)) != null ? _this_parent_children_indexOf : -1;
+            },
+            set: function set(value) {
+                var _this_parent;
+                var siblings = (_this_parent = this.parent) == null ? void 0 : _this_parent.children;
+                var _siblings_indexOf;
+                var oldIndex = (_siblings_indexOf = siblings == null ? void 0 : siblings.indexOf(this)) != null ? _siblings_indexOf : -1;
+                if (!siblings || oldIndex === -1) {
+                    return;
+                }
+                var newIndex = Math.max(0, Math.min(Math.trunc(value), siblings.length - 1));
+                if (oldIndex === newIndex) {
+                    return;
+                }
+                siblings.splice(oldIndex, 1);
+                siblings.splice(newIndex, 0, this);
+                for(var _iterator = _create_for_of_iterator_helper_loose(siblings), _step; !(_step = _iterator()).done;){
+                    var sibling = _step.value;
+                    sibling.onOrderInParentChanged();
+                }
+            }
+        },
         {
             key: "isActive",
             get: /**
@@ -15582,35 +15631,35 @@ function vecMulCombine(out, a, b) {
     }
     return out;
 }
-var _obj$5;
-var particleOriginTranslateMap$1 = (_obj$5 = {}, _obj$5[ParticleOrigin.PARTICLE_ORIGIN_CENTER] = [
+var _obj$6;
+var particleOriginTranslateMap$1 = (_obj$6 = {}, _obj$6[ParticleOrigin.PARTICLE_ORIGIN_CENTER] = [
     0,
     0
-], _obj$5[ParticleOrigin.PARTICLE_ORIGIN_CENTER_BOTTOM] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_CENTER_BOTTOM] = [
     0,
     -0.5
-], _obj$5[ParticleOrigin.PARTICLE_ORIGIN_CENTER_TOP] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_CENTER_TOP] = [
     0,
     0.5
-], _obj$5[ParticleOrigin.PARTICLE_ORIGIN_LEFT_TOP] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_LEFT_TOP] = [
     -0.5,
     0.5
-], _obj$5[ParticleOrigin.PARTICLE_ORIGIN_LEFT_CENTER] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_LEFT_CENTER] = [
     -0.5,
     0
-], _obj$5[ParticleOrigin.PARTICLE_ORIGIN_LEFT_BOTTOM] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_LEFT_BOTTOM] = [
     -0.5,
     -0.5
-], _obj$5[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_CENTER] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_CENTER] = [
     0.5,
     0
-], _obj$5[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [
     0.5,
     -0.5
-], _obj$5[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_TOP] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_TOP] = [
     0.5,
     0.5
-], _obj$5);
+], _obj$6);
 function nearestPowerOfTwo(value) {
     return Math.pow(2, Math.round(Math.log(value) / Math.LN2));
 }
@@ -17348,27 +17397,27 @@ function oldBezierKeyFramesToNew(props) {
  * 对象引用阶梯曲线（spec ValueType.REFERENCE_CURVE）。
  * props 为 [[time, value], ...]，value 为已解析的对象引用实例。
  */ var REFERENCE_CURVE = 28;
-var _obj$4;
-var map$1 = (_obj$4 = {}, _obj$4[ValueType.RANDOM] = function(props) {
+var _obj$5;
+var map$1 = (_obj$5 = {}, _obj$5[ValueType.RANDOM] = function(props) {
     if (_instanceof1(props[0], Array)) {
         return new RandomVectorValue(props);
     }
     return new RandomValue(props);
-}, _obj$4[ValueType.CONSTANT] = function(props) {
+}, _obj$5[ValueType.CONSTANT] = function(props) {
     return new StaticValue(props);
-}, _obj$4[ValueType.CONSTANT_VEC2] = function(props) {
+}, _obj$5[ValueType.CONSTANT_VEC2] = function(props) {
     return new StaticValue(props);
-}, _obj$4[ValueType.CONSTANT_VEC3] = function(props) {
+}, _obj$5[ValueType.CONSTANT_VEC3] = function(props) {
     return new StaticValue(props);
-}, _obj$4[ValueType.CONSTANT_VEC4] = function(props) {
+}, _obj$5[ValueType.CONSTANT_VEC4] = function(props) {
     return new StaticValue(props);
-}, _obj$4[ValueType.RGBA_COLOR] = function(props) {
+}, _obj$5[ValueType.RGBA_COLOR] = function(props) {
     return new StaticValue(props);
-}, _obj$4[ValueType.COLORS] = function(props) {
+}, _obj$5[ValueType.COLORS] = function(props) {
     return new RandomSetValue(props.map(function(c) {
         return colorToArr$1(c, false);
     }));
-}, _obj$4[ValueType.LINE] = function(props) {
+}, _obj$5[ValueType.LINE] = function(props) {
     if (props.length === 2 && props[0][0] === 0 && props[1][0] === 1) {
         return new LinearValue([
             props[0][1],
@@ -17376,38 +17425,38 @@ var map$1 = (_obj$4 = {}, _obj$4[ValueType.RANDOM] = function(props) {
         ]);
     }
     return new LineSegments(props);
-}, _obj$4[ValueType.GRADIENT_COLOR] = function(props) {
+}, _obj$5[ValueType.GRADIENT_COLOR] = function(props) {
     return new GradientValue(props);
-}, _obj$4[ValueType.LINEAR_PATH] = function(pros) {
+}, _obj$5[ValueType.LINEAR_PATH] = function(pros) {
     return new PathSegments(pros);
-}, _obj$4[ValueType.BEZIER_CURVE] = function(props) {
+}, _obj$5[ValueType.BEZIER_CURVE] = function(props) {
     if (props.length === 1) {
         return new StaticValue(props[0][1][1]);
     }
     return new BezierCurve(props);
-}, _obj$4[ValueType.BEZIER_CURVE_PATH] = function(props) {
+}, _obj$5[ValueType.BEZIER_CURVE_PATH] = function(props) {
     if (props[0].length === 1) {
         return new StaticValue(_construct(Vector3, [].concat(props[1][0])));
     }
     return new BezierCurvePath(props);
-}, _obj$4[ValueType.BEZIER_CURVE_QUAT] = function(props) {
+}, _obj$5[ValueType.BEZIER_CURVE_QUAT] = function(props) {
     if (props[0].length === 1) {
         return new StaticValue(_construct(Quaternion, [].concat(props[1][0])));
     }
     return new BezierCurveQuat(props);
-}, _obj$4[ValueType.COLOR_CURVE] = function(props) {
+}, _obj$5[ValueType.COLOR_CURVE] = function(props) {
     return new ColorCurve(props);
-}, _obj$4[ValueType.VECTOR4_CURVE] = function(props) {
+}, _obj$5[ValueType.VECTOR4_CURVE] = function(props) {
     return new Vector4Curve(props);
-}, _obj$4[ValueType.VECTOR2_CURVE] = function(props) {
+}, _obj$5[ValueType.VECTOR2_CURVE] = function(props) {
     return new Vector2Curve(props);
 }, // TODO: add spec
-_obj$4[VECTOR3_CURVE] = function(props) {
+_obj$5[VECTOR3_CURVE] = function(props) {
     return new Vector3Curve(props);
 }, // 对象引用阶梯曲线（不插值）：props.data 为 [time, value][]，value 已解析为 EffectsObject
-_obj$4[REFERENCE_CURVE] = function(props) {
+_obj$5[REFERENCE_CURVE] = function(props) {
     return new ReferenceCurve(props);
-}, _obj$4);
+}, _obj$5);
 function createValueGetter(args) {
     if (!args || !isNaN(+args)) {
         return new StaticValue(args || 0);
@@ -20924,20 +20973,24 @@ var geometryId = 1;
         var vertexArrayObjects = this.vertexArrayObjects;
         var engine = this.engine;
         if (!vertexArrayObjects || !supportsVertexArrayObjects(engine)) {
-            engine.bindBuffers(this.vertexBuffers, this.indexBuffer, shader);
+            var _this_indexBuffer;
+            engine.bindBuffers(this.vertexBuffers, (_this_indexBuffer = this.indexBuffer) != null ? _this_indexBuffer : null, shader);
             return;
         }
         var vertexArrayObject = vertexArrayObjects[shader.key];
         if (!vertexArrayObject) {
-            vertexArrayObject = engine.recordVertexArrayObject(this.vertexBuffers, this.indexBuffer, shader);
+            var _this_indexBuffer1;
+            vertexArrayObject = engine.recordVertexArrayObject(this.vertexBuffers, (_this_indexBuffer1 = this.indexBuffer) != null ? _this_indexBuffer1 : null, shader);
             if (vertexArrayObject) {
                 vertexArrayObjects[shader.key] = vertexArrayObject;
             }
         }
         if (vertexArrayObject) {
-            engine.bindVertexArrayObject(vertexArrayObject, this.indexBuffer);
+            var _this_indexBuffer2;
+            engine.bindVertexArrayObject(vertexArrayObject, (_this_indexBuffer2 = this.indexBuffer) != null ? _this_indexBuffer2 : null);
         } else {
-            engine.bindBuffers(this.vertexBuffers, this.indexBuffer, shader);
+            var _this_indexBuffer3;
+            engine.bindBuffers(this.vertexBuffers, (_this_indexBuffer3 = this.indexBuffer) != null ? _this_indexBuffer3 : null, shader);
         }
     };
     _proto.releaseVertexArrayObject = function releaseVertexArrayObject(key) {
@@ -21344,8 +21397,8 @@ var vertexBufferSemanticMap = {
     TANGENT_BS2: "aTargetTangent2",
     TANGENT_BS3: "aTargetTangent3"
 };
-var _obj$3;
-var BYTES_TYPE_MAP = (_obj$3 = {}, _obj$3[exports.BufferDataType.Float] = 4, _obj$3[exports.BufferDataType.Int] = 4, _obj$3[exports.BufferDataType.UnsignedInt] = 4, _obj$3[exports.BufferDataType.Short] = 2, _obj$3[exports.BufferDataType.UnsignedShort] = 2, _obj$3[exports.BufferDataType.Byte] = 1, _obj$3[exports.BufferDataType.UnsignedByte] = 1, _obj$3);
+var _obj$4;
+var BYTES_TYPE_MAP = (_obj$4 = {}, _obj$4[exports.BufferDataType.Float] = 4, _obj$4[exports.BufferDataType.Int] = 4, _obj$4[exports.BufferDataType.UnsignedInt] = 4, _obj$4[exports.BufferDataType.Short] = 2, _obj$4[exports.BufferDataType.UnsignedShort] = 2, _obj$4[exports.BufferDataType.Byte] = 1, _obj$4[exports.BufferDataType.UnsignedByte] = 1, _obj$4);
 function generateEmptyTypedArray(type) {
     return createTypedArray(type, 0);
 }
@@ -22355,7 +22408,7 @@ var Renderer = /*#__PURE__*/ function() {
         }
     };
     _proto.setViewport = function setViewport(x, y, width, height) {
-        this.engine.viewport(x, y, width, height);
+        this.engine.setViewport(x, y, width, height);
     };
     _proto.clear = function clear(action) {
         this.engine.clear(action);
@@ -22418,7 +22471,40 @@ var Renderer = /*#__PURE__*/ function() {
     };
     _proto.drawGeometry = function drawGeometry(geometry, matrix, material, subMeshIndex) {
         if (subMeshIndex === void 0) subMeshIndex = 0;
-        this.engine.drawGeometry(geometry, matrix, material, subMeshIndex);
+        if (!geometry || !material) {
+            return;
+        }
+        material.initialize();
+        geometry.initialize();
+        geometry.flush();
+        material.setMatrix("effects_ObjectToWorld", matrix);
+        try {
+            material.use(this, this.renderingData.currentFrame.globalUniforms);
+        } catch (e) {
+            console.error(e);
+            this.engine.renderErrors.add(e);
+            return;
+        }
+        var indexBuffer = geometry.getIndexBuffer();
+        var offset = geometry.getDrawStart();
+        var count = geometry.getDrawCount();
+        var subMeshes = geometry.subMeshes;
+        if (subMeshes.length > 0) {
+            var subMesh = subMeshes[subMeshIndex];
+            offset = subMesh.offset;
+            var _subMesh_indexCount;
+            count = indexBuffer ? (_subMesh_indexCount = subMesh.indexCount) != null ? _subMesh_indexCount : 0 : subMesh.vertexCount;
+        }
+        if (count <= 0) {
+            return;
+        }
+        geometry.bind(material.shaderVariant);
+        var instanceCount = geometry.instanceCount || undefined;
+        if (indexBuffer) {
+            this.engine.drawElementsType(geometry.mode, offset, count, instanceCount);
+        } else {
+            this.engine.drawArraysType(geometry.mode, offset, count, instanceCount);
+        }
     };
     _proto.getTemporaryRT = function getTemporaryRT(name, width, height, depthBuffer, filter, format) {
         return this.engine.renderTargetPool.get(name, width, height, depthBuffer, filter, format);
@@ -22686,11 +22772,7 @@ var CanvasPool = /*#__PURE__*/ function() {
 var canvasPool = new CanvasPool();
 
 /**
- * 字形纹理超采样倍数。canvas 按 `fontSize * FONT_SCALE` 渲染，纹理像素也是 scale 倍，
- * 但 quad 仍按 1x 逻辑尺寸绘制 — 双线性 downsample 后比原 1x 渲染清晰得多
- */ var FONT_SCALE = 2;
-/**
- * 单张字符 atlas 的边长(像素,scale 后的实际像素,非逻辑尺寸)。
+ * 单张字符 atlas 的逻辑边长。实际 canvas 像素尺寸会乘以渲染 resolution。
  * 512×512 在 24px 字号下约可容纳 250+ 字形,常见 demo 文本足够
  */ var ATLAS_SIZE = 512;
 /**
@@ -22712,7 +22794,7 @@ var canvasPool = new CanvasPool();
  * canvas 内容变更后需要 `uploadIfDirty` 重新上传到纹理 — 由调用方在使用纹理前主动触发，
  * 避免每加一字都 upload 一次造成的 GL 开销
  */ var GlyphAtlas = /*#__PURE__*/ function() {
-    function GlyphAtlas(engine, scaledFontString, /** baseline 距 cell 顶距离（像素，scale 后，仅 ascent 部分，不含 padding） */ ascentPx, /** baseline 距 cell 底距离（像素，scale 后，仅 descent 部分） */ descentPx, fontStyle) {
+    function GlyphAtlas(engine, scaledFontString, /** baseline 距 cell 顶距离（像素，scale 后，仅 ascent 部分，不含 padding） */ ascentPx, /** baseline 距 cell 底距离（像素，scale 后，仅 descent 部分） */ descentPx, fontStyle, resolution) {
         this.engine = engine;
         this.scaledFontString = scaledFontString;
         this.glyphs = new Map();
@@ -22720,9 +22802,10 @@ var canvasPool = new CanvasPool();
         this.currentY = 0;
         this.full = false;
         this.dirty = true;
+        this.resolution = resolution;
         this.canvas = document.createElement("canvas");
-        this.canvas.width = ATLAS_SIZE;
-        this.canvas.height = ATLAS_SIZE;
+        this.canvas.width = Math.ceil(ATLAS_SIZE * resolution);
+        this.canvas.height = Math.ceil(ATLAS_SIZE * resolution);
         var ctx = this.canvas.getContext("2d", {
             willReadFrequently: false
         });
@@ -22733,14 +22816,14 @@ var canvasPool = new CanvasPool();
         ctx.font = scaledFontString;
         ctx.textBaseline = "alphabetic";
         ctx.fillStyle = "#ffffff";
-        this.paddingPx = GLYPH_PADDING * FONT_SCALE;
+        this.paddingPx = GLYPH_PADDING * resolution;
         this.italicScale = fontStyle === "italic" ? 2 : 1;
         // ascent/descent 由探针 '|ÉqÅM' 测得 actualBoundingBox（重音字已抬高 ink 顶），
         // 两者内部保持浮点，仅 cell 高做一次外层 ceil — 与 padding 共同保证 cell 内不裁切
         var fontHeightPx = ascentPx + descentPx;
         this.baselinePx = this.paddingPx + ascentPx;
         this.cellHPx = Math.ceil(fontHeightPx + this.paddingPx * 2);
-        this.lineHeight = this.cellHPx / FONT_SCALE;
+        this.lineHeight = this.cellHPx / resolution;
         this.texture = Texture.create(engine, {
             sourceType: exports.TextureSourceType.image,
             image: this.canvas,
@@ -22749,7 +22832,8 @@ var canvasPool = new CanvasPool();
             magFilter: glContext.LINEAR,
             minFilter: glContext.LINEAR,
             wrapS: glContext.CLAMP_TO_EDGE,
-            wrapT: glContext.CLAMP_TO_EDGE
+            wrapT: glContext.CLAMP_TO_EDGE,
+            premultiplyAlpha: true
         });
         this.texture.initialize();
     }
@@ -22767,19 +22851,19 @@ var canvasPool = new CanvasPool();
         var ctx = this.ctx;
         // 每次重设字体，防御外部潜在污染（虽然 ctx 私有）
         ctx.font = this.scaledFontString;
-        // measureText 用的是 scaledFontString，advance 已经是 scale 后的像素，不能再乘 FONT_SCALE
+        // measureText 用的是 scaledFontString，advance 已经是 resolution 后的像素
         var advancePx = ctx.measureText(char).width;
         // italic 放大 cell 宽防斜体越界；ceil 对齐像素网格避免相邻字采样重叠
         var widthPx = Math.max(1, Math.ceil(advancePx * this.italicScale));
         var paddedWidthPx = widthPx + this.paddingPx * 2;
         var cellH = this.cellHPx;
         // 行尾换行
-        if (this.currentX + paddedWidthPx > ATLAS_SIZE) {
+        if (this.currentX + paddedWidthPx > this.canvas.width) {
             this.currentX = 0;
             this.currentY += cellH;
         }
         // atlas 满，后续不再尝试
-        if (this.currentY + cellH > ATLAS_SIZE) {
+        if (this.currentY + cellH > this.canvas.height) {
             this.full = true;
             console.warn('GlyphAtlas full, dropping char "' + char + '"');
             return null;
@@ -22795,8 +22879,8 @@ var canvasPool = new CanvasPool();
             py: py,
             pw: paddedWidthPx,
             ph: cellH,
-            advance: advancePx / FONT_SCALE,
-            paddingLeft: this.paddingPx / FONT_SCALE
+            advance: advancePx / this.resolution,
+            paddingLeft: this.paddingPx / this.resolution
         };
         this.glyphs.set(char, info);
         return info;
@@ -22815,7 +22899,8 @@ var canvasPool = new CanvasPool();
             magFilter: glContext.LINEAR,
             minFilter: glContext.LINEAR,
             wrapS: glContext.CLAMP_TO_EDGE,
-            wrapT: glContext.CLAMP_TO_EDGE
+            wrapT: glContext.CLAMP_TO_EDGE,
+            premultiplyAlpha: true
         });
         this.dirty = false;
     };
@@ -22838,26 +22923,33 @@ var canvasPool = new CanvasPool();
     function TextCache(engine) {
         this.engine = engine;
         this.atlases = new Map();
+        this.resolution = engine.pixelRatio;
     }
     var _proto = TextCache.prototype;
     /**
    * 取(必要时新建)对应字体的字符 atlas
    */ _proto.getAtlas = function getAtlas(fontSize, fontFamily, fontWeight, fontStyle) {
-        var fontKey = fontStyle + "|" + fontWeight + "|" + fontSize + "|" + fontFamily;
+        // Pixi CanvasText 默认跟随 renderer.resolution；这里对应 Engine.pixelRatio。
+        var resolution = this.engine.pixelRatio;
+        if (resolution !== this.resolution) {
+            this.clear();
+            this.resolution = resolution;
+        }
+        var fontKey = fontStyle + "|" + fontWeight + "|" + fontSize + "|" + fontFamily + "|" + resolution;
         var cached = this.atlases.get(fontKey);
         if (cached) {
             return cached;
         }
-        var scaledFontString = fontStyle + " " + fontWeight + " " + fontSize * FONT_SCALE + "px " + fontFamily;
+        var scaledFontString = fontStyle + " " + fontWeight + " " + fontSize * resolution + "px " + fontFamily;
         // 探一次得到字体级 ascent/descent（整张 atlas 共享 cell 高与 baseline，各字对齐）。
-        // 直接在 scaledFontString 下测，得到的就是 scale 后像素，无需再乘 FONT_SCALE。
+        // 直接在 scaledFontString 下测，得到的就是 resolution 后像素。
         // 探针用 '|ÉqÅ' + 'M'：带重音符的 ÉÅ 把 ink 顶推到接近字体真实 ascent，
         // 单字 'M' 只有 cap height(~0.7em) 太矮，CJK / 带重音字顶部会越过 cell 上界被裁。
         // 取 actualBoundingBoxAscent/Descent 度量 ink 边界，跨平台语义稳定
         var probeCanvasAndContext = canvasPool.getCanvasAndContext(1, 1);
         var probeCtx = probeCanvasAndContext.context;
-        var ascentPx = fontSize * 0.8 * FONT_SCALE;
-        var descentPx = fontSize * 0.2 * FONT_SCALE;
+        var ascentPx = fontSize * 0.8 * resolution;
+        var descentPx = fontSize * 0.2 * resolution;
         try {
             probeCtx.font = scaledFontString;
             var m = probeCtx.measureText(METRICS_STRING + BASELINE_SYMBOL);
@@ -22866,7 +22958,7 @@ var canvasPool = new CanvasPool();
         } finally{
             canvasPool.releaseCanvasAndContext(probeCanvasAndContext);
         }
-        var atlas = new GlyphAtlas(this.engine, scaledFontString, ascentPx, descentPx, fontStyle);
+        var atlas = new GlyphAtlas(this.engine, scaledFontString, ascentPx, descentPx, fontStyle, resolution);
         this.atlases.set(fontKey, atlas);
         return atlas;
     };
@@ -22883,6 +22975,9 @@ var canvasPool = new CanvasPool();
     /**
    * 清空所有 atlas 并 dispose 对应纹理。Engine dispose 时调用
    */ _proto.dispose = function dispose() {
+        this.clear();
+    };
+    _proto.clear = function clear() {
         for(var _iterator = _create_for_of_iterator_helper_loose(this.atlases.values()), _step; !(_step = _iterator()).done;){
             var atlas = _step.value;
             atlas.dispose();
@@ -23005,6 +23100,17 @@ var Graphics = /*#__PURE__*/ function() {
         this.texturedMaterial.depthTest = false;
         this.texturedMaterial.depthMask = false;
         this.texturedMaterial.blending = true;
+        // 文本 atlas 按 Pixi 的方式在上传时预乘 alpha，因此采样后只需应用顶点色和顶点 alpha。
+        // 单独使用 material，避免改变 drawTexture 对普通非预乘纹理的处理。
+        this.textMaterial = Material.create(this.engine, {
+            shader: {
+                vertex: "precision highp float;\n        attribute vec2 aPos;\n        attribute vec4 aColor;\n        attribute vec2 aUV;\n        varying vec4 vColor;\n        varying vec2 vUV;\n\n        uniform mat4 effects_MatrixVP;\n        void main() {\n          vColor = aColor;\n          vUV = aUV;\n          gl_Position = effects_MatrixVP * vec4(aPos, 0.0, 1.0);\n        }",
+                fragment: "precision highp float;\n        varying vec4 vColor;\n        varying vec2 vUV;\n        uniform sampler2D uMainTexture;\n        void main() {\n          float alpha = texture2D(uMainTexture, vUV).a * vColor.a;\n          gl_FragColor = vec4(vColor.rgb * alpha, alpha);\n        }"
+            }
+        });
+        this.textMaterial.depthTest = false;
+        this.textMaterial.depthMask = false;
+        this.textMaterial.blending = true;
         this.textCache = new TextCache(engine);
     }
     var _proto = Graphics.prototype;
@@ -23019,13 +23125,14 @@ var Graphics = /*#__PURE__*/ function() {
         this.currentTransform = Matrix3.fromIdentity();
         this.currentBatchType = "colored";
         this.currentBatchTexture = null;
-        // 创建从屏幕坐标到 NDC 的投影矩阵，屏幕坐标: (0, 0) 在左下角，(width, height) 在右上角
+        // 创建从屏幕坐标到 NDC 的投影矩阵，屏幕坐标：(0, 0) 在左上角，(width, height) 在右下角，+Y 向下。
         var _this_engine_canvas_getBoundingClientRect = this.engine.canvas.getBoundingClientRect(), width = _this_engine_canvas_getBoundingClientRect.width, height = _this_engine_canvas_getBoundingClientRect.height;
         // 正交投影矩阵：将屏幕坐标 [0, width] x [0, height] 映射到 NDC [-1, 1] x [-1, 1]
-        var projectionMatrix = new Matrix4(2 / width, 0, 0, 0, 0, 2 / height, 0, 0, 0, 0, -1, 0, -1, -1, 0, 1 // 第四列
+        var projectionMatrix = new Matrix4(2 / width, 0, 0, 0, 0, -2 / height, 0, 0, 0, 0, -1, 0, -1, 1, 0, 1 // 第四列
         );
         this.coloredMaterial.setMatrix("effects_MatrixVP", projectionMatrix);
         this.texturedMaterial.setMatrix("effects_MatrixVP", projectionMatrix);
+        this.textMaterial.setMatrix("effects_MatrixVP", projectionMatrix);
     };
     /**
    * 将当前变换压入栈，并设置新的变换
@@ -23053,7 +23160,7 @@ var Graphics = /*#__PURE__*/ function() {
    * 切换到指定批次类型/纹理。若与当前批次不一致，先 flush 已累积顶点
    */ _proto.ensureBatch = function ensureBatch(type, texture) {
         if (texture === void 0) texture = null;
-        var sameBatch = this.currentBatchType === type && (type !== "textured" || this.currentBatchTexture === texture);
+        var sameBatch = this.currentBatchType === type && (type === "colored" || this.currentBatchTexture === texture);
         if (!sameBatch && this.currentVertexCount > 0) {
             this.flushBatch();
         }
@@ -23079,8 +23186,8 @@ var Graphics = /*#__PURE__*/ function() {
         this.geometry.setIndexData(indicesArray);
         this.geometry.setDrawCount(this.currentIndexCount);
         var material;
-        if (this.currentBatchType === "textured") {
-            material = this.texturedMaterial;
+        if (this.currentBatchType === "textured" || this.currentBatchType === "text") {
+            material = this.currentBatchType === "text" ? this.textMaterial : this.texturedMaterial;
             var _this_currentBatchTexture;
             var tex = (_this_currentBatchTexture = this.currentBatchTexture) != null ? _this_currentBatchTexture : this.engine.whiteTexture;
             material.setTexture("uMainTexture", tex);
@@ -23186,8 +23293,8 @@ var Graphics = /*#__PURE__*/ function() {
     };
     /**
    * 绘制矩形边框
-   * @param x - 矩形左下角 X 坐标
-   * @param y - 矩形左下角 Y 坐标
+   * @param x - 矩形左上角 X 坐标
+   * @param y - 矩形左上角 Y 坐标
    * @param width - 矩形宽度
    * @param height - 矩形高度
    * @param color - 边框颜色，默认白色，范围 0-1
@@ -23230,8 +23337,8 @@ var Graphics = /*#__PURE__*/ function() {
     };
     /**
    * 绘制填充矩形
-   * @param x - 矩形左下角 X 坐标
-   * @param y - 矩形左下角 Y 坐标
+   * @param x - 矩形左上角 X 坐标
+   * @param y - 矩形左上角 Y 坐标
    * @param width - 矩形宽度
    * @param height - 矩形高度
    * @param color - 填充颜色，默认白色，范围 0-1
@@ -23257,9 +23364,9 @@ var Graphics = /*#__PURE__*/ function() {
         this.buildShape(this.circleShape, color);
     };
     /**
-   * 绘制纹理矩形（本地坐标，Y 向上，(x, y) 为左下角）
-   * @param x - 矩形左下角 X 坐标
-   * @param y - 矩形左下角 Y 坐标
+   * 绘制纹理矩形（本地坐标，Y 向下，(x, y) 为左上角）
+   * @param x - 矩形左上角 X 坐标
+   * @param y - 矩形左上角 Y 坐标
    * @param width - 矩形宽度
    * @param height - 矩形高度
    * @param texture - 要采样的纹理。同纹理连续绘制会合批，纹理切换会自动 flush 当前批次
@@ -23272,14 +23379,14 @@ var Graphics = /*#__PURE__*/ function() {
         this.pushQuad(x, y, width, height, color, region);
     };
     /**
-   * 绘制文本（本地坐标，Y 向上，(x, y) 为文本左下角）。
+   * 绘制文本（本地坐标，Y 向下，(x, y) 为文本 cell 左上角）。
    *
    * 文本走字符级 bitmap atlas（同一字体下每个字只渲染一次，任意文本组合复用 atlas）;
    * `color` 作为乘色与白色字形 alpha 相乘，任意颜色都不会污染 atlas。
    *
    * 字体参数全部展开，避免调用方每帧创建临时 style 对象触发 GC
-   * @param x - 文本左下角 X 坐标（首字 ink 起始处，含 padding 的 quad 会向左延伸）
-   * @param y - 文本左下角 Y 坐标（cell 底，含底部 padding；字形 ink 在其上方 padding+ascent 处）
+   * @param x - 文本左上角 X 坐标（首字 ink 起始处，含 padding 的 quad 会向左延伸）
+   * @param y - 文本 cell 顶部 Y 坐标
    * @param text - 要绘制的文本内容，空串直接 return
    * @param fontSize - 字号（逻辑像素）
    * @param color - 乘色，默认白色，范围 0-1
@@ -23295,7 +23402,7 @@ var Graphics = /*#__PURE__*/ function() {
             return;
         }
         var atlas = this.textCache.getAtlas(fontSize, fontFamily, fontWeight, fontStyle);
-        this.ensureBatch("textured", atlas.texture);
+        this.ensureBatch("text", atlas.texture);
         var lineHeight = atlas.lineHeight;
         var cursorX = x;
         // ensureChar 可能往 atlas canvas 写新字并打 dirty 标；实际 upload 推迟到
@@ -23306,13 +23413,15 @@ var Graphics = /*#__PURE__*/ function() {
                 continue;
             }
             // atlas 像素坐标 → UV（纹理 flipY 后，canvas 顶 → v=1，canvas 底 → v=0）
-            var u0 = info.px / ATLAS_SIZE;
-            var u1 = (info.px + info.pw) / ATLAS_SIZE;
-            var v0 = 1 - (info.py + info.ph) / ATLAS_SIZE;
-            var v1 = 1 - info.py / ATLAS_SIZE;
+            var atlasWidth = atlas.canvas.width;
+            var atlasHeight = atlas.canvas.height;
+            var u0 = info.px / atlasWidth;
+            var u1 = (info.px + info.pw) / atlasWidth;
+            var v0 = 1 - (info.py + info.ph) / atlasHeight;
+            var v1 = 1 - info.py / atlasHeight;
             // quad 宽与采样区都含四周 padding（cell 留白透明）；但光标只按 advance 前进，
             // quad 起点左偏 paddingLeft 使字形 ink 落在 cursorX — padding 区重叠无妨
-            this.pushQuad(cursorX - info.paddingLeft, y, info.pw / FONT_SCALE, lineHeight, color, {
+            this.pushQuad(cursorX - info.paddingLeft, y, info.pw / atlas.resolution, lineHeight, color, {
                 u0: u0,
                 v0: v0,
                 u1: u1,
@@ -23325,6 +23434,7 @@ var Graphics = /*#__PURE__*/ function() {
         this.geometry.dispose();
         this.coloredMaterial.dispose();
         this.texturedMaterial.dispose();
+        this.textMaterial.dispose();
         this.textCache.dispose();
     };
     _proto.buildShape = function buildShape(shape, color) {
@@ -23391,7 +23501,7 @@ var Graphics = /*#__PURE__*/ function() {
    * 在像素级亚像素精度下会暴露 1-2 像素缝隙，叠层时底层颜色透出形成可见的对角痕迹
    */ _proto.pushQuad = function pushQuad(x, y, width, height, color, region) {
         var vertexOffset = this.vertices.length / 2;
-        // 4 顶点（本地坐标，左下/右下/左上/右上），应用当前变换写入 vertices
+        // 4 顶点（本地坐标，左上/右上/左下/右下），应用当前变换写入 vertices
         var corners = [
             [
                 x,
@@ -23417,19 +23527,19 @@ var Graphics = /*#__PURE__*/ function() {
         var cornerUVs = [
             [
                 u0,
-                v0
+                v1
             ],
             [
                 u1,
-                v0
+                v1
             ],
             [
                 u0,
-                v1
+                v0
             ],
             [
                 u1,
-                v1
+                v0
             ]
         ];
         for(var i = 0; i < 4; i++){
@@ -24395,433 +24505,365 @@ exports.FrameComponent = __decorate([
 // 第四列 (位移) 乘 1，无需修改
 }
 
-/**
- * 画布层组件
- *
- * 作为一组顶层 CanvasItem 的容器：本层内所有 parent 为 null 的 CanvasItem 都登记在 canvasItems 中。
- * 嵌套关系下的子 CanvasItem 通过其父 CanvasItem 的 children 数组管理，由父节点在 draw 时递归绘制。
- */ var CanvasLayer = /*#__PURE__*/ function(Component) {
-    _inherits(CanvasLayer, Component);
-    function CanvasLayer() {
-        var _this;
-        _this = Component.apply(this, arguments) || this;
-        /**
-   * 当前层中的顶层 CanvasItem 列表(按注册顺序)。
-   * 仅包含 parent 为 null 的 CanvasItem;嵌套的子 CanvasItem 不会出现在此列表
-   */ _this.canvasItems = [];
-        /**
-   * 绘制层级，数值越小越先绘制
-   */ _this.layer = 0;
-        return _this;
-    }
-    var _proto = CanvasLayer.prototype;
-    /**
-   * 注册一个顶层 CanvasItem 到当前层
-   * @internal
-   */ _proto.addCanvasItem = function addCanvasItem(canvasItem) {
-        if (this.canvasItems.includes(canvasItem)) {
-            return;
-        }
-        this.canvasItems.push(canvasItem);
-    };
-    /**
-   * 从当前层注销一个顶层 CanvasItem
-   * @internal
-   */ _proto.removeCanvasItem = function removeCanvasItem(canvasItem) {
-        removeItem(this.canvasItems, canvasItem);
-    };
-    _proto.onEnable = function onEnable() {
-        var _this_item_composition;
-        var canvasLayers = (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.canvasLayers;
-        if (canvasLayers && !canvasLayers.includes(this)) {
-            canvasLayers.push(this);
-        }
-    };
-    _proto.onDisable = function onDisable() {
-        this.removeFromComposition();
-        this.refreshCanvasItemsLayer();
+function _assert_this_initialized(self) {
+    if (self === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    return self;
+}
+
+exports.MouseFilter = void 0;
+(function(MouseFilter) {
+    MouseFilter[MouseFilter["Stop"] = 0] = "Stop";
+    MouseFilter[MouseFilter["Pass"] = 1] = "Pass";
+    MouseFilter[MouseFilter["Ignore"] = 2] = "Ignore";
+})(exports.MouseFilter || (exports.MouseFilter = {}));
+exports.MouseBehaviorRecursive = void 0;
+(function(MouseBehaviorRecursive) {
+    MouseBehaviorRecursive[MouseBehaviorRecursive["Inherited"] = 0] = "Inherited";
+    MouseBehaviorRecursive[MouseBehaviorRecursive["Disabled"] = 1] = "Disabled";
+    MouseBehaviorRecursive[MouseBehaviorRecursive["Enabled"] = 2] = "Enabled";
+})(exports.MouseBehaviorRecursive || (exports.MouseBehaviorRecursive = {}));
+exports.MouseButton = void 0;
+(function(MouseButton) {
+    MouseButton[MouseButton["None"] = 0] = "None";
+    MouseButton[MouseButton["Left"] = 1] = "Left";
+    MouseButton[MouseButton["Right"] = 2] = "Right";
+    MouseButton[MouseButton["Middle"] = 3] = "Middle";
+    MouseButton[MouseButton["WheelUp"] = 4] = "WheelUp";
+    MouseButton[MouseButton["WheelDown"] = 5] = "WheelDown";
+    MouseButton[MouseButton["WheelLeft"] = 6] = "WheelLeft";
+    MouseButton[MouseButton["WheelRight"] = 7] = "WheelRight";
+    MouseButton[MouseButton["Xbutton1"] = 8] = "Xbutton1";
+    MouseButton[MouseButton["Xbutton2"] = 9] = "Xbutton2";
+})(exports.MouseButton || (exports.MouseButton = {}));
+exports.MouseButtonMask = void 0;
+(function(MouseButtonMask) {
+    MouseButtonMask[MouseButtonMask["None"] = 0] = "None";
+    MouseButtonMask[MouseButtonMask["Left"] = 1] = "Left";
+    MouseButtonMask[MouseButtonMask["Right"] = 2] = "Right";
+    MouseButtonMask[MouseButtonMask["Middle"] = 4] = "Middle";
+    MouseButtonMask[MouseButtonMask["Xbutton1"] = 128] = "Xbutton1";
+    MouseButtonMask[MouseButtonMask["Xbutton2"] = 256] = "Xbutton2";
+})(exports.MouseButtonMask || (exports.MouseButtonMask = {}));
+exports.FocusMode = void 0;
+(function(FocusMode) {
+    FocusMode[FocusMode["None"] = 0] = "None";
+    FocusMode[FocusMode["Click"] = 1] = "Click";
+    FocusMode[FocusMode["All"] = 2] = "All";
+    FocusMode[FocusMode["Accessibility"] = 3] = "Accessibility";
+})(exports.FocusMode || (exports.FocusMode = {}));
+exports.FocusBehaviorRecursive = void 0;
+(function(FocusBehaviorRecursive) {
+    FocusBehaviorRecursive[FocusBehaviorRecursive["Inherited"] = 0] = "Inherited";
+    FocusBehaviorRecursive[FocusBehaviorRecursive["Disabled"] = 1] = "Disabled";
+    FocusBehaviorRecursive[FocusBehaviorRecursive["Enabled"] = 2] = "Enabled";
+})(exports.FocusBehaviorRecursive || (exports.FocusBehaviorRecursive = {}));
+exports.KeyLocation = void 0;
+(function(KeyLocation) {
+    KeyLocation[KeyLocation["Unspecified"] = 0] = "Unspecified";
+    KeyLocation[KeyLocation["Left"] = 1] = "Left";
+    KeyLocation[KeyLocation["Right"] = 2] = "Right";
+})(exports.KeyLocation || (exports.KeyLocation = {}));
+exports.CursorShape = void 0;
+(function(CursorShape) {
+    CursorShape[CursorShape["Arrow"] = 0] = "Arrow";
+    CursorShape[CursorShape["Ibeam"] = 1] = "Ibeam";
+    CursorShape[CursorShape["PointingHand"] = 2] = "PointingHand";
+    CursorShape[CursorShape["Cross"] = 3] = "Cross";
+    CursorShape[CursorShape["Wait"] = 4] = "Wait";
+    CursorShape[CursorShape["Busy"] = 5] = "Busy";
+    CursorShape[CursorShape["Drag"] = 6] = "Drag";
+    CursorShape[CursorShape["CanDrop"] = 7] = "CanDrop";
+    CursorShape[CursorShape["Forbidden"] = 8] = "Forbidden";
+    CursorShape[CursorShape["Vsize"] = 9] = "Vsize";
+    CursorShape[CursorShape["Hsize"] = 10] = "Hsize";
+    CursorShape[CursorShape["Bdiagsize"] = 11] = "Bdiagsize";
+    CursorShape[CursorShape["Fdiagsize"] = 12] = "Fdiagsize";
+    CursorShape[CursorShape["Move"] = 13] = "Move";
+    CursorShape[CursorShape["Vsplit"] = 14] = "Vsplit";
+    CursorShape[CursorShape["Hsplit"] = 15] = "Hsplit";
+    CursorShape[CursorShape["Help"] = 16] = "Help";
+})(exports.CursorShape || (exports.CursorShape = {}));
+
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
     };
-    _proto.removeFromComposition = function removeFromComposition() {
-        var _this_item_composition;
-        var canvasLayers = (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.canvasLayers;
-        if (canvasLayers) {
-            removeItem(canvasLayers, this);
+    return _get_prototype_of(o);
+}
+
+function _is_native_function(fn) {
+    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+}
+
+function _wrap_native_super(Class) {
+    var _cache = typeof Map === "function" ? new Map() : undefined;
+    _wrap_native_super = function _wrap_native_super(Class) {
+        if (Class === null || !_is_native_function(Class)) return Class;
+        if (typeof Class !== "function") throw new TypeError("Super expression must either be null or a function");
+        if (typeof _cache !== "undefined") {
+            if (_cache.has(Class)) return _cache.get(Class);
+            _cache.set(Class, Wrapper);
         }
-    };
-    _proto.refreshCanvasItemsLayer = function refreshCanvasItemsLayer() {
-        // CanvasLayer 失效时，让其下挂的 CanvasItem 重新查找归属层
-        // 拷贝一份避免迭代过程中数组被修改
-        var items = this.canvasItems.slice();
-        this.canvasItems.length = 0;
-        for(var _iterator = _create_for_of_iterator_helper_loose(items), _step; !(_step = _iterator()).done;){
-            var canvasItem = _step.value;
-            canvasItem.updateCanvasLayer();
+        function Wrapper() {
+            return _construct(Class, arguments, _get_prototype_of(this).constructor);
         }
-    };
-    /**
-   * 绘制当前层
-   *
-   * 遍历顶层 CanvasItem 进行绘制，由 CanvasItem.drawInternal 内部递归子节点。
-   * 整棵跳过看 `vfxItem.isActive`(item 级开关)；self 自身是否画由 drawInternal 内的 `component.enabled` 决定。
-   *
-   * 注：画布尺寸到 RectTransform.size 的同步目前未在此处处理(由 RectTransform 自身按需 resolve)；
-   * 后续若需要在每帧强制刷新顶层 size，可在此处补回写入与 sizeChanged 传播
-   *
-   * @internal
-   */ _proto.draw = function draw() {
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.canvasItems), _step; !(_step = _iterator()).done;){
-            var canvasItem = _step.value;
-            if (!canvasItem.item.isActive) {
-                continue;
+        Wrapper.prototype = Object.create(Class.prototype, {
+            constructor: {
+                value: Wrapper,
+                enumerable: false,
+                writable: true,
+                configurable: true
             }
-            canvasItem.drawInternal();
-        }
+        });
+        return _set_prototype_of(Wrapper, Class);
     };
-    return CanvasLayer;
-}(Component);
+    return _wrap_native_super(Class);
+}
 
-/**
- * 画布元素组件
- *
- * 进入场景树时沿父链向上查找最近的 CanvasLayer 祖先并注册自己；
- * 父级改变或自身销毁时,刷新 / 注销在所属 CanvasLayer 的登记。
- *
- * 注:拓扑(parent / children / 所属 layer)与 enabled/active 解耦 —
- * `component.enabled=false` 仅让自身 draw 被跳过,**不**改父子关系,也**不**从 layer 注销;
- * 整棵子树的隐藏由 `vfxItem.setActive(false)` 配合 drawInternal 中的 `isActive` 检查处理
- */ var CanvasItem = /*#__PURE__*/ function(Component) {
-    _inherits(CanvasItem, Component);
-    function CanvasItem() {
-        var _this;
-        _this = Component.apply(this, arguments) || this;
-        /**
-   * 父 CanvasItem
-   * 沿 VFXItem 父链向上查找到的最近的 CanvasItem(只看类型,不看 active/enabled — 拓扑跟激活状态解耦)。
-   * 若不存在 CanvasItem 祖先（即直属于 CanvasLayer 或处于游离状态），该值为 null。
-   */ _this.parent = null;
-        /**
-   * 子 CanvasItem 列表（按注册顺序）
-   * 由子节点在维护自身 parent 时反向写入，draw 时按数组顺序递归绘制
-   */ _this.children = [];
-        /**
-   * 当前所属的 CanvasLayer，未注册到任何 CanvasLayer 时为 null
-   */ _this.canvasLayerNode = null;
-        return _this;
+function transformPoint(transform, value) {
+    var elements = transform.elements;
+    return new Vector2(elements[0] * value.x + elements[3] * value.y + elements[6], elements[1] * value.x + elements[4] * value.y + elements[7]);
+}
+function transformVector(transform, value) {
+    var elements = transform.elements;
+    return new Vector2(elements[0] * value.x + elements[3] * value.y, elements[1] * value.x + elements[4] * value.y);
+}
+var InputEvent = /*#__PURE__*/ function() {
+    function InputEvent() {
+        this.device = 0;
+        this.pressed = false;
+        this.canceled = false;
+        this._accepted = false;
     }
-    var _proto = CanvasItem.prototype;
-    _proto.onEnable = function onEnable() {
-        // 首次接入 / 重新接入场景树时把自己挂上(若拓扑还没建立)。
-        // 注意 enable/disable 不再改变 CanvasItem 父子拓扑 — 拓扑由 VFXItem 父链(setParent / onParentChanged)维护,
-        // enable 在这里只是兜底首次入树
-        this.updateCanvasLayer();
-        this.updateParentItem();
+    var _proto = InputEvent.prototype;
+    _proto.accept = function accept() {
+        this._accepted = true;
     };
-    _proto.onDisable = function onDisable() {
-    // 组件禁用 = 仅 self.draw 跳过,不应改父子拓扑(否则 enable 回来位置就乱了)。
-    // 整棵子树的隐藏由 `vfxItem.setActive(false)` 配合 drawInternal 中的 `item.isActive` 检查处理
+    _proto.clearAccepted = function clearAccepted() {
+        this._accepted = false;
     };
-    _proto.onParentChanged = function onParentChanged() {
-        // VFXItem 的父级（或间接父级）发生变化时，CanvasLayer 与父 CanvasItem 都可能改变，需要联动刷新
-        this.updateCanvasLayer();
-        this.updateParentItem();
+    _proto.isAccepted = function isAccepted() {
+        return this._accepted;
     };
-    _proto.onDestroy = function onDestroy() {
-        this.removeFromParent();
-        this.removeFromCanvasLayer();
-        // 防止子 canvasItem updateParentItem 的时候继续找到当前已销毁的 canvasItem
-        this.enabled = false;
-        this.updateChildrenParentItems();
+    _proto.isPressed = function isPressed() {
+        return this.pressed && !this.canceled;
     };
-    /**
-   * 重新计算并更新当前 CanvasItem 应归属的 CanvasLayer
-   * 在父级变化、所在 CanvasLayer 失效等场景中调用
-   *
-   * 仅当自身是顶层 CanvasItem（parent 为 null）时才会登记到 CanvasLayer.canvasItems；
-   * 嵌套的子 CanvasItem 仅记录 canvasLayerNode 引用，不进入 layer 的顶层列表。
-   * @internal
-   */ _proto.updateCanvasLayer = function updateCanvasLayer() {
-        // 拓扑跟 enabled/active 解耦,只看 item 是否还在
-        if (!this.item) {
-            this.removeFromCanvasLayer();
-            return;
-        }
-        var newLayer = this.getCanvasLayerNode();
-        if (newLayer === this.canvasLayerNode) {
-            return;
-        }
-        // 仅当自身是顶层 CanvasItem 时，才需要在 layer 的 canvasItems 中迁移
-        if (this.parent === null && this.canvasLayerNode) {
-            this.canvasLayerNode.removeCanvasItem(this);
-        }
-        this.canvasLayerNode = newLayer;
-        if (this.parent === null && newLayer) {
-            newLayer.addCanvasItem(this);
-        }
+    _proto.isReleased = function isReleased() {
+        return !this.pressed && !this.canceled;
     };
-    /**
-   * 重新计算并更新当前 CanvasItem 的父 CanvasItem
-   * 在 VFXItem 父级变化、自身启用/禁用、父 CanvasItem 失效等场景中调用
-   *
-   * parent 的变化会同步影响在 CanvasLayer.canvasItems 中的归属：
-   *   - 由有 parent 变成无 parent 且仍归属某 layer：加入 layer.canvasItems
-   *   - 由无 parent 变成有 parent：从 layer.canvasItems 中移除
-   * @internal
-   */ _proto.updateParentItem = function updateParentItem() {
-        // 拓扑跟 enabled/active 解耦,只看 item 是否还在
-        if (!this.item) {
-            this.removeFromParent();
-            return;
-        }
-        var newParent = this.getParentItem();
-        if (newParent === this.parent) {
-            return;
-        }
-        var wasTopLevel = this.parent === null;
-        this.removeFromParent();
-        if (newParent) {
-            this.parent = newParent;
-            newParent.children.push(this);
-            // 由顶层变成嵌套：从 layer 的顶层列表中移除
-            if (wasTopLevel && this.canvasLayerNode) {
-                this.canvasLayerNode.removeCanvasItem(this);
-            }
-        } else if (!wasTopLevel && this.canvasLayerNode) {
-            // 由嵌套变成顶层：加入 layer 的顶层列表
-            this.canvasLayerNode.addCanvasItem(this);
-        }
-    };
-    /**
-   * 绘制函数
-   * 子类重写此方法以输出实际的绘制内容；调用时 graphics 的变换栈顶已经累积了从根到当前节点的所有父变换，
-   * 子类直接使用 this.drawXxx / this.fillXxx 系列封装方法绘制即可，绘制坐标视为本地坐标。
-   */ _proto.draw = function draw() {
-    // OVERRIDE
-    };
-    /**
-   * 绘制单条线段
-   * @param x1 - 起点 x
-   * @param y1 - 起点 y
-   * @param x2 - 终点 x
-   * @param y2 - 终点 y
-   * @param color - 线条颜色
-   * @param thickness - 线宽
-   */ _proto.drawLine = function drawLine(x1, y1, x2, y2, color, thickness) {
-        this.engine.graphics.drawLine(x1, y1, x2, y2, color, thickness);
-    };
-    /**
-   * 按顺序连接所有点绘制折线（首尾相同则视为闭合）
-   * @param points - 点数组，格式 [x1,y1,x2,y2,...]
-   * @param color - 线条颜色
-   * @param thickness - 线宽
-   */ _proto.drawPolyline = function drawPolyline(points, color, thickness) {
-        this.engine.graphics.drawLines(points, color, thickness);
-    };
-    /**
-   * 绘制三次贝塞尔曲线
-   */ _proto.drawBezier = function drawBezier(x1, y1, x2, y2, x3, y3, x4, y4, color, thickness) {
-        this.engine.graphics.drawBezier(x1, y1, x2, y2, x3, y3, x4, y4, color, thickness);
-    };
-    /**
-   * 绘制三角形边框
-   */ _proto.drawTriangle = function drawTriangle(x1, y1, x2, y2, x3, y3, color, thickness) {
-        this.engine.graphics.drawTriangle(x1, y1, x2, y2, x3, y3, color, thickness);
-    };
-    /**
-   * 绘制矩形边框
-   * @param x - 矩形左下角 x 坐标
-   * @param y - 矩形左下角 y 坐标
-   */ _proto.drawRect = function drawRect(x, y, width, height, color, thickness) {
-        this.engine.graphics.drawRectangle(x, y, width, height, color, thickness);
-    };
-    /**
-   * 绘制圆形边框
-   */ _proto.drawCircle = function drawCircle(cx, cy, radius, color, thickness) {
-        this.engine.graphics.drawCircle(cx, cy, radius, color, thickness);
-    };
-    /**
-   * 绘制填充三角形
-   */ _proto.fillTriangle = function fillTriangle(x1, y1, x2, y2, x3, y3, color) {
-        this.engine.graphics.fillTriangle(x1, y1, x2, y2, x3, y3, color);
-    };
-    /**
-   * 绘制填充矩形
-   * @param x - 矩形左下角 x 坐标
-   * @param y - 矩形左下角 y 坐标
-   */ _proto.fillRect = function fillRect(x, y, width, height, color) {
-        this.engine.graphics.fillRectangle(x, y, width, height, color);
-    };
-    /**
-   * 绘制填充圆形
-   */ _proto.fillCircle = function fillCircle(cx, cy, radius, color) {
-        this.engine.graphics.fillCircle(cx, cy, radius, color);
-    };
-    /**
-   * 绘制纹理矩形(本地坐标,Y 向上,(x, y) 为左下角)
-   * @param region - 纹理 UV 子矩形,默认全图。Y 向上,(u0, v0) 为左下角 UV
-   * @param color - 乘色,默认白色
-   */ _proto.drawTexture = function drawTexture(x, y, width, height, texture, region, color) {
-        this.engine.graphics.drawTexture(x, y, width, height, texture, region, color);
-    };
-    /**
-   * 绘制文本(本地坐标,Y 向上,(x, y) 为文本左下角)。
-   *
-   * 同一段文本不同颜色不会重复 upload — 颜色由 `color` 参数透传作为乘色,纹理只缓存白色字形。
-   * 字体参数全部展开,避免调用方每帧创建临时 style 对象触发 GC
-   */ _proto.drawText = function drawText(x, y, text, fontSize, color, fontFamily, fontWeight, fontStyle) {
-        this.engine.graphics.drawText(x, y, text, fontSize, color, fontFamily, fontWeight, fontStyle);
-    };
-    /**
-   * 绘制自身并按 children 数组顺序递归绘制所有子 CanvasItem。
-   * @internal
-   */ _proto.drawInternal = function drawInternal() {
-        var graphics = this.engine.graphics;
-        var localMatrix2D = this.transform.getMatrix2D();
-        graphics.pushTransform(localMatrix2D);
-        // self 是否绘制只看 component.enabled — 其它都不影响。
-        // transform 始终被 push,children 始终被遍历,这样 component.enabled=false 时 self 隐藏
-        // 但 children 的位置不受影响
-        if (this.enabled) {
-            this.draw();
-        }
-        // 子是否参与绘制看 VFXItem.isActive(整棵跳过的语义)。
-        // 子自身的 component.enabled 在它自己的 drawInternal 里再判断
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
-            var child = _step.value;
-            if (!child.item.isActive) {
-                continue;
-            }
-            child.drawInternal();
-        }
-        graphics.popTransform();
-    };
-    /**
-   * 从当前所属的 CanvasLayer 注销自身（如果有）
-   * 仅当自身是顶层 CanvasItem 时，才会触发 layer 顶层列表的移除
-   */ _proto.removeFromCanvasLayer = function removeFromCanvasLayer() {
-        if (!this.canvasLayerNode) {
-            return;
-        }
-        if (this.parent === null) {
-            this.canvasLayerNode.removeCanvasItem(this);
-        }
-        this.canvasLayerNode = null;
-    };
-    /**
-   * 从当前父 CanvasItem 的 children 中移除自身（如果有）
-   */ _proto.removeFromParent = function removeFromParent() {
-        if (!this.parent) {
-            return;
-        }
-        removeItem(this.parent.children, this);
-        this.parent = null;
+    _proto.isCanceled = function isCanceled() {
+        return this.canceled;
     };
-    /**
-   * 更新所有子 CanvasItem 的层级归属。
-   * 自身失效时调用，子节点会跳过自己向上找到新的父 CanvasItem（可能为 null）。
-   */ _proto.updateChildrenParentItems = function updateChildrenParentItems() {
-        if (this.children.length === 0) {
-            return;
-        }
-        // 拷贝避免迭代过程中数组被 removeFromParent 修改
-        var snapshot = this.children.slice();
-        for(var _iterator = _create_for_of_iterator_helper_loose(snapshot), _step; !(_step = _iterator()).done;){
-            var child = _step.value;
-            child.updateParentItem();
-        }
+    _proto.isEcho = function isEcho() {
+        return false;
     };
-    /**
-   * 沿父链向上查找最近的 CanvasLayer 祖先
-   * 注意：自身所在 VFXItem 上的 CanvasLayer 也参与查找（同节点上可能并存 CanvasLayer 与 CanvasItem）
-   */ _proto.getCanvasLayerNode = function getCanvasLayerNode() {
-        var current = this.item;
-        while(current){
-            var layer = getCanvasLayerFromItem(current);
-            if (layer) {
-                return layer;
-            }
-            var _current_parent;
-            current = (_current_parent = current.parent) != null ? _current_parent : null;
-        }
-        return null;
+    _proto.xformedBy = function xformedBy(transform) {
+        return this;
     };
-    /**
-   * 沿 VFXItem 父链向上查找最近的 CanvasItem 祖先(不包含自身,只看类型不看 active/enabled)
-   */ _proto.getParentItem = function getParentItem() {
-        var _this_item;
-        var _this_item_parent;
-        var current = (_this_item_parent = (_this_item = this.item) == null ? void 0 : _this_item.parent) != null ? _this_item_parent : null;
-        while(current){
-            var canvasItem = getCanvasItemFromItem(current);
-            if (canvasItem) {
-                return canvasItem;
-            }
-            var _current_parent;
-            current = (_current_parent = current.parent) != null ? _current_parent : null;
-        }
-        return null;
+    return InputEvent;
+}();
+InputEvent.deviceIdEmulation = -1;
+InputEvent.deviceIdInternal = -2;
+InputEvent.deviceIdKeyboard = 16;
+InputEvent.deviceIdMouse = 32;
+var InputEventWithModifiers = /*#__PURE__*/ function(InputEvent) {
+    _inherits(InputEventWithModifiers, InputEvent);
+    function InputEventWithModifiers() {
+        var _this;
+        _this = InputEvent.apply(this, arguments) || this;
+        _this.commandOrControlAutoremap = false;
+        _this.shiftPressed = false;
+        _this.altPressed = false;
+        _this.metaPressed = false;
+        _this.ctrlPressed = false;
+        return _this;
+    }
+    var _proto = InputEventWithModifiers.prototype;
+    _proto.copyModifiersTo = function copyModifiersTo(event) {
+        event.device = this.device;
+        event.pressed = this.pressed;
+        event.canceled = this.canceled;
+        event.commandOrControlAutoremap = this.commandOrControlAutoremap;
+        event.shiftPressed = this.shiftPressed;
+        event.altPressed = this.altPressed;
+        event.metaPressed = this.metaPressed;
+        event.ctrlPressed = this.ctrlPressed;
+    };
+    return InputEventWithModifiers;
+}(_wrap_native_super(InputEvent));
+var InputEventKey = /*#__PURE__*/ function(InputEventWithModifiers) {
+    _inherits(InputEventKey, InputEventWithModifiers);
+    function InputEventKey() {
+        var _this;
+        _this = InputEventWithModifiers.apply(this, arguments) || this;
+        _this.keycode = "";
+        _this.physicalKeycode = "";
+        _this.keyLabel = "";
+        _this.unicode = 0;
+        _this.location = exports.KeyLocation.Unspecified;
+        _this.echo = false;
+        return _this;
+    }
+    var _proto = InputEventKey.prototype;
+    _proto.isEcho = function isEcho() {
+        return this.echo;
     };
-    _create_class(CanvasItem, [
-        {
-            key: "canvasLayer",
-            get: /**
-   * 获取当前所属的 CanvasLayer
-   */ function get() {
-                return this.canvasLayerNode;
-            }
-        }
-    ]);
-    return CanvasItem;
-}(Component);
-/**
- * 在指定 VFXItem 上查找一个激活的 CanvasLayer 组件
- */ function getCanvasLayerFromItem(item) {
-    for(var _iterator = _create_for_of_iterator_helper_loose(item.components), _step; !(_step = _iterator()).done;){
-        var component = _step.value;
-        if (_instanceof1(component, CanvasLayer) && component.isActiveAndEnabled) {
-            return component;
-        }
+    return InputEventKey;
+}(InputEventWithModifiers);
+var InputEventMouse = /*#__PURE__*/ function(InputEventWithModifiers) {
+    _inherits(InputEventMouse, InputEventWithModifiers);
+    function InputEventMouse() {
+        var _this;
+        _this = InputEventWithModifiers.apply(this, arguments) || this;
+        _this.buttonMask = exports.MouseButtonMask.None;
+        _this.position = new Vector2();
+        _this.globalPosition = new Vector2();
+        return _this;
     }
-    return null;
-}
-/**
- * 在指定 VFXItem 上查找 CanvasItem 组件(只看类型,不看 active/enabled — 拓扑跟激活状态解耦)
- */ function getCanvasItemFromItem(item) {
-    for(var _iterator = _create_for_of_iterator_helper_loose(item.components), _step; !(_step = _iterator()).done;){
-        var component = _step.value;
-        if (_instanceof1(component, CanvasItem)) {
-            return component;
-        }
+    var _proto = InputEventMouse.prototype;
+    _proto.copyMouseTo = function copyMouseTo(event) {
+        this.copyModifiersTo(event);
+        event.buttonMask = this.buttonMask;
+        event.position.copyFrom(this.position);
+        event.globalPosition.copyFrom(this.globalPosition);
+    };
+    return InputEventMouse;
+}(InputEventWithModifiers);
+var InputEventMouseButton = /*#__PURE__*/ function(InputEventMouse) {
+    _inherits(InputEventMouseButton, InputEventMouse);
+    function InputEventMouseButton() {
+        var _this;
+        _this = InputEventMouse.apply(this, arguments) || this;
+        _this.factor = 1;
+        _this.buttonIndex = exports.MouseButton.None;
+        _this.doubleClick = false;
+        return _this;
     }
-    return null;
-}
-
-/**
- * 16 个 preset 对应的 anchorMin / anchorMax（Y 向上）
- */ var ANCHOR_PRESET_TABLE = {
-    // [anchorMin.x, anchorMin.y, anchorMax.x, anchorMax.y]
+    var _proto = InputEventMouseButton.prototype;
+    _proto.xformedBy = function xformedBy(transform) {
+        var event = new InputEventMouseButton();
+        this.copyMouseTo(event);
+        event.position.copyFrom(transformPoint(transform, this.position));
+        event.factor = this.factor;
+        event.buttonIndex = this.buttonIndex;
+        event.doubleClick = this.doubleClick;
+        return event;
+    };
+    return InputEventMouseButton;
+}(InputEventMouse);
+var InputEventMouseMotion = /*#__PURE__*/ function(InputEventMouse) {
+    _inherits(InputEventMouseMotion, InputEventMouse);
+    function InputEventMouseMotion() {
+        var _this;
+        _this = InputEventMouse.apply(this, arguments) || this;
+        _this.tilt = new Vector2();
+        _this.pressure = 0;
+        _this.relative = new Vector2();
+        _this.screenRelative = new Vector2();
+        _this.velocity = new Vector2();
+        _this.screenVelocity = new Vector2();
+        _this.penInverted = false;
+        return _this;
+    }
+    var _proto = InputEventMouseMotion.prototype;
+    _proto.xformedBy = function xformedBy(transform) {
+        var event = new InputEventMouseMotion();
+        this.copyMouseTo(event);
+        event.position.copyFrom(transformPoint(transform, this.position));
+        event.tilt.copyFrom(this.tilt);
+        event.pressure = this.pressure;
+        event.relative.copyFrom(transformVector(transform, this.relative));
+        event.screenRelative.copyFrom(this.screenRelative);
+        event.velocity.copyFrom(transformVector(transform, this.velocity));
+        event.screenVelocity.copyFrom(this.screenVelocity);
+        event.penInverted = this.penInverted;
+        return event;
+    };
+    return InputEventMouseMotion;
+}(InputEventMouse);
+var InputEventScreenTouch = /*#__PURE__*/ function(InputEvent) {
+    _inherits(InputEventScreenTouch, InputEvent);
+    function InputEventScreenTouch() {
+        var _this;
+        _this = InputEvent.apply(this, arguments) || this;
+        _this.index = 0;
+        _this.position = new Vector2();
+        _this.doubleTap = false;
+        return _this;
+    }
+    var _proto = InputEventScreenTouch.prototype;
+    _proto.xformedBy = function xformedBy(transform) {
+        var event = new InputEventScreenTouch();
+        event.device = this.device;
+        event.pressed = this.pressed;
+        event.canceled = this.canceled;
+        event.index = this.index;
+        event.position.copyFrom(transformPoint(transform, this.position));
+        event.doubleTap = this.doubleTap;
+        return event;
+    };
+    return InputEventScreenTouch;
+}(_wrap_native_super(InputEvent));
+var InputEventScreenDrag = /*#__PURE__*/ function(InputEvent) {
+    _inherits(InputEventScreenDrag, InputEvent);
+    function InputEventScreenDrag() {
+        var _this;
+        _this = InputEvent.apply(this, arguments) || this;
+        _this.index = 0;
+        _this.position = new Vector2();
+        _this.relative = new Vector2();
+        _this.screenRelative = new Vector2();
+        _this.velocity = new Vector2();
+        _this.screenVelocity = new Vector2();
+        _this.pressure = 0;
+        _this.tilt = new Vector2();
+        _this.penInverted = false;
+        return _this;
+    }
+    var _proto = InputEventScreenDrag.prototype;
+    _proto.xformedBy = function xformedBy(transform) {
+        var event = new InputEventScreenDrag();
+        event.device = this.device;
+        event.pressed = this.pressed;
+        event.canceled = this.canceled;
+        event.index = this.index;
+        event.position.copyFrom(transformPoint(transform, this.position));
+        event.relative.copyFrom(transformVector(transform, this.relative));
+        event.screenRelative.copyFrom(this.screenRelative);
+        event.velocity.copyFrom(transformVector(transform, this.velocity));
+        event.screenVelocity.copyFrom(this.screenVelocity);
+        event.pressure = this.pressure;
+        event.tilt.copyFrom(this.tilt);
+        event.penInverted = this.penInverted;
+        return event;
+    };
+    return InputEventScreenDrag;
+}(_wrap_native_super(InputEvent));
+
+var ANCHOR_PRESET_TABLE = {
     topLeft: [
         0,
-        1,
         0,
-        1
+        0,
+        0
     ],
     topRight: [
         1,
+        0,
         1,
-        1,
-        1
+        0
     ],
     bottomLeft: [
         0,
+        1,
         0,
-        0,
-        0
+        1
     ],
     bottomRight: [
         1,
-        0,
         1,
-        0
+        1,
+        1
     ],
     centerLeft: [
         0,
@@ -24831,9 +24873,9 @@ exports.FrameComponent = __decorate([
     ],
     centerTop: [
         0.5,
-        1,
+        0,
         0.5,
-        1
+        0
     ],
     centerRight: [
         1,
@@ -24843,9 +24885,9 @@ exports.FrameComponent = __decorate([
     ],
     centerBottom: [
         0.5,
-        0,
+        1,
         0.5,
-        0
+        1
     ],
     center: [
         0.5,
@@ -24860,10 +24902,10 @@ exports.FrameComponent = __decorate([
         1
     ],
     topWide: [
+        0,
         0,
         1,
-        1,
-        1
+        0
     ],
     rightWide: [
         1,
@@ -24872,10 +24914,10 @@ exports.FrameComponent = __decorate([
         1
     ],
     bottomWide: [
-        0,
         0,
         1,
-        0
+        1,
+        1
     ],
     vcenterWide: [
         0.5,
@@ -24897,306 +24939,171 @@ exports.FrameComponent = __decorate([
     ]
 };
 /**
- * 锚点布局变换。`RectTransform extends Transform`，在 Transform 的 position/rotation/scale/size/anchor（=pivot 偏移）
- * 之上额外维护 4 边锚点 + 4 边像素偏移，提供 rect 解算与编辑 API。
- *
- * 解算公式（Y 向上，父 vertex 坐标原点 = 父 rect 左下角）：
- * ```
- * left   = offsetMin.x + anchorMin.x * parentSize.x
- * bottom = offsetMin.y + anchorMin.y * parentSize.y
- * right  = offsetMax.x + anchorMax.x * parentSize.x
- * top    = offsetMax.y + anchorMax.y * parentSize.y
- * ```
- *
- * 写回 Transform：
- * - `position` ← `(left, bottom)`（rect 左下角，父 vertex 坐标）
- * - `size`     ← rect 尺寸
- * - `anchor`（Vector3 像素 pivot 偏移）由用户独立设置，仅作旋转/缩放中心
- *
- * **解算入口** 是 `sizeChanged()` 方法：
- * - 父是 RectTransform → 用 `parent.size` 作 parentSize 解算自身，写回 `position` / `size`
- * - 否则（顶层 / 没父）：自身 size 视为权威值（由外部 — 通常是 CanvasLayer — 直接写），不再自解算
- * - 末尾遍历 `children` 中的 RectTransform，直接调它们的 `sizeChanged()`，链式向下传播
- *
- * **重写 `setPosition` / `setSize`** 让其语义变为"用户输入 rect 位置 / 尺寸"：
- * - 顶层（无 RectTransform 父）：直接写 `super.setPosition / super.setSize`，然后 `sizeChanged` 传播给子节点
- * - 否则：反推 offset 维持当前 anchor，然后 `sizeChanged` 重算并向下传
- */ var RectTransform = /*#__PURE__*/ function(Transform) {
-    _inherits(RectTransform, Transform);
-    function RectTransform() {
-        var _this;
-        _this = Transform.apply(this, arguments) || this;
-        /**
-   * 父 rect 上的归一化最小角 `(anchorLeft, anchorBottom)`
-   */ _this.anchorMin = new Vector2(0, 0);
-        /**
-   * 父 rect 上的归一化最大角 `(anchorRight, anchorTop)`
-   */ _this.anchorMax = new Vector2(0, 0);
-        /**
-   * rect 左/下边相对 anchorMin 锚点的像素偏移 `(offsetLeft, offsetBottom)`
-   */ _this.offsetMin = new Vector2(0, 0);
-        /**
-   * rect 右/上边相对 anchorMax 锚点的像素偏移 `(offsetRight, offsetTop)`
-   */ _this.offsetMax = new Vector2(0, 0);
-        /**
-   * 自身 rect 上的归一化轴心 `(0..1)`，默认 `(0.5, 0.5)`(中心)。两层效果：
-   * 1. **Layout**：`setSize` 时 rect 围绕此点对称缩放（pivot=(0.5, 0.5) → 居中扩展；pivot=(0, 0) → 从左下扩展；pivot=(1, 1) → 向左下缩）
-   * 2. **矩阵**：`pivot` 自动同步到 `transform.anchor = pivot * size`（像素值，矩阵旋转/缩放中心），
-   *    所以旋转/缩放也围绕同一点。`setPivot` 和每次 `sizeChanged`（size 重算后）都会刷新 `transform.anchor`
-   */ _this.pivot = new Vector2(0.5, 0.5);
-        return _this;
+ * A drawable GUI object. Controls form a tree independent from the VFXItem
+ * scene tree. UIControl is the bridge between both trees.
+ */ var Control = /*#__PURE__*/ function() {
+    function Control(engine) {
+        this.engine = engine;
+        this._parent = null;
+        this._visible = true;
+        this._enabled = true;
+        this._mouseFilter = exports.MouseFilter.Stop;
+        this._mouseBehaviorRecursive = exports.MouseBehaviorRecursive.Inherited;
+        this._focusMode = exports.FocusMode.None;
+        this._focusBehaviorRecursive = exports.FocusBehaviorRecursive.Inherited;
+        this._defaultCursorShape = exports.CursorShape.Arrow;
+        this._rotation = 0;
+        this.transformDirty = true;
+        this.cachedTransform = new Matrix3();
+        this.eventEmitter = new EventEmitter();
+        this.disposed = false;
+        this./** Scene-tree bridge that owns this GUI object, if any. */ owner = null;
+        this.position = new Vector2();
+        this.size = new Vector2(1, 1);
+        this.anchorMin = new Vector2();
+        this.anchorMax = new Vector2();
+        this.offsetMin = new Vector2();
+        this.offsetMax = new Vector2(1, 1);
+        this.pivot = new Vector2(0.5, 0.5);
+        this.scale = new Vector2(1, 1);
+        this.shear = new Vector2();
+        this.mouseForcePassScrollEvents = true;
+        this.clipContents = false;
     }
-    var _proto = RectTransform.prototype;
-    /**
-   * 反序列化：在 `Transform.fromData` 基础上还原 RectTransform 特有的 `pivot` /
-   * `anchorMin` / `anchorMax` / `offsetMin` / `offsetMax`。
-   *
-   * 顺序：
-   * 1. `super.fromData` 还原 `position` / `rotation` / `scale` / `size` / `anchor`
-   * 2. 若数据有 size，从 `anchor / size` 反推 `pivot`，保持 `anchor = pivot * size` 一致
-   * 3. 应用 `anchorMin/Max` / `offsetMin/Max`，每个 setter 末尾会触发 `sizeChanged`
-   *    重新解算 rect 与同步 `transform.anchor`
-   */ _proto.fromData = function fromData(data) {
-        Transform.prototype.fromData.call(this, data);
-        if (this.size.x !== 0 && this.size.y !== 0) {
-            this.pivot.set(this.anchor.x / this.size.x, this.anchor.y / this.size.y);
+    var _proto = Control.prototype;
+    _proto.on = function on(eventName, listener, options) {
+        this.eventEmitter.on(eventName, listener, options);
+    };
+    _proto.off = function off(eventName, listener) {
+        this.eventEmitter.off(eventName, listener);
+    };
+    _proto.setPosition = function setPosition(x, y, keepOffsets) {
+        if (keepOffsets === void 0) keepOffsets = false;
+        if (this.position.x === x && this.position.y === y) {
+            return;
         }
-        // @ts-expect-error spec.TransformData 暂未声明 RectTransform 字段
-        if (data.anchorMin) {
-            // @ts-expect-error
-            this.setAnchorMin(data.anchorMin.x, data.anchorMin.y);
+        var rect = {
+            position: new Vector2(x, y),
+            size: this.size.clone()
+        };
+        if (keepOffsets && this.parent) {
+            this.computeAnchors(rect, this.getParentRect());
+        } else {
+            this.computeOffsets(rect, this.getParentRect());
         }
-        // @ts-expect-error
-        if (data.anchorMax) {
-            // @ts-expect-error
-            this.setAnchorMax(data.anchorMax.x, data.anchorMax.y);
+        this.updateLayout();
+    };
+    _proto.setSize = function setSize(width, height) {
+        if (this.size.x === width && this.size.y === height) {
+            return;
         }
-        // @ts-expect-error
-        if (data.offsetMin) {
-            // @ts-expect-error
-            this.setOffsetMin(data.offsetMin.x, data.offsetMin.y);
+        var rect = {
+            position: this.position.clone(),
+            size: new Vector2(width, height)
+        };
+        this.computeOffsets(rect, this.getParentRect());
+        this.updateLayout();
+    };
+    _proto.setScale = function setScale(x, y) {
+        if (this.scale.x !== x || this.scale.y !== y) {
+            this.scale.set(x, y);
+            this.markTransformDirty();
         }
-        // @ts-expect-error
-        if (data.offsetMax) {
-            // @ts-expect-error
-            this.setOffsetMax(data.offsetMax.x, data.offsetMax.y);
+    };
+    _proto.setRotation = function setRotation(degrees) {
+        if (this._rotation !== degrees) {
+            this._rotation = degrees;
+            this.markTransformDirty();
+        }
+    };
+    _proto.setShear = function setShear(x, y) {
+        if (this.shear.x !== x || this.shear.y !== y) {
+            this.shear.set(x, y);
+            this.markTransformDirty();
+        }
+    };
+    _proto.setPivot = function setPivot(x, y) {
+        if (this.pivot.x !== x || this.pivot.y !== y) {
+            this.pivot.set(x, y);
+            this.markTransformDirty();
         }
     };
-    // ── layout-input setters(改完 → sizeChanged 重算)──────
     _proto.setAnchorMin = function setAnchorMin(x, y) {
         if (this.anchorMin.x !== x || this.anchorMin.y !== y) {
-            this.anchorMin.x = x;
-            this.anchorMin.y = y;
-            this.sizeChanged();
+            this.anchorMin.set(x, y);
+            this.updateLayout();
         }
     };
     _proto.setAnchorMax = function setAnchorMax(x, y) {
         if (this.anchorMax.x !== x || this.anchorMax.y !== y) {
-            this.anchorMax.x = x;
-            this.anchorMax.y = y;
-            this.sizeChanged();
+            this.anchorMax.set(x, y);
+            this.updateLayout();
         }
     };
     _proto.setOffsetMin = function setOffsetMin(x, y) {
         if (this.offsetMin.x !== x || this.offsetMin.y !== y) {
-            this.offsetMin.x = x;
-            this.offsetMin.y = y;
-            this.sizeChanged();
+            this.offsetMin.set(x, y);
+            this.updateLayout();
         }
     };
     _proto.setOffsetMax = function setOffsetMax(x, y) {
         if (this.offsetMax.x !== x || this.offsetMax.y !== y) {
-            this.offsetMax.x = x;
-            this.offsetMax.y = y;
-            this.sizeChanged();
-        }
-    };
-    /**
-   * 设置 rect 内的归一化轴心 `(0..1)`，同时把 `transform.anchor`（矩阵旋转/缩放中心）同步到 `pivot * size`。
-   * 不重算 rect（pivot 只决定 setSize 行为，不直接影响当前 rect 位置 / 尺寸）
-   */ _proto.setPivot = function setPivot(x, y) {
-        if (this.pivot.x !== x || this.pivot.y !== y) {
-            this.pivot.x = x;
-            this.pivot.y = y;
-            // 同步 transform.anchor（像素 pivot）= pivot * size，让旋转/缩放绕同一点
-            this.anchor.set(this.pivot.x * this.size.x, this.pivot.y * this.size.y, this.anchor.z);
+            this.offsetMax.set(x, y);
+            this.updateLayout();
         }
     };
-    /**
-   * 重写父类 `setPosition`：
-   * - 顶层（无 RectTransform 父）：直接 `super.setPosition` 写位置，触发 `sizeChanged` 传播
-   * - 非顶层：语义为"设置 rect 左下角到 (x, y)"，反推 offset 维持当前 anchor，然后 `sizeChanged` 重算
-   *
-   * @param keepOffsets - 默认 false。true 时反推 anchor 而非 offset（rect 在屏幕上不动，但 anchor 比例改变）
-   */ _proto.setPosition = function setPosition(x, y, z, keepOffsets) {
-        if (keepOffsets === void 0) keepOffsets = false;
-        if (!_instanceof1(this.parentTransform, RectTransform)) {
-            // 顶层：直接写，然后传播给子节点
-            Transform.prototype.setPosition.call(this, x, y, z);
-            this.sizeChanged();
-            return;
-        }
-        var parentRect = {
-            position: new Vector2(0, 0),
-            size: this.parentTransform.size.clone()
-        };
-        var newRect = {
-            position: new Vector2(x, y),
-            size: this.size.clone()
-        };
-        if (keepOffsets) {
-            this.computeAnchors(newRect, parentRect);
-        } else {
-            this.computeOffsets(newRect, parentRect);
-        }
-        this.sizeChanged();
-        if (this.position.z !== z) {
-            Transform.prototype.setPosition.call(this, this.position.x, this.position.y, z);
-        }
-    };
-    /**
-   * 重写父类 `setSize`：
-   * - 顶层：直接 `super.setSize`，触发 `sizeChanged` 传播
-   * - 非顶层：反推 offset 维持当前 anchor，然后 `sizeChanged` 重算
-   */ _proto.setSize = function setSize(x, y) {
-        if (this.size.x === x && this.size.y === y) {
-            return;
-        }
-        if (!_instanceof1(this.parentTransform, RectTransform)) {
-            Transform.prototype.setSize.call(this, x, y);
-            this.sizeChanged();
-            return;
-        }
-        // 围绕 pivot 对称缩放：Δsize 在 offsetMin / offsetMax 上按 pivot / (1-pivot) 比例分配。
-        // 例如 pivot=(0.5, 0.5) → 两边各 ±Δ/2,rect 居中扩展；pivot=(0, 0) → offsetMin 不动、offsetMax 全吃，rect 从左下扩展
-        var dw = x - this.size.x;
-        var dh = y - this.size.y;
-        this.offsetMin.set(this.offsetMin.x - this.pivot.x * dw, this.offsetMin.y - this.pivot.y * dh);
-        this.offsetMax.set(this.offsetMax.x + (1 - this.pivot.x) * dw, this.offsetMax.y + (1 - this.pivot.y) * dh);
-        this.sizeChanged();
-    };
-    // ── rect query ───────────────────────────────────────
-    /**
-   * 当前自身 rect（在父 vertex 坐标下，Y 向上）。`sizeChanged` 之后才有意义
-   */ _proto.getRect = function getRect() {
+    _proto.getRect = function getRect() {
         return {
-            position: new Vector2(this.position.x, this.position.y),
+            position: this.position.clone(),
             size: this.size.clone()
         };
     };
-    // ── parent linkage ───────────────────────────────────
-    /**
-   * 父 transform 切换时重算自身布局。子节点链路通过 `Transform.children` 直接访问，无需事件订阅
-   * @internal
-   */ _proto.onParentTransformChanged = function onParentTransformChanged(_oldParent, _newParent) {
-        if (_instanceof1(_oldParent, RectTransform)) {
-            this.engine.off("resize", this.onCanvasResize.bind(this));
-        }
-        if (!_instanceof1(_newParent, RectTransform)) {
-            this.onCanvasResize();
-            this.engine.on("resize", this.onCanvasResize.bind(this));
-        }
-        this.sizeChanged();
-    };
-    _proto.onCanvasResize = function onCanvasResize() {
-        var rect = this.engine.canvas.getBoundingClientRect();
-        this.setSize(rect.width, rect.height);
-    };
-    // ── layout solver──────────────
-    /**
-   * 解算入口：
-   *
-   * 1. 父是 RectTransform → 从 `parent.size` 求自身 rect，通过 `super.setPosition / super.setSize` 写回
-   *    （避免触发本类 setPosition / setSize 重写）
-   * 2. 顶层（无 RectTransform 父）：自身 size 视为权威值（由 CanvasLayer 等外部直接写），不自解算
-   * 3. 遍历 `children` 中所有 RectTransform 子节点，直接调它们的 `sizeChanged()` 链式传播
-   */ _proto.sizeChanged = function sizeChanged() {
-        if (_instanceof1(this.parentTransform, RectTransform)) {
-            var parentSize = this.parentTransform.size;
-            var left = this.offsetMin.x + this.anchorMin.x * parentSize.x;
-            var bottom = this.offsetMin.y + this.anchorMin.y * parentSize.y;
-            var right = this.offsetMax.x + this.anchorMax.x * parentSize.x;
-            var top = this.offsetMax.y + this.anchorMax.y * parentSize.y;
-            Transform.prototype.setPosition.call(this, left, bottom, this.position.z);
-            Transform.prototype.setSize.call(this, right - left, top - bottom);
-        }
-        // size 更新后同步 transform.anchor（矩阵旋转/缩放中心）= pivot * size，跟 setPivot 保持统一
-        this.anchor.set(this.pivot.x * this.size.x, this.pivot.y * this.size.y, this.anchor.z);
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
-            var child = _step.value;
-            if (_instanceof1(child, RectTransform)) {
-                child.sizeChanged();
-            }
-        }
-    };
-    /**
-   * 给定目标 rect 反推 offsetMin/Max，保持当前 anchor 不变
-   */ _proto.computeOffsets = function computeOffsets(rect, parentRect) {
-        this.offsetMin.set(rect.position.x - parentRect.position.x - this.anchorMin.x * parentRect.size.x, rect.position.y - parentRect.position.y - this.anchorMin.y * parentRect.size.y);
-        this.offsetMax.set(rect.position.x + rect.size.x - parentRect.position.x - this.anchorMax.x * parentRect.size.x, rect.position.y + rect.size.y - parentRect.position.y - this.anchorMax.y * parentRect.size.y);
-    };
-    /**
-   * 给定目标 rect 反推 anchorMin/Max，保持当前 offset 不变。父 size 为 0 的方向不修改
-   */ _proto.computeAnchors = function computeAnchors(rect, parentRect) {
-        if (parentRect.size.x !== 0) {
-            var aMinX = (rect.position.x - parentRect.position.x - this.offsetMin.x) / parentRect.size.x;
-            var aMaxX = (rect.position.x + rect.size.x - parentRect.position.x - this.offsetMax.x) / parentRect.size.x;
-            this.anchorMin.x = aMinX;
-            this.anchorMax.x = aMaxX;
-        }
-        if (parentRect.size.y !== 0) {
-            var aMinY = (rect.position.y - parentRect.position.y - this.offsetMin.y) / parentRect.size.y;
-            var aMaxY = (rect.position.y + rect.size.y - parentRect.position.y - this.offsetMax.y) / parentRect.size.y;
-            this.anchorMin.y = aMinY;
-            this.anchorMax.y = aMaxY;
-        }
-    };
-    // ── preset API ───────────────────────────────────────
-    /**
-   * 把 anchorMin/Max 设为内建预设。
-   * @param keepOffsets - 默认 true：offset 不动，rect 实际位置会跳到新 anchor 计算的位置（要求保留视觉位置请用 setAnchorsAndOffsetsPreset）
-   */ _proto.setAnchorsPreset = function setAnchorsPreset(preset, keepOffsets) {
+    _proto.getTransform2D = function getTransform2D() {
+        if (this.transformDirty) {
+            var radians = this._rotation * Math.PI / 180;
+            var sin = Math.sin(radians);
+            var cos = Math.cos(radians);
+            var shearX = Math.tan(Math.max(-89, Math.min(89, this.shear.x)) * Math.PI / 180);
+            var shearY = Math.tan(Math.max(-89, Math.min(89, this.shear.y)) * Math.PI / 180);
+            var a = this.scale.x * (cos - sin * shearY);
+            var b = this.scale.x * (sin + cos * shearY);
+            var c = this.scale.y * (cos * shearX - sin);
+            var d = this.scale.y * (sin * shearX + cos);
+            var pivotX = this.pivot.x * this.size.x;
+            var pivotY = this.pivot.y * this.size.y;
+            var tx = this.position.x + pivotX - a * pivotX - c * pivotY;
+            var ty = this.position.y + pivotY - b * pivotX - d * pivotY;
+            this.cachedTransform.set(a, b, 0, c, d, 0, tx, ty, 1);
+            this.transformDirty = false;
+        }
+        return this.cachedTransform;
+    };
+    _proto.setAnchorsPreset = function setAnchorsPreset(preset, keepOffsets) {
         if (keepOffsets === void 0) keepOffsets = true;
-        var _ANCHOR_PRESET_TABLE_preset = ANCHOR_PRESET_TABLE[preset], aMinX = _ANCHOR_PRESET_TABLE_preset[0], aMinY = _ANCHOR_PRESET_TABLE_preset[1], aMaxX = _ANCHOR_PRESET_TABLE_preset[2], aMaxY = _ANCHOR_PRESET_TABLE_preset[3];
+        var _ANCHOR_PRESET_TABLE_preset = ANCHOR_PRESET_TABLE[preset], minX = _ANCHOR_PRESET_TABLE_preset[0], minY = _ANCHOR_PRESET_TABLE_preset[1], maxX = _ANCHOR_PRESET_TABLE_preset[2], maxY = _ANCHOR_PRESET_TABLE_preset[3];
         if (keepOffsets) {
-            this.anchorMin.set(aMinX, aMinY);
-            this.anchorMax.set(aMaxX, aMaxY);
-        } else if (_instanceof1(this.parentTransform, RectTransform)) {
-            var parentRect = {
-                position: new Vector2(0, 0),
-                size: this.parentTransform.size.clone()
-            };
-            var rect = this.getRect();
-            this.anchorMin.set(aMinX, aMinY);
-            this.anchorMax.set(aMaxX, aMaxY);
-            this.computeOffsets(rect, parentRect);
+            this.anchorMin.set(minX, minY);
+            this.anchorMax.set(maxX, maxY);
         } else {
-            // 顶层无父 rect 可参考,降级为 keepOffsets
-            this.anchorMin.set(aMinX, aMinY);
-            this.anchorMax.set(aMaxX, aMaxY);
+            var rect = this.getRect();
+            this.anchorMin.set(minX, minY);
+            this.anchorMax.set(maxX, maxY);
+            this.computeOffsets(rect, this.getParentRect());
         }
-        this.sizeChanged();
+        this.updateLayout();
     };
-    /**
-   * 把 offsetMin/Max 设为预设值，使 rect 在父 rect 内落在视觉上对应的位置（留 margin 像素边距）。
-   * 当 anchor 已经按相同 preset 设定时，等价于“贴边放置带 margin 的 rect”。
-   * 使用当前 size 作为 rect 尺寸。
-   */ _proto.setOffsetsPreset = function setOffsetsPreset(preset, margin) {
+    _proto.setOffsetsPreset = function setOffsetsPreset(preset, margin) {
         if (margin === void 0) margin = 0;
-        if (!_instanceof1(this.parentTransform, RectTransform)) {
+        if (!this.parent) {
             return;
         }
-        var newSizeX = this.size.x;
-        var newSizeY = this.size.y;
+        var parentSize = this.parent.size;
+        var width = this.size.x;
+        var height = this.size.y;
         var a = this.anchorMin;
         var b = this.anchorMax;
-        var pw = this.parentTransform.size.x;
-        var ph = this.parentTransform.size.y;
-        var offMinX = 0;
-        var offMaxX = 0;
-        var offMinY = 0;
-        var offMaxY = 0;
-        // X 方向(left / right)
+        var minX = 0, maxX = 0, minY = 0, maxY = 0;
+        // Left edge.
         switch(preset){
             case "topLeft":
             case "bottomLeft":
@@ -25206,119 +25113,1498 @@ exports.FrameComponent = __decorate([
             case "leftWide":
             case "hcenterWide":
             case "fullRect":
-                offMinX = margin - a.x * pw;
-                offMaxX = margin + newSizeX - b.x * pw;
+                minX = margin - a.x * parentSize.x;
                 break;
             case "centerTop":
             case "centerBottom":
             case "center":
             case "vcenterWide":
-                offMinX = 0.5 * pw - newSizeX / 2 - a.x * pw;
-                offMaxX = 0.5 * pw + newSizeX / 2 - b.x * pw;
+                minX = 0.5 * parentSize.x - width / 2 - a.x * parentSize.x;
                 break;
-            case "topRight":
-            case "bottomRight":
-            case "centerRight":
-            case "rightWide":
-                offMinX = pw - margin - newSizeX - a.x * pw;
-                offMaxX = pw - margin - b.x * pw;
+            default:
+                minX = parentSize.x - margin - width - a.x * parentSize.x;
                 break;
         }
-        // Y 方向（bottom / top）— Y 向上
         switch(preset){
+            case "topLeft":
             case "bottomLeft":
-            case "bottomRight":
+            case "centerLeft":
+            case "leftWide":
+                maxX = margin + width - b.x * parentSize.x;
+                break;
+            case "centerTop":
             case "centerBottom":
+            case "center":
+            case "vcenterWide":
+                maxX = 0.5 * parentSize.x + width / 2 - b.x * parentSize.x;
+                break;
+            default:
+                maxX = parentSize.x - margin - b.x * parentSize.x;
+                break;
+        }
+        // Top edge.
+        switch(preset){
+            case "topLeft":
+            case "topRight":
+            case "centerTop":
             case "leftWide":
             case "rightWide":
-            case "bottomWide":
+            case "topWide":
             case "vcenterWide":
             case "fullRect":
-                offMinY = margin - a.y * ph;
-                offMaxY = margin + newSizeY - b.y * ph;
+                minY = margin - a.y * parentSize.y;
                 break;
             case "centerLeft":
             case "centerRight":
             case "center":
             case "hcenterWide":
-                offMinY = 0.5 * ph - newSizeY / 2 - a.y * ph;
-                offMaxY = 0.5 * ph + newSizeY / 2 - b.y * ph;
+                minY = 0.5 * parentSize.y - height / 2 - a.y * parentSize.y;
+                break;
+            default:
+                minY = parentSize.y - margin - height - a.y * parentSize.y;
                 break;
+        }
+        // Bottom edge.
+        switch(preset){
             case "topLeft":
             case "topRight":
             case "centerTop":
             case "topWide":
-                offMinY = ph - margin - newSizeY - a.y * ph;
-                offMaxY = ph - margin - b.y * ph;
+                maxY = margin + height - b.y * parentSize.y;
+                break;
+            case "centerLeft":
+            case "centerRight":
+            case "center":
+            case "hcenterWide":
+                maxY = 0.5 * parentSize.y + height / 2 - b.y * parentSize.y;
+                break;
+            default:
+                maxY = parentSize.y - margin - b.y * parentSize.y;
                 break;
         }
-        this.offsetMin.set(offMinX, offMinY);
-        this.offsetMax.set(offMaxX, offMaxY);
-        this.sizeChanged();
+        this.offsetMin.set(minX, minY);
+        this.offsetMax.set(maxX, maxY);
+        this.updateLayout();
     };
-    /**
-   * 同时设置 anchor 和 offset，达到“按 preset 摆放并贴边带 margin”的效果。
-   *
-   * 注意第一步用 `keepOffsets=false`（反推 offset 维持 rect 视觉位置），不能用默认 `true`：
-   * 后者会让 rect 的 size 在中间步先跳到错值（因为 anchor 改了 offset 没改），
-   * 第二步 `setOffsetsPreset` 又用这个错 size 算 offset，最终 rect size 不对
-   */ _proto.setAnchorsAndOffsetsPreset = function setAnchorsAndOffsetsPreset(preset, margin) {
+    _proto.setAnchorsAndOffsetsPreset = function setAnchorsAndOffsetsPreset(preset, margin) {
         if (margin === void 0) margin = 0;
         this.setAnchorsPreset(preset, false);
         this.setOffsetsPreset(preset, margin);
     };
-    /**
-   * 用既有 Transform 的状态创建 RectTransform。
-   * 用于 Control / CanvasLayer 接管 VFXItem 时，把 VFXItem 自带的 Transform 升级为 RectTransform 而不丢失 position/rotation/scale 等已设置好的状态。
-   */ RectTransform.fromTransform = function fromTransform(t) {
-        if (_instanceof1(t, RectTransform)) {
-            return t;
+    _proto.getGlobalTransform2D = function getGlobalTransform2D() {
+        var local = this.getTransform2D();
+        return this.parent ? new Matrix3().multiplyMatrices(this.parent.getGlobalTransform2D(), local) : local.clone();
+    };
+    _proto.hasPoint = function hasPoint(point) {
+        return point.x >= 0 && point.y >= 0 && point.x <= this.size.x && point.y <= this.size.y;
+    };
+    _proto.getEffectiveMouseFilter = function getEffectiveMouseFilter() {
+        return this.enabledInHierarchy && this.isMouseRecursiveEnabled() ? this.mouseFilter : exports.MouseFilter.Ignore;
+    };
+    _proto.getFocusModeWithOverride = function getFocusModeWithOverride() {
+        return this.enabledInHierarchy && this.isFocusRecursiveEnabled() ? this.focusMode : exports.FocusMode.None;
+    };
+    _proto.getCursorShape = function getCursorShape(position) {
+        return this.defaultCursorShape;
+    };
+    _proto.focus = function focus() {
+        var _this_root;
+        (_this_root = this.root) == null ? void 0 : _this_root.grabControlFocus(this);
+    };
+    _proto.grabFocus = function grabFocus() {
+        this.focus();
+    };
+    _proto.grabClickFocus = function grabClickFocus() {
+        var _this_root;
+        (_this_root = this.root) == null ? void 0 : _this_root.grabControlClickFocus(this);
+    };
+    _proto.releaseFocus = function releaseFocus() {
+        var _this_root;
+        (_this_root = this.root) == null ? void 0 : _this_root.releaseControlFocus(this);
+    };
+    _proto.warpMouse = function warpMouse(position) {
+        var _this_root;
+        var matrix = this.getGlobalTransform2D().elements;
+        (_this_root = this.root) == null ? void 0 : _this_root.warpControlMouse(new Vector2(matrix[0] * position.x + matrix[3] * position.y + matrix[6], matrix[1] * position.x + matrix[4] * position.y + matrix[7]));
+    };
+    /** Converts a window-space position into this control's local coordinates. */ _proto.makePositionLocal = function makePositionLocal(position) {
+        var transform = this.getGlobalTransform2D().clone();
+        if (Math.abs(transform.determinant()) < 1e-12) {
+            return new Vector2();
+        }
+        var elements = transform.invert().elements;
+        return new Vector2(elements[0] * position.x + elements[3] * position.y + elements[6], elements[1] * position.x + elements[4] * position.y + elements[7]);
+    };
+    /** Gets the current mouse position transformed into this control's coordinates. */ _proto.getLocalMousePosition = function getLocalMousePosition() {
+        var root = this.root;
+        return root ? this.makePositionLocal(root.getMousePosition()) : new Vector2();
+    };
+    _proto.update = function update(deltaTime) {};
+    _proto.draw = function draw() {
+    // OVERRIDE
+    };
+    _proto.onDestroy = function onDestroy() {};
+    /** @internal */ _proto.drawInternal = function drawInternal() {
+        if (!this.visibleInHierarchy || this.disposed) {
+            return;
+        }
+        var graphics = this.engine.graphics;
+        graphics.pushTransform(this.getTransform2D());
+        this.draw();
+        graphics.popTransform();
+    };
+    _proto.drawLine = function drawLine(x1, y1, x2, y2, color, thickness) {
+        this.engine.graphics.drawLine(x1, y1, x2, y2, color, thickness);
+    };
+    _proto.drawPolyline = function drawPolyline(points, color, thickness) {
+        this.engine.graphics.drawLines(points, color, thickness);
+    };
+    _proto.drawBezier = function drawBezier(x1, y1, x2, y2, x3, y3, x4, y4, color, thickness) {
+        this.engine.graphics.drawBezier(x1, y1, x2, y2, x3, y3, x4, y4, color, thickness);
+    };
+    _proto.drawTriangle = function drawTriangle(x1, y1, x2, y2, x3, y3, color, thickness) {
+        this.engine.graphics.drawTriangle(x1, y1, x2, y2, x3, y3, color, thickness);
+    };
+    _proto.drawRect = function drawRect(x, y, width, height, color, thickness) {
+        this.engine.graphics.drawRectangle(x, y, width, height, color, thickness);
+    };
+    _proto.drawCircle = function drawCircle(cx, cy, radius, color, thickness) {
+        this.engine.graphics.drawCircle(cx, cy, radius, color, thickness);
+    };
+    _proto.fillTriangle = function fillTriangle(x1, y1, x2, y2, x3, y3, color) {
+        this.engine.graphics.fillTriangle(x1, y1, x2, y2, x3, y3, color);
+    };
+    _proto.fillRect = function fillRect(x, y, width, height, color) {
+        this.engine.graphics.fillRectangle(x, y, width, height, color);
+    };
+    _proto.fillCircle = function fillCircle(cx, cy, radius, color) {
+        this.engine.graphics.fillCircle(cx, cy, radius, color);
+    };
+    _proto.drawTexture = function drawTexture(x, y, width, height, texture, region, color) {
+        this.engine.graphics.drawTexture(x, y, width, height, texture, region, color);
+    };
+    _proto.drawText = function drawText(x, y, text, fontSize, color, fontFamily, fontWeight, fontStyle) {
+        this.engine.graphics.drawText(x, y, text, fontSize, color, fontFamily, fontWeight, fontStyle);
+    };
+    _proto.onMouseEnter = function onMouseEnter(location) {};
+    _proto.onMouseMove = function onMouseMove(event) {};
+    _proto.onMouseLeave = function onMouseLeave() {};
+    _proto.onMouseWheel = function onMouseWheel(event) {};
+    _proto.onMouseDown = function onMouseDown(event) {};
+    _proto.onMouseUp = function onMouseUp(event) {};
+    _proto.onTouchDown = function onTouchDown(event) {};
+    _proto.onTouchMove = function onTouchMove(event) {};
+    _proto.onTouchUp = function onTouchUp(event) {};
+    _proto.onKeyDown = function onKeyDown(event) {};
+    _proto.onKeyUp = function onKeyUp(event) {};
+    _proto.onGotFocus = function onGotFocus() {};
+    _proto.onLostFocus = function onLostFocus() {};
+    /** @internal */ _proto.invokeGetDragData = function invokeGetDragData(position) {
+        return this.getDragData(position);
+    };
+    /** @internal */ _proto.invokeCanDropData = function invokeCanDropData(position, data) {
+        return this.canDropData(position, data);
+    };
+    /** @internal */ _proto.invokeDropData = function invokeDropData(position, data) {
+        this.dropData(position, data);
+    };
+    _proto.getDragData = function getDragData(position) {
+        return null;
+    };
+    _proto.canDropData = function canDropData(position, data) {
+        return false;
+    };
+    _proto.dropData = function dropData(position, data) {};
+    _proto.dispose = function dispose() {
+        if (this.disposed) {
+            return;
+        }
+        this.disposed = true;
+        this.onDestroy();
+        this.parent = null;
+        this.owner = null;
+    };
+    /** @internal */ _proto.updateLayout = function updateLayout() {
+        var _this_parent;
+        var _this_parent_size;
+        var parentSize = (_this_parent_size = (_this_parent = this.parent) == null ? void 0 : _this_parent.size) != null ? _this_parent_size : new Vector2();
+        var left = this.offsetMin.x + this.anchorMin.x * parentSize.x;
+        var top = this.offsetMin.y + this.anchorMin.y * parentSize.y;
+        var right = this.offsetMax.x + this.anchorMax.x * parentSize.x;
+        var bottom = this.offsetMax.y + this.anchorMax.y * parentSize.y;
+        this.applyBounds(left, top, right - left, bottom - top);
+    };
+    _proto.applyBounds = function applyBounds(x, y, width, height) {
+        var locationChanged = this.position.x !== x || this.position.y !== y;
+        var sizeChanged = this.size.x !== width || this.size.y !== height;
+        if (!locationChanged && !sizeChanged) {
+            return;
+        }
+        this.position.set(x, y);
+        this.size.set(width, height);
+        this.markTransformDirty();
+        if (locationChanged) {
+            this.eventEmitter.emit("locationChanged", this);
+        }
+        if (sizeChanged) {
+            this.eventEmitter.emit("sizeChanged", this);
+            if (_instanceof1(this, ContainerControl)) {
+                for(var _iterator = _create_for_of_iterator_helper_loose(this.children.slice()), _step; !(_step = _iterator()).done;){
+                    var child = _step.value;
+                    child.updateLayout();
+                }
+            }
+        }
+    };
+    _proto.markTransformDirty = function markTransformDirty() {
+        var _this_root;
+        this.transformDirty = true;
+        (_this_root = this.root) == null ? void 0 : _this_root.controlTreeChanged();
+    };
+    _proto.getParentRect = function getParentRect() {
+        var _this_parent;
+        var _this_parent_size_clone;
+        return {
+            position: new Vector2(),
+            size: (_this_parent_size_clone = (_this_parent = this.parent) == null ? void 0 : _this_parent.size.clone()) != null ? _this_parent_size_clone : new Vector2()
+        };
+    };
+    _proto.computeOffsets = function computeOffsets(rect, parentRect) {
+        this.offsetMin.set(rect.position.x - parentRect.position.x - this.anchorMin.x * parentRect.size.x, rect.position.y - parentRect.position.y - this.anchorMin.y * parentRect.size.y);
+        this.offsetMax.set(rect.position.x + rect.size.x - parentRect.position.x - this.anchorMax.x * parentRect.size.x, rect.position.y + rect.size.y - parentRect.position.y - this.anchorMax.y * parentRect.size.y);
+    };
+    _proto.computeAnchors = function computeAnchors(rect, parentRect) {
+        if (parentRect.size.x !== 0) {
+            this.anchorMin.x = (rect.position.x - parentRect.position.x - this.offsetMin.x) / parentRect.size.x;
+            this.anchorMax.x = (rect.position.x + rect.size.x - parentRect.position.x - this.offsetMax.x) / parentRect.size.x;
+        }
+        if (parentRect.size.y !== 0) {
+            this.anchorMin.y = (rect.position.y - parentRect.position.y - this.offsetMin.y) / parentRect.size.y;
+            this.anchorMax.y = (rect.position.y + rect.size.y - parentRect.position.y - this.offsetMax.y) / parentRect.size.y;
+        }
+    };
+    _proto.isMouseRecursiveEnabled = function isMouseRecursiveEnabled() {
+        if (this.mouseBehaviorRecursive === exports.MouseBehaviorRecursive.Inherited) {
+            var _this_parent;
+            var _this_parent_isMouseRecursiveEnabled;
+            return (_this_parent_isMouseRecursiveEnabled = (_this_parent = this.parent) == null ? void 0 : _this_parent.isMouseRecursiveEnabled()) != null ? _this_parent_isMouseRecursiveEnabled : true;
+        }
+        return this.mouseBehaviorRecursive === exports.MouseBehaviorRecursive.Enabled;
+    };
+    _proto.isFocusRecursiveEnabled = function isFocusRecursiveEnabled() {
+        if (this.focusBehaviorRecursive === exports.FocusBehaviorRecursive.Inherited) {
+            var _this_parent;
+            var _this_parent_isFocusRecursiveEnabled;
+            return (_this_parent_isFocusRecursiveEnabled = (_this_parent = this.parent) == null ? void 0 : _this_parent.isFocusRecursiveEnabled()) != null ? _this_parent_isFocusRecursiveEnabled : true;
+        }
+        return this.focusBehaviorRecursive === exports.FocusBehaviorRecursive.Enabled;
+    };
+    _create_class(Control, [
+        {
+            key: "parent",
+            get: function get() {
+                return this._parent;
+            },
+            set: function set(value) {
+                var _this__parent;
+                if (value === this._parent) {
+                    return;
+                }
+                var previousRoot = this.root;
+                (_this__parent = this._parent) == null ? void 0 : _this__parent.removeChildInternal(this);
+                this._parent = value;
+                value == null ? void 0 : value.addChildInternal(this);
+                this.updateLayout();
+                var nextRoot = this.root;
+                if (previousRoot && previousRoot !== nextRoot) {
+                    previousRoot.controlRemoved(this);
+                }
+                nextRoot == null ? void 0 : nextRoot.controlTreeChanged();
+                this.eventEmitter.emit("parentChanged", this);
+            }
+        },
+        {
+            key: "item",
+            get: /** Scene item exposed through the optional UIControl bridge. */ function get() {
+                var _this_owner;
+                var _this_owner_item;
+                return (_this_owner_item = (_this_owner = this.owner) == null ? void 0 : _this_owner.item) != null ? _this_owner_item : null;
+            }
+        },
+        {
+            key: "indexInParent",
+            get: function get() {
+                var _this_parent;
+                var _this_parent_getChildIndex;
+                return (_this_parent_getChildIndex = (_this_parent = this.parent) == null ? void 0 : _this_parent.getChildIndex(this)) != null ? _this_parent_getChildIndex : -1;
+            },
+            set: function set(value) {
+                var _this_parent;
+                (_this_parent = this.parent) == null ? void 0 : _this_parent.changeChildIndex(this, value);
+            }
+        },
+        {
+            key: "visible",
+            get: function get() {
+                return this._visible;
+            },
+            set: function set(value) {
+                if (this._visible !== value) {
+                    var _this_root;
+                    this._visible = value;
+                    (_this_root = this.root) == null ? void 0 : _this_root.controlStateChanged(this);
+                }
+            }
+        },
+        {
+            key: "visibleInHierarchy",
+            get: function get() {
+                var _this_parent;
+                var _this_parent_visibleInHierarchy;
+                return this.visible && ((_this_parent_visibleInHierarchy = (_this_parent = this.parent) == null ? void 0 : _this_parent.visibleInHierarchy) != null ? _this_parent_visibleInHierarchy : true);
+            }
+        },
+        {
+            key: "enabled",
+            get: function get() {
+                return this._enabled;
+            },
+            set: function set(value) {
+                if (this._enabled !== value) {
+                    var _this_root;
+                    this._enabled = value;
+                    (_this_root = this.root) == null ? void 0 : _this_root.controlStateChanged(this);
+                }
+            }
+        },
+        {
+            key: "enabledInHierarchy",
+            get: function get() {
+                var _this_parent;
+                var _this_parent_enabledInHierarchy;
+                return this.enabled && ((_this_parent_enabledInHierarchy = (_this_parent = this.parent) == null ? void 0 : _this_parent.enabledInHierarchy) != null ? _this_parent_enabledInHierarchy : true);
+            }
+        },
+        {
+            key: "mouseFilter",
+            get: function get() {
+                return this._mouseFilter;
+            },
+            set: function set(value) {
+                if (this._mouseFilter !== value) {
+                    var _this_root;
+                    this._mouseFilter = value;
+                    (_this_root = this.root) == null ? void 0 : _this_root.controlStateChanged(this);
+                }
+            }
+        },
+        {
+            key: "mouseBehaviorRecursive",
+            get: function get() {
+                return this._mouseBehaviorRecursive;
+            },
+            set: function set(value) {
+                if (this._mouseBehaviorRecursive !== value) {
+                    var _this_root;
+                    this._mouseBehaviorRecursive = value;
+                    (_this_root = this.root) == null ? void 0 : _this_root.controlStateChanged(this);
+                }
+            }
+        },
+        {
+            key: "focusMode",
+            get: function get() {
+                return this._focusMode;
+            },
+            set: function set(value) {
+                if (this._focusMode !== value) {
+                    var _this_root;
+                    this._focusMode = value;
+                    (_this_root = this.root) == null ? void 0 : _this_root.controlStateChanged(this);
+                }
+            }
+        },
+        {
+            key: "focusBehaviorRecursive",
+            get: function get() {
+                return this._focusBehaviorRecursive;
+            },
+            set: function set(value) {
+                if (this._focusBehaviorRecursive !== value) {
+                    var _this_root;
+                    this._focusBehaviorRecursive = value;
+                    (_this_root = this.root) == null ? void 0 : _this_root.controlStateChanged(this);
+                }
+            }
+        },
+        {
+            key: "defaultCursorShape",
+            get: function get() {
+                return this._defaultCursorShape;
+            },
+            set: function set(value) {
+                var _this_root;
+                if (this._defaultCursorShape === value) {
+                    return;
+                }
+                this._defaultCursorShape = value;
+                (_this_root = this.root) == null ? void 0 : _this_root.updateMouseCursorState();
+            }
+        },
+        {
+            key: "location",
+            get: function get() {
+                return this.position;
+            },
+            set: function set(value) {
+                this.setPosition(value.x, value.y);
+            }
+        },
+        {
+            key: "rotation",
+            get: function get() {
+                return this._rotation;
+            }
+        },
+        {
+            key: "x",
+            get: function get() {
+                return this.position.x;
+            },
+            set: function set(value) {
+                this.setPosition(value, this.position.y);
+            }
+        },
+        {
+            key: "y",
+            get: function get() {
+                return this.position.y;
+            },
+            set: function set(value) {
+                this.setPosition(this.position.x, value);
+            }
+        },
+        {
+            key: "width",
+            get: function get() {
+                return this.size.x;
+            },
+            set: function set(value) {
+                this.setSize(value, this.size.y);
+            }
+        },
+        {
+            key: "height",
+            get: function get() {
+                return this.size.y;
+            },
+            set: function set(value) {
+                this.setSize(this.size.x, value);
+            }
+        },
+        {
+            key: "root",
+            get: function get() {
+                var _this_parent;
+                var _this_parent_root;
+                return _instanceof1(this, RootControl) ? this : (_this_parent_root = (_this_parent = this.parent) == null ? void 0 : _this_parent.root) != null ? _this_parent_root : null;
+            }
+        },
+        {
+            key: "isDisposed",
+            get: function get() {
+                return this.disposed;
+            }
+        }
+    ]);
+    return Control;
+}();
+/** A Control that owns child Controls. */ var ContainerControl = /*#__PURE__*/ function(Control) {
+    _inherits(ContainerControl, Control);
+    function ContainerControl() {
+        var _this;
+        _this = Control.apply(this, arguments) || this;
+        _this.children = [];
+        return _this;
+    }
+    var _proto = ContainerControl.prototype;
+    _proto.addChild = function addChild(child) {
+        child.parent = this;
+        return child;
+    };
+    _proto.removeChild = function removeChild(child) {
+        if (child.parent === this) {
+            child.parent = null;
+        }
+    };
+    _proto.getChildIndex = function getChildIndex(child) {
+        return this.children.indexOf(child);
+    };
+    /** @internal */ _proto.changeChildIndex = function changeChildIndex(child, newIndex) {
+        var _this_root;
+        var oldIndex = this.children.indexOf(child);
+        if (oldIndex === newIndex || oldIndex === -1) {
+            return;
+        }
+        this.children.splice(oldIndex, 1);
+        if (newIndex < 0 || newIndex >= this.children.length) {
+            this.children.push(child);
+        } else {
+            this.children.splice(newIndex, 0, child);
+        }
+        (_this_root = this.root) == null ? void 0 : _this_root.controlTreeChanged();
+    };
+    /** @internal */ _proto.addChildInternal = function addChildInternal(child) {
+        if (!this.children.includes(child)) {
+            this.children.push(child);
+        }
+    };
+    /** @internal */ _proto.removeChildInternal = function removeChildInternal(child) {
+        var index = this.children.indexOf(child);
+        if (index !== -1) {
+            this.children.splice(index, 1);
+        }
+    };
+    _proto.drawSelf = function drawSelf() {
+        Control.prototype.draw.call(this);
+    };
+    _proto.draw = function draw() {
+        this.drawSelf();
+        this.drawChildren();
+    };
+    _proto.drawChildren = function drawChildren() {
+        var graphics = this.engine.graphics;
+        if (this.clipContents) ;
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
+            var child = _step.value;
+            if (!child.visible || child.isDisposed) {
+                continue;
+            }
+            graphics.pushTransform(child.getTransform2D());
+            child.draw();
+            graphics.popTransform();
+        }
+    };
+    _proto.update = function update(deltaTime) {
+        Control.prototype.update.call(this, deltaTime);
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.children.slice()), _step; !(_step = _iterator()).done;){
+            var child = _step.value;
+            if (child.enabled && !child.isDisposed) {
+                child.update(deltaTime);
+            }
+        }
+    };
+    _proto.dispose = function dispose() {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.children.slice()), _step; !(_step = _iterator()).done;){
+            var child = _step.value;
+            child.dispose();
+        }
+        Control.prototype.dispose.call(this);
+    };
+    return ContainerControl;
+}(Control);
+/** Base class for GUI tree roots and input dispatchers. */ var RootControl = /*#__PURE__*/ function(ContainerControl) {
+    _inherits(RootControl, ContainerControl);
+    function RootControl() {
+        return ContainerControl.apply(this, arguments);
+    }
+    return RootControl;
+}(ContainerControl);
+
+var _obj$3;
+var cursorNames = (_obj$3 = {}, _obj$3[exports.CursorShape.Arrow] = "default", _obj$3[exports.CursorShape.Ibeam] = "text", _obj$3[exports.CursorShape.PointingHand] = "pointer", _obj$3[exports.CursorShape.Cross] = "crosshair", _obj$3[exports.CursorShape.Wait] = "wait", _obj$3[exports.CursorShape.Busy] = "progress", _obj$3[exports.CursorShape.Drag] = "grab", _obj$3[exports.CursorShape.CanDrop] = "copy", _obj$3[exports.CursorShape.Forbidden] = "not-allowed", _obj$3[exports.CursorShape.Vsize] = "ns-resize", _obj$3[exports.CursorShape.Hsize] = "ew-resize", _obj$3[exports.CursorShape.Bdiagsize] = "nesw-resize", _obj$3[exports.CursorShape.Fdiagsize] = "nwse-resize", _obj$3[exports.CursorShape.Move] = "move", _obj$3[exports.CursorShape.Vsplit] = "row-resize", _obj$3[exports.CursorShape.Hsplit] = "col-resize", _obj$3[exports.CursorShape.Help] = "help", _obj$3);
+function getButtonMask(button) {
+    switch(button){
+        case exports.MouseButton.Left:
+            return exports.MouseButtonMask.Left;
+        case exports.MouseButton.Right:
+            return exports.MouseButtonMask.Right;
+        case exports.MouseButton.Middle:
+            return exports.MouseButtonMask.Middle;
+        case exports.MouseButton.Xbutton1:
+            return exports.MouseButtonMask.Xbutton1;
+        case exports.MouseButton.Xbutton2:
+            return exports.MouseButtonMask.Xbutton2;
+        default:
+            return exports.MouseButtonMask.None;
+    }
+}
+function isWheelButton(button) {
+    return button >= exports.MouseButton.WheelUp && button <= exports.MouseButton.WheelRight;
+}
+/** CanvasLayer-like boundary for a single UICanvas GUI tree. */ var CanvasRootControl = /*#__PURE__*/ function(ContainerControl) {
+    _inherits(CanvasRootControl, ContainerControl);
+    function CanvasRootControl(engine, canvas) {
+        var _this;
+        _this = ContainerControl.call(this, engine) || this;
+        _this.canvas = canvas;
+        _this.mouseFilter = exports.MouseFilter.Ignore;
+        _this.setSize(engine.canvas.width, engine.canvas.height);
+        return _this;
+    }
+    _create_class(CanvasRootControl, [
+        {
+            key: "inputDisabled",
+            get: function get() {
+                var _this_canvas_item;
+                return !this.canvas.receivesEvents || !this.canvas.enabled || !((_this_canvas_item = this.canvas.item) == null ? void 0 : _this_canvas_item.isActive);
+            }
+        }
+    ]);
+    return CanvasRootControl;
+}(ContainerControl);
+/** Global ordered collection of UICanvas roots. */ var CanvasContainer = /*#__PURE__*/ function(ContainerControl) {
+    _inherits(CanvasContainer, ContainerControl);
+    function CanvasContainer(engine) {
+        var _this;
+        _this = ContainerControl.call(this, engine) || this;
+        _this.mouseFilter = exports.MouseFilter.Ignore;
+        _this.setSize(engine.canvas.width, engine.canvas.height);
+        return _this;
+    }
+    var _proto = CanvasContainer.prototype;
+    _proto.sortCanvases = function sortCanvases() {
+        this.children.sort(function(left, right) {
+            return left.canvas.order - right.canvas.order;
+        });
+    };
+    _proto.addChildInternal = function addChildInternal(child) {
+        ContainerControl.prototype.addChildInternal.call(this, child);
+        this.sortCanvases();
+    };
+    _proto.draw = function draw() {
+        this.sortCanvases();
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
+            var child = _step.value;
+            var root = child;
+            if (root.canvas.isVisible) {
+                root.draw();
+            }
+        }
+    };
+    return CanvasContainer;
+}(ContainerControl);
+/** Engine window GUI root. Routes events across all UICanvas roots. */ var WindowRootControl = /*#__PURE__*/ function(RootControl) {
+    _inherits(WindowRootControl, RootControl);
+    function WindowRootControl(engine) {
+        var _this;
+        _this = RootControl.call(this, engine) || this;
+        _this.dragThreshold = 10;
+        _this.lastInput = null;
+        _this.gui = {
+            mouseFocus: null,
+            mouseClickGrabber: null,
+            mouseFocusMask: exports.MouseButtonMask.None,
+            mouseOver: null,
+            mouseOverHierarchy: [],
+            touchFocus: new Map(),
+            keyFocus: null,
+            dragAccum: new Vector2(),
+            dragAttempted: false,
+            dragging: false,
+            dragData: null,
+            dragMouseOver: null,
+            dragSuccessful: false,
+            lastMousePosition: new Vector2(Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY),
+            sendingMouseEnterExit: false,
+            mouseOverUpdatePending: false
+        };
+        _this.mouseFilter = exports.MouseFilter.Ignore;
+        _this.setSize(engine.canvas.width, engine.canvas.height);
+        _this.canvases = new CanvasContainer(engine);
+        _this.canvases.parent = _assert_this_initialized(_this);
+        return _this;
+    }
+    var _proto = WindowRootControl.prototype;
+    _proto.pushInput = function pushInput(event) {
+        event.clearAccepted();
+        this.lastInput = event;
+        this.cleanupInternalState();
+        this.processGUIInput(event);
+        this.postGrabClickFocus();
+    };
+    _proto.isInputHandled = function isInputHandled() {
+        var _this_lastInput;
+        var _this_lastInput_isAccepted;
+        return (_this_lastInput_isAccepted = (_this_lastInput = this.lastInput) == null ? void 0 : _this_lastInput.isAccepted()) != null ? _this_lastInput_isAccepted : false;
+    };
+    _proto.getMousePosition = function getMousePosition() {
+        return this.gui.lastMousePosition.clone();
+    };
+    _proto.guiGetFocusOwner = function guiGetFocusOwner() {
+        return this.isFocusTargetUsable(this.gui.keyFocus) ? this.gui.keyFocus : null;
+    };
+    _proto.guiReleaseFocus = function guiReleaseFocus() {
+        this.releaseControlFocus();
+    };
+    _proto.guiIsDragging = function guiIsDragging() {
+        return this.gui.dragging;
+    };
+    _proto.guiGetDragData = function guiGetDragData() {
+        return this.gui.dragData;
+    };
+    _proto.guiIsDragSuccessful = function guiIsDragSuccessful() {
+        return this.gui.dragSuccessful;
+    };
+    _proto.guiCancelDrag = function guiCancelDrag() {
+        this.endDragging(false);
+    };
+    _proto.grabControlFocus = function grabControlFocus(control) {
+        if (!this.isFocusTargetUsable(control) || this.gui.keyFocus === control) {
+            return;
+        }
+        var previous = this.gui.keyFocus;
+        this.gui.keyFocus = control;
+        if (previous && !previous.isDisposed) {
+            previous.onLostFocus();
+        }
+        control.onGotFocus();
+    };
+    _proto.grabControlClickFocus = function grabControlClickFocus(control) {
+        var _this = this;
+        if (this.isControlValid(control)) {
+            this.gui.mouseClickGrabber = control;
+            queueMicrotask(function() {
+                return _this.postGrabClickFocus();
+            });
+        }
+    };
+    _proto.releaseControlFocus = function releaseControlFocus(control) {
+        var previous = this.gui.keyFocus;
+        if (!previous || control && previous !== control) {
+            return;
+        }
+        this.gui.keyFocus = null;
+        if (!previous.isDisposed) {
+            previous.onLostFocus();
+        }
+    };
+    _proto.warpControlMouse = function warpControlMouse(position) {
+        this.gui.lastMousePosition.copyFrom(position);
+        this.updateMouseOver(position);
+        this.updateMouseCursorState();
+    };
+    _proto.updateMouseCursorState = function updateMouseCursorState() {
+        var position = this.gui.lastMousePosition;
+        var target = this.isControlUsable(this.gui.mouseFocus) ? this.gui.mouseFocus : this.isControlUsable(this.gui.mouseOver) ? this.gui.mouseOver : null;
+        this.updateCursor(target, position);
+    };
+    _proto.controlStateChanged = function controlStateChanged(control) {
+        if (!this.isControlUsable(control)) {
+            this.dropControlState(control);
+        }
+        this.requestMouseOverUpdate();
+    };
+    _proto.controlRemoved = function controlRemoved(control) {
+        this.dropControlState(control);
+        this.cleanupInternalState();
+        this.requestMouseOverUpdate();
+    };
+    _proto.controlTreeChanged = function controlTreeChanged() {
+        this.requestMouseOverUpdate();
+    };
+    _proto.cancelPointerInput = function cancelPointerInput() {
+        this.dropMouseFocus();
+        this.dropMouseOver();
+        this.gui.touchFocus.clear();
+        this.endDragging(false);
+        this.releaseControlFocus();
+    };
+    _proto.resize = function resize(width, height) {
+        this.setSize(width, height);
+        this.canvases.setSize(width, height);
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.canvases.children), _step; !(_step = _iterator()).done;){
+            var root = _step.value;
+            root.setSize(width, height);
+        }
+    };
+    _proto.render = function render() {
+        if (this.canvases.children.length === 0) {
+            return;
+        }
+        this.engine.graphics.begin();
+        this.draw();
+        this.engine.graphics.end();
+    };
+    _proto.update = function update(deltaTime) {
+        if (this.gui.mouseOverUpdatePending) {
+            this.gui.mouseOverUpdatePending = false;
+            this.updateMouseOver(this.gui.lastMousePosition);
         }
-        var rt = new RectTransform();
-        rt.engine = t.engine;
-        rt.name = t.name;
-        rt.position.copyFrom(t.position);
-        rt.quat.copyFrom(t.quat);
-        rt.rotation.copyFrom(t.rotation);
-        rt.scale.copyFrom(t.scale);
-        rt.size.copyFrom(t.size);
-        // 不拷贝源 anchor — 升级为 RectTransform 时使用默认 pivot=(0.5, 0.5)，
-        // 把 anchor 同步成 pivot * size，获得“中心轴心”默认行为
-        rt.anchor.set(rt.pivot.x * rt.size.x, rt.pivot.y * rt.size.y, t.anchor.z);
-        if (t.parentTransform) {
-            rt.parentTransform = t.parentTransform;
+        RootControl.prototype.update.call(this, deltaTime);
+    };
+    _proto.dispose = function dispose() {
+        this.cancelPointerInput();
+        RootControl.prototype.dispose.call(this);
+    };
+    _proto.processGUIInput = function processGUIInput(event) {
+        if (_instanceof1(event, InputEventKey)) {
+            var target = this.guiGetFocusOwner();
+            if (target) {
+                this.callControlInput(target, event);
+            }
+        } else if (_instanceof1(event, InputEventMouse)) {
+            this.gui.lastMousePosition.copyFrom(event.globalPosition);
+            this.updateMouseOver(event.globalPosition);
+            if (_instanceof1(event, InputEventMouseButton)) {
+                this.processMouseButton(event);
+            } else if (_instanceof1(event, InputEventMouseMotion)) {
+                this.processMouseMotion(event);
+            }
+        } else if (_instanceof1(event, InputEventScreenTouch)) {
+            this.processScreenTouch(event);
+        } else if (_instanceof1(event, InputEventScreenDrag)) {
+            this.processScreenDrag(event);
+        }
+    };
+    _proto.processMouseButton = function processMouseButton(event) {
+        if (isWheelButton(event.buttonIndex)) {
+            var target = this.findInputControl(event.globalPosition);
+            if (target) {
+                this.callGUIInput(target, event);
+            }
+            return;
+        }
+        var mask = getButtonMask(event.buttonIndex);
+        if (event.isPressed()) {
+            var target1 = this.gui.mouseFocusMask !== 0 ? this.gui.mouseFocus : this.findInputControl(event.globalPosition);
+            this.gui.mouseFocus = target1;
+            if (!target1) {
+                return;
+            }
+            this.gui.mouseFocusMask |= mask;
+            if (event.buttonIndex === exports.MouseButton.Left) {
+                this.gui.dragAccum.setZero();
+                this.gui.dragAttempted = false;
+                this.findClickFocus(target1);
+            }
+            this.callGUIInput(target1, event);
+        } else {
+            if (event.buttonIndex === exports.MouseButton.Left && this.gui.dragging) {
+                this.finishDrop(event.globalPosition);
+            }
+            this.gui.mouseFocusMask &= ~mask;
+            var target2 = this.gui.mouseFocus;
+            if (this.gui.mouseFocusMask === 0) {
+                this.gui.mouseFocus = null;
+            }
+            if (this.isControlUsable(target2)) {
+                this.callGUIInput(target2, event);
+            }
         }
-        return rt;
     };
-    return RectTransform;
-}(Transform);
+    _proto.processMouseMotion = function processMouseMotion(event) {
+        if (!this.gui.dragging && !this.gui.dragAttempted && this.gui.mouseFocus && (this.gui.mouseFocusMask & exports.MouseButtonMask.Left) !== 0) {
+            this.gui.dragAccum.add(event.relative);
+            if (this.gui.dragAccum.length() > this.dragThreshold) {
+                var origin = event.globalPosition.clone().subtract(this.gui.dragAccum);
+                this.beginDragging(this.gui.mouseFocus, origin);
+                this.gui.dragAttempted = true;
+            }
+        }
+        var target = this.isControlUsable(this.gui.mouseFocus) ? this.gui.mouseFocus : this.findInputControl(event.globalPosition);
+        if (target) {
+            this.callGUIInput(target, event);
+        }
+        if (this.gui.dragging) {
+            this.gui.dragMouseOver = this.findDropTarget(this.findInputControl(event.globalPosition), event.globalPosition);
+        }
+        this.updateCursor(target, event.globalPosition);
+    };
+    _proto.processScreenTouch = function processScreenTouch(event) {
+        var target;
+        if (event.isPressed()) {
+            target = this.findInputControl(event.position);
+            if (target) {
+                this.gui.touchFocus.set(event.index, target);
+            }
+        } else {
+            var _this_gui_touchFocus_get;
+            target = (_this_gui_touchFocus_get = this.gui.touchFocus.get(event.index)) != null ? _this_gui_touchFocus_get : null;
+            this.gui.touchFocus.delete(event.index);
+        }
+        if (this.isControlUsable(target)) {
+            this.callGUIInput(target, event);
+        }
+    };
+    _proto.processScreenDrag = function processScreenDrag(event) {
+        var _this_gui_touchFocus_get;
+        var target = (_this_gui_touchFocus_get = this.gui.touchFocus.get(event.index)) != null ? _this_gui_touchFocus_get : this.findInputControl(event.position);
+        if (this.isControlUsable(target)) {
+            this.callGUIInput(target, event);
+        }
+    };
+    _proto.callGUIInput = function callGUIInput(target, event) {
+        var current = target;
+        var pointerEvent = _instanceof1(event, InputEventMouse) || _instanceof1(event, InputEventScreenTouch) || _instanceof1(event, InputEventScreenDrag);
+        while(current && current !== this && this.isControlUsable(current)){
+            var filter = current.getEffectiveMouseFilter();
+            if (filter !== exports.MouseFilter.Ignore) {
+                var localEvent = event.xformedBy(this.getGlobalInverse(current));
+                this.callControlInput(current, localEvent);
+                if (localEvent.isAccepted()) {
+                    event.accept();
+                }
+            }
+            var forcePassWheel = _instanceof1(event, InputEventMouseButton) && isWheelButton(event.buttonIndex) && current.mouseForcePassScrollEvents;
+            if (event.isAccepted() || filter === exports.MouseFilter.Stop && pointerEvent && !forcePassWheel) {
+                event.accept();
+                return;
+            }
+            current = current.parent;
+        }
+    };
+    _proto.callControlInput = function callControlInput(control, event) {
+        if (_instanceof1(event, InputEventMouseButton)) {
+            if (isWheelButton(event.buttonIndex)) {
+                control.onMouseWheel(event);
+            } else if (event.isPressed()) {
+                control.onMouseDown(event);
+            } else {
+                control.onMouseUp(event);
+            }
+        } else if (_instanceof1(event, InputEventMouseMotion)) {
+            control.onMouseMove(event);
+        } else if (_instanceof1(event, InputEventScreenTouch)) {
+            if (event.isPressed()) {
+                control.onTouchDown(event);
+            } else {
+                control.onTouchUp(event);
+            }
+        } else if (_instanceof1(event, InputEventScreenDrag)) {
+            control.onTouchMove(event);
+        } else if (_instanceof1(event, InputEventKey)) {
+            if (event.isPressed()) {
+                control.onKeyDown(event);
+            } else if (event.isReleased()) {
+                control.onKeyUp(event);
+            }
+        }
+    };
+    _proto.findInputControl = function findInputControl(position) {
+        this.canvases.sortCanvases();
+        for(var index = this.canvases.children.length - 1; index >= 0; index--){
+            var root = this.canvases.children[index];
+            if (!root.canvas.isVisible || root.inputDisabled) {
+                continue;
+            }
+            var target = this.findControlAtPosition(root, position, true);
+            if (target) {
+                return target;
+            }
+        }
+        return null;
+    };
+    _proto.findControlAtPosition = function findControlAtPosition(container, position, skipSelf) {
+        if (skipSelf === void 0) skipSelf = false;
+        if (!container.visibleInHierarchy || container.isDisposed) {
+            return null;
+        }
+        var localPosition = this.toLocal(container, position);
+        if (container.clipContents && !container.hasPoint(localPosition)) {
+            return null;
+        }
+        for(var index = container.children.length - 1; index >= 0; index--){
+            var child = container.children[index];
+            if (!child.visibleInHierarchy || child.isDisposed) {
+                continue;
+            }
+            if (_instanceof1(child, ContainerControl)) {
+                var found = this.findControlAtPosition(child, position);
+                if (found) {
+                    return found;
+                }
+            } else if (child.getEffectiveMouseFilter() !== exports.MouseFilter.Ignore && child.hasPoint(this.toLocal(child, position))) {
+                return child;
+            }
+        }
+        if (!skipSelf && container.getEffectiveMouseFilter() !== exports.MouseFilter.Ignore && container.hasPoint(localPosition)) {
+            return container;
+        }
+        return null;
+    };
+    _proto.updateMouseOver = function updateMouseOver(position) {
+        if (this.gui.sendingMouseEnterExit) {
+            this.gui.mouseOverUpdatePending = true;
+            return;
+        }
+        this.gui.mouseOverUpdatePending = false;
+        var target = this.findInputControl(position);
+        var next = this.buildHoverHierarchy(target);
+        var previous = this.gui.mouseOverHierarchy;
+        var common = 0;
+        while(common < previous.length && common < next.length && previous[common] === next[common]){
+            common++;
+        }
+        this.gui.sendingMouseEnterExit = true;
+        for(var index = previous.length - 1; index >= common; index--){
+            if (!previous[index].isDisposed) {
+                previous[index].onMouseLeave();
+            }
+        }
+        for(var index1 = common; index1 < next.length; index1++){
+            next[index1].onMouseEnter(this.toLocal(next[index1], position));
+        }
+        this.gui.sendingMouseEnterExit = false;
+        this.gui.mouseOver = target;
+        this.gui.mouseOverHierarchy = next;
+    };
+    _proto.buildHoverHierarchy = function buildHoverHierarchy(target) {
+        var hierarchy = [];
+        var current = target;
+        while(current && current !== this){
+            if (current.getEffectiveMouseFilter() !== exports.MouseFilter.Ignore) {
+                hierarchy.push(current);
+            }
+            if (current.getEffectiveMouseFilter() === exports.MouseFilter.Stop) {
+                break;
+            }
+            current = current.parent;
+        }
+        hierarchy.reverse();
+        return hierarchy;
+    };
+    _proto.findClickFocus = function findClickFocus(target) {
+        var current = target;
+        while(current && current !== this){
+            var mode = current.getFocusModeWithOverride();
+            if (mode === exports.FocusMode.Click || mode === exports.FocusMode.All) {
+                this.grabControlFocus(current);
+                return;
+            }
+            if (current.getEffectiveMouseFilter() === exports.MouseFilter.Stop) {
+                return;
+            }
+            current = current.parent;
+        }
+    };
+    _proto.beginDragging = function beginDragging(source, position) {
+        var current = source;
+        while(current && current !== this){
+            var data = current.invokeGetDragData(this.toLocal(current, position));
+            if (data !== null && data !== undefined) {
+                this.gui.dragging = true;
+                this.gui.dragData = data;
+                this.gui.mouseFocus = null;
+                this.gui.mouseFocusMask = exports.MouseButtonMask.None;
+                return;
+            }
+            if (current.getEffectiveMouseFilter() === exports.MouseFilter.Stop) {
+                return;
+            }
+            current = current.parent;
+        }
+    };
+    _proto.finishDrop = function finishDrop(position) {
+        var target = this.findDropTarget(this.findInputControl(position), position);
+        if (target) {
+            target.invokeDropData(this.toLocal(target, position), this.gui.dragData);
+        }
+        this.endDragging(!!target);
+    };
+    _proto.findDropTarget = function findDropTarget(target, position) {
+        var current = target;
+        while(current && current !== this){
+            if (current.invokeCanDropData(this.toLocal(current, position), this.gui.dragData)) {
+                return current;
+            }
+            if (current.getEffectiveMouseFilter() === exports.MouseFilter.Stop) {
+                return null;
+            }
+            current = current.parent;
+        }
+        return null;
+    };
+    _proto.endDragging = function endDragging(successful) {
+        this.gui.dragSuccessful = successful;
+        this.gui.dragging = false;
+        this.gui.dragData = null;
+        this.gui.dragMouseOver = null;
+    };
+    _proto.updateCursor = function updateCursor(target, position) {
+        var current = target;
+        var cursor = exports.CursorShape.Arrow;
+        while(current && current !== this){
+            var candidate = current.getCursorShape(this.toLocal(current, position));
+            if (candidate !== exports.CursorShape.Arrow) {
+                cursor = candidate;
+                break;
+            }
+            if (current.getEffectiveMouseFilter() === exports.MouseFilter.Stop) {
+                break;
+            }
+            current = current.parent;
+        }
+        this.engine.canvas.style.cursor = typeof cursor === "string" ? cursor : cursorNames[cursor];
+    };
+    _proto.postGrabClickFocus = function postGrabClickFocus() {
+        var target = this.gui.mouseClickGrabber;
+        this.gui.mouseClickGrabber = null;
+        if (this.isControlUsable(target)) {
+            this.gui.mouseFocus = target;
+        }
+    };
+    _proto.cleanupInternalState = function cleanupInternalState() {
+        if (!this.isControlUsable(this.gui.mouseFocus)) {
+            this.dropMouseFocus();
+        }
+        if (this.gui.keyFocus && !this.isFocusTargetUsable(this.gui.keyFocus)) {
+            this.releaseControlFocus(this.gui.keyFocus);
+        }
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.gui.touchFocus), _step; !(_step = _iterator()).done;){
+            var _step_value = _step.value, index = _step_value[0], control = _step_value[1];
+            if (!this.isControlUsable(control)) {
+                this.gui.touchFocus.delete(index);
+            }
+        }
+    };
+    _proto.dropMouseFocus = function dropMouseFocus() {
+        this.gui.mouseFocus = null;
+        this.gui.mouseFocusMask = exports.MouseButtonMask.None;
+    };
+    _proto.dropMouseOver = function dropMouseOver() {
+        for(var index = this.gui.mouseOverHierarchy.length - 1; index >= 0; index--){
+            var control = this.gui.mouseOverHierarchy[index];
+            if (!control.isDisposed) {
+                control.onMouseLeave();
+            }
+        }
+        this.gui.mouseOver = null;
+        this.gui.mouseOverHierarchy = [];
+    };
+    _proto.dropControlState = function dropControlState(control) {
+        if (this.controlBelongsToSubtree(this.gui.mouseFocus, control)) {
+            this.dropMouseFocus();
+        }
+        if (this.controlBelongsToSubtree(this.gui.mouseClickGrabber, control)) {
+            this.gui.mouseClickGrabber = null;
+        }
+        if (this.controlBelongsToSubtree(this.gui.keyFocus, control)) {
+            var _this_gui_keyFocus;
+            this.releaseControlFocus((_this_gui_keyFocus = this.gui.keyFocus) != null ? _this_gui_keyFocus : undefined);
+        }
+        if (this.controlBelongsToSubtree(this.gui.mouseOver, control)) {
+            this.dropMouseOver();
+        }
+        if (this.controlBelongsToSubtree(this.gui.dragMouseOver, control)) {
+            this.gui.dragMouseOver = null;
+        }
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.gui.touchFocus), _step; !(_step = _iterator()).done;){
+            var _step_value = _step.value, index = _step_value[0], target = _step_value[1];
+            if (this.controlBelongsToSubtree(target, control)) {
+                this.gui.touchFocus.delete(index);
+            }
+        }
+    };
+    _proto.requestMouseOverUpdate = function requestMouseOverUpdate() {
+        if (Number.isFinite(this.gui.lastMousePosition.x)) {
+            this.updateMouseOver(this.gui.lastMousePosition);
+        }
+    };
+    _proto.getGlobalInverse = function getGlobalInverse(control) {
+        var transform = control.getGlobalTransform2D().clone();
+        return Math.abs(transform.determinant()) < 1e-12 ? new Matrix3() : transform.invert();
+    };
+    _proto.toLocal = function toLocal(control, position) {
+        var elements = this.getGlobalInverse(control).elements;
+        return new Vector2(elements[0] * position.x + elements[3] * position.y + elements[6], elements[1] * position.x + elements[4] * position.y + elements[7]);
+    };
+    _proto.controlBelongsToSubtree = function controlBelongsToSubtree(control, subtree) {
+        var current = control;
+        while(current){
+            if (current === subtree) {
+                return true;
+            }
+            current = current.parent;
+        }
+        return false;
+    };
+    _proto.isControlValid = function isControlValid(control) {
+        return !!control && !control.isDisposed && control.root === this;
+    };
+    _proto.isControlUsable = function isControlUsable(control) {
+        if (!this.isControlValid(control) || !control.visibleInHierarchy || !control.enabledInHierarchy) {
+            return false;
+        }
+        var root = this.findCanvasRoot(control);
+        return !root || !root.inputDisabled;
+    };
+    _proto.findCanvasRoot = function findCanvasRoot(control) {
+        var current = control;
+        while(current && current !== this){
+            if (_instanceof1(current, CanvasRootControl)) {
+                return current;
+            }
+            current = current.parent;
+        }
+        return null;
+    };
+    _proto.isFocusTargetUsable = function isFocusTargetUsable(control) {
+        return this.isControlUsable(control) && control.getFocusModeWithOverride() !== exports.FocusMode.None;
+    };
+    return WindowRootControl;
+}(RootControl);
+
+exports.CanvasRenderMode = void 0;
+(function(CanvasRenderMode) {
+    CanvasRenderMode[CanvasRenderMode["ScreenSpace"] = 0] = "ScreenSpace";
+    CanvasRenderMode[CanvasRenderMode["CameraSpace"] = 1] = "CameraSpace";
+    CanvasRenderMode[CanvasRenderMode["WorldSpace"] = 2] = "WorldSpace";
+    CanvasRenderMode[CanvasRenderMode["WorldSpaceFaceCamera"] = 3] = "WorldSpaceFaceCamera";
+})(exports.CanvasRenderMode || (exports.CanvasRenderMode = {}));
+/** Canvas-layer boundary attached to a VFXItem. Input state remains owned by the window root. */ var UICanvas = /*#__PURE__*/ function(Component) {
+    _inherits(UICanvas, Component);
+    function UICanvas(engine) {
+        var _this;
+        _this = Component.call(this, engine) || this;
+        _this.renderMode = 0;
+        _this.receivesEvents = true;
+        _this._order = 0;
+        _this.registered = false;
+        _this.rootControl = new CanvasRootControl(engine, _assert_this_initialized(_this));
+        return _this;
+    }
+    var _proto = UICanvas.prototype;
+    _proto.onEnable = function onEnable() {
+        this.register();
+    };
+    _proto.onDisable = function onDisable() {
+        this.unregister();
+    };
+    _proto.onDestroy = function onDestroy() {
+        this.destroyCanvas();
+    };
+    _proto.dispose = function dispose() {
+        this.destroyCanvas();
+        Component.prototype.dispose.call(this);
+    };
+    _proto.register = function register() {
+        if (!this.registered) {
+            this.rootControl.parent = this.engine.windowRoot.canvases;
+            this.registered = true;
+        }
+    };
+    _proto.unregister = function unregister() {
+        if (this.registered) {
+            this.rootControl.parent = null;
+            this.registered = false;
+        }
+    };
+    _proto.destroyCanvas = function destroyCanvas() {
+        this.unregister();
+        if (!this.rootControl.isDisposed) {
+            this.rootControl.dispose();
+        }
+    };
+    _create_class(UICanvas, [
+        {
+            key: "order",
+            get: function get() {
+                return this._order;
+            },
+            set: function set(value) {
+                if (this._order !== value) {
+                    this._order = value;
+                    this.engine.windowRoot.canvases.sortCanvases();
+                }
+            }
+        },
+        {
+            key: "isVisible",
+            get: function get() {
+                var _this_item;
+                return this.renderMode === 0 && this.enabled && !!((_this_item = this.item) == null ? void 0 : _this_item.isActive);
+            }
+        }
+    ]);
+    return UICanvas;
+}(Component);
 
 /**
- * 锚点布局组件
- *
- * `Control extends CanvasItem`。CanvasItem 仅承担绘制与节点层级，Control 在挂到 VFXItem 时把
- * `item.transform` 升级为 {@link RectTransform}。
- *
- * 布局完全由 RectTransform 自治:父子节点关系沿 `Transform.parentTransform / children` 走，
- * 父节点 size 变化时通过 `RectTransform.sizeChanged()` 直接调用子节点 sizeChanged 链式传播。
- * Control 本身不持有任何与布局相关的状态
- */ var Control = /*#__PURE__*/ function(CanvasItem) {
-    _inherits(Control, CanvasItem);
-    function Control() {
-        return CanvasItem.apply(this, arguments);
+ * Scene-tree bridge for a GUI Control. The VFXItem tree owns lifecycle and
+ * serialization while the Control tree owns layout, drawing and input.
+ */ var UIControl = /*#__PURE__*/ function(Component) {
+    _inherits(UIControl, Component);
+    function UIControl(engine) {
+        var _this;
+        _this = Component.call(this, engine) || this;
+        _this.controlNode = null;
+        _this.linkedItemTransform = null;
+        _this.linkedControl = null;
+        _this.syncingLocation = false;
+        _this.itemTransformChanged = function() {
+            return _this.syncItemLocationToControl();
+        };
+        _this.controlLocationChanged = function() {
+            return _this.syncControlLocationToItem();
+        };
+        return _this;
     }
-    var _proto = Control.prototype;
-    /**
-   * 在挂到 VFXItem 时确保 `item.transform` 是 `RectTransform`。
-   * 既有 Transform 状态(position / rotation / scale / size / anchor 等)通过 `RectTransform.fromTransform` 复制
-   */ _proto.onAwake = function onAwake() {
-        var item = this.item;
-        if (!_instanceof1(item.transform, RectTransform)) {
-            item.transform = RectTransform.fromTransform(item.transform);
+    var _proto = UIControl.prototype;
+    _proto.onAwake = function onAwake() {
+        this.syncControl();
+    };
+    _proto.onEnable = function onEnable() {
+        if (this.controlNode) {
+            this.controlNode.visible = this.item.isActive;
+            this.controlNode.enabled = true;
         }
     };
-    return Control;
-}(CanvasItem);
+    _proto.onDisable = function onDisable() {
+        if (this.controlNode) {
+            this.controlNode.visible = this.item.isActive;
+            this.controlNode.enabled = false;
+        }
+    };
+    _proto.onParentChanged = function onParentChanged() {
+        this.syncControl();
+    };
+    _proto.onOrderInParentChanged = function onOrderInParentChanged() {
+        this.syncControlOrder();
+    };
+    _proto.onDestroy = function onDestroy() {
+        this.disposeControl();
+    };
+    _proto.dispose = function dispose() {
+        this.disposeControl();
+        Component.prototype.dispose.call(this);
+    };
+    /** Unlinks the GUI object without disposing or modifying it. */ _proto.unlinkControl = function unlinkControl() {
+        if (this.controlNode) {
+            this.unbindLocationSync();
+            this.controlNode = null;
+        }
+    };
+    _proto.disposeControl = function disposeControl() {
+        var control = this.controlNode;
+        if (control) {
+            this.unbindLocationSync();
+            this.controlNode = null;
+            control.dispose();
+        }
+    };
+    _proto.syncControl = function syncControl() {
+        var control = this.controlNode;
+        if (!control || !this.item) {
+            return;
+        }
+        this.syncingLocation = true;
+        try {
+            control.visible = this.item.isActive;
+            control.enabled = this.enabled;
+            control.parent = this.resolveParent();
+            this.syncControlOrder();
+            this.copyItemLocationToControl();
+        } finally{
+            this.syncingLocation = false;
+        }
+        this.bindLocationSync();
+    };
+    _proto.syncControlOrder = function syncControlOrder() {
+        if (this.controlNode && this.item) {
+            this.controlNode.indexInParent = this.item.orderInParent;
+        }
+    };
+    _proto.resolveParent = function resolveParent() {
+        var parentItem = this.item.parent;
+        if (!parentItem) {
+            var _UIControl_fallbackParentGetDelegate;
+            return (_UIControl_fallbackParentGetDelegate = UIControl.fallbackParentGetDelegate == null ? void 0 : UIControl.fallbackParentGetDelegate.call(UIControl, this)) != null ? _UIControl_fallbackParentGetDelegate : null;
+        }
+        var uiControl = parentItem.getComponent(UIControl);
+        if ((uiControl == null ? void 0 : uiControl.control) && "children" in uiControl.control) {
+            return uiControl.control;
+        }
+        var canvas = parentItem.getComponent(UICanvas);
+        var _canvas_rootControl, _ref;
+        return (_ref = (_canvas_rootControl = canvas == null ? void 0 : canvas.rootControl) != null ? _canvas_rootControl : UIControl.fallbackParentGetDelegate == null ? void 0 : UIControl.fallbackParentGetDelegate.call(UIControl, this)) != null ? _ref : null;
+    };
+    _proto.bindLocationSync = function bindLocationSync() {
+        var itemTransform = this.item.transform;
+        var control = this.controlNode;
+        if (this.linkedItemTransform === itemTransform && this.linkedControl === control) {
+            return;
+        }
+        this.unbindLocationSync();
+        if (control) {
+            this.linkedItemTransform = itemTransform;
+            this.linkedControl = control;
+            itemTransform.on("changed", this.itemTransformChanged);
+            control.on("locationChanged", this.controlLocationChanged);
+        }
+    };
+    _proto.unbindLocationSync = function unbindLocationSync() {
+        var _this_linkedItemTransform, _this_linkedControl;
+        (_this_linkedItemTransform = this.linkedItemTransform) == null ? void 0 : _this_linkedItemTransform.off("changed", this.itemTransformChanged);
+        (_this_linkedControl = this.linkedControl) == null ? void 0 : _this_linkedControl.off("locationChanged", this.controlLocationChanged);
+        this.linkedItemTransform = null;
+        this.linkedControl = null;
+    };
+    _proto.syncItemLocationToControl = function syncItemLocationToControl() {
+        if (!this.syncingLocation && this.controlNode) {
+            this.syncingLocation = true;
+            try {
+                this.copyItemLocationToControl();
+            } finally{
+                this.syncingLocation = false;
+            }
+        }
+    };
+    _proto.syncControlLocationToItem = function syncControlLocationToItem() {
+        var control = this.controlNode;
+        if (!this.syncingLocation && control) {
+            var source = control.location;
+            var target = this.item.transform.position;
+            if (source.x !== target.x || source.y !== target.y) {
+                this.syncingLocation = true;
+                try {
+                    this.item.transform.setPosition(source.x, source.y, target.z);
+                } finally{
+                    this.syncingLocation = false;
+                }
+            }
+        }
+    };
+    _proto.copyItemLocationToControl = function copyItemLocationToControl() {
+        var control = this.controlNode;
+        if (control) {
+            var source = this.item.transform.position;
+            var target = control.location;
+            if (source.x !== target.x || source.y !== target.y) {
+                control.setPosition(source.x, source.y);
+            }
+        }
+    };
+    _create_class(UIControl, [
+        {
+            key: "control",
+            get: function get() {
+                return this.controlNode;
+            },
+            set: function set(value) {
+                if (value === this.controlNode) {
+                    return;
+                }
+                this.disposeControl();
+                if (value) {
+                    if (value.owner && value.owner !== this && value.owner.control === value) {
+                        throw new Error("A Control can only be owned by one UIControl.");
+                    }
+                    this.controlNode = value;
+                    value.owner = this;
+                    this.syncControl();
+                }
+            }
+        },
+        {
+            key: "hasControl",
+            get: function get() {
+                return this.controlNode !== null;
+            }
+        }
+    ]);
+    return UIControl;
+}(Component);
 
 exports.CameraController = /*#__PURE__*/ function(Component) {
     _inherits(CameraController, Component);
@@ -25354,42 +26640,6 @@ exports.CameraController = __decorate([
     effectsClass(DataType.CameraController)
 ], exports.CameraController);
 
-function _get_prototype_of(o) {
-    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
-        return o.__proto__ || Object.getPrototypeOf(o);
-    };
-    return _get_prototype_of(o);
-}
-
-function _is_native_function(fn) {
-    return Function.toString.call(fn).indexOf("[native code]") !== -1;
-}
-
-function _wrap_native_super(Class) {
-    var _cache = typeof Map === "function" ? new Map() : undefined;
-    _wrap_native_super = function _wrap_native_super(Class) {
-        if (Class === null || !_is_native_function(Class)) return Class;
-        if (typeof Class !== "function") throw new TypeError("Super expression must either be null or a function");
-        if (typeof _cache !== "undefined") {
-            if (_cache.has(Class)) return _cache.get(Class);
-            _cache.set(Class, Wrapper);
-        }
-        function Wrapper() {
-            return _construct(Class, arguments, _get_prototype_of(this).constructor);
-        }
-        Wrapper.prototype = Object.create(Class.prototype, {
-            constructor: {
-                value: Wrapper,
-                enumerable: false,
-                writable: true,
-                configurable: true
-            }
-        });
-        return _set_prototype_of(Wrapper, Class);
-    };
-    return _wrap_native_super(Class);
-}
-
 var CameraVFXItemLoader = /*#__PURE__*/ function(Plugin) {
     _inherits(CameraVFXItemLoader, Plugin);
     function CameraVFXItemLoader() {
@@ -25410,142 +26660,202 @@ exports.PointerEventType = void 0;
 })(exports.PointerEventType || (exports.PointerEventType = {}));
 var EventSystem = /*#__PURE__*/ function() {
     function EventSystem(engine, allowPropagation) {
+        var _this = this;
         if (allowPropagation === void 0) allowPropagation = false;
         this.engine = engine;
         this.allowPropagation = allowPropagation;
-        this.enabled = true;
         this.skipPointerMovePicking = true;
+        this.emulateMouseFromTouch = true;
+        this.emulateTouchFromMouse = false;
+        this._enabled = true;
         this.handlers = {};
-        this.nativeHandlers = {};
+        this.nativeHandlers = [];
         this.target = null;
-    }
-    var _proto = EventSystem.prototype;
-    _proto.bindListeners = function bindListeners(target) {
-        var _this = this;
-        this.target = target;
-        var x;
-        var y;
-        var currentTouch;
-        var lastTouch;
-        var getTouch;
-        getTouch = function(event) {
-            return event;
+        this.mouseState = null;
+        this.touchStates = new Map();
+        this.mouseFromTouchIndex = null;
+        this.touchFromMousePressed = false;
+        this.addedTabIndex = false;
+        this.addedOutlineStyle = false;
+        this.onNativeWheel = function(event) {
+            if (!_this.enabled || !_this.target) {
+                return;
+            }
+            var position = _this.getCanvasPosition(event.clientX, event.clientY);
+            var handled = false;
+            if (event.deltaY !== 0) {
+                handled = _this.pushWheelButton(event.deltaY < 0 ? exports.MouseButton.WheelUp : exports.MouseButton.WheelDown, Math.abs(event.deltaY), position, event) || handled;
+            }
+            if (event.deltaX !== 0) {
+                handled = _this.pushWheelButton(event.deltaX < 0 ? exports.MouseButton.WheelLeft : exports.MouseButton.WheelRight, Math.abs(event.deltaX), position, event) || handled;
+            }
+            _this.consumeNativeEvent(event, handled);
         };
-        var touchstart = "mousedown";
-        var touchmove = "mousemove";
-        var touchend = "mouseup";
-        var touchcancel = "mouseleave";
-        var getTouchEventValue = function(event, x, y, dx, dy) {
-            if (dx === void 0) dx = 0;
-            if (dy === void 0) dy = 0;
-            var vx = 0;
-            var vy = 0;
-            var ts = performance.now();
-            if (!_this.target) {
-                logger.warn("Trigger TouchEvent after EventSystem is disposed.");
-                return {
-                    x: x,
-                    y: y,
-                    vx: 0,
-                    vy: vy,
-                    dx: dx,
-                    dy: dy,
-                    ts: ts,
-                    width: 0,
-                    height: 0,
-                    origin: event
-                };
+        this.onNativeKeyDown = function(event) {
+            _this.handleNativeKey(event, true);
+        };
+        this.onNativeKeyUp = function(event) {
+            _this.handleNativeKey(event, false);
+        };
+        this.onNativeMouseDown = function(event) {
+            _this.handleNativeMouseDown(event);
+        };
+        this.onNativeMouseMove = function(event) {
+            var _state;
+            if (!_this.enabled || !_this.target) {
+                return;
             }
-            var _this_target = _this.target, width = _this_target.width, height = _this_target.height;
-            if (lastTouch) {
-                var dt = ts - lastTouch.ts;
-                vx = (dx - lastTouch.dx) / dt || 0;
-                vy = (dy - lastTouch.dy) / dt || 0;
-                lastTouch = {
-                    dx: dx,
-                    dy: dy,
-                    ts: ts
-                };
+            var position = _this.getCanvasPosition(event.clientX, event.clientY);
+            var _this_mouseState;
+            var state = (_this_mouseState = _this.mouseState) != null ? _this_mouseState : _this.createPointerState(position);
+            _this.mouseState = state;
+            var relative = new Vector2(position.x - state.last.x, position.y - state.last.y);
+            var velocity = _this.getVelocity(state, position);
+            var handled = _this.pushNativeMouseMotion(event, position, relative, velocity);
+            (_state = state).controlHandled || (_state.controlHandled = handled);
+            if (!handled && (!state.pressed || !state.controlHandled)) {
+                var pointerEvent = _this.createPointerEvent(event, position, state, velocity);
+                _this.dispatchEvent(EVENT_TYPE_TOUCH_MOVE, pointerEvent);
+            }
+            _this.updatePointerState(state, position);
+            _this.consumeNativeEvent(event, handled);
+        };
+        this.onNativeMouseUp = function(event) {
+            if (!_this.enabled || !_this.target) {
+                return;
             }
-            return {
-                x: x,
-                y: y,
-                vx: vx,
-                vy: vy,
-                dx: dx,
-                dy: dy,
-                ts: ts,
-                width: width,
-                height: height,
-                origin: event
-            };
+            var position = _this.getCanvasPosition(event.clientX, event.clientY);
+            var existingState = _this.mouseState;
+            if (!(existingState == null ? void 0 : existingState.pressed)) {
+                return;
+            }
+            var state = existingState;
+            var handled = _this.pushNativeMouseButton(event, position, false);
+            var pointerEvent = _this.createPointerEvent(event, position, state);
+            if (!state.controlHandled && !handled && _this.isClick(state, position)) {
+                _this.dispatchEvent(EVENT_TYPE_CLICK, pointerEvent);
+            }
+            if (!handled && !state.controlHandled) {
+                _this.dispatchEvent(EVENT_TYPE_TOUCH_END, pointerEvent);
+            }
+            _this.mouseState = null;
+            _this.consumeNativeEvent(event, handled || state.controlHandled || !_this.allowPropagation);
         };
-        if (isSimulatorCellPhone()) {
-            getTouch = function(event) {
-                var touches = event.touches, changedTouches = event.changedTouches;
-                return touches[0] || changedTouches[0];
-            };
-            touchstart = "touchstart";
-            touchmove = "touchmove";
-            touchend = "touchend";
-            touchcancel = "touchcancel";
-        }
-        var _obj;
-        this.nativeHandlers = (_obj = {}, _obj[touchstart] = function(event) {
-            if (_this.enabled) {
-                var touch = getTouch(event);
-                var cood = getCoord(touch);
-                x = cood.x;
-                y = cood.y;
-                lastTouch = currentTouch = {
-                    clientX: touch.clientX,
-                    clientY: touch.clientY,
-                    ts: performance.now(),
-                    x: x,
-                    y: y
-                };
-                _this.dispatchEvent(EVENT_TYPE_TOUCH_START, getTouchEventValue(event, x, y));
-            }
-        }, _obj[touchmove] = function(event) {
-            if (currentTouch && _this.enabled) {
-                var cood = getCoord(getTouch(event));
-                x = cood.x;
-                y = cood.y;
-                _this.dispatchEvent(EVENT_TYPE_TOUCH_MOVE, getTouchEventValue(event, x, y, x - currentTouch.x, y - currentTouch.y));
-            }
-        }, _obj[touchend] = function(event) {
-            if (currentTouch && _this.enabled) {
-                if (!_this.allowPropagation && event.cancelable) {
-                    event.preventDefault();
-                    event.stopPropagation();
+        this.onNativeTouchStart = function(event) {
+            if (!_this.enabled) {
+                return;
+            }
+            _this.focusTarget();
+            for(var _iterator = _create_for_of_iterator_helper_loose(Array.from(event.changedTouches)), _step; !(_step = _iterator()).done;){
+                var touch = _step.value;
+                var position = _this.getCanvasPosition(touch.clientX, touch.clientY);
+                var state = _this.createPointerState(position);
+                _this.touchStates.set(touch.identifier, state);
+                state.pressed = true;
+                var handled = _this.pushNativeScreenTouch(touch.identifier, position, true, false, false);
+                state.controlHandled = handled;
+                if (!handled) {
+                    var pointerEvent = _this.createPointerEvent(event, position, state);
+                    _this.dispatchEvent(EVENT_TYPE_TOUCH_START, pointerEvent);
                 }
-                var touch = getTouch(event);
-                var cood = getCoord(touch);
-                var dt = Math.abs(currentTouch.clientX - touch.clientX) + Math.abs(currentTouch.clientY - touch.clientY);
-                x = cood.x;
-                y = cood.y;
-                if (dt < 4) {
-                    _this.dispatchEvent(EVENT_TYPE_CLICK, getTouchEventValue(event, x, y));
+                _this.consumeNativeEvent(event, handled);
+            }
+            _this.preventTouchDefaults(event);
+        };
+        this.onNativeTouchMove = function(event) {
+            if (!_this.enabled) {
+                return;
+            }
+            for(var _iterator = _create_for_of_iterator_helper_loose(Array.from(event.changedTouches)), _step; !(_step = _iterator()).done;){
+                var touch = _step.value;
+                var _state;
+                var position = _this.getCanvasPosition(touch.clientX, touch.clientY);
+                var _this_touchStates_get;
+                var state = (_this_touchStates_get = _this.touchStates.get(touch.identifier)) != null ? _this_touchStates_get : _this.createPointerState(position);
+                _this.touchStates.set(touch.identifier, state);
+                var relative = new Vector2(position.x - state.last.x, position.y - state.last.y);
+                var velocity = _this.getVelocity(state, position);
+                var handled = _this.pushNativeScreenDrag(touch.identifier, position, relative, velocity);
+                (_state = state).controlHandled || (_state.controlHandled = handled);
+                if (!handled && !state.controlHandled) {
+                    var pointerEvent = _this.createPointerEvent(event, position, state, velocity);
+                    _this.dispatchEvent(EVENT_TYPE_TOUCH_MOVE, pointerEvent);
                 }
-                _this.dispatchEvent(EVENT_TYPE_TOUCH_END, getTouchEventValue(event, x, y, x - currentTouch.x, y - currentTouch.y));
-            }
-            currentTouch = 0;
-        }, _obj);
-        this.nativeHandlers[touchcancel] = this.nativeHandlers[touchend];
-        Object.keys(this.nativeHandlers).forEach(function(name) {
-            var _this_target;
-            (_this_target = _this.target) == null ? void 0 : _this_target.addEventListener(String(name), _this.nativeHandlers[name]);
+                _this.updatePointerState(state, position);
+                _this.consumeNativeEvent(event, handled);
+            }
+            _this.preventTouchDefaults(event);
+        };
+        this.onNativeTouchEnd = function(event) {
+            _this.handleNativeTouchEnd(event, false);
+        };
+        this.onNativeTouchCancel = function(event) {
+            _this.handleNativeTouchEnd(event, true);
+        };
+        this.onWindowBlur = function() {
+            if (_this.enabled) {
+                _this.mouseState = null;
+                _this.touchStates.clear();
+                _this.mouseFromTouchIndex = null;
+                _this.touchFromMousePressed = false;
+                _this.engine.windowRoot.cancelPointerInput();
+            }
+        };
+    }
+    var _proto = EventSystem.prototype;
+    _proto.bindListeners = function bindListeners(target) {
+        this.unbindListeners();
+        this.target = target;
+        if (!target || typeof window === "undefined") {
+            return;
+        }
+        if (!target.hasAttribute("tabindex")) {
+            target.tabIndex = 0;
+            this.addedTabIndex = true;
+        }
+        if (!target.style.outline) {
+            target.style.outline = "none";
+            this.addedOutlineStyle = true;
+        }
+        this.addNativeHandler(target, "mousedown", this.onNativeMouseDown);
+        // The Window listener runs after the event reaches the host container, so keep a
+        // target listener to preserve notifyTouch/allowPropagation for in-canvas releases.
+        this.addNativeHandler(target, "mouseup", this.onNativeMouseUp);
+        this.addNativeHandler(window, "mouseup", this.onNativeMouseUp);
+        this.addNativeHandler(window, "pointermove", this.onNativeMouseMove);
+        this.addNativeHandler(target, "touchstart", this.onNativeTouchStart, {
+            passive: false
+        });
+        this.addNativeHandler(target, "touchmove", this.onNativeTouchMove, {
+            passive: false
+        });
+        this.addNativeHandler(target, "touchend", this.onNativeTouchEnd, {
+            passive: false
+        });
+        this.addNativeHandler(target, "touchcancel", this.onNativeTouchCancel, {
+            passive: false
         });
-        this.addEventListener(EVENT_TYPE_CLICK, this.onClick.bind(this));
-        this.addEventListener(EVENT_TYPE_TOUCH_START, this.onPointerDown.bind(this));
-        this.addEventListener(EVENT_TYPE_TOUCH_END, this.onPointerUp.bind(this));
-        this.addEventListener(EVENT_TYPE_TOUCH_MOVE, this.onPointerMove.bind(this));
+        this.addNativeHandler(target, "wheel", this.onNativeWheel, {
+            passive: false
+        });
+        this.addNativeHandler(target, "keydown", this.onNativeKeyDown);
+        this.addNativeHandler(target, "keyup", this.onNativeKeyUp);
+        this.addNativeHandler(window, "blur", this.onWindowBlur);
     };
     _proto.dispatchEvent = function dispatchEvent(type, event) {
         var handlers = this.handlers[type];
-        handlers == null ? void 0 : handlers.forEach(function(fn) {
+        handlers == null ? void 0 : handlers.slice().forEach(function(fn) {
             return fn(event);
         });
+        if (type === EVENT_TYPE_CLICK) {
+            this.onClick(event);
+        } else if (type === EVENT_TYPE_TOUCH_START) {
+            this.onPointerDown(event);
+        } else if (type === EVENT_TYPE_TOUCH_END) {
+            this.onPointerUp(event);
+        } else if (type === EVENT_TYPE_TOUCH_MOVE) {
+            this.onPointerMove(event);
+        }
     };
     _proto.addEventListener = function addEventListener(type, callback) {
         var handlers = this.handlers[type];
@@ -25563,14 +26873,229 @@ var EventSystem = /*#__PURE__*/ function() {
             removeItem(handlers, callback);
         }
     };
-    _proto.onClick = function onClick(e) {
-        var x = e.x, y = e.y;
+    _proto.dispose = function dispose() {
+        this.engine.windowRoot.cancelPointerInput();
+        this.mouseState = null;
+        this.touchStates.clear();
+        this.mouseFromTouchIndex = null;
+        this.touchFromMousePressed = false;
+        this.handlers = {};
+        this.unbindListeners();
+        this.target = null;
+    };
+    _proto.handleNativeMouseDown = function handleNativeMouseDown(event) {
+        if (!this.enabled || !this.target) {
+            return;
+        }
+        var position = this.getCanvasPosition(event.clientX, event.clientY);
+        this.focusTarget();
+        var state = this.createPointerState(position);
+        this.mouseState = state;
+        state.pressed = true;
+        var handled = this.pushNativeMouseButton(event, position, true);
+        state.controlHandled = handled;
+        if (!handled) {
+            var pointerEvent = this.createPointerEvent(event, position, state);
+            this.dispatchEvent(EVENT_TYPE_TOUCH_START, pointerEvent);
+        }
+        this.consumeNativeEvent(event, handled);
+    };
+    _proto.handleNativeKey = function handleNativeKey(event, pressed) {
+        if (!this.enabled) {
+            return;
+        }
+        var input = new InputEventKey();
+        input.device = InputEvent.deviceIdKeyboard;
+        input.pressed = pressed;
+        input.echo = pressed && event.repeat;
+        input.keycode = event.key;
+        input.physicalKeycode = event.code;
+        input.keyLabel = event.key;
+        input.unicode = getUnicode(event.key);
+        input.location = getKeyLocation(event.location);
+        input.shiftPressed = event.shiftKey;
+        input.altPressed = event.altKey;
+        input.metaPressed = event.metaKey;
+        input.ctrlPressed = event.ctrlKey;
+        this.engine.windowRoot.pushInput(input);
+        this.consumeNativeEvent(event, this.engine.windowRoot.isInputHandled());
+    };
+    _proto.handleNativeTouchEnd = function handleNativeTouchEnd(event, canceled) {
+        if (!this.enabled) {
+            return;
+        }
+        for(var _iterator = _create_for_of_iterator_helper_loose(Array.from(event.changedTouches)), _step; !(_step = _iterator()).done;){
+            var touch = _step.value;
+            var position = this.getCanvasPosition(touch.clientX, touch.clientY);
+            var state = this.touchStates.get(touch.identifier);
+            if (!(state == null ? void 0 : state.pressed)) {
+                continue;
+            }
+            var handled = this.pushNativeScreenTouch(touch.identifier, position, false, canceled, false);
+            var pointerEvent = this.createPointerEvent(event, position, state);
+            if (!canceled && !state.controlHandled && !handled && this.isClick(state, position)) {
+                this.dispatchEvent(EVENT_TYPE_CLICK, pointerEvent);
+            }
+            if (!handled && !canceled && !state.controlHandled) {
+                this.dispatchEvent(EVENT_TYPE_TOUCH_END, pointerEvent);
+            }
+            this.touchStates.delete(touch.identifier);
+            this.consumeNativeEvent(event, handled || state.controlHandled || !this.allowPropagation);
+        }
+        this.preventTouchDefaults(event);
+    };
+    _proto.pushNativeMouseButton = function pushNativeMouseButton(event, position, pressed) {
+        var handled = false;
+        var button = getMouseButton(event.button);
+        if (pressed && this.emulateTouchFromMouse && button === exports.MouseButton.Left) {
+            this.touchFromMousePressed = true;
+        }
+        if (this.touchFromMousePressed && button === exports.MouseButton.Left) {
+            handled = this.pushScreenTouch(0, position, pressed, false, event.detail > 1, InputEvent.deviceIdEmulation);
+            if (!pressed) {
+                this.touchFromMousePressed = false;
+            }
+        }
+        return this.pushMouseButton(event, position, pressed) || handled;
+    };
+    _proto.pushNativeMouseMotion = function pushNativeMouseMotion(event, position, relative, velocity) {
+        var handled = false;
+        if (this.touchFromMousePressed && (event.buttons & 1) !== 0) {
+            handled = this.pushScreenDrag(0, position, relative, velocity, InputEvent.deviceIdEmulation);
+        }
+        return this.pushMouseMotion(event, position, relative, velocity) || handled;
+    };
+    _proto.pushNativeScreenTouch = function pushNativeScreenTouch(index, position, pressed, canceled, doubleTap) {
+        var handled = false;
+        var emulateMouse = false;
+        if (pressed && this.emulateMouseFromTouch && this.mouseFromTouchIndex === null) {
+            this.mouseFromTouchIndex = index;
+            emulateMouse = true;
+        } else if (!pressed && this.mouseFromTouchIndex === index) {
+            emulateMouse = true;
+            this.mouseFromTouchIndex = null;
+        }
+        if (emulateMouse) {
+            handled = this.pushEmulatedMouseButton(position, pressed, canceled, doubleTap);
+        }
+        return this.pushScreenTouch(index, position, pressed, canceled, doubleTap, 0) || handled;
+    };
+    _proto.pushNativeScreenDrag = function pushNativeScreenDrag(index, position, relative, velocity) {
+        var handled = false;
+        if (this.emulateMouseFromTouch && this.mouseFromTouchIndex === index) {
+            handled = this.pushEmulatedMouseMotion(position, relative, velocity);
+        }
+        return this.pushScreenDrag(index, position, relative, velocity, 0) || handled;
+    };
+    _proto.pushEmulatedMouseButton = function pushEmulatedMouseButton(position, pressed, canceled, doubleClick) {
+        var input = new InputEventMouseButton();
+        input.device = InputEvent.deviceIdEmulation;
+        input.position.copyFrom(position);
+        input.globalPosition.copyFrom(position);
+        input.buttonIndex = exports.MouseButton.Left;
+        input.buttonMask = pressed ? exports.MouseButtonMask.Left : exports.MouseButtonMask.None;
+        input.pressed = pressed;
+        input.canceled = canceled;
+        input.doubleClick = doubleClick;
+        this.engine.windowRoot.pushInput(input);
+        return this.engine.windowRoot.isInputHandled();
+    };
+    _proto.pushEmulatedMouseMotion = function pushEmulatedMouseMotion(position, relative, velocity) {
+        var input = new InputEventMouseMotion();
+        input.device = InputEvent.deviceIdEmulation;
+        input.position.copyFrom(position);
+        input.globalPosition.copyFrom(position);
+        input.buttonMask = exports.MouseButtonMask.Left;
+        input.pressed = true;
+        input.relative.copyFrom(relative);
+        input.screenRelative.copyFrom(relative);
+        input.velocity.copyFrom(velocity);
+        input.screenVelocity.copyFrom(velocity);
+        this.engine.windowRoot.pushInput(input);
+        return this.engine.windowRoot.isInputHandled();
+    };
+    _proto.pushMouseButton = function pushMouseButton(event, position, pressed) {
+        var input = new InputEventMouseButton();
+        this.copyMouseFields(input, event, position);
+        input.device = InputEvent.deviceIdMouse;
+        input.buttonIndex = getMouseButton(event.button);
+        input.buttonMask = getMouseButtonMask(event.buttons);
+        if (pressed) {
+            input.buttonMask |= getMouseButtonBit(input.buttonIndex);
+        } else {
+            input.buttonMask &= ~getMouseButtonBit(input.buttonIndex);
+        }
+        input.pressed = pressed;
+        input.doubleClick = event.detail > 1;
+        this.engine.windowRoot.pushInput(input);
+        return this.engine.windowRoot.isInputHandled();
+    };
+    _proto.pushWheelButton = function pushWheelButton(button, factor, position, event) {
+        var input = new InputEventMouseButton();
+        this.copyMouseFields(input, event, position);
+        input.device = InputEvent.deviceIdMouse;
+        input.buttonIndex = button;
+        input.buttonMask = getMouseButtonMask(event.buttons);
+        input.factor = factor;
+        input.pressed = true;
+        this.engine.windowRoot.pushInput(input);
+        return this.engine.windowRoot.isInputHandled();
+    };
+    _proto.pushMouseMotion = function pushMouseMotion(event, position, relative, velocity) {
+        var input = new InputEventMouseMotion();
+        this.copyMouseFields(input, event, position);
+        input.device = InputEvent.deviceIdMouse;
+        input.buttonMask = getMouseButtonMask(event.buttons);
+        input.pressed = event.buttons !== 0;
+        input.relative.copyFrom(relative);
+        input.screenRelative.copyFrom(relative);
+        input.velocity.copyFrom(velocity);
+        input.screenVelocity.copyFrom(velocity);
+        if ("pressure" in event) {
+            input.pressure = event.pressure;
+            input.tilt.set(event.tiltX, event.tiltY);
+        }
+        this.engine.windowRoot.pushInput(input);
+        return this.engine.windowRoot.isInputHandled();
+    };
+    _proto.pushScreenTouch = function pushScreenTouch(index, position, pressed, canceled, doubleTap, device) {
+        var input = new InputEventScreenTouch();
+        input.index = index;
+        input.device = device;
+        input.position.copyFrom(position);
+        input.pressed = pressed;
+        input.canceled = canceled;
+        input.doubleTap = doubleTap;
+        this.engine.windowRoot.pushInput(input);
+        return this.engine.windowRoot.isInputHandled();
+    };
+    _proto.pushScreenDrag = function pushScreenDrag(index, position, relative, velocity, device) {
+        var input = new InputEventScreenDrag();
+        input.index = index;
+        input.device = device;
+        input.position.copyFrom(position);
+        input.relative.copyFrom(relative);
+        input.screenRelative.copyFrom(relative);
+        input.velocity.copyFrom(velocity);
+        input.screenVelocity.copyFrom(velocity);
+        input.pressed = true;
+        this.engine.windowRoot.pushInput(input);
+        return this.engine.windowRoot.isInputHandled();
+    };
+    _proto.copyMouseFields = function copyMouseFields(input, event, position) {
+        input.position.copyFrom(position);
+        input.globalPosition.copyFrom(position);
+        input.shiftPressed = event.shiftKey;
+        input.altPressed = event.altKey;
+        input.metaPressed = event.metaKey;
+        input.ctrlPressed = event.ctrlKey;
+    };
+    _proto.onClick = function onClick(event) {
         var hitResults = [];
-        // 收集所有的点击测试结果，click 回调执行可能会对 composition 点击结果有影响，放在点击测试执行完后再统一触发。
         for(var _iterator = _create_for_of_iterator_helper_loose(this.engine.compositions), _step; !(_step = _iterator()).done;){
             var composition = _step.value;
             var _hitResults;
-            (_hitResults = hitResults).push.apply(_hitResults, [].concat(composition.hitTest(x, y)));
+            (_hitResults = hitResults).push.apply(_hitResults, [].concat(composition.hitTest(event.x, event.y)));
         }
         for(var _iterator1 = _create_for_of_iterator_helper_loose(hitResults), _step1; !(_step1 = _iterator1()).done;){
             var hitResult = _step1.value;
@@ -25587,49 +27112,36 @@ var EventSystem = /*#__PURE__*/ function() {
             this.engine.emit("click", clickInfo);
         }
     };
-    _proto.onPointerDown = function onPointerDown(e) {
-        this.handlePointerEvent(e, 0);
+    _proto.onPointerDown = function onPointerDown(event) {
+        this.handlePointerEvent(event, 0);
     };
-    _proto.onPointerUp = function onPointerUp(e) {
-        this.handlePointerEvent(e, 1);
+    _proto.onPointerUp = function onPointerUp(event) {
+        this.handlePointerEvent(event, 1);
     };
-    _proto.onPointerMove = function onPointerMove(e) {
-        this.handlePointerEvent(e, 2);
+    _proto.onPointerMove = function onPointerMove(event) {
+        this.handlePointerEvent(event, 2);
     };
-    _proto.handlePointerEvent = function handlePointerEvent(e, type) {
+    _proto.handlePointerEvent = function handlePointerEvent(event, type) {
         var hitRegion = null;
-        var x = e.x, y = e.y, width = e.width, height = e.height;
         if (!(type === 2 && this.skipPointerMovePicking)) {
             for(var _iterator = _create_for_of_iterator_helper_loose(this.engine.compositions), _step; !(_step = _iterator()).done;){
                 var composition = _step.value;
-                var regions = composition.hitTest(x, y);
+                var regions = composition.hitTest(event.x, event.y);
                 if (regions.length > 0) {
                     hitRegion = regions[regions.length - 1];
                 }
             }
         }
         var eventData = new PointerEventData();
-        eventData.position.x = (x + 1) / 2 * width;
-        eventData.position.y = (y + 1) / 2 * height;
-        eventData.delta.x = e.vx * width;
-        eventData.delta.y = e.vy * height;
-        var raycast = eventData.pointerCurrentRaycast;
+        eventData.position.x = (event.x + 1) / 2 * event.width;
+        eventData.position.y = (event.y + 1) / 2 * event.height;
+        eventData.delta.x = event.vx * event.width;
+        eventData.delta.y = event.vy * event.height;
         if (hitRegion) {
-            raycast.point = hitRegion.position;
-            raycast.item = hitRegion.item;
-        }
-        var eventName = "pointerdown";
-        switch(type){
-            case 0:
-                eventName = "pointerdown";
-                break;
-            case 1:
-                eventName = "pointerup";
-                break;
-            case 2:
-                eventName = "pointermove";
-                break;
+            eventData.pointerCurrentRaycast.point = hitRegion.position;
+            eventData.pointerCurrentRaycast.item = hitRegion.item;
         }
+        var eventName = type === 0 ? "pointerdown" : type === 1 ? "pointerup" : "pointermove";
         if (hitRegion) {
             var hitItem = hitRegion.item;
             var hitComposition = hitItem.composition;
@@ -25638,29 +27150,185 @@ var EventSystem = /*#__PURE__*/ function() {
             this.engine.emit(eventName, eventData);
         }
     };
-    _proto.dispose = function dispose() {
-        var _this = this;
-        if (this.target) {
-            this.handlers = {};
-            Object.keys(this.nativeHandlers).forEach(function(name) {
-                var _this_target;
-                (_this_target = _this.target) == null ? void 0 : _this_target.removeEventListener(String(name), _this.nativeHandlers[name]);
-            });
-            this.nativeHandlers = {};
+    _proto.createPointerState = function createPointerState(position) {
+        var state = {
+            start: position.clone(),
+            last: position.clone(),
+            lastTime: performance.now(),
+            controlHandled: false,
+            pressed: false
+        };
+        return state;
+    };
+    _proto.updatePointerState = function updatePointerState(state, position) {
+        state.last.copyFrom(position);
+        state.lastTime = performance.now();
+    };
+    _proto.getVelocity = function getVelocity(state, position) {
+        var elapsed = Math.max(performance.now() - state.lastTime, 1);
+        return new Vector2((position.x - state.last.x) / elapsed, (position.y - state.last.y) / elapsed);
+    };
+    _proto.isClick = function isClick(state, position) {
+        return Math.abs(position.x - state.start.x) + Math.abs(position.y - state.start.y) < 4;
+    };
+    _proto.createPointerEvent = function createPointerEvent(origin, position, state, velocity) {
+        if (velocity === void 0) velocity = new Vector2();
+        var target = this.target;
+        var rect = target == null ? void 0 : target.getBoundingClientRect();
+        var cssWidth = (rect == null ? void 0 : rect.width) || 1;
+        var cssHeight = (rect == null ? void 0 : rect.height) || 1;
+        var _target_width, _target_height;
+        return {
+            x: position.x / cssWidth * 2 - 1,
+            // Legacy composition picking uses bottom-left, Y-up NDC even though GUI
+            // input follows the DOM convention of top-left, Y-down pixels.
+            y: 1 - position.y / cssHeight * 2,
+            vx: velocity.x / cssWidth * 2,
+            vy: -velocity.y / cssHeight * 2,
+            ts: performance.now(),
+            dx: (position.x - state.start.x) / cssWidth * 2,
+            dy: -(position.y - state.start.y) / cssHeight * 2,
+            width: (_target_width = target == null ? void 0 : target.width) != null ? _target_width : 0,
+            height: (_target_height = target == null ? void 0 : target.height) != null ? _target_height : 0,
+            origin: origin
+        };
+    };
+    _proto.getCanvasPosition = function getCanvasPosition(clientX, clientY) {
+        var _this_target;
+        var rect = (_this_target = this.target) == null ? void 0 : _this_target.getBoundingClientRect();
+        if (!rect) {
+            return new Vector2();
+        }
+        return new Vector2(clientX - rect.left, clientY - rect.top);
+    };
+    _proto.consumeNativeEvent = function consumeNativeEvent(event, handled) {
+        if (handled && !this.allowPropagation) {
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            event.stopPropagation();
+        }
+    };
+    _proto.preventTouchDefaults = function preventTouchDefaults(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+    };
+    _proto.focusTarget = function focusTarget() {
+        var _this_target;
+        (_this_target = this.target) == null ? void 0 : _this_target.focus();
+    };
+    _proto.addNativeHandler = function addNativeHandler(target, name, handler, options) {
+        target.addEventListener(name, handler, options);
+        this.nativeHandlers.push({
+            target: target,
+            name: name,
+            handler: handler,
+            options: options
+        });
+    };
+    _proto.unbindListeners = function unbindListeners() {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.nativeHandlers), _step; !(_step = _iterator()).done;){
+            var nativeHandler = _step.value;
+            nativeHandler.target.removeEventListener(nativeHandler.name, nativeHandler.handler, nativeHandler.options);
+        }
+        this.nativeHandlers = [];
+        if (this.addedTabIndex && this.target) {
+            this.target.removeAttribute("tabindex");
         }
+        if (this.addedOutlineStyle && this.target) {
+            this.target.style.removeProperty("outline");
+        }
+        this.addedTabIndex = false;
+        this.addedOutlineStyle = false;
     };
+    _create_class(EventSystem, [
+        {
+            key: "enabled",
+            get: function get() {
+                return this._enabled;
+            },
+            set: function set(value) {
+                if (this._enabled === value) {
+                    return;
+                }
+                this._enabled = value;
+                if (!value) {
+                    this.mouseState = null;
+                    this.touchStates.clear();
+                    this.mouseFromTouchIndex = null;
+                    this.touchFromMousePressed = false;
+                    this.engine.windowRoot.cancelPointerInput();
+                }
+            }
+        }
+    ]);
     return EventSystem;
 }();
-function getCoord(event) {
-    var ele = event.target;
-    var clientX = event.clientX, clientY = event.clientY;
-    var _ele_getBoundingClientRect = ele.getBoundingClientRect(), left = _ele_getBoundingClientRect.left, top = _ele_getBoundingClientRect.top, width = _ele_getBoundingClientRect.width, height = _ele_getBoundingClientRect.height;
-    var x = (clientX - left) / width * 2 - 1;
-    var y = 1 - (clientY - top) / height * 2;
-    return {
-        x: x,
-        y: y
-    };
+function getKeyLocation(location) {
+    if (location === 1) {
+        return exports.KeyLocation.Left;
+    }
+    if (location === 2) {
+        return exports.KeyLocation.Right;
+    }
+    return exports.KeyLocation.Unspecified;
+}
+function getUnicode(key) {
+    var characters = Array.from(key);
+    var _characters__codePointAt;
+    return characters.length === 1 ? (_characters__codePointAt = characters[0].codePointAt(0)) != null ? _characters__codePointAt : 0 : 0;
+}
+function getMouseButton(button) {
+    switch(button){
+        case 0:
+            return exports.MouseButton.Left;
+        case 1:
+            return exports.MouseButton.Middle;
+        case 2:
+            return exports.MouseButton.Right;
+        case 3:
+            return exports.MouseButton.Xbutton1;
+        case 4:
+            return exports.MouseButton.Xbutton2;
+        default:
+            return exports.MouseButton.None;
+    }
+}
+function getMouseButtonMask(buttons) {
+    var mask = exports.MouseButtonMask.None;
+    if ((buttons & 1) !== 0) {
+        mask |= exports.MouseButtonMask.Left;
+    }
+    if ((buttons & 2) !== 0) {
+        mask |= exports.MouseButtonMask.Right;
+    }
+    if ((buttons & 4) !== 0) {
+        mask |= exports.MouseButtonMask.Middle;
+    }
+    if ((buttons & 8) !== 0) {
+        mask |= exports.MouseButtonMask.Xbutton1;
+    }
+    if ((buttons & 16) !== 0) {
+        mask |= exports.MouseButtonMask.Xbutton2;
+    }
+    return mask;
+}
+function getMouseButtonBit(button) {
+    switch(button){
+        case exports.MouseButton.Left:
+            return exports.MouseButtonMask.Left;
+        case exports.MouseButton.Right:
+            return exports.MouseButtonMask.Right;
+        case exports.MouseButton.Middle:
+            return exports.MouseButtonMask.Middle;
+        case exports.MouseButton.Xbutton1:
+            return exports.MouseButtonMask.Xbutton1;
+        case exports.MouseButton.Xbutton2:
+            return exports.MouseButtonMask.Xbutton2;
+        default:
+            return exports.MouseButtonMask.None;
+    }
 }
 
 var InteractLoader = /*#__PURE__*/ function(Plugin) {
@@ -27681,11 +29349,6 @@ exports.SpritePropertyTrack = __decorate([
     effectsClass("SpritePropertyTrack")
 ], exports.SpritePropertyTrack);
 
-function _assert_this_initialized(self) {
-    if (self === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    return self;
-}
-
 var Cone = /*#__PURE__*/ function() {
     function Cone(props) {
         var _this = this;
@@ -37690,7 +39353,7 @@ function getStandardSpriteContent(sprite, transform) {
     return ret;
 }
 
-var version$1 = "2.10.0-alpha.2";
+var version$1 = "2.10.0-alpha.4";
 var v0 = /^(\d+)\.(\d+)\.(\d+)(-(\w+)\.\d+)?$/;
 var standardVersion = /^(\d+)\.(\d+)$/;
 var reverseParticle = false;
@@ -39642,10 +41305,11 @@ var PreRenderTickData = /*#__PURE__*/ function(TickData) {
         _this./**
    * 是否开启后处理
    */ postProcessingEnabled = false;
-        _this.canvasLayers = [];
         _this.destroyed = false;
         _this.paused = true;
         _this.isEndCalled = false;
+        _this._renderOrder = 0;
+        _this._interactive = true;
         _this._textures = [];
         var _ref = props != null ? props : {}, _ref_reusable = _ref.reusable, reusable = _ref_reusable === void 0 ? false : _ref_reusable, _ref_speed = _ref.speed, speed = _ref_speed === void 0 ? 1 : _ref_speed, _ref_baseRenderOrder = _ref.baseRenderOrder, baseRenderOrder = _ref_baseRenderOrder === void 0 ? 0 : _ref_baseRenderOrder, onItemMessage = _ref.onItemMessage;
         _this.engine.addComposition(_assert_this_initialized(_this));
@@ -39678,13 +41342,14 @@ var PreRenderTickData = /*#__PURE__*/ function(TickData) {
         _this.root = new exports.VFXItem(_this.engine);
         _this.root.name = "root";
         _this.root.composition = _assert_this_initialized(_this);
+        _this.root.setParent(_this.engine.root);
         _this.pluginRoot = new exports.VFXItem(_this.engine);
         _this.pluginRoot.name = "pluginRoot";
         _this.pluginRoot.setParent(_this.root);
-        _this.pluginRoot.addComponent(CanvasLayer);
         // Instantiate composition rootItem
         _this.sceneRoot = new exports.VFXItem(_this.engine);
         _this.sceneRoot.setParent(_this.root);
+        _this.uiCanvas = _this.sceneRoot.addComponent(UICanvas);
         if (sourceContent) {
             _this.sceneRoot.setInstanceId(sourceContent.id);
             _this.sceneRoot.instantiatePreComposition(sourceContent, false);
@@ -39883,9 +41548,13 @@ var PreRenderTickData = /*#__PURE__*/ function(TickData) {
         this.isEndCalled = false;
         this.rootComposition.setTime(0);
     };
-    _proto.render = function render() {
+    /** Renders this Composition content. Screen-space UI is rendered by Engine. */ _proto.render = function render() {
+        this.renderContent();
+    };
+    /**
+   * Renders only the Composition scene content.
+   */ _proto.renderContent = function renderContent() {
         this.renderer.renderRenderFrame(this.renderFrame);
-        this.renderCanvasLayers();
     };
     /**
    * 合成更新，针对所有 item 的更新
@@ -39974,17 +41643,6 @@ var PreRenderTickData = /*#__PURE__*/ function(TickData) {
             }
         }
     };
-    _proto.renderCanvasLayers = function renderCanvasLayers() {
-        this.engine.graphics.begin();
-        this.canvasLayers.sort(function(leftLayer, rightLayer) {
-            return leftLayer.layer - rightLayer.layer;
-        });
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.canvasLayers), _step; !(_step = _iterator()).done;){
-            var canvasLayer = _step.value;
-            canvasLayer.draw();
-        }
-        this.engine.graphics.end();
-    };
     /**
    * @internal
    */ _proto.createTexturesFromData = function createTexturesFromData(textureDataList) {
@@ -40253,6 +41911,35 @@ var PreRenderTickData = /*#__PURE__*/ function(TickData) {
         })();
     };
     _create_class(Composition, [
+        {
+            key: "renderOrder",
+            get: /**
+   * 合成渲染顺序，默认按升序渲染
+   */ function get() {
+                return this._renderOrder;
+            },
+            set: function set(value) {
+                this._renderOrder = value;
+                if (this.uiCanvas) {
+                    this.uiCanvas.order = value;
+                }
+            }
+        },
+        {
+            key: "interactive",
+            get: /**
+   * 合成内的元素否允许点击、拖拽交互
+   * @since 1.6.0
+   */ function get() {
+                return this._interactive;
+            },
+            set: function set(value) {
+                this._interactive = !!value;
+                if (this.uiCanvas) {
+                    this.uiCanvas.receivesEvents = this._interactive;
+                }
+            }
+        },
         {
             key: "width",
             get: /**
@@ -42030,7 +43717,6 @@ var DEFAULT_FPS = 60;
         /**
    * 渲染过程中错误队列
    */ _this.renderErrors = new Set();
-        _this.compositions = [];
         _this.assetManagers = [];
         _this.env = "";
         /**
@@ -42052,6 +43738,7 @@ var DEFAULT_FPS = 60;
         _this.framebuffers = [];
         _this.renderbuffers = [];
         _this.particleSystems = [];
+        _this._compositions = [];
         _this.clearAction = {
             stencilAction: exports.TextureLoadAction.clear,
             clearStencil: 0,
@@ -42076,6 +43763,9 @@ var DEFAULT_FPS = 60;
         _this.pixelRatio = (_options_pixelRatio = options == null ? void 0 : options.pixelRatio) != null ? _options_pixelRatio : getPixelRatio();
         _this.jsonSceneData = {};
         _this.objectInstance = {};
+        _this.root = new exports.VFXItem(_assert_this_initialized(_this));
+        _this.root.name = "root";
+        _this.windowRoot = new WindowRootControl(_assert_this_initialized(_this));
         _this.whiteTexture = generateWhiteTexture(_assert_this_initialized(_this));
         _this.transparentTexture = generateEmptyTexture(_assert_this_initialized(_this));
         if (!(options == null ? void 0 : options.manualRender)) {
@@ -42210,9 +43900,6 @@ var DEFAULT_FPS = 60;
         // Sort compositions by index
         //-------------------------------------------------------------------------
         var compositions = this.compositions;
-        compositions.sort(function(a, b) {
-            return a.getIndex() - b.getIndex();
-        });
         var skipRender = false;
         // Update Compositions
         //-------------------------------------------------------------------------
@@ -42231,6 +43918,7 @@ var DEFAULT_FPS = 60;
             (_this_ticker1 = this.ticker) == null ? void 0 : _this_ticker1.pause();
             return;
         }
+        this.windowRoot.update(dt);
         // Tick compositions onPreRender
         //-------------------------------------------------------------------------
         for(var _iterator1 = _create_for_of_iterator_helper_loose(compositions), _step1; !(_step1 = _iterator1()).done;){
@@ -42243,8 +43931,9 @@ var DEFAULT_FPS = 60;
         this.renderer.clear(this.clearAction);
         for(var _iterator2 = _create_for_of_iterator_helper_loose(compositions), _step2; !(_step2 = _iterator2()).done;){
             var composition2 = _step2.value;
-            composition2.render();
+            composition2.renderContent();
         }
+        this.windowRoot.render();
         this.renderTargetPool.flush();
     };
     /**
@@ -42286,6 +43975,7 @@ var DEFAULT_FPS = 60;
             this.canvas.style.height = containerHeight + "px";
             logger.info("Resize engine " + this.name + " [" + canvasWidth + "," + canvasHeight + "," + containerWidth + "," + containerHeight + "].");
             this.setSize(canvasWidth, canvasHeight);
+            this.windowRoot.resize(canvasWidth, canvasHeight);
         }
     };
     _proto.setSize = function setSize(width, height) {
@@ -42293,7 +43983,7 @@ var DEFAULT_FPS = 60;
         if (this.getWidth() !== width || this.getHeight() !== height) {
             this.canvas.width = width;
             this.canvas.height = height;
-            this.viewport(0, 0, width, height);
+            this.setViewport(0, 0, width, height);
         }
         (_this_compositions = this.compositions) == null ? void 0 : _this_compositions.forEach(function(comp) {
             comp.camera.aspect = width / height;
@@ -42322,6 +44012,26 @@ var DEFAULT_FPS = 60;
     /** @hide */ _proto.bindBuffers = function bindBuffers(vertexBuffers, indexBuffer, effect) {
         throw new Error("The active rendering backend cannot bind geometry buffers.");
     };
+    /**
+   * 使用当前绑定的顶点和索引缓冲区绘制图元。
+   * @param mode - 图元类型
+   * @param indexOffset - 索引缓冲区中的字节偏移
+   * @param indexCount - 索引数量
+   * @param instanceCount - 实例数量
+   * @hide
+   */ _proto.drawElementsType = function drawElementsType(mode, indexOffset, indexCount, instanceCount) {
+        throw new Error("The active rendering backend cannot draw indexed primitives.");
+    };
+    /**
+   * 使用当前绑定的顶点缓冲区绘制图元。
+   * @param mode - 图元类型
+   * @param vertexStart - 起始顶点
+   * @param vertexCount - 顶点数量
+   * @param instanceCount - 实例数量
+   * @hide
+   */ _proto.drawArraysType = function drawArraysType(mode, vertexStart, vertexCount, instanceCount) {
+        throw new Error("The active rendering backend cannot draw primitives.");
+    };
     _proto.addTexture = function addTexture(tex) {
         if (this.disposed) {
             return;
@@ -42453,15 +44163,12 @@ var DEFAULT_FPS = 60;
    * @param height
    * example:
    * gl.viewport(0, 0, width, height);
-   */ _proto.viewport = function viewport(x, y, width, height) {
+   */ _proto.setViewport = function setViewport(x, y, width, height) {
     // OVERRIDE
     };
     _proto.clear = function clear(action) {
     // OVERRIDE
     };
-    _proto.drawGeometry = function drawGeometry(geometry, matrix, material, subMeshIndex) {
-    // OVERRIDE
-    };
     /*** 渲染状态控制 ***/ _proto.setSampleAlphaToCoverage = function setSampleAlphaToCoverage(enable) {
     // OVERRIDE
     };
@@ -42546,6 +44253,12 @@ var DEFAULT_FPS = 60;
         }
         (_this_ticker = this.ticker) == null ? void 0 : _this_ticker.stop();
         (_this_eventSystem = this.eventSystem) == null ? void 0 : _this_eventSystem.dispose();
+        for(var _iterator = _create_for_of_iterator_helper_loose(this._compositions.slice()), _step; !(_step = _iterator()).done;){
+            var composition = _step.value;
+            composition.dispose();
+        }
+        this.root.dispose();
+        this.windowRoot.dispose();
         (_this_assetService = this.assetService) == null ? void 0 : _this_assetService.dispose();
         (_this__graphics = this._graphics) == null ? void 0 : _this__graphics.dispose();
         this.renderPasses.forEach(function(pass) {
@@ -42566,16 +44279,13 @@ var DEFAULT_FPS = 60;
         this.assetManagers.forEach(function(assetManager) {
             return assetManager.dispose();
         });
-        this.compositions.forEach(function(comp) {
-            return comp.dispose();
-        });
         this.textures = [];
         this.materials = [];
         this.geometries = [];
         this.meshes = [];
         this.renderPasses = [];
-        this.compositions = [];
         this.particleSystems = [];
+        this._compositions = [];
     };
     _proto.getTargetSize = function getTargetSize(parentEle) {
         if (parentEle === undefined || parentEle === null) {
@@ -42628,6 +44338,14 @@ var DEFAULT_FPS = 60;
         ];
     };
     _create_class(Engine, [
+        {
+            key: "compositions",
+            get: function get() {
+                return this._compositions.sort(function(a, b) {
+                    return a.getIndex() - b.getIndex();
+                });
+            }
+        },
         {
             key: "graphics",
             get: function get() {
@@ -42865,7 +44583,7 @@ registerPlugin("text", TextLoader);
 registerPlugin("sprite", SpriteLoader);
 registerPlugin("particle", ParticleLoader);
 registerPlugin("interact", InteractLoader);
-var version = "2.10.0-alpha.2";
+var version = "2.10.0-alpha.4";
 logger.info("Core version: " + version + ".");
 
 exports.ATLAS_SIZE = ATLAS_SIZE;
@@ -42900,8 +44618,8 @@ exports.COPY_MESH_SHADER_ID = COPY_MESH_SHADER_ID;
 exports.COPY_VERTEX_SHADER = COPY_VERTEX_SHADER;
 exports.Camera = Camera;
 exports.CameraVFXItemLoader = CameraVFXItemLoader;
-exports.CanvasItem = CanvasItem;
-exports.CanvasLayer = CanvasLayer;
+exports.CanvasContainer = CanvasContainer;
+exports.CanvasRootControl = CanvasRootControl;
 exports.Circle = Circle$1;
 exports.ColorCurve = ColorCurve;
 exports.ColorPlayable = ColorPlayable;
@@ -42914,6 +44632,7 @@ exports.Composition = Composition;
 exports.ConstBoolNode = ConstBoolNode;
 exports.ConstFloatNode = ConstFloatNode;
 exports.ConstraintTarget = ConstraintTarget;
+exports.ContainerControl = ContainerControl;
 exports.Control = Control;
 exports.ControlParameterBoolNode = ControlParameterBoolNode;
 exports.ControlParameterFloatNode = ControlParameterFloatNode;
@@ -42937,7 +44656,6 @@ exports.Ellipse = Ellipse;
 exports.Engine = Engine;
 exports.EventEmitter = EventEmitter;
 exports.EventSystem = EventSystem;
-exports.FONT_SCALE = FONT_SCALE;
 exports.Float16ArrayWrapper = Float16ArrayWrapper;
 exports.FloatComparisonNode = FloatComparisonNode;
 exports.FloatComparisonNodeData = FloatComparisonNodeData;
@@ -42954,6 +44672,14 @@ exports.GraphNode = GraphNode;
 exports.GraphNodeData = GraphNodeData;
 exports.Graphics = Graphics;
 exports.HELP_LINK = HELP_LINK;
+exports.InputEvent = InputEvent;
+exports.InputEventKey = InputEventKey;
+exports.InputEventMouse = InputEventMouse;
+exports.InputEventMouseButton = InputEventMouseButton;
+exports.InputEventMouseMotion = InputEventMouseMotion;
+exports.InputEventScreenDrag = InputEventScreenDrag;
+exports.InputEventScreenTouch = InputEventScreenTouch;
+exports.InputEventWithModifiers = InputEventWithModifiers;
 exports.InteractLoader = InteractLoader;
 exports.InteractMesh = InteractMesh;
 exports.InvalidIndex = InvalidIndex;
@@ -43002,7 +44728,6 @@ exports.RandomSetValue = RandomSetValue;
 exports.RandomValue = RandomValue;
 exports.RandomVectorValue = RandomVectorValue;
 exports.RaycastResult = RaycastResult;
-exports.RectTransform = RectTransform;
 exports.Rectangle = Rectangle$1;
 exports.ReferenceCurve = ReferenceCurve;
 exports.RenderFrame = RenderFrame;
@@ -43015,6 +44740,7 @@ exports.RenderTargetPool = RenderTargetPool;
 exports.Renderbuffer = Renderbuffer;
 exports.Renderer = Renderer;
 exports.RendererComponent = RendererComponent;
+exports.RootControl = RootControl;
 exports.RuntimeClip = RuntimeClip;
 exports.SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0 = SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0;
 exports.SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0 = SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0;
@@ -43052,6 +44778,8 @@ exports.TransformPlayable = TransformPlayable;
 exports.TransitionNode = TransitionNode;
 exports.Triangle = Triangle;
 exports.TrimPath = TrimPath;
+exports.UICanvas = UICanvas;
+exports.UIControl = UIControl;
 exports.ValueGetter = ValueGetter;
 exports.ValueNode = ValueNode;
 exports.Vector2Curve = Vector2Curve;
@@ -43061,6 +44789,7 @@ exports.Vector3PropertyMixerPlayable = Vector3PropertyMixerPlayable;
 exports.Vector4Curve = Vector4Curve;
 exports.Vector4PropertyMixerPlayable = Vector4PropertyMixerPlayable;
 exports.VertexBuffer = VertexBuffer;
+exports.WindowRootControl = WindowRootControl;
 exports.addByOrder = addByOrder;
 exports.addItem = addItem;
 exports.addItemWithOrder = addItemWithOrder;