<template> <div class="editionToolbar"> <div v-if="showDrawTool"> <div class="leaflet-bar"> <a class="leaflet-draw-draw-polygon" :title=" editionService.geom_type === 'polygon' ? 'Dessiner un polygone' : editionService.geom_type === 'linestring' ? 'Dessiner une ligne' : 'Dessiner un point' " > <img v-if="editionService.geom_type === 'linestring'" class="list-image-type" src="@/assets/img/line.png" > <img v-if="editionService.geom_type === 'point'" class="list-image-type" src="@/assets/img/marker.png" > <img v-if="editionService.geom_type === 'polygon'" class="list-image-type" src="@/assets/img/polygon.png" > </a> </div> </div> <div v-if="!showDrawTool"> <div class="leaflet-bar"> <a @click="update"> <i class="edit outline icon" /> <span class="sr-only">Modifier l'objet</span></a> <a @click="deleteObj"> <i class="trash alternate outline icon" /> <span class="sr-only">Supprimer l'objet</span></a> </div> </div> </div> </template> <script> import editionService from '@/services/edition-service'; export default { name: 'EditingToolbar', data() { return { editionService: editionService, }; }, computed: { showDrawTool() { return this.editionService && this.editionService.editing_feature === undefined; } }, mounted() { }, methods: { update(){ editionService.activeUpdateFeature(); }, deleteObj(){ editionService.activeDeleteFeature(); }, } }; </script> <style scoped> .editionToolbar{ position: absolute; top: 80px; right: 5px; } .leaflet-bar { border: 2px solid rgba(0,0,0,.2); background-clip: padding-box; padding: 0; border-radius: 2px; } .leaflet-bar a:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } .leaflet-bar a:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-bottom: none; } .leaflet-bar a, .leaflet-control-layers-toggle { background-position: 50% 50%; background-repeat: no-repeat; display: block; } .leaflet-bar a { background-color: #fff; width: 30px; height: 30px; display: block; text-align: center; text-decoration: none; color: black; } .leaflet-bar a > i { margin: 0; vertical-align: middle; } .list-image-type { height: 20px; vertical-align: middle; margin: 5px 0 5px 0; } .leaflet-bar a:hover { cursor: pointer; background-color: #ebebeb; } .leaflet-bar a:focus { background-color: #ebebeb; } </style>