​
Planned Features

What we’re working on and thinking about.

​
Persistent Canvas state

saveStore.ts and reloadStore.ts lay the foundation for the save feature. They work together to get the state object of the canvas byt turning it into a JSON string for storage and then parsing it into a JSON object for reconstruction. But they need further development as they only save the camera position and theme. Specifically, the traverse function in saveStore.ts needs to properly detect and expand each element inside the canvas (graph) state object. A good place to start on this would be addressing the anchors and edges property of the graph’s state object. Use the “nodes” property on this object for reference on how this data should be unraveled and stored. Additionally, the createGraph function is used in reloadStore.ts to render a graph onMount of the Svelvet component according to the state object that was saved last in local storage on the user’s browser. This implementation is simplified, however, so it only recreates the graph from partially saved data.

​
Improving Window Resize Logic

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.

​
Additional Data Input Components

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.

​
Drawer Component Maintenance

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.

​
Edge Drop Callback

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.

​
Snap To Grid Guide Lines

Visual representation of Snap To Grid functionality a la Photoshop

​
Additional Customization of Input Mechanism

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.

​
Accesibility

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.

​
Conditional Custom Edges

Rendering out different custom edges based on the state of the associated Anchors.

​
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.

​
Extensive Test Coverage

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.

​
Example Showcase

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.

ChangelogUpgrading