@eva/plugin-renderer-event 2.1.0-beta.3 → 2.1.0-beta.4

package/dist/EVA.plugin.renderer.event.js

@@ -0,0 +1,251 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+globalThis.EVA = globalThis.EVA || {};
+globalThis.EVA.plugin = globalThis.EVA.plugin || {};
+globalThis.EVA.plugin.renderer = globalThis.EVA.plugin.renderer || {};
+var _EVA_IIFE_event = function (exports, pluginRenderer, eva_js, pixi_js) {
+  'use strict';
+  function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+  }
+  function __decorate(decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  }
+  function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+  }
+  const hitAreaFunc = {
+    Circle: pixi_js.Circle,
+    Ellipse: pixi_js.Ellipse,
+    Polygon: pixi_js.Polygon,
+    Rect: pixi_js.Rectangle,
+    RoundedRect: pixi_js.RoundedRectangle
+  };
+  const propertyForHitArea = {
+    Circle: ['x', 'y', 'radius'],
+    Ellipse: ['x', 'y', 'width', 'height'],
+    Rect: ['x', 'y', 'width', 'height'],
+    RoundedRect: ['x', 'y', 'width', 'height', 'radius'],
+    Polygon: ['paths']
+  };
+  let Event$1 = class Event extends pluginRenderer.Renderer {
+    constructor() {
+      super(...arguments);
+      this.name = 'EventSystem';
+    }
+    init(params) {
+      var _a;
+      const compatibleParams = params;
+      const game = this.game || (typeof (compatibleParams === null || compatibleParams === void 0 ? void 0 : compatibleParams.getSystem) === 'function' ? compatibleParams : undefined);
+      const renderSystem = (_a = game === null || game === void 0 ? void 0 : game.getSystem) === null || _a === void 0 ? void 0 : _a.call(game, pluginRenderer.RendererSystem);
+      if (!(renderSystem === null || renderSystem === void 0 ? void 0 : renderSystem.rendererManager)) return;
+      this.renderSystem = renderSystem;
+      this.renderSystem.rendererManager.register(this);
+    }
+    update(frame) {
+      super.update(frame);
+    }
+    componentChanged(changed) {
+      switch (changed.type) {
+        case eva_js.OBSERVER_TYPE.ADD:
+          this.add(changed);
+          break;
+        case eva_js.OBSERVER_TYPE.REMOVE:
+          this.remove(changed);
+          break;
+        case eva_js.OBSERVER_TYPE.CHANGE:
+          this.change(changed);
+          break;
+      }
+    }
+    add(changed) {
+      var _a;
+      const container = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id);
+      if (!container) return;
+      container.interactive = true;
+      container.interactiveChildren = true;
+      const component = changed.component;
+      if (component.hitArea) {
+        this.addHitArea(changed, container, component.hitArea);
+      }
+      container.on('pointertap', e => {
+        const eventParam = this.createEventParam(container, component, e);
+        component.emit('tap', eventParam);
+        component.emit('click', eventParam);
+      });
+      container.on('pointerdown', e => {
+        const eventParam = this.createEventParam(container, component, e);
+        component.emit('touchstart', eventParam);
+        component.emit('mousedown', eventParam);
+      });
+      container.on('pointermove', e => {
+        const eventParam = this.createEventParam(container, component, e);
+        component.emit('touchmove', eventParam);
+        component.emit('mousemove', eventParam);
+      });
+      container.on('pointerup', e => {
+        const eventParam = this.createEventParam(container, component, e);
+        component.emit('touchend', eventParam);
+        component.emit('mouseup', eventParam);
+      });
+      container.on('pointerupoutside', e => {
+        component.emit('touchendoutside', this.createEventParam(container, component, e));
+      });
+      container.on('pointercancel', e => {
+        component.emit('touchcancel', this.createEventParam(container, component, e));
+      });
+    }
+    createEventParam(container, component, e) {
+      return {
+        stopPropagation: () => e.stopPropagation(),
+        data: {
+          pointerId: e.data.pointerId,
+          position: {
+            x: e.data.global.x,
+            y: e.data.global.y
+          },
+          localPosition: container.worldTransform.applyInverse(e.data.global)
+        },
+        gameObject: component.gameObject
+      };
+    }
+    remove(changed) {
+      var _a;
+      const container = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id);
+      if (!container) return;
+      container.interactive = false;
+      container.off('pointertap');
+      container.off('pointerdown');
+      container.off('pointermove');
+      container.off('pointerup');
+      container.off('pointerupoutside');
+      container.off('pointercancel');
+      changed.component.removeAllListeners();
+    }
+    change(changed) {
+      var _a;
+      const container = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id);
+      if (!container) return;
+      container.interactive = true;
+      const component = changed.component;
+      if (component.hitArea) {
+        this.addHitArea(changed, container, component.hitArea);
+      } else {
+        component.hitArea = null;
+      }
+    }
+    addHitArea(changed, container, hitArea) {
+      const {
+        type,
+        style
+      } = hitArea;
+      if (!hitAreaFunc[type]) {
+        console.error(`${changed.gameObject.name}'s hitArea type is not defined`);
+        return;
+      }
+      const params = [];
+      for (const key of propertyForHitArea[type]) {
+        params.push(style[key]);
+      }
+      const hitAreaShape = new hitAreaFunc[type](...params);
+      container.hitArea = hitAreaShape;
+    }
+  };
+  Event$1.systemName = 'EventSystem';
+  Event$1 = __decorate([eva_js.decorators.componentObserver({
+    Event: [{
+      prop: ['hitArea'],
+      deep: true
+    }]
+  })], Event$1);
+  var Event$2 = Event$1;
+  exports.HIT_AREA_TYPE = void 0;
+  (function (HIT_AREA_TYPE) {
+    HIT_AREA_TYPE["Circle"] = "Circle";
+    HIT_AREA_TYPE["Ellipse"] = "Ellipse";
+    HIT_AREA_TYPE["Polygon"] = "Polygon";
+    HIT_AREA_TYPE["Rect"] = "Rect";
+    HIT_AREA_TYPE["RoundedRect"] = "RoundedRect";
+  })(exports.HIT_AREA_TYPE || (exports.HIT_AREA_TYPE = {}));
+  class HitAreaStyleMetadata {}
+  __decorate([eva_js.type('number'), eva_js.step(1), __metadata("design:type", Number)], HitAreaStyleMetadata.prototype, "x", void 0);
+  __decorate([eva_js.type('number'), eva_js.step(1), __metadata("design:type", Number)], HitAreaStyleMetadata.prototype, "y", void 0);
+  __decorate([eva_js.type('number'), eva_js.step(1), __metadata("design:type", Number)], HitAreaStyleMetadata.prototype, "radius", void 0);
+  __decorate([eva_js.type('number'), eva_js.step(1), __metadata("design:type", Number)], HitAreaStyleMetadata.prototype, "width", void 0);
+  __decorate([eva_js.type('number'), eva_js.step(1), __metadata("design:type", Number)], HitAreaStyleMetadata.prototype, "height", void 0);
+  __decorate([eva_js.type('number'), __metadata("design:type", Array)], HitAreaStyleMetadata.prototype, "paths", void 0);
+  class HitAreaMetadata {}
+  __decorate([eva_js.type('string'), __metadata("design:type", String)], HitAreaMetadata.prototype, "type", void 0);
+  __decorate([eva_js.Field(() => HitAreaStyleMetadata), __metadata("design:type", Object)], HitAreaMetadata.prototype, "style", void 0);
+  class Event extends eva_js.Component {
+    constructor(params) {
+      super(params);
+      this.hitArea = undefined;
+      this.configuredEventHandlers = [];
+      this.init(params);
+    }
+    init(params) {
+      this.removeConfiguredEventHandlers();
+      if (!params) return;
+      const {
+          on
+        } = params,
+        options = __rest(params, ["on"]);
+      _extends(this, options);
+      if (on) {
+        for (const eventName of Object.keys(on)) {
+          const handler = on[eventName];
+          if (typeof handler !== 'function') continue;
+          super.on(eventName, handler);
+          this.configuredEventHandlers.push({
+            eventName,
+            handler
+          });
+        }
+      }
+    }
+    emit(en, ...args) {
+      return super.emit(en, ...args);
+    }
+    once(en, fn, context) {
+      return super.once(en, fn, context);
+    }
+    on(en, fn, context) {
+      return super.on(en, fn, context);
+    }
+    destroy() {
+      this.removeAllListeners();
+      this.configuredEventHandlers = [];
+      return this;
+    }
+    onDestroy() {
+      this.destroy();
+    }
+    removeConfiguredEventHandlers() {
+      for (const {
+        eventName,
+        handler
+      } of this.configuredEventHandlers) {
+        super.off(eventName, handler);
+      }
+      this.configuredEventHandlers = [];
+    }
+  }
+  Event.componentName = 'Event';
+  __decorate([eva_js.Field(() => HitAreaMetadata), __metadata("design:type", Object)], Event.prototype, "hitArea", void 0);
+  exports.Event = Event;
+  exports.EventSystem = Event$2;
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+  return exports;
+}({}, EVA.plugin.renderer, EVA, PIXI);
+globalThis.EVA.plugin.renderer.event = globalThis.EVA.plugin.renderer.event || _EVA_IIFE_event;

