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

Update project-map.component.ts

Browse Source 
Exchanging adding text methods
This commit is contained in:
Piotr Pekala 2018-12-11 06:14:04 -08:00
parent 7fff8feec7
commit a12af56561
1 changed files with 33 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -467,7 +467,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
setTimeout(() => { setTimeout(() => {
this.drawTools.visibility = true; this.drawTools.visibility = true;
}, },
400); 200);
} }
public getDrawingMock(objectType: string, text?: string): MapDrawing { public getDrawingMock(objectType: string, text?: string): MapDrawing {
@ -536,48 +536,42 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
var map = document.getElementsByClassName('map')[0]; var map = document.getElementsByClassName('map')[0];
let addTextListener = (event: MouseEvent) => { let addTextListener = (event: MouseEvent) => {
let x = event.clientX - this.mapChild.context.getZeroZeroTransformationPoint().x;
let y = event.clientY - this.mapChild.context.getZeroZeroTransformationPoint().y;
const svgElement = select("g.canvas"); var div = document.createElement('div');
svgElement div.style.width = "fit-content";
.append("foreignObject") div.style.left = event.clientX.toString() + 'px';
.attr("id", "temporaryText") div.style.top = (event.clientY - 10).toString() + 'px';
.attr("transform", `translate(${x},${y}) rotate(0)`) div.style.position = "absolute";
.attr("width", '1000px') div.style.zIndex = "99";
.append("xhtml:div")
.attr("class", "temporaryTextInside") div.style.fontFamily = "Noto Sans";
.attr('style', () => { div.style.fontSize = "11pt";
const styles: string[] = []; div.style.fontWeight = "bold";
styles.push(`font-family: Noto Sans`) div.style.color = "#000000";
styles.push(`font-size: 11pt`);
styles.push(`font-weight: bold`) div.setAttribute("contenteditable", "true");
styles.push(`color: #000000`);
return styles.join("; "); document.body.appendChild(div);
}) div.innerText = "";
.attr("width", 'fit-content') div.focus();
.attr("height", 'max-content') document.body.style.cursor = "text";
.attr('contenteditable', 'true')
.text("") div.addEventListener("focusout", () => {
.on("focusout", () => { let savedText = div.innerText;
let elem = document.getElementsByClassName("temporaryTextInside")[0] as HTMLElement;
let savedText = elem.innerText;
let drawing = this.getDrawingMock("text", savedText); let drawing = this.getDrawingMock("text", savedText);
(drawing.element as TextElement).text = savedText; (drawing.element as TextElement).text = savedText;
let svgText = this.mapDrawingToSvgConverter.convert(drawing); let svgText = this.mapDrawingToSvgConverter.convert(drawing);
this.drawingService this.drawingService
.add(this.server, this.project.project_id, x, y, svgText) .add(this.server, this.project.project_id, event.clientX - this.mapChild.context.getZeroZeroTransformationPoint().x, event.clientY - this.mapChild.context.getZeroZeroTransformationPoint().y, svgText)
.subscribe((serverDrawing: Drawing) => { .subscribe((serverDrawing: Drawing) => {
var temporaryElement = document.getElementById("temporaryText") as HTMLElement; document.body.style.cursor = "default";
temporaryElement.remove(); div.remove();
this.drawingsDataSource.add(serverDrawing); this.drawingsDataSource.add(serverDrawing);
}); });
}); });
var elem = document.getElementsByClassName("temporaryTextInside")[0] as HTMLElement;
elem.focus();
this.resetDrawToolChoice(); this.resetDrawToolChoice();
} }