https://github.com/douganderson444/svelte-connectables
SVG Connectors between HTML elements
https://github.com/douganderson444/svelte-connectables
Last synced: 3 months ago
JSON representation
SVG Connectors between HTML elements
- Host: GitHub
- URL: https://github.com/douganderson444/svelte-connectables
- Owner: DougAnderson444
- Created: 2022-03-09T19:46:02.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-08-08T19:49:42.000Z (almost 3 years ago)
- Last Synced: 2025-01-24T19:47:19.419Z (4 months ago)
- Language: Svelte
- Homepage: https://douganderson444.github.io/svelte-connectables/
- Size: 11.7 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte Connectables
Connect HTML elements with SVG curves. Like [jsPlumb](https://demo.jsplumbtoolkit.com/), only built with Svelte so it's got more flexibility to it.
- [x] Connect HTML elements together
- [x] Adjusts when HTML Element position changes
- [x] UI updates data object
- [ ] Groups of connectable ojbects
## Required data
The data must have an array of nodes and array of links connecting those node by `id`:
```
let data = {
nodes:
{
id: string
x: number
y: number
width: number
height: number
}[],
links:
{
source: {
id: string
},
target: {
id: string
}
}[]
};
```
## Creating a connections
```
npm i github:douganderson444/svelte-connectables
```
## Exports
```js
import Connectable from 'svelte-connectables/Connectable.svelte';
import PanHandle from 'svelte-connectables/PanHandle.svelte';
import Links from 'svelte-connectables/Links.svelte';
import Resizable from 'svelte-connectables/Resizable.svelte';
```
## Usage
See `Demo.svelte`, but something along these lines:
```js
Connect from Me
Connect to me, then pull on me.
```
## Developing
```bash
npm run dev
```