tethys.backend/resources/js/Components/Map/zoom.component.vue
Arno Kaimbacher a744ae7e5b - npm updates, remove rxjs
- add draw.component.vue
- only load needed leaflet classes into map.component.vue an Submitter/Create.vue
- rename js/store.Map.ts to js/Stores/map.service.ts
-
2023-04-06 18:56:41 +02:00

113 lines
3.2 KiB
Vue

<template>
<div class="gba-control-zoom btn-group-vertical">
<button
ref="inputPlus"
class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
type="button"
@click.prevent="zoomIn"
>
<BaseIcon v-if="mdiPlus" :path="mdiPlus" />
</button>
<button
ref="inputMinus"
class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
type="button"
@click.prevent="zoomOut"
>
<BaseIcon v-if="mdiMinus" :path="mdiMinus" />
</button>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Ref } from 'vue-facing-decorator';
import { MapService } from '@/Stores/map.service';
import BaseIcon from '@/Components/BaseIcon.vue';
import { mdiPlus, mdiMinus } from '@mdi/js';
@Component({
name: 'zoom-control',
components: {
BaseIcon,
},
})
export default class ZoomControlComponent extends Vue {
mdiPlus = mdiPlus;
mdiMinus = mdiMinus;
/**
* Connect map id.
*/
@Prop() public mapId: string;
@Ref('inputPlus') private _inputPlus: HTMLElement;
@Ref('inputMinus') private _inpuMinus: HTMLElement;
mapService = MapService();
map;
// mounted() {
// let map = (this.map = this.mapService.getMap(this.mapId));
// map.on('zoomend zoomlevelschange', this.updateDisabled, this);
// }
// unmounted() {
// this.map.off('zoomend zoomlevelschange');
// }
public zoomIn() {
let map = this.mapService.getMap(this.mapId);
map && map.zoomIn();
}
public zoomOut() {
let map = this.mapService.getMap(this.mapId);
map && map.zoomOut();
}
public updateDisabled() {
let map = this.mapService.getMap(this.mapId);
// let className = 'leaflet-disabled';
// this._inputPlus.nativeElement.disabled = false;
this._inputPlus.setAttribute('aria-disabled', 'false');
// this._inpuMinus.nativeElement.disabled = false;
this._inpuMinus.setAttribute('aria-disabled', 'false');
if (map.getZoom() === map.getMinZoom()) {
// this._inpuMinus.nativeElement.disabled = true;
this._inpuMinus.setAttribute('aria-disabled', 'true');
}
if (map.getZoom() === map.getMaxZoom()) {
// this._inputPlus.nativeElement.disabled = true;
this._inputPlus.setAttribute('aria-disabled', 'true');
}
}
}
</script>
<style lang="css">
.gba-control-zoom {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
border-radius: 4px;
position: absolute;
left: 10px;
top: 10px;
z-index: 500;
}
.btn-group-vertical button {
display: block;
margin-left: 0;
margin-top: 0.5em;
}
</style>