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