Changelog

New features, bug fixes, and improvements organized by release

February 14, 2025

💥Svelvet 11.0.0💥

• Features:

  • Snap-grid functionality- our new introduced feature allows users to toggle between free movement and snap-to-grid modes for precise node placement on the canvas. This functionality enhances flexibility by enabling easy drag-and-drop node positioning as well as alignment through keyboard controls.

  • Padlock functionality-The padlock functionality was updated to ensure that locked nodes cannot be moved, providing a more intuitive and predictable behavior. The lock and unlock status is visually represented with a padlock icon, and users can easily toggle between locked and unlocked states to manage node positions.

  • A new “Add Node” button was introduced within the Svelvet Graph Editor, allowing users to dynamically add new nodes to the graph. Clicking the button increments the total node count and places new nodes at randomized positions, with draggable functionality.

  • Save-button-The saveStore and reloadStore were updated to improve canvas state capture, now saving complete node information (including positions and properties) for more accurate reconstruction. However, reloadStore still needs work to properly render nodes and rebuild the graph after a reload, requiring focus on better graph store integration in future development.

• Refactoring:

  • We have recreated the Svelvet canvas by removing the default nodes.
  • Edges can now be created and connected to nodes.
  • Accesibility Enhancement by Svelvet 10 are mantained with the exception of 1; “Press Option + Tab || Ctrl + Tab for Node selection”.
  • In the main Svelvet canvas various issues were addressed, including ensuring graph initialization with local storage, tracking the drawer prop, improving edge management, and handling zoom/translation behavior more consistently. Specific fixes were made to event dispatching, edge removal, and ensuring reactivity for properties like zoom and drawer.

• Documentation:

  • We created an individual ReadMe folder detailing our journey with Svelvet, our approach to this new technology, our trials, errors and our effortless attempts and contributions to Svelvet.
  • Improved directions on how to navigate updating Documentation using Mintlify in original README.

February 7, 2024

🛸 Svelvet 10.0.0 🛸

• Features:

  • Accessibility Enhancement: Now users can navigate the canvas using the keyboard.
    • Press 'l' to turn on light/dark mode.
    • Press 'd' to show drawer component, and 'D' to open/close drawer component.
    • Press Option + Tab || Ctrl + Tab for Node selection.
    • Press 'm' to toggle the minimap component.
    • Press 'c' to toggle control component.
    • Press 'e' to bring up editor component.
  • Persistent Canvas State: Added the ability to save the state persistently to local storage.
  • High Contrast Mode: Introduced a new high contrast accessibility component tailored for the visually impaired.

• Refactoring:

  • Improved Keyboard Accessibility: Enhanced the keyboard accessibility of the drawer component through refactoring.

• Documentation:

  • Updated Guidance: Documentation now includes instructions on utilizing keyboard accessibility features.

• Miscellaneous:

  • Test Enhancements: Added comprehensive testing for drawer components.
  • Maintenance: Updated Playwright tests and configuration for improved stability.

November 16, 2023

🚀 Svelvet 9.0.0 🚀

• feat: migrated Svelvet library from Svelte 3 to Svelte 4
• feat: built out/added a flowchart feature that generates dynamic flowchart diagrams from a formatted string
• feat: added a new arrow edge style to the existing collection of edge styles allowing one-way and two-way data flow visualization
• feat: added a new component called toggle to the existing library of data flow components
• refactor: overhauled the Editor component to allow for dynamic deletion and resizing of existing nodes
• docs: updated documentation to include the addition of an example that illustrates how a user might create customizable node shapes
• docs: updated documentation to include the addition of an example that illustrates how to use the new flowchart feature
• docs: updated the documentation page on the website to include newest version release
• test: added to the E2E testing suite using Playwright, nearly doubling test coverage

June 1, 2023

Svelvet 8.0.0

• feat: added a new drag-and-drop Drawer component that can create default and custom Nodes, Anchors and Edges as props and add them to the canvas via the UI
• feat: added a new input component, Knob, to the collection of already existing data flow system components that can be composed in custom nodes and customized by users
• docs: updated documentation to include an Example section that features a usecase of Svelvet as a Database Visualization tool
• docs: updated the documentation page on the website to include newest version release
• test: added Unit/Component testing using Vitest and Svelte Testing Library
• chore: updated package version

May 2, 2023

