diff --git a/examples/svelte/package.json b/examples/svelte/package.json index 4fba871e..33859262 100644 --- a/examples/svelte/package.json +++ b/examples/svelte/package.json @@ -21,7 +21,7 @@ "eslint-plugin-svelte": "^2.46.1", "prettier": "^3.4.2", "prettier-plugin-svelte": "^3.3.2", - "svelte": "^5.7.1", + "svelte": "^5.9.0", "svelte-check": "^4.1.1", "tslib": "^2.8.1", "typescript": "^5.6.3", diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte index efdeb35c..fd67cf7e 100644 --- a/examples/svelte/src/routes/examples/overview/+page.svelte +++ b/examples/svelte/src/routes/examples/overview/+page.svelte @@ -1,5 +1,4 @@ update edge type - + diff --git a/examples/svelte/vite.config.ts b/examples/svelte/vite.config.ts index 17c69201..e1aa83a9 100644 --- a/examples/svelte/vite.config.ts +++ b/examples/svelte/vite.config.ts @@ -3,6 +3,9 @@ import { defineConfig } from 'vite'; export default defineConfig({ plugins: [sveltekit()], + build: { + sourcemap: true + }, server: { fs: { // Allow serving files from one level up to the project root diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 07862bfd..2344143f 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -58,6 +58,7 @@ "@sveltejs/adapter-auto": "^3.3.1", "@sveltejs/kit": "^2.9.0", "@sveltejs/package": "^2.3.7", + "@sveltejs/vite-plugin-svelte": "^5.0.1", "@typescript-eslint/eslint-plugin": "^8.17.0", "@typescript-eslint/parser": "^8.17.0", "autoprefixer": "^10.4.20", @@ -74,7 +75,7 @@ "postcss-rename": "^0.6.1", "prettier": "^3.4.2", "prettier-plugin-svelte": "^3.3.2", - "svelte": "^5.7.1", + "svelte": "^5.9.0", "svelte-check": "^4.1.1", "svelte-eslint-parser": "^0.43.0", "svelte-preprocess": "^6.0.3", diff --git a/packages/svelte/src/lib/actions/drag/index.ts b/packages/svelte/src/lib/actions/drag/index.ts index 2b3ef6ec..ec8e5307 100644 --- a/packages/svelte/src/lib/actions/drag/index.ts +++ b/packages/svelte/src/lib/actions/drag/index.ts @@ -28,9 +28,9 @@ export default function drag(domNode: Element, params: UseDragParams) { const { snapGrid, viewport } = store; return { - nodes: get(store.nodes), + nodes: store.nodes, nodeLookup: store.nodeLookup, - edges: get(store.edges), + edges: store.edges, nodeExtent: store.nodeExtent, snapGrid: snapGrid ? snapGrid : [0, 0], snapToGrid: !!snapGrid, diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index f0da0103..9f4c0227 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -40,7 +40,7 @@ ); let store = useStore(); - let { edges } = store; + // let { edges } = store; function onPointerDown(event: MouseEvent | TouchEvent) { const isMouseTriggered = isMouseEvent(event); @@ -91,7 +91,8 @@ $effect.pre(() => { // connectionLookup is not reactive, so we use edges to get notified about updates // eslint-disable-next-line @typescript-eslint/no-unused-expressions - $edges; + // $edges; + store.edges; if (onconnect || ondisconnect) { let connections = store.connectionLookup.get(`${nodeId}-${type}-${handleId}`); diff --git a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte index ccbbf90a..0b43df3c 100644 --- a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte +++ b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte @@ -20,7 +20,7 @@ zoomActivationKey = isMacOs() ? 'Meta' : 'Control' }: KeyHandlerProps = $props(); - const { nodes: _nodes, edges: _edges } = store; + // const { nodes: _nodes, edges: _edges } = store; function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject { return key !== null && typeof key === 'object'; @@ -66,22 +66,22 @@ } async function handleDelete() { - const nodes = get(_nodes); - const edges = get(_edges); - const selectedNodes = nodes.filter((node) => node.selected); - const selectedEdges = edges.filter((edge) => edge.selected); + // const nodes = get(_nodes); + // const edges = get(_edges); + const selectedNodes = store.nodes.filter((node) => node.selected); + const selectedEdges = store.edges.filter((edge) => edge.selected); const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({ nodesToRemove: selectedNodes, edgesToRemove: selectedEdges, - nodes, - edges, + nodes: store.nodes, + edges: store.edges, onBeforeDelete: store.onbeforedelete }); if (matchingNodes.length || matchingEdges.length) { - _nodes.update((nds) => nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.id))); - _edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id))); + // _nodes.update((nds) => nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.id))); + // _edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id))); store.ondelete?.({ nodes: matchingNodes, diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte index 0a8a8957..c32d327e 100644 --- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte +++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte @@ -15,24 +15,24 @@ onselectioncontextmenu }: NodeSelectionProps = $props(); - const { nodes } = store; + // const { nodes } = store; let bounds: Rect | null = $derived.by(() => { if (store.selectionRectMode === 'nodes') { // eslint-disable-next-line @typescript-eslint/no-unused-expressions - $nodes; + store.nodes; return getInternalNodesBounds(store.nodeLookup, { filter: (node) => !!node.selected }); } return null; }); function oncontextmenu(event: MouseEvent | TouchEvent) { - const selectedNodes = $nodes.filter((n) => n.selected); + const selectedNodes = store.nodes.filter((n) => n.selected); onselectioncontextmenu?.({ nodes: selectedNodes, event }); } function onclick(event: MouseEvent | TouchEvent) { - const selectedNodes = $nodes.filter((n) => n.selected); + const selectedNodes = store.nodes.filter((n) => n.selected); onselectionclick?.({ nodes: selectedNodes, event }); } diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte index 5c2ab8b5..f03e06d3 100644 --- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte +++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte @@ -14,11 +14,11 @@ onedgemouseleave }: { store: SvelteFlowStore } & EdgeEvents = $props(); - const { edges, nodes } = store; + // const { edges, nodes } = store; let layoutedEdges = $derived.by(() => { - $nodes; - const layoutedEdges = $edges.reduce((res, edge) => { + store.nodes; + const layoutedEdges = store.edges.reduce((res, edge) => { const sourceNode = store.nodeLookup.get(edge.source); const targetNode = store.nodeLookup.get(edge.target); diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte index 138a9d1d..0dc022f4 100644 --- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte +++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte @@ -2,7 +2,7 @@ import { onDestroy } from 'svelte'; import { nodeHasDimensions } from '@xyflow/system'; - import type { NodeEvents } from '$lib/types'; + import type { Node, NodeEvents } from '$lib/types'; import { NodeWrapper } from '$lib/components/NodeWrapper'; import type { SvelteFlowStore } from '$lib/store/types'; @@ -19,7 +19,7 @@ onnodedragstop }: { store: SvelteFlowStore; nodeClickDistance?: number } & NodeEvents = $props(); - const { nodes } = store; + // const { nodes } = store; const resizeObserver: ResizeObserver | null = typeof ResizeObserver === 'undefined' @@ -43,10 +43,19 @@ onDestroy(() => { resizeObserver?.disconnect(); }); + + function give(node: Node) { + const internalNode = store.nodeLookup.get(node.id); + // console.log('this reruns most definitely', internalNode); + console.log(internalNode?.position); + return internalNode; + } + + // $inspect(store.nodes).with(console.trace);
- {#each $nodes as node (node.id)} + {#each store.nodes as node (node.id)} {@const internalNode = store.nodeLookup.get(node.id)} n.id); - const prevSelectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id); + const prevSelectedEdgeIds = getConnectedEdges(selectedNodes, store.edges).map((e) => e.id); selectedNodes = getNodesInside( store.nodeLookup, @@ -135,7 +135,7 @@ store.selectionMode === SelectionMode.Partial, true ); - const selectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id); + const selectedEdgeIds = getConnectedEdges(selectedNodes, store.edges).map((e) => e.id); const selectedNodeIds = selectedNodes.map((n) => n.id); // this prevents unnecessary updates while updating the selection rectangle @@ -143,14 +143,14 @@ prevSelectedNodeIds.length !== selectedNodeIds.length || selectedNodeIds.some((id) => !prevSelectedNodeIds.includes(id)) ) { - nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds))); + // store.nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds))); } if ( prevSelectedEdgeIds.length !== selectedEdgeIds.length || selectedEdgeIds.some((id) => !prevSelectedEdgeIds.includes(id)) ) { - edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds))); + // store.edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds))); } store.selectionRectMode = 'user'; diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 1b74e198..54f7edb6 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -1,5 +1,8 @@ + + + -
- - +{#if store.adoptNodes && store.adoptEdges} +
- - - - -
-
- - - - - - - - {@render children?.()} -
+ + + + + + +
+
+ + + + + + + + {@render children?.()} +
+{/if}