Svelte Flow 0.1.0

This is a bigger update for Svelte Flow to keep up with the latest changes we made for React Flow and the Svelte5 rewrite. The biggest change is the separation of user nodes (type Node) and internal nodes (type InternalNode), which includes a renaming of the node.computed attribute to node.measured. In the previous versions, we stored internals in node[internalsSymbol]. This doesn't exist anymore, but we only add it to our internal nodes in node.internals..

⚠️ Breaking

• rename node.computed to node.measured - this attribute only includes width and height and no positionAbsolute anymore. For receiving an internal node, we added the helpers useInternalNode and getInternalNode
• rename node.parentNode to node.parentId

More updates:

• add isValidConnection for <Handle /> component
• add fitViewOptions for <Controls /> component
• add getInternalNode to useSvelteFlow
• add useInternalNode hook
• don't reset nodes and edges when svelte flow unmounts
• fix node event types
• make handleId and isTarget reactive
• fix MiniMap interaction for touch devices
• fix pane: pinch zoom on Windows

0.1.1

• fix useInternalNode hook export

0.1.2

• fix InternalNode type export

0.1.3

• fix NodeToolbar for subflows

Permalink

Future of Svelte Flow

While we have been hard at work on React Flow 12, listening to your feedback and bug reports and Svelte 5 slowly peeking over the horizon, we wanted to share some of our plans for the library.

Aligning internals

We redesigned a lot of the internal update logic in React Flow 12 and wanted to bring some of that to Svelte Flow. As both libraries already share a substantial core, extending it to include this last missing piece will improve maintainability a great deal. We are planning to release this update in the following weeks alongside a couple of other improvements.

Svelte 5

We have been closely following the development of the upcoming Svelte version since its announcement last September, and we are quite excited about it! A lot of the new features will simplify our lives as library maintainers (looking at you, fallback values for props) and because we want to keep the library as svelty as possible, there will be some breaking changes. However, we don't want all the amazing projects you already built to break, so this update will mark a major version bump for Svelte Flow, namely ✨1.0.0-rc ✨.

You can expect some bug fixes for 0.x.x, but it being a pre-release version, we will move on to Svelte 5 as our main focus.

New features

After the transition, we will be able to develop new features for React & Svelte Flow in tandem, so keep your eyes peeled for some exciting new stuff coming your way!

Thanks to everyone who has been supporting the development so far by trying everything out and getting their hands dirty! We look forward to the future of Svelte Flow! 🚀

Permalink

Release notes: 0.0.40

Minor changes

• Controls component: add orientation ('horizontal' or 'vertical'), style and class props
• SvelteFlow component: allow multiple keys for deleteKey, selectionKey, multiSelectionKey, panActivationKey and zoomActivationKey

Patch changes

• fix node observe / unobserve
• fix edge and node types
• active context menu releases pressed keys to reset selection

Permalink

Release notes: 0.0.39

⚠️ Breaking changes

• on:nodedragstart, on:nodedrag and on:nodedragstop are also getting fired if a selection bix is being dragged. We renamed the node param to targetNode and set it to null if a selection is being dragged.

Minor changes

• add EdgeLabel component

Patch changes

• add "connectionindicator" class for Handle component
• address a11y warnings

Permalink

Release notes: 0.0.38

⚠️ Breaking changes

• NodeProps generic is a node and not only node data. type $$Props = NodeProps<AppNode>

Patch changes

• unify Edge and Node type handling
• fix safari: prevent selection of viewport

You can find the changelog with all previous changes on Github (opens in a new tab).

Permalink

Release notes: 0.0.37

⚠️ Breaking changes

• useNodesData not only returns data objects but also the type and the id of the node
• status class names for Handle components are slightly different. It's now "connectingfrom" and "connectingto" instead of "connecting"

Patch changes

• better cursor defaults for the pane, nodes and edges
• add initialWidth and initialHeight node attributes for specifying initial dimensions for ssr
• always re-measure nodes when new nodes get passed
• fix NodeResizer when used in combination with nodeOrigin

You can find the changelog with all previous changes on Github (opens in a new tab).

Permalink

New release 0.0.36

Patch changes

• a better NodeResizer (child nodes do not move when parent node gets resized)
• fix on:panecontextmenu
• add role="button" to <EdgeLabel /> to prevent a11y warnings
• don't delete node when input is focused and user presses Backspace + Ctrl (or any other mod key)
• useHandleConnections: use context node id when no node id is passed
• don't trigger drag start / end when node is not draggable

You can find the changelog with all previous changes on Github (opens in a new tab).

Permalink

New release 0.0.35

Minor changes

• add getNode, getNodes, getEdge and getEdges to useSvelteFlow
• add useInitialized / useNNodesInitialized hooks and oninit handler

