Svelte Flow 1.4.0

Lots of improvements in this release! We added a new EdgeToolbar component, it’s now possible to start a selection above a node and child nodes of different parents won’t overlap anymore:

Minor Changes

• #5544  Add EdgeToolbar component
• #5550  Prevent child nodes of different parents from overlapping
• #5551  Allow to start a selection above a node
• #5526  Add resizeDirection prop to ResizeControls

Patch Changes

• #5538  Suppress svelte/prefer-svelte-reactivity warnings
• #5529  Fix selected set to false on every node and edge eagerly
• #5528  Let NodeResizer props change during ongoing resize
• #5546  Do not crash mini map if all nodes are hidden
• #5547  Always call onMoveEnd when onMoveStart was called

Permalink

Svelte Flow 1.3.0

Minor Changes

• #5496  Pass a custom nodeComponent Svelteflow’s to Minimap

Patch Changes

• #5480  Prevent multi-touch events while making a new connection
• #5510  Add missing props autoPanSpeed and panOnScrollSpeed
• #5482  Make isNodeIntersecting behave the same as getIntersectingNodes
• #5509  Prevent calling onResizeEnd if node was not resized
• #5511  Fix regression: elevate edges if connected nodes are selected
• #5497  Skip eagerly rendering nodes when node dimensions and handles are predefined
• #5455  Thanks @Sec-ant ! - Fix style attribute not being propagated to wrapper

Permalink

Svelte Flow 1.2.4

Patch Changes

• #5459  Fix open arrow marker using fill color from edge instead of none
• #5468  Allow returning void, false and null from onbeforeconnect
• #5467  Fix ondelete not getting called when using deleteElements

Permalink

Svelte Flow 1.2.3

Svelte Flow 1.2.3 is out with some of fixes and a great update for handles. It’s now possible to position child content of a handle outside of the handle itself and still use it as a starting point for connections.

Patch Changes

• #5428  Be able to use detached handle content as a starting point for a connection - Thanks @space_phoenix_ !
• #5419  Make edge markers fallback to --xy-edge-stroke CSS variable when marker color is null
• #5453  Snap selection instead of separate nodes when snap grid is enabled
• #5443  Use 1 as the default for interactive Minimap zoom step
• #5448  Use correct HandleConnection type for Handle onConnect
• #5444  Export MiniMapNode to use it for custom mini map nodes
• #5424  Export missing BuiltInEdge type

Permalink

Svelte Flow 1.2.0

Minor Changes

• #5361  Render edges above nodes when they are within a subflow
• #5344  Add connectionDragThreshold prop

Patch Changes

• #5362  Remove pointer events from Panel via CSS while a selection gets dragged

Permalink

Svelte Flow 1.1.1

Patch Changes

• #5339  Thanks @jrmajor ! - Fix onmove, onmovestart and onmoveend events not firing
• #5354  Add TSDoc annotations
• #5335  Prevent proxying objects in the store
• #5336  Fix useNodeConnections callbacks firing only when returned signal is used
• #5333  Add missing type exports

Permalink

Svelte Flow 1.1.0

We improved accessibility, enhanced viewport transitions and updated the Node Resizer among many other fixes!

Minor Changes

• #5299  Thanks @printerscanner ! - Add ariaRole prop to nodes and edges
• #5280  Improve typing for Nodes
• #5276  Add an ease and interpolate option to all function that alter the viewport
• #5277  Thanks @printerscanner ! - Add ariaLabelConfig prop for customizing UI text like aria labels and descriptions.
• #5317  Add domAttributes option for nodes and edges
• #5326  Prevent NodeResizer controls to become too small when zooming out
• #5308  Thanks @printerscanner ! - Focus nodes on tab if not within the viewport and add a new prop autoPanOnNodeFocus

Patch Changes

• #5327  Prevent selecting of edges when spacebar is pressed
• #5294  Fix data in EdgeProps that was not typed correctly
• #5327  Fix initial fitView for SSR
• #5275  Fix setting nodesInitialized multiple times
• #5271  Thanks @leejuyuu ! - Change a11y description inline styles to classes
• #5327  Fix ViewportPortal not working when used outside of SvelteFlow component
• #5295  Export missing callback types
• #5327  Display nodes correctly in SSR output

Permalink

Svelte Flow 1.0.0

Yeah! Svelte Flow 1.0. is here 🚀

Svelte Flow 1.0 is based on Svelte 5 and introduces a lot of new features and improvements. Please refer to the migration guide to see how to upgrade.

New features

• Reconnect edges: You can reconnect your edges by using the new <EdgeReconnectAnchor /> component. It can be used to add custom reconnection points on custom edges.
• Keyboard navigation & A11y: We added support for keyboard navigation and improved accessibility for screen readers. You can now tab through nodes and edges and move nodes with the arrow keys. Can be disabled via disableKeyboardA11y
• Click connect: You can now create a new connection by clicking on a handle one by one.
• Enhanced ViewportPortal: You can now decide if you want to render something below or above the nodes & edges in the viewport.
• Improved fitView: We finetuned the fitView function to better work with dynamically added nodes.
• colorModeSSR prop: You can pass a fallback color mode for server side rendering when colorMode is set to system.
• elevateNodesOnSelect & elevateEdgesOnSelect: Control if nodes & edges should be elevated via z-index when selected.
• noDragClass, noWheelClass, noPanClass: You can now modify the class name used to disable dragging, panning and zooming.
• onselectionchange & useOnSelectionChange: You can now listen to selection changes via a callback

