reset map trace button

This commit is contained in:
Cindy Chang
2024-08-26 09:42:55 +08:00
parent b5d5b1456d
commit 26295d5b55
3 changed files with 17 additions and 6 deletions

View File

@@ -157,13 +157,17 @@
</ul>
</div>
<div>
<ul class="text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2">
<ul class="trace-buttons text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2">
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(0)" :class="activeTrace === 0? 'text-primary border-primary':''">Self-Loop</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(1)" :class="activeTrace === 1? 'text-primary border-primary':''">Short-Loop</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(2)" :class="activeTrace === 2? 'text-primary border-primary':''">Shortest Trace</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(3)" :class="activeTrace === 3? 'text-primary border-primary':''">Longest Trace</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(4)" :class="activeTrace === 4? 'text-primary border-primary':''">Most Frequent Trace</li>
</ul>
<div class="reset-trace-button underline text-[#4E5969] text-[14px] flex justify-end cursor-pointer
font-semibold" @click="onResetTraceBtnClick">
{{ i18next.t("Map.Reset") }}
</div>
<div>
<TabView ref="tabview2" v-model:activeIndex="activeTrace">
<TabPanel header="Self-loop" contentClass="text-sm">
@@ -267,18 +271,23 @@ export default {
const activeTrace = ref(0);
const currentMapFile = computed(() => pageAdmin.currentMapFile);
const clickedPathListIndex = ref(0);
const clickedPathListIndex = ref(undefined);
const onActiveTraceClick = (clickedActiveTraceIndex) => {
mapPathStore.clearAllHighlight();
activeTrace.value = clickedActiveTraceIndex;
mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
}
const onPathOptionClick = (clickedPath) => {
clickedPathListIndex.value = clickedPath;
mapPathStore.highlightClickedPath(activeTrace.value, clickedPathListIndex.value);
};
const onResetTraceBtnClick = () => {
clickedPathListIndex.value = undefined;
}
return {
currentMapFile,
i18next,
@@ -286,7 +295,9 @@ export default {
clickedPathListIndex,
onPathOptionClick,
onActiveTraceClick,
onResetTraceBtnClick,
activeTrace,
i18next,
};
},
data() {