ngx-diagram
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.2 • Public • Published

    ngx-diagram

    Angular 6 HTML+SVG based diagram editor component

    Looks like this (with elkjs)

    Usage

    Place your div node into a template as:

    <ngx-diagram #diagram (connected)="connected($event)" (clicked)="created($event)" (selected)="selected($event)">
        <ng-template let-node="node">
        
        <div>{{node|json}} <!-- This is your div box as a node -->
        </div>
        
        </ng-template>
    </ngx-diagram>
    

    The example component is then:

    
    export class AppComponent {
    
        @ViewChild('diagram') diagram: NgxDiagramComponent;
        selection = [];
    
        nodes = [];
        links = [];
    
        ngOnInit() {
    
            this.nodes = [{id: id()}];
            for (let i = 0; i < 10; i++) {
                const idl = id();
                this.nodes.push({id: idl});
            }
    
            this.nodes.forEach(source => {
                for (let i = 0; i < 1; i++) {
                    const target = this.nodes[Math.floor(Math.random() * this.nodes.length)];
                    if (source.id !== target.id) {
                        this.links.push({source: source.id, target: target.id});
                    }
                }
            });
    
            this.diagram.updateNodes(this.nodes); // First the nodes then the links
            this.diagram.updateLinks(this.links);
            this.diagram.redraw();
    
    
        }
    
        connected(connection) {
    
            if (connection.source.id !== connection.target.id) {
                this.links.push({source: connection.source.id, target: connection.target.id});
    
                this.diagram.updateLinks(this.links);
                this.diagram.redraw();
    
            }
    
        }
    
        created(creation) {
    
            const node = {id: id()};
            this.nodes.push(node);
    
            this.diagram.updateNodes(this.nodes);
            this.diagram.moveNodeTo(node.id, creation.x, creation.y);
            this.diagram.redraw();
    
        }
    
        selected(selection) {
    
            this.selection = selection;
    
        }
    
        deleteSelected() {
    
            this.nodes = this.nodes.filter(node => !this.selection.find(n => node.id === n.id));
            this.links = this.links.filter(link => !(this.selection.find(n => link.source === n.id || link.target === n.id)));
    
            this.diagram.updateNodes(this.nodes);
            this.diagram.redraw();
            this.selection = [];
    
        }
    
        deleteLinksBetweenSelected() {
    
            this.links = this.links.filter(link => !(this.selection.find(n => link.source === n.id) && this.selection.find(n => link.target === n.id)));
    
            this.diagram.updateLinks(this.links);
            this.diagram.redraw();
    
        }
    
        autoLayout() {
            this.diagram.autoLayout().then();
        }
    
    }
    
    
    

    Install

    npm i ngx-diagram

    DownloadsWeekly Downloads

    35

    Version

    0.4.2

    License

    MIT

    Unpacked Size

    3.02 MB

    Total Files

    40

    Last publish

    Collaborators

    • dzsm