From ce7da33df5bf89283a2988b4b45c3d85b52805b2 Mon Sep 17 00:00:00 2001
From: boyongjiong <boyongjiong@outlook.com>
Date: Wed, 27 Nov 2024 11:32:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20vue3-app=20?=
 =?UTF-8?q?=E4=B8=AD=20Performance=20=E6=A8=A1=E5=9D=97=E4=B8=AD=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vue3-app/src/views/PerformanceNode.vue    | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/examples/vue3-app/src/views/PerformanceNode.vue b/examples/vue3-app/src/views/PerformanceNode.vue
index 748d148a8..e2b894187 100644
--- a/examples/vue3-app/src/views/PerformanceNode.vue
+++ b/examples/vue3-app/src/views/PerformanceNode.vue
@@ -6,13 +6,13 @@
           <span>操作栏</span>
           <el-input v-model="domNumber"></el-input>
           <el-button type="primary" @click="addElementNode(domNumber)">添加Element节点</el-button>
-          <el-button type="primary" @click="addEchartNode(domNumber)">添加Echart节点</el-button>
+          <el-button type="primary" @click="addEChartNode(domNumber)">添加Echart节点</el-button>
           <el-button type="primary" @click="addDomNumber(domNumber, true)"
             >添加个节点和边:</el-button
           >
           <el-button type="primary" @click="addDomNumber(domNumber, false)">只添加节点:</el-button>
-          <span>elment元素数量：{{ elementNumber }}</span>
-          <span>Echart元素数量：{{ echartNumber }}</span>
+          <span>element元素数量：{{ elementNumber }}</span>
+          <span>EChart元素数量：{{ eChartNumber }}</span>
           <span>节点数量：{{ nodeNumber }}</span>
           <span>边数量：{{ edgeNumber }}</span>
           <span>Total DOM elements: {{ totalDOMNumber }}</span>
@@ -26,24 +26,26 @@
 
 <script setup lang="ts">
 import { ref, onMounted, nextTick, reactive } from 'vue'
+import { ElNotification } from 'element-plus'
 import LogicFlow from '@logicflow/core'
 import { register } from '@logicflow/vue-node-registry'
+
 import ElementNode from '@/components/UILibrary/ElementNode.vue'
 import EchartNode from '@/components/UILibrary/EchartNode.vue'
 import DomNumber from '@/components/dom/DomNumber.vue'
+
 // import { startObservingLongTasks } from '@/utils/performance'
 import { getTotalDOMNumber } from '@/utils/performance'
 import { getRandom } from '@/utils/math'
-import { ElNotification } from 'element-plus'
 
 const containerRef = ref<HTMLDivElement | null>(null)
 const lfRef = ref<LogicFlow | null>(null)
 const elementNumber = ref<number>(0)
-const echartNumber = ref<number>(0)
+const eChartNumber = ref<number>(0)
 const totalDOMNumber = ref<number>(0)
 const eventType = ref<undefined | string>()
 const nodeNumber = ref<number>(0)
-const domNumber = ref<number>(0)
+const domNumber = ref<number>(10)
 const edgeNumber = ref<number>(0)
 const id = ref<number>(0)
 
@@ -74,8 +76,8 @@ const addElementNode = (number: number) => {
   }
 }
 
-// 添加 Echart 元素
-const addEchartNode = (number: number) => {
+// 添加 EChart 元素
+const addEChartNode = (number: number) => {
   for (let i = 0; i < +number; i++) {
     lfRef.value &&
       lfRef.value.addNode({
@@ -87,7 +89,7 @@ const addEchartNode = (number: number) => {
           height: 2000
         }
       })
-    echartNumber.value++
+    eChartNumber.value++
     nextTick(() => {
       totalDOMNumber.value = getTotalDOMNumber()
     })
@@ -184,7 +186,8 @@ onMounted(() => {
   if (containerRef.value) {
     lfRef.value = new LogicFlow({
       container: containerRef.value,
-      grid: true
+      grid: true,
+      allowResize: true
     })
 
     // 注册 element 组件库节点