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