alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into chore/tsdocs-adjustments

Browse Source
This commit is contained in:
Moritz Klack
2025-10-21 14:48:00 +02:00
committed by GitHub
parent 65a8730c2a 33eed7783e
commit cebaa5bc0d
23 changed files with 103 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/react/CHANGELOG.md
View File

@@ -1,5 +1,28 @@
# @xyflow/react
## 12.9.0
### Minor Changes
- [#5544](https://github.com/xyflow/xyflow/pull/5544) [`c17b49f4c`](https://github.com/xyflow/xyflow/commit/c17b49f4c16167da3f791430163edd592159d27d) Thanks [@0x0f0f0f](https://github.com/0x0f0f0f)! - Add `EdgeToolbar` component
- [#5550](https://github.com/xyflow/xyflow/pull/5550) [`6ffb9f790`](https://github.com/xyflow/xyflow/commit/6ffb9f7901c32f5b335aee2517f41bf87f274f32) Thanks [@peterkogo](https://github.com/peterkogo)! - Prevent child nodes of different parents from overlapping
- [#5551](https://github.com/xyflow/xyflow/pull/5551) [`6bb64b3ed`](https://github.com/xyflow/xyflow/commit/6bb64b3ed60f26c9ea8bc01c8d62fb9bf74cd634) Thanks [@moklick](https://github.com/moklick)! - Allow to start a selection above a node
### Patch Changes
- [#5531](https://github.com/xyflow/xyflow/pull/5531) [`fe2a45ed2`](https://github.com/xyflow/xyflow/commit/fe2a45ed2aa0d96db8e1be0354038be7ce6f824d) Thanks [@Sec-ant](https://github.com/Sec-ant)! - Add `type` property to `EdgeProps` to match `NodeProps` behavior
- [#5528](https://github.com/xyflow/xyflow/pull/5528) [`d50a963cd`](https://github.com/xyflow/xyflow/commit/d50a963cd0f00cd31236d760dcd7995218d80553) Thanks [@peterkogo](https://github.com/peterkogo)! - Let `NodeResizer` props change during ongoing resize
- [#5530](https://github.com/xyflow/xyflow/pull/5530) [`3b9951e42`](https://github.com/xyflow/xyflow/commit/3b9951e42f2041276ac8957154598a7af41f81e9) Thanks [@peterkogo](https://github.com/peterkogo)! - Improve performance of adding nodes & edges
- [#5547](https://github.com/xyflow/xyflow/pull/5547) [`1c8961207`](https://github.com/xyflow/xyflow/commit/1c8961207e8ac326098af18489465b36cdd2d831) Thanks [@moklick](https://github.com/moklick)! - Always call `onMoveEnd` when `onMoveStart` was called
- Updated dependencies [[`c17b49f4c`](https://github.com/xyflow/xyflow/commit/c17b49f4c16167da3f791430163edd592159d27d), [`6ffb9f790`](https://github.com/xyflow/xyflow/commit/6ffb9f7901c32f5b335aee2517f41bf87f274f32), [`d50a963cd`](https://github.com/xyflow/xyflow/commit/d50a963cd0f00cd31236d760dcd7995218d80553), [`6bb64b3ed`](https://github.com/xyflow/xyflow/commit/6bb64b3ed60f26c9ea8bc01c8d62fb9bf74cd634), [`8a9ee2d83`](https://github.com/xyflow/xyflow/commit/8a9ee2d836776da42b867c6ba90d302fbbc79b37), [`1c8961207`](https://github.com/xyflow/xyflow/commit/1c8961207e8ac326098af18489465b36cdd2d831)]:
- @xyflow/system@0.0.71
## 12.8.6
### Patch Changes

2
packages/react/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@xyflow/react",
"version": "12.8.6",
"version": "12.9.0",
"description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
"keywords": [
"react",

4
packages/react/src/additional-components/EdgeToolbar/types.ts
View File

@@ -6,5 +6,9 @@ import type { EdgeToolbarBaseProps } from '@xyflow/system';
*/
export type EdgeToolbarProps = EdgeToolbarBaseProps &
HTMLAttributes<HTMLDivElement> & {
/**
* An edge toolbar must be attached to an edge.
*/
edgeId: string;
children?: ReactNode;
};

27
packages/svelte/CHANGELOG.md
View File

@@ -1,5 +1,32 @@
# @xyflow/svelte
## 1.4.0
### Minor Changes
- [#5544](https://github.com/xyflow/xyflow/pull/5544) [`c17b49f4c`](https://github.com/xyflow/xyflow/commit/c17b49f4c16167da3f791430163edd592159d27d) Thanks [@0x0f0f0f](https://github.com/0x0f0f0f)! - Add `EdgeToolbar` component
- [#5550](https://github.com/xyflow/xyflow/pull/5550) [`6ffb9f790`](https://github.com/xyflow/xyflow/commit/6ffb9f7901c32f5b335aee2517f41bf87f274f32) Thanks [@peterkogo](https://github.com/peterkogo)! - Prevent child nodes of different parents from overlapping
- [#5551](https://github.com/xyflow/xyflow/pull/5551) [`6bb64b3ed`](https://github.com/xyflow/xyflow/commit/6bb64b3ed60f26c9ea8bc01c8d62fb9bf74cd634) Thanks [@moklick](https://github.com/moklick)! - Allow to start a selection above a node
- [#5526](https://github.com/xyflow/xyflow/pull/5526) [`1b0bd9794`](https://github.com/xyflow/xyflow/commit/1b0bd9794f8d610468983a579e53b4633047b465) Thanks [@peterkogo](https://github.com/peterkogo)! - Add `resizeDirection` prop to `ResizeControls`
### Patch Changes
- [#5538](https://github.com/xyflow/xyflow/pull/5538) [`87a868958`](https://github.com/xyflow/xyflow/commit/87a8689584d9b29570d186628829324f3bec3b2e) Thanks [@peterkogo](https://github.com/peterkogo)! - Suppress `svelte/prefer-svelte-reactivity` warnings
- [#5529](https://github.com/xyflow/xyflow/pull/5529) [`da77772de`](https://github.com/xyflow/xyflow/commit/da77772debe6a0e730feacadf53210210178e7e2) Thanks [@peterkogo](https://github.com/peterkogo)! - Fix selected set to false on every node and edge eagerly
- [#5528](https://github.com/xyflow/xyflow/pull/5528) [`d50a963cd`](https://github.com/xyflow/xyflow/commit/d50a963cd0f00cd31236d760dcd7995218d80553) Thanks [@peterkogo](https://github.com/peterkogo)! - Let `NodeResizer` props change during ongoing resize
- [#5546](https://github.com/xyflow/xyflow/pull/5546) [`8a9ee2d83`](https://github.com/xyflow/xyflow/commit/8a9ee2d836776da42b867c6ba90d302fbbc79b37) Thanks [@0x0f0f0f](https://github.com/0x0f0f0f)! - Do not crash mini map if all nodes are hidden
- [#5547](https://github.com/xyflow/xyflow/pull/5547) [`1c8961207`](https://github.com/xyflow/xyflow/commit/1c8961207e8ac326098af18489465b36cdd2d831) Thanks [@moklick](https://github.com/moklick)! - Always call `onMoveEnd` when `onMoveStart` was called
- Updated dependencies [[`c17b49f4c`](https://github.com/xyflow/xyflow/commit/c17b49f4c16167da3f791430163edd592159d27d), [`6ffb9f790`](https://github.com/xyflow/xyflow/commit/6ffb9f7901c32f5b335aee2517f41bf87f274f32), [`d50a963cd`](https://github.com/xyflow/xyflow/commit/d50a963cd0f00cd31236d760dcd7995218d80553), [`6bb64b3ed`](https://github.com/xyflow/xyflow/commit/6bb64b3ed60f26c9ea8bc01c8d62fb9bf74cd634), [`8a9ee2d83`](https://github.com/xyflow/xyflow/commit/8a9ee2d836776da42b867c6ba90d302fbbc79b37), [`1c8961207`](https://github.com/xyflow/xyflow/commit/1c8961207e8ac326098af18489465b36cdd2d831)]:
- @xyflow/system@0.0.71
## 1.3.1
### Patch Changes

2
packages/svelte/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@xyflow/svelte",
"version": "1.3.1",
"version": "1.4.0",
"description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
"keywords": [
"svelte",

13
packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { getContext } from 'svelte';
import { hideOnSSR, portal } from '$lib/actions/portal';
import { hideOnSSR, portal } from '$lib/actions/portal';
import { useStore } from '$lib/store';
import type { EdgeLabelProps } from './types';
import { toPxString } from '$lib/utils';
@@ -19,12 +19,13 @@
}: EdgeLabelProps = $props();
const store = useStore();
const edgeId = getContext<string>('svelteflow__edge_id');
const id = getContext<string>('svelteflow__edge_id');
if (!edgeId) {
throw new Error('EdgeLabel must be used within an edge');
}
let z = $derived.by(() => {
return store.visible.edges.get(id)?.zIndex;
});
let z = $derived(store.visible.edges.get(edgeId)?.zIndex);
</script>
<div
@@ -39,7 +40,7 @@
style:z-index={z}
tabindex="-1"
onclick={() => {
if (selectEdgeOnClick && id) store.handleEdgeSelection(id);
if (selectEdgeOnClick) store.handleEdgeSelection(edgeId);
}}
{...rest}
>

25
packages/svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte
View File

@@ -4,35 +4,42 @@
import { useStore } from '$lib/store';
import { EdgeLabel } from '$lib/components/EdgeLabel';
import type { EdgeToolbarProps } from './types';
import { getContext } from 'svelte';
let {
edgeId,
x,
y,
alignX = 'center',
alignY = 'center',
isVisible,
selectEdgeOnClick,
class: className,
children,
...rest
}: EdgeToolbarProps = $props();
const store = useStore();
const edge = $derived(store.edgeLookup.get(edgeId));
const isActive = $derived(typeof isVisible === 'boolean' ? isVisible : edge?.selected);
const edgeId = getContext<string>('svelteflow__edge_id');
if (!edgeId) {
throw new Error('EdgeToolbar must be used within an edge');
}
const isActive = $derived(
typeof isVisible === 'boolean' ? isVisible : store.edgeLookup.get(edgeId)?.selected
);
const transform = $derived(getEdgeToolbarTransform(x, y, store.viewport.zoom, alignX, alignY));
const zIndex = $derived((edge?.zIndex ?? 0) + 1);
</script>
{#if store.domNode && isActive}
<EdgeLabel>
{#if isActive}
<EdgeLabel {selectEdgeOnClick} transparent>
<div
style:position="absolute"
style:transform
style:z-index={zIndex}
style:transform-origin="0 0"
class={['svelte-flow__edge-toolbar', className]}
data-id={edgeId}
{...rest}
class="svelte-flow__edge-toolbar"
data-id={edgeId ?? ''}
>
{@render children?.()}
</div>

3
packages/svelte/src/lib/plugins/EdgeToolbar/types.ts
View File

@@ -2,6 +2,7 @@ import type { EdgeToolbarBaseProps } from '@xyflow/system';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
export type EdgeToolbarProps = EdgeToolbarBaseProps & {
export type EdgeToolbarProps = Omit<EdgeToolbarBaseProps, 'edgeId'> & {
selectEdgeOnClick?: boolean;
children?: Snippet;
} & HTMLAttributes<HTMLDivElement>;

16
packages/system/CHANGELOG.md
View File

@@ -1,5 +1,21 @@
# @xyflow/system
## 0.0.71
### Patch Changes
- [#5544](https://github.com/xyflow/xyflow/pull/5544) [`c17b49f4c`](https://github.com/xyflow/xyflow/commit/c17b49f4c16167da3f791430163edd592159d27d) Thanks [@0x0f0f0f](https://github.com/0x0f0f0f)! - Add `EdgeToolbar` component
- [#5550](https://github.com/xyflow/xyflow/pull/5550) [`6ffb9f790`](https://github.com/xyflow/xyflow/commit/6ffb9f7901c32f5b335aee2517f41bf87f274f32) Thanks [@peterkogo](https://github.com/peterkogo)! - Prevent child nodes of different parents from overlapping
- [#5528](https://github.com/xyflow/xyflow/pull/5528) [`d50a963cd`](https://github.com/xyflow/xyflow/commit/d50a963cd0f00cd31236d760dcd7995218d80553) Thanks [@peterkogo](https://github.com/peterkogo)! - Let `NodeResizer` props change during ongoing resize
- [#5551](https://github.com/xyflow/xyflow/pull/5551) [`6bb64b3ed`](https://github.com/xyflow/xyflow/commit/6bb64b3ed60f26c9ea8bc01c8d62fb9bf74cd634) Thanks [@moklick](https://github.com/moklick)! - Allow to start a selection above a node
- [#5546](https://github.com/xyflow/xyflow/pull/5546) [`8a9ee2d83`](https://github.com/xyflow/xyflow/commit/8a9ee2d836776da42b867c6ba90d302fbbc79b37) Thanks [@0x0f0f0f](https://github.com/0x0f0f0f)! - Do not crash mini map if all nodes are hidden
- [#5547](https://github.com/xyflow/xyflow/pull/5547) [`1c8961207`](https://github.com/xyflow/xyflow/commit/1c8961207e8ac326098af18489465b36cdd2d831) Thanks [@moklick](https://github.com/moklick)! - Always call `onMoveEnd` when `onMoveStart` was called
## 0.0.70
### Patch Changes

2
packages/system/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@xyflow/system",
"version": "0.0.70",
"version": "0.0.71",
"description": "xyflow core system that powers React Flow and Svelte Flow.",
"keywords": [
"node-based UI",

4
packages/system/src/types/edges.ts
View File

@@ -131,10 +131,6 @@ export type EdgePosition = {
export type EdgeLookup<EdgeType extends EdgeBase = EdgeBase> = Map<string, EdgeType>;
export type EdgeToolbarBaseProps = {
/**
* An edge toolbar must be attached to an edge.
*/
edgeId: string;
/**
* The `x` position of the edge toolbar.
*/