@fps-games/editor 0.2.0-beta.4 → 0.2.1-beta.2

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

@@ -5,9 +5,11 @@ const DEFAULT_WORKBENCH_LAYOUT = {
     leftWidth: 300,
     rightWidth: 340,
     bottomHeight: 260,
+    consoleHeight: 220,
     leftCollapsed: false,
     rightCollapsed: false,
     bottomCollapsed: true,
+    consoleCollapsed: true,
 };
 const WORKBENCH_LAYOUT_LIMITS = {
     leftMin: 220,
@@ -16,6 +18,9 @@ const WORKBENCH_LAYOUT_LIMITS = {
     rightMax: 520,
     bottomMin: 160,
     bottomMax: 420,
+    consoleMin: 140,
+    consoleMax: 420,
+    consoleCollapsedHeight: 30,
     sceneMinWidth: 420,
     sceneMinHeight: 220,
 };
@@ -30,9 +35,9 @@ export const LOCAL_EDITOR_WORKBENCH_REGIONS = [
     { id: 'scene-header', label: 'Scene View Header' },
     { id: 'right-dock', label: 'Right Dock' },
     { id: 'bottom-dock', label: 'Bottom Dock' },
+    { id: 'bottom-console', label: 'Editor Console' },
 ];
 export const LOCAL_EDITOR_WORKBENCH_PANELS = [
-    { id: 'hierarchy', title: '层级', area: 'left', toolbar: 'scene-graph' },
     { id: 'inspector', title: '检查器', area: 'right' },
     { id: 'rendering', title: '渲染', area: 'right' },
     { id: 'markers', title: '标记', area: 'right' },
@@ -40,10 +45,16 @@ export const LOCAL_EDITOR_WORKBENCH_PANELS = [
     { id: 'assets', title: '资产', area: 'bottom', contextMenu: 'asset-browser' },
     { id: 'history', title: '历史', area: 'bottom' },
 ];
-export function createDefaultLocalEditorWorkbenchLayout() {
+export function createDefaultLocalEditorWorkbenchLayout(hierarchySurface) {
+    const hierarchyPanel = {
+        id: hierarchySurface.id,
+        title: hierarchySurface.title,
+        area: hierarchySurface.area,
+        toolbar: hierarchySurface.toolbar,
+    };
     return {
         regions: [...LOCAL_EDITOR_WORKBENCH_REGIONS],
-        panels: [...LOCAL_EDITOR_WORKBENCH_PANELS],
+        panels: [hierarchyPanel, ...LOCAL_EDITOR_WORKBENCH_PANELS],
         activeTabs: {
             left: 'hierarchy',
             right: 'inspector',
@@ -54,69 +65,35 @@ export function createDefaultLocalEditorWorkbenchLayout() {
 export function createLocalEditorWorkbench(doc) {
     const root = doc.createElement('div');
     root.dataset.editorWorkbench = 'true';
-    root.className = LOCAL_EDITOR_THEME_CLASS;
-    root.style.cssText = [
-        'position:fixed',
-        'top:0',
-        'left:0',
-        'right:0',
-        'bottom:0',
-        'z-index:2147483639',
-        'display:none',
-        'pointer-events:none',
-        'font-family:var(--fps-editor-font)',
-        'color:var(--fps-editor-text)',
-        'font-size:12px',
-    ].join(';');
+    root.className = `${LOCAL_EDITOR_THEME_CLASS} fps-editor-ui-workbench-root`;
+    root.style.display = 'none';
     const leftDock = createDock(doc, 'left');
     const rightDock = createDock(doc, 'right');
     const bottomDock = createDock(doc, 'bottom');
+    const consoleDock = createDock(doc, 'console');
     const leftResizer = createResizer(doc, 'left');
     const rightResizer = createResizer(doc, 'right');
     const bottomResizer = createResizer(doc, 'bottom');
+    const consoleResizer = createResizer(doc, 'console');
     const leftToggle = createDockToggle(doc, 'left', 'hierarchy');
     const rightToggle = createDockToggle(doc, 'right', 'inspector');
     const bottomToggle = createDockToggle(doc, 'bottom', 'asset');
     const sceneFrame = doc.createElement('div');
+    sceneFrame.className = 'fps-editor-ui-scene-frame';
     sceneFrame.dataset.editorWorkbenchRegion = 'scene-view';
-    sceneFrame.style.cssText = [
-        'position:absolute',
-        'top:0',
-        'left:300px',
-        'right:340px',
-        'bottom:260px',
-        'display:flex',
-        'flex-direction:column',
-        'min-width:0',
-        'min-height:0',
-        'border-left:1px solid var(--fps-editor-divider)',
-        'border-right:1px solid var(--fps-editor-divider)',
-        'border-bottom:1px solid var(--fps-editor-divider)',
-        'background:transparent',
-        'pointer-events:none',
-        'overflow:hidden',
-    ].join(';');
     const sceneHeader = doc.createElement('div');
+    sceneHeader.className = 'fps-editor-ui-scene-header';
     sceneHeader.dataset.editorWorkbenchRegion = 'scene-header';
-    sceneHeader.style.cssText = [
-        'height:38px',
-        'flex:0 0 38px',
-        'display:flex',
-        'align-items:center',
-        'justify-content:flex-start',
-        'border-bottom:1px solid var(--fps-editor-divider)',
-        'background:var(--fps-editor-chrome)',
-        'box-shadow:var(--fps-editor-shadow-inset-highlight)',
-        'pointer-events:none',
-    ].join(';');
     sceneFrame.appendChild(sceneHeader);
     root.appendChild(sceneFrame);
     root.appendChild(leftDock);
     root.appendChild(rightDock);
     root.appendChild(bottomDock);
+    root.appendChild(consoleDock);
     root.appendChild(leftResizer);
     root.appendChild(rightResizer);
     root.appendChild(bottomResizer);
+    root.appendChild(consoleResizer);
     root.appendChild(leftToggle);
     root.appendChild(rightToggle);
     root.appendChild(bottomToggle);
@@ -127,9 +104,11 @@ export function createLocalEditorWorkbench(doc) {
         sceneHeader,
         rightDock,
         bottomDock,
+        consoleDock,
         leftResizer,
         rightResizer,
         bottomResizer,
+        consoleResizer,
         leftToggle,
         rightToggle,
         bottomToggle,
@@ -137,105 +116,43 @@ export function createLocalEditorWorkbench(doc) {
 }
 function createDock(doc, area) {
     const dock = doc.createElement('div');
-    dock.dataset.editorWorkbenchRegion = area === 'left' ? 'left-dock' : area === 'right' ? 'right-dock' : 'bottom-dock';
-    const placement = area === 'left'
-        ? 'top:0;left:0;bottom:260px;width:300px'
+    dock.className = 'fps-editor-ui-workbench-dock';
+    dock.dataset.editorWorkbenchRegion = area === 'left'
+        ? 'left-dock'
         : area === 'right'
-            ? 'top:0;right:0;bottom:0;width:340px'
-            : 'left:0;right:340px;bottom:0;height:260px';
-    dock.style.cssText = [
-        'position:absolute',
-        placement,
-        'display:flex',
-        'flex-direction:column',
-        'min-width:0',
-        'min-height:0',
-        'border:1px solid var(--fps-editor-divider)',
-        'background:var(--fps-editor-panel)',
-        'pointer-events:auto',
-        'overflow:hidden',
-    ].join(';');
+            ? 'right-dock'
+            : area === 'bottom'
+                ? 'bottom-dock'
+                : 'bottom-console';
     return dock;
 }
 function createResizer(doc, area) {
     const resizer = doc.createElement('div');
+    resizer.className = 'fps-editor-ui-workbench-resizer';
     resizer.dataset.editorWorkbenchResizer = area;
-    resizer.title = area === 'bottom'
-        ? '拖拽调整底部面板高度，双击恢复默认'
+    resizer.title = area === 'bottom' || area === 'console'
+        ? `拖拽调整${area === 'console' ? '控制台' : '底部面板'}高度，双击恢复默认`
         : '拖拽调整面板宽度，双击恢复默认';
-    resizer.style.cssText = [
-        'position:absolute',
-        'z-index:4',
-        area === 'bottom' ? `height:${RESIZER_THICKNESS}px` : `width:${RESIZER_THICKNESS}px`,
-        area === 'bottom' ? 'cursor:row-resize' : 'cursor:col-resize',
-        'background:transparent',
-        'pointer-events:auto',
-        'touch-action:none',
-    ].join(';');
-    resizer.addEventListener('mouseenter', () => {
-        resizer.style.background = 'var(--fps-editor-accent-soft)';
-    });
-    resizer.addEventListener('mouseleave', () => {
-        resizer.style.background = 'transparent';
-    });
     return resizer;
 }
 function createDockToggle(doc, area, icon) {
     const button = doc.createElement('button');
+    button.className = 'fps-editor-ui-workbench-toggle';
     button.type = 'button';
     button.dataset.editorWorkbenchToggle = area;
-    button.style.cssText = [
-        'position:absolute',
-        'z-index:5',
-        'width:26px',
-        'height:26px',
-        'display:inline-flex',
-        'align-items:center',
-        'justify-content:center',
-        'padding:0',
-        'border:1px solid var(--fps-editor-border)',
-        'border-radius:3px',
-        'background:var(--fps-editor-button)',
-        'color:var(--fps-editor-text)',
-        'box-shadow:var(--fps-editor-shadow-panel)',
-        'cursor:pointer',
-        'pointer-events:auto',
-    ].join(';');
     button.appendChild(createLocalEditorIcon(doc, icon, { size: 14 }));
-    button.addEventListener('mouseenter', () => {
-        button.style.background = 'var(--fps-editor-button-hover)';
-    });
-    button.addEventListener('mouseleave', () => {
-        button.style.background = 'var(--fps-editor-button)';
-    });
     return button;
 }
 export function createWorkbenchPanelContent(doc) {
     const content = doc.createElement('div');
+    content.className = 'fps-editor-ui-panel-content';
     content.dataset.editorPanelContent = 'true';
-    content.style.cssText = [
-        'flex:1',
-        'min-height:0',
-        'overflow:auto',
-        'padding:8px',
-    ].join(';');
     return content;
 }
 export function createSceneHeaderToolbar(doc) {
     const toolbar = doc.createElement('div');
+    toolbar.className = 'fps-editor-ui-scene-toolbar';
     toolbar.dataset.editorWorkbenchRegion = 'scene-toolbar';
-    toolbar.style.cssText = [
-        'display:flex',
-        'align-items:center',
-        'gap:7px',
-        'width:100%',
-        'height:100%',
-        'max-width:100%',
-        'padding:5px 8px',
-        'background:transparent',
-        'pointer-events:auto',
-        'overflow:hidden',
-    ].join(';');
     return toolbar;
 }
 export function normalizeLocalEditorWorkbenchLayout(input, viewport) {
@@ -250,14 +167,17 @@ export function normalizeLocalEditorWorkbenchLayout(input, viewport) {
     const leftEdge = leftVisible
         ? clampNumber(userLayout.leftWidth, WORKBENCH_LAYOUT_LIMITS.leftMin, resolveLeftMax(viewport, rightEdge))
         : 0;
-    const bottomMax = Math.max(WORKBENCH_LAYOUT_LIMITS.bottomMin, Math.min(WORKBENCH_LAYOUT_LIMITS.bottomMax, Math.floor(viewport.height * 0.45), viewport.height - WORKBENCH_LAYOUT_LIMITS.sceneMinHeight));
+    const bottomMax = Math.max(WORKBENCH_LAYOUT_LIMITS.bottomMin, Math.min(WORKBENCH_LAYOUT_LIMITS.bottomMax, Math.floor(viewport.height * 0.45), viewport.height - WORKBENCH_LAYOUT_LIMITS.sceneMinHeight - resolveConsoleEdge(userLayout)));
+    const consoleMax = resolveConsoleMax(viewport, userLayout.bottomCollapsed ? 0 : userLayout.bottomHeight);
     return {
         leftWidth: leftVisible ? leftEdge : userLayout.leftWidth,
         rightWidth: rightVisible ? rightEdge : userLayout.rightWidth,
         bottomHeight: clampNumber(userLayout.bottomHeight, WORKBENCH_LAYOUT_LIMITS.bottomMin, bottomMax),
+        consoleHeight: clampNumber(userLayout.consoleHeight, WORKBENCH_LAYOUT_LIMITS.consoleMin, consoleMax),
         leftCollapsed: userLayout.leftCollapsed,
         rightCollapsed: userLayout.rightCollapsed,
         bottomCollapsed: userLayout.bottomCollapsed,
+        consoleCollapsed: userLayout.consoleCollapsed,
     };
 }
 export function normalizeLocalEditorWorkbenchUserLayout(input) {
@@ -269,9 +189,11 @@ export function normalizeLocalEditorWorkbenchUserLayout(input) {
         leftWidth: clampNumber(next.leftWidth, WORKBENCH_LAYOUT_LIMITS.leftMin, WORKBENCH_LAYOUT_LIMITS.leftMax),
         rightWidth: clampNumber(next.rightWidth, WORKBENCH_LAYOUT_LIMITS.rightMin, WORKBENCH_LAYOUT_LIMITS.rightMax),
         bottomHeight: clampNumber(next.bottomHeight, WORKBENCH_LAYOUT_LIMITS.bottomMin, WORKBENCH_LAYOUT_LIMITS.bottomMax),
+        consoleHeight: clampNumber(next.consoleHeight, WORKBENCH_LAYOUT_LIMITS.consoleMin, WORKBENCH_LAYOUT_LIMITS.consoleMax),
         leftCollapsed: next.leftCollapsed === true,
         rightCollapsed: next.rightCollapsed === true,
         bottomCollapsed: next.bottomCollapsed === true,
+        consoleCollapsed: next.consoleCollapsed === true,
     };
 }
 export function resolveLocalEditorWorkbenchVisibility(layout, viewport) {
@@ -305,8 +227,11 @@ export function resolveLocalEditorWorkbenchDockDisplay(layout, viewport, overlay
 export function createLocalEditorWorkbenchLayoutController(doc, elements, options = {}) {
     const win = doc.defaultView;
     let layout = normalizeLocalEditorWorkbenchUserLayout(readStoredWorkbenchLayout(doc));
+    let appliedLayout = { ...layout };
     let projectedVisibility = resolveLocalEditorWorkbenchVisibility(layout, readViewport(doc));
     let overlay = { leftOpen: false, rightOpen: false, bottomOpen: false };
+    let appliedProjectedVisibility = { ...projectedVisibility };
+    let appliedOverlay = { ...overlay };
     let drag = null;
     const persist = () => writeStoredWorkbenchLayout(doc, layout);
     const apply = (save = false) => {
@@ -320,9 +245,20 @@ export function createLocalEditorWorkbenchLayoutController(doc, elements, option
         if (!projectedVisibility.bottomAutoHidden && overlay.bottomOpen)
             overlay = { ...overlay, bottomOpen: false };
         const dockDisplay = resolveLocalEditorWorkbenchDockDisplay(projectedLayout, viewport, overlay);
+        try {
+            options.onBeforeApply?.(projectedLayout, dockDisplay);
+        }
+        catch (error) {
+            layout = { ...appliedLayout };
+            projectedVisibility = { ...appliedProjectedVisibility };
+            overlay = { ...appliedOverlay };
+            throw error;
+        }
         const leftEdge = projectedVisibility.leftVisible ? projectedLayout.leftWidth : 0;
         const rightEdge = projectedVisibility.rightVisible ? projectedLayout.rightWidth : 0;
+        const consoleEdge = resolveConsoleEdge(projectedLayout);
         const bottomEdge = projectedVisibility.bottomVisible ? projectedLayout.bottomHeight : 0;
+        const sceneBottomEdge = consoleEdge + bottomEdge;
         const leftDockWidth = dockDisplay.leftDockOverlay
             ? resolveOverlayPanelWidth(viewport, projectedLayout.leftWidth)
             : projectedLayout.leftWidth;
@@ -338,36 +274,48 @@ export function createLocalEditorWorkbenchLayoutController(doc, elements, option
         elements.root.dataset.editorLayoutLeftOverlay = String(dockDisplay.leftDockOverlay);
         elements.root.dataset.editorLayoutRightOverlay = String(dockDisplay.rightDockOverlay);
         elements.root.dataset.editorLayoutBottomOverlay = String(dockDisplay.bottomDockOverlay);
+        elements.root.dataset.editorLayoutConsoleCollapsed = String(projectedLayout.consoleCollapsed);
         elements.sceneFrame.style.left = `${leftEdge}px`;
         elements.sceneFrame.style.right = `${rightEdge}px`;
-        elements.sceneFrame.style.bottom = `${bottomEdge}px`;
+        elements.sceneFrame.style.bottom = `${sceneBottomEdge}px`;
         elements.leftDock.style.display = dockDisplay.leftDockVisible ? 'flex' : 'none';
         elements.leftDock.style.width = `${leftDockWidth}px`;
-        elements.leftDock.style.bottom = dockDisplay.leftDockOverlay ? '0' : `${bottomEdge}px`;
+        elements.leftDock.style.bottom = `${consoleEdge}px`;
         elements.leftDock.style.zIndex = dockDisplay.leftDockOverlay ? '6' : '';
         elements.leftDock.style.boxShadow = dockDisplay.leftDockOverlay ? 'var(--fps-editor-shadow-panel)' : '';
         elements.rightDock.style.display = dockDisplay.rightDockVisible ? 'flex' : 'none';
         elements.rightDock.style.width = `${rightDockWidth}px`;
+        elements.rightDock.style.bottom = `${consoleEdge}px`;
         elements.rightDock.style.zIndex = dockDisplay.rightDockOverlay ? '6' : '';
         elements.rightDock.style.boxShadow = dockDisplay.rightDockOverlay ? 'var(--fps-editor-shadow-panel)' : '';
         elements.bottomDock.style.display = dockDisplay.bottomDockVisible ? 'flex' : 'none';
-        elements.bottomDock.style.left = '0';
+        elements.bottomDock.style.left = dockDisplay.bottomDockOverlay ? '0' : `${leftEdge}px`;
         elements.bottomDock.style.right = dockDisplay.bottomDockOverlay ? '0' : `${rightEdge}px`;
+        elements.bottomDock.style.bottom = `${consoleEdge}px`;
         elements.bottomDock.style.height = `${bottomDockHeight}px`;
         elements.bottomDock.style.zIndex = dockDisplay.bottomDockOverlay ? '6' : '';
         elements.bottomDock.style.boxShadow = dockDisplay.bottomDockOverlay ? 'var(--fps-editor-shadow-panel)' : '';
+        elements.consoleDock.style.display = 'flex';
+        elements.consoleDock.style.left = '0';
+        elements.consoleDock.style.right = '0';
+        elements.consoleDock.style.bottom = '0';
+        elements.consoleDock.style.height = `${consoleEdge}px`;
         elements.leftResizer.style.display = projectedVisibility.leftVisible ? '' : 'none';
         elements.leftResizer.style.left = `${projectedLayout.leftWidth - Math.ceil(RESIZER_THICKNESS / 2)}px`;
         elements.leftResizer.style.top = '0';
-        elements.leftResizer.style.bottom = `${bottomEdge}px`;
+        elements.leftResizer.style.bottom = `${consoleEdge}px`;
         elements.rightResizer.style.display = projectedVisibility.rightVisible ? '' : 'none';
         elements.rightResizer.style.right = `${projectedLayout.rightWidth - Math.ceil(RESIZER_THICKNESS / 2)}px`;
         elements.rightResizer.style.top = '0';
-        elements.rightResizer.style.bottom = '0';
+        elements.rightResizer.style.bottom = `${consoleEdge}px`;
         elements.bottomResizer.style.display = projectedVisibility.bottomVisible ? '' : 'none';
-        elements.bottomResizer.style.left = '0';
+        elements.bottomResizer.style.left = dockDisplay.bottomDockOverlay ? '0' : `${leftEdge}px`;
         elements.bottomResizer.style.right = `${rightEdge}px`;
-        elements.bottomResizer.style.bottom = `${projectedLayout.bottomHeight - Math.ceil(RESIZER_THICKNESS / 2)}px`;
+        elements.bottomResizer.style.bottom = `${consoleEdge + projectedLayout.bottomHeight - Math.ceil(RESIZER_THICKNESS / 2)}px`;
+        elements.consoleResizer.style.display = projectedLayout.consoleCollapsed ? 'none' : '';
+        elements.consoleResizer.style.left = '0';
+        elements.consoleResizer.style.right = '0';
+        elements.consoleResizer.style.bottom = `${consoleEdge - Math.ceil(RESIZER_THICKNESS / 2)}px`;
         elements.leftToggle.style.left = dockDisplay.leftDockVisible ? `${Math.max(6, leftDockWidth - 13)}px` : '6px';
         elements.leftToggle.style.top = '43px';
         elements.leftToggle.disabled = false;
@@ -384,7 +332,9 @@ export function createLocalEditorWorkbenchLayoutController(doc, elements, option
         elements.rightToggle.setAttribute('aria-label', elements.rightToggle.title);
         elements.bottomToggle.style.left = '50%';
         elements.bottomToggle.style.transform = 'translateX(-50%)';
-        elements.bottomToggle.style.bottom = dockDisplay.bottomDockVisible ? `${Math.max(6, bottomDockHeight - 13)}px` : '6px';
+        elements.bottomToggle.style.bottom = dockDisplay.bottomDockVisible
+            ? `${consoleEdge + Math.max(6, bottomDockHeight - 13)}px`
+            : `${consoleEdge + 6}px`;
         elements.bottomToggle.disabled = false;
         elements.bottomToggle.style.opacity = '';
         elements.bottomToggle.style.cursor = 'pointer';
@@ -392,7 +342,10 @@ export function createLocalEditorWorkbenchLayoutController(doc, elements, option
         elements.bottomToggle.setAttribute('aria-label', elements.bottomToggle.title);
         if (save)
             persist();
-        options.onAfterApply?.(projectedLayout);
+        appliedLayout = { ...layout };
+        appliedProjectedVisibility = { ...projectedVisibility };
+        appliedOverlay = { ...overlay };
+        options.onAfterApply?.(projectedLayout, dockDisplay);
     };
     const onPointerMove = (event) => {
         if (!drag)
@@ -410,11 +363,18 @@ export function createLocalEditorWorkbenchLayoutController(doc, elements, option
                 rightWidth: clampNumber(viewport.width - event.clientX, WORKBENCH_LAYOUT_LIMITS.rightMin, resolveRightMax(viewport, projectedVisibility.leftVisible)),
             };
         }
+        else if (drag.area === 'bottom') {
+            const bottomMax = Math.max(WORKBENCH_LAYOUT_LIMITS.bottomMin, Math.min(WORKBENCH_LAYOUT_LIMITS.bottomMax, Math.floor(viewport.height * 0.45), viewport.height - WORKBENCH_LAYOUT_LIMITS.sceneMinHeight - resolveConsoleEdge(layout)));
+            layout = {
+                ...layout,
+                bottomHeight: clampNumber(viewport.height - event.clientY - resolveConsoleEdge(layout), WORKBENCH_LAYOUT_LIMITS.bottomMin, bottomMax),
+            };
+        }
         else {
-            const bottomMax = Math.max(WORKBENCH_LAYOUT_LIMITS.bottomMin, Math.min(WORKBENCH_LAYOUT_LIMITS.bottomMax, Math.floor(viewport.height * 0.45), viewport.height - WORKBENCH_LAYOUT_LIMITS.sceneMinHeight));
+            const bottomHeight = projectedVisibility.bottomVisible ? layout.bottomHeight : 0;
             layout = {
                 ...layout,
-                bottomHeight: clampNumber(viewport.height - event.clientY, WORKBENCH_LAYOUT_LIMITS.bottomMin, bottomMax),
+                consoleHeight: clampNumber(viewport.height - event.clientY, WORKBENCH_LAYOUT_LIMITS.consoleMin, resolveConsoleMax(viewport, bottomHeight)),
             };
         }
         apply();
@@ -434,7 +394,7 @@ export function createLocalEditorWorkbenchLayoutController(doc, elements, option
             return;
         event.preventDefault();
         drag = { area };
-        doc.body.style.cursor = area === 'bottom' ? 'row-resize' : 'col-resize';
+        doc.body.style.cursor = area === 'bottom' || area === 'console' ? 'row-resize' : 'col-resize';
         doc.body.style.userSelect = 'none';
         win?.addEventListener('pointermove', onPointerMove);
         win?.addEventListener('pointerup', onPointerUp);
@@ -442,6 +402,7 @@ export function createLocalEditorWorkbenchLayoutController(doc, elements, option
     const onLeftPointerDown = (event) => beginDrag('left', event);
     const onRightPointerDown = (event) => beginDrag('right', event);
     const onBottomPointerDown = (event) => beginDrag('bottom', event);
+    const onConsolePointerDown = (event) => beginDrag('console', event);
     const onLeftDoubleClick = () => {
         layout = { ...layout, leftWidth: DEFAULT_WORKBENCH_LAYOUT.leftWidth };
         apply(true);
@@ -454,6 +415,10 @@ export function createLocalEditorWorkbenchLayoutController(doc, elements, option
         layout = { ...layout, bottomHeight: DEFAULT_WORKBENCH_LAYOUT.bottomHeight };
         apply(true);
     };
+    const onConsoleDoubleClick = () => {
+        layout = { ...layout, consoleHeight: DEFAULT_WORKBENCH_LAYOUT.consoleHeight };
+        apply(true);
+    };
     const onLeftToggle = () => {
         if (projectedVisibility.leftAutoHidden) {
             overlay = { ...overlay, leftOpen: !overlay.leftOpen };
@@ -485,9 +450,11 @@ export function createLocalEditorWorkbenchLayoutController(doc, elements, option
     elements.leftResizer.addEventListener('pointerdown', onLeftPointerDown);
     elements.rightResizer.addEventListener('pointerdown', onRightPointerDown);
     elements.bottomResizer.addEventListener('pointerdown', onBottomPointerDown);
+    elements.consoleResizer.addEventListener('pointerdown', onConsolePointerDown);
     elements.leftResizer.addEventListener('dblclick', onLeftDoubleClick);
     elements.rightResizer.addEventListener('dblclick', onRightDoubleClick);
     elements.bottomResizer.addEventListener('dblclick', onBottomDoubleClick);
+    elements.consoleResizer.addEventListener('dblclick', onConsoleDoubleClick);
     elements.leftToggle.addEventListener('click', onLeftToggle);
     elements.rightToggle.addEventListener('click', onRightToggle);
     elements.bottomToggle.addEventListener('click', onBottomToggle);
@@ -510,6 +477,12 @@ export function createLocalEditorWorkbenchLayoutController(doc, elements, option
             layout = { ...layout, bottomCollapsed: collapsed };
             apply(save);
         },
+        setConsoleCollapsed(collapsed, save = false) {
+            if (layout.consoleCollapsed === collapsed)
+                return;
+            layout = { ...layout, consoleCollapsed: collapsed };
+            apply(save);
+        },
         reset() {
             layout = { ...DEFAULT_WORKBENCH_LAYOUT };
             apply(true);
@@ -519,9 +492,11 @@ export function createLocalEditorWorkbenchLayoutController(doc, elements, option
             elements.leftResizer.removeEventListener('pointerdown', onLeftPointerDown);
             elements.rightResizer.removeEventListener('pointerdown', onRightPointerDown);
             elements.bottomResizer.removeEventListener('pointerdown', onBottomPointerDown);
+            elements.consoleResizer.removeEventListener('pointerdown', onConsolePointerDown);
             elements.leftResizer.removeEventListener('dblclick', onLeftDoubleClick);
             elements.rightResizer.removeEventListener('dblclick', onRightDoubleClick);
             elements.bottomResizer.removeEventListener('dblclick', onBottomDoubleClick);
+            elements.consoleResizer.removeEventListener('dblclick', onConsoleDoubleClick);
             elements.leftToggle.removeEventListener('click', onLeftToggle);
             elements.rightToggle.removeEventListener('click', onRightToggle);
             elements.bottomToggle.removeEventListener('click', onBottomToggle);
@@ -540,7 +515,18 @@ function resolveOverlayPanelWidth(viewport, preferredWidth) {
     return Math.min(preferredWidth, Math.max(260, viewport.width - 24));
 }
 function resolveOverlayPanelHeight(viewport, preferredHeight) {
-    return Math.min(preferredHeight, Math.max(WORKBENCH_LAYOUT_LIMITS.bottomMin, viewport.height - 64));
+    return Math.min(preferredHeight, Math.max(WORKBENCH_LAYOUT_LIMITS.bottomMin, viewport.height - WORKBENCH_LAYOUT_LIMITS.consoleCollapsedHeight - 64));
+}
+export function resolveLocalEditorConsoleEdge(layout) {
+    return resolveConsoleEdge(layout);
+}
+function resolveConsoleEdge(layout) {
+    return layout.consoleCollapsed
+        ? WORKBENCH_LAYOUT_LIMITS.consoleCollapsedHeight
+        : layout.consoleHeight;
+}
+function resolveConsoleMax(viewport, bottomHeight) {
+    return Math.max(WORKBENCH_LAYOUT_LIMITS.consoleMin, Math.min(WORKBENCH_LAYOUT_LIMITS.consoleMax, Math.floor(viewport.height * 0.45), viewport.height - WORKBENCH_LAYOUT_LIMITS.sceneMinHeight - bottomHeight));
 }
 function resolveLeftMax(viewport, rightWidth) {
     return Math.max(WORKBENCH_LAYOUT_LIMITS.leftMin, Math.min(WORKBENCH_LAYOUT_LIMITS.leftMax, viewport.width - rightWidth - WORKBENCH_LAYOUT_LIMITS.sceneMinWidth));