Initial commit

js/components/connection.js

@@ -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));
+       }
+    }
+
+}

js/components/self-connection.js

@@ -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);
+    }
+
+}

js/components/start-connection.js

@@ -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();
+    }
+
+}

js/components/state.js

@@ -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,
+        };
+    }
+
+}