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.
This commit is contained in:
root-at-skic committed
1 parent
5bcd34b839
commit
27d4794ff8
32 files changed
+2486
-127
No files matched your search
@@ -0,0 +1,195 @@
|
||||
import type { ArchifyHost } from '../host';
|
||||
import { TextChange, minimalChange } from '../../util/textDiff';
|
||||
import { SourceDiagnostic, SourceEditor } from './editor';
|
||||
|
||||
/**
|
||||
* The Source view of an Archify page: the file's YAML in an editor, in the
|
||||
* page under its toolbar and heading, in place of the picture. The bridge
|
||||
* script (page.ts) loads this file the first time Source is chosen and calls
|
||||
* window.__archifySource.open(); the document itself stays in the host, which
|
||||
* applies every edit to it and sends back problems and outside changes.
|
||||
*/
|
||||
|
||||
/** Host → page. */
|
||||
type HostMessage =
|
||||
| { type: 'sourceText'; text: string; schema?: { key: string; schema: object } | null; checks: string }
|
||||
| { type: 'sourceDiagnostics'; items: SourceDiagnostic[]; count: number }
|
||||
| { type: 'sourceSchema'; schema: { key: string; schema: object } | null }
|
||||
| { type: 'sourceDirty'; dirty: boolean };
|
||||
|
||||
const STYLE = `
|
||||
html.archify-source-on .container > :not(.header):not(#archify-source),
|
||||
html.archify-source-on body > :not(.toolbar):not(.container):not(.archify-model-head):not(.archify-model-switch-row):not(#archify-source):not(script):not(style):not(.archify-modal-backdrop),
|
||||
html.archify-source-on #btn-3d,
|
||||
html.archify-source-on .archify-vscode-notice { display: none !important; }
|
||||
.archify-source { display: flex; flex-direction: column; box-sizing: border-box; min-height: 260px; margin: 0.75rem 0 1rem; }
|
||||
body > .archify-source { max-width: 1400px; margin: 0.75rem auto 1rem; padding: 0 2rem; }
|
||||
.archify-source-editor { flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--panel-border, var(--vscode-editorWidget-border, rgba(128,128,128,.35))); border-radius: 0.75rem;
|
||||
background: color-mix(in srgb, var(--panel, var(--vscode-editor-background)) 70%, transparent); }
|
||||
.archify-source-editor .cm-editor { height: 100%; }
|
||||
.archify-source-strip { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; padding: 0.45rem 0.25rem 0; font-size: 0.75rem;
|
||||
color: var(--text-muted, var(--vscode-descriptionForeground)); font-family: var(--vscode-font-family, system-ui, sans-serif); }
|
||||
.archify-source-strip .is-ok { color: var(--backend-stroke, var(--vscode-testing-iconPassed, #34d399)); }
|
||||
.archify-source-strip .is-bad { color: var(--security-stroke, var(--vscode-editorError-foreground, #fb7185)); }
|
||||
.archify-source-strip button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
|
||||
.archify-source-strip button:hover { text-decoration: underline; }
|
||||
.archify-source-strip .archify-source-hint { margin-left: auto; }
|
||||
.archify-source-strip kbd { font: inherit; font-size: 0.6875rem; padding: 0 0.3rem; border: 1px solid currentColor; border-radius: 0.25rem; opacity: 0.8; }
|
||||
`;
|
||||
|
||||
const MAC = /Mac|iPhone|iPad/.test(navigator.platform);
|
||||
|
||||
function isUndoRedo(event: KeyboardEvent): boolean {
|
||||
const key = event.key.toLowerCase();
|
||||
return (event.metaKey || event.ctrlKey) && !event.altKey && (key === 'z' || key === 'y');
|
||||
}
|
||||
|
||||
class SourcePane {
|
||||
private root: HTMLElement | undefined;
|
||||
private editorHost!: HTMLElement;
|
||||
private stateEl!: HTMLElement;
|
||||
private countEl!: HTMLButtonElement;
|
||||
private checksEl!: HTMLElement;
|
||||
private editor: SourceEditor | undefined;
|
||||
/** The text the host last knew the page to have; edits are sent against it. */
|
||||
private text = '';
|
||||
private diagnostics: SourceDiagnostic[] = [];
|
||||
private shown = false;
|
||||
|
||||
constructor(private readonly host: ArchifyHost) {
|
||||
window.addEventListener('message', (event) => this.onMessage(event.data as HostMessage));
|
||||
window.addEventListener('resize', () => this.fit());
|
||||
}
|
||||
|
||||
open(): void {
|
||||
this.build();
|
||||
this.shown = true;
|
||||
document.documentElement.classList.add('archify-source-on');
|
||||
window.dispatchEvent(new CustomEvent('archify-source', { detail: { on: true } }));
|
||||
this.fit();
|
||||
this.host.post({ type: 'sourceOpen' });
|
||||
this.editor?.focus();
|
||||
}
|
||||
|
||||
close(): void {
|
||||
this.shown = false;
|
||||
document.documentElement.classList.remove('archify-source-on');
|
||||
window.dispatchEvent(new CustomEvent('archify-source', { detail: { on: false } }));
|
||||
this.host.post({ type: 'sourceClose' });
|
||||
}
|
||||
|
||||
private build(): void {
|
||||
if (this.root) return;
|
||||
const style = document.createElement('style');
|
||||
style.textContent = STYLE;
|
||||
document.head.appendChild(style);
|
||||
|
||||
const root = document.createElement('section');
|
||||
root.id = 'archify-source';
|
||||
root.className = 'archify-source';
|
||||
root.setAttribute('aria-label', 'Source');
|
||||
this.editorHost = document.createElement('div');
|
||||
this.editorHost.className = 'archify-source-editor';
|
||||
const strip = document.createElement('div');
|
||||
strip.className = 'archify-source-strip';
|
||||
this.stateEl = document.createElement('span');
|
||||
this.countEl = document.createElement('button');
|
||||
this.countEl.type = 'button';
|
||||
this.countEl.title = 'Go to the next problem';
|
||||
this.countEl.addEventListener('click', () => this.editor?.nextProblem());
|
||||
this.checksEl = document.createElement('span');
|
||||
const hint = document.createElement('span');
|
||||
hint.className = 'archify-source-hint';
|
||||
hint.innerHTML = 'Completion as you type, or <kbd>Ctrl</kbd>+<kbd>Space</kbd> · hover a key for its description';
|
||||
strip.append(this.stateEl, this.countEl, this.checksEl, hint);
|
||||
root.append(this.editorHost, strip);
|
||||
this.renderState(false);
|
||||
this.renderCount();
|
||||
|
||||
// Archify's page has single-key shortcuts; typing here must not reach
|
||||
// them. Keys with ⌘ or Ctrl go on to VS Code (save, find, quick open),
|
||||
// except undo and redo, which the editor has handled already.
|
||||
for (const type of ['keydown', 'keypress', 'keyup'] as const) {
|
||||
root.addEventListener(type, (event) => {
|
||||
if (!event.metaKey && !event.ctrlKey) event.stopPropagation();
|
||||
else if (isUndoRedo(event)) event.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
const header = document.querySelector('.container > .header');
|
||||
const modelHead = document.querySelector('.archify-model-head');
|
||||
if (header?.parentElement) header.parentElement.insertBefore(root, header.nextSibling);
|
||||
else if (modelHead?.parentElement) modelHead.parentElement.insertBefore(root, modelHead.nextSibling);
|
||||
else document.body.appendChild(root);
|
||||
this.root = root;
|
||||
}
|
||||
|
||||
/** The editor fills the window below where it starts. */
|
||||
private fit(): void {
|
||||
if (!this.root || !this.shown) return;
|
||||
const top = this.root.getBoundingClientRect().top;
|
||||
this.root.style.height = `${Math.max(260, window.innerHeight - Math.max(top, 0) - 12)}px`;
|
||||
this.editor?.requestMeasure();
|
||||
}
|
||||
|
||||
private onMessage(message: HostMessage): void {
|
||||
if (!message || typeof message !== 'object') return;
|
||||
switch (message.type) {
|
||||
case 'sourceText':
|
||||
this.build();
|
||||
if (!this.editor) {
|
||||
this.text = message.text;
|
||||
this.editor = new SourceEditor(this.editorHost, message.text, (changes, text) => this.onEdit(changes, text));
|
||||
this.editor.setDiagnostics(this.diagnostics);
|
||||
this.fit();
|
||||
if (this.shown) this.editor.focus();
|
||||
} else {
|
||||
const change = minimalChange(this.editor.text, message.text);
|
||||
if (change) this.editor.applyFromHost(change);
|
||||
this.text = message.text;
|
||||
}
|
||||
if (message.schema !== undefined) this.editor.setSchema(message.schema?.key, message.schema?.schema);
|
||||
this.checksEl.textContent = message.checks;
|
||||
return;
|
||||
case 'sourceDiagnostics':
|
||||
this.diagnostics = message.items;
|
||||
this.editor?.setDiagnostics(message.items);
|
||||
this.renderCount();
|
||||
return;
|
||||
case 'sourceSchema':
|
||||
this.editor?.setSchema(message.schema?.key, message.schema?.schema);
|
||||
return;
|
||||
case 'sourceDirty':
|
||||
this.renderState(message.dirty);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
private onEdit(changes: TextChange[], text: string): void {
|
||||
const base = this.text;
|
||||
this.text = text;
|
||||
this.host.post({ type: 'sourceEdit', base, text, changes });
|
||||
}
|
||||
|
||||
private renderState(dirty: boolean): void {
|
||||
if (!this.stateEl) return;
|
||||
this.stateEl.innerHTML = dirty ? `● Unsaved · <kbd>${MAC ? '⌘' : 'Ctrl+'}S</kbd> saves` : 'Saved';
|
||||
}
|
||||
|
||||
private renderCount(): void {
|
||||
if (!this.countEl) return;
|
||||
const problems = this.diagnostics.filter((d) => d.severity !== 'info').length;
|
||||
this.countEl.className = problems ? 'is-bad' : 'is-ok';
|
||||
this.countEl.textContent = problems ? `✕ ${problems} problem${problems === 1 ? '' : 's'}` : '✓ No problems';
|
||||
this.countEl.disabled = !problems;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
__archifySource?: { open(): void; close(): void };
|
||||
}
|
||||
}
|
||||
|
||||
const host = window.__archifyHost;
|
||||
if (host) window.__archifySource = new SourcePane(host);
|
||||
Reference in new issue
Block a user