Add a 3D view of every diagram; organise source by job; 0.6.0

3D view: a "3D" menu beside Export switches the diagram to a three.js
scene built from the live Archify SVG. Nodes become blocks topped with
the node as Archify draws it, relationships become lit pipes along
Archify's routes, and the canvas, frames, lanes and legend form the
floor. Clicks and hover go to the SVG nodes, so focus, the Semantic
Passport and the intent trace work as in 2D; Archify's own animations
(trace, node pulse, passport/path/lens flows) are mirrored live. The
menu also offers flat or stacked levels, reset view and a top view;
Export gains "3D view" (PNG). Trackpad scrolling pans, pinch and the
mouse wheel zoom, and the zoom buttons work beyond the 2D limits.
The scene draws only when something moves. New setting
archify.defaultView.

Source: src/ is split by job (commands, views, webview, archify,
sources, language, util, viewer3d); behaviour unchanged.
This commit is contained in:
2026-10-11 00:54:00 +03:00
parent 20786f4b5a
commit 97b3b5f685
40 changed files with 2553 additions and 353 deletions
+2 -2
View File
@@ -1,8 +1,8 @@
import assert from 'node:assert/strict';
import path from 'node:path';
import { test } from 'node:test';
import { brandValueAt, loadBrandCatalog } from '../src/brands';
import { diagnosticPointer } from '../src/jsonPointer';
import { brandValueAt, loadBrandCatalog } from '../src/language/brands';
import { diagnosticPointer } from '../src/language/jsonPointer';
const root = path.resolve(__dirname, '..', '..');
const catalogFile = path.join(root, 'vendor', 'archify', 'brand-marks', 'catalog.json');
+4 -3
View File
@@ -1,7 +1,8 @@
import assert from 'node:assert/strict';
import { test } from 'node:test';
import { hasSourceEvidence, isArchifyHtml, readDiagramSource, stripSourceEvidence, typeFromFilename } from '../src/detect';
import { pointerSegments, rangeForPointer, rangeForPointerYaml, yamlSyntaxProblems } from '../src/jsonPointer';
import { pointerSegments, rangeForPointer, rangeForPointerYaml, yamlSyntaxProblems } from '../src/language/jsonPointer';
import { isArchifyHtml, readDiagramSource, typeFromFilename } from '../src/sources/detect';
import { hasSourceEvidence, stripSourceEvidence } from '../src/sources/evidence';
test('reads diagram_type from content', () => {
const source = readDiagramSource('{"schema_version":1,"diagram_type":"sequence","meta":{}}', 'plain.json');
@@ -49,7 +50,7 @@ test('json pointer ranges point at keys for containers and values for leaves', (
});
test('.archify files are diagram sources typed by their content', async () => {
const { diagramBaseName, isArchifyFile, isDiagramFileName } = await import('../src/detect');
const { diagramBaseName, isArchifyFile, isDiagramFileName } = await import('../src/sources/detect');
assert.ok(isArchifyFile('/w/My Platform.archify'));
assert.ok(isDiagramFileName('/w/x.ARCHIFY'));
assert.ok(isDiagramFileName('/w/x.workflow.json'));
+28 -2
View File
@@ -1,6 +1,6 @@
import assert from 'node:assert/strict';
import { test } from 'node:test';
import { prepareDiagramHtml } from '../src/webviewHtml';
import { prepareDiagramHtml } from '../src/webview/page';
const page = `<!DOCTYPE html><html><head>
<meta http-equiv="Content-Security-Policy" content="default-src *">
@@ -12,7 +12,7 @@ test('adds one CSP and nonces every inline script', () => {
const html = prepareDiagramHtml(page, { cspSource: 'vscode-resource:', nonce: 'N0NCE', theme: 'light' });
const csps = html.match(/Content-Security-Policy/g) ?? [];
assert.equal(csps.length, 1);
assert.match(html, /script-src (&#39;|')nonce-N0NCE/);
assert.match(html, /script-src vscode-resource: (&#39;|')nonce-N0NCE/);
const scripts = html.match(/<script\b[^>]*>/g) ?? [];
assert.equal(scripts.length, 4, 'bridge plus the three page scripts');
for (const tag of scripts) assert.match(tag, /nonce="N0NCE"/);
@@ -35,3 +35,29 @@ test('embedded config cannot close the script element', () => {
});
assert.ok(!html.includes('</script><script>alert(1)'));
});
test('adds the 3D viewer script after the page and before </head>, under the nonce', () => {
const html = prepareDiagramHtml(page, {
cspSource: 'x',
nonce: 'n',
theme: 'dark',
viewer3d: { scriptUri: 'https://file+.vscode-resource/ext/dist/viewer3d.js', defaultView: '3d' },
});
const tag = /<script nonce="n" defer src="([^"]+)"><\/script>/.exec(html);
assert.ok(tag, 'deferred script tag with the nonce');
assert.equal(tag[1], 'https://file+.vscode-resource/ext/dist/viewer3d.js');
assert.ok(tag.index < html.indexOf('</head>'));
assert.match(html, /"defaultView":"3d"/);
assert.match(html, /window\.__archifyHost = /);
});
test('pages without the 3D option get no viewer script', () => {
const html = prepareDiagramHtml(page, { cspSource: 'x', nonce: 'n', theme: 'dark' });
assert.ok(!html.includes('viewer3d.js'));
assert.ok(!html.includes('"defaultView":"'));
});
test('saved view state is merged, not replaced, when the hash changes', () => {
const html = prepareDiagramHtml(page, { cspSource: 'x', nonce: 'n', theme: 'dark', state: { uri: 'file:///a.archify' } });
assert.match(html, /vscode\.setState\(Object\.assign\(\{\}, vscode\.getState\(\) \|\| \{\}, config\.state, \{ hash: location\.hash \}\)\)/);
});
+2 -2
View File
@@ -3,8 +3,8 @@ import fs from 'node:fs';
import os from 'node:os';
import path from 'node:path';
import { test } from 'node:test';
import { readDiagramSource } from '../src/detect';
import { renderDiagram, renderToFile, RuntimeOptions, validate } from '../src/renderer';
import { renderDiagram, renderToFile, RuntimeOptions, validate } from '../src/archify/cli';
import { readDiagramSource } from '../src/sources/detect';
const root = path.resolve(__dirname, '..', '..');
const fixtures = path.join(root, 'test', 'fixtures');
+3 -3
View File
@@ -4,9 +4,9 @@ import os from 'node:os';
import path from 'node:path';
import { test } from 'node:test';
import { parse } from 'yaml';
import { readDiagramSource } from '../src/detect';
import { validate } from '../src/renderer';
import { diagramFromTemplate, diagramName, invalidNameReason, TEMPLATES, titleFromName } from '../src/templates';
import { validate } from '../src/archify/cli';
import { diagramFromTemplate, diagramName, invalidNameReason, TEMPLATES, titleFromName } from '../src/language/templates';
import { readDiagramSource } from '../src/sources/detect';
const root = path.resolve(__dirname, '..', '..');
const templates = path.join(root, 'templates');