add export json function

AmyangXYZ · Feb 1, 2024 · 3003023 · 3003023
1 parent 4979a7f
commit 3003023
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/src/components/TopoEditToolbox.vue b/src/components/TopoEditToolbox.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, toRefs } from 'vue'
 import { Network, SignalEditTopology, SignalAddNode, SignalUpdateLinks } from '@/hooks/useStates'
-import { Check, Plus, Switch, Sort } from '@element-plus/icons-vue'
+import { Check, Plus, Switch, Sort, Share } from '@element-plus/icons-vue'
 import { NODE_TYPE } from '@/core/typedefs'
 
 const nodeType = ref(0)
@@ -53,13 +53,25 @@ const finishEdit = () => {
   Network.StartWebWorkers()
   SignalEditTopology.value = !SignalEditTopology.value
 }
+const exportTopo = () => {
+  const link: HTMLAnchorElement = document.createElement('a')
+  const topo = {
+    nodes: Network.Nodes.value.map(({ id, type, pos }) => ({ id, type, pos })),
+    links: []
+  }
+  link.href = URL.createObjectURL(new Blob([JSON.stringify(topo)], { type: 'application/json' }))
+  link.setAttribute('download', 'topology.json')
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
 </script>
 
 <template>
   <el-card class="card p-4">
     <div class="flex-container">
       <span class="label-margin">Load preset:</span>
-      <el-select class="dropdown" v-model="Network.SelectedTopo.value" style="width: 175px; text-align-last: center">
+      <el-select class="dropdown" v-model="Network.SelectedTopo.value" style="width: 162px; text-align-last: center">
         <el-option v-for="(_, name) in Network.PresetTopos" :key="name" :label="name" :value="name" />
       </el-select>
     </div>
@@ -72,24 +84,28 @@ const finishEdit = () => {
         </el-option-group>
       </el-select>
 
-      <el-button class="circular-button" @click="addNode" type="primary" :icon="Plus" circle />
+      <el-button size="small" @click="addNode" type="primary" :icon="Plus" circle />
     </div>
 
     <div class="flex-container">
       <span class="label-margin">Connect</span>
       <el-input v-model="nodeId1" placeholder="v1" class="node-input" style="margin-right: -35px" />
       <el-input v-model="nodeId2" placeholder="v2" class="node-input" />
-      <el-button class="circular-button" @click="connect" type="info" :icon="Sort" circle />
+      <el-button size="small" @click="connect" type="info" :icon="Sort" circle />
     </div>
 
     <div class="flex-container">
       <span class="label-margin">Auto-Connect</span>
-      <el-button class="circular-button" @click="autoConnect" type="info" :icon="Switch" circle />
+      <el-button size="small" @click="autoConnect" type="info" :icon="Switch" circle />
     </div>
 
     <div class="flex-container">
       <span class="label-margin">Finish</span>
-      <el-button class="circular-button" @click="finishEdit" type="danger" :icon="Check" circle />
+      <el-button size="small" @click="finishEdit" type="danger" :icon="Check" circle />
+    </div>
+    <div class="flex-container">
+      <span class="label-margin">Export</span>
+      <el-button size="small" @click="exportTopo" type="success" :icon="Share" circle />
     </div>
   </el-card>
 </template>
@@ -114,17 +130,9 @@ const finishEdit = () => {
   line-height: 25px;
   height: 25px;
 }
-.circular-button {
-  border-radius: 50%;
-  width: 30px;
-  height: 30px;
-}
-.button-margin {
-  margin-left: 8px;
-}
+
 .node-input {
   display: flex;
-  width: 60px;
-  margin-left: 10px;
+  width: 40px;
 }
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -20,7 +20,7 @@ import EventLogs from '@/components/EventLogs.vue'
   <MenuBar style="position: absolute; top: 16px; left: 16px; width: 150px; z-index: 999" />
   <TopoEditToolbox
     v-show="SignalEditTopology"
-    style="position: absolute; top: 48px; left: 16px; width: 320px; z-index: 999"
+    style="position: absolute; top: 48px; left: 16px; width: 300px; z-index: 999"
   />
   <ControlPanel style="position: absolute; top: 16px; left: 40%; min-width: 336px; width: 20%; z-index: 999" />
   <EventLogs style="position: absolute; left: 16px; z-index: 999" />