Svelvet 7.0.37

• feat: graphs and other components can now be styled using CSS variables and :root[svelvet-theme=“theme-name”] selectors
• fix: hook custom themes into slider implementation and add unused border c… by @madvib in
• refactor: reorganized internal node as an example file structure for other components
• feat: nodeConnect prop on Anchor component initiates connection when an edge is dropped on a parent node
• chore: update package version and gitignore file

April 26, 2023

Svelvet 7.0.34

• feat: added modifier prop to Svelvet component to set key modifier globally #297
• feat: added a new implementation of dynamic anchors
• feat: added let:connect and let:disconnect methods to Node component
• fix: graph element was not being focused when clicking node #298
• fix: keydown listener was not activating when selecting something other than the Graph itself
• fix: color wheel component was not tracking cursor properly when rotated
• refactor: store structures now use maps instead of objects
• refactor: EdgeStore now has custom methods
• refactor: removed unnecessary helpers
• refactor: moved DefaultAnchor to its own component
• chore: update package version by

April 21, 2023

Svelvet 7.0.15

• Exported GraphConfig interface
• Added translation prop to Svelvet component to set initial translation of the graph
• Renamed ColorWheel component to ColorPicker

April 19, 2023

Svelvet 7.0.4

• Added fit-in-view functionality to Svelvet and Controls components.
• Optimized bounds recalculation when moving Nodes as a group. You can now move hundreds of Nodes at once.

April 18, 2023

🚀 Svelvet 7.0.0 🚀

• Changed primary API. Developers now pass Node and other exposed components directly as children to Svelvet
• Added the ability to specify Anchors as inputs, outputs or any, enabling connection logic and “directionality” of Edge curvature
• Added the ability to dynamically attach/reattach Edges
• All new Anchor component that developers can add anywhere within custom nodes. Can be wrapped around custom anchor elements or customized via props
• All new Edge component for developer customization
• All new Node component for developer customization
• All new Resizer component used when composing custom nodes
• Improved realiability and DX around Edge click events
• Node connections can be specified at the Node or Anchor level. Improved flexibility of input options
• Improved consistency of touch events on mobile devices. Added touch support for controls component
• Nodes and Edges no longer require specified IDs. Defaults to incrementing value
• Added Controls component with zoom, reset, lock and unhide functionality plus the ability to pass custom control buttons as children
• Added the ability to specify an arbitrary number of Anchors on default nodes
• Added z-index stacking logic when interacting with Nodes
• Improved step path algorithm, which now connects Anchors regardless of their position. Exposed corner radius as prop
• Added keyboard navigation to canvas when focused
• Added selection box functionality via Shift + Click. Color can be controlled via the selectionColor prop on the Svelvet component.
• Added node grouping functionality via Shift + CMD + Click
• Added the ability to pass custom edges at the Graph, Node and Anchor level
• No longer required to pass width/height to Svelvet component. Will fill wrapping container by default
• Added the abilty to specify canvas/node direction as top-down TD or left-right LR. Controls placement of input/output anchors on default nodes
• All new Minimap component that accepts props for placement, dimensions and styling the background and nodes (defaults to node color) and features dramatically improved tracking/visualization plus the ability to hide nodes
• All new Theme Toggle component that can toggle between a main and alt theme
• Enabled two way data binding for some parameters when creating default Nodes
• All new Background component allowing customization of grid size and color
• Exposed custom events on the Node component for on:nodeClicked, on:connection and on:disconnection that developers can listen for when implementing custom nodes
• Added theme prop to Svelvet component. Defaults to light. Accepts parameters like “dark”, “purple”, “parchment”
• Removed frontend website code from library repository
• Added E2E tests using Playwright
• Simplified bezier curve logic and added the ability to specify anchor “direction”
• Added ability to parse Mermaid strings into node graphs + edges
• Added a series of accessible input components (Slider, RadioGroup, TextField, ColorWheel) that can be composed in custom nodes and are linked with our data flow system
• Library now features 100% TypeScript coverage and fully exported types
• Removed D3-zoom dependency
• Removed redundant window and event listeners
• Added dynamic data flow/state management system that tracks Anchor connections
• Updated home page to include newest collaborators
• Temporarily removed dynamic anchor logic due to library re-write. May re-add
• Made progress on restoring graph state from local storage. Coming soon!