feat(physics): 集成 Rapier2D 物理引擎并修复预览重置问题 (#244)
* feat(physics): 集成 Rapier2D 物理引擎并修复预览重置问题 * fix: 修复 CI 流程并清理代码
This commit is contained in:
YHH
GitHub
@@ -0,0 +1,201 @@
|
||||
/**
|
||||
* Rigidbody2D Inspector Provider
|
||||
* 2D 刚体检视器
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Component } from '@esengine/ecs-framework';
|
||||
import type { IComponentInspector, ComponentInspectorContext } from '@esengine/editor-core';
|
||||
import { Rigidbody2DComponent } from '../../components/Rigidbody2DComponent';
|
||||
import { RigidbodyType2D, CollisionDetectionMode2D } from '../../types/Physics2DTypes';
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user