From f2b70d562d9f8ec7b29cb6231343ec7fcb9ae5cc Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Wed, 21 Jul 2021 12:30:51 +0200 Subject: [PATCH] Changing link style --- src/app/cartography/cartography.module.ts | 2 ++ .../components/d3-map/d3-map.component.html | 1 + .../link-editing/link-editing.component.html | 0 .../link-editing/link-editing.component.scss | 0 .../link-editing/link-editing.component.ts | 31 +++++++++++++++++++ .../cartography/events/links-event-source.ts | 2 ++ .../managers/graph-data-manager.ts | 2 ++ .../cartography/managers/layers-manager.ts | 1 + .../services/map-change-detector-ref.ts | 1 + src/app/cartography/widgets/links.ts | 1 + .../link-style-editor.component.ts | 5 +++ .../project-map/project-map.component.ts | 1 + 12 files changed, 47 insertions(+) create mode 100644 src/app/cartography/components/link-editing/link-editing.component.html create mode 100644 src/app/cartography/components/link-editing/link-editing.component.scss create mode 100644 src/app/cartography/components/link-editing/link-editing.component.ts diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts index 7d7c813d..a900548f 100644 --- a/src/app/cartography/cartography.module.ts +++ b/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, ], diff --git a/src/app/cartography/components/d3-map/d3-map.component.html b/src/app/cartography/components/d3-map/d3-map.component.html index e166c697..c066bb4a 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.html +++ b/src/app/cartography/components/d3-map/d3-map.component.html @@ -46,3 +46,4 @@ + diff --git a/src/app/cartography/components/link-editing/link-editing.component.html b/src/app/cartography/components/link-editing/link-editing.component.html new file mode 100644 index 00000000..e69de29b diff --git a/src/app/cartography/components/link-editing/link-editing.component.scss b/src/app/cartography/components/link-editing/link-editing.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/cartography/components/link-editing/link-editing.component.ts b/src/app/cartography/components/link-editing/link-editing.component.ts new file mode 100644 index 00000000..65eb2e90 --- /dev/null +++ b/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(); + } +} diff --git a/src/app/cartography/events/links-event-source.ts b/src/app/cartography/events/links-event-source.ts index 53341290..7c831aa0 100644 --- a/src/app/cartography/events/links-event-source.ts +++ b/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(); + public edited = new EventEmitter(); public interfaceDragged = new EventEmitter>(); } diff --git a/src/app/cartography/managers/graph-data-manager.ts b/src/app/cartography/managers/graph-data-manager.ts index 278e96a0..a84693c2 100644 --- a/src/app/cartography/managers/graph-data-manager.ts +++ b/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()); } diff --git a/src/app/cartography/managers/layers-manager.ts b/src/app/cartography/managers/layers-manager.ts index f0e6007b..afb2e13e 100644 --- a/src/app/cartography/managers/layers-manager.ts +++ b/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) => { diff --git a/src/app/cartography/services/map-change-detector-ref.ts b/src/app/cartography/services/map-change-detector-ref.ts index c97c0df1..59c79171 100644 --- a/src/app/cartography/services/map-change-detector-ref.ts +++ b/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); } } diff --git a/src/app/cartography/widgets/links.ts b/src/app/cartography/widgets/links.ts index f6eecce6..59addeec 100644 --- a/src/app/cartography/widgets/links.ts +++ b/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)); } diff --git a/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts index 5a4a6721..78e5c6b2 100644 --- a/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts +++ b/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(); }); diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index e44ec93a..a40261d2 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/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(); })