LogicFlow icon indicating copy to clipboard operation
LogicFlow copied to clipboard

[Bug Report]: 移除动态分组中子节点并删除动态分组节点后,选中子节点报错

Open Ra1nfull opened this issue 6 months ago • 1 comments

发生了什么?

移除动态分组中子节点后删除动态分组节点,再选中原来的子节点会报错

<script>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";
import { DynamicGroup, Menu, SelectionSelect } from "@logicflow/extension";

export default {
  data: () => ({
    lf: null,
  }),
  mounted() {
    this.lf = new LogicFlow({
      container: this.$refs.container,
      grid: true,
      plugins: [DynamicGroup, Menu, SelectionSelect],
      pluginsOptions: {
        selectionSelect: {
          exclusiveMode: false,
        },
      },
      keyboard: {
        enabled: false
      },
      guards: {
        beforeDelete(data) {
          console.log('beforeDelete', data)
          return false
        }
      }
    });
    this.lf.render({
      nodes: [
        {
          id: 'circle_1',
          type: 'circle',
          x: 502,
          y: 170,
          text: {
            value: 'circle_1',
            x: 502,
            y: 170,
            draggable: true,
          },
        },
        {
          id: 'circle_2',
          type: 'circle',
          x: 680,
          y: 170,
          text: {
            value: 'circle_2',
            x: 680,
            y: 170,
            draggable: true,
          },
        },
        {
          id: 'dynamic-group_1',
          type: 'dynamic-group',
          x: 542,
          y: 189,
          text: 'dynamic-group_1',
          resizable: true,
          properties: {
            width: 420,
            height: 250,
            radius: 5,
          },
        },
      ]
    });
    const groupModel = this.lf.getNodeModelById('dynamic-group_1')
    groupModel.addChild('circle_1')
    groupModel.addChild('circle_2')
    this.lf.openSelectionSelect()
  },
  methods: {
    cancelGroup() {
      const selectedNodes = this.lf.getSelectElements(true)
      const filterDynamicGroupNodes = selectedNodes.nodes.filter(item => item.type === "dynamic-group")
      if (!filterDynamicGroupNodes || !filterDynamicGroupNodes.length) {
        return false
      } else {
        filterDynamicGroupNodes.forEach(item => {
          const groupModel = this.lf.getNodeModelById(item.id)
          item.children.forEach(node => {
            groupModel.removeChild(node)
          })

          this.lf.graphModel.deleteNode(groupModel.id)
        })
      }
    }
  }
};
</script>

<template>
  <div class="container" ref="container"></div>

  <div class="tools">
    <button @click="cancelGroup">去除分组</button>
  </div>
</template>
<style>
.container {
  width: 1000px;
  height: 500px;
}

.tools {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>
Image 原因:移除动态分组中的子节点时,并没有正确处理nodeGroupMap中的映射关系

logicflow/core版本

2.0.13 2.0.16

logicflow/extension版本

2.0.18 2.0.21

logicflow/engine版本

No response

浏览器&环境

Chrome

Ra1nfull avatar Jul 09 '25 07:07 Ra1nfull

有解决吗 我也遇到该问题

yuanquanWh avatar Oct 12 '25 09:10 yuanquanWh