[Bug Report]: 【框选】插件和【动态分组】插件 交互问题

[chenshitz]

发生了什么？

框选多个节点 至 动态分组节点中，无法将所选节点加入到动态分组节点下

2025-02-18.10.19.33.mov

复现代码如下

<template>
  <el-card header="Graph">
    <el-divider content-position="left">节点面板</el-divider>
    <div class="flex-wrapper">
      <div class="circle" @mousedown="handleDragCircle" />
      <div class="rect" @mousedown="handleDragRect" />
      <div class="text" @mousedown="handleDragText">文本</div>
    </div>
    <el-divider />
    <div ref="containerRef" id="graph" class="viewport"></div>
    <TeleportContainer :flow-id="flowId" />
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import LogicFlow from '@logicflow/core'
import { register, getTeleport } from '@logicflow/vue-node-registry'
import '@logicflow/core/es/index.css'

import ProgressNode from '@/components/LFElements/ProgressNode.vue'

import { DynamicGroup, dynamicGroup, DynamicGroupNodeModel, SelectionSelect } from '@logicflow/extension'
import '@logicflow/extension/lib/style/index.css'

const lfRef = ref<LogicFlow | null>(null)
const containerRef = ref<HTMLDivElement | null>(null)
const flowId = ref('')
const TeleportContainer = getTeleport()

LogicFlow.use(SelectionSelect)

onMounted(() => {
  if (containerRef.value) {
    const lf = new LogicFlow({
      container: containerRef.value,
      grid: true,
      stopMoveGraph: true,
      plugins: [DynamicGroup]
    })
    lf.register({
      type: 'GroupNode',
      model: CustomGroupModel,
      view: CustomGroup
    })
    register(
      {
        type: 'custom-vue-node',
        component: ProgressNode
      },
      lf
    )
    lf.render({})

    lf.openSelectionSelect()

    lfRef.value = lf
  }
})

const handleDragRect = () => {
  lfRef?.value?.dnd.startDrag({
    type: 'GroupNode'
  })
}
const handleDragCircle = () => {
  lfRef?.value?.dnd.startDrag({
    type: 'circle',
    r: 25
  })
}
const handleDragText = () => {
  lfRef?.value?.dnd.startDrag({
    type: 'custom-vue-node'
  })
}

class CustomGroup extends dynamicGroup.view {}

class CustomGroupModel extends DynamicGroupNodeModel {
  initNodeData(data: any) {
    super.initNodeData(data)
  }
}
</script>

<style>
.flex-wrapper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.viewport {
  height: 350px;
  position: relative;
  overflow: hidden;
}

.el-button + .el-button {
  margin-left: 0;
}

*:focus {
  outline: none;
}

.rect {
  width: 50px;
  height: 50px;
  background: #fff;
  border: 2px solid #000;
}

.circle {
  width: 50px;
  height: 50px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50%;
}

.uml-wrapper {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: rgb(255 242 204);
  border: 1px solid rgb(214 182 86);
  border-radius: 10px;
}

.uml-head {
  font-weight: bold;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

.uml-body {
  padding: 5px 10px;
  font-size: 12px;
  border-top: 1px solid rgb(214 182 86);
  border-bottom: 1px solid rgb(214 182 86);
}

.uml-footer {
  padding: 5px 10px;
  font-size: 14px;
}

/* 输入框字体大小和设置的大小保持一致，自动换行输入和展示保持一致 */

.lf-text-input {
  font-size: 12px;
}

.buttons {
  position: absolute;
  z-index: 1;
}

.button-list {
  display: flex;
  align-items: center;
}
</style>

似乎是 分组节点没有监听 框选多节点拖拽事件

logicflow/core版本

2.0.10

logicflow/extension版本

2.0.14

logicflow/engine版本

No response

浏览器&环境

Chrome