+ Json Graph Lib Test Project
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
new file mode 100644
index 0000000..eba6d1a
--- /dev/null
+++ b/src/app/app.component.spec.ts
@@ -0,0 +1,31 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ AppComponent
+ ],
+ }).compileComponents();
+ }));
+
+ it('should create the app', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.componentInstance;
+ expect(app).toBeTruthy();
+ });
+
+ it(`should have as title 'json-graph-editor'`, () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.componentInstance;
+ expect(app.title).toEqual('json-graph-editor');
+ });
+
+ it('should render title', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ fixture.detectChanges();
+ const compiled = fixture.nativeElement;
+ expect(compiled.querySelector('.content span').textContent).toContain('json-graph-editor app is running!');
+ });
+});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
new file mode 100644
index 0000000..fe4eb7d
--- /dev/null
+++ b/src/app/app.component.ts
@@ -0,0 +1,105 @@
+import { Component } from '@angular/core';
+import {JsonGraph} from "../../projects/json-graph-lib/src/lib/model/JsonGraph";
+import {EdgeCreateEvent, EdgeChangeEvent, NodeChangeEvent} from "../../projects/json-graph-lib/src/lib/model/EditorEvents";
+import {EditorSettings} from '../../projects/json-graph-lib/src/lib/model/EditorSettings';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+ title = 'json-graph-editor';
+
+ graph: JsonGraph = {
+ "directed": true,
+ "multiEdge": true,
+ "nodes":
+ [
+ {"id": "0", "metadata": {"receivedPackets": 1, "position":{"x":0.0,"y":0.0}, "display":{"color":"blue","shape":"circle", "size":20} }},
+ {"id": "1", "metadata": {"receivedPackets": 2, "position":{"x":1.0,"y":0.0}, "display":{"color":"red","shape":"rectangle", "size":10} }},
+ {"id": "2", "metadata": {"receivedPackets": 3, "position":{"x":2.3,"y":-1.0}, "display":{"color":"#880088","shape":"circle", "size":15} }},
+ {"id": "3", "metadata": {"receivedPackets": 4, "position":{"x":-0.8,"y":-0.8}, "display":{"color":"#cce038","shape":"rounded", "size":15} }},
+ {"id": "4", "metadata": {"receivedPackets": 5, "position":{"x":0.5,"y":0.6}, "display":{"color":"#33aa88","shape":"rounded", "size":15} }},
+ {"id": "5", "metadata": {"receivedPackets": 6, "status": "online", "position":{"x":-2.2,"y":1.8}, "display":{"color":"#880088","shape":"circle", "size":15} }}
+ ],
+ "edges":
+ [
+ {"id": "0", "source": "0", "target": "1", "metadata": {"losConfidence": 1000, "display":{"color":"red","weight":4} }},
+ {"id": "1", "source": "4", "target": "5", "metadata": {"losConfidence": 400, "display":{"color":"red","weight":4} }},
+ {"id": "2", "source": "5", "target": "3", "metadata": {"losConfidence": 1000, "display":{"color":"black","weight":4} }},
+ {"source": "3", "target": "2", "metadata": {"losConfidence": 1000, "display":{"color":"gray","weight":6} }},
+ {"source": "0", "target": "3", "metadata": {"losConfidence": 300, "display":{"color":"red","weight":4} }},
+ {"source": "0", "target": "2", "metadata": {"losConfidence": 1000, "display":{"color":"orange","weight":2} }},
+ {"source": "2", "target": "0", "metadata": {"losConfidence": 1000, "display":{"color":"orange","weight":3} }},
+ {"source": "0", "target": "2", "metadata": {"losConfidence": 1000, "display":{"color":"orange","weight":2} }}
+ ]
+ };
+ input:string =
+ `
+ {
+ "directed": true,
+ "multiEdge": true,
+ "nodes":
+ [
+ {"id": "0", "metadata": {"receivedPackets": 1, "position":{"x":0.0,"y":0.0}, "display":{"color":"blue","shape":"circle", "size":20} }},
+ {"id": "1", "metadata": {"receivedPackets": 2, "position":{"x":1.0,"y":0.0}, "display":{"color":"red","shape":"rectangle", "size":10} }},
+ {"id": "2", "metadata": {"receivedPackets": 3, "position":{"x":2.3,"y":-1.0}, "display":{"color":"#880088","shape":"circle", "size":15} }},
+ {"id": "3", "metadata": {"receivedPackets": 4, "position":{"x":-0.8,"y":-0.8}, "display":{"color":"#cce038","shape":"rounded", "size":15} }},
+ {"id": "4", "metadata": {"receivedPackets": 5, "position":{"x":0.5,"y":0.6}, "display":{"color":"#33aa88","shape":"rounded", "size":15} }},
+ {"id": "5", "metadata": {"receivedPackets": 6, "status": "online", "position":{"x":-2.2,"y":1.8}, "display":{"color":"#880088","shape":"circle", "size":15} }}
+ ],
+ "edges":
+ [
+ {"id": "0", "source": "0", "target": "1", "metadata": {"losConfidence": 1000, "display":{"color":"red","weight":4} }},
+ {"id": "1", "source": "4", "target": "5", "metadata": {"losConfidence": 400, "display":{"color":"red","weight":4} }},
+ {"id": "2", "source": "5", "target": "3", "metadata": {"losConfidence": 1000, "display":{"color":"black","weight":4} }},
+ {"source": "3", "target": "2", "metadata": {"losConfidence": 1000, "display":{"color":"gray","weight":6} }},
+ {"source": "0", "target": "3", "metadata": {"losConfidence": 300, "display":{"color":"red","weight":4} }},
+ {"source": "0", "target": "2", "metadata": {"losConfidence": 1000, "display":{"color":"orange","weight":2} }},
+ {"source": "2", "target": "0", "metadata": {"losConfidence": 1000, "display":{"color":"orange","weight":3} }},
+ {"source": "0", "target": "2", "metadata": {"losConfidence": 1000, "display":{"color":"orange","weight":2} }}
+ ]
+ }
+ `;
+ editable: boolean = true;
+ createEdge: boolean = false;
+
+ settings: EditorSettings = {
+ editable: true,
+ createEdge: false,
+ coordinateTransformation: (x,y)=>{return {x,y}},
+ defaultDisplaySettings: {
+ nodeDisplaySettings: {
+ color: "red",
+ shape: "circle",
+ size: 16
+ },
+ edgeDisplaySettings: {
+ color: "black",
+ size: 2
+ }
+ }
+ }
+
+ update() {
+ this.settings = {...this.settings, editable: this.editable, createEdge: this.createEdge};
+ this.graph = JSON.parse(this.input);
+ }
+
+ updateSettings() {
+ this.settings = {...this.settings, editable: this.editable, createEdge: this.createEdge};
+ }
+
+ edgeChanged($event: EdgeChangeEvent) {
+ console.log("Edge changed: ",$event);
+ }
+
+ edgeCreated($event: EdgeCreateEvent) {
+ console.log("Edge created", $event);
+ }
+
+ onNodeChanged($event: NodeChangeEvent) {
+ console.log("Node changed", $event);
+ }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
new file mode 100644
index 0000000..823e34b
--- /dev/null
+++ b/src/app/app.module.ts
@@ -0,0 +1,20 @@
+ import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import {JsonGraphLibModule} from "../../projects/json-graph-lib/src/lib/json-graph-lib.module";
+import {FormsModule} from "@angular/forms";
+
+@NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ JsonGraphLibModule,
+ FormsModule
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3612073
--- /dev/null
+++ b/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
new file mode 100644
index 0000000..7b4f817
--- /dev/null
+++ b/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+ production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
diff --git a/src/favicon.ico b/src/favicon.ico
new file mode 100644
index 0000000..997406a
Binary files /dev/null and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..ce6ae38
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+