package/dist/EVA.plugin.renderer.event.min.js

@@ -0,0 +1 @@
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_event=function(e,t,n,r){"use strict";function o(e,t,n,r){var o,i=arguments.length,s=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,r);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(i<3?o(s):i>3?o(t,n,s):o(t,n))||s);return i>3&&s&&Object.defineProperty(t,n,s),s}function i(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}const s={Circle:r.Circle,Ellipse:r.Ellipse,Polygon:r.Polygon,Rect:r.Rectangle,RoundedRect:r.RoundedRectangle},a={Circle:["x","y","radius"],Ellipse:["x","y","width","height"],Rect:["x","y","width","height"],RoundedRect:["x","y","width","height","radius"],Polygon:["paths"]};let c=class extends t.Renderer{constructor(){super(...arguments),this.name="EventSystem"}init(e){var n;const r=e,o=this.game||("function"==typeof(null==r?void 0:r.getSystem)?r:void 0),i=null===(n=null==o?void 0:o.getSystem)||void 0===n?void 0:n.call(o,t.RendererSystem);(null==i?void 0:i.rendererManager)&&(this.renderSystem=i,this.renderSystem.rendererManager.register(this))}update(e){super.update(e)}componentChanged(e){switch(e.type){case n.OBSERVER_TYPE.ADD:this.add(e);break;case n.OBSERVER_TYPE.REMOVE:this.remove(e);break;case n.OBSERVER_TYPE.CHANGE:this.change(e)}}add(e){var t;const n=null===(t=this.containerManager)||void 0===t?void 0:t.getContainer(e.gameObject.id);if(!n)return;n.interactive=!0,n.interactiveChildren=!0;const r=e.component;r.hitArea&&this.addHitArea(e,n,r.hitArea),n.on("pointertap",e=>{const t=this.createEventParam(n,r,e);r.emit("tap",t),r.emit("click",t)}),n.on("pointerdown",e=>{const t=this.createEventParam(n,r,e);r.emit("touchstart",t),r.emit("mousedown",t)}),n.on("pointermove",e=>{const t=this.createEventParam(n,r,e);r.emit("touchmove",t),r.emit("mousemove",t)}),n.on("pointerup",e=>{const t=this.createEventParam(n,r,e);r.emit("touchend",t),r.emit("mouseup",t)}),n.on("pointerupoutside",e=>{r.emit("touchendoutside",this.createEventParam(n,r,e))}),n.on("pointercancel",e=>{r.emit("touchcancel",this.createEventParam(n,r,e))})}createEventParam(e,t,n){return{stopPropagation:()=>n.stopPropagation(),data:{pointerId:n.data.pointerId,position:{x:n.data.global.x,y:n.data.global.y},localPosition:e.worldTransform.applyInverse(n.data.global)},gameObject:t.gameObject}}remove(e){var t;const n=null===(t=this.containerManager)||void 0===t?void 0:t.getContainer(e.gameObject.id);n&&(n.interactive=!1,n.off("pointertap"),n.off("pointerdown"),n.off("pointermove"),n.off("pointerup"),n.off("pointerupoutside"),n.off("pointercancel"),e.component.removeAllListeners())}change(e){var t;const n=null===(t=this.containerManager)||void 0===t?void 0:t.getContainer(e.gameObject.id);if(!n)return;n.interactive=!0;const r=e.component;r.hitArea?this.addHitArea(e,n,r.hitArea):r.hitArea=null}addHitArea(e,t,n){const{type:r,style:o}=n;if(!s[r])return void console.error(`${e.gameObject.name}'s hitArea type is not defined`);const i=[];for(const e of a[r])i.push(o[e]);const c=new s[r](...i);t.hitArea=c}};c.systemName="EventSystem",c=o([n.decorators.componentObserver({Event:[{prop:["hitArea"],deep:!0}]})],c);var d,p=c;e.HIT_AREA_TYPE=void 0,(d=e.HIT_AREA_TYPE||(e.HIT_AREA_TYPE={})).Circle="Circle",d.Ellipse="Ellipse",d.Polygon="Polygon",d.Rect="Rect",d.RoundedRect="RoundedRect";class l{}o([n.type("number"),n.step(1),i("design:type",Number)],l.prototype,"x",void 0),o([n.type("number"),n.step(1),i("design:type",Number)],l.prototype,"y",void 0),o([n.type("number"),n.step(1),i("design:type",Number)],l.prototype,"radius",void 0),o([n.type("number"),n.step(1),i("design:type",Number)],l.prototype,"width",void 0),o([n.type("number"),n.step(1),i("design:type",Number)],l.prototype,"height",void 0),o([n.type("number"),i("design:type",Array)],l.prototype,"paths",void 0);class u{}o([n.type("string"),i("design:type",String)],u.prototype,"type",void 0),o([n.Field(()=>l),i("design:type",Object)],u.prototype,"style",void 0);class h extends n.Component{constructor(e){super(e),this.hitArea=void 0,this.configuredEventHandlers=[],this.init(e)}init(e){if(this.removeConfiguredEventHandlers(),!e)return;const{on:t}=e;if(_extends(this,function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}(e,["on"])),t)for(const e of Object.keys(t)){const n=t[e];"function"==typeof n&&(super.on(e,n),this.configuredEventHandlers.push({eventName:e,handler:n}))}}emit(e,...t){return super.emit(e,...t)}once(e,t,n){return super.once(e,t,n)}on(e,t,n){return super.on(e,t,n)}destroy(){return this.removeAllListeners(),this.configuredEventHandlers=[],this}onDestroy(){this.destroy()}removeConfiguredEventHandlers(){for(const{eventName:e,handler:t}of this.configuredEventHandlers)super.off(e,t);this.configuredEventHandlers=[]}}return h.componentName="Event",o([n.Field(()=>u),i("design:type",Object)],h.prototype,"hitArea",void 0),e.Event=h,e.EventSystem=p,Object.defineProperty(e,"__esModule",{value:!0}),e}({},EVA.plugin.renderer,EVA,PIXI);globalThis.EVA.plugin.renderer.event=globalThis.EVA.plugin.renderer.event||_EVA_IIFE_event;

