Models: main.archify, registries, refs, links and the model page; 0.7.0
A folder with main.archify at its top is a model, a set of diagrams that belong together. Opening main.archify shows the model page: the model's name and description, its own overview diagram when the file has one, the diagrams grouped by folder (click to open), and the registry with where each element is used. The page is built by traversing the folder tree and refreshes when files change. *.archify-registry files define shared elements once; diagrams draw them with `ref: <id>` plus position and may override label, sublabel and tag. References are resolved before Archify runs, so Archify is unchanged. Hover, go-to-definition and completion on ref; unknown names, forbidden overrides, duplicate ids and broken registries in Problems; registry edits re-render open diagrams. `diagram:` links on elements and components open the linked diagram on double-click. New command Archify | Open Model, a Model template for New Diagram…, editor schemas for the new keys and for registries, docs/model.md and examples/online-shop. Single diagrams behave exactly as before.
This commit is contained in:
+143
-1
@@ -14,8 +14,14 @@ export interface PageOptions {
|
||||
notice?: { text: string; kind: 'info' | 'warning' | 'error' };
|
||||
/** The 3D viewer script (a webview URI), added to Archify pages. */
|
||||
viewer3d?: { scriptUri: string; defaultView: '2d' | '3d' };
|
||||
/** Node id → diagram path (relative to the model root); double-click opens it. */
|
||||
links?: Record<string, string>;
|
||||
/** The model page: metadata above the diagram, the diagram list and registry below. */
|
||||
model?: ModelPanel;
|
||||
}
|
||||
|
||||
import type { ModelPanel } from '../model/panel';
|
||||
|
||||
export function makeNonce(): string {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
let nonce = '';
|
||||
@@ -66,6 +72,8 @@ function bridgeScript(options: PageOptions): string {
|
||||
state: options.state,
|
||||
notice: options.notice,
|
||||
defaultView: options.viewer3d?.defaultView,
|
||||
links: options.links ?? {},
|
||||
model: options.model,
|
||||
};
|
||||
return `(function () {
|
||||
var config = ${scriptJson(config)};
|
||||
@@ -162,10 +170,98 @@ function bridgeScript(options: PageOptions): string {
|
||||
(document.body || document.documentElement).appendChild(bar);
|
||||
}
|
||||
|
||||
// A node that links to another diagram opens it on double-click.
|
||||
document.addEventListener('dblclick', function (event) {
|
||||
var target = event.target;
|
||||
var node = target && target.closest ? target.closest('[data-node-id]') : null;
|
||||
if (!node) return;
|
||||
var id = node.getAttribute('data-node-id');
|
||||
if (id && config.links[id]) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
post({ type: 'openDiagram', path: config.links[id] });
|
||||
}
|
||||
}, true);
|
||||
|
||||
function el(tag, className, text) {
|
||||
var node = document.createElement(tag);
|
||||
if (className) node.className = className;
|
||||
if (text !== undefined) node.textContent = text;
|
||||
return node;
|
||||
}
|
||||
|
||||
// The model page: metadata first, the diagram (if any) where Archify put
|
||||
// it, then the diagrams of the model and the registry.
|
||||
function renderModel(model) {
|
||||
if (!model) return;
|
||||
var anchor = document.querySelector('.container');
|
||||
var head = el('section', 'archify-model archify-model-head');
|
||||
head.appendChild(el('div', 'archify-model-kicker', 'Model' + (model.meta.id ? ' · ' + model.meta.id : '')));
|
||||
head.appendChild(el('h1', 'archify-model-name', model.meta.name || model.meta.id || 'Untitled model'));
|
||||
if (model.meta.description) head.appendChild(el('p', 'archify-model-description', model.meta.description.trim()));
|
||||
if (model.nested.length) head.appendChild(el('p', 'archify-model-problem', 'Nested main.archify files are not supported and were ignored: ' + model.nested.join(', ')));
|
||||
model.problems.forEach(function (problem) { head.appendChild(el('p', 'archify-model-problem', problem)); });
|
||||
if (anchor && anchor.parentNode) anchor.parentNode.insertBefore(head, anchor); else document.body.appendChild(head);
|
||||
|
||||
var body = el('section', 'archify-model archify-model-body');
|
||||
var count = model.groups.reduce(function (n, g) { return n + g.diagrams.length; }, 0);
|
||||
body.appendChild(el('h2', 'archify-model-title', 'Diagrams' + (count ? ' · ' + count : '')));
|
||||
if (!count) body.appendChild(el('p', 'archify-model-empty', 'No diagrams yet. Add .archify files next to main.archify or in subfolders.'));
|
||||
model.groups.forEach(function (group) {
|
||||
if (group.group) body.appendChild(el('h3', 'archify-model-group', group.group));
|
||||
var list = el('ul', 'archify-model-list');
|
||||
group.diagrams.forEach(function (diagram) {
|
||||
var item = el('li', 'archify-model-item' + (diagram.parseError ? ' is-broken' : ''));
|
||||
var button = el('button', 'archify-model-open');
|
||||
button.type = 'button';
|
||||
button.title = diagram.path;
|
||||
button.appendChild(el('span', 'archify-model-item-title', diagram.title || diagram.path.split('/').pop()));
|
||||
button.appendChild(el('span', 'archify-model-item-meta', diagram.parseError ? 'does not parse: ' + diagram.parseError : (diagram.kind || 'diagram') + ' · ' + diagram.path));
|
||||
button.addEventListener('click', function () { post({ type: 'openDiagram', path: diagram.path }); });
|
||||
item.appendChild(button);
|
||||
list.appendChild(item);
|
||||
});
|
||||
body.appendChild(list);
|
||||
});
|
||||
if (model.registry.length) {
|
||||
body.appendChild(el('h2', 'archify-model-title', 'Registry · ' + model.registry.length));
|
||||
var table = el('table', 'archify-model-registry');
|
||||
model.registry.forEach(function (element) {
|
||||
var row = el('tr');
|
||||
var name = el('td', 'archify-model-element');
|
||||
name.appendChild(el('strong', '', element.label || element.id));
|
||||
name.appendChild(el('span', 'archify-model-item-meta', element.id + (element.type ? ' · ' + element.type : '')));
|
||||
row.appendChild(name);
|
||||
row.appendChild(el('td', 'archify-model-element-description', element.description || ''));
|
||||
var used = el('td', 'archify-model-used');
|
||||
if (element.usedIn.length) {
|
||||
element.usedIn.forEach(function (path) {
|
||||
var link = el('button', 'archify-model-used-link', path.replace(/\.archify$/, ''));
|
||||
link.type = 'button';
|
||||
link.title = path;
|
||||
link.addEventListener('click', function () { post({ type: 'openDiagram', path: path }); });
|
||||
used.appendChild(link);
|
||||
});
|
||||
} else used.appendChild(el('span', 'archify-model-item-meta', 'not used yet'));
|
||||
row.appendChild(used);
|
||||
table.appendChild(row);
|
||||
});
|
||||
body.appendChild(table);
|
||||
}
|
||||
if (anchor && anchor.parentNode) anchor.parentNode.insertBefore(body, anchor.nextSibling); else document.body.appendChild(body);
|
||||
}
|
||||
|
||||
window.addEventListener('message', function (event) {
|
||||
var message = event.data || {};
|
||||
if (message.type === 'notice') showNotice(message.notice);
|
||||
});
|
||||
if (config.model) {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function () { renderModel(config.model); });
|
||||
} else {
|
||||
renderModel(config.model);
|
||||
}
|
||||
}
|
||||
if (config.notice) {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function () { showNotice(config.notice); });
|
||||
@@ -176,6 +272,33 @@ function bridgeScript(options: PageOptions): string {
|
||||
})();`;
|
||||
}
|
||||
|
||||
const MODEL_STYLE = `
|
||||
.archify-model { --m-text: var(--text, var(--vscode-foreground)); --m-muted: var(--text-muted, var(--vscode-descriptionForeground)); --m-panel: var(--panel, var(--vscode-editorWidget-background)); --m-border: var(--panel-border, var(--vscode-editorWidget-border, rgba(128,128,128,.35))); --m-accent: var(--frontend-stroke, var(--vscode-textLink-foreground));
|
||||
max-width: 1400px; margin: 0 auto; padding: 1.25rem 2rem; color: var(--m-text); font-family: var(--vscode-font-family, system-ui, sans-serif); }
|
||||
.archify-model-head { padding-top: 1.5rem; }
|
||||
.archify-model-kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-accent); }
|
||||
.archify-model-name { margin: 0.25rem 0 0.5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.archify-model-description { margin: 0; max-width: 72ch; font-size: 0.9375rem; line-height: 1.55; color: var(--m-muted); white-space: pre-line; }
|
||||
.archify-model-problem { margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--vscode-inputValidation-errorBorder, #be1100); color: var(--m-text); font-size: 0.8125rem; }
|
||||
.archify-model-title { margin: 1.5rem 0 0.75rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
|
||||
.archify-model-group { margin: 1rem 0 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-muted); font-family: ui-monospace, Menlo, monospace; }
|
||||
.archify-model-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.5rem; }
|
||||
.archify-model-open { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; padding: 0.7rem 0.85rem; text-align: left; cursor: pointer; font: inherit; color: var(--m-text); background: var(--m-panel); border: 1px solid var(--m-border); border-radius: 0.6rem; transition: border-color 0.15s, transform 0.15s; }
|
||||
.archify-model-open:hover { border-color: var(--m-accent); transform: translateY(-1px); }
|
||||
.archify-model-open:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
|
||||
.archify-model-item.is-broken .archify-model-open { border-style: dashed; }
|
||||
.archify-model-item-title { font-weight: 600; font-size: 0.9375rem; }
|
||||
.archify-model-item-meta { font-size: 0.75rem; color: var(--m-muted); font-family: ui-monospace, Menlo, monospace; }
|
||||
.archify-model-empty { color: var(--m-muted); }
|
||||
.archify-model-registry { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
|
||||
.archify-model-registry td { padding: 0.55rem 0.6rem; border-top: 1px solid var(--m-border); vertical-align: top; }
|
||||
.archify-model-element { width: 22%; } .archify-model-element strong { display: block; }
|
||||
.archify-model-element-description { color: var(--m-muted); line-height: 1.45; }
|
||||
.archify-model-used { width: 28%; display: flex; flex-wrap: wrap; gap: 0.3rem; }
|
||||
.archify-model-used-link { font: inherit; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--m-border); background: transparent; color: var(--m-text); cursor: pointer; font-family: ui-monospace, Menlo, monospace; }
|
||||
.archify-model-used-link:hover { border-color: var(--m-accent); }
|
||||
`;
|
||||
|
||||
const NOTICE_STYLE = `
|
||||
.archify-vscode-notice {
|
||||
position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 2147483647;
|
||||
@@ -197,7 +320,7 @@ export function prepareDiagramHtml(html: string, options: PageOptions): string {
|
||||
const head =
|
||||
`<meta http-equiv="Content-Security-Policy" content="${escapeHtml(contentSecurityPolicy(options.cspSource, options.nonce))}">\n` +
|
||||
`<script nonce="${options.nonce}">${bridgeScript(options)}</script>\n` +
|
||||
`<style>${NOTICE_STYLE}</style>\n`;
|
||||
`<style>${NOTICE_STYLE}${options.model ? MODEL_STYLE : ''}</style>\n`;
|
||||
|
||||
let page = html
|
||||
// Drop any CSP the file brings along; ours is the one that applies.
|
||||
@@ -220,6 +343,25 @@ export function prepareDiagramHtml(html: string, options: PageOptions): string {
|
||||
return page;
|
||||
}
|
||||
|
||||
/** The model page for a main.archify without a diagram of its own. */
|
||||
export function modelPage(options: Pick<PageOptions, 'cspSource' | 'nonce' | 'state'>, model: ModelPanel): string {
|
||||
const bridge = bridgeScript({ cspSource: options.cspSource, nonce: options.nonce, theme: undefined, state: options.state, model, links: {} });
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="${escapeHtml(contentSecurityPolicy(options.cspSource, options.nonce))}">
|
||||
<script nonce="${options.nonce}">${bridge}</script>
|
||||
<style>
|
||||
body { margin: 0; color: var(--vscode-foreground); background: var(--vscode-editor-background); }
|
||||
${MODEL_STYLE}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
/** A small VS Code-styled page for loading and error states. */
|
||||
export function messagePage(
|
||||
options: Pick<PageOptions, 'cspSource' | 'nonce' | 'state'>,
|
||||
|
||||
Reference in New Issue
Block a user