forked from geolba/tethys.backend
72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="gba-control-draw btn-group-vertical map-control">
|
||
|
|
<!-- <button type="button" class="button is-light is-small" (click)="locateUser()" [ngClass]="isToggled ? 'is-primary': 'is-active'">
|
||
|
|
<fa-icon [icon]="faSearchLocation"></fa-icon>
|
||
|
|
</button> -->
|
||
|
|
<!-- -->
|
||
|
|
<button
|
||
|
|
ref="inputDraw"
|
||
|
|
class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
|
||
|
|
type="button"
|
||
|
|
:class="[isToggled ? 'cursor-not-allowed bg-gray-200' : 'bg-teal-50 is-active']"
|
||
|
|
@click.prevent="draw"
|
||
|
|
>
|
||
|
|
<BaseIcon v-if="mdiDrawPen" :path="mdiDrawPen" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Component, Vue, Prop } from 'vue-facing-decorator';
|
||
|
|
|
||
|
|
import BaseIcon from '@/Components/BaseIcon.vue';
|
||
|
|
import { mdiDrawPen } from '@mdi/js';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
name: 'zoom-control',
|
||
|
|
components: {
|
||
|
|
BaseIcon,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
export default class DrawControlComponent extends Vue {
|
||
|
|
mdiDrawPen = mdiDrawPen;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Connect map id.
|
||
|
|
*/
|
||
|
|
@Prop() public mapId: string;
|
||
|
|
|
||
|
|
public isToggled = false;
|
||
|
|
|
||
|
|
// @Ref('inputDraw') private _inputDraw: HTMLElement;
|
||
|
|
|
||
|
|
public draw() {
|
||
|
|
this.isToggled = !this.isToggled;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="css">
|
||
|
|
.gba-control-draw {
|
||
|
|
-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: 100px;
|
||
|
|
z-index: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-group-vertical button {
|
||
|
|
display: block;
|
||
|
|
|
||
|
|
margin-left: 0;
|
||
|
|
margin-top: 0.5em;
|
||
|
|
}
|
||
|
|
</style>
|