package/dist/plugin-renderer-event.cjs.js

@@ -0,0 +1,366 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var pluginRenderer = require('@eva/plugin-renderer');
+var eva_js = require('@eva/eva.js');
+var pixi_js = require('pixi.js');
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const hitAreaFunc = {
+    Circle: pixi_js.Circle,
+    Ellipse: pixi_js.Ellipse,
+    Polygon: pixi_js.Polygon,
+    Rect: pixi_js.Rectangle,
+    RoundedRect: pixi_js.RoundedRectangle,
+};
+const propertyForHitArea = {
+    Circle: ['x', 'y', 'radius'],
+    Ellipse: ['x', 'y', 'width', 'height'],
+    Rect: ['x', 'y', 'width', 'height'],
+    RoundedRect: ['x', 'y', 'width', 'height', 'radius'],
+    Polygon: ['paths'],
+};
+let Event$1 = class Event extends pluginRenderer.Renderer {
+    constructor() {
+        super(...arguments);
+        this.name = 'EventSystem';
+    }
+    init(params) {
+        var _a;
+        const compatibleParams = params;
+        const game = this.game || (typeof (compatibleParams === null || compatibleParams === void 0 ? void 0 : compatibleParams.getSystem) === 'function' ? compatibleParams : undefined);
+        const renderSystem = (_a = game === null || game === void 0 ? void 0 : game.getSystem) === null || _a === void 0 ? void 0 : _a.call(game, pluginRenderer.RendererSystem);
+        if (!(renderSystem === null || renderSystem === void 0 ? void 0 : renderSystem.rendererManager))
+            return;
+        this.renderSystem = renderSystem;
+        this.renderSystem.rendererManager.register(this);
+    }
+    update(frame) {
+        super.update(frame);
+    }
+    componentChanged(changed) {
+        switch (changed.type) {
+            case eva_js.OBSERVER_TYPE.ADD:
+                this.add(changed);
+                break;
+            case eva_js.OBSERVER_TYPE.REMOVE:
+                this.remove(changed);
+                break;
+            case eva_js.OBSERVER_TYPE.CHANGE:
+                this.change(changed);
+                break;
+        }
+    }
+    add(changed) {
+        var _a;
+        const container = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id);
+        if (!container)
+            return;
+        container.interactive = true;
+        container.interactiveChildren = true;
+        const component = changed.component;
+        if (component.hitArea) {
+            this.addHitArea(changed, container, component.hitArea);
+        }
+        container.on('pointertap', e => {
+            const eventParam = this.createEventParam(container, component, e);
+            component.emit('tap', eventParam);
+            component.emit('click', eventParam);
+        });
+        container.on('pointerdown', e => {
+            const eventParam = this.createEventParam(container, component, e);
+            component.emit('touchstart', eventParam);
+            component.emit('mousedown', eventParam);
+        });
+        container.on('pointermove', e => {
+            const eventParam = this.createEventParam(container, component, e);
+            component.emit('touchmove', eventParam);
+            component.emit('mousemove', eventParam);
+        });
+        container.on('pointerup', e => {
+            const eventParam = this.createEventParam(container, component, e);
+            component.emit('touchend', eventParam);
+            component.emit('mouseup', eventParam);
+        });
+        container.on('pointerupoutside', e => {
+            component.emit('touchendoutside', this.createEventParam(container, component, e));
+        });
+        container.on('pointercancel', e => {
+            component.emit('touchcancel', this.createEventParam(container, component, e));
+        });
+    }
+    createEventParam(container, component, e) {
+        return {
+            stopPropagation: () => e.stopPropagation(),
+            data: {
+                // @ts-ignore
+                pointerId: e.data.pointerId,
+                position: {
+                    x: e.data.global.x,
+                    y: e.data.global.y,
+                },
+                localPosition: container.worldTransform.applyInverse(e.data.global),
+            },
+            gameObject: component.gameObject,
+        };
+    }
+    remove(changed) {
+        var _a;
+        const container = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id);
+        if (!container)
+            return;
+        container.interactive = false;
+        container.off('pointertap');
+        container.off('pointerdown');
+        container.off('pointermove');
+        container.off('pointerup');
+        container.off('pointerupoutside');
+        container.off('pointercancel');
+        changed.component.removeAllListeners();
+    }
+    change(changed) {
+        var _a;
+        const container = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id);
+        if (!container)
+            return;
+        container.interactive = true;
+        const component = changed.component;
+        if (component.hitArea) {
+            this.addHitArea(changed, container, component.hitArea);
+        }
+        else {
+            component.hitArea = null;
+        }
+    }
+    addHitArea(changed, container, hitArea) {
+        const { type, style } = hitArea;
+        if (!hitAreaFunc[type]) {
+            console.error(`${changed.gameObject.name}'s hitArea type is not defined`);
+            return;
+        }
+        const params = [];
+        for (const key of propertyForHitArea[type]) {
+            params.push(style[key]);
+        }
+        const hitAreaShape = new hitAreaFunc[type](...params);
+        container.hitArea = hitAreaShape;
+    }
+};
+Event$1.systemName = 'EventSystem';
+Event$1 = __decorate([
+    eva_js.decorators.componentObserver({
+        Event: [{ prop: ['hitArea'], deep: true }],
+    })
+], Event$1);
+var Event$2 = Event$1;
+
+exports.HIT_AREA_TYPE = void 0;
+(function (HIT_AREA_TYPE) {
+    HIT_AREA_TYPE["Circle"] = "Circle";
+    HIT_AREA_TYPE["Ellipse"] = "Ellipse";
+    HIT_AREA_TYPE["Polygon"] = "Polygon";
+    HIT_AREA_TYPE["Rect"] = "Rect";
+    HIT_AREA_TYPE["RoundedRect"] = "RoundedRect";
+})(exports.HIT_AREA_TYPE || (exports.HIT_AREA_TYPE = {}));
+class HitAreaStyleMetadata {
+}
+__decorate([
+    eva_js.type('number'),
+    eva_js.step(1),
+    __metadata("design:type", Number)
+], HitAreaStyleMetadata.prototype, "x", void 0);
+__decorate([
+    eva_js.type('number'),
+    eva_js.step(1),
+    __metadata("design:type", Number)
+], HitAreaStyleMetadata.prototype, "y", void 0);
+__decorate([
+    eva_js.type('number'),
+    eva_js.step(1),
+    __metadata("design:type", Number)
+], HitAreaStyleMetadata.prototype, "radius", void 0);
+__decorate([
+    eva_js.type('number'),
+    eva_js.step(1),
+    __metadata("design:type", Number)
+], HitAreaStyleMetadata.prototype, "width", void 0);
+__decorate([
+    eva_js.type('number'),
+    eva_js.step(1),
+    __metadata("design:type", Number)
+], HitAreaStyleMetadata.prototype, "height", void 0);
+__decorate([
+    eva_js.type('number'),
+    __metadata("design:type", Array)
+], HitAreaStyleMetadata.prototype, "paths", void 0);
+class HitAreaMetadata {
+}
+__decorate([
+    eva_js.type('string'),
+    __metadata("design:type", String)
+], HitAreaMetadata.prototype, "type", void 0);
+__decorate([
+    eva_js.Field(() => HitAreaStyleMetadata),
+    __metadata("design:type", Object)
+], HitAreaMetadata.prototype, "style", void 0);
+/**
+ * 事件组件
+ *
+ * Event 组件为游戏对象添加交互能力，使其能够响应触摸和鼠标事件。
+ * 可以自定义交互热区的形状（矩形、圆形、多边形等），
+ * 适用于按钮、拖拽对象、可点击元素等交互场景。
+ *
+ * 支持的事件类型：
+ * - touchstart - 触摸/点击开始
+ * - touchmove - 触摸/鼠标移动
+ * - touchend - 触摸/点击结束
+ * - tap - 点击/轻触
+ * - touchendoutside - 在对象外部结束触摸
+ * - touchcancel - 触摸取消
+ *
+ * @example
+ * ```typescript
+ * // 基础用法 - 使用默认热区（Transform 尺寸）
+ * const button = new GameObject('button');
+ * const event = new Event();
+ * button.addComponent(event);
+ *
+ * event.on('tap', (e) => {
+ *   console.log('按钮被点击', e.data.position);
+ * });
+ *
+ * // 自定义矩形热区
+ * button.addComponent(new Event({
+ *   hitArea: {
+ *     type: HIT_AREA_TYPE.Rect,
+ *     style: { x: 0, y: 0, width: 100, height: 50 }
+ *   }
+ * }));
+ *
+ * // 圆形热区
+ * button.addComponent(new Event({
+ *   hitArea: {
+ *     type: HIT_AREA_TYPE.Circle,
+ *     style: { x: 50, y: 50, radius: 40 }
+ *   }
+ * }));
+ *
+ * // 多边形热区
+ * button.addComponent(new Event({
+ *   hitArea: {
+ *     type: HIT_AREA_TYPE.Polygon,
+ *     style: { paths: [0,0, 100,0, 50,100] }
+ *   }
+ * }));
+ *
+ * // 事件处理
+ * event.on('touchstart', (e) => {
+ *   console.log('触摸开始', e.data.localPosition);
+ *   e.stopPropagation(); // 阻止事件冒泡
+ * });
+ * ```
+ */
+class Event extends eva_js.Component {
+    constructor(params) {
+        super(params);
+        /** 交互热区配置 */
+        this.hitArea = undefined;
+        this.configuredEventHandlers = [];
+        this.init(params);
+    }
+    /**
+     * 初始化组件
+     * @param params - 初始化参数
+     */
+    init(params) {
+        this.removeConfiguredEventHandlers();
+        if (!params)
+            return;
+        const { on } = params, options = __rest(params, ["on"]);
+        Object.assign(this, options);
+        if (on) {
+            for (const eventName of Object.keys(on)) {
+                const handler = on[eventName];
+                if (typeof handler !== 'function')
+                    continue;
+                super.on(eventName, handler);
+                this.configuredEventHandlers.push({ eventName, handler });
+            }
+        }
+    }
+    emit(en, ...args) {
+        return super.emit(en, ...args);
+    }
+    once(en, fn, context) {
+        return super.once(en, fn, context);
+    }
+    on(en, fn, context) {
+        return super.on(en, fn, context);
+    }
+    destroy() {
+        this.removeAllListeners();
+        this.configuredEventHandlers = [];
+        return this;
+    }
+    onDestroy() {
+        this.destroy();
+    }
+    removeConfiguredEventHandlers() {
+        for (const { eventName, handler } of this.configuredEventHandlers) {
+            super.off(eventName, handler);
+        }
+        this.configuredEventHandlers = [];
+    }
+}
+/** 组件名称 */
+Event.componentName = 'Event';
+__decorate([
+    eva_js.Field(() => HitAreaMetadata),
+    __metadata("design:type", Object)
+], Event.prototype, "hitArea", void 0);
+
+exports.Event = Event;
+exports.EventSystem = Event$2;

