​
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!
IntroductionRoadmap