Model page: Registry panel lists registry files, elements inside each

- one collapsible header per .archify-registry file with its element
  count and an Open button that opens the registry view; files start
  collapsed, the Registry panel open
- view types moved to views/viewTypes.ts so the diagram page can open a
  registry without a circular import
- 0.7.1
This commit is contained in:
2026-10-19 20:39:24 +03:00
parent 4382730343
commit de1a57e4c6
8 changed files with 57 additions and 22 deletions
+27 -5
View File
@@ -189,6 +189,7 @@ function bridgeScript(options: PageOptions): string {
// Collapsible panels of the model page; open/closed is kept in the webview state.
function panelStates() { return (vscode.getState() || {}).modelPanels || {}; }
function panel(key, className, title, count, defaultOpen) {
// count: a number or a short text such as "3 files".
var details = el('details', 'archify-model-panel ' + className);
var saved = panelStates()[key];
details.open = saved === undefined ? defaultOpen : saved;
@@ -446,13 +447,30 @@ function bridgeScript(options: PageOptions): string {
});
holder.appendChild(list);
});
// Registry elements as Archify info cards: the same cards a diagram shows below itself.
// Registry: one collapsible header per registry file, its elements as cards inside.
if (model.registry.length) {
var registryPanel = panel('registry', 'archify-model-registry', 'Registry', model.registry.length, false);
var files = [];
var byFile = {};
model.registry.forEach(function (element) {
if (!byFile[element.file]) { byFile[element.file] = []; files.push(element.file); }
byFile[element.file].push(element);
});
files.sort();
var registryPanel = panel('registry', 'archify-model-registry', 'Registry', files.length + (files.length === 1 ? ' file' : ' files'), true);
body.appendChild(registryPanel);
var cards = el('div', 'cards archify-model-cards');
model.registry.forEach(function (element) { cards.appendChild(elementCard(element)); });
registryPanel.appendChild(cards);
files.forEach(function (file) {
var elements = byFile[file].slice().sort(function (a, b) { return a.line - b.line; });
var filePanel = panel('registry:' + file, 'archify-model-folder archify-model-registry-file', file.replace(/\.archify-registry$/, ''), elements.length + (elements.length === 1 ? ' element' : ' elements'), false);
var open = el('button', 'archify-model-used-link archify-model-open-file', 'Open');
open.type = 'button';
open.title = 'Open ' + file;
open.addEventListener('click', function (event) { event.preventDefault(); event.stopPropagation(); post({ type: 'openRegistry', file: file, line: 0 }); });
filePanel.firstChild.appendChild(open);
var cards = el('div', 'cards archify-model-cards');
elements.forEach(function (element) { cards.appendChild(elementCard(element)); });
filePanel.appendChild(cards);
registryPanel.appendChild(filePanel);
});
}
if (anchor && anchor.parentNode) anchor.parentNode.insertBefore(body, anchor.nextSibling); else document.body.appendChild(body);
}
@@ -502,6 +520,10 @@ const MODEL_STYLE = `
.archify-model-folder > .archify-model-summary { padding: 0.55rem 0.75rem; 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-folder > .archify-model-summary:hover { color: var(--m-accent); }
.archify-model-folder > .archify-model-list { margin: 0 0.75rem; }
.archify-model-registry-file > .archify-model-summary { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; }
.archify-model-registry-file > .archify-model-cards { margin: 0.25rem 0.75rem 0; }
.archify-model-open-file { margin-left: 0.5rem; text-transform: none; letter-spacing: 0; font-family: inherit; }
.archify-model-open-file:hover { color: var(--m-accent); }
.archify-model-diagrams > .archify-model-list { margin-top: 0.25rem; }
.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; }