@trbn/jsoncanvas
is an implementation of the JSONCanvas Spec in TypeScript.
Note: This package does NOT include a rendering engine. It is only a data structure for a canvas.
With pnpm:
pnpm install @trbn/jsoncanvas
import { JSONCanvas } from '@trbn/jsoncanvas';
const canvas = new JSONCanvas();
// Adds a text node to the canvas
canvas.addNode({
id: 'node1',
type: 'text',
text: 'Hello, World!',
x: 100,
y: 100,
width: 100,
height: 100,
});
// Adds another text node to the canvas
canvas.addNode({
id: 'node2',
type: 'text',
text: 'Hello, World 2!',
x: 200,
y: 200,
radius: 50,
});
// Adds an connection between node1 and node2
canvas.addEdge({
id: 'edge1',
fromNode: 'node1',
toNode: 'node2',
label: 'Edge 1',
});
// Removes node2 and all connections to it
canvas.removeNode('node2');
// Outputs the canvas as a string
console.log(canvas.toString());
MIT License © 2024-PRESENT Torben Haack