diff --git a/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte b/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte index 2826a8ea..b72a4b17 100644 --- a/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte +++ b/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte @@ -13,7 +13,7 @@ import '@xyflow/svelte/dist/style.css'; - const nodes = writable([ + const nodes = writable([ { id: '1', type: 'input', @@ -55,8 +55,6 @@ const onDragOver = (event: DragEvent) => { event.preventDefault(); - console.log(event); - if (event.dataTransfer) { event.dataTransfer.dropEffect = 'move'; } @@ -81,7 +79,8 @@ data: { label: `${type} node` } }; - nodes.update((nds) => nds.concat(newNode)); + $nodes.push(newNode); + $nodes = $nodes; }; $: { diff --git a/examples/svelte/src/routes/examples/intersections/Flow.svelte b/examples/svelte/src/routes/examples/intersections/Flow.svelte index f3f80335..12c98e00 100644 --- a/examples/svelte/src/routes/examples/intersections/Flow.svelte +++ b/examples/svelte/src/routes/examples/intersections/Flow.svelte @@ -12,8 +12,8 @@ const { getIntersectingNodes } = useSvelteFlow(); - function onNodeDrag({ detail: { node } }) { - const intersections = getIntersectingNodes(node).map((n) => n.id); + function onNodeDrag({ detail: { targetNode } }) { + const intersections = getIntersectingNodes(targetNode).map((n) => n.id); $nodes.forEach((n) => { n.class = intersections.includes(n.id) ? 'highlight' : ''; diff --git a/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts b/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts index fffb59b8..7b094ce2 100644 --- a/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts +++ b/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts @@ -1,28 +1,28 @@ import type { Node, Edge } from '@xyflow/svelte'; export const initialNodes: Node[] = [ - { - id: '1', - data: { label: 'Node 1' }, - position: { x: 0, y: 0 }, - style: 'width: 200px; height: 100px;' - }, - { - id: '2', - data: { label: 'Node 2' }, - position: { x: 0, y: 150 } - }, - { - id: '3', - data: { label: 'Node 3' }, - position: { x: 250, y: 0 } - }, - { - id: '4', - data: { label: 'Node' }, - position: { x: 350, y: 150 }, - style: 'width: 50px; height: 50px;' - } + { + id: '1', + data: { label: 'Node 1' }, + position: { x: 0, y: 0 }, + style: 'width: 200px; height: 100px;' + }, + { + id: '2', + data: { label: 'Node 2' }, + position: { x: 0, y: 150 } + }, + { + id: '3', + data: { label: 'Node 3' }, + position: { x: 250, y: 0 } + }, + { + id: '4', + data: { label: 'Node' }, + position: { x: 350, y: 150 }, + style: 'width: 50px; height: 50px;' + } ]; export const initialEdges: Edge[] = []; diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte index d5955501..436d2109 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte +++ b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte @@ -11,6 +11,7 @@ type $$Props = NodeProps; export let id: $$Props['id']; + $$restProps; const connections = useHandleConnections({ nodeId: id, diff --git a/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte index c1642da2..1fe5ff70 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte +++ b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte @@ -7,6 +7,7 @@ export let data: $$Props['data']; const { updateNodeData } = useSvelteFlow(); + $$restProps;
diff --git a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte index be15ac9a..55960cb5 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte +++ b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte @@ -12,6 +12,8 @@ type $$Props = NodeProps; export let id: $$Props['id']; + export let data: $$Props['data']; + $$restProps; const { updateNodeData } = useSvelteFlow(); const connections = useHandleConnections({ @@ -22,8 +24,12 @@ $: nodeData = useNodesData($connections[0]?.source); $: textNode = isTextNode($nodeData) ? $nodeData : null; + $: console.log(textNode?.data, data); + $: { - updateNodeData(id, { text: textNode?.data.text.toUpperCase() || '' }); + const input = textNode?.data.text.toUpperCase() ?? ''; + updateNodeData(id, { text: input }); + console.log('updatedNodeData with', input); } diff --git a/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx index 1fc6f25c..f14f822e 100644 --- a/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx +++ b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx @@ -74,7 +74,7 @@ export function NodeToolbar({ } const nodeRect: Rect = getNodesBounds(nodes, { nodeOrigin }); - const zIndex: number = Math.max(...nodes.map((node) => (node.internals?.z || 1) + 1)); + const zIndex: number = Math.max(...nodes.map((node) => node.internals.z + 1)); const wrapperStyle: CSSProperties = { position: 'absolute', diff --git a/packages/react/src/components/ConnectionLine/index.tsx b/packages/react/src/components/ConnectionLine/index.tsx index 54b3f24d..4ca5c106 100644 --- a/packages/react/src/components/ConnectionLine/index.tsx +++ b/packages/react/src/components/ConnectionLine/index.tsx @@ -52,7 +52,7 @@ const ConnectionLine = ({ ), shallow ); - const fromHandleBounds = fromNode?.internals?.handleBounds; + const fromHandleBounds = fromNode?.internals.handleBounds; let handleBounds = fromHandleBounds?.[handleType]; if (connectionMode === ConnectionMode.Loose) { @@ -66,8 +66,8 @@ const ConnectionLine = ({ const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0]; const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.measured.width ?? 0) / 2; const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.measured.height ?? 0; - const fromX = (fromNode.internals.positionAbsolute.x ?? 0) + fromHandleX; - const fromY = (fromNode.internals.positionAbsolute.y ?? 0) + fromHandleY; + const fromX = fromNode.internals.positionAbsolute.x + fromHandleX; + const fromY = fromNode.internals.positionAbsolute.y + fromHandleY; const fromPosition = fromHandle?.position; const toPosition = fromPosition ? oppositePosition[fromPosition] : null; diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts index 89fec455..a01a894a 100644 --- a/packages/react/src/types/nodes.ts +++ b/packages/react/src/types/nodes.ts @@ -24,6 +24,12 @@ export type Node< focusable?: boolean; }; +/** + * The node data structure that gets used for internal nodes. + * There are some data structures added under node.internal + * that are needed for tracking some properties + * @public + */ export type InternalNode = InternalNodeBase; export type NodeMouseHandler = (event: ReactMouseEvent, node: NodeType) => void; diff --git a/packages/svelte/.prettierignore b/packages/svelte/.prettierignore index 38972655..33affffb 100644 --- a/packages/svelte/.prettierignore +++ b/packages/svelte/.prettierignore @@ -1,6 +1,7 @@ .DS_Store node_modules /build +/dist /.svelte-kit /package .env diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index 5217686c..f93688fc 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -42,7 +42,7 @@ const { connectionMode, domNode, - nodes, + nodeLookup, connectionRadius, viewport, isValidConnection, @@ -72,7 +72,7 @@ isTarget, connectionRadius: $connectionRadius, domNode: $domNode, - nodes: $nodes, + nodeLookup: $nodeLookup, connectionMode: $connectionMode, lib: $lib, autoPanOnConnect: $autoPanOnConnect, diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index e502cd50..a466d0ad 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -35,8 +35,8 @@ export let sourcePosition: $$Props['sourcePosition'] = undefined; export let targetPosition: $$Props['targetPosition'] = undefined; export let zIndex: $$Props['zIndex']; - export let computedWidth: $$Props['computedWidth'] = undefined; - export let computedHeight: $$Props['computedHeight'] = undefined; + export let measuredWidth: $$Props['measuredWidth'] = undefined; + export let measuredHeight: $$Props['measuredHeight'] = undefined; export let initialWidth: $$Props['initialWidth'] = undefined; export let initialHeight: $$Props['initialHeight'] = undefined; export let width: $$Props['width'] = undefined; @@ -79,8 +79,8 @@ height, initialWidth, initialHeight, - computedWidth, - computedHeight + measuredWidth, + measuredHeight }); $: { diff --git a/packages/svelte/src/lib/components/NodeWrapper/types.ts b/packages/svelte/src/lib/components/NodeWrapper/types.ts index a290ec08..7277be5f 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/types.ts +++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts @@ -21,8 +21,8 @@ export type NodeWrapperProps = Pick< | 'initialWidth' | 'initialHeight' > & { - computedWidth?: number; - computedHeight?: number; + measuredWidth?: number; + measuredHeight?: number; type: string; positionX: number; positionY: number; diff --git a/packages/svelte/src/lib/components/NodeWrapper/utils.ts b/packages/svelte/src/lib/components/NodeWrapper/utils.ts index b2609587..f795e31d 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/utils.ts +++ b/packages/svelte/src/lib/components/NodeWrapper/utils.ts @@ -3,20 +3,20 @@ export function getNodeInlineStyleDimensions({ height, initialWidth, initialHeight, - computedWidth, - computedHeight + measuredWidth, + measuredHeight }: { width?: number; height?: number; initialWidth?: number; initialHeight?: number; - computedWidth?: number; - computedHeight?: number; + measuredWidth?: number; + measuredHeight?: number; }): { width: string | undefined; height: string | undefined; } { - if (computedWidth === undefined && computedHeight === undefined) { + if (measuredWidth === undefined && measuredHeight === undefined) { const styleWidth = width ?? initialWidth; const styleHeight = height ?? initialHeight; diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte index 8761942d..ae400eb5 100644 --- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte +++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte @@ -1,11 +1,6 @@