- 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 />