Merge branch 'main' into chore/tsdocs-adjustments

.changeset/brave-plums-work.md

@@ -1,7 +0,0 @@
----
-'@xyflow/react': minor
-'@xyflow/svelte': minor
-'@xyflow/system': patch
----
-
-Add `EdgeToolbar` component

.changeset/curly-steaks-check.md

@@ -1,5 +0,0 @@
----
-'@xyflow/react': patch
----
-
-Add `type` property to `EdgeProps` to match `NodeProps` behavior

.changeset/dark-mice-rest.md

@@ -1,5 +0,0 @@
----
-'@xyflow/svelte': patch
----
-
-Suppress `svelte/prefer-svelte-reactivity` warnings

.changeset/early-bananas-kick.md

@@ -1,5 +0,0 @@
----
-'@xyflow/svelte': patch
----
-
-Fix selected set to false on every node and edge eagerly

.changeset/eighty-wolves-cheat.md

@@ -1,7 +0,0 @@
----
-'@xyflow/system': patch
-'@xyflow/react': minor
-'@xyflow/svelte': minor
----
-
-Prevent child nodes of different parents from overlapping

.changeset/flat-horses-smile.md

@@ -1,7 +0,0 @@
----
-'@xyflow/system': patch
-'@xyflow/react': patch
-'@xyflow/svelte': patch
----
-
-Let `NodeResizer` props change during ongoing resize

.changeset/fresh-groups-kneel.md

@@ -1,7 +0,0 @@
----
-'@xyflow/svelte': minor
-'@xyflow/system': patch
-'@xyflow/react': minor
----
-
-Allow to start a selection above a node

.changeset/giant-foxes-roll.md

@@ -1,6 +0,0 @@
----
-'@xyflow/svelte': patch
-'@xyflow/system': patch
----
-
-Do not crash mini map if all nodes are hidden

.changeset/lazy-yaks-occur.md

@@ -1,5 +0,0 @@
----
-'@xyflow/react': patch
----
-
-Improve performance of adding nodes & edges

.changeset/lucky-shoes-design.md

@@ -1,5 +0,0 @@
----
-'@xyflow/svelte': minor
----
-
-Add `resizeDirection` prop to `ResizeControls`

.changeset/nasty-clouds-shake.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Remove `edgeId` from `EdgeToolbar` props

.changeset/ripe-paths-dream.md

@@ -1,7 +0,0 @@
----
-'@xyflow/react': patch
-'@xyflow/svelte': patch
-'@xyflow/system': patch
----
-
-Always call `onMoveEnd` when `onMoveStart` was called

packages/react/CHANGELOG.md

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

packages/react/package.json

@@ -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",

packages/react/src/additional-components/EdgeToolbar/types.ts

@@ -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;
   };

packages/svelte/CHANGELOG.md

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

packages/svelte/package.json

@@ -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",

packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte

@@ -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(() => {
+  let z = $derived(store.visible.edges.get(edgeId)?.zIndex);
-    return store.visible.edges.get(id)?.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}
 >

packages/svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte

@@ -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 edgeId = getContext<string>('svelteflow__edge_id');
-  const isActive = $derived(typeof isVisible === 'boolean' ? isVisible : edge?.selected);
+
+  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}
+{#if isActive}
-  <EdgeLabel>
+  <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>

packages/svelte/src/lib/plugins/EdgeToolbar/types.ts

@@ -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>;

packages/system/CHANGELOG.md

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

packages/system/package.json

@@ -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",

packages/system/src/types/edges.ts

@@ -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.
    */