@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/mdi/host.ts

@@ -1,44 +1,44 @@
-import type { SerializedDockview } from "dockview-react";
-
-import type { MdiLocked, MdiPosition } from "./types.js";
-
-export type MdiHostGroup = {
-	id: string;
-	panelCount: number;
-	setLocked(locked: MdiLocked): void;
-	setHeaderHidden(hidden: boolean): void;
-};
-
-export type MdiHostPanel = {
-	id: string;
-	group: MdiHostGroup;
-	setTitle(title: string): void;
-	setActive(): void;
-	/** Removes the panel from dockview. Fires `onDidRemovePanel`. */
-	close(): void;
-	getWindow(): Window;
-};
-
-export type MdiHostAddPanelOptions = {
-	id: string;
-	title: string;
-	position?: MdiPosition;
-	inactive?: boolean;
-};
-
-/**
- * The slice of the dockview API the controller uses. Narrow on purpose, so the
- * controller can be tested against an in-memory fake.
- */
-export type MdiHost = {
-	addPanel(options: MdiHostAddPanelOptions): MdiHostPanel;
-	getPanel(id: string): MdiHostPanel | undefined;
-	getGroup(id: string): MdiHostGroup | undefined;
-	getActivePanelId(): string | undefined;
-	toJSON(): SerializedDockview;
-	fromJSON(data: SerializedDockview): void;
-	addPopoutGroup(id: string, popoutUrl: string): Promise<boolean>;
-	onDidActivePanelChange(handler: (id: string | undefined) => void): () => void;
-	onDidRemovePanel(handler: (id: string) => void): () => void;
-	onDidLayoutChange(handler: () => void): () => void;
-};
+import type { SerializedDockview } from "dockview-react";
+
+import type { MdiLocked, MdiPosition } from "./types.js";
+
+export type MdiHostGroup = {
+	id: string;
+	panelCount: number;
+	setLocked(locked: MdiLocked): void;
+	setHeaderHidden(hidden: boolean): void;
+};
+
+export type MdiHostPanel = {
+	id: string;
+	group: MdiHostGroup;
+	setTitle(title: string): void;
+	setActive(): void;
+	/** Removes the panel from dockview. Fires `onDidRemovePanel`. */
+	close(): void;
+	getWindow(): Window;
+};
+
+export type MdiHostAddPanelOptions = {
+	id: string;
+	title: string;
+	position?: MdiPosition;
+	inactive?: boolean;
+};
+
+/**
+ * The slice of the dockview API the controller uses. Narrow on purpose, so the
+ * controller can be tested against an in-memory fake.
+ */
+export type MdiHost = {
+	addPanel(options: MdiHostAddPanelOptions): MdiHostPanel;
+	getPanel(id: string): MdiHostPanel | undefined;
+	getGroup(id: string): MdiHostGroup | undefined;
+	getActivePanelId(): string | undefined;
+	toJSON(): SerializedDockview;
+	fromJSON(data: SerializedDockview): void;
+	addPopoutGroup(id: string, popoutUrl: string): Promise<boolean>;
+	onDidActivePanelChange(handler: (id: string | undefined) => void): () => void;
+	onDidRemovePanel(handler: (id: string) => void): () => void;
+	onDidLayoutChange(handler: () => void): () => void;
+};

package/src/mdi/ids.test.ts

@@ -1,20 +1,20 @@
-import { describe, expect, it } from "vitest";
-
-import { panelId, parsePanelId } from "./ids.js";
-
-describe("panel ids", () => {
-	it("uses the type alone when there is no key", () => {
-		expect(panelId("explorer")).toBe("explorer");
-		expect(parsePanelId("explorer")).toEqual({ type: "explorer" });
-	});
-
-	it("joins type and key with a colon", () => {
-		expect(panelId("editor", "42")).toBe("editor:42");
-		expect(parsePanelId("editor:42")).toEqual({ type: "editor", key: "42" });
-	});
-
-	it("round-trips keys that contain colons", () => {
-		let id = panelId("editor", "a:b:c");
-		expect(parsePanelId(id)).toEqual({ type: "editor", key: "a:b:c" });
-	});
-});
+import { describe, expect, it } from "vitest";
+
+import { panelId, parsePanelId } from "./ids.js";
+
+describe("panel ids", () => {
+	it("uses the type alone when there is no key", () => {
+		expect(panelId("explorer")).toBe("explorer");
+		expect(parsePanelId("explorer")).toEqual({ type: "explorer" });
+	});
+
+	it("joins type and key with a colon", () => {
+		expect(panelId("editor", "42")).toBe("editor:42");
+		expect(parsePanelId("editor:42")).toEqual({ type: "editor", key: "42" });
+	});
+
+	it("round-trips keys that contain colons", () => {
+		let id = panelId("editor", "a:b:c");
+		expect(parsePanelId(id)).toEqual({ type: "editor", key: "a:b:c" });
+	});
+});

