You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We are excited to announce that 🚀 Svelvet v8.0 🚀 has been released!
With this update, we are introducing several requested features, enhancing performance, and updating the documentation to provide example usecases of Svelvet.
An accessible, flexible input component that directly interfaces with Svelvet’s custom input and output stores. It can be controlled via keyboard input, arrow keys, scroll, and click and drag.
We have added an example of using Svelvet as a Database Visualizer. And plan to expand on this section to include more use cases for Svelvet. Want to showcase an example of how you're using Svelvet on our website? Reach out to the team with your project here!
Composable Edges
Custom Edge components can now be passed as children to Anchor and Node components, allowing developers to set props and labels for Edges based on context. As before, these Edge components do not represent connections, but are rather abstract representations of the type and style of Edge to be rendered. When connections are made via props or during runtime, an instance of this component will be rendered.
Performance Optimizations
When rendering out Nodes that are passed fixed sizes via props and have not been made resizable via the resizable flag or the Resizer component, developers can now render hundreds more Nodes than was previously possible.
Component Instance Binding
The Anchor and Node components now feature exported stores and functions available via component instance binding. As an example, to update or read the position of a Node programmatically, bind to the particular Node component using bind:this={myNodeVariable} and access the position store via myNodeVariable.position. Standard Svelte store syntax applies.
Check out our website (www.svelvet.io) to learn more about Svelvet!
The Svelvet team works hard to add new features to this Svelte library and will continue to do so. If you enjoy our product, give us a star 🌟 on GitHub (we’re so close to 2k!) and follow us on LinkedIn for updates. Your support is greatly appreciated!
Discussions
We’re using Discussions as a place to connect with other members of our community. We hope that you:
Ask questions you’re wondering about.
💡 Share ideas.
🌱 Engage with other community members.
🤝 Welcome others and are open-minded. Remember that this is a community webuild together 💪.
To get started, comment below with an introduction of yourself and tell us about what you do with this community!
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
We are excited to announce that 🚀 Svelvet v8.0 🚀 has been released!
With this update, we are introducing several requested features, enhancing performance, and updating the documentation to provide example usecases of Svelvet.
Drawer Component
An optional drag-and-drop component that can create default and custom Nodes, Anchors, and Edges as props and add them to the canvas via the UI.
Knob Component
An accessible, flexible input component that directly interfaces with Svelvet’s custom input and output stores. It can be controlled via keyboard input, arrow keys, scroll, and click and drag.
An Examples Section in the Documentation
We have added an example of using Svelvet as a Database Visualizer. And plan to expand on this section to include more use cases for Svelvet. Want to showcase an example of how you're using Svelvet on our website? Reach out to the team with your project here!
Composable Edges
Custom Edge components can now be passed as children to Anchor and Node components, allowing developers to set props and labels for Edges based on context. As before, these Edge components do not represent connections, but are rather abstract representations of the type and style of Edge to be rendered. When connections are made via props or during runtime, an instance of this component will be rendered.
Performance Optimizations
When rendering out Nodes that are passed fixed sizes via props and have not been made resizable via the resizable flag or the Resizer component, developers can now render hundreds more Nodes than was previously possible.
Component Instance Binding
The Anchor and Node components now feature exported stores and functions available via component instance binding. As an example, to update or read the position of a Node programmatically, bind to the particular Node component using bind:this={myNodeVariable} and access the position store via myNodeVariable.position. Standard Svelte store syntax applies.
Check out our website (www.svelvet.io) to learn more about Svelvet!
The Svelvet team works hard to add new features to this Svelte library and will continue to do so. If you enjoy our product, give us a star 🌟 on GitHub (we’re so close to 2k!) and follow us on LinkedIn for updates. Your support is greatly appreciated!
Discussions
We’re using Discussions as a place to connect with other members of our community. We hope that you:
Ask questions you’re wondering about.
To get started, comment below with an introduction of yourself and tell us about what you do with this community!
Beta Was this translation helpful? Give feedback.
All reactions