diff --git a/packages/svelte/src/lib/actions/drag/utils.ts b/packages/svelte/src/lib/actions/drag/utils.ts index cd3a1d33..c7a78848 100644 --- a/packages/svelte/src/lib/actions/drag/utils.ts +++ b/packages/svelte/src/lib/actions/drag/utils.ts @@ -73,6 +73,7 @@ export function calcNextPosition( if (node.extent === 'parent') { if (node.parentNode && node.width && node.height) { const parent = nodes.find((n) => n.id === node.parentNode)!; + const parentOrigin = parent.origin || nodeOrigin; const { x: parentX, y: parentY } = parent.positionAbsolute!; currentExtent = parent && @@ -81,10 +82,10 @@ export function calcNextPosition( isNumeric(parent.width) && isNumeric(parent.height) ? [ - [parentX + node.width * nodeOrigin[0], parentY + node.height * nodeOrigin[1]], + [parentX + node.width * parentOrigin[0], parentY + node.height * parentOrigin[1]], [ - parentX + parent.width! - node.width + node.width * nodeOrigin[0], - parentY + parent.height! - node.height + node.height * nodeOrigin[1] + parentX + parent.width! - node.width + node.width * parentOrigin[0], + parentY + parent.height! - node.height + node.height * parentOrigin[1] ] ] : currentExtent; diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte index 27c61195..c6e79d82 100644 --- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte +++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte @@ -5,10 +5,10 @@ import { Selection } from '$lib/components/Selection'; import drag from '$lib/actions/drag'; - const { selectionRectMode, nodes, nodeOrigin, transform, updateNodePositions } = useStore(); + const { selectionRectMode, nodes, transform, updateNodePositions } = useStore(); $: selectedNodes = $nodes.filter((n) => n.selected); - $: rect = getRectOfNodes(selectedNodes, $nodeOrigin); + $: rect = getRectOfNodes(selectedNodes); {#if selectedNodes && $selectionRectMode === 'nodes'} diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte index 4d6432fd..473e2ec9 100644 --- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte +++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte @@ -5,7 +5,7 @@ import { NodeWrapper } from '$lib/components/NodeWrapper'; import { useStore } from '$lib/store'; - const { nodes, nodeOrigin, updateNodeDimensions } = useStore(); + const { nodes, updateNodeDimensions } = useStore(); const resizeObserver: ResizeObserver | null = typeof ResizeObserver === 'undefined' @@ -31,7 +31,7 @@ y: node.positionAbsolute?.y ?? 0, width: node.width ?? 0, height: node.height ?? 0, - origin: $nodeOrigin + origin: node.origin })} (2), fitViewOnInit: writable(false), fitViewOnInitDone: writable(false), - nodeOrigin: writable([0, 0]), d3: writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>({ zoom: null, selection: null diff --git a/packages/svelte/src/routes/usesvelteflow/+page.svelte b/packages/svelte/src/routes/usesvelteflow/+page.svelte index 75523728..d536801f 100644 --- a/packages/svelte/src/routes/usesvelteflow/+page.svelte +++ b/packages/svelte/src/routes/usesvelteflow/+page.svelte @@ -26,7 +26,7 @@ data: { label: 'Output Node' }, position: { x: 300, y: 150 } } - ]); + ], { origin: [0.5, 0.5] }); const edges = createEdges([ {