How to read the new position of nodes after drag

[ak4zh]

When the user moves a node its new position is not getting updated back In the input JSON data.
I have tried to bind it and use stores, but it seems the data update is not supported.

This feature is helpful because I want to render back the same flowchart that the user has customized when he visits the app next time.

I am unable to find this info in the docs.

[sher85]

@ak4zh where are you experiencing this issue, REPL on the selvet.io website? Can you share a screenshot/gif?

[ak4zh]

I want to get the new co-ordinates of the nodes so I can save it in a store and render the samediagram again which user created by dragging the nodes.
I did not find any info about getting the x,y coordinates of the node once it has been dragged by the user.

[ronvoluted]

Looks like Svelvet doesn't support doing this but you can modify one line in node_modules to enable it:

# ./node_modules/svelvet/Nodes/index.svelte#L46

-    if (!moved && node.id == $nodeIdSelected) {
+    if (node.id == $nodeIdSelected) {

Then you can use the clickCallback property:

const handleDrag = (node: Node): void => {
  $positions[node.id] = node.position;
}

const nodes = [
  {
    id: 1,
    width: 100,
    height: 100,
    position: { x: 0, y: 250 },
    data: { label: 'Drag me to save position in Svelte store' },
    clickCallback: handleDrag,
  },
];

[pbxothi]

@ronvoluted thanks for the quick fix. This is useful. However, the callback is not triggered when dragged on a touch screen.

[taylien96]

There is now a way to get the json and upload it with an updated diagram to share changes between users!
Not closed as it's not exactly what you described but we think it may serve your purposes for now.

[franciswillian91]

same problem here, i need to save node locations after dragging and arranging my flow but i don't know how to get those properties once done.
@taylien96 you mentioned that there is a way to do this but i didn't find it.

[gurmeet-bluesheets]

@franciswillian91 I think @taylien96 is referring to this https://www.svelvet.io/docs/importDiagrams/

[gurmeet-bluesheets]

@taylien96 how to handle this in the latest version? We simply cannot ask the users to download and re-upload files. @ronvoluted can you help?

[franciswillian91]

@gurmeet-bluesheets, sure makes sense i didn't discover that feature, mb ;D

[rungdung]

Indeed, I would like a built in way to persist diagrams or documentation on how to retrieve it from the store

[briangregoryholmes]

Closing as this has fundamentally changed in Svelvet v7 and up. That said, smoothing out the DX is an active area for us. The position prop can be "bound" to using bind:position for programatic read/write access.