Added draggable textbox.

2025-12-05 20:40:13 -08:00 · 2023-01-02 13:49:33 +01:00
parent b6b210d269
commit b17398f5aa
6 changed files with 244 additions and 2 deletions
--- a/dist/main/editor/draggable-text.js
+++ 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();
--- 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();
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" type="text/css" href="style.css">
+    <!-- icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>KSP MGA Planner</title>
 </head>
 <body>
@@ -461,6 +463,15 @@

    </div>

+    <!-- template -->
+    <div id="draggable-text-template" class="draggable-text-box" hidden style="display: none;">
+        <div class="draggable-text-header">
+            <h3 class="draggable-text-title">Some title</h3>
+            <button class="draggable-close-btn"><i class="fa fa-close"></i></button>
+        </div>
+        <textarea name="draggable-textaera" cols="70" rows="30" readonly></textarea>
+    </div>
+
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
--- a/src/main/editor/draggable-text.ts
+++ 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<string, HTMLDivElement>();
+
+    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();
+    }
+}
--- 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 () => {
--- 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;
 }