Animation on node expand/collapse

[geohuz]

So here are two question acutally,

1. The node animation, as I have made custom node so the task is to animate the node position, and I have made the animation sucessfully with minor issue: the zIndex would change after click away from the previous expand/collapsed node, so as the element stacking effect the top most node changed to underneath node, this is very frustrated and my only workaround is to use "hidden" as suggested in documentation, and when the hidden set to off then breaks the expand animation as the nodes just appear all together without moving animation. So I only left with "half baked" animation.
2. The edge animation, so far I can't find a way to just simply grab an array of edges and animate them as the "source/target x/y" are omitted from the edges state (using useReactFlow()), so the only way seems to create a custom edge, although for this single animation task to create a whole workflow of creating custom edge and implement adding/deleting is so much overhead I'm still not able to figure out how to wire up things together, it looks like the custom edge type is not called even imported and declared in the Reactflow, how to make my custom edge be used when adding the node? Or is there simple way to animate edges without custom edge?

[geohuz]

Sorry it's my fault, I just changed zIndex for my custom node to -1 then the problem of node animation solved. Also I've found way to animate edges. Thanks for this great library!!!!!

[alexander-azizi-martin]

Hello! I am trying to also animate nodes and edges. Do you have any of the code for these animations available?

[geohuz]

Hi @alexander-azizi-martin sorry for the late reply, there are lots of things involved in the animation, two major parts

1. state management, I'm not familiar with the xyflow's inner managment lib, I used mobx for the folding states of all the nodes, like folding direction, fold target, show fold icon true/false. And I use @dagrejs/graphlib as utillity to populate the nodes in my store and it helps to find all the edges of a certain node like inEdges outEdges functions etc.
2. animation, once I have all the node folding related states managed in the store, I use react-spring to animate. Here is the example of the CustomEdge component I used to animate:

import { BaseEdge, getBezierPath, getSimpleBezierPath, getSmoothStepPath, 
getStraightPath } from 'reactflow';

import {observer} from 'mobx-react-lite'
import appStore from '../../stores/store'
import {reaction} from 'mobx'
import { useSpring, useSpringRef, animated } from '@react-spring/web'

const edgesGenerators = {
  "smoothstep": getSmoothStepPath, 
  "step": (params)=> getSmoothStepPath({...params, ...{borderRadius: 0}}),
  "default": getBezierPath, 
  "straight": getStraightPath
}

const AnimatedEdge = animated(BaseEdge)

const CEdge = observer(({
  id,
  source, 
  target,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  style = {},
}) => {

  const [edgePath] = edgesGenerators[appStore.edgePath]({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  });

  const api = useSpringRef()
  const getDashOffset = () => {
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); 

    path.setAttribute("d", edgePath);
    svg.appendChild(path);
    return path.getTotalLength();
  }

  const springs = useSpring({
    ref: api,
    from : {
      strokeDashoffset: 0,
      strokeDasharray: getDashOffset()
    },
  })

  let disposer = reaction (
    ()=> appStore.getTreeEdgeFold(source, target),
    (folded) => {
      let offset
      if (folded) {
        offset = getDashOffset()
      } else {
        offset = 0
      }
      api.start({
        config: {
          friction: 20,
          tension: 210
        },
        to: {
          strokeDashoffset: offset 
        }
      })
    }
  )

  useEffect(() => {
    return () => disposer()
  }, [])

  return (
    !appStore.getTreeEdgeFold(source, target) && <AnimatedEdge path={edgePath} style={{...style, ...springs}} /> 
  )
})