Skip to content

Commit 86d8f72

Browse files
jacobsjojacobsjo
authored
Merge pull request #84 from ugudango/main
Add toggle functionality for biome filters.
2 parents 3b79d2f + 0cfd155 commit 86d8f72

File tree

6 files changed

+68
-28
lines changed

6 files changed

+68
-28
lines changed

‎locales/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"datapack_list.remove_datapack.title": "Remove pack",
6262
"menu.add.title": "Add Pack",
6363
"menu.search_biome.title": "Search Biome",
64+
"menu.search_biome.toggle": "Toggle Biome Filter",
6465
"menu.structure_positions.title": "Structure Positions",
6566
"menu.reload_datapacks.title": "Reload Packs",
6667
"dropdown.add.zip": "Open Pack or Mod",

‎src/MapLayers/BiomeLayer.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,10 @@ export class BiomeLayer extends L.GridLayer {
6565
})
6666

6767

68-
watch(this.searchStore.biomes, () => {
69-
this.rerender()
68+
watch([this.searchStore.biomes, () => this.searchStore.disabled], ([biomes, disabled], [oldBiomes, oldDisabled]) => {
69+
// Do not re-render if no biomes were filtered, regardless of the disabled state
70+
if (oldDisabled !== disabled && oldBiomes.size === 0 && biomes.size === 0) return
71+
this.rerender()
7072
})
7173

7274
watch(do_hillshade, () => {
@@ -123,7 +125,10 @@ export class BiomeLayer extends L.GridLayer {
123125
for (let z = 0; z < this.tileSize * this.calcResolution; z++) {
124126
const biome = tile.array[x + 1][z + 1].biome
125127

126-
if (this.searchStore.biomes.size > 0 && !this.searchStore.biomes.has(biome)) {
128+
if (this.searchStore.biomes.size > 0
129+
&& !this.searchStore.biomes.has(biome)
130+
&& !this.searchStore.disabled
131+
) {
127132
continue
128133
}
129134

‎src/components/MenuButtons.vue‎

Lines changed: 51 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,21 @@ function reload(event: MouseEvent){
2222
datapackStore.$patch({})
2323
}
2424
25-
function clearBiomeSearch(event: Event){
25+
function toggleBiomeSearch() {
26+
searchStore.disabled = !searchStore.disabled
27+
searchStore.$patch({})
28+
}
29+
30+
function clearBiomeSearch() {
2631
searchStore.biomes.clear()
2732
searchStore.$patch({})
2833
searchBiomeDropdownOpen.value = false
29-
event.preventDefault()
3034
}
3135
32-
function clearStructureSearch(event: Event){
36+
function clearStructureSearch() {
3337
searchStore.structures.clear()
3438
searchStore.$patch({})
3539
structureDropdownOpen.value = false
36-
event.preventDefault()
3740
}
3841
3942
@@ -51,20 +54,30 @@ function clearStructureSearch(event: Event){
5154
@click="openDropdownOpen = true"
5255
@keypress.enter="openDropdownOpen = true"
5356
/>
54-
<font-awesome-icon
55-
icon="fa-magnifying-glass"
56-
class="button"
57-
tabindex="0"
58-
:class="{
59-
open: searchBiomeDropdownOpen,
60-
active: searchStore.biomes.size > 0
61-
}"
62-
:title="$t('menu.search_biome.title')"
63-
@click="searchBiomeDropdownOpen = true"
64-
@keypress.enter="searchBiomeDropdownOpen = true"
65-
@contextmenu="clearBiomeSearch"
66-
@dblclick="clearBiomeSearch"
67-
/>
57+
<span class="group-button" :class="{active: !searchStore.disabled}">
58+
<font-awesome-icon
59+
icon="fa-magnifying-glass"
60+
class="button"
61+
tabindex="0"
62+
:class="{
63+
open: searchBiomeDropdownOpen,
64+
active: searchStore.biomes.size > 0
65+
}"
66+
:title="$t('menu.search_biome.title')"
67+
@click="searchBiomeDropdownOpen = true"
68+
@keypress.enter="searchBiomeDropdownOpen = true"
69+
@contextmenu.prevent="clearBiomeSearch"
70+
@dblclick.prevent="clearBiomeSearch"
71+
/>
72+
<font-awesome-icon
73+
v-if="searchStore.biomes.size > 0"
74+
:icon="!searchStore.disabled ? 'fa-toggle-on' : 'fa-toggle-off'"
75+
class="button transparent"
76+
tabindex="0"
77+
:title="$t('menu.search_biome.toggle')"
78+
@click.prevent="toggleBiomeSearch"
79+
/>
80+
</span>
6881
<font-awesome-icon
6982
icon="fa-location-dot"
7083
class="button"
@@ -76,8 +89,8 @@ function clearStructureSearch(event: Event){
7689
:title="$t('menu.structure_positions.title')"
7790
@click="structureDropdownOpen = true"
7891
@keypress.enter="structureDropdownOpen = true"
79-
@contextmenu="clearStructureSearch"
80-
@dblclick="clearStructureSearch"
92+
@contextmenu.prevent="clearStructureSearch"
93+
@dblclick.prevent="clearStructureSearch"
8194
/>
8295

8396
<font-awesome-icon v-if="settingsStore.dev_mode" icon="fa-rotate-right" class="button" tabindex="0" :title="$t('menu.reload_datapacks.title')" @click="reload" @keypress.enter="reload" />
@@ -138,7 +151,25 @@ function clearStructureSearch(event: Event){
138151
139152
.button.active:hover {
140153
background-color: rgb(168, 192, 30);
154+
}
155+
156+
.button.transparent {
157+
background-color: transparent;
158+
}
159+
160+
.button.transparent:hover {
161+
background-color: transparent;
162+
}
163+
164+
.group-button {
165+
display: flex;
166+
flex-direction: row;
167+
border-radius: 0.5rem;
168+
background-color: rgb(88, 88, 88);
169+
}
141170
171+
.group-button.active {
172+
background-color: rgb(77, 87, 23);
142173
}
143174
144175
.spacer {

‎src/components/dropdown/FindBiomeDropdown.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@ function toggleBiome(biome: Identifier){
1515
} else {
1616
searchStore.biomes.add(biome.toString())
1717
}
18-
searchStore.$patch({}) // call $subscribe, not sure why this is necessary
18+
searchStore.$patch({disabled: false})
1919
}
2020
2121
function disableGroup(group: string){
2222
[...searchStore.biomes].forEach(biome => {
2323
if (biome.startsWith(group + ":"))
2424
searchStore.biomes.delete(biome)
2525
});
26+
searchStore.$patch({disabled: false})
2627
}
2728
2829
function getColorString(biome: Identifier){

‎src/main.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { createI18n } from 'vue-i18n'
33
import { createPinia } from 'pinia'
44
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
55
import { library } from "@fortawesome/fontawesome-svg-core";
6-
import { faFileZipper, faFolderOpen, faXmark, faRotateRight, faPlus, faBars, faMagnifyingGlass, faLocationDot, faAngleRight, faAngleDown, faDice, faGlobe, faEarthEurope, faMountainSun, faWater, faArrowsDownToLine, faTableCells, faCircleQuestion } from "@fortawesome/free-solid-svg-icons";
6+
import { faFileZipper, faFolderOpen, faXmark, faRotateRight, faPlus, faBars, faMagnifyingGlass, faToggleOn, faToggleOff, faLocationDot, faAngleRight, faAngleDown, faDice, faGlobe, faEarthEurope, faMountainSun, faWater, faArrowsDownToLine, faTableCells, faCircleQuestion } from "@fortawesome/free-solid-svg-icons";
77
import './style.css'
88
import App from './App.vue'
99

@@ -13,7 +13,7 @@ import { registerSW } from 'virtual:pwa-register'
1313

1414
registerSW({ immediate: true })
1515

16-
library.add(faFileZipper, faFolderOpen, faXmark, faRotateRight, faPlus, faBars, faMagnifyingGlass, faLocationDot, faAngleRight, faAngleDown, faDice, faGlobe, faEarthEurope, faMountainSun, faWater, faArrowsDownToLine, faTableCells, faCircleQuestion);
16+
library.add(faFileZipper, faFolderOpen, faXmark, faRotateRight, faPlus, faBars, faMagnifyingGlass, faToggleOn, faToggleOff, faLocationDot, faAngleRight, faAngleDown, faDice, faGlobe, faEarthEurope, faMountainSun, faWater, faArrowsDownToLine, faTableCells, faCircleQuestion);
1717

1818

1919
const uri = window.location.search.substring(1)

‎src/stores/useBiomeSearchStore.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { Identifier, StructurePlacement, StructureSet, WorldgenStructure } from "deepslate";
22
import { defineStore } from "pinia";
3-
import { computed, reactive } from "vue";
3+
import { computed, reactive, ref } from "vue";
44

55

66
export const useSearchStore = defineStore('search', () => {
77
const biomes = reactive<Set<string>>(new Set())
88
const structures = reactive<Set<string>>(new Set())
99

10+
const disabled = ref(false)
11+
1012
const structure_sets = computed(() => {
1113
structures.size // make sure any change to structures triggers recomputation
1214
const sets: Identifier[] = []
@@ -39,5 +41,5 @@ export const useSearchStore = defineStore('search', () => {
3941
return {sets, has_invalid: has_invalid_set}
4042
})
4143

42-
return {biomes, structures, structure_sets}
44+
return {biomes, structures, structure_sets, disabled}
4345
})

0 commit comments

Comments
 (0)