How to center a node on from external event

[hyper-dot]

Hi, Really sorry if I wasn't suppose to ask this question. But I really tried everything I could to center a node on render. But couldn't.
I saw the example on code sandbox. It is setting the dimention of tree container. I have also set dimention like that.

    <div
      id="treeWrapper"
      ref={containerRef}
      style={{ width: "100%", height: "100%" }}
      className="fixed"
    >
      <button onClick={handleCenterUser} className="absolute top-4 right-28">
        Center Me
      </button>

      {data ? (
        <Tree
          dimensions={dimentions}
          data={data}
          scaleExtent={{ max: 10, min: 0.3 }}
          pathFunc={stepPathFunc}
          pathClassFunc={customPathClass}
          nodeSize={nodeSize}
          translate={translate}
          orientation="vertical"
          enableLegacyTransitions
          renderCustomNodeElement={(rd3tProps: any) =>
            renderForeignObjectNode({ ...rd3tProps, foreignObjectProps })
          }
        />
</div>

  const handleCenterUser = () => {
    const user = document.getElementById("isuser");
    if (user && containerRef.current) {
      const { x, y } = user.getBoundingClientRect();
      const { height, width } = containerRef.current.getBoundingClientRect();
    }
  };

I am able to get height and width of the container and the x & y cordinates of the node that I want to center. But I am unable to center the node using translate. When I translate using those cordinates I can't move the tree freely.

[vitallygolovanov]

Just weighing in to say, that I also want to be able to trigger centering/focus on a node externally. User clicks a "show me" button, and the tree centers on their node.

[oscadev]

Any update on this? Implementing a "search" functionality and would need to A) open the search result node if it is closed, and B) need to center to it

[oscadev]

The way I wound up doing it is making a list of all the nodes with a queryselector. Each node has a "transform" attribute that has the values you must subtract from the container values like so (and then pass in translate as the translate prop on the Tree)

onGoToItem(item)
const x = item.attributes.transform.value.split(",")[0].split("(")[1];
const y = item.attributes.transform.value.split(",")[1].split(")")[0];
const width = containerRef.current.getBoundingClientRect().width;
const height = containerRef.current.getBoundingClientRect().height;
const xTranslate = width / 2 - parseFloat(x);
const yTranslate = height / 2 - parseFloat(y);

return setTranslate({ x: xTranslate, y: yTranslate });