x-diagram v0.2.4

X-Diagram

A customizable PaperJS based diagram library.

Screenshot

GIF

Example

import {XLightTheme} from "x-diagram/themes";
import {PaperRenderer} from "x-diagram/renderers";
import {XArrow, XArrowDef, XDefaultNode, XNodeDef, XNodePort, XNodePortDef} from "x-diagram/components";
import {XBoardPlugin, XCopyPlugin, XDataChangePlugin, XDeletePlugin, XInteractivePlugin, XLinkerPlugin, XSelectionPlugin} from "x-diagram/plugins";
import {XDiagram, XElementDef} from "x-diagram";

document.body.style.width = '100%';
document.body.style.height = '400px';

const xDiagram = new XDiagram(document.body, {
    id: 'test',
    theme: XLightTheme,
    renderer: PaperRenderer,
    catalog: [
        XDefaultNode({name: 'rounded-node', strokeWidth: 2, padding: 24, radius: 8}),
        XNodePort({name: 'port', strokeWidth: 2, padding: 24, radius: 8}),
        XArrow
    ],
    plugins: [
        XBoardPlugin(),
        XSelectionPlugin,
        XLinkerPlugin(),
        XInteractivePlugin,
        XDeletePlugin,
        XCopyPlugin,
        XDataChangePlugin()
    ]
});

xDiagram.getListener().action('x-on-data-change', data => {
    console.log(data)
});

xDiagram.getListener().action('x-arrow-config-mapper', (cfg: XElementDef) => {
    cfg.targetPointer = true;
    return cfg;
});

xDiagram.addElement<XNodeDef>({
    id: 0,
    solver: 'rounded-node',
    position: {
        x: 100,
        y: 100,
    },
    text: 'Task-1'
});

xDiagram.addElement<XNodeDef>({
    id: 1,
    solver: 'rounded-node',
    text: 'Task-2',
    position: {
        x: 400,
        y: 100,
    }
});

xDiagram.addElement<XNodeDef>({
    id: 2,
    solver: 'rounded-node',
    text: 'Task-3',
    position: {
        x: 200,
        y: 200,
    }
});

xDiagram.addElement<XNodePortDef>({
    id: 3,
    solver: 'port',
    text: 'Task-3',
    position: {
        x: 450,
        y: 200,
    },
    in: 3,
    out: 2
});

xDiagram.addElement<XNodePortDef>({
    id: 4,
    solver: 'port',
    text: 'Task-4',
    position: {
        x: 650,
        y: 200,
    },
    in: 1,
    out: 1
});


xDiagram.addElement<XNodePortDef>({
    id: 5,
    solver: 'port',
    text: 'Task-5',
    position: {
        x: 650,
        y: 300,
    },
    in: 1,
    out: 1
});

xDiagram.addElement<XArrowDef>({solver: 'x-arrow', src: 2, trg: 1});
xDiagram.addElement<XArrowDef>({solver: 'x-arrow', src: 2, trg: 'in:0:3'});
xDiagram.addElement<XArrowDef>({solver: 'x-arrow', src: 2, trg: 'in:2:3'});