@fps-games/editor 0.1.1-beta.9 → 0.1.2-beta.1

package/node_modules/@fps-games/editor-browser/dist/local-editor-ui.js

@@ -15,14 +15,33 @@ import { createShortcutHelpPanel as createLocalEditorShortcutHelpPanel } from '.
 import { applyLocalEditorTheme, ensureLocalEditorTheme, LOCAL_EDITOR_THEME_CLASS, normalizeLocalEditorThemeName, } from './local-editor-ui-theme';
 import { createDefaultLocalEditorWorkbenchLayout, createLocalEditorWorkbenchLayoutController, createLocalEditorWorkbench, createSceneHeaderToolbar, createWorkbenchPanelContent, } from './local-editor-ui-workbench';
 import { createLocalEditorIcon } from './local-editor-ui-icons';
-export { applyLocalEditorBrowserInspectorControlBinding, createLocalEditorBrowserInspectorControlRegistry, formatLocalEditorBrowserInspectorValue, resolveLocalEditorBrowserInspectorSectionStatus, resolveLocalEditorBrowserInspectorControlRegistration, } from './local-editor-ui-panels';
+export { applyLocalEditorBrowserInspectorControlBinding, createLocalEditorBrowserInspectorControlRegistry, formatLocalEditorBrowserInspectorNumberValue, formatLocalEditorBrowserInspectorValue, resolveLocalEditorBrowserInspectorSectionStatus, resolveLocalEditorBrowserInspectorControlRegistration, } from './local-editor-ui-panels';
 export { DEFAULT_LOCAL_EDITOR_THEME, LOCAL_EDITOR_THEME_CLASS, applyLocalEditorTheme, normalizeLocalEditorThemeName, } from './local-editor-ui-theme';
 export { LOCAL_EDITOR_ICON_NAMES, createLocalEditorIcon, isLocalEditorIconName, resolveLocalEditorIconName, } from './local-editor-ui-icons';
