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

Adding drawings finished

Browse Source
This commit is contained in:
PiotrP 2018-11-23 01:46:53 -08:00
parent 36ea584d62
commit 683a7bab1c
4 changed files with 51 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -104,16 +104,12 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
(changes['drawings'] && !changes['drawings'].isFirstChange()) ||
(changes['nodes'] && !changes['nodes'].isFirstChange()) ||
(changes['links'] && !changes['links'].isFirstChange()) ||
(changes['symbols'] && !changes['symbols'].isFirstChange() ||
(changes['drawing-selected'] && !changes['drawing-selected'].isFirstChange()))
(changes['symbols'] && !changes['symbols'].isFirstChange())
) {
if (this.svg.empty && !this.svg.empty()) {
if (changes['symbols']) {
this.onSymbolsChange(changes['symbols']);
}
if (changes['drawing-selected']){
this.onDrawingSelected();
}
this.changeLayout();
}
}
@ -171,10 +167,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
this.graphLayout.draw(this.svg, this.context);
}
private onDrawingSelected(){
this.context.getZeroZeroTransformationPoint().y;
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.changeLayout();

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

@ -23,20 +23,10 @@ g.node:hover {
background: transparent;
top: 20px;
left: 92px;
width: 320px !important;
width: 232px !important;
height: 72px !important;
}
.draw-menu2{
position: fixed;
background: transparent;
top: 20px;
left: 92px;
width: 320px !important;
height: 72px !important;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.draw-menu button{
outline: none;
}
@ -47,7 +37,7 @@ g.node:hover {
}
.drawer{
width: 320px !important;
width: 232px !important;
height: 72px !important;
background:#263238;
}
@ -66,23 +56,32 @@ g.node:hover {
background-color: transparent;
}
.drawer-arrow-button{
.drawer-arrow-button-right{
width: 40px;
height: 72px;
padding-top: 16px;
background:#263238;
position: fixed;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.drawer-arrow-button-left{
width: 40px;
height: 72px;
margin-left: 192px;
background:#263238;
position: fixed;
}
.drawer-buttons{
background:#263238;
padding-top: 16px;
height: 72px;
display: flex;
flex-direction: row;
}
.selected {
stroke: #263238;
stroke: #0097a7!important;
}
.project-toolbar .mat-toolbar-multiple-rows {

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

@ -85,9 +85,6 @@
<mat-drawer-container class="drawer-container">
<mat-drawer #drawer class="drawer">
<div class="drawer-buttons">
<button mat-icon-button class="drawer-button">
<mat-icon>picture_in_picture</mat-icon>
</button>
<button mat-icon-button class="drawer-button" [color]="drawTools.isRectangleChosen ? 'primary': 'basic'" (click)="addDrawing('rectangle')">
<mat-icon>crop_3_2</mat-icon>
</button>
@ -96,16 +93,18 @@
</button>
<button mat-icon-button class="drawer-button" (click)="addDrawing('line')">
<svg height="40" width="40">
<line [ngClass]="{active: drawTools.isLineChosen}" x1="30" y1="10" x2="10" y2="30" style="stroke:white;stroke-width:2" />
<line [ngClass]="{selected: 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()">
<div class="drawer-arrow-button-left">
<button mat-icon-button (click)="drawer.toggle(); hideMenu()">
<mat-icon>keyboard_arrow_left</mat-icon>
</button>
</div>
</div>
</mat-drawer>
<mat-drawer-content class="drawer-content">
<div class="drawer-arrow-button">
<div class="drawer-arrow-button-right">
<button mat-icon-button (click)="drawer.toggle()">
<mat-icon>keyboard_arrow_right</mat-icon>
</button>

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

@ -42,7 +42,6 @@ import { DrawingElement } from '../../cartography/models/drawings/drawing-elemen
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({
@ -59,7 +58,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
project: Project;
public server: Server;
private drawListener: Function;
private ws: Subject<any>;
protected tools = {
@ -327,15 +326,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.tools.draw_link = !this.tools.draw_link;
}
public onRectangleCreated(rectangleCreated: any) {
//this.drawTools.isRectangleChosen = false;
}
public toggleShowInterfaceLabels(enabled: boolean) {
this.project.show_interface_labels = enabled;
}
public addDrawing(selectedObject: string) {
if (selectedObject === this.selectedDrawing){
var map = document.getElementsByClassName('map')[0];
map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
this.resetDrawToolChoice();
return;
}
switch (selectedObject) {
case "rectangle":
this.drawTools.isEllipseChosen = false;
@ -353,39 +355,40 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
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);
let listener = (event: MouseEvent) => {
let x = event.clientX - this.mapChild.context.getZeroZeroTransformationPoint().x;
let y = event.clientY - this.mapChild.context.getZeroZeroTransformationPoint().y;
let svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
// this.drawingService
// .add(this.server, this.project.project_id, x, y, svg)
// .subscribe((serverDrawing: Drawing) => {
// this.drawingsDataSource.add(serverDrawing);
// });
// this.resetDrawToolChoice();
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});
map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
this.drawListener = listener;
map.addEventListener('click', this.drawListener as EventListenerOrEventListenerObject, {once : true});
}
public resetDrawToolChoice(){
this.drawTools.isRectangleChosen = false;
this.drawTools.isEllipseChosen = false;
this.drawTools.isLineChosen = false;
this.selectedDrawing = "";
}
public hideMenu(){
var map = document.getElementsByClassName('map')[0];
map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
this.resetDrawToolChoice();
}
public getDrawingMock(objectType: string): MapDrawing {