package/src/mdi/ids.ts

@@ -1,18 +1,18 @@
-/**
- * The panel id scheme: `type` for documents without a key (singletons) and `type:key`
- * otherwise. Deterministic ids make "open or activate" a lookup, and join the
- * `documents` map with dockview's own panel list.
- */
-export function panelId(type: string, key?: string): string {
-	return key === undefined ? type : `${type}:${key}`;
-}
-
-export function parsePanelId(id: string): { type: string; key?: string } {
-	let separator = id.indexOf(":");
-
-	if (separator === -1) {
-		return { type: id };
-	}
-
-	return { type: id.slice(0, separator), key: id.slice(separator + 1) };
-}
+/**
+ * The panel id scheme: `type` for documents without a key (singletons) and `type:key`
+ * otherwise. Deterministic ids make "open or activate" a lookup, and join the
+ * `documents` map with dockview's own panel list.
+ */
+export function panelId(type: string, key?: string): string {
+	return key === undefined ? type : `${type}:${key}`;
+}
+
+export function parsePanelId(id: string): { type: string; key?: string } {
+	let separator = id.indexOf(":");
+
+	if (separator === -1) {
+		return { type: id };
+	}
+
+	return { type: id.slice(0, separator), key: id.slice(separator + 1) };
+}

package/src/mdi/index.ts

@@ -1,31 +1,31 @@
-export { Mdi, type MdiProps } from "./Mdi.js";
-export { MdiProvider, type MdiProviderProps, useMdi, useMdiActiveDocument, useMdiDocuments } from "./MdiContext.js";
-export { useMdiDocument } from "./MdiDocumentContext.js";
-export { MdiConfirmCloseDialog, type MdiConfirmCloseDialogProps } from "./MdiConfirmCloseDialog.js";
-export { panelId, parsePanelId } from "./ids.js";
-export { layoutSpecToLayout } from "./layoutSpec.js";
-export type {
-	MdiApi,
-	MdiCloseOptions,
-	MdiConfirmCloseResult,
-	MdiDirection,
-	MdiDocumentHandle,
-	MdiDocumentInfo,
-	MdiDocumentOptions,
-	MdiDocumentProps,
-	MdiDocumentSpec,
-	MdiDocumentState,
-	MdiDocumentType,
-	MdiDocumentTypes,
-	MdiEvents,
-	MdiGroupSpec,
-	MdiLayout,
-	MdiLayoutNode,
-	MdiLayoutSpec,
-	MdiLocked,
-	MdiOpenOptions,
-	MdiParams,
-	MdiPosition,
-	MdiRestoreResult,
-	MdiSplitSpec,
-} from "./types.js";
+export { Mdi, type MdiProps } from "./Mdi.js";
+export { MdiProvider, type MdiProviderProps, useMdi, useMdiActiveDocument, useMdiDocuments } from "./MdiContext.js";
+export { useMdiDocument } from "./MdiDocumentContext.js";
+export { MdiConfirmCloseDialog, type MdiConfirmCloseDialogProps } from "./MdiConfirmCloseDialog.js";
+export { panelId, parsePanelId } from "./ids.js";
+export { layoutSpecToLayout } from "./layoutSpec.js";
+export type {
+	MdiApi,
+	MdiCloseOptions,
+	MdiConfirmCloseResult,
+	MdiDirection,
+	MdiDocumentHandle,
+	MdiDocumentInfo,
+	MdiDocumentOptions,
+	MdiDocumentProps,
+	MdiDocumentSpec,
+	MdiDocumentState,
+	MdiDocumentType,
+	MdiDocumentTypes,
+	MdiEvents,
+	MdiGroupSpec,
+	MdiLayout,
+	MdiLayoutNode,
+	MdiLayoutSpec,
+	MdiLocked,
+	MdiOpenOptions,
+	MdiParams,
+	MdiPosition,
+	MdiRestoreResult,
+	MdiSplitSpec,
+} from "./types.js";

package/src/mdi/layoutRestore.test.ts

