Comments (11)
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.
from svelvet.
@ak4zh where are you experiencing this issue, REPL on the selvet.io website? Can you share a screenshot/gif?
from svelvet.
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.
from svelvet.
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,
},
];
from svelvet.
@ronvoluted thanks for the quick fix. This is useful. However, the callback is not triggered when dragged on a touch screen.
from svelvet.
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.
from svelvet.
@franciswillian91 I think @taylien96 is referring to this https://www.svelvet.io/docs/importDiagrams/
from svelvet.
@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?
from svelvet.
@gurmeet-bluesheets, sure makes sense i didn't discover that feature, mb ;D
from svelvet.
Indeed, I would like a built in way to persist diagrams or documentation on how to retrieve it from the store
from svelvet.
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.
from svelvet.
Related Issues (20)
- Docs with dynamic prop
- Multiple Anchors cause Edge path to always start at the Center of first Anchor
- Is it possible to prevent panning and generally interacting with the Svelvet canvas? HOT 1
- Styles are not applied inside a custom element
- Is it possible to just pass a hex string to the edgeColor prop?
- Click entire custom edge to destroy HOT 1
- how to add nodes and edges programatically HOT 1
- Basic example of new Edge syntax?
- Align snapTo based on Grid dots if grid and snapTo is the same size HOT 2
- Gradient edges based on anchor color HOT 1
- Parasitic on:connection events are firing when connections created programatically (not manually) through Anchors' props HOT 1
- Is there any way to avoid drawer and minimap getting in the bundle?
- Add setting for key shortcut only for moving viewport, without draging nodes HOT 1
- Compatability with Astro
- Custom Input Type
- Subgroup Support?
- Right click menu is buggy
- Tip for svelte components to add Intelliense hover hint for params.
- Importing and Exporting Diagrams HOT 3
- Specify Source Node ID, Source Node Anchor, Target Node ID, Target Node Anchor in Node Connect Function
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelvet.