Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert more components to composition api

Browse Source
This commit is contained in:
James Lyne 2021-09-08 15:20:04 +01:00
parent 1b9a3e4f1a
commit 56470790de
9 changed files with 144 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/SvgIcon.vue
View File

@ -15,45 +15,47 @@
-->
<template>
<svg :class="className" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<title v-if="title">{{ title }}</title>
<use :xlink:href="iconPath"/>
</svg>
<svg :class="className" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<title v-if="title">{{ title }}</title>
<use :xlink:href="iconPath"/>
</svg>
</template>
<script>
import {computed} from "vue";
export default {
name: 'svg-icon',
name: 'svg-icon',
props: {
name: {
type: String,
required: true
},
props: {
name: {
type: String,
required: true
},
title: {
type: String,
default: null
}
},
title: {
type: String,
default: null
}
},
computed: {
iconPath() {
return `#icon--${this.name}`;
},
setup(props) {
const iconPath = computed(() => `#icon--${props.name}`),
className = computed(() => `svg-icon svg-icon--${props.name}`);
className() {
return 'svg-icon svg-icon--' + this.name;
}
}
return {
iconPath,
className
}
}
};
</script>
<style>
.svg-icon {
pointer-events: none;
fill: currentColor;
height: 24px;
width: 24px;
}
.svg-icon {
pointer-events: none;
fill: currentColor;
height: 24px;
width: 24px;
}
</style>

79
src/components/map/layer/MarkerSetLayer.vue
View File

@ -22,7 +22,7 @@
</template>
<script lang="ts">
import {defineComponent, computed} from "@vue/runtime-core";
import {defineComponent, computed, onMounted, onUnmounted} from "@vue/runtime-core";
import {useStore} from "@/store";
import Areas from "@/components/map/vector/Areas.vue";
import Circles from "@/components/map/vector/Circles.vue";
@ -31,6 +31,7 @@ import Markers from "@/components/map/vector/Markers.vue";
import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
import LiveAtlasLayerGroup from "@/leaflet/layer/LiveAtlasLayerGroup";
import {LiveAtlasMarkerSet} from "@/index";
import {watch} from "vue";
export default defineComponent({
components: {
@ -63,57 +64,45 @@ export default defineComponent({
priority: props.markerSet.priority,
});
watch(props.markerSet, newValue => {
if(newValue && layerGroup) {
layerGroup.update({
id: props.markerSet.id,
minZoom: props.markerSet.minZoom,
maxZoom: props.markerSet.maxZoom,
showLabels: props.markerSet.showLabels || store.state.components.markers.showLabels,
priority: props.markerSet.priority,
});
if(newValue.hidden) {
props.leaflet.getLayerManager()
.addHiddenLayer(layerGroup, newValue.label, props.markerSet.priority);
} else {
props.leaflet.getLayerManager()
.addLayer(layerGroup, true, newValue.label, props.markerSet.priority);
}
}
}, {deep: true});
onMounted(() => {
if(props.markerSet.hidden) {
props.leaflet.getLayerManager()
.addHiddenLayer(layerGroup, props.markerSet.label, props.markerSet.priority);
} else {
props.leaflet.getLayerManager()
.addLayer(layerGroup, true, props.markerSet.label, props.markerSet.priority);
}
});
onUnmounted(() => props.leaflet.getLayerManager().removeLayer(layerGroup));
return {
markerSettings,
layerGroup,
}
},
watch: {
markerSet: {
handler(newValue) {
if(newValue && this.layerGroup) {
this.layerGroup.update({
id: this.markerSet.id,
minZoom: this.markerSet.minZoom,
maxZoom: this.markerSet.maxZoom,
showLabels: this.markerSet.showLabels || useStore().state.components.markers.showLabels,
priority: this.markerSet.priority,
});
if(newValue.hidden) {
this.leaflet.getLayerManager()
.addHiddenLayer(this.layerGroup, newValue.label, this.markerSet.priority);
} else {
this.leaflet.getLayerManager()
.addLayer(this.layerGroup, true, newValue.label, this.markerSet.priority);
}
}
},
deep: true,
}
},
mounted() {
if(this.markerSet.hidden) {
this.leaflet.getLayerManager()
.addHiddenLayer(this.layerGroup, this.markerSet.label, this.markerSet.priority);
} else {
this.leaflet.getLayerManager()
.addLayer(this.layerGroup, true, this.markerSet.label, this.markerSet.priority);
}
},
unmounted() {
this.leaflet.getLayerManager().removeLayer(this.layerGroup);
},
render() {
return null;
}
})
</script>
<style scoped>
</style>

40
src/components/map/layer/PlayersLayer.vue
View File

@ -20,7 +20,7 @@
<script lang="ts">
import PlayerMarker from "@/components/map/marker/PlayerMarker.vue";
import {defineComponent, computed, watch} from "@vue/runtime-core";
import {defineComponent, computed, watch, onMounted, onUnmounted} from "@vue/runtime-core";
import {useStore} from "@/store";
import {LayerGroup} from 'leaflet';
import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
@ -50,6 +50,23 @@ export default defineComponent({
watch(playerCount, (newValue) => playerPane.classList.toggle('no-animations', newValue > 150));
onMounted(() => {
if(!componentSettings.value!.hideByDefault) {
props.leaflet.getLayerManager().addLayer(
layerGroup,
true,
store.state.components.playerMarkers!.layerName,
componentSettings.value!.layerPriority);
} else {
props.leaflet.getLayerManager().addHiddenLayer(
layerGroup,
store.state.components.playerMarkers!.layerName,
componentSettings.value!.layerPriority);
}
});
onUnmounted(() => props.leaflet.getLayerManager().removeLayer(layerGroup));
if(playersAboveMarkers.value) {
playerPane.style.zIndex = '600';
}
@ -61,27 +78,6 @@ export default defineComponent({
}
},
mounted() {
const store = useStore();
if(!this.componentSettings!.hideByDefault) {
this.leaflet.getLayerManager().addLayer(
this.layerGroup,
true,
store.state.components.playerMarkers!.layerName,
this.componentSettings!.layerPriority);
} else {
this.leaflet.getLayerManager().addHiddenLayer(
this.layerGroup,
store.state.components.playerMarkers!.layerName,
this.componentSettings!.layerPriority);
}
},
unmounted() {
this.leaflet.getLayerManager().removeLayer(this.layerGroup);
},
render() {
return null;
}

21
src/components/sidebar/CollapsibleSection.vue
View File

@ -39,6 +39,7 @@
import SvgIcon from "@/components/SvgIcon.vue";
import '@/assets/icons/arrow.svg';
import {MutationTypes} from "@/store/mutation-types";
import {computed} from "vue";
export default defineComponent({
name: 'CollapsibleSection',
@ -50,19 +51,17 @@
}
},
computed: {
title(): string {
return useStore().state.messages.toggleTitle;
},
setup(props) {
const store = useStore(),
title = computed(() => store.state.messages.toggleTitle),
collapsed = computed(() => store.state.ui.sidebar.collapsedSections.has(props.name));
collapsed(): boolean {
return useStore().state.ui.sidebar.collapsedSections.has(this.name);
},
},
const toggle = () => store.commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, props.name);
methods: {
toggle() {
useStore().commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, this.name);
return {
title,
collapsed,
toggle
}
}
});

15
src/components/sidebar/ServerList.vue
View File

