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

Fixes lots of bugs and mistakes, all basic features are now working

Browse Source
This commit is contained in:
KingOfDog
2019-03-01 14:09:39 +01:00
parent 2b6a8aec87
commit e5cdf549d2
9 changed files with 440 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
js/components/connection.js
View File

@@ -13,31 +13,31 @@ class Connection {
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);
const scale = Math.sqrt(dx ** 2 + dy ** 2);
return {
x: this.stateA.x + dx * this.parallelPart - dy * this.perpendicularPart / scale,
y: this.stateA.y + dy * this.parallelPart + dx * this.perpendicularPart / scale,
};
}
setAnchorPoint() {
setAnchorPoint(x, y) {
const dx = this.stateB.x - this.stateA.x;
const dy = this.stateB.y - this.stateA.y;
const scale = Math.sqrt(dx ^ 2 + dy ^ 2);
const scale = Math.sqrt(dx ** 2 + dy ** 2);
this.parallelPart = (dx * (x - this.stateA.x) + dy * (y - this.stateA.y)) / (scale ^ 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) {
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;
if (this.perpendicularPart === 0) {
const middleX = (this.stateA.x + this.stateB.x) / 2;
const middleY = (this.stateA.y + this.stateB.y) / 2;
const start = this.stateA.closestPointOnCircle(middleX, middleY);
const end = this.stateB.closestPointOnCircle(middleX, middleY);
@@ -59,7 +59,7 @@ class Connection {
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 endAngle = Math.atan2(this.stateB.y - circle.y, this.stateB.x - circle.x) + reverseScale * radius / circle.radius;
const startX = circle.x + circle.radius * Math.cos(startAngle);
const startY = circle.y + circle.radius * Math.sin(startAngle);
@@ -80,24 +80,83 @@ class Connection {
}
draw() {
const stuff = this.getEndPointsAndCircle();
const stuff = this.getEndPointsAndCircle();
ctx.beginPath();
ctx.beginPath();
ctx.strokeStyle = ctx.fillStyle = settings.colors.getColor(this);
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);
}
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();
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));
}
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));
}
ctx.closePath();
// Draws the text onto the line
if(stuff.isCircle) {
let startAngle = stuff.startAngle,
endAngle = stuff.endAngle;
if(endAngle < startAngle) {
endAngle += Math.PI * 2;
}
const textAngle = (startAngle + endAngle) / 2 + stuff.isReversed * Math.PI,
textX = stuff.circle.x + stuff.circle.radius * Math.cos(textAngle),
textY = stuff.circle.y + stuff.circle.radius * Math.sin(textAngle);
ctx.drawText(this.text, textX, textY, textAngle, selectedObject === this);
} else {
const textX = (stuff.start.x + stuff.end.x) / 2,
textY = (stuff.start.y + stuff.end.y) / 2,
textAngle = Math.atan2(stuff.end.x - stuff.start.x, stuff.start.y - stuff.end.y);
ctx.drawText(this.text, textX, textY, textAngle + this.lineAngleAdjust, selectedObject === this);
}
}
containsPoint(x, y) {
const endPoints = this.getEndPointsAndCircle();
if (endPoints.isCircle) {
const dx = x - endPoints.circle.x,
dy = y - endPoints.circle.y,
distance = Math.sqrt(dx ** 2 + dy ** 2) - endPoints.circle.radius;
if (Math.abs(distance) < settings.hitTargetPadding) {
let angle = Math.atan2(dy, dx),
startAngle = endPoints.startAngle,
endAngle = endPoints.endAngle;
if (endPoints.isReversed) {
[startAngle, endAngle] = [endAngle, startAngle];
}
if (endAngle < startAngle) {
endAngle += Math.PI * 2;
}
if (angle < startAngle) {
angle += Math.PI * 2;
} else if (angle > endAngle) {
angle -= Math.PI * 2;
}
return (angle > startAngle && angle < endAngle);
}
} else {
const dx = endPoints.end.x - endPoints.start.x,
dy = endPoints.end.y - endPoints.start.y,
length = Math.sqrt(dx ** 2 + dy ** 2),
percent = (dx * (x - endPoints.start.x) + dy * (y - endPoints.start.y)) / (length ** 2),
distance = (dx * (y - endPoints.start.y) - dy * (x - endPoints.start.x)) / length;
return (percent > 0 && percent < 1 && Math.abs(distance) < settings.hitTargetPadding);
}
return false;
}
}

17
js/components/self-connection.js
View File

