dockview-core 6.6.0 → 7.0.2

package/dist/esm/dockview/edgeGroupService.js

@@ -0,0 +1,63 @@
+import { defineModule } from './modules';
+export class EdgeGroupService {
+    constructor() {
+        this._edgeGroups = new Map();
+        this._edgeGroupDisposables = new Map();
+    }
+    // No constructor needed — the host is currently unused. The
+    // IEdgeGroupServiceHost slot stays for symmetry with the other modules
+    // and to leave room for future host callbacks.
+    add(position, group, autoCollapseDisposable) {
+        this._edgeGroups.set(position, group);
+        this._edgeGroupDisposables.set(position, autoCollapseDisposable);
+    }
+    remove(position) {
+        var _a;
+        (_a = this._edgeGroupDisposables.get(position)) === null || _a === void 0 ? void 0 : _a.dispose();
+        this._edgeGroupDisposables.delete(position);
+        this._edgeGroups.delete(position);
+    }
+    get(position) {
+        return this._edgeGroups.get(position);
+    }
+    has(position) {
+        return this._edgeGroups.has(position);
+    }
+    hasAny() {
+        return this._edgeGroups.size > 0;
+    }
+    entries() {
+        return this._edgeGroups.entries();
+    }
+    includes(group) {
+        for (const edgeGroup of this._edgeGroups.values()) {
+            if (edgeGroup === group) {
+                return true;
+            }
+        }
+        return false;
+    }
+    findPositionOf(group) {
+        for (const [position, edgeGroup] of this._edgeGroups) {
+            if (edgeGroup === group) {
+                return position;
+            }
+        }
+        return undefined;
+    }
+    disposeAll() {
+        for (const disposable of this._edgeGroupDisposables.values()) {
+            disposable.dispose();
+        }
+        this._edgeGroupDisposables.clear();
+        this._edgeGroups.clear();
+    }
+    dispose() {
+        this.disposeAll();
+    }
+}
+export const EdgeGroupModule = defineModule({
+    name: 'EdgeGroup',
+    serviceKey: 'edgeGroupService',
+    create: () => new EdgeGroupService(),
+});

package/dist/esm/dockview/floatingGroupService.d.ts

@@ -0,0 +1,37 @@
+import { IDisposable } from '../lifecycle';
+import { Gridview } from '../gridview/gridview';
+import { Overlay } from '../overlay/overlay';
+import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { DockviewOptions } from './options';
+import { SerializedFloatingGroup } from './dockviewComponent';
+/**
+ * Narrow callback surface the FloatingGroupService needs from its host
+ * component. Keeps the service decoupled from DockviewComponent.
+ */
+export interface IFloatingGroupHost {
+    fireLayoutChange(): void;
+}
+export interface IFloatingGroupService extends IDisposable {
+    readonly floatingGroups: readonly DockviewFloatingGroupPanel[];
+    add(group: DockviewGroupPanel, overlay: Overlay, gridview: Gridview): DockviewFloatingGroupPanel;
+    findByGroup(group: DockviewGroupPanel): DockviewFloatingGroupPanel | undefined;
+    serialize(): SerializedFloatingGroup[];
+    constrainBounds(): void;
+    updateBounds(options: Partial<DockviewOptions>): void;
+    disposeAll(): void;
+}
+export declare class FloatingGroupService implements IFloatingGroupService {
+    private readonly _host;
+    private readonly _floatingGroups;
+    get floatingGroups(): readonly DockviewFloatingGroupPanel[];
+    constructor(host: IFloatingGroupHost);
+    add(group: DockviewGroupPanel, overlay: Overlay, gridview: Gridview): DockviewFloatingGroupPanel;
+    findByGroup(group: DockviewGroupPanel): DockviewFloatingGroupPanel | undefined;
+    serialize(): SerializedFloatingGroup[];
+    constrainBounds(): void;
+    updateBounds(options: Partial<DockviewOptions>): void;
+    disposeAll(): void;
+    dispose(): void;
+}
+export declare const FloatingGroupModule: import("./modules").DockviewModule<IFloatingGroupHost>;

package/dist/esm/dockview/floatingGroupService.js

