Function Viewport

packages/editor-app/src/components/Viewport.tsx:233–2556

({ locale = 'en', messageHub, commandManager }: ViewportProps)

}

export function Viewport({ locale = 'en', messageHub, commandManager }: ViewportProps) {
    const { t } = useLocale();
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const containerRef = useRef<HTMLDivElement>(null);
    const [playState, setPlayState] = useState<PlayState>('stopped');
    const [showGrid, setShowGrid] = useState(true);
    const [showGizmos, setShowGizmos] = useState(true);
    const [showStats, setShowStats] = useState(false);
    const [transformMode, setTransformMode] = useState<TransformMode>('select');
    const [showRunMenu, setShowRunMenu] = useState(false);
    const [showQRDialog, setShowQRDialog] = useState(false);
    const [devicePreviewUrl, setDevicePreviewUrl] = useState('');
    const runMenuRef = useRef<HTMLDivElement>(null);

    // Prefab edit mode state | 预制体编辑模式状态
    const [prefabEditMode, setPrefabEditMode] = useState<{
        isActive: boolean;
        prefabName: string;
        prefabPath: string;
    } | null>(null);

    // Snap settings
    const [snapEnabled, setSnapEnabled] = useState(true);
    const [gridSnapValue, setGridSnapValue] = useState(10);
    const [rotationSnapValue, setRotationSnapValue] = useState(15);
    const [scaleSnapValue, setScaleSnapValue] = useState(0.25);
    const [showGridSnapMenu, setShowGridSnapMenu] = useState(false);
    const [showRotationSnapMenu, setShowRotationSnapMenu] = useState(false);
    const [showScaleSnapMenu, setShowScaleSnapMenu] = useState(false);
    const gridSnapMenuRef = useRef<HTMLDivElement>(null);
    const rotationSnapMenuRef = useRef<HTMLDivElement>(null);
    const scaleSnapMenuRef = useRef<HTMLDivElement>(null);

    // Store editor camera state when entering play mode
    const editorCameraRef = useRef({ x: 0, y: 0, zoom: 1 });
    const playStateRef = useRef<PlayState>('stopped');

    // Runtime scene manager for play mode scene switching | Play 模式场景切换管理器
    const runtimeSceneManagerRef = useRef<IRuntimeSceneManager | null>(null);

    // Live transform display state | 实时变换显示状态
    const [liveTransform, setLiveTransform] = useState<{
        type: 'move' | 'rotate' | 'scale';
        x: number;
        y: number;
        rotation?: number;
        scaleX?: number;
        scaleY?: number;
    } | null>(null);

    // Rust engine hook with multi-viewport support
    const engine = useEngine({
        viewportId: 'editor-viewport',
        canvasId: 'viewport-canvas',
        showGrid: true,
        showGizmos: true,
        autoInit: true
    });