window settings

This commit is contained in:
grey-cat-1908 2024-03-21 21:03:02 +03:00
parent 1e8840d0e3
commit 44e4394da4
9 changed files with 159 additions and 28 deletions

View file

@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"@svgdotjs/svg.js": "^3.2.0", "@svgdotjs/svg.js": "^3.2.0",
"@vueuse/core": "^10.9.0",
"vue": "^3.3.11", "vue": "^3.3.11",
"vuetify": "^3.5.9" "vuetify": "^3.5.9"
}, },

View file

@ -1,12 +1,42 @@
<script setup lang="ts"> <script setup lang="ts">
import {Map} from "./models/map.ts"; import {Map} from "./models/map.ts";
import {Branch} from "./models/branch.ts"; import {Branch} from "./models/map/branch.ts";
import { onMounted } from 'vue' import {onMounted, ref} from 'vue'
import {Station} from "./models/station.ts"; import {Station} from "./models/map/station.ts";
import {ConnectedStation} from "./models/connectedStation.ts"; import {ConnectedStation} from "./models/map/connectedStation.ts";
import {ExtraBranch} from "./models/extraBranch.ts"; import {ExtraBranch} from "./models/map/extraBranch.ts";
// @ts-ignore
import {set, useEventListener} from '@vueuse/core'
import {Settings} from "./models/settings.ts";
const element = ref<HTMLDivElement>()
const xcord = ref(0);
const ycord = ref(0);
const mapWidth = ref(window.innerWidth);
const mapHeight = ref(window.innerHeight / 2);
// @ts-ignore
useEventListener(element, 'click', (evt) => {
xcord.value = evt.offsetX;
ycord.value = evt.offsetY;
})
let branch: Branch = new Branch('','', -1, [])
let settings: Settings = new Settings(mapWidth.value, mapHeight.value);
let map: Map;
onMounted(() => { onMounted(() => {
map = new Map(branch, settings);
build();
})
function build () {
let extraBranch1: ExtraBranch = new ExtraBranch( "#EF161E", 1) let extraBranch1: ExtraBranch = new ExtraBranch( "#EF161E", 1)
let extraStation1: ConnectedStation = new ConnectedStation("Библиотека\nимени Ленина", extraBranch1) let extraStation1: ConnectedStation = new ConnectedStation("Библиотека\nимени Ленина", extraBranch1)
@ -17,19 +47,79 @@ onMounted(() => {
let extraStation9: ConnectedStation = new ConnectedStation("Боровицкая", extraBranch9) let extraStation9: ConnectedStation = new ConnectedStation("Боровицкая", extraBranch9)
let station1: Station = new Station("Смоленская", false, [], 0) let station1: Station = new Station("Смоленская", false, [], 0)
let station2: Station = new Station("Арбатская", true, [extraStation1, extraStation9, extraStation4], 500) let station2: Station = new Station("Арбатская", true, [extraStation1, extraStation9, extraStation4], 200)
let branch: Branch = new Branch('Арбатско-Покровская линия','#0078BE', 3, [station1, station2]) let branch: Branch = new Branch('Арбатско-Покровская линия','#0078BE', 3, [station1, station2])
let map: Map = new Map(branch) let settings: Settings = new Settings(mapWidth.value, mapHeight.value);
map.setSettings(settings)
map.setBranch(branch)
map.build() map.build()
}) }
</script> </script>
<template> <template>
<div> <div>
<div class="map" id="map"></div> <div class="map" id="map" ref="element"></div>
<div class="settings" id="settings"> <div class="settings" id="settings">
<v-container>
<v-row>
<v-col>
<h2>Основные настройки</h2>
<br>
<div class="">
<ul>
<li>
<h3>Ширина схемы:</h3>
<v-text-field v-model="mapWidth"></v-text-field>
</li>
<li>
<h3>Высота схемы:</h3>
<v-text-field v-model="mapHeight"></v-text-field>
</li>
<li>
<h3>Ветка:</h3>
<v-btn size="x-large" variant="flat" block color="blue">Конфигурация</v-btn>
</li>
</ul>
</div>
</v-col>
<v-col>
<h2>Основные настройки</h2>
<br>
<div class="">
<ul>
<li>
<h3>Ширина схемы:</h3>
<v-text-field></v-text-field>
</li>
<li>
<h3>Высота схемы:</h3>
<v-text-field></v-text-field>
</li>
<li>
<h3>Ветка:</h3>
<v-btn size="x-large" variant="flat" block color="blue">Конфигурация</v-btn>
</li>
</ul>
</div>
</v-col>
<v-col>
<h2>Управление</h2>
<br>
<div class="">
<v-btn size="x-large" variant="flat" block color="blue">Импорт</v-btn>
<v-btn size="x-large" variant="flat" block color="orange">Экспорт</v-btn>
<v-btn size="x-large" variant="flat" block color="green">Сохранить</v-btn>
<v-btn size="x-large" variant="flat" block color="red" @click="build">Предпросмотр</v-btn>
<hr>
<br>
<h2>Курсор: ({{ xcord }}; {{ ycord }})</h2>
</div>
</v-col>
</v-row>
</v-container>
</div> </div>
</div> </div>
</template> </template>

View file

@ -1,35 +1,43 @@
// @ts-ignore // @ts-ignore
import { SVG } from '@svgdotjs/svg.js' import { SVG } from '@svgdotjs/svg.js'
import {Branch} from "./branch.ts"; import {Branch} from "./map/branch.ts";
import {Station} from "./station.ts"; import {Station} from "./map/station.ts";
import {ConnectedStation} from "./connectedStation.ts"; import {ConnectedStation} from "./map/connectedStation.ts";
import {Settings} from "./settings.ts";
const yMax = (window.innerHeight-50) / 4;
export interface MetroMap { export interface MetroMap {
branch: Branch; branch: Branch;
settings: Settings
} }
export class Map implements MetroMap { export class Map implements MetroMap {
branch: Branch; branch: Branch;
settings: Settings
private yMax: number;
private draw; private draw;
public constructor(branch: Branch) { public constructor(branch: Branch, settings: Settings) {
this.draw = SVG().addTo('#map') this.draw = SVG().addTo('#map')
this.branch = branch this.branch = branch
this.settings = settings
this.yMax = (this.settings.height - 50) / 4
} }
public setBranch(branch: Branch) { public setBranch(branch: Branch) {
this.branch = branch this.branch = branch
} }
public setSettings(settings: Settings) {
this.settings = settings
}
private getTextPosition(up: boolean): number { private getTextPosition(up: boolean): number {
if (up) { if (up) {
return yMax - 60; return this.yMax - 60;
} else { } else {
return yMax + 60; return this.yMax + 60;
} }
} }
@ -41,6 +49,7 @@ export class Map implements MetroMap {
} else { } else {
cy = scy - (i + 1) * 50 cy = scy - (i + 1) * 50
} }
this.draw.circle(40).fill(stations[i].branch.color).cx(cx).cy(cy) 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); let text = this.draw.text(stations[i].branch.number.toString()).fill('white').font({ size: 28}).cx(cx).cy(cy);
@ -65,12 +74,12 @@ export class Map implements MetroMap {
for (let i = 0; i < stations.length; i++) { for (let i = 0; i < stations.length; i++) {
let cx = last + stations[i].step; let cx = last + stations[i].step;
if (stations[i].connectedStations.length > 0) { if (stations[i].connectedStations.length > 0) {
this.draw.circle(50).fill(this.branch.color).cx(cx).cy(yMax) this.draw.circle(50).fill(this.branch.color).cx(cx).cy(this.yMax)
this.draw.circle(25).fill('white').cx(cx).cy(yMax) this.draw.circle(25).fill('white').cx(cx).cy(this.yMax)
this.drawConnectedStations(stations[i].connectedStations, stations[i].up, cx, yMax); this.drawConnectedStations(stations[i].connectedStations, stations[i].up, cx, this.yMax);
} else { } else {
this.draw.rect(15, 50).fill(this.branch.color).cx(cx).cy(yMax) this.draw.rect(15, 50).fill(this.branch.color).cx(cx).cy(this.yMax)
} }
let textPosition: number = this.getTextPosition(stations[i].up) let textPosition: number = this.getTextPosition(stations[i].up)
@ -84,7 +93,10 @@ export class Map implements MetroMap {
} }
public build() { public build() {
this.draw = this.draw.size(window.innerWidth, (window.innerHeight-50) / 2); const lineMax = this.settings.width - 200;
this.yMax = (this.settings.height - 50) / 4
this.draw = this.draw.size(this.settings.width, this.yMax * 2);
this.draw.clear(); this.draw.clear();
this.draw.circle(50).fill(this.branch.color).cx(50).cy(50) this.draw.circle(50).fill(this.branch.color).cx(50).cy(50)
@ -96,16 +108,13 @@ export class Map implements MetroMap {
}) })
let naming = this.draw.text(this.branch.name).font({ size: 35}); let naming = this.draw.text(this.branch.name).font({ size: 35});
naming.cx(50 + 40 + (naming.bbox().width / 2)).cy(50); naming.cx(90 + (naming.bbox().width / 2)).cy(50);
naming.font({ naming.font({
family: 'NTSomic', family: 'NTSomic',
weight: '750', weight: '750',
}) })
const lineMax = window.innerWidth - 200; let line = this.draw.line(200, this.yMax, lineMax, this.yMax)
const yMax = (window.innerHeight-50) / 4;
let line = this.draw.line(200, yMax, lineMax, yMax)
line.stroke({ color: this.branch.color, width: 16}) line.stroke({ color: this.branch.color, width: 16})
this.drawStations(this.branch.stations) this.drawStations(this.branch.stations)

View file

@ -7,7 +7,7 @@ export interface StationInterface {
step: number; step: number;
} }
export class Station implements StationInterface { export class Station implements StationInterface {
name: string; name: string;
up: boolean; up: boolean;
connectedStations: Array<ConnectedStation> connectedStations: Array<ConnectedStation>

19
src/models/settings.ts Normal file
View file

@ -0,0 +1,19 @@
export interface BaseSettings {
height: number;
width: number;
}
export class Settings implements BaseSettings {
height: number;
width: number;
constructor(width?: number, height?: number) {
this.width = width || window.innerWidth;
this.height = (height || (window.innerHeight / 2)) * 2;
}
public setValues(width?: number, height?: number) {
this.width = width || this.width;
this.height = height || this.height;
}
}

View file

@ -4,3 +4,15 @@
font-family: NTSomic; font-family: NTSomic;
src: url(./assets/NTSomic-Bold.ttf); src: url(./assets/NTSomic-Bold.ttf);
} }
*, .settings {
overflow: hidden;
}
.map, svg {
overflow-x: auto;
}
.v-btn {
margin-bottom: 1em;
}