@matchina/viz-svg 0.1.0-alpha.1 → 0.1.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -0
- package/package.json +1 -5
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# @matchina/viz-svg
|
|
2
|
+
|
|
3
|
+
SVG state machine visualizer for Matchina, powered by ELK auto-layout.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install @matchina/viz-svg
|
|
9
|
+
# peer deps: matchina, react, react-dom
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Usage
|
|
13
|
+
|
|
14
|
+
```tsx
|
|
15
|
+
import { SvgInspector } from '@matchina/viz-svg';
|
|
16
|
+
|
|
17
|
+
<SvgInspector
|
|
18
|
+
shape={machine.shape}
|
|
19
|
+
value={state.value}
|
|
20
|
+
onFire={(event) => machine.send(event)}
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Give the container a fixed size — the component fills `100% × 100%`. Pan/zoom via mouse wheel and drag; click outgoing edges to fire events.
|
|
25
|
+
|
|
26
|
+
## Props
|
|
27
|
+
|
|
28
|
+
| Prop | Type | Default | Description |
|
|
29
|
+
|------|------|---------|-------------|
|
|
30
|
+
| `shape` | `MachineShape` | required | Machine shape from `matchina` |
|
|
31
|
+
| `value` | `string` | required | Current state value |
|
|
32
|
+
| `onFire` | `(event: string) => void` | — | Called when an outgoing edge is clicked |
|
|
33
|
+
| `options` | `ElkLayoutOptions` | — | Layout options (direction, spacing, edge routing) |
|
|
34
|
+
| `interactive` | `boolean` | `true` | Enable edge click events |
|
|
35
|
+
| `precomputedLayout` | `SvgLayout` | — | Skip initial ELK run (useful for SSR) |
|
|
36
|
+
|
|
37
|
+
### `ElkLayoutOptions`
|
|
38
|
+
|
|
39
|
+
| Option | Default | Description |
|
|
40
|
+
|--------|---------|-------------|
|
|
41
|
+
| `direction` | `'DOWN'` | `'RIGHT'` or `'DOWN'` |
|
|
42
|
+
| `edgeRouting` | `'ORTHOGONAL'` | `'ORTHOGONAL'` or `'POLYLINE'` |
|
|
43
|
+
| `nodeSpacing` | `40` | Spacing between sibling nodes |
|
|
44
|
+
| `layerSpacing` | `nodeSpacing + 20` | Spacing between layers |
|
|
45
|
+
|
|
46
|
+
## Theming
|
|
47
|
+
|
|
48
|
+
Override CSS variables on any ancestor element:
|
|
49
|
+
|
|
50
|
+
| Variable | Default |
|
|
51
|
+
|----------|---------|
|
|
52
|
+
| `--matchina-viz-accent` | `#2dd4bf` |
|
|
53
|
+
| `--matchina-viz-bg` | `#0a0f17` |
|
|
54
|
+
| `--matchina-viz-node` | `rgba(28,38,54,0.95)` |
|
|
55
|
+
| `--matchina-viz-node-active` | `rgba(20,90,82,0.85)` |
|
|
56
|
+
| `--matchina-viz-border` | `rgba(148,163,184,0.25)` |
|
|
57
|
+
| `--matchina-viz-text` | `rgba(226,232,240,0.92)` |
|
|
58
|
+
| `--matchina-viz-edge` | `rgba(100,116,139,0.55)` |
|
|
59
|
+
| `--matchina-viz-font` | `'JetBrains Mono', monospace` |
|
|
60
|
+
|
|
61
|
+
## SSR / Pre-computed layouts
|
|
62
|
+
|
|
63
|
+
```ts
|
|
64
|
+
import { runElkLayout } from '@matchina/viz-svg';
|
|
65
|
+
|
|
66
|
+
// At build time (Node.js / Astro frontmatter):
|
|
67
|
+
const layout = await runElkLayout(machine.shape, { direction: 'RIGHT' });
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Pass `precomputedLayout` to render synchronously on first paint without a "computing layout…" placeholder.
|
|
71
|
+
|
|
72
|
+
## Low-level exports
|
|
73
|
+
|
|
74
|
+
`runElkLayout(shape, options)` → `Promise<SvgLayout>` — run ELK and get flat absolute-positioned node/edge arrays directly.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@matchina/viz-svg",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.2",
|
|
4
4
|
"description": "SVG-based state machine visualizer for Matchina using ELK layout",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -8,10 +8,6 @@
|
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
|
-
"node": {
|
|
12
|
-
"types": "./src/index.ts",
|
|
13
|
-
"import": "./src/index.ts"
|
|
14
|
-
},
|
|
15
11
|
"types": "./dist/index.d.ts",
|
|
16
12
|
"import": "./dist/index.mjs",
|
|
17
13
|
"require": "./dist/index.js"
|