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:
@@ -70,6 +70,31 @@ The Archify CLI and the AI agents that use it write diagrams as JSON, named `nam
|
||||
- **Export**: the diagram's own Export menu (PNG, SVG, share card, …) saves through a VS Code save dialog.
|
||||
- **Commands**: *Archify | New Diagram…*, *Archify | Render to HTML File…*, *Archify | Open in Browser*, *Archify | Refresh Preview*, *Archify | Show Source*.
|
||||
|
||||
## 3D view
|
||||
|
||||
Every diagram can also be seen in 3D. Open the **3D ▾** menu next to **Export** in the diagram's toolbar and choose **3D**; choose **2D** to go back. The button wears a cyan ring while the 3D view is on.
|
||||
|
||||

|
||||
|
||||
The 3D view is built from the diagram Archify draws, so it looks the same: each node becomes a raised block whose top is the node as Archify draws it, relationships become pipes along Archify's routes with their colours, dashes and arrowheads, and the canvas, frames, lanes and legend form the floor. It works for all five diagram kinds, in every theme and style (Classic, Signal Flow, Blueprint, Editorial).
|
||||
|
||||
The menu has three groups:
|
||||
|
||||
- **View**: 2D or 3D.
|
||||
- **Levels**: *Flat* keeps every node on the floor; *Stacked* lifts nodes into levels by kind: clients and external systems on top, security below them, services in the middle, data on the floor.
|
||||
- **Camera**: *Reset view* (or <kbd>0</kbd>) flies back to the whole diagram, wherever you have moved to; *From above* looks straight down, like 2D.
|
||||
|
||||
Moving around:
|
||||
|
||||
- Drag to turn, right-drag to move. On a trackpad, scroll with two fingers to move in any direction and pinch to zoom; a mouse wheel zooms. The diagram's zoom buttons and the <kbd>+</kbd> and <kbd>-</kbd> keys work too, beyond the 2D limits.
|
||||
- Click a block to focus it, as in 2D: the Semantic Passport opens and unrelated parts fade. Hover a block to see its one-hop trace. Double-click a block to fly to it, or empty space to show everything.
|
||||
|
||||
Animation follows 2D exactly, because the 3D view reads Archify's own animations as they play: the trace (relationships drawing in, nodes pulsing) when the diagram opens or 3D is chosen, the hover trace, and the flows from the Semantic Passport, Path and Lens. *Live* off, or reduced motion, keeps it still.
|
||||
|
||||
**Export → 3D view** saves the current 3D view as a PNG. Each open diagram remembers whether it was in 3D, its camera and its levels; set `archify.defaultView` to `3d` to open diagrams in 3D.
|
||||
|
||||
The 3D view draws only when something moves, so an idle diagram costs no GPU time.
|
||||
|
||||
## Source evidence
|
||||
|
||||
A diagram that declares `meta.repository` and `sources` is verified against a local Git checkout whose `origin` and pinned commit match. The extension uses the Git top-level directory of the diagram file, or `archify.repoRoot` when set.
|
||||
@@ -81,6 +106,7 @@ When verification fails, the default (`archify.sourceEvidence: "fallback"`) stil
|
||||
| Setting | Default | Description |
|
||||
|---|---|---|
|
||||
| `archify.theme` | `vscode` | `vscode` follows the color theme; `dark` or `light` force one; `diagram` keeps the diagram's own choice. |
|
||||
| `archify.defaultView` | `2d` | `3d` opens diagrams in the 3D view. Each open diagram remembers its own choice. |
|
||||
| `archify.preview.liveUpdate` | `true` | Re-render while typing; when off, re-render on save. |
|
||||
| `archify.preview.debounceMs` | `400` | Delay before re-rendering after an edit. |
|
||||
| `archify.validation.enabled` | `true` | Report validation results in Problems. |
|
||||
@@ -91,7 +117,7 @@ When verification fails, the default (`archify.sourceEvidence: "fallback"`) stil
|
||||
|
||||
## Security
|
||||
|
||||
Diagrams run in a webview with a strict content security policy. Only the page's own inline scripts run (via a per-render nonce), there is no network access for scripts or fetches, and links open through VS Code.
|
||||
Diagrams run in a webview with a strict content security policy. Only the page's own inline scripts and the extension's bundled 3D viewer run (via a per-render nonce), there is no network access for scripts or fetches, and links open through VS Code.
|
||||
|
||||
## Development
|
||||
|
||||
@@ -105,6 +131,20 @@ npm run package # build archify-vscode-ext-<version>.vsix
|
||||
|
||||
Press <kbd>F5</kbd> to launch an Extension Development Host with the test fixtures.
|
||||
|
||||
### Code layout
|
||||
|
||||
| Folder | What it holds |
|
||||
|---|---|
|
||||
| `src/extension.ts` | Activation: creates the views and registers everything |
|
||||
| `src/commands/` | Command handlers, grouped by job, and the editor context keys |
|
||||
| `src/views/` | The diagram view (editor for `.archify`, side preview for JSON) and the HTML viewer |
|
||||
| `src/webview/` | The page the views show: CSP, the bridge script, messages from the page |
|
||||
| `src/archify/` | Running the bundled Archify CLI: render, validate, runtime settings |
|
||||
| `src/sources/` | Reading diagram files: type detection, YAML/JSON, source evidence |
|
||||
| `src/language/` | Editor help: Problems, brand completion, templates |
|
||||
| `src/util/` | Logging, settings, file reading |
|
||||
| `src/viewer3d/` | The 3D view; runs inside the Archify page and is bundled to `dist/viewer3d.js` with three.js |
|
||||
|
||||
### Updating the bundled renderer
|
||||
|
||||
`vendor/archify/` and `schemas/` are generated from an Archify checkout:
|
||||
|
||||
Reference in New Issue
Block a user