Feature/editor optimization (#251)
* refactor: 编辑器/运行时架构拆分与构建系统升级 * feat(core): 层级系统重构与UI变换矩阵修复 * refactor: 移除 ecs-components 聚合包并修复跨包组件查找问题 * fix(physics): 修复跨包组件类引用问题 * feat: 统一运行时架构与浏览器运行支持 * feat(asset): 实现浏览器运行时资产加载系统 * fix: 修复文档、CodeQL安全问题和CI类型检查错误 * fix: 修复文档、CodeQL安全问题和CI类型检查错误 * fix: 修复文档、CodeQL安全问题、CI类型检查和测试错误 * test: 补齐核心模块测试用例，修复CI构建配置 * fix: 修复测试用例中的类型错误和断言问题 * fix: 修复 turbo build:npm 任务的依赖顺序问题 * fix: 修复 CI 构建错误并优化构建性能
This commit is contained in:
YHH
GitHub
47
packages/physics-rapier2d-editor/package.json
Normal file
47
packages/physics-rapier2d-editor/package.json
Normal file
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "@esengine/physics-rapier2d-editor",
|
||||
"version": "1.0.0",
|
||||
"description": "Editor support for @esengine/physics-rapier2d - inspectors and gizmos",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.js"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "tsup",
|
||||
"build:watch": "tsup --watch",
|
||||
"type-check": "tsc --noEmit",
|
||||
"clean": "rimraf dist"
|
||||
},
|
||||
"dependencies": {
|
||||
"@esengine/physics-rapier2d": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@esengine/ecs-framework": "workspace:*",
|
||||
"@esengine/engine-core": "workspace:*",
|
||||
"@esengine/editor-core": "workspace:*",
|
||||
"@esengine/build-config": "workspace:*",
|
||||
"lucide-react": "^0.545.0",
|
||||
"react": "^18.3.1",
|
||||
"@types/react": "^18.3.12",
|
||||
"rimraf": "^5.0.5",
|
||||
"tsup": "^8.0.0",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"keywords": [
|
||||
"ecs",
|
||||
"physics",
|
||||
"rapier2d",
|
||||
"editor"
|
||||
],
|
||||
"author": "",
|
||||
"license": "MIT"
|
||||
}
|
||||
424
packages/physics-rapier2d-editor/src/Physics2DEditorModule.ts
Normal file
424
packages/physics-rapier2d-editor/src/Physics2DEditorModule.ts
Normal file
@@ -0,0 +1,424 @@
|
||||
/**
|
||||
* Physics 2D Editor Module
|
||||
* 2D 物理编辑器模块
|
||||
*/
|
||||
|
||||
import type { ServiceContainer, Entity } from '@esengine/ecs-framework';
|
||||
import { Core } from '@esengine/ecs-framework';
|
||||
import type {
|
||||
IEditorModuleLoader,
|
||||
EntityCreationTemplate,
|
||||
ComponentAction
|
||||
} from '@esengine/editor-core';
|
||||
import {
|
||||
EntityStoreService,
|
||||
MessageHub,
|
||||
ComponentRegistry,
|
||||
SettingsRegistry
|
||||
} from '@esengine/editor-core';
|
||||
import { TransformComponent } from '@esengine/engine-core';
|
||||
|
||||
// Import from @esengine/physics-rapier2d package
|
||||
import {
|
||||
DEFAULT_PHYSICS_CONFIG,
|
||||
Rigidbody2DComponent,
|
||||
BoxCollider2DComponent,
|
||||
CircleCollider2DComponent,
|
||||
CapsuleCollider2DComponent,
|
||||
PolygonCollider2DComponent
|
||||
} from '@esengine/physics-rapier2d';
|
||||
import { Physics2DSystem } from '@esengine/physics-rapier2d/runtime';
|
||||
|
||||
// Local editor imports
|
||||
import { registerPhysics2DGizmos } from './gizmos/Physics2DGizmo';
|
||||
import { CollisionMatrixEditor } from './components/CollisionMatrixEditor';
|
||||
|
||||
/**
|
||||
* Physics 2D Editor Module
|
||||
* 2D 物理编辑器模块
|
||||
*/
|
||||
export class Physics2DEditorModule implements IEditorModuleLoader {
|
||||
private settingsListener: ((event: Event) => void) | null = null;
|
||||
|
||||
async install(services: ServiceContainer): Promise<void> {
|
||||
// 注册物理设置到设置面板
|
||||
this.registerPhysicsSettings(services);
|
||||
|
||||
// 监听设置变更
|
||||
this.setupSettingsListener();
|
||||
|
||||
// 注册组件到编辑器组件注册表
|
||||
const componentRegistry = services.resolve(ComponentRegistry);
|
||||
if (componentRegistry) {
|
||||
componentRegistry.register({
|
||||
name: 'Rigidbody2D',
|
||||
type: Rigidbody2DComponent,
|
||||
category: 'components.category.physics',
|
||||
description: '2D rigidbody for physics simulation',
|
||||
icon: 'Box'
|
||||
});
|
||||
|
||||
componentRegistry.register({
|
||||
name: 'BoxCollider2D',
|
||||
type: BoxCollider2DComponent,
|
||||
category: 'components.category.physics',
|
||||
description: '2D box collider shape',
|
||||
icon: 'Square'
|
||||
});
|
||||
|
||||
componentRegistry.register({
|
||||
name: 'CircleCollider2D',
|
||||
type: CircleCollider2DComponent,
|
||||
category: 'components.category.physics',
|
||||
description: '2D circle collider shape',
|
||||
icon: 'Circle'
|
||||
});
|
||||
|
||||
componentRegistry.register({
|
||||
name: 'CapsuleCollider2D',
|
||||
type: CapsuleCollider2DComponent,
|
||||
category: 'components.category.physics',
|
||||
description: '2D capsule collider shape',
|
||||
icon: 'Pill'
|
||||
});
|
||||
|
||||
componentRegistry.register({
|
||||
name: 'PolygonCollider2D',
|
||||
type: PolygonCollider2DComponent,
|
||||
category: 'components.category.physics',
|
||||
description: '2D polygon collider shape',
|
||||
icon: 'Pentagon'
|
||||
});
|
||||
}
|
||||
|
||||
// 注册 Physics Gizmos
|
||||
registerPhysics2DGizmos();
|
||||
}
|
||||
|
||||
async uninstall(): Promise<void> {
|
||||
// 移除设置监听器
|
||||
if (this.settingsListener) {
|
||||
window.removeEventListener('settings:changed', this.settingsListener);
|
||||
this.settingsListener = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置变更监听器
|
||||
*/
|
||||
private setupSettingsListener(): void {
|
||||
this.settingsListener = ((event: CustomEvent) => {
|
||||
const changedSettings = event.detail;
|
||||
|
||||
// 检查是否有物理相关设置变更
|
||||
const physicsKeys = Object.keys(changedSettings).filter(k => k.startsWith('physics.'));
|
||||
if (physicsKeys.length === 0) return;
|
||||
|
||||
this.applyPhysicsSettings(changedSettings);
|
||||
}) as EventListener;
|
||||
|
||||
window.addEventListener('settings:changed', this.settingsListener);
|
||||
}
|
||||
|
||||
/**
|
||||
* 应用物理设置到物理系统
|
||||
*/
|
||||
private applyPhysicsSettings(settings: Record<string, unknown>): void {
|
||||
const scene = Core.scene;
|
||||
if (!scene) return;
|
||||
|
||||
const physicsSystem = scene.getSystem(Physics2DSystem);
|
||||
if (!physicsSystem) return;
|
||||
|
||||
const world = physicsSystem.world;
|
||||
if (!world) return;
|
||||
|
||||
// 构建配置对象
|
||||
const gravityX = settings['physics.gravity.x'] as number | undefined;
|
||||
const gravityY = settings['physics.gravity.y'] as number | undefined;
|
||||
|
||||
if (gravityX !== undefined || gravityY !== undefined) {
|
||||
const currentGravity = world.getGravity();
|
||||
world.updateConfig({
|
||||
gravity: {
|
||||
x: gravityX ?? currentGravity.x,
|
||||
y: gravityY ?? currentGravity.y
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (settings['physics.timestep'] !== undefined) {
|
||||
world.updateConfig({ timestep: settings['physics.timestep'] as number });
|
||||
}
|
||||
|
||||
if (settings['physics.maxSubsteps'] !== undefined) {
|
||||
world.updateConfig({ maxSubsteps: settings['physics.maxSubsteps'] as number });
|
||||
}
|
||||
|
||||
if (settings['physics.velocityIterations'] !== undefined) {
|
||||
world.updateConfig({ velocityIterations: settings['physics.velocityIterations'] as number });
|
||||
}
|
||||
|
||||
if (settings['physics.positionIterations'] !== undefined) {
|
||||
world.updateConfig({ positionIterations: settings['physics.positionIterations'] as number });
|
||||
}
|
||||
|
||||
if (settings['physics.allowSleep'] !== undefined) {
|
||||
world.updateConfig({ allowSleep: settings['physics.allowSleep'] as boolean });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 注册物理设置到设置面板
|
||||
*/
|
||||
private registerPhysicsSettings(services: ServiceContainer): void {
|
||||
const settingsRegistry = services.tryResolve(SettingsRegistry);
|
||||
if (!settingsRegistry) {
|
||||
return;
|
||||
}
|
||||
|
||||
settingsRegistry.registerCategory({
|
||||
id: 'physics',
|
||||
title: '物理',
|
||||
description: '2D 物理引擎配置',
|
||||
sections: [
|
||||
{
|
||||
id: 'physics-world',
|
||||
title: '物理世界',
|
||||
description: '配置物理世界的基础参数',
|
||||
settings: [
|
||||
{
|
||||
key: 'physics.gravity.x',
|
||||
label: '重力 X',
|
||||
type: 'number',
|
||||
defaultValue: DEFAULT_PHYSICS_CONFIG.gravity.x,
|
||||
description: '水平方向重力（通常为 0）',
|
||||
step: 0.1
|
||||
},
|
||||
{
|
||||
key: 'physics.gravity.y',
|
||||
label: '重力 Y',
|
||||
type: 'number',
|
||||
defaultValue: DEFAULT_PHYSICS_CONFIG.gravity.y,
|
||||
description: '垂直方向重力（负值向下）',
|
||||
step: 0.1
|
||||
},
|
||||
{
|
||||
key: 'physics.timestep',
|
||||
label: '时间步长',
|
||||
type: 'number',
|
||||
defaultValue: DEFAULT_PHYSICS_CONFIG.timestep,
|
||||
description: '固定物理更新时间步长（秒）',
|
||||
min: 0.001,
|
||||
max: 0.1,
|
||||
step: 0.001
|
||||
},
|
||||
{
|
||||
key: 'physics.maxSubsteps',
|
||||
label: '最大子步数',
|
||||
type: 'number',
|
||||
defaultValue: DEFAULT_PHYSICS_CONFIG.maxSubsteps,
|
||||
description: '每帧最大物理子步数',
|
||||
min: 1,
|
||||
max: 32,
|
||||
step: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'physics-solver',
|
||||
title: '求解器',
|
||||
description: '配置物理求解器参数',
|
||||
settings: [
|
||||
{
|
||||
key: 'physics.velocityIterations',
|
||||
label: '速度迭代次数',
|
||||
type: 'number',
|
||||
defaultValue: DEFAULT_PHYSICS_CONFIG.velocityIterations,
|
||||
description: '速度求解器迭代次数，越高越精确但性能开销越大',
|
||||
min: 1,
|
||||
max: 16,
|
||||
step: 1
|
||||
},
|
||||
{
|
||||
key: 'physics.positionIterations',
|
||||
label: '位置迭代次数',
|
||||
type: 'number',
|
||||
defaultValue: DEFAULT_PHYSICS_CONFIG.positionIterations,
|
||||
description: '位置求解器迭代次数，越高越精确但性能开销越大',
|
||||
min: 1,
|
||||
max: 16,
|
||||
step: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'physics-behavior',
|
||||
title: '行为',
|
||||
description: '配置物理行为',
|
||||
settings: [
|
||||
{
|
||||
key: 'physics.allowSleep',
|
||||
label: '允许休眠',
|
||||
type: 'boolean',
|
||||
defaultValue: DEFAULT_PHYSICS_CONFIG.allowSleep,
|
||||
description: '允许静止的刚体进入休眠状态以提高性能'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'physics-collision',
|
||||
title: '碰撞层',
|
||||
description: '配置碰撞层和碰撞矩阵',
|
||||
settings: [
|
||||
{
|
||||
key: 'physics.collisionMatrix',
|
||||
label: '碰撞矩阵',
|
||||
type: 'collisionMatrix',
|
||||
defaultValue: null,
|
||||
description: '配置哪些层之间可以发生碰撞',
|
||||
customRenderer: CollisionMatrixEditor
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
getInspectorProviders() {
|
||||
// 使用 @Property 装饰器自动生成检视器，不再需要自定义
|
||||
return [];
|
||||
}
|
||||
|
||||
getEntityCreationTemplates(): EntityCreationTemplate[] {
|
||||
const createPhysicsEntity = (
|
||||
name: string,
|
||||
colliderType: 'box' | 'circle' | 'capsule',
|
||||
isStatic: boolean = false
|
||||
): number => {
|
||||
const scene = Core.scene;
|
||||
if (!scene) {
|
||||
throw new Error('Scene not available');
|
||||
}
|
||||
|
||||
const entityStore = Core.services.resolve(EntityStoreService);
|
||||
const messageHub = Core.services.resolve(MessageHub);
|
||||
|
||||
if (!entityStore || !messageHub) {
|
||||
throw new Error('EntityStoreService or MessageHub not available');
|
||||
}
|
||||
|
||||
const count = entityStore.getAllEntities()
|
||||
.filter((e: Entity) => e.name.startsWith(name)).length;
|
||||
const entityName = `${name} ${count + 1}`;
|
||||
|
||||
const entity = scene.createEntity(entityName);
|
||||
entity.addComponent(new TransformComponent());
|
||||
|
||||
const rb = new Rigidbody2DComponent();
|
||||
if (isStatic) {
|
||||
rb.bodyType = 2; // Static
|
||||
}
|
||||
entity.addComponent(rb);
|
||||
|
||||
switch (colliderType) {
|
||||
case 'box':
|
||||
entity.addComponent(new BoxCollider2DComponent());
|
||||
break;
|
||||
case 'circle':
|
||||
entity.addComponent(new CircleCollider2DComponent());
|
||||
break;
|
||||
case 'capsule':
|
||||
entity.addComponent(new CapsuleCollider2DComponent());
|
||||
break;
|
||||
}
|
||||
|
||||
entityStore.addEntity(entity);
|
||||
messageHub.publish('entity:added', { entity });
|
||||
messageHub.publish('scene:modified', {});
|
||||
entityStore.selectEntity(entity);
|
||||
|
||||
return entity.id;
|
||||
};
|
||||
|
||||
return [
|
||||
{
|
||||
id: 'create-physics-box',
|
||||
label: '物理方块',
|
||||
icon: 'Square',
|
||||
category: 'physics',
|
||||
order: 100,
|
||||
create: () => createPhysicsEntity('PhysicsBox', 'box')
|
||||
},
|
||||
{
|
||||
id: 'create-physics-circle',
|
||||
label: '物理圆球',
|
||||
icon: 'Circle',
|
||||
category: 'physics',
|
||||
order: 101,
|
||||
create: () => createPhysicsEntity('PhysicsBall', 'circle')
|
||||
},
|
||||
{
|
||||
id: 'create-physics-capsule',
|
||||
label: '物理胶囊',
|
||||
icon: 'Pill',
|
||||
category: 'physics',
|
||||
order: 102,
|
||||
create: () => createPhysicsEntity('PhysicsCapsule', 'capsule')
|
||||
},
|
||||
{
|
||||
id: 'create-static-platform',
|
||||
label: '静态平台',
|
||||
icon: 'Minus',
|
||||
category: 'physics',
|
||||
order: 110,
|
||||
create: () => createPhysicsEntity('Platform', 'box', true)
|
||||
},
|
||||
{
|
||||
id: 'create-static-ground',
|
||||
label: '地面',
|
||||
icon: 'AlignVerticalJustifyEnd',
|
||||
category: 'physics',
|
||||
order: 111,
|
||||
create: (): number => {
|
||||
const scene = Core.scene;
|
||||
if (!scene) {
|
||||
throw new Error('Scene not available');
|
||||
}
|
||||
|
||||
const entityStore = Core.services.resolve(EntityStoreService);
|
||||
const messageHub = Core.services.resolve(MessageHub);
|
||||
|
||||
if (!entityStore || !messageHub) {
|
||||
throw new Error('EntityStoreService or MessageHub not available');
|
||||
}
|
||||
|
||||
const entity = scene.createEntity('Ground');
|
||||
entity.addComponent(new TransformComponent());
|
||||
|
||||
const rb = new Rigidbody2DComponent();
|
||||
rb.bodyType = 2; // Static
|
||||
entity.addComponent(rb);
|
||||
|
||||
const collider = new BoxCollider2DComponent();
|
||||
collider.width = 200;
|
||||
collider.height = 10;
|
||||
entity.addComponent(collider);
|
||||
|
||||
entityStore.addEntity(entity);
|
||||
messageHub.publish('entity:added', { entity });
|
||||
messageHub.publish('scene:modified', {});
|
||||
entityStore.selectEntity(entity);
|
||||
|
||||
return entity.id;
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
getComponentActions(): ComponentAction[] {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export const physics2DEditorModule = new Physics2DEditorModule();
|
||||
37
packages/physics-rapier2d-editor/src/Physics2DPlugin.ts
Normal file
37
packages/physics-rapier2d-editor/src/Physics2DPlugin.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Physics 2D Plugin (Complete)
|
||||
* 完整的 2D 物理插件（运行时 + 编辑器）
|
||||
*/
|
||||
|
||||
import type { IPlugin, PluginDescriptor } from '@esengine/editor-core';
|
||||
import { PhysicsRuntimeModule } from '@esengine/physics-rapier2d/runtime';
|
||||
import { physics2DEditorModule } from './Physics2DEditorModule';
|
||||
|
||||
/**
|
||||
* Physics 2D 插件描述符
|
||||
* Physics 2D Plugin Descriptor
|
||||
*/
|
||||
const descriptor: PluginDescriptor = {
|
||||
id: '@esengine/physics-rapier2d',
|
||||
name: 'Physics 2D',
|
||||
version: '1.0.0',
|
||||
description: 'Deterministic 2D physics with Rapier2D',
|
||||
category: 'physics',
|
||||
enabledByDefault: true,
|
||||
isEnginePlugin: true,
|
||||
canContainContent: false,
|
||||
modules: [
|
||||
{ name: 'Runtime', type: 'runtime', loadingPhase: 'default' },
|
||||
{ name: 'Editor', type: 'editor', loadingPhase: 'postDefault' }
|
||||
]
|
||||
};
|
||||
|
||||
/**
|
||||
* 完整的 Physics 2D 插件（运行时 + 编辑器）
|
||||
* Complete Physics 2D Plugin (runtime + editor)
|
||||
*/
|
||||
export const Physics2DPlugin: IPlugin = {
|
||||
descriptor,
|
||||
runtimeModule: new PhysicsRuntimeModule(),
|
||||
editorModule: physics2DEditorModule
|
||||
};
|
||||
@@ -0,0 +1,269 @@
|
||||
/**
|
||||
* Collision Layer Selector Component
|
||||
* 碰撞层选择器组件
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { CollisionLayerConfig } from '@esengine/physics-rapier2d';
|
||||
|
||||
interface CollisionLayerSelectorProps {
|
||||
value: number;
|
||||
onChange: (value: number) => void;
|
||||
label?: string;
|
||||
multiple?: boolean;
|
||||
}
|
||||
|
||||
export const CollisionLayerSelector: React.FC<CollisionLayerSelectorProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
label,
|
||||
multiple = false
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [layers, setLayers] = useState(CollisionLayerConfig.getInstance().getLayers());
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const config = CollisionLayerConfig.getInstance();
|
||||
|
||||
useEffect(() => {
|
||||
const handleUpdate = () => {
|
||||
setLayers([...config.getLayers()]);
|
||||
};
|
||||
|
||||
config.addListener(handleUpdate);
|
||||
return () => config.removeListener(handleUpdate);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const getSelectedLayerNames = (): string => {
|
||||
if (!multiple) {
|
||||
const index = config.getLayerIndex(value);
|
||||
return layers[index]?.name ?? 'Default';
|
||||
}
|
||||
|
||||
const selectedNames: string[] = [];
|
||||
for (let i = 0; i < 16; i++) {
|
||||
if ((value & (1 << i)) !== 0) {
|
||||
selectedNames.push(layers[i]?.name ?? `Layer${i}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedNames.length === 0) return 'None';
|
||||
if (selectedNames.length === 16) return 'All';
|
||||
if (selectedNames.length > 3) return `${selectedNames.length} layers`;
|
||||
return selectedNames.join(', ');
|
||||
};
|
||||
|
||||
const handleLayerToggle = (index: number) => {
|
||||
if (multiple) {
|
||||
const bit = 1 << index;
|
||||
const newValue = (value & bit) ? (value & ~bit) : (value | bit);
|
||||
onChange(newValue);
|
||||
} else {
|
||||
onChange(1 << index);
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
onChange(0xFFFF);
|
||||
};
|
||||
|
||||
const handleSelectNone = () => {
|
||||
onChange(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="collision-layer-selector" ref={dropdownRef}>
|
||||
{label && <label className="selector-label">{label}</label>}
|
||||
<div className="selector-container">
|
||||
<button
|
||||
className="selector-button"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
type="button"
|
||||
>
|
||||
<span className="selected-text">{getSelectedLayerNames()}</span>
|
||||
<span className="dropdown-arrow">{isOpen ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="dropdown-menu">
|
||||
{multiple && (
|
||||
<div className="dropdown-actions">
|
||||
<button onClick={handleSelectAll} type="button">全选</button>
|
||||
<button onClick={handleSelectNone} type="button">全不选</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="dropdown-list">
|
||||
{layers.slice(0, 8).map((layer, index) => {
|
||||
const isSelected = multiple
|
||||
? (value & (1 << index)) !== 0
|
||||
: config.getLayerIndex(value) === index;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`dropdown-item ${isSelected ? 'selected' : ''}`}
|
||||
onClick={() => handleLayerToggle(index)}
|
||||
>
|
||||
{multiple && (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => {}}
|
||||
className="layer-checkbox"
|
||||
/>
|
||||
)}
|
||||
<span className="layer-index">{index}</span>
|
||||
<span className="layer-name">{layer.name}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
.collision-layer-selector {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selector-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary, #aaa);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.selector-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selector-button {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--border-color, #333);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-primary, #1a1a1a);
|
||||
color: var(--text-primary, #fff);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.selector-button:hover {
|
||||
border-color: var(--accent-color, #0078d4);
|
||||
}
|
||||
|
||||
.selected-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
font-size: 8px;
|
||||
margin-left: 8px;
|
||||
color: var(--text-secondary, #888);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
background: var(--bg-secondary, #1e1e1e);
|
||||
border: 1px solid var(--border-color, #333);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
max-height: 250px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dropdown-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid var(--border-color, #333);
|
||||
}
|
||||
|
||||
.dropdown-actions button {
|
||||
flex: 1;
|
||||
padding: 4px 8px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
background: var(--bg-tertiary, #333);
|
||||
color: var(--text-secondary, #aaa);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-actions button:hover {
|
||||
background: var(--bg-hover, #444);
|
||||
color: var(--text-primary, #fff);
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
overflow-y: auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: var(--bg-hover, #2a2a2a);
|
||||
}
|
||||
|
||||
.dropdown-item.selected {
|
||||
background: var(--accent-color-dim, rgba(0, 120, 212, 0.2));
|
||||
}
|
||||
|
||||
.layer-checkbox {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
accent-color: var(--accent-color, #0078d4);
|
||||
}
|
||||
|
||||
.layer-index {
|
||||
width: 20px;
|
||||
font-size: 10px;
|
||||
color: var(--text-tertiary, #666);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layer-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: var(--text-primary, #fff);
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CollisionLayerSelector;
|
||||
@@ -0,0 +1,316 @@
|
||||
/**
|
||||
* Collision Matrix Editor Component
|
||||
* 碰撞矩阵编辑器组件
|
||||
*
|
||||
* 用于配置物理层之间的碰撞关系，支持 16 个碰撞层。
|
||||
* 使用三角形矩阵布局，双击行标题可编辑层名称。
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { CollisionLayerConfig } from '@esengine/physics-rapier2d';
|
||||
|
||||
interface CollisionMatrixEditorProps {
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export const CollisionMatrixEditor: React.FC<CollisionMatrixEditorProps> = ({ onClose }) => {
|
||||
const [layers, setLayers] = useState(CollisionLayerConfig.getInstance().getLayers());
|
||||
const [editingLayer, setEditingLayer] = useState<number | null>(null);
|
||||
const [editName, setEditName] = useState('');
|
||||
const [hoverCell, setHoverCell] = useState<{ row: number; col: number } | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const config = CollisionLayerConfig.getInstance();
|
||||
|
||||
useEffect(() => {
|
||||
const handleUpdate = () => {
|
||||
setLayers([...config.getLayers()]);
|
||||
};
|
||||
config.addListener(handleUpdate);
|
||||
return () => config.removeListener(handleUpdate);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (editingLayer !== null && inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
inputRef.current.select();
|
||||
}
|
||||
}, [editingLayer]);
|
||||
|
||||
const handleToggleCollision = useCallback((layerA: number, layerB: number) => {
|
||||
const canCollide = config.canLayersCollide(layerA, layerB);
|
||||
config.setLayersCanCollide(layerA, layerB, !canCollide);
|
||||
}, []);
|
||||
|
||||
const handleStartEdit = (index: number, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setEditingLayer(index);
|
||||
setEditName(layers[index]?.name ?? '');
|
||||
};
|
||||
|
||||
const handleSaveEdit = () => {
|
||||
if (editingLayer !== null && editName.trim()) {
|
||||
config.setLayerName(editingLayer, editName.trim());
|
||||
}
|
||||
setEditingLayer(null);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleSaveEdit();
|
||||
} else if (e.key === 'Escape') {
|
||||
setEditingLayer(null);
|
||||
}
|
||||
};
|
||||
|
||||
const renderTriangleMatrix = () => {
|
||||
const visibleLayers = layers.slice(0, 16);
|
||||
|
||||
return (
|
||||
<div className="cmx-container">
|
||||
{/* 提示信息 */}
|
||||
<div className="cmx-hint">双击层名称可编辑</div>
|
||||
|
||||
<div className="cmx-matrix" onMouseLeave={() => setHoverCell(null)}>
|
||||
{/* 列标题 */}
|
||||
<div className="cmx-col-headers">
|
||||
{visibleLayers.map((layer, colIdx) => (
|
||||
<div
|
||||
key={colIdx}
|
||||
className={`cmx-col-label ${hoverCell?.col === colIdx ? 'highlight' : ''}`}
|
||||
style={{ left: `${72 + colIdx * 18}px` }}
|
||||
>
|
||||
<span className="cmx-col-text">{layer.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 矩阵行 */}
|
||||
<div className="cmx-rows">
|
||||
{visibleLayers.map((rowLayer, rowIdx) => (
|
||||
<div key={rowIdx} className={`cmx-row ${rowIdx % 2 === 0 ? 'even' : 'odd'}`}>
|
||||
{/* 行标题 */}
|
||||
<div
|
||||
className={`cmx-row-label ${hoverCell?.row === rowIdx ? 'highlight' : ''}`}
|
||||
onDoubleClick={(e) => handleStartEdit(rowIdx, e)}
|
||||
>
|
||||
{editingLayer === rowIdx ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
onBlur={handleSaveEdit}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="cmx-edit-input"
|
||||
maxLength={16}
|
||||
/>
|
||||
) : (
|
||||
<span className="cmx-row-text">{rowLayer.name}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 单元格 */}
|
||||
<div className="cmx-cells">
|
||||
{visibleLayers.slice(0, rowIdx + 1).map((_, colIdx) => {
|
||||
const canCollide = config.canLayersCollide(rowIdx, colIdx);
|
||||
const isHovered = hoverCell?.row === rowIdx && hoverCell?.col === colIdx;
|
||||
const isHighlightRow = hoverCell?.row === rowIdx;
|
||||
const isHighlightCol = hoverCell?.col === colIdx;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={colIdx}
|
||||
className={`cmx-cell ${isHovered ? 'hovered' : ''} ${(isHighlightRow || isHighlightCol) && !isHovered ? 'highlight' : ''}`}
|
||||
onClick={() => handleToggleCollision(rowIdx, colIdx)}
|
||||
onMouseEnter={() => setHoverCell({ row: rowIdx, col: colIdx })}
|
||||
>
|
||||
<div className={`cmx-checkbox ${canCollide ? 'checked' : ''}`} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="cmx-editor">
|
||||
{renderTriangleMatrix()}
|
||||
|
||||
<style>{`
|
||||
.cmx-editor {
|
||||
font-size: 11px;
|
||||
color: var(--text-primary, #ccc);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cmx-container {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
padding-top: 75px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cmx-hint {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 8px;
|
||||
font-size: 10px;
|
||||
color: var(--text-tertiary, #666);
|
||||
}
|
||||
|
||||
.cmx-matrix {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* 列标题 */
|
||||
.cmx-col-headers {
|
||||
position: absolute;
|
||||
top: -65px;
|
||||
left: 0;
|
||||
height: 65px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cmx-col-label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 18px;
|
||||
height: 65px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cmx-col-label.highlight .cmx-col-text {
|
||||
color: var(--accent-color, #58a6ff);
|
||||
}
|
||||
|
||||
.cmx-col-text {
|
||||
transform-origin: left bottom;
|
||||
transform: rotate(-45deg);
|
||||
white-space: nowrap;
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary, #8b8b8b);
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
/* 行 */
|
||||
.cmx-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.cmx-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 18px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.cmx-row.even {
|
||||
background: rgba(255, 255, 255, 0.015);
|
||||
}
|
||||
|
||||
.cmx-row-label {
|
||||
width: 72px;
|
||||
min-width: 72px;
|
||||
padding-right: 8px;
|
||||
text-align: right;
|
||||
cursor: default;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.cmx-row-label.highlight .cmx-row-text {
|
||||
color: var(--accent-color, #58a6ff);
|
||||
}
|
||||
|
||||
.cmx-row-text {
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary, #8b8b8b);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cmx-edit-input {
|
||||
width: 64px;
|
||||
padding: 1px 4px;
|
||||
border: 1px solid var(--accent-color, #58a6ff);
|
||||
border-radius: 2px;
|
||||
background: var(--input-bg, #1e1e1e);
|
||||
color: var(--text-primary, #ccc);
|
||||
font-size: 10px;
|
||||
outline: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 单元格 */
|
||||
.cmx-cells {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cmx-cell {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.cmx-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.cmx-cell.highlight {
|
||||
background: rgba(88, 166, 255, 0.06);
|
||||
}
|
||||
|
||||
.cmx-cell.hovered {
|
||||
background: rgba(88, 166, 255, 0.12);
|
||||
}
|
||||
|
||||
.cmx-checkbox {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid var(--border-color, #404040);
|
||||
border-radius: 2px;
|
||||
background: var(--input-bg, #1e1e1e);
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.cmx-cell:hover .cmx-checkbox {
|
||||
border-color: var(--text-tertiary, #606060);
|
||||
}
|
||||
|
||||
.cmx-checkbox.checked {
|
||||
background: var(--accent-color, #58a6ff);
|
||||
border-color: var(--accent-color, #58a6ff);
|
||||
}
|
||||
|
||||
.cmx-checkbox.checked::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 3px;
|
||||
border-left: 1.5px solid white;
|
||||
border-bottom: 1.5px solid white;
|
||||
transform: rotate(-45deg) translate(1px, 2px);
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CollisionMatrixEditor;
|
||||
433
packages/physics-rapier2d-editor/src/gizmos/Physics2DGizmo.ts
Normal file
433
packages/physics-rapier2d-editor/src/gizmos/Physics2DGizmo.ts
Normal file
@@ -0,0 +1,433 @@
|
||||
/**
|
||||
* Physics 2D Gizmo Implementation
|
||||
* 2D 物理 Gizmo 实现
|
||||
*
|
||||
* 使用 GizmoRegistry 为物理组件注册 gizmo 提供者。
|
||||
* 通过 Rust WebGL 引擎渲染。
|
||||
*/
|
||||
|
||||
import type { Entity } from '@esengine/ecs-framework';
|
||||
import type {
|
||||
IGizmoRenderData,
|
||||
IRectGizmoData,
|
||||
ICircleGizmoData,
|
||||
ILineGizmoData,
|
||||
ICapsuleGizmoData,
|
||||
GizmoColor
|
||||
} from '@esengine/editor-core';
|
||||
import { GizmoRegistry } from '@esengine/editor-core';
|
||||
import { TransformComponent } from '@esengine/engine-core';
|
||||
|
||||
import {
|
||||
BoxCollider2DComponent,
|
||||
CircleCollider2DComponent,
|
||||
CapsuleCollider2DComponent,
|
||||
PolygonCollider2DComponent,
|
||||
Rigidbody2DComponent,
|
||||
RigidbodyType2D
|
||||
} from '@esengine/physics-rapier2d';
|
||||
|
||||
/**
|
||||
* 物理 Gizmo 颜色配置
|
||||
*/
|
||||
const PhysicsGizmoColors = {
|
||||
collider: { r: 0.0, g: 0.8, b: 0.0, a: 1.0 } as GizmoColor,
|
||||
trigger: { r: 1.0, g: 0.6, b: 0.0, a: 1.0 } as GizmoColor,
|
||||
selected: { r: 0.0, g: 1.0, b: 1.0, a: 1.0 } as GizmoColor,
|
||||
dynamicBody: { r: 0.2, g: 0.6, b: 1.0, a: 0.9 } as GizmoColor,
|
||||
kinematicBody: { r: 0.8, g: 0.3, b: 1.0, a: 0.9 } as GizmoColor,
|
||||
staticBody: { r: 0.5, g: 0.5, b: 0.5, a: 0.7 } as GizmoColor,
|
||||
velocity: { r: 1.0, g: 0.2, b: 0.2, a: 0.9 } as GizmoColor,
|
||||
centerMark: { r: 1.0, g: 1.0, b: 1.0, a: 0.8 } as GizmoColor,
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取碰撞体 Gizmo 颜色
|
||||
*/
|
||||
function getColliderColor(isSelected: boolean, isTrigger: boolean): GizmoColor {
|
||||
if (isSelected) {
|
||||
return PhysicsGizmoColors.selected;
|
||||
}
|
||||
if (isTrigger) {
|
||||
return PhysicsGizmoColors.trigger;
|
||||
}
|
||||
return PhysicsGizmoColors.collider;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取刚体类型颜色
|
||||
*/
|
||||
function getRigidbodyColor(bodyType: RigidbodyType2D, isSelected: boolean): GizmoColor {
|
||||
const baseAlpha = isSelected ? 1.0 : 0.7;
|
||||
|
||||
switch (bodyType) {
|
||||
case RigidbodyType2D.Dynamic:
|
||||
return { ...PhysicsGizmoColors.dynamicBody, a: baseAlpha };
|
||||
case RigidbodyType2D.Kinematic:
|
||||
return { ...PhysicsGizmoColors.kinematicBody, a: baseAlpha };
|
||||
case RigidbodyType2D.Static:
|
||||
return { ...PhysicsGizmoColors.staticBody, a: baseAlpha };
|
||||
default:
|
||||
return { r: 1, g: 1, b: 1, a: baseAlpha };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建中心点标记 Gizmo (十字形)
|
||||
*/
|
||||
function createCenterMarkGizmo(x: number, y: number, size: number, color: GizmoColor): ILineGizmoData[] {
|
||||
const halfSize = size / 2;
|
||||
return [
|
||||
{
|
||||
type: 'line',
|
||||
points: [
|
||||
{ x: x - halfSize, y: y },
|
||||
{ x: x + halfSize, y: y }
|
||||
],
|
||||
color,
|
||||
closed: false
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
points: [
|
||||
{ x: x, y: y - halfSize },
|
||||
{ x: x, y: y + halfSize }
|
||||
],
|
||||
color,
|
||||
closed: false
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* BoxCollider2D gizmo provider
|
||||
* 矩形碰撞体 gizmo 提供者
|
||||
*/
|
||||
function boxCollider2DGizmoProvider(
|
||||
collider: BoxCollider2DComponent,
|
||||
entity: Entity,
|
||||
isSelected: boolean
|
||||
): IGizmoRenderData[] {
|
||||
const transform = entity.getComponent(TransformComponent);
|
||||
if (!transform) return [];
|
||||
|
||||
const gizmos: IGizmoRenderData[] = [];
|
||||
const color = getColliderColor(isSelected, collider.isTrigger);
|
||||
|
||||
const rotation = typeof transform.rotation === 'number'
|
||||
? transform.rotation
|
||||
: transform.rotation.z;
|
||||
|
||||
const worldX = transform.position.x + collider.offset.x * transform.scale.x;
|
||||
const worldY = transform.position.y + collider.offset.y * transform.scale.y;
|
||||
const scaledWidth = collider.width * transform.scale.x;
|
||||
const scaledHeight = collider.height * transform.scale.y;
|
||||
const totalRotation = rotation + collider.rotationOffset;
|
||||
|
||||
// 主要矩形边框
|
||||
const rectGizmo: IRectGizmoData = {
|
||||
type: 'rect',
|
||||
x: worldX,
|
||||
y: worldY,
|
||||
width: scaledWidth,
|
||||
height: scaledHeight,
|
||||
rotation: totalRotation,
|
||||
originX: 0.5,
|
||||
originY: 0.5,
|
||||
color,
|
||||
showHandles: false
|
||||
};
|
||||
gizmos.push(rectGizmo);
|
||||
|
||||
// 选中时显示中心点标记
|
||||
if (isSelected) {
|
||||
const centerMarkSize = Math.min(scaledWidth, scaledHeight) * 0.1;
|
||||
gizmos.push(...createCenterMarkGizmo(worldX, worldY, centerMarkSize, PhysicsGizmoColors.centerMark));
|
||||
}
|
||||
|
||||
return gizmos;
|
||||
}
|
||||
|
||||
/**
|
||||
* CircleCollider2D gizmo provider
|
||||
* 圆形碰撞体 gizmo 提供者
|
||||
*/
|
||||
function circleCollider2DGizmoProvider(
|
||||
collider: CircleCollider2DComponent,
|
||||
entity: Entity,
|
||||
isSelected: boolean
|
||||
): IGizmoRenderData[] {
|
||||
const transform = entity.getComponent(TransformComponent);
|
||||
if (!transform) return [];
|
||||
|
||||
const gizmos: IGizmoRenderData[] = [];
|
||||
const color = getColliderColor(isSelected, collider.isTrigger);
|
||||
|
||||
const worldX = transform.position.x + collider.offset.x * transform.scale.x;
|
||||
const worldY = transform.position.y + collider.offset.y * transform.scale.y;
|
||||
const scale = Math.max(Math.abs(transform.scale.x), Math.abs(transform.scale.y));
|
||||
const scaledRadius = collider.radius * scale;
|
||||
|
||||
// 主要圆形边框
|
||||
const circleGizmo: ICircleGizmoData = {
|
||||
type: 'circle',
|
||||
x: worldX,
|
||||
y: worldY,
|
||||
radius: scaledRadius,
|
||||
color
|
||||
};
|
||||
gizmos.push(circleGizmo);
|
||||
|
||||
// 选中时显示额外信息
|
||||
if (isSelected) {
|
||||
// 中心点标记
|
||||
const centerMarkSize = scaledRadius * 0.15;
|
||||
gizmos.push(...createCenterMarkGizmo(worldX, worldY, centerMarkSize, PhysicsGizmoColors.centerMark));
|
||||
|
||||
// 半径指示线 (从中心到右边缘)
|
||||
const rotation = typeof transform.rotation === 'number'
|
||||
? transform.rotation
|
||||
: transform.rotation.z;
|
||||
const cos = Math.cos(rotation);
|
||||
const sin = Math.sin(rotation);
|
||||
|
||||
gizmos.push({
|
||||
type: 'line',
|
||||
points: [
|
||||
{ x: worldX, y: worldY },
|
||||
{ x: worldX + scaledRadius * cos, y: worldY + scaledRadius * sin }
|
||||
],
|
||||
color: PhysicsGizmoColors.selected,
|
||||
closed: false
|
||||
} as ILineGizmoData);
|
||||
|
||||
// 边缘小圆点
|
||||
gizmos.push({
|
||||
type: 'circle',
|
||||
x: worldX + scaledRadius * cos,
|
||||
y: worldY + scaledRadius * sin,
|
||||
radius: scaledRadius * 0.08,
|
||||
color: PhysicsGizmoColors.selected
|
||||
} as ICircleGizmoData);
|
||||
}
|
||||
|
||||
return gizmos;
|
||||
}
|
||||
|
||||
/**
|
||||
* CapsuleCollider2D gizmo provider
|
||||
* 胶囊碰撞体 gizmo 提供者
|
||||
*/
|
||||
function capsuleCollider2DGizmoProvider(
|
||||
collider: CapsuleCollider2DComponent,
|
||||
entity: Entity,
|
||||
isSelected: boolean
|
||||
): IGizmoRenderData[] {
|
||||
const transform = entity.getComponent(TransformComponent);
|
||||
if (!transform) return [];
|
||||
|
||||
const gizmos: IGizmoRenderData[] = [];
|
||||
const color = getColliderColor(isSelected, collider.isTrigger);
|
||||
|
||||
const rotation = typeof transform.rotation === 'number'
|
||||
? transform.rotation
|
||||
: transform.rotation.z;
|
||||
const totalRotation = rotation + collider.rotationOffset;
|
||||
|
||||
const worldX = transform.position.x + collider.offset.x * transform.scale.x;
|
||||
const worldY = transform.position.y + collider.offset.y * transform.scale.y;
|
||||
|
||||
const radius = collider.radius * transform.scale.x;
|
||||
const halfHeight = collider.halfHeight * transform.scale.y;
|
||||
|
||||
// 使用原生胶囊 Gizmo 类型
|
||||
gizmos.push({
|
||||
type: 'capsule',
|
||||
x: worldX,
|
||||
y: worldY,
|
||||
radius,
|
||||
halfHeight,
|
||||
rotation: totalRotation,
|
||||
color
|
||||
} as ICapsuleGizmoData);
|
||||
|
||||
if (isSelected) {
|
||||
const centerMarkSize = radius * 0.15;
|
||||
gizmos.push(...createCenterMarkGizmo(worldX, worldY, centerMarkSize, PhysicsGizmoColors.centerMark));
|
||||
}
|
||||
|
||||
return gizmos;
|
||||
}
|
||||
|
||||
/**
|
||||
* PolygonCollider2D gizmo provider
|
||||
* 多边形碰撞体 gizmo 提供者
|
||||
*/
|
||||
function polygonCollider2DGizmoProvider(
|
||||
collider: PolygonCollider2DComponent,
|
||||
entity: Entity,
|
||||
isSelected: boolean
|
||||
): IGizmoRenderData[] {
|
||||
const transform = entity.getComponent(TransformComponent);
|
||||
if (!transform) return [];
|
||||
|
||||
if (collider.vertices.length < 3) return [];
|
||||
|
||||
const gizmos: IGizmoRenderData[] = [];
|
||||
const color = getColliderColor(isSelected, collider.isTrigger);
|
||||
|
||||
const rotation = typeof transform.rotation === 'number'
|
||||
? transform.rotation
|
||||
: transform.rotation.z;
|
||||
const totalRotation = rotation + collider.rotationOffset;
|
||||
const cos = Math.cos(totalRotation);
|
||||
const sin = Math.sin(totalRotation);
|
||||
|
||||
const worldX = transform.position.x + collider.offset.x * transform.scale.x;
|
||||
const worldY = transform.position.y + collider.offset.y * transform.scale.y;
|
||||
|
||||
const worldPoints = collider.vertices.map(v => {
|
||||
const scaledX = v.x * transform.scale.x;
|
||||
const scaledY = v.y * transform.scale.y;
|
||||
const rotatedX = scaledX * cos - scaledY * sin;
|
||||
const rotatedY = scaledX * sin + scaledY * cos;
|
||||
return {
|
||||
x: worldX + rotatedX,
|
||||
y: worldY + rotatedY
|
||||
};
|
||||
});
|
||||
|
||||
gizmos.push({
|
||||
type: 'line',
|
||||
points: worldPoints,
|
||||
color,
|
||||
closed: true
|
||||
} as ILineGizmoData);
|
||||
|
||||
if (isSelected) {
|
||||
// 中心点标记
|
||||
const centerMarkSize = 0.5;
|
||||
gizmos.push(...createCenterMarkGizmo(worldX, worldY, centerMarkSize, PhysicsGizmoColors.centerMark));
|
||||
|
||||
// 顶点标记
|
||||
const vertexSize = 0.15;
|
||||
for (const point of worldPoints) {
|
||||
gizmos.push({
|
||||
type: 'circle',
|
||||
x: point.x,
|
||||
y: point.y,
|
||||
radius: vertexSize,
|
||||
color: PhysicsGizmoColors.selected
|
||||
} as ICircleGizmoData);
|
||||
}
|
||||
}
|
||||
|
||||
return gizmos;
|
||||
}
|
||||
|
||||
/**
|
||||
* Rigidbody2D gizmo provider
|
||||
* 刚体 gizmo 提供者
|
||||
*/
|
||||
function rigidbody2DGizmoProvider(
|
||||
rigidbody: Rigidbody2DComponent,
|
||||
entity: Entity,
|
||||
isSelected: boolean
|
||||
): IGizmoRenderData[] {
|
||||
const transform = entity.getComponent(TransformComponent);
|
||||
if (!transform) return [];
|
||||
|
||||
const gizmos: IGizmoRenderData[] = [];
|
||||
const bodyColor = getRigidbodyColor(rigidbody.bodyType, isSelected);
|
||||
|
||||
if (isSelected) {
|
||||
// 刚体类型标记
|
||||
gizmos.push({
|
||||
type: 'circle',
|
||||
x: transform.position.x,
|
||||
y: transform.position.y,
|
||||
radius: 0.3,
|
||||
color: bodyColor
|
||||
} as ICircleGizmoData);
|
||||
|
||||
// 速度向量
|
||||
const velMagnitude = Math.sqrt(
|
||||
rigidbody.velocity.x * rigidbody.velocity.x +
|
||||
rigidbody.velocity.y * rigidbody.velocity.y
|
||||
);
|
||||
|
||||
if (velMagnitude > 0.1) {
|
||||
const scale = 0.5;
|
||||
const endX = transform.position.x + rigidbody.velocity.x * scale;
|
||||
const endY = transform.position.y + rigidbody.velocity.y * scale;
|
||||
|
||||
// 速度线
|
||||
gizmos.push({
|
||||
type: 'line',
|
||||
points: [
|
||||
{ x: transform.position.x, y: transform.position.y },
|
||||
{ x: endX, y: endY }
|
||||
],
|
||||
color: PhysicsGizmoColors.velocity,
|
||||
closed: false
|
||||
} as ILineGizmoData);
|
||||
|
||||
// 箭头
|
||||
const arrowSize = 0.3;
|
||||
const angle = Math.atan2(rigidbody.velocity.y, rigidbody.velocity.x);
|
||||
const arrowAngle = Math.PI / 6;
|
||||
|
||||
gizmos.push({
|
||||
type: 'line',
|
||||
points: [
|
||||
{ x: endX, y: endY },
|
||||
{
|
||||
x: endX - arrowSize * Math.cos(angle - arrowAngle),
|
||||
y: endY - arrowSize * Math.sin(angle - arrowAngle)
|
||||
}
|
||||
],
|
||||
color: PhysicsGizmoColors.velocity,
|
||||
closed: false
|
||||
} as ILineGizmoData);
|
||||
|
||||
gizmos.push({
|
||||
type: 'line',
|
||||
points: [
|
||||
{ x: endX, y: endY },
|
||||
{
|
||||
x: endX - arrowSize * Math.cos(angle + arrowAngle),
|
||||
y: endY - arrowSize * Math.sin(angle + arrowAngle)
|
||||
}
|
||||
],
|
||||
color: PhysicsGizmoColors.velocity,
|
||||
closed: false
|
||||
} as ILineGizmoData);
|
||||
}
|
||||
}
|
||||
|
||||
return gizmos;
|
||||
}
|
||||
|
||||
/**
|
||||
* Register gizmo providers for all physics components.
|
||||
* 为所有物理组件注册 gizmo 提供者。
|
||||
*/
|
||||
export function registerPhysics2DGizmos(): void {
|
||||
GizmoRegistry.register(BoxCollider2DComponent, boxCollider2DGizmoProvider);
|
||||
GizmoRegistry.register(CircleCollider2DComponent, circleCollider2DGizmoProvider);
|
||||
GizmoRegistry.register(CapsuleCollider2DComponent, capsuleCollider2DGizmoProvider);
|
||||
GizmoRegistry.register(PolygonCollider2DComponent, polygonCollider2DGizmoProvider);
|
||||
GizmoRegistry.register(Rigidbody2DComponent, rigidbody2DGizmoProvider);
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregister gizmo providers for all physics components.
|
||||
* 取消注册所有物理组件的 gizmo 提供者。
|
||||
*/
|
||||
export function unregisterPhysics2DGizmos(): void {
|
||||
GizmoRegistry.unregister(BoxCollider2DComponent);
|
||||
GizmoRegistry.unregister(CircleCollider2DComponent);
|
||||
GizmoRegistry.unregister(CapsuleCollider2DComponent);
|
||||
GizmoRegistry.unregister(PolygonCollider2DComponent);
|
||||
GizmoRegistry.unregister(Rigidbody2DComponent);
|
||||
}
|
||||
11
packages/physics-rapier2d-editor/src/index.ts
Normal file
11
packages/physics-rapier2d-editor/src/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Physics 2D Editor Module Entry
|
||||
* 2D 物理编辑器模块入口
|
||||
*/
|
||||
|
||||
// Re-export editor module
|
||||
export { Physics2DEditorModule, physics2DEditorModule } from './Physics2DEditorModule';
|
||||
export { physics2DEditorModule as default } from './Physics2DEditorModule';
|
||||
|
||||
// Re-export plugin
|
||||
export { Physics2DPlugin } from './Physics2DPlugin';
|
||||
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* BoxCollider2D Inspector Provider
|
||||
* 2D 矩形碰撞体检视器
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Component } from '@esengine/ecs-framework';
|
||||
import type { IComponentInspector, ComponentInspectorContext } from '@esengine/editor-core';
|
||||
import { BoxCollider2DComponent, CollisionLayer2D } from '@esengine/physics-rapier2d';
|
||||
|
||||
export class BoxCollider2DInspectorProvider implements IComponentInspector<BoxCollider2DComponent> {
|
||||
readonly id = 'boxcollider2d-inspector';
|
||||
readonly name = 'BoxCollider2D Inspector';
|
||||
readonly priority = 100;
|
||||
readonly targetComponents = ['BoxCollider2D', 'BoxCollider2DComponent'];
|
||||
|
||||
canHandle(component: Component): component is BoxCollider2DComponent {
|
||||
return component instanceof BoxCollider2DComponent ||
|
||||
component.constructor.name === 'BoxCollider2DComponent';
|
||||
}
|
||||
|
||||
render(context: ComponentInspectorContext): React.ReactElement {
|
||||
const component = context.component as BoxCollider2DComponent;
|
||||
const onChange = context.onChange;
|
||||
|
||||
const handleChange = (prop: string, value: unknown) => {
|
||||
onChange?.(prop, value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="entity-inspector">
|
||||
<div className="inspector-section">
|
||||
<div className="section-title">Box Collider 2D</div>
|
||||
|
||||
{/* Size */}
|
||||
<div className="section-subtitle">Size</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Width</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.width}
|
||||
min={0.001}
|
||||
step={0.1}
|
||||
onChange={(e) => handleChange('width', parseFloat(e.target.value) || 1)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Height</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.height}
|
||||
min={0.001}
|
||||
step={0.1}
|
||||
onChange={(e) => handleChange('height', parseFloat(e.target.value) || 1)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Offset */}
|
||||
<div className="section-subtitle">Offset</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>X</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.offset.x}
|
||||
step={0.1}
|
||||
onChange={(e) => handleChange('offset', {
|
||||
...component.offset,
|
||||
x: parseFloat(e.target.value) || 0
|
||||
})}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Y</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.offset.y}
|
||||
step={0.1}
|
||||
onChange={(e) => handleChange('offset', {
|
||||
...component.offset,
|
||||
y: parseFloat(e.target.value) || 0
|
||||
})}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Material */}
|
||||
<div className="section-subtitle">Material</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Friction</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.friction}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
onChange={(e) => handleChange('friction', parseFloat(e.target.value) || 0)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Restitution</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.restitution}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
onChange={(e) => handleChange('restitution', parseFloat(e.target.value) || 0)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Density</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.density}
|
||||
min={0.001}
|
||||
step={0.1}
|
||||
onChange={(e) => handleChange('density', parseFloat(e.target.value) || 1)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Collision */}
|
||||
<div className="section-subtitle">Collision</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Is Trigger</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={component.isTrigger}
|
||||
onChange={(e) => handleChange('isTrigger', e.target.checked)}
|
||||
className="property-checkbox"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Layer</label>
|
||||
<select
|
||||
value={component.collisionLayer}
|
||||
onChange={(e) => handleChange('collisionLayer', parseInt(e.target.value, 10))}
|
||||
className="property-select"
|
||||
>
|
||||
<option value={CollisionLayer2D.Default}>Default</option>
|
||||
<option value={CollisionLayer2D.Player}>Player</option>
|
||||
<option value={CollisionLayer2D.Enemy}>Enemy</option>
|
||||
<option value={CollisionLayer2D.Ground}>Ground</option>
|
||||
<option value={CollisionLayer2D.Projectile}>Projectile</option>
|
||||
<option value={CollisionLayer2D.Trigger}>Trigger</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
/**
|
||||
* CircleCollider2D Inspector Provider
|
||||
* 2D 圆形碰撞体检视器
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Component } from '@esengine/ecs-framework';
|
||||
import type { IComponentInspector, ComponentInspectorContext } from '@esengine/editor-core';
|
||||
import { CircleCollider2DComponent, CollisionLayer2D } from '@esengine/physics-rapier2d';
|
||||
|
||||
export class CircleCollider2DInspectorProvider implements IComponentInspector<CircleCollider2DComponent> {
|
||||
readonly id = 'circlecollider2d-inspector';
|
||||
readonly name = 'CircleCollider2D Inspector';
|
||||
readonly priority = 100;
|
||||
readonly targetComponents = ['CircleCollider2D', 'CircleCollider2DComponent'];
|
||||
|
||||
canHandle(component: Component): component is CircleCollider2DComponent {
|
||||
return component instanceof CircleCollider2DComponent ||
|
||||
component.constructor.name === 'CircleCollider2DComponent';
|
||||
}
|
||||
|
||||
render(context: ComponentInspectorContext): React.ReactElement {
|
||||
const component = context.component as CircleCollider2DComponent;
|
||||
const onChange = context.onChange;
|
||||
|
||||
const handleChange = (prop: string, value: unknown) => {
|
||||
onChange?.(prop, value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="entity-inspector">
|
||||
<div className="inspector-section">
|
||||
<div className="section-title">Circle Collider 2D</div>
|
||||
|
||||
{/* Radius */}
|
||||
<div className="property-row">
|
||||
<label>Radius</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.radius}
|
||||
min={0.001}
|
||||
step={0.1}
|
||||
onChange={(e) => handleChange('radius', parseFloat(e.target.value) || 0.5)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Offset */}
|
||||
<div className="section-subtitle">Offset</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>X</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.offset.x}
|
||||
step={0.1}
|
||||
onChange={(e) => handleChange('offset', {
|
||||
...component.offset,
|
||||
x: parseFloat(e.target.value) || 0
|
||||
})}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Y</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.offset.y}
|
||||
step={0.1}
|
||||
onChange={(e) => handleChange('offset', {
|
||||
...component.offset,
|
||||
y: parseFloat(e.target.value) || 0
|
||||
})}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Material */}
|
||||
<div className="section-subtitle">Material</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Friction</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.friction}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
onChange={(e) => handleChange('friction', parseFloat(e.target.value) || 0)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Restitution</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.restitution}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
onChange={(e) => handleChange('restitution', parseFloat(e.target.value) || 0)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Density</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.density}
|
||||
min={0.001}
|
||||
step={0.1}
|
||||
onChange={(e) => handleChange('density', parseFloat(e.target.value) || 1)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Collision */}
|
||||
<div className="section-subtitle">Collision</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Is Trigger</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={component.isTrigger}
|
||||
onChange={(e) => handleChange('isTrigger', e.target.checked)}
|
||||
className="property-checkbox"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Layer</label>
|
||||
<select
|
||||
value={component.collisionLayer}
|
||||
onChange={(e) => handleChange('collisionLayer', parseInt(e.target.value, 10))}
|
||||
className="property-select"
|
||||
>
|
||||
<option value={CollisionLayer2D.Default}>Default</option>
|
||||
<option value={CollisionLayer2D.Player}>Player</option>
|
||||
<option value={CollisionLayer2D.Enemy}>Enemy</option>
|
||||
<option value={CollisionLayer2D.Ground}>Ground</option>
|
||||
<option value={CollisionLayer2D.Projectile}>Projectile</option>
|
||||
<option value={CollisionLayer2D.Trigger}>Trigger</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
/**
|
||||
* Rigidbody2D Inspector Provider
|
||||
* 2D 刚体检视器
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Component } from '@esengine/ecs-framework';
|
||||
import type { IComponentInspector, ComponentInspectorContext } from '@esengine/editor-core';
|
||||
import { Rigidbody2DComponent, RigidbodyType2D, CollisionDetectionMode2D } from '@esengine/physics-rapier2d';
|
||||
|
||||
export class Rigidbody2DInspectorProvider implements IComponentInspector<Rigidbody2DComponent> {
|
||||
readonly id = 'rigidbody2d-inspector';
|
||||
readonly name = 'Rigidbody2D Inspector';
|
||||
readonly priority = 100;
|
||||
readonly targetComponents = ['Rigidbody2D', 'Rigidbody2DComponent'];
|
||||
|
||||
canHandle(component: Component): component is Rigidbody2DComponent {
|
||||
return component instanceof Rigidbody2DComponent ||
|
||||
component.constructor.name === 'Rigidbody2DComponent';
|
||||
}
|
||||
|
||||
render(context: ComponentInspectorContext): React.ReactElement {
|
||||
const component = context.component as Rigidbody2DComponent;
|
||||
const onChange = context.onChange;
|
||||
|
||||
const handleChange = (prop: string, value: unknown) => {
|
||||
onChange?.(prop, value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="entity-inspector">
|
||||
<div className="inspector-section">
|
||||
<div className="section-title">Rigidbody 2D</div>
|
||||
|
||||
{/* Body Type */}
|
||||
<div className="property-row">
|
||||
<label>Body Type</label>
|
||||
<select
|
||||
value={component.bodyType}
|
||||
onChange={(e) => handleChange('bodyType', parseInt(e.target.value, 10) as RigidbodyType2D)}
|
||||
className="property-select"
|
||||
>
|
||||
<option value={RigidbodyType2D.Dynamic}>Dynamic</option>
|
||||
<option value={RigidbodyType2D.Kinematic}>Kinematic</option>
|
||||
<option value={RigidbodyType2D.Static}>Static</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Mass - only for Dynamic */}
|
||||
{component.bodyType === RigidbodyType2D.Dynamic && (
|
||||
<div className="property-row">
|
||||
<label>Mass</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.mass}
|
||||
min={0.001}
|
||||
step={0.1}
|
||||
onChange={(e) => handleChange('mass', parseFloat(e.target.value) || 1)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Gravity Scale */}
|
||||
<div className="property-row">
|
||||
<label>Gravity Scale</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.gravityScale}
|
||||
step={0.1}
|
||||
onChange={(e) => handleChange('gravityScale', parseFloat(e.target.value) || 0)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Damping Section */}
|
||||
<div className="section-subtitle">Damping</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Linear</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.linearDamping}
|
||||
min={0}
|
||||
step={0.01}
|
||||
onChange={(e) => handleChange('linearDamping', parseFloat(e.target.value) || 0)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Angular</label>
|
||||
<input
|
||||
type="number"
|
||||
value={component.angularDamping}
|
||||
min={0}
|
||||
step={0.01}
|
||||
onChange={(e) => handleChange('angularDamping', parseFloat(e.target.value) || 0)}
|
||||
className="property-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Constraints Section */}
|
||||
<div className="section-subtitle">Constraints</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Freeze Position X</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={component.constraints.freezePositionX}
|
||||
onChange={(e) => handleChange('constraints', {
|
||||
...component.constraints,
|
||||
freezePositionX: e.target.checked
|
||||
})}
|
||||
className="property-checkbox"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Freeze Position Y</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={component.constraints.freezePositionY}
|
||||
onChange={(e) => handleChange('constraints', {
|
||||
...component.constraints,
|
||||
freezePositionY: e.target.checked
|
||||
})}
|
||||
className="property-checkbox"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Freeze Rotation</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={component.constraints.freezeRotation}
|
||||
onChange={(e) => handleChange('constraints', {
|
||||
...component.constraints,
|
||||
freezeRotation: e.target.checked
|
||||
})}
|
||||
className="property-checkbox"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Collision Detection */}
|
||||
<div className="section-subtitle">Collision</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Detection</label>
|
||||
<select
|
||||
value={component.collisionDetection}
|
||||
onChange={(e) => handleChange('collisionDetection', parseInt(e.target.value, 10) as CollisionDetectionMode2D)}
|
||||
className="property-select"
|
||||
>
|
||||
<option value={CollisionDetectionMode2D.Discrete}>Discrete</option>
|
||||
<option value={CollisionDetectionMode2D.Continuous}>Continuous</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Sleep */}
|
||||
<div className="section-subtitle">Sleep</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Can Sleep</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={component.canSleep}
|
||||
onChange={(e) => handleChange('canSleep', e.target.checked)}
|
||||
className="property-checkbox"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Runtime Info (read-only) */}
|
||||
<div className="section-subtitle">Runtime Info</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Velocity</label>
|
||||
<span className="property-readonly">
|
||||
({component.velocity.x.toFixed(2)}, {component.velocity.y.toFixed(2)})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Angular Vel</label>
|
||||
<span className="property-readonly">
|
||||
{component.angularVelocity.toFixed(2)} rad/s
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="property-row">
|
||||
<label>Is Awake</label>
|
||||
<span className="property-readonly">
|
||||
{component.isAwake ? 'Yes' : 'No'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
23
packages/physics-rapier2d-editor/tsconfig.build.json
Normal file
23
packages/physics-rapier2d-editor/tsconfig.build.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ES2020",
|
||||
"moduleResolution": "bundler",
|
||||
"lib": ["ES2020", "DOM"],
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"jsx": "react-jsx",
|
||||
"resolveJsonModule": true,
|
||||
"experimentalDecorators": true,
|
||||
"emitDecoratorMetadata": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
12
packages/physics-rapier2d-editor/tsconfig.json
Normal file
12
packages/physics-rapier2d-editor/tsconfig.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"declaration": true,
|
||||
"jsx": "react-jsx",
|
||||
"moduleResolution": "bundler"
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
7
packages/physics-rapier2d-editor/tsup.config.ts
Normal file
7
packages/physics-rapier2d-editor/tsup.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'tsup';
|
||||
import { editorOnlyPreset } from '../build-config/src/presets/plugin-tsup';
|
||||
|
||||
export default defineConfig({
|
||||
...editorOnlyPreset(),
|
||||
tsconfig: 'tsconfig.build.json'
|
||||
});
|
||||
Reference in New Issue
Block a user