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

Saving data for rectangle added

Browse Source
This commit is contained in:
PiotrP 2018-11-21 01:26:50 -08:00
parent f469a8dbe1
commit 974759fc61
6 changed files with 56 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/cartography/components/drawing-resizing/drawing-resizing.components.ts
View File

@ -1,17 +1,11 @@
import { Component, OnInit, ElementRef, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs';
import { DrawingsEventSource } from '../../events/drawings-event-source';
import { select } from 'd3-selection';
import { DrawingsWidget } from '../../widgets/drawings';
import { MapDrawing } from '../../models/map/map-drawing';
import { DraggedDataEvent } from '../../events/event-source';
import { ResizedDataEvent } from '../../events/event-source';
import { ResizingEnd } from '../../events/resizing';
export class DrawingResizedEvent{
constructor() {};
}
@Component({
selector: 'app-drawing-resizing',
template: `<ng-content></ng-content>`,
@ -20,19 +14,14 @@ export class DrawingResizedEvent{
export class DrawingResizingComponent implements OnInit, OnDestroy{
private resizingFinished: Subscription;
@Input('svg') svg: SVGSVGElement;
constructor(
private drawingsWidget: DrawingsWidget,
private drawingsEventSource: DrawingsEventSource
) {}
ngOnInit() {
const svg = select(this.svg);
this.resizingFinished = this.drawingsWidget.resizingFinished.subscribe((evt: ResizingEnd<MapDrawing>) => {
console.log("inside component");
this.drawingsEventSource.resized.emit(new DraggedDataEvent<MapDrawing>(evt.datum, evt.x, evt.y));
this.drawingsEventSource.resized.emit(new ResizedDataEvent<MapDrawing>(evt.datum, evt.x, evt.y, evt.width, evt.height));
});
}

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

@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
import { Converter } from '../converter';
import { MapDrawing } from '../../models/map/map-drawing';
import { RectElement } from '../../models/drawings/rect-element';
@Injectable()
@ -10,6 +11,13 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
) {}
convert(mapDrawing: MapDrawing) {
return "";
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}\" />`;
}
return str + elem + `</svg>`;
}
}

4
src/app/cartography/events/drawings-event-source.ts
View File

@ -1,10 +1,10 @@
import { Injectable, EventEmitter } from "@angular/core";
import { DraggedDataEvent } from "./event-source";
import { DraggedDataEvent, ResizedDataEvent } from "./event-source";
import { MapDrawing } from "../models/map/map-drawing";
@Injectable()
export class DrawingsEventSource {
public dragged = new EventEmitter<DraggedDataEvent<MapDrawing>>();
public resized = new EventEmitter<DraggedDataEvent<MapDrawing>>();
public resized = new EventEmitter<ResizedDataEvent<MapDrawing>>();
}

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

@ -81,6 +81,7 @@ export class DrawingsWidget implements Widget {
(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;
}
datum.element.height = (datum.element.height + evt.dy) < 0 ? 1: datum.element.height += evt.dy;
this.redrawDrawing(view, datum);
})
@ -123,6 +124,15 @@ export class DrawingsWidget implements Widget {
})
.on('end', (datum: MapDrawing) => {
document.body.style.cursor = "initial";
const evt = new ResizingEnd<MapDrawing>();
evt.x = datum.x;
evt.y = datum. y;
evt.width = datum.element.width;
evt.height = datum.element.height;
evt.datum = datum;
this.resizingFinished.emit(evt);
});
let x: number;
@ -151,6 +161,15 @@ export class DrawingsWidget implements Widget {
})
.on('end', (datum: MapDrawing) => {
document.body.style.cursor = "initial";
const evt = new ResizingEnd<MapDrawing>();
evt.x = datum.x;
evt.y = datum. y;
evt.width = datum.element.width;
evt.height = datum.element.height;
evt.datum = datum;
this.resizingFinished.emit(evt);
});
let left = drag()
@ -169,6 +188,15 @@ export class DrawingsWidget implements Widget {
})
.on('end', (datum: MapDrawing) => {
document.body.style.cursor = "initial";
const evt = new ResizingEnd<MapDrawing>();
evt.x = datum.x;
evt.y = datum. y;
evt.width = datum.element.width;
evt.height = datum.element.height;
evt.datum = datum;
this.resizingFinished.emit(evt);
});
merge

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

@ -28,7 +28,7 @@ import { MapChangeDetectorRef } from '../../cartography/services/map-change-dete
import { NodeContextMenu } from '../../cartography/events/nodes';
import { MapLinkCreated } from '../../cartography/events/links';
import { NodeWidget } from '../../cartography/widgets/node';
import { DraggedDataEvent } from '../../cartography/events/event-source';
import { DraggedDataEvent, ResizedDataEvent } from '../../cartography/events/event-source';
import { DrawingService } from '../../services/drawing.service';
import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-node-to-node-converter';
import { NodesEventSource } from '../../cartography/events/nodes-event-source';
@ -282,23 +282,15 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
});
}
private onDrawingResized(resizedEvent: DraggedDataEvent<MapDrawing>) {
console.log("ready to save");
private onDrawingResized(resizedEvent: ResizedDataEvent<MapDrawing>) {
const drawing = this.drawingsDataSource.get(resizedEvent.datum.id);
console.log(resizedEvent.datum.svg);
let svgString = this.mapDrawingToSvgConverter.convert(resizedEvent.datum);
console.log(resizedEvent.datum);
/*
this.drawingService
.updatePosition(this.server, drawing, drawing.x, drawing.y)
.updateSizeAndPosition(this.server, drawing, resizedEvent.x, resizedEvent.y, svgString)
.subscribe((serverDrawing: Drawing) => {
//this.drawingsDataSource.update(serverDrawing);
//<svg height="100" width="198"><rect fill="#ffffff" fill-opacity="1.0" height="100" stroke="#000000" stroke-width="2" width="198" /></svg>
console.log(serverDrawing.svg);
});*/
this.drawingsDataSource.update(serverDrawing);
});
}
public set readonly(value) {

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

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