package/dist/plugin-renderer-event.cjs.prod.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@eva/plugin-renderer"),t=require("@eva/eva.js"),r=require("pixi.js");function o(e,t,r,o){var n,i=arguments.length,s=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(i<3?n(s):i>3?n(t,r,s):n(t,r))||s);return i>3&&s&&Object.defineProperty(t,r,s),s}function n(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}"function"==typeof SuppressedError&&SuppressedError;const i={Circle:r.Circle,Ellipse:r.Ellipse,Polygon:r.Polygon,Rect:r.Rectangle,RoundedRect:r.RoundedRectangle},s={Circle:["x","y","radius"],Ellipse:["x","y","width","height"],Rect:["x","y","width","height"],RoundedRect:["x","y","width","height","radius"],Polygon:["paths"]};let a=class extends e.Renderer{constructor(){super(...arguments),this.name="EventSystem"}init(t){var r;const o=t,n=this.game||("function"==typeof(null==o?void 0:o.getSystem)?o:void 0),i=null===(r=null==n?void 0:n.getSystem)||void 0===r?void 0:r.call(n,e.RendererSystem);(null==i?void 0:i.rendererManager)&&(this.renderSystem=i,this.renderSystem.rendererManager.register(this))}update(e){super.update(e)}componentChanged(e){switch(e.type){case t.OBSERVER_TYPE.ADD:this.add(e);break;case t.OBSERVER_TYPE.REMOVE:this.remove(e);break;case t.OBSERVER_TYPE.CHANGE:this.change(e)}}add(e){var t;const r=null===(t=this.containerManager)||void 0===t?void 0:t.getContainer(e.gameObject.id);if(!r)return;r.interactive=!0,r.interactiveChildren=!0;const o=e.component;o.hitArea&&this.addHitArea(e,r,o.hitArea),r.on("pointertap",e=>{const t=this.createEventParam(r,o,e);o.emit("tap",t),o.emit("click",t)}),r.on("pointerdown",e=>{const t=this.createEventParam(r,o,e);o.emit("touchstart",t),o.emit("mousedown",t)}),r.on("pointermove",e=>{const t=this.createEventParam(r,o,e);o.emit("touchmove",t),o.emit("mousemove",t)}),r.on("pointerup",e=>{const t=this.createEventParam(r,o,e);o.emit("touchend",t),o.emit("mouseup",t)}),r.on("pointerupoutside",e=>{o.emit("touchendoutside",this.createEventParam(r,o,e))}),r.on("pointercancel",e=>{o.emit("touchcancel",this.createEventParam(r,o,e))})}createEventParam(e,t,r){return{stopPropagation:()=>r.stopPropagation(),data:{pointerId:r.data.pointerId,position:{x:r.data.global.x,y:r.data.global.y},localPosition:e.worldTransform.applyInverse(r.data.global)},gameObject:t.gameObject}}remove(e){var t;const r=null===(t=this.containerManager)||void 0===t?void 0:t.getContainer(e.gameObject.id);r&&(r.interactive=!1,r.off("pointertap"),r.off("pointerdown"),r.off("pointermove"),r.off("pointerup"),r.off("pointerupoutside"),r.off("pointercancel"),e.component.removeAllListeners())}change(e){var t;const r=null===(t=this.containerManager)||void 0===t?void 0:t.getContainer(e.gameObject.id);if(!r)return;r.interactive=!0;const o=e.component;o.hitArea?this.addHitArea(e,r,o.hitArea):o.hitArea=null}addHitArea(e,t,r){const{type:o,style:n}=r;if(!i[o])return void console.error(`${e.gameObject.name}'s hitArea type is not defined`);const a=[];for(const e of s[o])a.push(n[e]);const p=new i[o](...a);t.hitArea=p}};a.systemName="EventSystem",a=o([t.decorators.componentObserver({Event:[{prop:["hitArea"],deep:!0}]})],a);var p,c=a;exports.HIT_AREA_TYPE=void 0,(p=exports.HIT_AREA_TYPE||(exports.HIT_AREA_TYPE={})).Circle="Circle",p.Ellipse="Ellipse",p.Polygon="Polygon",p.Rect="Rect",p.RoundedRect="RoundedRect";class d{}o([t.type("number"),t.step(1),n("design:type",Number)],d.prototype,"x",void 0),o([t.type("number"),t.step(1),n("design:type",Number)],d.prototype,"y",void 0),o([t.type("number"),t.step(1),n("design:type",Number)],d.prototype,"radius",void 0),o([t.type("number"),t.step(1),n("design:type",Number)],d.prototype,"width",void 0),o([t.type("number"),t.step(1),n("design:type",Number)],d.prototype,"height",void 0),o([t.type("number"),n("design:type",Array)],d.prototype,"paths",void 0);class l{}o([t.type("string"),n("design:type",String)],l.prototype,"type",void 0),o([t.Field(()=>d),n("design:type",Object)],l.prototype,"style",void 0);class u extends t.Component{constructor(e){super(e),this.hitArea=void 0,this.configuredEventHandlers=[],this.init(e)}init(e){if(this.removeConfiguredEventHandlers(),!e)return;const{on:t}=e,r=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r}(e,["on"]);if(Object.assign(this,r),t)for(const e of Object.keys(t)){const r=t[e];"function"==typeof r&&(super.on(e,r),this.configuredEventHandlers.push({eventName:e,handler:r}))}}emit(e,...t){return super.emit(e,...t)}once(e,t,r){return super.once(e,t,r)}on(e,t,r){return super.on(e,t,r)}destroy(){return this.removeAllListeners(),this.configuredEventHandlers=[],this}onDestroy(){this.destroy()}removeConfiguredEventHandlers(){for(const{eventName:e,handler:t}of this.configuredEventHandlers)super.off(e,t);this.configuredEventHandlers=[]}}u.componentName="Event",o([t.Field(()=>l),n("design:type",Object)],u.prototype,"hitArea",void 0),exports.Event=u,exports.EventSystem=c;

