How to zoom in and out like the panel in the storybook

[lorenzosjb]

Please update the documentation on how to use a panel to zoom in and out like the Storybook first example.

Thanks.

[daniel-hauser]

The zoom is implemented in the storybook infra and is not part of this library.

You can use the non-standard zoom CSS property to add zoom support to the tree component.

[ycdaskin]

for those who wants a solution for this, here my code:

const HierarchyPage = () => {

    const [scale, setScale] = useState(1)

    const handleWheel = e => {
        e.preventDefault();
        if (e.deltaY < 0) {
           // zoom in
            setScale(Math.min(scale + 0.05, 5)); // maximum scale factor is 5
        } else {
            // zoom out
            setScale(Math.max(0.1, scale - 0.05)); // scale cannot be negative. negative scales make it up side down
        }
    }

    return (
            <div
                onWheel={handleWheel}
                style={{
                    transform: `scale(${scale})`,
                    transition: 'transform 0.2s',
                }}
            >
                <Tree label={"Root"}>
                    <TreeNode label={"child"} >
                        <TreeNode label={"grand child"} />       
                              ...
                     </TreeNode>
                         ...
                </Tree>
            </div>
    )
}