diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts index 43173aa4..e388fa44 100644 --- a/src/app/cartography/cartography.module.ts +++ b/src/app/cartography/cartography.module.ts @@ -21,6 +21,20 @@ import { DrawingsDraggableListener } from './listeners/drawings-draggable-listen import { NodesDraggableListener } from './listeners/nodes-draggable-listener'; import { DrawingsEventSource } from './events/drawings-event-source'; import { NodesEventSource } from './events/nodes-event-source'; +import { DrawingToMapDrawingConverter } from './converters/map/drawing-to-map-drawing-converter'; +import { LabelToMapLabelConverter } from './converters/map/label-to-map-label-converter'; +import { LinkToMapLinkConverter } from './converters/map/link-to-map-link-converter'; +import { MapDrawingToDrawingConverter } from './converters/map/map-drawing-to-drawing-converter'; +import { MapLabelToLabelConverter } from './converters/map/map-label-to-label-converter'; +import { MapLinkNodeToLinkNodeConverter } from './converters/map/map-link-node-to-link-node-converter'; +import { MapLinkToLinkConverter } from './converters/map/map-link-to-link-converter'; +import { MapNodeToNodeConverter } from './converters/map/map-node-to-node-converter'; +import { MapPortToPortConverter } from './converters/map/map-port-to-port-converter'; +import { MapSymbolToSymbolConverter } from './converters/map/map-symbol-to-symbol-converter'; +import { NodeToMapNodeConverter } from './converters/map/node-to-map-node-converter'; +import { PortToMapPortConverter } from './converters/map/port-to-map-port-converter'; +import { SymbolToMapSymbolConverter } from './converters/map/symbol-to-map-symbol-converter'; +import { LinkNodeToMapLinkNodeConverter } from './converters/map/link-node-to-map-link-node-converter'; @NgModule({ @@ -49,6 +63,20 @@ import { NodesEventSource } from './events/nodes-event-source'; NodesDraggableListener, DrawingsEventSource, NodesEventSource, + DrawingToMapDrawingConverter, + LabelToMapLabelConverter, + LinkToMapLinkConverter, + LinkNodeToMapLinkNodeConverter, + MapDrawingToDrawingConverter, + MapLabelToLabelConverter, + MapLinkNodeToLinkNodeConverter, + MapLinkToLinkConverter, + MapNodeToNodeConverter, + MapPortToPortConverter, + MapSymbolToSymbolConverter, + NodeToMapNodeConverter, + PortToMapPortConverter, + SymbolToMapSymbolConverter, ...D3_MAP_IMPORTS ], exports: [ MapComponent ] diff --git a/src/app/cartography/components/draw-link-tool/draw-link-tool.component.ts b/src/app/cartography/components/draw-link-tool/draw-link-tool.component.ts index c3bcdffe..917fc567 100644 --- a/src/app/cartography/components/draw-link-tool/draw-link-tool.component.ts +++ b/src/app/cartography/components/draw-link-tool/draw-link-tool.component.ts @@ -1,12 +1,12 @@ import { Component, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core'; -import { Port } from '../../../models/port'; import { DrawingLineWidget } from '../../widgets/drawing-line'; -import { Node } from '../../models/node'; import { Subscription } from 'rxjs'; import { NodeSelectInterfaceComponent } from '../node-select-interface/node-select-interface.component'; import { LinkCreated } from '../../events/links'; import { NodeClicked } from '../../events/nodes'; import { NodeWidget } from '../../widgets/node'; +import { MapNode } from '../../models/map/map-node'; +import { MapPort } from '../../models/map/map-port'; @Component({ @@ -37,15 +37,15 @@ export class DrawLinkToolComponent implements OnInit, OnDestroy { } ngOnDestroy() { - if(this.drawingLineTool.isDrawing()) { + if (this.drawingLineTool.isDrawing()) { this.drawingLineTool.stop(); } this.onNodeClicked.unsubscribe(); } public onChooseInterface(event) { - const node: Node = event.node; - const port: Port = event.port; + const node: MapNode = event.node; + const port: MapPort = event.port; if (this.drawingLineTool.isDrawing()) { const data = this.drawingLineTool.stop(); this.linkCreated.emit(new LinkCreated(data['node'], data['port'], node, port)); diff --git a/src/app/cartography/components/map/map.component.ts b/src/app/cartography/components/map/map.component.ts index 9acdb21d..b86ecb66 100644 --- a/src/app/cartography/components/map/map.component.ts +++ b/src/app/cartography/components/map/map.component.ts @@ -3,13 +3,9 @@ import { } from '@angular/core'; import { Selection, select } from 'd3-selection'; -import { Node } from "../../models/node"; -import { Link } from "../../../models/link"; import { GraphLayout } from "../../widgets/graph-layout"; import { Context } from "../../models/context"; import { Size } from "../../models/size"; -import { Drawing } from "../../models/drawing"; -import { Symbol } from '../../../models/symbol'; import { NodesWidget } from '../../widgets/nodes'; import { Subscription } from 'rxjs'; import { InterfaceLabelWidget } from '../../widgets/interface-label'; @@ -25,6 +21,15 @@ import { DraggedDataEvent } from '../../events/event-source'; import { NodesEventSource } from '../../events/nodes-event-source'; import { DrawingsEventSource } from '../../events/drawings-event-source'; import { DrawingsWidget } from '../../widgets/drawings'; +import { Node } from '../../models/node'; +import { Link } from '../../../models/link'; +import { Drawing } from '../../models/drawing'; +import { Symbol } from '../../../models/symbol'; +import { MapNodeToNodeConverter } from '../../converters/map/map-node-to-node-converter'; +import { NodeToMapNodeConverter } from '../../converters/map/node-to-map-node-converter'; +import { DrawingToMapDrawingConverter } from '../../converters/map/drawing-to-map-drawing-converter'; +import { LinkToMapLinkConverter } from '../../converters/map/link-to-map-link-converter'; +import { SymbolToMapSymbolConverter } from '../../converters/map/symbol-to-map-symbol-converter'; @Component({ @@ -41,14 +46,16 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { @Input() width = 1500; @Input() height = 600; - @Output() nodeDragged: EventEmitter>; - @Output() drawingDragged: EventEmitter>; + @Output() nodeDragged = new EventEmitter>(); + @Output() drawingDragged = new EventEmitter>(); @Output() onLinkCreated = new EventEmitter(); private parentNativeElement: any; private svg: Selection; private onChangesDetected: Subscription; + private nodeDraggedSub: Subscription; + private drawingDraggedSub: Subscription; protected settings = { 'show_interface_labels': true @@ -59,6 +66,11 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { private mapChangeDetectorRef: MapChangeDetectorRef, private canvasSizeDetector: CanvasSizeDetector, private mapListeners: MapListeners, + private mapNodeToNode: MapNodeToNodeConverter, + private nodeToMapNode: NodeToMapNodeConverter, + private linkToMapLink: LinkToMapLinkConverter, + private drawingToMapDrawing: DrawingToMapDrawingConverter, + private symbolToMapSymbol: SymbolToMapSymbolConverter, protected element: ElementRef, protected nodesWidget: NodesWidget, protected nodeWidget: NodeWidget, @@ -68,12 +80,10 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { protected selectionToolWidget: SelectionTool, protected movingToolWidget: MovingTool, public graphLayout: GraphLayout, - nodesEventSource: NodesEventSource, - drawingsEventSource: DrawingsEventSource, + private nodesEventSource: NodesEventSource, + private drawingsEventSource: DrawingsEventSource, ) { this.parentNativeElement = element.nativeElement; - this.nodeDragged = nodesEventSource.dragged; - this.drawingDragged = drawingsEventSource.dragged; } @Input('show-interface-labels') @@ -138,6 +148,11 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { } }); + this.nodeDraggedSub = this.nodesEventSource.dragged.subscribe((evt) => { + const converted = this.mapNodeToNode.convert(evt.datum); + this.nodeDragged.emit(new DraggedDataEvent(converted)); + }); + this.mapListeners.onInit(this.svg); } @@ -145,6 +160,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { this.graphLayout.disconnect(this.svg); this.onChangesDetected.unsubscribe(); this.mapListeners.onDestroy(); + this.nodeDraggedSub.unsubscribe(); } public createGraph(domElement: HTMLElement) { @@ -168,13 +184,29 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { this.context.size = this.getSize(); } - this.graphLayout.setNodes(this.nodes); - this.graphLayout.setLinks(this.links); - this.graphLayout.setDrawings(this.drawings); + this.setNodes(this.nodes); + this.setLinks(this.links); + this.setDrawings(this.drawings); this.redraw(); } + private setNodes(nodes: Node[]) { + this.graphLayout.setNodes(nodes.map((n) => this.nodeToMapNode.convert(n))); + } + + private setLinks(links: Link[]) { + this.graphLayout.setLinks(links.map((l) => this.linkToMapLink.convert(l))); + } + + private setDrawings(drawings: Drawing[]) { + this.graphLayout.setDrawings(drawings.map((d) => this.drawingToMapDrawing.convert(d))); + } + + private setSymbols(symbols: Symbol[]) { + this.nodeWidget.setSymbols(symbols.map((s) => this.symbolToMapSymbol.convert(s))); + } + private onLinksChange(change: SimpleChange) { const nodes_by_id = {}; this.nodes.forEach((n: Node) => { @@ -203,7 +235,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { } private onSymbolsChange(change: SimpleChange) { - this.nodeWidget.setSymbols(this.symbols); + this.setSymbols(this.symbols); } public redraw() { diff --git a/src/app/cartography/components/node-select-interface/node-select-interface.component.ts b/src/app/cartography/components/node-select-interface/node-select-interface.component.ts index 40d9da3a..4b773fc4 100644 --- a/src/app/cartography/components/node-select-interface/node-select-interface.component.ts +++ b/src/app/cartography/components/node-select-interface/node-select-interface.component.ts @@ -1,8 +1,8 @@ import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'; import { MatMenuTrigger } from "@angular/material"; import { DomSanitizer } from "@angular/platform-browser"; -import { Node } from "../../../cartography/models/node"; -import { Port } from "../../../models/port"; +import { MapNode } from '../../models/map/map-node'; +import { MapPort } from '../../models/map/map-port'; @Component({ @@ -18,7 +18,7 @@ export class NodeSelectInterfaceComponent implements OnInit { protected topPosition; protected leftPosition; - public node: Node; + public node: MapNode; constructor( private sanitizer: DomSanitizer, @@ -35,13 +35,13 @@ export class NodeSelectInterfaceComponent implements OnInit { this.changeDetector.detectChanges(); } - public open(node: Node, top: number, left: number) { + public open(node: MapNode, top: number, left: number) { this.node = node; this.setPosition(top, left); this.contextMenu.openMenu(); } - public chooseInterface(port: Port) { + public chooseInterface(port: MapPort) { this.onChooseInterface.emit({ 'node': this.node, 'port': port diff --git a/src/app/cartography/converters/map/link-node-to-map-link-node-converter.ts b/src/app/cartography/converters/map/link-node-to-map-link-node-converter.ts index 281a8e2b..48f3cc2e 100644 --- a/src/app/cartography/converters/map/link-node-to-map-link-node-converter.ts +++ b/src/app/cartography/converters/map/link-node-to-map-link-node-converter.ts @@ -1,9 +1,9 @@ import { Injectable } from "@angular/core"; import { Converter } from "../converter"; +import { LabelToMapLabelConverter } from "./label-to-map-label-converter"; import { LinkNode } from "../../../models/link-node"; import { MapLinkNode } from "../../models/map/map-link-node"; -import { LabelToMapLabelConverter } from "./label-to-map-label-converter"; @Injectable() diff --git a/src/app/cartography/converters/map/link-to-map-link-converter.ts b/src/app/cartography/converters/map/link-to-map-link-converter.ts index bda414f7..0000ad78 100644 --- a/src/app/cartography/converters/map/link-to-map-link-converter.ts +++ b/src/app/cartography/converters/map/link-to-map-link-converter.ts @@ -1,9 +1,9 @@ import { Injectable } from "@angular/core"; import { Converter } from "../converter"; -import { MapLink } from "../../models/map/map-link"; -import { Link } from "../../../models/link"; import { LinkNodeToMapLinkNodeConverter } from "./link-node-to-map-link-node-converter"; +import { Link } from "../../../models/link"; +import { MapLink } from "../../models/map/map-link"; @Injectable() diff --git a/src/app/cartography/converters/map/map-link-node-to-link-node-converter.ts b/src/app/cartography/converters/map/map-link-node-to-link-node-converter.ts index 9afbd415..1f8e5c98 100644 --- a/src/app/cartography/converters/map/map-link-node-to-link-node-converter.ts +++ b/src/app/cartography/converters/map/map-link-node-to-link-node-converter.ts @@ -1,9 +1,9 @@ import { Injectable } from "@angular/core"; import { Converter } from "../converter"; -import { LinkNode } from "../../../models/link-node"; import { MapLinkNode } from "../../models/map/map-link-node"; import { MapLabelToLabelConverter } from "./map-label-to-label-converter"; +import { LinkNode } from "../../../models/link-node"; @Injectable() diff --git a/src/app/cartography/converters/map/map-link-to-link-converter.ts b/src/app/cartography/converters/map/map-link-to-link-converter.ts index 1e43ce9c..b892d69f 100644 --- a/src/app/cartography/converters/map/map-link-to-link-converter.ts +++ b/src/app/cartography/converters/map/map-link-to-link-converter.ts @@ -1,9 +1,9 @@ import { Injectable } from "@angular/core"; import { Converter } from "../converter"; -import { MapLink } from "../../models/map/map-link"; -import { Link } from "../../../models/link"; import { MapLinkNodeToLinkNodeConverter } from "./map-link-node-to-link-node-converter"; +import { Link } from "../../../models/link"; +import { MapLink } from "../../models/map/map-link"; @Injectable() diff --git a/src/app/cartography/converters/map/map-node-to-node-converter.ts b/src/app/cartography/converters/map/map-node-to-node-converter.ts index 49682162..f45ab71c 100644 --- a/src/app/cartography/converters/map/map-node-to-node-converter.ts +++ b/src/app/cartography/converters/map/map-node-to-node-converter.ts @@ -2,9 +2,9 @@ import { Injectable } from "@angular/core"; import { Converter } from "../converter"; import { MapNode } from "../../models/map/map-node"; -import { Node } from "../../models/node"; import { MapLabelToLabelConverter } from "./map-label-to-label-converter"; import { MapPortToPortConverter } from "./map-port-to-port-converter"; +import { Node } from "../../models/node"; @Injectable() diff --git a/src/app/cartography/converters/map/map-port-to-port-converter.ts b/src/app/cartography/converters/map/map-port-to-port-converter.ts index 77b708ab..0d40fec3 100644 --- a/src/app/cartography/converters/map/map-port-to-port-converter.ts +++ b/src/app/cartography/converters/map/map-port-to-port-converter.ts @@ -1,8 +1,8 @@ import { Injectable } from "@angular/core"; import { Converter } from "../converter"; -import { MapPort } from "../../models/map/map-port"; import { Port } from "../../../models/port"; +import { MapPort } from "../../models/map/map-port"; @Injectable() diff --git a/src/app/cartography/converters/map/port-to-map-port-converter.ts b/src/app/cartography/converters/map/port-to-map-port-converter.ts index c709fb80..32fc12bc 100644 --- a/src/app/cartography/converters/map/port-to-map-port-converter.ts +++ b/src/app/cartography/converters/map/port-to-map-port-converter.ts @@ -1,8 +1,8 @@ import { Injectable } from "@angular/core"; import { Converter } from "../converter"; -import { MapPort } from "../../models/map/map-port"; import { Port } from "../../../models/port"; +import { MapPort } from "../../models/map/map-port"; @Injectable() diff --git a/src/app/cartography/converters/map/symbol-to-map-symbol-converter.ts b/src/app/cartography/converters/map/symbol-to-map-symbol-converter.ts index 66b35e7b..c02f8964 100644 --- a/src/app/cartography/converters/map/symbol-to-map-symbol-converter.ts +++ b/src/app/cartography/converters/map/symbol-to-map-symbol-converter.ts @@ -1,8 +1,8 @@ import { Injectable } from "@angular/core"; import { Converter } from "../converter"; -import { MapSymbol } from "../../models/map/map-symbol"; import { Symbol } from "../../../models/symbol"; +import { MapSymbol } from "../../models/map/map-symbol"; @Injectable() diff --git a/src/app/cartography/datasources/drawings-datasource.spec.ts b/src/app/cartography/datasources/drawings-datasource.spec.ts index 8a5f4fb8..3f17bdb0 100644 --- a/src/app/cartography/datasources/drawings-datasource.spec.ts +++ b/src/app/cartography/datasources/drawings-datasource.spec.ts @@ -1,21 +1,21 @@ import { DrawingsDataSource } from "./drawings-datasource"; -import { Drawing } from "../models/drawing"; +import { MapDrawing } from "../models/drawing"; describe('DrawingsDataSource', () => { let dataSource: DrawingsDataSource; - let data: Drawing[]; + let data: MapDrawing[]; beforeEach(() => { dataSource = new DrawingsDataSource(); - dataSource.changes.subscribe((drawings: Drawing[]) => { + dataSource.changes.subscribe((drawings: MapDrawing[]) => { data = drawings; }); }); describe('Drawing can be updated', () => { beforeEach(() => { - const drawing = new Drawing(); + const drawing = new MapDrawing(); drawing.drawing_id = "1"; drawing.project_id = "project1"; dataSource.add(drawing); diff --git a/src/app/cartography/datasources/drawings-datasource.ts b/src/app/cartography/datasources/drawings-datasource.ts index bb10bb75..0b865a57 100644 --- a/src/app/cartography/datasources/drawings-datasource.ts +++ b/src/app/cartography/datasources/drawings-datasource.ts @@ -1,7 +1,7 @@ import { Injectable } from "@angular/core"; -import { Drawing } from "../models/drawing"; import { DataSource } from "./datasource"; +import { Drawing } from "../models/drawing"; @Injectable() diff --git a/src/app/cartography/datasources/links-datasource.ts b/src/app/cartography/datasources/links-datasource.ts index 4b5918df..36072873 100644 --- a/src/app/cartography/datasources/links-datasource.ts +++ b/src/app/cartography/datasources/links-datasource.ts @@ -1,7 +1,7 @@ import { Injectable } from "@angular/core"; import { DataSource } from "./datasource"; -import { Link} from "../../models/link"; +import { Link } from "../../models/link"; @Injectable() diff --git a/src/app/cartography/events/drawings-event-source.ts b/src/app/cartography/events/drawings-event-source.ts index a24f2b6b..40e1093e 100644 --- a/src/app/cartography/events/drawings-event-source.ts +++ b/src/app/cartography/events/drawings-event-source.ts @@ -1,9 +1,9 @@ import { Injectable, EventEmitter } from "@angular/core"; -import { Drawing } from "../models/drawing"; import { DraggedDataEvent } from "./event-source"; +import { MapDrawing } from "../models/map/map-drawing"; @Injectable() export class DrawingsEventSource { - public dragged = new EventEmitter>(); -} \ No newline at end of file + public dragged = new EventEmitter>(); +} diff --git a/src/app/cartography/events/links.ts b/src/app/cartography/events/links.ts index b8c3ff1c..9d749cab 100644 --- a/src/app/cartography/events/links.ts +++ b/src/app/cartography/events/links.ts @@ -1,12 +1,12 @@ -import { Node } from "../models/node"; -import { Port } from "../../models/port"; +import { MapNode } from "../models/map/map-node"; +import { MapPort } from "../models/map/map-port"; export class LinkCreated { constructor( - public sourceNode: Node, - public sourcePort: Port, - public targetNode: Node, - public targetPort: Port - ){} + public sourceNode: MapNode, + public sourcePort: MapPort, + public targetNode: MapNode, + public targetPort: MapPort + ) {} } diff --git a/src/app/cartography/events/nodes-event-source.ts b/src/app/cartography/events/nodes-event-source.ts index bd237506..1930828b 100644 --- a/src/app/cartography/events/nodes-event-source.ts +++ b/src/app/cartography/events/nodes-event-source.ts @@ -1,9 +1,9 @@ import { Injectable, EventEmitter } from "@angular/core"; -import { Node } from "../models/node"; import { DraggedDataEvent } from "./event-source"; +import { MapNode } from "../models/map/map-node"; @Injectable() export class NodesEventSource { - public dragged = new EventEmitter>(); -} \ No newline at end of file + public dragged = new EventEmitter>(); +} diff --git a/src/app/cartography/events/nodes.ts b/src/app/cartography/events/nodes.ts index fdfa441d..77c03c93 100644 --- a/src/app/cartography/events/nodes.ts +++ b/src/app/cartography/events/nodes.ts @@ -1,9 +1,9 @@ -import { Node } from "../models/node"; +import { MapNode } from "../models/map/map-node"; class NodeEvent { constructor( public event: any, - public node: Node + public node: MapNode ) {} } @@ -11,4 +11,4 @@ export class NodeDragging extends NodeEvent {} export class NodeDragged extends NodeEvent {} export class NodeClicked extends NodeEvent {} -export class NodeContextMenu extends NodeEvent {} \ No newline at end of file +export class NodeContextMenu extends NodeEvent {} diff --git a/src/app/cartography/helpers/multi-link-calculator-helper.ts b/src/app/cartography/helpers/multi-link-calculator-helper.ts index b7189b98..d519bfa0 100644 --- a/src/app/cartography/helpers/multi-link-calculator-helper.ts +++ b/src/app/cartography/helpers/multi-link-calculator-helper.ts @@ -1,5 +1,5 @@ import { Injectable } from "@angular/core"; -import { Link } from "../../models/link"; +import { MapLink } from "../models/map/map-link"; @Injectable() @@ -30,11 +30,11 @@ export class MultiLinkCalculatorHelper { }; } - public assignDataToLinks(links: Link[]) { + public assignDataToLinks(links: MapLink[]) { const links_from_nodes = {}; - links.forEach((l: Link, i: number) => { - const sid = l.source.node_id; - const tid = l.target.node_id; + links.forEach((l: MapLink, i: number) => { + const sid = l.source.id; + const tid = l.target.id; const key = (sid < tid ? sid + "," + tid : tid + "," + sid); let idx = 1; if (!(key in links_from_nodes)) { diff --git a/src/app/cartography/listeners/drawings-draggable-listener.ts b/src/app/cartography/listeners/drawings-draggable-listener.ts index 2ea16d6f..28c1595d 100644 --- a/src/app/cartography/listeners/drawings-draggable-listener.ts +++ b/src/app/cartography/listeners/drawings-draggable-listener.ts @@ -1,11 +1,11 @@ import { Injectable } from "@angular/core"; import { DrawingsWidget } from "../widgets/drawings"; import { DraggableStart } from "../events/draggable"; -import { Drawing } from "../models/drawing"; import { Subscription } from "rxjs"; import { SelectionManager } from "../managers/selection-manager"; import { DrawingsEventSource } from "../events/drawings-event-source"; import { DraggedDataEvent } from "../events/event-source"; +import { MapDrawing } from "../models/map/map-drawing"; @Injectable() @@ -22,26 +22,26 @@ export class DrawingsDraggableListener { } public onInit(svg: any) { - this.start = this.drawingsWidget.draggable.start.subscribe((evt: DraggableStart) => { - let drawings = this.selectionManager.getSelectedDrawings(); - if (drawings.filter((n: Drawing) => n.drawing_id === evt.datum.drawing_id).length === 0) { + this.start = this.drawingsWidget.draggable.start.subscribe((evt: DraggableStart) => { + const drawings = this.selectionManager.getSelectedDrawings(); + if (drawings.filter((n: MapDrawing) => n.id === evt.datum.id).length === 0) { this.selectionManager.setSelectedDrawings([evt.datum]); } }); - this.drag = this.drawingsWidget.draggable.drag.subscribe((evt: DraggableStart) => { - let drawings = this.selectionManager.getSelectedDrawings(); - drawings.forEach((drawing: Drawing) => { + this.drag = this.drawingsWidget.draggable.drag.subscribe((evt: DraggableStart) => { + const drawings = this.selectionManager.getSelectedDrawings(); + drawings.forEach((drawing: MapDrawing) => { drawing.x += evt.dx; drawing.y += evt.dy; this.drawingsWidget.redrawDrawing(svg, drawing); }); }); - this.end = this.drawingsWidget.draggable.end.subscribe((evt: DraggableStart) => { - let drawings = this.selectionManager.getSelectedDrawings(); - drawings.forEach((drawing: Drawing) => { - this.drawingsEventSource.dragged.emit(new DraggedDataEvent(drawing)); + this.end = this.drawingsWidget.draggable.end.subscribe((evt: DraggableStart) => { + const drawings = this.selectionManager.getSelectedDrawings(); + drawings.forEach((drawing: MapDrawing) => { + this.drawingsEventSource.dragged.emit(new DraggedDataEvent(drawing)); }); }); } diff --git a/src/app/cartography/listeners/nodes-draggable-listener.ts b/src/app/cartography/listeners/nodes-draggable-listener.ts index 795a070a..e0fcd7c6 100644 --- a/src/app/cartography/listeners/nodes-draggable-listener.ts +++ b/src/app/cartography/listeners/nodes-draggable-listener.ts @@ -1,13 +1,13 @@ import { Injectable } from "@angular/core"; import { NodesWidget } from "../widgets/nodes"; import { DraggableStart } from "../events/draggable"; -import { Node } from "../models/node"; import { Subscription } from "rxjs"; import { SelectionManager } from "../managers/selection-manager"; import { LinksWidget } from "../widgets/links"; import { GraphLayout } from "../widgets/graph-layout"; import { NodesEventSource } from "../events/nodes-event-source"; import { DraggedDataEvent } from "../events/event-source"; +import { MapNode } from "../models/map/map-node"; @Injectable() @@ -26,31 +26,32 @@ export class NodesDraggableListener { } public onInit(svg: any) { - this.start = this.nodesWidget.draggable.start.subscribe((evt: DraggableStart) => { - let nodes = this.selectionManager.getSelectedNodes(); - if (nodes.filter((n: Node) => n.node_id === evt.datum.node_id).length === 0) { + this.start = this.nodesWidget.draggable.start.subscribe((evt: DraggableStart) => { + const nodes = this.selectionManager.getSelectedNodes(); + if (nodes.filter((n: MapNode) => n.id === evt.datum.id).length === 0) { this.selectionManager.setSelectedNodes([evt.datum]); } }); - this.drag = this.nodesWidget.draggable.drag.subscribe((evt: DraggableStart) => { - let nodes = this.selectionManager.getSelectedNodes(); - nodes.forEach((node: Node) => { + this.drag = this.nodesWidget.draggable.drag.subscribe((evt: DraggableStart) => { + const nodes = this.selectionManager.getSelectedNodes(); + nodes.forEach((node: MapNode) => { node.x += evt.dx; node.y += evt.dy; this.nodesWidget.redrawNode(svg, node); - const links = this.graphLayout.getLinks().filter((link) => link.target.node_id === node.node_id || link.source.node_id === node.node_id); + const links = this.graphLayout.getLinks().filter( + (link) => link.target.id === node.id || link.source.id === node.id); links.forEach((link) => { this.linksWidget.redrawLink(svg, link); }); }); }); - this.end = this.nodesWidget.draggable.end.subscribe((evt: DraggableStart) => { - let nodes = this.selectionManager.getSelectedNodes(); - nodes.forEach((node: Node) => { - this.nodesEventSource.dragged.emit(new DraggedDataEvent(node)); + this.end = this.nodesWidget.draggable.end.subscribe((evt: DraggableStart) => { + const nodes = this.selectionManager.getSelectedNodes(); + nodes.forEach((node: MapNode) => { + this.nodesEventSource.dragged.emit(new DraggedDataEvent(node)); }); }); } diff --git a/src/app/cartography/managers/layers-manager.spec.ts b/src/app/cartography/managers/layers-manager.spec.ts index a9f709e9..5a1571a1 100644 --- a/src/app/cartography/managers/layers-manager.spec.ts +++ b/src/app/cartography/managers/layers-manager.spec.ts @@ -1,7 +1,7 @@ import { LayersManager } from "./layers-manager"; -import { Node } from "../models/node"; -import { Drawing } from "../models/drawing"; -import { Link } from "../../models/link"; +import { MapDrawing } from "../models/map/map-drawing"; +import { MapLink } from "../models/map/map-link"; +import { MapNode } from "../models/map/map-node"; describe('LayersManager', () => { @@ -12,9 +12,9 @@ describe('LayersManager', () => { }); it('nodes should be added', () => { - const node_1 = new Node(); + const node_1 = new MapNode(); node_1.z = 1; - const node_2 = new Node(); + const node_2 = new MapNode(); node_2.z = 2; manager.setNodes([node_1, node_2]); @@ -27,9 +27,9 @@ describe('LayersManager', () => { }); it('drawings should be added', () => { - const drawing_1 = new Drawing(); + const drawing_1 = new MapDrawing(); drawing_1.z = 1; - const drawing_2 = new Drawing(); + const drawing_2 = new MapDrawing(); drawing_2.z = 2; manager.setDrawings([drawing_1, drawing_2]); @@ -42,17 +42,17 @@ describe('LayersManager', () => { }); it('links should be added', () => { - const node_1 = new Node(); + const node_1 = new MapNode(); node_1.z = 1; - const node_2 = new Node(); + const node_2 = new MapNode(); node_2.z = 2; - const link_1 = new Link(); + const link_1 = new MapLink(); link_1.source = node_1; link_1.target = node_1; - const link_2 = new Link(); + const link_2 = new MapLink(); link_2.source = node_1; link_2.target = node_1; @@ -64,9 +64,9 @@ describe('LayersManager', () => { }); it('layers should be cleared', () => { - const node_1 = new Node(); + const node_1 = new MapNode(); node_1.z = 1; - const node_2 = new Node(); + const node_2 = new MapNode(); node_2.z = 2; manager.setNodes([node_1, node_2]); diff --git a/src/app/cartography/managers/layers-manager.ts b/src/app/cartography/managers/layers-manager.ts index bfa86be8..773160cf 100644 --- a/src/app/cartography/managers/layers-manager.ts +++ b/src/app/cartography/managers/layers-manager.ts @@ -1,10 +1,10 @@ import { Injectable } from "@angular/core"; import { Layer } from "../models/layer"; -import { Node } from "../models/node"; -import { Drawing } from "../models/drawing"; -import { Link } from "../../models/link"; import { Dictionary } from "../models/types"; +import { MapNode } from "../models/map/map-node"; +import { MapDrawing } from "../models/map/map-drawing"; +import { MapLink } from "../models/map/map-link"; @Injectable() @@ -23,26 +23,26 @@ export class LayersManager { }); } - public setNodes(nodes: Node[]) { + public setNodes(nodes: MapNode[]) { nodes - .forEach((node: Node) => { + .forEach((node: MapNode) => { const layer = this.getLayerForKey(node.z.toString()); layer.nodes.push(node); }); } - public setDrawings(drawings: Drawing[]) { + public setDrawings(drawings: MapDrawing[]) { drawings - .forEach((drawing: Drawing) => { + .forEach((drawing: MapDrawing) => { const layer = this.getLayerForKey(drawing.z.toString()); layer.drawings.push(drawing); }); } - public setLinks(links: Link[]) { + public setLinks(links: MapLink[]) { links - .filter((link: Link) => link.source && link.target) - .forEach((link: Link) => { + .filter((link: MapLink) => link.source && link.target) + .forEach((link: MapLink) => { const key = Math.min(link.source.z, link.target.z).toString(); const layer = this.getLayerForKey(key); layer.links.push(link); diff --git a/src/app/cartography/managers/selection-manager.spec.ts b/src/app/cartography/managers/selection-manager.spec.ts index b627dd84..d40bb0a4 100644 --- a/src/app/cartography/managers/selection-manager.spec.ts +++ b/src/app/cartography/managers/selection-manager.spec.ts @@ -1,14 +1,14 @@ import { Subject} from "rxjs"; -import { Node } from "../models/node"; -import { Link } from "../../models/link"; -import { Drawing } from "../models/drawing"; import { Rectangle } from "../models/rectangle"; import { SelectionManager } from "./selection-manager"; import { NodesDataSource } from "../datasources/nodes-datasource"; import { LinksDataSource } from "../datasources/links-datasource"; import { InRectangleHelper } from "../helpers/in-rectangle-helper"; import { DrawingsDataSource } from "../datasources/drawings-datasource"; +import { MapNode } from "../models/map/map-node"; +import { MapLink } from "../models/map/map-link"; +import { MapDrawing } from "../models/map/map-drawing"; describe('SelectionManager', () => { @@ -28,23 +28,23 @@ describe('SelectionManager', () => { manager = new SelectionManager(nodesDataSource, linksDataSource, drawingsDataSource, inRectangleHelper); manager.subscribe(selectedRectangleSubject); - const node_1 = new Node(); - node_1.node_id = "test1"; + const node_1 = new MapNode(); + node_1.id = "test1"; node_1.name = "Node 1"; node_1.x = 150; node_1.y = 150; nodesDataSource.add(node_1); - const node_2 = new Node(); - node_2.node_id = "test2"; + const node_2 = new MapNode(); + node_2.id = "test2"; node_2.name = "Node 2"; node_2.x = 300; node_2.y = 300; nodesDataSource.add(node_2); - const link_1 = new Link(); - link_1.link_id = "test1"; + const link_1 = new MapLink(); + link_1.id = "test1"; linksDataSource.add(link_1); }); @@ -64,26 +64,26 @@ describe('SelectionManager', () => { }); it('nodes should be manually selected', () => { - const node = new Node(); - node.node_id = "test1"; + const node = new MapNode(); + node.id = "test1"; manager.setSelectedNodes([node]); expect(manager.getSelectedNodes().length).toEqual(1); }); it('links should be manually selected', () => { - const link = new Link(); - link.link_id = "test1"; + const link = new MapLink(); + link.id = "test1"; manager.setSelectedLinks([link]); expect(manager.getSelectedLinks().length).toEqual(1); }); it('items should be cleared', () => { - const link = new Link(); - link.link_id = "test1"; - const node = new Node(); - node.node_id = "test1"; - const drawing = new Drawing(); - drawing.drawing_id = "test1"; + const link = new MapLink(); + link.id = "test1"; + const node = new MapNode(); + node.id = "test1"; + const drawing = new MapDrawing(); + drawing.id = "test1"; manager.setSelectedLinks([link]); manager.setSelectedNodes([node]); manager.setSelectedDrawings([drawing]); diff --git a/src/app/cartography/managers/selection-manager.ts b/src/app/cartography/managers/selection-manager.ts index 5d6cdd2a..da223431 100644 --- a/src/app/cartography/managers/selection-manager.ts +++ b/src/app/cartography/managers/selection-manager.ts @@ -5,14 +5,14 @@ import { Subscription } from "rxjs"; import { NodesDataSource } from "../datasources/nodes-datasource"; import { LinksDataSource } from "../datasources/links-datasource"; -import { Node } from "../models/node"; import { InRectangleHelper } from "../helpers/in-rectangle-helper"; import { Rectangle } from "../models/rectangle"; -import { Link} from "../../models/link"; import { DataSource } from "../datasources/datasource"; -import { Drawing } from "../models/drawing"; import { InterfaceLabel } from "../models/interface-label"; import { DrawingsDataSource } from "../datasources/drawings-datasource"; +import { MapNode } from "../models/map/map-node"; +import { MapLink } from "../models/map/map-link"; +import { MapDrawing } from "../models/map/map-drawing"; export interface Selectable { @@ -23,18 +23,19 @@ export interface Selectable { @Injectable() export class SelectionManager { - private selectedNodes: Node[] = []; - private selectedLinks: Link[] = []; - private selectedDrawings: Drawing[] = []; + private selectedNodes: MapNode[] = []; + private selectedLinks: MapLink[] = []; + private selectedDrawings: MapDrawing[] = []; private selectedInterfaceLabels: InterfaceLabel[] = []; private subscription: Subscription; - constructor(private nodesDataSource: NodesDataSource, - private linksDataSource: LinksDataSource, - private drawingsDataSource: DrawingsDataSource, - private inRectangleHelper: InRectangleHelper) {} - + constructor( + private nodesDataSource: NodesDataSource, + private linksDataSource: LinksDataSource, + private drawingsDataSource: DrawingsDataSource, + private inRectangleHelper: InRectangleHelper + ) {} public subscribe(subject: Subject) { this.subscription = subject.subscribe((rectangle: Rectangle) => { @@ -44,9 +45,9 @@ export class SelectionManager { } public onSelection(rectangle: Rectangle) { - this.selectedNodes = this.getSelectedItemsInRectangle(this.nodesDataSource, rectangle); - this.selectedLinks = this.getSelectedItemsInRectangle(this.linksDataSource, rectangle); - this.selectedDrawings = this.getSelectedItemsInRectangle(this.drawingsDataSource, rectangle); + // this.selectedNodes = this.getSelectedItemsInRectangle(this.nodesDataSource, rectangle); + // this.selectedLinks = this.getSelectedItemsInRectangle(this.linksDataSource, rectangle); + // this.selectedDrawings = this.getSelectedItemsInRectangle(this.drawingsDataSource, rectangle); // don't select interfaces for now // this.selectedInterfaceLabels = this.getSelectedInterfaceLabelsInRectangle(rectangle); } @@ -63,22 +64,22 @@ export class SelectionManager { return this.selectedDrawings; } - public setSelectedNodes(nodes: Node[]) { - this.selectedNodes = this.setSelectedItems(this.nodesDataSource, (node: Node) => { - return !!nodes.find((n: Node) => node.node_id === n.node_id); - }); + public setSelectedNodes(nodes: MapNode[]) { + // this.selectedNodes = this.setSelectedItems(this.nodesDataSource, (node: MapNode) => { + // return !!nodes.find((n: MapNode) => node.id === n.id); + // }); } - public setSelectedLinks(links: Link[]) { - this.selectedLinks = this.setSelectedItems(this.linksDataSource, (link: Link) => { - return !!links.find((l: Link) => link.link_id === l.link_id); - }); + public setSelectedLinks(links: MapLink[]) { + // this.selectedLinks = this.setSelectedItems(this.linksDataSource, (link: MapLink) => { + // return !!links.find((l: MapLink) => link.link_id === l.link_id); + // }); } - public setSelectedDrawings(drawings: Drawing[]) { - this.selectedDrawings = this.setSelectedItems(this.drawingsDataSource, (drawing: Drawing) => { - return !!drawings.find((d: Drawing) => drawing.drawing_id === d.drawing_id); - }); + public setSelectedDrawings(drawings: MapDrawing[]) { + // this.selectedDrawings = this.setSelectedItems(this.drawingsDataSource, (drawing: MapDrawing) => { + // return !!drawings.find((d: MapDrawing) => drawing.drawing_id === d.drawing_id); + // }); } public clearSelection() { @@ -94,33 +95,33 @@ export class SelectionManager { } private getSelectedInterfaceLabelsInRectangle(rectangle: Rectangle) { - this.linksDataSource.getItems().forEach((link: Link) => { - if (!(link.source && link.target && link.nodes.length > 1)) { - return; - } + // this.linksDataSource.getItems().forEach((link: MapLink) => { + // if (!(link.source && link.target && link.nodes.length > 1)) { + // return; + // } - let updated = false; + // let updated = false; - let x = link.source.x + link.nodes[0].label.x; - let y = link.source.y + link.nodes[0].label.y; + // let x = link.source.x + link.nodes[0].label.x; + // let y = link.source.y + link.nodes[0].label.y; - if (this.inRectangleHelper.inRectangle(rectangle, x, y)) { - link.nodes[0].label.is_selected = true; - updated = true; - } + // if (this.inRectangleHelper.inRectangle(rectangle, x, y)) { + // link.nodes[0].label.is_selected = true; + // updated = true; + // } - x = link.target.x + link.nodes[1].label.x; - y = link.target.y + link.nodes[1].label.y; + // x = link.target.x + link.nodes[1].label.x; + // y = link.target.y + link.nodes[1].label.y; - if (this.inRectangleHelper.inRectangle(rectangle, x, y)) { - link.nodes[1].label.is_selected = true; - updated = true; - } + // if (this.inRectangleHelper.inRectangle(rectangle, x, y)) { + // link.nodes[1].label.is_selected = true; + // updated = true; + // } - if (updated) { - this.linksDataSource.update(link); - } - }); + // if (updated) { + // this.linksDataSource.update(link); + // } + // }); return []; } diff --git a/src/app/cartography/models/layer.ts b/src/app/cartography/models/layer.ts index 9d32a32e..fd0cc162 100644 --- a/src/app/cartography/models/layer.ts +++ b/src/app/cartography/models/layer.ts @@ -1,13 +1,13 @@ -import {Drawing} from "./drawing"; -import {Link} from "../../models/link"; -import {Node} from "./node"; +import { MapNode } from "./map/map-node"; +import { MapDrawing } from "./map/map-drawing"; +import { MapLink } from "./map/map-link"; export class Layer { constructor( public index?: number, - public nodes: Node[] = [], - public drawings: Drawing[] = [], - public links: Link[] = [] + public nodes: MapNode[] = [], + public drawings: MapDrawing[] = [], + public links: MapLink[] = [] ) { } } diff --git a/src/app/cartography/models/map/map-drawing.ts b/src/app/cartography/models/map/map-drawing.ts index 99cd3580..547f4a4c 100644 --- a/src/app/cartography/models/map/map-drawing.ts +++ b/src/app/cartography/models/map/map-drawing.ts @@ -1,3 +1,5 @@ +import { DrawingElement } from "../drawings/drawing-element"; + export class MapDrawing { id: string; projectId: string; @@ -6,4 +8,5 @@ export class MapDrawing { x: number; y: number; z: number; + element: DrawingElement; // @todo; apply converters } diff --git a/src/app/cartography/models/map/map-link.ts b/src/app/cartography/models/map/map-link.ts index bf14d7a5..e09698ee 100644 --- a/src/app/cartography/models/map/map-link.ts +++ b/src/app/cartography/models/map/map-link.ts @@ -1,4 +1,5 @@ import { MapLinkNode } from "./map-link-node"; +import { MapNode } from "./map-node"; export class MapLink { id: string; @@ -11,8 +12,8 @@ export class MapLink { distance: number; // this is not from server length: number; // this is not from server - source: Node; // this is not from server - target: Node; // this is not from server + source: MapNode; // this is not from server + target: MapNode; // this is not from server isSelected = false; // this is not from server x: number; // this is not from server diff --git a/src/app/cartography/models/node.ts b/src/app/cartography/models/node.ts index 2f30da3a..54070ae7 100644 --- a/src/app/cartography/models/node.ts +++ b/src/app/cartography/models/node.ts @@ -1,6 +1,6 @@ +import { Selectable } from "../managers/selection-manager"; import { Label } from "./label"; import { Port } from "../../models/port"; -import { Selectable } from "../managers/selection-manager"; export class Node implements Selectable { diff --git a/src/app/cartography/widgets/drawing.ts b/src/app/cartography/widgets/drawing.ts index ca4e0fe4..14f1a104 100644 --- a/src/app/cartography/widgets/drawing.ts +++ b/src/app/cartography/widgets/drawing.ts @@ -2,13 +2,13 @@ import { Injectable } from "@angular/core"; import { Widget } from "./widget"; import { SVGSelection } from "../models/types"; -import { Drawing } from "../models/drawing"; import { DrawingShapeWidget } from "./drawings/drawing-shape-widget"; import { TextDrawingWidget } from "./drawings/text-drawing"; import { ImageDrawingWidget } from "./drawings/image-drawing"; import { RectDrawingWidget } from "./drawings/rect-drawing"; import { LineDrawingWidget } from "./drawings/line-drawing"; import { EllipseDrawingWidget } from "./drawings/ellipse-drawing"; +import { MapDrawing } from "../models/map/map-drawing"; @Injectable() @@ -32,7 +32,7 @@ export class DrawingWidget implements Widget { } public draw(view: SVGSelection) { - const drawing_body = view.selectAll("g.drawing_body") + const drawing_body = view.selectAll("g.drawing_body") .data((l) => [l]); const drawing_body_enter = drawing_body.enter() @@ -40,7 +40,7 @@ export class DrawingWidget implements Widget { .attr("class", "drawing_body"); const drawing_body_merge = drawing_body.merge(drawing_body_enter) - .attr('transform', (d: Drawing) => { + .attr('transform', (d: MapDrawing) => { return `translate(${d.x},${d.y}) rotate(${d.rotation})`; }); diff --git a/src/app/cartography/widgets/drawings.ts b/src/app/cartography/widgets/drawings.ts index 3f3b0f80..d20988a9 100644 --- a/src/app/cartography/widgets/drawings.ts +++ b/src/app/cartography/widgets/drawings.ts @@ -1,17 +1,17 @@ import { Injectable } from "@angular/core"; import { Widget } from "./widget"; -import { Drawing } from "../models/drawing"; import { SVGSelection } from "../models/types"; import { Layer } from "../models/layer"; import { SvgToDrawingConverter } from "../helpers/svg-to-drawing-converter"; import { Draggable } from "../events/draggable"; import { DrawingWidget } from "./drawing"; +import { MapDrawing } from "../models/map/map-drawing"; @Injectable() export class DrawingsWidget implements Widget { - public draggable = new Draggable(); + public draggable = new Draggable(); public draggingEnabled = false; // public onContextMenu = new EventEmitter(); @@ -26,15 +26,15 @@ export class DrawingsWidget implements Widget { this.svgToDrawingConverter = new SvgToDrawingConverter(); } - public redrawDrawing(view: SVGSelection, drawing: Drawing) { + public redrawDrawing(view: SVGSelection, drawing: MapDrawing) { this.drawingWidget.draw(this.selectDrawing(view, drawing)); } public draw(view: SVGSelection) { const drawing = view - .selectAll("g.drawing") + .selectAll("g.drawing") .data((layer: Layer) => { - layer.drawings.forEach((d: Drawing) => { + layer.drawings.forEach((d: MapDrawing) => { try { d.element = this.svgToDrawingConverter.convert(d.svg); } catch (error) { @@ -42,14 +42,14 @@ export class DrawingsWidget implements Widget { } }); return layer.drawings; - }, (l: Drawing) => { - return l.drawing_id; + }, (l: MapDrawing) => { + return l.id; }); const drawing_enter = drawing.enter() .append('g') .attr('class', 'drawing') - .attr('drawing_id', (l: Drawing) => l.drawing_id) + .attr('drawing_id', (l: MapDrawing) => l.id) const merge = drawing.merge(drawing_enter); @@ -64,7 +64,7 @@ export class DrawingsWidget implements Widget { } } - private selectDrawing(view: SVGSelection, drawing: Drawing) { - return view.selectAll(`g.drawing[drawing_id="${drawing.drawing_id}"]`); + private selectDrawing(view: SVGSelection, drawing: MapDrawing) { + return view.selectAll(`g.drawing[drawing_id="${drawing.id}"]`); } } diff --git a/src/app/cartography/widgets/drawings/ellipse-drawing.spec.ts b/src/app/cartography/widgets/drawings/ellipse-drawing.spec.ts index c772cbd7..1f7ec018 100644 --- a/src/app/cartography/widgets/drawings/ellipse-drawing.spec.ts +++ b/src/app/cartography/widgets/drawings/ellipse-drawing.spec.ts @@ -1,19 +1,19 @@ import { TestSVGCanvas } from "../../testing"; -import { Drawing } from "../../models/drawing"; -import { EllipseDrawingWidget } from "./ellipse-drawing"; import { EllipseElement } from "../../models/drawings/ellipse-element"; import { QtDasharrayFixer } from "../../helpers/qt-dasharray-fixer"; +import { MapDrawing } from "../../models/map/map-drawing"; +import { EllipseDrawingWidget } from "./ellipse-drawing"; describe('EllipseDrawingWidget', () => { let svg: TestSVGCanvas; let widget: EllipseDrawingWidget; - let drawing: Drawing; + let drawing: MapDrawing; beforeEach(() => { svg = new TestSVGCanvas(); - drawing = new Drawing(); + drawing = new MapDrawing(); widget = new EllipseDrawingWidget(new QtDasharrayFixer()); }); @@ -34,7 +34,7 @@ describe('EllipseDrawingWidget', () => { ellipse.ry = 40; drawing.element = ellipse; - const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); + const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); const drawings_enter = drawings.enter().append('g').classed('drawing', true); const drawings_merge = drawings.merge(drawings_enter); diff --git a/src/app/cartography/widgets/drawings/ellipse-drawing.ts b/src/app/cartography/widgets/drawings/ellipse-drawing.ts index 576578f2..2e2aedf3 100644 --- a/src/app/cartography/widgets/drawings/ellipse-drawing.ts +++ b/src/app/cartography/widgets/drawings/ellipse-drawing.ts @@ -1,10 +1,10 @@ import { Injectable } from "@angular/core"; import { SVGSelection } from "../../models/types"; -import { Drawing } from "../../models/drawing"; import { EllipseElement } from "../../models/drawings/ellipse-element"; import { DrawingShapeWidget } from "./drawing-shape-widget"; import { QtDasharrayFixer } from "../../helpers/qt-dasharray-fixer"; +import { MapDrawing } from "../../models/map/map-drawing"; @Injectable() @@ -17,7 +17,7 @@ export class EllipseDrawingWidget implements DrawingShapeWidget { public draw(view: SVGSelection) { const drawing = view .selectAll('ellipse.ellipse_element') - .data((d: Drawing) => { + .data((d: MapDrawing) => { return (d.element && d.element instanceof EllipseElement) ? [d.element] : []; }); diff --git a/src/app/cartography/widgets/drawings/image-drawing.spec.ts b/src/app/cartography/widgets/drawings/image-drawing.spec.ts index a722ff23..96008962 100644 --- a/src/app/cartography/widgets/drawings/image-drawing.spec.ts +++ b/src/app/cartography/widgets/drawings/image-drawing.spec.ts @@ -1,5 +1,5 @@ import { TestSVGCanvas } from "../../testing"; -import { Drawing } from "../../models/drawing"; +import { MapDrawing } from "../../models/drawing"; import { ImageDrawingWidget } from "./image-drawing"; import { ImageElement } from "../../models/drawings/image-element"; @@ -7,12 +7,12 @@ import { ImageElement } from "../../models/drawings/image-element"; describe('ImageDrawingWidget', () => { let svg: TestSVGCanvas; let widget: ImageDrawingWidget; - let drawing: Drawing; + let drawing: MapDrawing; beforeEach(() => { svg = new TestSVGCanvas(); - drawing = new Drawing(); + drawing = new MapDrawing(); widget = new ImageDrawingWidget(); }); @@ -27,7 +27,7 @@ describe('ImageDrawingWidget', () => { image.data = "data:image/svg+xml;base64,DATA"; drawing.element = image; - const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); + const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); const drawings_enter = drawings.enter().append('g').classed('drawing', true); const drawings_merge = drawings.merge(drawings_enter); diff --git a/src/app/cartography/widgets/drawings/image-drawing.ts b/src/app/cartography/widgets/drawings/image-drawing.ts index 1dcf50ed..6d1a8a2c 100644 --- a/src/app/cartography/widgets/drawings/image-drawing.ts +++ b/src/app/cartography/widgets/drawings/image-drawing.ts @@ -1,9 +1,9 @@ import { Injectable } from "@angular/core"; import { SVGSelection } from "../../models/types"; -import { Drawing } from "../../models/drawing"; import { ImageElement } from "../../models/drawings/image-element"; import { DrawingShapeWidget } from "./drawing-shape-widget"; +import { MapDrawing } from "../../models/map/map-drawing"; @Injectable() @@ -11,7 +11,7 @@ export class ImageDrawingWidget implements DrawingShapeWidget { public draw(view: SVGSelection) { const drawing = view .selectAll('image.image_element') - .data((d: Drawing) => { + .data((d: MapDrawing) => { return (d.element && d.element instanceof ImageElement) ? [d.element] : []; }); diff --git a/src/app/cartography/widgets/drawings/line-drawing.spec.ts b/src/app/cartography/widgets/drawings/line-drawing.spec.ts index 06dfc7d5..c4830190 100644 --- a/src/app/cartography/widgets/drawings/line-drawing.spec.ts +++ b/src/app/cartography/widgets/drawings/line-drawing.spec.ts @@ -1,19 +1,19 @@ import { TestSVGCanvas } from "../../testing"; -import { Drawing } from "../../models/drawing"; import { LineDrawingWidget } from "./line-drawing"; import { LineElement } from "../../models/drawings/line-element"; import { QtDasharrayFixer } from "../../helpers/qt-dasharray-fixer"; +import { MapDrawing } from "../../models/map/map-drawing"; describe('LineDrawingWidget', () => { let svg: TestSVGCanvas; let widget: LineDrawingWidget; - let drawing: Drawing; + let drawing: MapDrawing; beforeEach(() => { svg = new TestSVGCanvas(); - drawing = new Drawing(); + drawing = new MapDrawing(); widget = new LineDrawingWidget(new QtDasharrayFixer()); }); @@ -32,7 +32,7 @@ describe('LineDrawingWidget', () => { line.y2 = 40; drawing.element = line; - const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); + const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); const drawings_enter = drawings.enter().append('g').classed('drawing', true); const drawings_merge = drawings.merge(drawings_enter); diff --git a/src/app/cartography/widgets/drawings/line-drawing.ts b/src/app/cartography/widgets/drawings/line-drawing.ts index e3816f50..729b1be2 100644 --- a/src/app/cartography/widgets/drawings/line-drawing.ts +++ b/src/app/cartography/widgets/drawings/line-drawing.ts @@ -1,10 +1,10 @@ import { Injectable } from "@angular/core"; import { SVGSelection } from "../../models/types"; -import { Drawing } from "../../models/drawing"; import { LineElement } from "../../models/drawings/line-element"; import { DrawingShapeWidget } from "./drawing-shape-widget"; import { QtDasharrayFixer } from "../../helpers/qt-dasharray-fixer"; +import { MapDrawing } from "../../models/map/map-drawing"; @Injectable() @@ -17,7 +17,7 @@ export class LineDrawingWidget implements DrawingShapeWidget { public draw(view: SVGSelection) { const drawing = view .selectAll('line.line_element') - .data((d: Drawing) => { + .data((d: MapDrawing) => { return (d.element && d.element instanceof LineElement) ? [d.element] : []; }); diff --git a/src/app/cartography/widgets/drawings/rect-drawing.spec.ts b/src/app/cartography/widgets/drawings/rect-drawing.spec.ts index 1b66d364..dcbf4e89 100644 --- a/src/app/cartography/widgets/drawings/rect-drawing.spec.ts +++ b/src/app/cartography/widgets/drawings/rect-drawing.spec.ts @@ -1,5 +1,5 @@ import { TestSVGCanvas } from "../../testing"; -import { Drawing } from "../../models/drawing"; +import { MapDrawing } from "../../models/drawing"; import { RectDrawingWidget } from "./rect-drawing"; import { RectElement } from "../../models/drawings/rect-element"; import { QtDasharrayFixer } from "../../helpers/qt-dasharray-fixer"; @@ -8,12 +8,12 @@ import { QtDasharrayFixer } from "../../helpers/qt-dasharray-fixer"; describe('RectDrawingWidget', () => { let svg: TestSVGCanvas; let widget: RectDrawingWidget; - let drawing: Drawing; + let drawing: MapDrawing; beforeEach(() => { svg = new TestSVGCanvas(); - drawing = new Drawing(); + drawing = new MapDrawing(); widget = new RectDrawingWidget(new QtDasharrayFixer()); }); @@ -32,7 +32,7 @@ describe('RectDrawingWidget', () => { rect.height = 200; drawing.element = rect; - const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); + const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); const drawings_enter = drawings.enter().append('g').classed('drawing', true); const drawings_merge = drawings.merge(drawings_enter); diff --git a/src/app/cartography/widgets/drawings/rect-drawing.ts b/src/app/cartography/widgets/drawings/rect-drawing.ts index f3c768b9..ba909184 100644 --- a/src/app/cartography/widgets/drawings/rect-drawing.ts +++ b/src/app/cartography/widgets/drawings/rect-drawing.ts @@ -1,10 +1,10 @@ import { Injectable } from "@angular/core"; import { SVGSelection } from "../../models/types"; -import { Drawing } from "../../models/drawing"; import { RectElement } from "../../models/drawings/rect-element"; import { DrawingShapeWidget } from "./drawing-shape-widget"; import { QtDasharrayFixer } from "../../helpers/qt-dasharray-fixer"; +import { MapDrawing } from "../../models/map/map-drawing"; @Injectable() @@ -16,7 +16,7 @@ export class RectDrawingWidget implements DrawingShapeWidget { public draw(view: SVGSelection) { const drawing = view .selectAll('rect.rect_element') - .data((d: Drawing) => { + .data((d: MapDrawing) => { return (d.element && d.element instanceof RectElement) ? [d.element] : []; }); diff --git a/src/app/cartography/widgets/drawings/text-drawing.spec.ts b/src/app/cartography/widgets/drawings/text-drawing.spec.ts index 7d497bd3..8f255eb5 100644 --- a/src/app/cartography/widgets/drawings/text-drawing.spec.ts +++ b/src/app/cartography/widgets/drawings/text-drawing.spec.ts @@ -1,18 +1,18 @@ import { TestSVGCanvas } from "../../testing"; import { TextDrawingWidget } from "./text-drawing"; -import { Drawing } from "../../models/drawing"; +import { MapDrawing } from "../../models/drawing"; import { TextElement } from "../../models/drawings/text-element"; import { FontFixer } from "../../helpers/font-fixer"; describe('TextDrawingWidget', () => { let svg: TestSVGCanvas; let widget: TextDrawingWidget; - let drawing: Drawing; + let drawing: MapDrawing; beforeEach(() => { svg = new TestSVGCanvas(); - drawing = new Drawing(); + drawing = new MapDrawing(); widget = new TextDrawingWidget(new FontFixer()); }); @@ -32,7 +32,7 @@ describe('TextDrawingWidget', () => { drawing.element = text; - const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); + const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); const drawings_enter = drawings.enter().append('g').classed('drawing', true); const drawings_merge = drawings.merge(drawings_enter); @@ -52,7 +52,7 @@ describe('TextDrawingWidget', () => { text.text = 'THIS' + "\n" + 'IS TEXT'; drawing.element = text; - const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); + const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); const drawings_enter = drawings.enter().append('g').classed('drawing', true); const drawings_merge = drawings.merge(drawings_enter); @@ -75,7 +75,7 @@ describe('TextDrawingWidget', () => { text.text = ' Text with whitespaces'; drawing.element = text; - const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); + const drawings = svg.canvas.selectAll('g.drawing').data([drawing]); const drawings_enter = drawings.enter().append('g').classed('drawing', true); const drawings_merge = drawings.merge(drawings_enter); diff --git a/src/app/cartography/widgets/drawings/text-drawing.ts b/src/app/cartography/widgets/drawings/text-drawing.ts index 3522fb61..49f79cf7 100644 --- a/src/app/cartography/widgets/drawings/text-drawing.ts +++ b/src/app/cartography/widgets/drawings/text-drawing.ts @@ -2,10 +2,10 @@ import { Injectable } from "@angular/core"; import { SVGSelection } from "../../models/types"; import { TextElement } from "../../models/drawings/text-element"; -import { Drawing } from "../../models/drawing"; import { DrawingShapeWidget } from "./drawing-shape-widget"; import { FontFixer } from "../../helpers/font-fixer"; import { select } from "d3-selection"; +import { MapDrawing } from "../../models/map/map-drawing"; @Injectable() @@ -20,7 +20,7 @@ export class TextDrawingWidget implements DrawingShapeWidget { const drawing = view .selectAll('text.text_element') - .data((d: Drawing) => { + .data((d: MapDrawing) => { return (d.element && d.element instanceof TextElement) ? [d.element] : []; }); diff --git a/src/app/cartography/widgets/graph-layout.ts b/src/app/cartography/widgets/graph-layout.ts index 233311bb..394121f8 100644 --- a/src/app/cartography/widgets/graph-layout.ts +++ b/src/app/cartography/widgets/graph-layout.ts @@ -1,23 +1,23 @@ import { Context } from "../models/context"; -import { Node } from "../models/node"; -import { Link } from "../../models/link"; import { NodesWidget } from "./nodes"; import { Widget } from "./widget"; import { SVGSelection } from "../models/types"; -import { Drawing } from "../models/drawing"; import { DrawingLineWidget } from "./drawing-line"; import { SelectionTool } from "../tools/selection-tool"; import { MovingTool } from "../tools/moving-tool"; import { LayersWidget } from "./layers"; import { LayersManager } from "../managers/layers-manager"; import { Injectable } from "@angular/core"; +import { MapNode } from "../models/map/map-node"; +import { MapLink } from "../models/map/map-link"; +import { MapDrawing } from "../models/map/map-drawing"; @Injectable() export class GraphLayout implements Widget { - private nodes: Node[] = []; - private links: Link[] = []; - private drawings: Drawing[] = []; + private nodes: MapNode[] = []; + private links: MapLink[] = []; + private drawings: MapDrawing[] = []; constructor( private nodesWidget: NodesWidget, @@ -28,11 +28,11 @@ export class GraphLayout implements Widget { ) { } - public setNodes(nodes: Node[]) { + public setNodes(nodes: MapNode[]) { this.nodes = nodes; } - public setLinks(links: Link[]) { + public setLinks(links: MapLink[]) { this.links = links; } @@ -40,7 +40,7 @@ export class GraphLayout implements Widget { return this.links; } - public setDrawings(drawings: Drawing[]) { + public setDrawings(drawings: MapDrawing[]) { this.drawings = drawings; } diff --git a/src/app/cartography/widgets/interface-label.spec.ts b/src/app/cartography/widgets/interface-label.spec.ts index e5b2aac2..3e51e616 100644 --- a/src/app/cartography/widgets/interface-label.spec.ts +++ b/src/app/cartography/widgets/interface-label.spec.ts @@ -1,61 +1,61 @@ import { Selection } from "d3-selection"; import { TestSVGCanvas } from "../testing"; -import { Node } from "../models/node"; -import { Link } from "../../models/link"; -import { LinkNode } from "../../models/link-node"; -import { Label } from "../models/label"; import { InterfaceLabel } from "../models/interface-label"; import { InterfaceLabelWidget } from "./interface-label"; import { CssFixer } from "../helpers/css-fixer"; +import { MapNode } from "../models/map/map-node"; +import { MapLink } from "../models/map/map-link"; +import { MapLinkNode } from "../models/map/map-link-node"; +import { MapLabel } from "../models/map/map-label"; describe('InterfaceLabelsWidget', () => { let svg: TestSVGCanvas; let widget: InterfaceLabelWidget; - let linksEnter: Selection; - let links: Link[]; + let linksEnter: Selection; + let links: MapLink[]; beforeEach(() => { svg = new TestSVGCanvas(); - const node_1 = new Node(); - node_1.node_id = "1"; + const node_1 = new MapNode(); + node_1.id = "1"; node_1.x = 100; node_1.y = 200; - const node_2 = new Node(); - node_2.node_id = "2"; + const node_2 = new MapNode(); + node_2.id = "2"; node_2.x = 300; node_2.y = 400; - const link_node_1 = new LinkNode(); - link_node_1.label = new Label(); + const link_node_1 = new MapLinkNode(); + link_node_1.label = new MapLabel(); link_node_1.label.rotation = 5; link_node_1.label.text = "Interface 1"; link_node_1.label.x = 10; link_node_1.label.y = 20; link_node_1.label.style = "font-size: 12px"; - const link_node_2 = new LinkNode(); - link_node_2.label = new Label(); + const link_node_2 = new MapLinkNode(); + link_node_2.label = new MapLabel(); link_node_2.label.rotation = 0; link_node_2.label.text = "Interface 2"; link_node_2.label.x = -30; link_node_2.label.y = -40; link_node_2.label.style = ""; - const link_1 = new Link(); - link_1.link_id = "link1"; + const link_1 = new MapLink(); + link_1.id = "link1"; link_1.source = node_1; link_1.target = node_2; link_1.nodes = [link_node_1, link_node_2]; - link_1.link_type = "ethernet"; + link_1.linkType = "ethernet"; links = [link_1]; const linksSelection = svg.canvas - .selectAll('g.link') + .selectAll('g.link') .data(links); linksEnter = linksSelection @@ -111,7 +111,7 @@ describe('InterfaceLabelsWidget', () => { }); it('should draw interface label with class `selected` when selected', () => { - links[0].nodes[0].label.is_selected = true; + links[0].nodes[0].label.isSelected = true; widget.draw(linksEnter); diff --git a/src/app/cartography/widgets/interface-label.ts b/src/app/cartography/widgets/interface-label.ts index b40d6fa2..91be673d 100644 --- a/src/app/cartography/widgets/interface-label.ts +++ b/src/app/cartography/widgets/interface-label.ts @@ -1,10 +1,10 @@ import { Injectable } from "@angular/core"; import { SVGSelection } from "../models/types"; -import { Link } from "../../models/link"; import { InterfaceLabel } from "../models/interface-label"; import { CssFixer } from "../helpers/css-fixer"; import { select } from "d3-selection"; +import { MapLink } from "../models/map/map-link"; @Injectable() export class InterfaceLabelWidget { @@ -25,27 +25,27 @@ export class InterfaceLabelWidget { const labels = selection .selectAll('g.interface_label_container') - .data((l: Link) => { + .data((l: MapLink) => { const sourceInterface = new InterfaceLabel( - l.link_id, + l.id, 'source', Math.round(l.source.x + l.nodes[0].label.x), Math.round(l.source.y + l.nodes[0].label.y), l.nodes[0].label.text, l.nodes[0].label.style, l.nodes[0].label.rotation, - l.nodes[0].label.is_selected + l.nodes[0].label.isSelected ); const targetInterface = new InterfaceLabel( - l.link_id, + l.id, 'target', Math.round( l.target.x + l.nodes[1].label.x), Math.round( l.target.y + l.nodes[1].label.y), l.nodes[1].label.text, l.nodes[1].label.style, l.nodes[1].label.rotation, - l.nodes[1].label.is_selected + l.nodes[1].label.isSelected ); if (this.enabled) { @@ -106,7 +106,7 @@ export class InterfaceLabelWidget { const border = InterfaceLabelWidget.SURROUNDING_TEXT_BORDER; - current.attr('width', bbox.width + border*2); + current.attr('width', bbox.width + border * 2); current.attr('height', bbox.height + border); current.attr('x', - border); current.attr('y', - bbox.height); diff --git a/src/app/cartography/widgets/interface-status.ts b/src/app/cartography/widgets/interface-status.ts index ad4a13de..a38bcebd 100644 --- a/src/app/cartography/widgets/interface-status.ts +++ b/src/app/cartography/widgets/interface-status.ts @@ -4,8 +4,8 @@ import { select } from "d3-selection"; import { Widget } from "./widget"; import { SVGSelection } from "../models/types"; -import { Link } from "../../models/link"; import { LinkStatus } from "../models/link-status"; +import { MapLink } from "../models/map/map-link"; @Injectable() @@ -13,8 +13,8 @@ export class InterfaceStatusWidget implements Widget { constructor() {} public draw(view: SVGSelection) { - view.each(function (this: SVGGElement, l: Link) { - const link_group = select(this); + view.each(function (this: SVGGElement, l: MapLink) { + const link_group = select(this); const link_path = link_group.select('path'); const start_point: SVGPoint = link_path.node().getPointAtLength(45); diff --git a/src/app/cartography/widgets/link.ts b/src/app/cartography/widgets/link.ts index 1b3dc965..8102f835 100644 --- a/src/app/cartography/widgets/link.ts +++ b/src/app/cartography/widgets/link.ts @@ -2,12 +2,12 @@ import { Injectable } from "@angular/core"; import { Widget } from "./widget"; import { SVGSelection } from "../models/types"; -import { Link } from "../../models/link"; import { SerialLinkWidget } from "./links/serial-link"; import { EthernetLinkWidget } from "./links/ethernet-link"; import { MultiLinkCalculatorHelper } from "../helpers/multi-link-calculator-helper"; import { InterfaceLabelWidget } from "./interface-label"; import { InterfaceStatusWidget } from "./interface-status"; +import { MapLink } from "../models/map/map-link"; @Injectable() @@ -20,7 +20,7 @@ export class LinkWidget implements Widget { ) {} public draw(view: SVGSelection) { - const link_body = view.selectAll("g.link_body") + const link_body = view.selectAll("g.link_body") .data((l) => [l]); const link_body_enter = link_body.enter() @@ -41,7 +41,7 @@ export class LinkWidget implements Widget { link_body_merge .select('path') - .classed('selected', (l: Link) => l.is_selected); + .classed('selected', (l: MapLink) => l.isSelected); this.interfaceLabelWidget.draw(link_body_merge); this.interfaceStatusWidget.draw(link_body_merge); diff --git a/src/app/cartography/widgets/links.spec.ts b/src/app/cartography/widgets/links.spec.ts index 705daba3..08ce74ce 100644 --- a/src/app/cartography/widgets/links.spec.ts +++ b/src/app/cartography/widgets/links.spec.ts @@ -5,10 +5,10 @@ import { Selection } from "d3-selection"; import { TestSVGCanvas } from "../testing"; import { Layer } from "../models/layer"; import { LinksWidget } from "./links"; -import { Node } from "../models/node"; -import { Link } from "../../models/link"; import { LinkWidget } from "./link"; import { MultiLinkCalculatorHelper } from "../helpers/multi-link-calculator-helper"; +import { MapNode } from "../models/map/map-node"; +import { MapLink } from "../models/map/map-link"; describe('LinksWidget', () => { @@ -23,21 +23,21 @@ describe('LinksWidget', () => { linkWidget = instance(mock(LinkWidget)); widget = new LinksWidget(new MultiLinkCalculatorHelper(), linkWidget); - const node_1 = new Node(); - node_1.node_id = "1"; + const node_1 = new MapNode(); + node_1.id = "1"; node_1.x = 10; node_1.y = 10; - const node_2 = new Node(); - node_2.node_id = "2"; + const node_2 = new MapNode(); + node_2.id = "2"; node_2.x = 100; node_2.y = 100; - const link_1 = new Link(); - link_1.link_id = "link1"; + const link_1 = new MapLink(); + link_1.id = "link1"; link_1.source = node_1; link_1.target = node_2; - link_1.link_type = "ethernet"; + link_1.linkType = "ethernet"; layer = new Layer(); layer.index = 1; @@ -67,7 +67,7 @@ describe('LinksWidget', () => { it('should draw links', () => { widget.draw(layersEnter); - const drew = svg.canvas.selectAll('g.link'); + const drew = svg.canvas.selectAll('g.link'); const linkNode = drew.nodes()[0]; expect(linkNode.getAttribute('link_id')).toEqual('link1'); expect(linkNode.getAttribute('map-source')).toEqual('1'); diff --git a/src/app/cartography/widgets/links.ts b/src/app/cartography/widgets/links.ts index e96e9baf..0544dcac 100644 --- a/src/app/cartography/widgets/links.ts +++ b/src/app/cartography/widgets/links.ts @@ -2,10 +2,10 @@ import { Injectable } from "@angular/core"; import { Widget } from "./widget"; import { SVGSelection } from "../models/types"; -import { Link } from "../../models/link"; import { MultiLinkCalculatorHelper } from "../helpers/multi-link-calculator-helper"; import { Layer } from "../models/layer"; import { LinkWidget } from "./link"; +import { MapLink } from "../models/map/map-link"; @Injectable() export class LinksWidget implements Widget { @@ -15,32 +15,32 @@ export class LinksWidget implements Widget { ) { } - public redrawLink(view: SVGSelection, link: Link) { + public redrawLink(view: SVGSelection, link: MapLink) { this.linkWidget.draw(this.selectLink(view, link)); } public draw(view: SVGSelection) { const link = view - .selectAll("g.link") + .selectAll("g.link") .data((layer: Layer) => { if (layer.links) { - const layer_links = layer.links.filter((l: Link) => { + const layer_links = layer.links.filter((l: MapLink) => { return l.target && l.source; }); this.multiLinkCalculatorHelper.assignDataToLinks(layer_links); return layer_links; } return []; - }, (l: Link) => { - return l.link_id; + }, (l: MapLink) => { + return l.id; }); const link_enter = link.enter() .append('g') .attr('class', 'link') - .attr('link_id', (l: Link) => l.link_id) - .attr('map-source', (l: Link) => l.source.node_id) - .attr('map-target', (l: Link) => l.target.node_id); + .attr('link_id', (l: MapLink) => l.id) + .attr('map-source', (l: MapLink) => l.source.id) + .attr('map-target', (l: MapLink) => l.target.id); const merge = link.merge(link_enter); @@ -51,7 +51,7 @@ export class LinksWidget implements Widget { .remove(); } - private selectLink(view: SVGSelection, link: Link) { - return view.selectAll(`g.link[link_id="${link.link_id}"]`); + private selectLink(view: SVGSelection, link: MapLink) { + return view.selectAll(`g.link[link_id="${link.id}"]`); } } diff --git a/src/app/cartography/widgets/links/ethernet-link.ts b/src/app/cartography/widgets/links/ethernet-link.ts index 162c3a52..d8a3b977 100644 --- a/src/app/cartography/widgets/links/ethernet-link.ts +++ b/src/app/cartography/widgets/links/ethernet-link.ts @@ -2,7 +2,7 @@ import { path } from "d3-path"; import { Widget } from "../widget"; import { SVGSelection } from "../../models/types"; -import { Link } from "../../../models/link"; +import { MapLink } from "../../models/map/map-link"; class EthernetLinkPath { constructor( @@ -13,7 +13,7 @@ class EthernetLinkPath { } export class EthernetLinkWidget implements Widget { - private linktoEthernetLink(link: Link) { + private linktoEthernetLink(link: MapLink) { return new EthernetLinkPath( [link.source.x + link.source.width / 2., link.source.y + link.source.height / 2.], [link.target.x + link.target.width / 2., link.target.y + link.target.height / 2.] @@ -24,9 +24,9 @@ export class EthernetLinkWidget implements Widget { const link = view .selectAll('path.ethernet_link') - .data((link) => { - if(link.link_type === 'ethernet') { - return [this.linktoEthernetLink(link)]; + .data((l) => { + if (l.linkType === 'ethernet') { + return [this.linktoEthernetLink(l)]; } return []; }); diff --git a/src/app/cartography/widgets/links/serial-link.ts b/src/app/cartography/widgets/links/serial-link.ts index 7f108043..f684d4ae 100644 --- a/src/app/cartography/widgets/links/serial-link.ts +++ b/src/app/cartography/widgets/links/serial-link.ts @@ -2,7 +2,7 @@ import { path } from "d3-path"; import { Widget } from "../widget"; import { SVGSelection } from "../../models/types"; -import { Link } from "../../../models/link"; +import { MapLink } from "../../models/map/map-link"; class SerialLinkPath { @@ -18,7 +18,7 @@ class SerialLinkPath { export class SerialLinkWidget implements Widget { - private linkToSerialLink(link: Link) { + private linkToSerialLink(link: MapLink) { const source = { 'x': link.source.x + link.source.width / 2, 'y': link.source.y + link.source.height / 2 @@ -60,9 +60,9 @@ export class SerialLinkWidget implements Widget { const link = view .selectAll('path.serial_link') - .data((link) => { - if(link.link_type === 'serial') { - return [this.linkToSerialLink(link)]; + .data((l) => { + if (l.linkType === 'serial') { + return [this.linkToSerialLink(l)]; } return []; }); diff --git a/src/app/cartography/widgets/node.spec.ts b/src/app/cartography/widgets/node.spec.ts index 49edd7b2..c5ce1189 100644 --- a/src/app/cartography/widgets/node.spec.ts +++ b/src/app/cartography/widgets/node.spec.ts @@ -1,10 +1,10 @@ import { TestSVGCanvas } from "../testing"; -import { Node } from "../models/node"; -import { Label } from "../models/label"; import { CssFixer } from "../helpers/css-fixer"; import { FontFixer } from "../helpers/font-fixer"; import { NodeWidget } from "./node"; +import { MapNode } from "../models/map/map-node"; +import { MapLabel } from "../models/map/map-label"; describe('NodesWidget', () => { @@ -21,9 +21,9 @@ describe('NodesWidget', () => { }); describe('draggable behaviour', () => { - let node: Node; + let node: MapNode; const tryToDrag = () => { - const drew = svg.canvas.selectAll('g.node'); + const drew = svg.canvas.selectAll('g.node'); const drewNode = drew.nodes()[0]; drewNode.dispatchEvent( @@ -38,12 +38,12 @@ describe('NodesWidget', () => { }; beforeEach(() => { - node = new Node(); + node = new MapNode(); node.x = 100; node.y = 200; node.width = 100; node.height = 100; - node.label = new Label(); + node.label = new MapLabel(); }); // it('should be draggable when enabled', () => { diff --git a/src/app/cartography/widgets/node.ts b/src/app/cartography/widgets/node.ts index e879786e..6bde014b 100644 --- a/src/app/cartography/widgets/node.ts +++ b/src/app/cartography/widgets/node.ts @@ -2,13 +2,12 @@ import { Injectable, EventEmitter } from "@angular/core"; import { Widget } from "./widget"; import { SVGSelection } from "../models/types"; -import { Node } from "../models/node"; import { NodeContextMenu, NodeClicked, NodeDragged, NodeDragging } from "../events/nodes"; import { CssFixer } from "../helpers/css-fixer"; import { FontFixer } from "../helpers/font-fixer"; import { select, event } from "d3-selection"; -import { Symbol } from "../../models/symbol"; -import { D3DragEvent, drag } from "d3-drag"; +import { MapSymbol } from "../models/map/map-symbol"; +import { MapNode } from "../models/map/map-node"; @Injectable() @@ -20,21 +19,21 @@ export class NodeWidget implements Widget { public onNodeDragged = new EventEmitter(); public onNodeDragging = new EventEmitter(); - private symbols: Symbol[] = []; + private symbols: MapSymbol[] = []; constructor( private cssFixer: CssFixer, private fontFixer: FontFixer, ) {} - public setSymbols(symbols: Symbol[]) { + public setSymbols(symbols: MapSymbol[]) { this.symbols = symbols; } public draw(view: SVGSelection) { const self = this; - const node_body = view.selectAll("g.node_body") + const node_body = view.selectAll("g.node_body") .data((n) => [n]); const node_body_enter = node_body.enter() @@ -50,52 +49,52 @@ export class NodeWidget implements Widget { .attr('class', 'label'); const node_body_merge = node_body.merge(node_body_enter) - .classed('selected', (n: Node) => n.is_selected) - .on("contextmenu", function (n: Node, i: number) { + .classed('selected', (n: MapNode) => n.isSelected) + .on("contextmenu", function (n: MapNode, i: number) { event.preventDefault(); self.onContextMenu.emit(new NodeContextMenu(event, n)); }) - .on('click', (n: Node) => { + .on('click', (n: MapNode) => { this.onNodeClicked.emit(new NodeClicked(event, n)); }); // update image of node node_body_merge .select('image') - .attr('xnode:href', (n: Node) => { - const symbol = this.symbols.find((s: Symbol) => s.symbol_id === n.symbol); + .attr('xnode:href', (n: MapNode) => { + const symbol = this.symbols.find((s: MapSymbol) => s.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) - .attr('x', (n: Node) => 0) - .attr('y', (n: Node) => 0) - .on('mouseover', function (this, n: Node) { + .attr('width', (n: MapNode) => n.width) + .attr('height', (n: MapNode) => n.height) + .attr('x', (n: MapNode) => 0) + .attr('y', (n: MapNode) => 0) + .on('mouseover', function (this, n: MapNode) { select(this).attr("class", "over"); }) - .on('mouseout', function (this, n: Node) { + .on('mouseout', function (this, n: MapNode) { select(this).attr("class", ""); }); node_body_merge - .attr('transform', (n: Node) => { + .attr('transform', (n: MapNode) => { return `translate(${n.x},${n.y})`; }); node_body_merge .select('text.label') // .attr('y', (n: Node) => n.label.y - n.height / 2. + 10) // @todo: server computes y in auto way - .attr('style', (n: Node) => { + .attr('style', (n: MapNode) => { let styles = this.cssFixer.fix(n.label.style); styles = this.fontFixer.fixStyles(styles); return styles; }) - .text((n: Node) => n.label.text) - .attr('x', function (this: SVGTextElement, n: Node) { + .text((n: MapNode) => n.label.text) + .attr('x', function (this: SVGTextElement, n: MapNode) { if (n.label.x === null) { // center const bbox = this.getBBox(); @@ -103,7 +102,7 @@ export class NodeWidget implements Widget { } return n.label.x + NodeWidget.NODE_LABEL_MARGIN; }) - .attr('y', function (this: SVGTextElement, n: Node) { + .attr('y', function (this: SVGTextElement, n: MapNode) { let bbox = this.getBBox(); if (n.label.x === null) { diff --git a/src/app/cartography/widgets/nodes.ts b/src/app/cartography/widgets/nodes.ts index 60fed63b..5b4d3c44 100644 --- a/src/app/cartography/widgets/nodes.ts +++ b/src/app/cartography/widgets/nodes.ts @@ -1,18 +1,18 @@ import { Injectable } from "@angular/core"; import { Widget } from "./widget"; -import { Node } from "../models/node"; import { SVGSelection } from "../models/types"; import { Layer } from "../models/layer"; import { NodeWidget } from "./node"; import { Draggable } from "../events/draggable"; +import { MapNode } from "../models/map/map-node"; @Injectable() export class NodesWidget implements Widget { static NODE_LABEL_MARGIN = 3; - public draggable = new Draggable(); + public draggable = new Draggable(); public draggingEnabled = false; constructor( @@ -20,26 +20,26 @@ export class NodesWidget implements Widget { ) { } - public redrawNode(view: SVGSelection, node: Node) { + public redrawNode(view: SVGSelection, node: MapNode) { this.nodeWidget.draw(this.selectNode(view, node)); } public draw(view: SVGSelection) { const node = view - .selectAll("g.node") + .selectAll("g.node") .data((layer: Layer) => { if (layer.nodes) { return layer.nodes; } return []; - }, (n: Node) => { - return n.node_id; + }, (n: MapNode) => { + return n.id; }); const node_enter = node.enter() .append('g') .attr('class', 'node') - .attr('node_id', (n: Node) => n.node_id) + .attr('node_id', (n: MapNode) => n.id) const merge = node.merge(node_enter); @@ -54,8 +54,8 @@ export class NodesWidget implements Widget { } } - private selectNode(view: SVGSelection, node: Node) { - return view.selectAll(`g.node[node_id="${node.node_id}"]`); + private selectNode(view: SVGSelection, node: MapNode) { + return view.selectAll(`g.node[node_id="${node.id}"]`); } } diff --git a/src/app/components/project-map/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts b/src/app/components/project-map/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts index 564405e1..5e51e937 100644 --- a/src/app/components/project-map/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts +++ b/src/app/components/project-map/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts @@ -21,6 +21,7 @@ export class MoveLayerUpActionComponent implements OnInit { moveLayerUp() { this.node.z++; + this.nodesDataSource.update(this.node); this.nodeService .update(this.server, this.node) .subscribe((node: Node) => {}); diff --git a/src/app/components/project-map/project-map-shortcuts/project-map-shortcuts.component.ts b/src/app/components/project-map/project-map-shortcuts/project-map-shortcuts.component.ts index 41124df8..00bfa90b 100644 --- a/src/app/components/project-map/project-map-shortcuts/project-map-shortcuts.component.ts +++ b/src/app/components/project-map/project-map-shortcuts/project-map-shortcuts.component.ts @@ -37,14 +37,14 @@ export class ProjectMapShortcutsComponent implements OnInit, OnDestroy { onDeleteHandler(event: KeyboardEvent): boolean { if (!this.projectService.isReadOnly(this.project)) { - const selectedNodes = this.selectionManager.getSelectedNodes(); - if (selectedNodes) { - selectedNodes.forEach((node) => { - this.nodesService.delete(this.server, node).subscribe(data => { - this.toaster.success("Node has been deleted"); - }); - }); - } + // const selectedNodes = this.selectionManager.getSelectedNodes(); + // if (selectedNodes) { + // selectedNodes.forEach((node) => { + // this.nodesService.delete(this.server, node).subscribe(data => { + // this.toaster.success("Node has been deleted"); + // }); + // }); + // } } return false; } diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 6c5c8ea8..efadfac8 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -31,6 +31,7 @@ import { LinkCreated } from '../../cartography/events/links'; import { NodeWidget } from '../../cartography/widgets/node'; import { DraggedDataEvent } from '../../cartography/events/event-source'; import { DrawingService } from '../../services/drawing.service'; +import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-node-to-node-converter'; @Component({ @@ -77,6 +78,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { private mapChangeDetectorRef: MapChangeDetectorRef, private nodeWidget: NodeWidget, private selectionManager: SelectionManager, + private mapNodeToNode: MapNodeToNodeConverter, protected nodesDataSource: NodesDataSource, protected linksDataSource: LinksDataSource, protected drawingsDataSource: DrawingsDataSource, @@ -187,8 +189,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy { setUpMapCallbacks(project: Project) { const onContextMenu = this.nodeWidget.onContextMenu.subscribe((eventNode: NodeContextMenu) => { + const node = this.mapNodeToNode.convert(eventNode.node); this.nodeContextMenu.open( - eventNode.node, + node, eventNode.event.clientY, eventNode.event.clientX ); diff --git a/src/app/handlers/project-web-service-handler.ts b/src/app/handlers/project-web-service-handler.ts index 9b6aba5e..2d359047 100644 --- a/src/app/handlers/project-web-service-handler.ts +++ b/src/app/handlers/project-web-service-handler.ts @@ -16,9 +16,11 @@ export class WebServiceMessage { @Injectable() export class ProjectWebServiceHandler { - constructor(private nodesDataSource: NodesDataSource, - private linksDataSource: LinksDataSource, - private drawingsDataSource: DrawingsDataSource) {} + constructor( + private nodesDataSource: NodesDataSource, + private linksDataSource: LinksDataSource, + private drawingsDataSource: DrawingsDataSource + ) {} public connect(ws: Subject) { const subscription = ws.subscribe((message: WebServiceMessage) => { diff --git a/src/app/services/drawing.service.spec.ts b/src/app/services/drawing.service.spec.ts index 85a5c3f7..363e4bb5 100644 --- a/src/app/services/drawing.service.spec.ts +++ b/src/app/services/drawing.service.spec.ts @@ -14,7 +14,6 @@ describe('DrawingService', () => { let httpClient: HttpClient; let httpTestingController: HttpTestingController; let httpServer: HttpServer; - let service: DrawingService; let server: Server; beforeEach(() => { @@ -32,7 +31,6 @@ describe('DrawingService', () => { httpClient = TestBed.get(HttpClient); httpTestingController = TestBed.get(HttpTestingController); httpServer = TestBed.get(HttpServer); - service = TestBed.get(DrawingService); server = getTestServer(); }); diff --git a/src/app/services/link.service.spec.ts b/src/app/services/link.service.spec.ts index 0e3c1e8f..aaad284e 100644 --- a/src/app/services/link.service.spec.ts +++ b/src/app/services/link.service.spec.ts @@ -14,7 +14,6 @@ describe('LinkService', () => { let httpClient: HttpClient; let httpTestingController: HttpTestingController; let httpServer: HttpServer; - let service: LinkService; let server: Server; beforeEach(() => { @@ -32,7 +31,6 @@ describe('LinkService', () => { httpClient = TestBed.get(HttpClient); httpTestingController = TestBed.get(HttpTestingController); httpServer = TestBed.get(HttpServer); - service = TestBed.get(LinkService); server = getTestServer(); }); diff --git a/src/app/services/link.service.ts b/src/app/services/link.service.ts index ecbf59a2..06b262c3 100644 --- a/src/app/services/link.service.ts +++ b/src/app/services/link.service.ts @@ -10,26 +10,27 @@ import {Port} from "../models/port"; export class LinkService { - constructor(private httpServer: HttpServer) { } + constructor( + private httpServer: HttpServer) {} createLink( server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port) { return this.httpServer - .post( - server, - `/projects/${source_node.project_id}/links`, - {"nodes": [ - { - node_id: source_node.node_id, - port_number: source_port.port_number, - adapter_number: source_port.adapter_number - }, - { - node_id: target_node.node_id, - port_number: target_port.port_number, - adapter_number: target_port.adapter_number - } - ]}); + .post( + server, + `/projects/${source_node.project_id}/links`, + {"nodes": [ + { + node_id: source_node.node_id, + port_number: source_port.port_number, + adapter_number: source_port.adapter_number + }, + { + node_id: target_node.node_id, + port_number: target_port.port_number, + adapter_number: target_port.adapter_number + } + ]}); } } diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index adfb5c33..8fe36f63 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -12,47 +12,48 @@ import { SettingsService } from "./settings.service"; @Injectable() export class ProjectService { - constructor(private httpServer: HttpServer, - private settingsService: SettingsService) { } + constructor( + private httpServer: HttpServer, + private settingsService: SettingsService) {} get(server: Server, project_id: string) { return this.httpServer - .get(server, `/projects/${project_id}`); + .get(server, `/projects/${project_id}`); } open(server: Server, project_id: string) { return this.httpServer - .post(server, `/projects/${project_id}/open`, {}); + .post(server, `/projects/${project_id}/open`, {}); } close(server: Server, project_id: string) { return this.httpServer - .post(server, `/projects/${project_id}/close`, {}); + .post(server, `/projects/${project_id}/close`, {}); } list(server: Server) { return this.httpServer - .get(server, '/projects'); + .get(server, '/projects'); } nodes(server: Server, project_id: string) { return this.httpServer - .get(server, `/projects/${project_id}/nodes`); + .get(server, `/projects/${project_id}/nodes`); } links(server: Server, project_id: string) { return this.httpServer - .get(server, `/projects/${project_id}/links`); + .get(server, `/projects/${project_id}/links`); } drawings(server: Server, project_id: string) { return this.httpServer - .get(server, `/projects/${project_id}/drawings`); + .get(server, `/projects/${project_id}/drawings`); } delete(server: Server, project_id: string): Observable { return this.httpServer - .delete(server, `/projects/${project_id}`); + .delete(server, `/projects/${project_id}`); } notificationsPath(server: Server, project_id: string): string { diff --git a/src/app/services/symbol.service.spec.ts b/src/app/services/symbol.service.spec.ts index 75fbffb2..a1c20eba 100644 --- a/src/app/services/symbol.service.spec.ts +++ b/src/app/services/symbol.service.spec.ts @@ -14,7 +14,6 @@ describe('SymbolService', () => { let httpClient: HttpClient; let httpTestingController: HttpTestingController; let httpServer: HttpServer; - let service: SymbolService; let server: Server; beforeEach(() => { @@ -32,7 +31,6 @@ describe('SymbolService', () => { httpClient = TestBed.get(HttpClient); httpTestingController = TestBed.get(HttpTestingController); httpServer = TestBed.get(HttpServer); - service = TestBed.get(SymbolService); server = getTestServer(); });