переходы

src/App.vue

@@ -3,10 +3,15 @@ import {Map} from "./models/map.ts";
 import {Branch} from "./models/branch.ts";
 import { onMounted } from 'vue'
 import {Station} from "./models/station.ts";
+import {ConnectedStation} from "./models/connectedStation.ts";
+import {ExtraBranch} from "./models/extraBranch.ts";
 
 onMounted(() => {
-  let station1: Station = new Station("Охотный ряд", false, [], 500)
+  let extraBranch1: ExtraBranch = new ExtraBranch("Таганско-Краснопресненская", "#800080", 2)
-  let station2: Station = new Station("Лубянка", true, [], 0)
+  let extraStation1: ConnectedStation = new ConnectedStation("Кузнецкий\nмост", extraBranch1)
+
+  let station1: Station = new Station("Охотный ряд", false, [], 0)
+  let station2: Station = new Station("Лубянка", true, [extraStation1], 500)
 
   let branch: Branch = new Branch('Best','#FF0000', 1, [station1, station2])
   let map: Map = new Map(branch)

src/models/map.ts

@@ -3,6 +3,9 @@ import { SVG } from '@svgdotjs/svg.js'
 
 import {Branch} from "./branch.ts";
 import {Station} from "./station.ts";
+import {ConnectedStation} from "./connectedStation.ts";
+
+const yMax = (window.innerHeight-50) / 4;
 
 export interface MetroMap {
     branch: Branch;
@@ -22,28 +25,57 @@ export class Map implements MetroMap {
         this.branch = branch
     }
 
-    private drawStations(stations: Array<Station>) {
+    private getTextPosition(up: boolean): number {
-        const yMax = (window.innerHeight-50) / 4;
+        if (up) {
+            return yMax - 60;
+        } else {
+            return yMax + 60;
+        }
+    }
 
+    private drawConnectedStations(stations: Array<ConnectedStation>, up: boolean, cx: number, scy: number) {
+        for (let i = 0; i < stations.length; i++) {
+            let cy;
+            if (up) {
+                cy = scy + (i + 1) * 50
+            } else {
+                cy = scy - (i + 1) * 50
+            }
+            this.draw.circle(40).fill(stations[i].branch.color).cx(cx).cy(cy)
+
+            let text = this.draw.text(stations[i].branch.number.toString()).fill('white').font({ size: 28}).cx(cx).cy(cy);
+            text.font({
+                family: 'Onest',
+                weight: '750',
+            })
+
+            let naming = this.draw.text(stations[i].name).fill('black').font({ size: 25});
+            naming.cx(cx + 30 + (naming.bbox().width / 2)).cy(cy);
+            naming.font({
+                family: 'Onest',
+                weight: '750',
+                leading: 1
+            })
+        }
+    }
+
+    private drawStations(stations: Array<Station>) {
         let last = 200;
 
         for (let i = 0; i < stations.length; i++) {
+            let cx = last + stations[i].step;
             if (stations[i].connectedStations.length > 0) {
-                this.draw.circle(50).fill('#f06').cx(last + stations[i].step).cy(yMax)
+                this.draw.circle(50).fill('#f06').cx(cx).cy(yMax)
-                this.draw.circle(25).fill('white').cx(last + stations[i].step).cy(yMax)
+                this.draw.circle(25).fill('white').cx(cx).cy(yMax)
+
+                this.drawConnectedStations(stations[i].connectedStations, stations[i].up, cx, yMax);
             } else {
-                this.draw.rect(15, 50).fill('#f06').cx(last + stations[i].step).cy(yMax)
+                this.draw.rect(15, 50).fill('#f06').cx(cx).cy(yMax)
             }
 
-            let y;
+            let textPosition: number = this.getTextPosition(stations[i].up)
 
-            if (stations[i].up) {
+            let text = this.draw.text(stations[i].name).font({ size: 35}).cx(last + stations[i].step).cy(textPosition);
-                y = yMax - 60;
-            } else {
-                y = yMax + 60;
-            }
-
-            let text = this.draw.text(stations[i].name).font({ size: 35}).cx(last + stations[i].step).cy(y);
             text.font({
                 family: 'Onest',
                 weight: '750',