migrate nodetoolbar

packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte

@@ -1,38 +1,32 @@
 <script lang="ts">
   import { getContext } from 'svelte';
   import { Position, getNodeToolbarTransform } from '@xyflow/system';
-  import portal from '$lib/actions/portal';
-  import type { InternalNode } from '$lib/types';
-  import { useStore } from '$lib/store';
 
-  import type { NodeToolbarProps } from './types';
+  import portal from '$lib/actions/portal';
+  import { useStore } from '$lib/store';
   import { useSvelteFlow } from '$lib/hooks/useSvelteFlow';
 
-  type $$Props = NodeToolbarProps;
+  import type { InternalNode } from '$lib/types';
+  import type { NodeToolbarProps } from './types';
 
-  export let nodeId: $$Props['nodeId'] = undefined;
-  export let position: $$Props['position'] = undefined;
-  export let align: $$Props['align'] = undefined;
-  export let offset: $$Props['offset'] = undefined;
-  export let isVisible: $$Props['isVisible'] = undefined;
+  let {
+    nodeId,
+    position = Position.Top,
+    align = 'center',
+    offset = 10,
+    isVisible,
+    children
+  }: NodeToolbarProps = $props();
 
   const { domNode, viewport, nodeLookup, nodes } = useStore();
   const { getNodesBounds } = useSvelteFlow();
   const contextNodeId = getContext<string>('svelteflow__node_id');
 
-  let transform: string;
-  let toolbarNodes: InternalNode[] = [];
-  let _offset = offset !== undefined ? offset : 10;
-  let _position = position !== undefined ? position : Position.Top;
-  let _align = align !== undefined ? align : 'center';
-
-  $: {
-    // nly needed to trigger updates, $nodeLookup is just a helper that does not trigger any updates
+  let toolbarNodes: InternalNode[] = $derived.by(() => {
     $nodes;
+    const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId ?? contextNodeId];
 
-    const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId];
-
-    toolbarNodes = nodeIds.reduce<InternalNode[]>((res, nodeId) => {
+    return nodeIds.reduce<InternalNode[]>((res, nodeId) => {
       const node = $nodeLookup.get(nodeId);
 
       if (node) {
@@ -41,29 +35,31 @@
 
       return res;
     }, []);
-  }
+  });
 
-  $: {
+  let transform: string = $derived.by(() => {
     const nodeRect = getNodesBounds(toolbarNodes);
-
     if (nodeRect) {
-      transform = getNodeToolbarTransform(nodeRect, $viewport, _position, _offset, _align);
+      return getNodeToolbarTransform(nodeRect, $viewport, position, offset, align);
     }
-  }
+    return '';
+  });
 
-  $: zIndex =
+  let zIndex = $derived(
     toolbarNodes.length === 0
       ? 1
-      : Math.max(...toolbarNodes.map((node) => (node.internals.z || 5) + 1));
+      : Math.max(...toolbarNodes.map((node) => (node.internals.z || 5) + 1))
+  );
 
   //FIXME: Possible performance bottleneck
-  $: selectedNodesCount = $nodes.filter((node) => node.selected).length;
+  let selectedNodesCount = $derived($nodes.filter((node) => node.selected).length);
 
   // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
-  $: isActive =
+  let isActive = $derived(
     typeof isVisible === 'boolean'
       ? isVisible
-      : toolbarNodes.length === 1 && toolbarNodes[0].selected && selectedNodesCount === 1;
+      : toolbarNodes.length === 1 && toolbarNodes[0].selected && selectedNodesCount === 1
+  );
 </script>
 
 {#if $domNode && isActive && toolbarNodes}
@@ -75,6 +71,6 @@
     style:transform
     style:z-index={zIndex}
   >
-    <slot />
+    {@render children?.()}
   </div>
 {/if}

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

@@ -1,4 +1,5 @@
 import type { Position, Align } from '@xyflow/system';
+import type { Snippet } from 'svelte';
 
 export type NodeToolbarProps = {
   /** The id of the node, or array of ids the toolbar should be displayed at */
@@ -16,4 +17,5 @@ export type NodeToolbarProps = {
   offset?: number;
   /** If true, node toolbar is visible even if node is not selected */
   isVisible?: boolean;
+  children?: Snippet;
 };