Something went wrong on our end
-
Florent Lavelle authoredFlorent Lavelle authored
EditingToolbar.vue 3.45 KiB
<template>
<div class="editionToolbar">
<div v-if="showDrawTool">
<div class="leaflet-bar">
<a
class="leaflet-draw-draw-polygon active"
: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
:class="{ active: isEditing }"
@click="update"
>
<i class="edit outline icon" />
<span class="sr-only">Modifier l'objet</span>
</a>
<a
:class="{ active: isDeleting }"
@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,
isEditing: false,
isDeleting: false
};
},
computed: {
showDrawTool() {
return this.editionService && this.editionService.editing_feature === undefined;
},
},
watch: {
showDrawTool(newValue) {
if (!newValue && !this.isEditing && !this.isDeleting) {
this.isEditing = true;
}
}
},
methods: {
update() {
editionService.activeUpdateFeature();
this.isDeleting = false;
this.isEditing = true;
},
deleteObj() {
editionService.activeDeleteFeature();
this.isEditing = false;
this.isDeleting = true;
},
}
};
</script>
<style lang="less" scoped>
.editionToolbar{
position: absolute;
top: 80px;
right: 6px;
border: 2px solid rgba(0,0,0,.2);
border-radius: 4px;
background-clip: padding-box;
padding: 0;
}
.leaflet-bar {
a:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
a:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom: none;
}
a, .leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
a {
background-color: #fff;
width: 30px;
height: 30px;
display: block;
text-align: center;
text-decoration: none;
color: black;
i {
margin: 0;
vertical-align: middle;
}
}
.active {
background-color: rgba(255, 145, 0, 0.904);
color: #fff;
i {
font-weight: bold;
}
img {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(282deg) brightness(105%) contrast(100%);
}
}
.list-image-type {
height: 20px;
vertical-align: middle;
margin: 5px 0 5px 0;
}
a:hover {
cursor: pointer !important;
background-color: #ebebeb !important;
}
a:focus {
background-color: #ebebeb !important;
}
}
</style>