ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-01 08:48:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into Support-node-label-edit-mode---only-by-menu

Browse Source
This commit is contained in:
Piotr Pekala 2019-07-01 03:47:22 -07:00
commit 02f42c6681
39 changed files with 1141 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app-routing.module.ts
View File

@ -52,6 +52,7 @@ import { CopyDockerTemplateComponent } from './components/preferences/docker/cop
import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component';
import { ConsoleComponent } from './components/settings/console/console.component';
import { HelpComponent } from './components/help/help.component';
const routes: Routes = [
{
@ -62,6 +63,7 @@ const routes: Routes = [
{ path: 'servers', component: ServersComponent },
{ path: 'bundled', component: BundledServerFinderComponent },
{ path: 'server/:server_id/projects', component: ProjectsComponent },
{ path: 'help', component: HelpComponent },
{ path: 'settings', component: SettingsComponent },
{ path: 'settings/console', component: ConsoleComponent },
{ path: 'installed-software', component: InstalledSoftwareComponent },

12
src/app/app.module.ts
View File

@ -180,12 +180,16 @@ import { StartCaptureDialogComponent } from './components/project-map/packet-cap
import { SuspendLinkActionComponent } from './components/project-map/context-menu/actions/suspend-link/suspend-link-action.component';
import { ResumeLinkActionComponent } from './components/project-map/context-menu/actions/resume-link-action/resume-link-action.component';
import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component';
import { MapScaleService } from './services/mapScale.service';
import { AdbutlerComponent } from './components/adbutler/adbutler.component';
import { ConsoleService } from './services/settings/console.service';
import { DefaultConsoleService } from './services/settings/default-console.service';
import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer';
import { NonNegativeValidator } from './validators/non-negative-validator';
import { RotationValidator } from './validators/rotation-validator';
import { MapSettingService } from './services/mapsettings.service';
import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
import { HelpComponent } from './components/help/help.component';
if (environment.production) {
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -304,7 +308,9 @@ if (environment.production) {
AdbutlerComponent,
ConsoleDeviceActionComponent,
ConsoleComponent,
NodesMenuComponent
NodesMenuComponent,
ProjectMapMenuComponent,
HelpComponent
],
imports: [
BrowserModule,
@ -374,11 +380,13 @@ if (environment.production) {
IouConfigurationService,
RecentlyOpenedProjectService,
ServerManagementService,
MapScaleService,
ConsoleService,
DefaultConsoleService,
NodeCreatedLabelStylesFixer,
NonNegativeValidator,
RotationValidator
RotationValidator,
MapSettingService
],
entryComponents: [
AddServerDialogComponent,

8
src/app/cartography/cartography.module.ts
View File

@ -55,6 +55,9 @@ import { RectangleElementFactory } from './helpers/drawings-factory/rectangle-el
import { LineElementFactory } from './helpers/drawings-factory/line-element-factory';
import { TextEditorComponent } from './components/text-editor/text-editor.component';
import { DrawingAddingComponent } from './components/drawing-adding/drawing-adding.component';
import { MovingEventSource } from './events/moving-event-source';
import { MovingCanvasDirective } from './directives/moving-canvas.directive';
import { ZoomingCanvasDirective } from './directives/zooming-canvas.directive';
@NgModule({
imports: [CommonModule, MatMenuModule, MatIconModule],
@ -67,7 +70,9 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi
...ANGULAR_MAP_DECLARATIONS,
SelectionControlComponent,
SelectionSelectComponent,
DraggableSelectionComponent
DraggableSelectionComponent,
MovingCanvasDirective,
ZoomingCanvasDirective
],
providers: [
CssFixer,
@ -87,6 +92,7 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi
DrawingsEventSource,
NodesEventSource,
LinksEventSource,
MovingEventSource,
MapDrawingToSvgConverter,
DrawingToMapDrawingConverter,
LabelToMapLabelConverter,

2
src/app/cartography/components/d3-map/d3-map.component.html
View File

@ -1,4 +1,4 @@
<svg #svg class="map" preserveAspectRatio="none">
<svg #svg class="map" preserveAspectRatio="none" movingCanvas zoomingCanvas>
<filter id="grayscale"><feColorMatrix id="feGrayscale" type="saturate" values="0" /></filter>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 472 B

After

Width:  |  Height:  |  Size: 499 B

9
src/app/cartography/components/d3-map/d3-map.component.ts
View File

@ -31,6 +31,7 @@ import { MapSettingsManager } from '../../managers/map-settings-manager';
import { Server } from '../../../models/server';
import { ToolsService } from '../../../services/tools.service';
import { TextEditorComponent } from '../text-editor/text-editor.component';
import { MapScaleService } from '../../../services/mapScale.service';
@Component({
selector: 'app-d3-map',
@ -73,7 +74,8 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
protected selectionToolWidget: SelectionTool,
protected movingToolWidget: MovingTool,
public graphLayout: GraphLayout,
private toolsService: ToolsService
private toolsService: ToolsService,
private mapScaleService: MapScaleService
) {
this.parentNativeElement = element.nativeElement;
}
@ -119,9 +121,12 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
}
});
this.subscriptions.push(
this.mapScaleService.scaleChangeEmitter.subscribe((value: number) => this.redraw())
);
this.subscriptions.push(
this.toolsService.isMovingToolActivated.subscribe((value: boolean) => {
this.movingToolWidget.setEnabled(value);
this.mapChangeDetectorRef.detectChanges();
})
);

4
src/app/cartography/components/draggable-selection/draggable-selection.component.spec.ts
View File

@ -21,6 +21,7 @@ import { MapLabel } from '../../models/map/map-label';
import { MapLinkNode } from '../../models/map/map-link-node';
import { select } from 'd3-selection';
import { MapLink } from '../../models/map/map-link';
import { MapSettingService } from '../../../services/mapsettings.service';
describe('DraggableSelectionComponent', () => {
let component: DraggableSelectionComponent;
@ -121,7 +122,8 @@ describe('DraggableSelectionComponent', () => {
{ provide: NodesEventSource, useValue: nodesEventSourceStub },
{ provide: DrawingsEventSource, useValue: drawingsEventSourceStub },
{ provide: GraphDataManager, useValue: mockedGraphDataManager },
{ provide: LinksEventSource, useValue: linksEventSourceStub }
{ provide: LinksEventSource, useValue: linksEventSourceStub },
{ provide: MapSettingService, useClass: MapSettingService }
],
declarations: [DraggableSelectionComponent]
}).compileComponents();

199
src/app/cartography/components/draggable-selection/draggable-selection.component.ts
View File

@ -17,6 +17,7 @@ import { LabelWidget } from '../../widgets/label';
import { InterfaceLabelWidget } from '../../widgets/interface-label';
import { MapLinkNode } from '../../models/map/map-link-node';
import { LinksEventSource } from '../../events/links-event-source';
import { MapSettingService } from '../../../services/mapsettings.service';
@Component({
selector: 'app-draggable-selection',
@ -27,6 +28,8 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
private start: Subscription;
private drag: Subscription;
private end: Subscription;
private mapSettingsSubscription: Subscription;
private isMapLocked: boolean = false;
@Input('svg') svg: SVGSVGElement;
@ -40,12 +43,17 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
private nodesEventSource: NodesEventSource,
private drawingsEventSource: DrawingsEventSource,
private graphDataManager: GraphDataManager,
private linksEventSource: LinksEventSource
private linksEventSource: LinksEventSource,
private mapSettingsService: MapSettingService
) {}
ngOnInit() {
const svg = select(this.svg);
this.mapSettingsService.isMapLocked.subscribe((value) => {
this.isMapLocked = value;
});
this.start = merge(
this.nodesWidget.draggable.start,
this.drawingsWidget.draggable.start,
@ -84,75 +92,77 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
this.labelWidget.draggable.drag,
this.interfaceWidget.draggable.drag
).subscribe((evt: DraggableDrag<any>) => {
const selected = this.selectionManager.getSelected();
const selectedNodes = selected.filter(item => item instanceof MapNode);
// update nodes
selectedNodes.forEach((node: MapNode) => {
node.x += evt.dx;
node.y += evt.dy;
if (!this.isMapLocked) {
const selected = this.selectionManager.getSelected();
const selectedNodes = selected.filter(item => item instanceof MapNode);
// update nodes
selectedNodes.forEach((node: MapNode) => {
node.x += evt.dx;
node.y += evt.dy;
this.nodesWidget.redrawNode(svg, node);
this.nodesWidget.redrawNode(svg, node);
const links = this.graphDataManager
.getLinks()
.filter(
link =>
(link.target !== undefined && link.target.id === node.id) ||
(link.source !== undefined && link.source.id === node.id)
);
links.forEach(link => {
this.linksWidget.redrawLink(svg, link);
});
});
// update drawings
selected
.filter(item => item instanceof MapDrawing)
.forEach((drawing: MapDrawing) => {
drawing.x += evt.dx;
drawing.y += evt.dy;
this.drawingsWidget.redrawDrawing(svg, drawing);
});
// update labels
selected
.filter(item => item instanceof MapLabel)
.forEach((label: MapLabel) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}
const node = this.graphDataManager.getNodes().filter(node => node.id === label.nodeId)[0];
node.label.x += evt.dx;
node.label.y += evt.dy;
this.labelWidget.redrawLabel(svg, label);
});
// update interface labels
selected
.filter(item => item instanceof MapLinkNode)
.forEach((interfaceLabel: MapLinkNode) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === interfaceLabel.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}
const link = this.graphDataManager
const links = this.graphDataManager
.getLinks()
.filter(link => link.nodes[0].id === interfaceLabel.id || link.nodes[1].id === interfaceLabel.id)[0];
if (link.nodes[0].id === interfaceLabel.id) {
link.nodes[0].label.x += evt.dx;
link.nodes[0].label.y += evt.dy;
}
if (link.nodes[1].id === interfaceLabel.id) {
link.nodes[1].label.x += evt.dx;
link.nodes[1].label.y += evt.dy;
}
.filter(
link =>
(link.target !== undefined && link.target.id === node.id) ||
(link.source !== undefined && link.source.id === node.id)
);
this.linksWidget.redrawLink(svg, link);
links.forEach(link => {
this.linksWidget.redrawLink(svg, link);
});
});
// update drawings
selected
.filter(item => item instanceof MapDrawing)
.forEach((drawing: MapDrawing) => {
drawing.x += evt.dx;
drawing.y += evt.dy;
this.drawingsWidget.redrawDrawing(svg, drawing);
});
// update labels
selected
.filter(item => item instanceof MapLabel)
.forEach((label: MapLabel) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}
const node = this.graphDataManager.getNodes().filter(node => node.id === label.nodeId)[0];
node.label.x += evt.dx;
node.label.y += evt.dy;
this.labelWidget.redrawLabel(svg, label);
});
// update interface labels
selected
.filter(item => item instanceof MapLinkNode)
.forEach((interfaceLabel: MapLinkNode) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === interfaceLabel.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}
const link = this.graphDataManager
.getLinks()
.filter(link => link.nodes[0].id === interfaceLabel.id || link.nodes[1].id === interfaceLabel.id)[0];
if (link.nodes[0].id === interfaceLabel.id) {
link.nodes[0].label.x += evt.dx;
link.nodes[0].label.y += evt.dy;
}
if (link.nodes[1].id === interfaceLabel.id) {
link.nodes[1].label.x += evt.dx;
link.nodes[1].label.y += evt.dy;
}
this.linksWidget.redrawLink(svg, link);
});
}
});
this.end = merge(
@ -161,39 +171,41 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
this.labelWidget.draggable.end,
this.interfaceWidget.draggable.end
).subscribe((evt: DraggableEnd<any>) => {
const selected = this.selectionManager.getSelected();
const selectedNodes = selected.filter(item => item instanceof MapNode);
if (!this.isMapLocked) {
const selected = this.selectionManager.getSelected();
const selectedNodes = selected.filter(item => item instanceof MapNode);
selectedNodes.forEach((item: MapNode) => {
this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode>(item, evt.dx, evt.dy));
});
selected
.filter(item => item instanceof MapDrawing)
.forEach((item: MapDrawing) => {
this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing>(item, evt.dx, evt.dy));
selectedNodes.forEach((item: MapNode) => {
this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode>(item, evt.dx, evt.dy));
});
selected
.filter(item => item instanceof MapLabel)
.forEach((label: MapLabel) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}
selected
.filter(item => item instanceof MapDrawing)
.forEach((item: MapDrawing) => {
this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing>(item, evt.dx, evt.dy));
});
this.nodesEventSource.labelDragged.emit(new DraggedDataEvent<MapLabel>(label, evt.dx, evt.dy));
});
selected
.filter(item => item instanceof MapLabel)
.forEach((label: MapLabel) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}
selected
.filter(item => item instanceof MapLinkNode)
.forEach((label: MapLinkNode) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}
this.linksEventSource.interfaceDragged.emit(new DraggedDataEvent<MapLinkNode>(label, evt.dx, evt.dy));
});
this.nodesEventSource.labelDragged.emit(new DraggedDataEvent<MapLabel>(label, evt.dx, evt.dy));
});
selected
.filter(item => item instanceof MapLinkNode)
.forEach((label: MapLinkNode) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}
this.linksEventSource.interfaceDragged.emit(new DraggedDataEvent<MapLinkNode>(label, evt.dx, evt.dy));
});
}
});
}
@ -201,5 +213,6 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
this.start.unsubscribe();
this.drag.unsubscribe();
this.end.unsubscribe();
this.mapSettingsSubscription.unsubscribe();
}
}

