#Node moving itself?

1 messages · Page 1 of 1 (latest)

worn valley
#

Hello peeps, in a thing I'm working on I have a (admittedly scuffed) undo/redo implementation that works fairly well, but I can't for the life of me get this one bug figured out. If a node's dimensions change with an undo, and then an edge connected to that node gets deleted with an undo, the node moves (not by my doing, this is the issue), and when the edge is re-added by a redo it just ends up disconnected from the actual node. This only resolves itself when the node's dimensions change again, not even when the node is moved. Any pointers on what could be going wrong would be great, the code for the thing isn't publicly available yet but I'm happy to answer questions.

worn valley
#

Hmm, if I just always force a updateNodeInternals on every node after an undo or redo, everything works. However, if I only do an updateNodeInternals on the nodes whose text changes, it doesn't. Very weird.

#

Do I maybe have to do the update on nodes whose connecting edges have changed? That seems weird given the documentation for the function. Though I do have to admit I don't fully understand it.

prisma marten
#

@worn valley is it possible for you share some sample how you are able to bend the svg and how to add toolbar on top of the links between cards ??

worn valley
#

You can use a custom edge and provide your own svg path for it. You can put pretty much anything you want in EdgeLabel, you can put it at some specified position with the x and y props and make it draggable by listening to <svelte:window onpointermove={...} /> and converting screen coordinates to SvelteFlow coordinates via screenToFlowPosition. Then use that position as a baseline to calculate control points for the edge's bezier.

prisma marten
#

followed you approach as you can see the edgelabel is overlapping with the button when the nodes are moved around is there any way to stick the position ?? @worn valley

<script lang="ts">
  import {
    getBezierPath,
    BaseEdge,
    type EdgeProps,
    useSvelteFlow,
    EdgeLabel,
  } from '@xyflow/svelte';

  let {
    id,
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
    markerEnd,
    style,
  }: EdgeProps = $props();

  let [edgePath, labelX, labelY] = $derived(
    getBezierPath({
      sourceX,
      sourceY,
      sourcePosition,
      targetX,
      targetY,
      targetPosition,
    }),
  );

  $inspect(labelX, labelY);

  const { deleteElements } = useSvelteFlow();

  const onEdgeClick = () => {
    deleteElements({ edges: [{ id }] });
  }
</script>

<BaseEdge path={edgePath} {markerEnd} {style} />
<EdgeLabel x={labelX + 10} y={labelY - 10}>
  <button onclick={onEdgeClick} class="border rounded-4xl bg-amber-300"> × </button>
</EdgeLabel>
worn valley
#

ah yes you have to

.svelte-flow {
    --xy-edge-label-background-color: transparent;
}

in your toplevel css

prisma marten
#

understood this will set the background to transparent but still is there any way to not let the Edgelable cross the path while the edges are being moved and stick to one side, if not possible it's ok i understand, once again thank you so much for taking your time and patiently answering all my silly Questions @worn valley

worn valley
#

Hmm, I'm not sure. Worst case you'll have to manually calculate a position where the bezier curve doesn't intersect. Since it's fine to overlap in my use-case I hadn't really given it much thought.

worn valley