window settings

package.json

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

src/App.vue

@@ -1,12 +1,42 @@
 <script setup lang="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(() => {
+  map = new Map(branch, settings);
+
+  build();
+})
+
+function build () {
   let extraBranch1: ExtraBranch = new ExtraBranch( "#EF161E", 1)
   let extraStation1: ConnectedStation = new ConnectedStation("Библиотека\nимени Ленина", extraBranch1)
 
@@ -17,19 +47,79 @@ onMounted(() => {
   let extraStation9: ConnectedStation = new ConnectedStation("Боровицкая", extraBranch9)
 
   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 map: Map = new Map(branch)
+  let settings: Settings = new Settings(mapWidth.value, mapHeight.value);
+
+  map.setSettings(settings)
+  map.setBranch(branch)
 
   map.build()
-})
+}
 </script>
 
 <template>
   <div>
-    <div class="map" id="map"></div>
+    <div class="map" id="map" ref="element"></div>
     <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>
 </template>

src/models/map.ts

@@ -1,35 +1,43 @@
 // @ts-ignore
 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 {
     branch: Branch;
+    settings: Settings
 }
 
 export class Map implements MetroMap {
     branch: Branch;
+    settings: Settings
 
+    private yMax: number;
     private draw;
 
-    public constructor(branch: Branch) {
+    public constructor(branch: Branch, settings: Settings) {
         this.draw = SVG().addTo('#map')
         this.branch = branch
+        this.settings = settings
+        this.yMax = (this.settings.height - 50) / 4
     }
 
     public setBranch(branch: Branch) {
         this.branch = branch
     }
 
+    public setSettings(settings: Settings) {
+        this.settings = settings
+    }
+
     private getTextPosition(up: boolean): number {
         if (up) {
-            return yMax - 60;
+            return this.yMax - 60;
         } else {
-            return yMax + 60;
+            return this.yMax + 60;
         }
     }
 
@@ -41,6 +49,7 @@ export class Map implements MetroMap {
             } 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);
@@ -65,12 +74,12 @@ export class Map implements MetroMap {
         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(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 {
-                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)
@@ -84,7 +93,10 @@ export class Map implements MetroMap {
     }
 
     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.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});
-        naming.cx(50 + 40 + (naming.bbox().width / 2)).cy(50);
+        naming.cx(90 + (naming.bbox().width / 2)).cy(50);
         naming.font({
             family: 'NTSomic',
             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})
 
         this.drawStations(this.branch.stations)

src/models/map/station.ts

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

src/models/settings.ts

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

src/style.css

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