4
src/app/cartography/components/drawing-adding/drawing-adding.component.ts
View File

@ -25,8 +25,8 @@ export class DrawingAddingComponent implements OnInit, OnDestroy {
activate() {
let listener = (event: MouseEvent) => {
let x = event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
let y = event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
let x = (event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x))/this.context.transformation.k;
let y = (event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y))/this.context.transformation.k;
this.drawingsEventSource.pointToAddSelected.emit(new AddedDataEvent(x, y));
this.deactivate();

4
src/app/cartography/components/text-editor/text-editor.component.spec.ts
View File

@ -5,6 +5,7 @@ import { DrawingsEventSource } from '../../events/drawings-event-source';
import { ToolsService } from '../../../services/tools.service';
import { Context } from '../../models/context';
import { Renderer2 } from '@angular/core';
import { MapScaleService } from '../../../services/mapScale.service';
describe('TemporaryTextElementComponent', () => {
let component: TextEditorComponent;
@ -17,7 +18,8 @@ describe('TemporaryTextElementComponent', () => {
{ provide: DrawingsEventSource, useClass: DrawingsEventSource },
{ provide: ToolsService, useClass: ToolsService },
{ provide: Context, useClass: Context },
{ provide: Renderer2, useClass: Renderer2 }
{ provide: Renderer2, useClass: Renderer2 },
{ provide: MapScaleService, useClass: MapScaleService }
],
declarations: [TextEditorComponent]
}).compileComponents();

15
src/app/cartography/components/text-editor/text-editor.component.ts
View File

@ -6,6 +6,7 @@ import { select } from 'd3-selection';
import { TextElement } from '../../models/drawings/text-element';
import { Context } from '../../models/context';
import { Subscription } from 'rxjs';
import { MapScaleService } from '../../../services/mapScale.service';
@Component({
selector: 'app-text-editor',
@ -32,7 +33,8 @@ export class TextEditorComponent implements OnInit, OnDestroy {
private drawingsEventSource: DrawingsEventSource,
private toolsService: ToolsService,
private context: Context,
private renderer: Renderer2
private renderer: Renderer2,
private mapScaleService: MapScaleService
) {}
ngOnInit() {
@ -48,14 +50,15 @@ export class TextEditorComponent implements OnInit, OnDestroy {
this.leftPosition = event.pageX.toString() + 'px';
this.topPosition = event.pageY.toString() + 'px';
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
this.temporaryTextElement.nativeElement.focus();
let textListener = () => {
this.drawingsEventSource.textAdded.emit(
new TextAddedDataEvent(
this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ''),
event.pageX - this.context.transformation.x,
event.pageY - this.context.transformation.y
event.pageX,
event.pageY
)
);
this.deactivateTextAdding();
@ -84,16 +87,16 @@ export class TextEditorComponent implements OnInit, OnDestroy {
.selectAll<SVGTextElement, TextElement>('text.text_element')
.on('dblclick', (elem, index, textElements) => {
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
this.editedElement = elem;
select(textElements[index]).attr('visibility', 'hidden');
select(textElements[index]).classed('editingMode', true);
this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute('drawing_id');
var transformData = textElements[index].parentElement.getAttribute('transform').split(/\(|\)/);
var x = Number(transformData[1].split(/,/)[0]) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
var y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
var x = (Number(transformData[1].split(/,/)[0]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
var y = (Number(transformData[1].split(/,/)[1]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
this.leftPosition = x.toString() + 'px';
this.topPosition = y.toString() + 'px';
this.temporaryTextElement.nativeElement.innerText = elem.text;

169
src/app/cartography/directives/moving-canvas.directive.spec.ts Normal file
View File

@ -0,0 +1,169 @@
import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { Context } from '../models/context';
import { MovingEventSource } from '../events/moving-event-source';
import { MovingCanvasDirective } from './moving-canvas.directive';
import { Component } from '@angular/core';
@Component({
template: `<svg #svg class="map" preserveAspectRatio="none" movingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>`
})
class DummyComponent {
constructor(){}
}
describe('MovingCanvasDirective', () => {
let component: DummyComponent;
let fixture: ComponentFixture<DummyComponent>;
let movingEventSource = new MovingEventSource();
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [NoopAnimationsModule],
providers: [
{ provide: MovingEventSource, useValue: movingEventSource },
{ provide: Context, useClass: Context }
],
declarations: [DummyComponent, MovingCanvasDirective]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DummyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should move canvas if moving mode is activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let xMovement: number = 200;
let yMovement: number = 200;
canvas.dispatchEvent(new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window
}));
tick();
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement
} as MouseEventInit));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
}));
it('should not move canvas if moving mode is not activated', fakeAsync(() => {
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
canvas.dispatchEvent(new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window
}));
tick();
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: 1000,
movementY: 1000
} as MouseEventInit));
tick();
expect(canvas.getAttribute('transform')).toEqual('translate(0, 0) scale(1)');
}));
it('should not move canvas after mouseup event', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let xMovement: number = 200;
let yMovement: number = 200;
canvas.dispatchEvent(new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window
}));
tick();
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement
} as MouseEventInit));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
canvas.dispatchEvent(new MouseEvent('mouseup', {
bubbles: true,
relatedTarget: canvas,
movementX: 1000,
movementY: 1000
} as MouseEventInit));
tick();
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement
} as MouseEventInit));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
}));
it('should not move canvas after deactivation of moving mode', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let xMovement: number = 200;
let yMovement: number = 200;
canvas.dispatchEvent(new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window
}));
tick();
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement
} as MouseEventInit));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
movingEventSource.movingModeState.emit(false);
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: 1000,
movementY: 1000
} as MouseEventInit));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
}));
});

