ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-06 01:01:33 +00:00
Code Issues Actions 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

72
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,49 +536,43 @@ 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")
.attr('style', () => {
const styles: string[] = [];
styles.push(`font-family: Noto Sans`)
styles.push(`font-size: 11pt`);
styles.push(`font-weight: bold`)
styles.push(`color: #000000`);
return styles.join("; ");
})
.attr("width", 'fit-content')
.attr("height", 'max-content')
.attr('contenteditable', 'true')
.text("")
.on("focusout", () => {
let elem = document.getElementsByClassName("temporaryTextInside")[0] as HTMLElement;
let savedText = elem.innerText;
let drawing = this.getDrawingMock("text", savedText); div.style.fontFamily = "Noto Sans";
(drawing.element as TextElement).text = savedText; div.style.fontSize = "11pt";
let svgText = this.mapDrawingToSvgConverter.convert(drawing); div.style.fontWeight = "bold";
div.style.color = "#000000";
this.drawingService div.setAttribute("contenteditable", "true");
.add(this.server, this.project.project_id, x, y, svgText)
.subscribe((serverDrawing: Drawing) => { document.body.appendChild(div);
var temporaryElement = document.getElementById("temporaryText") as HTMLElement; div.innerText = "";
temporaryElement.remove(); div.focus();
this.drawingsDataSource.add(serverDrawing); document.body.style.cursor = "text";
});
div.addEventListener("focusout", () => {
let savedText = div.innerText;
let drawing = this.getDrawingMock("text", savedText);
(drawing.element as TextElement).text = savedText;
let svgText = this.mapDrawingToSvgConverter.convert(drawing);
this.drawingService
.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) => {
document.body.style.cursor = "default";
div.remove();
this.drawingsDataSource.add(serverDrawing);
}); });
});
var elem = document.getElementsByClassName("temporaryTextInside")[0] as HTMLElement; this.resetDrawToolChoice();
elem.focus();
this.resetDrawToolChoice();
} }
map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject); map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);