ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-27 14:29:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use Map* instead of plain models

Browse Source
This commit is contained in:
ziajka 2018-11-09 14:46:56 +01:00
parent 17e59fde68
commit e4e9c671c7
63 changed files with 448 additions and 381 deletions
src/app
cartography
cartography.module.ts
components
draw-link-tool
draw-link-tool.component.ts
map
map.component.ts
node-select-interface
node-select-interface.component.ts
converters/map
link-node-to-map-link-node-converter.tslink-to-map-link-converter.tsmap-link-node-to-link-node-converter.tsmap-link-to-link-converter.tsmap-node-to-node-converter.tsmap-port-to-port-converter.tsport-to-map-port-converter.tssymbol-to-map-symbol-converter.ts
datasources
drawings-datasource.spec.tsdrawings-datasource.tslinks-datasource.ts
events
drawings-event-source.tslinks.tsnodes-event-source.tsnodes.ts
helpers
multi-link-calculator-helper.ts
listeners
drawings-draggable-listener.tsnodes-draggable-listener.ts
managers
layers-manager.spec.tslayers-manager.tsselection-manager.spec.tsselection-manager.ts
models
layer.ts
map
map-drawing.tsmap-link.ts
node.ts
widgets
drawing.tsdrawings.ts
drawings
ellipse-drawing.spec.tsellipse-drawing.tsimage-drawing.spec.tsimage-drawing.tsline-drawing.spec.tsline-drawing.tsrect-drawing.spec.tsrect-drawing.tstext-drawing.spec.tstext-drawing.ts
graph-layout.tsinterface-label.spec.tsinterface-label.tsinterface-status.tslink.tslinks.spec.tslinks.ts
links
ethernet-link.tsserial-link.ts
node.spec.tsnode.tsnodes.ts
components/project-map
node-context-menu/actions/move-layer-up-action
move-layer-up-action.component.ts
project-map-shortcuts
project-map-shortcuts.component.ts
project-map.component.ts
handlers
project-web-service-handler.ts
services
drawing.service.spec.tslink.service.spec.tslink.service.tsproject.service.tssymbol.service.spec.ts

28
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 ]

10
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));

60
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<DraggedDataEvent<Node>>;
@Output() drawingDragged: EventEmitter<DraggedDataEvent<Drawing>>;
@Output() nodeDragged = new EventEmitter<DraggedDataEvent<Node>>();
@Output() drawingDragged = new EventEmitter<DraggedDataEvent<Drawing>>();
@Output() onLinkCreated = new EventEmitter<LinkCreated>();
private parentNativeElement: any;
private svg: Selection<SVGSVGElement, any, null, undefined>;
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<Node>(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() {

10
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

2
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()

4
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()

2
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()

4
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()

2
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()

2
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()

2
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()

2
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()

8
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);

2
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()

2
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()

6
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<DraggedDataEvent<Drawing>>();
}
public dragged = new EventEmitter<DraggedDataEvent<MapDrawing>>();
}

14
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
) {}
}

6
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<DraggedDataEvent<Node>>();
}
public dragged = new EventEmitter<DraggedDataEvent<MapNode>>();
}

6
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 {}
export class NodeContextMenu extends NodeEvent {}

