@xpressai/xircuits-viewer 0.1.0 → 0.1.1
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 +86 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# @xpressai/xircuits-viewer
|
|
2
|
+
|
|
3
|
+
Pure SVG renderer for `.xircuits` workflow files. Zero runtime dependencies. Parses the JSON format and produces self-contained SVG that visually matches the Xircuits editor.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @xpressai/xircuits-viewer
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### From a URL (browser)
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
import { renderFromUrl } from '@xpressai/xircuits-viewer';
|
|
19
|
+
|
|
20
|
+
const svg = await renderFromUrl('/workflows/MyWorkflow.xircuits', { theme: 'dark' });
|
|
21
|
+
document.getElementById('viewer').innerHTML = svg;
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### From JSON data
|
|
25
|
+
|
|
26
|
+
```js
|
|
27
|
+
import { renderXircuits } from '@xpressai/xircuits-viewer';
|
|
28
|
+
|
|
29
|
+
const svg = renderXircuits(workflowJson, { theme: 'dark' });
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### With pan/zoom
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
import { parse, renderToElement } from '@xpressai/xircuits-viewer';
|
|
36
|
+
import { attachPanZoom } from '@xpressai/xircuits-viewer/interaction';
|
|
37
|
+
|
|
38
|
+
const res = await fetch('/workflows/MyWorkflow.xircuits');
|
|
39
|
+
const svg = renderToElement(parse(await res.json()), { theme: 'dark' });
|
|
40
|
+
document.body.appendChild(svg);
|
|
41
|
+
const { destroy, zoomBy, fitView } = attachPanZoom(svg);
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Container background
|
|
45
|
+
|
|
46
|
+
The SVG renders just the graph content. Apply the Xircuits dot-grid background on your container:
|
|
47
|
+
|
|
48
|
+
```js
|
|
49
|
+
import { getCanvasStyle } from '@xpressai/xircuits-viewer';
|
|
50
|
+
|
|
51
|
+
container.style.cssText = getCanvasStyle('dark');
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## API
|
|
55
|
+
|
|
56
|
+
| Function | Description |
|
|
57
|
+
|----------|-------------|
|
|
58
|
+
| `renderFromUrl(url, options?)` | Fetch a `.xircuits` URL and return SVG string |
|
|
59
|
+
| `renderXircuits(json, options?)` | Parse JSON + render to SVG string |
|
|
60
|
+
| `parse(json)` | Parse `.xircuits` JSON into `XGraph` |
|
|
61
|
+
| `renderToString(graph, options?)` | Render `XGraph` to SVG string |
|
|
62
|
+
| `renderToElement(graph, options?)` | Render `XGraph` to DOM `SVGSVGElement` |
|
|
63
|
+
| `validate(json)` | Validate without parsing |
|
|
64
|
+
| `getCanvasStyle(theme?)` | CSS string for the dot-grid container background |
|
|
65
|
+
| `attachPanZoom(svg, options?)` | Add pan/zoom, returns `{ destroy, zoomBy, fitView }` |
|
|
66
|
+
|
|
67
|
+
### RenderOptions
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
{
|
|
71
|
+
theme?: 'dark' | 'light';
|
|
72
|
+
width?: number;
|
|
73
|
+
height?: number;
|
|
74
|
+
padding?: number;
|
|
75
|
+
fitView?: boolean;
|
|
76
|
+
className?: string;
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## React
|
|
81
|
+
|
|
82
|
+
See [`@xpressai/xircuits-viewer-react`](https://www.npmjs.com/package/@xpressai/xircuits-viewer-react) for React components.
|
|
83
|
+
|
|
84
|
+
## License
|
|
85
|
+
|
|
86
|
+
MIT
|