Commit 9665435b authored by Tobias Liese's avatar Tobias Liese

frontend work drag and drop for states now possible

parent ec2e92e4
Pipeline #93044 failed with stages
in 31 seconds
......@@ -6,8 +6,29 @@
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Tomorrow&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"
content="A simple tool to create Automatons together.">
</head>
<body>
<div class="hide" id="field-menu">
<ul>
<li>
<a id="createState">New State</a>
</li>
</ul>
</div>
<div class="hide" id="state-menu">
<ul>
<li>
<a id="removeState">Remove State</a>
</li>
<li>
<a>Add Transaction</a>
</li>
</ul>
</div>
<ul>
<li><a>Aut0m4t0n</a></li>
<li><a>+</a></li>
......@@ -19,17 +40,7 @@
</ul>
<canvas id="canvas" width="1" height="1"></canvas>
</div>
<div class="contextMenu">
<ul class="options">
<li class="menu-option">Back</li>
<li class="menu-option">Reload</li>
<li class="menu-option">Save</li>
<li class="menu-option">Save As</li>
<li class="menu-option">Inspect</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>
\ No newline at end of file
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: black;
--main-ac-color: #212121;
--main-color: whitesmoke;
--toolbar-height: 2vh;
}
:root {
--main-bg-color: black;
--main-ac-color: #212121;
--main-color: whitesmoke;
--toolbar-height: 2vh;
}
@media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) {
:root {
--main-bg-color: whitesmoke;
......@@ -14,7 +14,6 @@
--main-color: whitesmoke;
--toolbar-height: 2vh;
}
}
* {
......@@ -63,27 +62,28 @@ li a:hover {
background-color: var(--main-ac-color);
}
.contextMenu {
width: 120px;
box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
position: relative;
display: none;
.show {
z-index: 1000;
position: absolute;
background-color: #C0C0C0;
padding: 2px;
margin: 0;
list-style: none;
}
.hide {
display: none;
}
.contextMenu.options {
.show li {
list-style: none;
padding: 10px 0;
}
.contextMenu.options.menu-option {
font-weight: 500;
font-size: 14px;
padding: 10px 40px 10px 20px;
cursor: pointer;
.show a {
border: 0 !important;
text-decoration: none;
}
.contextMenu.options.menu-option:hover {
background: rgba(0, 0, 0, 0.2);
}
.show a:hover {
text-decoration: underline !important;
}
\ No newline at end of file
......@@ -7,7 +7,15 @@ class Field {
constructor() {
this.rePaint()
console.log(this.canvas.getBoundingClientRect().top)
document.getElementById("removeState")
.addEventListener("mousedown", (e: Event) => {
this.removeState(selected)
}
);
let btn = document.getElementById("createState");
btn.addEventListener("mousedown", (e: Event) => {
this.addState(100, 1000, "q1")
});
}
addState(x: number, y: number, name: string) {
......@@ -17,6 +25,13 @@ class Field {
this.drawState(this.states[this.states.length - 1])
}
removeState(i: number) {
this.clearState(this.getStateByIndex(i))
// @todo fix this delete leaves undefined we don't want anything
delete this.states[i]
selected = null
}
getStateByIndex(i: number): State {
return this.states[i]
}
......@@ -67,7 +82,8 @@ class Field {
getStateIndex(x: number, y: number): number {
let i: number = 0;
for (let state of this.states) {
while (i < this.states.length) {
let state = this.getStateByIndex(i)
let yy = y + state.radius / 2
if (Math.sqrt(Math.pow(x - state.x, 2) + Math.pow(yy - state.y, 2)) <= state.radius) {
return i
......@@ -102,18 +118,26 @@ field.addState(100, 50, "q0")
onmousemove = (event: MouseEvent) => {
if (dragMode) {
field.updateState(selected, event.x - field.xOrigin, event.y - field.yOrigin, null)
} else {
} else if (contextMenu == null) {
selected = field.getStateIndex(event.clientX - field.xOrigin, event.clientY - field.yOrigin)
if (selected != null) {
document.body.style.cursor = "move"
} else {
document.body.style.cursor = "default"
}
} else {
document.body.style.cursor = "default"
}
}
onmousedown = () => {
if (selected != null) {
dragMode = true
onmousedown = (event: MouseEvent) => {
if (event.button != 2) {
if (contextMenu != null) {
contextMenu.className = "hide";
contextMenu = null
}
if (selected != null) {
dragMode = true
}
}
}
......@@ -125,10 +149,24 @@ onresize = () => {
field.rePaint()
}
let contextMenu
let menuVisible: boolean = false
window.addEventListener("contextmenu", e => {
e.preventDefault();
if (selected != null) {
contextMenu = document.getElementById("state-menu");
} else {
contextMenu = document.getElementById("field-menu");
}
contextMenu.style.left = e.clientX + "px"
contextMenu.style.top = e.clientY + "px"
contextMenu.className = "show";
menuVisible = true
return false
});
// let webSocket = new WebSocket(
// 'ws://' + window.location.host + "/websocket");
// webSocket.onopen = function (event) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment