feat: ngx-graph automatic fit to screen and dynamic data
This commit is contained in:
parent
93b7cd3959
commit
34fccf5982
|
|
@ -1,122 +1,101 @@
|
|||
<div>
|
||||
<h1>Slow shit</h1>
|
||||
<app-graph-component></app-graph-component>
|
||||
<ngx-graph
|
||||
class="chart-container"
|
||||
[view]="[800, 550]"
|
||||
[links]="[
|
||||
<!--
|
||||
<ngx-graph [links]="links" [nodes]="nodes" [clusters]="clusters" [curve]="curve" [layout]="layout"
|
||||
[layoutSettings]="layoutSettings" [enableZoom]="false" [draggingEnabled]="false" [panningEnabled]="false"
|
||||
[autoZoom]="true" [autoCenter]="true" [animate]="false" [update$]="update$" [center$]="center$"
|
||||
[zoomToFit$]="zoomToFit$" (window:resize)="onResize($event)">
|
||||
-->
|
||||
<button (click)="handleAddNode()">+</button>
|
||||
<div style="border: 1px solid #ff0000;width: 800px;height: 500px;position: relative">
|
||||
<ngx-graph
|
||||
class="chart-container"
|
||||
[view]="[800, 500]"
|
||||
[draggingEnabled]="false"
|
||||
[links]="links"
|
||||
[nodes]="nodes"
|
||||
[update$]="update$"
|
||||
[zoomToFit$]="zoom$"
|
||||
[clusters]="[
|
||||
{
|
||||
id: 'a',
|
||||
source: 'first',
|
||||
target: 'second',
|
||||
label: 'is parent of'
|
||||
}, {
|
||||
id: 'b',
|
||||
source: 'first',
|
||||
target: 'c1',
|
||||
label: 'custom label'
|
||||
}, {
|
||||
id: 'd',
|
||||
source: 'first',
|
||||
target: 'c2',
|
||||
label: 'custom label'
|
||||
}, {
|
||||
id: 'e',
|
||||
source: 'c1',
|
||||
target: 'd',
|
||||
label: 'first link'
|
||||
}, {
|
||||
id: 'f',
|
||||
source: 'c1',
|
||||
target: 'd',
|
||||
label: 'second link'
|
||||
}
|
||||
]"
|
||||
[nodes]="[
|
||||
{
|
||||
id: 'first',
|
||||
label: 'A'
|
||||
}, {
|
||||
id: 'second',
|
||||
label: 'B'
|
||||
}, {
|
||||
id: 'c1',
|
||||
label: 'C1'
|
||||
}, {
|
||||
id: 'c2',
|
||||
label: 'C2'
|
||||
}, {
|
||||
id: 'd',
|
||||
label: 'D'
|
||||
}
|
||||
]"
|
||||
[clusters]="[
|
||||
{
|
||||
id: 'third',
|
||||
id: 'asdf',
|
||||
label: 'Cluster node',
|
||||
childNodeIds: ['c1', 'c2']
|
||||
childNodeIds: ['c1', 'd'],
|
||||
data: {
|
||||
fill: '#fff000'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'asdfg',
|
||||
label: 'Cluster node 2',
|
||||
childNodeIds: ['first', 'c2'],
|
||||
data: {
|
||||
fill: '#ff0000'
|
||||
}
|
||||
}
|
||||
]"
|
||||
layout="dagreCluster"
|
||||
(select)="handleNodeSelect($event)"
|
||||
>
|
||||
<ng-template #defsTemplate>
|
||||
<svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
|
||||
<svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
|
||||
</svg:marker>
|
||||
</ng-template>
|
||||
layout="dagreCluster"
|
||||
(select)="handleNodeSelect($event)"
|
||||
>
|
||||
<ng-template #defsTemplate>
|
||||
<svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
|
||||
<svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
|
||||
</svg:marker>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #clusterTemplate let-cluster>
|
||||
<svg:g class="node cluster">
|
||||
<svg:rect
|
||||
rx="5"
|
||||
ry="5"
|
||||
[attr.width]="cluster.dimension.width"
|
||||
[attr.height]="cluster.dimension.height"
|
||||
[attr.fill]="cluster.data.color"
|
||||
/>
|
||||
</svg:g>
|
||||
</ng-template>
|
||||
<ng-template #clusterTemplate let-cluster>
|
||||
<svg:g class="node cluster">
|
||||
<svg:rect
|
||||
rx="5"
|
||||
ry="5"
|
||||
[attr.width]="cluster.dimension.width"
|
||||
[attr.height]="cluster.dimension.height"
|
||||
[attr.fill]="cluster.data.fill"
|
||||
/>
|
||||
</svg:g>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #nodeTemplate let-node>
|
||||
<svg:g class="node">
|
||||
<svg:rect
|
||||
[attr.width]="node.dimension.width"
|
||||
[attr.height]="node.dimension.height"
|
||||
[attr.fill]="node.data.color"
|
||||
/>
|
||||
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">
|
||||
{{node.label}}
|
||||
</svg:text>
|
||||
<!--<foreignObject width="100%" height="100%">
|
||||
<xhtml:div>
|
||||
<xhtml:div #source style="border:1px green solid;width: fit-content;margin-left:200px;margin-top:50px;">
|
||||
I'm a div inside a SVG.
|
||||
<ng-template #nodeTemplate let-node>
|
||||
<svg:g class="node">
|
||||
<svg:rect
|
||||
[attr.width]="node.dimension.width"
|
||||
[attr.height]="node.dimension.height"
|
||||
[attr.fill]="node.data.color"
|
||||
/>
|
||||
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">
|
||||
{{node.label}}
|
||||
</svg:text>
|
||||
<!--<foreignObject width="100%" height="100%">
|
||||
<xhtml:div>
|
||||
<xhtml:div #source style="border:1px green solid;width: fit-content;margin-left:200px;margin-top:50px;">
|
||||
I'm a div inside a SVG.
|
||||
</xhtml:div>
|
||||
<xhtml:p #target style="border:1px green solid;width: fit-content;margin-left:10px;margin-top:120px">
|
||||
I'm a second div inside a SVG.
|
||||
</xhtml:p>
|
||||
</xhtml:div>
|
||||
<xhtml:p #target style="border:1px green solid;width: fit-content;margin-left:10px;margin-top:120px">
|
||||
I'm a second div inside a SVG.
|
||||
</xhtml:p>
|
||||
</xhtml:div>
|
||||
</foreignObject>-->
|
||||
</svg:g>
|
||||
</ng-template>
|
||||
</foreignObject>-->
|
||||
</svg:g>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #linkTemplate let-link>
|
||||
<svg:g class="edge">
|
||||
<svg:path class="line" stroke-width="2" marker-end="url(#arrow)"></svg:path>
|
||||
<svg:text class="edge-label" text-anchor="middle">
|
||||
<textPath
|
||||
class="text-path"
|
||||
[attr.href]="'#' + link.id"
|
||||
[style.dominant-baseline]="link.dominantBaseline"
|
||||
startOffset="50%"
|
||||
>
|
||||
{{link.label}}
|
||||
</textPath>
|
||||
</svg:text>
|
||||
</svg:g>
|
||||
</ng-template>
|
||||
</ngx-graph>
|
||||
<ng-template #linkTemplate let-link>
|
||||
<svg:g class="edge">
|
||||
<svg:path class="line" stroke-width="2" marker-end="url(#arrow)"></svg:path>
|
||||
<svg:text class="edge-label" text-anchor="middle">
|
||||
<textPath
|
||||
class="text-path"
|
||||
[attr.href]="'#' + link.id"
|
||||
[style.dominant-baseline]="link.dominantBaseline"
|
||||
startOffset="50%"
|
||||
>
|
||||
{{link.label}}
|
||||
</textPath>
|
||||
</svg:text>
|
||||
</svg:g>
|
||||
</ng-template>
|
||||
</ngx-graph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-outlet />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import {Component} from "@angular/core";
|
||||
import {AfterViewInit, Component} from "@angular/core";
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import {GraphModule} from "./view/graph/graph.module";
|
||||
import {NgxGraphModule} from "@kr0san89/ngx-graph";
|
||||
import {randomString} from "./utils/utils";
|
||||
import {Subject} from "rxjs";
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -11,9 +13,78 @@ import {NgxGraphModule} from "@kr0san89/ngx-graph";
|
|||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.scss'
|
||||
})
|
||||
export class AppComponent {
|
||||
export class AppComponent implements AfterViewInit {
|
||||
update$ = new Subject<boolean>();
|
||||
zoom$ = new Subject<any>();
|
||||
links: any = []
|
||||
|
||||
nodes: any = []
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.nodes = [
|
||||
{
|
||||
id: 'first',
|
||||
label: 'A'
|
||||
}, {
|
||||
id: 'second',
|
||||
label: 'B'
|
||||
}, {
|
||||
id: 'c1',
|
||||
label: 'C1'
|
||||
}, {
|
||||
id: 'c2',
|
||||
label: 'C2'
|
||||
}, {
|
||||
id: 'd',
|
||||
label: 'D'
|
||||
}
|
||||
]
|
||||
this.links = [
|
||||
{
|
||||
id: 'a',
|
||||
source: 'first',
|
||||
target: 'second',
|
||||
label: 'is parent of'
|
||||
}, {
|
||||
id: 'b',
|
||||
source: 'first',
|
||||
target: 'c1',
|
||||
label: 'custom label'
|
||||
}, {
|
||||
id: 'd',
|
||||
source: 'first',
|
||||
target: 'c2',
|
||||
label: 'custom label'
|
||||
}, {
|
||||
id: 'e',
|
||||
source: 'c1',
|
||||
target: 'd',
|
||||
label: 'first link'
|
||||
}, {
|
||||
id: 'f',
|
||||
source: 'c1',
|
||||
target: 'd',
|
||||
label: 'second link'
|
||||
}
|
||||
]
|
||||
setTimeout(() => {
|
||||
this.zoom$.next({ force: true, autoCenter: true })
|
||||
}, 1)
|
||||
}
|
||||
|
||||
handleAddNode = () => {
|
||||
const node = {id: randomString(5), label: randomString(5)}
|
||||
this.nodes.push(node)
|
||||
console.log('node', node)
|
||||
this.update$.next(true)
|
||||
this.zoom$.next(true)
|
||||
}
|
||||
|
||||
handleNodeSelect = (event: any) => {
|
||||
console.log('handleNodeSelect', event)
|
||||
}
|
||||
|
||||
toJSON = (val: any) => {
|
||||
return JSON.stringify(val)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue