diff --git a/src/App.vue b/src/App.vue index a3d1b7d..0a7c447 100644 --- a/src/App.vue +++ b/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 station2: Station = new Station("Лубянка", true, [], 0) + let extraBranch1: ExtraBranch = new ExtraBranch("Таганско-Краснопресненская", "#800080", 2) + 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) diff --git a/src/models/map.ts b/src/models/map.ts index 03dc04a..2de1cb2 100644 --- a/src/models/map.ts +++ b/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) { - const yMax = (window.innerHeight-50) / 4; + private getTextPosition(up: boolean): number { + if (up) { + return yMax - 60; + } else { + return yMax + 60; + } + } + private drawConnectedStations(stations: Array, 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) { 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(25).fill('white').cx(last + stations[i].step).cy(yMax) + this.draw.circle(50).fill('#f06').cx(cx).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) { - 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); + let text = this.draw.text(stations[i].name).font({ size: 35}).cx(last + stations[i].step).cy(textPosition); text.font({ family: 'Onest', weight: '750',