65
src/app/cartography/directives/moving-canvas.directive.ts Normal file
View File

@ -0,0 +1,65 @@
import { HostListener, ElementRef, Renderer, Directive, Input, OnInit, OnDestroy } from '@angular/core'
import { Subscription } from 'rxjs';
import { MovingEventSource } from '../events/moving-event-source';
import { Context } from '../models/context';
import { select } from 'd3-selection';
@Directive({
selector: '[movingCanvas]',
})
export class MovingCanvasDirective implements OnInit, OnDestroy {
private mouseupListener: Function;
private mousemoveListener: Function;
private movingModeState: Subscription;
private activated: boolean = false;
constructor(
private element: ElementRef,
private movingEventSource: MovingEventSource,
private context: Context
) {}
ngOnInit() {
this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
this.activated = event;
if (!event) this.removelisteners();
});
}
ngOnDestroy() {
this.movingModeState.unsubscribe();
}
@HostListener('mousedown', ['$event'])
onMouseDown(event: MouseEvent) {
if (this.activated) {
this.mousemoveListener = (event: MouseEvent) => {
const view = select(this.element.nativeElement);
const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
canvas.attr('transform', () => {
this.context.transformation.x = this.context.transformation.x + event.movementX;
this.context.transformation.y = this.context.transformation.y + event.movementY;
const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
const kTrans = this.context.transformation.k;
return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
});
};
this.mouseupListener = (event: MouseEvent) => {
this.removelisteners();
};
this.element.nativeElement.addEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
this.element.nativeElement.addEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
}
}
removelisteners() {
this.element.nativeElement.removeEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
this.element.nativeElement.removeEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
}
}

