KingOfDog/fsm-designer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Marcel 2019-02-27 21:22:38 +01:00
commit 9d87dc6387
7 changed files with 534 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FMS Designer</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="js/math.js"></script>
<script src="js/components/connection.js"></script>
<script src="js/components/start-connection.js"></script>
<script src="js/components/self-connection.js"></script>
<script src="js/components/state.js"></script>
<script src="js/main.js"></script>
</body>
</html>

103
js/components/connection.js Normal file
View File

@ -0,0 +1,103 @@
class Connection {
constructor(stateA, stateB) {
this.stateA = stateA;
this.stateB = stateB;
this.text = '';
this.lineAngleAdjust = 0;
this.parallelPart = 0.5;
this.perpendicularPart = 0;
}
getAnchorPoint() {
const dx = this.stateB.x - this.stateA.x;
const dy = this.stateB.y - this.stateA.y;
const scale = Math.sqrt(dx * dx + dy * dy);
return {
x: this.stateA.x + dx * this.parallelPart - dy * this.perpendicularPart / scale,
y: this.stateA.y + dy * this.parallelPart + dx * this.perpendicularPart / scale,
};
}
setAnchorPoint() {
const dx = this.stateB.x - this.stateA.x;
const dy = this.stateB.y - this.stateA.y;
const scale = Math.sqrt(dx ^ 2 + dy ^ 2);
this.parallelPart = (dx * (x - this.stateA.x) + dy * (y - this.stateA.y)) / (scale ^ 2);
this.perpendicularPart = (dx * (y - this.stateA.y) - dy * (x - this.stateA.x)) / scale;
if(this.parallelPart > 0 && this.parallelPart < 1 && Math.abs(this.perpendicularPart) < settings.snapToPadding) {
this.lineAngleAdjust = (this.perpendicularPart < 0) * Math.PI;
this.perpendicularPart = 0;
}
}
getEndPointsAndCircle() {
if(this.perpendicularPart === 0) {
const middleX = (this.stateA.x + this.stateB.y) / 2;
const middleY = (this.stateB.y + this.stateB.y) / 2;
const start = this.stateA.closestPointOnCircle(middleX, middleY);
const end = this.stateB.closestPointOnCircle(middleX, middleY);
return {
isCircle: false,
start,
end
};
}
const anchor = this.getAnchorPoint();
const circle = circleFromPoints(
{x: this.stateA.x, y: this.stateA.y},
{x: this.stateB.x, y: this.stateB.y},
anchor,
);
const isReversed = this.perpendicularPart > 0;
const reverseScale = isReversed ? 1 : -1;
const startAngle = Math.atan2(this.stateA.y - circle.y, this.stateA.x - circle.x) - reverseScale * radius / circle.radius;
const endAngle = Math.atan2(this.stateB.y - circle.y, this.stateB.x - circle.y) + reverseScale * radius / circle.radius;
const startX = circle.x + circle.radius * Math.cos(startAngle);
const startY = circle.y + circle.radius * Math.sin(startAngle);
const endX = circle.x + circle.radius * Math.cos(endAngle);
const endY = circle.y + circle.radius * Math.sin(endAngle);
return {
isCircle: true,
start: {x: startX, y: startY},
end: {x: endX, y: endY},
startAngle,
endAngle,
circle,
isReversed,
reverseScale,
};
}
draw() {
const stuff = this.getEndPointsAndCircle();
ctx.beginPath();
if(stuff.isCircle) {
ctx.arc(stuff.circle.x, stuff.circle.y, stuff.circle.radius, stuff.startAngle, stuff.endAngle, stuff.isReversed);
} else {
ctx.moveTo(stuff.start.x, stuff.start.y);
ctx.lineTo(stuff.end.x, stuff.end.y);
}
ctx.stroke();
if(stuff.isCircle) {
ctx.drawArrow(stuff.end.x, stuff.end.y, stuff.endAngle - stuff.reverseScale * (Math.PI / 2));
} else {
ctx.drawArrow(stuff.end.x, stuff.end.y, Math.atan2(stuff.end.y - stuff.start.y, stuff.end.x - stuff.start.x));
}
}
}

75
js/components/self-connection.js Normal file
View File