10
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)) {

22
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<Drawing>) => {
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<MapDrawing>) => {
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<Drawing>) => {
let drawings = this.selectionManager.getSelectedDrawings();
drawings.forEach((drawing: Drawing) => {
this.drag = this.drawingsWidget.draggable.drag.subscribe((evt: DraggableStart<MapDrawing>) => {
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<Drawing>) => {
let drawings = this.selectionManager.getSelectedDrawings();
drawings.forEach((drawing: Drawing) => {
this.drawingsEventSource.dragged.emit(new DraggedDataEvent<Drawing>(drawing));
this.end = this.drawingsWidget.draggable.end.subscribe((evt: DraggableStart<MapDrawing>) => {
const drawings = this.selectionManager.getSelectedDrawings();
drawings.forEach((drawing: MapDrawing) => {
this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing>(drawing));
});
});
}

25
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<Node>) => {
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<MapNode>) => {
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<Node>) => {
let nodes = this.selectionManager.getSelectedNodes();
nodes.forEach((node: Node) => {
this.drag = this.nodesWidget.draggable.drag.subscribe((evt: DraggableStart<MapNode>) => {
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<Node>) => {
let nodes = this.selectionManager.getSelectedNodes();
nodes.forEach((node: Node) => {
this.nodesEventSource.dragged.emit(new DraggedDataEvent<Node>(node));
this.end = this.nodesWidget.draggable.end.subscribe((evt: DraggableStart<MapNode>) => {
const nodes = this.selectionManager.getSelectedNodes();
nodes.forEach((node: MapNode) => {
this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode>(node));
});
});
}

26
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]);

20
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);

38
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]);

95
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<Rectangle>) {
this.subscription = subject.subscribe((rectangle: Rectangle) => {
@ -44,9 +45,9 @@ export class SelectionManager {
}
public onSelection(rectangle: Rectangle) {
this.selectedNodes = this.getSelectedItemsInRectangle<Node>(this.nodesDataSource, rectangle);
this.selectedLinks = this.getSelectedItemsInRectangle<Link>(this.linksDataSource, rectangle);
this.selectedDrawings = this.getSelectedItemsInRectangle<Drawing>(this.drawingsDataSource, rectangle);
// this.selectedNodes = this.getSelectedItemsInRectangle<MapNode>(this.nodesDataSource, rectangle);
// this.selectedLinks = this.getSelectedItemsInRectangle<MapLink>(this.linksDataSource, rectangle);
// this.selectedDrawings = this.getSelectedItemsInRectangle<MapDrawing>(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<Node>(this.nodesDataSource, (node: Node) => {
return !!nodes.find((n: Node) => node.node_id === n.node_id);
});
public setSelectedNodes(nodes: MapNode[]) {
// this.selectedNodes = this.setSelectedItems<MapNode>(this.nodesDataSource, (node: MapNode) => {
// return !!nodes.find((n: MapNode) => node.id === n.id);
// });
}
public setSelectedLinks(links: Link[]) {
this.selectedLinks = this.setSelectedItems<Link>(this.linksDataSource, (link: Link) => {
return !!links.find((l: Link) => link.link_id === l.link_id);
});
public setSelectedLinks(links: MapLink[]) {
// this.selectedLinks = this.setSelectedItems<MapLink>(this.linksDataSource, (link: MapLink) => {
// return !!links.find((l: MapLink) => link.link_id === l.link_id);
// });
}
public setSelectedDrawings(drawings: Drawing[]) {
this.selectedDrawings = this.setSelectedItems<Drawing>(this.drawingsDataSource, (drawing: Drawing) => {
return !!drawings.find((d: Drawing) => drawing.drawing_id === d.drawing_id);
});
public setSelectedDrawings(drawings: MapDrawing[]) {
// this.selectedDrawings = this.setSelectedItems<MapDrawing>(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 [];
}

12
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[] = []
) {
}
}

3
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
}

5
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

2
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 {

6
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<SVGGElement, Drawing>("g.drawing_body")
const drawing_body = view.selectAll<SVGGElement, MapDrawing>("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})`;
});

20
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<SVGGElement, Drawing>();
public draggable = new Draggable<SVGGElement, MapDrawing>();
public draggingEnabled = false;
// public onContextMenu = new EventEmitter<NodeContextMenu>();
@ -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<SVGGElement, Drawing>("g.drawing")
.selectAll<SVGGElement, MapDrawing>("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<SVGGElement>('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<SVGGElement, Drawing>(`g.drawing[drawing_id="${drawing.drawing_id}"]`);
private selectDrawing(view: SVGSelection, drawing: MapDrawing) {
return view.selectAll<SVGGElement, MapDrawing>(`g.drawing[drawing_id="${drawing.id}"]`);
}
}

10
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<SVGGElement, Drawing>('g.drawing').data([drawing]);
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);

4
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<SVGEllipseElement, EllipseElement>('ellipse.ellipse_element')
.data((d: Drawing) => {
.data((d: MapDrawing) => {
return (d.element && d.element instanceof EllipseElement) ? [d.element] : [];
});

8
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<SVGGElement, Drawing>('g.drawing').data([drawing]);
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);

4
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<SVGImageElement, ImageElement>('image.image_element')
.data((d: Drawing) => {
.data((d: MapDrawing) => {
return (d.element && d.element instanceof ImageElement) ? [d.element] : [];
});

8
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<SVGGElement, Drawing>('g.drawing').data([drawing]);
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);

4
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<SVGLineElement, LineElement>('line.line_element')
.data((d: Drawing) => {
.data((d: MapDrawing) => {
return (d.element && d.element instanceof LineElement) ? [d.element] : [];
});

8
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<SVGGElement, Drawing>('g.drawing').data([drawing]);
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);

4
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<SVGRectElement, RectElement>('rect.rect_element')
.data((d: Drawing) => {
.data((d: MapDrawing) => {
return (d.element && d.element instanceof RectElement) ? [d.element] : [];
});

12
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<SVGGElement, Drawing>('g.drawing').data([drawing]);
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings.enter().append<SVGGElement>('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<SVGGElement, Drawing>('g.drawing').data([drawing]);
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings.enter().append<SVGGElement>('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<SVGGElement, Drawing>('g.drawing').data([drawing]);
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);

4
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<SVGTextElement, TextElement>('text.text_element')
.data((d: Drawing) => {
.data((d: MapDrawing) => {
return (d.element && d.element instanceof TextElement) ? [d.element] : [];
});

18
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;
}

38
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<SVGGElement, Link, SVGGElement, any>;
let links: Link[];
let linksEnter: Selection<SVGGElement, MapLink, SVGGElement, any>;
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<SVGGElement, Link>('g.link')
.selectAll<SVGGElement, MapLink>('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);

14
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<SVGGElement, InterfaceLabel>('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);

6
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<SVGGElement, Link>(this);
view.each(function (this: SVGGElement, l: MapLink) {
const link_group = select<SVGGElement, MapLink>(this);
const link_path = link_group.select<SVGPathElement>('path');
const start_point: SVGPoint = link_path.node().getPointAtLength(45);

6
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<SVGGElement, Link>("g.link_body")
const link_body = view.selectAll<SVGGElement, MapLink>("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<SVGPathElement>('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);

20
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<SVGGElement, Link>('g.link');
const drew = svg.canvas.selectAll<SVGGElement, MapLink>('g.link');
const linkNode = drew.nodes()[0];
expect(linkNode.getAttribute('link_id')).toEqual('link1');
expect(linkNode.getAttribute('map-source')).toEqual('1');

22
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<SVGGElement, Link>("g.link")
.selectAll<SVGGElement, MapLink>("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<SVGGElement>('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<SVGGElement, Link>(`g.link[link_id="${link.link_id}"]`);
private selectLink(view: SVGSelection, link: MapLink) {
return view.selectAll<SVGGElement, MapLink>(`g.link[link_id="${link.id}"]`);
}
}

10
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<SVGPathElement, EthernetLinkPath>('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 [];
});

10
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<SVGPathElement, SerialLinkPath>('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 [];
});

12
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<SVGGElement, Node>('g.node');
const drew = svg.canvas.selectAll<SVGGElement, MapNode>('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', () => {

43
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<NodeDragged>();
public onNodeDragging = new EventEmitter<NodeDragging>();
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<SVGGElement, Node>("g.node_body")
const node_body = view.selectAll<SVGGElement, MapNode>("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<SVGImageElement>('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<SVGTextElement>('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) {

18
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<SVGGElement, Node>();
public draggable = new Draggable<SVGGElement, MapNode>();
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<SVGGElement, Node>("g.node")
.selectAll<SVGGElement, MapNode>("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<SVGGElement>('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<SVGGElement, Node>(`g.node[node_id="${node.node_id}"]`);
private selectNode(view: SVGSelection, node: MapNode) {
return view.selectAll<SVGGElement, MapNode>(`g.node[node_id="${node.id}"]`);
}
}

1
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) => {});

16
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;
}

5
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
);

8
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<WebServiceMessage>) {
const subscription = ws.subscribe((message: WebServiceMessage) => {

2
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();
});

2
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();
});

33
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
}
]});
}
}

21
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<Project>(server, `/projects/${project_id}`);
.get<Project>(server, `/projects/${project_id}`);
}
open(server: Server, project_id: string) {
return this.httpServer
.post<Project>(server, `/projects/${project_id}/open`, {});
.post<Project>(server, `/projects/${project_id}/open`, {});
}
close(server: Server, project_id: string) {
return this.httpServer
.post<Project>(server, `/projects/${project_id}/close`, {});
.post<Project>(server, `/projects/${project_id}/close`, {});
}
list(server: Server) {
return this.httpServer
.get<Project[]>(server, '/projects');
.get<Project[]>(server, '/projects');
}
nodes(server: Server, project_id: string) {
return this.httpServer
.get<Node[]>(server, `/projects/${project_id}/nodes`);
.get<Node[]>(server, `/projects/${project_id}/nodes`);
}
links(server: Server, project_id: string) {
return this.httpServer
.get<Link[]>(server, `/projects/${project_id}/links`);
.get<Link[]>(server, `/projects/${project_id}/links`);
}
drawings(server: Server, project_id: string) {
return this.httpServer
.get<Drawing[]>(server, `/projects/${project_id}/drawings`);
.get<Drawing[]>(server, `/projects/${project_id}/drawings`);
}
delete(server: Server, project_id: string): Observable<any> {
return this.httpServer
.delete(server, `/projects/${project_id}`);
.delete(server, `/projects/${project_id}`);
}
notificationsPath(server: Server, project_id: string): string {

2
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();
});