139
src/app/cartography/directives/zooming-canvas.directive.spec.ts Normal file
View File

@ -0,0 +1,139 @@
import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { Context } from '../models/context';
import { MovingEventSource } from '../events/moving-event-source';
import { Component } from '@angular/core';
import { ZoomingCanvasDirective } from './zooming-canvas.directive';
import { MapScaleService } from '../../services/mapScale.service';
@Component({
template: `<svg #svg class="map" preserveAspectRatio="none" zoomingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>`
})
class DummyComponent {
constructor(){}
}
describe('ZoomingCanvasDirective', () => {
let component: DummyComponent;
let fixture: ComponentFixture<DummyComponent>;
let movingEventSource = new MovingEventSource();
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [NoopAnimationsModule],
providers: [
{ provide: MovingEventSource, useValue: movingEventSource },
{ provide: Context, useClass: Context },
{ provide: MapScaleService, useClass: MapScaleService }
],
declarations: [DummyComponent, ZoomingCanvasDirective]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DummyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should zoom in canvas if moving mode is activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
}));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
}));
it('should zoom out canvas if moving mode is activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = 100;
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
}));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(0.9)`);
}));
it('should not zoom in/out canvas if moving mode is not activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
}));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
movingEventSource.movingModeState.emit(false);
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
}));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
}));
it('should not zoom in/out canvas after deactivation of moving mode', fakeAsync(() => {
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
}));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(1)`);
}));
it('should prevent from default wheel behaviour when moving mode activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
const event = new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
});
spyOn(event, 'preventDefault');
canvas.dispatchEvent(event);
tick();
expect(event.preventDefault).toHaveBeenCalled();
}));
});

61
src/app/cartography/directives/zooming-canvas.directive.ts Normal file
View File

@ -0,0 +1,61 @@
import { ElementRef, Directive, OnInit, OnDestroy } from '@angular/core'
import { Subscription } from 'rxjs';
import { MovingEventSource } from '../events/moving-event-source';
import { Context } from '../models/context';
import { select } from 'd3-selection';
import { MapScaleService } from '../../services/mapScale.service';
@Directive({
selector: '[zoomingCanvas]',
})
export class ZoomingCanvasDirective implements OnInit, OnDestroy {
private wheelListener: Function;
private movingModeState: Subscription;
constructor(
private element: ElementRef,
private movingEventSource: MovingEventSource,
private context: Context,
private mapsScaleService: MapScaleService
) {}
ngOnInit() {
this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
event ? this.addListener() : this.removeListener();
});
}
ngOnDestroy() {
this.movingModeState.unsubscribe();
}
addListener() {
this.wheelListener = (event: WheelEvent) => {
event.stopPropagation();
event.preventDefault();
let zoom = event.deltaY;
zoom = event.deltaMode === 0 ? zoom/100 : zoom/3;
const view = select(this.element.nativeElement);
const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
canvas.attr('transform', () => {
this.context.transformation.k = this.context.transformation.k - zoom/10;
const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
const kTrans = this.context.transformation.k;
this.mapsScaleService.setScale(kTrans);
return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
});
};
this.element.nativeElement.addEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject, {passive: false});
}
removeListener() {
this.element.nativeElement.removeEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject);
}
}

6
src/app/cartography/events/moving-event-source.ts Normal file
View File

@ -0,0 +1,6 @@
import { Injectable, EventEmitter } from "@angular/core";
@Injectable()
export class MovingEventSource {
public movingModeState = new EventEmitter<boolean>();
}

4
src/app/cartography/tools/selection-tool.ts
View File

@ -100,7 +100,9 @@ export class SelectionTool {
}
private moveSelection(start, move) {
this.path.attr('d', this.rect(start[0], start[1], move[0] - start[0], move[1] - start[1]));
let x = start[0]/this.context.transformation.k;
let y = start[1]/this.context.transformation.k;
this.path.attr('d', this.rect(x, y, move[0]/this.context.transformation.k - x, move[1]/this.context.transformation.k - y));
this.selectedEvent(start, move);
}

2
src/app/cartography/widgets/node.ts
View File

