ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-01-19 11:16:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Menu extended

Browse Source
This commit is contained in:
PiotrP 2018-11-22 05:42:46 -08:00
parent 974759fc61
commit 36ea584d62
7 changed files with 223 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/app/cartography/components/map/map.component.ts
View File

@ -53,7 +53,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
constructor(
private graphDataManager: GraphDataManager,
private context: Context,
public context: Context,
private mapChangeDetectorRef: MapChangeDetectorRef,
private canvasSizeDetector: CanvasSizeDetector,
private mapListeners: MapListeners,
@ -89,7 +89,8 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
@Input('draw-link-tool') drawLinkTool: boolean;
@Input('is-rectangle-chosen') isRectangleChosen: boolean;
//@Input('drawing-selected') selectedDrawing: string;
public drawingSelected = "";
@Input('readonly') set readonly(value) {
this.nodesWidget.draggingEnabled = !value;
@ -104,14 +105,14 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
(changes['nodes'] && !changes['nodes'].isFirstChange()) ||
(changes['links'] && !changes['links'].isFirstChange()) ||
(changes['symbols'] && !changes['symbols'].isFirstChange() ||
(changes['isRectangleChosen'] && !changes['isRectangleChosen'].isFirstChange()))
(changes['drawing-selected'] && !changes['drawing-selected'].isFirstChange()))
) {
if (this.svg.empty && !this.svg.empty()) {
if (changes['symbols']) {
this.onSymbolsChange(changes['symbols']);
}
if (changes['isRectangleChosen']){
this.onDrawingRectangleActive();
if (changes['drawing-selected']){
this.onDrawingSelected();
}
this.changeLayout();
}
@ -159,7 +160,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
this.redraw();
}
private onSymbolsChange(change: SimpleChange) {
this.graphDataManager.setSymbols(this.symbols);
}
@ -171,41 +171,8 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
this.graphLayout.draw(this.svg, this.context);
}
private onDrawingRectangleActive(){
var map = document.getElementsByClassName('map')[0];
console.log(this.drawings);
map.addEventListener('click', (event: MouseEvent) => {
console.log(event);
this.svg.select('g.drawings')
.append<SVGElement>('g')
.attr("class", 'drawing')
.append<SVGGElement>('g')
.attr("class", 'drawing_body')
.attr('transform', `translate(${event.clientX-1000},${event.clientY-500}) rotate(0)`)
.append<SVGRectElement>('rect')
.attr('class', 'rect_element noselect')
.attr('fill', '#ffffff')
.attr('fill-opacity', '1')
.attr('stroke', '#000000')
.attr('stroke-width', 2)
.attr('width', 200)
.attr('height', 100);
let newRectangle = new Drawing;
/*drawing_id: string;
project_id: string;
rotation: number;
svg: string;
x: number;
y: number;
z: number;
is_selected = false;
element: DrawingElement;*/
//this.onRectangleCreated.emit(null);
}, {once : true});
private onDrawingSelected(){
this.context.getZeroZeroTransformationPoint().y;
}
@HostListener('window:resize', ['$event'])

11
src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
View File

@ -3,6 +3,8 @@ import { Injectable } from '@angular/core';
import { Converter } from '../converter';
import { MapDrawing } from '../../models/map/map-drawing';
import { RectElement } from '../../models/drawings/rect-element';
import { EllipseElement } from '../../models/drawings/ellipse-element';
import { LineElement } from '../../models/drawings/line-element';
@Injectable()
@ -11,13 +13,16 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
) {}
convert(mapDrawing: MapDrawing) {
let str = `<svg height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\">`;
let elem = ``;
if (mapDrawing.element instanceof RectElement) {
elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
}
} else if (mapDrawing.element instanceof EllipseElement) {
elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
} else if (mapDrawing.element instanceof LineElement) {
elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" />`
} else return "";
return str + elem + `</svg>`;
return `<svg height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\">${elem}</svg>`;
}
}

108
src/app/cartography/widgets/drawings.ts
View File

