How to disable panning for all nested elements?

[RHOOPH]

   <TransformWrapper
      panning={{ excluded: ["panningDisabled"] }}
    >
      <TransformComponent>
        <img src="image.jpg" alt="test" />
        <div className="panningDisabled">
         /* deep nested elements */
        </div>
      </TransformComponent>
    </TransformWrapper>

How to disable panning for everything inside the div without explicitly providing "panningDisabled" for each and every element.

[bigbadwofl]

In our project, we have re-usable components (e.g. nestable containers)

Our simplified DOM:

.cpnContainer
    <ZoomPanPinchHere />
        .cpnContainer (lots of these that have absolute positioning)

We have cpnContainer set as an excluded panning class and on a previous version we could pan by 'grabbing the canvas' in-between the containers. Unfortunately, since everything is inside an excluded class, this no longer works now.

Perhaps it would be cleaner to ensure that if we DO exclude an element (because it has an ancestor that is excluded) we also check that said ancestor is a child of the zoom-pan component, and not an ancestor.

I'll send through a PR with this fix. Please let me know how you feel about this. I'm happy to discuss and rework.