<template>
  <div class="center" style="position: absolute;right: 1%;bottom: 2%;width: 350px;height: 50px">
    <div class="click" @click="handleRound" style="background: url('/data/round.png') no-repeat center/70%;width: 50px;height: 50px"></div>
    <div class="click" @click="handleFull" style="background: url('/data/full.png') no-repeat center/70%;width: 50px;height: 50px"></div>
  </div>
</template>

<script>
import {fullscreenToggel} from "../../../../util/util";

export default {
  name: "tools-bar",
  inject: ['screen'],
  methods: {
    handleRound(){
      this.screen.$refs['map'].isRound = !this.screen.$refs['map'].isRound;
      this.screen.$refs['map'].round();
    },
    handleFull(){
      fullscreenToggel();
    }
  },
}
</script>

<style scoped>
    .full{
      width: 100%;
      height: 100%;
    }
    .center{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .click:hover{
      cursor: pointer;
      transform: translate(2px,2px);
    }
</style>
