fix(svelte): use absolute position instead of origin position
This commit is contained in:
@@ -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)}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user