package/dist/plugin-renderer-event.d.ts

@@ -0,0 +1,164 @@
+import { Component } from '@eva/eva.js';
+import { ComponentChanged } from '@eva/eva.js';
+import { ContainerManager } from '@eva/plugin-renderer';
+import type { GameObject } from '@eva/eva.js';
+import { Renderer } from '@eva/plugin-renderer';
+import { RendererManager } from '@eva/plugin-renderer';
+import { RendererSystem } from '@eva/plugin-renderer';
+
+/**
+ * 事件组件
+ *
+ * Event 组件为游戏对象添加交互能力，使其能够响应触摸和鼠标事件。
+ * 可以自定义交互热区的形状（矩形、圆形、多边形等），
+ * 适用于按钮、拖拽对象、可点击元素等交互场景。
+ *
+ * 支持的事件类型：
+ * - touchstart - 触摸/点击开始
+ * - touchmove - 触摸/鼠标移动
+ * - touchend - 触摸/点击结束
+ * - tap - 点击/轻触
+ * - touchendoutside - 在对象外部结束触摸
+ * - touchcancel - 触摸取消
+ *
+ * @example
+ * ```typescript
+ * // 基础用法 - 使用默认热区（Transform 尺寸）
+ * const button = new GameObject('button');
+ * const event = new Event();
+ * button.addComponent(event);
+ *
+ * event.on('tap', (e) => {
+ *   console.log('按钮被点击', e.data.position);
+ * });
+ *
+ * // 自定义矩形热区
+ * button.addComponent(new Event({
+ *   hitArea: {
+ *     type: HIT_AREA_TYPE.Rect,
+ *     style: { x: 0, y: 0, width: 100, height: 50 }
+ *   }
+ * }));
+ *
+ * // 圆形热区
+ * button.addComponent(new Event({
+ *   hitArea: {
+ *     type: HIT_AREA_TYPE.Circle,
+ *     style: { x: 50, y: 50, radius: 40 }
+ *   }
+ * }));
+ *
+ * // 多边形热区
+ * button.addComponent(new Event({
+ *   hitArea: {
+ *     type: HIT_AREA_TYPE.Polygon,
+ *     style: { paths: [0,0, 100,0, 50,100] }
+ *   }
+ * }));
+ *
+ * // 事件处理
+ * event.on('touchstart', (e) => {
+ *   console.log('触摸开始', e.data.localPosition);
+ *   e.stopPropagation(); // 阻止事件冒泡
+ * });
+ * ```
+ */
+declare class Event_2 extends Component<EventParams> {
+    /** 组件名称 */
+    static componentName: string;
+    /** 交互热区配置 */
+    hitArea: HitArea;
+    interactive?: boolean;
+    cursor?: string;
+    stopPropagation?: boolean;
+    private configuredEventHandlers;
+    constructor(params?: EventParams);
+    /**
+     * 初始化组件
+     * @param params - 初始化参数
+     */
+    init(params?: EventParams): void;
+    emit(eventName: TouchEventName, ...args: [EventParam]): boolean;
+    emit<T extends string>(eventName: Exclude<T, TouchEventName>, ...args: any[]): boolean;
+    once(eventName: TouchEventName, fn: (arg: EventParam) => void, context?: any): this;
+    once<T extends string>(eventName: Exclude<T, TouchEventName>, fn: (...args: any[]) => void, context?: any): this;
+    on(eventName: TouchEventName, fn: (arg: EventParam) => void, context?: any): this;
+    on<T extends string>(eventName: Exclude<T, TouchEventName>, fn: (...args: any[]) => void, context?: any): this;
+    destroy(): this;
+    onDestroy(): void;
+    private removeConfiguredEventHandlers;
+}
+export { Event_2 as Event }
+
+declare type EventParam = {
+    stopPropagation: () => void;
+    data: {
+        pointerId: number;
+        position: {
+            x: number;
+            y: number;
+        };
+        /**
+         * The position related to event target gameobject
+         */
+        localPosition: {
+            x: number;
+            y: number;
+        };
+    };
+    gameObject: GameObject;
+};
+
+export declare interface EventParams {
+    interactive?: boolean;
+    cursor?: string;
+    stopPropagation?: boolean;
+    hitArea?: HitArea;
+    on?: Record<string, (...args: any[]) => void>;
+}
+
+export declare class EventSystem extends Renderer<EventSystemParams> {
+    static systemName: string;
+    name: string;
+    renderSystem: RendererSystem;
+    rendererManager: RendererManager;
+    containerManager: ContainerManager;
+    init(params?: EventSystemParams | {
+        getSystem?: (...args: any[]) => unknown;
+    }): void;
+    update(frame?: unknown): void;
+    componentChanged(changed: ComponentChanged): void;
+    add(changed: ComponentChanged): void;
+    private createEventParam;
+    remove(changed: ComponentChanged): void;
+    change(changed: ComponentChanged): void;
+    addHitArea(changed: ComponentChanged, container: any, hitArea: any): void;
+}
+
+export declare interface EventSystemParams {
+    moveWhenInside?: boolean;
+}
+
+export declare enum HIT_AREA_TYPE {
+    Circle = "Circle",
+    Ellipse = "Ellipse",
+    Polygon = "Polygon",
+    Rect = "Rect",
+    RoundedRect = "RoundedRect"
+}
+
+declare interface HitArea {
+    type: HIT_AREA_TYPE;
+    style?: {
+        x?: number;
+        y?: number;
+        radius?: number;
+        width?: number;
+        height?: number;
+        paths?: number[];
+    };
+}
+
+declare type TouchEventName = 'touchstart' | 'touchmove' | 'touchend' | 'tap' | 'touchendoutside' | 'touchcancel';
+
+export { }

