Connections property is overwritten by Svelvet when attempting to sync user connections

[rungdung]

I'm maintaining a parallel store to sync updates from the user. I was attempting to detect anchor connections through the on:connection event. Then I push the target Node and Anchor Id to the connections property of my parallel store. Svelvet seems to be overwriting on my store.

// $connections is an array of objects that tracks connections via on:connection
// $markupNodes is my parallel store of nodes and their properties

// When user attempts to save
$connections.forEach((connection) => {
        let index = $markupNodes.findIndex(
          (node) => node.id == connection.sourceNodeId
        );

        $markupNodes[index].connections.push([connection.targetNodeId, connection.targetAnchorId]);
        $markupNodes = $markupNodes;

        // $markupNodes[index].connections now returns a null pair: [null, null]
}

<Anchor
        let:linked
        let:connecting
        let:hovering
        outputStore={output}
        key="mapFeature"
        output
        connections={markupNode.connections}
      >
        <CustomAnchor {hovering} {connecting} {linked} label="Data" />
      </Anchor>

This also seems to cause duplicate connections. I realise this is not an expected way of doing this, but I am desperately in need of a saving solution. Thoughts / workarounds?

[briangregoryholmes]

I'm happy to help out here, but I'll need a StackBlitz example. Not clear what you mean by Svelvet "overwriting" something and I don't see on:connection being used in your second code snippet.

[rungdung]

Apologies for not providing a better report. I've replicated it in this StackBlitz.

1. Connect two nodes with the console open
2. Click 'save' and note that saving <nodeId, anchorId> reflects as null in the logged store.

I've annotated the occurrence on the console along with what i call 'overwriting'. If i pass in a constant to the same property, it persists fine, however if i pass in a <nodeId, anchorId>, it reflects as null while logging.

[rungdung]

One workaround seems to be to store to a temporary object while clicking save, and then assigning the temp object to the nodes store. However there is one area of confusion: <nodeID, anchorID> is the format to specify connections. Is it possible to specify the sourceAnchorID as well?

[briangregoryholmes]

I've made a small change to the latest version that may help with this, but I think the larger pattern that I would avoid here is saving your connection data to the same data structure you're using to render out the Nodes. I would save it to localStorage or some other store/variable and only load from that data for the initial render.

I think I've finally settled on the right pattern for enabling this natively, so I hope to have an update out soon.