Permalink

Svelte Flow 0.1.36

Svelte Flow 0.1.36

Patch Changes

• #5212  Add polyfill for Promise.withResolvers
• #5191  Fix legacy padding being slightly larger than before

Permalink

Svelte Flow 0.1.35

What’s new in Svelte Flow 0.1.35

Patch Changes

• #5158  Thanks @dimaMachina ! - Fix typo in TSDoc comments React Flow -> Svelte Flow

Permalink

Svelte Flow 0.1.30

What’s new in Svelte Flow 0.1.30

Patch Changes

• #5010  Add more TSDocs to components, hooks, utils funcs and types

Permalink

Svelte Flow 0.1.29

What’s new in Svelte Flow 0.1.29

Patch Changes

• #4957  Narrow properties selected, selectable, deletable, draggable of NodeProps type to be required.

Permalink

Svelte Flow 0.1.28

What’s new in Svelte Flow 0.1.28

Patch Changes

• #4949  Fix useNodeConnection hook not returning all connected edges.

Permalink

Svelte Flow 0.1.27

What’s new in Svelte Flow 0.1.27

Patch Changes

• #4937  Thanks @jrmoynihan ! - Expose props of Controls
• #4947  Export ResizeControlVariant correctly as a value.
• #4880  Thanks @crimx ! - Add type check for all event targets
• #4725  Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId.

Permalink

Svelte Flow 0.1.26

What’s new in Svelte Flow 0.1.26

Patch Changes

• #4897  Freeze required @svelte-put/shortcut version to 3.1.1 to prevent breaking of key inputs.

Permalink

Svelte Flow 0.1.25

What’s new in Svelte Flow 0.1.25

Patch Changes

• #4865  Add group node to BuiltInNode type. Thanks @sjdemartini !
• #4877  Fix intersections for nodes with origins other than [0,0]. Thanks @gmvrpw !

Permalink

Svelte Flow 0.1.24

What’s new in Svelte Flow 0.1.24

Patch Changes

• #4790  Fix node dragging & resizing while zooming on flow that does not cover whole browser window.
• #4782  Fix node intersections in nested flow.

Permalink

Svelte Flow 0.1.22

What’s new in Svelte Flow 0.1.22

Patch Changes

• #4730  Fixed rare crash while dragging
• #4758  Bump Svelte peer dependency to 5.0.0

Permalink

Svelte Flow 0.1.21

What’s new in Svelte Flow 0.1.21

Patch Changes

• #4718  Fixed hook useNodesData unexpectedly returning undefined

Permalink

Svelte Flow 0.1.20

What’s new in Svelte Flow 0.1.20

Patch Changes

• #4670  Fix initial fitView not working correctly for nodeOrigin other than [0,0]

• #4670  Improve fitView to respect clamped node positions based on nodeExtent

• #4653  Calculate viewport dimensions in fitView instead of using stored dimensions. Fixes #4652 

• #4681  Fix crash when deleting nodes while dragging. Closes #4677 

Permalink

Svelte Flow 0.1.19

What’s new in Svelte Flow 0.1.19

Patch Changes

• #4477  d5592e75 Add getNodesBounds to useReactFlow/useSvelteFlow hook as the new recommended way of determining node bounds.

• #4572  1445e148 Add nodeExtent prop to <SvelteFlow />. You can now restrict nodes from leaving a specified extent.

• #4572  d9563505 Improve handling of global and individual nodeExtents. Nodes will never render outside of specified extents.

Permalink

Svelte Flow 0.1.5 & 0.1.4

Svelte Flow 0.1.5 & 0.1.4

While adding some last minute features to the new React Flow release we also ported them to Svelte Flow and fixed some issues along the way. This includes making selectable, deletable, draggable and parentId available as props for custom nodes, fixing panel elements standing in the way of making selection boxes and fixing zoom behavior on mobile.

0.1.5

• prevent zooming on mobile if zoomOnPinch is false
• add StraightEdge to built-in path types
• abort drag when multiple touches are detected
• fix merge_styles error

0.1.4

• add selectable, deletable and draggable to node and edge props
• add parentId to node props
• add on:edgemouseenter and on:edgemouseleave event handler
• fix deselection of edges
• remove pointer events from panel when user selection is active
• fix viewport initialization with user viewport
• fix parent node lookup in evaluateAbsolutePosition - thanks @lcsfort

Permalink

Svelte Flow 0.1.0

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

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 svelte-y 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

New release 0.0.40

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

New release 0.0.39

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

New release 0.0.38

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 .

Permalink

New release 0.0.37

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 .

Permalink

New release 0.0.36

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 .

Permalink

New release 0.0.35

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 .

Permalink

New release 0.0.34

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 .

Permalink

New release 0.0.33

New release 0.0.33

⚠️ Breaking

• deleteElements function 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 .

Permalink

NodeResizer - 0.0.32 release

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 .

Permalink

New release 0.0.29

New Release 0.0.29

Another huge update for Svelte Flow 🙏 Creating data 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 Computing Flows 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

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 attributes (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 .

Permalink

Alpha changes and a new release 0.0.27

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 .

Permalink