Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trbndev/jsoncanvas
📝 JSONCanvas Implementation for TypeScript
https://github.com/trbndev/jsoncanvas
jsoncanvas typescript
Last synced: 3 days ago
JSON representation
📝 JSONCanvas Implementation for TypeScript
- Host: GitHub
- URL: https://github.com/trbndev/jsoncanvas
- Owner: trbndev
- License: mit
- Created: 2024-03-15T05:34:07.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-03-16T16:54:00.000Z (9 months ago)
- Last Synced: 2024-12-06T17:22:10.067Z (19 days ago)
- Topics: jsoncanvas, typescript
- Language: TypeScript
- Homepage:
- Size: 27.3 KB
- Stars: 25
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# @trbn/jsoncanvas
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]
`@trbn/jsoncanvas` is an implementation of the [JSONCanvas Spec](https://jsoncanvas.org/spec/1.0/) in TypeScript.
> Note: This package does NOT include a rendering engine. It is only a data structure for a canvas.
## Installation
With pnpm:
```bash
pnpm install @trbn/jsoncanvas
```
## Example Usage
```typescript
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());
```
## License
[MIT](./LICENSE) License © 2024-PRESENT [Torben Haack](https://github.com/haackt)
[npm-version-src]: https://img.shields.io/npm/v/@trbn/jsoncanvas?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/@trbn/jsoncanvas
[npm-downloads-src]: https://img.shields.io/npm/dm/@trbn/jsoncanvas?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/@trbn/jsoncanvas
[bundle-src]: https://img.shields.io/bundlephobia/minzip/@trbn/jsoncanvas?style=flat&colorA=080f12&colorB=1fa669&label=minzip
[bundle-href]: https://bundlephobia.com/result?p=@trbn/jsoncanvas
[license-src]: https://img.shields.io/github/license/haackt/jsoncanvas.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/haackt/jsoncanvas/blob/main/LICENSE
[jsdocs-src]: https://img.shields.io/badge/@trbn/jsoncanvas-080f12?style=flat&colorA=080f12&colorB=1fa669
[jsdocs-href]: https://www.jsdocs.io/package/@trbn/jsoncanvas