Commit d310738f authored by Tobias Liese's avatar Tobias Liese

added transition logic

parent 7a37a00c
......@@ -58,11 +58,10 @@ class Field {
this.rePaint()
}
drawLineTo(x: number, y: number, curve: number) {
drawLineTo(origin: State, x: number, y: number, curve: number) {
this.context.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--main-ac-color')
let orig = this.getStateByIndex(lastSelected)
this.context.beginPath()
this.context.moveTo(orig.x, orig.y)
this.context.moveTo(origin.x, origin.y)
this.context.lineWidth = 5
this.context.lineTo(x, y)
// @todo add option to curve the line
......@@ -97,12 +96,17 @@ class Field {
)
}
addTransition(origin: number, destination: number, key: String, curve: number) {
let dest = this.getStateByIndex(destination)
this.drawLineTo(this.getStateByIndex(origin), dest.x, dest.y, curve)
}
getStateIndex(x: number, y: number): number {
// let's try every State and check if x and y are inside the state
let i: number = 0;
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) {
if (Math.sqrt(Math.pow(x - state.x, 2) + Math.pow(y - state.y, 2)) <= state.radius) {
return i
}
i++
......@@ -111,6 +115,7 @@ class Field {
}
class State {
id: number
x: number
y: number
name: string
......@@ -123,6 +128,7 @@ class State {
this.name = name
this.radius = radius
this.height = height
this.id = Math.random()
}
public toString(): string {
......@@ -132,39 +138,42 @@ class State {
// listener:
onmousemove = (event: MouseEvent) => {
let x = event.clientX - field.xOrigin + +window.pageXOffset.valueOf()
let x = event.clientX - field.xOrigin + window.pageXOffset.valueOf()
let y = event.clientY - field.yOrigin + window.pageYOffset.valueOf()
selected = field.getStateIndex(x, y)
if (selected != null) {
if (!transitionMode) {
lastSelected = selected
}
document.body.style.cursor = "grab"
} else {
document.body.style.cursor = "default"
}
if (dragMode) {
field.updateState(selected, x, y, null)
field.updateState(lastSelected, x, y, null)
} else if (menuVisible) {
selected = field.getStateIndex(x, y)
if (selected != null) {
editName.value = field.getStateByIndex(selected).name
editName.removeAttribute("disabled")
lastSelected = selected
}
if (transitionMode) {
document.body.style.cursor = "default"
} else if (transitionMode) {
document.body.style.cursor = "default"
if (selected == null || selected != lastSelected) {
field.rePaint()
field.drawLineTo(x, y, 0.5)
} else if (selected != null) {
document.body.style.cursor = "grab"
} else {
document.body.style.cursor = "default"
field.drawLineTo(field.getStateByIndex(lastSelected), x, y, 0.5)
}
} else {
document.body.style.cursor = "default"
}
}
onmousedown = (event: MouseEvent) => {
if (contextMenu != null) {
contextMenu.className = "hide";
contextMenu = null
menuVisible = false
} else if (transitionMode) {
field.rePaint()
if (selected != null) {
console.log("connect")
} else {
console.log("cancel")
field.addTransition(lastSelected, selected, "", 0)
}
transitionMode = false
} else if (selected != null) {
......@@ -198,7 +207,7 @@ window.addEventListener("contextmenu", e => {
} else {
contextMenu = document.getElementById("field-menu");
}
let x = e.clientX + +window.pageXOffset.valueOf()
let x = e.clientX + window.pageXOffset.valueOf()
let y = e.clientY + window.pageYOffset.valueOf()
contextMenu.style.left = x + "px"
contextMenu.style.top = y + "px"
......
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