gitea-mirror/KSP-MGA-Planner
1
0
Fork 0
mirror of https://github.com/Krafpy/KSP-MGA-Planner.git synced 2025-12-12 07:40:41 -08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed duplicate textboxes.

Browse Source
This commit is contained in:
Krafpy
2023-01-02 18:02:43 +01:00
parent 183f70fa47
commit f710887a95
2 changed files with 54 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
dist/main/editor/draggable-text.js vendored
View File

@@ -1,18 +1,28 @@
export class DraggableTextbox {
static create(title, content) {
for (const [id, item] of this.boxes) {
if (item.title == title) {
this.moveToFront(id);
return;
}
}
const template = document.getElementById("draggable-text-template");
const div = template.cloneNode(true);
document.body.insertBefore(div, document.body.lastChild);
div.id = `draggable-text-${this.nextId}`;
const id = this.nextId;
div.id = `draggable-text-${id}`;
this.nextId++;
this.boxes.set(div.id, div);
this.boxes.set(id, { div, title });
const header = div.getElementsByClassName("draggable-text-header")[0];
const h = header.getElementsByClassName("draggable-text-title")[0];
h.innerHTML = title;
const textarea = div.getElementsByTagName("textarea")[0];
textarea.value = content;
const closeBtn = div.getElementsByClassName("draggable-close-btn")[0];
closeBtn.onclick = () => div.remove();
closeBtn.onclick = () => {
div.remove();
this.boxes.delete(id);
};
const copyBtn = div.getElementsByClassName("draggable-copy-btn")[0];
copyBtn.onclick = () => navigator.clipboard.writeText(content);
let pos1, pos2, pos3, pos4;
@@ -23,7 +33,7 @@ export class DraggableTextbox {
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
this.moveToFront(div.id);
this.moveToFront(id);
};
const elementDrag = (e) => {
e = e || window.event;
@@ -32,23 +42,28 @@ export class DraggableTextbox {
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
div.style.top = (div.offsetTop - pos2) + "px";
div.style.left = (div.offsetLeft - pos1) + "px";
let top = (div.offsetTop - pos2);
let left = (div.offsetLeft - pos1);
div.style.top = top.toString() + "px";
div.style.left = left.toString() + "px";
};
const closeDragElement = () => {
document.onmouseup = null;
document.onmousemove = null;
};
header.onmousedown = dragMouseDown;
this.moveToFront(div.id);
textarea.onclick = () => this.moveToFront(id);
this.moveToFront(id);
this.startZ++;
div.hidden = false;
div.style.display = "";
return id;
}
static moveToFront(id) {
const div0 = this.boxes.get(id);
const item = this.boxes.get(id);
const div0 = item.div;
const z0 = parseInt(div0.style.zIndex);
this.boxes.forEach((div, _) => {
this.boxes.forEach(({ div }, _) => {
const z = parseInt(div.style.zIndex);
if (z > z0) {
div.style.zIndex = (z - 1).toString();

41
src/main/editor/draggable-text.ts
View File

@@ -1,15 +1,23 @@
export class DraggableTextbox {
private static nextId = 0;
private static startZ = 9;
private static boxes = new Map<string, HTMLDivElement>();
private static boxes = new Map<number, {div: HTMLDivElement, title: string}>();
public static create(title: string, content: string){
for(const [id, item] of this.boxes){
if(item.title == title) {
this.moveToFront(id);
return;
}
}
const template = document.getElementById("draggable-text-template") as HTMLDivElement;
const div = template.cloneNode(true) as HTMLDivElement;
document.body.insertBefore(div,document.body.lastChild);
div.id = `draggable-text-${this.nextId}`;
const id = this.nextId;
div.id = `draggable-text-${id}`;
this.nextId++;
this.boxes.set(div.id, div);
this.boxes.set(id, {div, title});
const header = div.getElementsByClassName("draggable-text-header")[0] as HTMLDivElement;
const h = header.getElementsByClassName("draggable-text-title")[0] as HTMLTitleElement;
@@ -19,7 +27,10 @@ export class DraggableTextbox {
textarea.value = content;
const closeBtn = div.getElementsByClassName("draggable-close-btn")[0] as HTMLButtonElement;
closeBtn.onclick = () => div.remove();
closeBtn.onclick = () => {
div.remove();
this.boxes.delete(id);
};
const copyBtn = div.getElementsByClassName("draggable-copy-btn")[0] as HTMLButtonElement;
copyBtn.onclick = () => navigator.clipboard.writeText(content);
@@ -35,7 +46,7 @@ export class DraggableTextbox {
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
this.moveToFront(div.id);
this.moveToFront(id);
}
const elementDrag = (e: any) => {
@@ -47,8 +58,10 @@ export class DraggableTextbox {
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
div.style.top = (div.offsetTop - pos2) + "px";
div.style.left = (div.offsetLeft - pos1) + "px";
let top = (div.offsetTop - pos2);
let left = (div.offsetLeft - pos1);
div.style.top = top.toString() + "px";
div.style.left = left.toString() + "px";
}
const closeDragElement = () => {
@@ -58,17 +71,23 @@ export class DraggableTextbox {
}
header.onmousedown = dragMouseDown;
this.moveToFront(div.id);
textarea.onclick = () => this.moveToFront(id);
this.moveToFront(id);
this.startZ++;
div.hidden = false;
div.style.display = "";
return id
}
private static moveToFront(id: string){
const div0 = this.boxes.get(id) as HTMLDivElement;
public static moveToFront(id: number){
const item = this.boxes.get(id) as {div: HTMLDivElement, title: string};
const div0 = item.div;
const z0 = parseInt(div0.style.zIndex);
this.boxes.forEach((div, _) => {
this.boxes.forEach(({div}, _) => {
const z = parseInt(div.style.zIndex);
if(z > z0){
div.style.zIndex = (z-1).toString();