BPMN view: remove radio buttons

src/components/Discover/Map/SidebarState.vue

@@ -201,7 +201,8 @@
                       <input type="radio" name="customRadio" :value="key2" v-model="clickedPathListIndex"
                         class="hidden peer" @click="onPathOptionClick(key2)"
                       />
-                      <span @click="onPathOptionClick(key2)"
+                      <!-- 若為BPMN檢視模式，則不允許點亮路徑 -->
+                      <span v-if="!isBPMNOn" @click="onPathOptionClick(key2)"
                       :class="[
                         'w-[18px] h-[18px] rounded-full border-2 inline-flex items-center justify-center cursor-pointer bg-[#FFFFFF]',
                         clickedPathListIndex === key2
@@ -272,19 +273,29 @@ export default {
     const activeTrace = ref(0);
     const currentMapFile = computed(() => pageAdmin.currentMapFile);
     const clickedPathListIndex = ref(undefined);
+    const isBPMNOn = computed(() => mapPathStore.isBPMNOn);
 
     const onActiveTraceClick = (clickedActiveTraceIndex) => {
+      if(isBPMNOn.value) {
+        return;
+      }
       mapPathStore.clearAllHighlight();
       activeTrace.value = clickedActiveTraceIndex;
       mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
     }
 
     const onPathOptionClick = (clickedPath) => {
+      if(isBPMNOn.value) {
+        return;
+      }
       clickedPathListIndex.value = clickedPath;
       mapPathStore.highlightClickedPath(activeTrace.value, clickedPathListIndex.value);
     };
 
     const onResetTraceBtnClick = () => {
+      if(isBPMNOn.value) {
+        return;
+      }
       clickedPathListIndex.value = undefined;
     }
 
@@ -297,6 +308,7 @@ export default {
       onActiveTraceClick,
       onResetTraceBtnClick,
       activeTrace,
+      isBPMNOn,
       i18next,
     };
   },

src/components/Discover/Map/SidebarView.vue

@@ -10,10 +10,10 @@
         <ul class="space-y-3 mb-4">
           <!-- 選擇 bpmn / processmap button -->
           <li class="btn-toggle-content">
-            <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="switchMapType('processMap')">
+            <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="onProcessMapClick()">
               Process Map
             </span>
-            <span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="switchMapType('bpmn')">
+            <span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="onBPMNClick()">
               BPMN Model
             </span>
           </li>
@@ -70,6 +70,8 @@
 </template>
 
 <script>
+import MapPathStore from '@/stores/mapPathStore';
+import { mapState, mapActions, } from 'pinia';
 export default {
   props: {
     sidebarView: {
@@ -105,6 +107,9 @@ export default {
       rank: 'LR', // 直向 TB | 橫向 LR
     }
   },
+  computed: {
+    ...mapState(MapPathStore, ['isBPMNOn']),
+  },
   methods: {
     /**
      * switch map type
@@ -155,6 +160,15 @@ export default {
       }
       this.$emit('switch-data-layer-type', this.dataLayerType, this.dataLayerOption);
     },
+    onProcessMapClick() {
+      this.setIsBPMNOn(false);
+      this.switchMapType('processMap');
+    },
+    onBPMNClick() {
+      this.setIsBPMNOn(true);
+      this.switchMapType('bpmn');
+    },
+    ...mapActions(MapPathStore, ['setIsBPMNOn',]),
   },
   mounted() {
     this.dataLayerType = 'freq';