@ -27,7 +27,7 @@
<script lang="ts">
import ServerListItem from './ServerListItem.vue';
import {defineComponent} from 'vue';
import {computed, defineComponent} from 'vue';
import {useStore} from "@/store";
import CollapsibleSection from "@/components/sidebar/CollapsibleSection.vue";
import RadioList from "@/components/util/RadioList.vue";
@ -40,13 +40,14 @@ export default defineComponent({
ServerListItem
},
computed: {
heading() {
return useStore().state.messages.serversHeading;
},
setup() {
const store = useStore(),
heading = computed(() => store.state.messages.serversHeading),
servers = computed(() => store.state.servers);
servers() {
return useStore().state.servers;
return {
heading,
servers
}
}
});

22
src/components/sidebar/ServerListItem.vue
View File

@ -21,7 +21,7 @@
<script lang="ts">
import {useStore} from "@/store";
import {defineComponent} from 'vue';
import {computed, defineComponent} from 'vue';
import {MutationTypes} from "@/store/mutation-types";
import {LiveAtlasServerDefinition} from "@/index";
@ -34,16 +34,16 @@ export default defineComponent({
}
},
computed: {
currentServer: {
get() {
const store = useStore();
return store.state.currentServer ? store.state.currentServer.id : undefined;
},
set(value: string) {
useStore().commit(MutationTypes.SET_CURRENT_SERVER, value);
}
setup() {
const store = useStore(),
currentServer = computed({
get: () => store.state.currentServer ? store.state.currentServer.id : undefined,
set: (value) => value && store.commit(MutationTypes.SET_CURRENT_SERVER, value)
})
return {
currentServer,
}
},
}
});
</script>

30
src/components/sidebar/WorldList.vue
View File

@ -21,14 +21,14 @@
<RadioList v-if="worlds.size" class="section__content" aria-labelledby="maps-heading">
<WorldListItem :world="world" v-for="[name, world] in worlds" :key="`${prefix}_${currentServer}_${name}`"></WorldListItem>
</RadioList>
<div v-else class="section__content section__skeleton">{{ skeletonWorlds }}</div>
<div v-else class="section__content section__skeleton">{{ skeleton }}</div>
</template>
</CollapsibleSection>
</template>
<script lang="ts">
import WorldListItem from './WorldListItem.vue';
import {defineComponent} from 'vue';
import {computed, defineComponent} from 'vue';
import {useStore} from "@/store";
import CollapsibleSection from "@/components/sidebar/CollapsibleSection.vue";
import RadioList from "@/components/util/RadioList.vue";
@ -48,22 +48,18 @@ export default defineComponent({
}
},
computed: {
heading() {
return useStore().state.messages.worldsHeading;
},
setup() {
const store = useStore(),
heading = computed(() => store.state.messages.worldsHeading),
skeleton = computed(() => store.state.messages.worldsSkeleton),
worlds = computed(() => store.state.worlds),
currentServer = computed(() => store.state.currentServer ? store.state.currentServer.id : undefined);
skeletonWorlds() {
return useStore().state.messages.worldsSkeleton;
},
worlds() {
return useStore().state.worlds;
},
currentServer() {
const store = useStore();
return store.state.currentServer ? store.state.currentServer.id : undefined;
return {
heading,
skeleton,
worlds,
currentServer
}
}
});

23
src/components/sidebar/WorldListItem.vue
View File

@ -32,7 +32,7 @@
<script lang="ts">
import {useStore} from "@/store";
import {defineComponent} from 'vue';
import {computed, defineComponent} from 'vue';
import {MutationTypes} from "@/store/mutation-types";
import SvgIcon from "@/components/SvgIcon.vue";
import "@/assets/icons/block_world_surface.svg";
@ -62,15 +62,18 @@ export default defineComponent({
}
},
computed: {
currentMap: {
get() {
const store = useStore();
return store.state.currentMap ? [store.state.currentWorld!.name, store.state.currentMap.name] : undefined;
},
set(value: string[]) {
useStore().commit(MutationTypes.SET_CURRENT_MAP, {worldName: value[0], mapName: value[1]});
}
setup() {
const store = useStore(),
currentMap = computed({
get: () => store.state.currentMap ? [store.state.currentWorld!.name, store.state.currentMap.name] : undefined,
set: (value) => value && store.commit(MutationTypes.SET_CURRENT_MAP, {
worldName: value[0],
mapName: value[1]
})
});
return {
currentMap
}
}
});

11
src/components/util/RadioList.vue
View File

@ -27,13 +27,14 @@ export default defineComponent({
name: 'RadioList',
setup() {
},
methods: {
onKeydown(e: KeyboardEvent) {
const onKeydown = (e: KeyboardEvent) => {
handleKeyboardEvent(e, Array.from((e.currentTarget as HTMLFieldSetElement).elements) as HTMLElement[])
}
}
return {
onKeydown
}
},
});
</script>