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