Bad synchronisation of the minimap when scale down.

[antony64240]

Hello,

I have a problem when I zoom on my div, the minimap container does not synchronize, when I zoom out, it works, zoom in does not work.

Voici mon code :

function Home() {
  const [zoom, setZoom] = React.useState(1);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const onWheel = (e: any) => {
      e.preventDefault();
      setZoom((value) => {
        const newZoom = value + e.deltaY * -0.001;
        if (newZoom > 0.1 && newZoom < 1) {
          return newZoom;
        } else {
          return value;
        }
      });
    };
    nodeRef.current?.addEventListener("wheel", onWheel);
    return () => {
      nodeRef.current?.removeEventListener("wheel", onWheel);
    };
  }, []);

 const renderChild = ({ width, height, left, top, node }) => {
    const classNames = ["node-content"];
    let classNameFound = null;

    node.classList.forEach((className) => {
      if (classNames.includes(className)) {
        classNameFound = className;
        return false;
      }
    });

    if (classNameFound === null)
      return <ChildComponent {...{ width, height, left, top }} />;

    return (
      <div
        style={{
          position: "absolute",
          width,
          height,
          left,
          top,
          backgroundColor: "#" + HEX[classNameFound],
        }}
      />
    );
  };

return (
    <div className="App">
      <div ref={containerRef} className={clsx("container")}>
        <Minimap selector=".node-content" childComponent={renderChild}>
          <div
            ref={nodeRef}
            style={{ scale: zoom }}
            className="flex select-none"
          >
            <NodeComponent type="root" node={nodeRoot} />
          </div>
        </Minimap>
      </div>
    </div>
  );
}

export default Home;

If you have the solution to my problem, I'll take it. Thx, have a good one!