@ -39,7 +39,7 @@ export class NodeWidget implements Widget {
.merge(node_body_enter)
.classed('selected', (n: MapNode) => this.selectionManager.isSelected(n))
.on('click', (node: MapNode) => {
this.nodesEventSource.clicked.emit(new ClickedDataEvent<MapNode>(node, event.clientX, event.clientY));
this.nodesEventSource.clicked.emit(new ClickedDataEvent<MapNode>(node, event.pageX, event.pageY));
});
// update image of node

38
src/app/components/drawings-listeners/link-created/link-created.component.ts
View File

@ -35,12 +35,48 @@ export class LinkCreatedComponent implements OnInit, OnDestroy {
}
onLinkCreated(linkCreated: MapLinkCreated) {
const xLength = Math.abs(linkCreated.sourceNode.x - linkCreated.targetNode.x);
const yLength = Math.abs(linkCreated.sourceNode.y - linkCreated.targetNode.y);
const zLength = Math.sqrt(Math.pow(xLength, 2) + Math.pow(yLength, 2));
//from law of sines
const sinY = yLength/zLength;
const x = (45 / zLength) * xLength;
const y = (45 / zLength) * yLength;
let xLabelSourceNode = 0;
let yLabelSourceNode = 0;
let xLabelTargetNode = 0;
let yLabelTargetNode = 0;
if ((linkCreated.sourceNode.x <= linkCreated.targetNode.x) && (linkCreated.sourceNode.y <= linkCreated.targetNode.y)) {
xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) + Math.round(x) + 5;
yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) + Math.round(y) + 5;
xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) - Math.round(y) + 5 - Math.round(20 * sinY);
} else if ((linkCreated.sourceNode.x > linkCreated.targetNode.x) && (linkCreated.sourceNode.y < linkCreated.targetNode.y)) {
xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) + Math.round(y) + 5 - Math.round(20 * sinY);
xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) + Math.round(x) + 5;
yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) - Math.round(y) - 5;
} else if ((linkCreated.sourceNode.x < linkCreated.targetNode.x) && (linkCreated.sourceNode.y > linkCreated.targetNode.y)) {
xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) + Math.round(x) + 5 - Math.round(20 * sinY);
yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) - Math.round(y) - 5 - Math.round(20 * sinY);
xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) - Math.round(x) - 5;
yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) + Math.round(y) + 5;
} else if ((linkCreated.sourceNode.x >= linkCreated.targetNode.x) && (linkCreated.sourceNode.y >= linkCreated.targetNode.y)) {
xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) - Math.round(y) + 5 - Math.round(20 * sinY);
xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) + Math.round(x) + 5;
yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) + Math.round(y) + 5;
}
const sourceNode = this.mapNodeToNode.convert(linkCreated.sourceNode);
const sourcePort = this.mapPortToPort.convert(linkCreated.sourcePort);
const targetNode = this.mapNodeToNode.convert(linkCreated.targetNode);
const targetPort = this.mapPortToPort.convert(linkCreated.targetPort);
this.linkService.createLink(this.server, sourceNode, sourcePort, targetNode, targetPort).subscribe(() => {
this.linkService.createLink(this.server, sourceNode, sourcePort, targetNode, targetPort, xLabelSourceNode, yLabelSourceNode, xLabelTargetNode, yLabelTargetNode).subscribe(() => {
this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => {
this.linksDataSource.set(links);
});

4
src/app/components/drawings-listeners/text-added/text-added.component.ts
View File

@ -45,8 +45,8 @@ export class TextAddedComponent implements OnInit, OnDestroy {
.add(
this.server,
this.project.project_id,
evt.x - this.context.getZeroZeroTransformationPoint().x,
evt.y - this.context.getZeroZeroTransformationPoint().y,
(evt.x - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x))/this.context.transformation.k,
(evt.y - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y))/this.context.transformation.k,
svgText
)
.subscribe((serverDrawing: Drawing) => {

15
src/app/components/help/help.component.html Normal file
View File

@ -0,0 +1,15 @@
<div class="content">
<div class="default-header"><h1>Help</h1></div>
<div class="default-content">
<div class="container mat-elevation-z8">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title> Third party components </mat-panel-title>
</mat-expansion-panel-header>
<div [innerHTML]="thirdpartylicenses"></div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</div>

0
src/app/components/help/help.component.scss Normal file
View File

0
src/app/components/help/help.component.spec.ts Normal file
View File

27
src/app/components/help/help.component.ts Normal file
View File

@ -0,0 +1,27 @@
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-help',
templateUrl: './help.component.html',
styleUrls: ['./help.component.scss']
})
export class HelpComponent implements OnInit {
thirdpartylicenses = '';
constructor(
private httpClient: HttpClient
) {}
ngOnInit() {
this.httpClient.get('/3rdpartylicenses.txt', {responseType: 'text'})
.subscribe(data => {
this.thirdpartylicenses = data.replace(new RegExp('\n', 'g'), "<br />")
},
error => {
if (error.status === 404) {
this.thirdpartylicenses = 'File not found';
}
});
}
}

65
src/app/components/project-map/project-map-menu/project-map-menu.component.html Normal file
View File

@ -0,0 +1,65 @@
<button
matTooltip="Add a note"
mat-icon-button
class="menu-button"
[color]="drawTools.isTextChosen ? 'primary' : 'basic'"
(click)="addDrawing('text')">
<mat-icon>create</mat-icon>
</button>
<input
type="file"
accept=".svg, .bmp, .jpeg, .jpg, .gif, .png"
class="non-visible"
#file
(change)="uploadImageFile($event)"/>
<button
matTooltip="Insert a picture"
mat-icon-button
class="menu-button"
(click)="file.click()">
<mat-icon>image</mat-icon>
</button>
<button
matTooltip="Draw a rectangle"
mat-icon-button
class="menu-button"
[color]="drawTools.isRectangleChosen ? 'primary' : 'basic'"
(click)="addDrawing('rectangle')">
<mat-icon>crop_3_2</mat-icon>
</button>
<button
matTooltip="Draw an ellipse"
mat-icon-button
class="menu-button"
[color]="drawTools.isEllipseChosen ? 'primary' : 'basic'"
(click)="addDrawing('ellipse')">
<mat-icon>panorama_fish_eye</mat-icon>
</button>
<button
matTooltip="Draw a line"
mat-icon-button class="menu-button"
(click)="addDrawing('line')">
<svg height="40" width="40">
<line
[ngClass]="{ selected: drawTools.isLineChosen }"
x1="30"
y1="10"
x2="10"
y2="30"
style="stroke:white;stroke-width:2"/>
</svg>
</button>
<button
matTooltip="Lock or unlock all items"
mat-icon-button
class="menu-button"
[color]="isLocked ? 'primary' : 'basic'"
(click)="changeLockValue()">
<mat-icon>lock</mat-icon>
</button>
<app-drawing-added
[server]="server"
[project]="project"
[selectedDrawing]="selectedDrawing"
(drawingSaved)="onDrawingSaved()">
</app-drawing-added>

24
src/app/components/project-map/project-map-menu/project-map-menu.component.scss Normal file
View File

@ -0,0 +1,24 @@
.menu-button {
outline: 0 !important;
transition: 0.5s;
margin-bottom: 16px;
width: 40px;
margin-right: 12px !important;
margin-left: 12px !important;
background: #263238;
padding: 0;
border: none;
background-color: transparent;
}
mat-divider.divider {
height: 40px;
margin-left: 1px;
margin-right: 7px;
width: 10px;
color: gray;
}
.non-visible {
display: none;
}

67
src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts Normal file
View File

@ -0,0 +1,67 @@
import { ProjectMapMenuComponent } from "./project-map-menu.component";
import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { MockedDrawingService } from '../project-map.component.spec';
import { MapSettingService } from '../../../services/mapsettings.service';
import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
import { CommonModule } from '@angular/common';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { DrawingService } from '../../../services/drawing.service';
import { ToolsService } from '../../../services/tools.service';
import { D3MapComponent } from '../../../cartography/components/d3-map/d3-map.component';
import { ANGULAR_MAP_DECLARATIONS } from '../../../cartography/angular-map.imports';
import { NO_ERRORS_SCHEMA } from '@angular/core';
describe('ProjectMapMenuComponent', () => {
let component: ProjectMapMenuComponent;
let fixture: ComponentFixture<ProjectMapMenuComponent>;
let drawingService = new MockedDrawingService();
let mapSettingService = new MapSettingService();
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
providers: [
{ provide: DrawingService, useValue: drawingService },
{ provide: ToolsService },
{ provide: MapSettingService, useValue: mapSettingService }
],
declarations: [ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectMapMenuComponent);
component = fixture.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should reset choice on draw menu after saving drawing', () => {
spyOn(component, 'resetDrawToolChoice');
component.onDrawingSaved();
expect(component.resetDrawToolChoice).toHaveBeenCalled();
});
it('should call map settings service when lock value was changed', () => {
spyOn(mapSettingService, 'changeMapLockValue');
component.changeLockValue();
expect(mapSettingService.changeMapLockValue).toHaveBeenCalled();
});
it('should call map settings service with proper value', () => {
spyOn(mapSettingService, 'changeMapLockValue');
component.changeLockValue();
expect(mapSettingService.changeMapLockValue).toHaveBeenCalledWith(true);
component.changeLockValue();
expect(mapSettingService.changeMapLockValue).toHaveBeenCalledWith(false);
});
});

110
src/app/components/project-map/project-map-menu/project-map-menu.component.ts Normal file
View File