@@ -1,156 +1,156 @@
-import { describe, expect, it } from "vitest";
-
-import { dockPopoutGroups, missingRequiredDocuments, placementFor, pruneLayout } from "./layoutRestore.js";
-import { layoutSpecToLayout, type MdiGroupState } from "./layoutSpec.js";
-import { testSpec, testTypes } from "./testTypes.js";
-import type { MdiLayout } from "./types.js";
-
-type Node = { type: string; size?: number; visible?: boolean; data: Node[] | MdiGroupState };
-
-function leaves(node: Node): MdiGroupState[] {
-	return node.type === "leaf" ? [node.data as MdiGroupState] : (node.data as Node[]).flatMap(leaves);
-}
-
-function baseLayout(): MdiLayout {
-	return layoutSpecToLayout(testSpec, testTypes, 1);
-}
-
-describe("dockPopoutGroups", () => {
-	it("returns the layout untouched when nothing is popped out", () => {
-		let layout = baseLayout();
-		let result = dockPopoutGroups(layout.dockview);
-
-		expect(result.grid).toEqual(layout.dockview.grid);
-		expect(result.popoutGroups).toBeUndefined();
-	});
-
-	it("puts a popped-out group back into its hidden reference group", () => {
-		let layout = baseLayout();
-		let root = layout.dockview.grid.root as Node;
-		let explorerLeaf = (root.data as Node[])[0]!;
-		explorerLeaf.visible = false;
-		(explorerLeaf.data as MdiGroupState).views = [];
-		delete (explorerLeaf.data as MdiGroupState).activeView;
-		layout.dockview.popoutGroups = [
-			{
-				data: { id: "popout-1", views: ["explorer"], activeView: "explorer" },
-				gridReferenceGroup: "mdi-g1",
-				position: null,
-			},
-		];
-
-		let result = dockPopoutGroups(layout.dockview);
-		let restored = (result.grid.root.data as Node[])[0]!;
-
-		expect(result.popoutGroups).toBeUndefined();
-		expect(restored.visible).toBeUndefined();
-		expect((restored.data as MdiGroupState).views).toEqual(["explorer"]);
-		expect((restored.data as MdiGroupState).activeView).toBe("explorer");
-	});
-
-	it("appends a popped-out group to the root when it has no reference group", () => {
-		let layout = baseLayout();
-		layout.dockview.popoutGroups = [
-			{ data: { id: "mdi-g1", views: ["settings"], activeView: "settings" }, position: null },
-		];
-		layout.dockview.floatingGroups = [
-			{ data: { id: "float", views: ["editor:c"] }, position: { top: 0, left: 0, width: 100, height: 100 } },
-		];
-
-		let result = dockPopoutGroups(layout.dockview);
-		let ids = leaves(result.grid.root as Node).map((group) => group.id);
-
-		expect(ids).toEqual(["mdi-g1", "mdi-g2", "mdi-g3", "mdi-g1-docked", "float"]);
-		expect(result.floatingGroups).toBeUndefined();
-	});
-});
-
-describe("pruneLayout", () => {
-	it("drops documents, panels, empty groups and collapses single-leaf branches", () => {
-		let layout = baseLayout();
-		let pruned = pruneLayout(layout, new Set(["explorer", "editor:a"]));
-
-		expect(Object.keys(pruned.documents)).toEqual(["explorer", "editor:a"]);
-		expect(Object.keys(pruned.dockview.panels)).toEqual(["explorer", "editor:a"]);
-
-		let root = pruned.dockview.grid.root as Node;
-		let children = root.data as Node[];
-		expect(children).toHaveLength(2);
-		// The vertical branch lost its properties group and now wraps a single leaf, so it collapses.
-		expect(children[1]!.type).toBe("leaf");
-		expect(children[1]!.size).toBe(750);
-		expect((children[1]!.data as MdiGroupState).views).toEqual(["editor:a"]);
-		expect((children[1]!.data as MdiGroupState).activeView).toBe("editor:a");
-	});
-
-	it("clears the active group when it was removed", () => {
-		let layout = baseLayout();
-		let pruned = pruneLayout(layout, new Set(["editor:a"]));
-
-		expect(pruned.dockview.activeGroup).toBeUndefined();
-	});
-
-	it("keeps the active group when it survives", () => {
-		let layout = baseLayout();
-		let pruned = pruneLayout(layout, new Set(["explorer"]));
-
-		expect(pruned.dockview.activeGroup).toBe("mdi-g1");
-	});
-
-	it("returns an empty root when nothing is kept", () => {
-		let pruned = pruneLayout(baseLayout(), new Set());
-
-		expect(pruned.documents).toEqual({});
-		expect(pruned.dockview.grid.root).toEqual({ type: "branch", size: 1000, data: [] });
-	});
-});
-
-describe("missingRequiredDocuments", () => {
-	it("lists unclosable spec documents that are not in the layout", () => {
-		let layout = pruneLayout(baseLayout(), new Set(["editor:a", "editor:b"]));
-		let missing = missingRequiredDocuments(testSpec, testTypes, layout);
-
-		expect(missing.map((document) => document.id)).toEqual(["explorer", "properties"]);
-	});
-
-	it("is empty for the default layout", () => {
-		expect(missingRequiredDocuments(testSpec, testTypes, baseLayout())).toEqual([]);
-	});
-});
-
-describe("placementFor", () => {
-	it("places a document with an open sibling tab in that group", () => {
-		let existing = new Set(["explorer", "editor:b"]);
-		expect(placementFor(testSpec, "editor:a", testTypes, existing).position).toEqual({
-			referencePanel: "editor:b",
-			direction: "within",
-		});
-	});
-
-	it("places a document next to the nearest sibling subtree", () => {
-		let existing = new Set(["explorer", "editor:a"]);
-		let { position, groupSpec } = placementFor(testSpec, "properties", testTypes, existing);
-
-		expect(position).toEqual({ referencePanel: "editor:a", direction: "below" });
-		expect(groupSpec?.tabs[0]?.type).toBe("properties");
-	});
-
-	it("walks up to the parent split when the sibling subtree is empty", () => {
-		let existing = new Set(["explorer"]);
-		expect(placementFor(testSpec, "properties", testTypes, existing).position).toEqual({
-			referencePanel: "explorer",
-			direction: "right",
-		});
-		expect(placementFor(testSpec, "explorer", testTypes, new Set(["editor:a"])).position).toEqual({
-			referencePanel: "editor:a",
-			direction: "left",
-		});
-	});
-
-	it("falls back to the right edge", () => {
-		expect(placementFor(testSpec, "explorer", testTypes, new Set()).position).toEqual({ direction: "right" });
-		expect(placementFor(testSpec, "settings", testTypes, new Set(["explorer"])).position).toEqual({
-			direction: "right",
-		});
-	});
-});
+import { describe, expect, it } from "vitest";
+
+import { dockPopoutGroups, missingRequiredDocuments, placementFor, pruneLayout } from "./layoutRestore.js";
+import { layoutSpecToLayout, type MdiGroupState } from "./layoutSpec.js";
+import { testSpec, testTypes } from "./testTypes.js";
+import type { MdiLayout } from "./types.js";
+
+type Node = { type: string; size?: number; visible?: boolean; data: Node[] | MdiGroupState };
+
+function leaves(node: Node): MdiGroupState[] {
+	return node.type === "leaf" ? [node.data as MdiGroupState] : (node.data as Node[]).flatMap(leaves);
+}
+
+function baseLayout(): MdiLayout {
+	return layoutSpecToLayout(testSpec, testTypes, 1);
+}
+
+describe("dockPopoutGroups", () => {
+	it("returns the layout untouched when nothing is popped out", () => {
+		let layout = baseLayout();
+		let result = dockPopoutGroups(layout.dockview);
+
+		expect(result.grid).toEqual(layout.dockview.grid);
+		expect(result.popoutGroups).toBeUndefined();
+	});
+
+	it("puts a popped-out group back into its hidden reference group", () => {
+		let layout = baseLayout();
+		let root = layout.dockview.grid.root as Node;
+		let explorerLeaf = (root.data as Node[])[0]!;
+		explorerLeaf.visible = false;
+		(explorerLeaf.data as MdiGroupState).views = [];
+		delete (explorerLeaf.data as MdiGroupState).activeView;
+		layout.dockview.popoutGroups = [
+			{
+				data: { id: "popout-1", views: ["explorer"], activeView: "explorer" },
+				gridReferenceGroup: "mdi-g1",
+				position: null,
+			},
+		];
+
+		let result = dockPopoutGroups(layout.dockview);
+		let restored = (result.grid.root.data as Node[])[0]!;
+
+		expect(result.popoutGroups).toBeUndefined();
+		expect(restored.visible).toBeUndefined();
+		expect((restored.data as MdiGroupState).views).toEqual(["explorer"]);
+		expect((restored.data as MdiGroupState).activeView).toBe("explorer");
+	});
+
+	it("appends a popped-out group to the root when it has no reference group", () => {
+		let layout = baseLayout();
+		layout.dockview.popoutGroups = [
+			{ data: { id: "mdi-g1", views: ["settings"], activeView: "settings" }, position: null },
+		];
+		layout.dockview.floatingGroups = [
+			{ data: { id: "float", views: ["editor:c"] }, position: { top: 0, left: 0, width: 100, height: 100 } },
+		];
+
+		let result = dockPopoutGroups(layout.dockview);
+		let ids = leaves(result.grid.root as Node).map((group) => group.id);
+
+		expect(ids).toEqual(["mdi-g1", "mdi-g2", "mdi-g3", "mdi-g1-docked", "float"]);
+		expect(result.floatingGroups).toBeUndefined();
+	});
+});
+
+describe("pruneLayout", () => {
+	it("drops documents, panels, empty groups and collapses single-leaf branches", () => {
+		let layout = baseLayout();
+		let pruned = pruneLayout(layout, new Set(["explorer", "editor:a"]));
+
+		expect(Object.keys(pruned.documents)).toEqual(["explorer", "editor:a"]);
+		expect(Object.keys(pruned.dockview.panels)).toEqual(["explorer", "editor:a"]);
+
+		let root = pruned.dockview.grid.root as Node;
+		let children = root.data as Node[];
+		expect(children).toHaveLength(2);
+		// The vertical branch lost its properties group and now wraps a single leaf, so it collapses.
+		expect(children[1]!.type).toBe("leaf");
+		expect(children[1]!.size).toBe(750);
+		expect((children[1]!.data as MdiGroupState).views).toEqual(["editor:a"]);
+		expect((children[1]!.data as MdiGroupState).activeView).toBe("editor:a");
+	});
+
+	it("clears the active group when it was removed", () => {
+		let layout = baseLayout();
+		let pruned = pruneLayout(layout, new Set(["editor:a"]));
+
+		expect(pruned.dockview.activeGroup).toBeUndefined();
+	});
+
+	it("keeps the active group when it survives", () => {
+		let layout = baseLayout();
+		let pruned = pruneLayout(layout, new Set(["explorer"]));
+
+		expect(pruned.dockview.activeGroup).toBe("mdi-g1");
+	});
+
+	it("returns an empty root when nothing is kept", () => {
+		let pruned = pruneLayout(baseLayout(), new Set());
+
+		expect(pruned.documents).toEqual({});
+		expect(pruned.dockview.grid.root).toEqual({ type: "branch", size: 1000, data: [] });
+	});
+});
+
+describe("missingRequiredDocuments", () => {
+	it("lists unclosable spec documents that are not in the layout", () => {
+		let layout = pruneLayout(baseLayout(), new Set(["editor:a", "editor:b"]));
+		let missing = missingRequiredDocuments(testSpec, testTypes, layout);
+
+		expect(missing.map((document) => document.id)).toEqual(["explorer", "properties"]);
+	});
+
+	it("is empty for the default layout", () => {
+		expect(missingRequiredDocuments(testSpec, testTypes, baseLayout())).toEqual([]);
+	});
+});
+
+describe("placementFor", () => {
+	it("places a document with an open sibling tab in that group", () => {
+		let existing = new Set(["explorer", "editor:b"]);
+		expect(placementFor(testSpec, "editor:a", testTypes, existing).position).toEqual({
+			referencePanel: "editor:b",
+			direction: "within",
+		});
+	});
+
+	it("places a document next to the nearest sibling subtree", () => {
+		let existing = new Set(["explorer", "editor:a"]);
+		let { position, groupSpec } = placementFor(testSpec, "properties", testTypes, existing);
+
+		expect(position).toEqual({ referencePanel: "editor:a", direction: "below" });
+		expect(groupSpec?.tabs[0]?.type).toBe("properties");
+	});
+
+	it("walks up to the parent split when the sibling subtree is empty", () => {
+		let existing = new Set(["explorer"]);
+		expect(placementFor(testSpec, "properties", testTypes, existing).position).toEqual({
+			referencePanel: "explorer",
+			direction: "right",
+		});
+		expect(placementFor(testSpec, "explorer", testTypes, new Set(["editor:a"])).position).toEqual({
+			referencePanel: "editor:a",
+			direction: "left",
+		});
+	});
+
+	it("falls back to the right edge", () => {
+		expect(placementFor(testSpec, "explorer", testTypes, new Set()).position).toEqual({ direction: "right" });
+		expect(placementFor(testSpec, "settings", testTypes, new Set(["explorer"])).position).toEqual({
+			direction: "right",
+		});
+	});
+});