Patch changes

• selection box is not interrupted by selectionKey being let go
• Edge label has a default background and is clickable
• fix getNodesBounds and add second param for passing options

You can find the changelog with all previous changes on Github (opens in a new tab).

Permalink

New release 0.0.34

Minor changes

• add comments for types like SvelteFlowProps or Node for a better developer experience
• add slot for <Controls /> to be able to add custom controls
• add option param to screenToFlowPosition for configuring if snapToGrid should be used
• infer types for getIncomers, getOutgoers, updateEdge, addEdge and getConnectedEdges

You can find the changelog with all previous changes on Github (opens in a new tab).

Permalink

New release 0.0.33

⚠️ Breaking

• deleteElements function (opens in a new tab) now takes one object as an argument { nodes: [], edges: [] } instead of two (nodes, edges)

Bugfixes

• fix deleteElements
• fix dragging when draggable=false
• add ariaLabel prop for <Controls />

You can find the changelog with all previous changes on Github (opens in a new tab).

Permalink

NodeResizer - 0.0.32 release

With the latest release, we added the <NodeResizer /> component to the @xyflow/svelte package. Check out the Node Resizer example to see it in action.

You can find the changelog with all previous changes on Github (opens in a new tab).

Permalink

New Release 0.0.29

Another huge update for Svelte Flow 🙏 Creating reactive flows will be way easier with the new hooks and functions. You can now subscribe to connected nodes, receive data and update nodes more easily. We fix a big issue about the <Handle /> component. No more on:connect that only worked for target <Handle /> components but onconnect and ondisconnect that works for every <Handle />.

Check this Reactive Flow example to see the new helpers in action.

New Features

• add useHandleConnections hook for receiving connected node and handle ids for a specific handle
• add useNodesData(ids: string | string[]) hook for receiving data from other nodes
• new updateNode and updateNodeData for useSvelteFlow to update a node or the data object
• add onedgecreate function for passing a certain id or other attributes to a newly created edge

Breaking

• replace on:connect, on:connectstart and on:connectend with onconnect, onconnectstart and onconnectend, no need to forward on:connect.. anymore

Fixes and minor changes

• onconnect and ondisconnect callback work for <Handle /> component
• don't delete a node when user presses Backspace inside an input/textarea/.nokey element
• bgColor prop for Background didn't work
• prefix css vars with "xy-"
• don't update nodes and edges on pane click if not necessary
• cleaner types for exported edges
• fix getIntersectingNodes bug when passing Rect

Permalink

New release 0.0.28

This is a huge update! We added a new <NodeToolbar /> component and a new colorMode ('light' | 'dark' | 'system') prop for toggling dark/light mode. Check out the new dark mode example.

There are some breaking changes again (sorry!) but we are very close to the final API for Svelte Flow 1.0.0. The biggest change is that we group node attriubutes (width, height, positionAbsolute) that are added by the library under node.computed. This makes it easier to understand, that this stuff comes from the library itself. node.width and node.height is still an optional node option and can be used to set certain dimensions for SSR or on the client.

• add <NodeToolbar /> component
• add colorMode prop ('light' | 'dark' | 'system') - [Dark mode example]
• add on:selectionclick and on:selectioncontextmenu event handlers
• add ondelete({ nodes, edges }) handler
• add zoomActivationKey prop
• add width and height prop to custom NodeProps type
• add colorMode prop ('light' | 'dark' | 'system')
• ⚠️ replace xPos and yPos with positionAbsolute prop to custom NodeProps type
• ⚠️ node.width/height and node.positionAbsolute can now be found under node.computed.width/height/positionAbsolute
• ⚠️ node.width/height is still optional an can be used for forcing certain dimensions and SSR
• refactor keys: you can now disable keys by setting them to null (e.g. selectionKey={null})
• performance optimization with internal node lookup

You can find the changelog with all previous changes on Github (opens in a new tab).

Permalink

New release 0.0.27

We just released Svelte Flow 0.0.27 with some breaking changes. Even if we try to avoid them, they will happen. We just renamed some functions, so the migration should go easy. Here is a list of all changes:

• ⚠️ rename screenToFlowCoordinate to screenToFlowPosition
• ⚠️ rename flowToScreenCoordinate to flowToScreenPosition
• ⚠️ rename getTransformForBounds to getViewportForBounds (return { x: number, y: number, zoom: number } instead of [number, number, number])
• ⚠️ rename getRectOfNodes to getNodesBounds
• simplify handle default styles, so that it's easier to override them
• add selectionOnDrag prop - can be used to create figma-like controls in combination with panOnDrag={false} / panOnDrag={[1, 2]} + panOnScroll={true}
• 🎉 add e2e tests

You can find the changelog with all previous changes on Github (opens in a new tab).

Permalink