I want to try to detect loops when I create an edge, but when I use MAP to store data, it doesn't update in time, I don't know what's wrong, can you help me?

[ThisSeanZhang]

I want to try to detect loops when I create an edge,
but when I use MAP to store data, it doesn't update in time, 😢
I don't know what's wrong, can you help me? 🙏

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { useNotification } from 'naive-ui';
import { useVueFlow, VueFlow } from '@vue-flow/core'
import { SentenceManager } from '../../lib/session';
import FlowNode from './FlowNode.vue'
const notification = useNotification();

const edge_map = new Map()
function find_root(id: string, map: Map<string, string>): string {
  let root_id = id;
  console.log(`start root check: ${JSON.stringify(edge_map)}`)
  while (map.get(root_id) != undefined) {
    root_id = map.get(root_id) ?? root_id
  }
  return root_id
}
const props = defineProps(['show', 'sentence_manager'])
const emit = defineEmits(['update:show'])
const sentence_manager = computed<SentenceManager>(() => props.sentence_manager)

const show = computed({
  get() {
    if (props.show) {
      flush_element();
    }
    return props.show
  },
  set(value) {
    emit('update:show', value)
  }
})

const { 
  onConnect,
  onEdgeUpdate,
  onEdgeUpdateStart,
  onEdgeUpdateEnd,

  addEdges,
  updateEdge,
  removeEdges,
} = useVueFlow({})

onConnect((params: any) => {
  // console.log(params)
  if (params.sourceHandle == null ||params.sourceHandle == undefined ) {
    return ;
  }
  if ((params.sourceHandle as string).endsWith('top')) {
    notification.error({
      duration: 3000,
      content: `Wires can only be connected from the bottom`
    })
    return ;
  }
  if ((params.targetHandle as string).endsWith('bottom')) {
    notification.error({
      duration: 3000,
      content: `The target can only be the upper edge of the node`
    })
    return ;
  }

  console.log(`before check: ${JSON.stringify(edge_map)}`)
  const source_root = find_root(params.source as string, edge_map);
  const target_root = find_root(params.target as string, edge_map);
  
  console.log(source_root)
  console.log(target_root)
  if (source_root == target_root) {
    notification.error({
      duration: 3000,
      content: `Cannot be linked in a loop`
    })
    return ;
  }
  params.updatable = true

  addEdges([params])
  edge_map.set(params.target, params.source)
  console.log(`set in map: ${JSON.stringify(edge_map)}`)
  console.log(edge_map)
  console.log('onConnect')
})
let isEdgeUpdateSuccessful = false
onEdgeUpdateStart(() => {
  isEdgeUpdateSuccessful = false
  console.log('onEdgeUpdateStart')
})
onEdgeUpdate(({ edge, connection }) => {
  isEdgeUpdateSuccessful = true
  updateEdge(edge, connection)

  console.log('onEdgeUpdate')
})

onEdgeUpdateEnd(({ edge }) => {
  if (!isEdgeUpdateSuccessful) removeEdges([edge.id])

  console.log('onEdgeUpdateEnd')
})
const elements = ref<any[]>([])
function flush_element () {
  elements.value = [];
  edge_map.clear()
  for (const [key, value] of sentence_manager.value.id_map) {
    elements.value.push({
      id: value.id,
      label: value.text,
      position: { x: 0, y: 0},
    })
    if (value.parent != '') {
      const id = `${value.parent}_${value.id}`;
      edge_map.set(value.id, value.parent);
      elements.value.push({
        id,
        source: value.parent,
        target: value.id,
      })
    }
  }
}

const defaultNodeStyle = {
  border: '1px solid #10b981',
  background: '#ef467e',
  color: 'white',
  borderRadius: '99px',
}

</script>
<template>
<n-drawer
    v-model:show="show"
    width="100%"
    height="100%"
    placement="top"
    :trap-focus="false"
    :block-scroll="false"
    to="#drawer-target"
  >
  <n-drawer-content body-content-style="padding:0;" title="会话图" closable>
    <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example" >
      <template #node-toolbar="nodeProps">
        <FlowNode :data="nodeProps.data" :label="nodeProps.label" />
      </template>
    </VueFlow>
  </n-drawer-content>
</n-drawer>
</template>
<style scoped>

</style>

[bcakmakoglu]

What do you mean exactly it doesn't update in time?

The code isn't really to clear on what is supposed to happen tbh.

But I guess you want to avoid having loops?

Something like this should work

onConnect((params) => {
  const sourceNodeEdges = getConnectedEdges([{ id: params.source }], edges.value)
  const isLoop = sourceNodeEdges.some((edge) => edge.target === params.source)

  if (!isLoop) {
    addEdges([params])
  }
})

Here's a sandbox.

[ThisSeanZhang]

Thank you ! ! !
Sorry, My description is not clear enough.
I mean, when I add edge to Map immediately and print immediately, map is still empty.
When the console prints the pointer(I'm not sure if it's called that), it does have a value.

I forked & modified your sandbox code

[ThisSeanZhang]

I try the code...

Here's a sandbox.

====
But this can be inefficient....