@ -0,0 +1,75 @@
class SelfConnection {
constructor(state, mouse) {
this.state = state;
this.anchorAngle = 0;
this.mouseOffsetAngle = 0;
this.text = '';
if(mouse) {
this.setAnchorPoint(mouse.x, mouse.y);
}
}
setMouseStart(x, y) {
this.mouseOffsetAngle = this.anchorAngle - Math.atan2(y - this.state.y, x - this.state.x);
}
setAnchorPoint(x, y) {
this.anchorAngle = Math.atan2(y - this.state.y, x - this.state.x) + this.mouseOffsetAngle;
const snap = Math.round(this.anchorAngle / (Math.PI / 2)) * (Math.PI / 2);
if(Math.abs(this.anchorAngle - snap) < .1)
this.anchorAngle = snap;
if(this.anchorAngle < -Math.PI)
this.anchorAngle += 2 * Math.PI;
if(this.anchorAngle > Math.PI)
this.anchorAngle -= 2 * Math.PI;
}
getEndPointsAndCircle() {
const circle = {
x: this.state.x + 1.5 * radius * Math.cos(this.anchorAngle),
y: this.state.y + 1.5 * radius * Math.sin(this.anchorAngle),
radius: 0.75 * radius,
};
const startAngle = this.anchorAngle - Math.PI * .8;
const endAngle = this.anchorAngle + Math.PI * .8;
const start = {
x: circle.x + circle.radius * Math.cos(startAngle),
y: circle.y + circle.radius * Math.sin(startAngle),
};
const end = {
x: circle.x + circle.radius * Math.cos(endAngle),
y: circle.y + circle.radius * Math.sin(endAngle),
};
return {
isCircle: true,
start,
end,
startAngle,
endAngle,
circle,
};
}
draw() {
const endPoints = this.getEndPointsAndCircle();
ctx.beginPath();
ctx.arc(endPoints.circle.x, endPoints.circle.y, endPoints.circle.radius, endPoints.startAngle, endPoints.endAngle);
ctx.stroke();
ctx.drawArrow(endPoints.end.x, endPoints.end.y, endPoints.endAngle + Math.PI * .4);
}
}

50
js/components/start-connection.js Normal file
View File

@ -0,0 +1,50 @@
class StartConnection {
constructor(state, start) {
this.state = state;
this.deltaX = 0;
this.deltaY = 0;
this.text = '';
if(start) {
this.setAnchorPoint(start.x, start.y);
}
}
setAnchorPoint(x, y) {
this.deltaX = x - this.state.x;
this.deltaY = y - this.state.y;
if(Math.abs(this.deltaX) < settings.snapToPadding) {
this.deltaX = 0;
}
if(Math.abs(this.deltaY) < settings.snapToPadding) {
this.deltaY = 0;
}
}
getEndPoints() {
const startX = this.state.x + this.deltaX;
const startY = this.state.y + this.deltaY;
const end = this.state.closestPointOnCircle(startX, startY);
return {
start: {x: startX, y: startY},
end,
};
}
draw() {
const endPoints = this.getEndPoints();
ctx.beginPath();
ctx.moveTo(endPoints.start.x, endPoints.start.y);
ctx.lineTo(endPoints.end.x, endPoints.end.y);
ctx.stroke();
}
}

85
js/components/state.js Normal file
View File

@ -0,0 +1,85 @@
class State {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.text = '';
}
draw() {
ctx.fillStyle = this.color;
ctx.strokeStyle = '#000';
ctx.beginPath();
ctx.arc(this.x, this.y, radius, 0, 360);
ctx.fill();
ctx.stroke();
ctx.closePath();
}
jumpTo(x, y) {
this.x = Math.min(Math.max(x, 0), width);
this.y = Math.min(Math.max(y, 0), height);
}
moveTo(x, y) {
x = Math.min(Math.max(0, x), width);
y = Math.min(Math.max(0, y), height);
this.goal = {
x, y
};
const angle = this.direction(x, y);
this.v = {
x: settings.speed * Math.cos(angle),
y: settings.speed * Math.sin(angle)
};
}
moveToStep() {
this.x += this.v.x;
this.y += this.v.y;
if ((this.v.x > 0 && this.goal.x <= this.x) || (this.v.x < 0 && this.goal.x >= this.x)) {
this.x = this.goal.x;
this.v.x = 0;
}
if((this.v.y > 0 && this.goal.y <= this.y) || (this.v.y < 0 && this.goal.y >= this.y)) {
this.y = this.goal.y;
this.v.y = 0;
}
}
intersection(state) {
return -Math.hypot(this.x - state.x, this.y - state.y) + radius * 2;
}
intersects(state) {
return this.intersection(state) > 0;
}
directionTo(state) {
return this.direction(state.x, state.y);
}
direction(x, y) {
return Math.atan2(this.y - y, this.x - x);
}
closestPointOnCircle(x, y) {
const dx = x - this.x;
const dy = y - this.y;
const scale = Math.sqrt(dx ^ 2 + dy ^ 2);
return {
x: this.x + dx * radius / scale,
y: this.y + dy * radius / scale,
};
}
}

187
js/main.js Normal file
View File

