@codingame/monaco-vscode-workbench-service-override 37.6.0 → 38.0.0

package/vscode/src/vs/sessions/browser/parts/sessionGridLayout.js

@@ -0,0 +1,598 @@
+
+import { $, runAtThisOrScheduleAtNextAnimationFrame, getWindow, getActiveElement, isHTMLElement, isAncestor } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { SerializableGrid, Sizing, Direction, isGridBranchNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/grid/grid';
+import { Orientation } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/sash/sash';
+import { Emitter, Event } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
+import { Disposable, MutableDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { isSessionGridLeafData, projectSessionGrid } from '../../services/sessions/browser/sessionGridState.js';
+import { Color } from '@codingame/monaco-vscode-api/vscode/vs/base/common/color';
+import { NO_GRID_EDGE_INSETS, updateGridGapSashes, getGridEdgeInsets } from './gridGap.js';
+
+class SessionGridLeaf extends Disposable {
+    constructor(id, view, requestLayout) {
+        super();
+        this.id = id;
+        this.view = view;
+        this.requestLayout = requestLayout;
+        this.element = $(".session-grid-leaf");
+        this.insets = NO_GRID_EDGE_INSETS;
+        this._onDidChangeConstraints = this._register(( new Emitter()));
+        this.projected = false;
+        this.active = false;
+        this.visible = true;
+        this.contentsDirty = false;
+        this.onDidChange = Event.any(Event.map(view.onDidChange, size => size && ({
+            width: size.width + this.insets.left + this.insets.right,
+            height: size.height + this.insets.top + this.insets.bottom
+        })), this._onDidChangeConstraints.event);
+        this.element.appendChild(view.element);
+    }
+    get minimumWidth() {
+        return this.view.minimumWidth + this.insets.left + this.insets.right;
+    }
+    get maximumWidth() {
+        return this.view.maximumWidth + this.insets.left + this.insets.right;
+    }
+    get minimumHeight() {
+        return this.view.minimumHeight + this.insets.top + this.insets.bottom;
+    }
+    get maximumHeight() {
+        return this.view.maximumHeight + this.insets.top + this.insets.bottom;
+    }
+    get preferredWidth() {
+        return this.view.preferredWidth === undefined ? undefined : this.view.preferredWidth + this.insets.left + this.insets.right;
+    }
+    get preferredHeight() {
+        return this.view.preferredHeight === undefined ? undefined : this.view.preferredHeight + this.insets.top + this.insets.bottom;
+    }
+    setInsets(insets) {
+        if (this.insets.top === insets.top && this.insets.right === insets.right && this.insets.bottom === insets.bottom && this.insets.left === insets.left) {
+            return false;
+        }
+        this.insets = insets;
+        return true;
+    }
+    notifyConstraintsChanged() {
+        this._onDidChangeConstraints.fire(undefined);
+    }
+    layout(width, height, top, left) {
+        this.lastLayout = {
+            width,
+            height,
+            top,
+            left
+        };
+        if (!this.projected) {
+            this.requestLayout(this);
+        }
+    }
+    setVisible(visible) {
+        this.visible = visible;
+        if (!this.projected) {
+            this.requestLayout(this);
+        }
+    }
+    project(host, active) {
+        const changed = this.projected !== !!host || this.active !== active;
+        this.projected = !!host;
+        this.active = active;
+        const parent = host && active ? host : this.element;
+        if (this.view.element.parentElement !== parent) {
+            parent.appendChild(this.view.element);
+        }
+        if (changed) {
+            this.requestLayout(this);
+        }
+    }
+    layoutProjected(dimensions) {
+        this.projectedLayout = dimensions;
+        this.requestLayout(this);
+    }
+    applyGeometry(gap) {
+        const dimensions = this.projected ? this.projectedLayout : this.lastLayout;
+        if (!(this.projected ? this.active : this.visible) || !dimensions) {
+            return;
+        }
+        const insets = this.insets;
+        const layout = {
+            width: Math.max(0, dimensions.width - insets.left - insets.right),
+            height: Math.max(0, dimensions.height - insets.top - insets.bottom),
+            top: dimensions.top + insets.top,
+            left: dimensions.left + insets.left
+        };
+        const previous = this.appliedLayout;
+        const previousInsets = this.appliedInsets;
+        const geometryChanged = !(previous?.width === layout.width && previous.height === layout.height && previous.top === layout.top && previous.left === layout.left && previousInsets?.top === insets.top && previousInsets.right === insets.right && previousInsets.bottom === insets.bottom && previousInsets.left === insets.left);
+        if (!geometryChanged && this.appliedGap === gap) {
+            return;
+        }
+        this.appliedGap = gap;
+        this.contentsDirty = true;
+        if (!geometryChanged) {
+            return;
+        }
+        this.appliedLayout = layout;
+        this.appliedInsets = insets;
+        this.element.style.borderTopWidth = `${insets.top}px`;
+        this.element.style.borderRightWidth = `${insets.right}px`;
+        this.element.style.borderBottomWidth = `${insets.bottom}px`;
+        this.element.style.borderLeftWidth = `${insets.left}px`;
+        this.view.layoutContainer(layout.width, layout.height, layout.top, layout.left);
+    }
+    applyContents(isCurrent) {
+        const visible = this.projected ? this.active : this.visible;
+        const visibilityChanged = this.appliedVisible !== visible;
+        const layout = this.contentsDirty || visibilityChanged;
+        this.contentsDirty = false;
+        this.appliedVisible = visible;
+        if (visibilityChanged) {
+            this.view.setVisible?.(visible);
+        }
+        if (visible && this.appliedLayout && layout && isCurrent()) {
+            this.view.layoutContents(this.appliedGap);
+        }
+    }
+    toJSON() {
+        return {
+            id: this.id
+        };
+    }
+}
+class SessionGridLayout extends Disposable {
+    constructor(
+        scheduleLayout = callback => runAtThisOrScheduleAtNextAnimationFrame(getWindow(this.element), callback)
+    ) {
+        super();
+        this.scheduleLayout = scheduleLayout;
+        this.element = $(".session-grid");
+        this.projectionHost = $(".session-grid-projection");
+        this.grid = this._register(( new MutableDisposable()));
+        this.gridLaidOut = false;
+        this.leaves = ( new Map());
+        this.placements = ( new Map());
+        this._onDidChangeMaximized = this._register(( new Emitter()));
+        this.onDidChangeMaximized = this._onDidChangeMaximized.event;
+        this.phone = false;
+        this.styles = {
+            separatorBorder: Color.transparent
+        };
+        this.gap = 0;
+        this.updatingLayout = false;
+        this.flushingLayout = false;
+        this.pendingLayouts = ( new Set());
+        this.layoutFrame = this._register(( new MutableDisposable()));
+        this.element.appendChild(this.projectionHost);
+        this.projectionHost.style.display = "none";
+    }
+    reconcile(entries, active) {
+        if (!entries.length) {
+            throw ( new Error("A Sessions grid must have at least one leaf"));
+        }
+        this.preserveFocus(() => {
+            const order = this.order;
+            const structureChanged = order.length !== entries.length || ( entries.some(
+                (entry, index) => entry.id !== order[index] || (entry.placement && entry.placement !== this.placements.get(entry.id))
+            ));
+            if (structureChanged || (this.active !== active && this.maximized !== active)) {
+                this.setMaximized(undefined);
+            }
+            const desired = ( new Set(entries.map(entry => entry.id)));
+            for (const entry of entries) {
+                if (!( this.leaves.has(entry.id))) {
+                    const leaf = ( new SessionGridLeaf(entry.id, entry.view, leaf => this.requestLayout(leaf)));
+                    this.leaves.set(entry.id, leaf);
+                    leaf.project(this.phone ? this.projectionHost : undefined, entry.id === active);
+                    if (!this.grid.value) {
+                        this.setGrid(( new SerializableGrid(leaf)));
+                    } else {
+                        const reference = entry.placement && this.leaves.get(entry.placement.reference);
+                        this.grid.value.addView(
+                            leaf,
+                            Sizing.Split,
+                            reference ?? this.orderedLeaves().at(-1),
+                            entry.placement?.direction ?? Direction.Right
+                        );
+                    }
+                    this.placements.set(entry.id, entry.placement && ( this.leaves.has(entry.placement.reference)) ? entry.placement : undefined);
+                }
+            }
+            for (const [id, leaf] of this.leaves) {
+                if (!( desired.has(id))) {
+                    this.leaves.delete(id);
+                    this.pendingLayouts.delete(leaf);
+                    leaf.project(undefined, false);
+                    this.grid.value.removeView(leaf);
+                    leaf.dispose();
+                    this.placements.delete(id);
+                }
+            }
+            for (const entry of entries) {
+                if (entry.placement && this.placements.get(entry.id) !== entry.placement) {
+                    const reference = this.leaves.get(entry.placement.reference);
+                    if (reference && reference.id !== entry.id) {
+                        this.grid.value.moveView(
+                            this.leaves.get(entry.id),
+                            Sizing.Split,
+                            reference,
+                            entry.placement.direction
+                        );
+                    }
+                }
+                this.placements.set(entry.id, entry.placement);
+            }
+            for (let i = 0; i < entries.length; i++) {
+                const current = this.orderedLeaves()[i];
+                if (current.id !== entries[i].id) {
+                    this.grid.value.swapViews(current, this.leaves.get(entries[i].id));
+                }
+            }
+            this.active = active;
+            this.layoutViews();
+        });
+    }
+    orderedLeaves() {
+        const collect = node => isGridBranchNode(node) ? node.children.flatMap(collect) : [node.view];
+        return this.grid.value ? collect(this.grid.value.getViews()) : [];
+    }
+    get order() {
+        return this.orderedLeaves().map(leaf => leaf.id);
+    }
+    get maximized() {
+        return this.maximizedId;
+    }
+    toggleMaximized(id) {
+        const leaf = this.leaves.get(id);
+        if (!leaf || this.leaves.size < 2 || this.phone) {
+            return undefined;
+        }
+        this.setMaximized(this.maximized === id ? undefined : id);
+        return this.maximized === id;
+    }
+    setMaximized(id) {
+        if (this.maximizedId !== id) {
+            this.preserveFocus(() => {
+                this.maximizedId = id;
+                this.layoutViews();
+            });
+            this._onDidChangeMaximized.fire();
+        }
+    }
+    neighbor(id, direction) {
+        const leaf = this.leaves.get(id);
+        if (!leaf || !this.dimensions || this.phone) {
+            return undefined;
+        }
+        return this.grid.value.getNeighborViews(leaf, direction, false)[0]?.id;
+    }
+    placement(id) {
+        const edgeLeaf = (node, last) => isGridBranchNode(node) ? edgeLeaf(last ? node.children[node.children.length - 1] : node.children[0], last) : node.view;
+        const find = (node, orientation) => {
+            if (!isGridBranchNode(node)) {
+                return undefined;
+            }
+            const index = node.children.findIndex(child => !isGridBranchNode(child) && child.view.id === id);
+            if (index >= 0 && node.children.length > 1) {
+                const previous = index > 0;
+                const sibling = node.children[previous ? index - 1 : index + 1];
+                return {
+                    reference: edgeLeaf(sibling, previous).id,
+                    direction: orientation === Orientation.HORIZONTAL ? previous ? Direction.Right : Direction.Left : previous ? Direction.Down : Direction.Up
+                };
+            }
+            for (const child of node.children) {
+                const result = find(
+                    child,
+                    orientation === Orientation.HORIZONTAL ? Orientation.VERTICAL : Orientation.HORIZONTAL
+                );
+                if (result) {
+                    return result;
+                }
+            }
+            return undefined;
+        };
+        return this.grid.value && find(this.grid.value.getViews(), this.grid.value.orientation);
+    }
+    resize(id, width, height) {
+        const leaf = this.leaves.get(id);
+        if (leaf && !this.phone) {
+            this.preserveFocus(() => {
+                this.setMaximized(undefined);
+                this.grid.value.resizeView(leaf, {
+                    width,
+                    height
+                });
+            });
+        }
+    }
+    getSize(id) {
+        const leaf = this.leaves.get(id);
+        return leaf && this.grid.value.getViewSize(leaf);
+    }
+    expand(id) {
+        const leaf = this.leaves.get(id);
+        const size = leaf && this.grid.value.getViewSize(leaf);
+        if (leaf && size && !this.phone && !this.maximized && !this.updatingLayout && size.width === leaf.minimumWidth) {
+            this.preserveFocus(() => this.grid.value.expandView(leaf));
+        }
+    }
+    arrange() {
+        const leaves = this.orderedLeaves();
+        if (!leaves.length) {
+            return;
+        }
+        const columns = Math.ceil(Math.sqrt(leaves.length));
+        const rows = Math.ceil(leaves.length / columns);
+        this.preserveFocus(() => {
+            this.setMaximized(undefined);
+            this.setGrid(SerializableGrid.from({
+                orientation: Orientation.VERTICAL,
+                groups: Array.from({
+                    length: rows
+                }, (_, row) => {
+                    const items = leaves.slice(row * columns, (row + 1) * columns);
+                    return items.length === 1 ? {
+                        data: items[0],
+                        size: 1
+                    } : {
+                        groups: items.map(data => ({
+                            data,
+                            size: 1
+                        })),
+                        size: 1
+                    };
+                })
+            }));
+        });
+    }
+    serialize() {
+        const state = this.grid.value?.serialize();
+        if (state && this.maximized) {
+            const mark = node => {
+                if (node.type === "branch") {
+                    node.data.forEach(mark);
+                } else if (isSessionGridLeafData(node.data) && node.data.id === this.maximized) {
+                    node.maximized = true;
+                }
+            };
+            mark(state.root);
+        }
+        return state;
+    }
+    restore(state) {
+        const projected = projectSessionGrid(state, id => ( this.leaves.has(id)) ? id : undefined);
+        if (!projected) {
+            return;
+        }
+        if (this.phone || !this.dimensions) {
+            this.dimensions = {
+                width: Math.max(1, state.width),
+                height: Math.max(1, state.height),
+                top: 0,
+                left: 0
+            };
+        }
+        let maximized;
+        const unmaximize = node => {
+            if (node.type === "branch") {
+                node.data.forEach(unmaximize);
+            } else if (node.maximized) {
+                if (isSessionGridLeafData(node.data)) {
+                    maximized = node.data.id;
+                }
+                delete node.maximized;
+            }
+        };
+        unmaximize(projected.root);
+        this.preserveFocus(() => {
+            this.setMaximized(undefined);
+            this.setGrid(SerializableGrid.deserialize(projected, {
+                fromJSON: data => this.leaves.get(data.id)
+            }));
+            this.setMaximized(maximized);
+        });
+    }
+    setGrid(grid) {
+        const previous = this.grid.value;
+        previous?.element.remove();
+        this.grid.value = grid;
+        this.gridLaidOut = false;
+        this.applyStyles();
+        this.element.prepend(grid.element);
+        this.layoutViews();
+    }
+    layout(width, height, top, left, phone, gap = 0) {
+        this.preserveFocus(() => {
+            this.phone = phone;
+            this.gap = phone ? 0 : Math.max(0, gap);
+            this.applyStyles();
+            this.phoneDimensions = phone ? {
+                width,
+                height,
+                top,
+                left
+            } : undefined;
+            const initialLayout = !this.dimensions;
+            if (!phone || initialLayout) {
+                this.dimensions = {
+                    width: phone ? Math.max(1000, this.grid.value?.width ?? 0) : width,
+                    height: phone ? Math.max(800, this.grid.value?.height ?? 0) : height,
+                    top,
+                    left
+                };
+            }
+            this.layoutViews();
+        });
+    }
+    get projectedId() {
+        return this.phone ? this.active : this.maximized;
+    }
+    layoutViews() {
+        const projectedId = this.projectedId;
+        const host = projectedId === undefined ? undefined : this.projectionHost;
+        const hasGaps = this.gap > 0 && this.leaves.size > 1 && projectedId === undefined;
+        this.element.classList.toggle("session-grid-has-gaps", hasGaps);
+        if (this.grid.value) {
+            updateGridGapSashes(this.grid.value, hasGaps);
+        }
+        let bottomLeftId = projectedId;
+        let bottomRightId = projectedId;
+        if (projectedId === undefined && this.grid.value) {
+            const cornerLeaf = (node, orientation, right) => {
+                if (!isGridBranchNode(node)) {
+                    return node.view.id;
+                }
+                const index = orientation === Orientation.VERTICAL || right ? node.children.length - 1 : 0;
+                return cornerLeaf(
+                    node.children[index],
+                    orientation === Orientation.HORIZONTAL ? Orientation.VERTICAL : Orientation.HORIZONTAL,
+                    right
+                );
+            };
+            const root = this.grid.value.getViews();
+            bottomLeftId = cornerLeaf(root, this.grid.value.orientation, false);
+            bottomRightId = cornerLeaf(root, this.grid.value.orientation, true);
+        }
+        if (this.grid.value) {
+            this.grid.value.element.style.display = host ? "none" : "";
+        }
+        this.projectionHost.style.display = host ? "" : "none";
+        if (hasGaps && this.dimensions && this.grid.value && !this.gridLaidOut) {
+            const {
+                width,
+                height,
+                top,
+                left
+            } = this.dimensions;
+            this.grid.value.layout(width, height, top, left);
+            this.gridLaidOut = true;
+        }
+        const constraintChanges = [];
+        for (const leaf of ( this.leaves.values())) {
+            if (leaf.setInsets(hasGaps ? this.getInsets(leaf) : NO_GRID_EDGE_INSETS)) {
+                constraintChanges.push(leaf);
+            }
+            leaf.project(host, leaf.id === projectedId);
+            leaf.view.element.classList.toggle("session-grid-bottom-left", leaf.id === bottomLeftId);
+            leaf.view.element.classList.toggle("session-grid-bottom-right", leaf.id === bottomRightId);
+            this.requestLayout(leaf);
+        }
+        for (const leaf of constraintChanges) {
+            leaf.notifyConstraintsChanged();
+        }
+        if (this.dimensions) {
+            const {
+                width,
+                height,
+                top,
+                left
+            } = this.dimensions;
+            this.grid.value?.layout(width, height, top, left);
+            this.gridLaidOut = true;
+        }
+        const projected = projectedId && this.leaves.get(projectedId);
+        const dimensions = this.phone ? this.phoneDimensions : this.dimensions;
+        if (projected && dimensions) {
+            const {
+                width,
+                height,
+                top,
+                left
+            } = dimensions;
+            this.projectionHost.style.width = `${width}px`;
+            this.projectionHost.style.height = `${height}px`;
+            projected.layoutProjected({
+                width,
+                height,
+                top,
+                left
+            });
+        }
+    }
+    getInsets(leaf) {
+        const grid = this.grid.value;
+        if (!grid || this.leaves.size < 2) {
+            return NO_GRID_EDGE_INSETS;
+        }
+        return getGridEdgeInsets(grid, leaf, this.gap);
+    }
+    requestLayout(leaf) {
+        if (this._store.isDisposed || this.leaves.get(leaf.id) !== leaf) {
+            return;
+        }
+        this.pendingLayouts.add(leaf);
+        if (!this.updatingLayout && !this.flushingLayout && !this.layoutFrame.value) {
+            this.layoutFrame.value = this.scheduleLayout(() => this.flushLayouts());
+        }
+    }
+    flushLayouts() {
+        if (this.flushingLayout) {
+            return;
+        }
+        this.layoutFrame.clear();
+        this.flushingLayout = true;
+        try {
+            while (this.pendingLayouts.size > 0) {
+                const leaves = [...this.pendingLayouts];
+                this.pendingLayouts.clear();
+                for (const leaf of leaves) {
+                    if (this.leaves.get(leaf.id) === leaf) {
+                        leaf.applyGeometry(this.gap);
+                    }
+                }
+                for (const leaf of leaves) {
+                    if (this.leaves.get(leaf.id) !== leaf) {
+                        continue;
+                    }
+                    if (this.pendingLayouts.size > 0) {
+                        this.pendingLayouts.add(leaf);
+                    } else {
+                        leaf.applyContents(() => this.leaves.get(leaf.id) === leaf);
+                    }
+                }
+            }
+        } finally {
+            this.flushingLayout = false;
+        }
+    }
+    style(styles) {
+        this.styles = styles;
+        this.applyStyles();
+    }
+    applyStyles() {
+        this.grid.value?.style({
+            ...this.styles,
+            separatorBorder: this.gap > 0 ? Color.transparent : this.styles.separatorBorder
+        });
+    }
+    preserveFocus(fn) {
+        const focused = getActiveElement();
+        const owned = isHTMLElement(focused) && isAncestor(focused, this.element);
+        const updatingLayout = this.updatingLayout;
+        this.updatingLayout = true;
+        try {
+            fn();
+            if (!updatingLayout) {
+                this.flushLayouts();
+            }
+            if (owned && focused.isConnected && (this.projectedId === undefined || isAncestor(focused, this.projectionHost)) && getActiveElement() !== focused) {
+                focused.focus();
+            }
+        } finally {
+            this.updatingLayout = updatingLayout;
+        }
+    }
+    dispose() {
+        this.layoutFrame.clear();
+        this.pendingLayouts.clear();
+        for (const leaf of ( this.leaves.values())) {
+            leaf.view.element.remove();
+            leaf.dispose();
+        }
+        this.leaves.clear();
+        this.placements.clear();
+        this.element.remove();
+        super.dispose();
+    }
+}
+
+export { SessionGridLayout };