@ -0,0 +1,110 @@
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { Project } from '../../../models/project';
import { Server } from '../../../models/server';
import { ToolsService } from '../../../services/tools.service';
import { MapSettingService } from '../../../services/mapsettings.service';
import { DrawingService } from '../../../services/drawing.service';
@Component({
selector: 'app-project-map-menu',
templateUrl: './project-map-menu.component.html',
styleUrls: ['./project-map-menu.component.scss']
})
export class ProjectMapMenuComponent implements OnInit, OnDestroy {
@Input() project: Project;
@Input() server: Server;
public selectedDrawing: string;
public drawTools = {
isRectangleChosen: false,
isEllipseChosen: false,
isLineChosen: false,
isTextChosen: false
};
public isLocked: boolean = false;
constructor(
private toolsService: ToolsService,
private mapSettingsService: MapSettingService,
private drawingService: DrawingService
) {}
ngOnInit() {}
public addDrawing(selectedObject: string) {
switch (selectedObject) {
case 'rectangle':
this.drawTools.isTextChosen = false;
this.drawTools.isEllipseChosen = false;
this.drawTools.isRectangleChosen = !this.drawTools.isRectangleChosen;
this.drawTools.isLineChosen = false;
break;
case 'ellipse':
this.drawTools.isTextChosen = false;
this.drawTools.isEllipseChosen = !this.drawTools.isEllipseChosen;
this.drawTools.isRectangleChosen = false;
this.drawTools.isLineChosen = false;
break;
case 'line':
this.drawTools.isTextChosen = false;
this.drawTools.isEllipseChosen = false;
this.drawTools.isRectangleChosen = false;
this.drawTools.isLineChosen = !this.drawTools.isLineChosen;
break;
case 'text':
this.drawTools.isTextChosen = !this.drawTools.isTextChosen;
this.drawTools.isEllipseChosen = false;
this.drawTools.isRectangleChosen = false;
this.drawTools.isLineChosen = false;
this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen);
break;
}
this.selectedDrawing = this.selectedDrawing === selectedObject ? '' : selectedObject;
}
public onDrawingSaved() {
this.resetDrawToolChoice();
}
public resetDrawToolChoice() {
this.drawTools.isRectangleChosen = false;
this.drawTools.isEllipseChosen = false;
this.drawTools.isLineChosen = false;
this.drawTools.isTextChosen = false;
this.selectedDrawing = '';
this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen);
}
public changeLockValue() {
this.isLocked = !this.isLocked;
this.mapSettingsService.changeMapLockValue(this.isLocked);
}
public uploadImageFile(event) {
this.readImageFile(event.target);
}
private readImageFile(fileInput) {
let file: File = fileInput.files[0];
let fileReader: FileReader = new FileReader();
let imageToUpload = new Image();
fileReader.onloadend = () => {
let image = fileReader.result;
let svg = this.createSvgFileForImage(image, imageToUpload);
this.drawingService.add(this.server, this.project.project_id, -(imageToUpload.width/2), -(imageToUpload.height/2), svg).subscribe(() => {});
}
imageToUpload.onload = () => { fileReader.readAsDataURL(file) };
imageToUpload.src = window.URL.createObjectURL(file);
}
private createSvgFileForImage(image: string|ArrayBuffer, imageToUpload: HTMLImageElement) {
return `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"${imageToUpload.height}\"
width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" xlink:href=\"${image}\"/>\n</svg>`
}
ngOnDestroy() {}
}

76
src/app/components/project-map/project-map.component.html
View File

@ -87,86 +87,30 @@
</mat-toolbar>
</div>
<div id="show-menu-wrapper" [ngClass]="{ shadowed: !drawTools.visibility }" *ngIf="!readonly">
<div id="show-menu-wrapper" [ngClass]="{ shadowed: !isProjectMapMenuVisible }" *ngIf="!readonly">
<button class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon>keyboard_arrow_right</mat-icon></button>
</div>
<div id="menu-wrapper" [ngClass]="{ extended: drawTools.visibility }">
<div id="menu-wrapper" [ngClass]="{ extended: isProjectMapMenuVisible }">
<app-nodes-menu [server]="server" [project]="project"></app-nodes-menu>
<mat-divider class="divider" [vertical]="true"></mat-divider>
<button
matTooltip="Add a note"
mat-icon-button
class="menu-button"
[color]="drawTools.isTextChosen ? 'primary' : 'basic'"
(click)="addDrawing('text')"
>
<mat-icon>create</mat-icon>
</button>
<input
type="file"
accept=".svg, .bmp, .jpeg, .jpg, .gif, .png"
class="non-visible"
#file
(change)="uploadImageFile($event)"
/>
<button
matTooltip="Insert a picture"
mat-icon-button
class="menu-button"
(click)="file.click()"
>
<mat-icon>image</mat-icon>
</button>
<button
matTooltip="Draw a rectangle"
mat-icon-button
class="menu-button"
[color]="drawTools.isRectangleChosen ? 'primary' : 'basic'"
(click)="addDrawing('rectangle')"
>
<mat-icon>crop_3_2</mat-icon>
</button>
<button
matTooltip="Draw an ellipse"
mat-icon-button
class="menu-button"
[color]="drawTools.isEllipseChosen ? 'primary' : 'basic'"
(click)="addDrawing('ellipse')"
>
<mat-icon>panorama_fish_eye</mat-icon>
</button>
<button matTooltip="Draw a line" mat-icon-button class="menu-button" (click)="addDrawing('line')">
<svg height="40" width="40">
<line
[ngClass]="{ selected: drawTools.isLineChosen }"
x1="30"
y1="10"
x2="10"
y2="30"
style="stroke:white;stroke-width:2"
/>
</svg>
</button>
<app-project-map-menu [server]="server" [project]="project"></app-project-map-menu>
<button class="arrow-button" mat-icon-button (click)="hideMenu()"><mat-icon>keyboard_arrow_left</mat-icon></button>
</div>
<app-context-menu [project]="project" [server]="server"></app-context-menu>
</div>
<div id="zoom-buttons">
<button class="zoom-button" (click)="zoomIn()">+</button>
<button class="zoom-button" (click)="resetZoom()"><mat-icon>adjust</mat-icon></button>
<button class="zoom-button" (click)="zoomOut()">-</button>
</div>
<app-progress></app-progress>
<app-project-map-shortcuts *ngIf="project" [project]="project" [server]="server"> </app-project-map-shortcuts>
<app-project-map-shortcuts *ngIf="project" [project]="project" [server]="server"></app-project-map-shortcuts>
<app-draw-link-tool [links]="links" *ngIf="tools.draw_link"></app-draw-link-tool>
<app-drawing-added
[server]="server"
[project]="project"
[selectedDrawing]="selectedDrawing"
(drawingSaved)="onDrawingSaved()"
>
</app-drawing-added>
<app-drawing-dragged [server]="server"></app-drawing-dragged>
<app-drawing-resized [server]="server"></app-drawing-resized>
<app-interface-label-dragged [server]="server"></app-interface-label-dragged>