@@ -63,13 +63,28 @@ class SelfConnection {
draw() {
const endPoints = this.getEndPointsAndCircle();
ctx.strokeStyle = ctx.fillStyle = settings.colors.getColor(this);
ctx.beginPath();
ctx.arc(endPoints.circle.x, endPoints.circle.y, endPoints.circle.radius, endPoints.startAngle, endPoints.endAngle);
ctx.stroke();
ctx.closePath();
const textX = endPoints.circle.x + endPoints.circle.radius * Math.cos(this.anchorAngle),
textY = endPoints.circle.y + endPoints.circle.radius * Math.sin(this.anchorAngle);
ctx.drawText(this.text, textX, textY, this.anchorAngle, selectedObject === this);
ctx.drawArrow(endPoints.end.x, endPoints.end.y, endPoints.endAngle + Math.PI * .4);
}
containsPoint(x, y) {
const endPoints = this.getEndPointsAndCircle(),
dx = x - endPoints.circle.x,
dy = y - endPoints.circle.y,
distance = Math.sqrt(dx ** 2 + dy ** 2) - endPoints.circle.radius;
return Math.abs(distance) < settings.hitTargetPadding;
}
}

26
js/components/start-connection.js
View File

@@ -37,14 +37,32 @@ class StartConnection {
}
draw() {
const endPoints = this.getEndPoints();
const points = this.getEndPoints();
ctx.strokeStyle = ctx.fillStyle = settings.colors.getColor(this);
ctx.beginPath();
ctx.moveTo(endPoints.start.x, endPoints.start.y);
ctx.lineTo(endPoints.end.x, endPoints.end.y);
ctx.moveTo(points.start.x, points.start.y);
ctx.lineTo(points.end.x, points.end.y);
ctx.stroke();
ctx.closePath();
const textAngle = Math.atan2(points.start.y - points.end.y, points.start.x - points.end.x);
ctx.drawText(this.text, points.start.x, points.start.y, textAngle, selectedObject === this);
ctx.drawArrow(points.end.x, points.end.y, Math.atan2(-this.deltaY, -this.deltaX))
}
containsPoint(x, y) {
const points = this.getEndPoints();
const dx = points.end.x - points.start.x,
dy = points.end.y - points.start.y,
length = Math.sqrt(dx ** 2 + dy ** 2),
percent = (dx * (x - points.start.x) + dy * (y - points.start.y)) / (length ** 2),
distance = (dx * (y - points.start.y) - dy * (x - points.start.x)) / length;
return (percent > 0 && percent < 1 && Math.abs(distance) < settings.hitTargetPadding);
}
}

42
js/components/state.js
View File

@@ -1,28 +1,48 @@
class State {
constructor(x, y, color) {
constructor(x, y) {
this.x = x;
this.y = y;
this.color = color;
this.mouseOffsetX = 0;
this.mouseOffsetY = 0;
this.color = '#f0f';
this.isAcceptState = false;
this.text = '';
}
setMouseStart(x, y) {
this.mouseOffsetX = this.x - x;
this.mouseOffsetY = this.y - y;
}
setAnchorPoint(x, y) {
this.x = x + this.mouseOffsetX;
this.y = y + this.mouseOffsetY;
}
draw() {
ctx.fillStyle = this.color;
ctx.strokeStyle = '#000';
ctx.strokeStyle = settings.colors.getColor(this);
ctx.beginPath();
ctx.arc(this.x, this.y, radius, 0, 360);
ctx.arc(this.x, this.y, radius, 0, 2 * Math.PI);
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);
ctx.fillStyle = settings.colors.getColor(this);
ctx.drawText(this.text, this.x, this.y, null, selectedObject === this);
if(this.isAcceptState) {
ctx.beginPath();
ctx.arc(this.x, this.y, radius - 6, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
}
}
moveTo(x, y) {
@@ -75,11 +95,15 @@ class State {
closestPointOnCircle(x, y) {
const dx = x - this.x;
const dy = y - this.y;
const scale = Math.sqrt(dx ^ 2 + dy ^ 2);
const scale = Math.sqrt(dx ** 2 + dy ** 2);
return {
x: this.x + dx * radius / scale,
y: this.y + dy * radius / scale,
};
}
containsPoint(x, y) {
return (x - this.x) ** 2 + (y - this.y) ** 2 < radius ** 2;
}
}

22
js/components/temporary-connection.js Normal file
View File

@@ -0,0 +1,22 @@
class TemporaryConnection {
constructor(from, to) {
this.from = from;
this.to = to;
}
draw() {
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.fillStyle = '#000';
ctx.moveTo(this.to.x, this.to.y);
ctx.lineTo(this.from.x, this.from.y);
ctx.stroke();
ctx.drawArrow(this.to.x, this.to.y, Math.atan2(this.to.y - this.from.y, this.to.x - this.from.x));
}
}