Commit 64f720fa authored by Tobias Liese's avatar Tobias Liese

frontend is getting better

parent d1dc86b8
Pipeline #93242 failed with stages
in 30 seconds
......@@ -11,6 +11,8 @@
content="A simple tool to create Automatons together.">
</head>
<body>
<!-- Context Menus -->
<div class="hide" id="field-menu">
<ul>
<li>
......@@ -22,21 +24,29 @@
<div class="hide" id="state-menu">
<ul>
<li>
<a id="removeState">Remove State</a>
<a id="removeState">Remove</a>
</li>
<li>
<a>Edit</a>
</li>
<li>
<a>Add Transaction</a>
</li>
</ul>
</div>
<!-- NavBar -->
<ul>
<li><a>Aut0m4t0n</a></li>
<li><a>+</a></li>
</ul>
<div class="content">
<ul class="menu">
<li><a>States</a></li>
<li><a>Functions</a></li>
<li class="right"><a>Alphabet Σ:</a></li>
<li class="right"><a id="states">States Q: {}</a></li>
<li class="right"><a>Transitions δ:</a></li>
</ul>
<canvas id="canvas" width="1" height="1"></canvas>
</div>
......
......@@ -38,6 +38,10 @@ li {
float: left;
}
li.right {
float: right;
}
li a {
display: block;
text-align: center;
......
// Classes:
class Field {
private canvas: HTMLCanvasElement = document.getElementsByTagName('canvas')[0];
private context = this.canvas.getContext("2d");
......@@ -7,13 +8,11 @@ class Field {
constructor() {
this.rePaint()
document.getElementById("removeState")
.addEventListener("mousedown", () => {
document.getElementById("removeState").addEventListener("mousedown", () => {
this.removeState(selected)
}
);
let btn = document.getElementById("createState");
btn.addEventListener("mousedown", () => {
document.getElementById("createState").addEventListener("mousedown", () => {
this.addState(100, 300, "q1")
});
}
......@@ -23,14 +22,14 @@ class Field {
let textSize: TextMetrics = field.context.measureText(name)
this.states.push(new State(x, y, name, textSize.width * 0.8, textSize.actualBoundingBoxDescent))
this.drawState(this.states[this.states.length - 1])
states.textContent = states.innerText.replace(/{.*}/gm, "{" + this.states.toString() + "}")
}
removeState(i: number) {
// @todo fix this delete leaves undefined we don't want anything
console.log(this.states)
this.states.splice(i, 1)
this.rePaint()
selected = null
states.textContent = states.innerText.replace(/{.*}/gm, "{" + this.states.toString() + "}")
}
getStateByIndex(i: number): State {
......@@ -84,10 +83,6 @@ class Field {
}
}
const field: Field = new Field();
let selected: number
let dragMode: boolean = false
class State {
x: number
y: number
......@@ -102,10 +97,13 @@ class State {
this.radius = radius
this.height = height
}
}
field.addState(100, 50, "q0")
public toString(): string {
return this.name
}
}
// listener:
onmousemove = (event: MouseEvent) => {
if (dragMode) {
field.updateState(selected, event.x - field.xOrigin, event.y - field.yOrigin, null)
......@@ -121,29 +119,30 @@ onmousemove = (event: MouseEvent) => {
}
}
onmousedown = (event: MouseEvent) => {
if (event.button != 2) {
if (contextMenu != null) {
contextMenu.className = "hide";
contextMenu = null
}
if (selected != null) {
dragMode = true
document.body.style.cursor = "grabbing"
}
if (contextMenu != null) {
contextMenu.className = "hide";
contextMenu = null
}
if (selected != null) {
dragMode = true
document.body.style.cursor = "grabbing"
}
}
onmouseup = () => {
dragMode = false
if (selected != null) {
document.body.style.cursor = "grab"
} else {
document.body.style.cursor = "default"
}
}
onresize = () => {
field.rePaint()
}
let contextMenu
let menuVisible: boolean = false
window.addEventListener("contextmenu", e => {
e.preventDefault();
if (selected != null) {
......@@ -157,6 +156,14 @@ window.addEventListener("contextmenu", e => {
menuVisible = true
return false
});
// linear code:
let states = document.getElementById("states");
let contextMenu
let menuVisible: boolean = false
const field: Field = new Field();
let selected: number
let dragMode: boolean = false
// let webSocket = new WebSocket(
......
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