@@ -0,0 +1,150 @@
+import { CompositeDisposable } from '../lifecycle';
+import { remove } from '../array';
+import { watchElementResize } from '../dom';
+import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE } from '../constants';
+import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
+import { defineModule } from './modules';
+export class FloatingGroupService {
+    get floatingGroups() {
+        return this._floatingGroups;
+    }
+    constructor(host) {
+        this._floatingGroups = [];
+        this._host = host;
+    }
+    add(group, overlay, gridview) {
+        const floatingGroupPanel = new DockviewFloatingGroupPanel(group, overlay, gridview);
+        const disposable = new CompositeDisposable(group.api.onDidActiveChange((event) => {
+            if (event.isActive) {
+                overlay.bringToFront();
+            }
+        }), (() => {
+            // The floating window's nested gridview fills the overlay
+            // beneath the (optional) title bar; size it from its own
+            // measured box so it follows the overlay as the user drags
+            // / resizes the window.
+            let lastWidth = -1;
+            let lastHeight = -1;
+            return watchElementResize(gridview.element, (entry) => {
+                const width = Math.round(entry.contentRect.width);
+                const height = Math.round(entry.contentRect.height);
+                if (width === lastWidth && height === lastHeight) {
+                    return;
+                }
+                lastWidth = width;
+                lastHeight = height;
+                gridview.layout(width, height);
+            });
+        })());
+        // Floating windows are non-modal dialogs (role set in Overlay). Give
+        // the dialog an accessible name from the representative group's active
+        // panel, refreshed as the active panel changes. An untitled panel
+        // leaves the dialog unnamed rather than hard-coding a label string.
+        const updateDialogLabel = () => {
+            var _a;
+            const title = (_a = group.activePanel) === null || _a === void 0 ? void 0 : _a.title;
+            if (title) {
+                overlay.element.setAttribute('aria-label', title);
+            }
+            else {
+                overlay.element.removeAttribute('aria-label');
+            }
+        };
+        updateDialogLabel();
+        floatingGroupPanel.addDisposables(group.api.onDidActivePanelChange(() => updateDialogLabel()), overlay.onDidChange(() => {
+            gridview.layout(gridview.width, gridview.height);
+        }), overlay.onDidChangeEnd(() => {
+            this._host.fireLayoutChange();
+        }), group.onDidChange((event) => {
+            // `event.height` is the group's requested *content* height.
+            // When a dedicated title bar is present the overlay's outer
+            // box is taller by the header, so add it back to preserve the
+            // requested content size.
+            overlay.setBounds({
+                height: typeof (event === null || event === void 0 ? void 0 : event.height) === 'number'
+                    ? event.height + overlay.headerHeight
+                    : event === null || event === void 0 ? void 0 : event.height,
+                width: event === null || event === void 0 ? void 0 : event.width,
+            });
+        }), {
+            dispose: () => {
+                disposable.dispose();
+                remove(this._floatingGroups, floatingGroupPanel);
+                group.model.location = { type: 'grid' };
+            },
+        });
+        this._floatingGroups.push(floatingGroupPanel);
+        return floatingGroupPanel;
+    }
+    findByGroup(group) {
+        // A floating window may host several groups in a nested gridview, so
+        // match by membership (DOM containment) rather than only the anchor
+        // group. `floating.group === group` covers the brief window before the
+        // anchor's element is attached to the gridview.
+        return this._floatingGroups.find((floating) => floating.group === group ||
+            floating.gridview.element.contains(group.element));
+    }
+    serialize() {
+        return this._floatingGroups.map((floating) => {
+            const grid = floating.gridview.serialize();
+            const position = floating.overlay.toJSON();
+            const root = grid.root;
+            // A single-group window keeps the legacy `data` shape so layouts
+            // round-trip byte-stably and older readers keep working; only
+            // genuine multi-group windows emit the nested `grid` form.
+            if (root.type === 'branch' &&
+                root.data.length === 1 &&
+                root.data[0].type === 'leaf') {
+                return {
+                    data: root.data[0].data,
+                    position,
+                };
+            }
+            return { grid, position };
+        });
+    }
+    constrainBounds() {
+        for (const floating of this._floatingGroups) {
+            floating.overlay.setBounds();
+        }
+    }
+    updateBounds(options) {
+        var _a, _b;
+        if (!('floatingGroupBounds' in options)) {
+            return;
+        }
+        for (const group of this._floatingGroups) {
+            switch (options.floatingGroupBounds) {
+                case 'boundedWithinViewport':
+                    group.overlay.minimumInViewportHeight = undefined;
+                    group.overlay.minimumInViewportWidth = undefined;
+                    break;
+                case undefined:
+                    group.overlay.minimumInViewportHeight =
+                        DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                    group.overlay.minimumInViewportWidth =
+                        DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                    break;
+                default:
+                    group.overlay.minimumInViewportHeight =
+                        (_a = options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
+                    group.overlay.minimumInViewportWidth =
+                        (_b = options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
+            }
+            group.overlay.setBounds();
+        }
+    }
+    disposeAll() {
+        for (const floating of [...this._floatingGroups]) {
+            floating.dispose();
+        }
+    }
+    dispose() {
+        this.disposeAll();
+    }
+}
+export const FloatingGroupModule = defineModule({
+    name: 'FloatingGroup',
+    serviceKey: 'floatingGroupService',
+    create: (host) => new FloatingGroupService(host),
+});

package/dist/esm/dockview/headerActionsService.d.ts

@@ -0,0 +1,32 @@
+import { IDisposable } from '../lifecycle';
+import { Event } from '../events';
+import { DockviewComponentOptions } from './options';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { DockviewApi } from '../api/component.api';
+export interface IHeaderActionsHost {
+    readonly api: DockviewApi;
+    readonly options: DockviewComponentOptions;
+    readonly groups: DockviewGroupPanel[];
+    readonly onDidAddGroup: Event<DockviewGroupPanel>;
+    readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
+}
+export interface IHeaderActionsService extends IDisposable {
+    /** Re-mount the three header action slots on a single group. */
+    refresh(group: DockviewGroupPanel): void;
+    /** Re-mount on every group; used when one of the three options changes. */
+    refreshAll(): void;
+    /** Tear down per-group renderer state. */
+    disposeGroup(group: DockviewGroupPanel): void;
+}
+export declare class HeaderActionsService implements IHeaderActionsService {
+    private readonly _host;
+    private readonly _perGroup;
+    constructor(host: IHeaderActionsHost);
+    refresh(group: DockviewGroupPanel): void;
+    refreshAll(): void;
+    disposeGroup(group: DockviewGroupPanel): void;
+    dispose(): void;
+    private _ensureState;
+    private _refreshSlot;
+}
+export declare const HeaderActionsModule: import("./modules").DockviewModule<IHeaderActionsHost>;

package/dist/esm/dockview/headerActionsService.js

@@ -0,0 +1,86 @@
+import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
+import { defineModule } from './modules';
+const SLOT_OPTION_KEY = {
+    left: 'createLeftHeaderActionComponent',
+    right: 'createRightHeaderActionComponent',
+    prefix: 'createPrefixHeaderActionComponent',
+};
+export class HeaderActionsService {
+    constructor(host) {
+        this._perGroup = new Map();
+        this._host = host;
+    }
+    refresh(group) {
+        // The headerPosition setter on DockviewGroupPanelModel fires inside
+        // the model's constructor — before the parent DockviewGroupPanel has
+        // assigned its `_model` field, and in tests where the parent panel
+        // may be null. Skip; DockviewGroupPanel.initialize() will refresh
+        // once construction completes for real groups.
+        if (!(group === null || group === void 0 ? void 0 : group.model)) {
+            return;
+        }
+        const state = this._ensureState(group);
+        this._refreshSlot('left', group, state.left);
+        this._refreshSlot('right', group, state.right);
+        this._refreshSlot('prefix', group, state.prefix);
+    }
+    refreshAll() {
+        for (const group of this._host.groups) {
+            this.refresh(group);
+        }
+    }
+    disposeGroup(group) {
+        const state = this._perGroup.get(group);
+        if (!state) {
+            return;
+        }
+        state.left.dispose();
+        state.right.dispose();
+        state.prefix.dispose();
+        this._perGroup.delete(group);
+    }
+    dispose() {
+        for (const group of [...this._perGroup.keys()]) {
+            this.disposeGroup(group);
+        }
+    }
+    _ensureState(group) {
+        let state = this._perGroup.get(group);
+        if (!state) {
+            state = {
+                left: new MutableDisposable(),
+                right: new MutableDisposable(),
+                prefix: new MutableDisposable(),
+            };
+            this._perGroup.set(group, state);
+        }
+        return state;
+    }
+    _refreshSlot(slot, group, disposable) {
+        const factory = this._host.options[SLOT_OPTION_KEY[slot]];
+        if (factory) {
+            const renderer = factory(group);
+            disposable.value = renderer;
+            renderer.init({
+                containerApi: this._host.api,
+                api: group.api,
+                group,
+            });
+            group.model.attachHeaderAction(slot, renderer.element);
+        }
+        else {
+            disposable.dispose();
+            group.model.attachHeaderAction(slot, undefined);
+        }
+    }
+}
+export const HeaderActionsModule = defineModule({
+    name: 'HeaderActions',
+    serviceKey: 'headerActionsService',
+    create: (host) => new HeaderActionsService(host),
+    init: (host, service) => {
+        return new CompositeDisposable(host.onDidRemoveGroup((group) => {
+            service.disposeGroup(group);
+        }));
+    },
+});

package/dist/esm/dockview/liveRegionService.d.ts

@@ -0,0 +1,53 @@
+import { CompositeDisposable, IDisposable } from '../lifecycle';
+import { Event } from '../events';
+import { IDockviewPanel } from './dockviewPanel';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { DockviewLayoutMutationEvent, DockviewMaximizedGroupChangeEvent } from './dockviewComponent';
+import { DockviewComponentOptions } from './options';
+/**
+ * The narrow surface the {@link LiveRegionService} needs from the host
+ * (the `DockviewComponent`) — somewhere to mount the region and the layout
+ * events to narrate. `onWill/onDidMutateLayout` are used to suppress the
+ * bulk-load / clear burst (one transaction, not N panel announcements).
+ */
+export interface ILiveRegionHost {
+    readonly element: HTMLElement;
+    readonly options: DockviewComponentOptions;
+    readonly onDidAddPanel: Event<IDockviewPanel>;
+    readonly onDidRemovePanel: Event<IDockviewPanel>;
+    readonly onWillMutateLayout: Event<DockviewLayoutMutationEvent>;
+    readonly onDidMutateLayout: Event<DockviewLayoutMutationEvent>;
+    readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChangeEvent>;
+    readonly onDidAddGroup: Event<DockviewGroupPanel>;
+    readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
+}
+export interface ILiveRegionService extends IDisposable {
+    /**
+     * Announce a message to assistive technology via the live region. The
+     * shared sink — the accessibility module writes keyboard-docking
+     * narration here too, so all announcements use one region.
+     */
+    announce(message: string, politeness?: 'polite' | 'assertive'): void;
+}
+/**
+ * Narrates layout state changes to screen readers via visually-hidden
+ * `aria-live` regions. Free / core (WCAG 4.1.3). Announces panel open/close +
+ * the shared `announce()` sink (the accessibility module narrates docking here too).
+ * Two regions: a **polite** one for routine status and an **assertive** one
+ * for errors/cancellations. The bulk load/clear burst is suppressed via the
+ * mutation-transaction events, and an app can take over delivery entirely with
+ * the `announcer` option.
+ */
+export declare class LiveRegionService extends CompositeDisposable implements ILiveRegionService {
+    private readonly _host;
+    private readonly _polite;
+    private readonly _assertive;
+    private _suppressDepth;
+    private readonly _locationSubs;
+    constructor(host: ILiveRegionHost);
+    private _trackLocation;
+    announce(message: string, politeness?: 'polite' | 'assertive'): void;
+    private _announce;
+    private _defaultMessage;
+}
+export declare const LiveRegionModule: import("./modules").DockviewModule<ILiveRegionHost>;

package/dist/esm/dockview/liveRegionService.js

@@ -0,0 +1,159 @@
+import { CompositeDisposable } from '../lifecycle';
+import { resolveMessages } from './accessibilityMessages';
+import { defineModule } from './modules';
+/** Bulk transactions whose per-panel events should not each be announced. */
+const isBulk = (kind) => kind === 'load' || kind === 'clear';
+function createLiveRegion(politeness) {
+    const el = document.createElement('div');
+    el.className =
+        politeness === 'assertive'
+            ? 'dv-live-region-assertive'
+            : 'dv-live-region';
+    // assertive interrupts the SR (errors / cancellations); polite waits for a
+    // pause (routine status). `alert` implies assertive, `status` implies polite.
+    el.setAttribute('role', politeness === 'assertive' ? 'alert' : 'status');
+    el.setAttribute('aria-live', politeness);
+    el.setAttribute('aria-atomic', 'true');
+    // Visually hidden but kept in the accessibility tree (never display:none /
+    // visibility:hidden, which would drop it from AT). Standard clip pattern.
+    Object.assign(el.style, {
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        margin: '-1px',
+        padding: '0',
+        overflow: 'hidden',
+        clip: 'rect(0 0 0 0)',
+        clipPath: 'inset(50%)',
+        whiteSpace: 'nowrap',
+        border: '0',
+    });
+    return el;
+}
+/**
+ * Narrates layout state changes to screen readers via visually-hidden
+ * `aria-live` regions. Free / core (WCAG 4.1.3). Announces panel open/close +
+ * the shared `announce()` sink (the accessibility module narrates docking here too).
+ * Two regions: a **polite** one for routine status and an **assertive** one
+ * for errors/cancellations. The bulk load/clear burst is suppressed via the
+ * mutation-transaction events, and an app can take over delivery entirely with
+ * the `announcer` option.
+ */
+export class LiveRegionService extends CompositeDisposable {
+    constructor(host) {
+        super();
+        this._suppressDepth = 0;
+        this._locationSubs = new Map();
+        this._host = host;
+        this._polite = createLiveRegion('polite');
+        this._assertive = createLiveRegion('assertive');
+        host.element.appendChild(this._polite);
+        host.element.appendChild(this._assertive);
+        this.addDisposables({ dispose: () => this._polite.remove() }, { dispose: () => this._assertive.remove() }, host.onDidAddPanel((panel) => this._announce(panel, 'open')), host.onDidRemovePanel((panel) => this._announce(panel, 'close')), 
+        // Bracket bulk transactions so a fromJSON / clear doesn't announce
+        // every nested add/remove.
+        host.onWillMutateLayout((e) => {
+            if (isBulk(e.kind)) {
+                this._suppressDepth++;
+            }
+        }), host.onDidMutateLayout((e) => {
+            if (isBulk(e.kind)) {
+                this._suppressDepth = Math.max(0, this._suppressDepth - 1);
+            }
+        }), host.onDidMaximizedGroupChange((e) => {
+            const panel = e.group.activePanel;
+            if (panel) {
+                this._announce(panel, e.isMaximized ? 'maximize' : 'restore');
+            }
+        }), 
+        // Narrate a group floating / docking back / popping out. A group is
+        // born in the grid then transitions, so track each group's previous
+        // location and ignore the no-op initial `-> grid`.
+        host.onDidAddGroup((group) => this._trackLocation(group)), host.onDidRemoveGroup((group) => {
+            var _a;
+            (_a = this._locationSubs.get(group.id)) === null || _a === void 0 ? void 0 : _a.dispose();
+            this._locationSubs.delete(group.id);
+        }), {
+            dispose: () => {
+                this._locationSubs.forEach((sub) => sub.dispose());
+                this._locationSubs.clear();
+            },
+        });
+    }
+    _trackLocation(group) {
+        let prev = group.api.location.type;
+        const sub = group.api.onDidLocationChange((e) => {
+            const next = e.location.type;
+            if (next === prev) {
+                return;
+            }
+            prev = next;
+            const panel = group.activePanel;
+            if (!panel) {
+                return;
+            }
+            const kind = next === 'floating'
+                ? 'float'
+                : next === 'popout'
+                    ? 'popout'
+                    : 'dock';
+            this._announce(panel, kind);
+        });
+        this._locationSubs.set(group.id, sub);
+    }
+    announce(message, politeness = 'polite') {
+        // Opt-out (read live so `updateOptions({ announcements })` applies).
+        if (this._host.options.announcements === false ||
+            this._suppressDepth > 0 ||
+            !message) {
+            return;
+        }
+        // Apps can route announcements into their own SR system instead of the
+        // built-in regions (e.g. a shared app-wide live region).
+        const announcer = this._host.options.announcer;
+        if (announcer) {
+            announcer({ message, politeness });
+            return;
+        }
+        // Clearing first forces SRs to re-announce an identical message.
+        const region = politeness === 'assertive' ? this._assertive : this._polite;
+        region.textContent = '';
+        region.textContent = message;
+    }
+    _announce(panel, kind) {
+        var _a, _b;
+        // The app may localise/override the message, suppress it (null / ''),
+        // or fall through to the default (undefined).
+        const custom = (_b = (_a = this._host.options).getAnnouncement) === null || _b === void 0 ? void 0 : _b.call(_a, { kind, panel });
+        if (custom === null || custom === '') {
+            return;
+        }
+        this.announce(custom !== null && custom !== void 0 ? custom : this._defaultMessage(panel, kind));
+    }
+    _defaultMessage(panel, kind) {
+        var _a;
+        const m = resolveMessages(this._host.options.messages);
+        const name = (_a = panel.title) !== null && _a !== void 0 ? _a : panel.id;
+        switch (kind) {
+            case 'open':
+                return m.panelOpened(name);
+            case 'close':
+                return m.panelClosed(name);
+            case 'maximize':
+                return m.groupMaximized(name);
+            case 'restore':
+                return m.groupRestored(name);
+            case 'float':
+                return m.groupFloated(name);
+            case 'dock':
+                return m.groupDocked(name);
+            case 'popout':
+                return m.groupPoppedOut(name);
+        }
+    }
+}
+export const LiveRegionModule = defineModule({
+    name: 'LiveRegion',
+    serviceKey: 'liveRegionService',
+    create: (host) => new LiveRegionService(host),
+});