Commit 90bf3de6 authored by Tobias Liese's avatar Tobias Liese

Transitions still need a LOT of work

parent a559b8bf
Pipeline #96476 failed with stages
in 17 minutes and 23 seconds
......@@ -6,7 +6,7 @@ class Field {
this.states = [];
this.rePaint();
document.getElementById("removeState").addEventListener("mousedown", () => {
this.remove(selected);
this.remove(lastSelected);
});
document.getElementById("createState").addEventListener("mousedown", (event) => {
let x = event.clientX - field.xOrigin + window.pageXOffset;
......@@ -68,10 +68,10 @@ class Field {
}
getObjectAt(x, y) {
for (let state of this.states) {
if (state.isOn(x, y))
if (state.isOn([x, y]))
return state;
for (let transition of state.transitions) {
if (transition.isOn(x, y))
if (transition.isOn([x, y]))
return transition;
}
}
......@@ -121,8 +121,8 @@ class State {
toString() {
return this.name;
}
isOn(x, y) {
return (Math.sqrt(Math.pow(x - this.x, 2) + Math.pow(y - this.y, 2))) <= this.radius;
isOn(pos) {
return (Math.sqrt(Math.pow(pos[0] - this.x, 2) + Math.pow(pos[1] - this.y, 2))) <= this.radius;
}
}
var TransitionType;
......@@ -133,10 +133,10 @@ var TransitionType;
})(TransitionType || (TransitionType = {}));
class Transition {
constructor(type, origin, destination, key) {
this.type = type;
this.origin = origin;
this.destination = destination;
this.key = key;
this.setType(type);
}
draw(context) {
context.save();
......@@ -150,16 +150,44 @@ class Transition {
context.lineTo(this.destination.x, this.destination.y);
break;
case TransitionType.QUADRATIC:
context.quadraticCurveTo(this.ctx[0][0], this.ctx[0][1], this.destination.x, this.destination.y);
break;
case TransitionType.BEZIER:
context.bezierCurveTo(this.ctx[0][0], this.ctx[0][1], this.ctx[1][0], this.ctx[1][1], this.destination.x, this.destination.y);
break;
}
context.stroke();
context.restore();
}
isOn(x, y) {
isOn(pos) {
switch (this.type) {
case TransitionType.LINE:
let p1 = [this.origin.x, this.origin.y];
let p2 = [this.destination.x, this.destination.y];
let sum = Math.abs((p2[1] - p1[1]) * pos[0] - (p2[0] - p1[0]) * pos[1] + p2[0] * p1[1] - p2[1] * p1[0]);
let distance = sum / Math.sqrt(Math.pow(p2[1] - p1[1], 2) + Math.pow(p2[0] - p1[0], 1));
return pos[0] > Math.min(p1[0], p2[0]) && pos[1] > Math.min(p1[1], p2[1]) && distance <= 160;
case TransitionType.QUADRATIC:
break;
case TransitionType.BEZIER:
break;
}
return false;
}
setType(type) {
this.type = type;
switch (type) {
case TransitionType.LINE:
this.ctx = null;
break;
case TransitionType.QUADRATIC:
this.ctx = [[this.origin.x, this.destination.y]];
break;
case TransitionType.BEZIER:
this.ctx = [[this.origin.x, this.destination.y], [this.origin.y, this.destination.x]];
break;
}
}
}
onmousemove = (event) => {
let x = event.clientX - field.xOrigin + window.pageXOffset.valueOf();
......@@ -174,9 +202,11 @@ onmousemove = (event) => {
editName.value = selected.name;
editName.removeAttribute("disabled");
editName.focus();
document.body.style.cursor = "grab";
}
else
document.body.style.cursor = "pointer";
}
document.body.style.cursor = "grab";
}
else {
document.body.style.cursor = "default";
......@@ -216,8 +246,8 @@ onmousedown = () => {
};
onmouseup = (event) => {
dragMode = false;
window.onmousemove(event);
field.rePaint();
window.onmousemove(event);
};
onresize = () => {
field.rePaint();
......
......@@ -9,7 +9,7 @@ class Field {
constructor() {
this.rePaint()
document.getElementById("removeState").addEventListener("mousedown", () => {
this.remove(selected)
this.remove(lastSelected)
}
);
document.getElementById("createState").addEventListener("mousedown", (event: MouseEvent) => {
......@@ -81,10 +81,10 @@ class Field {
getObjectAt(x: number, y: number): FieldObject {
// let's try every State and check if x and y are inside the state
for (let state of this.states) {
if (state.isOn(x, y)) return state
if (state.isOn([x, y])) return state
// or the cursor points to a transition
for (let transition of state.transitions) {
if (transition.isOn(x, y)) return transition
if (transition.isOn([x, y])) return transition
}
}
}
......@@ -93,7 +93,7 @@ class Field {
interface FieldObject {
draw(context: CanvasRenderingContext2D): void
isOn(x: number, y: number): boolean
isOn(position: number[]): boolean
}
class State implements FieldObject {
......@@ -158,8 +158,8 @@ class State implements FieldObject {
return this.name
}
isOn(x: number, y: number) {
return (Math.sqrt(Math.pow(x - this.x, 2) + Math.pow(y - this.y, 2))) <= this.radius
isOn(pos: number[]) {
return (Math.sqrt(Math.pow(pos[0] - this.x, 2) + Math.pow(pos[1] - this.y, 2))) <= this.radius
}
}
......@@ -174,12 +174,13 @@ class Transition implements FieldObject {
origin: State
destination: State
key: string
ctx: number[][]
constructor(type: TransitionType, origin: State, destination: State, key: string) {
this.type = type
this.origin = origin
this.destination = destination
this.key = key
this.setType(type)
}
draw(context: CanvasRenderingContext2D): void {
......@@ -194,18 +195,59 @@ class Transition implements FieldObject {
context.lineTo(this.destination.x, this.destination.y)
break;
case TransitionType.QUADRATIC:
context.quadraticCurveTo(
this.ctx[0][0],
this.ctx[0][1],
this.destination.x,
this.destination.y
)
break;
case TransitionType.BEZIER:
context.bezierCurveTo(
this.ctx[0][0],
this.ctx[0][1],
this.ctx[1][0],
this.ctx[1][1],
this.destination.x,
this.destination.y
)
break;
}
context.stroke()
context.restore()
}
isOn(x: number, y: number): boolean {
isOn(pos: number[]): boolean {
switch (this.type) {
case TransitionType.LINE:
let p1: number[] = [this.origin.x, this.origin.y]
let p2: number[] = [this.destination.x, this.destination.y]
let sum = Math.abs((p2[1] - p1[1]) * pos[0] - (p2[0] - p1[0]) * pos[1] + p2[0] * p1[1] - p2[1] * p1[0])
let distance = sum / Math.sqrt(Math.pow(p2[1] - p1[1], 2) + Math.pow(p2[0] - p1[0], 1))
return pos[0] > Math.min(p1[0], p2[0]) && pos[1] > Math.min(p1[1], p2[1]) && distance <= 160 // brute forced value possibly a better solution
case TransitionType.QUADRATIC:
break;
case TransitionType.BEZIER: // This is really complex to calc
break;
}
return false
}
setType(type: TransitionType): void {
this.type = type
switch (type) {
case TransitionType.LINE:
this.ctx = null
break;
case TransitionType.QUADRATIC:
this.ctx = [[this.origin.x, this.destination.y]]
break;
case TransitionType.BEZIER:
this.ctx = [[this.origin.x, this.destination.y], [this.origin.y, this.destination.x]]
break;
}
}
}
// listener:
......@@ -221,9 +263,10 @@ onmousemove = (event: MouseEvent) => {
editName.value = selected.name
editName.removeAttribute("disabled")
editName.focus()
}
}
document.body.style.cursor = "grab"
} else document.body.style.cursor = "pointer"
}
} else {
document.body.style.cursor = "default"
editName.blur()
......@@ -260,8 +303,8 @@ onmousedown = () => {
onmouseup = (event: MouseEvent) => {
dragMode = false
window.onmousemove(event)
field.rePaint()
window.onmousemove(event)
}
onresize = () => {
......
......@@ -27,9 +27,6 @@
<li>
<a id="removeState">Remove</a>
</li>
<li>
<a id="editState">Edit</a>
</li>
<li>
<a id="addTransition">Add Transition</a>
</li>
......
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