Files
archify-vscode-ext/src/views/registryView.ts
T
root-at-skic 27d4794ff8 0.9.2: Source view, schema checks without the YAML extension
Every Archify page can show its file's YAML in place. Diagrams get
Diagram | Graph | Source (Graph only inside a model), main.archify
Model | Graph | Source, registry and decision pages View | Source, and the
Graph page a Source segment. 2D | 3D moves left of that switch and hides
while Source shows.

The YAML opens in a CodeMirror editor inside the page (dist/source.js,
loaded on first use), themed with the page's colours. Edits go to the VS
Code document as WorkspaceEdits; outside changes come back to the page.
Undo and redo are the editor's own, since VS Code sends ⌘Z in a focused
webview to the webview; save and find stay VS Code's. Problems come from
the host only (what the Problems panel holds for the file) and are
counted on the Source segment; completion and hover come from the schema,
folded into one draft-07 document per diagram type.

The host now checks .archify files against the extension's schema with
ajv on the YAML as written, before archify validate, and checks
.archify-registry files against the registry schema for the first time.
Registry and decision pages become text editor providers. While Source
shows, new renders wait and appear when the picture comes back.

Show Source switches the page to Source; Open in Text Editor (the editor
title button) opens the text beside it, as Show Source did. The decision
schema is no longer given to the YAML extension. Fixed: YAML errors in
registry and decision files were reported on line 1; "Webview is
disposed" when a diagram closed mid-render; the model heading under the
toolbar in narrow editors.
2026-10-27 23:46:05 +02:00

173 lines
7.0 KiB
TypeScript

