Changing link style

src/app/cartography/cartography.module.ts

@@ -5,6 +5,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { ANGULAR_MAP_DECLARATIONS } from './angular-map.imports';
 import { D3MapComponent } from './components/d3-map/d3-map.component';
 import { DraggableSelectionComponent } from './components/draggable-selection/draggable-selection.component';
+import { LinkEditingComponent } from './components/link-editing/link-editing.component';
 import { DrawingAddingComponent } from './components/drawing-adding/drawing-adding.component';
 import { DrawingResizingComponent } from './components/drawing-resizing/drawing-resizing.component';
 import { ExperimentalMapComponent } from './components/experimental-map/experimental-map.component';
@@ -73,6 +74,7 @@ import { SerialLinkWidget } from './widgets/links/serial-link';
     SelectionControlComponent,
     SelectionSelectComponent,
     DraggableSelectionComponent,
+    LinkEditingComponent,
     MovingCanvasDirective,
     ZoomingCanvasDirective,
   ],

src/app/cartography/components/d3-map/d3-map.component.html

@@ -46,3 +46,4 @@
 <app-selection-select></app-selection-select>
 <app-text-editor #textEditor [server]="server" [svg]="svg"></app-text-editor>
 <app-draggable-selection [svg]="svg"></app-draggable-selection>
+<app-link-editing [svg]="svg"></app-link-editing>

src/app/cartography/components/link-editing/link-editing.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { select } from 'd3-selection';
+import { Subscription } from 'rxjs';
+import { LinksEventSource } from '../../events/links-event-source';
+import { MapLink } from '../../models/map/map-link';
+import { LinksWidget } from '../../widgets/links';
+
+@Component({
+  selector: 'app-link-editing',
+  templateUrl: './link-editing.component.html',
+  styleUrls: ['./link-editing.component.scss'],
+})
+export class LinkEditingComponent implements OnInit, OnDestroy {
+  private linkEditedSubscription: Subscription;
+  @Input('svg') svg: SVGSVGElement;
+
+  constructor(
+    private linksWidget: LinksWidget,
+    private linksEventSource: LinksEventSource  ) {}
+
+  ngOnInit() {
+    const svg = select(this.svg);
+    this.linkEditedSubscription = this.linksEventSource.edited.subscribe((link: MapLink) => {
+        this.linksWidget.redrawLink(svg, link);
+    });
+  }
+
+  ngOnDestroy() {
+    this.linkEditedSubscription.unsubscribe();
+  }
+}

src/app/cartography/events/links-event-source.ts

@@ -1,4 +1,5 @@
 import { EventEmitter, Injectable } from '@angular/core';
+import { MapLink } from '../models/map/map-link';
 import { MapLinkNode } from '../models/map/map-link-node';
 import { DraggedDataEvent } from './event-source';
 import { MapLinkCreated } from './links';
@@ -6,5 +7,6 @@ import { MapLinkCreated } from './links';
 @Injectable()
 export class LinksEventSource {
   public created = new EventEmitter<MapLinkCreated>();
+  public edited = new EventEmitter<MapLink>();
   public interfaceDragged = new EventEmitter<DraggedDataEvent<MapLinkNode>>();
 }

src/app/cartography/managers/graph-data-manager.ts

@@ -45,6 +45,7 @@ export class GraphDataManager {
 
   public setLinks(links: Link[]) {
     if (links) {
+      console.log("from set links");
       const mapLinks = links.map((l) => this.linkToMapLink.convert(l));
       this.mapLinksDataSource.set(mapLinks);
 
@@ -88,6 +89,7 @@ export class GraphDataManager {
   private onDataUpdate() {
     this.layersManager.clear();
     this.layersManager.setNodes(this.getNodes());
+    console.log(this.getLinks());
     this.layersManager.setLinks(this.getLinks());
     this.layersManager.setDrawings(this.getDrawings());
   }

src/app/cartography/managers/layers-manager.ts

@@ -38,6 +38,7 @@ export class LayersManager {
   }
 
   public setLinks(links: MapLink[]) {
+    console.log('from set links 2');
     links
       .filter((link: MapLink) => link.source && link.target)
       .forEach((link: MapLink) => {

src/app/cartography/services/map-change-detector-ref.ts

@@ -7,6 +7,7 @@ export class MapChangeDetectorRef {
   public hasBeenDrawn = false;
 
   public detectChanges() {
+    console.log('from map change detector');
     this.changesDetected.emit(true);
   }
 }

src/app/cartography/widgets/links.ts

@@ -11,6 +11,7 @@ export class LinksWidget implements Widget {
   constructor(private multiLinkCalculatorHelper: MultiLinkCalculatorHelper, private linkWidget: LinkWidget) {}
 
   public redrawLink(view: SVGSelection, link: MapLink) {
+    console.log('redraw called');
     this.linkWidget.draw(this.selectLink(view, link));
   }
 

src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts

@@ -8,6 +8,8 @@ import { ToasterService } from '../../../../services/toaster.service';
 import { NonNegativeValidator } from '../../../../validators/non-negative-validator';
 import { LinkService } from '../../../../services/link.service';
 import { LinksDataSource } from '../../../../cartography/datasources/links-datasource';
+import { LinksEventSource } from '../../../../cartography/events/links-event-source';
+import { LinkToMapLinkConverter } from '../../../../cartography/converters/map/link-to-map-link-converter';
 
 @Component({
   selector: 'app-link-style-editor',
@@ -27,6 +29,8 @@ export class LinkStyleEditorDialogComponent implements OnInit {
     private toasterService: ToasterService,
     private linkService: LinkService,
     private linksDataSource: LinksDataSource,
+    private linksEventSource: LinksEventSource,
+    private linkToMapLink: LinkToMapLinkConverter,
     private nonNegativeValidator: NonNegativeValidator
   ) {
     this.formGroup = this.formBuilder.group({
@@ -66,6 +70,7 @@ export class LinkStyleEditorDialogComponent implements OnInit {
 
       this.linkService.updateLinkStyle(this.server, this.link).subscribe((link) => {
         this.linksDataSource.update(link);
+        this.linksEventSource.edited.next(this.linkToMapLink.convert(link));
         this.toasterService.success("Link updated");
         this.dialogRef.close();
       });

src/app/components/project-map/project-map.component.ts

@@ -267,6 +267,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     this.projectMapSubscription.add(
       this.linksDataSource.changes.subscribe((links: Link[]) => {
+        console.log('from project map component');
         this.links = links;
         this.mapChangeDetectorRef.detectChanges();
       })