Parasitic on:connection events are firing when connections created programatically (not manually) through Anchors' props

[kkarpeev]

Hello! There is a problem as described in topic, ver 8.
I have Nodes with Anchors (and connections) rendered inside #each block depending on data prop from outside. So when I draw connections I need to update the data. And when connections are rendered on:connection events are fired. I think, it is wrong, because we already know about components we render, but what's worse is that we cannot distinguish between events fired for already created anchor connections (by rerendering Nodes and Anchors if changed) and those we creating manually. Can't imagine a case when we need to catch on:connection for already created connections, maybe there are some, dunno.
But if you don't want to remove these firings, can you, please, at least add some flag to distinguish a manual anchor connection from a programatically created from outside?

[j6k4m8]

Agreed — ideally this wouldn't catch programmatic edges at all, but flag is definitely a fine option!

[fdsgdshn]

Hello,

This problem unfortunately still persists, and I am encountering a similar issue. I don't understand why edges created programmatically trigger the on:connections event. Even when I refresh the page on Localbrowser, the on:connections event is reactivated. I wasn't successful in using a flag because every time the model starts from the beginning, the on:connections event keeps getting triggered, and I cannot distinguish whether the edge connections were created manually or programmatically. Does anyone have a solution for this?

[brsc2909]

@fdsgdshn This is how i'm working around it. Not great but it works

  const onconnection = async (connectionEvent: CustomEvent) => {
    const nodes = data.nodes

    const connection = connectionEvent.detail

    let output: string
    let input: string

    if (connection.sourceAnchor.type == 'output') {
      output = connection.sourceAnchor.node.id
      input = connection.targetAnchor.node.id
    } else {
      input = connection.sourceAnchor.node.id
      output = connection.targetAnchor.node.id
    }

    output = output.replace('N-', '')
    input = input.replace('N-', '')

    let inputNode = nodes.find((t) => t.id === input)
    let outputNode = nodes.find((t) => t.id === output)

    // don't do anything if one of the nodes doesnt exist
    if (!inputNode || !outputNode) {
      return
    }

    // this function gets run when the canvas is being build so we want to avoid making db calls for every connection on every page refresh
    if (inputNode.inputs.find((n: { id: string }) => n.id === output)) {
      return
    }

   await doAction(`?/link`, { input, output }, () => {})
      .catch(console.error)
      .finally(() => {
        saving = false
      })
  }