-
#5010
6c121d42
Thanks @moklick! - Add more TSDocs to components, hooks, utils funcs and types -
Updated dependencies [
6c121d42
,4947029c
,e8e0d684
]:- @xyflow/system@0.0.51
-
#4957
fe843982
Thanks @peterkogo! - Narrow properties selected, selectable, deletable, draggable of NodeProps type to be required. -
Updated dependencies [
fe843982
,e73ef09f
]:- @xyflow/system@0.0.50
-
#4949
592c7eaf
Thanks @peterkogo! - Fix useNodeConnection hook not returning all connected edges. -
Updated dependencies [
592c7eaf
]:- @xyflow/system@0.0.49
-
#4937
9d940300
Thanks @jrmoynihan! - Expose props of Controls -
#4947
868aa3f3
Thanks @moklick! - Export ResizeControlVariant correctly as a value. -
#4880
e2d849dc
Thanks @crimx! - Add type check for all event targets -
#4725
e10f53cf
Thanks @peterkogo! - Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId. -
Updated dependencies [
e2d849dc
,e10f53cf
,4947f683
]:- @xyflow/system@0.0.48
- #4897
c6890512
Thanks @peterkogo! - Freeze required @svelte-put/shortcut version to 3.1.1 to prevent breaking of key inputs.
-
#4865
2c4acc2b
Thanks @moklick! - Add group node to BuiltInNode type. Thanks @sjdemartini! -
#4877
9a8309da
Thanks @peterkogo! - Fix intersections for nodes with origins other than [0,0]. Thanks @gmvrpw! -
Updated dependencies [
d60331e6
]:- @xyflow/system@0.0.47
-
#4790
2fa9a920
Thanks @peterkogo! - Fix node dragging & resizing while zooming on flow that does not cover whole browser window. -
#4782
323e1b35
Thanks @peterkogo! - Fix node intersections in nested flow. -
Updated dependencies [
2fa9a920
,323e1b35
]:- @xyflow/system@0.0.46
-
#4772
7f670ab0
Thanks @mistic! - Splits exports field in package.json to support an explicit resolution for browser, node and default to resolve issues with webpack esm module resolution. -
Updated dependencies [
7f670ab0
]:- @xyflow/system@0.0.45
-
#4730
2c590b90
Thanks @peterkogo! - Fixed rare crash while dragging -
#4758
e555bd1b
Thanks @peterkogo! - Bump Svelte peer dependency to 5.0.0 -
Updated dependencies [
005ae1c0
,2c590b90
]:- @xyflow/system@0.0.44
- #4718
51f08aac
Thanks @peterkogo! - Fixed hook useNodesData unexpectedly returning undefined
-
#4670
b056564c
Thanks @peterkogo! - Fix initialfitView
not working correctly fornodeOrigin
other than [0,0] -
#4670
b056564c
Thanks @peterkogo! - ImprovefitView
to respect clamped node positions based onnodeExtent
-
#4653
02390f99
Thanks @bcakmakoglu! - Calculate viewport dimensions infitView
instead of using stored dimensions. Fixes #4652 -
Updated dependencies [
99ba64ac
,b056564c
]:- @xyflow/system@0.0.43
-
#4477
d5592e75
Thanks @peterkogo! - AddgetNodesBounds
touseReactFlow
/useSvelteFlow
hook as the new recommended way of determining node bounds. -
#4572
1445e148
Thanks @peterkogo! - Add nodeExtent prop to<SvelteFlow />
. You can now restrict nodes from leaving a specified extent. -
#4572
d9563505
Thanks @peterkogo! - Improve handling of global and individualnodeExtent
s. Nodes will never render outside of specified extents. -
Updated dependencies [
d5592e75
,d9563505
]:- @xyflow/system@0.0.42
-
#4611
2aaa709c
Thanks @moklick! - make onViewportChange a dynamic prop -
Updated dependencies [
2aaa709c
]:- @xyflow/system@0.0.41
-
#4574
b65aed19
Thanks @bcakmakoglu! - AddgetHandleConnections
helper touseReactFlow
&useSvelteFlow
-
Updated dependencies [
5138d90b
,12dbe125
]:- @xyflow/system@0.0.40
-
#4568
c3e62782
Thanks @peterkogo! - Only display grab cursor when panOnDrag is on left mouse button -
#4569
54bfb6d9
Thanks @peterkogo! - Fix getIntersectingNodes for subflows -
Updated dependencies [
c3e62782
]:- @xyflow/system@0.0.39
-
#4510
12313a5b
Thanks @bcakmakoglu! - RenameisConnectable
prop locally toisConnectableProp
to avoid naming collision with derived value ofisConnectable
in<Handle>
component. -
#4517
085951bc
Thanks @ghostdevv! - fix: make svelte-preprocess a dev dep -
#4549
99733c01
Thanks @moklick! - feat(onConnectEnd): pass connectionState param -
Updated dependencies [
b63a3734
,24e87e39
,692e6440
,559d4926
,4ecfd7e1
,e7ef328f
,99733c01
]:- @xyflow/system@0.0.38
- #4498
7a6e9e30
Thanks @peterkogo! - fix(pane) only capture pointer after a valid selection has started, fixes #4492
-
#4446
80baf53b
Thanks @moklick! - fix(resizer): export types -
Updated dependencies [
80baf53b
,4cccd06a
]:- @xyflow/system@0.0.36
-
#4434
1bda2451
Thanks @moklick! - fix(selection): handle pointer capture for selectionOnDrag -
Updated dependencies [
d2da5765
]:- @xyflow/system@0.0.35
- add
paneDistanceClick
prop (max distance between mousedown/up that will trigger a click) - returned nodes in
on:nodedragstop
are set todragging=false
- return Promises for
setViewport
,fitView
,fitBounds
andzoomTo
to be able to await viewport update
useConnection
returnsConnectionState
withtoNode
andtoHandle
- node origin is part of position absolute
- refactor connection handling
- revise selection usability (capture while dragging out of the flow)
- only prevent shift scrolling when selection is actually in progress
- use correct end handle position when drawing a connection lines
- determine correct end positions for connection lines
- fix node origin bug
- prevent zooming on mobile if zoomOnPinch is false
- add straight edge to path built-in-types
- abort drag when multiple touches are detected
- fix merge_styles error
- add
selectable
,deletable
anddraggable
to node and edge props - add
parentId
to node props - add
on:edgemouseenter
andon: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
- fix
NodeToolbar
for subflows
- export
InternalNode
type
- export
useInternalNode
hook
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.
.
- rename
node.computed
tonode.measured
- this attribute only includeswidth
andheight
and nopositionAbsolute
anymore. For this we added the helpersgetInternalNode
anduseInternalNode
- rename
node.parentNode
tonode.parentId
- add
isValidConnection
for<Handle />
component - add
fitViewOptions
for<Controls />
component - add
getInternalNode
touseSvelteFlow
- add
useInternalNode
hook - don't reset nodes and edges when svelte flow unmounts - thanks @darabos
- fix node event types - thanks @RedPhoenixQ
- make handleId and isTarget reactive - thanks @darabos
- fix MiniMap interaction for touch devices
- fix pane: pinch zoom on windows
- fix nodes: return user node in node event handlers
- fix: re-observe nodes when not initialized
- add
orientation
('horizontal' or 'vertical'),style
andclass
prop forControls
component - allow multiple keys for
deleteKey
,selectionKey
,multiSelectionKey
,panActivationKey
andzoomActivationKey
- fix node observe / unobserve
- fix edge and node types
- active context menu releases pressed keys to reset selection
on:nodedragstart
,on:nodedrag
andon:nodedragstop
are also getting fired if a selection bix is being dragged. We renamed thenode
param totargetNode
and set it tonull
if a selection is being dragged.
- export
EdgeLabel
component - add "connectionindicator" class for
Handle
component - address a11y warnings
NodeProps
generic is a node and not only node data.type $$Props = NodeProps<AppNode>
- unify
Edge
andNode
type handling - fix safari: prevent selection of viewport
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"
- better cursor defaults for the pane, nodes and edges
- add
initialWidth
andinitialHeight
node attributes for specifying initial dimensions for ssr - always re-measure nodes when new nodes get passed
- fix
NodeResizer
when used in combination withnodeOrigin
- 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
- add
getNode
,getNodes
,getEdge
andgetEdges
touseSvelteFlow
- add
useInitialized
/useNNodesInitialized
hooks andoninit
handler
- selection box is not interrupted by selectionKey being let go
- Edge label has a default background and is clickable
- do not use fallback handle if a specific id is being used
- use correct id for
<Handle />
data-id attribute - fix
getNodesBounds
and add second param for passing options
- add second option param to
screenToFlowPosition
for configuring ifsnapToGrid
should be used - add slot to
Controls
- cleanup
ControlButton
types - infer types for
getIncomers
,getOutgoers
,updateEdge
,addEdge
andgetConnectedEdges
thanks @joeyballentine - refactor handles: prefix with flow id for handling nested flows
- add comments for types like
SvelteFlowProps
orNode
for a better developer experience
- fix
deleteElements
- fix dragging when
draggable=false
- add
ariaLabel
prop for<Controls />
deleteElements
function now takes one object as an argument{ nodes: [], edges: [] }
instead of two(nodes, edges)
- add
NodeResizer
andNodeResizeControl
components for resizing nodes
- fix edge rendering
- add
onbeforedelete
handler to prevent/ manage deletions - TSDocs for hooks and some types
- new nodeDragThreshold default is 1
- refactor/simplify edge rendering
Another huge update for Svelte Flow 🙏 Handling 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 />
.
- 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 - export
updateNode
andupdateNodeData
fromuseSvelteFlow
to update a node or the data object - add
onedgecreate
function for passing a certain id or other attributes to a newly created edge
- replace
on:connect
,on:connectstart
andon:connectend
withonconnect
,onconnectstart
andonconnectend
, no need to forwardon:connect..
anymore
onconnect
andondisconnect
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 passingRect
This is a huge update! We added a new <NodeToolbar />
component and a new colorMode
('light' | 'dark' | 'system') prop for toggling dark/light mode.
There are also 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
on:selectionclick
andon:selectioncontextmenu
event handlers - add
ondelete({ nodes, edges })
handler - add
zoomActivationKey
prop - add
width
andheight
prop to customNodeProps
type - add
colorMode
prop ('light' | 'dark' | 'system') ⚠️ replacexPos
andyPos
withpositionAbsolute
prop to customNodeProps
type⚠️ node.width/height
andnode.positionAbsolute
can now be found undernode.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
- add
selectionOnDrag
prop - can be used to create figma-like controls in combination withpanOnDrag={false}
/panOnDrag={[1, 2]}
+panOnScroll={true}
⚠️ renamescreenToFlowCoordinate
toscreenToFlowPosition
⚠️ renameflowToScreenCoordinate
toflowToScreenPosition
⚠️ renamegetTransformForBounds
togetViewportForBounds
(return{ x: number, y: number, zoom: number }
instead of[number, number, number]
)⚠️ renamegetRectOfNodes
togetNodesBounds
- simplify handle default styles, so that it's easier to override them
- added e2e tests
- fixes broken version on npm
- add
toObject
touseSvelteFlow
hook - export
BezierEdge
,StepEdge
andSmoothStepEdge
components - handle window resize (Minimap updates its viewport)
- fix wrongly selected nodes
- fix connection line z-index
- fix broken edges (
interactionWidth
was missing)
- update node automatically when
type
,sourcePosition
ortargetPosition
option changes - prevent dev tool warnings when using built-in node types
- updates
useSvelteFlow
hook: - add node type "group"
- add
class
prop for BaseEdge - add
id
prop for Background - add
selected
prop for MiniMap Node - rename Controls prop
showInteractive
toshowLock
- updates
useSvelteFlow
hook:- add
screenToFlowCoordinate
andflowToScreenCoordinate
- add
getConnectedEdges
,getIncomers
andgetOutgoers
- add
deleteElements
- add
fitBounds
- add
getIntersectingNodes
andisNodeIntersecting
- add
- add
useConnection
hook - add
useNodes
hook - add
useEdges
hook - add
viewport
prop (writable viewport) - fix selection style
- fix Background component with lines variant
- add
connectionLine
slot for rendering a custom connection line - add
connectionLineStyle
andconnectionLineContainerStyle
props - add
useConnection
hook - add
nodeDragThreshold
prop - add
fitViewOptions
prop - add
defaultEdgeOptions
prop - add
on:edgecontextmenu
event handler prop - add
connectionMode
prop - add
attributionPosition
prop
- add
on:nodedragstart
,on:nodedrag
andon:nodedragstop
- add
on:nodecontextmenu
- [breaking change] use same convention for all custom events: Always pass the original event if possible and additional data
- before:
on:nodeclick: CustomEvent<Node>
- after:
on:nodeclick: CustomEvent<{event: MouseEvent, node: Node}>
- before:
- fix
on:connectstart
andon:connectend
handlers - fix default styles for
<Controls />
component - fix
dragHandle
node option - expose
style
prop for minimap
- make it possible to change edge type dynamically
- fix
hidden
option for nodes and edges - add
useUpdateNodeInternals
hook
- add
nodesDraggable
prop - minimap: add default background
- export
useStore
to access internals
- center edge label by default
- fix wrongly displayed connectionline
- export css correctly
- [breaking change] from now on it's necessary to import the styles like
@xyflow/svelte/styles/style.css
or@xyflow/svelte/styles/base.css
. This makes it easier to work with tailwind or overwrite styles with regular CSS.
- fix event handlers and rename from
on:node:click
toon:nodeclick
- add
panActivationKey
prop - elevate nodes by default when selected
- use css vars internally and let users overwrite them
- use svelte 4
this release fixes the path bug introduced in 0.0.4
this version is broken because of a wrong path in the package.json
- add
snapGrid
prop - add
onlyRenderVisibleElements
prop - cleanup some exports and types
- add
connectionRadius
Svelte Flow alpha is here 🔥 You can expect some changes until we reach 1.0.0 but we try to stick as close as possible to the React Flow API. There are no docs yet, but we are working on it! For now the easiest way is to use the autocomplete of your IDE, lookup the props in the SvelteFlow component or check out the React Flow docs.
This very first release comes with lots of features already:
- pass
nodes
andedges
as writables - draggable, selectable and deletable nodes
- support for custom
nodeTypes
andedgeTypes
- basic viewport settings like
fitView
,minZoom
andmaxZoom
- additional components:
<MiniMap />
,<Controls />
&<Background />