feat: test basic graph functionality
This commit is contained in:
parent
34fccf5982
commit
4462fce32a
|
|
@ -7,16 +7,22 @@
|
|||
[autoZoom]="true" [autoCenter]="true" [animate]="false" [update$]="update$" [center$]="center$"
|
||||
[zoomToFit$]="zoomToFit$" (window:resize)="onResize($event)">
|
||||
-->
|
||||
<button (click)="handleAddNode()">+</button>
|
||||
<button (click)="handleAddNode()">add</button>
|
||||
<button (click)="handleZoomIn()">+</button>
|
||||
<button (click)="handleZoomOut()">-</button>
|
||||
<button (click)="handleFit()">fit</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$"
|
||||
[zoomLevel]="zoomLevel"
|
||||
[zoomToFit$]="zoomToFit$"
|
||||
[center$]="center$"
|
||||
[enableZoom]="false"
|
||||
(zoomChange)="handleZoomChange($event)"
|
||||
[clusters]="[
|
||||
{
|
||||
id: 'asdf',
|
||||
|
|
@ -36,7 +42,6 @@
|
|||
}
|
||||
]"
|
||||
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">
|
||||
|
|
@ -66,16 +71,11 @@
|
|||
<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>
|
||||
</foreignObject>-->
|
||||
<foreignObject width="100px" height="25px">
|
||||
<div>
|
||||
<button (click)="handleEdit(node)" >Edit</button>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</svg:g>
|
||||
</ng-template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {AfterViewInit, Component} from "@angular/core";
|
||||
import {AfterViewInit, Component, OnInit} from "@angular/core";
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import {GraphModule} from "./view/graph/graph.module";
|
||||
import {NgxGraphModule} from "@kr0san89/ngx-graph";
|
||||
|
|
@ -13,18 +13,20 @@ import {Subject} from "rxjs";
|
|||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.scss'
|
||||
})
|
||||
export class AppComponent implements AfterViewInit {
|
||||
export class AppComponent implements AfterViewInit, OnInit {
|
||||
update$ = new Subject<boolean>();
|
||||
zoom$ = new Subject<any>();
|
||||
zoomToFit$ = new Subject<any>()
|
||||
center$ = new Subject<boolean>()
|
||||
zoomLevel = 1
|
||||
links: any = []
|
||||
|
||||
nodes: any = []
|
||||
|
||||
ngAfterViewInit() {
|
||||
ngOnInit() {
|
||||
this.nodes = [
|
||||
{
|
||||
id: 'first',
|
||||
label: 'A'
|
||||
label: 'A',
|
||||
}, {
|
||||
id: 'second',
|
||||
label: 'B'
|
||||
|
|
@ -36,14 +38,17 @@ export class AppComponent implements AfterViewInit {
|
|||
label: 'C2'
|
||||
}, {
|
||||
id: 'd',
|
||||
label: 'D'
|
||||
label: 'D',
|
||||
}
|
||||
]
|
||||
this.nodes.forEach((n: any) => {
|
||||
n.dimension = { width: 100, height: 100 }
|
||||
})
|
||||
this.links = [
|
||||
{
|
||||
id: 'a',
|
||||
source: 'first',
|
||||
target: 'second',
|
||||
source: 'second',
|
||||
target: 'first',
|
||||
label: 'is parent of'
|
||||
}, {
|
||||
id: 'b',
|
||||
|
|
@ -65,11 +70,39 @@ export class AppComponent implements AfterViewInit {
|
|||
source: 'c1',
|
||||
target: 'd',
|
||||
label: 'second link'
|
||||
}, {
|
||||
id: 'g',
|
||||
source: 'second',
|
||||
target: 'second',
|
||||
label: 'loop'
|
||||
}
|
||||
]
|
||||
setTimeout(() => {
|
||||
this.zoom$.next({ force: true, autoCenter: true })
|
||||
}, 1)
|
||||
setTimeout(() => this.zoomToFit$.next(true), 1)
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
console.log('ngAfterViewInit')
|
||||
}
|
||||
|
||||
handleEdit = (event: any) => {
|
||||
console.log('handleEdit', event)
|
||||
}
|
||||
|
||||
handleZoomIn = () => {
|
||||
this.zoomLevel += 0.1
|
||||
}
|
||||
|
||||
handleZoomOut = () => {
|
||||
this.zoomLevel -= 0.1
|
||||
}
|
||||
|
||||
handleFit = () => {
|
||||
this.zoomToFit$.next(true)
|
||||
this.center$.next(true)
|
||||
}
|
||||
|
||||
handleZoomChange = (value: number) => {
|
||||
this.zoomLevel = value
|
||||
}
|
||||
|
||||
handleAddNode = () => {
|
||||
|
|
@ -77,11 +110,6 @@ export class AppComponent implements AfterViewInit {
|
|||
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) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue