@olenbetong/appframe-ds 1.2.0 → 1.3.0

package/src/mdi/dockviewHost.ts

@@ -1,132 +1,132 @@
-import type { AddPanelOptions, DockviewApi, IDockviewGroupPanel, IDockviewPanel } from "dockview-react";
-
-import type { MdiHost, MdiHostGroup, MdiHostPanel } from "./host.js";
-import { MDI_COMPONENT } from "./layoutSpec.js";
-import type { MdiPosition } from "./types.js";
-
-function wrapGroup(group: IDockviewGroupPanel): MdiHostGroup {
-	return {
-		id: group.id,
-		get panelCount() {
-			return group.panels.length;
-		},
-		setLocked(locked) {
-			group.locked = locked;
-		},
-		setHeaderHidden(hidden) {
-			group.model.header.hidden = hidden;
-		},
-	};
-}
-
-function wrapPanel(panel: IDockviewPanel): MdiHostPanel {
-	return {
-		id: panel.id,
-		get group() {
-			return wrapGroup(panel.group);
-		},
-		setTitle: (title) => panel.api.setTitle(title),
-		setActive: () => panel.api.setActive(),
-		close: () => panel.api.close(),
-		getWindow: () => panel.api.getWindow(),
-	};
-}
-
-function toPosition(position: MdiPosition): AddPanelOptions["position"] {
-	if ("referencePanel" in position) {
-		return { referencePanel: position.referencePanel, direction: position.direction, index: position.index };
-	}
-
-	return { direction: position.direction };
-}
-
-/** A group that shows tabs and accepts documents: not locked, header visible. */
-function isDocumentGroup(group: IDockviewGroupPanel): boolean {
-	return !group.locked && !group.model.header.hidden;
-}
-
-/** Adapts the dockview API to the slice the controller works against. */
-export function createDockviewHost(api: DockviewApi): MdiHost {
-	// Where new documents go by default: the active group, unless that is a fixed pane
-	// (locked or without a tab bar), then the document group that was active most recently.
-	let lastDocumentGroup: string | undefined;
-	api.onDidActivePanelChange((event) => {
-		let group = event.panel?.group;
-		if (group && isDocumentGroup(group)) lastDocumentGroup = group.id;
-	});
-
-	function defaultPosition(): AddPanelOptions["position"] {
-		let active = api.activePanel;
-
-		if (active && isDocumentGroup(active.group)) {
-			return { referencePanel: active.id, direction: "within" };
-		}
-
-		let group = (lastDocumentGroup && api.getGroup(lastDocumentGroup)) || api.groups.find(isDocumentGroup);
-		return group ? { referenceGroup: group.id, direction: "within" } : undefined;
-	}
-
-	return {
-		addPanel({ id, title, position, inactive }) {
-			let panel = api.addPanel({
-				id,
-				title,
-				component: MDI_COMPONENT,
-				tabComponent: MDI_COMPONENT,
-				position: position ? toPosition(position) : defaultPosition(),
-				inactive,
-			});
-
-			return wrapPanel(panel);
-		},
-		getPanel(id) {
-			let panel = api.getPanel(id);
-			return panel ? wrapPanel(panel) : undefined;
-		},
-		getGroup(id) {
-			let group = api.getGroup(id);
-			return group ? wrapGroup(group) : undefined;
-		},
-		getActivePanelId: () => api.activePanel?.id,
-		toJSON: () => api.toJSON(),
-		fromJSON: (data) => api.fromJSON(data),
-		async addPopoutGroup(id, popoutUrl) {
-			let panel = api.getPanel(id);
-			return panel ? api.addPopoutGroup(panel, { popoutUrl }) : false;
-		},
-		onDidActivePanelChange(handler) {
-			let disposable = api.onDidActivePanelChange((event) => handler(event.panel?.id));
-			return () => disposable.dispose();
-		},
-		onDidRemovePanel(handler) {
-			let disposable = api.onDidRemovePanel((panel) => handler(panel.id));
-			return () => disposable.dispose();
-		},
-		onDidLayoutChange(handler) {
-			let disposable = api.onDidLayoutChange(() => handler());
-			return () => disposable.dispose();
-		},
-	};
-}
-
-/**
- * dockview copies the stylesheets into a popout window, but not the attributes
- * Designsystemet keys its tokens off (`data-color-scheme`, `data-size`, `lang`, …).
- */
-export function copyDocumentAttributes(from: Document, to: Document) {
-	let pairs: [Element, Element][] = [
-		[from.documentElement, to.documentElement],
-		[from.body, to.body],
-	];
-
-	for (let [source, target] of pairs) {
-		for (let attribute of Array.from(source.attributes)) {
-			if (attribute.name === "lang" || attribute.name === "class" || attribute.name.startsWith("data-")) {
-				target.setAttribute(attribute.name, attribute.value);
-			}
-		}
-	}
-
-	to.body.style.margin = "0";
-	to.body.style.overflow = "hidden";
-}
+import type { AddPanelOptions, DockviewApi, IDockviewGroupPanel, IDockviewPanel } from "dockview-react";
+
+import type { MdiHost, MdiHostGroup, MdiHostPanel } from "./host.js";
+import { MDI_COMPONENT } from "./layoutSpec.js";
+import type { MdiPosition } from "./types.js";
+
+function wrapGroup(group: IDockviewGroupPanel): MdiHostGroup {
+	return {
+		id: group.id,
+		get panelCount() {
+			return group.panels.length;
+		},
+		setLocked(locked) {
+			group.locked = locked;
+		},
+		setHeaderHidden(hidden) {
+			group.model.header.hidden = hidden;
+		},
+	};
+}
+
+function wrapPanel(panel: IDockviewPanel): MdiHostPanel {
+	return {
+		id: panel.id,
+		get group() {
+			return wrapGroup(panel.group);
+		},
+		setTitle: (title) => panel.api.setTitle(title),
+		setActive: () => panel.api.setActive(),
+		close: () => panel.api.close(),
+		getWindow: () => panel.api.getWindow(),
+	};
+}
+
+function toPosition(position: MdiPosition): AddPanelOptions["position"] {
+	if ("referencePanel" in position) {
+		return { referencePanel: position.referencePanel, direction: position.direction, index: position.index };
+	}
+
+	return { direction: position.direction };
+}
+
+/** A group that shows tabs and accepts documents: not locked, header visible. */
+function isDocumentGroup(group: IDockviewGroupPanel): boolean {
+	return !group.locked && !group.model.header.hidden;
+}
+
+/** Adapts the dockview API to the slice the controller works against. */
+export function createDockviewHost(api: DockviewApi): MdiHost {
+	// Where new documents go by default: the active group, unless that is a fixed pane
+	// (locked or without a tab bar), then the document group that was active most recently.
+	let lastDocumentGroup: string | undefined;
+	api.onDidActivePanelChange((event) => {
+		let group = event.panel?.group;
+		if (group && isDocumentGroup(group)) lastDocumentGroup = group.id;
+	});
+
+	function defaultPosition(): AddPanelOptions["position"] {
+		let active = api.activePanel;
+
+		if (active && isDocumentGroup(active.group)) {
+			return { referencePanel: active.id, direction: "within" };
+		}
+
+		let group = (lastDocumentGroup && api.getGroup(lastDocumentGroup)) || api.groups.find(isDocumentGroup);
+		return group ? { referenceGroup: group.id, direction: "within" } : undefined;
+	}
+
+	return {
+		addPanel({ id, title, position, inactive }) {
+			let panel = api.addPanel({
+				id,
+				title,
+				component: MDI_COMPONENT,
+				tabComponent: MDI_COMPONENT,
+				position: position ? toPosition(position) : defaultPosition(),
+				inactive,
+			});
+
+			return wrapPanel(panel);
+		},
+		getPanel(id) {
+			let panel = api.getPanel(id);
+			return panel ? wrapPanel(panel) : undefined;
+		},
+		getGroup(id) {
+			let group = api.getGroup(id);
+			return group ? wrapGroup(group) : undefined;
+		},
+		getActivePanelId: () => api.activePanel?.id,
+		toJSON: () => api.toJSON(),
+		fromJSON: (data) => api.fromJSON(data),
+		async addPopoutGroup(id, popoutUrl) {
+			let panel = api.getPanel(id);
+			return panel ? api.addPopoutGroup(panel, { popoutUrl }) : false;
+		},
+		onDidActivePanelChange(handler) {
+			let disposable = api.onDidActivePanelChange((event) => handler(event.panel?.id));
+			return () => disposable.dispose();
+		},
+		onDidRemovePanel(handler) {
+			let disposable = api.onDidRemovePanel((panel) => handler(panel.id));
+			return () => disposable.dispose();
+		},
+		onDidLayoutChange(handler) {
+			let disposable = api.onDidLayoutChange(() => handler());
+			return () => disposable.dispose();
+		},
+	};
+}
+
+/**
+ * dockview copies the stylesheets into a popout window, but not the attributes
+ * Designsystemet keys its tokens off (`data-color-scheme`, `data-size`, `lang`, …).
+ */
+export function copyDocumentAttributes(from: Document, to: Document) {
+	let pairs: [Element, Element][] = [
+		[from.documentElement, to.documentElement],
+		[from.body, to.body],
+	];
+
+	for (let [source, target] of pairs) {
+		for (let attribute of Array.from(source.attributes)) {
+			if (attribute.name === "lang" || attribute.name === "class" || attribute.name.startsWith("data-")) {
+				target.setAttribute(attribute.name, attribute.value);
+			}
+		}
+	}
+
+	to.body.style.margin = "0";
+	to.body.style.overflow = "hidden";
+}

package/src/mdi/fakeHost.ts

@@ -1,200 +1,200 @@
-import type { SerializedDockview } from "dockview-react";
-
-import type { MdiHost, MdiHostAddPanelOptions, MdiHostGroup, MdiHostPanel } from "./host.js";
-import type { MdiGroupState } from "./layoutSpec.js";
-import type { MdiLocked } from "./types.js";
-
-type FakePanel = { id: string; title: string; groupId: string };
-type FakeGroup = { id: string; locked: MdiLocked; headerHidden: boolean };
-
-/**
- * An in-memory stand-in for dockview: one flat list of groups, panels with a title
- * and a group, and the events the controller listens to.
- */
-export function createFakeHost() {
-	let panels = new Map<string, FakePanel>();
-	let groups = new Map<string, FakeGroup>();
-	let activeId: string | undefined;
-	let groupCounter = 0;
-	let activeHandlers: ((id: string | undefined) => void)[] = [];
-	let removeHandlers: ((id: string) => void)[] = [];
-	let layoutHandlers: (() => void)[] = [];
-	let popouts: { id: string; popoutUrl: string }[] = [];
-
-	function fireLayout() {
-		for (let handler of layoutHandlers) handler();
-	}
-
-	function setActive(id: string | undefined) {
-		if (id === activeId) return;
-		activeId = id;
-		for (let handler of activeHandlers) handler(id);
-	}
-
-	function newGroup(): FakeGroup {
-		groupCounter += 1;
-		let group = { id: `fake-g${groupCounter}`, locked: false, headerHidden: false };
-		groups.set(group.id, group);
-		return group;
-	}
-
-	function wrapGroup(group: FakeGroup): MdiHostGroup {
-		return {
-			id: group.id,
-			get panelCount() {
-				return [...panels.values()].filter((other) => other.groupId === group.id).length;
-			},
-			setLocked: (locked) => {
-				group.locked = locked;
-			},
-			setHeaderHidden: (hidden) => {
-				group.headerHidden = hidden;
-			},
-		};
-	}
-
-	function wrap(panel: FakePanel): MdiHostPanel {
-		return {
-			id: panel.id,
-			get group() {
-				return wrapGroup(groups.get(panel.groupId)!);
-			},
-			setTitle: (title: string) => {
-				panel.title = title;
-			},
-			setActive: () => setActive(panel.id),
-			close: () => {
-				panels.delete(panel.id);
-				for (let handler of removeHandlers) handler(panel.id);
-				if (activeId === panel.id) {
-					setActive([...panels.keys()][0]);
-				}
-				fireLayout();
-			},
-			getWindow: () => globalThis.window,
-		};
-	}
-
-	let host: MdiHost = {
-		addPanel({ id, title, position, inactive }: MdiHostAddPanelOptions) {
-			let groupId: string;
-
-			if (position && "referencePanel" in position && position.direction === "within") {
-				groupId = panels.get(position.referencePanel)?.groupId ?? newGroup().id;
-			} else if (!position && activeId) {
-				groupId = panels.get(activeId)!.groupId;
-			} else {
-				groupId = newGroup().id;
-			}
-
-			let panel = { id, title, groupId };
-			panels.set(id, panel);
-			if (!inactive) setActive(id);
-			fireLayout();
-
-			return wrap(panel);
-		},
-		getPanel(id) {
-			let panel = panels.get(id);
-			return panel ? wrap(panel) : undefined;
-		},
-		getGroup(id) {
-			let group = groups.get(id);
-			return group ? wrapGroup(group) : undefined;
-		},
-		getActivePanelId: () => activeId,
-		toJSON() {
-			let groupStates: MdiGroupState[] = [...groups.values()].map((group) => ({
-				id: group.id,
-				views: [...panels.values()].filter((panel) => panel.groupId === group.id).map((panel) => panel.id),
-				activeView: activeId && panels.get(activeId)?.groupId === group.id ? activeId : undefined,
-				locked: group.locked || undefined,
-				hideHeader: group.headerHidden || undefined,
-			}));
-
-			return {
-				grid: {
-					root: { type: "branch", size: 1000, data: groupStates.map((data) => ({ type: "leaf", data, size: 1000 })) },
-					width: 1000,
-					height: 1000,
-					orientation: "HORIZONTAL" as SerializedDockview["grid"]["orientation"],
-				},
-				panels: Object.fromEntries(
-					[...panels.values()].map((panel) => [
-						panel.id,
-						{ id: panel.id, contentComponent: "mdi", title: panel.title },
-					]),
-				),
-				activeGroup: activeId ? panels.get(activeId)?.groupId : undefined,
-			};
-		},
-		fromJSON(data) {
-			// Mimic dockview: existing panels are removed (and reported) before the new ones are created.
-			for (let id of panels.keys()) {
-				panels.delete(id);
-				for (let handler of removeHandlers) handler(id);
-			}
-			groups.clear();
-			activeId = undefined;
-
-			function visit(node: { type: string; data: unknown }) {
-				if (node.type === "leaf") {
-					let state = node.data as MdiGroupState;
-					// dockview reduces `locked` to a boolean here; the controller puts the stricter value back.
-					groups.set(state.id, { id: state.id, locked: !!state.locked, headerHidden: !!state.hideHeader });
-					for (let view of state.views) {
-						let title = data.panels[view]?.title ?? view;
-						panels.set(view, { id: view, title, groupId: state.id });
-					}
-					if (state.id === data.activeGroup) {
-						activeId = state.activeView ?? state.views[0];
-					}
-				} else {
-					for (let child of node.data as { type: string; data: unknown }[]) visit(child);
-				}
-			}
-
-			visit(data.grid.root);
-			activeId ??= [...panels.keys()][0];
-			for (let handler of activeHandlers) handler(activeId);
-			fireLayout();
-		},
-		async addPopoutGroup(id, popoutUrl) {
-			if (!panels.has(id)) return false;
-			popouts.push({ id, popoutUrl });
-			return true;
-		},
-		onDidActivePanelChange(handler) {
-			activeHandlers.push(handler);
-			return () => {
-				activeHandlers = activeHandlers.filter((other) => other !== handler);
-			};
-		},
-		onDidRemovePanel(handler) {
-			removeHandlers.push(handler);
-			return () => {
-				removeHandlers = removeHandlers.filter((other) => other !== handler);
-			};
-		},
-		onDidLayoutChange(handler) {
-			layoutHandlers.push(handler);
-			return () => {
-				layoutHandlers = layoutHandlers.filter((other) => other !== handler);
-			};
-		},
-	};
-
-	return {
-		host,
-		panels,
-		groups,
-		popouts,
-		get activeId() {
-			return activeId;
-		},
-		/** Simulates the user activating a tab */
-		activate: setActive,
-		/** Simulates a layout change such as a sash drag */
-		fireLayout,
-	};
-}
+import type { SerializedDockview } from "dockview-react";
+
+import type { MdiHost, MdiHostAddPanelOptions, MdiHostGroup, MdiHostPanel } from "./host.js";
+import type { MdiGroupState } from "./layoutSpec.js";
+import type { MdiLocked } from "./types.js";
+
+type FakePanel = { id: string; title: string; groupId: string };
+type FakeGroup = { id: string; locked: MdiLocked; headerHidden: boolean };
+
+/**
+ * An in-memory stand-in for dockview: one flat list of groups, panels with a title
+ * and a group, and the events the controller listens to.
+ */
+export function createFakeHost() {
+	let panels = new Map<string, FakePanel>();
+	let groups = new Map<string, FakeGroup>();
+	let activeId: string | undefined;
+	let groupCounter = 0;
+	let activeHandlers: ((id: string | undefined) => void)[] = [];
+	let removeHandlers: ((id: string) => void)[] = [];
+	let layoutHandlers: (() => void)[] = [];
+	let popouts: { id: string; popoutUrl: string }[] = [];
+
+	function fireLayout() {
+		for (let handler of layoutHandlers) handler();
+	}
+
+	function setActive(id: string | undefined) {
+		if (id === activeId) return;
+		activeId = id;
+		for (let handler of activeHandlers) handler(id);
+	}
+
+	function newGroup(): FakeGroup {
+		groupCounter += 1;
+		let group = { id: `fake-g${groupCounter}`, locked: false, headerHidden: false };
+		groups.set(group.id, group);
+		return group;
+	}
+
+	function wrapGroup(group: FakeGroup): MdiHostGroup {
+		return {
+			id: group.id,
+			get panelCount() {
+				return [...panels.values()].filter((other) => other.groupId === group.id).length;
+			},
+			setLocked: (locked) => {
+				group.locked = locked;
+			},
+			setHeaderHidden: (hidden) => {
+				group.headerHidden = hidden;
+			},
+		};
+	}
+
+	function wrap(panel: FakePanel): MdiHostPanel {
+		return {
+			id: panel.id,
+			get group() {
+				return wrapGroup(groups.get(panel.groupId)!);
+			},
+			setTitle: (title: string) => {
+				panel.title = title;
+			},
+			setActive: () => setActive(panel.id),
+			close: () => {
+				panels.delete(panel.id);
+				for (let handler of removeHandlers) handler(panel.id);
+				if (activeId === panel.id) {
+					setActive([...panels.keys()][0]);
+				}
+				fireLayout();
+			},
+			getWindow: () => globalThis.window,
+		};
+	}
+
+	let host: MdiHost = {
+		addPanel({ id, title, position, inactive }: MdiHostAddPanelOptions) {
+			let groupId: string;
+
+			if (position && "referencePanel" in position && position.direction === "within") {
+				groupId = panels.get(position.referencePanel)?.groupId ?? newGroup().id;
+			} else if (!position && activeId) {
+				groupId = panels.get(activeId)!.groupId;
+			} else {
+				groupId = newGroup().id;
+			}
+
+			let panel = { id, title, groupId };
+			panels.set(id, panel);
+			if (!inactive) setActive(id);
+			fireLayout();
+
+			return wrap(panel);
+		},
+		getPanel(id) {
+			let panel = panels.get(id);
+			return panel ? wrap(panel) : undefined;
+		},
+		getGroup(id) {
+			let group = groups.get(id);
+			return group ? wrapGroup(group) : undefined;
+		},
+		getActivePanelId: () => activeId,
+		toJSON() {
+			let groupStates: MdiGroupState[] = [...groups.values()].map((group) => ({
+				id: group.id,
+				views: [...panels.values()].filter((panel) => panel.groupId === group.id).map((panel) => panel.id),
+				activeView: activeId && panels.get(activeId)?.groupId === group.id ? activeId : undefined,
+				locked: group.locked || undefined,
+				hideHeader: group.headerHidden || undefined,
+			}));
+
+			return {
+				grid: {
+					root: { type: "branch", size: 1000, data: groupStates.map((data) => ({ type: "leaf", data, size: 1000 })) },
+					width: 1000,
+					height: 1000,
+					orientation: "HORIZONTAL" as SerializedDockview["grid"]["orientation"],
+				},
+				panels: Object.fromEntries(
+					[...panels.values()].map((panel) => [
+						panel.id,
+						{ id: panel.id, contentComponent: "mdi", title: panel.title },
+					]),
+				),
+				activeGroup: activeId ? panels.get(activeId)?.groupId : undefined,
+			};
+		},
+		fromJSON(data) {
+			// Mimic dockview: existing panels are removed (and reported) before the new ones are created.
+			for (let id of panels.keys()) {
+				panels.delete(id);
+				for (let handler of removeHandlers) handler(id);
+			}
+			groups.clear();
+			activeId = undefined;
+
+			function visit(node: { type: string; data: unknown }) {
+				if (node.type === "leaf") {
+					let state = node.data as MdiGroupState;
+					// dockview reduces `locked` to a boolean here; the controller puts the stricter value back.
+					groups.set(state.id, { id: state.id, locked: !!state.locked, headerHidden: !!state.hideHeader });
+					for (let view of state.views) {
+						let title = data.panels[view]?.title ?? view;
+						panels.set(view, { id: view, title, groupId: state.id });
+					}
+					if (state.id === data.activeGroup) {
+						activeId = state.activeView ?? state.views[0];
+					}
+				} else {
+					for (let child of node.data as { type: string; data: unknown }[]) visit(child);
+				}
+			}
+
+			visit(data.grid.root);
+			activeId ??= [...panels.keys()][0];
+			for (let handler of activeHandlers) handler(activeId);
+			fireLayout();
+		},
+		async addPopoutGroup(id, popoutUrl) {
+			if (!panels.has(id)) return false;
+			popouts.push({ id, popoutUrl });
+			return true;
+		},
+		onDidActivePanelChange(handler) {
+			activeHandlers.push(handler);
+			return () => {
+				activeHandlers = activeHandlers.filter((other) => other !== handler);
+			};
+		},
+		onDidRemovePanel(handler) {
+			removeHandlers.push(handler);
+			return () => {
+				removeHandlers = removeHandlers.filter((other) => other !== handler);
+			};
+		},
+		onDidLayoutChange(handler) {
+			layoutHandlers.push(handler);
+			return () => {
+				layoutHandlers = layoutHandlers.filter((other) => other !== handler);
+			};
+		},
+	};
+
+	return {
+		host,
+		panels,
+		groups,
+		popouts,
+		get activeId() {
+			return activeId;
+		},
+		/** Simulates the user activating a tab */
+		activate: setActive,
+		/** Simulates a layout change such as a sash drag */
+		fireLayout,
+	};
+}