Commit f76e7beb authored by Tobias Liese's avatar Tobias Liese

implemented state rename logic

parent cb35515b
Pipeline #94046 failed with stages
in 31 seconds
......@@ -42,11 +42,16 @@
<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>
<li>
<form id="nameForm">
<label for="stateName">State name:</label>
<input type="text" id="stateName" name="stateName" disabled>
</form>
</li>
<li class="right"><a>Σ:</a></li>
<li class="right"><a id="states">Q: {}</a></li>
<li class="right"><a>δ:</a></li>
</ul>
<canvas id="canvas" width="1" height="1"></canvas>
</div>
......
......@@ -17,11 +17,13 @@
}
* {
font-size: large;
margin: 0;
padding: 0;
background-color: var(--main-bg-color);
font-family: 'Tomorrow', sans-serif;
color: var(--main-color);
border: none;
}
ul {
......@@ -50,6 +52,24 @@ li a {
background-color: var(--main-ac-color);
}
label {
float: left;
display: block;
text-align: center;
padding: var(--toolbar-height);
text-decoration: none;
background-color: var(--main-ac-color);
border: none;
}
input {
padding: var(--toolbar-height) 0;
float: left;
display: block;
text-align: left;
background-color: var(--main-ac-color);
}
li a:hover {
background-color: var(--main-ac-color);
}
......
......@@ -12,23 +12,23 @@ class Field {
this.removeState(selected)
}
);
document.getElementById("createState").addEventListener("mousedown", () => {
this.addState(100, 300, "q1")
});
document.getElementById("editState").addEventListener("mousedown", () => {
// @todo
document.getElementById("createState").addEventListener("mousedown", (event: MouseEvent) => {
this.addState(event.clientX - this.xOrigin, event.clientY - this.yOrigin, "q1")
});
document.getElementById("addTransition").addEventListener("mousedown", () => {
transitionMode = true
// document.body.style.cursor = "crosshair"
});
(<HTMLFormElement>document.getElementById("nameForm")).oninput = (event: Event) => {
let elm = this.getStateByIndex(lastSelected)
this.updateState(lastSelected, elm.x, elm.y, editName.value)
}
}
addState(x: number, y: number, name: string) {
this.context.font = "40px Dancing Script"
let textSize: TextMetrics = this.context.measureText(name)
this.states.push(new State(x, y, name, textSize.width * 0.9, textSize.actualBoundingBoxDescent))
this.states.push(new State(x, y, name, textSize.width * 0.5 + 10, textSize.actualBoundingBoxDescent))
this.drawState(this.states[this.states.length - 1])
states.textContent = states.innerText.replace(/{.*}/gm, "{" + this.states.toString() + "}")
}
......@@ -37,7 +37,6 @@ class Field {
this.states.splice(i, 1)
this.rePaint()
selected = null
states.textContent = states.innerText.replace(/{.*}/gm, "{" + this.states.toString() + "}")
}
getStateByIndex(i: number): State {
......@@ -49,6 +48,8 @@ class Field {
this.states[i].y = y
if (name != null) {
this.states[i].name = name
let textSize: TextMetrics = this.context.measureText(name)
this.states[i].radius = textSize.width * 0.5 + 10
}
this.rePaint()
}
......@@ -67,6 +68,7 @@ class Field {
for (let state of this.states) {
this.drawState(state)
}
states.textContent = states.innerText.replace(/{.*}/gm, "{" + this.states.toString() + "}")
}
private drawState(state: State) {
......@@ -77,8 +79,8 @@ class Field {
state.y,
state.radius, 0, 2 * Math.PI,)
this.context.fill()
this.context.fillStyle = "white"
this.context.font = "40px Dancing Script"
this.context.fillStyle = "white"
this.context.textAlign = "center"
this.context.fillText(
state.name,
......@@ -128,6 +130,8 @@ onmousemove = (event: MouseEvent) => {
} else if (menuVisible) {
selected = field.getStateIndex(x, y)
if (selected != null) {
editName.value = field.getStateByIndex(selected).name
editName.removeAttribute("disabled")
lastSelected = selected
}
if (transitionMode) {
......@@ -194,13 +198,14 @@ window.addEventListener("contextmenu", e => {
let dragMode: boolean = false
let transitionMode: boolean = false
let menuVisible: boolean = false
const field: Field = new Field();
let editName: HTMLInputElement = <HTMLInputElement>document.getElementById("stateName")
let states = document.getElementById("states");
let contextMenu
let selected: number
let lastSelected: number
const field: Field = new Field();
// let webSocket = new WebSocket(
// 'ws://' + window.location.host + "/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