40
src/app/components/project-map/project-map.component.scss
View File

@ -80,7 +80,7 @@ g.node:hover {
}
.extended {
width: 640px !important;
width: 720px !important;
height: 100%;
overflow: hidden;
}
@ -93,6 +93,44 @@ mat-divider.divider {
color: gray;
}
#zoom-buttons {
position: fixed;
background: #263238;
bottom: 20px;
right: 20px;
display: grid;
.zoom-button {
outline: none;
height: 40px;
width: 40px;
background: #263238;
border: none;
color: white;
font-size: 1.25rem;
font-weight: bold;
mat-icon {
margin-top: 8px;
}
}
.zoom-button-white {
outline: none;
height: 40px;
width: 40px;
color: #263238;
border: none;
background: white;
font-size: 1.25rem;
font-weight: bold;
mat-icon {
margin-top: 8px;
}
}
}
@-moz-document url-prefix() {
/** fixes gray background of drawing menu on Firefox **/
.mat-drawer-content {

24
src/app/components/project-map/project-map.component.spec.ts
View File

@ -40,12 +40,16 @@ import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProje
import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter';
import { Link } from '../../models/link';
import { Project } from '../../models/project';
import { MovingEventSource } from '../../cartography/events/moving-event-source';
import { CapturingSettings } from '../../models/capturingSettings';
import { LinkWidget } from '../../cartography/widgets/link';
import { MapScaleService } from '../../services/mapScale.service';
import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer';
import { LabelWidget } from '../../cartography/widgets/label';
import { InterfaceLabelWidget } from '../../cartography/widgets/interface-label';
import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter';
import { MapSettingService } from '../../services/mapsettings.service';
import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
export class MockedProgressService {
public activate() {}
@ -222,13 +226,16 @@ describe('ProjectMapComponent', () => {
{ provide: ToolsService },
{ provide: SelectionManager },
{ provide: SelectionTool },
{ provide: MovingEventSource },
{
provide: RecentlyOpenedProjectService,
useClass: RecentlyOpenedProjectService
},
{ provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
{ provide: MapScaleService },
{ provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer}
],
declarations: [ProjectMapComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
declarations: [ProjectMapComponent, ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
}));
@ -236,6 +243,9 @@ describe('ProjectMapComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(ProjectMapComponent);
component = fixture.componentInstance;
component.projectMapMenuComponent = {
resetDrawToolChoice(){}
} as ProjectMapMenuComponent;
});
afterEach(() => {
@ -251,18 +261,10 @@ describe('ProjectMapComponent', () => {
document.getElementsByClassName = jasmine.createSpy('HTML element').and.callFake(() => {
return [dummyElement];
});
spyOn(component, 'resetDrawToolChoice');
spyOn(component.projectMapMenuComponent, 'resetDrawToolChoice').and.returnValue();
component.hideMenu();
expect(component.resetDrawToolChoice).toHaveBeenCalled();
});
it('should reset choice on draw menu after saving drawing', () => {
spyOn(component, 'resetDrawToolChoice');
component.onDrawingSaved();
expect(component.resetDrawToolChoice).toHaveBeenCalled();
expect(component.projectMapMenuComponent.resetDrawToolChoice).toHaveBeenCalled();
});
});

97
src/app/components/project-map/project-map.component.ts
View File

@ -42,11 +42,14 @@ import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-l
import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service';
import { MapLink } from '../../cartography/models/map/map-link';
import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter';
import { MovingEventSource } from '../../cartography/events/moving-event-source';
import { LinkWidget } from '../../cartography/widgets/link';
import { MapScaleService } from '../../services/mapScale.service';
import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer';
import { InterfaceLabelWidget } from '../../cartography/widgets/interface-label';
import { LabelWidget } from '../../cartography/widgets/label';
import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter';
import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
@Component({
@ -62,8 +65,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
public symbols: Symbol[] = [];
public project: Project;
public server: Server;
public selectedDrawing: string;
private ws: Subject<any>;
public isProjectMapMenuVisible: boolean = false;
tools = {
selection: true,
@ -73,19 +76,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
};
protected settings: Settings;
protected drawTools = {
isRectangleChosen: false,
isEllipseChosen: false,
isLineChosen: false,
isTextChosen: false,
visibility: false
};
private inReadOnlyMode = false;
@ViewChild(ContextMenuComponent) contextMenu: ContextMenuComponent;
@ViewChild(D3MapComponent) mapChild: D3MapComponent;
@ViewChild(ProjectMapMenuComponent) projectMapMenuComponent: ProjectMapMenuComponent;
private subscriptions: Subscription[] = [];
@ -116,6 +111,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
private selectionManager: SelectionManager,
private selectionTool: SelectionTool,
private recentlyOpenedProjectService: RecentlyOpenedProjectService,
private movingEventSource: MovingEventSource,
private mapScaleService: MapScaleService,
private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer
) {}
@ -190,6 +187,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.mapChangeDetectorRef.detectChanges();
})
);
this.addKeyboardListeners();
}
addKeyboardListeners() {
Mousetrap.bind('ctrl++', (event: Event) => {
event.preventDefault();
});
Mousetrap.bind('ctrl+-', (event: Event) => {
event.preventDefault();
});;
}
onProjectLoad(project: Project) {
@ -308,7 +317,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}
public onDrawingSaved() {
this.resetDrawToolChoice();
this.projectMapMenuComponent.resetDrawToolChoice();
}
public set readonly(value) {
@ -328,7 +337,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
public toggleMovingMode() {
this.tools.moving = !this.tools.moving;
this.toolsService.movingToolActivation(this.tools.moving);
this.movingEventSource.movingModeState.emit(this.tools.moving);
if (!this.readonly) {
this.tools.selection = !this.tools.moving;
this.toolsService.selectionToolActivation(this.tools.selection);
@ -344,56 +354,31 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.project.show_interface_labels = enabled;
}
public addDrawing(selectedObject: string) {
switch (selectedObject) {
case 'rectangle':
this.drawTools.isTextChosen = false;
this.drawTools.isEllipseChosen = false;
this.drawTools.isRectangleChosen = !this.drawTools.isRectangleChosen;
this.drawTools.isLineChosen = false;
break;
case 'ellipse':
this.drawTools.isTextChosen = false;
this.drawTools.isEllipseChosen = !this.drawTools.isEllipseChosen;
this.drawTools.isRectangleChosen = false;
this.drawTools.isLineChosen = false;
break;
case 'line':
this.drawTools.isTextChosen = false;
this.drawTools.isEllipseChosen = false;
this.drawTools.isRectangleChosen = false;
this.drawTools.isLineChosen = !this.drawTools.isLineChosen;
break;
case 'text':
this.drawTools.isTextChosen = !this.drawTools.isTextChosen;
this.drawTools.isEllipseChosen = false;
this.drawTools.isRectangleChosen = false;
this.drawTools.isLineChosen = false;
this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen);
break;
}
this.selectedDrawing = this.selectedDrawing === selectedObject ? '' : selectedObject;
}
public resetDrawToolChoice() {
this.drawTools.isRectangleChosen = false;
this.drawTools.isEllipseChosen = false;
this.drawTools.isLineChosen = false;
this.drawTools.isTextChosen = false;
this.selectedDrawing = '';
this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen);
}
public hideMenu() {
this.resetDrawToolChoice();
this.drawTools.visibility = false;
this.projectMapMenuComponent.resetDrawToolChoice()
this.isProjectMapMenuVisible = false;
}
public showMenu() {
this.drawTools.visibility = true;
this.isProjectMapMenuVisible = true;
}
zoomIn() {
this.mapScaleService.setScale(this.mapScaleService.getScale() + 0.1);
}
zoomOut() {
let currentScale = this.mapScaleService.getScale();
if ((currentScale - 0.1) > 0) {
this.mapScaleService.setScale(currentScale - 0.1);
}
}
resetZoom() {
this.mapScaleService.resetToDefault();
}
public uploadImageFile(event) {
this.readImageFile(event.target);
}

7
src/app/components/servers/servers.component.html
View File

@ -13,8 +13,9 @@
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let row">
<a [routerLink]="['/server', row.id, 'projects']" class="table-link">{{ row.name }}</a></mat-cell
>
<a *ngIf="getServerStatus(row) === 'running' || row.location === 'remote'" [routerLink]="['/server', row.id, 'projects']" class="table-link">{{ row.name }}</a>
<span *ngIf="getServerStatus(row) != 'running' && row.location !== 'remote'">{{ row.name }}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="location">
@ -42,6 +43,8 @@
<button mat-icon-button (click)="stopServer(row)" *ngIf="row.location === 'local' && getServerStatus(row) === 'running'">
<mat-icon aria-label="Stop server">stop</mat-icon>
</button>
<mat-spinner [diameter]="24" *ngIf="row.location === 'local' && getServerStatus(row) === 'starting'"></mat-spinner>
<button mat-icon-button (click)="deleteServer(row)">
<mat-icon aria-label="Remove server">delete</mat-icon>

3
src/app/components/servers/servers.component.ts
View File

@ -49,6 +49,9 @@ export class ServersComponent implements OnInit, OnDestroy {
if(!server) {
return;
}
if(serverStatus.status === 'starting') {
server.status = 'starting';
}
if(serverStatus.status === 'stopped') {
server.status = 'stopped';
}

6
src/app/layouts/default-layout/default-layout.component.html
View File

@ -21,9 +21,12 @@
<mat-icon>cloud_download</mat-icon>
<span>Installed software</span>
</button>
<button mat-menu-item routerLink="/help">
<mat-icon>help</mat-icon>
<span>Help</span>
</button>
</mat-menu>
</mat-toolbar>
</header>
@ -34,4 +37,3 @@
<footer class="footer mat-app-background">
GNS3 Web UI &copy; 2019 - v{{ uiVersion }}
</footer>

20
src/app/services/link.service.spec.ts
View File

@ -52,7 +52,7 @@ describe('LinkService', () => {
targetPort.port_number = 3;
targetPort.adapter_number = 4;
service.createLink(server, sourceNode, sourcePort, targetNode, targetPort).subscribe();
service.createLink(server, sourceNode, sourcePort, targetNode, targetPort, 0, 0, 10, 10).subscribe();
const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/projects/myproject/links');
expect(req.request.method).toEqual('POST');
@ -61,12 +61,26 @@ describe('LinkService', () => {
{
node_id: 'sourceid',
port_number: 1,
adapter_number: 2
adapter_number: 2,
label: {
rotation: 0,
style: "font-size: 10; font-style: Verdana",
text: sourcePort.short_name,
x: 0,
y: 0
}
},
{
node_id: 'targetid',
port_number: 3,
adapter_number: 4
adapter_number: 4,
label: {
rotation: 0,
style: "font-size: 10; font-style: Verdana",
text: sourcePort.short_name,
x: 10,
y: 10
}
}
]
});

21
src/app/services/link.service.ts
View File

@ -14,18 +14,33 @@ import { CapturingSettings } from '../models/capturingSettings';
export class LinkService {
constructor(private httpServer: HttpServer) {}
createLink(server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port) {
createLink(server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port,
xLabelSourceNode: number, yLabelSourceNode: number, xLabelTargetNode: number, yLabelTargetNode: number) {
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
adapter_number: source_port.adapter_number,
label: {
rotation: 0,
style: "font-size: 10; font-style: Verdana",
text: source_port.short_name,
x: xLabelSourceNode,
y: yLabelSourceNode
}
},
{
node_id: target_node.node_id,
port_number: target_port.port_number,
adapter_number: target_port.adapter_number
adapter_number: target_port.adapter_number,
label: {
rotation: 0,
style: "font-size: 10; font-style: Verdana",
text: target_port.short_name,
x: xLabelTargetNode,
y: yLabelTargetNode
}
}
]
});

30
src/app/services/mapScale.service.ts Normal file
View File

@ -0,0 +1,30 @@
import { Injectable, EventEmitter } from '@angular/core';
import { Context } from '../cartography/models/context';
@Injectable()
export class MapScaleService {
public currentScale: number;
public scaleChangeEmitter = new EventEmitter();
constructor(
private context: Context
) {
this.currentScale = 1;
}
getScale() {
return this.currentScale;
}
setScale(newScale: number) {
this.currentScale = newScale;
this.context.transformation.k = this.currentScale;
this.scaleChangeEmitter.emit(this.currentScale);
}
resetToDefault() {
this.currentScale = 1;
this.context.transformation.k = this.currentScale;
this.scaleChangeEmitter.emit(this.currentScale);
}
}

13
src/app/services/mapsettings.service.ts Normal file
View File

@ -0,0 +1,13 @@
import { Injectable } from "@angular/core";
import { Subject } from 'rxjs';
@Injectable()
export class MapSettingService {
public isMapLocked = new Subject<boolean>();
constructor() {}
changeMapLockValue(value: boolean) {
this.isMapLocked.next(value);
}
}

8
src/app/services/server-management.service.ts
View File

@ -5,7 +5,7 @@ import { Subject } from 'rxjs';
export interface ServerStateEvent {
serverName: string;
status: "started" | "errored" | "stopped" | "stderr";
status: "starting" | "started" | "errored" | "stopped" | "stderr";
message: string;
}
@ -29,6 +29,12 @@ export class ServerManagementService implements OnDestroy {
}
async start(server: Server) {
var startingEvent : ServerStateEvent = {
serverName: server.name,
status: "starting",
message: ''
};
this.serverStatusChanged.next(startingEvent);
return await this.electronService.remote.require('./local-server.js').startLocalServer(server);
}