框选功能

@@ -105,6 +105,11 @@ const router = createRouter({
       name: 'mini-map',
       name: 'mini-map',
       component: () => import('../views/mini-map/index.vue')
       component: () => import('../views/mini-map/index.vue')
     },
     },
+    {
+      path: '/selection-select',
+      name: 'selection-select',
+      component: () => import('../views/selection-select/index.vue')
+    },
   ]
   ]
 })
 })
 
 

 <!--
 <!--
  * @Date: 2025-03-10 14:37:31
  * @Date: 2025-03-10 14:37:31
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-13 20:52:22
+ * @LastEditTime: 2025-03-13 21:58:47
  * @FilePath: /logic-flow2/src/views/home.vue
  * @FilePath: /logic-flow2/src/views/home.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -25,6 +25,7 @@
   <el-button type="primary" @click="goTo('adv-dnd-panel')">adv-dnd-panel</el-button>
   <el-button type="primary" @click="goTo('adv-dnd-panel')">adv-dnd-panel</el-button>
   <el-button type="primary" @click="goTo('adv-dnd-panel-custom')">adv-dnd-panel-custom</el-button>
   <el-button type="primary" @click="goTo('adv-dnd-panel-custom')">adv-dnd-panel-custom</el-button>
   <el-button type="primary" @click="goTo('mini-map')">mini-map</el-button>
   <el-button type="primary" @click="goTo('mini-map')">mini-map</el-button>
+  <el-button type="primary" @click="goTo('selection-select')">selection-select</el-button>
 </template>
 </template>
 
 
 <script setup>
 <script setup>

+<template>
+  <div class="container">
+    <div ref="container" class="flow-container"></div>
+    <div class="control-panel">
+      <el-button
+        @click="handleOpenSelectionSelectOnce"
+        :disabled="isSelectionSelectOpen"
+      >单次框选</el-button>
+      <el-button
+        @click="handleOpenSelectionSelect"
+        :disabled="isSelectionSelectOpen"
+      >开启框选</el-button>
+      <el-button
+        @click="handleCloseSelectionSelect"
+        :disabled="!isSelectionSelectOpen"
+      >关闭框选</el-button>
+      <el-checkbox v-model="isWholeEdge">边全选</el-checkbox>
+      <el-checkbox v-model="isWholeNode">节点全选</el-checkbox>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import LogicFlow from '@logicflow/core';
+import { SelectionSelect } from "@logicflow/extension";
+
+const container = ref(null);
+let lf = null;
+
+const isSelectionSelectOpen = ref(false);
+const isWholeEdge = ref(true);
+const isWholeNode = ref(true);
+
+// 监听全选模式变化
+watch([isWholeEdge, isWholeNode], () => {
+  if (lf) {
+    const selectionSelect = lf.extension.selectionSelect;
+    selectionSelect.setSelectionSense(isWholeEdge.value, isWholeNode.value);
+  }
+});
+
+// 单次框选
+const handleOpenSelectionSelectOnce = () => {
+  if (lf) {
+    const selectionSelect = lf.extension.selectionSelect;
+    // 开启框选功能
+    selectionSelect.openSelectionSelect();
+    isSelectionSelectOpen.value = true;
+    // 添加全局样式
+    document.body.style.cursor = 'crosshair';
+    // 框选操作结束后关闭框选功能
+    lf.once('selection:selected', () => {
+      selectionSelect.closeSelectionSelect();
+      isSelectionSelectOpen.value = false;
+      // 移除全局样式
+      document.body.style.cursor = 'default';
+    });
+  }
+};
+
+// 开启框选
+const handleOpenSelectionSelect = () => {
+  if (lf) {
+    const selectionSelect = lf.extension.selectionSelect;
+    selectionSelect.openSelectionSelect();
+    isSelectionSelectOpen.value = true;
+    // 添加全局样式
+    document.body.style.cursor = 'crosshair';
+  }
+};
+
+// 关闭框选
+const handleCloseSelectionSelect = () => {
+  if (lf) {
+    const selectionSelect = lf.extension.selectionSelect;
+    selectionSelect.closeSelectionSelect();
+    isSelectionSelectOpen.value = false;
+    // 移除全局样式
+    document.body.style.cursor = 'default';
+  }
+};
+
+onMounted(() => {
+  lf = new LogicFlow({
+    container: container.value,
+    grid: true,
+    plugins: [SelectionSelect],
+  });
+
+  lf.on('selection:selected-area', ({ topLeft, bottomRight }) => {
+    console.log('get selection area:', topLeft, bottomRight);
+  });
+
+  lf.render({
+    nodes: [
+      { id: 'node1', type: 'rect', x: 200, y: 200 },
+      { id: 'node2', type: 'circle', x: 400, y: 200 },
+    ],
+    edges: [{ id: 'edge1', sourceNodeId: 'node1', targetNodeId: 'node2' }],
+  });
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.flow-container {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.control-panel {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: flex;
+  gap: 10px;
+}
+
+/* 添加新的全局样式类 */
+:global(.lf-selection-select) {
+  cursor: crosshair !important;
+}
+
+/* 确保框选区域也使用相同的鼠标样式 */
+:global(.lf-selection-select-rect) {
+  cursor: crosshair !important;
+}
+</style>