{"_id":"@amaoaaaaa/vue-ue-event-bus","_rev":"3-7d9a83d0be36042416d95a6c2c953536","name":"@amaoaaaaa/vue-ue-event-bus","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.3":{"name":"@amaoaaaaa/vue-ue-event-bus","version":"1.0.3","author":{"name":"amaoaaaaa"},"license":"MIT","_id":"@amaoaaaaa/vue-ue-event-bus@1.0.3","maintainers":[{"name":"amaoaaaaa","email":"z.d.mao@qq.com"}],"dist":{"shasum":"0a875405fcd18b9959b848f5a4e5c3440973f87a","tarball":"https://registry.npmjs.org/@amaoaaaaa/vue-ue-event-bus/-/vue-ue-event-bus-1.0.3.tgz","fileCount":6,"integrity":"sha512-n/1NfxrhA3E5vgqzh0gRC6HVwgtjiL/RXIre+E+UGfebaluw7ejK1B3OGljI7+KaA70plwjHp11HEqJR+VuV+Q==","signatures":[{"sig":"MEYCIQD4mYLd7qlTttFaP9bFL+xHrkdTcl6Ws42dQEv1asdLEgIhAL8P+8OUfvUUHgo4Czq5FYJ/tW4VRgYAlHF05AzQaONu","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":53655},"main":"dist/index.min.js","types":"dist/index.d.ts","gitHead":"c38054c3bdb4dd7a57038b970350cd37dbe7a272","scripts":{"i":"npm install","dev":"tsc --watch","build":"tsc && node build.js","publish!":"npm run build && npm run version-patch && npm publish --access public","version-patch":"npm version patch"},"_npmUser":{"name":"amaoaaaaa","email":"z.d.mao@qq.com"},"_npmVersion":"10.9.2","description":"在 Vue 和 Unreal Engine 之间建立事件通信机制，使两者能够相互触发并监听事件","directories":{},"_nodeVersion":"20.18.2","_hasShrinkwrap":false,"devDependencies":{"terser":"^5.38.1","typescript":"^5.7.3","@types/lodash-es":"^4.17.12"},"peerDependencies":{"vue":"^3.0.0","lodash-es":"^4.17.21"},"_npmOperationalInternal":{"tmp":"tmp/vue-ue-event-bus_1.0.3_1745287572332_0.5929524840245683","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@amaoaaaaa/vue-ue-event-bus","version":"1.0.4","author":{"name":"amaoaaaaa"},"license":"MIT","_id":"@amaoaaaaa/vue-ue-event-bus@1.0.4","maintainers":[{"name":"amaoaaaaa","email":"z.d.mao@qq.com"}],"dist":{"shasum":"e09a2c5c08d252548f1ce8187d25658c972e2d77","tarball":"https://registry.npmjs.org/@amaoaaaaa/vue-ue-event-bus/-/vue-ue-event-bus-1.0.4.tgz","fileCount":6,"integrity":"sha512-tzxzDCR7WouBPquoWSg1PxeVN2OSScnFi8GeihwfsWGNCvpKqHLi1iGTZQlZjdvMRbBZe8WSangBvVEDXbxaWg==","signatures":[{"sig":"MEUCIQDFxSJoLOjKw+Zii7YA1+OmtYXCMblSd0b305QYQqXomQIgMp/rWUS1TYM27PSCtbYiFvT3vyF9OiIKNF2P1WDs/uM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":54875},"main":"dist/index.min.js","types":"dist/index.d.ts","gitHead":"9bc87c7c056de1712cf37f3bc112536bfbf82b8c","scripts":{"i":"npm install","dev":"tsc --watch","build":"tsc && node build.js","publish!":"npm run build && npm run version-patch && npm publish --access public","version-patch":"npm version patch"},"_npmUser":{"name":"amaoaaaaa","email":"z.d.mao@qq.com"},"_npmVersion":"10.9.2","description":"在 Vue 和 Unreal Engine 之间建立事件通信机制，使两者能够相互触发并监听事件","directories":{},"_nodeVersion":"20.18.2","_hasShrinkwrap":false,"devDependencies":{"terser":"^5.38.1","typescript":"^5.7.3","@types/lodash-es":"^4.17.12"},"peerDependencies":{"vue":"^3.0.0","lodash-es":"^4.17.21"},"_npmOperationalInternal":{"tmp":"tmp/vue-ue-event-bus_1.0.4_1745569185773_0.8302640510871935","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@amaoaaaaa/vue-ue-event-bus","version":"1.0.5","description":"在 Vue 和 Unreal Engine 之间建立事件通信机制，使两者能够相互触发并监听事件","author":{"name":"amaoaaaaa"},"license":"MIT","main":"dist/index.min.js","types":"dist/index.d.ts","scripts":{"i":"npm install","dev":"tsc --watch","build":"tsc && node build.js","version-patch":"npm version patch","publish!":"npm run build && npm run version-patch && npm publish --access public"},"peerDependencies":{"lodash-es":"^4.17.21","vue":"^3.0.0"},"devDependencies":{"@types/lodash-es":"^4.17.12","terser":"^5.38.1","typescript":"^5.7.3"},"_id":"@amaoaaaaa/vue-ue-event-bus@1.0.5","gitHead":"644404e197bb1c7a47b59f5cbe87cee03bfec649","_nodeVersion":"20.18.2","_npmVersion":"10.9.2","dist":{"integrity":"sha512-gGhxEO4IN53Ifnq4ubj3b3JL4MzVTNhfndFIfGEgDN93OSHKvOuyJ9R/h3akpAs+ZIs0nmRSZp7jGpI5z5cjFg==","shasum":"a4aac9121acf544aa06434816231ba0f024cdff2","tarball":"https://registry.npmjs.org/@amaoaaaaa/vue-ue-event-bus/-/vue-ue-event-bus-1.0.5.tgz","fileCount":6,"unpackedSize":54854,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBGRFhJ2tFWUCjJhdomFVlb84MfcAcjcpRG2gS5FLE3rAiEAoX3ac0SwTpY+GxR4nFm1e3kV29Nl7wVa7UkwpmDYFNw="}]},"_npmUser":{"name":"amaoaaaaa","email":"z.d.mao@qq.com"},"directories":{},"maintainers":[{"name":"amaoaaaaa","email":"z.d.mao@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-ue-event-bus_1.0.5_1745569602323_0.08899045765265279"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-22T02:06:12.257Z","modified":"2025-04-25T08:26:42.668Z","1.0.3":"2025-04-22T02:06:12.494Z","1.0.4":"2025-04-25T08:19:45.972Z","1.0.5":"2025-04-25T08:26:42.503Z"},"author":{"name":"amaoaaaaa"},"license":"MIT","description":"在 Vue 和 Unreal Engine 之间建立事件通信机制，使两者能够相互触发并监听事件","maintainers":[{"name":"amaoaaaaa","email":"z.d.mao@qq.com"}],"readme":"# VueUEEventBus\r\n\r\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\r\n\r\n`VueUEEventBus` 是一个用于在 Vue 与 Unreal Engine (UE) 之间建立事件通信机制的工具。它允许你在 Vue 和 Unreal Engine 之间相互触发并监听事件，简化了两者之间的交互。\r\n\r\n## 特性\r\n\r\n- **事件通信**：在 Vue 和 Unreal Engine 之间发送和接收事件。\r\n- **类型安全**：通过 TypeScript 的类型检查，确保仅注册已声明的事件，避免错误调用未定义的事件。\r\n- **调试面板**：可启用一个调试面板，帮助开发者查看和管理与 Unreal Engine 的事件交互。\r\n- **透明事件穿透**：支持 DOM 事件穿透特定的 CSS 类元素，以允许事件传递到 Unreal Engine。\r\n\r\n## 安装\r\n\r\n通过 npm 安装：\r\n\r\n```bash\r\nnpm install @amaoaaaaa/vue-ue-event-bus\r\n```\r\n\r\n## 使用示例\r\n\r\n### 1. 配置 VueToUEEventMap 和 UEToVueEventMap\r\n\r\n首先，你需要定义从 Vue 到 Unreal Engine 和从 Unreal Engine 到 Vue 的事件映射。\r\n\r\n**注意：内置了一些通用的 Vue 到 UE 的事件 [InternalVueToUEEventMap](#InternalVueToUEEventMap)，在定义 `interface VueToUEEventMap` 时不能覆盖他们**\r\n\r\n```typescript\r\ninterface VueToUEEventMap {\r\n  PlayerMove: [number, number]; // 事件名为 'PlayerMove'，参数为 (x, y) 坐标\r\n}\r\n\r\ninterface UEToVueEventMap {\r\n  HealthUpdate: [number]; // 事件名为 'HealthUpdate'，参数为血量值\r\n}\r\n```\r\n\r\n#### InternalVueToUEEventMap\r\n\r\n```typescript\r\n/**\r\n * 内部调用的 Vue 发送到 Unreal Engine 的事件映射\r\n */\r\ntype InternalVueToUEEventMap = {\r\n    /**\r\n     * 点击事件，传递鼠标点击位置的 x 和 y 坐标（归一化）。\r\n     */\r\n    Click: [x: number, y: number];\r\n\r\n    /**\r\n     * 鼠标左键按下事件，传递鼠标左键按下时的 x 和 y 坐标（归一化）。\r\n     */\r\n    LeftMouseButtonDown: [x: number, y: number];\r\n\r\n    /**\r\n     * 鼠标右键按下事件，传递鼠标右键按下时的 x 和 y 坐标（归一化）。\r\n     */\r\n    RightMouseButtonDown: [x: number, y: number];\r\n\r\n    /**\r\n     * 鼠标左键抬起事件，传递鼠标左键抬起时的 x 和 y 坐标（归一化）、是否穿透目标元素。\r\n     */\r\n    LeftMouseButtonUp: [x: number, y: number, isTransparency: boolean];\r\n\r\n    /**\r\n     * 鼠标右键抬起事件，传递鼠标右键抬起时的 x 和 y 坐标（归一化）、是否穿透目标元素。\r\n     */\r\n    RightMouseButtonUp: [x: number, y: number, isTransparency: boolean];\r\n\r\n    /**\r\n     * 鼠标移动事件，传递鼠标移动时的 x 和 y 坐标（归一化）、是否穿透目标元素。\r\n     */\r\n    MouseMove: [x: number, y: number, isTransparency: boolean];\r\n\r\n    /**\r\n     * 鼠标滚轮事件，传递滚动的标准化值（数字：1 或 -1）、是否穿透目标元素。\r\n     */\r\n    MouseWheel: [number, isTransparency: boolean];\r\n\r\n    /**\r\n     * 加载完成事件，不传递任何参数。\r\n     */\r\n    loaded: [];\r\n};\r\n```\r\n\r\n### 2. 实例化 VueUEEventBus\r\n\r\n然后，实例化 `VueUEEventBus`，并传入事件映射类型。\r\n\r\n```typescript\r\nimport { VueUEEventBus } from '@amaoaaaaa/vue-ue-event-bus';\r\n\r\nconst ueEventBus = new VueUEEventBus<VueToUEEventMap, UEToVueEventMap>();\r\n```\r\n\r\n### 3. 向 Unreal Engine 发送事件\r\n\r\n你可以使用 `emit` 方法向 Unreal Engine 发送事件。\r\n\r\n```typescript\r\nueEventBus.emit('PlayerMove', [10, 20]);\r\n```\r\n\r\n### 4. 监听 Unreal Engine 事件\r\n\r\n你也可以监听从 Unreal Engine 触发的事件。\r\n\r\n```typescript\r\nueEventBus.on('HealthUpdate', (health: number) => {\r\n  console.log('Health Updated:', health);\r\n});\r\n```\r\n\r\n## API 文档\r\n\r\n`VueUEEventBus` 类是核心事件总线，提供了以下方法和属性：\r\n\r\n### 构造函数\r\n\r\n```typescript\r\nconstructor(options?: VueUEEventBusOptions)\r\n```\r\n\r\n- `options`: 可选的配置项，包含以下字段：\r\n  - `debug` (boolean): 是否启用调试面板，默认为 `false`。\r\n  - `transparencyClass` (string[]): 允许事件穿透到 Unreal Engine 中的 DOM 元素的 CSS 类。\r\n  - `maxLogCount` (number): 日志保存的最大条数，默认为 30。\r\n\r\n### 方法\r\n\r\n#### `emit(eventName, ...args)`\r\n\r\n向 Unreal Engine 发送事件。\r\n\r\n##### 参数：\r\n- **eventName** (`string`): 事件名称，必须是 `VueToUEEventMap` 中的键。\r\n- **args** (`array`): 事件参数，具体参数类型由 `VueToUEEventMap` 中定义。\r\n\r\n##### 示例：\r\n```typescript\r\nueEventBus.emit('PlayerMove', [10, 20]);\r\n```\r\n\r\n---\r\n\r\n#### `on(eventName, listener, testParams?)`\r\n\r\n监听 Unreal Engine 触发的事件。\r\n\r\n##### 参数：\r\n- **eventName** (`string`): 事件名称，必须是 `UEToVueEventMap` 中的键。\r\n- **listener** (`function`): 事件监听器，处理接收到的事件参数。\r\n- **testParams** (`any[]`, 可选): 用于验证监听器接收到的事件参数。\r\n\r\n##### 示例：\r\n```typescript\r\nueEventBus.on('HealthUpdate', (health: number) => {\r\n  console.log('Health Updated:', health);\r\n});\r\n```\r\n\r\n---\r\n\r\n#### `log(message, color?)`\r\n\r\n输出日志到调试面板。\r\n\r\n##### 参数：\r\n- **message** (`string`): 日志内容。\r\n- **color** (`string`, 可选): 日志的颜色。如果未提供，则使用默认颜色。\r\n\r\n##### 示例：\r\n```typescript\r\nueEventBus.log('This is a debug message', 'blue');\r\n```\r\n\r\n---\r\n\r\n#### `showDebugPanel()`\r\n\r\n显示调试面板。\r\n\r\n调用此方法可以显示调试面板，以便查看与 Unreal Engine 之间的事件交互情况。\r\n\r\n##### 示例：\r\n```typescript\r\nueEventBus.showDebugPanel();\r\n```\r\n\r\n---\r\n\r\n#### `hideDebugPanel()`\r\n\r\n隐藏调试面板。\r\n\r\n调用此方法可以隐藏调试面板，通常用于清理 UI 或关闭调试时的展示。\r\n\r\n##### 示例：\r\n```typescript\r\nueEventBus.hideDebugPanel();\r\n```\r\n\r\n---\r\n\r\n### 属性\r\n\r\n- `isLinked: boolean`\r\n  \r\n  获取当前是否已与 Unreal Engine 建立连接。\r\n\r\n### 调试面板\r\n\r\n`VueUEEventBus` 提供了一个调试面板，允许你查看和管理与 Unreal Engine 的事件交互。\r\n\r\n- **启用调试面板**：调用 `showDebugPanel()` 来显示调试面板。\r\n- **关闭调试面板**：调用 `hideDebugPanel()` 来隐藏调试面板。\r\n- **日志输出**：使用 `log()` 方法将日志输出到调试面板。\r\n\r\n## 类型安全\r\n\r\n为了确保事件的类型安全，所有事件名称和参数类型都通过 TypeScript 强制执行。事件映射必须在实例化 `VueUEEventBus` 时明确提供，且事件名称和参数类型必须匹配。\r\n\r\n## 贡献\r\n\r\n欢迎提交 Pull Requests 和 Issues。如果你有任何问题或建议，欢迎在 GitHub 上提问或报告。\r\n\r\n## License\r\n\r\nMIT License.","readmeFilename":"README.md"}