package/dist/plugin-renderer-event.esm.js

@@ -0,0 +1,361 @@
+import { Renderer, RendererSystem } from '@eva/plugin-renderer';
+import { OBSERVER_TYPE, decorators, Component, type, step, Field } from '@eva/eva.js';
+import { Circle, Ellipse, Polygon, Rectangle, RoundedRectangle } from 'pixi.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const hitAreaFunc = {
+    Circle,
+    Ellipse,
+    Polygon,
+    Rect: Rectangle,
+    RoundedRect: RoundedRectangle,
+};
+const propertyForHitArea = {
+    Circle: ['x', 'y', 'radius'],
+    Ellipse: ['x', 'y', 'width', 'height'],
+    Rect: ['x', 'y', 'width', 'height'],
+    RoundedRect: ['x', 'y', 'width', 'height', 'radius'],
+    Polygon: ['paths'],
+};
+let Event$1 = class Event extends Renderer {
+    constructor() {
+        super(...arguments);
+        this.name = 'EventSystem';
+    }
+    init(params) {
+        var _a;
+        const compatibleParams = params;
+        const game = this.game || (typeof (compatibleParams === null || compatibleParams === void 0 ? void 0 : compatibleParams.getSystem) === 'function' ? compatibleParams : undefined);
+        const renderSystem = (_a = game === null || game === void 0 ? void 0 : game.getSystem) === null || _a === void 0 ? void 0 : _a.call(game, RendererSystem);
+        if (!(renderSystem === null || renderSystem === void 0 ? void 0 : renderSystem.rendererManager))
+            return;
+        this.renderSystem = renderSystem;
+        this.renderSystem.rendererManager.register(this);
+    }
+    update(frame) {
+        super.update(frame);
+    }
+    componentChanged(changed) {
+        switch (changed.type) {
+            case OBSERVER_TYPE.ADD:
+                this.add(changed);
+                break;
+            case OBSERVER_TYPE.REMOVE:
+                this.remove(changed);
+                break;
+            case OBSERVER_TYPE.CHANGE:
+                this.change(changed);
+                break;
+        }
+    }
+    add(changed) {
+        var _a;
+        const container = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id);
+        if (!container)
+            return;
+        container.interactive = true;
+        container.interactiveChildren = true;
+        const component = changed.component;
+        if (component.hitArea) {
+            this.addHitArea(changed, container, component.hitArea);
+        }
+        container.on('pointertap', e => {
+            const eventParam = this.createEventParam(container, component, e);
+            component.emit('tap', eventParam);
+            component.emit('click', eventParam);
+        });
+        container.on('pointerdown', e => {
+            const eventParam = this.createEventParam(container, component, e);
+            component.emit('touchstart', eventParam);
+            component.emit('mousedown', eventParam);
+        });
+        container.on('pointermove', e => {
+            const eventParam = this.createEventParam(container, component, e);
+            component.emit('touchmove', eventParam);
+            component.emit('mousemove', eventParam);
+        });
+        container.on('pointerup', e => {
+            const eventParam = this.createEventParam(container, component, e);
+            component.emit('touchend', eventParam);
+            component.emit('mouseup', eventParam);
+        });
+        container.on('pointerupoutside', e => {
+            component.emit('touchendoutside', this.createEventParam(container, component, e));
+        });
+        container.on('pointercancel', e => {
+            component.emit('touchcancel', this.createEventParam(container, component, e));
+        });
+    }
+    createEventParam(container, component, e) {
+        return {
+            stopPropagation: () => e.stopPropagation(),
+            data: {
+                // @ts-ignore
+                pointerId: e.data.pointerId,
+                position: {
+                    x: e.data.global.x,
+                    y: e.data.global.y,
+                },
+                localPosition: container.worldTransform.applyInverse(e.data.global),
+            },
+            gameObject: component.gameObject,
+        };
+    }
+    remove(changed) {
+        var _a;
+        const container = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id);
+        if (!container)
+            return;
+        container.interactive = false;
+        container.off('pointertap');
+        container.off('pointerdown');
+        container.off('pointermove');
+        container.off('pointerup');
+        container.off('pointerupoutside');
+        container.off('pointercancel');
+        changed.component.removeAllListeners();
+    }
+    change(changed) {
+        var _a;
+        const container = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(changed.gameObject.id);
+        if (!container)
+            return;
+        container.interactive = true;
+        const component = changed.component;
+        if (component.hitArea) {
+            this.addHitArea(changed, container, component.hitArea);
+        }
+        else {
+            component.hitArea = null;
+        }
+    }
+    addHitArea(changed, container, hitArea) {
+        const { type, style } = hitArea;
+        if (!hitAreaFunc[type]) {
+            console.error(`${changed.gameObject.name}'s hitArea type is not defined`);
+            return;
+        }
+        const params = [];
+        for (const key of propertyForHitArea[type]) {
+            params.push(style[key]);
+        }
+        const hitAreaShape = new hitAreaFunc[type](...params);
+        container.hitArea = hitAreaShape;
+    }
+};
+Event$1.systemName = 'EventSystem';
+Event$1 = __decorate([
+    decorators.componentObserver({
+        Event: [{ prop: ['hitArea'], deep: true }],
+    })
+], Event$1);
+var Event$2 = Event$1;
+
+var HIT_AREA_TYPE;
+(function (HIT_AREA_TYPE) {
+    HIT_AREA_TYPE["Circle"] = "Circle";
+    HIT_AREA_TYPE["Ellipse"] = "Ellipse";
+    HIT_AREA_TYPE["Polygon"] = "Polygon";
+    HIT_AREA_TYPE["Rect"] = "Rect";
+    HIT_AREA_TYPE["RoundedRect"] = "RoundedRect";
+})(HIT_AREA_TYPE || (HIT_AREA_TYPE = {}));
+class HitAreaStyleMetadata {
+}
+__decorate([
+    type('number'),
+    step(1),
+    __metadata("design:type", Number)
+], HitAreaStyleMetadata.prototype, "x", void 0);
+__decorate([
+    type('number'),
+    step(1),
+    __metadata("design:type", Number)
+], HitAreaStyleMetadata.prototype, "y", void 0);
+__decorate([
+    type('number'),
+    step(1),
+    __metadata("design:type", Number)
+], HitAreaStyleMetadata.prototype, "radius", void 0);
+__decorate([
+    type('number'),
+    step(1),
+    __metadata("design:type", Number)
+], HitAreaStyleMetadata.prototype, "width", void 0);
+__decorate([
+    type('number'),
+    step(1),
+    __metadata("design:type", Number)
+], HitAreaStyleMetadata.prototype, "height", void 0);
+__decorate([
+    type('number'),
+    __metadata("design:type", Array)
+], HitAreaStyleMetadata.prototype, "paths", void 0);
+class HitAreaMetadata {
+}
+__decorate([
+    type('string'),
+    __metadata("design:type", String)
+], HitAreaMetadata.prototype, "type", void 0);
+__decorate([
+    Field(() => HitAreaStyleMetadata),
+    __metadata("design:type", Object)
+], HitAreaMetadata.prototype, "style", void 0);
+/**
+ * 事件组件
+ *
+ * Event 组件为游戏对象添加交互能力，使其能够响应触摸和鼠标事件。
+ * 可以自定义交互热区的形状（矩形、圆形、多边形等），
+ * 适用于按钮、拖拽对象、可点击元素等交互场景。
+ *
+ * 支持的事件类型：
+ * - touchstart - 触摸/点击开始
+ * - touchmove - 触摸/鼠标移动
+ * - touchend - 触摸/点击结束
+ * - tap - 点击/轻触
+ * - touchendoutside - 在对象外部结束触摸
+ * - touchcancel - 触摸取消
+ *
+ * @example
+ * ```typescript
+ * // 基础用法 - 使用默认热区（Transform 尺寸）
+ * const button = new GameObject('button');
+ * const event = new Event();
+ * button.addComponent(event);
+ *
+ * event.on('tap', (e) => {
+ *   console.log('按钮被点击', e.data.position);
+ * });
+ *
+ * // 自定义矩形热区
+ * button.addComponent(new Event({
+ *   hitArea: {
+ *     type: HIT_AREA_TYPE.Rect,
+ *     style: { x: 0, y: 0, width: 100, height: 50 }
+ *   }
+ * }));
+ *
+ * // 圆形热区
+ * button.addComponent(new Event({
+ *   hitArea: {
+ *     type: HIT_AREA_TYPE.Circle,
+ *     style: { x: 50, y: 50, radius: 40 }
+ *   }
+ * }));
+ *
+ * // 多边形热区
+ * button.addComponent(new Event({
+ *   hitArea: {
+ *     type: HIT_AREA_TYPE.Polygon,
+ *     style: { paths: [0,0, 100,0, 50,100] }
+ *   }
+ * }));
+ *
+ * // 事件处理
+ * event.on('touchstart', (e) => {
+ *   console.log('触摸开始', e.data.localPosition);
+ *   e.stopPropagation(); // 阻止事件冒泡
+ * });
+ * ```
+ */
+class Event extends Component {
+    constructor(params) {
+        super(params);
+        /** 交互热区配置 */
+        this.hitArea = undefined;
+        this.configuredEventHandlers = [];
+        this.init(params);
+    }
+    /**
+     * 初始化组件
+     * @param params - 初始化参数
+     */
+    init(params) {
+        this.removeConfiguredEventHandlers();
+        if (!params)
+            return;
+        const { on } = params, options = __rest(params, ["on"]);
+        Object.assign(this, options);
+        if (on) {
+            for (const eventName of Object.keys(on)) {
+                const handler = on[eventName];
+                if (typeof handler !== 'function')
+                    continue;
+                super.on(eventName, handler);
+                this.configuredEventHandlers.push({ eventName, handler });
+            }
+        }
+    }
+    emit(en, ...args) {
+        return super.emit(en, ...args);
+    }
+    once(en, fn, context) {
+        return super.once(en, fn, context);
+    }
+    on(en, fn, context) {
+        return super.on(en, fn, context);
+    }
+    destroy() {
+        this.removeAllListeners();
+        this.configuredEventHandlers = [];
+        return this;
+    }
+    onDestroy() {
+        this.destroy();
+    }
+    removeConfiguredEventHandlers() {
+        for (const { eventName, handler } of this.configuredEventHandlers) {
+            super.off(eventName, handler);
+        }
+        this.configuredEventHandlers = [];
+    }
+}
+/** 组件名称 */
+Event.componentName = 'Event';
+__decorate([
+    Field(() => HitAreaMetadata),
+    __metadata("design:type", Object)
+], Event.prototype, "hitArea", void 0);
+
+export { Event, Event$2 as EventSystem, HIT_AREA_TYPE };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eva/plugin-renderer-event",
-  "version": "2.1.0-beta.3",
+  "version": "2.1.0-beta.4",
   "description": "@eva/plugin-renderer-event",
   "main": "index.js",
   "module": "dist/plugin-renderer-event.esm.js",
@@ -18,8 +18,8 @@
   "license": "MIT",
   "homepage": "https://eva.js.org",
   "dependencies": {
-    "@eva/plugin-renderer": "2.1.0-beta.3",
-    "@eva/eva.js": "2.1.0-beta.3",
+    "@eva/plugin-renderer": "2.1.0-beta.4",
+    "@eva/eva.js": "2.1.0-beta.4",
     "pixi.js": "^8.17.0"
   }
 }