From 4462fce32ae668e6df70f8373823420896fa1b06 Mon Sep 17 00:00:00 2001
From: Michal Szczepanski <michal@vane.pl>
Date: Fri, 26 Jul 2024 02:21:42 +0200
Subject: [PATCH] feat: test basic graph functionality

---
 frontend/src/app/app.component.html | 28 +++++++-------
 frontend/src/app/app.component.ts   | 60 +++++++++++++++++++++--------
 2 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 4b1097a..d27e9ed 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -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>
 
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 94f3043..ae12df7 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -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) => {