fix changing handle sides

This commit is contained in:
peterkogo
2025-04-29 18:46:45 +02:00
parent 6e88192970
commit 86211fa753
2 changed files with 20 additions and 8 deletions
@@ -14,7 +14,8 @@
ConnectionMode, ConnectionMode,
ControlButton, ControlButton,
type FitViewOptions, type FitViewOptions,
useSvelteFlow useSvelteFlow,
Position
} from '@xyflow/svelte'; } from '@xyflow/svelte';
import CustomNode from './CustomNode.svelte'; import CustomNode from './CustomNode.svelte';
@@ -229,6 +230,15 @@
<button onclick={moveNode}>update node pos</button> <button onclick={moveNode}>update node pos</button>
<button onclick={changeEdgeType}>update edge type</button> <button onclick={changeEdgeType}>update edge type</button>
<button onclick={hideUnhide}>hide/unhide</button> <button onclick={hideUnhide}>hide/unhide</button>
<button
onclick={() => {
nodes = nodes.map((node) => ({
...node,
sourcePosition: Position.Right,
targetPosition: Position.Left
}));
}}>left-right</button
>
</Panel> </Panel>
<InitTracker /> <InitTracker />
@@ -78,9 +78,12 @@
let nodeRef: HTMLDivElement | null = $state(null); let nodeRef: HTMLDivElement | null = $state(null);
let prevNodeRef: HTMLDivElement | null = null; let prevNodeRef: HTMLDivElement | null = null;
let prevType: string | undefined; // svelte-ignore state_referenced_locally
let prevSourcePosition: Position | undefined; let prevType: string | undefined = type;
let prevTargetPosition: Position | undefined; // svelte-ignore state_referenced_locally
let prevSourcePosition: Position | undefined = sourcePosition;
// svelte-ignore state_referenced_locally
let prevTargetPosition: Position | undefined = targetPosition;
let NodeComponent = $derived(store.nodeTypes[type] ?? DefaultNode); let NodeComponent = $derived(store.nodeTypes[type] ?? DefaultNode);
@@ -116,9 +119,9 @@
// if type, sourcePosition or targetPosition changes, // if type, sourcePosition or targetPosition changes,
// we need to re-calculate the handle positions // we need to re-calculate the handle positions
const doUpdate = const doUpdate =
(prevType && type !== prevType) || type !== prevType ||
(prevSourcePosition && sourcePosition !== prevSourcePosition) || sourcePosition !== prevSourcePosition ||
(prevTargetPosition && targetPosition !== prevTargetPosition); targetPosition !== prevTargetPosition;
if (doUpdate && nodeRef !== null) { if (doUpdate && nodeRef !== null) {
requestAnimationFrame(() => { requestAnimationFrame(() => {
@@ -144,7 +147,6 @@
prevTargetPosition = targetPosition; prevTargetPosition = targetPosition;
}); });
// TODO: extract this part!
$effect(() => { $effect(() => {
/* eslint-disable @typescript-eslint/no-unused-expressions */ /* eslint-disable @typescript-eslint/no-unused-expressions */
if (resizeObserver && (!initialized || nodeRef !== prevNodeRef)) { if (resizeObserver && (!initialized || nodeRef !== prevNodeRef)) {