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

Added draggable textbox.

Browse Source
This commit is contained in:
Krafpy
2023-01-02 13:49:33 +01:00
parent b6b210d269
commit b17398f5aa
6 changed files with 244 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
dist/main/editor/draggable-text.js vendored Normal file
View File

@@ -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();

3
dist/main/editor/editor.js vendored
View File

@@ -193,7 +193,8 @@ export async function initEditorWithSystem(systems, systemIndex) {
stepSlider.enable(); stepSlider.enable();
trajectory.updatePodPosition(systemTime); trajectory.updatePodPosition(systemTime);
console.log(solver.bestDeltaV); console.log(solver.bestDeltaV);
console.log(trajectoryToText(trajectory, sequence)); const trajText = trajectoryToText(trajectory, sequence);
console.log(trajText);
}; };
const findTrajectory = async () => { const findTrajectory = async () => {
paramsErr.hide(); paramsErr.hide();

11
index.html
View File

@@ -6,6 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="shortcut icon" href="#"> <link rel="shortcut icon" href="#">
<link rel="stylesheet" type="text/css" href="style.css"> <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> <title>KSP MGA Planner</title>
</head> </head>
<body> <body>
@@ -461,6 +463,15 @@
</div> </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/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://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

77
src/main/editor/draggable-text.ts Normal file
View File

@@ -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();
}
}

4
src/main/editor/editor.ts
View File

@@ -17,6 +17,7 @@ import { DiscreteRange } from "./range.js";
import { OrbitingBody } from "../objects/body.js"; import { OrbitingBody } from "../objects/body.js";
import { loadBodiesData, loadConfig } from "../utilities/data.js"; import { loadBodiesData, loadConfig } from "../utilities/data.js";
import { trajectoryToText } from "../utilities/trajectory-text.js"; import { trajectoryToText } from "../utilities/trajectory-text.js";
import { DraggableTextbox } from "./draggable-text.js";
export async function initEditorWithSystem(systems: SolarSystemData[], systemIndex: number){ 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(solver.bestDeltaV);
console.log(trajectoryToText(trajectory, sequence)); const trajText = trajectoryToText(trajectory, sequence);
console.log(trajText);
}; };
const findTrajectory = async () => { const findTrajectory = async () => {

91
style.css
View File

@@ -570,4 +570,95 @@ footer p
{ {
margin-bottom: 0; margin-bottom: 0;
margin-top: 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;
} }