ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-20 17:52:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Code cleaned-up

Browse Source
This commit is contained in:
PiotrP 2018-11-23 05:34:59 -08:00
parent 317f537de3
commit f48a029315
5 changed files with 105 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
import { MatMenuModule, MatIconModule } from '@angular/material';
import { DrawLinkToolComponent } from './components/draw-link-tool/draw-link-tool.component';
import { NodeSelectInterfaceComponent } from './components/node-select-interface/node-select-interface.component';
import { DrawingResizingComponent } from './components/drawing-resizing/drawing-resizing.components';
import { CssFixer } from './helpers/css-fixer';

10
src/app/cartography/widgets/drawing.ts
View File

@ -9,8 +9,6 @@ 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";
import { drag } from "d3-drag";
import { event } from "d3-selection";
import { SelectionManager } from "../managers/selection-manager";
@Injectable()
@ -67,8 +65,6 @@ export class DrawingWidget implements Widget {
.select<SVGAElement>('line.top')
.attr('stroke', 'transparent')
.attr('stroke-width', '8px')
// .attr('stroke-dashoffset', '0')
// .attr('stroke-dasharray', '3')
.attr('x1', '0')
.attr('x2', (drawing) => drawing.element.width)
.attr('y1', '0')
@ -80,8 +76,6 @@ export class DrawingWidget implements Widget {
.select<SVGAElement>('line.bottom')
.attr('stroke', 'transparent')
.attr('stroke-width', '8px')
// .attr('stroke-dashoffset', '0')
// .attr('stroke-dasharray', '3')
.attr('x1', '0')
.attr('x2', (drawing) => drawing.element.width)
.attr('y1', (drawing) => drawing.element.height)
@ -93,8 +87,6 @@ export class DrawingWidget implements Widget {
.select<SVGAElement>('line.right')
.attr('stroke', 'transparent')
.attr('stroke-width', '8px')
// .attr('stroke-dashoffset', '0')
// .attr('stroke-dasharray', '3')
.attr('x1', '0')
.attr('x2', '0')
.attr('y1', '0')
@ -106,8 +98,6 @@ export class DrawingWidget implements Widget {
.select<SVGAElement>('line.left')
.attr('stroke', 'transparent')
.attr('stroke-width', '8px')
// .attr('stroke-dashoffset', '0')
// .attr('stroke-dasharray', '3')
.attr('x1', (drawing) => drawing.element.width)
.attr('x2', (drawing) => drawing.element.width)
.attr('y1', '0')

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

@ -73,7 +73,8 @@ export class DrawingsWidget implements Widget {
let y: number;
let dy: number;
let topEdge: number;
let isReflected: boolean = false;
let bottomEdge: number;
let isReflectedVertical: boolean = false;
let bottom = drag()
.on('start', (datum: MapDrawing) => {
document.body.style.cursor = "ns-resize";
@ -81,16 +82,15 @@ export class DrawingsWidget implements Widget {
})
.on('drag', (datum: MapDrawing) => {
const evt = event;
console.log("bottom drag event ", evt);
if (!isReflected) {
if (!isReflectedVertical) {
if ((datum.element.height + evt.dy) < 0) {
isReflected = true;
isReflectedVertical = 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;
@ -102,7 +102,7 @@ export class DrawingsWidget implements Widget {
if ((datum.element.height + dy) < 0){
y = topEdge;
isReflected = false;
isReflectedVertical = false;
datum.element.height = Math.abs(datum.element.height + evt.dy);
} else {
datum.y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
@ -129,53 +129,48 @@ export class DrawingsWidget implements Widget {
this.resizingFinished.emit(evt);
});
//let y: number;
//let dy: number;
let bottomEdge: number;
//let isReflected: boolean = false;
let top = drag()
.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;
.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 (!isReflectedVertical) {
dy = y - (evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y);
y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().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.height + dy) < 0){
y = bottomEdge;
isReflectedVertical = 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) {
isReflectedVertical = 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;
// }
// }
// }
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);
//})
this.redrawDrawing(view, datum);
})
.on('end', (datum: MapDrawing) => {
document.body.style.cursor = "initial";
@ -186,31 +181,53 @@ export class DrawingsWidget implements Widget {
evt.height = datum.element.height;
evt.datum = datum;
//this.resizingFinished.emit(evt);
this.resizingFinished.emit(evt);
});
let x: number;
let dx: number;
let rightEdge: number;
let leftEdge: number;
let isReflectedHorizontal: boolean = false;
let right = drag()
.on('start', () => {
.on('start', (datum: MapDrawing) => {
x = event.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
leftEdge = x + datum.element.width;
document.body.style.cursor = "ew-resize";
})
.on('drag', (datum: MapDrawing) => {
const evt = event;
dx = x - (evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x);
x = evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
if ((datum.element.width + dx) < 0){
datum.element.width = 1;
if (!isReflectedHorizontal) {
dx = x - (evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x);
x = evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
if ((datum.element.width + dx) < 0) {
x = leftEdge;
isReflectedHorizontal = true;
datum.element.width = Math.abs(datum.element.width + evt.dx);
} else {
datum.x = evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
datum.element.width += dx;
if (datum.element instanceof EllipseElement) {
(datum.element as EllipseElement).cx = (datum.element as EllipseElement).cx + dx/2 < 0 ? 1 : (datum.element as EllipseElement).cx += dx/2;
(datum.element as EllipseElement).rx = (datum.element as EllipseElement).rx + dx/2 < 0 ? 1 : (datum.element as EllipseElement).rx += dx/2;
}
}
} else {
datum.x = evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
datum.element.width += dx;
if (datum.element instanceof EllipseElement) {
(datum.element as EllipseElement).cx = (datum.element as EllipseElement).cx + dx/2 < 0 ? 1 : (datum.element as EllipseElement).cx += dx/2;
(datum.element as EllipseElement).rx = (datum.element as EllipseElement).rx + dx/2 < 0 ? 1 : (datum.element as EllipseElement).rx += dx/2;
if ((datum.element.width + evt.dx) < 0) {
x = leftEdge;
isReflectedHorizontal = false;
datum.element.width = Math.abs(datum.element.width + evt.dx);
} else {
if (datum.element instanceof EllipseElement){
(datum.element as EllipseElement).cx = (datum.element as EllipseElement).cx + evt.dx/2 < 0 ? 1 : (datum.element as EllipseElement).cx += evt.dx/2;
(datum.element as EllipseElement).rx = (datum.element as EllipseElement).rx + evt.dx/2 < 0 ? 1 : (datum.element as EllipseElement).rx += evt.dx/2;
}
datum.element.width = (datum.element.width + evt.dx) < 0 ? 1 : datum.element.width += evt.dx;
}
}
this.redrawDrawing(view, datum);
})
.on('end', (datum: MapDrawing) => {
@ -227,17 +244,43 @@ export class DrawingsWidget implements Widget {
});
let left = drag()
.on('start', () => {
.on('start', (datum: MapDrawing) => {
document.body.style.cursor = "ew-resize";
rightEdge = datum.x;
})
.on('drag', (datum: MapDrawing) => {
const evt = event;
if (datum.element instanceof EllipseElement){
(datum.element as EllipseElement).cx = (datum.element as EllipseElement).cx + evt.dx/2 < 0 ? 1 : (datum.element as EllipseElement).cx += evt.dx/2;
(datum.element as EllipseElement).rx = (datum.element as EllipseElement).rx + evt.dx/2 < 0 ? 1 : (datum.element as EllipseElement).rx += evt.dx/2;
if (!isReflectedHorizontal) {
if ((datum.element.width + evt.dx) < 0) {
x = rightEdge;
isReflectedHorizontal = true;
datum.element.width = Math.abs(datum.element.width + evt.dx);
} else {
if (datum.element instanceof EllipseElement){
(datum.element as EllipseElement).cx = (datum.element as EllipseElement).cx + evt.dx/2 < 0 ? 1 : (datum.element as EllipseElement).cx += evt.dx/2;
(datum.element as EllipseElement).rx = (datum.element as EllipseElement).rx + evt.dx/2 < 0 ? 1 : (datum.element as EllipseElement).rx += evt.dx/2;
}
datum.element.width = (datum.element.width + evt.dx) < 0 ? 1 : datum.element.width += evt.dx;
}
} else {
dx = x - (evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x);
x = evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
if ((datum.element.width + dx) < 0) {
x = rightEdge;
isReflectedHorizontal = false;
datum.element.width = Math.abs(datum.element.width + evt.dx);
} else {
datum.x = evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
datum.element.width += dx;
if (datum.element instanceof EllipseElement) {
(datum.element as EllipseElement).cx = (datum.element as EllipseElement).cx + dx/2 < 0 ? 1 : (datum.element as EllipseElement).cx += dx/2;
(datum.element as EllipseElement).rx = (datum.element as EllipseElement).rx + dx/2 < 0 ? 1 : (datum.element as EllipseElement).rx += dx/2;
}
}
}
datum.element.width = (datum.element.width + evt.dx) < 0 ? 1 : datum.element.width += evt.dx;
this.redrawDrawing(view, datum);
})
.on('end', (datum: MapDrawing) => {
@ -273,4 +316,5 @@ export class DrawingsWidget implements Widget {
private selectDrawing(view: SVGSelection, drawing: MapDrawing) {
return view.selectAll<SVGGElement, MapDrawing>(`g.drawing[drawing_id="${drawing.id}"]`);
}
}

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

@ -108,7 +108,7 @@ svg.map image:hover, svg.map image.chosen, g.selected {
}
g.selected line {
stroke: black;
stroke: transparent;
}
path.selected {

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

@ -104,7 +104,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
private nodesEventSource: NodesEventSource,
private drawingsEventSource: DrawingsEventSource,
private linksEventSource: LinksEventSource,
private mapDrawingToSvgConverter: MapDrawingToSvgConverter
private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
private settingsService: SettingsService,
) {}
@ -312,7 +312,6 @@ 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)