The saveStore.ts and reloadStore.ts modules work together to manage canvas state by converting and storing the canvas state as a JSON string (saveStore) and retrieving it to rebuild the canvas (reloadStore). In version 11.0, saveStore was enhanced to not only capture nodes but also store their complete properties for accurate reconstruction. Despite these improvements, reloadStore still faces challenges with correctly rebuilding the graph, especially in the createGraph() function. Future work should focus on fixing these issues to ensure proper graph restoration.
In regards to State Management and Reactivity woprk is needed to improve the persistence of graph state across components and ensure reactivity of props (e.g., drawer) and zoom/translation. Focus on fixing edge detection and event dispatching reliability. Further refactor the event system and improve edge handling to ensure a smoother user experience.
Snap-grid functionality was implemented in Svelvet 11 however refinement of the toggling mechanism between free movement and snap-to-grid modes to ensure seamless transitions is needed. Improvements might be needed to handle edge cases or to optimize the grid snapping behavior for various screen sizes and canvas configurations.
While the Svelvet component can now fill the size of its wrapping container, we want to improve the logic about node positioning and canvas scale during window resize events.
We plan on creating additional input/parameter components that integrate with our data flow system and can be used when composing custom Nodes.
We’ve released the Toggle component in version 9.0.0.
A Drawer component was released in version 8.0.0. There is some general work that needs to be done on this component to improve its reliability and consistency.
Allow for custom functions to be run when an Edge connection is started, but not completed. This currently exists on the Svelvet component, but needs to be added to Node and Anchor.
We’d like to add greater configuration of how end-users interact with the canvas, allowing developers to set defaults related to panning, zooming and selection.
It’s a high priority for the Svelvet team that navigating the canvas is accessible for keyboard users. We plan on implementing Node movement and dynamic Edge creation soon.
Improved Step Edge and Resize Rendering When Rotated
Currently, when Nodes are rotated, their positioning updates in an unintuitive manner when resizing. When using step Edges, the directionality of the edge does not fully respect the rotation.
Test coverage is fairly comprehensive, covering most components. The exception to this is testing on the Drawer component. We would also like the test the high contrast themes.
We’ve added a new section to the documentation which will contain example sandboxes of features and potential usecases of Svelvet.
If you would like to contribute to the showcase with an example of how you’re using Svelvet, reach out to the team with your project via Github.