diff --git a/index.html b/index.html index dde16aa..3f6bc4f 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,8 @@ - - Vite + Vue + TS + + Metro Map Maker
diff --git a/package.json b/package.json index 6ef7dbe..ce63eda 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "@mdi/font": "^7.4.47", "@svgdotjs/svg.js": "^3.2.0", "@vueuse/core": "^10.9.0", "pinia": "^2.1.7", @@ -17,6 +18,7 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^4.5.2", + "material-design-icons-iconfont": "^6.7.0", "typescript": "^5.2.2", "vite": "^5.0.8", "vue-tsc": "^1.8.25" diff --git a/src/App.vue b/src/App.vue index 9dac396..cdcd407 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,56 +8,89 @@ import {Station} from "./models/map/station.ts"; import {ConnectedStation} from "./models/map/connectedStation.ts"; import {ExtraBranch} from "./models/map/extraBranch.ts"; -import {set, useEventListener} from '@vueuse/core' +import {useEventListener} from '@vueuse/core' import {Settings} from "./models/settings.ts"; -import {defineStore} from "pinia"; const element = ref() const xcord = ref(0); const ycord = ref(0); -const mapWidth = ref(window.innerWidth); -const mapHeight = ref(window.innerHeight / 2); - useEventListener(element, 'click', (evt) => { xcord.value = evt.offsetX; ycord.value = evt.offsetY; }) +import StationsTable from "./components/StationsTable.vue"; +import NewStation from "./components/NewStation.vue"; +import BaseSettings from "./components/BaseSettings.vue"; + +import {useStore} from './utils/store.ts'; +const store = useStore() let branch: Branch = new Branch('','', -1, []) -let settings: Settings = new Settings(mapWidth.value, mapHeight.value); +let settings: Settings = new Settings(store.width, store.height); let map: Map; -const useStore = defineStore('branch', { - state: () => { - return { - name: 'Тест', - number: 1, - color: '#0078BE', - stations: [] - } - }, -}) - -// @ts-ignore -const store = useStore() - onMounted(() => { + store.stations = [ + {'name': 'Начало', 'up': true, 'connectedStations': [], 'step': 0}, + {'name': 'Конец', 'up': true, 'connectedStations': [], 'step': store.width - 400} + ] + map = new Map(branch, settings); build(); }) +function importFile() { + let element = document.getElementById('fileInput'); + element.click(); +} + +function setFile(event) { + const reader = new FileReader(); + reader.addEventListener('load', (readEvent) => { + if (typeof readEvent.target.result === "string") { + let importedStore = JSON.parse(readEvent.target.result); + + store.name = importedStore.name; + store.width = importedStore.width; + store.height = importedStore.height; + store.color = importedStore.color; + store.number = importedStore.number; + store.stations = importedStore.stations; + + build(); + } + }); + reader.readAsText(event.target.files[0]); +} + +function save () { + let text = JSON.stringify(store); + let filename = 'metroMap.json'; + let element = document.createElement('a'); + element.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(text)); + element.setAttribute('download', filename); + + element.style.display = 'none'; + document.body.appendChild(element); + + element.click(); + document.body.removeChild(element); +} + function build () { let stations = []; + store.stations = store.stations.sort((a,b) => a.step - b.step); + for (let station of store.stations) { let connectedStations = []; - for (let connected in station['connectedStations']) { + for (let connected of station['connectedStations']) { let extraBranch: ExtraBranch = new ExtraBranch(connected['branch']['color'], connected['branch']['number']); let extraStation: ConnectedStation = new ConnectedStation(connected['name'], extraBranch); @@ -70,7 +103,7 @@ function build () { } let branch: Branch = new Branch(store.name,store.color, store.number, stations) - let settings: Settings = new Settings(mapWidth.value, mapHeight.value); + let settings: Settings = new Settings(store.width, store.height); map.setSettings(settings) map.setBranch(branch) @@ -88,90 +121,25 @@ function build () {

Основные настройки


-
-
    -
  • -

    Ширина схемы:

    - -
    • -
  • -

    Высота схемы:

    - -
    • -
  • -

    Линия:

    - - - - - -
    • -
-
+ -

Основные настройки

+

Станции


-
-
    -
  • -

    Ширина схемы:

    - -
    • -
  • -

    Высота схемы:

    - -
    • -
  • -

    Ветка:

    -
    • -
-
+ +
+

Управление


- Импорт + Импорт Экспорт - Сохранить + Сохранить Предпросмотр + +

Курсор: ({{ xcord }}; {{ ycord }})

diff --git a/src/components/BaseSettings.vue b/src/components/BaseSettings.vue new file mode 100644 index 0000000..b6c9486 --- /dev/null +++ b/src/components/BaseSettings.vue @@ -0,0 +1,67 @@ + + + + + \ No newline at end of file diff --git a/src/components/NewStation.vue b/src/components/NewStation.vue new file mode 100644 index 0000000..ed8fac8 --- /dev/null +++ b/src/components/NewStation.vue @@ -0,0 +1,113 @@ + + + + + \ No newline at end of file diff --git a/src/components/StationsTable.vue b/src/components/StationsTable.vue new file mode 100644 index 0000000..aeededf --- /dev/null +++ b/src/components/StationsTable.vue @@ -0,0 +1,143 @@ + + + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index ba59659..8b787cf 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,3 +1,5 @@ +import '@mdi/font/css/materialdesignicons.css' + import { createApp } from 'vue' import './style.css' @@ -9,13 +11,14 @@ import 'vuetify/styles' import { createVuetify } from 'vuetify' import * as components from 'vuetify/components' import * as directives from 'vuetify/directives' + import {createPinia} from "pinia"; const pinia = createPinia() const vuetify = createVuetify({ components, - directives, + directives }) createApp(App).use(vuetify).use(pinia).mount('#app') \ No newline at end of file diff --git a/src/style.css b/src/style.css index 499b6af..5ece585 100644 --- a/src/style.css +++ b/src/style.css @@ -11,6 +11,7 @@ .map, svg { overflow-x: auto; + cursor: crosshair; } .v-btn { @@ -19,4 +20,9 @@ center { padding: 10px; +} + +.v-slider-thumb, .v-slider-thumb__surface, .v-slider-thumb__ripple, .v-expansion-panel, .v-expansion-panel-title, +.v-expansion-panel-title__overlay, .v-expansion-panel__shadow, h2 { + overflow: hidden; } \ No newline at end of file diff --git a/src/utils/store.ts b/src/utils/store.ts new file mode 100644 index 0000000..4ba3afb --- /dev/null +++ b/src/utils/store.ts @@ -0,0 +1,14 @@ +import {defineStore} from "pinia"; + +export const useStore = defineStore('branch', { + state: () => { + return { + name: 'Тест', + number: 1, + color: '#0078BE', + stations: [], + width: window.innerWidth, + height: window.innerHeight / 2 + } + }, +}) \ No newline at end of file