show node feature (request+ simple implementation)

[Iftahh]

• Feature description:
  An API function that, given a node inside the SVG diagram will pan and zoom to show this element (ie. show area around its bounding box).

• Reasons for adopting new feature It is useful when showing SVG for things such as diagrams, maps, etc.. you would programmatically allow the developer to select a node (eg. by using svg.getElementById or other DOM API) and show it to the user by doing something like panzoom.showNode(node)

• Is this a breaking change? (How will this affect existing functionality) Not a breaking change at all. It introduces easier panning/zooming to a node which is compatible with the existing panning API.

---

I needed this feature so implemented it myself, I don't have the time to do a proper pull-request - so I'm dropping it here if someone needs something similar, or wants to pick-up the work and do a PR.

    function showNode(node) {
            const bbox = node.getBBox();

            // pan so the node is at the center
            const { width, height, realZoom } = this.getSizes()
            this.pan({
              x: -realZoom * (bbox.x - width / (realZoom * 2) + bbox.width / 2),
              y: -realZoom * (bbox.y - height / (realZoom * 2) + bbox.height / 2)
            })

            // we want to zoom in to see just around the node -
            const relativeZoom = this.getZoom();
             // this formula below could be improved... I found it worked nicely for my usecases but maybe it should controlled by a 2nd parameter to this function
            const desiredWidth = 50 * Math.sqrt(bbox.width / 25) * 11 * realZoom;   
            this.zoom(relativeZoom * width / desiredWidth)
     }

[rmelchner]

+1 this is such a nice feature

[ItsLefty]

Hi there! Can anybody tell me how to use the function above? I'm still learning JavaScript. I have a SVG mind map with a bunch of groups. On click of each groups its children are revealed. Now I want to use this function in order to center the clicked group. So I have copied the code above into my JS, then on the event-click-handler of the group I call shownode(); Sadly it is not working and in the console it says: Cannot read properties of undefined (reading 'getBBox')

Any help would be appreciated! :)