-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #426 from AgenceBio/feature/cut-border
feat: Ajout de la division d'une parcelle et de la découpe des bordures
- Loading branch information
Showing
10 changed files
with
9,150 additions
and
164 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,201 @@ | ||
| <script setup> | ||
| import { useWindowWidth } from "@/composables/useWindowWidth"; | ||
| import { ref } from "vue"; | ||
| const emit = defineEmits(["editContour", "divide", "cutBorders", "mesure", "delete", "undo", "redo"]); | ||
| const props = defineProps({ | ||
| mode: { | ||
| type: String, | ||
| required: true, | ||
| default: "modif", | ||
| }, | ||
| canUndo: { | ||
| type: Boolean, | ||
| required: true, | ||
| }, | ||
| canRedo: { | ||
| type: Boolean, | ||
| required: true, | ||
| }, | ||
| canDelete: { | ||
| type: Boolean, | ||
| required: true, | ||
| }, | ||
| mesureActive: { | ||
| type: Boolean, | ||
| required: true, | ||
| }, | ||
| }); | ||
| const currentMode = ref(props.mode); | ||
| const windowWidth = useWindowWidth(); | ||
| const selectModif = () => { | ||
| emit("editContour"); | ||
| currentMode.value = "modif"; | ||
| }; | ||
| const selectDivid = () => { | ||
| emit("divide"); | ||
| currentMode.value = "divid"; | ||
| }; | ||
| const selectCutBorders = () => { | ||
| emit("cutBorders"); | ||
| currentMode.value = "cutBorder"; | ||
| }; | ||
| const selectMesure = () => { | ||
| emit("mesure"); | ||
| }; | ||
| const supprimer = () => { | ||
| emit("delete"); | ||
| }; | ||
| const undo = () => { | ||
| emit("undo"); | ||
| }; | ||
| const redo = () => { | ||
| emit("redo"); | ||
| }; | ||
| </script> | ||
|
|
||
| <template> | ||
| <Teleport to=".maplibregl-ctrl-top-left"> | ||
| <div class="command-modif-parcellaire maplibregl-ctrl"> | ||
| <div class="left-buttons"> | ||
| <button | ||
| class="fr-btn fr-btn--tertiary" | ||
| :class="currentMode === 'modif' ? 'selected-button' : ''" | ||
| type="button" | ||
| title="Modifier" | ||
| aria-label="Modifier" | ||
| @click="selectModif()" | ||
| > | ||
| <span class="ri-shape-line" aria-hidden="true" style="font-size: 1.2em"></span> | ||
| <span v-if="windowWidth > 780" class="button-text">Modifier</span> | ||
| </button> | ||
| <button | ||
| class="fr-btn fr-btn--tertiary" | ||
| :class="currentMode == 'divid' ? 'selected-button' : ''" | ||
| type="button" | ||
| title="Diviser" | ||
| aria-label="Diviser" | ||
| @click="selectDivid()" | ||
| > | ||
| <span class="ri-scissors-cut-line" aria-hidden="true" style="font-size: 1.2em"></span> | ||
| <span v-if="windowWidth > 780" class="button-text">Diviser</span> | ||
| </button> | ||
|
|
||
| <button | ||
| class="fr-btn fr-btn--tertiary" | ||
| type="button" | ||
| :class="currentMode === 'cutBorder' ? 'selected-button' : ''" | ||
| title="Découper les bordures" | ||
| aria-label="Découper les bordures" | ||
| @click="selectCutBorders()" | ||
| > | ||
| <span class="fr-icon-crop-line" aria-hidden="true"></span> | ||
| <span v-if="windowWidth > 780" class="button-text">{{ | ||
| windowWidth > 1280 ? "Découper les bordures" : "Bordure" | ||
| }}</span> | ||
| </button> | ||
| <div class="separator"></div> | ||
| </div> | ||
|
|
||
| <div class="right-buttons"> | ||
| <button | ||
| type="button" | ||
| title="Mesurer" | ||
| :class="mesureActive ? 'selected-button' : ''" | ||
| @click="selectMesure()" | ||
| aria-label="Mesurer" | ||
| > | ||
| <span class="ri-ruler-line" aria-hidden="true" style="font-size: 1.5em"></span> | ||
| </button> | ||
| <div class="separator"></div> | ||
| <button type="button" title="Supprimer" aria-label="Supprimer" :disabled="!canDelete" @click="supprimer()"> | ||
| <span class="fr-icon-delete-line" aria-hidden="true" style="font-size: 1.2em"></span> | ||
| </button> | ||
| <button type="button" title="Annuler" aria-label="Annuler" :disabled="!canUndo" @click="undo()"> | ||
| <span class="fr-icon-arrow-go-back-line" aria-hidden="true" style="font-size: 1.2em"></span> | ||
| </button> | ||
| <button type="button" title="Rétablir" aria-label="Rétablir" :disabled="!canRedo" @click="redo()"> | ||
| <span class="fr-icon-arrow-go-forward-line" aria-hidden="true" style="font-size: 1.2em"></span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </Teleport> | ||
| </template> | ||
|
|
||
| <style> | ||
| .command-modif-parcellaire { | ||
| display: inline-flex; | ||
| justify-content: space-between; | ||
| padding: 6px 4px; | ||
| box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1); | ||
| background-color: #fff; | ||
| } | ||
| .left-buttons { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 2px; | ||
| } | ||
| .right-buttons { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 2px; | ||
| margin-left: 8px; | ||
| } | ||
| .separator { | ||
| width: 1px; | ||
| height: 24px; | ||
| background-color: #ddd; | ||
| margin: 0 4px; | ||
| } | ||
| .left-buttons button:not(:disabled), | ||
| .right-buttons button:not(:disabled) { | ||
| color: #000091; | ||
| } | ||
| .left-buttons button.fr-btn, | ||
| .right-buttons button.fr-btn { | ||
| border: none; | ||
| box-shadow: none; | ||
| } | ||
| .right-buttons button { | ||
| padding: 8px; | ||
| } | ||
| button:hover { | ||
| background-color: #f5f5f5; | ||
| } | ||
| .button-text { | ||
| margin-left: 4px; | ||
| color: #000091; | ||
| font-size: 0.875em; | ||
| } | ||
| @media (min-width: 780px) { | ||
| .maplibregl-ctrl-top-left { | ||
| margin-left: 9% !important; | ||
| margin-top: 20px !important; | ||
| z-index: 1000 !important; | ||
| } | ||
| } | ||
| .selected-button { | ||
| background-color: #ececfe !important; | ||
| } | ||
| .maplibregl-ctrl-top-left .maplibregl-ctrl { | ||
| margin: 0px !important; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { computed, onMounted, onUnmounted, ref } from "vue"; | ||
|
|
||
| export const useWindowWidth = () => { | ||
| const windowWidth = ref(window.innerWidth); | ||
| const width = computed(() => windowWidth.value); | ||
|
|
||
| const onWidthChange = () => (windowWidth.value = window.innerWidth); | ||
| onMounted(() => window.addEventListener("resize", onWidthChange)); | ||
| onUnmounted(() => window.removeEventListener("resize", onWidthChange)); | ||
|
|
||
| return width; | ||
| }; |
Oops, something went wrong.