From 93bb5a4117458704a1effa0ac8c6cf11cd67f713 Mon Sep 17 00:00:00 2001 From: ziajka Date: Fri, 1 Dec 2017 13:01:03 +0100 Subject: [PATCH] Changed approach for symbols --- src/app/cartography/map/map.component.ts | 14 ++++++++++++-- src/app/cartography/shared/models/node.model.ts | 3 --- .../cartography/shared/widgets/nodes.widget.ts | 16 +++++++++++++++- src/app/project-map/project-map.component.html | 2 +- src/app/project-map/project-map.component.ts | 12 ++++++++---- src/app/shared/services/symbol.service.ts | 2 +- 6 files changed, 37 insertions(+), 12 deletions(-) diff --git a/src/app/cartography/map/map.component.ts b/src/app/cartography/map/map.component.ts index ffa04ec5..b74fca86 100644 --- a/src/app/cartography/map/map.component.ts +++ b/src/app/cartography/map/map.component.ts @@ -10,7 +10,7 @@ import { GraphLayout } from "../shared/widgets/graph.widget"; import { Context } from "../../map/models/context"; import { Size } from "../shared/models/size.model"; import { Drawing } from "../shared/models/drawing.model"; -import {SVGSelection} from "../../map/models/types"; +import {Symbol} from "../../shared/models/symbol"; @Component({ @@ -22,6 +22,8 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { @Input() nodes: Node[] = []; @Input() links: Link[] = []; @Input() drawings: Drawing[] = []; + @Input() symbols: Symbol[] = []; + @Input() width = 1500; @Input() height = 600; @Input() windowFullSize = true; @@ -47,7 +49,8 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { (changes['height'] && !changes['height'].isFirstChange()) || (changes['drawings'] && !changes['drawings'].isFirstChange()) || (changes['nodes'] && !changes['nodes'].isFirstChange()) || - (changes['links'] && !changes['links'].isFirstChange()) + (changes['links'] && !changes['links'].isFirstChange()) || + (changes['symbols'] && !changes['symbols'].isFirstChange()) ) { if (this.svg.empty && !this.svg.empty()) { if (changes['nodes']) { @@ -56,6 +59,9 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { if (changes['links']) { this.onLinksChange(changes['links']); } + if (changes['symbols']) { + this.onSymbolsChange(changes['symbols']); + } this.changeLayout(); } } @@ -156,6 +162,10 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { this.onLinksChange(null); } + private onSymbolsChange(change: SimpleChange) { + this.graphLayout.getNodesWidget().setSymbols(this.symbols); + } + public redraw() { this.graphLayout.draw(this.svg, this.graphContext); } diff --git a/src/app/cartography/shared/models/node.model.ts b/src/app/cartography/shared/models/node.model.ts index b6dfe746..12a3a6cb 100644 --- a/src/app/cartography/shared/models/node.model.ts +++ b/src/app/cartography/shared/models/node.model.ts @@ -1,5 +1,4 @@ import {Label} from "./label.model"; -import {Symbol} from "../../../shared/models/symbol"; export class Node { command_line: string; @@ -24,6 +23,4 @@ export class Node { x: number; y: number; z: number; - - icon: Symbol; // not from server } diff --git a/src/app/cartography/shared/widgets/nodes.widget.ts b/src/app/cartography/shared/widgets/nodes.widget.ts index 88ff8962..616ec8ee 100644 --- a/src/app/cartography/shared/widgets/nodes.widget.ts +++ b/src/app/cartography/shared/widgets/nodes.widget.ts @@ -3,6 +3,7 @@ import { Node } from "../models/node.model"; import { SVGSelection } from "../../../map/models/types"; import {event, select} from "d3-selection"; import {D3DragEvent, drag} from "d3-drag"; +import {Symbol} from "../../../shared/models/symbol"; export interface NodeOnContextMenuListener { onContextMenu(): void; @@ -13,6 +14,8 @@ export class NodesWidget implements Widget { private onNodeDraggedCallback: (event: any, node: Node) => void; private onNodeDraggingCallbacks: ((event: any, node: Node) => void)[] = []; + private symbols: Symbol[] = []; + constructor() {} public setOnContextMenuCallback(onContextMenuCallback: (event: any, node: Node) => void) { @@ -27,6 +30,10 @@ export class NodesWidget implements Widget { this.onNodeDraggingCallbacks.push(onNodeDraggingCallback); } + public setSymbols(symbols: Symbol[]) { + this.symbols = symbols; + } + private executeOnNodeDraggingCallback(n: Node) { this.onNodeDraggingCallbacks.forEach((callback: (n: Node) => void) => { callback(n); @@ -63,7 +70,14 @@ export class NodesWidget implements Widget { .attr('class', 'node'); const node_image = node_enter.append('image') - .attr('xlink:href', (n: Node) => 'data:image/svg+xml;base64,' + btoa(n.icon.raw)) + .attr('xlink:href', (n: Node) => { + const symbol = this.symbols.find((s: Symbol) => s.symbol_id === n.symbol); + if (symbol) { + return 'data:image/svg+xml;base64,' + btoa(symbol.raw); + } + // @todo; we need to have default image + return 'data:image/svg+xml;base64,none'; + }) .attr('width', (n: Node) => n.width) .attr('height', (n: Node) => n.height); diff --git a/src/app/project-map/project-map.component.html b/src/app/project-map/project-map.component.html index 265ad840..a279b224 100644 --- a/src/app/project-map/project-map.component.html +++ b/src/app/project-map/project-map.component.html @@ -1,5 +1,5 @@
- +
diff --git a/src/app/project-map/project-map.component.ts b/src/app/project-map/project-map.component.ts index aef97fce..181c3a01 100644 --- a/src/app/project-map/project-map.component.ts +++ b/src/app/project-map/project-map.component.ts @@ -29,6 +29,7 @@ import { Drawing } from "../cartography/shared/models/drawing.model"; import { NodeContextMenuComponent } from "../shared/node-context-menu/node-context-menu.component"; import {Appliance} from "../shared/models/appliance"; import {NodeService} from "../shared/services/node.service"; +import {Symbol} from "../shared/models/symbol"; @Component({ @@ -41,6 +42,7 @@ export class ProjectMapComponent implements OnInit { public nodes: Node[] = []; public links: Link[] = []; public drawings: Drawing[] = []; + public symbols: Symbol[] = []; project: Project; public server: Server; @@ -88,6 +90,10 @@ export class ProjectMapComponent implements OnInit { this.onProjectLoad(project); }); }); + + this.symbolService.symbols.subscribe((symbols: Symbol[]) => { + this.symbols = symbols; + }); } onProjectLoad(project: Project) { @@ -107,13 +113,11 @@ export class ProjectMapComponent implements OnInit { .subscribe((nodes: Node[]) => { this.nodes = nodes; - nodes.forEach((n: Node) => { - n.icon = this.symbolService.get(n.symbol); - }); - this.setUpMapCallbacks(project); this.setUpWS(project); }); + + } setUpWS(project: Project) { diff --git a/src/app/shared/services/symbol.service.ts b/src/app/shared/services/symbol.service.ts index f96bb130..712d72a7 100644 --- a/src/app/shared/services/symbol.service.ts +++ b/src/app/shared/services/symbol.service.ts @@ -13,7 +13,7 @@ import { HttpServer } from "./http-server.service"; @Injectable() export class SymbolService { - private symbols: BehaviorSubject = new BehaviorSubject([]); + public symbols: BehaviorSubject = new BehaviorSubject([]); constructor(private httpServer: HttpServer) { }