BPMN view: remove radio buttons

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';