fix(svelte): use absolute position instead of origin position

This commit is contained in:
moklick
2024-06-26 13:43:32 +02:00
parent a8c9b93fe7
commit ef14ba025c
5 changed files with 5 additions and 19 deletions
@@ -31,8 +31,6 @@
export let isParent: $$Props['isParent'] = false; export let isParent: $$Props['isParent'] = false;
export let positionX: $$Props['positionX']; export let positionX: $$Props['positionX'];
export let positionY: $$Props['positionY']; export let positionY: $$Props['positionY'];
export let positionOriginX: $$Props['positionOriginX'];
export let positionOriginY: $$Props['positionOriginY'];
export let sourcePosition: $$Props['sourcePosition'] = undefined; export let sourcePosition: $$Props['sourcePosition'] = undefined;
export let targetPosition: $$Props['targetPosition'] = undefined; export let targetPosition: $$Props['targetPosition'] = undefined;
export let zIndex: $$Props['zIndex']; export let zIndex: $$Props['zIndex'];
@@ -181,7 +179,7 @@
class:nopan={draggable} class:nopan={draggable}
class:parent={isParent} class:parent={isParent}
style:z-index={zIndex} style:z-index={zIndex}
style:transform="translate({positionOriginX}px, {positionOriginY}px)" style:transform="translate({positionX}px, {positionY}px)"
style:visibility={initialized ? 'visible' : 'hidden'} style:visibility={initialized ? 'visible' : 'hidden'}
style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}" style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
on:click={onSelectNodeHandler} on:click={onSelectNodeHandler}
@@ -28,8 +28,6 @@ export type NodeWrapperProps = Pick<
type: string; type: string;
positionX: number; positionX: number;
positionY: number; positionY: number;
positionOriginX: number;
positionOriginY: number;
'on:nodeclick'?: (event: MouseEvent) => void; 'on:nodeclick'?: (event: MouseEvent) => void;
resizeObserver?: ResizeObserver | null; resizeObserver?: ResizeObserver | null;
isParent?: boolean; isParent?: boolean;
@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
import { getPositionWithOrigin, getNodeDimensions, nodeHasDimensions } from '@xyflow/system'; import { nodeHasDimensions } from '@xyflow/system';
import { NodeWrapper } from '$lib/components/NodeWrapper'; import { NodeWrapper } from '$lib/components/NodeWrapper';
import { useStore } from '$lib/store'; import { useStore } from '$lib/store';
@@ -40,13 +40,6 @@
<div class="svelte-flow__nodes"> <div class="svelte-flow__nodes">
{#each $visibleNodes as node (node.id)} {#each $visibleNodes as node (node.id)}
{@const nodeDimesions = getNodeDimensions(node)}
{@const posOrigin = getPositionWithOrigin({
x: node.internals.positionAbsolute.x,
y: node.internals.positionAbsolute.y,
...nodeDimesions,
origin: node.origin
})}
<NodeWrapper <NodeWrapper
{node} {node}
id={node.id} id={node.id}
@@ -65,8 +58,6 @@
deletable={node.deletable ?? true} deletable={node.deletable ?? true}
positionX={node.internals.positionAbsolute.x} positionX={node.internals.positionAbsolute.x}
positionY={node.internals.positionAbsolute.y} positionY={node.internals.positionAbsolute.y}
positionOriginX={posOrigin.x ?? 0}
positionOriginY={posOrigin.y ?? 0}
isParent={$parentLookup.has(node.id)} isParent={$parentLookup.has(node.id)}
style={node.style} style={node.style}
class={node.class} class={node.class}
@@ -11,7 +11,6 @@
getBoundsOfRects, getBoundsOfRects,
getInternalNodesBounds, getInternalNodesBounds,
getNodeDimensions, getNodeDimensions,
getNodePositionWithOrigin,
nodeHasDimensions, nodeHasDimensions,
type Rect type Rect
} from '@xyflow/system'; } from '@xyflow/system';
@@ -134,11 +133,10 @@
{#each $nodes as userNode (userNode.id)} {#each $nodes as userNode (userNode.id)}
{@const node = $nodeLookup.get(userNode.id)} {@const node = $nodeLookup.get(userNode.id)}
{#if node && nodeHasDimensions(node)} {#if node && nodeHasDimensions(node)}
{@const pos = getNodePositionWithOrigin(node)}
{@const nodeDimesions = getNodeDimensions(node)} {@const nodeDimesions = getNodeDimensions(node)}
<MinimapNode <MinimapNode
x={pos.x} x={node.internals.positionAbsolute.x}
y={pos.y} y={node.internals.positionAbsolute.y}
{...nodeDimesions} {...nodeDimesions}
selected={node.selected} selected={node.selected}
color={nodeColorFunc?.(node)} color={nodeColorFunc?.(node)}
+1
View File
@@ -122,6 +122,7 @@ export function createStore({
} }
case 'position': case 'position':
node.position = change.position ?? node.position; node.position = change.position ?? node.position;
break; break;
} }
} }