@ -70,19 +70,50 @@ export class DrawingsWidget implements Widget {
this.draggable.call(merge);
}
let y: number;
let dy: number;
let topEdge: number;
let isReflected: boolean = false;
let bottom = drag()
.on('start', (datum: MapDrawing) => {
document.body.style.cursor = "ns-resize";
document.body.style.cursor = "ns-resize";
topEdge = datum.y;
})
.on('drag', (datum: MapDrawing) => {
const evt = event;
console.log("bottom drag event ", evt);
if (datum.element instanceof EllipseElement){
(datum.element as EllipseElement).cy = (datum.element as EllipseElement).cy + evt.dy/2 < 0 ? 1 : (datum.element as EllipseElement).cy += evt.dy/2;
(datum.element as EllipseElement).ry = (datum.element as EllipseElement).ry + evt.dy/2 < 0 ? 1 : (datum.element as EllipseElement).ry += evt.dy/2;
if (!isReflected) {
if ((datum.element.height + evt.dy) < 0) {
isReflected = true;
y = topEdge;
datum.element.height = Math.abs(datum.element.height + evt.dy);
} else {
datum.element.height += evt.dy;
if (datum.element instanceof EllipseElement){
(datum.element as EllipseElement).cy = (datum.element as EllipseElement).cy + evt.dy/2 < 0 ? 1 : (datum.element as EllipseElement).cy += evt.dy/2;
(datum.element as EllipseElement).ry = (datum.element as EllipseElement).ry + evt.dy/2 < 0 ? 1 : (datum.element as EllipseElement).ry += evt.dy/2;
}
}
} else {
dy = y - (evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y);
y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
if ((datum.element.height + dy) < 0){
y = topEdge;
isReflected = false;
datum.element.height = Math.abs(datum.element.height + evt.dy);
} else {
datum.y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
datum.element.height += dy;
if (datum.element instanceof EllipseElement) {
(datum.element as EllipseElement).cy = (datum.element as EllipseElement).cy + dy/2 < 0 ? 1 : (datum.element as EllipseElement).cy += dy/2;
(datum.element as EllipseElement).ry = (datum.element as EllipseElement).ry + dy/2 < 0 ? 1 : (datum.element as EllipseElement).ry += dy/2;
}
}
}
datum.element.height = (datum.element.height + evt.dy) < 0 ? 1: datum.element.height += evt.dy;
this.redrawDrawing(view, datum);
})
.on('end', (datum: MapDrawing) => {
@ -98,30 +129,53 @@ export class DrawingsWidget implements Widget {
this.resizingFinished.emit(evt);
});
let y: number;
let dy: number;
//let y: number;
//let dy: number;
let bottomEdge: number;
//let isReflected: boolean = false;
let top = drag()
.on('start', () => {
.on('start', (datum: MapDrawing) => {
y = event.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
bottomEdge = y + datum.element.height;
document.body.style.cursor = "ns-resize";
})
.on('drag', (datum: MapDrawing) => {
const evt = event;
dy = y - (evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y);
y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
if ((datum.element.height + dy) < 0){
datum.element.height = 1;
} else {
datum.y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
datum.element.height += dy;
if (datum.element instanceof EllipseElement) {
(datum.element as EllipseElement).cy = (datum.element as EllipseElement).cy + dy/2 < 0 ? 1 : (datum.element as EllipseElement).cy += dy/2;
(datum.element as EllipseElement).ry = (datum.element as EllipseElement).ry + dy/2 < 0 ? 1 : (datum.element as EllipseElement).ry += dy/2;
}
}
this.redrawDrawing(view, datum);
})
// .on('drag', (datum: MapDrawing) => {
// const evt = event;
// if (!isReflected) {
// dy = y - (evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y);
// y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
// console.log(y);
// if ((datum.element.height + dy) < 0){
// y = bottomEdge;
// isReflected = true;
// datum.element.height = Math.abs(datum.element.height + evt.dy);
// } else {
// datum.y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
// datum.element.height += dy;
// if (datum.element instanceof EllipseElement) {
// (datum.element as EllipseElement).cy = (datum.element as EllipseElement).cy + dy/2 < 0 ? 1 : (datum.element as EllipseElement).cy += dy/2;
// (datum.element as EllipseElement).ry = (datum.element as EllipseElement).ry + dy/2 < 0 ? 1 : (datum.element as EllipseElement).ry += dy/2;
// }
// }
// } else {
// if ((datum.element.height + evt.dy) < 0) {
// isReflected = false;
// y = bottomEdge;
// datum.element.height = Math.abs(datum.element.height + evt.dy);
// } else {
// datum.element.height += evt.dy;
// if (datum.element instanceof EllipseElement){
// (datum.element as EllipseElement).cy = (datum.element as EllipseElement).cy + evt.dy/2 < 0 ? 1 : (datum.element as EllipseElement).cy += evt.dy/2;
// (datum.element as EllipseElement).ry = (datum.element as EllipseElement).ry + evt.dy/2 < 0 ? 1 : (datum.element as EllipseElement).ry += evt.dy/2;
// }
// }
// }
// this.redrawDrawing(view, datum);
//})
.on('end', (datum: MapDrawing) => {
document.body.style.cursor = "initial";
@ -132,7 +186,7 @@ export class DrawingsWidget implements Widget {
evt.height = datum.element.height;
evt.datum = datum;
this.resizingFinished.emit(evt);
//this.resizingFinished.emit(evt);
});
let x: number;

4
src/app/components/project-map/project-map.component.css
View File

@ -81,6 +81,10 @@ g.node:hover {
height: 72px;
}
.selected{
stroke: #263238;
}
.project-toolbar .mat-toolbar-multiple-rows {
width: auto !important;
}

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

@ -11,7 +11,6 @@
[moving-tool]="tools.moving"
[draw-link-tool]="tools.draw_link"
[readonly]="inReadOnlyMode"
[is-rectangle-chosen]="drawTools.isRectangleChosen"
(nodeDragged)="onNodeDragged($event)"
(drawingDragged)="onDrawingDragged($event)"
(onLinkCreated)="onLinkCreated($event)"
@ -89,18 +88,15 @@
<button mat-icon-button class="drawer-button">
<mat-icon>picture_in_picture</mat-icon>
</button>
<button mat-icon-button class="drawer-button" (click)="drawRectangle()">
<button mat-icon-button class="drawer-button" [color]="drawTools.isRectangleChosen ? 'primary': 'basic'" (click)="addDrawing('rectangle')">
<mat-icon>crop_3_2</mat-icon>
</button>
<button mat-icon-button class="drawer-button">
<button mat-icon-button class="drawer-button" [color]="drawTools.isEllipseChosen ? 'primary': 'basic'" (click)="addDrawing('ellipse')">
<mat-icon>panorama_fish_eye</mat-icon>
<!-- <svg height="72" width="64">
<circle cx="32" cy="36" r="20" stroke="white" stroke-width="2" fill="transparent"/>
</svg> -->
</button>
<button mat-icon-button class="drawer-button">
<button mat-icon-button class="drawer-button" (click)="addDrawing('line')">
<svg height="40" width="40">
<line x1="30" y1="10" x2="10" y2="30" style="stroke:white;stroke-width:2" />
<line [ngClass]="{active: drawTools.isLineChosen}" x1="30" y1="10" x2="10" y2="30" style="stroke:white;stroke-width:2" />
</svg>
</button>
<button mat-icon-button class="drawer-arrow-button" (click)="drawer.toggle()">

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

@ -38,6 +38,11 @@ import { LinksEventSource } from '../../cartography/events/links-event-source';
import { MapDrawing } from '../../cartography/models/map/map-drawing';
import { MapPortToPortConverter } from '../../cartography/converters/map/map-port-to-port-converter';
import { MapDrawingToSvgConverter } from '../../cartography/converters/map/map-drawing-to-svg-converter';
import { DrawingElement } from '../../cartography/models/drawings/drawing-element';
import { RectElement } from '../../cartography/models/drawings/rect-element';
import { EllipseElement } from '../../cartography/models/drawings/ellipse-element';
import { LineElement } from '../../cartography/models/drawings/line-element';
import { EventListener } from '@angular/core/src/debug/debug_node';
@Component({
@ -64,9 +69,13 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
};
protected drawTools = {
'isRectangleChosen': false
'isRectangleChosen': false,
'isEllipseChosen': false,
'isLineChosen': false
};
protected selectedDrawing: string;
private inReadOnlyMode = false;
@ViewChild(MapComponent) mapChild: MapComponent;
@ -285,6 +294,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
private onDrawingResized(resizedEvent: ResizedDataEvent<MapDrawing>) {
const drawing = this.drawingsDataSource.get(resizedEvent.datum.id);
let svgString = this.mapDrawingToSvgConverter.convert(resizedEvent.datum);
console.log(svgString);
this.drawingService
.updateSizeAndPosition(this.server, drawing, resizedEvent.x, resizedEvent.y, svgString)
@ -318,15 +328,110 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}
public onRectangleCreated(rectangleCreated: any) {
this.drawTools.isRectangleChosen = false;
//this.drawTools.isRectangleChosen = false;
}
public toggleShowInterfaceLabels(enabled: boolean) {
this.project.show_interface_labels = enabled;
}
public drawRectangle() {
this.drawTools.isRectangleChosen = !this.drawTools.isRectangleChosen;
public addDrawing(selectedObject: string) {
switch (selectedObject) {
case "rectangle":
this.drawTools.isEllipseChosen = false;
this.drawTools.isRectangleChosen = !this.drawTools.isRectangleChosen;
this.drawTools.isLineChosen = false;
break;
case "ellipse":
this.drawTools.isEllipseChosen = !this.drawTools.isEllipseChosen;
this.drawTools.isRectangleChosen = false;
this.drawTools.isLineChosen = false;
break;
case "line":
this.drawTools.isEllipseChosen = false;
this.drawTools.isRectangleChosen = false;
this.drawTools.isLineChosen = !this.drawTools.isLineChosen;
break;
}
console.log(this.drawTools);
this.selectedDrawing = selectedObject;
var map = document.getElementsByClassName('map')[0];
let mapDrawing: MapDrawing = this.getDrawingMock(selectedObject);
let context = this.mapChild.context;
let converter = this.mapDrawingToSvgConverter;
console.log(mapDrawing);
function listener(event: MouseEvent) {
let x = event.clientX - context.getZeroZeroTransformationPoint().x;
let y = event.clientY - context.getZeroZeroTransformationPoint().y;
let svg = converter.convert(mapDrawing);
console.log(svg);
// this.drawingService
// .add(this.server, this.project.project_id, x, y, svg)
// .subscribe((serverDrawing: Drawing) => {
// this.drawingsDataSource.add(serverDrawing);
// });
// this.resetDrawToolChoice();
}
map.removeEventListener('click', listener, true);
//let ev = new EventListener('click', listener);
map.addEventListener('click', listener, {once : true});
}
public resetDrawToolChoice(){
this.drawTools.isRectangleChosen = false;
this.drawTools.isEllipseChosen = false;
this.drawTools.isLineChosen = false;
}
public getDrawingMock(objectType: string): MapDrawing {
let drawingElement: DrawingElement;
switch (objectType) {
case "rectangle":
let rect = new RectElement();
rect.fill = "#ffffff";
rect.fill_opacity = 1.0;
rect.stroke = "#000000";
rect.stroke_width = 2;
rect.width = 200;
rect.height = 100;
drawingElement = rect;
break;
case "ellipse":
let ellipse = new EllipseElement();
ellipse.fill = "#ffffff";
ellipse.fill_opacity = 1.0;
ellipse.stroke = "#000000";
ellipse.stroke_width = 2;
ellipse.cx = 100;
ellipse.cy = 100;
ellipse.rx = 100;
ellipse.ry = 100;
ellipse.width = 200;
ellipse.height = 200;
drawingElement = ellipse;
break;
case "line":
let line = new LineElement();
line.stroke = "#000000";
line.stroke_width = 2;
line.x1 = 0;
line.x2 = 200;
line.y1 = 0;
line.y2 = 0;
line.width = 100;
line.height = 0;
drawingElement = line;
}
let mapDrawing = new MapDrawing();
mapDrawing.element = drawingElement;
return mapDrawing;
}
public ngOnDestroy() {

9
src/app/services/drawing.service.ts
View File

@ -12,6 +12,15 @@ export class DrawingService {
constructor(private httpServer: HttpServer) { }
add(server: Server, project_id:string, x: number, y:number, svg: string) {
return this.httpServer
.post<Drawing>(server, `/projects/${project_id}/drawings`, {
'svg': svg,
'x': x,
'y': y
});
}
updatePosition(server: Server, drawing: Drawing, x: number, y: number): Observable<Drawing> {
return this.httpServer
.put<Drawing>(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, {