@galacean/effects-threejs 2.10.0-alpha.3 → 2.10.0-alpha.5

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.10.0-alpha.3
+ * Version: v2.10.0-alpha.5
  */
 
 'use strict';
@@ -2958,6 +2958,11 @@ var PluginSystem = /*#__PURE__*/ function() {
     PluginSystem.getPlugins = function getPlugins() {
         return plugins;
     };
+    PluginSystem.notifyCompositionCreating = function notifyCompositionCreating(composition, scene) {
+        plugins.forEach(function(plugin) {
+            return plugin.onCompositionCreating(composition, scene);
+        });
+    };
     PluginSystem.notifyCompositionCreated = function notifyCompositionCreated(composition, scene) {
         plugins.forEach(function(plugin) {
             return plugin.onCompositionCreated(composition, scene);
@@ -3050,6 +3055,12 @@ function getPluginUsageInfo(name) {
    * @param engine - 引擎实例
    */ _proto.onAssetsLoadFinish = function onAssetsLoadFinish(scene, options, engine) {};
     /**
+   * 合成内容开始创建前触发。
+   * 此时 root、pluginRoot 和 sceneRoot 已创建，但场景内容尚未实例化。
+   * @param composition - 正在创建的合成对象
+   * @param scene - 场景对象
+   */ _proto.onCompositionCreating = function onCompositionCreating(composition, scene) {};
+    /**
    * 合成创建完成后触发。
    * @param composition - 合成对象
    * @param scene - 场景对象
@@ -15658,35 +15669,35 @@ function vecMulCombine(out, a, b) {
     }
     return out;
 }
-var _obj$7;
-var particleOriginTranslateMap$1 = (_obj$7 = {}, _obj$7[ParticleOrigin.PARTICLE_ORIGIN_CENTER] = [
+var _obj$6;
+var particleOriginTranslateMap$1 = (_obj$6 = {}, _obj$6[ParticleOrigin.PARTICLE_ORIGIN_CENTER] = [
     0,
     0
-], _obj$7[ParticleOrigin.PARTICLE_ORIGIN_CENTER_BOTTOM] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_CENTER_BOTTOM] = [
     0,
     -0.5
-], _obj$7[ParticleOrigin.PARTICLE_ORIGIN_CENTER_TOP] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_CENTER_TOP] = [
     0,
     0.5
-], _obj$7[ParticleOrigin.PARTICLE_ORIGIN_LEFT_TOP] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_LEFT_TOP] = [
     -0.5,
     0.5
-], _obj$7[ParticleOrigin.PARTICLE_ORIGIN_LEFT_CENTER] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_LEFT_CENTER] = [
     -0.5,
     0
-], _obj$7[ParticleOrigin.PARTICLE_ORIGIN_LEFT_BOTTOM] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_LEFT_BOTTOM] = [
     -0.5,
     -0.5
-], _obj$7[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_CENTER] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_CENTER] = [
     0.5,
     0
-], _obj$7[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [
     0.5,
     -0.5
-], _obj$7[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_TOP] = [
+], _obj$6[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_TOP] = [
     0.5,
     0.5
-], _obj$7);
+], _obj$6);
 function nearestPowerOfTwo(value) {
     return Math.pow(2, Math.round(Math.log(value) / Math.LN2));
 }
@@ -17424,27 +17435,27 @@ function oldBezierKeyFramesToNew(props) {
  * 对象引用阶梯曲线（spec ValueType.REFERENCE_CURVE）。
  * props 为 [[time, value], ...]，value 为已解析的对象引用实例。
  */ var REFERENCE_CURVE = 28;
-var _obj$6;
-var map$1 = (_obj$6 = {}, _obj$6[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$6[ValueType.CONSTANT] = function(props) {
+}, _obj$5[ValueType.CONSTANT] = function(props) {
     return new StaticValue(props);
-}, _obj$6[ValueType.CONSTANT_VEC2] = function(props) {
+}, _obj$5[ValueType.CONSTANT_VEC2] = function(props) {
     return new StaticValue(props);
-}, _obj$6[ValueType.CONSTANT_VEC3] = function(props) {
+}, _obj$5[ValueType.CONSTANT_VEC3] = function(props) {
     return new StaticValue(props);
-}, _obj$6[ValueType.CONSTANT_VEC4] = function(props) {
+}, _obj$5[ValueType.CONSTANT_VEC4] = function(props) {
     return new StaticValue(props);
-}, _obj$6[ValueType.RGBA_COLOR] = function(props) {
+}, _obj$5[ValueType.RGBA_COLOR] = function(props) {
     return new StaticValue(props);
-}, _obj$6[ValueType.COLORS] = function(props) {
+}, _obj$5[ValueType.COLORS] = function(props) {
     return new RandomSetValue(props.map(function(c) {
         return colorToArr$1(c, false);
     }));
-}, _obj$6[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],
@@ -17452,38 +17463,38 @@ var map$1 = (_obj$6 = {}, _obj$6[ValueType.RANDOM] = function(props) {
         ]);
     }
     return new LineSegments(props);
-}, _obj$6[ValueType.GRADIENT_COLOR] = function(props) {
+}, _obj$5[ValueType.GRADIENT_COLOR] = function(props) {
     return new GradientValue(props);
-}, _obj$6[ValueType.LINEAR_PATH] = function(pros) {
+}, _obj$5[ValueType.LINEAR_PATH] = function(pros) {
     return new PathSegments(pros);
-}, _obj$6[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$6[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$6[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$6[ValueType.COLOR_CURVE] = function(props) {
+}, _obj$5[ValueType.COLOR_CURVE] = function(props) {
     return new ColorCurve(props);
-}, _obj$6[ValueType.VECTOR4_CURVE] = function(props) {
+}, _obj$5[ValueType.VECTOR4_CURVE] = function(props) {
     return new Vector4Curve(props);
-}, _obj$6[ValueType.VECTOR2_CURVE] = function(props) {
+}, _obj$5[ValueType.VECTOR2_CURVE] = function(props) {
     return new Vector2Curve(props);
 }, // TODO: add spec
-_obj$6[VECTOR3_CURVE] = function(props) {
+_obj$5[VECTOR3_CURVE] = function(props) {
     return new Vector3Curve(props);
 }, // 对象引用阶梯曲线（不插值）：props.data 为 [time, value][]，value 已解析为 EffectsObject
-_obj$6[REFERENCE_CURVE] = function(props) {
+_obj$5[REFERENCE_CURVE] = function(props) {
     return new ReferenceCurve(props);
-}, _obj$6);
+}, _obj$5);
 function createValueGetter(args) {
     if (!args || !isNaN(+args)) {
         return new StaticValue(args || 0);
@@ -21424,8 +21435,8 @@ var vertexBufferSemanticMap = {
     TANGENT_BS2: "aTargetTangent2",
     TANGENT_BS3: "aTargetTangent3"
 };
-var _obj$5;
-var BYTES_TYPE_MAP = (_obj$5 = {}, _obj$5[exports.BufferDataType.Float] = 4, _obj$5[exports.BufferDataType.Int] = 4, _obj$5[exports.BufferDataType.UnsignedInt] = 4, _obj$5[exports.BufferDataType.Short] = 2, _obj$5[exports.BufferDataType.UnsignedShort] = 2, _obj$5[exports.BufferDataType.Byte] = 1, _obj$5[exports.BufferDataType.UnsignedByte] = 1, _obj$5);
+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);
 }
@@ -22942,7 +22953,7 @@ var canvasPool = new CanvasPool();
  * `ATLAS_SIZE × ATLAS_SIZE` 的离屏 canvas atlas，字符按需逐个绘制并打包，
  * `Graphics.drawText` 通过逐字 quad 引用 atlas 子矩形渲染。
  *
- * - 同一段文本不同颜色不会重复 upload（颜色由顶点 `vColor` 乘上字形 alpha）
+ * - 同一段文本不同颜色不会重复 upload（颜色由顶点 `vColor` 与字形 RGBA 相乘）
  * - 同一字体/字号下重复字符只渲染一次，显著减少 canvas → texture 上传次数
  *
  * 入参全部展开（避免调用方每帧创建临时 style 对象触发 GC）
@@ -22956,7 +22967,7 @@ var canvasPool = new CanvasPool();
     /**
    * 取(必要时新建)对应字体的字符 atlas
    */ _proto.getAtlas = function getAtlas(fontSize, fontFamily, fontWeight, fontStyle) {
-        // Pixi CanvasText 默认跟随 renderer.resolution；这里对应 Engine.pixelRatio。
+        // 字形 atlas 跟随 Engine.pixelRatio。
         var resolution = this.engine.pixelRatio;
         if (resolution !== this.resolution) {
             this.clear();
@@ -22977,14 +22988,11 @@ var canvasPool = new CanvasPool();
         var probeCtx = probeCanvasAndContext.context;
         var ascentPx = fontSize * 0.8 * resolution;
         var descentPx = fontSize * 0.2 * resolution;
-        try {
-            probeCtx.font = scaledFontString;
-            var m = probeCtx.measureText(METRICS_STRING + BASELINE_SYMBOL);
-            ascentPx = m.actualBoundingBoxAscent || ascentPx;
-            descentPx = m.actualBoundingBoxDescent || descentPx;
-        } finally{
-            canvasPool.releaseCanvasAndContext(probeCanvasAndContext);
-        }
+        probeCtx.font = scaledFontString;
+        var m = probeCtx.measureText(METRICS_STRING + BASELINE_SYMBOL);
+        ascentPx = m.actualBoundingBoxAscent || ascentPx;
+        descentPx = m.actualBoundingBoxDescent || descentPx;
+        canvasPool.releaseCanvasAndContext(probeCanvasAndContext);
         var atlas = new GlyphAtlas(this.engine, scaledFontString, ascentPx, descentPx, fontStyle, resolution);
         this.atlases.set(fontKey, atlas);
         return atlas;
@@ -23020,6 +23028,10 @@ var FULL_REGION = {
     u1: 1,
     v1: 1
 };
+var NINE_PATCH_DRAW_SOURCE_SIZE = "aDrawSourceSize";
+var NINE_PATCH_SOURCE_RECT = "aSourceRect";
+var NINE_PATCH_MARGINS = "aMargins";
+var NINE_PATCH_OPTIONS = "aOptions";
 var Graphics = /*#__PURE__*/ function() {
     function Graphics(engine) {
         this.engine = engine;
@@ -23033,6 +23045,10 @@ var Graphics = /*#__PURE__*/ function() {
         this.colors = [];
         this.uvs = [];
         this.indices = [];
+        this.ninePatchDrawSourceSizes = [];
+        this.ninePatchSourceRects = [];
+        this.ninePatchMargins = [];
+        this.ninePatchOptions = [];
         this.lineStyle = {
             width: 1,
             alignment: 0.5,
@@ -23044,6 +23060,9 @@ var Graphics = /*#__PURE__*/ function() {
         this.currentBatchTexture = null;
         this.transformStack = [];
         this.currentTransform = Matrix3.fromIdentity();
+        this.clipStack = [];
+        this.logicalWidth = 1;
+        this.logicalHeight = 1;
         var _obj;
         this.geometry = Geometry.create(this.engine, {
             attributes: (_obj = {}, _obj[VertexBuffer.PositionKind] = {
@@ -23109,6 +23128,51 @@ var Graphics = /*#__PURE__*/ function() {
             drawCount: 6,
             bufferUsage: glContext.DYNAMIC_DRAW
         });
+        var _obj1;
+        this.ninePatchGeometry = Geometry.create(this.engine, {
+            attributes: (_obj1 = {}, _obj1[VertexBuffer.PositionKind] = {
+                type: glContext.FLOAT,
+                size: 2,
+                data: new Float32Array(8)
+            }, _obj1[VertexBuffer.ColorKind] = {
+                type: glContext.FLOAT,
+                size: 4,
+                data: new Float32Array(16)
+            }, _obj1[VertexBuffer.UVKind] = {
+                type: glContext.FLOAT,
+                size: 2,
+                data: new Float32Array(8)
+            }, _obj1[NINE_PATCH_DRAW_SOURCE_SIZE] = {
+                type: glContext.FLOAT,
+                size: 4,
+                data: new Float32Array(16)
+            }, _obj1[NINE_PATCH_SOURCE_RECT] = {
+                type: glContext.FLOAT,
+                size: 4,
+                data: new Float32Array(16)
+            }, _obj1[NINE_PATCH_MARGINS] = {
+                type: glContext.FLOAT,
+                size: 4,
+                data: new Float32Array(16)
+            }, _obj1[NINE_PATCH_OPTIONS] = {
+                type: glContext.FLOAT,
+                size: 4,
+                data: new Float32Array(16)
+            }, _obj1),
+            indices: {
+                data: new Uint16Array([
+                    0,
+                    1,
+                    2,
+                    2,
+                    1,
+                    3
+                ])
+            },
+            mode: glContext.TRIANGLES,
+            drawCount: 6,
+            bufferUsage: glContext.DYNAMIC_DRAW
+        });
         this.coloredMaterial = Material.create(this.engine, {
             shader: {
                 vertex: "precision highp float;\n        attribute vec2 aPos;\n        attribute vec4 aColor;\n        varying vec4 vColor;\n\n        uniform mat4 effects_MatrixVP;\n        void main() {\n          vColor = aColor;\n          gl_Position = effects_MatrixVP * vec4(aPos, 0.0, 1.0);\n        }",
@@ -23127,12 +23191,21 @@ var Graphics = /*#__PURE__*/ function() {
         this.texturedMaterial.depthTest = false;
         this.texturedMaterial.depthMask = false;
         this.texturedMaterial.blending = true;
-        // 文本 atlas 按 Pixi 的方式在上传时预乘 alpha，因此采样后只需应用顶点色和顶点 alpha。
+        this.ninePatchMaterial = Material.create(this.engine, {
+            shader: {
+                vertex: "precision highp float;\n        attribute vec2 aPos;\n        attribute vec4 aColor;\n        attribute vec2 aUV;\n        attribute vec4 aDrawSourceSize;\n        attribute vec4 aSourceRect;\n        attribute vec4 aMargins;\n        attribute vec4 aOptions;\n        varying vec4 vColor;\n        varying vec2 vUV;\n        varying vec4 vDrawSourceSize;\n        varying vec4 vSourceRect;\n        varying vec4 vMargins;\n        varying vec4 vOptions;\n\n        uniform mat4 effects_MatrixVP;\n        void main() {\n          vColor = aColor;\n          vUV = aUV;\n          vDrawSourceSize = aDrawSourceSize;\n          vSourceRect = aSourceRect;\n          vMargins = aMargins;\n          vOptions = aOptions;\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        varying vec4 vDrawSourceSize;\n        varying vec4 vSourceRect;\n        varying vec4 vMargins;\n        varying vec4 vOptions;\n        uniform sampler2D uMainTexture;\n\n        float mapNinePatchAxis(\n          float pixel,\n          float drawSize,\n          float sourceSize,\n          float marginBegin,\n          float marginEnd,\n          float repeatMode,\n          inout float drawCenter\n        ) {\n          if (pixel < marginBegin) {\n            return pixel / sourceSize;\n          } else if (pixel >= drawSize - marginEnd) {\n            return (sourceSize - (drawSize - pixel)) / sourceSize;\n          } else {\n            if (vOptions.z < 0.5) {\n              drawCenter -= 1.0;\n            }\n\n            if (repeatMode < 0.5) {\n              float ratio = (pixel - marginBegin) / (drawSize - marginBegin - marginEnd);\n              return (marginBegin + ratio * (sourceSize - marginBegin - marginEnd)) / sourceSize;\n            } else if (repeatMode < 1.5) {\n              float offset = mod(pixel - marginBegin, sourceSize - marginBegin - marginEnd);\n              return (marginBegin + offset) / sourceSize;\n            } else {\n              float drawArea = drawSize - marginBegin - marginEnd;\n              float sourceArea = sourceSize - marginBegin - marginEnd;\n              float scale = max(1.0, floor(drawArea / max(sourceArea, 0.0000001) + 0.5));\n              float ratio = mod((pixel - marginBegin) / drawArea * scale, 1.0);\n              return (marginBegin + ratio * sourceArea) / sourceSize;\n            }\n          }\n        }\n\n        void main() {\n          vec2 pixel = vec2(vUV.x, 1.0 - vUV.y) * vDrawSourceSize.xy;\n          float drawCenter = 2.0;\n          vec2 sourceUV = vec2(\n            mapNinePatchAxis(\n              pixel.x, vDrawSourceSize.x, vDrawSourceSize.z,\n              vMargins.x, vMargins.z, vOptions.x, drawCenter\n            ),\n            mapNinePatchAxis(\n              pixel.y, vDrawSourceSize.y, vDrawSourceSize.w,\n              vMargins.y, vMargins.w, vOptions.y, drawCenter\n            )\n          );\n\n          if (drawCenter < 0.5) {\n            discard;\n          }\n\n          vec2 uv = vec2(\n            vSourceRect.x + sourceUV.x * vSourceRect.z,\n            vSourceRect.y - sourceUV.y * vSourceRect.w\n          );\n          vec4 color = texture2D(uMainTexture, uv) * vColor;\n          color.rgb *= color.a;\n          gl_FragColor = color;\n        }"
+            }
+        });
+        this.ninePatchMaterial.depthTest = false;
+        this.ninePatchMaterial.depthMask = false;
+        this.ninePatchMaterial.blending = true;
+        // 文本 atlas 在上传时预乘 alpha，因此纹理 RGB 只需乘顶点色和顶点 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        }"
+                fragment: "precision highp float;\n        varying vec4 vColor;\n        varying vec2 vUV;\n        uniform sampler2D uMainTexture;\n        void main() {\n          vec4 textureColor = texture2D(uMainTexture, vUV);\n          float alpha = textureColor.a * vColor.a;\n          vec3 rgb = textureColor.rgb * vColor.rgb * vColor.a;\n          gl_FragColor = vec4(rgb, alpha);\n        }"
             }
         });
         this.textMaterial.depthTest = false;
@@ -23148,25 +23221,36 @@ var Graphics = /*#__PURE__*/ function() {
         this.vertices.length = 0;
         this.colors.length = 0;
         this.uvs.length = 0;
+        this.ninePatchDrawSourceSizes.length = 0;
+        this.ninePatchSourceRects.length = 0;
+        this.ninePatchMargins.length = 0;
+        this.ninePatchOptions.length = 0;
         this.transformStack = [];
         this.currentTransform = Matrix3.fromIdentity();
+        this.clipStack = [];
         this.currentBatchType = "colored";
         this.currentBatchTexture = null;
-        // 创建从屏幕坐标到 NDC 的投影矩阵，屏幕坐标: (0, 0) 在左下角，(width, height) 在右上角
-        var _this_engine_canvas_getBoundingClientRect = this.engine.canvas.getBoundingClientRect(), width = _this_engine_canvas_getBoundingClientRect.width, height = _this_engine_canvas_getBoundingClientRect.height;
+        this.engine.setScissorTest(false);
+        // 创建从屏幕坐标到 NDC 的投影矩阵，屏幕坐标：(0, 0) 在左上角，(width, height) 在右下角，+Y 向下。
+        var bounds = this.engine.canvas.getBoundingClientRect();
+        var width = bounds.width || this.engine.canvas.width / this.engine.pixelRatio || 1;
+        var height = bounds.height || this.engine.canvas.height / this.engine.pixelRatio || 1;
+        this.logicalWidth = width;
+        this.logicalHeight = 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);
+        this.ninePatchMaterial.setMatrix("effects_MatrixVP", projectionMatrix);
     };
     /**
    * 将当前变换压入栈，并设置新的变换
    * @param transform - 新的变换矩阵(会与当前变换相乘)
    */ _proto.pushTransform = function pushTransform(transform) {
         this.transformStack.push(this.currentTransform.clone());
-        this.currentTransform = this.currentTransform.premultiply(transform);
+        this.currentTransform = this.currentTransform.multiply(transform);
     };
     /**
    * 恢复上一个变换
@@ -23178,10 +23262,81 @@ var Graphics = /*#__PURE__*/ function() {
         }
         this.currentTransform = transform;
     };
+    /** Pushes a local rectangular child clip using a screen-space AABB scissor. */ _proto.pushClipRect = function pushClipRect(x, y, width, height) {
+        var elements = this.currentTransform.elements;
+        var corners = [
+            [
+                x,
+                y
+            ],
+            [
+                x + width,
+                y
+            ],
+            [
+                x,
+                y + height
+            ],
+            [
+                x + width,
+                y + height
+            ]
+        ];
+        var left = Infinity;
+        var top = Infinity;
+        var right = -Infinity;
+        var bottom = -Infinity;
+        for(var _iterator = _create_for_of_iterator_helper_loose(corners), _step; !(_step = _iterator()).done;){
+            var corner = _step.value;
+            var transformedX = elements[0] * corner[0] + elements[3] * corner[1] + elements[6];
+            var transformedY = elements[1] * corner[0] + elements[4] * corner[1] + elements[7];
+            left = Math.min(left, transformedX);
+            top = Math.min(top, transformedY);
+            right = Math.max(right, transformedX);
+            bottom = Math.max(bottom, transformedY);
+        }
+        var parent = this.clipStack[this.clipStack.length - 1];
+        if (parent) {
+            left = Math.max(left, parent.x);
+            top = Math.max(top, parent.y);
+            right = Math.min(right, parent.x + parent.width);
+            bottom = Math.min(bottom, parent.y + parent.height);
+        }
+        var clip = {
+            x: left,
+            y: top,
+            width: Math.max(0, right - left),
+            height: Math.max(0, bottom - top)
+        };
+        var previous = parent;
+        this.clipStack.push(clip);
+        if (!this.clipRectsEqual(previous, clip)) {
+            this.flushBatch();
+            this.applyClipRect(clip);
+        }
+    };
+    /** Restores the parent rectangular clip. */ _proto.popClipRect = function popClipRect() {
+        var previous = this.clipStack.pop();
+        if (!previous) {
+            console.warn("Graphics: clip stack is empty.");
+            return;
+        }
+        var clip = this.clipStack[this.clipStack.length - 1];
+        if (!this.clipRectsEqual(previous, clip)) {
+            this.flushBatch();
+            if (clip) {
+                this.applyClipRect(clip);
+            } else {
+                this.engine.setScissorTest(false);
+            }
+        }
+    };
     /**
    * 刷新并渲染所有累积的绘制命令
    */ _proto.end = function end() {
         this.flushBatch();
+        this.clipStack = [];
+        this.engine.setScissorTest(false);
     };
     /**
    * 切换到指定批次类型/纹理。若与当前批次不一致，先 flush 已累积顶点
@@ -23194,6 +23349,24 @@ var Graphics = /*#__PURE__*/ function() {
         this.currentBatchType = type;
         this.currentBatchTexture = texture;
     };
+    _proto.applyClipRect = function applyClipRect(clip) {
+        var framebufferWidth = this.engine.canvas.width;
+        var framebufferHeight = this.engine.canvas.height;
+        var scaleX = framebufferWidth / this.logicalWidth;
+        var scaleY = framebufferHeight / this.logicalHeight;
+        var left = Math.max(0, Math.min(framebufferWidth, Math.floor(clip.x * scaleX)));
+        var top = Math.max(0, Math.min(framebufferHeight, Math.floor(clip.y * scaleY)));
+        var right = Math.max(left, Math.min(framebufferWidth, Math.ceil((clip.x + clip.width) * scaleX)));
+        var bottom = Math.max(top, Math.min(framebufferHeight, Math.ceil((clip.y + clip.height) * scaleY)));
+        this.engine.setScissorTest(true);
+        this.engine.setScissor(left, framebufferHeight - bottom, right - left, bottom - top);
+    };
+    _proto.clipRectsEqual = function clipRectsEqual(left, right) {
+        if (!left || !right) {
+            return left === right;
+        }
+        return left.x === right.x && left.y === right.y && left.width === right.width && left.height === right.height;
+    };
     /**
    * 提交当前累积的顶点到 renderer，清空缓冲(批次内部 flush 不重置 batchType)
    */ _proto.flushBatch = function flushBatch() {
@@ -23207,37 +23380,48 @@ var Graphics = /*#__PURE__*/ function() {
         var colorsArray = new Float32Array(this.colors);
         var uvsArray = new Float32Array(this.uvs);
         var indicesArray = new Uint16Array(this.indices);
-        this.updateAttributeData(VertexBuffer.PositionKind, verticesArray, 2);
-        this.updateAttributeData(VertexBuffer.ColorKind, colorsArray, 4);
-        this.updateAttributeData(VertexBuffer.UVKind, uvsArray, 2);
-        this.geometry.setIndexData(indicesArray);
-        this.geometry.setDrawCount(this.currentIndexCount);
+        var geometry = this.currentBatchType === "ninePatch" ? this.ninePatchGeometry : this.geometry;
+        this.updateAttributeData(geometry, VertexBuffer.PositionKind, verticesArray, 2);
+        this.updateAttributeData(geometry, VertexBuffer.ColorKind, colorsArray, 4);
+        this.updateAttributeData(geometry, VertexBuffer.UVKind, uvsArray, 2);
+        if (this.currentBatchType === "ninePatch") {
+            this.updateAttributeData(geometry, NINE_PATCH_DRAW_SOURCE_SIZE, new Float32Array(this.ninePatchDrawSourceSizes), 4);
+            this.updateAttributeData(geometry, NINE_PATCH_SOURCE_RECT, new Float32Array(this.ninePatchSourceRects), 4);
+            this.updateAttributeData(geometry, NINE_PATCH_MARGINS, new Float32Array(this.ninePatchMargins), 4);
+            this.updateAttributeData(geometry, NINE_PATCH_OPTIONS, new Float32Array(this.ninePatchOptions), 4);
+        }
+        geometry.setIndexData(indicesArray);
+        geometry.setDrawCount(this.currentIndexCount);
         var material;
-        if (this.currentBatchType === "textured" || this.currentBatchType === "text") {
-            material = this.currentBatchType === "text" ? this.textMaterial : this.texturedMaterial;
+        if (this.currentBatchType === "textured" || this.currentBatchType === "text" || this.currentBatchType === "ninePatch") {
+            material = this.currentBatchType === "text" ? this.textMaterial : this.currentBatchType === "ninePatch" ? this.ninePatchMaterial : this.texturedMaterial;
             var _this_currentBatchTexture;
             var tex = (_this_currentBatchTexture = this.currentBatchTexture) != null ? _this_currentBatchTexture : this.engine.whiteTexture;
             material.setTexture("uMainTexture", tex);
         } else {
             material = this.coloredMaterial;
         }
-        this.engine.renderer.drawGeometry(this.geometry, Matrix4.IDENTITY, material);
+        this.engine.renderer.drawGeometry(geometry, Matrix4.IDENTITY, material);
         this.indices.length = 0;
         this.vertices.length = 0;
         this.colors.length = 0;
         this.uvs.length = 0;
-    };
-    _proto.updateAttributeData = function updateAttributeData(name, data, size) {
-        var _this_geometry_getVertexBuffer;
-        var dataBuffer = (_this_geometry_getVertexBuffer = this.geometry.getVertexBuffer(name)) == null ? void 0 : _this_geometry_getVertexBuffer.getBuffer();
+        this.ninePatchDrawSourceSizes.length = 0;
+        this.ninePatchSourceRects.length = 0;
+        this.ninePatchMargins.length = 0;
+        this.ninePatchOptions.length = 0;
+    };
+    _proto.updateAttributeData = function updateAttributeData(geometry, name, data, size) {
+        var _geometry_getVertexBuffer;
+        var dataBuffer = (_geometry_getVertexBuffer = geometry.getVertexBuffer(name)) == null ? void 0 : _geometry_getVertexBuffer.getBuffer();
         if (dataBuffer && data.byteLength > dataBuffer.capacity) {
-            this.geometry.setVerticesBuffer(new VertexBuffer(this.engine, data, name, {
+            geometry.setVerticesBuffer(new VertexBuffer(this.engine, data, name, {
                 updatable: true,
                 size: size
             }));
             return;
         }
-        this.geometry.setAttributeData(name, data);
+        geometry.setAttributeData(name, data);
     };
     /**
    * 线段顶点按顺序连接 (p0-p1, p1-p2, p2-p3, ...)
@@ -23320,8 +23504,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
@@ -23364,8 +23548,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
@@ -23391,9 +23575,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 当前批次
@@ -23406,14 +23590,41 @@ var Graphics = /*#__PURE__*/ function() {
         this.pushQuad(x, y, width, height, color, region);
     };
     /**
-   * 绘制文本（本地坐标，Y 向上，(x, y) 为文本左下角）。
+   * Draws a nine-patch as one quad. Stretching and repetition are resolved in the fragment shader,
+   * so Tile and TileFit do not expand into CPU-side geometry.
+   */ _proto.drawNinePatch = function drawNinePatch(x, y, width, height, texture, options, color) {
+        if (color === void 0) color = Color.WHITE;
+        if (width <= 0 || height <= 0 || options.sourceWidth <= 0 || options.sourceHeight <= 0) {
+            return;
+        }
+        this.ensureBatch("ninePatch", texture);
+        var sourceU = options.sourceX / texture.width;
+        var sourceV = 1 - options.sourceY / texture.height;
+        var sourceUSize = options.sourceWidth / texture.width;
+        var sourceVSize = options.sourceHeight / texture.height;
+        var _options_horizontalMode;
+        var horizontalMode = (_options_horizontalMode = options.horizontalMode) != null ? _options_horizontalMode : 0;
+        var _options_verticalMode;
+        var verticalMode = (_options_verticalMode = options.verticalMode) != null ? _options_verticalMode : 0;
+        var _options_drawCenter;
+        var drawCenter = Number((_options_drawCenter = options.drawCenter) != null ? _options_drawCenter : true);
+        this.pushQuad(x, y, width, height, color, FULL_REGION);
+        for(var i = 0; i < 4; i++){
+            this.ninePatchDrawSourceSizes.push(width, height, options.sourceWidth, options.sourceHeight);
+            this.ninePatchSourceRects.push(sourceU, sourceV, sourceUSize, sourceVSize);
+            this.ninePatchMargins.push(options.marginLeft, options.marginTop, options.marginRight, options.marginBottom);
+            this.ninePatchOptions.push(horizontalMode, verticalMode, drawCenter, 0);
+        }
+    };
+    /**
+   * 绘制文本（本地坐标，Y 向下，(x, y) 为文本 cell 左上角）。
    *
    * 文本走字符级 bitmap atlas（同一字体下每个字只渲染一次，任意文本组合复用 atlas）;
-   * `color` 作为乘色与白色字形 alpha 相乘，任意颜色都不会污染 atlas。
+   * `color` 与 atlas 字形 RGBA 相乘，任意颜色都不会污染 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
@@ -23432,10 +23643,11 @@ var Graphics = /*#__PURE__*/ function() {
         this.ensureBatch("text", atlas.texture);
         var lineHeight = atlas.lineHeight;
         var cursorX = x;
+        var characters = Array.from(text);
         // ensureChar 可能往 atlas canvas 写新字并打 dirty 标；实际 upload 推迟到
         // flushBatch 统一处理，这样一帧多次 drawText 共写同一 atlas 只 upload 一次
-        for(var i = 0; i < text.length; i++){
-            var info = atlas.ensureChar(text[i]);
+        for(var i = 0; i < characters.length; i++){
+            var info = atlas.ensureChar(characters[i]);
             if (!info) {
                 continue;
             }
@@ -23457,11 +23669,35 @@ var Graphics = /*#__PURE__*/ function() {
             cursorX += info.advance;
         }
     };
+    /** Measures text with the same glyph metrics used by {@link drawText}. */ _proto.measureText = function measureText(text, fontSize, fontFamily, fontWeight, fontStyle) {
+        if (fontFamily === void 0) fontFamily = "sans-serif";
+        if (fontWeight === void 0) fontWeight = "normal";
+        if (fontStyle === void 0) fontStyle = "normal";
+        var atlas = this.textCache.getAtlas(fontSize, fontFamily, fontWeight, fontStyle);
+        var characters = Array.from(text);
+        var advances = [];
+        var width = 0;
+        for(var _iterator = _create_for_of_iterator_helper_loose(characters), _step; !(_step = _iterator()).done;){
+            var character = _step.value;
+            var _atlas_ensureChar;
+            var _atlas_ensureChar_advance;
+            var advance = (_atlas_ensureChar_advance = (_atlas_ensureChar = atlas.ensureChar(character)) == null ? void 0 : _atlas_ensureChar.advance) != null ? _atlas_ensureChar_advance : 0;
+            advances.push(advance);
+            width += advance;
+        }
+        return {
+            width: width,
+            lineHeight: atlas.lineHeight,
+            advances: advances
+        };
+    };
     _proto.dispose = function dispose() {
         this.geometry.dispose();
+        this.ninePatchGeometry.dispose();
         this.coloredMaterial.dispose();
         this.texturedMaterial.dispose();
         this.textMaterial.dispose();
+        this.ninePatchMaterial.dispose();
         this.textCache.dispose();
     };
     _proto.buildShape = function buildShape(shape, color) {
@@ -23469,7 +23705,7 @@ var Graphics = /*#__PURE__*/ function() {
         var indexOffset = this.indices.length;
         var vertexOffset = this.vertices.length / 2;
         buildPoints.length = 0;
-        shape.build(buildPoints);
+        shape.build(buildPoints, this.getScreenScale());
         shape.triangulate(buildPoints, this.vertices, vertexOffset, this.indices, indexOffset);
         this.applyTransformAndColor(vertexOffset, this.vertices.length / 2 - vertexOffset, color);
     };
@@ -23479,11 +23715,19 @@ var Graphics = /*#__PURE__*/ function() {
         this.indices.length;
         var vertexOffset = this.vertices.length / 2;
         buildPoints.length = 0;
-        shape.build(buildPoints);
+        shape.build(buildPoints, this.getScreenScale());
         this.lineStyle.width = thickness;
         buildLine(buildPoints, this.lineStyle, false, closed, this.vertices, 2, vertexOffset, this.indices);
         this.applyTransformAndColor(vertexOffset, this.vertices.length / 2 - vertexOffset, color);
     };
+    _proto.getScreenScale = function getScreenScale() {
+        var transform = this.currentTransform.elements;
+        var transformScaleX = Math.hypot(transform[0], transform[1]);
+        var transformScaleY = Math.hypot(transform[3], transform[4]);
+        var framebufferScaleX = this.engine.canvas.width / this.logicalWidth;
+        var framebufferScaleY = this.engine.canvas.height / this.logicalHeight;
+        return Math.max(transformScaleX * framebufferScaleX, transformScaleY * framebufferScaleY, 1);
+    };
     _proto.setTriangleShape = function setTriangleShape(x1, y1, x2, y2, x3, y3) {
         this.triangleShape.x = x1;
         this.triangleShape.y = y1;
@@ -23528,7 +23772,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,
@@ -23554,19 +23798,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++){
@@ -24532,2086 +24776,6 @@ exports.FrameComponent = __decorate([
 // 第四列 (位移) 乘 1，无需修改
 }
 
-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);
-    };
-    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);
-}
-
-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;
-    }
-    var _proto = InputEvent.prototype;
-    _proto.isPressed = function isPressed() {
-        return this.pressed && !this.canceled;
-    };
-    _proto.isReleased = function isReleased() {
-        return !this.pressed && !this.canceled;
-    };
-    _proto.isCanceled = function isCanceled() {
-        return this.canceled;
-    };
-    _proto.isEcho = function isEcho() {
-        return false;
-    };
-    _proto.xformedBy = function xformedBy(transform) {
-        var event = new InputEvent();
-        event.device = this.device;
-        event.pressed = this.pressed;
-        event.canceled = this.canceled;
-        return event;
-    };
-    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;
-    };
-    _proto.xformedBy = function xformedBy(transform) {
-        var event = new InputEventWithModifiers();
-        this.copyModifiersTo(event);
-        return event;
-    };
-    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;
-    };
-    _proto.xformedBy = function xformedBy(transform) {
-        var event = new InputEventKey();
-        this.copyModifiersTo(event);
-        event.keycode = this.keycode;
-        event.physicalKeycode = this.physicalKeycode;
-        event.keyLabel = this.keyLabel;
-        event.unicode = this.unicode;
-        event.location = this.location;
-        event.echo = this.echo;
-        return event;
-    };
-    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;
-    }
-    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);
-    };
-    _proto.xformedBy = function xformedBy(transform) {
-        var event = new InputEventMouse();
-        this.copyMouseTo(event);
-        event.position.copyFrom(transformPoint(transform, this.position));
-        return event;
-    };
-    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;
-    }
-    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
-    ],
-    topRight: [
-        1,
-        1,
-        1,
-        1
-    ],
-    bottomLeft: [
-        0,
-        0,
-        0,
-        0
-    ],
-    bottomRight: [
-        1,
-        0,
-        1,
-        0
-    ],
-    centerLeft: [
-        0,
-        0.5,
-        0,
-        0.5
-    ],
-    centerTop: [
-        0.5,
-        1,
-        0.5,
-        1
-    ],
-    centerRight: [
-        1,
-        0.5,
-        1,
-        0.5
-    ],
-    centerBottom: [
-        0.5,
-        0,
-        0.5,
-        0
-    ],
-    center: [
-        0.5,
-        0.5,
-        0.5,
-        0.5
-    ],
-    leftWide: [
-        0,
-        0,
-        0,
-        1
-    ],
-    topWide: [
-        0,
-        1,
-        1,
-        1
-    ],
-    rightWide: [
-        1,
-        0,
-        1,
-        1
-    ],
-    bottomWide: [
-        0,
-        0,
-        1,
-        0
-    ],
-    vcenterWide: [
-        0.5,
-        0,
-        0.5,
-        1
-    ],
-    hcenterWide: [
-        0,
-        0.5,
-        1,
-        0.5
-    ],
-    fullRect: [
-        0,
-        0,
-        1,
-        1
-    ]
-};
-/**
- * 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 = 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;
-        }
-        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());
-        }
-        this.updateLayout();
-    };
-    _proto.setSize = function setSize(width, height) {
-        if (this.size.x === width && this.size.y === height) {
-            return;
-        }
-        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();
-        }
-    };
-    _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();
-        }
-    };
-    _proto.setAnchorMin = function setAnchorMin(x, y) {
-        if (this.anchorMin.x !== x || this.anchorMin.y !== y) {
-            this.anchorMin.set(x, y);
-            this.updateLayout();
-        }
-    };
-    _proto.setAnchorMax = function setAnchorMax(x, y) {
-        if (this.anchorMax.x !== x || this.anchorMax.y !== y) {
-            this.anchorMax.set(x, y);
-            this.updateLayout();
-        }
-    };
-    _proto.setOffsetMin = function setOffsetMin(x, y) {
-        if (this.offsetMin.x !== x || this.offsetMin.y !== y) {
-            this.offsetMin.set(x, y);
-            this.updateLayout();
-        }
-    };
-    _proto.setOffsetMax = function setOffsetMax(x, y) {
-        if (this.offsetMax.x !== x || this.offsetMax.y !== y) {
-            this.offsetMax.set(x, y);
-            this.updateLayout();
-        }
-    };
-    _proto.getRect = function getRect() {
-        return {
-            position: this.position.clone(),
-            size: this.size.clone()
-        };
-    };
-    _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], 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(minX, minY);
-            this.anchorMax.set(maxX, maxY);
-        } else {
-            var rect = this.getRect();
-            this.anchorMin.set(minX, minY);
-            this.anchorMax.set(maxX, maxY);
-            this.computeOffsets(rect, this.getParentRect());
-        }
-        this.updateLayout();
-    };
-    _proto.setOffsetsPreset = function setOffsetsPreset(preset, margin) {
-        if (margin === void 0) margin = 0;
-        if (!this.parent) {
-            return;
-        }
-        var parentSize = this.parent.size;
-        var width = this.size.x;
-        var height = this.size.y;
-        var a = this.anchorMin;
-        var b = this.anchorMax;
-        var minX = 0, maxX = 0, minY = 0, maxY = 0;
-        switch(preset){
-            case "topLeft":
-            case "bottomLeft":
-            case "centerLeft":
-            case "topWide":
-            case "bottomWide":
-            case "leftWide":
-            case "hcenterWide":
-            case "fullRect":
-                minX = margin - a.x * parentSize.x;
-                maxX = margin + width - b.x * parentSize.x;
-                break;
-            case "centerTop":
-            case "centerBottom":
-            case "center":
-            case "vcenterWide":
-                minX = 0.5 * parentSize.x - width / 2 - a.x * parentSize.x;
-                maxX = 0.5 * parentSize.x + width / 2 - b.x * parentSize.x;
-                break;
-            default:
-                minX = parentSize.x - margin - width - a.x * parentSize.x;
-                maxX = parentSize.x - margin - b.x * parentSize.x;
-                break;
-        }
-        switch(preset){
-            case "bottomLeft":
-            case "bottomRight":
-            case "centerBottom":
-            case "leftWide":
-            case "rightWide":
-            case "bottomWide":
-            case "vcenterWide":
-            case "fullRect":
-                minY = margin - a.y * parentSize.y;
-                maxY = margin + height - b.y * parentSize.y;
-                break;
-            case "centerLeft":
-            case "centerRight":
-            case "center":
-            case "hcenterWide":
-                minY = 0.5 * parentSize.y - height / 2 - a.y * parentSize.y;
-                maxY = 0.5 * parentSize.y + height / 2 - b.y * parentSize.y;
-                break;
-            default:
-                minY = parentSize.y - margin - height - a.y * parentSize.y;
-                maxY = parentSize.y - margin - b.y * parentSize.y;
-                break;
-        }
-        this.offsetMin.set(minX, minY);
-        this.offsetMax.set(maxX, maxY);
-        this.updateLayout();
-    };
-    _proto.setAnchorsAndOffsetsPreset = function setAnchorsAndOffsetsPreset(preset, margin) {
-        if (margin === void 0) margin = 0;
-        this.setAnchorsPreset(preset, false);
-        this.setOffsetsPreset(preset, margin);
-    };
-    _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.acceptEvent = function acceptEvent() {
-        var _this_root;
-        (_this_root = this.root) == null ? void 0 : _this_root.acceptControlEvent(this);
-    };
-    _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(location, event) {};
-    _proto.onMouseLeave = function onMouseLeave() {};
-    _proto.onMouseWheel = function onMouseWheel(location, delta, event) {};
-    _proto.onMouseDown = function onMouseDown(location, button, event) {};
-    _proto.onMouseUp = function onMouseUp(location, button, event) {};
-    _proto.onTouchDown = function onTouchDown(location, pointerId, event) {};
-    _proto.onTouchMove = function onTouchMove(location, pointerId, event) {};
-    _proto.onTouchUp = function onTouchUp(location, pointerId, 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 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;
-        this.applyBounds(left, bottom, right - left, top - bottom);
-    };
-    _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) {
-                this._defaultCursorShape = value;
-            }
-        },
-        {
-            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$4;
-var cursorNames = (_obj$4 = {}, _obj$4[exports.CursorShape.Arrow] = "default", _obj$4[exports.CursorShape.Ibeam] = "text", _obj$4[exports.CursorShape.PointingHand] = "pointer", _obj$4[exports.CursorShape.Cross] = "crosshair", _obj$4[exports.CursorShape.Wait] = "wait", _obj$4[exports.CursorShape.Busy] = "progress", _obj$4[exports.CursorShape.Drag] = "grab", _obj$4[exports.CursorShape.CanDrop] = "copy", _obj$4[exports.CursorShape.Forbidden] = "not-allowed", _obj$4[exports.CursorShape.Vsize] = "ns-resize", _obj$4[exports.CursorShape.Hsize] = "ew-resize", _obj$4[exports.CursorShape.Bdiagsize] = "nesw-resize", _obj$4[exports.CursorShape.Fdiagsize] = "nwse-resize", _obj$4[exports.CursorShape.Move] = "move", _obj$4[exports.CursorShape.Vsplit] = "row-resize", _obj$4[exports.CursorShape.Hsplit] = "col-resize", _obj$4[exports.CursorShape.Help] = "help", _obj$4);
-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;
-}
-function getWheelDelta(event) {
-    return event.buttonIndex === exports.MouseButton.WheelUp || event.buttonIndex === exports.MouseButton.WheelLeft ? event.factor : -event.factor;
-}
-/** 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.inputHandled = false;
-        _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) {
-        this.inputHandled = false;
-        this.cleanupInternalState();
-        this.processGUIInput(event);
-        this.postGrabClickFocus();
-    };
-    _proto.isInputHandled = function isInputHandled() {
-        return this.inputHandled;
-    };
-    _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.acceptControlEvent = function acceptControlEvent(control) {
-        if (this.isControlUsable(control)) {
-            this.inputHandled = true;
-        }
-    };
-    _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);
-    };
-    _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);
-        }
-        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);
-            }
-        }
-    };
-    _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) {
-                this.callControlInput(current, event.xformedBy(this.getGlobalInverse(current)));
-            }
-            var forcePassWheel = _instanceof1(event, InputEventMouseButton) && isWheelButton(event.buttonIndex) && current.mouseForcePassScrollEvents;
-            if (this.inputHandled || filter === exports.MouseFilter.Stop && pointerEvent && !forcePassWheel) {
-                this.inputHandled = true;
-                return;
-            }
-            current = current.parent;
-        }
-    };
-    _proto.callControlInput = function callControlInput(control, event) {
-        if (_instanceof1(event, InputEventMouseButton)) {
-            if (isWheelButton(event.buttonIndex)) {
-                control.onMouseWheel(event.position, getWheelDelta(event), event);
-            } else if (event.isPressed()) {
-                control.onMouseDown(event.position, event.buttonIndex, event);
-            } else {
-                control.onMouseUp(event.position, event.buttonIndex, event);
-            }
-        } else if (_instanceof1(event, InputEventMouseMotion)) {
-            control.onMouseMove(event.position, event);
-        } else if (_instanceof1(event, InputEventScreenTouch)) {
-            if (event.isPressed()) {
-                control.onTouchDown(event.position, event.index, event);
-            } else {
-                control.onTouchUp(event.position, event.index, event);
-            }
-        } else if (_instanceof1(event, InputEventScreenDrag)) {
-            control.onTouchMove(event.position, event.index, 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 shape = exports.CursorShape.Arrow;
-        while(current && current !== this){
-            var candidate = current.getCursorShape(this.toLocal(current, position));
-            if (candidate !== exports.CursorShape.Arrow) {
-                shape = candidate;
-                break;
-            }
-            if (current.getEffectiveMouseFilter() === exports.MouseFilter.Stop) {
-                break;
-            }
-            current = current.parent;
-        }
-        this.engine.canvas.style.cursor = cursorNames[shape];
-    };
-    _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);
-
-/**
- * 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 = 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;
-        }
-    };
-    _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);
     function CameraController(engine, props) {
@@ -26646,6 +24810,42 @@ 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() {
@@ -26654,6 +24854,255 @@ var CameraVFXItemLoader = /*#__PURE__*/ function(Plugin) {
     return CameraVFXItemLoader;
 }(_wrap_native_super(Plugin));
 
+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.KeyLocation = void 0;
+(function(KeyLocation) {
+    KeyLocation[KeyLocation["Unspecified"] = 0] = "Unspecified";
+    KeyLocation[KeyLocation["Left"] = 1] = "Left";
+    KeyLocation[KeyLocation["Right"] = 2] = "Right";
+})(exports.KeyLocation || (exports.KeyLocation = {}));
+
+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 = InputEvent.prototype;
+    _proto.accept = function accept() {
+        this._accepted = true;
+    };
+    _proto.clearAccepted = function clearAccepted() {
+        this._accepted = false;
+    };
+    _proto.isAccepted = function isAccepted() {
+        return this._accepted;
+    };
+    _proto.isPressed = function isPressed() {
+        return this.pressed && !this.canceled;
+    };
+    _proto.isReleased = function isReleased() {
+        return !this.pressed && !this.canceled;
+    };
+    _proto.isCanceled = function isCanceled() {
+        return this.canceled;
+    };
+    _proto.isEcho = function isEcho() {
+        return false;
+    };
+    _proto.xformedBy = function xformedBy(transform) {
+        return this;
+    };
+    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;
+    };
+    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;
+    }
+    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;
+    }
+    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 EVENT_TYPE_CLICK = "click";
 var EVENT_TYPE_TOUCH_START = "touchstart";
 var EVENT_TYPE_TOUCH_MOVE = "touchmove";
@@ -26664,49 +25113,52 @@ exports.PointerEventType = void 0;
     PointerEventType[PointerEventType["PointerUp"] = 1] = "PointerUp";
     PointerEventType[PointerEventType["PointerMove"] = 2] = "PointerMove";
 })(exports.PointerEventType || (exports.PointerEventType = {}));
-var EventSystem = /*#__PURE__*/ function() {
+var EventSystem = /*#__PURE__*/ function(EventEmitter) {
+    _inherits(EventSystem, EventEmitter);
     function EventSystem(engine, allowPropagation) {
-        var _this = this;
         if (allowPropagation === void 0) allowPropagation = false;
-        this.engine = engine;
-        this.allowPropagation = allowPropagation;
-        this.skipPointerMovePicking = true;
-        this.emulateMouseFromTouch = true;
-        this.emulateTouchFromMouse = false;
-        this._enabled = true;
-        this.handlers = {};
-        this.nativeHandlers = [];
-        this.target = null;
-        this.mouseState = null;
-        this.touchStates = new Map();
-        this.mouseFromTouchIndex = null;
-        this.touchFromMousePressed = false;
-        this.addedTabIndex = false;
-        this.addedOutlineStyle = false;
-        this.onNativeWheel = function(event) {
+        var _this;
+        _this = EventEmitter.call(this) || this;
+        _this.engine = engine;
+        _this.allowPropagation = allowPropagation;
+        _this.skipPointerMovePicking = true;
+        _this.emulateMouseFromTouch = true;
+        _this.emulateTouchFromMouse = false;
+        _this._enabled = true;
+        _this.handlers = {};
+        _this.nativeHandlers = [];
+        _this.target = null;
+        _this.mouseState = null;
+        _this.mouseButtonMask = exports.MouseButtonMask.None;
+        _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;
+                handled = _this.pushWheelButton(event.deltaY < 0 ? exports.MouseButton.WheelUp : exports.MouseButton.WheelDown, normalizeWheelFactor(event.deltaY, event.deltaMode), 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;
+                handled = _this.pushWheelButton(event.deltaX < 0 ? exports.MouseButton.WheelLeft : exports.MouseButton.WheelRight, normalizeWheelFactor(event.deltaX, event.deltaMode), position, event) || handled;
             }
             _this.consumeNativeEvent(event, handled);
         };
-        this.onNativeKeyDown = function(event) {
+        _this.onNativeKeyDown = function(event) {
             _this.handleNativeKey(event, true);
         };
-        this.onNativeKeyUp = function(event) {
+        _this.onNativeKeyUp = function(event) {
             _this.handleNativeKey(event, false);
         };
-        this.onNativeMouseDown = function(event) {
+        _this.onNativeMouseDown = function(event) {
             _this.handleNativeMouseDown(event);
         };
-        this.onNativeMouseMove = function(event) {
+        _this.onNativeMouseMove = function(event) {
             var _state;
             if (!_this.enabled || !_this.target) {
                 return;
@@ -26718,18 +25170,22 @@ var EventSystem = /*#__PURE__*/ function() {
             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)) {
+            (_state = state).inputHandled || (_state.inputHandled = handled);
+            if (!handled && (!state.pressed || !state.inputHandled)) {
                 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) {
+        _this.onNativeMouseUp = function(event) {
             if (!_this.enabled || !_this.target) {
                 return;
             }
+            // Keep the canonical mask in sync even when mouseState already ended on a
+            // previous button release. The target and Window listeners may see the
+            // same mouseup, but clearing a bit twice is intentionally idempotent.
+            _this.setMouseButtonPressed(event.button, false);
             var position = _this.getCanvasPosition(event.clientX, event.clientY);
             var existingState = _this.mouseState;
             if (!(existingState == null ? void 0 : existingState.pressed)) {
@@ -26738,16 +25194,16 @@ var EventSystem = /*#__PURE__*/ function() {
             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)) {
+            if (!state.inputHandled && !handled && _this.isClick(state, position)) {
                 _this.dispatchEvent(EVENT_TYPE_CLICK, pointerEvent);
             }
-            if (!handled && !state.controlHandled) {
+            if (!handled && !state.inputHandled) {
                 _this.dispatchEvent(EVENT_TYPE_TOUCH_END, pointerEvent);
             }
             _this.mouseState = null;
-            _this.consumeNativeEvent(event, handled || state.controlHandled || !_this.allowPropagation);
+            _this.consumeNativeEvent(event, handled || state.inputHandled || !_this.allowPropagation);
         };
-        this.onNativeTouchStart = function(event) {
+        _this.onNativeTouchStart = function(event) {
             if (!_this.enabled) {
                 return;
             }
@@ -26759,7 +25215,7 @@ var EventSystem = /*#__PURE__*/ function() {
                 _this.touchStates.set(touch.identifier, state);
                 state.pressed = true;
                 var handled = _this.pushNativeScreenTouch(touch.identifier, position, true, false, false);
-                state.controlHandled = handled;
+                state.inputHandled = handled;
                 if (!handled) {
                     var pointerEvent = _this.createPointerEvent(event, position, state);
                     _this.dispatchEvent(EVENT_TYPE_TOUCH_START, pointerEvent);
@@ -26768,7 +25224,7 @@ var EventSystem = /*#__PURE__*/ function() {
             }
             _this.preventTouchDefaults(event);
         };
-        this.onNativeTouchMove = function(event) {
+        _this.onNativeTouchMove = function(event) {
             if (!_this.enabled) {
                 return;
             }
@@ -26782,8 +25238,8 @@ var EventSystem = /*#__PURE__*/ function() {
                 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) {
+                (_state = state).inputHandled || (_state.inputHandled = handled);
+                if (!handled && !state.inputHandled) {
                     var pointerEvent = _this.createPointerEvent(event, position, state, velocity);
                     _this.dispatchEvent(EVENT_TYPE_TOUCH_MOVE, pointerEvent);
                 }
@@ -26792,24 +25248,26 @@ var EventSystem = /*#__PURE__*/ function() {
             }
             _this.preventTouchDefaults(event);
         };
-        this.onNativeTouchEnd = function(event) {
+        _this.onNativeTouchEnd = function(event) {
             _this.handleNativeTouchEnd(event, false);
         };
-        this.onNativeTouchCancel = function(event) {
+        _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();
-            }
+        _this.onCanvasFocus = function() {
+            _this.emit("canvasFocus");
+        };
+        _this.onCanvasBlur = function() {
+            _this.emit("canvasBlur");
         };
+        return _this;
     }
     var _proto = EventSystem.prototype;
-    _proto.bindListeners = function bindListeners(target) {
+    /**
+   * Rebinds native input listeners to a canvas.
+   *
+   * Rebind or unbind only while there are no active key, mouse, touch, or drag sessions.
+   */ _proto.bindListeners = function bindListeners(target) {
         this.unbindListeners();
         this.target = target;
         if (!target || typeof window === "undefined") {
@@ -26846,7 +25304,8 @@ var EventSystem = /*#__PURE__*/ function() {
         });
         this.addNativeHandler(target, "keydown", this.onNativeKeyDown);
         this.addNativeHandler(target, "keyup", this.onNativeKeyUp);
-        this.addNativeHandler(window, "blur", this.onWindowBlur);
+        this.addNativeHandler(target, "focus", this.onCanvasFocus);
+        this.addNativeHandler(target, "blur", this.onCanvasBlur);
     };
     _proto.dispatchEvent = function dispatchEvent(type, event) {
         var handlers = this.handlers[type];
@@ -26880,11 +25339,7 @@ var EventSystem = /*#__PURE__*/ function() {
         }
     };
     _proto.dispose = function dispose() {
-        this.engine.windowRoot.cancelPointerInput();
-        this.mouseState = null;
-        this.touchStates.clear();
-        this.mouseFromTouchIndex = null;
-        this.touchFromMousePressed = false;
+        this.resetInputState();
         this.handlers = {};
         this.unbindListeners();
         this.target = null;
@@ -26893,13 +25348,14 @@ var EventSystem = /*#__PURE__*/ function() {
         if (!this.enabled || !this.target) {
             return;
         }
-        this.focusTarget();
+        this.setMouseButtonPressed(event.button, true);
         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;
+        state.inputHandled = handled;
         if (!handled) {
             var pointerEvent = this.createPointerEvent(event, position, state);
             this.dispatchEvent(EVENT_TYPE_TOUCH_START, pointerEvent);
@@ -26923,8 +25379,7 @@ var EventSystem = /*#__PURE__*/ function() {
         input.altPressed = event.altKey;
         input.metaPressed = event.metaKey;
         input.ctrlPressed = event.ctrlKey;
-        this.engine.windowRoot.pushInput(input);
-        this.consumeNativeEvent(event, this.engine.windowRoot.isInputHandled());
+        this.consumeNativeEvent(event, this.pushInput(input));
     };
     _proto.handleNativeTouchEnd = function handleNativeTouchEnd(event, canceled) {
         if (!this.enabled) {
@@ -26939,14 +25394,14 @@ var EventSystem = /*#__PURE__*/ function() {
             }
             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)) {
+            if (!canceled && !state.inputHandled && !handled && this.isClick(state, position)) {
                 this.dispatchEvent(EVENT_TYPE_CLICK, pointerEvent);
             }
-            if (!handled && !canceled && !state.controlHandled) {
+            if (!handled && !canceled && !state.inputHandled) {
                 this.dispatchEvent(EVENT_TYPE_TOUCH_END, pointerEvent);
             }
             this.touchStates.delete(touch.identifier);
-            this.consumeNativeEvent(event, handled || state.controlHandled || !this.allowPropagation);
+            this.consumeNativeEvent(event, handled || state.inputHandled || !this.allowPropagation);
         }
         this.preventTouchDefaults(event);
     };
@@ -26966,7 +25421,7 @@ var EventSystem = /*#__PURE__*/ function() {
     };
     _proto.pushNativeMouseMotion = function pushNativeMouseMotion(event, position, relative, velocity) {
         var handled = false;
-        if (this.touchFromMousePressed && (event.buttons & 1) !== 0) {
+        if (this.touchFromMousePressed && (this.mouseButtonMask & exports.MouseButtonMask.Left) !== 0) {
             handled = this.pushScreenDrag(0, position, relative, velocity, InputEvent.deviceIdEmulation);
         }
         return this.pushMouseMotion(event, position, relative, velocity) || handled;
@@ -27003,8 +25458,7 @@ var EventSystem = /*#__PURE__*/ function() {
         input.pressed = pressed;
         input.canceled = canceled;
         input.doubleClick = doubleClick;
-        this.engine.windowRoot.pushInput(input);
-        return this.engine.windowRoot.isInputHandled();
+        return this.pushInput(input);
     };
     _proto.pushEmulatedMouseMotion = function pushEmulatedMouseMotion(position, relative, velocity) {
         var input = new InputEventMouseMotion();
@@ -27017,42 +25471,42 @@ var EventSystem = /*#__PURE__*/ function() {
         input.screenRelative.copyFrom(relative);
         input.velocity.copyFrom(velocity);
         input.screenVelocity.copyFrom(velocity);
-        this.engine.windowRoot.pushInput(input);
-        return this.engine.windowRoot.isInputHandled();
+        return this.pushInput(input);
     };
     _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);
+        input.buttonMask = this.mouseButtonMask;
+        input.pressed = pressed;
+        input.doubleClick = event.detail > 1;
+        return this.pushInput(input);
+    };
+    _proto.setMouseButtonPressed = function setMouseButtonPressed(button, pressed) {
+        var buttonBit = getMouseButtonBit(getMouseButton(button));
         if (pressed) {
-            input.buttonMask |= getMouseButtonBit(input.buttonIndex);
+            this.mouseButtonMask |= buttonBit;
         } else {
-            input.buttonMask &= ~getMouseButtonBit(input.buttonIndex);
+            this.mouseButtonMask &= ~buttonBit;
         }
-        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.buttonMask = this.mouseButtonMask;
         input.factor = factor;
         input.pressed = true;
-        this.engine.windowRoot.pushInput(input);
-        return this.engine.windowRoot.isInputHandled();
+        return this.pushInput(input);
     };
     _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.buttonMask = this.mouseButtonMask;
+        input.pressed = this.mouseButtonMask !== exports.MouseButtonMask.None;
         input.relative.copyFrom(relative);
         input.screenRelative.copyFrom(relative);
         input.velocity.copyFrom(velocity);
@@ -27061,8 +25515,7 @@ var EventSystem = /*#__PURE__*/ function() {
             input.pressure = event.pressure;
             input.tilt.set(event.tiltX, event.tiltY);
         }
-        this.engine.windowRoot.pushInput(input);
-        return this.engine.windowRoot.isInputHandled();
+        return this.pushInput(input);
     };
     _proto.pushScreenTouch = function pushScreenTouch(index, position, pressed, canceled, doubleTap, device) {
         var input = new InputEventScreenTouch();
@@ -27072,8 +25525,7 @@ var EventSystem = /*#__PURE__*/ function() {
         input.pressed = pressed;
         input.canceled = canceled;
         input.doubleTap = doubleTap;
-        this.engine.windowRoot.pushInput(input);
-        return this.engine.windowRoot.isInputHandled();
+        return this.pushInput(input);
     };
     _proto.pushScreenDrag = function pushScreenDrag(index, position, relative, velocity, device) {
         var input = new InputEventScreenDrag();
@@ -27085,8 +25537,7 @@ var EventSystem = /*#__PURE__*/ function() {
         input.velocity.copyFrom(velocity);
         input.screenVelocity.copyFrom(velocity);
         input.pressed = true;
-        this.engine.windowRoot.pushInput(input);
-        return this.engine.windowRoot.isInputHandled();
+        return this.pushInput(input);
     };
     _proto.copyMouseFields = function copyMouseFields(input, event, position) {
         input.position.copyFrom(position);
@@ -27161,7 +25612,7 @@ var EventSystem = /*#__PURE__*/ function() {
             start: position.clone(),
             last: position.clone(),
             lastTime: performance.now(),
-            controlHandled: false,
+            inputHandled: false,
             pressed: false
         };
         return state;
@@ -27186,12 +25637,14 @@ var EventSystem = /*#__PURE__*/ function() {
         var _target_width, _target_height;
         return {
             x: position.x / cssWidth * 2 - 1,
-            y: position.y / cssHeight * 2 - 1,
+            // Legacy composition picking uses bottom-left, Y-up NDC even though
+            // standardized 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,
+            vy: -velocity.y / cssHeight * 2,
             ts: performance.now(),
             dx: (position.x - state.start.x) / cssWidth * 2,
-            dy: (position.y - state.start.y) / cssHeight * 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
@@ -27203,7 +25656,7 @@ var EventSystem = /*#__PURE__*/ function() {
         if (!rect) {
             return new Vector2();
         }
-        return new Vector2(clientX - rect.left, rect.bottom - clientY);
+        return new Vector2(clientX - rect.left, clientY - rect.top);
     };
     _proto.consumeNativeEvent = function consumeNativeEvent(event, handled) {
         if (handled && !this.allowPropagation) {
@@ -27213,15 +25666,26 @@ var EventSystem = /*#__PURE__*/ function() {
             event.stopPropagation();
         }
     };
+    _proto.pushInput = function pushInput(input) {
+        input.clearAccepted();
+        this.emit("input", input);
+        return input.isAccepted();
+    };
     _proto.preventTouchDefaults = function preventTouchDefaults(event) {
         if (event.cancelable) {
             event.preventDefault();
         }
     };
     _proto.focusTarget = function focusTarget() {
-        if (this.target && document.activeElement !== this.target) {
-            this.target.focus();
-        }
+        var _this_target;
+        (_this_target = this.target) == null ? void 0 : _this_target.focus();
+    };
+    _proto.resetInputState = function resetInputState() {
+        this.mouseState = null;
+        this.mouseButtonMask = exports.MouseButtonMask.None;
+        this.touchStates.clear();
+        this.mouseFromTouchIndex = null;
+        this.touchFromMousePressed = false;
     };
     _proto.addNativeHandler = function addNativeHandler(target, name, handler, options) {
         target.addEventListener(name, handler, options);
@@ -27253,23 +25717,20 @@ var EventSystem = /*#__PURE__*/ function() {
             get: function get() {
                 return this._enabled;
             },
-            set: function set(value) {
+            set: /**
+   * Enables native input processing.
+   *
+   * Change this only while there are no active key, mouse, touch, or drag sessions.
+   */ 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;
-}();
+}(EventEmitter);
 function getKeyLocation(location) {
     if (location === 1) {
         return exports.KeyLocation.Left;
@@ -27300,25 +25761,6 @@ function getMouseButton(button) {
             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:
@@ -27335,6 +25777,16 @@ function getMouseButtonBit(button) {
             return exports.MouseButtonMask.None;
     }
 }
+function normalizeWheelFactor(delta, mode) {
+    var magnitude = Math.abs(delta);
+    if (mode === 1) {
+        return magnitude / 3;
+    }
+    if (mode === 2) {
+        return magnitude;
+    }
+    return magnitude / 100;
+}
 
 var InteractLoader = /*#__PURE__*/ function(Plugin) {
     _inherits(InteractLoader, Plugin);
@@ -29354,6 +27806,11 @@ 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;
@@ -39358,7 +37815,7 @@ function getStandardSpriteContent(sprite, transform) {
     return ret;
 }
 
-var version$2 = "2.10.0-alpha.3";
+var version$2 = "2.10.0-alpha.5";
 var v0 = /^(\d+)\.(\d+)\.(\d+)(-(\w+)\.\d+)?$/;
 var standardVersion = /^(\d+)\.(\d+)$/;
 var reverseParticle = false;
@@ -41354,9 +39811,11 @@ var PreRenderTickData = /*#__PURE__*/ function(TickData) {
         // 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);
+        }
+        PluginSystem.notifyCompositionCreating(_assert_this_initialized(_this), scene);
+        if (sourceContent) {
             _this.sceneRoot.instantiatePreComposition(sourceContent, false);
         }
         // 在 instantiatePreComposition 后设置 rootItem 的 name，避免 name 被覆盖
@@ -41925,9 +40384,6 @@ var PreRenderTickData = /*#__PURE__*/ function(TickData) {
             },
             set: function set(value) {
                 this._renderOrder = value;
-                if (this.uiCanvas) {
-                    this.uiCanvas.order = value;
-                }
             }
         },
         {
@@ -41940,9 +40396,6 @@ var PreRenderTickData = /*#__PURE__*/ function(TickData) {
             },
             set: function set(value) {
                 this._interactive = !!value;
-                if (this.uiCanvas) {
-                    this.uiCanvas.receivesEvents = this._interactive;
-                }
             }
         },
         {
@@ -43770,7 +42223,6 @@ var DEFAULT_FPS = 60;
         _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)) {
@@ -43923,7 +42375,7 @@ var DEFAULT_FPS = 60;
             (_this_ticker1 = this.ticker) == null ? void 0 : _this_ticker1.pause();
             return;
         }
-        this.windowRoot.update(dt);
+        this.emit("update", dt);
         // Tick compositions onPreRender
         //-------------------------------------------------------------------------
         for(var _iterator1 = _create_for_of_iterator_helper_loose(compositions), _step1; !(_step1 = _iterator1()).done;){
@@ -43938,7 +42390,7 @@ var DEFAULT_FPS = 60;
             var composition2 = _step2.value;
             composition2.renderContent();
         }
-        this.windowRoot.render();
+        this.emit("postrender");
         this.renderTargetPool.flush();
     };
     /**
@@ -43980,7 +42432,6 @@ 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) {
@@ -44186,6 +42637,12 @@ var DEFAULT_FPS = 60;
     _proto.setStencilTest = function setStencilTest(enable) {
     // OVERRIDE
     };
+    _proto.setScissorTest = function setScissorTest(enable) {
+    // OVERRIDE
+    };
+    _proto.setScissor = function setScissor(x, y, width, height) {
+    // OVERRIDE
+    };
     _proto.setCulling = function setCulling(enable) {
     // OVERRIDE
     };
@@ -44263,7 +42720,6 @@ var DEFAULT_FPS = 60;
             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) {
@@ -44588,7 +43044,7 @@ registerPlugin("text", TextLoader);
 registerPlugin("sprite", SpriteLoader);
 registerPlugin("particle", ParticleLoader);
 registerPlugin("interact", InteractLoader);
-var version$1 = "2.10.0-alpha.3";
+var version$1 = "2.10.0-alpha.5";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -46081,7 +44537,7 @@ applyMixins(exports.ThreeTextComponent, [
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.10.0-alpha.3";
+var version = "2.10.0-alpha.5";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.ATLAS_SIZE = ATLAS_SIZE;
@@ -46120,8 +44576,6 @@ exports.COPY_MESH_SHADER_ID = COPY_MESH_SHADER_ID;
 exports.COPY_VERTEX_SHADER = COPY_VERTEX_SHADER;
 exports.Camera = Camera;
 exports.CameraVFXItemLoader = CameraVFXItemLoader;
-exports.CanvasContainer = CanvasContainer;
-exports.CanvasRootControl = CanvasRootControl;
 exports.Circle = Circle$1;
 exports.ColorCurve = ColorCurve;
 exports.ColorPlayable = ColorPlayable;
@@ -46134,8 +44588,6 @@ exports.Composition = Composition;
 exports.ConstBoolNode = ConstBoolNode;
 exports.ConstFloatNode = ConstFloatNode;
 exports.ConstraintTarget = ConstraintTarget;
-exports.ContainerControl = ContainerControl;
-exports.Control = Control;
 exports.ControlParameterBoolNode = ControlParameterBoolNode;
 exports.ControlParameterFloatNode = ControlParameterFloatNode;
 exports.ControlParameterTriggerNode = ControlParameterTriggerNode;
@@ -46242,7 +44694,6 @@ 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;
@@ -46286,8 +44737,6 @@ 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;
@@ -46297,7 +44746,6 @@ exports.Vector3PropertyMixerPlayable = Vector3PropertyMixerPlayable;
 exports.Vector4Curve = Vector4Curve;
 exports.Vector4PropertyMixerPlayable = Vector4PropertyMixerPlayable;
 exports.VertexBuffer = VertexBuffer;
-exports.WindowRootControl = WindowRootControl;
 exports.addByOrder = addByOrder;
 exports.addItem = addItem;
 exports.addItemWithOrder = addItemWithOrder;