-function readInspectorInputValue(input) {
+const INSPECTOR_INPUT_PENDING = Symbol('inspector-input-pending');
+export function parseLocalEditorBrowserInspectorNumberValue(value, mode = 'final') {
+    const normalized = value.trim();
+    if (normalized === '')
+        return mode === 'final' ? 0 : null;
+    if (normalized === '-'
+        || normalized === '+'
+        || normalized === '.'
+        || normalized === '-.'
+        || normalized === '+.') {
+        return null;
+    }
+    if (mode === 'live' && (/[.]$/.test(normalized) || /e[+-]?$/i.test(normalized)))
+        return null;
+    if (!/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(normalized))
+        return null;
+    const numeric = Number(normalized);
+    return Number.isFinite(numeric) ? numeric : null;
+}
+function readInspectorInputValue(input, mode = 'final') {
     const control = input.dataset.serializedControl;
     const valueType = input.dataset.serializedValueType;
     if ((control === 'vec2' || control === 'vec3') && input instanceof HTMLInputElement) {
-        return readInspectorVectorInputValue(input);
+        return readInspectorVectorInputValue(input, mode);
     }
     if (control === 'enum' && input instanceof HTMLSelectElement) {
         const option = input.selectedOptions.item(0);
@@ -40,8 +59,9 @@ function readInspectorInputValue(input) {
         return input.checked;
     if (control === 'boolean' || valueType === 'boolean')
         return input.value === 'true';
-    if (control === 'number' || valueType === 'number')
-        return Number(input.value);
+    if (control === 'number' || valueType === 'number') {
+        return parseLocalEditorBrowserInspectorNumberValue(input.value, mode) ?? INSPECTOR_INPUT_PENDING;
+    }
     if (control === 'color' && input instanceof HTMLInputElement && input.type === 'color') {
         const value = input.value.replace('#', '');
         const numeric = Number.parseInt(value, 16);
@@ -148,7 +168,7 @@ function setToolbarButtonIcon(doc, button, icon) {
     else
         button.prepend(nextIcon);
 }
-function readInspectorVectorInputValue(input) {
+function readInspectorVectorInputValue(input, mode) {
     const wrapper = input.closest('[data-inspector-vector-control]');
     const values = {};
     const fields = wrapper
@@ -158,22 +178,27 @@ function readInspectorVectorInputValue(input) {
         const axis = field.dataset.serializedVectorAxis;
         if (!axis)
             continue;
-        const numeric = Number(field.value);
-        values[axis] = Number.isFinite(numeric) ? numeric : 0;
+        const numeric = parseLocalEditorBrowserInspectorNumberValue(field.value, mode);
+        if (numeric == null)
+            return INSPECTOR_INPUT_PENDING;
+        values[axis] = numeric;
     }
     return values;
 }
-function createInspectorPropertyInput(input, source) {
+function createInspectorPropertyInput(input, source, numberParseMode = 'final') {
     if (!input.dataset.serializedPath || !input.dataset.serializedTargetId)
         return null;
     const targetIds = input.dataset.serializedTargetIds
         ? input.dataset.serializedTargetIds.split(',').filter(Boolean)
         : undefined;
+    const value = readInspectorInputValue(input, numberParseMode);
+    if (value === INSPECTOR_INPUT_PENDING)
+        return null;
     return {
         targetId: input.dataset.serializedTargetId,
         targetIds,
         path: input.dataset.serializedPath,
-        value: readInspectorInputValue(input),
+        value,
         control: input.dataset.serializedControl,
         valueType: input.dataset.serializedValueType,
         commitMode: input.dataset.serializedCommitMode,
@@ -181,6 +206,13 @@ function createInspectorPropertyInput(input, source) {
         source: input.dataset.serializedEditSource ?? source,
     };
 }
+function hasPendingInspectorNumberValue(input, mode = 'live') {
+    const control = input.dataset.serializedControl;
+    const valueType = input.dataset.serializedValueType;
+    if (control !== 'number' && valueType !== 'number' && control !== 'vec2' && control !== 'vec3')
+        return false;
+    return readInspectorInputValue(input, mode) === INSPECTOR_INPUT_PENDING;
+}
 function readInspectorCommitMode(input) {
     return input.dataset.serializedCommitMode ?? 'live';
 }
@@ -193,6 +225,96 @@ function readInspectorImmediateSource(input) {
         return 'color';
     return 'input';
 }
+function createSceneFrameRateOverlay(doc) {
+    const root = doc.createElement('div');
+    root.classList.add(LOCAL_EDITOR_THEME_CLASS);
+    root.dataset.editorSceneFrameRateOverlay = 'true';
+    root.style.cssText = [
+        'position:absolute',
+        'right:14px',
+        'bottom:134px',
+        'z-index:3',
+        'display:none',
+        'align-items:center',
+        'gap:6px',
+        'width:112px',
+        'height:30px',
+        'padding:0 8px',
+        'box-sizing:border-box',
+        'border:1px solid color-mix(in srgb, var(--fps-editor-border) 78%, transparent)',
+        'border-radius:6px',
+        'background:color-mix(in srgb, var(--fps-editor-chrome) 76%, transparent)',
+        'box-shadow:var(--fps-editor-shadow-panel)',
+        'font-family:var(--fps-editor-font)',
+        'font-size:11px',
+        'font-weight:900',
+        'letter-spacing:0',
+        'color:var(--fps-editor-text-strong)',
+        'pointer-events:none',
+        'backdrop-filter:blur(5px)',
+        'overflow:hidden',
+    ].join(';');
+    const label = doc.createElement('span');
+    label.textContent = 'FPS';
+    label.style.cssText = [
+        'color:var(--fps-editor-muted-strong)',
+        'font-size:10px',
+        'line-height:1',
+    ].join(';');
+    const fpsValue = doc.createElement('span');
+    fpsValue.textContent = '--';
+    fpsValue.style.cssText = [
+        'width:26px',
+        'flex:0 0 26px',
+        'font-variant-numeric:tabular-nums',
+        'font-size:13px',
+        'line-height:1',
+    ].join(';');
+    const modeLabel = doc.createElement('span');
+    modeLabel.textContent = 'IDLE';
+    modeLabel.style.cssText = [
+        'margin-left:auto',
+        'padding:2px 4px',
+        'flex:0 0 auto',
+        'border:1px solid var(--fps-editor-border-soft)',
+        'border-radius:4px',
+        'background:color-mix(in srgb, var(--fps-editor-field) 72%, transparent)',
+        'color:var(--fps-editor-muted)',
+        'font-size:9px',
+        'line-height:1',
+    ].join(';');
+    root.appendChild(label);
+    root.appendChild(fpsValue);
+    root.appendChild(modeLabel);
+    return { root, fpsValue, modeLabel };
+}
+function renderSceneFrameRateOverlay(overlay, stats) {
+    if (!stats) {
+        overlay.root.style.display = 'none';
+        return;
+    }
+    overlay.root.style.display = 'flex';
+    const fps = Number.isFinite(stats.fps) ? Math.round(stats.fps) : null;
+    const displayFps = stats.mode === 'idle' ? 0 : fps;
+    overlay.fpsValue.textContent = displayFps == null ? '--' : String(displayFps);
+    overlay.modeLabel.textContent = stats.mode === 'continuous' ? 'LIVE' : 'IDLE';
+    overlay.modeLabel.style.color = stats.mode === 'continuous'
+        ? 'var(--fps-editor-success)'
+        : 'var(--fps-editor-muted)';
+    overlay.fpsValue.style.color = displayFps == null || stats.mode === 'idle'
+        ? 'var(--fps-editor-muted)'
+        : displayFps >= 50
+            ? 'var(--fps-editor-success)'
+            : displayFps >= 30
+                ? 'var(--fps-editor-warn)'
+                : 'var(--fps-editor-danger-strong)';
+    overlay.root.title = [
+        `Scene FPS: ${displayFps == null ? '--' : displayFps}`,
+        `mode: ${stats.mode}`,
+        stats.lastFrameMs == null ? '' : `frame: ${stats.lastFrameMs.toFixed(1)}ms`,
+        stats.activeReasons.length ? `active: ${stats.activeReasons.join(', ')}` : '',
+    ].filter(Boolean).join(' | ');
+}
 function createCoordinateAxesOverlay(doc) {
     const root = doc.createElement('div');
     root.dataset.editorCoordinateAxesOverlay = 'true';
@@ -260,6 +382,30 @@ function createCoordinateAxesOverlay(doc) {
     centerDot.setAttribute('r', '3.2');
     centerDot.setAttribute('fill', 'color-mix(in srgb, var(--fps-editor-text) 82%, transparent)');
     labelLayer.appendChild(centerDot);
+    const projectionIcon = doc.createElementNS('http://www.w3.org/2000/svg', 'g');
+    projectionIcon.setAttribute('transform', 'translate(8 8)');
+    projectionIcon.setAttribute('role', 'button');
+    projectionIcon.setAttribute('tabindex', '0');
+    projectionIcon.dataset.coordinateAxesProjectionToggle = 'true';
+    projectionIcon.style.cssText = 'opacity:0.92;pointer-events:auto;cursor:pointer;outline:none';
+    const projectionIconFrame = doc.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    projectionIconFrame.setAttribute('x', '0');
+    projectionIconFrame.setAttribute('y', '0');
+    projectionIconFrame.setAttribute('width', '18');
+    projectionIconFrame.setAttribute('height', '18');
+    projectionIconFrame.setAttribute('rx', '4');
+    projectionIconFrame.setAttribute('fill', 'color-mix(in srgb, var(--fps-editor-chrome) 78%, transparent)');
+    projectionIconFrame.setAttribute('stroke', 'color-mix(in srgb, var(--fps-editor-border) 82%, transparent)');
+    projectionIconFrame.setAttribute('stroke-width', '1');
+    const projectionIconShape = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+    projectionIconShape.setAttribute('fill', 'none');
+    projectionIconShape.setAttribute('stroke', 'color-mix(in srgb, var(--fps-editor-accent) 82%, #ffffff)');
+    projectionIconShape.setAttribute('stroke-width', '1.6');
+    projectionIconShape.setAttribute('stroke-linejoin', 'round');
+    projectionIconShape.setAttribute('stroke-linecap', 'round');
+    projectionIcon.appendChild(projectionIconFrame);
+    projectionIcon.appendChild(projectionIconShape);
+    svg.appendChild(projectionIcon);
     return {
         root,
         lineLayer,
@@ -269,6 +415,8 @@ function createCoordinateAxesOverlay(doc) {
         axisLabels,
         axisDiscs,
         centerDot,
+        projectionIcon,
+        projectionIconShape,
     };
 }
 function renderCoordinateAxesOverlay(overlay, state) {
@@ -277,6 +425,7 @@ function renderCoordinateAxesOverlay(overlay, state) {
         return;
     }
     overlay.root.style.display = '';
+    renderCoordinateAxesProjectionIcon(overlay, state.projectionMode, state.projectionToggleDisabled === true);
     const center = 56;
     const lineLength = 38;
     const sortedAxes = [...state.axes].sort((left, right) => right.depth - left.depth);
@@ -305,6 +454,18 @@ function renderCoordinateAxesOverlay(overlay, state) {
     }
     overlay.labelLayer.appendChild(overlay.centerDot);
 }
+function renderCoordinateAxesProjectionIcon(overlay, mode, disabled) {
+    overlay.projectionIcon.dataset.viewportProjectionMode = mode;
+    overlay.projectionIcon.setAttribute('aria-label', disabled
+        ? `编辑视口投影：${VIEWPORT_PROJECTION_LABELS[mode]}，Main Camera 预览中不可切换`
+        : `编辑视口投影：${VIEWPORT_PROJECTION_LABELS[mode]}，点击切换`);
+    overlay.projectionIcon.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    overlay.projectionIcon.style.opacity = disabled ? '0.46' : '0.92';
+    overlay.projectionIcon.style.cursor = disabled ? 'not-allowed' : 'pointer';
+    overlay.projectionIconShape.setAttribute('d', mode === 'orthographic'
+        ? 'M5 6.5H12.5V14H5ZM7.5 4H15V11.5'
+        : 'M4.5 14H13.5L10.5 4H7.5ZM7 10.5H11');
+}
 function createSpatialOverlay(doc) {
     const root = doc.createElement('div');
     root.classList.add(LOCAL_EDITOR_THEME_CLASS);
@@ -959,17 +1120,17 @@ export function createLocalEditorBrowserUi(options = {}) {
     sceneUtilityActions.appendChild(gridToggleButton);
     sceneUtilityActions.appendChild(themeToggleButton);
     sceneUtilityActions.appendChild(sceneHelpButton);
-    const cameraPreviewGroup = doc.createElement('div');
-    cameraPreviewGroup.style.cssText = [
+    const mainCameraPreviewGroup = doc.createElement('div');
+    mainCameraPreviewGroup.style.cssText = [
         'display:flex',
         'align-items:center',
         'gap:4px',
         'padding-left:8px',
         'border-left:1px solid var(--fps-editor-divider)',
     ].join(';');
-    const sceneCameraButton = createToolbarIconButton(doc, '从 Main Camera 查看场景', 'camera');
-    sceneCameraButton.dataset.sceneCameraPreviewToggle = 'true';
-    cameraPreviewGroup.appendChild(sceneCameraButton);
+    const mainCameraPreviewButton = createToolbarIconButton(doc, '从 Main Camera 查看场景', 'camera');
+    mainCameraPreviewButton.dataset.mainCameraPreviewToggle = 'true';
+    mainCameraPreviewGroup.appendChild(mainCameraPreviewButton);
     const viewportToolsGroup = doc.createElement('div');
     viewportToolsGroup.style.cssText = [
         'display:flex',
@@ -1062,6 +1223,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         'pointer-events:auto',
     ].join(';');
     const coordinateAxesOverlay = createCoordinateAxesOverlay(doc);
+    const sceneFrameRateOverlay = createSceneFrameRateOverlay(doc);
     const spatialOverlay = createSpatialOverlay(doc);
     const measurementOverlay = createMeasurementOverlay(doc);
     sceneToolOverlay.appendChild(sceneTitle);
@@ -1073,12 +1235,13 @@ export function createLocalEditorBrowserUi(options = {}) {
     sceneToolOverlay.appendChild(actionGroup);
     sceneToolOverlay.appendChild(viewportToolsGroup);
     sceneToolOverlay.appendChild(sceneUtilityActions);
-    sceneToolOverlay.appendChild(cameraPreviewGroup);
+    sceneToolOverlay.appendChild(mainCameraPreviewGroup);
     sceneToolOverlay.appendChild(editorStatusButton);
     sceneToolOverlay.appendChild(toolbarOverflowButton);
     workbench.sceneHeader.appendChild(sceneToolOverlay);
     workbench.sceneFrame.appendChild(spatialOverlay.root);
     workbench.sceneFrame.appendChild(measurementOverlay.root);
+    workbench.sceneFrame.appendChild(sceneFrameRateOverlay.root);
     workbench.sceneFrame.appendChild(coordinateAxesOverlay.root);
     root.appendChild(localTestMenu);
     root.appendChild(toolbarOverflowMenu);
@@ -1114,6 +1277,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         applyLocalEditorTheme(workbench.root, activeTheme);
         applyLocalEditorTheme(spatialOverlay.root, activeTheme);
         applyLocalEditorTheme(measurementOverlay.root, activeTheme);
+        applyLocalEditorTheme(sceneFrameRateOverlay.root, activeTheme);
         applyLocalEditorTheme(shortcutHelpPanel, activeTheme);
         applyLocalEditorTheme(boxSelectionOverlay, activeTheme);
         applyLocalEditorTheme(localTestMenu, activeTheme);
@@ -1326,14 +1490,14 @@ export function createLocalEditorBrowserUi(options = {}) {
         actionGroup,
         viewportToolsGroup,
         sceneUtilityActions,
-        cameraPreviewGroup,
+        mainCameraPreviewGroup,
         editorStatusButton,
         toolbarOverflowButton,
     ];
     const toolbarOverflowItems = [
         { id: 'editor-status', element: editorStatusButton, kind: 'group' },
         { id: 'scene-utilities', element: sceneUtilityActions, kind: 'group' },
-        { id: 'camera-preview', element: cameraPreviewGroup, kind: 'group' },
+        { id: 'main-camera-preview', element: mainCameraPreviewGroup, kind: 'group' },
         { id: 'viewport-tools', element: viewportToolsGroup, kind: 'group' },
         { id: 'transform-actions', element: actionGroup, kind: 'group' },
         { id: 'placement', element: placementGroup, kind: 'group' },
@@ -1538,9 +1702,30 @@ export function createLocalEditorBrowserUi(options = {}) {
         const visible = currentState?.grid?.visible ?? true;
         callbacks.onGridVisibleChange?.(!visible);
     });
-    sceneCameraButton.addEventListener('click', () => {
-        const enabled = currentState?.sceneCameraPreview?.enabled ?? false;
-        callbacks.onSceneCameraPreviewToggle?.(!enabled);
+    mainCameraPreviewButton.addEventListener('click', () => {
+        const enabled = currentState?.mainCameraPreview?.enabled ?? false;
+        callbacks.onMainCameraPreviewToggle?.(!enabled);
+    });
+    const toggleCoordinateAxesProjection = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const axesState = currentState?.coordinateAxes ?? null;
+        if (!axesState || axesState.projectionToggleDisabled || currentState?.busy)
+            return;
+        const currentMode = axesState.projectionMode;
+        const nextMode = currentMode === 'orthographic' ? 'perspective' : 'orthographic';
+        callbacks.onViewportProjectionModeChange?.(nextMode);
+        if (event.type === 'click')
+            coordinateAxesOverlay.projectionIcon.blur();
+    };
+    coordinateAxesOverlay.projectionIcon.addEventListener('pointerdown', (event) => {
+        event.preventDefault();
+    });
+    coordinateAxesOverlay.projectionIcon.addEventListener('click', toggleCoordinateAxesProjection);
+    coordinateAxesOverlay.projectionIcon.addEventListener('keydown', (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        toggleCoordinateAxesProjection(event);
     });
     viewportToolsGroup.addEventListener('click', (event) => {
         const target = event.target instanceof HTMLElement ? event.target : null;
@@ -1666,10 +1851,10 @@ export function createLocalEditorBrowserUi(options = {}) {
             return;
         const currentOverlay = currentState?.viewportTools?.overlay;
         callbacks.onViewportOverlaySettingsChange?.({
-            bounds: currentOverlay?.bounds ?? true,
-            dimensions: currentOverlay?.dimensions ?? true,
+            bounds: currentOverlay?.bounds ?? false,
+            dimensions: currentOverlay?.dimensions ?? false,
             edgeLengths: currentOverlay?.edgeLengths ?? false,
-            anchor: currentOverlay?.anchor ?? true,
+            anchor: currentOverlay?.anchor ?? false,
             [key]: input.checked,
         });
     });
@@ -1696,6 +1881,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         inputRouter,
         contextMenu,
         getState: () => currentState,
+        contextActions: options.hierarchy?.contextActions,
         requestRender: () => {
             if (currentState)
                 render(currentState);
@@ -1725,7 +1911,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             return;
         if (readInspectorCommitMode(input) !== 'live')
             return;
-        const propertyInput = createInspectorPropertyInput(input, 'input');
+        const propertyInput = createInspectorPropertyInput(input, 'input', 'live');
         if (propertyInput)
             callbacks.onPropertyInput?.(propertyInput);
     });
@@ -1739,7 +1925,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             if (readInspectorCommitMode(input) !== 'change')
                 return;
         }
-        const propertyInput = createInspectorPropertyInput(input, readInspectorImmediateSource(input));
+        const propertyInput = createInspectorPropertyInput(input, readInspectorImmediateSource(input), 'final');
         if (propertyInput)
             callbacks.onPropertyInput?.(propertyInput);
     });
@@ -1747,11 +1933,27 @@ export function createLocalEditorBrowserUi(options = {}) {
         const input = event.target instanceof HTMLInputElement ? event.target : null;
         if (!input?.dataset.serializedPath || !input.dataset.serializedTargetId)
             return;
-        if (readInspectorCommitMode(input) !== 'blur')
+        if (hasPendingInspectorNumberValue(input, 'final')) {
+            if (currentState)
+                render(currentState);
             return;
-        const propertyInput = createInspectorPropertyInput(input, 'input');
+        }
+        const commitMode = readInspectorCommitMode(input);
+        if (commitMode === 'live' && hasPendingInspectorNumberValue(input, 'live')) {
+            const propertyInput = createInspectorPropertyInput(input, 'input', 'final');
+            if (propertyInput)
+                callbacks.onPropertyInput?.(propertyInput);
+            else if (currentState)
+                render(currentState);
+            return;
+        }
+        if (commitMode !== 'blur')
+            return;
+        const propertyInput = createInspectorPropertyInput(input, 'input', 'final');
         if (propertyInput)
             callbacks.onPropertyInput?.(propertyInput);
+        else if (currentState)
+            render(currentState);
     });
     const onKeyDown = (event) => {
         if (event.defaultPrevented)
@@ -1848,6 +2050,7 @@ export function createLocalEditorBrowserUi(options = {}) {
                     `[data-serialized-target-id="${cssEscape(active.dataset.serializedTargetId)}"]`,
                 ].join(''),
                 value: active.value,
+                preserveValue: hasPendingInspectorNumberValue(active),
             };
         }
         if (active.dataset.editorInspectorSearch != null) {
@@ -1865,6 +2068,8 @@ export function createLocalEditorBrowserUi(options = {}) {
         if (!input)
             return;
         input.focus({ preventScroll: true });
+        if (snapshot.value != null && snapshot.preserveValue)
+            input.value = snapshot.value;
         if (snapshot.value != null && input.value === snapshot.value) {
             const position = input.value.length;
             try {
@@ -1902,7 +2107,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             contextMenu.close();
         hostChrome.style.display = !inEditor && localTestActionsEnabled ? 'flex' : 'none';
         enterEditorButton.disabled = disabled;
-        for (const button of [saveButton, saveAndRunButton, discardRunButton, undoButton, redoButton, sceneHelpButton, sceneCameraButton, gridToggleButton]) {
+        for (const button of [saveButton, saveAndRunButton, discardRunButton, undoButton, redoButton, sceneHelpButton, mainCameraPreviewButton, gridToggleButton]) {
             button.style.display = 'inline-flex';
             button.disabled = disabled;
         }
@@ -1915,6 +2120,8 @@ export function createLocalEditorBrowserUi(options = {}) {
         inputRouter.setModalOpen(inEditor && helpOpen);
         const transformTool = state.transformTool ?? null;
         workbench.root.style.display = inEditor ? '' : 'none';
+        if (inEditor)
+            workbenchLayoutController.refresh();
         sceneToolOverlay.style.display = inEditor ? 'flex' : 'none';
         if (!inEditor)
             closeSnapSettingsPopover();
@@ -1924,18 +2131,21 @@ export function createLocalEditorBrowserUi(options = {}) {
             closeTransformActionPopover();
         if (!inEditor)
             closeOverlaySettingsPopover();
-        const sceneCameraPreview = state.sceneCameraPreview ?? { enabled: false, available: false };
-        cameraPreviewGroup.style.display = inEditor ? 'flex' : 'none';
-        sceneCameraButton.disabled = disabled || !sceneCameraPreview.available;
-        const sceneCameraTooltip = sceneCameraPreview.available
+        const mainCameraPreview = state.mainCameraPreview ?? { enabled: false, available: false };
+        mainCameraPreviewGroup.style.display = inEditor ? 'flex' : 'none';
+        mainCameraPreviewButton.disabled = disabled || !mainCameraPreview.available;
+        const mainCameraPreviewTooltip = mainCameraPreview.available
             ? '从 Main Camera 查看当前场景'
             : '当前场景没有可预览的 Main Camera';
-        setToolbarButtonTooltip(sceneCameraButton, sceneCameraTooltip);
-        LocalEditorShared.applyButtonActiveState(sceneCameraButton, sceneCameraPreview.enabled);
+        setToolbarButtonTooltip(mainCameraPreviewButton, mainCameraPreviewTooltip);
+        LocalEditorShared.applyButtonActiveState(mainCameraPreviewButton, mainCameraPreview.enabled);
         const viewportTools = state.viewportTools ?? null;
-        const viewportControlsDisabled = disabled || sceneCameraPreview.enabled;
-        const viewportControlsTooltip = sceneCameraPreview.enabled
-            ? '请先关闭 Scene Camera 预览，再使用视口工具'
+        const viewportControlsDisabled = disabled || mainCameraPreview.enabled;
+        const viewportControlsTooltip = mainCameraPreview.enabled
+            ? '当前为 Main Camera 预览，请关闭后再使用视口工具'
+            : '';
+        const viewportProjectionTooltip = mainCameraPreview.enabled
+            ? '当前为 Main Camera 预览，投影由 Main Camera 决定；关闭预览后可切换编辑视口投影'
             : '';
         viewportToolsGroup.style.display = inEditor ? 'flex' : 'none';
         for (const [preset, button] of viewportPresetButtons) {
@@ -1947,7 +2157,7 @@ export function createLocalEditorBrowserUi(options = {}) {
         const projectionMode = viewportTools?.projectionMode ?? 'perspective';
         const nextProjectionMode = projectionMode === 'orthographic' ? 'perspective' : 'orthographic';
         setToolbarButtonIcon(doc, projectionToggleButton, projectionMode === 'orthographic' ? 'projection-ortho' : 'projection-perspective');
-        setToolbarButtonTooltip(projectionToggleButton, viewportControlsTooltip || `投影模式：${VIEWPORT_PROJECTION_LABELS[projectionMode]}。切换为${VIEWPORT_PROJECTION_LABELS[nextProjectionMode]}`);
+        setToolbarButtonTooltip(projectionToggleButton, viewportProjectionTooltip || `投影模式：${VIEWPORT_PROJECTION_LABELS[projectionMode]}。切换为${VIEWPORT_PROJECTION_LABELS[nextProjectionMode]}`);
         LocalEditorShared.applyButtonActiveState(projectionToggleButton, projectionMode === 'orthographic');
         overlaySettingsButton.disabled = disabled;
         setToolbarButtonTooltip(overlaySettingsButton, '视口信息层设置');
@@ -2059,6 +2269,7 @@ export function createLocalEditorBrowserUi(options = {}) {
             ? 'var(--fps-editor-border)'
             : statusToneColor;
         renderCoordinateAxesOverlay(coordinateAxesOverlay, inEditor ? state.coordinateAxes ?? null : null);
+        renderSceneFrameRateOverlay(sceneFrameRateOverlay, inEditor ? state.sceneFrameStats ?? null : null);
         renderSpatialOverlay(spatialOverlay, inEditor ? state.viewportSpatialOverlay ?? null : null);
         renderMeasurementOverlay(measurementOverlay, inEditor ? state.viewportMeasurement ?? null : null);
         const boxSelection = state.boxSelection;
@@ -2088,6 +2299,9 @@ export function createLocalEditorBrowserUi(options = {}) {
         update(state) {
             render(state);
         },
+        updateSceneFrameStats(stats) {
+            renderSceneFrameRateOverlay(sceneFrameRateOverlay, currentState?.mode === 'editor' ? stats : null);
+        },
         setTheme(theme) {
             setActiveTheme(theme);
         },