@ -0,0 +1,187 @@
const width = 600;
const height = 300;
const radius = 25;
const settings = {
physics: true,
speed: 2,
snapToPadding: 10
};
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
const states = [];
const connections = [];
function tick() {
states.forEach(stateA => {
states.forEach(stateB => {
if (stateA !== stateB && stateA.intersects(stateB)) {
const inter = stateA.intersection(stateB);
const angle1 = stateA.directionTo(stateB);
const angle2 = angle1 + Math.PI;
const x1 = Math.cos(angle1) * inter + stateA.x;
const y1 = Math.sin(angle1) * inter + stateA.y;
const x2 = Math.cos(angle2) * inter + stateB.x;
const y2 = Math.sin(angle2) * inter + stateB.y;
stateA.moveTo(x1, y1);
stateB.moveTo(x2, y2);
}
});
});
states.forEach(state => {
if (state.v) {
state.moveToStep();
}
});
setTimeout(tick, 1000 / 30);
}
function draw() {
ctx.clearRect(0, 0, width, height);
connections.forEach(connection => connection.draw());
states.forEach(state => state.draw());
setTimeout(draw, 1000 / 60);
}
function selectObject(x, y) {
for (let state of states) {
if ((x - state.x) * (x - state.x) + (y - state.y) * (y - state.y) < radius * radius) {
return state;
}
}
}
function getStateByPos(x, y) {
}
function checkForState(x, y) {
return !!getStateByPos(x, y);
}
function addState(x, y) {
const state = new State(x, y, '#f0f');
states.push(state);
}
function addConnection(stateA, stateB, angleA, angleB) {
const connection = new Connection(stateA, stateB, angleA, angleB);
connections.push(connection);
}
let isMouseDown = false,
isDragging = false,
lastDrag = 0,
selectedObject = null,
shiftPressed = false,
currentConnection = null,
movingObject = false;
canvas.addEventListener('mousedown', (event) => {
selectedObject = selectObject(event.x, event.y);
shiftPressed = event.shiftKey;
if (!!selectedObject) {
if (shiftPressed && selectedObject instanceof State) {
currentConnection = new SelfConnection(selectedObject, event);
} else {
movingObject = true;
}
}
});
canvas.addEventListener('mousemove', (event) => {
if (isMouseDown && !isDragging)
isDragging = true;
if (isMouseDown && isDragging) {
if (!shiftPressed) {
selectedObject.jumpTo(event.clientX, event.clientY);
}
selectedObject.setAnchorPoint(event.clientX, event.clientY);
}
if (!!currentConnection) {
let targetState = selectObject(event.x, event.y);
if (!targetState instanceof State) {
targetState = null;
}
if (!!selectedObject) {
if (targetState === selectedObject) {
currentConnection = new SelfConnection(selectedObject, event);
} else if(!!targetState) {
currentConnection = new Connection(selectedObject, targetState);
} else {
// currentConnection = new
}
} else {
}
}
});
canvas.addEventListener('mouseup', (event) => {
if (isDragging) {
lastDrag = Date.now()
}
if (shiftPressed) {
const state = getStateByPos(event.clientX, event.clientY);
addConnection(selectedObject, state, Math.PI, -Math.PI);
}
isMouseDown = false;
isDragging = false;
selectedObject = null;
});
canvas.addEventListener('click', (event) => {
const x = event.clientX,
y = event.clientY;
if (Date.now() - lastDrag < 100) {
return;
}
if (checkForState(x, y)) {
}
});
canvas.addEventListener('dblclick', (event) => {
const x = event.clientX,
y = event.clientY;
addState(x, y);
});
CanvasRenderingContext2D.prototype.drawArrow = function (x, y, angle) {
const dx = Math.cos(angle);
const dy = Math.sin(angle);
this.beginPath();
this.moveTo(x, y);
this.lineTo(x - 8 * dx + 5 * dy, y - 8 * dy - 5 * dx);
this.lineTo(x - 8 * dx - 5 * dy, y - 8 * dy + 5 * dx);
this.fill();
};
tick();
draw();

16
js/math.js Normal file
View File

@ -0,0 +1,16 @@
function det(a, b, c, d, e, f, g, h, i) {
return (a * e * i) + (b * f * g) + (c * d * h) - (a * f * h) - (b * d * i) - (c * e * g);
}
function circleFromPoints(p1, p2, p3) {
const a = det(p1.x, p1.y, 1, p2.x, p2.y, 1, p3.x, p3.y, 1);
const bx = -det(p1.x * p1.x + p1.y * p1.y, p1.y, 1, p2.x * p2.x + p2.y * p2.y, p2.y, 1, p3.x * p3.x + p3.y * p3.y, p3.y, 1);
const by = det(p1.x * p1.x + p1.y * p1.y, p1.x, 1, p2.x * p2.x + p2.y * p2.y, p2.x, 1, p3.x * p3.x + p3.y * p3.y, p3.x, 1);
const c = -det(p1.x * p1.x + p1.y * p1.y, p1.x, p1.y, p2.x * p2.x + p2.y * p2.y, p2.x, p2.y, p3.x * p3.x + p3.y * p3.y, p3.x, p3.y);
return {
x: -bx / (2 * a),
y: -by / (2 * a),
radius: Math.sqrt(bx ^ 2 + by ^ 2 - 4 * a * c) / (2 * Math.abs(a)),
};
}