import path from 'node:path';
import * as vscode from 'vscode';
import { isMainFile, isRegistryFile, parseRegistry } from '../model/format';
import { RegistryPanel, registryPanelFromIndex, registryPanelStandalone } from '../model/panel';
import { ModelService } from '../model/service';
import { readText } from '../util/files';
import { log } from '../util/log';
import { sourceScriptUri } from '../webview/viewer3d';
import { SourceSession } from './sourceSession';
import { handleWebviewMessage, WebviewMessage } from '../webview/messages';
import { makeNonce, registryPage } from '../webview/page';
import { DECISION_VIEW_TYPE, DIAGRAM_EDITOR_VIEW_TYPE, REGISTRY_VIEW_TYPE } from './viewTypes';
export { REGISTRY_VIEW_TYPE };
class RegistryView implements vscode.Disposable {
private seq = 0;
private timer: NodeJS.Timeout | undefined;
private last: string | undefined;
root: vscode.Uri | undefined;
private readonly disposables: vscode.Disposable[] = [];
/** The Source view; while it shows, a new page waits in `heldHtml`. */
readonly source: SourceSession;
private heldHtml: string | undefined;
constructor(
private readonly context: vscode.ExtensionContext,
private readonly models: ModelService,
readonly panel: vscode.WebviewPanel,
readonly uri: vscode.Uri,
) {
this.source = new SourceSession(context, panel, uri, 'registry', (shown) => {
if (!shown && this.heldHtml !== undefined) {
const html = this.heldHtml;
this.heldHtml = undefined;
this.panel.webview.html = html;
}
});
this.disposables.push(
this.source,
panel.webview.onDidReceiveMessage((message: WebviewMessage) => {
if (this.source.handle(message)) return;
if (message.type === 'openDiagram') return void this.openInModel(message.path, DIAGRAM_EDITOR_VIEW_TYPE);
if (message.type === 'openRegistry') return void this.openRegistryLine(message.file, message.line);
if (message.type === 'openDecision') return void this.openInModel(message.file, DECISION_VIEW_TYPE);
void handleWebviewMessage(message, this.uri, this.panel);
}),
);
void this.update();
}
private async openInModel(relativePath: string, viewType: string): Promise<void> {
if (!this.root) return;
const target = vscode.Uri.joinPath(this.root, ...relativePath.split('/'));
try {
await vscode.workspace.fs.stat(target);
} catch {
vscode.window.showWarningMessage(`Archify: ${relativePath} does not exist in this model.`);
return;
}
await vscode.commands.executeCommand('vscode.openWith', target, viewType, vscode.ViewColumn.Active);
}
private async openRegistryLine(file: string, line?: number): Promise<void> {
const target = this.root ? vscode.Uri.joinPath(this.root, ...file.split('/')) : this.uri;
const column = this.panel.viewColumn === vscode.ViewColumn.One ? vscode.ViewColumn.Two : vscode.ViewColumn.One;
const at = Math.max(line ?? 0, 0);
await vscode.window.showTextDocument(target, { viewColumn: column, selection: new vscode.Range(at, 0, at, 0) });
}
scheduleUpdate(): void {
clearTimeout(this.timer);
this.timer = setTimeout(() => void this.update(), 300);
}
async update(): Promise<void> {
clearTimeout(this.timer);
const seq = ++this.seq;
let registry: RegistryPanel;
try {
this.root = await this.models.rootOf(this.uri);
if (this.root) {
const rel = path.relative(this.root.fsPath, this.uri.fsPath).split(path.sep).join('/');
registry = registryPanelFromIndex(await this.models.index(this.root), rel);
} else {
const name = path.basename(this.uri.path);
registry = registryPanelStandalone(name, parseRegistry(await readText(this.uri), name));
}
} catch (error) {
log().warn(`Registry view failed for ${this.uri.fsPath}: ${error instanceof Error ? error.message : String(error)}`);
return;
}
if (seq !== this.seq) return;
const fingerprint = JSON.stringify(registry);
if (fingerprint === this.last) return;
this.last = fingerprint;
const html = registryPage(
{ cspSource: this.panel.webview.cspSource, nonce: makeNonce(), source: { scriptUri: sourceScriptUri(this.panel.webview, this.context.extensionUri), left: 'View' } },
registry,
);
if (this.source.shown) this.heldHtml = html;
else this.panel.webview.html = html;
}
dispose(): void {
clearTimeout(this.timer);
for (const d of this.disposables.splice(0)) d.dispose();
}
}
export class RegistryViewProvider implements vscode.CustomTextEditorProvider, vscode.Disposable {
private readonly views = new Set<RegistryView>();
private active: RegistryView | undefined;
private readonly disposables: vscode.Disposable[];
constructor(
private readonly context: vscode.ExtensionContext,
private readonly models: ModelService,
) {
this.disposables = [
vscode.window.registerCustomEditorProvider(REGISTRY_VIEW_TYPE, this, {
webviewOptions: { retainContextWhenHidden: true, enableFindWidget: true },
supportsMultipleEditorsPerDocument: true,
}),
// Any change in the model (a diagram starts or stops using an element, a registry edit) refreshes the page.
models.onDidChangeModel(({ root }) => {
for (const view of this.views) if (view.root?.toString() === root.toString()) view.scheduleUpdate();
}),
vscode.workspace.onDidChangeTextDocument((event) => {
if (!isRegistryFile(event.document.fileName) && !isMainFile(event.document.fileName)) return;
// Outside a model the model service stays quiet; refresh the page of the edited file itself.
for (const view of this.views) if (!view.root && view.uri.toString() === event.document.uri.toString()) view.scheduleUpdate();
}),
];
}
/** File shown in the focused registry view, if any. */
get activeUri(): vscode.Uri | undefined {
return this.active?.uri;
}
/** The view of the focused page, if any. */
get activeView(): { source: SourceSession } | undefined {
return this.active;
}
// A text editor provider: the page edits the file's own TextDocument (in
// its Source view), so dirty state, save and undo are VS Code's.
async resolveCustomTextEditor(document: vscode.TextDocument, panel: vscode.WebviewPanel): Promise<void> {
panel.webview.options = { enableScripts: true };
const view = new RegistryView(this.context, this.models, panel, document.uri);
this.views.add(view);
const onViewState = () => {
if (panel.active) this.active = view;
else if (this.active === view) this.active = undefined;
if (panel.active) void vscode.commands.executeCommand('setContext', 'archify.inModel', Boolean(view.root));
};
panel.onDidChangeViewState(onViewState);
onViewState();
panel.onDidDispose(() => {
this.views.delete(view);
if (this.active === view) this.active = undefined;
view.dispose();
});
}
dispose(): void {
for (const view of this.views) view.dispose();
this.views.clear();
for (const d of this.disposables.splice(0)) d.dispose();
}
}