diff --git a/dist/main/editor/draggable-text.js b/dist/main/editor/draggable-text.js
new file mode 100644
index 0000000..7c4a6c9
--- /dev/null
+++ b/dist/main/editor/draggable-text.js
@@ -0,0 +1,60 @@
+export class DraggableTextbox {
+ static create(title, content) {
+ 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}`;
+ this.nextId++;
+ this.boxes.set(div.id, div);
+ 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();
+ let pos1, pos2, pos3, pos4;
+ const dragMouseDown = (e) => {
+ e = e || window.event;
+ e.preventDefault();
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ document.onmouseup = closeDragElement;
+ document.onmousemove = elementDrag;
+ this.moveToFront(div.id);
+ };
+ const elementDrag = (e) => {
+ e = e || window.event;
+ e.preventDefault();
+ pos1 = pos3 - e.clientX;
+ pos2 = pos4 - e.clientY;
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ div.style.top = (div.offsetTop - pos2) + "px";
+ div.style.left = (div.offsetLeft - pos1) + "px";
+ };
+ const closeDragElement = () => {
+ document.onmouseup = null;
+ document.onmousemove = null;
+ };
+ header.onmousedown = dragMouseDown;
+ this.moveToFront(div.id);
+ this.startZ++;
+ div.hidden = false;
+ div.style.display = "";
+ }
+ static moveToFront(id) {
+ const div0 = this.boxes.get(id);
+ const z0 = parseInt(div0.style.zIndex);
+ this.boxes.forEach((div, _) => {
+ const z = parseInt(div.style.zIndex);
+ if (z > z0) {
+ div.style.zIndex = (z - 1).toString();
+ }
+ });
+ div0.style.zIndex = this.startZ.toString();
+ }
+}
+DraggableTextbox.nextId = 0;
+DraggableTextbox.startZ = 9;
+DraggableTextbox.boxes = new Map();
diff --git a/dist/main/editor/editor.js b/dist/main/editor/editor.js
index 1c46cfd..1424180 100644
--- a/dist/main/editor/editor.js
+++ b/dist/main/editor/editor.js
@@ -193,7 +193,8 @@ export async function initEditorWithSystem(systems, systemIndex) {
stepSlider.enable();
trajectory.updatePodPosition(systemTime);
console.log(solver.bestDeltaV);
- console.log(trajectoryToText(trajectory, sequence));
+ const trajText = trajectoryToText(trajectory, sequence);
+ console.log(trajText);
};
const findTrajectory = async () => {
paramsErr.hide();
diff --git a/index.html b/index.html
index bddd38f..a13f215 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
+
+
KSP MGA Planner
@@ -461,6 +463,15 @@
+
+
+
+
+
+
diff --git a/src/main/editor/draggable-text.ts b/src/main/editor/draggable-text.ts
new file mode 100644
index 0000000..7a7566b
--- /dev/null
+++ b/src/main/editor/draggable-text.ts
@@ -0,0 +1,77 @@
+export class DraggableTextbox {
+ private static nextId = 0;
+ private static startZ = 9;
+ private static boxes = new Map();
+
+ public static create(title: string, content: string){
+ 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}`;
+ this.nextId++;
+ this.boxes.set(div.id, div);
+
+ const header = div.getElementsByClassName("draggable-text-header")[0] as HTMLDivElement;
+ const h = header.getElementsByClassName("draggable-text-title")[0] as HTMLTitleElement;
+ h.innerHTML = title;
+
+ const textarea = div.getElementsByTagName("textarea")[0] as HTMLTextAreaElement;
+ textarea.value = content;
+
+ const closeBtn = div.getElementsByClassName("draggable-close-btn")[0] as HTMLButtonElement;
+ closeBtn.onclick = () => div.remove();
+
+ // from: https://www.w3schools.com/howto/howto_js_draggable.asp
+ let pos1: number, pos2: number, pos3: number, pos4: number;
+ const dragMouseDown = (e: any) => {
+ e = e || window.event;
+ e.preventDefault();
+ // get the mouse cursor position at startup:
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ document.onmouseup = closeDragElement;
+ // call a function whenever the cursor moves:
+ document.onmousemove = elementDrag;
+
+ this.moveToFront(div.id);
+ }
+
+ const elementDrag = (e: any) => {
+ e = e || window.event;
+ e.preventDefault();
+ // calculate the new cursor position:
+ pos1 = pos3 - e.clientX;
+ pos2 = pos4 - e.clientY;
+ 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";
+ }
+
+ const closeDragElement = () => {
+ // stop moving when mouse button is released:
+ document.onmouseup = null;
+ document.onmousemove = null;
+ }
+
+ header.onmousedown = dragMouseDown;
+ this.moveToFront(div.id);
+ this.startZ++;
+
+ div.hidden = false;
+ div.style.display = "";
+ }
+
+ private static moveToFront(id: string){
+ const div0 = this.boxes.get(id) as HTMLDivElement;
+ const z0 = parseInt(div0.style.zIndex);
+ this.boxes.forEach((div, _) => {
+ const z = parseInt(div.style.zIndex);
+ if(z > z0){
+ div.style.zIndex = (z-1).toString();
+ }
+ });
+ div0.style.zIndex = this.startZ.toString();
+ }
+}
\ No newline at end of file
diff --git a/src/main/editor/editor.ts b/src/main/editor/editor.ts
index 3c4c289..0b748ad 100644
--- a/src/main/editor/editor.ts
+++ b/src/main/editor/editor.ts
@@ -17,6 +17,7 @@ import { DiscreteRange } from "./range.js";
import { OrbitingBody } from "../objects/body.js";
import { loadBodiesData, loadConfig } from "../utilities/data.js";
import { trajectoryToText } from "../utilities/trajectory-text.js";
+import { DraggableTextbox } from "./draggable-text.js";
export async function initEditorWithSystem(systems: SolarSystemData[], systemIndex: number){
@@ -258,7 +259,8 @@ export async function initEditorWithSystem(systems: SolarSystemData[], systemInd
console.log(solver.bestDeltaV);
- console.log(trajectoryToText(trajectory, sequence));
+ const trajText = trajectoryToText(trajectory, sequence);
+ console.log(trajText);
};
const findTrajectory = async () => {
diff --git a/style.css b/style.css
index dec1e2d..727a4d7 100644
--- a/style.css
+++ b/style.css
@@ -570,4 +570,95 @@ footer p
{
margin-bottom: 0;
margin-top: 0;
+}
+
+
+/* Draggable text box */
+
+.draggable-text-box
+{
+ position: fixed;
+ z-index: 9;
+
+ border-style: solid;
+ border-width: 1px;
+ border-color: #414242;
+ border-radius: 5px;
+
+ background-color: #0d0e0e;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ top: 100px;
+ left: 100px;
+
+ box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
+ -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
+ -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
+ -o-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
+}
+
+.draggable-text-header
+{
+ padding: 0.3em;
+ display: flex;
+ justify-content: space-between;
+}
+
+.draggable-text-header .draggable-text-title
+{
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.draggable-text-box textarea
+{
+ /*resize: none;*/
+ color: white;
+ background-color: rgb(22, 23, 24);
+ margin-bottom: 0;
+ min-width: 200px;
+ width: 100%;
+
+ border: none;
+ overflow: auto;
+ outline: none;
+
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.draggable-close-btn
+{
+ color: white;
+ border-radius: 5px;
+ height: 28px;
+ width: 28px;
+ border: 1px solid rgb(54, 54, 54);
+ background-color: #3e1515;
+ font-size: 16px;
+}
+
+.draggable-close-btn:hover
+{
+ cursor: pointer;
+ background-color: #512424;
+}
+
+.draggable-close-btn:active
+{
+ cursor: pointer;
+ background-color: #580e0e;
+}
+
+.draggable-close-btn:disabled
+{
+ cursor: default;
}
\ No newline at end of file